@dynamicu/chromedebug-mcp 2.6.6 → 2.7.0

package/chrome-extension/background.js

@@ -8,12 +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
@@ -35,12 +152,18 @@ class LogStreamer {
   }
 
   async init() {
+    // Skip initialization in browser-only mode
+    if (serverMode === 'browser-only') {
+      console.log('[LogStreamer] Skipping initialization - browser-only mode');
+      return;
+    }
+
     // Test server availability
     await this.checkServerAvailability();
-    
+
     // Start periodic streaming
     this.startPeriodicStreaming();
-    
+
     console.log('[LogStreamer] Initialized with server availability:', this.serverAvailable);
   }
 
@@ -78,10 +201,16 @@ class LogStreamer {
   async addLog(log, sessionId) {
     log.sequence = ++this.sequenceNumber;
     log.timestamp = Date.now();
-    
+
     this.currentSessionId = sessionId;
+
+    // In browser-only mode, skip server streaming (logs stored in LogBuffer)
+    if (serverMode === 'browser-only') {
+      return;
+    }
+
     this.buffer.push(log);
-    
+
     // If buffer is getting full, force immediate stream
     if (this.buffer.length >= this.maxBufferSize) {
       await this.streamLogs();
@@ -89,6 +218,9 @@ class LogStreamer {
   }
 
   async streamLogs() {
+    // Skip streaming in browser-only mode
+    if (serverMode === 'browser-only') return;
+
     if (this.buffer.length === 0 || !this.currentSessionId) return;
 
     // Check if we have waited at least 100ms since last frame capture
@@ -465,11 +597,169 @@ 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;
 let logStreamer = null;
 let logBuffer = null;
+let browserRecordingManager = null;
+let serverMode = 'unknown'; // 'server', 'browser-only', or 'unknown'
 
 // Error handling state and configuration
 // IMPORTANT: These must be declared before initializeServices()
@@ -566,6 +856,15 @@ async function initializeServices() {
       logBuffer = null;
     }
 
+    // Initialize browser recording manager for browser-only mode
+    try {
+      browserRecordingManager = new BrowserRecordingManager(dataBuffer);
+      console.log('[Background] Browser recording manager initialized');
+    } catch (recordingErr) {
+      console.error('[Background] Failed to initialize browser recording manager:', recordingErr);
+      browserRecordingManager = null;
+    }
+
     // Initialize session manager with recovery
     try {
       if (!sessionManager) {
@@ -628,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)) {
@@ -677,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) {
@@ -909,105 +1232,127 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
       }
       break;
 
-    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);
-      // 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;
-    }
+    case 'getBrowserRecordings':
+      // Get all browser-only recordings from IndexedDB
+      console.log('[Background] getBrowserRecordings - Manager exists:', !!browserRecordingManager);
+      if (browserRecordingManager) {
+        browserRecordingManager.listRecordings().then(recordings => {
+          console.log('[Background] Recordings retrieved from manager:', recordings);
+          sendResponse(recordings);
+        }).catch(error => {
+          console.error('[Background] Failed to get browser recordings:', error);
+          sendResponse([]);
+        });
+        return true; // Async response
+      } else {
+        console.warn('[Background] browserRecordingManager not initialized');
+        sendResponse([]);
+      }
+      break;
 
-    // Activate the license
-    const licenseKey = activationData.license_key;
-    console.log('[License Auto-Activation] Activating license...');
+    case 'exportBrowserRecording':
+      // Export a browser-only recording
+      if (browserRecordingManager && message.sessionId) {
+        browserRecordingManager.exportRecording(message.sessionId).then(result => {
+          sendResponse({ success: true, data: result });
+        }).catch(error => {
+          console.error('[Background] Failed to export recording:', error);
+          sendResponse({ success: false, error: error.message });
+        });
+        return true; // Async response
+      } else {
+        sendResponse({ success: false, error: 'Manager not available or missing sessionId' });
+      }
+      break;
 
-    // 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
-    });
+    case 'deleteBrowserRecording':
+      // Delete a browser-only recording
+      if (browserRecordingManager && message.sessionId) {
+        browserRecordingManager.deleteRecording(message.sessionId).then(() => {
+          sendResponse({ success: true });
+        }).catch(error => {
+          console.error('[Background] Failed to delete recording:', error);
+          sendResponse({ success: false, error: error.message });
+        });
+        return true; // Async response
+      } else {
+        sendResponse({ success: false, error: 'Manager not available or missing sessionId' });
+      }
+      break;
 
