@vibecheckai/cli 3.2.5 → 3.3.0

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

@@ -1,331 +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;
+/**
+ * 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;