@dynamicu/chromedebug-mcp 2.6.7 → 2.7.0

package/chrome-extension/background.js

@@ -8,13 +8,129 @@ importScripts('pako.min.js');
 importScripts('data-buffer.js');
 importScripts('upload-manager.js');
 importScripts('chrome-session-manager.js');
-importScripts('firebase-config.js');
-importScripts('license-helper.js');
+importScripts('console-interception-library.js'); // Shared console interception library
 importScripts('browser-recording-manager.js');
 
 const CONFIG_PORTS = CHROMEDEBUG_CONFIG.ports;
 const DISCOVERY_TIMEOUT = CHROMEDEBUG_CONFIG.discoveryTimeout;
 
+// ============================================================
+// FREE TIER USAGE TRACKING (Local Storage - No Firebase)
+// ============================================================
+// Daily limit: 5 recordings per day
+// Resets at midnight local time
+// Tracks both workflow and screen recordings
+// ============================================================
+
+const FREE_TIER_DAILY_LIMIT = 5;
+const USAGE_STORAGE_KEY = 'chromedebug_daily_usage';
+
+/**
+ * Check if this is the PRO version
+ */
+function isProVersion() {
+  const manifest = chrome.runtime.getManifest();
+  return manifest.name.includes('PRO');
+}
+
+/**
+ * Get today's date string in local timezone (YYYY-MM-DD)
+ */
+function getTodayDateString() {
+  const now = new Date();
+  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
+}
+
+/**
+ * Get current usage for today
+ * @returns {Promise<{count: number, date: string, limit: number}>}
+ */
+async function getUsageToday() {
+  // PRO version: unlimited
+  if (isProVersion()) {
+    return { count: 0, date: getTodayDateString(), limit: Infinity, isPro: true };
+  }
+
+  const result = await chrome.storage.local.get(USAGE_STORAGE_KEY);
+  const usage = result[USAGE_STORAGE_KEY] || { count: 0, date: '' };
+  const today = getTodayDateString();
+
+  // Reset if new day
+  if (usage.date !== today) {
+    return { count: 0, date: today, limit: FREE_TIER_DAILY_LIMIT };
+  }
+
+  return { count: usage.count, date: today, limit: FREE_TIER_DAILY_LIMIT };
+}
+
+/**
+ * Check if user can start a new recording
+ * @returns {Promise<{allowed: boolean, count: number, limit: number, message?: string}>}
+ */
+async function checkUsageBeforeRecording() {
+  const usage = await getUsageToday();
+
+  if (usage.isPro) {
+    return { allowed: true, count: 0, limit: Infinity, isPro: true };
+  }
+
+  if (usage.count >= usage.limit) {
+    return {
+      allowed: false,
+      count: usage.count,
+      limit: usage.limit,
+      message: `Daily limit reached (${usage.count}/${usage.limit}). Upgrade to Pro for unlimited recordings.`
+    };
+  }
+
+  return { allowed: true, count: usage.count, limit: usage.limit };
+}
+
+/**
+ * Increment usage count after successful recording
+ * @returns {Promise<{success: boolean, count: number, limit: number}>}
+ */
+async function incrementUsageAfterRecording() {
+  // PRO version: skip tracking
+  if (isProVersion()) {
+    console.log('[Usage] PRO version - skipping usage tracking');
+    return { success: true, count: 0, limit: Infinity, isPro: true };
+  }
+
+  const today = getTodayDateString();
+  const result = await chrome.storage.local.get(USAGE_STORAGE_KEY);
+  const usage = result[USAGE_STORAGE_KEY] || { count: 0, date: '' };
+
+  // Reset if new day, then increment
+  const newCount = (usage.date === today) ? usage.count + 1 : 1;
+
+  await chrome.storage.local.set({
+    [USAGE_STORAGE_KEY]: { count: newCount, date: today }
+  });
+
+  console.log(`[Usage] Recording tracked: ${newCount}/${FREE_TIER_DAILY_LIMIT} today`);
+
+  return { success: true, count: newCount, limit: FREE_TIER_DAILY_LIMIT };
+}
+
+// Console interception configuration for screen recording
+const SCREEN_RECORDING_CONSOLE_CONFIG = {
+  overrideFlagName: '__chromePilotConsoleOverridden',
+  originalConsoleName: '__chromePilotOriginalConsole',
+  relayFlagName: '__chromePilotConsoleRelay',
+  messageType: 'chrome-debug-console-log',
+  backgroundAction: 'consoleLog'
+};
+
+// Console interception configuration for workflow recording
+const WORKFLOW_RECORDING_CONSOLE_CONFIG = {
+  overrideFlagName: '__chromePilotWorkflowConsoleOverridden',
+  originalConsoleName: '__chromePilotWorkflowOriginalConsole',
+  relayFlagName: '__chromePilotWorkflowConsoleRelay',
+  messageType: 'chrome-debug-workflow-console-log',
+  backgroundAction: 'workflowConsoleLog'
+};
+
 // Frame queue for handling validation race conditions
 // v2.1.2: Prevents frame loss when lease renewal hasn't propagated yet
 const pendingFrameQueue = new Map(); // sessionId -> array of frame batches
@@ -481,6 +597,162 @@ class LogTabBuffer {
   }
 }
 
