@dynamicu/chromedebug-mcp 2.7.1 → 2.7.4

package/chrome-extension/pro/video-player.js

@@ -0,0 +1,545 @@
+/**
+ * VideoPlayer - Canvas-based frame playback for Chrome Debug PRO
+ * Part of the video playback/export feature
+ */
+class VideoPlayer {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.canvas = null;
+    this.ctx = null;
+
+    // Frame data (passed from FrameEditor, not reloaded)
+    this.frames = [];
+    this.imageCache = new Map(); // frameIndex -> HTMLImageElement
+
+    // Playback state
+    this.currentFrameIndex = 0;
+    this.isPlaying = false;
+    this.playbackSpeed = 1.0;
+    this.animationId = null;
+    this.lastRenderTime = 0;
+    this.playbackStartTime = 0;
+    this.playbackStartFrame = 0;
+
+    // Display options
+    this.showLogs = options.showLogs !== false;
+    this.logPosition = options.logPosition || 'bottom';
+    this.showClickIndicators = true;
+    this.showMouseCursor = true;
+
+    // Interaction data
+    this.interactions = [];
+    this.originalWidth = null;
+    this.originalHeight = null;
+
+    // Preloading config
+    this.preloadBehind = 10;
+    this.preloadAhead = 40;
+    this.maxCacheSize = 50;
+
+    // Cached frame data for efficient overlay updates between frames
+    this.cachedFrameData = null;
+    this.cachedFrameIndex = -1;
+
+    // Viewport dimensions from recording (for accurate coordinate scaling)
+    this.recordedViewportWidth = null;
+    this.recordedViewportHeight = null;
+
+    // Callbacks
+    this.onFrameChange = options.onFrameChange || null;
+    this.onPlayStateChange = options.onPlayStateChange || null;
+  }
+
+  // Initialize with frame data
+  async initialize(frames) {
+    this.frames = frames;
+    this.createCanvas();
+    await this.preloadFramesAround(0);
+    this.renderFrame(0);
+  }
+
+  createCanvas() {
+    this.canvas = document.createElement('canvas');
+    this.canvas.className = 'video-player-canvas';
+    // Use willReadFrequently for better performance with getImageData calls during playback
+    this.ctx = this.canvas.getContext('2d', { willReadFrequently: true });
+    this.container.appendChild(this.canvas);
+  }
+
+  // Image loading with cache
+  async loadImage(frameIndex) {
+    if (this.imageCache.has(frameIndex)) {
+      return this.imageCache.get(frameIndex);
+    }
+
+    const frame = this.frames[frameIndex];
+    if (!frame || !frame.imageData) return null;
+
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => {
+        this.addToCache(frameIndex, img);
+        resolve(img);
+      };
+      img.onerror = reject;
+      img.src = frame.imageData.startsWith('data:')
+        ? frame.imageData
+        : `data:image/jpeg;base64,${frame.imageData}`;
+    });
+  }
+
+  // Cache management with LRU eviction
+  addToCache(frameIndex, image) {
+    if (this.imageCache.size >= this.maxCacheSize) {
+      // Remove frames furthest from current position
+      const entries = [...this.imageCache.keys()];
+      entries.sort((a, b) =>
+        Math.abs(a - this.currentFrameIndex) - Math.abs(b - this.currentFrameIndex)
+      );
+      // Remove furthest 10
+      for (let i = entries.length - 1; i >= this.maxCacheSize - 10; i--) {
+        this.imageCache.delete(entries[i]);
+      }
+    }
+    this.imageCache.set(frameIndex, image);
+  }
+
+  // Preload frames around current position
+  async preloadFramesAround(centerIndex) {
+    const start = Math.max(0, centerIndex - this.preloadBehind);
+    const end = Math.min(this.frames.length - 1, centerIndex + this.preloadAhead);
+
+    const loadPromises = [];
+    for (let i = start; i <= end; i++) {
+      if (!this.imageCache.has(i)) {
+        loadPromises.push(this.loadImage(i).catch(() => null));
+      }
+    }
+
+    await Promise.all(loadPromises);
+  }
+
+  // Render a specific frame
+  async renderFrame(frameIndex) {
+    if (frameIndex < 0 || frameIndex >= this.frames.length) return;
+
+    const img = await this.loadImage(frameIndex);
+    if (!img) return;
+
+    // Set canvas size to match image's intrinsic dimensions (not CSS-styled dimensions)
+    // Use naturalWidth/naturalHeight to get the actual image pixel dimensions
+    const imgWidth = img.naturalWidth || img.width;
+    const imgHeight = img.naturalHeight || img.height;
+    
+    if (this.canvas.width !== imgWidth || this.canvas.height !== imgHeight) {
+      this.canvas.width = imgWidth;
+      this.canvas.height = imgHeight;
+      this.originalWidth = imgWidth;
+      this.originalHeight = imgHeight;
+    }
+
+    // Clear and draw
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.ctx.drawImage(img, 0, 0);
+
+    // Cache the frame image data (before overlays) for efficient cursor updates
+    this.cachedFrameData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+    this.cachedFrameIndex = frameIndex;
+
+    // Draw overlays (clicks and cursor)
+    const frame = this.frames[frameIndex];
+    if (frame) {
+      this.drawOverlays(frame);
+    }
+
+    this.currentFrameIndex = frameIndex;
+
+    // Callback
+    if (this.onFrameChange) {
+      this.onFrameChange(frameIndex, this.frames[frameIndex]);
+    }
+  }
+
+  // Playback control
+  play() {
+    if (this.isPlaying) return;
+    if (this.currentFrameIndex >= this.frames.length - 1) {
+      this.seek(0); // Restart from beginning if at end
+    }
+
+    this.isPlaying = true;
+    this.playbackStartTime = performance.now();
+    this.playbackStartFrame = this.currentFrameIndex;
+    this.lastRenderTime = performance.now();
+
+    if (this.onPlayStateChange) this.onPlayStateChange(true);
+
+    this.playbackLoop();
+  }
+
+  pause() {
+    this.isPlaying = false;
+    if (this.animationId) {
+      cancelAnimationFrame(this.animationId);
+      this.animationId = null;
+    }
+    if (this.onPlayStateChange) this.onPlayStateChange(false);
+  }
+
+  playbackLoop() {
+    if (!this.isPlaying) return;
+
+    const now = performance.now();
+    const currentFrame = this.frames[this.currentFrameIndex];
+    const nextFrame = this.frames[this.currentFrameIndex + 1];
+
+    if (!nextFrame) {
+      this.pause();
+      return;
+    }
+
+    // Calculate time to next frame based on recording timestamps
+    const frameDuration = (nextFrame.timestamp - currentFrame.timestamp) / this.playbackSpeed;
+
+    if (now - this.lastRenderTime >= frameDuration) {
+      // Time to advance to next frame
+      this.currentFrameIndex++;
+      this.renderFrame(this.currentFrameIndex);
+      this.lastRenderTime = now;
+
+      // Preload ahead during playback
+      if (this.currentFrameIndex % 10 === 0) {
+        this.preloadFramesAround(this.currentFrameIndex);
+      }
+    } else {
+      // Between frames - interpolate cursor position for smooth movement
+      // Calculate the interpolated timestamp based on elapsed time since last frame
+      const elapsedSinceFrame = (now - this.lastRenderTime) * this.playbackSpeed;
+      const interpolatedTimestamp = currentFrame.timestamp + elapsedSinceFrame;
+
+      // Only update overlays if we have cached frame data and mouse tracking data
+      if (this.cachedFrameData && this.cachedFrameIndex === this.currentFrameIndex &&
+          this.showMouseCursor && this.interactions.some(i => i.type === 'mousemove')) {
+        this.updateOverlaysAtTimestamp(interpolatedTimestamp);
+      }
+    }
+
+    this.animationId = requestAnimationFrame(() => this.playbackLoop());
+  }
+
+  // Update overlays at a specific timestamp (for smooth cursor interpolation)
+  updateOverlaysAtTimestamp(timestamp) {
+    if (!this.cachedFrameData) return;
+
+    // Restore the cached frame image
+    this.ctx.putImageData(this.cachedFrameData, 0, 0);
+
+    // Draw overlays at the interpolated timestamp
+    if (this.showClickIndicators) {
+      const clicks = this.interactions.filter(i =>
+        i.type === 'click' && i.x && i.y &&
+        Math.abs(i.timestamp - timestamp) <= 500
+      );
+      clicks.forEach(click => {
+        const age = Math.abs(timestamp - click.timestamp);
+        this.drawClickRipple(click, age);  // Pass full click object for per-interaction scaling
+      });
+    }
+
+    if (this.showMouseCursor) {
+      const mousePos = this.getMousePositionAtTimestamp(timestamp);
+      if (mousePos) {
+        this.drawMouseCursor(mousePos);  // Pass full position object for viewport scaling
+      }
+    }
+  }
+
+  // Seek to specific frame
+  async seek(frameIndex) {
+    const targetFrame = Math.max(0, Math.min(frameIndex, this.frames.length - 1));
+    await this.preloadFramesAround(targetFrame);
+    await this.renderFrame(targetFrame);
+    this.lastRenderTime = performance.now();
+  }
+
+  // Navigation
+  nextFrame() {
+    if (this.currentFrameIndex < this.frames.length - 1) {
+      this.seek(this.currentFrameIndex + 1);
+    }
+  }
+
+  prevFrame() {
+    if (this.currentFrameIndex > 0) {
+      this.seek(this.currentFrameIndex - 1);
+    }
+  }
+
+  // Speed control
+  setSpeed(speed) {
+    this.playbackSpeed = speed;
+  }
+
+  // Get playback progress
+  getProgress() {
+    if (this.frames.length === 0) return 0;
+    return this.currentFrameIndex / (this.frames.length - 1);
+  }
+
+  // Get duration
+  getDuration() {
+    if (this.frames.length < 2) return 0;
+    return this.frames[this.frames.length - 1].timestamp - this.frames[0].timestamp;
+  }
+
+  // Get current time
+  getCurrentTime() {
+    if (this.frames.length === 0) return 0;
+    return this.frames[this.currentFrameIndex].timestamp - this.frames[0].timestamp;
+  }
+
+  // Load interactions data and extract viewport dimensions
+  loadInteractions(interactions) {
+    this.interactions = interactions || [];
+
+    // Extract viewport dimensions from interaction data (mousemove and click events contain this)
+    // This is crucial for accurate coordinate scaling
+    const interactionWithViewport = this.interactions.find(i =>
+      (i.type === 'mousemove' || i.type === 'click') && i.viewportWidth && i.viewportHeight
+    );
+    if (interactionWithViewport) {
+      this.recordedViewportWidth = interactionWithViewport.viewportWidth;
+      this.recordedViewportHeight = interactionWithViewport.viewportHeight;
+    }
+  }
+
+  // Get the scale factors for coordinate conversion
+  getScaleFactors() {
+    // Use recorded viewport dimensions if available, otherwise fall back to image dimensions
+    const refWidth = this.recordedViewportWidth || this.originalWidth || this.canvas.width;
+    const refHeight = this.recordedViewportHeight || this.originalHeight || this.canvas.height;
+
+    return {
+      x: this.canvas.width / refWidth,
+      y: this.canvas.height / refHeight
+    };
+  }
+
+  // Get scale factors for a specific interaction (uses per-interaction viewport if available)
+  // This handles cases where viewport dimensions change during recording (e.g., browser resize)
+  getScaleFactorsForInteraction(interaction) {
+    // Prefer interaction-specific viewport dimensions, fall back to global recorded values
+    const refWidth = interaction.viewportWidth || this.recordedViewportWidth || this.originalWidth || this.canvas.width;
+    const refHeight = interaction.viewportHeight || this.recordedViewportHeight || this.originalHeight || this.canvas.height;
+    const dpr = interaction.devicePixelRatio || 1;
+
+    // CRITICAL FIX (per Gemini analysis):
+    //
+    // The problem: Click coordinates (clientX/Y) are in CSS pixels, but chrome.tabs.captureVisibleTab
+    // and getDisplayMedia capture at PHYSICAL pixel resolution (CSS pixels × devicePixelRatio).
+    //
+    // On a 2x Retina display with 1440px CSS viewport:
+    // - Physical pixels captured: 1440 × 2 = 2880
+    // - Screenshot (after constraints): e.g., 640px (scaled down from 2880)
+    // - WRONG scale: 640 / 1440 = 0.444 (too large!)
+    // - CORRECT scale: 640 / (1440 × 2) = 0.222
+    //
+    // The fix: Divide by devicePixelRatio to convert CSS viewport to physical pixel space
+    // before calculating the scale factor.
+
+    // Convert viewport dimensions to physical pixel space (what the screenshot was captured from)
+    const physicalRefWidth = refWidth * dpr;
+    const physicalRefHeight = refHeight * dpr;
+
+    // Calculate scale factors (canvas pixels / physical viewport pixels)
+    let scaleX = this.canvas.width / physicalRefWidth;
+    let scaleY = this.canvas.height / physicalRefHeight;
+
+    // Diagnostic logging for debugging click alignment issues
+    console.log('[VideoPlayer] Scale factors:', {
+      canvasWidth: this.canvas.width,
+      canvasHeight: this.canvas.height,
+      refWidth,
+      refHeight,
+      dpr,
+      physicalRefWidth,
+      physicalRefHeight,
+      scaleX,
+      scaleY,
+      interactionX: interaction.x,
+      interactionY: interaction.y,
+      calculatedCanvasX: interaction.x * scaleX,
+      calculatedCanvasY: interaction.y * scaleY
+    });
+
+    return { x: scaleX, y: scaleY };
+  }
+
+  // Get mouse position at timestamp (interpolated)
+  // Returns full position object with viewport dimensions for accurate scaling
+  getMousePositionAtTimestamp(timestamp) {
+    const mouseMoves = this.interactions.filter(i => i.type === 'mousemove');
+    if (mouseMoves.length === 0) return null;
+
+    let before = null;
+    let after = null;
+
+    for (const move of mouseMoves) {
+      if (move.timestamp <= timestamp) {
+        before = move;
+      } else if (!after && move.timestamp > timestamp) {
+        after = move;
+        break;
+      }
+    }
+
+    if (!before) return after ? {
+      x: after.x,
+      y: after.y,
+      viewportWidth: after.viewportWidth,
+      viewportHeight: after.viewportHeight,
+      devicePixelRatio: after.devicePixelRatio
+    } : null;
+
+    if (!after) return {
+      x: before.x,
+      y: before.y,
+      viewportWidth: before.viewportWidth,
+      viewportHeight: before.viewportHeight,
+      devicePixelRatio: before.devicePixelRatio
+    };
+
+    // Interpolate position, use 'before' viewport for scaling
+    const t = (timestamp - before.timestamp) / (after.timestamp - before.timestamp);
+    return {
+      x: before.x + (after.x - before.x) * t,
+      y: before.y + (after.y - before.y) * t,
+      viewportWidth: before.viewportWidth,
+      viewportHeight: before.viewportHeight,
+      devicePixelRatio: before.devicePixelRatio
+    };
+  }
+
+  // Draw click ripple effect - DISABLED
+  // The complex scaling calculation was causing click indicators to appear in wrong positions.
+  // Click visualization is now handled by drawMouseCursor which shows a click circle when
+  // there's a click at the current timestamp (using the working mousemove coordinate system).
+  drawClickRipple(click, age, maxAge = 500) {
+    // Intentionally empty - click indicators now shown at cursor position
+    // See drawMouseCursor() for click visualization
+  }
+
+  // Draw mouse cursor with optional click indicator
+  // Accepts position object with viewport dimensions for per-interaction scaling
+  // When isClicking is true, draws a larger click circle around the cursor
+  drawMouseCursor(posObj, isClicking = false, clickAge = 0) {
+    // Use per-interaction viewport scaling for accurate positioning
+    const scale = this.getScaleFactorsForInteraction(posObj);
+    const cx = posObj.x * scale.x;
+    const cy = posObj.y * scale.y;
+
+    this.ctx.save();
+    this.ctx.translate(cx, cy);
+
+    // Draw click indicator circle (bigger, more visible) when clicking
+    if (isClicking) {
+      const maxAge = 500;
+      const progress = Math.min(clickAge / maxAge, 1);
+      const alpha = 1 - progress;
+      const radius = 15 + (25 * progress); // Starts at 15, expands to 40
+
+      // Outer expanding ring
+      this.ctx.beginPath();
+      this.ctx.arc(0, 0, radius, 0, Math.PI * 2);
+      this.ctx.strokeStyle = `rgba(76, 175, 80, ${alpha})`; // Green color
+      this.ctx.lineWidth = 3;
+      this.ctx.stroke();
+
+      // Inner solid circle
+      this.ctx.beginPath();
+      this.ctx.arc(0, 0, 8, 0, Math.PI * 2);
+      this.ctx.fillStyle = `rgba(76, 175, 80, ${alpha * 0.6})`;
+      this.ctx.fill();
+    }
+
+    // Draw cursor arrow
+    this.ctx.fillStyle = 'white';
+    this.ctx.strokeStyle = 'black';
+    this.ctx.lineWidth = 1;
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(0, 0);
+    this.ctx.lineTo(0, 18);
+    this.ctx.lineTo(4, 14);
+    this.ctx.lineTo(8, 22);
+    this.ctx.lineTo(11, 21);
+    this.ctx.lineTo(7, 13);
+    this.ctx.lineTo(13, 13);
+    this.ctx.closePath();
+
+    this.ctx.fill();
+    this.ctx.stroke();
+    this.ctx.restore();
+  }
+
+  // Draw all overlays
+  drawOverlays(frame) {
+    const timestamp = frame.timestamp;
+
+    // Find if there's an active click near this timestamp
+    let activeClick = null;
+    let clickAge = 0;
+    if (this.showClickIndicators) {
+      const clicks = this.interactions.filter(i =>
+        i.type === 'click' && i.x && i.y &&
+        Math.abs(i.timestamp - timestamp) <= 500
+      );
+      if (clicks.length > 0) {
+        // Find the closest click
+        activeClick = clicks.reduce((closest, click) => {
+          const age = Math.abs(timestamp - click.timestamp);
+          const closestAge = Math.abs(timestamp - closest.timestamp);
+          return age < closestAge ? click : closest;
+        });
+        clickAge = Math.abs(timestamp - activeClick.timestamp);
+      }
+    }
+
+    // Draw mouse cursor with click indicator if there's an active click
+    if (this.showMouseCursor) {
+      const mousePos = this.getMousePositionAtTimestamp(timestamp);
+      if (mousePos) {
+        const isClicking = activeClick !== null;
+        this.drawMouseCursor(mousePos, isClicking, clickAge);
+      }
+    }
+  }
+
+  // Setters for overlay options
+  setShowClickIndicators(show) {
+    this.showClickIndicators = show;
+    this.renderFrame(this.currentFrameIndex);
+  }
+
+  setShowMouseCursor(show) {
+    this.showMouseCursor = show;
+    this.renderFrame(this.currentFrameIndex);
+  }
+
+  // Cleanup - CRITICAL for memory management
+  destroy() {
+    this.pause();
+    this.imageCache.clear();
+    if (this.canvas && this.canvas.parentNode) {
+      this.canvas.parentNode.removeChild(this.canvas);
+    }
+    this.canvas = null;
+    this.ctx = null;
+    this.frames = [];
+  }
+}
+
+// Export for use in frame-editor.js
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = VideoPlayer;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamicu/chromedebug-mcp",
-  "version": "2.7.1",
+  "version": "2.7.4",
   "description": "ChromeDebug MCP - MCP server that provides full control over a Chrome browser instance for debugging and automation with AI assistants like Claude Code",
   "main": "src/index.js",
   "type": "module",

