@zibby/mcp-browser 0.1.5 → 0.1.6

package/bin/mcp-browser-zibby.js

@@ -1,606 +0,0 @@
-#!/usr/bin/env node
-/**
- * Zibby MCP Browser
- * 
- * Wrapper around official @playwright/mcp that:
- * 1. Injects stable IDs via --init-script
- * 2. Records events to events.json WITH stable IDs
- * 3. Passes through all other functionality unchanged
- */
-
-const { spawn, execFileSync } = require('child_process');
-const fs = require('fs');
-const path = require('path');
-
-// ========== Configuration ==========
-const STABLE_ID_SCRIPT = path.join(__dirname, '..', 'src', 'stable-id-inject.js');
-const DEBUG_LOG = path.join(require('os').tmpdir(), 'zibby-mcp-debug.log');
-
-function debug(msg) {
-  const line = `[${new Date().toISOString()}] ${msg}\n`;
-  fs.appendFileSync(DEBUG_LOG, line);
-  console.error(`[Zibby MCP] ${msg}`);
-}
-
-// Append to debug log (don't overwrite - multiple MCP instances)
-fs.appendFileSync(DEBUG_LOG, `\n=== Zibby MCP Started ${new Date().toISOString()} PID:${process.pid} ===\n`);
-
-// ========== Event Recording ==========
-let nodeSessionPath = null;
-let events = [];
-let videoStartTime = null;
-let lastSessionKey = null;  // Track when session changes
-
-function getSessionInfoPath() {
-  const searchPaths = [
-    process.env.ZIBBY_SESSION_INFO,
-    path.join(process.cwd(), '.zibby/output/.session-info.json'),
-    path.join(process.cwd(), 'test-results/.session-info.json'),
-  ].filter(Boolean);
-  
-  for (const p of searchPaths) {
-    if (fs.existsSync(p)) return p;
-  }
-  return null;
-}
-
-function loadSessionInfo() {
-  try {
-    const sessionInfoPath = getSessionInfoPath();
-    
-    if (sessionInfoPath) {
-      const sessionInfo = JSON.parse(fs.readFileSync(sessionInfoPath, 'utf-8'));
-      const nodeName = sessionInfo.currentNode || 'execute_live';
-      const sessionKey = `${sessionInfo.sessionPath}:${nodeName}`;
-      
-      // Only update if session changed
-      if (sessionKey !== lastSessionKey) {
-        lastSessionKey = sessionKey;
-        
-        // Reset for new session/node
-        if (sessionInfo.sessionPath) {
-          nodeSessionPath = path.join(sessionInfo.sessionPath, nodeName);
-          fs.mkdirSync(nodeSessionPath, { recursive: true });
-          
-          // Reset events for new session
-          events = [];
-          videoStartTime = null;
-          
-          debug(`📁 NEW session/node: ${nodeSessionPath}`);
-        }
-      }
-    }
-  } catch (err) {
-    debug(`❌ Session load error: ${err.message}`);
-  }
-}
-
-function formatTime(ms) {
-  const totalSeconds = Math.floor(ms / 1000);
-  const hours = Math.floor(totalSeconds / 3600);
-  const minutes = Math.floor((totalSeconds % 3600) / 60);
-  const seconds = totalSeconds % 60;
-  const milliseconds = ms % 1000;
-  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${String(milliseconds).padStart(3, '0')}`;
-}
-
-function recordEvent(type, data) {
-  // Re-check session info on each event (session may have changed)
-  loadSessionInfo();
-  
-  if (!nodeSessionPath) return;
-  
-  const timestamp = Date.now();
-  
-  // Record events with raw timestamps first (will recalculate on close)
-  if (!videoStartTime) {
-    videoStartTime = timestamp;
-  }
-  
-  const videoOffsetMs = timestamp - videoStartTime;
-  
-  const event = {
-    id: events.length,
-    type,
-    timestamp: new Date(timestamp).toISOString(),
-    videoOffsetMs,
-    videoOffsetFormatted: formatTime(videoOffsetMs),
-    data,
-    _recordedBy: 'zibby-wrapper-v2'  // Marker to verify our wrapper created this
-  };
-  
-  events.push(event);
-  debug(`📝 Event #${event.id}: ${type}${data.stableId ? ` [${data.stableId}]` : ''}`);
-  
-  // If this is a close event, recalculate all timestamps using video duration
-  if (type === 'close') {
-    recalculateTimestampsFromVideo();
-  } else {
-    saveEvents();
-  }
-  
-  return event.id;
-}
-
-function updateEventStableId(eventId, stableId) {
-  if (!nodeSessionPath || eventId < 0 || eventId >= events.length) return;
-  
-  const event = events[eventId];
-  if (event && !event.data.stableId && stableId) {
-    event.data.stableId = stableId;
-    debug(`🔗 Event #${eventId} stableId: ${stableId}`);
-    saveEvents();
-  }
-}
-
-/**
- * Parse WebM file to extract duration (fallback when ffprobe not available)
- */
-function parseWebMDuration(buffer) {
-  const SEGMENT_ID = 0x18538067;
-  const INFO_ID = 0x1549A966;
-  const DURATION_ID = 0x4489;
-  const TIMECODE_SCALE_ID = 0x2AD7B1;
-  
-  function readVINT(buffer, pos, keepMarker) {
-    if (pos >= buffer.length) return null;
-    const first = buffer[pos];
-    let length = 1;
-    let mask = 0x80;
-    while (length <= 8 && !(first & mask)) {
-      length++;
-      mask >>= 1;
-    }
-    if (length > 8 || pos + length > buffer.length) return null;
-    let value = keepMarker ? first : (first & (mask - 1));
-    for (let i = 1; i < length; i++) {
-      value = (value << 8) | buffer[pos + i];
-    }
-    return { value, length };
-  }
-  
-  function readEBMLElement(buffer, pos) {
-    if (pos >= buffer.length) return null;
-    const idResult = readVINT(buffer, pos, true);
-    if (!idResult) return null;
-    pos += idResult.length;
-    const sizeResult = readVINT(buffer, pos, false);
-    if (!sizeResult) return null;
-    pos += sizeResult.length;
-    return {
-      id: idResult.value,
-      dataStart: pos,
-      dataSize: sizeResult.value,
-      dataEnd: pos + sizeResult.value
-    };
-  }
-  
-  function readUInt(buffer, pos, size) {
-    let value = 0;
-    for (let i = 0; i < size; i++) {
-      value = (value << 8) | buffer[pos + i];
-    }
-    return value;
-  }
-  
-  function readFloat(buffer, pos, size) {
-    if (size === 4) return buffer.readFloatBE(pos);
-    if (size === 8) return buffer.readDoubleBE(pos);
-    return null;
-  }
-  
-  let pos = 0;
-  let timecodeScale = 1000000;
-  let duration = null;
-  
-  const ebmlHeader = readEBMLElement(buffer, pos);
-  if (!ebmlHeader) return null;
-  pos = ebmlHeader.dataEnd;
-  
-  const segment = readEBMLElement(buffer, pos);
-  if (!segment || segment.id !== SEGMENT_ID) return null;
-  
-  pos = segment.dataStart;
-  const segmentEnd = Math.min(segment.dataEnd, buffer.length);
-  
-  while (pos < segmentEnd) {
-    const element = readEBMLElement(buffer, pos);
-    if (!element) break;
-    
-    if (element.id === INFO_ID) {
-      let infoPos = element.dataStart;
-      while (infoPos < element.dataEnd) {
-        const infoElement = readEBMLElement(buffer, infoPos);
-        if (!infoElement) break;
-        if (infoElement.id === TIMECODE_SCALE_ID) {
-          timecodeScale = readUInt(buffer, infoElement.dataStart, infoElement.dataSize);
-        } else if (infoElement.id === DURATION_ID) {
-          duration = readFloat(buffer, infoElement.dataStart, infoElement.dataSize);
-        }
-        infoPos = infoElement.dataEnd;
-      }
-      break;
-    }
-    pos = element.dataEnd;
-  }
-  
-  if (duration !== null) {
-    return (duration * timecodeScale) / 1000000;
-  }
-  return null;
-}
-
-/**
- * Get video duration in milliseconds using ffprobe or WebM parser fallback
- */
-function getVideoDurationMs(videoPath) {
-  // Try ffprobe first (most accurate)
-  try {
-    const result = execFileSync('ffprobe', [
-      '-v', 'error', '-show_entries', 'format=duration',
-      '-of', 'default=noprint_wrappers=1:nokey=1', videoPath
-    ], { encoding: 'utf-8', timeout: 5000 });
-    const durationSec = parseFloat(result.trim());
-    if (!isNaN(durationSec)) {
-      const durationMs = Math.round(durationSec * 1000);
-      debug(`📏 Video duration (ffprobe): ${durationMs}ms`);
-      return durationMs;
-    }
-  } catch (_e) {
-    debug(`⚠️  ffprobe not available, using WebM parser fallback`);
-  }
-  
-  // Fallback: Parse WebM file directly
-  try {
-    const buffer = fs.readFileSync(videoPath);
-    const duration = parseWebMDuration(buffer);
-    if (duration) {
-      const durationMs = Math.round(duration);
-      debug(`📏 Video duration (WebM parser): ${durationMs}ms`);
-      return durationMs;
-    }
-  } catch (e) {
-    debug(`⚠️  WebM parsing failed: ${e.message}`);
-  }
-  
-  return null;
-}
-
-/**
- * Recalculate all event timestamps after browser close using actual video duration
- * Formula: videoStartMs = closeEventTimestamp - videoDurationMs
- */
-function recalculateTimestampsFromVideo() {
-  if (!nodeSessionPath || events.length === 0) return;
-  
-  // Find video file in current node directory (Playwright creates page-*.webm files)
-  let videoPath = null;
-  let attempts = 0;
-  const maxAttempts = 40; // 40 attempts * 500ms = 20 seconds max
-  let lastSize = 0;
-  let stableCount = 0;
-  
-  while (!videoPath && attempts < maxAttempts) {
-    attempts++;
-    
-    // Look for either recording.webm or page-*.webm files
-    let candidatePath = null;
-    if (fs.existsSync(path.join(nodeSessionPath, 'recording.webm'))) {
-      candidatePath = path.join(nodeSessionPath, 'recording.webm');
-      if (attempts === 1) debug(`Found recording.webm`);
-    } else {
-      // Look for Playwright's page-*.webm pattern
-      try {
-        const files = fs.readdirSync(nodeSessionPath);
-        if (attempts === 1) debug(`Directory contains ${files.length} files: ${files.join(', ')}`);
-        const webmFiles = files.filter(f => f.endsWith('.webm'));
-        if (attempts === 1 && webmFiles.length > 0) debug(`Found ${webmFiles.length} .webm file(s): ${webmFiles.join(', ')}`);
-        if (webmFiles.length > 0) {
-          candidatePath = path.join(nodeSessionPath, webmFiles[0]);
-        }
-      } catch (_e) {
-        // Directory might not be ready
-        if (attempts === 1) debug(`⚠️  Error reading directory: ${_e.message}`);
-      }
-    }
-    
-    // If we found a file, check if it's stable (not still being written)
-    if (candidatePath && fs.existsSync(candidatePath)) {
-      try {
-        const stats = fs.statSync(candidatePath);
-        const currentSize = stats.size;
-        
-        if (currentSize > 0 && currentSize === lastSize) {
-          stableCount++;
-          if (stableCount >= 2) { // File size unchanged for 2 checks (1 second)
-            videoPath = candidatePath;
-            debug(`✅ Video file stable after ${attempts} attempts: ${path.basename(videoPath)} (${currentSize} bytes)`);
-            break;
-          }
-        } else {
-          stableCount = 0;
-          lastSize = currentSize;
-        }
-      } catch (_e) {
-        debug(`⚠️  Error checking file: ${_e.message}`);
-      }
-    }
-    
-    if (!videoPath) {
-      if (attempts % 5 === 0) {  // Log every 2.5 seconds
-        debug(`⏳ Waiting for stable video file... (attempt ${attempts}/${maxAttempts}, size: ${lastSize})`);
-      }
-      // Blocking sleep
-      const start = Date.now();
-      while (Date.now() - start < 500) { /* 500ms sleep */ }
-    }
-  }
-  
-  if (!videoPath) {
-    debug(`⚠️  Video file not found/stable after ${attempts} attempts in: ${nodeSessionPath}`);
-    saveEvents();
-    return;
-  }
-
-  
-  // Get video duration
-  const videoDurationMs = getVideoDurationMs(videoPath);
-  if (!videoDurationMs) {
-    debug(`⚠️  Could not determine video duration, using fallback`);
-    saveEvents();
-    return;
-  }
-  
-  // Find close event
-  const closeEvent = events.find(e => e.type === 'close');
-  if (!closeEvent) {
-    debug(`⚠️  No close event found`);
-    saveEvents();
-    return;
-  }
-  
-  // Calculate accurate video start time
-  const closeTimestamp = new Date(closeEvent.timestamp).getTime();
-  const calculatedVideoStartMs = closeTimestamp - videoDurationMs;
-  
-  debug(`📊 Calculated video start: ${new Date(calculatedVideoStartMs).toISOString()}`);
-  debug(`   Close timestamp: ${closeTimestamp}ms`);
-  debug(`   Video duration: ${videoDurationMs}ms`);
-  
-  // Recalculate all event timestamps
-  events.forEach(event => {
-    const eventTimestamp = new Date(event.timestamp).getTime();
-    event.videoOffsetMs = eventTimestamp - calculatedVideoStartMs;
-    event.videoOffsetFormatted = formatTime(event.videoOffsetMs);
-  });
-  
-  debug(`✅ Recalculated ${events.length} events using accurate video start time`);
-  saveEvents();
-}
-
-function saveEvents() {
-  if (!nodeSessionPath) return;
-  try {
-    const eventsPath = path.join(nodeSessionPath, 'events.json');
-    fs.writeFileSync(eventsPath, JSON.stringify(events, null, 2));
-  } catch (_err) {
-    // Silent fail
-  }
-}
-
-// ========== Main ==========
-debug(`CWD: ${process.cwd()}`);
-loadSessionInfo();
-
-// Build arguments - add our init script
-const args = process.argv.slice(2);
-
-// Always inject our stable ID script
-if (fs.existsSync(STABLE_ID_SCRIPT)) {
-  args.unshift('--init-script', STABLE_ID_SCRIPT);
-  debug(`✅ Stable ID injection enabled: ${STABLE_ID_SCRIPT}`);
-} else {
-  debug(`⚠️ Stable ID script not found: ${STABLE_ID_SCRIPT}`);
-}
-
-// Set output directory to node session folder so videos land in the right place
-if (nodeSessionPath) {
-  const existingIdx = args.findIndex(a => a.startsWith('--output-dir'));
-  if (existingIdx !== -1) {
-    args[existingIdx] = `--output-dir=${nodeSessionPath}`;
-  } else {
-    args.push('--output-dir', nodeSessionPath);
-  }
-  debug(`📹 Video output: ${nodeSessionPath}`);
-}
-
-// Find the official Playwright MCP CLI
-const playwrightMcpPath = path.dirname(require.resolve('@playwright/mcp'));
-const playwrightMcpCli = path.join(playwrightMcpPath, 'cli.js');
-
-// Spawn the official MCP
-const mcpProcess = spawn(process.execPath, [playwrightMcpCli, ...args], {
-  stdio: ['pipe', 'pipe', 'inherit']
-});
-
-// Track requests and pending stable ID queries
-const pendingRequests = new Map();
-let stableIdQueryId = 900000;
-const pendingStableIdQueries = new Map();
-
-// Track if browser is still active
-let browserActive = false;
-
-// ========== Stdin Processing ==========
-let stdinBuffer = '';
-
-process.stdin.on('data', (data) => {
-  stdinBuffer += data.toString();
-  
-  // Process complete lines
-  const lines = stdinBuffer.split('\n');
-  stdinBuffer = lines.pop() || '';
-  
-  for (const line of lines) {
-    if (!line.trim()) continue;
-    
-    try {
-      const msg = JSON.parse(line);
-      
-      // Debug: log incoming messages
-      if (msg.method) {
-        debug(`📨 STDIN: ${msg.method} ${msg.params?.name || ''}`);
-      }
-      
-      // Intercept tool calls
-      if (msg.method === 'tools/call' && msg.params) {
-        const toolName = msg.params.name;
-        const toolArgs = msg.params.arguments || {};
-        
-        // Track pending request
-        pendingRequests.set(msg.id, { toolName, toolArgs });
-        
-        // Record event and get ID
-        let eventId = -1;
-        if (toolName === 'browser_navigate') {
-          browserActive = true;
-          eventId = recordEvent('navigate', { url: toolArgs.url });
-        } else if (toolName === 'browser_click') {
-          eventId = recordEvent('click', { element: toolArgs.element, ref: toolArgs.ref });
-        } else if (toolName === 'browser_type') {
-          eventId = recordEvent('type', { element: toolArgs.element, ref: toolArgs.ref, text: toolArgs.text });
-        } else if (toolName === 'browser_select_option') {
-          eventId = recordEvent('select', { element: toolArgs.element, ref: toolArgs.ref, values: toolArgs.values });
-        } else if (toolName === 'browser_fill_form') {
-          eventId = recordEvent('fill_form', { fields: toolArgs.fields });
-        } else if (toolName === 'browser_hover') {
-          eventId = recordEvent('hover', { element: toolArgs.element, ref: toolArgs.ref });
-        } else if (toolName === 'browser_close') {
-          eventId = recordEvent('close', {});
-          browserActive = false;
-        } else if (toolName === 'browser_snapshot') {
-          eventId = recordEvent('snapshot', {});
-        }
-        
-        // Store event ID for stable ID update
-        if (eventId >= 0) {
-          pendingRequests.get(msg.id).eventId = eventId;
-        }
-      }
-    } catch (_e) {
-      // Not JSON - pass through
-    }
-    
-    // Forward to MCP
-    mcpProcess.stdin.write(line + '\n');
-  }
-});
-
-process.stdin.on('end', () => {
-  if (stdinBuffer.trim()) {
-    mcpProcess.stdin.write(stdinBuffer + '\n');
-  }
-  mcpProcess.stdin.end();
-});
-
-// ========== Stdout Processing ==========
-let stdoutBuffer = '';
-
-mcpProcess.stdout.on('data', (data) => {
-  stdoutBuffer += data.toString();
-  
-  // Process complete lines
-  const lines = stdoutBuffer.split('\n');
-  stdoutBuffer = lines.pop() || '';
-  
-  for (const line of lines) {
-    if (!line.trim()) continue;
-    
-    let shouldForward = true;
-    
-    try {
-      const msg = JSON.parse(line);
-      
-      // Check if this is a response to a tracked action
-      if (msg.id && pendingRequests.has(msg.id)) {
-        const request = pendingRequests.get(msg.id);
-        pendingRequests.delete(msg.id);
-        
-        // For successful interaction actions, query stable ID
-        if (!msg.error && browserActive && request.eventId >= 0) {
-          const needsStableId = ['browser_click', 'browser_type', 'browser_select_option', 
-                                 'browser_fill_form', 'browser_hover'].includes(request.toolName);
-          
-          if (needsStableId) {
-            // Send stable ID query
-            const queryId = stableIdQueryId++;
-            const query = {
-              jsonrpc: '2.0',
-              id: queryId,
-              method: 'tools/call',
-              params: {
-                name: 'browser_evaluate',
-                arguments: {
-                  function: '() => { const match = document.cookie.match(/(?:^|; )__zibbyLastStableId=([^;]*)/); const id = match ? decodeURIComponent(match[1]) : (window.__zibbyLastStableId || null); return id; }'
-                }
-              }
-            };
-            
-            debug(`🔍 Querying stable ID for event #${request.eventId}`);
-            pendingStableIdQueries.set(queryId, { eventId: request.eventId });
-            mcpProcess.stdin.write(JSON.stringify(query) + '\n');
-          }
-        }
-      }
-      
-      // Check if this is our stable ID query response
-      if (msg.id && pendingStableIdQueries.has(msg.id)) {
-        const queryInfo = pendingStableIdQueries.get(msg.id);
-        pendingStableIdQueries.delete(msg.id);
-        
-        // Extract stable ID from response
-        debug(`📥 Stable ID response for event #${queryInfo.eventId}: ${JSON.stringify(msg.result || msg.error || 'no result').slice(0, 200)}`);
-        
-        if (msg.result?.content?.[0]?.text) {
-          const text = msg.result.content[0].text;
-          // Look for zibby ID in the response
-          const match = text.match(/zibby-[a-zA-Z0-9-]+/);
-          if (match) {
-            debug(`✅ Found stable ID: ${match[0]}`);
-            updateEventStableId(queryInfo.eventId, match[0]);
-          } else {
-            debug(`⚠️ No stable ID found in: ${text.slice(0, 100)}`);
-          }
-        } else if (msg.error) {
-          debug(`❌ Stable ID query error: ${msg.error?.message || JSON.stringify(msg.error)}`);
-        }
-        
-        // Don't forward our internal query responses
-        shouldForward = false;
-      }
-    } catch (_e) {
-      // Not JSON - forward as-is
-    }
-    
-    if (shouldForward) {
-      process.stdout.write(line + '\n');
-    }
-  }
-});
-
-// ========== Process Handling ==========
-mcpProcess.on('close', (code) => {
-  // Write any remaining buffer
-  if (stdoutBuffer.trim()) {
-    process.stdout.write(stdoutBuffer);
-  }
-  process.exit(code || 0);
-});
-
-process.on('SIGINT', () => {
-  mcpProcess.kill('SIGINT');
-});
-
-process.on('SIGTERM', () => {
-  mcpProcess.kill('SIGTERM');
-});