create-backlist 10.0.3 → 10.0.5

package/src/qa/reporters/html.js

@@ -0,0 +1,623 @@
+// Enterprise HTML report — 100% real runtime data, zero fake values
+import fs   from 'fs-extra';
+import path from 'node:path';
+import { formatDuration, formatBytes, VERSION } from '../qa-engine.js';
+
+export class HTMLReporter {
+  #session;
+
+  constructor(session) { this.#session = session; }
+
+  async generate(reportDir) {
+    const summary   = this.#session.getSummary();
+    const filename  = `${this.#session.id.toLowerCase()}.html`;
+    const filepath  = path.join(reportDir, filename);
+    const html      = this.#buildHTML(summary);
+    await fs.writeFile(filepath, html, 'utf8');
+    return filepath;
+  }
+
+  #buildHTML(summary) {
+    const s          = this.#session;
+    const passRate   = Number(summary.passRate);
+    const rateColor  = passRate >= 90 ? '#22c55e' : passRate >= 70 ? '#f59e0b' : '#ef4444';
+
+    // Coverage by type — from REAL results
+    const coverage   = {};
+    for (const r of s.results) {
+      if (!coverage[r.type]) coverage[r.type] = { pass: 0, fail: 0, skip: 0 };
+      if (r.status === 'PASS' || r.status === 'FLAKY') coverage[r.type].pass++;
+      else if (r.status === 'FAIL') coverage[r.type].fail++;
+      else coverage[r.type].skip++;
+    }
+
+    // Severity counts — from REAL bugs
+    const sevCounts = { P0: 0, P1: 0, P2: 0, P3: 0 };
+    s.bugs.forEach(b => { if (sevCounts[b.severity] !== undefined) sevCounts[b.severity]++; });
+
+    const urlsStr = Object.entries(s.urls)
+      .filter(([, v]) => v)
+      .map(([k, v]) => `<div class="url-card"><span class="url-label">${k}</span><a href="${v}" target="_blank">${v}</a></div>`)
+      .join('');
+
+    const routeRows = s.routeMap.slice(0, 100).map(r => `
+      <tr>
+        <td><code class="url">${r.url}</code></td>
+        <td><span class="badge badge-${r.type}">${r.type}</span></td>
+        <td class="${r.status >= 400 ? 'fail' : 'pass'}">${r.status || '–'}</td>
+        <td>${r.forms?.length || 0} form(s)</td>
+        <td>${r.error ? `<span class="err-text">${r.error}</span>` : '✓'}</td>
+      </tr>`).join('');
+
+    const apiRows = s.apiLog.slice(0, 50).map(r => `
+      <tr>
+        <td><span class="method method-${(r.method||'GET').toLowerCase()}">${r.method || 'GET'}</span></td>
+        <td><code class="url">${r.url}</code></td>
+        <td class="${r.statusCode >= 400 ? 'fail' : 'pass'}">${r.statusCode || '–'}</td>
+        <td>${r.responseTime ? r.responseTime + 'ms' : '–'}</td>
+        <td>${r.contentType?.split(';')[0] || '–'}</td>
+        <td class="${r.pass ? 'pass' : 'fail'}">${r.pass ? '✓' : '✗ ' + (r.message || '')}</td>
+      </tr>`).join('');
+
+    const testRows = s.results.map(r => `
+      <tr class="result-row ${r.status?.toLowerCase()}" data-type="${r.type}" data-status="${r.status}">
+        <td>${r.name}</td>
+        <td><span class="badge badge-type">${r.type}</span></td>
+        <td><span class="status status-${r.status?.toLowerCase()}">${r.status}</span></td>
+        <td>${r.severity ? `<span class="sev sev-${r.severity.toLowerCase()}">${r.severity}</span>` : '–'}</td>
+        <td>${r.duration ? formatDuration(r.duration) : '–'}</td>
+        <td class="err-cell">${r.message ? `<details><summary>Details</summary><pre>${this.#esc(r.message)}</pre></details>` : '✓'}</td>
+        ${r.screenshotPath ? `<td><a href="${r.screenshotPath}" target="_blank">📸 Screenshot</a></td>` : '<td>–</td>'}
+      </tr>`).join('');
+
+    const bugCards = s.bugs.map(b => `
+      <div class="bug-card sev-border-${(b.aiSeverity || b.severity || 'p3').toLowerCase()}" data-severity="${b.aiSeverity || b.severity}">
+        <div class="bug-header">
+          <span class="bug-id">${b.id}</span>
+          <span class="sev sev-${(b.aiSeverity || b.severity || 'p3').toLowerCase()}">${b.aiSeverity || b.severity}</span>
+          <span class="badge badge-type">${b.type || 'general'}</span>
+          ${b.aiConfidence ? `<span class="ai-badge">🤖 AI ${Math.round((b.aiConfidence || 0.7) * 100)}%</span>` : ''}
+          <span class="bug-status">${b.status || 'OPEN'}</span>
+        </div>
+        <div class="bug-title">${this.#esc(b.title)}</div>
+        ${b.url ? `<div class="bug-url"><a href="${b.url}" target="_blank">${b.url}</a></div>` : ''}
+        ${b.description ? `<details class="bug-detail"><summary>Details</summary><pre>${this.#esc(b.description)}</pre></details>` : ''}
+        ${b.aiRecommendation ? `<div class="bug-rec">💡 ${this.#esc(b.aiRecommendation)}</div>` : ''}
+        ${b.evidence && typeof b.evidence === 'object' ? `<details class="bug-evidence"><summary>Evidence</summary><pre>${this.#esc(JSON.stringify(b.evidence, null, 2).slice(0, 1000))}</pre></details>` : ''}
+      </div>`).join('') || '<p class="no-bugs">No bugs detected 🎉</p>';
+
+    const consoleErrorRows = s.consoleErrors.slice(0, 100).map(e => `
+      <tr>
+        <td><span class="badge badge-${e.type}">${e.type}</span></td>
+        <td><a href="${e.url}" target="_blank" class="url">${e.url?.slice(0, 60)}</a></td>
+        <td class="err-cell"><code>${this.#esc((e.text || '').slice(0, 200))}</code></td>
+        <td>${e.timestamp ? new Date(e.timestamp).toLocaleTimeString() : '–'}</td>
+      </tr>`).join('') || '<tr><td colspan="4" class="no-data">No console errors detected</td></tr>';
+
+    const networkErrorRows = s.networkLog.filter(e => e.type === 'failed').slice(0, 50).map(e => `
+      <tr>
+        <td><code>${e.method || 'GET'}</code></td>
+        <td><a href="${e.url}" target="_blank" class="url">${(e.url || '').slice(0, 80)}</a></td>
+        <td class="fail">${this.#esc(e.failure || 'unknown')}</td>
+        <td>${e.url?.split('/')[2] || '–'}</td>
+      </tr>`).join('') || '<tr><td colspan="4" class="no-data">No network failures detected</td></tr>';
+
+    const securityRows = s.secFindings.map(f => `
+      <tr class="${f.pass ? 'pass' : 'fail'}">
+        <td>${f.check}</td>
+        <td><span class="badge badge-${f.category}">${f.category}</span></td>
+        <td><span class="status ${f.pass ? 'status-pass' : 'status-fail'}">${f.pass ? 'PASS' : 'FAIL'}</span></td>
+        <td>${f.severity !== 'INFO' ? `<span class="sev sev-${(f.severity||'p3').toLowerCase()}">${f.severity}</span>` : '–'}</td>
+        <td class="err-cell">${f.detail ? this.#esc(f.detail.slice(0, 120)) : '–'}</td>
+        <td>${f.recommendation ? `<span class="rec">${this.#esc(f.recommendation)}</span>` : '–'}</td>
+      </tr>`).join('');
+
+    // Perf metrics from REAL measurement
+    const perfSections = Object.entries(s.perfMetrics).map(([label, m]) => `
+      <div class="perf-card">
+        <h3>${label}</h3>
+        <div class="vitals-grid">
+          ${this.#vitalCard('LCP',  m.lcp,  2500, 'ms', 'Largest Contentful Paint')}
+          ${this.#vitalCard('FCP',  m.fcp,  1800, 'ms', 'First Contentful Paint')}
+          ${this.#vitalCard('CLS',  m.cls,  0.1,  '',   'Cumulative Layout Shift')}
+          ${this.#vitalCard('TTFB', m.ttfb, 800,  'ms', 'Time to First Byte')}
+          ${this.#vitalCard('TBT',  m.tbt,  200,  'ms', 'Total Blocking Time')}
+        </div>
+        ${m.slowResources?.length ? `
+          <h4 style="margin-top:1rem;color:#f87171">Slow Resources (${m.slowResources.length})</h4>
+          <table style="font-size:.78rem;width:100%">
+            <tr><th>Resource</th><th>Type</th><th>Time</th><th>Size</th></tr>
+            ${m.slowResources.map(r => `<tr>
+              <td class="url">${r.url.split('/').pop() || r.url}</td>
+              <td>${r.type}</td>
+              <td class="fail">${r.duration}ms</td>
+              <td>${formatBytes(r.size)}</td>
+            </tr>`).join('')}
+          </table>` : ''}
+      </div>`).join('') || '<p class="no-data">Performance data not collected — no URLs configured</p>';
+
+    const a11ySection = s.a11yResults.length
+      ? s.a11yResults.map(r => `
+        <div class="a11y-page">
+          <div class="a11y-header">
+            <a href="${r.url}" target="_blank">${r.url}</a>
+            <span>Score: <strong>${r.score ?? '–'}%</strong></span>
+            <span class="${r.pass ? 'pass' : 'fail'}">${r.violations?.length || 0} violations</span>
+          </div>
+          ${r.violations?.length ? r.violations.map(v => `
+            <div class="violation impact-${v.impact}">
+              <div class="violation-header">
+                <span class="impact-badge">${v.impact}</span>
+                <strong>${this.#esc(v.description)}</strong>
+                <a href="${v.helpUrl}" target="_blank">docs</a>
+              </div>
+              <p>${this.#esc(v.help)}</p>
+              <p class="wcag-tags">${(v.tags || []).join(' · ')}</p>
+              ${v.affectedNodes?.slice(0, 2).map(n => `<code class="node-html">${this.#esc(n.html || '')}</code>`).join('') || ''}
+            </div>`).join('') : '<p class="no-bugs">No violations on this page ✓</p>'}
+        </div>`).join('')
+      : '<p class="no-data">No accessibility scans completed</p>';
+
+    const seoSection = s.seoResults.length
+      ? s.seoResults.map(r => `
+        <div class="seo-page">
+          <div class="seo-header">
+            <a href="${r.url}" target="_blank">${r.url}</a>
+            <span>${r.checks.filter(c => c.pass).length}/${r.checks.length} checks passed</span>
+          </div>
+          <table>
+            <tr><th>Check</th><th>Category</th><th>Status</th><th>Detail</th></tr>
+            ${r.checks.map(c => `<tr class="${c.pass ? '' : 'fail'}">
+              <td>${c.name}</td>
+              <td>${c.category || '–'}</td>
+              <td><span class="status ${c.pass ? 'status-pass' : 'status-fail'}">${c.pass ? 'PASS' : 'FAIL'}</span></td>
+              <td>${this.#esc((c.detail || '').slice(0, 100))}</td>
+            </tr>`).join('')}
+          </table>
+        </div>`).join('')
+      : '<p class="no-data">No SEO scans completed</p>';
+
+    const screenshotSection = s.screenshots.length
+      ? `<div class="screenshots-grid">${s.screenshots.map(sc => `
+          <div class="screenshot-card">
+            <a href="${sc.path}" target="_blank">
+              <img src="${sc.path}" alt="Screenshot: ${sc.url}" onerror="this.style.display='none'">
+            </a>
+            <div class="screenshot-url">${sc.url}</div>
+            <div class="screenshot-reason">${sc.reason || 'Captured on failure'}</div>
+          </div>`).join('')}
+        </div>`
+      : '<p class="no-data">No screenshots captured (all pages passed)</p>';
+
+    // Chart data — real values
+    const chartTypes    = JSON.stringify(Object.keys(coverage));
+    const chartPass     = JSON.stringify(Object.values(coverage).map(c => c.pass));
+    const chartFail     = JSON.stringify(Object.values(coverage).map(c => c.fail));
+    const bugSevLabels  = JSON.stringify(['P0 Critical','P1 High','P2 Medium','P3 Low']);
+    const bugSevData    = JSON.stringify([sevCounts.P0, sevCounts.P1, sevCounts.P2, sevCounts.P3]);
+
+    return `<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Backlist Enterprise QA — ${s.id}</title>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
+<style>
+:root {
+  --bg:      #0a0a12;
+  --surface: #1a1a2e;
+  --border:  #2d2d4e;
+  --text:    #e2e8f0;
+  --dim:     #64748b;
+  --cyan:    #00f5ff;
+  --purple:  #bf40ff;
+  --green:   #22c55e;
+  --red:     #ef4444;
+  --yellow:  #f59e0b;
+  --blue:    #3b82f6;
+}
+[data-theme="light"] {
+  --bg:      #f8fafc;
+  --surface: #ffffff;
+  --border:  #e2e8f0;
+  --text:    #1e293b;
+  --dim:     #94a3b8;
+}
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6}
+a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:underline}
+header{background:var(--surface);border-bottom:2px solid #00f5ff22;padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100}
+.logo{font-size:1.2rem;font-weight:700;color:var(--cyan)}
+.header-meta{font-size:.8rem;color:var(--dim);margin-top:2px}
+.header-actions{display:flex;gap:.75rem;align-items:center}
+.theme-btn{background:var(--border);border:none;color:var(--text);padding:6px 12px;border-radius:6px;cursor:pointer;font-size:.8rem}
+.version-badge{font-size:.7rem;color:var(--purple);border:1px solid var(--purple);padding:3px 10px;border-radius:20px}
+nav{background:var(--surface);border-bottom:1px solid var(--border);padding:0 2rem;display:flex;gap:0;overflow-x:auto}
+.nav-tab{padding:.75rem 1.25rem;border:none;background:none;color:var(--dim);cursor:pointer;font-size:.83rem;border-bottom:2px solid transparent;white-space:nowrap;transition:.2s}
+.nav-tab.active,.nav-tab:hover{color:var(--cyan);border-bottom-color:var(--cyan)}
+.container{max-width:1400px;margin:0 auto;padding:2rem}
+.tab-panel{display:none}.tab-panel.active{display:block}
+.search-bar{display:flex;gap:.75rem;margin-bottom:1.5rem}
+.search-bar input,.search-bar select{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:.5rem .75rem;border-radius:6px;font-size:.83rem;flex:1}
+.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.75rem;margin-bottom:1.5rem}
+.mc{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1rem;transition:border .2s}
+.mc:hover{border-color:var(--cyan)}.ml{font-size:.65rem;color:var(--dim);text-transform:uppercase;letter-spacing:.1em}
+.mv{font-size:1.8rem;font-weight:700;margin-top:4px}
+.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.25rem}
+.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1.5rem;margin-bottom:1rem}
+.card-title{font-size:.9rem;font-weight:600;color:#cbd5e1;border-bottom:1px solid var(--border);padding-bottom:.75rem;margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center}
+.chart-wrap{position:relative;height:260px}
+table{width:100%;border-collapse:collapse;font-size:.8rem}
+th{text-align:left;color:var(--dim);font-weight:500;padding:.5rem .75rem;border-bottom:1px solid var(--border);white-space:nowrap}
+td{padding:.45rem .75rem;border-bottom:1px solid #1a1a2e;vertical-align:top;word-break:break-word}
+tr.fail td{background:rgba(239,68,68,.04)}
+.pass{color:var(--green)}.fail{color:var(--red)}.err-text{color:var(--red);font-size:.75rem}
+.status{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:600}
+.status-pass{background:#064e3b;color:#34d399}.status-fail{background:#450a0a;color:#f87171}
+.status-flaky{background:#422006;color:#fbbf24}.status-skip{background:#1e293b;color:#94a3b8}
+.sev{padding:2px 7px;border-radius:3px;font-size:.7rem;font-weight:700}
+.sev-p0{background:#450a0a;color:#f87171}.sev-p1{background:#422006;color:#fbbf24}
+.sev-p2{background:#1e3a5f;color:#60a5fa}.sev-p3{background:#1e293b;color:#94a3b8}
+.badge{display:inline-block;padding:1px 6px;border-radius:3px;font-size:.7rem;background:#1e293b;color:#94a3b8}
+.badge-security{background:#450a0a;color:#f87171}.badge-api{background:#1a2a3b;color:#38bdf8}
+.badge-auth{background:#3b1f5e;color:#c084fc}.badge-performance{background:#1a2a3b;color:#38bdf8}
+.badge-page,.badge-error-page{background:#1e293b;color:#94a3b8}
+.method{padding:2px 8px;border-radius:3px;font-size:.75rem;font-weight:700}
+.method-get{background:#064e3b;color:#34d399}.method-post{background:#1e3a5f;color:#60a5fa}
+.method-put{background:#422006;color:#fbbf24}.method-delete{background:#450a0a;color:#f87171}
+.url{font-family:monospace;font-size:.75rem;word-break:break-all;color:var(--cyan)}
+code{font-family:monospace;font-size:.75rem;background:#0f1a2e;padding:2px 6px;border-radius:3px;color:#93c5fd}
+pre{white-space:pre-wrap;word-break:break-all;font-size:.73rem;padding:.75rem;background:#0a0a18;border-radius:6px;overflow-x:auto}
+details summary{cursor:pointer;color:var(--cyan);font-size:.78rem}
+.bug-card{border-radius:8px;padding:1rem;margin-bottom:.75rem;border-left:3px solid var(--border);background:var(--surface)}
+.sev-border-p0{border-left-color:#ef4444;background:rgba(239,68,68,.05)}
+.sev-border-p1{border-left-color:#f59e0b;background:rgba(245,158,11,.04)}
+.sev-border-p2{border-left-color:#3b82f6;background:rgba(59,130,246,.04)}
+.sev-border-p3{border-left-color:#64748b}
+.bug-header{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.5rem}
+.bug-id{font-family:monospace;font-size:.72rem;color:var(--dim)}
+.bug-status{font-size:.68rem;padding:2px 6px;border-radius:4px;background:var(--border);color:var(--dim)}
+.bug-title{font-weight:600;font-size:.9rem;margin-bottom:.3rem}
+.bug-url{font-size:.75rem;margin-bottom:.3rem}
+.bug-detail,.bug-evidence{margin-top:.5rem}
+.bug-rec{font-size:.78rem;color:#86efac;margin-top:.5rem;padding:.5rem;background:rgba(134,239,172,.06);border-radius:4px}
+.ai-badge{font-size:.68rem;padding:2px 6px;border-radius:10px;background:#1a1a3b;color:#c084fc;border:1px solid #bf40ff44}
+.rec{font-size:.75rem;color:#86efac}
+.no-data,.no-bugs{color:var(--dim);font-style:italic;padding:1rem 0;text-align:center}
+.perf-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1.5rem;margin-bottom:1rem}
+.vitals-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;margin:.75rem 0}
+.vital-card{border-radius:8px;padding:1rem;text-align:center;border:1px solid var(--border)}
+.vital-value{font-size:1.6rem;font-weight:700;margin:.25rem 0}
+.vital-label{font-size:.68rem;color:var(--dim);text-transform:uppercase}
+.vital-threshold{font-size:.7rem;color:var(--dim)}
+.vital-pass{background:rgba(34,197,94,.08);border-color:#22c55e}
+.vital-fail{background:rgba(239,68,68,.08);border-color:#ef4444}
+.vital-na{background:var(--surface);border-color:var(--border)}
+.url-card{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:#1a1a2e;border-radius:6px;margin-bottom:.5rem;font-size:.85rem}
+.url-label{text-transform:uppercase;font-size:.7rem;color:var(--dim);min-width:80px}
+.a11y-page{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1rem;margin-bottom:1rem}
+.a11y-header{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;font-size:.85rem}
+.violation{border-radius:6px;padding:.75rem;margin-bottom:.5rem;border-left:3px solid var(--border)}
+.impact-critical{border-left-color:#ef4444;background:rgba(239,68,68,.06)}
+.impact-serious{border-left-color:#f59e0b;background:rgba(245,158,11,.05)}
+.impact-moderate{border-left-color:#3b82f6;background:rgba(59,130,246,.05)}
+.impact-minor{border-left-color:#64748b;background:rgba(100,116,139,.04)}
+.violation-header{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.3rem}
+.impact-badge{font-size:.7rem;padding:2px 6px;border-radius:4px;font-weight:600;background:#1e293b;color:#94a3b8}
+.wcag-tags{font-size:.7rem;color:var(--dim);margin-top:.25rem}
+.node-html{display:block;margin-top:.35rem;font-size:.7rem;padding:.35rem .5rem;background:#0a0a18;border-radius:4px}
+.seo-page{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1rem;margin-bottom:1rem}
+.seo-header{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:.75rem;flex-wrap:wrap;gap:.5rem}
+.screenshots-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
+.screenshot-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden}
+.screenshot-card img{width:100%;height:180px;object-fit:cover;display:block}
+.screenshot-url{padding:.5rem .75rem;font-size:.75rem;color:var(--cyan);font-family:monospace}
+.screenshot-reason{padding:0 .75rem .5rem;font-size:.72rem;color:var(--dim)}
+.err-cell details{font-size:.78rem}
+.timeline{position:relative;padding:.5rem 0}
+.timeline-item{display:flex;gap:1rem;margin-bottom:.75rem;align-items:flex-start}
+.timeline-dot{width:10px;height:10px;border-radius:50%;background:var(--cyan);margin-top:5px;flex-shrink:0}
+.timeline-dot.fail{background:var(--red)}.timeline-dot.pass{background:var(--green)}
+.timeline-content{flex:1}
+.timeline-time{font-size:.72rem;color:var(--dim)}
+.real-data-notice{background:rgba(0,245,255,.06);border:1px solid #00f5ff22;border-radius:8px;padding:.75rem 1rem;margin-bottom:1.5rem;font-size:.83rem;color:var(--cyan)}
+footer{text-align:center;color:var(--dim);font-size:.7rem;padding:2rem;border-top:1px solid var(--border);margin-top:2rem}
+@media(max-width:768px){.grid2{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}}
+</style>
+</head>
+<body>
+
+<header>
+  <div>
+    <div class="logo">🧪 Backlist Enterprise QA Platform</div>
+    <div class="header-meta">
+      Run ID: ${s.id} &nbsp;·&nbsp; ${new Date(s.startedAt).toLocaleString()}
+      &nbsp;·&nbsp; ${formatDuration(summary.duration)}
+      &nbsp;·&nbsp; ${summary.total} tests &nbsp;·&nbsp; ${s.bugs.length} bugs
+      &nbsp;·&nbsp; ${s.routeMap.length} routes discovered
+    </div>
+  </div>
+  <div class="header-actions">
+    <button class="theme-btn" onclick="toggleTheme()">🌙 Dark/Light</button>
+    <span class="version-badge">v${VERSION}</span>
+  </div>
+</header>
+
+<nav>
+  <button class="nav-tab active" onclick="showTab('overview')">📊 Overview</button>
+  <button class="nav-tab" onclick="showTab('tests')">🧪 Tests (${summary.total})</button>
+  <button class="nav-tab" onclick="showTab('bugs')">🐛 Bugs (${s.bugs.length})</button>
+  <button class="nav-tab" onclick="showTab('routes')">🗺️ Routes (${s.routeMap.length})</button>
+  <button class="nav-tab" onclick="showTab('api')">📡 API (${s.apiLog.length})</button>
+  <button class="nav-tab" onclick="showTab('security')">🛡️ Security (${s.secFindings.length})</button>
+  <button class="nav-tab" onclick="showTab('performance')">⚡ Performance</button>
+  <button class="nav-tab" onclick="showTab('a11y')">♿ Accessibility</button>
+  <button class="nav-tab" onclick="showTab('seo')">🔎 SEO</button>
+  <button class="nav-tab" onclick="showTab('console')">🖥️ Console</button>
+  <button class="nav-tab" onclick="showTab('network')">🌐 Network</button>
+  <button class="nav-tab" onclick="showTab('screenshots')">📸 Screenshots (${s.screenshots.length})</button>
+</nav>
+
+<div class="container">
+
+<div class="real-data-notice">
+  ✅ <strong>100% Real Runtime Data</strong> — All results collected from actual browser execution, real HTTP requests, and live application testing. No simulated or mocked values.
+</div>
+
+<!-- ── OVERVIEW ─────────────────────────────────────────────────────── -->
+<div id="tab-overview" class="tab-panel active">
+  ${urlsStr ? `<div class="card"><div class="card-title">Target URLs</div>${urlsStr}</div>` : ''}
+  <div class="metrics">
+    <div class="mc"><div class="ml">Pass Rate</div><div class="mv" style="color:${rateColor}">${summary.passRate}%</div></div>
+    <div class="mc"><div class="ml">Tests</div><div class="mv">${summary.total}</div></div>
+    <div class="mc"><div class="ml">Passed</div><div class="mv" style="color:var(--green)">${summary.passed}</div></div>
+    <div class="mc"><div class="ml">Failed</div><div class="mv" style="color:var(--red)">${summary.failed}</div></div>
+    <div class="mc"><div class="ml">Flaky</div><div class="mv" style="color:var(--yellow)">${summary.flaky}</div></div>
+    <div class="mc"><div class="ml">Bugs</div><div class="mv" style="color:#c084fc">${s.bugs.length}</div></div>
+    <div class="mc"><div class="ml">P0 Critical</div><div class="mv" style="color:var(--red)">${sevCounts.P0}</div></div>
+    <div class="mc"><div class="ml">P1 High</div><div class="mv" style="color:var(--yellow)">${sevCounts.P1}</div></div>
+    <div class="mc"><div class="ml">Routes Found</div><div class="mv">${s.routeMap.length}</div></div>
+    <div class="mc"><div class="ml">APIs Tested</div><div class="mv">${s.apiLog.length}</div></div>
+    <div class="mc"><div class="ml">Screenshots</div><div class="mv">${s.screenshots.length}</div></div>
+    <div class="mc"><div class="ml">JS Errors</div><div class="mv" style="color:${s.consoleErrors.length>0?'var(--red)':'var(--green)'}"> ${s.consoleErrors.length}</div></div>
+  </div>
+  <div class="grid2">
+    <div class="card">
+      <div class="card-title">Tests by Category</div>
+      <div class="chart-wrap"><canvas id="coverageChart"></canvas></div>
+    </div>
+    <div class="card">
+      <div class="card-title">Bug Severity Distribution</div>
+      <div class="chart-wrap"><canvas id="bugChart"></canvas></div>
+    </div>
+  </div>
+</div>
+
+<!-- ── TESTS ──────────────────────────────────────────────────────── -->
+<div id="tab-tests" class="tab-panel">
+  <div class="search-bar">
+    <input type="text" id="testSearch" placeholder="Search tests..." onkeyup="filterTests()">
+    <select id="testStatus" onchange="filterTests()">
+      <option value="">All statuses</option>
+      <option value="FAIL">Failed only</option>
+      <option value="PASS">Passed only</option>
+      <option value="FLAKY">Flaky only</option>
+    </select>
+    <select id="testType" onchange="filterTests()">
+      <option value="">All types</option>
+      ${[...new Set(s.results.map(r => r.type))].map(t => `<option value="${t}">${t}</option>`).join('')}
+    </select>
+  </div>
+  <div class="card">
+    <div class="card-title">All Real Test Results <span>${summary.total} tests</span></div>
+    <table id="testTable">
+      <thead><tr><th>Test Name</th><th>Type</th><th>Status</th><th>Sev</th><th>Duration</th><th>Details</th><th>Screenshot</th></tr></thead>
+      <tbody>${testRows}</tbody>
+    </table>
+  </div>
+</div>
+
+<!-- ── BUGS ───────────────────────────────────────────────────────── -->
+<div id="tab-bugs" class="tab-panel">
+  <div class="search-bar">
+    <input type="text" id="bugSearch" placeholder="Search bugs..." onkeyup="filterBugs()">
+    <select id="bugSev" onchange="filterBugs()">
+      <option value="">All severities</option>
+      <option value="P0">P0 Critical</option>
+      <option value="P1">P1 High</option>
+      <option value="P2">P2 Medium</option>
+      <option value="P3">P3 Low</option>
+    </select>
+  </div>
+  <div id="bugList">${bugCards}</div>
+</div>
+
+<!-- ── ROUTES ─────────────────────────────────────────────────────── -->
+<div id="tab-routes" class="tab-panel">
+  <div class="card">
+    <div class="card-title">Discovered Routes <span style="font-size:.8rem;color:var(--dim)">${s.routeMap.length} real pages/APIs found via crawler</span></div>
+    <table>
+      <thead><tr><th>URL</th><th>Type</th><th>HTTP Status</th><th>Forms</th><th>Status</th></tr></thead>
+      <tbody>${routeRows || '<tr><td colspan="5" class="no-data">No routes discovered</td></tr>'}</tbody>
+    </table>
+  </div>
+</div>
+
+<!-- ── API ────────────────────────────────────────────────────────── -->
+<div id="tab-api" class="tab-panel">
+  <div class="card">
+    <div class="card-title">Real API Responses <span>${s.apiLog.length} endpoints tested</span></div>
+    <table>
+      <thead><tr><th>Method</th><th>URL</th><th>Status</th><th>Time</th><th>Content-Type</th><th>Result</th></tr></thead>
+      <tbody>${apiRows || '<tr><td colspan="6" class="no-data">No API endpoints tested</td></tr>'}</tbody>
+    </table>
+  </div>
+</div>
+
+<!-- ── SECURITY ───────────────────────────────────────────────────── -->
+<div id="tab-security" class="tab-panel">
+  <div class="card">
+    <div class="card-title">Real Security Scan Findings <span>${s.secFindings.length} checks</span></div>
+    <table>
+      <thead><tr><th>Check</th><th>Category</th><th>Result</th><th>Severity</th><th>Detail</th><th>Recommendation</th></tr></thead>
+      <tbody>${securityRows || '<tr><td colspan="6" class="no-data">No security scans</td></tr>'}</tbody>
+    </table>
+  </div>
+</div>
+
+<!-- ── PERFORMANCE ────────────────────────────────────────────────── -->
+<div id="tab-performance" class="tab-panel">
+  <div class="card-title" style="padding:.75rem 0">Real Core Web Vitals — measured via Playwright + Performance API</div>
+  ${perfSections}
+</div>
+
+<!-- ── ACCESSIBILITY ──────────────────────────────────────────────── -->
+<div id="tab-a11y" class="tab-panel">
+  <div class="card-title" style="padding:.75rem 0">Real Accessibility Results — powered by axe-core WCAG 2.1 AA</div>
+  ${a11ySection}
+</div>
+
+<!-- ── SEO ────────────────────────────────────────────────────────── -->
+<div id="tab-seo" class="tab-panel">
+  <div class="card-title" style="padding:.75rem 0">Real SEO Scan — fetched with Googlebot user-agent</div>
+  ${seoSection}
+</div>
+
+<!-- ── CONSOLE ────────────────────────────────────────────────────── -->
+<div id="tab-console" class="tab-panel">
+  <div class="card">
+    <div class="card-title">Real Console Errors & Warnings <span>${s.consoleErrors.length} entries</span></div>
+    <table>
+      <thead><tr><th>Type</th><th>Page URL</th><th>Message</th><th>Time</th></tr></thead>
+      <tbody>${consoleErrorRows}</tbody>
+    </table>
+  </div>
+</div>
+
+<!-- ── NETWORK ────────────────────────────────────────────────────── -->
+<div id="tab-network" class="tab-panel">
+  <div class="card">
+    <div class="card-title">Real Network Failures <span>${s.networkLog.filter(e => e.type === 'failed').length} failures</span></div>
+    <table>
+      <thead><tr><th>Method</th><th>URL</th><th>Failure</th><th>Domain</th></tr></thead>
+      <tbody>${networkErrorRows}</tbody>
+    </table>
+  </div>
+</div>
+
+<!-- ── SCREENSHOTS ────────────────────────────────────────────────── -->
+<div id="tab-screenshots" class="tab-panel">
+  <div class="card-title" style="padding:.75rem 0">Real Failure Screenshots — captured automatically</div>
+  ${screenshotSection}
+</div>
+
+</div><!-- /container -->
+
+<footer>
+  Backlist Enterprise QA Platform v${VERSION} &nbsp;·&nbsp;
+  ${summary.total} real tests · ${s.bugs.length} bugs detected · ${s.routeMap.length} routes crawled
+  &nbsp;·&nbsp; Generated ${new Date().toLocaleString()}
+  &nbsp;·&nbsp; 100% real runtime data
+</footer>
+
+<script>
+// Tab navigation
+function showTab(name) {
+  document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+  document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
+  document.getElementById('tab-' + name)?.classList.add('active');
+  event.target.classList.add('active');
+}
+
+// Theme toggle
+function toggleTheme() {
+  const html = document.documentElement;
+  html.dataset.theme = html.dataset.theme === 'dark' ? 'light' : 'dark';
+}
+
+// Test filter
+function filterTests() {
+  const search = document.getElementById('testSearch')?.value?.toLowerCase() || '';
+  const status = document.getElementById('testStatus')?.value || '';
+  const type   = document.getElementById('testType')?.value || '';
+  document.querySelectorAll('#testTable tbody .result-row').forEach(row => {
+    const text    = row.textContent.toLowerCase();
+    const rowStat = row.dataset.status;
+    const rowType = row.dataset.type;
+    const show    = text.includes(search) &&
+                    (!status || rowStat === status) &&
+                    (!type   || rowType === type);
+    row.style.display = show ? '' : 'none';
+  });
+}
+
+// Bug filter
+function filterBugs() {
+  const search = document.getElementById('bugSearch')?.value?.toLowerCase() || '';
+  const sev    = document.getElementById('bugSev')?.value || '';
+  document.querySelectorAll('#bugList .bug-card').forEach(card => {
+    const text   = card.textContent.toLowerCase();
+    const cardSev = card.dataset.severity;
+    const show   = text.includes(search) && (!sev || cardSev === sev);
+    card.style.display = show ? '' : 'none';
+  });
+}
+
+// Charts — real data
+const chartDefaults = {
+  plugins: { legend: { labels: { color: '#94a3b8', font: { size: 11 } } } },
+  scales : {
+    x: { ticks: { color: '#64748b', font: { size: 10 } }, grid: { color: '#1e293b' } },
+    y: { ticks: { color: '#64748b', stepSize: 1, font: { size: 10 } }, grid: { color: '#1e293b' }, beginAtZero: true },
+  },
+};
+
+new Chart(document.getElementById('coverageChart'), {
+  type: 'bar',
+  data: {
+    labels: ${chartTypes},
+    datasets: [
+      { label: 'Passed', data: ${chartPass}, backgroundColor: '#34d399', borderRadius: 3 },
+      { label: 'Failed', data: ${chartFail}, backgroundColor: '#f87171', borderRadius: 3 },
+    ],
+  },
+  options: { responsive: true, maintainAspectRatio: false, ...chartDefaults, scales: { ...chartDefaults.scales, x: { ...chartDefaults.scales.x, stacked: true }, y: { ...chartDefaults.scales.y, stacked: true } } },
+});
+
+new Chart(document.getElementById('bugChart'), {
+  type: 'doughnut',
+  data: {
+    labels: ${bugSevLabels},
+    datasets: [{ data: ${bugSevData}, backgroundColor: ['#ef4444','#f59e0b','#3b82f6','#64748b'], borderWidth: 0 }],
+  },
+  options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { labels: { color: '#94a3b8', font: { size: 12 } } } } },
+});
+</script>
+</body>
+</html>`;
+  }
+
+  #vitalCard(name, value, threshold, unit, label) {
+    const na      = value === null || value === undefined;
+    const pass    = !na && value <= threshold;
+    const cls     = na ? 'vital-na' : (pass ? 'vital-pass' : 'vital-fail');
+    const color   = na ? '#64748b'  : (pass ? '#22c55e'   : '#ef4444');
+    const display = na ? 'N/A'      : `${Number(value).toFixed(name === 'CLS' ? 3 : 0)}${unit}`;
+
+    return `<div class="vital-card ${cls}">
+      <div class="vital-label">${name}</div>
+      <div class="vital-value" style="color:${color}">${display}</div>
+      <div class="vital-threshold">≤ ${threshold}${unit}</div>
+      <div class="vital-label" style="margin-top:2px">${label}</div>
+    </div>`;
+  }
+
+  #esc(str) {
+    return String(str || '')
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+}