@dynamicu/chromedebug-mcp 2.6.6 → 2.6.7

package/chrome-extension/popup.js

@@ -46,6 +46,69 @@ let workflowStartTime = null;
 // Debounce timer for screenshot quality slider
 let screenshotQualityDebounceTimer = null;
 
+// Toast notification function
+function showToast(message, duration = 2000, type = 'info') {
+  // Create toast element
+  const toast = document.createElement('div');
+  toast.className = `toast toast-${type}`;
+  toast.textContent = message;
+  toast.style.cssText = `
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    padding: 12px 20px;
+    background: ${type === 'error' ? '#f44336' : type === 'success' ? '#4CAF50' : '#2196F3'};
+    color: white;
+    border-radius: 4px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+    z-index: 10000;
+    font-size: 14px;
+    animation: slideInRight 0.3s ease-out;
+  `;
+
+  document.body.appendChild(toast);
+
+  // Auto remove after duration
+  setTimeout(() => {
+    toast.style.animation = 'slideOutRight 0.3s ease-in';
+    setTimeout(() => toast.remove(), 300);
+  }, duration);
+}
+
+// Loading overlay helper functions
+function showSectionLoading(sectionId, message = 'Loading...') {
+  console.log(`showSectionLoading called for: ${sectionId} with message: ${message}`);
+  const section = document.getElementById(sectionId);
+  if (!section) {
+    console.error(`Section not found: ${sectionId}`);
+    return;
+  }
+  console.log(`Section found:`, section);
+
+  // Remove any existing overlay first
+  hideSectionLoading(sectionId);
+
+  const overlay = document.createElement('div');
+  overlay.className = 'recording-section-overlay';
+  overlay.innerHTML = `
+    <div class="spinner"></div>
+    <div class="loading-text">${message}</div>
+  `;
+  overlay.setAttribute('data-loading-overlay', 'true');
+  section.appendChild(overlay);
+  console.log(`Overlay appended to section. Overlay:`, overlay);
+}
+
+function hideSectionLoading(sectionId) {
+  const section = document.getElementById(sectionId);
+  if (!section) return;
+
+  const overlay = section.querySelector('[data-loading-overlay="true"]');
+  if (overlay) {
+    overlay.remove();
+  }
+}
+
 // Workflow recording functions
 function updateWorkflowRecordingUI() {
   const workflowBtn = document.getElementById('workflowRecordBtn');
@@ -319,10 +382,13 @@ async function checkServerStatus() {
       });
 
       clearTimeout(timeoutId);
-      console.log(`[popup.js] Port ${port} responded: ${response.ok}`);
+      // Only log successful connections to reduce console noise
+      if (response.ok) {
+        console.log(`[popup.js] ✓ Connected to server on port ${port}`);
+      }
       return response.ok;
     } catch (error) {
-      console.log(`[popup.js] Port ${port} failed:`, error.message);
+      // Silent failure - port discovery is expected to fail for most ports
       return false;
     }
   };
@@ -333,7 +399,6 @@ async function checkServerStatus() {
     if (await tryPort(cachedPort.lastSuccessfulPort, 500)) {
       connected = true;
       connectedPort = cachedPort.lastSuccessfulPort;
-      console.log(`[popup.js] Connected to cached port ${connectedPort}`);
     }
   }
 
@@ -344,7 +409,6 @@ async function checkServerStatus() {
       if (await tryPort(port, 500)) {
         connected = true;
         connectedPort = port;
-        console.log(`[popup.js] Connected to common port ${connectedPort}`);
         break;
       }
     }
@@ -356,7 +420,6 @@ async function checkServerStatus() {
       if (await tryPort(port, 1000)) {
         connected = true;
         connectedPort = port;
-        console.log(`[popup.js] Connected to extended port ${connectedPort}`);
         break;
       }
     }
@@ -368,7 +431,6 @@ async function checkServerStatus() {
       if (await tryPort(port, 1000)) {
         connected = true;
         connectedPort = port;
-        console.log(`[popup.js] Connected to alternative port ${connectedPort}`);
         break;
       }
     }
