@dynamicu/chromedebug-mcp 2.6.7 → 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');
@@ -8,13 +8,129 @@ importScripts('pako.min.js');
 importScripts('data-buffer.js');
 importScripts('upload-manager.js');
 importScripts('chrome-session-manager.js');
-importScripts('firebase-config.js');
-importScripts('license-helper.js');
+importScripts('console-interception-library.js'); // Shared console interception library
 importScripts('browser-recording-manager.js');
 
 const CONFIG_PORTS = CHROMEDEBUG_CONFIG.ports;
 const DISCOVERY_TIMEOUT = CHROMEDEBUG_CONFIG.discoveryTimeout;
 
+// ============================================================
+// FREE TIER USAGE TRACKING (Local Storage - No Firebase)
+// ============================================================
+// Daily limit: 5 recordings per day
+// Resets at midnight local time
+// Tracks both workflow and screen recordings
+// ============================================================
+
+const FREE_TIER_DAILY_LIMIT = 5;
+const USAGE_STORAGE_KEY = 'chromedebug_daily_usage';
+
+/**
+ * Check if this is the PRO version
+ */
+function isProVersion() {
+  const manifest = chrome.runtime.getManifest();
+  return manifest.name.includes('PRO');
+}
+
+/**
+ * Get today's date string in local timezone (YYYY-MM-DD)
+ */
+function getTodayDateString() {
+  const now = new Date();
+  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
+}
+
+/**
+ * Get current usage for today
+ * @returns {Promise<{count: number, date: string, limit: number}>}
+ */
+async function getUsageToday() {
+  // PRO version: unlimited
+  if (isProVersion()) {
+    return { count: 0, date: getTodayDateString(), limit: Infinity, isPro: true };
+  }
+
+  const result = await chrome.storage.local.get(USAGE_STORAGE_KEY);
+  const usage = result[USAGE_STORAGE_KEY] || { count: 0, date: '' };
+  const today = getTodayDateString();
+
+  // Reset if new day
+  if (usage.date !== today) {
+    return { count: 0, date: today, limit: FREE_TIER_DAILY_LIMIT };
+  }
+
+  return { count: usage.count, date: today, limit: FREE_TIER_DAILY_LIMIT };
+}
+
+/**
+ * Check if user can start a new recording
+ * @returns {Promise<{allowed: boolean, count: number, limit: number, message?: string}>}
+ */
+async function checkUsageBeforeRecording() {
+  const usage = await getUsageToday();
+
+  if (usage.isPro) {
+    return { allowed: true, count: 0, limit: Infinity, isPro: true };
+  }
+
+  if (usage.count >= usage.limit) {
+    return {
+      allowed: false,
+      count: usage.count,
+      limit: usage.limit,
+      message: `Daily limit reached (${usage.count}/${usage.limit}). Upgrade to Pro for unlimited recordings.`
+    };
+  }
+
+  return { allowed: true, count: usage.count, limit: usage.limit };
+}
+
+/**
+ * Increment usage count after successful recording
+ * @returns {Promise<{success: boolean, count: number, limit: number}>}
+ */
+async function incrementUsageAfterRecording() {
+  // PRO version: skip tracking
+  if (isProVersion()) {
+    // console.log('[Usage] PRO version - skipping usage tracking');
+    return { success: true, count: 0, limit: Infinity, isPro: true };
+  }
+
+  const today = getTodayDateString();
+  const result = await chrome.storage.local.get(USAGE_STORAGE_KEY);
+  const usage = result[USAGE_STORAGE_KEY] || { count: 0, date: '' };
+
+  // Reset if new day, then increment
+  const newCount = (usage.date === today) ? usage.count + 1 : 1;
+
+  await chrome.storage.local.set({
+    [USAGE_STORAGE_KEY]: { count: newCount, date: today }
+  });
+
+  // console.log(`[Usage] Recording tracked: ${newCount}/${FREE_TIER_DAILY_LIMIT} today`);
+
+  return { success: true, count: newCount, limit: FREE_TIER_DAILY_LIMIT };
+}
+
+// Console interception configuration for screen recording
+const SCREEN_RECORDING_CONSOLE_CONFIG = {
+  overrideFlagName: '__chromePilotConsoleOverridden',
+  originalConsoleName: '__chromePilotOriginalConsole',
+  relayFlagName: '__chromePilotConsoleRelay',
+  messageType: 'chrome-debug-console-log',
+  backgroundAction: 'consoleLog'
+};
+
+// Console interception configuration for workflow recording
+const WORKFLOW_RECORDING_CONSOLE_CONFIG = {
+  overrideFlagName: '__chromePilotWorkflowConsoleOverridden',
+  originalConsoleName: '__chromePilotWorkflowOriginalConsole',
+  relayFlagName: '__chromePilotWorkflowConsoleRelay',
+  messageType: 'chrome-debug-workflow-console-log',
+  backgroundAction: 'workflowConsoleLog'
+};
+
 // Frame queue for handling validation race conditions
 // v2.1.2: Prevents frame loss when lease renewal hasn't propagated yet
 const pendingFrameQueue = new Map(); // sessionId -> array of frame batches
@@ -38,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;
     }
 
@@ -48,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() {
@@ -60,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) {
@@ -68,7 +184,7 @@ class LogStreamer {
       }
     }
     this.serverAvailable = false;
-    console.log('[LogStreamer] No server available');
+    // console.log('[LogStreamer] No server available');
   }
 
   startPeriodicStreaming() {
@@ -111,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
     }
 
@@ -140,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) {
@@ -164,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;
         }
