From f484c457d6c7f0025fc761d6f6d9d56dfd2b50e1 Mon Sep 17 00:00:00 2001
From: Aleksei Fedorov <ring.zero.sh@gmail.com>
Date: Sun, 24 May 2026 17:48:10 +0000
Subject: [PATCH] crypto pipeline

---
 index.html                                   |   6 +-
 kernel_ai/services/crypto/crypto_pipeline.py |  85 +++++++
 kernel_ai/services/execution.py              | 173 +++++++++++++
 kernel_ai/services/processes_runtime.py      |  46 ++++
 static/js/crypto-belt.js                     | 255 +++++++++++++++----
 static/js/kernel-dna.js                      |  51 +++-
 static/js/processes-belt.js                  | 251 +++++++++++++++++-
 static/js/security-belt.js                   |   4 +-
 templates/linux-crypto-subsystem.html        |   2 +-
 templates/linux-processes-subsystem.html     |   2 +-
 templates/linux-security-subsystem.html      |   2 +-
 11 files changed, 797 insertions(+), 80 deletions(-)

diff --git a/index.html b/index.html
index 540fa6c..9c258f9 100755
--- a/index.html
+++ b/index.html
@@ -92,11 +92,11 @@ <h2>Linux Kernel Ring 0 Visualization</h2>
     <script src="/static/js/active-connections.js?v=4"></script>
     <script src="/static/js/nginx_files.js?v=2"></script>
     <script src="/static/js/right-semicircle-menu.js?v=48"></script>
-    <script src="/static/js/kernel-dna.js?v=27"></script>
+    <script src="/static/js/kernel-dna.js?v=31"></script>
     <script src="/static/js/network-stack.js?v=6"></script>
     <script src="/static/js/devices-belt.js?v=14"></script>
-    <script src="/static/js/crypto-belt.js?v=31"></script>
-    <script src="/static/js/security-belt.js?v=11"></script>
+    <script src="/static/js/crypto-belt.js?v=38"></script>
+    <script src="/static/js/security-belt.js?v=13"></script>
     <script src="/static/js/filesystem-map.js?v=10"></script>
     <script src="/static/js/kernel-context-menu.js?v=29"></script>
     <script>
diff --git a/kernel_ai/services/crypto/crypto_pipeline.py b/kernel_ai/services/crypto/crypto_pipeline.py
index 0895662..f6ae351 100644
--- a/kernel_ai/services/crypto/crypto_pipeline.py
+++ b/kernel_ai/services/crypto/crypto_pipeline.py
@@ -211,10 +211,94 @@ def collect_crypto_realtime(crypto_prev, callbacks=None, psutil_module=None, log
         algorithm_requesters=algorithm_requesters,
     )
     entropy_cloud = collect_entropy_cloud_status_fn()
