@dynamicu/chromedebug-mcp 2.6.7 → 2.7.1

package/chrome-extension/content.js

@@ -5,7 +5,7 @@
   
   // Check if already loaded
   if (window.chromePilotContentScriptLoaded) {
-    console.log('[ChromeDebug MCP v2.0] Content script already loaded, skipping re-injection');
+    // console.log('[ChromeDebug MCP v2.0] Content script already loaded, skipping re-injection');
     return;
   }
   
@@ -60,7 +60,7 @@
     }
     
     if (shouldBlock) {
-      console.log(`[ChromeDebug MCP] Skipping restricted site (${mode} mode):`, hostname);
+      // console.log(`[ChromeDebug MCP] Skipping restricted site (${mode} mode):`, hostname);
       return;
     }
     
@@ -72,7 +72,7 @@
     window.chromePilotContentScriptLoaded = true;
   
   const CHROME_PILOT_VERSION = '2.0.4-BUILD-20250119';
-  console.log(`[content.js] Loaded version: ${CHROME_PILOT_VERSION}`);
+  // console.log(`[content.js] Loaded version: ${CHROME_PILOT_VERSION}`);
 
 let frameFlashIndicator = null;
 
@@ -88,7 +88,7 @@ function isExtensionValid() {
 
 // Initialize ChromeDebug MCP content script
 setTimeout(() => {
-  console.log('[ChromeDebug MCP] 🚀 Content script initializing...');
+  // console.log('[ChromeDebug MCP] 🚀 Content script initializing...');
 }, 100);
 
 /*
@@ -119,7 +119,7 @@ let consoleMonitorInjected = false;
 
 function injectConsoleMonitor() {
   if (consoleMonitorInjected) {
-    console.log('[ChromeDebug] Console monitor already injected');
+    // console.log('[ChromeDebug] Console monitor already injected');
     return Promise.resolve(true);
   }
 
@@ -128,7 +128,7 @@ function injectConsoleMonitor() {
     script.src = chrome.runtime.getURL('console-monitor.js');
 
     script.onload = function() {
-      console.log('[ChromeDebug] Console monitor loaded successfully');
+      // console.log('[ChromeDebug] Console monitor loaded successfully');
       consoleMonitorInjected = true;
       this.remove();
       resolve(true);
@@ -154,7 +154,7 @@ window.addEventListener('message', (event) => {
   }
 });
 
-console.log('[ChromeDebug] Console monitoring ready (will inject on demand)');
+// console.log('[ChromeDebug] Console monitoring ready (will inject on demand)');
 */
 
 function getAngularComponentInfo(element) {
@@ -190,7 +190,7 @@ function getAngularComponentInfo(element) {
       };
     }
   } catch (e) {
-    console.log('Error detecting Angular component:', e);
+    // console.log('Error detecting Angular component:', e);
   }
   
   return null;
@@ -218,8 +218,8 @@ function getReactComponentInfo(element) {
   
   // Debug: Log the first fiber to see what properties are available
   if (fiber) {
-    console.log('React Fiber found:', fiber);
-    console.log('Fiber properties:', Object.keys(fiber));
+    // console.log('React Fiber found:', fiber);
+    // console.log('Fiber properties:', Object.keys(fiber));
   }
   
   while (currentFiber) {
@@ -239,7 +239,7 @@ function getReactComponentInfo(element) {
           lineNumber: currentFiber._debugSource.lineNumber,
           columnNumber: currentFiber._debugSource.columnNumber
         };
-        console.log('Found _debugSource:', sourceInfo);
+        // console.log('Found _debugSource:', sourceInfo);
       }
       
       // Method 2: _owner and _source
@@ -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('.')}`;
     }
@@ -350,8 +350,8 @@ function getComponentInfo(element) {
   while (currentElement && depth < maxDepth) {
     // Log for debugging
     if (depth === 0) {
-      console.log(`Checking element:`, currentElement);
-      console.log(`Element keys:`, Object.keys(currentElement).filter(k => k.includes('react')));
+      // console.log(`Checking element:`, currentElement);
+      // console.log(`Element keys:`, Object.keys(currentElement).filter(k => k.includes('react')));
     }
     
     // Try to find React info on current element
@@ -388,7 +388,7 @@ function getComponentInfo(element) {
     return angularInfo;
   }
   
-  console.log('No component info found');
+  // console.log('No component info found');
   return null;
 }
 
@@ -401,12 +401,12 @@ let cleanupExecuted = false;
 async function cleanup() {
   // Idempotent protection - only run cleanup once
   if (cleanupExecuted) {
-    console.log('[ChromeDebug MCP] Cleanup already executed, skipping');
+    // console.log('[ChromeDebug MCP] Cleanup already executed, skipping');
     return;
   }
 
   cleanupExecuted = true;
-  console.log('[ChromeDebug MCP] Executing cleanup...');
+  // console.log('[ChromeDebug MCP] Executing cleanup...');
 
   // Clean up recording indicators and event listeners
   try {
@@ -414,7 +414,7 @@ async function cleanup() {
 
     // Stop workflow recording if active
     if (typeof isWorkflowRecording !== 'undefined' && isWorkflowRecording) {
-      console.log('[ChromeDebug MCP] Stopping workflow recording during cleanup');
+      // console.log('[ChromeDebug MCP] Stopping workflow recording during cleanup');
       if (typeof stopWorkflowRecording === 'function') {
         await stopWorkflowRecording();
       }
@@ -422,13 +422,13 @@ async function cleanup() {
     
     // Stop screen interaction tracking if active
     if (typeof isScreenRecording !== 'undefined' && isScreenRecording) {
-      console.log('[ChromeDebug MCP] Stopping screen recording during cleanup');
+      // console.log('[ChromeDebug MCP] Stopping screen recording during cleanup');
       if (typeof stopScreenInteractionTracking === 'function') {
         stopScreenInteractionTracking();
       }
     }
     
-    console.log('[ChromeDebug MCP] Cleanup completed successfully');
+    // console.log('[ChromeDebug MCP] Cleanup completed successfully');
   } catch (error) {
     console.warn('[ChromeDebug MCP] Error during cleanup:', error);
   }
@@ -449,7 +449,7 @@ if (isExtensionValid()) {
       });
       return true; // Keep channel open for async response
     } else if (request.action === 'showRecordingUI') {
-      console.log('Received showRecordingUI message');
+      // console.log('Received showRecordingUI message');
       showRecordingInterface();
       sendResponse({ success: true });
       return true; // Keep channel open for async response
@@ -458,9 +458,9 @@ if (isExtensionValid()) {
       sendResponse({ success: true });
     } else if (request.action === 'recordingComplete') {
       // Show the recording ID in the floating UI
-      console.log('Recording complete with ID:', request.recordingId);
+      // 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>`;
           