@@ -215,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
@@ -273,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));
@@ -286,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());
@@ -294,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
@@ -315,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}`);
     }
   }
 
@@ -341,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;
   }
 }
@@ -456,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 = [];
@@ -481,6 +597,162 @@ class LogTabBuffer {
   }
 }
 
+/**
+ * WorkflowLogBuffer - Race-safe log buffer for workflow recording
+ *
+ * Mirrors LogTabBuffer but uses workflow-specific storage keys (`workflow_${tabId}`).
+ * This prevents race conditions when multiple logs arrive rapidly during workflow recording.
+ *
+ * Technical Debt Note: This class duplicates LogTabBuffer logic. Future refactoring
+ * could make LogTabBuffer accept a configurable storage key prefix to eliminate duplication.
+ */
+class WorkflowLogBuffer {
+  constructor(tabId) {
+    this.tabId = tabId;
+    this.buffer = [];
+    this.processing = false;
+    this.processingQueue = [];
+    this.totalLogsAdded = 0;
+    this.totalLogsFlushed = 0;
+    this.lastFlushTime = 0;
+    this.storageKey = `workflow_${tabId}`;
+  }
+
+  // Add log to buffer with queuing to prevent race conditions
+  async addLog(logEntry) {
+    return new Promise((resolve, reject) => {
+      this.processingQueue.push({
+        type: 'add',
+        logEntry,
+        resolve,
+        reject
+      });
+
+      // Process queue if not already processing
+      if (!this.processing) {
+        this.processQueue();
+      }
+    });
+  }
+
+  // Flush buffer to Chrome storage
+  async flush() {
+    return new Promise((resolve, reject) => {
+      this.processingQueue.push({
+        type: 'flush',
+        resolve,
+        reject
+      });
+
+      // Process queue if not already processing
+      if (!this.processing) {
+        this.processQueue();
+      }
+    });
+  }
+
+  // Sequential processing of queue to prevent race conditions
+  async processQueue() {
+    if (this.processing) {
+      return; // Already processing
+    }
+
+    this.processing = true;
+
+    try {
+      while (this.processingQueue.length > 0) {
+        const operation = this.processingQueue.shift();
+
+        try {
+          if (operation.type === 'add') {
+            this.buffer.push(operation.logEntry);
+            this.totalLogsAdded++;
+
+            // Auto-flush if buffer gets too large
+            if (this.buffer.length >= 100) {
+              await this.performFlush();
+            }
+
+            operation.resolve();
+          } else if (operation.type === 'flush') {
+            await this.performFlush();
+            operation.resolve();
+          }
+        } catch (error) {
+          operation.reject(error);
+        }
+      }
+    } finally {
+      this.processing = false;
+    }
+  }
+
+  // Actual flush operation to Chrome storage
+  async performFlush() {
+    if (this.buffer.length === 0) {
+      return; // Nothing to flush
+    }
+
+    try {
+      // Read current logs from storage
+      const result = await chrome.storage.session.get(this.storageKey);
+      const existingLogs = result[this.storageKey] || [];
+
+      // Append new logs
+      const updatedLogs = [...existingLogs, ...this.buffer];
+
+      // Check storage size limit
+      const estimatedSize = JSON.stringify(updatedLogs).length;
+      if (estimatedSize > 500000) { // ~500KB limit
+        const beforeCount = updatedLogs.length;
+        const retentionPercentage = 0.95;
+        const afterCount = Math.floor(updatedLogs.length * retentionPercentage);
+        console.warn(`[WorkflowLogBuffer] Storage size limit approached for tab ${this.tabId}, truncating from ${beforeCount} to ${afterCount} logs`);
+        const recentLogs = updatedLogs.slice(-afterCount);
+        await chrome.storage.session.set({ [this.storageKey]: recentLogs });
+      } else {
+        await chrome.storage.session.set({ [this.storageKey]: updatedLogs });
+      }
+
+      this.totalLogsFlushed += this.buffer.length;
+      // console.log(`[WorkflowLogBuffer] Flushed ${this.buffer.length} logs for tab ${this.tabId} (total: ${this.totalLogsFlushed})`);
+
+      // Clear the buffer
+      this.buffer = [];
+      this.lastFlushTime = Date.now();
+
+    } catch (error) {
+      console.error(`[WorkflowLogBuffer] Failed to flush logs for tab ${this.tabId}:`, error);
+      throw error;
+    }
+  }
+
+  // Get buffer statistics
+  getStats() {
+    return {
+      bufferedLogs: this.buffer.length,
+      totalAdded: this.totalLogsAdded,
+      totalFlushed: this.totalLogsFlushed,
+      processing: this.processing,
+      queueLength: this.processingQueue.length,
+      lastFlushTime: this.lastFlushTime
+    };
+  }
+
+  // Clean up buffer when recording stops
+  async cleanup() {
+    try {
+      // Flush any remaining logs
+      if (this.buffer.length > 0) {
+        await this.performFlush();
+      }
+      // console.log(`[WorkflowLogBuffer] Cleaned up buffer for tab ${this.tabId}`);
+    } catch (error) {
+      console.error(`[WorkflowLogBuffer] Error during cleanup for tab ${this.tabId}:`, error);
+    }
+  }
+}
+
 // Initialize data buffer and upload manager
 let dataBuffer = null;
 let uploadManager = null;
@@ -537,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');
     }
@@ -548,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);
@@ -569,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;
@@ -578,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;
@@ -587,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;
@@ -597,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
@@ -655,10 +927,14 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     'restoreFromPoint',
     'getWebSocketPort',
     'startRecording',
+    'stopRecording',
+    'openFrameEditor',
     'checkConnection',
     'workflowConsoleLog',  // v2.0.8: handle workflow console logs
     'workflowAction',      // v2.0.8: handle workflow actions
-    'renewLease'           // v2.1.2: session manager lease renewal for frame capture
+    'renewLease',          // v2.1.2: session manager lease renewal for frame capture
+    'frameSessionComplete', // Frame recording completion notification
+    'recordingStopped'     // Recording stopped notification for popup refresh
   ];
   
   if (handledByOtherListener.includes(messageType)) {
@@ -704,7 +980,27 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
         sendResponse({ status: 'error', message: error.message });
       }
       break;
-    
+
+    case 'getUsage':
+      // Get current usage count for popup display
+      getUsageToday().then(usage => {
+        sendResponse({ success: true, ...usage });
+      }).catch(error => {
+        console.error('[Usage] Failed to get usage:', error);
+        sendResponse({ success: false, error: error.message });
+      });
+      return true; // Async response
+
+    case 'checkUsageLimit':
+      // Check if user can start a new recording
+      checkUsageBeforeRecording().then(result => {
+        sendResponse(result);
+      }).catch(error => {
+        console.error('[Usage] Failed to check usage limit:', error);
+        sendResponse({ allowed: true, error: error.message }); // Fail-open
+      });
+      return true; // Async response
+
     case 'UPLOAD_BATCH':
       // Add events to the background's DataBuffer for upload
       if (message.events && message.recordingId) {
@@ -716,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();
@@ -790,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 });
@@ -802,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 });
@@ -832,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);
@@ -845,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);
           }
         }
       }
@@ -858,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
@@ -869,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();
@@ -892,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,
@@ -923,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
@@ -938,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);
@@ -988,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) {
@@ -1002,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
@@ -1019,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 => {
@@ -1045,107 +1341,23 @@ 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;
   }
 });
 
-// Auto-activate PRO license on startup if activation file exists
-async function checkAndActivateLicense() {
-  try {
-    console.log('[License Auto-Activation] Checking for activation file...');
-
-    // Try to fetch the activation file from the extension directory
-    const activationUrl = chrome.runtime.getURL('license-activation.json');
-    const response = await fetch(activationUrl);
-
-    if (!response.ok) {
-      console.log('[License Auto-Activation] No activation file found - using normal license flow');
-      return;
-    }
-
-    const activationData = await response.json();
-    console.log('[License Auto-Activation] Found activation file:', {
-      tier: activationData.tier,
-      activated_at: activationData.activated_at
-    });
-
-    // Check if license is already cached and valid
-    const cached = await chrome.storage.local.get('chromedebug_license_cache');
-    if (cached.chromedebug_license_cache?.valid && cached.chromedebug_license_cache?.tier === 'pro') {
-      console.log('[License Auto-Activation] License already activated and cached');
-      return;
-    }
-
-    // Activate the license
-    const licenseKey = activationData.license_key;
-    console.log('[License Auto-Activation] Activating license...');
-
-    // Call LemonSqueezy activation via Firebase Cloud Function
-    const instanceId = crypto.randomUUID();
-    await chrome.storage.local.set({
-      'chromedebug_instance_id': instanceId,
-      'ls_instance_id': instanceId,
-      'ls_license_key': licenseKey
-    });
-
-    const activationResponse = await fetch(`${FUNCTIONS_URL}/activateLicense`, {
-      method: 'POST',
-      headers: {'Content-Type': 'application/json'},
-      body: JSON.stringify({
-        licenseKey,
-        instanceId,
-        instanceName: `ChromeDebug-${navigator.userAgent.match(/Chrome\/(\d+)/)?.[1] || 'Unknown'}`
-      })
-    });
-
-    if (!activationResponse.ok) {
-      throw new Error(`Activation failed: HTTP ${activationResponse.status}`);
-    }
-
-    const activationResult = await activationResponse.json();
-    console.log('[License Auto-Activation] Activation result:', activationResult);
-
-    if (activationResult.activated || activationResult.valid) {
-      // Cache the license status
-      const licenseCache = {
-        valid: true,
-        tier: 'pro',
-        licenseKey: licenseKey.substring(0, 8) + '...',
-        cachedAt: Date.now(),
-        graceUntil: Date.now() + (30 * 24 * 60 * 60 * 1000) // 30 days
-      };
-
-      await chrome.storage.local.set({
-        'chromedebug_license_cache': licenseCache
-      });
-
-      console.log('[License Auto-Activation] ✓ PRO license activated successfully!');
-      console.log('[License Auto-Activation] Cached license status:', licenseCache);
-    } else {
-      console.error('[License Auto-Activation] Activation returned invalid status:', activationResult);
-    }
-
-  } catch (error) {
-    // Don't block extension startup on activation errors
-    console.error('[License Auto-Activation] Failed to auto-activate license:', error);
-    console.log('[License Auto-Activation] Extension will continue with normal license flow');
-  }
-}
+// License checking removed - using separate Chrome Web Store listings for FREE and PRO
 
 // 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');
-
-  // Check for PRO license auto-activation first
-  await checkAndActivateLicense();
+  // 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);
     }
@@ -1154,12 +1366,9 @@ chrome.runtime.onStartup.addListener(async () => {
   }
 });
 
-// Extension install/update - also check for license activation
+// Extension install/update
 chrome.runtime.onInstalled.addListener(async (details) => {
-  console.log('[Background] Extension installed/updated:', details.reason);
-
-  // Check for PRO license auto-activation on install/update
-  await checkAndActivateLicense();
+  // console.log('[Background] Extension installed/updated:', details.reason);
 });
 
 // Listen for tab updates to handle restore points
@@ -1171,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);
           });
@@ -1182,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);
         });
@@ -1257,6 +1466,43 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   }
 });
 
+// Defensive cleanup when tabs are closed
+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`);
+    workflowRecordingTabs.delete(tabId);
+    workflowIncludeLogs.delete(tabId);
+    workflowScreenshotSettings.delete(tabId);
+    workflowSessionNames.delete(tabId);
+
+    // Clean up WorkflowLogBuffer
+    const buffer = workflowLogBuffers.get(tabId);
+    if (buffer) {
+      buffer.cleanup().then(() => {
+        workflowLogBuffers.delete(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);
+      });
+    }
+
+    // Remove session storage
+    chrome.storage.session.remove(`workflow_${tabId}`).catch(err => {
+      console.error(`[Workflow] Error removing session storage for closed tab ${tabId}:`, err);
+    });
+
+    // Notify popup that recording has stopped (tab was closed)
+    chrome.storage.local.set({
+      workflowRecording: false,
+      workflowStartTime: null
+    }).catch(err => {
+      console.error(`[Workflow] Error updating storage for closed tab ${tabId}:`, err);
+    });
+  }
+});
+
 // Session Manager for robust recording state management
 let sessionManager = null;
 let currentSession = null; // Cache current session state
