@dynamicu/chromedebug-mcp 2.7.0 → 2.7.1

package/chrome-extension/background.js

@@ -1,6 +1,6 @@
 // Background script to handle server communication and recording
 const EXTENSION_VERSION = '2.0.4-BUILD-20250119';
-console.log(`[background.js] Loaded version: ${EXTENSION_VERSION}`);
+// console.log(`[background.js] Loaded version: ${EXTENSION_VERSION}`);
 
 // Import configuration and libraries
 importScripts('extension-config.js');
@@ -93,7 +93,7 @@ async function checkUsageBeforeRecording() {
 async function incrementUsageAfterRecording() {
   // PRO version: skip tracking
   if (isProVersion()) {
-    console.log('[Usage] PRO version - skipping usage tracking');
+    // console.log('[Usage] PRO version - skipping usage tracking');
     return { success: true, count: 0, limit: Infinity, isPro: true };
   }
 
@@ -108,7 +108,7 @@ async function incrementUsageAfterRecording() {
     [USAGE_STORAGE_KEY]: { count: newCount, date: today }
   });
 
-  console.log(`[Usage] Recording tracked: ${newCount}/${FREE_TIER_DAILY_LIMIT} today`);
+  // console.log(`[Usage] Recording tracked: ${newCount}/${FREE_TIER_DAILY_LIMIT} today`);
 
   return { success: true, count: newCount, limit: FREE_TIER_DAILY_LIMIT };
 }