-    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'}`
-      })
-    });
+    case 'getBrowserRecordingFrames':
+      // 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`);
+
+          // Debug first frame to see structure
+          if (frames.length > 0) {
+            const firstFrame = frames[0];
+            const debugInfo = {
+              hasScreenshot: !!firstFrame.screenshot,
+              screenshotPrefix: firstFrame.screenshot ? firstFrame.screenshot.substring(0, 30) : 'N/A',
+              hasLogs: !!firstFrame.logs,
+              logsCount: firstFrame.logs ? firstFrame.logs.length : 0,
+              timestamp: firstFrame.timestamp,
+              frameIndex: firstFrame.frameIndex,
+              allKeys: Object.keys(firstFrame)
+            };
+            console.log('[DEBUG] First frame structure:', JSON.stringify(debugInfo, null, 2));
+          }
 
-    if (!activationResponse.ok) {
-      throw new Error(`Activation failed: HTTP ${activationResponse.status}`);
-    }
+          // Transform frames to match frame editor's expected structure
+          // Frame editor expects 'imageData' property, but we store as 'screenshot'
+          const transformedFrames = frames.map(frame => ({
+            ...frame,
+            imageData: frame.screenshot // Rename screenshot to imageData
+          }));
 
-    const activationResult = await activationResponse.json();
-    console.log('[License Auto-Activation] Activation result:', activationResult);
+          const transformDebug = transformedFrames.length > 0 ? {
+            hasImageData: !!transformedFrames[0].imageData,
+            imageDataPrefix: transformedFrames[0].imageData ? transformedFrames[0].imageData.substring(0, 30) : 'N/A',
+            hasLogs: !!transformedFrames[0].logs,
+            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));
 
-    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
-      };
+          sendResponse({ success: true, frames: transformedFrames });
+        }).catch(error => {
+          console.error('[Background] Failed to get browser recording frames:', error);
+          sendResponse({ success: false, error: error.message });
+        });
+        return true; // Async response
+      } else {
+        sendResponse({ success: false, error: 'DataBuffer not available or missing sessionId' });
+      }
+      break;
 
-      await chrome.storage.local.set({
-        'chromedebug_license_cache': licenseCache
+    case 'getQuotaInfo':
+      // Get storage quota information
+      getQuotaInfo().then(info => {
+        sendResponse(info);
+      }).catch(error => {
+        console.error('[Background] Failed to get quota info:', error);
+        sendResponse({ supported: false });
       });
+      return true; // Async response
 
-      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');
+    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);
+      // Don't send response - let other listener handle it
+      return;
   }
-}
+});
+
+// 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();
-
   if (sessionManager) {
     try {
       // Use existing recovery method from session manager
@@ -1021,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();
 });
 
 // Listen for tab updates to handle restore points
@@ -1124,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
@@ -1266,7 +1645,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
@@ -1742,7 +2121,7 @@ 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');
@@ -1882,8 +2261,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 });
@@ -1891,6 +2275,34 @@ 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) => {
+      sendResponse({ quotaInfo });
+    }).catch((error) => {
+      console.error('Error getting quota info:', error);
+      sendResponse({ quotaInfo: null, error: error.message });
+    });
+    return true;
+  }
+
   // Session manager lease renewal handler
   if (request.action === 'renewLease') {
     console.log('[Background] RENEW LEASE - Session:', request.sessionId, 'Manager exists:', !!sessionManager);
@@ -2073,20 +2485,6 @@ chrome.runtime.onMessage.addListener((request, sender, 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);
@@ -2105,9 +2503,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 });
@@ -2212,18 +2618,19 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     }
   }
   