@@ -476,32 +476,49 @@ if (isExtensionValid()) {
       sendResponse({ success: true });
     } else if (request.action === 'recordingStarted') {
       // Recording indicator now handled by ScreenCaptureVisualFeedback
-      console.log('[ChromeDebug MCP] Received recordingStarted message with scheduled start time:', request.scheduledStartTime);
+      // console.log('[ChromeDebug MCP] Received recordingStarted message with scheduled start time:', request.scheduledStartTime);
       // Start tracking screen interactions with scheduled timing
       startScreenInteractionTracking(request.scheduledStartTime, request.sessionId);
       sendResponse({ success: true });
     } else if (request.action === 'recordingStopped') {
       // Recording indicator cleanup now handled by ScreenCaptureVisualFeedback
-      console.log('[ChromeDebug MCP] Received recordingStopped message');
+      // console.log('[ChromeDebug MCP] Received recordingStopped message');
       // Stop tracking screen interactions
       stopScreenInteractionTracking();
       sendResponse({ success: true });
     } else if (request.action === 'recordingSessionComplete') {
       // Recording indicator cleanup now handled by ScreenCaptureVisualFeedback
-      console.log('[ChromeDebug MCP] Received recordingSessionComplete message');
+      // console.log('[ChromeDebug MCP] Received recordingSessionComplete message');
       // Stop tracking screen interactions
       stopScreenInteractionTracking();
       sendResponse({ success: true });
     } else if (request.action === 'startWorkflowRecording') {
-      console.log('[ChromeDebug MCP] Starting workflow recording with settings:', request.screenshotSettings);
+      // 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
@@ -531,7 +548,7 @@ if (isExtensionValid()) {
       return true; // Keep channel open for async response
     } else if (request.action === 'startFullDataRecording') {
       // Start full data recording with user configuration
-      console.log('[ChromeDebug MCP] Starting full data recording with config:', request.config);
+      // console.log('[ChromeDebug MCP] Starting full data recording with config:', request.config);
       startFullDataRecording(request.config).then(() => {
         sendResponse({ success: true });
       }).catch(error => {
@@ -540,7 +557,7 @@ if (isExtensionValid()) {
       return true; // Keep channel open for async response
     } else if (request.action === 'stopFullDataRecording') {
       // Stop full data recording
-      console.log('[ChromeDebug MCP] Stopping full data recording');
+      // console.log('[ChromeDebug MCP] Stopping full data recording');
       stopFullDataRecording().then(() => {
         sendResponse({ success: true });
       }).catch(error => {
@@ -606,7 +623,7 @@ async function waitForPageLoad(timeout = 10000) {
     // Set up timeout
     timeoutId = setTimeout(() => {
       cleanup();
-      console.log('[ChromePilot] Page load timeout reached, continuing...');
+      // console.log('[ChromePilot] Page load timeout reached, continuing...');
       resolve();
     }, timeout);
   });
@@ -629,12 +646,12 @@ async function waitForElement(selector, timeout = 5000) {
 
 // Function to play a workflow recording
 async function playWorkflowRecording(workflow, actions) {
-  console.log('[ChromePilot] Starting workflow playback with', actions.length, 'actions');
+  // console.log('[ChromePilot] Starting workflow playback with', actions.length, '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;
@@ -683,7 +700,7 @@ async function playWorkflowRecording(workflow, actions) {
       actionCounter.textContent = i + 1;
       
       try {
-        console.log(`[ChromePilot] Executing action ${i + 1}/${actions.length}:`, action.type, 'selector:', action.selector);
+        // console.log(`[ChromePilot] Executing action ${i + 1}/${actions.length}:`, action.type, 'selector:', action.selector);
         
         // Calculate delay based on timestamps
         let delay = 500; // Default delay
@@ -692,7 +709,7 @@ async function playWorkflowRecording(workflow, actions) {
           // Apply reasonable limits
           delay = Math.min(delay, 10000); // Cap at 10 seconds
           delay = Math.max(delay, 100); // Minimum 100ms
-          console.log(`[ChromePilot] Calculated delay: ${delay}ms`);
+          // console.log(`[ChromePilot] Calculated delay: ${delay}ms`);
         }
         
         // Wait between actions
@@ -710,13 +727,13 @@ async function playWorkflowRecording(workflow, actions) {
               let element = document.querySelector(fixedSelector);
               if (!element && action.xpath) {
                 // Try XPath as fallback
-                console.log('[ChromePilot] Trying XPath fallback:', action.xpath);
+                // console.log('[ChromePilot] Trying XPath fallback:', action.xpath);
                 const xpathResult = document.evaluate(action.xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
                 element = xpathResult.singleNodeValue;
               }
               
               if (!element) {
-                console.log('[ChromePilot] Element not found immediately, waiting...');
+                // console.log('[ChromePilot] Element not found immediately, waiting...');
                 element = await waitForElement(fixedSelector, 3000);
               }
               
@@ -728,7 +745,7 @@ async function playWorkflowRecording(workflow, actions) {
                   clickableElement = element.closest('button, a') || element;
                 }
                 
-                console.log('[ChromePilot] Found element:', clickableElement.tagName, 'for selector:', fixedSelector);
+                // console.log('[ChromePilot] Found element:', clickableElement.tagName, 'for selector:', fixedSelector);
                 clickableElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
                 await new Promise(resolve => setTimeout(resolve, 200)); // Wait for scroll
                 
@@ -741,7 +758,7 @@ async function playWorkflowRecording(workflow, actions) {
                 // Try to click
                 try {
                   clickableElement.click();
-                  console.log('[ChromePilot] Clicked element successfully');
+                  // console.log('[ChromePilot] Clicked element successfully');
                 } catch (e) {
                   console.error('[ChromePilot] Error clicking element:', e);
                   // Try alternative click method
@@ -754,7 +771,7 @@ async function playWorkflowRecording(workflow, actions) {
                 
                 // If URL changed, wait for page load
                 if (window.location.href !== currentUrl) {
-                  console.log('[ChromePilot] Navigation detected after click, waiting for page load...');
+                  // console.log('[ChromePilot] Navigation detected after click, waiting for page load...');
                   await waitForPageLoad();
                 }
               } else {
@@ -774,12 +791,12 @@ async function playWorkflowRecording(workflow, actions) {
               // Wait for element to appear if it's not immediately available
               let element = document.querySelector(action.selector);
               if (!element) {
-                console.log('[ChromePilot] Input element not found immediately, waiting...');
+                // console.log('[ChromePilot] Input element not found immediately, waiting...');
                 element = await waitForElement(action.selector, 3000);
               }
               
               if (element) {
-                console.log('[ChromePilot] Found input element:', element.tagName, 'type:', element.type, 'for selector:', action.selector);
+                // console.log('[ChromePilot] Found input element:', element.tagName, 'type:', element.type, 'for selector:', action.selector);
                 element.scrollIntoView({ behavior: 'smooth', block: 'center' });
                 await new Promise(resolve => setTimeout(resolve, 200)); // Wait for scroll
                 
@@ -791,7 +808,7 @@ async function playWorkflowRecording(workflow, actions) {
                 
                 // Set new value
                 element.value = action.value || '';
-                console.log('[ChromePilot] Set input value to:', action.value);
+                // console.log('[ChromePilot] Set input value to:', action.value);
                 
                 // Trigger events in the right order
                 element.dispatchEvent(new Event('focus', { bubbles: true }));
@@ -819,7 +836,7 @@ async function playWorkflowRecording(workflow, actions) {
             
           case 'navigation':
             // Navigation will be handled by the browser
-            console.log('[ChromePilot] Navigation detected');
+            // console.log('[ChromePilot] Navigation detected');
             break;
             
           default:
@@ -844,7 +861,7 @@ async function playWorkflowRecording(workflow, actions) {
       style.remove();
     }, 3000);
     
-    console.log('[ChromePilot] Workflow playback completed');
+    // console.log('[ChromePilot] Workflow playback completed');
     
   } catch (error) {
     console.error('[ChromePilot] Error during workflow playback:', error);
@@ -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;
@@ -1052,9 +1226,9 @@ let getPerformanceMetrics = null;
     captureElementState = module.captureElementState;
     getEnhancedComponentInfo = module.getEnhancedComponentInfo;
     getPerformanceMetrics = module.getPerformanceMetrics;
-    console.log('[ChromePilot Pro] Enhanced capture module loaded');
+    // console.log('[ChromePilot Pro] Enhanced capture module loaded');
   } catch (e) {
-    console.log('[ChromePilot Free] Enhanced capture not available - using basic mode');
+    // console.log('[ChromePilot Free] Enhanced capture not available - using basic mode');
     // Create stub functions that return empty data for free version
     captureElementHTML = () => '';
     extractEventHandlers = () => ({});
@@ -1076,19 +1250,16 @@ 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
   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]');
     if (clickableParent) {
-      console.log('[ChromePilot] Adjusted click target from', element.tagName, 'to', clickableParent.tagName);
+      // console.log('[ChromePilot] Adjusted click target from', element.tagName, 'to', clickableParent.tagName);
       element = clickableParent;
     }
   }
@@ -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);
   });
@@ -1303,12 +1471,12 @@ function startWorkflowRecording(screenshotSettings) {
   pendingScreenshots = []; // Clear any pending screenshots from previous recording
   createWorkflowRecordingIndicator();
   
-  console.log('[ChromePilot] Workflow recording started with settings:', screenshotSettings);
+  // console.log('[ChromePilot] Workflow recording started with settings:', screenshotSettings);
   
   // Start runtime bridge recording for function traces
   if (window.__chromePilot && window.__chromePilot.startRecording) {
     window.__chromePilot.startRecording();
-    console.log('[ChromePilot] Started runtime bridge recording for function traces');
+    // console.log('[ChromePilot] Started runtime bridge recording for function traces');
   }
   
   // Connect to the existing FunctionTracker for workflow recording
@@ -1334,17 +1502,19 @@ 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
         }
       });
     };
     
     // Enable function tracking via ChromePilotTracker
     window.ChromePilotTracker._setRecordingStatus(true);
-    console.log('[ChromePilot] Connected workflow recording to FunctionTracker');
+    // 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,17 +1543,19 @@ 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`);
+  // 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...`);
+    // console.log(`[SCREENSHOT-DEBUG] Waiting for ${pendingScreenshots.length} pending screenshots to complete...`);
     await Promise.all(pendingScreenshots);
-    console.log('[SCREENSHOT-DEBUG] All pending screenshots completed!');
+    // console.log('[SCREENSHOT-DEBUG] All pending screenshots completed!');
   } else {
-    console.log('[SCREENSHOT-DEBUG] No pending screenshots to wait for');
+    // console.log('[SCREENSHOT-DEBUG] No pending screenshots to wait for');
   }
   
   // Disconnect from FunctionTracker and disable recording
@@ -1393,7 +1565,7 @@ async function stopWorkflowRecording() {
     
     // Count function traces captured during workflow recording
     const functionTraces = workflowActions.filter(action => action.type === 'function-trace');
-    console.log(`[ChromePilot] Function tracking stopped. Captured ${functionTraces.length} function traces`);
+    // console.log(`[ChromePilot] Function tracking stopped. Captured ${functionTraces.length} function traces`);
   }
   
   // Remove event listeners
@@ -1412,7 +1584,7 @@ async function stopWorkflowRecording() {
   
   // First, get any function traces from the runtime bridge
   if (window.__chromePilot && window.__chromePilot.stopRecording) {
-    console.log('[ChromeDebug MCP] Stopping runtime bridge recording...');
+    // console.log('[ChromeDebug MCP] Stopping runtime bridge recording...');
     const bridgeTraces = window.__chromePilot.stopRecording();
     if (Array.isArray(bridgeTraces)) {
       // Convert bridge traces to workflow action format
@@ -1430,31 +1602,31 @@ async function stopWorkflowRecording() {
         placeholder: null,
         screenshot_data: null
       }));
-      console.log(`[Chrome Debug] Retrieved ${functionTraces.length} function traces from runtime bridge`);
+      // console.log(`[Chrome Debug] Retrieved ${functionTraces.length} function traces from runtime bridge`);
     }
   }
   
   // Also include any function traces that were added to workflowActions
   const embeddedTraces = workflowActions.filter(action => action.type === 'function-trace');
   if (embeddedTraces.length > 0) {
-    console.log(`[Chrome Debug] Found ${embeddedTraces.length} embedded function traces`);
+    // console.log(`[Chrome Debug] Found ${embeddedTraces.length} embedded function traces`);
     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);
+  // 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);
+  // 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)
-    });
+    // 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
@@ -1601,7 +1773,7 @@ function captureConsoleLogs() {
 
 // Create restore point
 async function createRestorePoint(actionIndex) {
-  console.log('[ChromePilot] Creating restore point at action index:', actionIndex);
+  // console.log('[ChromePilot] Creating restore point at action index:', actionIndex);
   
   try {
     // Capture all data
@@ -1630,7 +1802,7 @@ async function createRestorePoint(actionIndex) {
     });
     
     if (response && response.success) {
-      console.log('[ChromePilot] Restore point saved:', response.restorePointId);
+      // console.log('[ChromePilot] Restore point saved:', response.restorePointId);
       // Visual feedback
       showRestorePointNotification('Restore point saved!');
       return response.restorePointId;
@@ -1646,7 +1818,7 @@ async function createRestorePoint(actionIndex) {
 
 // Restore from a restore point
 async function restoreFromPoint(restorePointData) {
-  console.log('[ChromePilot] Restoring from restore point');
+  // console.log('[ChromePilot] Restoring from restore point');
   
   try {
     // First check if we need to navigate
@@ -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);
 
@@ -2000,7 +2169,7 @@ function startScreenInteractionTracking(scheduledStartTime, sessionId) {
   recordingScheduledStartTime = scheduledStartTime;
   recordingSessionId = sessionId;
 
-  console.log('[ChromePilot] Screen interaction tracking scheduled to start at:', new Date(scheduledStartTime));
+  // console.log('[ChromePilot] Screen interaction tracking scheduled to start at:', new Date(scheduledStartTime));
 
   // Trigger visual feedback start
   if (window.screenCaptureVisualFeedback) {
@@ -2021,7 +2190,7 @@ function startScreenInteractionTracking(scheduledStartTime, sessionId) {
     document.addEventListener('mousedown', recordScreenMouseDown, true);
     document.addEventListener('mouseup', recordScreenMouseUp, true);
 
-    console.log('[ChromePilot] Screen interaction tracking started at scheduled time');
+    // console.log('[ChromePilot] Screen interaction tracking started at scheduled time');
   }, waitTime);
 }
 
@@ -2054,7 +2223,7 @@ function stopScreenInteractionTracking() {
   screenRecordingDragStartX = 0;  // CRITICAL: This was missing
   screenRecordingDragStartY = 0;  // CRITICAL: This was missing
 
-  console.log('[ChromePilot] Screen interaction tracking stopped');
+  // console.log('[ChromePilot] Screen interaction tracking stopped');
 
   // Visual feedback stop with error isolation
   try {
@@ -2148,7 +2317,7 @@ let isFullDataRecordingActive = false;
 
 // Create floating recording interface
 function showRecordingInterface() {
-  console.log('showRecordingInterface called');
+  // console.log('showRecordingInterface called');
   
   // Remove any existing recording overlay
   if (recordingOverlay) {
@@ -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...';
@@ -2250,7 +2419,7 @@ function startRecording() {
       // Start performance monitoring when recording begins
       if (performanceMonitor) {
         performanceMonitor.startMonitoring();
-        console.log('[ChromeDebug MCP] Performance monitoring started with recording');
+        // console.log('[ChromeDebug MCP] Performance monitoring started with recording');
       }
       
       // Start timer display
@@ -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...';
@@ -2311,7 +2480,7 @@ function stopRecording() {
     // Stop performance monitoring when recording ends
     if (performanceMonitor) {
       performanceMonitor.stopMonitoring();
-      console.log('[ChromeDebug MCP] Performance monitoring stopped with recording');
+      // console.log('[ChromeDebug MCP] Performance monitoring stopped with recording');
     }
   });
 }
@@ -2350,7 +2519,7 @@ function showFrameFlash() {
 /*
 async function initializeFullDataRecordingSystem() {
   try {
-    console.log('[ChromeDebug MCP] Initializing full data recording system...');
+    // console.log('[ChromeDebug MCP] Initializing full data recording system...');
     
     // Initialize core components
     if (typeof DataBuffer !== 'undefined') {
@@ -2397,7 +2566,7 @@ async function initializeFullDataRecordingSystem() {
           if (dataBuffer) {
             try {
               await dataBuffer.addBatch(events);
-              console.log(`[Chrome Debug] Persisted ${events.length} function traces`);
+              // console.log(`[Chrome Debug] Persisted ${events.length} function traces`);
             } catch (error) {
               console.error('[ChromeDebug MCP] Failed to persist function traces:', error);
             }
@@ -2477,10 +2646,10 @@ async function initializeFullDataRecordingSystem() {
         }
       };
       
-      console.log('[ChromeDebug MCP] ChromePilotTracker API exposed for manual instrumentation');
+      // console.log('[ChromeDebug MCP] ChromePilotTracker API exposed for manual instrumentation');
     }
     
-    console.log('[ChromeDebug MCP] Full data recording system initialized successfully');
+    // console.log('[ChromeDebug MCP] Full data recording system initialized successfully');
     return true;
     
   } catch (error) {
@@ -2497,7 +2666,7 @@ async function startFullDataRecording(config) {
       return;
     }
     
-    console.log('[ChromeDebug MCP] Starting full data recording with config:', config);
+    // console.log('[ChromeDebug MCP] Starting full data recording with config:', config);
     
     // Initialize system if not already done
     if (!dataBuffer) {
@@ -2527,7 +2696,7 @@ async function startFullDataRecording(config) {
     // Start performance monitoring (lazy loading - only when recording)
     if (performanceMonitor) {
       performanceMonitor.startMonitoring();
-      console.log('[ChromeDebug MCP] Performance monitoring started');
+      // console.log('[ChromeDebug MCP] Performance monitoring started');
     }
     
     // Configure and start DOM tracking
@@ -2540,7 +2709,7 @@ async function startFullDataRecording(config) {
         mutationThrottle: config.instrumentationLevel <= 2 ? 20 : 50 // Throttle for lower levels
       });
       domTracker.startTracking();
-      console.log('[ChromeDebug MCP] DOM tracking started');
+      // console.log('[ChromeDebug MCP] DOM tracking started');
     }
     
     // Configure and start network tracking
@@ -2555,7 +2724,7 @@ async function startFullDataRecording(config) {
         maxBodySize: config.instrumentationLevel >= 4 ? 50 * 1024 : 10 * 1024
       });
       networkTracker.startTracking();
-      console.log('[ChromeDebug MCP] Network tracking started');
+      // console.log('[ChromeDebug MCP] Network tracking started');
     }
     
     // Configure and start function tracking
@@ -2572,7 +2741,7 @@ async function startFullDataRecording(config) {
             if (chrome.runtime.lastError) {
               console.error('[ChromeDebug MCP] Failed to send function traces to background:', chrome.runtime.lastError);
             } else {
-              console.log(`[Chrome Debug] Sent ${data.length} function traces to background for upload`);
+              // console.log(`[Chrome Debug] Sent ${data.length} function traces to background for upload`);
             }
           });
         }
@@ -2601,7 +2770,7 @@ async function startFullDataRecording(config) {
         window.ChromePilotTracker._functionTracker = functionTracker;
       }
       
-      console.log('[ChromeDebug MCP] Function tracking started');
+      // console.log('[ChromeDebug MCP] Function tracking started');
     }
     
     // Start upload manager via background script
@@ -2611,7 +2780,7 @@ async function startFullDataRecording(config) {
       if (chrome.runtime.lastError) {
         console.error('[ChromeDebug MCP] Error starting upload manager:', chrome.runtime.lastError.message);
       } else {
-        console.log('[ChromeDebug MCP] Upload manager started via background script');
+        // console.log('[ChromeDebug MCP] Upload manager started via background script');
       }
     });
     
@@ -2619,7 +2788,7 @@ async function startFullDataRecording(config) {
     
     // Full data recording indicator removed - functionality disabled
     
-    console.log('[ChromeDebug MCP] Full data recording started successfully:', recordingId);
+    // console.log('[ChromeDebug MCP] Full data recording started successfully:', recordingId);
     
   } catch (error) {
     console.error('[ChromeDebug MCP] Failed to start full data recording:', error);
@@ -2635,17 +2804,17 @@ async function stopFullDataRecording() {
       return;
     }
     
-    console.log('[ChromeDebug MCP] Stopping full data recording...');
+    // console.log('[ChromeDebug MCP] Stopping full data recording...');
     
     // Stop all trackers
     if (domTracker) {
       domTracker.stopTracking();
-      console.log('[ChromeDebug MCP] DOM tracking stopped');
+      // console.log('[ChromeDebug MCP] DOM tracking stopped');
     }
     
     if (networkTracker) {
       networkTracker.stopTracking();
-      console.log('[ChromeDebug MCP] Network tracking stopped');
+      // console.log('[ChromeDebug MCP] Network tracking stopped');
     }
     
     if (functionTracker) {
@@ -2656,13 +2825,13 @@ async function stopFullDataRecording() {
         window.ChromePilotTracker._setRecordingStatus(false);
       }
       
-      console.log('[ChromeDebug MCP] Function tracking stopped');
+      // console.log('[ChromeDebug MCP] Function tracking stopped');
     }
     
     // Stop performance monitoring
     if (performanceMonitor) {
       performanceMonitor.stopMonitoring();
-      console.log('[ChromeDebug MCP] Performance monitoring stopped');
+      // console.log('[ChromeDebug MCP] Performance monitoring stopped');
     }
     
     // Create final batch for any remaining events
@@ -2673,7 +2842,7 @@ async function stopFullDataRecording() {
         if (result.currentRecordingId) {
           // Create a batch with any remaining events
           await dataBuffer.createBatch(result.currentRecordingId);
-          console.log('[ChromeDebug MCP] Final batch created for remaining events');
+          // console.log('[ChromeDebug MCP] Final batch created for remaining events');
         }
       } catch (error) {
         console.warn('[ChromeDebug MCP] Could not create final batch:', error);
@@ -2689,7 +2858,7 @@ async function stopFullDataRecording() {
         if (chrome.runtime.lastError) {
           console.error('[ChromeDebug MCP] Error finalizing uploads:', chrome.runtime.lastError.message);
         } else {
-          console.log('[ChromeDebug MCP] Upload manager stopped via background script');
+          // console.log('[ChromeDebug MCP] Upload manager stopped via background script');
         }
         resolve();
       });
@@ -2700,7 +2869,7 @@ async function stopFullDataRecording() {
     
     // Full data recording indicator removed - functionality disabled
     
-    console.log('[ChromeDebug MCP] Full data recording stopped successfully');
+    // console.log('[ChromeDebug MCP] Full data recording stopped successfully');
     
   } catch (error) {
     console.error('[ChromeDebug MCP] Failed to stop full data recording:', error);
@@ -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,223 @@ 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
+        // Countdown complete! Notify background to start inactivity monitoring NOW
+        if (isExtensionValid()) {
+          chrome.runtime.sendMessage({ action: 'countdownComplete' }).catch(err => {
+            console.warn('[ScreenCapture] Could not send countdownComplete:', err);
+          });
+        }
+
+        // Switch to recording display with two-row layout
+        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; flex-direction: column; gap: 8px;">
+            <!-- Row 1: Status and primary actions -->
+            <div style="display: flex; align-items: center; gap: 8px;">
+              <span style="color: #4CAF50; font-size: 18px; animation: pulse 1.5s infinite;">●</span>
+              <span style="font-size: 13px; font-weight: 500;">Recording Screen Capture...</span>
+              <span class="action-count-badge" style="background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 10px; font-size: 11px;">0 actions</span>
+              <div style="flex: 1;"></div>
+              <button id="screen-stop-btn" style="background: #f44336; color: white; border: none; padding: 6px 14px; 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>
+            <!-- Row 2: Frame count, countdown, and disable button -->
+            <div style="display: flex; align-items: center; gap: 10px; font-size: 11px; color: rgba(255,255,255,0.8); padding-left: 26px;">
+              <span class="frame-count-badge">0 frames</span>
+              <span style="opacity: 0.5;">|</span>
+              <span class="inactivity-countdown-badge" style="color: rgba(255,152,0,0.9);">⏱ --</span>
+              <button id="disable-inactivity-btn" style="background: rgba(255,152,0,0.4); color: white; border: none; padding: 4px 10px; border-radius: 10px; font-size: 11px; cursor: pointer; font-family: inherit;" title="Disable auto-stop timeout">Disable</button>
+            </div>
+          </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();
+          });
+        }
+
+        // Add disable inactivity timeout button handler
+        const disableBtn = document.getElementById('disable-inactivity-btn');
+        if (disableBtn) {
+          disableBtn.addEventListener('click', async (e) => {
+            e.stopPropagation();
+            try {
+              const response = await chrome.runtime.sendMessage({ action: 'toggleInactivityTimeout' });
+              if (response && response.success) {
+                const countdownBadge = this.recordingIndicatorElement?.querySelector('.inactivity-countdown-badge');
+                if (response.disabled) {
+                  // Timeout disabled - show Enable button (green)
+                  disableBtn.textContent = 'Enable';
+                  disableBtn.title = 'Enable auto-stop timeout';
+                  disableBtn.style.background = 'rgba(76, 175, 80, 0.5)';
+                  if (countdownBadge) {
+                    countdownBadge.textContent = '⏱ OFF';
+                    countdownBadge.style.color = 'rgba(76, 175, 80, 0.9)';
+                  }
+                } else {
+                  // Timeout enabled - show Disable button (orange)
+                  disableBtn.textContent = 'Disable';
+                  disableBtn.title = 'Disable auto-stop timeout';
+                  disableBtn.style.background = 'rgba(255,152,0,0.4)';
+                  if (countdownBadge) {
+                    countdownBadge.style.color = 'rgba(255,152,0,0.9)';
+                  }
+                }
+              }
+            } catch (err) {
+              console.warn('[ScreenCapture] Could not toggle inactivity timeout:', err);
+            }
+          });
+        }
       }
     }, 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?')) {
+          // Hide immediately for better UX
+          this.hideRecordingIndicator();
+
+          // Show brief "Deleting..." toast
+          const toast = document.createElement('div');
+          Object.assign(toast.style, {
+            position: 'fixed',
+            bottom: '80px',
+            left: '20px',
+            background: 'rgba(0, 0, 0, 0.9)',
+            color: 'white',
+            padding: '12px 20px',
+            borderRadius: '20px',
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif',
+            fontSize: '13px',
+            zIndex: '2147483646'
+          });
+          toast.textContent = 'Deleting...';
+          document.body.appendChild(toast);
+
+          chrome.runtime.sendMessage({
+            action: 'deleteScreenRecording',
+            sessionId: sessionId
+          }, (response) => {
+            // Update toast with result
+            if (response && response.success) {
+              toast.textContent = '✓ Recording deleted';
+              toast.style.background = 'rgba(76, 175, 80, 0.9)';
+            } else {
+              toast.textContent = '✗ Delete failed';
+              toast.style.background = 'rgba(244, 67, 54, 0.9)';
+            }
+            // Remove toast after 2 seconds
+            setTimeout(() => toast.remove(), 2000);
+          });
+        }
+      });
+    }
+
+    if (closeBtn) {
+      closeBtn.addEventListener('click', () => {
+        this.hideRecordingIndicator();
+      });
+    }
+  }
+
   hideRecordingIndicator() {
     // Clear countdown interval if running
     if (this.countdownInterval) {
@@ -3077,16 +3486,125 @@ setTimeout(() => {
         }
       };
       
-      console.log('[ChromeDebug MCP] ChromePilotTracker initialized for workflow recording');
+      // console.log('[ChromeDebug MCP] ChromePilotTracker initialized for workflow recording');
     }
     
     // Initialize minimal workflow recording support
-    console.log('[ChromeDebug MCP] Basic workflow recording ready (lightweight mode)');
+    // console.log('[ChromeDebug MCP] Basic workflow recording ready (lightweight mode)');
   }
 }, 500);
 
 // Full data recording system will be initialized on-demand when recording begins
 // This prevents unnecessary resource usage on every page load
 
+// =============================================================================
+// INACTIVITY TRACKER - Auto-stop recording if user is inactive
+// =============================================================================
+(function initInactivityTracker() {
+  let lastActivityTime = Date.now();
+  let isTrackingActivity = false;
+  let inactivityCheckInterval = null;
+
+  // Debounce activity updates to avoid flooding background script
+  let activityDebounceTimer = null;
+  const ACTIVITY_DEBOUNCE_MS = 1000; // Report activity at most once per second
+
+  function reportActivity() {
+    if (!isTrackingActivity) return;
+
+    lastActivityTime = Date.now();
+
+    // Debounced report to background
+    if (activityDebounceTimer) return;
+    activityDebounceTimer = setTimeout(() => {
+      activityDebounceTimer = null;
+      if (isExtensionValid()) {
+        chrome.runtime.sendMessage({
+          action: 'userActivity',
+          timestamp: lastActivityTime
+        }).catch(() => {});
+      }
+    }, ACTIVITY_DEBOUNCE_MS);
+  }
+
+  // Activity event listeners (passive for performance)
+  const activityEvents = ['mousedown', 'mousemove', 'keydown', 'scroll', 'touchstart', 'click'];
+
+  function startTracking() {
+    if (isTrackingActivity) return;
+    isTrackingActivity = true;
+    lastActivityTime = Date.now();
+
+    activityEvents.forEach(event => {
+      document.addEventListener(event, reportActivity, { passive: true, capture: true });
+    });
+
+    // Send IMMEDIATE activity report on start to sync with background timer
+    // This prevents premature auto-stop due to setup delay
+    if (isExtensionValid()) {
+      chrome.runtime.sendMessage({
+        action: 'userActivity',
+        timestamp: lastActivityTime
+      }).catch(() => {});
+    }
+  }
+
+  function stopTracking() {
+    if (!isTrackingActivity) return;
+    isTrackingActivity = false;
+
+    activityEvents.forEach(event => {
+      document.removeEventListener(event, reportActivity, { capture: true });
+    });
+
+    if (activityDebounceTimer) {
+      clearTimeout(activityDebounceTimer);
+      activityDebounceTimer = null;
+    }
+  }
+
+  // Listen for start/stop tracking messages from background
+  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+    if (message.action === 'startActivityTracking') {
+      startTracking();
+      sendResponse({ success: true });
+    } else if (message.action === 'stopActivityTracking') {
+      stopTracking();
+      sendResponse({ success: true });
+    } else if (message.action === 'updateInactivityCountdown') {
+      // Update countdown badge in recording indicator
+      const countdownBadge = document.querySelector('.inactivity-countdown-badge');
+      if (countdownBadge) {
+        if (message.disabled) {
+          countdownBadge.textContent = '⏱ OFF';
+          countdownBadge.style.background = 'rgba(76, 175, 80, 0.3)';
+          countdownBadge.style.color = 'rgba(255,255,255,0.9)';
+        } else {
+          countdownBadge.textContent = `⏱ ${message.timeRemaining}s`;
+          // Warning colors
+          if (message.timeRemaining <= 3) {
+            countdownBadge.style.background = 'rgba(244, 67, 54, 0.5)';
+            countdownBadge.style.color = '#fff';
+          } else if (message.timeRemaining <= 5) {
+            countdownBadge.style.background = 'rgba(255, 152, 0, 0.5)';
+            countdownBadge.style.color = '#fff';
+          } else {
+            countdownBadge.style.background = 'rgba(255, 152, 0, 0.3)';
+            countdownBadge.style.color = 'rgba(255,255,255,0.9)';
+          }
+        }
+      }
+      sendResponse({ success: true });
+    } else if (message.action === 'updateFrameCount') {
+      // Update frame count badge in recording indicator
+      const frameBadge = document.querySelector('.frame-count-badge');
+      if (frameBadge) {
+        frameBadge.textContent = `${message.frameCount} frames`;
+      }
+      sendResponse({ success: true });
+    }
+  });
+})();
+
   } // End of initializeChromePilot function
 })(); // End of IIFE wrapper