@vibecheckai/cli 3.0.9 → 3.0.10

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

@@ -733,6 +733,211 @@ body::before {
   color: var(--color-text);
 }
 
+/* ============================================================================
+   COVERAGE METRICS
+   ============================================================================ */
+
+.coverage-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-xl);
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .coverage-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.coverage-ring-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-sm);
+  position: relative;
+}
+
+.coverage-ring {
+  display: block;
+}
+
+.coverage-ring-value {
+  position: absolute;
+  top: 35px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+.coverage-ring-label {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* ============================================================================
+   CHARTS
+   ============================================================================ */
+
+.bar-chart-container,
+.sparkline-container {
+  padding: var(--space-md);
+}
+
+.bar-chart-header,
+.sparkline-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-md);
+}
+
+.bar-chart-label,
+.sparkline-label {
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+
+.bar-chart-value,
+.sparkline-value {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  background: var(--color-bg-elevated);
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: var(--radius-sm);
+}
+
+.bar-chart {
+  display: flex;
+  align-items: flex-end;
+  gap: 6px;
+  height: 80px;
+  padding: var(--space-sm) 0;
+}
+
+.bar-chart .bar {
+  background: linear-gradient(180deg, var(--color-primary), rgba(59, 130, 246, 0.3));
+  border-radius: 4px 4px 0 0;
+  transition: height 0.3s ease;
+}
+
+.bar-chart .bar.spike {
+  background: linear-gradient(180deg, var(--color-warn), rgba(245, 158, 11, 0.3));
+}
+
+.bar-chart-hint,
+.sparkline-hint {
+  font-size: 0.625rem;
+  color: var(--color-text-dim);
+  margin-top: var(--space-sm);
+}
+
+.sparkline {
+  display: block;
+  width: 100%;
+}
+
+/* ============================================================================
+   BROKEN FLOWS
+   ============================================================================ */
+
+.broken-flows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.flow-card {
+  background: var(--color-bg-card);
+  border-radius: var(--radius-lg);
+  padding: var(--space-xl);
+  border: 1px solid var(--color-border);
+}
+
+.flow-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-lg);
+}
+
+.flow-title {
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+.flow-severity {
+  padding: var(--space-xs) var(--space-md);
+  border-radius: var(--radius-full);
+  font-size: 0.625rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.flow-severity.blocker {
+  background: var(--color-block-bg);
+  color: var(--color-block);
+}
+
+.flow-severity.warning {
+  background: var(--color-warn-bg);
+  color: var(--color-warn);
+}
+
+.flow-steps {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.flow-step {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius-md);
+  font-size: 0.75rem;
+  background: var(--color-bg-elevated);
+}
+
+.flow-step.ui {
+  border-left: 3px solid var(--color-primary);
+}
+
+.flow-step.api {
+  border-left: 3px solid #8b5cf6;
+}
+
+.flow-step.form {
+  border-left: 3px solid var(--color-warn);
+}
+
+.flow-step.error {
+  border-left: 3px solid var(--color-block);
+  background: var(--color-block-bg);
+}
+
+.step-type {
+  font-weight: 600;
+  font-size: 0.625rem;
+  color: var(--color-text-dim);
+  text-transform: uppercase;
+}
+
+.step-label {
+  color: var(--color-text);
+}
+
+.step-arrow {
+  color: var(--color-text-dim);
+  font-size: 0.875rem;
+}
+
 /* ============================================================================
    PRINT STYLES
    ============================================================================ */
@@ -926,6 +1131,169 @@ function generateFixEstimates(fixEstimates) {
   `;
 }
 
+function generateCoverageRing(percent, label, color) {
+  const radius = 40;
+  const circumference = 2 * Math.PI * radius;
+  const progress = (percent / 100) * circumference;
+  const colorVar = color || (percent >= 80 ? "var(--color-ship)" : percent >= 50 ? "var(--color-warn)" : "var(--color-block)");
+  
+  return `
+    <div class="coverage-ring-container">
+      <svg class="coverage-ring" width="100" height="100" viewBox="0 0 100 100">
+        <circle cx="50" cy="50" r="${radius}" fill="none" stroke="var(--color-border)" stroke-width="8"/>
+        <circle cx="50" cy="50" r="${radius}" fill="none" stroke="${colorVar}" stroke-width="8" 
+          stroke-linecap="round" stroke-dasharray="${progress} ${circumference - progress}" 
+          transform="rotate(-90 50 50)" style="transition: stroke-dasharray 1s ease-out;"/>
+      </svg>
+      <div class="coverage-ring-value">${percent}%</div>
+      <div class="coverage-ring-label">${label}</div>
+    </div>
+  `;
+}
+
+function generateCoverageMetrics(reality) {
+  if (!reality || !reality.coverage) return "";
+  
+  const { clientCallsMapped, runtimeRequests, uiActionsVerified, authRoutes } = reality.coverage;
+  
+  return `
+    <section class="section">
+      <div class="section-header">
+        <div class="section-icon">📊</div>
+        <div>
+          <h2 class="section-title">Coverage Metrics</h2>
+          <p class="section-subtitle">Runtime verification results</p>
+        </div>
+      </div>
+      <div class="card">
+        <div class="coverage-grid">
+          ${generateCoverageRing(clientCallsMapped || 0, "Client Calls Mapped", "var(--color-warn)")}
+          ${generateCoverageRing(runtimeRequests || 0, "Runtime Requests", "var(--color-warn)")}
+          ${generateCoverageRing(uiActionsVerified || 0, "UI Actions Verified", "var(--color-ship)")}
+          ${generateCoverageRing(authRoutes || 0, "Auth Routes", "var(--color-ship)")}
+        </div>
+      </div>
+    </section>
+  `;
+}
+
+function generateSparklineChart(data, label, maxLabel) {
+  if (!data || data.length === 0) return "";
+  
+  const max = Math.max(...data);
+  const width = 300;
+  const height = 60;
+  const padding = 5;
+  const stepX = (width - padding * 2) / (data.length - 1);
+  
+  const points = data.map((v, i) => {
+    const x = padding + i * stepX;
+    const y = height - padding - ((v / max) * (height - padding * 2));
+    return `${x},${y}`;
+  }).join(" ");
+  
+  return `
+    <div class="sparkline-container">
+      <div class="sparkline-header">
+        <span class="sparkline-label">${label}</span>
+        <span class="sparkline-value">${maxLabel}</span>
+      </div>
+      <svg class="sparkline" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+        <polyline fill="none" stroke="var(--color-primary)" stroke-width="2" points="${points}"/>
+        <circle cx="${padding + (data.length - 1) * stepX}" cy="${height - padding - ((data[data.length - 1] / max) * (height - padding * 2))}" r="4" fill="var(--color-primary)"/>
+      </svg>
+      <div class="sparkline-hint">smooth = stable · sharp peaks = slow endpoints</div>
+    </div>
+  `;
+}
+
+function generateBarChart(data, label, totalLabel) {
+  if (!data || data.length === 0) return "";
+  
+  const max = Math.max(...data);
+  const barWidth = 20;
+  const gap = 8;
+  const height = 80;
+  
+  return `
+    <div class="bar-chart-container">
+      <div class="bar-chart-header">
+        <span class="bar-chart-label">${label}</span>
+        <span class="bar-chart-value">${data.reduce((a, b) => a + b, 0)} ${totalLabel}</span>
+      </div>
+      <div class="bar-chart">
+        ${data.map((v, i) => {
+          const barHeight = max > 0 ? (v / max) * (height - 10) : 0;
+          const isSpike = v > (max * 0.7);
+          return `<div class="bar ${isSpike ? 'spike' : ''}" style="height: ${barHeight}px; width: ${barWidth}px;"></div>`;
+        }).join("")}
+      </div>
+      <div class="bar-chart-hint">last ${data.length} steps · spikes = unmapped</div>
+    </div>
+  `;
+}
+
+function generateRuntimeCharts(reality) {
+  if (!reality) return "";
+  
+  const hasCharts = reality.requestsOverTime || reality.latencySparkline;
+  if (!hasCharts) return "";
+  
+  return `
+    <section class="section">
+      <div class="card-grid" style="grid-template-columns: 1fr 1fr;">
+        ${reality.requestsOverTime ? `
+          <div class="card">
+            ${generateBarChart(reality.requestsOverTime, "Requests Over Time", "total")}
+          </div>
+        ` : ""}
+        ${reality.latencySparkline ? `
+          <div class="card">
+            ${generateSparklineChart(reality.latencySparkline, "Latency Sparkline", (reality.latencyP95 || 0) + "ms p95")}
+          </div>
+        ` : ""}
+      </div>
+    </section>
+  `;
+}
+
+function generateBrokenFlows(reality) {
+  if (!reality || !reality.brokenFlows || reality.brokenFlows.length === 0) return "";
+  
+  const criticalCount = reality.brokenFlows.filter(f => f.severity === "BLOCK").length;
+  
+  return `
+    <section class="section">
+      <div class="section-header">
+        <div class="section-icon">🔗</div>
+        <div>
+          <h2 class="section-title">Broken User Flows</h2>
+          <p class="section-subtitle">${criticalCount} critical flows detected</p>
+        </div>
+      </div>
+      <div class="broken-flows">
+        ${reality.brokenFlows.map(flow => `
+          <div class="flow-card">
+            <div class="flow-header">
+              <span class="flow-title">${escapeHtml(flow.title)}</span>
+              <span class="flow-severity ${flow.severity === 'BLOCK' ? 'blocker' : 'warning'}">${flow.severity === 'BLOCK' ? 'BLOCKER' : 'WARNING'}</span>
+            </div>
+            <div class="flow-steps">
+              ${flow.steps.map((step, i) => `
+                <div class="flow-step ${step.type}">
+                  <span class="step-type">${step.type.toUpperCase()}</span>
+                  <span class="step-label">${escapeHtml(step.label)}</span>
+                </div>
+                ${i < flow.steps.length - 1 ? '<span class="step-arrow">→</span>' : ''}
+              `).join("")}
+            </div>
+          </div>
+        `).join("")}
+      </div>
+    </section>
+  `;
+}
+
 function formatDuration(mins) {
   if (mins === 0) return "0m";
   if (mins < 60) return `${mins}m`;
@@ -948,7 +1316,7 @@ function escapeHtml(str) {
 // ============================================================================
 
 function generateWorldClassHTML(reportData, options = {}) {
-  const { meta, summary, findings, fixEstimates, coverage, truthpack } = reportData;
+  const { meta, summary, findings, fixEstimates, coverage, truthpack, reality } = reportData;
   const verdictClass = summary.verdict.toLowerCase();
   
   const verdictMessages = {
@@ -1018,6 +1386,12 @@ function generateWorldClassHTML(reportData, options = {}) {
       </div>
     </section>
 
+    <!-- Coverage Metrics (if reality data available) -->
+    ${generateCoverageMetrics(reality)}
+
+    <!-- Runtime Charts (if reality data available) -->
+    ${generateRuntimeCharts(reality)}
+
     <!-- Category Breakdown -->
     <section class="section">
       <div class="section-header">
@@ -1032,6 +1406,9 @@ function generateWorldClassHTML(reportData, options = {}) {
       </div>
     </section>
 
+    <!-- Broken User Flows (if reality data available) -->
+    ${generateBrokenFlows(reality)}
+
     <!-- Severity Distribution -->
     <section class="section">
       <div class="section-header">