-  // 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`);
+      }
     }
   }
   
@@ -2322,13 +2729,24 @@ 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');
     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));
+
     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');
       sendResponse({ success: true, screenshotData });
     }).catch((error) => {
-      console.error('Error capturing screenshot:', error);
+      console.error('[SCREENSHOT-DEBUG] background.js - captureTabScreenshot FAILED');
+      console.error('[SCREENSHOT-DEBUG] background.js - Error:', error);
+      console.error('[SCREENSHOT-DEBUG] background.js - Error message:', error.message);
+      console.error('[SCREENSHOT-DEBUG] background.js - Error stack:', error.stack);
       sendResponse({ success: false, error: error.message });
     });
     return true;
@@ -2456,14 +2874,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));
+
   try {
-    const dataUrl = await chrome.tabs.captureVisibleTab(null, {
+    // Get the tab to find its window
+    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);
+
+    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...');
+
+    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));
+
     // 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);
       // Create an image element to get dimensions
       const img = new Image();
       const canvas = new OffscreenCanvas(1, 1);
@@ -2503,36 +2941,73 @@ 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);
     return dataUrl;
   } catch (error) {
-    console.error('Error capturing tab screenshot:', error);
+    console.error('[SCREENSHOT-DEBUG] captureTabScreenshot - EXCEPTION CAUGHT');
+    console.error('[SCREENSHOT-DEBUG] captureTabScreenshot - Error:', error);
+    console.error('[SCREENSHOT-DEBUG] captureTabScreenshot - Error message:', error.message);
+    console.error('[SCREENSHOT-DEBUG] captureTabScreenshot - Error stack:', error.stack);
     throw error;
   }
 }
 
 // Start recording
-async function startRecording(tabId, settings = {}) {
-  try {
-    // STEP 1: 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);
+// Detect if server is available (server mode vs browser-only mode)
+async function detectServerMode() {
+  console.log('[ServerDetection] Checking server availability...');
 
-    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
-      });
+  for (const port of CONFIG_PORTS) {
+    try {
+      const response = await Promise.race([
+        fetch(`http://localhost:${port}/health`, {
+          method: 'GET'
+        }),
+        new Promise((_, reject) =>
+          setTimeout(() => reject(new Error('Timeout')), 1000)
+        )
+      ]);
 
-      throw new Error(licenseCheck.message || 'Recording not allowed');
+      if (response.ok) {
+        console.log(`[ServerDetection] Server detected on port ${port}`);
+        serverMode = 'server';
+        return 'server';
+      }
+    } catch (error) {
+      // Continue checking other ports
     }
+  }
+
+  console.log('[ServerDetection] No server detected - using browser-only mode');
+  serverMode = 'browser-only';
+  return 'browser-only';
+}
+
+// Simple quota info utility (replaces over-engineered QuotaMonitor class)
+async function getQuotaInfo() {
+  if (!navigator.storage?.estimate) {
+    return { supported: false };
+  }
+
+  const { usage = 0, quota = 0 } = await navigator.storage.estimate();
+  const percentage = quota > 0 ? usage / quota : 0;
+  const availableMB = Math.round((quota - usage) / (1024 * 1024));
+
+  return {
+    supported: true,
+    percentage,
+    availableMB,
+    usageMB: Math.round(usage / (1024 * 1024)),
+    quotaMB: Math.round(quota / (1024 * 1024))
+  };
+}
 
