@vibecheckai/cli 3.4.0 → 3.5.0

package/bin/runners/lib/cli-scan-cards.js

@@ -0,0 +1,362 @@
+/**
+ * CLI Scan Cards - Beautiful scan result cards for Vibecheck CLI
+ * 
+ * Provides:
+ * - Verdict cards with scores
+ * - Finding summary cards
+ * - Quick stat cards
+ * - Comparison cards (before/after)
+ * - Badge generation
+ */
+
+"use strict";
+
+const {
+  ansi,
+  sym,
+  box,
+  padRight,
+  padLeft,
+  center,
+  truncate,
+  visibleLength,
+  progressBar,
+  getTierBadge,
+  formatDuration,
+} = require("./unified-cli-output");
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// VERDICT CARD (Full)
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Display a full verdict card
+ * @param {Object} result - Scan result
+ */
+function verdictCard(result) {
+  const {
+    verdict,
+    score,
+    findings = [],
+    duration,
+    filesScanned,
+    projectName,
+  } = result;
+
+  const width = 60;
+  const lines = [];
+
+  // Verdict colors
+  const verdictConfig = {
+    SHIP: { bg: ansi.bgGreen, fg: ansi.green, icon: sym.rocket, message: 'Ready to ship!' },
+    PASS: { bg: ansi.bgGreen, fg: ansi.green, icon: sym.check, message: 'All checks passed' },
+    WARN: { bg: ansi.bgYellow, fg: ansi.yellow, icon: sym.warning, message: 'Review recommended' },
+    BLOCK: { bg: ansi.bgRed, fg: ansi.red, icon: sym.cross, message: 'Critical issues found' },
+    FAIL: { bg: ansi.bgRed, fg: ansi.red, icon: sym.cross, message: 'Scan failed' },
+  };
+
+  const config = verdictConfig[verdict] || verdictConfig.WARN;
+  const borderColor = config.fg;
+
+  // Top border
+  lines.push(`  ${borderColor}${box.dTopLeft}${box.dHorizontal.repeat(width - 2)}${box.dTopRight}${ansi.reset}`);
+  lines.push(`  ${borderColor}${box.dVertical}${ansi.reset}${' '.repeat(width - 2)}${borderColor}${box.dVertical}${ansi.reset}`);
+
+  // Verdict badge
+  const badge = `${config.bg}${ansi.bold}${ansi.white} ${verdict} ${ansi.reset}`;
+  const badgeLine = center(`${badge}  ${config.icon} ${config.message}`, width - 2 + 15); // +15 for ANSI codes
+  lines.push(`  ${borderColor}${box.dVertical}${ansi.reset}${badgeLine}${borderColor}${box.dVertical}${ansi.reset}`);
+  
+  lines.push(`  ${borderColor}${box.dVertical}${ansi.reset}${' '.repeat(width - 2)}${borderColor}${box.dVertical}${ansi.reset}`);
+
+  // Score with progress bar
+  if (score !== undefined) {
+    const scoreColor = score >= 80 ? ansi.green : score >= 60 ? ansi.yellow : ansi.red;
+    const scoreLine = `Health Score: ${scoreColor}${ansi.bold}${score}${ansi.reset}/100`;
+    lines.push(`  ${borderColor}${box.dVertical}${ansi.reset}  ${scoreLine}${' '.repeat(width - visibleLength(scoreLine) - 6)}${borderColor}${box.dVertical}${ansi.reset}`);
+    
+    const bar = progressBar(score, 40, { showPercent: false });
+    lines.push(`  ${borderColor}${box.dVertical}${ansi.reset}  ${bar}${' '.repeat(width - 44)}${borderColor}${box.dVertical}${ansi.reset}`);
+  }
+
+  // Divider
+  lines.push(`  ${borderColor}${box.dTeeLeft}${box.dHorizontal.repeat(width - 2)}${box.dTeeRight}${ansi.reset}`);
+
+  // Stats row
+  const statsLine = [
+    `${sym.file} ${filesScanned || '?'} files`,
+    `${sym.warning} ${findings.length} issues`,
+    `${sym.clock} ${formatDuration(duration || 0)}`,
+  ].join('  │  ');
+  lines.push(`  ${borderColor}${box.dVertical}${ansi.reset}  ${ansi.dim}${statsLine}${ansi.reset}${' '.repeat(width - visibleLength(statsLine) - 6)}${borderColor}${box.dVertical}${ansi.reset}`);
+
+  // Severity breakdown
+  if (findings.length > 0) {
+    const critical = findings.filter(f => f.severity === 'critical').length;
+    const high = findings.filter(f => f.severity === 'high').length;
+    const medium = findings.filter(f => f.severity === 'medium').length;
+    const low = findings.filter(f => f.severity === 'low').length;
+
+    const sevLine = [
+      critical > 0 ? `${ansi.red}${critical} critical${ansi.reset}` : null,
+      high > 0 ? `${ansi.yellow}${high} high${ansi.reset}` : null,
+      medium > 0 ? `${ansi.yellow}${medium} medium${ansi.reset}` : null,
+      low > 0 ? `${ansi.blue}${low} low${ansi.reset}` : null,
+    ].filter(Boolean).join(', ');
+
+    if (sevLine) {
+      lines.push(`  ${borderColor}${box.dVertical}${ansi.reset}  ${sevLine}${' '.repeat(width - visibleLength(sevLine) - 6)}${borderColor}${box.dVertical}${ansi.reset}`);
+    }
+  }
+
+  // Bottom border
+  lines.push(`  ${borderColor}${box.dBottomLeft}${box.dHorizontal.repeat(width - 2)}${box.dBottomRight}${ansi.reset}`);
+
+  return lines.join('\n');
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// COMPACT VERDICT
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Display a compact verdict line
+ * @param {Object} result - Scan result
+ */
+function compactVerdict(result) {
+  const { verdict, score, findings = [], duration } = result;
+
+  const verdictBadges = {
+    SHIP: `${ansi.bgGreen}${ansi.bold}${ansi.white} SHIP ${ansi.reset}`,
+    PASS: `${ansi.bgGreen}${ansi.bold}${ansi.white} PASS ${ansi.reset}`,
+    WARN: `${ansi.bgYellow}${ansi.bold} WARN ${ansi.reset}`,
+    BLOCK: `${ansi.bgRed}${ansi.bold}${ansi.white} BLOCK ${ansi.reset}`,
+    FAIL: `${ansi.bgRed}${ansi.bold}${ansi.white} FAIL ${ansi.reset}`,
+  };
+
+  const badge = verdictBadges[verdict] || verdictBadges.WARN;
+  const scoreStr = score !== undefined ? `${score}/100` : '';
+  const issueCount = findings.length;
+  const durationStr = duration ? formatDuration(duration) : '';
+
+  return `  ${badge} Score: ${scoreStr} │ ${issueCount} issues │ ${durationStr}`;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// FINDING CARD
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Display a single finding card
+ * @param {Object} finding - Finding object
+ * @param {number} index - Finding index
+ */
+function findingCard(finding, index) {
+  const {
+    severity,
+    category,
+    message,
+    file,
+    line,
+    suggestion,
+  } = finding;
+
+  const sevConfig = {
+    critical: { color: ansi.red, icon: sym.critical, bg: ansi.bgRed },
+    high: { color: ansi.yellow, icon: sym.high, bg: ansi.bgYellow },
+    medium: { color: ansi.yellow, icon: sym.medium, bg: ansi.bgYellow },
+    low: { color: ansi.blue, icon: sym.low, bg: ansi.bgBlue },
+    info: { color: ansi.gray, icon: sym.info, bg: ansi.gray },
+  };
+
+  const config = sevConfig[severity] || sevConfig.info;
+  const width = 65;
+  const lines = [];
+
+  // Header with severity badge
+  const badge = `${config.bg}${ansi.bold}${ansi.white} ${(severity || 'INFO').toUpperCase()} ${ansi.reset}`;
+  const indexStr = index !== undefined ? `#${index + 1} ` : '';
+  lines.push(`  ${indexStr}${badge} ${config.icon} ${ansi.bold}${category || 'Issue'}${ansi.reset}`);
+  
+  // Message
+  lines.push(`    ${message}`);
+  
+  // File location
+  if (file) {
+    const location = line ? `${file}:${line}` : file;
+    lines.push(`    ${ansi.dim}${sym.file} ${location}${ansi.reset}`);
+  }
+  
+  // Suggestion
+  if (suggestion) {
+    lines.push(`    ${ansi.cyan}${sym.pointer}${ansi.reset} ${ansi.dim}Fix:${ansi.reset} ${suggestion}`);
+  }
+  
+  lines.push('');
+
+  return lines.join('\n');
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// STATS CARD
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Display a stats card
+ * @param {Array<{label: string, value: string|number, icon?: string, trend?: number}>} stats
+ */
+function statsCard(stats, options = {}) {
+  const { title = 'Statistics', columns = 2 } = options;
+  const width = 60;
+  const lines = [];
+
+  lines.push(`  ${ansi.gray}${box.topLeft}${box.horizontal.repeat(width - 2)}${box.topRight}${ansi.reset}`);
+  lines.push(`  ${ansi.gray}${box.vertical}${ansi.reset} ${ansi.bold}${title}${ansi.reset}${' '.repeat(width - title.length - 4)}${ansi.gray}${box.vertical}${ansi.reset}`);
+  lines.push(`  ${ansi.gray}${box.vertical}${box.horizontal.repeat(width - 2)}${box.vertical}${ansi.reset}`);
+
+  // Render stats in columns
+  const colWidth = Math.floor((width - 4) / columns);
+  
+  for (let i = 0; i < stats.length; i += columns) {
+    let row = `  ${ansi.gray}${box.vertical}${ansi.reset}`;
+    
+    for (let j = 0; j < columns; j++) {
+      const stat = stats[i + j];
+      if (stat) {
+        const icon = stat.icon ? `${stat.icon} ` : '';
+        const trend = stat.trend !== undefined 
+          ? stat.trend > 0 
+            ? ` ${ansi.green}↑${ansi.reset}` 
+            : stat.trend < 0 
+              ? ` ${ansi.red}↓${ansi.reset}` 
+              : ''
+          : '';
+        const cell = ` ${icon}${ansi.dim}${stat.label}:${ansi.reset} ${ansi.bold}${stat.value}${ansi.reset}${trend}`;
+        row += padRight(cell, colWidth + 10); // +10 for ANSI codes
+      } else {
+        row += ' '.repeat(colWidth);
+      }
+    }
+    
+    row += `${ansi.gray}${box.vertical}${ansi.reset}`;
+    lines.push(row);
+  }
+
+  lines.push(`  ${ansi.gray}${box.bottomLeft}${box.horizontal.repeat(width - 2)}${box.bottomRight}${ansi.reset}`);
+
+  return lines.join('\n');
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// COMPARISON CARD
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Display a before/after comparison card
+ * @param {Object} before - Before result
+ * @param {Object} after - After result
+ */
+function comparisonCard(before, after) {
+  const width = 60;
+  const lines = [];
+
+  lines.push(`  ${ansi.gray}${box.topLeft}${box.horizontal.repeat(width - 2)}${box.topRight}${ansi.reset}`);
+  lines.push(`  ${ansi.gray}${box.vertical}${ansi.reset} ${ansi.bold}Before vs After${ansi.reset}${' '.repeat(width - 18)}${ansi.gray}${box.vertical}${ansi.reset}`);
+  lines.push(`  ${ansi.gray}${box.vertical}${box.horizontal.repeat(width - 2)}${box.vertical}${ansi.reset}`);
+
+  // Score comparison
+  const scoreDiff = (after.score || 0) - (before.score || 0);
+  const scoreIcon = scoreDiff > 0 ? `${ansi.green}↑${ansi.reset}` : scoreDiff < 0 ? `${ansi.red}↓${ansi.reset}` : `${ansi.gray}→${ansi.reset}`;
+  lines.push(`  ${ansi.gray}${box.vertical}${ansi.reset}  ${ansi.dim}Score:${ansi.reset}   ${before.score || 0} ${scoreIcon} ${ansi.bold}${after.score || 0}${ansi.reset} ${ansi.dim}(${scoreDiff >= 0 ? '+' : ''}${scoreDiff})${ansi.reset}${' '.repeat(20)}${ansi.gray}${box.vertical}${ansi.reset}`);
+
+  // Issues comparison
+  const beforeIssues = before.findings?.length || 0;
+  const afterIssues = after.findings?.length || 0;
+  const issuesDiff = afterIssues - beforeIssues;
+  const issuesIcon = issuesDiff < 0 ? `${ansi.green}↓${ansi.reset}` : issuesDiff > 0 ? `${ansi.red}↑${ansi.reset}` : `${ansi.gray}→${ansi.reset}`;
+  lines.push(`  ${ansi.gray}${box.vertical}${ansi.reset}  ${ansi.dim}Issues:${ansi.reset}  ${beforeIssues} ${issuesIcon} ${ansi.bold}${afterIssues}${ansi.reset} ${ansi.dim}(${issuesDiff >= 0 ? '+' : ''}${issuesDiff})${ansi.reset}${' '.repeat(20)}${ansi.gray}${box.vertical}${ansi.reset}`);
+
+  // Visual comparison bars
+  lines.push(`  ${ansi.gray}${box.vertical}${ansi.reset}${' '.repeat(width - 2)}${ansi.gray}${box.vertical}${ansi.reset}`);
+  lines.push(`  ${ansi.gray}${box.vertical}${ansi.reset}  ${ansi.dim}Before:${ansi.reset} ${progressBar(before.score || 0, 30, { showPercent: false })}${' '.repeat(8)}${ansi.gray}${box.vertical}${ansi.reset}`);
+  lines.push(`  ${ansi.gray}${box.vertical}${ansi.reset}  ${ansi.dim}After:${ansi.reset}  ${progressBar(after.score || 0, 30, { showPercent: false })}${' '.repeat(8)}${ansi.gray}${box.vertical}${ansi.reset}`);
+
+  lines.push(`  ${ansi.gray}${box.bottomLeft}${box.horizontal.repeat(width - 2)}${box.bottomRight}${ansi.reset}`);
+
+  return lines.join('\n');
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// ASCII BADGE
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Generate ASCII badge for terminal
+ * @param {Object} result - Scan result
+ */
+function asciiBadge(result) {
+  const { verdict, score } = result;
+  
+  const verdictColors = {
+    SHIP: ansi.green,
+    PASS: ansi.green,
+    WARN: ansi.yellow,
+    BLOCK: ansi.red,
+    FAIL: ansi.red,
+  };
+
+  const color = verdictColors[verdict] || ansi.gray;
+  
+  return `${color}┌──────────────────┐
+│  VIBECHECK ${padLeft(String(score || 0), 3)}  │
+│     ${verdict.padStart(7)}      │
+└──────────────────┘${ansi.reset}`;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// QUICK SUMMARY
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Display a quick summary line
+ * @param {Object} result - Scan result
+ */
+function quickSummary(result) {
+  const { verdict, score, findings = [], duration, filesScanned } = result;
+
+  const verdictIcon = {
+    SHIP: `${ansi.green}${sym.rocket}${ansi.reset}`,
+    PASS: `${ansi.green}${sym.check}${ansi.reset}`,
+    WARN: `${ansi.yellow}${sym.warning}${ansi.reset}`,
+    BLOCK: `${ansi.red}${sym.cross}${ansi.reset}`,
+    FAIL: `${ansi.red}${sym.cross}${ansi.reset}`,
+  };
+
+  const icon = verdictIcon[verdict] || verdictIcon.WARN;
+  const scoreColor = score >= 80 ? ansi.green : score >= 60 ? ansi.yellow : ansi.red;
+  
+  const critical = findings.filter(f => f.severity === 'critical').length;
+  const high = findings.filter(f => f.severity === 'high').length;
+  
+  let issueStr = '';
+  if (critical > 0) issueStr += `${ansi.red}${critical}C${ansi.reset} `;
+  if (high > 0) issueStr += `${ansi.yellow}${high}H${ansi.reset} `;
+  if (!issueStr && findings.length > 0) issueStr = `${findings.length} issues`;
+  if (!issueStr) issueStr = `${ansi.green}clean${ansi.reset}`;
+
+  return `${icon} ${scoreColor}${score}${ansi.reset}${ansi.dim}/100${ansi.reset} │ ${issueStr}│ ${filesScanned || '?'} files │ ${formatDuration(duration || 0)}`;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// EXPORTS
+// ═══════════════════════════════════════════════════════════════════════════════
+
+module.exports = {
+  verdictCard,
+  compactVerdict,
+  findingCard,
+  statsCard,
+  comparisonCard,
+  asciiBadge,
+  quickSummary,
+};