@dynamicu/chromedebug-mcp 2.6.7 → 2.7.1

package/chrome-extension/pro/frame-editor.js

@@ -0,0 +1,1567 @@
+// Frame Editor Logic
+class FrameEditor {
+  constructor() {
+    this.sessionId = null;
+    this.frames = [];
+    this.selectedFrames = new Set();
+    this.loadedImages = new Map();
+    this.lastClickedIndex = -1;
+    this.isWorkflow = false; // NEW: Track if viewing workflow
+    this.workflowData = null; // NEW: Store workflow data
+
+    this.init();
+  }
+
+  // Helper method to get item count (works for both frames and workflows)
+  getItemCount() {
+    return this.isWorkflow
+      ? (this.workflowData?.actions?.length || 0)
+      : this.frames.length;
+  }
+
+  // Helper method to get items array (works for both frames and workflows)
+  getItems() {
+    return this.isWorkflow
+      ? (this.workflowData?.actions || [])
+      : this.frames;
+  }
+
+  // Get actions to export based on selection
+  // Selection is REQUIRED - returns empty array if nothing selected
+  // Returns array of { action, originalIndex } for proper correlation
+  getActionsToExport() {
+    if (!this.workflowData?.actions) return [];
+    if (this.selectedFrames.size === 0) return []; // Selection required
+
+    // Export only selected actions, preserving original indices
+    const selectedIndices = Array.from(this.selectedFrames).sort((a, b) => a - b);
+    return selectedIndices.map(index => ({
+      action: this.workflowData.actions[index],
+      originalIndex: index
+    }));
+  }
+
+  // Strip screenshot data from action and add file reference instead
+  // This prevents duplicate data (images are saved as separate files)
+  stripScreenshotData(action, originalIndex, hasScreenshot) {
+    const stripped = { ...action };
+
+    // Remove both possible screenshot field names
+    delete stripped.screenshot;
+    delete stripped.screenshot_data;
+
+    // Add reference to external file if screenshot exists
+    if (hasScreenshot) {
+      const paddedIndex = String(originalIndex).padStart(3, '0');
+      stripped.screenshotFile = `screenshots/action_${paddedIndex}.jpg`;
+    }
+
+    return stripped;
+  }
+
+  // Filter logs for exported actions using non-overlapping windows
+  // Same algorithm as getLogsForAction() but for a subset of actions
+  filterLogsForExport(actionsToExport) {
+    if (!this.workflowData?.logs || actionsToExport.length === 0) return [];
+
+    const allActions = this.workflowData.actions;
+    const logs = this.workflowData.logs;
+    const exportedIndices = new Set(actionsToExport.map(a => a.originalIndex));
+
+    // For each exported action, calculate its window and collect logs
+    const includedLogs = [];
+
+    actionsToExport.forEach(({ action, originalIndex }, exportOrder) => {
+      // Window start: 500ms before first action, or this action's timestamp
+      const windowStart = originalIndex === 0
+        ? action.timestamp - 500
+        : action.timestamp;
+
+      // Window end: next action's timestamp, or 5000ms after last action
+      let windowEnd;
+      if (originalIndex < allActions.length - 1) {
+        // Find next action's timestamp
+        windowEnd = allActions[originalIndex + 1].timestamp;
+      } else {
+        // Last action in original recording
+        windowEnd = action.timestamp + 5000;
+      }
+
+      // Collect logs in this window
+      logs.forEach(log => {
+        const logTime = typeof log.timestamp === 'number'
+          ? log.timestamp
+          : new Date(log.timestamp).getTime();
+
+        if (logTime >= windowStart && logTime < windowEnd) {
+          // Only include if not already included (handles edge cases)
+          if (!includedLogs.some(l => l.timestamp === log.timestamp && l.message === log.message)) {
+            includedLogs.push(log);
+          }
+        }
+      });
+    });
+
+    // Sort by timestamp
+    return includedLogs.sort((a, b) => a.timestamp - b.timestamp);
+  }
+
+  // ========== FRAME RECORDING HELPERS ==========
+  // These are separate from workflow helpers because frames have different semantics:
+  // - Frames have logs already attached (no time-window filtering needed)
+  // - Frames use imageData field (not screenshot/screenshot_data)
+  // - Frames are snapshots, not replayable actions
+
+  // Get frames to export based on selection
+  // Selection is REQUIRED - returns empty array if nothing selected
+  getFramesToExport() {
+    if (this.selectedFrames.size === 0) return [];
+
+    // Export only selected frames, preserving original indices
+    const selectedIndices = Array.from(this.selectedFrames).sort((a, b) => a - b);
+    return selectedIndices.map(index => ({
+      frame: this.frames[index],
+      originalIndex: index
+    }));
+  }
+
+  // Strip imageData from frame and add file reference instead
+  // Frames have logs already attached - no filtering needed
+  stripFrameImageData(frame, originalIndex) {
+    const stripped = { ...frame };
+
+    // Remove imageData field (base64 image)
+    delete stripped.imageData;
+
+    // Add reference to external file and frame index for clarity
+    const paddedIndex = String(originalIndex).padStart(3, '0');
+    stripped.screenshotFile = `screenshots/frame_${paddedIndex}.jpg`;
+    stripped.frameIndex = originalIndex;
+
+    return stripped;
+  }
+
+  async init() {
+    // Get session ID and browserOnly flag from URL params
+    const params = new URLSearchParams(window.location.search);
+    this.sessionId = params.get('sessionId');
+    this.browserOnly = params.get('browserOnly') === 'true';
+    this.isWorkflow = params.get('type') === 'workflow'; // NEW: Detect workflow type
+
+    if (!this.sessionId) {
+      // Try to get the most recent recording
+      const result = await chrome.storage.local.get(['recordings']);
+      const recordings = result.recordings || [];
+      if (recordings.length > 0 && recordings[0].isFrameCapture) {
+        this.sessionId = recordings[0].id;
+      }
+    }
+
+    if (!this.sessionId) {
+      this.showEmpty();
+      return;
+    }
+
+    // Load the session data
+    if (this.isWorkflow) {
+      await this.loadWorkflowSession(); // NEW: Load workflow data
+    } else {
+      await this.loadSession();
+    }
+
+    // Setup event listeners
+    this.setupEventListeners();
+
+    // Setup Intersection Observer for lazy loading
+    this.setupLazyLoading();
+  }
+  
+  async loadSession() {
+    try {
+      // If in browser-only mode, load from IndexedDB directly
+      if (this.browserOnly) {
+        // console.log(`[INFO] Frame Editor: Loading browser-only recording from IndexedDB...`);
+        const result = await chrome.runtime.sendMessage({
+          action: 'getBrowserRecordingFrames',
+          sessionId: this.sessionId
+        });
+
+        if (result && result.success && result.frames) {
+          this.frames = result.frames;
+          // console.log(`[INFO] Frame Editor: Loaded ${this.frames.length} frames from IndexedDB`);
+        } else {
+          throw new Error('Failed to load browser-only recording from IndexedDB');
+        }
+
+        // Update UI and render frames - don't try HTTP server
+        this.updateSessionInfo();
+        this.renderFrames();
+
+        // Show the frames container and hide loading
+        document.getElementById('loadingContainer').style.display = 'none';
+        document.getElementById('framesContainer').style.display = 'block';
+        return;
+      }
+
+      // Server mode: Try to fetch from HTTP server first (includes console logs from database)
+      const ports = CHROMEDEBUG_CONFIG?.ports?.slice(0, 5) || [3001, 3000, 3028]; // Use configured ports
+      let found = false;
+
+      // console.log(`[INFO] Frame Editor: Fetching session ${this.sessionId} from HTTP server...`);
+
+      for (const port of ports) {
+        try {
+          const response = await fetch(`http://localhost:${port}/chromedebug/frame-session/${this.sessionId}`);
+          if (response.ok) {
+            const data = await response.json();
+            this.frames = data.frames || [];
+            found = true;
+            // console.log(`[INFO] Frame Editor: Loaded ${this.frames.length} frames from HTTP server on port ${port}`);
+            break;
+          }
+        } catch (e) {
+          // Try next port
+          // console.log(`[DEBUG] Frame Editor: Failed to fetch from port ${port}:`, e.message);
+        }
+      }
+
+      // Fall back to Chrome storage if HTTP server unavailable
+      if (!found) {
+        // console.log(`[INFO] Frame Editor: HTTP server unavailable, falling back to Chrome storage...`);
+        const storageKey = this.sessionId;
+        const result = await chrome.storage.local.get([storageKey]);
+        const sessionData = result[storageKey];
+
+        if (sessionData) {
+          this.frames = sessionData.frames || [];
+          // console.log(`[INFO] Frame Editor: Loaded ${this.frames.length} frames from Chrome storage (logs may not be available)`);
+        } else {
+          throw new Error('Session not found in HTTP server or Chrome storage');
+        }
+      }
+      
+      // Update UI
+      this.updateSessionInfo();
+      this.renderFrames();
+      
+      document.getElementById('loadingContainer').style.display = 'none';
+      document.getElementById('framesContainer').style.display = 'block';
+      
+    } catch (error) {
+      this.showError('Failed to load session: ' + error.message);
+    }
+  }
+
+  // NEW: Load workflow recording data
+  async loadWorkflowSession() {
+    try {
+      const ports = CHROMEDEBUG_CONFIG?.ports?.slice(0, 5) || [3001, 3000, 3028];
+      let found = false;
+
+      // console.log(`[INFO] Frame Editor: Fetching workflow ${this.sessionId} from HTTP server...`);
+
+      for (const port of ports) {
+        try {
+          const response = await fetch(`http://localhost:${port}/chromedebug/workflow-recording/${this.sessionId}`);
+          if (response.ok) {
+            this.workflowData = await response.json();
+            found = true;
+            // console.log(`[INFO] Frame Editor: Loaded workflow with ${this.workflowData.actions?.length || 0} actions from port ${port}`);
+            break;
+          }
+        } catch (e) {
+          // console.log(`[DEBUG] Frame Editor: Failed to fetch workflow from port ${port}:`, e.message);
+        }
+      }
+
+      if (!found) {
+        throw new Error('Workflow recording not found on HTTP server');
+      }
+
+      // Update UI
+      this.updateWorkflowInfo();
+      this.renderWorkflow();
+
+      document.getElementById('loadingContainer').style.display = 'none';
+      document.getElementById('framesContainer').style.display = 'block';
+
+    } catch (error) {
+      this.showError('Failed to load workflow: ' + error.message);
+    }
+  }
+
+  updateSessionInfo() {
+    if (this.isWorkflow) {
+      this.updateWorkflowInfo();
+      return;
+    }
+
+    const infoEl = document.getElementById('sessionInfo');
+    const totalTime = this.frames.length > 0 ?
+      Math.round(this.frames[this.frames.length - 1].timestamp / 1000) : 0;
+
+    infoEl.textContent = `Session: ${this.sessionId} | ${this.frames.length} frames | ${totalTime}s`;
+
+    // Update button text to "Download ZIP" (matches workflow behavior)
+    const saveBtn = document.getElementById('saveEditedBtn');
+    if (saveBtn) {
+      saveBtn.textContent = 'Download ZIP';
+      saveBtn.disabled = true; // Disabled until items are selected
+    }
+  }
+
+  // NEW: Update workflow session info
+  updateWorkflowInfo() {
+    // Update title
+    const titleEl = document.getElementById('editorTitle');
+    if (titleEl) titleEl.textContent = 'Workflow Editor';
+
+    // Update selection type
+    const selectionTypeEl = document.getElementById('selectionType');
+    if (selectionTypeEl) selectionTypeEl.textContent = 'actions';
+
+    const infoEl = document.getElementById('sessionInfo');
+    const actionCount = this.workflowData?.actions?.length || 0;
+    const logCount = this.workflowData?.logs?.length || 0;
+
+    infoEl.textContent = `Workflow: ${this.sessionId} | ${actionCount} actions | ${logCount} console logs`;
+
+    // Update button text for workflow mode
+    const saveBtn = document.getElementById('saveEditedBtn');
+    if (saveBtn) {
+      saveBtn.textContent = 'Download ZIP';
+      saveBtn.disabled = true; // Disabled until items are selected
+    }
+
+    // Hide delete button for workflows (not supported)
+    const deleteBtn = document.getElementById('deleteSelectedBtn');
+    if (deleteBtn) {
+      deleteBtn.style.display = 'none';
+    }
+  }
+  
+  renderFrames() {
+    const container = document.getElementById('framesContainer');
+    container.innerHTML = '';
+
+    this.frames.forEach((frame, index) => {
+      const frameEl = this.createFrameElement(frame, index);
+      container.appendChild(frameEl);
+    });
+  }
+
+  // NEW: Render workflow actions
+  renderWorkflow() {
+    const container = document.getElementById('framesContainer');
+    container.innerHTML = '';
+
+    const actions = this.workflowData?.actions || [];
+    actions.forEach((action, index) => {
+      const actionEl = this.createActionElement(action, index);
+      container.appendChild(actionEl);
+    });
+  }
+
+  createFrameElement(frame, index) {
+    // Debug frame structure
+    if (index === 0) {
+      const debugInfo = {
+        frameIndex: index,
+        hasImageData: !!frame.imageData,
+        imageDataPrefix: frame.imageData ? frame.imageData.substring(0, 30) : 'N/A',
+        hasLogs: !!frame.logs,
+        logsCount: frame.logs ? frame.logs.length : 0,
+        timestamp: frame.timestamp,
+        allKeys: Object.keys(frame)
+      };
+      // console.log('[DEBUG] createFrameElement - First frame:', JSON.stringify(debugInfo, null, 2));
+    }
+
+    const div = document.createElement('div');
+    div.className = 'frame-item';
+    div.dataset.index = index;
+
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.className = 'frame-checkbox';
+    checkbox.checked = this.selectedFrames.has(index);
+    checkbox.addEventListener('change', () => this.toggleFrameSelection(index));
+    checkbox.addEventListener('click', (e) => this.handleCheckboxClick(e, index));
+
+    const thumbnail = document.createElement('div');
+    thumbnail.className = 'frame-thumbnail';
+    thumbnail.dataset.index = index;
+
+    const placeholder = document.createElement('div');
+    placeholder.className = 'frame-placeholder';
+    placeholder.textContent = 'Loading...';
+    thumbnail.appendChild(placeholder);
+
+    const info = document.createElement('div');
+    info.className = 'frame-info';
+
+    const header = document.createElement('div');
+    header.className = 'frame-header';
+
+    const title = document.createElement('div');
+    title.className = 'frame-title';
+    title.textContent = `Frame ${index}`;
+
+    const timestamp = document.createElement('div');
+    timestamp.className = 'frame-timestamp';
+    timestamp.textContent = `${(frame.timestamp / 1000).toFixed(1)}s`;
+
+    header.appendChild(title);
+    header.appendChild(timestamp);
+
+    const logs = document.createElement('div');
+    logs.className = 'frame-logs';
+
+    const logSummary = document.createElement('div');
+    logSummary.className = 'frame-log-summary';
+
+    // Debug log count
+    const logCount = frame.logs ? frame.logs.length : 0;
+    if (index === 0) {
+      // console.log(`[DEBUG] Frame ${index} log count: ${logCount}`);
+    }
+
+    logSummary.innerHTML = `
+      <span>Console Logs</span>
+      <span class="log-count">${logCount}</span>
+      <span>${logCount > 0 ? '▼' : ''}</span>
+    `;
+
+    if (frame.logs && frame.logs.length > 0) {
+      logSummary.style.cursor = 'pointer';
+      logSummary.addEventListener('click', () => this.toggleLogs(index));
+    }
+    
+    logs.appendChild(logSummary);
+    
+    info.appendChild(header);
+    info.appendChild(logs);
+    
+    div.appendChild(checkbox);
+    div.appendChild(thumbnail);
+    div.appendChild(info);
+
+    return div;
+  }
+
+  // NEW: Create action element for workflow
+  createActionElement(action, index) {
+    const div = document.createElement('div');
+    div.className = 'frame-item';
+    div.dataset.index = index;
+
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.className = 'frame-checkbox';
+    checkbox.checked = this.selectedFrames.has(index);
+    checkbox.addEventListener('change', () => this.toggleFrameSelection(index));
+    checkbox.addEventListener('click', (e) => this.handleCheckboxClick(e, index));
+
+    const thumbnail = document.createElement('div');
+    thumbnail.className = 'frame-thumbnail';
+    thumbnail.dataset.index = index;
+
+    // Check if action has screenshot
+    if (action.screenshot) {
+      const placeholder = document.createElement('div');
+      placeholder.className = 'frame-placeholder';
+      placeholder.textContent = 'Loading...';
+      thumbnail.appendChild(placeholder);
+    } else {
+      const placeholder = document.createElement('div');
+      placeholder.className = 'frame-placeholder';
+      placeholder.textContent = 'No screenshot';
+      thumbnail.appendChild(placeholder);
+    }
+
+    const info = document.createElement('div');
+    info.className = 'frame-info';
+
+    const header = document.createElement('div');
+    header.className = 'frame-header';
+
+    const title = document.createElement('div');
+    title.className = 'frame-title';
+
+    // Format action title based on type
+    let actionTitle = `Action ${index}: ${action.type || 'Unknown'}`;
+    if (action.type === 'click' && action.target) {
+      actionTitle += ` on ${action.target}`;
+    } else if (action.type === 'input' && action.target) {
+      actionTitle += ` in ${action.target}`;
+    } else if (action.type === 'navigate') {
+      actionTitle += ` to ${action.url || ''}`;
+    }
+    title.textContent = actionTitle;
+
+    const timestamp = document.createElement('div');
+    timestamp.className = 'frame-timestamp';
+    timestamp.textContent = new Date(action.timestamp).toLocaleTimeString();
+
+    header.appendChild(title);
+    header.appendChild(timestamp);
+
+    // Add action details
+    const actionDetails = document.createElement('div');
+    actionDetails.style.cssText = 'margin-top: 8px; font-size: 13px; color: #666;';
+
+    let detailsHtml = `<strong>Type:</strong> ${action.type || 'N/A'}`;
+    if (action.target) detailsHtml += ` | <strong>Target:</strong> ${action.target}`;
+    if (action.value) detailsHtml += ` | <strong>Value:</strong> ${action.value}`;
+    if (action.url) detailsHtml += ` | <strong>URL:</strong> ${action.url}`;
+
+    actionDetails.innerHTML = detailsHtml;
+
+    // Get logs for this action (logs that occurred between prev/next action timestamps)
+    const actionLogs = this.getLogsForAction(action, index);
+
+    const logs = document.createElement('div');
+    logs.className = 'frame-logs';
+
+    const logSummary = document.createElement('div');
+    logSummary.className = 'frame-log-summary';
+
+    const logCount = actionLogs.length;
+    logSummary.innerHTML = `
+      <span>Console Logs</span>
+      <span class="log-count">${logCount}</span>
+      <span>${logCount > 0 ? '▼' : ''}</span>
+    `;
+
+    if (logCount > 0) {
+      logSummary.style.cursor = 'pointer';
+      logSummary.addEventListener('click', () => this.toggleWorkflowLogs(index, actionLogs));
+    }
+
+    logs.appendChild(logSummary);
+
+    info.appendChild(header);
+    info.appendChild(actionDetails);
+    info.appendChild(logs);
+
+    div.appendChild(checkbox);
+    div.appendChild(thumbnail);
+    div.appendChild(info);
+
+    return div;
+  }
+
+  // Get logs associated with an action using NON-OVERLAPPING time windows
+  // Each log appears in exactly ONE action to avoid duplicates
+  // This mirrors the algorithm in background.js stopWorkflowRecording()
+  getLogsForAction(action, actionIndex) {
+    if (!this.workflowData?.logs || !this.workflowData?.actions) return [];
+
+    const actions = this.workflowData.actions;
+    const logs = this.workflowData.logs;
+
+    // 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 = actionIndex === 0
+      ? action.timestamp - 500   // First action: include 500ms before
+      : action.timestamp;         // Other actions: start at this action's timestamp
+
+    const windowEnd = actionIndex < actions.length - 1
+      ? actions[actionIndex + 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
+    return logs.filter(log => {
+      // Log timestamp should already be a number, but handle string format just in case
+      const logTime = typeof log.timestamp === 'number'
+        ? log.timestamp
+        : new Date(log.timestamp).getTime();
+      return logTime >= windowStart && logTime < windowEnd;
+    });
+  }
+
+  // NEW: Toggle logs for workflow actions
+  toggleWorkflowLogs(index, logs) {
+    const frameItem = document.querySelector(`.frame-item[data-index="${index}"]`);
+    if (!frameItem) return;
+
+    let expanded = frameItem.querySelector('.frame-logs-expanded');
+
+    if (expanded) {
+      expanded.remove();
+      return;
+    }
+
+    expanded = document.createElement('div');
+    expanded.className = 'frame-logs-expanded';
+
+    logs.forEach(log => {
+      const entry = document.createElement('div');
+      entry.className = 'log-entry';
+
+      const level = document.createElement('span');
+      level.className = `log-level ${log.level || 'log'}`;
+      level.textContent = log.level || 'log';
+
+      const time = document.createElement('span');
+      time.className = 'log-time';
+      time.textContent = new Date(log.timestamp).toLocaleTimeString();
+
+      const message = document.createElement('span');
+      message.className = 'log-message';
+      message.textContent = log.message || JSON.stringify(log.args || []);
+
+      entry.appendChild(level);
+      entry.appendChild(time);
+      entry.appendChild(message);
+
+      expanded.appendChild(entry);
+    });
+
+    const logsContainer = frameItem.querySelector('.frame-logs');
+    logsContainer.appendChild(expanded);
+  }
+
+  setupLazyLoading() {
+    const options = {
+      root: null,
+      rootMargin: '100px',
+      threshold: 0.01
+    };
+    
+    this.observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          const index = parseInt(entry.target.dataset.index);
+          this.loadFrameImage(index);
+        }
+      });
+    }, options);
+    
+    // Observe all thumbnails
+    document.querySelectorAll('.frame-thumbnail').forEach(thumbnail => {
+      this.observer.observe(thumbnail);
+    });
+  }
+  
+  async loadFrameImage(index) {
+    // console.log(`[DEBUG] loadFrameImage called for ${this.isWorkflow ? 'action' : 'frame'} ${index}`);
+
+    if (this.loadedImages.has(index)) {
+      // console.log(`[DEBUG] ${this.isWorkflow ? 'Action' : 'Frame'} ${index} already loaded, skipping`);
+      return;
+    }
+
+    // Handle workflow actions
+    if (this.isWorkflow) {
+      const action = this.workflowData?.actions?.[index];
+      if (!action || !action.screenshot) {
+        // console.log(`[DEBUG] Action ${index} has no screenshot`);
+        return;
+      }
+
+      const thumbnail = document.querySelector(`.frame-thumbnail[data-index="${index}"]`);
+      if (!thumbnail) return;
+
+      const img = document.createElement('img');
+      img.src = action.screenshot; // Screenshot should be base64 data URL
+      img.onload = () => {
+        thumbnail.innerHTML = '';
+        thumbnail.appendChild(img);
+        this.loadedImages.set(index, true);
+
+        // Add click handler to open modal (same as screen recordings)
+        thumbnail.addEventListener('click', () => this.openFrameModal(index));
+      };
+      return;
+    }
+
+    // Handle regular frames
+    const frame = this.frames[index];
+    if (!frame) {
+      console.error(`[DEBUG] Frame ${index} not found in this.frames`);
+      return;
+    }
+
+    if (!frame.imageData) {
+      const debugInfo = {
+        hasScreenshot: !!frame.screenshot,
+        screenshotPrefix: frame.screenshot ? frame.screenshot.substring(0, 30) : 'N/A',
+        allKeys: Object.keys(frame),
+        frameIndex: frame.frameIndex,
+        timestamp: frame.timestamp
+      };
+      console.error(`[DEBUG] Frame ${index} has no imageData:`, JSON.stringify(debugInfo, null, 2));
+      return;
+    }
+
+    // console.log(`[DEBUG] Frame ${index} loading image, imageData prefix:`, frame.imageData.substring(0, 50));
+
+    const thumbnail = document.querySelector(`.frame-thumbnail[data-index="${index}"]`);
+    if (!thumbnail) {
+      console.error(`[DEBUG] No thumbnail element found for frame ${index}`);
+      return;
+    }
+
+    const img = document.createElement('img');
+    img.src = frame.imageData;
+
+    img.onerror = (error) => {
+      console.error(`[DEBUG] Failed to load image for frame ${index}:`, error);
+    };
+
+    img.onload = () => {
+      // console.log(`[DEBUG] Image loaded successfully for frame ${index}`);
+      thumbnail.innerHTML = '';
+      thumbnail.appendChild(img);
+      this.loadedImages.set(index, true);
+
+      // Add click handler to open modal
+      thumbnail.addEventListener('click', () => this.openFrameModal(index));
+    };
+  }
+  
+  toggleFrameSelection(index) {
+    const frameEl = document.querySelector(`.frame-item[data-index="${index}"]`);
+    
+    if (this.selectedFrames.has(index)) {
+      this.selectedFrames.delete(index);
+      frameEl.classList.remove('selected');
+    } else {
+      this.selectedFrames.add(index);
+      frameEl.classList.add('selected');
+    }
+    
+    this.updateSelectionInfo();
+  }
+  
+  handleCheckboxClick(event, index) {
+    if (event.shiftKey && this.lastClickedIndex !== -1) {
+      event.preventDefault();
+      const start = Math.min(this.lastClickedIndex, index);
+      const end = Math.max(this.lastClickedIndex, index);
+      
+      for (let i = start; i <= end; i++) {
+        this.selectedFrames.add(i);
+        const frameEl = document.querySelector(`.frame-item[data-index="${i}"]`);
+        const checkbox = frameEl.querySelector('.frame-checkbox');
+        frameEl.classList.add('selected');
+        checkbox.checked = true;
+      }
+      
+      this.updateSelectionInfo();
+    }
+    
+    this.lastClickedIndex = index;
+  }
+  
+  toggleLogs(index) {
+    const frameEl = document.querySelector(`.frame-item[data-index="${index}"]`);
+    const logsContainer = frameEl.querySelector('.frame-logs');
+    
+    const existingExpanded = logsContainer.querySelector('.frame-logs-expanded');
+    if (existingExpanded) {
+      existingExpanded.remove();
+      return;
+    }
+    
+    const frame = this.frames[index];
+    if (!frame.logs || frame.logs.length === 0) return;
+    
+    const expanded = document.createElement('div');
+    expanded.className = 'frame-logs-expanded';
+    
+    frame.logs.forEach(log => {
+      const entry = document.createElement('div');
+      entry.className = 'log-entry';
+      
+      const level = document.createElement('span');
+      level.className = `log-level ${log.level}`;
+      level.textContent = log.level;
+      
+      const time = document.createElement('span');
+      time.className = 'log-time';
+      // Handle both camelCase (relativeTime) and snake_case (relative_time) for compatibility
+      const relativeTime = log.relativeTime || log.relative_time || 0;
+      time.textContent = `${(relativeTime / 1000).toFixed(3)}s`;
+      
+      const message = document.createElement('span');
+      message.className = 'log-message';
+      message.textContent = log.message;
+      
+      entry.appendChild(level);
+      entry.appendChild(time);
+      entry.appendChild(message);
+      expanded.appendChild(entry);
+    });
+    
+    logsContainer.appendChild(expanded);
+  }
+  
+  updateSelectionInfo() {
+    const count = this.selectedFrames.size;
+    const selectionInfo = document.getElementById('selectionInfo');
+    const selectedCount = document.getElementById('selectedCount');
+    const deleteBtn = document.getElementById('deleteSelectedBtn');
+    const saveBtn = document.getElementById('saveEditedBtn');
+
+    if (count > 0) {
+      selectionInfo.style.display = 'block';
+      selectedCount.textContent = count;
+      // Enable Download ZIP when items are selected (both frames and workflows)
+      saveBtn.disabled = false;
+      // Delete only supported for frames, not workflows
+      deleteBtn.disabled = this.isWorkflow;
+    } else {
+      // Nothing selected - disable both buttons
+      selectionInfo.style.display = 'none';
+      deleteBtn.disabled = true;
+      saveBtn.disabled = true; // Must select items to download
+    }
+  }
+  
+  openFrameModal(index) {
+    const modal = document.getElementById('frameModal');
+    const modalTitle = document.getElementById('modalTitle');
+    const modalImage = document.getElementById('modalImage');
+
+    if (this.isWorkflow) {
+      // Handle workflow action
+      const action = this.workflowData?.actions?.[index];
+      if (!action || !action.screenshot) return;
+
+      modalTitle.textContent = `Action ${index} - ${action.type || 'Unknown'}`;
+      modalImage.src = action.screenshot;
+    } else {
+      // Handle regular frame
+      const frame = this.frames[index];
+      if (!frame || !frame.imageData) return;
+
+      modalTitle.textContent = `Frame ${index} - ${(frame.timestamp / 1000).toFixed(1)}s`;
+      modalImage.src = frame.imageData;
+    }
+
+    modal.classList.add('visible');
+
+    // Add keyboard listener for ESC key
+    document.addEventListener('keydown', this.handleModalKeydown);
+  }
+  
+  closeFrameModal() {
+    const modal = document.getElementById('frameModal');
+    modal.classList.remove('visible');
+    
+    // Remove keyboard listener
+    document.removeEventListener('keydown', this.handleModalKeydown);
+  }
+  
+  handleModalKeydown = (event) => {
+    if (event.key === 'Escape') {
+      this.closeFrameModal();
+    }
+  }
+  
+  // Copy text to clipboard with toast notification
+  async copyToClipboard(text, successMessage) {
+    try {
+      await navigator.clipboard.writeText(text);
+      this.showToast(successMessage);
+    } catch (err) {
+      // Fallback for older browsers or permission issues
+      this.showToast('Failed to copy - check permissions');
+    }
+  }
+
+  // Show toast notification
+  showToast(message) {
+    // Remove existing toast if any
+    const existing = document.querySelector('.toast');
+    if (existing) existing.remove();
+
+    const toast = document.createElement('div');
+    toast.className = 'toast';
+    toast.textContent = message;
+    document.body.appendChild(toast);
+
+    // Remove after animation completes
+    setTimeout(() => toast.remove(), 2000);
+  }
+
+  // Generate AI prompt based on recording type
+  generateAIPrompt() {
+    if (this.isWorkflow) {
+      const actionCount = this.workflowData?.actions?.length || 0;
+      const logCount = this.workflowData?.logs?.length || 0;
+      return `Analyze workflow recording: ${this.sessionId}
+- Actions: ${actionCount}, Console Logs: ${logCount}
+- Use MCP tool: get_workflow_recording or get_workflow_summary`;
+    } else {
+      const frameCount = this.frames.length;
+      return `Analyze screen recording: ${this.sessionId}
+- Frames: ${frameCount}
+- Use MCP tool: get_frame_session_info`;
+    }
+  }
+
+  setupEventListeners() {
+    // Copy ID button
+    document.getElementById('copyIdBtn').addEventListener('click', () => {
+      if (this.sessionId) {
+        this.copyToClipboard(this.sessionId, 'Session ID copied!');
+      } else {
+        this.showToast('No session ID available');
+      }
+    });
+
+    // Copy Prompt button
+    document.getElementById('copyPromptBtn').addEventListener('click', () => {
+      if (this.sessionId) {
+        const prompt = this.generateAIPrompt();
+        this.copyToClipboard(prompt, 'Prompt copied!');
+      } else {
+        this.showToast('No session available');
+      }
+    });
+
+    document.getElementById('selectAllBtn').addEventListener('click', () => {
+      const itemCount = this.getItemCount();
+      for (let i = 0; i < itemCount; i++) {
+        this.selectedFrames.add(i);
+        const frameEl = document.querySelector(`.frame-item[data-index="${i}"]`);
+        if (frameEl) {
+          const checkbox = frameEl.querySelector('.frame-checkbox');
+          frameEl.classList.add('selected');
+          if (checkbox) checkbox.checked = true;
+        }
+      }
+      this.updateSelectionInfo();
+    });
+    
+    document.getElementById('selectNoneBtn').addEventListener('click', () => {
+      this.selectedFrames.clear();
+      document.querySelectorAll('.frame-item').forEach(el => {
+        el.classList.remove('selected');
+        el.querySelector('.frame-checkbox').checked = false;
+      });
+      this.updateSelectionInfo();
+    });
+    
+    document.getElementById('invertSelectionBtn').addEventListener('click', () => {
+      const itemCount = this.getItemCount();
+      for (let i = 0; i < itemCount; i++) {
+        if (this.selectedFrames.has(i)) {
+          this.selectedFrames.delete(i);
+        } else {
+          this.selectedFrames.add(i);
+        }
+
+        const frameEl = document.querySelector(`.frame-item[data-index="${i}"]`);
+        if (frameEl) {
+          const checkbox = frameEl.querySelector('.frame-checkbox');
+          frameEl.classList.toggle('selected');
+          if (checkbox) checkbox.checked = !checkbox.checked;
+        }
+      }
+      this.updateSelectionInfo();
+    });
+    
+    document.getElementById('deleteSelectedBtn').addEventListener('click', () => {
+      this.deleteSelectedFrames();
+    });
+    
+    document.getElementById('saveEditedBtn').addEventListener('click', () => {
+      this.saveEditedRecording();
+    });
+    
+    // Modal event listeners
+    document.getElementById('modalClose').addEventListener('click', () => {
+      this.closeFrameModal();
+    });
+    
+    document.getElementById('frameModal').addEventListener('click', (event) => {
+      // Close modal when clicking on overlay (not on modal content)
+      if (event.target.id === 'frameModal') {
+        this.closeFrameModal();
+      }
+    });
+  }
+  
+  async deleteSelectedFrames() {
+    if (this.selectedFrames.size === 0) return;
+    
+    const confirmMsg = `Delete ${this.selectedFrames.size} frame${this.selectedFrames.size > 1 ? 's' : ''}?`;
+    if (!confirm(confirmMsg)) return;
+    
+    // Temporarily disable buttons
+    this.setButtonsEnabled(false);
+    
+    // Show loading state
+    const deleteBtn = document.getElementById('deleteSelectedBtn');
+    deleteBtn.textContent = 'Deleting...';
+    
+    // Remove selected frames
+    const selectedIndices = Array.from(this.selectedFrames).sort((a, b) => b - a);
+    selectedIndices.forEach(index => {
+      const frameEl = document.querySelector(`.frame-item[data-index="${index}"]`);
+      frameEl.remove();
+    });
+    
+    // Update UI
+    this.selectedFrames.clear();
+    this.updateSelectionInfo();
+    
+    // Re-enable buttons
+    this.setButtonsEnabled(true);
+    deleteBtn.textContent = 'Delete Selected';
+    
+    // Check if we need to save immediately or wait for save button
+    if (this.getItemCount() === selectedIndices.length) {
+      this.showEmpty();
+    }
+  }
+
+  async saveEditedRecording() {
+    // Both frame and workflow recordings now use ZIP download
+    if (this.isWorkflow) {
+      this.downloadWorkflowAsZip();
+    } else {
+      this.downloadFramesAsZip();
+    }
+  }
+
+  // Legacy method - kept for reference but no longer used
+  async _legacySaveEditedRecording() {
+    if (this.selectedFrames.size === this.getItemCount()) {
+      alert('Cannot save - all frames are selected for deletion');
+      return;
+    }
+    
+    // Disable buttons and show loading
+    this.setButtonsEnabled(false);
+    const saveBtn = document.getElementById('saveEditedBtn');
+    const originalText = saveBtn.textContent;
+    saveBtn.textContent = 'Saving...';
+    
+    try {
+      // Create new frame array excluding selected frames
+      const editedFrames = this.frames.filter((_, index) => !this.selectedFrames.has(index));
+      
+      // Generate new session ID
+      const newSessionId = `frame_${Date.now()}_edited`;
+      
+      // Create new session object
+      const newSession = {
+        type: 'frame_capture',
+        sessionId: newSessionId,
+        timestamp: Date.now(),
+        frames: editedFrames,
+        originalSessionId: this.sessionId
+      };
+      
+      // Save to storage
+      const storageKey = newSessionId;
+      await chrome.storage.local.set({ [storageKey]: newSession });
+      
+      // Add to recordings list
+      const result = await chrome.storage.local.get(['recordings']);
+      const recordings = result.recordings || [];
+      recordings.unshift({
+        id: newSessionId,
+        timestamp: Date.now(),
+        isFrameCapture: true,
+        edited: true,
+        originalId: this.sessionId
+      });
+      await chrome.storage.local.set({ recordings });
+      
+      // Notify server about the new recording
+      await this.notifyServerOfNewRecording(newSessionId, newSession);
+      
+      // Show success and redirect
+      alert(`Edited recording saved successfully!\nNew session ID: ${newSessionId}`);
+      window.location.href = `frame-editor.html?sessionId=${newSessionId}`;
+      
+    } catch (error) {
+      console.error('Error saving edited recording:', error);
+      alert('Failed to save edited recording: ' + error.message);
+      
+      // Re-enable buttons
+      this.setButtonsEnabled(true);
+      saveBtn.textContent = originalText;
+    }
+  }
+  
+  async notifyServerOfNewRecording(sessionId, sessionData) {
+    const ports = CHROMEDEBUG_CONFIG?.ports?.slice(0, 5) || [3001, 3000, 3028]; // Use configured ports
+    
+    for (const port of ports) {
+      try {
+        const response = await fetch(`http://localhost:${port}/chromedebug/save-edited-session`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            sessionId: sessionId,
+            sessionData: sessionData
+          })
+        });
+        
+        if (response.ok) {
+          // console.log(`Server notified on port ${port}`);
+          break;
+        }
+      } catch (e) {
+        // Try next port
+      }
+    }
+  }
+
+  // Download workflow as ZIP file for sharing
+  // Only exports SELECTED actions - requires items to be selected
+  // Strips base64 image data from JSON since images are saved separately
+  async downloadWorkflowAsZip() {
+    if (!window.JSZip) {
+      alert('JSZip library not loaded. Cannot create ZIP file.');
+      return;
+    }
+
+    // Guard clause: require selection (defense-in-depth, button should be disabled)
+    if (this.selectedFrames.size === 0) {
+      alert('Please select items to download');
+      return;
+    }
+
+    try {
+      const saveBtn = document.getElementById('saveEditedBtn');
+      const originalText = saveBtn.textContent;
+      saveBtn.textContent = 'Creating ZIP...';
+      saveBtn.disabled = true;
+
+      const zip = new JSZip();
+
+      // Get actions to export (respects selection)
+      const actionsToExport = this.getActionsToExport();
+      const isPartialExport = this.selectedFrames.size > 0;
+      const totalActions = this.workflowData?.actions?.length || 0;
+
+      // Create cleaned workflow data with stripped screenshot data
+      const cleanedActions = actionsToExport.map(({ action, originalIndex }) => {
+        const hasScreenshot = !!(action.screenshot || action.screenshot_data);
+        return this.stripScreenshotData(action, originalIndex, hasScreenshot);
+      });
+
+      // Filter logs to only include those for exported actions
+      const filteredLogs = this.filterLogsForExport(actionsToExport);
+
+      // Create export workflow object
+      const exportWorkflowData = {
+        ...this.workflowData,
+        actions: cleanedActions,
+        logs: filteredLogs,
+        exportMetadata: {
+          version: '2.0',
+          format: 'workflow-export',
+          screenshotsExtracted: true,
+          isPartialExport,
+          exportedActionCount: actionsToExport.length,
+          totalActionCount: totalActions,
+          exportedAt: new Date().toISOString()
+        }
+      };
+
+      // Add workflow data as JSON (formatted for readability)
+      const workflowJson = JSON.stringify(exportWorkflowData, null, 2);
+      zip.file('workflow.json', workflowJson);
+
+      // Add README with metadata
+      const readme = this.generateWorkflowReadme(actionsToExport, filteredLogs, isPartialExport, totalActions);
+      zip.file('README.txt', readme);
+
+      // Extract and add screenshots using ORIGINAL action indices
+      let screenshotCount = 0;
+      actionsToExport.forEach(({ action, originalIndex }) => {
+        const screenshotData = action.screenshot || action.screenshot_data;
+        if (!screenshotData) return;
+
+        const paddedIndex = String(originalIndex).padStart(3, '0');
+        // Handle both data URL format and raw base64
+        let imageData = screenshotData;
+        let extension = 'jpg'; // Default to jpg
+
+        if (screenshotData.startsWith('data:image/')) {
+          // Extract format and data from data URL
+          const match = screenshotData.match(/^data:image\/(\w+);base64,(.+)$/);
+          if (match) {
+            extension = match[1] === 'jpeg' ? 'jpg' : match[1];
+            imageData = match[2];
+          }
+        }
+
+        const filename = `screenshots/action_${paddedIndex}.${extension}`;
+        zip.file(filename, imageData, { base64: true });
+        screenshotCount++;
+      });
+
+      // Generate ZIP file
+      const blob = await zip.generateAsync({
+        type: 'blob',
+        compression: 'DEFLATE',
+        compressionOptions: { level: 6 }
+      });
+
+      // Trigger download
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
+      const suffix = isPartialExport ? `_${actionsToExport.length}of${totalActions}` : '';
+      a.download = `workflow_${this.sessionId}${suffix}_${timestamp}.zip`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+
+      saveBtn.textContent = originalText;
+      saveBtn.disabled = false;
+
+      // console.log(`Workflow downloaded successfully: ${actionsToExport.length} actions, ${screenshotCount} screenshots, ${filteredLogs.length} logs`);
+
+    } catch (error) {
+      console.error('Error creating ZIP:', error);
+      alert('Failed to create ZIP file: ' + error.message);
+
+      const saveBtn = document.getElementById('saveEditedBtn');
+      saveBtn.textContent = 'Download ZIP';
+      saveBtn.disabled = false;
+    }
+  }
+
+  // Generate README content for the ZIP file
+  generateWorkflowReadme(actionsToExport, filteredLogs, isPartialExport, totalActions) {
+    const actionCount = actionsToExport.length;
+    const logCount = filteredLogs.length;
+
+    // Count screenshots in exported actions
+    const screenshotCount = actionsToExport.filter(({ action }) =>
+      action.screenshot || action.screenshot_data
+    ).length;
+
+    // Get action summary with original indices
+    const actionSummary = actionsToExport
+      .map(({ action, originalIndex }) =>
+        `  ${originalIndex}. ${action.type || 'unknown'}${action.target ? ` on ${action.target}` : ''}`
+      )
+      .join('\n');
+
+    // Partial export warning
+    const partialExportNote = isPartialExport
+      ? `
+PARTIAL EXPORT WARNING
+======================
+This export contains ${actionCount} of ${totalActions} total actions.
+Selected action indices: ${actionsToExport.map(a => a.originalIndex).join(', ')}
+
+If replaying this workflow, earlier actions may be required to establish
+the correct page state (navigation, login, form data, etc.).
+
+`
+      : '';
+
+    return `Chrome Debug Workflow Recording
+================================
+
+Session ID: ${this.sessionId}
+Exported: ${new Date().toISOString()}
+Export Type: ${isPartialExport ? 'PARTIAL (selected actions only)' : 'COMPLETE'}
+${partialExportNote}
+Contents:
+---------
+- workflow.json: Workflow data with actions and console logs (screenshots stripped)
+- screenshots/: ${screenshotCount} screenshot files (action_XXX.jpg format)
+
+Note: Screenshot data has been extracted from workflow.json to reduce file size.
+Each action's "screenshotFile" field references its corresponding image file.
+
+Statistics:
+-----------
+- Exported Actions: ${actionCount}${isPartialExport ? ` of ${totalActions} total` : ''}
+- Console Logs: ${logCount}
+- Screenshots: ${screenshotCount}
+
+Actions Summary:
+----------------
+${actionSummary || '  (no actions recorded)'}
+
+Screenshot Mapping:
+-------------------
+Screenshots use ORIGINAL action indices for correlation:
+- action_000.jpg corresponds to action at original index 0
+- action_005.jpg corresponds to action at original index 5
+- etc.
+
+This preserves correlation even in partial exports.
+
+Usage:
+------
+1. Open workflow.json to view all recorded actions and logs
+2. Match screenshotFile references to files in screenshots/ folder
+3. This data can be imported into Chrome Debug for replay
+4. Share with developers or Claude Code for debugging assistance
+
+Generated by Chrome Debug MCP
+https://github.com/anthropics/chrome-debug
+`;
+  }
+
+  // Extract screenshots from workflow actions (respects selection)
+  // Returns array of { screenshotData, originalIndex } for proper correlation
+  extractWorkflowScreenshots() {
+    const actionsToExport = this.getActionsToExport();
+
+    return actionsToExport
+      .filter(({ action }) => action.screenshot || action.screenshot_data)
+      .map(({ action, originalIndex }) => ({
+        screenshotData: action.screenshot || action.screenshot_data,
+        originalIndex
+      }));
+  }
+
+  // ========== FRAME RECORDING DOWNLOAD ==========
+  // Download frame recording as ZIP file for sharing
+  // Only exports SELECTED frames - requires frames to be selected
+  // Simpler than workflow export: frames already have logs attached
+  async downloadFramesAsZip() {
+    if (!window.JSZip) {
+      alert('JSZip library not loaded. Cannot create ZIP file.');
+      return;
+    }
+
+    // Guard clause: require selection
+    if (this.selectedFrames.size === 0) {
+      alert('Please select frames to download');
+      return;
+    }
+
+    try {
+      const saveBtn = document.getElementById('saveEditedBtn');
+      const originalText = saveBtn.textContent;
+      saveBtn.textContent = 'Creating ZIP...';
+      saveBtn.disabled = true;
+
+      const zip = new JSZip();
+
+      // Get frames to export (respects selection)
+      const framesToExport = this.getFramesToExport();
+      const isPartialExport = this.selectedFrames.size < this.frames.length;
+      const totalFrames = this.frames.length;
+
+      // Create cleaned frame data with stripped image data
+      // Frames already have logs attached - no filtering needed
+      const cleanedFrames = framesToExport.map(({ frame, originalIndex }) =>
+        this.stripFrameImageData(frame, originalIndex)
+      );
+
+      // Create export object
+      const exportData = {
+        sessionId: this.sessionId,
+        type: 'frame-capture-export',
+        frames: cleanedFrames,
+        exportMetadata: {
+          version: '2.0',
+          format: 'frame-capture',
+          screenshotsExtracted: true,
+          isPartialExport,
+          exportedFrameCount: framesToExport.length,
+          totalFrameCount: totalFrames,
+          exportedAt: new Date().toISOString(),
+          browserOnly: this.browserOnly || false
+        }
+      };
+
+      // Add frames data as JSON
+      const framesJson = JSON.stringify(exportData, null, 2);
+      zip.file('frames.json', framesJson);
+
+      // Add README with metadata
+      const readme = this.generateFramesReadme(framesToExport, isPartialExport, totalFrames);
+      zip.file('README.txt', readme);
+
+      // Extract and add screenshots using ORIGINAL frame indices
+      let screenshotCount = 0;
+      framesToExport.forEach(({ frame, originalIndex }) => {
+        const imageData = frame.imageData;
+        if (!imageData) return;
+
+        const paddedIndex = String(originalIndex).padStart(3, '0');
+
+        // Handle both data URL format and raw base64
+        let base64Data = imageData;
+        let extension = 'jpg'; // Default to jpg
+
+        if (imageData.startsWith('data:image/')) {
+          const match = imageData.match(/^data:image\/(\w+);base64,(.+)$/);
+          if (match) {
+            extension = match[1] === 'jpeg' ? 'jpg' : match[1];
+            base64Data = match[2];
+          }
+        }
+
+        const filename = `screenshots/frame_${paddedIndex}.${extension}`;
+        zip.file(filename, base64Data, { base64: true });
+        screenshotCount++;
+      });
+
+      // Generate ZIP file
+      const blob = await zip.generateAsync({
+        type: 'blob',
+        compression: 'DEFLATE',
+        compressionOptions: { level: 6 }
+      });
+
+      // Trigger download
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
+      const suffix = isPartialExport ? `_${framesToExport.length}of${totalFrames}` : '';
+      a.download = `frames_${this.sessionId}${suffix}_${timestamp}.zip`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+
+      saveBtn.textContent = originalText;
+      saveBtn.disabled = false;
+
+      // console.log(`Frames downloaded successfully: ${framesToExport.length} frames, ${screenshotCount} screenshots`);
+
+    } catch (error) {
+      console.error('Error creating ZIP:', error);
+      alert('Failed to create ZIP file: ' + error.message);
+
+      const saveBtn = document.getElementById('saveEditedBtn');
+      saveBtn.textContent = 'Download ZIP';
+      saveBtn.disabled = false;
+    }
+  }
+
+  // Generate README content for frame export ZIP file
+  // Simpler than workflow README - frames are snapshots, not replayable actions
+  generateFramesReadme(framesToExport, isPartialExport, totalFrames) {
+    const frameCount = framesToExport.length;
+
+    // Count total logs across all exported frames
+    const totalLogs = framesToExport.reduce((sum, { frame }) =>
+      sum + (frame.logs?.length || 0), 0
+    );
+
+    // Calculate duration
+    const firstTimestamp = framesToExport[0]?.frame.timestamp || 0;
+    const lastTimestamp = framesToExport[framesToExport.length - 1]?.frame.timestamp || 0;
+    const durationSec = ((lastTimestamp - firstTimestamp) / 1000).toFixed(1);
+
+    // Get frame summary (first 20)
+    const frameSummary = framesToExport
+      .slice(0, 20)
+      .map(({ frame, originalIndex }) => {
+        const timeStr = (frame.timestamp / 1000).toFixed(1);
+        const logCount = frame.logs?.length || 0;
+        return `  ${originalIndex}. ${timeStr}s (${logCount} logs)`;
+      })
+      .join('\n');
+
+    const moreSummary = framesToExport.length > 20
+      ? `\n  ... and ${framesToExport.length - 20} more frames`
+      : '';
+
+    // Partial export note
+    const partialExportNote = isPartialExport
+      ? `
+PARTIAL EXPORT
+==============
+This export contains ${frameCount} of ${totalFrames} total frames.
+Selected frame indices: ${framesToExport.map(f => f.originalIndex).join(', ')}
+
+`
+      : '';
+
+    return `Chrome Debug Frame Capture Recording
+=====================================
+
+Session ID: ${this.sessionId}
+Exported: ${new Date().toISOString()}
+Export Type: ${isPartialExport ? 'PARTIAL (selected frames only)' : 'COMPLETE'}
+Mode: ${this.browserOnly ? 'Browser-Only (IndexedDB)' : 'Server Mode'}
+${partialExportNote}
+Contents:
+---------
+- frames.json: Frame metadata with timestamps and console logs (images stripped)
+- screenshots/: ${frameCount} screenshot files (frame_XXX.jpg format)
+- README.txt: This file
+
+Note: Screenshot data has been extracted from frames.json to reduce file size.
+Each frame's "screenshotFile" field references its corresponding image file.
+
+Statistics:
+-----------
+- Exported Frames: ${frameCount}${isPartialExport ? ` of ${totalFrames} total` : ''}
+- Duration: ${durationSec}s
+- Total Console Logs: ${totalLogs}
+
+Frames Summary:
+---------------
+${frameSummary}${moreSummary}
+
+Screenshot Mapping:
+-------------------
+Screenshots use ORIGINAL frame indices for correlation:
+- frame_000.jpg corresponds to frame at original index 0
+- frame_005.jpg corresponds to frame at original index 5
+- etc.
+
+Frame Data Structure:
+---------------------
+Each frame in frames.json contains:
+- frameIndex: Original index in the recording
+- timestamp: Time in milliseconds from recording start
+- logs: Array of console log entries captured during this frame
+- screenshotFile: Path to screenshot image in screenshots/ folder
+
+Usage:
+------
+1. Open frames.json to view all frame metadata and console logs
+2. Match screenshotFile references to files in screenshots/ folder
+3. Use for debugging, documentation, or sharing with developers
+4. Share with Claude Code for AI-assisted debugging
+
+Generated by Chrome Debug MCP
+https://github.com/anthropics/chrome-debug
+`;
+  }
+
+  setButtonsEnabled(enabled) {
+    document.querySelectorAll('.btn').forEach(btn => {
+      btn.disabled = !enabled;
+    });
+  }
+  
+  showEmpty() {
+    document.getElementById('loadingContainer').style.display = 'none';
+    document.getElementById('emptyContainer').style.display = 'block';
+  }
+  
+  showError(message) {
+    document.getElementById('loadingContainer').style.display = 'none';
+    const errorContainer = document.getElementById('errorContainer');
+    errorContainer.textContent = message;
+    errorContainer.style.display = 'block';
+  }
+}
+
+// Initialize when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+  new FrameEditor();
+});