+/**
+ * WorkflowLogBuffer - Race-safe log buffer for workflow recording
+ *
+ * Mirrors LogTabBuffer but uses workflow-specific storage keys (`workflow_${tabId}`).
+ * This prevents race conditions when multiple logs arrive rapidly during workflow recording.
+ *
+ * Technical Debt Note: This class duplicates LogTabBuffer logic. Future refactoring
+ * could make LogTabBuffer accept a configurable storage key prefix to eliminate duplication.
+ */
+class WorkflowLogBuffer {
+  constructor(tabId) {
+    this.tabId = tabId;
+    this.buffer = [];
+    this.processing = false;
+    this.processingQueue = [];
+    this.totalLogsAdded = 0;
+    this.totalLogsFlushed = 0;
+    this.lastFlushTime = 0;
+    this.storageKey = `workflow_${tabId}`;
+  }
+
+  // Add log to buffer with queuing to prevent race conditions
+  async addLog(logEntry) {
+    return new Promise((resolve, reject) => {
+      this.processingQueue.push({
+        type: 'add',
+        logEntry,
+        resolve,
+        reject
+      });
+
+      // Process queue if not already processing
+      if (!this.processing) {
+        this.processQueue();
+      }
+    });
+  }
+
+  // Flush buffer to Chrome storage
+  async flush() {
+    return new Promise((resolve, reject) => {
+      this.processingQueue.push({
+        type: 'flush',
+        resolve,
+        reject
+      });
+
+      // Process queue if not already processing
+      if (!this.processing) {
+        this.processQueue();
+      }
+    });
+  }
+
+  // Sequential processing of queue to prevent race conditions
+  async processQueue() {
+    if (this.processing) {
+      return; // Already processing
+    }
+
+    this.processing = true;
+
+    try {
+      while (this.processingQueue.length > 0) {
+        const operation = this.processingQueue.shift();
+
+        try {
+          if (operation.type === 'add') {
+            this.buffer.push(operation.logEntry);
+            this.totalLogsAdded++;
+
+            // Auto-flush if buffer gets too large
+            if (this.buffer.length >= 100) {
+              await this.performFlush();
+            }
+
+            operation.resolve();
+          } else if (operation.type === 'flush') {
+            await this.performFlush();
+            operation.resolve();
+          }
+        } catch (error) {
+          operation.reject(error);
+        }
+      }
+    } finally {
+      this.processing = false;
+    }
+  }
+
+  // Actual flush operation to Chrome storage
+  async performFlush() {
+    if (this.buffer.length === 0) {
+      return; // Nothing to flush
+    }
+
+    try {
+      // Read current logs from storage
+      const result = await chrome.storage.session.get(this.storageKey);
+      const existingLogs = result[this.storageKey] || [];
+
+      // Append new logs
+      const updatedLogs = [...existingLogs, ...this.buffer];
+
+      // Check storage size limit
+      const estimatedSize = JSON.stringify(updatedLogs).length;
+      if (estimatedSize > 500000) { // ~500KB limit
+        const beforeCount = updatedLogs.length;
+        const retentionPercentage = 0.95;
+        const afterCount = Math.floor(updatedLogs.length * retentionPercentage);
+        console.warn(`[WorkflowLogBuffer] Storage size limit approached for tab ${this.tabId}, truncating from ${beforeCount} to ${afterCount} logs`);
+        const recentLogs = updatedLogs.slice(-afterCount);
+        await chrome.storage.session.set({ [this.storageKey]: recentLogs });
+      } else {
+        await chrome.storage.session.set({ [this.storageKey]: updatedLogs });
+      }
+
+      this.totalLogsFlushed += this.buffer.length;
+      console.log(`[WorkflowLogBuffer] Flushed ${this.buffer.length} logs for tab ${this.tabId} (total: ${this.totalLogsFlushed})`);
+
+      // Clear the buffer
+      this.buffer = [];
+      this.lastFlushTime = Date.now();
+
+    } catch (error) {
+      console.error(`[WorkflowLogBuffer] Failed to flush logs for tab ${this.tabId}:`, error);
+      throw error;
+    }
+  }
+
+  // Get buffer statistics
+  getStats() {
+    return {
+      bufferedLogs: this.buffer.length,
+      totalAdded: this.totalLogsAdded,
+      totalFlushed: this.totalLogsFlushed,
+      processing: this.processing,
+      queueLength: this.processingQueue.length,
+      lastFlushTime: this.lastFlushTime
+    };
+  }
+
+  // Clean up buffer when recording stops
+  async cleanup() {
+    try {
+      // Flush any remaining logs
+      if (this.buffer.length > 0) {
+        await this.performFlush();
+      }
+      console.log(`[WorkflowLogBuffer] Cleaned up buffer for tab ${this.tabId}`);
+    } catch (error) {
+      console.error(`[WorkflowLogBuffer] Error during cleanup for tab ${this.tabId}:`, error);
+    }
+  }
+}
+
 // Initialize data buffer and upload manager
 let dataBuffer = null;
 let uploadManager = null;
@@ -655,10 +927,14 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     'restoreFromPoint',
     'getWebSocketPort',
     'startRecording',
+    'stopRecording',
+    'openFrameEditor',
     'checkConnection',
     'workflowConsoleLog',  // v2.0.8: handle workflow console logs
     'workflowAction',      // v2.0.8: handle workflow actions
-    'renewLease'           // v2.1.2: session manager lease renewal for frame capture
+    'renewLease',          // v2.1.2: session manager lease renewal for frame capture
+    'frameSessionComplete', // Frame recording completion notification
+    'recordingStopped'     // Recording stopped notification for popup refresh
   ];
   
   if (handledByOtherListener.includes(messageType)) {
@@ -704,7 +980,27 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
         sendResponse({ status: 'error', message: error.message });
       }
       break;
-    
+
+    case 'getUsage':
+      // Get current usage count for popup display
+      getUsageToday().then(usage => {
+        sendResponse({ success: true, ...usage });
+      }).catch(error => {
+        console.error('[Usage] Failed to get usage:', error);
+        sendResponse({ success: false, error: error.message });
+      });
+      return true; // Async response
+
+    case 'checkUsageLimit':
+      // Check if user can start a new recording
+      checkUsageBeforeRecording().then(result => {
+        sendResponse(result);
+      }).catch(error => {
+        console.error('[Usage] Failed to check usage limit:', error);
+        sendResponse({ allowed: true, error: error.message }); // Fail-open
+      });
+      return true; // Async response
+
     case 'UPLOAD_BATCH':
       // Add events to the background's DataBuffer for upload
       if (message.events && message.recordingId) {
@@ -1051,96 +1347,12 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
   }
 });
 
