@vibecheckai/cli 2.8.2 → 3.0.0

package/bin/runners/runReplay.js

@@ -0,0 +1,469 @@
+#!/usr/bin/env node
+
+/**
+ * Vibecheck Replay CLI
+ * 
+ * Commands:
+ *   vibecheck replay record <url> [options]  Record a user session
+ *   vibecheck replay play <capsule>         Replay a recorded session
+ *   vibecheck replay list                   List available replay capsules
+ *   vibecheck replay show <id>              Show details of a replay capsule
+ *   vibecheck replay delete <id>            Delete a replay capsule
+ *   vibecheck replay export <id> <file>     Export a replay capsule
+ *   vibecheck replay import <file>          Import a replay capsule
+ */
+
+const { program } = require('commander');
+const chalk = require('chalk');
+const fs = require('fs').promises;
+const path = require('path');
+const { chromium } = require('playwright');
+const { createReplayEngine } = require('./lib/replay');
+const { version } = require('../../package.json');
+
+// Global options
+let verbose = false;
+let outputDir = path.join(process.cwd(), '.vibecheck', 'replays');
+
+// Initialize replay engine
+let replayEngine;
+
+/**
+ * Initialize the replay engine
+ */
+async function initEngine() {
+  if (!replayEngine) {
+    replayEngine = await createReplayEngine({
+      basePath: process.cwd(),
+      verbose
+    });
+  }
+  return replayEngine;
+}
+
+/**
+ * Record a user session
+ */
+async function recordSession(url, options) {
+  console.log(chalk.blue(`\n🚀 Starting recording session for ${url}\n`));
+  
+  const browser = await chromium.launch({
+    headless: !options.headed,
+    devtools: options.devtools
+  });
+  
+  try {
+    const context = await browser.newContext({
+      viewport: options.viewport || { width: 1280, height: 800 },
+      recordVideo: options.video ? { dir: path.join(outputDir, 'videos') } : undefined
+    });
+    
+    const page = await context.newPage();
+    
+    // Initialize recorder
+    const engine = await initEngine();
+    const recorder = engine.createPlaywrightRecorder(page, {
+      name: options.name || `Session at ${new Date().toLocaleString()}`,
+      description: options.description || `Recorded from ${url}`,
+      tags: options.tags ? options.tags.split(',') : []
+    });
+    
+    // Set up event listeners
+    recorder.on('start', () => {
+      console.log(chalk.green('\n🔴 Recording started. Press Ctrl+C to stop.\n'));
+    });
+    
+    recorder.on('step', (step) => {
+      if (verbose) {
+        console.log(chalk.gray(`  [${step.type}] ${JSON.stringify(step).slice(0, 100)}...`));
+      }
+    });
+    
+    // Navigate to the URL
+    await page.goto(url, { waitUntil: 'networkidle' });
+    
+    // Wait for user to stop recording
+    console.log(chalk.blue('\n🛑 Press Ctrl+C when done recording...'));
+    
+    // Handle process termination
+    const stopRecording = async () => {
+      console.log('\n\nStopping recording...');
+      const result = await recorder.save(outputDir);
+      console.log(chalk.green(`\n✅ Recording saved as capsule: ${result.id}`));
+      console.log(chalk.gray(`Path: ${result.path}`));
+      
+      await browser.close();
+      process.exit(0);
+    };
+    
+    process.on('SIGINT', stopRecording);
+    
+    // If auto-stop is enabled, wait for the specified duration
+    if (options.duration) {
+      console.log(`Will auto-stop after ${options.duration} seconds...`);
+      setTimeout(stopRecording, options.duration * 1000);
+    }
+    
+  } catch (error) {
+    console.error(chalk.red('\n❌ Error during recording:'), error);
+    await browser.close();
+    process.exit(1);
+  }
+}
+
+/**
+ * Replay a recorded session
+ */
+async function replaySession(capsuleId, options) {
+  console.log(chalk.blue(`\n▶️  Replaying capsule: ${capsuleId}\n`));
+  
+  const browser = await chromium.launch({
+    headless: !options.headed,
+    devtools: options.devtools
+  });
+  
+  try {
+    const engine = await initEngine();
+    const capsule = await engine.getCapsule(capsuleId);
+    
+    if (!capsule) {
+      console.error(chalk.red(`\n❌ Capsule not found: ${capsuleId}`));
+      process.exit(1);
+    }
+    
+    console.log(chalk.blue(`📼 ${capsule.metadata.name || 'Untitled Session'}`));
+    if (capsule.metadata.description) {
+      console.log(chalk.gray(`   ${capsule.metadata.description}`));
+    }
+    console.log(chalk.gray(`   ${capsule.metadata.steps} steps, recorded ${new Date(capsule.metadata.createdAt).toLocaleString()}\n`));
+    
+    const player = engine.createPlayer({
+      speed: options.speed,
+      headless: !options.headed,
+      waitForNetworkIdle: true,
+      stopOnFailure: options.stopOnFailure
+    });
+    
+    await player.loadCapsule(capsule);
+    await player.setupPlaywright(browser);
+    
+    // Set up event listeners
+    player.on('stepStart', ({ step, total, type }) => {
+      process.stdout.write(chalk.blue(`\r[${step}/${total}] ${type}...`));
+    });
+    
+    player.on('stepPass', ({ step, type, duration }) => {
+      process.stdout.write(chalk.green(`\r[${step}] ${type} ✓ (${duration.toFixed(0)}ms)\n`));
+    });
+    
+    player.on('stepFail', ({ step, type, error, duration }) => {
+      process.stdout.write(chalk.red(`\r[${step}] ${type} ✗ (${duration.toFixed(0)}ms)\n`));
+      if (verbose) {
+        console.error(chalk.red(`   Error: ${error.message}`));
+        if (error.stack) {
+          console.error(chalk.gray(error.stack.split('\n').slice(1).join('\n')));
+        }
+      }
+    });
+    
+    player.on('complete', (result) => {
+      console.log('\n');
+      console.log(chalk.bold('🏁 Replay Complete'));
+      console.log(chalk.gray('━'.repeat(40)));
+      console.log(`  Steps: ${result.passed + result.failed + result.skipped} total`);
+      console.log(`  ${chalk.green(`✓ ${result.passed} passed`)}`);
+      if (result.failed > 0) {
+        console.log(`  ${chalk.red(`✗ ${result.failed} failed`)}`);
+      }
+      if (result.skipped > 0) {
+        console.log(`  ${chalk.yellow(`↷ ${result.skipped} skipped`)}`);
+      }
+      console.log(`\n  Duration: ${(result.duration / 1000).toFixed(2)}s`);
+      console.log(chalk.gray('━'.repeat(40) + '\n'));
+      
+      if (result.failed > 0) {
+        console.log(chalk.red('❌ Some steps failed during replay'));
+        process.exit(1);
+      } else {
+        console.log(chalk.green('✅ Replay completed successfully'));
+        process.exit(0);
+      }
+    });
+    
+    // Start playback
+    await player.play();
+    
+  } catch (error) {
+    console.error(chalk.red('\n❌ Error during replay:'), error);
+    await browser.close();
+    process.exit(1);
+  }
+}
+
+/**
+ * List available replay capsules
+ */
+async function listCapsules() {
+  try {
+    const engine = await initEngine();
+    const capsules = await engine.listCapsules();
+    
+    if (capsules.length === 0) {
+      console.log(chalk.yellow('\nNo replay capsules found.\n'));
+      return;
+    }
+    
+    console.log(chalk.blue('\n📼 Available Replay Capsules\n'));
+    
+    capsules.forEach((capsule, index) => {
+      const { id, name, timestamp, metadata } = capsule;
+      const date = new Date(timestamp).toLocaleString();
+      const steps = metadata.steps || '?';
+      
+      console.log(chalk.bold(`${index + 1}. ${name || 'Untitled Session'}`));
+      console.log(`   ID: ${chalk.gray(id)}`);
+      console.log(`   Steps: ${chalk.cyan(steps)}`);
+      console.log(`   Recorded: ${chalk.gray(date)}`);
+      
+      if (metadata.tags && metadata.tags.length > 0) {
+        console.log(`   Tags: ${metadata.tags.map(t => chalk.cyan(`#${t}`)).join(' ')}`);
+      }
+      
+      if (metadata.description) {
+        console.log(`   ${chalk.gray(metadata.description)}`);
+      }
+      
+      console.log();
+    });
+    
+  } catch (error) {
+    console.error(chalk.red('\n❌ Error listing capsules:'), error);
+    process.exit(1);
+  }
+}
+
+/**
+ * Show details of a specific capsule
+ */
+async function showCapsule(capsuleId) {
+  try {
+    const engine = await initEngine();
+    const capsule = await engine.getCapsule(capsuleId);
+    
+    if (!capsule) {
+      console.error(chalk.red(`\n❌ Capsule not found: ${capsuleId}`));
+      process.exit(1);
+    }
+    
+    const { metadata, steps } = capsule;
+    
+    console.log(chalk.blue('\n📼 Replay Capsule Details\n'));
+    console.log(chalk.bold(metadata.name || 'Untitled Session'));
+    console.log(chalk.gray('━'.repeat(60)));
+    
+    // Basic info
+    console.log(chalk.bold('\n📋 Metadata'));
+    console.log(`  ID:          ${chalk.gray(metadata.id)}`);
+    console.log(`  Recorded:    ${chalk.gray(new Date(metadata.createdAt).toLocaleString())}`);
+    console.log(`  Duration:    ${chalk.cyan((metadata.duration / 1000).toFixed(2))}s`);
+    console.log(`  Steps:       ${chalk.cyan(steps.length)}`);
+    
+    if (metadata.tags && metadata.tags.length > 0) {
+      console.log(`  Tags:        ${metadata.tags.map(t => chalk.cyan(`#${t}`)).join(' ')}`);
+    }
+    
+    if (metadata.url) {
+      console.log(`  URL:         ${chalk.cyan(metadata.url)}`);
+    }
+    
+    if (metadata.userAgent) {
+      console.log(`  User Agent:  ${chalk.gray(metadata.userAgent)}`);
+    }
+    
+    if (metadata.viewport) {
+      console.log(`  Viewport:    ${metadata.viewport.width}x${metadata.viewport.height}`);
+    }
+    
+    // Description
+    if (metadata.description) {
+      console.log(`\n${chalk.bold('📝 Description')}\n${metadata.description}`);
+    }
+    
+    // Steps summary
+    console.log(`\n${chalk.bold('🔍 Steps')}`);
+    
+    const stepTypes = {};
+    steps.forEach(step => {
+      stepTypes[step.type] = (stepTypes[step.type] || 0) + 1;
+    });
+    
+    console.log('  ' + Object.entries(stepTypes)
+      .map(([type, count]) => `${chalk.cyan(type)}: ${count}`)
+      .join(', '));
+    
+    // Sample of steps
+    console.log(`\n${chalk.bold('🔎 Sample Steps')}`);
+    const sampleSize = Math.min(5, steps.length);
+    steps.slice(0, sampleSize).forEach((step, i) => {
+      const time = (step.timestamp / 1000).toFixed(2).padStart(6, ' ');
+      const type = step.type.padEnd(15, ' ');
+      let details = '';
+      
+      switch (step.type) {
+        case 'navigation':
+          details = step.url;
+          break;
+        case 'click':
+          details = step.selector || `x:${step.x}, y:${step.y}`;
+          break;
+        case 'input':
+          details = `${step.selector} = "${step.value}"`;
+          break;
+        default:
+          details = JSON.stringify(step).slice(0, 50) + '...';
+      }
+      
+      console.log(`  ${chalk.gray(time + 's')} ${chalk.cyan(type)} ${details}`);
+    });
+    
+    if (steps.length > sampleSize) {
+      console.log(`  ... and ${steps.length - sampleSize} more steps`);
+    }
+    
+    console.log();
+    
+  } catch (error) {
+    console.error(chalk.red('\n❌ Error showing capsule:'), error);
+    process.exit(1);
+  }
+}
+
+/**
+ * Delete a replay capsule
+ */
+async function deleteCapsule(capsuleId) {
+  try {
+    const engine = await initEngine();
+    await engine.deleteCapsule(capsuleId);
+    console.log(chalk.green(`\n✅ Deleted capsule: ${capsuleId}\n`));
+  } catch (error) {
+    console.error(chalk.red('\n❌ Error deleting capsule:'), error);
+    process.exit(1);
+  }
+}
+
+/**
+ * Export a replay capsule to a file
+ */
+async function exportCapsule(capsuleId, outputFile) {
+  try {
+    const engine = await initEngine();
+    const outputPath = await engine.exportCapsule(capsuleId, outputFile);
+    console.log(chalk.green(`\n✅ Exported capsule to: ${outputPath}\n`));
+  } catch (error) {
+    console.error(chalk.red('\n❌ Error exporting capsule:'), error);
+    process.exit(1);
+  }
+}
+
+/**
+ * Import a replay capsule from a file
+ */
+async function importCapsule(filePath) {
+  try {
+    const engine = await initEngine();
+    const result = await engine.importCapsule(filePath);
+    console.log(chalk.green(`\n✅ Imported capsule: ${result.id}`));
+    console.log(chalk.gray(`Path: ${result.path}\n`));
+  } catch (error) {
+    console.error(chalk.red('\n❌ Error importing capsule:'), error);
+    process.exit(1);
+  }
+}
+
+// Set up CLI
+program
+  .name('vibecheck replay')
+  .description('Record and replay user interactions for testing and debugging')
+  .version(version)
+  .option('-v, --verbose', 'Enable verbose output', false)
+  .option('--output-dir <dir>', 'Directory to save replay files', outputDir)
+  .hook('preAction', (thisCommand) => {
+    verbose = thisCommand.opts().verbose;
+    outputDir = thisCommand.opts().outputDir || outputDir;
+  });
+
+// Record command
+program
+  .command('record <url>')
+  .description('Record a user session')
+  .option('-n, --name <name>', 'Name for this recording')
+  .option('-d, --description <description>', 'Description of the recording')
+  .option('--tags <tags>', 'Comma-separated list of tags')
+  .option('--duration <seconds>', 'Auto-stop after specified seconds')
+  .option('--headed', 'Run browser in headed mode', false)
+  .option('--devtools', 'Open devtools', false)
+  .option('--video', 'Record video', false)
+  .action((url, options) => {
+    recordSession(url, options).catch(console.error);
+  });
+
+// Play command
+program
+  .command('play <capsule>')
+  .description('Replay a recorded session')
+  .option('--speed <speed>', 'Playback speed (1.0 = normal, 2.0 = 2x, etc.)', parseFloat, 1.0)
+  .option('--headed', 'Run browser in headed mode', false)
+  .option('--devtools', 'Open devtools', false)
+  .option('--stop-on-failure', 'Stop on first failure', false)
+  .action((capsule, options) => {
+    replaySession(capsule, options).catch(console.error);
+  });
+
+// List command
+program
+  .command('list')
+  .description('List available replay capsules')
+  .action(() => {
+    listCapsules().catch(console.error);
+  });
+
+// Show command
+program
+  .command('show <id>')
+  .description('Show details of a replay capsule')
+  .action((id) => {
+    showCapsule(id).catch(console.error);
+  });
+
+// Delete command
+program
+  .command('delete <id>')
+  .description('Delete a replay capsule')
+  .action((id) => {
+    deleteCapsule(id).catch(console.error);
+  });
+
+// Export command
+program
+  .command('export <id> <file>')
+  .description('Export a replay capsule to a file')
+  .action((id, file) => {
+    exportCapsule(id, file).catch(console.error);
+  });
+
+// Import command
+program
+  .command('import <file>')
+  .description('Import a replay capsule from a file')
+  .action((file) => {
+    importCapsule(file).catch(console.error);
+  });
+
+// Show help if no arguments
+if (process.argv.length <= 2) {
+  program.help();
+}
+
+// Parse command line arguments
+program.parse(process.argv);