dev3000 0.0.24 → 0.0.30

package/dist/dev-environment.js

@@ -1,11 +1,11 @@
 import { spawn } from 'child_process';
-import { chromium } from 'playwright';
 import { writeFileSync, appendFileSync, mkdirSync, existsSync, copyFileSync, readFileSync, cpSync, lstatSync, symlinkSync, unlinkSync, readdirSync, statSync } from 'fs';
 import { join, dirname, basename } from 'path';
 import { fileURLToPath } from 'url';
 import { tmpdir } from 'os';
 import chalk from 'chalk';
 import * as cliProgress from 'cli-progress';
+import { CDPMonitor } from './cdp-monitor.js';
 class Logger {
     logFile;
     constructor(logFile) {
@@ -24,15 +24,6 @@ class Logger {
         appendFileSync(this.logFile, logEntry);
     }
 }
-function detectPackageManager() {
-    if (existsSync('pnpm-lock.yaml'))
-        return 'pnpx';
-    if (existsSync('yarn.lock'))
-        return 'yarn dlx';
-    if (existsSync('package-lock.json'))
-        return 'npx';
-    return 'npx'; // fallback
-}
 function detectPackageManagerForRun() {
     if (existsSync('pnpm-lock.yaml'))
         return 'pnpm';
@@ -116,11 +107,8 @@ function pruneOldLogs(baseDir, cwdName) {
 export class DevEnvironment {
     serverProcess = null;
     mcpServerProcess = null;
-    browser = null;
-    browserContext = null;
+    cdpMonitor = null;
     logger;
-    stateTimer = null;
-    browserType = null;
     options;
     screenshotDir;
     mcpPublicDir;
@@ -144,9 +132,19 @@ export class DevEnvironment {
             const packageJsonPath = join(packageRoot, 'package.json');
             const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'));
             this.version = packageJson.version;
-            // Add -dev suffix for local development installs
-            if (packageRoot.includes('vercel-labs/dev3000')) {
-                this.version += '-dev';
+            // Use git to detect if we're in the dev3000 source repository
+            try {
+                const { execSync } = require('child_process');
+                const gitRemote = execSync('git remote get-url origin 2>/dev/null', {
+                    cwd: packageRoot,
+                    encoding: 'utf8'
+                }).trim();
+                if (gitRemote.includes('vercel-labs/dev3000') && !this.version.includes('canary')) {
+                    this.version += '-local';
+                }
+            }
+            catch {
+                // Not in git repo or no git - use version as-is
             }
         }
         catch (error) {
@@ -168,11 +166,6 @@ export class DevEnvironment {
             mkdirSync(this.mcpPublicDir, { recursive: true });
         }
     }
-    debugLog(message) {
-        if (this.options.debug) {
-            console.log(chalk.gray(`[DEBUG] ${message}`));
-        }
-    }
     async checkPortsAvailable() {
         const ports = [this.options.port, this.options.mcpPort];
         for (const port of ports) {
@@ -221,8 +214,8 @@ export class DevEnvironment {
         this.progressBar.update(60, { stage: 'Waiting for MCP server...' });
         await this.waitForMcpServer();
         this.progressBar.update(80, { stage: 'Starting browser...' });
-        // Start browser monitoring but don't wait for full setup
-        this.startBrowserMonitoringAsync();
+        // Start CDP monitoring but don't wait for full setup
+        this.startCDPMonitoringAsync();
         this.progressBar.update(100, { stage: 'Complete!' });
         // Stop progress bar and show results immediately
         this.progressBar.stop();
@@ -231,7 +224,7 @@ export class DevEnvironment {
         console.log(chalk.blue(`Logs symlink: /tmp/dev3000.log`));
         console.log(chalk.yellow('☝️ Give this to an AI to auto debug and fix your app\n'));
         console.log(chalk.blue(`🌐 Your App: http://localhost:${this.options.port}`));
-        console.log(chalk.blue(`🤖 MCP Server: http://localhost:${this.options.mcpPort}/api/mcp/http`));
+        console.log(chalk.blue(`🤖 MCP Server: http://localhost:${this.options.mcpPort}/api/mcp/mcp`));
         console.log(chalk.magenta(`📸 Visual Timeline: http://localhost:${this.options.mcpPort}/logs`));
         console.log(chalk.gray('\n💡 To stop all servers and kill dev3000: Ctrl-C'));
     }
@@ -270,18 +263,28 @@ export class DevEnvironment {
             console.log(chalk.red(`Server process exited with code ${code}`));
         });
     }
+    debugLog(message) {
+        if (this.options.debug) {
+            console.log(`[MCP DEBUG] ${message}`);
+        }
+    }
     async startMcpServer() {
+        this.debugLog('Starting MCP server setup');
         // Get the path to our bundled MCP server
         const currentFile = fileURLToPath(import.meta.url);
         const packageRoot = dirname(dirname(currentFile)); // Go up from dist/ to package root
         const mcpServerPath = join(packageRoot, 'mcp-server');
+        this.debugLog(`MCP server path: ${mcpServerPath}`);
         if (!existsSync(mcpServerPath)) {
             throw new Error(`MCP server directory not found at ${mcpServerPath}`);
         }
+        this.debugLog('MCP server directory found');
         // Check if MCP server dependencies are installed, install if missing
         const isGlobalInstall = mcpServerPath.includes('.pnpm');
+        this.debugLog(`Is global install: ${isGlobalInstall}`);
         let nodeModulesPath = join(mcpServerPath, 'node_modules');
         let actualWorkingDir = mcpServerPath;
+        this.debugLog(`Node modules path: ${nodeModulesPath}`);
         if (isGlobalInstall) {
             const tmpDirPath = join(tmpdir(), 'dev3000-mcp-deps');
             nodeModulesPath = join(tmpDirPath, 'node_modules');
@@ -292,15 +295,13 @@ export class DevEnvironment {
                 mkdirSync(this.screenshotDir, { recursive: true });
             }
         }
-        if (!existsSync(nodeModulesPath)) {
-            // Hide progress bar during installation
-            this.progressBar.stop();
-            console.log(chalk.blue('\n📦 Installing MCP server dependencies (first time only)...'));
-            await this.installMcpServerDeps(mcpServerPath);
-            console.log(''); // Add spacing
-            // Resume progress bar
-            this.progressBar.start(100, 20, { stage: 'Starting MCP server...' });
-        }
+        // Always install dependencies to ensure they're up to date
+        this.debugLog('Installing/updating MCP server dependencies');
+        this.progressBar.stop();
+        console.log(chalk.blue('\n📦 Installing MCP server dependencies...'));
+        await this.installMcpServerDeps(mcpServerPath);
+        console.log(''); // Add spacing
+        this.progressBar.start(100, 20, { stage: 'Starting MCP server...' });
         // Use version already read in constructor
         // For global installs, ensure all necessary files are copied to temp directory
         if (isGlobalInstall && actualWorkingDir !== mcpServerPath) {
@@ -343,6 +344,9 @@ export class DevEnvironment {
         }
         // Start the MCP server using detected package manager
         const packageManagerForRun = detectPackageManagerForRun();
+        this.debugLog(`Using package manager: ${packageManagerForRun}`);
+        this.debugLog(`MCP server working directory: ${actualWorkingDir}`);
+        this.debugLog(`MCP server port: ${this.options.mcpPort}`);
         this.mcpServerProcess = spawn(packageManagerForRun, ['run', 'dev'], {
             stdio: ['ignore', 'pipe', 'pipe'],
             shell: true,
@@ -355,6 +359,7 @@ export class DevEnvironment {
                 DEV3000_VERSION: this.version, // Pass version to MCP server
             },
         });
+        this.debugLog('MCP server process spawned');
         // Log MCP server output to separate file for debugging
         const mcpLogFile = join(dirname(this.options.logFile), 'dev3000-mcp.log');
         writeFileSync(mcpLogFile, ''); // Clear the file
@@ -377,136 +382,13 @@ export class DevEnvironment {
             }
         });
         this.mcpServerProcess.on('exit', (code) => {
+            this.debugLog(`MCP server process exited with code ${code}`);
             // Only show exit messages for unexpected failures, not restarts
             if (code !== 0 && code !== null) {
                 this.logger.log('server', `MCP server process exited with code ${code}`);
             }
         });
-    }
-    startStateSaving() {
-        if (this.stateTimer) {
-            clearInterval(this.stateTimer);
-        }
-        // Start continuous autosave timer (no focus dependency since it's non-intrusive)
-        this.stateTimer = setInterval(async () => {
-            if (this.browserContext) {
-                try {
-                    this.debugLog('Running periodic context autosave (non-intrusive)...');
-                    await this.saveStateManually();
-                    this.debugLog('Context autosave completed successfully');
-                }
-                catch (error) {
-                    const errorMessage = error instanceof Error ? error.message : String(error);
-                    this.debugLog(`Context autosave failed: ${errorMessage}`);
-                    // If context is closed, stop the timer
-                    if (errorMessage.includes('closed') || errorMessage.includes('destroyed')) {
-                        this.debugLog('Browser context appears closed, stopping autosave timer');
-                        this.stopStateSaving();
-                    }
-                }
-            }
-        }, 15000); // Save every 15 seconds
-    }
-    stopStateSaving() {
-        if (this.stateTimer) {
-            clearInterval(this.stateTimer);
-            this.stateTimer = null;
-        }
-    }
-    async saveStateManually() {
-        if (!this.browserContext)
-            return;
-        const stateDir = this.options.profileDir;
-        const cookiesFile = join(stateDir, 'cookies.json');
-        const storageFile = join(stateDir, 'storage.json');
-        try {
-            // Save cookies (non-intrusive)
-            const cookies = await this.browserContext.cookies();
-            writeFileSync(cookiesFile, JSON.stringify(cookies, null, 2));
-            // Save localStorage and sessionStorage from current pages (non-intrusive)
-            const pages = this.browserContext.pages();
-            if (pages.length > 0) {
-                const page = pages[0]; // Use first page to avoid creating new ones
-                if (!page.isClosed()) {
-                    const storageData = await page.evaluate(() => {
-                        return {
-                            localStorage: JSON.stringify(localStorage),
-                            sessionStorage: JSON.stringify(sessionStorage),
-                            url: window.location.href
-                        };
-                    });
-                    writeFileSync(storageFile, JSON.stringify(storageData, null, 2));
-                }
-            }
-        }
-        catch (error) {
-            // Re-throw to be handled by caller
-            throw error;
-        }
-    }
-    async loadStateManually() {
-        if (!this.browserContext)
-            return;
-        const stateDir = this.options.profileDir;
-        const cookiesFile = join(stateDir, 'cookies.json');
-        const storageFile = join(stateDir, 'storage.json');
-        try {
-            // Load cookies if they exist
-            if (existsSync(cookiesFile)) {
-                const cookies = JSON.parse(readFileSync(cookiesFile, 'utf8'));
-                if (Array.isArray(cookies) && cookies.length > 0) {
-                    await this.browserContext.addCookies(cookies);
-                    this.debugLog(`Restored ${cookies.length} cookies`);
-                }
-            }
-            // Load storage data for later restoration (we'll apply it after page navigation)
-            if (existsSync(storageFile)) {
-                const storageData = JSON.parse(readFileSync(storageFile, 'utf8'));
-                if (storageData.localStorage || storageData.sessionStorage) {
-                    // Store this for restoration after page loads
-                    this.browserContext._dev3000_storageData = storageData;
-                    this.debugLog('Loaded storage data for restoration');
-                }
-            }
-        }
-        catch (error) {
-            this.debugLog(`Failed to load saved state: ${error instanceof Error ? error.message : String(error)}`);
-        }
-    }
-    async restoreStorageData(page) {
-        if (!this.browserContext || page.isClosed())
-            return;
-        const storageData = this.browserContext._dev3000_storageData;
-        if (!storageData)
-            return;
-        try {
-            await page.evaluate((data) => {
-                // Restore localStorage
-                if (data.localStorage) {
-                    const localStorageData = JSON.parse(data.localStorage);
-                    Object.keys(localStorageData).forEach(key => {
-                        localStorage.setItem(key, localStorageData[key]);
-                    });
-                }
-                // Restore sessionStorage
-                if (data.sessionStorage) {
-                    const sessionStorageData = JSON.parse(data.sessionStorage);
-                    Object.keys(sessionStorageData).forEach(key => {
-                        sessionStorage.setItem(key, sessionStorageData[key]);
-                    });
-                }
-            }, storageData);
-            this.debugLog('Restored localStorage and sessionStorage');
-            // Clear the stored data since it's been applied
-            delete this.browserContext._dev3000_storageData;
-        }
-        catch (error) {
-            this.debugLog(`Failed to restore storage data: ${error instanceof Error ? error.message : String(error)}`);
-        }
-    }
-    async setupFocusHandlers(page) {
-        // Note: Focus handlers removed since autosave is now continuous and non-intrusive
-        // The autosave timer will detect context closure through its own error handling
+        this.debugLog('MCP server event handlers setup complete');
     }
     async waitForServer() {
         const maxAttempts = 30;
@@ -625,409 +507,56 @@ export class DevEnvironment {
         let attempts = 0;
         while (attempts < maxAttempts) {
             try {
+                // Test the actual MCP endpoint
                 const response = await fetch(`http://localhost:${this.options.mcpPort}`, {
                     method: 'HEAD',
                     signal: AbortSignal.timeout(2000)
                 });
-                if (response.ok || response.status === 404) {
+                this.debugLog(`MCP server health check: ${response.status}`);
+                if (response.status === 500) {
+                    const errorText = await response.text();
+                    this.debugLog(`MCP server 500 error: ${errorText}`);
+                }
+                if (response.ok || response.status === 404) { // 404 is OK - means server is responding
                     return;
                 }
             }
             catch (error) {
-                // MCP server not ready yet, continue waiting
+                this.debugLog(`MCP server not ready (attempt ${attempts}): ${error}`);
             }
             attempts++;
             await new Promise(resolve => setTimeout(resolve, 1000));
         }
-        // Continue anyway if health check fails
+        this.debugLog('MCP server health check failed, terminating');
+        throw new Error(`MCP server failed to start after ${maxAttempts} seconds. Check the logs for errors.`);
     }
-    startBrowserMonitoringAsync() {
-        // Start browser monitoring in background without blocking completion
-        this.startBrowserMonitoring().catch(error => {
-            console.error(chalk.red('⚠️ Browser monitoring setup failed:'), error);
+    startCDPMonitoringAsync() {
+        // Start CDP monitoring in background without blocking completion
+        this.startCDPMonitoring().catch(error => {
+            console.error(chalk.red('⚠️ CDP monitoring setup failed:'), error);
         });
     }
-    async startBrowserMonitoring() {
+    async startCDPMonitoring() {
         // Ensure profile directory exists
         if (!existsSync(this.options.profileDir)) {
             mkdirSync(this.options.profileDir, { recursive: true });
         }
+        // Initialize CDP monitor with enhanced logging
+        this.cdpMonitor = new CDPMonitor(this.options.profileDir, (source, message) => {
+            this.logger.log('browser', message);
+        }, this.options.debug);
         try {
-            // Try to use system Chrome first
-            this.browser = await chromium.launch({
-                headless: false,
-                channel: 'chrome', // Use system Chrome
-                // Remove automation flags to allow normal dialog behavior
-                args: [
-                    '--disable-web-security', // Keep this for dev server access
-                    '--hide-crash-restore-bubble', // Don't ask to restore pages
-                    '--disable-infobars', // Remove info bars
-                    '--disable-blink-features=AutomationControlled', // Hide automation detection
-                    '--disable-features=VizDisplayCompositor', // Reduce automation fingerprinting
-                ],
-            });
-            this.browserType = 'system-chrome';
-        }
-        catch (error) {
-            // Fallback to Playwright's bundled chromium
-            try {
-                this.browser = await chromium.launch({
-                    headless: false,
-                    // Remove automation flags to allow normal dialog behavior
-                    args: [
-                        '--disable-web-security', // Keep this for dev server access
-                        '--hide-crash-restore-bubble', // Don't ask to restore pages
-                        '--disable-infobars', // Remove info bars
-                        '--disable-blink-features=AutomationControlled', // Hide automation detection
-                        '--disable-features=VizDisplayCompositor', // Reduce automation fingerprinting
-                    ],
-                });
-                this.browserType = 'playwright-chromium';
-            }
-            catch (playwrightError) {
-                if (playwrightError.message?.includes('Executable doesn\'t exist')) {
-                    detectPackageManager();
-                    console.log(chalk.yellow('📦 Installing Playwright chromium browser...'));
-                    await this.installPlaywrightBrowsers();
-                    // Retry with bundled chromium
-                    this.browser = await chromium.launch({
-                        headless: false,
-                        // Remove automation flags to allow normal dialog behavior
-                        args: [
-                            '--disable-web-security', // Keep this for dev server access
-                            '--hide-crash-restore-bubble', // Don't ask to restore pages
-                            '--disable-infobars', // Remove info bars
-                        ],
-                    });
-                    this.browserType = 'playwright-chromium';
-                }
-                else {
-                    throw playwrightError;
-                }
-            }
-        }
-        // Create context with viewport: null to enable window resizing
-        this.browserContext = await this.browser.newContext({
-            viewport: null, // This makes the page size depend on the window size
-        });
-        // Restore state manually (non-intrusive)
-        await this.loadStateManually();
-        // Set up focus-aware periodic storage state saving
-        this.startStateSaving();
-        // Navigate to the app using the existing blank page
-        const pages = this.browserContext.pages();
-        const page = pages.length > 0 ? pages[0] : await this.browserContext.newPage();
-        // Disable automatic dialog handling - let dialogs behave naturally
-        page.removeAllListeners('dialog');
-        // Add a no-op dialog handler to prevent auto-dismissal
-        page.on('dialog', async (dialog) => {
-            // Don't accept or dismiss - let user handle it manually
-            // This prevents Playwright from auto-handling the dialog
-        });
-        await page.goto(`http://localhost:${this.options.port}`);
-        // Restore localStorage and sessionStorage after navigation
-        await this.restoreStorageData(page);
-        // Set up focus detection after navigation to prevent context execution errors
-        await this.setupFocusHandlers(page);
-        // Take initial screenshot
-        const initialScreenshot = await this.takeScreenshot(page, 'initial-load');
-        if (initialScreenshot) {
-            this.logger.log('browser', `[SCREENSHOT] ${initialScreenshot}`);
-        }
-        // Set up monitoring
-        await this.setupPageMonitoring(page);
-        // Monitor new pages
-        this.browserContext.on('page', async (newPage) => {
-            // Disable automatic dialog handling for new pages too
-            newPage.removeAllListeners('dialog');
-            // Add a no-op dialog handler to prevent auto-dismissal
-            newPage.on('dialog', async (dialog) => {
-                // Don't accept or dismiss - let user handle it manually
-            });
-            await this.setupPageMonitoring(newPage);
-        });
-    }
-    async installPlaywrightBrowsers() {
-        this.progressBar.update(75, { stage: 'Installing Playwright browser (2-3 min)...' });
-        return new Promise((resolve, reject) => {
-            const packageManager = detectPackageManager();
-            const [command, ...args] = packageManager.split(' ');
-            console.log(chalk.gray(`Running: ${command} ${[...args, 'playwright', 'install', 'chromium'].join(' ')}`));
-            const installProcess = spawn(command, [...args, 'playwright', 'install', 'chromium'], {
-                stdio: ['inherit', 'pipe', 'pipe'],
-                shell: true,
-            });
-            // Add timeout (5 minutes)
-            const timeout = setTimeout(() => {
-                installProcess.kill('SIGKILL');
-                reject(new Error('Playwright installation timed out after 5 minutes'));
-            }, 5 * 60 * 1000);
-            let hasOutput = false;
-            installProcess.stdout?.on('data', (data) => {
-                hasOutput = true;
-                const message = data.toString().trim();
-                if (message) {
-                    console.log(chalk.gray('[PLAYWRIGHT]'), message);
-                }
-            });
-            installProcess.stderr?.on('data', (data) => {
-                hasOutput = true;
-                const message = data.toString().trim();
-                if (message) {
-                    console.log(chalk.gray('[PLAYWRIGHT]'), message);
-                }
-            });
-            installProcess.on('exit', (code) => {
-                clearTimeout(timeout);
-                if (code === 0) {
-                    console.log(chalk.green('✅ Playwright chromium installed successfully!'));
-                    resolve();
-                }
-                else {
-                    reject(new Error(`Playwright installation failed with exit code ${code}`));
-                }
-            });
-            installProcess.on('error', (error) => {
-                clearTimeout(timeout);
-                reject(new Error(`Failed to start Playwright installation: ${error.message}`));
-            });
-            // Check if process seems stuck
-            setTimeout(() => {
-                if (!hasOutput) {
-                    console.log(chalk.yellow('⚠️  Installation seems stuck. This is normal for the first run - downloading ~100MB...'));
-                }
-            }, 10000); // Show message after 10 seconds of no output
-        });
-    }
-    async takeScreenshot(page, event) {
-        try {
-            const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
-            const filename = `${timestamp}-${event}.png`;
-            const screenshotPath = join(this.screenshotDir, filename);
-            await page.screenshot({
-                path: screenshotPath,
-                fullPage: false, // Just viewport for speed
-                animations: 'disabled' // Disable animations during screenshot
-            });
-            // Return web-accessible URL (no need to copy since we save directly to MCP public dir)
-            return `http://localhost:${this.options.mcpPort}/screenshots/${filename}`;
-        }
-        catch (error) {
-            console.error(chalk.red('[SCREENSHOT ERROR]'), error);
-            return null;
-        }
-    }
-    async setupPageMonitoring(page) {
-        const url = page.url();
-        // Only monitor localhost pages
-        if (!url.includes(`localhost:${this.options.port}`) && url !== 'about:blank') {
-            return;
-        }
-        this.logger.log('browser', `📄 New page: ${url}`);
-        // Console logs
-        page.on('console', async (msg) => {
-            if (page.url().includes(`localhost:${this.options.port}`)) {
-                // Handle our interaction tracking logs specially
-                const text = msg.text();
-                if (text.startsWith('[DEV3000_INTERACTION]')) {
-                    const interaction = text.replace('[DEV3000_INTERACTION] ', '');
-                    this.logger.log('browser', `[INTERACTION] ${interaction}`);
-                    return;
-                }
-                // Try to reconstruct the console message properly
-                let logMessage;
-                try {
-                    // Get all arguments from the console message
-                    const args = msg.args();
-                    if (args.length === 0) {
-                        logMessage = text;
-                    }
-                    else if (args.length === 1) {
-                        // Single argument - use text() which is already formatted
-                        logMessage = text;
-                    }
-                    else {
-                        // Multiple arguments - format them properly
-                        const argValues = await Promise.all(args.map(async (arg) => {
-                            try {
-                                const value = await arg.jsonValue();
-                                return typeof value === 'object' ? JSON.stringify(value) : String(value);
-                            }
-                            catch {
-                                return '[object]';
-                            }
-                        }));
-                        // Join all arguments with spaces (like normal console output)
-                        logMessage = argValues.join(' ');
-                    }
-                }
-                catch (error) {
-                    // Fallback to original text if args processing fails
-                    logMessage = text;
-                }
-                const level = msg.type().toUpperCase();
-                this.logger.log('browser', `[CONSOLE ${level}] ${logMessage}`);
-            }
-        });
-        // Page errors
-        page.on('pageerror', async (error) => {
-            if (page.url().includes(`localhost:${this.options.port}`)) {
-                const screenshotPath = await this.takeScreenshot(page, 'error');
-                this.logger.log('browser', `[PAGE ERROR] ${error.message}`);
-                if (screenshotPath) {
-                    this.logger.log('browser', `[SCREENSHOT] ${screenshotPath}`);
-                }
-                if (error.stack) {
-                    this.logger.log('browser', `[PAGE ERROR STACK] ${error.stack}`);
-                }
-            }
-        });
-        // Network requests
-        page.on('request', (request) => {
-            if (page.url().includes(`localhost:${this.options.port}`) && !request.url().includes(`localhost:${this.options.mcpPort}`)) {
-                this.logger.log('browser', `[NETWORK REQUEST] ${request.method()} ${request.url()}`);
-            }
-        });
-        page.on('response', async (response) => {
-            if (page.url().includes(`localhost:${this.options.port}`) && !response.url().includes(`localhost:${this.options.mcpPort}`)) {
-                const status = response.status();
-                const url = response.url();
-                if (status >= 400) {
-                    const screenshotPath = await this.takeScreenshot(page, 'network-error');
-                    this.logger.log('browser', `[NETWORK ERROR] ${status} ${url}`);
-                    if (screenshotPath) {
-                        this.logger.log('browser', `[SCREENSHOT] ${screenshotPath}`);
-                    }
-                }
-            }
-        });
-        // Navigation (only screenshot on route changes, not every navigation)
-        let lastRoute = '';
-        page.on('framenavigated', async (frame) => {
-            if (frame === page.mainFrame() && frame.url().includes(`localhost:${this.options.port}`)) {
-                const currentRoute = new URL(frame.url()).pathname;
-                this.logger.log('browser', `[NAVIGATION] ${frame.url()}`);
-                // Only screenshot if route actually changed
-                if (currentRoute !== lastRoute) {
-                    const screenshotPath = await this.takeScreenshot(page, 'route-change');
-                    if (screenshotPath) {
-                        this.logger.log('browser', `[SCREENSHOT] ${screenshotPath}`);
-                    }
-                    lastRoute = currentRoute;
-                }
-            }
-        });
-        // Set up user interaction tracking (clicks, scrolls, etc.)
-        await this.setupInteractionTracking(page);
-    }
-    async setupInteractionTracking(page) {
-        if (!page.url().includes(`localhost:${this.options.port}`)) {
-            return;
-        }
-        try {
-            // Inject interaction tracking scripts into the page (both at init and after load)
-            const trackingScript = () => {
-                // Only inject once
-                if (window.__dev3000_tracking_injected)
-                    return;
-                window.__dev3000_tracking_injected = true;
-                // Track clicks and taps
-                document.addEventListener('click', (event) => {
-                    const target = event.target;
-                    const targetSelector = target.tagName.toLowerCase() +
-                        (target.id ? `#${target.id}` : '') +
-                        (target.className ? `.${target.className.split(' ').join('.')}` : '');
-                    const interactionData = {
-                        type: 'CLICK',
-                        coordinates: { x: event.clientX, y: event.clientY },
-                        target: targetSelector,
-                        text: target.textContent?.slice(0, 50) || null,
-                        viewport: { width: window.innerWidth, height: window.innerHeight },
-                        scroll: { x: window.scrollX, y: window.scrollY }
-                    };
-                    console.log(`[DEV3000_INTERACTION] ${JSON.stringify(interactionData)}`);
-                }, true);
-                // Track touch events (mobile/tablet)
-                document.addEventListener('touchstart', (event) => {
-                    if (event.touches.length > 0) {
-                        const touch = event.touches[0];
-                        const target = event.target;
-                        const targetSelector = target.tagName.toLowerCase() +
-                            (target.id ? `#${target.id}` : '') +
-                            (target.className ? `.${target.className.split(' ').join('.')}` : '');
-                        const interactionData = {
-                            type: 'TAP',
-                            coordinates: { x: Math.round(touch.clientX), y: Math.round(touch.clientY) },
-                            target: targetSelector,
-                            text: target.textContent?.slice(0, 50) || null,
-                            viewport: { width: window.innerWidth, height: window.innerHeight },
-                            scroll: { x: window.scrollX, y: window.scrollY }
-                        };
-                        console.log(`[DEV3000_INTERACTION] ${JSON.stringify(interactionData)}`);
-                    }
-                }, true);
-                // Track scrolling with throttling to avoid spam
-                let lastScrollTime = 0;
-                let lastScrollY = window.scrollY;
-                let lastScrollX = window.scrollX;
-                document.addEventListener('scroll', () => {
-                    const now = Date.now();
-                    if (now - lastScrollTime > 500) { // Throttle to max once per 500ms
-                        const deltaY = window.scrollY - lastScrollY;
-                        const deltaX = window.scrollX - lastScrollX;
-                        if (Math.abs(deltaY) > 10 || Math.abs(deltaX) > 10) { // Only log significant scrolls
-                            const direction = deltaY > 0 ? 'DOWN' : deltaY < 0 ? 'UP' : deltaX > 0 ? 'RIGHT' : 'LEFT';
-                            const distance = Math.round(Math.sqrt(deltaX * deltaX + deltaY * deltaY));
-                            const interactionData = {
-                                type: 'SCROLL',
-                                direction: direction,
-                                distance: distance,
-                                from: { x: lastScrollX, y: lastScrollY },
-                                to: { x: window.scrollX, y: window.scrollY },
-                                viewport: { width: window.innerWidth, height: window.innerHeight }
-                            };
-                            console.log(`[DEV3000_INTERACTION] ${JSON.stringify(interactionData)}`);
-                            lastScrollTime = now;
-                            lastScrollY = window.scrollY;
-                            lastScrollX = window.scrollX;
-                        }
-                    }
-                }, true);
-                // Track keyboard events (for form interactions)
-                document.addEventListener('keydown', (event) => {
-                    const target = event.target;
-                    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.contentEditable === 'true') {
-                        const targetSelector = target.tagName.toLowerCase() +
-                            (target.id ? `#${target.id}` : '') +
-                            (target.type ? `[type=${target.type}]` : '') +
-                            (target.className ? `.${target.className.split(' ').join('.')}` : '');
-                        // Log special keys, but not every character to avoid logging sensitive data
-                        if (event.key.length > 1 || event.key === ' ') {
-                            const interactionData = {
-                                type: 'KEY',
-                                key: event.key === ' ' ? 'Space' : event.key,
-                                target: targetSelector,
-                                modifiers: {
-                                    ctrl: event.ctrlKey,
-                                    alt: event.altKey,
-                                    shift: event.shiftKey,
-                                    meta: event.metaKey
-                                },
-                                inputType: target.type || target.tagName.toLowerCase()
-                            };
-                            console.log(`[DEV3000_INTERACTION] ${JSON.stringify(interactionData)}`);
-                        }
-                    }
-                }, true);
-                // Log that tracking is active
-                console.log('[DEV3000_INTERACTION] Tracking initialized');
-            };
-            // Add to page init - this should be sufficient
-            await page.addInitScript(trackingScript);
-            // Note: Interaction logs will be captured by the existing console handler in setupPageMonitoring
+            // Start CDP monitoring
+            await this.cdpMonitor.start();
+            this.logger.log('browser', '[CDP] Chrome launched with DevTools Protocol monitoring');
+            // Navigate to the app
+            await this.cdpMonitor.navigateToApp(this.options.port);
+            this.logger.log('browser', `[CDP] Navigated to http://localhost:${this.options.port}`);
         }
         catch (error) {
-            console.warn('Could not set up interaction tracking:', error);
+            // Log error but don't crash - we want the servers to keep running
+            this.logger.log('browser', `[CDP ERROR] Failed to start CDP monitoring: ${error}`);
+            console.error(chalk.red('⚠️ CDP monitoring failed, but servers are still running'));
         }
     }
     setupCleanupHandlers() {
@@ -1058,42 +587,15 @@ export class DevEnvironment {
                 killPortProcess(this.options.port, 'your app server'),
                 killPortProcess(this.options.mcpPort, 'dev3000 MCP server')
             ]);
-            // Clear the state saving timer
-            this.stopStateSaving();
-            // Try to save browser state quickly (with timeout) - non-intrusive
-            if (this.browserContext) {
-                try {
-                    console.log(chalk.blue('💾 Saving browser state...'));
-                    const savePromise = this.saveStateManually();
-                    const timeoutPromise = new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), 2000));
-                    await Promise.race([savePromise, timeoutPromise]);
-                    console.log(chalk.green('✅ Browser state saved'));
-                }
-                catch (error) {
-                    console.log(chalk.gray('⚠️ Could not save browser state (timed out)'));
-                }
-            }
-            // Close browser quickly (with timeout)
-            if (this.browser) {
+            // Shutdown CDP monitor
+            if (this.cdpMonitor) {
                 try {
-                    if (this.browserType === 'system-chrome') {
-                        console.log(chalk.blue('🔄 Closing browser tab (keeping Chrome open)...'));
-                    }
-                    else {
-                        console.log(chalk.blue('🔄 Closing browser...'));
-                    }
-                    const closePromise = this.browser.close();
-                    const timeoutPromise = new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), 2000));
-                    await Promise.race([closePromise, timeoutPromise]);
-                    console.log(chalk.green('✅ Browser closed'));
+                    console.log(chalk.blue('🔄 Closing CDP monitor...'));
+                    await this.cdpMonitor.shutdown();
+                    console.log(chalk.green('✅ CDP monitor closed'));
                 }
                 catch (error) {
-                    if (this.browserType === 'system-chrome') {
-                        console.log(chalk.gray('⚠️ Chrome tab close failed (this is normal - your Chrome stays open)'));
-                    }
-                    else {
-                        console.log(chalk.gray('⚠️ Browser close timed out'));
-                    }
+                    console.log(chalk.gray('⚠️ CDP monitor shutdown failed'));
                 }
             }
             console.log(chalk.green('✅ Cleanup complete'));