@vibecodeqa/cli 0.17.0 → 0.18.0

package/dist/report/html.js

@@ -1,37 +1,38 @@
-/** Generate a multi-page navigable HTML report.
+/** Generate a multi-page HTML report as separate files.
  *
- * Architecture:
- *   Primary nav:   Overview | Foundations | Quality | Testing | Security | Architecture | AI Readiness
- *   Secondary nav:  Issues (N) | Files  (right-aligned, visually distinct)
- *   Sidebar:        Score + dimension tree + view links
- *   Overview:       Dashboard with score, radar, timeline, category cards, top issues, file hotspots
- *   Dimensions:     Sub-tabs for each check within a category
- *   Views:          Cross-cutting data slices (issues table, file health map)
- *
- * All in one self-contained HTML file using show/hide navigation.
+ * 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, 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", "react", "accessibility", "docs"] },
-    { id: "testing", label: "Testing", checks: ["testing"] },
-    { id: "arch", label: "Architecture", checks: ["architecture"] },
-    { id: "security", label: "Security", checks: ["secrets", "security", "dependencies"] },
-    { id: "llm", label: "AI 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, historyDir) {
+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";
-    // ── Aggregate file issues across all checks ──
     const fileIssues = new Map();
     for (const c of allChecks) {
         for (const iss of c.issues) {
@@ -51,45 +52,86 @@ export function generateHTML(report, historyDir) {
         .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, 30);
-    // ── Category averages ──
     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 };
     });
-    // ── Primary nav (dimensions) ──
-    const dimNavItems = [
-        { id: "overview", label: "Overview" },
-        ...GROUPS.map((g) => ({ id: g.id, label: g.label })),
+    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 dimNav = dimNavItems.map((t) => `<a class="tn" data-page="${t.id}" onclick="go('${t.id}')">${t.label}</a>`).join("");
-    // ── Secondary nav (data views, right-aligned) ──
-    const viewNav = [
-        { id: "issues", label: `Issues (${totalIssues})` },
-        { id: "files", label: "Files" },
-    ]
-        .map((t) => `<a class="tn tn-view" data-page="${t.id}" onclick="go('${t.id}')">${t.label}</a>`)
+    const nav = navItems
+        .map((t) => `<a class="tn${t.id === currentId ? " active" : ""}" href="${t.file}">${t.label}</a>`)
         .join("");
-    // ── Sidebar ──
-    const sidebarDims = 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>`;
-    })
-        .join("");
-    const sidebarViews = `<div class="side-section side-views"><div class="side-views-label">Views</div><a class="side-check" onclick="go('issues')">Issues <span style="color:var(--muted)">${totalIssues}</span></a><a class="side-check" onclick="go('files')">Files <span style="color:var(--muted)">${fileIssues.size}</span></a></div>`;
-    // ── Assemble pages ──
-    const overview = overviewPage(report, active, totalIssues, catScores, allChecks, topFiles, fl, historyDir);
-    const catPages = categoryPages(catScores, fl);
-    const issues = issuesPage(allChecks, totalIssues, fl);
-    const files = filesPage(topFiles, fileIssues, fl);
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -101,45 +143,36 @@ export function generateHTML(report, historyDir) {
 <body>
 
 <nav class="top">
-  <div class="logo"><span>VibeCode</span> QA</div>
-  <div class="nav-dims">${dimNav}</div>
-  <div class="nav-views">${viewNav}</div>
+  <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>
-  ${sidebarDims}
-  ${sidebarViews}
-</aside>
+<aside class="side" id="sidebar">${sidebar}</aside>
+
 <div class="content">
-  ${overview}
-  ${catPages}
-  ${issues}
-  ${files}
+  ${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
 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;
 }
@@ -15,7 +16,7 @@ export interface FileEntry {
 }
 type FL = (path: string, line?: number) => 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 categoryPages(catScores: CatScore[], fl: FL): 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[], fileIssues: Map<string, {
     errors: number;

package/dist/report/pages.js

@@ -1,12 +1,11 @@
 /** Page renderers for the HTML report. */
 import { getCheckMeta } from "../check-meta.js";
 import { loadHistory } from "../history.js";
-import { generateArchSVG } from "../runners/architecture.js";
+import { generateArchSVG, generateDSM, generatePackageDiagram } from "../runners/architecture.js";
 import { e, gc, pc } from "./components.js";
 import { buildPyramid, buildRadar, buildRing, buildTimeline } from "./svg.js";
 // ── Overview ──────────────────────────────────────────────────────────
 export function overviewPage(report, active, totalIssues, catScores, allChecks, topFiles, fl, historyDir) {
-    // Hero: score ring + grade
     const hero = `<div class="hero">
     ${buildRing(report.score, gc(report.grade))}
     <div class="hc">
@@ -15,9 +14,8 @@ export function overviewPage(report, active, totalIssues, catScores, allChecks,
       <span class="hd">${active.length} checks \u00b7 ${totalIssues} issues \u00b7 ${report.meta.duration}ms</span>
     </div>
   </div>`;
-    // Radar chart
-    const radarSvg = buildRadar(catScores.map((cs) => ({ label: cs.label, score: cs.avg })));
-    // Category cards
+    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");
@@ -27,10 +25,10 @@ export function overviewPage(report, active, totalIssues, catScores, allChecks,
             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("");
-    // Score timeline (from history)
     let timelineSection = "";
     if (historyDir) {
         const history = loadHistory(historyDir);
@@ -39,14 +37,12 @@ export function overviewPage(report, active, totalIssues, catScores, allChecks,
             timelineSection = `<div class="ov-section"><h3>Score Timeline</h3><div class="timeline">${timelineSvg}</div></div>`;
         }
     }
-    // All checks bar chart
     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("");
-    // Top issues preview (10 most severe)
     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))
