@vibecodeqa/cli 0.15.0 → 0.17.0

package/dist/report/pages.js

@@ -0,0 +1,210 @@
+/** Page renderers for the HTML report. */
+import { getCheckMeta } from "../check-meta.js";
+import { loadHistory } from "../history.js";
+import { generateArchSVG } 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">
+      <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>`;
+    // Radar chart
+    const radarSvg = buildRadar(catScores.map((cs) => ({ label: cs.label, score: cs.avg })));
+    // Category cards
+    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");
+        const mini = cs.checks
+            .map((c) => {
+            const sk = c.details.skipped;
+            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>`;
+    })
+        .join("");
+    // Score timeline (from history)
+    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>`;
+        }
+    }
+    // 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))
+        .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" onclick="go('issues')">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>` : "";
+        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">
+<div class="dash">
+  ${hero}
+  <div class="radar">${radarSvg}</div>
+</div>
+<div class="cats">${catCards}</div>
+${timelineSection}
+<div class="ov-section"><h3>All Checks</h3><div class="bars">${barChart}</div></div>
+${topIssuesHtml}
+${fileHotspotsHtml}
+<div class="stack">${stackHtml}</div>
+</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>`;
+        })
+            .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);
+                }
+            }
+            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>`;
+            }
+            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 === "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">
+<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;
+}
+// ── Issues view (cross-cutting) ──────────────────────────────────────
+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">
+<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>`;
+}
+// ── Files view (merged file map + heatmap) ───────────────────────────
+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>`;
+    }
+    // Heatmap (visual density bars)
+    const maxIssues = Math.max(...topFiles.map((f) => f.total));
+    const heatmapRows = topFiles
+        .slice(0, 30)
+        .map((f) => {
+        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 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>`;
+}

package/dist/report/styles.d.ts

@@ -0,0 +1,2 @@
+/** All CSS for the HTML report, extracted for maintainability. */
+export declare const CSS = "\n:root{--bg:#09090b;--card:#111115;--border:#1e1e24;--text:#e5e5e5;--muted:#6b7280;--pass:#22c55e;--fail:#ef4444;--warn:#eab308;--info:#6366f1;--accent:#818cf8}\n*{margin:0;padding:0;box-sizing:border-box}\nbody{font-family:\"Inter\",system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}\ncode{font-family:\"SF Mono\",Menlo,monospace;font-size:0.85em}\n\n/* Top nav \u2014 split into dimensions (left) and views (right) */\n.top{position:sticky;top:0;z-index:20;background:#0c0c0fcc;backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 2rem;display:flex;align-items:center;gap:0}\n.logo{font-weight:800;font-size:1rem;margin-right:1.5rem;padding:0.7rem 0;flex-shrink:0}\n.logo span{color:var(--accent)}\n.nav-dims{display:flex;align-items:center;gap:0}\n.nav-views{margin-left:auto;display:flex;align-items:center;gap:0;border-left:1px solid var(--border);padding-left:0.3rem}\n.tn{padding:0.7rem 0.8rem;font-size:0.78rem;color:var(--muted);text-decoration:none;cursor:pointer;border-bottom:2px solid transparent;transition:all 0.15s}\n.tn:hover{color:var(--text)}\n.tn.active{color:var(--text);border-bottom-color:var(--accent)}\n.tn-view{font-size:0.72rem;opacity:0.8}\n.tn-view.active{opacity:1}\n\n/* Sidebar */\n.side{position:fixed;top:42px;left:0;bottom:0;width:200px;background:#0c0c0f;border-right:1px solid var(--border);overflow-y:auto;padding:0.8rem 0;font-size:0.7rem;z-index:10}\n.side-section{padding:0.3rem 0;border-bottom:1px solid var(--border)}\n.side-section:last-child{border-bottom:none}\n.side-score{font-size:1.4rem;font-weight:900;padding:0.3rem 0.8rem}\n.side-cat{display:block;padding:0.3rem 0.8rem;color:var(--text);font-weight:700;cursor:pointer;text-decoration:none;font-size:0.72rem}\n.side-cat:hover{background:#14141a}\n.side-check{display:block;padding:0.2rem 0.8rem 0.2rem 1.2rem;color:var(--muted);cursor:pointer;text-decoration:none;font-size:0.65rem}\n.side-check:hover{color:var(--text);background:#14141a}\n.side-check span{display:inline-block;width:1rem;font-weight:800;text-align:center}\n.side-views{padding-top:0.5rem}\n.side-views-label{padding:0.2rem 0.8rem;font-size:0.6rem;text-transform:uppercase;letter-spacing:0.05em;color:#444;font-weight:600}\n.side-views .side-check{padding-left:0.8rem}\n\n/* Content */\n.content{max-width:900px;margin-left:200px;padding:2rem}\n.page{display:none;animation:fadeIn 0.15s}\n.page.active{display:block}\n@keyframes fadeIn{from{opacity:0}to{opacity:1}}\n\n/* Overview */\n.dash{display:flex;gap:2rem;margin-bottom:2rem;align-items:center;flex-wrap:wrap}\n.hero{display:flex;align-items:center;gap:1rem}\n.hero svg{width:100px;height:100px}\n.hc{display:flex;flex-direction:column}\n.hg{font-size:2.5rem;font-weight:900;line-height:1}\n.hs{font-size:1rem;font-weight:600}\n.hd{font-size:0.68rem;color:var(--muted)}\n.radar{flex:1;display:flex;justify-content:center}\n.radar svg{max-width:240px;width:100%}\n.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0.6rem;margin-bottom:2rem}\n.cc{background:var(--card);border:1px solid var(--border);border-radius:0.6rem;padding:0.8rem;cursor:pointer;transition:border-color 0.15s}\n.cc:hover{border-color:var(--accent)}\n.cc-s{font-size:1.8rem;font-weight:900}\n.cc-l{font-size:0.75rem;color:var(--muted)}\n.cc-m{margin-top:0.3rem;display:flex;gap:0.25rem}\n.mc{font-size:0.65rem;font-weight:800}\nh3{font-size:0.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:0.5rem}\n\n/* Overview sections */\n.ov-section{margin-bottom:1.5rem}\n.ov-issue{font-size:0.68rem;font-family:\"SF Mono\",monospace;padding:0.2rem 0;display:flex;gap:0.4rem;align-items:baseline;border-bottom:1px solid var(--border)}\n.ov-issue .is{flex-shrink:0}\n.ov-issue.error .is{color:var(--fail)}\n.ov-issue.warning .is{color:var(--warn)}\n.ov-check{color:var(--muted);width:70px;flex-shrink:0;font-size:0.62rem}\n.ov-loc{color:var(--accent);flex-shrink:0;font-size:0.62rem;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.ov-msg{flex:1;word-break:break-word}\n.ov-link{display:block;margin-top:0.5rem;font-size:0.72rem;color:var(--accent);cursor:pointer;text-decoration:none}\n.ov-link:hover{text-decoration:underline}\n\n/* Timeline */\n.timeline{margin:0.5rem 0;overflow-x:auto}\n.timeline svg{max-width:100%}\n\n/* Bar chart */\n.bars{margin-bottom:1.5rem}\n.brow{display:flex;align-items:center;gap:0.4rem;margin-bottom:0.25rem;font-size:0.72rem}\n.bl{width:90px;text-align:right;color:var(--muted);flex-shrink:0}\n.bb{flex:1;height:14px;background:var(--card);border-radius:3px;overflow:hidden;border:1px solid var(--border)}\n.bf{height:100%;border-radius:2px}\n.bv{width:36px;font-weight:700;font-size:0.68rem}\n.stack{display:flex;gap:0.35rem;flex-wrap:wrap;margin-top:1rem}\n.stack span{background:var(--card);border:1px solid var(--border);padding:0.1rem 0.45rem;border-radius:9999px;font-size:0.62rem;color:var(--muted)}\n\n/* Category pages */\n.cat-head{margin-bottom:0.3rem}\n.bar2{height:4px;background:var(--card);border-radius:2px;margin-bottom:1rem;overflow:hidden}\n.bf2{height:100%;border-radius:2px}\n.sub-nav{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:1rem;flex-wrap:wrap}\n.sn{padding:0.5rem 0.8rem;font-size:0.75rem;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}\n.sn:hover{color:var(--text)}\n.sn.active{color:var(--text);border-bottom-color:var(--accent)}\n.sp{display:none}.sp.active{display:block}\n\n/* Check detail */\n.ch-head{display:flex;align-items:center;gap:0.7rem;margin-bottom:0.8rem}\n.ch-g{font-size:2rem;font-weight:900}\n.ch-s{display:block;font-size:0.7rem;color:var(--muted)}\n.pri{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;padding:0.15rem 0.5rem;border-radius:9999px;border:1px solid currentColor;flex-shrink:0}\n.info-panel{background:#0d0d12;border:1px solid var(--border);border-radius:0.5rem;padding:0.7rem 0.9rem;margin-bottom:1rem;font-size:0.72rem;line-height:1.6}\n.ip-row{margin-bottom:0.4rem;display:flex;gap:0.5rem}\n.ip-row:last-child{margin-bottom:0}\n.ip-label{color:var(--accent);font-weight:700;min-width:2.5rem;flex-shrink:0}\n.skip-r{color:var(--muted);font-style:italic;font-size:0.78rem}\n.kvs{display:flex;gap:0.6rem;flex-wrap:wrap;margin-bottom:1rem}\n.kv{background:var(--card);border:1px solid var(--border);border-radius:0.4rem;padding:0.3rem 0.6rem;font-size:0.7rem}\n.k{color:var(--muted);margin-right:0.3rem}\n.v{font-weight:600}\n\n/* Issue list grouped by file */\n.iss-list{margin-top:1rem}\n.fg{margin-bottom:0.8rem}\n.fn{font-size:0.72rem;font-weight:600;font-family:\"SF Mono\",monospace;padding:0.3rem 0;border-bottom:1px solid var(--border);margin-bottom:0.2rem;display:flex;align-items:center;gap:0.5rem}\n.fc{background:var(--border);border-radius:9999px;padding:0 0.4rem;font-size:0.6rem;color:var(--muted)}\n.ir{font-size:0.65rem;font-family:\"SF Mono\",monospace;padding:0.12rem 0 0.12rem 0.5rem;display:flex;gap:0.4rem;align-items:baseline}\n.is{font-weight:800;font-size:0.55rem;width:0.9rem;text-align:center;border-radius:2px;flex-shrink:0}\n.ir.error .is{color:var(--fail);background:#ef444418}\n.ir.warning .is{color:var(--warn);background:#eab30818}\n.il{color:var(--accent);min-width:2rem;flex-shrink:0}\n.im{flex:1;word-break:break-word}\n.iru{color:#555;font-size:0.55rem}\n\n/* All issues table */\n.isf{color:var(--muted);font-size:0.75rem;margin-bottom:0.8rem}\n.it{width:100%;border-collapse:collapse;font-size:0.68rem}\n.it th{text-align:left;padding:0.35rem 0.4rem;color:var(--muted);font-size:0.62rem;text-transform:uppercase;border-bottom:1px solid var(--border)}\n.it td{padding:0.25rem 0.4rem;border-bottom:1px solid var(--border);font-family:\"SF Mono\",monospace;font-size:0.62rem}\n.it tr.error .is2{color:var(--fail)}\n.it tr.warning .is2{color:var(--warn)}\n.is2{font-weight:800;width:1rem}\n.ic2{color:var(--muted);width:70px}\n.il2{color:var(--muted)}\n.iru2{color:#555;font-size:0.58rem}\n\n/* File health (merged file map + heatmap) */\n.fr{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.3rem;font-size:0.7rem}\n.ff{width:200px;font-family:\"SF Mono\",monospace;font-size:0.65rem;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.fb{flex:1;height:12px;background:var(--card);border-radius:3px;overflow:hidden;border:1px solid var(--border)}\n.fbf{height:100%;border-radius:2px}\n.fv{width:50px;font-size:0.65rem;color:var(--muted);flex-shrink:0}\n.fcs{font-size:0.6rem;color:#555}\n.hm-row{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.2rem;font-size:0.7rem}\n.hm-name{width:200px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:\"SF Mono\",monospace;font-size:0.65rem}\n.hm-bar{height:14px;border-radius:3px;min-width:4px}\n.hm-count{color:var(--muted);font-size:0.65rem;flex-shrink:0;min-width:50px}\n.hm-checks{font-size:0.58rem;color:#555;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.footer{text-align:center;color:var(--muted);font-size:0.58rem;margin-top:2rem;padding:0.8rem 0;border-top:1px solid var(--border)}\n.footer a{color:var(--muted)}\n.flink{color:var(--accent);text-decoration:none;font-family:\"SF Mono\",monospace}.flink:hover{text-decoration:underline}\n.arch-svg{margin:1rem 0;overflow-x:auto}\n.arch-svg svg{border-radius:8px}\n.cp-btn{background:none;border:none;cursor:pointer;font-size:0.6rem;opacity:0.3;padding:0 0.2rem;flex-shrink:0}.cp-btn:hover{opacity:1}\n.ir:hover .cp-btn{opacity:0.6}\n@media(max-width:768px){.side{display:none}.content{margin-left:0;padding:1rem}.cats{grid-template-columns:1fr 1fr}.dash{flex-direction:column}.nav-views{display:none}}\n";

package/dist/report/styles.js

@@ -0,0 +1,156 @@
+/** All CSS for the HTML report, extracted for maintainability. */
+export const CSS = `
+:root{--bg:#09090b;--card:#111115;--border:#1e1e24;--text:#e5e5e5;--muted:#6b7280;--pass:#22c55e;--fail:#ef4444;--warn:#eab308;--info:#6366f1;--accent:#818cf8}
+*{margin:0;padding:0;box-sizing:border-box}
+body{font-family:"Inter",system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
+code{font-family:"SF Mono",Menlo,monospace;font-size:0.85em}
+
+/* Top nav — split into dimensions (left) and views (right) */
+.top{position:sticky;top:0;z-index:20;background:#0c0c0fcc;backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 2rem;display:flex;align-items:center;gap:0}
+.logo{font-weight:800;font-size:1rem;margin-right:1.5rem;padding:0.7rem 0;flex-shrink:0}
+.logo span{color:var(--accent)}
+.nav-dims{display:flex;align-items:center;gap:0}
+.nav-views{margin-left:auto;display:flex;align-items:center;gap:0;border-left:1px solid var(--border);padding-left:0.3rem}
+.tn{padding:0.7rem 0.8rem;font-size:0.78rem;color:var(--muted);text-decoration:none;cursor:pointer;border-bottom:2px solid transparent;transition:all 0.15s}
+.tn:hover{color:var(--text)}
+.tn.active{color:var(--text);border-bottom-color:var(--accent)}
+.tn-view{font-size:0.72rem;opacity:0.8}
+.tn-view.active{opacity:1}
+
+/* Sidebar */
+.side{position:fixed;top:42px;left:0;bottom:0;width:200px;background:#0c0c0f;border-right:1px solid var(--border);overflow-y:auto;padding:0.8rem 0;font-size:0.7rem;z-index:10}
+.side-section{padding:0.3rem 0;border-bottom:1px solid var(--border)}
+.side-section:last-child{border-bottom:none}
+.side-score{font-size:1.4rem;font-weight:900;padding:0.3rem 0.8rem}
+.side-cat{display:block;padding:0.3rem 0.8rem;color:var(--text);font-weight:700;cursor:pointer;text-decoration:none;font-size:0.72rem}
+.side-cat:hover{background:#14141a}
+.side-check{display:block;padding:0.2rem 0.8rem 0.2rem 1.2rem;color:var(--muted);cursor:pointer;text-decoration:none;font-size:0.65rem}
+.side-check:hover{color:var(--text);background:#14141a}
+.side-check span{display:inline-block;width:1rem;font-weight:800;text-align:center}
+.side-views{padding-top:0.5rem}
+.side-views-label{padding:0.2rem 0.8rem;font-size:0.6rem;text-transform:uppercase;letter-spacing:0.05em;color:#444;font-weight:600}
+.side-views .side-check{padding-left:0.8rem}
+
+/* Content */
+.content{max-width:900px;margin-left:200px;padding:2rem}
+.page{display:none;animation:fadeIn 0.15s}
+.page.active{display:block}
+@keyframes fadeIn{from{opacity:0}to{opacity:1}}
+
+/* Overview */
+.dash{display:flex;gap:2rem;margin-bottom:2rem;align-items:center;flex-wrap:wrap}
+.hero{display:flex;align-items:center;gap:1rem}
+.hero svg{width:100px;height:100px}
+.hc{display:flex;flex-direction:column}
+.hg{font-size:2.5rem;font-weight:900;line-height:1}
+.hs{font-size:1rem;font-weight:600}
+.hd{font-size:0.68rem;color:var(--muted)}
+.radar{flex:1;display:flex;justify-content:center}
+.radar svg{max-width:240px;width:100%}
+.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0.6rem;margin-bottom:2rem}
+.cc{background:var(--card);border:1px solid var(--border);border-radius:0.6rem;padding:0.8rem;cursor:pointer;transition:border-color 0.15s}
+.cc:hover{border-color:var(--accent)}
+.cc-s{font-size:1.8rem;font-weight:900}
+.cc-l{font-size:0.75rem;color:var(--muted)}
+.cc-m{margin-top:0.3rem;display:flex;gap:0.25rem}
+.mc{font-size:0.65rem;font-weight:800}
+h3{font-size:0.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:0.5rem}
+
+/* Overview sections */
+.ov-section{margin-bottom:1.5rem}
+.ov-issue{font-size:0.68rem;font-family:"SF Mono",monospace;padding:0.2rem 0;display:flex;gap:0.4rem;align-items:baseline;border-bottom:1px solid var(--border)}
+.ov-issue .is{flex-shrink:0}
+.ov-issue.error .is{color:var(--fail)}
+.ov-issue.warning .is{color:var(--warn)}
+.ov-check{color:var(--muted);width:70px;flex-shrink:0;font-size:0.62rem}
+.ov-loc{color:var(--accent);flex-shrink:0;font-size:0.62rem;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ov-msg{flex:1;word-break:break-word}
+.ov-link{display:block;margin-top:0.5rem;font-size:0.72rem;color:var(--accent);cursor:pointer;text-decoration:none}
+.ov-link:hover{text-decoration:underline}
+
+/* Timeline */
+.timeline{margin:0.5rem 0;overflow-x:auto}
+.timeline svg{max-width:100%}
+
+/* Bar chart */
+.bars{margin-bottom:1.5rem}
+.brow{display:flex;align-items:center;gap:0.4rem;margin-bottom:0.25rem;font-size:0.72rem}
+.bl{width:90px;text-align:right;color:var(--muted);flex-shrink:0}
+.bb{flex:1;height:14px;background:var(--card);border-radius:3px;overflow:hidden;border:1px solid var(--border)}
+.bf{height:100%;border-radius:2px}
+.bv{width:36px;font-weight:700;font-size:0.68rem}
+.stack{display:flex;gap:0.35rem;flex-wrap:wrap;margin-top:1rem}
+.stack span{background:var(--card);border:1px solid var(--border);padding:0.1rem 0.45rem;border-radius:9999px;font-size:0.62rem;color:var(--muted)}
+
+/* Category pages */
+.cat-head{margin-bottom:0.3rem}
+.bar2{height:4px;background:var(--card);border-radius:2px;margin-bottom:1rem;overflow:hidden}
+.bf2{height:100%;border-radius:2px}
+.sub-nav{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:1rem;flex-wrap:wrap}
+.sn{padding:0.5rem 0.8rem;font-size:0.75rem;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
+.sn:hover{color:var(--text)}
+.sn.active{color:var(--text);border-bottom-color:var(--accent)}
+.sp{display:none}.sp.active{display:block}
+
+/* Check detail */
+.ch-head{display:flex;align-items:center;gap:0.7rem;margin-bottom:0.8rem}
+.ch-g{font-size:2rem;font-weight:900}
+.ch-s{display:block;font-size:0.7rem;color:var(--muted)}
+.pri{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;padding:0.15rem 0.5rem;border-radius:9999px;border:1px solid currentColor;flex-shrink:0}
+.info-panel{background:#0d0d12;border:1px solid var(--border);border-radius:0.5rem;padding:0.7rem 0.9rem;margin-bottom:1rem;font-size:0.72rem;line-height:1.6}
+.ip-row{margin-bottom:0.4rem;display:flex;gap:0.5rem}
+.ip-row:last-child{margin-bottom:0}
+.ip-label{color:var(--accent);font-weight:700;min-width:2.5rem;flex-shrink:0}
+.skip-r{color:var(--muted);font-style:italic;font-size:0.78rem}
+.kvs{display:flex;gap:0.6rem;flex-wrap:wrap;margin-bottom:1rem}
+.kv{background:var(--card);border:1px solid var(--border);border-radius:0.4rem;padding:0.3rem 0.6rem;font-size:0.7rem}
+.k{color:var(--muted);margin-right:0.3rem}
+.v{font-weight:600}
+
+/* Issue list grouped by file */
+.iss-list{margin-top:1rem}
+.fg{margin-bottom:0.8rem}
+.fn{font-size:0.72rem;font-weight:600;font-family:"SF Mono",monospace;padding:0.3rem 0;border-bottom:1px solid var(--border);margin-bottom:0.2rem;display:flex;align-items:center;gap:0.5rem}
+.fc{background:var(--border);border-radius:9999px;padding:0 0.4rem;font-size:0.6rem;color:var(--muted)}
+.ir{font-size:0.65rem;font-family:"SF Mono",monospace;padding:0.12rem 0 0.12rem 0.5rem;display:flex;gap:0.4rem;align-items:baseline}
+.is{font-weight:800;font-size:0.55rem;width:0.9rem;text-align:center;border-radius:2px;flex-shrink:0}
+.ir.error .is{color:var(--fail);background:#ef444418}
+.ir.warning .is{color:var(--warn);background:#eab30818}
+.il{color:var(--accent);min-width:2rem;flex-shrink:0}
+.im{flex:1;word-break:break-word}
+.iru{color:#555;font-size:0.55rem}
+
+/* All issues table */
+.isf{color:var(--muted);font-size:0.75rem;margin-bottom:0.8rem}
+.it{width:100%;border-collapse:collapse;font-size:0.68rem}
+.it th{text-align:left;padding:0.35rem 0.4rem;color:var(--muted);font-size:0.62rem;text-transform:uppercase;border-bottom:1px solid var(--border)}
+.it td{padding:0.25rem 0.4rem;border-bottom:1px solid var(--border);font-family:"SF Mono",monospace;font-size:0.62rem}
+.it tr.error .is2{color:var(--fail)}
+.it tr.warning .is2{color:var(--warn)}
+.is2{font-weight:800;width:1rem}
+.ic2{color:var(--muted);width:70px}
+.il2{color:var(--muted)}
+.iru2{color:#555;font-size:0.58rem}
+
+/* File health (merged file map + heatmap) */
+.fr{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.3rem;font-size:0.7rem}
+.ff{width:200px;font-family:"SF Mono",monospace;font-size:0.65rem;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.fb{flex:1;height:12px;background:var(--card);border-radius:3px;overflow:hidden;border:1px solid var(--border)}
+.fbf{height:100%;border-radius:2px}
+.fv{width:50px;font-size:0.65rem;color:var(--muted);flex-shrink:0}
+.fcs{font-size:0.6rem;color:#555}
+.hm-row{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.2rem;font-size:0.7rem}
+.hm-name{width:200px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:"SF Mono",monospace;font-size:0.65rem}
+.hm-bar{height:14px;border-radius:3px;min-width:4px}
+.hm-count{color:var(--muted);font-size:0.65rem;flex-shrink:0;min-width:50px}
+.hm-checks{font-size:0.58rem;color:#555;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+
+.footer{text-align:center;color:var(--muted);font-size:0.58rem;margin-top:2rem;padding:0.8rem 0;border-top:1px solid var(--border)}
+.footer a{color:var(--muted)}
+.flink{color:var(--accent);text-decoration:none;font-family:"SF Mono",monospace}.flink:hover{text-decoration:underline}
+.arch-svg{margin:1rem 0;overflow-x:auto}
+.arch-svg svg{border-radius:8px}
+.cp-btn{background:none;border:none;cursor:pointer;font-size:0.6rem;opacity:0.3;padding:0 0.2rem;flex-shrink:0}.cp-btn:hover{opacity:1}
+.ir:hover .cp-btn{opacity:0.6}
+@media(max-width:768px){.side{display:none}.content{margin-left:0;padding:1rem}.cats{grid-template-columns:1fr 1fr}.dash{flex-direction:column}.nav-views{display:none}}
+`;

package/dist/report/svg.d.ts

@@ -1,9 +1,29 @@
-/** SVG sparkline builder — simple polyline with dots. */
-export interface SparklineOptions {
+/** SVG builders for the HTML report (score ring, radar chart). */
+export declare function buildRing(score: number, color: string): string;
+export declare function buildRadar(items: {
+    label: string;
+    score: number;
+}[]): string;
+/** Score timeline — larger chart showing score history over last N runs. */
+export declare function buildTimeline(entries: {
+    score: number;
+    timestamp: string;
+}[], opts?: {
+    width?: number;
+    height?: number;
+}): string;
+/** Testing pyramid — proportional triangle showing test layer distribution. */
+export declare function buildPyramid(layers: {
+    unit: number;
+    integration: number;
+    component: number;
+    e2e: number;
+}): string;
+/** Badge SVG — shields.io-style badge for README embedding. */
+export declare function buildBadge(score: number, grade: string): string;
+/** Sparkline — mini line chart for trend display. */
+export declare function buildSparkline(values: number[], opts?: {
     width?: number;
     height?: number;
     color?: string;
-    dotRadius?: number;
-}
-/** Build an inline SVG sparkline from an array of values (0-100). */
-export declare function buildSparkline(values: number[], opts?: SparklineOptions): string;
+}): string;

package/dist/report/svg.js

@@ -1,23 +1,166 @@
-/** SVG sparkline builder — simple polyline with dots. */
-/** Build an inline SVG sparkline from an array of values (0-100). */
-export function buildSparkline(values, opts = {}) {
+/** SVG builders for the HTML report (score ring, radar chart). */
+export function buildRing(score, color) {
+    const r = 42;
+    const c = 2 * Math.PI * r;
+    const off = c - (score / 100) * c;
+    return `<svg viewBox="0 0 100 100" style="width:100px;height:100px"><circle cx="50" cy="50" r="${r}" fill="none" stroke="#1e1e24" stroke-width="7"/><circle cx="50" cy="50" r="${r}" fill="none" stroke="${color}" stroke-width="7" stroke-dasharray="${c}" stroke-dashoffset="${off}" stroke-linecap="round" transform="rotate(-90 50 50)"/></svg>`;
+}
+export function buildRadar(items) {
+    const n = items.length;
+    if (n < 3)
+        return "";
+    const cx = 120, cy = 120, r = 90;
+    const step = (2 * Math.PI) / n;
+    let grid = "";
+    for (const pct of [25, 50, 75, 100]) {
+        const rr = (pct / 100) * r;
+        const pts = items
+            .map((_, i) => `${cx + rr * Math.cos(i * step - Math.PI / 2)},${cy + rr * Math.sin(i * step - Math.PI / 2)}`)
+            .join(" ");
+        grid += `<polygon points="${pts}" fill="none" stroke="#1e1e24" stroke-width="0.7"/>`;
+    }
+    let axes = "";
+    for (let i = 0; i < n; i++) {
+        const a = i * step - Math.PI / 2;
+        axes += `<line x1="${cx}" y1="${cy}" x2="${cx + r * Math.cos(a)}" y2="${cy + r * Math.sin(a)}" stroke="#1e1e24" stroke-width="0.7"/>`;
+        const lx = cx + (r + 16) * Math.cos(a);
+        const ly = cy + (r + 16) * Math.sin(a);
+        axes += `<text x="${lx}" y="${ly}" text-anchor="middle" dominant-baseline="middle" fill="#6b7280" font-size="9" font-weight="600">${items[i].label}</text>`;
+    }
+    const dataPts = items
+        .map((c, i) => {
+        const a = i * step - Math.PI / 2;
+        const rr = (c.score / 100) * r;
+        return `${cx + rr * Math.cos(a)},${cy + rr * Math.sin(a)}`;
+    })
+        .join(" ");
+    let dots = "";
+    for (let i = 0; i < n; i++) {
+        const a = i * step - Math.PI / 2;
+        const rr = (items[i].score / 100) * r;
+        dots += `<circle cx="${cx + rr * Math.cos(a)}" cy="${cy + rr * Math.sin(a)}" r="3.5" fill="#818cf8"/>`;
+    }
+    return `<svg viewBox="0 0 240 240">${grid}${axes}<polygon points="${dataPts}" fill="#818cf825" stroke="#818cf8" stroke-width="1.5"/>${dots}</svg>`;
+}
+/** Score timeline — larger chart showing score history over last N runs. */
+export function buildTimeline(entries, opts) {
+    const width = opts?.width ?? 600;
+    const height = opts?.height ?? 120;
+    const pad = { top: 20, right: 20, bottom: 25, left: 35 };
+    const w = width - pad.left - pad.right;
+    const h = height - pad.top - pad.bottom;
+    if (entries.length === 0)
+        return "";
+    // Y axis: 0-100 always
+    const yScale = (v) => pad.top + h - (v / 100) * h;
+    const xScale = (i) => pad.left + (entries.length === 1 ? w / 2 : (i / (entries.length - 1)) * w);
+    // Grid lines at 25, 50, 75
+    let grid = "";
+    for (const v of [25, 50, 75]) {
+        const y = yScale(v).toFixed(1);
+        grid += `<line x1="${pad.left}" y1="${y}" x2="${pad.left + w}" y2="${y}" stroke="#1e1e24" stroke-width="0.7"/>`;
+        grid += `<text x="${pad.left - 6}" y="${y}" text-anchor="end" dominant-baseline="middle" fill="#555" font-size="8">${v}</text>`;
+    }
+    // Score line + dots
+    const points = entries.map((e, i) => `${xScale(i).toFixed(1)},${yScale(e.score).toFixed(1)}`).join(" ");
+    // Grade colors per dot
+    const dots = entries
+        .map((e, i) => {
+        const color = e.score >= 90 ? "#22c55e" : e.score >= 75 ? "#84cc16" : e.score >= 60 ? "#eab308" : e.score >= 40 ? "#f97316" : "#ef4444";
+        return `<circle cx="${xScale(i).toFixed(1)}" cy="${yScale(e.score).toFixed(1)}" r="3" fill="${color}"><title>${e.timestamp.split("T")[0]} — ${e.score}</title></circle>`;
+    })
+        .join("");
+    // X-axis labels (first, middle, last)
+    let xLabels = "";
+    const labelIndices = entries.length <= 3 ? entries.map((_, i) => i) : [0, Math.floor(entries.length / 2), entries.length - 1];
+    for (const i of labelIndices) {
+        const label = entries[i].timestamp.split("T")[0].slice(5); // MM-DD
+        xLabels += `<text x="${xScale(i).toFixed(1)}" y="${height - 4}" text-anchor="middle" fill="#555" font-size="7">${label}</text>`;
+    }
+    // Gradient fill under the line
+    const areaPoints = `${xScale(0).toFixed(1)},${yScale(0).toFixed(1)} ${points} ${xScale(entries.length - 1).toFixed(1)},${yScale(0).toFixed(1)}`;
+    return `<svg viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
+<defs><linearGradient id="tlg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#818cf8" stop-opacity="0.3"/><stop offset="100%" stop-color="#818cf8" stop-opacity="0.02"/></linearGradient></defs>
+${grid}
+<polygon points="${areaPoints}" fill="url(#tlg)"/>
+<polyline points="${points}" fill="none" stroke="#818cf8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+${dots}${xLabels}
+</svg>`;
+}
+/** Testing pyramid — proportional triangle showing test layer distribution. */
+export function buildPyramid(layers) {
+    const total = layers.unit + layers.integration + layers.component + layers.e2e;
+    if (total === 0)
+        return "";
+    const w = 200, h = 160;
+    const cx = w / 2;
+    // Pyramid: e2e at top (smallest), unit at bottom (largest)
+    // Each layer gets proportional height
+    const items = [
+        { label: "E2E", count: layers.e2e, color: "#ef4444" },
+        { label: "Component", count: layers.component, color: "#f97316" },
+        { label: "Integration", count: layers.integration, color: "#eab308" },
+        { label: "Unit", count: layers.unit, color: "#22c55e" },
+    ];
+    const layerH = (h - 20) / 4;
+    let svg = "";
+    for (let i = 0; i < 4; i++) {
+        const item = items[i];
+        const y = 10 + i * layerH;
+        // Trapezoid: wider at bottom
+        const topW = ((i + 0.5) / 4) * (w - 40);
+        const botW = ((i + 1.5) / 4) * (w - 40);
+        const opacity = item.count > 0 ? 1 : 0.2;
+        const x1t = cx - topW / 2, x2t = cx + topW / 2;
+        const x1b = cx - botW / 2, x2b = cx + botW / 2;
+        svg += `<polygon points="${x1t},${y} ${x2t},${y} ${x2b},${y + layerH} ${x1b},${y + layerH}" fill="${item.color}" opacity="${opacity * 0.25}" stroke="${item.color}" stroke-opacity="${opacity * 0.6}" stroke-width="1"/>`;
+        svg += `<text x="${cx}" y="${y + layerH / 2 + 3}" text-anchor="middle" fill="${item.count > 0 ? "#e5e5e5" : "#555"}" font-size="9" font-weight="600">${item.label} (${item.count})</text>`;
+    }
+    return `<svg viewBox="0 0 ${w} ${h}" width="${w}" height="${h}">${svg}</svg>`;
+}
+/** Badge SVG — shields.io-style badge for README embedding. */
+export function buildBadge(score, grade) {
+    const color = score >= 90 ? "#22c55e" : score >= 75 ? "#84cc16" : score >= 60 ? "#eab308" : score >= 40 ? "#f97316" : "#ef4444";
+    const label = "vcqa";
+    const value = `${grade} ${score}`;
+    const labelW = 36, valueW = 44, totalW = labelW + valueW;
+    const h = 20, r = 3;
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${totalW}" height="${h}">
+<linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient>
+<clipPath id="r"><rect width="${totalW}" height="${h}" rx="${r}" fill="#fff"/></clipPath>
+<g clip-path="url(#r)">
+<rect width="${labelW}" height="${h}" fill="#555"/>
+<rect x="${labelW}" width="${valueW}" height="${h}" fill="${color}"/>
+<rect width="${totalW}" height="${h}" fill="url(#s)"/>
+</g>
+<g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" font-size="11">
+<text x="${labelW / 2}" y="14" fill="#010101" fill-opacity=".3">${label}</text>
+<text x="${labelW / 2}" y="13">${label}</text>
+<text x="${labelW + valueW / 2}" y="14" fill="#010101" fill-opacity=".3">${value}</text>
+<text x="${labelW + valueW / 2}" y="13">${value}</text>
+</g>
+</svg>`;
+}
+/** Sparkline — mini line chart for trend display. */
+export function buildSparkline(values, opts) {
+    const width = opts?.width ?? 120;
+    const height = opts?.height ?? 30;
+    const color = opts?.color ?? "#818cf8";
     if (values.length === 0)
         return "";
-    const w = opts.width ?? 120;
-    const h = opts.height ?? 30;
-    const color = opts.color ?? "#818cf8";
-    const dotR = opts.dotRadius ?? 2;
-    const padX = dotR + 1;
-    const padY = dotR + 1;
-    const plotW = w - padX * 2;
-    const plotH = h - padY * 2;
-    // Map values to SVG coordinates
-    const points = values.map((v, i) => {
-        const x = values.length === 1 ? w / 2 : padX + (i / (values.length - 1)) * plotW;
-        const y = padY + plotH - (Math.min(100, Math.max(0, v)) / 100) * plotH;
-        return { x: Math.round(x * 10) / 10, y: Math.round(y * 10) / 10 };
-    });
-    const polyline = points.map((p) => `${p.x},${p.y}`).join(" ");
-    const dots = points.map((p) => `<circle cx="${p.x}" cy="${p.y}" r="${dotR}" fill="${color}"/>`).join("");
-    return `<svg viewBox="0 0 ${w} ${h}" width="${w}" height="${h}" style="display:block"><polyline points="${polyline}" fill="none" stroke="${color}" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>${dots}</svg>`;
+    if (values.length === 1) {
+        const y = (height / 2).toFixed(1);
+        return `<svg viewBox="0 0 ${width} ${height}" width="${width}" height="${height}"><polyline points="${(width / 2).toFixed(1)},${y}" fill="none" stroke="${color}" stroke-width="1.5"/><circle cx="${(width / 2).toFixed(1)}" cy="${y}" r="1.5" fill="${color}"/></svg>`;
+    }
+    const max = Math.max(...values, 1);
+    const min = Math.min(...values, 0);
+    const range = max - min || 1;
+    const step = width / (values.length - 1);
+    const points = values.map((v, i) => `${(i * step).toFixed(1)},${(height - ((v - min) / range) * (height - 4) - 2).toFixed(1)}`).join(" ");
+    const dots = values.map((v, i) => {
+        const x = (i * step).toFixed(1);
+        const y = (height - ((v - min) / range) * (height - 4) - 2).toFixed(1);
+        return `<circle cx="${x}" cy="${y}" r="1.5" fill="${color}"/>`;
+    }).join("");
+    return `<svg viewBox="0 0 ${width} ${height}" width="${width}" height="${height}"><polyline points="${points}" fill="none" stroke="${color}" stroke-width="1.5" stroke-linecap="round"/>${dots}</svg>`;
 }

package/dist/runners/accessibility.d.ts

@@ -0,0 +1,3 @@
+/** Accessibility check — detects common a11y violations in JSX/TSX code. */
+import type { CheckResult } from "../types.js";
+export declare function runAccessibility(cwd: string): CheckResult;