@dynamicu/chromedebug-mcp 2.7.2 → 2.7.4

package/chrome-extension/popup.js

@@ -3,7 +3,7 @@ const EXTENSION_VERSION = '2.0.4-BUILD-20250119';
 // console.log(`[popup.js] Loaded version: ${EXTENSION_VERSION}`);
 
 // LemonSqueezy purchase URL for PRO upgrade
-const PRO_PURCHASE_URL = 'https://chromedebug.com/buy/996773cb-682b-430f-b9e3-9ce2130bd967';
+const PRO_PURCHASE_URL = 'https://chromedebug.com/checkout/buy/996773cb-682b-430f-b9e3-9ce2130bd967';
 const IS_PRO_VERSION = chrome.runtime.getManifest().name.includes('PRO');
 
 // Global variables for recording functionality
@@ -11,6 +11,7 @@ let isRecording = false;
 let recordingTimer = null;
 let recordingStartTime = null;
 let isStoppingRecording = false;
+let isVideoModeActive = false; // Track if we're in video recording mode
 
 // Countdown timer variables
 let countdownTimer = null;
@@ -23,6 +24,17 @@ let isWorkflowRecording = false;
 let workflowRecordingTimer = null;
 let workflowStartTime = null;
 
+// Screenshot recording variables
+let isScreenshotRecording = false;
+let screenshotRecordingTimer = null;
+let screenshotStartTime = null;
+
+// Recording tab filter: 'all', 'screen', 'video'
+let recordingTabFilter = 'all';
+
+// Workflow tab filter: 'all', 'workflow', 'screenshot'
+let workflowTabFilter = 'all';
+
 // Debounce timer for screenshot quality slider
 let screenshotQualityDebounceTimer = null;
 
@@ -150,6 +162,67 @@ function stopWorkflowTimer() {
   }
 }
 
