@vibecheckai/cli 3.0.9 → 3.0.10

package/bin/runners/runGraph.js

@@ -1,6 +1,10 @@
 /**
  * vibecheck graph - Reality Proof Graph
  * 
+ * ═══════════════════════════════════════════════════════════════════════════════
+ * ENTERPRISE EDITION - World-Class Terminal Experience
+ * ═══════════════════════════════════════════════════════════════════════════════
+ * 
  * Builds and visualizes the complete causal chain:
  * UI action → client function → network call → server route → handler → DB/external
  * 
@@ -27,23 +31,143 @@ const {
   mergeRuntimeResults
 } = require("./lib/graph");
 
+// ═══════════════════════════════════════════════════════════════════════════════
+// ADVANCED TERMINAL - ANSI CODES & UTILITIES
+// ═══════════════════════════════════════════════════════════════════════════════
+
 const c = {
   reset: '\x1b[0m',
   bold: '\x1b[1m',
   dim: '\x1b[2m',
+  italic: '\x1b[3m',
+  red: '\x1b[31m',
   green: '\x1b[32m',
   yellow: '\x1b[33m',
-  cyan: '\x1b[36m',
-  red: '\x1b[31m',
   blue: '\x1b[34m',
+  magenta: '\x1b[35m',
+  cyan: '\x1b[36m',
+  white: '\x1b[37m',
+  gray: '\x1b[90m',
+  clearLine: '\x1b[2K',
+  hideCursor: '\x1b[?25l',
+  showCursor: '\x1b[?25h',
 };
 
+const rgb = (r, g, b) => `\x1b[38;2;${r};${g};${b}m`;
+const bgRgb = (r, g, b) => `\x1b[48;2;${r};${g};${b}m`;
+
+const colors = {
+  gradient1: rgb(255, 100, 150),
+  gradient2: rgb(255, 80, 170),
+  gradient3: rgb(255, 60, 190),
+  shipGreen: rgb(0, 255, 150),
+  warnAmber: rgb(255, 200, 0),
+  blockRed: rgb(255, 80, 80),
+  accent: rgb(255, 100, 150),
+  muted: rgb(120, 120, 140),
+  node: rgb(100, 200, 255),
+  edge: rgb(150, 255, 150),
+  broken: rgb(255, 100, 100),
+};
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// PREMIUM BANNER
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const GRAPH_BANNER = `
+${rgb(255, 100, 150)}   ██████╗ ██████╗  █████╗ ██████╗ ██╗  ██╗${c.reset}
+${rgb(255, 80, 170)}  ██╔════╝ ██╔══██╗██╔══██╗██╔══██╗██║  ██║${c.reset}
+${rgb(255, 60, 190)}  ██║  ███╗██████╔╝███████║██████╔╝███████║${c.reset}
+${rgb(255, 40, 210)}  ██║   ██║██╔══██╗██╔══██║██╔═══╝ ██╔══██║${c.reset}
+${rgb(255, 20, 230)}  ╚██████╔╝██║  ██║██║  ██║██║     ██║  ██║${c.reset}
+${rgb(255, 0, 255)}   ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝     ╚═╝  ╚═╝${c.reset}
+`;
+
+const BANNER_FULL = `
+${rgb(255, 100, 150)}  ██╗   ██╗██╗██████╗ ███████╗ ██████╗██╗  ██╗███████╗ ██████╗██╗  ██╗${c.reset}
+${rgb(255, 90, 160)}  ██║   ██║██║██╔══██╗██╔════╝██╔════╝██║  ██║██╔════╝██╔════╝██║ ██╔╝${c.reset}
+${rgb(255, 80, 170)}  ██║   ██║██║██████╔╝█████╗  ██║     ███████║█████╗  ██║     █████╔╝ ${c.reset}
+${rgb(255, 60, 190)}  ╚██╗ ██╔╝██║██╔══██╗██╔══╝  ██║     ██╔══██║██╔══╝  ██║     ██╔═██╗ ${c.reset}
+${rgb(255, 40, 210)}   ╚████╔╝ ██║██████╔╝███████╗╚██████╗██║  ██║███████╗╚██████╗██║  ██╗${c.reset}
+${rgb(255, 20, 230)}    ╚═══╝  ╚═╝╚═════╝ ╚══════╝ ╚═════╝╚═╝  ╚═╝╚══════╝ ╚═════╝╚═╝  ╚═╝${c.reset}
+
+${c.dim}  ┌─────────────────────────────────────────────────────────────────────┐${c.reset}
+${c.dim}  │${c.reset}  ${rgb(255, 100, 150)}📊${c.reset} ${c.bold}GRAPH${c.reset} ${c.dim}•${c.reset} ${rgb(200, 200, 200)}Proof Visualization${c.reset} ${c.dim}•${c.reset} ${rgb(150, 150, 150)}Causal Chain${c.reset} ${c.dim}•${c.reset} ${rgb(100, 100, 100)}Edge Analysis${c.reset} ${c.dim}│${c.reset}
+${c.dim}  └─────────────────────────────────────────────────────────────────────┘${c.reset}
+`;
+
+const ICONS = {
+  graph: '📊',
+  check: '✓',
+  cross: '✗',
+  warning: '⚠',
+  arrow: '→',
+  bullet: '•',
+  node: '◉',
+  edge: '─',
+  broken: '╳',
+  sparkle: '✨',
+  file: '📄',
+  folder: '📁',
+  view: '👁️',
+};
+
+const SPINNER_DOTS = ['⣾', '⣽', '⣻', '⢿', '⡿', '⣟', '⣯', '⣷'];
+let spinnerIndex = 0;
+let spinnerInterval = null;
+let spinnerStartTime = null;
+
+function formatDuration(ms) {
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+function startSpinner(message) {
+  spinnerStartTime = Date.now();
+  process.stdout.write(c.hideCursor);
+  spinnerInterval = setInterval(() => {
+    const elapsed = formatDuration(Date.now() - spinnerStartTime);
+    process.stdout.write(`\r${c.clearLine}  ${colors.accent}${SPINNER_DOTS[spinnerIndex]}${c.reset} ${message} ${c.dim}${elapsed}${c.reset}`);
+    spinnerIndex = (spinnerIndex + 1) % SPINNER_DOTS.length;
+  }, 80);
+}
+
+function stopSpinner(message, success = true) {
+  if (spinnerInterval) {
+    clearInterval(spinnerInterval);
+    spinnerInterval = null;
+  }
+  const elapsed = spinnerStartTime ? formatDuration(Date.now() - spinnerStartTime) : '';
+  const icon = success ? `${colors.shipGreen}${ICONS.check}${c.reset}` : `${colors.blockRed}${ICONS.cross}${c.reset}`;
+  process.stdout.write(`\r${c.clearLine}  ${icon} ${message} ${c.dim}${elapsed}${c.reset}\n`);
+  process.stdout.write(c.showCursor);
+  spinnerStartTime = null;
+}
+
+function printDivider(char = '─', width = 69, color = c.dim) {
+  console.log(`${color}  ${char.repeat(width)}${c.reset}`);
+}
+
+function printSection(title, icon = '◆') {
+  console.log();
+  console.log(`  ${colors.accent}${icon}${c.reset} ${c.bold}${title}${c.reset}`);
+  printDivider();
+}
+
+function progressBar(percent, width = 25) {
+  const filled = Math.round((percent / 100) * width);
+  const empty = width - filled;
+  const color = percent >= 80 ? colors.shipGreen : percent >= 50 ? colors.warnAmber : colors.blockRed;
+  return `${color}${'█'.repeat(filled)}${c.dim}${'░'.repeat(empty)}${c.reset}`;
+}
+
 function ensureDir(p) {
   fs.mkdirSync(p, { recursive: true });
 }
 
 async function runGraph(args) {
   const opts = parseArgs(args);
+  const startTime = Date.now();
 
   if (opts.help) {
     printHelp();
@@ -51,39 +175,51 @@ async function runGraph(args) {
   }
 
   const root = path.resolve(opts.path || process.cwd());
+  const projectName = path.basename(root);
   const outDir = path.join(root, ".vibecheck", "graph");
   ensureDir(outDir);
 
-  console.log(`\n${c.cyan}${c.bold}🔍 vibecheck graph${c.reset}`);
-  console.log(`${c.dim}Building Reality Proof Graph...${c.reset}\n`);
+  // Print banner
+  console.log(BANNER_FULL);
+  console.log(`  ${c.dim}Project:${c.reset}  ${c.bold}${projectName}${c.reset}`);
+  console.log(`  ${c.dim}Path:${c.reset}     ${root}`);
+  console.log();
 
   // Load or build truthpack
+  startSpinner('Loading truthpack...');
   let truthpack = loadTruthpack(root);
   if (!truthpack) {
-    console.log(`${c.dim}Building truthpack...${c.reset}`);
+    stopSpinner('Truthpack not found, building...', true);
+    startSpinner('Building truthpack...');
     truthpack = await buildTruthpack({ repoRoot: root, fastifyEntry: opts.fastifyEntry });
   }
+  stopSpinner('Truthpack loaded', true);
 
   // Extract static graph
-  console.log(`${c.dim}Extracting static edges...${c.reset}`);
+  startSpinner('Extracting static edges...');
   const staticData = await extractStaticGraph(root, truthpack);
+  stopSpinner(`Extracted ${staticData.edges?.length || 0} edges`, true);
 
   // Build proof graph
+  startSpinner('Building proof graph...');
   let graph = buildProofGraph({
     nodes: staticData.nodes,
     edges: staticData.edges,
     meta: { repoRoot: root }
   });
+  stopSpinner(`Built graph with ${graph.nodes?.length || 0} nodes`, true);
 
   // Runtime verification (optional)
   if (opts.runtime && opts.url) {
-    console.log(`${c.dim}Collecting runtime edges from ${opts.url}...${c.reset}`);
+    startSpinner(`Collecting runtime edges from ${opts.url}...`);
     
     try {
       const runtimeEdges = await collectRuntimeEdges(opts.url, graph, opts);
       graph = mergeRuntimeResults(graph, runtimeEdges);
+      stopSpinner('Runtime edges collected', true);
     } catch (e) {
-      console.log(`${c.yellow}⚠️ Runtime collection failed: ${e.message}${c.reset}`);
+      stopSpinner('Runtime collection failed', false);
+      console.log(`    ${c.dim}${e.message}${c.reset}`);
     }
   }
 
@@ -91,6 +227,7 @@ async function runGraph(args) {
   const findings = getFindingsFromGraph(graph);
 
   // Write outputs
+  startSpinner('Writing outputs...');
   fs.writeFileSync(path.join(outDir, "graph.json"), JSON.stringify(graph, null, 2), "utf8");
   
   if (!opts.jsonOnly) {
@@ -104,23 +241,31 @@ async function runGraph(args) {
   if (findings.length > 0) {
     fs.writeFileSync(path.join(outDir, "broken-edges.json"), JSON.stringify(findings, null, 2), "utf8");
   }
+  stopSpinner('Outputs written', true);
 
   // Print summary
-  console.log(`\n${c.bold}Graph Summary${c.reset}`);
-  console.log(`  Nodes: ${graph.nodes.length}`);
-  console.log(`  Valid edges: ${c.green}${graph.edges.length}${c.reset}`);
-  console.log(`  Broken edges: ${graph.brokenEdges.length > 0 ? c.red : c.green}${graph.brokenEdges.length}${c.reset}`);
-  console.log(`  Coverage: ${graph.coverage.percent}%`);
+  const duration = Date.now() - startTime;
+  const coverage = graph.coverage?.percent || 0;
+  
+  printSection('GRAPH SUMMARY', ICONS.graph);
+  console.log();
+  console.log(`  ${colors.node}${ICONS.node}${c.reset} ${c.bold}Nodes:${c.reset}        ${graph.nodes?.length || 0}`);
+  console.log(`  ${colors.edge}${ICONS.edge}${c.reset} ${c.bold}Valid edges:${c.reset}  ${colors.shipGreen}${graph.edges?.length || 0}${c.reset}`);
+  console.log(`  ${colors.broken}${ICONS.broken}${c.reset} ${c.bold}Broken edges:${c.reset} ${graph.brokenEdges?.length > 0 ? colors.blockRed : colors.shipGreen}${graph.brokenEdges?.length || 0}${c.reset}`);
+  console.log();
+  console.log(`  ${c.bold}Coverage:${c.reset}     ${progressBar(coverage)} ${coverage}%`);
+  console.log(`  ${c.bold}Duration:${c.reset}     ${formatDuration(duration)}`);
 
   if (opts.broken || findings.length > 0) {
-    console.log(`\n${c.bold}Broken Edges${c.reset}`);
+    printSection('BROKEN EDGES', ICONS.broken);
+    console.log();
     
     if (findings.length === 0) {
-      console.log(`  ${c.green}✓ No broken edges found${c.reset}`);
+      console.log(`  ${colors.shipGreen}${ICONS.check}${c.reset} No broken edges found`);
     } else {
       for (const f of findings.slice(0, 10)) {
-        const icon = f.severity === "BLOCK" ? `${c.red}✗` : `${c.yellow}⚠`;
-        console.log(`  ${icon} ${f.title}${c.reset}`);
+        const icon = f.severity === "BLOCK" ? `${colors.blockRed}●` : `${colors.warnAmber}●`;
+        console.log(`  ${icon}${c.reset} ${f.title}`);
       }
       if (findings.length > 10) {
         console.log(`  ${c.dim}... and ${findings.length - 10} more${c.reset}`);
@@ -128,21 +273,22 @@ async function runGraph(args) {
     }
   }
 
-  console.log(`\n${c.bold}Output${c.reset}`);
-  console.log(`  ${c.dim}Graph:${c.reset} .vibecheck/graph/graph.json`);
+  printSection('OUTPUT', ICONS.folder);
+  console.log();
+  console.log(`  ${ICONS.file} ${colors.accent}graph.json${c.reset}         ${c.dim}Machine-readable graph${c.reset}`);
   if (!opts.jsonOnly) {
-    console.log(`  ${c.dim}Visualization:${c.reset} .vibecheck/graph/graph.html`);
-    console.log(`  ${c.dim}Mermaid:${c.reset} .vibecheck/graph/graph.mmd`);
+    console.log(`  ${ICONS.view} ${colors.accent}graph.html${c.reset}         ${c.dim}Interactive visualization${c.reset}`);
+    console.log(`  ${ICONS.file} ${colors.accent}graph.mmd${c.reset}          ${c.dim}Mermaid diagram${c.reset}`);
   }
   if (findings.length > 0) {
-    console.log(`  ${c.dim}Broken edges:${c.reset} .vibecheck/graph/broken-edges.json`);
+    console.log(`  ${ICONS.warning} ${colors.accent}broken-edges.json${c.reset}  ${c.dim}Broken edges as findings${c.reset}`);
   }
 
   if (opts.view && !opts.jsonOnly) {
     const htmlPath = path.join(outDir, "graph.html");
-    console.log(`\n${c.dim}Opening graph visualization...${c.reset}`);
+    console.log();
+    console.log(`  ${c.dim}Opening visualization...${c.reset}`);
     
-    // Cross-platform open
     const { exec } = require("child_process");
     const cmd = process.platform === "win32" ? `start "" "${htmlPath}"` :
                 process.platform === "darwin" ? `open "${htmlPath}"` :
@@ -153,7 +299,13 @@ async function runGraph(args) {
   const blocks = findings.filter(f => f.severity === "BLOCK").length;
   const warns = findings.filter(f => f.severity === "WARN").length;
 
-  console.log(`\n${c.bold}Verdict:${c.reset} ${blocks ? `${c.red}🛑 BLOCK${c.reset}` : warns ? `${c.yellow}⚠️ WARN${c.reset}` : `${c.green}✅ CLEAN${c.reset}`}`);
+  // Verdict card
+  console.log();
+  const verdictColor = blocks ? colors.blockRed : warns ? colors.warnAmber : colors.shipGreen;
+  const verdictIcon = blocks ? '🛑' : warns ? '⚠️' : '✅';
+  const verdictText = blocks ? 'BLOCK' : warns ? 'WARN' : 'CLEAN';
+  console.log(`  ${verdictColor}${c.bold}${verdictIcon} ${verdictText}${c.reset}`);
+  console.log();
 
   return blocks ? 2 : warns ? 1 : 0;
 }
@@ -228,56 +380,61 @@ function parseArgs(args) {
 }
 
 function printHelp() {
+  console.log(BANNER_FULL);
   console.log(`
-${c.cyan}${c.bold}🔍 vibecheck graph${c.reset} - Reality Proof Graph
-
-Build and visualize the complete causal chain from UI to database.
-Identify broken edges that indicate missing routes, runtime failures, or causal contradictions.
-
-${c.bold}USAGE${c.reset}
-  vibecheck graph                              ${c.dim}# Build static graph${c.reset}
-  vibecheck graph --runtime --url http://...   ${c.dim}# Add runtime edges${c.reset}
-  vibecheck graph --view                       ${c.dim}# Open visualization${c.reset}
-  vibecheck graph --broken                     ${c.dim}# List broken edges${c.reset}
-
-${c.bold}OPTIONS${c.reset}
-  --build              Build static graph (default)
-  --runtime            Collect runtime edges via Playwright
-  --url <url>          Target URL for runtime collection
-  --view               Open interactive HTML visualization
-  --broken             Show only broken edges
-  --json               Output JSON only (no HTML/Mermaid)
-  --headed             Run browser in headed mode
-  --fastify-entry      Fastify entry file (e.g. src/server.ts)
-  --path, -p           Project path (default: current directory)
-  --help, -h           Show this help
-
-${c.bold}GRAPH NODES${c.reset}
-  • UI Action          onClick, onSubmit, etc.
-  • Client Function    Functions that make network calls
-  • Network Call       fetch(), axios.*()
-  • Server Route       Next API routes, Fastify routes
-  • Handler            Route handler functions
-  • DB Call            Prisma, raw SQL
-  • External Call      Stripe, GitHub, etc.
-
-${c.bold}BROKEN EDGE TYPES${c.reset}
-  • ${c.red}MissingRoute${c.reset}        Route referenced but doesn't exist
-  • ${c.red}RuntimeFailure${c.reset}      Route returns 4xx/5xx at runtime
-  • ${c.red}CausalContradiction${c.reset} UI shows success but server returned error
-
-${c.bold}OUTPUT${c.reset}
-  .vibecheck/graph/
-    graph.json          Machine-readable graph
-    graph.html          Interactive D3 visualization
-    graph.mmd           Mermaid diagram
-    broken-edges.json   Broken edges as findings
-
-${c.bold}EXAMPLES${c.reset}
-  vibecheck graph --view                           ${c.dim}# Build + open visualization${c.reset}
-  vibecheck graph --runtime --url http://localhost:3000 --view
-  vibecheck graph --broken --json                  ${c.dim}# CI mode: just broken edges${c.reset}
-`);
+  ${c.bold}Usage:${c.reset} vibecheck graph [options]
+
+  ${c.bold}Reality Proof Graph${c.reset} — Visualize the complete causal chain from UI to database.
+
+  ${c.bold}Modes:${c.reset}
+    ${colors.accent}vibecheck graph${c.reset}                              ${c.dim}Build static graph${c.reset}
+    ${colors.accent}vibecheck graph --runtime --url http://...${c.reset}   ${c.dim}Add runtime edges${c.reset}
+    ${colors.accent}vibecheck graph --view${c.reset}                       ${c.dim}Open visualization${c.reset}
+    ${colors.accent}vibecheck graph --broken${c.reset}                     ${c.dim}List broken edges${c.reset}
+
+  ${c.bold}Options:${c.reset}
+    ${colors.accent}--build${c.reset}              Build static graph ${c.dim}(default)${c.reset}
+    ${colors.accent}--runtime${c.reset}            Collect runtime edges via Playwright
+    ${colors.accent}--url <url>${c.reset}          Target URL for runtime collection
+    ${colors.accent}--view${c.reset}               Open interactive HTML visualization
+    ${colors.accent}--broken${c.reset}             Show only broken edges
+    ${colors.accent}--json${c.reset}               Output JSON only ${c.dim}(no HTML/Mermaid)${c.reset}
+    ${colors.accent}--headed${c.reset}             Run browser in headed mode
+    ${colors.accent}--fastify-entry${c.reset}      Fastify entry file ${c.dim}(e.g. src/server.ts)${c.reset}
+    ${colors.accent}--path, -p${c.reset}           Project path ${c.dim}(default: current directory)${c.reset}
+    ${colors.accent}--help, -h${c.reset}           Show this help
+
+  ${c.bold}Graph Nodes:${c.reset}
+    ${colors.node}◉${c.reset} UI Action          ${c.dim}onClick, onSubmit, etc.${c.reset}
+    ${colors.node}◉${c.reset} Client Function    ${c.dim}Functions that make network calls${c.reset}
+    ${colors.node}◉${c.reset} Network Call       ${c.dim}fetch(), axios.*()${c.reset}
+    ${colors.node}◉${c.reset} Server Route       ${c.dim}Next API routes, Fastify routes${c.reset}
+    ${colors.node}◉${c.reset} Handler            ${c.dim}Route handler functions${c.reset}
+    ${colors.node}◉${c.reset} DB Call            ${c.dim}Prisma, raw SQL${c.reset}
+    ${colors.node}◉${c.reset} External Call      ${c.dim}Stripe, GitHub, etc.${c.reset}
+
+  ${c.bold}Broken Edge Types:${c.reset}
+    ${colors.blockRed}╳${c.reset} MissingRoute        ${c.dim}Route referenced but doesn't exist${c.reset}
+    ${colors.blockRed}╳${c.reset} RuntimeFailure      ${c.dim}Route returns 4xx/5xx at runtime${c.reset}
+    ${colors.blockRed}╳${c.reset} CausalContradiction ${c.dim}UI shows success but server returned error${c.reset}
+
+  ${c.bold}Output:${c.reset}
+    ${c.dim}.vibecheck/graph/${c.reset}
+      ${colors.accent}graph.json${c.reset}          ${c.dim}Machine-readable graph${c.reset}
+      ${colors.accent}graph.html${c.reset}          ${c.dim}Interactive D3 visualization${c.reset}
+      ${colors.accent}graph.mmd${c.reset}           ${c.dim}Mermaid diagram${c.reset}
+      ${colors.accent}broken-edges.json${c.reset}   ${c.dim}Broken edges as findings${c.reset}
+
+  ${c.bold}Examples:${c.reset}
+    ${c.dim}# Build + open visualization${c.reset}
+    vibecheck graph --view
+
+    ${c.dim}# Runtime verification with Playwright${c.reset}
+    vibecheck graph --runtime --url http://localhost:3000 --view
+
+    ${c.dim}# CI mode: just broken edges as JSON${c.reset}
+    vibecheck graph --broken --json
+  `);
 }
 
 module.exports = { runGraph };