@vibecodeqa/cli 0.16.0 → 0.18.0

package/dist/report/html.js

@@ -1,41 +1,44 @@
-/** Generate a multi-page navigable HTML report.
+/** Generate a multi-page HTML report as separate files.
  *
- * Architecture:
- *   Top nav:    Overview | Foundations | Quality | Testing | Security | Issues
- *   Sub-nav:    Tabs for each check within a category
- *   Detail:     Per-check stats + full issue list grouped by file
- *   File map:   Cross-check heatmap of issues per file
- *
- * All in one self-contained HTML file using hash routing + show/hide.
+ * Layout:
+ *   Top nav:    Logo | Overview | Foundations | Quality | ... | Issues | Files
+ *               Page-level navigation. Scrollable on mobile.
+ *   Sidebar:    CONTEXTUAL to current page — NOT a duplicate of top nav.
+ *               Overview: score + category scores
+ *               Category: individual checks with grades (click to jump)
+ *               Issues: severity breakdown
+ *               Files: summary stats
+ *   Mobile:     Hamburger toggles both top nav dropdown and sidebar panel.
  */
 import { getCheckMeta } from "../check-meta.js";
 import { e, fileLink, gc } from "./components.js";
-import { categoryPages, filesPage, heatmapPage, issuesPage, overviewPage } from "./pages.js";
+import { categoryPage, filesPage, issuesPage, overviewPage } from "./pages.js";
 import { CSS } from "./styles.js";