+// Screenshot recording UI update function
+function updateScreenshotRecordingUI() {
+  const screenshotBtn = document.getElementById('screenshotRecordBtn');
+  const screenshotStatus = document.getElementById('screenshotRecordingStatus');
+  const screenshotSettings = document.getElementById('screenshotRecordingSettings');
+
+  if (screenshotBtn) {
+    if (isScreenshotRecording) {
+      screenshotBtn.textContent = '⏹️ Stop Screenshot Recording';
+      screenshotBtn.style.background = '#e91e63';
+      screenshotBtn.classList.add('recording');
+      startScreenshotTimer();
+      // Hide settings during recording
+      if (screenshotSettings) {
+        screenshotSettings.style.display = 'none';
+      }
+    } else {
+      screenshotBtn.innerHTML = '📸 Start Screenshot Recording <span id="screenshotProBadge" style="position: absolute; top: -4px; right: -4px; background: linear-gradient(135deg, #FFD700, #FFA500); color: #000; font-size: 8px; padding: 1px 4px; border-radius: 3px; font-weight: bold;">PRO</span>';
+      screenshotBtn.style.background = '#FF9800';
+      screenshotBtn.classList.remove('recording');
+      stopScreenshotTimer();
+      if (screenshotStatus) {
+        screenshotStatus.textContent = '';
+      }
+    }
+  }
+}
+
+function startScreenshotTimer() {
+  // Get stored start time or use current time
+  chrome.storage.local.get(['screenshotStartTime'], (result) => {
+    screenshotStartTime = result.screenshotStartTime || Date.now();
+
+    screenshotRecordingTimer = setInterval(() => {
+      const elapsed = Math.floor((Date.now() - screenshotStartTime) / 1000);
+      const minutes = Math.floor(elapsed / 60);
+      const seconds = elapsed % 60;
+      const screenshotStatus = document.getElementById('screenshotRecordingStatus');
+      if (screenshotStatus) {
+        screenshotStatus.innerHTML = `📸 Recording: <span class="recording-timer">${minutes}:${seconds.toString().padStart(2, '0')}</span>`;
+      }
+    }, 1000);
+
+    // Update timer immediately
+    const elapsed = Math.floor((Date.now() - screenshotStartTime) / 1000);
+    const minutes = Math.floor(elapsed / 60);
+    const seconds = elapsed % 60;
+    const screenshotStatus = document.getElementById('screenshotRecordingStatus');
+    if (screenshotStatus) {
+      screenshotStatus.innerHTML = `📸 Recording: <span class="recording-timer">${minutes}:${seconds.toString().padStart(2, '0')}</span>`;
+    }
+  });
+}
+
+function stopScreenshotTimer() {
+  if (screenshotRecordingTimer) {
+    clearInterval(screenshotRecordingTimer);
+    screenshotRecordingTimer = null;
+  }
+}
+
 // Smart tiered port discovery configuration
 const PORT_TIERS = {
   // Try common ports first with short timeout (fast discovery)
@@ -477,33 +550,80 @@ chromedebug-mcp-server`;
 
 
 function updateRecordingUI() {
+  console.log('[updateRecordingUI] Called with isRecording:', isRecording, 'isVideoModeActive:', isVideoModeActive);
   const recordBtn = document.getElementById('recordBtn');
   const recordingStatus = document.getElementById('recordingStatus');
   const manualSnapshotBtn = document.getElementById('manualSnapshotBtn');
   const countdownDisplay = document.getElementById('countdownDisplay');
-  
+  const videoRecBtn = document.getElementById('startVideoRecordingBtn');
+
   if (recordBtn) {
     if (isRecording) {
-      recordBtn.textContent = 'Stop Recording';
-      recordBtn.classList.add('recording');
+      // Check if we're in video mode
+      if (isVideoModeActive) {
+        console.log('[updateRecordingUI] VIDEO MODE: Setting recordBtn disabled, videoRecBtn to Stop');
+        // Video mode: grey out regular recording button
+        recordBtn.textContent = 'Start Recording';
+        recordBtn.disabled = true;
+        recordBtn.style.background = '#999';
+        recordBtn.classList.remove('recording');
+
+        // Update video button to show Stop
+        if (videoRecBtn) {
+          videoRecBtn.textContent = '🎥 Stop Video Recording';
+          videoRecBtn.style.background = '#f44336';
+          videoRecBtn.disabled = false;
+        }
+
+        if (recordingStatus) {
+          recordingStatus.innerHTML = '<strong style="color: #4CAF50;">🎥 Video Recording Active</strong><br>' +
+                                     '<small>No indicator shown. Click Stop to end.</small>';
+        }
+      } else {
+        // Normal recording mode
+        console.log('[updateRecordingUI] NORMAL MODE: Setting recordBtn to Stop, videoRecBtn disabled');
+        recordBtn.textContent = 'Stop Recording';
+        recordBtn.classList.add('recording');
+        recordBtn.disabled = false;
+        recordBtn.style.background = '';
+
+        // Grey out video button during normal recording
+        if (videoRecBtn) {
+          videoRecBtn.textContent = '🎥 Start Video Recording';
+          videoRecBtn.disabled = true;
+          videoRecBtn.style.background = '#999';
+        }
+      }
+
       startRecordingTimer();
-      
+
       // Show manual snapshot button
       if (manualSnapshotBtn) {
         manualSnapshotBtn.style.display = 'block';
       }
-      
-      // Show countdown if frame rate is 3+ seconds
-      if (currentFrameRate >= 3 && countdownDisplay) {
+
+      // Show countdown if frame rate is 3+ seconds (not in video mode)
+      if (!isVideoModeActive && currentFrameRate >= 3 && countdownDisplay) {
         countdownDisplay.style.display = 'block';
         startCountdownTimer();
       }
     } else {
+      // Not recording - reset everything
+      console.log('[updateRecordingUI] NOT RECORDING: Resetting both buttons');
       recordBtn.textContent = 'Start Recording';
       recordBtn.classList.remove('recording');
+      recordBtn.disabled = false;
+      recordBtn.style.background = '#f44336';
       stopRecordingTimer();
       stopCountdownTimer();
-      
+
+      // Reset Video Recording button
+      if (videoRecBtn) {
+        videoRecBtn.textContent = '🎥 Start Video Recording';
+        videoRecBtn.disabled = false;
+        videoRecBtn.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
+      }
+
       // Hide manual snapshot button and countdown
       if (manualSnapshotBtn) {
         manualSnapshotBtn.style.display = 'none';
@@ -511,10 +631,13 @@ function updateRecordingUI() {
       if (countdownDisplay) {
         countdownDisplay.style.display = 'none';
       }
-      
+
       if (recordingStatus) {
         recordingStatus.textContent = '';
       }
+
+      // Reset video mode flag
+      isVideoModeActive = false;
     }
   }
 }
@@ -771,7 +894,7 @@ function loadRecordings() {
   });
 }
 
-function addRecording(recordingId, isSession = false, isFrameCapture = false, serverPort = null, type = null, sessionName = null) {
+function addRecording(recordingId, isSession = false, isFrameCapture = false, serverPort = null, type = null, sessionName = null, isVideoMode = false) {
   chrome.storage.local.get(['recordings'], (result) => {
     const recordings = result.recordings || [];
     recordings.unshift({
@@ -781,14 +904,77 @@ function addRecording(recordingId, isSession = false, isFrameCapture = false, se
       isFrameCapture: isFrameCapture,
       serverPort: serverPort,
       type: type || (isSession ? 'session' : isFrameCapture ? 'recording' : 'recording'),
-      name: sessionName
+      name: sessionName,
+      isVideoMode: isVideoMode
     }); // Add to beginning
     chrome.storage.local.set({ recordings }, () => {
+      // Auto-switch to the relevant tab
+      if (isVideoMode) {
+        switchRecordingTab('video');
+      } else {
+        switchRecordingTab('screen');
+      }
       updateRecordingsDisplay(recordings);
     });
   });
 }
 
+// Switch recording tab and update UI
+function switchRecordingTab(tabName) {
+  recordingTabFilter = tabName;
+
+  // Update tab button styles
+  const allBtn = document.getElementById('tabAllRecordings');
+  const screenBtn = document.getElementById('tabScreenRecordings');
+  const videoBtn = document.getElementById('tabVideoRecordings');
+
+  [allBtn, screenBtn, videoBtn].forEach(btn => {
+    if (btn) {
+      btn.style.background = '#e0e0e0';
+      btn.style.color = '#333';
+      btn.classList.remove('active');
+    }
+  });
+
+  const activeBtn = tabName === 'all' ? allBtn : tabName === 'screen' ? screenBtn : videoBtn;
+  if (activeBtn) {
+    activeBtn.style.background = '#2196F3';
+    activeBtn.style.color = 'white';
+    activeBtn.classList.add('active');
+  }
+
+  // Reload screen recordings with the new filter applied
+  loadScreenRecordings();
+}
+
+// Switch workflow tab and update UI
+function switchWorkflowTab(tabName) {
+  workflowTabFilter = tabName;
+
+  // Update tab button styles
+  const allBtn = document.getElementById('tabAllWorkflows');
+  const workflowBtn = document.getElementById('tabWorkflowOnly');
+  const screenshotBtn = document.getElementById('tabScreenshotsOnly');
+
+  [allBtn, workflowBtn, screenshotBtn].forEach(btn => {
+    if (btn) {
+      btn.style.background = '#e0e0e0';
+      btn.style.color = '#333';
+      btn.classList.remove('active');
+    }
+  });
+
+  const activeBtn = tabName === 'all' ? allBtn : tabName === 'workflow' ? workflowBtn : screenshotBtn;
+  if (activeBtn) {
+    activeBtn.style.background = '#9c27b0';
+    activeBtn.style.color = 'white';
+    activeBtn.classList.add('active');
+  }
+
+  // Reload workflow recordings with the new filter applied
+  loadWorkflowRecordings();
+}
+
 function deleteRecording(recordingId) {
   // First, tell the background script to delete from server
   chrome.runtime.sendMessage({ 
@@ -806,23 +992,49 @@ function deleteRecording(recordingId) {
   });
 }
 
+// Store all recordings for filtering
+let allRecordings = [];
+
 function updateRecordingsDisplay(recordings) {
   const container = document.getElementById('recordingsContainer');
   const listDiv = document.getElementById('recordingsList');
 
   if (!container || !listDiv) return;
 
+  // Store all recordings for tab filtering
+  allRecordings = recordings;
+
   if (recordings.length === 0) {
     listDiv.style.display = 'none';
     return;
   }
 
   listDiv.style.display = 'block';
-  container.innerHTML = recordings.map(recording => {
+
+  // Filter recordings based on selected tab
+  let filteredRecordings = recordings;
+  if (recordingTabFilter === 'video') {
+    filteredRecordings = recordings.filter(r => normalizeIsVideoMode(r.isVideoMode));
+  } else if (recordingTabFilter === 'screen') {
+    filteredRecordings = recordings.filter(r => !normalizeIsVideoMode(r.isVideoMode));
+  }
+
+  if (filteredRecordings.length === 0) {
+    container.innerHTML = '<div style="text-align: center; color: #999; padding: 20px; font-size: 11px;">No recordings in this category</div>';
+    return;
+  }
+
+  container.innerHTML = filteredRecordings.map(recording => {
     const portInfo = recording.serverPort ? ` - Port: ${recording.serverPort}` : '';
     let typeInfo = '';
     let typeIcon = '';
 
+    // Determine recording type badge
+    const isVideo = normalizeIsVideoMode(recording.isVideoMode);
+    const typeBadge = isVideo
+      ? '<span style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; font-size: 8px; padding: 1px 4px; border-radius: 3px; margin-left: 4px;">VIDEO</span>'
+      : '<span style="background: #4CAF50; color: white; font-size: 8px; padding: 1px 4px; border-radius: 3px; margin-left: 4px;">SCREEN</span>';
+
     if (recording.type === 'snapshot') {
       typeInfo = ' (snapshot)';
       typeIcon = '📸 ';
@@ -841,7 +1053,7 @@ function updateRecordingsDisplay(recordings) {
         <div class="recording-info">
           <div class="recording-id" title="${recording.id}">
             <span class="recording-id-text">${typeIcon}${displayName}</span>
-            ${typeInfo}${portInfo}
+            ${typeBadge}${typeInfo}${portInfo}
           </div>
         </div>
         <div class="recording-buttons">
@@ -1236,20 +1448,29 @@ document.addEventListener('DOMContentLoaded', () => {
     'frameRate',
     'imageQuality',
     'frameFlash',
+    'mouseTrackingEnabled',
+    'mouseSampleInterval',
     'workflowRecording',
+    'screenshotRecording',
     'includeLogsInExport',
     'workflowScreenshotsEnabled',
     'workflowScreenshotFormat',
     'workflowScreenshotQuality',
     'workflowScreenshotMaxWidth'
   ], (result) => {
-    
+
     // Restore workflow recording state
     if (result.workflowRecording === true) {
       isWorkflowRecording = true;
       updateWorkflowRecordingUI();
     }
-    
+
+    // Restore screenshot recording state
+    if (result.screenshotRecording === true) {
+      isScreenshotRecording = true;
+      updateScreenshotRecordingUI();
+    }
+
     // Restore include logs checkbox state (default to true)
     if (includeLogsCheckbox) {
       includeLogsCheckbox.checked = result.includeLogsInExport !== false;
@@ -1284,6 +1505,20 @@ document.addEventListener('DOMContentLoaded', () => {
       });
     }
 
+    // Restore mouse tracking settings (available for all users)
+    const enableMouseTrackingCheckbox = document.getElementById('enableMouseTracking');
+    const mouseSampleRateSelect = document.getElementById('mouseSampleRate');
+
+    if (enableMouseTrackingCheckbox && mouseSampleRateSelect) {
+      // Mouse tracking is available for all users
+      const mouseTrackingEnabled = result.mouseTrackingEnabled === true;
+      const mouseSampleInterval = result.mouseSampleInterval || 100;
+
+      enableMouseTrackingCheckbox.checked = mouseTrackingEnabled;
+      mouseSampleRateSelect.value = mouseSampleInterval;
+      mouseSampleRateSelect.disabled = !mouseTrackingEnabled;
+    }
+
     // Restore workflow screenshot settings
     const enableScreenshotsCheckbox = document.getElementById('enableScreenshotsCheckbox');
     const screenshotFormat = document.getElementById('screenshotFormat');
@@ -1321,10 +1556,51 @@ document.addEventListener('DOMContentLoaded', () => {
   // Load saved recordings (legacy)
   loadRecordings();
 
+  // Setup recording type tab handlers
+  const tabAllBtn = document.getElementById('tabAllRecordings');
+  const tabScreenBtn = document.getElementById('tabScreenRecordings');
+  const tabVideoBtn = document.getElementById('tabVideoRecordings');
+
+  if (tabAllBtn) {
+    tabAllBtn.addEventListener('click', () => switchRecordingTab('all'));
+  }
+  if (tabScreenBtn) {
+    tabScreenBtn.addEventListener('click', () => switchRecordingTab('screen'));
+  }
+  if (tabVideoBtn) {
+    tabVideoBtn.addEventListener('click', () => switchRecordingTab('video'));
+  }
+
+  // Setup workflow type tab handlers
+  const tabAllWorkflowsBtn = document.getElementById('tabAllWorkflows');
+  const tabWorkflowOnlyBtn = document.getElementById('tabWorkflowOnly');
+  const tabScreenshotsOnlyBtn = document.getElementById('tabScreenshotsOnly');
+
+  if (tabAllWorkflowsBtn) {
+    tabAllWorkflowsBtn.addEventListener('click', () => switchWorkflowTab('all'));
+  }
+  if (tabWorkflowOnlyBtn) {
+    tabWorkflowOnlyBtn.addEventListener('click', () => switchWorkflowTab('workflow'));
+  }
+  if (tabScreenshotsOnlyBtn) {
+    tabScreenshotsOnlyBtn.addEventListener('click', () => switchWorkflowTab('screenshot'));
+  }
+
   // Load screen and workflow recordings with saved preferences
   loadScreenRecordings();
   loadWorkflowRecordings();
-  
+
+  // Setup Delete All button event listeners
+  const deleteAllWorkflowsBtn = document.getElementById('deleteAllWorkflowsBtn');
+  if (deleteAllWorkflowsBtn) {
+    deleteAllWorkflowsBtn.addEventListener('click', deleteAllWorkflowRecordings);
+  }
+
+  const deleteAllScreenRecordingsBtn = document.getElementById('deleteAllScreenRecordingsBtn');
+  if (deleteAllScreenRecordingsBtn) {
+    deleteAllScreenRecordingsBtn.addEventListener('click', deleteAllScreenRecordings);
+  }
+
   // Setup recording settings event listeners
   const frameRateSelect = document.getElementById('frameRate');
   const imageQualitySelect = document.getElementById('imageQuality');
@@ -1347,12 +1623,29 @@ document.addEventListener('DOMContentLoaded', () => {
       chrome.storage.local.set({ frameFlash: frameFlashCheckbox.checked });
     });
   }
-  
+
+  // Setup mouse tracking event listeners (PRO-only)
+  const enableMouseTrackingCheckbox = document.getElementById('enableMouseTracking');
+  const mouseSampleRateSelect = document.getElementById('mouseSampleRate');
+
+  if (enableMouseTrackingCheckbox && mouseSampleRateSelect) {
+    enableMouseTrackingCheckbox.addEventListener('change', () => {
+      const isEnabled = enableMouseTrackingCheckbox.checked && IS_PRO_VERSION;
+      mouseSampleRateSelect.disabled = !isEnabled;
+      chrome.storage.local.set({ mouseTrackingEnabled: isEnabled });
+    });
+
+    mouseSampleRateSelect.addEventListener('change', () => {
+      chrome.storage.local.set({ mouseSampleInterval: parseInt(mouseSampleRateSelect.value) });
+    });
+  }
+
   // Check initial recording state from storage
-  chrome.storage.local.get(['recordingActive', 'recordingStartTime', 'pendingRecording', 'pendingTabId'], (result) => {
+  chrome.storage.local.get(['recordingActive', 'recordingStartTime', 'pendingRecording', 'pendingTabId', 'isVideoModeActive'], (result) => {
     if (result.recordingActive) {
       isRecording = true;
       recordingStartTime = result.recordingStartTime || Date.now();
+      isVideoModeActive = result.isVideoModeActive || false;
       updateRecordingUI();
       // console.log('Restored recording state from storage');
     } else if (result.pendingRecording && result.pendingTabId) {
@@ -1457,6 +1750,13 @@ document.addEventListener('DOMContentLoaded', () => {
               console.error('Error starting recording:', chrome.runtime.lastError);
               recordingStatus.textContent = 'Error: ' + chrome.runtime.lastError.message;
               recordBtn.textContent = 'Start Recording';
+              // Reset Video Recording button on error
+              const videoRecBtn = document.getElementById('startVideoRecordingBtn');
+              if (videoRecBtn) {
+                videoRecBtn.textContent = '🎥 Video Recording';
+                videoRecBtn.disabled = false;
+                videoRecBtn.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
+              }
               return;
             }
             
@@ -1464,14 +1764,36 @@ document.addEventListener('DOMContentLoaded', () => {
               // console.log('Recording started successfully');
               isRecording = true;
               recordingStartTime = Date.now();
-              
+
               // Capture current frame rate for countdown timer
               currentFrameRate = settings.frameRate;
-              
+
+              // Send mouse tracking settings to content script (available for all users)
+              chrome.storage.local.get(['mouseTrackingEnabled', 'mouseSampleInterval'], (mouseSettings) => {
+                const mouseTrackingEnabled = mouseSettings.mouseTrackingEnabled === true;
+                const mouseSampleInterval = mouseSettings.mouseSampleInterval || 100;
+
+                chrome.tabs.sendMessage(tab.id, {
+                  action: 'setMouseTrackingSettings',
+                  enabled: mouseTrackingEnabled,
+                  sampleInterval: mouseSampleInterval
+                }).catch(err => {
+                  // Ignore errors if content script isn't ready yet
+                  // console.warn('[Mouse Tracking] Failed to send settings:', err);
+                });
+              });
+
               updateRecordingUI();
             } else {
               recordingStatus.textContent = 'Error: ' + (response?.error || 'Failed to start recording');
               recordBtn.textContent = 'Start Recording';
+              // Reset Video Recording button on error
+              const videoRecBtn = document.getElementById('startVideoRecordingBtn');
+              if (videoRecBtn) {
+                videoRecBtn.textContent = '🎥 Video Recording';
+                videoRecBtn.disabled = false;
+                videoRecBtn.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
+              }
             }
           });
         } catch (error) {
@@ -1481,6 +1803,13 @@ document.addEventListener('DOMContentLoaded', () => {
           }
           recordBtn.disabled = false;
           recordBtn.textContent = 'Start Recording';
+          // Reset Video Recording button on error
+          const videoRecBtn = document.getElementById('startVideoRecordingBtn');
+          if (videoRecBtn) {
+            videoRecBtn.textContent = '🎥 Video Recording';
+            videoRecBtn.disabled = false;
+            videoRecBtn.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
+          }
         }
       } else if (isRecording && !isStoppingRecording) {
         // Stop recording
@@ -1548,6 +1877,216 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 
+  // Setup Video Recording button handler (optimized for video export)
+  const startVideoRecordingBtn = document.getElementById('startVideoRecordingBtn');
+  // isVideoModeActive is now a global variable defined at the top
+
+  if (startVideoRecordingBtn) {
+    startVideoRecordingBtn.addEventListener('click', async (e) => {
+      e.preventDefault();
+
+      // Immediate guard against double-clicks
+      if (startVideoRecordingBtn.disabled) return;
+
+      // Handle stop action if video recording is active
+      if (isVideoModeActive && isRecording) {
+        try {
+          startVideoRecordingBtn.disabled = true;
+          startVideoRecordingBtn.textContent = '🎥 Stopping...';
+
+          const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+          if (tab && tab.id) {
+            await chrome.runtime.sendMessage({
+              action: 'stopRecording',
+              tabId: tab.id
+            });
+
+            // Reset UI state
+            isRecording = false;
+            isVideoModeActive = false;
+
+            // Clear video mode and recording state from storage
+            chrome.storage.local.set({
+              isVideoModeActive: false,
+              recordingActive: false
+            });
+
+            // Use updateRecordingUI() for consistent button state management
+            updateRecordingUI();
+
+            if (recordingStatus) {
+              recordingStatus.textContent = 'Video recording stopped.';
+            }
+          }
+        } catch (error) {
+          console.error('Error stopping video recording:', error);
+          // Re-enable button on error (keep as Stop since recording may still be active)
+          startVideoRecordingBtn.disabled = false;
+        }
+        return;
+      }
+
+      if (isRecording || isStoppingRecording) {
+        // Already recording (non-video mode) - show message
+        if (recordingStatus) {
+          recordingStatus.textContent = 'Recording already in progress. Stop it first.';
+        }
+        return;
+      }
+
+      try {
+        // Check FREE tier usage limit before starting
+        const usageCheck = await chrome.runtime.sendMessage({ action: 'checkUsageLimit' });
+        if (usageCheck && !usageCheck.allowed) {
+          if (recordingStatus) {
+            recordingStatus.innerHTML = '<strong style="color: #f44336;">Daily limit reached</strong><br>' +
+                                       `<small>${usageCheck.count}/${usageCheck.limit} recordings used today.<br>Upgrade to Pro for unlimited.</small>`;
+          }
+          return;
+        }
+
+        // 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');
+          if (recordingStatus) {
+            recordingStatus.textContent = 'Error: No active tab';
+          }
+          return;
+        }
+
+        // Check if server is running
+        const serverStatus = await checkServerStatus();
+        const isBrowserOnlyMode = !serverStatus.connected;
+
+        // Set optimal video settings (4 FPS, 90% quality, mouse tracking ON)
+        const videoSettings = {
+          frameRate: 0.25,      // 4 FPS for smooth video playback
+          imageQuality: 90,     // Best quality for promotional content
+          frameFlash: false,    // No flash during capture
+          videoMode: true       // Flag for content.js to hide indicator
+        };
+
+        // Save settings temporarily for this session
+        await chrome.storage.local.set({
+          mouseTrackingEnabled: true,  // Auto-enable mouse tracking for video mode
+          mouseSampleInterval: 50      // Fast mouse tracking (50ms)
+        });
+
+        // Update UI elements to reflect video mode settings
+        const frameRateSelect = document.getElementById('frameRate');
+        const imageQualitySelect = document.getElementById('imageQuality');
+        const enableMouseTrackingCheckbox = document.getElementById('enableMouseTracking');
+        const mouseSampleRateSelect = document.getElementById('mouseSampleRate');
+
+        if (frameRateSelect) frameRateSelect.value = '0.5'; // Closest available option
+        if (imageQualitySelect) imageQualitySelect.value = '70'; // Closest available option
+        if (enableMouseTrackingCheckbox) {
+          enableMouseTrackingCheckbox.checked = true;
+          if (mouseSampleRateSelect) {
+            mouseSampleRateSelect.disabled = false;
+            mouseSampleRateSelect.value = '50';
+          }
+        }
+
+        // Disable button while starting
+        startVideoRecordingBtn.textContent = '🎥 Starting...';
+        startVideoRecordingBtn.disabled = true;
+
+        // Start recording with video mode settings
+        console.log('[Video Recording] Sending settings to background:', {
+          frameRate: videoSettings.frameRate,
+          imageQuality: videoSettings.imageQuality,
+          frameFlash: videoSettings.frameFlash,
+          videoMode: true,
+          maxWidth: 1280,
+          maxHeight: 720
+        });
+        const response = await new Promise((resolve) => {
+          chrome.runtime.sendMessage({
+            action: 'startRecording',
+            tabId: tab.id,
+            settings: {
+              frameRate: videoSettings.frameRate,
+              imageQuality: videoSettings.imageQuality,
+              frameFlash: videoSettings.frameFlash,
+              videoMode: true,  // Tells content.js to hide indicator after countdown
+              maxWidth: 1280,   // HD resolution for video export
+              maxHeight: 720
+            },
+            mode: isBrowserOnlyMode ? 'browser-only' : 'server'
+          }, resolve);
+        });
+
+        if (response && response.success) {
+          console.log('[Video Recording] Recording started successfully, setting isVideoModeActive = true');
+          isRecording = true;
+          isVideoModeActive = true;  // Track that we're in video mode
+          recordingStartTime = Date.now();
+          currentFrameRate = videoSettings.frameRate;
+
+          // Save video mode state to storage for popup reopen
+          chrome.storage.local.set({
+            isVideoModeActive: true,
+            recordingActive: true,
+            recordingStartTime: recordingStartTime
+          });
+
+          // Send mouse tracking settings to content script
+          chrome.tabs.sendMessage(tab.id, {
+            action: 'setMouseTrackingSettings',
+            enabled: true,
+            sampleInterval: 50
+          }).catch(err => {
+            // Ignore errors if content script isn't ready yet
+          });
+
+          console.log('[Video Recording] Calling updateRecordingUI with isVideoModeActive:', isVideoModeActive);
+          // Use updateRecordingUI() for consistent button state management
+          // This ensures all buttons are properly updated based on isVideoModeActive flag
+          updateRecordingUI();
+
+          // ALSO explicitly set button states here as backup
+          const recordBtn = document.getElementById('recordBtn');
+          const videoRecBtn = document.getElementById('startVideoRecordingBtn');
+          if (recordBtn) {
+            recordBtn.textContent = 'Start Recording';
+            recordBtn.disabled = true;
+            recordBtn.style.background = '#999';
+          }
+          if (videoRecBtn) {
+            videoRecBtn.textContent = '🎥 Stop Video Recording';
+            videoRecBtn.style.background = '#f44336';
+            videoRecBtn.disabled = false;
+          }
+
+          if (recordingStatus) {
+            recordingStatus.innerHTML = '<strong style="color: #4CAF50;">🎥 Video Recording Active</strong><br>' +
+                                       '<small>Click 🎥 Stop Video Recording to end.</small>';
+          }
+        } else {
+          if (recordingStatus) {
+            recordingStatus.textContent = 'Error: ' + (response?.error || 'Failed to start video recording');
+          }
+          // Reset state and UI on failure
+          isRecording = false;
+          isVideoModeActive = false;
+          updateRecordingUI();
+        }
+      } catch (error) {
+        console.error('Error starting video recording:', error);
+        if (recordingStatus) {
+          recordingStatus.textContent = 'Error: ' + error.message;
+        }
+        // Reset state and UI on error
+        isRecording = false;
+        isVideoModeActive = false;
+        updateRecordingUI();
+      }
+    });
+  }
+
   /*
    * SNAPSHOT FEATURE DISABLED (2025-10-01)
    * Snapshot button click handler disabled - see SNAPSHOT_FEATURE_DISABLED.md
@@ -1572,39 +2111,60 @@ document.addEventListener('DOMContentLoaded', () => {
     workflowRecordBtn.addEventListener('click', async () => {
       if (!isWorkflowRecording) {
         // Start workflow recording
+        console.log('[Workflow] Button clicked');
+
+        // Store original button text and disable button
+        const originalButtonText = workflowRecordBtn.textContent;
+        workflowRecordBtn.disabled = true;
+        workflowRecordBtn.textContent = '⏳ Checking...';
+
         try {
           // Check if server is running before starting workflow recording
           const serverStatus = await checkServerStatus();
           if (!serverStatus.connected) {
-            console.error('Server not running');
+            console.error('[Workflow] 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>';
             }
+            // Show toast notification for better visibility
+            showToast('Server not running. Start Chrome Debug server first.', 4000, 'error');
             // Clear error message after 5 seconds
             setTimeout(() => {
               if (workflowStatus) workflowStatus.textContent = '';
             }, 5000);
+            // Restore button state
+            workflowRecordBtn.disabled = false;
+            workflowRecordBtn.textContent = originalButtonText;
             return;
           }
 
           // Check FREE tier usage limit before starting
           const usageCheck = await chrome.runtime.sendMessage({ action: 'checkUsageLimit' });
           if (usageCheck && !usageCheck.allowed) {
-            // console.log('[Usage] Daily limit reached:', usageCheck);
+            console.log('[Workflow] Daily limit reached:', usageCheck);
             const workflowStatus = document.getElementById('workflowRecordingStatus');
             if (workflowStatus) {
               workflowStatus.innerHTML = '<strong style="color: #f44336;">Daily limit reached</strong><br>' +
                                        `<small>${usageCheck.count}/${usageCheck.limit} recordings used today.<br>Upgrade to Pro for unlimited recordings.</small>`;
             }
+            // Show toast notification for better visibility
+            showToast(`Daily limit reached (${usageCheck.count}/${usageCheck.limit}). Upgrade to Pro for unlimited recordings.`, 4000, 'error');
+            // Restore button state
+            workflowRecordBtn.disabled = false;
+            workflowRecordBtn.textContent = originalButtonText;
             return;
           }
 
           const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
 
           if (!tab || !tab.id) {
-            console.error('No active tab found');
+            console.error('[Workflow] No active tab found');
+            showToast('No active tab found. Please try again.', 3000, 'error');
+            // Restore button state
+            workflowRecordBtn.disabled = false;
+            workflowRecordBtn.textContent = originalButtonText;
             return;
           }
 
@@ -1666,13 +2226,21 @@ document.addEventListener('DOMContentLoaded', () => {
                         isWorkflowRecording = true;
                         // Save state and start time to storage
                         const startTime = Date.now();
-                        chrome.storage.local.set({ 
+                        chrome.storage.local.set({
                           workflowRecording: true,
                           workflowStartTime: startTime
                         });
                         workflowStartTime = startTime;
+                        // Re-enable button and update UI for recording state
+                        workflowRecordBtn.disabled = false;
                         updateWorkflowRecordingUI();
                         if (workflowRecordingsList) workflowRecordingsList.style.display = 'none';
+                      } else {
+                        // Retry failed
+                        console.error('[Workflow] Retry failed:', retryResponse);
+                        showToast('Failed to start workflow recording after content script injection.', 3000, 'error');
+                        workflowRecordBtn.disabled = false;
+                        workflowRecordBtn.textContent = originalButtonText;
                       }
                     });
                   }, 100);
@@ -1687,14 +2255,28 @@ document.addEventListener('DOMContentLoaded', () => {
                 workflowStartTime: startTime
               });
               workflowStartTime = startTime;
+              // Re-enable button and update UI for recording state
+              workflowRecordBtn.disabled = false;
               updateWorkflowRecordingUI();
               // Hide any previous results
               if (workflowRecordingsList) workflowRecordingsList.style.display = 'none';
+            } else {
+              // Response received but not successful
+              console.error('[Workflow] Failed to start recording:', response);
+              showToast('Failed to start workflow recording. Please try again.', 3000, 'error');
+              workflowRecordBtn.disabled = false;
+              workflowRecordBtn.textContent = originalButtonText;
             }
           });
         } catch (error) {
-          console.error('Error starting workflow recording:', error);
+          console.error('[Workflow] Error starting workflow recording:', error);
+          showToast('Error starting workflow recording. Please try again.', 3000, 'error');
+          // Restore button state on error
+          workflowRecordBtn.disabled = false;
+          workflowRecordBtn.textContent = originalButtonText;
         }
+        // Note: Button state is managed by updateWorkflowRecordingUI() on success
+        // or restored explicitly in catch/early returns on failure
       } else {
         // Stop workflow recording
         try {
@@ -1765,7 +2347,241 @@ document.addEventListener('DOMContentLoaded', () => {
       chrome.storage.local.set({ includeLogsInExport: includeLogsCheckbox.checked });
     });
   }
-  
+
+  // Setup screenshot recording button
+  const screenshotRecordBtn = document.getElementById('screenshotRecordBtn');
+
+  if (screenshotRecordBtn) {
+    screenshotRecordBtn.addEventListener('click', async () => {
+      if (!isScreenshotRecording) {
+        // Start screenshot recording
+        console.log('[Screenshot] Button clicked');
+
+        // Store original button text and disable button
+        const originalButtonText = screenshotRecordBtn.textContent;
+        screenshotRecordBtn.disabled = true;
+        screenshotRecordBtn.textContent = '⏳ Checking...';
+
+        try {
+          // Check if server is running before starting screenshot recording
+          const serverStatus = await checkServerStatus();
+          if (!serverStatus.connected) {
+            console.error('[Screenshot] Server not running');
+            const screenshotStatus = document.getElementById('screenshotRecordingStatus');
+            if (screenshotStatus) {
+              screenshotStatus.innerHTML = '<strong style="color: #f44336;">Error: Server not running</strong><br>' +
+                                       '<small>Please start the Chrome Debug server first</small>';
+            }
+            // Show toast notification for better visibility
+            showToast('Server not running. Start Chrome Debug server first.', 4000, 'error');
+            // Clear error message after 5 seconds
+            setTimeout(() => {
+              if (screenshotStatus) screenshotStatus.textContent = '';
+            }, 5000);
+            // Restore button state
+            screenshotRecordBtn.disabled = false;
+            screenshotRecordBtn.textContent = originalButtonText;
+            return;
+          }
+
+          // Check FREE tier usage limit before starting
+          const usageCheck = await chrome.runtime.sendMessage({ action: 'checkUsageLimit' });
+          if (usageCheck && !usageCheck.allowed) {
+            console.log('[Screenshot] Daily limit reached:', usageCheck);
+            const screenshotStatus = document.getElementById('screenshotRecordingStatus');
+            if (screenshotStatus) {
+              screenshotStatus.innerHTML = '<strong style="color: #f44336;">Daily limit reached</strong><br>' +
+                                       `<small>${usageCheck.count}/${usageCheck.limit} recordings used today.<br>Upgrade to Pro for unlimited recordings.</small>`;
+            }
+            // Show toast notification for better visibility
+            showToast(`Daily limit reached (${usageCheck.count}/${usageCheck.limit}). Upgrade to Pro for unlimited recordings.`, 4000, 'error');
+            // Restore button state
+            screenshotRecordBtn.disabled = false;
+            screenshotRecordBtn.textContent = originalButtonText;
+            return;
+          }
+
+          const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+
+          if (!tab || !tab.id) {
+            console.error('[Screenshot] No active tab found');
+            showToast('No active tab found. Please try again.', 3000, 'error');
+            // Restore button state
+            screenshotRecordBtn.disabled = false;
+            screenshotRecordBtn.textContent = originalButtonText;
+            return;
+          }
+
+          // Get screenshot recording settings
+          const hideCursor = document.getElementById('hideMouseCursorCheckbox')?.checked ?? true;
+          const countdown = parseInt(document.getElementById('screenshotCountdown')?.value) || 3;
+
+          const screenshotModeSettings = {
+            hideCursor: hideCursor,
+            countdown: countdown
+          };
+
+          // Send message to background script to start screenshot recording
+          chrome.runtime.sendMessage({
+            action: 'startScreenshotRecording',
+            tabId: tab.id,
+            settings: screenshotModeSettings
+          }, (response) => {
+            if (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://')) {
+                const screenshotStatus = document.getElementById('screenshotRecordingStatus');
+                if (screenshotStatus) {
+                  screenshotStatus.innerHTML = '<strong style="color: #f44336;">Cannot record on this page</strong>';
+                }
+                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: 'startScreenshotRecording',
+                      tabId: tab.id,
+                      settings: screenshotModeSettings
+                    }, (retryResponse) => {
+                      if (retryResponse && retryResponse.success) {
+                        isScreenshotRecording = true;
+                        // Save state and start time to storage
+                        const startTime = Date.now();
+                        chrome.storage.local.set({
+                          screenshotRecording: true,
+                          screenshotStartTime: startTime,
+                          screenshotSessionId: retryResponse.sessionId
+                        });
+                        screenshotStartTime = startTime;
+                        // Re-enable button and update UI for recording state
+                        screenshotRecordBtn.disabled = false;
+                        updateScreenshotRecordingUI();
+                        if (workflowRecordingsList) workflowRecordingsList.style.display = 'none';
+                      } else {
+                        // Retry failed
+                        console.error('[Screenshot] Retry failed:', retryResponse);
+                        showToast('Failed to start screenshot recording after content script injection.', 3000, 'error');
+                        screenshotRecordBtn.disabled = false;
+                        screenshotRecordBtn.textContent = originalButtonText;
+                      }
+                    });
+                  }, 100);
+                });
+              });
+            } else if (response && response.success) {
+              isScreenshotRecording = true;
+              // Save state and start time to storage
+              const startTime = Date.now();
+              chrome.storage.local.set({
+                screenshotRecording: true,
+                screenshotStartTime: startTime,
+                screenshotSessionId: response.sessionId
+              });
+              screenshotStartTime = startTime;
+              // Re-enable button and update UI for recording state
+              screenshotRecordBtn.disabled = false;
+              updateScreenshotRecordingUI();
+              // Hide any previous results
+              if (workflowRecordingsList) workflowRecordingsList.style.display = 'none';
+            } else {
+              // Response received but not successful
+              console.error('[Screenshot] Failed to start recording:', response);
+              showToast('Failed to start screenshot recording. Please try again.', 3000, 'error');
+              screenshotRecordBtn.disabled = false;
+              screenshotRecordBtn.textContent = originalButtonText;
+            }
+          });
+        } catch (error) {
+          console.error('[Screenshot] Error starting screenshot recording:', error);
+          showToast('Error starting screenshot recording. Please try again.', 3000, 'error');
+          // Restore button state on error
+          screenshotRecordBtn.disabled = false;
+          screenshotRecordBtn.textContent = originalButtonText;
+        }
+        // Note: Button state is managed by updateScreenshotRecordingUI() on success
+        // or restored explicitly in catch/early returns on failure
+      } else {
+        // Stop screenshot 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 screenshot recording
+          chrome.runtime.sendMessage({
+            action: 'stopScreenshotRecording',
+            tabId: tab.id
+          }, async (response) => {
+            if (chrome.runtime.lastError) {
+              console.error('Error stopping screenshot recording:', chrome.runtime.lastError);
+              // Still stop recording in UI even if there was an error
+              isScreenshotRecording = false;
+              chrome.storage.local.set({
+                screenshotRecording: false,
+                screenshotStartTime: null,
+                screenshotSessionId: null
+              });
+              updateScreenshotRecordingUI();
+              alert('Error stopping screenshot recording. The recording may have been lost.');
+              return;
+            }
+
+            if (response && response.success) {
+              isScreenshotRecording = false;
+              // Clear state from storage
+              chrome.storage.local.set({
+                screenshotRecording: false,
+                screenshotStartTime: null,
+                screenshotSessionId: null
+              });
+              updateScreenshotRecordingUI();
+
+              // Show loading overlay over workflow recording section
+              showSectionLoading('workflow-recording-section', 'Saving screenshot recording...');
+
+              try {
+                // Single source of truth - load from server
+                await loadWorkflowRecordings(true);
+
+                // Show success toast
+                const screenshotCount = response.screenshotCount || 0;
+                showToast(`Screenshot recording saved! ${screenshotCount} screenshots captured`, 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');
+              }
+            }
+          });
+        } catch (error) {
+          console.error('Error stopping screenshot recording:', error);
+        }
+      }
+    });
+  }
+
   // Setup save restore point button
   const saveRestorePointBtn = document.getElementById('saveRestorePointBtn');
   const restorePointsList = document.getElementById('restorePointsList');
@@ -2138,11 +2954,13 @@ async function loadWorkflowRecordings(autoShow = false) {
   const ports = CONFIG_PORTS;
   for (const port of ports) {
     try {
-      const response = await fetch(`http://localhost:${port}/chromedebug/workflow-recordings`);
+      // Add filter parameter based on workflowTabFilter
+      const filterParam = workflowTabFilter !== 'all' ? `?mode=${workflowTabFilter}` : '';
+      const response = await fetch(`http://localhost:${port}/chromedebug/workflow-recordings${filterParam}`);
       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;
 
@@ -2152,16 +2970,22 @@ async function loadWorkflowRecordings(autoShow = false) {
           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();
-            
+
+            // Determine recording type badge
+            const recordingMode = recording.recording_mode || 'workflow';
+            const typeBadge = recordingMode === 'screenshot'
+              ? '<span style="background: #FF9800; color: white; font-size: 8px; padding: 1px 4px; border-radius: 3px; margin-left: 4px;">SCREENSHOT</span>'
+              : '<span style="background: #9c27b0; color: white; font-size: 8px; padding: 1px 4px; border-radius: 3px; margin-left: 4px;">WORKFLOW</span>';
+
             workflowItem.innerHTML = `
               <div class="recording-info">
-                <div style="font-weight: bold; margin-bottom: 4px;">${displayName}</div>
+                <div style="font-weight: bold; margin-bottom: 4px;">${displayName}${typeBadge}</div>
                 <div style="color: #666; font-size: 11px;">
-                  ${recording.total_actions} actions • ${formattedDate}
+                  ${recording.total_actions} ${recordingMode === 'screenshot' ? 'screenshots' : 'actions'} • ${formattedDate}
                 </div>
                 ${recording.screenshot_settings ? '<div style="color: #2196F3; font-size: 10px;">&#128248; Screenshots included</div>' : ''}
               </div>
@@ -2249,10 +3073,17 @@ async function loadWorkflowRecordings(autoShow = false) {
             workflowRecordingsContainer.appendChild(workflowItem);
           });
         } else {
-          // Show "No recordings found" message
+          // Show "No recordings found" message with context about current filter
           const noRecordingsMsg = document.createElement('div');
           noRecordingsMsg.style.cssText = 'color: #666; font-size: 13px; text-align: center; padding: 20px;';
-          noRecordingsMsg.textContent = 'No workflow recordings found';
+          // Show filter-specific message when a category filter is selected
+          if (workflowTabFilter === 'workflow') {
+            noRecordingsMsg.textContent = 'No workflow recordings in this category';
+          } else if (workflowTabFilter === 'screenshot') {
+            noRecordingsMsg.textContent = 'No screenshot recordings in this category';
+          } else {
+            noRecordingsMsg.textContent = 'No workflow recordings found';
+          }
           workflowRecordingsContainer.appendChild(noRecordingsMsg);
         }
         break; // Found working server
@@ -2271,7 +3102,9 @@ async function loadWorkflowRecordings(autoShow = false) {
   }
 
   // Handle visibility based on recordings and user preference
-  if (!hasRecordings) {
+  // CRITICAL FIX: When a tab filter is selected (not 'all'), keep the section visible
+  // so users can switch back to other tabs. Only hide if 'all' filter returns no results.
+  if (!hasRecordings && workflowTabFilter === 'all') {
     workflowRecordingsList.style.display = 'none';
   } else {
     // Get user's saved preference
@@ -2290,6 +3123,12 @@ async function loadWorkflowRecordings(autoShow = false) {
       }
     }
   }
+
+  // Show/hide Delete All button based on recording count
+  const deleteAllWorkflowsBtn = document.getElementById('deleteAllWorkflowsBtn');
+  if (deleteAllWorkflowsBtn) {
+    deleteAllWorkflowsBtn.style.display = hasRecordings ? 'block' : 'none';
+  }
 }
 
 // Function to play a workflow
@@ -2437,6 +3276,190 @@ async function deleteWorkflowRecording(recordingId) {
   }
 }
 
+// Function to delete all workflow recordings
+async function deleteAllWorkflowRecordings() {
+  try {
+    // Get current count for confirmation
+    const workflowRecordingsContainer = document.getElementById('workflowRecordingsContainer');
+    const recordingItems = workflowRecordingsContainer?.querySelectorAll('.recording-item') || [];
+    const recordingCount = recordingItems.length;
+
+    if (recordingCount === 0) {
+      alert('No workflow recordings to delete');
+      return;
+    }
+
+    // Check if workflow recording is in progress
+    const workflowRecordBtn = document.getElementById('workflowRecordBtn');
+    if (workflowRecordBtn && workflowRecordBtn.textContent.includes('Stop')) {
+      alert('Cannot delete all while workflow recording is in progress. Stop recording first.');
+      return;
+    }
+
+    // First confirmation dialog
+    const confirmMessage = `Are you sure you want to delete ALL ${recordingCount} workflow recording(s)?\n\nThis will also delete:\n- All associated restore points\n- All recorded actions and logs\n\nThis action CANNOT be undone!`;
+    if (!confirm(confirmMessage)) {
+      return;
+    }
+
+    // Second confirmation for safety
+    const finalConfirm = confirm('Final confirmation: Delete all workflow recordings permanently?');
+    if (!finalConfirm) {
+      return;
+    }
+
+    // Disable button during deletion
+    const deleteBtn = document.getElementById('deleteAllWorkflowsBtn');
+    const originalText = deleteBtn.textContent;
+    deleteBtn.disabled = true;
+    deleteBtn.textContent = 'Deleting...';
+
+    // Delete from server
+    const ports = CONFIG_PORTS;
+    let deleted = false;
+
+    for (const port of ports) {
+      try {
+        const response = await fetch(`http://localhost:${port}/chromedebug/workflow-recordings/all`, {
+          method: 'DELETE'
+        });
+
+        if (response.ok) {
+          const result = await response.json();
+          deleted = true;
+          alert(`Successfully deleted ${result.deletedCount} workflow recording(s)`);
+
+          // Reload the list
+          loadWorkflowRecordings();
+          break; // Found working server
+        }
+      } catch (error) {
+        console.error(`Failed to delete all workflows from port ${port}:`, error);
+      }
+    }
+
+    if (!deleted) {
+      alert('Failed to connect to server. Please ensure Chrome Debug server is running.');
+    }
+
+    // Re-enable button
+    deleteBtn.disabled = false;
+    deleteBtn.textContent = originalText;
+
+  } catch (error) {
+    console.error('Error deleting all workflow recordings:', error);
+    alert('An error occurred while deleting recordings');
+    // Re-enable button on error
+    const deleteBtn = document.getElementById('deleteAllWorkflowsBtn');
+    if (deleteBtn) {
+      deleteBtn.disabled = false;
+      deleteBtn.textContent = 'Delete All';
+    }
+  }
+}
+
+// Function to delete all screen recordings
+async function deleteAllScreenRecordings() {
+  try {
+    // Count recordings from the list
+    const recordingsContainer = document.getElementById('recordingsContainer');
+    const recordingItems = recordingsContainer?.querySelectorAll('.recording-item') || [];
+    const recordingCount = recordingItems.length;
+
+    if (recordingCount === 0) {
+      alert('No screen recordings to delete');
+      return;
+    }
+
+    // Check if screen recording is in progress
+    const recordBtn = document.getElementById('recordBtn');
+    if (recordBtn && recordBtn.textContent.includes('Stop')) {
+      alert('Cannot delete all while screen recording is in progress. Stop recording first.');
+      return;
+    }
+
+    // First confirmation dialog
+    const confirmMessage = `Are you sure you want to delete ALL ${recordingCount} screen recording(s)?\n\nThis includes both server and browser-only recordings.\n\nThis action CANNOT be undone!`;
+    if (!confirm(confirmMessage)) {
+      return;
+    }
+
+    // Second confirmation for safety
+    const finalConfirm = confirm('Final confirmation: Delete all screen recordings permanently?');
+    if (!finalConfirm) {
+      return;
+    }
+
+    // Disable button during deletion
+    const deleteBtn = document.getElementById('deleteAllScreenRecordingsBtn');
+    const originalText = deleteBtn.textContent;
+    deleteBtn.disabled = true;
+    deleteBtn.textContent = 'Deleting...';
+
+    let deletedCount = 0;
+
+    // Delete browser-only recordings first
+    try {
+      const result = await chrome.runtime.sendMessage({
+        action: 'deleteAllBrowserRecordings'
+      });
+
+      if (result && result.success) {
+        deletedCount += result.deletedCount;
+      }
+    } catch (error) {
+      console.error('Failed to delete browser-only recordings:', error);
+    }
+
+    // Delete server recordings
+    const ports = CONFIG_PORTS;
+    for (const port of ports) {
+      try {
+        const response = await fetch(`http://localhost:${port}/chromedebug/recordings/all`, {
+          method: 'DELETE'
+        });
+
+        if (response.ok) {
+          const result = await response.json();
+          deletedCount += result.deletedCount;
+          break; // Found working server
+        }
+      } catch (error) {
+        console.error(`Failed to delete all recordings from port ${port}:`, error);
+      }
+    }
+
+    if (deletedCount > 0) {
+      alert(`Successfully deleted ${deletedCount} screen recording(s)`);
+      // Reload the list
+      loadScreenRecordings();
+    } else {
+      alert('No recordings were deleted. Please check server connection.');
+    }
+
+    // Re-enable button
+    deleteBtn.disabled = false;
+    deleteBtn.textContent = originalText;
+
+  } catch (error) {
+    console.error('Error deleting all screen recordings:', error);
+    alert('An error occurred while deleting recordings');
+    // Re-enable button on error
+    const deleteBtn = document.getElementById('deleteAllScreenRecordingsBtn');
+    if (deleteBtn) {
+      deleteBtn.disabled = false;
+      deleteBtn.textContent = 'Delete All';
+    }
+  }
+}
+
+// Helper function to normalize isVideoMode to boolean
+function normalizeIsVideoMode(value) {
+  if (value === true || value === 1 || value === 'true' || value === '1') return true;
+  if (value === false || value === 0 || value === 'false' || value === '0' || value === null || value === undefined) return false;
+  return Boolean(value);
+}
+
 // Function to load and display screen recordings
 async function loadScreenRecordings(autoShow = false) {
   const recordingsList = document.getElementById('recordingsList');
@@ -2466,6 +3489,11 @@ async function loadScreenRecordings(autoShow = false) {
 
       // Display each browser-only recording
       browserRecordings.forEach(recording => {
+        // Apply tab filter - normalize isVideoMode to handle various types
+        const isVideo = normalizeIsVideoMode(recording.isVideoMode);
+        if (recordingTabFilter === 'video' && !isVideo) return;
+        if (recordingTabFilter === 'screen' && isVideo) return;
+
         const recordingItem = document.createElement('div');
         recordingItem.className = 'recording-item';
 
@@ -2473,10 +3501,17 @@ async function loadScreenRecordings(autoShow = false) {
         const formattedDate = date.toLocaleString();
         const displayName = recording.title || `Recording ${recording.sessionId}`;
 
+        // Determine recording type badge for browser-only recordings
+        const isVideoBrowser = normalizeIsVideoMode(recording.isVideoMode);
+        const typeBadgeBrowser = isVideoBrowser
+          ? '<span style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; font-size: 8px; padding: 1px 4px; border-radius: 3px; margin-left: 4px;">VIDEO</span>'
+          : '<span style="background: #4CAF50; color: white; font-size: 8px; padding: 1px 4px; border-radius: 3px; margin-left: 4px;">SCREEN</span>';
+
         recordingItem.innerHTML = `
           <div class="recording-info">
             <div class="recording-id" title="${recording.sessionId}">
               <span class="recording-id-text">🌐 ${displayName}</span>
+              ${typeBadgeBrowser}
               <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>
@@ -2589,8 +3624,18 @@ async function loadScreenRecordings(autoShow = false) {
           hasRecordings = true;
           recordingsList.style.display = 'block';
           
+          // Debug logging
+          console.log('[Popup] Loaded recordings from server:', data.length, 'total');
+          console.log('[Popup] Current tab filter:', recordingTabFilter);
+          console.log('[Popup] Sample recording isVideoMode values:', data.slice(0, 3).map(r => ({ id: r.sessionId, isVideoMode: r.isVideoMode, type: typeof r.isVideoMode })));
+          
           // Display each screen recording
           data.forEach(recording => {
+            // Apply tab filter - normalize isVideoMode to handle various types
+            const isVideo = normalizeIsVideoMode(recording.isVideoMode);
+            if (recordingTabFilter === 'video' && !isVideo) return;
+            if (recordingTabFilter === 'screen' && isVideo) return;
+
             const recordingItem = document.createElement('div');
             recordingItem.className = 'recording-item';
 
@@ -2603,10 +3648,16 @@ async function loadScreenRecordings(autoShow = false) {
             const displayName = recording.name || `Recording ${recording.sessionId}`;
             // console.log('Display name:', displayName);
 
+            // Determine recording type badge (already computed above for filter)
+            const typeBadge = isVideo
+              ? '<span style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; font-size: 8px; padding: 1px 4px; border-radius: 3px; margin-left: 4px;">VIDEO</span>'
+              : '<span style="background: #4CAF50; color: white; font-size: 8px; padding: 1px 4px; border-radius: 3px; margin-left: 4px;">SCREEN</span>';
+
             recordingItem.innerHTML = `
               <div class="recording-info">
                 <div class="recording-id" title="${recording.sessionId}">
                   <span class="recording-id-text">🎥 ${displayName}</span>
+                  ${typeBadge}
                   <span style="color: #666; font-size: 11px; margin-left: 8px;">${recording.totalFrames} frames • ${formattedDate}</span>
                 </div>
               </div>
@@ -2708,6 +3759,11 @@ async function loadScreenRecordings(autoShow = false) {
     }
   }
 
+  // Check if all recordings were filtered out
+  if (hasRecordings && recordingsContainer.children.length === 0) {
+    recordingsContainer.innerHTML = `<div style="text-align: center; color: #999; padding: 20px; font-size: 11px;">No ${recordingTabFilter === 'all' ? '' : recordingTabFilter + ' '}recordings found</div>`;
+  }
+
   // Handle visibility based on recordings and user preference
   if (!hasRecordings) {
     recordingsList.style.display = 'none';
@@ -2728,6 +3784,12 @@ async function loadScreenRecordings(autoShow = false) {
       }
     }
   }
+
+  // Show/hide Delete All button based on recording count
+  const deleteAllScreenRecordingsBtn = document.getElementById('deleteAllScreenRecordingsBtn');
+  if (deleteAllScreenRecordingsBtn) {
+    deleteAllScreenRecordingsBtn.style.display = hasRecordings ? 'block' : 'none';
+  }
 }
 
 /*
@@ -2886,11 +3948,17 @@ async function loadSnapshots() {
 // Listen for storage changes
 chrome.storage.onChanged.addListener((changes, namespace) => {
   if (namespace === 'local') {
+    // Update isVideoModeActive from storage if it changed
+    if (changes.isVideoModeActive) {
+      isVideoModeActive = changes.isVideoModeActive.newValue === true;
+      console.log('[Storage Listener] isVideoModeActive changed to:', isVideoModeActive);
+    }
     if (changes.recordingActive && !isStoppingRecording) {
       isRecording = changes.recordingActive.newValue === true;
       if (changes.recordingStartTime) {
         recordingStartTime = changes.recordingStartTime.newValue;
       }
+      console.log('[Storage Listener] recordingActive changed, isRecording:', isRecording, 'isVideoModeActive:', isVideoModeActive);
       updateRecordingUI();
     }
     if (changes.workflowRecording) {
@@ -2920,8 +3988,8 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     if (recordingStatus) {
       recordingStatus.innerHTML = `<strong style="color: #4CAF50;">Recording saved!</strong>`;
     }
-    // Add to recordings list
-    addRecording(request.recordingId);
+    // Add to recordings list - use request.isVideoMode if available, otherwise false
+    addRecording(request.recordingId, false, false, null, null, null, request.isVideoMode || false);
     // Clear status after 3 seconds
     setTimeout(() => {
       if (recordingStatus) recordingStatus.textContent = '';