@@ -1267,17 +1513,154 @@ let hasOffscreenDocument = false;
 let screenInteractions = [];
 let recordingServerPort = null; // Track which port is being used for current recording
 
-// Legacy compatibility variables (DEPRECATED - remove after migration is complete)
-let recordingTabId = null; // DEPRECATED: Use getCurrentTabIdAsync() instead
-let isCurrentlyRecording = false; // DEPRECATED: Use isCurrentlyRecordingAsync() instead
-let currentRecordingSessionId = null; // DEPRECATED: Use getCurrentSessionIdAsync() instead
-let frameCounter = new Map(); // DEPRECATED: Session manager handles frame counting
+// Legacy compatibility variables (DEPRECATED - remove after migration is complete)
+let recordingTabId = null; // DEPRECATED: Use getCurrentTabIdAsync() instead
+let isCurrentlyRecording = false; // DEPRECATED: Use isCurrentlyRecordingAsync() instead
+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);
   }
@@ -1399,7 +1782,7 @@ let workflowRecordingTabs = new Map(); // Map of tabId to recording state
 let workflowIncludeLogs = new Map(); // Map of tabId to includeLogsInExport setting
 let workflowScreenshotSettings = new Map(); // Map of tabId to screenshot settings
 let workflowSessionNames = new Map(); // Map of tabId to session name
-let workflowUserIds = new Map(); // Map of tabId to userId for license tracking
+let workflowLogBuffers = new Map(); // Map of tabId to WorkflowLogBuffer instance
 
 //=============================================================================
 // COMPREHENSIVE ERROR HANDLING SYSTEM
