@zibby/mcp-browser 0.1.0 → 0.1.6

package/src/index.mjs

@@ -1,594 +0,0 @@
-#!/usr/bin/env node
-/**
- * Zibby MCP Browser
- * 
- * Uses official @playwright/mcp with:
- * - Stable ID injection via init script
- * - Event recording with stable IDs
- */
-
-import { createConnection } from '@playwright/mcp';
-import { chromium } from 'playwright';
-import { execSync } from 'child_process';
-import fs from 'fs';
-import path from 'path';
-import { SESSION_INFO_FILE } from '@zibby/core';
-
-// Event recording
-let nodeSessionPath = null;
-const events = [];
-let videoStartTime = null;
-
-function loadSessionInfo(outputDir) {
-  try {
-    if (!outputDir) {
-      console.error(`[Zibby MCP] ⚠️ No output directory provided - skipping session info`);
-      return;
-    }
-
-    const sessionInfoPath = path.join(outputDir, '../..', SESSION_INFO_FILE);
-    if (fs.existsSync(sessionInfoPath)) {
-      const sessionInfo = JSON.parse(fs.readFileSync(sessionInfoPath, 'utf-8'));
-      const nodeName = sessionInfo.currentNode || 'execute_live';
-      
-      if (sessionInfo.sessionPath) {
-        nodeSessionPath = path.join(sessionInfo.sessionPath, nodeName);
-        fs.mkdirSync(nodeSessionPath, { recursive: true });
-        console.error(`[Zibby MCP] 📁 Recording to: ${nodeSessionPath}`);
-      }
-    }
-  } catch (err) {
-    console.error(`[Zibby MCP] ⚠️ Session info: ${err.message}`);
-  }
-}
-
-// Format milliseconds to time
-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')}`;
-}
-
-/**
- * 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 = execSync(
-      `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);
-      console.error(`[Zibby MCP] 📏 Video duration (ffprobe): ${durationMs}ms`);
-      return durationMs;
-    }
-  } catch (_e) {
-    console.error(`[Zibby MCP] ⚠️  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);
-      console.error(`[Zibby MCP] 📏 Video duration (WebM parser): ${durationMs}ms`);
-      return durationMs;
-    }
-  } catch (_e) {
-    console.error(`[Zibby MCP] ⚠️  WebM parsing failed: ${_e.message}`);
-  }
-  
-  return null;
-}
-
-/**
- * Recalculate all event timestamps after browser close using actual video duration
- */
-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');
-    } else {
-      // Look for Playwright's page-*.webm pattern
-      try {
-        const files = fs.readdirSync(nodeSessionPath);
-        const webmFiles = files.filter(f => f.endsWith('.webm'));
-        if (webmFiles.length > 0) {
-          candidatePath = path.join(nodeSessionPath, webmFiles[0]);
-        }
-      } catch (_e) {
-        // Directory might not be ready
-        console.error(`[Zibby MCP] ⚠️  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;
-            console.error(`[Zibby MCP] ✅ Video file stable after ${attempts} attempts: ${path.basename(videoPath)} (${currentSize} bytes)`);
-            break;
-          }
-        } else {
-          stableCount = 0;
-          lastSize = currentSize;
-        }
-      } catch (_e) {
-        console.error(`[Zibby MCP] ⚠️  Error checking file: ${_e.message}`);
-      }
-    }
-    
-    if (!videoPath) {
-      if (attempts % 5 === 0) {  // Log every 2.5 seconds
-        console.error(`[Zibby MCP] ⏳ 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) {
-    console.error(`[Zibby MCP] ⚠️  Video file not found/stable after ${attempts} attempts in: ${nodeSessionPath}`);
-    saveEvents();
-    return;
-  }
-  
-  // Get video duration
-  const videoDurationMs = getVideoDurationMs(videoPath);
-  if (!videoDurationMs) {
-    console.error(`[Zibby MCP] ⚠️  Could not determine video duration, using fallback`);
-    saveEvents();
-    return;
-  }
-  
-  // Find close event
-  const closeEvent = events.find(e => e.type === 'close');
-  if (!closeEvent) {
-    console.error(`[Zibby MCP] ⚠️  No close event found`);
-    saveEvents();
-    return;
-  }
-  
-  // Calculate accurate video start time
-  const closeTimestamp = new Date(closeEvent.timestamp).getTime();
-  const calculatedVideoStartMs = closeTimestamp - videoDurationMs;
-  
-  console.error(`[Zibby MCP] 📊 Calculated video start: ${new Date(calculatedVideoStartMs).toISOString()}`);
-  console.error(`[Zibby MCP]    Close timestamp: ${closeTimestamp}ms, 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);
-  });
-  
-  console.error(`[Zibby MCP] ✅ 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) {
-    console.error(`[Zibby MCP] ❌ Write error: ${err.message}`);
-  }
-}
-
-// Record an event
-function recordEvent(type, data) {
-  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
-  };
-  
-  events.push(event);
-  console.error(`[Zibby MCP] 📝 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();
-  }
-}
-
-// Stable ID injection script
-// Ripple effect for visual feedback during AI test execution
-const RIPPLE_EFFECT_SCRIPT = `
-  const style = document.createElement('style');
-  style.textContent = \`
-    @keyframes zibby-ripple {
-      0% {
-        transform: scale(0);
-        opacity: 0.7;
-      }
-      100% {
-        transform: scale(4);
-        opacity: 0;
-      }
-    }
-    .zibby-ripple {
-      position: absolute;
-      border-radius: 50%;
-      background: rgba(59, 130, 246, 0.7);
-      pointer-events: none;
-      animation: zibby-ripple 0.6s ease-out;
-      z-index: 999999;
-    }
-  \`;
-  
-  document.addEventListener('DOMContentLoaded', () => {
-    if (document.head && !document.getElementById('zibby-ripple-style')) {
-      style.id = 'zibby-ripple-style';
-      document.head.appendChild(style);
-    }
-  });
-  
-  if (document.head && !document.getElementById('zibby-ripple-style')) {
-    style.id = 'zibby-ripple-style';
-    document.head.appendChild(style);
-  }
-
-  window.__zibbyShowRipple = function(x, y) {
-    const ripple = document.createElement('div');
-    ripple.className = 'zibby-ripple';
-    ripple.style.left = (x - 10) + 'px';
-    ripple.style.top = (y - 10) + 'px';
-    ripple.style.width = '20px';
-    ripple.style.height = '20px';
-    
-    if (document.body) {
-      document.body.appendChild(ripple);
-      setTimeout(() => ripple.remove(), 600);
-    }
-  };
-
-  // Auto-show ripple on all clicks (for Playwright/MCP automation)
-  document.addEventListener('click', function(e) {
-    window.__zibbyShowRipple(e.clientX, e.clientY);
-  }, true);
-`;
-
-const STABLE_ID_SCRIPT = `
-(function() {
-  if (window.__zibbyInitialized) return;
-  window.__zibbyInitialized = true;
-
-  function computeStableId(el) {
-    const tag = el.tagName.toLowerCase();
-    const id = el.id || '';
-    const name = el.name || '';
-    const type = el.type || '';
-    const role = el.getAttribute('role') || '';
-    const ariaLabel = el.getAttribute('aria-label') || '';
-    const placeholder = el.placeholder || '';
-    const href = el.href ? new URL(el.href, window.location.origin).pathname.slice(0, 30) : '';
-    
-    const sig = [tag, id, name, type, role, ariaLabel, placeholder, href].join('|');
-    
-    try {
-      const encoded = btoa(sig).replace(/[+/=]/g, '').slice(0, 24);
-      return 'zibby-' + encoded;
-    } catch (e) {
-      let hash = 0;
-      for (let i = 0; i < sig.length; i++) {
-        hash = ((hash << 5) - hash) + sig.charCodeAt(i);
-        hash = hash & hash;
-      }
-      return 'zibby-' + Math.abs(hash).toString(36);
-    }
-  }
-
-  function injectStableIds() {
-    if (!document.body) return;
-    
-    const selectors = [
-      'button', 'a', 'input', 'select', 'textarea',
-      '[role="button"]', '[role="link"]', '[role="textbox"]',
-      '[role="checkbox"]', '[role="radio"]', '[role="combobox"]',
-      '[role="menuitem"]', '[role="tab"]', '[role="option"]'
-    ].join(', ');
-
-    const idCounts = new Map();
-    
-    try {
-      document.querySelectorAll(selectors).forEach((el) => {
-        let stableId = computeStableId(el);
-        
-        const baseId = stableId;
-        const count = idCounts.get(baseId) || 0;
-        if (count > 0) stableId = baseId + '-' + count;
-        idCounts.set(baseId, count + 1);
-        
-        el.setAttribute('data-zibby-id', stableId);
-      });
-    } catch (e) {
-      console.warn('[Zibby] Stable ID injection error:', e.message);
-    }
-  }
-
-  function initialize() {
-    if (!document.body) {
-      if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initialize);
-        return;
-      }
-    }
-
-    injectStableIds();
-
-    const observer = new MutationObserver(() => injectStableIds());
-    if (document.body) {
-      observer.observe(document.body, { childList: true, subtree: true });
-    }
-  }
-
-  window.__zibbyGetStableId = function(element) {
-    return element?.getAttribute('data-zibby-id') || null;
-  };
-
-  initialize();
-})();
-`;
-
-// Parse args
-const args = process.argv.slice(2);
-const config = {};
-
-for (let i = 0; i < args.length; i++) {
-  const arg = args[i];
-  if (arg.startsWith('--')) {
-    const [key, ...valueParts] = arg.slice(2).split('=');
-    const value = valueParts.join('=') || args[++i] || 'true';
-    
-    if (key === 'headless') config.headless = true;
-    else if (key === 'save-video') config.saveVideo = value;
-    else if (key === 'viewport-size') config.viewportSize = value;
-    else if (key === 'output-dir') config.outputDir = value;
-  }
-}
-
-loadSessionInfo(config.outputDir);
-
-// Singleton browser instance - reuse across all context requests
-let browserInstance = null;
-let contextCount = 0;
-
-// Custom context getter that injects stable IDs
-async function contextGetter() {
-  // Reuse browser instance to prevent spawning 10+ browsers
-  if (!browserInstance) {
-    const launchOptions = {
-      headless: config.headless || false
-    };
-    browserInstance = await chromium.launch(launchOptions);
-    console.error('[Zibby MCP] 🌐 Browser launched (will reuse for all contexts)');
-  }
-  
-  const contextOptions = {};
-  
-  // Parse viewport
-  if (config.viewportSize) {
-    const [width, height] = config.viewportSize.split('x').map(Number);
-    contextOptions.viewport = { width, height };
-  }
-  
-  // Enable video recording
-  if (config.saveVideo) {
-    const [width, height] = config.saveVideo.split('x').map(Number);
-    contextOptions.recordVideo = {
-      dir: config.outputDir || 'test-results',
-      size: { width, height }
-    };
-  }
-  
-  const context = await browserInstance.newContext(contextOptions);
-  contextCount++;
-  console.error(`[Zibby MCP] 📄 Created context #${contextCount}`);
-  
-  // ZIBBY: Inject stable ID script and ripple effects
-  await context.addInitScript(STABLE_ID_SCRIPT);
-  await context.addInitScript(RIPPLE_EFFECT_SCRIPT);
-  console.error('[Zibby MCP] ✅ Stable ID injection + ripple effects enabled');
-  
-  // Track pages for event recording
-  context.on('page', (page) => {
-    // Record navigation events
-    page.on('framenavigated', (frame) => {
-      if (frame === page.mainFrame()) {
-        recordEvent('navigate', { url: page.url() });
-      }
-    });
-  });
-  
-  return context;
-}
-
-// Start the MCP server with our custom context
-async function main() {
-  try {
-    const connection = await createConnection(config, contextGetter);
-    
-    // Intercept tool calls for event recording
-    const originalHandler = connection._handleToolCall?.bind(connection);
-    if (originalHandler) {
-      connection._handleToolCall = async (name, params) => {
-        const result = await originalHandler(name, params);
-        
-        // Record events based on tool name
-        if (name === 'browser_click') {
-          // Try to get stable ID from page
-          const stableId = await getStableIdForRef(params.ref);
-          recordEvent('click', { element: params.element, ref: params.ref, stableId });
-        } else if (name === 'browser_type') {
-          const stableId = await getStableIdForRef(params.ref);
-          recordEvent('type', { element: params.element, ref: params.ref, text: params.text, stableId });
-        } else if (name === 'browser_select_option') {
-          const stableId = await getStableIdForRef(params.ref);
-          recordEvent('select', { element: params.element, ref: params.ref, values: params.values, stableId });
-        } else if (name === 'browser_close') {
-          recordEvent('close', {});
-        }
-        
-        return result;
-      };
-    }
-    
-    // Start stdio transport
-    console.error('[Zibby MCP] 🚀 Server started');
-  } catch (error) {
-    console.error('[Zibby MCP] ❌ Error:', error.message);
-    process.exit(1);
-  }
-}
-
-// Helper to get stable ID (placeholder - needs actual implementation)
-async function getStableIdForRef(_ref) {
-  // This would need access to the page context to query the element
-  // For now, return null - we'll enhance this
-  return null;
-}
-
-main();