@vibecheckai/cli 3.2.2 → 3.2.3

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

@@ -7,16 +7,21 @@
  * - Components: Spinners, Progress Bars, Tables, Headers
  */
 
-import process from 'process';
+"use strict";
 
 // ═══════════════════════════════════════════════════════════════════════════════
 // 1. CORE CONSTANTS & ANSI
 // ═══════════════════════════════════════════════════════════════════════════════
 
-export const WIDTH = 76;
+const WIDTH = 76;
 
 const ESC = '\x1b';
-export const ansi = {
+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`,
@@ -31,6 +36,9 @@ export const ansi = {
   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`,
@@ -46,21 +54,21 @@ export const ansi = {
 };
 
 // Semantic Palette
-export const style = {
-  success: (t: string) => `${ansi.green}${t}${ansi.reset}`,
-  error: (t: string) => `${ansi.red}${t}${ansi.reset}`,
-  warning: (t: string) => `${ansi.yellow}${t}${ansi.reset}`,
-  info: (t: string) => `${ansi.cyan}${t}${ansi.reset}`,
-  subtle: (t: string) => `${ansi.gray}${t}${ansi.reset}`,
-  highlight: (t: string) => `${ansi.bold}${ansi.white}${t}${ansi.reset}`,
-  label: (t: string) => `${ansi.blue}${t}${ansi.reset}`,
+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: string) => `${ansi.bgGreen}${ansi.bold}${ansi.white} ${t} ${ansi.reset}`,
-  bgError: (t: string) => `${ansi.bgRed}${ansi.bold}${ansi.white} ${t} ${ansi.reset}`,
-  bgWarn: (t: string) => `${ansi.bgYellow}${ansi.bold}${ansi.white} ${t} ${ansi.reset}`,
+  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}`,
 };
 
-export const icons = {
+const icons = {
   success: '✓',
   error: '✗',
   warning: '⚠',
@@ -78,7 +86,7 @@ export const icons = {
 // 2. LAYOUT PRIMITIVES (The "Grid")
 // ═══════════════════════════════════════════════════════════════════════════════
 
-export const BOX = {
+const BOX = {
   // Outer Frame (Double)
   tl: '╔', tr: '╗', bl: '╚', br: '╝', h: '═', v: '║',
   trT: '╠', tlT: '╣',
@@ -90,7 +98,7 @@ export const BOX = {
 /**
  * Centers text within the standard width, accounting for ANSI codes
  */
-export function padCenter(str: string, width: number = WIDTH - 2): string {
+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);
@@ -100,7 +108,7 @@ export function padCenter(str: string, width: number = WIDTH - 2): string {
 /**
  * Pads text to the right, accounting for ANSI codes
  */
-export function padRight(str: string, len: number): string {
+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;
@@ -110,7 +118,7 @@ export function padRight(str: string, len: number): string {
 /**
  * Truncates text with ellipsis
  */
-export function truncate(str: string, len: number): string {
+function truncate(str, len) {
   if (!str) return '';
   const clean = str.replace(/\u001b\[\d+m/g, '');
   if (clean.length <= len) return str;
@@ -123,13 +131,15 @@ export function truncate(str: string, len: number): string {
 
 const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
 
-export class Spinner {
-  private timer: NodeJS.Timeout | null = null;
-  private frameIndex = 0;
-  
-  constructor(public text: string = '', private colorStr = ansi.cyan) {}
+class Spinner {
+  constructor(text = '', colorStr = ansi.cyan) {
+    this.text = text;
+    this.colorStr = colorStr;
+    this.timer = null;
+    this.frameIndex = 0;
+  }
 
-  start(text?: string) {
+  start(text) {
     if (text) this.text = text;
     process.stdout.write(ansi.hideCursor);
     this.timer = setInterval(() => {
@@ -140,7 +150,7 @@ export class Spinner {
     return this;
   }
 
-  stop(symbol = icons.success, color = ansi.green, finalMsg?: string) {
+  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
@@ -151,16 +161,16 @@ export class Spinner {
     return this;
   }
 
-  succeed(text?: string) { return this.stop(icons.success, ansi.green, text); }
-  fail(text?: string) { return this.stop(icons.error, ansi.red, text); }
-  warn(text?: string) { return this.stop(icons.warning, ansi.yellow, text); }
+  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
 // ═══════════════════════════════════════════════════════════════════════════════
 
-export function renderProgressBar(percentage: number, width = 20, color = ansi.green): string {
+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}`;
 }
@@ -172,13 +182,8 @@ export function renderProgressBar(percentage: number, width = 20, color = ansi.g
 /**
  * Renders the Standard Double-Border Header with Logo
  */
-export function renderScreenHeader(
-  logoAscii: string, 
-  title: string, 
-  logoColor: (t: string) => string = (t) => t,
-  context?: { label: string, value: string }
-) {
-  const lines: string[] = [];
+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);
@@ -215,19 +220,15 @@ export function renderScreenHeader(
 /**
  * Renders the Standard Footer
  */
-export function renderScreenFooter() {
+function renderScreenFooter() {
   console.log(ansi.gray + BOX.bl + BOX.h.repeat(WIDTH - 2) + BOX.br + ansi.reset);
 }
 
 /**
  * Renders a Standard Verdict/Telemetry Table
  */
-export function renderVerdictTable(
-  stats: { duration: number, heap: number, files?: number },
-  score: number,
-  findings: any[]
-) {
-  const lines: string[] = [];
+function renderVerdictTable(stats, score, findings) {
+  const lines = [];
 
   // Telemetry Row
   const heapMB = Math.round(stats.heap / 1024 / 1024);
@@ -268,4 +269,83 @@ export function renderVerdictTable(
 
   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,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibecheckai/cli",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "description": "Vibecheck CLI - Ship with confidence. One verdict: SHIP | WARN | BLOCK.",
   "main": "bin/vibecheck.js",
   "bin": {