@dynamicu/chromedebug-mcp 2.6.4 → 2.6.7

package/chrome-extension/background.js

@@ -10,6 +10,7 @@ importScripts('upload-manager.js');
 importScripts('chrome-session-manager.js');
 importScripts('firebase-config.js');
 importScripts('license-helper.js');
+importScripts('browser-recording-manager.js');
 
 const CONFIG_PORTS = CHROMEDEBUG_CONFIG.ports;
 const DISCOVERY_TIMEOUT = CHROMEDEBUG_CONFIG.discoveryTimeout;
@@ -35,12 +36,18 @@ class LogStreamer {
   }
 
   async init() {
+    // Skip initialization in browser-only mode
+    if (serverMode === 'browser-only') {
+      console.log('[LogStreamer] Skipping initialization - browser-only mode');
+      return;
+    }
+
     // Test server availability
     await this.checkServerAvailability();
-    
+
     // Start periodic streaming
     this.startPeriodicStreaming();
-    
+
     console.log('[LogStreamer] Initialized with server availability:', this.serverAvailable);
   }
 
@@ -78,10 +85,16 @@ class LogStreamer {
   async addLog(log, sessionId) {
     log.sequence = ++this.sequenceNumber;
     log.timestamp = Date.now();
-    
+
     this.currentSessionId = sessionId;
+
+    // In browser-only mode, skip server streaming (logs stored in LogBuffer)
+    if (serverMode === 'browser-only') {
+      return;
+    }
+
     this.buffer.push(log);
-    
+
     // If buffer is getting full, force immediate stream
     if (this.buffer.length >= this.maxBufferSize) {
       await this.streamLogs();
@@ -89,6 +102,9 @@ class LogStreamer {
   }
 
   async streamLogs() {
+    // Skip streaming in browser-only mode
+    if (serverMode === 'browser-only') return;
+
     if (this.buffer.length === 0 || !this.currentSessionId) return;
 
     // Check if we have waited at least 100ms since last frame capture
@@ -470,6 +486,8 @@ let dataBuffer = null;
 let uploadManager = null;
 let logStreamer = null;
 let logBuffer = null;
+let browserRecordingManager = null;
+let serverMode = 'unknown'; // 'server', 'browser-only', or 'unknown'
 
 // Error handling state and configuration
 // IMPORTANT: These must be declared before initializeServices()
@@ -566,6 +584,15 @@ async function initializeServices() {
       logBuffer = null;
     }
 
+    // Initialize browser recording manager for browser-only mode
+    try {
+      browserRecordingManager = new BrowserRecordingManager(dataBuffer);
+      console.log('[Background] Browser recording manager initialized');
+    } catch (recordingErr) {
+      console.error('[Background] Failed to initialize browser recording manager:', recordingErr);
+      browserRecordingManager = null;
+    }
+
     // Initialize session manager with recovery
     try {
       if (!sessionManager) {
@@ -909,6 +936,112 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
       }
       break;
 
+    case 'getBrowserRecordings':
+      // Get all browser-only recordings from IndexedDB
+      console.log('[Background] getBrowserRecordings - Manager exists:', !!browserRecordingManager);
+      if (browserRecordingManager) {
+        browserRecordingManager.listRecordings().then(recordings => {
+          console.log('[Background] Recordings retrieved from manager:', recordings);
+          sendResponse(recordings);
+        }).catch(error => {
+          console.error('[Background] Failed to get browser recordings:', error);
+          sendResponse([]);
+        });
+        return true; // Async response
+      } else {
+        console.warn('[Background] browserRecordingManager not initialized');
+        sendResponse([]);
+      }
+      break;
+
+    case 'exportBrowserRecording':
+      // Export a browser-only recording
+      if (browserRecordingManager && message.sessionId) {
+        browserRecordingManager.exportRecording(message.sessionId).then(result => {
+          sendResponse({ success: true, data: result });
+        }).catch(error => {
+          console.error('[Background] Failed to export recording:', error);
+          sendResponse({ success: false, error: error.message });
+        });
+        return true; // Async response
+      } else {
+        sendResponse({ success: false, error: 'Manager not available or missing sessionId' });
+      }
+      break;
+
+    case 'deleteBrowserRecording':
+      // Delete a browser-only recording
+      if (browserRecordingManager && message.sessionId) {
+        browserRecordingManager.deleteRecording(message.sessionId).then(() => {
+          sendResponse({ success: true });
+        }).catch(error => {
+          console.error('[Background] Failed to delete recording:', error);
+          sendResponse({ success: false, error: error.message });
+        });
+        return true; // Async response
+      } else {
+        sendResponse({ success: false, error: 'Manager not available or missing sessionId' });
+      }
+      break;
+
+    case 'getBrowserRecordingFrames':
+      // Get frames for a browser-only recording
+      if (dataBuffer && message.sessionId) {
+        dataBuffer.getBrowserFrames(message.sessionId).then(frames => {
+          console.log(`[DEBUG] getBrowserRecordingFrames: Retrieved ${frames.length} frames from IndexedDB`);
+
+          // Debug first frame to see structure
+          if (frames.length > 0) {
+            const firstFrame = frames[0];
+            const debugInfo = {
+              hasScreenshot: !!firstFrame.screenshot,
+              screenshotPrefix: firstFrame.screenshot ? firstFrame.screenshot.substring(0, 30) : 'N/A',
+              hasLogs: !!firstFrame.logs,
+              logsCount: firstFrame.logs ? firstFrame.logs.length : 0,
+              timestamp: firstFrame.timestamp,
+              frameIndex: firstFrame.frameIndex,
+              allKeys: Object.keys(firstFrame)
+            };
+            console.log('[DEBUG] First frame structure:', JSON.stringify(debugInfo, null, 2));
+          }
+
+          // Transform frames to match frame editor's expected structure
+          // Frame editor expects 'imageData' property, but we store as 'screenshot'
+          const transformedFrames = frames.map(frame => ({
+            ...frame,
+            imageData: frame.screenshot // Rename screenshot to imageData
+          }));
+
+          const transformDebug = transformedFrames.length > 0 ? {
+            hasImageData: !!transformedFrames[0].imageData,
+            imageDataPrefix: transformedFrames[0].imageData ? transformedFrames[0].imageData.substring(0, 30) : 'N/A',
+            hasLogs: !!transformedFrames[0].logs,
+            logsCount: transformedFrames[0].logs ? transformedFrames[0].logs.length : 0,
+            allKeys: Object.keys(transformedFrames[0])
+          } : 'No frames';
+          console.log('[DEBUG] Transformed first frame:', JSON.stringify(transformDebug, null, 2));
+
+          sendResponse({ success: true, frames: transformedFrames });
+        }).catch(error => {
+          console.error('[Background] Failed to get browser recording frames:', error);
+          sendResponse({ success: false, error: error.message });
+        });
+        return true; // Async response
+      } else {
+        sendResponse({ success: false, error: 'DataBuffer not available or missing sessionId' });
+      }
+      break;
+
+    case 'getQuotaInfo':
+      // Get storage quota information
+      getQuotaInfo().then(info => {
+        sendResponse(info);
+      }).catch(error => {
+        console.error('[Background] Failed to get quota info:', error);
+        sendResponse({ supported: false });
+      });
+      return true; // Async response
+
     default:
       // Don't warn or respond for messages that should be handled by other listener (v2.0.6)
       // This prevents intercepting workflow recording messages
@@ -1891,6 +2024,17 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     return true;
   }
 
+  // Get quota information for browser-only mode
+  if (request.action === 'getQuotaInfo') {
+    getQuotaInfo().then((quotaInfo) => {
+      sendResponse({ quotaInfo });
+    }).catch((error) => {
+      console.error('Error getting quota info:', error);
+      sendResponse({ quotaInfo: null, error: error.message });
+    });
+    return true;
+  }
+
   // Session manager lease renewal handler
   if (request.action === 'renewLease') {
     console.log('[Background] RENEW LEASE - Session:', request.sessionId, 'Manager exists:', !!sessionManager);
@@ -2322,13 +2466,24 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   
   // Handle workflow screenshot capture
   if (request.action === 'captureWorkflowScreenshot' && sender.tab) {
+    console.log('[SCREENSHOT-DEBUG] background.js - Received captureWorkflowScreenshot message');
     const tabId = sender.tab.id;
     const settings = request.settings || {};
-    
+    console.log('[SCREENSHOT-DEBUG] background.js - tabId:', tabId);
+    console.log('[SCREENSHOT-DEBUG] background.js - settings:', JSON.stringify(settings));
+
     captureTabScreenshot(tabId, settings).then((screenshotData) => {
+      console.log('[SCREENSHOT-DEBUG] background.js - captureTabScreenshot succeeded');
+      console.log('[SCREENSHOT-DEBUG] background.js - screenshotData type:', typeof screenshotData);
+      console.log('[SCREENSHOT-DEBUG] background.js - screenshotData length:', screenshotData?.length);
+      console.log('[SCREENSHOT-DEBUG] background.js - screenshotData preview:', screenshotData?.substring(0, 100));
+      console.log('[SCREENSHOT-DEBUG] background.js - Sending response with success: true');
       sendResponse({ success: true, screenshotData });
     }).catch((error) => {
-      console.error('Error capturing screenshot:', error);
+      console.error('[SCREENSHOT-DEBUG] background.js - captureTabScreenshot FAILED');
+      console.error('[SCREENSHOT-DEBUG] background.js - Error:', error);
+      console.error('[SCREENSHOT-DEBUG] background.js - Error message:', error.message);
+      console.error('[SCREENSHOT-DEBUG] background.js - Error stack:', error.stack);
       sendResponse({ success: false, error: error.message });
     });
     return true;
@@ -2456,14 +2611,34 @@ async function takeStandaloneSnapshot(tabId, note = '') {
 
 // Capture screenshot for workflow recording
 async function captureTabScreenshot(tabId, settings) {
+  console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - ENTRY');
+  console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - tabId:', tabId);
+  console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - settings:', JSON.stringify(settings));
+
   try {
-    const dataUrl = await chrome.tabs.captureVisibleTab(null, {
+    // Get the tab to find its window
+    console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - Getting tab info...');
+    const tab = await chrome.tabs.get(tabId);
+    const windowId = tab.windowId;
+    console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - windowId:', windowId);
+    console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - tab.url:', tab.url);
+
+    const captureOptions = {
       format: settings.format || 'jpeg',
       quality: settings.quality || 30
-    });
-    
+    };
+    console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - captureOptions:', JSON.stringify(captureOptions));
+    console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - Calling chrome.tabs.captureVisibleTab...');
+
+    const dataUrl = await chrome.tabs.captureVisibleTab(windowId, captureOptions);
+
+    console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - captureVisibleTab SUCCESS');
+    console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - dataUrl length:', dataUrl?.length);
+    console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - dataUrl prefix:', dataUrl?.substring(0, 100));
+
     // If resolution is specified, resize the image
     if (settings.maxWidth || settings.maxHeight) {
+      console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - Resizing required, maxWidth:', settings.maxWidth, 'maxHeight:', settings.maxHeight);
       // Create an image element to get dimensions
       const img = new Image();
       const canvas = new OffscreenCanvas(1, 1);
@@ -2503,17 +2678,75 @@ async function captureTabScreenshot(tabId, settings) {
       });
     }
     
+    console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - No resize needed, returning dataUrl');
+    console.log('[SCREENSHOT-DEBUG] captureTabScreenshot - Final dataUrl length:', dataUrl?.length);
     return dataUrl;
   } catch (error) {
-    console.error('Error capturing tab screenshot:', error);
+    console.error('[SCREENSHOT-DEBUG] captureTabScreenshot - EXCEPTION CAUGHT');
+    console.error('[SCREENSHOT-DEBUG] captureTabScreenshot - Error:', error);
+    console.error('[SCREENSHOT-DEBUG] captureTabScreenshot - Error message:', error.message);
+    console.error('[SCREENSHOT-DEBUG] captureTabScreenshot - Error stack:', error.stack);
     throw error;
   }
 }
 
 // Start recording
+// Detect if server is available (server mode vs browser-only mode)
+async function detectServerMode() {
+  console.log('[ServerDetection] Checking server availability...');
+
+  for (const port of CONFIG_PORTS) {
+    try {
+      const response = await Promise.race([
+        fetch(`http://localhost:${port}/health`, {
+          method: 'GET'
+        }),
+        new Promise((_, reject) =>
+          setTimeout(() => reject(new Error('Timeout')), 1000)
+        )
+      ]);
+
+      if (response.ok) {
+        console.log(`[ServerDetection] Server detected on port ${port}`);
+        serverMode = 'server';
+        return 'server';
+      }
+    } catch (error) {
+      // Continue checking other ports
+    }
+  }
+
+  console.log('[ServerDetection] No server detected - using browser-only mode');
+  serverMode = 'browser-only';
+  return 'browser-only';
+}
+
+// Simple quota info utility (replaces over-engineered QuotaMonitor class)
+async function getQuotaInfo() {
+  if (!navigator.storage?.estimate) {
+    return { supported: false };
+  }
+
+  const { usage = 0, quota = 0 } = await navigator.storage.estimate();
+  const percentage = quota > 0 ? usage / quota : 0;
+  const availableMB = Math.round((quota - usage) / (1024 * 1024));
+
+  return {
+    supported: true,
+    percentage,
+    availableMB,
+    usageMB: Math.round(usage / (1024 * 1024)),
+    quotaMB: Math.round(quota / (1024 * 1024))
+  };
+}
+
 async function startRecording(tabId, settings = {}) {
   try {
-    // STEP 1: Check license and usage limits BEFORE recording
+    // STEP 1: 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);
@@ -2602,6 +2835,18 @@ async function startRecording(tabId, settings = {}) {
     const sessionId = currentSession.sessionId;
     const scheduledStartTime = Date.now() + 3000; // Schedule start 3 seconds in future for countdown synchronization
 
+    // STEP 4: Initialize browser-only recording if in browser-only mode
+    if (serverMode === 'browser-only' && browserRecordingManager) {
+      console.log('[Recording] Initializing browser-only recording in IndexedDB');
+      const tab = await chrome.tabs.get(tabId);
+      await browserRecordingManager.startRecording(sessionId, {
+        tabId: tabId,
+        url: tab.url,
+        title: tab.title || settings.sessionName || 'Browser Recording',
+        startTime: scheduledStartTime
+      });
+    }
+
     // Update legacy state for backward compatibility (will be removed)
     recordingTabId = tabId;
     isCurrentlyRecording = true;
@@ -2679,6 +2924,17 @@ async function startRecording(tabId, settings = {}) {
       }
     });
     
+    // STEP 4: Initialize browser recording if in browser-only mode
+    if (serverMode === 'browser-only' && browserRecordingManager) {
+      const tab = await chrome.tabs.get(tabId);
+      await browserRecordingManager.startRecording(sessionId, {
+        tabId,
+        url: tab.url,
+        title: tab.title
+      });
+      console.log('[Recording] Browser recording initialized for session:', sessionId);
+    }
+
     // Send stream ID, session info, and settings to offscreen document for frame capture
     await chrome.runtime.sendMessage({
       type: 'start-frame-capture',
@@ -2688,14 +2944,15 @@ async function startRecording(tabId, settings = {}) {
       sessionId: sessionId,
       ownerId: currentOwnerId,
       scheduledStartTime: scheduledStartTime,
+      mode: serverMode, // Pass mode to offscreen document
       settings: {
         frameRate: settings.frameRate || 1,
-        imageQuality: settings.imageQuality || 30,
+        imageQuality: settings.imageQuality || (serverMode === 'browser-only' ? 15 : 30),
         frameFlash: settings.frameFlash !== false
       }
     });
-    
-    console.log('Recording started');
+
+    console.log('Recording started in', serverMode, 'mode');
   } catch (error) {
     console.error('Error in startRecording:', error);
     throw error;
@@ -2727,6 +2984,12 @@ async function stopRecording() {
       } else {
         console.log(`Recording stopped. Duration: ${stopResult.sessionDuration}ms, Frames: ${stopResult.frameCount}`);
 
+        // 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();
@@ -3215,8 +3478,21 @@ async function stopWorkflowRecording(tabId) {
     let workflowData = response.workflow || [];
     let workflow = Array.isArray(workflowData) ? workflowData : (workflowData.actions || []);
     let functionTraces = Array.isArray(workflowData) ? [] : (workflowData.functionTraces || []);
-    
+
     console.log(`[Background] Received ${workflow.length} actions and ${functionTraces.length} function traces`);
+    console.log('[SCREENSHOT-DEBUG] background.stopWorkflowRecording - Checking actions for screenshot_data');
+
+    const actionsWithScreenshots = workflow.filter(a => a.screenshot_data);
+    console.log('[SCREENSHOT-DEBUG] background.stopWorkflowRecording - Actions WITH screenshot_data:', actionsWithScreenshots.length);
+
+    workflow.forEach((action, index) => {
+      console.log(`[SCREENSHOT-DEBUG] background.stopWorkflowRecording - Action ${index}:`, {
+        type: action.type,
+        hasScreenshotData: !!action.screenshot_data,
+        screenshotDataLength: action.screenshot_data?.length,
+        screenshotPreview: action.screenshot_data?.substring(0, 50)
+      });
+    });
     
     // If logs should be included, get them from session storage
     if (workflowIncludeLogs.get(tabId)) {
@@ -3269,22 +3545,40 @@ async function stopWorkflowRecording(tabId) {
       for (const port of serverPorts) {
         try {
           console.log(`[Workflow] Attempting to save to server on port ${port}...`);
+
+          const payloadData = {
+            sessionId: sessionId,
+            name: sessionName,
+            url: tab.url,
+            title: tab.title,
+            includeLogs: includeLogs,
+            screenshotSettings: screenshotSettings || {},  // v2.0.8 fix: ensure it's an object, not null
+            actions: workflow,
+            logs: includeLogs ? workflow.flatMap(action => action.logs || []) : [],
+            functionTraces: functionTraces // Include function execution traces
+          };
+
+          console.log('[SCREENSHOT-DEBUG] background.stopWorkflowRecording - HTTP POST payload being prepared');
+          console.log('[SCREENSHOT-DEBUG] background.stopWorkflowRecording - Payload actions count:', payloadData.actions.length);
+
+          const payloadActionsWithScreenshots = payloadData.actions.filter(a => a.screenshot_data);
+          console.log('[SCREENSHOT-DEBUG] background.stopWorkflowRecording - Payload actions WITH screenshot_data:', payloadActionsWithScreenshots.length);
+
+          payloadData.actions.forEach((action, index) => {
+            console.log(`[SCREENSHOT-DEBUG] background.stopWorkflowRecording - Payload Action ${index}:`, {
+              type: action.type,
+              hasScreenshotData: !!action.screenshot_data,
+              screenshotDataLength: action.screenshot_data?.length,
+              screenshotPreview: action.screenshot_data?.substring(0, 50)
+            });
+          });
+
           const response = await fetch(`http://localhost:${port}/chromedebug/workflow-recording`, {
             method: 'POST',
             headers: {
               'Content-Type': 'application/json',
             },
-            body: JSON.stringify({
-              sessionId: sessionId,
-              name: sessionName,
-              url: tab.url,
-              title: tab.title,
-              includeLogs: includeLogs,
-              screenshotSettings: screenshotSettings || {},  // v2.0.8 fix: ensure it's an object, not null
-              actions: workflow,
-              logs: includeLogs ? workflow.flatMap(action => action.logs || []) : [],
-              functionTraces: functionTraces // Include function execution traces
-            })
+            body: JSON.stringify(payloadData)
           });
           
           if (response.ok) {
@@ -3432,8 +3726,9 @@ async function handleFrameBatch(batchData, skipValidation = false) {
   try {
     const sessionId = batchData.sessionId;
 
-    // Validate session if session manager is available (unless skipping for retry)
-    if (sessionManager && !skipValidation) {
+    // Skip session validation entirely in browser-only mode
+    // Validate session if session manager is available (unless skipping for retry or in browser-only mode)
+    if (sessionManager && !skipValidation && serverMode !== 'browser-only') {
       const validationResult = await sessionManager.isSessionValid(sessionId);
       if (!validationResult.valid) {
         // DON'T LOSE FRAMES - Queue for retry instead of rejecting
@@ -3537,18 +3832,43 @@ async function handleFrameBatch(batchData, skipValidation = false) {
     }
     
     if (!uploadSuccess) {
-      console.error(`CRITICAL: Failed to upload frame batch to any Chrome Debug server port. Last error: ${lastError}`);
-      console.error(`Session ${batchData.sessionId} frames are only stored in Chrome extension storage and not accessible to Chrome Debug.`);
-      
-      // Store error in chrome storage for user visibility
-      await chrome.storage.local.set({
-        [`upload_error_${batchData.sessionId}`]: {
-          error: lastError,
-          timestamp: Date.now(),
-          sessionId: batchData.sessionId,
-          frameCount: indexedFrames.length
+      console.log(`No server available - checking if browser-only mode`);
+
+      // If in browser-only mode, store frames in IndexedDB
+      if (serverMode === 'browser-only' && browserRecordingManager) {
+        console.log(`[Browser-Only] Storing ${indexedFrames.length} frames in IndexedDB`);
+        // Use the browser recording session ID, not the frame capture session ID
+        const recordingSessionId = currentRecordingSessionId || batchData.sessionId;
+        for (const frame of indexedFrames) {
+          // Validate that critical timestamp data exists
+          if (!frame.absoluteTimestamp) {
+            console.warn(`[Browser-Only] WARNING: Frame ${frame.index} missing absoluteTimestamp - log association will fail`);
+          }
+
+          await browserRecordingManager.addFrame(recordingSessionId, {
+            frameIndex: frame.index,
+            screenshot: frame.imageData || frame.screenshot, // Use imageData from frame capture
+            logs: frame.logs || [],
+            timestamp: frame.timestamp || Date.now(),
+            absoluteTimestamp: frame.absoluteTimestamp // Don't use Date.now() fallback - preserve actual capture time
+          });
         }
-      });
+        console.log(`[Browser-Only] Frames stored successfully in IndexedDB for session ${recordingSessionId}`);
+      } else {
+        // Server mode but no server available - show error
+        console.error(`CRITICAL: Failed to upload frame batch to any Chrome Debug server port. Last error: ${lastError}`);
+        console.error(`Session ${batchData.sessionId} frames are only stored in Chrome extension storage and not accessible to Chrome Debug.`);
+
+        // Store error in chrome storage for user visibility
+        await chrome.storage.local.set({
+          [`upload_error_${batchData.sessionId}`]: {
+            error: lastError,
+            timestamp: Date.now(),
+            sessionId: batchData.sessionId,
+            frameCount: indexedFrames.length
+          }
+        });
+      }
     }
 
     // Notify LogStreamer that frames have been captured and processed
@@ -3671,7 +3991,9 @@ async function handleFrameCaptureComplete(sessionData) {
     await chrome.storage.session.remove(String(tabIdToNotify));
 
     // Send logs to server for association with frames with retry logic
-    if (bufferedLogs.length > 0) {
+    // Skip server communication in browser-only mode (logs already in IndexedDB)
+    if (bufferedLogs.length > 0 && serverMode !== 'browser-only') {
+      console.log(`[Server Mode] Associating ${bufferedLogs.length} logs with server...`);
 
       // Retry logic to handle race conditions
       const maxRetries = 3;
@@ -3849,6 +4171,62 @@ async function handleFrameCaptureComplete(sessionData) {
           priority: 1
         });
       }
+    } else if (bufferedLogs.length > 0 && serverMode === 'browser-only') {
+      // Browser-only mode: Associate logs with frames in IndexedDB
+      console.log(`[Browser-Only] Associating ${bufferedLogs.length} logs with frames in IndexedDB...`);
+
+      try {
+        // Get all frames for this session from IndexedDB
+        const frames = await dataBuffer.getBrowserFrames(sessionIdToUse);
+        console.log(`[Browser-Only] Retrieved ${frames.length} frames from IndexedDB for log association`);
+
+        if (frames.length === 0) {
+          console.warn('[Browser-Only] No frames found - logs cannot be associated');
+        } else {
+          // Associate each log with the appropriate frame based on timestamp
+          // Frames have absoluteTimestamp, logs have timestamp
+
+          for (const log of bufferedLogs) {
+            // Find the frame that this log belongs to (closest frame before the log timestamp)
+            let targetFrame = null;
+            for (let i = 0; i < frames.length; i++) {
+              const frame = frames[i];
+              const frameTime = frame.absoluteTimestamp || frame.timestamp;
+              if (frameTime <= log.timestamp) {
+                targetFrame = frame;
+              } else {
+                break; // Frames are in chronological order
+              }
+            }
+
+            // If no frame found before this log, associate with first frame
+            if (!targetFrame && frames.length > 0) {
+              targetFrame = frames[0];
+            }
+
+            if (targetFrame) {
+              if (!targetFrame.logs) {
+                targetFrame.logs = [];
+              }
+              targetFrame.logs.push(log);
+            }
+          }
+
+          // Update frames in IndexedDB with associated logs
+          let updatedCount = 0;
+          for (const frame of frames) {
+            if (frame.logs && frame.logs.length > 0) {
+              // Update this frame in IndexedDB
+              await dataBuffer.updateBrowserFrame(frame.id, { logs: frame.logs });
+              updatedCount++;
+            }
+          }
+
+          console.log(`[Browser-Only] ✓ Associated logs with ${updatedCount} frames in IndexedDB`);
+        }
+      } catch (error) {
+        console.error('[Browser-Only] Failed to associate logs with frames:', error);
+      }
     } else {
       // No logs were captured during the session
       console.warn('[Recording] No console logs were captured during this session');
@@ -3866,10 +4244,11 @@ async function handleFrameCaptureComplete(sessionData) {
         priority: 0
       });
     }
-    
+
     // Save screen interactions to database
-    if (screenInteractions.length > 0) {
-      console.log('Saving', screenInteractions.length, 'screen interactions to database');
+    // Skip server communication in browser-only mode
+    if (screenInteractions.length > 0 && serverMode !== 'browser-only') {
+      console.log(`[Server Mode] Saving ${screenInteractions.length} screen interactions to database`);
       
       // Use comprehensive error handling for screen interactions save
       const saveScreenInteractions = async (data, context) => {
@@ -3935,8 +4314,11 @@ async function handleFrameCaptureComplete(sessionData) {
       } else {
         console.error('[ErrorHandling] Failed to save screen interactions after comprehensive error handling');
       }
+    } else if (screenInteractions.length > 0 && serverMode === 'browser-only') {
+      // Browser-only mode: screen interactions not needed
+      console.log(`[Browser-Only] ✓ Skipping screen interactions save (browser-only mode)`);
     }
-    
+
     // Stop session via session manager if available
     if (sessionManager && currentSession?.sessionId === sessionData.sessionId && currentOwnerId) {
       try {
@@ -3983,15 +4365,19 @@ async function handleFrameCaptureComplete(sessionData) {
       priority: 2
     });
     
-    // Notify popup if open
-    chrome.runtime.sendMessage({
-      action: 'frameSessionComplete',
-      sessionId: sessionData.sessionId,
-      sessionName: currentSession?.settings?.sessionName || null,
-      totalFrames: sessionData.totalFrames,
-      duration: sessionData.duration,
-      serverPort: recordingServerPort
-    }).catch(() => {});
+    // Notify popup if open (but NOT for browser-only recordings - they're in IndexedDB)
+    if (serverMode !== 'browser-only') {
+      chrome.runtime.sendMessage({
+        action: 'frameSessionComplete',
+        sessionId: sessionData.sessionId,
+        sessionName: currentSession?.settings?.sessionName || null,
+        totalFrames: sessionData.totalFrames,
+        duration: sessionData.duration,
+        serverPort: recordingServerPort
+      }).catch(() => {});
+    } else {
+      console.log('[Browser-Only] Skipping frameSessionComplete message - recording is in IndexedDB');
+    }
     
     // Notify content script to hide recording indicator
     if (tabIdToNotify) {