@vibecheckai/cli 3.0.8 → 3.0.10

package/bin/runners/runReality.js

@@ -1,6 +1,15 @@
 /**
  * Reality Mode v2 - Two-Pass Auth Verification + Dead UI Crawler
  *
+ * ═══════════════════════════════════════════════════════════════════════════════
+ * ENTERPRISE EDITION - World-Class Terminal Experience
+ * ═══════════════════════════════════════════════════════════════════════════════
+ *
+ * TIER ENFORCEMENT:
+ * - FREE: Preview mode (5 pages, 20 clicks, no auth boundary)
+ * - STARTER: Full budgets + basic auth verification
+ * - PRO: Advanced auth boundary (multi-role, 2-pass)
+ *
  * Pass A (anon): crawl + click, record which routes look protected
  * Pass B (auth): crawl same routes using storageState, verify protected routes accessible
  *
@@ -17,6 +26,9 @@ const fs = require("fs");
 const path = require("path");
 const crypto = require("crypto");
 
+// Entitlements enforcement
+const entitlements = require("./lib/entitlements-v2");
+
 let chromium;
 let playwrightError = null;
 try {
@@ -26,6 +38,639 @@ try {
   playwrightError = e.message;
 }
 
+// ═══════════════════════════════════════════════════════════════════════════════
+// ADVANCED TERMINAL - ANSI CODES & UTILITIES
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const c = {
+  reset: '\x1b[0m',
+  bold: '\x1b[1m',
+  dim: '\x1b[2m',
+  italic: '\x1b[3m',
+  underline: '\x1b[4m',
+  blink: '\x1b[5m',
+  inverse: '\x1b[7m',
+  hidden: '\x1b[8m',
+  strike: '\x1b[9m',
+  // 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 colors
+  gray: '\x1b[90m',
+  brightRed: '\x1b[91m',
+  brightGreen: '\x1b[92m',
+  brightYellow: '\x1b[93m',
+  brightBlue: '\x1b[94m',
+  brightMagenta: '\x1b[95m',
+  brightCyan: '\x1b[96m',
+  brightWhite: '\x1b[97m',
+  // Background
+  bgBlack: '\x1b[40m',
+  bgRed: '\x1b[41m',
+  bgGreen: '\x1b[42m',
+  bgYellow: '\x1b[43m',
+  bgBlue: '\x1b[44m',
+  bgMagenta: '\x1b[45m',
+  bgCyan: '\x1b[46m',
+  bgWhite: '\x1b[47m',
+  // Cursor control
+  cursorUp: (n = 1) => `\x1b[${n}A`,
+  cursorDown: (n = 1) => `\x1b[${n}B`,
+  cursorRight: (n = 1) => `\x1b[${n}C`,
+  cursorLeft: (n = 1) => `\x1b[${n}D`,
+  clearLine: '\x1b[2K',
+  clearScreen: '\x1b[2J',
+  saveCursor: '\x1b[s',
+  restoreCursor: '\x1b[u',
+  hideCursor: '\x1b[?25l',
+  showCursor: '\x1b[?25h',
+};
+
+// True color support
+const rgb = (r, g, b) => `\x1b[38;2;${r};${g};${b}m`;
+const bgRgb = (r, g, b) => `\x1b[48;2;${r};${g};${b}m`;
+
+// Premium color palette (orange/coral theme for "reality" - testing/verification)
+const colors = {
+  // Gradient for banner
+  gradient1: rgb(255, 150, 100),   // Light coral
+  gradient2: rgb(255, 130, 80),    // Coral
+  gradient3: rgb(255, 110, 60),    // Orange-coral
+  gradient4: rgb(255, 90, 50),     // Orange
+  gradient5: rgb(255, 70, 40),     // Deep orange
+  gradient6: rgb(255, 50, 30),     // Red-orange
+  
+  // Pass colors
+  anon: rgb(150, 200, 255),        // Blue for anonymous
+  auth: rgb(100, 255, 180),        // Green for authenticated
+  
+  // Category colors
+  deadUI: rgb(255, 100, 100),      // Red for dead UI
+  authCoverage: rgb(255, 180, 100), // Orange for auth issues
+  httpError: rgb(255, 150, 50),    // Amber for HTTP errors
+  coverage: rgb(100, 200, 255),    // Blue for coverage
+  
+  // Status colors
+  success: rgb(0, 255, 150),
+  warning: rgb(255, 200, 0),
+  error: rgb(255, 80, 80),
+  info: rgb(100, 200, 255),
+  
+  // UI colors
+  accent: rgb(255, 150, 100),
+  muted: rgb(140, 120, 100),
+  subtle: rgb(100, 80, 60),
+  highlight: rgb(255, 255, 255),
+};
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// PREMIUM BANNER
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const REALITY_BANNER = `
+${rgb(255, 160, 120)}  ██████╗ ███████╗ █████╗ ██╗     ██╗████████╗██╗   ██╗${c.reset}
+${rgb(255, 140, 100)}  ██╔══██╗██╔════╝██╔══██╗██║     ██║╚══██╔══╝╚██╗ ██╔╝${c.reset}
+${rgb(255, 120, 80)}  ██████╔╝█████╗  ███████║██║     ██║   ██║    ╚████╔╝ ${c.reset}
+${rgb(255, 100, 60)}  ██╔══██╗██╔══╝  ██╔══██║██║     ██║   ██║     ╚██╔╝  ${c.reset}
+${rgb(255, 80, 40)}  ██║  ██║███████╗██║  ██║███████╗██║   ██║      ██║   ${c.reset}
+${rgb(255, 60, 20)}  ╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝╚══════╝╚═╝   ╚═╝      ╚═╝   ${c.reset}
+`;
+
+const BANNER_FULL = `
+${rgb(255, 160, 120)}  ██╗   ██╗██╗██████╗ ███████╗ ██████╗██╗  ██╗███████╗ ██████╗██╗  ██╗${c.reset}
+${rgb(255, 140, 100)}  ██║   ██║██║██╔══██╗██╔════╝██╔════╝██║  ██║██╔════╝██╔════╝██║ ██╔╝${c.reset}
+${rgb(255, 120, 80)}  ██║   ██║██║██████╔╝█████╗  ██║     ███████║█████╗  ██║     █████╔╝ ${c.reset}
+${rgb(255, 100, 60)}  ╚██╗ ██╔╝██║██╔══██╗██╔══╝  ██║     ██╔══██║██╔══╝  ██║     ██╔═██╗ ${c.reset}
+${rgb(255, 80, 40)}   ╚████╔╝ ██║██████╔╝███████╗╚██████╗██║  ██║███████╗╚██████╗██║  ██╗${c.reset}
+${rgb(255, 60, 20)}    ╚═══╝  ╚═╝╚═════╝ ╚══════╝ ╚═════╝╚═╝  ╚═╝╚══════╝ ╚═════╝╚═╝  ╚═╝${c.reset}
+
+${c.dim}  ┌─────────────────────────────────────────────────────────────────────┐${c.reset}
+${c.dim}  │${c.reset}  ${rgb(255, 150, 100)}🎭${c.reset} ${c.bold}REALITY${c.reset} ${c.dim}•${c.reset} ${rgb(200, 200, 200)}Runtime UI Proof${c.reset} ${c.dim}•${c.reset} ${rgb(150, 150, 150)}Dead UI Detection${c.reset}       ${c.dim}│${c.reset}
+${c.dim}  └─────────────────────────────────────────────────────────────────────┘${c.reset}
+`;
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// ICONS & SYMBOLS
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const ICONS = {
+  // Main
+  reality: '🎭',
+  browser: '🌐',
+  crawl: '🕷️',
+  
+  // Status
+  check: '✓',
+  cross: '✗',
+  warning: '⚠',
+  info: 'ℹ',
+  arrow: '→',
+  bullet: '•',
+  
+  // Passes
+  anon: '👤',
+  auth: '🔑',
+  pass: '✅',
+  fail: '❌',
+  
+  // Categories
+  deadUI: '💀',
+  click: '👆',
+  link: '🔗',
+  http: '📡',
+  coverage: '📊',
+  shield: '🛡️',
+  
+  // Actions
+  running: '▶',
+  complete: '●',
+  pending: '○',
+  skip: '◌',
+  
+  // Objects
+  page: '📄',
+  screenshot: '📸',
+  clock: '⏱',
+  lightning: '⚡',
+  sparkle: '✨',
+  target: '🎯',
+  eye: '👁️',
+};
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// BOX DRAWING
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const BOX = {
+  topLeft: '╭', topRight: '╮', bottomLeft: '╰', bottomRight: '╯',
+  horizontal: '─', vertical: '│',
+  teeRight: '├', teeLeft: '┤', teeDown: '┬', teeUp: '┴',
+  cross: '┼',
+  // Double line
+  dTopLeft: '╔', dTopRight: '╗', dBottomLeft: '╚', dBottomRight: '╝',
+  dHorizontal: '═', dVertical: '║',
+  // Heavy
+  hTopLeft: '┏', hTopRight: '┓', hBottomLeft: '┗', hBottomRight: '┛',
+  hHorizontal: '━', hVertical: '┃',
+};
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// SPINNER & PROGRESS
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const SPINNER_DOTS = ['⣾', '⣽', '⣻', '⢿', '⡿', '⣟', '⣯', '⣷'];
+const SPINNER_CRAWL = ['🕷️ ', ' 🕷️', '  🕷️', '   🕷️', '  🕷️', ' 🕷️'];
+
+let spinnerIndex = 0;
+let spinnerInterval = null;
+let spinnerStartTime = null;
+
+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 formatNumber(num) {
+  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+function truncate(str, len) {
+  if (!str) return '';
+  if (str.length <= len) return str;
+  return str.slice(0, len - 3) + '...';
+}
+
+function padCenter(str, width) {
+  const padding = Math.max(0, width - str.length);
+  const left = Math.floor(padding / 2);
+  const right = padding - left;
+  return ' '.repeat(left) + str + ' '.repeat(right);
+}
+
+function progressBar(percent, width = 30, opts = {}) {
+  const filled = Math.round((percent / 100) * width);
+  const empty = width - filled;
+  
+  let filledColor = opts.color || colors.accent;
+  if (!opts.color) {
+    if (percent >= 80) filledColor = colors.success;
+    else if (percent >= 50) filledColor = colors.warning;
+    else filledColor = colors.error;
+  }
+  
+  const filledChar = opts.filled || '█';
+  const emptyChar = opts.empty || '░';
+  
+  return `${filledColor}${filledChar.repeat(filled)}${c.dim}${emptyChar.repeat(empty)}${c.reset}`;
+}
+
+function startSpinner(message, color = colors.accent) {
+  spinnerStartTime = Date.now();
+  process.stdout.write(c.hideCursor);
+  
+  spinnerInterval = setInterval(() => {
+    const elapsed = formatDuration(Date.now() - spinnerStartTime);
+    process.stdout.write(`\r${c.clearLine}  ${color}${SPINNER_DOTS[spinnerIndex]}${c.reset} ${message} ${c.dim}${elapsed}${c.reset}`);
+    spinnerIndex = (spinnerIndex + 1) % SPINNER_DOTS.length;
+  }, 80);
+}
+
+function stopSpinner(message, success = true) {
+  if (spinnerInterval) {
+    clearInterval(spinnerInterval);
+    spinnerInterval = null;
+  }
+  const elapsed = spinnerStartTime ? formatDuration(Date.now() - spinnerStartTime) : '';
+  const icon = success ? `${colors.success}${ICONS.check}${c.reset}` : `${colors.error}${ICONS.cross}${c.reset}`;
+  process.stdout.write(`\r${c.clearLine}  ${icon} ${message} ${c.dim}${elapsed}${c.reset}\n`);
+  process.stdout.write(c.showCursor);
+  spinnerStartTime = null;
+}
+
+function updateSpinnerMessage(message) {
+  // Update message while spinner keeps running
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// SECTION HEADERS
+// ═══════════════════════════════════════════════════════════════════════════════
+
+function printBanner() {
+  console.log(BANNER_FULL);
+}
+
+function printCompactBanner() {
+  console.log(REALITY_BANNER);
+}
+
+function printDivider(char = '─', width = 69, color = c.dim) {
+  console.log(`${color}  ${char.repeat(width)}${c.reset}`);
+}
+
+function printSection(title, icon = '◆') {
+  console.log();
+  console.log(`  ${colors.accent}${icon}${c.reset} ${c.bold}${title}${c.reset}`);
+  printDivider();
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// PASS DISPLAY - Two-Pass Visualization
+// ═══════════════════════════════════════════════════════════════════════════════
+
+function printPassHeader(passType, url = null) {
+  const isAnon = passType === 'anon' || passType === 'ANON';
+  const config = isAnon 
+    ? { icon: ICONS.anon, name: 'PASS A: ANONYMOUS', color: colors.anon, desc: 'Crawling without authentication' }
+    : { icon: ICONS.auth, name: 'PASS B: AUTHENTICATED', color: colors.auth, desc: 'Crawling with session state' };
+  
+  console.log();
+  console.log(`  ${config.color}${BOX.hTopLeft}${BOX.hHorizontal.repeat(3)}${c.reset} ${config.icon} ${c.bold}${config.name}${c.reset}`);
+  console.log(`  ${config.color}${BOX.hVertical}${c.reset}   ${c.dim}${config.desc}${c.reset}`);
+  if (url) {
+    console.log(`  ${config.color}${BOX.hVertical}${c.reset}   ${colors.accent}${url}${c.reset}`);
+  }
+  console.log(`  ${config.color}${BOX.hBottomLeft}${BOX.hHorizontal.repeat(60)}${c.reset}`);
+}
+
+function printPassResult(passType, result) {
+  const isAnon = passType === 'anon' || passType === 'ANON';
+  const config = isAnon 
+    ? { icon: ICONS.anon, color: colors.anon }
+    : { icon: ICONS.auth, color: colors.auth };
+  
+  const pages = result.pagesVisited?.length || 0;
+  const findings = result.findings?.length || 0;
+  const blocks = result.findings?.filter(f => f.severity === 'BLOCK').length || 0;
+  const warns = result.findings?.filter(f => f.severity === 'WARN').length || 0;
+  
+  console.log();
+  console.log(`  ${config.color}${config.icon}${c.reset} ${c.bold}${isAnon ? 'Anonymous' : 'Authenticated'} Pass Complete${c.reset}`);
+  console.log(`     ${c.dim}Pages visited:${c.reset} ${colors.info}${pages}${c.reset}`);
+  console.log(`     ${c.dim}Findings:${c.reset} ${findings} ${c.dim}(${c.reset}${blocks > 0 ? colors.error : colors.success}${blocks} blockers${c.reset}${c.dim},${c.reset} ${warns > 0 ? colors.warning : colors.success}${warns} warnings${c.reset}${c.dim})${c.reset}`);
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// COVERAGE DISPLAY
+// ═══════════════════════════════════════════════════════════════════════════════
+
+function printCoverageCard(coverage, anonPages, authPages, maxPages) {
+  if (!coverage) return;
+  
+  printSection('COVERAGE', ICONS.coverage);
+  console.log();
+  
+  // UI Path Coverage
+  const pct = coverage.percent || 0;
+  const pctColor = pct >= 80 ? colors.success : pct >= 50 ? colors.warning : colors.error;
+  
+  console.log(`  ${c.bold}UI Path Coverage${c.reset}`);
+  console.log(`  ${progressBar(pct, 40)} ${pctColor}${c.bold}${pct}%${c.reset}`);
+  console.log(`  ${c.dim}${coverage.hit}/${coverage.total} paths visited${c.reset}`);
+  
+  // Pages visited breakdown
+  console.log();
+  console.log(`  ${c.bold}Pages Crawled${c.reset}`);
+  
+  const anonPct = Math.round((anonPages / maxPages) * 100);
+  console.log(`  ${ICONS.anon} ${c.dim}Anonymous:${c.reset}    ${progressBar(anonPct, 25, { color: colors.anon })} ${anonPages}/${maxPages}`);
+  
+  if (authPages !== null && authPages !== undefined) {
+    const authPct = Math.round((authPages / maxPages) * 100);
+    console.log(`  ${ICONS.auth} ${c.dim}Authenticated:${c.reset} ${progressBar(authPct, 25, { color: colors.auth })} ${authPages}/${maxPages}`);
+  }
+  
+  // Missed paths
+  if (coverage.missed && coverage.missed.length > 0) {
+    console.log();
+    console.log(`  ${c.dim}Missed paths (${coverage.missed.length}):${c.reset}`);
+    for (const missed of coverage.missed.slice(0, 5)) {
+      console.log(`    ${colors.warning}${ICONS.warning}${c.reset} ${c.dim}${truncate(missed, 50)}${c.reset}`);
+    }
+    if (coverage.missed.length > 5) {
+      console.log(`    ${c.dim}... and ${coverage.missed.length - 5} more${c.reset}`);
+    }
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// FINDINGS DISPLAY
+// ═══════════════════════════════════════════════════════════════════════════════
+
+function getSeverityStyle(severity) {
+  const styles = {
+    BLOCK: { color: colors.error, bg: bgRgb(80, 20, 20), icon: '●', label: 'BLOCKER' },
+    WARN: { color: colors.warning, bg: bgRgb(80, 60, 0), icon: '◐', label: 'WARNING' },
+    INFO: { color: colors.info, bg: bgRgb(20, 40, 60), icon: '○', label: 'INFO' },
+  };
+  return styles[severity] || styles.INFO;
+}
+
+function getCategoryIcon(category) {
+  const icons = {
+    'DeadUI': ICONS.deadUI,
+    'AuthCoverage': ICONS.shield,
+    'HTTPError': ICONS.http,
+  };
+  return icons[category] || ICONS.bullet;
+}
+
+function getCategoryColor(category) {
+  const categoryColors = {
+    'DeadUI': colors.deadUI,
+    'AuthCoverage': colors.authCoverage,
+    'HTTPError': colors.httpError,
+  };
+  return categoryColors[category] || colors.accent;
+}
+
+function printFindingsBreakdown(findings) {
+  if (!findings || findings.length === 0) {
+    printSection('FINDINGS', ICONS.check);
+    console.log();
+    console.log(`  ${colors.success}${c.bold}${ICONS.sparkle} No issues found! UI is responsive.${c.reset}`);
+    return;
+  }
+  
+  // Group by category
+  const byCategory = {};
+  for (const f of findings) {
+    const cat = f.category || 'Other';
+    if (!byCategory[cat]) byCategory[cat] = [];
+    byCategory[cat].push(f);
+  }
+  
+  const blocks = findings.filter(f => f.severity === 'BLOCK');
+  const warns = findings.filter(f => f.severity === 'WARN');
+  
+  printSection(`FINDINGS (${blocks.length} blockers, ${warns.length} warnings)`, ICONS.target);
+  console.log();
+  
+  // Summary by category
+  for (const [category, catFindings] of Object.entries(byCategory)) {
+    const catBlocks = catFindings.filter(f => f.severity === 'BLOCK').length;
+    const catWarns = catFindings.filter(f => f.severity === 'WARN').length;
+    const icon = getCategoryIcon(category);
+    const catColor = getCategoryColor(category);
+    
+    const statusIcon = catBlocks > 0 ? ICONS.cross : catWarns > 0 ? ICONS.warning : ICONS.check;
+    const statusColor = catBlocks > 0 ? colors.error : catWarns > 0 ? colors.warning : colors.success;
+    
+    console.log(`  ${statusColor}${statusIcon}${c.reset} ${icon} ${c.bold}${category.padEnd(18)}${c.reset} ${catBlocks > 0 ? `${colors.error}${catBlocks} blockers${c.reset} ` : ''}${catWarns > 0 ? `${colors.warning}${catWarns} warnings${c.reset}` : ''}`);
+  }
+}
+
+function printBlockerDetails(findings, maxShow = 6) {
+  const blockers = findings.filter(f => f.severity === 'BLOCK');
+  
+  if (blockers.length === 0) return;
+  
+  printSection(`BLOCKERS (${blockers.length})`, '🚨');
+  console.log();
+  
+  for (const blocker of blockers.slice(0, maxShow)) {
+    const style = getSeverityStyle(blocker.severity);
+    const icon = getCategoryIcon(blocker.category);
+    
+    // Severity badge
+    console.log(`  ${style.bg}${c.bold} ${style.label} ${c.reset} ${icon} ${c.bold}${truncate(blocker.title, 45)}${c.reset}`);
+    
+    // Page URL
+    if (blocker.page) {
+      console.log(`  ${' '.repeat(10)} ${colors.info}${ICONS.page} ${truncate(blocker.page, 50)}${c.reset}`);
+    }
+    
+    // Reason
+    if (blocker.reason) {
+      console.log(`  ${' '.repeat(10)} ${c.dim}${truncate(blocker.reason, 50)}${c.reset}`);
+    }
+    
+    // Screenshot
+    if (blocker.screenshot) {
+      console.log(`  ${' '.repeat(10)} ${colors.accent}${ICONS.screenshot} ${truncate(blocker.screenshot, 45)}${c.reset}`);
+    }
+    
+    console.log();
+  }
+  
+  if (blockers.length > maxShow) {
+    console.log(`  ${c.dim}... and ${blockers.length - maxShow} more blockers (see full report)${c.reset}`);
+    console.log();
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// VERDICT DISPLAY
+// ═══════════════════════════════════════════════════════════════════════════════
+
+function getVerdictConfig(blocks, warns) {
+  if (blocks === 0 && warns === 0) {
+    return {
+      verdict: 'CLEAN',
+      icon: '✅',
+      headline: 'REALITY VERIFIED',
+      tagline: 'All UI elements are responsive and functional!',
+      color: colors.success,
+      bgColor: bgRgb(0, 80, 50),
+      borderColor: rgb(0, 200, 120),
+    };
+  }
+  
+  if (blocks === 0) {
+    return {
+      verdict: 'WARN',
+      icon: '⚠️',
+      headline: 'MINOR ISSUES',
+      tagline: `${warns} warning${warns !== 1 ? 's' : ''} found - review recommended`,
+      color: colors.warning,
+      bgColor: bgRgb(80, 60, 0),
+      borderColor: rgb(200, 160, 0),
+    };
+  }
+  
+  return {
+    verdict: 'BLOCK',
+    icon: '🛑',
+    headline: 'DEAD UI DETECTED',
+    tagline: `${blocks} blocker${blocks !== 1 ? 's' : ''} must be fixed`,
+    color: colors.error,
+    bgColor: bgRgb(80, 20, 20),
+    borderColor: rgb(200, 60, 60),
+  };
+}
+
+function printVerdictCard(blocks, warns, duration) {
+  const config = getVerdictConfig(blocks, warns);
+  const w = 68;
+  
+  console.log();
+  console.log();
+  
+  // Top border
+  console.log(`  ${config.borderColor}${BOX.dTopLeft}${BOX.dHorizontal.repeat(w)}${BOX.dTopRight}${c.reset}`);
+  
+  // Empty line
+  console.log(`  ${config.borderColor}${BOX.dVertical}${c.reset}${' '.repeat(w)}${config.borderColor}${BOX.dVertical}${c.reset}`);
+  
+  // Icon and headline
+  const headlineText = `${config.icon}  ${config.headline}`;
+  const headlinePadded = padCenter(headlineText, w);
+  console.log(`  ${config.borderColor}${BOX.dVertical}${c.reset}${config.color}${c.bold}${headlinePadded}${c.reset}${config.borderColor}${BOX.dVertical}${c.reset}`);
+  
+  // Tagline
+  const taglinePadded = padCenter(config.tagline, w);
+  console.log(`  ${config.borderColor}${BOX.dVertical}${c.reset}${c.dim}${taglinePadded}${c.reset}${config.borderColor}${BOX.dVertical}${c.reset}`);
+  
+  // Empty line
+  console.log(`  ${config.borderColor}${BOX.dVertical}${c.reset}${' '.repeat(w)}${config.borderColor}${BOX.dVertical}${c.reset}`);
+  
+  // Stats row
+  const stats = `Blockers: ${blocks}  •  Warnings: ${warns}  •  Duration: ${formatDuration(duration)}`;
+  const statsPadded = padCenter(stats, w);
+  console.log(`  ${config.borderColor}${BOX.dVertical}${c.reset}${c.dim}${statsPadded}${c.reset}${config.borderColor}${BOX.dVertical}${c.reset}`);
+  
+  // Empty line
+  console.log(`  ${config.borderColor}${BOX.dVertical}${c.reset}${' '.repeat(w)}${config.borderColor}${BOX.dVertical}${c.reset}`);
+  
+  // Bottom border
+  console.log(`  ${config.borderColor}${BOX.dBottomLeft}${BOX.dHorizontal.repeat(w)}${BOX.dBottomRight}${c.reset}`);
+  
+  console.log();
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// TIER WARNING DISPLAY
+// ═══════════════════════════════════════════════════════════════════════════════
+
+function printTierWarning(tier, limits, originalMaxPages, appliedMaxPages, verifyAuthRequested, verifyAuthApplied) {
+  if (tier !== 'free') return;
+  
+  console.log();
+  console.log(`  ${colors.warning}${ICONS.warning}${c.reset} ${c.bold}FREE TIER: Preview Mode${c.reset}`);
+  
+  if (originalMaxPages > appliedMaxPages) {
+    console.log(`     ${c.dim}Pages capped:${c.reset} ${appliedMaxPages} ${c.dim}(requested ${originalMaxPages})${c.reset}`);
+  }
+  
+  if (verifyAuthRequested && !verifyAuthApplied) {
+    console.log(`     ${c.dim}Auth boundary:${c.reset} ${colors.error}disabled${c.reset} ${c.dim}(requires STARTER+)${c.reset}`);
+  }
+  
+  console.log(`     ${colors.accent}Upgrade:${c.reset} ${c.dim}https://vibecheckai.dev/pricing${c.reset}`);
+  console.log();
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// HELP DISPLAY
+// ═══════════════════════════════════════════════════════════════════════════════
+
+function printHelp() {
+  console.log(BANNER_FULL);
+  console.log(`
+  ${c.bold}Usage:${c.reset} vibecheck reality --url <url> [options]
+
+  ${c.bold}Runtime UI Verification${c.reset} — Prove your UI actually works.
+
+  ${c.bold}Two-Pass Architecture:${c.reset}
+    ${colors.anon}${ICONS.anon} Pass A (Anon)${c.reset}    Crawl without auth, record protected routes
+    ${colors.auth}${ICONS.auth} Pass B (Auth)${c.reset}    Re-crawl with session, verify access
+
+  ${c.bold}What It Detects:${c.reset}
+    ${colors.deadUI}${ICONS.deadUI} Dead UI${c.reset}        Clicks that do nothing
+    ${colors.authCoverage}${ICONS.shield} Auth Gaps${c.reset}      Protected routes accessible anonymously
+    ${colors.httpError}${ICONS.http} HTTP Errors${c.reset}   4xx/5xx responses
+
+  ${c.bold}Options:${c.reset}
+    ${colors.accent}--url, -u <url>${c.reset}           Base URL for testing ${c.dim}(required)${c.reset}
+    ${colors.accent}--auth <email:pass>${c.reset}      Login credentials for auth verification
+    ${colors.accent}--storage-state <path>${c.reset}   Playwright session state file
+    ${colors.accent}--save-storage-state <p>${c.reset} Save session after login
+    ${colors.accent}--truthpack <path>${c.reset}       Custom truthpack path
+    ${colors.accent}--verify-auth${c.reset}            Enable two-pass auth verification
+    ${colors.accent}--headed${c.reset}                 Run browser visible ${c.dim}(for debugging)${c.reset}
+    ${colors.accent}--danger${c.reset}                 Allow clicking destructive elements
+    ${colors.accent}--max-pages <n>${c.reset}          Max pages to crawl ${c.dim}(default: 18)${c.reset}
+    ${colors.accent}--max-depth <n>${c.reset}          Max crawl depth ${c.dim}(default: 2)${c.reset}
+    ${colors.accent}--timeout <ms>${c.reset}           Page timeout ${c.dim}(default: 15000)${c.reset}
+    ${colors.accent}--help, -h${c.reset}               Show this help
+
+  ${c.bold}Tier Limits:${c.reset}
+    ${c.dim}FREE${c.reset}      5 pages, no auth boundary
+    ${c.dim}STARTER${c.reset}   Full budgets + basic auth
+    ${c.dim}PRO${c.reset}       Advanced auth (multi-role)
+
+  ${c.bold}Exit Codes:${c.reset}
+    ${colors.success}0${c.reset}  CLEAN — No issues found
+    ${colors.warning}1${c.reset}  WARN  — Warnings found
+    ${colors.error}2${c.reset}  BLOCK — Blockers found (dead UI, auth gaps)
+
+  ${c.bold}Examples:${c.reset}
+    ${c.dim}# Basic crawl${c.reset}
+    vibecheck reality --url http://localhost:3000
+
+    ${c.dim}# With auth verification${c.reset}
+    vibecheck reality --url http://localhost:3000 --verify-auth --auth user@test.com:pass
+
+    ${c.dim}# Debug mode (visible browser)${c.reset}
+    vibecheck reality --url http://localhost:3000 --headed
+
+    ${c.dim}# Allow destructive actions${c.reset}
+    vibecheck reality --url http://localhost:3000 --danger
+  `);
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// UTILITY FUNCTIONS (preserved from original)
+// ═══════════════════════════════════════════════════════════════════════════════
+
 function ensureDir(p) {
   fs.mkdirSync(p, { recursive: true });
 }
@@ -216,7 +861,7 @@ async function attemptLogin(page, { auth }) {
   }
 }
 
-async function runSinglePass({ label, baseUrl, context, shotsDir, danger, maxPages, maxDepth, timeoutMs, root }) {
+async function runSinglePass({ label, baseUrl, context, shotsDir, danger, maxPages, maxDepth, timeoutMs, root, onProgress }) {
   const page = await context.newPage();
   page.setDefaultTimeout(timeoutMs);
 
@@ -244,6 +889,11 @@ async function runSinglePass({ label, baseUrl, context, shotsDir, danger, maxPag
 
     visited.add(targetUrl);
 
+    // Progress callback
+    if (onProgress) {
+      onProgress({ page: pagesVisited.length + 1, maxPages, url: targetUrl });
+    }
+
     const res = await page.goto(targetUrl, { waitUntil: "domcontentloaded" }).catch(() => null);
     await page.waitForLoadState("networkidle", { timeout: 6000 }).catch(() => {});
 
@@ -371,44 +1021,9 @@ function coverageFromTruthpack({ truthpack, visitedUrls }) {
   return { total, hit, percent: total ? Math.round((hit / total) * 100) : 0, missed: Array.from(uiPaths).filter(p => !visitedPaths.has(p)).slice(0, 50) };
 }
 
-function printHelp() {
-  console.log(`
-vibecheck reality - Runtime UI Verification
-
-USAGE
-  vibecheck reality --url <url> [options]
-
-OPTIONS
-  --url, -u <url>           Base URL for runtime testing (required)
-  --auth <email:pass>       Login credentials for auth verification
-  --storage-state <path>    Playwright session state file
-  --save-storage-state <p>  Save session state after login
-  --truthpack <path>        Custom truthpack path
-  --verify-auth             Enable two-pass auth verification
-  --headed                  Run browser in headed mode (visible)
-  --danger                  Allow clicking potentially destructive elements
-  --max-pages <n>           Max pages to crawl (default: 18)
-  --max-depth <n>           Max crawl depth (default: 2)
-  --timeout <ms>            Page timeout (default: 15000)
-  --help, -h                Show this help
-
-WHAT IT DOES
-  1. Pass A (Anon): Crawls and clicks, records protected routes
-  2. Pass B (Auth): Re-crawls with auth, verifies access
-  3. Detects dead UI (clicks that do nothing)
-  4. Calculates route coverage stats
-
-FINDINGS
-  - Dead UI → FIX_DEAD_UI mission
-  - Auth gaps → ADD_SERVER_AUTH mission
-  - HTTP errors → error findings
-
-EXAMPLES
-  vibecheck reality --url http://localhost:3000
-  vibecheck reality --url http://localhost:3000 --verify-auth --auth user@test.com:pass123
-  vibecheck reality --url http://localhost:3000 --headed --danger
-`);
-}
+// ═══════════════════════════════════════════════════════════════════════════════
+// MAIN REALITY FUNCTION
+// ═══════════════════════════════════════════════════════════════════════════════
 
 async function runReality(argsOrOpts = {}) {
   // Handle array args from CLI
@@ -440,7 +1055,7 @@ async function runReality(argsOrOpts = {}) {
     };
   }
 
-  const {
+  let {
     repoRoot,
     url,
     auth,
@@ -457,17 +1072,67 @@ async function runReality(argsOrOpts = {}) {
 
   if (!url) {
     printHelp();
-    console.log("\n❌ Error: --url is required\n");
+    console.log(`\n  ${colors.error}${ICONS.cross}${c.reset} ${c.bold}Error:${c.reset} --url is required\n`);
     return 1;
   }
+  
+  const root = repoRoot || process.cwd();
+  const projectName = path.basename(root);
+  const startTime = Date.now();
+  const originalMaxPages = maxPages;
+  const originalVerifyAuth = verifyAuth;
+  
+  // TIER ENFORCEMENT
+  let tierInfo = { tier: 'free', limits: {} };
+  try {
+    const access = await entitlements.enforce("reality", {
+      projectPath: root,
+      silent: true,
+    });
+    
+    tierInfo = access;
+    const limits = access.limits || entitlements.getLimits(access.tier);
+    
+    // Apply tier-based caps
+    if (access.downgrade === "reality.preview" || access.tier === "free") {
+      const previewMax = limits.realityMaxPages || 5;
+      if (maxPages > previewMax) {
+        maxPages = previewMax;
+      }
+      
+      if (verifyAuth && !limits.realityAuthBoundary) {
+        verifyAuth = false;
+      }
+    }
+  } catch (e) {
+    // Continue with defaults if entitlements unavailable
+  }
+
+  // Print banner
+  printBanner();
+  
+  console.log(`  ${c.dim}Project:${c.reset}  ${c.bold}${projectName}${c.reset}`);
+  console.log(`  ${c.dim}URL:${c.reset}      ${colors.accent}${url}${c.reset}`);
+  console.log(`  ${c.dim}Mode:${c.reset}     ${verifyAuth ? `${colors.auth}Two-Pass (Auth)${c.reset}` : `${colors.anon}Single-Pass (Anon)${c.reset}`}`);
+  console.log(`  ${c.dim}Budget:${c.reset}   ${maxPages} pages, depth ${maxDepth}`);
+  
+  // Tier warning if applicable
+  if (tierInfo.tier === 'free' && (originalMaxPages > maxPages || (originalVerifyAuth && !verifyAuth))) {
+    printTierWarning(tierInfo.tier, tierInfo.limits, originalMaxPages, maxPages, originalVerifyAuth, verifyAuth);
+  }
+
+  // Playwright check
   if (!chromium) {
     const hint = playwrightError?.includes("Cannot find module") 
       ? "Run: npm i -D playwright && npx playwright install chromium"
       : `Playwright error: ${playwrightError || "unknown"}`;
-    throw new Error(`Playwright not available. ${hint}`);
+    console.log();
+    console.log(`  ${colors.error}${ICONS.cross}${c.reset} ${c.bold}Playwright not available${c.reset}`);
+    console.log(`  ${c.dim}${hint}${c.reset}`);
+    console.log();
+    return 1;
   }
 
-  const root = repoRoot || process.cwd();
   const baseUrl = normalizeUrl(url);
   const outBase = path.join(root, ".vibecheck", "reality", stamp());
   const shotsDir = path.join(outBase, "screenshots");
@@ -475,20 +1140,54 @@ async function runReality(argsOrOpts = {}) {
 
   const tp = loadTruthpack(root, truthpack);
   const matchers = getProtectedMatchersFromTruthpack(tp);
+  
+  if (tp) {
+    console.log(`  ${c.dim}Truthpack:${c.reset} ${colors.success}${ICONS.check}${c.reset} loaded (${matchers.length} protected patterns)`);
+  }
 
+  // Launch browser
+  console.log();
+  startSpinner('Launching browser...', colors.accent);
   const browser = await chromium.launch({ headless: !headed });
-
-  // Pass A: Anon
+  stopSpinner('Browser launched', true);
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // PASS A: ANONYMOUS
+  // ═══════════════════════════════════════════════════════════════════════════
+  printPassHeader('anon', baseUrl);
+  
+  startSpinner('Crawling anonymously...', colors.anon);
   const anonContext = await browser.newContext();
-  const anonPass = await runSinglePass({ label: "ANON", baseUrl, context: anonContext, shotsDir, danger, maxPages, maxDepth, timeoutMs, root });
+  const anonPass = await runSinglePass({ 
+    label: "ANON", 
+    baseUrl, 
+    context: anonContext, 
+    shotsDir, 
+    danger, 
+    maxPages, 
+    maxDepth, 
+    timeoutMs, 
+    root,
+    onProgress: ({ page, maxPages: mp, url: currentUrl }) => {
+      // Could update spinner here if desired
+    }
+  });
   await anonContext.close();
+  stopSpinner(`Crawled ${anonPass.pagesVisited.length} pages`, true);
+  
+  printPassResult('anon', anonPass);
 
-  // Pass B: Auth (optional)
+  // ═══════════════════════════════════════════════════════════════════════════
+  // PASS B: AUTHENTICATED (optional)
+  // ═══════════════════════════════════════════════════════════════════════════
   let authPass = null;
   let authFindings = [];
   let savedStatePath = null;
 
   if (verifyAuth) {
+    printPassHeader('auth', baseUrl);
+    
+    startSpinner('Setting up authenticated session...', colors.auth);
     const ctxOpts = storageState ? { storageState } : {};
     const authContext = await browser.newContext(ctxOpts);
     const authPage = await authContext.newPage();
@@ -496,34 +1195,73 @@ async function runReality(argsOrOpts = {}) {
     await authPage.waitForLoadState("networkidle", { timeout: 6000 }).catch(() => {});
 
     if (!storageState && auth) {
+      stopSpinner('Attempting login...', true);
+      startSpinner('Logging in...', colors.auth);
+      
       const loginRes = await attemptLogin(authPage, { auth });
-      if (loginRes.ok && saveStorageState) {
-        const dest = path.isAbsolute(saveStorageState) ? saveStorageState : path.join(root, saveStorageState);
-        ensureDir(path.dirname(dest));
-        await authContext.storageState({ path: dest }).catch(() => {});
-        savedStatePath = dest;
+      
+      if (loginRes.ok) {
+        stopSpinner('Login successful', true);
+        if (saveStorageState) {
+          const dest = path.isAbsolute(saveStorageState) ? saveStorageState : path.join(root, saveStorageState);
+          ensureDir(path.dirname(dest));
+          await authContext.storageState({ path: dest }).catch(() => {});
+          savedStatePath = dest;
+          console.log(`    ${colors.success}${ICONS.check}${c.reset} Session saved: ${c.dim}${path.relative(root, dest)}${c.reset}`);
+        }
+      } else {
+        stopSpinner('Login failed - continuing without auth', false);
       }
+    } else {
+      stopSpinner('Using existing session', true);
     }
+    
     await authPage.close();
 
-    authPass = await runSinglePass({ label: "AUTH", baseUrl, context: authContext, shotsDir, danger, maxPages, maxDepth, timeoutMs, root });
+    startSpinner('Crawling with authentication...', colors.auth);
+    authPass = await runSinglePass({ 
+      label: "AUTH", 
+      baseUrl, 
+      context: authContext, 
+      shotsDir, 
+      danger, 
+      maxPages, 
+      maxDepth, 
+      timeoutMs, 
+      root 
+    });
     await authContext.close();
+    stopSpinner(`Crawled ${authPass.pagesVisited.length} pages`, true);
+    
+    printPassResult('auth', authPass);
 
+    // Build auth coverage findings
     if (matchers.length) {
+      startSpinner('Analyzing auth coverage...', colors.authCoverage);
       authFindings = buildAuthCoverageFindings({ baseUrl, matchers, anonPass, authPass });
+      stopSpinner(`Found ${authFindings.length} auth issues`, authFindings.length === 0);
     }
   }
 
   await browser.close();
 
+  // ═══════════════════════════════════════════════════════════════════════════
+  // ANALYSIS & RESULTS
+  // ═══════════════════════════════════════════════════════════════════════════
+  
   const allVisited = [...anonPass.pagesVisited.map(p => p.url), ...(authPass?.pagesVisited || []).map(p => p.url)];
   const coverage = coverageFromTruthpack({ truthpack: tp, visitedUrls: allVisited });
 
   const findings = [...anonPass.findings, ...(authPass?.findings || []), ...authFindings];
+  const blocks = findings.filter(f => f.severity === "BLOCK").length;
+  const warns = findings.filter(f => f.severity === "WARN").length;
 
+  // Build report
   const report = {
     meta: {
-      startedAt: new Date().toISOString(),
+      startedAt: new Date(startTime).toISOString(),
+      finishedAt: new Date().toISOString(),
+      durationMs: Date.now() - startTime,
       baseUrl,
       verifyAuth,
       maxPages,
@@ -539,6 +1277,7 @@ async function runReality(argsOrOpts = {}) {
     networkErrors: [...anonPass.networkErrors, ...(authPass?.networkErrors || [])].slice(0, 50)
   };
 
+  // Write reports
   fs.writeFileSync(path.join(outBase, "reality_report.json"), JSON.stringify(report, null, 2), "utf8");
 
   const latestDir = path.join(root, ".vibecheck", "reality");
@@ -546,18 +1285,45 @@ async function runReality(argsOrOpts = {}) {
   fs.writeFileSync(path.join(latestDir, "latest.json"), JSON.stringify({ latest: path.relative(root, outBase).replace(/\\/g, "/") }, null, 2));
   fs.writeFileSync(path.join(latestDir, "last_reality.json"), JSON.stringify(report, null, 2), "utf8");
 
-  const blocks = findings.filter(f => f.severity === "BLOCK").length;
-  const warns = findings.filter(f => f.severity === "WARN").length;
-
-  console.log(`\n🧪 vibecheck reality`);
-  console.log(`Anon visited: ${anonPass.pagesVisited.length}/${maxPages}`);
-  if (verifyAuth) console.log(`Auth visited: ${authPass?.pagesVisited?.length || 0}/${maxPages}`);
-  if (coverage) console.log(`Coverage: ${coverage.percent}% of UI paths (${coverage.hit}/${coverage.total})`);
-  console.log(`Findings: ${findings.length} (${blocks} BLOCK, ${warns} WARN)`);
-  console.log(`Report: .vibecheck/reality/${path.basename(outBase)}/reality_report.json`);
-  console.log(`Verdict: ${blocks ? "🛑 BLOCK" : warns ? "⚠️ WARN" : "✅ CLEAN"}`);
+  const duration = Date.now() - startTime;
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // OUTPUT
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  // Coverage card
+  printCoverageCard(coverage, anonPass.pagesVisited.length, authPass?.pagesVisited?.length, maxPages);
+  
+  // Findings breakdown
+  printFindingsBreakdown(findings);
+  
+  // Blocker details
+  printBlockerDetails(findings);
+  
+  // Verdict card
+  printVerdictCard(blocks, warns, duration);
+  
+  // Report links
+  printSection('REPORTS', ICONS.page);
+  console.log();
+  console.log(`  ${colors.accent}${path.relative(root, outBase)}/reality_report.json${c.reset}`);
+  console.log(`  ${c.dim}${path.join('.vibecheck', 'reality', 'last_reality.json')}${c.reset}`);
+  if (anonPass.findings.some(f => f.screenshot) || authPass?.findings?.some(f => f.screenshot)) {
+    console.log(`  ${colors.accent}${ICONS.screenshot} ${path.relative(root, shotsDir)}/${c.reset} ${c.dim}(screenshots)${c.reset}`);
+  }
+  console.log();
+  
+  // Next steps if issues found
+  if (blocks > 0 || warns > 0) {
+    printSection('NEXT STEPS', ICONS.lightning);
+    console.log();
+    console.log(`  ${colors.accent}vibecheck fix${c.reset}  ${c.dim}Auto-fix dead UI issues${c.reset}`);
+    console.log(`  ${colors.accent}vibecheck ship${c.reset} ${c.dim}Re-check ship readiness${c.reset}`);
+    console.log();
+  }
 
   process.exitCode = blocks ? 2 : warns ? 1 : 0;
+  return process.exitCode;
 }
 
-module.exports = { runReality };
+module.exports = { runReality };