@vibecheckai/cli 3.1.2 → 3.1.4

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

@@ -1,969 +1,967 @@
 /**
- * @deprecated Use html-report.js instead. This module is kept for backward compatibility.
- * Import from report.js for the unified API.
- */
-
-/**
- * Enhanced Report Templates
+ * Report Templates - Executive & Compliance Reports
  * 
- * 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
+ * Purpose-built reports for different audiences:
+ * - Executive: C-suite friendly, minimal technical detail
+ * - Compliance: SOC2/HIPAA/PCI-DSS ready language
  */
-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
+ * Generate Executive Report (C-Suite / Stakeholders)
+ * 
+ * Features:
+ * - Single-page summary
+ * - No code snippets or file paths
+ * - Risk-focused language
+ * - Clear action items
+ * - Print-ready layout
  */
-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,
-  };
+function generateEnhancedExecutiveReport(data, opts = {}) {
+  const { projectName, generatedAt, score, verdict, findings, categoryScores } = data;
+  const company = opts.company || "";
+  const logo = opts.logo || "";
   
-  const total = counts.critical + counts.high + counts.medium + counts.low;
+  // Calculate metrics
+  const criticalCount = findings?.filter(f => ["BLOCK", "critical"].includes(f.severity)).length || 0;
+  const highCount = findings?.filter(f => f.severity === "high").length || 0;
+  const totalIssues = findings?.length || 0;
   
-  const colors = {
-    critical: '#dc2626',
-    high: '#f97316',
-    medium: '#eab308',
-    low: '#94a3b8',
-  };
+  // Risk level
+  const riskLevel = score >= 80 ? "Low" : score >= 60 ? "Medium" : "High";
+  const riskColor = score >= 80 ? "#10b981" : score >= 60 ? "#f59e0b" : "#ef4444";
   
-  const icons = {
-    critical: '🔴',
-    high: '🟠',
-    medium: '🟡',
-    low: '⚪',
+  // Verdict config
+  const verdictMap = {
+    SHIP: { text: "Ready for Production", color: "#10b981", icon: "✓" },
+    WARN: { text: "Requires Attention", color: "#f59e0b", icon: "!" },
+    BLOCK: { text: "Not Recommended", color: "#ef4444", icon: "✕" },
   };
+  const v = verdictMap[verdict] || verdictMap.WARN;
   
-  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);
-    }
-
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Executive Summary - ${projectName}</title>
+  <style>
+    @page { size: letter; margin: 0.75in; }
+    
     * { box-sizing: border-box; margin: 0; padding: 0; }
     
     body {
-      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      color: var(--gray-800);
+      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
+      background: #ffffff;
+      color: #1a1a2e;
       line-height: 1.6;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      min-height: 100vh;
-      padding: 40px 20px;
-    }
-
-    .report {
-      max-width: 900px;
+      max-width: 850px;
       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 {
+    
+    .header {
       display: flex;
-      align-items: center;
       justify-content: space-between;
-      padding: 48px;
-      background: var(--gray-50);
-      border-bottom: 1px solid var(--gray-200);
+      align-items: flex-start;
+      border-bottom: 2px solid #e5e7eb;
+      padding-bottom: 24px;
+      margin-bottom: 32px;
     }
-
-    .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;
+    
+    .header-left h1 {
+      font-size: 28px;
       font-weight: 700;
-      fill: var(--gray-900);
+      color: #111827;
+      letter-spacing: -0.5px;
     }
-
-    .gauge-label {
+    
+    .header-left .subtitle {
       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;
+      color: #6b7280;
+      margin-top: 4px;
     }
-
-    .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;
+    
+    .header-right {
+      text-align: right;
     }
-
-    .score-info p {
-      color: var(--gray-600);
-      font-size: 14px;
+    
+    .logo {
+      height: 36px;
+      margin-bottom: 8px;
     }
-
-    /* Content Sections */
-    .report-content {
-      padding: 48px;
+    
+    .brand {
+      font-size: 12px;
+      color: #9ca3af;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
     }
-
-    .section {
-      margin-bottom: 48px;
+    
+    .hero {
+      display: grid;
+      grid-template-columns: 200px 1fr;
+      gap: 40px;
+      margin-bottom: 40px;
+      padding: 32px;
+      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+      border-radius: 16px;
+      border: 1px solid #e2e8f0;
     }
-
-    .section-header {
+    
+    .score-display {
       display: flex;
+      flex-direction: column;
       align-items: center;
-      gap: 12px;
-      margin-bottom: 24px;
+      justify-content: center;
     }
-
-    .section-icon {
-      width: 40px;
-      height: 40px;
-      border-radius: 10px;
+    
+    .score-circle {
+      width: 140px;
+      height: 140px;
+      border-radius: 50%;
+      background: conic-gradient(
+        ${riskColor} 0deg,
+        ${riskColor} ${score * 3.6}deg,
+        #e5e7eb ${score * 3.6}deg,
+        #e5e7eb 360deg
+      );
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 20px;
-      background: var(--primary);
-      color: white;
+      position: relative;
     }
-
-    .section-title {
-      font-size: 20px;
-      font-weight: 600;
+    
+    .score-circle::before {
+      content: '';
+      position: absolute;
+      width: 110px;
+      height: 110px;
+      border-radius: 50%;
+      background: white;
     }
-
-    /* Category Bars */
-    .category-bars {
+    
+    .score-value {
+      position: relative;
+      font-size: 40px;
+      font-weight: 800;
+      color: ${riskColor};
+    }
+    
+    .score-label {
+      font-size: 12px;
+      color: #6b7280;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      margin-top: 12px;
+    }
+    
+    .verdict-section {
       display: flex;
       flex-direction: column;
-      gap: 16px;
+      justify-content: center;
     }
-
-    .category-bar-item {
-      background: var(--gray-50);
-      padding: 16px;
-      border-radius: 12px;
+    
+    .verdict-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 20px;
+      background: ${v.color}15;
+      border: 1px solid ${v.color}30;
+      border-radius: 50px;
+      width: fit-content;
+      margin-bottom: 16px;
     }
-
-    .category-bar-header {
+    
+    .verdict-icon {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background: ${v.color};
+      color: white;
       display: flex;
       align-items: center;
-      gap: 8px;
-      margin-bottom: 8px;
-    }
-
-    .category-icon {
-      font-weight: 600;
-    }
-
-    .category-name {
-      flex: 1;
-      font-weight: 500;
-    }
-
-    .category-score {
+      justify-content: center;
       font-weight: 700;
+      font-size: 14px;
     }
-
-    .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;
+    
+    .verdict-text {
+      font-weight: 700;
+      font-size: 15px;
+      color: ${v.color};
     }
-
-    /* Severity Breakdown */
-    .severity-breakdown {
-      background: var(--gray-50);
-      padding: 24px;
-      border-radius: 12px;
+    
+    .verdict-summary {
+      font-size: 15px;
+      color: #374151;
+      line-height: 1.7;
     }
-
-    .severity-bar {
-      display: flex;
-      height: 24px;
-      border-radius: 12px;
-      overflow: hidden;
-      margin-bottom: 20px;
+    
+    .section {
+      margin-bottom: 32px;
     }
-
-    .severity-segment {
-      transition: width 0.5s ease-out;
+    
+    .section-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #111827;
+      margin-bottom: 16px;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #e5e7eb;
     }
-
-    .severity-legend {
+    
+    .metrics-grid {
       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);
+    
+    .metric-card {
+      background: #f9fafb;
+      border: 1px solid #e5e7eb;
+      border-radius: 12px;
+      padding: 20px;
+      text-align: center;
     }
-
-    .severity-count {
+    
+    .metric-value {
+      font-size: 32px;
       font-weight: 700;
-      font-size: 18px;
     }
-
-    /* Findings List */
-    .findings-list {
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
+    
+    .metric-value.critical { color: #ef4444; }
+    .metric-value.high { color: #f97316; }
+    .metric-value.medium { color: #f59e0b; }
+    .metric-value.low { color: #3b82f6; }
+    .metric-value.neutral { color: #6b7280; }
+    
+    .metric-label {
+      font-size: 12px;
+      color: #6b7280;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-top: 4px;
     }
-
-    .finding-card {
-      background: var(--gray-50);
-      border-left: 4px solid;
-      padding: 16px 20px;
-      border-radius: 0 12px 12px 0;
+    
+    .risk-table {
+      width: 100%;
+      border-collapse: collapse;
     }
-
-    .finding-header {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      margin-bottom: 8px;
+    
+    .risk-table th {
+      text-align: left;
+      font-size: 12px;
+      color: #6b7280;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      padding: 12px 16px;
+      background: #f9fafb;
+      border-bottom: 1px solid #e5e7eb;
     }
-
-    .finding-severity {
-      padding: 2px 8px;
-      border-radius: 4px;
-      font-size: 10px;
-      font-weight: 700;
-      color: white;
+    
+    .risk-table td {
+      padding: 16px;
+      border-bottom: 1px solid #e5e7eb;
+      font-size: 14px;
     }
-
-    .finding-title {
+    
+    .risk-table .category {
       font-weight: 600;
+      color: #111827;
     }
-
-    .finding-description {
-      color: var(--gray-600);
-      font-size: 14px;
-      margin-bottom: 8px;
-    }
-
-    .finding-file {
+    
+    .status-badge {
       display: inline-block;
-      background: var(--gray-200);
-      padding: 4px 8px;
-      border-radius: 4px;
+      padding: 4px 12px;
+      border-radius: 50px;
       font-size: 12px;
-      color: var(--gray-600);
+      font-weight: 600;
     }
-
-    .finding-fix {
-      margin-top: 8px;
-      padding: 8px 12px;
-      background: rgba(34, 197, 94, 0.1);
-      border-radius: 6px;
-      font-size: 13px;
-      color: #166534;
+    
+    .status-badge.pass { background: #d1fae5; color: #065f46; }
+    .status-badge.attention { background: #fef3c7; color: #92400e; }
+    .status-badge.fail { background: #fee2e2; color: #991b1b; }
+    
+    .recommendation-box {
+      background: #fffbeb;
+      border: 1px solid #fcd34d;
+      border-radius: 12px;
+      padding: 20px;
     }
-
-    .findings-more {
-      text-align: center;
-      padding: 16px;
-      color: var(--gray-600);
-      font-style: italic;
+    
+    .recommendation-title {
+      font-weight: 600;
+      color: #92400e;
+      margin-bottom: 8px;
     }
-
-    /* Footer */
-    .report-footer {
-      background: var(--gray-900);
-      color: white;
-      padding: 32px 48px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
+    
+    .recommendation-text {
+      font-size: 14px;
+      color: #78350f;
+      line-height: 1.6;
     }
-
-    .footer-brand {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-weight: 600;
+    
+    .action-list {
+      list-style: none;
+      margin-top: 12px;
     }
-
-    .footer-meta {
-      font-size: 12px;
-      opacity: 0.6;
+    
+    .action-list li {
+      padding: 8px 0 8px 24px;
+      position: relative;
+      font-size: 14px;
+      color: #78350f;
     }
-
-    /* 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);
+    
+    .action-list li::before {
+      content: '→';
+      position: absolute;
+      left: 0;
+      color: #f59e0b;
+      font-weight: bold;
     }
-
-    .recommendation h3 {
-      margin-bottom: 8px;
+    
+    .footer {
+      margin-top: 48px;
+      padding-top: 24px;
+      border-top: 1px solid #e5e7eb;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 12px;
+      color: #9ca3af;
     }
-
-    .recommendation p {
-      color: var(--gray-600);
+    
+    .footer a {
+      color: #6b7280;
+      text-decoration: none;
     }
-
+    
     @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>
+      body { padding: 0; max-width: none; }
+      .hero { break-inside: avoid; }
+      .section { break-inside: avoid; }
+    }
+  </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>
+  <header class="header">
+    <div class="header-left">
+      <h1>Security Assessment</h1>
+      <div class="subtitle">${projectName} · ${new Date(generatedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</div>
+    </div>
+    <div class="header-right">
+      ${logo ? `<img src="${logo}" alt="Logo" class="logo">` : ''}
+      <div class="brand">${company || 'VibeCheck Report'}</div>
+    </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>
+  <section class="hero">
+    <div class="score-display">
+      <div class="score-circle">
+        <span class="score-value">${score}</span>
       </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 class="score-label">Security Score</div>
     </div>
-
-    <footer class="report-footer">
-      <div class="footer-brand">
-        <span>⚡</span>
-        <span>Vibecheck</span>
+    <div class="verdict-section">
+      <div class="verdict-badge">
+        <span class="verdict-icon">${v.icon}</span>
+        <span class="verdict-text">${v.text}</span>
+      </div>
+      <p class="verdict-summary">${getExecutiveSummary(verdict, criticalCount, highCount, score)}</p>
+    </div>
+  </section>
+
+  <section class="section">
+    <h2 class="section-title">Risk Overview</h2>
+    <div class="metrics-grid">
+      <div class="metric-card">
+        <div class="metric-value critical">${criticalCount}</div>
+        <div class="metric-label">Critical Risk</div>
       </div>
-      <div class="footer-meta">
-        Report ID: VC-${Date.now().toString(36).toUpperCase()} · vibecheck.dev
+      <div class="metric-card">
+        <div class="metric-value high">${highCount}</div>
+        <div class="metric-label">High Risk</div>
       </div>
-    </footer>
-  </div>
+      <div class="metric-card">
+        <div class="metric-value neutral">${totalIssues}</div>
+        <div class="metric-label">Total Issues</div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-value" style="color: ${riskColor}">${riskLevel}</div>
+        <div class="metric-label">Risk Level</div>
+      </div>
+    </div>
+  </section>
+
+  ${categoryScores && Object.keys(categoryScores).length > 0 ? `
+  <section class="section">
+    <h2 class="section-title">Security Categories</h2>
+    <table class="risk-table">
+      <thead>
+        <tr>
+          <th>Category</th>
+          <th>Score</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${Object.entries(categoryScores).map(([cat, catScore]) => {
+          const status = catScore >= 80 ? 'pass' : catScore >= 60 ? 'attention' : 'fail';
+          const statusText = catScore >= 80 ? 'Passing' : catScore >= 60 ? 'Needs Review' : 'At Risk';
+          return `
+          <tr>
+            <td class="category">${formatCategoryName(cat)}</td>
+            <td>${catScore}%</td>
+            <td><span class="status-badge ${status}">${statusText}</span></td>
+          </tr>
+          `;
+        }).join('')}
+      </tbody>
+    </table>
+  </section>
+  ` : ''}
+
+  <section class="section">
+    <h2 class="section-title">Recommended Actions</h2>
+    <div class="recommendation-box">
+      <div class="recommendation-title">${getRecommendationTitle(verdict)}</div>
+      <p class="recommendation-text">${getRecommendationText(verdict, criticalCount, highCount)}</p>
+      <ul class="action-list">
+        ${getActionItems(verdict, criticalCount, highCount).map(item => `<li>${item}</li>`).join('')}
+      </ul>
+    </div>
+  </section>
+
+  <footer class="footer">
+    <span>Generated by VibeCheck · <a href="https://vibecheck.dev">vibecheck.dev</a></span>
+    <span>Report ID: ${data.reportId || 'VC-' + Date.now().toString(36).toUpperCase()}</span>
+  </footer>
 </body>
 </html>`;
 }
 
 /**
- * Generate enhanced technical report
+ * Generate Compliance Report (SOC2/HIPAA/PCI-DSS ready)
  */
-function generateEnhancedTechnicalReport(data, options = {}) {
-  const verdictClass = data.verdict === 'SHIP' ? 'ship' : data.verdict === 'WARN' ? 'warn' : 'block';
+function generateEnhancedComplianceReport(data, opts = {}) {
+  const { projectName, generatedAt, score, verdict, findings, categoryScores } = data;
+  const company = opts.company || "Organization";
+  const framework = opts.framework || "SOC2";
+  
+  // Map findings to compliance controls
+  const complianceMapping = mapToComplianceControls(findings || [], framework);
   
   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">
+  <title>${framework} Compliance Report - ${projectName}</title>
   <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; }
+    @page { size: letter; margin: 0.75in; }
+    
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    
+    body {
+      font-family: 'Times New Roman', Georgia, serif;
+      background: #ffffff;
+      color: #1a1a1a;
+      line-height: 1.7;
+      max-width: 850px;
+      margin: 0 auto;
+      padding: 48px;
+      font-size: 12pt;
+    }
+    
+    .cover {
+      text-align: center;
+      padding: 80px 0;
+      border-bottom: 3px double #1a1a1a;
+      margin-bottom: 40px;
+    }
+    
+    .cover h1 {
+      font-size: 28pt;
+      font-weight: normal;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      margin-bottom: 16px;
+    }
+    
+    .cover .subtitle {
+      font-size: 14pt;
+      color: #666;
+      margin-bottom: 40px;
+    }
+    
+    .cover .meta {
+      font-size: 11pt;
+      color: #666;
+    }
+    
+    .cover .meta p {
+      margin: 4px 0;
+    }
+    
+    .toc {
+      margin-bottom: 40px;
+      page-break-after: always;
+    }
+    
+    .toc h2 {
+      font-size: 14pt;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      border-bottom: 1px solid #1a1a1a;
+      padding-bottom: 8px;
+      margin-bottom: 16px;
+    }
+    
+    .toc-item {
+      display: flex;
+      justify-content: space-between;
+      padding: 8px 0;
+      border-bottom: 1px dotted #ccc;
+    }
+    
+    .section {
+      margin-bottom: 32px;
+    }
+    
+    .section h2 {
+      font-size: 14pt;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      border-bottom: 1px solid #1a1a1a;
+      padding-bottom: 8px;
+      margin-bottom: 16px;
+    }
+    
+    .section h3 {
+      font-size: 12pt;
+      font-weight: bold;
+      margin: 16px 0 8px;
+    }
+    
+    p {
+      margin-bottom: 12px;
+      text-align: justify;
+    }
+    
+    .attestation-box {
+      border: 2px solid #1a1a1a;
+      padding: 24px;
+      margin: 24px 0;
+      background: #fafafa;
+    }
+    
+    .attestation-box h3 {
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      font-size: 11pt;
+      margin-bottom: 12px;
+    }
+    
+    .control-table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 16px 0;
+      font-size: 10pt;
+    }
+    
+    .control-table th {
+      text-align: left;
+      background: #f0f0f0;
+      padding: 12px;
+      border: 1px solid #ccc;
+      font-weight: bold;
+    }
+    
+    .control-table td {
+      padding: 12px;
+      border: 1px solid #ccc;
+      vertical-align: top;
+    }
+    
+    .control-id {
+      font-family: 'Courier New', monospace;
+      font-weight: bold;
+    }
+    
+    .status-compliant {
+      color: #065f46;
+      font-weight: bold;
+    }
+    
+    .status-partial {
+      color: #92400e;
+      font-weight: bold;
+    }
+    
+    .status-gap {
+      color: #991b1b;
+      font-weight: bold;
+    }
+    
+    .finding-ref {
+      font-family: 'Courier New', monospace;
+      font-size: 9pt;
+      color: #666;
+    }
+    
+    .signature-section {
+      margin-top: 60px;
+      padding-top: 24px;
+      border-top: 1px solid #1a1a1a;
+    }
+    
+    .signature-line {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 40px;
+      margin-top: 40px;
+    }
+    
+    .signature-block {
+      border-top: 1px solid #1a1a1a;
+      padding-top: 8px;
+    }
+    
+    .signature-label {
+      font-size: 10pt;
+      color: #666;
+    }
+    
+    .footer {
+      margin-top: 40px;
+      padding-top: 16px;
+      border-top: 1px solid #ccc;
+      font-size: 10pt;
+      color: #666;
+      text-align: center;
+    }
+    
+    @media print {
+      body { padding: 0; max-width: none; }
+      .section { break-inside: avoid; }
+      .control-table { break-inside: avoid; }
+    }
   </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="cover">
+    <h1>${framework} Type II</h1>
+    <div class="subtitle">Security Assessment Report</div>
+    <p style="font-size: 18pt; margin-bottom: 40px;">${company}</p>
+    <div class="meta">
+      <p><strong>Application:</strong> ${projectName}</p>
+      <p><strong>Assessment Date:</strong> ${new Date(generatedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
+      <p><strong>Report Period:</strong> Point-in-Time Assessment</p>
+      <p><strong>Overall Score:</strong> ${score}/100</p>
+    </div>
+  </div>
 
-    <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>
+  <div class="toc">
+    <h2>Table of Contents</h2>
+    <div class="toc-item"><span>1. Executive Summary</span><span>2</span></div>
+    <div class="toc-item"><span>2. Scope of Assessment</span><span>3</span></div>
+    <div class="toc-item"><span>3. Control Assessment Results</span><span>4</span></div>
+    <div class="toc-item"><span>4. Findings and Recommendations</span><span>5</span></div>
+    <div class="toc-item"><span>5. Management Attestation</span><span>6</span></div>
+  </div>
 
-      <section class="section">
-        <div class="section-header">
-          <div class="section-icon">🎯</div>
-          <h3 class="section-title">Issues by Severity</h3>
+  <section class="section">
+    <h2>1. Executive Summary</h2>
+    <p>This report presents the results of a ${framework} security assessment conducted on ${projectName} as of ${new Date(generatedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}. The assessment was performed using automated security scanning tools to evaluate the application's adherence to ${framework} Trust Services Criteria.</p>
+    
+    <div class="attestation-box">
+      <h3>Assessment Summary</h3>
+      <p><strong>Overall Compliance Score:</strong> ${score}/100</p>
+      <p><strong>Assessment Result:</strong> ${getComplianceVerdict(score)}</p>
+      <p><strong>Critical Findings:</strong> ${findings?.filter(f => f.severity === 'critical' || f.severity === 'BLOCK').length || 0}</p>
+      <p><strong>Total Findings:</strong> ${findings?.length || 0}</p>
+    </div>
+    
+    <p>${getComplianceSummaryText(score, findings?.length || 0)}</p>
+  </section>
+
+  <section class="section">
+    <h2>2. Scope of Assessment</h2>
+    <p>The assessment covered the following areas of the ${projectName} application:</p>
+    <ul style="margin-left: 24px; margin-bottom: 16px;">
+      <li>Source code security analysis</li>
+      <li>Authentication and authorization controls</li>
+      <li>Data protection mechanisms</li>
+      <li>Configuration management</li>
+      <li>Error handling and logging</li>
+      <li>Third-party dependency analysis</li>
+    </ul>
+    <p>The assessment was conducted using VibeCheck automated security scanning, which evaluates code against industry-standard security controls and best practices.</p>
+  </section>
+
+  <section class="section">
+    <h2>3. Control Assessment Results</h2>
+    <p>The following table summarizes the assessment results mapped to ${framework} Trust Services Criteria:</p>
+    
+    <table class="control-table">
+      <thead>
+        <tr>
+          <th style="width: 100px;">Control ID</th>
+          <th style="width: 200px;">Control Description</th>
+          <th style="width: 80px;">Status</th>
+          <th>Findings</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${complianceMapping.map(control => `
+        <tr>
+          <td class="control-id">${control.id}</td>
+          <td>${control.description}</td>
+          <td class="${control.statusClass}">${control.status}</td>
+          <td>${control.findings.length > 0 
+            ? control.findings.map(f => `<span class="finding-ref">${f}</span>`).join(', ')
+            : 'No findings'}</td>
+        </tr>
+        `).join('')}
+      </tbody>
+    </table>
+  </section>
+
+  <section class="section">
+    <h2>4. Findings and Recommendations</h2>
+    ${findings && findings.length > 0 ? `
+    <p>The following findings were identified during the assessment and require remediation:</p>
+    
+    ${findings.filter(f => f.severity === 'critical' || f.severity === 'BLOCK' || f.severity === 'high').slice(0, 10).map((f, i) => `
+    <h3>Finding ${i + 1}: ${sanitizeHtml(f.title || f.message)}</h3>
+    <p><strong>Severity:</strong> ${(f.severity || 'medium').toUpperCase()}</p>
+    <p><strong>Impact:</strong> ${getComplianceImpact(f.severity)}</p>
+    <p><strong>Recommendation:</strong> ${sanitizeHtml(f.fix) || 'Implement appropriate controls to address this finding.'}</p>
+    `).join('')}
+    ` : `
+    <p>No significant findings were identified during this assessment. The application demonstrates strong adherence to ${framework} security controls.</p>
+    `}
+  </section>
+
+  <section class="section">
+    <h2>5. Management Attestation</h2>
+    <p>This security assessment report has been prepared in accordance with ${framework} Trust Services Criteria. The assessment represents a point-in-time evaluation of the security controls implemented within the ${projectName} application.</p>
+    
+    <div class="attestation-box">
+      <p>Management of ${company} is responsible for the design, implementation, and maintenance of effective internal controls relevant to the security, availability, processing integrity, confidentiality, and privacy of the ${projectName} application.</p>
+    </div>
+    
+    <div class="signature-section">
+      <p>Authorized Signatures:</p>
+      <div class="signature-line">
+        <div class="signature-block">
+          <div class="signature-label">Security Officer / Date</div>
         </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 class="signature-block">
+          <div class="signature-label">Engineering Lead / Date</div>
         </div>
-        ${generateFindingsList(data.findings, { limit: 50, redactPaths: options.redactPaths })}
-      </section>
+      </div>
     </div>
+  </section>
 
-    <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>
+  <footer class="footer">
+    <p>This report was generated by VibeCheck Security Assessment Tool · vibecheck.dev</p>
+    <p>Report ID: ${data.reportId || 'VC-' + Date.now().toString(36).toUpperCase()}</p>
+  </footer>
 </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>
+// ============================================================================
+// HELPER FUNCTIONS
+// ============================================================================
 
-    <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>
+function formatCategoryName(cat) {
+  const names = {
+    security: "Security Controls",
+    auth: "Authentication & Access",
+    billing: "Payment Security",
+    routes: "API Security",
+    env: "Configuration Management",
+    quality: "Code Quality",
+    mock: "Data Integrity",
+    error: "Error Handling",
+  };
+  return names[cat] || cat.charAt(0).toUpperCase() + cat.slice(1).replace(/_/g, " ");
+}
 
-    <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>
+function getExecutiveSummary(verdict, critical, high, score) {
+  if (verdict === "SHIP") {
+    return "The application has successfully passed all critical security checks. No blocking vulnerabilities were identified, and the security posture meets production deployment requirements.";
+  } else if (verdict === "WARN") {
+    return `The application requires attention before production deployment. ${critical > 0 ? `${critical} critical` : `${high} high priority`} security issue${(critical + high) > 1 ? 's were' : ' was'} identified that should be addressed to reduce organizational risk.`;
+  } else {
+    return `The application is not recommended for production deployment in its current state. ${critical} critical security vulnerabilit${critical > 1 ? 'ies were' : 'y was'} identified that pose significant risk to the organization.`;
+  }
+}
 
-      <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>
+function getRecommendationTitle(verdict) {
+  if (verdict === "SHIP") return "Proceed with Deployment";
+  if (verdict === "WARN") return "Address Issues Before Deployment";
+  return "Halt Deployment - Remediation Required";
+}
 
-      ${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>
-      ` : ''}
+function getRecommendationText(verdict, critical, high) {
+  if (verdict === "SHIP") {
+    return "The security assessment indicates the application is ready for production. Maintain security hygiene through regular assessments.";
+  } else if (verdict === "WARN") {
+    return `Based on the assessment findings, we recommend addressing the identified issues before proceeding to production. Estimated remediation effort: ${(critical * 2 + high)}–${(critical * 4 + high * 2)} hours.`;
+  } else {
+    return `Immediate remediation is required before this application should be considered for production deployment. The identified vulnerabilities represent unacceptable risk to the organization.`;
+  }
+}
 
-      <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>
+function getActionItems(verdict, critical, high) {
+  if (verdict === "SHIP") {
+    return [
+      "Schedule regular security assessments (recommended: quarterly)",
+      "Monitor for newly discovered vulnerabilities in dependencies",
+      "Maintain security documentation for compliance purposes",
+    ];
+  } else if (verdict === "WARN") {
+    return [
+      critical > 0 ? `Resolve ${critical} critical finding${critical > 1 ? 's' : ''} immediately` : `Address ${high} high priority finding${high > 1 ? 's' : ''}`,
+      "Conduct security review with engineering team",
+      "Re-run assessment after remediation before deployment",
+    ];
+  } else {
+    return [
+      `Immediately address all ${critical} critical vulnerabilities`,
+      "Implement security review process before any code changes",
+      "Consider engaging security consultant for remediation guidance",
+      "Do not deploy to production until all critical issues are resolved",
+    ];
+  }
+}
 
-    <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>`;
+function mapToComplianceControls(findings, framework) {
+  // SOC2 Trust Services Criteria mapping
+  const controls = [
+    { id: "CC6.1", description: "Logical Access Security", category: ["auth", "secret"] },
+    { id: "CC6.2", description: "Access Provisioning", category: ["auth"] },
+    { id: "CC6.6", description: "Data Transmission Protection", category: ["security", "config"] },
+    { id: "CC6.7", description: "Data Destruction", category: ["quality"] },
+    { id: "CC7.1", description: "Configuration Management", category: ["config", "env"] },
+    { id: "CC7.2", description: "Security Monitoring", category: ["error", "quality"] },
+    { id: "CC8.1", description: "Change Management", category: ["quality", "mock"] },
+    { id: "CC9.1", description: "Business Continuity", category: ["error"] },
+    { id: "PI1.1", description: "Input Validation", category: ["injection", "xss", "security"] },
+    { id: "A1.2", description: "System Availability", category: ["error", "route"] },
+  ];
+  
+  return controls.map(control => {
+    const relatedFindings = findings.filter(f => 
+      control.category.includes(f.type) || control.category.includes(f.category)
+    );
+    
+    const criticalCount = relatedFindings.filter(f => 
+      f.severity === "critical" || f.severity === "BLOCK"
+    ).length;
+    
+    const highCount = relatedFindings.filter(f => f.severity === "high").length;
+    
+    let status, statusClass;
+    if (criticalCount > 0) {
+      status = "Gap";
+      statusClass = "status-gap";
+    } else if (highCount > 0 || relatedFindings.length > 2) {
+      status = "Partial";
+      statusClass = "status-partial";
+    } else {
+      status = "Compliant";
+      statusClass = "status-compliant";
+    }
+    
+    return {
+      ...control,
+      status,
+      statusClass,
+      findings: relatedFindings.slice(0, 3).map(f => f.id),
+    };
+  });
+}
+
+function getComplianceVerdict(score) {
+  if (score >= 80) return "Meets Requirements";
+  if (score >= 60) return "Partially Meets Requirements";
+  return "Does Not Meet Requirements";
+}
+
+function getComplianceSummaryText(score, findingCount) {
+  if (score >= 80) {
+    return `The assessment indicates that ${findingCount > 0 ? 'while minor findings were identified, ' : ''}the application substantially meets the security requirements outlined in the Trust Services Criteria. Continued monitoring and periodic assessments are recommended to maintain compliance.`;
+  } else if (score >= 60) {
+    return `The assessment identified several areas where the application's security controls require enhancement to fully meet Trust Services Criteria requirements. Remediation of the identified findings is recommended before the next audit period.`;
+  } else {
+    return `The assessment identified significant gaps in the application's security controls relative to Trust Services Criteria requirements. Management should prioritize remediation of critical and high-severity findings before considering the application compliant.`;
+  }
+}
+
+function getComplianceImpact(severity) {
+  const impacts = {
+    critical: "This finding represents a significant risk that could result in unauthorized access, data breach, or system compromise.",
+    BLOCK: "This finding represents a significant risk that could result in unauthorized access, data breach, or system compromise.",
+    high: "This finding could potentially lead to security incidents if exploited.",
+    medium: "This finding represents a moderate risk that should be addressed to maintain security posture.",
+    low: "This finding represents a minor risk with limited potential impact.",
+  };
+  return impacts[severity] || impacts.medium;
+}
+
+function sanitizeHtml(str) {
+  if (!str) return '';
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+/**
+ * Generate Technical Report (for developers/CTOs)
+ */
+function generateEnhancedTechnicalReport(data, opts = {}) {
+  // For technical reports, we use the main HTML generator
+  // This is a passthrough - the report-html.js handles technical reports
+  const reportHtml = require("./report-html");
+  
+  // Build report data if needed
+  const reportData = {
+    meta: {
+      projectName: data.projectName,
+      generatedAt: data.generatedAt,
+      version: "2.0.0",
+      reportId: data.reportId || 'VC-' + Date.now().toString(36).toUpperCase(),
+    },
+    summary: {
+      score: data.score,
+      verdict: data.verdict,
+      totalFindings: data.findings?.length || 0,
+      severityCounts: {
+        critical: data.findings?.filter(f => f.severity === "BLOCK" || f.severity === "critical").length || 0,
+        high: data.findings?.filter(f => f.severity === "high").length || 0,
+        medium: data.findings?.filter(f => f.severity === "WARN" || f.severity === "medium").length || 0,
+        low: data.findings?.filter(f => f.severity === "INFO" || f.severity === "low").length || 0,
+      },
+      categoryScores: data.categoryScores || {},
+    },
+    findings: data.findings || [],
+    fixEstimates: { humanReadable: "~2h" },
+    reality: data.reality || null,
+  };
+  
+  return reportHtml.generateWorldClassHTML(reportData, opts);
 }
 
 module.exports = {
-  generateScoreGauge,
-  generateCategoryBars,
-  generateSeverityBreakdown,
-  generateFindingsList,
-  getEnhancedStyles,
   generateEnhancedExecutiveReport,
-  generateEnhancedTechnicalReport,
   generateEnhancedComplianceReport,
-  formatCategoryName,
+  generateEnhancedTechnicalReport,
 };