@dynamicu/chromedebug-mcp 2.7.0 → 2.7.1

package/chrome-extension/pro/frame-editor.js

@@ -180,7 +180,7 @@ class FrameEditor {
     try {
       // If in browser-only mode, load from IndexedDB directly
       if (this.browserOnly) {
-        console.log(`[INFO] Frame Editor: Loading browser-only recording from IndexedDB...`);
+        // console.log(`[INFO] Frame Editor: Loading browser-only recording from IndexedDB...`);
         const result = await chrome.runtime.sendMessage({
           action: 'getBrowserRecordingFrames',
           sessionId: this.sessionId
@@ -188,7 +188,7 @@ class FrameEditor {
 
         if (result && result.success && result.frames) {
           this.frames = result.frames;
-          console.log(`[INFO] Frame Editor: Loaded ${this.frames.length} frames from IndexedDB`);
+          // console.log(`[INFO] Frame Editor: Loaded ${this.frames.length} frames from IndexedDB`);
         } else {
           throw new Error('Failed to load browser-only recording from IndexedDB');
         }
@@ -207,7 +207,7 @@ class FrameEditor {
       const ports = CHROMEDEBUG_CONFIG?.ports?.slice(0, 5) || [3001, 3000, 3028]; // Use configured ports
       let found = false;
 
-      console.log(`[INFO] Frame Editor: Fetching session ${this.sessionId} from HTTP server...`);
+      // console.log(`[INFO] Frame Editor: Fetching session ${this.sessionId} from HTTP server...`);
 
       for (const port of ports) {
         try {
@@ -216,25 +216,25 @@ class FrameEditor {
             const data = await response.json();
             this.frames = data.frames || [];
             found = true;
-            console.log(`[INFO] Frame Editor: Loaded ${this.frames.length} frames from HTTP server on port ${port}`);
+            // console.log(`[INFO] Frame Editor: Loaded ${this.frames.length} frames from HTTP server on port ${port}`);
             break;
           }
         } catch (e) {
           // Try next port
-          console.log(`[DEBUG] Frame Editor: Failed to fetch from port ${port}:`, e.message);
+          // console.log(`[DEBUG] Frame Editor: Failed to fetch from port ${port}:`, e.message);
         }
       }
 
       // Fall back to Chrome storage if HTTP server unavailable
       if (!found) {
-        console.log(`[INFO] Frame Editor: HTTP server unavailable, falling back to Chrome storage...`);
+        // console.log(`[INFO] Frame Editor: HTTP server unavailable, falling back to Chrome storage...`);
         const storageKey = this.sessionId;
         const result = await chrome.storage.local.get([storageKey]);
         const sessionData = result[storageKey];
 
         if (sessionData) {
           this.frames = sessionData.frames || [];
-          console.log(`[INFO] Frame Editor: Loaded ${this.frames.length} frames from Chrome storage (logs may not be available)`);
+          // console.log(`[INFO] Frame Editor: Loaded ${this.frames.length} frames from Chrome storage (logs may not be available)`);
         } else {
           throw new Error('Session not found in HTTP server or Chrome storage');
         }
@@ -258,7 +258,7 @@ class FrameEditor {
       const ports = CHROMEDEBUG_CONFIG?.ports?.slice(0, 5) || [3001, 3000, 3028];
       let found = false;
 
-      console.log(`[INFO] Frame Editor: Fetching workflow ${this.sessionId} from HTTP server...`);
+      // console.log(`[INFO] Frame Editor: Fetching workflow ${this.sessionId} from HTTP server...`);
 
       for (const port of ports) {
         try {
@@ -266,11 +266,11 @@ class FrameEditor {
           if (response.ok) {
             this.workflowData = await response.json();
             found = true;
-            console.log(`[INFO] Frame Editor: Loaded workflow with ${this.workflowData.actions?.length || 0} actions from port ${port}`);
+            // console.log(`[INFO] Frame Editor: Loaded workflow with ${this.workflowData.actions?.length || 0} actions from port ${port}`);
             break;
           }
         } catch (e) {
-          console.log(`[DEBUG] Frame Editor: Failed to fetch workflow from port ${port}:`, e.message);
+          // console.log(`[DEBUG] Frame Editor: Failed to fetch workflow from port ${port}:`, e.message);
         }
       }
 
@@ -374,7 +374,7 @@ class FrameEditor {
         timestamp: frame.timestamp,
         allKeys: Object.keys(frame)
       };
-      console.log('[DEBUG] createFrameElement - First frame:', JSON.stringify(debugInfo, null, 2));
+      // console.log('[DEBUG] createFrameElement - First frame:', JSON.stringify(debugInfo, null, 2));
     }
 
     const div = document.createElement('div');
@@ -423,7 +423,7 @@ class FrameEditor {
     // Debug log count
     const logCount = frame.logs ? frame.logs.length : 0;
     if (index === 0) {
-      console.log(`[DEBUG] Frame ${index} log count: ${logCount}`);
+      // console.log(`[DEBUG] Frame ${index} log count: ${logCount}`);
     }
 
     logSummary.innerHTML = `
@@ -647,10 +647,10 @@ class FrameEditor {
   }
   
   async loadFrameImage(index) {
-    console.log(`[DEBUG] loadFrameImage called for ${this.isWorkflow ? 'action' : 'frame'} ${index}`);
+    // console.log(`[DEBUG] loadFrameImage called for ${this.isWorkflow ? 'action' : 'frame'} ${index}`);
 
     if (this.loadedImages.has(index)) {
-      console.log(`[DEBUG] ${this.isWorkflow ? 'Action' : 'Frame'} ${index} already loaded, skipping`);
+      // console.log(`[DEBUG] ${this.isWorkflow ? 'Action' : 'Frame'} ${index} already loaded, skipping`);
       return;
     }
 
@@ -658,7 +658,7 @@ class FrameEditor {
     if (this.isWorkflow) {
       const action = this.workflowData?.actions?.[index];
       if (!action || !action.screenshot) {
-        console.log(`[DEBUG] Action ${index} has no screenshot`);
+        // console.log(`[DEBUG] Action ${index} has no screenshot`);
         return;
       }
 
@@ -672,8 +672,8 @@ class FrameEditor {
         thumbnail.appendChild(img);
         this.loadedImages.set(index, true);
 
-        // Enable click to enlarge
-        thumbnail.addEventListener('click', () => this.showEnlargedImage(action.screenshot, `Action ${index}`));
+        // Add click handler to open modal (same as screen recordings)
+        thumbnail.addEventListener('click', () => this.openFrameModal(index));
       };
       return;
     }
@@ -697,7 +697,7 @@ class FrameEditor {
       return;
     }
 
-    console.log(`[DEBUG] Frame ${index} loading image, imageData prefix:`, frame.imageData.substring(0, 50));
+    // console.log(`[DEBUG] Frame ${index} loading image, imageData prefix:`, frame.imageData.substring(0, 50));
 
     const thumbnail = document.querySelector(`.frame-thumbnail[data-index="${index}"]`);
     if (!thumbnail) {
@@ -713,7 +713,7 @@ class FrameEditor {
     };
 
     img.onload = () => {
-      console.log(`[DEBUG] Image loaded successfully for frame ${index}`);
+      // console.log(`[DEBUG] Image loaded successfully for frame ${index}`);
       thumbnail.innerHTML = '';
       thumbnail.appendChild(img);
       this.loadedImages.set(index, true);
@@ -823,18 +823,28 @@ class FrameEditor {
   }
   
   openFrameModal(index) {
-    const frame = this.frames[index];
-    if (!frame || !frame.imageData) return;
-    
     const modal = document.getElementById('frameModal');
     const modalTitle = document.getElementById('modalTitle');
     const modalImage = document.getElementById('modalImage');
-    
-    modalTitle.textContent = `Frame ${index} - ${(frame.timestamp / 1000).toFixed(1)}s`;
-    modalImage.src = frame.imageData;
-    
+
+    if (this.isWorkflow) {
+      // Handle workflow action
+      const action = this.workflowData?.actions?.[index];
+      if (!action || !action.screenshot) return;
+
+      modalTitle.textContent = `Action ${index} - ${action.type || 'Unknown'}`;
+      modalImage.src = action.screenshot;
+    } else {
+      // Handle regular frame
+      const frame = this.frames[index];
+      if (!frame || !frame.imageData) return;
+
+      modalTitle.textContent = `Frame ${index} - ${(frame.timestamp / 1000).toFixed(1)}s`;
+      modalImage.src = frame.imageData;
+    }
+
     modal.classList.add('visible');
-    
+
     // Add keyboard listener for ESC key
     document.addEventListener('keydown', this.handleModalKeydown);
   }
@@ -853,7 +863,68 @@ class FrameEditor {
     }
   }
   
+  // Copy text to clipboard with toast notification
+  async copyToClipboard(text, successMessage) {
+    try {
+      await navigator.clipboard.writeText(text);
+      this.showToast(successMessage);
+    } catch (err) {
+      // Fallback for older browsers or permission issues
+      this.showToast('Failed to copy - check permissions');
+    }
+  }
+
+  // Show toast notification
+  showToast(message) {
+    // Remove existing toast if any
+    const existing = document.querySelector('.toast');
+    if (existing) existing.remove();
+
+    const toast = document.createElement('div');
+    toast.className = 'toast';
+    toast.textContent = message;
+    document.body.appendChild(toast);
+
+    // Remove after animation completes
+    setTimeout(() => toast.remove(), 2000);
+  }
+
+  // Generate AI prompt based on recording type
+  generateAIPrompt() {
+    if (this.isWorkflow) {
+      const actionCount = this.workflowData?.actions?.length || 0;
+      const logCount = this.workflowData?.logs?.length || 0;
+      return `Analyze workflow recording: ${this.sessionId}
+- Actions: ${actionCount}, Console Logs: ${logCount}
+- Use MCP tool: get_workflow_recording or get_workflow_summary`;
+    } else {
+      const frameCount = this.frames.length;
+      return `Analyze screen recording: ${this.sessionId}
+- Frames: ${frameCount}
+- Use MCP tool: get_frame_session_info`;
+    }
+  }
+
   setupEventListeners() {
+    // Copy ID button
+    document.getElementById('copyIdBtn').addEventListener('click', () => {
+      if (this.sessionId) {
+        this.copyToClipboard(this.sessionId, 'Session ID copied!');
+      } else {
+        this.showToast('No session ID available');
+      }
+    });
+
+    // Copy Prompt button
+    document.getElementById('copyPromptBtn').addEventListener('click', () => {
+      if (this.sessionId) {
+        const prompt = this.generateAIPrompt();
+        this.copyToClipboard(prompt, 'Prompt copied!');
+      } else {
+        this.showToast('No session available');
+      }
+    });
+
     document.getElementById('selectAllBtn').addEventListener('click', () => {
       const itemCount = this.getItemCount();
       for (let i = 0; i < itemCount; i++) {
@@ -1039,7 +1110,7 @@ class FrameEditor {
         });
         
         if (response.ok) {
-          console.log(`Server notified on port ${port}`);
+          // console.log(`Server notified on port ${port}`);
           break;
         }
       } catch (e) {
@@ -1156,7 +1227,7 @@ class FrameEditor {
       saveBtn.textContent = originalText;
       saveBtn.disabled = false;
 
-      console.log(`Workflow downloaded successfully: ${actionsToExport.length} actions, ${screenshotCount} screenshots, ${filteredLogs.length} logs`);
+      // console.log(`Workflow downloaded successfully: ${actionsToExport.length} actions, ${screenshotCount} screenshots, ${filteredLogs.length} logs`);
 
     } catch (error) {
       console.error('Error creating ZIP:', error);
@@ -1365,7 +1436,7 @@ https://github.com/anthropics/chrome-debug
       saveBtn.textContent = originalText;
       saveBtn.disabled = false;
 
-      console.log(`Frames downloaded successfully: ${framesToExport.length} frames, ${screenshotCount} screenshots`);
+      // console.log(`Frames downloaded successfully: ${framesToExport.length} frames, ${screenshotCount} screenshots`);
 
     } catch (error) {
       console.error('Error creating ZIP:', error);

package/chrome-extension/pro/function-tracker.js

@@ -105,12 +105,12 @@ class FunctionTracker {
       this.targetCategories = { ...this.targetCategories, ...options.targetCategories };
     }
     
-    console.log('[FunctionTracker] Initialized with options:', {
-      recordingId: this.recordingId,
-      maxCallDepth: this.maxCallDepth,
-      trackReturnValues: this.trackReturnValues,
-      targetCategories: this.targetCategories
-    });
+    // console.log('[FunctionTracker] Initialized with options:', {
+    //   recordingId: this.recordingId,
+    //   maxCallDepth: this.maxCallDepth,
+    //   trackReturnValues: this.trackReturnValues,
+    //   targetCategories: this.targetCategories
+    // });
   }
 
   startTracking() {
@@ -150,7 +150,7 @@ class FunctionTracker {
       // Set up pagehide listener for final flush
       window.addEventListener('pagehide', this.boundFlush);
       
-      console.log('[FunctionTracker] Started function execution tracking');
+      // console.log('[FunctionTracker] Started function execution tracking');
       
       // Record performance event
       if (this.performanceMonitor) {
@@ -183,7 +183,7 @@ class FunctionTracker {
     this.flushBuffer(); // Flush any remaining data
     
     this.isTracking = false;
-    console.log('[FunctionTracker] Stopped function execution tracking');
+    // console.log('[FunctionTracker] Stopped function execution tracking');
     
     // Record performance event
     if (this.performanceMonitor) {
@@ -781,7 +781,7 @@ class FunctionTracker {
     const events = [...this.executionBuffer];
     this.executionBuffer = [];
     
-    console.log(`[FunctionTracker] Flushing ${events.length} execution traces`);
+    // console.log(`[FunctionTracker] Flushing ${events.length} execution traces`);
     
     // Send data via callback
     if (this.onDataReady) {
@@ -819,7 +819,7 @@ class FunctionTracker {
 
     try {
       this.onDataReady(eventsToFlush);
-      console.log(`[FunctionTracker] Flushed ${eventsToFlush.length} execution traces`);
+      // console.log(`[FunctionTracker] Flushed ${eventsToFlush.length} execution traces`);
     } catch (error) {
       console.error('[FunctionTracker] Error in onDataReady callback for function traces:', error);
       // Optionally add events back for retry, but be careful of infinite loops

package/chrome-extension/upload-manager.js

@@ -2,7 +2,7 @@
 // Handles reliable batch uploads with retry logic and compression
 
 // Version will be provided by background.js which imports this file
-console.log('[UploadManager] Loaded version: 2.0.4-BUILD-20250119');
+// console.log('[UploadManager] Loaded version: 2.0.4-BUILD-20250119');
 
 // Cleanup any existing stale intervals to prevent multiple instances
 if (typeof window !== 'undefined' && window._chromePilotUploadIntervals) {
@@ -43,7 +43,7 @@ class UploadManager {
     // Only start periodic upload check if server is available
     this.startPeriodicUpload();
     
-    console.log('[UploadManager] Initialized with server:', this.serverUrl);
+    // console.log('[UploadManager] Initialized with server:', this.serverUrl);
     return true;
   }
 
@@ -124,7 +124,7 @@ class UploadManager {
       if (!this.serverUrl) {
         this.serverUrl = await this.findAvailableServer();
         if (!this.serverUrl) {
-          console.log('[UploadManager] No server available, skipping upload');
+          // console.log('[UploadManager] No server available, skipping upload');
           return;
         }
       }
@@ -136,14 +136,14 @@ class UploadManager {
         return;
       }
       
-      console.log(`[UploadManager] Processing ${batches.length} pending batches`);
+      // console.log(`[UploadManager] Processing ${batches.length} pending batches`);
       
       for (const batch of batches) {
         const success = await this.uploadBatch(batch);
         
         if (success) {
           await this.dataBuffer.markBatchUploaded(batch.id);
-          console.log(`[UploadManager] Batch ${batch.id} uploaded successfully`);
+          // console.log(`[UploadManager] Batch ${batch.id} uploaded successfully`);
         } else {
           console.warn(`[UploadManager] Failed to upload batch ${batch.id}`);
         }
@@ -204,7 +204,7 @@ class UploadManager {
       if (response.status >= 500 && attemptNumber < this.retryAttempts) {
         // Server error, retry with exponential backoff
         const delay = Math.min(this.retryDelay * Math.pow(2, attemptNumber - 1), this.maxRetryDelay);
-        console.log(`[UploadManager] Server error, retrying in ${delay}ms...`);
+        // console.log(`[UploadManager] Server error, retrying in ${delay}ms...`);
         await this.sleep(delay);
         return await this.uploadBatch(batch, attemptNumber + 1);
       }
@@ -215,7 +215,7 @@ class UploadManager {
       
       if (attemptNumber < this.retryAttempts) {
         const delay = Math.min(this.retryDelay * Math.pow(2, attemptNumber - 1), this.maxRetryDelay);
-        console.log(`[UploadManager] Network error, retrying in ${delay}ms...`);
+        // console.log(`[UploadManager] Network error, retrying in ${delay}ms...`);
         await this.sleep(delay);
         return await this.uploadBatch(batch, attemptNumber + 1);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamicu/chromedebug-mcp",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "description": "ChromeDebug MCP - MCP server that provides full control over a Chrome browser instance for debugging and automation with AI assistants like Claude Code",
   "main": "src/index.js",
   "type": "module",

package/src/validation/schemas.js

@@ -31,17 +31,18 @@ export const workflowRecordingSchema = Joi.object({
       text: Joi.string().allow('').optional(),
       placeholder: Joi.string().optional(),
       index: Joi.number().optional(),
-      // Enhanced click tracking fields
+      // Enhanced click tracking fields - accept both strings and objects for flexibility
+      // (matches screenInteractionsSchema pattern - extension sends objects, database handles serialization)
       element_html: Joi.string().max(10240).optional(),
       elementHTML: Joi.string().max(10240).optional(), // camelCase variant
-      component_data: Joi.string().max(3072).optional(),
-      componentData: Joi.string().max(3072).optional(), // camelCase variant
-      event_handlers: Joi.string().max(2048).optional(),
-      eventHandlers: Joi.string().max(2048).optional(), // camelCase variant
-      element_state: Joi.string().max(2048).optional(),
-      elementState: Joi.string().max(2048).optional(), // camelCase variant
-      performance_metrics: Joi.string().max(1024).optional(),
-      performanceMetrics: Joi.string().max(1024).optional(), // camelCase variant
+      component_data: Joi.alternatives().try(Joi.string().max(3072), Joi.object()).optional(),
+      componentData: Joi.alternatives().try(Joi.string().max(3072), Joi.object()).optional(), // camelCase variant
+      event_handlers: Joi.alternatives().try(Joi.string().max(2048), Joi.object()).optional(),
+      eventHandlers: Joi.alternatives().try(Joi.string().max(2048), Joi.object()).optional(), // camelCase variant
+      element_state: Joi.alternatives().try(Joi.string().max(2048), Joi.object()).optional(),
+      elementState: Joi.alternatives().try(Joi.string().max(2048), Joi.object()).optional(), // camelCase variant
+      performance_metrics: Joi.alternatives().try(Joi.string().max(1024), Joi.object()).optional(),
+      performanceMetrics: Joi.alternatives().try(Joi.string().max(1024), Joi.object()).optional(), // camelCase variant
       // Function trace fields
       component: Joi.string().optional(),
       args: Joi.alternatives().try(Joi.array(), Joi.string()).optional(),