vibecheck-ai 2.0.2 → 5.0.0

package/bin/runners/lib/terminal-ui.js

@@ -0,0 +1,356 @@
+/**
+ * Terminal UI - The Vibecheck Design System
+ * * Centralizes all visual primitives to ensure "World Class" consistency.
+ * * features:
+ * - Global Grid: 76 chars width
+ * - Border Style: Double Outer / Single Inner
+ * - Components: Spinners, Progress Bars, Tables, Headers
+ */
+
+"use strict";
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// 1. CORE CONSTANTS & ANSI
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const WIDTH = 76;
+
+const ESC = '\x1b';
+const SUPPORTS_TRUECOLOR = process.env.COLORTERM === 'truecolor' || 
+  process.env.TERM_PROGRAM === 'iTerm.app' ||
+  process.env.TERM_PROGRAM === 'Apple_Terminal' ||
+  process.env.WT_SESSION;
+
+const ansi = {
+  reset: `${ESC}[0m`,
+  bold: `${ESC}[1m`,
+  dim: `${ESC}[2m`,
+  italic: `${ESC}[3m`,
+  underline: `${ESC}[4m`,
+  // Colors
+  red: `${ESC}[31m`,
+  green: `${ESC}[32m`,
+  yellow: `${ESC}[33m`,
+  blue: `${ESC}[34m`,
+  magenta: `${ESC}[35m`,
+  cyan: `${ESC}[36m`,
+  white: `${ESC}[37m`,
+  gray: `${ESC}[90m`,
+  // RGB colors (truecolor support)
+  rgb: (r, g, b) => SUPPORTS_TRUECOLOR ? `${ESC}[38;2;${r};${g};${b}m` : '',
+  bgRgb: (r, g, b) => SUPPORTS_TRUECOLOR ? `${ESC}[48;2;${r};${g};${b}m` : '',
+  // Backgrounds
+  bgRed: `${ESC}[41m`,
+  bgGreen: `${ESC}[42m`,
+  bgYellow: `${ESC}[43m`,
+  bgBlue: `${ESC}[44m`,
+  bgMagenta: `${ESC}[45m`,
+  bgCyan: `${ESC}[46m`,
+  // Cursor
+  hideCursor: `${ESC}[?25l`,
+  showCursor: `${ESC}[?25h`,
+  clearLine: `${ESC}[2K`,
+  cursorUp: (n = 1) => `${ESC}[${n}A`,
+};
+
+// Semantic Palette
+const style = {
+  success: (t) => `${ansi.green}${t}${ansi.reset}`,
+  error: (t) => `${ansi.red}${t}${ansi.reset}`,
+  warning: (t) => `${ansi.yellow}${t}${ansi.reset}`,
+  info: (t) => `${ansi.cyan}${t}${ansi.reset}`,
+  subtle: (t) => `${ansi.gray}${t}${ansi.reset}`,
+  highlight: (t) => `${ansi.bold}${ansi.white}${t}${ansi.reset}`,
+  label: (t) => `${ansi.blue}${t}${ansi.reset}`,
+  // Backgrounds for badges
+  bgSuccess: (t) => `${ansi.bgGreen}${ansi.bold}${ansi.white} ${t} ${ansi.reset}`,
+  bgError: (t) => `${ansi.bgRed}${ansi.bold}${ansi.white} ${t} ${ansi.reset}`,
+  bgWarn: (t) => `${ansi.bgYellow}${ansi.bold}${ansi.white} ${t} ${ansi.reset}`,
+};
+
+const icons = {
+  success: '✓',
+  error: '✗',
+  warning: '⚠',
+  info: 'ℹ',
+  bullet: '•',
+  pointer: '❯',
+  arrowRight: '→',
+  line: '─',
+  radioOn: '◉',
+  radioOff: '○',
+  lock: '🔒',
+};
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// 2. LAYOUT PRIMITIVES (The "Grid")
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const BOX = {
+  // Outer Frame (Double)
+  tl: '╔', tr: '╗', bl: '╚', br: '╝', h: '═', v: '║',
+  trT: '╠', tlT: '╣',
+  // Inner Dividers (Single)
+  ltl: '┌', ltr: '┐', lbl: '└', lbr: '┘', lh: '─', lv: '│',
+  lt: '┬', lb: '┴', lx: '┼', ltrT: '├', ltlT: '┤'
+};
+
+/**
+ * Centers text within the standard width, accounting for ANSI codes
+ */
+function padCenter(str, width = WIDTH - 2) {
+  const visibleLen = str.replace(/\u001b\[\d+m/g, '').length;
+  const padding = Math.max(0, width - visibleLen);
+  const left = Math.floor(padding / 2);
+  return ' '.repeat(left) + str + ' '.repeat(padding - left);
+}
+
+/**
+ * Pads text to the right, accounting for ANSI codes
+ */
+function padRight(str, len) {
+  const visibleLen = str.replace(/\u001b\[\d+m/g, '').length;
+  const truncated = visibleLen > len ? str.substring(0, len - 3) + '...' : str;
+  const finalLen = truncated.replace(/\u001b\[\d+m/g, '').length;
+  return truncated + ' '.repeat(Math.max(0, len - finalLen));
+}
+
+/**
+ * Truncates text with ellipsis
+ */
+function truncate(str, len) {
+  if (!str) return '';
+  const clean = str.replace(/\u001b\[\d+m/g, '');
+  if (clean.length <= len) return str;
+  return clean.substring(0, len - 3) + '...';
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// 3. COMPONENT: SPINNER
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+class Spinner {
+  constructor(text = '', colorStr = ansi.cyan) {
+    this.text = text;
+    this.colorStr = colorStr;
+    this.timer = null;
+    this.frameIndex = 0;
+  }
+
+  start(text) {
+    if (text) this.text = text;
+    process.stdout.write(ansi.hideCursor);
+    this.timer = setInterval(() => {
+      const frame = SPINNER_FRAMES[this.frameIndex];
+      this.frameIndex = (this.frameIndex + 1) % SPINNER_FRAMES.length;
+      process.stdout.write(`\r ${this.colorStr}${frame}${ansi.reset} ${this.text}`);
+    }, 80);
+    return this;
+  }
+
+  update(text) {
+    this.text = text;
+    return this;
+  }
+
+  stop(symbol = icons.success, color = ansi.green, finalMsg) {
+    if (this.timer) clearInterval(this.timer);
+    process.stdout.write(`\r${ansi.clearLine}`);
+    if (finalMsg !== null) { // Pass null to clear completely
+      const msg = finalMsg || this.text;
+      console.log(` ${color}${symbol}${ansi.reset} ${msg}`);
+    }
+    process.stdout.write(ansi.showCursor);
+    return this;
+  }
+
+  succeed(text) { return this.stop(icons.success, ansi.green, text); }
+  fail(text) { return this.stop(icons.error, ansi.red, text); }
+  warn(text) { return this.stop(icons.warning, ansi.yellow, text); }
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// 4. COMPONENT: PROGRESS BAR
+// ═══════════════════════════════════════════════════════════════════════════════
+
+function renderProgressBar(percentage, width = 20, color = ansi.green) {
+  const filled = Math.round((percentage / 100) * width);
+  return `${color}${'█'.repeat(filled)}${ansi.gray}${'░'.repeat(width - filled)}${ansi.reset}`;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// 5. STANDARD RENDERERS (The "Look")
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Renders the Standard Double-Border Header with Logo
+ */
+function renderScreenHeader(logoAscii, title, logoColor = (t) => t, context) {
+  const lines = [];
+  
+  // Top Frame
+  lines.push(ansi.gray + BOX.tl + BOX.h.repeat(WIDTH - 2) + BOX.tr + ansi.reset);
+  lines.push(ansi.gray + BOX.v + ansi.reset + ' '.repeat(WIDTH - 2) + ansi.gray + BOX.v + ansi.reset);
+
+  // Logo Processing
+  logoAscii.trim().split('\n').forEach(line => {
+    const cleanLine = line.replace(/\r/g, ''); 
+    const maxLen = Math.max(...logoAscii.split('\n').map(l => l.length));
+    const padding = ' '.repeat(Math.floor((WIDTH - 2 - maxLen) / 2));
+    const rightPad = ' '.repeat(WIDTH - 2 - padding.length - cleanLine.length);
+    
+    lines.push(ansi.gray + BOX.v + ansi.reset + padding + logoColor(cleanLine) + rightPad + ansi.gray + BOX.v + ansi.reset);
+  });
+
+  // Title
+  lines.push(ansi.gray + BOX.v + ansi.reset + ' '.repeat(WIDTH - 2) + ansi.gray + BOX.v + ansi.reset);
+  lines.push(ansi.gray + BOX.v + ansi.reset + padCenter(ansi.bold + ansi.white + title + ansi.reset, WIDTH - 2) + ansi.gray + BOX.v + ansi.reset);
+  lines.push(ansi.gray + BOX.v + ansi.reset + ' '.repeat(WIDTH - 2) + ansi.gray + BOX.v + ansi.reset);
+  
+  // Context Bar (Optional)
+  if (context) {
+    lines.push(ansi.gray + BOX.trT + BOX.h.repeat(WIDTH - 2) + BOX.tlT + ansi.reset);
+    const ctxStr = `${ansi.gray}${context.label}: ${ansi.reset}${ansi.cyan}${context.value}${ansi.reset}`;
+    lines.push(ansi.gray + BOX.v + ansi.reset + padCenter(ctxStr, WIDTH - 2) + ansi.gray + BOX.v + ansi.reset);
+    lines.push(ansi.gray + BOX.trT + BOX.h.repeat(WIDTH - 2) + BOX.tlT + ansi.reset);
+  } else {
+    lines.push(ansi.gray + BOX.trT + BOX.h.repeat(WIDTH - 2) + BOX.tlT + ansi.reset);
+  }
+
+  console.log(lines.join('\n'));
+}
+
+/**
+ * Renders the Standard Footer
+ */
+function renderScreenFooter() {
+  console.log(ansi.gray + BOX.bl + BOX.h.repeat(WIDTH - 2) + BOX.br + ansi.reset);
+}
+
+/**
+ * Renders a Standard Verdict/Telemetry Table
+ */
+function renderVerdictTable(stats, score, findings) {
+  const lines = [];
+
+  // Telemetry Row
+  const heapMB = Math.round(stats.heap / 1024 / 1024);
+  const statsStr = `📡 TELEMETRY  │ ⏱  ${stats.duration}ms  │ 📂 ${stats.files || '?'} Files  │ 📦 ${heapMB}MB`;
+  lines.push(ansi.gray + BOX.v + ansi.reset + padCenter(statsStr, WIDTH - 2) + ansi.gray + BOX.v + ansi.reset);
+  lines.push(ansi.gray + BOX.trT + BOX.h.repeat(WIDTH - 2) + BOX.tlT + ansi.reset);
+
+  // Score Row
+  lines.push(ansi.gray + BOX.v + ansi.reset + ' '.repeat(WIDTH - 2) + ansi.gray + BOX.v + ansi.reset);
+  const bar = renderProgressBar(score, 20);
+  lines.push(ansi.gray + BOX.v + ansi.reset + padCenter(`HEALTH SCORE    [${bar}] ${score} / 100`, WIDTH + 18) + ansi.gray + BOX.v + ansi.reset);
+  lines.push(ansi.gray + BOX.v + ansi.reset + ' '.repeat(WIDTH - 2) + ansi.gray + BOX.v + ansi.reset);
+
+  if (findings.length > 0) {
+    // Table Header
+    const C1=10, C2=13, C3=41;
+    const tTop = `  ${BOX.ltl}${BOX.lh.repeat(C1)}${BOX.lt}${BOX.lh.repeat(C2)}${BOX.lt}${BOX.lh.repeat(C3)}${BOX.ltr}  `;
+    const header = `  ${BOX.lv}${padRight(' SEVERITY', C1)}${BOX.lv}${padRight(' TYPE', C2)}${BOX.lv}${padRight(' FINDING', C3)}${BOX.lv}  `;
+    const tBot = `  ${BOX.lbl}${BOX.lh.repeat(C1)}${BOX.lb}${BOX.lh.repeat(C2)}${BOX.lb}${BOX.lh.repeat(C3)}${BOX.lbr}  `;
+
+    lines.push(ansi.gray + BOX.v + ansi.reset + ansi.gray + tTop + ansi.reset + ansi.gray + BOX.v + ansi.reset);
+    lines.push(ansi.gray + BOX.v + ansi.reset + ansi.bold + header + ansi.reset + ansi.gray + BOX.v + ansi.reset);
+    
+    // Rows
+    findings.slice(0, 5).forEach(f => {
+      let sev = style.subtle(' INFO    ');
+      if (f.severity === 'critical' || f.severity === 'BLOCK') sev = style.error('🛑 CRIT  ');
+      else if (f.severity === 'high' || f.severity === 'WARN') sev = style.warning('🟡 WARN  ');
+      
+      const row = `  ${ansi.gray}${BOX.lv}${ansi.reset}${sev}${ansi.gray}${BOX.lv}${ansi.reset}${padRight(' '+(f.category||'General'), C2)}${ansi.gray}${BOX.lv}${ansi.reset}${padRight(' '+(f.message||f.title), C3)}${ansi.gray}${BOX.lv}${ansi.reset}  `;
+      lines.push(ansi.gray + BOX.v + ansi.reset + row + ansi.gray + BOX.v + ansi.reset);
+    });
+    
+    lines.push(ansi.gray + BOX.v + ansi.reset + ansi.gray + tBot + ansi.reset + ansi.gray + BOX.v + ansi.reset);
+  } else {
+    lines.push(ansi.gray + BOX.v + ansi.reset + padCenter(style.success('✅  NO ISSUES FOUND'), WIDTH - 2) + ansi.gray + BOX.v + ansi.reset);
+  }
+
+  lines.push(ansi.gray + BOX.v + ansi.reset + ' '.repeat(WIDTH - 2) + ansi.gray + BOX.v + ansi.reset);
+  console.log(lines.join('\n'));
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// COLORS OBJECT (for compatibility)
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const colors = {
+  success: ansi.green,
+  error: ansi.red,
+  warning: ansi.yellow,
+  info: ansi.cyan,
+  accent: ansi.cyan,
+  muted: ansi.gray,
+  highlight: ansi.white,
+};
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// UTILITY FUNCTIONS
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Format duration in milliseconds to human-readable string
+ */
+function formatDuration(ms) {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  const minutes = Math.floor(ms / 60000);
+  const seconds = Math.floor((ms % 60000) / 1000);
+  return `${minutes}m ${seconds}s`;
+}
+
+/**
+ * Render a section header
+ */
+function renderSection(title, icon = '•') {
+  return `\n  ${ansi.cyan}${icon}${ansi.reset} ${ansi.bold}${title}${ansi.reset}\n  ${ansi.gray}${BOX.lh.repeat(WIDTH - 4)}${ansi.reset}`;
+}
+
+/**
+ * Render banner (placeholder - actual banner is in runScan.js)
+ */
+function renderBanner() {
+  // Banner is handled in individual command files
+  return '';
+}
+
+/**
+ * PhaseProgress class (placeholder)
+ */
+class PhaseProgress {
+  constructor() {}
+  start() { return this; }
+  update() { return this; }
+  stop() { return this; }
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// EXPORTS
+// ═══════════════════════════════════════════════════════════════════════════════
+
+module.exports = {
+  WIDTH,
+  ansi,
+  colors,
+  style,
+  icons,
+  BOX,
+  padCenter,
+  padRight,
+  truncate,
+  Spinner,
+  PhaseProgress,
+  renderProgressBar,
+  renderScreenHeader,
+  renderScreenFooter,
+  renderVerdictTable,
+  renderSection,
+  renderBanner,
+  formatDuration,
+};