package/scripts/postinstall.js

@@ -46,6 +46,6 @@ console.log('ℹ️  No manual server startup needed!');
 console.log('   Claude Code automatically starts both servers when it runs chromedebug-mcp\n');
 
 console.log('💎 Want unlimited recordings?');
-console.log('   Upgrade to Pro: https://chromedebug.com/buy/996773cb-682b-430f-b9e3-9ce2130bd967\n');
+console.log('   Upgrade to Pro: https://chromedebug.com/checkout/buy/996773cb-682b-430f-b9e3-9ce2130bd967\n');
 
 console.log('📚 Full documentation: https://github.com/dynamicupgrade/ChromeDebug#readme\n');

package/scripts/webpack.config.free.cjs

@@ -70,6 +70,12 @@ module.exports = {
         // Copy Pro features needed for frame editor
         { from: 'chrome-extension/pro/jszip.min.js', to: 'pro/jszip.min.js' },
 
+        // Video player feature files (needed for frame editor styling)
+        { from: 'chrome-extension/pro/video-player.js', to: 'pro/video-player.js' },
+        { from: 'chrome-extension/pro/video-exporter.js', to: 'pro/video-exporter.js' },
+        { from: 'chrome-extension/pro/video-player.css', to: 'pro/video-player.css' },
+        { from: 'chrome-extension/pro/lib/mp4-muxer.min.js', to: 'pro/lib/mp4-muxer.min.js' },
+
         // Copy README
         { from: 'chrome-extension/README.md', to: 'README.md' }
       ]

