@vibecheckai/cli 3.5.0 → 3.5.2

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

@@ -1,504 +1,235 @@
 /**
- * Unified CLI Output - Consistent, beautiful terminal output for all Vibecheck commands
+ * Unified CLI Output - Enterprise-Grade Terminal Experience
  * 
  * ═══════════════════════════════════════════════════════════════════════════════
- * ENTERPRISE EDITION - World-Class Terminal Experience
+ * VIBECHECK DESIGN SYSTEM
  * ═══════════════════════════════════════════════════════════════════════════════
  * 
- * Features:
- * - Consistent styling across all commands
- * - Beautiful tables with proper alignment
- * - Progress spinners with timing
- * - Status badges and verdict cards
- * - Tier-aware upsell messaging
- * - JSON output mode for CI
+ * 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");
+
 // ═══════════════════════════════════════════════════════════════════════════════
-// CONFIGURATION
+// CONSTANTS
 // ═══════════════════════════════════════════════════════════════════════════════
 
-const WIDTH = 76;
-const ESC = '\x1b';
-
-const SUPPORTS_COLOR = process.stdout.isTTY && 
-  !process.env.NO_COLOR &&
-  process.env.TERM !== 'dumb';
-
-const SUPPORTS_UNICODE = (() => {
-  if (process.env.VIBECHECK_NO_UNICODE === '1') return false;
-  if (process.platform === 'win32') {
-    return Boolean(
-      process.env.CI ||
-      process.env.WT_SESSION ||
-      process.env.TERMINAL_EMULATOR === 'JetBrains-JediTerm' ||
-      (process.env.TERM || '').includes('256color') ||
-      (process.env.LANG || '').toLowerCase().includes('utf')
-    );
-  }
-  return process.env.TERM !== 'linux';
-})();
+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 ansi = {
-  reset: SUPPORTS_COLOR ? `${ESC}[0m` : '',
-  bold: SUPPORTS_COLOR ? `${ESC}[1m` : '',
-  dim: SUPPORTS_COLOR ? `${ESC}[2m` : '',
-  italic: SUPPORTS_COLOR ? `${ESC}[3m` : '',
-  underline: SUPPORTS_COLOR ? `${ESC}[4m` : '',
-  
-  // Foreground
-  black: SUPPORTS_COLOR ? `${ESC}[30m` : '',
-  red: SUPPORTS_COLOR ? `${ESC}[31m` : '',
-  green: SUPPORTS_COLOR ? `${ESC}[32m` : '',
-  yellow: SUPPORTS_COLOR ? `${ESC}[33m` : '',
-  blue: SUPPORTS_COLOR ? `${ESC}[34m` : '',
-  magenta: SUPPORTS_COLOR ? `${ESC}[35m` : '',
-  cyan: SUPPORTS_COLOR ? `${ESC}[36m` : '',
-  white: SUPPORTS_COLOR ? `${ESC}[37m` : '',
-  gray: SUPPORTS_COLOR ? `${ESC}[90m` : '',
-  
-  // Background
-  bgRed: SUPPORTS_COLOR ? `${ESC}[41m` : '',
-  bgGreen: SUPPORTS_COLOR ? `${ESC}[42m` : '',
-  bgYellow: SUPPORTS_COLOR ? `${ESC}[43m` : '',
-  bgBlue: SUPPORTS_COLOR ? `${ESC}[44m` : '',
-  bgMagenta: SUPPORTS_COLOR ? `${ESC}[45m` : '',
-  bgCyan: SUPPORTS_COLOR ? `${ESC}[46m` : '',
-  
-  // RGB (truecolor)
-  rgb: (r, g, b) => SUPPORTS_COLOR ? `${ESC}[38;2;${r};${g};${b}m` : '',
-  bgRgb: (r, g, b) => SUPPORTS_COLOR ? `${ESC}[48;2;${r};${g};${b}m` : '',
-  
-  // Cursor
-  hideCursor: `${ESC}[?25l`,
-  showCursor: `${ESC}[?25h`,
-  clearLine: `${ESC}[2K`,
-  cursorUp: (n = 1) => `${ESC}[${n}A`,
-};
-
-// ═══════════════════════════════════════════════════════════════════════════════
-// SYMBOLS & ICONS
+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 ? {
-  // Status
-  check: '✓',
-  cross: '✗',
-  warning: '⚠',
-  info: 'ℹ',
-  bullet: '•',
-  arrow: '→',
-  arrowDown: '↓',
-  pointer: '❯',
-  
-  // Progress
-  filled: '█',
-  empty: '░',
-  
-  // Categories
-  shield: '🛡️',
-  lock: '🔒',
-  key: '🔑',
-  gear: '⚙',
-  package: '📦',
-  folder: '📁',
-  file: '📄',
-  search: '🔍',
-  clock: '⏱',
-  chart: '📊',
-  target: '🎯',
-  rocket: '🚀',
-  star: '★',
-  sparkles: '✨',
-  fire: '🔥',
-  lightning: '⚡',
-  wrench: '🔧',
-  doctor: '🩺',
-  
-  // Severity
-  critical: '🛑',
-  high: '🟠',
-  medium: '🟡',
-  low: '🔵',
-  
-  // Commands
-  scan: '🔍',
-  ship: '🚀',
-  fix: '🔧',
-  auth: '🔑',
-  init: '⚙',
-  truth: '✓',
-  guard: '🛡️',
-} : {
-  check: '+',
-  cross: 'x',
-  warning: '!',
-  info: 'i',
-  bullet: '-',
-  arrow: '->',
-  arrowDown: 'v',
-  pointer: '>',
-  filled: '#',
-  empty: '-',
-  shield: '[S]',
-  lock: '[L]',
-  key: '[K]',
-  gear: '[G]',
-  package: '[P]',
-  folder: '[D]',
-  file: '[F]',
-  search: '[?]',
-  clock: '[T]',
-  chart: '[#]',
-  target: '[O]',
-  rocket: '^',
-  star: '*',
-  sparkles: '*',
-  fire: '*',
-  lightning: '!',
-  wrench: '[W]',
-  doctor: '[+]',
-  critical: '[!]',
-  high: '[H]',
-  medium: '[M]',
-  low: '[L]',
-  scan: '[?]',
-  ship: '^',
-  fix: '[W]',
-  auth: '[K]',
-  init: '[G]',
-  truth: '+',
-  guard: '[S]',
-};
-
-// ═══════════════════════════════════════════════════════════════════════════════
-// BOX DRAWING
-// ═══════════════════════════════════════════════════════════════════════════════
-
-const box = SUPPORTS_UNICODE ? {
-  topLeft: '┌', topRight: '┐',
-  bottomLeft: '└', bottomRight: '┘',
-  horizontal: '─', vertical: '│',
-  cross: '┼',
-  teeLeft: '├', teeRight: '┤',
-  teeUp: '┴', teeDown: '┬',
-  dTopLeft: '╔', dTopRight: '╗',
-  dBottomLeft: '╚', dBottomRight: '╝',
-  dHorizontal: '═', dVertical: '║',
-  dTeeLeft: '╠', dTeeRight: '╣',
-  rTopLeft: '╭', rTopRight: '╮',
-  rBottomLeft: '╰', rBottomRight: '╯',
+  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: "┤",
+  },
 } : {
-  topLeft: '+', topRight: '+',
-  bottomLeft: '+', bottomRight: '+',
-  horizontal: '-', vertical: '|',
-  cross: '+',
-  teeLeft: '+', teeRight: '+',
-  teeUp: '+', teeDown: '+',
-  dTopLeft: '+', dTopRight: '+',
-  dBottomLeft: '+', dBottomRight: '+',
-  dHorizontal: '=', dVertical: '|',
-  dTeeLeft: '+', dTeeRight: '+',
-  rTopLeft: '+', rTopRight: '+',
-  rBottomLeft: '+', rBottomRight: '+',
+  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 CONFIGURATION
+// TIER BADGES
 // ═══════════════════════════════════════════════════════════════════════════════
 
 const TIER = {
-  FREE: 'free',
-  PRO: 'pro',
-};
-
-const TIER_COLORS = {
-  free: ansi.gray,
-  pro: ansi.magenta,
-};
-
-const TIER_LABELS = {
-  free: 'FREE',
-  pro: 'PRO',
+  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 color = TIER_COLORS[tier] || ansi.gray;
-  const label = TIER_LABELS[tier] || tier?.toUpperCase() || 'FREE';
-  return `${color}${ansi.bold}${label}${ansi.reset}`;
+  const t = TIER[tier] || TIER.free;
+  return `${t.color}[${t.label}]${ansi.reset}`;
 }
 
-function getTierColor(tier) {
-  return TIER_COLORS[tier] || ansi.gray;
+function getTierFromKey() {
+  const { key } = getApiKey();
+  if (!key) return "free";
+  // Simplified tier detection - in real app would check entitlements
+  return "starter";
 }
 
 // ═══════════════════════════════════════════════════════════════════════════════
-// TEXT UTILITIES
+// UTILITY FUNCTIONS
 // ═══════════════════════════════════════════════════════════════════════════════
 
-function visibleLength(str) {
-  return (str || '').replace(/\x1b\[[0-9;]*m/g, '').length;
-}
-
-function padRight(str, width, char = ' ') {
-  const visible = visibleLength(str);
-  if (visible >= width) return str;
-  return str + char.repeat(width - visible);
+function stripAnsi(str) {
+  return str.replace(/\x1b\[\d+m/g, "").replace(/\x1b\[38;2;\d+;\d+;\d+m/g, "");
 }
 
-function padLeft(str, width, char = ' ') {
-  const visible = visibleLength(str);
-  if (visible >= width) return str;
-  return char.repeat(width - visible) + str;
+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 center(str, width) {
-  const visible = visibleLength(str);
-  if (visible >= width) return str;
-  const left = Math.floor((width - visible) / 2);
-  const right = width - visible - left;
-  return ' '.repeat(left) + str + ' '.repeat(right);
+function padRight(str, width) {
+  const len = stripAnsi(str).length;
+  return str + " ".repeat(Math.max(0, width - len));
 }
 
 function truncate(str, maxLen) {
-  if (!str) return '';
-  const visible = visibleLength(str);
-  if (visible <= maxLen) return str;
-  return str.substring(0, maxLen - 3) + '...';
+  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`;
-  const mins = Math.floor(ms / 60000);
-  const secs = Math.floor((ms % 60000) / 1000);
-  return `${mins}m ${secs}s`;
-}
-
-function formatBytes(bytes) {
-  if (bytes < 1024) return `${bytes}B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
-  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
-  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)}GB`;
-}
-
-// ═══════════════════════════════════════════════════════════════════════════════
-// SPINNER CLASS
-// ═══════════════════════════════════════════════════════════════════════════════
-
-const SPINNER_FRAMES = SUPPORTS_UNICODE
-  ? ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
-  : ['-', '\\', '|', '/'];
-
-class Spinner {
-  constructor(text = '') {
-    this.text = text;
-    this.timer = null;
-    this.frameIndex = 0;
-    this.startTime = null;
-    this.stream = process.stderr;
-  }
-
-  start(text) {
-    if (text) this.text = text;
-    this.startTime = Date.now();
-    
-    if (!process.stdout.isTTY) {
-      console.log(`  ${sym.info} ${this.text}`);
-      return this;
-    }
-    
-    this.stream.write(ansi.hideCursor);
-    this.timer = setInterval(() => {
-      const frame = SPINNER_FRAMES[this.frameIndex];
-      const elapsed = formatDuration(Date.now() - this.startTime);
-      this.frameIndex = (this.frameIndex + 1) % SPINNER_FRAMES.length;
-      this.stream.write(`\r${ansi.clearLine}  ${ansi.cyan}${frame}${ansi.reset} ${this.text} ${ansi.dim}${elapsed}${ansi.reset}`);
-    }, 80);
-    return this;
-  }
-
-  update(text) {
-    this.text = text;
-    return this;
-  }
-
-  stop(finalIcon, finalColor, finalText) {
-    if (this.timer) {
-      clearInterval(this.timer);
-      this.timer = null;
-    }
-    const elapsed = this.startTime ? formatDuration(Date.now() - this.startTime) : '';
-    this.stream.write(`\r${ansi.clearLine}`);
-    
-    if (finalIcon !== null && finalText !== undefined && process.stdout.isTTY) {
-      console.log(`  ${finalColor || ''}${finalIcon || ''}${ansi.reset} ${finalText || this.text} ${ansi.dim}${elapsed}${ansi.reset}`);
-    }
-    this.stream.write(ansi.showCursor);
-    this.startTime = null;
-    return this;
-  }
-
-  succeed(text) {
-    return this.stop(sym.check, ansi.green, text || this.text);
-  }
-
-  fail(text) {
-    return this.stop(sym.cross, ansi.red, text || this.text);
-  }
-
-  warn(text) {
-    return this.stop(sym.warning, ansi.yellow, text || this.text);
-  }
-
-  info(text) {
-    return this.stop(sym.info, ansi.cyan, text || this.text);
-  }
+  return `${Math.floor(ms / 60000)}m ${Math.floor((ms % 60000) / 1000)}s`;
 }
 
 // ═══════════════════════════════════════════════════════════════════════════════
-// PROGRESS BAR
+// HEADER / BANNER
 // ═══════════════════════════════════════════════════════════════════════════════
 
-function progressBar(percent, width = 30, options = {}) {
-  const {
-    filled = sym.filled,
-    empty = sym.empty,
-    showPercent = true,
-  } = options;
-
-  const clamped = Math.max(0, Math.min(100, percent));
-  const filledCount = Math.round((clamped / 100) * width);
-  
-  let color;
-  if (options.color) {
-    color = options.color;
-  } else if (clamped >= 80) {
-    color = ansi.green;
-  } else if (clamped >= 50) {
-    color = ansi.yellow;
-  } else {
-    color = ansi.red;
+/**
+ * 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}`);
   }
   
-  const bar = `${color}${filled.repeat(filledCount)}${ansi.gray}${empty.repeat(width - filledCount)}${ansi.reset}`;
-  const percentStr = showPercent ? ` ${String(Math.round(clamped)).padStart(3)}%` : '';
+  // Bottom border
+  lines.push(`${ansi.gray}${b.bl}${b.h.repeat(WIDTH - 2)}${b.br}${ansi.reset}`);
   
-  return `${bar}${ansi.gray}${percentStr}${ansi.reset}`;
+  console.log(lines.join("\n"));
 }
 
-// ═══════════════════════════════════════════════════════════════════════════════
-// TABLE RENDERING
-// ═══════════════════════════════════════════════════════════════════════════════
-
-function renderTable(options) {
-  const { columns, data, title, maxRows = 20, showRowNumbers = false } = options;
-  const lines = [];
-
-  // Calculate column widths
-  const colWidths = columns.map((col) => {
-    const headerLen = visibleLength(col.header);
-    const maxDataLen = data.reduce((max, row) => {
-      const formatted = col.format ? col.format(row[col.key], row) : String(row[col.key] || '');
-      return Math.max(max, visibleLength(formatted));
-    }, 0);
-    return col.width || Math.min(Math.max(headerLen, maxDataLen) + 2, 40);
-  });
-
-  if (showRowNumbers) {
-    colWidths.unshift(4);
-  }
-
-  // Title
-  if (title) {
-    lines.push('');
-    lines.push(`  ${ansi.bold}${title}${ansi.reset}`);
-    lines.push(`  ${ansi.gray}${box.horizontal.repeat(Math.min(WIDTH - 4, 72))}${ansi.reset}`);
-  }
-
-  // Header row
-  const headerBorder = `  ${box.topLeft}${colWidths.map(w => box.horizontal.repeat(w)).join(box.teeDown)}${box.topRight}`;
-  lines.push(ansi.gray + headerBorder + ansi.reset);
-
-  let headerRow = `  ${ansi.gray}${box.vertical}${ansi.reset}`;
-  if (showRowNumbers) {
-    headerRow += center('#', colWidths[0]) + `${ansi.gray}${box.vertical}${ansi.reset}`;
-  }
-  columns.forEach((col, i) => {
-    const idx = showRowNumbers ? i + 1 : i;
-    headerRow += `${ansi.bold}${center(col.header, colWidths[idx])}${ansi.reset}${ansi.gray}${box.vertical}${ansi.reset}`;
-  });
-  lines.push(headerRow);
-
-  // Header separator
-  const headerSep = `  ${box.teeLeft}${colWidths.map(w => box.horizontal.repeat(w)).join(box.cross)}${box.teeRight}`;
-  lines.push(ansi.gray + headerSep + ansi.reset);
-
-  // Data rows
-  const displayData = data.slice(0, maxRows);
-  displayData.forEach((row, rowIndex) => {
-    let dataRow = `  ${ansi.gray}${box.vertical}${ansi.reset}`;
-    if (showRowNumbers) {
-      dataRow += `${ansi.gray}${center(String(rowIndex + 1), colWidths[0])}${box.vertical}${ansi.reset}`;
-    }
-    columns.forEach((col, i) => {
-      const idx = showRowNumbers ? i + 1 : i;
-      const value = col.format ? col.format(row[col.key], row) : String(row[col.key] || '');
-      const aligned = col.align === 'right' 
-        ? padLeft(truncate(value, colWidths[idx] - 1), colWidths[idx])
-        : col.align === 'center'
-          ? center(truncate(value, colWidths[idx] - 1), colWidths[idx])
-          : padRight(' ' + truncate(value, colWidths[idx] - 2), colWidths[idx]);
-      dataRow += `${aligned}${ansi.gray}${box.vertical}${ansi.reset}`;
-    });
-    lines.push(dataRow);
-  });
-
-  // Footer border
-  const footerBorder = `  ${box.bottomLeft}${colWidths.map(w => box.horizontal.repeat(w)).join(box.teeUp)}${box.bottomRight}`;
-  lines.push(ansi.gray + footerBorder + ansi.reset);
-
-  // Truncation notice
-  if (data.length > maxRows) {
-    lines.push(`  ${ansi.gray}... and ${data.length - maxRows} more rows${ansi.reset}`);
-  }
-
-  return 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`);
 }
 
 // ═══════════════════════════════════════════════════════════════════════════════
-// HEADERS & SECTIONS
+// SECTION DIVIDERS
 // ═══════════════════════════════════════════════════════════════════════════════
 
-function renderMinimalHeader(command, tier = 'free') {
-  const cmdIcon = sym[command] || sym.sparkles;
-  const tierBadge = getTierBadge(tier);
-  
-  console.log();
-  console.log(`  ${ansi.cyan}${cmdIcon}${ansi.reset} ${ansi.bold}VIBECHECK ${command.toUpperCase()}${ansi.reset} ${ansi.gray}•${ansi.reset} ${tierBadge}`);
-  console.log(`  ${ansi.gray}${box.horizontal.repeat(68)}${ansi.reset}`);
-  console.log();
-}
-
-function renderSectionHeader(title, icon) {
-  const iconStr = icon ? `${icon} ` : '';
-  console.log();
-  console.log(`  ${ansi.cyan}${iconStr}${ansi.bold}${title}${ansi.reset}`);
-  console.log(`  ${ansi.gray}${box.horizontal.repeat(WIDTH - 4)}${ansi.reset}`);
+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 renderDivider(char = box.horizontal, width = 68) {
-  console.log(`  ${ansi.gray}${char.repeat(width)}${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 MESSAGES
+// STATUS INDICATORS
 // ═══════════════════════════════════════════════════════════════════════════════
 
 function renderSuccess(message) {
@@ -517,193 +248,306 @@ function renderInfo(message) {
   console.log(`  ${ansi.cyan}${sym.info}${ansi.reset} ${message}`);
 }
 
-function renderBullet(message) {
-  console.log(`  ${ansi.gray}${sym.bullet}${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}`);
 }
 
 // ═══════════════════════════════════════════════════════════════════════════════
-// KEY-VALUE DISPLAY
+// VERDICT / RESULT BOX
 // ═══════════════════════════════════════════════════════════════════════════════
 
-function renderKeyValue(pairs, options = {}) {
-  const { labelWidth = 14, indent = 2 } = options;
-  const prefix = ' '.repeat(indent);
+/**
+ * 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;
+  }
   
-  pairs.forEach(({ label, value }) => {
-    console.log(`${prefix}${ansi.gray}${padRight(label + ':', labelWidth)}${ansi.reset} ${value}`);
-  });
+  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();
 }
 
 // ═══════════════════════════════════════════════════════════════════════════════
-// VERDICT DISPLAY
+// FINDINGS TABLE
 // ═══════════════════════════════════════════════════════════════════════════════
 
-function renderVerdict(verdict, score) {
-  const verdictConfig = {
-    SHIP: { badge: `${ansi.bgGreen}${ansi.bold}${ansi.white} SHIP ${ansi.reset}`, icon: sym.rocket, message: 'Ready to ship!' },
-    PASS: { badge: `${ansi.bgGreen}${ansi.bold}${ansi.white} PASS ${ansi.reset}`, icon: sym.check, message: 'All checks passed' },
-    WARN: { badge: `${ansi.bgYellow}${ansi.bold} WARN ${ansi.reset}`, icon: sym.warning, message: 'Review recommended' },
-    BLOCK: { badge: `${ansi.bgRed}${ansi.bold}${ansi.white} BLOCK ${ansi.reset}`, icon: sym.cross, message: 'Critical issues found' },
-    FAIL: { badge: `${ansi.bgRed}${ansi.bold}${ansi.white} FAIL ${ansi.reset}`, icon: sym.cross, message: 'Scan failed' },
-  };
-
-  const config = verdictConfig[verdict] || verdictConfig.WARN;
+/**
+ * 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;
   
-  console.log();
-  console.log(`  ${config.badge}  ${config.icon} ${config.message}`);
+  if (!findings || findings.length === 0) {
+    console.log(`  ${ansi.green}${sym.check}${ansi.reset} ${ansi.dim}No issues found${ansi.reset}`);
+    return;
+  }
   
-  if (score !== undefined && score !== null) {
-    const scoreColor = score >= 80 ? ansi.green : score >= 60 ? ansi.yellow : ansi.red;
-    console.log(`  ${ansi.gray}Health Score:${ansi.reset} ${scoreColor}${ansi.bold}${score}${ansi.reset}${ansi.gray}/100${ansi.reset}`);
-    console.log(`  ${progressBar(score, 40)}`);
+  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}`);
   }
-  console.log();
 }
 
 // ═══════════════════════════════════════════════════════════════════════════════
-// FINDINGS DISPLAY
+// KEY-VALUE LIST
 // ═══════════════════════════════════════════════════════════════════════════════
 
-function renderFindings(findings, maxDisplay = 10) {
-  if (!findings || findings.length === 0) {
-    console.log(`  ${ansi.green}${sym.check}${ansi.reset} No issues found!`);
-    return;
+/**
+ * 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}`);
   }
+}
 
-  const severityOrder = { critical: 0, high: 1, medium: 2, low: 3, info: 4 };
-  const sorted = [...findings].sort((a, b) => 
-    (severityOrder[a.severity] || 4) - (severityOrder[b.severity] || 4)
-  );
-
-  console.log(renderTable({
-    title: `${sym.warning} Issues Found (${findings.length})`,
-    columns: [
-      { 
-        header: 'Sev', 
-        key: 'severity', 
-        width: 10,
-        format: (v) => `${sym[v] || sym.info} ${(v || 'INFO').toUpperCase().substring(0, 4)}`,
-      },
-      { header: 'Category', key: 'category', width: 15 },
-      { header: 'Message', key: 'message', width: 42 },
-    ],
-    data: sorted.slice(0, maxDisplay),
-    maxRows: maxDisplay,
-  }));
+// ═══════════════════════════════════════════════════════════════════════════════
+// 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
+// FOOTER / NEXT STEPS
 // ═══════════════════════════════════════════════════════════════════════════════
 
-function renderFooter(options = {}) {
-  const { nextSteps, showUpsell, tier = 'free' } = options;
+/**
+ * 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();
   
-  if (nextSteps && nextSteps.length > 0) {
-    console.log(`  ${ansi.gray}Next Steps:${ansi.reset}`);
-    nextSteps.forEach(({ cmd, desc }) => {
-      console.log(`    ${ansi.cyan}${cmd}${ansi.reset}  ${ansi.gray}${desc}${ansi.reset}`);
-    });
+  // 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}`);
+    }
   }
   
-  if (showUpsell && tier === 'free') {
+  // Upsell for free tier
+  if (showUpsell && currentTier === "free") {
     console.log();
-    console.log(`  ${ansi.gray}${sym.star}${ansi.reset} ${ansi.magenta}PRO${ansi.reset}${ansi.gray}: auto-fix + AI explanations + badge generation${ansi.reset}`);
-    console.log(`  ${ansi.gray}  Upgrade ${sym.arrow} https://vibecheckai.dev${ansi.reset}`);
+    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();
 }
 
 // ═══════════════════════════════════════════════════════════════════════════════
-// DOCTOR CHECK RESULTS
+// SPINNER
 // ═══════════════════════════════════════════════════════════════════════════════
 
-function renderDoctorCheck(check) {
-  const statusConfig = {
-    pass: { icon: sym.check, color: ansi.green },
-    warn: { icon: sym.warning, color: ansi.yellow },
-    fail: { icon: sym.cross, color: ansi.red },
-    info: { icon: sym.info, color: ansi.cyan },
-    skip: { icon: sym.bullet, color: ansi.gray },
-  };
-  
-  const config = statusConfig[check.status] || statusConfig.info;
-  const nameStr = padRight(check.name, 20);
-  const message = check.message || '';
-  
-  console.log(`  ${config.color}${config.icon}${ansi.reset} ${nameStr} ${ansi.gray}${message}${ansi.reset}`);
-  
-  if (check.fix && check.status !== 'pass') {
-    console.log(`    ${ansi.dim}${sym.arrow} Fix: ${check.fix}${ansi.reset}`);
-  }
-}
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 
-function renderDoctorResults(checks) {
-  const passed = checks.filter(c => c.status === 'pass').length;
-  const warnings = checks.filter(c => c.status === 'warn').length;
-  const failed = checks.filter(c => c.status === 'fail').length;
-  
-  console.log();
-  
-  checks.forEach(check => renderDoctorCheck(check));
-  
-  console.log();
-  console.log(`  ${ansi.gray}${box.horizontal.repeat(68)}${ansi.reset}`);
-  
-  const summary = [];
-  if (passed > 0) summary.push(`${ansi.green}${passed} passed${ansi.reset}`);
-  if (warnings > 0) summary.push(`${ansi.yellow}${warnings} warnings${ansi.reset}`);
-  if (failed > 0) summary.push(`${ansi.red}${failed} failed${ansi.reset}`);
+class Spinner {
+  constructor(text = "") {
+    this.text = text;
+    this.timer = null;
+    this.frame = 0;
+  }
   
-  console.log(`  Summary: ${summary.join(', ')}`);
+  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;
+  }
   
-  if (failed > 0) {
-    console.log(`  ${ansi.red}${sym.cross}${ansi.reset} Issues found - run ${ansi.cyan}vibecheck doctor --fix${ansi.reset} to repair`);
-  } else if (warnings > 0) {
-    console.log(`  ${ansi.yellow}${sym.warning}${ansi.reset} Warnings found - review recommended`);
-  } else {
-    console.log(`  ${ansi.green}${sym.check}${ansi.reset} Environment healthy!`);
+  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 HELP FORMATTING
+// COMMAND TEMPLATES
 // ═══════════════════════════════════════════════════════════════════════════════
 
-function renderCommandHelp(command, options = {}) {
-  const { usage, aliases, description, sections = [] } = options;
-  const lines = [];
-  
-  lines.push('');
-  lines.push(`  ${ansi.bold}USAGE${ansi.reset}`);
-  lines.push(`    ${ansi.cyan}${usage}${ansi.reset}`);
+/**
+ * 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 (aliases) {
-    lines.push(`  ${ansi.dim}Aliases: ${aliases}${ansi.reset}`);
+  if (json) {
+    // JSON mode - run silently, output only JSON
+    return await run();
   }
   
-  if (description) {
-    lines.push('');
-    lines.push(`  ${description}`);
+  if (!quiet) {
+    renderMinimalHeader(command, tier);
   }
   
-  sections.forEach(section => {
-    lines.push('');
-    lines.push(`  ${ansi.bold}${section.title}${ansi.reset}`);
-    section.items.forEach(item => {
-      const tierBadge = item.tier && item.tier !== 'free' 
-        ? ` ${ansi.dim}[${TIER_LABELS[item.tier]}]${ansi.reset}` 
-        : '';
-      lines.push(`    ${ansi.cyan}${padRight(item.name, 20)}${ansi.reset}${item.description}${tierBadge}`);
-    });
-  });
-  
-  lines.push('');
+  const result = await run();
   
-  return lines.join('\n');
+  return result;
 }
 
 // ═══════════════════════════════════════════════════════════════════════════════
@@ -711,67 +555,50 @@ function renderCommandHelp(command, options = {}) {
 // ═══════════════════════════════════════════════════════════════════════════════
 
 module.exports = {
-  // Config
+  // Constants
   WIDTH,
-  SUPPORTS_COLOR,
-  SUPPORTS_UNICODE,
-  
-  // ANSI
   ansi,
-  
-  // Symbols & Icons
   sym,
-  box,
-  
-  // Tier
   TIER,
-  TIER_COLORS,
-  TIER_LABELS,
-  getTierBadge,
-  getTierColor,
   
-  // Text utilities
-  visibleLength,
+  // Utilities
+  stripAnsi,
+  padCenter,
   padRight,
-  padLeft,
-  center,
   truncate,
   formatDuration,
-  formatBytes,
-  
-  // Components
-  Spinner,
-  progressBar,
-  renderTable,
+  getTierBadge,
+  getTierFromKey,
   
-  // Headers & Sections
+  // Headers
+  renderHeader,
   renderMinimalHeader,
-  renderSectionHeader,
+  
+  // Dividers
   renderDivider,
+  renderSectionHeader,
   
-  // Status messages
+  // Status
   renderSuccess,
   renderError,
   renderWarning,
   renderInfo,
   renderBullet,
+  renderStep,
   
-  // Key-Value
-  renderKeyValue,
-  
-  // Verdict
+  // Results
   renderVerdict,
-  
-  // Findings
-  renderFindings,
+  renderFindingsTable,
+  renderKeyValue,
+  renderProgressBar,
+  renderScore,
   
   // Footer
   renderFooter,
   
-  // Doctor
-  renderDoctorCheck,
-  renderDoctorResults,
+  // Components
+  Spinner,
   
-  // Help
-  renderCommandHelp,
+  // Templates
+  runCommand,
 };