@vibecheckai/cli 3.4.0 → 3.5.0

package/bin/runners/lib/scan-output-enhanced.js

@@ -0,0 +1,512 @@
+/**
+ * Enhanced Scan Output - Beautiful scan results with charts and Pro upselling
+ * 
+ * Integrates:
+ * - Verdict cards with health scores
+ * - Severity distribution charts
+ * - Category breakdown
+ * - Trend analysis (if baseline exists)
+ * - Pro feature upselling
+ */
+
+"use strict";
+
+const {
+  ansi,
+  sym,
+  box,
+  padRight,
+  padLeft,
+  center,
+  truncate,
+  visibleLength,
+  progressBar,
+  renderTable,
+  renderSectionHeader,
+  renderSuccess,
+  renderWarning,
+  renderInfo,
+  renderBullet,
+  formatDuration,
+  getTierBadge,
+  WIDTH,
+} = require("./unified-cli-output");
+
+const {
+  horizontalBarChart,
+  severityBreakdown,
+  sparkline,
+  trendIndicator,
+  statsSummary,
+  healthGauge,
+} = require("./cli-charts");
+
+const {
+  verdictCard,
+  compactVerdict,
+  comparisonCard,
+  quickSummary,
+} = require("./cli-scan-cards");
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// CONFIGURATION
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const PRO_FEATURES = {
+  autofix: {
+    name: 'Auto-Fix',
+    description: 'AI-powered automatic code fixes',
+    command: 'vibecheck fix --apply',
+  },
+  reality: {
+    name: 'Reality Proof',
+    description: 'Runtime verification with Playwright',
+    command: 'vibecheck scan --reality',
+  },
+  badge: {
+    name: 'Status Badge',
+    description: 'Embeddable health badge for README',
+    command: 'vibecheck ship --badge',
+  },
+  ci: {
+    name: 'CI Integration',
+    description: 'GitHub Actions & CI/CD workflows',
+    command: 'vibecheck init --ci',
+  },
+};
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// MAIN ENHANCED OUTPUT
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Render enhanced scan output with charts and upselling
+ * @param {Object} result - Scan result
+ * @param {Object} options - Display options
+ */
+function renderEnhancedScanOutput(result, options = {}) {
+  const {
+    tier = 'free',
+    showCharts = true,
+    showUpsell = true,
+    baseline = null,
+    compact = false,
+    json = false,
+  } = options;
+
+  // Extract data
+  const {
+    verdict = 'WARN',
+    score = 0,
+    findings = [],
+    duration = 0,
+    filesScanned = 0,
+    projectName = '',
+  } = normalizeResult(result);
+
+  // JSON output
+  if (json) {
+    return JSON.stringify({
+      verdict,
+      score,
+      findings: findings.length,
+      duration,
+      filesScanned,
+      severityCounts: getSeverityCounts(findings),
+    }, null, 2);
+  }
+
+  // Compact mode
+  if (compact) {
+    console.log(compactVerdict({ verdict, score, findings, duration }));
+    return;
+  }
+
+  const lines = [];
+  const isPro = tier === 'pro';
+  const hasIssues = findings.length > 0;
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // 1. VERDICT CARD
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  lines.push('');
+  lines.push(verdictCard({ verdict, score, findings, duration, filesScanned, projectName }));
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // 2. SEVERITY DISTRIBUTION CHART
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  if (showCharts && hasIssues) {
+    const sevCounts = getSeverityCounts(findings);
+    
+    lines.push('');
+    lines.push(renderSectionHeader('Issue Distribution', sym.chart));
+    
+    // Severity bar chart
+    lines.push(horizontalBarChart([
+      { label: 'Critical', value: sevCounts.critical, color: ansi.red },
+      { label: 'High', value: sevCounts.high, color: ansi.yellow },
+      { label: 'Medium', value: sevCounts.medium, color: ansi.yellow },
+      { label: 'Low', value: sevCounts.low, color: ansi.blue },
+    ].filter(item => item.value > 0), { width: 25, showPercent: true }));
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // 3. CATEGORY BREAKDOWN
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  if (showCharts && hasIssues) {
+    const categoryCounts = getCategoryCounts(findings);
+    const topCategories = Object.entries(categoryCounts)
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 5);
+
+    if (topCategories.length > 0) {
+      lines.push('');
+      lines.push(renderSectionHeader('By Category', sym.folder));
+      
+      lines.push(horizontalBarChart(
+        topCategories.map(([cat, count]) => ({
+          label: formatCategory(cat),
+          value: count,
+          color: ansi.cyan,
+        })),
+        { width: 25, showPercent: false }
+      ));
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // 4. BASELINE COMPARISON (if available)
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  if (baseline && showCharts) {
+    lines.push('');
+    lines.push(renderSectionHeader('vs Previous Scan', sym.chart));
+    lines.push(comparisonCard(
+      { score: baseline.score, findings: baseline.findings || [] },
+      { score, findings }
+    ));
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // 5. TOP FINDINGS TABLE
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  if (hasIssues) {
+    lines.push('');
+    lines.push(renderSectionHeader(`Top Issues (${Math.min(findings.length, 8)} of ${findings.length})`, sym.warning));
+    lines.push(renderFindingsTable(findings.slice(0, 8)));
+    
+    if (findings.length > 8) {
+      lines.push(`  ${ansi.dim}... and ${findings.length - 8} more issues${ansi.reset}`);
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // 6. PRO UPSELL SECTION
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  if (showUpsell && !isPro) {
+    lines.push('');
+    lines.push(renderProUpsell(findings, verdict, tier));
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // 7. NEXT STEPS
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  lines.push('');
+  lines.push(renderNextSteps(verdict, hasIssues, isPro));
+
+  // Output
+  console.log(lines.join('\n'));
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// PRO UPSELL
+// ═══════════════════════════════════════════════════════════════════════════════
+
+function renderProUpsell(findings, verdict, tier) {
+  const lines = [];
+  const issueCount = findings.length;
+
+  lines.push(`  ${ansi.gray}${box.dTopLeft}${box.dHorizontal.repeat(WIDTH - 6)}${box.dTopRight}${ansi.reset}`);
+  lines.push(`  ${ansi.gray}${box.dVertical}${ansi.reset}${' '.repeat(WIDTH - 6)}${ansi.gray}${box.dVertical}${ansi.reset}`);
+  
+  // Header
+  const headerText = `${ansi.magenta}${sym.star}${ansi.reset} ${ansi.bold}UPGRADE TO PRO${ansi.reset}`;
+  lines.push(`  ${ansi.gray}${box.dVertical}${ansi.reset}${center(headerText, WIDTH - 6 + 10)}${ansi.gray}${box.dVertical}${ansi.reset}`);
+  
+  lines.push(`  ${ansi.gray}${box.dVertical}${ansi.reset}${' '.repeat(WIDTH - 6)}${ansi.gray}${box.dVertical}${ansi.reset}`);
+
+  // Context-aware upsell messages
+  if (issueCount > 0) {
+    const fixMsg = `  Fix all ${ansi.bold}${issueCount} issues${ansi.reset} automatically with AI-powered auto-fix`;
+    lines.push(`  ${ansi.gray}${box.dVertical}${ansi.reset}${fixMsg}${' '.repeat(Math.max(0, WIDTH - 6 - visibleLength(fixMsg)))}${ansi.gray}${box.dVertical}${ansi.reset}`);
+  }
+
+  lines.push(`  ${ansi.gray}${box.dVertical}${ansi.reset}${' '.repeat(WIDTH - 6)}${ansi.gray}${box.dVertical}${ansi.reset}`);
+
+  // Feature list
+  const features = [
+    `${ansi.cyan}${sym.wrench}${ansi.reset} Auto-Fix: AI applies fixes automatically`,
+    `${ansi.cyan}${sym.shield}${ansi.reset} Reality Proof: Runtime verification`,
+    `${ansi.cyan}${sym.chart}${ansi.reset} CI Integration: GitHub Actions ready`,
+    `${ansi.cyan}${sym.star}${ansi.reset} Status Badge: Show health in README`,
+  ];
+
+  for (const feature of features) {
+    const featureLine = `    ${feature}`;
+    lines.push(`  ${ansi.gray}${box.dVertical}${ansi.reset}${featureLine}${' '.repeat(Math.max(0, WIDTH - 6 - visibleLength(featureLine)))}${ansi.gray}${box.dVertical}${ansi.reset}`);
+  }
+
+  lines.push(`  ${ansi.gray}${box.dVertical}${ansi.reset}${' '.repeat(WIDTH - 6)}${ansi.gray}${box.dVertical}${ansi.reset}`);
+
+  // CTA
+  const ctaText = `${ansi.cyan}https://vibecheckai.dev/pricing${ansi.reset}`;
+  lines.push(`  ${ansi.gray}${box.dVertical}${ansi.reset}${center(`Upgrade ${sym.arrow} ${ctaText}`, WIDTH - 6 + 10)}${ansi.gray}${box.dVertical}${ansi.reset}`);
+
+  lines.push(`  ${ansi.gray}${box.dVertical}${ansi.reset}${' '.repeat(WIDTH - 6)}${ansi.gray}${box.dVertical}${ansi.reset}`);
+  lines.push(`  ${ansi.gray}${box.dBottomLeft}${box.dHorizontal.repeat(WIDTH - 6)}${box.dBottomRight}${ansi.reset}`);
+
+  return lines.join('\n');
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// CONTEXTUAL PRO PROMPTS (for inline use)
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Get contextual Pro upsell message based on current action
+ * @param {string} context - Context: 'scan', 'fix', 'ship', etc.
+ * @param {Object} data - Context data
+ */
+function getProPrompt(context, data = {}) {
+  const prompts = {
+    scan_issues: (count) => ({
+      message: `${ansi.magenta}${sym.star} PRO${ansi.reset} ${ansi.dim}Auto-fix ${count} issues instantly${ansi.reset}`,
+      command: 'vibecheck fix --apply',
+      cta: 'Try Pro free for 14 days',
+    }),
+    scan_clean: () => ({
+      message: `${ansi.magenta}${sym.star} PRO${ansi.reset} ${ansi.dim}Generate status badge for your README${ansi.reset}`,
+      command: 'vibecheck ship --badge',
+      cta: 'Show off your clean code',
+    }),
+    fix_plan: (count) => ({
+      message: `${ansi.magenta}${sym.star} PRO${ansi.reset} ${ansi.dim}Apply all ${count} fixes automatically${ansi.reset}`,
+      command: 'vibecheck fix --apply',
+      cta: 'Upgrade to apply fixes',
+    }),
+    ship_warn: () => ({
+      message: `${ansi.magenta}${sym.star} PRO${ansi.reset} ${ansi.dim}Get detailed fix suggestions${ansi.reset}`,
+      command: 'vibecheck fix --explain',
+      cta: 'Understand every issue',
+    }),
+    ci_setup: () => ({
+      message: `${ansi.magenta}${sym.star} PRO${ansi.reset} ${ansi.dim}Add to CI/CD pipeline${ansi.reset}`,
+      command: 'vibecheck init --ci',
+      cta: 'Automate quality checks',
+    }),
+  };
+
+  const key = context;
+  const promptFn = prompts[key];
+  
+  if (!promptFn) return null;
+  
+  const prompt = typeof promptFn === 'function' 
+    ? promptFn(data.count || data.issueCount || 0)
+    : promptFn;
+  
+  return prompt;
+}
+
+/**
+ * Render inline Pro prompt
+ * @param {string} context - Context
+ * @param {Object} data - Data
+ */
+function renderInlineProPrompt(context, data = {}) {
+  const prompt = getProPrompt(context, data);
+  if (!prompt) return '';
+
+  return `
+  ${prompt.message}
+  ${ansi.dim}${sym.arrow} ${prompt.command}${ansi.reset}
+  ${ansi.dim}${prompt.cta} at ${ansi.cyan}vibecheckai.dev${ansi.reset}
+`;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// NEXT STEPS
+// ═══════════════════════════════════════════════════════════════════════════════
+
+function renderNextSteps(verdict, hasIssues, isPro) {
+  const lines = [];
+  
+  lines.push(`  ${ansi.cyan}${sym.pointer}${ansi.reset} ${ansi.bold}Next Steps${ansi.reset}`);
+  lines.push(`  ${ansi.gray}${box.horizontal.repeat(50)}${ansi.reset}`);
+
+  if (verdict === 'SHIP' || verdict === 'PASS') {
+    lines.push(`  ${ansi.green}${sym.rocket}${ansi.reset} Your code is ready to ship!`);
+    if (!isPro) {
+      lines.push(`  ${ansi.dim}${sym.arrow} Run ${ansi.cyan}vibecheck ship --badge${ansi.reset}${ansi.dim} to generate a status badge${ansi.reset} ${ansi.magenta}[PRO]${ansi.reset}`);
+    }
+    lines.push(`  ${ansi.dim}${sym.arrow} Run ${ansi.cyan}vibecheck guard${ansi.reset}${ansi.dim} to validate AI-generated code${ansi.reset}`);
+  } else if (hasIssues) {
+    if (!isPro) {
+      lines.push(`  ${ansi.dim}${sym.arrow} Run ${ansi.cyan}vibecheck fix --plan${ansi.reset}${ansi.dim} to see fix suggestions${ansi.reset}`);
+      lines.push(`  ${ansi.dim}${sym.arrow} Run ${ansi.cyan}vibecheck fix --apply${ansi.reset}${ansi.dim} to auto-fix issues${ansi.reset} ${ansi.magenta}[PRO]${ansi.reset}`);
+    } else {
+      lines.push(`  ${ansi.dim}${sym.arrow} Run ${ansi.cyan}vibecheck fix --apply${ansi.reset}${ansi.dim} to auto-fix issues${ansi.reset}`);
+    }
+    lines.push(`  ${ansi.dim}${sym.arrow} Run ${ansi.cyan}vibecheck scan --baseline${ansi.reset}${ansi.dim} to track progress${ansi.reset}`);
+  }
+
+  lines.push('');
+  return lines.join('\n');
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// FINDINGS TABLE
+// ═══════════════════════════════════════════════════════════════════════════════
+
+function renderFindingsTable(findings) {
+  const sevIcons = {
+    critical: `${ansi.red}${sym.critical}${ansi.reset}`,
+    high: `${ansi.yellow}${sym.high}${ansi.reset}`,
+    medium: `${ansi.yellow}${sym.medium}${ansi.reset}`,
+    low: `${ansi.blue}${sym.low}${ansi.reset}`,
+    info: `${ansi.gray}${sym.info}${ansi.reset}`,
+  };
+
+  return renderTable({
+    columns: [
+      { 
+        header: 'Sev', 
+        key: 'severity', 
+        width: 8,
+        format: (v) => sevIcons[v] || sevIcons.info,
+      },
+      { header: 'Category', key: 'category', width: 14, format: formatCategory },
+      { header: 'Issue', key: 'message', width: 45 },
+    ],
+    data: findings.map(f => ({
+      severity: normalizeSeverity(f.severity),
+      category: f.category || f.type || 'Other',
+      message: f.message || f.title || f.description || '',
+    })),
+  });
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// UTILITIES
+// ═══════════════════════════════════════════════════════════════════════════════
+
+function normalizeResult(result) {
+  // Handle different result structures
+  if (result.verdict && typeof result.verdict === 'object') {
+    return {
+      verdict: result.verdict.verdict || 'WARN',
+      score: result.verdict.score || calculateScore(result.findings || []),
+      findings: result.findings || [],
+      duration: result.timings?.total || result.duration || 0,
+      filesScanned: result.timings?.filesScanned || result.scannedFiles || 0,
+      projectName: result.projectName || '',
+    };
+  }
+  
+  return {
+    verdict: result.verdict || 'WARN',
+    score: result.score || calculateScore(result.findings || []),
+    findings: result.findings || [],
+    duration: result.duration || result.timings?.total || 0,
+    filesScanned: result.filesScanned || result.scannedFiles || 0,
+    projectName: result.projectName || '',
+  };
+}
+
+function calculateScore(findings) {
+  if (!findings || findings.length === 0) return 100;
+  
+  const deductions = findings.reduce((sum, f) => {
+    const sev = normalizeSeverity(f.severity);
+    if (sev === 'critical') return sum + 25;
+    if (sev === 'high') return sum + 15;
+    if (sev === 'medium') return sum + 5;
+    if (sev === 'low') return sum + 2;
+    return sum;
+  }, 0);
+  
+  return Math.max(0, 100 - deductions);
+}
+
+function normalizeSeverity(severity) {
+  if (!severity) return 'medium';
+  const sev = String(severity).toLowerCase();
+  if (sev === 'block' || sev === 'critical') return 'critical';
+  if (sev === 'high') return 'high';
+  if (sev === 'warn' || sev === 'warning' || sev === 'medium') return 'medium';
+  if (sev === 'info' || sev === 'low') return 'low';
+  return 'medium';
+}
+
+function getSeverityCounts(findings) {
+  const counts = { critical: 0, high: 0, medium: 0, low: 0, info: 0 };
+  
+  for (const f of findings) {
+    const sev = normalizeSeverity(f.severity);
+    counts[sev] = (counts[sev] || 0) + 1;
+  }
+  
+  return counts;
+}
+
+function getCategoryCounts(findings) {
+  const counts = {};
+  
+  for (const f of findings) {
+    const cat = f.category || f.type || f.ruleId || 'Other';
+    counts[cat] = (counts[cat] || 0) + 1;
+  }
+  
+  return counts;
+}
+
+function formatCategory(cat) {
+  const categoryLabels = {
+    'EnvContract': 'Env Vars',
+    'MissingRoute': 'Routes',
+    'GhostAuth': 'Auth',
+    'FakeSuccess': 'Fake APIs',
+    'MockData': 'Mock Data',
+    'Secrets': 'Secrets',
+    'ConsoleLog': 'Console',
+    'TodoFixme': 'TODOs',
+    'CodeQuality': 'Quality',
+    'Security': 'Security',
+    'Performance': 'Performance',
+  };
+  
+  return categoryLabels[cat] || cat;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// EXPORTS
+// ═══════════════════════════════════════════════════════════════════════════════
+
+module.exports = {
+  renderEnhancedScanOutput,
+  renderProUpsell,
+  renderInlineProPrompt,
+  getProPrompt,
+  renderNextSteps,
+  renderFindingsTable,
+  normalizeResult,
+  calculateScore,
+  getSeverityCounts,
+  getCategoryCounts,
+};

package/bin/runners/lib/scan-output.js

@@ -510,8 +510,52 @@ function renderLayers(layers) {
   return ''; // Implement if needed
 }
 
+// ═══════════════════════════════════════════════════════════════════════════════
+// ENHANCED OUTPUT (with charts and Pro upselling)
+// ═══════════════════════════════════════════════════════════════════════════════
+
+let enhancedOutput;
+try {
+  enhancedOutput = require('./scan-output-enhanced');
+} catch (e) {
+  enhancedOutput = null;
+}
+
+/**
+ * Format scan output with enhanced visuals (charts, upsell)
+ * Falls back to standard output if enhanced module not available
+ */
+function formatScanOutputEnhanced(result, options = {}) {
+  if (enhancedOutput && !options.legacy) {
+    enhancedOutput.renderEnhancedScanOutput(result, options);
+    return ''; // Output is printed directly
+  }
+  return formatScanOutput(result, options);
+}
+
+/**
+ * Get Pro upsell prompt for current context
+ */
+function getProUpsellPrompt(context, data = {}) {
+  if (enhancedOutput) {
+    return enhancedOutput.getProPrompt(context, data);
+  }
+  return null;
+}
+
+/**
+ * Render inline Pro upsell
+ */
+function renderProUpsell(context, data = {}) {
+  if (enhancedOutput) {
+    return enhancedOutput.renderInlineProPrompt(context, data);
+  }
+  return '';
+}
+
 module.exports = { 
   formatScanOutput,
+  formatScanOutputEnhanced,
   calculateScore,
   getExitCode,
   printError,
@@ -521,4 +565,7 @@ module.exports = {
   renderBreakdown,
   renderBlockers,
   renderLayers,
+  // Pro upsell
+  getProUpsellPrompt,
+  renderProUpsell,
 };