-// Auto-activate PRO license on startup if activation file exists
-async function checkAndActivateLicense() {
-  try {
-    console.log('[License Auto-Activation] Checking for activation file...');
-
-    // Try to fetch the activation file from the extension directory
-    const activationUrl = chrome.runtime.getURL('license-activation.json');
-    const response = await fetch(activationUrl);
-
-    if (!response.ok) {
-      console.log('[License Auto-Activation] No activation file found - using normal license flow');
-      return;
-    }
-
-    const activationData = await response.json();
-    console.log('[License Auto-Activation] Found activation file:', {
-      tier: activationData.tier,
-      activated_at: activationData.activated_at
-    });
-
-    // Check if license is already cached and valid
-    const cached = await chrome.storage.local.get('chromedebug_license_cache');
-    if (cached.chromedebug_license_cache?.valid && cached.chromedebug_license_cache?.tier === 'pro') {
-      console.log('[License Auto-Activation] License already activated and cached');
-      return;
-    }
-
-    // Activate the license
-    const licenseKey = activationData.license_key;
-    console.log('[License Auto-Activation] Activating license...');
-
-    // Call LemonSqueezy activation via Firebase Cloud Function
-    const instanceId = crypto.randomUUID();
-    await chrome.storage.local.set({
-      'chromedebug_instance_id': instanceId,
-      'ls_instance_id': instanceId,
-      'ls_license_key': licenseKey
-    });
-
-    const activationResponse = await fetch(`${FUNCTIONS_URL}/activateLicense`, {
-      method: 'POST',
-      headers: {'Content-Type': 'application/json'},
-      body: JSON.stringify({
-        licenseKey,
-        instanceId,
-        instanceName: `ChromeDebug-${navigator.userAgent.match(/Chrome\/(\d+)/)?.[1] || 'Unknown'}`
-      })
-    });
-
-    if (!activationResponse.ok) {
-      throw new Error(`Activation failed: HTTP ${activationResponse.status}`);
-    }
-
-    const activationResult = await activationResponse.json();
-    console.log('[License Auto-Activation] Activation result:', activationResult);
-
-    if (activationResult.activated || activationResult.valid) {
-      // Cache the license status
-      const licenseCache = {
-        valid: true,
-        tier: 'pro',
-        licenseKey: licenseKey.substring(0, 8) + '...',
-        cachedAt: Date.now(),
-        graceUntil: Date.now() + (30 * 24 * 60 * 60 * 1000) // 30 days
-      };
-
-      await chrome.storage.local.set({
-        'chromedebug_license_cache': licenseCache
-      });
-
-      console.log('[License Auto-Activation] ✓ PRO license activated successfully!');
-      console.log('[License Auto-Activation] Cached license status:', licenseCache);
-    } else {
-      console.error('[License Auto-Activation] Activation returned invalid status:', activationResult);
-    }
-
-  } catch (error) {
-    // Don't block extension startup on activation errors
-    console.error('[License Auto-Activation] Failed to auto-activate license:', error);
-    console.log('[License Auto-Activation] Extension will continue with normal license flow');
-  }
-}
+// License checking removed - using separate Chrome Web Store listings for FREE and PRO
 
 // Session recovery on startup - handle any stuck recordings from previous session
 chrome.runtime.onStartup.addListener(async () => {
   console.log('[Background] Extension startup detected - checking for stuck sessions');
 
-  // Check for PRO license auto-activation first
-  await checkAndActivateLicense();
-
   if (sessionManager) {
     try {
       // Use existing recovery method from session manager
@@ -1154,12 +1366,9 @@ chrome.runtime.onStartup.addListener(async () => {
   }
 });
 
-// Extension install/update - also check for license activation
+// Extension install/update
 chrome.runtime.onInstalled.addListener(async (details) => {
   console.log('[Background] Extension installed/updated:', details.reason);
-
-  // Check for PRO license auto-activation on install/update
-  await checkAndActivateLicense();
 });
 
 // Listen for tab updates to handle restore points
@@ -1257,6 +1466,43 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   }
 });
 
+// Defensive cleanup when tabs are closed
+chrome.tabs.onRemoved.addListener((tabId, removeInfo) => {
+  // Clean up any workflow recording state for closed tabs
+  if (workflowRecordingTabs.has(tabId)) {
+    console.log(`[Workflow] Tab ${tabId} closed during recording, cleaning up`);
+    workflowRecordingTabs.delete(tabId);
+    workflowIncludeLogs.delete(tabId);
+    workflowScreenshotSettings.delete(tabId);
+    workflowSessionNames.delete(tabId);
+
+    // Clean up WorkflowLogBuffer
+    const buffer = workflowLogBuffers.get(tabId);
+    if (buffer) {
+      buffer.cleanup().then(() => {
+        workflowLogBuffers.delete(tabId);
+        console.log(`[Workflow] Cleaned up WorkflowLogBuffer for closed tab ${tabId}`);
+      }).catch(err => {
+        console.error(`[Workflow] Error cleaning up buffer for closed tab ${tabId}:`, err);
+        workflowLogBuffers.delete(tabId);
+      });
+    }
+
+    // Remove session storage
+    chrome.storage.session.remove(`workflow_${tabId}`).catch(err => {
+      console.error(`[Workflow] Error removing session storage for closed tab ${tabId}:`, err);
+    });
+
+    // Notify popup that recording has stopped (tab was closed)
+    chrome.storage.local.set({
+      workflowRecording: false,
+      workflowStartTime: null
+    }).catch(err => {
+      console.error(`[Workflow] Error updating storage for closed tab ${tabId}:`, err);
+    });
+  }
+});
+
 // Session Manager for robust recording state management
 let sessionManager = null;
 let currentSession = null; // Cache current session state
@@ -1399,7 +1645,7 @@ let workflowRecordingTabs = new Map(); // Map of tabId to recording state
 let workflowIncludeLogs = new Map(); // Map of tabId to includeLogsInExport setting
 let workflowScreenshotSettings = new Map(); // Map of tabId to screenshot settings
 let workflowSessionNames = new Map(); // Map of tabId to session name
-let workflowUserIds = new Map(); // Map of tabId to userId for license tracking
+let workflowLogBuffers = new Map(); // Map of tabId to WorkflowLogBuffer instance
 
 //=============================================================================
 // COMPREHENSIVE ERROR HANDLING SYSTEM