@@ -1413,7 +1796,7 @@ let workflowUserIds = new Map(); // Map of tabId to userId for license tracking
  */
 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) {
@@ -1436,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) {
@@ -1465,7 +1848,7 @@ async function initializeBackupStorage() {
     };
 
     request.onsuccess = () => {
-      console.log('[ErrorHandling] IndexedDB initialized successfully');
+      // console.log('[ErrorHandling] IndexedDB initialized successfully');
       resolve(request.result);
     };
 
@@ -1495,7 +1878,7 @@ async function initializeBackupStorage() {
         errorStore.createIndex('timestamp', 'timestamp', { unique: false });
       }
 
-      console.log('[ErrorHandling] IndexedDB schema created');
+      // console.log('[ErrorHandling] IndexedDB schema created');
     };
   });
 }
@@ -1506,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');
 }
 
 /**
@@ -1519,7 +1902,7 @@ async function setupNotificationSystem() {
     await chrome.notifications.clear(notificationId);
   }
 
-  console.log('[ErrorHandling] Notification system ready');
+  // console.log('[ErrorHandling] Notification system ready');
 }
 
 /**
@@ -1558,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);
@@ -1585,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');
       }
     }
 
@@ -1602,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');
@@ -1642,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');
@@ -1738,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
@@ -1779,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) => {
@@ -1799,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;
@@ -1828,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);
           }
@@ -1875,10 +2258,10 @@ async function downloadBackupData() {
 
           chrome.downloads.download({
             url: url,
-            filename: `chrome-pilot-backup-${Date.now()}.json`
+            filename: `chrome-debug-backup-${Date.now()}.json`
           });
 
-          console.log('[ErrorHandling] Backup data download initiated');
+          // console.log('[ErrorHandling] Backup data download initiated');
         };
       };
     };
@@ -1894,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;
     }
     
@@ -1905,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;
     }
@@ -1928,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
@@ -1936,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);
           
@@ -1957,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 {
@@ -1965,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,
@@ -1977,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);
         }
       }
       
@@ -2015,8 +2398,13 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   }
   
   if (request.action === 'stopRecording') {
-    stopRecording().then(() => {
-      sendResponse({ success: true });
+    stopRecording().then(async (result) => {
+      // Track usage for FREE tier after successful screen recording
+      if (result.success) {
+        const usageResult = await incrementUsageAfterRecording();
+        result.usage = usageResult; // Include updated usage in response
+      }
+      sendResponse(result); // Pass through { success: true, sessionId: ..., usage: ... }
     }).catch((error) => {
       console.error('Error stopping recording:', error);
       sendResponse({ success: false, error: error.message });
@@ -2024,6 +2412,23 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     return true;
   }
 
+  if (request.action === 'openFrameEditor') {
+    // Content scripts can't create tabs, so handle it here
+    const sessionId = request.sessionId;
+    const type = request.type; // 'workflow' or undefined for screen recordings
+    const editorUrl = type === 'workflow'
+      ? chrome.runtime.getURL(`pro/frame-editor.html?sessionId=${sessionId}&type=workflow`)
+      : chrome.runtime.getURL(`pro/frame-editor.html?sessionId=${sessionId}`);
+
+    chrome.tabs.create({ url: editorUrl }).then(() => {
+      sendResponse({ success: true });
+    }).catch((error) => {
+      console.error('Error opening frame editor:', error);
+      sendResponse({ success: false, error: error.message });
+    });
+    return true;
+  }
+
   // Get quota information for browser-only mode
   if (request.action === 'getQuotaInfo') {
     getQuotaInfo().then((quotaInfo) => {
@@ -2037,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');
@@ -2053,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);
@@ -2087,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) {
@@ -2140,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) => {
@@ -2188,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
@@ -2212,28 +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;
   }
 
-  // License check handler for workflow recording
-  if (request.action === 'checkLicenseForWorkflow') {
-    console.log('[License] popup.js requesting license check for workflow recording');
-    LicenseHelper.checkLicenseBeforeRecording().then((licenseCheck) => {
-      console.log('[License] License check result for popup:', licenseCheck);
-      sendResponse(licenseCheck);
-    }).catch((error) => {
-      console.error('[License] Error checking license:', error);
-      // Fail-open: allow recording on error
-      sendResponse({ allowed: true, error: error.message });
-    });
-    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, 
@@ -2249,9 +2679,17 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   }
   
   if (request.action === 'stopWorkflowRecording') {
-    console.log('Stopping workflow recording for tab:', request.tabId);
-    stopWorkflowRecording(request.tabId).then((workflow) => {
-      sendResponse({ success: true, workflow: workflow });
+    const tabId = request.tabId || sender.tab?.id;
+    // 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) => {
+      // Track usage for FREE tier after successful recording
+      if (result.success) {
+        const usageResult = await incrementUsageAfterRecording();
+        result.usage = usageResult; // Include updated usage in response
+      }
+      sendResponse(result);
     }).catch((error) => {
       console.error('Error stopping workflow recording:', error);
       sendResponse({ success: false, error: error.message });
@@ -2338,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);
@@ -2351,23 +2789,24 @@ 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);
       }
     }
   }
   
-  // Buffer workflow console logs
+  // Buffer workflow console logs using race-safe WorkflowLogBuffer
   if (request.action === 'workflowConsoleLog' && sender.tab) {
     const tabId = sender.tab.id;
     if (workflowRecordingTabs.has(tabId) && workflowIncludeLogs.get(tabId)) {
-      // Store logs in session storage for workflow recording
-      chrome.storage.session.get(`workflow_${tabId}`).then(result => {
-        const logs = result[`workflow_${tabId}`] || [];
-        logs.push(request.log);
-        chrome.storage.session.set({ [`workflow_${tabId}`]: logs });
-      }).catch(err => {
-        console.error('Error buffering workflow log:', err);
-      });
+      const buffer = workflowLogBuffers.get(tabId);
+      if (buffer) {
+        // Use race-safe buffer to prevent read-modify-write race conditions
+        buffer.addLog(request.log).catch(err => {
+          console.error('[WorkflowLogBuffer] Error adding log:', err);
+        });
+      } else {
+        console.warn(`[Workflow] No buffer found for tab ${tabId}, log dropped`);
+      }
     }
   }
   
@@ -2466,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');
@@ -2511,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)}`;
@@ -2587,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;
         }
@@ -2611,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);
@@ -2678,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');
@@ -2693,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 {
@@ -2707,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';
       }
@@ -2716,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';
 }
@@ -2742,30 +3181,9 @@ async function getQuotaInfo() {
 
 async function startRecording(tabId, settings = {}) {
   try {
-    // STEP 1: Detect server mode before starting
+    // Detect server mode before starting
     await detectServerMode();
-    console.log(`[Recording] Mode: ${serverMode}`);
-
-    // STEP 2: Check license and usage limits BEFORE recording
-    console.log('[License] Checking license before recording...');
-    const licenseCheck = await LicenseHelper.checkLicenseBeforeRecording();
-    console.log('[License] License check result:', licenseCheck);
-
-    if (!licenseCheck.allowed) {
-      // Show notification to user
-      chrome.notifications.create({
-        type: 'basic',
-        iconUrl: chrome.runtime.getURL('icon48.png'),
-        title: 'Recording Limit Reached',
-        message: licenseCheck.message || 'Upgrade to Pro for unlimited recordings.',
-        priority: 2
-      });
-
-      throw new Error(licenseCheck.message || 'Recording not allowed');
-    }
-
-    // Store userId for later usage tracking
-    const userId = licenseCheck.userId;
+    // console.log(`[Recording] Mode: ${serverMode}`);
 
     // Check if session manager is available
     if (!sessionManager) {
@@ -2786,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');
     }
@@ -2804,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 = {
@@ -2837,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,
@@ -2870,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://'))) {
@@ -2891,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;
       }
       
@@ -2932,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
@@ -2952,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;
@@ -2965,16 +3395,26 @@ async function stopRecording() {
     // Check if session manager is available
     if (!sessionManager) {
       console.warn('Session manager not available, stopping recording anyway');
-      return;
+      return { success: false, error: 'Session manager not available' };
     }
 
     // Check if currently recording via session manager
     const currentlyRecording = await isCurrentlyRecordingAsync();
     if (!currentlyRecording) {
-      console.log('No active recording session to stop');
-      return;
+      // 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;
+
     // Stop recording with session manager
     if (currentSession?.sessionId && currentOwnerId) {
       const stopResult = await sessionManager.stopRecording(currentSession.sessionId, currentOwnerId);
@@ -2982,18 +3422,15 @@ async function stopRecording() {
         console.error('Failed to stop session:', stopResult.error?.message);
         // Continue with cleanup anyway
       } else {
-        console.log(`Recording stopped. Duration: ${stopResult.sessionDuration}ms, Frames: ${stopResult.frameCount}`);
+        recordedFrameCount = stopResult.frameCount || 0;
+        recordedDuration = stopResult.sessionDuration || 0;
+        // 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);
         }
-
-        // STEP 2: Track usage AFTER successful recording completion
-        console.log('[License] Tracking usage after recording completion...');
-        const usageResult = await LicenseHelper.trackUsageAfterRecording();
-        console.log('[License] Usage tracking result:', usageResult);
       }
     }
 
@@ -3002,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
@@ -3023,6 +3460,29 @@ async function stopRecording() {
       target: 'offscreen'
     });
 
+    // CRITICAL: Store recordingTabId BEFORE clearing it (for cleanup)
+    const previousRecordingTabId = recordingTabId;
+    // 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);
+        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] 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');
+    }
+
     // CRITICAL FIX: Send stop-screen-capture-tracking message to ALL content scripts
     try {
       const tabs = await chrome.tabs.query({});
@@ -3032,23 +3492,33 @@ 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);
     }
 
+    // CRITICAL FIX: Restore original console methods and remove event listeners
+    if (previousRecordingTabId) {
+      try {
+        // console.log('[Background] Stopping console log capture for tab:', previousRecordingTabId);
+        await stopCapturingLogs(previousRecordingTabId);
+      } catch (cleanupError) {
+        console.error('[Background] Failed to cleanup console interceptor:', cleanupError);
+        // Continue with stop process even if cleanup fails
+      }
+    }
+
     // Clear session cache
     currentSession = null;
     currentOwnerId = null;
 
     // Update legacy state for backward compatibility (will be removed)
-    const previousRecordingTabId = recordingTabId; // Store for logBuffer cleanup
     isCurrentlyRecording = false;
     recordingTabId = null;
     currentRecordingSessionId = null;
@@ -3058,11 +3528,56 @@ async function stopRecording() {
       logBuffer.clearTab(previousRecordingTabId);
     }
 
-    console.log('Stop message sent to offscreen document');
+    // 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}`);
+      pendingFrameQueue.delete(stoppedSessionId);
+    }
+
+    // console.log('Stop message sent to offscreen document');
+
+    // Notify popup to refresh recordings list
+    chrome.runtime.sendMessage({
+      action: 'recordingStopped',
+      sessionId: stoppedSessionId
+    }).catch(() => {
+      // Popup might not be open, that's okay
+      // console.log('[Background] Popup not available to notify of recording stop');
+    });
+
+    // Format duration as human-readable string (e.g., "1m 30s" or "45s")
+    const formatDurationForDisplay = (ms) => {
+      const seconds = Math.floor(ms / 1000);
+      if (seconds < 60) {
+        return `${seconds}s`;
+      }
+      const minutes = Math.floor(seconds / 60);
+      const remainingSeconds = seconds % 60;
+      return remainingSeconds > 0 ? `${minutes}m ${remainingSeconds}s` : `${minutes}m`;
+    };
+
+    // Return success with sessionId, frameCount and duration for popup display
+    return {
+      success: true,
+      sessionId: stoppedSessionId,
+      frameCount: recordedFrameCount,
+      duration: formatDurationForDisplay(recordedDuration)
+    };
   } catch (error) {
     console.error('Error in stopRecording:', error);
     // Clear session cache even on error
     const errorRecordingTabId = recordingTabId; // Store for cleanup
+
+    // CRITICAL FIX: Clean up console interceptor even on error
+    if (errorRecordingTabId) {
+      try {
+        // 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);
+      }
+    }
+
     currentSession = null;
     currentOwnerId = null;
     isCurrentlyRecording = false;
@@ -3081,238 +3596,27 @@ async function stopRecording() {
 
 
 // Capture console logs from the recording tab
+// REFACTORED: Now uses shared console-interception-library.js
 async function startCapturingLogs(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 inject console logger into restricted URL:', tab.url);
-    console.warn('WARNING: Console logs cannot be captured on restricted pages (chrome://, chrome-extension://, etc.)');
-    console.warn('To capture console logs, please navigate to a regular web page before recording.');
-    return false;
-  }
-  
-  // First inject the main world console interceptor
-  try {
-    const results = await chrome.scripting.executeScript({
-      target: { tabId: tabId },
-      world: 'MAIN',
-      func: () => {
-        // Check if we've already overridden console methods
-        if (window.__chromePilotConsoleOverridden) {
-          console.log('[Chrome Debug] Console already overridden, skipping');
-          return 'already_installed';
-        }
-        window.__chromePilotConsoleOverridden = true;
-        console.log('[Chrome Debug] Installing console interceptor');
-      
-      // Override console methods to capture logs - complete coverage
-      const originalLog = console.log;
-      const originalError = console.error;
-      const originalWarn = console.warn;
-      const originalInfo = console.info;
-      const originalDebug = console.debug;
-      const originalTrace = console.trace;
-      const originalTable = console.table;
-      const originalDir = console.dir;
-      const originalGroup = console.group;
-      const originalGroupEnd = console.groupEnd;
-      const originalTime = console.time;
-      const originalTimeEnd = console.timeEnd;
-      const originalCount = console.count;
-      
-      const sendLog = (level, args) => {
-        try {
-          // Pre-serialize arguments to strings to avoid structured clone errors
-          const serializedArgs = args.map(arg => {
-            try {
-              if (arg === null) return 'null';
-              if (arg === undefined) return 'undefined';
-              if (typeof arg === 'function') return '[Function: ' + (arg.name || 'anonymous') + ']';
-              if (arg instanceof Element) return '[DOM Element: ' + arg.tagName + ']';
-              if (typeof arg === 'object') {
-                // Try to stringify, but limit depth to avoid circular references
-                let stringified = JSON.stringify(arg, null, 2);
-                
-                // Check if this looks like a base64 image and truncate it
-                if (stringified.includes('data:image/') && stringified.length > 1000) {
-                  const match = stringified.match(/data:image\/([^;]+);base64,(.{0,100})/);
-                  if (match) {
-                    return `[Base64 Image: ${match[1]}, ${stringified.length} bytes total, truncated...]`;
-                  }
-                }
-                
-                // Truncate any extremely large strings
-                const maxLength = 5000;
-                if (stringified.length > maxLength) {
-                  return stringified.substring(0, maxLength) + `... [TRUNCATED: ${stringified.length} total bytes]`;
-                }
-                
-                return stringified;
-              }
-              
-              // Also check for base64 strings directly
-              const strValue = String(arg);
-              if (strValue.includes('data:image/') && strValue.length > 1000) {
-                const match = strValue.match(/data:image\/([^;]+);base64,(.{0,100})/);
-                if (match) {
-                  return `[Base64 Image: ${match[1]}, ${strValue.length} bytes total, truncated...]`;
-                }
-              }
-              
-              // Truncate any extremely large strings
-              if (strValue.length > 5000) {
-                return strValue.substring(0, 5000) + `... [TRUNCATED: ${strValue.length} total bytes]`;
-              }
-              
-              return strValue;
-            } catch (e) {
-              return '[Object: could not serialize]';
-            }
-          });
-          
-          // Post message to content script
-          window.postMessage({
-            type: 'chrome-pilot-console-log',
-            log: {
-              level,
-              message: serializedArgs.join(' '),
-              timestamp: Date.now()
-            }
-          }, '*');
-        } catch (e) {
-          // Ignore errors when sending logs
-        }
-      };
-      
-      console.log = (...args) => {
-        sendLog('log', args);
-        originalLog.apply(console, args);
-      };
-      
-      console.error = (...args) => {
-        sendLog('error', args);
-        originalError.apply(console, args);
-      };
-      
-      console.warn = (...args) => {
-        sendLog('warn', args);
-        originalWarn.apply(console, args);
-      };
-      
-      console.info = (...args) => {
-        sendLog('info', args);
-        originalInfo.apply(console, args);
-      };
-      
-      console.debug = (...args) => {
-        sendLog('debug', args);
-        originalDebug.apply(console, args);
-      };
-      
-      console.trace = (...args) => {
-        sendLog('trace', args);
-        originalTrace.apply(console, args);
-      };
-      
-      console.table = (...args) => {
-        sendLog('table', args);
-        originalTable.apply(console, args);
-      };
-      
-      console.dir = (...args) => {
-        sendLog('dir', args);
-        originalDir.apply(console, args);
-      };
-      
-      console.group = (...args) => {
-        sendLog('group', args);
-        originalGroup.apply(console, args);
-      };
-      
-      console.groupEnd = (...args) => {
-        sendLog('groupEnd', args);
-        originalGroupEnd.apply(console, args);
-      };
-      
-      console.time = (...args) => {
-        sendLog('time', args);
-        originalTime.apply(console, args);
-      };
-      
-      console.timeEnd = (...args) => {
-        sendLog('timeEnd', args);
-        originalTimeEnd.apply(console, args);
-      };
-      
-      console.count = (...args) => {
-        sendLog('count', args);
-        originalCount.apply(console, args);
-      };
-
-      return 'console_installed';
-    }
-    });
-
-    console.log('[Console Injection] MAIN world script injected successfully:', results);
-
-    // Then inject a content script to relay messages from main world to background
-    await chrome.scripting.executeScript({
-      target: { tabId: tabId },
-      func: () => {
-        // Listen for messages from main world
-        window.addEventListener('message', (event) => {
-          if (event.data && event.data.type === 'chrome-pilot-console-log') {
-            // Forward to background script
-            chrome.runtime.sendMessage({
-              action: 'consoleLog',
-              log: event.data.log
-            });
-          }
-        });
-      }
-    });
+  // console.log('[Screen Recording] Starting console interception using shared library');
+  return await self.ConsoleInterceptionLibrary.startConsoleInterception(tabId, SCREEN_RECORDING_CONSOLE_CONFIG);
+}
 
-    console.log('[Console Injection] Content script relay injected successfully');
-    return true; // Successfully started capturing logs
-  } catch (error) {
-    console.error('[Console Injection] Failed to inject console interceptor:', error);
-    console.error('[Console Injection] Error details:', error.message, error.stack);
-    return false; // Failed to inject console interceptor
-  }
+// 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');
+  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);
-
-    // STEP 1: Check license and usage limits BEFORE recording (same pattern as startRecording)
-    console.log('[License] Checking license before workflow recording...');
-    const licenseCheck = await LicenseHelper.checkLicenseBeforeRecording();
-    console.log('[License] License check result:', licenseCheck);
-
-    if (!licenseCheck.allowed) {
-      // Show notification to user (same pattern as screen recording)
-      chrome.notifications.create({
-        type: 'basic',
-        iconUrl: chrome.runtime.getURL('icon128.png'),
-        title: 'Recording Limit Reached',
-        message: licenseCheck.message || 'Daily limit reached. Upgrade to Pro for unlimited workflow recordings.',
-        buttons: [{ title: 'Upgrade to Pro' }],
-        priority: 2
-      });
-
-      throw new Error(licenseCheck.message || 'Workflow recording not allowed');
-    }
-
-    // Store userId for later usage tracking
-    const userId = licenseCheck.userId;
-    workflowUserIds.set(tabId, userId);
+    // 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)');
     }
     
@@ -3326,107 +3630,18 @@ async function startWorkflowRecording(tabId, includeLogsInExport, sessionName =
     const workflowId = `workflow_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
     await chrome.storage.local.set({ currentWorkflowId: workflowId });
     
-    // Clear any existing logs for this tab
+    // Clear any existing logs for this tab and initialize race-safe buffer
     await chrome.storage.session.set({ [`workflow_${tabId}`]: [] });
-    
-    // Inject main world console interceptor (similar to frame recording)
-    await chrome.scripting.executeScript({
-      target: { tabId: tabId },
-      world: 'MAIN',
-      func: () => {
-        // Check if already injected
-        if (window.__chromePilotWorkflowConsoleOverridden) {
-          return;
-        }
-        window.__chromePilotWorkflowConsoleOverridden = true;
-        
-        // Override console methods to capture logs
-        const originalLog = console.log;
-        const originalError = console.error;
-        const originalWarn = console.warn;
-        const originalInfo = console.info;
-        
-        const sendLog = (level, args) => {
-          try {
-            // Pre-serialize arguments to strings to avoid structured clone errors
-            const serializedArgs = args.map(arg => {
-              try {
-                if (arg === null) return 'null';
-                if (arg === undefined) return 'undefined';
-                if (typeof arg === 'function') return '[Function: ' + (arg.name || 'anonymous') + ']';
-                if (arg instanceof Element) return '[DOM Element: ' + arg.tagName + ']';
-                if (typeof arg === 'object') {
-                  // Try to stringify, but limit depth to avoid circular references
-                  return JSON.stringify(arg, null, 2);
-                }
-                return String(arg);
-              } catch (e) {
-                return '[Object: could not serialize]';
-              }
-            });
-            
-            // Post message to content script
-            window.postMessage({
-              type: 'chrome-pilot-workflow-console-log',
-              log: {
-                level,
-                message: serializedArgs.join(' '),
-                timestamp: Date.now()
-              }
-            }, '*');
-          } catch (e) {
-            // Ignore errors when sending logs
-          }
-        };
-        
-        console.log = (...args) => {
-          sendLog('log', args);
-          originalLog.apply(console, args);
-        };
-        
-        console.error = (...args) => {
-          sendLog('error', args);
-          originalError.apply(console, args);
-        };
-        
-        console.warn = (...args) => {
-          sendLog('warn', args);
-          originalWarn.apply(console, args);
-        };
-        
-        console.info = (...args) => {
-          sendLog('info', args);
-          originalInfo.apply(console, args);
-        };
-        
-        // Also capture window errors
-        window.addEventListener('error', (event) => {
-          sendLog('exception', [`${event.message} at ${event.filename}:${event.lineno}:${event.colno}`]);
-        });
-        
-        window.addEventListener('unhandledrejection', (event) => {
-          sendLog('exception', [`Unhandled Promise Rejection: ${event.reason}`]);
-        });
-      }
-    });
-    
-    // Inject content script to relay messages and handle workflow recording
-    await chrome.scripting.executeScript({
-      target: { tabId: tabId },
-      func: (includeLogsInExport) => {
-        // Listen for console log messages from main world
-        window.addEventListener('message', (event) => {
-          if (event.data && event.data.type === 'chrome-pilot-workflow-console-log') {
-            // Forward to background script
-            chrome.runtime.sendMessage({
-              action: 'workflowConsoleLog',
-              log: event.data.log
-            });
-          }
-        });
-      },
-      args: [includeLogsInExport]
-    });
+
+    // Initialize WorkflowLogBuffer for race-safe log handling
+    if (includeLogsInExport) {
+      const buffer = new WorkflowLogBuffer(tabId);
+      workflowLogBuffers.set(tabId, buffer);
+      // console.log(`[Workflow] Initialized WorkflowLogBuffer for tab ${tabId}`);
+    }
+
+    // REFACTORED: Use shared console interception library via proper namespace (replaces 150+ lines of duplicate code)
+    await self.ConsoleInterceptionLibrary.startConsoleInterception(tabId, WORKFLOW_RECORDING_CONSOLE_CONFIG);
     
     // Ensure content script is injected
     try {
@@ -3440,16 +3655,18 @@ 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
+    // Include tabId so content script can use it when stopping recording
     await chrome.tabs.sendMessage(tabId, {
       action: 'startWorkflowRecording',
-      screenshotSettings: screenshotSettings
+      screenshotSettings: screenshotSettings,
+      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;
@@ -3458,58 +3675,84 @@ 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)) {
       throw new Error('No workflow recording active for this tab');
     }
     
-    // Get workflow from content script
+    // Get workflow from content script using a different action to avoid circular dependency
+    // (mini menu also sends 'stopWorkflowRecording' to background, creating confusion)
     const response = await chrome.tabs.sendMessage(tabId, {
-      action: 'stopWorkflowRecording'
+      action: 'getWorkflowData'
     });
-    
+
     if (!response || !response.success) {
       throw new Error('Failed to get workflow from content script');
     }
-    
+
+    // CRITICAL FIX: Restore original console methods and remove event listeners
+    try {
+      // console.log('[Workflow] Stopping console log capture for tab:', tabId);
+      await stopCapturingWorkflowLogs(tabId);
+    } catch (cleanupError) {
+      console.error('[Workflow] Failed to cleanup console interceptor:', cleanupError);
+      // Continue with stop process even if cleanup fails
+    }
+
     // Handle both old format (array) and new format (object with actions and functionTraces)
     let workflowData = response.workflow || [];
     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, get them from session storage
+    // If logs should be included, flush buffer and get them from session storage
     if (workflowIncludeLogs.get(tabId)) {
+      // CRITICAL: Flush any buffered logs before retrieval to ensure all logs are captured
+      const buffer = workflowLogBuffers.get(tabId);
+      if (buffer) {
+        await buffer.flush();
+        // console.log(`[Workflow] Flushed buffer before retrieval, stats:`, buffer.getStats());
+      }
+
       const result = await chrome.storage.session.get(`workflow_${tabId}`);
       const logs = result[`workflow_${tabId}`] || [];
       
-      // Associate logs with workflow actions
+      // Associate logs with workflow actions using NON-OVERLAPPING windows
+      // Each log appears in exactly ONE action to avoid duplicates
       workflow = workflow.map((action, index) => {
-        // Find logs that occurred around this action
+        // Calculate non-overlapping time window:
+        // - Each action owns logs from ITS timestamp until the NEXT action's timestamp
+        // - First action also includes 500ms before it
+        // - Last action includes 5000ms after it
+        const windowStart = index === 0
+          ? action.timestamp - 500   // First action: include 500ms before
+          : action.timestamp;         // Other actions: start at this action's timestamp
+
+        const windowEnd = index < workflow.length - 1
+          ? workflow[index + 1].timestamp  // Until next action's timestamp
+          : action.timestamp + 5000;        // Last action: 5000ms after
+
+        // Use >= for start and < for end to ensure non-overlapping windows
         const actionLogs = logs.filter(log => {
-          // Get time window
-          const prevActionTime = index > 0 ? workflow[index - 1].timestamp : action.timestamp - 500;
-          const nextActionTime = index < workflow.length - 1 ? workflow[index + 1].timestamp : action.timestamp + 5000;
-          
-          return log.timestamp > prevActionTime && log.timestamp < nextActionTime;
+          return log.timestamp >= windowStart && log.timestamp < windowEnd;
         });
-        
+
         if (actionLogs.length > 0) {
           return { ...action, logs: actionLogs };
         }
@@ -3521,30 +3764,48 @@ async function stopWorkflowRecording(tabId) {
     const sessionName = workflowSessionNames.get(tabId);
     const screenshotSettings = workflowScreenshotSettings.get(tabId);
     const includeLogs = workflowIncludeLogs.get(tabId) || false;
-    const userId = workflowUserIds.get(tabId); // Get userId for usage tracking
 
     // Clean up
     workflowRecordingTabs.delete(tabId);
     workflowIncludeLogs.delete(tabId);
     workflowScreenshotSettings.delete(tabId);
     workflowSessionNames.delete(tabId);
-    workflowUserIds.delete(tabId); // Clean up userId tracking
+
+    // Clean up WorkflowLogBuffer
+    const bufferToCleanup = workflowLogBuffers.get(tabId);
+    if (bufferToCleanup) {
+      await bufferToCleanup.cleanup();
+      workflowLogBuffers.delete(tabId);
+      // console.log(`[Workflow] Cleaned up WorkflowLogBuffer for tab ${tabId}`);
+    }
+
     await chrome.storage.session.remove(`workflow_${tabId}`);
-    
-    console.log('Workflow recording stopped, returning workflow:', workflow);
+
+    // Notify popup and other extension components that recording has stopped
+    // This is critical for popup UI sync when stopping from mini-menu
+    await chrome.storage.local.set({
+      workflowRecording: false,
+      workflowStartTime: null
+    });
+
+    // console.log('Workflow recording stopped, returning workflow:', workflow);
     
     // Try to save to server
     try {
       const serverPorts = CONFIG_PORTS.slice(0, 5); // Use first 5 configured ports for workflow recording
       let serverResult = null;
-      
+
       // Get current URL and title
       const tab = await chrome.tabs.get(tabId);
-      const sessionId = `workflow_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+
+      // 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);
       
       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,
@@ -3558,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`, {
@@ -3583,31 +3844,26 @@ async function stopWorkflowRecording(tabId) {
           
           if (response.ok) {
             serverResult = await response.json();
-            console.log(`[Workflow] Successfully saved to server on port ${port}`, serverResult);
-
-            // STEP 2: Track usage AFTER successful workflow recording completion (same pattern as stopRecording)
-            if (userId) {
-              console.log('[License] Tracking usage after workflow recording completion...');
-              const usageResult = await LicenseHelper.trackUsageAfterRecording(userId);
-              console.log('[License] Usage tracking result:', usageResult);
-            }
-
+            // 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);
         }
       }
       
       if (serverResult) {
+        // Clean up currentWorkflowId after successful save
+        await chrome.storage.local.remove(['currentWorkflowId']);
+
         return {
           success: true,
           workflow: {
-            sessionId: sessionId,
+            sessionId: serverResult.workflowId || serverResult.sessionId || sessionId,
             url: tab.url,
             title: tab.title,
             actions: workflow,
@@ -3617,17 +3873,36 @@ async function stopWorkflowRecording(tabId) {
           serverResult: serverResult
         };
       } else {
+        // Server not available - clean up but return local sessionId
+        await chrome.storage.local.remove(['currentWorkflowId']);
+
         return {
           success: true,
-          workflow: workflow,
+          workflow: {
+            sessionId: sessionId,
+            url: tab.url,
+            title: tab.title,
+            actions: workflow,
+            logs: []
+          },
           savedToServer: false
         };
       }
     } catch (error) {
       console.error('Error saving workflow:', error);
+      // Clean up on error too
+      await chrome.storage.local.remove(['currentWorkflowId']);
+
+      // Return structured response even on error
       return {
         success: true,
-        workflow: workflow,
+        workflow: {
+          sessionId: sessionId,
+          url: tab?.url || 'unknown',
+          title: tab?.title || 'Untitled',
+          actions: workflow,
+          logs: []
+        },
         savedToServer: false,
         error: error.message
       };
@@ -3638,6 +3913,13 @@ 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');
+  return await self.ConsoleInterceptionLibrary.stopConsoleInterception(tabId, WORKFLOW_RECORDING_CONSOLE_CONFIG);
+}
+
 // Delete recording from server
 async function deleteRecordingFromServer(recordingId, sendResponse) {
   try {
@@ -3673,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 {
@@ -3695,15 +3977,30 @@ 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`);
+    pendingFrameQueue.delete(sessionId);
+    return;
+  }
 
   // Validate session now
   if (sessionManager) {
     const validationResult = await sessionManager.isSessionValid(sessionId);
     if (!validationResult.valid) {
       console.warn(`[FrameQueue] Session still invalid during retry: ${validationResult.reason}`);
-      // Try again after another delay
-      setTimeout(() => retryPendingFrames(sessionId), 200);
+      // Try again after another delay (max 3 retries)
+      const retryCount = pending[0]?.retryCount || 0;
+      if (retryCount < 3) {
+        // Mark all batches with retry count
+        pending.forEach(batch => batch.retryCount = retryCount + 1);
+        setTimeout(() => retryPendingFrames(sessionId), 200);
+      } else {
+        console.error(`[FrameQueue] Max retries (3) exceeded for session ${sessionId}, clearing queue`);
+        pendingFrameQueue.delete(sessionId);
+      }
       return;
     }
   }
@@ -3716,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;
@@ -3775,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();
@@ -3801,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;
           
@@ -3817,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();
@@ -3827,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) {
@@ -3853,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}`);
@@ -3893,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)];
   }
   
@@ -3931,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
@@ -3949,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) {
@@ -3963,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`);
       }
@@ -3971,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
@@ -3984,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
@@ -3993,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;
@@ -4001,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}`, {
@@ -4019,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);
@@ -4027,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) {
@@ -4037,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`, {
@@ -4063,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
@@ -4076,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');
@@ -4119,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));
             }
           }
@@ -4141,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);
       }
@@ -4173,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');
@@ -4222,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);
@@ -4248,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) {
@@ -4269,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}`);
@@ -4286,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 {
@@ -4310,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
@@ -4324,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);
         }
@@ -4376,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