-    // Store userId for later usage tracking
-    const userId = licenseCheck.userId;
+async function startRecording(tabId, settings = {}) {
+  try {
+    // Detect server mode before starting
+    await detectServerMode();
+    console.log(`[Recording] Mode: ${serverMode}`);
 
     // Check if session manager is available
     if (!sessionManager) {
@@ -2602,6 +3077,18 @@ async function startRecording(tabId, settings = {}) {
     const sessionId = currentSession.sessionId;
     const scheduledStartTime = Date.now() + 3000; // Schedule start 3 seconds in future for countdown synchronization
 
+    // STEP 4: Initialize browser-only recording if in browser-only mode
+    if (serverMode === 'browser-only' && browserRecordingManager) {
+      console.log('[Recording] Initializing browser-only recording in IndexedDB');
+      const tab = await chrome.tabs.get(tabId);
+      await browserRecordingManager.startRecording(sessionId, {
+        tabId: tabId,
+        url: tab.url,
+        title: tab.title || settings.sessionName || 'Browser Recording',
+        startTime: scheduledStartTime
+      });
+    }
+
     // Update legacy state for backward compatibility (will be removed)
     recordingTabId = tabId;
     isCurrentlyRecording = true;
@@ -2679,6 +3166,17 @@ async function startRecording(tabId, settings = {}) {
       }
     });
     
+    // STEP 4: Initialize browser recording if in browser-only mode
+    if (serverMode === 'browser-only' && browserRecordingManager) {
+      const tab = await chrome.tabs.get(tabId);
+      await browserRecordingManager.startRecording(sessionId, {
+        tabId,
+        url: tab.url,
+        title: tab.title
+      });
+      console.log('[Recording] Browser recording initialized for session:', sessionId);
+    }
+
     // Send stream ID, session info, and settings to offscreen document for frame capture
     await chrome.runtime.sendMessage({
       type: 'start-frame-capture',
@@ -2688,14 +3186,15 @@ async function startRecording(tabId, settings = {}) {
       sessionId: sessionId,
       ownerId: currentOwnerId,
       scheduledStartTime: scheduledStartTime,
+      mode: serverMode, // Pass mode to offscreen document
       settings: {
         frameRate: settings.frameRate || 1,
-        imageQuality: settings.imageQuality || 30,
+        imageQuality: settings.imageQuality || (serverMode === 'browser-only' ? 15 : 30),
         frameFlash: settings.frameFlash !== false
       }
     });
-    
-    console.log('Recording started');
+
+    console.log('Recording started in', serverMode, 'mode');
   } catch (error) {
     console.error('Error in startRecording:', error);
     throw error;
@@ -2708,16 +3207,23 @@ 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;
+      return { success: false, error: 'No active recording' };
     }
 
+    // Store sessionId before clearing it
+    const stoppedSessionId = currentSession?.sessionId;
+
+    // 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);
@@ -2725,12 +3231,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}`);
-
-        // 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);
+        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');
+          await browserRecordingManager.stopRecording(currentSession.sessionId);
+        }
       }
     }
 
@@ -2760,6 +3269,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({});
@@ -2780,12 +3312,22 @@ async function stopRecording() {
       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;
@@ -2795,11 +3337,56 @@ async function stopRecording() {
       logBuffer.clearTab(previousRecordingTabId);
     }
 
+    // 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;
@@ -2818,204 +3405,16 @@ 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
@@ -3023,29 +3422,6 @@ async function startWorkflowRecording(tabId, includeLogsInExport, sessionName =
   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);
-
     // 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://')) {
@@ -3063,107 +3439,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 {
@@ -3181,9 +3468,11 @@ async function startWorkflowRecording(tabId, includeLogsInExport, sessionName =
     }
     
     // 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');
@@ -3202,38 +3491,77 @@ async function stopWorkflowRecording(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');
+
+    const actionsWithScreenshots = workflow.filter(a => a.screenshot_data);
+    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)
+      });
+    });
     
-    // 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 };
         }
@@ -3245,59 +3573,87 @@ 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}`);
-    
+
+    // 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}...`);
+
+          const payloadData = {
+            sessionId: sessionId,
+            name: sessionName,
+            url: tab.url,
+            title: tab.title,
+            includeLogs: includeLogs,
+            screenshotSettings: screenshotSettings || {},  // v2.0.8 fix: ensure it's an object, not null
+            actions: workflow,
+            logs: includeLogs ? workflow.flatMap(action => action.logs || []) : [],
+            functionTraces: functionTraces // Include function execution traces
+          };
+
+          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);
+
+          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)
+            });
+          });
+
           const response = await fetch(`http://localhost:${port}/chromedebug/workflow-recording`, {
             method: 'POST',
             headers: {
               'Content-Type': 'application/json',
             },
-            body: JSON.stringify({
-              sessionId: sessionId,
-              name: sessionName,
-              url: tab.url,
-              title: tab.title,
-              includeLogs: includeLogs,
-              screenshotSettings: screenshotSettings || {},  // v2.0.8 fix: ensure it's an object, not null
-              actions: workflow,
-              logs: includeLogs ? workflow.flatMap(action => action.logs || []) : [],
-              functionTraces: functionTraces // Include function execution traces
-            })
+            body: JSON.stringify(payloadData)
           });
           
           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);
