@vibecheckai/cli 3.2.5 → 3.3.0

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

@@ -1,540 +1,540 @@
-/**
- * CLI UI Library — Beautiful Interactive Experience
- * 
- * Features:
- * - Stunning ASCII art headers
- * - Beautiful bordered tables
- * - Interactive menus
- * - Progress bars and spinners
- * - Color gradients
- * - Box drawing characters
- */
-
-const readline = require("readline");
-
-// Extended ANSI color palette
-const colors = {
-  reset: "\x1b[0m",
-  bold: "\x1b[1m",
-  dim: "\x1b[2m",
-  italic: "\x1b[3m",
-  underline: "\x1b[4m",
-  blink: "\x1b[5m",
-  inverse: "\x1b[7m",
-  hidden: "\x1b[8m",
-  strikethrough: "\x1b[9m",
-  
-  // Foreground colors
-  black: "\x1b[30m",
-  red: "\x1b[31m",
-  green: "\x1b[32m",
-  yellow: "\x1b[33m",
-  blue: "\x1b[34m",
-  magenta: "\x1b[35m",
-  cyan: "\x1b[36m",
-  white: "\x1b[37m",
-  
-  // Bright foreground
-  brightBlack: "\x1b[90m",
-  brightRed: "\x1b[91m",
-  brightGreen: "\x1b[92m",
-  brightYellow: "\x1b[93m",
-  brightBlue: "\x1b[94m",
-  brightMagenta: "\x1b[95m",
-  brightCyan: "\x1b[96m",
-  brightWhite: "\x1b[97m",
-  
-  // Background colors
-  bgBlack: "\x1b[40m",
-  bgRed: "\x1b[41m",
-  bgGreen: "\x1b[42m",
-  bgYellow: "\x1b[43m",
-  bgBlue: "\x1b[44m",
-  bgMagenta: "\x1b[45m",
-  bgCyan: "\x1b[46m",
-  bgWhite: "\x1b[47m",
-  
-  // Bright background
-  bgBrightBlack: "\x1b[100m",
-  bgBrightRed: "\x1b[101m",
-  bgBrightGreen: "\x1b[102m",
-  bgBrightYellow: "\x1b[103m",
-  bgBrightBlue: "\x1b[104m",
-  bgBrightMagenta: "\x1b[105m",
-  bgBrightCyan: "\x1b[106m",
-  bgBrightWhite: "\x1b[107m",
-};
-
-const c = colors;
-
-// Box drawing characters
-const box = {
-  // Single line
-  topLeft: "┌",
-  topRight: "┐",
-  bottomLeft: "└",
-  bottomRight: "┘",
-  horizontal: "─",
-  vertical: "│",
-  leftT: "├",
-  rightT: "┤",
-  topT: "┬",
-  bottomT: "┴",
-  cross: "┼",
-  
-  // Double line
-  dTopLeft: "╔",
-  dTopRight: "╗",
-  dBottomLeft: "╚",
-  dBottomRight: "╝",
-  dHorizontal: "═",
-  dVertical: "║",
-  dLeftT: "╠",
-  dRightT: "╣",
-  dTopT: "╦",
-  dBottomT: "╩",
-  dCross: "╬",
-  
-  // Rounded
-  rTopLeft: "╭",
-  rTopRight: "╮",
-  rBottomLeft: "╰",
-  rBottomRight: "╯",
-};
-
-// Spinner frames
-const spinners = {
-  dots: ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"],
-  line: ["-", "\\", "|", "/"],
-  circle: ["◐", "◓", "◑", "◒"],
-  arc: ["◜", "◠", "◝", "◞", "◡", "◟"],
-  box: ["▖", "▘", "▝", "▗"],
-  bounce: ["⠁", "⠂", "⠄", "⠂"],
-  pulse: ["█", "▓", "▒", "░", "▒", "▓"],
-  arrows: ["←", "↖", "↑", "↗", "→", "↘", "↓", "↙"],
-  star: ["✶", "✷", "✸", "✹", "✺", "✹", "✸", "✷"],
-};
-
-// Progress bar characters
-const progressChars = {
-  filled: "█",
-  empty: "░",
-  gradient: ["░", "▒", "▓", "█"],
-  smooth: ["▏", "▎", "▍", "▌", "▋", "▊", "▉", "█"],
-};
-
-/**
- * Create a beautiful header with ASCII art border
- */
-function createHeader(title, subtitle = "", options = {}) {
-  const width = options.width || 70;
-  const style = options.style || "double"; // single, double, rounded
-  const color = options.color || c.cyan;
-  
-  const chars = style === "double" ? {
-    tl: box.dTopLeft, tr: box.dTopRight, bl: box.dBottomLeft, br: box.dBottomRight,
-    h: box.dHorizontal, v: box.dVertical
-  } : style === "rounded" ? {
-    tl: box.rTopLeft, tr: box.rTopRight, bl: box.rBottomLeft, br: box.rBottomRight,
-    h: box.horizontal, v: box.vertical
-  } : {
-    tl: box.topLeft, tr: box.topRight, bl: box.bottomLeft, br: box.bottomRight,
-    h: box.horizontal, v: box.vertical
-  };
-  
-  const innerWidth = width - 2;
-  const titlePad = Math.floor((innerWidth - title.length) / 2);
-  const subtitlePad = Math.floor((innerWidth - subtitle.length) / 2);
-  
-  let output = "";
-  output += `${color}${chars.tl}${chars.h.repeat(innerWidth)}${chars.tr}${c.reset}\n`;
-  output += `${color}${chars.v}${c.reset}${" ".repeat(innerWidth)}${color}${chars.v}${c.reset}\n`;
-  output += `${color}${chars.v}${c.reset}${" ".repeat(titlePad)}${c.bold}${c.brightWhite}${title}${c.reset}${" ".repeat(innerWidth - titlePad - title.length)}${color}${chars.v}${c.reset}\n`;
-  
-  if (subtitle) {
-    output += `${color}${chars.v}${c.reset}${" ".repeat(subtitlePad)}${c.dim}${subtitle}${c.reset}${" ".repeat(innerWidth - subtitlePad - subtitle.length)}${color}${chars.v}${c.reset}\n`;
-  }
-  
-  output += `${color}${chars.v}${c.reset}${" ".repeat(innerWidth)}${color}${chars.v}${c.reset}\n`;
-  output += `${color}${chars.bl}${chars.h.repeat(innerWidth)}${chars.br}${c.reset}`;
-  
-  return output;
-}
-
-/**
- * Create a beautiful table
- */
-function createTable(headers, rows, options = {}) {
-  const style = options.style || "rounded";
-  const headerColor = options.headerColor || c.cyan;
-  const borderColor = options.borderColor || c.dim;
-  
-  // Calculate column widths
-  const colWidths = headers.map((h, i) => {
-    const headerLen = stripAnsi(h).length;
-    const maxRowLen = Math.max(...rows.map(r => stripAnsi(String(r[i] || "")).length));
-    return Math.max(headerLen, maxRowLen) + 2;
-  });
-  
-  const chars = style === "rounded" ? {
-    tl: box.rTopLeft, tr: box.rTopRight, bl: box.rBottomLeft, br: box.rBottomRight,
-    h: box.horizontal, v: box.vertical, lt: box.leftT, rt: box.rightT,
-    tt: box.topT, bt: box.bottomT, cr: box.cross
-  } : {
-    tl: box.topLeft, tr: box.topRight, bl: box.bottomLeft, br: box.bottomRight,
-    h: box.horizontal, v: box.vertical, lt: box.leftT, rt: box.rightT,
-    tt: box.topT, bt: box.bottomT, cr: box.cross
-  };
-  
-  let output = "";
-  
-  // Top border
-  output += borderColor + chars.tl;
-  output += colWidths.map(w => chars.h.repeat(w)).join(chars.tt);
-  output += chars.tr + c.reset + "\n";
-  
-  // Header row
-  output += borderColor + chars.v + c.reset;
-  headers.forEach((h, i) => {
-    const padded = padCenter(h, colWidths[i]);
-    output += `${headerColor}${c.bold}${padded}${c.reset}${borderColor}${chars.v}${c.reset}`;
-  });
-  output += "\n";
-  
-  // Header separator
-  output += borderColor + chars.lt;
-  output += colWidths.map(w => chars.h.repeat(w)).join(chars.cr);
-  output += chars.rt + c.reset + "\n";
-  
-  // Data rows
-  rows.forEach((row, rowIdx) => {
-    output += borderColor + chars.v + c.reset;
-    row.forEach((cell, i) => {
-      const cellStr = String(cell || "");
-      const padded = padCenter(cellStr, colWidths[i]);
-      output += `${padded}${borderColor}${chars.v}${c.reset}`;
-    });
-    output += "\n";
-  });
-  
-  // Bottom border
-  output += borderColor + chars.bl;
-  output += colWidths.map(w => chars.h.repeat(w)).join(chars.bt);
-  output += chars.br + c.reset;
-  
-  return output;
-}
-
-/**
- * Create a beautiful progress bar
- */
-function createProgressBar(percent, options = {}) {
-  const width = options.width || 40;
-  const showPercent = options.showPercent !== false;
-  const showLabel = options.label || "";
-  const color = options.color || c.green;
-  
-  const filled = Math.round((percent / 100) * width);
-  const empty = width - filled;
-  
-  let bar = "";
-  
-  // Gradient effect
-  for (let i = 0; i < filled; i++) {
-    const charIdx = Math.min(3, Math.floor((i / width) * 4));
-    bar += color + progressChars.gradient[charIdx];
-  }
-  bar += c.dim;
-  for (let i = 0; i < empty; i++) {
-    bar += progressChars.empty;
-  }
-  bar += c.reset;
-  
-  let output = "";
-  if (showLabel) {
-    output += `${showLabel} `;
-  }
-  output += `${c.dim}[${c.reset}${bar}${c.dim}]${c.reset}`;
-  if (showPercent) {
-    output += ` ${color}${percent.toFixed(0)}%${c.reset}`;
-  }
-  
-  return output;
-}
-
-/**
- * Create a category score display with visual bars
- */
-function createScoreCard(categories, options = {}) {
-  const width = options.width || 50;
-  const barWidth = options.barWidth || 25;
-  
-  let output = "";
-  
-  for (const [name, score] of Object.entries(categories)) {
-    const color = score >= 80 ? c.green : score >= 60 ? c.yellow : c.red;
-    const icon = score >= 80 ? "✓" : score >= 60 ? "!" : "✗";
-    
-    const filled = Math.round((score / 100) * barWidth);
-    const empty = barWidth - filled;
-    const bar = color + progressChars.filled.repeat(filled) + c.dim + progressChars.empty.repeat(empty) + c.reset;
-    
-    const nameStr = name.padEnd(15);
-    const scoreStr = `${score}%`.padStart(4);
-    
-    output += `  ${c.dim}${icon}${c.reset} ${nameStr} ${bar} ${color}${scoreStr}${c.reset}\n`;
-  }
-  
-  return output;
-}
-
-/**
- * Create an interactive menu
- */
-async function createMenu(title, options, config = {}) {
-  const menuColor = config.color || c.cyan;
-  
-  return new Promise((resolve) => {
-    console.log("");
-    console.log(createHeader(title, config.subtitle || "", { color: menuColor, style: "rounded" }));
-    console.log("");
-    
-    options.forEach((opt, i) => {
-      const num = `${i + 1}`.padStart(2);
-      const icon = opt.icon || "›";
-      console.log(`  ${menuColor}${num}${c.reset} ${icon} ${c.bold}${opt.label}${c.reset}`);
-      if (opt.description) {
-        console.log(`      ${c.dim}${opt.description}${c.reset}`);
-      }
-    });
-    
-    console.log("");
-    console.log(`  ${c.dim}${options.length + 1}. Exit${c.reset}`);
-    console.log("");
-    
-    const rl = readline.createInterface({
-      input: process.stdin,
-      output: process.stdout,
-    });
-    
-    rl.question(`  ${menuColor}›${c.reset} Select an option: `, (answer) => {
-      rl.close();
-      const choice = parseInt(answer, 10);
-      
-      if (choice >= 1 && choice <= options.length) {
-        resolve(options[choice - 1]);
-      } else {
-        resolve(null);
-      }
-    });
-  });
-}
-
-/**
- * Create a spinner
- */
-function createSpinner(message, type = "dots") {
-  const frames = spinners[type] || spinners.dots;
-  let frameIdx = 0;
-  let interval = null;
-  
-  const spinner = {
-    start() {
-      process.stdout.write(`\n  ${frames[0]} ${message}`);
-      interval = setInterval(() => {
-        frameIdx = (frameIdx + 1) % frames.length;
-        process.stdout.write(`\r  ${c.cyan}${frames[frameIdx]}${c.reset} ${message}`);
-      }, 80);
-      return this;
-    },
-    
-    update(newMessage) {
-      message = newMessage;
-      return this;
-    },
-    
-    success(finalMessage) {
-      if (interval) clearInterval(interval);
-      process.stdout.write(`\r  ${c.green}✓${c.reset} ${finalMessage || message}\n`);
-      return this;
-    },
-    
-    error(finalMessage) {
-      if (interval) clearInterval(interval);
-      process.stdout.write(`\r  ${c.red}✗${c.reset} ${finalMessage || message}\n`);
-      return this;
-    },
-    
-    stop() {
-      if (interval) clearInterval(interval);
-      process.stdout.write("\r" + " ".repeat(message.length + 10) + "\r");
-      return this;
-    },
-  };
-  
-  return spinner;
-}
-
-/**
- * Create a beautiful verdict display
- */
-function createVerdictDisplay(verdict, score, options = {}) {
-  const width = options.width || 60;
-  
-  const configs = {
-    SHIP: {
-      color: c.green,
-      bgColor: c.bgGreen,
-      icon: "🚀",
-      ascii: [
-        "   ███████╗██╗  ██╗██╗██████╗ ",
-        "   ██╔════╝██║  ██║██║██╔══██╗",
-        "   ███████╗███████║██║██████╔╝",
-        "   ╚════██║██╔══██║██║██╔═══╝ ",
-        "   ███████║██║  ██║██║██║     ",
-        "   ╚══════╝╚═╝  ╚═╝╚═╝╚═╝     ",
-      ],
-      message: "Ready to ship!",
-      tagline: "All systems go. Deploy with confidence.",
-    },
-    WARN: {
-      color: c.yellow,
-      bgColor: c.bgYellow,
-      icon: "⚠️",
-      ascii: [
-        "   ██╗    ██╗ █████╗ ██████╗ ███╗   ██╗",
-        "   ██║    ██║██╔══██╗██╔══██╗████╗  ██║",
-        "   ██║ █╗ ██║███████║██████╔╝██╔██╗ ██║",
-        "   ██║███╗██║██╔══██║██╔══██╗██║╚██╗██║",
-        "   ╚███╔███╔╝██║  ██║██║  ██║██║ ╚████║",
-        "    ╚══╝╚══╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝",
-      ],
-      message: "Ship with caution",
-      tagline: "Minor issues found. Review before deploy.",
-    },
-    BLOCK: {
-      color: c.red,
-      bgColor: c.bgRed,
-      icon: "🚫",
-      ascii: [
-        "   ██████╗ ██╗      ██████╗  ██████╗██╗  ██╗",
-        "   ██╔══██╗██║     ██╔═══██╗██╔════╝██║ ██╔╝",
-        "   ██████╔╝██║     ██║   ██║██║     █████╔╝ ",
-        "   ██╔══██╗██║     ██║   ██║██║     ██╔═██╗ ",
-        "   ██████╔╝███████╗╚██████╔╝╚██████╗██║  ██╗",
-        "   ╚═════╝ ╚══════╝ ╚═════╝  ╚═════╝╚═╝  ╚═╝",
-      ],
-      message: "Do not ship!",
-      tagline: "Critical issues must be fixed first.",
-    },
-  };
-  
-  const config = configs[verdict] || configs.BLOCK;
-  
-  let output = "\n";
-  
-  // ASCII art verdict
-  for (const line of config.ascii) {
-    output += `${config.color}${line}${c.reset}\n`;
-  }
-  
-  output += "\n";
-  
-  // Score display
-  const scoreDisplay = `SCORE: ${score}`;
-  output += `   ${config.color}${c.bold}${config.icon} ${scoreDisplay}${c.reset}\n`;
-  output += `   ${c.dim}${config.tagline}${c.reset}\n`;
-  
-  return output;
-}
-
-/**
- * Create a badge display (the stunning one)
- */
-function createBadgeDisplay(projectId, score, verdict) {
-  const config = {
-    SHIP: { color: c.green, bg: c.bgGreen, icon: "✓", glow: "🌟" },
-    WARN: { color: c.yellow, bg: c.bgYellow, icon: "!", glow: "⚡" },
-    BLOCK: { color: c.red, bg: c.bgRed, icon: "✗", glow: "🔥" },
-  };
-  
-  const cfg = config[verdict] || config.BLOCK;
-  
-  const badge = `
-${cfg.color}${c.bold}
-    ╔══════════════════════════════════════════════════════════════╗
-    ║                                                              ║
-    ║   ${cfg.glow}  ██╗   ██╗██╗██████╗ ███████╗ ██████╗██╗  ██╗███████╗ ${cfg.glow}   ║
-    ║      ██║   ██║██║██╔══██╗██╔════╝██╔════╝██║  ██║██╔════╝      ║
-    ║      ██║   ██║██║██████╔╝█████╗  ██║     ███████║█████╗        ║
-    ║      ╚██╗ ██╔╝██║██╔══██╗██╔══╝  ██║     ██╔══██║██╔══╝        ║
-    ║       ╚████╔╝ ██║██████╔╝███████╗╚██████╗██║  ██║███████╗      ║
-    ║        ╚═══╝  ╚═╝╚═════╝ ╚══════╝ ╚═════╝╚═╝  ╚═╝╚══════╝      ║
-    ║                                                              ║
-    ║   ┌────────────────────────────────────────────────────────┐ ║
-    ║   │                                                        │ ║
-    ║   │     ${cfg.icon} ${verdict}   │   SCORE: ${String(score).padStart(3)}   │   ${projectId.substring(0, 20).padEnd(20)}     │ ║
-    ║   │                                                        │ ║
-    ║   └────────────────────────────────────────────────────────┘ ║
-    ║                                                              ║
-    ║         ════════════════════════════════════════════         ║
-    ║                    VERIFIED BY VIBECHECK                     ║
-    ║         ════════════════════════════════════════════         ║
-    ║                                                              ║
-    ╚══════════════════════════════════════════════════════════════╝
-${c.reset}`;
-
-  return badge;
-}
-
-/**
- * Strip ANSI codes from string
- */
-function stripAnsi(str) {
-  return str.replace(/\x1b\[[0-9;]*m/g, "");
-}
-
-/**
- * Pad string to center
- */
-function padCenter(str, width) {
-  const len = stripAnsi(str).length;
-  const pad = Math.max(0, width - len);
-  const padLeft = Math.floor(pad / 2);
-  const padRight = pad - padLeft;
-  return " ".repeat(padLeft) + str + " ".repeat(padRight);
-}
-
-/**
- * Create a divider line
- */
-function divider(width = 60, char = "─", color = c.dim) {
-  return `${color}${char.repeat(width)}${c.reset}`;
-}
-
-/**
- * Create a section header
- */
-function sectionHeader(title, icon = "›") {
-  return `\n${c.cyan}${icon}${c.reset} ${c.bold}${title}${c.reset}\n${divider(40)}`;
-}
-
-module.exports = {
-  colors,
-  c,
-  box,
-  spinners,
-  progressChars,
-  createHeader,
-  createTable,
-  createProgressBar,
-  createScoreCard,
-  createMenu,
-  createSpinner,
-  createVerdictDisplay,
-  createBadgeDisplay,
-  stripAnsi,
-  padCenter,
-  divider,
-  sectionHeader,
-};
+/**
+ * CLI UI Library — Beautiful Interactive Experience
+ * 
+ * Features:
+ * - Stunning ASCII art headers
+ * - Beautiful bordered tables
+ * - Interactive menus
+ * - Progress bars and spinners
+ * - Color gradients
+ * - Box drawing characters
+ */
+
+const readline = require("readline");
+
+// Extended ANSI color palette
+const colors = {
+  reset: "\x1b[0m",
+  bold: "\x1b[1m",
+  dim: "\x1b[2m",
+  italic: "\x1b[3m",
+  underline: "\x1b[4m",
+  blink: "\x1b[5m",
+  inverse: "\x1b[7m",
+  hidden: "\x1b[8m",
+  strikethrough: "\x1b[9m",
+  
+  // Foreground colors
+  black: "\x1b[30m",
+  red: "\x1b[31m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  blue: "\x1b[34m",
+  magenta: "\x1b[35m",
+  cyan: "\x1b[36m",
+  white: "\x1b[37m",
+  
+  // Bright foreground
+  brightBlack: "\x1b[90m",
+  brightRed: "\x1b[91m",
+  brightGreen: "\x1b[92m",
+  brightYellow: "\x1b[93m",
+  brightBlue: "\x1b[94m",
+  brightMagenta: "\x1b[95m",
+  brightCyan: "\x1b[96m",
+  brightWhite: "\x1b[97m",
+  
+  // Background colors
+  bgBlack: "\x1b[40m",
+  bgRed: "\x1b[41m",
+  bgGreen: "\x1b[42m",
+  bgYellow: "\x1b[43m",
+  bgBlue: "\x1b[44m",
+  bgMagenta: "\x1b[45m",
+  bgCyan: "\x1b[46m",
+  bgWhite: "\x1b[47m",
+  
+  // Bright background
+  bgBrightBlack: "\x1b[100m",
+  bgBrightRed: "\x1b[101m",
+  bgBrightGreen: "\x1b[102m",
+  bgBrightYellow: "\x1b[103m",
+  bgBrightBlue: "\x1b[104m",
+  bgBrightMagenta: "\x1b[105m",
+  bgBrightCyan: "\x1b[106m",
+  bgBrightWhite: "\x1b[107m",
+};
+
+const c = colors;
+
+// Box drawing characters
+const box = {
+  // Single line
+  topLeft: "┌",
+  topRight: "┐",
+  bottomLeft: "└",
+  bottomRight: "┘",
+  horizontal: "─",
+  vertical: "│",
+  leftT: "├",
+  rightT: "┤",
+  topT: "┬",
+  bottomT: "┴",
+  cross: "┼",
+  
+  // Double line
+  dTopLeft: "╔",
+  dTopRight: "╗",
+  dBottomLeft: "╚",
+  dBottomRight: "╝",
+  dHorizontal: "═",
+  dVertical: "║",
+  dLeftT: "╠",
+  dRightT: "╣",
+  dTopT: "╦",
+  dBottomT: "╩",
+  dCross: "╬",
+  
+  // Rounded
+  rTopLeft: "╭",
+  rTopRight: "╮",
+  rBottomLeft: "╰",
+  rBottomRight: "╯",
+};
+
+// Spinner frames
+const spinners = {
+  dots: ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"],
+  line: ["-", "\\", "|", "/"],
+  circle: ["◐", "◓", "◑", "◒"],
+  arc: ["◜", "◠", "◝", "◞", "◡", "◟"],
+  box: ["▖", "▘", "▝", "▗"],
+  bounce: ["⠁", "⠂", "⠄", "⠂"],
+  pulse: ["█", "▓", "▒", "░", "▒", "▓"],
+  arrows: ["←", "↖", "↑", "↗", "→", "↘", "↓", "↙"],
+  star: ["✶", "✷", "✸", "✹", "✺", "✹", "✸", "✷"],
+};
+
+// Progress bar characters
+const progressChars = {
+  filled: "█",
+  empty: "░",
+  gradient: ["░", "▒", "▓", "█"],
+  smooth: ["▏", "▎", "▍", "▌", "▋", "▊", "▉", "█"],
+};
+
+/**
+ * Create a beautiful header with ASCII art border
+ */
+function createHeader(title, subtitle = "", options = {}) {
+  const width = options.width || 70;
+  const style = options.style || "double"; // single, double, rounded
+  const color = options.color || c.cyan;
+  
+  const chars = style === "double" ? {
+    tl: box.dTopLeft, tr: box.dTopRight, bl: box.dBottomLeft, br: box.dBottomRight,
+    h: box.dHorizontal, v: box.dVertical
+  } : style === "rounded" ? {
+    tl: box.rTopLeft, tr: box.rTopRight, bl: box.rBottomLeft, br: box.rBottomRight,
+    h: box.horizontal, v: box.vertical
+  } : {
+    tl: box.topLeft, tr: box.topRight, bl: box.bottomLeft, br: box.bottomRight,
+    h: box.horizontal, v: box.vertical
+  };
+  
+  const innerWidth = width - 2;
+  const titlePad = Math.floor((innerWidth - title.length) / 2);
+  const subtitlePad = Math.floor((innerWidth - subtitle.length) / 2);
+  
+  let output = "";
+  output += `${color}${chars.tl}${chars.h.repeat(innerWidth)}${chars.tr}${c.reset}\n`;
+  output += `${color}${chars.v}${c.reset}${" ".repeat(innerWidth)}${color}${chars.v}${c.reset}\n`;
+  output += `${color}${chars.v}${c.reset}${" ".repeat(titlePad)}${c.bold}${c.brightWhite}${title}${c.reset}${" ".repeat(innerWidth - titlePad - title.length)}${color}${chars.v}${c.reset}\n`;
+  
+  if (subtitle) {
+    output += `${color}${chars.v}${c.reset}${" ".repeat(subtitlePad)}${c.dim}${subtitle}${c.reset}${" ".repeat(innerWidth - subtitlePad - subtitle.length)}${color}${chars.v}${c.reset}\n`;
+  }
+  
+  output += `${color}${chars.v}${c.reset}${" ".repeat(innerWidth)}${color}${chars.v}${c.reset}\n`;
+  output += `${color}${chars.bl}${chars.h.repeat(innerWidth)}${chars.br}${c.reset}`;
+  
+  return output;
+}
+
+/**
+ * Create a beautiful table
+ */
+function createTable(headers, rows, options = {}) {
+  const style = options.style || "rounded";
+  const headerColor = options.headerColor || c.cyan;
+  const borderColor = options.borderColor || c.dim;
+  
+  // Calculate column widths
+  const colWidths = headers.map((h, i) => {
+    const headerLen = stripAnsi(h).length;
+    const maxRowLen = Math.max(...rows.map(r => stripAnsi(String(r[i] || "")).length));
+    return Math.max(headerLen, maxRowLen) + 2;
+  });
+  
+  const chars = style === "rounded" ? {
+    tl: box.rTopLeft, tr: box.rTopRight, bl: box.rBottomLeft, br: box.rBottomRight,
+    h: box.horizontal, v: box.vertical, lt: box.leftT, rt: box.rightT,
+    tt: box.topT, bt: box.bottomT, cr: box.cross
+  } : {
+    tl: box.topLeft, tr: box.topRight, bl: box.bottomLeft, br: box.bottomRight,
+    h: box.horizontal, v: box.vertical, lt: box.leftT, rt: box.rightT,
+    tt: box.topT, bt: box.bottomT, cr: box.cross
+  };
+  
+  let output = "";
+  
+  // Top border
+  output += borderColor + chars.tl;
+  output += colWidths.map(w => chars.h.repeat(w)).join(chars.tt);
+  output += chars.tr + c.reset + "\n";
+  
+  // Header row
+  output += borderColor + chars.v + c.reset;
+  headers.forEach((h, i) => {
+    const padded = padCenter(h, colWidths[i]);
+    output += `${headerColor}${c.bold}${padded}${c.reset}${borderColor}${chars.v}${c.reset}`;
+  });
+  output += "\n";
+  
+  // Header separator
+  output += borderColor + chars.lt;
+  output += colWidths.map(w => chars.h.repeat(w)).join(chars.cr);
+  output += chars.rt + c.reset + "\n";
+  
+  // Data rows
+  rows.forEach((row, rowIdx) => {
+    output += borderColor + chars.v + c.reset;
+    row.forEach((cell, i) => {
+      const cellStr = String(cell || "");
+      const padded = padCenter(cellStr, colWidths[i]);
+      output += `${padded}${borderColor}${chars.v}${c.reset}`;
+    });
+    output += "\n";
+  });
+  
+  // Bottom border
+  output += borderColor + chars.bl;
+  output += colWidths.map(w => chars.h.repeat(w)).join(chars.bt);
+  output += chars.br + c.reset;
+  
+  return output;
+}
+
+/**
+ * Create a beautiful progress bar
+ */
+function createProgressBar(percent, options = {}) {
+  const width = options.width || 40;
+  const showPercent = options.showPercent !== false;
+  const showLabel = options.label || "";
+  const color = options.color || c.green;
+  
+  const filled = Math.round((percent / 100) * width);
+  const empty = width - filled;
+  
+  let bar = "";
+  
+  // Gradient effect
+  for (let i = 0; i < filled; i++) {
+    const charIdx = Math.min(3, Math.floor((i / width) * 4));
+    bar += color + progressChars.gradient[charIdx];
+  }
+  bar += c.dim;
+  for (let i = 0; i < empty; i++) {
+    bar += progressChars.empty;
+  }
+  bar += c.reset;
+  
+  let output = "";
+  if (showLabel) {
+    output += `${showLabel} `;
+  }
+  output += `${c.dim}[${c.reset}${bar}${c.dim}]${c.reset}`;
+  if (showPercent) {
+    output += ` ${color}${percent.toFixed(0)}%${c.reset}`;
+  }
+  
+  return output;
+}
+
+/**
+ * Create a category score display with visual bars
+ */
+function createScoreCard(categories, options = {}) {
+  const width = options.width || 50;
+  const barWidth = options.barWidth || 25;
+  
+  let output = "";
+  
+  for (const [name, score] of Object.entries(categories)) {
+    const color = score >= 80 ? c.green : score >= 60 ? c.yellow : c.red;
+    const icon = score >= 80 ? "✓" : score >= 60 ? "!" : "✗";
+    
+    const filled = Math.round((score / 100) * barWidth);
+    const empty = barWidth - filled;
+    const bar = color + progressChars.filled.repeat(filled) + c.dim + progressChars.empty.repeat(empty) + c.reset;
+    
+    const nameStr = name.padEnd(15);
+    const scoreStr = `${score}%`.padStart(4);
+    
+    output += `  ${c.dim}${icon}${c.reset} ${nameStr} ${bar} ${color}${scoreStr}${c.reset}\n`;
+  }
+  
+  return output;
+}
+
+/**
+ * Create an interactive menu
+ */
+async function createMenu(title, options, config = {}) {
+  const menuColor = config.color || c.cyan;
+  
+  return new Promise((resolve) => {
+    console.log("");
+    console.log(createHeader(title, config.subtitle || "", { color: menuColor, style: "rounded" }));
+    console.log("");
+    
+    options.forEach((opt, i) => {
+      const num = `${i + 1}`.padStart(2);
+      const icon = opt.icon || "›";
+      console.log(`  ${menuColor}${num}${c.reset} ${icon} ${c.bold}${opt.label}${c.reset}`);
+      if (opt.description) {
+        console.log(`      ${c.dim}${opt.description}${c.reset}`);
+      }
+    });
+    
+    console.log("");
+    console.log(`  ${c.dim}${options.length + 1}. Exit${c.reset}`);
+    console.log("");
+    
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout,
+    });
+    
+    rl.question(`  ${menuColor}›${c.reset} Select an option: `, (answer) => {
+      rl.close();
+      const choice = parseInt(answer, 10);
+      
+      if (choice >= 1 && choice <= options.length) {
+        resolve(options[choice - 1]);
+      } else {
+        resolve(null);
+      }
+    });
+  });
+}
+
+/**
+ * Create a spinner
+ */
+function createSpinner(message, type = "dots") {
+  const frames = spinners[type] || spinners.dots;
+  let frameIdx = 0;
+  let interval = null;
+  
+  const spinner = {
+    start() {
+      process.stdout.write(`\n  ${frames[0]} ${message}`);
+      interval = setInterval(() => {
+        frameIdx = (frameIdx + 1) % frames.length;
+        process.stdout.write(`\r  ${c.cyan}${frames[frameIdx]}${c.reset} ${message}`);
+      }, 80);
+      return this;
+    },
+    
+    update(newMessage) {
+      message = newMessage;
+      return this;
+    },
+    
+    success(finalMessage) {
+      if (interval) clearInterval(interval);
+      process.stdout.write(`\r  ${c.green}✓${c.reset} ${finalMessage || message}\n`);
+      return this;
+    },
+    
+    error(finalMessage) {
+      if (interval) clearInterval(interval);
+      process.stdout.write(`\r  ${c.red}✗${c.reset} ${finalMessage || message}\n`);
+      return this;
+    },
+    
+    stop() {
+      if (interval) clearInterval(interval);
+      process.stdout.write("\r" + " ".repeat(message.length + 10) + "\r");
+      return this;
+    },
+  };
+  
+  return spinner;
+}
+
+/**
+ * Create a beautiful verdict display
+ */
+function createVerdictDisplay(verdict, score, options = {}) {
+  const width = options.width || 60;
+  
+  const configs = {
+    SHIP: {
+      color: c.green,
+      bgColor: c.bgGreen,
+      icon: "🚀",
+      ascii: [
+        "   ███████╗██╗  ██╗██╗██████╗ ",
+        "   ██╔════╝██║  ██║██║██╔══██╗",
+        "   ███████╗███████║██║██████╔╝",
+        "   ╚════██║██╔══██║██║██╔═══╝ ",
+        "   ███████║██║  ██║██║██║     ",
+        "   ╚══════╝╚═╝  ╚═╝╚═╝╚═╝     ",
+      ],
+      message: "Ready to ship!",
+      tagline: "All systems go. Deploy with confidence.",
+    },
+    WARN: {
+      color: c.yellow,
+      bgColor: c.bgYellow,
+      icon: "⚠️",
+      ascii: [
+        "   ██╗    ██╗ █████╗ ██████╗ ███╗   ██╗",
+        "   ██║    ██║██╔══██╗██╔══██╗████╗  ██║",
+        "   ██║ █╗ ██║███████║██████╔╝██╔██╗ ██║",
+        "   ██║███╗██║██╔══██║██╔══██╗██║╚██╗██║",
+        "   ╚███╔███╔╝██║  ██║██║  ██║██║ ╚████║",
+        "    ╚══╝╚══╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝",
+      ],
+      message: "Ship with caution",
+      tagline: "Minor issues found. Review before deploy.",
+    },
+    BLOCK: {
+      color: c.red,
+      bgColor: c.bgRed,
+      icon: "🚫",
+      ascii: [
+        "   ██████╗ ██╗      ██████╗  ██████╗██╗  ██╗",
+        "   ██╔══██╗██║     ██╔═══██╗██╔════╝██║ ██╔╝",
+        "   ██████╔╝██║     ██║   ██║██║     █████╔╝ ",
+        "   ██╔══██╗██║     ██║   ██║██║     ██╔═██╗ ",
+        "   ██████╔╝███████╗╚██████╔╝╚██████╗██║  ██╗",
+        "   ╚═════╝ ╚══════╝ ╚═════╝  ╚═════╝╚═╝  ╚═╝",
+      ],
+      message: "Do not ship!",
+      tagline: "Critical issues must be fixed first.",
+    },
+  };
+  
+  const config = configs[verdict] || configs.BLOCK;
+  
+  let output = "\n";
+  
+  // ASCII art verdict
+  for (const line of config.ascii) {
+    output += `${config.color}${line}${c.reset}\n`;
+  }
+  
+  output += "\n";
+  
+  // Score display
+  const scoreDisplay = `SCORE: ${score}`;
+  output += `   ${config.color}${c.bold}${config.icon} ${scoreDisplay}${c.reset}\n`;
+  output += `   ${c.dim}${config.tagline}${c.reset}\n`;
+  
+  return output;
+}
+
+/**
+ * Create a badge display (the stunning one)
+ */
+function createBadgeDisplay(projectId, score, verdict) {
+  const config = {
+    SHIP: { color: c.green, bg: c.bgGreen, icon: "✓", glow: "🌟" },
+    WARN: { color: c.yellow, bg: c.bgYellow, icon: "!", glow: "⚡" },
+    BLOCK: { color: c.red, bg: c.bgRed, icon: "✗", glow: "🔥" },
+  };
+  
+  const cfg = config[verdict] || config.BLOCK;
+  
+  const badge = `
+${cfg.color}${c.bold}
+    ╔══════════════════════════════════════════════════════════════╗
+    ║                                                              ║
+    ║   ${cfg.glow}  ██╗   ██╗██╗██████╗ ███████╗ ██████╗██╗  ██╗███████╗ ${cfg.glow}   ║
+    ║      ██║   ██║██║██╔══██╗██╔════╝██╔════╝██║  ██║██╔════╝      ║
+    ║      ██║   ██║██║██████╔╝█████╗  ██║     ███████║█████╗        ║
+    ║      ╚██╗ ██╔╝██║██╔══██╗██╔══╝  ██║     ██╔══██║██╔══╝        ║
+    ║       ╚████╔╝ ██║██████╔╝███████╗╚██████╗██║  ██║███████╗      ║
+    ║        ╚═══╝  ╚═╝╚═════╝ ╚══════╝ ╚═════╝╚═╝  ╚═╝╚══════╝      ║
+    ║                                                              ║
+    ║   ┌────────────────────────────────────────────────────────┐ ║
+    ║   │                                                        │ ║
+    ║   │     ${cfg.icon} ${verdict}   │   SCORE: ${String(score).padStart(3)}   │   ${projectId.substring(0, 20).padEnd(20)}     │ ║
+    ║   │                                                        │ ║
+    ║   └────────────────────────────────────────────────────────┘ ║
+    ║                                                              ║
+    ║         ════════════════════════════════════════════         ║
+    ║                    VERIFIED BY VIBECHECK                     ║
+    ║         ════════════════════════════════════════════         ║
+    ║                                                              ║
+    ╚══════════════════════════════════════════════════════════════╝
+${c.reset}`;
+
+  return badge;
+}
+
+/**
+ * Strip ANSI codes from string
+ */
+function stripAnsi(str) {
+  return str.replace(/\x1b\[[0-9;]*m/g, "");
+}
+
+/**
+ * Pad string to center
+ */
+function padCenter(str, width) {
+  const len = stripAnsi(str).length;
+  const pad = Math.max(0, width - len);
+  const padLeft = Math.floor(pad / 2);
+  const padRight = pad - padLeft;
+  return " ".repeat(padLeft) + str + " ".repeat(padRight);
+}
+
+/**
+ * Create a divider line
+ */
+function divider(width = 60, char = "─", color = c.dim) {
+  return `${color}${char.repeat(width)}${c.reset}`;
+}
+
+/**
+ * Create a section header
+ */
+function sectionHeader(title, icon = "›") {
+  return `\n${c.cyan}${icon}${c.reset} ${c.bold}${title}${c.reset}\n${divider(40)}`;
+}
+
+module.exports = {
+  colors,
+  c,
+  box,
+  spinners,
+  progressChars,
+  createHeader,
+  createTable,
+  createProgressBar,
+  createScoreCard,
+  createMenu,
+  createSpinner,
+  createVerdictDisplay,
+  createBadgeDisplay,
+  stripAnsi,
+  padCenter,
+  divider,
+  sectionHeader,
+};