@vibecheckai/cli 2.8.2 → 3.0.0

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

@@ -0,0 +1,1117 @@
+/**
+ * World-Class HTML Report Templates
+ * 
+ * Features:
+ * - Modern glass-morphism design
+ * - Animated Chart.js visualizations
+ * - Interactive findings explorer
+ * - Dark/light mode toggle
+ * - Print-optimized CSS
+ * - Responsive mobile layout
+ * - Accessibility compliant
+ */
+
+const { formatCategoryName } = require("./report-engine");
+
+// ============================================================================
+// CSS DESIGN SYSTEM
+// ============================================================================
+
+function getDesignSystem() {
+  return `
+:root {
+  /* Colors */
+  --color-bg: #0f172a;
+  --color-bg-card: rgba(30, 41, 59, 0.8);
+  --color-bg-elevated: rgba(51, 65, 85, 0.6);
+  --color-text: #f8fafc;
+  --color-text-muted: #94a3b8;
+  --color-text-dim: #64748b;
+  --color-border: rgba(148, 163, 184, 0.2);
+  
+  /* Brand */
+  --color-primary: #3b82f6;
+  --color-primary-glow: rgba(59, 130, 246, 0.4);
+  
+  /* Status */
+  --color-ship: #22c55e;
+  --color-ship-bg: rgba(34, 197, 94, 0.15);
+  --color-warn: #f59e0b;
+  --color-warn-bg: rgba(245, 158, 11, 0.15);
+  --color-block: #ef4444;
+  --color-block-bg: rgba(239, 68, 68, 0.15);
+  
+  /* Severity */
+  --color-critical: #ef4444;
+  --color-high: #f97316;
+  --color-medium: #eab308;
+  --color-low: #6b7280;
+  
+  /* Spacing */
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 16px;
+  --space-lg: 24px;
+  --space-xl: 32px;
+  --space-2xl: 48px;
+  --space-3xl: 64px;
+  
+  /* Radius */
+  --radius-sm: 6px;
+  --radius-md: 12px;
+  --radius-lg: 20px;
+  --radius-xl: 28px;
+  --radius-full: 9999px;
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
+  --shadow-glow: 0 0 40px var(--color-primary-glow);
+  
+  /* Typography */
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+  
+  /* Transitions */
+  --transition-fast: 150ms ease;
+  --transition-normal: 250ms ease;
+  --transition-slow: 400ms ease;
+}
+
+/* Light mode */
+[data-theme="light"] {
+  --color-bg: #f8fafc;
+  --color-bg-card: rgba(255, 255, 255, 0.9);
+  --color-bg-elevated: rgba(241, 245, 249, 0.9);
+  --color-text: #0f172a;
+  --color-text-muted: #475569;
+  --color-text-dim: #94a3b8;
+  --color-border: rgba(148, 163, 184, 0.3);
+  --color-ship-bg: rgba(34, 197, 94, 0.1);
+  --color-warn-bg: rgba(245, 158, 11, 0.1);
+  --color-block-bg: rgba(239, 68, 68, 0.1);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-sans);
+  background: var(--color-bg);
+  color: var(--color-text);
+  line-height: 1.6;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Background pattern */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background: 
+    radial-gradient(circle at 20% 20%, var(--color-primary-glow), transparent 40%),
+    radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.2), transparent 40%);
+  pointer-events: none;
+  z-index: -1;
+}
+
+/* ============================================================================
+   LAYOUT
+   ============================================================================ */
+
+.report {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: var(--space-xl);
+}
+
+@media (max-width: 768px) {
+  .report {
+    padding: var(--space-md);
+  }
+}
+
+/* ============================================================================
+   HEADER
+   ============================================================================ */
+
+.report-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: var(--space-2xl);
+  padding-bottom: var(--space-xl);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.report-title {
+  font-size: 2rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  margin-bottom: var(--space-sm);
+}
+
+.report-meta {
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+}
+
+.report-meta span {
+  display: block;
+}
+
+.report-actions {
+  display: flex;
+  gap: var(--space-sm);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-card);
+  color: var(--color-text);
+}
+
+.btn:hover {
+  background: var(--color-bg-elevated);
+  transform: translateY(-1px);
+}
+
+.btn-icon {
+  padding: var(--space-sm);
+}
+
+/* ============================================================================
+   HERO SECTION (Score + Verdict)
+   ============================================================================ */
+
+.hero-section {
+  display: grid;
+  grid-template-columns: 1fr 1.5fr;
+  gap: var(--space-xl);
+  margin-bottom: var(--space-2xl);
+}
+
+@media (max-width: 768px) {
+  .hero-section {
+    grid-template-columns: 1fr;
+  }
+}
+
+.score-card {
+  background: var(--color-bg-card);
+  backdrop-filter: blur(20px);
+  border-radius: var(--radius-xl);
+  padding: var(--space-2xl);
+  border: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.score-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, transparent, rgba(255,255,255,0.05));
+  pointer-events: none;
+}
+
+.score-ring {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  margin-bottom: var(--space-lg);
+}
+
+.score-ring svg {
+  transform: rotate(-90deg);
+}
+
+.score-ring-bg {
+  fill: none;
+  stroke: var(--color-border);
+  stroke-width: 12;
+}
+
+.score-ring-progress {
+  fill: none;
+  stroke-width: 12;
+  stroke-linecap: round;
+  transition: stroke-dasharray 1s ease-out;
+}
+
+.score-ring-progress.ship { stroke: var(--color-ship); }
+.score-ring-progress.warn { stroke: var(--color-warn); }
+.score-ring-progress.block { stroke: var(--color-block); }
+
+.score-value {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 3.5rem;
+  font-weight: 800;
+  letter-spacing: -0.05em;
+}
+
+.score-label {
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.verdict-card {
+  background: var(--color-bg-card);
+  backdrop-filter: blur(20px);
+  border-radius: var(--radius-xl);
+  padding: var(--space-2xl);
+  border: 1px solid var(--color-border);
+}
+
+.verdict-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-md) var(--space-xl);
+  border-radius: var(--radius-full);
+  font-size: 1.25rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: var(--space-lg);
+}
+
+.verdict-badge.ship {
+  background: var(--color-ship-bg);
+  color: var(--color-ship);
+  box-shadow: 0 0 30px rgba(34, 197, 94, 0.3);
+}
+
+.verdict-badge.warn {
+  background: var(--color-warn-bg);
+  color: var(--color-warn);
+  box-shadow: 0 0 30px rgba(245, 158, 11, 0.3);
+}
+
+.verdict-badge.block {
+  background: var(--color-block-bg);
+  color: var(--color-block);
+  box-shadow: 0 0 30px rgba(239, 68, 68, 0.3);
+}
+
+.verdict-message {
+  font-size: 1.125rem;
+  margin-bottom: var(--space-xl);
+  color: var(--color-text-muted);
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-md);
+}
+
+.stat-item {
+  text-align: center;
+  padding: var(--space-md);
+  background: var(--color-bg-elevated);
+  border-radius: var(--radius-md);
+}
+
+.stat-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  display: block;
+}
+
+.stat-label {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* ============================================================================
+   SECTIONS
+   ============================================================================ */
+
+.section {
+  margin-bottom: var(--space-2xl);
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  margin-bottom: var(--space-lg);
+}
+
+.section-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-md);
+  background: linear-gradient(135deg, var(--color-primary), #8b5cf6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  box-shadow: var(--shadow-glow);
+}
+
+.section-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.section-subtitle {
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+}
+
+/* ============================================================================
+   CARDS
+   ============================================================================ */
+
+.card {
+  background: var(--color-bg-card);
+  backdrop-filter: blur(20px);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  padding: var(--space-xl);
+  transition: all var(--transition-normal);
+}
+
+.card:hover {
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-lg);
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--space-lg);
+}
+
+/* ============================================================================
+   CATEGORY BARS
+   ============================================================================ */
+
+.category-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.category-item {
+  background: var(--color-bg-elevated);
+  border-radius: var(--radius-md);
+  padding: var(--space-md) var(--space-lg);
+}
+
+.category-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-sm);
+}
+
+.category-name {
+  font-weight: 500;
+}
+
+.category-score {
+  font-weight: 700;
+  font-size: 1.125rem;
+}
+
+.category-score.good { color: var(--color-ship); }
+.category-score.ok { color: var(--color-warn); }
+.category-score.bad { color: var(--color-block); }
+
+.category-bar {
+  height: 8px;
+  background: var(--color-border);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+.category-bar-fill {
+  height: 100%;
+  border-radius: var(--radius-full);
+  transition: width 0.8s ease-out;
+}
+
+.category-bar-fill.good { background: linear-gradient(90deg, var(--color-ship), #4ade80); }
+.category-bar-fill.ok { background: linear-gradient(90deg, var(--color-warn), #fbbf24); }
+.category-bar-fill.bad { background: linear-gradient(90deg, var(--color-block), #f87171); }
+
+/* ============================================================================
+   SEVERITY CHART
+   ============================================================================ */
+
+.severity-chart {
+  display: flex;
+  gap: var(--space-lg);
+  align-items: center;
+}
+
+.severity-donut {
+  flex-shrink: 0;
+}
+
+.severity-legend {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-sm) var(--space-xl);
+  flex: 1;
+}
+
+.severity-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.severity-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: var(--radius-full);
+}
+
+.severity-dot.critical { background: var(--color-critical); }
+.severity-dot.high { background: var(--color-high); }
+.severity-dot.medium { background: var(--color-medium); }
+.severity-dot.low { background: var(--color-low); }
+
+.severity-label {
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+}
+
+.severity-count {
+  font-weight: 700;
+  margin-left: auto;
+}
+
+/* ============================================================================
+   FINDINGS
+   ============================================================================ */
+
+.findings-tabs {
+  display: flex;
+  gap: var(--space-sm);
+  margin-bottom: var(--space-lg);
+  border-bottom: 1px solid var(--color-border);
+  padding-bottom: var(--space-md);
+}
+
+.findings-tab {
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  background: transparent;
+  border: none;
+  color: var(--color-text-muted);
+}
+
+.findings-tab:hover {
+  color: var(--color-text);
+  background: var(--color-bg-elevated);
+}
+
+.findings-tab.active {
+  color: var(--color-primary);
+  background: rgba(59, 130, 246, 0.1);
+}
+
+.findings-tab .count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  border-radius: var(--radius-full);
+  background: var(--color-bg-elevated);
+  font-size: 0.75rem;
+  margin-left: var(--space-xs);
+}
+
+.findings-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.finding-card {
+  background: var(--color-bg-elevated);
+  border-radius: var(--radius-md);
+  padding: var(--space-lg);
+  border-left: 4px solid;
+  transition: all var(--transition-fast);
+}
+
+.finding-card:hover {
+  transform: translateX(4px);
+}
+
+.finding-card.critical { border-left-color: var(--color-critical); }
+.finding-card.high { border-left-color: var(--color-high); }
+.finding-card.medium { border-left-color: var(--color-medium); }
+.finding-card.low { border-left-color: var(--color-low); }
+
+.finding-header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-md);
+  margin-bottom: var(--space-sm);
+}
+
+.finding-severity {
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: var(--radius-sm);
+  font-size: 0.625rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: white;
+}
+
+.finding-severity.critical { background: var(--color-critical); }
+.finding-severity.high { background: var(--color-high); }
+.finding-severity.medium { background: var(--color-medium); }
+.finding-severity.low { background: var(--color-low); }
+
+.finding-id {
+  color: var(--color-text-dim);
+  font-size: 0.75rem;
+  font-family: var(--font-mono);
+}
+
+.finding-title {
+  font-weight: 600;
+  flex: 1;
+}
+
+.finding-meta {
+  display: flex;
+  gap: var(--space-lg);
+  margin-top: var(--space-sm);
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+}
+
+.finding-file {
+  font-family: var(--font-mono);
+  background: var(--color-bg-card);
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: var(--radius-sm);
+  font-size: 0.75rem;
+}
+
+.finding-fix {
+  margin-top: var(--space-md);
+  padding: var(--space-md);
+  background: rgba(34, 197, 94, 0.1);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  color: var(--color-ship);
+}
+
+.finding-fix::before {
+  content: '💡 ';
+}
+
+/* ============================================================================
+   FIX ESTIMATES
+   ============================================================================ */
+
+.fix-estimate-card {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xl);
+  background: linear-gradient(135deg, var(--color-bg-card), var(--color-bg-elevated));
+  border-radius: var(--radius-xl);
+  padding: var(--space-2xl);
+  border: 1px solid var(--color-border);
+}
+
+.fix-estimate-total {
+  text-align: center;
+}
+
+.fix-estimate-value {
+  font-size: 3rem;
+  font-weight: 800;
+  background: linear-gradient(135deg, var(--color-primary), #8b5cf6);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.fix-estimate-label {
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.fix-estimate-breakdown {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-md);
+  flex: 1;
+}
+
+.fix-item {
+  text-align: center;
+  padding: var(--space-md);
+  background: var(--color-bg-card);
+  border-radius: var(--radius-md);
+}
+
+.fix-item-count {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.fix-item-time {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
+
+/* ============================================================================
+   FOOTER
+   ============================================================================ */
+
+.report-footer {
+  margin-top: var(--space-3xl);
+  padding-top: var(--space-xl);
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+}
+
+.footer-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+/* ============================================================================
+   PRINT STYLES
+   ============================================================================ */
+
+@media print {
+  body {
+    background: white !important;
+    color: black !important;
+  }
+  
+  body::before {
+    display: none;
+  }
+  
+  .report {
+    max-width: none;
+    padding: 0;
+  }
+  
+  .card, .score-card, .verdict-card {
+    background: white !important;
+    border: 1px solid #e5e5e5 !important;
+    box-shadow: none !important;
+  }
+  
+  .btn, .report-actions, .findings-tabs {
+    display: none !important;
+  }
+  
+  .section {
+    page-break-inside: avoid;
+  }
+}
+`;
+}
+
+// ============================================================================
+// COMPONENTS
+// ============================================================================
+
+function generateScoreRing(score, verdict) {
+  const radius = 85;
+  const circumference = 2 * Math.PI * radius;
+  const progress = (score / 100) * circumference;
+  const verdictClass = verdict.toLowerCase();
+  
+  return `
+    <div class="score-ring">
+      <svg width="200" height="200" viewBox="0 0 200 200">
+        <circle class="score-ring-bg" cx="100" cy="100" r="${radius}"/>
+        <circle 
+          class="score-ring-progress ${verdictClass}" 
+          cx="100" cy="100" r="${radius}"
+          stroke-dasharray="${progress} ${circumference - progress}"
+        />
+      </svg>
+      <div class="score-value">${score}</div>
+    </div>
+  `;
+}
+
+function generateCategoryBars(categoryScores) {
+  return `
+    <div class="category-list">
+      ${Object.entries(categoryScores).map(([cat, score]) => {
+        const cls = score >= 80 ? "good" : score >= 50 ? "ok" : "bad";
+        return `
+          <div class="category-item">
+            <div class="category-header">
+              <span class="category-name">${formatCategoryName(cat)}</span>
+              <span class="category-score ${cls}">${score}%</span>
+            </div>
+            <div class="category-bar">
+              <div class="category-bar-fill ${cls}" style="width: ${score}%"></div>
+            </div>
+          </div>
+        `;
+      }).join("")}
+    </div>
+  `;
+}
+
+function generateSeverityDonut(severityCounts) {
+  const total = Object.values(severityCounts).reduce((a, b) => a + b, 0);
+  if (total === 0) {
+    return `<div style="text-align: center; color: var(--color-ship); font-size: 1.25rem; padding: 40px;">✅ No issues found!</div>`;
+  }
+  
+  const colors = {
+    critical: "#ef4444",
+    high: "#f97316",
+    medium: "#eab308",
+    low: "#6b7280",
+  };
+  
+  // SVG donut chart
+  let cumulativePercent = 0;
+  const segments = [];
+  
+  for (const [sev, count] of Object.entries(severityCounts)) {
+    if (count === 0) continue;
+    const percent = (count / total) * 100;
+    const dashArray = `${percent} ${100 - percent}`;
+    const dashOffset = -cumulativePercent;
+    segments.push(`
+      <circle
+        r="15.9155"
+        cx="50%" cy="50%"
+        fill="transparent"
+        stroke="${colors[sev]}"
+        stroke-width="6"
+        stroke-dasharray="${dashArray}"
+        stroke-dashoffset="${dashOffset}"
+      />
+    `);
+    cumulativePercent += percent;
+  }
+  
+  return `
+    <div class="severity-chart">
+      <svg class="severity-donut" width="120" height="120" viewBox="0 0 42 42">
+        <circle r="15.9155" cx="50%" cy="50%" fill="transparent" stroke="var(--color-border)" stroke-width="6"/>
+        ${segments.join("")}
+        <text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="var(--color-text)" font-size="8" font-weight="700">${total}</text>
+      </svg>
+      <div class="severity-legend">
+        ${Object.entries(severityCounts).map(([sev, count]) => `
+          <div class="severity-item">
+            <span class="severity-dot ${sev}"></span>
+            <span class="severity-label">${sev.charAt(0).toUpperCase() + sev.slice(1)}</span>
+            <span class="severity-count">${count}</span>
+          </div>
+        `).join("")}
+      </div>
+    </div>
+  `;
+}
+
+function generateFindingsList(findings, limit = 20) {
+  if (findings.length === 0) {
+    return `<div style="text-align: center; color: var(--color-text-muted); padding: 40px;">No findings to display</div>`;
+  }
+  
+  const displayed = findings.slice(0, limit);
+  
+  return `
+    <div class="findings-list">
+      ${displayed.map(f => `
+        <div class="finding-card ${f.severity}">
+          <div class="finding-header">
+            <span class="finding-severity ${f.severity}">${f.severity}</span>
+            <span class="finding-id">${f.id}</span>
+            <span class="finding-title">${escapeHtml(f.title)}</span>
+          </div>
+          <div class="finding-meta">
+            ${f.file ? `<span class="finding-file">${escapeHtml(f.file)}${f.line ? `:${f.line}` : ""}</span>` : ""}
+            ${f.category ? `<span>Category: ${formatCategoryName(f.category)}</span>` : ""}
+            ${f.fixTime ? `<span>~${f.fixTime} min to fix</span>` : ""}
+          </div>
+          ${f.fix ? `<div class="finding-fix">${escapeHtml(f.fix)}</div>` : ""}
+        </div>
+      `).join("")}
+      ${findings.length > limit ? `
+        <div style="text-align: center; color: var(--color-text-muted); padding: var(--space-lg);">
+          + ${findings.length - limit} more findings
+        </div>
+      ` : ""}
+    </div>
+  `;
+}
+
+function generateFixEstimates(fixEstimates) {
+  const { bySeverity, humanReadable } = fixEstimates;
+  
+  return `
+    <div class="fix-estimate-card">
+      <div class="fix-estimate-total">
+        <div class="fix-estimate-value">${humanReadable}</div>
+        <div class="fix-estimate-label">Total Fix Time</div>
+      </div>
+      <div class="fix-estimate-breakdown">
+        ${Object.entries(bySeverity).map(([sev, data]) => `
+          <div class="fix-item">
+            <div class="fix-item-count" style="color: var(--color-${sev})">${data.count}</div>
+            <div class="fix-item-time">${formatDuration(data.totalMinutes)}</div>
+            <div style="font-size: 0.75rem; color: var(--color-text-dim)">${sev}</div>
+          </div>
+        `).join("")}
+      </div>
+    </div>
+  `;
+}
+
+function formatDuration(mins) {
+  if (mins === 0) return "0m";
+  if (mins < 60) return `${mins}m`;
+  const h = Math.floor(mins / 60);
+  const m = mins % 60;
+  return m > 0 ? `${h}h ${m}m` : `${h}h`;
+}
+
+function escapeHtml(str) {
+  if (!str) return "";
+  return String(str)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+// ============================================================================
+// MAIN TEMPLATE
+// ============================================================================
+
+function generateWorldClassHTML(reportData, options = {}) {
+  const { meta, summary, findings, fixEstimates, coverage, truthpack } = reportData;
+  const verdictClass = summary.verdict.toLowerCase();
+  
+  const verdictMessages = {
+    ship: "All systems go. This application is production-ready.",
+    warn: "Minor issues detected. Review recommended before deployment.",
+    block: "Critical issues found. Immediate remediation required.",
+  };
+  
+  const verdictIcons = { ship: "✅", warn: "⚠️", block: "🚫" };
+  
+  return `<!DOCTYPE html>
+<html lang="en" data-theme="${options.theme || "dark"}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vibecheck Report - ${escapeHtml(meta.projectName)}</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <style>${getDesignSystem()}</style>
+</head>
+<body>
+  <div class="report">
+    <!-- Header -->
+    <header class="report-header">
+      <div>
+        <h1 class="report-title">Ship Readiness Report</h1>
+        <div class="report-meta">
+          <span><strong>Project:</strong> ${escapeHtml(meta.projectName)}</span>
+          <span><strong>Generated:</strong> ${new Date(meta.generatedAt).toLocaleString()}</span>
+          <span><strong>Report ID:</strong> ${meta.reportId}</span>
+        </div>
+      </div>
+      <div class="report-actions">
+        <button class="btn btn-icon" onclick="toggleTheme()" title="Toggle theme">🌓</button>
+        <button class="btn" onclick="window.print()">🖨️ Print</button>
+      </div>
+    </header>
+
+    <!-- Hero Section -->
+    <section class="hero-section">
+      <div class="score-card">
+        ${generateScoreRing(summary.score, summary.verdict)}
+        <div class="score-label">Vibe Score</div>
+      </div>
+      
+      <div class="verdict-card">
+        <div class="verdict-badge ${verdictClass}">
+          ${verdictIcons[verdictClass]} ${summary.verdict}
+        </div>
+        <p class="verdict-message">${verdictMessages[verdictClass]}</p>
+        
+        <div class="stats-grid">
+          <div class="stat-item">
+            <span class="stat-value">${summary.totalFindings}</span>
+            <span class="stat-label">Findings</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-value">${truthpack.routes}</span>
+            <span class="stat-label">Routes</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-value">${fixEstimates.humanReadable}</span>
+            <span class="stat-label">Fix Time</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Category Breakdown -->
+    <section class="section">
+      <div class="section-header">
+        <div class="section-icon">📊</div>
+        <div>
+          <h2 class="section-title">Category Breakdown</h2>
+          <p class="section-subtitle">Score analysis by domain</p>
+        </div>
+      </div>
+      <div class="card">
+        ${generateCategoryBars(summary.categoryScores)}
+      </div>
+    </section>
+
+    <!-- Severity Distribution -->
+    <section class="section">
+      <div class="section-header">
+        <div class="section-icon">🎯</div>
+        <div>
+          <h2 class="section-title">Severity Distribution</h2>
+          <p class="section-subtitle">Issues breakdown by priority</p>
+        </div>
+      </div>
+      <div class="card">
+        ${generateSeverityDonut(summary.severityCounts)}
+      </div>
+    </section>
+
+    <!-- Fix Estimates -->
+    <section class="section">
+      <div class="section-header">
+        <div class="section-icon">⏱️</div>
+        <div>
+          <h2 class="section-title">Fix Time Estimates</h2>
+          <p class="section-subtitle">Estimated remediation effort</p>
+        </div>
+      </div>
+      ${generateFixEstimates(fixEstimates)}
+    </section>
+
+    <!-- Findings -->
+    ${findings.length > 0 ? `
+    <section class="section">
+      <div class="section-header">
+        <div class="section-icon">🔍</div>
+        <div>
+          <h2 class="section-title">Findings</h2>
+          <p class="section-subtitle">${summary.totalFindings} issues identified</p>
+        </div>
+      </div>
+      <div class="card">
+        ${generateFindingsList(findings, options.maxFindings || 20)}
+      </div>
+    </section>
+    ` : ""}
+
+    <!-- Footer -->
+    <footer class="report-footer">
+      <div class="footer-brand">
+        <span>⚡</span>
+        <span>Vibecheck</span>
+      </div>
+      <div>
+        ${meta.reportId} · <a href="https://vibecheck.dev" style="color: var(--color-primary)">vibecheck.dev</a>
+      </div>
+    </footer>
+  </div>
+
+  <script>
+    function toggleTheme() {
+      const html = document.documentElement;
+      const current = html.getAttribute('data-theme');
+      html.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark');
+    }
+    
+    // Animate score ring on load
+    document.addEventListener('DOMContentLoaded', () => {
+      const ring = document.querySelector('.score-ring-progress');
+      if (ring) {
+        const dashArray = ring.getAttribute('stroke-dasharray');
+        ring.setAttribute('stroke-dasharray', '0 1000');
+        setTimeout(() => ring.setAttribute('stroke-dasharray', dashArray), 100);
+      }
+    });
+  </script>
+</body>
+</html>`;
+}
+
+// ============================================================================
+// EXPORTS
+// ============================================================================
+
+module.exports = {
+  generateWorldClassHTML,
+  getDesignSystem,
+  generateScoreRing,
+  generateCategoryBars,
+  generateSeverityDonut,
+  generateFindingsList,
+  generateFixEstimates,
+};