@dynamicu/chromedebug-mcp 2.7.2 → 2.7.4

package/chrome-extension/background.js

@@ -131,6 +131,15 @@ const WORKFLOW_RECORDING_CONSOLE_CONFIG = {
   backgroundAction: 'workflowConsoleLog'
 };
 
+// Console interception configuration for screenshot recording
+const SCREENSHOT_RECORDING_CONSOLE_CONFIG = {
+  overrideFlagName: '__chromePilotScreenshotConsoleOverridden',
+  originalConsoleName: '__chromePilotScreenshotOriginalConsole',
+  relayFlagName: '__chromePilotScreenshotConsoleRelay',
+  messageType: 'chrome-debug-screenshot-console-log',
+  backgroundAction: 'screenshotConsoleLog'
+};
+
 // Frame queue for handling validation race conditions
 // v2.1.2: Prevents frame loss when lease renewal hasn't propagated yet
 const pendingFrameQueue = new Map(); // sessionId -> array of frame batches
@@ -607,7 +616,7 @@ class LogTabBuffer {
  * could make LogTabBuffer accept a configurable storage key prefix to eliminate duplication.
  */
 class WorkflowLogBuffer {
-  constructor(tabId) {
+  constructor(tabId, customStorageKey = null) {
     this.tabId = tabId;
     this.buffer = [];
     this.processing = false;
@@ -615,7 +624,7 @@ class WorkflowLogBuffer {
     this.totalLogsAdded = 0;
     this.totalLogsFlushed = 0;
     this.lastFlushTime = 0;
-    this.storageKey = `workflow_${tabId}`;
+    this.storageKey = customStorageKey || `workflow_${tabId}`;
   }
 
   // Add log to buffer with queuing to prevent race conditions
@@ -805,6 +814,23 @@ const DATA_PROTECTION_TIERS = {
   }
 };
 
+// Centralized screenshot capture throttling
+// Chrome's captureVisibleTab has a rate limit of ~2 calls/second
+let lastCaptureTime = 0;
+const CAPTURE_MIN_INTERVAL_MS = 550; // Slightly under Chrome's limit for safety margin
+
+async function throttledCaptureVisibleTab(windowId, options) {
+  const now = Date.now();
+  const elapsed = now - lastCaptureTime;
+
+  if (elapsed < CAPTURE_MIN_INTERVAL_MS) {
+    await new Promise(r => setTimeout(r, CAPTURE_MIN_INTERVAL_MS - elapsed));
+  }
+
+  lastCaptureTime = Date.now();
+  return chrome.tabs.captureVisibleTab(windowId, options);
+}
+
 // Initialize on startup
 async function initializeServices() {
   try {
@@ -914,6 +940,9 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
   const handledByOtherListener = [
     'startWorkflowRecording',
     'stopWorkflowRecording',
+    'startScreenshotRecording',   // v2.7.3: screenshot recording mode
+    'stopScreenshotRecording',    // v2.7.3: screenshot recording mode
+    'captureScreenshotForMode',   // v2.7.3: screenshot capture from content script
     'sendToServer',
     'getScreenshotFormats',
     'saveWorkflowRecording',
@@ -931,6 +960,7 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     'openFrameEditor',
     'checkConnection',
     'workflowConsoleLog',  // v2.0.8: handle workflow console logs
+    'screenshotConsoleLog', // v2.7.3: handle screenshot console logs
     'workflowAction',      // v2.0.8: handle workflow actions
     'renewLease',          // v2.1.2: session manager lease renewal for frame capture
     'frameSessionComplete', // Frame recording completion notification
@@ -1080,10 +1110,13 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     // Visual feedback system message handlers
     case 'start-screen-capture-tracking':
       // Forward to content script for visual feedback
-      if (message.sessionId && sender.tab) {
-        chrome.tabs.sendMessage(sender.tab.id, {
+      // Use message.tabId for offscreen documents (sender.tab is undefined for offscreen)
+      const startTrackingTabId = message.tabId || sender.tab?.id;
+      if (message.sessionId && startTrackingTabId) {
+        chrome.tabs.sendMessage(startTrackingTabId, {
           type: 'start-screen-capture-tracking',
-          sessionId: message.sessionId
+          sessionId: message.sessionId,
+          videoMode: message.videoMode || false
         }).catch(() => {
           // Content script might not be available
           // console.log('[Background] Could not forward start-screen-capture-tracking to content script');
@@ -1094,8 +1127,10 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
 
     case 'stop-screen-capture-tracking':
       // Forward to content script
-      if (sender.tab) {
-        chrome.tabs.sendMessage(sender.tab.id, {
+      // Use message.tabId for offscreen documents (sender.tab is undefined for offscreen)
+      const stopTrackingTabId = message.tabId || sender.tab?.id;
+      if (stopTrackingTabId) {
+        chrome.tabs.sendMessage(stopTrackingTabId, {
           type: 'stop-screen-capture-tracking'
         }).catch(() => {
           // console.log('[Background] Could not forward stop-screen-capture-tracking to content script');
@@ -1150,8 +1185,10 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
 
     case 'show-screen-capture-flash':
       // Forward flash trigger to content script
-      if (sender.tab) {
-        chrome.tabs.sendMessage(sender.tab.id, {
+      // Use message.tabId for offscreen documents (sender.tab is undefined for offscreen)
+      const flashTabId = message.tabId || sender.tab?.id;
+      if (flashTabId) {
+        chrome.tabs.sendMessage(flashTabId, {
           type: 'screen-capture-frame-captured'
         }).catch(() => {
           // console.log('[Background] Could not forward frame flash to content script');
@@ -1280,6 +1317,21 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
       }
       break;
 
+    case 'deleteAllBrowserRecordings':
+      // Delete all browser-only recordings
+      if (browserRecordingManager) {
+        browserRecordingManager.deleteAllRecordings().then(result => {
+          sendResponse(result);
+        }).catch(error => {
+          console.error('[Background] Failed to delete all recordings:', error);
+          sendResponse({ success: false, deletedCount: 0, error: error.message });
+        });
+        return true; // Async response
+      } else {
+        sendResponse({ success: false, deletedCount: 0, error: 'Manager not available' });
+      }
+      break;
+
     case 'getBrowserRecordingFrames':
       // Get frames for a browser-only recording
       if (dataBuffer && message.sessionId) {
@@ -1389,6 +1441,15 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
       return; // Don't also inject screen recording logs
     }
 
+    // Check for SCREENSHOT recording (second priority)
+    if (screenshotRecordingTabs.has(tabId)) {
+      // console.log('[Navigation] Re-injecting screenshot console logging for tab:', tabId);
+      self.ConsoleInterceptionLibrary.startConsoleInterception(tabId, SCREENSHOT_RECORDING_CONSOLE_CONFIG).catch(err => {
+        console.error('Failed to re-inject screenshot console logging:', err);
+      });
+      return; // Don't also inject screen recording logs
+    }
+
     // Check for SCREEN recording
     if (sessionManager) {
       isCurrentlyRecordingAsync().then(async (recording) => {
@@ -1515,6 +1576,40 @@ chrome.tabs.onRemoved.addListener((tabId, removeInfo) => {
       console.error(`[Workflow] Error updating storage for closed tab ${tabId}:`, err);
     });
   }
+
+  // Clean up any screenshot recording state for closed tabs
+  if (screenshotRecordingTabs.has(tabId)) {
+    // console.log(`[Screenshot] Tab ${tabId} closed during recording, cleaning up`);
+    screenshotRecordingTabs.delete(tabId);
+    screenshotRecordingSettings.delete(tabId);
+    screenshotRecordingSessionIds.delete(tabId);
+
+    // Clean up screenshot log buffer
+    const screenshotBuffer = screenshotLogBuffers.get(tabId);
+    if (screenshotBuffer) {
+      screenshotBuffer.cleanup().then(() => {
+        screenshotLogBuffers.delete(tabId);
+        // console.log(`[Screenshot] Cleaned up log buffer for closed tab ${tabId}`);
+      }).catch(err => {
+        console.error(`[Screenshot] Error cleaning up buffer for closed tab ${tabId}:`, err);
+        screenshotLogBuffers.delete(tabId);
+      });
+    }
+
+    // Remove session storage
+    chrome.storage.session.remove(`screenshot_logs_${tabId}`).catch(err => {
+      console.error(`[Screenshot] Error removing session storage for closed tab ${tabId}:`, err);
+    });
+
+    // Notify popup that recording has stopped (tab was closed)
+    chrome.storage.local.set({
+      screenshotRecording: false,
+      screenshotStartTime: null,
+      screenshotSessionId: null
+    }).catch(err => {
+      console.error(`[Screenshot] Error updating storage for closed tab ${tabId}:`, err);
+    });
+  }
 });
 
 // Session Manager for robust recording state management
@@ -1533,6 +1628,10 @@ let isCurrentlyRecording = false; // DEPRECATED: Use isCurrentlyRecordingAsync()
 let currentRecordingSessionId = null; // DEPRECATED: Use getCurrentSessionIdAsync() instead
 let frameCounter = new Map(); // DEPRECATED: Session manager handles frame counting
 
+// Session metadata cache - preserves essential settings (like videoMode) after currentSession is cleared
+// This allows in-flight frame batches to access session settings even after stopRecording() executes
+const sessionMetadataCache = new Map();
+
 // =============================================================================
 // INACTIVITY AUTO-STOP - Stop recording if user is inactive
 // =============================================================================
@@ -1798,6 +1897,12 @@ let workflowScreenshotSettings = new Map(); // Map of tabId to screenshot settin
 let workflowSessionNames = new Map(); // Map of tabId to session name
 let workflowLogBuffers = new Map(); // Map of tabId to WorkflowLogBuffer instance
 
+// Screenshot recording state (click-to-capture mode with countdown)
+let screenshotRecordingTabs = new Map(); // Map of tabId to recording state
+let screenshotRecordingSettings = new Map(); // Map of tabId to {countdown, hideCursor}
+let screenshotRecordingSessionIds = new Map(); // Map of tabId to sessionId
+let screenshotLogBuffers = new Map(); // Map of tabId to WorkflowLogBuffer instance for console logs
+
 //=============================================================================
 // COMPREHENSIVE ERROR HANDLING SYSTEM
 // Designed collaboratively with Second Opinion Analyst and Testing Expert
@@ -2402,6 +2507,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   }
   
   if (request.action === 'startRecording') {
+    console.log('[Background] startRecording received settings:', request.settings);
     startRecording(request.tabId, request.settings).then(() => {
       sendResponse({ success: true });
     }).catch((error) => {
@@ -2710,7 +2816,52 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     });
     return true;
   }
-  
+
+  // Screenshot recording handlers (v2.7.3)
+  if (request.action === 'startScreenshotRecording') {
+    // console.log('[Screenshot] Starting screenshot recording for tab:', request.tabId);
+    startScreenshotRecording(
+      request.tabId,
+      request.settings
+    ).then((result) => {
+      sendResponse({ success: true, sessionId: result.sessionId });
+    }).catch((error) => {
+      console.error('[Screenshot] Error starting screenshot recording:', error);
+      sendResponse({ success: false, error: error.message });
+    });
+    return true;
+  }
+
+  if (request.action === 'stopScreenshotRecording') {
+    const tabId = request.tabId || sender.tab?.id;
+    // console.log('[Screenshot] Stopping screenshot recording for tab:', tabId);
+    stopScreenshotRecording(tabId).then(async (result) => {
+      // Track usage for FREE tier after successful recording
+      if (result.success) {
+        const usageResult = await incrementUsageAfterRecording();
+        result.usage = usageResult;
+      }
+      sendResponse(result);
+    }).catch((error) => {
+      console.error('[Screenshot] Error stopping screenshot recording:', error);
+      sendResponse({ success: false, error: error.message });
+    });
+    return true;
+  }
+
+  // Handle screenshot capture requests from content script
+  if (request.action === 'captureScreenshotForMode') {
+    const tabId = request.tabId || sender.tab?.id;
+    // console.log('[Screenshot] Capturing screenshot for tab:', tabId);
+    captureHighQualityScreenshot(tabId).then((screenshot) => {
+      sendResponse({ success: true, screenshot: screenshot });
+    }).catch((error) => {
+      console.error('[Screenshot] Error capturing screenshot:', error);
+      sendResponse({ success: false, error: error.message });
+    });
+    return true;
+  }
+
   // Handle messages from offscreen document
   if (request.target === 'background') {
     if (request.type === 'frame-batch-ready') {
@@ -2719,10 +2870,14 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       handleFrameCaptureComplete(request.data);
     } else if (request.type === 'show-frame-flash') {
       // Relay flash message to content script
+      // console.log('[Background] Relaying frame-flash to tab:', request.tabId);
       chrome.tabs.sendMessage(request.tabId, {
         action: 'showFrameFlash'
-      }).catch(() => {
+      }).then(() => {
+        // console.log('[Background] Frame flash message sent successfully to tab:', request.tabId);
+      }).catch((error) => {
         // Content script might not be available, that's ok
+        // console.log('[Background] Frame flash failed for tab:', request.tabId, error?.message);
       });
     }
   }
@@ -2823,7 +2978,23 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       }
     }
   }
-  
+
+  // Buffer screenshot console logs using race-safe WorkflowLogBuffer
+  if (request.action === 'screenshotConsoleLog' && sender.tab) {
+    const tabId = sender.tab.id;
+    if (screenshotRecordingTabs.has(tabId)) {
+      const buffer = screenshotLogBuffers.get(tabId);
+      if (buffer) {
+        // Use race-safe buffer to prevent read-modify-write race conditions
+        buffer.addLog(request.log).catch(err => {
+          console.error('[ScreenshotLogBuffer] Error adding log:', err);
+        });
+      } else {
+        console.warn(`[Screenshot] No buffer found for tab ${tabId}, log dropped`);
+      }
+    }
+  }
+
   // Handle getCookies for restore points
   if (request.action === 'getCookies' && sender.tab) {
     chrome.cookies.getAll({ url: request.url }, (cookies) => {
@@ -2933,10 +3104,10 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       // console.log('[SCREENSHOT-DEBUG] background.js - Sending response with success: true');
       sendResponse({ success: true, screenshotData });
     }).catch((error) => {
-      console.error('[SCREENSHOT-DEBUG] background.js - captureTabScreenshot FAILED');
-      console.error('[SCREENSHOT-DEBUG] background.js - Error:', error);
-      console.error('[SCREENSHOT-DEBUG] background.js - Error message:', error.message);
-      console.error('[SCREENSHOT-DEBUG] background.js - Error stack:', error.stack);
+      // Rate limit errors are expected and handled by throttling - don't spam console
+      if (!error.message?.includes('MAX_CAPTURE_VISIBLE_TAB_CALLS_PER_SECOND')) {
+        console.error('[Screenshot] Workflow capture failed:', error.message);
+      }
       sendResponse({ success: false, error: error.message });
     });
     return true;
@@ -2970,7 +3141,7 @@ async function takeStandaloneSnapshot(tabId, note = '') {
     const sessionId = `snapshot_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
 
     // Capture screenshot
-    const screenshotData = await chrome.tabs.captureVisibleTab(null, {
+    const screenshotData = await throttledCaptureVisibleTab(null, {
       format: 'jpeg',
       quality: 30 // Default quality for snapshots
     });
@@ -3083,7 +3254,7 @@ async function captureTabScreenshot(tabId, settings) {
     // console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - captureOptions:', JSON.stringify(captureOptions));
     // console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - Calling chrome.tabs.captureVisibleTab...');
 
-    const dataUrl = await chrome.tabs.captureVisibleTab(windowId, captureOptions);
+    const dataUrl = await throttledCaptureVisibleTab(windowId, captureOptions);
 
     // console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - captureVisibleTab SUCCESS');
     // console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - dataUrl length:', dataUrl?.length);
@@ -3135,10 +3306,12 @@ async function captureTabScreenshot(tabId, settings) {
     // console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - Final dataUrl length:', dataUrl?.length);
     return dataUrl;
   } catch (error) {
-    console.error('[SCREENSHOT-DEBUG] captureTabScreenshot - EXCEPTION CAUGHT');
-    console.error('[SCREENSHOT-DEBUG] captureTabScreenshot - Error:', error);
-    console.error('[SCREENSHOT-DEBUG] captureTabScreenshot - Error message:', error.message);
-    console.error('[SCREENSHOT-DEBUG] captureTabScreenshot - Error stack:', error.stack);
+    // Only log unexpected errors, rate limits are handled by throttling
+    if (error.message?.includes('MAX_CAPTURE_VISIBLE_TAB_CALLS_PER_SECOND')) {
+      console.warn('[Screenshot] Rate limited by Chrome, throttling applied');
+    } else {
+      console.error('[Screenshot] Capture failed:', error.message);
+    }
     throw error;
   }
 }
@@ -3265,6 +3438,13 @@ async function startRecording(tabId, settings = {}) {
     currentOwnerId = sessionResult.ownerId;
 
     const sessionId = currentSession.sessionId;
+
+    // Cache essential metadata for this session (persists after currentSession is cleared)
+    // This ensures in-flight frame batches can access videoMode even after stopRecording()
+    sessionMetadataCache.set(sessionId, {
+      videoMode: settings.videoMode || false,
+      sessionName: settings.sessionName || null
+    });
     const scheduledStartTime = Date.now() + 3000; // Schedule start 3 seconds in future for countdown synchronization
 
     // STEP 4: Initialize browser-only recording if in browser-only mode
@@ -3275,7 +3455,8 @@ async function startRecording(tabId, settings = {}) {
         tabId: tabId,
         url: tab.url,
         title: tab.title || settings.sessionName || 'Browser Recording',
-        startTime: scheduledStartTime
+        startTime: scheduledStartTime,
+        isVideoMode: settings.videoMode || false
       });
     }
 
@@ -3291,12 +3472,15 @@ async function startRecording(tabId, settings = {}) {
       logStreamer.setSessionId(sessionId);
     }
     
-    // Update storage
+    // Update storage - include isVideoModeActive to prevent race condition with popup
+    // The popup's storage listener checks for recordingActive changes and calls updateRecordingUI()
+    // If isVideoModeActive isn't included, the popup will show wrong button states
     chrome.storage.local.set({
       recordingActive: true,
       recordingStartTime: scheduledStartTime,
       recordingTabId: tabId,
-      recordingSessionId: sessionId
+      recordingSessionId: sessionId,
+      isVideoModeActive: settings.videoMode || false
     });
     
     // Update badge
@@ -3329,10 +3513,12 @@ async function startRecording(tabId, settings = {}) {
     }
     
     // Notify content script that recording has started with scheduled time
+    console.log('[Background] Sending recordingStarted to content with videoMode:', settings.videoMode);
     chrome.tabs.sendMessage(tabId, {
       action: 'recordingStarted',
       scheduledStartTime: scheduledStartTime,
-      sessionId: sessionId
+      sessionId: sessionId,
+      videoMode: settings.videoMode || false  // Pass video mode for hidden indicator
     }).catch(async (error) => {
       // Content script might not be injected, try to inject it
       // console.log('Could not notify content script, attempting to inject:', error);
@@ -3358,7 +3544,8 @@ async function startRecording(tabId, settings = {}) {
           chrome.tabs.sendMessage(tabId, {
             action: 'recordingStarted',
             scheduledStartTime: scheduledStartTime,
-            sessionId: sessionId
+            sessionId: sessionId,
+            videoMode: settings.videoMode || false
           }).catch(() => {
             console.error('Failed to show recording indicator even after injection');
           });
@@ -3374,12 +3561,22 @@ async function startRecording(tabId, settings = {}) {
       await browserRecordingManager.startRecording(sessionId, {
         tabId,
         url: tab.url,
-        title: tab.title
+        title: tab.title,
+        isVideoMode: settings.videoMode || false
       });
       // console.log('[Recording] Browser recording initialized for session:', sessionId);
     }
 
     // Send stream ID, session info, and settings to offscreen document for frame capture
+    const frameCaptureSettings = {
+      frameRate: settings.frameRate || 1,
+      imageQuality: settings.imageQuality || (serverMode === 'browser-only' ? 15 : 30),
+      frameFlash: settings.frameFlash !== false,
+      maxWidth: settings.maxWidth,    // Pass through for video mode (undefined uses default)
+      maxHeight: settings.maxHeight,  // Pass through for video mode (undefined uses default)
+      videoMode: settings.videoMode || false
+    };
+    console.log('[Background] Sending frame capture settings:', frameCaptureSettings);
     await chrome.runtime.sendMessage({
       type: 'start-frame-capture',
       target: 'offscreen',
@@ -3389,11 +3586,7 @@ async function startRecording(tabId, settings = {}) {
       ownerId: currentOwnerId,
       scheduledStartTime: scheduledStartTime,
       mode: serverMode, // Pass mode to offscreen document
-      settings: {
-        frameRate: settings.frameRate || 1,
-        imageQuality: settings.imageQuality || (serverMode === 'browser-only' ? 15 : 30),
-        frameFlash: settings.frameFlash !== false
-      }
+      settings: frameCaptureSettings
     });
 
     // console.log('Recording started in', serverMode, 'mode');
@@ -3528,10 +3721,20 @@ async function stopRecording() {
       }
     }
 
+    // Note: stoppedSessionId was already captured at the start of stopRecording()
+    // It's used below for deferred cache cleanup
+
     // Clear session cache
     currentSession = null;
     currentOwnerId = null;
 
+    // Schedule deferred cleanup of metadata cache (in-flight batches may still need it)
+    if (stoppedSessionId && sessionMetadataCache.has(stoppedSessionId)) {
+      setTimeout(() => {
+        sessionMetadataCache.delete(stoppedSessionId);
+      }, 10000); // 10 second delay to allow in-flight batches to complete
+    }
+
     // Update legacy state for backward compatibility (will be removed)
     isCurrentlyRecording = false;
     recordingTabId = null;
@@ -3830,7 +4033,8 @@ async function stopWorkflowRecording(tabId) {
             screenshotSettings: screenshotSettings || {},  // v2.0.8 fix: ensure it's an object, not null
             actions: workflow,
             logs: includeLogs ? workflow.flatMap(action => action.logs || []) : [],
-            functionTraces: functionTraces // Include function execution traces
+            functionTraces: functionTraces, // Include function execution traces
+            recordingMode: 'workflow'  // Explicitly mark as workflow recording for tab filtering
           };
 
           // console.log('[SCREENSHOT-DEBUG] background.stopWorkflowRecording - HTTP POST payload being prepared');
@@ -3934,6 +4138,278 @@ async function stopCapturingWorkflowLogs(tabId) {
   return await self.ConsoleInterceptionLibrary.stopConsoleInterception(tabId, WORKFLOW_RECORDING_CONSOLE_CONFIG);
 }
 
+// ============================================================
+// SCREENSHOT RECORDING FUNCTIONS (v2.7.3)
+// Click-to-capture mode with configurable countdown
+// ============================================================
+
+/**
+ * Start screenshot recording mode for a tab
+ * @param {number} tabId - The tab ID to start recording on
+ * @param {object} settings - Recording settings {countdown: number, hideCursor: boolean}
+ */
+async function startScreenshotRecording(tabId, settings = {}) {
+  try {
+    // console.log('[Screenshot] Starting screenshot recording for tab:', tabId, 'settings:', settings);
+
+    // Check if this tab allows content script injection
+    const tab = await chrome.tabs.get(tabId);
+    if (!tab.url || tab.url.startsWith('chrome://') || tab.url.startsWith('chrome-extension://') || tab.url.startsWith('moz-extension://')) {
+      throw new Error('Cannot record screenshots on restricted pages (chrome:// URLs)');
+    }
+
+    // Generate session ID
+    const sessionId = `screenshot_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+
+    // Store settings
+    screenshotRecordingTabs.set(tabId, true);
+    screenshotRecordingSettings.set(tabId, settings);
+    screenshotRecordingSessionIds.set(tabId, sessionId);
+
+    // Store session ID for recovery
+    await chrome.storage.local.set({ currentScreenshotSessionId: sessionId });
+
+    // Initialize console log capture for screenshot recording
+    // Clear any existing logs and set up log buffer
+    await chrome.storage.session.set({ [`screenshot_logs_${tabId}`]: [] });
+    const buffer = new WorkflowLogBuffer(tabId, `screenshot_logs_${tabId}`);
+    screenshotLogBuffers.set(tabId, buffer);
+
+    // Ensure content script is injected before sending message
+    try {
+      await chrome.scripting.executeScript({
+        target: { tabId: tabId },
+        files: ['content.js']
+      });
+      await chrome.scripting.insertCSS({
+        target: { tabId: tabId },
+        files: ['content.css']
+      });
+    } catch (e) {
+      // Content script might already be injected - this is fine
+      // console.log('[Screenshot] Content script injection note:', e.message);
+    }
+
+    // Start console interception for log capture
+    await self.ConsoleInterceptionLibrary.startConsoleInterception(
+      tabId,
+      SCREENSHOT_RECORDING_CONSOLE_CONFIG
+    );
+
+    // Tell the content script to start screenshot recording mode
+    await chrome.tabs.sendMessage(tabId, {
+      action: 'startScreenshotRecording',
+      settings: settings,
+      tabId: tabId,
+      sessionId: sessionId
+    });
+
+    // console.log('[Screenshot] Screenshot recording started successfully, sessionId:', sessionId);
+    return { success: true, sessionId: sessionId };
+  } catch (error) {
+    console.error('[Screenshot] Error starting screenshot recording:', error);
+    throw error;
+  }
+}
+
+/**
+ * Stop screenshot recording and save to server
+ * @param {number} tabId - The tab ID to stop recording on
+ */
+async function stopScreenshotRecording(tabId) {
+  try {
+    // console.log('[Screenshot] Stopping screenshot recording for tab:', tabId);
+
+    // Check if recording was active
+    if (!screenshotRecordingTabs.has(tabId)) {
+      throw new Error('No screenshot recording active for this tab');
+    }
+
+    // Get screenshot data from content script
+    const response = await chrome.tabs.sendMessage(tabId, {
+      action: 'getScreenshotData'
+    });
+
+    if (!response || !response.success) {
+      throw new Error('Failed to get screenshots from content script');
+    }
+
+    let screenshots = response.screenshots || [];
+    // console.log(`[Screenshot] Retrieved ${screenshots.length} screenshots`);
+
+    // Get settings before cleanup
+    const sessionId = screenshotRecordingSessionIds.get(tabId);
+    const settings = screenshotRecordingSettings.get(tabId);
+
+    // Flush log buffer and get logs
+    const buffer = screenshotLogBuffers.get(tabId);
+    if (buffer) {
+      await buffer.flush();
+    }
+
+    // Get logs from session storage
+    const storageKey = `screenshot_logs_${tabId}`;
+    const logResult = await chrome.storage.session.get(storageKey);
+    const allLogs = logResult[storageKey] || [];
+    // console.log(`[Screenshot] Retrieved ${allLogs.length} console logs`);
+
+    // Associate logs with screenshots using timestamp windows
+    // Window: 500ms before click to min(next click timestamp, current + 10s)
+    screenshots = screenshots.map((screenshot, index) => {
+      const windowStart = screenshot.timestamp - 500; // 500ms before click
+      const maxWindowEnd = screenshot.timestamp + 10000; // 10s max window
+      const nextTimestamp = index < screenshots.length - 1
+        ? screenshots[index + 1].timestamp
+        : screenshot.timestamp + 10000;
+      const windowEnd = Math.min(nextTimestamp, maxWindowEnd);
+
+      const screenshotLogs = allLogs.filter(log =>
+        log.timestamp >= windowStart && log.timestamp < windowEnd
+      );
+
+      return {
+        ...screenshot,
+        logs: screenshotLogs
+      };
+    });
+
+    // Stop console interception
+    try {
+      await self.ConsoleInterceptionLibrary.stopConsoleInterception(
+        tabId,
+        SCREENSHOT_RECORDING_CONSOLE_CONFIG
+      );
+    } catch (e) {
+      // Ignore errors when stopping interception
+    }
+
+    // Clean up log buffers
+    if (buffer) {
+      await buffer.cleanup();
+    }
+    screenshotLogBuffers.delete(tabId);
+    await chrome.storage.session.remove(storageKey);
+
+    // Clean up state
+    screenshotRecordingTabs.delete(tabId);
+    screenshotRecordingSettings.delete(tabId);
+    screenshotRecordingSessionIds.delete(tabId);
+
+    // Notify popup that recording has stopped
+    await chrome.storage.local.set({
+      screenshotRecording: false,
+      screenshotStartTime: null,
+      screenshotSessionId: null
+    });
+
+    // Get current URL and title
+    const tab = await chrome.tabs.get(tabId);
+
+    // Try to save to server
+    try {
+      const serverPorts = CONFIG_PORTS.slice(0, 5);
+      let serverResult = null;
+
+      for (const port of serverPorts) {
+        try {
+          // Convert screenshots to action format for workflow storage (with logs)
+          const actions = screenshots.map((screenshot, index) => ({
+            type: 'screenshot',
+            timestamp: screenshot.timestamp,
+            x: screenshot.x || 0,
+            y: screenshot.y || 0,
+            screenshot_data: screenshot.data,
+            logs: screenshot.logs || [],
+            index: index
+          }));
+
+          const payloadData = {
+            sessionId: sessionId,
+            name: null, // Screenshots don't have custom names
+            url: tab.url,
+            title: tab.title,
+            includeLogs: true, // Now capturing logs
+            screenshotSettings: {
+              enabled: true,
+              format: 'jpeg',
+              quality: 100 // High quality for screenshot mode
+            },
+            actions: actions,
+            logs: allLogs, // Include all logs for the session
+            functionTraces: [],
+            recordingMode: 'screenshot' // Mark as screenshot recording
+          };
+
+          const httpResponse = await fetch(`http://localhost:${port}/chromedebug/workflow-recording`, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(payloadData)
+          });
+
+          if (httpResponse.ok) {
+            serverResult = await httpResponse.json();
+            // console.log(`[Screenshot] Saved to server on port ${port}:`, serverResult);
+            break;
+          }
+        } catch (error) {
+          // console.log(`[Screenshot] Failed to save to server on port ${port}:`, error.message);
+        }
+      }
+
+      // Clean up session ID from storage
+      await chrome.storage.local.remove(['currentScreenshotSessionId']);
+
+      if (serverResult) {
+        return {
+          success: true,
+          screenshotCount: screenshots.length,
+          sessionId: serverResult.workflowId || serverResult.sessionId || sessionId,
+          savedToServer: true
+        };
+      } else {
+        return {
+          success: true,
+          screenshotCount: screenshots.length,
+          sessionId: sessionId,
+          savedToServer: false
+        };
+      }
+    } catch (error) {
+      console.error('[Screenshot] Error saving screenshots:', error);
+      await chrome.storage.local.remove(['currentScreenshotSessionId']);
+      return {
+        success: true,
+        screenshotCount: screenshots.length,
+        sessionId: sessionId,
+        savedToServer: false,
+        error: error.message
+      };
+    }
+  } catch (error) {
+    console.error('[Screenshot] Error stopping screenshot recording:', error);
+    throw error;
+  }
+}
+
+/**
+ * Capture a high-quality screenshot for screenshot recording mode
+ * @param {number} tabId - The tab to capture
+ */
+async function captureHighQualityScreenshot(tabId) {
+  try {
+    const dataUrl = await throttledCaptureVisibleTab(null, {
+      format: 'jpeg',
+      quality: 100 // Best quality for screenshot mode
+    });
+    return dataUrl;
+  } catch (error) {
+    console.error('[Screenshot] Error capturing screenshot:', error);
+    throw error;
+  }
+}
+
 // Delete recording from server
 async function deleteRecordingFromServer(recordingId, sendResponse) {
   try {
@@ -4092,9 +4568,13 @@ async function handleFrameBatch(batchData, skipValidation = false) {
     const ports = await getServerPorts();
     let uploadSuccess = false;
     let lastError = null;
-    
-    // Get session name from current session
-    const sessionName = currentSession?.settings?.sessionName || null;
+
+    // Get session name and video mode from current session OR cached metadata
+    // The cache persists after stopRecording() clears currentSession, ensuring
+    // in-flight frame batches still have access to videoMode setting
+    const cachedMetadata = sessionMetadataCache.get(batchData.sessionId);
+    const sessionName = currentSession?.settings?.sessionName || cachedMetadata?.sessionName || null;
+    const isVideoMode = currentSession?.settings?.videoMode ?? cachedMetadata?.videoMode ?? false;
 
     for (const port of ports) {
       try {
@@ -4104,6 +4584,8 @@ async function handleFrameBatch(batchData, skipValidation = false) {
         if (sessionName) {
           formData.append('sessionName', sessionName);
         }
+        // Always include isVideoMode for proper recording classification
+        formData.append('isVideoMode', isVideoMode.toString());
 
         const uploadResponse = await fetch(`http://localhost:${port}/chromedebug/frame-batch`, {
           method: 'POST',
@@ -4115,33 +4597,41 @@ async function handleFrameBatch(batchData, skipValidation = false) {
           // console.log(`Frame batch uploaded successfully to port ${port}:`, result);
           recordingServerPort = port; // Store the successful port
           uploadSuccess = true;
-          
-          // Also save frames to Chrome local storage
-          const storageKey = batchData.sessionId;
-          const existingData = await chrome.storage.local.get([storageKey]);
-          const sessionData = existingData[storageKey] || {
-            sessionId: batchData.sessionId,
-            frames: [],
-            timestamp: Date.now()
-          };
-          
-          // Append new frames
-          sessionData.frames = sessionData.frames.concat(batchData.frames);
-          await chrome.storage.local.set({ [storageKey]: sessionData });
-          // console.log(`Saved ${batchData.frames.length} frames to local storage, total: ${sessionData.frames.length}`);
+
+          // NOTE: Do NOT store frames to local storage in server mode!
+          // Chrome extension storage.local has a 5MB quota limit.
+          // At 4 FPS with ~100KB/frame, this fills in ~12 seconds.
+          // Frames are already on the server, no backup needed.
+
+          // Track frame count in memory instead
+          const currentCount = frameCounter.get(batchData.sessionId) || 0;
+          const newCount = currentCount + batchData.frames.length;
+          frameCounter.set(batchData.sessionId, newCount);
 
           // Send frame count update to content script
           if (recordingTabId) {
             try {
               await chrome.tabs.sendMessage(recordingTabId, {
                 action: 'updateFrameCount',
-                frameCount: sessionData.frames.length
+                frameCount: newCount
               });
             } catch (e) {
               // Tab might be closed, ignore
             }
           }
 
+          // Clean up metadata cache if recording is stopped
+          // Use a delay to ensure any remaining batches can still access the cache
+          if (!isCurrentlyRecording && sessionMetadataCache.has(batchData.sessionId)) {
+            const sessionToClean = batchData.sessionId;
+            setTimeout(() => {
+              // Only delete if this specific session is no longer active
+              if (currentSession?.sessionId !== sessionToClean) {
+                sessionMetadataCache.delete(sessionToClean);
+              }
+            }, 10000); // 10 second delay for safety margin
+          }
+
           break;
         } else {
           const errorText = await uploadResponse.text();
@@ -4667,11 +5157,12 @@ async function handleFrameCaptureComplete(sessionData) {
     frameCounter.delete(sessionData.sessionId); // Clean up frame counter
     screenInteractions = []; // Clear interactions
     
-    // Update storage
-    chrome.storage.local.set({ 
-      recordingActive: false, 
+    // Update storage - clear isVideoModeActive for consistency
+    chrome.storage.local.set({
+      recordingActive: false,
       recordingStartTime: null,
-      recordingTabId: null
+      recordingTabId: null,
+      isVideoModeActive: false
     });
     
     // Update badge