@@ -377,6 +439,8 @@ async function checkServerStatus() {
   // Cache the successful port for faster connection next time
   if (connected && connectedPort) {
     await chrome.storage.local.set({ lastSuccessfulPort: connectedPort });
+  } else {
+    console.log('[popup.js] No server found - browser-only mode active');
   }
 
   if (connected) {
@@ -902,7 +966,16 @@ function updateRecordingsDisplay(recordings) {
       const recordingId = e.target.getAttribute('data-id');
       const type = e.target.getAttribute('data-type');
 
-      // Check if pro version (frame editor) is available
+      // First check if server is available (for server recordings)
+      const serverStatus = await checkServerStatus();
+
+      if (!serverStatus.connected) {
+        // No server - this is a server recording that requires server to view
+        alert('This recording requires Chrome Debug server to view.\n\nStart the server with: chromedebug-mcp-server\n\nOr delete this old recording and create new browser-only recordings with Export functionality.');
+        return;
+      }
+
+      // Server available - check if pro version (frame editor) is available
       try {
         const frameEditorUrl = type === 'snapshot'
           ? chrome.runtime.getURL(`pro/frame-editor.html?sessionId=${recordingId}&type=snapshot`)
@@ -1016,8 +1089,9 @@ async function showInlineActivationManager(licenseKey) {
     activationsList.innerHTML = '<div style="padding: 15px; text-align: center; color: #666;">Loading activations...</div>';
 
     // Get current instance ID
-    const stored = await chrome.storage.local.get(['chromedebug_instance_id']);
-    const currentInstanceId = stored.chromedebug_instance_id;
+    // Note: ls_instance_id is the LemonSqueezy instance ID set during activation
+    const stored = await chrome.storage.local.get(['ls_instance_id']);
+    const currentInstanceId = stored.ls_instance_id;
 
     // Fetch activations from Firebase
     const data = await licenseClient.listActivations(licenseKey);
@@ -1063,7 +1137,8 @@ function renderInlineActivations(activations, currentInstanceId, licenseKey) {
     item.onmouseleave = () => item.style.background = isCurrentDevice ? '#e8f5e9' : 'white';
 
     // Check if this is the current device
-    const isCurrentDevice = activation.name === currentInstanceId || activation.identifier === currentInstanceId;
+    // Compare against identifier (unique per activation), not name (same for all activations from this device)
+    const isCurrentDevice = currentInstanceId && activation.identifier === currentInstanceId;
 
     if (isCurrentDevice) {
       item.style.background = '#e8f5e9';
@@ -1282,18 +1357,37 @@ document.addEventListener('DOMContentLoaded', () => {
     const serverStatus = await checkServerStatus();
     const recordBtn = document.getElementById('recordBtn');
     const workflowRecordBtn = document.getElementById('workflowRecordBtn');
-    
+    const browserOnlyBanner = document.getElementById('browserOnlyBanner');
+    const quotaMeter = document.getElementById('quotaMeter');
+
     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';
+      // Show browser-only mode UI
+      if (browserOnlyBanner) {
+        browserOnlyBanner.style.display = 'block';
+      }
+      if (quotaMeter) {
+        quotaMeter.style.display = 'block';
+        updateQuotaUI(); // Update quota display
+      }
+
+      // Enable recording buttons in browser-only mode
+      if (recordBtn) {
+        recordBtn.style.opacity = '1';
+        recordBtn.title = 'Recording will be stored in browser storage';
       }
-      if (workflowRecordBtn && !isWorkflowRecording) {
-        workflowRecordBtn.style.opacity = '0.6';
-        workflowRecordBtn.title = 'Server not running - please start Chrome Debug server';
+      if (workflowRecordBtn) {
+        workflowRecordBtn.style.opacity = '1';
+        workflowRecordBtn.title = 'Recording will be stored in browser storage';
       }
     } else {
+      // Hide browser-only mode UI when server is connected
+      if (browserOnlyBanner) {
+        browserOnlyBanner.style.display = 'none';
+      }
+      if (quotaMeter) {
+        quotaMeter.style.display = 'none';
+      }
+
       // Enable recording buttons when server is running
       if (recordBtn) {
         recordBtn.style.opacity = '1';
@@ -1305,11 +1399,127 @@ document.addEventListener('DOMContentLoaded', () => {
       }
     }
   }
+
+  // Update quota UI for browser-only mode
+  async function updateQuotaUI() {
+    try {
+      // Request quota info from background script
+      const response = await chrome.runtime.sendMessage({
+        action: 'getQuotaInfo'
+      });
+
+      if (response && response.quotaInfo) {
+        const { percentage, usageMB, quotaMB, availableMB } = response.quotaInfo;
+
+        const quotaBar = document.getElementById('quotaBar');
+        const quotaText = document.getElementById('quotaText');
+        const quotaAvailable = document.getElementById('quotaAvailable');
+        const quotaUsage = document.getElementById('quotaUsage');
+
+        if (quotaBar && quotaText && quotaAvailable) {
+          const percentageValue = Math.round(percentage * 100);
+          quotaBar.style.width = `${percentageValue}%`;
+
+          // Change color based on usage
+          if (percentage > 0.8) {
+            quotaBar.style.background = '#f44336'; // Red
+          } else if (percentage > 0.6) {
+            quotaBar.style.background = '#ff9800'; // Orange
+          } else {
+            quotaBar.style.background = '#4CAF50'; // Green
+          }
+
+          quotaText.textContent = `${percentageValue}% used`;
+          quotaAvailable.textContent = `${availableMB || 0} MB available`;
+        }
+
+        if (quotaUsage) {
+          quotaUsage.textContent = `${usageMB || 0} MB / ${quotaMB || 0} MB`;
+        }
+      }
+    } catch (error) {
+      console.error('Failed to update quota UI:', error);
+    }
+  }
   
-  // Initialize server status check
-  updateButtonStatesForServerStatus();
-  setInterval(updateButtonStatesForServerStatus, 3000);
-  
+  // Server polling control
+  let serverPollingInterval = null;
+
+  function startPolling() {
+    if (serverPollingInterval) {
+      clearInterval(serverPollingInterval);
+    }
+    serverPollingInterval = setInterval(updateButtonStatesForServerStatus, 3000);
+    console.log('Server polling started (every 3 seconds)');
+  }
+
+  function stopPolling() {
+    if (serverPollingInterval) {
+      clearInterval(serverPollingInterval);
+      serverPollingInterval = null;
+      console.log('Server polling stopped');
+    }
+  }
+
+  async function checkServerOnce() {
+    console.log('Running single server check...');
+    await updateButtonStatesForServerStatus();
+  }
+
+  // Initialize polling controls
+  const pollContinuouslyCheckbox = document.getElementById('pollContinuouslyCheckbox');
+  const retryConnectionBtn = document.getElementById('retryConnectionBtn');
+
+  if (pollContinuouslyCheckbox && retryConnectionBtn) {
+    // Load saved polling preference (default: true)
+    chrome.storage.local.get(['pollContinuously'], (result) => {
+      const shouldPoll = result.pollContinuously !== false; // Default to true
+      pollContinuouslyCheckbox.checked = shouldPoll;
+
+      // Show/hide retry button based on preference
+      retryConnectionBtn.style.display = shouldPoll ? 'none' : 'inline-block';
+
+      // Initial server check
+      updateButtonStatesForServerStatus();
+
+      // Start polling if enabled
+      if (shouldPoll) {
+        startPolling();
+      }
+    });
+
+    // Checkbox change handler
+    pollContinuouslyCheckbox.addEventListener('change', () => {
+      const isChecked = pollContinuouslyCheckbox.checked;
+
+      // Save preference
+      chrome.storage.local.set({ pollContinuously: isChecked });
+
+      // Show/hide retry button
+      retryConnectionBtn.style.display = isChecked ? 'none' : 'inline-block';
+
+      // Start or stop polling
+      if (isChecked) {
+        startPolling();
+      } else {
+        stopPolling();
+      }
+
+      console.log('Continuous polling:', isChecked ? 'enabled' : 'disabled');
+    });
+
+    // Retry button click handler
+    retryConnectionBtn.addEventListener('click', () => {
+      showToast('Retrying connection...', 2000, 'info');
+      checkServerOnce();
+    });
+  } else {
+    // Fallback if polling controls not found - use default behavior
+    console.warn('Polling controls not found, using default polling behavior');
+    updateButtonStatesForServerStatus();
+    setInterval(updateButtonStatesForServerStatus, 3000);
+  }
+
   // Initialize site management functionality
   initializeSiteManagement();
   
@@ -1414,9 +1624,13 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
   });
-  
-  // Load saved recordings
+
+  // Load saved recordings (legacy)
   loadRecordings();
+
+  // Load screen and workflow recordings with saved preferences
+  loadScreenRecordings();
+  loadWorkflowRecordings();
   
   // Setup recording settings event listeners
   const frameRateSelect = document.getElementById('frameRate');
@@ -1488,19 +1702,15 @@ document.addEventListener('DOMContentLoaded', () => {
         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;
+          const isBrowserOnlyMode = !serverStatus.connected;
+
+          if (isBrowserOnlyMode) {
+            console.log('Starting recording in browser-only mode');
+            // Browser-only mode - proceed with local storage
+          } else {
+            console.log('Starting recording with server');
           }
-          
+
           // Get the current active tab
           const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
           console.log('Current tab:', tab);
@@ -1531,10 +1741,11 @@ document.addEventListener('DOMContentLoaded', () => {
           };
           
           // Send message to background to start recording
-          chrome.runtime.sendMessage({ 
-            action: 'startRecording', 
+          chrome.runtime.sendMessage({
+            action: 'startRecording',
             tabId: tab.id,
-            settings: settings
+            settings: settings,
+            mode: isBrowserOnlyMode ? 'browser-only' : 'server'
           }, (response) => {
             recordBtn.disabled = false;
             
@@ -1574,23 +1785,47 @@ document.addEventListener('DOMContentLoaded', () => {
         recordBtn.textContent = 'Stopping...';
         recordBtn.disabled = true;
         
-        chrome.runtime.sendMessage({ 
+        chrome.runtime.sendMessage({
           action: 'stopRecording'
-        }, (response) => {
+        }, async (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');
+            console.log('Recording stopped successfully', response);
             isRecording = false;
             updateRecordingUI();
+
+            console.log('About to show loading overlay for screen-recording-section');
+            // Show loading overlay over screen recording section
+            showSectionLoading('screen-recording-section', 'Saving screen recording...');
+            console.log('Loading overlay should be visible now');
+
+            // Use then/catch instead of async/await since we're in a callback
+            loadScreenRecordings(true)
+              .then(() => {
+                console.log('Screen recordings loaded successfully');
+                // Show success toast
+                const frameCount = response.frameCount || 0;
+                const duration = response.duration || '0s';
+                showToast(`Screen recording saved! ${frameCount} frames (${duration})`, 3000, 'success');
+              })
+              .catch(error => {
+                console.error('Error loading screen recordings:', error);
+                showToast('Error loading recordings. Please refresh.', 3000, 'error');
+              })
+              .finally(() => {
+                console.log('Hiding loading overlay');
+                // Always hide loading overlay
+                hideSectionLoading('screen-recording-section');
+              });
           } else {
             recordingStatus.textContent = 'Error: ' + (response?.error || 'Failed to stop recording');
             recordBtn.textContent = 'Stop Recording';
@@ -1822,86 +2057,29 @@ document.addEventListener('DOMContentLoaded', () => {
             if (response && response.success && response.workflow) {
               isWorkflowRecording = false;
               // Clear state from storage
-              chrome.storage.local.set({ 
+              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
+
+              // Show loading overlay over workflow recording section
+              showSectionLoading('workflow-recording-section', 'Saving workflow recording...');
+
+              try {
+                // Single source of truth - load from server
+                await loadWorkflowRecordings(true);
+
+                // Show success toast
                 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);
+                const actionCount = workflowData?.workflow?.actions?.length || workflowData?.workflow?.length || 0;
+                showToast(`Workflow recording saved! ${actionCount} actions recorded`, 3000, 'success');
+              } catch (error) {
+                console.error('Error loading workflow recordings:', error);
+                showToast('Error loading recordings. Please refresh.', 3000, 'error');
+              } finally {
+                // Always hide loading overlay
+                hideSectionLoading('workflow-recording-section');
               }
             }
           });
@@ -2193,34 +2371,46 @@ document.addEventListener('DOMContentLoaded', () => {
   const viewScreenRecordingsLink = document.getElementById('viewScreenRecordings');
   
   if (viewWorkflowRecordingsLink) {
-    viewWorkflowRecordingsLink.addEventListener('click', (e) => {
+    viewWorkflowRecordingsLink.addEventListener('click', async (e) => {
       e.preventDefault();
       const workflowRecordingsList = document.getElementById('workflowRecordingsList');
       if (workflowRecordingsList) {
         if (workflowRecordingsList.style.display === 'none' || workflowRecordingsList.style.display === '') {
+          // Show recordings
           workflowRecordingsList.style.display = 'block';
-          loadWorkflowRecordings();
+          await loadWorkflowRecordings();
           viewWorkflowRecordingsLink.textContent = 'Hide Recordings';
+          // Save preference
+          await chrome.storage.local.set({ workflowRecordingsVisible: true });
         } else {
+          // Hide recordings
           workflowRecordingsList.style.display = 'none';
           viewWorkflowRecordingsLink.textContent = 'View Past Recordings';
+          // Save preference
+          await chrome.storage.local.set({ workflowRecordingsVisible: false });
         }
       }
     });
   }
   
   if (viewScreenRecordingsLink) {
-    viewScreenRecordingsLink.addEventListener('click', (e) => {
+    viewScreenRecordingsLink.addEventListener('click', async (e) => {
       e.preventDefault();
       const recordingsList = document.getElementById('recordingsList');
       if (recordingsList) {
         if (recordingsList.style.display === 'none') {
-          loadScreenRecordings();
+          // Show recordings
+          await loadScreenRecordings();
           recordingsList.style.display = 'block';
           viewScreenRecordingsLink.textContent = 'Hide Recordings';
+          // Save preference
+          await chrome.storage.local.set({ screenRecordingsVisible: true });
         } else {
+          // Hide recordings
           recordingsList.style.display = 'none';
           viewScreenRecordingsLink.textContent = 'View Past Recordings';
+          // Save preference
+          await chrome.storage.local.set({ screenRecordingsVisible: false });
         }
       }
     });
@@ -2261,16 +2451,19 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 // Function to load and display workflow recordings
-async function loadWorkflowRecordings() {
+async function loadWorkflowRecordings(autoShow = false) {
   const workflowRecordingsList = document.getElementById('workflowRecordingsList');
   const workflowRecordingsContainer = document.getElementById('workflowRecordingsContainer');
-  
+  const viewWorkflowRecordingsLink = document.getElementById('viewWorkflowRecordings');
+
   if (!workflowRecordingsList || !workflowRecordingsContainer) {
     return;
   }
-  
+
   // Clear existing items
   workflowRecordingsContainer.innerHTML = '';
+
+  let hasRecordings = false;
   
   // Check server for workflow recordings
   const ports = CONFIG_PORTS;
@@ -2283,8 +2476,9 @@ async function loadWorkflowRecordings() {
         
         // Handle both data.recordings and direct array response
         const recordings = data.recordings || data;
-        
+
         if (Array.isArray(recordings) && recordings.length > 0) {
+          hasRecordings = true;
           // Display each workflow recording
           recordings.forEach(recording => {
             const workflowItem = document.createElement('div');
@@ -2303,12 +2497,18 @@ async function loadWorkflowRecordings() {
                 ${recording.screenshot_settings ? '<div style="color: #2196F3; font-size: 10px;">&#128248; Screenshots included</div>' : ''}
               </div>
               <div class="recording-buttons">
+                <button class="copy-id-btn" data-session-id="${recording.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="${recording.session_id}" data-name="${recording.name || ''}" style="padding: 4px 8px; background: #4CAF50; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
+                  Copy Prompt
+                </button>
+                <button class="view-btn" data-session-id="${recording.session_id}" style="padding: 4px 8px; background: #9C27B0; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
+                  View
+                </button>
                 <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>
@@ -2316,17 +2516,29 @@ async function loadWorkflowRecordings() {
             `;
             
             // Add event listeners
+            const copyIdBtn = workflowItem.querySelector('.copy-id-btn');
+            const copyPromptBtn = workflowItem.querySelector('.copy-prompt-btn');
+            const viewBtn = workflowItem.querySelector('.view-btn');
             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', () => {
+
+            copyIdBtn.addEventListener('click', () => {
+              navigator.clipboard.writeText(recording.session_id).then(() => {
+                copyIdBtn.textContent = 'Copied!';
+                copyIdBtn.style.background = '#4CAF50';
+                setTimeout(() => {
+                  copyIdBtn.textContent = 'Copy ID';
+                  copyIdBtn.style.background = '#2196F3';
+                }, 2000);
+              });
+            });
+
+            copyPromptBtn.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}.`;
@@ -2334,16 +2546,26 @@ async function loadWorkflowRecordings() {
                 // 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';
+                copyPromptBtn.textContent = 'Copied!';
+                const originalBg = copyPromptBtn.style.background;
+                copyPromptBtn.style.background = '#4CAF50';
                 setTimeout(() => {
-                  getPromptBtn.textContent = 'Get Prompt';
-                  getPromptBtn.style.background = '#2196F3';
+                  copyPromptBtn.textContent = 'Copy Prompt';
+                  copyPromptBtn.style.background = originalBg;
                 }, 2000);
               });
             });
+
+            viewBtn.addEventListener('click', async () => {
+              // Open frame editor in workflow mode
+              const frameEditorUrl = chrome.runtime.getURL(`pro/frame-editor.html?sessionId=${recording.session_id}&type=workflow`);
+              chrome.tabs.create({ url: frameEditorUrl });
+            });
+
+            playBtn.addEventListener('click', () => playWorkflow(recording.session_id));
+
             deleteBtn.addEventListener('click', () => {
               console.log('Delete clicked for recording:', recording);
               const recordingId = recording.id || recording.session_id;
@@ -2378,6 +2600,27 @@ async function loadWorkflowRecordings() {
     errorMsg.textContent = 'Could not connect to Chrome Debug server';
     workflowRecordingsContainer.appendChild(errorMsg);
   }
+
+  // Handle visibility based on recordings and user preference
+  if (!hasRecordings) {
+    workflowRecordingsList.style.display = 'none';
+  } else {
+    // Get user's saved preference
+    const prefs = await chrome.storage.local.get(['workflowRecordingsVisible']);
+    const shouldShow = autoShow || (prefs.workflowRecordingsVisible !== false); // Default to true
+
+    if (shouldShow) {
+      workflowRecordingsList.style.display = 'block';
+      if (viewWorkflowRecordingsLink) {
+        viewWorkflowRecordingsLink.textContent = 'Hide Recordings';
+      }
+    } else {
+      workflowRecordingsList.style.display = 'none';
+      if (viewWorkflowRecordingsLink) {
+        viewWorkflowRecordingsLink.textContent = 'View Past Recordings';
+      }
+    }
+  }
 }
 
 // Function to play a workflow
@@ -2526,18 +2769,147 @@ async function deleteWorkflowRecording(recordingId) {
 }
 
 // Function to load and display screen recordings
-async function loadScreenRecordings() {
+async function loadScreenRecordings(autoShow = false) {
   const recordingsList = document.getElementById('recordingsList');
   const recordingsContainer = document.getElementById('recordingsContainer');
-  
+  const viewScreenRecordingsLink = document.getElementById('viewScreenRecordings');
+
   if (!recordingsList || !recordingsContainer) {
     return;
   }
-  
+
   // Clear existing items
   recordingsContainer.innerHTML = '';
-  
-  // Check server for screen recordings
+
+  let hasRecordings = false;
+
+  // First, load browser-only recordings from IndexedDB
+  try {
+    console.log('[Popup] Requesting browser-only recordings...');
+    const browserRecordings = await chrome.runtime.sendMessage({
+      action: 'getBrowserRecordings'
+    });
+    console.log('[Popup] Browser recordings received:', browserRecordings);
+
+    if (browserRecordings && browserRecordings.length > 0) {
+      hasRecordings = true;
+      recordingsList.style.display = 'block';
+
+      // Display each browser-only recording
+      browserRecordings.forEach(recording => {
+        const recordingItem = document.createElement('div');
+        recordingItem.className = 'recording-item';
+
+        const date = new Date(recording.startTime);
+        const formattedDate = date.toLocaleString();
+        const displayName = recording.title || `Recording ${recording.sessionId}`;
+
+        recordingItem.innerHTML = `
+          <div class="recording-info">
+            <div class="recording-id" title="${recording.sessionId}">
+              <span class="recording-id-text">🌐 ${displayName}</span>
+              <span style="font-size: 10px; background: #ff9800; color: white; padding: 2px 6px; border-radius: 3px; margin-left: 4px;">BROWSER-ONLY</span>
+              <span style="color: #666; font-size: 11px; margin-left: 8px;">${recording.frameCount || 0} frames • ${formattedDate}</span>
+            </div>
+          </div>
+          <div class="recording-buttons">
+            <button class="copy-id-btn" data-session-id="${recording.sessionId}" title="Copy ID">Copy ID</button>
+            <button class="copy-prompt-btn" data-session-id="${recording.sessionId}" data-name="${recording.title || ''}" title="Copy Claude Prompt">Copy Prompt</button>
+            <button class="view-browser-btn" data-session-id="${recording.sessionId}" title="View Screenshots">View</button>
+            <button class="export-btn" data-session-id="${recording.sessionId}" title="Export Recording">Export</button>
+            <button class="delete-browser-btn" data-session-id="${recording.sessionId}" title="Delete">Delete</button>
+          </div>
+        `;
+
+        // Add event listeners
+        const copyIdBtn = recordingItem.querySelector('.copy-id-btn');
+        const copyPromptBtn = recordingItem.querySelector('.copy-prompt-btn');
+        const viewBtn = recordingItem.querySelector('.view-browser-btn');
+        const exportBtn = recordingItem.querySelector('.export-btn');
+        const deleteBtn = recordingItem.querySelector('.delete-browser-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);
+          });
+        });
+
+        copyPromptBtn.addEventListener('click', () => {
+          const sessionId = recording.sessionId;
+          const title = recording.title;
+          let prompt;
+
+          if (title) {
+            prompt = `Please analyze the browser-only screen recording "${title}" (session: ${sessionId}). This recording is stored locally in the browser.`;
+          } else {
+            prompt = `Please analyze the browser-only screen recording "${sessionId}". This recording is stored locally in the browser.`;
+          }
+
+          navigator.clipboard.writeText(prompt).then(() => {
+            copyPromptBtn.textContent = 'Copied!';
+            const originalBg = copyPromptBtn.style.background;
+            copyPromptBtn.style.background = '#4CAF50';
+            setTimeout(() => {
+              copyPromptBtn.textContent = 'Copy Prompt';
+              copyPromptBtn.style.background = originalBg;
+            }, 2000);
+          });
+        });
+
+        viewBtn.addEventListener('click', () => {
+          // Open frame editor in browser-only mode
+          const frameEditorUrl = chrome.runtime.getURL(`pro/frame-editor.html?sessionId=${recording.sessionId}&browserOnly=true`);
+          chrome.tabs.create({ url: frameEditorUrl });
+        });
+
+        exportBtn.addEventListener('click', async () => {
+          try {
+            const result = await chrome.runtime.sendMessage({
+              action: 'exportBrowserRecording',
+              sessionId: recording.sessionId
+            });
+
+            if (result && result.success) {
+              exportBtn.textContent = 'Exported!';
+              exportBtn.style.background = '#4CAF50';
+              setTimeout(() => {
+                exportBtn.textContent = 'Export';
+                exportBtn.style.background = '#FF9800';
+              }, 2000);
+            }
+          } catch (error) {
+            console.error('Failed to export recording:', error);
+            alert('Failed to export recording');
+          }
+        });
+
+        deleteBtn.addEventListener('click', async () => {
+          if (confirm('Are you sure you want to delete this browser recording?')) {
+            try {
+              await chrome.runtime.sendMessage({
+                action: 'deleteBrowserRecording',
+                sessionId: recording.sessionId
+              });
+              loadScreenRecordings(); // Reload list
+            } catch (error) {
+              console.error('Failed to delete recording:', error);
+            }
+          }
+        });
+
+        recordingsContainer.appendChild(recordingItem);
+      });
+    }
+  } catch (error) {
+    console.error('Failed to load browser-only recordings:', error);
+  }
+
+  // Then, check server for screen recordings
   const ports = CONFIG_PORTS;
   for (const port of ports) {
     try {
@@ -2545,6 +2917,7 @@ async function loadScreenRecordings() {
       if (response.ok) {
         const data = await response.json();
         if (data && data.length > 0) {
+          hasRecordings = true;
           recordingsList.style.display = 'block';
           
           // Display each screen recording
@@ -2563,25 +2936,25 @@ async function loadScreenRecordings() {
 
             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 class="recording-id" title="${recording.sessionId}">
+                  <span class="recording-id-text">🎥 ${displayName}</span>
+                  <span style="color: #666; font-size: 11px; margin-left: 8px;">${recording.totalFrames} frames • ${formattedDate}</span>
                 </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>
+                <button class="copy-id-btn" data-session-id="${recording.sessionId}" title="Copy ID">Copy ID</button>
+                <button class="copy-prompt-btn" data-session-id="${recording.sessionId}" data-name="${recording.name || ''}" data-port="${port}" title="Copy Claude Prompt">Copy Prompt</button>
+                <button class="view-btn" data-session-id="${recording.sessionId}" title="View Screenshots">View</button>
+                <button class="delete-btn" data-session-id="${recording.sessionId}" title="Delete">Delete</button>
               </div>
             `;
             
             // Add event listeners
             const copyIdBtn = recordingItem.querySelector('.copy-id-btn');
+            const copyPromptBtn = recordingItem.querySelector('.copy-prompt-btn');
+            const viewBtn = recordingItem.querySelector('.view-btn');
             const deleteBtn = recordingItem.querySelector('.delete-btn');
-            
+
             copyIdBtn.addEventListener('click', () => {
               navigator.clipboard.writeText(recording.sessionId).then(() => {
                 copyIdBtn.textContent = 'Copied!';
@@ -2592,14 +2965,60 @@ async function loadScreenRecordings() {
                 }, 2000);
               });
             });
-            
+
+            copyPromptBtn.addEventListener('click', () => {
+              const sessionId = recording.sessionId;
+              const name = recording.name;
+              let prompt;
+
+              if (name) {
+                prompt = `Please use the chrome_pilot_show_frames function in Chrome Debug to display the screen recording "${name}" (session: ${sessionId}) that was recorded on port ${port}.`;
+              } else {
+                prompt = `Please use the chrome_pilot_show_frames function in Chrome Debug to display the screen recording "${sessionId}" that was recorded on port ${port}.`;
+              }
+
+              navigator.clipboard.writeText(prompt).then(() => {
+                copyPromptBtn.textContent = 'Copied!';
+                const originalBg = copyPromptBtn.style.background;
+                copyPromptBtn.style.background = '#4CAF50';
+                setTimeout(() => {
+                  copyPromptBtn.textContent = 'Copy Prompt';
+                  copyPromptBtn.style.background = originalBg;
+                }, 2000);
+              });
+            });
+
+            viewBtn.addEventListener('click', async () => {
+              try {
+                // Check if frame editor is available (Pro version)
+                const frameEditorUrl = chrome.runtime.getURL(`pro/frame-editor.html?sessionId=${recording.sessionId}`);
+                const response = await fetch(frameEditorUrl, { method: 'HEAD' });
+
+                if (response.ok) {
+                  // Pro version - open frame editor
+                  chrome.tabs.create({ url: frameEditorUrl });
+                } else {
+                  // Free version - show summary
+                  const framesCount = recording.totalFrames || 0;
+                  const noteText = recording.name ? `\nName: ${recording.name}` : '';
+                  alert(`Screen Recording${noteText}\nSession ID: ${recording.sessionId}\n\nFrames: ${framesCount}\n\nUse "Copy ID" to share with Claude Code for detailed analysis.\n\nUpgrade to Pro for the Frame Editor with advanced viewing and editing features.`);
+                }
+              } catch (error) {
+                console.error('Failed to view recording:', error);
+                // Fallback to alert
+                const framesCount = recording.totalFrames || 0;
+                const noteText = recording.name ? `\nName: ${recording.name}` : '';
+                alert(`Screen Recording${noteText}\nSession ID: ${recording.sessionId}\n\nFrames: ${framesCount}\n\nUse "Copy ID" to share with Claude Code for detailed analysis.`);
+              }
+            });
+
             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();
@@ -2612,8 +3031,6 @@ async function loadScreenRecordings() {
             
             recordingsContainer.appendChild(recordingItem);
           });
-        } else {
-          recordingsList.style.display = 'none';
         }
         break; // Found working server
       }
@@ -2621,6 +3038,27 @@ async function loadScreenRecordings() {
       console.error(`Failed to load screen recordings from port ${port}:`, error);
     }
   }
+
+  // Handle visibility based on recordings and user preference
+  if (!hasRecordings) {
+    recordingsList.style.display = 'none';
+  } else {
+    // Get user's saved preference
+    const prefs = await chrome.storage.local.get(['screenRecordingsVisible']);
+    const shouldShow = autoShow || (prefs.screenRecordingsVisible !== false); // Default to true
+
+    if (shouldShow) {
+      recordingsList.style.display = 'block';
+      if (viewScreenRecordingsLink) {
+        viewScreenRecordingsLink.textContent = 'Hide Recordings';
+      }
+    } else {
+      recordingsList.style.display = 'none';
+      if (viewScreenRecordingsLink) {
+        viewScreenRecordingsLink.textContent = 'View Past Recordings';
+      }
+    }
+  }
 }
 
 /*