@dynamicu/chromedebug-mcp 2.2.0

package/chrome-extension/background.js

@@ -0,0 +1,3917 @@
+// Background script to handle server communication and recording
+const EXTENSION_VERSION = '2.0.4-BUILD-20250119';
+console.log(`[background.js] Loaded version: ${EXTENSION_VERSION}`);
+
+// Import configuration and libraries
+importScripts('extension-config.js');
+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');
+
+const CONFIG_PORTS = CHROMEDEBUG_CONFIG.ports;
+const DISCOVERY_TIMEOUT = CHROMEDEBUG_CONFIG.discoveryTimeout;
+
+// 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
+
+// LogStreamer class for batched real-time log streaming
+class LogStreamer {
+  constructor() {
+    this.buffer = [];
+    this.sequenceNumber = 0;
+    this.serverAvailable = false;
+    this.streamInterval = null;
+    this.retryQueue = [];
+    this.maxBufferSize = 50; // Much smaller than session storage
+    this.streamIntervalMs = 500; // Stream every 500ms (slower to align with frame generation)
+    this.currentSessionId = null;
+    this.serverPorts = CONFIG_PORTS;
+    this.lastFrameCapture = 0; // Track when last frame was captured
+    this.frameCheckInterval = null;
+  }
+
+  async init() {
+    // Test server availability
+    await this.checkServerAvailability();
+    
+    // Start periodic streaming
+    this.startPeriodicStreaming();
+    
+    console.log('[LogStreamer] Initialized with server availability:', this.serverAvailable);
+  }
+
+  async checkServerAvailability() {
+    for (const port of this.serverPorts) {
+      try {
+        const response = await fetch(`http://localhost:${port}/health`, {
+          method: 'GET',
+          timeout: 1000
+        });
+        if (response.ok) {
+          this.serverAvailable = true;
+          console.log(`[LogStreamer] Server available on port ${port}`);
+          return;
+        }
+      } catch (error) {
+        // Continue checking other ports
+      }
+    }
+    this.serverAvailable = false;
+    console.log('[LogStreamer] No server available');
+  }
+
+  startPeriodicStreaming() {
+    if (this.streamInterval) {
+      clearInterval(this.streamInterval);
+    }
+    
+    this.streamInterval = setInterval(async () => {
+      await this.streamLogs();
+      await this.processRetryQueue();
+    }, this.streamIntervalMs);
+  }
+
+  async addLog(log, sessionId) {
+    log.sequence = ++this.sequenceNumber;
+    log.timestamp = Date.now();
+    
+    this.currentSessionId = sessionId;
+    this.buffer.push(log);
+    
+    // If buffer is getting full, force immediate stream
+    if (this.buffer.length >= this.maxBufferSize) {
+      await this.streamLogs();
+    }
+  }
+
+  async streamLogs() {
+    if (this.buffer.length === 0 || !this.currentSessionId) return;
+
+    // Check if we have waited at least 100ms since last frame capture
+    // 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');
+      return; // Wait for next cycle
+    }
+
+    const batch = this.buffer.splice(0, this.maxBufferSize);
+
+    try {
+      await this.sendToServer(batch);
+      this.serverAvailable = true;
+    } catch (error) {
+      console.error('[LogStreamer] Failed to stream logs:', error);
+      this.serverAvailable = false;
+
+      // Add to retry queue with exponential backoff
+      this.retryQueue.push({
+        batch,
+        attempts: 0,
+        nextRetry: Date.now() + 1000,
+        sessionId: this.currentSessionId
+      });
+
+      // Emergency fallback to session storage (limited)
+      this.fallbackToSessionStorage(batch);
+    }
+  }
+
+  // Method to notify LogStreamer when frame is captured
+  notifyFrameCapture() {
+    this.lastFrameCapture = Date.now();
+    console.log('[LogStreamer] Frame capture notification received');
+  }
+
+  async sendToServer(batch) {
+    const payload = {
+      sessionId: this.currentSessionId,
+      logs: batch
+    };
+
+    let lastError = null;
+    for (const port of this.serverPorts) {
+      try {
+        const response = await fetch(`http://localhost:${port}/chromedebug/logs/stream`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(payload)
+        });
+
+        if (response.ok) {
+          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}`);
+          }
+          return result;
+        }
+      } catch (error) {
+        lastError = error;
+        // Silent during discovery - port attempts are expected to fail until we find the right one
+      }
+    }
+
+    // Only log error when ALL ports fail
+    console.error('[LogStreamer] No ChromeDebug server available on any configured port:', lastError);
+    throw new Error('All server ports failed');
+  }
+
+  fallbackToSessionStorage(batch) {
+    // Only use session storage as emergency backup with aggressive cleanup
+    const key = `emergency_logs_${Date.now()}`;
+    const limitedBatch = batch.slice(-10); // Only keep last 10 logs
+    
+    chrome.storage.session.set({ [key]: limitedBatch }).catch(error => {
+      console.error('[LogStreamer] Emergency fallback failed:', error);
+    });
+    
+    // Clean up old emergency logs
+    this.cleanupEmergencyLogs();
+  }
+
+  async cleanupEmergencyLogs() {
+    try {
+      const allData = await chrome.storage.session.get();
+      const emergencyKeys = Object.keys(allData).filter(key => key.startsWith('emergency_logs_'));
+      
+      // Keep only the most recent 3 emergency batches
+      if (emergencyKeys.length > 3) {
+        const oldKeys = emergencyKeys.sort().slice(0, -3);
+        await chrome.storage.session.remove(oldKeys);
+      }
+    } catch (error) {
+      console.error('[LogStreamer] Failed to cleanup emergency logs:', error);
+    }
+  }
+
+  async processRetryQueue() {
+    const now = Date.now();
+    const retryableItems = [];
+    
+    for (const item of this.retryQueue) {
+      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`);
+        } catch (error) {
+          item.attempts++;
+          item.nextRetry = now + (1000 * Math.pow(2, item.attempts)); // Exponential backoff
+          retryableItems.push(item);
+        }
+      } else if (item.attempts < 3) {
+        retryableItems.push(item);
+      }
+      // Drop items that have exceeded max attempts
+    }
+    
+    this.retryQueue = retryableItems;
+  }
+
+  setSessionId(sessionId) {
+    this.currentSessionId = sessionId;
+  }
+
+  destroy() {
+    if (this.streamInterval) {
+      clearInterval(this.streamInterval);
+      this.streamInterval = null;
+    }
+    
+    // Final attempt to stream remaining logs
+    if (this.buffer.length > 0) {
+      this.streamLogs();
+    }
+  }
+}
+
+// LogBuffer class for sequential log storage to prevent race conditions
+class LogBuffer {
+  constructor() {
+    this.tabBuffers = new Map(); // Map of tabId to LogTabBuffer
+    this.flushInProgress = false;
+    this.storageQuotaLimit = 500000; // ~500KB per tab to stay under 1MB chrome.storage.session limit
+    this.maxLogsPerTab = 10000; // Maximum logs to prevent memory issues
+  }
+
+  // Add a log entry to the buffer for a specific tab
+  async addLog(tabId, logEntry) {
+    try {
+      if (!this.tabBuffers.has(tabId)) {
+        this.tabBuffers.set(tabId, new LogTabBuffer(tabId));
+      }
+
+      const tabBuffer = this.tabBuffers.get(tabId);
+      await tabBuffer.addLog(logEntry);
+    } catch (error) {
+      console.error(`[LogBuffer] Failed to add log for tab ${tabId}:`, error);
+    }
+  }
+
+  // Flush all buffers to Chrome storage
+  async flushAll() {
+    if (this.flushInProgress) {
+      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));
+      }
+      return;
+    }
+
+    this.flushInProgress = true;
+    const flushPromises = [];
+    const startTime = Date.now();
+
+    try {
+      console.log(`[LogBuffer] Starting flushAll for ${this.tabBuffers.size} tabs`);
+
+      for (const [tabId, tabBuffer] of this.tabBuffers) {
+        flushPromises.push(tabBuffer.flush());
+      }
+
+      await Promise.all(flushPromises);
+      const duration = Date.now() - startTime;
+      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
+    } finally {
+      this.flushInProgress = false;
+    }
+  }
+
+  // Flush buffer for a specific tab
+  async flushTab(tabId) {
+    const tabBuffer = this.tabBuffers.get(tabId);
+    if (tabBuffer) {
+      await tabBuffer.flush();
+    }
+  }
+
+  // Clear buffer for a specific tab
+  clearTab(tabId) {
+    if (this.tabBuffers.has(tabId)) {
+      this.tabBuffers.delete(tabId);
+      console.log(`[LogBuffer] Cleared buffer for tab ${tabId}`);
+    }
+  }
+
+  // Get buffer statistics
+  getStats() {
+    const stats = {
+      totalTabs: this.tabBuffers.size,
+      tabStats: {},
+      totalLogsAcrossAllTabs: 0,
+      totalFlushedAcrossAllTabs: 0
+    };
+
+    for (const [tabId, tabBuffer] of this.tabBuffers) {
+      const tabStats = tabBuffer.getStats();
+      stats.tabStats[tabId] = tabStats;
+      stats.totalLogsAcrossAllTabs += tabStats.totalAdded;
+      stats.totalFlushedAcrossAllTabs += tabStats.totalFlushed;
+    }
+
+    return stats;
+  }
+
+  // Debug method to log current buffer state
+  logStats() {
+    const stats = this.getStats();
+    console.log('[LogBuffer] Current statistics:', stats);
+    return stats;
+  }
+}
+
+// Individual tab buffer for sequential processing
+class LogTabBuffer {
+  constructor(tabId) {
+    this.tabId = tabId;
+    this.buffer = [];
+    this.processing = false;
+    this.processingQueue = [];
+    this.totalLogsAdded = 0;
+    this.totalLogsFlushed = 0;
+    this.lastFlushTime = 0;
+  }
+
+  // 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(String(this.tabId));
+      const existingLogs = result[String(this.tabId)] || [];
+
+      // 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; // Increased from 0.8 to preserve more logs
+        const afterCount = Math.floor(updatedLogs.length * retentionPercentage);
+        console.warn(`[LogBuffer] Storage size limit approached for tab ${this.tabId}, truncating from ${beforeCount} to ${afterCount} logs (${Math.round(retentionPercentage * 100)}% retention)`);
+        // Keep only the most recent logs that fit within the limit
+        const recentLogs = updatedLogs.slice(-afterCount);
+        await chrome.storage.session.set({ [String(this.tabId)]: recentLogs });
+      } else {
+        await chrome.storage.session.set({ [String(this.tabId)]: updatedLogs });
+      }
+
+      this.totalLogsFlushed += this.buffer.length;
+      console.log(`[LogBuffer] 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(`[LogBuffer] 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
+    };
+  }
+}
+
+// Initialize data buffer and upload manager
+let dataBuffer = null;
+let uploadManager = null;
+let logStreamer = null;
+let logBuffer = null;
+
+// Error handling state and configuration
+// IMPORTANT: These must be declared before initializeServices()
+// as they're used in initializeErrorHandling() which is called during startup
+let errorHandlingState = {
+  currentState: 'NORMAL_OPERATION',
+  failedSaveCount: 0,
+  lastNotificationTime: 0,
+  retainedInteractions: [],
+  lastError: null,
+  circuitBreakerState: 'CLOSED',
+  sessionId: null,
+  isInitialized: false
+};
+
+// Configuration constants (based on TypeScript interfaces)
+const ERROR_HANDLING_CONFIG = {
+  maxDataLossTime: 30000, // 30 seconds max data loss
+  maxRetainedInteractions: 100, // Memory limit
+  notificationThrottleMs: 5000, // User experience
+  maxRetryAttempts: 3,
+  backupRetentionDays: 7,
+  failureThreshold: 3, // Circuit breaker
+  resetTimeout: 30000 // Circuit breaker reset
+};
+
+// Data protection tiers
+const DATA_PROTECTION_TIERS = {
+  CRITICAL_DATA: {
+    maxLoss: 0,
+    includes: ['session_metadata', 'user_authentication'],
+    storage: 'PERSISTENT_BACKUP'
+  },
+  HIGH_VALUE_DATA: {
+    maxLoss: 30000,
+    includes: ['user_interactions', 'form_data'],
+    storage: 'REDUNDANT_STORAGE'
+  },
+  RECOVERABLE_DATA: {
+    maxLoss: 300000,
+    includes: ['performance_metrics', 'debug_logs'],
+    storage: 'SINGLE_STORAGE'
+  }
+};
+
+// Initialize on startup
+async function initializeServices() {
+  try {
+    // FIRST: Initialize comprehensive error handling system
+    console.log('[Background] Initializing comprehensive error handling...');
+    const errorHandlingSuccess = await initializeErrorHandling();
+    if (errorHandlingSuccess) {
+      console.log('[Background] Comprehensive error handling initialized successfully');
+    } else {
+      console.warn('[Background] Error handling initialization failed - continuing with basic functionality');
+    }
+
+    // Initialize the data buffer
+    dataBuffer = new DataBuffer();
+    await dataBuffer.init();
+    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');
+      } else {
+        console.log('[Background] Upload manager initialized but no server available yet');
+      }
+    } catch (uploadErr) {
+      console.error('[Background] Failed to initialize upload manager:', uploadErr);
+      // Upload manager failed but data buffer is still usable
+      uploadManager = null;
+    }
+    
+    // Initialize log streamer
+    try {
+      logStreamer = new LogStreamer();
+      await logStreamer.init();
+      console.log('[Background] Log streamer initialized');
+    } catch (streamErr) {
+      console.error('[Background] Failed to initialize log streamer:', streamErr);
+      logStreamer = null;
+    }
+
+    // Initialize log buffer for race-condition-free storage
+    try {
+      logBuffer = new LogBuffer();
+      console.log('[Background] Log buffer initialized');
+    } catch (bufferErr) {
+      console.error('[Background] Failed to initialize log buffer:', bufferErr);
+      logBuffer = null;
+    }
+
+    // Initialize session manager with recovery
+    try {
+      if (!sessionManager) {
+        sessionManager = new ChromeExtensionSessionManager();
+        console.log('[Background] Session manager initialized');
+      }
+
+      // Recover any stuck sessions on startup
+      await sessionManager.recoverSessions();
+      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
+    }
+  } catch (err) {
+    console.error('[Background] Failed to initialize data buffer:', err);
+    // Both failed - system won't work properly
+    dataBuffer = null;
+    uploadManager = null;
+    logStreamer = null;
+  }
+}
+
+// Start initialization
+initializeServices();
+
+// Listen for messages from content scripts
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  // Handle messages with different structures
+  if (!message) {
+    console.warn('[Background] Received null/undefined message');
+    return;
+  }
+  
+  // Some messages use 'action' instead of 'type'
+  const messageType = message.type || message.action;
+  
+  if (!messageType) {
+    // Don't warn for messages handled by other listeners
+    if (!message.recordingId && !message.sessionId) {
+      console.warn('[Background] Received message without type/action:', message);
+    }
+    return; // Don't send response for messages handled elsewhere
+  }
+  
+  // Check if this message should be handled by the other listener (v2.0.6 fix)
+  const handledByOtherListener = [
+    'startWorkflowRecording',
+    'stopWorkflowRecording',
+    'sendToServer',
+    'getScreenshotFormats',
+    'saveWorkflowRecording',
+    'getWorkflowRecordings',
+    'playWorkflowRecording',
+    'playWorkflowByName',
+    'deleteWorkflowRecording',
+    'editWorkflowRecording',
+    'saveRestorePoint',
+    'getRestorePoints',
+    'restoreFromPoint',
+    'getWebSocketPort',
+    'startRecording',
+    '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
+  ];
+  
+  if (handledByOtherListener.includes(messageType)) {
+    // Let the other listener handle this message
+    return;
+  }
+  
+  switch (messageType) {
+    case 'START_UPLOAD_MANAGER':
+      // Upload manager is already initialized and running
+      sendResponse({ status: 'success', message: 'Upload manager already running' });
+      break;
+
+    case 'FINALIZE_UPLOADS':
+      // Force upload and stop periodic uploads
+      const recordingId = message.recordingId || currentRecordingSessionId;
+      if (uploadManager) {
+        if (recordingId) {
+          uploadManager.forceUpload(recordingId).then(() => {
+            uploadManager.stopPeriodicUpload();
+            sendResponse({ status: 'success', message: 'Uploads finalized' });
+          }).catch(error => {
+            console.error('[Background] Failed to finalize uploads:', error);
+            sendResponse({ status: 'error', message: error.message });
+          });
+        } else {
+          // No recording ID, just stop periodic uploads
+          uploadManager.stopPeriodicUpload();
+          sendResponse({ status: 'success', message: 'No pending uploads' });
+        }
+      } else {
+        sendResponse({ status: 'success', message: 'Upload manager not initialized' });
+      }
+      // Return true to indicate async response
+      return true;
+
+    case 'GET_UPLOAD_STATS':
+      try {
+        const stats = uploadManager ? uploadManager.getStats() : { uploadQueue: 0, serverUrl: null };
+        sendResponse({ status: 'success', stats: stats });
+      } catch (error) {
+        console.error('[Background] Failed to get upload stats:', error);
+        sendResponse({ status: 'error', message: error.message });
+      }
+      break;
+    
+    case 'UPLOAD_BATCH':
+      // Add events to the background's DataBuffer for upload
+      if (message.events && message.recordingId) {
+        if (dataBuffer) {
+          // Ensure all events have the recording_id set
+          const eventsWithRecordingId = message.events.map(event => ({
+            ...event,
+            recording_id: message.recordingId
+          }));
+          
+          dataBuffer.addBatch(eventsWithRecordingId).then(() => {
+            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`);
+              // Process upload queue if upload manager is available
+              if (uploadManager) {
+                uploadManager.processUploadQueue();
+              }
+            }
+            sendResponse({ status: 'success' });
+          }).catch(error => {
+            console.error('[Background] Failed to process batch:', error);
+            sendResponse({ status: 'error', message: error.message });
+          });
+          // Return true to indicate async response
+          return true;
+        } else {
+          sendResponse({ status: 'error', message: 'Data buffer not initialized' });
+        }
+      } else {
+        sendResponse({ status: 'error', message: 'Missing events or recordingId' });
+      }
+      break;
+
+    case 'QUEUE_DATA_FOR_UPLOAD':
+      if (message.payload && uploadManager) {
+        uploadManager.queueForUpload(message.payload.recordingId, message.payload.events).then(() => {
+          sendResponse({ status: 'success', message: 'Data queued for upload' });
+        }).catch(error => {
+          console.error('[Background] Failed to queue data:', error);
+          sendResponse({ status: 'error', message: error.message });
+        });
+        return true;
+      } else {
+        sendResponse({ status: 'error', message: 'No payload provided' });
+      }
+      break;
+
+    case 'show-frame-flash':
+      // Handle frame flash indicator - already handled elsewhere
+      // Don't send a response to avoid warnings
+      break;
+
+    case 'frame-batch-ready':
+      // Handle frame batch ready - already handled elsewhere
+      // Don't send a response to avoid warnings
+      break;
+
+    case 'frame-capture-complete':
+      // Handle frame capture complete - already handled elsewhere
+      // Don't send a response to avoid warnings
+      break;
+
+    case 'consoleLog':
+      // Handle console log - already handled elsewhere
+      // Don't send a response to avoid warnings
+      break;
+
+    case 'stopRecording':
+      // Handle stop recording - already handled elsewhere
+      // Don't send a response to avoid warnings
+      break;
+
+    // Visual feedback system message handlers
+    case 'start-screen-capture-tracking':
+      // Forward to content script for visual feedback
+      if (message.sessionId && sender.tab) {
+        chrome.tabs.sendMessage(sender.tab.id, {
+          type: 'start-screen-capture-tracking',
+          sessionId: message.sessionId
+        }).catch(() => {
+          // Content script might not be available
+          console.log('[Background] Could not forward start-screen-capture-tracking to content script');
+        });
+      }
+      sendResponse({ success: true });
+      break;
+
+    case 'stop-screen-capture-tracking':
+      // Forward to content script
+      if (sender.tab) {
+        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');
+        });
+      }
+      sendResponse({ success: true });
+      break;
+
+    case 'screen-capture-interaction-logged':
+      // Handle interaction logged from content script visual feedback
+      if (message.interaction && sender.tab) {
+        const tabId = sender.tab.id;
+
+        // Use session manager for validation if available
+        if (sessionManager) {
+          isCurrentlyRecordingAsync().then(async (recording) => {
+            const currentTabId = await getCurrentTabIdAsync();
+            if (recording && tabId === currentTabId) {
+              const sessionId = await getCurrentSessionIdAsync();
+              let frameIndex = 0;
+
+              // Get frame count from session manager
+              const state = await sessionManager.getCurrentState();
+              if (state && state.sessionId === sessionId) {
+                frameIndex = state.frameCount || 0;
+              }
+
+              const interaction = {
+                ...message.interaction,
+                frameIndex: frameIndex
+              };
+              screenInteractions.push(interaction);
+              console.log('[Background] Visual feedback interaction recorded:', interaction.type, 'Total:', screenInteractions.length);
+            }
+          }).catch(error => {
+            console.error('Error validating recording state for interaction:', error);
+          });
+        } else {
+          // Legacy fallback
+          if (tabId === recordingTabId && isCurrentlyRecording) {
+            const interaction = {
+              ...message.interaction,
+              frameIndex: frameCounter.get(currentRecordingSessionId) || 0
+            };
+            screenInteractions.push(interaction);
+            console.log('[Background] Visual feedback interaction recorded:', interaction.type, 'Total:', screenInteractions.length);
+          }
+        }
+      }
+      // Don't send response to avoid warnings
+      break;
+
+    case 'show-screen-capture-flash':
+      // Forward flash trigger to content script
+      if (sender.tab) {
+        chrome.tabs.sendMessage(sender.tab.id, {
+          type: 'screen-capture-frame-captured'
+        }).catch(() => {
+          console.log('[Background] Could not forward frame flash to content script');
+        });
+      }
+      // Don't send response to avoid warnings
+      break;
+
+    case 'test-logbuffer-race-condition':
+      // DEBUG: Test LogBuffer race condition fix
+      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}`);
+
+        // Simulate rapid log generation like a real high-volume scenario
+        const startTime = Date.now();
+        const logPromises = [];
+
+        for (let i = 0; i < testLogsCount; i++) {
+          const testLog = {
+            type: 'log',
+            message: `Test log ${i + 1}/${testLogsCount}`,
+            timestamp: Date.now(),
+            level: 'info',
+            source: 'test-harness'
+          };
+
+          // Add logs concurrently to test race condition handling
+          logPromises.push(logBuffer.addLog(tabId, testLog));
+        }
+
+        // Wait for all logs to be added and then check stats
+        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);
+
+          sendResponse({
+            success: true,
+            duration: endTime - startTime,
+            logsAdded: testLogsCount,
+            stats: stats
+          });
+        }).catch(error => {
+          console.error('[Background] LogBuffer test failed:', error);
+          sendResponse({
+            success: false,
+            error: error.message,
+            stats: logBuffer.getStats()
+          });
+        });
+
+        return true; // Indicates async response
+      } else {
+        sendResponse({
+          success: false,
+          error: 'LogBuffer not available or no tab context'
+        });
+      }
+      break;
+
+    case 'get-logbuffer-stats':
+      // DEBUG: Get current LogBuffer statistics
+      if (logBuffer) {
+        const stats = logBuffer.getStats();
+        console.log('[Background] LogBuffer stats requested:', stats);
+        sendResponse({
+          success: true,
+          stats: stats
+        });
+      } else {
+        sendResponse({
+          success: false,
+          error: 'LogBuffer not available'
+        });
+      }
+      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;
+  }
+});
+
+// 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');
+
+  if (sessionManager) {
+    try {
+      // Use existing recovery method from session manager
+      await sessionManager.recoverSessions();
+      console.log('[Background] Startup session recovery completed');
+    } catch (error) {
+      console.error('[Background] Failed to recover sessions on startup:', error);
+    }
+  } else {
+    console.warn('[Background] Session manager not available for startup recovery');
+  }
+});
+
+// Listen for tab updates to handle restore points
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+  // Inject console logging on navigation during recording
+  if (changeInfo.status === 'loading') {
+    // Use session manager validation if available
+    if (sessionManager) {
+      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');
+          startCapturingLogs(tabId).catch(err => {
+            console.error('Failed to re-inject console logging:', err);
+          });
+        }
+      }).catch(error => {
+        console.error('Error checking recording state for navigation:', error);
+      });
+    } 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');
+        startCapturingLogs(tabId).catch(err => {
+          console.error('Failed to re-inject console logging:', err);
+        });
+      }
+    }
+  }
+  
+  if (changeInfo.status === 'complete' && tab.url && !tab.url.startsWith('chrome://')) {
+    // Check for pending restore point
+    chrome.storage.session.get(`pendingRestore_${tabId}`).then(async (result) => {
+      if (result[`pendingRestore_${tabId}`]) {
+        const { restorePointId, url } = result[`pendingRestore_${tabId}`];
+        
+        // Clear the pending restore
+        chrome.storage.session.remove(`pendingRestore_${tabId}`);
+        
+        // Wait a bit for page to fully load
+        setTimeout(async () => {
+          // Get restore point data from server
+          const ports = CONFIG_PORTS;
+          let restorePointData = null;
+          
+          // Use comprehensive error handling for restore point fetch
+          const fetchRestorePoint = async (data, context) => {
+            for (const port of ports) {
+              try {
+                const response = await fetch(`http://localhost:${port}/chromedebug/restore-point/${restorePointId}`, {
+                  method: 'GET',
+                  mode: 'cors'
+                });
+
+                if (response.ok) {
+                  const result = await response.json();
+                  return { success: true, result };
+                } else {
+                  throw new Error(`HTTP ${response.status}: Failed to fetch restore point from port ${port}`);
+                }
+              } catch (error) {
+                console.error(`[ErrorHandling] Restore point fetch failed on port ${port}:`, error);
+                // Continue to next port instead of silent failure
+              }
+            }
+            throw new Error('All server ports failed for restore point fetch');
+          };
+
+          const restoreResult = await handleSaveAttempt(
+            fetchRestorePoint,
+            { restorePointId },
+            { operation: 'restore_point_fetch', restorePointId }
+          );
+
+          if (restoreResult.success) {
+            restorePointData = restoreResult.result.result;
+          } else {
+            console.error('[ErrorHandling] Failed to fetch restore point after comprehensive error handling');
+          }
+          
+          if (restorePointData) {
+            // Send restore message to content script
+            chrome.tabs.sendMessage(tabId, {
+              action: 'restoreFromPoint',
+              restorePointData: restorePointData
+            }, (response) => {
+              if (chrome.runtime.lastError) {
+                console.error('Error restoring from point after navigation:', chrome.runtime.lastError);
+              }
+            });
+          }
+        }, 1000); // Wait 1 second for page to stabilize
+      }
+    });
+  }
+});
+
+// Session Manager for robust recording state management
+let sessionManager = null;
+let currentSession = null; // Cache current session state
+let currentOwnerId = null; // Track current session owner
+
+// Essential recording state (non-session related)
+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
+
+// Initialize session manager
+(async function initializeSessionManager() {
+  try {
+    sessionManager = new ChromeExtensionSessionManager();
+    console.log('[ChromeSessionManager] Initialized successfully');
+  } catch (error) {
+    console.error('[ChromeSessionManager] Failed to initialize:', error);
+  }
+})();
+
+//=============================================================================
+// SESSION MANAGER ADAPTER FUNCTIONS
+// Provides compatibility layer between legacy API and new session manager
+//=============================================================================
+
+/**
+ * Check if currently recording (adapter function)
+ * @returns {Promise<boolean>} Recording status
+ */
+async function isCurrentlyRecordingAsync() {
+  if (!sessionManager) return false;
+  try {
+    const state = await sessionManager.getCurrentState();
+    return state?.isRecording || false;
+  } catch (error) {
+    console.error('[SessionAdapter] Failed to check recording status:', error);
+    return false;
+  }
+}
+
+/**
+ * Get current session ID (adapter function)
+ * @returns {Promise<string|null>} Session ID
+ */
+async function getCurrentSessionIdAsync() {
+  if (!sessionManager) return null;
+  try {
+    const state = await sessionManager.getCurrentState();
+    return state?.sessionId || null;
+  } catch (error) {
+    console.error('[SessionAdapter] Failed to get session ID:', error);
+    return null;
+  }
+}
+
+/**
+ * Get current recording tab ID (adapter function)
+ * @returns {Promise<number|null>} Tab ID
+ */
+async function getCurrentTabIdAsync() {
+  if (!sessionManager) return null;
+  try {
+    const state = await sessionManager.getCurrentState();
+    return state?.settings?.tabId || null;
+  } catch (error) {
+    console.error('[SessionAdapter] Failed to get tab ID:', error);
+    return null;
+  }
+}
+
+/**
+ * Get complete current recording state (new wrapper function)
+ * Provides both session manager state and legacy fallback
+ * @returns {Promise<Object>} Recording state object
+ */
+async function getCurrentRecordingState() {
+  if (sessionManager?.isInitialized && await sessionManager.isInitialized()) {
+    try {
+      const sessionState = await sessionManager.getCurrentState();
+      if (sessionState) {
+        return {
+          isRecording: sessionState.isRecording,
+          tabId: sessionState.settings?.tabId,
+          sessionId: sessionState.sessionId,
+          startTime: sessionState.startTime,
+          frameCount: sessionState.frameCount,
+          status: sessionState.status,
+          source: 'sessionManager'
+        };
+      }
+    } catch (error) {
+      console.error('[SessionAdapter] Failed to get session manager state:', error);
+    }
+  }
+
+  // Fallback to legacy state for backward compatibility
+  return {
+    isRecording: isCurrentlyRecording,
+    tabId: recordingTabId,
+    sessionId: currentRecordingSessionId,
+    source: 'legacy'
+  };
+}
+
+/**
+ * Validate current session (adapter function)
+ * @returns {Promise<boolean>} Session validity
+ */
+async function isSessionValidAsync() {
+  if (!sessionManager || !currentSession?.sessionId) return false;
+  try {
+    const result = await sessionManager.isSessionValid(currentSession.sessionId);
+    return result.valid;
+  } catch (error) {
+    console.error('[SessionAdapter] Failed to validate session:', error);
+    return false;
+  }
+}
+
+/**
+ * Synchronous fallback for legacy compatibility (DEPRECATED)
+ * Use async versions above for new code
+ */
+function getCurrentSessionIdSync() {
+  return currentSession?.sessionId || currentRecordingSessionId;
+}
+
+function isCurrentlyRecordingSync() {
+  return currentSession?.isRecording || isCurrentlyRecording;
+}
+
+// Workflow recording state
+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
+
+//=============================================================================
+// COMPREHENSIVE ERROR HANDLING SYSTEM
+// Designed collaboratively with Second Opinion Analyst and Testing Expert
+// Replaces silent failures with robust error management and data protection
+//=============================================================================
+
+/**
+ * Initialize the comprehensive error handling system
+ * Called on extension startup - replaces silent failure patterns
+ */
+async function initializeErrorHandling() {
+  try {
+    console.log('[ErrorHandling] Initializing comprehensive error handling system...');
+
+    // Generate session ID if not exists
+    if (!errorHandlingState.sessionId) {
+      errorHandlingState.sessionId = `error_session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    }
+
+    // Initialize IndexedDB for backup storage
+    await initializeBackupStorage();
+
+    // Initialize circuit breaker
+    initializeCircuitBreaker();
+
+    // Set up notification system
+    await setupNotificationSystem();
+
+    // Clean up old backups
+    await cleanupOldBackups();
+
+    // Mark as initialized
+    errorHandlingState.isInitialized = true;
+    errorHandlingState.currentState = 'NORMAL_OPERATION';
+
+    console.log('[ErrorHandling] System initialization complete:', {
+      sessionId: errorHandlingState.sessionId,
+      state: errorHandlingState.currentState,
+      circuitBreaker: errorHandlingState.circuitBreakerState
+    });
+
+    return true;
+  } catch (error) {
+    console.error('[ErrorHandling] CRITICAL: Failed to initialize error handling system:', error);
+    // Even if initialization fails, ensure we have basic error state
+    errorHandlingState.isInitialized = false;
+    errorHandlingState.currentState = 'CRITICAL_FAILURE';
+    return false;
+  }
+}
+
+/**
+ * Initialize IndexedDB for persistent backup storage
+ */
+async function initializeBackupStorage() {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open('ChromePilotErrorRecovery', 1);
+
+    request.onerror = () => {
+      console.error('[ErrorHandling] Failed to open IndexedDB:', request.error);
+      reject(request.error);
+    };
+
+    request.onsuccess = () => {
+      console.log('[ErrorHandling] IndexedDB initialized successfully');
+      resolve(request.result);
+    };
+
+    request.onupgradeneeded = (event) => {
+      const db = event.target.result;
+
+      // Create interactions store
+      if (!db.objectStoreNames.contains('interactions')) {
+        const interactionsStore = db.createObjectStore('interactions', { keyPath: 'id', autoIncrement: true });
+        interactionsStore.createIndex('sessionId', 'sessionId', { unique: false });
+        interactionsStore.createIndex('timestamp', 'timestamp', { unique: false });
+        interactionsStore.createIndex('type', 'type', { unique: false });
+      }
+
+      // Create session backups store
+      if (!db.objectStoreNames.contains('sessionBackups')) {
+        const backupsStore = db.createObjectStore('sessionBackups', { keyPath: 'sessionId' });
+        backupsStore.createIndex('timestamp', 'timestamp', { unique: false });
+        backupsStore.createIndex('retryCount', 'retryCount', { unique: false });
+      }
+
+      // Create error states store
+      if (!db.objectStoreNames.contains('errorStates')) {
+        const errorStore = db.createObjectStore('errorStates', { keyPath: 'id', autoIncrement: true });
+        errorStore.createIndex('sessionId', 'sessionId', { unique: false });
+        errorStore.createIndex('errorType', 'errorType', { unique: false });
+        errorStore.createIndex('timestamp', 'timestamp', { unique: false });
+      }
+
+      console.log('[ErrorHandling] IndexedDB schema created');
+    };
+  });
+}
+
+/**
+ * Initialize circuit breaker pattern
+ */
+function initializeCircuitBreaker() {
+  errorHandlingState.circuitBreakerState = 'CLOSED';
+  errorHandlingState.failedSaveCount = 0;
+  console.log('[ErrorHandling] Circuit breaker initialized in CLOSED state');
+}
+
+/**
+ * Set up notification system with throttling
+ */
+async function setupNotificationSystem() {
+  // Clear any existing notifications
+  const notifications = await chrome.notifications.getAll();
+  for (const notificationId in notifications) {
+    await chrome.notifications.clear(notificationId);
+  }
+
+  console.log('[ErrorHandling] Notification system ready');
+}
+
+/**
+ * Clean up old backup data (retention policy)
+ */
+async function cleanupOldBackups() {
+  try {
+    const cutoffTime = Date.now() - (ERROR_HANDLING_CONFIG.backupRetentionDays * 24 * 60 * 60 * 1000);
+
+    const request = indexedDB.open('ChromePilotErrorRecovery', 1);
+    request.onsuccess = () => {
+      const db = request.result;
+      const transaction = db.transaction(['sessionBackups', 'errorStates'], 'readwrite');
+
+      // Clean up old session backups
+      const backupsStore = transaction.objectStore('sessionBackups');
+      const backupsIndex = backupsStore.index('timestamp');
+      const backupsRange = IDBKeyRange.upperBound(cutoffTime);
+      backupsIndex.openCursor(backupsRange).onsuccess = (event) => {
+        const cursor = event.target.result;
+        if (cursor) {
+          cursor.delete();
+          cursor.continue();
+        }
+      };
+
+      // Clean up old error states
+      const errorStore = transaction.objectStore('errorStates');
+      const errorIndex = errorStore.index('timestamp');
+      const errorRange = IDBKeyRange.upperBound(cutoffTime);
+      errorIndex.openCursor(errorRange).onsuccess = (event) => {
+        const cursor = event.target.result;
+        if (cursor) {
+          cursor.delete();
+          cursor.continue();
+        }
+      };
+
+      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);
+  }
+}
+
+/**
+ * Handle save attempt with comprehensive error management
+ * Replaces silent failure patterns with circuit breaker and retry logic
+ */
+async function handleSaveAttempt(saveFunction, data, context = {}) {
+  if (!errorHandlingState.isInitialized) {
+    console.warn('[ErrorHandling] System not initialized, attempting save anyway');
+  }
+
+  const attempt = {
+    timestamp: Date.now(),
+    context: context,
+    data: data
+  };
+
+  try {
+    // Check circuit breaker state
+    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');
+        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');
+      }
+    }
+
+    // Attempt the save operation
+    const result = await saveFunction(data, context);
+
+    // Success - reset circuit breaker
+    if (result && result.success !== false) {
+      errorHandlingState.circuitBreakerState = 'CLOSED';
+      errorHandlingState.failedSaveCount = 0;
+      console.log('[ErrorHandling] Save successful, circuit breaker CLOSED');
+      return { success: true, result };
+    } else {
+      throw new Error('Save function returned failure');
+    }
+
+  } catch (error) {
+    return await handleSaveFailure(error, data, context, attempt);
+  }
+}
+
+/**
+ * Handle save failure with retry logic and escalation
+ */
+async function handleSaveFailure(error, data, context, attempt) {
+  console.error('[ErrorHandling] Save attempt failed:', error);
+
+  // Update error state
+  errorHandlingState.failedSaveCount++;
+  errorHandlingState.lastError = {
+    type: determineErrorType(error),
+    message: error.message || 'Unknown error',
+    timestamp: Date.now(),
+    retryCount: errorHandlingState.failedSaveCount,
+    stackTrace: error.stack,
+    context: context
+  };
+
+  // Store error state
+  await storeErrorState(errorHandlingState.lastError);
+
+  // Manage circuit breaker
+  if (errorHandlingState.failedSaveCount >= ERROR_HANDLING_CONFIG.failureThreshold) {
+    errorHandlingState.circuitBreakerState = 'OPEN';
+    console.warn('[ErrorHandling] Circuit breaker OPEN due to repeated failures');
+  }
+
+  // Attempt backup
+  try {
+    await backupFailedData(data, context);
+    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');
+  }
+
+  // Create user notification if throttling allows
+  if (shouldCreateNotification()) {
+    await createUserNotification('ERROR', `Save failed: ${error.message}`);
+  }
+
+  return {
+    success: false,
+    error: error.message,
+    backedUp: true,
+    circuitBreakerState: errorHandlingState.circuitBreakerState
+  };
+}
+
+/**
+ * Determine error type for categorization and handling
+ */
+function determineErrorType(error) {
+  const message = error.message?.toLowerCase() || '';
+
+  if (message.includes('network') || message.includes('fetch') || message.includes('timeout')) {
+    return 'NETWORK_FAILURE';
+  } else if (message.includes('server') || message.includes('http')) {
+    return 'SERVER_ERROR';
+  } else if (message.includes('storage') || message.includes('indexeddb')) {
+    return 'STORAGE_FAILURE';
+  } else if (message.includes('browser') || message.includes('extension')) {
+    return 'BROWSER_CRASH';
+  } else {
+    return 'NOTIFICATION_FAILURE';
+  }
+}
+
+/**
+ * Store error state in IndexedDB for analysis
+ */
+async function storeErrorState(errorDetails) {
+  try {
+    const request = indexedDB.open('ChromePilotErrorRecovery', 1);
+    request.onsuccess = () => {
+      const db = request.result;
+      const transaction = db.transaction(['errorStates'], 'readwrite');
+      const store = transaction.objectStore('errorStates');
+
+      store.add({
+        ...errorDetails,
+        sessionId: errorHandlingState.sessionId,
+        errorType: errorDetails.type
+      });
+    };
+  } catch (error) {
+    console.error('[ErrorHandling] Failed to store error state:', error);
+  }
+}
+
+/**
+ * Check if user notification should be created (throttling)
+ */
+function shouldCreateNotification() {
+  const now = Date.now();
+  const timeSinceLastNotification = now - errorHandlingState.lastNotificationTime;
+
+  if (timeSinceLastNotification >= ERROR_HANDLING_CONFIG.notificationThrottleMs) {
+    errorHandlingState.lastNotificationTime = now;
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Backup failed data to IndexedDB
+ */
+async function backupFailedData(data, context) {
+  try {
+    const backupData = {
+      sessionId: errorHandlingState.sessionId,
+      timestamp: Date.now(),
+      data: data,
+      context: context,
+      retryCount: errorHandlingState.failedSaveCount,
+      backupType: 'AUTOMATIC'
+    };
+
+    const request = indexedDB.open('ChromePilotErrorRecovery', 1);
+    request.onsuccess = () => {
+      const db = request.result;
+      const transaction = db.transaction(['sessionBackups'], 'readwrite');
+      const store = transaction.objectStore('sessionBackups');
+
+      store.add(backupData);
+      console.log('[ErrorHandling] Data backed up with session ID:', errorHandlingState.sessionId);
+    };
+
+    // Also add to retained interactions if relevant
+    if (data.interactions) {
+      errorHandlingState.retainedInteractions = [
+        ...errorHandlingState.retainedInteractions,
+        ...data.interactions
+      ].slice(-ERROR_HANDLING_CONFIG.maxRetainedInteractions); // Keep only recent ones
+    }
+
+  } catch (error) {
+    console.error('[ErrorHandling] Failed to backup data:', error);
+    throw error;
+  }
+}
+
+/**
+ * Create user notification with action buttons
+ */
+async function createUserNotification(priority, message) {
+  try {
+    const notificationId = `chromepilot_error_${Date.now()}`;
+
+    const notificationOptions = {
+      type: 'basic',
+      iconUrl: 'icons/icon48.png',
+      title: 'Chrome Debug Error',
+      message: message,
+      priority: priority === 'CRITICAL' ? 2 : 1,
+      buttons: [
+        { title: 'Retry Save' },
+        { title: 'View Details' }
+      ]
+    };
+
+    if (priority === 'CRITICAL') {
+      notificationOptions.buttons.push({ title: 'Download Backup' });
+    }
+
+    await chrome.notifications.create(notificationId, notificationOptions);
+    console.log('[ErrorHandling] User notification created:', notificationId);
+
+    // Set up notification click handlers
+    chrome.notifications.onButtonClicked.addListener((notifId, buttonIndex) => {
+      if (notifId === notificationId) {
+        handleNotificationAction(buttonIndex, priority);
+      }
+    });
+
+  } catch (error) {
+    console.error('[ErrorHandling] Failed to create notification:', error);
+  }
+}
+
+/**
+ * Handle user notification button clicks
+ */
+async function handleNotificationAction(buttonIndex, priority) {
+  switch (buttonIndex) {
+    case 0: // Retry Save
+      console.log('[ErrorHandling] User requested retry');
+      await attemptRecovery();
+      break;
+    case 1: // View 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');
+        await downloadBackupData();
+      }
+      break;
+  }
+}
+
+/**
+ * Attempt to recover and upload backed up data
+ */
+async function attemptRecovery() {
+  try {
+    const request = indexedDB.open('ChromePilotErrorRecovery', 1);
+    request.onsuccess = () => {
+      const db = request.result;
+      const transaction = db.transaction(['sessionBackups'], 'readonly');
+      const store = transaction.objectStore('sessionBackups');
+
+      store.getAll().onsuccess = (event) => {
+        const backups = event.target.result;
+        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);
+          } catch (error) {
+            console.error('[ErrorHandling] Recovery failed for session:', backup.sessionId, error);
+          }
+        });
+      };
+    };
+  } catch (error) {
+    console.error('[ErrorHandling] Recovery attempt failed:', error);
+  }
+}
+
+/**
+ * Download backup data as JSON file for manual recovery
+ */
+async function downloadBackupData() {
+  try {
+    const request = indexedDB.open('ChromePilotErrorRecovery', 1);
+    request.onsuccess = () => {
+      const db = request.result;
+      const transaction = db.transaction(['sessionBackups', 'errorStates'], 'readonly');
+
+      const backupStore = transaction.objectStore('sessionBackups');
+      const errorStore = transaction.objectStore('errorStates');
+
+      const backupData = {};
+
+      backupStore.getAll().onsuccess = (event) => {
+        backupData.sessionBackups = event.target.result;
+
+        errorStore.getAll().onsuccess = (event) => {
+          backupData.errorStates = event.target.result;
+          backupData.exportDate = new Date().toISOString();
+
+          // Create download
+          const blob = new Blob([JSON.stringify(backupData, null, 2)], { type: 'application/json' });
+          const url = URL.createObjectURL(blob);
+
+          chrome.downloads.download({
+            url: url,
+            filename: `chrome-pilot-backup-${Date.now()}.json`
+          });
+
+          console.log('[ErrorHandling] Backup data download initiated');
+        };
+      };
+    };
+  } catch (error) {
+    console.error('[ErrorHandling] Failed to download backup data:', error);
+  }
+}
+
+// Create offscreen document if it doesn't exist
+async function createOffscreenDocument() {
+  try {
+    // Always check if document exists first
+    const hasDocument = await chrome.offscreen.hasDocument();
+    if (hasDocument) {
+      hasOffscreenDocument = true;
+      console.log('Offscreen document already exists');
+      return;
+    }
+    
+    // Only create if no document exists
+    await chrome.offscreen.createDocument({
+      url: 'offscreen.html',
+      reasons: ['USER_MEDIA'],
+      justification: 'Recording tab frames for Chrome Debug'
+    });
+    hasOffscreenDocument = true;
+    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)');
+    } else {
+      throw error;
+    }
+  }
+}
+
+// Close offscreen document
+async function closeOffscreenDocument() {
+  if (!hasOffscreenDocument) return;
+  
+  if (await chrome.offscreen.hasDocument()) {
+    await chrome.offscreen.closeDocument();
+  }
+  hasOffscreenDocument = false;
+}
+
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  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
+    const ports = CONFIG_PORTS; // Use configured ports
+    
+    async function tryPorts() {
+      let lastError = null;
+      console.log('Trying to connect to server...');
+      
+      for (const port of ports) {
+        try {
+          console.log(`Trying port ${port}...`);
+          const controller = new AbortController();
+          const timeoutId = setTimeout(() => controller.abort(), DISCOVERY_TIMEOUT);
+          
+          const response = await fetch(`http://localhost:${port}/chromedebug/dom-intent`, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(request.data),
+            signal: controller.signal
+          });
+          
+          clearTimeout(timeoutId);
+          
+          if (response.ok) {
+            const result = await response.json();
+            console.log(`Success on port ${port}:`, result);
+            sendResponse({ success: true, result, port });
+            return;
+          } else {
+            // Try to get error message from response
+            try {
+              const errorData = await response.json();
+              if (errorData.message || errorData.error) {
+                console.log(`Port ${port} error:`, errorData);
+                sendResponse({ 
+                  success: false, 
+                  result: errorData,
+                  error: errorData.message || errorData.error 
+                });
+                return;
+              }
+            } catch (e) {
+              // Response wasn't JSON
+            }
+            lastError = `Port ${port}: HTTP ${response.status}`;
+            console.log(lastError);
+          }
+        } catch (e) {
+          lastError = `Port ${port}: ${e.message}`;
+          console.log(lastError);
+        }
+      }
+      
+      console.error('Failed to connect to any port');
+      sendResponse({ 
+        success: false, 
+        error: 'Could not connect to Chrome Debug server on any port',
+        lastError 
+      });
+    }
+    
+    tryPorts().catch(err => {
+      console.error('Error in tryPorts:', err);
+      sendResponse({ 
+        success: false, 
+        error: err.message 
+      });
+    });
+    
+    return true; // Keep message channel open for async response
+  }
+  
+  if (request.action === 'startRecording') {
+    startRecording(request.tabId, request.settings).then(() => {
+      sendResponse({ success: true });
+    }).catch((error) => {
+      console.error('Error starting recording:', error);
+      sendResponse({ success: false, error: error.message });
+    });
+    return true;
+  }
+  
+  if (request.action === 'stopRecording') {
+    stopRecording().then(() => {
+      sendResponse({ success: true });
+    }).catch((error) => {
+      console.error('Error stopping recording:', error);
+      sendResponse({ success: false, 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);
+
+    if (!sessionManager) {
+      console.error('[Background] Session manager not available');
+      sendResponse({ success: false, error: 'Session manager not available' });
+      return true;
+    }
+
+    const leaseRequest = {
+      sessionId: request.sessionId,
+      ownerId: request.ownerId,
+      requestTime: Date.now(),
+      renewalDuration: request.renewalDuration
+    };
+
+    sessionManager.renewLease(leaseRequest).then((result) => {
+      console.log('[Background] Lease renewed - Success:', result.success);
+      sendResponse(result);
+    }).catch((error) => {
+      console.error('[Background] Error renewing lease:', error);
+      sendResponse({
+        success: false,
+        sessionId: request.sessionId,
+        error: error.message
+      });
+    });
+    return true;
+  }
+
+  // Session manager status check handler
+  if (request.action === 'getSessionStatus') {
+    if (!sessionManager) {
+      sendResponse({ success: false, error: 'Session manager not available' });
+      return true;
+    }
+
+    sessionManager.getCurrentState().then((state) => {
+      sendResponse({
+        success: true,
+        state: state,
+        isRecording: state?.isRecording || false,
+        sessionId: state?.sessionId || null
+      });
+    }).catch((error) => {
+      console.error('Error getting session status:', error);
+      sendResponse({ success: false, error: error.message });
+    });
+    return true;
+  }
+
+  // Force stop session handler (emergency)
+  if (request.action === 'forceStopSession') {
+    if (!sessionManager) {
+      sendResponse({ success: false, error: 'Session manager not available' });
+      return true;
+    }
+
+    sessionManager.forceStopAll(request.reason || 'MANUAL_FORCE_STOP').then((result) => {
+      // Clear local session cache
+      currentSession = null;
+      currentOwnerId = null;
+      isCurrentlyRecording = false;
+      recordingTabId = null;
+      currentRecordingSessionId = null;
+
+      sendResponse(result);
+    }).catch((error) => {
+      console.error('Error force stopping session:', error);
+      sendResponse({ success: false, error: error.message });
+    });
+    return true;
+  }
+  
+  if (request.action === 'takeManualSnapshot') {
+    // Check recording status via session manager
+    isCurrentlyRecordingAsync().then(async (recording) => {
+      if (recording && offscreenDocumentId) {
+        // Send message to the offscreen document to trigger a manual snapshot
+        chrome.runtime.sendMessage({
+          type: 'manual-snapshot',
+          target: 'offscreen'
+        }).then(() => {
+          sendResponse({ success: true });
+        }).catch((error) => {
+          console.error('Error triggering manual snapshot:', error);
+          sendResponse({ success: false, error: error.message });
+        });
+      } else {
+        sendResponse({ success: false, error: 'Not currently recording' });
+      }
+    }).catch((error) => {
+      console.error('Error checking recording status:', error);
+      sendResponse({ success: false, error: 'Failed to check recording status' });
+    });
+    return true;
+  }
+
+  /*
+   * SNAPSHOT FEATURE DISABLED (2025-10-01)
+   * Standalone snapshot message handler disabled - see SNAPSHOT_FEATURE_DISABLED.md
+   */
+  /*
+  if (request.action === 'takeStandaloneSnapshot') {
+    console.log('Taking standalone snapshot for tab:', request.tabId);
+    takeStandaloneSnapshot(request.tabId, request.note).then((result) => {
+      sendResponse({ success: true, sessionId: result.sessionId });
+    }).catch((error) => {
+      console.error('Error taking standalone snapshot:', error);
+      sendResponse({ success: false, error: error.message });
+    });
+    return true;
+  }
+  */
+
+  if (request.action === 'getRecordingState') {
+    // Use session manager if available
+    if (sessionManager) {
+      sessionManager.getCurrentState().then(async (state) => {
+        const recording = state?.isRecording || false;
+        const sessionId = state?.sessionId || null;
+        const tabId = state?.settings?.tabId || null;
+
+        sendResponse({
+          isRecording: recording,
+          recordingTabId: tabId,
+          sessionId: sessionId,
+          frameCount: state?.frameCount || 0,
+          sessionStatus: state?.status || 'none'
+        });
+      }).catch((error) => {
+        console.error('Error getting session state:', error);
+        // Fallback to legacy state
+        sendResponse({
+          isRecording: isCurrentlyRecording,
+          recordingTabId: recordingTabId,
+          sessionId: currentRecordingSessionId,
+          error: error.message
+        });
+      });
+    } else {
+      // Legacy fallback
+      sendResponse({
+        isRecording: isCurrentlyRecording,
+        recordingTabId: recordingTabId,
+        sessionId: currentRecordingSessionId
+      });
+    }
+    return true;
+  }
+  
+  if (request.action === 'startRecordingFromContent') {
+    console.log('Starting recording from content script');
+    const tabId = sender.tab.id;
+    
+    // Store recording state and show notification
+    chrome.notifications.create({
+      type: 'basic',
+      iconUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
+      title: 'Start Recording',
+      message: 'Click the Chrome Debug extension icon to start recording this tab',
+      priority: 2,
+      requireInteraction: true
+    });
+    
+    // Update storage to signal popup to start recording
+    chrome.storage.local.set({ 
+      pendingRecording: true,
+      pendingTabId: tabId
+    });
+    
+    sendResponse({ success: true, message: 'Click extension icon to start recording' });
+    return true;
+  }
+  
+  if (request.action === 'deleteRecording') {
+    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);
+    startWorkflowRecording(
+      request.tabId, 
+      request.includeLogsInExport, 
+      request.sessionName,
+      request.screenshotSettings
+    ).then(() => {
+      sendResponse({ success: true });
+    }).catch((error) => {
+      console.error('Error starting workflow recording:', error);
+      sendResponse({ success: false, error: error.message });
+    });
+    return true;
+  }
+  
+  if (request.action === 'stopWorkflowRecording') {
+    console.log('Stopping workflow recording for tab:', request.tabId);
+    stopWorkflowRecording(request.tabId).then((workflow) => {
+      sendResponse({ success: true, workflow: workflow });
+    }).catch((error) => {
+      console.error('Error stopping workflow recording:', error);
+      sendResponse({ success: false, error: error.message });
+    });
+    return true;
+  }
+  
+  // Handle messages from offscreen document
+  if (request.target === 'background') {
+    if (request.type === 'frame-batch-ready') {
+      handleFrameBatch(request.data);
+    } else if (request.type === 'frame-capture-complete') {
+      handleFrameCaptureComplete(request.data);
+    } else if (request.type === 'show-frame-flash') {
+      // Relay flash message to content script
+      chrome.tabs.sendMessage(request.tabId, {
+        action: 'showFrameFlash'
+      }).catch(() => {
+        // Content script might not be available, that's ok
+      });
+    }
+  }
+  
+  // Handle console logs with race-condition-free buffering
+  if (request.action === 'consoleLog' && sender.tab) {
+    const tabId = sender.tab.id;
+    if (tabId === recordingTabId && currentRecordingSessionId) {
+      // Use LogBuffer for race-condition-free storage
+      // This replaces the problematic concurrent chrome.storage.session operations
+      if (logBuffer) {
+        logBuffer.addLog(tabId, request.log).catch(bufferErr => {
+          console.error('[Background] Failed to buffer log via LogBuffer:', bufferErr);
+
+          // Fallback to direct storage (original behavior) if LogBuffer fails
+          chrome.storage.session.get(String(tabId)).then(result => {
+            const logs = result[String(tabId)] || [];
+            logs.push(request.log);
+            chrome.storage.session.set({ [String(tabId)]: logs });
+          }).catch(fallbackErr => {
+            console.error('[Background] Fallback storage also failed:', fallbackErr);
+          });
+        });
+      } else {
+        // LogBuffer not available, use fallback storage
+        console.warn('[Background] LogBuffer not available, using fallback storage');
+        chrome.storage.session.get(String(tabId)).then(result => {
+          const logs = result[String(tabId)] || [];
+          logs.push(request.log);
+          chrome.storage.session.set({ [String(tabId)]: logs });
+        }).catch(fallbackErr => {
+          console.error('[Background] Fallback storage failed:', fallbackErr);
+        });
+      }
+
+      // Also attempt real-time streaming if LogStreamer is available
+      if (logStreamer) {
+        logStreamer.addLog(request.log, currentRecordingSessionId).catch(err => {
+          console.error('[Background] Error streaming log:', err);
+        });
+      }
+    }
+  }
+  
+  // Capture screen interactions during recording
+  if (request.action === 'screenInteraction' && sender.tab) {
+    const tabId = sender.tab.id;
+
+    // Use session manager validation if available
+    if (sessionManager) {
+      isCurrentlyRecordingAsync().then(async (recording) => {
+        const currentTabId = await getCurrentTabIdAsync();
+        if (recording && tabId === currentTabId) {
+          const sessionId = await getCurrentSessionIdAsync();
+          let frameIndex = 0;
+
+          // Get frame count from session manager
+          const state = await sessionManager.getCurrentState();
+          if (state && state.sessionId === sessionId) {
+            frameIndex = state.frameCount || 0;
+          }
+
+          const interaction = {
+            ...request.interaction,
+            frameIndex: frameIndex
+          };
+          screenInteractions.push(interaction);
+          console.log('Screen interaction recorded:', interaction.type, 'Total:', screenInteractions.length);
+        }
+      }).catch(error => {
+        console.error('Error validating recording state for screen interaction:', error);
+      });
+    } else {
+      // Legacy fallback
+      if (tabId === recordingTabId && isCurrentlyRecording) {
+        const interaction = {
+          ...request.interaction,
+          frameIndex: frameCounter.get(currentRecordingSessionId) || 0
+        };
+        screenInteractions.push(interaction);
+        console.log('Screen interaction recorded:', interaction.type, 'Total:', screenInteractions.length);
+      }
+    }
+  }
+  
+  // Buffer workflow console logs
+  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);
+      });
+    }
+  }
+  
+  // Handle getCookies for restore points
+  if (request.action === 'getCookies' && sender.tab) {
+    chrome.cookies.getAll({ url: request.url }, (cookies) => {
+      sendResponse({ cookies: cookies });
+    });
+    return true;
+  }
+  
+  // Handle save restore point
+  if (request.action === 'saveRestorePoint' && sender.tab) {
+    // Get current workflow ID from storage
+    chrome.storage.local.get(['currentWorkflowId'], async (result) => {
+      if (!result.currentWorkflowId) {
+        sendResponse({ success: false, error: 'No active workflow recording' });
+        return;
+      }
+      
+      // Add workflow ID to restore point data
+      const restorePointData = {
+        ...request.restorePoint,
+        workflowId: result.currentWorkflowId
+      };
+      
+      // Try to save to server
+      const ports = CONFIG_PORTS;
+      let saved = false;
+      let restorePointId = null;
+      
+      // Use comprehensive error handling for restore point save
+      const saveRestorePoint = async (data, context) => {
+        for (const port of ports) {
+          try {
+            const response = await fetch(`http://localhost:${port}/chromedebug/restore-point`, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json'
+              },
+              body: JSON.stringify(data.restorePointData)
+            });
+
+            if (response.ok) {
+              const result = await response.json();
+              return { success: true, result };
+            } else {
+              throw new Error(`HTTP ${response.status}: Failed to save restore point to port ${port}`);
+            }
+          } catch (error) {
+            console.error(`[ErrorHandling] Restore point save failed on port ${port}:`, error);
+            // Continue to next port instead of silent failure
+          }
+        }
+        throw new Error('All server ports failed for restore point save');
+      };
+
+      const saveResult = await handleSaveAttempt(
+        saveRestorePoint,
+        { restorePointData },
+        { operation: 'restore_point_save', tabId }
+      );
+
+      if (saveResult.success) {
+        saved = true;
+        restorePointId = saveResult.result.result.restorePointId;
+      } else {
+        console.error('[ErrorHandling] Failed to save restore point after comprehensive error handling');
+      }
+      
+      if (saved) {
+        sendResponse({ success: true, restorePointId });
+      } else {
+        sendResponse({ success: false, error: 'Could not save restore point to server' });
+      }
+    });
+    return true;
+  }
+  
+  // Handle navigate and restore
+  if (request.action === 'navigateAndRestore' && sender.tab) {
+    const tabId = sender.tab.id;
+    const { url, restorePointId } = request;
+    
+    // Store restore point ID to apply after navigation
+    chrome.storage.session.set({ 
+      [`pendingRestore_${tabId}`]: { restorePointId, url }
+    });
+    
+    // Navigate to the URL
+    chrome.tabs.update(tabId, { url: url }, () => {
+      sendResponse({ success: true });
+    });
+    return true;
+  }
+  
+  // Handle workflow screenshot capture
+  if (request.action === 'captureWorkflowScreenshot' && sender.tab) {
+    const tabId = sender.tab.id;
+    const settings = request.settings || {};
+    
+    captureTabScreenshot(tabId, settings).then((screenshotData) => {
+      sendResponse({ success: true, screenshotData });
+    }).catch((error) => {
+      console.error('Error capturing screenshot:', error);
+      sendResponse({ success: false, error: error.message });
+    });
+    return true;
+  }
+});
+
+/*
+ * SNAPSHOT FEATURE DISABLED (2025-10-01)
+ *
+ * This function captured a standalone snapshot (screenshot + console logs).
+ *
+ * WHY DISABLED:
+ * - Snapshots without console logs are just screenshots (users can do this natively)
+ * - Console log capture requires always-on monitoring (privacy concern)
+ * - Core value proposition (screenshot + searchable logs) cannot be achieved cleanly
+ *
+ * TO RE-ENABLE:
+ * 1. Implement privacy-conscious always-on log monitoring
+ * 2. Uncomment this function
+ * 3. Re-enable message handler in chrome.runtime.onMessage listener
+ * 4. Re-enable UI elements in popup.html and popup.js
+ *
+ * See: SNAPSHOT_FEATURE_DISABLED.md for full explanation
+ */
+/*
+async function takeStandaloneSnapshot(tabId, note = '') {
+  try {
+    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)}`;
+
+    // Capture screenshot
+    const screenshotData = await chrome.tabs.captureVisibleTab(null, {
+      format: 'jpeg',
+      quality: 30 // Default quality for snapshots
+    });
+
+    // Get current console logs for this tab
+    let consoleLogs = [];
+    try {
+      // Try to get logs from active recording buffer first
+      if (logBuffer) {
+        await logBuffer.flushTab(tabId);
+        const result = await chrome.storage.session.get(String(tabId));
+        consoleLogs = result[String(tabId)] || [];
+        // Take only the most recent 100 logs for the snapshot
+        consoleLogs = consoleLogs.slice(-100);
+      }
+
+      // If no logs from buffer, try to get from content script
+      if (consoleLogs.length === 0) {
+        try {
+          const response = await chrome.tabs.sendMessage(tabId, {
+            action: 'getConsoleHistory'
+          });
+          if (response && response.logs) {
+            consoleLogs = response.logs.slice(-100);
+          }
+        } catch (contentScriptError) {
+          console.warn('Content script not available for console logs:', contentScriptError);
+        }
+      }
+    } catch (logError) {
+      console.warn('Could not retrieve console logs for snapshot:', logError);
+    }
+
+    // Prepare the snapshot data
+    const snapshotData = {
+      sessionId: sessionId,
+      type: 'snapshot',
+      note: note,
+      timestamp: Date.now(),
+      tabId: tabId,
+      screenshot: screenshotData,
+      logs: consoleLogs,
+      url: null // Will be filled by server if possible
+    };
+
+    // Send to server using the frame-batch endpoint with snapshot flag
+    const ports = CONFIG_PORTS;
+    let uploadSuccess = false;
+
+    for (const port of ports) {
+      try {
+        const response = await fetch(`http://localhost:${port}/chromedebug/frame-batch`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            sessionId: sessionId,
+            frames: [{
+              index: 0,
+              timestamp: Date.now(),
+              imageData: screenshotData,
+              logs: consoleLogs
+            }]
+          })
+        });
+
+        if (response.ok) {
+          const result = await response.json();
+          console.log('Snapshot uploaded successfully:', sessionId);
+          uploadSuccess = true;
+          break;
+        }
+      } catch (error) {
+        console.error(`Failed to upload snapshot to port ${port}:`, error);
+      }
+    }
+
+    if (!uploadSuccess) {
+      throw new Error('Failed to upload snapshot to any server port');
+    }
+
+    return { sessionId: sessionId };
+
+  } catch (error) {
+    console.error('Error taking standalone snapshot:', error);
+    throw error;
+  }
+}
+*/
+
+// Capture screenshot for workflow recording
+async function captureTabScreenshot(tabId, settings) {
+  try {
+    const dataUrl = await chrome.tabs.captureVisibleTab(null, {
+      format: settings.format || 'jpeg',
+      quality: settings.quality || 30
+    });
+    
+    // If resolution is specified, resize the image
+    if (settings.maxWidth || settings.maxHeight) {
+      // Create an image element to get dimensions
+      const img = new Image();
+      const canvas = new OffscreenCanvas(1, 1);
+      const ctx = canvas.getContext('2d');
+      
+      return new Promise((resolve, reject) => {
+        img.onload = () => {
+          let width = img.width;
+          let height = img.height;
+          
+          // Calculate new dimensions maintaining aspect ratio
+          if (settings.maxWidth && width > settings.maxWidth) {
+            height = (height * settings.maxWidth) / width;
+            width = settings.maxWidth;
+          }
+          if (settings.maxHeight && height > settings.maxHeight) {
+            width = (width * settings.maxHeight) / height;
+            height = settings.maxHeight;
+          }
+          
+          canvas.width = width;
+          canvas.height = height;
+          ctx.drawImage(img, 0, 0, width, height);
+          
+          canvas.convertToBlob({
+            type: `image/${settings.format || 'jpeg'}`,
+            quality: (settings.quality || 30) / 100
+          }).then(blob => {
+            const reader = new FileReader();
+            reader.onloadend = () => resolve(reader.result);
+            reader.onerror = reject;
+            reader.readAsDataURL(blob);
+          }).catch(reject);
+        };
+        img.onerror = reject;
+        img.src = dataUrl;
+      });
+    }
+    
+    return dataUrl;
+  } catch (error) {
+    console.error('Error capturing tab screenshot:', error);
+    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);
+
+    if (!licenseCheck.allowed) {
+      // Show notification to user
+      chrome.notifications.create({
+        type: 'basic',
+        iconUrl: 'icon.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;
+
+    // Check if session manager is available
+    if (!sessionManager) {
+      throw new Error('Session manager not initialized');
+    }
+
+    // Check if already recording
+    const currentlyRecording = await isCurrentlyRecordingAsync();
+    if (currentlyRecording) {
+      throw new Error('Recording already in progress');
+    }
+
+    // Clear any previous logs for this tab
+    await chrome.storage.session.remove(String(tabId));
+
+    // Clear screen interactions from previous recording
+    screenInteractions = [];
+
+    // Start capturing console logs FIRST, before any other setup
+    const logsStarted = await startCapturingLogs(tabId);
+    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');
+    } else {
+      console.warn('[Recording] Console capture unavailable for this page - recording will proceed without console logs');
+    }
+
+    // Create offscreen document
+    await createOffscreenDocument();
+
+    // Get stream ID for the tab
+    const streamId = await chrome.tabCapture.getMediaStreamId({
+      targetTabId: tabId
+    });
+
+    console.log('Got stream ID:', streamId);
+
+    // Create session with session manager
+    const sessionConfig = {
+      tabId: tabId,
+      frameRate: settings.frameRate || 1,
+      imageQuality: settings.imageQuality || 30,
+      frameFlash: settings.frameFlash !== false,
+      maxDuration: 30 * 60 * 1000, // 30 minutes
+      includeConsole: true,
+      ...settings
+    };
+
+    const sessionResult = await sessionManager.createSession(sessionConfig);
+    if (!sessionResult.success) {
+      throw new Error(`Failed to create session: ${sessionResult.error?.message || 'Unknown error'}`);
+    }
+
+    // Start recording with session manager
+    const startResult = await sessionManager.startRecording(sessionResult.sessionId, sessionResult.ownerId);
+    if (!startResult.success) {
+      throw new Error(`Failed to start recording: ${startResult.error?.message || 'Unknown error'}`);
+    }
+
+    // Cache session info for quick access
+    currentSession = startResult.state;
+    currentOwnerId = sessionResult.ownerId;
+
+    const sessionId = currentSession.sessionId;
+    const scheduledStartTime = Date.now() + 3000; // Schedule start 3 seconds in future for countdown synchronization
+
+    // Update legacy state for backward compatibility (will be removed)
+    recordingTabId = tabId;
+    isCurrentlyRecording = true;
+    recordingServerPort = null; // Reset port for new recording
+    currentRecordingSessionId = sessionId;
+    frameCounter.set(sessionId, 0); // Initialize frame counter for this session
+    
+    // Set session ID in log streamer
+    if (logStreamer) {
+      logStreamer.setSessionId(sessionId);
+    }
+    
+    // Update storage
+    chrome.storage.local.set({
+      recordingActive: true,
+      recordingStartTime: scheduledStartTime,
+      recordingTabId: tabId,
+      recordingSessionId: sessionId
+    });
+    
+    // Update badge
+    chrome.action.setBadgeText({ text: 'REC' });
+    chrome.action.setBadgeBackgroundColor({ color: '#FF0000' });
+    
+    // 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://'))) {
+      // Store a warning that console logs aren't available
+      chrome.storage.local.set({
+        [`recording_warning_${sessionId}`]: {
+          type: 'restricted_page',
+          message: 'Console logs cannot be captured on chrome:// or extension pages. Navigate to a regular website to capture logs.',
+          url: tab.url
+        }
+      });
+    }
+    
+    // Notify content script that recording has started with scheduled time
+    chrome.tabs.sendMessage(tabId, {
+      action: 'recordingStarted',
+      scheduledStartTime: scheduledStartTime,
+      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);
+      
+      // 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);
+        return;
+      }
+      
+      try {
+        await chrome.scripting.executeScript({
+          target: { tabId: tabId },
+          files: ['content.js']
+        });
+        await chrome.scripting.insertCSS({
+          target: { tabId: tabId },
+          files: ['content.css']
+        });
+        // Try again after injection
+        setTimeout(() => {
+          chrome.tabs.sendMessage(tabId, {
+            action: 'recordingStarted',
+            scheduledStartTime: scheduledStartTime,
+            sessionId: sessionId
+          }).catch(() => {
+            console.error('Failed to show recording indicator even after injection');
+          });
+        }, 100);
+      } catch (injectionError) {
+        console.error('Failed to inject content script:', injectionError);
+      }
+    });
+    
+    // Send stream ID, session info, and settings to offscreen document for frame capture
+    await chrome.runtime.sendMessage({
+      type: 'start-frame-capture',
+      target: 'offscreen',
+      streamId: streamId,
+      tabId: tabId,
+      sessionId: sessionId,
+      ownerId: currentOwnerId,
+      scheduledStartTime: scheduledStartTime,
+      settings: {
+        frameRate: settings.frameRate || 1,
+        imageQuality: settings.imageQuality || 30,
+        frameFlash: settings.frameFlash !== false
+      }
+    });
+    
+    console.log('Recording started');
+  } catch (error) {
+    console.error('Error in startRecording:', error);
+    throw error;
+  }
+}
+
+// Stop recording
+async function stopRecording() {
+  try {
+    // Check if session manager is available
+    if (!sessionManager) {
+      console.warn('Session manager not available, stopping recording anyway');
+      return;
+    }
+
+    // Check if currently recording via session manager
+    const currentlyRecording = await isCurrentlyRecordingAsync();
+    if (!currentlyRecording) {
+      console.log('No active recording session to stop');
+      return;
+    }
+
+    // Stop recording with session manager
+    if (currentSession?.sessionId && currentOwnerId) {
+      const stopResult = await sessionManager.stopRecording(currentSession.sessionId, currentOwnerId);
+      if (!stopResult.success) {
+        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);
+      }
+    }
+
+    // CRITICAL: Flush all buffered logs before stopping recording
+    // This ensures no logs are lost during the stop process
+    let flushCompleted = false;
+    if (logBuffer) {
+      try {
+        console.log('[Background] Flushing all buffered logs before stop...');
+        await logBuffer.flushAll();
+        flushCompleted = true;
+        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
+      }
+    }
+
+    // Store flush completion status for handleFrameCaptureComplete
+    if (recordingTabId) {
+      await chrome.storage.session.set({ [`flush_completed_${recordingTabId}`]: flushCompleted });
+    }
+
+    // Send stop message to offscreen document
+    await chrome.runtime.sendMessage({
+      type: 'stop-frame-capture',
+      target: 'offscreen'
+    });
+
+    // CRITICAL FIX: Send stop-screen-capture-tracking message to ALL content scripts
+    try {
+      const tabs = await chrome.tabs.query({});
+      const cleanupPromises = tabs.map(tab => {
+        if (tab.id && tab.url && !tab.url.startsWith('chrome://') && !tab.url.startsWith('chrome-extension://')) {
+          return chrome.tabs.sendMessage(tab.id, {
+            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}`);
+          });
+        }
+        return Promise.resolve();
+      });
+      await Promise.all(cleanupPromises);
+      console.log('[Background] Cleanup messages sent to all content scripts');
+    } catch (error) {
+      console.error('[Background] Failed to send cleanup messages to content scripts:', error);
+    }
+
+    // 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;
+
+    // Clean up logBuffer for the specific tab that was being recorded
+    if (logBuffer && previousRecordingTabId) {
+      logBuffer.clearTab(previousRecordingTabId);
+    }
+
+    console.log('Stop message sent to offscreen document');
+  } catch (error) {
+    console.error('Error in stopRecording:', error);
+    // Clear session cache even on error
+    const errorRecordingTabId = recordingTabId; // Store for cleanup
+    currentSession = null;
+    currentOwnerId = null;
+    isCurrentlyRecording = false;
+    recordingTabId = null;
+    currentRecordingSessionId = null;
+
+    // Clean up logBuffer even on error
+    if (logBuffer && errorRecordingTabId) {
+      logBuffer.clearTab(errorRecordingTabId);
+    }
+
+    throw error;
+  }
+}
+
+
+
+// Capture console logs from the recording tab
+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('[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
+  }
+}
+
+// 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: '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://')) {
+      console.log('Cannot start workflow recording on restricted URL:', tab.url);
+      throw new Error('Cannot record workflows on restricted pages (chrome:// URLs)');
+    }
+    
+    // Store settings
+    workflowRecordingTabs.set(tabId, true);
+    workflowIncludeLogs.set(tabId, includeLogsInExport);
+    workflowScreenshotSettings.set(tabId, screenshotSettings);
+    workflowSessionNames.set(tabId, sessionName);
+    
+    // Generate and store workflow ID
+    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
+    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]
+    });
+    
+    // Ensure content script is injected
+    try {
+      await chrome.scripting.executeScript({
+        target: { tabId: tabId },
+        files: ['content.js']
+      });
+      await chrome.scripting.insertCSS({
+        target: { tabId: tabId },
+        files: ['content.css']
+      });
+    } catch (e) {
+      // Content script might already be injected
+      console.log('Content script injection attempt:', e.message);
+    }
+    
+    // Tell the content script to start recording
+    await chrome.tabs.sendMessage(tabId, {
+      action: 'startWorkflowRecording',
+      screenshotSettings: screenshotSettings
+    });
+    
+    console.log('Workflow recording started successfully');
+  } catch (error) {
+    console.error('Error starting workflow recording:', error);
+    throw error;
+  }
+}
+
+async function stopWorkflowRecording(tabId) {
+  try {
+    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
+    const response = await chrome.tabs.sendMessage(tabId, {
+      action: 'stopWorkflowRecording'
+    });
+    
+    if (!response || !response.success) {
+      throw new Error('Failed to get workflow from content script');
+    }
+    
+    // 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`);
+    
+    // If logs should be included, get them from session storage
+    if (workflowIncludeLogs.get(tabId)) {
+      const result = await chrome.storage.session.get(`workflow_${tabId}`);
+      const logs = result[`workflow_${tabId}`] || [];
+      
+      // Associate logs with workflow actions
+      workflow = workflow.map((action, index) => {
+        // Find logs that occurred around this action
+        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;
+        });
+        
+        if (actionLogs.length > 0) {
+          return { ...action, logs: actionLogs };
+        }
+        return action;
+      });
+    }
+    
+    // Get settings before cleanup
+    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
+    await chrome.storage.session.remove(`workflow_${tabId}`);
+    
+    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)}`;
+      
+      for (const port of serverPorts) {
+        try {
+          console.log(`[Workflow] Attempting to save to server on port ${port}...`);
+          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
+            })
+          });
+          
+          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}`);
+            const errorText = await response.text();
+            console.log(`[Workflow] Error response:`, errorText);
+          }
+        } catch (error) {
+          console.log(`Failed to save to server on port ${port}:`, error.message);
+        }
+      }
+      
+      if (serverResult) {
+        return {
+          success: true,
+          workflow: {
+            sessionId: sessionId,
+            url: tab.url,
+            title: tab.title,
+            actions: workflow,
+            logs: workflowIncludeLogs.get(tabId) ? workflow.flatMap(action => action.logs || []) : []
+          },
+          savedToServer: true,
+          serverResult: serverResult
+        };
+      } else {
+        return {
+          success: true,
+          workflow: workflow,
+          savedToServer: false
+        };
+      }
+    } catch (error) {
+      console.error('Error saving workflow:', error);
+      return {
+        success: true,
+        workflow: workflow,
+        savedToServer: false,
+        error: error.message
+      };
+    }
+  } catch (error) {
+    console.error('Error stopping workflow recording:', error);
+    throw error;
+  }
+}
+
+// Delete recording from server
+async function deleteRecordingFromServer(recordingId, sendResponse) {
+  try {
+    const ports = CONFIG_PORTS; // Use configured ports
+    let deleted = false;
+    
+    // Use comprehensive error handling for recording deletion
+    const deleteRecording = async (data, context) => {
+      for (const port of ports) {
+        try {
+          const response = await fetch(`http://localhost:${port}/chromedebug/recording/${data.recordingId}`, {
+            method: 'DELETE'
+          });
+
+          if (response.ok) {
+            return { success: true, result: { deleted: true } };
+          } else {
+            throw new Error(`HTTP ${response.status}: Failed to delete recording from port ${port}`);
+          }
+        } catch (error) {
+          console.error(`[ErrorHandling] Recording deletion failed on port ${port}:`, error);
+          // Continue to next port instead of silent failure
+        }
+      }
+      throw new Error('All server ports failed for recording deletion');
+    };
+
+    const deleteResult = await handleSaveAttempt(
+      deleteRecording,
+      { recordingId },
+      { operation: 'recording_deletion', recordingId }
+    );
+
+    if (deleteResult.success) {
+      deleted = true;
+      console.log('Recording deleted successfully');
+      sendResponse({ success: true });
+      return;
+    } else {
+      console.error('[ErrorHandling] Failed to delete recording after comprehensive error handling');
+    }
+    
+    if (!deleted) {
+      sendResponse({ success: false, error: 'Could not connect to server' });
+    }
+  } catch (error) {
+    console.error('Error deleting recording:', error);
+    sendResponse({ success: false, error: error.message });
+  }
+}
+
+// Retry pending frames after lease validation completes
+// v2.1.2: Handles race condition between lease renewal and frame validation
+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}`);
+
+  // 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);
+      return;
+    }
+  }
+
+  // Process all pending batches
+  const batches = pendingFrameQueue.get(sessionId) || [];
+  pendingFrameQueue.delete(sessionId); // Clear queue before processing
+
+  for (const frames of batches) {
+    await handleFrameBatch({ sessionId, frames }, true); // skipValidation=true
+  }
+
+  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}`);
+
+  try {
+    const sessionId = batchData.sessionId;
+
+    // Validate session if session manager is available (unless skipping for retry)
+    if (sessionManager && !skipValidation) {
+      const validationResult = await sessionManager.isSessionValid(sessionId);
+      if (!validationResult.valid) {
+        // DON'T LOSE FRAMES - Queue for retry instead of rejecting
+        // v2.1.2: Race condition fix - lease renewal may not have propagated yet
+        if (!pendingFrameQueue.has(sessionId)) {
+          pendingFrameQueue.set(sessionId, []);
+        }
+        pendingFrameQueue.get(sessionId).push(batchData.frames);
+        console.warn(`[FrameQueue] Frame batch queued for retry - session validation failed: ${validationResult.reason}`);
+
+        // Retry after 100ms to allow lease renewal to propagate
+        setTimeout(() => retryPendingFrames(sessionId), 100);
+        return;
+      }
+    }
+
+    // Get current frame count from session manager (preferred) or legacy fallback
+    let currentFrameIndex = 0;
+    if (sessionManager) {
+      const state = await sessionManager.getCurrentState();
+      if (state && state.sessionId === sessionId) {
+        currentFrameIndex = state.frameCount || 0;
+      }
+    } else {
+      // Legacy fallback
+      currentFrameIndex = frameCounter.get(sessionId) || 0;
+    }
+
+    // Add index to each frame
+    const indexedFrames = batchData.frames.map(frame => ({
+      ...frame,
+      index: currentFrameIndex++
+    }));
+
+    // Update frame count via session manager (preferred) or legacy
+    if (sessionManager) {
+      const updateSuccess = await sessionManager.updateFrameCount(sessionId, currentFrameIndex);
+      if (!updateSuccess) {
+        console.warn('Failed to update frame count in session manager, using legacy counter');
+        frameCounter.set(sessionId, currentFrameIndex);
+      }
+    } else {
+      // Legacy fallback
+      frameCounter.set(sessionId, currentFrameIndex);
+    }
+    
+    console.log(`Assigning frame indices ${frameCounter.get(sessionId) - indexedFrames.length} to ${currentFrameIndex - 1}`);
+    
+    // Find available server port using settings
+    const ports = await getServerPorts();
+    let uploadSuccess = false;
+    let lastError = null;
+    
+    // Get session name from current session
+    const sessionName = currentSession?.settings?.sessionName || null;
+
+    for (const port of ports) {
+      try {
+        const formData = new FormData();
+        formData.append('sessionId', batchData.sessionId);
+        formData.append('frames', JSON.stringify(indexedFrames));
+        if (sessionName) {
+          formData.append('sessionName', sessionName);
+        }
+
+        const uploadResponse = await fetch(`http://localhost:${port}/chromedebug/frame-batch`, {
+          method: 'POST',
+          body: formData
+        });
+        
+        if (uploadResponse.ok) {
+          const result = await uploadResponse.json();
+          console.log(`Frame batch uploaded successfully to port ${port}:`, result);
+          recordingServerPort = port; // Store the successful port
+          uploadSuccess = true;
+          
+          // Also save frames to Chrome local storage
+          const storageKey = batchData.sessionId;
+          const existingData = await chrome.storage.local.get([storageKey]);
+          const sessionData = existingData[storageKey] || {
+            sessionId: batchData.sessionId,
+            frames: [],
+            timestamp: Date.now()
+          };
+          
+          // Append new frames
+          sessionData.frames = sessionData.frames.concat(batchData.frames);
+          await chrome.storage.local.set({ [storageKey]: sessionData });
+          console.log(`Saved ${batchData.frames.length} frames to local storage, total: ${sessionData.frames.length}`);
+          
+          break;
+        } else {
+          const errorText = await uploadResponse.text();
+          lastError = `HTTP ${uploadResponse.status}: ${errorText}`;
+          console.error(`Failed to upload frame batch to port ${port}: ${lastError}`);
+        }
+      } catch (e) {
+        lastError = e.message;
+        console.log(`Failed to upload frame batch to port ${port}:`, e.message);
+      }
+    }
+    
+    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
+        }
+      });
+    }
+
+    // Notify LogStreamer that frames have been captured and processed
+    if (logStreamer && uploadSuccess) {
+      logStreamer.notifyFrameCapture();
+    }
+  } catch (error) {
+    console.error('Error processing frame batch:', error);
+  }
+}
+
+// Get preferred port from settings
+async function getServerPorts() {
+  const data = await chrome.storage.sync.get(['serverPort']);
+  const defaultPorts = CONFIG_PORTS.slice(0, 8); // Use first 8 configured ports as defaults
+  
+  if (data.serverPort) {
+    // User specified a port, try it first
+    return [data.serverPort, ...defaultPorts.filter(p => p !== data.serverPort)];
+  }
+  
+  // Try to discover the active server port
+  const discoveredPort = await discoverActiveServerPort();
+  if (discoveredPort) {
+    console.log(`Discovered Chrome Debug server on port ${discoveredPort}`);
+    return [discoveredPort, ...defaultPorts.filter(p => p !== discoveredPort)];
+  }
+  
+  // Try last successful port first, then defaults
+  return recordingServerPort ? 
+    [recordingServerPort, ...defaultPorts.filter(p => p !== recordingServerPort)] : 
+    defaultPorts;
+}
+
+// Discover the active Chrome Debug server port
+async function discoverActiveServerPort() {
+  const portsToCheck = CONFIG_PORTS.slice(0, 10); // Use first 10 configured ports for discovery
+  
+  for (const port of portsToCheck) {
+    try {
+      const response = await fetch(`http://localhost:${port}/chromedebug/status`, {
+        method: 'GET',
+        signal: AbortSignal.timeout(1000) // 1 second timeout
+      });
+      
+      if (response.ok) {
+        const data = await response.json();
+        if (data.status === 'online') {
+          return port;
+        }
+      }
+    } catch (error) {
+      // Port not available or server not responding
+      continue;
+    }
+  }
+  
+  return null;
+}
+
+// Handle frame capture session completion
+async function handleFrameCaptureComplete(sessionData) {
+  console.log(`Frame capture session ${sessionData.sessionId} completed with ${sessionData.totalFrames} frames`);
+  
+  try {
+    // Store the tab ID and session ID before clearing
+    const tabIdToNotify = recordingTabId;
+    const sessionIdToUse = sessionData.sessionId || currentRecordingSessionId;
+    
+    // Wait a moment to ensure all frame batches are processed and saved
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    // CRITICAL FIX: Wait for LogBuffer flush completion before reading logs
+    let bufferedLogs = [];
+    try {
+      const maxWaitTime = 10000; // 10 seconds maximum wait
+      const pollInterval = 100; // Check every 100ms
+      let waitedTime = 0;
+      let flushCompleted = false;
+
+      console.log('[Background] Waiting for LogBuffer flush completion...');
+
+      // Poll for flush completion status
+      while (waitedTime < maxWaitTime && !flushCompleted) {
+        const flushStatus = await chrome.storage.session.get(`flush_completed_${tabIdToNotify}`);
+        flushCompleted = flushStatus[`flush_completed_${tabIdToNotify}`] === true;
+
+        if (!flushCompleted) {
+          await new Promise(resolve => setTimeout(resolve, pollInterval));
+          waitedTime += pollInterval;
+        }
+      }
+
+      if (flushCompleted) {
+        console.log(`[Background] LogBuffer flush completed after ${waitedTime}ms`);
+      } else {
+        console.warn(`[Background] LogBuffer flush verification timed out after ${waitedTime}ms`);
+      }
+
+      // 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`);
+      if (bufferedLogs.length > 0) {
+        console.log('First log:', bufferedLogs[0]);
+      }
+
+      // Clean up flush completion marker
+      await chrome.storage.session.remove(`flush_completed_${tabIdToNotify}`);
+
+    } catch (flushWaitError) {
+      console.error('[Background] Error waiting for flush completion:', flushWaitError);
+      // 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`);
+    }
+    
+    // Clear the buffered logs
+    await chrome.storage.session.remove(String(tabIdToNotify));
+
+    // Send logs to server for association with frames with retry logic
+    if (bufferedLogs.length > 0) {
+
+      // Retry logic to handle race conditions
+      const maxRetries = 3;
+      let retryCount = 0;
+      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}`);
+
+      // 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}...`);
+        for (const port of ports) {
+          try {
+            const checkResponse = await fetch(`http://localhost:${port}/chromedebug/frame-session/${sessionIdToUse}`, {
+              method: 'GET',
+              signal: AbortSignal.timeout(2000)
+            });
+            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}`);
+              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);
+              }
+              break;
+            }
+          } catch (e) {
+            console.log(`[LOG-ASSOC-DEBUG] PRE-FLIGHT: Could not check port ${port}:`, e.message);
+          }
+        }
+      } catch (preflightError) {
+        console.error(`[LOG-ASSOC-DEBUG] PRE-FLIGHT check failed:`, preflightError);
+      }
+
+      while (retryCount < maxRetries && !success) {
+        try {
+          const ports = await getServerPorts();
+          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}...`);
+              const requestBody = {
+                sessionId: sessionIdToUse,
+                logs: bufferedLogs
+              };
+              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)
+                });
+              }
+
+              const response = await fetch(`http://localhost:${port}/chromedebug/associate-logs`, {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(requestBody)
+              });
+
+              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);
+                success = true;
+
+                // Fetch the updated session data with logs from server
+                try {
+                  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`);
+
+                    // 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');
+                  } else {
+                    console.error(`[LOG-ASSOC-DEBUG] Failed to fetch updated session: ${sessionResponse.status}`);
+                    console.error('Failed to fetch updated session data');
+                  }
+                } catch (fetchError) {
+                  console.error('[LOG-ASSOC-DEBUG] Error fetching updated session:', fetchError);
+                  console.error('Error fetching updated session:', fetchError);
+                }
+
+                break;
+              } else {
+                // Log the actual error response
+                const errorBody = await response.text();
+                lastErrorDetails = {
+                  port,
+                  status: response.status,
+                  statusText: response.statusText,
+                  body: errorBody,
+                  attempt: retryCount + 1
+                };
+                console.error(`[LOG-ASSOC-DEBUG] ❌ Port ${port} failed with ${response.status}:`, errorBody);
+                try {
+                  const errorJson = JSON.parse(errorBody);
+                  console.error(`[LOG-ASSOC-DEBUG] Error details:`, errorJson);
+                } catch (e) {
+                  // Not JSON, already logged as text
+                }
+              }
+            } catch (e) {
+              lastErrorDetails = {
+                port,
+                error: e.message,
+                attempt: retryCount + 1
+              };
+              console.error(`[LOG-ASSOC-DEBUG] ❌ Port ${port} exception:`, e);
+              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})...`);
+              await new Promise(resolve => setTimeout(resolve, 1000));
+            }
+          }
+        } catch (error) {
+          console.error('[LOG-ASSOC-DEBUG] Outer error:', error);
+          console.error('Error associating logs:', error);
+          retryCount++;
+          if (retryCount < maxRetries) {
+            await new Promise(resolve => setTimeout(resolve, 1000));
+          }
+        }
+      }
+
+      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);
+      }
+
+      if (!success) {
+        console.error('Failed to associate logs after all retries');
+
+        // Build detailed error message for notification
+        let errorDetails = `Failed to send ${bufferedLogs.length} console logs to server.`;
+        if (lastErrorDetails) {
+          if (lastErrorDetails.status === 400) {
+            errorDetails += ` Server error: ${lastErrorDetails.body}`;
+          } else if (lastErrorDetails.status) {
+            errorDetails += ` HTTP ${lastErrorDetails.status}: ${lastErrorDetails.statusText}`;
+          } else if (lastErrorDetails.error) {
+            errorDetails += ` Error: ${lastErrorDetails.error}`;
+          }
+        }
+
+        // Show user notification about log association failure
+        chrome.notifications.create({
+          type: 'basic',
+          iconUrl: 'icon.png',
+          title: 'Chrome Debug - Log Association Failed',
+          message: `${errorDetails} Recording saved but logs may be missing. Check console for details.`,
+          priority: 1
+        });
+      }
+    } else {
+      // No logs were captured during the session
+      console.warn('[Recording] No console logs were captured during this session');
+      console.warn('[Recording] Possible reasons:');
+      console.warn('  - Page had no console output during recording');
+      console.warn('  - Console interception failed (check restricted pages like chrome://)');
+      console.warn('  - LogBuffer initialization or content script injection failed');
+
+      // Show user notification about no logs captured
+      chrome.notifications.create({
+        type: 'basic',
+        iconUrl: 'icon.png',
+        title: 'Chrome Debug - No Console Logs Captured',
+        message: 'Recording completed but no console logs were captured. This may be expected if the page had no console activity.',
+        priority: 0
+      });
+    }
+    
+    // Save screen interactions to database
+    if (screenInteractions.length > 0) {
+      console.log('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)
+        });
+
+        let lastError = null;
+        for (const port of CONFIG_PORTS) {
+          try {
+            // Test JSON serialization before sending
+            let serializedBody;
+            try {
+              // data is already { interactions: screenInteractions } from caller
+              serializedBody = JSON.stringify(data);
+              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}`);
+            }
+
+            const response = await fetch(`http://localhost:${port}/chromedebug/screen-interactions/${context.sessionId}`, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json'
+              },
+              body: serializedBody
+            });
+
+            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}`);
+              }
+              return { success: true, result: { saved: true } };
+            } else {
+              throw new Error(`HTTP ${response.status}: Failed to save screen interactions to port ${port}`);
+            }
+          } catch (error) {
+            lastError = error;
+            // Silent during discovery - port attempts are expected to fail until we find the right one
+          }
+        }
+
+        // Only log error when ALL ports fail
+        console.error('[ErrorHandling] Screen interactions save failed on all configured ports:', lastError);
+        throw new Error('All server ports failed for screen interactions save');
+      };
+
+      const saveResult = await handleSaveAttempt(
+        saveScreenInteractions,
+        { interactions: screenInteractions },
+        { operation: 'screen_interactions_save', sessionId: sessionData.sessionId }
+      );
+
+      if (saveResult.success) {
+        console.log('Screen interactions saved successfully with comprehensive error handling');
+      } else {
+        console.error('[ErrorHandling] Failed to save screen interactions after comprehensive error handling');
+      }
+    }
+    
+    // Stop session via session manager if available
+    if (sessionManager && currentSession?.sessionId === sessionData.sessionId && currentOwnerId) {
+      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}`);
+        } else {
+          console.warn('Failed to stop session via session manager:', stopResult.error?.message);
+        }
+      } catch (error) {
+        console.error('Error stopping session via session manager:', error);
+      }
+
+      // Clear session cache
+      currentSession = null;
+      currentOwnerId = null;
+    }
+
+    // Update legacy recording state (will be removed when migration is complete)
+    isCurrentlyRecording = false;
+    recordingTabId = null;
+    currentRecordingSessionId = null;
+    frameCounter.delete(sessionData.sessionId); // Clean up frame counter
+    screenInteractions = []; // Clear interactions
+    
+    // Update storage
+    chrome.storage.local.set({ 
+      recordingActive: false, 
+      recordingStartTime: null,
+      recordingTabId: null
+    });
+    
+    // Update badge
+    chrome.action.setBadgeText({ text: '' });
+    chrome.action.setBadgeBackgroundColor({ color: '#4688F1' });
+    
+    // Notify user with session info
+    const portInfo = recordingServerPort ? ` - Server Port: ${recordingServerPort}` : '';
+    chrome.notifications.create({
+      type: 'basic',
+      iconUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
+      title: 'Frame Capture Complete',
+      message: `Session ID: ${sessionData.sessionId} (${sessionData.totalFrames} frames)${portInfo}`,
+      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 content script to hide recording indicator
+    if (tabIdToNotify) {
+      chrome.tabs.sendMessage(tabIdToNotify, {
+        action: 'recordingSessionComplete',
+        sessionId: sessionData.sessionId,
+        totalFrames: sessionData.totalFrames
+      }).catch(() => {});
+    }
+    
+    // Close offscreen document
+    await closeOffscreenDocument();
+    
+  } catch (error) {
+    console.error('Error handling frame capture completion:', error);
+  }
+}