@dynamicu/chromedebug-mcp 2.7.2 → 2.7.4

package/src/database.js

@@ -292,6 +292,8 @@ class ChromeDebugDatabase {
         xpath TEXT,
         x INTEGER,
         y INTEGER,
+        viewport_width INTEGER,
+        viewport_height INTEGER,
         value TEXT,
         text TEXT,
         key TEXT,
@@ -303,6 +305,24 @@ class ChromeDebugDatabase {
       )
     `);
 
+    // Add viewport columns to screen_interactions if they don't exist (migration for existing DBs)
+    try {
+      this.db.exec(`ALTER TABLE screen_interactions ADD COLUMN viewport_width INTEGER`);
+    } catch (e) {
+      // Column already exists, ignore
+    }
+    try {
+      this.db.exec(`ALTER TABLE screen_interactions ADD COLUMN viewport_height INTEGER`);
+    } catch (e) {
+      // Column already exists, ignore
+    }
+    // Add devicePixelRatio column (critical for Retina/HiDPI display scaling)
+    try {
+      this.db.exec(`ALTER TABLE screen_interactions ADD COLUMN device_pixel_ratio REAL`);
+    } catch (e) {
+      // Column already exists, ignore
+    }
+
     // Workflow recordings table
     this.db.exec(`
       CREATE TABLE IF NOT EXISTS workflow_recordings (
@@ -625,7 +645,14 @@ class ChromeDebugDatabase {
       logger.debug('[Database] Migrating workflow_recordings table to add screenshot_settings column');
       this.db.exec(`ALTER TABLE workflow_recordings ADD COLUMN screenshot_settings TEXT`);
     }
-    
+
+    // Migration for recording_mode support (workflow vs screenshot)
+    const hasRecordingMode = columns.some(col => col.name === 'recording_mode');
+    if (!hasRecordingMode) {
+      logger.debug('[Database] Migrating workflow_recordings table to add recording_mode column');
+      this.db.exec(`ALTER TABLE workflow_recordings ADD COLUMN recording_mode TEXT DEFAULT 'workflow'`);
+    }
+
     // Check if workflow_actions table has screenshot_data column
     const actionColumns = this.db.pragma(`table_info(workflow_actions)`);
     const hasScreenshotData = actionColumns.some(col => col.name === 'screenshot_data');
@@ -664,23 +691,30 @@ class ChromeDebugDatabase {
       logger.debug('[Database] Migrating recordings table to add name column');
       this.db.exec(`ALTER TABLE recordings ADD COLUMN name TEXT`);
     }
+
+    // Migration for video mode support
+    const hasIsVideoMode = recordingsColumns.some(col => col.name === 'is_video_mode');
+    if (!hasIsVideoMode) {
+      logger.debug('[Database] Migrating recordings table to add is_video_mode column');
+      this.db.exec(`ALTER TABLE recordings ADD COLUMN is_video_mode INTEGER DEFAULT 0`);
+    }
   }
 
   // Store a recording session
-  storeRecording(sessionId, type = 'frame_capture', recordingType = 'continuous', userNote = null, name = null) {
+  storeRecording(sessionId, type = 'frame_capture', recordingType = 'continuous', userNote = null, name = null, isVideoMode = false) {
     this.init();
 
     const stmt = this.db.prepare(`
-      INSERT OR REPLACE INTO recordings (id, session_id, type, timestamp, updated_at, recording_type, user_note, name)
-      VALUES (?, ?, ?, ?, CURRENT_TIMESTAMP, ?, ?, ?)
+      INSERT OR REPLACE INTO recordings (id, session_id, type, timestamp, updated_at, recording_type, user_note, name, is_video_mode)
+      VALUES (?, ?, ?, ?, CURRENT_TIMESTAMP, ?, ?, ?, ?)
     `);
 
     // Use base ID instead of prefixed ID
     const recordingId = sessionId;
     const timestamp = Date.now();
 
-    logger.debug(`[Database] Storing recording: ${recordingId} for session: ${sessionId}, type: ${recordingType}, name: ${name || 'none'}`);
-    const result = stmt.run(recordingId, sessionId, type, timestamp, recordingType, userNote, name);
+    logger.debug(`[Database] Storing recording: ${recordingId} for session: ${sessionId}, type: ${recordingType}, name: ${name || 'none'}, isVideoMode: ${isVideoMode}`);
+    const result = stmt.run(recordingId, sessionId, type, timestamp, recordingType, userNote, name, isVideoMode ? 1 : 0);
     logger.debug(`[Database] Recording stored with changes: ${result.changes}, lastInsertRowid: ${result.lastInsertRowid}`);
 
     return recordingId;
@@ -740,18 +774,18 @@ class ChromeDebugDatabase {
   */
 
   // Store frame batch
-  storeFrameBatch(sessionId, frames, name = null) {
+  storeFrameBatch(sessionId, frames, name = null, isVideoMode = false) {
     this.init();
 
     // Use base ID instead of prefixed ID
     const recordingId = sessionId;
 
-    logger.debug(`[storeFrameBatch] DEATH SPIRAL FIX: Processing ${frames.length} frames for session ${sessionId}`);
+    logger.debug(`[storeFrameBatch] DEATH SPIRAL FIX: Processing ${frames.length} frames for session ${sessionId}, isVideoMode: ${isVideoMode}`);
 
     // Ensure recording exists (but don't overwrite existing)
     const existingRecording = this.getRecording(sessionId);
     if (!existingRecording) {
-      this.storeRecording(sessionId, 'frame_capture', 'continuous', null, name);
+      this.storeRecording(sessionId, 'frame_capture', 'continuous', null, name, isVideoMode);
     } else {
       logger.debug(`[storeFrameBatch] Using existing recording: ${existingRecording.id}`);
       // Update name if provided and different
@@ -760,6 +794,12 @@ class ChromeDebugDatabase {
         updateStmt.run(name, sessionId);
         logger.debug(`[storeFrameBatch] Updated recording name to: ${name}`);
       }
+      // Update isVideoMode if provided and different (ensure video mode is properly tagged)
+      if (isVideoMode && existingRecording.is_video_mode !== 1) {
+        const updateModeStmt = this.db.prepare(`UPDATE recordings SET is_video_mode = ? WHERE id = ?`);
+        updateModeStmt.run(1, sessionId);
+        logger.debug(`[storeFrameBatch] Updated recording isVideoMode to: true`);
+      }
     }
     
     // Check existing frame count BEFORE insertion
@@ -1351,12 +1391,31 @@ class ChromeDebugDatabase {
     
     // Get all interactions for this recording
     const interactionsStmt = this.db.prepare(`
-      SELECT * FROM screen_interactions 
+      SELECT * FROM screen_interactions
       WHERE recording_id = ?
       ORDER BY timestamp ASC
     `);
-    const interactions = interactionsStmt.all(recording.id);
-    
+    const rawInteractions = interactionsStmt.all(recording.id);
+
+    // Transform to camelCase for API consistency
+    const interactions = rawInteractions.map(i => ({
+      id: i.id,
+      index: i.interaction_index,
+      type: i.type,
+      selector: i.selector,
+      xpath: i.xpath,
+      x: i.x,
+      y: i.y,
+      viewportWidth: i.viewport_width,
+      viewportHeight: i.viewport_height,
+      devicePixelRatio: i.device_pixel_ratio,  // Critical for Retina/HiDPI display scaling
+      value: i.value,
+      text: i.text,
+      key: i.key,
+      timestamp: i.timestamp,
+      frameIndex: i.frame_index
+    }));
+
     return {
       type: 'frame_capture',
       sessionId: recording.session_id,
@@ -1371,7 +1430,7 @@ class ChromeDebugDatabase {
     this.init();
 
     const stmt = this.db.prepare(`
-      SELECT session_id, total_frames, timestamp, name
+      SELECT session_id, total_frames, timestamp, name, is_video_mode
       FROM recordings
       WHERE type = 'frame_capture'
       ORDER BY timestamp DESC
@@ -1382,7 +1441,8 @@ class ChromeDebugDatabase {
       sessionId: r.session_id,
       totalFrames: r.total_frames,
       timestamp: r.timestamp,
-      name: r.name
+      name: r.name,
+      isVideoMode: r.is_video_mode === 1
     }));
   }
 
@@ -1433,6 +1493,38 @@ class ChromeDebugDatabase {
     return result.changes > 0;
   }
 
+  // Delete all screen recordings
+  deleteAllScreenRecordings() {
+    this.init();
+
+    const transaction = this.db.transaction(() => {
+      // Delete all deferred logs
+      const deleteDeferredLogsStmt = this.db.prepare(`DELETE FROM deferred_logs`);
+      deleteDeferredLogsStmt.run();
+
+      // Delete all screen interactions
+      const deleteInteractionsStmt = this.db.prepare(`DELETE FROM screen_interactions`);
+      deleteInteractionsStmt.run();
+
+      // Delete all console logs (will cascade from frames deletion, but explicit for safety)
+      const deleteLogsStmt = this.db.prepare(`DELETE FROM console_logs`);
+      deleteLogsStmt.run();
+
+      // Delete all frames
+      const deleteFramesStmt = this.db.prepare(`DELETE FROM frames`);
+      deleteFramesStmt.run();
+
+      // Delete all recordings (screen recordings only, type = 'frame_capture')
+      const deleteRecordingsStmt = this.db.prepare(`DELETE FROM recordings WHERE type = 'frame_capture'`);
+      const result = deleteRecordingsStmt.run();
+
+      logger.debug(`[Database] Cleared screen recordings: ${result.changes} recordings deleted`);
+      return result.changes;
+    });
+
+    return transaction();
+  }
+
   // Delete workflow recording
   deleteWorkflowRecording(recordingId) {
     this.init();
@@ -1469,29 +1561,30 @@ class ChromeDebugDatabase {
   }
 
   // Store workflow recording
-  storeWorkflowRecording(sessionId, url, title, includeLogs = false, name = null, screenshotSettings = null) {
+  storeWorkflowRecording(sessionId, url, title, includeLogs = false, name = null, screenshotSettings = null, recordingMode = 'workflow') {
     this.init();
-    
-    logger.debug('[Database] Storing workflow recording with name:', name, 'sessionId:', sessionId);
-    
+
+    logger.debug('[Database] Storing workflow recording with name:', name, 'sessionId:', sessionId, 'recordingMode:', recordingMode);
+
     const stmt = this.db.prepare(`
-      INSERT OR REPLACE INTO workflow_recordings (id, session_id, name, url, title, timestamp, include_logs, screenshot_settings, updated_at)
-      VALUES (?, ?, ?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP)
+      INSERT OR REPLACE INTO workflow_recordings (id, session_id, name, url, title, timestamp, include_logs, screenshot_settings, recording_mode, updated_at)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP)
     `);
-    
+
     // sessionId already contains workflow_ prefix from extension, use it directly
     const recordingId = sessionId;
     const timestamp = Date.now();
 
     stmt.run(
       recordingId,
-      sessionId, 
+      sessionId,
       name,
-      url, 
-      title, 
-      timestamp, 
+      url,
+      title,
+      timestamp,
       includeLogs ? 1 : 0,
-      screenshotSettings ? JSON.stringify(screenshotSettings) : null
+      screenshotSettings ? JSON.stringify(screenshotSettings) : null,
+      recordingMode
     );
     return recordingId;
   }
@@ -1795,16 +1888,32 @@ class ChromeDebugDatabase {
   }
 
   // List all workflow recordings
-  listWorkflowRecordings() {
+  listWorkflowRecordings(recordingModeFilter = null) {
     this.init();
-    
-    const stmt = this.db.prepare(`
-      SELECT id, session_id, name, url, title, total_actions, timestamp, screenshot_settings
-      FROM workflow_recordings 
-      ORDER BY timestamp DESC
-    `);
-    
-    return stmt.all().map(r => ({
+
+    let query = `
+      SELECT id, session_id, name, url, title, total_actions, timestamp, screenshot_settings, recording_mode
+      FROM workflow_recordings
+    `;
+
+    // Add filter if specified
+    // For 'workflow' filter, also match NULL values (old recordings before recording_mode was added)
+    if (recordingModeFilter && recordingModeFilter !== 'all') {
+      if (recordingModeFilter === 'workflow') {
+        query += ` WHERE (recording_mode = ? OR recording_mode IS NULL)`;
+      } else {
+        query += ` WHERE recording_mode = ?`;
+      }
+    }
+
+    query += ` ORDER BY timestamp DESC`;
+
+    const stmt = this.db.prepare(query);
+    const results = recordingModeFilter && recordingModeFilter !== 'all'
+      ? stmt.all(recordingModeFilter)
+      : stmt.all();
+
+    return results.map(r => ({
       id: r.id,
       session_id: r.session_id,
       name: r.name,
@@ -1812,7 +1921,8 @@ class ChromeDebugDatabase {
       title: r.title,
       total_actions: r.total_actions,
       timestamp: r.timestamp,
-      screenshot_settings: r.screenshot_settings ? JSON.parse(r.screenshot_settings) : null
+      screenshot_settings: r.screenshot_settings ? JSON.parse(r.screenshot_settings) : null,
+      recording_mode: r.recording_mode || 'workflow'
     }));
   }
 
@@ -2020,11 +2130,11 @@ class ChromeDebugDatabase {
     
     const stmt = this.db.prepare(`
       INSERT OR REPLACE INTO screen_interactions
-      (recording_id, interaction_index, type, selector, xpath, x, y, value, text, key, timestamp, frame_index,
+      (recording_id, interaction_index, type, selector, xpath, x, y, viewport_width, viewport_height, device_pixel_ratio, value, text, key, timestamp, frame_index,
        element_html, component_data, event_handlers, element_state, performance_metrics)
-      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
     `);
-    
+
     const transaction = this.db.transaction(() => {
       interactions.forEach((interaction, index) => {
         stmt.run(
@@ -2035,6 +2145,9 @@ class ChromeDebugDatabase {
           interaction.xpath || null,
           interaction.x || null,
           interaction.y || null,
+          interaction.viewportWidth || null,
+          interaction.viewportHeight || null,
+          interaction.devicePixelRatio || null,  // Critical for Retina/HiDPI display scaling
           interaction.value || null,
           interaction.text || null,
           interaction.key || null,
@@ -2117,6 +2230,8 @@ class ChromeDebugDatabase {
         xpath,
         x,
         y,
+        viewport_width,
+        viewport_height,
         value,
         text,
         key,
@@ -2149,6 +2264,9 @@ class ChromeDebugDatabase {
       xpath: interaction.xpath,
       x: interaction.x,
       y: interaction.y,
+      viewportWidth: interaction.viewport_width,
+      viewportHeight: interaction.viewport_height,
+      devicePixelRatio: interaction.device_pixel_ratio,  // Critical for Retina/HiDPI display scaling
       value: interaction.value,
       text: interaction.text,
       key: interaction.key,

package/src/http-server.js

@@ -291,16 +291,16 @@ async function startHttpServer(chromeController = null, targetPort = null) {
     authorize(PERMISSIONS.WORKFLOW_WRITE),
     createValidator(workflowRecordingSchema),
     async (req, res) => {
-    const { sessionId, url, title, includeLogs, actions, logs, functionTraces, name, screenshotSettings } = req.body;
+    const { sessionId, url, title, includeLogs, actions, logs, functionTraces, name, screenshotSettings, recordingMode } = req.body;
 
-    logger.info('[HTTP Server] Received workflow recording with name:', name);
+    logger.info('[HTTP Server] Received workflow recording with name:', name, 'recordingMode:', recordingMode || 'workflow');
     logger.info('[HTTP Server] Function traces count:', functionTraces ? functionTraces.length : 0);
     if (!sessionId || !actions) {
       return res.status(400).json({ error: 'sessionId and actions are required' });
     }
 
     try {
-      const result = await activeController.storeWorkflowRecording(sessionId, url, title, includeLogs, actions, logs, name, screenshotSettings, functionTraces);
+      const result = await activeController.storeWorkflowRecording(sessionId, url, title, includeLogs, actions, logs, name, screenshotSettings, functionTraces, recordingMode || 'workflow');
       res.json(result);
     } catch (error) {
       logger.error('Error storing workflow recording:', error);
@@ -331,7 +331,9 @@ async function startHttpServer(chromeController = null, targetPort = null) {
     authorize(PERMISSIONS.WORKFLOW_READ),
     async (req, res) => {
     try {
-      const result = await activeController.listWorkflowRecordings();
+      // Support filtering by recording_mode: 'all', 'workflow', 'screenshot'
+      const recordingModeFilter = req.query.mode || null;
+      const result = await activeController.listWorkflowRecordings(recordingModeFilter);
       res.json(result);
     } catch (error) {
       logger.error('Error listing workflow recordings:', error);
@@ -475,7 +477,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
     logger.debug(' Raw body:', req.body);
     
     // Handle both JSON and FormData
-    let sessionId, frames, sessionName;
+    let sessionId, frames, sessionName, isVideoMode;
 
     if (req.headers['content-type']?.includes('application/json')) {
       logger.debug(' Processing as JSON request');
@@ -494,21 +496,25 @@ async function startHttpServer(chromeController = null, targetPort = null) {
       sessionId = value.sessionId;
       frames = value.frames;
       sessionName = value.sessionName || null;
+      isVideoMode = value.isVideoMode || false;
 
-      logger.debug(' JSON parsed successfully:', { sessionId, frameCount: frames?.length, sessionName });
+      logger.debug(' JSON parsed successfully:', { sessionId, frameCount: frames?.length, sessionName, isVideoMode });
     } else {
       logger.debug(' Processing as FormData request');
-      
+
       // FormData request - manual validation
       sessionId = req.body.sessionId;
       sessionName = req.body.sessionName || null;
+      // Parse isVideoMode from FormData (can be string 'true'/'false' or boolean)
+      isVideoMode = req.body.isVideoMode === 'true' || req.body.isVideoMode === true;
 
       logger.debug(' SessionId from FormData:', sessionId);
       logger.debug(' SessionName from FormData:', sessionName);
+      logger.debug(' IsVideoMode from FormData:', isVideoMode);
       logger.debug(' Frames field type:', typeof req.body.frames);
       logger.debug(' Frames field length:', req.body.frames?.length);
       logger.debug(' Frames field preview:', req.body.frames?.substring(0, 200));
-      
+
       try {
         if (!req.body.frames) {
           logger.debug(' ❌ No frames field in FormData');
@@ -520,10 +526,10 @@ async function startHttpServer(chromeController = null, targetPort = null) {
           logger.debug(' Parsed frames count:', frames?.length);
           logger.debug(' First frame structure:', frames?.[0] ? Object.keys(frames[0]) : 'no frames');
         }
-        
+
         logger.debug(' 🔄 Validating parsed FormData...');
         // Validate the parsed data
-        const { error, value } = frameBatchSchema.validate({ sessionId, frames, sessionName });
+        const { error, value } = frameBatchSchema.validate({ sessionId, frames, sessionName, isVideoMode });
         if (error) {
           logger.debug(' ❌ FormData validation failed:', error.details);
           return res.status(400).json({
@@ -537,6 +543,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
         sessionId = value.sessionId;
         frames = value.frames;
         sessionName = value.sessionName;
+        isVideoMode = value.isVideoMode || false;
 
         logger.debug(' ✅ FormData validation successful');
       } catch (parseError) {
@@ -566,8 +573,9 @@ async function startHttpServer(chromeController = null, targetPort = null) {
       }
 
       logger.debug(' Session name:', sessionName || 'none');
+      logger.debug(' Is video mode:', isVideoMode);
 
-      const result = await activeController.storeFrameBatch(sessionId, frames, sessionName);
+      const result = await activeController.storeFrameBatch(sessionId, frames, sessionName, isVideoMode);
       logger.debug(' ✅ Frame batch storage result:', result);
 
       logger.debug(' Result recording ID:', result?.id);
@@ -1090,6 +1098,42 @@ async function startHttpServer(chromeController = null, targetPort = null) {
     }
   });
 
+  // Delete all screen recordings
+  app.delete('/chromedebug/recordings/all',
+    authenticate,
+    authorize(PERMISSIONS.WORKFLOW_DELETE),
+    async (req, res) => {
+    try {
+      const deletedCount = activeController.database.deleteAllScreenRecordings();
+      res.json({
+        success: true,
+        deletedCount,
+        message: `Deleted ${deletedCount} screen recording(s)`
+      });
+    } catch (error) {
+      logger.error('Error deleting all screen recordings:', error);
+      res.status(500).json({ error: 'Failed to delete all screen recordings', details: error.message });
+    }
+  });
+
+  // Delete all workflow recordings
+  app.delete('/chromedebug/workflow-recordings/all',
+    authenticate,
+    authorize(PERMISSIONS.WORKFLOW_DELETE),
+    async (req, res) => {
+    try {
+      const deletedCount = activeController.database.clearWorkflowRecordings();
+      res.json({
+        success: true,
+        deletedCount,
+        message: `Deleted ${deletedCount} workflow recording(s)`
+      });
+    } catch (error) {
+      logger.error('Error deleting all workflow recordings:', error);
+      res.status(500).json({ error: 'Failed to delete all workflow recordings', details: error.message });
+    }
+  });
+
   // Save screen interactions for a recording
   app.post('/chromedebug/screen-interactions/:sessionId',
     authenticate,

package/src/validation/schemas.js

@@ -81,13 +81,15 @@ export const workflowRecordingSchema = Joi.object({
     format: Joi.string().valid('png', 'jpeg').optional().allow(null),
     enabled: Joi.boolean().optional().allow(null),
     maxWidth: Joi.number().integer().optional().allow(null)
-  }).optional().allow(null)
+  }).optional().allow(null),
+  recordingMode: Joi.string().valid('workflow', 'screenshot').optional().default('workflow')
 });
 
 // Frame batch schema
 export const frameBatchSchema = Joi.object({
   sessionId: patterns.sessionId.required(),
   sessionName: Joi.string().max(200).optional().allow(null), // Optional session name for recordings
+  isVideoMode: Joi.boolean().optional().default(false), // Whether this is a video mode recording
   frames: Joi.array().items(
     Joi.object({
       timestamp: Joi.number().required(),
@@ -96,6 +98,8 @@ export const frameBatchSchema = Joi.object({
       consoleLog: Joi.string().optional(),
       frameIndex: Joi.number().integer().min(0).optional(),
       index: Joi.number().integer().min(0).optional(), // Chrome extension sends this
+      isSynthetic: Joi.boolean().optional(), // Synthetic frames for early log capture
+      isManual: Joi.boolean().optional(), // Manual snapshot frames
       logs: Joi.array().items(
         Joi.object({
           level: Joi.string().valid(...VALID_LOG_LEVELS).required(),
@@ -110,6 +114,8 @@ export const frameBatchSchema = Joi.object({
           timestamp: Joi.number().required(),
           x: Joi.number().when('type', { is: 'click', then: Joi.required(), otherwise: Joi.optional() }),
           y: Joi.number().when('type', { is: 'click', then: Joi.required(), otherwise: Joi.optional() }),
+          viewportWidth: Joi.number().optional(),  // For coordinate scaling during playback
+          viewportHeight: Joi.number().optional(), // For coordinate scaling during playback
           target: Joi.string().optional(),
           targetId: Joi.string().optional(),
           scrollX: Joi.number().when('type', { is: 'scroll', then: Joi.required(), otherwise: Joi.optional() }),
@@ -178,6 +184,10 @@ export const screenInteractionsSchema = Joi.object({
       timestamp: Joi.number().required(),
       x: Joi.number().optional(),
       y: Joi.number().optional(),
+      pageX: Joi.number().optional(),      // Document-relative coordinates
+      pageY: Joi.number().optional(),      // Document-relative coordinates
+      viewportWidth: Joi.number().optional(),  // For coordinate scaling during playback
+      viewportHeight: Joi.number().optional(), // For coordinate scaling during playback
       key: Joi.string().optional(),
       target: Joi.string().optional(),
       // Basic element fields that were previously blocked