@vibecheckai/cli 2.8.2 → 3.0.0

package/bin/runners/lib/report-templates.js

@@ -0,0 +1,964 @@
+/**
+ * Enhanced Report Templates
+ * 
+ * Beautiful, professional report generation with:
+ * - Modern design with gradients and shadows
+ * - Visual score gauges (SVG)
+ * - Category progress bars
+ * - Severity breakdown charts
+ * - Trend sparklines
+ * - Professional branding
+ */
+
+/**
+ * Generate SVG score gauge
+ */
+function generateScoreGauge(score, size = 180) {
+  const radius = (size - 20) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const progress = (score / 100) * circumference;
+  const remaining = circumference - progress;
+  
+  const color = score >= 80 ? '#22c55e' : score >= 60 ? '#eab308' : '#ef4444';
+  const bgColor = '#e2e8f0';
+  
+  return `
+    <svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" class="score-gauge">
+      <circle
+        cx="${size/2}" cy="${size/2}" r="${radius}"
+        fill="none" stroke="${bgColor}" stroke-width="12"
+      />
+      <circle
+        cx="${size/2}" cy="${size/2}" r="${radius}"
+        fill="none" stroke="${color}" stroke-width="12"
+        stroke-dasharray="${progress} ${remaining}"
+        stroke-linecap="round"
+        transform="rotate(-90 ${size/2} ${size/2})"
+        class="gauge-progress"
+      />
+      <text x="${size/2}" y="${size/2 + 8}" text-anchor="middle" class="gauge-score">${score}</text>
+      <text x="${size/2}" y="${size/2 + 28}" text-anchor="middle" class="gauge-label">/ 100</text>
+    </svg>
+  `;
+}
+
+/**
+ * Generate category bar chart
+ */
+function generateCategoryBars(categories) {
+  let html = '<div class="category-bars">';
+  
+  for (const [name, score] of Object.entries(categories)) {
+    const color = score >= 80 ? '#22c55e' : score >= 60 ? '#eab308' : '#ef4444';
+    const icon = score >= 80 ? '✓' : score >= 60 ? '!' : '✗';
+    const displayName = formatCategoryName(name);
+    
+    html += `
+      <div class="category-bar-item">
+        <div class="category-bar-header">
+          <span class="category-icon" style="color: ${color}">${icon}</span>
+          <span class="category-name">${displayName}</span>
+          <span class="category-score" style="color: ${color}">${score}%</span>
+        </div>
+        <div class="category-bar-track">
+          <div class="category-bar-fill" style="width: ${score}%; background: ${color}"></div>
+        </div>
+      </div>
+    `;
+  }
+  
+  html += '</div>';
+  return html;
+}
+
+/**
+ * Generate severity breakdown
+ */
+function generateSeverityBreakdown(findings) {
+  const counts = {
+    critical: findings.filter(f => f.severity === 'critical').length,
+    high: findings.filter(f => f.severity === 'high').length,
+    medium: findings.filter(f => f.severity === 'medium').length,
+    low: findings.filter(f => f.severity === 'low').length,
+  };
+  
+  const total = counts.critical + counts.high + counts.medium + counts.low;
+  
+  const colors = {
+    critical: '#dc2626',
+    high: '#f97316',
+    medium: '#eab308',
+    low: '#94a3b8',
+  };
+  
+  const icons = {
+    critical: '🔴',
+    high: '🟠',
+    medium: '🟡',
+    low: '⚪',
+  };
+  
+  let html = `
+    <div class="severity-breakdown">
+      <div class="severity-chart">
+  `;
+  
+  // Stacked bar
+  if (total > 0) {
+    html += '<div class="severity-bar">';
+    for (const [sev, count] of Object.entries(counts)) {
+      if (count > 0) {
+        const width = (count / total) * 100;
+        html += `<div class="severity-segment" style="width: ${width}%; background: ${colors[sev]}" title="${sev}: ${count}"></div>`;
+      }
+    }
+    html += '</div>';
+  }
+  
+  html += '</div><div class="severity-legend">';
+  
+  for (const [sev, count] of Object.entries(counts)) {
+    html += `
+      <div class="severity-item">
+        <span class="severity-icon">${icons[sev]}</span>
+        <span class="severity-label">${sev.charAt(0).toUpperCase() + sev.slice(1)}</span>
+        <span class="severity-count">${count}</span>
+      </div>
+    `;
+  }
+  
+  html += '</div></div>';
+  return html;
+}
+
+/**
+ * Generate findings list
+ */
+function generateFindingsList(findings, options = {}) {
+  const limit = options.limit || 10;
+  const showFile = !options.redactPaths;
+  
+  const severityColors = {
+    critical: '#dc2626',
+    high: '#f97316',
+    medium: '#eab308',
+    low: '#94a3b8',
+  };
+  
+  let html = '<div class="findings-list">';
+  
+  const displayFindings = findings.slice(0, limit);
+  
+  for (const finding of displayFindings) {
+    const color = severityColors[finding.severity] || '#94a3b8';
+    const sevLabel = (finding.severity || 'medium').toUpperCase();
+    
+    html += `
+      <div class="finding-card" style="border-left-color: ${color}">
+        <div class="finding-header">
+          <span class="finding-severity" style="background: ${color}">${sevLabel}</span>
+          <span class="finding-title">${finding.message || finding.title || 'Finding'}</span>
+        </div>
+        ${finding.description ? `<p class="finding-description">${finding.description}</p>` : ''}
+        ${showFile && finding.file ? `<code class="finding-file">${finding.file}${finding.line ? ':' + finding.line : ''}</code>` : ''}
+        ${finding.fix ? `<div class="finding-fix"><strong>Fix:</strong> ${finding.fix}</div>` : ''}
+      </div>
+    `;
+  }
+  
+  if (findings.length > limit) {
+    html += `<div class="findings-more">+ ${findings.length - limit} more findings...</div>`;
+  }
+  
+  html += '</div>';
+  return html;
+}
+
+/**
+ * Get enhanced CSS styles
+ */
+function getEnhancedStyles() {
+  return `
+    :root {
+      --primary: #3b82f6;
+      --primary-dark: #1d4ed8;
+      --success: #22c55e;
+      --warning: #eab308;
+      --danger: #ef4444;
+      --gray-50: #f8fafc;
+      --gray-100: #f1f5f9;
+      --gray-200: #e2e8f0;
+      --gray-300: #cbd5e1;
+      --gray-600: #475569;
+      --gray-800: #1e293b;
+      --gray-900: #0f172a;
+      --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+      --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      color: var(--gray-800);
+      line-height: 1.6;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      min-height: 100vh;
+      padding: 40px 20px;
+    }
+
+    .report {
+      max-width: 900px;
+      margin: 0 auto;
+      background: white;
+      border-radius: 24px;
+      box-shadow: var(--shadow-lg);
+      overflow: hidden;
+    }
+
+    /* Header */
+    .report-header {
+      background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 100%);
+      color: white;
+      padding: 48px;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .report-header::before {
+      content: '';
+      position: absolute;
+      top: -50%;
+      right: -20%;
+      width: 60%;
+      height: 200%;
+      background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
+      transform: rotate(-15deg);
+    }
+
+    .report-header h1 {
+      font-size: 32px;
+      font-weight: 700;
+      margin-bottom: 8px;
+      position: relative;
+    }
+
+    .report-meta {
+      opacity: 0.8;
+      font-size: 14px;
+    }
+
+    .report-logo {
+      position: absolute;
+      top: 48px;
+      right: 48px;
+      font-size: 24px;
+      font-weight: 700;
+      opacity: 0.3;
+    }
+
+    /* Score Section */
+    .score-section {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 48px;
+      background: var(--gray-50);
+      border-bottom: 1px solid var(--gray-200);
+    }
+
+    .score-main {
+      display: flex;
+      align-items: center;
+      gap: 32px;
+    }
+
+    .score-gauge {
+      filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.1));
+    }
+
+    .gauge-progress {
+      transition: stroke-dasharray 1s ease-out;
+    }
+
+    .gauge-score {
+      font-size: 42px;
+      font-weight: 700;
+      fill: var(--gray-900);
+    }
+
+    .gauge-label {
+      font-size: 14px;
+      fill: var(--gray-600);
+    }
+
+    .verdict-badge {
+      padding: 12px 28px;
+      border-radius: 50px;
+      font-weight: 600;
+      font-size: 18px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      box-shadow: var(--shadow);
+    }
+
+    .verdict-badge.ship {
+      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+      color: white;
+    }
+
+    .verdict-badge.warn {
+      background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
+      color: white;
+    }
+
+    .verdict-badge.block {
+      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+      color: white;
+    }
+
+    .score-info h2 {
+      font-size: 24px;
+      margin-bottom: 4px;
+    }
+
+    .score-info p {
+      color: var(--gray-600);
+      font-size: 14px;
+    }
+
+    /* Content Sections */
+    .report-content {
+      padding: 48px;
+    }
+
+    .section {
+      margin-bottom: 48px;
+    }
+
+    .section-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 24px;
+    }
+
+    .section-icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+      background: var(--primary);
+      color: white;
+    }
+
+    .section-title {
+      font-size: 20px;
+      font-weight: 600;
+    }
+
+    /* Category Bars */
+    .category-bars {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    .category-bar-item {
+      background: var(--gray-50);
+      padding: 16px;
+      border-radius: 12px;
+    }
+
+    .category-bar-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+
+    .category-icon {
+      font-weight: 600;
+    }
+
+    .category-name {
+      flex: 1;
+      font-weight: 500;
+    }
+
+    .category-score {
+      font-weight: 700;
+    }
+
+    .category-bar-track {
+      height: 8px;
+      background: var(--gray-200);
+      border-radius: 4px;
+      overflow: hidden;
+    }
+
+    .category-bar-fill {
+      height: 100%;
+      border-radius: 4px;
+      transition: width 0.5s ease-out;
+    }
+
+    /* Severity Breakdown */
+    .severity-breakdown {
+      background: var(--gray-50);
+      padding: 24px;
+      border-radius: 12px;
+    }
+
+    .severity-bar {
+      display: flex;
+      height: 24px;
+      border-radius: 12px;
+      overflow: hidden;
+      margin-bottom: 20px;
+    }
+
+    .severity-segment {
+      transition: width 0.5s ease-out;
+    }
+
+    .severity-legend {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+    }
+
+    .severity-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .severity-label {
+      flex: 1;
+      font-size: 14px;
+      color: var(--gray-600);
+    }
+
+    .severity-count {
+      font-weight: 700;
+      font-size: 18px;
+    }
+
+    /* Findings List */
+    .findings-list {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    .finding-card {
+      background: var(--gray-50);
+      border-left: 4px solid;
+      padding: 16px 20px;
+      border-radius: 0 12px 12px 0;
+    }
+
+    .finding-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 8px;
+    }
+
+    .finding-severity {
+      padding: 2px 8px;
+      border-radius: 4px;
+      font-size: 10px;
+      font-weight: 700;
+      color: white;
+    }
+
+    .finding-title {
+      font-weight: 600;
+    }
+
+    .finding-description {
+      color: var(--gray-600);
+      font-size: 14px;
+      margin-bottom: 8px;
+    }
+
+    .finding-file {
+      display: inline-block;
+      background: var(--gray-200);
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      color: var(--gray-600);
+    }
+
+    .finding-fix {
+      margin-top: 8px;
+      padding: 8px 12px;
+      background: rgba(34, 197, 94, 0.1);
+      border-radius: 6px;
+      font-size: 13px;
+      color: #166534;
+    }
+
+    .findings-more {
+      text-align: center;
+      padding: 16px;
+      color: var(--gray-600);
+      font-style: italic;
+    }
+
+    /* Footer */
+    .report-footer {
+      background: var(--gray-900);
+      color: white;
+      padding: 32px 48px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .footer-brand {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-weight: 600;
+    }
+
+    .footer-meta {
+      font-size: 12px;
+      opacity: 0.6;
+    }
+
+    /* Recommendation */
+    .recommendation {
+      background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
+      padding: 24px;
+      border-radius: 12px;
+      border: 1px solid var(--gray-200);
+    }
+
+    .recommendation h3 {
+      margin-bottom: 8px;
+    }
+
+    .recommendation p {
+      color: var(--gray-600);
+    }
+
+    @media print {
+      body {
+        background: white;
+        padding: 0;
+      }
+      .report {
+        box-shadow: none;
+        border-radius: 0;
+      }
+    }
+  `;
+}
+
+/**
+ * Format category name
+ */
+function formatCategoryName(name) {
+  const names = {
+    functionality: 'Core Functionality',
+    auth: 'Authentication',
+    billing: 'Payment Integration',
+    reality: 'Runtime Verification',
+    code_quality: 'Code Quality',
+  };
+  return names[name] || name.charAt(0).toUpperCase() + name.slice(1).replace(/_/g, ' ');
+}
+
+/**
+ * Generate enhanced executive report
+ */
+function generateEnhancedExecutiveReport(data, options = {}) {
+  const verdictClass = data.verdict === 'SHIP' ? 'ship' : data.verdict === 'WARN' ? 'warn' : 'block';
+  const verdictText = data.verdict === 'SHIP' ? '✅ Ready to Ship' : 
+                      data.verdict === 'WARN' ? '⚠️ Ship with Caution' : '🚫 Not Ready';
+  const verdictMessage = data.verdict === 'SHIP' 
+    ? 'All systems go. This application is ready for production.'
+    : data.verdict === 'WARN'
+    ? 'Minor issues detected. Review recommended before deployment.'
+    : 'Critical issues found. Remediation required before shipping.';
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Ship Readiness Report - ${data.projectName}</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>${getEnhancedStyles()}</style>
+</head>
+<body>
+  <div class="report">
+    <header class="report-header">
+      <h1>Ship Readiness Report</h1>
+      <div class="report-meta">
+        <p><strong>Project:</strong> ${data.projectName}</p>
+        <p><strong>Generated:</strong> ${new Date(data.generatedAt).toLocaleString()}</p>
+        ${options.company ? `<p><strong>Prepared for:</strong> ${options.company}</p>` : ''}
+      </div>
+      <div class="report-logo">VIBECHECK</div>
+    </header>
+
+    <section class="score-section">
+      <div class="score-main">
+        ${generateScoreGauge(data.score)}
+        <div class="score-info">
+          <h2>Vibe Score</h2>
+          <p>${verdictMessage}</p>
+        </div>
+      </div>
+      <div class="verdict-badge ${verdictClass}">${verdictText}</div>
+    </section>
+
+    <div class="report-content">
+      <section class="section">
+        <div class="section-header">
+          <div class="section-icon">📊</div>
+          <h3 class="section-title">Category Breakdown</h3>
+        </div>
+        ${generateCategoryBars(data.categoryScores)}
+      </section>
+
+      <section class="section">
+        <div class="section-header">
+          <div class="section-icon">🎯</div>
+          <h3 class="section-title">Issues by Severity</h3>
+        </div>
+        ${generateSeverityBreakdown(data.findings)}
+      </section>
+
+      ${data.findings.length > 0 ? `
+      <section class="section">
+        <div class="section-header">
+          <div class="section-icon">🔍</div>
+          <h3 class="section-title">Key Findings</h3>
+        </div>
+        ${generateFindingsList(data.findings, { limit: 5, redactPaths: options.redactPaths })}
+      </section>
+      ` : ''}
+
+      <section class="section">
+        <div class="recommendation">
+          <h3>📋 Recommendation</h3>
+          <p>${data.verdict === 'SHIP' 
+            ? 'This application has passed all quality checks and is ready for production deployment. Continue monitoring after launch.'
+            : data.verdict === 'WARN'
+            ? 'This application can be deployed, but the identified issues should be addressed in the next sprint to ensure long-term stability.'
+            : 'This application requires immediate attention. Critical issues must be resolved before deployment to prevent production incidents.'
+          }</p>
+        </div>
+      </section>
+    </div>
+
+    <footer class="report-footer">
+      <div class="footer-brand">
+        <span>⚡</span>
+        <span>Vibecheck</span>
+      </div>
+      <div class="footer-meta">
+        Report ID: VC-${Date.now().toString(36).toUpperCase()} · vibecheck.dev
+      </div>
+    </footer>
+  </div>
+</body>
+</html>`;
+}
+
+/**
+ * Generate enhanced technical report
+ */
+function generateEnhancedTechnicalReport(data, options = {}) {
+  const verdictClass = data.verdict === 'SHIP' ? 'ship' : data.verdict === 'WARN' ? 'warn' : 'block';
+  
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Technical Quality Report - ${data.projectName}</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono&display=swap" rel="stylesheet">
+  <style>
+    ${getEnhancedStyles()}
+    .code-block { font-family: 'JetBrains Mono', monospace; background: #1e293b; color: #e2e8f0; padding: 16px; border-radius: 8px; overflow-x: auto; }
+    .finding-card { margin-bottom: 16px; }
+    .tech-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
+    .tech-table th, .tech-table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--gray-200); }
+    .tech-table th { background: var(--gray-100); font-weight: 600; }
+    .badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
+    .badge-critical { background: #fee2e2; color: #991b1b; }
+    .badge-high { background: #ffedd5; color: #9a3412; }
+    .badge-medium { background: #fef9c3; color: #854d0e; }
+    .badge-low { background: #f1f5f9; color: #475569; }
+  </style>
+</head>
+<body>
+  <div class="report">
+    <header class="report-header">
+      <h1>Technical Quality Report</h1>
+      <div class="report-meta">
+        <p><strong>Project:</strong> ${data.projectName}</p>
+        <p><strong>Generated:</strong> ${new Date(data.generatedAt).toLocaleString()}</p>
+        <p><strong>Scan ID:</strong> VC-${Date.now().toString(36).toUpperCase()}</p>
+      </div>
+      <div class="report-logo">VIBECHECK</div>
+    </header>
+
+    <section class="score-section">
+      <div class="score-main">
+        ${generateScoreGauge(data.score)}
+        <div class="score-info">
+          <h2>Technical Score</h2>
+          <p>${data.findings.length} issues found across ${Object.keys(data.categoryScores).length} categories</p>
+        </div>
+      </div>
+      <div class="verdict-badge ${verdictClass}">${data.verdict}</div>
+    </section>
+
+    <div class="report-content">
+      <section class="section">
+        <div class="section-header">
+          <div class="section-icon">📊</div>
+          <h3 class="section-title">Score Breakdown</h3>
+        </div>
+        <table class="tech-table">
+          <thead>
+            <tr><th>Category</th><th>Score</th><th>Status</th><th>Details</th></tr>
+          </thead>
+          <tbody>
+            ${Object.entries(data.categoryScores).map(([cat, score]) => `
+              <tr>
+                <td>${formatCategoryName(cat)}</td>
+                <td><strong>${score}%</strong></td>
+                <td>${score >= 80 ? '✅ Pass' : score >= 60 ? '⚠️ Warning' : '❌ Fail'}</td>
+                <td>${score >= 80 ? 'No issues' : 'Requires attention'}</td>
+              </tr>
+            `).join('')}
+          </tbody>
+        </table>
+      </section>
+
+      <section class="section">
+        <div class="section-header">
+          <div class="section-icon">🎯</div>
+          <h3 class="section-title">Issues by Severity</h3>
+        </div>
+        ${generateSeverityBreakdown(data.findings)}
+      </section>
+
+      <section class="section">
+        <div class="section-header">
+          <div class="section-icon">🔍</div>
+          <h3 class="section-title">All Findings (${data.findings.length})</h3>
+        </div>
+        ${generateFindingsList(data.findings, { limit: 50, redactPaths: options.redactPaths })}
+      </section>
+    </div>
+
+    <footer class="report-footer">
+      <div class="footer-brand">
+        <span>⚡</span>
+        <span>Vibecheck Technical Report</span>
+      </div>
+      <div class="footer-meta">
+        vibecheck.dev
+      </div>
+    </footer>
+  </div>
+</body>
+</html>`;
+}
+
+/**
+ * Generate enhanced compliance report
+ */
+function generateEnhancedComplianceReport(data, options = {}) {
+  const assessmentId = `VC-${new Date().toISOString().split('T')[0].replace(/-/g, '')}-${Math.random().toString(36).substring(2, 8).toUpperCase()}`;
+  const verdictClass = data.verdict === 'SHIP' ? 'ship' : data.verdict === 'WARN' ? 'warn' : 'block';
+  
+  const criticalCount = data.findings.filter(f => f.severity === 'critical').length;
+  const highCount = data.findings.filter(f => f.severity === 'high').length;
+  
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Security Assessment Report - ${data.projectName}</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    ${getEnhancedStyles()}
+    .compliance-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 24px 0; }
+    .compliance-card { background: var(--gray-50); padding: 20px; border-radius: 12px; border: 1px solid var(--gray-200); }
+    .compliance-card h4 { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
+    .control-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--gray-200); }
+    .control-item:last-child { border-bottom: none; }
+    .control-status { width: 24px; text-align: center; }
+    .attestation { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); color: white; padding: 32px; border-radius: 12px; margin-top: 32px; }
+    .attestation h3 { margin-bottom: 16px; }
+    .signature-line { margin-top: 32px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.2); display: flex; justify-content: space-between; }
+  </style>
+</head>
+<body>
+  <div class="report">
+    <header class="report-header" style="background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);">
+      <h1>Application Security Assessment</h1>
+      <div class="report-meta">
+        <p><strong>Application:</strong> ${data.projectName}</p>
+        <p><strong>Assessment Date:</strong> ${new Date(data.generatedAt).toLocaleDateString()}</p>
+        <p><strong>Assessment ID:</strong> ${assessmentId}</p>
+        ${options.company ? `<p><strong>Prepared For:</strong> ${options.company}</p>` : ''}
+      </div>
+      <div class="report-logo">VIBECHECK</div>
+    </header>
+
+    <section class="score-section">
+      <div class="score-main">
+        ${generateScoreGauge(data.score)}
+        <div class="score-info">
+          <h2>Security Score</h2>
+          <p>Based on automated code analysis and security checks</p>
+        </div>
+      </div>
+      <div class="verdict-badge ${verdictClass}">${data.verdict === 'SHIP' ? '✅ COMPLIANT' : data.verdict === 'WARN' ? '⚠️ PARTIAL' : '🚫 NON-COMPLIANT'}</div>
+    </section>
+
+    <div class="report-content">
+      <section class="section">
+        <div class="section-header">
+          <div class="section-icon" style="background: #1e3a5f;">📋</div>
+          <h3 class="section-title">Executive Summary</h3>
+        </div>
+        <p style="margin-bottom: 16px;">
+          This assessment evaluates the application's compliance with security best practices 
+          and industry standards. The analysis covers code quality, authentication mechanisms, 
+          data protection, and operational security controls.
+        </p>
+        <div class="compliance-grid">
+          <div class="compliance-card">
+            <h4>🔴 Critical Findings</h4>
+            <div style="font-size: 32px; font-weight: 700; color: ${criticalCount > 0 ? '#dc2626' : '#22c55e'};">${criticalCount}</div>
+            <p style="color: var(--gray-600); font-size: 14px;">${criticalCount > 0 ? 'Immediate remediation required' : 'No critical issues'}</p>
+          </div>
+          <div class="compliance-card">
+            <h4>🟠 High Priority</h4>
+            <div style="font-size: 32px; font-weight: 700; color: ${highCount > 0 ? '#f97316' : '#22c55e'};">${highCount}</div>
+            <p style="color: var(--gray-600); font-size: 14px;">${highCount > 0 ? 'Should be addressed soon' : 'No high priority issues'}</p>
+          </div>
+        </div>
+      </section>
+
+      <section class="section">
+        <div class="section-header">
+          <div class="section-icon" style="background: #1e3a5f;">🔒</div>
+          <h3 class="section-title">Control Areas Assessed</h3>
+        </div>
+        <div class="compliance-grid">
+          <div class="compliance-card">
+            <h4>🔐 Access Control</h4>
+            <div class="control-item">
+              <span class="control-status">${data.categoryScores.auth >= 80 ? '✅' : '❌'}</span>
+              <span>Authentication required for protected routes</span>
+            </div>
+            <div class="control-item">
+              <span class="control-status">⬜</span>
+              <span>Session management (manual review)</span>
+            </div>
+            <div class="control-item">
+              <span class="control-status">⬜</span>
+              <span>Password hashing (manual review)</span>
+            </div>
+          </div>
+          <div class="compliance-card">
+            <h4>🛡️ Data Protection</h4>
+            <div class="control-item">
+              <span class="control-status">⬜</span>
+              <span>Encryption in transit (TLS)</span>
+            </div>
+            <div class="control-item">
+              <span class="control-status">${data.findings.filter(f => f.type === 'secret').length === 0 ? '✅' : '❌'}</span>
+              <span>No secrets in codebase</span>
+            </div>
+          </div>
+          <div class="compliance-card">
+            <h4>💳 Payment Security</h4>
+            <div class="control-item">
+              <span class="control-status">${data.categoryScores.billing >= 80 ? '✅' : '❌'}</span>
+              <span>Billing gates enforced server-side</span>
+            </div>
+          </div>
+          <div class="compliance-card">
+            <h4>📝 Code Quality</h4>
+            <div class="control-item">
+              <span class="control-status">${data.categoryScores.code_quality >= 80 ? '✅' : '❌'}</span>
+              <span>No mock/demo code in production paths</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      ${data.findings.length > 0 ? `
+      <section class="section">
+        <div class="section-header">
+          <div class="section-icon" style="background: #1e3a5f;">🔍</div>
+          <h3 class="section-title">Findings Detail</h3>
+        </div>
+        ${generateFindingsList(data.findings, { limit: 10, redactPaths: options.redactPaths })}
+      </section>
+      ` : ''}
+
+      <div class="attestation">
+        <h3>📜 Attestation</h3>
+        <p>
+          This assessment was conducted using automated static code analysis and security scanning tools.
+          ${data.verdict === 'SHIP' 
+            ? 'The application meets the baseline security requirements for production deployment.'
+            : 'The application has identified issues that should be remediated before production deployment.'}
+        </p>
+        <div class="signature-line">
+          <div>
+            <strong>Assessment ID:</strong> ${assessmentId}
+          </div>
+          <div>
+            <strong>Verification:</strong> vibecheck.dev/verify/${assessmentId}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <footer class="report-footer">
+      <div class="footer-brand">
+        <span>🔒</span>
+        <span>Vibecheck Security Assessment</span>
+      </div>
+      <div class="footer-meta">
+        vibecheck.dev
+      </div>
+    </footer>
+  </div>
+</body>
+</html>`;
+}
+
+module.exports = {
+  generateScoreGauge,
+  generateCategoryBars,
+  generateSeverityBreakdown,
+  generateFindingsList,
+  getEnhancedStyles,
+  generateEnhancedExecutiveReport,
+  generateEnhancedTechnicalReport,
+  generateEnhancedComplianceReport,
+  formatCategoryName,
+};