-const GROUPS = [
-    { id: "foundations", label: "Foundations", checks: ["structure", "lint", "types", "type-safety", "standards"] },
-    { id: "quality", label: "Quality", checks: ["complexity", "duplication", "error-handling", "docs"] },
-    { id: "testing", label: "Testing", checks: ["testing"] },
-    { id: "arch", label: "Architecture", checks: ["architecture"] },
-    { id: "security", label: "Security", checks: ["secrets", "security", "dependencies"] },
-    { id: "llm", label: "LLM Readiness", checks: ["confusion", "context"] },
+export const GROUPS = [
+    { id: "foundations", label: "Foundations", file: "foundations.html", checks: ["structure", "lint", "types", "type-safety", "standards"] },
+    { id: "quality", label: "Quality", file: "quality.html", checks: ["complexity", "duplication", "error-handling", "react", "accessibility", "docs"] },
+    { id: "testing", label: "Testing", file: "testing.html", checks: ["testing"] },
+    { id: "arch", label: "Architecture", file: "architecture.html", checks: ["architecture", "performance"] },
+    { id: "security", label: "Security", file: "security.html", checks: ["secrets", "security", "dependencies"] },
+    { id: "llm", label: "AI Readiness", file: "ai-readiness.html", checks: ["confusion", "context"] },
+    { id: "ai", label: "AI Analysis", file: "ai-analysis.html", checks: ["doc-coherence", "code-coherence"] },
 ];
-export function generateHTML(report) {
+export function generatePages(report, historyDir) {
+    const pages = new Map();
     const allChecks = report.checks;
     const checkMap = new Map(allChecks.map((c) => [c.name, c]));
-    const active = allChecks.filter((c) => !c.details.skipped);
+    const active = allChecks.filter((c) => !c.details.skipped && !c.details.comingSoon);
     const ru = report.meta.repoUrl;
     const br = report.meta.branch;
     const fl = (path, line) => fileLink(path, line, ru, br);
     const totalIssues = allChecks.reduce((s, c) => s + c.issues.length, 0);
     const proj = report.meta.cwd.split("/").pop() || "project";
-    // ── File heatmap: aggregate issues per file across all checks ──
     const fileIssues = new Map();
     for (const c of allChecks) {
         for (const iss of c.issues) {
             if (!iss.file)
                 continue;
-            const f = iss.file.split(":")[0]; // strip :line from composite file fields
+            const f = iss.file.split(":")[0];
             const entry = fileIssues.get(f) || { errors: 0, warnings: 0, checks: new Set() };
             if (iss.severity === "error")
                 entry.errors++;
@@ -48,42 +51,87 @@ export function generateHTML(report) {
     const topFiles = [...fileIssues.entries()]
         .map(([file, d]) => ({ file, total: d.errors + d.warnings, errors: d.errors, warnings: d.warnings, checks: [...d.checks] }))
         .sort((a, b) => b.total - a.total)
-        .slice(0, 20);
-    // ── Category averages ──
+        .slice(0, 30);
     const catScores = GROUPS.map((g) => {
         const checks = g.checks.map((n) => checkMap.get(n)).filter(Boolean);
         const scored = checks.filter((c) => !c.details.skipped);
         const avg = scored.length > 0 ? Math.round(scored.reduce((s, c) => s + c.score, 0) / scored.length) : 0;
         return { ...g, avg, checks };
     });
-    // ── Top nav ──
-    const topNavItems = [
-        { id: "overview", label: "Overview" },
-        ...GROUPS.map((g) => ({ id: g.id, label: g.label })),
-        { id: "issues", label: `Issues (${totalIssues})` },
-        { id: "files", label: "File Map" },
-        { id: "heatmap", label: "Heatmap" },
+    const w = (id, sidebar, content) => wrap(proj, id, report, totalIssues, sidebar, content);
+    // ── Overview: sidebar shows score + category summary ──
+    const overviewSidebar = sidebarScore(report)
+        + catScores.map((cs) => {
+            const isPremium = cs.checks.every((c) => c.details.comingSoon);
+            const clr = isPremium ? "#6366f1" : gc(cs.avg >= 90 ? "A" : cs.avg >= 75 ? "B" : cs.avg >= 60 ? "C" : cs.avg >= 40 ? "D" : "F");
+            const label = isPremium
+                ? `<span class="pro-badge" style="font-size:0.5rem;padding:0.08rem 0.35rem">PRO</span>`
+                : `<span style="color:${clr}">${cs.avg}</span>`;
+            return `<a class="side-cat" href="${cs.file}">${cs.label} ${label}</a>`;
+        }).join("")
+        + sidebarViews(totalIssues, fileIssues.size);
+    pages.set("index.html", w("overview", overviewSidebar, overviewPage(report, active, totalIssues, catScores, allChecks, topFiles, fl, historyDir)));
+    // ── Category pages: sidebar shows the checks within this category ──
+    for (let i = 0; i < GROUPS.length; i++) {
+        const g = GROUPS[i];
+        const cs = catScores[i];
+        const catSidebar = sidebarScore(report)
+            + `<div class="side-section"><div class="side-cat-title">${cs.label}</div>`
+            + cs.checks.map((c) => {
+                const sk = c.details.skipped;
+                const premium = c.details.comingSoon;
+                const meta = getCheckMeta(c.name);
+                const badge = premium ? `<span style="color:#6366f1">PRO</span>` : `<span style="color:${sk ? "#555" : gc(c.grade)}">${sk ? "\u2014" : c.grade} ${sk ? "" : c.score}</span>`;
+                return `<a class="side-check" onclick="var t=document.querySelector('[data-sub=\\'${cs.id}-${c.name}\\']');if(t)sub(t,'${cs.id}')" title="${e(meta.label)}">${badge} ${e(meta.label)}</a>`;
+            }).join("")
+            + `</div>`
+            + sidebarViews(totalIssues, fileIssues.size);
+        pages.set(g.file, w(g.id, catSidebar, categoryPage(cs, fl)));
+    }
+    // ── Issues: sidebar shows severity breakdown ──
+    const allIssuesList = allChecks.flatMap((c) => c.issues);
+    const errCount = allIssuesList.filter((i) => i.severity === "error").length;
+    const warnCount = allIssuesList.filter((i) => i.severity === "warning").length;
+    const infoCount = allIssuesList.filter((i) => i.severity === "info").length;
+    const issuesSidebar = sidebarScore(report)
+        + `<div class="side-section"><div class="side-cat-title">Breakdown</div>`
+        + `<div class="side-stat"><span style="color:var(--fail)">${errCount}</span> errors</div>`
+        + `<div class="side-stat"><span style="color:var(--warn)">${warnCount}</span> warnings</div>`
+        + `<div class="side-stat"><span style="color:var(--info)">${infoCount}</span> info</div>`
+        + `</div>`
+        + sidebarViews(totalIssues, fileIssues.size);
+    pages.set("issues.html", w("issues", issuesSidebar, issuesPage(allChecks, totalIssues, fl)));
+    // ── Files: sidebar shows file stats ──
+    const filesSidebar = sidebarScore(report)
+        + `<div class="side-section"><div class="side-cat-title">File Health</div>`
+        + `<div class="side-stat"><span style="color:var(--text)">${fileIssues.size}</span> files with issues</div>`
+        + `<div class="side-stat"><span style="color:var(--fail)">${topFiles.filter(f => f.errors > 0).length}</span> with errors</div>`
+        + `</div>`
+        + sidebarViews(totalIssues, fileIssues.size);
+    pages.set("files.html", w("files", filesSidebar, filesPage(topFiles, fileIssues, fl)));
+    return pages;
+}
+export function generateHTML(report, historyDir) {
+    return generatePages(report, historyDir).get("index.html");
+}
+// ── Sidebar fragments ──
+function sidebarScore(report) {
+    return `<div class="side-section"><div class="side-label">Score</div><div class="side-score" style="color:${gc(report.grade)}">${report.grade} ${report.score}</div></div>`;
+}
+function sidebarViews(totalIssues, fileCount) {
+    return `<div class="side-section side-views"><div class="side-label" style="margin-top:0.3rem">Views</div><a class="side-check" href="issues.html">Issues <span style="color:var(--muted)">${totalIssues}</span></a><a class="side-check" href="files.html">Files <span style="color:var(--muted)">${fileCount}</span></a></div>`;
+}
+// ── Page wrapper ──
+function wrap(proj, currentId, report, totalIssues, sidebar, content) {
+    const navItems = [
+        { id: "overview", label: "Overview", file: "index.html" },
+        ...GROUPS.map((g) => ({ id: g.id, label: g.label, file: g.file })),
+        { id: "issues", label: `Issues (${totalIssues})`, file: "issues.html" },
+        { id: "files", label: "Files", file: "files.html" },
     ];
-    const topNav = topNavItems.map((t) => `<a class="tn" data-page="${t.id}" onclick="go('${t.id}')">${t.label}</a>`).join("");
-    // ── Sidebar ──
-    const sidebar = catScores
-        .map((cs) => {
-        const clr = gc(cs.avg >= 90 ? "A" : cs.avg >= 75 ? "B" : cs.avg >= 60 ? "C" : cs.avg >= 40 ? "D" : "F");
-        return `<div class="side-section"><a class="side-cat" onclick="go('${cs.id}')">${cs.label} <span style="color:${clr}">${cs.avg}</span></a>${cs.checks
-            .map((c) => {
-            const sk = c.details.skipped;
-            const meta = getCheckMeta(c.name);
-            return `<a class="side-check" onclick="go('${cs.id}')" title="${e(meta.label)}"><span style="color:${sk ? "#555" : gc(c.grade)}">${sk ? "\u2014" : c.grade}</span> ${e(meta.label)}</a>`;
-        })
-            .join("")}</div>`;
-    })
+    const nav = navItems
+        .map((t) => `<a class="tn${t.id === currentId ? " active" : ""}" href="${t.file}">${t.label}</a>`)
         .join("");
-    // ── Assemble pages ──
-    const overview = overviewPage(report, active, totalIssues, catScores);
-    const catPages = categoryPages(catScores, fl);
-    const issues = issuesPage(allChecks, totalIssues, fl);
-    const files = filesPage(topFiles, fl);
-    const heatmap = heatmapPage(fileIssues, fl);
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -95,44 +143,36 @@ export function generateHTML(report) {
 <body>
 
 <nav class="top">
-  <div class="logo"><span>VibeCode</span> QA</div>
-  ${topNav}
+  <a class="logo" href="index.html"><span>VibeCode</span> QA</a>
+  <button class="hamburger" onclick="toggleMenu()" aria-label="Menu">&#9776;</button>
+  <div class="nav-scroll">${nav}</div>
 </nav>
 
-<aside class="side">
-  <div class="side-section">Score<div class="side-score" style="color:${gc(report.grade)}">${report.grade} ${report.score}</div></div>
-  ${sidebar}
-</aside>
+<aside class="side" id="sidebar">${sidebar}</aside>
+
 <div class="content">
-  ${overview}
-  ${catPages}
-  ${issues}
-  ${files}
-  ${heatmap}
+  ${content}
   <div class="footer">Generated by <a href="https://vibecodeqa.online">VibeCode QA</a> v${report.version} &mdash; <code>npx @vibecodeqa/cli</code></div>
 </div>
 
 <script>
-function go(id){
-  document.querySelectorAll('.tn').forEach(n=>{n.classList.toggle('active',n.dataset.page===id)});
-  document.querySelectorAll('.page').forEach(p=>{p.classList.toggle('active',p.id==='p-'+id)});
-  window.scrollTo(0,0);
+function toggleMenu(){
+  document.querySelector('.nav-scroll').classList.toggle('open');
+  document.getElementById('sidebar').classList.toggle('open');
 }
 function sub(el,cat){
   const id=el.dataset.sub;
   el.parentElement.querySelectorAll('.sn').forEach(n=>n.classList.remove('active'));
   el.classList.add('active');
-  document.querySelectorAll('#p-'+cat+' .sp').forEach(s=>{s.classList.toggle('active',s.dataset.sub===id)});
+  document.querySelectorAll('.sp').forEach(s=>{s.classList.toggle('active',s.dataset.sub===id)});
 }
-// Copy-prompt buttons — read from data-attribute (no inline JS with user data)
 document.addEventListener('click',function(ev){
   var btn=ev.target.closest('.cp-btn');
   if(!btn)return;
-  navigator.clipboard.writeText(btn.dataset.prompt||'');
+  var text=btn.dataset.prompt||'';
+  try{navigator.clipboard.writeText(text)}catch(e){var ta=document.createElement('textarea');ta.value=text;ta.style.position='fixed';ta.style.opacity='0';document.body.appendChild(ta);ta.select();document.execCommand('copy');document.body.removeChild(ta)}
   btn.textContent='\\u2713';setTimeout(function(){btn.textContent='\\ud83d\\udccb'},1000);
 });
-// Init: show overview
-document.querySelector('.tn').classList.add('active');
 </script>
 </body></html>`;
 }

package/dist/report/pages.d.ts

@@ -3,6 +3,7 @@ import type { CheckResult, VibeReport } from "../types.js";
 export interface CatScore {
     id: string;
     label: string;
+    file?: string;
     checks: CheckResult[];
     avg: number;
 }
@@ -14,11 +15,10 @@ export interface FileEntry {
     checks: string[];
 }
 type FL = (path: string, line?: number) => string;
-export declare function overviewPage(report: VibeReport, active: CheckResult[], totalIssues: number, catScores: CatScore[]): string;
-export declare function categoryPages(catScores: CatScore[], fl: FL): string;
+export declare function overviewPage(report: VibeReport, active: CheckResult[], totalIssues: number, catScores: CatScore[], allChecks: CheckResult[], topFiles: FileEntry[], fl: FL, historyDir?: string): string;
+export declare function categoryPage(cs: CatScore, fl: FL): string;
 export declare function issuesPage(allChecks: CheckResult[], totalIssues: number, fl: FL): string;
-export declare function filesPage(topFiles: FileEntry[], fl: FL): string;
-export declare function heatmapPage(fileIssues: Map<string, {
+export declare function filesPage(topFiles: FileEntry[], fileIssues: Map<string, {
     errors: number;
     warnings: number;
     checks: Set<string>;

package/dist/report/pages.js

@@ -1,16 +1,21 @@
 /** Page renderers for the HTML report. */
 import { getCheckMeta } from "../check-meta.js";
-import { generateArchSVG } from "../runners/architecture.js";
+import { loadHistory } from "../history.js";
+import { generateArchSVG, generateDSM, generatePackageDiagram } from "../runners/architecture.js";
 import { e, gc, pc } from "./components.js";
-import { buildRadar, buildRing } from "./svg.js";
-export function overviewPage(report, active, totalIssues, catScores) {
-    const ringPct = report.score;
-    const barChart = active
-        .sort((a, b) => a.score - b.score)
-        .map((c) => {
-        return `<div class="brow"><span class="bl">${e(c.name)}</span><div class="bb"><div class="bf" style="width:${c.score}%;background:${gc(c.grade)}"></div></div><span class="bv" style="color:${gc(c.grade)}">${c.grade} ${c.score}</span></div>`;
-    })
-        .join("");
+import { buildPyramid, buildRadar, buildRing, buildTimeline } from "./svg.js";
+// ── Overview ──────────────────────────────────────────────────────────
+export function overviewPage(report, active, totalIssues, catScores, allChecks, topFiles, fl, historyDir) {
+    const hero = `<div class="hero">
+    ${buildRing(report.score, gc(report.grade))}
+    <div class="hc">
+      <span class="hg" style="color:${gc(report.grade)}">${report.grade}</span>
+      <span class="hs" style="color:${gc(report.grade)}">${report.score}/100</span>
+      <span class="hd">${active.length} checks \u00b7 ${totalIssues} issues \u00b7 ${report.meta.duration}ms</span>
+    </div>
+  </div>`;
+    const scoredCats = catScores.filter((cs) => cs.checks.some((c) => !c.details.skipped && !c.details.comingSoon));
+    const radarSvg = scoredCats.length >= 3 ? buildRadar(scoredCats.map((cs) => ({ label: cs.label, score: cs.avg }))) : "";
     const catCards = catScores
         .map((cs) => {
         const clr = gc(cs.avg >= 90 ? "A" : cs.avg >= 75 ? "B" : cs.avg >= 60 ? "C" : cs.avg >= 40 ? "D" : "F");
@@ -20,147 +25,192 @@ export function overviewPage(report, active, totalIssues, catScores) {
             return `<span class="mc" style="color:${sk ? "#555" : gc(c.grade)}" title="${e(c.name)}: ${sk ? "skip" : c.score}">${sk ? "\u2014" : c.grade}</span>`;
         })
             .join("");
-        return `<div class="cc" onclick="go('${cs.id}')"><div class="cc-s" style="color:${clr}">${cs.avg}</div><div class="cc-l">${cs.label}</div><div class="cc-m">${mini}</div></div>`;
+        const href = cs.file || `${cs.id}.html`;
+        return `<a class="cc" href="${href}"><div class="cc-s" style="color:${clr}">${cs.avg}</div><div class="cc-l">${cs.label}</div><div class="cc-m">${mini}</div></a>`;
+    })
+        .join("");
+    let timelineSection = "";
+    if (historyDir) {
+        const history = loadHistory(historyDir);
+        if (history.length >= 2) {
+            const timelineSvg = buildTimeline(history.map((h) => ({ score: h.score, timestamp: h.timestamp })));
+            timelineSection = `<div class="ov-section"><h3>Score Timeline</h3><div class="timeline">${timelineSvg}</div></div>`;
+        }
+    }
+    const barChart = active
+        .sort((a, b) => a.score - b.score)
+        .map((c) => {
+        return `<div class="brow"><span class="bl">${e(c.name)}</span><div class="bb"><div class="bf" style="width:${c.score}%;background:${gc(c.grade)}"></div></div><span class="bv" style="color:${gc(c.grade)}">${c.grade} ${c.score}</span></div>`;
     })
         .join("");
-    const radarSvg = buildRadar(catScores.map((cs) => ({ label: cs.label, score: cs.avg })));
-    return `<div id="p-overview" class="page active">
+    const allIssues = allChecks.flatMap((c) => c.issues.map((i) => ({ check: c.name, ...i })));
+    const sortedIssues = allIssues
+        .sort((a, b) => (a.severity === "error" ? 0 : a.severity === "warning" ? 1 : 2) - (b.severity === "error" ? 0 : b.severity === "warning" ? 1 : 2))
+        .slice(0, 10);
+    let topIssuesHtml = "";
+    if (sortedIssues.length > 0) {
+        const rows = sortedIssues
+            .map((i) => {
+            const loc = i.file ? fl(i.file.split(":")[0], i.line) : "";
+            return `<div class="ov-issue ${i.severity}"><span class="is">${i.severity[0].toUpperCase()}</span><span class="ov-check">${e(i.check)}</span>${loc ? `<span class="ov-loc">${loc}</span>` : ""}<span class="ov-msg">${e(i.message)}</span></div>`;
+        })
+            .join("");
+        const viewAll = allIssues.length > 10 ? `<a class="ov-link" href="issues.html">View all ${allIssues.length} issues \u2192</a>` : "";
+        topIssuesHtml = `<div class="ov-section"><h3>Top Issues</h3>${rows}${viewAll}</div>`;
+    }
+    let fileHotspotsHtml = "";
+    if (topFiles.length > 0) {
+        const fileRows = topFiles.slice(0, 5).map((f) => {
+            const pct = Math.min(100, f.total * 5);
+            return `<div class="fr"><span class="ff">${fl(f.file)}</span><div class="fb"><div class="fbf" style="width:${pct}%;background:${f.errors > 0 ? "var(--fail)" : "var(--warn)"}"></div></div><span class="fv">${f.errors}E ${f.warnings}W</span></div>`;
+        }).join("");
+        const viewAll = topFiles.length > 5 ? `<a class="ov-link" href="files.html">View all ${topFiles.length} files \u2192</a>` : "";
+        fileHotspotsHtml = `<div class="ov-section"><h3>File Hotspots</h3>${fileRows}${viewAll}</div>`;
+    }
+    const stackHtml = Object.entries(report.meta.stack)
+        .filter(([, v]) => v !== "none" && v !== "unknown")
+        .map(([k, v]) => `<span>${k}: <b>${v}</b></span>`)
+        .join("");
+    return `
 <div class="dash">
-  <div class="hero">
-    ${buildRing(ringPct, gc(report.grade))}
-    <div class="hc"><span class="hg" style="color:${gc(report.grade)}">${report.grade}</span><span class="hs" style="color:${gc(report.grade)}">${report.score}/100</span><span class="hd">${active.length} checks \u00b7 ${totalIssues} issues \u00b7 ${report.meta.duration}ms</span></div>
-  </div>
+  ${hero}
   <div class="radar">${radarSvg}</div>
 </div>
 <div class="cats">${catCards}</div>
-<h3>All Checks</h3>
-<div class="bars">${barChart}</div>
-<div class="stack">${Object.entries(report.meta.stack)
-        .filter(([, v]) => v !== "none" && v !== "unknown")
-        .map(([k, v]) => `<span>${k}: <b>${v}</b></span>`)
-        .join("")}</div>
-</div>`;
+${timelineSection}
+<div class="ov-section"><h3>All Checks</h3><div class="bars">${barChart}</div></div>
+${topIssuesHtml}
+${fileHotspotsHtml}
+<div class="stack">${stackHtml}</div>`;
 }
-export function categoryPages(catScores, fl) {
-    let catPagesHtml = "";
-    for (const cs of catScores) {
-        const subNav = cs.checks
-            .map((c, i) => {
-            const sk = c.details.skipped;
-            return `<a class="sn${i === 0 ? " active" : ""}" data-sub="${cs.id}-${c.name}" onclick="sub(this,'${cs.id}')">${e(c.name)} <span style="color:${sk ? "#555" : gc(c.grade)}">${sk ? "\u2014" : c.grade}</span></a>`;
+// ── Single category page ──────────────────────────────────────────
+export function categoryPage(cs, fl) {
+    const subNav = cs.checks
+        .map((c, i) => {
+        const sk = c.details.skipped;
+        const premium = c.details.comingSoon;
+        const badge = premium ? "PRO" : sk ? "\u2014" : c.grade;
+        const clr = premium ? "#6366f1" : sk ? "#555" : gc(c.grade);
+        return `<a class="sn${i === 0 ? " active" : ""}${premium ? " sn-pro" : ""}" data-sub="${cs.id}-${c.name}" onclick="sub(this,'${cs.id}')">${e(c.name)} <span style="color:${clr}">${badge}</span></a>`;
+    })
+        .join("");
+    const subPages = cs.checks
+        .map((c, i) => {
+        const meta = getCheckMeta(c.name);
+        const sk = c.details.skipped;
+        const premium = c.details.comingSoon;
+        const detailsFiltered = Object.entries(c.details)
+            .filter(([k]) => k !== "skipped" && k !== "reason" && k !== "graph")
+            .map(([k, v]) => {
+            const d = Array.isArray(v) ? v.join(", ") : typeof v === "object" ? JSON.stringify(v) : String(v);
+            return `<div class="kv"><span class="k">${e(k)}</span><span class="v">${e(d)}</span></div>`;
         })
             .join("");
-        const subPages = cs.checks
-            .map((c, i) => {
-            const meta = getCheckMeta(c.name);
-            const sk = c.details.skipped;
-            const detailsFiltered = Object.entries(c.details)
-                .filter(([k]) => k !== "skipped" && k !== "reason" && k !== "graph")
-                .map(([k, v]) => {
-                const d = Array.isArray(v) ? v.join(", ") : typeof v === "object" ? JSON.stringify(v) : String(v);
-                return `<div class="kv"><span class="k">${e(k)}</span><span class="v">${e(d)}</span></div>`;
-            })
-                .join("");
-            // Group issues by file
-            const byFile = new Map();
-            const noFile = [];
-            for (const iss of c.issues) {
-                const f = iss.file?.split(":")[0];
-                if (f) {
-                    const arr = byFile.get(f) || [];
-                    arr.push(iss);
-                    byFile.set(f, arr);
-                }
-                else {
-                    noFile.push(iss);
-                }
+        const byFile = new Map();
+        const noFile = [];
+        for (const iss of c.issues) {
+            const f = iss.file?.split(":")[0];
+            if (f) {
+                const arr = byFile.get(f) || [];
+                arr.push(iss);
+                byFile.set(f, arr);
+            }
+            else {
+                noFile.push(iss);
             }
-            let issuesHtml = "";
-            for (const [file, issues] of byFile) {
-                issuesHtml += `<div class="fg"><div class="fn">${fl(file)} <span class="fc">${issues.length}</span></div>`;
-                for (const iss of issues) {
-                    const prompt = `Fix this issue in ${file}${iss.line ? `:${iss.line}` : ""}\n${iss.severity}: ${iss.message}${iss.rule ? ` (${iss.rule})` : ""}\nCheck: ${c.name}`;
-                    issuesHtml += `<div class="ir ${iss.severity}"><span class="is">${iss.severity[0].toUpperCase()}</span>${iss.line ? `<span class="il">${iss.line}</span>` : ""}<span class="im">${e(iss.message)}</span>${iss.rule ? `<span class="iru">${e(iss.rule)}</span>` : ""}<button class="cp-btn" data-prompt="${e(prompt)}" title="Copy fix prompt">\ud83d\udccb</button></div>`;
-                }
-                issuesHtml += `</div>`;
+        }
+        let issuesHtml = "";
+        for (const [file, issues] of byFile) {
+            issuesHtml += `<div class="fg"><div class="fn">${fl(file)} <span class="fc">${issues.length}</span></div>`;
+            for (const iss of issues) {
+                const prompt = `Fix this issue in ${file}${iss.line ? `:${iss.line}` : ""}\n${iss.severity}: ${iss.message}${iss.rule ? ` (${iss.rule})` : ""}\nCheck: ${c.name}`;
+                issuesHtml += `<div class="ir ${iss.severity}"><span class="is">${iss.severity[0].toUpperCase()}</span>${iss.line ? `<span class="il">${iss.line}</span>` : ""}<span class="im">${e(iss.message)}</span>${iss.rule ? `<span class="iru">${e(iss.rule)}</span>` : ""}<button class="cp-btn" data-prompt="${e(prompt)}" title="Copy fix prompt">\ud83d\udccb</button></div>`;
             }
-            if (noFile.length > 0) {
-                issuesHtml += `<div class="fg"><div class="fn">General</div>`;
-                for (const iss of noFile) {
-                    issuesHtml += `<div class="ir ${iss.severity}"><span class="is">${iss.severity[0].toUpperCase()}</span><span class="im">${e(iss.message)}</span>${iss.rule ? `<span class="iru">${e(iss.rule)}</span>` : ""}</div>`;
-                }
-                issuesHtml += `</div>`;
+            issuesHtml += `</div>`;
+        }
+        if (noFile.length > 0) {
+            issuesHtml += `<div class="fg"><div class="fn">General</div>`;
+            for (const iss of noFile) {
+                issuesHtml += `<div class="ir ${iss.severity}"><span class="is">${iss.severity[0].toUpperCase()}</span><span class="im">${e(iss.message)}</span>${iss.rule ? `<span class="iru">${e(iss.rule)}</span>` : ""}</div>`;
             }
+            issuesHtml += `</div>`;
+        }
+        if (premium) {
+            const det = c.details;
+            const desc = det.description || meta.description;
+            const detailKvs = Object.entries(det)
+                .filter(([k]) => !["premium", "comingSoon", "reason", "description"].includes(k))
+                .map(([k, v]) => `<div class="kv"><span class="k">${e(k)}</span><span class="v">${e(Array.isArray(v) ? v.join(", ") : String(v))}</span></div>`)
+                .join("");
             return `<div class="sp${i === 0 ? " active" : ""}" data-sub="${cs.id}-${c.name}">
+<div class="pro-card">
+<div class="pro-badge">PRO</div>
+<h3 style="margin-bottom:0.5rem;color:var(--text)">${e(meta.label)}</h3>
+<p class="pro-desc">${e(desc)}</p>
+${meta.risk ? `<div class="info-panel"><div class="ip-row"><span class="ip-label">Risk</span><span>${e(meta.risk)}</span></div></div>` : ""}
+${detailKvs ? `<div class="kvs" style="margin-top:0.8rem">${detailKvs}</div>` : ""}
+<p class="pro-cta">Coming soon with VibeCode QA Pro</p>
+</div>
+</div>`;
+        }
+        return `<div class="sp${i === 0 ? " active" : ""}" data-sub="${cs.id}-${c.name}">
 <div class="ch-head"><span class="ch-g" style="color:${sk ? "#555" : gc(c.grade)}">${sk ? "\u2014" : c.grade}</span><div><b>${e(meta.label)}</b><span class="ch-s">${sk ? "skipped" : `${c.score}/100`} \u00b7 weight ${meta.weight}% \u00b7 ${c.duration}ms \u00b7 ${c.issues.length} issues</span></div><span class="pri" style="color:${pc(meta.priority)}">${meta.priority}</span></div>
 ${meta.description ? `<div class="info-panel"><div class="ip-row"><span class="ip-label">What</span><span>${e(meta.description)}</span></div><div class="ip-row"><span class="ip-label">Risk</span><span>${e(meta.risk)}</span></div><div class="ip-row"><span class="ip-label">Fix</span><span>${e(meta.recommendation)}</span></div></div>` : ""}
 ${sk ? `<p class="skip-r">${e(c.details.reason || "skipped")}</p>` : ""}
-${c.name === "architecture" && !sk ? `<div class="arch-svg">${generateArchSVG(c.details)}</div>` : ""}
+${c.name === "architecture" && !sk ? `<h3 style="margin-top:1.5rem">Dependency Graph</h3><div class="arch-svg">${generateArchSVG(c.details)}</div><h3 style="margin-top:1.5rem">Package Diagram</h3><div class="arch-svg">${generatePackageDiagram(c.details)}</div><h3 style="margin-top:1.5rem">Dependency Matrix (DSM)</h3><div class="arch-svg">${generateDSM(c.details)}</div>` : ""}
+${c.name === "testing" && !sk && c.details.pyramid ? `<div class="arch-svg">${buildPyramid(c.details.pyramid)}</div>` : ""}
 ${detailsFiltered ? `<div class="kvs">${detailsFiltered}</div>` : ""}
 ${issuesHtml ? `<div class="iss-list">${issuesHtml}</div>` : '<p style="color:var(--muted);font-size:0.8rem;margin-top:1rem">No issues found.</p>'}
 </div>`;
-        })
-            .join("");
-        const clr = gc(cs.avg >= 90 ? "A" : cs.avg >= 75 ? "B" : cs.avg >= 60 ? "C" : cs.avg >= 40 ? "D" : "F");
-        catPagesHtml += `<div id="p-${cs.id}" class="page">
+    })
+        .join("");
+    const clr = gc(cs.avg >= 90 ? "A" : cs.avg >= 75 ? "B" : cs.avg >= 60 ? "C" : cs.avg >= 40 ? "D" : "F");
+    return `
 <div class="cat-head"><span style="color:${clr};font-size:1.8rem;font-weight:900">${cs.avg}</span><span style="color:${clr}">/100</span><span style="color:var(--muted);margin-left:0.5rem">${cs.label}</span></div>
 <div class="bar2"><div class="bf2" style="width:${cs.avg}%;background:${clr}"></div></div>
 <div class="sub-nav">${subNav}</div>
-${subPages}
-</div>`;
-    }
-    return catPagesHtml;
+${subPages}`;
 }
+// ── Issues view ──────────────────────────────────────────
 export function issuesPage(allChecks, totalIssues, fl) {
     const allIssues = allChecks.flatMap((c) => c.issues.map((i) => ({ check: c.name, ...i })));
+    const errorCount = allIssues.filter((i) => i.severity === "error").length;
+    const warnCount = allIssues.filter((i) => i.severity === "warning").length;
+    const infoCount = allIssues.filter((i) => i.severity === "info").length;
     const issueRows = allIssues
+        .sort((a, b) => (a.severity === "error" ? 0 : a.severity === "warning" ? 1 : 2) - (b.severity === "error" ? 0 : b.severity === "warning" ? 1 : 2))
         .slice(0, 200)
         .map((i) => {
         const loc = i.file ? fl(i.file.split(":")[0], i.line) : "";
         return `<tr class="${i.severity}"><td class="is2">${i.severity[0].toUpperCase()}</td><td class="ic2">${e(i.check)}</td><td class="il2">${loc}</td><td>${e(i.message)}</td><td class="iru2">${e(i.rule || "")}</td></tr>`;
     })
         .join("");
-    return `<div id="p-issues" class="page">
+    return `
 <h2>All Issues <span style="color:var(--muted);font-weight:400">${totalIssues}</span></h2>
-<div class="isf">${allIssues.filter((i) => i.severity === "error").length} errors \u00b7 ${allIssues.filter((i) => i.severity === "warning").length} warnings</div>
+<div class="isf"><span style="color:var(--fail)">${errorCount} errors</span> \u00b7 <span style="color:var(--warn)">${warnCount} warnings</span>${infoCount > 0 ? ` \u00b7 <span style="color:var(--info)">${infoCount} info</span>` : ""}</div>
 <table class="it"><thead><tr><th></th><th>Check</th><th>Location</th><th>Message</th><th>Rule</th></tr></thead><tbody>${issueRows}</tbody></table>
-${allIssues.length > 200 ? `<p style="color:var(--muted);text-align:center;margin-top:1rem">Showing 200 of ${allIssues.length}</p>` : ""}
-</div>`;
+${allIssues.length > 200 ? `<p style="color:var(--muted);text-align:center;margin-top:1rem">Showing 200 of ${allIssues.length}</p>` : ""}`;
 }
-export function filesPage(topFiles, fl) {
-    const fileRows = topFiles
+// ── Files view ───────────────────────────────────────────
+export function filesPage(topFiles, fileIssues, fl) {
+    if (topFiles.length === 0) {
+        return `<h2>File Health</h2><p style="color:var(--muted)">No file-level issues found.</p>`;
+    }
+    const maxIssues = Math.max(...topFiles.map((f) => f.total));
+    const heatmapRows = topFiles
+        .slice(0, 30)
         .map((f) => {
-        const pct = Math.min(100, f.total * 5);
-        return `<div class="fr"><span class="ff">${fl(f.file)}</span><div class="fb"><div class="fbf" style="width:${pct}%;background:${f.errors > 0 ? "var(--fail)" : "var(--warn)"}"></div></div><span class="fv">${f.errors}E ${f.warnings}W</span><span class="fcs">${f.checks.join(", ")}</span></div>`;
+        const intensity = maxIssues > 0 ? f.total / maxIssues : 0;
+        const r = Math.round(239 * intensity);
+        const g = Math.round(68 * (1 - intensity) + 197 * (f.errors === 0 ? 0.3 : 0));
+        const color = `rgb(${r},${g},30)`;
+        const barW = Math.max(4, Math.round(intensity * 200));
+        return `<div class="hm-row"><span class="hm-name">${fl(f.file)}</span><div class="hm-bar" style="width:${barW}px;background:${color}" title="${f.total} issues (${f.checks.join(", ")})"></div><span class="hm-count">${f.errors}E ${f.warnings}W</span><span class="hm-checks">${f.checks.join(", ")}</span></div>`;
     })
         .join("");
-    return `<div id="p-files" class="page">
-<h2>File Heatmap</h2>
-<p style="color:var(--muted);font-size:0.78rem;margin-bottom:1rem">Top ${topFiles.length} files by total issues across all checks</p>
-${fileRows || '<p style="color:var(--muted)">No file-level issues found.</p>'}
-</div>`;
-}
-export function heatmapPage(fileIssues, fl) {
-    const heatmapFiles = [...fileIssues.entries()].sort((a, b) => b[1].errors + b[1].warnings - a[1].errors - a[1].warnings).slice(0, 30);
-    let heatmapHtml = "";
-    if (heatmapFiles.length > 0) {
-        const maxIssues = Math.max(...heatmapFiles.map(([, d]) => d.errors + d.warnings));
-        heatmapHtml = heatmapFiles
-            .map(([file, d]) => {
-            const total = d.errors + d.warnings;
-            const intensity = maxIssues > 0 ? total / maxIssues : 0;
-            const r = Math.round(239 * intensity); // red channel
-            const g = Math.round(68 * (1 - intensity) + 197 * (d.errors === 0 ? 0.3 : 0)); // green
-            const color = `rgb(${r},${g},30)`;
-            const barW = Math.max(4, Math.round(intensity * 200));
-            const checks = [...d.checks].join(", ");
-            return `<div class="hm-row"><span class="hm-name">${fl(file)}</span><div class="hm-bar" style="width:${barW}px;background:${color}" title="${total} issues (${checks})"></div><span class="hm-count">${d.errors}E ${d.warnings}W</span></div>`;
-        })
-            .join("");
-    }
-    return `<div id="p-heatmap" class="page">
-<h2>Code Heatmap</h2>
-<p style="color:var(--muted);font-size:0.78rem;margin-bottom:1rem">Visual density of issues per file. Red = errors, orange = warnings. Bar width = relative issue count.</p>
-${heatmapHtml || '<p style="color:var(--muted)">No issues to visualize.</p>'}
-</div>`;
+    return `
+<h2>File Health</h2>
+<p style="color:var(--muted);font-size:0.78rem;margin-bottom:1rem">${fileIssues.size} files with issues across ${topFiles.reduce((s, f) => { for (const c of f.checks)
+        s.add(c); return s; }, new Set()).size} checks.</p>
+${heatmapRows}`;
 }

package/dist/report/sarif.d.ts

@@ -0,0 +1,3 @@
+/** SARIF 2.1.0 output for GitHub Code Scanning integration. */
+import type { VibeReport } from "../types.js";
+export declare function generateSARIF(report: VibeReport): string;