package/scripts/webpack.config.pro.cjs

@@ -78,6 +78,12 @@ module.exports = {
         { from: 'chrome-extension/pro/enhanced-capture.js', to: 'pro/enhanced-capture.js' },
         { from: 'chrome-extension/pro/jszip.min.js', to: 'pro/jszip.min.js' },
 
+        // Video player feature files
+        { from: 'chrome-extension/pro/video-player.js', to: 'pro/video-player.js' },
+        { from: 'chrome-extension/pro/video-exporter.js', to: 'pro/video-exporter.js' },
+        { from: 'chrome-extension/pro/video-player.css', to: 'pro/video-player.css' },
+        { from: 'chrome-extension/pro/lib/mp4-muxer.min.js', to: 'pro/lib/mp4-muxer.min.js' },
+
         // Copy README
         { from: 'chrome-extension/README.md', to: 'README.md' }
       ]

package/src/chrome-controller.js

@@ -1978,12 +1978,12 @@ export class ChromeController {
   }
 
   // Workflow recording methods
-  async storeWorkflowRecording(sessionId, url, title, includeLogs, actions, logs, name = null, screenshotSettings = null, functionTraces = null) {
+  async storeWorkflowRecording(sessionId, url, title, includeLogs, actions, logs, name = null, screenshotSettings = null, functionTraces = null, recordingMode = 'workflow') {
     try {
       const { database } = await import('./database.js');
 
       // Store the workflow recording
-      const workflowId = database.storeWorkflowRecording(sessionId, url, title, includeLogs, name, screenshotSettings);
+      const workflowId = database.storeWorkflowRecording(sessionId, url, title, includeLogs, name, screenshotSettings, recordingMode);
 
       // Merge function traces into actions if provided
       let allActions = [...actions];
@@ -2035,10 +2035,10 @@ export class ChromeController {
     }
   }
 
-  async listWorkflowRecordings() {
+  async listWorkflowRecordings(recordingModeFilter = null) {
     try {
       const { database } = await import('./database.js');
-      const recordings = database.listWorkflowRecordings();
+      const recordings = database.listWorkflowRecordings(recordingModeFilter);
       return { recordings };
     } catch (error) {
       logger.error('Error listing workflow recordings:', error);
@@ -2213,10 +2213,10 @@ export class ChromeController {
     }
   }
 
-  async storeFrameBatch(sessionId, frames, sessionName = null) {
+  async storeFrameBatch(sessionId, frames, sessionName = null, isVideoMode = false) {
     try {
       const { database } = await import('./database.js');
-      const result = await database.storeFrameBatch(sessionId, frames, sessionName);
+      const result = await database.storeFrameBatch(sessionId, frames, sessionName, isVideoMode);
 
       // After storing frames, attempt to associate any deferred logs
       if (result && result.id) {