@@ -1875,7 +2121,7 @@ async function downloadBackupData() {
 
           chrome.downloads.download({
             url: url,
-            filename: `chrome-pilot-backup-${Date.now()}.json`
+            filename: `chrome-debug-backup-${Date.now()}.json`
           });
 
           console.log('[ErrorHandling] Backup data download initiated');
@@ -2015,8 +2261,13 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   }
   
   if (request.action === 'stopRecording') {
-    stopRecording().then(() => {
-      sendResponse({ success: true });
+    stopRecording().then(async (result) => {
+      // Track usage for FREE tier after successful screen recording
+      if (result.success) {
+        const usageResult = await incrementUsageAfterRecording();
+        result.usage = usageResult; // Include updated usage in response
+      }
+      sendResponse(result); // Pass through { success: true, sessionId: ..., usage: ... }
     }).catch((error) => {
       console.error('Error stopping recording:', error);
       sendResponse({ success: false, error: error.message });
@@ -2024,6 +2275,23 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     return true;
   }
 
+  if (request.action === 'openFrameEditor') {
+    // Content scripts can't create tabs, so handle it here
+    const sessionId = request.sessionId;
+    const type = request.type; // 'workflow' or undefined for screen recordings
+    const editorUrl = type === 'workflow'
+      ? chrome.runtime.getURL(`pro/frame-editor.html?sessionId=${sessionId}&type=workflow`)
+      : chrome.runtime.getURL(`pro/frame-editor.html?sessionId=${sessionId}`);
+
+    chrome.tabs.create({ url: editorUrl }).then(() => {
+      sendResponse({ success: true });
+    }).catch((error) => {
+      console.error('Error opening frame editor:', error);
+      sendResponse({ success: false, error: error.message });
+    });
+    return true;
+  }
+
   // Get quota information for browser-only mode
   if (request.action === 'getQuotaInfo') {
     getQuotaInfo().then((quotaInfo) => {
@@ -2217,20 +2485,6 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     return true;
   }
 
-  // License check handler for workflow recording
-  if (request.action === 'checkLicenseForWorkflow') {
-    console.log('[License] popup.js requesting license check for workflow recording');
-    LicenseHelper.checkLicenseBeforeRecording().then((licenseCheck) => {
-      console.log('[License] License check result for popup:', licenseCheck);
-      sendResponse(licenseCheck);
-    }).catch((error) => {
-      console.error('[License] Error checking license:', error);
-      // Fail-open: allow recording on error
-      sendResponse({ allowed: true, error: error.message });
-    });
-    return true;
-  }
-
   // Workflow recording handlers
   if (request.action === 'startWorkflowRecording') {
     console.log('Starting workflow recording for tab:', request.tabId);
@@ -2249,9 +2503,17 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   }
   
   if (request.action === 'stopWorkflowRecording') {
-    console.log('Stopping workflow recording for tab:', request.tabId);
-    stopWorkflowRecording(request.tabId).then((workflow) => {
-      sendResponse({ success: true, workflow: workflow });
+    const tabId = request.tabId || sender.tab?.id;
+    console.log('Stopping workflow recording for tab:', tabId);
+    // stopWorkflowRecording already returns { success: true, workflow: {...}, savedToServer: bool }
+    // so we pass it through directly - don't double-wrap!
+    stopWorkflowRecording(tabId).then(async (result) => {
+      // Track usage for FREE tier after successful recording
+      if (result.success) {
+        const usageResult = await incrementUsageAfterRecording();
+        result.usage = usageResult; // Include updated usage in response
+      }
+      sendResponse(result);
     }).catch((error) => {
       console.error('Error stopping workflow recording:', error);
       sendResponse({ success: false, error: error.message });
@@ -2356,18 +2618,19 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     }
   }
   
-  // Buffer workflow console logs
+  // Buffer workflow console logs using race-safe WorkflowLogBuffer
   if (request.action === 'workflowConsoleLog' && sender.tab) {
     const tabId = sender.tab.id;
     if (workflowRecordingTabs.has(tabId) && workflowIncludeLogs.get(tabId)) {
-      // Store logs in session storage for workflow recording
-      chrome.storage.session.get(`workflow_${tabId}`).then(result => {
-        const logs = result[`workflow_${tabId}`] || [];
-        logs.push(request.log);
-        chrome.storage.session.set({ [`workflow_${tabId}`]: logs });
-      }).catch(err => {
-        console.error('Error buffering workflow log:', err);
-      });
+      const buffer = workflowLogBuffers.get(tabId);
+      if (buffer) {
+        // Use race-safe buffer to prevent read-modify-write race conditions
+        buffer.addLog(request.log).catch(err => {
+          console.error('[WorkflowLogBuffer] Error adding log:', err);
+        });
+      } else {
+        console.warn(`[Workflow] No buffer found for tab ${tabId}, log dropped`);
+      }
     }
   }
   
@@ -2742,31 +3005,10 @@ async function getQuotaInfo() {
 
 async function startRecording(tabId, settings = {}) {
   try {
-    // STEP 1: Detect server mode before starting
+    // Detect server mode before starting
     await detectServerMode();
     console.log(`[Recording] Mode: ${serverMode}`);
 
-    // STEP 2: Check license and usage limits BEFORE recording
-    console.log('[License] Checking license before recording...');
-    const licenseCheck = await LicenseHelper.checkLicenseBeforeRecording();
-    console.log('[License] License check result:', licenseCheck);
-
-    if (!licenseCheck.allowed) {
-      // Show notification to user
-      chrome.notifications.create({
-        type: 'basic',
-        iconUrl: chrome.runtime.getURL('icon48.png'),
-        title: 'Recording Limit Reached',
-        message: licenseCheck.message || 'Upgrade to Pro for unlimited recordings.',
-        priority: 2
-      });
-
-      throw new Error(licenseCheck.message || 'Recording not allowed');
-    }
-
-    // Store userId for later usage tracking
-    const userId = licenseCheck.userId;
-
     // Check if session manager is available
     if (!sessionManager) {
       throw new Error('Session manager not initialized');
@@ -2965,16 +3207,23 @@ async function stopRecording() {
     // Check if session manager is available
     if (!sessionManager) {
       console.warn('Session manager not available, stopping recording anyway');
-      return;
+      return { success: false, error: 'Session manager not available' };
     }
 
     // Check if currently recording via session manager
     const currentlyRecording = await isCurrentlyRecordingAsync();
     if (!currentlyRecording) {
       console.log('No active recording session to stop');
-      return;
+      return { success: false, error: 'No active recording' };
     }
 
+    // Store sessionId before clearing it
+    const stoppedSessionId = currentSession?.sessionId;
+
+    // Capture frame count and duration for the response
+    let recordedFrameCount = 0;
+    let recordedDuration = 0;
+
     // Stop recording with session manager
     if (currentSession?.sessionId && currentOwnerId) {
       const stopResult = await sessionManager.stopRecording(currentSession.sessionId, currentOwnerId);
@@ -2982,18 +3231,15 @@ async function stopRecording() {
         console.error('Failed to stop session:', stopResult.error?.message);
         // Continue with cleanup anyway
       } else {
-        console.log(`Recording stopped. Duration: ${stopResult.sessionDuration}ms, Frames: ${stopResult.frameCount}`);
+        recordedFrameCount = stopResult.frameCount || 0;
+        recordedDuration = stopResult.sessionDuration || 0;
+        console.log(`Recording stopped. Duration: ${recordedDuration}ms, Frames: ${recordedFrameCount}`);
 
         // Finalize browser-only recording if in browser-only mode
         if (serverMode === 'browser-only' && browserRecordingManager) {
           console.log('[Browser-Only] Finalizing browser recording in IndexedDB');
           await browserRecordingManager.stopRecording(currentSession.sessionId);
         }
-
-        // 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);
       }
     }
 
@@ -3023,6 +3269,29 @@ async function stopRecording() {
       target: 'offscreen'
     });
 
+    // CRITICAL: Store recordingTabId BEFORE clearing it (for cleanup)
+    const previousRecordingTabId = recordingTabId;
+    console.log('[Background] previousRecordingTabId:', previousRecordingTabId, 'stoppedSessionId:', stoppedSessionId);
+
+    // CRITICAL FIX: Send stop-screen-capture-tracking message to recording tab WITH sessionId
+    // so it can show the completion UI
+    if (previousRecordingTabId && stoppedSessionId) {
+      try {
+        console.log('[Background] Sending recording-complete-show-ui message to tab:', previousRecordingTabId, 'with sessionId:', stoppedSessionId);
+        await chrome.tabs.sendMessage(previousRecordingTabId, {
+          type: 'recording-complete-show-ui',
+          sessionId: stoppedSessionId
+        }).catch((err) => {
+          console.log('[Background] Could not send completion UI message to recording tab:', err);
+        });
+        console.log('[Background] Successfully sent recording-complete-show-ui message');
+      } catch (error) {
+        console.error('[Background] Failed to send completion UI message:', error);
+      }
+    } else {
+      console.log('[Background] NOT sending recording-complete-show-ui - missing previousRecordingTabId or stoppedSessionId');
+    }
+
     // CRITICAL FIX: Send stop-screen-capture-tracking message to ALL content scripts
     try {
       const tabs = await chrome.tabs.query({});
@@ -3043,12 +3312,22 @@ async function stopRecording() {
       console.error('[Background] Failed to send cleanup messages to content scripts:', error);
     }
 
+    // CRITICAL FIX: Restore original console methods and remove event listeners
+    if (previousRecordingTabId) {
+      try {
+        console.log('[Background] Stopping console log capture for tab:', previousRecordingTabId);
+        await stopCapturingLogs(previousRecordingTabId);
+      } catch (cleanupError) {
+        console.error('[Background] Failed to cleanup console interceptor:', cleanupError);
+        // Continue with stop process even if cleanup fails
+      }
+    }
+
     // Clear session cache
     currentSession = null;
     currentOwnerId = null;
 
     // Update legacy state for backward compatibility (will be removed)
-    const previousRecordingTabId = recordingTabId; // Store for logBuffer cleanup
     isCurrentlyRecording = false;
     recordingTabId = null;
     currentRecordingSessionId = null;
@@ -3058,11 +3337,56 @@ async function stopRecording() {
       logBuffer.clearTab(previousRecordingTabId);
     }
 
+    // CRITICAL: Clear pending frame queue to prevent infinite retry loop
+    if (stoppedSessionId && pendingFrameQueue.has(stoppedSessionId)) {
+      console.log(`[FrameQueue] Clearing ${pendingFrameQueue.get(stoppedSessionId).length} pending frames for stopped session ${stoppedSessionId}`);
+      pendingFrameQueue.delete(stoppedSessionId);
+    }
+
     console.log('Stop message sent to offscreen document');
+
+    // Notify popup to refresh recordings list
+    chrome.runtime.sendMessage({
+      action: 'recordingStopped',
+      sessionId: stoppedSessionId
+    }).catch(() => {
+      // Popup might not be open, that's okay
+      console.log('[Background] Popup not available to notify of recording stop');
+    });
+
+    // Format duration as human-readable string (e.g., "1m 30s" or "45s")
+    const formatDurationForDisplay = (ms) => {
+      const seconds = Math.floor(ms / 1000);
+      if (seconds < 60) {
+        return `${seconds}s`;
+      }
+      const minutes = Math.floor(seconds / 60);
+      const remainingSeconds = seconds % 60;
+      return remainingSeconds > 0 ? `${minutes}m ${remainingSeconds}s` : `${minutes}m`;
+    };
+
+    // Return success with sessionId, frameCount and duration for popup display
+    return {
+      success: true,
+      sessionId: stoppedSessionId,
+      frameCount: recordedFrameCount,
+      duration: formatDurationForDisplay(recordedDuration)
+    };
   } catch (error) {
     console.error('Error in stopRecording:', error);
     // Clear session cache even on error
     const errorRecordingTabId = recordingTabId; // Store for cleanup
+
+    // CRITICAL FIX: Clean up console interceptor even on error
+    if (errorRecordingTabId) {
+      try {
+        console.log('[Background] Emergency cleanup of console interceptor for tab:', errorRecordingTabId);
+        await stopCapturingLogs(errorRecordingTabId);
+      } catch (cleanupError) {
+        console.error('[Background] Failed to cleanup console interceptor during error handling:', cleanupError);
+      }
+    }
+
     currentSession = null;
     currentOwnerId = null;
     isCurrentlyRecording = false;
@@ -3081,204 +3405,16 @@ async function stopRecording() {
 
 
 // Capture console logs from the recording tab
+// REFACTORED: Now uses shared console-interception-library.js
 async function startCapturingLogs(tabId) {
-  // Check if this tab allows content script injection
-  const tab = await chrome.tabs.get(tabId);
-  if (!tab.url || tab.url.startsWith('chrome://') || tab.url.startsWith('chrome-extension://') || tab.url.startsWith('moz-extension://')) {
-    console.log('Cannot inject console logger into restricted URL:', tab.url);
-    console.warn('WARNING: Console logs cannot be captured on restricted pages (chrome://, chrome-extension://, etc.)');
-    console.warn('To capture console logs, please navigate to a regular web page before recording.');
-    return false;
-  }
-  
-  // First inject the main world console interceptor
-  try {
-    const results = await chrome.scripting.executeScript({
-      target: { tabId: tabId },
-      world: 'MAIN',
-      func: () => {
-        // Check if we've already overridden console methods
-        if (window.__chromePilotConsoleOverridden) {
-          console.log('[Chrome Debug] Console already overridden, skipping');
-          return 'already_installed';
-        }
-        window.__chromePilotConsoleOverridden = true;
-        console.log('[Chrome Debug] Installing console interceptor');
-      
-      // Override console methods to capture logs - complete coverage
-      const originalLog = console.log;
-      const originalError = console.error;
-      const originalWarn = console.warn;
-      const originalInfo = console.info;
-      const originalDebug = console.debug;
-      const originalTrace = console.trace;
-      const originalTable = console.table;
-      const originalDir = console.dir;
-      const originalGroup = console.group;
-      const originalGroupEnd = console.groupEnd;
-      const originalTime = console.time;
-      const originalTimeEnd = console.timeEnd;
-      const originalCount = console.count;
-      
-      const sendLog = (level, args) => {
-        try {
-          // Pre-serialize arguments to strings to avoid structured clone errors
-          const serializedArgs = args.map(arg => {
-            try {
-              if (arg === null) return 'null';
-              if (arg === undefined) return 'undefined';
-              if (typeof arg === 'function') return '[Function: ' + (arg.name || 'anonymous') + ']';
-              if (arg instanceof Element) return '[DOM Element: ' + arg.tagName + ']';
-              if (typeof arg === 'object') {
-                // Try to stringify, but limit depth to avoid circular references
-                let stringified = JSON.stringify(arg, null, 2);
-                
-                // Check if this looks like a base64 image and truncate it
-                if (stringified.includes('data:image/') && stringified.length > 1000) {
-                  const match = stringified.match(/data:image\/([^;]+);base64,(.{0,100})/);
-                  if (match) {
-                    return `[Base64 Image: ${match[1]}, ${stringified.length} bytes total, truncated...]`;
-                  }
-                }
-                
-                // Truncate any extremely large strings
-                const maxLength = 5000;
-                if (stringified.length > maxLength) {
-                  return stringified.substring(0, maxLength) + `... [TRUNCATED: ${stringified.length} total bytes]`;
-                }
-                
-                return stringified;
-              }
-              
-              // Also check for base64 strings directly
-              const strValue = String(arg);
-              if (strValue.includes('data:image/') && strValue.length > 1000) {
-                const match = strValue.match(/data:image\/([^;]+);base64,(.{0,100})/);
-                if (match) {
-                  return `[Base64 Image: ${match[1]}, ${strValue.length} bytes total, truncated...]`;
-                }
-              }
-              
-              // Truncate any extremely large strings
-              if (strValue.length > 5000) {
-                return strValue.substring(0, 5000) + `... [TRUNCATED: ${strValue.length} total bytes]`;
-              }
-              
-              return strValue;
-            } catch (e) {
-              return '[Object: could not serialize]';
-            }
-          });
-          
-          // Post message to content script
-          window.postMessage({
-            type: 'chrome-pilot-console-log',
-            log: {
-              level,
-              message: serializedArgs.join(' '),
-              timestamp: Date.now()
-            }
-          }, '*');
-        } catch (e) {
-          // Ignore errors when sending logs
-        }
-      };
-      
-      console.log = (...args) => {
-        sendLog('log', args);
-        originalLog.apply(console, args);
-      };
-      
-      console.error = (...args) => {
-        sendLog('error', args);
-        originalError.apply(console, args);
-      };
-      
-      console.warn = (...args) => {
-        sendLog('warn', args);
-        originalWarn.apply(console, args);
-      };
-      
-      console.info = (...args) => {
-        sendLog('info', args);
-        originalInfo.apply(console, args);
-      };
-      
-      console.debug = (...args) => {
-        sendLog('debug', args);
-        originalDebug.apply(console, args);
-      };
-      
-      console.trace = (...args) => {
-        sendLog('trace', args);
-        originalTrace.apply(console, args);
-      };
-      
-      console.table = (...args) => {
-        sendLog('table', args);
-        originalTable.apply(console, args);
-      };
-      
-      console.dir = (...args) => {
-        sendLog('dir', args);
-        originalDir.apply(console, args);
-      };
-      
-      console.group = (...args) => {
-        sendLog('group', args);
-        originalGroup.apply(console, args);
-      };
-      
-      console.groupEnd = (...args) => {
-        sendLog('groupEnd', args);
-        originalGroupEnd.apply(console, args);
-      };
-      
-      console.time = (...args) => {
-        sendLog('time', args);
-        originalTime.apply(console, args);
-      };
-      
-      console.timeEnd = (...args) => {
-        sendLog('timeEnd', args);
-        originalTimeEnd.apply(console, args);
-      };
-      
-      console.count = (...args) => {
-        sendLog('count', args);
-        originalCount.apply(console, args);
-      };
-
-      return 'console_installed';
-    }
-    });
-
-    console.log('[Console Injection] MAIN world script injected successfully:', results);
-
-    // Then inject a content script to relay messages from main world to background
-    await chrome.scripting.executeScript({
-      target: { tabId: tabId },
-      func: () => {
-        // Listen for messages from main world
-        window.addEventListener('message', (event) => {
-          if (event.data && event.data.type === 'chrome-pilot-console-log') {
-            // Forward to background script
-            chrome.runtime.sendMessage({
-              action: 'consoleLog',
-              log: event.data.log
-            });
-          }
-        });
-      }
-    });
+  console.log('[Screen Recording] Starting console interception using shared library');
+  return await self.ConsoleInterceptionLibrary.startConsoleInterception(tabId, SCREEN_RECORDING_CONSOLE_CONFIG);
+}
 
-    console.log('[Console Injection] Content script relay injected successfully');
-    return true; // Successfully started capturing logs
-  } catch (error) {
-    console.error('[Console Injection] Failed to inject console interceptor:', error);
-    console.error('[Console Injection] Error details:', error.message, error.stack);
-    return false; // Failed to inject console interceptor
-  }
+// REFACTORED: Now uses shared console-interception-library.js via proper namespace
+async function stopCapturingLogs(tabId) {
+  console.log('[Screen Recording] Stopping console interception using shared library');
+  return await self.ConsoleInterceptionLibrary.stopConsoleInterception(tabId, SCREEN_RECORDING_CONSOLE_CONFIG);
 }
 
 // Workflow Recording Functions
@@ -3286,29 +3422,6 @@ async function startWorkflowRecording(tabId, includeLogsInExport, sessionName =
   try {
     console.log('Starting workflow recording for tab:', tabId);
 
-    // STEP 1: Check license and usage limits BEFORE recording (same pattern as startRecording)
-    console.log('[License] Checking license before workflow recording...');
-    const licenseCheck = await LicenseHelper.checkLicenseBeforeRecording();
-    console.log('[License] License check result:', licenseCheck);
-
-    if (!licenseCheck.allowed) {
-      // Show notification to user (same pattern as screen recording)
-      chrome.notifications.create({
-        type: 'basic',
-        iconUrl: chrome.runtime.getURL('icon128.png'),
-        title: 'Recording Limit Reached',
-        message: licenseCheck.message || 'Daily limit reached. Upgrade to Pro for unlimited workflow recordings.',
-        buttons: [{ title: 'Upgrade to Pro' }],
-        priority: 2
-      });
-
-      throw new Error(licenseCheck.message || 'Workflow recording not allowed');
-    }
-
-    // Store userId for later usage tracking
-    const userId = licenseCheck.userId;
-    workflowUserIds.set(tabId, userId);
-
     // Check if this tab allows content script injection
     const tab = await chrome.tabs.get(tabId);
     if (!tab.url || tab.url.startsWith('chrome://') || tab.url.startsWith('chrome-extension://') || tab.url.startsWith('moz-extension://')) {
@@ -3326,107 +3439,18 @@ async function startWorkflowRecording(tabId, includeLogsInExport, sessionName =
     const workflowId = `workflow_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
     await chrome.storage.local.set({ currentWorkflowId: workflowId });
     
-    // Clear any existing logs for this tab
+    // Clear any existing logs for this tab and initialize race-safe buffer
     await chrome.storage.session.set({ [`workflow_${tabId}`]: [] });
-    
-    // Inject main world console interceptor (similar to frame recording)
-    await chrome.scripting.executeScript({
-      target: { tabId: tabId },
-      world: 'MAIN',
-      func: () => {
-        // Check if already injected
-        if (window.__chromePilotWorkflowConsoleOverridden) {
-          return;
-        }
-        window.__chromePilotWorkflowConsoleOverridden = true;
-        
-        // Override console methods to capture logs
-        const originalLog = console.log;
-        const originalError = console.error;
-        const originalWarn = console.warn;
-        const originalInfo = console.info;
-        
-        const sendLog = (level, args) => {
-          try {
-            // Pre-serialize arguments to strings to avoid structured clone errors
-            const serializedArgs = args.map(arg => {
-              try {
-                if (arg === null) return 'null';
-                if (arg === undefined) return 'undefined';
-                if (typeof arg === 'function') return '[Function: ' + (arg.name || 'anonymous') + ']';
-                if (arg instanceof Element) return '[DOM Element: ' + arg.tagName + ']';
-                if (typeof arg === 'object') {
-                  // Try to stringify, but limit depth to avoid circular references
-                  return JSON.stringify(arg, null, 2);
-                }
-                return String(arg);
-              } catch (e) {
-                return '[Object: could not serialize]';
-              }
-            });
-            
-            // Post message to content script
-            window.postMessage({
-              type: 'chrome-pilot-workflow-console-log',
-              log: {
-                level,
-                message: serializedArgs.join(' '),
-                timestamp: Date.now()
-              }
-            }, '*');
-          } catch (e) {
-            // Ignore errors when sending logs
-          }
-        };
-        
-        console.log = (...args) => {
-          sendLog('log', args);
-          originalLog.apply(console, args);
-        };
-        
-        console.error = (...args) => {
-          sendLog('error', args);
-          originalError.apply(console, args);
-        };
-        
-        console.warn = (...args) => {
-          sendLog('warn', args);
-          originalWarn.apply(console, args);
-        };
-        
-        console.info = (...args) => {
-          sendLog('info', args);
-          originalInfo.apply(console, args);
-        };
-        
-        // Also capture window errors
-        window.addEventListener('error', (event) => {
-          sendLog('exception', [`${event.message} at ${event.filename}:${event.lineno}:${event.colno}`]);
-        });
-        
-        window.addEventListener('unhandledrejection', (event) => {
-          sendLog('exception', [`Unhandled Promise Rejection: ${event.reason}`]);
-        });
-      }
-    });
-    
-    // Inject content script to relay messages and handle workflow recording
-    await chrome.scripting.executeScript({
-      target: { tabId: tabId },
-      func: (includeLogsInExport) => {
-        // Listen for console log messages from main world
-        window.addEventListener('message', (event) => {
-          if (event.data && event.data.type === 'chrome-pilot-workflow-console-log') {
-            // Forward to background script
-            chrome.runtime.sendMessage({
-              action: 'workflowConsoleLog',
-              log: event.data.log
-            });
-          }
-        });
-      },
-      args: [includeLogsInExport]
-    });
+
+    // Initialize WorkflowLogBuffer for race-safe log handling
+    if (includeLogsInExport) {
+      const buffer = new WorkflowLogBuffer(tabId);
+      workflowLogBuffers.set(tabId, buffer);
+      console.log(`[Workflow] Initialized WorkflowLogBuffer for tab ${tabId}`);
+    }
+
+    // REFACTORED: Use shared console interception library via proper namespace (replaces 150+ lines of duplicate code)
+    await self.ConsoleInterceptionLibrary.startConsoleInterception(tabId, WORKFLOW_RECORDING_CONSOLE_CONFIG);
     
     // Ensure content script is injected
     try {
@@ -3444,9 +3468,11 @@ async function startWorkflowRecording(tabId, includeLogsInExport, sessionName =
     }
     
     // Tell the content script to start recording
+    // Include tabId so content script can use it when stopping recording
     await chrome.tabs.sendMessage(tabId, {
       action: 'startWorkflowRecording',
-      screenshotSettings: screenshotSettings
+      screenshotSettings: screenshotSettings,
+      tabId: tabId
     });
     
     console.log('Workflow recording started successfully');
@@ -3465,15 +3491,25 @@ async function stopWorkflowRecording(tabId) {
       throw new Error('No workflow recording active for this tab');
     }
     
-    // Get workflow from content script
+    // Get workflow from content script using a different action to avoid circular dependency
+    // (mini menu also sends 'stopWorkflowRecording' to background, creating confusion)
     const response = await chrome.tabs.sendMessage(tabId, {
-      action: 'stopWorkflowRecording'
+      action: 'getWorkflowData'
     });
-    
+
     if (!response || !response.success) {
       throw new Error('Failed to get workflow from content script');
     }
-    
+
+    // CRITICAL FIX: Restore original console methods and remove event listeners
+    try {
+      console.log('[Workflow] Stopping console log capture for tab:', tabId);
+      await stopCapturingWorkflowLogs(tabId);
+    } catch (cleanupError) {
+      console.error('[Workflow] Failed to cleanup console interceptor:', cleanupError);
+      // Continue with stop process even if cleanup fails
+    }
+
     // Handle both old format (array) and new format (object with actions and functionTraces)
     let workflowData = response.workflow || [];
     let workflow = Array.isArray(workflowData) ? workflowData : (workflowData.actions || []);
@@ -3494,22 +3530,38 @@ async function stopWorkflowRecording(tabId) {
       });
     });
     
-    // If logs should be included, get them from session storage
+    // If logs should be included, flush buffer and get them from session storage
     if (workflowIncludeLogs.get(tabId)) {
+      // CRITICAL: Flush any buffered logs before retrieval to ensure all logs are captured
+      const buffer = workflowLogBuffers.get(tabId);
+      if (buffer) {
+        await buffer.flush();
+        console.log(`[Workflow] Flushed buffer before retrieval, stats:`, buffer.getStats());
+      }
+
       const result = await chrome.storage.session.get(`workflow_${tabId}`);
       const logs = result[`workflow_${tabId}`] || [];
       
-      // Associate logs with workflow actions
+      // Associate logs with workflow actions using NON-OVERLAPPING windows
+      // Each log appears in exactly ONE action to avoid duplicates
       workflow = workflow.map((action, index) => {
-        // Find logs that occurred around this action
+        // Calculate non-overlapping time window:
+        // - Each action owns logs from ITS timestamp until the NEXT action's timestamp
+        // - First action also includes 500ms before it
+        // - Last action includes 5000ms after it
+        const windowStart = index === 0
+          ? action.timestamp - 500   // First action: include 500ms before
+          : action.timestamp;         // Other actions: start at this action's timestamp
+
+        const windowEnd = index < workflow.length - 1
+          ? workflow[index + 1].timestamp  // Until next action's timestamp
+          : action.timestamp + 5000;        // Last action: 5000ms after
+
+        // Use >= for start and < for end to ensure non-overlapping windows
         const actionLogs = logs.filter(log => {
-          // Get time window
-          const prevActionTime = index > 0 ? workflow[index - 1].timestamp : action.timestamp - 500;
-          const nextActionTime = index < workflow.length - 1 ? workflow[index + 1].timestamp : action.timestamp + 5000;
-          
-          return log.timestamp > prevActionTime && log.timestamp < nextActionTime;
+          return log.timestamp >= windowStart && log.timestamp < windowEnd;
         });
-        
+
         if (actionLogs.length > 0) {
           return { ...action, logs: actionLogs };
         }
@@ -3521,26 +3573,44 @@ async function stopWorkflowRecording(tabId) {
     const sessionName = workflowSessionNames.get(tabId);
     const screenshotSettings = workflowScreenshotSettings.get(tabId);
     const includeLogs = workflowIncludeLogs.get(tabId) || false;
-    const userId = workflowUserIds.get(tabId); // Get userId for usage tracking
 
     // Clean up
     workflowRecordingTabs.delete(tabId);
     workflowIncludeLogs.delete(tabId);
     workflowScreenshotSettings.delete(tabId);
     workflowSessionNames.delete(tabId);
-    workflowUserIds.delete(tabId); // Clean up userId tracking
+
+    // Clean up WorkflowLogBuffer
+    const bufferToCleanup = workflowLogBuffers.get(tabId);
+    if (bufferToCleanup) {
+      await bufferToCleanup.cleanup();
+      workflowLogBuffers.delete(tabId);
+      console.log(`[Workflow] Cleaned up WorkflowLogBuffer for tab ${tabId}`);
+    }
+
     await chrome.storage.session.remove(`workflow_${tabId}`);
-    
+
+    // Notify popup and other extension components that recording has stopped
+    // This is critical for popup UI sync when stopping from mini-menu
+    await chrome.storage.local.set({
+      workflowRecording: false,
+      workflowStartTime: null
+    });
+
     console.log('Workflow recording stopped, returning workflow:', workflow);
     
     // Try to save to server
     try {
       const serverPorts = CONFIG_PORTS.slice(0, 5); // Use first 5 configured ports for workflow recording
       let serverResult = null;
-      
+
       // Get current URL and title
       const tab = await chrome.tabs.get(tabId);
-      const sessionId = `workflow_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+
+      // Retrieve the workflow ID that was generated at start
+      const storedData = await chrome.storage.local.get(['currentWorkflowId']);
+      const sessionId = storedData.currentWorkflowId || `workflow_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+      console.log('[Workflow] Using sessionId for save:', sessionId);
       
       for (const port of serverPorts) {
         try {
@@ -3584,14 +3654,6 @@ async function stopWorkflowRecording(tabId) {
           if (response.ok) {
             serverResult = await response.json();
             console.log(`[Workflow] Successfully saved to server on port ${port}`, serverResult);
-
-            // STEP 2: Track usage AFTER successful workflow recording completion (same pattern as stopRecording)
-            if (userId) {
-              console.log('[License] Tracking usage after workflow recording completion...');
-              const usageResult = await LicenseHelper.trackUsageAfterRecording(userId);
-              console.log('[License] Usage tracking result:', usageResult);
-            }
-
             break;
           } else {
             console.log(`[Workflow] Failed on port ${port}: ${response.status} ${response.statusText}`);
@@ -3604,10 +3666,13 @@ async function stopWorkflowRecording(tabId) {
       }
       
       if (serverResult) {
+        // Clean up currentWorkflowId after successful save
+        await chrome.storage.local.remove(['currentWorkflowId']);
+
         return {
           success: true,
           workflow: {
-            sessionId: sessionId,
+            sessionId: serverResult.workflowId || serverResult.sessionId || sessionId,
             url: tab.url,
             title: tab.title,
             actions: workflow,
@@ -3617,17 +3682,36 @@ async function stopWorkflowRecording(tabId) {
           serverResult: serverResult
         };
       } else {
+        // Server not available - clean up but return local sessionId
+        await chrome.storage.local.remove(['currentWorkflowId']);
+
         return {
           success: true,
-          workflow: workflow,
+          workflow: {
+            sessionId: sessionId,
+            url: tab.url,
+            title: tab.title,
+            actions: workflow,
+            logs: []
+          },
           savedToServer: false
         };
       }
     } catch (error) {
       console.error('Error saving workflow:', error);
+      // Clean up on error too
+      await chrome.storage.local.remove(['currentWorkflowId']);
+
+      // Return structured response even on error
       return {
         success: true,
-        workflow: workflow,
+        workflow: {
+          sessionId: sessionId,
+          url: tab?.url || 'unknown',
+          title: tab?.title || 'Untitled',
+          actions: workflow,
+          logs: []
+        },
         savedToServer: false,
         error: error.message
       };
@@ -3638,6 +3722,13 @@ async function stopWorkflowRecording(tabId) {
   }
 }
 
+// CRITICAL FIX: Stop workflow console log capture and restore original methods
+// REFACTORED: Now uses shared console-interception-library.js via proper namespace
+async function stopCapturingWorkflowLogs(tabId) {
+  console.log('[Workflow Recording] Stopping console interception using shared library');
+  return await self.ConsoleInterceptionLibrary.stopConsoleInterception(tabId, WORKFLOW_RECORDING_CONSOLE_CONFIG);
+}
+
 // Delete recording from server
 async function deleteRecordingFromServer(recordingId, sendResponse) {
   try {
@@ -3697,13 +3788,28 @@ async function retryPendingFrames(sessionId) {
 
   console.log(`[FrameQueue] Retrying ${pending.length} pending frame batches for session ${sessionId}`);
 
+  // Check if this is still the active recording session
+  if (currentSession?.sessionId !== sessionId) {
+    console.log(`[FrameQueue] Session ${sessionId} is no longer active, clearing pending frames`);
+    pendingFrameQueue.delete(sessionId);
+    return;
+  }
+
   // Validate session now
   if (sessionManager) {
     const validationResult = await sessionManager.isSessionValid(sessionId);
     if (!validationResult.valid) {
       console.warn(`[FrameQueue] Session still invalid during retry: ${validationResult.reason}`);
-      // Try again after another delay
-      setTimeout(() => retryPendingFrames(sessionId), 200);
+      // Try again after another delay (max 3 retries)
+      const retryCount = pending[0]?.retryCount || 0;
+      if (retryCount < 3) {
+        // Mark all batches with retry count
+        pending.forEach(batch => batch.retryCount = retryCount + 1);
+        setTimeout(() => retryPendingFrames(sessionId), 200);
+      } else {
+        console.error(`[FrameQueue] Max retries (3) exceeded for session ${sessionId}, clearing queue`);
+        pendingFrameQueue.delete(sessionId);
+      }
       return;
     }
   }