@mifort-solutions/qmetrix 1.0.0

package/src/dashboard/render/styles.mjs

@@ -0,0 +1,217 @@
+/** Dashboard CSS — the full <style> body, kept apart from the markup builders. */
+
+/** Primary brand colour, used as the CSS accent variable. */
+export const BRAND = '#1377FE';
+
+export const STYLES = `
+  :root{--brand:${BRAND};--bg:#0b1120;--panel:#111a2e;--panel2:#0e1626;--line:#1e2a44;--ink:#e6edf7;--muted:#8aa0c2;--ok:#16a34a;--warn:#d97706;--bad:#dc2626}
+  *{box-sizing:border-box}
+  body{margin:0;font:14px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:var(--bg);color:var(--ink)}
+  a{color:#5ea2ff;text-decoration:none}a:hover{text-decoration:underline}
+  code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:#bcd2f5;background:#0c1424;padding:1px 5px;border-radius:5px}
+  pre{background:#0c1424;border:1px solid var(--line);border-radius:8px;padding:10px;overflow:auto;font-size:12px;color:#cdd9ee}
+  header{padding:28px 32px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0e1730,#0b1120)}
+  header h1{margin:0 0 4px;font-size:22px}
+  header .sub{color:var(--muted);font-size:13px}
+  .wrap{max-width:1180px;margin:0 auto;padding:24px 32px 60px}
+  .chips{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 6px}
+  .chip{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px;min-width:120px}
+  .chip span{display:block;font-size:24px;font-weight:700;line-height:1.1}
+  .chip label{display:block;color:var(--muted);font-size:12px;margin-top:2px}
+  .chip.good span{color:#4ade80}.chip.bad span{color:#f87171}.chip.warn span{color:#fbbf24}
+  h2{font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:34px 0 12px;border-bottom:1px solid var(--line);padding-bottom:8px}
+  .grid{display:grid;gap:16px}
+  .grid.two{grid-template-columns:1fr 1fr}
+  .grid.three{grid-template-columns:1fr 1fr 1fr}
+  .grid.scanners{grid-template-columns:1fr 1fr 1fr}
+  @media(max-width:980px){.grid.three{grid-template-columns:1fr}}
+  @media(max-width:820px){.grid.two,.grid.scanners{grid-template-columns:1fr}}
+  .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
+  .card-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
+  .card h3{margin:0;font-size:15px}
+  .tool{color:var(--muted);font-size:12px;margin:2px 0 12px}
+  table.mini{width:100%;border-collapse:collapse;margin-top:8px;font-size:12.5px}
+  table.mini th{ text-align:left;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);padding:6px 8px}
+  table.mini td{padding:5px 8px;border-bottom:1px solid #16203a}
+  table.mini td.r,table.mini th.r{text-align:right}
+  .muted{color:var(--muted)}
+  .ok-msg{color:#4ade80;font-weight:600}.bad-msg{color:#f87171;font-weight:600}
+  .sevrow{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
+  .sev{background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600}
+  .badge{font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
+  .badge.ok{background:rgba(22,163,74,.18);color:#4ade80;border:1px solid rgba(22,163,74,.4)}
+  .badge.warn{background:rgba(217,119,6,.16);color:#fbbf24;border:1px solid rgba(217,119,6,.4)}
+  /* security scanner — per-finding "why it's flagged" list */
+  .sec-findings{margin-top:10px}
+  .sec-findings>summary{color:var(--muted)}
+  ul.findings{list-style:none;margin:8px 0 0;padding:0;font-size:12.5px}
+  ul.findings li{padding:6px 0;border-top:1px solid #16203a;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
+  ul.findings li:first-child{border-top:0}
+  ul.findings .fr{color:#dbe6f8}
+  ul.findings .fd{flex-basis:100%;font-size:11.5px;margin-top:1px}
+  .gauge{margin:10px 0}
+  .gauge-h{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:4px}
+  .track{height:9px;background:#0c1424;border-radius:999px;overflow:hidden}
+  .fill{height:100%;border-radius:999px;transition:width .6s}
+  details{margin-top:10px}summary{cursor:pointer;color:var(--muted);font-size:12.5px}
+  .links{margin-top:12px;font-size:12.5px;color:var(--muted)}
+  /* coverage section — compact, ~1/3 width */
+  .cov-card{max-width:380px}
+  /* eslint problem detail */
+  .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
+  .dot.e{background:var(--bad)}.dot.w{background:var(--warn)}
+  table.problems td.msg{color:#cdd9ee;white-space:normal}
+  table.problems td:first-child{white-space:nowrap}
+  /* dependency table + filters */
+  .filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:12px;font-size:12.5px}
+  .filters .seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
+  .filters .seg button{background:transparent;color:var(--ink);border:0;border-right:1px solid var(--line);padding:5px 12px;cursor:pointer;font:inherit}
+  .filters .seg button:last-child{border-right:0}
+  .filters .seg button.on{background:var(--brand);color:#fff}
+  .filters label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
+  .filters input[type=search]{background:#0c1424;border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:5px 10px;font:inherit;min-width:160px}
+  #dep-count{margin-left:auto}
+  .tablewrap{overflow-x:auto}
+  table.deps td{vertical-align:top}
+  table.deps td.desc{color:var(--muted);max-width:300px;white-space:normal}
+  table.deps td.why{max-width:280px;white-space:normal}
+  table.deps td.when,table.deps td.ver{white-space:nowrap}
+  .tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border-radius:5px;padding:1px 6px;vertical-align:middle}
+  .tag.prod{background:rgba(19,119,254,.16);color:#7db4ff;border:1px solid rgba(19,119,254,.4)}
+  .tag.dev{background:rgba(168,85,247,.16);color:#c89bf5;border:1px solid rgba(168,85,247,.4)}
+  .tag.task{background:rgba(100,116,139,.18);color:#a7b6cf;border:1px solid rgba(100,116,139,.4);text-transform:none;font-weight:600}
+  .imp{font-size:10px;color:#4ade80;border:1px solid rgba(22,163,74,.4);border-radius:5px;padding:1px 5px}
+  .upd{color:#fbbf24;font-weight:600}
+  .ok-dot{color:#4ade80}
+  #graph{width:100%;height:460px;background:var(--panel2);border:1px solid var(--line);border-radius:14px;display:block;cursor:grab}
+  .legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;font-size:12px;color:var(--muted)}
+  .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle;background:var(--c)}
+  /* expandable trees: file graph, routing, composition */
+  .tree{font-size:12.5px;margin-top:6px}
+  .tree details,.tree-dir,.rt-dir,.tree-file.det{margin-top:0}
+  .tree-dir>summary,.rt-dir>summary,.tree-file.det>summary{list-style:none;cursor:pointer;color:var(--ink);font-size:12.5px;padding:3px 6px;border-radius:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
+  .tree-dir>summary::-webkit-details-marker,.rt-dir>summary::-webkit-details-marker,.tree-file.det>summary::-webkit-details-marker{display:none}
+  .tree-dir>summary:hover,.rt-dir>summary:hover,.tree-file.det>summary:hover{background:#0e1830}
+  .tree-dir>summary::before,.rt-dir>summary::before,.tree-file.det>summary::before{content:'▸';color:var(--muted);font-size:10px;display:inline-block;width:9px;transition:transform .15s}
+  .tree-dir[open]>summary::before,.rt-dir[open]>summary::before,.tree-file.det[open]>summary::before{transform:rotate(90deg)}
+  .tree-body{margin-left:15px;border-left:1px solid var(--line);padding-left:10px}
+  .tree-file{padding:3px 6px 3px 21px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
+  .ico{font-size:12px;filter:grayscale(.2)}
+  .fan{font-size:10px;border-radius:5px;padding:0 5px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
+  .fan.in{color:#7db4ff}.fan.out{color:#4ade80}
+  .rel{font-size:12px;margin:3px 0;line-height:1.8}
+  .rel code{margin:1px 2px}
+  /* routing badges */
+  .rt{font-size:10px;font-weight:700;text-transform:uppercase;border-radius:5px;padding:1px 6px;color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);border:1px solid color-mix(in srgb,var(--c) 40%,transparent)}
+  .seg{font-weight:600}
+  .seg.dyn{color:#fbbf24}.seg.group{color:#c89bf5}
+  .url{background:#0c1424;color:#9fb8e6}
+  .rt-leaf{padding:3px 6px 3px 21px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
+  /* ER / data-model diagram */
+  .er-canvas{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;margin-top:6px}
+  .er-table{background:var(--panel2);border:1px solid var(--line);border-radius:10px;min-width:240px;overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.2)}
+  .er-h{background:linear-gradient(180deg,#16223e,#101a30);padding:8px 12px;font-weight:700;border-bottom:2px solid var(--brand);display:flex;align-items:center;gap:8px}
+  .er-cols{width:100%;border-collapse:collapse;font-size:12.5px}
+  .er-cols td{padding:4px 10px;border-bottom:1px solid #16203a;vertical-align:top}
+  .er-cols tr:last-child td{border-bottom:0}
+  .er-k{width:30px}
+  .er-c{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#cfe0fb}
+  .er-t{color:var(--muted);text-align:right;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;white-space:nowrap}
+  .req{color:#f87171;margin-left:2px}
+  .kb{font-size:9px;font-weight:800;border-radius:4px;padding:1px 4px}
+  .kb.pk{background:rgba(234,179,8,.18);color:#facc15;border:1px solid rgba(234,179,8,.5)}
+  .kb.fk{background:rgba(168,85,247,.18);color:#c89bf5;border:1px solid rgba(168,85,247,.5)}
+  .er-rls{font-size:9px;font-weight:700;border-radius:5px;padding:1px 6px;background:rgba(22,163,74,.18);color:#4ade80;border:1px solid rgba(22,163,74,.4);margin-left:auto}
+  .er-rls.pub{background:rgba(217,119,6,.16);color:#fbbf24;border-color:rgba(217,119,6,.4)}
+  .er-idx{padding:6px 10px;font-size:11px;color:var(--muted);border-top:1px solid #16203a;display:flex;flex-wrap:wrap;gap:8px}
+  .er-bk{padding:8px 12px;font-size:12px;color:var(--muted)}
+  .er-rels{margin-top:14px;font-size:12.5px}
+  .er-table.bucket{min-width:200px}
+  /* ── component composition (browser windows + physical nesting) ── */
+  .comp-subh{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:18px 0 9px}
+  .comp-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:10px 0 8px;font-size:12px;color:var(--muted)}
+  .comp-legend .sw{display:inline-flex;align-items:center;gap:6px}
+  .comp-legend i{width:12px;height:12px;border-radius:4px;display:inline-block;border:1px solid rgba(255,255,255,.14)}
+  .comp-legend i.role-page{background:#86efac}
+  .comp-legend i.role-layout{background:#7dd3fc}
+  .comp-legend i.role-app{background:#a5b4fc}
+  .comp-legend i.role-public{background:#22c55e}
+  .comp-legend i.role-internal{background:#2b3a57}
+  .comp-leg-arrow{color:#5e9bff;font-weight:800;font-size:14px;line-height:1}
+  .comp-controls{display:flex;gap:8px;margin:0 0 10px}
+  .comp-controls button{font:inherit;font-size:12px;cursor:pointer;color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:4px 11px}
+  .comp-controls button:hover{color:#e6edf7;border-color:#3a4a66}
+  /* page-flow graph */
+  .cflow-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel2);padding:16px 14px;margin:0 0 6px}
+  .cflow{position:relative;min-width:max-content;margin:0 auto}
+  .cflow-svg{position:absolute;top:0;left:0;overflow:visible;pointer-events:none;z-index:0}
+  .cflow-edge{fill:none;stroke:#3f6fb0;stroke-width:1.6;opacity:.8}
+  .cflow-layers{position:relative;z-index:1;display:flex;flex-direction:column;gap:40px}
+  .cflow-row{display:flex;justify-content:center;flex-wrap:wrap;gap:26px}
+  .cflow-node{background:#0b1322;border:1px solid #2b3b5b;border-radius:9px;min-width:158px;box-shadow:0 3px 12px rgba(0,0,0,.32)}
+  .cflow-chrome{display:flex;align-items:center;gap:7px;padding:5px 9px;background:linear-gradient(180deg,#1b2540,#131c30);border-bottom:1px solid #243150;border-radius:9px 9px 0 0}
+  .cflow-dots{display:inline-flex;gap:4px;flex:0 0 auto}
+  .cflow-dots i{width:8px;height:8px;border-radius:50%;display:inline-block}
+  .cflow-dots i:nth-child(1){background:#ff5f57}.cflow-dots i:nth-child(2){background:#febc2e}.cflow-dots i:nth-child(3){background:#28c840}
+  .cflow-url{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:#9fb8e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .cflow-meta{padding:6px 10px;display:flex;flex-direction:column;gap:2px}
+  .cflow-comp{font-size:11.5px;color:#dbe6f8;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+  .cflow-deg{font-size:10px;color:var(--muted)}
+  .cflow-orphans{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 6px;font-size:11.5px}
+  .cflow-orphan{color:#8aa0c2;background:#0c1424;border:1px solid var(--line);border-radius:6px;padding:1px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px}
+  /* nested-rectangle tree */
+  .comp-scroll{overflow:auto;max-height:900px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);padding:12px}
+  .comp-tree>.comp-box:first-child{margin-top:0}
+  .comp-box{margin:7px 0;border:1px solid var(--line);border-left-width:3px;border-radius:9px;background:#0e1830}
+  .comp-nest{padding:2px 9px 8px}
+  .comp-card{background:transparent;border:0}
+  .comp-card>summary{list-style:none;cursor:pointer;padding:8px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:5px 9px}
+  .comp-card>summary::-webkit-details-marker{display:none}
+  .comp-card>summary::before{content:'▸';color:var(--muted);font-size:11px;line-height:1;transition:transform .12s}
+  .comp-card[open]>summary::before{transform:rotate(90deg)}
+  .comp-name{font-weight:700;font-size:13.5px;color:#e6edf7;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+  .comp-loc{font-size:11px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+  .comp-tag{font-size:11.5px;color:var(--muted);font-style:italic}
+  .comp-desc{flex-basis:100%;margin:1px 0 0;font-size:12.5px;color:#9fb2d4;line-height:1.45}
+  .comp-links{flex-basis:100%;display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
+  .comp-link{font-size:10.5px;color:#7db4ff;background:#0c1a30;border:1px solid #1e3a5f;border-radius:999px;padding:1px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+  .comp-link::before{content:'→ ';opacity:.65}
+  .comp-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:1px 7px;border-radius:999px}
+  .comp-badge.role-page{background:#86efac;color:#052e16}
+  .comp-badge.role-layout{background:#7dd3fc;color:#062436}
+  .comp-badge.role-app{background:#a5b4fc;color:#1e1b4b}
+  .comp-badge.role-public{background:#15803d;color:#dcfce7}
+  .comp-badge.role-internal{background:#243049;color:#c7d4ea}
+  .comp-box.role-page{border-left-color:#86efac}
+  .comp-box.role-layout{border-left-color:#7dd3fc}
+  .comp-box.role-app{border-left-color:#a5b4fc}
+  .comp-box.role-public{border-left-color:#22c55e}
+  .comp-box.role-internal{border-left-color:#33425f}
+  .comp-meta{padding:8px 12px 11px;display:grid;gap:5px;border-top:1px solid var(--line)}
+  .comp-mrow{display:flex;gap:10px;font-size:12px;line-height:1.5}
+  .comp-mk{flex:0 0 78px;color:var(--muted);font-weight:600}
+  .comp-mv{flex:1;min-width:0;color:#c7d4ea}
+  .comp-mv code{background:#1a2742;border-radius:4px;padding:0 5px;font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+  .comp-ty{color:#7d8cad}
+  .comp-sep{color:#54618a}
+  .comp-hk{color:#6f7fa3;font-size:10.5px;margin-left:3px}
+  .comp-ev{background:#23314e;border-radius:4px;padding:0 6px;font-size:11px;color:#a9c2ef}
+  /* page = browser window */
+  .comp-win{border-left-width:1px;border-color:#2b3b5b;background:#0b1322;box-shadow:0 8px 26px rgba(0,0,0,.42);overflow:hidden}
+  .comp-winbar{display:flex;align-items:center;gap:10px;padding:7px 11px;background:linear-gradient(180deg,#1b2540,#131c30);border-bottom:1px solid #243150}
+  .comp-dots{display:inline-flex;gap:6px;flex:0 0 auto}
+  .comp-dots i{width:11px;height:11px;border-radius:50%;display:inline-block;background:#3a4a66}
+  .comp-dots i:nth-child(1){background:#ff5f57}.comp-dots i:nth-child(2){background:#febc2e}.comp-dots i:nth-child(3){background:#28c840}
+  .comp-addr{flex:1;min-width:0;display:flex;align-items:center;gap:7px;background:#0b1322;border:1px solid #243150;border-radius:7px;padding:4px 11px;color:#9fb8e6;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
+  .comp-addr-url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .comp-lock{width:11px;height:11px;flex:0 0 auto;opacity:.55}
+  .comp-winbody{padding:10px 11px 12px}
+  .comp-winbody>.comp-nest{padding:6px 0 0}
+  .comp-cyc{padding:8px 12px;display:flex;align-items:center;gap:9px}
+  .comp-box.is-cycle{opacity:.6;border-style:dashed}
+  .comp-unattached{margin-top:14px}
+  .comp-unattached>summary{cursor:pointer;color:var(--muted);font-size:12.5px;margin-bottom:8px}
+  /* storybook card */
+  .sb-link{font-size:13px;margin:6px 0}
+  footer{color:var(--muted);font-size:12px;text-align:center;padding:24px}
+`;

