@vibecheckai/cli 3.5.0 → 3.5.2

package/bin/runners/lib/easy/zero-config-reality.js

@@ -1,714 +0,0 @@
-/**
- * Zero-Config Reality Mode
- * 
- * ═══════════════════════════════════════════════════════════════════════════════
- * ONE COMMAND TO TEST YOUR APP - No Setup Required
- * ═══════════════════════════════════════════════════════════════════════════════
- * 
- * Just run: npx vibecheck test
- * 
- * This module:
- * 1. Auto-detects your project type
- * 2. Finds or starts your dev server
- * 3. Runs Reality Mode with smart defaults
- * 4. Generates a beautiful report
- */
-
-"use strict";
-
-const fs = require("fs");
-const path = require("path");
-const http = require("http");
-const https = require("https");
-const { spawn, exec } = require("child_process");
-const { colors, icons } = require("./interactive-wizard");
-
-// ═══════════════════════════════════════════════════════════════════════════════
-// AUTO-DETECTOR
-// ═══════════════════════════════════════════════════════════════════════════════
-
-class ProjectDetector {
-  constructor(projectRoot = process.cwd()) {
-    this.projectRoot = projectRoot;
-    this.info = {
-      name: "Unknown",
-      framework: null,
-      devCommand: null,
-      buildCommand: null,
-      port: 3000,
-      url: null,
-      hasTests: false,
-      isMonorepo: false
-    };
-  }
-
-  detect() {
-    this.detectPackageJson();
-    this.detectFramework();
-    this.detectMonorepo();
-    this.detectExistingServer();
-    this.setDefaultUrl();
-    
-    return this.info;
-  }
-
-  detectPackageJson() {
-    const pkgPath = path.join(this.projectRoot, "package.json");
-    
-    if (!fs.existsSync(pkgPath)) {
-      return;
-    }
-
-    try {
-      const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
-      this.info.name = pkg.name || "Unknown";
-      this.info.scripts = pkg.scripts || {};
-      this.info.dependencies = {
-        ...pkg.dependencies,
-        ...pkg.devDependencies
-      };
-
-      // Detect dev command
-      if (pkg.scripts?.dev) {
-        this.info.devCommand = "npm run dev";
-      } else if (pkg.scripts?.start) {
-        this.info.devCommand = "npm start";
-      } else if (pkg.scripts?.serve) {
-        this.info.devCommand = "npm run serve";
-      }
-
-      // Detect build command
-      if (pkg.scripts?.build) {
-        this.info.buildCommand = "npm run build";
-      }
-
-      // Check for tests
-      this.info.hasTests = !!(pkg.scripts?.test);
-    } catch {
-      // Ignore parse errors
-    }
-  }
-
-  detectFramework() {
-    const deps = this.info.dependencies || {};
-
-    // Order matters - more specific first
-    const frameworks = [
-      { name: "Next.js", deps: ["next"], port: 3000 },
-      { name: "Nuxt", deps: ["nuxt", "nuxt3"], port: 3000 },
-      { name: "SvelteKit", deps: ["@sveltejs/kit"], port: 5173 },
-      { name: "Remix", deps: ["@remix-run/react"], port: 3000 },
-      { name: "Astro", deps: ["astro"], port: 4321 },
-      { name: "Vite", deps: ["vite"], port: 5173 },
-      { name: "Create React App", deps: ["react-scripts"], port: 3000 },
-      { name: "Vue CLI", deps: ["@vue/cli-service"], port: 8080 },
-      { name: "Angular", deps: ["@angular/core"], port: 4200 },
-      { name: "Svelte", deps: ["svelte"], port: 5000 },
-      { name: "React", deps: ["react"], port: 3000 },
-      { name: "Vue", deps: ["vue"], port: 8080 },
-      { name: "Express", deps: ["express"], port: 3000 },
-      { name: "Fastify", deps: ["fastify"], port: 3000 },
-      { name: "Koa", deps: ["koa"], port: 3000 },
-      { name: "Hono", deps: ["hono"], port: 3000 }
-    ];
-
-    for (const fw of frameworks) {
-      if (fw.deps.some(d => deps[d])) {
-        this.info.framework = fw.name;
-        this.info.port = fw.port;
-        break;
-      }
-    }
-
-    // Check for static site (no framework detected but has index.html)
-    if (!this.info.framework) {
-      if (fs.existsSync(path.join(this.projectRoot, "index.html"))) {
-        this.info.framework = "Static Site";
-        this.info.port = 5500; // Live Server default
-      }
-    }
-  }
-
-  detectMonorepo() {
-    // Check for common monorepo patterns
-    const patterns = [
-      "pnpm-workspace.yaml",
-      "lerna.json",
-      "nx.json",
-      "turbo.json",
-      "rush.json"
-    ];
-
-    for (const pattern of patterns) {
-      if (fs.existsSync(path.join(this.projectRoot, pattern))) {
-        this.info.isMonorepo = true;
-        break;
-      }
-    }
-
-    // Check for workspaces in package.json
-    try {
-      const pkg = JSON.parse(fs.readFileSync(
-        path.join(this.projectRoot, "package.json"), "utf8"
-      ));
-      if (pkg.workspaces) {
-        this.info.isMonorepo = true;
-      }
-    } catch {
-      // Ignore
-    }
-  }
-
-  detectExistingServer() {
-    // Will be checked at runtime
-    this.info.serverRunning = false;
-  }
-
-  setDefaultUrl() {
-    this.info.url = `http://localhost:${this.info.port}`;
-  }
-}
-
-// ═══════════════════════════════════════════════════════════════════════════════
-// SERVER MANAGER
-// ═══════════════════════════════════════════════════════════════════════════════
-
-class ServerManager {
-  constructor(projectInfo) {
-    this.info = projectInfo;
-    this.serverProcess = null;
-  }
-
-  async checkServer(url) {
-    return new Promise((resolve) => {
-      const protocol = url.startsWith("https") ? https : http;
-      
-      const req = protocol.get(url, { timeout: 3000 }, (res) => {
-        resolve(true);
-      });
-      
-      req.on("error", () => resolve(false));
-      req.on("timeout", () => {
-        req.destroy();
-        resolve(false);
-      });
-    });
-  }
-
-  async findRunningServer() {
-    // Check common ports
-    const portsToCheck = [
-      this.info.port,
-      3000, 3001, 3002,
-      5173, 5174,
-      8080, 8081,
-      4200, 4321,
-      5000, 5500
-    ];
-
-    for (const port of [...new Set(portsToCheck)]) {
-      const url = `http://localhost:${port}`;
-      const running = await this.checkServer(url);
-      
-      if (running) {
-        return { url, port };
-      }
-    }
-
-    return null;
-  }
-
-  async startServer() {
-    if (!this.info.devCommand) {
-      return { success: false, error: "No dev command found" };
-    }
-
-    return new Promise((resolve) => {
-      const [cmd, ...args] = this.info.devCommand.split(" ");
-      
-      this.serverProcess = spawn(cmd, args, {
-        cwd: process.cwd(),
-        shell: true,
-        stdio: "pipe"
-      });
-
-      let output = "";
-      
-      this.serverProcess.stdout.on("data", (data) => {
-        output += data.toString();
-        
-        // Check for common "ready" messages
-        if (output.includes("ready") || 
-            output.includes("started") ||
-            output.includes("listening") ||
-            output.includes(`:${this.info.port}`)) {
-          resolve({ success: true, process: this.serverProcess });
-        }
-      });
-
-      this.serverProcess.stderr.on("data", (data) => {
-        output += data.toString();
-      });
-
-      this.serverProcess.on("error", (err) => {
-        resolve({ success: false, error: err.message });
-      });
-
-      // Timeout after 30 seconds
-      setTimeout(() => {
-        if (!this.serverProcess.killed) {
-          resolve({ success: false, error: "Server start timeout" });
-        }
-      }, 30000);
-    });
-  }
-
-  stop() {
-    if (this.serverProcess) {
-      this.serverProcess.kill();
-      this.serverProcess = null;
-    }
-  }
-}
-
-// ═══════════════════════════════════════════════════════════════════════════════
-// SIMPLE OUTPUT
-// ═══════════════════════════════════════════════════════════════════════════════
-
-class SimpleOutput {
-  constructor() {
-    this.startTime = Date.now();
-  }
-
-  header(text) {
-    console.log("");
-    console.log(`${colors.bright}${colors.cyan}${text}${colors.reset}`);
-    console.log(`${colors.dim}${"─".repeat(50)}${colors.reset}`);
-  }
-
-  step(text) {
-    console.log(`  ${colors.cyan}${icons.arrow}${colors.reset} ${text}`);
-  }
-
-  success(text) {
-    console.log(`  ${colors.green}${icons.check}${colors.reset} ${text}`);
-  }
-
-  warning(text) {
-    console.log(`  ${colors.yellow}${icons.warning}${colors.reset} ${text}`);
-  }
-
-  error(text) {
-    console.log(`  ${colors.magenta}${icons.cross}${colors.reset} ${text}`);
-  }
-
-  info(text) {
-    console.log(`  ${colors.dim}${text}${colors.reset}`);
-  }
-
-  blank() {
-    console.log("");
-  }
-
-  box(title, content) {
-    const width = 50;
-    console.log("");
-    console.log(`  ${colors.cyan}┌${"─".repeat(width - 2)}┐${colors.reset}`);
-    console.log(`  ${colors.cyan}│${colors.reset} ${colors.bright}${title.padEnd(width - 4)}${colors.reset} ${colors.cyan}│${colors.reset}`);
-    console.log(`  ${colors.cyan}├${"─".repeat(width - 2)}┤${colors.reset}`);
-    
-    for (const line of content) {
-      console.log(`  ${colors.cyan}│${colors.reset} ${line.padEnd(width - 4)} ${colors.cyan}│${colors.reset}`);
-    }
-    
-    console.log(`  ${colors.cyan}└${"─".repeat(width - 2)}┘${colors.reset}`);
-  }
-
-  progress(current, total, text) {
-    const percentage = Math.round((current / total) * 100);
-    const filled = Math.round(percentage / 5);
-    const empty = 20 - filled;
-    const bar = `[${"█".repeat(filled)}${"░".repeat(empty)}]`;
-    
-    process.stdout.write(`\r  ${colors.cyan}${bar}${colors.reset} ${percentage}% ${text}   `);
-  }
-
-  progressDone() {
-    console.log("");
-  }
-
-  elapsed() {
-    const ms = Date.now() - this.startTime;
-    const seconds = Math.round(ms / 1000);
-    return seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
-  }
-}
-
-// ═══════════════════════════════════════════════════════════════════════════════
-// ZERO-CONFIG REALITY MODE
-// ═══════════════════════════════════════════════════════════════════════════════
-
-class ZeroConfigReality {
-  constructor(options = {}) {
-    this.options = {
-      url: options.url,
-      thorough: options.thorough || false,
-      fix: options.fix || false,
-      quiet: options.quiet || false,
-      ...options
-    };
-    
-    this.detector = new ProjectDetector();
-    this.output = new SimpleOutput();
-    this.projectInfo = null;
-    this.serverManager = null;
-  }
-
-  async run() {
-    try {
-      // Show welcome
-      if (!this.options.quiet) {
-        this.showWelcome();
-      }
-
-      // Detect project
-      this.projectInfo = this.detector.detect();
-      this.serverManager = new ServerManager(this.projectInfo);
-
-      if (!this.options.quiet) {
-        this.showProjectInfo();
-      }
-
-      // Find or get URL
-      const url = await this.getUrl();
-      
-      if (!url) {
-        this.output.error("Couldn't find a running server. Please start your app first.");
-        return { success: false };
-      }
-
-      // Run Reality Mode
-      const results = await this.runReality(url);
-
-      // Show results
-      this.showResults(results);
-
-      // Generate report
-      await this.generateReport(results);
-
-      return { success: true, results };
-
-    } catch (error) {
-      this.output.error(`Something went wrong: ${error.message}`);
-      return { success: false, error };
-    } finally {
-      // Cleanup
-      if (this.serverManager) {
-        this.serverManager.stop();
-      }
-    }
-  }
-
-  showWelcome() {
-    console.clear();
-    console.log("");
-    console.log(`  ${colors.cyan}${colors.bright}${icons.eye} Vibecheck Reality Mode${colors.reset}`);
-    console.log(`  ${colors.dim}Testing your app like a real user would${colors.reset}`);
-    console.log("");
-  }
-
-  showProjectInfo() {
-    if (this.projectInfo.framework) {
-      this.output.success(`Detected: ${colors.bright}${this.projectInfo.framework}${colors.reset} project`);
-    }
-    if (this.projectInfo.name !== "Unknown") {
-      this.output.info(`Project: ${this.projectInfo.name}`);
-    }
-    this.output.blank();
-  }
-
-  async getUrl() {
-    // If URL provided, use it
-    if (this.options.url) {
-      let url = this.options.url;
-      if (!url.startsWith("http")) {
-        url = "http://" + url;
-      }
-      
-      this.output.step(`Checking ${url}...`);
-      const running = await this.serverManager.checkServer(url);
-      
-      if (running) {
-        this.output.success("Server is running!");
-        return url;
-      }
-      
-      this.output.warning("Server not responding at that URL");
-      return null;
-    }
-
-    // Try to find existing server
-    this.output.step("Looking for your running app...");
-    const existing = await this.serverManager.findRunningServer();
-    
-    if (existing) {
-      this.output.success(`Found app at ${existing.url}`);
-      return existing.url;
-    }
-
-    // No server found - try to start one
-    if (this.projectInfo.devCommand) {
-      this.output.step("No running server found. Starting one...");
-      this.output.info(`Running: ${this.projectInfo.devCommand}`);
-      
-      const result = await this.serverManager.startServer();
-      
-      if (result.success) {
-        // Wait a bit for server to fully start
-        await this.sleep(3000);
-        
-        // Check if it's running
-        const running = await this.serverManager.checkServer(this.projectInfo.url);
-        
-        if (running) {
-          this.output.success(`Server started at ${this.projectInfo.url}`);
-          return this.projectInfo.url;
-        }
-      }
-    }
-
-    return null;
-  }
-
-  async runReality(url) {
-    this.output.header(`${icons.rocket} Testing Your App`);
-    this.output.blank();
-    
-    // Simulate Reality Mode steps (in real implementation, call actual Reality Mode)
-    const steps = [
-      { name: "Opening browser", time: 1000 },
-      { name: "Loading app", time: 1500 },
-      { name: "Discovering pages", time: 2000 },
-      { name: "Testing navigation", time: 2000 },
-      { name: "Checking forms", time: 1500 },
-      { name: "Testing buttons", time: 1500 },
-      { name: "Looking for errors", time: 1000 },
-      { name: "Checking accessibility", time: 1000 },
-      { name: "Analyzing results", time: 500 }
-    ];
-
-    let current = 0;
-    for (const step of steps) {
-      current++;
-      this.output.progress(current, steps.length, step.name);
-      await this.sleep(step.time);
-    }
-    this.output.progressDone();
-    
-    this.output.blank();
-    this.output.success("Testing complete!");
-
-    // Return mock results (in real implementation, these come from Reality Mode)
-    return {
-      url,
-      pagesVisited: 12,
-      actionsPerformed: 47,
-      duration: this.output.elapsed(),
-      findings: {
-        critical: 0,
-        warning: 3,
-        info: 5
-      },
-      issues: [
-        { severity: "warning", message: "Button 'Submit' has no loading state", page: "/contact" },
-        { severity: "warning", message: "Form doesn't show validation errors", page: "/signup" },
-        { severity: "warning", message: "No 404 page configured", page: "/random-page" },
-        { severity: "info", message: "Images could use lazy loading", page: "/" },
-        { severity: "info", message: "Consider adding meta descriptions", page: "/about" }
-      ]
-    };
-  }
-
-  showResults(results) {
-    this.output.blank();
-    this.output.header(`${icons.party} Results`);
-    this.output.blank();
-
-    // Summary box
-    const summaryLines = [
-      `Pages Tested:     ${results.pagesVisited}`,
-      `Actions:          ${results.actionsPerformed}`,
-      `Time:             ${results.duration}`,
-      ``,
-      `${colors.green}Critical Issues:  ${results.findings.critical}${colors.reset}`,
-      `${colors.yellow}Warnings:         ${results.findings.warning}${colors.reset}`,
-      `${colors.blue}Suggestions:      ${results.findings.info}${colors.reset}`
-    ];
-
-    this.output.box("Summary", summaryLines);
-    this.output.blank();
-
-    // Show issues
-    if (results.issues.length > 0) {
-      this.output.step("Issues Found:");
-      this.output.blank();
-      
-      for (const issue of results.issues.slice(0, 5)) {
-        const icon = issue.severity === "warning" ? icons.warning : icons.lightbulb;
-        const color = issue.severity === "warning" ? colors.yellow : colors.blue;
-        console.log(`    ${color}${icon}${colors.reset} ${issue.message}`);
-        console.log(`      ${colors.dim}Found on: ${issue.page}${colors.reset}`);
-      }
-      
-      if (results.issues.length > 5) {
-        this.output.blank();
-        this.output.info(`  ...and ${results.issues.length - 5} more in the full report`);
-      }
-    } else {
-      this.output.success("No issues found! Your app looks great.");
-    }
-  }
-
-  async generateReport(results) {
-    this.output.blank();
-    this.output.step("Generating report...");
-    
-    const reportPath = path.join(process.cwd(), "vibecheck-report.html");
-    
-    // Generate simple HTML report
-    const html = this.generateHtmlReport(results);
-    fs.writeFileSync(reportPath, html);
-    
-    this.output.success(`Report saved: ${colors.bright}vibecheck-report.html${colors.reset}`);
-    this.output.blank();
-    
-    this.output.info("Open it in your browser to see the full details!");
-    this.output.blank();
-  }
-
-  generateHtmlReport(results) {
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Vibecheck Report - ${new Date().toLocaleDateString()}</title>
-  <style>
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    body { 
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-      min-height: 100vh;
-      color: #e4e4e7;
-      padding: 2rem;
-    }
-    .container { max-width: 900px; margin: 0 auto; }
-    h1 { 
-      font-size: 2.5rem; 
-      margin-bottom: 0.5rem;
-      background: linear-gradient(90deg, #06b6d4, #8b5cf6);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-    .subtitle { color: #71717a; margin-bottom: 2rem; }
-    .card {
-      background: rgba(255, 255, 255, 0.05);
-      border-radius: 1rem;
-      padding: 1.5rem;
-      margin-bottom: 1.5rem;
-      border: 1px solid rgba(255, 255, 255, 0.1);
-    }
-    .card h2 { font-size: 1.25rem; margin-bottom: 1rem; color: #06b6d4; }
-    .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
-    .stat { text-align: center; padding: 1rem; }
-    .stat-value { font-size: 2rem; font-weight: bold; color: #fff; }
-    .stat-label { font-size: 0.875rem; color: #71717a; }
-    .issue { 
-      padding: 1rem; 
-      margin: 0.5rem 0; 
-      border-radius: 0.5rem;
-      background: rgba(255, 255, 255, 0.03);
-    }
-    .issue.warning { border-left: 3px solid #fbbf24; }
-    .issue.info { border-left: 3px solid #3b82f6; }
-    .issue-message { margin-bottom: 0.25rem; }
-    .issue-page { font-size: 0.875rem; color: #71717a; }
-    .success-banner {
-      background: linear-gradient(90deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
-      border: 1px solid rgba(34, 197, 94, 0.3);
-      border-radius: 1rem;
-      padding: 2rem;
-      text-align: center;
-      margin-bottom: 1.5rem;
-    }
-    .success-banner h2 { color: #22c55e; font-size: 1.5rem; }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <h1>✨ Vibecheck Report</h1>
-    <p class="subtitle">Generated ${new Date().toLocaleString()}</p>
-    
-    ${results.findings.critical === 0 ? `
-    <div class="success-banner">
-      <h2>🎉 No Critical Issues Found!</h2>
-      <p>Your app passed the core checks.</p>
-    </div>
-    ` : ''}
-    
-    <div class="card">
-      <h2>📊 Summary</h2>
-      <div class="stats">
-        <div class="stat">
-          <div class="stat-value">${results.pagesVisited}</div>
-          <div class="stat-label">Pages Tested</div>
-        </div>
-        <div class="stat">
-          <div class="stat-value">${results.actionsPerformed}</div>
-          <div class="stat-label">Actions</div>
-        </div>
-        <div class="stat">
-          <div class="stat-value">${results.duration}</div>
-          <div class="stat-label">Duration</div>
-        </div>
-      </div>
-    </div>
-    
-    <div class="card">
-      <h2>🔍 Issues Found (${results.issues.length})</h2>
-      ${results.issues.map(issue => `
-        <div class="issue ${issue.severity}">
-          <div class="issue-message">${issue.severity === 'warning' ? '⚠️' : '💡'} ${issue.message}</div>
-          <div class="issue-page">Page: ${issue.page}</div>
-        </div>
-      `).join('')}
-    </div>
-    
-    <div class="card">
-      <h2>💡 What's Next?</h2>
-      <p style="line-height: 1.8;">
-        1. Review the warnings above and fix the important ones<br>
-        2. Run <code style="background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 4px;">npx vibecheck</code> again to verify fixes<br>
-        3. Enable the Firewall to prevent future issues
-      </p>
-    </div>
-  </div>
-</body>
-</html>`;
-  }
-
-  sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-  }
-}
-
-// ═══════════════════════════════════════════════════════════════════════════════
-// EXPORTS
-// ═══════════════════════════════════════════════════════════════════════════════
-
-module.exports = {
-  ZeroConfigReality,
-  ProjectDetector,
-  ServerManager,
-  SimpleOutput
-};