-            }
-
             break;
           } else {
             console.log(`[Workflow] Failed on port ${port}: ${response.status} ${response.statusText}`);
@@ -3310,10 +3666,13 @@ async function stopWorkflowRecording(tabId) {
       }
       
       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,
@@ -3323,17 +3682,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
       };
@@ -3344,6 +3722,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 {
@@ -3403,13 +3788,28 @@ async function retryPendingFrames(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;
     }
   }
@@ -3432,8 +3832,9 @@ async function handleFrameBatch(batchData, skipValidation = false) {
   try {
     const sessionId = batchData.sessionId;
 
-    // Validate session if session manager is available (unless skipping for retry)
-    if (sessionManager && !skipValidation) {
+    // Skip session validation entirely in browser-only mode
+    // Validate session if session manager is available (unless skipping for retry or in browser-only mode)
+    if (sessionManager && !skipValidation && serverMode !== 'browser-only') {
       const validationResult = await sessionManager.isSessionValid(sessionId);
       if (!validationResult.valid) {
         // DON'T LOSE FRAMES - Queue for retry instead of rejecting
@@ -3537,18 +3938,43 @@ async function handleFrameBatch(batchData, skipValidation = false) {
     }
     
     if (!uploadSuccess) {
-      console.error(`CRITICAL: Failed to upload frame batch to any Chrome Debug server port. Last error: ${lastError}`);
-      console.error(`Session ${batchData.sessionId} frames are only stored in Chrome extension storage and not accessible to Chrome Debug.`);
-      
-      // Store error in chrome storage for user visibility
-      await chrome.storage.local.set({
-        [`upload_error_${batchData.sessionId}`]: {
-          error: lastError,
-          timestamp: Date.now(),
-          sessionId: batchData.sessionId,
-          frameCount: indexedFrames.length
+      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`);
+        // Use the browser recording session ID, not the frame capture session ID
+        const recordingSessionId = currentRecordingSessionId || batchData.sessionId;
+        for (const frame of indexedFrames) {
+          // Validate that critical timestamp data exists
+          if (!frame.absoluteTimestamp) {
+            console.warn(`[Browser-Only] WARNING: Frame ${frame.index} missing absoluteTimestamp - log association will fail`);
+          }
+
+          await browserRecordingManager.addFrame(recordingSessionId, {
+            frameIndex: frame.index,
+            screenshot: frame.imageData || frame.screenshot, // Use imageData from frame capture
+            logs: frame.logs || [],
+            timestamp: frame.timestamp || Date.now(),
+            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}`);
+      } 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}`);
+        console.error(`Session ${batchData.sessionId} frames are only stored in Chrome extension storage and not accessible to Chrome Debug.`);
+
+        // Store error in chrome storage for user visibility
+        await chrome.storage.local.set({
+          [`upload_error_${batchData.sessionId}`]: {
+            error: lastError,
+            timestamp: Date.now(),
+            sessionId: batchData.sessionId,
+            frameCount: indexedFrames.length
+          }
+        });
+      }
     }
 
     // Notify LogStreamer that frames have been captured and processed
@@ -3671,7 +4097,9 @@ async function handleFrameCaptureComplete(sessionData) {
     await chrome.storage.session.remove(String(tabIdToNotify));
 
     // Send logs to server for association with frames with retry logic
-    if (bufferedLogs.length > 0) {
+    // 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...`);
 
       // Retry logic to handle race conditions
       const maxRetries = 3;
@@ -3849,6 +4277,62 @@ async function handleFrameCaptureComplete(sessionData) {
           priority: 1
         });
       }
+    } 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...`);
+
+      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`);
+
+        if (frames.length === 0) {
+          console.warn('[Browser-Only] No frames found - logs cannot be associated');
+        } else {
+          // Associate each log with the appropriate frame based on timestamp
+          // Frames have absoluteTimestamp, logs have timestamp
+
+          for (const log of bufferedLogs) {
+            // Find the frame that this log belongs to (closest frame before the log timestamp)
+            let targetFrame = null;
+            for (let i = 0; i < frames.length; i++) {
+              const frame = frames[i];
+              const frameTime = frame.absoluteTimestamp || frame.timestamp;
+              if (frameTime <= log.timestamp) {
+                targetFrame = frame;
+              } else {
+                break; // Frames are in chronological order
+              }
+            }
+
+            // If no frame found before this log, associate with first frame
+            if (!targetFrame && frames.length > 0) {
+              targetFrame = frames[0];
+            }
+
+            if (targetFrame) {
+              if (!targetFrame.logs) {
+                targetFrame.logs = [];
+              }
+              targetFrame.logs.push(log);
+            }
+          }
+
+          // Update frames in IndexedDB with associated logs
+          let updatedCount = 0;
+          for (const frame of frames) {
+            if (frame.logs && frame.logs.length > 0) {
+              // Update this frame in IndexedDB
+              await dataBuffer.updateBrowserFrame(frame.id, { logs: frame.logs });
+              updatedCount++;
+            }
+          }
+
+          console.log(`[Browser-Only] ✓ Associated logs with ${updatedCount} frames in IndexedDB`);
+        }
+      } catch (error) {
+        console.error('[Browser-Only] Failed to associate logs with frames:', error);
+      }
     } else {
       // No logs were captured during the session
       console.warn('[Recording] No console logs were captured during this session');
@@ -3866,10 +4350,11 @@ async function handleFrameCaptureComplete(sessionData) {
         priority: 0
       });
     }