package/src/dashboard/render/template.mjs

@@ -0,0 +1,283 @@
+/** Assembles the final self-contained HTML page from the collected data. */
+import { bytes, esc, num, pct } from '../utils/format.mjs';
+import {
+  COMPOSITION_FLOW_SCRIPT,
+  COMPOSITION_SCRIPT,
+  DEP_FILTER_SCRIPT,
+  GRAPH_SCRIPT,
+} from './client.mjs';
+import { compositionGraphHtml } from './composition.mjs';
+import {
+  bar,
+  entitiesHtml,
+  fileTreeHtml,
+  routingHtml,
+  scannerCard,
+  sevBadges,
+} from './components.mjs';
+import { STYLES } from './styles.mjs';
+
+export function render(d) {
+  const { meta, code, coverage, lint, deps, graph, security, routing, composition, entities } = d;
+  const bundle = d.bundle || { available: false, note: 'Codebase bundle not generated.' };
+  const storybook = d.storybook || { available: false, storyCount: 0, built: false };
+
+  const chip = (label, value, tone = '') =>
+    `<div class="chip ${tone}"><span>${value}</span><label>${label}</label></div>`;
+
+  const lintTone =
+    lint.eslint?.available && lint.eslint.errors === 0 && lint.tsc?.ok
+      ? 'good'
+      : lint.eslint?.errors
+        ? 'bad'
+        : 'warn';
+  const auditTone = !deps.audit.available
+    ? ''
+    : deps.audit.high + deps.audit.critical > 0
+      ? 'bad'
+      : deps.audit.total > 0
+        ? 'warn'
+        : 'good';
+
+  // Per-suite breakdown: unit / e2e / storybook / global side by side. Suites that
+  // haven't been run yet show em-dashes rather than a misleading 0%.
+  const suiteRows = (coverage.suites || [])
+    .map((s) => {
+      const cell = (v) => (s.available ? `<td class="r">${pct(v)}</td>` : `<td class="r">—</td>`);
+      const files = s.available ? num(s.fileCount) : '—';
+      const report = s.reportHref
+        ? `<a href="${esc(s.reportHref)}" target="_blank" rel="noopener">open ↗</a>`
+        : '<span class="muted">—</span>';
+      return `<tr><td>${esc(s.label)}</td>${cell(s.lines)}${cell(s.statements)}${cell(s.branches)}${cell(s.functions)}<td class="r">${files}</td><td class="r">${report}</td></tr>`;
+    })
+    .join('');
+  const suiteTable = `<table class="mini"><thead><tr><th>Suite</th><th class="r">Lines</th><th class="r">Stmts</th><th class="r">Branch</th><th class="r">Funcs</th><th class="r">Files</th><th class="r">Report</th></tr></thead><tbody>${suiteRows}</tbody></table>`;
+
+  const covReportLink = coverage.reportHref
+    ? `<p class="muted">📂 <a href="${esc(coverage.reportHref)}" target="_blank" rel="noopener">Open the full ${esc(coverage.headLabel || '')} coverage report ↗</a> — drill down file-by-file / folder-by-folder.</p>`
+    : '';
+  const covBody = coverage.available
+    ? `${suiteTable}
+       <p class="muted">Gauges + per-file below reflect <strong>${esc(coverage.headLabel || 'Unit')}</strong> (the widest available suite).</p>
+       ${covReportLink}
+       ${bar('Statements', coverage.statements)}${bar('Branches', coverage.branches)}${bar('Functions', coverage.functions)}${bar('Lines', coverage.lines)}
+       <details><summary>Per-file (lowest first, ${coverage.files.length})</summary>
+       <table class="mini"><thead><tr><th>File</th><th class="r">Lines %</th></tr></thead><tbody>
+       ${coverage.files.map((f) => `<tr><td><code>${esc(f.file)}</code></td><td class="r">${pct(f.lines)}</td></tr>`).join('')}
+       </tbody></table></details>`
+    : `<p class="muted">${esc(coverage.note || 'Coverage not available.')}</p>`;
+
+  let lintBody;
+  if (lint.eslint?.available) {
+    const clean = lint.eslint.errors === 0 && lint.eslint.warnings === 0;
+    if (clean) {
+      lintBody = `<p class="ok-msg">✓ No ESLint problems — the codebase is clean.</p>`;
+    } else {
+      const problems = lint.eslint.problems || [];
+      const shown = problems.slice(0, lint.eslint.problemsShown || problems.length);
+      const sevDot = (s) => `<span class="dot ${s === 'error' ? 'e' : 'w'}" title="${s}"></span>`;
+      // Compact: filename (basename) instead of relative path; the rule id moves
+      // to the row title so the dedicated Rule column can be dropped.
+      const problemRows = shown
+        .map((p) => {
+          const fname = p.file.split('/').pop();
+          return `<tr title="${esc(p.file)} · ${esc(p.rule)}"><td>${sevDot(p.severity)}<code>${esc(fname)}</code><span class="muted">:${p.line}:${p.column}</span></td><td class="msg">${esc(p.message)}</td></tr>`;
+        })
+        .join('');
+      const moreNote =
+        problems.length > shown.length
+          ? `<p class="muted">… and ${problems.length - shown.length} more (showing first ${shown.length}).</p>`
+          : '';
+      lintBody = `<div class="sevrow">
+           <span class="sev" style="--c:#dc2626">${lint.eslint.errors} errors</span>
+           <span class="sev" style="--c:#d97706">${lint.eslint.warnings} warnings</span>
+         </div>
+         <table class="mini problems"><thead><tr><th>File:line:col</th><th>What</th></tr></thead><tbody>
+         ${problemRows}
+         </tbody></table>
+         ${moreNote}`;
+    }
+  } else {
+    lintBody = `<p class="muted">${esc(lint.eslint?.note || 'ESLint not run.')}</p>`;
+  }
+  const tscBody = lint.tsc?.available
+    ? lint.tsc.ok
+      ? `<p class="ok-msg">✓ tsc --noEmit passed — 0 type errors.</p>`
+      : `<p class="bad-msg">✗ ${lint.tsc.errors} type error(s).</p><pre>${esc(lint.tsc.sample.join('\n'))}</pre>`
+    : `<p class="muted">${esc(lint.tsc?.note || '')}</p>`;
+
+  const auditBody = deps.audit.available
+    ? `<div class="sevrow">${sevBadges({ critical: deps.audit.critical, high: deps.audit.high, medium: deps.audit.moderate, low: deps.audit.low, note: deps.audit.info })}</div>
+       <p class="muted">${num(deps.audit.deps)} resolved dependencies · ${deps.audit.total} known advisories (npm audit baseline; Snyk adds licence + reachability).</p>`
+    : `<p class="muted">${esc(deps.audit.note || 'npm audit not available.')}</p>`;
+
+  const vulnColor = (s) =>
+    ({ critical: '#dc2626', high: '#ea580c', moderate: '#d97706', low: '#0891b2' })[s] || '#64748b';
+
+  const depRows = deps.packages
+    .map((p) => {
+      const verCell = p.needsUpdate
+        ? `${esc(p.version)} <span class="muted">→</span> <span class="upd">${esc(p.outdated.latest)}</span>`
+        : esc(p.version);
+      const statusCell = p.vuln
+        ? `<span class="sev" style="--c:${vulnColor(p.vuln)}">${esc(p.vuln)}</span>`
+        : p.needsUpdate
+          ? `<span class="muted">outdated</span>`
+          : `<span class="ok-dot">●</span>`;
+      const why =
+        (p.reason ? esc(p.reason) : '<span class="muted">—</span>') +
+        (p.task ? ` <span class="tag task">${esc(p.task)}</span>` : '');
+      const added = p.added
+        ? `${esc(p.added)}${p.addedHash ? ` <span class="muted">${esc(p.addedHash)}</span>` : ''}`
+        : '<span class="muted">—</span>';
+      return `<tr data-type="${p.type}" data-outdated="${p.needsUpdate ? 1 : 0}" data-vuln="${p.vuln ? 1 : 0}" data-name="${esc(p.name.toLowerCase())}">
+        <td class="pkg"><code>${esc(p.name)}</code> <span class="tag ${p.type}">${p.type}</span>${p.imported ? ' <span class="imp" title="imported in source">imported</span>' : ''}</td>
+        <td class="desc">${p.description ? esc(p.description) : '<span class="muted">—</span>'}</td>
+        <td class="why">${why}</td>
+        <td class="when">${added}</td>
+        <td class="ver">${verCell}</td>
+        <td class="r">${statusCell}</td>
+      </tr>`;
+    })
+    .join('');
+
+  const depFilters = `
+    <div id="dep-filters" class="filters">
+      <div class="seg">
+        <button data-ftype="all" class="on">All <span class="muted">${deps.prodCount + deps.devCount}</span></button>
+        <button data-ftype="prod">prod <span class="muted">${deps.prodCount}</span></button>
+        <button data-ftype="dev">dev <span class="muted">${deps.devCount}</span></button>
+      </div>
+      <label${deps.outdatedAvailable ? '' : ` title="${esc(deps.outdatedNote || '')}"`}><input type="checkbox" id="f-outdated"${deps.outdatedAvailable ? '' : ' disabled'}> needs update <span class="muted">(${deps.outdatedAvailable ? deps.outdatedCount : 'n/a'})</span></label>
+      <label title="Direct dependencies flagged by npm audit — a subset of the ${deps.audit.available ? deps.audit.total : '—'} total advisories, which also count transitive packages."><input type="checkbox" id="f-vuln"> vulnerable <span class="muted">(${deps.vulnCount})</span></label>
+      <input id="f-q" type="search" placeholder="filter by name…">
+      <span class="muted" id="dep-count"></span>
+    </div>`;
+
+  const outdatedNote = deps.outdatedAvailable
+    ? ''
+    : `<p class="muted" style="margin:0 0 10px">⚠ <strong>Needs-update</strong> is unavailable — ${esc(deps.outdatedNote || '')}</p>`;
+
+  const depTableHtml = `
+    ${outdatedNote}
+    ${depFilters}
+    <div class="tablewrap">
+    <table class="mini deps" id="dep-rows"><thead><tr>
+      <th>Package</th><th>What it is</th><th>Why / task it was added for</th><th>Added</th><th>Version</th><th class="r">Status</th>
+    </tr></thead><tbody>${depRows}</tbody></table>
+    </div>`;
+
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1"/>
+<title>Quality Dashboard — ${esc(meta.name)}</title>
+<style>${STYLES}</style>
+</head>
+<body>
+<header>
+  <h1>Quality Dashboard · ${esc(meta.name)} <span class="muted">v${esc(meta.version)}</span></h1>
+  <div class="sub">Generated ${esc(meta.generated)}${meta.repo ? ` · <a href="https://github.com/${esc(meta.repo.owner)}/${esc(meta.repo.name)}" target="_blank" rel="noopener">${esc(meta.repo.owner)}/${esc(meta.repo.name)}</a>` : ''} · branch <code>${esc(meta.branch)}</code></div>
+</header>
+<div class="wrap">
+
+  <div class="chips">
+    ${chip('Code lines', num(code.codeLines))}
+    ${chip('Source files', num(code.codeFiles))}
+    ${chip('Coverage (lines)', coverage.available ? pct(coverage.lines) : '—', coverage.available ? (coverage.lines >= 80 ? 'good' : coverage.lines >= 50 ? 'warn' : 'bad') : '')}
+    ${chip('Lint errors', lint.eslint?.available ? lint.eslint.errors : '—', lintTone === 'good' ? 'good' : lintTone === 'bad' ? 'bad' : 'warn')}
+    ${chip('Type errors', lint.tsc?.available ? lint.tsc.errors : '—', lint.tsc?.ok ? 'good' : 'bad')}
+    ${chip('Dependencies', num(deps.prodCount + deps.devCount))}
+    ${chip('Audit advisories', deps.audit.available ? deps.audit.total : '—', auditTone)}
+    ${chip('Modules / imports', `${graph.nodeCount}/${graph.edgeCount}`)}
+    ${chip('Routes', routing.available ? routing.pageCount + routing.routeCount : '—')}
+    ${chip('DB tables', entities.available ? entities.tables.length : '—')}
+    ${chip('Stories', storybook.available ? storybook.storyCount : '—')}
+  </div>
+
+  <h2>1 · Tests, lint &amp; types</h2>
+  <div class="grid three">
+    <div class="card"><div class="card-h"><h3>Test coverage</h3></div>${covBody}</div>
+    <div class="card"><div class="card-h"><h3>Linter (ESLint)</h3></div>${lintBody}</div>
+    <div class="card"><div class="card-h"><h3>TypeScript</h3></div>${tscBody}</div>
+  </div>
+
+  <h2>2 · Security scanners</h2>
+  <p class="muted" style="margin-top:-4px">Snyk, CodeQL and Checkmarx run in GitHub Actions and publish to the Security tab / vendor dashboards. Findings below are parsed from local SARIF artifacts when present.${security.ghSecurity ? ` · <a href="${security.ghSecurity}" target="_blank" rel="noopener">Open GitHub code scanning ↗</a>` : ''}</p>
+  <div class="grid scanners">
+    ${scannerCard(security.snyk)}
+    ${scannerCard(security.codeql)}
+    ${scannerCard(security.checkmarx)}
+  </div>
+
+  <h2>3 · Dependencies</h2>
+  <div class="card">${auditBody}</div>
+  <div class="card" style="margin-top:16px">${depTableHtml}</div>
+
+  <h2>4 · File graph &amp; relationships</h2>
+  <div class="card">
+    <p class="muted">${graph.nodeCount} internal modules · ${graph.edgeCount} import edges · ${graph.externalCount} external packages. Browse by folder; expand a file to see what it imports and what imports it.</p>
+    <div class="tree">${fileTreeHtml(graph.graph)}</div>
+    <details style="margin-top:14px"><summary>Force-directed view (drag nodes, hover for path)</summary>
+      <canvas id="graph"></canvas>
+      <div class="legend" id="legend"></div>
+    </details>
+  </div>
+
+  <h2>5 · Routing</h2>
+  <div class="card">
+    <p class="muted">Next.js App Router${routing.available ? ` — ${routing.pageCount} page(s) · ${routing.routeCount} API route(s)` : ''}. Expand a segment to see nested routes; dynamic <span class="seg dyn">[param]</span> segments and route <span class="seg group">(groups)</span> are highlighted.</p>
+    <div class="tree">${routingHtml(routing)}</div>
+  </div>
+
+  <h2>6 · Component composition</h2>
+  <div class="card">
+    ${compositionGraphHtml(composition)}
+  </div>
+
+  <h2>7 · Data model</h2>
+  <div class="card">
+    <p class="muted">Entities parsed from <code>supabase/migrations/*.sql</code>${entities.available ? ` — ${entities.tables.length} table(s)${entities.buckets.length ? ` · ${entities.buckets.length} storage bucket(s)` : ''}` : ''}. <span class="kb pk">PK</span> primary key · <span class="kb fk">FK</span> foreign key · <span class="req">*</span> NOT NULL.</p>
+    ${entitiesHtml(entities)}
+  </div>
+
+  <h2>8 · Storybook</h2>
+  <div class="card">
+    ${
+      storybook.built
+        ? `<p class="sb-link">📕 <a href="${esc(storybook.href)}" target="_blank" rel="noopener">Open Storybook ↗</a> — the component workshop (design-system widgets &amp; features), built as a static site next to this dashboard.</p>
+    <p class="muted">${num(storybook.storyCount)} story file(s) in the source tree.</p>`
+        : `<p class="muted">${num(storybook.storyCount)} story file(s) in the source tree. ${esc(storybook.note || 'Static Storybook not built next to the dashboard.')}</p>`
+    }
+  </div>
+
+  <h2>9 · Codebase bundle</h2>
+  <div class="card">
+    ${
+      bundle.available
+        ? `<p>📦 <a href="${esc(bundle.file)}" target="_blank" rel="noopener">Open the codebase bundle ↗</a> — every source file, config and report in one browsable, self-contained page (collapsible tree, full-text filter).</p>
+    <p class="muted">${num(bundle.fileCount)} files embedded · ${bytes(bundle.totalBytes)} of source · ${bytes(bundle.htmlBytes)} HTML · regenerate alone with <code>npm run bundle:report</code>.</p>`
+        : `<p class="muted">${esc(bundle.note || 'Codebase bundle not generated.')} Run <code>npm run bundle:report</code> to generate it separately.</p>`
+    }
+  </div>
+
+  <footer>Generated by <code>dev/scripts/quality-dashboard.mjs</code> · ${esc(meta.generated)}</footer>
+</div>
+
+<script id="graph-data" type="application/json">${JSON.stringify(graph.graph).replace(/</g, '\\u003c')}</script>
+<script>
+${GRAPH_SCRIPT}
+</script>
+<script>
+${COMPOSITION_SCRIPT}
+</script>
+<script>
+${COMPOSITION_FLOW_SCRIPT}
+</script>
+<script>
+${DEP_FILTER_SCRIPT}
+</script>
+</body>
+</html>`;
+}

package/src/dashboard/utils/exec.mjs

@@ -0,0 +1,29 @@
+/** Shell-command execution + the progress logger. */
+import { spawnSync } from 'node:child_process';
+
+import { ROOT } from '../config.mjs';
+
+/** Progress line printed while collectors run. */
+export const log = (...a) => console.log('•', ...a);
+
+/**
+ * Run a shell command, returning {code, stdout, stderr, error} — never throws.
+ * Defaults the working directory to the repository root so callers can stay
+ * path-agnostic; pass `cwd` to override.
+ */
+export function exec(cmd, { cwd = ROOT, timeout = 600_000 } = {}) {
+  const r = spawnSync(cmd, {
+    cwd,
+    shell: true,
+    encoding: 'utf8',
+    timeout,
+    maxBuffer: 128 * 1024 * 1024,
+    windowsHide: true,
+  });
+  return {
+    code: r.status ?? (r.error ? 1 : 0),
+    stdout: r.stdout || '',
+    stderr: r.stderr || '',
+    error: r.error || null,
+  };
+}

package/src/dashboard/utils/format.mjs

@@ -0,0 +1,32 @@
+/** Pure string/number formatting helpers shared by the renderers. */
+
+/** HTML-escape a value for safe interpolation into the report. */
+export const esc = (s) =>
+  String(s).replace(
+    /[&<>"']/g,
+    (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c],
+  );
+
+/** Format a percentage (one decimal), or em-dash when missing/non-numeric. */
+export const pct = (n) => (typeof n === 'number' && Number.isFinite(n) ? `${n.toFixed(1)}%` : '—');
+
+/** Format an integer with thousands separators, or em-dash when missing/non-numeric. */
+export const num = (n) => {
+  const v = Number(n);
+  return n == null || Number.isNaN(v) ? '—' : v.toLocaleString('en-US');
+};
+
+/** Format a byte count as B / KB / MB, or em-dash when missing/non-numeric. */
+export const bytes = (n) => {
+  const v = Number(n);
+  if (n == null || Number.isNaN(v)) {
+    return '—';
+  }
+  if (v < 1024) {
+    return `${v} B`;
+  }
+  if (v < 1024 * 1024) {
+    return `${(v / 1024).toFixed(1)} KB`;
+  }
+  return `${(v / 1024 / 1024).toFixed(2)} MB`;
+};

package/src/dashboard/utils/fs.mjs

@@ -0,0 +1,48 @@
+/** Filesystem walking helpers shared by the collectors. */
+import { readdirSync } from 'node:fs';
+import path from 'node:path';
+
+import { ROOT } from '../config.mjs';
+
+/** Directories never descended into when scanning the tree. */
+export const IGNORE_DIRS = new Set([
+  'node_modules',
+  '.git',
+  '.vercel',
+  '.turbo',
+  'coverage',
+  'reports',
+  'dist',
+  'build',
+  'out',
+  'playwright-report',
+  'test-results',
+]);
+
+/** Recursively collect every file under `dir`, skipping IGNORE_DIRS and dotfiles. */
+export function walk(dir, files = []) {
+  let entries;
+  try {
+    entries = readdirSync(dir, { withFileTypes: true });
+  } catch {
+    return files;
+  }
+  for (const e of entries) {
+    if (e.name.startsWith('.') && e.name !== '.github') {
+      continue;
+    }
+    const full = path.join(dir, e.name);
+    if (e.isDirectory()) {
+      if (IGNORE_DIRS.has(e.name)) {
+        continue;
+      }
+      walk(full, files);
+    } else if (e.isFile()) {
+      files.push(full);
+    }
+  }
+  return files;
+}
+
+/** Project-root-relative POSIX path for display. */
+export const rel = (p) => path.relative(ROOT, p).split(path.sep).join('/');