@@ -154,7 +154,7 @@ class LogStreamer {
   async init() {
     // Skip initialization in browser-only mode
     if (serverMode === 'browser-only') {
-      console.log('[LogStreamer] Skipping initialization - browser-only mode');
+      // console.log('[LogStreamer] Skipping initialization - browser-only mode');
       return;
     }
 
@@ -164,7 +164,7 @@ class LogStreamer {
     // Start periodic streaming
     this.startPeriodicStreaming();
 
-    console.log('[LogStreamer] Initialized with server availability:', this.serverAvailable);
+    // console.log('[LogStreamer] Initialized with server availability:', this.serverAvailable);
   }
 
   async checkServerAvailability() {
@@ -176,7 +176,7 @@ class LogStreamer {
         });
         if (response.ok) {
           this.serverAvailable = true;
-          console.log(`[LogStreamer] Server available on port ${port}`);
+          // console.log(`[LogStreamer] Server available on port ${port}`);
           return;
         }
       } catch (error) {
@@ -184,7 +184,7 @@ class LogStreamer {
       }
     }
     this.serverAvailable = false;
-    console.log('[LogStreamer] No server available');
+    // console.log('[LogStreamer] No server available');
   }
 
   startPeriodicStreaming() {
@@ -227,7 +227,7 @@ class LogStreamer {
     // This gives frames time to be processed before logs are associated
     const timeSinceLastFrame = Date.now() - this.lastFrameCapture;
     if (this.lastFrameCapture > 0 && timeSinceLastFrame < 100) {
-      console.log('[LogStreamer] Waiting for frame processing before streaming logs');
+      // console.log('[LogStreamer] Waiting for frame processing before streaming logs');
       return; // Wait for next cycle
     }
 
@@ -256,7 +256,7 @@ class LogStreamer {
   // Method to notify LogStreamer when frame is captured
   notifyFrameCapture() {
     this.lastFrameCapture = Date.now();
-    console.log('[LogStreamer] Frame capture notification received');
+    // console.log('[LogStreamer] Frame capture notification received');
   }
 
   async sendToServer(batch) {
@@ -280,7 +280,7 @@ class LogStreamer {
           const result = await response.json();
           // Only log if we had to try multiple ports (first port failed)
           if (port !== this.serverPorts[0]) {
-            console.log(`[LogStreamer] Connected to server on port ${port}`);
+            // console.log(`[LogStreamer] Connected to server on port ${port}`);
           }
           return result;
         }
@@ -331,7 +331,7 @@ class LogStreamer {
       if (now >= item.nextRetry && item.attempts < 3) {
         try {
           await this.sendToServer(item.batch);
-          console.log(`[LogStreamer] Retry successful for batch with ${item.batch.length} logs`);
+          // console.log(`[LogStreamer] Retry successful for batch with ${item.batch.length} logs`);
         } catch (error) {
           item.attempts++;
           item.nextRetry = now + (1000 * Math.pow(2, item.attempts)); // Exponential backoff
@@ -389,7 +389,7 @@ class LogBuffer {
   // Flush all buffers to Chrome storage
   async flushAll() {
     if (this.flushInProgress) {
-      console.log('[LogBuffer] Flush already in progress, waiting for completion...');
+      // console.log('[LogBuffer] Flush already in progress, waiting for completion...');
       // Wait for current flush to complete instead of skipping
       while (this.flushInProgress) {
         await new Promise(resolve => setTimeout(resolve, 10));
@@ -402,7 +402,7 @@ class LogBuffer {
     const startTime = Date.now();
 
     try {
-      console.log(`[LogBuffer] Starting flushAll for ${this.tabBuffers.size} tabs`);
+      // console.log(`[LogBuffer] Starting flushAll for ${this.tabBuffers.size} tabs`);
 
       for (const [tabId, tabBuffer] of this.tabBuffers) {
         flushPromises.push(tabBuffer.flush());
@@ -410,7 +410,7 @@ class LogBuffer {
 
       await Promise.all(flushPromises);
       const duration = Date.now() - startTime;
-      console.log(`[LogBuffer] Successfully flushed all buffers for ${this.tabBuffers.size} tabs in ${duration}ms`);
+      // console.log(`[LogBuffer] Successfully flushed all buffers for ${this.tabBuffers.size} tabs in ${duration}ms`);
     } catch (error) {
       console.error('[LogBuffer] Error during flush operation:', error);
       throw error; // Re-throw to ensure proper error handling upstream
@@ -431,7 +431,7 @@ class LogBuffer {
   clearTab(tabId) {
     if (this.tabBuffers.has(tabId)) {
       this.tabBuffers.delete(tabId);
-      console.log(`[LogBuffer] Cleared buffer for tab ${tabId}`);
+      // console.log(`[LogBuffer] Cleared buffer for tab ${tabId}`);
     }
   }
 
@@ -457,7 +457,7 @@ class LogBuffer {
   // Debug method to log current buffer state
   logStats() {
     const stats = this.getStats();
-    console.log('[LogBuffer] Current statistics:', stats);
+    // console.log('[LogBuffer] Current statistics:', stats);
     return stats;
   }
 }
@@ -572,7 +572,7 @@ class LogTabBuffer {
       }
 
       this.totalLogsFlushed += this.buffer.length;
-      console.log(`[LogBuffer] Flushed ${this.buffer.length} logs for tab ${this.tabId} (total: ${this.totalLogsFlushed})`);
+      // console.log(`[LogBuffer] Flushed ${this.buffer.length} logs for tab ${this.tabId} (total: ${this.totalLogsFlushed})`);
 
       // Clear the buffer
       this.buffer = [];
@@ -715,7 +715,7 @@ class WorkflowLogBuffer {
       }
 
       this.totalLogsFlushed += this.buffer.length;
-      console.log(`[WorkflowLogBuffer] Flushed ${this.buffer.length} logs for tab ${this.tabId} (total: ${this.totalLogsFlushed})`);
+      // console.log(`[WorkflowLogBuffer] Flushed ${this.buffer.length} logs for tab ${this.tabId} (total: ${this.totalLogsFlushed})`);
 
       // Clear the buffer
       this.buffer = [];
@@ -746,7 +746,7 @@ class WorkflowLogBuffer {
       if (this.buffer.length > 0) {
         await this.performFlush();
       }
-      console.log(`[WorkflowLogBuffer] Cleaned up buffer for tab ${this.tabId}`);
+      // console.log(`[WorkflowLogBuffer] Cleaned up buffer for tab ${this.tabId}`);
     } catch (error) {
       console.error(`[WorkflowLogBuffer] Error during cleanup for tab ${this.tabId}:`, error);
     }
@@ -809,10 +809,10 @@ const DATA_PROTECTION_TIERS = {
 async function initializeServices() {
   try {
     // FIRST: Initialize comprehensive error handling system
-    console.log('[Background] Initializing comprehensive error handling...');
+    // console.log('[Background] Initializing comprehensive error handling...');
     const errorHandlingSuccess = await initializeErrorHandling();
     if (errorHandlingSuccess) {
-      console.log('[Background] Comprehensive error handling initialized successfully');
+      // console.log('[Background] Comprehensive error handling initialized successfully');
     } else {
       console.warn('[Background] Error handling initialization failed - continuing with basic functionality');
     }
@@ -820,16 +820,16 @@ async function initializeServices() {
     // Initialize the data buffer
     dataBuffer = new DataBuffer();
     await dataBuffer.init();
-    console.log('[Background] Data buffer initialized');
+    // console.log('[Background] Data buffer initialized');
     
     // Only create upload manager if data buffer initialized successfully
     try {
       uploadManager = new UploadManager(dataBuffer);
       const serverAvailable = await uploadManager.init();
       if (serverAvailable) {
-        console.log('[Background] Upload manager initialized with server');
+        // console.log('[Background] Upload manager initialized with server');
       } else {
-        console.log('[Background] Upload manager initialized but no server available yet');
+        // console.log('[Background] Upload manager initialized but no server available yet');
       }
     } catch (uploadErr) {
       console.error('[Background] Failed to initialize upload manager:', uploadErr);
@@ -841,7 +841,7 @@ async function initializeServices() {
     try {
       logStreamer = new LogStreamer();
       await logStreamer.init();
-      console.log('[Background] Log streamer initialized');
+      // console.log('[Background] Log streamer initialized');
     } catch (streamErr) {
       console.error('[Background] Failed to initialize log streamer:', streamErr);
       logStreamer = null;
@@ -850,7 +850,7 @@ async function initializeServices() {
     // Initialize log buffer for race-condition-free storage
     try {
       logBuffer = new LogBuffer();
-      console.log('[Background] Log buffer initialized');
+      // console.log('[Background] Log buffer initialized');
     } catch (bufferErr) {
       console.error('[Background] Failed to initialize log buffer:', bufferErr);
       logBuffer = null;
@@ -859,7 +859,7 @@ async function initializeServices() {
     // Initialize browser recording manager for browser-only mode
     try {
       browserRecordingManager = new BrowserRecordingManager(dataBuffer);
-      console.log('[Background] Browser recording manager initialized');
+      // console.log('[Background] Browser recording manager initialized');
     } catch (recordingErr) {
       console.error('[Background] Failed to initialize browser recording manager:', recordingErr);
       browserRecordingManager = null;
@@ -869,12 +869,12 @@ async function initializeServices() {
     try {
       if (!sessionManager) {
         sessionManager = new ChromeExtensionSessionManager();
-        console.log('[Background] Session manager initialized');
+        // console.log('[Background] Session manager initialized');
       }
 
       // Recover any stuck sessions on startup
       await sessionManager.recoverSessions();
-      console.log('[Background] Session recovery completed');
+      // console.log('[Background] Session recovery completed');
     } catch (sessionErr) {
       console.error('[Background] Failed to initialize session manager:', sessionErr);
       // Session manager critical for recording - but don't fail completely
@@ -1012,12 +1012,12 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
           }));
           
           dataBuffer.addBatch(eventsWithRecordingId).then(() => {
-            console.log(`[Background] Added ${eventsWithRecordingId.length} events to buffer for recording ${message.recordingId}`);
+            // console.log(`[Background] Added ${eventsWithRecordingId.length} events to buffer for recording ${message.recordingId}`);
             // Create a batch if we have enough events
             return dataBuffer.createBatch(message.recordingId);
           }).then(batch => {
             if (batch) {
-              console.log(`[Background] Created batch ${batch.id} with ${batch.events.length} events`);
+              // console.log(`[Background] Created batch ${batch.id} with ${batch.events.length} events`);
               // Process upload queue if upload manager is available
               if (uploadManager) {
                 uploadManager.processUploadQueue();
@@ -1086,7 +1086,7 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
           sessionId: message.sessionId
         }).catch(() => {
           // Content script might not be available
-          console.log('[Background] Could not forward start-screen-capture-tracking to content script');
+          // console.log('[Background] Could not forward start-screen-capture-tracking to content script');
         });
       }
       sendResponse({ success: true });
@@ -1098,7 +1098,7 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
         chrome.tabs.sendMessage(sender.tab.id, {
           type: 'stop-screen-capture-tracking'
         }).catch(() => {
-          console.log('[Background] Could not forward stop-screen-capture-tracking to content script');
+          // console.log('[Background] Could not forward stop-screen-capture-tracking to content script');
         });
       }
       sendResponse({ success: true });
@@ -1128,7 +1128,7 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
                 frameIndex: frameIndex
               };
               screenInteractions.push(interaction);
-              console.log('[Background] Visual feedback interaction recorded:', interaction.type, 'Total:', screenInteractions.length);
+              // console.log('[Background] Visual feedback interaction recorded:', interaction.type, 'Total:', screenInteractions.length);
             }
           }).catch(error => {
             console.error('Error validating recording state for interaction:', error);
@@ -1141,7 +1141,7 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
               frameIndex: frameCounter.get(currentRecordingSessionId) || 0
             };
             screenInteractions.push(interaction);
-            console.log('[Background] Visual feedback interaction recorded:', interaction.type, 'Total:', screenInteractions.length);
+            // console.log('[Background] Visual feedback interaction recorded:', interaction.type, 'Total:', screenInteractions.length);
           }
         }
       }
@@ -1154,7 +1154,7 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
         chrome.tabs.sendMessage(sender.tab.id, {
           type: 'screen-capture-frame-captured'
         }).catch(() => {
-          console.log('[Background] Could not forward frame flash to content script');
+          // console.log('[Background] Could not forward frame flash to content script');
         });
       }
       // Don't send response to avoid warnings
@@ -1165,7 +1165,7 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
       if (logBuffer && sender.tab) {
         const tabId = sender.tab.id;
         const testLogsCount = message.count || 1000;
-        console.log(`[Background] Starting LogBuffer race condition test with ${testLogsCount} logs for tab ${tabId}`);
+        // console.log(`[Background] Starting LogBuffer race condition test with ${testLogsCount} logs for tab ${tabId}`);
 
         // Simulate rapid log generation like a real high-volume scenario
         const startTime = Date.now();
@@ -1188,8 +1188,8 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
         Promise.all(logPromises).then(() => {
           const endTime = Date.now();
           const stats = logBuffer.getStats();
-          console.log(`[Background] LogBuffer test completed in ${endTime - startTime}ms`);
-          console.log(`[Background] Test results:`, stats);
+          // console.log(`[Background] LogBuffer test completed in ${endTime - startTime}ms`);
+          // console.log(`[Background] Test results:`, stats);
 
           sendResponse({
             success: true,
@@ -1219,7 +1219,7 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
       // DEBUG: Get current LogBuffer statistics
       if (logBuffer) {
         const stats = logBuffer.getStats();
-        console.log('[Background] LogBuffer stats requested:', stats);
+        // console.log('[Background] LogBuffer stats requested:', stats);
         sendResponse({
           success: true,
           stats: stats
@@ -1234,10 +1234,10 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
 
     case 'getBrowserRecordings':
       // Get all browser-only recordings from IndexedDB
-      console.log('[Background] getBrowserRecordings - Manager exists:', !!browserRecordingManager);
+      // console.log('[Background] getBrowserRecordings - Manager exists:', !!browserRecordingManager);
       if (browserRecordingManager) {
         browserRecordingManager.listRecordings().then(recordings => {
-          console.log('[Background] Recordings retrieved from manager:', recordings);
+          // console.log('[Background] Recordings retrieved from manager:', recordings);
           sendResponse(recordings);
         }).catch(error => {
           console.error('[Background] Failed to get browser recordings:', error);
@@ -1284,7 +1284,7 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
       // Get frames for a browser-only recording
       if (dataBuffer && message.sessionId) {
         dataBuffer.getBrowserFrames(message.sessionId).then(frames => {
-          console.log(`[DEBUG] getBrowserRecordingFrames: Retrieved ${frames.length} frames from IndexedDB`);
+          // console.log(`[DEBUG] getBrowserRecordingFrames: Retrieved ${frames.length} frames from IndexedDB`);
 
           // Debug first frame to see structure
           if (frames.length > 0) {
@@ -1298,7 +1298,7 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
               frameIndex: firstFrame.frameIndex,
               allKeys: Object.keys(firstFrame)
             };
-            console.log('[DEBUG] First frame structure:', JSON.stringify(debugInfo, null, 2));
+            // console.log('[DEBUG] First frame structure:', JSON.stringify(debugInfo, null, 2));
           }
 
           // Transform frames to match frame editor's expected structure
@@ -1315,7 +1315,7 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
             logsCount: transformedFrames[0].logs ? transformedFrames[0].logs.length : 0,
             allKeys: Object.keys(transformedFrames[0])
           } : 'No frames';
-          console.log('[DEBUG] Transformed first frame:', JSON.stringify(transformDebug, null, 2));
+          // console.log('[DEBUG] Transformed first frame:', JSON.stringify(transformDebug, null, 2));
 
           sendResponse({ success: true, frames: transformedFrames });
         }).catch(error => {
@@ -1341,7 +1341,7 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     default:
       // Don't warn or respond for messages that should be handled by other listener (v2.0.6)
       // This prevents intercepting workflow recording messages
-      console.log('[Background v2.0.6] Message not handled by this listener:', messageType);
+      // console.log('[Background v2.0.6] Message not handled by this listener:', messageType);
       // Don't send response - let other listener handle it
       return;
   }
@@ -1351,13 +1351,13 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
 
 // Session recovery on startup - handle any stuck recordings from previous session
 chrome.runtime.onStartup.addListener(async () => {
-  console.log('[Background] Extension startup detected - checking for stuck sessions');
+  // console.log('[Background] Extension startup detected - checking for stuck sessions');
 
   if (sessionManager) {
     try {
       // Use existing recovery method from session manager
       await sessionManager.recoverSessions();
-      console.log('[Background] Startup session recovery completed');
+      // console.log('[Background] Startup session recovery completed');
     } catch (error) {
       console.error('[Background] Failed to recover sessions on startup:', error);
     }
@@ -1368,7 +1368,7 @@ chrome.runtime.onStartup.addListener(async () => {
 
 // Extension install/update
 chrome.runtime.onInstalled.addListener(async (details) => {
-  console.log('[Background] Extension installed/updated:', details.reason);
+  // console.log('[Background] Extension installed/updated:', details.reason);
 });
 
 // Listen for tab updates to handle restore points
@@ -1380,7 +1380,7 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
       isCurrentlyRecordingAsync().then(async (recording) => {
         const currentTabId = await getCurrentTabIdAsync();
         if (recording && tabId === currentTabId && tab.url && !tab.url.startsWith('chrome://') && !tab.url.startsWith('chrome-extension://')) {
-          console.log('Re-injecting console logging for navigation during recording');
+          // console.log('Re-injecting console logging for navigation during recording');
           startCapturingLogs(tabId).catch(err => {
             console.error('Failed to re-inject console logging:', err);
           });
@@ -1391,7 +1391,7 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
     } else {
       // Legacy fallback
       if (tabId === recordingTabId && isCurrentlyRecording && tab.url && !tab.url.startsWith('chrome://') && !tab.url.startsWith('chrome-extension://')) {
-        console.log('Re-injecting console logging for navigation during recording');
+        // console.log('Re-injecting console logging for navigation during recording');
         startCapturingLogs(tabId).catch(err => {
           console.error('Failed to re-inject console logging:', err);
         });
@@ -1470,7 +1470,7 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
 chrome.tabs.onRemoved.addListener((tabId, removeInfo) => {
   // Clean up any workflow recording state for closed tabs
   if (workflowRecordingTabs.has(tabId)) {
-    console.log(`[Workflow] Tab ${tabId} closed during recording, cleaning up`);
+    // console.log(`[Workflow] Tab ${tabId} closed during recording, cleaning up`);
     workflowRecordingTabs.delete(tabId);
     workflowIncludeLogs.delete(tabId);
     workflowScreenshotSettings.delete(tabId);
@@ -1481,7 +1481,7 @@ chrome.tabs.onRemoved.addListener((tabId, removeInfo) => {
     if (buffer) {
       buffer.cleanup().then(() => {
         workflowLogBuffers.delete(tabId);
-        console.log(`[Workflow] Cleaned up WorkflowLogBuffer for closed tab ${tabId}`);
+        // console.log(`[Workflow] Cleaned up WorkflowLogBuffer for closed tab ${tabId}`);
       }).catch(err => {
         console.error(`[Workflow] Error cleaning up buffer for closed tab ${tabId}:`, err);
         workflowLogBuffers.delete(tabId);
@@ -1519,11 +1519,148 @@ let isCurrentlyRecording = false; // DEPRECATED: Use isCurrentlyRecordingAsync()
 let currentRecordingSessionId = null; // DEPRECATED: Use getCurrentSessionIdAsync() instead
 let frameCounter = new Map(); // DEPRECATED: Session manager handles frame counting
 
+// =============================================================================
+// INACTIVITY AUTO-STOP - Stop recording if user is inactive
+// =============================================================================
+const DEFAULT_INACTIVITY_TIMEOUT_MS = 10 * 1000; // 10 seconds default
+let lastUserActivityTime = Date.now();
+let inactivityCheckInterval = null;
+let currentInactivityTimeout = DEFAULT_INACTIVITY_TIMEOUT_MS;
+let inactivityMonitoringStarted = false; // Track if monitoring has started
+let inactivityFallbackTimer = null; // Fallback timer if countdownComplete not received
+let inactivityDisabled = false; // User can disable for current session
+
+/**
+ * Start inactivity monitoring for a recording
+ * @param {number} tabId - Tab ID to monitor
+ */
+async function startInactivityMonitoring(tabId) {
+  // Mark as started (for fallback timer check)
+  inactivityMonitoringStarted = true;
+
+  // Clear fallback timer since we're starting properly
+  if (inactivityFallbackTimer) {
+    clearTimeout(inactivityFallbackTimer);
+    inactivityFallbackTimer = null;
+  }
+
+  // Load user's configured timeout from storage
+  const settings = await chrome.storage.sync.get(['inactivityTimeout']);
+  currentInactivityTimeout = (settings.inactivityTimeout || 10) * 1000; // Convert seconds to ms (default 10s)
+
+  lastUserActivityTime = Date.now();
+
+  // Tell content script to start tracking activity AND send config for countdown display
+  try {
+    await chrome.tabs.sendMessage(tabId, {
+      action: 'startActivityTracking',
+      inactivityTimeoutMs: currentInactivityTimeout,
+      disabled: inactivityDisabled
+    });
+  } catch (error) {
+    console.warn('[Inactivity] Could not start activity tracking in content script:', error.message);
+  }
+
+  // Clear any existing interval
+  if (inactivityCheckInterval) {
+    clearInterval(inactivityCheckInterval);
+  }
+
+  // If disabled, don't start the check interval
+  if (inactivityDisabled) {
+    return;
+  }
+
+  // Check for inactivity every 2 seconds
+  inactivityCheckInterval = setInterval(async () => {
+    // Skip if disabled
+    if (inactivityDisabled) return;
+
+    const timeSinceActivity = Date.now() - lastUserActivityTime;
+    const timeRemaining = Math.max(0, currentInactivityTimeout - timeSinceActivity);
+
+    // Send countdown update to content script
+    try {
+      await chrome.tabs.sendMessage(tabId, {
+        action: 'updateInactivityCountdown',
+        timeRemaining: Math.ceil(timeRemaining / 1000),
+        disabled: inactivityDisabled
+      });
+    } catch (e) {
+      // Tab might be closed, ignore
+    }
+
+    if (timeSinceActivity >= currentInactivityTimeout) {
+      // Stop the recording first
+      await stopRecording();
+
+      // Show notification with link to settings
+      try {
+        await chrome.notifications.create('inactivity-stop', {
+          type: 'basic',
+          iconUrl: 'icon128.png',
+          title: 'Recording Auto-Stopped',
+          message: `Recording stopped after ${Math.round(currentInactivityTimeout / 1000)}s of inactivity. Click to adjust timeout in Settings.`,
+          priority: 2
+        });
+      } catch (e) {
+        console.warn('[Inactivity] Could not show notification:', e.message);
+      }
+    }
+  }, 2000); // Check every 2 seconds
+}
+
+/**
+ * Stop inactivity monitoring
+ * @param {number} tabId - Tab ID that was being monitored
+ */
+async function stopInactivityMonitoring(tabId) {
+  if (inactivityCheckInterval) {
+    clearInterval(inactivityCheckInterval);
+    inactivityCheckInterval = null;
+  }
+
+  // Clear fallback timer
+  if (inactivityFallbackTimer) {
+    clearTimeout(inactivityFallbackTimer);
+    inactivityFallbackTimer = null;
+  }
+
+  // Reset state for next recording
+  inactivityMonitoringStarted = false;
+  inactivityDisabled = false; // Reset disabled state for next session
+
+  // Tell content script to stop tracking
+  if (tabId) {
+    try {
+      await chrome.tabs.sendMessage(tabId, { action: 'stopActivityTracking' });
+    } catch (error) {
+      // Tab might be closed, that's ok
+    }
+  }
+}
+
+/**
+ * Handle user activity report from content script
+ * @param {number} timestamp - Activity timestamp
+ */
+function handleUserActivity(timestamp) {
+  lastUserActivityTime = timestamp || Date.now();
+}
+
+// Handle notification clicks - open settings page when inactivity notification is clicked
+chrome.notifications.onClicked.addListener((notificationId) => {
+  if (notificationId === 'inactivity-stop') {
+    chrome.runtime.openOptionsPage();
+    chrome.notifications.clear(notificationId);
+  }
+});
+
 // Initialize session manager
 (async function initializeSessionManager() {
   try {
     sessionManager = new ChromeExtensionSessionManager();
-    console.log('[ChromeSessionManager] Initialized successfully');
+    // console.log('[ChromeSessionManager] Initialized successfully');
   } catch (error) {
     console.error('[ChromeSessionManager] Failed to initialize:', error);
   }
@@ -1659,7 +1796,7 @@ let workflowLogBuffers = new Map(); // Map of tabId to WorkflowLogBuffer instanc
  */
 async function initializeErrorHandling() {
   try {
-    console.log('[ErrorHandling] Initializing comprehensive error handling system...');
+    // console.log('[ErrorHandling] Initializing comprehensive error handling system...');
 
     // Generate session ID if not exists
     if (!errorHandlingState.sessionId) {
@@ -1682,11 +1819,11 @@ async function initializeErrorHandling() {
     errorHandlingState.isInitialized = true;
     errorHandlingState.currentState = 'NORMAL_OPERATION';
 
-    console.log('[ErrorHandling] System initialization complete:', {
-      sessionId: errorHandlingState.sessionId,
-      state: errorHandlingState.currentState,
-      circuitBreaker: errorHandlingState.circuitBreakerState
-    });
+    // console.log('[ErrorHandling] System initialization complete:', {
+    //   sessionId: errorHandlingState.sessionId,
+    //   state: errorHandlingState.currentState,
+    //   circuitBreaker: errorHandlingState.circuitBreakerState
+    // });
 
     return true;
   } catch (error) {
@@ -1711,7 +1848,7 @@ async function initializeBackupStorage() {
     };
 
     request.onsuccess = () => {
-      console.log('[ErrorHandling] IndexedDB initialized successfully');
+      // console.log('[ErrorHandling] IndexedDB initialized successfully');
       resolve(request.result);
     };
 
@@ -1741,7 +1878,7 @@ async function initializeBackupStorage() {
         errorStore.createIndex('timestamp', 'timestamp', { unique: false });
       }
 
-      console.log('[ErrorHandling] IndexedDB schema created');
+      // console.log('[ErrorHandling] IndexedDB schema created');
     };
   });
 }
@@ -1752,7 +1889,7 @@ async function initializeBackupStorage() {
 function initializeCircuitBreaker() {
   errorHandlingState.circuitBreakerState = 'CLOSED';
   errorHandlingState.failedSaveCount = 0;
-  console.log('[ErrorHandling] Circuit breaker initialized in CLOSED state');
+  // console.log('[ErrorHandling] Circuit breaker initialized in CLOSED state');
 }
 
 /**
@@ -1765,7 +1902,7 @@ async function setupNotificationSystem() {
     await chrome.notifications.clear(notificationId);
   }
 
-  console.log('[ErrorHandling] Notification system ready');
+  // console.log('[ErrorHandling] Notification system ready');
 }
 
 /**
@@ -1804,7 +1941,7 @@ async function cleanupOldBackups() {
         }
       };
 
-      console.log('[ErrorHandling] Cleanup completed for data older than', ERROR_HANDLING_CONFIG.backupRetentionDays, 'days');
+      // console.log('[ErrorHandling] Cleanup completed for data older than', ERROR_HANDLING_CONFIG.backupRetentionDays, 'days');
     };
   } catch (error) {
     console.error('[ErrorHandling] Failed to cleanup old backups:', error);
@@ -1831,13 +1968,13 @@ async function handleSaveAttempt(saveFunction, data, context = {}) {
     if (errorHandlingState.circuitBreakerState === 'OPEN') {
       const timeSinceLastFailure = Date.now() - (errorHandlingState.lastError?.timestamp || 0);
       if (timeSinceLastFailure < ERROR_HANDLING_CONFIG.resetTimeout) {
-        console.log('[ErrorHandling] Circuit breaker OPEN, attempting backup instead');
+        // console.log('[ErrorHandling] Circuit breaker OPEN, attempting backup instead');
         await backupFailedData(data, context);
         return { success: false, circuitBreakerOpen: true };
       } else {
         // Try half-open
         errorHandlingState.circuitBreakerState = 'HALF_OPEN';
-        console.log('[ErrorHandling] Circuit breaker moving to HALF_OPEN state');
+        // console.log('[ErrorHandling] Circuit breaker moving to HALF_OPEN state');
       }
     }
 
@@ -1848,7 +1985,7 @@ async function handleSaveAttempt(saveFunction, data, context = {}) {
     if (result && result.success !== false) {
       errorHandlingState.circuitBreakerState = 'CLOSED';
       errorHandlingState.failedSaveCount = 0;
-      console.log('[ErrorHandling] Save successful, circuit breaker CLOSED');
+      // console.log('[ErrorHandling] Save successful, circuit breaker CLOSED');
       return { success: true, result };
     } else {
       throw new Error('Save function returned failure');
@@ -1888,7 +2025,7 @@ async function handleSaveFailure(error, data, context, attempt) {
   // Attempt backup
   try {
     await backupFailedData(data, context);
-    console.log('[ErrorHandling] Data backed up successfully');
+    // console.log('[ErrorHandling] Data backed up successfully');
   } catch (backupError) {
     console.error('[ErrorHandling] CRITICAL: Backup also failed:', backupError);
     await createUserNotification('CRITICAL', 'Data loss imminent - manual intervention required');
@@ -1984,7 +2121,7 @@ async function backupFailedData(data, context) {
       const store = transaction.objectStore('sessionBackups');
 
       store.add(backupData);
-      console.log('[ErrorHandling] Data backed up with session ID:', errorHandlingState.sessionId);
+      // console.log('[ErrorHandling] Data backed up with session ID:', errorHandlingState.sessionId);
     };
 
     // Also add to retained interactions if relevant
@@ -2025,7 +2162,7 @@ async function createUserNotification(priority, message) {
     }
 
     await chrome.notifications.create(notificationId, notificationOptions);
-    console.log('[ErrorHandling] User notification created:', notificationId);
+    // console.log('[ErrorHandling] User notification created:', notificationId);
 
     // Set up notification click handlers
     chrome.notifications.onButtonClicked.addListener((notifId, buttonIndex) => {
@@ -2045,16 +2182,16 @@ async function createUserNotification(priority, message) {
 async function handleNotificationAction(buttonIndex, priority) {
   switch (buttonIndex) {
     case 0: // Retry Save
-      console.log('[ErrorHandling] User requested retry');
+      // console.log('[ErrorHandling] User requested retry');
       await attemptRecovery();
       break;
     case 1: // View Details
-      console.log('[ErrorHandling] User requested error details');
+      // console.log('[ErrorHandling] User requested error details');
       // Could open an options page or log details
       break;
     case 2: // Download Backup (for critical errors)
       if (priority === 'CRITICAL') {
-        console.log('[ErrorHandling] User requested backup download');
+        // console.log('[ErrorHandling] User requested backup download');
         await downloadBackupData();
       }
       break;
@@ -2074,14 +2211,14 @@ async function attemptRecovery() {
 
       store.getAll().onsuccess = (event) => {
         const backups = event.target.result;
-        console.log('[ErrorHandling] Found', backups.length, 'backup records for recovery');
+        // console.log('[ErrorHandling] Found', backups.length, 'backup records for recovery');
 
         // Process each backup
         backups.forEach(async (backup) => {
           try {
             // Attempt to save the backed up data
             // This would call the original save function with the backed up data
-            console.log('[ErrorHandling] Attempting recovery for session:', backup.sessionId);
+            // console.log('[ErrorHandling] Attempting recovery for session:', backup.sessionId);
           } catch (error) {
             console.error('[ErrorHandling] Recovery failed for session:', backup.sessionId, error);
           }
@@ -2124,7 +2261,7 @@ async function downloadBackupData() {
             filename: `chrome-debug-backup-${Date.now()}.json`
           });
 
-          console.log('[ErrorHandling] Backup data download initiated');
+          // console.log('[ErrorHandling] Backup data download initiated');
         };
       };
     };
@@ -2140,7 +2277,7 @@ async function createOffscreenDocument() {
     const hasDocument = await chrome.offscreen.hasDocument();
     if (hasDocument) {
       hasOffscreenDocument = true;
-      console.log('Offscreen document already exists');
+      // console.log('Offscreen document already exists');
       return;
     }
     
@@ -2151,12 +2288,12 @@ async function createOffscreenDocument() {
       justification: 'Recording tab frames for Chrome Debug'
     });
     hasOffscreenDocument = true;
-    console.log('Created new offscreen document');
+    // console.log('Created new offscreen document');
   } catch (error) {
     if (error.message.includes('Only a single offscreen document may be created')) {
       // Document already exists, just mark it as available
       hasOffscreenDocument = true;
-      console.log('Offscreen document already exists (caught error)');
+      // console.log('Offscreen document already exists (caught error)');
     } else {
       throw error;
     }
@@ -2174,7 +2311,7 @@ async function closeOffscreenDocument() {
 }
 
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-  console.log('Received message:', request.action || request.type || 'unknown');
+  // console.log('Received message:', request.action || request.type || 'unknown');
   
   if (request.action === 'sendToServer') {
     // Primary port is 3028 - try it first, then fallback to others if needed
@@ -2182,11 +2319,11 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     
     async function tryPorts() {
       let lastError = null;
-      console.log('Trying to connect to server...');
+      // console.log('Trying to connect to server...');
       
       for (const port of ports) {
         try {
-          console.log(`Trying port ${port}...`);
+          // console.log(`Trying port ${port}...`);
           const controller = new AbortController();
           const timeoutId = setTimeout(() => controller.abort(), DISCOVERY_TIMEOUT);
           
@@ -2203,7 +2340,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
           
           if (response.ok) {
             const result = await response.json();
-            console.log(`Success on port ${port}:`, result);
+            // console.log(`Success on port ${port}:`, result);
             sendResponse({ success: true, result, port });
             return;
           } else {
@@ -2211,7 +2348,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
             try {
               const errorData = await response.json();
               if (errorData.message || errorData.error) {
-                console.log(`Port ${port} error:`, errorData);
+                // console.log(`Port ${port} error:`, errorData);
                 sendResponse({ 
                   success: false, 
                   result: errorData,
@@ -2223,11 +2360,11 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
               // Response wasn't JSON
             }
             lastError = `Port ${port}: HTTP ${response.status}`;
-            console.log(lastError);
+            // console.log(lastError);
           }
         } catch (e) {
           lastError = `Port ${port}: ${e.message}`;
-          console.log(lastError);
+          // console.log(lastError);
         }
       }
       
@@ -2305,7 +2442,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
 
   // Session manager lease renewal handler
   if (request.action === 'renewLease') {
-    console.log('[Background] RENEW LEASE - Session:', request.sessionId, 'Manager exists:', !!sessionManager);
+    // console.log('[Background] RENEW LEASE - Session:', request.sessionId, 'Manager exists:', !!sessionManager);
 
     if (!sessionManager) {
       console.error('[Background] Session manager not available');
@@ -2321,7 +2458,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     };
 
     sessionManager.renewLease(leaseRequest).then((result) => {
-      console.log('[Background] Lease renewed - Success:', result.success);
+      // console.log('[Background] Lease renewed - Success:', result.success);
       sendResponse(result);
     }).catch((error) => {
       console.error('[Background] Error renewing lease:', error);
@@ -2355,6 +2492,45 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     return true;
   }
 
+  // User activity handler for inactivity tracking
+  if (request.action === 'userActivity') {
+    handleUserActivity(request.timestamp);
+    sendResponse({ success: true });
+    return false; // Synchronous response
+  }
+
+  // Countdown complete handler - content script finished 3-2-1 countdown
+  if (request.action === 'countdownComplete') {
+    // Start inactivity monitoring now that countdown is done
+    // Use isCurrentlyRecording (the actual state variable)
+    if (isCurrentlyRecording && recordingTabId && !inactivityMonitoringStarted) {
+      startInactivityMonitoring(recordingTabId);
+    }
+    sendResponse({ success: true });
+    return false;
+  }
+
+  // Toggle inactivity timeout (user clicked disable/enable button)
+  if (request.action === 'toggleInactivityTimeout') {
+    inactivityDisabled = !inactivityDisabled;
+
+    if (inactivityDisabled) {
+      // Stop the check interval but keep tracking activity
+      if (inactivityCheckInterval) {
+        clearInterval(inactivityCheckInterval);
+        inactivityCheckInterval = null;
+      }
+    } else {
+      // Restart monitoring
+      if (recordingTabId && !inactivityCheckInterval) {
+        startInactivityMonitoring(recordingTabId);
+      }
+    }
+
+    sendResponse({ success: true, disabled: inactivityDisabled });
+    return false;
+  }
+
   // Force stop session handler (emergency)
   if (request.action === 'forceStopSession') {
     if (!sessionManager) {
@@ -2408,7 +2584,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    */
   /*
   if (request.action === 'takeStandaloneSnapshot') {
-    console.log('Taking standalone snapshot for tab:', request.tabId);
+    // console.log('Taking standalone snapshot for tab:', request.tabId);
     takeStandaloneSnapshot(request.tabId, request.note).then((result) => {
       sendResponse({ success: true, sessionId: result.sessionId });
     }).catch((error) => {
@@ -2456,7 +2632,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   }
   
   if (request.action === 'startRecordingFromContent') {
-    console.log('Starting recording from content script');
+    // console.log('Starting recording from content script');
     const tabId = sender.tab.id;
     
     // Store recording state and show notification
@@ -2480,14 +2656,14 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   }
   
   if (request.action === 'deleteRecording') {
-    console.log('Deleting recording:', request.recordingId);
+    // console.log('Deleting recording:', request.recordingId);
     deleteRecordingFromServer(request.recordingId, sendResponse);
     return true;
   }
 
   // Workflow recording handlers
   if (request.action === 'startWorkflowRecording') {
-    console.log('Starting workflow recording for tab:', request.tabId);
+    // console.log('Starting workflow recording for tab:', request.tabId);
     startWorkflowRecording(
       request.tabId, 
       request.includeLogsInExport, 
@@ -2504,7 +2680,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   
   if (request.action === 'stopWorkflowRecording') {
     const tabId = request.tabId || sender.tab?.id;
-    console.log('Stopping workflow recording for tab:', tabId);
+    // console.log('Stopping workflow recording for tab:', tabId);
     // stopWorkflowRecording already returns { success: true, workflow: {...}, savedToServer: bool }
     // so we pass it through directly - don't double-wrap!
     stopWorkflowRecording(tabId).then(async (result) => {
@@ -2600,7 +2776,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
             frameIndex: frameIndex
           };
           screenInteractions.push(interaction);
-          console.log('Screen interaction recorded:', interaction.type, 'Total:', screenInteractions.length);
+          // console.log('Screen interaction recorded:', interaction.type, 'Total:', screenInteractions.length);
         }
       }).catch(error => {
         console.error('Error validating recording state for screen interaction:', error);
@@ -2613,7 +2789,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
           frameIndex: frameCounter.get(currentRecordingSessionId) || 0
         };
         screenInteractions.push(interaction);
-        console.log('Screen interaction recorded:', interaction.type, 'Total:', screenInteractions.length);
+        // console.log('Screen interaction recorded:', interaction.type, 'Total:', screenInteractions.length);
       }
     }
   }
@@ -2729,18 +2905,18 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   
   // Handle workflow screenshot capture
   if (request.action === 'captureWorkflowScreenshot' && sender.tab) {
-    console.log('[SCREENSHOT-DEBUG] background.js - Received captureWorkflowScreenshot message');
+    // console.log('[SCREENSHOT-DEBUG] background.js - Received captureWorkflowScreenshot message');
     const tabId = sender.tab.id;
     const settings = request.settings || {};
-    console.log('[SCREENSHOT-DEBUG] background.js - tabId:', tabId);
-    console.log('[SCREENSHOT-DEBUG] background.js - settings:', JSON.stringify(settings));
+    // console.log('[SCREENSHOT-DEBUG] background.js - tabId:', tabId);
+    // console.log('[SCREENSHOT-DEBUG] background.js - settings:', JSON.stringify(settings));
 
     captureTabScreenshot(tabId, settings).then((screenshotData) => {
-      console.log('[SCREENSHOT-DEBUG] background.js - captureTabScreenshot succeeded');
-      console.log('[SCREENSHOT-DEBUG] background.js - screenshotData type:', typeof screenshotData);
-      console.log('[SCREENSHOT-DEBUG] background.js - screenshotData length:', screenshotData?.length);
-      console.log('[SCREENSHOT-DEBUG] background.js - screenshotData preview:', screenshotData?.substring(0, 100));
-      console.log('[SCREENSHOT-DEBUG] background.js - Sending response with success: true');
+      // console.log('[SCREENSHOT-DEBUG] background.js - captureTabScreenshot succeeded');
+      // console.log('[SCREENSHOT-DEBUG] background.js - screenshotData type:', typeof screenshotData);
+      // console.log('[SCREENSHOT-DEBUG] background.js - screenshotData length:', screenshotData?.length);
+      // console.log('[SCREENSHOT-DEBUG] background.js - screenshotData preview:', screenshotData?.substring(0, 100));
+      // 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');
@@ -2774,7 +2950,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
 /*
 async function takeStandaloneSnapshot(tabId, note = '') {
   try {
-    console.log('Taking standalone snapshot for tab:', tabId);
+    // console.log('Taking standalone snapshot for tab:', tabId);
 
     // Create a unique session ID for the snapshot
     const sessionId = `snapshot_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
@@ -2850,7 +3026,7 @@ async function takeStandaloneSnapshot(tabId, note = '') {
 
         if (response.ok) {
           const result = await response.json();
-          console.log('Snapshot uploaded successfully:', sessionId);
+          // console.log('Snapshot uploaded successfully:', sessionId);
           uploadSuccess = true;
           break;
         }
@@ -2874,34 +3050,34 @@ async function takeStandaloneSnapshot(tabId, note = '') {
 
 // Capture screenshot for workflow recording
 async function captureTabScreenshot(tabId, settings) {
-  console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - ENTRY');
-  console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - tabId:', tabId);
-  console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - settings:', JSON.stringify(settings));
+  // console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - ENTRY');
+  // console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - tabId:', tabId);
+  // console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - settings:', JSON.stringify(settings));
 
   try {
     // Get the tab to find its window
-    console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - Getting tab info...');
+    // console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - Getting tab info...');
     const tab = await chrome.tabs.get(tabId);
     const windowId = tab.windowId;
-    console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - windowId:', windowId);
-    console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - tab.url:', tab.url);
+    // console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - windowId:', windowId);
+    // console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - tab.url:', tab.url);
 
     const captureOptions = {
       format: settings.format || 'jpeg',
       quality: settings.quality || 30
     };
-    console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - captureOptions:', JSON.stringify(captureOptions));
-    console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - Calling chrome.tabs.captureVisibleTab...');
+    // 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);
 
-    console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - captureVisibleTab SUCCESS');
-    console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - dataUrl length:', dataUrl?.length);
-    console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - dataUrl prefix:', dataUrl?.substring(0, 100));
+    // console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - captureVisibleTab SUCCESS');
+    // console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - dataUrl length:', dataUrl?.length);
+    // console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - dataUrl prefix:', dataUrl?.substring(0, 100));
 
     // If resolution is specified, resize the image
     if (settings.maxWidth || settings.maxHeight) {
-      console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - Resizing required, maxWidth:', settings.maxWidth, 'maxHeight:', settings.maxHeight);
+      // console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - Resizing required, maxWidth:', settings.maxWidth, 'maxHeight:', settings.maxHeight);
       // Create an image element to get dimensions
       const img = new Image();
       const canvas = new OffscreenCanvas(1, 1);
@@ -2941,8 +3117,8 @@ async function captureTabScreenshot(tabId, settings) {
       });
     }
     
-    console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - No resize needed, returning dataUrl');
-    console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - Final dataUrl length:', dataUrl?.length);
+    // console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - No resize needed, returning dataUrl');
+    // console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - Final dataUrl length:', dataUrl?.length);
     return dataUrl;
   } catch (error) {
     console.error('[SCREENSHOT-DEBUG] captureTabScreenshot - EXCEPTION CAUGHT');
@@ -2956,7 +3132,7 @@ async function captureTabScreenshot(tabId, settings) {
 // Start recording
 // Detect if server is available (server mode vs browser-only mode)
 async function detectServerMode() {
-  console.log('[ServerDetection] Checking server availability...');
+  // console.log('[ServerDetection] Checking server availability...');
 
   for (const port of CONFIG_PORTS) {
     try {
@@ -2970,7 +3146,7 @@ async function detectServerMode() {
       ]);
 
       if (response.ok) {
-        console.log(`[ServerDetection] Server detected on port ${port}`);
+        // console.log(`[ServerDetection] Server detected on port ${port}`);
         serverMode = 'server';
         return 'server';
       }
@@ -2979,7 +3155,7 @@ async function detectServerMode() {
     }
   }
 
-  console.log('[ServerDetection] No server detected - using browser-only mode');
+  // console.log('[ServerDetection] No server detected - using browser-only mode');
   serverMode = 'browser-only';
   return 'browser-only';
 }
@@ -3007,7 +3183,7 @@ async function startRecording(tabId, settings = {}) {
   try {
     // Detect server mode before starting
     await detectServerMode();
-    console.log(`[Recording] Mode: ${serverMode}`);
+    // console.log(`[Recording] Mode: ${serverMode}`);
 
     // Check if session manager is available
     if (!sessionManager) {
@@ -3028,12 +3204,12 @@ async function startRecording(tabId, settings = {}) {
 
     // Start capturing console logs FIRST, before any other setup
     const logsStarted = await startCapturingLogs(tabId);
-    console.log('Console log capture started:', logsStarted);
+    // console.log('Console log capture started:', logsStarted);
 
     // Give console interception time to settle (increased from 100ms to 500ms for reliability)
     if (logsStarted) {
       await new Promise(resolve => setTimeout(resolve, 500));
-      console.log('[Recording] Console interception ready');
+      // console.log('[Recording] Console interception ready');
     } else {
       console.warn('[Recording] Console capture unavailable for this page - recording will proceed without console logs');
     }
@@ -3046,7 +3222,7 @@ async function startRecording(tabId, settings = {}) {
       targetTabId: tabId
     });
 
-    console.log('Got stream ID:', streamId);
+    // console.log('Got stream ID:', streamId);
 
     // Create session with session manager
     const sessionConfig = {
@@ -3079,7 +3255,7 @@ async function startRecording(tabId, settings = {}) {
 
     // STEP 4: Initialize browser-only recording if in browser-only mode
     if (serverMode === 'browser-only' && browserRecordingManager) {
-      console.log('[Recording] Initializing browser-only recording in IndexedDB');
+      // console.log('[Recording] Initializing browser-only recording in IndexedDB');
       const tab = await chrome.tabs.get(tabId);
       await browserRecordingManager.startRecording(sessionId, {
         tabId: tabId,
@@ -3112,7 +3288,19 @@ async function startRecording(tabId, settings = {}) {
     // Update badge
     chrome.action.setBadgeText({ text: 'REC' });
     chrome.action.setBadgeBackgroundColor({ color: '#FF0000' });
-    
+
+    // DON'T start inactivity monitoring here - wait for countdownComplete message
+    // This ensures the 10s timer starts AFTER the 3s visual countdown, not before
+    // Set a fallback timer in case content script doesn't send countdownComplete
+    inactivityMonitoringStarted = false;
+    if (inactivityFallbackTimer) clearTimeout(inactivityFallbackTimer);
+    inactivityFallbackTimer = setTimeout(async () => {
+      // Use isCurrentlyRecording (the actual state variable)
+      if (isCurrentlyRecording && !inactivityMonitoringStarted) {
+        await startInactivityMonitoring(tabId);
+      }
+    }, 5000); // 5s = 3s countdown + 2s buffer
+
     // If on a restricted page, notify user
     const tab = await chrome.tabs.get(tabId);
     if (tab.url && (tab.url.startsWith('chrome://') || tab.url.startsWith('chrome-extension://'))) {
@@ -3133,12 +3321,12 @@ async function startRecording(tabId, settings = {}) {
       sessionId: sessionId
     }).catch(async (error) => {
       // Content script might not be injected, try to inject it
-      console.log('Could not notify content script, attempting to inject:', error);
+      // console.log('Could not notify content script, attempting to inject:', error);
       
       // First 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://')) {
-        console.log('Cannot inject content script into restricted URL:', tab.url);
+        // console.log('Cannot inject content script into restricted URL:', tab.url);
         return;
       }
       
@@ -3174,7 +3362,7 @@ async function startRecording(tabId, settings = {}) {
         url: tab.url,
         title: tab.title
       });
-      console.log('[Recording] Browser recording initialized for session:', sessionId);
+      // console.log('[Recording] Browser recording initialized for session:', sessionId);
     }
 
     // Send stream ID, session info, and settings to offscreen document for frame capture
@@ -3194,7 +3382,7 @@ async function startRecording(tabId, settings = {}) {
       }
     });
 
-    console.log('Recording started in', serverMode, 'mode');
+    // console.log('Recording started in', serverMode, 'mode');
   } catch (error) {
     console.error('Error in startRecording:', error);
     throw error;
@@ -3213,13 +3401,16 @@ async function stopRecording() {
     // Check if currently recording via session manager
     const currentlyRecording = await isCurrentlyRecordingAsync();
     if (!currentlyRecording) {
-      console.log('No active recording session to stop');
+      // console.log('No active recording session to stop');
       return { success: false, error: 'No active recording' };
     }
 
     // Store sessionId before clearing it
     const stoppedSessionId = currentSession?.sessionId;
 
+    // Stop inactivity monitoring
+    await stopInactivityMonitoring(recordingTabId);
+
     // Capture frame count and duration for the response
     let recordedFrameCount = 0;
     let recordedDuration = 0;
@@ -3233,11 +3424,11 @@ async function stopRecording() {
       } else {
         recordedFrameCount = stopResult.frameCount || 0;
         recordedDuration = stopResult.sessionDuration || 0;
-        console.log(`Recording stopped. Duration: ${recordedDuration}ms, Frames: ${recordedFrameCount}`);
+        // console.log(`Recording stopped. Duration: ${recordedDuration}ms, Frames: ${recordedFrameCount}`);
 
         // Finalize browser-only recording if in browser-only mode
         if (serverMode === 'browser-only' && browserRecordingManager) {
-          console.log('[Browser-Only] Finalizing browser recording in IndexedDB');
+          // console.log('[Browser-Only] Finalizing browser recording in IndexedDB');
           await browserRecordingManager.stopRecording(currentSession.sessionId);
         }
       }
@@ -3248,10 +3439,10 @@ async function stopRecording() {
     let flushCompleted = false;
     if (logBuffer) {
       try {
-        console.log('[Background] Flushing all buffered logs before stop...');
+        // console.log('[Background] Flushing all buffered logs before stop...');
         await logBuffer.flushAll();
         flushCompleted = true;
-        console.log('[Background] Successfully flushed all buffered logs');
+        // console.log('[Background] Successfully flushed all buffered logs');
       } catch (flushError) {
         console.error('[Background] Failed to flush logs during stop:', flushError);
         // Continue with stop process even if flush fails
@@ -3271,25 +3462,25 @@ async function stopRecording() {
 
     // CRITICAL: Store recordingTabId BEFORE clearing it (for cleanup)
     const previousRecordingTabId = recordingTabId;
-    console.log('[Background] previousRecordingTabId:', previousRecordingTabId, 'stoppedSessionId:', stoppedSessionId);
+    // console.log('[Background] previousRecordingTabId:', previousRecordingTabId, 'stoppedSessionId:', stoppedSessionId);
 
     // CRITICAL FIX: Send stop-screen-capture-tracking message to recording tab WITH sessionId
     // so it can show the completion UI
     if (previousRecordingTabId && stoppedSessionId) {
       try {
-        console.log('[Background] Sending recording-complete-show-ui message to tab:', previousRecordingTabId, 'with sessionId:', stoppedSessionId);
+        // console.log('[Background] Sending recording-complete-show-ui message to tab:', previousRecordingTabId, 'with sessionId:', stoppedSessionId);
         await chrome.tabs.sendMessage(previousRecordingTabId, {
           type: 'recording-complete-show-ui',
           sessionId: stoppedSessionId
         }).catch((err) => {
-          console.log('[Background] Could not send completion UI message to recording tab:', err);
+          // console.log('[Background] Could not send completion UI message to recording tab:', err);
         });
-        console.log('[Background] Successfully sent recording-complete-show-ui message');
+        // console.log('[Background] Successfully sent recording-complete-show-ui message');
       } catch (error) {
         console.error('[Background] Failed to send completion UI message:', error);
       }
     } else {
-      console.log('[Background] NOT sending recording-complete-show-ui - missing previousRecordingTabId or stoppedSessionId');
+      // console.log('[Background] NOT sending recording-complete-show-ui - missing previousRecordingTabId or stoppedSessionId');
     }
 
     // CRITICAL FIX: Send stop-screen-capture-tracking message to ALL content scripts
@@ -3301,13 +3492,13 @@ async function stopRecording() {
             type: 'stop-screen-capture-tracking'
           }).catch(() => {
             // Ignore errors for tabs that don't have content scripts
-            console.log(`[Background] Could not send cleanup message to tab ${tab.id}`);
+            // console.log(`[Background] Could not send cleanup message to tab ${tab.id}`);
           });
         }
         return Promise.resolve();
       });
       await Promise.all(cleanupPromises);
-      console.log('[Background] Cleanup messages sent to all content scripts');
+      // console.log('[Background] Cleanup messages sent to all content scripts');
     } catch (error) {
       console.error('[Background] Failed to send cleanup messages to content scripts:', error);
     }
@@ -3315,7 +3506,7 @@ async function stopRecording() {
     // CRITICAL FIX: Restore original console methods and remove event listeners
     if (previousRecordingTabId) {
       try {
-        console.log('[Background] Stopping console log capture for tab:', previousRecordingTabId);
+        // console.log('[Background] Stopping console log capture for tab:', previousRecordingTabId);
         await stopCapturingLogs(previousRecordingTabId);
       } catch (cleanupError) {
         console.error('[Background] Failed to cleanup console interceptor:', cleanupError);
@@ -3339,11 +3530,11 @@ async function stopRecording() {
 
     // CRITICAL: Clear pending frame queue to prevent infinite retry loop
     if (stoppedSessionId && pendingFrameQueue.has(stoppedSessionId)) {
-      console.log(`[FrameQueue] Clearing ${pendingFrameQueue.get(stoppedSessionId).length} pending frames for stopped session ${stoppedSessionId}`);
+      // console.log(`[FrameQueue] Clearing ${pendingFrameQueue.get(stoppedSessionId).length} pending frames for stopped session ${stoppedSessionId}`);
       pendingFrameQueue.delete(stoppedSessionId);
     }
 
-    console.log('Stop message sent to offscreen document');
+    // console.log('Stop message sent to offscreen document');
 
     // Notify popup to refresh recordings list
     chrome.runtime.sendMessage({
@@ -3351,7 +3542,7 @@ async function stopRecording() {
       sessionId: stoppedSessionId
     }).catch(() => {
       // Popup might not be open, that's okay
-      console.log('[Background] Popup not available to notify of recording stop');
+      // console.log('[Background] Popup not available to notify of recording stop');
     });
 
     // Format duration as human-readable string (e.g., "1m 30s" or "45s")
@@ -3380,7 +3571,7 @@ async function stopRecording() {
     // CRITICAL FIX: Clean up console interceptor even on error
     if (errorRecordingTabId) {
       try {
-        console.log('[Background] Emergency cleanup of console interceptor for tab:', errorRecordingTabId);
+        // console.log('[Background] Emergency cleanup of console interceptor for tab:', errorRecordingTabId);
         await stopCapturingLogs(errorRecordingTabId);
       } catch (cleanupError) {
         console.error('[Background] Failed to cleanup console interceptor during error handling:', cleanupError);
@@ -3407,25 +3598,25 @@ async function stopRecording() {
 // Capture console logs from the recording tab
 // REFACTORED: Now uses shared console-interception-library.js
 async function startCapturingLogs(tabId) {
-  console.log('[Screen Recording] Starting console interception using shared library');
+  // console.log('[Screen Recording] Starting console interception using shared library');
   return await self.ConsoleInterceptionLibrary.startConsoleInterception(tabId, SCREEN_RECORDING_CONSOLE_CONFIG);
 }
 
 // REFACTORED: Now uses shared console-interception-library.js via proper namespace
 async function stopCapturingLogs(tabId) {
-  console.log('[Screen Recording] Stopping console interception using shared library');
+  // console.log('[Screen Recording] Stopping console interception using shared library');
   return await self.ConsoleInterceptionLibrary.stopConsoleInterception(tabId, SCREEN_RECORDING_CONSOLE_CONFIG);
 }
 
 // Workflow Recording Functions
 async function startWorkflowRecording(tabId, includeLogsInExport, sessionName = null, screenshotSettings = null) {
   try {
-    console.log('Starting workflow recording for tab:', tabId);
+    // console.log('Starting workflow recording for tab:', tabId);
 
     // 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://')) {
-      console.log('Cannot start workflow recording on restricted URL:', tab.url);
+      // console.log('Cannot start workflow recording on restricted URL:', tab.url);
       throw new Error('Cannot record workflows on restricted pages (chrome:// URLs)');
     }
     
@@ -3446,7 +3637,7 @@ async function startWorkflowRecording(tabId, includeLogsInExport, sessionName =
     if (includeLogsInExport) {
       const buffer = new WorkflowLogBuffer(tabId);
       workflowLogBuffers.set(tabId, buffer);
-      console.log(`[Workflow] Initialized WorkflowLogBuffer for tab ${tabId}`);
+      // console.log(`[Workflow] Initialized WorkflowLogBuffer for tab ${tabId}`);
     }
 
     // REFACTORED: Use shared console interception library via proper namespace (replaces 150+ lines of duplicate code)
@@ -3464,7 +3655,7 @@ async function startWorkflowRecording(tabId, includeLogsInExport, sessionName =
       });
     } catch (e) {
       // Content script might already be injected
-      console.log('Content script injection attempt:', e.message);
+      // console.log('Content script injection attempt:', e.message);
     }
     
     // Tell the content script to start recording
@@ -3475,7 +3666,7 @@ async function startWorkflowRecording(tabId, includeLogsInExport, sessionName =
       tabId: tabId
     });
     
-    console.log('Workflow recording started successfully');
+    // console.log('Workflow recording started successfully');
   } catch (error) {
     console.error('Error starting workflow recording:', error);
     throw error;
@@ -3484,7 +3675,7 @@ async function startWorkflowRecording(tabId, includeLogsInExport, sessionName =
 
 async function stopWorkflowRecording(tabId) {
   try {
-    console.log('Stopping workflow recording for tab:', tabId);
+    // console.log('Stopping workflow recording for tab:', tabId);
     
     // Check if recording was active
     if (!workflowRecordingTabs.has(tabId)) {
@@ -3503,7 +3694,7 @@ async function stopWorkflowRecording(tabId) {
 
     // CRITICAL FIX: Restore original console methods and remove event listeners
     try {
-      console.log('[Workflow] Stopping console log capture for tab:', tabId);
+      // console.log('[Workflow] Stopping console log capture for tab:', tabId);
       await stopCapturingWorkflowLogs(tabId);
     } catch (cleanupError) {
       console.error('[Workflow] Failed to cleanup console interceptor:', cleanupError);
@@ -3515,19 +3706,19 @@ async function stopWorkflowRecording(tabId) {
     let workflow = Array.isArray(workflowData) ? workflowData : (workflowData.actions || []);
     let functionTraces = Array.isArray(workflowData) ? [] : (workflowData.functionTraces || []);
 
-    console.log(`[Background] Received ${workflow.length} actions and ${functionTraces.length} function traces`);
-    console.log('[SCREENSHOT-DEBUG] background.stopWorkflowRecording - Checking actions for screenshot_data');
+    // console.log(`[Background] Received ${workflow.length} actions and ${functionTraces.length} function traces`);
+    // console.log('[SCREENSHOT-DEBUG] background.stopWorkflowRecording - Checking actions for screenshot_data');
 
     const actionsWithScreenshots = workflow.filter(a => a.screenshot_data);
-    console.log('[SCREENSHOT-DEBUG] background.stopWorkflowRecording - Actions WITH screenshot_data:', actionsWithScreenshots.length);
+    // console.log('[SCREENSHOT-DEBUG] background.stopWorkflowRecording - Actions WITH screenshot_data:', actionsWithScreenshots.length);
 
     workflow.forEach((action, index) => {
-      console.log(`[SCREENSHOT-DEBUG] background.stopWorkflowRecording - Action ${index}:`, {
-        type: action.type,
-        hasScreenshotData: !!action.screenshot_data,
-        screenshotDataLength: action.screenshot_data?.length,
-        screenshotPreview: action.screenshot_data?.substring(0, 50)
-      });
+      // console.log(`[SCREENSHOT-DEBUG] background.stopWorkflowRecording - Action ${index}:`, {
+      //   type: action.type,
+      //   hasScreenshotData: !!action.screenshot_data,
+      //   screenshotDataLength: action.screenshot_data?.length,
+      //   screenshotPreview: action.screenshot_data?.substring(0, 50)
+      // });
     });
     
     // If logs should be included, flush buffer and get them from session storage
@@ -3536,7 +3727,7 @@ async function stopWorkflowRecording(tabId) {
       const buffer = workflowLogBuffers.get(tabId);
       if (buffer) {
         await buffer.flush();
-        console.log(`[Workflow] Flushed buffer before retrieval, stats:`, buffer.getStats());
+        // console.log(`[Workflow] Flushed buffer before retrieval, stats:`, buffer.getStats());
       }
 
       const result = await chrome.storage.session.get(`workflow_${tabId}`);
@@ -3585,7 +3776,7 @@ async function stopWorkflowRecording(tabId) {
     if (bufferToCleanup) {
       await bufferToCleanup.cleanup();
       workflowLogBuffers.delete(tabId);
-      console.log(`[Workflow] Cleaned up WorkflowLogBuffer for tab ${tabId}`);
+      // console.log(`[Workflow] Cleaned up WorkflowLogBuffer for tab ${tabId}`);
     }
 
     await chrome.storage.session.remove(`workflow_${tabId}`);
@@ -3597,7 +3788,7 @@ async function stopWorkflowRecording(tabId) {
       workflowStartTime: null
     });
 
-    console.log('Workflow recording stopped, returning workflow:', workflow);
+    // console.log('Workflow recording stopped, returning workflow:', workflow);
     
     // Try to save to server
     try {
@@ -3610,11 +3801,11 @@ async function stopWorkflowRecording(tabId) {
       // Retrieve the workflow ID that was generated at start
       const storedData = await chrome.storage.local.get(['currentWorkflowId']);
       const sessionId = storedData.currentWorkflowId || `workflow_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-      console.log('[Workflow] Using sessionId for save:', sessionId);
+      // console.log('[Workflow] Using sessionId for save:', sessionId);
       
       for (const port of serverPorts) {
         try {
-          console.log(`[Workflow] Attempting to save to server on port ${port}...`);
+          // console.log(`[Workflow] Attempting to save to server on port ${port}...`);
 
           const payloadData = {
             sessionId: sessionId,
@@ -3628,19 +3819,19 @@ async function stopWorkflowRecording(tabId) {
             functionTraces: functionTraces // Include function execution traces
           };
 
-          console.log('[SCREENSHOT-DEBUG] background.stopWorkflowRecording - HTTP POST payload being prepared');
-          console.log('[SCREENSHOT-DEBUG] background.stopWorkflowRecording - Payload actions count:', payloadData.actions.length);
+          // console.log('[SCREENSHOT-DEBUG] background.stopWorkflowRecording - HTTP POST payload being prepared');
+          // console.log('[SCREENSHOT-DEBUG] background.stopWorkflowRecording - Payload actions count:', payloadData.actions.length);
 
           const payloadActionsWithScreenshots = payloadData.actions.filter(a => a.screenshot_data);
-          console.log('[SCREENSHOT-DEBUG] background.stopWorkflowRecording - Payload actions WITH screenshot_data:', payloadActionsWithScreenshots.length);
+          // console.log('[SCREENSHOT-DEBUG] background.stopWorkflowRecording - Payload actions WITH screenshot_data:', payloadActionsWithScreenshots.length);
 
           payloadData.actions.forEach((action, index) => {
-            console.log(`[SCREENSHOT-DEBUG] background.stopWorkflowRecording - Payload Action ${index}:`, {
-              type: action.type,
-              hasScreenshotData: !!action.screenshot_data,
-              screenshotDataLength: action.screenshot_data?.length,
-              screenshotPreview: action.screenshot_data?.substring(0, 50)
-            });
+            // console.log(`[SCREENSHOT-DEBUG] background.stopWorkflowRecording - Payload Action ${index}:`, {
+            //   type: action.type,
+            //   hasScreenshotData: !!action.screenshot_data,
+            //   screenshotDataLength: action.screenshot_data?.length,
+            //   screenshotPreview: action.screenshot_data?.substring(0, 50)
+            // });
           });
 
           const response = await fetch(`http://localhost:${port}/chromedebug/workflow-recording`, {
@@ -3653,15 +3844,15 @@ async function stopWorkflowRecording(tabId) {
           
           if (response.ok) {
             serverResult = await response.json();
-            console.log(`[Workflow] Successfully saved to server on port ${port}`, serverResult);
+            // console.log(`[Workflow] Successfully saved to server on port ${port}`, serverResult);
             break;
           } else {
-            console.log(`[Workflow] Failed on port ${port}: ${response.status} ${response.statusText}`);
+            // console.log(`[Workflow] Failed on port ${port}: ${response.status} ${response.statusText}`);
             const errorText = await response.text();
-            console.log(`[Workflow] Error response:`, errorText);
+            // console.log(`[Workflow] Error response:`, errorText);
           }
         } catch (error) {
-          console.log(`Failed to save to server on port ${port}:`, error.message);
+          // console.log(`Failed to save to server on port ${port}:`, error.message);
         }
       }
       
@@ -3725,7 +3916,7 @@ async function stopWorkflowRecording(tabId) {
 // CRITICAL FIX: Stop workflow console log capture and restore original methods
 // REFACTORED: Now uses shared console-interception-library.js via proper namespace
 async function stopCapturingWorkflowLogs(tabId) {
-  console.log('[Workflow Recording] Stopping console interception using shared library');
+  // console.log('[Workflow Recording] Stopping console interception using shared library');
   return await self.ConsoleInterceptionLibrary.stopConsoleInterception(tabId, WORKFLOW_RECORDING_CONSOLE_CONFIG);
 }
 
@@ -3764,7 +3955,7 @@ async function deleteRecordingFromServer(recordingId, sendResponse) {
 
     if (deleteResult.success) {
       deleted = true;
-      console.log('Recording deleted successfully');
+      // console.log('Recording deleted successfully');
       sendResponse({ success: true });
       return;
     } else {
@@ -3786,11 +3977,11 @@ async function retryPendingFrames(sessionId) {
   const pending = pendingFrameQueue.get(sessionId);
   if (!pending || pending.length === 0) return;
 
-  console.log(`[FrameQueue] Retrying ${pending.length} pending frame batches for session ${sessionId}`);
+  // console.log(`[FrameQueue] Retrying ${pending.length} pending frame batches for session ${sessionId}`);
 
   // Check if this is still the active recording session
   if (currentSession?.sessionId !== sessionId) {
-    console.log(`[FrameQueue] Session ${sessionId} is no longer active, clearing pending frames`);
+    // console.log(`[FrameQueue] Session ${sessionId} is no longer active, clearing pending frames`);
     pendingFrameQueue.delete(sessionId);
     return;
   }
@@ -3822,12 +4013,12 @@ async function retryPendingFrames(sessionId) {
     await handleFrameBatch({ sessionId, frames }, true); // skipValidation=true
   }
 
-  console.log(`[FrameQueue] Successfully processed ${batches.length} pending batches`);
+  // console.log(`[FrameQueue] Successfully processed ${batches.length} pending batches`);
 }
 
 // Handle frame batches from frame capture
 async function handleFrameBatch(batchData, skipValidation = false) {
-  console.log(`Processing frame batch for session ${batchData.sessionId}`);
+  // console.log(`Processing frame batch for session ${batchData.sessionId}`);
 
   try {
     const sessionId = batchData.sessionId;
@@ -3881,7 +4072,7 @@ async function handleFrameBatch(batchData, skipValidation = false) {
       frameCounter.set(sessionId, currentFrameIndex);
     }
     
-    console.log(`Assigning frame indices ${frameCounter.get(sessionId) - indexedFrames.length} to ${currentFrameIndex - 1}`);
+    // console.log(`Assigning frame indices ${frameCounter.get(sessionId) - indexedFrames.length} to ${currentFrameIndex - 1}`);
     
     // Find available server port using settings
     const ports = await getServerPorts();
@@ -3907,7 +4098,7 @@ async function handleFrameBatch(batchData, skipValidation = false) {
         
         if (uploadResponse.ok) {
           const result = await uploadResponse.json();
-          console.log(`Frame batch uploaded successfully to port ${port}:`, result);
+          // console.log(`Frame batch uploaded successfully to port ${port}:`, result);
           recordingServerPort = port; // Store the successful port
           uploadSuccess = true;
           
@@ -3923,8 +4114,20 @@ async function handleFrameBatch(batchData, skipValidation = false) {
           // 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}`);
-          
+          // console.log(`Saved ${batchData.frames.length} frames to local storage, total: ${sessionData.frames.length}`);
+
+          // Send frame count update to content script
+          if (recordingTabId) {
+            try {
+              await chrome.tabs.sendMessage(recordingTabId, {
+                action: 'updateFrameCount',
+                frameCount: sessionData.frames.length
+              });
+            } catch (e) {
+              // Tab might be closed, ignore
+            }
+          }
+
           break;
         } else {
           const errorText = await uploadResponse.text();
@@ -3933,16 +4136,16 @@ async function handleFrameBatch(batchData, skipValidation = false) {
         }
       } catch (e) {
         lastError = e.message;
-        console.log(`Failed to upload frame batch to port ${port}:`, e.message);
+        // console.log(`Failed to upload frame batch to port ${port}:`, e.message);
       }
     }
     
     if (!uploadSuccess) {
-      console.log(`No server available - checking if browser-only mode`);
+      // console.log(`No server available - checking if browser-only mode`);
 
       // If in browser-only mode, store frames in IndexedDB
       if (serverMode === 'browser-only' && browserRecordingManager) {
-        console.log(`[Browser-Only] Storing ${indexedFrames.length} frames in IndexedDB`);
+        // console.log(`[Browser-Only] Storing ${indexedFrames.length} frames in IndexedDB`);
         // Use the browser recording session ID, not the frame capture session ID
         const recordingSessionId = currentRecordingSessionId || batchData.sessionId;
         for (const frame of indexedFrames) {
@@ -3959,7 +4162,7 @@ async function handleFrameBatch(batchData, skipValidation = false) {
             absoluteTimestamp: frame.absoluteTimestamp // Don't use Date.now() fallback - preserve actual capture time
           });
         }
-        console.log(`[Browser-Only] Frames stored successfully in IndexedDB for session ${recordingSessionId}`);
+        // console.log(`[Browser-Only] Frames stored successfully in IndexedDB for session ${recordingSessionId}`);
       } else {
         // Server mode but no server available - show error
         console.error(`CRITICAL: Failed to upload frame batch to any Chrome Debug server port. Last error: ${lastError}`);
@@ -3999,7 +4202,7 @@ async function getServerPorts() {
   // Try to discover the active server port
   const discoveredPort = await discoverActiveServerPort();
   if (discoveredPort) {
-    console.log(`Discovered Chrome Debug server on port ${discoveredPort}`);
+    // console.log(`Discovered Chrome Debug server on port ${discoveredPort}`);
     return [discoveredPort, ...defaultPorts.filter(p => p !== discoveredPort)];
   }
   
@@ -4037,7 +4240,7 @@ async function discoverActiveServerPort() {
 
 // Handle frame capture session completion
 async function handleFrameCaptureComplete(sessionData) {
-  console.log(`Frame capture session ${sessionData.sessionId} completed with ${sessionData.totalFrames} frames`);
+  // console.log(`Frame capture session ${sessionData.sessionId} completed with ${sessionData.totalFrames} frames`);
   
   try {
     // Store the tab ID and session ID before clearing
@@ -4055,7 +4258,7 @@ async function handleFrameCaptureComplete(sessionData) {
       let waitedTime = 0;
       let flushCompleted = false;
 
-      console.log('[Background] Waiting for LogBuffer flush completion...');
+      // console.log('[Background] Waiting for LogBuffer flush completion...');
 
       // Poll for flush completion status
       while (waitedTime < maxWaitTime && !flushCompleted) {
@@ -4069,7 +4272,7 @@ async function handleFrameCaptureComplete(sessionData) {
       }
 
       if (flushCompleted) {
-        console.log(`[Background] LogBuffer flush completed after ${waitedTime}ms`);
+        // console.log(`[Background] LogBuffer flush completed after ${waitedTime}ms`);
       } else {
         console.warn(`[Background] LogBuffer flush verification timed out after ${waitedTime}ms`);
       }
@@ -4077,9 +4280,9 @@ async function handleFrameCaptureComplete(sessionData) {
       // Retrieve buffered logs for this tab
       const logsResult = await chrome.storage.session.get(String(tabIdToNotify));
       bufferedLogs = logsResult[tabIdToNotify] || [];
-      console.log(`Retrieved ${bufferedLogs.length} buffered logs for post-processing`);
+      // console.log(`Retrieved ${bufferedLogs.length} buffered logs for post-processing`);
       if (bufferedLogs.length > 0) {
-        console.log('First log:', bufferedLogs[0]);
+        // console.log('First log:', bufferedLogs[0]);
       }
 
       // Clean up flush completion marker
@@ -4090,7 +4293,7 @@ async function handleFrameCaptureComplete(sessionData) {
       // Fallback: Try to read logs anyway
       const logsResult = await chrome.storage.session.get(String(tabIdToNotify));
       bufferedLogs = logsResult[tabIdToNotify] || [];
-      console.log(`Fallback: Retrieved ${bufferedLogs.length} buffered logs`);
+      // console.log(`Fallback: Retrieved ${bufferedLogs.length} buffered logs`);
     }
     
     // Clear the buffered logs
@@ -4099,7 +4302,7 @@ async function handleFrameCaptureComplete(sessionData) {
     // Send logs to server for association with frames with retry logic
     // Skip server communication in browser-only mode (logs already in IndexedDB)
     if (bufferedLogs.length > 0 && serverMode !== 'browser-only') {
-      console.log(`[Server Mode] Associating ${bufferedLogs.length} logs with server...`);
+      // console.log(`[Server Mode] Associating ${bufferedLogs.length} logs with server...`);
 
       // Retry logic to handle race conditions
       const maxRetries = 3;
@@ -4107,15 +4310,15 @@ async function handleFrameCaptureComplete(sessionData) {
       let success = false;
       let lastErrorDetails = null;
 
-      console.log(`[LOG-ASSOC-DEBUG] ========== STARTING LOG ASSOCIATION ==========`);
-      console.log(`[LOG-ASSOC-DEBUG] Session ID: ${sessionIdToUse}`);
-      console.log(`[LOG-ASSOC-DEBUG] Number of logs to associate: ${bufferedLogs.length}`);
-      console.log(`[LOG-ASSOC-DEBUG] Tab ID: ${tabIdToNotify}`);
+      // console.log(`[LOG-ASSOC-DEBUG] ========== STARTING LOG ASSOCIATION ==========`);
+      // console.log(`[LOG-ASSOC-DEBUG] Session ID: ${sessionIdToUse}`);
+      // console.log(`[LOG-ASSOC-DEBUG] Number of logs to associate: ${bufferedLogs.length}`);
+      // console.log(`[LOG-ASSOC-DEBUG] Tab ID: ${tabIdToNotify}`);
 
       // PRE-FLIGHT CHECK: Verify frames exist in database before attempting log association
       try {
         const ports = await getServerPorts();
-        console.log(`[LOG-ASSOC-DEBUG] PRE-FLIGHT: Checking if frames exist for session ${sessionIdToUse}...`);
+        // console.log(`[LOG-ASSOC-DEBUG] PRE-FLIGHT: Checking if frames exist for session ${sessionIdToUse}...`);
         for (const port of ports) {
           try {
             const checkResponse = await fetch(`http://localhost:${port}/chromedebug/frame-session/${sessionIdToUse}`, {
@@ -4125,7 +4328,7 @@ async function handleFrameCaptureComplete(sessionData) {
             if (checkResponse.ok) {
               const sessionData = await checkResponse.json();
               const frameCount = sessionData.frames?.length || 0;
-              console.log(`[LOG-ASSOC-DEBUG] PRE-FLIGHT: Found ${frameCount} frames on port ${port}`);
+              // console.log(`[LOG-ASSOC-DEBUG] PRE-FLIGHT: Found ${frameCount} frames on port ${port}`);
               if (frameCount === 0) {
                 console.warn(`[LOG-ASSOC-DEBUG] ⚠️ WARNING: Session exists but has 0 frames! This will cause log association to fail.`);
                 console.warn(`[LOG-ASSOC-DEBUG] Session data:`, sessionData);
@@ -4133,7 +4336,7 @@ async function handleFrameCaptureComplete(sessionData) {
               break;
             }
           } catch (e) {
-            console.log(`[LOG-ASSOC-DEBUG] PRE-FLIGHT: Could not check port ${port}:`, e.message);
+            // console.log(`[LOG-ASSOC-DEBUG] PRE-FLIGHT: Could not check port ${port}:`, e.message);
           }
         }
       } catch (preflightError) {
@@ -4143,22 +4346,22 @@ async function handleFrameCaptureComplete(sessionData) {
       while (retryCount < maxRetries && !success) {
         try {
           const ports = await getServerPorts();
-          console.log(`[LOG-ASSOC-DEBUG] Attempt ${retryCount + 1}/${maxRetries}: Trying ports:`, ports);
+          // console.log(`[LOG-ASSOC-DEBUG] Attempt ${retryCount + 1}/${maxRetries}: Trying ports:`, ports);
 
           for (const port of ports) {
             try {
-              console.log(`[LOG-ASSOC-DEBUG] Attempting port ${port}...`);
+              // console.log(`[LOG-ASSOC-DEBUG] Attempting port ${port}...`);
               const requestBody = {
                 sessionId: sessionIdToUse,
                 logs: bufferedLogs
               };
-              console.log(`[LOG-ASSOC-DEBUG] Request payload: sessionId=${sessionIdToUse}, logs.length=${bufferedLogs.length}`);
+              // console.log(`[LOG-ASSOC-DEBUG] Request payload: sessionId=${sessionIdToUse}, logs.length=${bufferedLogs.length}`);
               if (bufferedLogs.length > 0) {
-                console.log(`[LOG-ASSOC-DEBUG] First log sample:`, {
-                  timestamp: bufferedLogs[0].timestamp,
-                  level: bufferedLogs[0].level,
-                  message: bufferedLogs[0].message?.substring(0, 100)
-                });
+                // console.log(`[LOG-ASSOC-DEBUG] First log sample:`, {
+                //   timestamp: bufferedLogs[0].timestamp,
+                //   level: bufferedLogs[0].level,
+                //   message: bufferedLogs[0].message?.substring(0, 100)
+                // });
               }
 
               const response = await fetch(`http://localhost:${port}/chromedebug/associate-logs`, {
@@ -4169,12 +4372,12 @@ async function handleFrameCaptureComplete(sessionData) {
                 body: JSON.stringify(requestBody)
               });
 
-              console.log(`[LOG-ASSOC-DEBUG] Port ${port} response status: ${response.status} ${response.statusText}`);
+              // console.log(`[LOG-ASSOC-DEBUG] Port ${port} response status: ${response.status} ${response.statusText}`);
 
               if (response.ok) {
                 const result = await response.json();
-                console.log(`[LOG-ASSOC-DEBUG] ✅ SUCCESS on port ${port}:`, result);
-                console.log(`Logs associated successfully on port ${port}:`, result);
+                // console.log(`[LOG-ASSOC-DEBUG] ✅ SUCCESS on port ${port}:`, result);
+                // console.log(`Logs associated successfully on port ${port}:`, result);
                 success = true;
 
                 // Fetch the updated session data with logs from server
@@ -4182,14 +4385,14 @@ async function handleFrameCaptureComplete(sessionData) {
                   const sessionResponse = await fetch(`http://localhost:${port}/chromedebug/frame-session/${sessionIdToUse}`);
                   if (sessionResponse.ok) {
                     const updatedSession = await sessionResponse.json();
-                    console.log(`[LOG-ASSOC-DEBUG] Fetched updated session: ${updatedSession.frames?.length || 0} frames`);
-                    console.log(`Fetched updated session with ${updatedSession.frames ? updatedSession.frames.length : 0} frames`);
+                    // console.log(`[LOG-ASSOC-DEBUG] Fetched updated session: ${updatedSession.frames?.length || 0} frames`);
+                    // console.log(`Fetched updated session with ${updatedSession.frames ? updatedSession.frames.length : 0} frames`);
 
                     // Update Chrome local storage with the frames that now have logs
                     const storageKey = sessionIdToUse;
                     await chrome.storage.local.set({ [storageKey]: updatedSession });
-                    console.log('[LOG-ASSOC-DEBUG] Updated local storage with frames containing logs');
-                    console.log('Updated local storage with frames containing logs');
+                    // console.log('[LOG-ASSOC-DEBUG] Updated local storage with frames containing logs');
+                    // console.log('Updated local storage with frames containing logs');
                   } else {
                     console.error(`[LOG-ASSOC-DEBUG] Failed to fetch updated session: ${sessionResponse.status}`);
                     console.error('Failed to fetch updated session data');
@@ -4225,15 +4428,15 @@ async function handleFrameCaptureComplete(sessionData) {
                 attempt: retryCount + 1
               };
               console.error(`[LOG-ASSOC-DEBUG] ❌ Port ${port} exception:`, e);
-              console.log(`Failed to associate logs on port ${port}:`, e.message);
+              // console.log(`Failed to associate logs on port ${port}:`, e.message);
             }
           }
 
           if (!success) {
             retryCount++;
             if (retryCount < maxRetries) {
-              console.log(`[LOG-ASSOC-DEBUG] Retrying in 1 second (attempt ${retryCount + 1}/${maxRetries})...`);
-              console.log(`Retrying log association (attempt ${retryCount + 1}/${maxRetries})...`);
+              // console.log(`[LOG-ASSOC-DEBUG] Retrying in 1 second (attempt ${retryCount + 1}/${maxRetries})...`);
+              // console.log(`Retrying log association (attempt ${retryCount + 1}/${maxRetries})...`);
               await new Promise(resolve => setTimeout(resolve, 1000));
             }
           }
@@ -4247,8 +4450,8 @@ async function handleFrameCaptureComplete(sessionData) {
         }
       }
 
-      console.log(`[LOG-ASSOC-DEBUG] ========== LOG ASSOCIATION COMPLETE ==========`);
-      console.log(`[LOG-ASSOC-DEBUG] Success: ${success}`);
+      // console.log(`[LOG-ASSOC-DEBUG] ========== LOG ASSOCIATION COMPLETE ==========`);
+      // console.log(`[LOG-ASSOC-DEBUG] Success: ${success}`);
       if (!success && lastErrorDetails) {
         console.error(`[LOG-ASSOC-DEBUG] Last error details:`, lastErrorDetails);
       }
@@ -4279,12 +4482,12 @@ async function handleFrameCaptureComplete(sessionData) {
       }
     } else if (bufferedLogs.length > 0 && serverMode === 'browser-only') {
       // Browser-only mode: Associate logs with frames in IndexedDB
-      console.log(`[Browser-Only] Associating ${bufferedLogs.length} logs with frames in IndexedDB...`);
+      // console.log(`[Browser-Only] Associating ${bufferedLogs.length} logs with frames in IndexedDB...`);
 
       try {
         // Get all frames for this session from IndexedDB
         const frames = await dataBuffer.getBrowserFrames(sessionIdToUse);
-        console.log(`[Browser-Only] Retrieved ${frames.length} frames from IndexedDB for log association`);
+        // console.log(`[Browser-Only] Retrieved ${frames.length} frames from IndexedDB for log association`);
 
         if (frames.length === 0) {
           console.warn('[Browser-Only] No frames found - logs cannot be associated');
@@ -4328,7 +4531,7 @@ async function handleFrameCaptureComplete(sessionData) {
             }
           }
 
-          console.log(`[Browser-Only] ✓ Associated logs with ${updatedCount} frames in IndexedDB`);
+          // console.log(`[Browser-Only] ✓ Associated logs with ${updatedCount} frames in IndexedDB`);
         }
       } catch (error) {
         console.error('[Browser-Only] Failed to associate logs with frames:', error);
@@ -4354,18 +4557,18 @@ async function handleFrameCaptureComplete(sessionData) {
     // Save screen interactions to database
     // Skip server communication in browser-only mode
     if (screenInteractions.length > 0 && serverMode !== 'browser-only') {
-      console.log(`[Server Mode] Saving ${screenInteractions.length} screen interactions to database`);
+      // console.log(`[Server Mode] Saving ${screenInteractions.length} screen interactions to database`);
       
       // Use comprehensive error handling for screen interactions save
       const saveScreenInteractions = async (data, context) => {
         // Diagnostic logging for screen interactions save
-        console.log('[ScreenInteractions] Preparing to save interactions:', {
-          sessionId: context.sessionId,
-          dataType: typeof data,
-          isArray: Array.isArray(data),
-          interactionCount: Array.isArray(data) ? data.length : 'N/A',
-          hasComplexData: Array.isArray(data) && data.some(i => i.element_html && i.element_html.length > 100)
-        });
+        // console.log('[ScreenInteractions] Preparing to save interactions:', {
+        //   sessionId: context.sessionId,
+        //   dataType: typeof data,
+        //   isArray: Array.isArray(data),
+        //   interactionCount: Array.isArray(data) ? data.length : 'N/A',
+        //   hasComplexData: Array.isArray(data) && data.some(i => i.element_html && i.element_html.length > 100)
+        // });
 
         let lastError = null;
         for (const port of CONFIG_PORTS) {
@@ -4375,7 +4578,7 @@ async function handleFrameCaptureComplete(sessionData) {
             try {
               // data is already { interactions: screenInteractions } from caller
               serializedBody = JSON.stringify(data);
-              console.log('[ScreenInteractions] JSON serialization successful, length:', serializedBody.length);
+              // console.log('[ScreenInteractions] JSON serialization successful, length:', serializedBody.length);
             } catch (serError) {
               console.error('[ScreenInteractions] JSON serialization failed:', serError);
               throw new Error(`JSON serialization failed: ${serError.message}`);
@@ -4392,7 +4595,7 @@ async function handleFrameCaptureComplete(sessionData) {
             if (response.ok) {
               // Only log if we had to try multiple ports
               if (port !== CONFIG_PORTS[0]) {
-                console.log(`[ScreenInteractions] Connected to server on port ${port}`);
+                // console.log(`[ScreenInteractions] Connected to server on port ${port}`);
               }
               return { success: true, result: { saved: true } };
             } else {
@@ -4416,13 +4619,13 @@ async function handleFrameCaptureComplete(sessionData) {
       );
 
       if (saveResult.success) {
-        console.log('Screen interactions saved successfully with comprehensive error handling');
+        // console.log('Screen interactions saved successfully with comprehensive error handling');
       } else {
         console.error('[ErrorHandling] Failed to save screen interactions after comprehensive error handling');
       }
     } else if (screenInteractions.length > 0 && serverMode === 'browser-only') {
       // Browser-only mode: screen interactions not needed
-      console.log(`[Browser-Only] ✓ Skipping screen interactions save (browser-only mode)`);
+      // console.log(`[Browser-Only] ✓ Skipping screen interactions save (browser-only mode)`);
     }
 
     // Stop session via session manager if available
@@ -4430,7 +4633,7 @@ async function handleFrameCaptureComplete(sessionData) {
       try {
         const stopResult = await sessionManager.stopRecording(currentSession.sessionId, currentOwnerId);
         if (stopResult.success) {
-          console.log(`Session stopped via session manager. Duration: ${stopResult.sessionDuration}ms, Frames: ${stopResult.frameCount}`);
+          // console.log(`Session stopped via session manager. Duration: ${stopResult.sessionDuration}ms, Frames: ${stopResult.frameCount}`);
         } else {
           console.warn('Failed to stop session via session manager:', stopResult.error?.message);
         }
@@ -4482,7 +4685,7 @@ async function handleFrameCaptureComplete(sessionData) {
         serverPort: recordingServerPort
       }).catch(() => {});
     } else {
-      console.log('[Browser-Only] Skipping frameSessionComplete message - recording is in IndexedDB');
+      // console.log('[Browser-Only] Skipping frameSessionComplete message - recording is in IndexedDB');
     }
     
     // Notify content script to hide recording indicator