@dynamicu/chromedebug-mcp 2.2.0

package/chrome-extension/popup.js

@@ -0,0 +1,2446 @@
+// Chrome Debug Extension Popup Script v2.0
+const EXTENSION_VERSION = '2.0.4-BUILD-20250119';
+console.log(`[popup.js] Loaded version: ${EXTENSION_VERSION}`);
+
+// Import Firebase license client
+import { FirebaseLicenseClient } from './firebase-client.js';
+import { LEMONSQUEEZY_CHECKOUT_URL } from './firebase-config.module.js';
+
+// Initialize license client
+const licenseClient = new FirebaseLicenseClient();
+let currentUserId = null;
+
+// Global variables for recording functionality
+let isRecording = false;
+let recordingTimer = null;
+let recordingStartTime = null;
+let isStoppingRecording = false;
+
+// Countdown timer variables
+let countdownTimer = null;
+let countdownInterval = null;
+let nextSnapshotTime = null;
+let currentFrameRate = 1;
+
+// Workflow recording variables
+let isWorkflowRecording = false;
+let workflowRecordingTimer = null;
+let workflowStartTime = null;
+
+// Debounce timer for screenshot quality slider
+let screenshotQualityDebounceTimer = null;
+
+// Workflow recording functions
+function updateWorkflowRecordingUI() {
+  const workflowBtn = document.getElementById('workflowRecordBtn');
+  const workflowStatus = document.getElementById('workflowRecordingStatus');
+  const saveRestorePointBtn = document.getElementById('saveRestorePointBtn');
+  
+  console.log('[Popup v2.0.6] updateWorkflowRecordingUI called, isWorkflowRecording:', isWorkflowRecording);
+  console.log('[Popup v2.0.6] workflowBtn element exists?', !!workflowBtn);
+  
+  if (workflowBtn) {
+    if (isWorkflowRecording) {
+      console.log('[Popup v2.0.6] Updating button to STOP state');
+      console.log('[Popup v2.0.6] Current button text:', workflowBtn.textContent);
+      workflowBtn.textContent = 'Stop Workflow Recording';
+      workflowBtn.style.background = '#e91e63';
+      workflowBtn.classList.add('recording');
+      console.log('[Popup v2.0.6] Button updated - new text:', workflowBtn.textContent);
+      console.log('[Popup v2.0.6] Button classes:', workflowBtn.className);
+      startWorkflowTimer();
+      // Show restore point button during recording
+      if (saveRestorePointBtn) {
+        saveRestorePointBtn.style.display = 'block';
+      }
+    } else {
+      workflowBtn.textContent = 'Start Workflow Recording';
+      workflowBtn.style.background = '#9c27b0';
+      workflowBtn.classList.remove('recording');
+      stopWorkflowTimer();
+      if (workflowStatus) {
+        workflowStatus.textContent = '';
+      }
+      // Hide restore point button when not recording
+      if (saveRestorePointBtn) {
+        saveRestorePointBtn.style.display = 'none';
+      }
+    }
+  }
+}
+
+function startWorkflowTimer() {
+  // Get stored start time or use current time
+  chrome.storage.local.get(['workflowStartTime'], (result) => {
+    workflowStartTime = result.workflowStartTime || Date.now();
+    
+    workflowRecordingTimer = setInterval(() => {
+      const elapsed = Math.floor((Date.now() - workflowStartTime) / 1000);
+      const minutes = Math.floor(elapsed / 60);
+      const seconds = elapsed % 60;
+      const workflowStatus = document.getElementById('workflowRecordingStatus');
+      if (workflowStatus) {
+        workflowStatus.innerHTML = `Recording workflow: <span class="recording-timer">${minutes}:${seconds.toString().padStart(2, '0')}</span>`;
+      }
+    }, 1000);
+    
+    // Update timer immediately
+    const elapsed = Math.floor((Date.now() - workflowStartTime) / 1000);
+    const minutes = Math.floor(elapsed / 60);
+    const seconds = elapsed % 60;
+    const workflowStatus = document.getElementById('workflowRecordingStatus');
+    if (workflowStatus) {
+      workflowStatus.innerHTML = `Recording workflow: <span class="recording-timer">${minutes}:${seconds.toString().padStart(2, '0')}</span>`;
+    }
+  });
+}
+
+function stopWorkflowTimer() {
+  if (workflowRecordingTimer) {
+    clearInterval(workflowRecordingTimer);
+    workflowRecordingTimer = null;
+  }
+}
+
+// Import configuration - this will be available globally
+const CONFIG_PORTS = CHROMEDEBUG_CONFIG?.ports || [3001, 3000, 3002, 3028]; // Fallback to defaults
+
+// Site management functions
+async function initializeSiteManagement() {
+  const siteStatusIcon = document.getElementById('siteStatusIcon');
+  const siteStatusText = document.getElementById('siteStatusText');
+  const toggleSiteBtn = document.getElementById('toggleSiteBtn');
+  const addSiteBtn = document.getElementById('addSiteBtn');
+  
+  try {
+    // Get current tab
+    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+    if (!tab || !tab.url) {
+      updateSiteStatus('❓', 'Cannot access current tab', true);
+      return;
+    }
+    
+    const url = new URL(tab.url);
+    const hostname = url.hostname;
+    
+    // Get site restriction settings
+    const settings = await chrome.storage.sync.get(['chromePilotMode', 'chromePilotAllowedSites', 'chromePilotRestrictedSites']);
+    const mode = settings.chromePilotMode || 'whitelist';
+    const allowedSites = settings.chromePilotAllowedSites || ['localhost:*', '127.0.0.1:*', '*.local', '*.test', '*.dev'];
+    const restrictedSites = settings.chromePilotRestrictedSites || ['youtube.com', '*.youtube.com', 'google.com', '*.google.com'];
+    
+    // Test if site is allowed
+    const isAllowed = testSiteAccess(hostname, mode, allowedSites, restrictedSites);
+    
+    if (isAllowed) {
+      updateSiteStatus('✅', `Active on ${hostname}`, false);
+      toggleSiteBtn.textContent = mode === 'whitelist' ? 'Remove from Whitelist' : 'Add to Blacklist';
+      toggleSiteBtn.className = 'site-toggle-btn block';
+      addSiteBtn.textContent = 'Manage Sites';
+    } else {
+      updateSiteStatus('❌', `Blocked on ${hostname}`, false);
+      toggleSiteBtn.textContent = mode === 'whitelist' ? 'Add to Whitelist' : 'Remove from Blacklist';
+      toggleSiteBtn.className = 'site-toggle-btn allow';
+      addSiteBtn.textContent = 'Manage Sites';
+    }
+    
+    // Add event listeners
+    toggleSiteBtn.addEventListener('click', () => toggleCurrentSite(hostname, mode, allowedSites, restrictedSites, isAllowed));
+    addSiteBtn.addEventListener('click', () => addCurrentSite(hostname, mode));
+    
+  } catch (error) {
+    console.error('Site management initialization error:', error);
+    updateSiteStatus('⚠️', 'Error checking site status', true);
+  }
+}
+
+function updateSiteStatus(icon, text, disabled) {
+  const siteStatusIcon = document.getElementById('siteStatusIcon');
+  const siteStatusText = document.getElementById('siteStatusText');
+  const toggleSiteBtn = document.getElementById('toggleSiteBtn');
+  const addSiteBtn = document.getElementById('addSiteBtn');
+  
+  if (siteStatusIcon) siteStatusIcon.textContent = icon;
+  if (siteStatusText) siteStatusText.textContent = text;
+  if (toggleSiteBtn) toggleSiteBtn.disabled = disabled;
+  if (addSiteBtn) addSiteBtn.disabled = disabled;
+}
+
+async function toggleCurrentSite(hostname, mode, allowedSites, restrictedSites, currentlyAllowed) {
+  try {
+    let newAllowedSites = [...allowedSites];
+    let newRestrictedSites = [...restrictedSites];
+    
+    if (mode === 'whitelist') {
+      if (currentlyAllowed) {
+        // Remove from whitelist
+        newAllowedSites = newAllowedSites.filter(site => site !== hostname && site !== `*.${hostname.split('.').slice(1).join('.')}`);
+      } else {
+        // Add to whitelist
+        if (!newAllowedSites.includes(hostname)) {
+          newAllowedSites.push(hostname);
+        }
+      }
+    } else {
+      if (currentlyAllowed) {
+        // Add to blacklist
+        if (!newRestrictedSites.includes(hostname)) {
+          newRestrictedSites.push(hostname);
+        }
+      } else {
+        // Remove from blacklist
+        newRestrictedSites = newRestrictedSites.filter(site => site !== hostname && site !== `*.${hostname.split('.').slice(1).join('.')}`);
+      }
+    }
+    
+    await chrome.storage.sync.set({
+      chromePilotAllowedSites: newAllowedSites,
+      chromePilotRestrictedSites: newRestrictedSites
+    });
+    
+    // Refresh site status
+    initializeSiteManagement();
+    
+    updateSiteStatus('✅', 'Settings updated. Reload tab to apply changes.', false);
+    
+  } catch (error) {
+    console.error('Error toggling site:', error);
+    updateSiteStatus('⚠️', 'Error updating settings', false);
+  }
+}
+
+async function addCurrentSite(hostname, mode) {
+  try {
+    // Open options page
+    chrome.tabs.create({ url: chrome.runtime.getURL('options.html') });
+  } catch (error) {
+    console.error('Error opening options:', error);
+  }
+}
+
+function testSiteAccess(hostname, mode, allowedSites, restrictedSites) {
+  hostname = hostname.toLowerCase();
+  
+  if (mode === 'blacklist') {
+    // Block if hostname matches any restricted site pattern
+    return !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
+    if (allowedSites.length === 0) return true; // Empty whitelist allows all
+    
+    return 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());
+    });
+  }
+}
+
+// Function definitions (outside DOMContentLoaded for proper scope)
+async function checkServerStatus() {
+  const statusEl = document.getElementById('serverStatus');
+  const statusTextEl = document.getElementById('statusText');
+  
+  const ports = CONFIG_PORTS;
+  let connected = false;
+  let connectedPort = null;
+  
+  for (const port of ports) {
+    try {
+      const response = await fetch(`http://localhost:${port}/chromedebug/status`, {
+        method: 'GET',
+        mode: 'cors'
+      });
+      
+      if (response.ok) {
+        connected = true;
+        connectedPort = port;
+        break;
+      }
+    } catch (error) {
+      // Try next port
+    }
+  }
+  
+  if (connected) {
+    statusEl.className = 'server-status connected';
+    statusTextEl.textContent = `Server connected (port ${connectedPort})`;
+  } else {
+    statusEl.className = 'server-status disconnected';
+    statusTextEl.textContent = 'Server not running';
+  }
+  
+  // Return connection status and port for other functions to use
+  return { connected, connectedPort };
+}
+
+
+function updateRecordingUI() {
+  const recordBtn = document.getElementById('recordBtn');
+  const recordingStatus = document.getElementById('recordingStatus');
+  const manualSnapshotBtn = document.getElementById('manualSnapshotBtn');
+  const countdownDisplay = document.getElementById('countdownDisplay');
+  
+  if (recordBtn) {
+    if (isRecording) {
+      recordBtn.textContent = 'Stop Recording';
+      recordBtn.classList.add('recording');
+      startRecordingTimer();
+      
+      // Show manual snapshot button
+      if (manualSnapshotBtn) {
+        manualSnapshotBtn.style.display = 'block';
+      }
+      
+      // Show countdown if frame rate is 3+ seconds
+      if (currentFrameRate >= 3 && countdownDisplay) {
+        countdownDisplay.style.display = 'block';
+        startCountdownTimer();
+      }
+    } else {
+      recordBtn.textContent = 'Start Recording';
+      recordBtn.classList.remove('recording');
+      stopRecordingTimer();
+      stopCountdownTimer();
+      
+      // Hide manual snapshot button and countdown
+      if (manualSnapshotBtn) {
+        manualSnapshotBtn.style.display = 'none';
+      }
+      if (countdownDisplay) {
+        countdownDisplay.style.display = 'none';
+      }
+      
+      if (recordingStatus) {
+        recordingStatus.textContent = '';
+      }
+    }
+  }
+}
+
+function startRecordingTimer() {
+  // Use stored recordingStartTime if available, otherwise use current time
+  if (!recordingStartTime) {
+    chrome.storage.local.get(['recordingStartTime'], (result) => {
+      recordingStartTime = result.recordingStartTime || Date.now();
+    });
+  }
+  
+  recordingTimer = setInterval(() => {
+    const elapsed = Math.floor((Date.now() - recordingStartTime) / 1000);
+    const minutes = Math.floor(elapsed / 60);
+    const seconds = elapsed % 60;
+    const recordingStatus = document.getElementById('recordingStatus');
+    if (recordingStatus) {
+      recordingStatus.innerHTML = `Recording: <span class="recording-timer">${minutes}:${seconds.toString().padStart(2, '0')}</span>`;
+    }
+  }, 1000);
+}
+
+function stopRecordingTimer() {
+  if (recordingTimer) {
+    clearInterval(recordingTimer);
+    recordingTimer = null;
+  }
+}
+
+function startCountdownTimer() {
+  // Initialize next snapshot time if not already set
+  if (!nextSnapshotTime) {
+    nextSnapshotTime = Date.now() + (currentFrameRate * 1000);
+  }
+  
+  countdownInterval = setInterval(() => {
+    const now = Date.now();
+    const timeRemaining = Math.max(0, nextSnapshotTime - now);
+    const secondsRemaining = Math.ceil(timeRemaining / 1000);
+    
+    const countdownTimer = document.getElementById('countdownTimer');
+    if (countdownTimer) {
+      countdownTimer.textContent = secondsRemaining;
+      
+      // Add animation class for the last 3 seconds
+      if (secondsRemaining <= 3 && secondsRemaining > 0) {
+        countdownTimer.style.color = '#ff5252';
+        countdownTimer.classList.add('countdown-timer');
+      } else {
+        countdownTimer.style.color = '#f44336';
+        countdownTimer.classList.remove('countdown-timer');
+      }
+    }
+    
+    // Reset timer for next snapshot
+    if (timeRemaining <= 0) {
+      nextSnapshotTime = now + (currentFrameRate * 1000);
+    }
+  }, 100); // Update every 100ms for smooth countdown
+}
+
+function stopCountdownTimer() {
+  if (countdownInterval) {
+    clearInterval(countdownInterval);
+    countdownInterval = null;
+  }
+  nextSnapshotTime = null;
+}
+
+function takeManualSnapshot() {
+  // Send message to background script to trigger a manual snapshot
+  chrome.runtime.sendMessage({
+    action: 'takeManualSnapshot'
+  }, (response) => {
+    if (chrome.runtime.lastError) {
+      console.error('Error taking manual snapshot:', chrome.runtime.lastError);
+      return;
+    }
+
+    if (response && response.success) {
+      console.log('Manual snapshot taken successfully');
+      // Show brief feedback
+      const manualSnapshotBtn = document.getElementById('manualSnapshotBtn');
+      if (manualSnapshotBtn) {
+        const originalText = manualSnapshotBtn.textContent;
+        manualSnapshotBtn.textContent = 'Snapshot Taken!';
+        manualSnapshotBtn.style.background = '#45a049';
+        setTimeout(() => {
+          manualSnapshotBtn.textContent = originalText;
+          manualSnapshotBtn.style.background = '#4CAF50';
+        }, 1000);
+      }
+    } else {
+      console.error('Failed to take manual snapshot:', response?.error);
+    }
+  });
+}
+
+/*
+ * SNAPSHOT FEATURE DISABLED (2025-10-01)
+ *
+ * This function provided "quick snapshots" (screenshot + console logs) for debugging.
+ *
+ * WHY DISABLED:
+ * - Without console log history, snapshots are just screenshots (users can do natively)
+ * - Console log capture requires always-on monitoring (privacy concern)
+ * - Cannot retrieve historical logs without constant interception
+ * - Core value proposition cannot be delivered cleanly
+ *
+ * ARCHITECTURAL CHALLENGE:
+ * To capture console logs, we need one of:
+ * 1. Always-on monitoring (privacy/performance concern)
+ * 2. Live-only capture (no historical context, defeats debugging purpose)
+ * 3. Historical API (doesn't exist in Chrome)
+ *
+ * TO RE-ENABLE:
+ * 1. Design privacy-conscious always-on log monitoring with:
+ *    - User consent and clear privacy controls
+ *    - Configurable retention periods
+ *    - Memory-efficient log buffering
+ *    - Visual indicator when monitoring active
+ * 2. Implement persistent log storage layer
+ * 3. Add user settings for log capture
+ * 4. Privacy impact assessment
+ * 5. Uncomment this function and UI elements
+ * 6. Uncomment related functions: loadSnapshots(), event handlers
+ * 7. Re-enable backend endpoints and methods
+ *
+ * RECOMMENDED ALTERNATIVE:
+ * Use "Start Recording" which properly captures screenshots + logs + user actions
+ *
+ * See: SNAPSHOT_FEATURE_DISABLED.md for detailed explanation
+ */
+/*
+async function takeSnapshot() {
+  console.log('Taking standalone snapshot...');
+
+  try {
+    const serverStatus = await checkServerStatus();
+    if (!serverStatus.connected) {
+      console.error('Server not running');
+      const recordingStatus = document.getElementById('recordingStatus');
+      if (recordingStatus) {
+        recordingStatus.innerHTML = '<strong style="color: #f44336;">Error: Server not running</strong><br>' +
+                                   '<small>Please start the Chrome Debug server first</small>';
+      }
+      setTimeout(() => {
+        if (recordingStatus) recordingStatus.textContent = '';
+      }, 5000);
+      return;
+    }
+
+    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+
+    if (!tab || !tab.id) {
+      console.error('No active tab found');
+      const recordingStatus = document.getElementById('recordingStatus');
+      if (recordingStatus) {
+        recordingStatus.textContent = 'Error: No active tab';
+      }
+      return;
+    }
+
+    const noteInput = document.getElementById('snapshotNoteInput');
+    const note = noteInput ? noteInput.value.trim() : '';
+
+    const takeSnapshotBtn = document.getElementById('takeSnapshotBtn');
+    if (takeSnapshotBtn) {
+      takeSnapshotBtn.textContent = 'Taking Snapshot...';
+      takeSnapshotBtn.disabled = true;
+    }
+
+    chrome.runtime.sendMessage({
+      action: 'takeStandaloneSnapshot',
+      tabId: tab.id,
+      note: note
+    }, (response) => {
+      if (takeSnapshotBtn) {
+        takeSnapshotBtn.disabled = false;
+        takeSnapshotBtn.textContent = '📸 Take Snapshot';
+      }
+
+      if (chrome.runtime.lastError) {
+        console.error('Error taking snapshot:', chrome.runtime.lastError);
+        const recordingStatus = document.getElementById('recordingStatus');
+        if (recordingStatus) {
+          recordingStatus.textContent = 'Error: ' + chrome.runtime.lastError.message;
+        }
+        return;
+      }
+
+      if (response && response.success) {
+        console.log('Snapshot taken successfully:', response.sessionId);
+        const recordingStatus = document.getElementById('recordingStatus');
+        if (recordingStatus) {
+          recordingStatus.innerHTML = `<strong style="color: #4CAF50;">Snapshot saved!</strong>`;
+        }
+
+        if (noteInput) {
+          noteInput.value = '';
+        }
+
+        if (response.sessionId) {
+          addRecording(response.sessionId, false, true, serverStatus.connectedPort, 'snapshot');
+        }
+
+        setTimeout(() => {
+          if (recordingStatus) recordingStatus.textContent = '';
+        }, 3000);
+
+        if (takeSnapshotBtn) {
+          const originalText = takeSnapshotBtn.textContent;
+          const originalColor = takeSnapshotBtn.style.background;
+          takeSnapshotBtn.textContent = '✅ Snapshot Saved!';
+          takeSnapshotBtn.style.background = '#4CAF50';
+          setTimeout(() => {
+            takeSnapshotBtn.textContent = originalText;
+            takeSnapshotBtn.style.background = originalColor;
+          }, 2000);
+        }
+
+        const snapshotsList = document.getElementById('snapshotsList');
+        if (snapshotsList && snapshotsList.style.display !== 'none') {
+          loadSnapshots();
+        }
+      } else {
+        const recordingStatus = document.getElementById('recordingStatus');
+        if (recordingStatus) {
+          recordingStatus.textContent = 'Error: ' + (response?.error || 'Failed to take snapshot');
+        }
+      }
+    });
+  } catch (error) {
+    console.error('Error in takeSnapshot:', error);
+    const recordingStatus = document.getElementById('recordingStatus');
+    if (recordingStatus) {
+      recordingStatus.textContent = 'Error: ' + error.message;
+    }
+
+    const takeSnapshotBtn = document.getElementById('takeSnapshotBtn');
+    if (takeSnapshotBtn) {
+      takeSnapshotBtn.disabled = false;
+      takeSnapshotBtn.textContent = '📸 Take Snapshot';
+    }
+  }
+}
+*/
+
+function loadRecordings() {
+  chrome.storage.local.get(['recordings'], (result) => {
+    const recordings = result.recordings || [];
+    updateRecordingsDisplay(recordings);
+  });
+}
+
+function addRecording(recordingId, isSession = false, isFrameCapture = false, serverPort = null, type = null, sessionName = null) {
+  chrome.storage.local.get(['recordings'], (result) => {
+    const recordings = result.recordings || [];
+    recordings.unshift({
+      id: recordingId,
+      timestamp: Date.now(),
+      isSession: isSession,
+      isFrameCapture: isFrameCapture,
+      serverPort: serverPort,
+      type: type || (isSession ? 'session' : isFrameCapture ? 'recording' : 'recording'),
+      name: sessionName
+    }); // Add to beginning
+    chrome.storage.local.set({ recordings }, () => {
+      updateRecordingsDisplay(recordings);
+    });
+  });
+}
+
+function deleteRecording(recordingId) {
+  // First, tell the background script to delete from server
+  chrome.runtime.sendMessage({ 
+    action: 'deleteRecording', 
+    recordingId: recordingId 
+  }, (response) => {
+    // Then remove from local storage
+    chrome.storage.local.get(['recordings'], (result) => {
+      const recordings = result.recordings || [];
+      const filtered = recordings.filter(r => r.id !== recordingId);
+      chrome.storage.local.set({ recordings: filtered }, () => {
+        updateRecordingsDisplay(filtered);
+      });
+    });
+  });
+}
+
+function updateRecordingsDisplay(recordings) {
+  const container = document.getElementById('recordingsContainer');
+  const listDiv = document.getElementById('recordingsList');
+
+  if (!container || !listDiv) return;
+
+  if (recordings.length === 0) {
+    listDiv.style.display = 'none';
+    return;
+  }
+
+  listDiv.style.display = 'block';
+  container.innerHTML = recordings.map(recording => {
+    const portInfo = recording.serverPort ? ` - Port: ${recording.serverPort}` : '';
+    let typeInfo = '';
+    let typeIcon = '';
+
+    if (recording.type === 'snapshot') {
+      typeInfo = ' (snapshot)';
+      typeIcon = '📸 ';
+    } else if (recording.isFrameCapture) {
+      typeInfo = ' (frames)';
+      typeIcon = '🎥 ';
+    } else if (recording.isSession) {
+      typeInfo = ' (chunked)';
+      typeIcon = '📊 ';
+    }
+
+    const displayName = recording.name || recording.id;
+
+    return `
+      <div class="recording-item">
+        <div class="recording-info">
+          <div class="recording-id" title="${recording.id}">
+            <span class="recording-id-text">${typeIcon}${displayName}</span>
+            ${typeInfo}${portInfo}
+          </div>
+        </div>
+        <div class="recording-buttons">
+          <button class="copy-id-btn" data-id="${recording.id}" title="Copy ID">Copy ID</button>
+          <button class="copy-prompt-btn" data-id="${recording.id}" data-port="${recording.serverPort || ''}" data-type="${recording.type || ''}" title="Copy Claude Prompt">Copy Prompt</button>
+          ${recording.isFrameCapture || recording.type === 'snapshot' ? `<button class="view-btn" data-id="${recording.id}" data-type="${recording.type || ''}" title="View Screenshots">View</button>` : ''}
+          <button class="delete-btn" data-id="${recording.id}" title="Delete">Delete</button>
+        </div>
+      </div>
+    `;
+  }).join('');
+  
+  // Add click handlers for copy ID buttons
+  container.querySelectorAll('.copy-id-btn').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      const recordingId = e.target.getAttribute('data-id');
+      navigator.clipboard.writeText(recordingId).then(() => {
+        // Visual feedback
+        const originalText = e.target.textContent;
+        e.target.textContent = 'Copied!';
+        e.target.style.background = '#4CAF50';
+        e.target.style.color = 'white';
+        setTimeout(() => {
+          e.target.textContent = originalText;
+          e.target.style.background = '';
+          e.target.style.color = '';
+        }, 1000);
+      }).catch(err => {
+        console.error('Failed to copy:', err);
+        alert('Failed to copy recording ID');
+      });
+    });
+  });
+  
+  // Add click handlers for copy prompt buttons
+  container.querySelectorAll('.copy-prompt-btn').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      const recordingId = e.target.getAttribute('data-id');
+      const port = e.target.getAttribute('data-port');
+      const type = e.target.getAttribute('data-type');
+      const portText = port ? ` that was recorded on port ${port}` : '';
+
+      let prompt;
+      if (type === 'snapshot') {
+        prompt = `Please use the get_frame_screenshot function in Chrome Debug to view the snapshot "${recordingId}"${portText}. This is a single-frame screenshot with console logs captured for debugging.`;
+      } else {
+        prompt = `Please use the chrome_pilot_show_frames function in Chrome Debug to load the recording "${recordingId}"${portText}.`;
+      }
+
+      navigator.clipboard.writeText(prompt).then(() => {
+        // Visual feedback
+        const originalText = e.target.textContent;
+        e.target.textContent = 'Copied!';
+        e.target.style.background = '#4CAF50';
+        e.target.style.color = 'white';
+        setTimeout(() => {
+          e.target.textContent = originalText;
+          e.target.style.background = '';
+          e.target.style.color = '';
+        }, 1000);
+      }).catch(err => {
+        console.error('Failed to copy:', err);
+        alert('Failed to copy prompt');
+      });
+    });
+  });
+  
+  // Add click handlers for delete buttons
+  container.querySelectorAll('.delete-btn').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      const recordingId = e.target.getAttribute('data-id');
+      if (confirm('Delete this recording?')) {
+        deleteRecording(recordingId);
+      }
+    });
+  });
+  
+  // Add click handlers for view buttons
+  container.querySelectorAll('.view-btn').forEach(btn => {
+    btn.addEventListener('click', async (e) => {
+      const recordingId = e.target.getAttribute('data-id');
+      const type = e.target.getAttribute('data-type');
+
+      // Check if pro version (frame editor) is available
+      try {
+        const frameEditorUrl = type === 'snapshot'
+          ? chrome.runtime.getURL(`pro/frame-editor.html?sessionId=${recordingId}&type=snapshot`)
+          : chrome.runtime.getURL(`pro/frame-editor.html?sessionId=${recordingId}`);
+
+        // Try to fetch the frame editor to see if it exists
+        const response = await fetch(frameEditorUrl, { method: 'HEAD' });
+
+        if (response.ok) {
+          // Pro version available - open frame editor
+          chrome.tabs.create({ url: frameEditorUrl });
+        } else {
+          throw new Error('Frame editor not available');
+        }
+      } catch (error) {
+        // Free version - show upgrade prompt
+        console.log('[ChromePilot Free] Frame editor not available - showing upgrade prompt');
+        alert('Frame Editor is a Pro feature. Upgrade to ChromePilot Pro to view detailed frame recordings with console logs and advanced debugging tools.');
+      }
+    });
+  });
+}
+
+
+
+
+// Initialize when DOM is ready
+// License UI initialization function
+async function initializeLicenseUI() {
+  console.log('[License] Initializing license UI');
+
+  // Get or create userId
+  const stored = await chrome.storage.local.get('chromedebug_user_id');
+  currentUserId = stored.chromedebug_user_id || crypto.randomUUID();
+  if (!stored.chromedebug_user_id) {
+    await chrome.storage.local.set({chromedebug_user_id: currentUserId});
+    console.log('[License] Created new user ID:', currentUserId);
+  }
+
+  // Check license status
+  const licenseStatus = await licenseClient.getCachedLicenseStatus();
+  console.log('[License] License status:', licenseStatus);
+
+  // Update workflow recording PRO badge visibility
+  const workflowProBadge = document.getElementById('workflowProBadge');
+
+  if (licenseStatus.valid && licenseStatus.tier === 'pro') {
+    // Show pro status
+    document.getElementById('pro-tier-status').style.display = 'block';
+    document.getElementById('free-tier-status').style.display = 'none';
+    // Hide license activation input/button when Pro license is active
+    document.getElementById('license-activation').style.display = 'none';
+    // Hide PRO badge for Pro users
+    if (workflowProBadge) workflowProBadge.style.display = 'none';
+    console.log('[License] Displaying Pro tier status');
+  } else {
+    // Show free tier + usage
+    const usage = await licenseClient.checkUsageLimit(currentUserId);
+    console.log('[License] Usage check result:', usage);
+
+    // Handle both API response format (currentUsage, dailyLimit) and offline format (count, limit)
+    document.getElementById('usage-count').textContent = usage.currentUsage ?? usage.count ?? 0;
+    document.getElementById('usage-limit').textContent = usage.dailyLimit ?? usage.limit ?? 50;
+    document.getElementById('free-tier-status').style.display = 'block';
+    document.getElementById('pro-tier-status').style.display = 'none';
+    // Show license activation input/button for free tier
+    document.getElementById('license-activation').style.display = 'block';
+    // Show PRO badge for free users
+    if (workflowProBadge) workflowProBadge.style.display = 'block';
+    console.log('[License] Displaying Free tier status');
+  }
+}
+
+// License activation handler
+async function handleLicenseActivation() {
+  const licenseKey = document.getElementById('license-key-input').value.trim();
+  const messageDiv = document.getElementById('license-message');
+
+  if (!licenseKey) {
+    messageDiv.textContent = 'Please enter a license key';
+    messageDiv.style.color = '#f44336';
+    return;
+  }
+
+  messageDiv.textContent = 'Validating...';
+  messageDiv.style.color = '#2196F3';
+  console.log('[License] Validating license key...');
+
+  const result = await licenseClient.validateLicense(licenseKey);
+  console.log('[License] Validation result:', result);
+
+  if (result.valid) {
+    messageDiv.textContent = 'License activated successfully!';
+    messageDiv.style.color = '#4caf50';
+    document.getElementById('license-key-input').value = '';
+    await initializeLicenseUI(); // Refresh UI
+  } else {
+    messageDiv.textContent = result.error || 'Invalid license key';
+    messageDiv.style.color = '#f44336';
+  }
+}
+
+// Upgrade button handler
+function handleUpgradeClick() {
+  console.log('[License] Opening upgrade page:', LEMONSQUEEZY_CHECKOUT_URL);
+  chrome.tabs.create({url: LEMONSQUEEZY_CHECKOUT_URL});
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  console.log('DOM loaded, initializing popup');
+
+  // Initialize license UI first
+  initializeLicenseUI().catch(error => {
+    console.error('[License] Failed to initialize license UI:', error);
+  });
+
+  // License event handlers
+  const activateLicenseBtn = document.getElementById('activate-license-btn');
+  const upgradeBtn = document.getElementById('upgrade-btn');
+
+  if (activateLicenseBtn) {
+    activateLicenseBtn.addEventListener('click', handleLicenseActivation);
+  }
+
+  if (upgradeBtn) {
+    upgradeBtn.addEventListener('click', handleUpgradeClick);
+  }
+
+  // Function to update button states based on server status
+  async function updateButtonStatesForServerStatus() {
+    const serverStatus = await checkServerStatus();
+    const recordBtn = document.getElementById('recordBtn');
+    const workflowRecordBtn = document.getElementById('workflowRecordBtn');
+    
+    if (!serverStatus.connected) {
+      // Disable recording buttons when server is not running
+      if (recordBtn && !isRecording) {
+        recordBtn.style.opacity = '0.6';
+        recordBtn.title = 'Server not running - please start Chrome Debug server';
+      }
+      if (workflowRecordBtn && !isWorkflowRecording) {
+        workflowRecordBtn.style.opacity = '0.6';
+        workflowRecordBtn.title = 'Server not running - please start Chrome Debug server';
+      }
+    } else {
+      // Enable recording buttons when server is running
+      if (recordBtn) {
+        recordBtn.style.opacity = '1';
+        recordBtn.title = '';
+      }
+      if (workflowRecordBtn) {
+        workflowRecordBtn.style.opacity = '1';
+        workflowRecordBtn.title = '';
+      }
+    }
+  }
+  
+  // Initialize server status check
+  updateButtonStatesForServerStatus();
+  setInterval(updateButtonStatesForServerStatus, 3000);
+  
+  // Initialize site management functionality
+  initializeSiteManagement();
+  
+  // Initialize enhanced capture toggle
+  const enhancedCaptureCheckbox = document.getElementById('enhancedCaptureCheckbox');
+  if (enhancedCaptureCheckbox) {
+    // Load setting from storage (default to false for performance)
+    chrome.storage.local.get(['enhancedClickCapture'], (result) => {
+      enhancedCaptureCheckbox.checked = result.enhancedClickCapture === true;
+    });
+
+    // Save changes when checkbox is clicked
+    enhancedCaptureCheckbox.addEventListener('change', () => {
+      chrome.storage.local.set({ enhancedClickCapture: enhancedCaptureCheckbox.checked });
+      console.log('Enhanced click capture setting changed to:', enhancedCaptureCheckbox.checked);
+    });
+  }
+
+  // Initialize state from storage
+  chrome.storage.local.get([
+    'frameRate',
+    'imageQuality',
+    'frameFlash',
+    'workflowRecording',
+    'includeLogsInExport',
+    'workflowScreenshotsEnabled',
+    'workflowScreenshotFormat',
+    'workflowScreenshotQuality',
+    'workflowScreenshotMaxWidth'
+  ], (result) => {
+    
+    // Restore workflow recording state
+    if (result.workflowRecording === true) {
+      isWorkflowRecording = true;
+      updateWorkflowRecordingUI();
+    }
+    
+    // Restore include logs checkbox state (default to true)
+    if (includeLogsCheckbox) {
+      includeLogsCheckbox.checked = result.includeLogsInExport !== false;
+    }
+    
+    // Load recording settings with defaults
+    const frameRateSelect = document.getElementById('frameRate');
+    const imageQualitySelect = document.getElementById('imageQuality');
+    const frameFlashCheckbox = document.getElementById('frameFlash');
+    
+    // Set defaults if not stored
+    const frameRate = result.frameRate || '1';
+    const imageQuality = result.imageQuality || '30';
+    const frameFlash = result.frameFlash !== false; // Default to true
+    
+    if (frameRateSelect) {
+      frameRateSelect.value = frameRate;
+    }
+    if (imageQualitySelect) {
+      imageQualitySelect.value = imageQuality;
+    }
+    if (frameFlashCheckbox) {
+      frameFlashCheckbox.checked = frameFlash;
+    }
+    
+    // Save defaults if they weren't stored
+    if (!result.frameRate || !result.imageQuality || result.frameFlash === undefined) {
+      chrome.storage.local.set({
+        frameRate: frameRate,
+        imageQuality: imageQuality,
+        frameFlash: frameFlash
+      });
+    }
+
+    // Restore workflow screenshot settings
+    const enableScreenshotsCheckbox = document.getElementById('enableScreenshotsCheckbox');
+    const screenshotFormat = document.getElementById('screenshotFormat');
+    const screenshotQuality = document.getElementById('screenshotQuality');
+    const screenshotMaxWidth = document.getElementById('screenshotMaxWidth');
+    const screenshotSettingsDiv = document.getElementById('screenshotSettings');
+    const qualityValue = document.getElementById('qualityValue');
+
+    if (enableScreenshotsCheckbox) {
+      // Default to true if not set
+      const screenshotsEnabled = result.workflowScreenshotsEnabled !== false;
+      enableScreenshotsCheckbox.checked = screenshotsEnabled;
+
+      if (screenshotSettingsDiv) {
+        screenshotSettingsDiv.style.display = screenshotsEnabled ? 'block' : 'none';
+      }
+    }
+
+    if (screenshotFormat && result.workflowScreenshotFormat) {
+      screenshotFormat.value = result.workflowScreenshotFormat;
+    }
+
+    if (screenshotQuality) {
+      const quality = result.workflowScreenshotQuality || 30;
+      screenshotQuality.value = quality;
+      if (qualityValue) qualityValue.textContent = quality;
+    }
+
+    if (screenshotMaxWidth && result.workflowScreenshotMaxWidth) {
+      screenshotMaxWidth.value = result.workflowScreenshotMaxWidth;
+    }
+
+  });
+  
+  // Load saved recordings
+  loadRecordings();
+  
+  // Setup recording settings event listeners
+  const frameRateSelect = document.getElementById('frameRate');
+  const imageQualitySelect = document.getElementById('imageQuality');
+  const frameFlashCheckbox = document.getElementById('frameFlash');
+  
+  if (frameRateSelect) {
+    frameRateSelect.addEventListener('change', () => {
+      chrome.storage.local.set({ frameRate: frameRateSelect.value });
+    });
+  }
+  
+  if (imageQualitySelect) {
+    imageQualitySelect.addEventListener('change', () => {
+      chrome.storage.local.set({ imageQuality: imageQualitySelect.value });
+    });
+  }
+  
+  if (frameFlashCheckbox) {
+    frameFlashCheckbox.addEventListener('change', () => {
+      chrome.storage.local.set({ frameFlash: frameFlashCheckbox.checked });
+    });
+  }
+  
+  // Check initial recording state from storage
+  chrome.storage.local.get(['recordingActive', 'recordingStartTime', 'pendingRecording', 'pendingTabId'], (result) => {
+    if (result.recordingActive) {
+      isRecording = true;
+      recordingStartTime = result.recordingStartTime || Date.now();
+      updateRecordingUI();
+      console.log('Restored recording state from storage');
+    } else if (result.pendingRecording && result.pendingTabId) {
+      // Auto-start recording for the pending tab
+      console.log('Found pending recording for tab:', result.pendingTabId);
+      const targetTabId = result.pendingTabId;
+      chrome.storage.local.remove(['pendingRecording', 'pendingTabId']);
+      
+      // Start recording
+      chrome.runtime.sendMessage({ 
+        action: 'startRecording', 
+        tabId: targetTabId 
+      }, (response) => {
+        if (chrome.runtime.lastError) {
+          console.error('Error starting recording:', chrome.runtime.lastError);
+          return;
+        }
+        
+        if (response && response.success) {
+          isRecording = true;
+          recordingStartTime = Date.now();
+          updateRecordingUI();
+        }
+      });
+    }
+  });
+  
+  
+  // Setup recording button handler
+  const recordBtn = document.getElementById('recordBtn');
+  const recordingStatus = document.getElementById('recordingStatus');
+  
+  if (recordBtn) {
+    console.log('Setting up record button handler');
+    recordBtn.addEventListener('click', async (e) => {
+      e.preventDefault();
+      console.log('Record button clicked, isRecording:', isRecording);
+      
+      if (!isRecording && !isStoppingRecording) {
+        try {
+          // Check if server is running before starting recording
+          const serverStatus = await checkServerStatus();
+          if (!serverStatus.connected) {
+            console.error('Server not running');
+            if (recordingStatus) {
+              recordingStatus.innerHTML = '<strong style="color: #f44336;">Error: Server not running</strong><br>' +
+                                        '<small>Please start the Chrome Debug server first</small>';
+            }
+            // Clear error message after 5 seconds
+            setTimeout(() => {
+              if (recordingStatus) recordingStatus.textContent = '';
+            }, 5000);
+            return;
+          }
+          
+          // Get the current active tab
+          const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+          console.log('Current tab:', tab);
+          
+          if (!tab || !tab.id) {
+            console.error('No active tab found');
+            if (recordingStatus) {
+              recordingStatus.textContent = 'Error: No active tab';
+            }
+            return;
+          }
+          
+          // Disable button while starting
+          recordBtn.textContent = 'Starting...';
+          recordBtn.disabled = true;
+          
+          // Get recording settings
+          const frameRateSelect = document.getElementById('frameRate');
+          const imageQualitySelect = document.getElementById('imageQuality');
+          const frameFlashCheckbox = document.getElementById('frameFlash');
+          const screenRecordingSessionNameInput = document.getElementById('screenRecordingSessionNameInput');
+
+          const settings = {
+            frameRate: frameRateSelect ? parseFloat(frameRateSelect.value) : 1,
+            imageQuality: imageQualitySelect ? parseInt(imageQualitySelect.value) : 30,
+            frameFlash: frameFlashCheckbox ? frameFlashCheckbox.checked : true,
+            sessionName: screenRecordingSessionNameInput?.value.trim() || null
+          };
+          
+          // Send message to background to start recording
+          chrome.runtime.sendMessage({ 
+            action: 'startRecording', 
+            tabId: tab.id,
+            settings: settings
+          }, (response) => {
+            recordBtn.disabled = false;
+            
+            if (chrome.runtime.lastError) {
+              console.error('Error starting recording:', chrome.runtime.lastError);
+              recordingStatus.textContent = 'Error: ' + chrome.runtime.lastError.message;
+              recordBtn.textContent = 'Start Recording';
+              return;
+            }
+            
+            if (response && response.success) {
+              console.log('Recording started successfully');
+              isRecording = true;
+              recordingStartTime = Date.now();
+              
+              // Capture current frame rate for countdown timer
+              currentFrameRate = settings.frameRate;
+              
+              updateRecordingUI();
+            } else {
+              recordingStatus.textContent = 'Error: ' + (response?.error || 'Failed to start recording');
+              recordBtn.textContent = 'Start Recording';
+            }
+          });
+        } catch (error) {
+          console.error('Error in record button handler:', error);
+          if (recordingStatus) {
+            recordingStatus.textContent = 'Error: ' + error.message;
+          }
+          recordBtn.disabled = false;
+          recordBtn.textContent = 'Start Recording';
+        }
+      } else if (isRecording && !isStoppingRecording) {
+        // Stop recording
+        console.log('Stopping recording...');
+        isStoppingRecording = true;
+        recordBtn.textContent = 'Stopping...';
+        recordBtn.disabled = true;
+        
+        chrome.runtime.sendMessage({ 
+          action: 'stopRecording'
+        }, (response) => {
+          isStoppingRecording = false;
+          recordBtn.disabled = false;
+          
+          if (chrome.runtime.lastError) {
+            console.error('Error stopping recording:', chrome.runtime.lastError);
+            recordingStatus.textContent = 'Error: ' + chrome.runtime.lastError.message;
+            recordBtn.textContent = 'Stop Recording';
+            return;
+          }
+          
+          if (response && response.success) {
+            console.log('Recording stopped successfully');
+            isRecording = false;
+            updateRecordingUI();
+          } else {
+            recordingStatus.textContent = 'Error: ' + (response?.error || 'Failed to stop recording');
+            recordBtn.textContent = 'Stop Recording';
+          }
+        });
+      }
+    });
+  } else {
+    console.error('Record button not found!');
+  }
+  
+  // Setup manual snapshot button handler
+  const manualSnapshotBtn = document.getElementById('manualSnapshotBtn');
+  if (manualSnapshotBtn) {
+    manualSnapshotBtn.addEventListener('click', (e) => {
+      e.preventDefault();
+      if (isRecording) {
+        takeManualSnapshot();
+      }
+    });
+  }
+
+  /*
+   * SNAPSHOT FEATURE DISABLED (2025-10-01)
+   * Snapshot button click handler disabled - see SNAPSHOT_FEATURE_DISABLED.md
+   */
+  /*
+  const takeSnapshotBtn = document.getElementById('takeSnapshotBtn');
+  if (takeSnapshotBtn) {
+    takeSnapshotBtn.addEventListener('click', async (e) => {
+      e.preventDefault();
+      await takeSnapshot();
+    });
+  }
+  */
+  
+  // Setup workflow recording button handler
+  const workflowRecordBtn = document.getElementById('workflowRecordBtn');
+  const workflowRecordingsList = document.getElementById('workflowRecordingsList');
+  const workflowRecordingsContainer = document.getElementById('workflowRecordingsContainer');
+  const includeLogsCheckbox = document.getElementById('includeLogsCheckbox');
+  
+  if (workflowRecordBtn) {
+    workflowRecordBtn.addEventListener('click', async () => {
+      if (!isWorkflowRecording) {
+        // Start workflow recording
+        try {
+          // Check if server is running before starting workflow recording
+          const serverStatus = await checkServerStatus();
+          if (!serverStatus.connected) {
+            console.error('Server not running');
+            const workflowStatus = document.getElementById('workflowRecordingStatus');
+            if (workflowStatus) {
+              workflowStatus.innerHTML = '<strong style="color: #f44336;">Error: Server not running</strong><br>' +
+                                       '<small>Please start the Chrome Debug server first</small>';
+            }
+            // Clear error message after 5 seconds
+            setTimeout(() => {
+              if (workflowStatus) workflowStatus.textContent = '';
+            }, 5000);
+            return;
+          }
+
+          // Check license before allowing workflow recording (same pattern as strategic plan)
+          console.log('[License] Checking license for workflow recording...');
+          const licenseCheck = await chrome.runtime.sendMessage({
+            action: 'checkLicenseForWorkflow'
+          });
+          console.log('[License] License check result:', licenseCheck);
+
+          // If not Pro or limit reached, show upgrade modal
+          if (!licenseCheck || !licenseCheck.allowed || (licenseCheck.tier && licenseCheck.tier !== 'pro')) {
+            const message = licenseCheck?.message || 'Workflow Recording is a Pro feature. Upgrade to Pro for unlimited workflow recordings with function tracing.';
+
+            // Show modal
+            if (confirm(`${message}\n\nWould you like to upgrade now?`)) {
+              // Open upgrade page
+              chrome.tabs.create({
+                url: LEMONSQUEEZY_CHECKOUT_URL
+              });
+            }
+
+            return; // Stop execution
+          }
+
+          const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+
+          if (!tab || !tab.id) {
+            console.error('No active tab found');
+            return;
+          }
+
+          // Get settings
+          const includeLogsInExport = includeLogsCheckbox ? includeLogsCheckbox.checked : true;
+          const sessionName = document.getElementById('sessionNameInput')?.value || null;
+          const enableScreenshots = document.getElementById('enableScreenshotsCheckbox')?.checked || false;
+          
+          let screenshotSettings = null;
+          if (enableScreenshots) {
+            screenshotSettings = {
+              enabled: true,
+              format: document.getElementById('screenshotFormat')?.value || 'jpeg',
+              quality: parseInt(document.getElementById('screenshotQuality')?.value) || 30,
+              maxWidth: parseInt(document.getElementById('screenshotMaxWidth')?.value) || null
+            };
+          }
+          
+          // Send message to background script to start recording
+          console.log('[Popup v2.0.6] Sending startWorkflowRecording message to background');
+          chrome.runtime.sendMessage({ 
+            action: 'startWorkflowRecording',
+            tabId: tab.id,
+            includeLogsInExport: includeLogsInExport,
+            sessionName: sessionName,
+            screenshotSettings: screenshotSettings
+          }, (response) => {
+            console.log('[Popup v2.0.6] Received response from background:', response);
+            console.log('[Popup v2.0.6] chrome.runtime.lastError:', chrome.runtime.lastError);
+            console.log('[Popup v2.0.6] Checking which branch will execute...');
+            
+            if (chrome.runtime.lastError) {
+              console.error('[Popup v2.0.6] RUNTIME ERROR BRANCH:', chrome.runtime.lastError);
+              // Check if this tab allows content script injection
+              if (!tab.url || tab.url.startsWith('chrome://') || tab.url.startsWith('chrome-extension://') || tab.url.startsWith('moz-extension://')) {
+                console.log('Cannot inject content script into restricted URL:', tab.url);
+                return;
+              }
+              // Inject content script if needed
+              chrome.scripting.executeScript({
+                target: { tabId: tab.id },
+                files: ['content.js']
+              }, () => {
+                if (chrome.runtime.lastError) {
+                  console.error('Failed to inject content script:', chrome.runtime.lastError);
+                  return;
+                }
+                chrome.scripting.insertCSS({
+                  target: { tabId: tab.id },
+                  files: ['content.css']
+                }, () => {
+                  if (chrome.runtime.lastError) {
+                    console.error('Failed to inject CSS:', chrome.runtime.lastError);
+                    return;
+                  }
+                  // Try again after injection
+                  setTimeout(() => {
+                    chrome.runtime.sendMessage({ 
+                      action: 'startWorkflowRecording',
+                      tabId: tab.id,
+                      includeLogsInExport: includeLogsInExport,
+                      sessionName: sessionName,
+                      screenshotSettings: screenshotSettings
+                    }, (retryResponse) => {
+                      if (retryResponse && retryResponse.success) {
+                        isWorkflowRecording = true;
+                        // Save state and start time to storage
+                        const startTime = Date.now();
+                        chrome.storage.local.set({ 
+                          workflowRecording: true,
+                          workflowStartTime: startTime
+                        });
+                        workflowStartTime = startTime;
+                        updateWorkflowRecordingUI();
+                        if (workflowRecordingsList) workflowRecordingsList.style.display = 'none';
+                      }
+                    });
+                  }, 100);
+                });
+              });
+            } else if (response && response.success) {
+              console.log('[Popup v2.0.6] *** SUCCESS BRANCH REACHED! ***');
+              console.log('[Popup v2.0.6] Workflow recording started successfully, updating UI now');
+              console.log('[Popup v2.0.6] Setting isWorkflowRecording = true');
+              isWorkflowRecording = true;
+              // Save state and start time to storage
+              const startTime = Date.now();
+              chrome.storage.local.set({ 
+                workflowRecording: true,
+                workflowStartTime: startTime
+              });
+              workflowStartTime = startTime;
+              console.log('[Popup v2.0.6] About to call updateWorkflowRecordingUI()');
+              updateWorkflowRecordingUI();
+              console.log('[Popup v2.0.6] updateWorkflowRecordingUI() call completed');
+              // Hide any previous results
+              if (workflowRecordingsList) workflowRecordingsList.style.display = 'none';
+            } else {
+              console.error('[Popup v2.0.6] *** ELSE BRANCH - Unexpected response ***');
+              console.error('[Popup v2.0.6] Response details:', {
+                exists: !!response,
+                success: response?.success,
+                type: typeof response,
+                keys: response ? Object.keys(response) : 'no response',
+                fullResponse: response
+              });
+            }
+          });
+        } catch (error) {
+          console.error('Error starting workflow recording:', error);
+        }
+      } else {
+        // Stop workflow recording
+        try {
+          const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+          
+          if (!tab || !tab.id) {
+            console.error('No active tab found');
+            return;
+          }
+          
+          // Send message to background script to stop recording
+          chrome.runtime.sendMessage({ 
+            action: 'stopWorkflowRecording',
+            tabId: tab.id
+          }, async (response) => {
+            if (chrome.runtime.lastError) {
+              console.error('Error stopping workflow:', chrome.runtime.lastError);
+              // Still stop recording in UI even if there was an error
+              isWorkflowRecording = false;
+              chrome.storage.local.set({ 
+                workflowRecording: false,
+                workflowStartTime: null
+              });
+              updateWorkflowRecordingUI();
+              alert('Error stopping workflow recording. The recording may have been lost.');
+              return;
+            }
+            
+            if (response && response.success && response.workflow) {
+              isWorkflowRecording = false;
+              // Clear state from storage
+              chrome.storage.local.set({ 
+                workflowRecording: false,
+                workflowStartTime: null
+              });
+              updateWorkflowRecordingUI();
+              
+              // Display the workflow results
+              if (workflowRecordingsContainer) {
+                let workflowItem;
+                
+                // Get current server port for prompt generation
+                const serverConnection = await checkServerStatus();
+                const currentServerPort = serverConnection.connectedPort;
+                
+                // The response.workflow contains the full response from stopWorkflowRecording
+                const workflowData = response.workflow;
+                
+                if (workflowData.savedToServer) {
+                  // Create a saved recording entry like screen recordings
+                  workflowItem = document.createElement('div');
+                  workflowItem.className = 'recording-item';
+                  workflowItem.innerHTML = `
+                    <div class="recording-info">
+                      <div style="font-weight: bold; margin-bottom: 4px;">
+                        ${workflowData.workflow.sessionId} (workflow)
+                      </div>
+                      <div style="color: #666; font-size: 11px;">
+                        ${workflowData.workflow.actions.length} actions • ${workflowData.workflow.logs.length} logs
+                      </div>
+                    </div>
+                    <div style="display: flex; gap: 4px; margin-top: 8px;">
+                      <button class="copy-id-btn" style="padding: 4px 8px; background: #2196F3; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
+                        Copy ID
+                      </button>
+                      <button class="copy-prompt-btn" data-id="${workflowData.workflow.sessionId}" data-port="${currentServerPort || ''}" style="padding: 4px 8px; background: #4CAF50; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
+                        Copy Prompt
+                      </button>
+                    </div>
+                  `;
+                  
+                  // Add event listeners for the buttons
+                  const copyIdBtn = workflowItem.querySelector('.copy-id-btn');
+                  const copyPromptBtn = workflowItem.querySelector('.copy-prompt-btn');
+                  
+                  copyIdBtn.addEventListener('click', () => {
+                    navigator.clipboard.writeText(workflowData.workflow.sessionId).then(() => {
+                      copyIdBtn.textContent = 'Copied!';
+                      copyIdBtn.style.background = '#4CAF50';
+                      setTimeout(() => {
+                        copyIdBtn.textContent = 'Copy ID';
+                        copyIdBtn.style.background = '#2196F3';
+                      }, 2000);
+                    });
+                  });
+                  
+                  // copyPromptBtn is now handled by the shared event listener system with data-id and data-port attributes
+                } else {
+                  // Fallback when server not available
+                  workflowItem = document.createElement('div');
+                  workflowItem.className = 'recording-item';
+                  workflowItem.innerHTML = `
+                    <div class="recording-info">
+                      <div style="font-weight: bold; margin-bottom: 4px; color: #ff6b6b;">
+                        Server not available - JSON downloaded
+                      </div>
+                      <div style="color: #666; font-size: 11px;">
+                        ${workflowData.workflow.length} actions recorded
+                      </div>
+                    </div>
+                  `;
+                }
+                
+                // Add the item to the container
+                workflowRecordingsContainer.appendChild(workflowItem);
+                workflowRecordingsList.style.display = 'block';
+                
+                // Reload the list to show all recordings
+                setTimeout(() => {
+                  loadWorkflowRecordings();
+                }, 500);
+              }
+            }
+          });
+        } catch (error) {
+          console.error('Error stopping workflow recording:', error);
+        }
+      }
+    });
+  }
+  
+  // Setup include logs checkbox
+  if (includeLogsCheckbox) {
+    includeLogsCheckbox.addEventListener('change', () => {
+      chrome.storage.local.set({ includeLogsInExport: includeLogsCheckbox.checked });
+    });
+  }
+  
+  // Setup save restore point button
+  const saveRestorePointBtn = document.getElementById('saveRestorePointBtn');
+  const restorePointsList = document.getElementById('restorePointsList');
+  const restorePointsContainer = document.getElementById('restorePointsContainer');
+  
+  if (saveRestorePointBtn) {
+    saveRestorePointBtn.addEventListener('click', async () => {
+      try {
+        const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+        
+        if (!tab || !tab.id) {
+          console.error('No active tab found');
+          return;
+        }
+        
+        // Send message to content script to create restore point
+        chrome.tabs.sendMessage(tab.id, {
+          action: 'createRestorePoint'
+        }, (response) => {
+          if (chrome.runtime.lastError) {
+            console.error('Error creating restore point:', chrome.runtime.lastError);
+            return;
+          }
+          
+          if (response && response.success) {
+            console.log('Restore point created:', response.restorePointId);
+            // Refresh restore points list
+            loadRestorePoints();
+          } else {
+            console.error('Failed to create restore point:', response);
+          }
+        });
+      } catch (error) {
+        console.error('Error creating restore point:', error);
+      }
+    });
+  }
+  
+  // Function to load and display restore points
+  async function loadRestorePoints() {
+    // Get current workflow ID from storage
+    chrome.storage.local.get(['currentWorkflowId'], async (result) => {
+      if (!result.currentWorkflowId) {
+        return;
+      }
+      
+      // Check server for restore points
+      const ports = CONFIG_PORTS;
+      for (const port of ports) {
+        try {
+          const response = await fetch(`http://localhost:${port}/chromedebug/restore-points/${result.currentWorkflowId}`, {
+            method: 'GET',
+            mode: 'cors'
+          });
+          
+          if (response.ok) {
+            const restorePoints = await response.json();
+            
+            if (restorePoints.length > 0) {
+              restorePointsList.style.display = 'block';
+              restorePointsContainer.innerHTML = '';
+              
+              restorePoints.forEach(rp => {
+                const item = document.createElement('div');
+                item.className = 'restore-point-item';
+                item.innerHTML = `
+                  <div class="restore-point-info">
+                    <div style="font-weight: bold;">Action ${rp.actionIndex}</div>
+                    <div style="font-size: 11px; color: #666;">
+                      ${new Date(rp.timestamp).toLocaleString()}
+                    </div>
+                    <div style="font-size: 11px; color: #666;">
+                      ${rp.title}
+                    </div>
+                  </div>
+                  <div>
+                    <button class="restore-btn" data-restore-id="${rp.id}">Restore</button>
+                    <button class="delete-btn" data-restore-id="${rp.id}" style="padding: 4px 8px; font-size: 10px;">Delete</button>
+                  </div>
+                `;
+                restorePointsContainer.appendChild(item);
+              });
+              
+              // Add event listeners to restore buttons
+              document.querySelectorAll('.restore-btn').forEach(btn => {
+                btn.addEventListener('click', async (e) => {
+                  const restoreId = e.target.getAttribute('data-restore-id');
+                  await restoreFromPoint(restoreId);
+                });
+              });
+              
+              // Add event listeners to delete buttons
+              document.querySelectorAll('.restore-point-item .delete-btn').forEach(btn => {
+                btn.addEventListener('click', async (e) => {
+                  const restoreId = e.target.getAttribute('data-restore-id');
+                  if (confirm('Delete this restore point?')) {
+                    await deleteRestorePoint(restoreId);
+                    loadRestorePoints(); // Refresh list
+                  }
+                });
+              });
+            } else {
+              restorePointsList.style.display = 'none';
+            }
+            break;
+          }
+        } catch (error) {
+          // Try next port
+        }
+      }
+    });
+  }
+  
+  // Function to restore from a restore point
+  async function restoreFromPoint(restorePointId) {
+    try {
+      // First get the restore point data from server
+      const ports = CONFIG_PORTS;
+      let restorePointData = null;
+      
+      for (const port of ports) {
+        try {
+          const response = await fetch(`http://localhost:${port}/chromedebug/restore-point/${restorePointId}`, {
+            method: 'GET',
+            mode: 'cors'
+          });
+          
+          if (response.ok) {
+            restorePointData = await response.json();
+            break;
+          }
+        } catch (error) {
+          // Try next port
+        }
+      }
+      
+      if (!restorePointData) {
+        console.error('Could not retrieve restore point data');
+        return;
+      }
+      
+      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+      
+      if (!tab || !tab.id) {
+        console.error('No active tab found');
+        return;
+      }
+      
+      // Send message to content script to restore
+      chrome.tabs.sendMessage(tab.id, {
+        action: 'restoreFromPoint',
+        restorePointData: restorePointData
+      }, (response) => {
+        if (chrome.runtime.lastError) {
+          console.error('Error restoring from point:', chrome.runtime.lastError);
+          return;
+        }
+        
+        if (response && response.success) {
+          console.log('Successfully restored from point');
+        } else {
+          console.error('Failed to restore from point:', response);
+        }
+      });
+    } catch (error) {
+      console.error('Error restoring from point:', error);
+    }
+  }
+  
+  // Function to delete a restore point
+  async function deleteRestorePoint(restorePointId) {
+    const ports = CONFIG_PORTS;
+    
+    for (const port of ports) {
+      try {
+        const response = await fetch(`http://localhost:${port}/chromedebug/restore-point/${restorePointId}`, {
+          method: 'DELETE',
+          mode: 'cors'
+        });
+        
+        if (response.ok) {
+          console.log('Restore point deleted');
+          break;
+        }
+      } catch (error) {
+        // Try next port
+      }
+    }
+  }
+  
+  // Setup screenshot settings handlers
+  const enableScreenshotsCheckbox = document.getElementById('enableScreenshotsCheckbox');
+  const screenshotSettingsDiv = document.getElementById('screenshotSettings');
+  const qualitySlider = document.getElementById('screenshotQuality');
+  const qualityValue = document.getElementById('qualityValue');
+
+  if (enableScreenshotsCheckbox) {
+    enableScreenshotsCheckbox.addEventListener('change', () => {
+      if (screenshotSettingsDiv) {
+        screenshotSettingsDiv.style.display = enableScreenshotsCheckbox.checked ? 'block' : 'none';
+      }
+      // Save checkbox state with error handling
+      chrome.storage.local.set({ workflowScreenshotsEnabled: enableScreenshotsCheckbox.checked }, () => {
+        if (chrome.runtime.lastError) {
+          console.error('Failed to save screenshot enabled setting:', chrome.runtime.lastError);
+        }
+      });
+    });
+  }
+
+  // Screenshot format dropdown
+  const screenshotFormat = document.getElementById('screenshotFormat');
+  if (screenshotFormat) {
+    screenshotFormat.addEventListener('change', () => {
+      chrome.storage.local.set({ workflowScreenshotFormat: screenshotFormat.value }, () => {
+        if (chrome.runtime.lastError) {
+          console.error('Failed to save screenshot format:', chrome.runtime.lastError);
+        }
+      });
+    });
+  }
+
+  // Screenshot quality slider with debouncing
+  if (qualitySlider && qualityValue) {
+    qualitySlider.addEventListener('input', () => {
+      // Update display immediately
+      qualityValue.textContent = qualitySlider.value;
+
+      // Debounce the save operation
+      clearTimeout(screenshotQualityDebounceTimer);
+      screenshotQualityDebounceTimer = setTimeout(() => {
+        const quality = parseInt(qualitySlider.value);
+        chrome.storage.local.set({ workflowScreenshotQuality: quality }, () => {
+          if (chrome.runtime.lastError) {
+            console.error('Failed to save screenshot quality:', chrome.runtime.lastError);
+          }
+        });
+      }, 500);
+    });
+  }
+
+  // Screenshot max width with validation
+  const screenshotMaxWidth = document.getElementById('screenshotMaxWidth');
+  if (screenshotMaxWidth) {
+    screenshotMaxWidth.addEventListener('blur', () => {
+      let value = screenshotMaxWidth.value.trim();
+
+      if (value === '') {
+        value = null;
+      } else {
+        value = parseInt(value);
+        if (isNaN(value) || value < 100 || value > 10000) {
+          console.warn('Invalid max width value, must be between 100-10000');
+          screenshotMaxWidth.value = '';
+          return;
+        }
+      }
+
+      chrome.storage.local.set({ workflowScreenshotMaxWidth: value }, () => {
+        if (chrome.runtime.lastError) {
+          console.error('Failed to save screenshot max width:', chrome.runtime.lastError);
+        }
+      });
+    });
+  }
+  
+  
+  // Copy button handler is now inline in the workflow item creation
+  
+  // Set up "View Past Recordings" links
+  const viewWorkflowRecordingsLink = document.getElementById('viewWorkflowRecordings');
+  const viewScreenRecordingsLink = document.getElementById('viewScreenRecordings');
+  
+  if (viewWorkflowRecordingsLink) {
+    viewWorkflowRecordingsLink.addEventListener('click', (e) => {
+      e.preventDefault();
+      const workflowRecordingsList = document.getElementById('workflowRecordingsList');
+      if (workflowRecordingsList) {
+        if (workflowRecordingsList.style.display === 'none' || workflowRecordingsList.style.display === '') {
+          workflowRecordingsList.style.display = 'block';
+          loadWorkflowRecordings();
+          viewWorkflowRecordingsLink.textContent = 'Hide Recordings';
+        } else {
+          workflowRecordingsList.style.display = 'none';
+          viewWorkflowRecordingsLink.textContent = 'View Past Recordings';
+        }
+      }
+    });
+  }
+  
+  if (viewScreenRecordingsLink) {
+    viewScreenRecordingsLink.addEventListener('click', (e) => {
+      e.preventDefault();
+      const recordingsList = document.getElementById('recordingsList');
+      if (recordingsList) {
+        if (recordingsList.style.display === 'none') {
+          loadScreenRecordings();
+          recordingsList.style.display = 'block';
+          viewScreenRecordingsLink.textContent = 'Hide Recordings';
+        } else {
+          recordingsList.style.display = 'none';
+          viewScreenRecordingsLink.textContent = 'View Past Recordings';
+        }
+      }
+    });
+  }
+
+  /*
+   * SNAPSHOT FEATURE DISABLED (2025-10-01)
+   * View snapshots link handler disabled - see SNAPSHOT_FEATURE_DISABLED.md
+   */
+  /*
+  const viewSnapshotsLink = document.getElementById('viewSnapshotsLink');
+  if (viewSnapshotsLink) {
+    viewSnapshotsLink.addEventListener('click', (e) => {
+      e.preventDefault();
+      const snapshotsList = document.getElementById('snapshotsList');
+      if (snapshotsList) {
+        if (snapshotsList.style.display === 'none') {
+          loadSnapshots();
+          snapshotsList.style.display = 'block';
+          viewSnapshotsLink.textContent = 'Hide Snapshots';
+        } else {
+          snapshotsList.style.display = 'none';
+          viewSnapshotsLink.textContent = 'View Past Snapshots';
+        }
+      }
+    });
+  }
+  */
+
+  // Don't load recordings on startup - only when user clicks the link
+
+  // Cleanup debounce timer on unload
+  window.addEventListener('beforeunload', () => {
+    if (screenshotQualityDebounceTimer) {
+      clearTimeout(screenshotQualityDebounceTimer);
+    }
+  });
+});
+
+// Function to load and display workflow recordings
+async function loadWorkflowRecordings() {
+  const workflowRecordingsList = document.getElementById('workflowRecordingsList');
+  const workflowRecordingsContainer = document.getElementById('workflowRecordingsContainer');
+  
+  if (!workflowRecordingsList || !workflowRecordingsContainer) {
+    return;
+  }
+  
+  // Clear existing items
+  workflowRecordingsContainer.innerHTML = '';
+  
+  // Check server for workflow recordings
+  const ports = CONFIG_PORTS;
+  for (const port of ports) {
+    try {
+      const response = await fetch(`http://localhost:${port}/chromedebug/workflow-recordings`);
+      if (response.ok) {
+        const data = await response.json();
+        console.log('Loaded workflow recordings from port', port, ':', data);
+        
+        // Handle both data.recordings and direct array response
+        const recordings = data.recordings || data;
+        
+        if (Array.isArray(recordings) && recordings.length > 0) {
+          // Display each workflow recording
+          recordings.forEach(recording => {
+            const workflowItem = document.createElement('div');
+            workflowItem.className = 'recording-item';
+            
+            const displayName = recording.name || `Workflow ${recording.session_id}`;
+            const date = new Date(recording.timestamp);
+            const formattedDate = date.toLocaleString();
+            
+            workflowItem.innerHTML = `
+              <div class="recording-info">
+                <div style="font-weight: bold; margin-bottom: 4px;">${displayName}</div>
+                <div style="color: #666; font-size: 11px;">
+                  ${recording.total_actions} actions • ${formattedDate}
+                </div>
+                ${recording.screenshot_settings ? '<div style="color: #2196F3; font-size: 10px;">&#128248; Screenshots included</div>' : ''}
+              </div>
+              <div class="recording-buttons">
+                <button class="play-btn" data-session-id="${recording.session_id}" style="padding: 4px 8px; background: #4CAF50; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
+                  &#9654; Play
+                </button>
+                <button class="get-prompt-btn" data-session-id="${recording.session_id}" data-name="${recording.name || ''}" style="padding: 4px 8px; background: #2196F3; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
+                  Get Prompt
+                </button>
+                <button class="delete-btn" data-recording-id="${recording.id || recording.session_id}" style="padding: 4px 8px; background: #f44336; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
+                  Delete
+                </button>
+              </div>
+            `;
+            
+            // Add event listeners
+            const playBtn = workflowItem.querySelector('.play-btn');
+            const getPromptBtn = workflowItem.querySelector('.get-prompt-btn');
+            const deleteBtn = workflowItem.querySelector('.delete-btn');
+            
+            playBtn.addEventListener('click', () => playWorkflow(recording.session_id));
+            getPromptBtn.addEventListener('click', () => {
+              const sessionId = recording.session_id;
+              const name = recording.name;
+              const port = window.CHROMEDEBUG_CONFIG?.ports?.[0] || '3001';
+              let prompt;
+              
+              if (name) {
+                // Use name-based prompt similar to screen recording format
+                prompt = `Please use the get_workflow_recording function in Chrome Debug to load the workflow recording "${name}" (session: ${sessionId}) that was recorded on port ${port}.`;
+              } else {
+                // Use session ID based prompt
+                prompt = `Please use the get_workflow_recording function in Chrome Debug to load the workflow recording "${sessionId}" that was recorded on port ${port}.`;
+              }
+              
+              navigator.clipboard.writeText(prompt).then(() => {
+                getPromptBtn.textContent = 'Copied!';
+                getPromptBtn.style.background = '#4CAF50';
+                setTimeout(() => {
+                  getPromptBtn.textContent = 'Get Prompt';
+                  getPromptBtn.style.background = '#2196F3';
+                }, 2000);
+              });
+            });
+            deleteBtn.addEventListener('click', () => {
+              console.log('Delete clicked for recording:', recording);
+              const recordingId = recording.id || recording.session_id;
+              if (!recordingId) {
+                console.error('No ID found for recording:', recording);
+                alert('Cannot delete: Recording ID not found');
+                return;
+              }
+              deleteWorkflowRecording(recordingId);
+            });
+            
+            workflowRecordingsContainer.appendChild(workflowItem);
+          });
+        } else {
+          // Show "No recordings found" message
+          const noRecordingsMsg = document.createElement('div');
+          noRecordingsMsg.style.cssText = 'color: #666; font-size: 13px; text-align: center; padding: 20px;';
+          noRecordingsMsg.textContent = 'No workflow recordings found';
+          workflowRecordingsContainer.appendChild(noRecordingsMsg);
+        }
+        break; // Found working server
+      }
+    } catch (error) {
+      console.error(`Failed to load recordings from port ${port}:`, error);
+    }
+  }
+  
+  // If we couldn't connect to any server, show an error message
+  if (workflowRecordingsContainer.innerHTML === '') {
+    const errorMsg = document.createElement('div');
+    errorMsg.style.cssText = 'color: #f44336; font-size: 13px; text-align: center; padding: 20px;';
+    errorMsg.textContent = 'Could not connect to Chrome Debug server';
+    workflowRecordingsContainer.appendChild(errorMsg);
+  }
+}
+
+// Function to play a workflow
+async function playWorkflow(sessionId) {
+  console.log('Playing workflow:', sessionId);
+  
+  try {
+    // Get the current active tab
+    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+    
+    if (!tab || !tab.id) {
+      console.error('No active tab found');
+      alert('Please open a tab to play the workflow');
+      return;
+    }
+    
+    // Get workflow data from server
+    let workflowData = null;
+    const ports = CONFIG_PORTS;
+    for (const port of ports) {
+      try {
+        const response = await fetch(`http://localhost:${port}/chromedebug/workflow-recording/${sessionId}`);
+        if (response.ok) {
+          workflowData = await response.json();
+          break;
+        }
+      } catch (error) {
+        console.error(`Failed to get workflow from port ${port}:`, error);
+      }
+    }
+    
+    if (!workflowData) {
+      alert('Failed to load workflow data');
+      return;
+    }
+    
+    // Check if we need to navigate to the workflow URL
+    const currentUrl = tab.url;
+    if (workflowData.url && currentUrl !== workflowData.url) {
+      const navigate = confirm(`This workflow was recorded on:\n${workflowData.url}\n\nNavigate there now?`);
+      if (navigate) {
+        await chrome.tabs.update(tab.id, { url: workflowData.url });
+        // Wait for navigation to complete
+        await new Promise(resolve => {
+          chrome.tabs.onUpdated.addListener(function listener(tabId, info) {
+            if (tabId === tab.id && info.status === 'complete') {
+              chrome.tabs.onUpdated.removeListener(listener);
+              resolve();
+            }
+          });
+        });
+        // Give the page a moment to settle
+        await new Promise(resolve => setTimeout(resolve, 1000));
+      }
+    }
+    
+    // Send workflow to content script for playback
+    chrome.tabs.sendMessage(tab.id, {
+      action: 'playWorkflow',
+      workflow: workflowData,
+      actions: workflowData.actions
+    }, (response) => {
+      if (chrome.runtime.lastError) {
+        console.error('Error playing workflow:', chrome.runtime.lastError);
+        // Try to inject content script if it's not already loaded
+        chrome.scripting.executeScript({
+          target: { tabId: tab.id },
+          files: ['content.js']
+        }, () => {
+          if (chrome.runtime.lastError) {
+            console.error('Failed to inject content script:', chrome.runtime.lastError);
+            alert('Failed to start workflow playback. Please reload the page and try again.');
+            return;
+          }
+          // Try sending message again after injection
+          setTimeout(() => {
+            chrome.tabs.sendMessage(tab.id, {
+              action: 'playWorkflow',
+              workflow: workflowData,
+              actions: workflowData.actions
+            });
+          }, 100);
+        });
+      } else if (response && response.success) {
+        console.log('Workflow playback started');
+      }
+    });
+  } catch (error) {
+    console.error('Error playing workflow:', error);
+    alert('Error playing workflow: ' + error.message);
+  }
+}
+
+// Function to export a workflow
+async function exportWorkflow(sessionId) {
+  // Check server for workflow data
+  const ports = CONFIG_PORTS;
+  for (const port of ports) {
+    try {
+      const response = await fetch(`http://localhost:${port}/chromedebug/workflow-recording/${sessionId}`);
+      if (response.ok) {
+        const data = await response.json();
+        
+        // Create and download JSON file
+        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `workflow_${sessionId}_${Date.now()}.json`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        
+        break; // Found working server
+      }
+    } catch (error) {
+      console.error(`Failed to export workflow from port ${port}:`, error);
+    }
+  }
+}
+
+// Function to delete a workflow recording
+async function deleteWorkflowRecording(recordingId) {
+  if (!confirm('Are you sure you want to delete this workflow recording?')) {
+    return;
+  }
+  
+  // Delete from server
+  const ports = CONFIG_PORTS;
+  for (const port of ports) {
+    try {
+      const response = await fetch(`http://localhost:${port}/chromedebug/workflow-recording/${recordingId}`, {
+        method: 'DELETE'
+      });
+      
+      if (response.ok) {
+        // Reload the list
+        loadWorkflowRecordings();
+        break; // Found working server
+      }
+    } catch (error) {
+      console.error(`Failed to delete workflow from port ${port}:`, error);
+    }
+  }
+}
+
+// Function to load and display screen recordings
+async function loadScreenRecordings() {
+  const recordingsList = document.getElementById('recordingsList');
+  const recordingsContainer = document.getElementById('recordingsContainer');
+  
+  if (!recordingsList || !recordingsContainer) {
+    return;
+  }
+  
+  // Clear existing items
+  recordingsContainer.innerHTML = '';
+  
+  // Check server for screen recordings
+  const ports = CONFIG_PORTS;
+  for (const port of ports) {
+    try {
+      const response = await fetch(`http://localhost:${port}/chromedebug/frame-sessions`);
+      if (response.ok) {
+        const data = await response.json();
+        if (data && data.length > 0) {
+          recordingsList.style.display = 'block';
+          
+          // Display each screen recording
+          data.forEach(recording => {
+            const recordingItem = document.createElement('div');
+            recordingItem.className = 'recording-item';
+
+            const date = new Date(recording.timestamp);
+            const formattedDate = date.toLocaleString();
+
+            // Use session name if available, otherwise use session ID
+            console.log('Recording data:', recording);
+            console.log('Recording name:', recording.name);
+            const displayName = recording.name || `Recording ${recording.sessionId}`;
+            console.log('Display name:', displayName);
+
+            recordingItem.innerHTML = `
+              <div class="recording-info">
+                <div style="font-weight: bold; margin-bottom: 4px;">${displayName}</div>
+                <div style="color: #666; font-size: 11px;">
+                  ${recording.totalFrames} frames • ${formattedDate}
+                </div>
+              </div>
+              <div class="recording-buttons">
+                <button class="copy-id-btn" data-session-id="${recording.sessionId}" style="padding: 4px 8px; background: #2196F3; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
+                  Copy ID
+                </button>
+                <button class="delete-btn" data-session-id="${recording.sessionId}" style="padding: 4px 8px; background: #f44336; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
+                  Delete
+                </button>
+              </div>
+            `;
+            
+            // Add event listeners
+            const copyIdBtn = recordingItem.querySelector('.copy-id-btn');
+            const deleteBtn = recordingItem.querySelector('.delete-btn');
+            
+            copyIdBtn.addEventListener('click', () => {
+              navigator.clipboard.writeText(recording.sessionId).then(() => {
+                copyIdBtn.textContent = 'Copied!';
+                copyIdBtn.style.background = '#4CAF50';
+                setTimeout(() => {
+                  copyIdBtn.textContent = 'Copy ID';
+                  copyIdBtn.style.background = '#2196F3';
+                }, 2000);
+              });
+            });
+            
+            deleteBtn.addEventListener('click', async () => {
+              if (confirm('Are you sure you want to delete this screen recording?')) {
+                try {
+                  const deleteResponse = await fetch(`http://localhost:${port}/chromedebug/recording/${recording.sessionId}`, {
+                    method: 'DELETE'
+                  });
+                  
+                  if (deleteResponse.ok) {
+                    // Reload the list
+                    loadScreenRecordings();
+                  }
+                } catch (error) {
+                  console.error('Failed to delete recording:', error);
+                }
+              }
+            });
+            
+            recordingsContainer.appendChild(recordingItem);
+          });
+        } else {
+          recordingsList.style.display = 'none';
+        }
+        break; // Found working server
+      }
+    } catch (error) {
+      console.error(`Failed to load screen recordings from port ${port}:`, error);
+    }
+  }
+}
+
+/*
+ * SNAPSHOT FEATURE DISABLED (2025-10-01)
+ *
+ * This function loaded and displayed snapshot list in the popup UI.
+ *
+ * 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
+ *
+ * TO RE-ENABLE:
+ * 1. Implement privacy-conscious always-on log monitoring
+ * 2. Uncomment this function
+ * 3. Re-enable backend /chromedebug/snapshots endpoint
+ * 4. Re-enable snapshot UI in popup.html
+ *
+ * See: SNAPSHOT_FEATURE_DISABLED.md for full explanation
+ */
+/*
+async function loadSnapshots() {
+  const snapshotsList = document.getElementById('snapshotsList');
+  const snapshotsContainer = document.getElementById('snapshotsContainer');
+
+  if (!snapshotsList || !snapshotsContainer) {
+    return;
+  }
+
+  // Clear existing items
+  snapshotsContainer.innerHTML = '';
+
+  // Check server for snapshots
+  const ports = CONFIG_PORTS;
+  for (const port of ports) {
+    try {
+      const response = await fetch(`http://localhost:${port}/chromedebug/snapshots`);
+      if (response.ok) {
+        const data = await response.json();
+        if (data && data.snapshots && data.snapshots.length > 0) {
+          snapshotsList.style.display = 'block';
+
+          // Display each snapshot
+          data.snapshots.forEach(snapshot => {
+            const snapshotItem = document.createElement('div');
+            snapshotItem.className = 'recording-item';
+
+            const date = new Date(snapshot.timestamp);
+            const formattedDate = date.toLocaleString();
+
+            // Build note display
+            const noteDisplay = snapshot.user_note
+              ? `<div style="color: #666; font-size: 11px; margin-top: 2px;">Note: ${snapshot.user_note}</div>`
+              : '';
+
+            snapshotItem.innerHTML = `
+              <div class="recording-info">
+                <div style="font-weight: bold; margin-bottom: 4px;">Snapshot ${snapshot.session_id}</div>
+                <div style="color: #666; font-size: 11px;">
+                  ${formattedDate}
+                </div>
+                ${noteDisplay}
+              </div>
+              <div class="recording-buttons">
+                <button class="copy-id-btn" data-session-id="${snapshot.session_id}" style="padding: 4px 8px; background: #2196F3; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
+                  Copy ID
+                </button>
+                <button class="copy-prompt-btn" data-session-id="${snapshot.session_id}" style="padding: 4px 8px; background: #9C27B0; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
+                  Copy Prompt
+                </button>
+                <button class="view-btn" data-session-id="${snapshot.session_id}" style="padding: 4px 8px; background: #4CAF50; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
+                  View
+                </button>
+                <button class="delete-btn" data-session-id="${snapshot.session_id}" style="padding: 4px 8px; background: #f44336; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
+                  Delete
+                </button>
+              </div>
+            `;
+
+            // Add event listeners
+            const copyIdBtn = snapshotItem.querySelector('.copy-id-btn');
+            const copyPromptBtn = snapshotItem.querySelector('.copy-prompt-btn');
+            const viewBtn = snapshotItem.querySelector('.view-btn');
+            const deleteBtn = snapshotItem.querySelector('.delete-btn');
+
+            copyIdBtn.addEventListener('click', () => {
+              navigator.clipboard.writeText(snapshot.session_id).then(() => {
+                copyIdBtn.textContent = 'Copied!';
+                copyIdBtn.style.background = '#4CAF50';
+                setTimeout(() => {
+                  copyIdBtn.textContent = 'Copy ID';
+                  copyIdBtn.style.background = '#2196F3';
+                }, 2000);
+              });
+            });
+
+            copyPromptBtn.addEventListener('click', () => {
+              const prompt = `Please analyze this snapshot: ${snapshot.session_id}`;
+              navigator.clipboard.writeText(prompt).then(() => {
+                copyPromptBtn.textContent = 'Copied!';
+                copyPromptBtn.style.background = '#4CAF50';
+                setTimeout(() => {
+                  copyPromptBtn.textContent = 'Copy Prompt';
+                  copyPromptBtn.style.background = '#9C27B0';
+                }, 2000);
+              });
+            });
+
+            viewBtn.addEventListener('click', async () => {
+              try {
+                // Snapshots are single-frame recordings, so get frame 0
+                const frameResponse = await fetch(`http://localhost:${port}/chromedebug/frame/${snapshot.session_id}/0`);
+                if (frameResponse.ok) {
+                  const frameData = await frameResponse.json();
+                  const logsCount = frameData.logs?.length || 0;
+                  const noteText = snapshot.user_note ? `\nNote: ${snapshot.user_note}` : '';
+                  alert(`Snapshot ${snapshot.session_id}${noteText}\n\nConsole Logs: ${logsCount} entries\n\nUse "Copy ID" to share with Claude Code for detailed analysis.`);
+                }
+              } catch (error) {
+                console.error('Failed to load snapshot details:', error);
+                alert('Failed to load snapshot details. Please try again.');
+              }
+            });
+
+            deleteBtn.addEventListener('click', async () => {
+              if (confirm('Are you sure you want to delete this snapshot?')) {
+                try {
+                  const deleteResponse = await fetch(`http://localhost:${port}/chromedebug/recording/${snapshot.session_id}`, {
+                    method: 'DELETE'
+                  });
+
+                  if (deleteResponse.ok) {
+                    // Reload the list
+                    loadSnapshots();
+                  }
+                } catch (error) {
+                  console.error('Failed to delete snapshot:', error);
+                }
+              }
+            });
+
+            snapshotsContainer.appendChild(snapshotItem);
+          });
+        } else {
+          snapshotsList.style.display = 'none';
+        }
+        break; // Found working server
+      }
+    } catch (error) {
+      console.error(`Failed to load snapshots from port ${port}:`, error);
+    }
+  }
+}
+*/
+
+// Listen for storage changes
+chrome.storage.onChanged.addListener((changes, namespace) => {
+  if (namespace === 'local') {
+    if (changes.recordingActive && !isStoppingRecording) {
+      isRecording = changes.recordingActive.newValue === true;
+      if (changes.recordingStartTime) {
+        recordingStartTime = changes.recordingStartTime.newValue;
+      }
+      updateRecordingUI();
+    }
+    if (changes.workflowRecording) {
+      isWorkflowRecording = changes.workflowRecording.newValue === true;
+      updateWorkflowRecordingUI();
+    }
+  }
+});
+
+// Listen for messages from background script
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  console.log('Popup received message:', request);
+  if (request.action === 'uploadComplete') {
+    console.log('Upload complete with ID:', request.recordingId);
+    const recordingStatus = document.getElementById('recordingStatus');
+    if (recordingStatus) {
+      recordingStatus.innerHTML = `<strong style="color: #4CAF50;">Recording saved!</strong>`;
+    }
+    // Add to recordings list
+    addRecording(request.recordingId);
+    // Clear status after 3 seconds
+    setTimeout(() => {
+      if (recordingStatus) recordingStatus.textContent = '';
+    }, 3000);
+  } else if (request.action === 'sessionComplete') {
+    console.log('Session complete:', request.sessionId, 'with', request.totalChunks, 'chunks');
+    const recordingStatus = document.getElementById('recordingStatus');
+    if (recordingStatus) {
+      recordingStatus.innerHTML = `<strong style="color: #4CAF50;">Recording session saved!</strong><br>` +
+                                   `<small>${request.totalChunks} chunks (${Math.round(request.duration / 1000)}s)</small>`;
+    }
+    // Add session to recordings list
+    addRecording(request.sessionId, true);
+    // Clear status after 5 seconds
+    setTimeout(() => {
+      if (recordingStatus) recordingStatus.textContent = '';
+    }, 5000);
+  } else if (request.action === 'frameSessionComplete') {
+    console.log('Frame session complete:', request.sessionId, 'with', request.totalFrames, 'frames');
+    const recordingStatus = document.getElementById('recordingStatus');
+    if (recordingStatus) {
+      recordingStatus.innerHTML = `<strong style="color: #4CAF50;">Recording saved!</strong><br>` +
+                                   `<small>${request.totalFrames} frames (${Math.round(request.duration / 1000)}s)</small>`;
+    }
+    // Add frame session to recordings list
+    addRecording(request.sessionId, false, true, request.serverPort, null, request.sessionName);
+    // Clear status after 5 seconds
+    setTimeout(() => {
+      if (recordingStatus) recordingStatus.textContent = '';
+    }, 5000);
+  } else if (request.action === 'uploadError') {
+    const recordingStatus = document.getElementById('recordingStatus');
+    if (recordingStatus) {
+      recordingStatus.innerHTML = `<strong style="color: #f44336;">Upload error:</strong> ${request.error}`;
+    }
+    setTimeout(() => {
+      if (recordingStatus) recordingStatus.textContent = '';
+    }, 5000);
+  }
+});