@dynamicu/chromedebug-mcp 2.6.6 → 2.7.0

package/src/legacy/chrome-controller-old.js

@@ -1,1406 +0,0 @@
-import puppeteer from 'puppeteer';
-import multer from 'multer';
-import fs from 'fs/promises';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { findAvailablePort } from './utils.js';
-import { sharedStorage } from './shared-storage.js';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-export class ChromeController {
-  constructor() {
-    this.browser = null;
-    this.page = null;
-    this.client = null;
-    this.paused = false;
-    this.logs = [];
-    this.debugPort = null;
-    this.defaultTimeout = 10000; // 10 seconds default timeout
-    
-    // Store currently selected element information
-    this.selectedElement = null;
-    
-    // Recording storage
-    this.recordings = new Map();
-    
-    // Connection monitoring
-    this.heartbeatInterval = null;
-    
-    // Setup multer for handling file uploads
-    this.upload = multer({ 
-      storage: multer.memoryStorage(),
-      limits: { fileSize: 100 * 1024 * 1024 } // 100MB limit
-    }).fields([
-      { name: 'logs', maxCount: 1 },
-      { name: 'duration', maxCount: 1 }
-    ]);
-  }
-
-  // Helper method to add timeout to any promise
-  withTimeout(promise, timeoutMs = this.defaultTimeout, operation = 'operation') {
-    return Promise.race([
-      promise,
-      new Promise((_, reject) => {
-        setTimeout(() => {
-          reject(new Error(`${operation} timed out after ${timeoutMs}ms`));
-        }, timeoutMs);
-      })
-    ]);
-  }
-
-  // Helper method to kill Chrome processes using the debug port
-  async killChromeProcesses() {
-    try {
-      if (this.debugPort) {
-        const { exec } = await import('child_process');
-        const { promisify } = await import('util');
-        const execAsync = promisify(exec);
-        
-        // Kill any Chrome processes using our debug port
-        await execAsync(`lsof -ti:${this.debugPort} | xargs kill -9`).catch(() => {
-          // Ignore errors if no processes found
-        });
-      }
-    } catch (error) {
-      console.error('Error killing Chrome processes:', error.message);
-    }
-  }
-
-  async launch() {
-    try {
-      // Check if browser is still connected
-      if (this.browser) {
-        try {
-          // Test if the browser is still responsive
-          await this.browser.version();
-        } catch (e) {
-          // Browser is disconnected, clean up
-          console.error('Previous browser instance is disconnected, cleaning up...');
-          this.browser = null;
-          this.page = null;
-          this.client = null;
-        }
-      }
-      
-      // Close any existing browser instance
-      if (this.browser) {
-        await this.close();
-      }
-      
-      // Try to connect to existing Chrome instance first
-      console.error('Attempting to connect to existing Chrome instance...');
-      
-      // Common debugging ports
-      const commonPorts = [9222, 9223, 9224, 9225, 9229];
-      let connected = false;
-      
-      for (const port of commonPorts) {
-        try {
-          console.error(`Trying to connect to Chrome on port ${port}...`);
-          this.browser = await puppeteer.connect({
-            browserURL: `http://localhost:${port}`,
-            defaultViewport: null
-          });
-          
-          this.debugPort = port;
-          connected = true;
-          console.error(`Successfully connected to existing Chrome on port ${port}`);
-          break;
-        } catch (e) {
-          // Continue to next port
-        }
-      }
-      
-      if (!connected) {
-        // If no existing Chrome found, launch a new one
-        console.error('No existing Chrome found with debugging enabled. Launching new instance...');
-        console.error('To connect to existing Chrome, start it with: --remote-debugging-port=9222');
-        
-        // Find an available port for Chrome debugging
-        this.debugPort = await findAvailablePort(9222, 9322);
-        
-        // Kill any stuck Chrome processes on this port
-        await this.killChromeProcesses();
-        
-        console.error(`Launching Chrome with debugging port ${this.debugPort}`);
-        
-        // Detect Chrome executable path based on platform
-        let executablePath;
-        const platform = process.platform;
-        
-        if (platform === 'darwin') {
-          // macOS
-          executablePath = '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome';
-        } else if (platform === 'win32') {
-          // Windows
-          executablePath = 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe';
-          // Try alternative paths if the first doesn't exist
-          const fs = await import('fs');
-          if (!fs.existsSync(executablePath)) {
-            executablePath = 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe';
-          }
-        } else {
-          // Linux
-          executablePath = '/usr/bin/google-chrome';
-        }
-        
-        console.error(`Using Chrome executable: ${executablePath}`);
-        
-        this.browser = await this.withTimeout(
-          puppeteer.launch({
-            headless: false,
-            executablePath: executablePath,
-            args: [
-              `--remote-debugging-port=${this.debugPort}`,
-              '--no-first-run',
-              '--no-default-browser-check'
-            ],
-            defaultViewport: null,
-            ignoreDefaultArgs: ['--disable-extensions']
-          }),
-          30000, // 30 seconds for browser launch
-          'browser launch'
-        );
-      }
-      
-      // Set up disconnect handler
-      this.browser.on('disconnected', () => {
-        console.error('Browser disconnected');
-        this.browser = null;
-        this.page = null;
-        this.client = null;
-        this.stopHeartbeat();
-      });
-      
-      // Start heartbeat monitoring
-      this.startHeartbeat();
-    } catch (error) {
-      throw new Error(`Failed to connect to Chrome: ${error.message}. Make sure Chrome is running with --remote-debugging-port=9222`);
-    }
-
-    const pages = await this.withTimeout(
-      this.browser.pages(),
-      this.defaultTimeout,
-      'get browser pages'
-    );
-    this.page = pages[0] || await this.withTimeout(
-      this.browser.newPage(),
-      this.defaultTimeout,
-      'create new page'
-    );
-    
-    this.client = await this.withTimeout(
-      this.page.createCDPSession(),
-      this.defaultTimeout,
-      'create CDP session'
-    );
-    
-    await this.withTimeout(
-      Promise.all([
-        this.client.send('Debugger.enable'),
-        this.client.send('Runtime.enable'),
-        this.client.send('Console.enable')
-      ]),
-      this.defaultTimeout,
-      'enable CDP domains'
-    );
-    
-    this.client.on('Debugger.paused', () => {
-      this.paused = true;
-    });
-    
-    this.client.on('Debugger.resumed', () => {
-      this.paused = false;
-    });
-    
-    this.client.on('Console.messageAdded', (params) => {
-      this.logs.push({
-        level: params.message.level,
-        text: params.message.text,
-        timestamp: new Date().toISOString()
-      });
-      if (this.logs.length > 100) {
-        this.logs.shift();
-      }
-    });
-    
-    const browserProcess = this.browser.process();
-    const processId = browserProcess ? browserProcess.pid : 'unknown';
-    
-    return {
-      browserWSEndpoint: this.browser.wsEndpoint(),
-      debuggerUrl: `ws://localhost:${this.debugPort}/devtools/browser/${processId}`,
-      debugPort: this.debugPort
-    };
-  }
-
-  async connectToExisting(port = 9222) {
-    try {
-      // Close any existing connection
-      if (this.browser) {
-        await this.close();
-      }
-      
-      console.error(`Attempting to connect to Chrome on port ${port}...`);
-      
-      // Try to connect to the specified port
-      this.browser = await puppeteer.connect({
-        browserURL: `http://localhost:${port}`,
-        defaultViewport: null
-      });
-      
-      this.debugPort = port;
-      console.error(`Successfully connected to existing Chrome on port ${port}`);
-      
-      // Set up disconnect handler
-      this.browser.on('disconnected', () => {
-        console.error('Browser disconnected');
-        this.browser = null;
-        this.page = null;
-        this.client = null;
-        this.stopHeartbeat();
-      });
-      
-      // Start heartbeat monitoring
-      this.startHeartbeat();
-      
-      // Get pages and set up CDP
-      const pages = await this.withTimeout(
-        this.browser.pages(),
-        this.defaultTimeout,
-        'get browser pages'
-      );
-      this.page = pages[0] || await this.withTimeout(
-        this.browser.newPage(),
-        this.defaultTimeout,
-        'create new page'
-      );
-      
-      this.client = await this.withTimeout(
-        this.page.createCDPSession(),
-        this.defaultTimeout,
-        'create CDP session'
-      );
-      
-      await this.withTimeout(
-        Promise.all([
-          this.client.send('Debugger.enable'),
-          this.client.send('Runtime.enable'),
-          this.client.send('Console.enable')
-        ]),
-        this.defaultTimeout,
-        'enable CDP domains'
-      );
-      
-      this.client.on('Debugger.paused', () => {
-        this.paused = true;
-      });
-      
-      this.client.on('Debugger.resumed', () => {
-        this.paused = false;
-      });
-      
-      this.client.on('Console.messageAdded', (params) => {
-        this.logs.push({
-          level: params.message.level,
-          text: params.message.text,
-          timestamp: new Date().toISOString()
-        });
-        if (this.logs.length > 100) {
-          this.logs.shift();
-        }
-      });
-      
-      return {
-        success: true,
-        message: `Connected to existing Chrome instance on port ${port}`,
-        browserWSEndpoint: this.browser.wsEndpoint(),
-        debugPort: this.debugPort
-      };
-    } catch (error) {
-      throw new Error(`Failed to connect to Chrome on port ${port}: ${error.message}. Make sure Chrome is running with --remote-debugging-port=${port}`);
-    }
-  }
-
-  async isConnected() {
-    if (!this.browser) return false;
-    try {
-      await this.withTimeout(
-        this.browser.version(),
-        5000,
-        'browser version check'
-      );
-      return true;
-    } catch (e) {
-      return false;
-    }
-  }
-
-  async ensureConnected() {
-    if (!await this.isConnected()) {
-      // Try to reconnect to the last known port if we had a connection before
-      if (this.debugPort) {
-        console.log(`Connection lost. Attempting to reconnect to Chrome on port ${this.debugPort}...`);
-        try {
-          await this.connectToExisting(this.debugPort);
-          console.log('Successfully reconnected to Chrome');
-          return;
-        } catch (error) {
-          console.error(`Failed to reconnect: ${error.message}`);
-        }
-      }
-      
-      throw new Error('Chrome not connected. Please launch Chrome first using launch_chrome or connect to an existing instance using connect_to_existing_chrome.');
-    }
-  }
-
-  async navigateTo(url) {
-    await this.ensureConnected();
-    if (!this.page) throw new Error('No page available');
-    
-    try {
-      await this.withTimeout(
-        this.page.goto(url, { waitUntil: 'domcontentloaded' }),
-        30000,
-        `navigate to ${url}`
-      );
-      return { status: 'success', url };
-    } catch (error) {
-      throw new Error(`Failed to navigate to ${url}: ${error.message}`);
-    }
-  }
-
-  async pause() {
-    await this.ensureConnected();
-    if (!this.client) throw new Error('Chrome not connected');
-    await this.withTimeout(
-      this.client.send('Debugger.pause'),
-      this.defaultTimeout,
-      'pause execution'
-    );
-    return { status: 'paused' };
-  }
-
-  async resume() {
-    await this.ensureConnected();
-    if (!this.client) throw new Error('Chrome not connected');
-    await this.withTimeout(
-      this.client.send('Debugger.resume'),
-      this.defaultTimeout,
-      'resume execution'
-    );
-    return { status: 'resumed' };
-  }
-
-  async stepOver() {
-    await this.ensureConnected();
-    if (!this.client) throw new Error('Chrome not connected');
-    await this.withTimeout(
-      this.client.send('Debugger.stepOver'),
-      this.defaultTimeout,
-      'step over'
-    );
-    return { status: 'stepped' };
-  }
-
-  async evaluate(expression) {
-    await this.ensureConnected();
-    if (!this.client) throw new Error('Chrome not connected');
-    
-    try {
-      const result = await this.withTimeout(
-        this.client.send('Runtime.evaluate', {
-          expression: expression,
-          returnByValue: true,
-          generatePreview: true
-        }),
-        this.defaultTimeout,
-        'JavaScript evaluation'
-      );
-      
-      if (result.exceptionDetails) {
-        return {
-          error: true,
-          message: result.exceptionDetails.text || 'Evaluation error',
-          exception: result.exceptionDetails
-        };
-      }
-      
-      return {
-        result: result.result.value,
-        type: result.result.type,
-        className: result.result.className
-      };
-    } catch (error) {
-      return {
-        error: true,
-        message: error.message
-      };
-    }
-  }
-
-  async getScopes() {
-    await this.ensureConnected();
-    if (!this.client) throw new Error('Chrome not connected');
-    
-    try {
-      const { callFrames } = await this.client.send('Debugger.getStackTrace');
-      
-      if (!callFrames || callFrames.length === 0) {
-        return { scopes: [], message: 'No active call frames' };
-      }
-      
-      const topFrame = callFrames[0];
-      const scopes = [];
-      
-      for (const scope of topFrame.scopeChain) {
-        const scopeInfo = {
-          type: scope.type,
-          name: scope.name,
-          variables: {}
-        };
-        
-        if (scope.object && scope.object.objectId) {
-          const { result } = await this.client.send('Runtime.getProperties', {
-            objectId: scope.object.objectId,
-            ownProperties: true
-          });
-          
-          for (const prop of result) {
-            if (prop.value) {
-              scopeInfo.variables[prop.name] = {
-                value: prop.value.value,
-                type: prop.value.type
-              };
-            }
-          }
-        }
-        
-        scopes.push(scopeInfo);
-      }
-      
-      return { scopes };
-    } catch (error) {
-      return {
-        error: true,
-        message: error.message || 'Failed to get scopes'
-      };
-    }
-  }
-
-  async setBreakpoint(url, lineNumber) {
-    await this.ensureConnected();
-    if (!this.client) throw new Error('Chrome not connected');
-    
-    try {
-      const result = await this.withTimeout(
-        this.client.send('Debugger.setBreakpointByUrl', {
-          url: url,
-          lineNumber: lineNumber
-        }),
-        this.defaultTimeout,
-        'set breakpoint'
-      );
-      
-      return {
-        breakpointId: result.breakpointId,
-        locations: result.locations
-      };
-    } catch (error) {
-      return {
-        error: true,
-        message: error.message
-      };
-    }
-  }
-
-  getLogs() {
-    return { logs: this.logs };
-  }
-
-  async takeScreenshot(options = {}) {
-    await this.ensureConnected();
-    if (!this.page) throw new Error('Chrome not connected');
-    
-    try {
-      const screenshotOptions = {
-        type: options.type || 'jpeg', // Default to JPEG for better compression
-        fullPage: options.fullPage !== false
-      };
-      
-      // Always use lowRes mode unless explicitly disabled
-      // This MCP is designed for AI processing, not human viewing
-      if (options.lowRes !== false) {
-        // Get current viewport
-        const viewport = this.page.viewport();
-        
-        // Set ultra aggressive quality for JPEG (matching frame capture settings)
-        if (screenshotOptions.type === 'jpeg' || screenshotOptions.type === 'jpg') {
-          screenshotOptions.quality = options.quality || 30; // 30% quality for consistency with frame capture
-        }
-        
-        // For low-res mode, always resize viewport to small size
-        let originalViewport = null;
-        const targetWidth = 320; // Mobile-sized width for minimal tokens
-        const targetHeight = 568; // iPhone SE sized height
-        
-        if (viewport) {
-          originalViewport = viewport;
-          // Always set to our target size for consistency
-          await this.page.setViewport({
-            width: targetWidth,
-            height: targetHeight
-          });
-        }
-        
-        // For full page screenshots, aggressively limit the capture area
-        if (screenshotOptions.fullPage) {
-          // Inject JavaScript to limit page height for screenshot
-          await this.page.evaluate(() => {
-            const maxHeight = 600; // Very limited height for AI
-            // Force document to be smaller
-            document.documentElement.style.maxHeight = `${maxHeight}px`;
-            document.documentElement.style.overflow = 'hidden';
-            document.body.style.maxHeight = `${maxHeight}px`;
-            document.body.style.overflow = 'hidden';
-          });
-          
-          // Also limit fullPage to just capture visible viewport
-          screenshotOptions.fullPage = false;
-          screenshotOptions.clip = {
-            x: 0,
-            y: 0,
-            width: targetWidth,
-            height: Math.min(targetHeight, 600)
-          };
-        }
-        
-        screenshotOptions.encoding = 'base64';
-        const screenshot = await this.withTimeout(
-          this.page.screenshot(screenshotOptions),
-          30000,
-          'take screenshot'
-        );
-        
-        // Restore page state
-        if (options.fullPage !== false) {
-          await this.page.evaluate(() => {
-            document.documentElement.style.maxHeight = '';
-            document.documentElement.style.overflow = '';
-            document.body.style.maxHeight = '';
-            document.body.style.overflow = '';
-          });
-        }
-        
-        // Restore original viewport if it was changed
-        if (originalViewport) {
-          await this.page.setViewport(originalViewport);
-        }
-        
-        const sizeInBytes = Math.ceil(screenshot.length * 3/4);
-        const sizeInKB = Math.round(sizeInBytes / 1024);
-        
-        // If still too large, return error with size info
-        if (sizeInKB > 50) { // 50KB limit for AI processing
-          return {
-            error: true,
-            message: `Screenshot too large for AI processing (${sizeInKB}KB). Maximum recommended size is 50KB. Try disabling fullPage or using path parameter to save to file.`,
-            size: `${sizeInKB}KB`,
-            recommendation: 'Use fullPage: false or path parameter to save to file'
-          };
-        }
-        
-        return {
-          screenshot: screenshot,
-          size: `${sizeInKB}KB`,
-          type: screenshotOptions.type,
-          fullPage: screenshotOptions.fullPage,
-          lowRes: true,
-          quality: screenshotOptions.quality,
-          message: 'Low-resolution screenshot optimized for AI parsing'
-        };
-      }
-      
-      // If a path is provided, save to file and return metadata only
-      if (options.path) {
-        screenshotOptions.path = options.path;
-        if (options.quality && (screenshotOptions.type === 'jpeg' || screenshotOptions.type === 'jpg')) {
-          screenshotOptions.quality = options.quality || 80; // Higher quality for file saves
-        }
-        
-        const screenshot = await this.withTimeout(
-          this.page.screenshot(screenshotOptions),
-          30000,
-          'take screenshot'
-        );
-        
-        // When saving to file, just return metadata
-        return {
-          saved: true,
-          path: options.path,
-          type: screenshotOptions.type,
-          fullPage: screenshotOptions.fullPage
-        };
-      }
-      
-      // For regular screenshots without path (non-lowRes mode)
-      // This should rarely be used as we default to lowRes for AI
-      screenshotOptions.encoding = 'base64';
-      if (options.quality && (screenshotOptions.type === 'jpeg' || screenshotOptions.type === 'jpg')) {
-        screenshotOptions.quality = options.quality || 80;
-      }
-      
-      const screenshot = await this.withTimeout(
-        this.page.screenshot(screenshotOptions),
-        30000,
-        'take screenshot'
-      );
-      
-      // Calculate size
-      const sizeInBytes = Math.ceil(screenshot.length * 3/4);
-      const sizeInKB = Math.round(sizeInBytes / 1024);
-      
-      // For large screenshots, warn the user
-      if (sizeInKB > 100) {
-        return {
-          screenshot: screenshot.substring(0, 1000) + '... [truncated]',
-          size: `${sizeInKB}KB`,
-          type: screenshotOptions.type,
-          fullPage: screenshotOptions.fullPage,
-          truncated: true,
-          message: 'Screenshot too large. Use path parameter to save to file or lowRes: true for AI parsing.'
-        };
-      }
-      
-      return {
-        screenshot: screenshot,
-        size: `${sizeInKB}KB`,
-        type: screenshotOptions.type,
-        fullPage: screenshotOptions.fullPage
-      };
-    } catch (error) {
-      return {
-        error: true,
-        message: error.message
-      };
-    }
-  }
-
-  async forceReset() {
-    console.error('Force resetting Chrome...');
-    
-    // Kill all Chrome processes
-    await this.killChromeProcesses();
-    
-    // Clear internal state
-    this.browser = null;
-    this.page = null;
-    this.client = null;
-    this.paused = false;
-    this.logs = [];
-    
-    return { status: 'reset complete' };
-  }
-
-  async close() {
-    this.stopHeartbeat(); // Stop monitoring when closing
-    if (this.browser) {
-      try {
-        await this.browser.close();
-      } catch (e) {
-        // Browser might already be closed
-        console.error('Error closing browser:', e.message);
-      } finally {
-        this.browser = null;
-        this.page = null;
-        this.client = null;
-      }
-    }
-  }
-
-  async isConnected() {
-    try {
-      if (!this.browser || !this.page) {
-        return false;
-      }
-      await this.browser.version();
-      return true;
-    } catch (e) {
-      return false;
-    }
-  }
-
-  async selectElement(selector, instruction, elementInfo) {
-    await this.ensureConnected();
-    if (!this.client || !this.page) throw new Error('Chrome not connected');
-
-    try {
-      // Sanitize and validate inputs
-      if (!selector || typeof selector !== 'string') {
-        throw new Error('Invalid selector provided');
-      }
-
-      // Extract element information using CDP
-      const elementData = await this.page.evaluate((sel) => {
-        try {
-          const element = document.querySelector(sel);
-          if (!element) {
-            return { error: `Element not found: ${sel}` };
-          }
-
-          // Highlight the selected element
-          element.style.outline = '3px solid #E91E63';
-          element.style.outlineOffset = '2px';
-
-          // Get computed styles
-          const computedStyles = window.getComputedStyle(element);
-          const relevantStyles = {};
-          
-          // Extract key style properties
-          const styleProps = [
-            'width', 'height', 'padding', 'margin', 'backgroundColor', 
-            'color', 'fontSize', 'fontWeight', 'border', 'borderRadius',
-            'display', 'position', 'top', 'left', 'right', 'bottom',
-            'transform', 'opacity', 'boxShadow', 'textAlign'
-          ];
-          
-          styleProps.forEach(prop => {
-            relevantStyles[prop] = computedStyles[prop];
-          });
-
-          return {
-            outerHTML: element.outerHTML,
-            tagName: element.tagName.toLowerCase(),
-            id: element.id,
-            className: element.className,
-            computedStyles: relevantStyles,
-            boundingBox: element.getBoundingClientRect(),
-            textContent: element.textContent.substring(0, 100)
-          };
-        } catch (error) {
-          return { error: error.message };
-        }
-      }, selector);
-
-      if (elementData.error) {
-        throw new Error(elementData.error);
-      }
-
-      // Include React component info if provided
-      if (elementInfo && elementInfo.reactComponent) {
-        elementData.reactComponent = elementInfo.reactComponent;
-      }
-
-      // Store the selected element information
-      this.selectedElement = {
-        selector,
-        instruction: instruction || '',
-        elementData,
-        timestamp: new Date().toISOString()
-      };
-
-      // Log the selection
-      const reactInfo = elementData.reactComponent ? 
-        ` [React: ${elementData.reactComponent.componentName}]` : '';
-      this.logs.push({
-        timestamp: new Date().toISOString(),
-        type: 'element-selected',
-        message: `Selected: ${selector} - ${elementData.tagName}${elementData.id ? '#' + elementData.id : ''}${reactInfo}`
-      });
-
-      const response = {
-        success: true,
-        message: 'Element selected and ready for MCP commands',
-        element: {
-          selector,
-          tagName: elementData.tagName,
-          id: elementData.id,
-          classes: elementData.className,
-          size: `${elementData.boundingBox.width}px × ${elementData.boundingBox.height}px`,
-          instruction: instruction || 'No instruction provided'
-        }
-      };
-
-      // Add React component info to response if available
-      if (elementData.reactComponent) {
-        response.element.reactComponent = elementData.reactComponent;
-      }
-
-      return response;
-    } catch (error) {
-      this.logs.push({
-        timestamp: new Date().toISOString(),
-        type: 'selection-error',
-        message: error.message
-      });
-
-      return {
-        success: false,
-        error: error.message
-      };
-    }
-  }
-
-  async getSelectedElement() {
-    if (!this.selectedElement) {
-      return {
-        selected: false,
-        message: 'No element currently selected'
-      };
-    }
-
-    return {
-      selected: true,
-      ...this.selectedElement
-    };
-  }
-
-  async applyToSelectedElement(cssRules) {
-    if (!this.selectedElement) {
-      throw new Error('No element currently selected');
-    }
-
-    await this.ensureConnected();
-    if (!this.page) throw new Error('Chrome not connected');
-
-    const { selector } = this.selectedElement;
-
-    try {
-      // Inject styles using CDP Runtime.evaluate
-      const injectionResult = await this.page.evaluate((sel, cssRules) => {
-        try {
-          // Check if our style element already exists
-          let styleEl = document.getElementById('chrome-pilot-styles');
-          if (!styleEl) {
-            styleEl = document.createElement('style');
-            styleEl.id = 'chrome-pilot-styles';
-            document.head.appendChild(styleEl);
-          }
-          
-          // Append new rules
-          styleEl.innerHTML += `\n/* Chrome Debug MCP - ${new Date().toISOString()} */\n${sel} { ${cssRules} }\n`;
-          
-          return { success: true, message: 'Styles applied successfully' };
-        } catch (error) {
-          return { success: false, error: error.message };
-        }
-      }, selector, cssRules);
-
-      if (!injectionResult.success) {
-        throw new Error(injectionResult.error);
-      }
-
-      // Log the result
-      this.logs.push({
-        timestamp: new Date().toISOString(),
-        type: 'css-applied',
-        message: `Applied to ${selector}: ${cssRules}`
-      });
-
-      return {
-        success: true,
-        applied: {
-          selector,
-          css: cssRules
-        }
-      };
-    } catch (error) {
-      return {
-        success: false,
-        error: error.message
-      };
-    }
-  }
-
-  async executeOnSelectedElement(jsCode) {
-    if (!this.selectedElement) {
-      throw new Error('No element currently selected');
-    }
-
-    await this.ensureConnected();
-    if (!this.page) throw new Error('Chrome not connected');
-
-    const { selector } = this.selectedElement;
-
-    try {
-      const result = await this.page.evaluate((sel, code) => {
-        try {
-          const element = document.querySelector(sel);
-          if (!element) {
-            throw new Error(`Element not found: ${sel}`);
-          }
-          
-          const fn = new Function('element', code);
-          return { 
-            success: true, 
-            result: fn(element) 
-          };
-        } catch (error) {
-          return { 
-            success: false, 
-            error: error.message 
-          };
-        }
-      }, selector, jsCode);
-
-      if (!result.success) {
-        throw new Error(result.error);
-      }
-
-      return {
-        success: true,
-        result: result.result
-      };
-    } catch (error) {
-      return {
-        success: false,
-        error: error.message
-      };
-    }
-  }
-
-  async clearSelectedElement() {
-    if (!this.selectedElement) {
-      return {
-        success: true,
-        message: 'No element was selected'
-      };
-    }
-
-    // Remove highlight from the element
-    if (this.page) {
-      await this.page.evaluate((sel) => {
-        const element = document.querySelector(sel);
-        if (element) {
-          element.style.outline = '';
-          element.style.outlineOffset = '';
-        }
-      }, this.selectedElement.selector).catch(() => {});
-    }
-
-    this.selectedElement = null;
-
-    return {
-      success: true,
-      message: 'Selected element cleared'
-    };
-  }
-
-
-  generateCssFromInstruction(instruction, elementInfo) {
-    const lowerInstruction = instruction.toLowerCase();
-    const styles = {};
-    let css = '';
-
-    // Size modifications
-    if (lowerInstruction.includes('larger') || lowerInstruction.includes('bigger')) {
-      // If element has explicit width/height, increase them
-      if (elementInfo.computedStyles && elementInfo.computedStyles.width !== 'auto') {
-        const currentWidth = parseFloat(elementInfo.computedStyles.width);
-        if (!isNaN(currentWidth)) {
-          styles.width = `${currentWidth * 1.2}px !important`;
-        }
-      }
-      if (elementInfo.computedStyles && elementInfo.computedStyles.height !== 'auto') {
-        const currentHeight = parseFloat(elementInfo.computedStyles.height);
-        if (!isNaN(currentHeight)) {
-          styles.height = `${currentHeight * 1.2}px !important`;
-        }
-      }
-      // Fallback to transform if no explicit dimensions
-      if (!styles.width && !styles.height) {
-        styles.transform = 'scale(1.2)';
-        styles.transformOrigin = 'center';
-      }
-    } else if (lowerInstruction.includes('smaller')) {
-      if (elementInfo.computedStyles && elementInfo.computedStyles.width !== 'auto') {
-        const currentWidth = parseFloat(elementInfo.computedStyles.width);
-        if (!isNaN(currentWidth)) {
-          styles.width = `${currentWidth * 0.8}px !important`;
-        }
-      }
-      if (elementInfo.computedStyles && elementInfo.computedStyles.height !== 'auto') {
-        const currentHeight = parseFloat(elementInfo.computedStyles.height);
-        if (!isNaN(currentHeight)) {
-          styles.height = `${currentHeight * 0.8}px !important`;
-        }
-      }
-      if (!styles.width && !styles.height) {
-        styles.transform = 'scale(0.8)';
-        styles.transformOrigin = 'center';
-      }
-    }
-
-    // Color modifications
-    if (lowerInstruction.includes('blue')) {
-      styles.backgroundColor = '#2196F3 !important';
-      if (elementInfo.tagName === 'button' || elementInfo.tagName === 'a') {
-        styles.color = 'white !important';
-      }
-    } else if (lowerInstruction.includes('red')) {
-      styles.backgroundColor = '#F44336 !important';
-      styles.color = 'white !important';
-    } else if (lowerInstruction.includes('green')) {
-      styles.backgroundColor = '#4CAF50 !important';
-      styles.color = 'white !important';
-    } else if (lowerInstruction.includes('yellow')) {
-      styles.backgroundColor = '#FFEB3B !important';
-      styles.color = '#333 !important';
-    } else if (lowerInstruction.includes('purple')) {
-      styles.backgroundColor = '#9C27B0 !important';
-      styles.color = 'white !important';
-    } else if (lowerInstruction.includes('orange')) {
-      styles.backgroundColor = '#FF9800 !important';
-      styles.color = 'white !important';
-    }
-
-    // Layout modifications
-    if (lowerInstruction.includes('center')) {
-      if (lowerInstruction.includes('text')) {
-        styles.textAlign = 'center !important';
-      } else {
-        // For block-level centering
-        if (elementInfo.computedStyles && elementInfo.computedStyles.display !== 'inline') {
-          styles.margin = '0 auto !important';
-          styles.display = 'block !important';
-        } else {
-          // For inline elements, center the parent
-          styles.display = 'block !important';
-          styles.textAlign = 'center !important';
-        }
-      }
-    }
-
-    // Visibility
-    if (lowerInstruction.includes('hide')) {
-      styles.display = 'none !important';
-    } else if (lowerInstruction.includes('show')) {
-      styles.display = 'block !important';
-    }
-
-    // Border modifications
-    if (lowerInstruction.includes('border')) {
-      if (lowerInstruction.includes('remove') || lowerInstruction.includes('no')) {
-        styles.border = 'none !important';
-      } else {
-        styles.border = '2px solid #333 !important';
-      }
-    }
-
-    // Border radius
-    if (lowerInstruction.includes('round')) {
-      if (lowerInstruction.includes('full')) {
-        styles.borderRadius = '50% !important';
-      } else {
-        styles.borderRadius = '8px !important';
-      }
-    }
-
-    // Shadow
-    if (lowerInstruction.includes('shadow')) {
-      if (lowerInstruction.includes('remove') || lowerInstruction.includes('no')) {
-        styles.boxShadow = 'none !important';
-      } else if (lowerInstruction.includes('big') || lowerInstruction.includes('large')) {
-        styles.boxShadow = '0 10px 20px rgba(0, 0, 0, 0.2) !important';
-      } else {
-        styles.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1) !important';
-      }
-    }
-
-    // Text modifications
-    if (lowerInstruction.includes('bold')) {
-      styles.fontWeight = 'bold !important';
-    }
-    if (lowerInstruction.includes('italic')) {
-      styles.fontStyle = 'italic !important';
-    }
-    if (lowerInstruction.includes('underline')) {
-      styles.textDecoration = 'underline !important';
-    }
-
-    // Spacing
-    if (lowerInstruction.includes('padding')) {
-      if (lowerInstruction.includes('more') || lowerInstruction.includes('add')) {
-        styles.padding = '20px !important';
-      } else if (lowerInstruction.includes('remove') || lowerInstruction.includes('no')) {
-        styles.padding = '0 !important';
-      } else {
-        styles.padding = '10px !important';
-      }
-    }
-
-    if (lowerInstruction.includes('margin')) {
-      if (lowerInstruction.includes('more') || lowerInstruction.includes('add')) {
-        styles.margin = '20px !important';
-      } else if (lowerInstruction.includes('remove') || lowerInstruction.includes('no')) {
-        styles.margin = '0 !important';
-      } else {
-        styles.margin = '10px !important';
-      }
-    }
-
-    // Animation hints
-    if (lowerInstruction.includes('animate') || lowerInstruction.includes('transition')) {
-      styles.transition = 'all 0.3s ease !important';
-    }
-
-    // Generate CSS string
-    if (Object.keys(styles).length > 0) {
-      css = Object.entries(styles).map(([k, v]) => {
-        // Convert camelCase to kebab-case
-        const kebab = k.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
-        return `${kebab}: ${v}`;
-      }).join('; ');
-    }
-
-    return { styles, css };
-  }
-  
-  // Handle recording upload
-  
-  // Get recording for analysis
-  async getRecording(recordingId) {
-    console.log(`Looking for recording: ${recordingId}`);
-    const recording = await sharedStorage.get(recordingId);
-    
-    if (!recording) {
-      // List available recordings for debugging
-      const availableRecordings = await sharedStorage.list();
-      console.log('Available recordings:', availableRecordings.map(r => r.id));
-      return { error: true, message: 'Recording not found' };
-    }
-    
-    // Handle frame capture sessions
-    if (recording.type === 'frame_capture') {
-      const sessionInfo = await sharedStorage.getFrameSessionInfo(recordingId);
-      return {
-        success: true,
-        type: 'frame_capture',
-        sessionInfo: sessionInfo,
-        message: 'This is a frame capture recording. Use get_frame_session_info and get_frame to access the frames.',
-        recording: {
-          id: recordingId,
-          type: 'frame_capture',
-          totalFrames: sessionInfo ? sessionInfo.totalFrames : 0
-        }
-      };
-    }
-    
-    // Handle chunked recordings (legacy - no longer supported)
-    if (recording.type === 'chunked_recording') {
-      return {
-        error: true,
-        message: 'Chunked recordings are no longer supported. Only frame capture recordings are available.'
-      };
-    }
-    
-    // Handle old single-file recordings (if any exist)
-    if (recording.data && recording.data.toString) {
-      return {
-        error: true,
-        message: 'Old recording format no longer supported. Only frame capture recordings are available.'
-      };
-    }
-    
-    // Handle frame capture recordings
-    if (recording.type === 'frame_capture') {
-      return {
-        success: true,
-        recording: {
-          id: recording.sessionId,
-          frames: recording.frames,
-          totalFrames: recording.frames.length,
-          timestamp: recording.timestamp,
-          timestamp: recording.timestamp,
-          filename: recording.filename
-        }
-      };
-    }
-    
-    return { error: true, message: 'Unknown recording format' };
-  }
-  
-  // Delete recording
-  async deleteRecording(recordingId) {
-    const recording = await sharedStorage.get(recordingId);
-    if (!recording) {
-      return { error: true, message: 'Recording not found' };
-    }
-    
-    await sharedStorage.delete(recordingId);
-    console.log(`Deleted recording ${recordingId}`);
-    
-    return {
-      success: true,
-      message: 'Recording deleted successfully'
-    };
-  }
-  
-  // Store frame batch
-  async storeFrameBatch(sessionId, frames) {
-    console.log(`[storeFrameBatch] Received sessionId: ${sessionId}, and a batch of ${frames ? frames.length : 'undefined'} frames.`);
-    
-    if (!sessionId || !Array.isArray(frames)) {
-      console.error('[storeFrameBatch] Invalid arguments received.');
-      throw new Error('Invalid arguments: sessionId and frames array are required.');
-    }
-    
-    try {
-      console.log(`Storing ${frames.length} frames for session ${sessionId}`);
-      
-      // Store frames in shared storage
-      const result = await sharedStorage.storeFrameBatch(sessionId, frames);
-      console.log('Storage result:', result ? 'success' : 'failed');
-      
-      return {
-        success: true,
-        sessionId: sessionId,
-        framesStored: frames.length
-      };
-    } catch (error) {
-      console.error('Error storing frame batch:', error);
-      throw error; // Re-throw to be caught by route handler
-    }
-  }
-
-  async checkFrameSession(sessionId) {
-    try {
-      const sessionInfo = await sharedStorage.getFrameSessionInfo(sessionId);
-      if (sessionInfo && !sessionInfo.error) {
-        return {
-          found: true,
-          sessionId: sessionId,
-          totalFrames: sessionInfo.totalFrames,
-          duration: sessionInfo.duration,
-          serverPort: process.env.PORT || 3000
-        };
-      } else {
-        return { found: false };
-      }
-    } catch (error) {
-      console.error('Error checking frame session:', error);
-      return { found: false, error: error.message };
-    }
-  }
-
-  async associateLogsWithFrames(sessionId, logs) {
-    try {
-      console.log(`Associating ${logs.length} logs with frames for session ${sessionId}`);
-      
-      // Use the database's built-in log association method
-      const result = await sharedStorage.associateLogsWithFrames(sessionId, logs);
-      
-      return result;
-    } catch (error) {
-      console.error('Error associating logs:', error);
-      return { error: true, message: error.message };
-    }
-  }
-
-  // Get frame session info
-  async getFrameSessionInfo(sessionId) {
-    return await sharedStorage.getFrameSessionInfo(sessionId);
-  }
-  
-  // Get specific frame
-  async getFrame(sessionId, frameIndex) {
-    return await sharedStorage.getFrame(sessionId, frameIndex);
-  }
-  
-  // Get chunked recording session info (legacy - no longer supported)
-  async getRecordingInfo(sessionId) {
-    return { error: true, message: 'Chunked recordings are no longer supported. Use get_frame_session_info for frame capture recordings.' };
-  }
-
-  // Get specific chunk from recording session (legacy - no longer supported)
-  async getRecordingChunk(sessionId, chunkIndex) {
-    return { error: true, message: 'Chunked recordings are no longer supported. Use get_frame for frame capture recordings.' };
-  }
-
-  // Get entire frame session
-  async getFrameSession(sessionId) {
-    return await sharedStorage.getFrameSession(sessionId);
-  }
-
-  // Save edited frame session
-  async saveEditedSession(sessionId, sessionData) {
-    try {
-      await sharedStorage.ensureInitialized();
-      
-      if (!sessionData.frames || !Array.isArray(sessionData.frames)) {
-        return { error: true, message: 'Invalid session data: frames array required' };
-      }
-      
-      // Store the frames using the database
-      const result = await sharedStorage.storeFrameBatch(sessionId, sessionData.frames);
-      
-      console.log(`Saved edited session ${sessionId} with ${sessionData.frames.length} frames`);
-      
-      return {
-        success: true,
-        sessionId: sessionId,
-        totalFrames: sessionData.frames.length
-      };
-    } catch (error) {
-      console.error('Error saving edited session:', error);
-      return { error: true, message: error.message };
-    }
-  }
-
-  // Import session from Chrome extension storage format
-  async importSessionFromChrome(sessionId, sessionData) {
-    try {
-      await sharedStorage.ensureInitialized();
-      
-      if (!sessionData.frames || !Array.isArray(sessionData.frames)) {
-        return { error: true, message: 'Invalid session data: frames array required' };
-      }
-      
-      // Store the frames using the database
-      const result = await sharedStorage.storeFrameBatch(sessionId, sessionData.frames);
-      
-      console.log(`Imported session ${sessionId} with ${sessionData.frames.length} frames`);
-      
-      return {
-        success: true,
-        sessionId: sessionId,
-        totalFrames: sessionData.frames.length,
-        message: 'Session imported successfully'
-      };
-    } catch (error) {
-      console.error('Error importing session:', error);
-      return { error: true, message: error.message };
-    }
-  }
-  
-  // Heartbeat methods for connection monitoring
-  startHeartbeat() {
-    this.stopHeartbeat(); // Clear any existing interval
-    
-    this.heartbeatInterval = setInterval(async () => {
-      try {
-        if (this.browser && !await this.isConnected()) {
-          console.log('Heartbeat detected disconnection, attempting to reconnect...');
-          if (this.debugPort) {
-            try {
-              await this.connectToExisting(this.debugPort);
-              console.log('Heartbeat reconnection successful');
-            } catch (error) {
-              console.error('Heartbeat reconnection failed:', error.message);
-            }
-          }
-        }
-      } catch (error) {
-        console.error('Heartbeat error:', error);
-      }
-    }, 5000); // Check every 5 seconds
-  }
-  
-  stopHeartbeat() {
-    if (this.heartbeatInterval) {
-      clearInterval(this.heartbeatInterval);
-      this.heartbeatInterval = null;
-    }
-  }
-}