@dynamicu/chromedebug-mcp 2.7.1 → 2.7.4

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

@@ -1,4 +1,7 @@
 // Frame Editor Logic
+// Check if PRO version (used for feature gating)
+const IS_PRO_VERSION = chrome.runtime.getManifest().name.includes('PRO');
+
 class FrameEditor {
   constructor() {
     this.sessionId = null;
@@ -8,6 +11,9 @@ class FrameEditor {
     this.lastClickedIndex = -1;
     this.isWorkflow = false; // NEW: Track if viewing workflow
     this.workflowData = null; // NEW: Store workflow data
+    this.videoPlayer = null; // Video player instance
+    this.videoExporter = null; // Video exporter instance
+    this.activeTab = 'frames'; // Current active tab
 
     this.init();
   }
@@ -174,6 +180,252 @@ class FrameEditor {
 
     // Setup Intersection Observer for lazy loading
     this.setupLazyLoading();
+
+    // Setup page unload cleanup
+    this.setupCleanup();
+
+    // Setup premium restrictions (FREE version)
+    this.setupPremiumRestrictions();
+  }
+
+  // Setup premium restrictions for FREE version
+  setupPremiumRestrictions() {
+    // Skip for PRO version
+    if (IS_PRO_VERSION) return;
+
+    // Inject upgrade modal into page
+    this.injectUpgradeModal();
+
+    // Prevent right-click on images (FREE version restriction)
+    document.addEventListener('contextmenu', (e) => {
+      // Check if right-click is on an image or within a frame preview
+      if (e.target.tagName === 'IMG' ||
+          e.target.closest('.frame-preview') ||
+          e.target.closest('.modal-image-container')) {
+        e.preventDefault();
+        this.showUpgradeModal('Right-click download');
+      }
+    });
+
+    // Add visual indicator to download button
+    const saveBtn = document.getElementById('saveEditedBtn');
+    if (saveBtn) {
+      saveBtn.innerHTML = 'Download ZIP 🔒';
+      saveBtn.classList.add('premium-locked');
+    }
+
+    // Add FREE badge to page
+    this.addFreeBadge();
+  }
+
+  // Inject the upgrade modal HTML into the page
+  injectUpgradeModal() {
+    const modalHTML = `
+      <div id="upgradeModal" class="upgrade-modal" style="display: none;">
+        <div class="upgrade-modal-content">
+          <button class="upgrade-modal-close" id="upgradeModalClose">&times;</button>
+          <h2>🔒 PRO Feature</h2>
+          <p id="upgradeFeatureName">This feature</p>
+          <p>Upgrade to Chrome Debug PRO to unlock:</p>
+          <ul>
+            <li>✅ Download individual images</li>
+            <li>✅ Export as ZIP archives</li>
+            <li>✅ Clean images (no watermark)</li>
+            <li>✅ Unlimited recordings</li>
+            <li>✅ Function tracing</li>
+          </ul>
+          <button class="upgrade-btn" id="upgradeNowBtn">Upgrade to PRO</button>
+          <button class="upgrade-cancel-btn" id="upgradeCancelBtn">Maybe Later</button>
+        </div>
+      </div>
+    `;
+
+    // Add modal styles
+    const styleEl = document.createElement('style');
+    styleEl.textContent = `
+      .upgrade-modal {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.7);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10000;
+      }
+      .upgrade-modal-content {
+        background: #1e1e1e;
+        border-radius: 12px;
+        padding: 24px;
+        max-width: 400px;
+        width: 90%;
+        text-align: center;
+        position: relative;
+        border: 1px solid #444;
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+      }
+      .upgrade-modal-close {
+        position: absolute;
+        top: 10px;
+        right: 12px;
+        background: none;
+        border: none;
+        color: #888;
+        font-size: 24px;
+        cursor: pointer;
+      }
+      .upgrade-modal-close:hover {
+        color: #fff;
+      }
+      .upgrade-modal-content h2 {
+        color: #FFD700;
+        margin-bottom: 12px;
+        font-size: 20px;
+      }
+      .upgrade-modal-content p {
+        color: #ccc;
+        margin-bottom: 10px;
+        font-size: 14px;
+      }
+      .upgrade-modal-content ul {
+        text-align: left;
+        list-style: none;
+        padding: 0;
+        margin: 16px 0;
+      }
+      .upgrade-modal-content li {
+        color: #aaa;
+        padding: 6px 0;
+        font-size: 13px;
+      }
+      .upgrade-btn {
+        background: linear-gradient(135deg, #FFD700, #FFA500);
+        color: #000;
+        border: none;
+        padding: 12px 28px;
+        border-radius: 6px;
+        font-weight: bold;
+        font-size: 14px;
+        cursor: pointer;
+        margin: 8px;
+        transition: transform 0.2s;
+      }
+      .upgrade-btn:hover {
+        transform: scale(1.05);
+      }
+      .upgrade-cancel-btn {
+        background: transparent;
+        color: #888;
+        border: 1px solid #555;
+        padding: 10px 24px;
+        border-radius: 6px;
+        font-size: 13px;
+        cursor: pointer;
+        margin: 8px;
+      }
+      .upgrade-cancel-btn:hover {
+        border-color: #888;
+        color: #aaa;
+      }
+      .premium-locked {
+        position: relative;
+      }
+      .free-badge {
+        position: fixed;
+        bottom: 10px;
+        left: 10px;
+        background: rgba(255, 152, 0, 0.9);
+        color: #000;
+        padding: 4px 10px;
+        border-radius: 12px;
+        font-size: 11px;
+        font-weight: bold;
+        z-index: 1000;
+      }
+    `;
+    document.head.appendChild(styleEl);
+
+    // Add modal to body
+    const modalDiv = document.createElement('div');
+    modalDiv.innerHTML = modalHTML;
+    document.body.appendChild(modalDiv.firstElementChild);
+
+    // Setup modal event listeners
+    document.getElementById('upgradeModalClose').addEventListener('click', () => {
+      this.hideUpgradeModal();
+    });
+
+    document.getElementById('upgradeCancelBtn').addEventListener('click', () => {
+      this.hideUpgradeModal();
+    });
+
+    document.getElementById('upgradeNowBtn').addEventListener('click', () => {
+      chrome.tabs.create({ url: 'https://chromedebug.com/checkout/buy/996773cb-682b-430f-b9e3-9ce2130bd967' });
+      this.hideUpgradeModal();
+    });
+
+    // Close on overlay click
+    document.getElementById('upgradeModal').addEventListener('click', (e) => {
+      if (e.target.id === 'upgradeModal') {
+        this.hideUpgradeModal();
+      }
+    });
+  }
+
+  // Show upgrade modal with feature name
+  showUpgradeModal(featureName) {
+    const modal = document.getElementById('upgradeModal');
+    const featureEl = document.getElementById('upgradeFeatureName');
+    if (modal && featureEl) {
+      featureEl.textContent = `${featureName} is a PRO feature.`;
+      modal.style.display = 'flex';
+    }
+  }
+
+  // Hide upgrade modal
+  hideUpgradeModal() {
+    const modal = document.getElementById('upgradeModal');
+    if (modal) {
+      modal.style.display = 'none';
+    }
+  }
+
+  // Add FREE badge indicator
+  addFreeBadge() {
+    const badge = document.createElement('div');
+    badge.className = 'free-badge';
+    badge.textContent = 'FREE VERSION';
+    document.body.appendChild(badge);
+  }
+
+  // Check if download is allowed (PRO only)
+  isDownloadAllowed() {
+    return IS_PRO_VERSION;
+  }
+
+  // Get the correct button text based on version (FREE shows lock icon)
+  getDownloadButtonText() {
+    return IS_PRO_VERSION ? 'Download ZIP' : 'Download ZIP 🔒';
+  }
+
+  // Setup cleanup handlers for memory management
+  setupCleanup() {
+    // Clean up video player when page unloads
+    window.addEventListener('beforeunload', () => {
+      if (this.videoPlayer) {
+        this.videoPlayer.destroy();
+        this.videoPlayer = null;
+      }
+    });
+
+    // Clean up when visibility changes (e.g., tab switch in browser)
+    document.addEventListener('visibilitychange', () => {
+      if (document.hidden && this.videoPlayer && this.videoPlayer.isPlaying) {
+        this.videoPlayer.pause();
+      }
+    });
   }
   
   async loadSession() {
@@ -215,6 +467,7 @@ class FrameEditor {
           if (response.ok) {
             const data = await response.json();
             this.frames = data.frames || [];
+            this.sessionInteractions = data.interactions || [];  // Store session-level interactions for video player
             found = true;
             // console.log(`[INFO] Frame Editor: Loaded ${this.frames.length} frames from HTTP server on port ${port}`);
             break;
@@ -234,6 +487,7 @@ class FrameEditor {
 
         if (sessionData) {
           this.frames = sessionData.frames || [];
+          this.sessionInteractions = sessionData.interactions || [];  // Also check storage for interactions
           // 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');
@@ -305,9 +559,14 @@ class FrameEditor {
     // Update button text to "Download ZIP" (matches workflow behavior)
     const saveBtn = document.getElementById('saveEditedBtn');
     if (saveBtn) {
-      saveBtn.textContent = 'Download ZIP';
+      saveBtn.textContent = this.getDownloadButtonText();
       saveBtn.disabled = true; // Disabled until items are selected
     }
+
+    // Show tab navigation for frame recordings (not workflows yet)
+    if (!this.isWorkflow && this.frames.length > 0) {
+      document.getElementById('editorTabs').style.display = 'flex';
+    }
   }
 
   // NEW: Update workflow session info
@@ -329,7 +588,7 @@ class FrameEditor {
     // Update button text for workflow mode
     const saveBtn = document.getElementById('saveEditedBtn');
     if (saveBtn) {
-      saveBtn.textContent = 'Download ZIP';
+      saveBtn.textContent = this.getDownloadButtonText();
       saveBtn.disabled = true; // Disabled until items are selected
     }
 
@@ -905,7 +1164,662 @@ class FrameEditor {
     }
   }
 
+  // Setup tab navigation
+  setupTabNavigation() {
+    const tabBtns = document.querySelectorAll('.tab-btn');
+    tabBtns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        const tabId = btn.dataset.tab;
+        this.switchTab(tabId);
+      });
+    });
+  }
+
+  // Switch between tabs
+  switchTab(tabId) {
+    // Update button states
+    document.querySelectorAll('.tab-btn').forEach(btn => {
+      btn.classList.toggle('active', btn.dataset.tab === tabId);
+    });
+
+    // Update tab content
+    document.querySelectorAll('.tab-content').forEach(content => {
+      content.classList.toggle('active', content.id === tabId + 'Tab');
+    });
+
+    this.activeTab = tabId;
+
+    // Initialize video player on first switch
+    if (tabId === 'player' && !this.videoPlayer && this.frames.length > 0) {
+      this.initVideoPlayer();
+    }
+  }
+
+  // Initialize video player
+  initVideoPlayer() {
+    const container = document.getElementById('videoCanvasWrapper');
+    const loading = document.getElementById('videoLoading');
+
+    this.videoPlayer = new VideoPlayer(container, {
+      showLogs: document.getElementById('showLogsToggle').checked,
+      logPosition: document.getElementById('logPositionSelect').value,
+      onFrameChange: (index, frame) => this.onVideoFrameChange(index, frame),
+      onPlayStateChange: (isPlaying) => this.onVideoPlayStateChange(isPlaying)
+    });
+
+    this.videoPlayer.initialize(this.frames).then(() => {
+      loading.style.display = 'none';
+
+      // Load interactions for cursor and click visualization
+      this.loadInteractions();
+
+      this.setupVideoControls();
+      this.setupExportControls();
+
+      // Initialize frame thumbnail strip
+      this.initFrameStrip();
+    });
+  }
+
+  // Initialize frame thumbnail strip for visual navigation
+  initFrameStrip() {
+    const strip = document.getElementById('frameStrip');
+    const countEl = document.getElementById('frameStripCount');
+
+    if (!strip || this.frames.length === 0) return;
+
+    // Update frame count display
+    countEl.textContent = `${this.frames.length} frames`;
+
+    // Clear existing thumbnails
+    strip.innerHTML = '';
+
+    // Create thumbnail for each frame
+    this.frames.forEach((frame, index) => {
+      const item = document.createElement('div');
+      item.className = 'frame-strip-item';
+      item.dataset.frameIndex = index;
+
+      // Create thumbnail image
+      const thumb = document.createElement('img');
+      thumb.className = 'frame-strip-thumb';
+      thumb.alt = `Frame ${index}`;
+
+      // Use the frame's imageData directly (already base64)
+      if (frame.imageData) {
+        thumb.src = frame.imageData;
+      } else {
+        // Fallback placeholder for frames without images
+        thumb.style.background = '#333';
+      }
+
+      // Create info label
+      const info = document.createElement('div');
+      info.className = 'frame-strip-info';
+      info.textContent = `${(frame.timestamp / 1000).toFixed(1)}s`;
+
+      item.appendChild(thumb);
+      item.appendChild(info);
+
+      // Click handler to seek to this frame
+      item.addEventListener('click', () => {
+        this.videoPlayer.seek(index);
+        this.updateFrameStripActiveFrame(index);
+      });
+
+      strip.appendChild(item);
+    });
+
+    // Set first frame as active
+    this.updateFrameStripActiveFrame(0);
+  }
+
+  // Update active frame highlighting in thumbnail strip
+  updateFrameStripActiveFrame(activeIndex) {
+    const strip = document.getElementById('frameStrip');
+    if (!strip) return;
+
+    // Remove active class from all items
+    strip.querySelectorAll('.frame-strip-item').forEach(item => {
+      item.classList.remove('active');
+    });
+
+    // Add active class to current frame
+    const activeItem = strip.querySelector(`.frame-strip-item[data-frame-index="${activeIndex}"]`);
+    if (activeItem) {
+      activeItem.classList.add('active');
+
+      // Scroll to keep active frame visible
+      const stripRect = strip.getBoundingClientRect();
+      const itemRect = activeItem.getBoundingClientRect();
+
+      // Check if item is outside visible area
+      if (itemRect.left < stripRect.left || itemRect.right > stripRect.right) {
+        activeItem.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'center'
+        });
+      }
+    }
+  }
+
+  // Setup export controls
+  setupExportControls() {
+    const exportBtn = document.getElementById('exportVideoBtn');
+    const modal = document.getElementById('exportModal');
+    const closeBtn = document.getElementById('closeExportModal');
+    const cancelBtn = document.getElementById('cancelExportBtn');
+    const startBtn = document.getElementById('startExportBtn');
+
+    // Disable export for FREE version
+    if (!IS_PRO_VERSION && exportBtn) {
+      exportBtn.disabled = true;
+      exportBtn.style.opacity = '0.5';
+      exportBtn.style.cursor = 'not-allowed';
+      exportBtn.title = 'MP4 Export is a PRO feature. Upgrade to export videos.';
+
+      // Add PRO badge to button
+      const proBadge = document.createElement('span');
+      proBadge.textContent = ' PRO';
+      proBadge.style.cssText = 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 2px 6px; border-radius: 4px; font-size: 9px; margin-left: 6px; font-weight: bold;';
+      exportBtn.appendChild(proBadge);
+    }
+
+    // Open modal (only for PRO users)
+    exportBtn?.addEventListener('click', () => {
+      // Block export for FREE users
+      if (!IS_PRO_VERSION) {
+        this.showUpgradeModal('MP4 Video Export');
+        return;
+      }
+
+      if (!VideoExporter.isSupported()) {
+        alert('Video export requires a modern browser with WebCodecs support (Chrome 94+)');
+        return;
+      }
+      this.updateExportEstimates();
+      modal.style.display = 'flex';
+    });
+
+    // Close modal
+    closeBtn?.addEventListener('click', () => modal.style.display = 'none');
+    cancelBtn?.addEventListener('click', () => {
+      if (this.videoExporter) {
+        this.videoExporter.cancel();
+      }
+      modal.style.display = 'none';
+    });
+
+    // Click outside to close
+    modal?.addEventListener('click', (e) => {
+      if (e.target === modal) modal.style.display = 'none';
+    });
+
+    // Update estimates when FPS changes
+    const fpsSelect = document.getElementById('exportFps');
+    fpsSelect?.addEventListener('change', () => this.updateExportEstimates());
+
+    // Update estimates when intro/outro text changes
+    document.getElementById('exportIntroText')?.addEventListener('input', () => this.updateExportEstimates());
+    document.getElementById('exportOutroText')?.addEventListener('input', () => this.updateExportEstimates());
+    document.getElementById('exportIntroDuration')?.addEventListener('change', () => this.updateExportEstimates());
+    document.getElementById('exportOutroDuration')?.addEventListener('change', () => this.updateExportEstimates());
+
+    // Start export
+    startBtn?.addEventListener('click', () => this.startExport());
+  }
+
+  // Update export duration and size estimates
+  updateExportEstimates() {
+    // Calculate base recording duration
+    const recordingDuration = this.frames.length > 1
+      ? (this.frames[this.frames.length - 1].timestamp - this.frames[0].timestamp) / 1000
+      : 0;
+
+    // Add intro/outro duration
+    const introText = document.getElementById('exportIntroText')?.value.trim() || '';
+    const outroText = document.getElementById('exportOutroText')?.value.trim() || '';
+    const introDuration = introText ? parseInt(document.getElementById('exportIntroDuration')?.value || 2) : 0;
+    const outroDuration = outroText ? parseInt(document.getElementById('exportOutroDuration')?.value || 2) : 0;
+
+    const totalDuration = recordingDuration + introDuration + outroDuration;
+
+    // Calculate frame count
+    const fps = parseInt(document.getElementById('exportFps')?.value || 10);
+    const introFrames = introText ? Math.ceil(introDuration * fps) : 0;
+    const outroFrames = outroText ? Math.ceil(outroDuration * fps) : 0;
+    const totalFrames = this.frames.length + introFrames + outroFrames;
+
+    // Estimate file size (rough estimate: bitrate * duration)
+    const quality = document.getElementById('exportQuality')?.value || 'medium';
+    const bitrates = { low: 1, medium: 3, high: 5 }; // Mbps
+    const estimatedSizeMB = (bitrates[quality] * totalDuration) / 8;
+
+    // Update or create estimate display
+    let estimateDiv = document.getElementById('exportEstimate');
+    if (!estimateDiv) {
+      estimateDiv = document.createElement('div');
+      estimateDiv.id = 'exportEstimate';
+      estimateDiv.className = 'export-estimate';
+      const footer = document.querySelector('.export-modal-footer');
+      footer?.parentNode.insertBefore(estimateDiv, footer);
+    }
+
+    // Show warning for long recordings
+    const warningClass = totalDuration > 120 ? 'export-warning' : '';
+    const warningText = totalDuration > 120 ? '<span class="warning-text">Large exports may take several minutes</span>' : '';
+
+    estimateDiv.innerHTML = `
+      <div class="estimate-row ${warningClass}">
+        <span>Duration: ~${Math.round(totalDuration)}s</span>
+        <span>Frames: ${totalFrames}</span>
+        <span>Est. Size: ~${estimatedSizeMB.toFixed(1)} MB</span>
+      </div>
+      ${warningText}
+    `;
+  }
+
+  async startExport() {
+    // Check if export is allowed (FREE version restriction)
+    if (!this.isDownloadAllowed()) {
+      this.showUpgradeModal('Video Export');
+      return;
+    }
+
+    // DEBUG: Log frame data before export
+    console.log('[FrameEditor] startExport called:', {
+      framesCount: this.frames?.length || 0,
+      sessionId: this.sessionId,
+      isWorkflow: this.isWorkflow
+    });
+
+    if (this.frames && this.frames.length > 0) {
+      const firstFrame = this.frames[0];
+      console.log('[FrameEditor] First frame structure:', {
+        keys: Object.keys(firstFrame),
+        hasImageData: !!firstFrame.imageData,
+        imageDataType: typeof firstFrame.imageData,
+        imageDataLength: firstFrame.imageData?.length || 0,
+        imageDataPrefix: firstFrame.imageData?.substring?.(0, 80) || 'N/A',
+        timestamp: firstFrame.timestamp
+      });
+    } else {
+      console.error('[FrameEditor] NO FRAMES AVAILABLE FOR EXPORT!');
+    }
+
+    const progressDiv = document.getElementById('exportProgress');
+    const progressBar = document.getElementById('exportProgressBar');
+    const progressText = document.getElementById('exportProgressText');
+    const startBtn = document.getElementById('startExportBtn');
+
+    // Get basic options
+    const options = {
+      quality: document.getElementById('exportQuality').value,
+      fps: parseInt(document.getElementById('exportFps').value),
+      includeLogs: document.getElementById('exportIncludeLogs').checked,
+      includeClicks: document.getElementById('exportIncludeClicks').checked,
+      includeCursor: document.getElementById('exportIncludeCursor').checked,
+      logPosition: document.getElementById('exportLogPosition').value,
+      logFilter: document.getElementById('exportLogFilter').value,
+
+      // Style preset
+      stylePreset: document.getElementById('exportStylePreset').value,
+
+      // Intro/Outro options
+      introText: document.getElementById('exportIntroText').value.trim(),
+      outroText: document.getElementById('exportOutroText').value.trim(),
+      introDuration: parseInt(document.getElementById('exportIntroDuration').value),
+      outroDuration: parseInt(document.getElementById('exportOutroDuration').value),
+
+      // Watermark options
+      watermarkText: document.getElementById('exportWatermarkText').value.trim(),
+      watermarkPosition: document.getElementById('exportWatermarkPosition').value,
+      watermarkOpacity: parseFloat(document.getElementById('exportWatermarkOpacity').value),
+
+      onProgress: (percent, current, total) => {
+        progressBar.style.width = percent + '%';
+        progressText.textContent = `${Math.round(percent)}% (${current}/${total} frames)`;
+      },
+      onComplete: (blob, filename) => {
+        VideoExporter.downloadBlob(blob, filename);
+        progressDiv.style.display = 'none';
+        startBtn.disabled = false;
+        startBtn.textContent = 'Export MP4';
+        document.getElementById('exportModal').style.display = 'none';
+        this.showToast('Video exported successfully!');
+      },
+      onError: (error) => {
+        alert('Export failed: ' + error.message);
+        progressDiv.style.display = 'none';
+        startBtn.disabled = false;
+        startBtn.textContent = 'Export MP4';
+      }
+    };
+
+    // Show progress
+    progressDiv.style.display = 'block';
+    progressBar.style.width = '0%';
+    progressText.textContent = '0%';
+    startBtn.disabled = true;
+    startBtn.textContent = 'Exporting...';
+
+    // Create exporter and start
+    this.videoExporter = new VideoExporter(options);
+    const interactions = await this.loadInteractions();
+    await this.videoExporter.exportVideo(this.frames, interactions, this.sessionId);
+  }
+
+  // Setup video player controls
+  setupVideoControls() {
+    // Play/Pause
+    const playBtn = document.getElementById('playPauseBtn');
+    playBtn.addEventListener('click', () => {
+      if (this.videoPlayer.isPlaying) {
+        this.videoPlayer.pause();
+      } else {
+        this.videoPlayer.play();
+      }
+    });
+
+    // Frame navigation
+    document.getElementById('prevFrameBtn').addEventListener('click', () => {
+      this.videoPlayer.prevFrame();
+    });
+
+    document.getElementById('nextFrameBtn').addEventListener('click', () => {
+      this.videoPlayer.nextFrame();
+    });
+
+    // Seek bar
+    const seekBar = document.getElementById('seekBar');
+    seekBar.addEventListener('input', (e) => {
+      const frameIndex = Math.round((e.target.value / 100) * (this.frames.length - 1));
+      this.videoPlayer.seek(frameIndex);
+    });
+
+    // Speed
+    document.getElementById('speedSelect').addEventListener('change', (e) => {
+      this.videoPlayer.setSpeed(parseFloat(e.target.value));
+    });
+
+    // Cursor and click toggles
+    document.getElementById('showCursorToggle').addEventListener('change', (e) => {
+      this.videoPlayer.setShowMouseCursor(e.target.checked);
+    });
+
+    document.getElementById('showClicksToggle').addEventListener('change', (e) => {
+      this.videoPlayer.setShowClickIndicators(e.target.checked);
+    });
+
+    // Setup log panel
+    this.setupLogPanel();
+
+    // Keyboard shortcuts
+    document.addEventListener('keydown', (e) => {
+      if (this.activeTab !== 'player') return;
+
+      // Skip keyboard shortcuts when user is typing in input fields
+      if (!this.shouldHandleKeyboardShortcut(e)) return;
+
+      switch(e.code) {
+        case 'Space':
+          e.preventDefault();
+          if (this.videoPlayer.isPlaying) {
+            this.videoPlayer.pause();
+          } else {
+            this.videoPlayer.play();
+          }
+          break;
+        case 'ArrowLeft':
+          e.preventDefault();
+          this.videoPlayer.prevFrame();
+          break;
+        case 'ArrowRight':
+          e.preventDefault();
+          this.videoPlayer.nextFrame();
+          break;
+        case 'Home':
+          e.preventDefault();
+          this.videoPlayer.seek(0);
+          break;
+        case 'End':
+          e.preventDefault();
+          this.videoPlayer.seek(this.frames.length - 1);
+          break;
+        case 'KeyL':
+          e.preventDefault();
+          const logToggle = document.getElementById('showLogsToggle');
+          logToggle.checked = !logToggle.checked;
+          logToggle.dispatchEvent(new Event('change'));
+          break;
+        case 'Digit1':
+          this.videoPlayer.setSpeed(0.5);
+          document.getElementById('speedSelect').value = '0.5';
+          break;
+        case 'Digit2':
+          this.videoPlayer.setSpeed(1);
+          document.getElementById('speedSelect').value = '1';
+          break;
+        case 'Digit3':
+          this.videoPlayer.setSpeed(2);
+          document.getElementById('speedSelect').value = '2';
+          break;
+        case 'Digit4':
+          this.videoPlayer.setSpeed(4);
+          document.getElementById('speedSelect').value = '4';
+          break;
+        case 'KeyE':
+          e.preventDefault();
+          const exportBtn = document.getElementById('exportVideoBtn');
+          if (exportBtn) exportBtn.click();
+          break;
+      }
+    });
+  }
+
+  // Helper to check if keyboard shortcut should be handled
+  // Returns false if user is typing in an input field
+  shouldHandleKeyboardShortcut(event) {
+    const target = event.target;
+    const tagName = target.tagName.toUpperCase();
+
+    // Standard form elements that handle their own keyboard
+    const formElements = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON'];
+    if (formElements.includes(tagName)) return false;
+
+    // Content editable elements
+    if (target.isContentEditable) return false;
+
+    // Elements with explicit interaction roles
+    const role = target.getAttribute('role');
+    const interactiveRoles = ['button', 'textbox', 'listbox', 'combobox'];
+    if (role && interactiveRoles.includes(role)) return false;
+
+    return true;
+  }
+
+  // Handle video frame change
+  onVideoFrameChange(index, frame) {
+    // Update UI
+    document.getElementById('seekBar').value = (index / (this.frames.length - 1)) * 100;
+    document.getElementById('frameCounter').textContent = `Frame ${index + 1} / ${this.frames.length}`;
+
+    // Update time display
+    const currentTime = this.formatTime(this.videoPlayer.getCurrentTime());
+    const duration = this.formatTime(this.videoPlayer.getDuration());
+    document.getElementById('timeDisplay').textContent = `${currentTime} / ${duration}`;
+
+    // Update log panel if visible
+    this.updateLogPanel(frame);
+
+    // Update thumbnail strip active frame
+    this.updateFrameStripActiveFrame(index);
+  }
+
+  // Handle video play state change
+  onVideoPlayStateChange(isPlaying) {
+    const btn = document.getElementById('playPauseBtn');
+    btn.textContent = isPlaying ? '⏸' : '▶';
+    btn.classList.toggle('playing', isPlaying);
+  }
+
+  // Format time in milliseconds to MM:SS
+  formatTime(ms) {
+    const seconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${minutes}:${secs.toString().padStart(2, '0')}`;
+  }
+
+  // Setup log panel controls
+  setupLogPanel() {
+    const logToggle = document.getElementById('showLogsToggle');
+    const logPositionSelect = document.getElementById('logPositionSelect');
+    const logPanel = document.getElementById('videoLogPanel');
+    const logPanelClose = document.getElementById('logPanelClose');
+
+    // Show/hide log panel
+    logToggle.addEventListener('change', (e) => {
+      if (e.target.checked) {
+        logPanel.style.display = 'flex';
+        this.updateLogPanel(this.frames[this.videoPlayer.currentFrameIndex]);
+      } else {
+        logPanel.style.display = 'none';
+      }
+    });
+
+    // Change log position
+    logPositionSelect.addEventListener('change', (e) => {
+      this.setLogPosition(e.target.value);
+    });
+
+    // Close button
+    logPanelClose.addEventListener('click', () => {
+      logToggle.checked = false;
+      logPanel.style.display = 'none';
+    });
+
+    // Initialize position
+    this.setLogPosition(logPositionSelect.value);
+  }
+
+  // Set log panel position
+  setLogPosition(position) {
+    const logPanel = document.getElementById('videoLogPanel');
+
+    // Remove all position classes
+    logPanel.classList.remove('position-bottom', 'position-right', 'position-overlay');
+
+    // Add new position class
+    if (position !== 'hidden') {
+      logPanel.classList.add(`position-${position}`);
+    }
+  }
+
+  // Update log panel with current frame's logs
+  updateLogPanel(frame) {
+    const logPanel = document.getElementById('videoLogPanel');
+    const logContent = document.getElementById('logPanelContent');
+
+    if (!frame || !logPanel || logPanel.style.display === 'none') return;
+
+    // Get logs for this frame
+    const logs = frame.logs || [];
+
+    if (logs.length === 0) {
+      logContent.innerHTML = '<div style="color: #666; padding: 20px; text-align: center;">No console logs for this frame</div>';
+      return;
+    }
+
+    // Render logs
+    logContent.innerHTML = logs.map(log => {
+      const level = log.level || 'log';
+      const relativeTime = log.relativeTime || log.relative_time || 0;
+      const timeStr = `${(relativeTime / 1000).toFixed(3)}s`;
+      const message = this.escapeHtml(log.message || '');
+
+      return `
+        <div class="log-entry">
+          <span class="log-level ${level}">${level}</span>
+          <span class="log-time">${timeStr}</span>
+          <span class="log-message">${message}</span>
+        </div>
+      `;
+    }).join('');
+  }
+
+  // Escape HTML to prevent XSS
+  escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  // Load interactions from frames and session-level data
+  loadInteractions() {
+    // Extract interactions from session-level data and frame associations
+    // Interactions include clicks, inputs, scrolls, and mouse movements
+    const interactions = [];
+
+    // First, add session-level interactions (from API response)
+    if (this.sessionInteractions && this.sessionInteractions.length > 0) {
+      interactions.push(...this.sessionInteractions);
+    }
+
+    // Then check each frame for associated interactions (already timestamp-aligned by database)
+    this.frames.forEach((frame) => {
+      if (frame.associatedInteractions && Array.isArray(frame.associatedInteractions)) {
+        interactions.push(...frame.associatedInteractions);
+      }
+
+      // Legacy format: check for embedded interactions array
+      if (frame.interactions && Array.isArray(frame.interactions)) {
+        interactions.push(...frame.interactions);
+      }
+
+      // Legacy format: check for click/mousemove fields directly on frame
+      if (frame.click && frame.click.x !== undefined) {
+        interactions.push({
+          type: 'click',
+          x: frame.click.x,
+          y: frame.click.y,
+          timestamp: frame.timestamp
+        });
+      }
+
+      if (frame.mousePosition && frame.mousePosition.x !== undefined) {
+        interactions.push({
+          type: 'mousemove',
+          x: frame.mousePosition.x,
+          y: frame.mousePosition.y,
+          timestamp: frame.timestamp
+        });
+      }
+    });
+
+    // Deduplicate by timestamp + type + coordinates to prevent double-rendering
+    const seen = new Set();
+    const deduped = interactions.filter(interaction => {
+      const key = `${interaction.type}-${interaction.timestamp}-${interaction.x}-${interaction.y}`;
+      if (seen.has(key)) return false;
+      seen.add(key);
+      return true;
+    });
+
+    // Load into video player
+    if (this.videoPlayer) {
+      this.videoPlayer.loadInteractions(deduped);
+    }
+
+    return deduped;
+  }
+
   setupEventListeners() {
+    // Setup tab navigation
+    this.setupTabNavigation();
+
+
     // Copy ID button
     document.getElementById('copyIdBtn').addEventListener('click', () => {
       if (this.sessionId) {
@@ -1023,6 +1937,12 @@ class FrameEditor {
   }
 
   async saveEditedRecording() {
+    // Check if download is allowed (FREE version restriction)
+    if (!this.isDownloadAllowed()) {
+      this.showUpgradeModal('ZIP Download');
+      return;
+    }
+
     // Both frame and workflow recordings now use ZIP download
     if (this.isWorkflow) {
       this.downloadWorkflowAsZip();
@@ -1181,11 +2101,25 @@ class FrameEditor {
       zip.file('README.txt', readme);
 
       // Extract and add screenshots using ORIGINAL action indices
+      // Apply watermark for FREE version at export time (not storage time)
       let screenshotCount = 0;
-      actionsToExport.forEach(({ action, originalIndex }) => {
-        const screenshotData = action.screenshot || action.screenshot_data;
+      const imageProcessor = window.ChromeDebugImageProcessor;
+
+      // Process screenshots with potential watermarking
+      await Promise.all(actionsToExport.map(async ({ action, originalIndex }) => {
+        let screenshotData = action.screenshot || action.screenshot_data;
         if (!screenshotData) return;
 
+        // Apply watermark at EXPORT time for FREE version
+        if (imageProcessor && imageProcessor.shouldWatermark()) {
+          try {
+            screenshotData = await imageProcessor.processImageForExport(screenshotData);
+          } catch (err) {
+            console.warn('[FrameEditor] Failed to apply watermark:', err);
+            // Continue with original image if watermarking fails
+          }
+        }
+
         const paddedIndex = String(originalIndex).padStart(3, '0');
         // Handle both data URL format and raw base64
         let imageData = screenshotData;
@@ -1203,7 +2137,7 @@ class FrameEditor {
         const filename = `screenshots/action_${paddedIndex}.${extension}`;
         zip.file(filename, imageData, { base64: true });
         screenshotCount++;
-      });
+      }));
 
       // Generate ZIP file
       const blob = await zip.generateAsync({
@@ -1234,7 +2168,7 @@ class FrameEditor {
       alert('Failed to create ZIP file: ' + error.message);
 
       const saveBtn = document.getElementById('saveEditedBtn');
-      saveBtn.textContent = 'Download ZIP';
+      saveBtn.textContent = this.getDownloadButtonText();
       saveBtn.disabled = false;
     }
   }
@@ -1390,11 +2324,26 @@ https://github.com/anthropics/chrome-debug
       zip.file('README.txt', readme);
 
       // Extract and add screenshots using ORIGINAL frame indices
+      // Apply watermark for FREE version at export time (not storage time)
       let screenshotCount = 0;
-      framesToExport.forEach(({ frame, originalIndex }) => {
-        const imageData = frame.imageData;
+      const imageProcessorFrames = window.ChromeDebugImageProcessor;
+
+      // Process frames with potential watermarking
+      await Promise.all(framesToExport.map(async ({ frame, originalIndex }) => {
+        let imageData = frame.imageData;
         if (!imageData) return;
 
+        // Apply watermark at EXPORT time for FREE version
+        if (imageProcessorFrames && imageProcessorFrames.shouldWatermark()) {
+          try {
+            imageData = await imageProcessorFrames.processImageForExport(imageData);
+          } catch (err) {
+            console.warn('[FrameEditor] Failed to apply watermark to frame:', err);
+            // Continue with original image if watermarking fails
+            imageData = frame.imageData;
+          }
+        }
+
         const paddedIndex = String(originalIndex).padStart(3, '0');
 
         // Handle both data URL format and raw base64
@@ -1412,7 +2361,7 @@ https://github.com/anthropics/chrome-debug
         const filename = `screenshots/frame_${paddedIndex}.${extension}`;
         zip.file(filename, base64Data, { base64: true });
         screenshotCount++;
-      });
+      }));
 
       // Generate ZIP file
       const blob = await zip.generateAsync({
@@ -1443,7 +2392,7 @@ https://github.com/anthropics/chrome-debug
       alert('Failed to create ZIP file: ' + error.message);
 
       const saveBtn = document.getElementById('saveEditedBtn');
-      saveBtn.textContent = 'Download ZIP';
+      saveBtn.textContent = this.getDownloadButtonText();
       saveBtn.disabled = false;
     }
   }