@@ -59,25 +55,23 @@ export function overviewPage(report, active, totalIssues, catScores, allChecks,
             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" onclick="go('issues')">View all ${allIssues.length} issues \u2192</a>` : "";
+        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>`;
     }
-    // File hotspots preview (top 5)
     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" onclick="go('files')">View all ${topFiles.length} files \u2192</a>` : "";
+        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>`;
     }
-    // Stack badges
     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 id="p-overview" class="page active">
+    return `
 <div class="dash">
   ${hero}
   <div class="radar">${radarSvg}</div>
@@ -87,82 +81,97 @@ ${timelineSection}
 <div class="ov-section"><h3>All Checks</h3><div class="bars">${barChart}</div></div>
 ${topIssuesHtml}
 ${fileHotspotsHtml}
-<div class="stack">${stackHtml}</div>
-</div>`;
+<div class="stack">${stackHtml}</div>`;
 }
-// ── Category dimension pages ──────────────────────────────────────────
-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);
             }
-            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>`;
+            else {
+                noFile.push(iss);
             }
-            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>`;
+        }
+        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>`;
+        }
+        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 (cross-cutting) ──────────────────────────────────────
+// ── 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;
@@ -176,19 +185,17 @@ export function issuesPage(allChecks, totalIssues, fl) {
         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"><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>` : ""}`;
 }
-// ── Files view (merged file map + heatmap) ───────────────────────────
+// ── Files view ───────────────────────────────────────────
 export function filesPage(topFiles, fileIssues, fl) {
     if (topFiles.length === 0) {
-        return `<div id="p-files" class="page"><h2>File Health</h2><p style="color:var(--muted)">No file-level issues found.</p></div>`;
+        return `<h2>File Health</h2><p style="color:var(--muted)">No file-level issues found.</p>`;
     }
-    // Heatmap (visual density bars)
     const maxIssues = Math.max(...topFiles.map((f) => f.total));
     const heatmapRows = topFiles
         .slice(0, 30)
@@ -201,10 +208,9 @@ export function filesPage(topFiles, fileIssues, fl) {
         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">
+    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. Bar color: red = errors, orange = warnings only. Width = relative issue density.</p>
-${heatmapRows}
-</div>`;
+        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;

package/dist/report/sarif.js

@@ -0,0 +1,67 @@
+/** SARIF 2.1.0 output for GitHub Code Scanning integration. */
+import { getCheckMeta } from "../check-meta.js";
+export function generateSARIF(report) {
+    const rules = [];
+    const ruleIndex = new Map();
+    const results = [];
+    for (const check of report.checks) {
+        const meta = getCheckMeta(check.name);
+        for (const issue of check.issues) {
+            const ruleId = issue.rule || check.name;
+            // Register rule if not seen
+            if (!ruleIndex.has(ruleId)) {
+                ruleIndex.set(ruleId, rules.length);
+                rules.push({
+                    id: ruleId,
+                    name: ruleId,
+                    shortDescription: { text: meta.label },
+                    fullDescription: meta.description ? { text: meta.description } : undefined,
+                    defaultConfiguration: { level: severityToLevel(issue.severity) },
+                    helpUri: "https://vibecodeqa.online",
+                });
+            }
+            const result = {
+                ruleId,
+                level: severityToLevel(issue.severity),
+                message: { text: `[${check.name}] ${issue.message}` },
+            };
+            if (issue.file) {
+                const filePath = issue.file.split(":")[0];
+                result.locations = [
+                    {
+                        physicalLocation: {
+                            artifactLocation: { uri: filePath },
+                            ...(issue.line ? { region: { startLine: issue.line } } : {}),
+                        },
+                    },
+                ];
+            }
+            results.push(result);
+        }
+    }
+    const sarif = {
+        $schema: "https://json.schemastore.org/sarif-2.1.0.json",
+        version: "2.1.0",
+        runs: [
+            {
+                tool: {
+                    driver: {
+                        name: "VibeCode QA",
+                        version: report.version,
+                        informationUri: "https://vibecodeqa.online",
+                        rules,
+                    },
+                },
+                results,
+            },
+        ],
+    };
+    return JSON.stringify(sarif, null, 2);
+}
+function severityToLevel(severity) {
+    if (severity === "error")
+        return "error";
+    if (severity === "warning")
+        return "warning";
+    return "note";
+}