-    
+
     // Save screen interactions to database
-    if (screenInteractions.length > 0) {
-      console.log('Saving', screenInteractions.length, '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`);
       
       // Use comprehensive error handling for screen interactions save
       const saveScreenInteractions = async (data, context) => {
@@ -3935,8 +4420,11 @@ async function handleFrameCaptureComplete(sessionData) {
       } 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)`);
     }
-    
+
     // Stop session via session manager if available
     if (sessionManager && currentSession?.sessionId === sessionData.sessionId && currentOwnerId) {
       try {
@@ -3983,15 +4471,19 @@ async function handleFrameCaptureComplete(sessionData) {
       priority: 2
     });
     
-    // Notify popup if open
-    chrome.runtime.sendMessage({
-      action: 'frameSessionComplete',
-      sessionId: sessionData.sessionId,
-      sessionName: currentSession?.settings?.sessionName || null,
-      totalFrames: sessionData.totalFrames,
-      duration: sessionData.duration,
-      serverPort: recordingServerPort
-    }).catch(() => {});
+    // Notify popup if open (but NOT for browser-only recordings - they're in IndexedDB)
+    if (serverMode !== 'browser-only') {
+      chrome.runtime.sendMessage({
+        action: 'frameSessionComplete',
+        sessionId: sessionData.sessionId,
+        sessionName: currentSession?.settings?.sessionName || null,
+        totalFrames: sessionData.totalFrames,
+        duration: sessionData.duration,
+        serverPort: recordingServerPort
+      }).catch(() => {});
+    } else {
+      console.log('[Browser-Only] Skipping frameSessionComplete message - recording is in IndexedDB');
+    }
     
     // Notify content script to hide recording indicator
     if (tabIdToNotify) {