@dynamicu/chromedebug-mcp 2.6.7 → 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('.')}`;
     }
@@ -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,14 +494,31 @@ 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');
-      stopWorkflowRecording().then(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 stopping workflow recording:', error);
+        console.error('[ChromeDebug MCP] Error getting workflow data:', error);
         sendResponse({ success: false, error: error.message });
       });
       return true; // Keep channel open for async response
@@ -634,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;
@@ -857,6 +874,7 @@ 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
 
@@ -936,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
@@ -985,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',
@@ -1012,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() {
@@ -1033,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;
@@ -1076,12 +1250,9 @@ async function shouldEnhanceCapture() {
 // Record click action
 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
@@ -1116,8 +1287,6 @@ function recordClick(event) {
   shouldEnhanceCapture().then(enhanceCapture => {
     if (enhanceCapture) {
       try {
-        console.log('[ChromePilot] Capturing enhanced click data asynchronously...');
-
         // Capture enhanced element data (only include fields with meaningful values)
         const capturedHTML = captureElementHTML(element);
         if (capturedHTML) {
@@ -1168,14 +1337,13 @@ function recordClick(event) {
           }
         }
 
-        console.log('[ChromePilot] Enhanced click data captured successfully');
+        // 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');
     }
+    // Enhanced capture setting checked - no need to log state
   }).catch(error => {
     console.error('[ChromePilot] Error checking enhanced capture setting:', error);
   });
@@ -1334,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
         }
       });
     };
@@ -1344,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
@@ -1373,7 +1543,9 @@ function startWorkflowRecording(screenshotSettings) {
 // Stop workflow recording
 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`);
 
@@ -1802,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) {
@@ -1854,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);
 
@@ -2157,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;
@@ -2175,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;
@@ -2192,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();
@@ -2211,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 {
@@ -2222,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...';
@@ -2270,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...';
@@ -2734,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);
@@ -2747,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();
@@ -2798,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) {
@@ -2836,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() {
@@ -2932,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) {