@holmes-lab/holmes-kit 0.1.8 → 0.1.10

package/dist/holmes/server/dashboard.js

@@ -33,9 +33,16 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SPEC_KINDS = void 0;
 exports.startDashboardServer = startDashboardServer;
+exports.isCanonicalStatus = isCanonicalStatus;
+exports.activeSpecs = activeSpecs;
+exports.specKindOf = specKindOf;
+exports.buildPipelineRows = buildPipelineRows;
 // @implements A-SPEC-215
 // @implements A-SPEC-219
+// @implements A-SPEC-222.2
+const fs = __importStar(require("node:fs"));
 const http = __importStar(require("node:http"));
 const path = __importStar(require("node:path"));
 const spec_store_1 = require("../spec/spec-store");
@@ -73,7 +80,9 @@ async function startDashboardServer(options) {
         }
         if (parsedUrl === '/api/rtm') {
             try {
-                const specs = await store.list();
+                const allSpecs = await store.list();
+                const retiredSpecs = allSpecs.filter((s) => s.status === 'outdated');
+                const specs = activeSpecs(allSpecs);
                 const files = scanner.scan(root);
                 const implementedSpecIds = new Set();
                 for (const f of files) {
@@ -83,12 +92,71 @@ async function startDashboardServer(options) {
                 const enrichedSpecs = specs.map((s) => {
                     const isA = s.id.startsWith('A-SPEC');
                     const covered = isA ? implementedSpecIds.has(s.id) : s.status === 'approved';
-                    return { ...s, covered };
+                    return { ...s, covered, legacyStatus: !isCanonicalStatus(s.status) };
                 });
+                // Two axes, never one number. Approval (a spec was signed off) and implementation (code is
+                // anchored to it) answer different questions, and a spec whose status is outside the
+                // canonical vocabulary answers neither — it is excluded and counted separately instead of
+                // being silently scored 0, which read as "47 uncovered specs" when it meant "47 unmapped".
+                const canonical = enrichedSpecs.filter((s) => !s.legacyStatus && exports.SPEC_KINDS.has(specKindOf(s.id)));
+                const approvedCount = canonical.filter((s) => s.status === 'approved').length;
+                const anchorable = enrichedSpecs.filter((s) => s.id.startsWith('A-SPEC') && !s.legacyStatus);
+                const anchoredCount = anchorable.filter((s) => s.covered).length;
+                // @implements A-SPEC-219.1
+                // Two populations sit outside the axes, and merging them into one number misleads: a reader
+                // of "legacy 49" concludes 49 documents need cleaning up, when 23 of them will never become
+                // specs no matter how long anyone waits. The population that prompted this split was
+                // `06_job/JOB-*`, work orders carrying an `assignee`; those were deleted under REQ-223
+                // once measurement showed all 23 pointed at retired REQs and at 46 source paths of which
+                // none still existed. The split stays because it is the guard: the next stray document
+                // lands here instead of in the cleanup backlog.
+                const outside = enrichedSpecs.filter((s) => s.legacyStatus || !exports.SPEC_KINDS.has(specKindOf(s.id)));
+                const unmappedSpecs = outside.filter((s) => exports.SPEC_KINDS.has(specKindOf(s.id)));
+                const nonSpecDocs = outside.filter((s) => !exports.SPEC_KINDS.has(specKindOf(s.id)));
+                const tally = (rows) => {
+                    const out = {};
+                    for (const s of rows) {
+                        const kind = specKindOf(s.id);
+                        out[kind] = (out[kind] || 0) + 1;
+                    }
+                    return out;
+                };
+                const approval = {
+                    total: canonical.length,
+                    approved: approvedCount,
+                    pct: canonical.length > 0 ? Math.round((approvedCount / canonical.length) * 100) : 0,
+                };
+                const implementation = {
+                    total: anchorable.length,
+                    anchored: anchoredCount,
+                    pct: anchorable.length > 0 ? Math.round((anchoredCount / anchorable.length) * 100) : 0,
+                };
+                // Reported, never silently dropped: without this the 132 excluded documents vanish and the
+                // screen cannot say where they went.
+                const retiredByKind = {};
+                for (const s of retiredSpecs) {
+                    const kind = specKindOf(s.id);
+                    retiredByKind[kind] = (retiredByKind[kind] || 0) + 1;
+                }
+                // Count and kinds only. Shipping the ids would put retired documents back into the very
+                // response this slice removes them from, and nothing on the screen renders them.
+                const retired = { count: retiredSpecs.length, byKind: retiredByKind };
+                const unmapped = { count: unmappedSpecs.length, byKind: tally(unmappedSpecs) };
+                const nonSpec = { count: nonSpecDocs.length, byKind: tally(nonSpecDocs) };
                 const coveredCount = enrichedSpecs.filter((s) => s.covered).length;
                 const totalCount = enrichedSpecs.length;
-                const coveragePct = totalCount > 0 ? Math.round((coveredCount / totalCount) * 100) : 100;
-                const body = JSON.stringify({ ok: true, totalCount, coveredCount, coveragePct, specs: enrichedSpecs });
+                const body = JSON.stringify({
+                    ok: true,
+                    totalCount,
+                    coveredCount,
+                    approval,
+                    implementation,
+                    unmapped,
+                    nonSpec,
+                    retired,
+                    specs: enrichedSpecs,
+                    files,
+                });
                 res.writeHead(200, { 'Content-Type': 'application/json' });
                 res.end(body);
             }
@@ -103,82 +171,24 @@ async function startDashboardServer(options) {
         // @implements A-SPEC-219
         if (parsedUrl === '/api/rtm/heatmap') {
             try {
-                const specs = await store.list();
+                // @implements A-SPEC-222.2 — retired documents never reach a rendered view.
+                const specs = activeSpecs(await store.list());
                 const files = scanner.scan(root);
-                const findingsLedger = new findings_1.FindingsLedger(path.join(root, '.ax', 'ledger', 'findings.jsonl'));
-                const allFindings = findingsLedger.list();
-                const reqs = specs.filter((s) => s.id.startsWith('REQ-'));
-                const pipelines = [];
-                for (const reqItem of reqs) {
-                    const numPart = reqItem.id.replace('REQ-', '').split('.')[0];
-                    const hspecs = specs.filter((s) => s.id.startsWith(`H-SPEC-${numPart}`));
-                    const aspecs = specs.filter((s) => s.id.startsWith(`A-SPEC-${numPart}`));
-                    const tspecs = specs.filter((s) => s.id.startsWith(`T-SPEC-${numPart}`));
-                    const matchingFiles = files.filter((f) => f.implementsSpecs.some((specId) => specId.includes(numPart) || specId === reqItem.id));
-                    if (matchingFiles.length === 0) {
-                        const specFinding = allFindings.filter((f) => f.specRef?.includes(numPart) && f.status === 'open');
-                        pipelines.push({
-                            reqId: reqItem.id,
-                            reqTitle: reqItem.title,
-                            hspecId: hspecs[0]?.id || `H-SPEC-${numPart}`,
-                            aspecId: aspecs[0]?.id || `A-SPEC-${numPart}`,
-                            tspecId: tspecs[0]?.id || `T-SPEC-${numPart}`,
-                            fileId: 'src/holmes/server/dashboard.ts',
-                            symbolId: 'startDashboardServer',
-                            status: reqItem.status === 'approved' ? 'COVERED' : 'UNCOVERED',
-                            findingsCount: specFinding.length,
-                            criticalCount: specFinding.filter((f) => f.severity === 'critical').length,
-                            mutantCount: 0,
-                            mutationScore: 100,
-                        });
-                    }
-                    else {
-                        for (const f of matchingFiles) {
-                            const fileId = f.sourcePath || f.path;
-                            const syms = f.symbols || [];
-                            const fileMutants = (0, ast_mutation_1.generateAstMutants)([f]);
-                            const fileFindings = allFindings.filter((fd) => (fd.file === fileId || fd.specRef?.includes(numPart)) && fd.status === 'open');
-                            if (syms.length === 0) {
-                                pipelines.push({
-                                    reqId: reqItem.id,
-                                    reqTitle: reqItem.title,
-                                    hspecId: hspecs[0]?.id || `H-SPEC-${numPart}`,
-                                    aspecId: aspecs[0]?.id || `A-SPEC-${numPart}`,
-                                    tspecId: tspecs[0]?.id || `T-SPEC-${numPart}`,
-                                    fileId,
-                                    symbolId: '(File Module)',
-                                    status: 'COVERED',
-                                    findingsCount: fileFindings.length,
-                                    criticalCount: fileFindings.filter((fd) => fd.severity === 'critical').length,
-                                    mutantCount: fileMutants.length,
-                                    mutationScore: 100,
-                                });
-                            }
-                            else {
-                                for (const sym of syms.slice(0, 3)) {
-                                    const symMutants = fileMutants.filter((m) => m.symbolName === sym.name);
-                                    pipelines.push({
-                                        reqId: reqItem.id,
-                                        reqTitle: reqItem.title,
-                                        hspecId: hspecs[0]?.id || `H-SPEC-${numPart}`,
-                                        aspecId: aspecs[0]?.id || `A-SPEC-${numPart}`,
-                                        tspecId: tspecs[0]?.id || `T-SPEC-${numPart}`,
-                                        fileId,
-                                        symbolId: sym.name,
-                                        status: 'COVERED',
-                                        findingsCount: fileFindings.length,
-                                        criticalCount: fileFindings.filter((fd) => fd.severity === 'critical').length,
-                                        mutantCount: symMutants.length,
-                                        mutationScore: 100,
-                                    });
-                                }
-                            }
-                        }
-                    }
-                }
+                // FindingsLedger.list() returns [] for a missing file, which is indistinguishable from a
+                // clean scan. The dashboard therefore asks the filesystem directly: an audit lens that
+                // renders "0 open findings" over a ledger that was never written is a green wall, not a
+                // verdict.
+                const findingsPath = path.join(root, '.ax', 'ledger', 'findings.jsonl');
+                const findingsScanned = fs.existsSync(findingsPath);
+                const findingsLedger = new findings_1.FindingsLedger(findingsPath);
+                const allFindings = findingsScanned ? findingsLedger.list() : [];
+                const pipelines = buildPipelineRows(specs, files, allFindings, { findingsScanned });
                 const body = JSON.stringify({
                     ok: true,
                     pipelineCount: pipelines.length,
+                    completeCount: pipelines.filter((p) => p.status === 'COVERED').length,
+                    findingsScanned,
+                    mutationScoreMeasured: false,
                     pipelines,
                 });
                 res.writeHead(200, { 'Content-Type': 'application/json' });
@@ -210,7 +220,8 @@ async function startDashboardServer(options) {
         // @implements A-SPEC-219
         if (parsedUrl === '/api/graph') {
             try {
-                const specs = await store.list();
+                // @implements A-SPEC-222.2 — retired documents never reach a rendered view.
+                const specs = activeSpecs(await store.list());
                 const files = scanner.scan(root);
                 const nodes = [];
                 const edges = [];
@@ -374,7 +385,7 @@ function renderDashboardHtml() {
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Holmes-Kit World Top-Tier 3-Tier Multi-Lens RTM & Graph Canvas</title>
+  <title>Holmes-Kit World Top-Tier Quantitative RTM Matrix & AST/CPG Graph Canvas</title>
   <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
   <style>
     body { font-family: system-ui, -apple-system, sans-serif; background-color: #0b0f19; color: #f8fafc; margin: 0; padding: 24px; user-select: none; }
@@ -384,18 +395,28 @@ function renderDashboardHtml() {
     .tab-btn.active { background: #3b82f6; color: #ffffff; border-color: #3b82f6; }
     .search-box { width: 100%; max-width: 400px; padding: 10px 14px; border-radius: 8px; border: 1px solid #334155; background: #1e293b; color: #fff; margin-bottom: 16px; font-size: 14px; }
     
-    /* REQ Hierarchical Drill-Down Accordion Matrix Styling */
+    /* Quantitative REQ SDLC Health Matrix Grid Styling */
     .rtm-container { display: flex; flex-direction: column; gap: 16px; }
-    .req-card { background: #1e293b; border: 1.5px solid #334155; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.4); transition: border-color 0.2s ease; }
+    .req-card { background: #1e293b; border: 1.5px solid #334155; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.4); transition: border-color 0.2s ease; margin-bottom: 16px; }
     .req-card:hover { border-color: #ec4899; }
     .req-header { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; background: rgba(236,72,153,0.06); cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.05); }
     .req-title-group { display: flex; align-items: center; gap: 12px; }
     .req-id-badge { background: #ec4899; color: #fff; font-weight: 800; font-size: 13px; padding: 4px 10px; border-radius: 6px; }
     .req-title { font-size: 15px; font-weight: bold; color: #f8fafc; }
-    .req-progress-bar { width: 140px; height: 8px; background: #334155; border-radius: 4px; overflow: hidden; display: inline-block; margin-right: 10px; }
-    .req-progress-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #34d399); }
+    
+    /* 6-Stage Quantitative Metrics Bar inside REQ Header */
+    .quant-grid { display: flex; gap: 8px; align-items: center; background: #0f172a; border: 1px solid #334155; padding: 6px 12px; border-radius: 8px; font-size: 11px; }
+    .quant-badge { display: flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; font-weight: bold; }
+    .quant-hspec { background: rgba(139,92,246,0.2); color: #c084fc; border: 1px solid #8b5cf6; }
+    .quant-aspec { background: rgba(59,130,246,0.2); color: #60a5fa; border: 1px solid #3b82f6; }
+    .quant-tspec { background: rgba(6,182,212,0.2); color: #67e8f9; border: 1px solid #06b6d4; }
+    .quant-file { background: rgba(16,185,129,0.2); color: #34d399; border: 1px solid #10b981; }
+    .quant-symbol { background: rgba(245,158,11,0.2); color: #fbbf24; border: 1px solid #f59e0b; }
+    
     .expand-btn { background: #334155; color: #38bdf8; border: none; padding: 6px 14px; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 12px; transition: all 0.15s ease; }
     .expand-btn:hover { background: #3b82f6; color: #fff; }
+    .view-graph-btn { background: #8b5cf6; color: #fff; border: none; padding: 6px 14px; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 12px; }
+    .view-graph-btn:hover { background: #7c3aed; }
     
     .accordion-body { padding: 16px 20px; display: none; background: #0f172a; border-top: 1px solid #334155; flex-direction: column; gap: 10px; }
     .accordion-body.open { display: flex; }
@@ -410,9 +431,9 @@ function renderDashboardHtml() {
     .badge-uncovered { background-color: #991b1b; color: #f87171; }
     .stat-badge { font-size: 24px; font-weight: 800; color: #f59e0b; }
     
-    /* 6-Stage Sequential Pipeline RTM Heatmap Matrix Styling */
-    .heatmap-wrapper { width: 100%; overflow-x: auto; background: #0f172a; border-radius: 10px; border: 1.5px solid #334155; padding: 16px; box-sizing: border-box; }
-    .pipeline-table { border-collapse: collapse; font-size: 12px; width: 100%; min-width: 1000px; }
+    /* REQ-Grouped Structured 6-Stage Pipeline Heatmap Matrix Styling */
+    .heatmap-wrapper { width: 100%; background: #0f172a; border-radius: 10px; border: 1.5px solid #334155; padding: 20px; box-sizing: border-box; }
+    .pipeline-table { border-collapse: collapse; font-size: 12px; width: 100%; }
     .pipeline-table th, .pipeline-table td { border: 1px solid #334155; padding: 10px 12px; text-align: left; }
     .pipeline-table th { background: #1e293b; color: #f8fafc; font-weight: bold; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; }
     .pipeline-row:hover { background: #1e293b; }
@@ -479,9 +500,25 @@ function renderDashboardHtml() {
     .legend-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
     .controls { margin-bottom: 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
     .select-box { padding: 8px 12px; border-radius: 6px; border: 1px solid #334155; background: #1e293b; color: #fff; font-size: 13px; }
-    .popover-card { position: absolute; top: 16px; right: 420px; width: 320px; background: #0f172a; border: 1px solid #3b82f6; border-radius: 8px; padding: 14px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); pointer-events: none; opacity: 0; transition: opacity 0.2s ease; z-index: 100; font-size: 12px; }
+    
+    .axis-stats { display: flex; align-items: center; gap: 18px; font-size: 13px; color: #94a3b8; }
+    .axis-stat { display: inline-flex; align-items: center; gap: 6px; }
+    .legacy-chip { cursor: pointer; border: 1px dashed #64748b; border-radius: 999px; padding: 4px 10px; }
+    .legacy-chip:hover { border-color: #f59e0b; color: #f59e0b; }
+    .nonspec-chip { cursor: pointer; border: 1px solid #334155; border-radius: 999px; padding: 4px 10px; color: #64748b; }
+    .nonspec-chip:hover { border-color: #94a3b8; color: #94a3b8; }
+    .scope-notice { font-size: 12px; color: #94a3b8; background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; }
+    .scope-notice-truncated { color: #fbbf24; border-color: #b45309; border-style: dashed; }
+    .stage-missing { color: #64748b; font-style: italic; cursor: default; background: repeating-linear-gradient(45deg, rgba(100,116,139,0.06) 0 6px, transparent 6px 12px); }
+    .badge-unmeasured { background: #334155; color: #cbd5e1; border: 1px dashed #64748b; }
+    /* World Top-Tier High-Density Rich Tooltip Popover Card Styling */
+    .popover-card { position: absolute; top: 16px; right: 420px; width: 360px; background: #0f172a; border: 1.5px solid #3b82f6; border-radius: 10px; padding: 16px; box-shadow: 0 12px 35px rgba(0,0,0,0.8); pointer-events: none; opacity: 0; transition: opacity 0.15s ease; z-index: 100; font-size: 12px; box-sizing: border-box; backdrop-filter: blur(10px); }
     .popover-card.active { opacity: 1; pointer-events: auto; }
-    .popover-title { font-weight: bold; font-size: 14px; color: #38bdf8; margin-bottom: 6px; word-break: break-all; }
+    .popover-badge { display: inline-block; padding: 3px 8px; border-radius: 4px; font-weight: 800; font-size: 11px; color: #fff; margin-bottom: 8px; }
+    .popover-title { font-weight: bold; font-size: 15px; color: #f8fafc; margin-bottom: 6px; word-break: break-all; }
+    .popover-section { margin-top: 10px; padding-top: 8px; border-top: 1px solid #334155; display: flex; flex-direction: column; gap: 4px; }
+    .popover-label { color: #94a3b8; font-size: 11px; font-weight: bold; text-transform: uppercase; }
+    .popover-value { color: #cbd5e1; font-size: 12px; }
     
     .canvas-toolbar { position: absolute; bottom: 20px; right: 420px; display: flex; flex-direction: column; gap: 8px; z-index: 90; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; padding: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
     .tool-btn { background: #1e293b; color: #f8fafc; border: 1px solid #334155; width: 38px; height: 38px; border-radius: 6px; font-weight: bold; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; }
@@ -492,39 +529,70 @@ function renderDashboardHtml() {
 <body>
   <div class="header">
     <div>
-      <h1 style="margin:0; font-size: 24px;">🔥 3-Tier Multi-Lens RTM Pipeline & Graph Canvas</h1>
-      <div style="font-size: 13px; color: #94a3b8; margin-top: 4px;">Layered Multi-Lens Architecture • Truthful Real-Time Entity Traceability</div>
+      <h1 style="margin:0; font-size: 24px;">🔥 REQ-Grouped Pipeline Matrix & AST/CPG Canvas</h1>
+      <div style="font-size: 13px; color: #94a3b8; margin-top: 4px;">REQ Master Section Blocks • Multi-Lens Quick Filter Bar • Full-collection CPG call graph (canvas shows a bounded subgraph)</div>
+    </div>
+    <div class="axis-stats">
+      <span class="axis-stat" title="Specs signed off, over specs using the canonical status vocabulary">📋 Approval <span id="approvalStat" class="stat-badge">--%</span></span>
+      <span class="axis-stat" title="A-SPECs with code anchored to them, over canonical A-SPECs">⚙️ Implementation <span id="implStat" class="stat-badge">--%</span></span>
+      <span class="axis-stat legacy-chip" id="unmappedChip" title="Spec documents whose status is outside draft|review|approved|outdated — these are the cleanup backlog" onclick="switchTab('legacy')">🏷️ <span id="unmappedStat">--</span></span>
+      <span class="axis-stat nonspec-chip" id="nonSpecChip" title="Documents in the spec store that are not a governed spec kind — never a cleanup target" onclick="switchTab('legacy')">📋 <span id="nonSpecStat">--</span></span>
     </div>
-    <div>Specification Coverage: <span id="coverageStat" class="stat-badge">--%</span></div>
   </div>
 
   <div class="nav-tabs">
-    <button id="tabRtmBtn" class="tab-btn active" onclick="switchTab('rtm')">📋 RTM Traceability Grid (REQ Drill-Down)</button>
-    <button id="tabHeatmapBtn" class="tab-btn" onclick="switchTab('heatmap')">🔥 6-Stage Pipeline Heatmap (REQ ➔ AST/CPG)</button>
+    <button id="tabRtmBtn" class="tab-btn active" onclick="switchTab('rtm')">📊 Quantitative REQ RTM Matrix Grid</button>
+    <button id="tabHeatmapBtn" class="tab-btn" onclick="switchTab('heatmap')">🔥 REQ-Grouped Pipeline Heatmap (REQ ➔ AST)</button>
     <button id="tabGraphBtn" class="tab-btn" onclick="switchTab('graph')">🕸️ End-to-End Human-Insight Pipeline Canvas</button>
+    <button id="tabLegacyBtn" class="tab-btn" onclick="switchTab('legacy')">🏷️ Unmapped Specs (C-SPEC · JOB)</button>
   </div>
 
   <div id="rtmTab">
     <div class="ux-hint-banner">
-      <span>💡 <strong>REQ Hierarchical Accordion Matrix:</strong> Displaying primary <strong>REQ Business Requirements</strong>. Click <strong>▶ Expand</strong> to drill down into downstream specs, files, and AST symbols!</span>
+      <span>💡 <strong>Quantitative REQ SDLC Health Matrix Grid:</strong> Every business requirement displays exact 6-Stage Quantitative Metrics (H/A/T-SPEC, Code Files, AST Symbols, CPG Edges). Click <strong>▶ Expand</strong> for itemized status!</span>
     </div>
     <input type="text" id="searchInput" class="search-box" placeholder="Search business REQ requirements by ID or title..." />
     <div id="specGrid" class="rtm-container">Loading REQ specifications...</div>
   </div>
 
+  <div id="legacyTab" style="display: none;">
+    <div class="ux-hint-banner" style="border-left-color: #f59e0b;">
+      <span>🏷️ <strong>Cleanup backlog:</strong> spec documents whose <code>status</code> falls outside <code>draft | review | approved | outdated</code>, so no governance gate has scored them. Each is waiting for <code>spec_upgrade</code> → <code>spec_retire</code>, or a rewrite into the current format. Excluded from both headline axes — an unmapped vocabulary is not an uncovered spec.</span>
+    </div>
+    <div id="unmappedGrid" class="rtm-container">Loading…</div>
+
+    <div id="nonSpecSection" style="display: none;">
+      <div class="ux-hint-banner" style="border-left-color: #334155; margin-top: 28px;">
+        <span>📋 <strong>Not specifications:</strong> documents that live in the spec store but are not a governed spec kind. They are <strong>not</strong> a cleanup target and never will be, and they have always sat outside both axes. Nothing should normally appear here — <code>spec-store-boundary.test.ts</code> fails the build when it does.</span>
+      </div>
+      <div id="nonSpecGrid" class="rtm-container"></div>
+    </div>
+  </div>
+
   <div id="heatmapTab" style="display: none;">
     <div class="ux-hint-banner" style="border-left-color: #f59e0b;">
-      <div style="display: flex; align-items: center; gap: 12px;">
-        <span>🔥 <strong>3-Tier Multi-Lens Insight Switcher:</strong> Select Lens to Overlay Truthful Real-Time Entity Data:</span>
-        <select id="lensSelect" class="select-box" style="border-color: #f59e0b; font-weight: bold; background: #0f172a;" onchange="changeHeatmapLens()">
-          <option value="lens1" selected>🎯 Lens 1: SDLC Trace Spine (REQ ➔ AST/CPG Core Chain)</option>
-          <option value="lens2">🛡️ Lens 2: Audit & Security Risk Overlay (Live Findings + Provenance Ledger)</option>
-          <option value="lens3">🧪 Lens 3: Mutation & Robustness Overlay (Live AST Mutants + Score)</option>
-        </select>
+      <div style="display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <span>🔥 <strong>3-Tier Multi-Lens:</strong></span>
+          <select id="lensSelect" class="select-box" style="border-color: #f59e0b; font-weight: bold; background: #0f172a;" onchange="changeHeatmapLens()">
+            <option value="lens1" selected>🎯 Lens 1: SDLC Trace Spine (REQ ➔ AST/CPG Core Chain)</option>
+            <option value="lens2">🛡️ Lens 2: Audit & Security Risk Overlay (Findings Ledger — shows “not scanned” when absent)</option>
+            <option value="lens3">🧪 Lens 3: Mutation & Robustness Overlay (Static AST Mutants — score unmeasured)</option>
+          </select>
+        </div>
+        
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <span>🔍 <strong>Filter Status:</strong></span>
+          <select id="pipelineFilterSelect" class="select-box" style="border-color: #38bdf8; font-weight: bold; background: #0f172a;" onchange="changeHeatmapLens()">
+            <option value="all" selected>All REQ Pipelines</option>
+            <option value="uncovered">Only Uncovered / Active Traces</option>
+            <option value="findings">Only Traces with Open Findings</option>
+          </select>
+        </div>
       </div>
     </div>
     <div class="heatmap-wrapper">
-      <div id="heatmapContainer">Loading 6-stage pipeline heatmap...</div>
+      <div id="heatmapContainer">Loading REQ-grouped 6-stage pipeline heatmap...</div>
     </div>
   </div>
 
@@ -565,6 +633,7 @@ function renderDashboardHtml() {
       </select>
     </div>
 
+    <div id="graphScopeNotice" class="scope-notice"></div>
     <div id="graphCanvasContainer">
       <svg id="graphSvg" class="graph-svg"></svg>
       
@@ -591,11 +660,12 @@ function renderDashboardHtml() {
         <button class="tool-btn" onclick="resetZoom()" title="Reset Zoom to 100%">🔄</button>
       </div>
 
+      <!-- World Top-Tier Rich Hover Popover Card -->
       <div id="popoverCard" class="popover-card">
+        <div id="popoverBadge" class="popover-badge">--</div>
         <div id="popoverTitle" class="popover-title">--</div>
-        <div id="popoverType" style="color:#94a3b8; margin-bottom:4px;">--</div>
-        <div id="popoverStatus" style="font-weight:bold; margin-bottom:8px;">--</div>
-        <div id="popoverStats" style="color:#cbd5e1; font-size:11px;">--</div>
+        <div id="popoverSection1" class="popover-section"></div>
+        <div id="popoverSection2" class="popover-section"></div>
       </div>
     </div>
     <div class="legend">
@@ -645,6 +715,7 @@ function renderDashboardHtml() {
     }
 
     let allSpecs = [];
+    let allFiles = [];
     let graphData = null;
     let heatmapData = null;
     let currentZoom = null;
@@ -652,14 +723,73 @@ function renderDashboardHtml() {
     let traversalHistory = [];
     let selectedRootNodeId = 'A-SPEC-219';
 
+    // Specs excluded from both axes get their own surface. Previously 47 documents were invisible
+    // on every tab while still sitting in the headline denominator, which read as 0% coverage.
+    // @implements A-SPEC-219.1 — two populations, two destinations. Summing them is what misled:
+    // "49" read as "49 to clean up" while 23 of them will never become specs.
+    const SPEC_KINDS_UI = ['REQ', 'H-SPEC', 'A-SPEC', 'C-SPEC', 'T-SPEC'];
+    const kindOfId = (id) => (String(id).match(/^([A-Za-z-]+?)-\d/) || [null, 'UNKNOWN'])[1];
+
+    function renderUnmappedGrid(specs) {
+      const outside = specs.filter(s => s.legacyStatus || SPEC_KINDS_UI.indexOf(kindOfId(s.id)) === -1);
+      renderDocGroup(
+        document.getElementById('unmappedGrid'),
+        outside.filter(s => SPEC_KINDS_UI.indexOf(kindOfId(s.id)) !== -1),
+        'Every spec uses the canonical status vocabulary.',
+      );
+      // @implements A-SPEC-223 — an absent category is not explained. T-SPEC-219.1 asked for this
+      // as a boundary case and it was never implemented; the store is now empty of such documents,
+      // so the banner would describe something that does not exist.
+      const nonSpec = outside.filter(s => SPEC_KINDS_UI.indexOf(kindOfId(s.id)) === -1);
+      const section = document.getElementById('nonSpecSection');
+      if (section) section.style.display = nonSpec.length > 0 ? 'block' : 'none';
+      renderDocGroup(document.getElementById('nonSpecGrid'), nonSpec, '');
+    }
+
+    function renderDocGroup(container, rows, emptyMessage) {
+      if (!container) return;
+      const legacy = rows;
+      if (legacy.length === 0) {
+        container.innerHTML = '<div style="color:#94a3b8; font-size:14px;">' + emptyMessage + '</div>';
+        return;
+      }
+      const byKind = new Map();
+      legacy.forEach(s => {
+        const kind = (s.id.match(/^([A-Za-z-]+?)-\d/) || [null, 'UNKNOWN'])[1];
+        if (!byKind.has(kind)) byKind.set(kind, []);
+        byKind.get(kind).push(s);
+      });
+      let html = '';
+      byKind.forEach((items, kind) => {
+        const statuses = {};
+        items.forEach(s => { statuses[s.status] = (statuses[s.status] || 0) + 1; });
+        const statusSummary = Object.keys(statuses).map(k => escapeHtml(k) + ' × ' + statuses[k]).join(' · ');
+        html += '<div class="req-card" style="margin-bottom:20px;">'
+          + '<div class="req-header" onclick="toggleAccordion(\'legacy-body-' + escapeHtml(kind) + '\')">'
+          + '<div class="req-title-group"><span class="req-id-badge">' + escapeHtml(kind) + '</span>'
+          + '<span class="req-title">' + items.length + ' unmapped document' + (items.length === 1 ? '' : 's') + '</span>'
+          + '<span class="neighbor-rel badge-unmeasured">' + statusSummary + '</span></div>'
+          + '<button class="expand-btn">▶ Expand</button></div>'
+          + '<div class="accordion-body open" id="legacy-body-' + escapeHtml(kind) + '">'
+          + items.map(s =>
+              '<div class="tree-row tree-row-file"><div class="tree-label">🏷️ <strong>' + escapeHtml(s.id) + '</strong>: ' + escapeHtml(s.title || '') + '</div>'
+              + '<div><span class="neighbor-rel badge-unmeasured" title="Outside draft|review|approved|outdated">status: ' + escapeHtml(String(s.status)) + '</span></div></div>'
+            ).join('')
+          + '</div></div>';
+      });
+      container.innerHTML = html;
+    }
+
     function switchTab(tab) {
       document.getElementById('tabRtmBtn').classList.toggle('active', tab === 'rtm');
       document.getElementById('tabHeatmapBtn').classList.toggle('active', tab === 'heatmap');
       document.getElementById('tabGraphBtn').classList.toggle('active', tab === 'graph');
+      document.getElementById('tabLegacyBtn').classList.toggle('active', tab === 'legacy');
 
       document.getElementById('rtmTab').style.display = tab === 'rtm' ? 'block' : 'none';
       document.getElementById('heatmapTab').style.display = tab === 'heatmap' ? 'block' : 'none';
       document.getElementById('graphTab').style.display = tab === 'graph' ? 'block' : 'none';
+      document.getElementById('legacyTab').style.display = tab === 'legacy' ? 'block' : 'none';
 
       if (tab === 'graph' && !graphData) {
         loadGraphCanvas();
@@ -674,8 +804,21 @@ function renderDashboardHtml() {
         const data = await res.json();
         if (data.ok) {
           allSpecs = data.specs;
-          document.getElementById('coverageStat').innerText = data.coveragePct + '% (' + data.coveredCount + '/' + data.totalCount + ')';
-          renderReqAccordionMatrix(allSpecs);
+          allFiles = data.files || [];
+          const ap = data.approval || { pct: 0, approved: 0, total: 0 };
+          const im = data.implementation || { pct: 0, anchored: 0, total: 0 };
+          const um = data.unmapped || { count: 0, byKind: {} };
+          const ns = data.nonSpec || { count: 0, byKind: {} };
+          document.getElementById('approvalStat').innerText = ap.pct + '% (' + ap.approved + '/' + ap.total + ')';
+          document.getElementById('implStat').innerText = im.pct + '% (' + im.anchored + '/' + im.total + ')';
+          const umKinds = Object.keys(um.byKind || {}).map(k => k + ' ' + um.byKind[k]).join(' · ');
+          const nsKinds = Object.keys(ns.byKind || {}).map(k => k + ' ' + ns.byKind[k]).join(' · ');
+          document.getElementById('unmappedStat').innerText = um.count + ' to clean up' + (umKinds ? ' (' + umKinds + ')' : '');
+          const nsChip = document.getElementById('nonSpecChip');
+          if (nsChip) nsChip.style.display = ns.count > 0 ? 'inline-flex' : 'none';
+          document.getElementById('nonSpecStat').innerText = ns.count + ' not specs' + (nsKinds ? ' (' + nsKinds + ')' : '');
+          renderUnmappedGrid(data.specs || []);
+          renderReqQuantitativeGrid(allSpecs, allFiles);
         }
       } catch (err) {
         document.getElementById('specGrid').innerText = 'Failed to load specs: ' + escapeHtml(err.message || err);
@@ -701,76 +844,148 @@ function renderDashboardHtml() {
       }
     }
 
-    // World Top-Tier Truthful Real-Time 3-Tier Multi-Lens Pipeline Heatmap Renderer
+    // Render one pipeline stage cell. A stage with no artifact renders as an inert “missing” cell
+    // instead of a clickable id, so an empty stage can never be mistaken for a traced one.
+    function stageCell(cls, icon, label, jumpId, withArrow) {
+      const arrow = withArrow ? '<span class="arrow-sep">➔</span> ' : '';
+      if (!label) {
+        return '<td class="' + cls + ' stage-missing" title="No artifact for this stage">' + arrow + '— missing</td>';
+      }
+      const onclick = jumpId ? ' onclick="focusSpecInGraph(\'' + escapeHtml(String(jumpId)) + '\')"' : '';
+      return '<td class="' + cls + '"' + onclick + '>' + arrow + icon + ' ' + escapeHtml(String(label)) + '</td>';
+    }
+    // REQ-Grouped Structured 6-Stage Pipeline Heatmap Matrix Renderer
     function render6StagePipelineMatrix(data) {
       const container = document.getElementById('heatmapContainer');
-      const pipelines = data.pipelines || [];
+      const rawPipelines = data.pipelines || [];
       const lens = document.getElementById('lensSelect').value || 'lens1';
+      const statusFilter = document.getElementById('pipelineFilterSelect').value || 'all';
 
-      if (pipelines.length === 0) {
+      if (rawPipelines.length === 0) {
         container.innerHTML = '<div style="color:#94a3b8; font-size:14px;">No pipeline trace chains found.</div>';
         return;
       }
 
-      let extraHeader = 'Status';
-      if (lens === 'lens2') extraHeader = '🛡️ Live Security Findings';
-      else if (lens === 'lens3') extraHeader = '🧪 Real AST Mutants Score';
-
-      let html = \`
-        <table class="pipeline-table">
-          <thead>
-            <tr>
-              <th>Stage 1: REQ Business</th>
-              <th>Stage 2: H-SPEC Functional</th>
-              <th>Stage 3: A-SPEC Architecture</th>
-              <th>Stage 4: T-SPEC Verification</th>
-              <th>Stage 5: Source Code File</th>
-              <th>Stage 6: AST / CPG Symbol</th>
-              <th>\${extraHeader}</th>
-            </tr>
-          </thead>
-          <tbody>
-      \`;
+      // Filter pipelines based on user status selection
+      let pipelines = rawPipelines;
+      if (statusFilter === 'uncovered') {
+        pipelines = rawPipelines.filter(p => p.status !== 'COVERED');
+      } else if (statusFilter === 'findings') {
+        pipelines = rawPipelines.filter(p => p.findingsCount > 0);
+      }
 
+      // Group pipelines by reqId
+      const groupedMap = new Map();
       pipelines.forEach(p => {
-        let statusBadge = \`<span class="neighbor-rel \${p.status === 'COVERED' ? 'badge-covered' : 'badge-uncovered'}">\${p.status}</span>\`;
-        
-        if (lens === 'lens2') {
-          if (p.criticalCount > 0) {
-            statusBadge = \`<span class="neighbor-rel badge-uncovered">🔴 \${p.criticalCount} Critical Finding\${p.criticalCount > 1 ? 's' : ''}</span>\`;
-          } else if (p.findingsCount > 0) {
-            statusBadge = \`<span class="neighbor-rel" style="background:#d97706; color:#fff;">🟡 \${p.findingsCount} Open Finding\${p.findingsCount > 1 ? 's' : ''}</span>\`;
-          } else {
-            statusBadge = '<span class="neighbor-rel badge-covered">🟢 0 Open Findings</span>';
-          }
-        } else if (lens === 'lens3') {
-          const mutantCount = p.mutantCount || 0;
-          if (mutantCount > 0) {
-            statusBadge = \`<span class="neighbor-rel badge-covered">🧪 100% Score (\${mutantCount} Mutants)</span>\`;
-          } else {
-            statusBadge = '<span class="neighbor-rel badge-covered">🧪 100% Score (0 Mutants)</span>';
-          }
+        if (!groupedMap.has(p.reqId)) {
+          groupedMap.set(p.reqId, { reqId: p.reqId, reqTitle: p.reqTitle, items: [] });
         }
+        groupedMap.get(p.reqId).items.push(p);
+      });
+
+      if (groupedMap.size === 0) {
+        const unscanned = statusFilter === 'findings' && data.findingsScanned === false;
+        container.innerHTML = unscanned
+          ? '<div style="color:#fbbf24; font-size:14px; padding:16px; border:1px dashed #64748b; border-radius:8px;">⚪ No findings ledger exists (<code>.ax/ledger/findings.jsonl</code>). This is <strong>not</strong> a clean result — no audit has been run.</div>'
+          : '<div style="color:#94a3b8; font-size:14px; padding:16px;">No pipelines match the selected filter.</div>';
+        return;
+      }
+
+      let extraHeader = 'Status';
+      if (lens === 'lens2') extraHeader = heatmapData && heatmapData.findingsScanned === false ? '🛡️ Security Audit (never scanned)' : '🛡️ Live Security Findings';
+      else if (lens === 'lens3') extraHeader = '🧪 Static AST Mutants (score unmeasured)';
+
+      let html = '';
+
+      groupedMap.forEach((group, reqId) => {
+        const items = group.items;
+        const totalItems = items.length;
+        const coveredItems = items.filter(i => i.status === 'COVERED').length;
+        const isReqHealthy = coveredItems === totalItems;
+
+        const reqStatusBadge = isReqHealthy
+          ? '<span class="neighbor-rel badge-covered">🟢 100% HEALTHY TRACE</span>'
+          : '<span class="neighbor-rel badge-uncovered">🔴 CONTAINS UNCOVERED TRACES</span>';
+
+        html += \`
+          <div class="req-card" style="margin-bottom: 20px;">
+            <div class="req-header" onclick="toggleAccordion('pipe-body-\${escapeHtml(reqId)}')">
+              <div class="req-title-group">
+                <span class="req-id-badge">\${escapeHtml(reqId)}</span>
+                <span class="req-title">\${escapeHtml(group.reqTitle || 'Business Requirement Pipeline')}</span>
+                \${reqStatusBadge}
+              </div>
+              <div style="display: flex; align-items: center; gap: 12px;">
+                <span style="font-size: 12px; color: #94a3b8; font-weight: bold;">\${totalItems} End-to-End Trace Chain\${totalItems > 1 ? 's' : ''}</span>
+                <button class="expand-btn">▶ Expand Pipeline Matrix</button>
+              </div>
+            </div>
+
+            <div class="accordion-body open" id="pipe-body-\${escapeHtml(reqId)}" style="padding:0;">
+              <table class="pipeline-table">
+                <thead>
+                  <tr>
+                    <th>Stage 1: REQ Business</th>
+                    <th>Stage 2: H-SPEC Functional</th>
+                    <th>Stage 3: A-SPEC Architecture</th>
+                    <th>Stage 4: T-SPEC Verification</th>
+                    <th>Stage 5: Source Code File</th>
+                    <th>Stage 6: AST / CPG Symbol</th>
+                    <th>\${extraHeader}</th>
+                  </tr>
+                </thead>
+                <tbody>
+        \`;
+
+        items.forEach(p => {
+          const missing = p.missingStages || [];
+          let statusBadge = missing.length === 0
+            ? '<span class="neighbor-rel badge-covered">COVERED (6/6)</span>'
+            : \`<span class="neighbor-rel badge-uncovered" title="Missing: \${escapeHtml(missing.join(', '))}">UNCOVERED (\${p.stagesComplete}/6)</span>\`;
+
+          if (lens === 'lens2') {
+            if (!p.findingsScanned) {
+              statusBadge = '<span class="neighbor-rel badge-unmeasured" title="No .ax/ledger/findings.jsonl — this chain has never been audited">⚪ Not scanned</span>';
+            } else if (p.criticalCount > 0) {
+              statusBadge = \`<span class="neighbor-rel badge-uncovered">🔴 \${p.criticalCount} Critical Finding\${p.criticalCount > 1 ? 's' : ''}</span>\`;
+            } else if (p.findingsCount > 0) {
+              statusBadge = \`<span class="neighbor-rel" style="background:#d97706; color:#fff;">🟡 \${p.findingsCount} Open Finding\${p.findingsCount > 1 ? 's' : ''}</span>\`;
+            } else {
+              statusBadge = '<span class="neighbor-rel badge-covered">🟢 0 Open Findings</span>';
+            }
+          } else if (lens === 'lens3') {
+            // A score requires running the suite once per mutant; this endpoint only generates them
+            // statically, so it reports the mutant count and says the score is unmeasured.
+            const mutantCount = p.mutantCount || 0;
+            statusBadge = \`<span class="neighbor-rel badge-unmeasured" title="Static generation only — run mutation testing to obtain a score">🧪 \${mutantCount} Mutant\${mutantCount === 1 ? '' : 's'} · Score not measured</span>\`;
+          }
+
+          html += \`
+            <tr class="pipeline-row">
+              \${stageCell('stage-req', '🟣', p.reqId, p.reqId, false)}
+              \${stageCell('stage-hspec', '🟣', p.hspecId, p.hspecId, true)}
+              \${stageCell('stage-aspec', '🔵', p.aspecId, p.aspecId, true)}
+              \${stageCell('stage-tspec', '🔷', p.tspecId, p.tspecId, true)}
+              \${stageCell('stage-file', '📄', p.fileId ? (p.fileId.split('/').pop() || p.fileId) : null, p.fileId, true)}
+              \${stageCell('stage-symbol', '⚡', p.symbolId, p.fileId && p.symbolId ? p.fileId + '#' + p.symbolId : null, true)}
+              <td>\${statusBadge}</td>
+            </tr>
+          \`;
+        });
 
         html += \`
-          <tr class="pipeline-row">
-            <td class="stage-req" onclick="focusSpecInGraph('\${escapeHtml(p.reqId)}')">🟣 \${escapeHtml(p.reqId)}</td>
-            <td class="stage-hspec" onclick="focusSpecInGraph('\${escapeHtml(p.hspecId)}')"><span class="arrow-sep">➔</span> 🟣 \${escapeHtml(p.hspecId)}</td>
-            <td class="stage-aspec" onclick="focusSpecInGraph('\${escapeHtml(p.aspecId)}')"><span class="arrow-sep">➔</span> 🔵 \${escapeHtml(p.aspecId)}</td>
-            <td class="stage-tspec" onclick="focusSpecInGraph('\${escapeHtml(p.tspecId)}')"><span class="arrow-sep">➔</span> 🔷 \${escapeHtml(p.tspecId)}</td>
-            <td class="stage-file" onclick="focusSpecInGraph('\${escapeHtml(p.fileId)}')"><span class="arrow-sep">➔</span> 📄 \${escapeHtml(p.fileId.split('/').pop() || p.fileId)}</td>
-            <td class="stage-symbol" onclick="focusSpecInGraph('\${escapeHtml(p.fileId + '#' + p.symbolId)}')"><span class="arrow-sep">➔</span> ⚡ \${escapeHtml(p.symbolId)}</td>
-            <td>\${statusBadge}</td>
-          </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
         \`;
       });
 
-      html += '</tbody></table>';
       container.innerHTML = html;
     }
 
-    // World Top-Tier REQ Hierarchical Drill-Down Accordion Renderer
-    function renderReqAccordionMatrix(specs) {
+    // World Top-Tier Quantitative REQ-Centric RTM Traceability Matrix Grid Renderer
+    function renderReqQuantitativeGrid(specs, files) {
       const container = document.getElementById('specGrid');
       const reqList = specs.filter(s => s.id.startsWith('REQ-'));
 
@@ -781,13 +996,33 @@ function renderDashboardHtml() {
 
       container.innerHTML = reqList.map(req => {
         const numPart = req.id.replace('REQ-', '').split('.')[0];
-        const hspecs = specs.filter(s => s.id.startsWith('H-SPEC-' + numPart));
-        const aspecs = specs.filter(s => s.id.startsWith('A-SPEC-' + numPart));
-        const tspecs = specs.filter(s => s.id.startsWith('T-SPEC-' + numPart));
+        const belongs = (id, kind) => id === kind + '-' + numPart || id.startsWith(kind + '-' + numPart + '.');
+        const hspecs = specs.filter(s => belongs(s.id, 'H-SPEC'));
+        const aspecs = specs.filter(s => belongs(s.id, 'A-SPEC'));
+        const tspecs = specs.filter(s => belongs(s.id, 'T-SPEC'));
+
+        const matchingFiles = files.filter(f =>
+          f.implementsSpecs.some(specId =>
+            specId === req.id || belongs(specId, 'H-SPEC') || belongs(specId, 'A-SPEC') || belongs(specId, 'T-SPEC')
+          )
+        );
+
+        let totalSymbols = 0;
+        let totalCallEdges = 0;
+        matchingFiles.forEach(f => {
+          totalSymbols += (f.symbols || []).length;
+          totalCallEdges += (f.edges || []).filter(e => e.rel === 'calls').length;
+        });
 
-        const totalDownstream = hspecs.length + aspecs.length + tspecs.length;
-        const coveredDownstream = [...hspecs, ...aspecs, ...tspecs].filter(s => s.covered).length;
-        const progressPct = totalDownstream > 0 ? Math.round((coveredDownstream / totalDownstream) * 100) : (req.covered ? 100 : 0);
+        // Every stage must be backed by a real artifact. Counting only specs would call a REQ with
+        // no code "6-Stage Complete", which is the claim this grid exists to verify.
+        const stagePresent = [true, hspecs.length > 0, aspecs.length > 0, tspecs.length > 0, matchingFiles.length > 0, totalSymbols > 0];
+        const stageNames = ['REQ', 'H-SPEC', 'A-SPEC', 'T-SPEC', 'File', 'AST Symbol'];
+        const missingStages = stageNames.filter((_, i) => !stagePresent[i]);
+        const stagesComplete = stagePresent.filter(Boolean).length;
+        const healthBadge = missingStages.length === 0
+          ? '<span class="neighbor-rel badge-covered" style="font-size:11px; font-weight:800;">🟢 Fully Traced (6/6 Stages)</span>'
+          : '<span class="neighbor-rel badge-uncovered" style="font-size:11px; font-weight:800;" title="Missing: ' + escapeHtml(missingStages.join(', ')) + '">🟡 ' + stagesComplete + '/6 Stages · missing ' + escapeHtml(missingStages.join(', ')) + '</span>';
 
         return \`
           <div class="req-card" id="card-\${escapeHtml(req.id)}">
@@ -795,15 +1030,18 @@ function renderDashboardHtml() {
               <div class="req-title-group">
                 <span class="req-id-badge">\${escapeHtml(req.id)}</span>
                 <span class="req-title">\${escapeHtml(req.title || 'Business Requirement')}</span>
+                \${healthBadge}
               </div>
-              <div style="display: flex; align-items: center; gap: 12px;">
-                <div style="font-size: 11px; color: #94a3b8;">
-                  <div class="req-progress-bar">
-                    <div class="req-progress-fill" style="width: \${progressPct}%;"></div>
-                  </div>
-                  <strong>\${progressPct}% Covered</strong> (\${coveredDownstream}/\${totalDownstream})
+              
+              <div style="display: flex; align-items: center; gap: 14px;">
+                <div class="quant-grid">
+                  <span class="quant-badge quant-hspec" title="Functional Specs Count">🟣 H: \${hspecs.length}</span>
+                  <span class="quant-badge quant-aspec" title="Architecture Specs Count">🔵 A: \${aspecs.length}</span>
+                  <span class="quant-badge quant-tspec" title="Test Specs Count">🔷 T: \${tspecs.length}</span>
+                  <span class="quant-badge quant-file" title="Code Files Linked">📄 File: \${matchingFiles.length}</span>
+                  <span class="quant-badge quant-symbol" title="AST Symbols Mapped">⚡ AST: \${totalSymbols}</span>
                 </div>
-                <button class="expand-btn">▶ Expand Downstream Tree</button>
+                <button class="expand-btn">▶ Expand Matrix Tree</button>
                 <button class="view-graph-btn" onclick="event.stopPropagation(); focusSpecInGraph('\${escapeHtml(req.id)}')">🕸️ View in Graph</button>
               </div>
             </div>
@@ -838,6 +1076,29 @@ function renderDashboardHtml() {
                   </div>
                 </div>
               \`).join('')}
+
+              \${matchingFiles.map(f => {
+                const fId = f.sourcePath || f.path;
+                const symList = f.symbols || [];
+                return \`
+                  <div class="tree-row tree-row-file">
+                    <div class="tree-label">📄 <strong>\${escapeHtml(fId)}</strong> (\${symList.length} AST Symbols)</div>
+                    <div>
+                      <span class="neighbor-rel badge-covered" style="margin-right:8px;">LINKED</span>
+                      <button class="jump-btn" onclick="focusSpecInGraph('\${escapeHtml(fId)}')">🕸️ View File</button>
+                    </div>
+                  </div>
+                  \${symList.map(sym => \`
+                    <div class="tree-row tree-row-symbol">
+                      <div class="tree-label">⚡ <strong>\${escapeHtml(sym.name)}</strong> (Line \${sym.startLine || 1})</div>
+                      <div>
+                        <span class="neighbor-rel quant-symbol" style="margin-right:8px;">AST SYMBOL</span>
+                        <button class="jump-btn" onclick="focusSpecInGraph('\${escapeHtml(fId + '#' + sym.name)}')">⚡ View Symbol</button>
+                      </div>
+                    </div>
+                  \`).join('')}
+                \`;
+              }).join('')}
             </div>
           </div>
         \`;
@@ -862,7 +1123,7 @@ function renderDashboardHtml() {
     document.getElementById('searchInput').addEventListener('input', (e) => {
       const q = e.target.value.toLowerCase();
       const filtered = allSpecs.filter(s => s.id.toLowerCase().includes(q) || (s.title && s.title.toLowerCase().includes(q)));
-      renderReqAccordionMatrix(filtered);
+      renderReqQuantitativeGrid(filtered, allFiles);
     });
 
     async function loadGraphCanvas() {
@@ -909,6 +1170,22 @@ function renderDashboardHtml() {
       });
     }
 
+    function renderGraphScopeNotice(shownNodes, shownEdges, scope, cap) {
+      const el = document.getElementById('graphScopeNotice');
+      if (!el || !graphData) return;
+      const totalNodes = (graphData.nodes || []).length;
+      const totalEdges = (graphData.edges || []).length;
+      const truncated = shownNodes < totalNodes;
+      const pct = totalNodes > 0 ? ((shownNodes / totalNodes) * 100).toFixed(1) : '0.0';
+      const how = scope === 'full'
+        ? 'first ' + cap + ' nodes of the collection'
+        : 'bounded BFS from the selected root, capped at ' + cap + ' nodes';
+      el.className = truncated ? 'scope-notice scope-notice-truncated' : 'scope-notice';
+      el.innerHTML = truncated
+        ? '<strong>Showing ' + shownNodes + ' of ' + totalNodes + ' nodes</strong> (' + pct + '%) and ' + shownEdges + ' of ' + totalEdges + ' edges — ' + how + '. Raise <em>Max Node Cap</em> to widen the view.'
+        : '<strong>Showing all ' + totalNodes + ' nodes</strong> and ' + shownEdges + ' of ' + totalEdges + ' edges.';
+    }
+
     function filterGraphByScope() {
       if (!graphData) return;
       const scope = document.getElementById('scopeFilter').value;
@@ -959,6 +1236,10 @@ function renderDashboardHtml() {
         filteredEdges = graphData.edges.filter(e => bSet.has(getIdStr(e.from)) && bSet.has(getIdStr(e.to)));
       }
 
+      // The canvas draws a bounded subgraph, never the whole collection. Say so with numbers —
+      // an unlabelled 30-node view of a 3543-node graph reads as "this is the system".
+      renderGraphScopeNotice(filteredNodes.length, filteredEdges.length, scope, maxNodeCap);
+
       const engine = document.getElementById('layoutEngine').value;
       if (engine === 'neo4j') {
         renderNeo4jBloomDomainGalaxy(filteredNodes, filteredEdges);
@@ -1091,7 +1372,9 @@ function renderDashboardHtml() {
         .on('click', (event, d) => {
           event.stopPropagation();
           selectAndTraverseNode(getIdStr(d.target));
-        });
+        })
+        .on('mouseenter', (event, d) => showEdgePopover(event, d))
+        .on('mouseleave', hidePopover);
 
       const nodeGroups = svgG.append('g')
         .selectAll('g')
@@ -1139,7 +1422,7 @@ function renderDashboardHtml() {
 
       nodeGroups
         .on('click', (event, d) => selectAndTraverseNode(d.id))
-        .on('mouseenter', (event, d) => showPopover(event, d, validEdges))
+        .on('mouseenter', (event, d) => showNodePopover(event, d, validEdges))
         .on('mouseleave', hidePopover);
 
       simulation.on('tick', () => {
@@ -1264,6 +1547,8 @@ function renderDashboardHtml() {
           evt.stopPropagation();
           selectAndTraverseNode(d.to);
         });
+        pathEl.addEventListener('mouseenter', (evt) => showEdgePopover(evt, d));
+        pathEl.addEventListener('mouseleave', hidePopover);
 
         edgeGroup.node().appendChild(pathEl);
       });
@@ -1301,7 +1586,7 @@ function renderDashboardHtml() {
 
       nodeGroups
         .on('click', (event, d) => selectAndTraverseNode(d.id))
-        .on('mouseenter', (event, d) => showPopover(event, d, validEdges))
+        .on('mouseenter', (event, d) => showNodePopover(event, d, validEdges))
         .on('mouseleave', hidePopover);
     }
 
@@ -1416,6 +1701,8 @@ function renderDashboardHtml() {
           evt.stopPropagation();
           selectAndTraverseNode(d.to);
         });
+        pathEl.addEventListener('mouseenter', (evt) => showEdgePopover(evt, d));
+        pathEl.addEventListener('mouseleave', hidePopover);
 
         edgeGroup.node().appendChild(pathEl);
       });
@@ -1451,7 +1738,7 @@ function renderDashboardHtml() {
 
       nodeGroups
         .on('click', (event, d) => selectAndTraverseNode(d.id))
-        .on('mouseenter', (event, d) => showPopover(event, d, validEdges))
+        .on('mouseenter', (event, d) => showNodePopover(event, d, validEdges))
         .on('mouseleave', hidePopover);
     }
 
@@ -1566,6 +1853,8 @@ function renderDashboardHtml() {
           evt.stopPropagation();
           selectAndTraverseNode(d.to);
         });
+        pathEl.addEventListener('mouseenter', (evt) => showEdgePopover(evt, d));
+        pathEl.addEventListener('mouseleave', hidePopover);
 
         edgeGroup.node().appendChild(pathEl);
       });
@@ -1600,7 +1889,7 @@ function renderDashboardHtml() {
 
       nodeGroups
         .on('click', (event, d) => selectAndTraverseNode(d.id))
-        .on('mouseenter', (event, d) => showPopover(event, d, validEdges))
+        .on('mouseenter', (event, d) => showNodePopover(event, d, validEdges))
         .on('mouseleave', hidePopover);
     }
 
@@ -1735,15 +2024,86 @@ function renderDashboardHtml() {
       container.innerHTML = html;
     }
 
-    function showPopover(event, node, edges) {
+    // World Top-Tier High-Density Rich Node Tooltip Hover Popover Card
+    function showNodePopover(event, node, edges) {
       const card = document.getElementById('popoverCard');
+      const badge = document.getElementById('popoverBadge');
+      const title = document.getElementById('popoverTitle');
+      const sec1 = document.getElementById('popoverSection1');
+      const sec2 = document.getElementById('popoverSection2');
+
       const nodeIdStr = getIdStr(node.id || node);
-      document.getElementById('popoverTitle').innerText = nodeIdStr;
-      document.getElementById('popoverType').innerText = 'Type: ' + (node.kind || node.type);
-      document.getElementById('popoverStatus').innerText = 'Status: ' + (node.covered ? 'COVERED' : 'ACTIVE / UNCOVERED');
-      
-      const degrees = edges.filter(e => getIdStr(e.from || e.source) === nodeIdStr || getIdStr(e.to || e.target) === nodeIdStr).length;
-      document.getElementById('popoverStats').innerText = 'Connected Edges: ' + degrees + ' relationships';
+      const cat = getNodeCategory(nodeIdStr);
+
+      let badgeBg = '#3b82f6';
+      let badgeLabel = 'BLUEPRINT SPEC';
+      if (cat === 'REQ') { badgeBg = '#ec4899'; badgeLabel = '🟣 REQ BUSINESS INTENT'; }
+      else if (cat === 'H-SPEC') { badgeBg = '#8b5cf6'; badgeLabel = '🟣 H-SPEC FUNCTIONAL'; }
+      else if (cat === 'A-SPEC') { badgeBg = '#3b82f6'; badgeLabel = '🔵 A-SPEC ARCHITECTURE'; }
+      else if (cat === 'T-SPEC') { badgeBg = '#06b6d4'; badgeLabel = '🔷 T-SPEC VERIFICATION'; }
+      else if (cat === 'SYMBOL') { badgeBg = '#f59e0b'; badgeLabel = '⚡ AST CPG SYMBOL'; }
+      else { badgeBg = '#10b981'; badgeLabel = '📄 SOURCE CODE FILE'; }
+
+      badge.style.background = badgeBg;
+      badge.innerText = badgeLabel;
+
+      title.innerText = nodeIdStr;
+
+      const inEdges = edges.filter(e => getIdStr(e.to || e.target) === nodeIdStr);
+      const outEdges = edges.filter(e => getIdStr(e.from || e.source) === nodeIdStr);
+      const totalDegree = inEdges.length + outEdges.length;
+
+      sec1.innerHTML = \`
+        <div><span class="popover-label">Full Label / Title:</span> <span class="popover-value">\${escapeHtml(node.label || nodeIdStr)}</span></div>
+        <div><span class="popover-label">Status & Audit:</span> <span class="popover-value" style="font-weight:bold; color:\${node.covered ? '#34d399' : '#f87171'}">\${node.covered ? 'APPROVED / COVERED' : 'ACTIVE'}</span></div>
+      \`;
+
+      sec2.innerHTML = \`
+        <div><span class="popover-label">Degree Centrality Rank:</span> <span class="popover-value" style="font-weight:bold; color:#fbbf24;">\${totalDegree} Relationships</span></div>
+        <div><span class="popover-label">Inbound Parents (In-Degree):</span> <span class="popover-value">\${inEdges.length} edges</span></div>
+        <div><span class="popover-label">Outbound Children (Out-Degree):</span> <span class="popover-value">\${outEdges.length} edges</span></div>
+        \${cat === 'SYMBOL' ? '<div><span class="popover-label">Symbol Kind:</span> <span class="popover-value" style="color:#f59e0b;">Function / Method AST Node</span></div>' : ''}
+        \${cat === 'FILE' ? '<div><span class="popover-label">File Path:</span> <span class="popover-value" style="color:#10b981;">' + escapeHtml(nodeIdStr) + '</span></div>' : ''}
+      \`;
+
+      card.classList.add('active');
+    }
+
+    // World Top-Tier High-Density Rich Edge Tooltip Hover Popover Card
+    function showEdgePopover(event, edge) {
+      const card = document.getElementById('popoverCard');
+      const badge = document.getElementById('popoverBadge');
+      const title = document.getElementById('popoverTitle');
+      const sec1 = document.getElementById('popoverSection1');
+      const sec2 = document.getElementById('popoverSection2');
+
+      const src = getIdStr(edge.from || edge.source);
+      const dst = getIdStr(edge.to || edge.target);
+      const rel = edge.rel || 'edge';
+
+      let badgeBg = '#3b82f6';
+      let relExplanation = '';
+      if (rel === 'implements') { badgeBg = '#3b82f6'; relExplanation = 'Code/File implements Architecture Specification'; }
+      else if (rel === 'verifies') { badgeBg = '#06b6d4'; relExplanation = 'Test Spec verifies Code/Architecture Specification'; }
+      else if (rel === 'depends_on') { badgeBg = '#8b5cf6'; relExplanation = 'Specification depends on parent Specification'; }
+      else if (rel === 'contains') { badgeBg = '#10b981'; relExplanation = 'Source Code File contains AST Function Symbol'; }
+      else if (rel === 'calls') { badgeBg = '#f59e0b'; relExplanation = 'AST Symbol calls destination Function Symbol (CPG Dataflow)'; }
+
+      badge.style.background = badgeBg;
+      badge.innerText = '➔ EDGE RELATION: ' + rel.toUpperCase();
+
+      title.innerText = src + ' ➔ ' + dst;
+
+      sec1.innerHTML = \`
+        <div><span class="popover-label">Edge Relation Type:</span> <span class="popover-value" style="font-weight:bold; color:#fbbf24;">\${rel}</span></div>
+        <div><span class="popover-label">Causal Explanation:</span> <span class="popover-value" style="color:#38bdf8;">\${relExplanation}</span></div>
+      \`;
+
+      sec2.innerHTML = \`
+        <div><span class="popover-label">Source Node (From):</span> <span class="popover-value">\${escapeHtml(src)}</span></div>
+        <div><span class="popover-label">Target Node (To):</span> <span class="popover-value">\${escapeHtml(dst)}</span></div>
+      \`;
+
       card.classList.add('active');
     }
 
@@ -1756,3 +2116,163 @@ function renderDashboardHtml() {
 </body>
 </html>`;
 }
+/**
+ * The canonical status vocabulary. A document outside it (`Approved`, `Proposed`, `Verified`,
+ * `Completed`, `Pending` — the C-SPEC/JOB corpus) has not been scored against these gates at all,
+ * and scoring it 0 would report an unmapped vocabulary as an uncovered spec.
+ */
+const CANONICAL_STATUSES = new Set(['draft', 'review', 'approved', 'outdated']);
+function isCanonicalStatus(status) {
+    return typeof status === 'string' && CANONICAL_STATUSES.has(status);
+}
+/**
+ * The kinds that are governed specs at all.
+ *
+ * @implements A-SPEC-219.1
+ * Held here rather than imported from SPEC_TYPES because REQ is a spec kind that SPEC_TYPES does
+ * list — the distinction this set draws is "document in the spec store that the pipeline governs"
+ * versus "document that lives there but never will", and JOB is the whole of the second group.
+ */
+exports.SPEC_KINDS = new Set(['REQ', 'H-SPEC', 'A-SPEC', 'C-SPEC', 'T-SPEC']);
+/**
+ * Drop retired documents before anything reads the corpus.
+ *
+ * @implements A-SPEC-222.2
+ * A-SPEC-222.1 excluded `outdated` from `isGoverned` and claimed every other check would follow.
+ * `tspec-mirror.test.ts` refuted that, and the spec was corrected to name one known site. Measured
+ * 2026-08-22 it was three: /api/rtm exposed 132 retired ids, the heatmap 108, the graph 132 — a
+ * screen still pointing at documents retired the day before. Stated once here so the three sites
+ * cannot drift, with the suite enumerating the endpoints so a fourth cannot be added silently.
+ */
+function activeSpecs(specs) {
+    return specs.filter((s) => s.status !== 'outdated');
+}
+/** `A-SPEC-219.1` -> `A-SPEC`, `REQ-021` -> `REQ`. */
+function specKindOf(id) {
+    const m = /^([A-Za-z-]+?)-\d/.exec(String(id ?? ''));
+    return m ? m[1] : 'UNKNOWN';
+}
+const STAGE_NAMES = ['REQ', 'H-SPEC', 'A-SPEC', 'T-SPEC', 'File', 'AST Symbol'];
+/**
+ * Match a spec id against a REQ's number exactly, so `REQ-021` cannot claim `A-SPEC-0219`.
+ * Accepts the plain number and dotted sub-specs (`A-SPEC-219.1`).
+ */
+function specBelongsToReq(specId, kind, numPart) {
+    return specId === `${kind}-${numPart}` || specId.startsWith(`${kind}-${numPart}.`);
+}
+/**
+ * Attribute a finding to a REQ only on an EXACT spec reference. `specRef.includes(numPart)` let
+ * REQ-021 claim a finding filed against A-SPEC-0219; substring containment is not evidence.
+ */
+function findingBelongsToReq(finding, reqId, numPart) {
+    const ref = typeof finding?.specRef === 'string' ? finding.specRef : null;
+    if (!ref)
+        return false;
+    return (ref === reqId ||
+        specBelongsToReq(ref, 'H-SPEC', numPart) ||
+        specBelongsToReq(ref, 'A-SPEC', numPart) ||
+        specBelongsToReq(ref, 'T-SPEC', numPart));
+}
+function fileBelongsToReq(implementsSpecs, reqId, numPart) {
+    return implementsSpecs.some((specId) => specId === reqId ||
+        specBelongsToReq(specId, 'H-SPEC', numPart) ||
+        specBelongsToReq(specId, 'A-SPEC', numPart) ||
+        specBelongsToReq(specId, 'T-SPEC', numPart));
+}
+function makeRow(base) {
+    const stages = [
+        base.reqId,
+        base.hspecId ?? null,
+        base.aspecId ?? null,
+        base.tspecId ?? null,
+        base.fileId ?? null,
+        base.symbolId ?? null,
+    ];
+    const missingStages = STAGE_NAMES.filter((_, i) => !stages[i]);
+    const stagesComplete = stages.filter(Boolean).length;
+    return {
+        reqId: base.reqId,
+        reqTitle: base.reqTitle,
+        hspecId: base.hspecId ?? null,
+        aspecId: base.aspecId ?? null,
+        tspecId: base.tspecId ?? null,
+        fileId: base.fileId ?? null,
+        symbolId: base.symbolId ?? null,
+        symbolLine: base.symbolLine ?? null,
+        stagesComplete,
+        missingStages: [...missingStages],
+        status: stagesComplete === STAGE_NAMES.length ? 'COVERED' : 'UNCOVERED',
+        findingsCount: base.findingsCount ?? 0,
+        criticalCount: base.criticalCount ?? 0,
+        findingsScanned: base.findingsScanned ?? false,
+        mutantCount: base.mutantCount ?? 0,
+        mutationScore: null,
+        mutationScoreMeasured: false,
+    };
+}
+/**
+ * Build the 6-stage pipeline matrix from the repository's real specs, scanned files and findings.
+ *
+ * Pure and exported so the truthfulness invariants can be asserted directly, without an HTTP round
+ * trip: no row may name an artifact that the inputs do not contain, and no symbol may be dropped.
+ *
+ * @implements A-SPEC-219
+ */
+function buildPipelineRows(specs, files, allFindings, options) {
+    const findingsScanned = options?.findingsScanned === true;
+    const safeSpecs = Array.isArray(specs) ? specs : [];
+    const safeFiles = Array.isArray(files) ? files : [];
+    const safeFindings = Array.isArray(allFindings) ? allFindings : [];
+    const rows = [];
+    for (const reqItem of safeSpecs.filter((s) => typeof s?.id === 'string' && s.id.startsWith('REQ-'))) {
+        const numPart = reqItem.id.replace('REQ-', '').split('.')[0];
+        const pick = (kind) => safeSpecs.find((s) => specBelongsToReq(String(s?.id ?? ''), kind, numPart))?.id ?? null;
+        const hspecId = pick('H-SPEC');
+        const aspecId = pick('A-SPEC');
+        const tspecId = pick('T-SPEC');
+        const matchingFiles = safeFiles.filter((f) => fileBelongsToReq(f?.implementsSpecs ?? [], reqItem.id, numPart));
+        const specFindings = safeFindings.filter((f) => f?.status === 'open' && findingBelongsToReq(f, reqItem.id, numPart));
+        const common = {
+            reqId: reqItem.id,
+            reqTitle: reqItem.title,
+            hspecId,
+            aspecId,
+            tspecId,
+            findingsScanned,
+        };
+        if (matchingFiles.length === 0) {
+            // No implementing file: stages 5 and 6 stay empty. Nothing is substituted for them.
+            rows.push(makeRow({
+                ...common,
+                findingsCount: specFindings.length,
+                criticalCount: specFindings.filter((f) => f.severity === 'critical').length,
+            }));
+            continue;
+        }
+        for (const f of matchingFiles) {
+            const fileId = f.sourcePath || f.path;
+            const syms = f.symbols || [];
+            const fileMutants = (0, ast_mutation_1.generateAstMutants)([f]);
+            const fileFindings = safeFindings.filter((fd) => fd?.status === 'open' && (fd?.file === fileId || findingBelongsToReq(fd, reqItem.id, numPart)));
+            const findingsCount = fileFindings.length;
+            const criticalCount = fileFindings.filter((fd) => fd.severity === 'critical').length;
+            if (syms.length === 0) {
+                rows.push(makeRow({ ...common, fileId, findingsCount, criticalCount, mutantCount: fileMutants.length }));
+                continue;
+            }
+            // Every symbol gets a row — no truncation, so the matrix count and the drill-down agree.
+            for (const sym of syms) {
+                rows.push(makeRow({
+                    ...common,
+                    fileId,
+                    symbolId: sym.name,
+                    symbolLine: sym.startLine ?? null,
+                    findingsCount,
+                    criticalCount,
+                    mutantCount: fileMutants.filter((m) => m.symbolName === sym.name).length,
+                }));
+            }
+        }
+    }
+    return rows;
+}