vibecheck-ai 2.0.1 → 5.0.0

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

@@ -0,0 +1,650 @@
+/**
+ * HTML Report Generator v3
+ * 
+ * Generates beautiful, interactive HTML proof pages from ship reports.
+ * Features: Dark/light theme, SVG gauges, keyboard nav, glassmorphism UI.
+ */
+
+"use strict";
+
+const fs = require("fs");
+const path = require("path");
+
+// =============================================================================
+// LOGO (embedded as base64)
+// =============================================================================
+
+function getLogoBase64() {
+  try {
+    const logoPath = path.join(__dirname, "assets", "vibecheck-logo.png");
+    if (fs.existsSync(logoPath)) {
+      const logoBuffer = fs.readFileSync(logoPath);
+      return `data:image/png;base64,${logoBuffer.toString("base64")}`;
+    }
+  } catch (e) {
+    // Fallback to emoji if logo not found
+  }
+  return null;
+}
+
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+function escapeHtml(str) {
+  if (!str) return "";
+  return String(str)
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+function getLevel(pct) {
+  return pct >= 80 ? "high" : pct >= 50 ? "medium" : "low";
+}
+
+// =============================================================================
+// SVG GAUGE RENDERER
+// =============================================================================
+
+function renderSVGGauge(label, value) {
+  const pct = typeof value === "number" ? Math.round(value) : 0;
+  const level = getLevel(pct);
+  const circumference = 2 * Math.PI * 42;
+  
+  return `
+    <div class="gauge-card">
+      <svg class="gauge-svg" viewBox="0 0 100 100">
+        <circle class="gauge-bg" cx="50" cy="50" r="42"/>
+        <circle class="gauge-fill ${level}" cx="50" cy="50" r="42" 
+          data-value="${pct}"
+          style="stroke-dasharray: ${circumference}; stroke-dashoffset: ${circumference}"/>
+      </svg>
+      <div class="gauge-center">
+        <div class="gauge-value ${level}">${pct}%</div>
+      </div>
+      <div class="gauge-label">${escapeHtml(label)}</div>
+    </div>
+  `;
+}
+
+// =============================================================================
+// FINDING RENDERER
+// =============================================================================
+
+function renderFinding(finding, index) {
+  const evidence = finding.evidence?.[0];
+  const evidenceStr = evidence?.file 
+    ? `${evidence.file}${evidence.lines ? `:${evidence.lines}` : ""}`
+    : evidence?.url || null;
+
+  return `
+    <article class="finding ${finding.severity}" tabindex="0" id="finding-${index}">
+      <div class="finding-header">
+        <span class="finding-category">${escapeHtml(finding.category || "unknown")}</span>
+        <span class="finding-title">${escapeHtml(finding.title)}</span>
+      </div>
+      ${finding.why ? `<p class="finding-description">${escapeHtml(finding.why)}</p>` : ""}
+      ${evidenceStr ? `
+        <div class="finding-evidence">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>
+          <a href="vscode://file/${evidenceStr}" class="finding-evidence-link" title="Open in VS Code">${escapeHtml(evidenceStr)}</a>
+          <button class="copy-btn" data-copy="${escapeHtml(evidenceStr)}" title="Copy path" aria-label="Copy file path">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
+          </button>
+        </div>
+      ` : ""}
+    </article>
+  `;
+}
+
+// =============================================================================
+// PROOF CHAIN RENDERER
+// =============================================================================
+
+function renderProofChain(blocker) {
+  return `
+    <div class="proof-chain">
+      <div class="proof-chain-header">
+        <div class="proof-chain-title">${escapeHtml(blocker.title)}</div>
+        <span class="proof-chain-severity BLOCK">BLOCKER</span>
+      </div>
+      ${blocker.chain?.length > 0 ? `
+        <div class="timeline">
+          ${blocker.chain.map((step, i) => `
+            ${i > 0 ? '<span class="timeline-arrow">→</span>' : ""}
+            <div class="timeline-step">
+              <span class="timeline-step-type">${escapeHtml(step.nodeType || "STEP")}</span>
+              <span class="timeline-step-label">${escapeHtml(step.label || "")}</span>
+            </div>
+          `).join("")}
+        </div>
+      ` : ""}
+    </div>
+  `;
+}
+
+// =============================================================================
+// MAIN REPORT GENERATOR
+// =============================================================================
+
+function generateHTMLReport(shipReport, options = {}) {
+  const verdict = shipReport.verdict?.status || "WARN";
+  const verdictText = { SHIP: "Ready to Ship", WARN: "Ship with Caution", BLOCK: "Do Not Ship" }[verdict] || "Unknown";
+  const verdictEmoji = { SHIP: "✅", WARN: "⚠️", BLOCK: "🚫" }[verdict] || "❓";
+  const verdictSubtitle = { 
+    SHIP: "All checks passed. Safe to deploy.", 
+    WARN: "Some issues detected. Review warnings before deploying.", 
+    BLOCK: "Critical issues found. Must fix before shipping." 
+  }[verdict] || "";
+  
+  const stats = shipReport.stats || { total: 0, bySeverity: {} };
+  const blockers = stats.bySeverity?.BLOCK || 0;
+  const warnings = stats.bySeverity?.WARN || 0;
+  const infos = stats.bySeverity?.INFO || 0;
+  
+  const meta = shipReport.meta || {};
+  const date = meta.generatedAt ? new Date(meta.generatedAt).toLocaleString() : new Date().toLocaleString();
+  const branch = meta.commit?.branch || null;
+  const sha = meta.commit?.sha ? meta.commit.sha.slice(0, 7) : null;
+  const duration = meta.durationMs ? (meta.durationMs / 1000).toFixed(1) + "s" : "0s";
+
+  // Group findings by severity
+  const findings = shipReport.findings || [];
+  const blockFindings = findings.filter(f => f.severity === "BLOCK").slice(0, 50);
+  const warnFindings = findings.filter(f => f.severity === "WARN").slice(0, 100);
+  const infoFindings = findings.filter(f => f.severity === "INFO").slice(0, 50);
+
+  // Build sections
+  let coverageSection = "";
+  if (shipReport.coverage) {
+    const cov = shipReport.coverage;
+    coverageSection = `
+      <section class="section" id="coverage">
+        <div class="section-header">
+          <h2 class="section-title">
+            <span class="section-title-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 20V10M12 20V4M6 20v-6"/></svg></span>
+            Coverage Metrics
+          </h2>
+        </div>
+        <div class="coverage-grid">
+          ${renderSVGGauge("Client Calls Mapped", cov.clientCallsMappedPct || 0)}
+          ${renderSVGGauge("Runtime Requests", cov.runtimeRequestsMappedPct || 0)}
+          ${renderSVGGauge("UI Actions Verified", cov.uiActionsVerifiedPct || 0)}
+          ${cov.authVerifiedPct !== null && cov.authVerifiedPct !== undefined ? renderSVGGauge("Auth Routes", cov.authVerifiedPct) : ""}
+        </div>
+        ${cov.unmappedApiRequests?.length > 0 ? `
+          <div style="margin-top: var(--space-5);">
+            <button class="collapsible-trigger" aria-expanded="false" aria-controls="unmapped-list">
+              <span class="collapsible-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg></span>
+              <span>Unmapped API Requests (${cov.unmappedApiRequests.length})</span>
+            </button>
+            <div class="collapsible-content" id="unmapped-list" hidden>
+              <div style="padding: var(--space-4); background: var(--bg-base); border-radius: var(--radius-md); margin-top: var(--space-3);">
+                ${cov.unmappedApiRequests.slice(0, 20).map(r => `<div style="font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-secondary); padding: var(--space-1) 0;"><code>${escapeHtml(r)}</code></div>`).join("")}
+                ${cov.unmappedApiRequests.length > 20 ? `<div style="color: var(--text-tertiary); font-size: 0.8125rem; margin-top: var(--space-2);">...and ${cov.unmappedApiRequests.length - 20} more</div>` : ""}
+              </div>
+            </div>
+          </div>
+        ` : ""}
+      </section>
+    `;
+  }
+
+  // Proof chains section
+  let proofChainsSection = "";
+  if (shipReport.proofChain?.topBlockers?.length > 0) {
+    proofChainsSection = `
+      <section class="section" id="proof-chains">
+        <div class="section-header">
+          <h2 class="section-title">
+            <span class="section-title-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg></span>
+            Broken User Flows
+          </h2>
+          <span class="section-badge">${shipReport.proofChain.topBlockers.length} critical</span>
+        </div>
+        ${shipReport.proofChain.topBlockers.slice(0, 10).map(b => renderProofChain(b)).join("")}
+      </section>
+    `;
+  }
+
+  // Findings section
+  let findingsSection = "";
+  if (findings.length > 0) {
+    findingsSection = `
+      <section class="section" id="findings">
+        <div class="section-header">
+          <h2 class="section-title">
+            <span class="section-title-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg></span>
+            All Findings
+          </h2>
+          <span class="section-badge">${stats.total} total</span>
+        </div>
+        <p style="color: var(--text-tertiary); font-size: 0.8125rem; margin-bottom: var(--space-4);">
+          Use <kbd style="background: var(--bg-elevated); padding: 0.125em 0.5em; border-radius: 4px; font-family: var(--font-mono);">j</kbd> / <kbd style="background: var(--bg-elevated); padding: 0.125em 0.5em; border-radius: 4px; font-family: var(--font-mono);">k</kbd> to navigate
+        </p>
+        <div class="findings-list">
+          ${blockFindings.length > 0 ? `
+            <div class="finding-group-title error">🚫 Blockers (${blockers})</div>
+            ${blockFindings.map((f, i) => renderFinding(f, `b${i}`)).join("")}
+          ` : ""}
+          ${warnFindings.length > 0 ? `
+            <div class="finding-group-title warning">⚠️ Warnings (${warnings})</div>
+            ${warnFindings.map((f, i) => renderFinding(f, `w${i}`)).join("")}
+          ` : ""}
+          ${infoFindings.length > 0 ? `
+            <div style="margin-top: var(--space-4);">
+              <button class="collapsible-trigger" aria-expanded="false" aria-controls="info-findings">
+                <span class="collapsible-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg></span>
+                <span>ℹ️ Info (${infos})</span>
+              </button>
+              <div class="collapsible-content" id="info-findings" hidden>
+                <div style="margin-top: var(--space-3);">
+                  ${infoFindings.map((f, i) => renderFinding(f, `i${i}`)).join("")}
+                </div>
+              </div>
+            </div>
+          ` : ""}
+        </div>
+      </section>
+    `;
+  }
+
+  // Runtime section
+  let runtimeSection = "";
+  if (shipReport.runtime?.ran) {
+    const rt = shipReport.runtime;
+    runtimeSection = `
+      <section class="section" id="runtime">
+        <div class="section-header">
+          <h2 class="section-title">
+            <span class="section-title-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M10 8l6 4-6 4V8z"/></svg></span>
+            Runtime Verification
+          </h2>
+        </div>
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-4);">
+          <div class="quick-stat">
+            <div class="quick-stat-value">${rt.actionsCount || 0}</div>
+            <div class="quick-stat-label">UI Actions</div>
+          </div>
+          <div class="quick-stat">
+            <div class="quick-stat-value">${rt.requestsCount || 0}</div>
+            <div class="quick-stat-label">API Requests</div>
+          </div>
+          <div class="quick-stat">
+            <div class="quick-stat-value">${rt.toastsDetected || 0}</div>
+            <div class="quick-stat-label">Toasts</div>
+          </div>
+        </div>
+      </section>
+    `;
+  }
+
+  // Get logo
+  const logoBase64 = getLogoBase64();
+  const logoHtml = logoBase64 
+    ? `<img src="${logoBase64}" alt="VibeCheck Logo" class="logo-img" />`
+    : `<div class="logo-icon">✓</div><div class="logo-text">Vibe<span>Check</span></div>`;
+
+  // Generate full HTML
+  return `<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="VibeCheck Security Report - ${verdict}">
+  <meta name="theme-color" content="#0a0a0f">
+  <title>VibeCheck Report • ${verdict}</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&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <style>${CSS_STYLES}</style>
+</head>
+<body>
+  <div class="container">
+    <header class="header">
+      <div class="header-left">
+        <div class="logo">
+          ${logoHtml}
+        </div>
+      </div>
+      <div class="header-actions">
+        <button class="btn btn-ghost btn-icon" onclick="window.print()" title="Print report">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9V2h12v7M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
+        </button>
+        <div class="theme-toggle" title="Toggle theme">
+          <input type="checkbox" id="theme-toggle" aria-label="Toggle dark/light mode">
+          <div class="theme-toggle-icon">
+            <span class="icon-sun"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg></span>
+            <span class="icon-moon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg></span>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <section class="verdict-hero">
+      <div class="verdict-hero-content">
+        <div class="verdict-main">
+          <div class="verdict-badge ${verdict}">
+            <span class="verdict-badge-icon">${verdictEmoji}</span>
+            <span>${verdictText}</span>
+          </div>
+          <p class="verdict-subtitle">${verdictSubtitle}</p>
+          <div class="verdict-meta">
+            <span class="meta-item">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
+              ${date}
+            </span>
+            ${branch ? `<span class="meta-item"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3v12"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 01-9 9"/></svg><code>${escapeHtml(branch)}</code></span>` : ""}
+            ${sha ? `<span class="meta-item"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M1.05 12H7m10.01 0h5.95"/></svg><code>${sha}</code></span>` : ""}
+            <span class="meta-item">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
+              ${duration}
+            </span>
+          </div>
+        </div>
+        <div class="verdict-stats">
+          <div class="quick-stat">
+            <div class="quick-stat-value error">${blockers}</div>
+            <div class="quick-stat-label">Blockers</div>
+          </div>
+          <div class="quick-stat">
+            <div class="quick-stat-value warning">${warnings}</div>
+            <div class="quick-stat-label">Warnings</div>
+          </div>
+          <div class="quick-stat">
+            <div class="quick-stat-value info">${infos}</div>
+            <div class="quick-stat-label">Info</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    ${coverageSection}
+    ${proofChainsSection}
+    ${findingsSection}
+    ${runtimeSection}
+
+    <footer class="footer">
+      <div class="footer-brand">
+        Generated by <a href="https://github.com/guardiavault-oss/Vibecheck" target="_blank" rel="noopener">VibeCheck</a>
+        &nbsp;•&nbsp; v${meta.version || "3.0.0"}
+        &nbsp;•&nbsp; Exit code: ${shipReport.verdict?.exitCode || 0}
+      </div>
+      <div class="footer-links">
+        <a href="https://github.com/guardiavault-oss/Vibecheck" target="_blank" rel="noopener">GitHub</a>
+      </div>
+    </footer>
+  </div>
+  
+  <div class="toast" id="toast" role="alert" aria-live="polite"></div>
+  
+  <script>${JS_SCRIPTS}</script>
+</body>
+</html>`;
+}
+
+// =============================================================================
+// CSS STYLES (embedded)
+// =============================================================================
+
+const CSS_STYLES = `
+:root {
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Menlo', 'Monaco', monospace;
+  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
+  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem;
+  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px;
+  --transition-fast: 150ms ease; --transition-base: 250ms ease;
+}
+[data-theme="dark"] {
+  --bg-base: #09090b; --bg-surface: #18181b; --bg-elevated: #27272a;
+  --border-subtle: rgba(255,255,255,0.06); --border-default: rgba(255,255,255,0.1); --border-strong: rgba(255,255,255,0.15);
+  --text-primary: #fafafa; --text-secondary: #a1a1aa; --text-tertiary: #71717a;
+  --accent-primary: #6366f1; --accent-primary-hover: #818cf8;
+  --status-success: #22c55e; --status-success-bg: rgba(34,197,94,0.12); --status-success-border: rgba(34,197,94,0.25);
+  --status-warning: #f59e0b; --status-warning-bg: rgba(245,158,11,0.12); --status-warning-border: rgba(245,158,11,0.25);
+  --status-error: #ef4444; --status-error-bg: rgba(239,68,68,0.12); --status-error-border: rgba(239,68,68,0.25);
+  --status-info: #3b82f6; --status-info-bg: rgba(59,130,246,0.12); --status-info-border: rgba(59,130,246,0.25);
+  --glass-bg: rgba(24,24,27,0.7); --glass-border: rgba(255,255,255,0.08); --glass-blur: 20px;
+  --gradient-glow: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99,102,241,0.15), transparent);
+  --gradient-hero: linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(236,72,153,0.05) 100%);
+}
+[data-theme="light"] {
+  --bg-base: #fafafa; --bg-surface: #ffffff; --bg-elevated: #f4f4f5;
+  --border-subtle: rgba(0,0,0,0.04); --border-default: rgba(0,0,0,0.08); --border-strong: rgba(0,0,0,0.12);
+  --text-primary: #18181b; --text-secondary: #52525b; --text-tertiary: #a1a1aa;
+  --accent-primary: #4f46e5; --accent-primary-hover: #6366f1;
+  --status-success: #16a34a; --status-success-bg: rgba(22,163,74,0.08); --status-success-border: rgba(22,163,74,0.2);
+  --status-warning: #d97706; --status-warning-bg: rgba(217,119,6,0.08); --status-warning-border: rgba(217,119,6,0.2);
+  --status-error: #dc2626; --status-error-bg: rgba(220,38,38,0.08); --status-error-border: rgba(220,38,38,0.2);
+  --status-info: #2563eb; --status-info-bg: rgba(37,99,235,0.08); --status-info-border: rgba(37,99,235,0.2);
+  --glass-bg: rgba(255,255,255,0.8); --glass-border: rgba(0,0,0,0.06); --glass-blur: 20px;
+  --gradient-glow: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(79,70,229,0.08), transparent);
+  --gradient-hero: linear-gradient(135deg, rgba(79,70,229,0.05) 0%, rgba(236,72,153,0.03) 100%);
+}
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
+body { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--text-primary); background: var(--bg-base); min-height: 100vh; }
+body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 600px; background: var(--gradient-glow); pointer-events: none; z-index: -1; }
+a { color: var(--accent-primary); text-decoration: none; transition: color var(--transition-fast); }
+a:hover { color: var(--accent-primary-hover); }
+code { font-family: var(--font-mono); font-size: 0.875em; background: var(--bg-elevated); padding: 0.125em 0.375em; border-radius: var(--radius-sm); }
+::selection { background: var(--accent-primary); color: white; }
+.container { max-width: 1200px; margin: 0 auto; padding: var(--space-6); }
+@media (max-width: 768px) { .container { padding: var(--space-4); } }
+.header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) 0; margin-bottom: var(--space-6); border-bottom: 1px solid var(--border-subtle); }
+.header-left { display: flex; align-items: center; gap: var(--space-6); }
+.logo { display: flex; align-items: center; gap: var(--space-3); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.025em; }
+.logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--accent-primary), #ec4899); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: white; font-size: 1rem; }
+.logo-img { height: 72px; width: auto; object-fit: contain; }
+.logo-text span { background: linear-gradient(135deg, var(--accent-primary), #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+.header-actions { display: flex; align-items: center; gap: var(--space-3); }
+.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); font-size: 0.875rem; font-weight: 500; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: all var(--transition-fast); }
+.btn-ghost { background: transparent; border-color: var(--border-default); color: var(--text-secondary); }
+.btn-ghost:hover { background: var(--bg-elevated); border-color: var(--border-strong); color: var(--text-primary); }
+.btn-icon { width: 36px; height: 36px; padding: 0; }
+.theme-toggle { position: relative; width: 36px; height: 36px; }
+.theme-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; z-index: 1; }
+.theme-toggle-icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
+.theme-toggle:hover .theme-toggle-icon { border-color: var(--border-strong); }
+.theme-toggle .icon-sun, .theme-toggle .icon-moon { position: absolute; transition: all var(--transition-base); }
+[data-theme="dark"] .icon-sun { opacity: 1; transform: rotate(0deg); }
+[data-theme="dark"] .icon-moon { opacity: 0; transform: rotate(-90deg); }
+[data-theme="light"] .icon-sun { opacity: 0; transform: rotate(90deg); }
+[data-theme="light"] .icon-moon { opacity: 1; transform: rotate(0deg); }
+.verdict-hero { position: relative; background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); padding: var(--space-8); margin-bottom: var(--space-6); overflow: hidden; }
+.verdict-hero::before { content: ''; position: absolute; inset: 0; background: var(--gradient-hero); pointer-events: none; }
+.verdict-hero-content { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
+.verdict-main { flex: 1; }
+.verdict-badge { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); font-size: 1.5rem; font-weight: 700; margin-bottom: var(--space-4); }
+.verdict-badge.SHIP { background: var(--status-success-bg); border: 1px solid var(--status-success-border); color: var(--status-success); }
+.verdict-badge.WARN { background: var(--status-warning-bg); border: 1px solid var(--status-warning-border); color: var(--status-warning); }
+.verdict-badge.BLOCK { background: var(--status-error-bg); border: 1px solid var(--status-error-border); color: var(--status-error); }
+.verdict-badge-icon { font-size: 1.75rem; }
+.verdict-subtitle { color: var(--text-secondary); font-size: 1rem; max-width: 480px; }
+.verdict-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-5); }
+.meta-item { display: flex; align-items: center; gap: var(--space-2); font-size: 0.8125rem; color: var(--text-tertiary); }
+.meta-item code { color: var(--text-secondary); }
+.verdict-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
+.quick-stat { text-align: center; padding: var(--space-4); background: var(--bg-base); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); }
+.quick-stat-value { font-size: 2rem; font-weight: 700; line-height: 1; }
+.quick-stat-value.error { color: var(--status-error); }
+.quick-stat-value.warning { color: var(--status-warning); }
+.quick-stat-value.info { color: var(--status-info); }
+.quick-stat-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); margin-top: var(--space-2); }
+@media (max-width: 768px) { .verdict-hero-content { flex-direction: column; text-align: center; } .verdict-meta { justify-content: center; } }
+.section { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); padding: var(--space-6); margin-bottom: var(--space-5); animation: fadeIn 0.5s ease-out backwards; }
+.section:nth-child(2) { animation-delay: 0.1s; }
+.section:nth-child(3) { animation-delay: 0.15s; }
+.section:nth-child(4) { animation-delay: 0.2s; }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+.section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
+.section-title { display: flex; align-items: center; gap: var(--space-3); font-size: 1.125rem; font-weight: 600; }
+.section-title-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); border-radius: var(--radius-md); }
+.section-badge { font-size: 0.75rem; font-weight: 500; padding: var(--space-1) var(--space-3); background: var(--bg-elevated); border-radius: var(--radius-full); color: var(--text-secondary); }
+.coverage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); }
+.gauge-card { display: flex; flex-direction: column; align-items: center; padding: var(--space-5); background: var(--bg-base); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); transition: all var(--transition-base); }
+.gauge-card:hover { border-color: var(--border-default); transform: translateY(-2px); }
+.gauge-svg { width: 100px; height: 100px; transform: rotate(-90deg); }
+.gauge-bg { fill: none; stroke: var(--border-default); stroke-width: 8; }
+.gauge-fill { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1s ease-out; }
+.gauge-fill.high { stroke: var(--status-success); }
+.gauge-fill.medium { stroke: var(--status-warning); }
+.gauge-fill.low { stroke: var(--status-error); }
+.gauge-center { position: relative; margin-top: -85px; margin-bottom: var(--space-3); text-align: center; }
+.gauge-value { font-size: 1.5rem; font-weight: 700; }
+.gauge-value.high { color: var(--status-success); }
+.gauge-value.medium { color: var(--status-warning); }
+.gauge-value.low { color: var(--status-error); }
+.gauge-label { font-size: 0.75rem; color: var(--text-tertiary); text-align: center; }
+.proof-chain { padding: var(--space-5); background: var(--bg-base); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); margin-bottom: var(--space-4); transition: all var(--transition-fast); }
+.proof-chain:hover { border-color: var(--status-error-border); }
+.proof-chain-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
+.proof-chain-title { font-weight: 600; font-size: 0.9375rem; }
+.proof-chain-severity { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); background: var(--status-error-bg); color: var(--status-error); }
+.timeline { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
+.timeline-step { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--bg-elevated); border-radius: var(--radius-sm); font-size: 0.8125rem; }
+.timeline-step:hover { background: var(--bg-surface); }
+.timeline-step-type { font-size: 0.6875rem; color: var(--text-tertiary); text-transform: uppercase; }
+.timeline-step-label { color: var(--text-primary); font-weight: 500; }
+.timeline-arrow { color: var(--text-tertiary); font-size: 0.75rem; }
+.findings-list { display: flex; flex-direction: column; gap: var(--space-3); }
+.finding-group-title { display: flex; align-items: center; gap: var(--space-2); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; margin-top: var(--space-4); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-subtle); }
+.finding-group-title:first-child { margin-top: 0; }
+.finding-group-title.error { color: var(--status-error); }
+.finding-group-title.warning { color: var(--status-warning); }
+.finding-group-title.info { color: var(--status-info); }
+.finding { padding: var(--space-4); background: var(--bg-base); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); border-left: 3px solid var(--border-default); transition: all var(--transition-fast); }
+.finding:hover { border-color: var(--border-default); }
+.finding.BLOCK { border-left-color: var(--status-error); }
+.finding.WARN { border-left-color: var(--status-warning); }
+.finding.INFO { border-left-color: var(--status-info); }
+.finding-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
+.finding-category { font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; padding: var(--space-1) var(--space-2); background: var(--bg-elevated); border-radius: var(--radius-sm); color: var(--text-tertiary); }
+.finding-title { font-weight: 600; font-size: 0.9375rem; }
+.finding-description { color: var(--text-secondary); font-size: 0.875rem; margin-bottom: var(--space-3); }
+.finding-evidence { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--bg-elevated); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.8125rem; }
+.finding-evidence-link { flex: 1; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.finding-evidence-link:hover { color: var(--accent-primary); }
+.copy-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: none; border-radius: var(--radius-sm); color: var(--text-tertiary); cursor: pointer; }
+.copy-btn:hover { background: var(--bg-surface); color: var(--text-primary); }
+.copy-btn.copied { color: var(--status-success); }
+.collapsible-trigger { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 0.875rem; cursor: pointer; width: 100%; text-align: left; }
+.collapsible-trigger:hover { background: var(--bg-elevated); color: var(--text-primary); }
+.collapsible-trigger[aria-expanded="true"] .collapsible-icon { transform: rotate(90deg); }
+.collapsible-icon { transition: transform var(--transition-fast); }
+.collapsible-content { margin-top: var(--space-3); }
+.collapsible-content[hidden] { display: none; }
+.footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) 0; margin-top: var(--space-8); border-top: 1px solid var(--border-subtle); font-size: 0.8125rem; color: var(--text-tertiary); }
+.footer-brand { display: flex; align-items: center; gap: var(--space-2); }
+.footer-links { display: flex; gap: var(--space-4); }
+.footer-links a { color: var(--text-tertiary); }
+.footer-links a:hover { color: var(--text-secondary); }
+@media (max-width: 640px) { .footer { flex-direction: column; text-align: center; } }
+.toast { position: fixed; bottom: var(--space-6); right: var(--space-6); padding: var(--space-3) var(--space-5); background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 0.875rem; color: var(--text-primary); box-shadow: 0 10px 40px rgba(0,0,0,0.3); transform: translateY(100px); opacity: 0; transition: all var(--transition-base); z-index: 300; }
+.toast.visible { transform: translateY(0); opacity: 1; }
+@media print { body { background: white; color: black; } .header-actions, .theme-toggle, .copy-btn { display: none !important; } .section, .verdict-hero, .finding, .proof-chain { break-inside: avoid; background: white; border: 1px solid #ddd; } a { color: inherit; text-decoration: underline; } }
+`;
+
+// =============================================================================
+// JAVASCRIPT (embedded)
+// =============================================================================
+
+const JS_SCRIPTS = `
+const html = document.documentElement;
+const themeInput = document.getElementById('theme-toggle');
+if (themeInput) {
+  themeInput.addEventListener('change', () => {
+    const newTheme = themeInput.checked ? 'light' : 'dark';
+    html.dataset.theme = newTheme;
+    localStorage.setItem('vibecheck-theme', newTheme);
+  });
+  const saved = localStorage.getItem('vibecheck-theme');
+  if (saved) { html.dataset.theme = saved; themeInput.checked = saved === 'light'; }
+}
+document.querySelectorAll('.copy-btn').forEach(btn => {
+  btn.addEventListener('click', async () => {
+    const text = btn.dataset.copy;
+    try {
+      await navigator.clipboard.writeText(text);
+      btn.classList.add('copied');
+      btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>';
+      showToast('Copied to clipboard');
+      setTimeout(() => { btn.classList.remove('copied'); btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>'; }, 2000);
+    } catch (err) { showToast('Failed to copy'); }
+  });
+});
+document.querySelectorAll('.collapsible-trigger').forEach(trigger => {
+  trigger.addEventListener('click', () => {
+    const expanded = trigger.getAttribute('aria-expanded') === 'true';
+    trigger.setAttribute('aria-expanded', !expanded);
+    const content = document.getElementById(trigger.getAttribute('aria-controls'));
+    if (content) content.hidden = expanded;
+  });
+});
+function showToast(message) {
+  const toast = document.getElementById('toast');
+  if (toast) { toast.textContent = message; toast.classList.add('visible'); setTimeout(() => toast.classList.remove('visible'), 2500); }
+}
+let currentFinding = -1;
+const findings = document.querySelectorAll('.finding');
+document.addEventListener('keydown', (e) => {
+  if (document.activeElement.tagName === 'INPUT') return;
+  if (e.key === 'j' || e.key === 'k') {
+    e.preventDefault();
+    findings.forEach(f => f.style.outline = '');
+    if (e.key === 'j') { currentFinding = Math.min(currentFinding + 1, findings.length - 1); }
+    else { currentFinding = Math.max(currentFinding - 1, 0); }
+    if (findings[currentFinding]) { findings[currentFinding].style.outline = '2px solid var(--accent-primary)'; findings[currentFinding].scrollIntoView({ behavior: 'smooth', block: 'center' }); }
+  }
+});
+document.querySelectorAll('.gauge-fill').forEach((gauge, i) => {
+  const target = parseFloat(gauge.dataset.value) || 0;
+  const circumference = 2 * Math.PI * 42;
+  const offset = circumference - (target / 100) * circumference;
+  gauge.style.strokeDasharray = circumference;
+  gauge.style.strokeDashoffset = circumference;
+  setTimeout(() => { gauge.style.strokeDashoffset = offset; }, 100 + i * 100);
+});
+`;
+
+// =============================================================================
+// LEGACY RENDERERS (for backward compatibility)
+// =============================================================================
+
+function renderGauge(label, value) {
+  return renderSVGGauge(label, value);
+}
+
+// =============================================================================
+// WRITE REPORT
+// =============================================================================
+
+function writeHTMLReport(repoRoot, shipReport, options = {}) {
+  const dir = path.join(repoRoot, ".vibecheck");
+  fs.mkdirSync(dir, { recursive: true });
+
+  const html = generateHTMLReport(shipReport, options);
+  const htmlPath = path.join(dir, "last_ship.html");
+  fs.writeFileSync(htmlPath, html);
+
+  return htmlPath;
+}
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+
+module.exports = {
+  generateHTMLReport,
+  writeHTMLReport,
+  renderSVGGauge,
+  renderGauge,
+  renderFinding,
+  renderProofChain,
+  escapeHtml,
+  getLevel,
+};