@dynamicu/chromedebug-mcp 2.2.0

package/chrome-extension/content.js

@@ -0,0 +1,3022 @@
+// ChromeDebug MCP Content Script v2.0
+// Wrapped in IIFE to avoid global scope pollution and duplicate declarations
+(function() {
+  'use strict';
+  
+  // Check if already loaded
+  if (window.chromePilotContentScriptLoaded) {
+    console.log('[ChromeDebug MCP v2.0] Content script already loaded, skipping re-injection');
+    return;
+  }
+  
+  // Early bailout for user-configured restricted sites
+  const hostname = window.location.hostname.toLowerCase();
+  
+  // Load user restrictions from storage and check immediately
+  chrome.storage.sync.get(['chromePilotRestrictedSites', 'chromePilotAllowedSites', 'chromePilotMode'], (result) => {
+    const mode = result.chromePilotMode || 'whitelist'; // 'whitelist' or 'blacklist'
+    const restrictedSites = result.chromePilotRestrictedSites || [];
+    const allowedSites = result.chromePilotAllowedSites || [];
+    
+    let shouldBlock = false;
+    
+    if (mode === 'blacklist') {
+      // Block if hostname matches any restricted site pattern
+      shouldBlock = restrictedSites.some(pattern => {
+        // Special handling for patterns with port wildcards like "localhost:*"
+        if (pattern.includes(':*')) {
+          const basePattern = pattern.replace(':*', '').toLowerCase();
+          if (hostname === basePattern) {
+            return true; // Match hostname regardless of port
+          }
+        }
+        
+        if (pattern.includes('*')) {
+          const regex = new RegExp(pattern.replace(/\*/g, '.*').replace(/\./g, '\\.'));
+          return regex.test(hostname);
+        }
+        return hostname.includes(pattern.toLowerCase());
+      });
+    } else {
+      // Whitelist mode: only allow if hostname matches allowed sites
+      const isAllowed = allowedSites.some(pattern => {
+        // Special handling for patterns with port wildcards like "localhost:*"
+        if (pattern.includes(':*')) {
+          const basePattern = pattern.replace(':*', '').toLowerCase();
+          if (hostname === basePattern) {
+            return true; // Match hostname regardless of port
+          }
+        }
+        
+        if (pattern.includes('*')) {
+          const regex = new RegExp(pattern.replace(/\*/g, '.*').replace(/\./g, '\\.'));
+          return regex.test(hostname);
+        }
+        return hostname.includes(pattern.toLowerCase());
+      });
+      
+      // For whitelist mode, block if not explicitly allowed (unless empty list)
+      shouldBlock = allowedSites.length > 0 && !isAllowed;
+    }
+    
+    if (shouldBlock) {
+      console.log(`[ChromeDebug MCP] Skipping restricted site (${mode} mode):`, hostname);
+      return;
+    }
+    
+    // Continue with normal initialization
+    initializeChromePilot();
+  });
+  
+  function initializeChromePilot() {
+    window.chromePilotContentScriptLoaded = true;
+  
+  const CHROME_PILOT_VERSION = '2.0.4-BUILD-20250119';
+  console.log(`[content.js] Loaded version: ${CHROME_PILOT_VERSION}`);
+
+let frameFlashIndicator = null;
+
+// Helper function to safely check if extension context is valid
+function isExtensionValid() {
+  try {
+    return chrome.runtime && chrome.runtime.id;
+  } catch (e) {
+    return false;
+  }
+}
+
+
+// Initialize ChromeDebug MCP content script
+setTimeout(() => {
+  console.log('[ChromeDebug MCP] 🚀 Content script initializing...');
+}, 100);
+
+/*
+ * SNAPSHOT FEATURE DISABLED (2025-10-01)
+ *
+ * Console monitor injection was used for snapshot feature to capture console logs.
+ *
+ * WHY DISABLED:
+ * - Snapshots without console logs are just screenshots (users can do this natively)
+ * - Console log capture requires always-on monitoring (privacy concern)
+ * - Core value proposition (screenshot + searchable logs) cannot be achieved cleanly
+ *
+ * NOTE: Console logging is still captured during screen recordings via the normal
+ * recording system. This code only disabled the on-demand console monitor injection
+ * that was used for standalone snapshots.
+ *
+ * TO RE-ENABLE:
+ * 1. Implement privacy-conscious always-on log monitoring
+ * 2. Uncomment the code below
+ * 3. Re-enable related functions in background.js and popup.js
+ *
+ * See: SNAPSHOT_FEATURE_DISABLED.md for full explanation
+ */
+/*
+const consoleHistory = [];
+const maxHistorySize = 100;
+let consoleMonitorInjected = false;
+
+function injectConsoleMonitor() {
+  if (consoleMonitorInjected) {
+    console.log('[ChromeDebug] Console monitor already injected');
+    return Promise.resolve(true);
+  }
+
+  return new Promise((resolve) => {
+    const script = document.createElement('script');
+    script.src = chrome.runtime.getURL('console-monitor.js');
+
+    script.onload = function() {
+      console.log('[ChromeDebug] Console monitor loaded successfully');
+      consoleMonitorInjected = true;
+      this.remove();
+      resolve(true);
+    };
+
+    script.onerror = function() {
+      console.error('[ChromeDebug] Failed to load console monitor script');
+      this.remove();
+      resolve(false);
+    };
+
+    (document.head || document.documentElement).appendChild(script);
+  });
+}
+
+window.addEventListener('message', (event) => {
+  if (event.source === window && event.data.type === 'CHROME_DEBUG_CONSOLE_LOG') {
+    consoleHistory.push(event.data.log);
+
+    if (consoleHistory.length > maxHistorySize) {
+      consoleHistory.shift();
+    }
+  }
+});
+
+console.log('[ChromeDebug] Console monitoring ready (will inject on demand)');
+*/
+
+function getAngularComponentInfo(element) {
+  // Try to find Angular debug info
+  try {
+    // Method 1: ng.probe (Angular 1.x - 8.x in dev mode)
+    if (window.ng && window.ng.probe) {
+      const debugElement = window.ng.probe(element);
+      if (debugElement && debugElement.componentInstance) {
+        return {
+          componentName: debugElement.componentInstance.constructor.name,
+          framework: 'Angular',
+          sourceInfo: null // Angular doesn't expose source info easily
+        };
+      }
+    }
+    
+    // Method 2: __ngContext__ (Angular 9+)
+    if (element.__ngContext__) {
+      return {
+        componentName: 'Angular Component',
+        framework: 'Angular 9+',
+        sourceInfo: null
+      };
+    }
+    
+    // Method 3: Check for Ionic classes
+    if (element.tagName && element.tagName.toLowerCase().startsWith('ion-')) {
+      return {
+        componentName: element.tagName.toLowerCase(),
+        framework: 'Ionic',
+        sourceInfo: null
+      };
+    }
+  } catch (e) {
+    console.log('Error detecting Angular component:', e);
+  }
+  
+  return null;
+}
+
+function getReactComponentInfo(element) {
+  // Try to find React Fiber node
+  const reactFiberKey = Object.keys(element).find(key => 
+    key.startsWith('__reactInternalInstance') || 
+    key.startsWith('__reactFiber')
+  );
+  
+  if (!reactFiberKey) {
+    return null;
+  }
+  
+  const fiber = element[reactFiberKey];
+  if (!fiber) {
+    return null;
+  }
+  
+  // Collect all component info in the tree
+  const components = [];
+  let currentFiber = fiber;
+  
+  // 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));
+  }
+  
+  while (currentFiber) {
+    // Check if this is a function/class component (not host component)
+    if (currentFiber.elementType && typeof currentFiber.elementType === 'function') {
+      const componentName = currentFiber.elementType.displayName || 
+                          currentFiber.elementType.name || 
+                          'Unknown Component';
+      
+      // Try multiple ways to get source info
+      let sourceInfo = null;
+      
+      // Method 1: _debugSource (development builds)
+      if (currentFiber._debugSource) {
+        sourceInfo = {
+          fileName: currentFiber._debugSource.fileName,
+          lineNumber: currentFiber._debugSource.lineNumber,
+          columnNumber: currentFiber._debugSource.columnNumber
+        };
+        console.log('Found _debugSource:', sourceInfo);
+      }
+      
+      // Method 2: _owner and _source
+      if (!sourceInfo && currentFiber._owner && currentFiber._owner._debugSource) {
+        sourceInfo = {
+          fileName: currentFiber._owner._debugSource.fileName,
+          lineNumber: currentFiber._owner._debugSource.lineNumber,
+          columnNumber: currentFiber._owner._debugSource.columnNumber
+        };
+      }
+      
+      // Method 3: Check the component function itself
+      if (!sourceInfo && currentFiber.elementType._source) {
+        sourceInfo = {
+          fileName: currentFiber.elementType._source.fileName,
+          lineNumber: currentFiber.elementType._source.lineNumber,
+          columnNumber: currentFiber.elementType._source.columnNumber
+        };
+      }
+      
+      // Method 4: Try to extract from stack trace (last resort)
+      if (!sourceInfo && currentFiber.elementType.toString) {
+        const stackMatch = currentFiber.elementType.toString().match(/at\s+(\S+)\s+\((.+):(\d+):(\d+)\)/);
+        if (stackMatch) {
+          sourceInfo = {
+            fileName: stackMatch[2],
+            lineNumber: parseInt(stackMatch[3]),
+            columnNumber: parseInt(stackMatch[4])
+          };
+        }
+      }
+      
+      components.push({
+        componentName,
+        sourceInfo,
+        props: currentFiber.memoizedProps,
+        key: currentFiber.key,
+        type: currentFiber.elementType
+      });
+    }
+    
+    currentFiber = currentFiber.return;
+  }
+  
+  // Return the most specific component (first in the list)
+  return components.length > 0 ? {
+    ...components[0],
+    componentHierarchy: components.map(c => c.componentName)
+  } : null;
+}
+
+function getSelector(element) {
+  if (element.id) {
+    return `#${element.id}`;
+  }
+  
+  if (element.className && typeof element.className === 'string') {
+    const classes = element.className.trim().split(/\s+/).filter(c => !c.startsWith('chrome-pilot'));
+    if (classes.length > 0) {
+      return `${element.tagName.toLowerCase()}.${classes.join('.')}`;
+    }
+  }
+  
+  const path = [];
+  while (element && element.nodeType === Node.ELEMENT_NODE) {
+    let selector = element.tagName.toLowerCase();
+    
+    if (element.id) {
+      selector = `#${element.id}`;
+      path.unshift(selector);
+      break;
+    }
+    
+    let sibling = element;
+    let nth = 1;
+    while (sibling.previousElementSibling) {
+      sibling = sibling.previousElementSibling;
+      if (sibling.tagName === element.tagName) {
+        nth++;
+      }
+    }
+    
+    if (nth > 1) {
+      selector += `:nth-of-type(${nth})`;
+    }
+    
+    path.unshift(selector);
+    element = element.parentElement;
+  }
+  
+  return path.join(' > ');
+}
+
+function getComponentInfo(element) {
+  let currentElement = element;
+  let ionicComponent = null;
+  
+  // Check if this is an Ionic component
+  if (element.tagName && element.tagName.toLowerCase().startsWith('ion-')) {
+    ionicComponent = element.tagName.toLowerCase();
+  }
+  
+  // For Ionic React, we need to look for React components in parent elements
+  // because Ionic components are web components that wrap React components
+  const maxDepth = 10; // Don't go too far up the tree
+  let depth = 0;
+  
+  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')));
+    }
+    
+    // Try to find React info on current element
+    const reactInfo = getReactComponentInfo(currentElement);
+    if (reactInfo) {
+      // If we found React info and also have an Ionic component, combine them
+      if (ionicComponent) {
+        return { 
+          ...reactInfo, 
+          framework: 'Ionic React',
+          ionicComponent: ionicComponent
+        };
+      }
+      return { ...reactInfo, framework: 'React' };
+    }
+    
+    // Move up to parent
+    currentElement = currentElement.parentElement;
+    depth++;
+  }
+  
+  // If we only found Ionic component (no React info)
+  if (ionicComponent) {
+    return {
+      componentName: ionicComponent,
+      framework: 'Ionic',
+      sourceInfo: null
+    };
+  }
+  
+  // Try Angular as last resort
+  const angularInfo = getAngularComponentInfo(element);
+  if (angularInfo) {
+    return angularInfo;
+  }
+  
+  console.log('No component info found');
+  return null;
+}
+
+
+// Legacy recording indicator functions removed - now handled by ScreenCaptureVisualFeedback class
+
+// Idempotent protection for cleanup function
+let cleanupExecuted = false;
+
+function cleanup() {
+  // Idempotent protection - only run cleanup once
+  if (cleanupExecuted) {
+    console.log('[ChromeDebug MCP] Cleanup already executed, skipping');
+    return;
+  }
+  
+  cleanupExecuted = true;
+  console.log('[ChromeDebug MCP] Executing cleanup...');
+  
+  // Clean up recording indicators and event listeners
+  try {
+    // Legacy recording indicator cleanup removed - now handled by ScreenCaptureVisualFeedback
+    
+    // Stop workflow recording if active
+    if (typeof isWorkflowRecording !== 'undefined' && isWorkflowRecording) {
+      console.log('[ChromeDebug MCP] Stopping workflow recording during cleanup');
+      if (typeof stopWorkflowRecording === 'function') {
+        stopWorkflowRecording();
+      }
+    }
+    
+    // Stop screen interaction tracking if active
+    if (typeof isScreenRecording !== 'undefined' && isScreenRecording) {
+      console.log('[ChromeDebug MCP] Stopping screen recording during cleanup');
+      if (typeof stopScreenInteractionTracking === 'function') {
+        stopScreenInteractionTracking();
+      }
+    }
+    
+    console.log('[ChromeDebug MCP] Cleanup completed successfully');
+  } catch (error) {
+    console.warn('[ChromeDebug MCP] Error during cleanup:', error);
+  }
+}
+
+
+
+// Only add message listener if extension context is valid
+if (isExtensionValid()) {
+  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+    if (request.action === 'getConsoleHistory') {
+      // Inject console monitor if not already injected, then return logs
+      injectConsoleMonitor().then(() => {
+        // Wait a moment for any pending console messages to be captured
+        setTimeout(() => {
+          sendResponse({ logs: consoleHistory.slice() }); // Return a copy
+        }, 100);
+      });
+      return true; // Keep channel open for async response
+    } else if (request.action === 'showRecordingUI') {
+      console.log('Received showRecordingUI message');
+      showRecordingInterface();
+      sendResponse({ success: true });
+      return true; // Keep channel open for async response
+    } else if (request.action === 'showFrameFlash') {
+      showFrameFlash();
+      sendResponse({ success: true });
+    } else if (request.action === 'recordingComplete') {
+      // 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');
+        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>`;
+          
+          // Keep the overlay visible for a few seconds to show the ID
+          setTimeout(() => {
+            if (recordingOverlay) {
+              recordingOverlay.remove();
+              recordingOverlay = null;
+            }
+          }, 10000); // Keep visible for 10 seconds
+        }
+      }
+      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);
+      // 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');
+      // 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');
+      // Stop tracking screen interactions
+      stopScreenInteractionTracking();
+      sendResponse({ success: true });
+    } else if (request.action === 'startWorkflowRecording') {
+      console.log('[ChromeDebug MCP] Starting workflow recording with settings:', request.screenshotSettings);
+      startWorkflowRecording(request.screenshotSettings);
+      sendResponse({ success: true });
+    } else if (request.action === 'stopWorkflowRecording') {
+      console.log('[ChromeDebug MCP] Stopping workflow recording');
+      const workflow = stopWorkflowRecording();
+      sendResponse({ success: true, workflow: workflow });
+    } else if (request.action === 'createRestorePoint') {
+      // Create restore point for current workflow
+      createRestorePoint(request.actionIndex || workflowActions.length).then(restorePointId => {
+        sendResponse({ success: true, restorePointId });
+      }).catch(error => {
+        sendResponse({ success: false, error: error.message });
+      });
+      return true; // Keep channel open for async response
+    } else if (request.action === 'restoreFromPoint') {
+      // Restore from a restore point
+      restoreFromPoint(request.restorePointData).then(() => {
+        sendResponse({ success: true });
+      }).catch(error => {
+        sendResponse({ success: false, error: error.message });
+      });
+      return true; // Keep channel open for async response
+    } else if (request.action === 'playWorkflow') {
+      // Play a workflow recording
+      playWorkflowRecording(request.workflow, request.actions).then(() => {
+        sendResponse({ success: true });
+      }).catch(error => {
+        sendResponse({ success: false, error: error.message });
+      });
+      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);
+      startFullDataRecording(request.config).then(() => {
+        sendResponse({ success: true });
+      }).catch(error => {
+        sendResponse({ success: false, error: error.message });
+      });
+      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');
+      stopFullDataRecording().then(() => {
+        sendResponse({ success: true });
+      }).catch(error => {
+        sendResponse({ success: false, error: error.message });
+      });
+      return true; // Keep channel open for async response
+    } else if (request.action === 'getFullDataRecordingStats') {
+      // Get full data recording statistics
+      const stats = getFullDataRecordingStats();
+      sendResponse({ success: true, stats: stats });
+    }
+  });
+}
+
+// Helper function to fix CSS selectors that might have issues
+function fixSelector(selector) {
+  if (!selector || typeof selector !== 'string') return selector;
+  
+  // Remove pseudo-classes like :hover, :focus, :active that can't be used in querySelector
+  let fixedSelector = selector.replace(/:(hover|focus|active|visited|focus-within|focus-visible)/g, '');
+  
+  // Remove any trailing dots
+  fixedSelector = fixedSelector.replace(/\.+$/, '');
+  
+  // Remove empty class selectors (consecutive dots)
+  fixedSelector = fixedSelector.replace(/\.\./g, '.');
+  
+  // Try to validate the selector
+  try {
+    // Test if selector is valid
+    document.querySelector(fixedSelector);
+    return fixedSelector; // It's valid, return the fixed version
+  } catch (e) {
+    console.warn('[ChromePilot] Invalid selector even after fixes:', fixedSelector, 'Original:', selector);
+    // Return the fixed version anyway, as it's our best attempt
+    return fixedSelector;
+  }
+}
+
+// Helper function to wait for page load
+async function waitForPageLoad(timeout = 10000) {
+  return new Promise((resolve) => {
+    // If document is already loaded, resolve immediately
+    if (document.readyState === 'complete') {
+      resolve();
+      return;
+    }
+    
+    let timeoutId;
+    const cleanup = () => {
+      clearTimeout(timeoutId);
+      window.removeEventListener('load', loadHandler);
+    };
+    
+    const loadHandler = () => {
+      cleanup();
+      resolve();
+    };
+    
+    // Set up load listener
+    window.addEventListener('load', loadHandler);
+    
+    // Set up timeout
+    timeoutId = setTimeout(() => {
+      cleanup();
+      console.log('[ChromePilot] Page load timeout reached, continuing...');
+      resolve();
+    }, timeout);
+  });
+}
+
+// Helper function to wait for element to appear
+async function waitForElement(selector, timeout = 5000) {
+  const startTime = Date.now();
+  
+  while (Date.now() - startTime < timeout) {
+    const element = document.querySelector(selector);
+    if (element) {
+      return element;
+    }
+    await new Promise(resolve => setTimeout(resolve, 100));
+  }
+  
+  return null;
+}
+
+// Function to play a workflow recording
+async function playWorkflowRecording(workflow, 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.style.cssText = `
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      background: #4CAF50;
+      color: white;
+      padding: 12px 24px;
+      border-radius: 4px;
+      font-family: Arial, sans-serif;
+      font-size: 14px;
+      z-index: 10000;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    `;
+    playbackIndicator.innerHTML = `
+      <div style="
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: white;
+        animation: pulse 1s infinite;
+      "></div>
+      <span>Playing workflow: <span id="action-counter">0</span>/${actions.length}</span>
+    `;
+    
+    // Add animation style
+    const style = document.createElement('style');
+    style.textContent = `
+      @keyframes pulse {
+        0% { opacity: 1; }
+        50% { opacity: 0.5; }
+        100% { opacity: 1; }
+      }
+    `;
+    document.head.appendChild(style);
+    document.body.appendChild(playbackIndicator);
+    
+    const actionCounter = document.getElementById('action-counter');
+    let executedActions = 0;
+    
+    // Execute each action with proper timing
+    for (let i = 0; i < actions.length; i++) {
+      const action = actions[i];
+      actionCounter.textContent = i + 1;
+      
+      try {
+        console.log(`[ChromePilot] Executing action ${i + 1}/${actions.length}:`, action.type, 'selector:', action.selector);
+        
+        // Calculate delay based on timestamps
+        let delay = 500; // Default delay
+        if (i > 0 && action.timestamp && actions[i - 1].timestamp) {
+          delay = action.timestamp - actions[i - 1].timestamp;
+          // 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`);
+        }
+        
+        // Wait between actions
+        if (i > 0) { // Don't delay before first action
+          await new Promise(resolve => setTimeout(resolve, delay));
+        }
+        
+        switch (action.type) {
+          case 'click':
+            if (action.selector) {
+              // Fix selector if needed
+              const fixedSelector = fixSelector(action.selector);
+              
+              // Wait for element to appear if it's not immediately available
+              let element = document.querySelector(fixedSelector);
+              if (!element && action.xpath) {
+                // Try XPath as fallback
+                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...');
+                element = await waitForElement(fixedSelector, 3000);
+              }
+              
+              if (element) {
+                // If the element is an SVG or inside a button/link, find the clickable parent
+                let clickableElement = element;
+                if (element.tagName === 'svg' || element.tagName === 'path' || element.tagName === 'g') {
+                  // Find parent button or link
+                  clickableElement = element.closest('button, a') || element;
+                }
+                
+                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
+                
+                // Ensure element is visible and enabled
+                const rect = clickableElement.getBoundingClientRect();
+                if (rect.width === 0 || rect.height === 0) {
+                  console.warn('[ChromePilot] Element has zero dimensions, may not be visible');
+                }
+                
+                // Try to click
+                try {
+                  clickableElement.click();
+                  console.log('[ChromePilot] Clicked element successfully');
+                } catch (e) {
+                  console.error('[ChromePilot] Error clicking element:', e);
+                  // Try alternative click method
+                  clickableElement.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+                }
+                
+                // After click, check if navigation might occur
+                const currentUrl = window.location.href;
+                await new Promise(resolve => setTimeout(resolve, 500));
+                
+                // If URL changed, wait for page load
+                if (window.location.href !== currentUrl) {
+                  console.log('[ChromePilot] Navigation detected after click, waiting for page load...');
+                  await waitForPageLoad();
+                }
+              } else {
+                console.warn('[ChromePilot] Element not found:', action.selector);
+              }
+            } else if (action.x !== undefined && action.y !== undefined) {
+              // Click at coordinates
+              const element = document.elementFromPoint(action.x, action.y);
+              if (element) {
+                element.click();
+              }
+            }
+            break;
+            
+          case 'input':
+            if (action.selector) {
+              // 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...');
+                element = await waitForElement(action.selector, 3000);
+              }
+              
+              if (element) {
+                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
+                
+                // Focus the element
+                element.focus();
+                
+                // Clear existing value
+                element.value = '';
+                
+                // Set new value
+                element.value = action.value || '';
+                console.log('[ChromePilot] Set input value to:', action.value);
+                
+                // Trigger events in the right order
+                element.dispatchEvent(new Event('focus', { bubbles: true }));
+                element.dispatchEvent(new Event('input', { bubbles: true }));
+                element.dispatchEvent(new Event('change', { bubbles: true }));
+                element.dispatchEvent(new Event('blur', { bubbles: true }));
+              } else {
+                console.warn('[ChromePilot] Input element not found:', action.selector);
+              }
+            }
+            break;
+            
+          case 'keypress':
+            if (action.key) {
+              document.dispatchEvent(new KeyboardEvent('keydown', { key: action.key }));
+              document.dispatchEvent(new KeyboardEvent('keyup', { key: action.key }));
+            }
+            break;
+            
+          case 'scroll':
+            if (action.deltaY !== undefined) {
+              window.scrollBy(0, action.deltaY);
+            }
+            break;
+            
+          case 'navigation':
+            // Navigation will be handled by the browser
+            console.log('[ChromePilot] Navigation detected');
+            break;
+            
+          default:
+            console.warn('[ChromePilot] Unknown action type:', action.type);
+        }
+        
+        executedActions++;
+      } catch (error) {
+        console.error('[ChromePilot] Error executing action:', error);
+      }
+    }
+    
+    // Show completion
+    playbackIndicator.style.background = '#2196F3';
+    playbackIndicator.innerHTML = `
+      <span>✓ Workflow completed: ${executedActions}/${actions.length} actions</span>
+    `;
+    
+    // Remove indicator after 3 seconds
+    setTimeout(() => {
+      playbackIndicator.remove();
+      style.remove();
+    }, 3000);
+    
+    console.log('[ChromePilot] Workflow playback completed');
+    
+  } catch (error) {
+    console.error('[ChromePilot] Error during workflow playback:', error);
+    throw error;
+  }
+}
+
+// Workflow recording variables
+let isWorkflowRecording = false;
+let workflowActions = [];
+let workflowRecordingIndicator = null;
+let workflowScreenshotSettings = null;
+
+// Helper function to capture screenshot
+async function captureWorkflowScreenshot() {
+  if (!workflowScreenshotSettings || !workflowScreenshotSettings.enabled) {
+    return null;
+  }
+  
+  try {
+    // Send message to background script to capture screenshot
+    const response = await chrome.runtime.sendMessage({
+      action: 'captureWorkflowScreenshot',
+      settings: workflowScreenshotSettings
+    });
+    
+    if (response && response.success) {
+      return response.screenshotData;
+    }
+  } catch (error) {
+    console.error('[ChromeDebug MCP] Error capturing screenshot:', error);
+  }
+  
+  return null;
+}
+
+// Helper function to get unique selector for an element
+function getUniqueSelector(element) {
+  // Try ID first
+  if (element.id) {
+    return `#${element.id}`;
+  }
+  
+  // 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.includes(':')) // Filter out pseudo-class artifacts
+      .map(c => {
+        // Escape special characters in class names
+        return c.replace(/([^\w-])/g, '\\$1');
+      });
+    if (classes.length > 0) {
+      const selector = `${element.tagName.toLowerCase()}.${classes.join('.')}`;
+      // Check if this selector is unique
+      try {
+        if (document.querySelectorAll(selector).length === 1) {
+          return selector;
+        }
+      } catch (e) {
+        // Invalid selector, continue to next method
+      }
+    }
+  }
+  
+  // Fall back to full path selector
+  return getSelector(element);
+}
+
+// Helper function to get XPath for an element
+function getXPath(element) {
+  if (element.id !== '') {
+    return `//*[@id="${element.id}"]`;
+  }
+  
+  if (element === document.body) {
+    return '/html/body';
+  }
+  
+  let ix = 0;
+  const siblings = element.parentNode.childNodes;
+  
+  for (let i = 0; i < siblings.length; i++) {
+    const sibling = siblings[i];
+    if (sibling === element) {
+      return getXPath(element.parentNode) + '/' + element.tagName.toLowerCase() + '[' + (ix + 1) + ']';
+    }
+    if (sibling.nodeType === 1 && sibling.tagName === element.tagName) {
+      ix++;
+    }
+  }
+}
+
+// Create workflow recording indicator
+function createWorkflowRecordingIndicator() {
+  if (workflowRecordingIndicator) return;
+  
+  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>
+  `;
+  
+  Object.assign(workflowRecordingIndicator.style, {
+    position: 'fixed',
+    bottom: '20px',
+    left: '20px',
+    background: 'rgba(0, 0, 0, 0.9)',
+    color: 'white',
+    padding: '12px 20px',
+    borderRadius: '25px',
+    fontSize: '14px',
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif',
+    fontWeight: '500',
+    zIndex: '2147483647',
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
+    backdropFilter: 'blur(10px)',
+    WebkitBackdropFilter: 'blur(10px)',
+    pointerEvents: 'none',
+    userSelect: 'none'
+  });
+  
+  document.body.appendChild(workflowRecordingIndicator);
+}
+
+function removeWorkflowRecordingIndicator() {
+  if (workflowRecordingIndicator) {
+    workflowRecordingIndicator.remove();
+    workflowRecordingIndicator = null;
+  }
+}
+
+function updateWorkflowActionCount() {
+  const countEl = document.getElementById('workflow-action-count');
+  if (countEl) {
+    countEl.textContent = `${workflowActions.length} action${workflowActions.length !== 1 ? 's' : ''}`;
+  }
+}
+
+// Enhanced click tracking helper functions - Pro Feature
+// Try to import enhanced capture module (only exists in pro build)
+let enhancedCaptureModule = null;
+let captureElementHTML = null;
+let extractEventHandlers = null;
+let captureElementState = null;
+let getEnhancedComponentInfo = null;
+let getPerformanceMetrics = null;
+
+// Attempt to load pro module
+(async () => {
+  try {
+    const module = await import(chrome.runtime.getURL('pro/enhanced-capture.js'));
+    enhancedCaptureModule = module;
+    captureElementHTML = module.captureElementHTML;
+    extractEventHandlers = module.extractEventHandlers;
+    captureElementState = module.captureElementState;
+    getEnhancedComponentInfo = module.getEnhancedComponentInfo;
+    getPerformanceMetrics = module.getPerformanceMetrics;
+    console.log('[ChromePilot Pro] Enhanced capture module loaded');
+  } catch (e) {
+    console.log('[ChromePilot Free] Enhanced capture not available - using basic mode');
+    // Create stub functions that return empty data for free version
+    captureElementHTML = () => '';
+    extractEventHandlers = () => ({});
+    captureElementState = () => ({});
+    getEnhancedComponentInfo = () => ({});
+    getPerformanceMetrics = () => ({});
+  }
+})();
+
+// Helper function to check if enhanced capture is enabled
+async function shouldEnhanceCapture() {
+  return new Promise((resolve) => {
+    chrome.storage.local.get(['enhancedClickCapture'], (result) => {
+      resolve(result.enhancedClickCapture === true);
+    });
+  });
+}
+
+// Record click action
+async 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);
+      element = clickableParent;
+    }
+  }
+  
+  const action = {
+    type: 'click',
+    selector: getUniqueSelector(element),
+    xpath: getXPath(element),
+    x: event.clientX,
+    y: event.clientY,
+    timestamp: Date.now()
+  };
+
+  // Add text content for buttons and links
+  if (element.tagName === 'BUTTON' || element.tagName === 'A') {
+    action.text = element.textContent.trim();
+  }
+
+  // Enhanced click tracking data (conditional based on user setting)
+  const enhanceCapture = await shouldEnhanceCapture();
+  if (enhanceCapture) {
+    try {
+      console.log('[ChromePilot] Capturing enhanced click data...');
+
+      // Capture enhanced element data (only include fields with meaningful values)
+      const capturedHTML = captureElementHTML(element);
+      if (capturedHTML) {
+        action.element_html = capturedHTML;
+      }
+
+      const componentData = getEnhancedComponentInfo(element);
+      if (componentData) {
+        try {
+          JSON.stringify(componentData); // Test if serializable
+          action.component_data = componentData;
+        } catch (e) {
+          console.error('[ChromePilot] Component data cannot be serialized:', e.message);
+          action.component_data = { error: 'Serialization failed', type: typeof componentData };
+        }
+      }
+
+      const eventHandlers = extractEventHandlers(element);
+      if (eventHandlers) {
+        try {
+          JSON.stringify(eventHandlers); // Test if serializable
+          action.event_handlers = eventHandlers;
+        } catch (e) {
+          console.error('[ChromePilot] Event handlers cannot be serialized:', e.message);
+          action.event_handlers = { error: 'Serialization failed', type: typeof eventHandlers };
+        }
+      }
+
+      const elementState = captureElementState(element);
+      if (elementState) {
+        try {
+          JSON.stringify(elementState); // Test if serializable
+          action.element_state = elementState;
+        } catch (e) {
+          console.error('[ChromePilot] Element state cannot be serialized:', e.message);
+          action.element_state = { error: 'Serialization failed', type: typeof elementState };
+        }
+      }
+
+      const perfMetrics = getPerformanceMetrics();
+      if (perfMetrics) {
+        try {
+          JSON.stringify(perfMetrics); // Test if serializable
+          action.performance_metrics = perfMetrics;
+        } catch (e) {
+          console.error('[ChromePilot] Performance metrics cannot be serialized:', e.message);
+          action.performance_metrics = { error: 'Serialization failed', type: typeof perfMetrics };
+        }
+      }
+
+      console.log('[ChromePilot] Enhanced click data captured successfully');
+    } catch (error) {
+      console.warn('[ChromePilot] Error capturing enhanced click data:', error);
+      // Continue with basic click recording if enhanced capture fails
+    }
+  } else {
+    console.log('[ChromePilot] Enhanced click capture disabled - using basic capture only');
+  }
+  
+  // Capture screenshot if enabled
+  if (workflowScreenshotSettings && workflowScreenshotSettings.enabled) {
+    // Give a moment for any UI changes to settle
+    setTimeout(async () => {
+      const screenshotData = await captureWorkflowScreenshot();
+      if (screenshotData) {
+        action.screenshot_data = screenshotData;
+      }
+    }, 100);
+  }
+  
+  workflowActions.push(action);
+  console.log('[ChromePilot] Action recorded, total actions:', workflowActions.length);
+  updateWorkflowActionCount();
+  
+  // Visual feedback
+  flashElement(element);
+}
+
+// Record input changes
+async function recordInput(event) {
+  if (!isWorkflowRecording) return;
+  
+  const element = event.target;
+  const action = {
+    type: 'input',
+    selector: getUniqueSelector(element),
+    xpath: getXPath(element),
+    value: element.value,
+    timestamp: Date.now()
+  };
+  
+  // Add input type for better context
+  if (element.type) {
+    action.inputType = element.type;
+  }
+  
+  // Add placeholder for context
+  if (element.placeholder) {
+    action.placeholder = element.placeholder;
+  }
+  
+  // Capture screenshot if enabled
+  if (workflowScreenshotSettings && workflowScreenshotSettings.enabled) {
+    setTimeout(async () => {
+      const screenshotData = await captureWorkflowScreenshot();
+      if (screenshotData) {
+        action.screenshot_data = screenshotData;
+      }
+    }, 100);
+  }
+  
+  workflowActions.push(action);
+  updateWorkflowActionCount();
+  
+  // Visual feedback
+  flashElement(element);
+}
+
+// Visual feedback for recorded actions
+function flashElement(element) {
+  const originalBorder = element.style.border;
+  const originalOutline = element.style.outline;
+  
+  element.style.outline = '3px solid #9c27b0';
+  element.style.outlineOffset = '2px';
+  
+  setTimeout(() => {
+    element.style.outline = originalOutline;
+    element.style.outlineOffset = '';
+  }, 300);
+}
+
+// Drag tracking variables
+let isDragging = false;
+let dragStartElement = null;
+let dragStartX = 0;
+let dragStartY = 0;
+
+// Record drag start
+function recordMouseDown(event) {
+  if (!isWorkflowRecording) return;
+  
+  // Only track left mouse button
+  if (event.button !== 0) return;
+  
+  isDragging = true;
+  dragStartElement = event.target;
+  dragStartX = event.clientX;
+  dragStartY = event.clientY;
+}
+
+// Record drag end
+function recordMouseUp(event) {
+  if (!isWorkflowRecording || !isDragging) return;
+  
+  const endX = event.clientX;
+  const endY = event.clientY;
+  
+  // Only record if there was actual movement
+  const distance = Math.sqrt(Math.pow(endX - dragStartX, 2) + Math.pow(endY - dragStartY, 2));
+  if (distance > 5) { // Minimum 5px movement to count as drag
+    const action = {
+      type: 'drag',
+      startSelector: getUniqueSelector(dragStartElement),
+      startX: dragStartX,
+      startY: dragStartY,
+      endX: endX,
+      endY: endY,
+      distance: Math.round(distance),
+      timestamp: Date.now()
+    };
+    
+    // Add element info if dragging specific elements
+    if (dragStartElement.tagName === 'IMG' || dragStartElement.draggable) {
+      action.draggedElement = dragStartElement.tagName.toLowerCase();
+    }
+    
+    workflowActions.push(action);
+    updateWorkflowActionCount();
+    
+    // Visual feedback
+    flashElement(dragStartElement);
+  }
+  
+  isDragging = false;
+  dragStartElement = null;
+}
+
+// Start workflow recording
+function startWorkflowRecording(screenshotSettings) {
+  isWorkflowRecording = true;
+  workflowActions = [];
+  workflowScreenshotSettings = screenshotSettings;
+  createWorkflowRecordingIndicator();
+  
+  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');
+  }
+  
+  // Connect to the existing FunctionTracker for workflow recording
+  if (window.ChromePilotTracker && window.ChromePilotTracker._functionTracker) {
+    const tracker = window.ChromePilotTracker._functionTracker;
+    
+    // Set up workflow-specific onDataReady callback for function traces
+    const originalOnDataReady = tracker.onDataReady;
+    tracker.onDataReady = (events) => {
+      // Call original callback if it exists (for full data recording)
+      if (originalOnDataReady) {
+        originalOnDataReady(events);
+      }
+      
+      // Process events for workflow recording
+      events.forEach(event => {
+        if (event.type === 'execution_trace' && event.function_name) {
+          // Convert execution_trace to workflow function-trace format
+          workflowActions.push({
+            type: 'function-trace',
+            component: event.function_name, // Map function_name to component
+            args: event.arguments || event.arg_summary || 'unknown',
+            timestamp: event.timestamp,
+            stack: event.call_stack || null
+          });
+          
+          console.log('[ChromePilot] Function trace captured for workflow:', event.function_name);
+        }
+      });
+    };
+    
+    // Enable function tracking via ChromePilotTracker
+    window.ChromePilotTracker._setRecordingStatus(true);
+    console.log('[ChromePilot] Connected workflow recording to FunctionTracker');
+  } else {
+    console.warn('[ChromePilot] FunctionTracker not available for workflow recording');
+  }
+  
+  // Add event listeners for recording
+  document.addEventListener('click', recordClick, true);
+  document.addEventListener('input', recordInput, true);
+  document.addEventListener('change', recordInput, true);
+  document.addEventListener('mousedown', recordMouseDown, true);
+  document.addEventListener('mouseup', recordMouseUp, true);
+  
+  // Function traces are now handled directly via FunctionTracker connection above
+  // Removed phantom message listener that was waiting for messages that never came
+  
+  // Track navigation events
+  const currentUrl = window.location.href;
+  window.addEventListener('beforeunload', () => {
+    if (isWorkflowRecording && window.location.href !== currentUrl) {
+      workflowActions.push({
+        type: 'navigation',
+        url: window.location.href,
+        timestamp: Date.now()
+      });
+    }
+  });
+}
+
+// Stop workflow recording
+function stopWorkflowRecording() {
+  isWorkflowRecording = false;
+  removeWorkflowRecordingIndicator();
+  
+  console.log(`[ChromePilot] Stopping recording. Captured ${workflowActions.length} actions`);
+  
+  // Disconnect from FunctionTracker and disable recording
+  if (window.ChromePilotTracker && window.ChromePilotTracker._functionTracker) {
+    // Disable function tracking
+    window.ChromePilotTracker._setRecordingStatus(false);
+    
+    // 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`);
+  }
+  
+  // Remove event listeners
+  document.removeEventListener('click', recordClick, true);
+  document.removeEventListener('input', recordInput, true);
+  document.removeEventListener('change', recordInput, true);
+  document.removeEventListener('mousedown', recordMouseDown, true);
+  document.removeEventListener('mouseup', recordMouseUp, true);
+  
+  // Reset drag state
+  isDragging = false;
+  dragStartElement = null;
+  
+  // Extract function traces from the __chromePilot bridge if available
+  let functionTraces = [];
+  
+  // First, get any function traces from the runtime bridge
+  if (window.__chromePilot && window.__chromePilot.stopRecording) {
+    console.log('[ChromeDebug MCP] Stopping runtime bridge recording...');
+    const bridgeTraces = window.__chromePilot.stopRecording();
+    if (Array.isArray(bridgeTraces)) {
+      // Convert bridge traces to workflow action format
+      functionTraces = bridgeTraces.map((trace, index) => ({
+        type: 'function-trace',
+        component: trace.component || 'unknown',
+        args: trace.args || [],
+        stack: trace.stack || '',
+        timestamp: trace.timestamp || Date.now(),
+        selector: '',
+        x: null,
+        y: null,
+        value: null,
+        text: null,
+        placeholder: null,
+        screenshot_data: null
+      }));
+      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`);
+    functionTraces = [...functionTraces, ...embeddedTraces];
+  }
+  
+  // Return the recorded workflow with proper functionTraces field
+  return {
+    actions: workflowActions,
+    functionTraces: functionTraces // Now includes actual function traces with component details
+  };
+}
+
+// Capture DOM snapshot with form values and states
+function captureDOMSnapshot() {
+  const snapshot = {
+    html: document.documentElement.outerHTML,
+    formData: {},
+    checkboxStates: {},
+    radioStates: {},
+    selectValues: {},
+    textareaValues: {},
+    customElements: [],
+    activeElement: null,
+    modals: []
+  };
+  
+  // Capture form input values
+  const inputs = document.querySelectorAll('input');
+  inputs.forEach((input, index) => {
+    const selector = getUniqueSelector(input);
+    if (input.type === 'checkbox') {
+      snapshot.checkboxStates[selector] = input.checked;
+    } else if (input.type === 'radio') {
+      snapshot.radioStates[selector] = {
+        checked: input.checked,
+        value: input.value,
+        name: input.name
+      };
+    } else if (input.type !== 'file' && input.type !== 'password') {
+      snapshot.formData[selector] = input.value;
+    }
+  });
+  
+  // Capture select values
+  const selects = document.querySelectorAll('select');
+  selects.forEach(select => {
+    const selector = getUniqueSelector(select);
+    snapshot.selectValues[selector] = {
+      value: select.value,
+      selectedIndex: select.selectedIndex,
+      options: Array.from(select.options).map(opt => ({
+        value: opt.value,
+        text: opt.text,
+        selected: opt.selected
+      }))
+    };
+  });
+  
+  // Capture textarea values
+  const textareas = document.querySelectorAll('textarea');
+  textareas.forEach(textarea => {
+    const selector = getUniqueSelector(textarea);
+    snapshot.textareaValues[selector] = textarea.value;
+  });
+  
+  // Capture active element
+  if (document.activeElement) {
+    snapshot.activeElement = getUniqueSelector(document.activeElement);
+  }
+  
+  // Capture visible modals/dialogs
+  const dialogs = document.querySelectorAll('dialog[open], [role="dialog"]:not([aria-hidden="true"])');
+  dialogs.forEach(dialog => {
+    snapshot.modals.push({
+      selector: getUniqueSelector(dialog),
+      isOpen: true,
+      zIndex: window.getComputedStyle(dialog).zIndex
+    });
+  });
+  
+  // Capture custom element states (e.g., web components)
+  const customEls = document.querySelectorAll('[data-state], [aria-expanded], [aria-selected]');
+  customEls.forEach(el => {
+    snapshot.customElements.push({
+      selector: getUniqueSelector(el),
+      attributes: {
+        'data-state': el.getAttribute('data-state'),
+        'aria-expanded': el.getAttribute('aria-expanded'),
+        'aria-selected': el.getAttribute('aria-selected')
+      }
+    });
+  });
+  
+  return snapshot;
+}
+
+// Capture storage data
+async function captureStorageData() {
+  const storage = {
+    localStorage: {},
+    sessionStorage: {},
+    cookies: []
+  };
+  
+  // Capture localStorage
+  try {
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      storage.localStorage[key] = localStorage.getItem(key);
+    }
+  } catch (e) {
+    console.error('[ChromePilot] Error capturing localStorage:', e);
+  }
+  
+  // Capture sessionStorage
+  try {
+    for (let i = 0; i < sessionStorage.length; i++) {
+      const key = sessionStorage.key(i);
+      storage.sessionStorage[key] = sessionStorage.getItem(key);
+    }
+  } catch (e) {
+    console.error('[ChromePilot] Error capturing sessionStorage:', e);
+  }
+  
+  // Request cookies from background script
+  try {
+    const response = await chrome.runtime.sendMessage({ 
+      action: 'getCookies',
+      url: window.location.href 
+    });
+    if (response && response.cookies) {
+      storage.cookies = response.cookies;
+    }
+  } catch (e) {
+    console.error('[ChromePilot] Error capturing cookies:', e);
+  }
+  
+  return storage;
+}
+
+// Capture console logs (recent ones)
+function captureConsoleLogs() {
+  // This would be populated by console interception
+  // For now, return empty array - logs are captured separately
+  return [];
+}
+
+// Create restore point
+async function createRestorePoint(actionIndex) {
+  console.log('[ChromePilot] Creating restore point at action index:', actionIndex);
+  
+  try {
+    // Capture all data
+    const domSnapshot = captureDOMSnapshot();
+    const storageData = await captureStorageData();
+    const consoleLogs = captureConsoleLogs();
+    
+    const restorePoint = {
+      actionIndex: actionIndex,
+      url: window.location.href,
+      title: document.title,
+      domSnapshot: domSnapshot,
+      scrollX: window.scrollX,
+      scrollY: window.scrollY,
+      localStorage: storageData.localStorage,
+      sessionStorage: storageData.sessionStorage,
+      cookies: storageData.cookies,
+      consoleLogs: consoleLogs,
+      timestamp: Date.now()
+    };
+    
+    // Send to background script to store
+    const response = await chrome.runtime.sendMessage({
+      action: 'saveRestorePoint',
+      restorePoint: restorePoint
+    });
+    
+    if (response && response.success) {
+      console.log('[ChromePilot] Restore point saved:', response.restorePointId);
+      // Visual feedback
+      showRestorePointNotification('Restore point saved!');
+      return response.restorePointId;
+    } else {
+      console.error('[ChromePilot] Failed to save restore point:', response);
+      return null;
+    }
+  } catch (error) {
+    console.error('[ChromePilot] Error creating restore point:', error);
+    return null;
+  }
+}
+
+// Restore from a restore point
+async function restoreFromPoint(restorePointData) {
+  console.log('[ChromePilot] Restoring from restore point');
+  
+  try {
+    // First check if we need to navigate
+    if (restorePointData.url !== window.location.href) {
+      // Request navigation and wait for it
+      await chrome.runtime.sendMessage({
+        action: 'navigateAndRestore',
+        url: restorePointData.url,
+        restorePointId: restorePointData.id
+      });
+      // Navigation will trigger restore after page loads
+      return;
+    }
+    
+    // Restore localStorage
+    try {
+      localStorage.clear();
+      Object.entries(restorePointData.localStorage).forEach(([key, value]) => {
+        localStorage.setItem(key, value);
+      });
+    } catch (e) {
+      console.error('[ChromePilot] Error restoring localStorage:', e);
+    }
+    
+    // Restore sessionStorage
+    try {
+      sessionStorage.clear();
+      Object.entries(restorePointData.sessionStorage).forEach(([key, value]) => {
+        sessionStorage.setItem(key, value);
+      });
+    } catch (e) {
+      console.error('[ChromePilot] Error restoring sessionStorage:', e);
+    }
+    
+    // Restore DOM state
+    const snapshot = restorePointData.domSnapshot;
+    
+    // Restore form values
+    Object.entries(snapshot.formData).forEach(([selector, value]) => {
+      try {
+        const element = document.querySelector(selector);
+        if (element) element.value = value;
+      } catch (e) {}
+    });
+    
+    // Restore checkboxes
+    Object.entries(snapshot.checkboxStates).forEach(([selector, checked]) => {
+      try {
+        const element = document.querySelector(selector);
+        if (element) element.checked = checked;
+      } catch (e) {}
+    });
+    
+    // Restore radio buttons
+    Object.entries(snapshot.radioStates).forEach(([selector, state]) => {
+      try {
+        const element = document.querySelector(selector);
+        if (element && state.checked) element.checked = true;
+      } catch (e) {}
+    });
+    
+    // Restore select values
+    Object.entries(snapshot.selectValues).forEach(([selector, data]) => {
+      try {
+        const element = document.querySelector(selector);
+        if (element) {
+          element.value = data.value;
+          element.selectedIndex = data.selectedIndex;
+        }
+      } catch (e) {}
+    });
+    
+    // Restore textarea values
+    Object.entries(snapshot.textareaValues).forEach(([selector, value]) => {
+      try {
+        const element = document.querySelector(selector);
+        if (element) element.value = value;
+      } catch (e) {}
+    });
+    
+    // Restore custom element states
+    snapshot.customElements.forEach(({ selector, attributes }) => {
+      try {
+        const element = document.querySelector(selector);
+        if (element) {
+          Object.entries(attributes).forEach(([attr, value]) => {
+            if (value !== null) element.setAttribute(attr, value);
+          });
+        }
+      } catch (e) {}
+    });
+    
+    // Restore scroll position
+    window.scrollTo(restorePointData.scrollX, restorePointData.scrollY);
+    
+    // Focus active element if any
+    if (snapshot.activeElement) {
+      try {
+        const element = document.querySelector(snapshot.activeElement);
+        if (element) element.focus();
+      } catch (e) {}
+    }
+    
+    // Show notification
+    showRestorePointNotification('State restored successfully!');
+    
+  } catch (error) {
+    console.error('[ChromePilot] Error restoring from restore point:', error);
+    showRestorePointNotification('Error restoring state', true);
+  }
+}
+
+// Screen interaction recording functions
+function sendScreenInteraction(interaction) {
+  if (!isScreenRecording || !isExtensionValid()) return;
+  
+  chrome.runtime.sendMessage({
+    action: 'screenInteraction',
+    interaction: interaction
+  }).catch(err => {
+    // Ignore errors if extension context is invalid
+  });
+}
+
+async function recordScreenClick(event) {
+  if (!isScreenRecording) return;
+  
+  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) {
+      element = clickableParent;
+    }
+  }
+  
+  const interaction = {
+    type: 'click',
+    selector: getUniqueSelector(element),
+    xpath: getXPath(element),
+    x: event.clientX,
+    y: event.clientY,
+    timestamp: Date.now() - recordingScheduledStartTime  // Relative timestamp from scheduled start
+  };
+  
+  // Add text content for buttons and links
+  if (element.tagName === 'BUTTON' || element.tagName === 'A') {
+    interaction.text = element.textContent.trim();
+  }
+
+  // Enhanced click tracking data (conditional based on user setting)
+  const enhanceCapture = await shouldEnhanceCapture();
+  if (enhanceCapture) {
+    try {
+      console.log('[ChromePilot] Capturing enhanced screen click data...');
+
+      // Capture enhanced element data (only include fields with meaningful values)
+      const capturedHTML = captureElementHTML(element);
+      if (capturedHTML) {
+        interaction.element_html = capturedHTML;
+      }
+
+      const componentData = getEnhancedComponentInfo(element);
+      if (componentData) {
+        try {
+          JSON.stringify(componentData); // Test if serializable
+          interaction.component_data = componentData;
+        } catch (e) {
+          console.error('[ChromePilot] Component data cannot be serialized:', e.message);
+          interaction.component_data = { error: 'Serialization failed', type: typeof componentData };
+        }
+      }
+
+      const eventHandlers = extractEventHandlers(element);
+      if (eventHandlers) {
+        try {
+          JSON.stringify(eventHandlers); // Test if serializable
+          interaction.event_handlers = eventHandlers;
+        } catch (e) {
+          console.error('[ChromePilot] Event handlers cannot be serialized:', e.message);
+          interaction.event_handlers = { error: 'Serialization failed', type: typeof eventHandlers };
+        }
+      }
+
+      const elementState = captureElementState(element);
+      if (elementState) {
+        try {
+          JSON.stringify(elementState); // Test if serializable
+          interaction.element_state = elementState;
+        } catch (e) {
+          console.error('[ChromePilot] Element state cannot be serialized:', e.message);
+          interaction.element_state = { error: 'Serialization failed', type: typeof elementState };
+        }
+      }
+
+      const perfMetrics = getPerformanceMetrics();
+      if (perfMetrics) {
+        try {
+          JSON.stringify(perfMetrics); // Test if serializable
+          interaction.performance_metrics = perfMetrics;
+        } catch (e) {
+          console.error('[ChromePilot] Performance metrics cannot be serialized:', e.message);
+          interaction.performance_metrics = { error: 'Serialization failed', type: typeof perfMetrics };
+        }
+      }
+
+      console.log('[ChromePilot] Enhanced screen click data captured successfully');
+    } 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');
+  }
+
+  sendScreenInteraction(interaction);
+
+  // Trigger visual feedback
+  if (window.screenCaptureVisualFeedback) {
+    window.screenCaptureVisualFeedback.handleScreenCaptureInteraction(interaction);
+  }
+}
+
+function recordScreenInput(event) {
+  if (!isScreenRecording) return;
+  
+  const element = event.target;
+  const interaction = {
+    type: 'input',
+    selector: getUniqueSelector(element),
+    xpath: getXPath(element),
+    value: element.value,
+    timestamp: Date.now() - recordingScheduledStartTime  // Relative timestamp from scheduled start
+  };
+  
+  // Add input type for better context
+  if (element.type) {
+    interaction.inputType = element.type;
+  }
+  
+  // Add placeholder for context
+  if (element.placeholder) {
+    interaction.placeholder = element.placeholder;
+  }
+  
+  sendScreenInteraction(interaction);
+
+  // Trigger visual feedback
+  if (window.screenCaptureVisualFeedback) {
+    window.screenCaptureVisualFeedback.handleScreenCaptureInteraction(interaction);
+  }
+}
+
+function recordScreenKeypress(event) {
+  if (!isScreenRecording) return;
+  
+  // Only record special keys
+  if (event.key === 'Enter' || event.key === 'Escape' || event.key === 'Tab') {
+    const interaction = {
+      type: 'keypress',
+      key: event.key,
+      timestamp: Date.now() - recordingScheduledStartTime  // Relative timestamp from scheduled start
+    };
+    
+    sendScreenInteraction(interaction);
+  }
+}
+
+function recordScreenScroll(event) {
+  if (!isScreenRecording) return;
+  
+  // Throttle scroll events
+  if (this.scrollTimeout) {
+    clearTimeout(this.scrollTimeout);
+  }
+  
+  this.scrollTimeout = setTimeout(() => {
+    const interaction = {
+      type: 'scroll',
+      scrollX: window.scrollX,
+      scrollY: window.scrollY,
+      timestamp: Date.now() - recordingScheduledStartTime  // Relative timestamp from scheduled start
+    };
+    
+    sendScreenInteraction(interaction);
+  }, 200);
+}
+
+// Record screen drag start - mirrors workflow recordMouseDown
+function recordScreenMouseDown(event) {
+  if (!isScreenRecording) return;
+
+  // Only track left mouse button
+  if (event.button !== 0) return;
+
+  isScreenRecordingDragging = true;
+  screenRecordingDragStartElement = event.target;
+  screenRecordingDragStartX = event.clientX;
+  screenRecordingDragStartY = event.clientY;
+}
+
+// Record screen drag end - mirrors workflow recordMouseUp
+function recordScreenMouseUp(event) {
+  if (!isScreenRecording || !isScreenRecordingDragging) return;
+
+  const endX = event.clientX;
+  const endY = event.clientY;
+
+  // Only record if there was actual movement (same 5px threshold as workflow)
+  const distance = Math.sqrt(Math.pow(endX - screenRecordingDragStartX, 2) + Math.pow(endY - screenRecordingDragStartY, 2));
+  if (distance > 5) {
+    const interaction = {
+      type: 'drag',
+      selector: getUniqueSelector(screenRecordingDragStartElement),
+      xpath: getXPath(screenRecordingDragStartElement),
+      x: screenRecordingDragStartX,
+      y: screenRecordingDragStartY,
+      value: JSON.stringify({
+        endX: endX,
+        endY: endY,
+        distance: Math.round(distance)
+      }),
+      timestamp: Date.now() - recordingScheduledStartTime
+    };
+
+    // Add element info if dragging specific elements (mirrors workflow logic)
+    if (screenRecordingDragStartElement.tagName === 'IMG' || screenRecordingDragStartElement.draggable) {
+      interaction.text = screenRecordingDragStartElement.tagName.toLowerCase();
+    }
+
+    sendScreenInteraction(interaction);
+
+    // Trigger visual feedback
+    if (window.screenCaptureVisualFeedback) {
+      window.screenCaptureVisualFeedback.handleScreenCaptureInteraction(interaction);
+    }
+  }
+
+  isScreenRecordingDragging = false;
+  screenRecordingDragStartElement = null;
+}
+
+// Global variables for synchronized timing
+let recordingScheduledStartTime = null;
+let recordingSessionId = null;
+
+// Start/stop screen interaction tracking
+function startScreenInteractionTracking(scheduledStartTime, sessionId) {
+  // Store the scheduled start time and session ID for timestamp calculations
+  recordingScheduledStartTime = scheduledStartTime;
+  recordingSessionId = sessionId;
+
+  console.log('[ChromePilot] Screen interaction tracking scheduled to start at:', new Date(scheduledStartTime));
+
+  // Trigger visual feedback start
+  if (window.screenCaptureVisualFeedback) {
+    window.screenCaptureVisualFeedback.handleStartScreenCapture({ sessionId, scheduledStartTime });
+  }
+
+  // Wait until the scheduled start time before activating tracking
+  const waitTime = Math.max(0, scheduledStartTime - Date.now());
+  setTimeout(() => {
+    isScreenRecording = true;
+
+    // Add event listeners
+    document.addEventListener('click', recordScreenClick, true);
+    document.addEventListener('input', recordScreenInput, true);
+    document.addEventListener('change', recordScreenInput, true);
+    document.addEventListener('keydown', recordScreenKeypress, true);
+    window.addEventListener('scroll', recordScreenScroll, true);
+    document.addEventListener('mousedown', recordScreenMouseDown, true);
+    document.addEventListener('mouseup', recordScreenMouseUp, true);
+
+    console.log('[ChromePilot] Screen interaction tracking started at scheduled time');
+  }, waitTime);
+}
+
+function stopScreenInteractionTracking() {
+  isScreenRecording = false;
+
+  // Array of cleanup operations for systematic execution
+  const cleanupOperations = [
+    () => document.removeEventListener('click', recordScreenClick, true),
+    () => document.removeEventListener('input', recordScreenInput, true),
+    () => document.removeEventListener('change', recordScreenInput, true),
+    () => document.removeEventListener('keydown', recordScreenKeypress, true),
+    () => window.removeEventListener('scroll', recordScreenScroll, true),
+    () => document.removeEventListener('mousedown', recordScreenMouseDown, true),
+    () => document.removeEventListener('mouseup', recordScreenMouseUp, true)
+  ];
+
+  // Execute all cleanup with individual error handling
+  cleanupOperations.forEach((cleanup, index) => {
+    try {
+      cleanup();
+    } catch (e) {
+      console.warn(`[ChromePilot] Failed cleanup operation ${index}:`, e);
+    }
+  });
+
+  // ALWAYS reset ALL state variables regardless of errors above
+  isScreenRecordingDragging = false;
+  screenRecordingDragStartElement = null;
+  screenRecordingDragStartX = 0;  // CRITICAL: This was missing
+  screenRecordingDragStartY = 0;  // CRITICAL: This was missing
+
+  console.log('[ChromePilot] Screen interaction tracking stopped');
+
+  // Visual feedback stop with error isolation
+  try {
+    if (window.screenCaptureVisualFeedback) {
+      window.screenCaptureVisualFeedback.handleStopScreenCapture({});
+    }
+  } catch (e) {
+    console.warn('[ChromePilot] Failed to stop visual feedback:', e);
+  }
+}
+
+// Show restore point notification
+function showRestorePointNotification(message, isError = false) {
+  const notification = document.createElement('div');
+  notification.textContent = message;
+  notification.style.cssText = `
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    padding: 12px 24px;
+    background: ${isError ? '#f44336' : '#4CAF50'};
+    color: white;
+    border-radius: 4px;
+    font-family: Arial, sans-serif;
+    font-size: 14px;
+    z-index: 10000;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+    animation: slideIn 0.3s ease-out;
+  `;
+  
+  const style = document.createElement('style');
+  style.textContent = `
+    @keyframes slideIn {
+      from { transform: translateX(100%); opacity: 0; }
+      to { transform: translateX(0); opacity: 1; }
+    }
+  `;
+  document.head.appendChild(style);
+  
+  document.body.appendChild(notification);
+  
+  setTimeout(() => {
+    notification.style.animation = 'slideOut 0.3s ease-in forwards';
+    notification.style.animationName = 'slideOut';
+    setTimeout(() => {
+      notification.remove();
+      style.remove();
+    }, 300);
+  }, 3000);
+}
+
+// Clean up when navigating away or extension is unloaded
+window.addEventListener('beforeunload', cleanup);
+// Use pagehide instead of deprecated unload event for better Chrome compatibility
+window.addEventListener('pagehide', cleanup);
+
+// Clean up if extension context becomes invalid
+// Note: We don't need chrome.runtime.connect() here because:
+// 1. It requires a corresponding onConnect listener in background script
+// 2. The beforeunload/unload listeners already handle cleanup
+// 3. Extension invalidation is handled by isExtensionValid() checks
+
+// Recording UI elements
+let recordingOverlay = null;
+let recordingStartTime = null;
+let recordingTimer = null;
+let isRecording = false;
+
+// Screen recording interaction tracking
+let isScreenRecording = false;
+
+// Screen recording drag detection - mirrors workflow recording logic
+// See recordMouseDown/Up (workflow) for reference implementation
+let isScreenRecordingDragging = false;
+let screenRecordingDragStartElement = null;
+let screenRecordingDragStartX = 0;
+let screenRecordingDragStartY = 0;
+
+// Full data recording system components
+let fullDataRecording = null;
+let dataBuffer = null;
+// uploadManager is now centralized in background script
+let performanceMonitor = null;
+let piiRedactor = null;
+let domTracker = null;
+let networkTracker = null;
+let functionTracker = null;
+let currentFullRecordingId = null;
+// Disable full data recording permanently
+let isFullDataRecordingActive = false;
+
+// Create floating recording interface
+function showRecordingInterface() {
+  console.log('showRecordingInterface called');
+  
+  // Remove any existing recording overlay
+  if (recordingOverlay) {
+    recordingOverlay.remove();
+  }
+  
+  // Create recording overlay
+  recordingOverlay = document.createElement('div');
+  recordingOverlay.id = 'chrome-pilot-recording-overlay';
+  recordingOverlay.style.cssText = `
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 300px;
+    background: white;
+    border: 2px solid #f44336;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    z-index: 2147483647;
+    font-family: Arial, sans-serif;
+    padding: 20px;
+  `;
+  
+  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>
+    </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="
+      width: 100%;
+      padding: 10px;
+      background: #f44336;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+    ">Start Recording</button>
+    <div id="chrome-pilot-recording-result" style="margin-top: 15px; display: none;"></div>
+  `;
+  
+  document.body.appendChild(recordingOverlay);
+  
+  // Add event listeners
+  document.getElementById('chrome-pilot-close-recording').addEventListener('click', () => {
+    if (isRecording) {
+      if (confirm('Stop recording and close?')) {
+        stopRecording();
+        recordingOverlay.remove();
+        recordingOverlay = null;
+      }
+    } else {
+      recordingOverlay.remove();
+      recordingOverlay = null;
+    }
+  });
+  
+  document.getElementById('chrome-pilot-record-btn').addEventListener('click', () => {
+    if (!isRecording) {
+      startRecording();
+    } else {
+      stopRecording();
+    }
+  });
+}
+
+// Start recording from content script
+function startRecording() {
+  const recordBtn = document.getElementById('chrome-pilot-record-btn');
+  const statusDiv = document.getElementById('chrome-pilot-recording-status');
+  
+  recordBtn.disabled = true;
+  recordBtn.textContent = 'Starting...';
+  
+  // Request recording from background script
+  chrome.runtime.sendMessage({ 
+    action: 'startRecordingFromContent'
+  }, (response) => {
+    if (chrome.runtime.lastError) {
+      console.error('Error starting recording:', chrome.runtime.lastError);
+      statusDiv.textContent = 'Error: ' + chrome.runtime.lastError.message;
+      recordBtn.disabled = false;
+      recordBtn.textContent = 'Start Recording';
+      return;
+    }
+    
+    if (response && response.success) {
+      isRecording = true;
+      recordBtn.disabled = false;
+      recordBtn.textContent = 'Stop Recording';
+      recordBtn.style.background = '#4CAF50';
+      recordingStartTime = Date.now();
+      
+      // Start performance monitoring when recording begins
+      if (performanceMonitor) {
+        performanceMonitor.startMonitoring();
+        console.log('[ChromeDebug MCP] Performance monitoring started with recording');
+      }
+      
+      // Start timer display
+      recordingTimer = setInterval(() => {
+        const elapsed = Math.floor((Date.now() - recordingStartTime) / 1000);
+        const minutes = Math.floor(elapsed / 60);
+        const seconds = elapsed % 60;
+        statusDiv.innerHTML = `<span style="color: #f44336; font-weight: bold;">● Recording: ${minutes}:${seconds.toString().padStart(2, '0')}</span>`;
+      }, 1000);
+    } else {
+      statusDiv.textContent = 'Error: ' + (response?.error || 'Failed to start recording');
+      recordBtn.disabled = false;
+      recordBtn.textContent = 'Start Recording';
+    }
+  });
+}
+
+// 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');
+  
+  recordBtn.disabled = true;
+  recordBtn.textContent = 'Stopping...';
+  
+  if (recordingTimer) {
+    clearInterval(recordingTimer);
+    recordingTimer = null;
+  }
+  
+  // Show processing message
+  statusDiv.innerHTML = '<span style="color: #ff9800;">Processing recording...</span>';
+  
+  // Request stop from background script
+  chrome.runtime.sendMessage({ 
+    action: 'stopRecordingFromContent'
+  }, (response) => {
+    if (chrome.runtime.lastError) {
+      console.error('Error stopping recording:', chrome.runtime.lastError);
+      statusDiv.textContent = 'Error: ' + chrome.runtime.lastError.message;
+      recordBtn.disabled = false;
+      recordBtn.textContent = 'Stop Recording';
+      return;
+    }
+    
+    // Update status to show upload in progress
+    if (response && response.success) {
+      statusDiv.innerHTML = '<span style="color: #2196F3;">Uploading recording...</span>';
+      // The recordingComplete message will show the ID when upload is done
+    }
+    
+    isRecording = false;
+    recordBtn.disabled = false;
+    recordBtn.textContent = 'Start Recording';
+    recordBtn.style.background = '#f44336';
+    
+    // Stop performance monitoring when recording ends
+    if (performanceMonitor) {
+      performanceMonitor.stopMonitoring();
+      console.log('[ChromeDebug MCP] Performance monitoring stopped with recording');
+    }
+  });
+}
+
+// Show frame capture flash indicator
+function showFrameFlash() {
+  if (!frameFlashIndicator) {
+    frameFlashIndicator = document.createElement('div');
+    frameFlashIndicator.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background: rgba(255, 255, 255, 0.3);
+      pointer-events: none;
+      z-index: 999999;
+      opacity: 0;
+      transition: opacity 0.1s ease-in-out;
+    `;
+    document.body.appendChild(frameFlashIndicator);
+  }
+  
+  // Flash effect
+  frameFlashIndicator.style.opacity = '1';
+  setTimeout(() => {
+    frameFlashIndicator.style.opacity = '0';
+  }, 100);
+}
+
+// ============================================================================
+// FULL DATA RECORDING SYSTEM INTEGRATION
+// ============================================================================
+
+// Initialize full data recording system (DISABLED)
+/*
+async function initializeFullDataRecordingSystem() {
+  try {
+    console.log('[ChromeDebug MCP] Initializing full data recording system...');
+    
+    // Initialize core components
+    if (typeof DataBuffer !== 'undefined') {
+      dataBuffer = new DataBuffer();
+      await dataBuffer.init();
+    }
+    
+    // UploadManager is now centralized in background script
+    // Content script will communicate via message passing
+    
+    if (typeof PIIRedactor !== 'undefined') {
+      piiRedactor = new PIIRedactor();
+    }
+    
+    if (typeof PerformanceMonitor !== 'undefined') {
+      performanceMonitor = new PerformanceMonitor();
+      performanceMonitor.init(dataBuffer, {
+        onThrottleRequired: (alerts) => {
+          console.warn('[ChromeDebug MCP] Performance throttling required:', JSON.stringify(alerts, null, 2));
+          // Could automatically reduce instrumentation level
+        },
+        onPerformanceAlert: (alerts) => {
+          console.warn('[ChromeDebug MCP] Performance alerts:', JSON.stringify(alerts, null, 2));
+        }
+      });
+    }
+    
+    // Initialize data collection components
+    if (typeof DOMTracker !== 'undefined') {
+      domTracker = new DOMTracker();
+    }
+    
+    if (typeof NetworkTracker !== 'undefined') {
+      networkTracker = new NetworkTracker();
+    }
+    
+    if (typeof FunctionTracker !== 'undefined') {
+      // Create FunctionTracker with onDataReady callback to persist data
+      functionTracker = new FunctionTracker(
+        performanceMonitor,
+        piiRedactor,
+        // onDataReady callback - called when function traces need to be persisted
+        async (events) => {
+          if (dataBuffer) {
+            try {
+              await dataBuffer.addBatch(events);
+              console.log(`[Chrome Debug] Persisted ${events.length} function traces`);
+            } catch (error) {
+              console.error('[ChromeDebug MCP] Failed to persist function traces:', error);
+            }
+          }
+        }
+      );
+    }
+    
+    // Expose ChromePilotTracker API for manual instrumentation
+    if (!window.ChromePilotTracker) {
+      window.ChromePilotTracker = {
+        isRecording: false,
+        _functionTracker: functionTracker,
+        
+        // Register a single function for tracing
+        register: function(name, fn) {
+          if (!this.isRecording || typeof fn !== 'function') {
+            return fn; // Return original function if not recording
+          }
+          
+          if (!this._functionTracker) {
+            console.warn('[ChromePilotTracker] Function tracker not available');
+            return fn;
+          }
+          
+          // Use the existing wrapFunction from function-tracker
+          return this._functionTracker.wrapFunction(fn, name, { 
+            isUserDefined: true,
+            registeredManually: true 
+          });
+        },
+        
+        // Wrap an entire object/module
+        wrap: function(obj, options = {}) {
+          if (!this.isRecording || !obj || typeof obj !== 'object') {
+            return obj; // Return original if not recording or invalid
+          }
+          
+          if (!this._functionTracker) {
+            console.warn('[ChromePilotTracker] Function tracker not available');
+            return obj;
+          }
+          
+          const self = this;
+          const prefix = options.prefix || obj.constructor?.name || 'Object';
+          
+          // Use Proxy to intercept method calls
+          return new Proxy(obj, {
+            get(target, prop, receiver) {
+              const original = Reflect.get(target, prop, receiver);
+              
+              // Only wrap functions
+              if (typeof original === 'function') {
+                const functionName = `${prefix}.${String(prop)}`;
+                
+                // Check if this method should be ignored
+                if (options.ignore && options.ignore.includes(String(prop))) {
+                  return original;
+                }
+                
+                // Wrap the function
+                return self._functionTracker.wrapFunction(original, functionName, {
+                  isUserDefined: true,
+                  registeredManually: true,
+                  parentObject: prefix
+                });
+              }
+              
+              return original;
+            }
+          });
+        },
+        
+        // Update recording status
+        _setRecordingStatus: function(status) {
+          this.isRecording = status;
+        }
+      };
+      
+      console.log('[ChromeDebug MCP] ChromePilotTracker API exposed for manual instrumentation');
+    }
+    
+    console.log('[ChromeDebug MCP] Full data recording system initialized successfully');
+    return true;
+    
+  } catch (error) {
+    console.error('[ChromeDebug MCP] Failed to initialize full data recording system:', error);
+    return false;
+  }
+}
+
+// Start full data recording with user configuration (DISABLED)
+async function startFullDataRecording(config) {
+  try {
+    if (isFullDataRecordingActive) {
+      console.warn('[ChromeDebug MCP] Full data recording already active');
+      return;
+    }
+    
+    console.log('[ChromeDebug MCP] Starting full data recording with config:', config);
+    
+    // Initialize system if not already done
+    if (!dataBuffer) {
+      const initialized = await initializeFullDataRecordingSystem();
+      if (!initialized) {
+        throw new Error('Failed to initialize recording system');
+      }
+    }
+    
+    // Use the recording ID from config if provided, otherwise generate one
+    const recordingId = config.recordingId || `recording_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    currentFullRecordingId = recordingId; // Store globally for stop function
+    
+    // DataBuffer configuration is handled internally
+    // Store the recording ID in chrome.storage for the dataBuffer to use
+    if (dataBuffer && chrome.storage && chrome.storage.local) {
+      await chrome.storage.local.set({ currentRecordingId: recordingId });
+    }
+    
+    // Data ready callback for all trackers
+    const onDataReady = (events) => {
+      if (dataBuffer) {
+        events.forEach(event => dataBuffer.addEvent(event));
+      }
+    };
+    
+    // Start performance monitoring (lazy loading - only when recording)
+    if (performanceMonitor) {
+      performanceMonitor.startMonitoring();
+      console.log('[ChromeDebug MCP] Performance monitoring started');
+    }
+    
+    // Configure and start DOM tracking
+    if (domTracker && config.captureTypes.domMutations) {
+      domTracker.init({
+        recordingId: recordingId,
+        onDataReady: onDataReady,
+        piiRedactor: piiRedactor,
+        performanceMonitor: performanceMonitor,
+        mutationThrottle: config.instrumentationLevel <= 2 ? 20 : 50 // Throttle for lower levels
+      });
+      domTracker.startTracking();
+      console.log('[ChromeDebug MCP] DOM tracking started');
+    }
+    
+    // Configure and start network tracking
+    if (networkTracker && config.captureTypes.networkRequests) {
+      networkTracker.init({
+        recordingId: recordingId,
+        onDataReady: onDataReady,
+        piiRedactor: piiRedactor,
+        performanceMonitor: performanceMonitor,
+        captureRequestBody: config.instrumentationLevel >= 3,
+        captureResponseBody: config.instrumentationLevel >= 4,
+        maxBodySize: config.instrumentationLevel >= 4 ? 50 * 1024 : 10 * 1024
+      });
+      networkTracker.startTracking();
+      console.log('[ChromeDebug MCP] Network tracking started');
+    }
+    
+    // Configure and start function tracking
+    if (functionTracker && config.captureTypes.functionCalls) {
+      // Create a wrapper that sends data to background script for upload
+      const functionTrackerDataReady = (data) => {
+        if (Array.isArray(data) && data.length > 0) {
+          // Send batch to background script for upload
+          chrome.runtime.sendMessage({
+            type: 'UPLOAD_BATCH',
+            recordingId: recordingId,
+            events: data
+          }, (response) => {
+            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`);
+            }
+          });
+        }
+      };
+      
+      functionTracker.init({
+        recordingId: recordingId,
+        onDataReady: functionTrackerDataReady,
+        piiRedactor: piiRedactor,
+        performanceMonitor: performanceMonitor,
+        maxCallDepth: config.instrumentationLevel <= 2 ? 5 : 10,
+        trackReturnValues: config.instrumentationLevel >= 3,
+        targetCategories: {
+          userDefined: true,
+          eventHandlers: config.instrumentationLevel >= 2,
+          asyncFunctions: config.instrumentationLevel >= 3,
+          domMethods: config.instrumentationLevel >= 4,
+          nativeAPIs: config.instrumentationLevel >= 5
+        }
+      });
+      functionTracker.startTracking();
+      
+      // Update ChromePilotTracker status
+      if (window.ChromePilotTracker) {
+        window.ChromePilotTracker._setRecordingStatus(true);
+        window.ChromePilotTracker._functionTracker = functionTracker;
+      }
+      
+      console.log('[ChromeDebug MCP] Function tracking started');
+    }
+    
+    // Start upload manager via background script
+    chrome.runtime.sendMessage({
+      type: 'START_UPLOAD_MANAGER'
+    }, (response) => {
+      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');
+      }
+    });
+    
+    isFullDataRecordingActive = true;
+    
+    // Full data recording indicator removed - functionality disabled
+    
+    console.log('[ChromeDebug MCP] Full data recording started successfully:', recordingId);
+    
+  } catch (error) {
+    console.error('[ChromeDebug MCP] Failed to start full data recording:', error);
+    throw error;
+  }
+}
+
+// Stop full data recording (DISABLED)
+async function stopFullDataRecording() {
+  try {
+    if (!isFullDataRecordingActive) {
+      console.warn('[ChromeDebug MCP] Full data recording not active');
+      return;
+    }
+    
+    console.log('[ChromeDebug MCP] Stopping full data recording...');
+    
+    // Stop all trackers
+    if (domTracker) {
+      domTracker.stopTracking();
+      console.log('[ChromeDebug MCP] DOM tracking stopped');
+    }
+    
+    if (networkTracker) {
+      networkTracker.stopTracking();
+      console.log('[ChromeDebug MCP] Network tracking stopped');
+    }
+    
+    if (functionTracker) {
+      functionTracker.stopTracking();
+      
+      // Update ChromePilotTracker status
+      if (window.ChromePilotTracker) {
+        window.ChromePilotTracker._setRecordingStatus(false);
+      }
+      
+      console.log('[ChromeDebug MCP] Function tracking stopped');
+    }
+    
+    // Stop performance monitoring
+    if (performanceMonitor) {
+      performanceMonitor.stopMonitoring();
+      console.log('[ChromeDebug MCP] Performance monitoring stopped');
+    }
+    
+    // Create final batch for any remaining events
+    if (dataBuffer && chrome.storage && chrome.storage.local) {
+      try {
+        // Get the current recording ID
+        const result = await chrome.storage.local.get(['currentRecordingId']);
+        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');
+        }
+      } catch (error) {
+        console.warn('[ChromeDebug MCP] Could not create final batch:', error);
+      }
+    }
+    
+    // Finalize uploads via background script
+    await new Promise((resolve) => {
+      chrome.runtime.sendMessage({
+        type: 'FINALIZE_UPLOADS',
+        recordingId: currentFullRecordingId
+      }, (response) => {
+        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');
+        }
+        resolve();
+      });
+    });
+    
+    isFullDataRecordingActive = false;
+    currentFullRecordingId = null; // Clear the recording ID
+    
+    // Full data recording indicator removed - functionality disabled
+    
+    console.log('[ChromeDebug MCP] Full data recording stopped successfully');
+    
+  } catch (error) {
+    console.error('[ChromeDebug MCP] Failed to stop full data recording:', error);
+    throw error;
+  }
+}
+
+
+// Full data recording indicator functions removed - functionality disabled
+*/
+
+// Screen Capture Visual Feedback System
+class ScreenCaptureVisualFeedback {
+  constructor() {
+    this.actionCount = 0;
+    this.isRecording = false;
+    this.actionCounterElement = null;
+    this.recordingIndicatorElement = null;
+    this.activeHighlights = new Set();
+    this.countdownInterval = null;
+
+    // Bind methods to preserve context
+    this.handleStartScreenCapture = this.handleStartScreenCapture.bind(this);
+    this.handleScreenCaptureInteraction = this.handleScreenCaptureInteraction.bind(this);
+    this.handleFrameCaptured = this.handleFrameCaptured.bind(this);
+    this.handleStopScreenCapture = this.handleStopScreenCapture.bind(this);
+
+    this.init();
+  }
+
+  init() {
+    // Listen for screen capture events
+    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+      switch (message.type) {
+        case 'start-screen-capture-tracking':
+          this.handleStartScreenCapture(message);
+          break;
+        case 'screen-capture-interaction':
+          this.handleScreenCaptureInteraction(message);
+          break;
+        case 'screen-capture-frame-captured':
+          this.handleFrameCaptured(message);
+          break;
+        case 'stop-screen-capture-tracking':
+          this.handleStopScreenCapture(message);
+          break;
+      }
+    });
+  }
+
+  handleStartScreenCapture(message) {
+    this.isRecording = true;
+    this.actionCount = 0;
+    this.showRecordingIndicator();
+    // Action counter is now part of the unified indicator, initialized to 0 in HTML
+  }
+
+  handleScreenCaptureInteraction(interaction) {
+    if (!this.isRecording) return;
+
+    this.actionCount++;
+    this.showActionCounter(this.actionCount);
+
+    // Show click highlight for click interactions
+    if (interaction.type === 'click' && interaction.x !== undefined && interaction.y !== undefined) {
+      this.showClickHighlight(interaction.x, interaction.y);
+    }
+
+    // Send interaction data to background
+    chrome.runtime.sendMessage({
+      type: 'screen-capture-interaction-logged',
+      interaction: {
+        type: interaction.type,
+        x: interaction.x,
+        y: interaction.y,
+        timestamp: Date.now(),
+        target: interaction.target,
+        value: interaction.value
+      }
+    });
+  }
+
+  handleFrameCaptured(message) {
+    // Frame captured - could update recording indicator if needed
+    if (this.recordingIndicatorElement) {
+      // Add a subtle pulse effect to indicate frame capture
+      this.recordingIndicatorElement.style.animation = 'screen-capture-pulse 0.3s ease-in-out';
+      setTimeout(() => {
+        if (this.recordingIndicatorElement) {
+          this.recordingIndicatorElement.style.animation = '';
+        }
+      }, 300);
+    }
+  }
+
+  handleStopScreenCapture(message) {
+    this.isRecording = false;
+    this.hideRecordingIndicator();
+    this.hideActionCounter();
+    this.cleanup();
+  }
+
+  showClickHighlight(x, y) {
+    const highlight = document.createElement('div');
+    highlight.className = 'screen-capture-click-highlight';
+    highlight.style.left = `${x}px`;
+    highlight.style.top = `${y}px`;
+
+    document.body.appendChild(highlight);
+    this.activeHighlights.add(highlight);
+
+    // Remove highlight after animation
+    setTimeout(() => {
+      if (highlight && highlight.parentNode) {
+        highlight.parentNode.removeChild(highlight);
+      }
+      this.activeHighlights.delete(highlight);
+    }, 500);
+  }
+
+  showActionCounter(count) {
+    // Update the inline action count in the unified indicator
+    if (this.recordingIndicatorElement) {
+      const actionBadge = this.recordingIndicatorElement.querySelector('.action-count-badge');
+      if (actionBadge) {
+        actionBadge.textContent = `${count} actions`;
+      }
+    }
+  }
+
+  hideActionCounter() {
+    // Action counter is now part of unified indicator, handled by hideRecordingIndicator
+  }
+
+  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;
+          }
+          @keyframes screen-capture-ripple {
+            0% {
+              transform: translate(-50%, -50%) scale(0);
+              opacity: 1;
+            }
+            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'
+      });
+
+      // Start with countdown
+      this.startCountdownSequence();
+      document.body.appendChild(this.recordingIndicatorElement);
+    }
+
+    this.recordingIndicatorElement.style.display = 'flex';
+  }
+
+  startCountdownSequence() {
+    let count = 3;
+
+    // Initial countdown display
+    this.recordingIndicatorElement.innerHTML = `
+      <span style="color: #FF9800; font-size: 20px; animation: pulse 1.5s infinite;">●</span>
+      <span>Starting in ${count}...</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>
+    `;
+
+    this.countdownInterval = setInterval(() => {
+      count--;
+      if (count > 0) {
+        // Update countdown
+        this.recordingIndicatorElement.innerHTML = `
+          <span style="color: #FF9800; font-size: 20px; animation: pulse 1.5s infinite;">●</span>
+          <span>Starting in ${count}...</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>
+        `;
+      } else {
+        // Switch to recording display
+        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>
+        `;
+        clearInterval(this.countdownInterval);
+        this.countdownInterval = null;
+      }
+    }, 1000);
+  }
+
+  hideRecordingIndicator() {
+    // Clear countdown interval if running
+    if (this.countdownInterval) {
+      clearInterval(this.countdownInterval);
+      this.countdownInterval = null;
+    }
+
+    if (this.recordingIndicatorElement) {
+      // CRITICAL FIX: Remove from DOM instead of just hiding
+      if (this.recordingIndicatorElement.parentNode) {
+        this.recordingIndicatorElement.parentNode.removeChild(this.recordingIndicatorElement);
+      }
+      this.recordingIndicatorElement = null;
+    }
+  }
+
+  cleanup() {
+    // Clear countdown interval if running
+    if (this.countdownInterval) {
+      clearInterval(this.countdownInterval);
+      this.countdownInterval = null;
+    }
+
+    // Remove all active highlights
+    this.activeHighlights.forEach(highlight => {
+      if (highlight && highlight.parentNode) {
+        highlight.parentNode.removeChild(highlight);
+      }
+    });
+    this.activeHighlights.clear();
+
+    // Hide indicators
+    this.hideRecordingIndicator();
+
+    // Reset action count
+    this.actionCount = 0;
+  }
+}
+
+// Initialize Screen Capture Visual Feedback System
+if (window === window.top) {
+  window.screenCaptureVisualFeedback = new ScreenCaptureVisualFeedback();
+}
+
+// Initialize basic workflow recording components (lightweight)
+setTimeout(() => {
+  // Only initialize if we're not in an iframe and basic functions are needed
+  if (window === window.top) {
+    // Initialize essential globals for workflow recording
+    if (typeof window.chromePilotWorkflowData === 'undefined') {
+      window.chromePilotWorkflowData = {
+        isRecording: false,
+        sessionId: null,
+        actions: [],
+        startTime: null
+      };
+    }
+    
+    // Initialize FunctionTracker for workflow recording if not already available
+    if (!window.ChromePilotTracker && typeof FunctionTracker !== 'undefined') {
+      // Create a lightweight FunctionTracker for workflow recording
+      const workflowFunctionTracker = new FunctionTracker();
+      
+      // Expose ChromePilotTracker API for manual instrumentation
+      window.ChromePilotTracker = {
+        isRecording: false,
+        _functionTracker: workflowFunctionTracker,
+        
+        // Register a single function for tracing
+        register: function(name, fn) {
+          if (!this.isRecording || typeof fn !== 'function') {
+            return fn; // Return original function if not recording
+          }
+          
+          if (!this._functionTracker) {
+            console.warn('[ChromePilotTracker] Function tracker not available');
+            return fn;
+          }
+          
+          // Use the existing wrapFunction from function-tracker
+          return this._functionTracker.wrapFunction(fn, name, { 
+            isUserDefined: true,
+            registeredManually: true 
+          });
+        },
+        
+        // Wrap an entire object/module
+        wrap: function(obj, options = {}) {
+          if (!this.isRecording || !obj || typeof obj !== 'object') {
+            return obj; // Return original if not recording or invalid
+          }
+          
+          if (!this._functionTracker) {
+            console.warn('[ChromePilotTracker] Function tracker not available');
+            return obj;
+          }
+          
+          const self = this;
+          const prefix = options.prefix || obj.constructor?.name || 'Object';
+          
+          // Use Proxy to intercept method calls
+          return new Proxy(obj, {
+            get(target, prop, receiver) {
+              const original = Reflect.get(target, prop, receiver);
+              
+              // Only wrap functions
+              if (typeof original === 'function') {
+                const functionName = `${prefix}.${String(prop)}`;
+                
+                // Check if this method should be ignored
+                if (options.ignore && options.ignore.includes(String(prop))) {
+                  return original;
+                }
+                
+                // Wrap the function
+                return self._functionTracker.wrapFunction(original, functionName, {
+                  isUserDefined: true,
+                  registeredManually: true,
+                  parentObject: prefix
+                });
+              }
+              
+              return original;
+            }
+          });
+        },
+        
+        // Update recording status
+        _setRecordingStatus: function(status) {
+          this.isRecording = status;
+        }
+      };
+      
+      console.log('[ChromeDebug MCP] ChromePilotTracker initialized for workflow recording');
+    }
+    
+    // Initialize minimal workflow recording support
+    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
+
+  } // End of initializeChromePilot function
+})(); // End of IIFE wrapper