@dynamicu/chromedebug-mcp 2.6.4 → 2.6.7

package/chrome-extension/browser-recording-manager.js

@@ -0,0 +1,256 @@
+/**
+ * BrowserRecordingManager - Manage recordings stored in IndexedDB
+ *
+ * Handles recording lifecycle for browser-only mode:
+ * - Stores frames and metadata in IndexedDB
+ * - Exports recordings as ZIP files
+ * - Manages cleanup and deletion
+ */
+
+class BrowserRecordingManager {
+  constructor(db) {
+    this.db = db; // DataBuffer instance
+    this.activeRecordings = new Map(); // sessionId -> recording metadata
+  }
+
+  /**
+   * Start a new browser recording
+   * @param {string} sessionId - Unique session identifier
+   * @param {Object} metadata - Recording metadata (tabId, url, timestamp, etc.)
+   * @returns {Promise<{success: boolean, sessionId: string}>}
+   */
+  async startRecording(sessionId, metadata = {}) {
+    try {
+      // Check if recording already exists (cleanup from previous incomplete session)
+      const existingRecording = await this.db.getBrowserRecording(sessionId);
+      if (existingRecording) {
+        console.warn(`[BrowserRecordingManager] Cleaning up existing recording: ${sessionId}`);
+        await this.deleteRecording(sessionId);
+      }
+
+      const recording = {
+        sessionId,
+        startTime: Date.now(),
+        tabId: metadata.tabId,
+        url: metadata.url,
+        title: metadata.title || 'Browser Recording',
+        frameCount: 0,
+        status: 'recording',
+        metadata
+      };
+
+      // Store recording metadata in IndexedDB
+      await this.db.addBrowserRecording(recording);
+
+      // Track active recording
+      this.activeRecordings.set(sessionId, recording);
+
+      return {
+        success: true,
+        sessionId,
+        startTime: recording.startTime
+      };
+    } catch (error) {
+      console.error('Failed to start browser recording:', {
+        name: error.name,
+        message: error.message,
+        stack: error.stack,
+        error: error
+      });
+      return {
+        success: false,
+        sessionId,
+        error: `${error.name}: ${error.message}`
+      };
+    }
+  }
+
+  /**
+   * Add a frame to an active recording
+   * @param {string} sessionId
+   * @param {Object} frameData - {frameIndex, screenshot, logs, timestamp}
+   * @returns {Promise<boolean>}
+   */
+  async addFrame(sessionId, frameData) {
+    try {
+      const frame = {
+        sessionId,
+        frameIndex: frameData.frameIndex,
+        screenshot: frameData.screenshot, // Base64 data URL
+        logs: frameData.logs || [],
+        timestamp: frameData.timestamp || Date.now(),
+        absoluteTimestamp: frameData.absoluteTimestamp // Preserve absolute timestamp for log association
+      };
+
+      await this.db.addBrowserFrame(frame);
+
+      // Update frame count
+      const recording = this.activeRecordings.get(sessionId);
+      if (recording) {
+        recording.frameCount++;
+      }
+
+      return true;
+    } catch (error) {
+      console.error('Failed to add frame:', error);
+      return false;
+    }
+  }
+
+  /**
+   * Stop recording and finalize
+   * @param {string} sessionId
+   * @returns {Promise<{success: boolean, frameCount: number, duration: number}>}
+   */
+  async stopRecording(sessionId) {
+    try {
+      const recording = this.activeRecordings.get(sessionId);
+      if (!recording) {
+        throw new Error(`Recording ${sessionId} not found`);
+      }
+
+      const endTime = Date.now();
+      const duration = endTime - recording.startTime;
+
+      // Update recording status
+      recording.status = 'completed';
+      recording.endTime = endTime;
+      recording.duration = duration;
+
+      await this.db.updateBrowserRecording(sessionId, {
+        status: 'completed',
+        endTime,
+        duration,
+        frameCount: recording.frameCount
+      });
+
+      this.activeRecordings.delete(sessionId);
+
+      return {
+        success: true,
+        sessionId,
+        frameCount: recording.frameCount,
+        duration
+      };
+    } catch (error) {
+      console.error('Failed to stop recording:', error);
+      return {
+        success: false,
+        sessionId,
+        error: error.message
+      };
+    }
+  }
+
+  /**
+   * Export recording as downloadable ZIP blob
+   * @param {string} sessionId
+   * @returns {Promise<{blob: Blob, filename: string}>}
+   */
+  async exportRecording(sessionId) {
+    try {
+      // Get recording metadata
+      const recording = await this.db.getBrowserRecording(sessionId);
+      if (!recording) {
+        throw new Error(`Recording ${sessionId} not found`);
+      }
+
+      // Get all frames for this session
+      const frames = await this.db.getBrowserFrames(sessionId);
+
+      // Create JSON manifest
+      const manifest = {
+        sessionId,
+        title: recording.title,
+        url: recording.url,
+        startTime: recording.startTime,
+        endTime: recording.endTime,
+        duration: recording.duration,
+        frameCount: frames.length,
+        exportedAt: Date.now()
+      };
+
+      // Build export data structure
+      const exportData = {
+        manifest,
+        recording,
+        frames: frames.map(frame => ({
+          frameIndex: frame.frameIndex,
+          timestamp: frame.timestamp,
+          screenshot: frame.screenshot,
+          logs: frame.logs
+        }))
+      };
+
+      // Convert to JSON string
+      const jsonString = JSON.stringify(exportData, null, 2);
+
+      // Create blob
+      const blob = new Blob([jsonString], { type: 'application/json' });
+
+      // Generate filename
+      const date = new Date(recording.startTime).toISOString().split('T')[0];
+      const filename = `chrome-pilot-recording-${date}-${sessionId.slice(-8)}.json`;
+
+      return {
+        blob,
+        filename,
+        size: blob.size,
+        frameCount: frames.length
+      };
+    } catch (error) {
+      console.error('Failed to export recording:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Delete a recording and all its frames
+   * @param {string} sessionId
+   * @returns {Promise<{success: boolean, deletedFrames: number}>}
+   */
+  async deleteRecording(sessionId) {
+    try {
+      // Delete all frames
+      const deletedFrames = await this.db.deleteBrowserFrames(sessionId);
+
+      // Delete recording metadata
+      await this.db.deleteBrowserRecording(sessionId);
+
+      // Remove from active recordings if present
+      this.activeRecordings.delete(sessionId);
+
+      return {
+        success: true,
+        sessionId,
+        deletedFrames
+      };
+    } catch (error) {
+      console.error('Failed to delete recording:', error);
+      return {
+        success: false,
+        sessionId,
+        error: error.message
+      };
+    }
+  }
+
+  /**
+   * List all recordings
+   * @returns {Promise<Array>}
+   */
+  async listRecordings() {
+    try {
+      return await this.db.getAllBrowserRecordings();
+    } catch (error) {
+      console.error('Failed to list recordings:', error);
+      return [];
+    }
+  }
+
+}
+
+// Export for use in other extension files
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = BrowserRecordingManager;
+}

package/chrome-extension/content.js

@@ -398,25 +398,25 @@ function getComponentInfo(element) {
 // Idempotent protection for cleanup function
 let cleanupExecuted = false;
 
-function cleanup() {
+async function cleanup() {
   // Idempotent protection - only run cleanup once
   if (cleanupExecuted) {
     console.log('[ChromeDebug MCP] Cleanup already executed, skipping');
     return;
   }
-  
+
   cleanupExecuted = true;
   console.log('[ChromeDebug MCP] Executing cleanup...');
-  
+
   // Clean up recording indicators and event listeners
   try {
     // Legacy recording indicator cleanup removed - now handled by ScreenCaptureVisualFeedback
-    
+
     // Stop workflow recording if active
     if (typeof isWorkflowRecording !== 'undefined' && isWorkflowRecording) {
       console.log('[ChromeDebug MCP] Stopping workflow recording during cleanup');
       if (typeof stopWorkflowRecording === 'function') {
-        stopWorkflowRecording();
+        await stopWorkflowRecording();
       }
     }
     
@@ -498,8 +498,13 @@ if (isExtensionValid()) {
       sendResponse({ success: true });
     } else if (request.action === 'stopWorkflowRecording') {
       console.log('[ChromeDebug MCP] Stopping workflow recording');
-      const workflow = stopWorkflowRecording();
-      sendResponse({ success: true, workflow: workflow });
+      stopWorkflowRecording().then(workflow => {
+        sendResponse({ success: true, workflow: workflow });
+      }).catch(error => {
+        console.error('[ChromeDebug MCP] Error stopping workflow recording:', error);
+        sendResponse({ success: false, error: error.message });
+      });
+      return true; // Keep channel open for async response
     } else if (request.action === 'createRestorePoint') {
       // Create restore point for current workflow
       createRestorePoint(request.actionIndex || workflowActions.length).then(restorePointId => {
@@ -852,27 +857,72 @@ let isWorkflowRecording = false;
 let workflowActions = [];
 let workflowRecordingIndicator = null;
 let workflowScreenshotSettings = null;
+let lastScreenshotTime = 0;
+let pendingScreenshots = []; // Track pending screenshot captures
+
+// Async screenshot capture without blocking click recording
+function captureScreenshotAsync(action, actionIndex) {
+  // Create the async capture promise
+  const capturePromise = (async () => {
+    try {
+      // Chrome API rate limit: ~1-2 screenshots per second
+      // We enforce 600ms minimum between screenshots to stay under the limit
+      const MIN_SCREENSHOT_INTERVAL = 600; // milliseconds
+      const now = Date.now();
+      const timeSinceLastScreenshot = now - lastScreenshotTime;
+
+      if (timeSinceLastScreenshot < MIN_SCREENSHOT_INTERVAL) {
+        // Wait until we can safely capture
+        const waitTime = MIN_SCREENSHOT_INTERVAL - timeSinceLastScreenshot;
+        await new Promise(resolve => setTimeout(resolve, waitTime));
+      }
+
+      const screenshotData = await captureWorkflowScreenshot();
+
+      if (screenshotData) {
+        // Add screenshot to the action object (it's already in the array)
+        action.screenshot_data = screenshotData;
+        lastScreenshotTime = Date.now(); // Update timestamp after successful capture
+      }
+    } catch (error) {
+      console.error(`Error capturing screenshot for action ${actionIndex}:`, error);
+    }
+  })();
+
+  // Track this promise in pendingScreenshots
+  pendingScreenshots.push(capturePromise);
+
+  // Remove from pending when done (success or failure)
+  capturePromise.finally(() => {
+    const index = pendingScreenshots.indexOf(capturePromise);
+    if (index > -1) {
+      pendingScreenshots.splice(index, 1);
+    }
+  });
+
+  return capturePromise;
+}
 
 // Helper function to capture screenshot
 async function captureWorkflowScreenshot() {
   if (!workflowScreenshotSettings || !workflowScreenshotSettings.enabled) {
     return null;
   }
-  
+
   try {
     // Send message to background script to capture screenshot
     const response = await chrome.runtime.sendMessage({
       action: 'captureWorkflowScreenshot',
       settings: workflowScreenshotSettings
     });
-    
+
     if (response && response.success) {
       return response.screenshotData;
     }
   } catch (error) {
-    console.error('[ChromeDebug MCP] Error capturing screenshot:', error);
+    console.error('Error in captureWorkflowScreenshot:', error);
   }
-  
+
   return null;
 }
 
@@ -1024,16 +1074,16 @@ async function shouldEnhanceCapture() {
 }
 
 // Record click action
-async function recordClick(event) {
+function recordClick(event) {
   if (!isWorkflowRecording) {
     console.log('[ChromePilot] Click ignored - not recording');
     return;
   }
-  
+
   console.log('[ChromePilot] Recording click event');
-  
+
   let element = event.target;
-  
+
   // If clicking on an SVG element or its children, find the parent button/link
   if (element.tagName === 'svg' || element.tagName === 'path' || element.tagName === 'g' || element.tagName === 'circle' || element.tagName === 'rect') {
     const clickableParent = element.closest('button, a, [role="button"], [onclick]');
@@ -1042,7 +1092,7 @@ async function recordClick(event) {
       element = clickableParent;
     }
   }
-  
+
   const action = {
     type: 'click',
     selector: getUniqueSelector(element),
@@ -1057,92 +1107,92 @@ async function recordClick(event) {
     action.text = element.textContent.trim();
   }
 
-  // Enhanced click tracking data (conditional based on user setting)
-  const enhanceCapture = await shouldEnhanceCapture();
-  if (enhanceCapture) {
-    try {
-      console.log('[ChromePilot] Capturing enhanced click data...');
+  // Record the action immediately (synchronously) - don't wait for anything
+  workflowActions.push(action);
+  const actionIndex = workflowActions.length - 1;
 
-      // Capture enhanced element data (only include fields with meaningful values)
-      const capturedHTML = captureElementHTML(element);
-      if (capturedHTML) {
-        action.element_html = capturedHTML;
-      }
+  // Enhanced click tracking data (async, non-blocking)
+  // Check setting and apply enhanced data asynchronously without blocking
+  shouldEnhanceCapture().then(enhanceCapture => {
+    if (enhanceCapture) {
+      try {
+        console.log('[ChromePilot] Capturing enhanced click data asynchronously...');
 
-      const componentData = getEnhancedComponentInfo(element);
-      if (componentData) {
-        try {
-          JSON.stringify(componentData); // Test if serializable
-          action.component_data = componentData;
-        } catch (e) {
-          console.error('[ChromePilot] Component data cannot be serialized:', e.message);
-          action.component_data = { error: 'Serialization failed', type: typeof componentData };
+        // Capture enhanced element data (only include fields with meaningful values)
+        const capturedHTML = captureElementHTML(element);
+        if (capturedHTML) {
+          action.element_html = capturedHTML;
         }
-      }
 
-      const eventHandlers = extractEventHandlers(element);
-      if (eventHandlers) {
-        try {
-          JSON.stringify(eventHandlers); // Test if serializable
-          action.event_handlers = eventHandlers;
-        } catch (e) {
-          console.error('[ChromePilot] Event handlers cannot be serialized:', e.message);
-          action.event_handlers = { error: 'Serialization failed', type: typeof eventHandlers };
+        const componentData = getEnhancedComponentInfo(element);
+        if (componentData) {
+          try {
+            JSON.stringify(componentData); // Test if serializable
+            action.component_data = componentData;
+          } catch (e) {
+            console.error('[ChromePilot] Component data cannot be serialized:', e.message);
+            action.component_data = { error: 'Serialization failed', type: typeof componentData };
+          }
         }
-      }
 
-      const elementState = captureElementState(element);
-      if (elementState) {
-        try {
-          JSON.stringify(elementState); // Test if serializable
-          action.element_state = elementState;
-        } catch (e) {
-          console.error('[ChromePilot] Element state cannot be serialized:', e.message);
-          action.element_state = { error: 'Serialization failed', type: typeof elementState };
+        const eventHandlers = extractEventHandlers(element);
+        if (eventHandlers) {
+          try {
+            JSON.stringify(eventHandlers); // Test if serializable
+            action.event_handlers = eventHandlers;
+          } catch (e) {
+            console.error('[ChromePilot] Event handlers cannot be serialized:', e.message);
+            action.event_handlers = { error: 'Serialization failed', type: typeof eventHandlers };
+          }
         }
-      }
 
-      const perfMetrics = getPerformanceMetrics();
-      if (perfMetrics) {
-        try {
-          JSON.stringify(perfMetrics); // Test if serializable
-          action.performance_metrics = perfMetrics;
-        } catch (e) {
-          console.error('[ChromePilot] Performance metrics cannot be serialized:', e.message);
-          action.performance_metrics = { error: 'Serialization failed', type: typeof perfMetrics };
+        const elementState = captureElementState(element);
+        if (elementState) {
+          try {
+            JSON.stringify(elementState); // Test if serializable
+            action.element_state = elementState;
+          } catch (e) {
+            console.error('[ChromePilot] Element state cannot be serialized:', e.message);
+            action.element_state = { error: 'Serialization failed', type: typeof elementState };
+          }
         }
-      }
 
-      console.log('[ChromePilot] Enhanced click data captured successfully');
-    } catch (error) {
-      console.warn('[ChromePilot] Error capturing enhanced click data:', error);
-      // Continue with basic click recording if enhanced capture fails
+        const perfMetrics = getPerformanceMetrics();
+        if (perfMetrics) {
+          try {
+            JSON.stringify(perfMetrics); // Test if serializable
+            action.performance_metrics = perfMetrics;
+          } catch (e) {
+            console.error('[ChromePilot] Performance metrics cannot be serialized:', e.message);
+            action.performance_metrics = { error: 'Serialization failed', type: typeof perfMetrics };
+          }
+        }
+
+        console.log('[ChromePilot] Enhanced click data captured successfully');
+      } catch (error) {
+        console.warn('[ChromePilot] Error capturing enhanced click data:', error);
+        // Continue with basic click recording if enhanced capture fails
+      }
+    } else {
+      console.log('[ChromePilot] Enhanced click capture disabled - using basic capture only');
     }
-  } else {
-    console.log('[ChromePilot] Enhanced click capture disabled - using basic capture only');
-  }
-  
-  // Capture screenshot if enabled
+  }).catch(error => {
+    console.error('[ChromePilot] Error checking enhanced capture setting:', error);
+  });
+
+  // Capture screenshot asynchronously without blocking
   if (workflowScreenshotSettings && workflowScreenshotSettings.enabled) {
-    // Give a moment for any UI changes to settle
-    setTimeout(async () => {
-      const screenshotData = await captureWorkflowScreenshot();
-      if (screenshotData) {
-        action.screenshot_data = screenshotData;
-      }
-    }, 100);
+    // Don't await - let screenshot capture happen in background
+    captureScreenshotAsync(action, actionIndex);
   }
-  
-  workflowActions.push(action);
-  console.log('[ChromePilot] Action recorded, total actions:', workflowActions.length);
   updateWorkflowActionCount();
-  
+
   // Visual feedback
   flashElement(element);
 }
 
 // Record input changes
-async function recordInput(event) {
+function recordInput(event) {
   if (!isWorkflowRecording) return;
   
   const element = event.target;
@@ -1163,20 +1213,13 @@ async function recordInput(event) {
   if (element.placeholder) {
     action.placeholder = element.placeholder;
   }
-  
-  // Capture screenshot if enabled
-  if (workflowScreenshotSettings && workflowScreenshotSettings.enabled) {
-    setTimeout(async () => {
-      const screenshotData = await captureWorkflowScreenshot();
-      if (screenshotData) {
-        action.screenshot_data = screenshotData;
-      }
-    }, 100);
-  }
-  
+
+  // NOTE: Screenshots are only captured for clicks, not input events
+  // This prevents multiple screenshot attempts for a single user action
+
   workflowActions.push(action);
   updateWorkflowActionCount();
-  
+
   // Visual feedback
   flashElement(element);
 }
@@ -1256,6 +1299,8 @@ function startWorkflowRecording(screenshotSettings) {
   isWorkflowRecording = true;
   workflowActions = [];
   workflowScreenshotSettings = screenshotSettings;
+  lastScreenshotTime = 0; // Reset rate limit timer
+  pendingScreenshots = []; // Clear any pending screenshots from previous recording
   createWorkflowRecordingIndicator();
   
   console.log('[ChromePilot] Workflow recording started with settings:', screenshotSettings);
@@ -1326,11 +1371,20 @@ function startWorkflowRecording(screenshotSettings) {
 }
 
 // Stop workflow recording
-function stopWorkflowRecording() {
+async function stopWorkflowRecording() {
   isWorkflowRecording = false;
   removeWorkflowRecordingIndicator();
-  
+
   console.log(`[ChromePilot] Stopping recording. Captured ${workflowActions.length} actions`);
+
+  // Wait for all pending screenshots to complete
+  if (pendingScreenshots.length > 0) {
+    console.log(`[SCREENSHOT-DEBUG] Waiting for ${pendingScreenshots.length} pending screenshots to complete...`);
+    await Promise.all(pendingScreenshots);
+    console.log('[SCREENSHOT-DEBUG] All pending screenshots completed!');
+  } else {
+    console.log('[SCREENSHOT-DEBUG] No pending screenshots to wait for');
+  }
   
   // Disconnect from FunctionTracker and disable recording
   if (window.ChromePilotTracker && window.ChromePilotTracker._functionTracker) {
@@ -1387,6 +1441,22 @@ function stopWorkflowRecording() {
     functionTraces = [...functionTraces, ...embeddedTraces];
   }
   
+  // Log screenshot data before returning
+  console.log('[SCREENSHOT-DEBUG] stopWorkflowRecording - Preparing to return workflow');
+  console.log('[SCREENSHOT-DEBUG] stopWorkflowRecording - Total actions:', workflowActions.length);
+
+  const actionsWithScreenshots = workflowActions.filter(a => a.screenshot_data);
+  console.log('[SCREENSHOT-DEBUG] stopWorkflowRecording - Actions WITH screenshot_data:', actionsWithScreenshots.length);
+
+  workflowActions.forEach((action, index) => {
+    console.log(`[SCREENSHOT-DEBUG] stopWorkflowRecording - Action ${index}:`, {
+      type: action.type,
+      hasScreenshotData: !!action.screenshot_data,
+      screenshotDataLength: action.screenshot_data?.length,
+      screenshotPreview: action.screenshot_data?.substring(0, 50)
+    });
+  });
+
   // Return the recorded workflow with proper functionTraces field
   return {
     actions: workflowActions,