@holmes-lab/holmes-kit 0.1.7 → 0.1.9

package/dist/holmes/server/dashboard.js

@@ -0,0 +1,2188 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.startDashboardServer = startDashboardServer;
+exports.isCanonicalStatus = isCanonicalStatus;
+exports.specKindOf = specKindOf;
+exports.buildPipelineRows = buildPipelineRows;
+// @implements A-SPEC-215
+// @implements A-SPEC-219
+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");
+const cpg_scanner_1 = require("../cpg/cpg-scanner");
+const language_parser_1 = require("../cpg/language-parser");
+const findings_1 = require("../review/findings");
+const ast_mutation_1 = require("../cpg/ast-mutation");
+/**
+ * Start a lightweight standalone Node.js HTTP server for interactive dashboard & RTM visualization.
+ *
+ * @implements A-SPEC-215
+ * @implements A-SPEC-219
+ */
+async function startDashboardServer(options) {
+    const root = path.resolve(options.root);
+    const targetPort = options.port !== undefined ? options.port : 8080;
+    const store = new spec_store_1.LocalMarkdownRepository(path.join(root, '.ax', 'specs'));
+    const parser = new language_parser_1.TreeSitterTsParser();
+    const scanner = new cpg_scanner_1.CpgScanner(parser);
+    const activeSockets = new Set();
+    const server = http.createServer(async (req, res) => {
+        // DNS Rebinding / Host Header validation
+        const hostHeader = req.headers.host || '';
+        const hostName = hostHeader.split(':')[0].toLowerCase();
+        if (hostName !== 'localhost' && hostName !== '127.0.0.1' && hostName !== '[::1]') {
+            res.writeHead(403, { 'Content-Type': 'text/plain' });
+            res.end('Forbidden: Host header mismatch');
+            return;
+        }
+        const parsedUrl = new URL(req.url || '/', 'http://localhost').pathname;
+        if (parsedUrl === '/' || parsedUrl === '/index.html') {
+            res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+            res.end(renderDashboardHtml());
+            return;
+        }
+        if (parsedUrl === '/api/rtm') {
+            try {
+                const specs = await store.list();
+                const files = scanner.scan(root);
+                const implementedSpecIds = new Set();
+                for (const f of files) {
+                    for (const s of f.implementsSpecs)
+                        implementedSpecIds.add(s);
+                }
+                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, 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);
+                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;
+                const legacySpecs = enrichedSpecs.filter((s) => s.legacyStatus);
+                const legacyByKind = {};
+                for (const s of legacySpecs) {
+                    const kind = specKindOf(s.id);
+                    legacyByKind[kind] = (legacyByKind[kind] || 0) + 1;
+                }
+                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,
+                };
+                const legacy = { count: legacySpecs.length, byKind: legacyByKind };
+                const coveredCount = enrichedSpecs.filter((s) => s.covered).length;
+                const totalCount = enrichedSpecs.length;
+                const body = JSON.stringify({
+                    ok: true,
+                    totalCount,
+                    coveredCount,
+                    approval,
+                    implementation,
+                    legacy,
+                    specs: enrichedSpecs,
+                    files,
+                });
+                res.writeHead(200, { 'Content-Type': 'application/json' });
+                res.end(body);
+            }
+            catch (err) {
+                if (!res.headersSent) {
+                    res.writeHead(500, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({ ok: false, error: 'Internal Server Error' }));
+                }
+            }
+            return;
+        }
+        // @implements A-SPEC-219
+        if (parsedUrl === '/api/rtm/heatmap') {
+            try {
+                const specs = await store.list();
+                const files = scanner.scan(root);
+                // 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' });
+                res.end(body);
+            }
+            catch (err) {
+                if (!res.headersSent) {
+                    res.writeHead(500, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({ ok: false, error: 'Internal Server Error' }));
+                }
+            }
+            return;
+        }
+        if (parsedUrl === '/api/cpg') {
+            try {
+                const files = scanner.scan(root);
+                const body = JSON.stringify({ ok: true, fileCount: files.length, files });
+                res.writeHead(200, { 'Content-Type': 'application/json' });
+                res.end(body);
+            }
+            catch (err) {
+                if (!res.headersSent) {
+                    res.writeHead(500, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({ ok: false, error: 'Internal Server Error' }));
+                }
+            }
+            return;
+        }
+        // @implements A-SPEC-219
+        if (parsedUrl === '/api/graph') {
+            try {
+                const specs = await store.list();
+                const files = scanner.scan(root);
+                const nodes = [];
+                const edges = [];
+                const nodeMap = new Map();
+                const symbolLookup = new Map();
+                const fileLocalSymbols = new Map();
+                for (const s of specs) {
+                    const specNode = { id: s.id, type: 'spec', kind: s.type, label: `${s.id}: ${s.title || ''}`, covered: s.status === 'approved' };
+                    nodes.push(specNode);
+                    nodeMap.set(s.id, specNode);
+                }
+                // Phase 1: Spec-to-Spec Precise Parent Linkages with Digest Sanitization
+                for (const s of specs) {
+                    const rawDeps = Array.isArray(s.frontmatter?.depends_on)
+                        ? s.frontmatter.depends_on
+                        : typeof s.frontmatter?.depends_on === 'string'
+                            ? [s.frontmatter.depends_on]
+                            : (s.dependsOn || []);
+                    const cleanDeps = rawDeps
+                        .map((d) => String(d).split(':')[0].trim())
+                        .filter(Boolean);
+                    let hasExplicitParent = false;
+                    for (const dep of cleanDeps) {
+                        if (nodeMap.has(dep)) {
+                            edges.push({ from: s.id, to: dep, rel: 'depends_on' });
+                            hasExplicitParent = true;
+                        }
+                    }
+                    if (!hasExplicitParent) {
+                        const numPart = s.id.replace(/^(REQ|H-SPEC|A-SPEC|T-SPEC)-/, '').split('.')[0];
+                        if (s.id.startsWith('A-SPEC-')) {
+                            const fallbackParent = `H-SPEC-${numPart}`;
+                            if (nodeMap.has(fallbackParent))
+                                edges.push({ from: s.id, to: fallbackParent, rel: 'depends_on' });
+                        }
+                        else if (s.id.startsWith('H-SPEC-')) {
+                            const fallbackParent = `REQ-${numPart}`;
+                            if (nodeMap.has(fallbackParent))
+                                edges.push({ from: s.id, to: fallbackParent, rel: 'depends_on' });
+                        }
+                        else if (s.id.startsWith('T-SPEC-')) {
+                            const fallbackParent = `A-SPEC-${numPart}`;
+                            if (nodeMap.has(fallbackParent))
+                                edges.push({ from: s.id, to: fallbackParent, rel: 'verifies' });
+                        }
+                    }
+                }
+                // Phase 2: Register Files and All Top-Level AST Symbols with 100% Implements/Verifies Linkage
+                for (const f of files) {
+                    const fileId = f.sourcePath || f.path;
+                    const isTestFile = fileId.includes('.test.') || fileId.includes('.spec.');
+                    const fileNode = { id: fileId, type: 'code', kind: isTestFile ? 'test_file' : 'file', label: fileId };
+                    nodes.push(fileNode);
+                    nodeMap.set(fileId, fileNode);
+                    const localSymSet = new Set();
+                    fileLocalSymbols.set(fileId, localSymSet);
+                    // File IMPLEMENTS/VERIFIES Spec
+                    for (const specId of f.implementsSpecs) {
+                        const isTSpecAnchor = specId.startsWith('T-SPEC');
+                        const relType = isTSpecAnchor || isTestFile ? 'verifies' : 'implements';
+                        if (nodeMap.has(specId)) {
+                            edges.push({ from: fileId, to: specId, rel: relType });
+                        }
+                    }
+                    // Register AST Symbols and establish File CONTAINS Symbol & Symbol IMPLEMENTS/VERIFIES Spec
+                    for (const sym of f.symbols || []) {
+                        const symId = `${fileId}#${sym.name}`;
+                        const symNode = { id: symId, type: 'code', kind: 'symbol', label: sym.name };
+                        nodes.push(symNode);
+                        nodeMap.set(symId, symNode);
+                        symbolLookup.set(sym.name, symId);
+                        localSymSet.add(sym.name);
+                        // File CONTAINS Symbol
+                        edges.push({ from: fileId, to: symId, rel: 'contains' });
+                        // 100% Precise Symbol IMPLEMENTS/VERIFIES Spec Linkage
+                        for (const specId of f.implementsSpecs) {
+                            const isTSpecAnchor = specId.startsWith('T-SPEC');
+                            const relType = isTSpecAnchor || isTestFile ? 'verifies' : 'implements';
+                            if (nodeMap.has(specId)) {
+                                edges.push({ from: symId, to: specId, rel: relType });
+                            }
+                        }
+                    }
+                }
+                // Phase 3: Resolve Function-to-Function CPG Call Edges with File-Scoped Fallback
+                for (const f of files) {
+                    const fileId = f.sourcePath || f.path;
+                    const localSyms = fileLocalSymbols.get(fileId) || new Set();
+                    for (const e of f.edges || []) {
+                        let fromId = e.from;
+                        let toId = e.to;
+                        if (localSyms.has(fromId)) {
+                            fromId = `${fileId}#${fromId}`;
+                        }
+                        else if (symbolLookup.has(fromId)) {
+                            fromId = symbolLookup.get(fromId);
+                        }
+                        else {
+                            fromId = `${fileId}#${fromId}`;
+                        }
+                        if (localSyms.has(toId)) {
+                            toId = `${fileId}#${toId}`;
+                        }
+                        else if (symbolLookup.has(toId)) {
+                            toId = symbolLookup.get(toId);
+                        }
+                        else {
+                            toId = `${fileId}#${toId}`;
+                        }
+                        if (nodeMap.has(fromId) && nodeMap.has(toId)) {
+                            edges.push({ from: fromId, to: toId, rel: e.rel });
+                        }
+                    }
+                }
+                const body = JSON.stringify({ ok: true, nodeCount: nodes.length, edgeCount: edges.length, nodes, edges });
+                res.writeHead(200, { 'Content-Type': 'application/json' });
+                res.end(body);
+            }
+            catch (err) {
+                if (!res.headersSent) {
+                    res.writeHead(500, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({ ok: false, error: 'Internal Server Error' }));
+                }
+            }
+            return;
+        }
+        res.writeHead(404, { 'Content-Type': 'text/plain' });
+        res.end('Not Found');
+    });
+    server.on('connection', (socket) => {
+        activeSockets.add(socket);
+        socket.once('close', () => activeSockets.delete(socket));
+    });
+    return new Promise((resolve, reject) => {
+        server.listen(targetPort, '127.0.0.1', () => {
+            const addr = server.address();
+            const actualPort = typeof addr === 'object' && addr ? addr.port : targetPort;
+            const url = `http://localhost:${actualPort}`;
+            const handle = {
+                server,
+                url,
+                port: actualPort,
+                stop: () => new Promise((resStop) => {
+                    if (typeof server.closeAllConnections === 'function') {
+                        server.closeAllConnections();
+                    }
+                    for (const sock of activeSockets) {
+                        sock.destroy();
+                    }
+                    activeSockets.clear();
+                    server.close(() => resStop());
+                }),
+            };
+            resolve(handle);
+        });
+        server.on('error', reject);
+    });
+}
+function renderDashboardHtml() {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <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; }
+    .header { margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.12); padding-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
+    .nav-tabs { display: flex; gap: 12px; margin-bottom: 20px; }
+    .tab-btn { background: #1e293b; color: #94a3b8; border: 1px solid #334155; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: bold; }
+    .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; }
+    
+    /* 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; 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; }
+    
+    /* 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; }
+    .tree-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 6px; background: #1e293b; border: 1px solid #334155; font-size: 12px; }
+    .tree-row-hspec { margin-left: 16px; border-left: 4px solid #8b5cf6; }
+    .tree-row-aspec { margin-left: 36px; border-left: 4px solid #3b82f6; }
+    .tree-row-tspec { margin-left: 56px; border-left: 4px solid #06b6d4; }
+    .tree-row-file { margin-left: 76px; border-left: 4px solid #10b981; }
+    .tree-row-symbol { margin-left: 96px; border-left: 4px solid #f59e0b; background: rgba(245,158,11,0.08); }
+    .tree-label { font-weight: bold; color: #f8fafc; display: flex; align-items: center; gap: 8px; }
+    .badge-covered { background-color: #065f46; color: #34d399; }
+    .badge-uncovered { background-color: #991b1b; color: #f87171; }
+    .stat-badge { font-size: 24px; font-weight: 800; color: #f59e0b; }
+    
+    /* 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; }
+    .stage-req { color: #ec4899; font-weight: bold; }
+    .stage-hspec { color: #8b5cf6; font-weight: bold; }
+    .stage-aspec { color: #3b82f6; font-weight: bold; }
+    .stage-tspec { color: #06b6d4; font-weight: bold; }
+    .stage-file { color: #10b981; font-weight: bold; }
+    .stage-symbol { color: #f59e0b; font-weight: bold; background: rgba(245,158,11,0.1); padding: 4px 8px; border-radius: 4px; }
+    .arrow-sep { color: #64748b; margin: 0 4px; font-weight: bold; }
+
+    #graphCanvasContainer { width: 100%; height: 820px; background: #0f172a; border-radius: 12px; border: 1.5px solid #334155; position: relative; overflow: hidden; cursor: grab; display: flex; box-shadow: inset 0 0 40px rgba(0,0,0,0.8); }
+    #graphCanvasContainer:active { cursor: grabbing; }
+    svg.graph-svg { width: 100%; height: 100%; }
+    
+    /* Interactive Traversal Inspector Drawer */
+    .traversal-drawer { width: 400px; height: 100%; background: #0b0f19; border-left: 1px solid #334155; padding: 18px; box-sizing: border-box; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; z-index: 80; box-shadow: -10px 0 35px rgba(0,0,0,0.7); }
+    .drawer-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #334155; padding-bottom: 10px; }
+    .drawer-title { font-size: 16px; font-weight: bold; color: #38bdf8; word-break: break-all; }
+    .neighbor-section { margin-top: 10px; }
+    .neighbor-sec-title { font-size: 11px; font-weight: 800; color: #94a3b8; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
+    .neighbor-item { background: #1e293b; border: 1px solid #334155; padding: 10px 12px; border-radius: 6px; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: all 0.15s ease; }
+    .neighbor-item:hover { border-color: #3b82f6; background: #26354a; transform: translateX(2px); }
+    .neighbor-id { font-size: 12px; font-weight: bold; color: #f8fafc; word-break: break-all; }
+    .neighbor-rel { font-size: 10px; font-weight: bold; padding: 2px 6px; border-radius: 4px; color: #fff; }
+    .rel-depends_on { background: #8b5cf6; }
+    .rel-implements { background: #3b82f6; }
+    .rel-verifies { background: #06b6d4; }
+    .rel-contains { background: #10b981; }
+    .rel-calls { background: #f59e0b; }
+    .rel-peer { background: #a855f7; font-weight: 900; }
+    .jump-btn { background: #3b82f6; color: #fff; border: none; padding: 4px 10px; border-radius: 4px; font-size: 11px; cursor: pointer; font-weight: bold; transition: background 0.15s ease; }
+    .jump-btn:hover { background: #2563eb; }
+    .jump-btn-peer { background: #a855f7 !important; }
+    .jump-btn-peer:hover { background: #9333ea !important; }
+    
+    .breadcrumb-bar { display: flex; gap: 8px; align-items: center; background: #1e293b; border: 1px solid #334155; padding: 8px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 12px; overflow-x: auto; white-space: nowrap; }
+    .crumb-item { color: #38bdf8; font-weight: bold; cursor: pointer; text-decoration: underline; }
+    .crumb-sep { color: #64748b; }
+    
+    /* High-Contrast Crisp Node & Edge Styling */
+    .node { cursor: pointer; transition: all 0.2s ease; }
+    .node circle { stroke: #0f172a; stroke-width: 2.5; }
+    .node text { user-select: none; pointer-events: none; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,0.9); }
+    .node:hover circle { stroke: #fbbf24 !important; stroke-width: 5 !important; filter: drop-shadow(0 0 14px #fbbf24); }
+    .node-aspec { fill: #3b82f6; stroke: #60a5fa !important; }
+    .node-hspec { fill: #8b5cf6; stroke: #c084fc !important; }
+    .node-req { fill: #ec4899; stroke: #f472b6 !important; }
+    .node-tspec { fill: #06b6d4; stroke: #67e8f9 !important; }
+    .node-code { fill: #10b981; stroke: #34d399 !important; }
+    .node-symbol { fill: #f59e0b; stroke: #fbbf24 !important; stroke-width: 3 !important; filter: drop-shadow(0 0 8px #f59e0b); }
+    .node-badge { fill: #a855f7 !important; stroke: #c084fc !important; }
+    
+    .edge { stroke-width: 3.5; opacity: 0.95; fill: none; cursor: pointer; pointer-events: stroke; transition: all 0.15s ease; }
+    .edge:hover { stroke: #fbbf24 !important; stroke-width: 6 !important; opacity: 1 !important; filter: drop-shadow(0 0 10px #fbbf24); }
+    .edge-depends_on { stroke: #a855f7; marker-end: url(#arrow-depends_on); }
+    .edge-implements { stroke: #3b82f6; marker-end: url(#arrow-implements); }
+    .edge-verifies { stroke: #06b6d4; stroke-dasharray: 6,4; marker-end: url(#arrow-verifies); }
+    .edge-contains { stroke: #10b981; stroke-dasharray: 4,3; opacity: 0.85; marker-end: url(#arrow-contains); }
+    .edge-calls { stroke: #f59e0b; stroke-width: 4; marker-end: url(#arrow-calls); filter: drop-shadow(0 0 4px #f59e0b); }
+    
+    .legend { display: flex; gap: 16px; font-size: 12px; color: #94a3b8; margin-top: 12px; flex-wrap: wrap; }
+    .legend-item { display: flex; align-items: center; gap: 6px; }
+    .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; }
+    
+    .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; }
+    .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-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; }
+    .tool-btn:hover { background: #3b82f6; border-color: #3b82f6; color: #fff; transform: scale(1.05); }
+    .ux-hint-banner { background: #1e293b; border-left: 4px solid #ec4899; color: #cbd5e1; padding: 10px 14px; border-radius: 6px; font-size: 12px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <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="legacyChip" title="Specs whose status is outside draft|review|approved|outdated — excluded from both axes, not scored zero" onclick="switchTab('legacy')">🏷️ <span id="legacyStat">--</span></span>
+    </div>
+  </div>
+
+  <div class="nav-tabs">
+    <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>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: #64748b;">
+      <span>🏷️ <strong>Unmapped Specs:</strong> these documents use a status vocabulary outside <code>draft | review | approved | outdated</code>, so no governance gate has scored them. They are <strong>excluded</strong> from both headline axes — an unmapped vocabulary is not the same as an uncovered spec.</span>
+    </div>
+    <div id="legacyGrid" class="rtm-container">Loading unmapped specifications...</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: 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 REQ-grouped 6-stage pipeline heatmap...</div>
+    </div>
+  </div>
+
+  <div id="graphTab" style="display: none;">
+    <div class="breadcrumb-bar" id="breadcrumbBar">
+      <span style="color: #94a3b8; font-weight: bold;">🧭 Traversal History:</span>
+      <span id="breadcrumbTrail" style="display: flex; gap: 6px; align-items: center;">Select any node or click any edge to jump...</span>
+    </div>
+
+    <div class="controls">
+      <label style="font-size: 13px; color: #ef4444; font-weight: bold;">⚡ Max Node Cap:</label>
+      <select id="maxNodeCap" class="select-box" style="border-color: #ef4444; font-weight: bold;" onchange="filterGraphByScope()">
+        <option value="30" selected>✨ Fast Insight (Max 30 Nodes - 60 FPS)</option>
+        <option value="50">⚡ Balanced (Max 50 Nodes - Smooth)</option>
+        <option value="100">🔍 Extended (Max 100 Nodes)</option>
+        <option value="200">🌐 High Density (Max 200 Nodes)</option>
+      </select>
+      <label style="font-size: 13px; color: #f59e0b; font-weight: bold;">🔮 Graph Paradigm:</label>
+      <select id="layoutEngine" class="select-box" style="border-color: #f59e0b; font-weight: bold;" onchange="filterGraphByScope()">
+        <option value="neo4j" selected>🔮 1. Neo4j Bloom Style: Domain Meta-Cluster Galaxy (Recommended)</option>
+        <option value="palantir">🌊 2. Palantir Style: Concentric Sunburst 360° Radial Graph</option>
+        <option value="sugiyama">🌳 3. Sugiyama Top-to-Bottom Layered Rank Tree</option>
+        <option value="pipeline">📊 4. Left-to-Right 6-Column Pipeline View</option>
+      </select>
+      <label style="font-size: 13px; color: #38bdf8; font-weight: bold;">View Scope:</label>
+      <select id="scopeFilter" class="select-box" style="border-color: #38bdf8; font-weight: bold;" onchange="filterGraphByScope()">
+        <option value="focused" selected>🎯 Focused Subgraph View (Selected Root Node & Relevance Bounded)</option>
+        <option value="ast_focus">🔬 AST/CPG Code Symbol Focus</option>
+        <option value="full">🌐 Full SDLC Pipeline Canvas (All Project Nodes)</option>
+      </select>
+      <label style="font-size: 13px; color: #94a3b8;">Max Depth:</label>
+      <select id="depthFilter" class="select-box" onchange="filterGraphByScope()">
+        <option value="3" selected>3-Hop Depth (Fastest Insight)</option>
+        <option value="7">7-Hop Max Subgraph Closure Depth</option>
+        <option value="5">5-Hop Depth</option>
+        <option value="2">2-Hop Depth</option>
+        <option value="1">1-Hop Direct Neighbors</option>
+      </select>
+    </div>
+
+    <div id="graphScopeNotice" class="scope-notice"></div>
+    <div id="graphCanvasContainer">
+      <svg id="graphSvg" class="graph-svg"></svg>
+      
+      <!-- Interactive Connected Neighbors Traversal Inspector Drawer -->
+      <div id="traversalInspector" class="traversal-drawer">
+        <div class="drawer-header">
+          <div class="drawer-title" id="inspectorNodeId">Select a Node</div>
+          <span id="inspectorNodeType" style="font-size: 11px; background: #334155; padding: 2px 8px; border-radius: 4px; font-weight: bold;">--</span>
+        </div>
+        
+        <div id="inspectorDetails" style="font-size: 12px; color: #cbd5e1;">
+          Click any node or edge on the canvas to inspect its direct, peer, and transitive neighbor linkages.
+        </div>
+
+        <div id="inspectorNeighborsContainer" style="display: flex; flex-direction: column; gap: 12px; margin-top: 8px;">
+          <!-- Populated dynamically on node selection -->
+        </div>
+      </div>
+
+      <div class="canvas-toolbar">
+        <button class="tool-btn" onclick="zoomIn()" title="Zoom In (Scale +30%)">➕</button>
+        <button class="tool-btn" onclick="zoomOut()" title="Zoom Out (Scale -30%)">➖</button>
+        <button class="tool-btn" onclick="resetFitView()" title="Fit View to Screen">🎯</button>
+        <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="popoverSection1" class="popover-section"></div>
+        <div id="popoverSection2" class="popover-section"></div>
+      </div>
+    </div>
+    <div class="legend">
+      <div class="legend-item"><span class="legend-dot" style="background: #ec4899;"></span> REQ Business Spec</div>
+      <div class="legend-item"><span class="legend-dot" style="background: #8b5cf6;"></span> H-SPEC Functional</div>
+      <div class="legend-item"><span class="legend-dot" style="background: #3b82f6;"></span> A-SPEC Architecture</div>
+      <div class="legend-item"><span class="legend-dot" style="background: #06b6d4;"></span> T-SPEC Test Spec</div>
+      <div class="legend-item"><span class="legend-dot" style="background: #10b981;"></span> Source Code File</div>
+      <div class="legend-item"><span class="legend-dot" style="background: #f59e0b; border: 1.5px solid #fbbf24; box-shadow: 0 0 8px #f59e0b;"></span> ⚡ AST Function Symbol</div>
+      <div class="legend-item"><span style="color:#3b82f6; font-weight:bold;">➔ implements</span></div>
+      <div class="legend-item"><span style="color:#06b6d4; font-weight:bold;">➔ verifies</span></div>
+      <div class="legend-item"><span style="color:#a855f7; font-weight:bold;">➔ depends_on</span></div>
+      <div class="legend-item"><span style="color:#f59e0b; font-weight:bold;">➔ calls</span></div>
+    </div>
+  </div>
+
+  <script>
+    function escapeHtml(str) {
+      if (!str) return '';
+      return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
+    }
+
+    function getIdStr(obj) {
+      if (!obj) return '';
+      if (typeof obj === 'string') return obj;
+      if (typeof obj === 'object' && obj.id) return obj.id;
+      return String(obj);
+    }
+
+    function getNodeCategory(id) {
+      if (id.startsWith('REQ')) return 'REQ';
+      if (id.startsWith('H-SPEC')) return 'H-SPEC';
+      if (id.startsWith('A-SPEC')) return 'A-SPEC';
+      if (id.startsWith('T-SPEC')) return 'T-SPEC';
+      if (id.includes('#')) return 'SYMBOL';
+      return 'FILE';
+    }
+
+    function getDomainModule(id) {
+      if (id.startsWith('REQ') || id.startsWith('H-SPEC') || id.startsWith('A-SPEC') || id.startsWith('T-SPEC')) return 'spec';
+      if (id.includes('/cpg/')) return 'cpg';
+      if (id.includes('/server/')) return 'server';
+      if (id.includes('/review/')) return 'review';
+      if (id.includes('/rtm/')) return 'rtm';
+      if (id.includes('/reverse/')) return 'reverse';
+      return 'core';
+    }
+
+    let allSpecs = [];
+    let allFiles = [];
+    let graphData = null;
+    let heatmapData = null;
+    let currentZoom = null;
+    let svgG = null;
+    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.
+    function renderLegacySpecGrid(specs) {
+      const container = document.getElementById('legacyGrid');
+      if (!container) return;
+      const legacy = specs.filter(s => s.legacyStatus);
+      if (legacy.length === 0) {
+        container.innerHTML = '<div style="color:#94a3b8; font-size:14px;">Every spec uses the canonical status vocabulary.</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();
+      } else if (tab === 'heatmap' && !heatmapData) {
+        loadMicroHeatmap();
+      }
+    }
+
+    async function loadDashboard() {
+      try {
+        const res = await fetch('/api/rtm');
+        const data = await res.json();
+        if (data.ok) {
+          allSpecs = data.specs;
+          allFiles = data.files || [];
+          const ap = data.approval || { pct: 0, approved: 0, total: 0 };
+          const im = data.implementation || { pct: 0, anchored: 0, total: 0 };
+          const lg = data.legacy || { count: 0, byKind: {} };
+          document.getElementById('approvalStat').innerText = ap.pct + '% (' + ap.approved + '/' + ap.total + ')';
+          document.getElementById('implStat').innerText = im.pct + '% (' + im.anchored + '/' + im.total + ')';
+          const kinds = Object.keys(lg.byKind || {}).map(k => k + ' ' + lg.byKind[k]).join(' · ');
+          document.getElementById('legacyStat').innerText = lg.count + ' unmapped' + (kinds ? ' (' + kinds + ')' : '');
+          renderLegacySpecGrid(data.specs || []);
+          renderReqQuantitativeGrid(allSpecs, allFiles);
+        }
+      } catch (err) {
+        document.getElementById('specGrid').innerText = 'Failed to load specs: ' + escapeHtml(err.message || err);
+      }
+    }
+
+    async function loadMicroHeatmap() {
+      try {
+        const res = await fetch('/api/rtm/heatmap');
+        const data = await res.json();
+        if (data.ok) {
+          heatmapData = data;
+          render6StagePipelineMatrix(data);
+        }
+      } catch (err) {
+        document.getElementById('heatmapContainer').innerText = 'Failed to load pipeline heatmap: ' + escapeHtml(err.message || err);
+      }
+    }
+
+    function changeHeatmapLens() {
+      if (heatmapData) {
+        render6StagePipelineMatrix(heatmapData);
+      }
+    }
+
+    // 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 rawPipelines = data.pipelines || [];
+      const lens = document.getElementById('lensSelect').value || 'lens1';
+      const statusFilter = document.getElementById('pipelineFilterSelect').value || 'all';
+
+      if (rawPipelines.length === 0) {
+        container.innerHTML = '<div style="color:#94a3b8; font-size:14px;">No pipeline trace chains found.</div>';
+        return;
+      }
+
+      // 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 => {
+        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 += \`
+                </tbody>
+              </table>
+            </div>
+          </div>
+        \`;
+      });
+
+      container.innerHTML = html;
+    }
+
+    // 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-'));
+
+      if (reqList.length === 0) {
+        container.innerHTML = '<div style="color:#94a3b8; font-size:14px;">No business REQ specifications found.</div>';
+        return;
+      }
+
+      container.innerHTML = reqList.map(req => {
+        const numPart = req.id.replace('REQ-', '').split('.')[0];
+        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;
+        });
+
+        // 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)}">
+            <div class="req-header" onclick="toggleAccordion('body-\${escapeHtml(req.id)}')">
+              <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: 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 Matrix Tree</button>
+                <button class="view-graph-btn" onclick="event.stopPropagation(); focusSpecInGraph('\${escapeHtml(req.id)}')">🕸️ View in Graph</button>
+              </div>
+            </div>
+
+            <div class="accordion-body" id="body-\${escapeHtml(req.id)}">
+              \${hspecs.map(h => \`
+                <div class="tree-row tree-row-hspec">
+                  <div class="tree-label">🟣 <strong>\${escapeHtml(h.id)}</strong>: \${escapeHtml(h.title || '')}</div>
+                  <div>
+                    <span class="neighbor-rel \${h.covered ? 'badge-covered' : 'badge-uncovered'}" style="margin-right:8px;">\${h.covered ? 'APPROVED' : 'ACTIVE'}</span>
+                    <button class="jump-btn" onclick="focusSpecInGraph('\${escapeHtml(h.id)}')">🕸️ View in Graph</button>
+                  </div>
+                </div>
+              \`).join('')}
+
+              \${aspecs.map(a => \`
+                <div class="tree-row tree-row-aspec">
+                  <div class="tree-label">🔵 <strong>\${escapeHtml(a.id)}</strong>: \${escapeHtml(a.title || '')}</div>
+                  <div>
+                    <span class="neighbor-rel \${a.covered ? 'badge-covered' : 'badge-uncovered'}" style="margin-right:8px;">\${a.covered ? 'COVERED' : 'UNCOVERED'}</span>
+                    <button class="jump-btn" onclick="focusSpecInGraph('\${escapeHtml(a.id)}')">🕸️ View in Graph</button>
+                  </div>
+                </div>
+              \`).join('')}
+
+              \${tspecs.map(t => \`
+                <div class="tree-row tree-row-tspec">
+                  <div class="tree-label">🔷 <strong>\${escapeHtml(t.id)}</strong>: \${escapeHtml(t.title || '')}</div>
+                  <div>
+                    <span class="neighbor-rel \${t.covered ? 'badge-covered' : 'badge-uncovered'}" style="margin-right:8px;">\${t.covered ? 'VERIFIED' : 'ACTIVE'}</span>
+                    <button class="jump-btn" onclick="focusSpecInGraph('\${escapeHtml(t.id)}')">🕸️ View in Graph</button>
+                  </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>
+        \`;
+      }).join('');
+    }
+
+    function toggleAccordion(bodyId) {
+      const body = document.getElementById(bodyId);
+      if (body) {
+        body.classList.toggle('open');
+      }
+    }
+
+    async function focusSpecInGraph(specId) {
+      switchTab('graph');
+      if (!graphData) {
+        await loadGraphCanvas();
+      }
+      selectAndTraverseNode(specId);
+    }
+
+    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)));
+      renderReqQuantitativeGrid(filtered, allFiles);
+    });
+
+    async function loadGraphCanvas() {
+      try {
+        const res = await fetch('/api/graph');
+        const data = await res.json();
+        if (data.ok) {
+          graphData = data;
+          selectAndTraverseNode(selectedRootNodeId);
+        }
+      } catch (err) {
+        console.error('Failed to load graph:', err);
+      }
+    }
+
+    function setupSvgDefs(svg) {
+      let defs = svg.select('defs');
+      if (defs.empty()) {
+        defs = svg.append('defs');
+      }
+
+      const markers = [
+        { id: 'arrow-depends_on', color: '#a855f7' },
+        { id: 'arrow-implements', color: '#3b82f6' },
+        { id: 'arrow-verifies', color: '#06b6d4' },
+        { id: 'arrow-contains', color: '#10b981' },
+        { id: 'arrow-calls', color: '#f59e0b' }
+      ];
+
+      markers.forEach(m => {
+        if (defs.select('#' + m.id).empty()) {
+          defs.append('marker')
+            .attr('id', m.id)
+            .attr('viewBox', '0 -5 10 10')
+            .attr('refX', 22)
+            .attr('refY', 0)
+            .attr('markerWidth', 7)
+            .attr('markerHeight', 7)
+            .attr('orient', 'auto')
+            .append('path')
+            .attr('d', 'M0,-5L10,0L0,5')
+            .attr('fill', m.color);
+        }
+      });
+    }
+
+    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;
+      const maxDepth = parseInt(document.getElementById('depthFilter').value, 10) || 3;
+      const maxNodeCap = parseInt(document.getElementById('maxNodeCap').value, 10) || 30;
+
+      let filteredNodes = [];
+      let filteredEdges = [];
+
+      if (scope === 'full') {
+        filteredNodes = graphData.nodes.slice(0, maxNodeCap);
+        const nodeSet = new Set(filteredNodes.map(n => n.id));
+        filteredEdges = graphData.edges.filter(e => nodeSet.has(getIdStr(e.from)) && nodeSet.has(getIdStr(e.to)));
+      } else {
+        const rootId = selectedRootNodeId || 'A-SPEC-219';
+        const visited = new Map();
+        visited.set(rootId, 0);
+        const queue = [{ id: rootId, depth: 0 }];
+
+        const adj = new Map();
+        graphData.nodes.forEach(n => adj.set(n.id, new Set()));
+        graphData.edges.forEach(e => {
+          const u = getIdStr(e.from);
+          const v = getIdStr(e.to);
+          if (adj.has(u)) adj.get(u).add(v);
+          if (adj.has(v)) adj.get(v).add(u);
+        });
+
+        // Bounded Relevance BFS (Max Node Cap Enforcement)
+        const collectedNodeIds = [];
+        while (queue.length > 0 && collectedNodeIds.length < maxNodeCap) {
+          const { id, depth } = queue.shift();
+          collectedNodeIds.push(id);
+
+          if (depth >= maxDepth) continue;
+
+          const neighbors = adj.get(id) || [];
+          for (const nxt of neighbors) {
+            if (!visited.has(nxt)) {
+              visited.set(nxt, depth + 1);
+              queue.push({ id: nxt, depth: depth + 1 });
+            }
+          }
+        }
+
+        const bSet = new Set(collectedNodeIds);
+        filteredNodes = graphData.nodes.filter(n => bSet.has(n.id));
+        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);
+      } else if (engine === 'palantir') {
+        renderPalantirConcentricRadial(filteredNodes, filteredEdges);
+      } else if (engine === 'sugiyama') {
+        renderSugiyamaTopToBottom(filteredNodes, filteredEdges);
+      } else {
+        renderPipelineGraph(filteredNodes, filteredEdges);
+      }
+
+      setTimeout(() => resetFitView(), 120);
+    }
+
+    function zoomIn() {
+      if (window.d3 && currentZoom) {
+        d3.select('#graphSvg').transition().duration(300).call(currentZoom.scaleBy, 1.3);
+      }
+    }
+
+    function zoomOut() {
+      if (window.d3 && currentZoom) {
+        d3.select('#graphSvg').transition().duration(300).call(currentZoom.scaleBy, 0.7);
+      }
+    }
+
+    function resetZoom() {
+      if (window.d3 && currentZoom) {
+        d3.select('#graphSvg').transition().duration(400).call(currentZoom.transform, d3.zoomIdentity);
+      }
+    }
+
+    function resetFitView() {
+      if (!window.d3 || !svgG || !currentZoom) return;
+      const svg = d3.select('#graphSvg');
+      const container = document.getElementById('graphSvg');
+      const width = container.clientWidth || 1000;
+      const height = container.clientHeight || 800;
+
+      const bounds = svgG.node().getBBox();
+      if (!bounds || bounds.width === 0 || bounds.height === 0) return;
+
+      const fullWidth = bounds.width;
+      const fullHeight = bounds.height;
+      const midX = bounds.x + fullWidth / 2;
+      const midY = bounds.y + fullHeight / 2;
+
+      const scale = 0.85 / Math.max(fullWidth / width, fullHeight / height);
+      const translate = [width / 2 - scale * midX, height / 2 - scale * midY];
+
+      svg.transition().duration(750).call(
+        currentZoom.transform,
+        d3.zoomIdentity.translate(translate[0], translate[1]).scale(scale)
+      );
+    }
+
+    // 🔮 1. Neo4j Bloom Style: Domain Meta-Cluster Galaxy Engine
+    function renderNeo4jBloomDomainGalaxy(rawNodes, rawEdges) {
+      const container = document.getElementById('graphSvg');
+      container.innerHTML = '';
+      const width = container.clientWidth || 1100;
+      const height = container.clientHeight || 800;
+
+      const svg = d3.select('#graphSvg');
+      setupSvgDefs(svg);
+      svgG = svg.append('g').attr('class', 'main-group');
+
+      currentZoom = d3.zoom()
+        .scaleExtent([0.05, 8])
+        .on('zoom', (event) => svgG.attr('transform', event.transform));
+
+      svg.call(currentZoom);
+      container.addEventListener('wheel', (e) => e.preventDefault(), { passive: false });
+
+      const nodes = rawNodes.map(n => ({ ...n }));
+      const validNodeIds = new Set(nodes.map(n => n.id));
+
+      const validEdges = rawEdges
+        .map(e => ({ source: getIdStr(e.from || e.source), target: getIdStr(e.to || e.target), rel: e.rel }))
+        .filter(e => validNodeIds.has(e.source) && validNodeIds.has(e.target));
+
+      const degreeMap = new Map();
+      validEdges.forEach(e => {
+        degreeMap.set(e.source, (degreeMap.get(e.source) || 0) + 1);
+        degreeMap.set(e.target, (degreeMap.get(e.target) || 0) + 1);
+      });
+
+      const domainCenters = {
+        spec: { x: width * 0.3, y: height * 0.25, color: '#3b82f6', label: '🔮 Domain: Governance Specs' },
+        cpg: { x: width * 0.7, y: height * 0.25, color: '#f59e0b', label: '⚡ Domain: CPG Static Code Analysis' },
+        server: { x: width * 0.3, y: height * 0.75, color: '#10b981', label: '🖥️ Domain: Server & Dashboard' },
+        review: { x: width * 0.7, y: height * 0.75, color: '#8b5cf6', label: '🔬 Domain: Review & Remediation' },
+        core: { x: width * 0.5, y: height * 0.5, color: '#ec4899', label: '⚛️ Domain: Core Infrastructure' }
+      };
+
+      Object.values(domainCenters).forEach(c => {
+        svgG.append('circle')
+          .attr('cx', c.x)
+          .attr('cy', c.y)
+          .attr('r', 130)
+          .attr('fill', c.color)
+          .attr('opacity', 0.04);
+
+        svgG.append('text')
+          .attr('x', c.x)
+          .attr('y', c.y - 135)
+          .attr('fill', c.color)
+          .attr('font-size', '13px')
+          .attr('font-weight', 'bold')
+          .attr('text-anchor', 'middle')
+          .text(c.label);
+      });
+
+      const simulation = d3.forceSimulation(nodes)
+        .force('link', d3.forceLink(validEdges).id(d => d.id).distance(100))
+        .force('charge', d3.forceManyBody().strength(-350))
+        .force('collide', d3.forceCollide(d => (degreeMap.get(d.id) || 1) * 2 + 25))
+        .force('x', d3.forceX(d => (domainCenters[getDomainModule(d.id)] || domainCenters.core).x).strength(0.3))
+        .force('y', d3.forceY(d => (domainCenters[getDomainModule(d.id)] || domainCenters.core).y).strength(0.3));
+
+      const edgeGroup = svgG.append('g').attr('class', 'edges-group');
+
+      const pathElements = edgeGroup.selectAll('path')
+        .data(validEdges)
+        .enter()
+        .append('path')
+        .attr('class', d => 'edge edge-' + d.rel)
+        .attr('data-from', d => getIdStr(d.source))
+        .attr('data-to', d => getIdStr(d.target))
+        .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')
+        .data(nodes)
+        .enter()
+        .append('g')
+        .attr('class', 'node')
+        .attr('data-id', d => d.id)
+        .call(d3.drag()
+          .on('start', (event, d) => {
+            if (!event.active) simulation.alphaTarget(0.3).restart();
+            d.fx = d.x; d.fy = d.y;
+          })
+          .on('drag', (event, d) => {
+            d.fx = event.x; d.fy = event.y;
+          })
+          .on('end', (event, d) => {
+            if (!event.active) simulation.alphaTarget(0);
+            d.fx = null; d.fy = null;
+          }));
+
+      nodeGroups.append('circle')
+        .attr('r', d => {
+          if (d.kind === 'badge') return 16;
+          const deg = degreeMap.get(d.id) || 1;
+          return Math.min(24, 10 + deg * 1.8);
+        })
+        .attr('class', d => {
+          if (d.kind === 'badge') return 'node-badge';
+          if (d.kind === 'symbol' || d.id.includes('#')) return 'node-symbol';
+          if (d.id.startsWith('A-SPEC')) return 'node-aspec';
+          if (d.id.startsWith('T-SPEC')) return 'node-tspec';
+          if (d.id.startsWith('H-SPEC')) return 'node-hspec';
+          if (d.id.startsWith('REQ')) return 'node-req';
+          return 'node-code';
+        });
+
+      nodeGroups.append('text')
+        .attr('x', 0)
+        .attr('y', 24)
+        .attr('text-anchor', 'middle')
+        .attr('fill', '#f8fafc')
+        .attr('font-size', '11px')
+        .text(d => d.id.length > 22 ? d.id.slice(0, 20) + '...' : d.id);
+
+      nodeGroups
+        .on('click', (event, d) => selectAndTraverseNode(d.id))
+        .on('mouseenter', (event, d) => showNodePopover(event, d, validEdges))
+        .on('mouseleave', hidePopover);
+
+      simulation.on('tick', () => {
+        pathElements.attr('d', d => \`M \${d.source.x} \${d.source.y} L \${d.target.x} \${d.target.y}\`);
+        nodeGroups.attr('transform', d => \`translate(\${d.x},\${d.y})\`);
+      });
+    }
+
+    // 🌊 2. Palantir Style: Concentric Sunburst 360° Radial Graph Engine
+    function renderPalantirConcentricRadial(rawNodes, rawEdges) {
+      const container = document.getElementById('graphSvg');
+      container.innerHTML = '';
+      const width = container.clientWidth || 1100;
+      const height = container.clientHeight || 800;
+
+      const svg = d3.select('#graphSvg');
+      setupSvgDefs(svg);
+      svgG = svg.append('g').attr('class', 'main-group');
+
+      currentZoom = d3.zoom()
+        .scaleExtent([0.05, 8])
+        .on('zoom', (event) => svgG.attr('transform', event.transform));
+
+      svg.call(currentZoom);
+      container.addEventListener('wheel', (e) => e.preventDefault(), { passive: false });
+
+      const nodes = rawNodes.map(n => ({ ...n }));
+      const validNodeIds = new Set(nodes.map(n => n.id));
+
+      const validEdges = rawEdges
+        .map(e => ({ from: getIdStr(e.from || e.source), to: getIdStr(e.to || e.target), rel: e.rel }))
+        .filter(e => validNodeIds.has(e.from) && validNodeIds.has(e.to));
+
+      const rootId = selectedRootNodeId || 'A-SPEC-219';
+
+      const ringDepthMap = new Map();
+      ringDepthMap.set(rootId, 0);
+      const queue = [{ id: rootId, depth: 0 }];
+
+      const adj = new Map();
+      nodes.forEach(n => adj.set(n.id, new Set()));
+      validEdges.forEach(e => {
+        if (adj.has(e.from)) adj.get(e.from).add(e.to);
+        if (adj.has(e.to)) adj.get(e.to).add(e.from);
+      });
+
+      while (queue.length > 0) {
+        const { id, depth } = queue.shift();
+        const neighbors = adj.get(id) || [];
+        for (const nxt of neighbors) {
+          if (!ringDepthMap.has(nxt)) {
+            ringDepthMap.set(nxt, depth + 1);
+            queue.push({ id: nxt, depth: depth + 1 });
+          }
+        }
+      }
+
+      const ringGroups = { 0: [], 1: [], 2: [], 3: [] };
+      nodes.forEach(n => {
+        const d = Math.min(3, ringDepthMap.get(n.id) || 3);
+        ringGroups[d].push(n);
+      });
+
+      const centerX = width / 2;
+      const centerY = height / 2;
+      const ringRadii = { 0: 0, 1: 180, 2: 360, 3: 540 };
+
+      [180, 360, 540].forEach((r, idx) => {
+        svgG.append('circle')
+          .attr('cx', centerX)
+          .attr('cy', centerY)
+          .attr('r', r)
+          .attr('fill', 'none')
+          .attr('stroke', '#334155')
+          .attr('stroke-dasharray', '6,6')
+          .attr('opacity', 0.5);
+
+        svgG.append('text')
+          .attr('x', centerX + r + 8)
+          .attr('y', centerY)
+          .attr('fill', idx === 0 ? '#ef4444' : idx === 1 ? '#f97316' : '#eab308')
+          .attr('font-size', '12px')
+          .attr('font-weight', 'bold')
+          .text((idx + 1) + '-Hop Orbit Ring');
+      });
+
+      const nodePositions = new Map();
+
+      Object.keys(ringGroups).forEach(k => {
+        const d = parseInt(k, 10);
+        const list = ringGroups[d];
+        const count = list.length;
+        const radius = ringRadii[d];
+
+        list.forEach((n, i) => {
+          if (d === 0) {
+            n.x = centerX; n.y = centerY;
+          } else {
+            const angle = (2 * Math.PI * i) / count - Math.PI / 2;
+            n.x = centerX + radius * Math.cos(angle);
+            n.y = centerY + radius * Math.sin(angle);
+          }
+          nodePositions.set(n.id, n);
+        });
+      });
+
+      const edgeGroup = svgG.append('g').attr('class', 'edges-group');
+
+      validEdges.forEach(d => {
+        const p1 = nodePositions.get(d.from);
+        const p2 = nodePositions.get(d.to);
+        if (!p1 || !p2) return;
+
+        const pathD = \`M \${p1.x} \${p1.y} L \${p2.x} \${p2.y}\`;
+        const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        pathEl.setAttribute('d', pathD);
+        pathEl.setAttribute('class', 'edge edge-' + d.rel);
+        pathEl.setAttribute('data-from', d.from);
+        pathEl.setAttribute('data-to', d.to);
+
+        pathEl.addEventListener('click', (evt) => {
+          evt.stopPropagation();
+          selectAndTraverseNode(d.to);
+        });
+        pathEl.addEventListener('mouseenter', (evt) => showEdgePopover(evt, d));
+        pathEl.addEventListener('mouseleave', hidePopover);
+
+        edgeGroup.node().appendChild(pathEl);
+      });
+
+      const nodeGroups = svgG.append('g')
+        .selectAll('g')
+        .data(nodes)
+        .enter()
+        .append('g')
+        .attr('class', 'node')
+        .attr('data-id', d => d.id)
+        .attr('transform', d => \`translate(\${d.x},\${d.y})\`);
+
+      nodeGroups.append('circle')
+        .attr('r', d => d.id === rootId ? 18 : d.kind === 'badge' ? 14 : d.kind === 'symbol' || d.id.includes('#') ? 10 : 12)
+        .attr('class', d => {
+          if (d.id === rootId) return 'node-aspec';
+          if (d.kind === 'badge') return 'node-badge';
+          if (d.kind === 'symbol' || d.id.includes('#')) return 'node-symbol';
+          if (d.id.startsWith('A-SPEC')) return 'node-aspec';
+          if (d.id.startsWith('T-SPEC')) return 'node-tspec';
+          if (d.id.startsWith('H-SPEC')) return 'node-hspec';
+          if (d.id.startsWith('REQ')) return 'node-req';
+          return 'node-code';
+        });
+
+      nodeGroups.append('text')
+        .attr('x', 0)
+        .attr('y', 24)
+        .attr('text-anchor', 'middle')
+        .attr('fill', d => d.id === rootId ? '#fbbf24' : '#f8fafc')
+        .attr('font-weight', d => d.id === rootId ? 'bold' : 'normal')
+        .attr('font-size', '11px')
+        .text(d => d.id.length > 22 ? d.id.slice(0, 20) + '...' : d.id);
+
+      nodeGroups
+        .on('click', (event, d) => selectAndTraverseNode(d.id))
+        .on('mouseenter', (event, d) => showNodePopover(event, d, validEdges))
+        .on('mouseleave', hidePopover);
+    }
+
+    // 🌳 Sugiyama Top-to-Bottom Layered Tree View Layout Engine
+    function renderSugiyamaTopToBottom(rawNodes, rawEdges) {
+      const container = document.getElementById('graphSvg');
+      container.innerHTML = '';
+      const width = container.clientWidth || 1100;
+      const height = container.clientHeight || 800;
+
+      const svg = d3.select('#graphSvg');
+      setupSvgDefs(svg);
+      svgG = svg.append('g').attr('class', 'main-group');
+
+      currentZoom = d3.zoom()
+        .scaleExtent([0.05, 8])
+        .on('zoom', (event) => svgG.attr('transform', event.transform));
+
+      svg.call(currentZoom);
+      container.addEventListener('wheel', (e) => e.preventDefault(), { passive: false });
+
+      const nodes = rawNodes.map(n => ({ ...n }));
+      const validNodeIds = new Set(nodes.map(n => n.id));
+
+      const validEdges = rawEdges
+        .map(e => ({ from: getIdStr(e.from || e.source), to: getIdStr(e.to || e.target), rel: e.rel }))
+        .filter(e => validNodeIds.has(e.from) && validNodeIds.has(e.to));
+
+      const layers = { req: [], hspec: [], aspec: [], tspec: [], file: [], symbol: [] };
+      nodes.forEach(n => {
+        if (n.id.startsWith('REQ')) layers.req.push(n);
+        else if (n.id.startsWith('H-SPEC')) layers.hspec.push(n);
+        else if (n.id.startsWith('A-SPEC')) layers.aspec.push(n);
+        else if (n.id.startsWith('T-SPEC')) layers.tspec.push(n);
+        else if (n.id.includes('#') || n.kind === 'symbol') layers.symbol.push(n);
+        else layers.file.push(n);
+      });
+
+      const layerKeys = ['req', 'hspec', 'aspec', 'tspec', 'file', 'symbol'];
+      const layerY = { req: 90, hspec: 220, aspec: 350, tspec: 480, file: 610, symbol: 740 };
+      const nodePositions = new Map();
+
+      layerKeys.forEach(k => {
+        const list = layers[k];
+        const count = list.length;
+        const spacing = Math.max(80, Math.min(180, (width - 150) / (count || 1)));
+        const startX = 100;
+
+        list.forEach((n, i) => {
+          const x = startX + i * spacing;
+          const y = layerY[k];
+          n.x = x; n.y = y;
+          nodePositions.set(n.id, n);
+        });
+      });
+
+      const headers = [
+        { title: 'Top Layer 1: REQ Business Specs', y: layerY.req - 30, color: '#ec4899' },
+        { title: 'Layer 2: H-SPEC High Level Functional Specs', y: layerY.hspec - 30, color: '#8b5cf6' },
+        { title: 'Layer 3: A-SPEC Architecture Specs', y: layerY.aspec - 30, color: '#3b82f6' },
+        { title: 'Layer 4: T-SPEC Verification Specs', y: layerY.tspec - 30, color: '#06b6d4' },
+        { title: 'Layer 5: Source Code Files', y: layerY.file - 30, color: '#10b981' },
+        { title: 'Bottom Layer 6: AST Function / Method Symbols', y: layerY.symbol - 30, color: '#f59e0b' }
+      ];
+
+      headers.forEach(h => {
+        svgG.append('text')
+          .attr('x', 50)
+          .attr('y', h.y)
+          .attr('fill', h.color)
+          .attr('font-size', '12px')
+          .attr('font-weight', 'bold')
+          .text(h.title);
+
+        svgG.append('line')
+          .attr('x1', 40)
+          .attr('y1', h.y + 12)
+          .attr('x2', width + 1000)
+          .attr('y2', h.y + 12)
+          .attr('stroke', '#334155')
+          .attr('stroke-dasharray', '4,4')
+          .attr('opacity', 0.4);
+      });
+
+      const edgeGroup = svgG.append('g').attr('class', 'edges-group');
+
+      validEdges.forEach(d => {
+        const p1 = nodePositions.get(d.from);
+        const p2 = nodePositions.get(d.to);
+        if (!p1 || !p2) return;
+
+        const cat1 = getNodeCategory(d.from);
+        const cat2 = getNodeCategory(d.to);
+        const isSameLevelPeer = cat1 === cat2;
+
+        let pathD = \`M \${p1.x} \${p1.y} L \${p2.x} \${p2.y}\`;
+        if (isSameLevelPeer) {
+          const cx = Math.min(p1.x, p2.x) - 50;
+          pathD = \`M \${p1.x} \${p1.y} Q \${cx} \${(p1.y + p2.y) / 2}, \${p2.x} \${p2.y}\`;
+        } else {
+          const cy = (p1.y + p2.y) / 2;
+          pathD = \`M \${p1.x} \${p1.y} C \${p1.x} \${cy}, \${p2.x} \${cy}, \${p2.x} \${p2.y}\`;
+        }
+
+        const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        pathEl.setAttribute('d', pathD);
+        pathEl.setAttribute('class', 'edge edge-' + d.rel);
+        pathEl.setAttribute('data-from', d.from);
+        pathEl.setAttribute('data-to', d.to);
+
+        pathEl.addEventListener('click', (evt) => {
+          evt.stopPropagation();
+          selectAndTraverseNode(d.to);
+        });
+        pathEl.addEventListener('mouseenter', (evt) => showEdgePopover(evt, d));
+        pathEl.addEventListener('mouseleave', hidePopover);
+
+        edgeGroup.node().appendChild(pathEl);
+      });
+
+      const nodeGroups = svgG.append('g')
+        .selectAll('g')
+        .data(nodes)
+        .enter()
+        .append('g')
+        .attr('class', 'node')
+        .attr('data-id', d => d.id)
+        .attr('transform', d => \`translate(\${d.x},\${d.y})\`);
+
+      nodeGroups.append('circle')
+        .attr('r', d => d.kind === 'badge' ? 14 : d.kind === 'symbol' || d.id.includes('#') ? 10 : 12)
+        .attr('class', d => {
+          if (d.kind === 'badge') return 'node-badge';
+          if (d.kind === 'symbol' || d.id.includes('#')) return 'node-symbol';
+          if (d.id.startsWith('A-SPEC')) return 'node-aspec';
+          if (d.id.startsWith('T-SPEC')) return 'node-tspec';
+          if (d.id.startsWith('H-SPEC')) return 'node-hspec';
+          if (d.id.startsWith('REQ')) return 'node-req';
+          return 'node-code';
+        });
+
+      nodeGroups.append('text')
+        .attr('x', 0)
+        .attr('y', 24)
+        .attr('text-anchor', 'middle')
+        .attr('fill', '#f8fafc')
+        .attr('font-size', '11px')
+        .text(d => d.id.length > 24 ? d.id.slice(0, 22) + '...' : d.id);
+
+      nodeGroups
+        .on('click', (event, d) => selectAndTraverseNode(d.id))
+        .on('mouseenter', (event, d) => showNodePopover(event, d, validEdges))
+        .on('mouseleave', hidePopover);
+    }
+
+    // 📊 Classic Left-to-Right 6-Column Pipeline View
+    function renderPipelineGraph(rawNodes, rawEdges) {
+      const container = document.getElementById('graphSvg');
+      container.innerHTML = '';
+      const width = container.clientWidth || 1100;
+      const height = container.clientHeight || 800;
+
+      const svg = d3.select('#graphSvg');
+      setupSvgDefs(svg);
+      svgG = svg.append('g').attr('class', 'main-group');
+
+      currentZoom = d3.zoom()
+        .scaleExtent([0.05, 8])
+        .on('zoom', (event) => svgG.attr('transform', event.transform));
+
+      svg.call(currentZoom);
+      container.addEventListener('wheel', (e) => e.preventDefault(), { passive: false });
+
+      const nodes = rawNodes.map(n => ({ ...n }));
+      const validNodeIds = new Set(nodes.map(n => n.id));
+
+      const validEdges = rawEdges
+        .map(e => ({ from: getIdStr(e.from || e.source), to: getIdStr(e.to || e.target), rel: e.rel }))
+        .filter(e => validNodeIds.has(e.from) && validNodeIds.has(e.to));
+
+      const cols = { req: [], hspec: [], aspec: [], tspec: [], file: [], symbol: [] };
+      nodes.forEach(n => {
+        if (n.id.startsWith('REQ')) cols.req.push(n);
+        else if (n.id.startsWith('H-SPEC')) cols.hspec.push(n);
+        else if (n.id.startsWith('A-SPEC')) cols.aspec.push(n);
+        else if (n.id.startsWith('T-SPEC')) cols.tspec.push(n);
+        else if (n.id.includes('#') || n.kind === 'symbol') cols.symbol.push(n);
+        else cols.file.push(n);
+      });
+
+      const colKeys = ['req', 'hspec', 'aspec', 'tspec', 'file', 'symbol'];
+      const colX = { req: 90, hspec: 280, aspec: 470, tspec: 660, file: 850, symbol: 1040 };
+      const nodePositions = new Map();
+
+      colKeys.forEach(k => {
+        const list = cols[k];
+        const count = list.length;
+        const spacing = Math.max(40, Math.min(70, (height - 140) / (count || 1)));
+        const startY = 90;
+
+        list.forEach((n, i) => {
+          const x = colX[k];
+          const y = startY + i * spacing;
+          n.x = x; n.y = y;
+          nodePositions.set(n.id, n);
+        });
+      });
+
+      const headers = [
+        { title: '1. REQ Business', x: colX.req, color: '#ec4899' },
+        { title: '2. H-SPEC High', x: colX.hspec, color: '#8b5cf6' },
+        { title: '3. A-SPEC Arch', x: colX.aspec, color: '#3b82f6' },
+        { title: '4. T-SPEC Test', x: colX.tspec, color: '#06b6d4' },
+        { title: '5. Code File', x: colX.file, color: '#10b981' },
+        { title: '6. AST Symbol', x: colX.symbol, color: '#f59e0b' }
+      ];
+
+      headers.forEach(h => {
+        svgG.append('text')
+          .attr('x', h.x)
+          .attr('y', 40)
+          .attr('fill', h.color)
+          .attr('font-size', '13px')
+          .attr('font-weight', 'bold')
+          .attr('text-anchor', 'middle')
+          .text(h.title);
+
+        svgG.append('line')
+          .attr('x1', h.x)
+          .attr('y1', 50)
+          .attr('x2', h.x)
+          .attr('y2', height - 20)
+          .attr('stroke', '#334155')
+          .attr('stroke-dasharray', '4,4')
+          .attr('opacity', 0.4);
+      });
+
+      const edgeGroup = svgG.append('g').attr('class', 'edges-group');
+
+      validEdges.forEach(d => {
+        const p1 = nodePositions.get(d.from);
+        const p2 = nodePositions.get(d.to);
+        if (!p1 || !p2) return;
+
+        const cat1 = getNodeCategory(d.from);
+        const cat2 = getNodeCategory(d.to);
+        const isSameLevelPeer = cat1 === cat2;
+
+        const isCrossColumnArc = (p1.x > 800 && p2.x < 500) || (p2.x > 800 && p1.x < 500);
+        let pathD = \`M \${p1.x} \${p1.y} L \${p2.x} \${p2.y}\`;
+
+        if (isSameLevelPeer || isCrossColumnArc) {
+          const cy = Math.min(p1.y, p2.y) - (isSameLevelPeer ? 35 : 50);
+          pathD = \`M \${p1.x} \${p1.y} Q \${(p1.x + p2.x) / 2} \${cy}, \${p2.x} \${p2.y}\`;
+        }
+
+        const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        pathEl.setAttribute('d', pathD);
+        pathEl.setAttribute('class', 'edge edge-' + d.rel);
+        pathEl.setAttribute('data-from', d.from);
+        pathEl.setAttribute('data-to', d.to);
+
+        pathEl.addEventListener('click', (evt) => {
+          evt.stopPropagation();
+          selectAndTraverseNode(d.to);
+        });
+        pathEl.addEventListener('mouseenter', (evt) => showEdgePopover(evt, d));
+        pathEl.addEventListener('mouseleave', hidePopover);
+
+        edgeGroup.node().appendChild(pathEl);
+      });
+
+      const nodeGroups = svgG.append('g')
+        .selectAll('g')
+        .data(nodes)
+        .enter()
+        .append('g')
+        .attr('class', 'node')
+        .attr('data-id', d => d.id)
+        .attr('transform', d => \`translate(\${d.x},\${d.y})\`);
+
+      nodeGroups.append('circle')
+        .attr('r', d => d.kind === 'badge' ? 14 : d.kind === 'symbol' || d.id.includes('#') ? 10 : 12)
+        .attr('class', d => {
+          if (d.kind === 'badge') return 'node-badge';
+          if (d.kind === 'symbol' || d.id.includes('#')) return 'node-symbol';
+          if (d.id.startsWith('A-SPEC')) return 'node-aspec';
+          if (d.id.startsWith('T-SPEC')) return 'node-tspec';
+          if (d.id.startsWith('H-SPEC')) return 'node-hspec';
+          if (d.id.startsWith('REQ')) return 'node-req';
+          return 'node-code';
+        });
+
+      nodeGroups.append('text')
+        .attr('x', 16)
+        .attr('y', 4)
+        .attr('fill', '#f8fafc')
+        .attr('font-size', '11px')
+        .text(d => d.id.length > 25 ? d.id.slice(0, 23) + '...' : d.id);
+
+      nodeGroups
+        .on('click', (event, d) => selectAndTraverseNode(d.id))
+        .on('mouseenter', (event, d) => showNodePopover(event, d, validEdges))
+        .on('mouseleave', hidePopover);
+    }
+
+    function selectAndTraverseNode(nodeId) {
+      if (!graphData) return;
+      selectedRootNodeId = nodeId;
+
+      const targetNode = graphData.nodes.find(n => n.id === nodeId);
+      if (!targetNode) return;
+
+      if (traversalHistory.length === 0 || traversalHistory[traversalHistory.length - 1] !== nodeId) {
+        traversalHistory.push(nodeId);
+        if (traversalHistory.length > 8) traversalHistory.shift();
+        renderBreadcrumbs();
+      }
+
+      filterGraphByScope();
+      renderTraversalInspector(targetNode);
+    }
+
+    function renderBreadcrumbs() {
+      const container = document.getElementById('breadcrumbTrail');
+      if (traversalHistory.length === 0) {
+        container.innerHTML = 'Select any node or click any edge to jump...';
+        return;
+      }
+
+      container.innerHTML = traversalHistory.map((id, index) => \`
+        <span class="crumb-item" onclick="jumpToHistoryIndex(\${index})">\${escapeHtml(id)}</span>
+        \${index < traversalHistory.length - 1 ? '<span class="crumb-sep">➔</span>' : ''}
+      \`).join('');
+    }
+
+    function jumpToHistoryIndex(index) {
+      const targetId = traversalHistory[index];
+      if (targetId) {
+        traversalHistory = traversalHistory.slice(0, index + 1);
+        renderBreadcrumbs();
+        selectAndTraverseNode(targetId);
+      }
+    }
+
+    function renderTraversalInspector(node) {
+      document.getElementById('inspectorNodeId').innerText = node.id;
+      document.getElementById('inspectorNodeType').innerText = node.kind || node.type;
+
+      document.getElementById('inspectorDetails').innerHTML = \`
+        <div style="margin-bottom:6px;"><strong>Title:</strong> \${escapeHtml(node.label || node.id)}</div>
+        <div><strong>Status:</strong> \${node.covered ? '<span style="color:#34d399; font-weight:bold;">COVERED / APPROVED</span>' : '<span style="color:#f87171; font-weight:bold;">ACTIVE</span>'}</div>
+      \`;
+
+      const currCat = getNodeCategory(node.id);
+      const connectedEdges = (graphData.edges || []).filter(e => getIdStr(e.from || e.source) === node.id || getIdStr(e.to || e.target) === node.id);
+      
+      const upstream = [];
+      const peers = [];
+      const downstream = [];
+
+      connectedEdges.forEach(e => {
+        const u = getIdStr(e.from || e.source);
+        const v = getIdStr(e.to || e.target);
+        const targetId = u === node.id ? v : u;
+        const targetCat = getNodeCategory(targetId);
+
+        if (targetCat === currCat && targetId !== node.id) {
+          peers.push({ targetId, rel: 'peer', label: '\${currCat} Peer Link' });
+        } else if (u === node.id) {
+          downstream.push({ targetId: v, rel: e.rel, direction: 'out' });
+        } else {
+          upstream.push({ targetId: u, rel: e.rel, direction: 'in' });
+        }
+      });
+
+      const container = document.getElementById('inspectorNeighborsContainer');
+      let html = '';
+
+      if (peers.length > 0) {
+        html += \`
+          <div class="neighbor-section">
+            <div class="neighbor-sec-title">🔄 Same-Level Peer Specs (\${peers.length})</div>
+            \${peers.map(item => \`
+              <div class="neighbor-item" onclick="selectAndTraverseNode('\${escapeHtml(item.targetId)}')">
+                <div>
+                  <div class="neighbor-id">\${escapeHtml(item.targetId)}</div>
+                  <span class="neighbor-rel rel-peer">PEER \${currCat}</span>
+                </div>
+                <button class="jump-btn jump-btn-peer">🎯 Jump to Peer</button>
+              </div>
+            \`).join('')}
+          </div>
+        \`;
+      }
+
+      if (upstream.length > 0) {
+        html += \`
+          <div class="neighbor-section">
+            <div class="neighbor-sec-title">⬆️ Upstream Dependencies / Parent Specs (\${upstream.length})</div>
+            \${upstream.map(item => \`
+              <div class="neighbor-item" onclick="selectAndTraverseNode('\${escapeHtml(item.targetId)}')">
+                <div>
+                  <div class="neighbor-id">\${escapeHtml(item.targetId)}</div>
+                  <span class="neighbor-rel rel-\${item.rel}">\${item.rel}</span>
+                </div>
+                <button class="jump-btn">🎯 Jump</button>
+              </div>
+            \`).join('')}
+          </div>
+        \`;
+      }
+
+      if (downstream.length > 0) {
+        html += \`
+          <div class="neighbor-section">
+            <div class="neighbor-sec-title">⬇️ Downstream Implemented Specs / Symbols (\${downstream.length})</div>
+            \${downstream.map(item => \`
+              <div class="neighbor-item" onclick="selectAndTraverseNode('\${escapeHtml(item.targetId)}')">
+                <div>
+                  <div class="neighbor-id">\${escapeHtml(item.targetId)}</div>
+                  <span class="neighbor-rel rel-\${item.rel}">\${item.rel}</span>
+                </div>
+                <button class="jump-btn">🎯 Jump</button>
+              </div>
+            \`).join('')}
+          </div>
+        \`;
+      }
+
+      if (upstream.length === 0 && peers.length === 0 && downstream.length === 0) {
+        html = '<div style="color:#94a3b8; font-size:12px; margin-top:12px;">No direct neighbors found for this node.</div>';
+      }
+
+      container.innerHTML = html;
+    }
+
+    // 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);
+      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');
+    }
+
+    function hidePopover() {
+      document.getElementById('popoverCard').classList.remove('active');
+    }
+
+    loadDashboard();
+  </script>
+</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);
+}
+/** `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;
+}