+    proc_crypto_names = {str(entry.get("name") or "").lower() for entry in proc_crypto_entries if isinstance(entry, dict)}
+    client_names = {str(row.get("name") or row.get("client") or "").lower() for row in kernel_clients if isinstance(row, dict)}
+    protocol_names = {str(item.get("protocol") or "").upper() for item in items}
+    process_names = {str(item.get("process") or "").lower() for item in items}
+    active_algos = {str(item.get("algorithm") or "").lower() for item in items}
+    entropy_ready = str((entropy_cloud or {}).get("crng_state") or "").lower() in {"ready", "initialized", "crng_ready"}
+
+    def _zone(zone_id, label, active, status, evidence, strength=0.5):
+        return {
+            "id": zone_id,
+            "label": label,
+            "active": bool(active),
+            "status": status,
+            "strength": round(max(0.0, min(1.0, float(strength))), 3),
+            "evidence": evidence,
+        }
+
+    protected_zones = [
+        _zone(
+            "tls",
+            "TLS / kTLS",
+            "TLS" in protocol_names,
+            "active" if "TLS" in protocol_names else "idle",
+            {"sessions": sum(1 for i in items if i.get("protocol") == "TLS"), "terminators": sorted(tls_listener_names)[:4]},
+            min(1.0, 0.35 + sum(1 for i in items if i.get("protocol") == "TLS") / 8.0),
+        ),
+        _zone(
+            "block",
+            "dm-crypt / block",
+            any("xts" in algo or "aes" in algo for algo in active_algos | proc_crypto_names),
+            "active" if any("xts" in algo or "aes" in algo for algo in active_algos | proc_crypto_names) else "unknown",
+            {"algorithms": sorted([x for x in (active_algos | proc_crypto_names) if x])[:5]},
+            0.72 if any("aes" in algo for algo in active_algos | proc_crypto_names) else 0.35,
+        ),
+        _zone(
+            "ipsec",
+            "IPsec / xfrm",
+            any("xfrm" in name or "ipsec" in name for name in process_names | client_names),
+            "active" if any("xfrm" in name or "ipsec" in name for name in process_names | client_names) else "idle",
+            {"clients": sorted([x for x in client_names if x])[:5]},
+            0.62,
+        ),
+        _zone(
+            "fscrypt",
+            "fscrypt",
+            any("fscrypt" in name for name in client_names | proc_crypto_names),
+            "active" if any("fscrypt" in name for name in client_names | proc_crypto_names) else "unknown",
+            {"clients": sorted([x for x in client_names if "fs" in x])[:4]},
+            0.48,
+        ),
+        _zone(
+            "keyring",
+            "keyring",
+            any("key" in name for name in client_names | process_names),
+            "active" if any("key" in name for name in client_names | process_names) else "idle",
+            {"signals": sorted([x for x in (client_names | process_names) if "key" in x])[:4]},
+            0.52,
+        ),
+        _zone(
+            "entropy",
+            "random / entropy",
+            entropy_ready,
+            "active" if entropy_ready else "weak signal",
+            {"crng_state": (entropy_cloud or {}).get("crng_state"), "pool_bits": (entropy_cloud or {}).get("entropy_pool_bits")},
+            0.86 if entropy_ready else 0.34,
+        ),
+        _zone(
+            "module_sig",
+            "module signature",
+            any("sha" in algo or "rsa" in algo or "ecdsa" in algo for algo in proc_crypto_names | active_algos),
+            "active" if any("sha" in algo or "rsa" in algo or "ecdsa" in algo for algo in proc_crypto_names | active_algos) else "unknown",
+            {"algorithms": sorted([x for x in (proc_crypto_names | active_algos) if "sha" in x or "rsa" in x or "ecdsa" in x])[:5]},
+            0.58,
+        ),
+        _zone(
+            "ima_evm",
+            "IMA / EVM",
+            any("ima" in name or "evm" in name for name in client_names | process_names),
+            "active" if any("ima" in name or "evm" in name for name in client_names | process_names) else "unknown",
+            {"signals": sorted([x for x in (client_names | process_names) if "ima" in x or "evm" in x])[:4]},
+            0.42,
+        ),
+    ]
 
     return {
         "items": items[:24],
         "processes": unique_processes[:16],
+        "protected_zones": protected_zones,
         "meta": {
             "ops_per_sec": ops_per_sec,
             "tls_sessions": sum(1 for i in items if i.get("protocol") == "TLS"),
@@ -228,6 +312,7 @@ def collect_crypto_realtime(crypto_prev, callbacks=None, psutil_module=None, log
             "entropy_cloud": entropy_cloud,
             "crypto_decision_pipeline": crypto_decision_pipelines.get("aes", {}),
             "crypto_decision_pipelines": crypto_decision_pipelines,
+            "protected_zones": protected_zones,
             "source": "live-heuristic-v2",
             "timestamp": datetime.utcnow().isoformat() + "Z",
         },
diff --git a/kernel_ai/services/execution.py b/kernel_ai/services/execution.py
index 9b3e041..8dd3af4 100644
--- a/kernel_ai/services/execution.py
+++ b/kernel_ai/services/execution.py
@@ -12,6 +12,178 @@
 from kernel_ai.sentry_helpers import capture_exception
 
 
+def _read_key_value_proc_file(path: str) -> dict:
+    out = {}
+    try:
+        with open(path, "r", encoding="utf-8", errors="ignore") as f:
+            for raw in f:
+                parts = raw.split()
+                if len(parts) != 2:
+                    continue
+                try:
+                    out[parts[0]] = int(parts[1])
+                except ValueError:
+                    continue
+    except OSError:
+        return {}
+    return out
+
+
+def _read_memory_psi_avg10() -> dict:
+    result = {"some": 0.0, "full": 0.0}
+    try:
+        with open("/proc/pressure/memory", "r", encoding="utf-8", errors="ignore") as f:
+            for raw in f:
+                parts = raw.split()
+                if not parts:
+                    continue
+                scope = parts[0]
+                if scope not in result:
+                    continue
+                for token in parts[1:]:
+                    if token.startswith("avg10="):
+                        try:
+                            result[scope] = float(token.split("=", 1)[1])
+                        except ValueError:
+                            pass
+                        break
+    except OSError:
+        return result
+    return result
+
+
+def _read_tcp_retrans_segs() -> int:
+    try:
+        with open("/proc/net/snmp", "r", encoding="utf-8", errors="ignore") as f:
+            lines = [line.strip() for line in f if line.startswith("Tcp:")]
+    except OSError:
+        return 0
+    if len(lines) < 2:
+        return 0
+    headers = lines[-2].split()[1:]
+    values = lines[-1].split()[1:]
+    for key, value in zip(headers, values):
+        if key != "RetransSegs":
+            continue
+        try:
+            return int(value)
+        except ValueError:
+            return 0
+    return 0
+
+
+def _read_softirq_totals() -> dict:
+    totals = {}
+    try:
+        with open("/proc/softirqs", "r", encoding="utf-8", errors="ignore") as f:
+            lines = f.readlines()
+    except OSError:
+        return totals
+    for raw in lines[1:]:
+        if ":" not in raw:
+            continue
+        left, right = raw.split(":", 1)
+        name = left.strip()
+        total = 0
+        for token in right.split():
+            if token.isdigit():
+                total += int(token)
+        if total:
+            totals[name] = total
+    return totals
+
+
+def _read_loadavg() -> dict:
+    try:
+        with open("/proc/loadavg", "r", encoding="utf-8", errors="ignore") as f:
+            parts = f.read().split()
+    except OSError:
+        return {"load1": 0.0, "runnable": 0, "threads": 0}
+    runnable = 0
+    threads = 0
+    if len(parts) >= 4 and "/" in parts[3]:
+        left, right = parts[3].split("/", 1)
+        try:
+            runnable = int(left)
+            threads = int(right)
+        except ValueError:
+            pass
+    try:
+        load1 = float(parts[0])
+    except (IndexError, ValueError):
+        load1 = 0.0
+    return {"load1": load1, "runnable": runnable, "threads": threads}
+
+
+def build_kernel_anomaly_mutations() -> list[dict]:
+    """Build lightweight Kernel DNA mutations from procfs symptom counters."""
+    mutations = []
+    vmstat = _read_key_value_proc_file("/proc/vmstat")
+    psi = _read_memory_psi_avg10()
+    loadavg = _read_loadavg()
+    retrans = _read_tcp_retrans_segs()
+    softirq = _read_softirq_totals()
+    cpu_count = max(1, psutil.cpu_count() or 1)
+
+    if float(psi.get("some") or 0.0) >= 1.0 or float(psi.get("full") or 0.0) >= 0.2:
+        mutations.append(
+            {
+                "type": "memory_pressure",
+                "severity": "high" if float(psi.get("full") or 0.0) >= 0.2 else "medium",
+                "message": f"Memory PSI pressure some10={float(psi.get('some') or 0.0):.2f} full10={float(psi.get('full') or 0.0):.2f}",
+                "position": 0.64,
+                "source": "/proc/pressure/memory",
+            }
+        )
+
+    if int(vmstat.get("pgmajfault") or 0) > 0 and int(vmstat.get("pgscan_direct") or 0) > 0:
+        mutations.append(
+            {
+                "type": "page_reclaim_pressure",
+                "severity": "medium",
+                "message": f"Major faults and direct reclaim observed pgmajfault={int(vmstat.get('pgmajfault') or 0)} pgscan_direct={int(vmstat.get('pgscan_direct') or 0)}",
+                "position": 0.72,
+                "source": "/proc/vmstat",
+            }
+        )
+
+    if retrans > 0:
+        mutations.append(
+            {
+                "type": "tcp_retransmission",
+                "severity": "medium",
+                "message": f"TCP retransmissions observed RetransSegs={retrans}",
+                "position": 0.34,
+                "source": "/proc/net/snmp",
+            }
+        )
+
+    net_softirq = int(softirq.get("NET_RX") or 0) + int(softirq.get("NET_TX") or 0)
+    timer_softirq = int(softirq.get("TIMER") or 0)
+    if net_softirq > 0 and timer_softirq > 0 and net_softirq > timer_softirq * 3:
+        mutations.append(
+            {
+                "type": "net_softirq_pressure",
+                "severity": "medium",
+                "message": f"NET softirq dominates timer path net={net_softirq} timer={timer_softirq}",
+                "position": 0.86,
+                "source": "/proc/softirqs",
+            }
+        )
+
+    if int(loadavg.get("runnable") or 0) > cpu_count * 2:
+        mutations.append(
+            {
+                "type": "scheduler_runqueue_pressure",
+                "severity": "medium",
+                "message": f"Runnable tasks exceed CPU capacity runnable={int(loadavg.get('runnable') or 0)} cpus={cpu_count}",
+                "position": 0.18,
+                "source": "/proc/loadavg",
+            }
+        )
+    return mutations[:6]
+
+
 def get_execution_context_data(syscall_names, map_interrupt_to_subsystem_fn, exec_context_prev):
     """Collect execution context payload used by Ring-1 visualization."""
     if platform.system() != "Linux":
@@ -383,5 +555,6 @@ def get_kernel_dna_data(get_real_system_calls_fn, map_syscall_to_subsystem_fn, m
     if locks and locks[0]["count"] > 100:
         mutations.append({"type": "lock_contention", "severity": "medium", "message": f'High lock contention: {locks[0]["count"]} active locks', "position": 0.7})
 
+    mutations.extend(build_kernel_anomaly_mutations())
     dna_data["mutations"] = mutations
     return dna_data
diff --git a/kernel_ai/services/processes_runtime.py b/kernel_ai/services/processes_runtime.py
index afe0d9f..16a9162 100644
--- a/kernel_ai/services/processes_runtime.py
+++ b/kernel_ai/services/processes_runtime.py
@@ -316,6 +316,46 @@ def _parse_tcp_snmp_counters() -> dict:
     return out
 
 
+def _build_procfs_map(sampled_pid_count: int, network_count: int, memory_visual: dict) -> dict:
+    """Build a lightweight /proc coverage map without walking every proc file."""
+    try:
+        proc_entries = os.listdir("/proc")
+    except OSError:
+        proc_entries = []
+    pid_dirs = [name for name in proc_entries if name.isdigit()]
+    known_sources = [
+        ("/proc/[pid]/status", "process", max(0, int(sampled_pid_count))),
+        ("/proc/[pid]/fd", "process", max(0, int(sampled_pid_count))),
+        ("/proc/[pid]/stat", "process", max(0, int(sampled_pid_count))),
+        ("/proc/net/tcp", "network", max(0, int(network_count))),
+        ("/proc/net/snmp", "network", 1),
+        ("/proc/meminfo", "memory", 1),
+        ("/proc/vmstat", "memory", len((memory_visual.get("kernel_memory_state") or {}).get("vmstat") or {})),
+        ("/proc/pressure/memory", "memory", len((memory_visual.get("kernel_memory_state") or {}).get("psi_memory") or {})),
+        ("/proc/sys/kernel/yama/ptrace_scope", "security", 1),
+        ("/proc/interrupts", "devices", 1),
+    ]
+    sources = []
+    for path, group, count in known_sources:
+        static_path = path.replace("[pid]", "1")
+        exists = path.startswith("/proc/[pid]") or os.path.exists(static_path)
+        sources.append(
+            {
+                "path": path,
+                "group": group,
+                "active": bool(exists and count >= 0),
+                "samples": int(count or 0),
+            }
+        )
+    return {
+        "pid_dirs": len(pid_dirs),
+        "top_level_entries": len(proc_entries),
+        "sampled_pids": max(0, int(sampled_pid_count)),
+        "coverage_note": "procfs atlas is sampled, not a full recursive /proc mirror",
+        "sources": sources,
+    }
+
+
 def _semantic_op(label: str, op_type: str, active: bool, weight: float, source: str, evidence: dict | None = None) -> dict:
     return {
         "label": label,
@@ -960,6 +1000,11 @@ def _add_edge(src_pid, dst_pid, edge_type, weight):
                 "psi_factor": 1.0,
             },
         }
+    procfs_map = _build_procfs_map(
+        sampled_pid_count=len(nodes),
+        network_count=len(network_tracing),
+        memory_visual=memory_visual,
+    )
 
     return {
         "timestamp": datetime.utcnow().isoformat() + "Z",
@@ -967,6 +1012,7 @@ def _add_edge(src_pid, dst_pid, edge_type, weight):
         "network_tracing": network_tracing,
         "security_hooks": security_hooks,
         "semantic_ops": semantic_ops,
+        "procfs_map": procfs_map,
         "neural_graph": {"nodes": nodes, "edges": edges},
         "memory_visual": memory_visual,
         "meta": {
diff --git a/static/js/crypto-belt.js b/static/js/crypto-belt.js
index 7c70f34..83b4413 100644
--- a/static/js/crypto-belt.js
+++ b/static/js/crypto-belt.js
@@ -1,7 +1,7 @@
 // Crypto subsystem realtime interaction visualization
-// Version: 4
+// Version: 10
 
-debugLog('🔐 crypto-belt.js v4: Script loading...');
+debugLog('🔐 crypto-belt.js v10: Script loading...');
 
 class CryptoSubsystemVisualization {
     constructor() {
@@ -546,6 +546,156 @@ class CryptoSubsystemVisualization {
         });
     }
 
+    getCryptoLayout(width, height) {
+        const rightColumnX = Math.floor(width * 0.67);
+        const rightColumnW = Math.max(360, width - rightColumnX - 16);
+        const leftColumnX = 26;
+        const leftColumnW = Math.max(300, Math.floor(width * 0.26));
+        const middleColumnX = Math.max(
+            leftColumnX + leftColumnW + 18,
+            Math.floor(width * 0.38)
+        );
+        const middleColumnW = Math.max(340, rightColumnX - middleColumnX - 16);
+        const flowBottomY = 530;
+        const lowerRowY = Math.max(flowBottomY + 36, Math.floor(height * 0.57));
+        const lowerRowH = Math.max(232, Math.min(286, height - lowerRowY - 20));
+        const protectedZonesY = 128;
+        const protectedZonesH = 168;
+        const algoCompetitionY = protectedZonesY + protectedZonesH + 14;
+        return {
+            rightColumnX,
+            rightColumnW,
+            leftColumnX,
+            leftColumnW,
+            middleColumnX,
+            middleColumnW,
+            lowerRowY,
+            lowerRowH,
+            protectedZonesY,
+            protectedZonesH,
+            algoCompetitionY,
+            materialCardH: lowerRowH
+        };
+    }
+
+    drawProtectedKernelZones(layer, payload, width, height) {
+        const zones = Array.isArray(payload?.protected_zones)
+            ? payload.protected_zones
+            : (Array.isArray(payload?.meta?.protected_zones) ? payload.meta.protected_zones : []);
+        const layout = this.getCryptoLayout(width, height);
+        const panelX = layout.rightColumnX;
+        const panelY = layout.protectedZonesY;
+        const panelW = layout.rightColumnW;
+        const panelH = layout.protectedZonesH;
+        const cx = panelX + panelW * 0.5;
+        const cy = panelY + 70;
+        const radius = Math.min(40, panelW * 0.18);
+        const panel = layer.append('g').attr('class', 'crypto-protected-zones');
+
+        panel.append('rect')
+            .attr('x', panelX)
+            .attr('y', panelY)
+            .attr('width', panelW)
+            .attr('height', panelH)
+            .attr('rx', 10)
+            .style('fill', 'rgba(7, 10, 16, 0.78)')
+            .style('stroke', 'rgba(150, 178, 220, 0.34)')
+            .style('stroke-width', 1);
+        panel.append('text')
+            .attr('x', panelX + 14)
+            .attr('y', panelY + 22)
+            .style('font-family', 'Share Tech Mono, monospace')
+            .style('font-size', '10px')
+            .style('fill', '#d7ddea')
+            .text('PROTECTED KERNEL ZONES');
+        panel.append('text')
+            .attr('x', panelX + 14)
+            .attr('y', panelY + 38)
+            .style('font-family', 'Share Tech Mono, monospace')
+            .style('font-size', '8px')
+            .style('fill', '#8795aa')
+            .text('segmented shield: protected kernel paths');
+
+        const activeCount = zones.filter((z) => z.active).length;
+        const weakCount = zones.filter((z) => !z.active || String(z.status || '').includes('weak')).length;
+        panel.append('text')
+            .attr('x', panelX + panelW - 116)
+            .attr('y', panelY + 22)
+            .style('font-family', 'Share Tech Mono, monospace')
+            .style('font-size', '8px')
+            .style('fill', '#9fb1c8')
+            .text(`protected ${activeCount} · weak ${weakCount}`);
+
+        panel.append('circle')
+            .attr('cx', cx)
+            .attr('cy', cy)
+            .attr('r', radius * 0.56)
+            .style('fill', 'rgba(12, 18, 26, 0.92)')
+            .style('stroke', 'rgba(214, 225, 242, 0.22)')
+            .style('stroke-width', 1);
+
+        const safeZones = zones.length ? zones : [
+            { id: 'tls', label: 'TLS / kTLS', active: false, status: 'unknown', strength: 0.2 },
+            { id: 'block', label: 'dm-crypt / block', active: false, status: 'unknown', strength: 0.2 },
+            { id: 'entropy', label: 'random / entropy', active: false, status: 'unknown', strength: 0.2 }
+        ];
+        const arc = d3.arc().innerRadius(radius * 0.64).outerRadius(radius).cornerRadius(3);
+        const angleStep = (Math.PI * 2) / Math.max(1, safeZones.length);
+        const colorFor = (zone) => {
+            const status = String(zone.status || '');
+            if (zone.active && status === 'active') return '#78efc1';
+            if (zone.active) return '#bfe9ff';
+            if (status.includes('weak')) return '#ffd279';
+            return '#7d899a';
+        };
+        const shield = panel.append('g').attr('transform', `translate(${cx},${cy})`);
+        safeZones.forEach((zone, idx) => {
+            const start = -Math.PI / 2 + idx * angleStep + 0.03;
+            const end = start + angleStep - 0.06;
+            const color = colorFor(zone);
+            shield.append('path')
+                .attr('d', arc({ startAngle: start, endAngle: end }))
+                .style('fill', color)
+                .style('fill-opacity', zone.active ? (0.18 + Number(zone.strength || 0.4) * 0.42) : 0.08)
+                .style('stroke', color)
+                .style('stroke-opacity', zone.active ? 0.86 : 0.32)
+                .style('stroke-width', zone.active ? 1.4 : 0.8);
+        });
+        shield.append('text')
+            .attr('text-anchor', 'middle')
+            .attr('y', -3)
+            .style('font-family', 'Share Tech Mono, monospace')
+            .style('font-size', '9px')
+            .style('fill', '#d7ddea')
+            .text('KERNEL');
+        shield.append('text')
+            .attr('text-anchor', 'middle')
+            .attr('y', 11)
+            .style('font-family', 'Share Tech Mono, monospace')
+            .style('font-size', '8px')
+            .style('fill', '#92a2b8')
+            .text('CRYPTO SHIELD');
+
+        safeZones.slice(0, 5).forEach((zone, idx) => {
+            const rowY = panelY + 104 + idx * 12;
+            const color = colorFor(zone);
+            panel.append('rect')
+                .attr('x', panelX + 14)
+                .attr('y', rowY - 6)
+                .attr('width', 7)
+                .attr('height', 7)
+                .style('fill', color)
+                .style('opacity', zone.active ? 0.9 : 0.38);
+            panel.append('text')
+                .attr('x', panelX + 28)
+                .attr('y', rowY)
+                .style('font-family', 'Share Tech Mono, monospace')
+                .style('font-size', '9px')
+                .style('fill', zone.active ? '#cdd8e8' : '#78869a')
+                .text(`${String(zone.label || zone.id).slice(0, 28)} · ${String(zone.status || 'unknown').toUpperCase()}`);
+        });
+    }
+
     getCompetitionPayload(meta) {
         const selected = String(this.selectedCompetitionAlgorithm || 'AES').toLowerCase();
         const groups = meta?.algorithm_competitions || null;
@@ -598,16 +748,21 @@ class CryptoSubsystemVisualization {
         };
     }
 
-    drawAlgorithmCompetition(layer, meta, width) {
+    drawAlgorithmCompetition(layer, meta, width, height) {
         const comp = this.getCompetitionPayload(meta);
         const request = String(comp.request || this.selectedCompetitionAlgorithm || 'AES').toUpperCase();
         const impls = Array.isArray(comp.implementations) ? comp.implementations.slice(0, 5) : [];
         const selectedName = String(comp?.selected?.name || '').toLowerCase();
 
-        const panelX = Math.floor(width * 0.73);
-        const panelY = 130;
-        const panelW = Math.max(260, Math.floor(width * 0.24));
-        const panelH = Math.max(220, 170 + impls.length * 30);
+        const layout = this.getCryptoLayout(width, height);
+        const panelX = layout.rightColumnX;
+        const panelY = layout.algoCompetitionY;
+        const panelW = layout.rightColumnW;
+        const listRowStep = 18;
+        const panelH = Math.max(
+            196,
+            Math.min(layout.lowerRowY - panelY - 12, 118 + impls.length * listRowStep)
+        );
 
         const panel = layer.append('g').attr('class', 'crypto-algo-competition');
         panel.append('rect')
@@ -670,7 +825,7 @@ class CryptoSubsystemVisualization {
             .style('fill', '#99a8bd')
             .text(`request ${request} -> lookup -> pick max priority`);
 
-        const stepsY = panelY + 92;
+        const stepsY = panelY + 80;
         panel.append('text')
             .attr('x', panelX + 14)
             .attr('y', stepsY)
@@ -683,19 +838,19 @@ class CryptoSubsystemVisualization {
             .attr('x1', panelX + 20)
             .attr('y1', stepsY + 8)
             .attr('x2', panelX + 20)
-            .attr('y2', stepsY + 28)
+            .attr('y2', stepsY + 22)
             .style('stroke', '#7c8ca2')
             .style('stroke-width', 1);
 
         panel.append('text')
             .attr('x', panelX + 14)
-            .attr('y', stepsY + 42)
+            .attr('y', stepsY + 34)
             .style('font-family', 'Share Tech Mono, monospace')
             .style('font-size', '10px')
             .style('fill', '#b3bece')
             .text('CRYPTO LOOKUP');
 
-        const baseY = stepsY + 64;
+        const baseY = stepsY + 42;
         if (!impls.length) {
             panel.append('text')
                 .attr('x', panelX + 14)
@@ -708,7 +863,7 @@ class CryptoSubsystemVisualization {
         }
 
         impls.forEach((impl, idx) => {
-            const y = baseY + idx * 30;
+            const y = baseY + idx * listRowStep;
             const name = String(impl.name || 'unknown');
             const prio = Number(impl.priority || 0);
             const isSelected = name.toLowerCase() === selectedName;
@@ -717,7 +872,7 @@ class CryptoSubsystemVisualization {
                 .attr('x', panelX + 12)
                 .attr('y', y - 12)
                 .attr('width', panelW - 24)
-                .attr('height', 22)
+                .attr('height', 16)
                 .attr('rx', 5)
                 .style('fill', isSelected ? 'rgba(20, 39, 29, 0.9)' : 'rgba(14, 18, 24, 0.85)')
                 .style('stroke', isSelected ? 'rgba(114, 242, 173, 0.8)' : 'rgba(150, 162, 182, 0.28)')
@@ -725,7 +880,7 @@ class CryptoSubsystemVisualization {
 
             panel.append('text')
                 .attr('x', panelX + 20)
-                .attr('y', y + 2)
+                .attr('y', y + 1)
                 .style('font-family', 'Share Tech Mono, monospace')
                 .style('font-size', '10px')
                 .style('fill', isSelected ? '#9effca' : '#c5cedb')
@@ -733,8 +888,8 @@ class CryptoSubsystemVisualization {
 
             if (isSelected) {
                 panel.append('text')
-                    .attr('x', panelX + panelW - 70)
-                    .attr('y', y + 2)
+                    .attr('x', panelX + panelW - 78)
+                    .attr('y', y + 1)
                     .style('font-family', 'Share Tech Mono, monospace')
                     .style('font-size', '9px')
                     .style('fill', '#9effca')
@@ -751,10 +906,11 @@ class CryptoSubsystemVisualization {
         const selectedDriver = String(pipeline.selected_driver || 'unknown');
         const fallbackDriver = String(pipeline.fallback_driver || 'none');
         const fallbackActive = Boolean(pipeline.fallback_active);
-        const panelX = Math.floor(width * 0.73);
-        const panelW = Math.max(260, Math.floor(width * 0.24));
-        const panelY = Math.max(450, Math.floor(height * 0.52));
-        const panelH = 278;
+        const layout = this.getCryptoLayout(width, height);
+        const panelX = layout.rightColumnX;
+        const panelW = layout.rightColumnW;
+        const panelY = layout.lowerRowY;
+        const panelH = layout.lowerRowH;
 
         const panel = layer.append('g').attr('class', 'crypto-decision-pipeline');
         panel.append('rect')
@@ -817,24 +973,25 @@ class CryptoSubsystemVisualization {
                     });
                 row.append('rect')
                     .attr('x', panelX + 10)
-                    .attr('y', panelY + 46 + idx * 14)
+                    .attr('y', panelY + 46 + idx * 18)
                     .attr('width', panelW - 20)
-                    .attr('height', 13)
+                    .attr('height', 16)
                     .attr('rx', 3)
                 .style('fill', isActiveRequester ? 'rgba(37, 58, 92, 0.62)' : 'transparent')
                 .style('stroke', isActiveRequester ? 'rgba(120, 170, 245, 0.72)' : 'transparent')
                     .style('stroke-width', 0.8);
                 row.append('text')
                     .attr('x', panelX + 14)
-                    .attr('y', panelY + 56 + idx * 14)
+                    .attr('y', panelY + 58 + idx * 18)
                     .style('font-family', 'Share Tech Mono, monospace')
-                    .style('font-size', '9px')
+                    .style('font-size', '10px')
                     .style('fill', isActiveRequester ? '#e1eeff' : (idx === 0 ? '#cce2ff' : '#95a6bc'))
                     .text(`- ${reqName} [${reqKind}] (${reqScore})`);
             });
         }
 
-        const stepsBaseY = panelY + 102;
+        const stepsBaseY = panelY + 108;
+        const lineStep = 22;
         const lines = [
             `request (${request}) from ${String(pipeline.request_origin || 'user/kernel request')}`,
             `tfm lookup: ${String(pipeline.tfm_lookup || 'crypto_lookup(?)')}`,
@@ -847,16 +1004,16 @@ class CryptoSubsystemVisualization {
         lines.forEach((line, idx) => {
             panel.append('text')
                 .attr('x', panelX + 14)
-                .attr('y', stepsBaseY + idx * 22)
+                .attr('y', stepsBaseY + idx * lineStep)
                 .style('font-family', 'Share Tech Mono, monospace')
                 .style('font-size', '10px')
-                .style('fill', idx === 5 ? '#a4ffcf' : '#b8c3d4')
+                .style('fill', line.startsWith('selected') ? '#a4ffcf' : '#b8c3d4')
                 .text(line);
         });
 
         panel.append('text')
             .attr('x', panelX + 14)
-            .attr('y', panelY + 240)
+            .attr('y', panelY + panelH - 24)
             .style('font-family', 'Share Tech Mono, monospace')
             .style('font-size', '10px')
             .style('fill', fallbackActive ? '#ffb0b0' : '#95a6bc')
@@ -864,7 +1021,7 @@ class CryptoSubsystemVisualization {
 
         panel.append('text')
             .attr('x', panelX + 14)
-            .attr('y', panelY + 258)
+            .attr('y', panelY + panelH - 10)
             .style('font-family', 'Share Tech Mono, monospace')
             .style('font-size', '9px')
             .style('fill', '#8393a8')
@@ -942,13 +1099,11 @@ class CryptoSubsystemVisualization {
         const requesters = Array.isArray(pipeline?.requesters) ? pipeline.requesters : [];
         const topRequester = requesters.length ? requesters[0] : null;
 
-        const rightColumnX = Math.floor(width * 0.73);
-        const cardX = Math.floor(width * 0.41) + 10;
-        const maxSafeW = Math.max(300, rightColumnX - cardX - 16);
-        const cardW = Math.max(330, Math.min(Math.min(470, Math.floor(width * 0.3)), maxSafeW));
-        const cardH = 226;
-        const decisionPanelY = Math.max(450, Math.floor(height * 0.52));
-        const cardY = decisionPanelY;
+        const layout = this.getCryptoLayout(width, height);
+        const cardX = layout.middleColumnX;
+        const cardW = layout.middleColumnW;
+        const cardH = layout.materialCardH;
+        const cardY = layout.lowerRowY;
 
         const card = layer.append('g').attr('class', 'crypto-material-card');
         card.append('rect')
@@ -1088,15 +1243,12 @@ class CryptoSubsystemVisualization {
     drawEntropyCloud(layer, meta, width, height) {
         const entropy = this.getEntropyPayload(meta);
         const sources = Array.isArray(entropy.sources) ? entropy.sources.slice(0, 4) : [];
-        const rightColumnX = Math.floor(width * 0.73);
-        const panelX = Math.floor(width * 0.41) + 10;
-        const maxSafeW = Math.max(300, rightColumnX - panelX - 16);
-        const panelW = Math.max(330, Math.min(Math.min(470, Math.floor(width * 0.3)), maxSafeW));
-        const decisionPanelY = Math.max(450, Math.floor(height * 0.52));
-        const materialCardH = 226;
-        const panelY = decisionPanelY + materialCardH + 16;
-        const maxPanelH = Math.max(120, height - panelY - 22);
-        const panelH = Math.min(238, maxPanelH);
+        const layout = this.getCryptoLayout(width, height);
+        const panelX = layout.middleColumnX;
+        const panelW = layout.middleColumnW;
+        const panelY = layout.lowerRowY + layout.materialCardH + 16;
+        const maxPanelH = Math.max(140, height - panelY - 22);
+        const panelH = Math.min(248, maxPanelH);
         const panel = layer.append('g').attr('class', 'crypto-entropy-cloud');
 
         panel.append('rect')
@@ -1268,16 +1420,14 @@ class CryptoSubsystemVisualization {
         const syncAsync = stage.sync_async || {};
         const offload = Array.isArray(stage.hw_offload) ? stage.hw_offload.slice(0, 5) : [];
 
-        const panelW = Math.max(270, Math.floor(width * 0.23));
-        const baseX = 26;
+        const layout = this.getCryptoLayout(width, height);
+        const panelW = layout.leftColumnW;
+        const baseX = layout.leftColumnX;
         const gap = 12;
         const clientsH = 134;
         const queueH = 86;
         const offloadH = 116;
-        const totalH = clientsH + queueH + offloadH + (gap * 2);
-        // Align left stage stack with Algorithm Material Card top level.
-        const decisionPanelY = Math.max(450, Math.floor(height * 0.52));
-        const baseY = Math.min(decisionPanelY, Math.max(180, height - totalH - 20));
+        const baseY = layout.lowerRowY;
         const isAllSelected = this.selectedClientFilters.size === 0;
 
         const drawPanelShell = (x, y, w, h, title) => {
@@ -1591,10 +1741,11 @@ class CryptoSubsystemVisualization {
         this.drawGrid(layer, width, height);
         this.drawProtocolLegend(layer);
         this.drawEntropyCloud(layer, payload?.meta || {}, width, height);
-        this.drawAlgorithmCompetition(layer, payload?.meta || {}, width);
+        this.drawAlgorithmCompetition(layer, payload?.meta || {}, width, height);
         this.drawDecisionPipeline(layer, payload?.meta || {}, width, height);
         this.drawAlgorithmMaterialCard(layer, payload?.meta || {}, width, height);
         this.drawStage1Panels(layer, payload?.meta || {}, width, height);
+        this.drawProtectedKernelZones(layer, payload, width, height);
 
         const sourceLanes = Array.isArray(payload.items) ? payload.items : [];
         const lanes = sourceLanes.filter((lane) => (
diff --git a/static/js/kernel-dna.js b/static/js/kernel-dna.js
index a34d05f..7bce41c 100755
--- a/static/js/kernel-dna.js
+++ b/static/js/kernel-dna.js
@@ -1,10 +1,10 @@
 // Kernel DNA Visualization - Double Helix Structure
 // Represents Linux kernel execution paths as DNA strands
-// Version: 21 — UX: enter/exit transitions, loading skeleton, staggered UI reveal
+// Version: 31 — stable process selector during refresh
 
-debugLog('🧬 kernel-dna.js v21: Script loading...');
-debugLog('🧬 kernel-dna.js v21: THREE available:', typeof THREE);
-debugLog('🧬 kernel-dna.js v21: Browser:', navigator.userAgent);
+debugLog('🧬 kernel-dna.js v31: Script loading...');
+debugLog('🧬 kernel-dna.js v31: THREE available:', typeof THREE);
+debugLog('🧬 kernel-dna.js v31: Browser:', navigator.userAgent);
 
 class KernelDNAVisualization {
     constructor() {
@@ -443,6 +443,32 @@ class KernelDNAVisualization {
         const yellowMarker = new THREE.Mesh(markerGeometry, markerMaterial);
         yellowMarker.position.copy(point);
         yellowMarker.position.y += 0.3; // Position above mutation
+
+        const labelText = String(mutationData.type || 'anomaly').replace(/_/g, ' ').toUpperCase().slice(0, 24);
+        const canvas = document.createElement('canvas');
+        canvas.width = 256;
+        canvas.height = 48;
+        const ctx = canvas.getContext('2d');
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = 'rgba(14, 17, 20, 0.72)';
+        ctx.fillRect(0, 6, canvas.width, 30);
+        ctx.strokeStyle = 'rgba(230, 193, 90, 0.7)';
+        ctx.strokeRect(0.5, 6.5, canvas.width - 1, 29);
+        ctx.fillStyle = '#E6C15A';
+        ctx.font = '18px "Share Tech Mono", monospace';
+        ctx.fillText(labelText, 10, 27);
+        const labelTexture = new THREE.CanvasTexture(canvas);
+        const labelMaterial = new THREE.SpriteMaterial({
+            map: labelTexture,
+            transparent: true,
+            depthTest: false,
+            depthWrite: false
+        });
+        const label = new THREE.Sprite(labelMaterial);
+        label.position.copy(point);
+        label.position.y += 0.56;
+        label.position.x += 0.38;
+        label.scale.set(1.35, 0.25, 1);
         
         // Store reference for cleanup and animation
         mutation.userData.isMutation = true;
@@ -451,6 +477,7 @@ class KernelDNAVisualization {
         
         group.add(mutation);
         group.add(yellowMarker);
+        group.add(label);
         return group;
     }
 
@@ -706,6 +733,11 @@ class KernelDNAVisualization {
         }
     }
 
+    isProcessSelectorActive() {
+        const active = document.activeElement;
+        return !!(active && active.closest && active.closest('.dna-process-selector'));
+    }
+
     async renderTimeline() {
         if (!this.selectedPid) {
             this._showLoadingOverlay('Loading process branches');
@@ -1717,18 +1749,17 @@ class KernelDNAVisualization {
             console.error('❌ Error during initial render:', error);
         }
         
-        // Auto-update every 5 seconds (less frequent to reduce jitter)
+        // Auto-update only timeline data. Full Kernel DNA rebuild recreates UI controls
+        // and interrupts typing in the process selector.
         this.updateInterval = setInterval(() => {
             if (this.isActive && !this.isUpdating) {
+                if (!this.timelineMode) return;
+                if (this.isProcessSelectorActive()) return;
                 this.isUpdating = true;
                 // Use requestAnimationFrame to sync update with rendering
                 requestAnimationFrame(async () => {
                     try {
-                        if (this.timelineMode) {
-                            await this.renderTimeline();
-                        } else {
-                            await this.render();
-                        }
+                        await this.renderTimeline();
                     } catch (error) {
                         console.error('❌ Error during update:', error);
                     } finally {
diff --git a/static/js/processes-belt.js b/static/js/processes-belt.js
index 8630e34..1c16ba0 100644
--- a/static/js/processes-belt.js
+++ b/static/js/processes-belt.js
@@ -1,7 +1,7 @@
 // Processes Subsystem Visualization
-// Version: 20
+// Version: 27
 
-debugLog('🧠 processes-belt.js v20: Script loading...');
+debugLog('🧠 processes-belt.js v27: Script loading...');
 
 class ProcessesSubsystemVisualization {
     constructor() {
@@ -85,7 +85,8 @@ class ProcessesSubsystemVisualization {
         const modes = [
             { key: 'microscope', label: 'MICROSCOPE' },
             { key: 'temporal', label: '3-LAYER GRAPH' },
-            { key: 'radial', label: 'RADIAL GRAPH' }
+            { key: 'radial', label: 'RADIAL GRAPH' },
+            { key: 'wireframe', label: 'WIREFRAME PROC' }
         ];
         modes.forEach((m) => {
             const btn = document.createElement('button');
@@ -106,7 +107,7 @@ class ProcessesSubsystemVisualization {
     }
 
     setLayoutMode(modeKey) {
-        this.layoutMode = ['temporal', 'radial', 'microscope'].includes(modeKey) ? modeKey : 'temporal';
+        this.layoutMode = ['temporal', 'radial', 'microscope', 'wireframe'].includes(modeKey) ? modeKey : 'temporal';
         this.modeButtons.forEach((btn, key) => {
             const active = key === this.layoutMode;
             btn.style.background = active ? 'rgba(32, 52, 81, 0.92)' : 'rgba(8,12,18,0.86)';
@@ -522,12 +523,14 @@ class ProcessesSubsystemVisualization {
             return;
         }
 
-        this.ctx.save();
-        this.ctx.beginPath();
-        this.ctx.rect(x + 2, innerY, w - 4, innerH);
-        this.ctx.clip();
-        this.drawPerspectiveGrid(x + 4, innerY + innerH * 0.5, w - 8, innerH * 0.48);
-        this.ctx.restore();
+        if (this.layoutMode !== 'wireframe') {
+            this.ctx.save();
+            this.ctx.beginPath();
+            this.ctx.rect(x + 2, innerY, w - 4, innerH);
+            this.ctx.clip();
+            this.drawPerspectiveGrid(x + 4, innerY + innerH * 0.5, w - 8, innerH * 0.48);
+            this.ctx.restore();
+        }
 
         if (this.layoutMode === 'radial') {
             const pos = new Map();
@@ -538,6 +541,10 @@ class ProcessesSubsystemVisualization {
             this.drawMicroscopeGraph(nodes, edges, x, innerY, w, innerH);
             return;
         }
+        if (this.layoutMode === 'wireframe') {
+            this.drawWireframeProcGraph(nodes, edges, x, innerY, w, innerH);
+            return;
+        }
 
         this.nodeHitAreas = [];
         const leftX = x + w * 0.2;
@@ -1898,6 +1905,230 @@ class ProcessesSubsystemVisualization {
         this.drawReferenceSemanticKernelGraph(nodes, edges, x, y, w, h);
     }
 
+    projectWireframePoint(px, py, pz, originX, originY, scale) {
+        return {
+            x: originX + (px - py) * scale,
+            y: originY + (px + py) * scale * 0.44 - pz * scale
+        };
+    }
+
+    drawWireframeCube(cx, cy, cz, size, originX, originY, scale, color, alpha, lineWidth) {
+        const h = size * 0.5;
+        const vertices = [
+            [-h, -h, -h], [h, -h, -h], [h, h, -h], [-h, h, -h],
+            [-h, -h, h], [h, -h, h], [h, h, h], [-h, h, h]
+        ].map(([vx, vy, vz]) => this.projectWireframePoint(cx + vx, cy + vy, cz + vz, originX, originY, scale));
+        const edges = [
+            [0, 1], [1, 2], [2, 3], [3, 0],
+            [4, 5], [5, 6], [6, 7], [7, 4],
+            [0, 4], [1, 5], [2, 6], [3, 7]
+        ];
+        this.ctx.globalAlpha = alpha;
+        this.ctx.strokeStyle = color;
+        this.ctx.lineWidth = lineWidth;
+        edges.forEach(([a, b]) => {
+            this.ctx.beginPath();
+            this.ctx.moveTo(vertices[a].x, vertices[a].y);
+            this.ctx.lineTo(vertices[b].x, vertices[b].y);
+            this.ctx.stroke();
+        });
+        this.ctx.globalAlpha = 1;
+        return vertices.reduce(
+            (box, point) => ({
+                minX: Math.min(box.minX, point.x),
+                minY: Math.min(box.minY, point.y),
+                maxX: Math.max(box.maxX, point.x),
+                maxY: Math.max(box.maxY, point.y)
+            }),
+            { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity }
+        );
+    }
+
+    drawProcfsCoveragePanel(x, y, w, h) {
+        const procfs = this.telemetry?.procfs_map || {};
+        const sources = Array.isArray(procfs.sources) ? procfs.sources : [];
+        this.drawPanel(x, y, w, h, '', { alpha: 0.66, showTitle: false });
+        this.ctx.fillStyle = 'rgba(210, 230, 245, 0.94)';
+        this.ctx.font = '9px "Share Tech Mono", monospace';
+        this.ctx.fillText('PROCFS COVERAGE', x + 12, y + 18);
+        this.ctx.fillStyle = 'rgba(140, 170, 196, 0.86)';
+        this.ctx.font = '8px "Share Tech Mono", monospace';
+        this.ctx.fillText(`/proc dirs ${Number(procfs.pid_dirs || 0)} · sampled ${Number(procfs.sampled_pids || 0)}`, x + 12, y + 34);
+
+        const groupColor = (group) => {
+            if (group === 'process') return 'rgba(170, 212, 245, 0.82)';
+            if (group === 'network') return 'rgba(126, 232, 255, 0.82)';
+            if (group === 'memory') return 'rgba(126, 242, 210, 0.82)';
+            if (group === 'security') return 'rgba(255, 210, 128, 0.82)';
+            return 'rgba(180, 190, 210, 0.72)';
+        };
+        sources.slice(0, 8).forEach((src, idx) => {
+            const yy = y + 52 + idx * 15;
+            const active = src.active !== false;
+            this.ctx.strokeStyle = active ? groupColor(String(src.group || '')) : 'rgba(90, 105, 122, 0.36)';
+            this.ctx.strokeRect(x + 12.5, yy - 8.5, 8, 8);
+            this.ctx.fillStyle = active ? groupColor(String(src.group || '')) : 'rgba(90, 105, 122, 0.36)';
+            this.ctx.fillRect(x + 15, yy - 6, 3, 3);
+            this.ctx.fillStyle = active ? 'rgba(190, 216, 238, 0.86)' : 'rgba(120, 140, 158, 0.62)';
+            this.ctx.fillText(`${String(src.path || '').replace('/proc/', '')}`.slice(0, 26), x + 28, yy);
+            this.ctx.fillStyle = 'rgba(132, 158, 184, 0.78)';
+            this.ctx.fillText(String(src.samples || 0), x + w - 32, yy);
+        });
+        this.ctx.fillStyle = 'rgba(120, 150, 176, 0.68)';
+        this.ctx.font = '7px "Share Tech Mono", monospace';
+        this.ctx.fillText('sampled atlas · not recursive full procfs mirror', x + 12, y + h - 10);
+    }
+
+    drawWireframeProcGraph(nodes, edges, x, y, w, h) {
+        this.nodeHitAreas = [];
+        const originX = x + w * 0.5;
+        const originY = y + h * 0.43;
+        const scale = Math.max(20, Math.min(34, w / 42));
+        const visibleNodes = nodes.slice(0, 24);
+        const cols = 7;
+        const pos = new Map();
+        const ghostCubes = [];
+        const bg = this.ctx.createRadialGradient(x + w * 0.5, y + h * 0.42, 0, x + w * 0.5, y + h * 0.42, Math.max(w, h) * 0.66);
+        bg.addColorStop(0, 'rgba(20, 28, 38, 0.96)');
+        bg.addColorStop(0.6, 'rgba(7, 12, 18, 0.96)');
+        bg.addColorStop(1, 'rgba(2, 5, 10, 0.98)');
+        this.ctx.fillStyle = bg;
+        this.ctx.fillRect(x + 2, y, w - 4, h);
+        this.ctx.strokeStyle = 'rgba(120, 165, 205, 0.18)';
+        this.ctx.strokeRect(x + 2.5, y + 0.5, w - 5, h - 1);
+        this.drawPanel(x + 12, y + 12, Math.min(370, w * 0.34), 76, '', { alpha: 0.72, showTitle: false });
+        this.ctx.fillStyle = 'rgba(230, 240, 252, 0.92)';
+        this.ctx.font = '12px "Share Tech Mono", monospace';
+        this.ctx.fillText('WIREFRAME PROC ARCHITECTURE', x + 26, y + 34);
+        this.ctx.fillStyle = 'rgba(154, 190, 220, 0.86)';
+        this.ctx.font = '9px "Share Tech Mono", monospace';
+        this.ctx.fillText('processes as transparent cubes · links: syscalls / ipc / net / vfs', x + 26, y + 52);
+        this.ctx.fillText(`nodes ${visibleNodes.length} · edges ${edges.length} · hover/click cube to pin`, x + 26, y + 68);
+
+        // Isometric construction guide lines.
+        this.ctx.globalAlpha = 0.28;
+        this.ctx.strokeStyle = 'rgba(118, 184, 224, 0.16)';
+        this.ctx.lineWidth = 1;
+        for (let i = -10; i <= 10; i += 1) {
+            const a = this.projectWireframePoint(i, -6, -0.4, originX, originY, scale);
+            const b = this.projectWireframePoint(i, 10, -0.4, originX, originY, scale);
+            const c = this.projectWireframePoint(-6, i, -0.4, originX, originY, scale);
+            const d = this.projectWireframePoint(10, i, -0.4, originX, originY, scale);
+            this.ctx.beginPath();
+            this.ctx.moveTo(a.x, a.y);
+            this.ctx.lineTo(b.x, b.y);
+            this.ctx.moveTo(c.x, c.y);
+            this.ctx.lineTo(d.x, d.y);
+            this.ctx.stroke();
+        }
+        this.ctx.globalAlpha = 1;
+
+        const procfsSources = Array.isArray(this.telemetry?.procfs_map?.sources) ? this.telemetry.procfs_map.sources : [];
+        procfsSources.slice(0, 10).forEach((src, idx) => {
+            const group = String(src.group || 'procfs');
+            const layer = group === 'process' ? -0.65 : (group === 'network' ? 0.25 : (group === 'memory' ? 0.9 : 1.45));
+            const gx = -4.6 + (idx % 5) * 1.18 + (idx % 2) * 0.28;
+            const gy = 3.1 + Math.floor(idx / 5) * 1.12;
+            const gz = 0.15 + layer + Math.min(1.2, Number(src.samples || 0) / 12);
+            ghostCubes.push({
+                x: gx,
+                y: gy,
+                z: gz,
+                size: 0.42 + Math.min(0.38, Number(src.samples || 0) / 50),
+                group,
+                label: String(src.path || '').replace('/proc/', ''),
+            });
+        });
+        ghostCubes.forEach((cube, idx) => {
+            const color = cube.group === 'network' ? 'rgba(126, 232, 255, 0.34)'
+                : (cube.group === 'memory' ? 'rgba(126, 242, 210, 0.32)'
+                    : (cube.group === 'security' ? 'rgba(255, 210, 128, 0.32)' : 'rgba(170, 212, 245, 0.28)'));
+            this.drawWireframeCube(cube.x, cube.y, cube.z, cube.size, originX, originY, scale, color, 0.34, 0.75);
+            if (idx < 4) {
+                const p = this.projectWireframePoint(cube.x, cube.y, cube.z + cube.size * 0.5, originX, originY, scale);
+                this.ctx.fillStyle = 'rgba(132, 158, 184, 0.58)';
+                this.ctx.font = '7px "Share Tech Mono", monospace';
+                this.ctx.fillText(cube.label.slice(0, 18), p.x + 5, p.y - 3);
+            }
+        });
+        [
+            { x: -5.2, y: -3.8, z: 0.2, size: 1.9 },
+            { x: 4.8, y: -2.9, z: 0.6, size: 2.2 },
+            { x: 5.6, y: 4.1, z: 0.1, size: 1.8 },
+            { x: -3.8, y: 5.2, z: 0.4, size: 1.5 },
+        ].forEach((cube) => {
+            this.drawWireframeCube(cube.x, cube.y, cube.z, cube.size, originX, originY, scale, 'rgba(135, 170, 200, 0.16)', 0.22, 0.7);
+        });
+
+        visibleNodes.forEach((node, idx) => {
+            const pid = Number(node.pid || 0);
+            const col = idx % cols;
+            const row = Math.floor(idx / cols);
+            const pressure = Math.max(0, Math.min(100, Number(node.syscall_pressure || 0)));
+            const fd = Number(node.fd_count || 0);
+            const conns = Number(node.connections || 0);
+            const px = (col - (cols - 1) / 2) * 1.32 + (row % 2) * 0.46;
+            const py = row * 1.16 - 2.35;
+            const pz = 0.25 + Math.min(2.4, pressure / 44 + fd / 90 + conns / 7);
+            const size = 0.62 + Math.min(0.7, pressure / 170 + fd / 190);
+            const screen = this.projectWireframePoint(px, py, pz, originX, originY, scale);
+            pos.set(pid, { x: px, y: py, z: pz, screenX: screen.x, screenY: screen.y, size, node, idx });
+        });
+
+        edges.slice(0, 120).forEach((edge, idx) => {
+            const s = pos.get(Number(edge.source || 0));
+            const t = pos.get(Number(edge.target || 0));
+            if (!s || !t) return;
+            const sp = this.projectWireframePoint(s.x, s.y, s.z, originX, originY, scale);
+            const tp = this.projectWireframePoint(t.x, t.y, t.z, originX, originY, scale);
+            const color = this.edgeColor(String(edge.type || ''));
+            this.ctx.globalAlpha = 0.18 + Math.min(0.32, Number(edge.weight || 0) * 0.22);
+            this.drawCurvedStroke(sp.x, sp.y, tp.x, tp.y, color, 0.6, idx * 13, false);
+            this.ctx.globalAlpha = 1;
+        });
+
+        const sorted = Array.from(pos.values()).sort((a, b) => (a.x + a.y + a.z) - (b.x + b.y + b.z));
+        sorted.forEach((item) => {
+            const node = item.node;
+            const pid = Number(node.pid || 0);
+            const pressure = Math.max(0, Math.min(100, Number(node.syscall_pressure || 0)));
+            const active = pid === this.selectedNodePid || pid === this.hoveredNodePid;
+            const color = pressure >= 70 ? 'rgba(255, 142, 128, 0.72)' : 'rgba(170, 212, 245, 0.5)';
+            const accent = pressure >= 70 ? 'rgba(255, 120, 110, 0.88)' : (active ? 'rgba(255, 230, 148, 0.92)' : 'rgba(120, 190, 230, 0.42)');
+            const box = this.drawWireframeCube(item.x, item.y, item.z, item.size, originX, originY, scale, color, active ? 0.96 : 0.58, active ? 1.6 : 0.95);
+            if (active || pressure >= 70) {
+                this.drawWireframeCube(item.x, item.y, item.z, item.size * 1.08, originX, originY, scale, accent, active ? 0.9 : 0.56, 1.15);
+            }
+            const cx = (box.minX + box.maxX) * 0.5;
+            const cy = (box.minY + box.maxY) * 0.5;
+            this.nodeHitAreas.push({ x: cx, y: cy, r: Math.max(16, (box.maxX - box.minX + box.maxY - box.minY) * 0.18), pid });
+            if (active) {
+                this.ctx.fillStyle = 'rgba(5, 10, 16, 0.84)';
+                this.ctx.fillRect(box.maxX + 8, box.minY - 4, 174, 42);
+                this.ctx.strokeStyle = 'rgba(150, 204, 240, 0.48)';
+                this.ctx.strokeRect(box.maxX + 8.5, box.minY - 3.5, 173, 41);
+                this.ctx.fillStyle = 'rgba(220, 236, 250, 0.94)';
+                this.ctx.font = '9px "Share Tech Mono", monospace';
+                this.ctx.fillText(`${String(node.name || 'proc').slice(0, 16)}:${pid}`, box.maxX + 16, box.minY + 11);
+                this.ctx.fillText(`pressure ${pressure.toFixed(0)} · fd ${Number(node.fd_count || 0)} · net ${Number(node.connections || 0)}`, box.maxX + 16, box.minY + 27);
+            }
+        });
+
+        this.drawPanel(x + w - 238, y + h - 116, 218, 78, '', { alpha: 0.66, showTitle: false });
+        this.ctx.fillStyle = 'rgba(210, 230, 245, 0.9)';
+        this.ctx.font = '9px "Share Tech Mono", monospace';
+        this.ctx.fillText('WIRE LEGEND', x + w - 224, y + h - 96);
+        [
+            ['cube size', 'pressure + fd'],
+            ['height', 'semantic activity'],
+            ['links', 'syscalls/ipc/net/vfs']
+        ].forEach((row, idx) => {
+            this.ctx.fillStyle = 'rgba(140, 170, 196, 0.86)';
+            this.ctx.fillText(`${row[0]}: ${row[1]}`, x + w - 224, y + h - 78 + idx * 15);
+        });
+        this.drawProcfsCoveragePanel(x + 18, y + h - 178, 268, 142);
+    }
+
     drawTopStats(x, y, w, h) {
         this.drawPanel(x, y, w, h, 'runtime snapshot');
         const meta = this.telemetry?.meta || {};
diff --git a/static/js/security-belt.js b/static/js/security-belt.js
index a1cee3e..4720045 100644
--- a/static/js/security-belt.js
+++ b/static/js/security-belt.js
@@ -1,7 +1,7 @@
 // Security Subsystem Visualization (Stage 4: Kernel Security Core)
-// Version: 11
+// Version: 13
 
-debugLog('🛡️ security-belt.js v11: Script loading...');
+debugLog('🛡️ security-belt.js v13: Script loading...');
 
 class SecuritySubsystemVisualization {
     constructor() {
diff --git a/templates/linux-crypto-subsystem.html b/templates/linux-crypto-subsystem.html
index 582c756..d202dda 100644
--- a/templates/linux-crypto-subsystem.html
+++ b/templates/linux-crypto-subsystem.html
@@ -135,7 +135,7 @@ <h2>Linux Crypto Kernel Visualization</h2>
 
     <script src="/static/js/safe-utils.js?v=2"></script>
     <script src="/static/js/frontend-logger.js?v=2"></script>
-    <script src="/static/js/crypto-belt.js?v=31"></script>
+    <script src="/static/js/crypto-belt.js?v=38"></script>
     <script>
         (function startCryptoPage() {
             if (typeof window.CryptoSubsystemVisualization !== 'function') {
diff --git a/templates/linux-processes-subsystem.html b/templates/linux-processes-subsystem.html
index d2baad6..a67c636 100644
--- a/templates/linux-processes-subsystem.html
+++ b/templates/linux-processes-subsystem.html
@@ -58,7 +58,7 @@ <h2>Processes Security Path in Linux Kernel</h2>
     </section>
     <script src="/static/js/safe-utils.js?v=2"></script>
     <script src="/static/js/frontend-logger.js?v=2"></script>
-    <script src="/static/js/processes-belt.js?v=20"></script>
+    <script src="/static/js/processes-belt.js?v=27"></script>
     <script>
         (function startProcessesPage() {
             if (typeof window.ProcessesSubsystemVisualization !== 'function') {
diff --git a/templates/linux-security-subsystem.html b/templates/linux-security-subsystem.html
index 048e8c3..8a41736 100644
--- a/templates/linux-security-subsystem.html
+++ b/templates/linux-security-subsystem.html
@@ -111,7 +111,7 @@ <h2>Attack Surface Map</h2>
 
     <script src="/static/js/safe-utils.js?v=2"></script>
     <script src="/static/js/frontend-logger.js?v=2"></script>
-    <script src="/static/js/security-belt.js?v=11"></script>
+    <script src="/static/js/security-belt.js?v=13"></script>
     <script>
         (function startSecurityPage() {
             if (typeof window.SecuritySubsystemVisualization !== 'function') {