@vibecheckai/cli 2.8.2 → 3.0.0

package/bin/runners/lib/replay/recorder.js

@@ -0,0 +1,331 @@
+/**
+ * Replay Recorder
+ * Captures user interactions and network activity for replay
+ */
+
+const fs = require('fs').promises;
+const path = require('path');
+const { EventEmitter } = require('events');
+const { performance } = require('perf_hooks');
+
+class ReplayRecorder extends EventEmitter {
+  constructor(options = {}) {
+    super();
+    this.steps = [];
+    this.startedAt = null;
+    this.metadata = {
+      id: options.id || null,
+      name: options.name || 'Untitled Session',
+      description: options.description || '',
+      tags: options.tags || [],
+      url: options.url || null,
+      userAgent: options.userAgent || null,
+      viewport: options.viewport || { width: 1280, height: 800 },
+      ...options.metadata
+    };
+    
+    this.state = 'idle';
+    this.beforeEachCallbacks = [];
+    this.afterEachCallbacks = [];
+  }
+
+  start() {
+    if (this.state !== 'idle') {
+      throw new Error(`Cannot start recorder: already ${this.state}`);
+    }
+
+    this.startedAt = performance.now();
+    this.steps = [];
+    this.state = 'recording';
+    this.emit('start', { timestamp: Date.now() });
+    
+    return this;
+  }
+
+  stop() {
+    if (this.state !== 'recording') {
+      throw new Error('Cannot stop: not recording');
+    }
+
+    const endedAt = performance.now();
+    const duration = endedAt - this.startedAt;
+    
+    this.state = 'stopped';
+    
+    const result = {
+      metadata: {
+        ...this.metadata,
+        startedAt: new Date().toISOString(),
+        duration,
+        steps: this.steps.length
+      },
+      steps: this.steps
+    };
+
+    this.emit('stop', result);
+    return result;
+  }
+
+  async save(directory) {
+    if (this.state === 'recording') {
+      this.stop();
+    }
+
+    const manager = new (require('./capsule-manager'))(directory || process.cwd());
+    await manager.init();
+    
+    return manager.saveCapsule({
+      ...this.metadata,
+      steps: this.steps,
+      duration: performance.now() - this.startedAt
+    });
+  }
+
+  // Step recording
+  addStep(type, data = {}) {
+    if (this.state !== 'recording') return null;
+
+    const step = {
+      id: `${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+      type,
+      timestamp: performance.now() - this.startedAt,
+      ...data
+    };
+
+    // Run before callbacks
+    this.beforeEachCallbacks.forEach(cb => cb(step));
+    
+    this.steps.push(step);
+    this.emit('step', step);
+    
+    // Run after callbacks
+    this.afterEachCallbacks.forEach(cb => cb(step));
+    
+    return step;
+  }
+
+  // Event recording helpers
+  recordNavigation(url, title) {
+    return this.addStep('navigation', { url, title });
+  }
+
+  recordClick(selector, x, y, button = 'left', clickCount = 1) {
+    return this.addStep('click', { selector, x, y, button, clickCount });
+  }
+
+  recordInput(selector, value) {
+    return this.addStep('input', { selector, value });
+  }
+
+  recordKeyPress(key, code, modifiers = {}) {
+    return this.addStep('keypress', { key, code, ...modifiers });
+  }
+
+  recordNetworkRequest(request) {
+    return this.addStep('network_request', {
+      url: request.url,
+      method: request.method,
+      headers: request.headers,
+      postData: request.postData
+    });
+  }
+
+  recordNetworkResponse(response) {
+    return this.addStep('network_response', {
+      url: response.url,
+      status: response.status,
+      statusText: response.statusText,
+      headers: response.headers,
+      body: response.body
+    });
+  }
+
+  recordConsole(level, message, args = []) {
+    return this.addStep('console', { level, message, args });
+  }
+
+  recordError(error) {
+    return this.addStep('error', {
+      message: error.message,
+      stack: error.stack,
+      name: error.name
+    });
+  }
+
+  recordCustom(type, data = {}) {
+    return this.addStep(`custom_${type}`, data);
+  }
+
+  // Hooks
+  beforeEach(callback) {
+    this.beforeEachCallbacks.push(callback);
+    return this;
+  }
+
+  afterEach(callback) {
+    this.afterEachCallbacks.push(callback);
+    return this;
+  }
+
+  // Playwright integration
+  static fromPlaywright(page, options = {}) {
+    const recorder = new ReplayRecorder({
+      ...options,
+      metadata: {
+        recordedWith: 'playwright',
+        ...options.metadata
+      }
+    });
+
+    // Set up page event listeners
+    const setupPage = async () => {
+      const url = page.url();
+      const title = await page.title();
+      
+      recorder.metadata.url = url;
+      recorder.metadata.title = title;
+      
+      // Navigation events
+      page.on('framenavigated', async (frame) => {
+        if (frame === page.mainFrame()) {
+          const title = await frame.title();
+          recorder.recordNavigation(frame.url(), title);
+        }
+      });
+
+      // Click events
+      await page.exposeFunction('__vibeRecordClick', (selector, x, y, button, clickCount) => {
+        recorder.recordClick(selector, x, y, button, clickCount);
+      });
+
+      // Input events
+      await page.exposeFunction('__vibeRecordInput', (selector, value) => {
+        recorder.recordInput(selector, value);
+      });
+
+      // Console messages
+      page.on('console', msg => {
+        const type = msg.type();
+        const text = msg.text();
+        recorder.recordConsole(type, text, msg.args());
+      });
+
+      // Network requests
+      page.on('request', request => {
+        recorder.recordNetworkRequest(request);
+      });
+
+      page.on('response', response => {
+        recorder.recordNetworkResponse(response);
+      });
+
+      // Page errors
+      page.on('pageerror', error => {
+        recorder.recordError(error);
+      });
+
+      // Inject recording script
+      await page.addScriptTag({
+        content: `
+          // Click recording
+          document.addEventListener('click', (event) => {
+            const target = event.target;
+            const selector = getElementSelector(target);
+            const rect = target.getBoundingClientRect();
+            const x = event.clientX - rect.left;
+            const y = event.clientY - rect.top;
+            
+            window.__vibeRecordClick(
+              selector,
+              x,
+              y,
+              event.button,
+              event.detail
+            );
+          }, true);
+
+          // Input recording
+          document.addEventListener('input', (event) => {
+            const target = event.target;
+            if (['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName)) {
+              const selector = getElementSelector(target);
+              window.__vibeRecordInput(selector, target.value);
+            }
+          }, true);
+
+          // Helper to generate CSS selector for an element
+          function getElementSelector(element) {
+            if (!element || !element.getAttribute) return '';
+            
+            // Try to get a good selector
+            if (element.id) {
+              return '#' + CSS.escape(element.id);
+            }
+            
+            if (element.name) {
+              return '${element.tagName}[name="' + element.name + '"]';
+            }
+            
+            if (element.className && typeof element.className === 'string') {
+              const classes = element.className.split(/\s+/).filter(Boolean);
+              if (classes.length > 0) {
+                return '.' + classes.map(c => CSS.escape(c)).join('.');
+              }
+            }
+            
+            // Fallback to path
+            const path = [];
+            let current = element;
+            
+            while (current && current.nodeType === Node.ELEMENT_NODE) {
+              let selector = current.nodeName.toLowerCase();
+              
+              if (current.id) {
+                selector += '#' + CSS.escape(current.id);
+                path.unshift(selector);
+                break;
+              } else {
+                let sibling = current;
+                let siblingCount = 0;
+                let siblingIndex = 0;
+                
+                while (sibling) {
+                  if (sibling.nodeType === Node.ELEMENT_NODE && 
+                      sibling.nodeName.toLowerCase() === selector) {
+                    siblingCount++;
+                    if (sibling === current) {
+                      siblingIndex = siblingCount;
+                    }
+                  }
+                  sibling = sibling.previousElementSibling;
+                }
+                
+                if (siblingCount > 1) {
+                  selector += ':nth-of-type(' + siblingIndex + ')';
+                }
+                
+                path.unshift(selector);
+                current = current.parentNode;
+              }
+            }
+            
+            return path.join(' > ');
+          }
+        `
+      });
+    };
+
+    // Start recording when page is ready
+    if (page.url() !== 'about:blank') {
+      setupPage().catch(console.error);
+    } else {
+      page.once('domcontentloaded', () => {
+        setupPage().catch(console.error);
+      });
+    }
+
+    return recorder;
+  }
+}
+
+module.exports = ReplayRecorder;