@dynamicu/chromedebug-mcp 2.6.6 → 2.7.0

package/chrome-extension/content.js

@@ -297,7 +297,7 @@ function getSelector(element) {
   }
   
   if (element.className && typeof element.className === 'string') {
-    const classes = element.className.trim().split(/\s+/).filter(c => !c.startsWith('chrome-pilot'));
+    const classes = element.className.trim().split(/\s+/).filter(c => !c.startsWith('chrome-debug'));
     if (classes.length > 0) {
       return `${element.tagName.toLowerCase()}.${classes.join('.')}`;
     }
@@ -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();
       }
     }
     
@@ -460,7 +460,7 @@ if (isExtensionValid()) {
       // Show the recording ID in the floating UI
       console.log('Recording complete with ID:', request.recordingId);
       if (recordingOverlay) {
-        const statusDiv = document.getElementById('chrome-pilot-recording-status');
+        const statusDiv = document.getElementById('chrome-debug-recording-status');
         if (statusDiv && request.recordingId) {
           statusDiv.innerHTML = `<strong style="color: #4CAF50;">Recording saved!</strong><br>ID: <code style="background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-family: monospace;">${request.recordingId}</code>`;
           
@@ -494,12 +494,34 @@ if (isExtensionValid()) {
       sendResponse({ success: true });
     } else if (request.action === 'startWorkflowRecording') {
       console.log('[ChromeDebug MCP] Starting workflow recording with settings:', request.screenshotSettings);
+      // Store tabId for use when stopping recording from mini-menu
+      workflowTabId = request.tabId;
       startWorkflowRecording(request.screenshotSettings);
       sendResponse({ success: true });
-    } else if (request.action === 'stopWorkflowRecording') {
-      console.log('[ChromeDebug MCP] Stopping workflow recording');
-      const workflow = stopWorkflowRecording();
-      sendResponse({ success: true, workflow: workflow });
+    } else if (request.action === 'getWorkflowData') {
+      // Called by background script to retrieve workflow data
+      // This happens when popup stops the recording (not mini-menu)
+      console.log('[ChromeDebug MCP] Getting workflow data');
+      stopWorkflowRecording().then(async workflow => {
+        sendResponse({ success: true, workflow: workflow });
+
+        // CRITICAL FIX: Show completion UI in mini-menu after data is sent
+        // When popup stops recording, the mini-menu needs to show the completion state
+        // Get the workflowId from storage (set by background.js when recording started)
+        try {
+          const storedData = await chrome.storage.local.get(['currentWorkflowId']);
+          const workflowId = storedData.currentWorkflowId || 'Recording saved';
+          const actionCount = workflow.actions?.length || 0;
+          console.log('[ChromeDebug MCP] Showing completion UI with workflowId:', workflowId, 'actionCount:', actionCount);
+          showWorkflowRecordingComplete(workflowId, actionCount);
+        } catch (e) {
+          console.log('[ChromeDebug MCP] Could not show completion UI:', e);
+        }
+      }).catch(error => {
+        console.error('[ChromeDebug MCP] Error getting workflow data:', 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 => {
@@ -629,7 +651,7 @@ async function playWorkflowRecording(workflow, actions) {
   try {
     // Show playback indicator
     const playbackIndicator = document.createElement('div');
-    playbackIndicator.id = 'chrome-pilot-playback-indicator';
+    playbackIndicator.id = 'chrome-debug-playback-indicator';
     playbackIndicator.style.cssText = `
       position: fixed;
       top: 20px;
@@ -852,27 +874,73 @@ let isWorkflowRecording = false;
 let workflowActions = [];
 let workflowRecordingIndicator = null;
 let workflowScreenshotSettings = null;
+let workflowTabId = null; // Store tabId for use when stopping recording
+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;
 }
 
@@ -886,7 +954,7 @@ function getUniqueSelector(element) {
   // Try unique class combination
   if (element.className && typeof element.className === 'string') {
     const classes = element.className.trim().split(/\s+/)
-      .filter(c => !c.startsWith('chrome-pilot'))
+      .filter(c => !c.startsWith('chrome-debug'))
       .filter(c => !c.includes(':')) // Filter out pseudo-class artifacts
       .map(c => {
         // Escape special characters in class names
@@ -935,18 +1003,17 @@ function getXPath(element) {
 
 // Create workflow recording indicator
 function createWorkflowRecordingIndicator() {
-  if (workflowRecordingIndicator) return;
-  
+  // CRITICAL FIX: If old indicator exists (showing completion), remove it completely
+  // This ensures the old popup closes immediately before showing the new recording indicator
+  if (workflowRecordingIndicator && workflowRecordingIndicator.parentNode) {
+    workflowRecordingIndicator.parentNode.removeChild(workflowRecordingIndicator);
+    workflowRecordingIndicator = null;
+  }
+
+  // Always create fresh element for new recording
   workflowRecordingIndicator = document.createElement('div');
-  workflowRecordingIndicator.id = 'chrome-pilot-workflow-indicator';
-  workflowRecordingIndicator.innerHTML = `
-    <div style="display: flex; align-items: center; gap: 8px;">
-      <span style="color: #9c27b0; font-size: 20px; animation: pulse 1.5s infinite;">●</span>
-      <span>Recording Workflow...</span>
-      <span id="workflow-action-count" style="background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 12px; font-size: 12px;">0 actions</span>
-    </div>
-  `;
-  
+  workflowRecordingIndicator.id = 'chrome-debug-workflow-indicator';
+
   Object.assign(workflowRecordingIndicator.style, {
     position: 'fixed',
     bottom: '20px',
@@ -962,11 +1029,77 @@ function createWorkflowRecordingIndicator() {
     boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
     backdropFilter: 'blur(10px)',
     WebkitBackdropFilter: 'blur(10px)',
-    pointerEvents: 'none',
+    pointerEvents: 'auto',
     userSelect: 'none'
   });
-  
+
+  workflowRecordingIndicator.innerHTML = `
+    <div style="display: flex; align-items: center; gap: 12px;">
+      <div style="display: flex; align-items: center; gap: 8px; flex: 1;">
+        <span style="color: #9c27b0; font-size: 20px; animation: pulse 1.5s infinite;">●</span>
+        <span>Recording Workflow...</span>
+        <span id="workflow-action-count" style="background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 12px; font-size: 12px;">0 actions</span>
+      </div>
+      <button id="workflow-stop-btn" style="background: #f44336; color: white; border: none; padding: 6px 16px; border-radius: 15px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit;">Stop</button>
+      <button id="workflow-close-btn" style="background: transparent; color: white; border: none; padding: 4px 8px; font-size: 16px; cursor: pointer; font-family: inherit; opacity: 0.7;" title="Close notification">×</button>
+    </div>
+  `;
+
   document.body.appendChild(workflowRecordingIndicator);
+
+  // Add stop button click handler
+  const stopBtn = document.getElementById('workflow-stop-btn');
+  const closeBtn = document.getElementById('workflow-close-btn');
+
+  if (stopBtn) {
+    stopBtn.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      stopBtn.disabled = true;
+      stopBtn.textContent = 'Stopping...';
+
+      try {
+        // Stop workflow recording via background script (which handles saving automatically)
+        // Include tabId explicitly - sender.tab.id can be undefined in some edge cases
+        chrome.runtime.sendMessage({
+          action: 'stopWorkflowRecording',
+          tabId: workflowTabId
+        }, (response) => {
+          if (chrome.runtime.lastError) {
+            console.error('[WorkflowRecording] Error:', chrome.runtime.lastError.message);
+            stopBtn.textContent = 'Error';
+            stopBtn.style.background = '#666';
+            return;
+          }
+
+          if (response && response.success) {
+            console.log('[WorkflowRecording] Stop response:', response);
+            const workflowId = response.workflow?.sessionId || 'unknown';
+            const actionCount = response.workflow?.actions?.length || 0;
+            console.log('[WorkflowRecording] Extracted workflowId:', workflowId, 'actionCount:', actionCount);
+            // Show completion with action buttons
+            showWorkflowRecordingComplete(workflowId, actionCount);
+          } else {
+            console.error('[WorkflowRecording] Failed to save:', response?.error);
+            // Don't remove indicator, just show error
+            stopBtn.textContent = 'Error';
+            stopBtn.style.background = '#666';
+          }
+        });
+      } catch (error) {
+        console.error('[WorkflowRecording] Error stopping:', error);
+        // Don't remove indicator, just show error
+        stopBtn.textContent = 'Error';
+        stopBtn.style.background = '#666';
+      }
+    });
+  }
+
+  if (closeBtn) {
+    closeBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      removeWorkflowRecordingIndicator();
+    });
+  }
 }
 
 function removeWorkflowRecordingIndicator() {
@@ -983,6 +1116,97 @@ function updateWorkflowActionCount() {
   }
 }
 
+// Show workflow recording completion with action buttons
+function showWorkflowRecordingComplete(workflowId, actionCount) {
+  if (!workflowRecordingIndicator) return;
+
+  workflowRecordingIndicator.innerHTML = `
+    <div style="display: flex; flex-direction: column; gap: 10px; position: relative; padding-right: 30px;">
+      <button class="wf-close-complete" style="position: absolute; top: -8px; right: -8px; background: transparent; color: white; border: none; padding: 4px 8px; font-size: 20px; cursor: pointer; font-family: inherit; opacity: 0.7; line-height: 1;" title="Close notification">×</button>
+
+      <div style="display: flex; align-items: center; gap: 8px;">
+        <span style="color: #4CAF50; font-size: 16px;">✓</span>
+        <span style="font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 400px;" title="${workflowId}">${workflowId}</span>
+      </div>
+
+      <div style="font-size: 11px; color: rgba(255,255,255,0.7); margin-top: -5px;">
+        ${actionCount} actions • ${new Date().toLocaleString()}
+      </div>
+
+      <div style="display: flex; gap: 6px; flex-wrap: wrap;">
+        <button class="wf-copy-id" data-id="${workflowId}" style="background: #2196F3; color: white; border: none; padding: 6px 12px; border-radius: 12px; font-size: 11px; cursor: pointer; font-family: inherit; font-weight: 500;">Copy ID</button>
+        <button class="wf-copy-prompt" data-id="${workflowId}" style="background: #4CAF50; color: white; border: none; padding: 6px 12px; border-radius: 12px; font-size: 11px; cursor: pointer; font-family: inherit; font-weight: 500;">Copy Prompt</button>
+        <button class="wf-view" data-id="${workflowId}" style="background: #9C27B0; color: white; border: none; padding: 6px 12px; border-radius: 12px; font-size: 11px; cursor: pointer; font-family: inherit; font-weight: 500;">View</button>
+        <button class="wf-delete" data-id="${workflowId}" style="background: #f44336; color: white; border: none; padding: 6px 12px; border-radius: 12px; font-size: 11px; cursor: pointer; font-family: inherit; font-weight: 500;">Delete</button>
+      </div>
+    </div>
+  `;
+
+  // Add event listeners for action buttons
+  const copyIdBtn = workflowRecordingIndicator.querySelector('.wf-copy-id');
+  const copyPromptBtn = workflowRecordingIndicator.querySelector('.wf-copy-prompt');
+  const viewBtn = workflowRecordingIndicator.querySelector('.wf-view');
+  const deleteBtn = workflowRecordingIndicator.querySelector('.wf-delete');
+  const closeBtn = workflowRecordingIndicator.querySelector('.wf-close-complete');
+
+  if (copyIdBtn) {
+    copyIdBtn.addEventListener('click', async () => {
+      try {
+        await navigator.clipboard.writeText(workflowId);
+        copyIdBtn.textContent = 'Copied!';
+        setTimeout(() => copyIdBtn.textContent = 'Copy ID', 2000);
+      } catch (error) {
+        console.error('[WorkflowRecording] Failed to copy ID:', error);
+      }
+    });
+  }
+
+  if (copyPromptBtn) {
+    copyPromptBtn.addEventListener('click', async () => {
+      const prompt = `Please use the get_workflow_recording function in Chrome Debug to load the workflow recording "${workflowId}".`;
+      try {
+        await navigator.clipboard.writeText(prompt);
+        copyPromptBtn.textContent = 'Copied!';
+        setTimeout(() => copyPromptBtn.textContent = 'Copy Prompt', 2000);
+      } catch (error) {
+        console.error('[WorkflowRecording] Failed to copy prompt:', error);
+      }
+    });
+  }
+
+  if (viewBtn) {
+    viewBtn.addEventListener('click', () => {
+      // Ask background to open frame editor (content scripts can't create tabs)
+      chrome.runtime.sendMessage({
+        action: 'openFrameEditor',
+        sessionId: workflowId,
+        type: 'workflow'
+      });
+    });
+  }
+
+  if (deleteBtn) {
+    deleteBtn.addEventListener('click', async () => {
+      if (confirm('Delete this workflow recording?')) {
+        chrome.runtime.sendMessage({
+          action: 'deleteWorkflowRecording',
+          workflowId: workflowId
+        }, (response) => {
+          if (response && response.success) {
+            removeWorkflowRecordingIndicator();
+          }
+        });
+      }
+    });
+  }
+
+  if (closeBtn) {
+    closeBtn.addEventListener('click', () => {
+      removeWorkflowRecordingIndicator();
+    });
+  }
+}
+
 // Enhanced click tracking helper functions - Pro Feature
 // Try to import enhanced capture module (only exists in pro build)
 let enhancedCaptureModule = null;
@@ -1024,16 +1248,13 @@ 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 +1263,7 @@ async function recordClick(event) {
       element = clickableParent;
     }
   }
-  
+
   const action = {
     type: 'click',
     selector: getUniqueSelector(element),
@@ -1057,92 +1278,89 @@ 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 {
+        // Capture enhanced element data (only include fields with meaningful values)
+        const capturedHTML = captureElementHTML(element);
+        if (capturedHTML) {
+          action.element_html = capturedHTML;
+        }
 
-      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 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 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 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 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 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 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 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
+        // Enhanced click data captured successfully - no need to log
+      } 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');
-  }
-  
-  // Capture screenshot if enabled
+    // Enhanced capture setting checked - no need to log state
+  }).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 +1381,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 +1467,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);
@@ -1289,8 +1502,9 @@ function startWorkflowRecording(screenshotSettings) {
             timestamp: event.timestamp,
             stack: event.call_stack || null
           });
-          
-          console.log('[ChromePilot] Function trace captured for workflow:', event.function_name);
+
+          // REMOVED: console.log that logged EVERY function execution (thousands per second)
+          // Function traces are already stored in workflowActions array - no need to log each one
         }
       });
     };
@@ -1299,7 +1513,8 @@ function startWorkflowRecording(screenshotSettings) {
     window.ChromePilotTracker._setRecordingStatus(true);
     console.log('[ChromePilot] Connected workflow recording to FunctionTracker');
   } else {
-    console.warn('[ChromePilot] FunctionTracker not available for workflow recording');
+    // FunctionTracker is a PRO feature - use debug level to avoid confusing FREE users
+    console.debug('[ChromePilot] FunctionTracker not available (PRO feature)');
   }
   
   // Add event listeners for recording
@@ -1326,11 +1541,22 @@ function startWorkflowRecording(screenshotSettings) {
 }
 
 // Stop workflow recording
-function stopWorkflowRecording() {
+async function stopWorkflowRecording() {
   isWorkflowRecording = false;
-  removeWorkflowRecordingIndicator();
-  
+  workflowTabId = null; // Reset tabId when recording stops
+  // DON'T remove indicator here - let the completion screen handle it
+  // 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 +1613,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,
@@ -1732,8 +1974,6 @@ async function recordScreenClick(event) {
   const enhanceCapture = await shouldEnhanceCapture();
   if (enhanceCapture) {
     try {
-      console.log('[ChromePilot] Capturing enhanced screen click data...');
-
       // Capture enhanced element data (only include fields with meaningful values)
       const capturedHTML = captureElementHTML(element);
       if (capturedHTML) {
@@ -1784,14 +2024,13 @@ async function recordScreenClick(event) {
         }
       }
 
-      console.log('[ChromePilot] Enhanced screen click data captured successfully');
+      // Enhanced screen click data captured successfully - no need to log
     } catch (error) {
       console.warn('[ChromePilot] Error capturing enhanced screen click data:', error);
       // Continue with basic click recording if enhanced capture fails
     }
-  } else {
-    console.log('[ChromePilot] Enhanced screen click capture disabled - using basic capture only');
   }
+  // Enhanced capture setting checked - no need to log state
 
   sendScreenInteraction(interaction);
 
@@ -2087,7 +2326,7 @@ function showRecordingInterface() {
   
   // Create recording overlay
   recordingOverlay = document.createElement('div');
-  recordingOverlay.id = 'chrome-pilot-recording-overlay';
+  recordingOverlay.id = 'chrome-debug-recording-overlay';
   recordingOverlay.style.cssText = `
     position: fixed;
     bottom: 20px;
@@ -2105,13 +2344,13 @@ function showRecordingInterface() {
   recordingOverlay.innerHTML = `
     <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
       <h3 style="margin: 0; font-size: 16px; color: #333;">Screen Recording</h3>
-      <button id="chrome-pilot-close-recording" style="background: none; border: none; font-size: 20px; cursor: pointer; color: #666;">&times;</button>
+      <button id="chrome-debug-close-recording" style="background: none; border: none; font-size: 20px; cursor: pointer; color: #666;">&times;</button>
     </div>
     <p style="margin: 0 0 15px 0; font-size: 13px; color: #666;">
       Recording this tab with console logs
     </p>
-    <div id="chrome-pilot-recording-status" style="text-align: center; margin-bottom: 15px; font-size: 14px; color: #666;"></div>
-    <button id="chrome-pilot-record-btn" style="
+    <div id="chrome-debug-recording-status" style="text-align: center; margin-bottom: 15px; font-size: 14px; color: #666;"></div>
+    <button id="chrome-debug-record-btn" style="
       width: 100%;
       padding: 10px;
       background: #f44336;
@@ -2122,13 +2361,13 @@ function showRecordingInterface() {
       font-size: 14px;
       font-weight: 500;
     ">Start Recording</button>
-    <div id="chrome-pilot-recording-result" style="margin-top: 15px; display: none;"></div>
+    <div id="chrome-debug-recording-result" style="margin-top: 15px; display: none;"></div>
   `;
   
   document.body.appendChild(recordingOverlay);
   
   // Add event listeners
-  document.getElementById('chrome-pilot-close-recording').addEventListener('click', () => {
+  document.getElementById('chrome-debug-close-recording').addEventListener('click', () => {
     if (isRecording) {
       if (confirm('Stop recording and close?')) {
         stopRecording();
@@ -2141,7 +2380,7 @@ function showRecordingInterface() {
     }
   });
   
-  document.getElementById('chrome-pilot-record-btn').addEventListener('click', () => {
+  document.getElementById('chrome-debug-record-btn').addEventListener('click', () => {
     if (!isRecording) {
       startRecording();
     } else {
@@ -2152,8 +2391,8 @@ function showRecordingInterface() {
 
 // Start recording from content script
 function startRecording() {
-  const recordBtn = document.getElementById('chrome-pilot-record-btn');
-  const statusDiv = document.getElementById('chrome-pilot-recording-status');
+  const recordBtn = document.getElementById('chrome-debug-record-btn');
+  const statusDiv = document.getElementById('chrome-debug-recording-status');
   
   recordBtn.disabled = true;
   recordBtn.textContent = 'Starting...';
@@ -2200,9 +2439,9 @@ function startRecording() {
 
 // Stop recording
 function stopRecording() {
-  const recordBtn = document.getElementById('chrome-pilot-record-btn');
-  const statusDiv = document.getElementById('chrome-pilot-recording-status');
-  const resultDiv = document.getElementById('chrome-pilot-recording-result');
+  const recordBtn = document.getElementById('chrome-debug-record-btn');
+  const statusDiv = document.getElementById('chrome-debug-recording-status');
+  const resultDiv = document.getElementById('chrome-debug-recording-result');
   
   recordBtn.disabled = true;
   recordBtn.textContent = 'Stopping...';
@@ -2664,6 +2903,7 @@ class ScreenCaptureVisualFeedback {
   init() {
     // Listen for screen capture events
     chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+      console.log('[ScreenCapture] Received message:', message.type, message);
       switch (message.type) {
         case 'start-screen-capture-tracking':
           this.handleStartScreenCapture(message);
@@ -2677,11 +2917,27 @@ class ScreenCaptureVisualFeedback {
         case 'stop-screen-capture-tracking':
           this.handleStopScreenCapture(message);
           break;
+        case 'recording-complete-show-ui':
+          // Show completion UI when stopped from popup (not from mini menu button)
+          console.log('[ScreenCapture] Processing recording-complete-show-ui, sessionId:', message.sessionId, 'actionCount:', this.actionCount);
+          if (message.sessionId) {
+            console.log('[ScreenCapture] Calling showScreenRecordingComplete with sessionId:', message.sessionId);
+            this.showScreenRecordingComplete(message.sessionId, this.actionCount);
+          } else {
+            console.log('[ScreenCapture] ERROR: No sessionId in recording-complete-show-ui message!');
+          }
+          break;
+        default:
+          // Log unknown message types for debugging
+          if (message.type && message.type.includes('screen-capture') || message.type && message.type.includes('recording')) {
+            console.log('[ScreenCapture] Unknown screen capture message type:', message.type);
+          }
       }
     });
   }
 
   handleStartScreenCapture(message) {
+    console.log('[ScreenCapture] Starting new recording, current indicator exists:', !!this.recordingIndicatorElement);
     this.isRecording = true;
     this.actionCount = 0;
     this.showRecordingIndicator();
@@ -2728,9 +2984,11 @@ class ScreenCaptureVisualFeedback {
 
   handleStopScreenCapture(message) {
     this.isRecording = false;
-    this.hideRecordingIndicator();
+    // DON'T hide indicator here - let the completion screen handle it
+    // this.hideRecordingIndicator();
     this.hideActionCounter();
-    this.cleanup();
+    // Don't cleanup yet - we want to keep the indicator visible
+    // this.cleanup();
   }
 
   showClickHighlight(x, y) {
@@ -2766,80 +3024,96 @@ class ScreenCaptureVisualFeedback {
   }
 
   showRecordingIndicator() {
-    if (!this.recordingIndicatorElement) {
-      // Add required CSS styles if not already added
-      if (!document.getElementById('screen-capture-styles')) {
-        const style = document.createElement('style');
-        style.id = 'screen-capture-styles';
-        style.textContent = `
-          @keyframes pulse {
-            0% { opacity: 1; }
-            50% { opacity: 0.5; }
-            100% { opacity: 1; }
-          }
-          @keyframes screen-capture-pulse {
-            0% { opacity: 1; transform: scale(1); }
-            50% { opacity: 0.7; transform: scale(1.1); }
-            100% { opacity: 1; transform: scale(1); }
-          }
-          .screen-capture-click-highlight {
-            position: fixed;
-            width: 40px;
-            height: 40px;
-            border: 3px solid #4CAF50;
-            border-radius: 50%;
-            background: rgba(76, 175, 80, 0.3);
-            transform: translate(-50%, -50%);
-            pointer-events: none;
-            z-index: 2147483646;
-            animation: screen-capture-ripple 0.5s ease-out;
+    // CRITICAL FIX: Clear any existing countdown interval FIRST
+    if (this.countdownInterval) {
+      console.log('[ScreenCapture] Clearing existing countdown interval');
+      clearInterval(this.countdownInterval);
+      this.countdownInterval = null;
+    }
+
+    // CRITICAL FIX: If old indicator exists (showing completion), remove it completely
+    // This ensures the old popup closes immediately before showing the new countdown
+    if (this.recordingIndicatorElement && this.recordingIndicatorElement.parentNode) {
+      console.log('[ScreenCapture] Removing old indicator element from DOM');
+      this.recordingIndicatorElement.parentNode.removeChild(this.recordingIndicatorElement);
+      this.recordingIndicatorElement = null;
+      console.log('[ScreenCapture] Old indicator removed successfully');
+    } else {
+      console.log('[ScreenCapture] No old indicator to remove, creating fresh');
+    }
+
+    // Add required CSS styles if not already added
+    if (!document.getElementById('screen-capture-styles')) {
+      const style = document.createElement('style');
+      style.id = 'screen-capture-styles';
+      style.textContent = `
+        @keyframes pulse {
+          0% { opacity: 1; }
+          50% { opacity: 0.5; }
+          100% { opacity: 1; }
+        }
+        @keyframes screen-capture-pulse {
+          0% { opacity: 1; transform: scale(1); }
+          50% { opacity: 0.7; transform: scale(1.1); }
+          100% { opacity: 1; transform: scale(1); }
+        }
+        .screen-capture-click-highlight {
+          position: fixed;
+          width: 40px;
+          height: 40px;
+          border: 3px solid #4CAF50;
+          border-radius: 50%;
+          background: rgba(76, 175, 80, 0.3);
+          transform: translate(-50%, -50%);
+          pointer-events: none;
+          z-index: 2147483646;
+          animation: screen-capture-ripple 0.5s ease-out;
+        }
+        @keyframes screen-capture-ripple {
+          0% {
+            transform: translate(-50%, -50%) scale(0);
+            opacity: 1;
           }
-          @keyframes screen-capture-ripple {
-            0% {
-              transform: translate(-50%, -50%) scale(0);
-              opacity: 1;
-            }
-            100% {
-              transform: translate(-50%, -50%) scale(1);
-              opacity: 0;
-            }
+          100% {
+            transform: translate(-50%, -50%) scale(1);
+            opacity: 0;
           }
-        `;
-        document.head.appendChild(style);
-      }
-
-      this.recordingIndicatorElement = document.createElement('div');
-      this.recordingIndicatorElement.className = 'screen-capture-recording-indicator-unified';
-
-      // Use inline styles to match workflow recording exactly
-      Object.assign(this.recordingIndicatorElement.style, {
-        position: 'fixed',
-        bottom: '80px', // Keep different from workflow to avoid collision
-        left: '20px',
-        background: 'rgba(0, 0, 0, 0.9)',
-        color: 'white',
-        padding: '12px 20px',
-        borderRadius: '25px',
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif',
-        fontSize: '14px',
-        fontWeight: '500',
-        zIndex: '2147483647',
-        display: 'flex',
-        alignItems: 'center',
-        gap: '8px',
-        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
-        backdropFilter: 'blur(10px)',
-        WebkitBackdropFilter: 'blur(10px)',
-        pointerEvents: 'none',
-        userSelect: 'none'
-      });
+        }
+      `;
+      document.head.appendChild(style);
+    }
+
+    // Always create fresh element for new recording
+    this.recordingIndicatorElement = document.createElement('div');
+    this.recordingIndicatorElement.className = 'screen-capture-recording-indicator-unified';
+
+    // Use inline styles to match workflow recording exactly
+    Object.assign(this.recordingIndicatorElement.style, {
+      position: 'fixed',
+      bottom: '80px', // Keep different from workflow to avoid collision
+      left: '20px',
+      background: 'rgba(0, 0, 0, 0.9)',
+      color: 'white',
+      padding: '12px 20px',
+      borderRadius: '25px',
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif',
+      fontSize: '14px',
+      fontWeight: '500',
+      zIndex: '2147483647',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
+      backdropFilter: 'blur(10px)',
+      WebkitBackdropFilter: 'blur(10px)',
+      pointerEvents: 'none',
+      userSelect: 'none'
+    });
 
-      // Start with countdown
-      this.startCountdownSequence();
-      document.body.appendChild(this.recordingIndicatorElement);
-    }
+    document.body.appendChild(this.recordingIndicatorElement);
 
-    this.recordingIndicatorElement.style.display = 'flex';
+    // Start countdown sequence
+    this.startCountdownSequence();
   }
 
   startCountdownSequence() {
@@ -2862,18 +3136,146 @@ class ScreenCaptureVisualFeedback {
           <span class="action-count-badge" style="background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 12px; font-size: 12px;">0 actions</span>
         `;
       } else {
-        // Switch to recording display
+        // Switch to recording display with stop button
+        this.recordingIndicatorElement.style.pointerEvents = 'auto'; // Enable clicking
         this.recordingIndicatorElement.innerHTML = `
-          <span style="color: #4CAF50; font-size: 20px; animation: pulse 1.5s infinite;">●</span>
-          <span>Recording Screen Capture...</span>
-          <span class="action-count-badge" style="background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 12px; font-size: 12px;">0 actions</span>
+          <div style="display: flex; align-items: center; gap: 12px;">
+            <div style="display: flex; align-items: center; gap: 8px; flex: 1;">
+              <span style="color: #4CAF50; font-size: 20px; animation: pulse 1.5s infinite;">●</span>
+              <span>Recording Screen Capture...</span>
+              <span class="action-count-badge" style="background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 12px; font-size: 12px;">0 actions</span>
+            </div>
+            <button id="screen-stop-btn" style="background: #f44336; color: white; border: none; padding: 6px 16px; border-radius: 15px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit;">Stop</button>
+            <button id="screen-close-btn" style="background: transparent; color: white; border: none; padding: 4px 8px; font-size: 16px; cursor: pointer; font-family: inherit; opacity: 0.7;" title="Close notification">×</button>
+          </div>
         `;
         clearInterval(this.countdownInterval);
         this.countdownInterval = null;
+
+        // Add stop button click handler
+        const stopBtn = document.getElementById('screen-stop-btn');
+        const closeBtn = document.getElementById('screen-close-btn');
+
+        if (stopBtn) {
+          stopBtn.addEventListener('click', async (e) => {
+            e.stopPropagation();
+            stopBtn.disabled = true;
+            stopBtn.textContent = 'Stopping...';
+
+            // Send message to background to stop recording (correct action name)
+            chrome.runtime.sendMessage({ action: 'stopRecording' }, (response) => {
+              if (response && response.success && response.sessionId) {
+                // Show completion with action buttons
+                this.showScreenRecordingComplete(response.sessionId, this.actionCount);
+              } else {
+                console.error('[ScreenRecording] Failed to stop:', response?.error);
+                // Don't hide indicator, just show error
+                stopBtn.textContent = 'Error';
+                stopBtn.style.background = '#666';
+              }
+            });
+          });
+        }
+
+        if (closeBtn) {
+          closeBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.hideRecordingIndicator();
+          });
+        }
       }
     }, 1000);
   }
 
+  showScreenRecordingComplete(sessionId, actionCount) {
+    if (!this.recordingIndicatorElement) return;
+
+    this.recordingIndicatorElement.innerHTML = `
+      <div style="display: flex; flex-direction: column; gap: 10px; position: relative; padding-right: 30px;">
+        <button class="sc-close-complete" style="position: absolute; top: -8px; right: -8px; background: transparent; color: white; border: none; padding: 4px 8px; font-size: 20px; cursor: pointer; font-family: inherit; opacity: 0.7; line-height: 1;" title="Close notification">×</button>
+
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <span style="color: #4CAF50; font-size: 16px;">🎬</span>
+          <span style="font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 400px;" title="${sessionId}">${sessionId} (frames)</span>
+        </div>
+
+        <div style="font-size: 11px; color: rgba(255,255,255,0.7); margin-top: -5px;">
+          ${actionCount} actions • ${new Date().toLocaleString()}
+        </div>
+
+        <div style="display: flex; gap: 6px; flex-wrap: wrap;">
+          <button class="sc-copy-id" data-id="${sessionId}" style="background: #2196F3; color: white; border: none; padding: 6px 12px; border-radius: 12px; font-size: 11px; cursor: pointer; font-family: inherit; font-weight: 500;">Copy ID</button>
+          <button class="sc-copy-prompt" data-id="${sessionId}" style="background: #4CAF50; color: white; border: none; padding: 6px 12px; border-radius: 12px; font-size: 11px; cursor: pointer; font-family: inherit; font-weight: 500;">Copy Prompt</button>
+          <button class="sc-view" data-id="${sessionId}" style="background: #9C27B0; color: white; border: none; padding: 6px 12px; border-radius: 12px; font-size: 11px; cursor: pointer; font-family: inherit; font-weight: 500;">View</button>
+          <button class="sc-delete" data-id="${sessionId}" style="background: #f44336; color: white; border: none; padding: 6px 12px; border-radius: 12px; font-size: 11px; cursor: pointer; font-family: inherit; font-weight: 500;">Delete</button>
+        </div>
+      </div>
+    `;
+
+    // Add event listeners for action buttons
+    const copyIdBtn = this.recordingIndicatorElement.querySelector('.sc-copy-id');
+    const copyPromptBtn = this.recordingIndicatorElement.querySelector('.sc-copy-prompt');
+    const viewBtn = this.recordingIndicatorElement.querySelector('.sc-view');
+    const deleteBtn = this.recordingIndicatorElement.querySelector('.sc-delete');
+    const closeBtn = this.recordingIndicatorElement.querySelector('.sc-close-complete');
+
+    if (copyIdBtn) {
+      copyIdBtn.addEventListener('click', async () => {
+        try {
+          await navigator.clipboard.writeText(sessionId);
+          copyIdBtn.textContent = 'Copied!';
+          setTimeout(() => copyIdBtn.textContent = 'Copy ID', 2000);
+        } catch (error) {
+          console.error('[ScreenRecording] Failed to copy ID:', error);
+        }
+      });
+    }
+
+    if (copyPromptBtn) {
+      copyPromptBtn.addEventListener('click', async () => {
+        const prompt = `Please use the chrome_debug_show_frames function in Chrome Debug to display the screen recording "${sessionId}".`;
+        try {
+          await navigator.clipboard.writeText(prompt);
+          copyPromptBtn.textContent = 'Copied!';
+          setTimeout(() => copyPromptBtn.textContent = 'Copy Prompt', 2000);
+        } catch (error) {
+          console.error('[ScreenRecording] Failed to copy prompt:', error);
+        }
+      });
+    }
+
+    if (viewBtn) {
+      viewBtn.addEventListener('click', () => {
+        // Ask background to open frame editor (content scripts can't create tabs)
+        chrome.runtime.sendMessage({
+          action: 'openFrameEditor',
+          sessionId: sessionId
+        });
+      });
+    }
+
+    if (deleteBtn) {
+      deleteBtn.addEventListener('click', async () => {
+        if (confirm('Delete this screen recording?')) {
+          chrome.runtime.sendMessage({
+            action: 'deleteScreenRecording',
+            sessionId: sessionId
+          }, (response) => {
+            if (response && response.success) {
+              this.hideRecordingIndicator();
+            }
+          });
+        }
+      });
+    }
+
+    if (closeBtn) {
+      closeBtn.addEventListener('click', () => {
+        this.hideRecordingIndicator();
+      });
+    }
+  }
+
   hideRecordingIndicator() {
     // Clear countdown interval if running
     if (this.countdownInterval) {