@vibecheckai/cli 3.2.6 → 3.3.0

package/bin/runners/lib/unified-cli-output.js

@@ -0,0 +1,604 @@
+/**
+ * Unified CLI Output - Enterprise-Grade Terminal Experience
+ * 
+ * ═══════════════════════════════════════════════════════════════════════════════
+ * VIBECHECK DESIGN SYSTEM
+ * ═══════════════════════════════════════════════════════════════════════════════
+ * 
+ * This module provides consistent, professional output formatting for all CLI
+ * commands. Use these functions to ensure a unified enterprise-grade experience.
+ */
+
+"use strict";
+
+const { getApiKey } = require("./auth");
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// CONSTANTS
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const WIDTH = 72;
+const SUPPORTS_COLOR = process.stdout.isTTY && !process.env.NO_COLOR;
+const SUPPORTS_UNICODE = !process.env.NO_UNICODE && process.platform !== "win32" || process.env.WT_SESSION;
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// ANSI CODES
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const ESC = "\x1b";
+const ansi = SUPPORTS_COLOR ? {
+  reset: `${ESC}[0m`,
+  bold: `${ESC}[1m`,
+  dim: `${ESC}[2m`,
+  italic: `${ESC}[3m`,
+  underline: `${ESC}[4m`,
+  red: `${ESC}[31m`,
+  green: `${ESC}[32m`,
+  yellow: `${ESC}[33m`,
+  blue: `${ESC}[34m`,
+  magenta: `${ESC}[35m`,
+  cyan: `${ESC}[36m`,
+  white: `${ESC}[37m`,
+  gray: `${ESC}[90m`,
+  bgGreen: `${ESC}[42m`,
+  bgRed: `${ESC}[41m`,
+  bgYellow: `${ESC}[43m`,
+  bgCyan: `${ESC}[46m`,
+  bgMagenta: `${ESC}[45m`,
+} : Object.fromEntries([
+  "reset", "bold", "dim", "italic", "underline",
+  "red", "green", "yellow", "blue", "magenta", "cyan", "white", "gray",
+  "bgGreen", "bgRed", "bgYellow", "bgCyan", "bgMagenta"
+].map(k => [k, ""]));
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// SYMBOLS
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const sym = SUPPORTS_UNICODE ? {
+  check: "✓",
+  cross: "✗",
+  warning: "⚠",
+  info: "ℹ",
+  arrow: "→",
+  bullet: "•",
+  star: "★",
+  rocket: "🚀",
+  shield: "🛡️",
+  lock: "🔒",
+  key: "🔑",
+  gear: "⚙",
+  search: "🔍",
+  chart: "📊",
+  file: "📄",
+  folder: "📁",
+  clock: "⏱",
+  lightning: "⚡",
+  sparkle: "✨",
+  fire: "🔥",
+  target: "🎯",
+  trophy: "🏆",
+  box: {
+    tl: "╔", tr: "╗", bl: "╚", br: "╝", h: "═", v: "║",
+    ltl: "┌", ltr: "┐", lbl: "└", lbr: "┘", lh: "─", lv: "│",
+    lt: "┬", lb: "┴", lx: "┼", ltrT: "├", ltlT: "┤",
+  },
+} : {
+  check: "+",
+  cross: "x",
+  warning: "!",
+  info: "i",
+  arrow: "->",
+  bullet: "*",
+  star: "*",
+  rocket: ">",
+  shield: "[S]",
+  lock: "[L]",
+  key: "[K]",
+  gear: "[G]",
+  search: "[?]",
+  chart: "[C]",
+  file: "[F]",
+  folder: "[D]",
+  clock: "[T]",
+  lightning: "[!]",
+  sparkle: "*",
+  fire: "(!)",
+  target: "(>)",
+  trophy: "[W]",
+  box: {
+    tl: "+", tr: "+", bl: "+", br: "+", h: "-", v: "|",
+    ltl: "+", ltr: "+", lbl: "+", lbr: "+", lh: "-", lv: "|",
+    lt: "+", lb: "+", lx: "+", ltrT: "+", ltlT: "+",
+  },
+};
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// TIER BADGES
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const TIER = {
+  free: { label: "FREE", color: ansi.green, bg: ansi.bgGreen },
+  starter: { label: "STARTER", color: ansi.cyan, bg: ansi.bgCyan },
+  pro: { label: "PRO", color: ansi.magenta, bg: ansi.bgMagenta },
+  complete: { label: "COMPLETE", color: ansi.yellow, bg: ansi.bgYellow },
+};
+
+function getTierBadge(tier) {
+  const t = TIER[tier] || TIER.free;
+  return `${t.color}[${t.label}]${ansi.reset}`;
+}
+
+function getTierFromKey() {
+  const { key } = getApiKey();
+  if (!key) return "free";
+  // Simplified tier detection - in real app would check entitlements
+  return "starter";
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// UTILITY FUNCTIONS
+// ═══════════════════════════════════════════════════════════════════════════════
+
+function stripAnsi(str) {
+  return str.replace(/\x1b\[\d+m/g, "").replace(/\x1b\[38;2;\d+;\d+;\d+m/g, "");
+}
+
+function padCenter(str, width = WIDTH) {
+  const len = stripAnsi(str).length;
+  const padding = Math.max(0, width - len);
+  const left = Math.floor(padding / 2);
+  return " ".repeat(left) + str + " ".repeat(padding - left);
+}
+
+function padRight(str, width) {
+  const len = stripAnsi(str).length;
+  return str + " ".repeat(Math.max(0, width - len));
+}
+
+function truncate(str, maxLen) {
+  const clean = stripAnsi(str);
+  if (clean.length <= maxLen) return str;
+  return clean.slice(0, maxLen - 3) + "...";
+}
+
+function formatDuration(ms) {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${Math.floor(ms / 60000)}m ${Math.floor((ms % 60000) / 1000)}s`;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// HEADER / BANNER
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Render a compact enterprise header for any command
+ * @param {object} opts - Header options
+ * @param {string} opts.command - Command name (e.g., "scan", "ship")
+ * @param {string} opts.title - Title text
+ * @param {string} opts.tier - Tier requirement (free, starter, pro)
+ * @param {string} [opts.subtitle] - Optional subtitle
+ */
+function renderHeader(opts) {
+  const { command, title, tier = "free", subtitle } = opts;
+  const tierBadge = getTierBadge(tier);
+  const b = sym.box;
+  
+  const lines = [];
+  
+  // Top border
+  lines.push(`${ansi.gray}${b.tl}${b.h.repeat(WIDTH - 2)}${b.tr}${ansi.reset}`);
+  
+  // Title line
+  const titleStr = `${ansi.bold}${title}${ansi.reset} ${tierBadge}`;
+  lines.push(`${ansi.gray}${b.v}${ansi.reset}${padCenter(titleStr, WIDTH - 2)}${ansi.gray}${b.v}${ansi.reset}`);
+  
+  // Subtitle if provided
+  if (subtitle) {
+    const subStr = `${ansi.dim}${subtitle}${ansi.reset}`;
+    lines.push(`${ansi.gray}${b.v}${ansi.reset}${padCenter(subStr, WIDTH - 2)}${ansi.gray}${b.v}${ansi.reset}`);
+  }
+  
+  // Bottom border
+  lines.push(`${ansi.gray}${b.bl}${b.h.repeat(WIDTH - 2)}${b.br}${ansi.reset}`);
+  
+  console.log(lines.join("\n"));
+}
+
+/**
+ * Render a minimal header (single line)
+ */
+function renderMinimalHeader(command, tier = "free") {
+  const tierBadge = getTierBadge(tier);
+  console.log(`\n  ${ansi.bold}vibecheck ${command}${ansi.reset} ${tierBadge}\n`);
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// SECTION DIVIDERS
+// ═══════════════════════════════════════════════════════════════════════════════
+
+function renderDivider(style = "single") {
+  const char = style === "double" ? sym.box.h : sym.box.lh;
+  console.log(`  ${ansi.gray}${char.repeat(WIDTH - 4)}${ansi.reset}`);
+}
+
+function renderSectionHeader(title, icon = sym.bullet) {
+  console.log(`\n  ${ansi.cyan}${icon}${ansi.reset} ${ansi.bold}${title}${ansi.reset}`);
+  console.log(`  ${ansi.gray}${sym.box.lh.repeat(WIDTH - 4)}${ansi.reset}`);
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// STATUS INDICATORS
+// ═══════════════════════════════════════════════════════════════════════════════
+
+function renderSuccess(message) {
+  console.log(`  ${ansi.green}${sym.check}${ansi.reset} ${message}`);
+}
+
+function renderError(message) {
+  console.log(`  ${ansi.red}${sym.cross}${ansi.reset} ${message}`);
+}
+
+function renderWarning(message) {
+  console.log(`  ${ansi.yellow}${sym.warning}${ansi.reset} ${message}`);
+}
+
+function renderInfo(message) {
+  console.log(`  ${ansi.cyan}${sym.info}${ansi.reset} ${message}`);
+}
+
+function renderBullet(message, indent = 2) {
+  console.log(`${" ".repeat(indent)}${ansi.gray}${sym.bullet}${ansi.reset} ${message}`);
+}
+
+function renderStep(number, message, status = "pending") {
+  const statusIcon = status === "done" ? `${ansi.green}${sym.check}${ansi.reset}` :
+                     status === "error" ? `${ansi.red}${sym.cross}${ansi.reset}` :
+                     status === "running" ? `${ansi.cyan}${sym.gear}${ansi.reset}` :
+                     `${ansi.gray}${number}${ansi.reset}`;
+  console.log(`  ${statusIcon} ${message}`);
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// VERDICT / RESULT BOX
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Render a verdict box (SHIP/WARN/BLOCK)
+ * @param {string} verdict - SHIP, WARN, or BLOCK
+ * @param {object} [stats] - Optional statistics
+ */
+function renderVerdict(verdict, stats = {}) {
+  const b = sym.box;
+  const v = String(verdict).toUpperCase();
+  
+  let bg, icon, label;
+  switch (v) {
+    case "SHIP":
+    case "PASS":
+    case "SUCCESS":
+      bg = ansi.bgGreen;
+      icon = sym.rocket;
+      label = "SHIP";
+      break;
+    case "WARN":
+    case "WARNING":
+      bg = ansi.bgYellow;
+      icon = sym.warning;
+      label = "WARN";
+      break;
+    case "BLOCK":
+    case "FAIL":
+    case "ERROR":
+      bg = ansi.bgRed;
+      icon = sym.cross;
+      label = "BLOCK";
+      break;
+    default:
+      bg = ansi.bgCyan;
+      icon = sym.info;
+      label = v;
+  }
+  
+  console.log();
+  console.log(`  ${ansi.gray}${b.tl}${b.h.repeat(WIDTH - 6)}${b.tr}${ansi.reset}`);
+  
+  // Verdict line
+  const verdictStr = `${bg}${ansi.bold}${ansi.white} ${icon} ${label} ${ansi.reset}`;
+  console.log(`  ${ansi.gray}${b.v}${ansi.reset}${padCenter(verdictStr, WIDTH - 4)}${ansi.gray}${b.v}${ansi.reset}`);
+  
+  // Stats line if provided
+  if (stats.findings !== undefined || stats.duration !== undefined) {
+    const parts = [];
+    if (stats.critical !== undefined) parts.push(`${ansi.red}${stats.critical} critical${ansi.reset}`);
+    if (stats.warnings !== undefined) parts.push(`${ansi.yellow}${stats.warnings} warnings${ansi.reset}`);
+    if (stats.findings !== undefined && stats.critical === undefined) parts.push(`${stats.findings} findings`);
+    if (stats.duration !== undefined) parts.push(`${ansi.dim}${formatDuration(stats.duration)}${ansi.reset}`);
+    
+    const statsStr = parts.join(` ${ansi.gray}${sym.bullet}${ansi.reset} `);
+    console.log(`  ${ansi.gray}${b.v}${ansi.reset}${padCenter(statsStr, WIDTH - 4)}${ansi.gray}${b.v}${ansi.reset}`);
+  }
+  
+  console.log(`  ${ansi.gray}${b.bl}${b.h.repeat(WIDTH - 6)}${b.br}${ansi.reset}`);
+  console.log();
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// FINDINGS TABLE
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Render a findings table
+ * @param {Array} findings - Array of finding objects
+ * @param {object} opts - Options
+ * @param {number} [opts.limit=5] - Max findings to show
+ */
+function renderFindingsTable(findings, opts = {}) {
+  const { limit = 5 } = opts;
+  const b = sym.box;
+  
+  if (!findings || findings.length === 0) {
+    console.log(`  ${ansi.green}${sym.check}${ansi.reset} ${ansi.dim}No issues found${ansi.reset}`);
+    return;
+  }
+  
+  const COL1 = 10; // Severity
+  const COL2 = 18; // Category
+  const COL3 = WIDTH - COL1 - COL2 - 12; // Message
+  
+  // Header
+  console.log(`  ${ansi.gray}${b.ltl}${b.lh.repeat(COL1)}${b.lt}${b.lh.repeat(COL2)}${b.lt}${b.lh.repeat(COL3)}${b.ltr}${ansi.reset}`);
+  console.log(`  ${ansi.gray}${b.lv}${ansi.reset}${ansi.bold}${padRight(" SEVERITY", COL1)}${ansi.reset}${ansi.gray}${b.lv}${ansi.reset}${ansi.bold}${padRight(" CATEGORY", COL2)}${ansi.reset}${ansi.gray}${b.lv}${ansi.reset}${ansi.bold}${padRight(" MESSAGE", COL3)}${ansi.reset}${ansi.gray}${b.lv}${ansi.reset}`);
+  console.log(`  ${ansi.gray}${b.ltrT}${b.lh.repeat(COL1)}${b.lx}${b.lh.repeat(COL2)}${b.lx}${b.lh.repeat(COL3)}${b.ltlT}${ansi.reset}`);
+  
+  // Rows
+  const shown = findings.slice(0, limit);
+  for (const f of shown) {
+    const sev = f.severity?.toUpperCase() || "INFO";
+    let sevStr;
+    switch (sev) {
+      case "BLOCK":
+      case "CRITICAL":
+        sevStr = `${ansi.red} ${sym.cross} BLOCK${ansi.reset}`;
+        break;
+      case "WARN":
+      case "WARNING":
+      case "HIGH":
+        sevStr = `${ansi.yellow} ${sym.warning} WARN${ansi.reset}`;
+        break;
+      default:
+        sevStr = `${ansi.gray} ${sym.info} INFO${ansi.reset}`;
+    }
+    
+    const cat = truncate(f.category || f.type || "General", COL2 - 1);
+    const msg = truncate(f.message || f.title || f.id || "", COL3 - 1);
+    
+    console.log(`  ${ansi.gray}${b.lv}${ansi.reset}${padRight(sevStr, COL1 + 9)}${ansi.gray}${b.lv}${ansi.reset}${padRight(" " + cat, COL2)}${ansi.gray}${b.lv}${ansi.reset}${padRight(" " + msg, COL3)}${ansi.gray}${b.lv}${ansi.reset}`);
+  }
+  
+  // Footer
+  console.log(`  ${ansi.gray}${b.lbl}${b.lh.repeat(COL1)}${b.lb}${b.lh.repeat(COL2)}${b.lb}${b.lh.repeat(COL3)}${b.lbr}${ansi.reset}`);
+  
+  // More indicator
+  if (findings.length > limit) {
+    console.log(`  ${ansi.dim}... and ${findings.length - limit} more findings${ansi.reset}`);
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// KEY-VALUE LIST
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Render a key-value list
+ * @param {Array<{label: string, value: string}>} items
+ */
+function renderKeyValue(items) {
+  const maxLabel = Math.max(...items.map(i => stripAnsi(i.label).length));
+  
+  for (const item of items) {
+    const label = padRight(item.label, maxLabel);
+    console.log(`  ${ansi.dim}${label}${ansi.reset}  ${item.value}`);
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// PROGRESS BAR
+// ═══════════════════════════════════════════════════════════════════════════════
+
+function renderProgressBar(percent, width = 20) {
+  const filled = Math.round((percent / 100) * width);
+  const empty = width - filled;
+  
+  let color = ansi.green;
+  if (percent < 50) color = ansi.red;
+  else if (percent < 80) color = ansi.yellow;
+  
+  return `${color}${"█".repeat(filled)}${ansi.gray}${"░".repeat(empty)}${ansi.reset}`;
+}
+
+function renderScore(score, label = "Score") {
+  const bar = renderProgressBar(score);
+  console.log(`  ${ansi.dim}${label}:${ansi.reset} [${bar}] ${score}/100`);
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// FOOTER / NEXT STEPS
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Render footer with next steps and optional upsell
+ * @param {object} opts
+ * @param {Array<{cmd: string, desc: string}>} [opts.nextSteps]
+ * @param {string} [opts.docsUrl]
+ * @param {boolean} [opts.showUpsell]
+ */
+function renderFooter(opts = {}) {
+  const { nextSteps = [], docsUrl, showUpsell = true } = opts;
+  const currentTier = getTierFromKey();
+  
+  console.log();
+  renderDivider();
+  
+  // Next steps
+  if (nextSteps.length > 0) {
+    console.log(`\n  ${ansi.bold}${sym.arrow} Next steps${ansi.reset}`);
+    for (const step of nextSteps) {
+      console.log(`    ${ansi.cyan}${step.cmd}${ansi.reset} ${ansi.dim}${step.desc}${ansi.reset}`);
+    }
+  }
+  
+  // Upsell for free tier
+  if (showUpsell && currentTier === "free") {
+    console.log();
+    console.log(`  ${ansi.dim}${sym.star}${ansi.reset} ${ansi.cyan}STARTER${ansi.reset}${ansi.dim}: dashboard sync + auto-fix + team features${ansi.reset}`);
+    console.log(`  ${ansi.dim}  Upgrade ${sym.arrow} https://vibecheckai.dev${ansi.reset}`);
+  }
+  
+  // Docs link
+  if (docsUrl) {
+    console.log();
+    console.log(`  ${ansi.dim}Docs: ${docsUrl}${ansi.reset}`);
+  }
+  
+  console.log();
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// SPINNER
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+class Spinner {
+  constructor(text = "") {
+    this.text = text;
+    this.timer = null;
+    this.frame = 0;
+  }
+  
+  start(text) {
+    if (text) this.text = text;
+    if (!process.stdout.isTTY) {
+      console.log(`  ${ansi.cyan}${sym.gear}${ansi.reset} ${this.text}...`);
+      return this;
+    }
+    
+    process.stdout.write("\x1b[?25l"); // Hide cursor
+    this.timer = setInterval(() => {
+      const f = SPINNER_FRAMES[this.frame % SPINNER_FRAMES.length];
+      process.stdout.write(`\r  ${ansi.cyan}${f}${ansi.reset} ${this.text}`);
+      this.frame++;
+    }, 80);
+    return this;
+  }
+  
+  stop(finalIcon, finalColor, finalText) {
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+    
+    if (process.stdout.isTTY) {
+      process.stdout.write("\r\x1b[2K"); // Clear line
+      process.stdout.write("\x1b[?25h"); // Show cursor
+    }
+    
+    if (finalText !== null) {
+      const icon = finalIcon || sym.check;
+      const color = finalColor || ansi.green;
+      console.log(`  ${color}${icon}${ansi.reset} ${finalText || this.text}`);
+    }
+    return this;
+  }
+  
+  succeed(text) { return this.stop(sym.check, ansi.green, text); }
+  fail(text) { return this.stop(sym.cross, ansi.red, text); }
+  warn(text) { return this.stop(sym.warning, ansi.yellow, text); }
+  info(text) { return this.stop(sym.info, ansi.cyan, text); }
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// COMMAND TEMPLATES
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Standard command wrapper for consistent output
+ * @param {object} opts
+ * @param {string} opts.command - Command name
+ * @param {string} opts.title - Title for header
+ * @param {string} [opts.tier] - Required tier
+ * @param {boolean} [opts.quiet] - Suppress non-essential output
+ * @param {boolean} [opts.json] - JSON output mode
+ * @param {Function} opts.run - The command's main logic
+ */
+async function runCommand(opts) {
+  const { command, title, tier = "free", quiet = false, json = false, run } = opts;
+  
+  if (json) {
+    // JSON mode - run silently, output only JSON
+    return await run();
+  }
+  
+  if (!quiet) {
+    renderMinimalHeader(command, tier);
+  }
+  
+  const result = await run();
+  
+  return result;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// EXPORTS
+// ═══════════════════════════════════════════════════════════════════════════════
+
+module.exports = {
+  // Constants
+  WIDTH,
+  ansi,
+  sym,
+  TIER,
+  
+  // Utilities
+  stripAnsi,
+  padCenter,
+  padRight,
+  truncate,
+  formatDuration,
+  getTierBadge,
+  getTierFromKey,
+  
+  // Headers
+  renderHeader,
+  renderMinimalHeader,
+  
+  // Dividers
+  renderDivider,
+  renderSectionHeader,
+  
+  // Status
+  renderSuccess,
+  renderError,
+  renderWarning,
+  renderInfo,
+  renderBullet,
+  renderStep,
+  
+  // Results
+  renderVerdict,
+  renderFindingsTable,
+  renderKeyValue,
+  renderProgressBar,
+  renderScore,
+  
+  // Footer
+  renderFooter,
+  
+  // Components
+  Spinner,
+  
+  // Templates
+  runCommand,
+};