@vibecheckai/cli 3.0.4 → 3.0.7

package/bin/runners/lib/ui.js

@@ -0,0 +1,562 @@
+/**
+ * lib/ui.js - Shared UI utilities for VibeCheck CLI
+ * 
+ * Premium terminal styling, spinners, progress bars, and formatting.
+ * Import this instead of duplicating ANSI codes across runners.
+ */
+
+"use strict";
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// ENVIRONMENT DETECTION
+// ═══════════════════════════════════════════════════════════════════════════════
+const SUPPORTS_COLOR = process.stdout.isTTY && !process.env.NO_COLOR;
+const SUPPORTS_TRUECOLOR = SUPPORTS_COLOR && (
+  process.env.COLORTERM === "truecolor" ||
+  process.env.TERM_PROGRAM === "iTerm.app" ||
+  process.env.TERM_PROGRAM === "Apple_Terminal" ||
+  process.env.WT_SESSION
+);
+const SUPPORTS_UNICODE = process.platform !== "win32" || 
+  process.env.WT_SESSION || 
+  process.env.TERM_PROGRAM;
+
+function isCI() {
+  return !!(
+    process.env.CI ||
+    process.env.CONTINUOUS_INTEGRATION ||
+    process.env.GITHUB_ACTIONS ||
+    process.env.GITLAB_CI ||
+    process.env.CIRCLECI ||
+    process.env.VERCEL ||
+    process.env.NETLIFY ||
+    !process.stdin.isTTY
+  );
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// ANSI COLORS
+// ═══════════════════════════════════════════════════════════════════════════════
+const c = SUPPORTS_COLOR ? {
+  reset: "\x1b[0m",
+  bold: "\x1b[1m",
+  dim: "\x1b[2m",
+  italic: "\x1b[3m",
+  underline: "\x1b[4m",
+  inverse: "\x1b[7m",
+  
+  black: "\x1b[30m",
+  red: "\x1b[31m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  blue: "\x1b[34m",
+  magenta: "\x1b[35m",
+  cyan: "\x1b[36m",
+  white: "\x1b[37m",
+  gray: "\x1b[90m",
+  
+  brightRed: "\x1b[91m",
+  brightGreen: "\x1b[92m",
+  brightYellow: "\x1b[93m",
+  brightBlue: "\x1b[94m",
+  brightMagenta: "\x1b[95m",
+  brightCyan: "\x1b[96m",
+  
+  bgRed: "\x1b[41m",
+  bgGreen: "\x1b[42m",
+  bgYellow: "\x1b[43m",
+  bgBlue: "\x1b[44m",
+  bgMagenta: "\x1b[45m",
+  bgCyan: "\x1b[46m",
+  bgGray: "\x1b[100m",
+  
+  // Terminal control
+  clear: "\x1b[2J\x1b[H",
+  clearLine: "\x1b[2K",
+  cursorUp: "\x1b[1A",
+  cursorDown: "\x1b[1B",
+  cursorHide: "\x1b[?25l",
+  cursorShow: "\x1b[?25h",
+  saveCursor: "\x1b7",
+  restoreCursor: "\x1b8",
+  
+  // RGB (truecolor only)
+  rgb: (r, g, b) => SUPPORTS_TRUECOLOR ? `\x1b[38;2;${r};${g};${b}m` : "",
+  bgRgb: (r, g, b) => SUPPORTS_TRUECOLOR ? `\x1b[48;2;${r};${g};${b}m` : "",
+} : Object.fromEntries([
+  "reset", "bold", "dim", "italic", "underline", "inverse",
+  "black", "red", "green", "yellow", "blue", "magenta", "cyan", "white", "gray",
+  "brightRed", "brightGreen", "brightYellow", "brightBlue", "brightMagenta", "brightCyan",
+  "bgRed", "bgGreen", "bgYellow", "bgBlue", "bgMagenta", "bgCyan", "bgGray",
+  "clear", "clearLine", "cursorUp", "cursorDown", "cursorHide", "cursorShow",
+  "saveCursor", "restoreCursor"
+].map(k => [k, ""]));
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// UNICODE SYMBOLS
+// ═══════════════════════════════════════════════════════════════════════════════
+const sym = SUPPORTS_UNICODE ? {
+  // Status
+  success: "✓",
+  error: "✗",
+  warning: "⚠",
+  info: "ℹ",
+  pending: "○",
+  active: "●",
+  skip: "↷",
+  
+  // Arrows
+  arrow: "→",
+  arrowRight: "▸",
+  arrowDown: "▾",
+  arrowUp: "▴",
+  
+  // Misc
+  bullet: "•",
+  star: "★",
+  shield: "🛡️",
+  rocket: "🚀",
+  fire: "🔥",
+  sparkles: "✨",
+  lock: "🔒",
+  key: "🔑",
+  lightning: "⚡",
+  clock: "⏱",
+  folder: "📁",
+  file: "📄",
+  gear: "⚙",
+  chart: "📊",
+  robot: "🤖",
+  eye: "👁️",
+  check: "☑",
+  box: "☐",
+  
+  // Box drawing
+  boxTopLeft: "╭",
+  boxTopRight: "╮",
+  boxBottomLeft: "╰",
+  boxBottomRight: "╯",
+  boxHorizontal: "─",
+  boxVertical: "│",
+  
+  // Double box
+  dblTopLeft: "╔",
+  dblTopRight: "╗",
+  dblBottomLeft: "╚",
+  dblBottomRight: "╝",
+  dblHorizontal: "═",
+  dblVertical: "║",
+  
+  // Progress
+  progressFull: "█",
+  progressEmpty: "░",
+  progressHalf: "▓",
+  
+  // Spinner frames
+  spinner: ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"],
+} : {
+  success: "√",
+  error: "×",
+  warning: "!",
+  info: "i",
+  pending: "o",
+  active: "*",
+  skip: "~",
+  arrow: "->",
+  arrowRight: ">",
+  arrowDown: "v",
+  arrowUp: "^",
+  bullet: "*",
+  star: "*",
+  shield: "[#]",
+  rocket: ">>",
+  fire: "(!)",
+  sparkles: "*",
+  lock: "[L]",
+  key: "[K]",
+  lightning: "!",
+  clock: "[T]",
+  folder: "[D]",
+  file: "[F]",
+  gear: "[G]",
+  chart: "[C]",
+  robot: "[R]",
+  eye: "[E]",
+  check: "[x]",
+  box: "[ ]",
+  boxTopLeft: "+",
+  boxTopRight: "+",
+  boxBottomLeft: "+",
+  boxBottomRight: "+",
+  boxHorizontal: "-",
+  boxVertical: "|",
+  dblTopLeft: "+",
+  dblTopRight: "+",
+  dblBottomLeft: "+",
+  dblBottomRight: "+",
+  dblHorizontal: "=",
+  dblVertical: "||",
+  progressFull: "#",
+  progressEmpty: ".",
+  progressHalf: ":",
+  spinner: ["-", "\\", "|", "/"],
+};
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// GRADIENT TEXT
+// ═══════════════════════════════════════════════════════════════════════════════
+function gradient(text, colors = [[0, 255, 255], [255, 0, 255]]) {
+  if (!SUPPORTS_TRUECOLOR) return `${c.cyan}${text}${c.reset}`;
+  
+  const chars = [...text];
+  const len = chars.length;
+  if (len === 0) return text;
+  
+  return chars.map((char, i) => {
+    const t = i / Math.max(len - 1, 1);
+    const segmentLen = colors.length - 1;
+    const segment = Math.min(Math.floor(t * segmentLen), segmentLen - 1);
+    const localT = (t * segmentLen) - segment;
+    
+    const c1 = colors[segment];
+    const c2 = colors[segment + 1] || c1;
+    
+    const r = Math.round(c1[0] + (c2[0] - c1[0]) * localT);
+    const g = Math.round(c1[1] + (c2[1] - c1[1]) * localT);
+    const b = Math.round(c1[2] + (c2[2] - c1[2]) * localT);
+    
+    return `${c.rgb(r, g, b)}${char}`;
+  }).join("") + c.reset;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// SPINNER
+// ═══════════════════════════════════════════════════════════════════════════════
+class Spinner {
+  constructor(text = "") {
+    this.text = text;
+    this.frame = 0;
+    this.interval = null;
+    this.stream = process.stderr;
+    this._isCI = isCI();
+  }
+  
+  start(text) {
+    if (text) this.text = text;
+    if (this._isCI) {
+      this.stream.write(`${c.dim}${sym.pending}${c.reset} ${this.text}\n`);
+      return this;
+    }
+    
+    this.stream.write(c.cursorHide);
+    this.interval = setInterval(() => {
+      const spinner = sym.spinner[this.frame % sym.spinner.length];
+      this.stream.write(`\r${c.clearLine}${c.cyan}${spinner}${c.reset} ${this.text}`);
+      this.frame++;
+    }, 80);
+    
+    return this;
+  }
+  
+  update(text) {
+    this.text = text;
+    if (this._isCI) {
+      this.stream.write(`  ${c.dim}${sym.arrowRight}${c.reset} ${text}\n`);
+    }
+    return this;
+  }
+  
+  succeed(text) {
+    this.stop();
+    this.stream.write(`\r${c.clearLine}${c.green}${sym.success}${c.reset} ${text || this.text}\n`);
+    return this;
+  }
+  
+  fail(text) {
+    this.stop();
+    this.stream.write(`\r${c.clearLine}${c.red}${sym.error}${c.reset} ${text || this.text}\n`);
+    return this;
+  }
+  
+  warn(text) {
+    this.stop();
+    this.stream.write(`\r${c.clearLine}${c.yellow}${sym.warning}${c.reset} ${text || this.text}\n`);
+    return this;
+  }
+  
+  info(text) {
+    this.stop();
+    this.stream.write(`\r${c.clearLine}${c.blue}${sym.info}${c.reset} ${text || this.text}\n`);
+    return this;
+  }
+  
+  stop() {
+    if (this.interval) {
+      clearInterval(this.interval);
+      this.interval = null;
+      this.stream.write(c.cursorShow);
+      this.stream.write(`\r${c.clearLine}`);
+    }
+    return this;
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// PROGRESS BAR
+// ═══════════════════════════════════════════════════════════════════════════════
+class ProgressBar {
+  constructor(total, options = {}) {
+    this.total = total;
+    this.current = 0;
+    this.width = options.width || 30;
+    this.complete = options.complete || sym.progressFull;
+    this.incomplete = options.incomplete || sym.progressEmpty;
+    this.stream = process.stderr;
+    this._isCI = isCI();
+  }
+  
+  tick(delta = 1) {
+    this.current = Math.min(this.current + delta, this.total);
+    this.render();
+    return this;
+  }
+  
+  update(current) {
+    this.current = Math.min(current, this.total);
+    this.render();
+    return this;
+  }
+  
+  render() {
+    const ratio = Math.min(this.current / this.total, 1);
+    const percent = Math.floor(ratio * 100);
+    const filled = Math.round(this.width * ratio);
+    const empty = this.width - filled;
+    
+    const bar = c.green + this.complete.repeat(filled) + c.dim + this.incomplete.repeat(empty) + c.reset;
+    const output = `${bar} ${percent.toString().padStart(3)}% (${this.current}/${this.total})`;
+    
+    if (this._isCI) {
+      if (this.current === this.total || this.current % 5 === 0) {
+        this.stream.write(`  ${output}\n`);
+      }
+    } else {
+      this.stream.write(`\r${c.clearLine}${output}`);
+      if (this.current >= this.total) {
+        this.stream.write("\n");
+      }
+    }
+    
+    return this;
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// BOX DRAWING
+// ═══════════════════════════════════════════════════════════════════════════════
+function stripAnsi(str) {
+  return str.replace(/\x1B\[[0-9;]*[a-zA-Z]/g, "");
+}
+
+function box(content, options = {}) {
+  const {
+    title = "",
+    padding = 1,
+    borderColor = c.cyan,
+    titleColor = c.bold + c.cyan,
+    width = null,
+    style = "single", // single, double, rounded
+  } = options;
+  
+  const chars = style === "double" 
+    ? { tl: sym.dblTopLeft, tr: sym.dblTopRight, bl: sym.dblBottomLeft, br: sym.dblBottomRight, h: sym.dblHorizontal, v: sym.dblVertical }
+    : { tl: sym.boxTopLeft, tr: sym.boxTopRight, bl: sym.boxBottomLeft, br: sym.boxBottomRight, h: sym.boxHorizontal, v: sym.boxVertical };
+  
+  const lines = content.split("\n");
+  const maxLen = Math.max(...lines.map(l => stripAnsi(l).length), stripAnsi(title).length);
+  const boxWidth = width || maxLen + padding * 2;
+  
+  const paddingStr = " ".repeat(padding);
+  const horizontal = chars.h.repeat(boxWidth);
+  
+  const titlePadded = title ? ` ${title} ` : "";
+  const titleLine = titlePadded 
+    ? horizontal.slice(0, 2) + titleColor + titlePadded + borderColor + horizontal.slice(2 + stripAnsi(titlePadded).length)
+    : horizontal;
+  
+  const top = `${borderColor}${chars.tl}${titleLine}${chars.tr}${c.reset}`;
+  const bottom = `${borderColor}${chars.bl}${horizontal}${chars.br}${c.reset}`;
+  
+  const paddedLines = lines.map(line => {
+    const strippedLen = stripAnsi(line).length;
+    const rightPad = boxWidth - strippedLen - padding;
+    return `${borderColor}${chars.v}${c.reset}${paddingStr}${line}${" ".repeat(Math.max(0, rightPad))}${borderColor}${chars.v}${c.reset}`;
+  });
+  
+  return [top, ...paddedLines, bottom].join("\n");
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// TABLE FORMATTING
+// ═══════════════════════════════════════════════════════════════════════════════
+function table(data, options = {}) {
+  const { headers = [], align = [], indent = 0 } = options;
+  
+  if (data.length === 0) return "";
+  
+  const columns = Math.max(data[0]?.length || 0, headers.length);
+  const allRows = headers.length ? [headers, ...data] : data;
+  
+  const widths = Array(columns).fill(0);
+  for (const row of allRows) {
+    for (let i = 0; i < columns; i++) {
+      widths[i] = Math.max(widths[i], stripAnsi(String(row[i] || "")).length);
+    }
+  }
+  
+  const lines = [];
+  const indentStr = " ".repeat(indent);
+  
+  for (let r = 0; r < allRows.length; r++) {
+    const row = allRows[r];
+    const cells = row.map((cell, i) => {
+      const str = String(cell || "");
+      const len = stripAnsi(str).length;
+      const pad = widths[i] - len;
+      const alignment = align[i] || "left";
+      
+      if (alignment === "right") return " ".repeat(pad) + str;
+      if (alignment === "center") return " ".repeat(Math.floor(pad / 2)) + str + " ".repeat(Math.ceil(pad / 2));
+      return str + " ".repeat(pad);
+    });
+    
+    lines.push(indentStr + cells.join(c.dim + " │ " + c.reset));
+    
+    if (r === 0 && headers.length) {
+      const separator = widths.map(w => sym.boxHorizontal.repeat(w)).join(c.dim + "─┼─" + c.reset);
+      lines.push(indentStr + c.dim + separator + c.reset);
+    }
+  }
+  
+  return lines.join("\n");
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// TIME FORMATTING
+// ═══════════════════════════════════════════════════════════════════════════════
+function formatDuration(ms) {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  const mins = Math.floor(ms / 60000);
+  const secs = Math.round((ms % 60000) / 1000);
+  return `${mins}m ${secs}s`;
+}
+
+function formatTime() {
+  const d = new Date();
+  return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}:${String(d.getSeconds()).padStart(2, "0")}`;
+}
+
+function timeAgo(dateStr) {
+  if (!dateStr) return "never";
+  const d = new Date(dateStr);
+  const now = Date.now();
+  const diff = now - d.getTime();
+  
+  if (diff < 60000) return "just now";
+  if (diff < 3600000) return `${Math.round(diff / 60000)}m ago`;
+  if (diff < 86400000) return `${Math.round(diff / 3600000)}h ago`;
+  if (diff < 604800000) return `${Math.round(diff / 86400000)}d ago`;
+  return `${Math.round(diff / 604800000)}w ago`;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// VERDICT FORMATTING
+// ═══════════════════════════════════════════════════════════════════════════════
+function verdictColor(verdict) {
+  switch (verdict) {
+    case "SHIP": return c.green;
+    case "WARN": return c.yellow;
+    case "BLOCK": return c.red;
+    default: return c.dim;
+  }
+}
+
+function verdictIcon(verdict) {
+  switch (verdict) {
+    case "SHIP": return `${c.green}${sym.success} SHIP${c.reset}`;
+    case "WARN": return `${c.yellow}${sym.warning} WARN${c.reset}`;
+    case "BLOCK": return `${c.red}${sym.error} BLOCK${c.reset}`;
+    default: return `${c.dim}—${c.reset}`;
+  }
+}
+
+function verdictBadge(verdict) {
+  const colors = {
+    SHIP: { bg: c.bgGreen, fg: c.white },
+    WARN: { bg: c.bgYellow, fg: c.black },
+    BLOCK: { bg: c.bgRed, fg: c.white },
+  };
+  const { bg, fg } = colors[verdict] || { bg: c.bgGray, fg: c.white };
+  return `${bg}${fg}${c.bold} ${verdict} ${c.reset}`;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// HEADER PRINTING
+// ═══════════════════════════════════════════════════════════════════════════════
+function printHeader(title, options = {}) {
+  const { icon = "", subtitle = "", width = 60 } = options;
+  const iconStr = icon ? `${icon}  ` : "";
+  
+  console.log(`
+${c.cyan}${sym.dblTopLeft}${sym.dblHorizontal.repeat(width)}${sym.dblTopRight}${c.reset}
+${c.cyan}${sym.dblVertical}${c.reset}  ${iconStr}${c.bold}${title}${c.reset}${" ".repeat(Math.max(0, width - stripAnsi(iconStr + title).length - 2))}${c.cyan}${sym.dblVertical}${c.reset}
+${c.cyan}${sym.dblBottomLeft}${sym.dblHorizontal.repeat(width)}${sym.dblBottomRight}${c.reset}
+${subtitle ? `\n${c.dim}${subtitle}${c.reset}\n` : ""}`);
+}
+
+function printSection(title) {
+  console.log(`\n${c.bold}${title}${c.reset}`);
+}
+
+function printDivider(width = 60) {
+  console.log(`${c.dim}${sym.boxHorizontal.repeat(width)}${c.reset}`);
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// EXPORTS
+// ═══════════════════════════════════════════════════════════════════════════════
+module.exports = {
+  // Environment
+  SUPPORTS_COLOR,
+  SUPPORTS_TRUECOLOR,
+  SUPPORTS_UNICODE,
+  isCI,
+  
+  // Colors & Symbols
+  c,
+  sym,
+  gradient,
+  stripAnsi,
+  
+  // Components
+  Spinner,
+  ProgressBar,
+  box,
+  table,
+  
+  // Formatting
+  formatDuration,
+  formatTime,
+  timeAgo,
+  
+  // Verdict
+  verdictColor,
+  verdictIcon,
+  verdictBadge,
+  
+  // Printing
+  printHeader,
+  printSection,
+  printDivider,
+};