diff --git a/index.html b/index.html
index 2cc82d3..d142fe8 100755
--- a/index.html
+++ b/index.html
@@ -94,17 +94,17 @@ <h2>Linux Kernel Ring 0 Visualization</h2>
     <script src="/static/js/flow-ui.js?v=8"></script>
     <script src="/static/js/isolation-ui.js?v=10"></script>
     <script src="/static/js/process-files-ui.js?v=1"></script>
-    <script src="/static/js/ui-chrome.js?v=1"></script>
+    <script src="/static/js/ui-chrome.js?v=2"></script>
     <script src="/static/js/active-connections.js?v=4"></script>
     <script src="/static/js/nginx_files.js?v=6"></script>
-    <script src="/static/js/right-semicircle-menu.js?v=48"></script>
+    <script src="/static/js/right-semicircle-menu.js?v=49"></script>
     <script src="/static/js/kernel-dna.js?v=34"></script>
-    <script src="/static/js/network-stack.js?v=33"></script>
+    <script src="/static/js/network-stack.js?v=41"></script>
     <script src="/static/js/devices-belt.js?v=23"></script>
-    <script src="/static/js/aes-ref.js?v=2"></script>
-    <script src="/static/js/crypto-belt.js?v=59"></script>
+    <script src="/static/js/aes-ref.js?v=3"></script>
+    <script src="/static/js/crypto-belt.js?v=61"></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/filesystem-map.js?v=18"></script>
     <script src="/static/js/kernel-context-menu.js?v=29"></script>
     <script>
         // Debug: Check if classes are loaded
diff --git a/kernel_ai/api/rest.py b/kernel_ai/api/rest.py
index 35c92af..7c5624d 100644
--- a/kernel_ai/api/rest.py
+++ b/kernel_ai/api/rest.py
@@ -17,6 +17,10 @@
     ("/network-stack-realtime", "network_stack_realtime", h.network_stack_realtime, None),
     ("/devices-realtime", "devices_realtime", h.devices_realtime, None),
     ("/filesystem-blocks", "filesystem_blocks", h.filesystem_blocks, None),
+    ("/ext4-anatomy", "ext4_anatomy", h.ext4_anatomy, None),
+    ("/ext4-journal", "ext4_journal", h.ext4_journal, None),
+    ("/hot-files", "hot_files", h.hot_files, None),
+    ("/path-walk", "path_walk", h.path_walk, None),
     ("/isolation-context", "isolation_context", h.isolation_context, None),
     ("/process/<int:pid>/threads", "get_process_threads", h.get_process_threads, None),
     ("/process/<int:pid>/cpu", "get_process_cpu", h.get_process_cpu, None),
@@ -34,6 +38,7 @@
     ("/crypto-aes-demo", "crypto_aes_demo", h.crypto_aes_demo, None),
     ("/security-realtime", "security_realtime", h.security_realtime, None),
     ("/processes-realtime", "processes_realtime", h.processes_realtime, None),
+    ("/scheduler-pelt", "scheduler_pelt", h.scheduler_pelt, None),
     ("/frontend-logs", "ingest_frontend_logs", h.ingest_frontend_logs, ["POST", "OPTIONS"]),
     ("/proc-graph", "proc_graph", h.get_proc_graph, None),
     ("/process-files", "process_files", h.get_process_files, None),
diff --git a/kernel_ai/http/api.py b/kernel_ai/http/api.py
index 3f009a5..c8e922c 100644
--- a/kernel_ai/http/api.py
+++ b/kernel_ai/http/api.py
@@ -16,9 +16,13 @@
 from kernel_ai.http.api_handlers.network_system import (
     active_connections,
     devices_realtime,
+    ext4_anatomy,
+    ext4_journal,
     filesystem_blocks,
+    hot_files,
     isolation_context,
     network_stack_realtime,
+    path_walk,
     traceroute_info,
 )
 from kernel_ai.http.api_handlers.processes import (
@@ -34,6 +38,7 @@
     get_processes,
     get_processes_detailed,
     processes_realtime,
+    scheduler_pelt,
 )
 from kernel_ai.http.api_handlers.security_logs import (
     crypto_aes_demo,
@@ -47,7 +52,11 @@
     "crypto_aes_demo",
     "crypto_realtime",
     "devices_realtime",
+    "ext4_anatomy",
+    "ext4_journal",
     "filesystem_blocks",
+    "hot_files",
+    "path_walk",
     "get_execution_context",
     "get_ipc_links",
     "get_proc_graph",
@@ -73,6 +82,7 @@
     "nginx_files",
     "process_kernel_map",
     "processes_realtime",
+    "scheduler_pelt",
     "security_realtime",
     "sentry_test",
     "syscalls_realtime",
diff --git a/kernel_ai/http/api_handlers/network_system.py b/kernel_ai/http/api_handlers/network_system.py
index fd71b2a..478b9b5 100644
--- a/kernel_ai/http/api_handlers/network_system.py
+++ b/kernel_ai/http/api_handlers/network_system.py
@@ -58,3 +58,19 @@ def filesystem_blocks():
 
 def isolation_context():
     return api_json(_system_view_service.get_isolation_context)
+
+
+def ext4_anatomy():
+    return api_json(lambda: _system_view_service.get_ext4_file_anatomy(request.args.get("path")))
+
+
+def ext4_journal():
+    return api_json(_system_view_service.get_ext4_journal)
+
+
+def hot_files():
+    return api_json(_system_view_service.get_hot_files)
+
+
+def path_walk():
+    return api_json(lambda: _system_view_service.get_path_walk(request.args.get("path")))
diff --git a/kernel_ai/http/api_handlers/processes.py b/kernel_ai/http/api_handlers/processes.py
index 4586546..45481b2 100644
--- a/kernel_ai/http/api_handlers/processes.py
+++ b/kernel_ai/http/api_handlers/processes.py
@@ -7,6 +7,7 @@
 from kernel_ai.services import process_inspect as _process_inspect_service
 from kernel_ai.services import process_timeline as _process_timeline_service
 from kernel_ai.services import processes as _processes_service
+from kernel_ai.services import scheduler_pelt as _scheduler_pelt_service
 
 
 def get_processes():
@@ -76,6 +77,10 @@ def processes_realtime():
     return api_json(_processes_service.collect_processes_realtime)
 
 
+def scheduler_pelt():
+    return api_json(_scheduler_pelt_service.collect_scheduler_pelt)
+
+
 def get_proc_graph():
     return api_json(_processes_service.get_proc_graph_data, error_extra={"nodes": [], "edges": []})
 
diff --git a/kernel_ai/http/pages.py b/kernel_ai/http/pages.py
index 5cda9e7..b2051de 100644
--- a/kernel_ai/http/pages.py
+++ b/kernel_ai/http/pages.py
@@ -60,6 +60,18 @@ def linux_memory_subsystem_html():
     return redirect("/linux-memory-subsystem", code=301)
 
 
+def linux_network_subsystem_page():
+    return render_template("linux-network-subsystem.html")
+
+
+def network_page_legacy():
+    return redirect("/linux-network-subsystem", code=301)
+
+
+def linux_network_subsystem_html():
+    return redirect("/linux-network-subsystem", code=301)
+
+
 def health_check():
     return jsonify(
         {
diff --git a/kernel_ai/services/crypto/aes_math.py b/kernel_ai/services/crypto/aes_math.py
new file mode 100644
index 0000000..a5d7cec
--- /dev/null
+++ b/kernel_ai/services/crypto/aes_math.py
@@ -0,0 +1,448 @@
+"""Real AES-128 internals for educational visualisation.
+
+This module computes the *actual* mathematics of the AES block cipher on
+demonstration vectors (a fixed demo key + plaintext that we choose ourselves).
+Nothing here touches the production server's secret keys or live traffic -- it is
+the cryptographic equivalent of visualising a neural network's layer activations
+on a sample input.
+
+What is computed (all real, deterministic):
+  * AES S-box and its Linear Approximation Table (LAT) via a fast Walsh-Hadamard
+    transform -> real bias values (AES S-box max |bias| = 16/256 = 0.0625).
+  * Difference Distribution Table (DDT) -> real differential probabilities
+    (AES S-box max = 4/256).
+  * Avalanche / diffusion: flip one plaintext bit, run the real AES-128 rounds and
+    measure how the 128-bit state diverges round by round (-> ~50% after ~2 rounds).
+  * A per-round bit-dependency map (which input byte influences which output byte).
+  * A self-contained single-S-box linear key-recovery demo on a key we own, showing
+    the true key emerging as rank #1 (analogous to a training-convergence curve).
+
+Verified against FIPS-197: key 000102..0f, pt 00112233..eeff -> 69c4e0d8..c55a.
+"""
+
+from __future__ import annotations
+
+DEMO_KEY_HEX = "000102030405060708090a0b0c0d0e0f"
+DEMO_PT_HEX = "00112233445566778899aabbccddeeff"
+DEMO_SECRET_KEY_BYTE = 0x53
+
+# ---------------------------------------------------------------------------
+# AES S-box (FIPS-197)
+# ---------------------------------------------------------------------------
+SBOX = [
+    0x63, 0x7c, 0x77, 0x7b, 0xf2, 0x6b, 0x6f, 0xc5, 0x30, 0x01, 0x67, 0x2b, 0xfe, 0xd7, 0xab, 0x76,
+    0xca, 0x82, 0xc9, 0x7d, 0xfa, 0x59, 0x47, 0xf0, 0xad, 0xd4, 0xa2, 0xaf, 0x9c, 0xa4, 0x72, 0xc0,
+    0xb7, 0xfd, 0x93, 0x26, 0x36, 0x3f, 0xf7, 0xcc, 0x34, 0xa5, 0xe5, 0xf1, 0x71, 0xd8, 0x31, 0x15,
+    0x04, 0xc7, 0x23, 0xc3, 0x18, 0x96, 0x05, 0x9a, 0x07, 0x12, 0x80, 0xe2, 0xeb, 0x27, 0xb2, 0x75,
+    0x09, 0x83, 0x2c, 0x1a, 0x1b, 0x6e, 0x5a, 0xa0, 0x52, 0x3b, 0xd6, 0xb3, 0x29, 0xe3, 0x2f, 0x84,
+    0x53, 0xd1, 0x00, 0xed, 0x20, 0xfc, 0xb1, 0x5b, 0x6a, 0xcb, 0xbe, 0x39, 0x4a, 0x4c, 0x58, 0xcf,
+    0xd0, 0xef, 0xaa, 0xfb, 0x43, 0x4d, 0x33, 0x85, 0x45, 0xf9, 0x02, 0x7f, 0x50, 0x3c, 0x9f, 0xa8,
+    0x51, 0xa3, 0x40, 0x8f, 0x92, 0x9d, 0x38, 0xf5, 0xbc, 0xb6, 0xda, 0x21, 0x10, 0xff, 0xf3, 0xd2,
+    0xcd, 0x0c, 0x13, 0xec, 0x5f, 0x97, 0x44, 0x17, 0xc4, 0xa7, 0x7e, 0x3d, 0x64, 0x5d, 0x19, 0x73,
+    0x60, 0x81, 0x4f, 0xdc, 0x22, 0x2a, 0x90, 0x88, 0x46, 0xee, 0xb8, 0x14, 0xde, 0x5e, 0x0b, 0xdb,
+    0xe0, 0x32, 0x3a, 0x0a, 0x49, 0x06, 0x24, 0x5c, 0xc2, 0xd3, 0xac, 0x62, 0x91, 0x95, 0xe4, 0x79,
+    0xe7, 0xc8, 0x37, 0x6d, 0x8d, 0xd5, 0x4e, 0xa9, 0x6c, 0x56, 0xf4, 0xea, 0x65, 0x7a, 0xae, 0x08,
+    0xba, 0x78, 0x25, 0x2e, 0x1c, 0xa6, 0xb4, 0xc6, 0xe8, 0xdd, 0x74, 0x1f, 0x4b, 0xbd, 0x8b, 0x8a,
+    0x70, 0x3e, 0xb5, 0x66, 0x48, 0x03, 0xf6, 0x0e, 0x61, 0x35, 0x57, 0xb9, 0x86, 0xc1, 0x1d, 0x9e,
+    0xe1, 0xf8, 0x98, 0x11, 0x69, 0xd9, 0x8e, 0x94, 0x9b, 0x1e, 0x87, 0xe9, 0xce, 0x55, 0x28, 0xdf,
+    0x8c, 0xa1, 0x89, 0x0d, 0xbf, 0xe6, 0x42, 0x68, 0x41, 0x99, 0x2d, 0x0f, 0xb0, 0x54, 0xbb, 0x16,
+]
+
+RCON = [0x01, 0x02, 0x04, 0x08, 0x10, 0x20, 0x40, 0x80, 0x1b, 0x36]
+
+_POPCOUNT = [bin(i).count("1") for i in range(256)]
+
+
+def _parity(v):
+    return _POPCOUNT[v & 0xFF] & 1
+
+
+def _xtime(a):
+    a <<= 1
+    if a & 0x100:
+        a ^= 0x11B
+    return a & 0xFF
+
+
+def _gmul(a, b):
+    result = 0
+    for _ in range(8):
+        if b & 1:
+            result ^= a
+        b >>= 1
+        a = _xtime(a)
+    return result & 0xFF
+
+
+# ---------------------------------------------------------------------------
+# AES-128 key schedule + encryption with per-round state capture
+# ---------------------------------------------------------------------------
+def _key_expansion(key):
+    """Return 11 round keys (each a list of 16 bytes)."""
+    words = [list(key[4 * i:4 * i + 4]) for i in range(4)]
+    for i in range(4, 44):
+        temp = list(words[i - 1])
+        if i % 4 == 0:
+            temp = temp[1:] + temp[:1]  # RotWord
+            temp = [SBOX[b] for b in temp]  # SubWord
+            temp[0] ^= RCON[i // 4 - 1]
+        words.append([words[i - 4][j] ^ temp[j] for j in range(4)])
+    round_keys = []
+    for r in range(11):
+        rk = []
+        for c in range(4):
+            rk.extend(words[4 * r + c])
+        round_keys.append(rk)
+    return round_keys
+
+
+def _add_round_key(state, rk):
+    return [state[i] ^ rk[i] for i in range(16)]
+
+
+def _sub_bytes(state):
+    return [SBOX[b] for b in state]
+
+
+def _shift_rows(state):
+    # state index = row + 4*col ; shift row r left by r
+    out = [0] * 16
+    for r in range(4):
+        for c in range(4):
+            out[r + 4 * c] = state[r + 4 * ((c + r) % 4)]
+    return out
+
+
+def _mix_columns(state):
+    out = [0] * 16
+    for c in range(4):
+        col = state[4 * c:4 * c + 4]
+        out[4 * c + 0] = _gmul(col[0], 2) ^ _gmul(col[1], 3) ^ col[2] ^ col[3]
+        out[4 * c + 1] = col[0] ^ _gmul(col[1], 2) ^ _gmul(col[2], 3) ^ col[3]
+        out[4 * c + 2] = col[0] ^ col[1] ^ _gmul(col[2], 2) ^ _gmul(col[3], 3)
+        out[4 * c + 3] = _gmul(col[0], 3) ^ col[1] ^ col[2] ^ _gmul(col[3], 2)
+    return out
+
+
+def _to_state(block16):
+    # AES is column-major: state[r + 4c] = input[r + 4c] (input already byte order)
+    return list(block16)
+
+
+def encrypt_capture(pt, round_keys):
+    """Encrypt a 16-byte block, returning the state after each AddRoundKey.
+
+    Returns a list of 11 states (state[0] = after initial AddRoundKey, state[r] =
+    after round r), each a list of 16 ints.
+    """
+    states = []
+    state = _add_round_key(_to_state(pt), round_keys[0])
+    states.append(list(state))
+    for r in range(1, 10):
+        state = _sub_bytes(state)
+        state = _shift_rows(state)
+        state = _mix_columns(state)
+        state = _add_round_key(state, round_keys[r])
+        states.append(list(state))
+    state = _sub_bytes(state)
+    state = _shift_rows(state)
+    state = _add_round_key(state, round_keys[10])
+    states.append(list(state))
+    return states
+
+
+def aes128_encrypt_block(pt, key):
+    return bytes(encrypt_capture(list(pt), _key_expansion(list(key)))[-1])
+
+
+# ---------------------------------------------------------------------------
+# Linear Approximation Table (LAT) via fast Walsh-Hadamard transform
+# ---------------------------------------------------------------------------
+def _fwht(arr):
+    n = len(arr)
+    h = 1
+    while h < n:
+        for i in range(0, n, h * 2):
+            for j in range(i, i + h):
+                x = arr[j]
+                y = arr[j + h]
+                arr[j] = x + y
+                arr[j + h] = x - y
+        h *= 2
+    return arr
+
+
+def compute_lat():
+    """Full 256x256 signed LAT of the AES S-box. LAT[a][b] in [-128, 128]."""
+    lat = [[0] * 256 for _ in range(256)]
+    for b in range(256):
+        t = [1 - 2 * (_POPCOUNT[SBOX[x] & b] & 1) for x in range(256)]
+        _fwht(t)  # t[a] = sum_x (-1)^{a.x} (-1)^{b.S(x)}
+        for a in range(256):
+            lat[a][b] = t[a] // 2
+    return lat
+
+
+def compute_ddt():
+    """Full 256x256 DDT of the AES S-box. DDT[dx][dy] = count of x."""
+    ddt = [[0] * 256 for _ in range(256)]
+    for dx in range(256):
+        for x in range(256):
+            dy = SBOX[x] ^ SBOX[x ^ dx]
+            ddt[dx][dy] += 1
+    return ddt
+
+
+# ---------------------------------------------------------------------------
+# Cached static artefacts (LAT / DDT depend only on the S-box)
+# ---------------------------------------------------------------------------
+_CACHE = {}
+
+
+def _lat():
+    if "lat" not in _CACHE:
+        _CACHE["lat"] = compute_lat()
+    return _CACHE["lat"]
+
+
+def _ddt():
+    if "ddt" not in _CACHE:
+        _CACHE["ddt"] = compute_ddt()
+    return _CACHE["ddt"]
+
+
+def _lat_summary():
+    lat = _lat()
+    top = []
+    hist = {}
+    max_abs = 0
+    for a in range(1, 256):
+        row = lat[a]
+        for b in range(1, 256):
+            v = row[b]
+            av = abs(v)
+            if av:
+                hist[av] = hist.get(av, 0) + 1
+            if av > max_abs:
+                max_abs = av
+            if av >= 12:
+                top.append({"in_mask": a, "out_mask": b, "lat": v,
+                            "bias": round(v / 256.0, 6), "correlation": round(2 * v / 256.0, 6)})
+    top.sort(key=lambda r: abs(r["lat"]), reverse=True)
+    # Downsample |LAT| into a 16x16 heat for the correlation panel.
+    heat = [[0.0] * 16 for _ in range(16)]
+    for gi in range(16):
+        for gj in range(16):
+            acc = 0
+            for a in range(gi * 16, gi * 16 + 16):
+                for b in range(gj * 16, gj * 16 + 16):
+                    acc += abs(lat[a][b])
+            heat[gi][gj] = round(acc / 256.0, 3)
+    return {
+        "max_abs_lat": max_abs,
+        "max_bias": round(max_abs / 256.0, 6),
+        "max_correlation": round(2 * max_abs / 256.0, 6),
+        "histogram": {str(k): hist[k] for k in sorted(hist)},
+        "top": top[:14],
+        "heat16": heat,
+    }
+
+
+def _ddt_summary():
+    ddt = _ddt()
+    top = []
+    max_prob = 0
+    for dx in range(1, 256):
+        for dy in range(256):
+            c = ddt[dx][dy]
+            if c > max_prob:
+                max_prob = c
+            if c >= 4:
+                top.append({"in_diff": dx, "out_diff": dy, "count": c, "prob": round(c / 256.0, 6)})
+    top.sort(key=lambda r: r["count"], reverse=True)
+    return {
+        "max_count": max_prob,
+        "max_prob": round(max_prob / 256.0, 6),
+        "top": top[:14],
+    }
+
+
+# ---------------------------------------------------------------------------
+# Avalanche + per-round bit-dependency (diffusion)
+# ---------------------------------------------------------------------------
+def _flip_bit(block, bit_index):
+    out = list(block)
+    byte_i = bit_index // 8
+    bit_in_byte = 7 - (bit_index % 8)
+    out[byte_i] ^= (1 << bit_in_byte)
+    return out
+
+
+def _hamming_block(a, b):
+    return sum(_POPCOUNT[a[i] ^ b[i]] for i in range(16))
+
+
+def compute_diffusion(pt, key, flip_bit=0):
+    round_keys = _key_expansion(list(key))
+    base_states = encrypt_capture(list(pt), round_keys)  # 11 states
+    n_rounds = len(base_states)
+
+    # Single-bit avalanche trace for the chosen flip_bit.
+    flipped_states = encrypt_capture(_flip_bit(pt, flip_bit), round_keys)
+    curve = []
+    grids = []
+    for r in range(n_rounds):
+        diff_bytes = [_POPCOUNT[base_states[r][i] ^ flipped_states[r][i]] for i in range(16)]
+        curve.append(_hamming_block(base_states[r], flipped_states[r]))
+        grids.append(diff_bytes)
+
+    # Average diffusion over all 128 single-bit input flips + 8x8 dependency layers.
+    avg_per_round = [0] * n_rounds
+    # layers[r][gi][gj] = influence of input byte-group gi on output byte-group gj (8 groups of 2 bytes)
+    layers = [[[0] * 8 for _ in range(8)] for _ in range(n_rounds)]
+    for bit in range(128):
+        fs = encrypt_capture(_flip_bit(pt, bit), round_keys)
+        gi = (bit // 8) // 2  # input byte-group (0..7)
+        for r in range(n_rounds):
+            hd = 0
+            for byte_i in range(16):
+                pc = _POPCOUNT[base_states[r][byte_i] ^ fs[r][byte_i]]
+                hd += pc
+                if pc:
+                    layers[r][gi][byte_i // 2] += pc
+            avg_per_round[r] += hd
+
+    avg_curve = [round(avg_per_round[r] / 128.0, 2) for r in range(n_rounds)]
+    # Normalise layers to 0..1 per round.
+    norm_layers = []
+    for r in range(n_rounds):
+        mx = max((max(row) for row in layers[r]), default=0) or 1
+        norm_layers.append([[round(layers[r][i][j] / mx, 3) for j in range(8)] for i in range(8)])
+
+    return {
+        "flip_bit": flip_bit,
+        "rounds": n_rounds,
+        "avalanche_curve": curve,             # bits changed for the single demo flip
+        "avalanche_grids": grids,             # per-round 16-byte diff popcounts (4x4)
+        "avg_curve": avg_curve,               # avg bits changed over all 128 input flips
+        "avg_curve_pct": [round(100.0 * v / 128.0, 1) for v in avg_curve],
+        "dependency_layers": norm_layers,     # per-round 8x8 input->output byte-group influence
+    }
+
+
+# ---------------------------------------------------------------------------
+# Self-contained single-S-box linear key-recovery demo (key we own)
+# ---------------------------------------------------------------------------
+def compute_key_recovery(secret_key_byte=DEMO_SECRET_KEY_BYTE):
+    """Matsui-style last-round key recovery on a real 2-S-box toy cipher.
+
+    Toy cipher (a cipher we define, keys we own):
+        u = S(p ^ K)          # K is the secret target byte
+        c = S(u ^ q)          # q is a per-message known tweak/nonce (like an IV)
+    The attacker observes (p, q, c) and guesses g for K. It partially "encrypts"
+    the first layer with the guess, u_g = S(p ^ g), then tests a high-bias linear
+    approximation over the *second* S-box. Only the correct guess makes u_g equal
+    the real intermediate, so the approximation holds with the S-box's real bias;
+    wrong guesses pass through the S-box nonlinearity and, thanks to the random
+    per-message q, decorrelate to mean-zero noise. With enough messages the true
+    key therefore converges to rank #1 -- the genuine mechanism of linear
+    cryptanalysis, shown as a convergence curve.
+    """
+    lat = _lat()
+    # Best non-trivial linear approximation of the S-box.
+    best_a = best_b = 1
+    best_v = 0
+    for a in range(1, 256):
+        for b in range(1, 256):
+            if abs(lat[a][b]) > abs(best_v):
+                best_v = lat[a][b]
+                best_a, best_b = a, b
+
+    def rank_at(samples):
+        counts = [0] * 256
+        for p, q in samples:
+            u = SBOX[p ^ secret_key_byte]
+            c = SBOX[u ^ q]
+            for g in range(256):
+                u_g = SBOX[p ^ g]
+                if (_parity(best_a & (u_g ^ q)) ^ _parity(best_b & c)) == 0:
+                    counts[g] += 1
+        n = len(samples)
+        scored = [(g, counts[g] - n / 2.0) for g in range(256)]
+        scored.sort(key=lambda t: abs(t[1]), reverse=True)
+        order = [g for g, _ in scored]
+        true_rank = order.index(secret_key_byte) + 1
+        return scored, true_rank, n
+
+    # Deterministic pseudo-random message stream of (plaintext, tweak) pairs.
+    seed = 0x1234ABCD
+
+    def _next_byte():
+        nonlocal seed
+        seed = (1103515245 * seed + 12345) & 0x7FFFFFFF
+        return (seed >> 16) & 0xFF
+
+    stream = []
+    convergence = []
+    schedule = (64, 128, 256, 512, 1024, 2048, 4096)
+    for target_n in schedule:
+        while len(stream) < target_n:
+            stream.append((_next_byte(), _next_byte()))
+        scored_n, rnk, _ = rank_at(stream[:target_n])
+        convergence.append({"n": target_n, "true_rank": rnk})
+
+    # Final ranking at the largest sample size (strongest signal).
+    full_scored = scored_n
+    n_final = schedule[-1]
+    ranking = [{"guess": g, "corr": round(2 * s / n_final, 5), "score": s} for g, s in full_scored[:24]]
+    full_rank = ranking and convergence[-1]["true_rank"]
+
+    return {
+        "true_key": secret_key_byte,
+        "true_key_hex": f"0x{secret_key_byte:02x}",
+        "mask_in": best_a,
+        "mask_out": best_b,
+        "approx_bias": round(best_v / 256.0, 6),
+        "approx_correlation": round(2 * best_v / 256.0, 6),
+        "true_rank": full_rank,
+        "ranking": ranking,
+        "convergence": convergence,
+    }
+
+
+# ---------------------------------------------------------------------------
+# Public entry point
+# ---------------------------------------------------------------------------
+def build_aes_demo(pt_hex=DEMO_PT_HEX, key_hex=DEMO_KEY_HEX, flip_bit=0):
+    """Assemble the full real-AES visualisation payload (cached where static)."""
+    pt = bytes.fromhex(pt_hex)
+    key = bytes.fromhex(key_hex)
+    round_keys = _key_expansion(list(key))
+    ct_states = encrypt_capture(list(pt), round_keys)
+    ciphertext = bytes(ct_states[-1])
+
+    if "lat_summary" not in _CACHE:
+        _CACHE["lat_summary"] = _lat_summary()
+    if "ddt_summary" not in _CACHE:
+        _CACHE["ddt_summary"] = _ddt_summary()
+    if "key_recovery" not in _CACHE:
+        _CACHE["key_recovery"] = compute_key_recovery()
+
+    diffusion = compute_diffusion(pt, key, flip_bit=flip_bit)
+
+    return {
+        "algorithm": "AES-128",
+        "rounds": 10,
+        "source": "reference-computation",
+        "demo_vectors": {
+            "key": key_hex,
+            "plaintext": pt_hex,
+            "ciphertext": ciphertext.hex(),
+        },
+        "sbox": SBOX,
+        "round_states": [list(s) for s in ct_states],
+        "lat": _CACHE["lat_summary"],
+        "ddt": _CACHE["ddt_summary"],
+        "diffusion": diffusion,
+        "key_recovery": _CACHE["key_recovery"],
+    }
diff --git a/kernel_ai/services/network.py b/kernel_ai/services/network.py
index fba0e49..f39d6eb 100644
--- a/kernel_ai/services/network.py
+++ b/kernel_ai/services/network.py
@@ -212,11 +212,16 @@ def _get_ss_tcp_metrics():
     except (subprocess.TimeoutExpired, OSError):
         return {}
 
+    fallback = {}
     for idx, line in enumerate(lines):
         if not line.strip().startswith("ESTAB"):
             continue
         metrics = {}
         parts = line.split()
+        # Prefer a real remote peer over loopback/internal so the BBR model
+        # reflects an actual path, not the ~0.02ms/4Gbps loopback socket.
+        peer = parts[4] if len(parts) >= 5 else ""
+        is_local = peer.startswith("127.") or peer.startswith("[::1]") or peer.startswith("0.0.0.0")
         if len(parts) >= 4:
             try:
                 metrics["tx_queue"] = int(parts[2])
@@ -234,9 +239,47 @@ def _get_ss_tcp_metrics():
             metrics["cwnd"] = int(cwnd_match.group(1))
         if retrans_match:
             metrics["retrans_now"] = int(retrans_match.group(1))
+        mss_match = re.search(r"\bmss:(\d+)", details)
+        if mss_match:
+            metrics["mss"] = int(mss_match.group(1))
+
+        # Congestion-control algorithm (first token of the info line), plus the
+        # BBR model ingredients: delivery rate (BtlBw estimate), min RTT
+        # (RTprop), pacing rate, and — when BBR is the CC — its own bw/mrtt.
+        stripped = details.strip()
+        if stripped:
+            cc = stripped.split(" ", 1)[0]
+            if cc and re.match(r"^[a-z][a-z0-9_]+$", cc):
+                metrics["cc"] = cc
+        dr = re.search(r"delivery_rate\s+([\d.]+)([KMG]?)bps", details)
+        if dr:
+            metrics["delivery_rate_mbps"] = round(_rate_to_mbps(dr.group(1), dr.group(2)), 4)
+        pr = re.search(r"pacing_rate\s+([\d.]+)([KMG]?)bps", details)
+        if pr:
+            metrics["pacing_rate_mbps"] = round(_rate_to_mbps(pr.group(1), pr.group(2)), 4)
+        minrtt = re.search(r"minrtt:([\d.]+)", details)
+        if minrtt:
+            metrics["min_rtt_ms"] = float(minrtt.group(1))
+        bbr = re.search(r"bbr:\(bw:([\d.]+)([KMG]?)bps,mrtt:([\d.]+)", details)
+        if bbr:
+            metrics["bbr_bw_mbps"] = round(_rate_to_mbps(bbr.group(1), bbr.group(2)), 4)
+            metrics["bbr_mrtt_ms"] = float(bbr.group(3))
         if metrics:
-            return metrics
-    return {}
+            if not is_local:
+                return metrics
+            if not fallback:
+                fallback = metrics
+    return fallback
+
+
+def _rate_to_mbps(value, unit):
+    """Convert an ss rate (e.g. 12.3 with unit 'M') to Mbit/s."""
+    try:
+        v = float(value)
+    except (TypeError, ValueError):
+        return 0.0
+    scale = {"": 1e-6, "K": 1e-3, "M": 1.0, "G": 1e3}.get((unit or "").upper(), 1.0)
+    return v * scale
 
 
 def get_network_stack_realtime(network_stack_prev=None):
@@ -339,6 +382,9 @@ def rate(curr, prev):
                 "cwnd": int(ss_metrics.get("cwnd", 0)),
                 "rtt_ms": round(float(ss_metrics.get("rtt_ms", 0.0)), 2),
                 "tx_queue": int(ss_metrics.get("tx_queue", 0)),
+                "cc": ss_metrics.get("cc", "unknown"),
+                "delivery_rate_mbps": ss_metrics.get("delivery_rate_mbps", 0.0),
+                "min_rtt_ms": round(float(ss_metrics.get("min_rtt_ms", ss_metrics.get("rtt_ms", 0.0))), 3),
             },
             "ip": {
                 "in_packets_per_sec": round(ip_in_per_sec, 2),
@@ -375,6 +421,18 @@ def rate(curr, prev):
             "retransmit_probability": round(retrans_prob, 4),
             "packet_speed": round(packet_speed, 3),
         },
+        "bbr": {
+            "cc": ss_metrics.get("cc", "unknown"),
+            "bbr_active": "bbr_bw_mbps" in ss_metrics,
+            "rtt_ms": round(float(ss_metrics.get("rtt_ms", 0.0)), 3),
+            "min_rtt_ms": round(float(ss_metrics.get("min_rtt_ms", ss_metrics.get("rtt_ms", 0.0))), 3),
+            "cwnd": int(ss_metrics.get("cwnd", 0)),
+            "mss": int(ss_metrics.get("mss", 1448)),
+            "delivery_rate_mbps": ss_metrics.get("delivery_rate_mbps", 0.0),
+            "pacing_rate_mbps": ss_metrics.get("pacing_rate_mbps", 0.0),
+            "bbr_bw_mbps": ss_metrics.get("bbr_bw_mbps"),
+            "bbr_mrtt_ms": ss_metrics.get("bbr_mrtt_ms"),
+        },
         "throughput_mb_s": round(throughput_mb_s, 3),
         "tcp_counters": {
             "in_segs": int(tcp_stats.get("InSegs", 0)),
diff --git a/kernel_ai/services/scheduler_pelt.py b/kernel_ai/services/scheduler_pelt.py
new file mode 100644
index 0000000..cd9417e
--- /dev/null
+++ b/kernel_ai/services/scheduler_pelt.py
@@ -0,0 +1,257 @@
+"""Scheduler (EEVDF) + PELT telemetry sourced from ``/proc/<pid>/sched``.
+
+Exposes the *real* Per-Entity Load Tracking signals — ``util_avg`` /
+``load_avg`` / ``runnable_avg`` and their geometric ``*_sum`` accumulators —
+plus EEVDF bookkeeping (``vruntime``, time ``slice``, weight from nice, and
+context-switch counters) for the busiest tasks. It also ships the PELT
+decay-kernel constants so the UI can draw the exact EWMA that produces
+``util_avg`` (mathematically identical to the EWMA used for the Kernel DNA
+z-score).
+
+Nothing here attacks or perturbs the kernel; it only reads procfs.
+"""
+
+import json
+import os
+import time
+from datetime import datetime, timezone
+
+# --- PELT constants (mirror kernel/sched/pelt.c) -------------------------------
+# The signal decays one period every ~1024us, halving every 32 periods, i.e.
+# y = 0.5 ** (1/32). LOAD_AVG_MAX is the asymptotic value of the geometric
+# sum used to normalise the *_sum accumulators into the 0..1024 *_avg range.
+HALF_LIFE_PERIODS = 32
+PERIOD_US = 1024
+DECAY_Y = 2.0 ** (-1.0 / HALF_LIFE_PERIODS)  # ~= 0.9785720620877
+LOAD_AVG_MAX = 47742
+SCHED_FIXEDPOINT_SHIFT = 10  # se.load.weight is nice-weight << 10 on 64-bit
+CAPACITY = 1024
+NICE_0_WEIGHT = 1024  # weight of a nice-0 task (used to scale real time -> virtual time)
+
+# Optional snapshot written by the (root) sched_debug collector. It carries the
+# EEVDF fields that only live in root-only debugfs: per-task eligibility (E/N),
+# virtual deadline, and the runqueue's avg_vruntime (V) needed for lag.
+SCHED_DEBUG_SNAPSHOT = os.environ.get("SCHED_DEBUG_OUT", "/run/kernel-ai/sched_debug.json")
+SCHED_DEBUG_MAX_AGE_S = 15.0
+
+# kernel/sched/core.c sched_prio_to_weight[], nice -20..+19
+PRIO_TO_WEIGHT = [
+    88761, 71755, 56483, 46273, 36291,
+    29154, 23254, 18705, 14949, 11916,
+    9548, 7620, 6100, 4904, 3906,
+    3121, 2501, 1991, 1586, 1277,
+    1024, 820, 655, 526, 423,
+    335, 272, 215, 172, 137,
+    110, 87, 70, 56, 45,
+    36, 29, 23, 18, 15,
+]
+
+# States we treat as "on the runqueue / competing for the CPU".
+RUNNABLE_STATES = {"R"}
+
+
+def _read_sched_file(pid):
+    """Parse ``/proc/<pid>/sched`` ("key : value" lines) into a dict."""
+    out = {}
+    try:
+        with open(f"/proc/{pid}/sched", "r", encoding="utf-8", errors="ignore") as fh:
+            for line in fh:
+                if ":" in line:
+                    key, _, val = line.partition(":")
+                    out[key.strip()] = val.strip()
+    except (OSError, ValueError):
+        return None
+    return out
+
+
+def _fnum(mapping, key, default=0.0):
+    try:
+        return float(mapping.get(key, default))
+    except (TypeError, ValueError):
+        return default
+
+
+def _read_comm(pid):
+    try:
+        with open(f"/proc/{pid}/comm", "r", encoding="utf-8", errors="ignore") as fh:
+            return fh.read().strip() or "?"
+    except OSError:
+        return "?"
+
+
+def _read_state(pid):
+    """First char of the process state from ``/proc/<pid>/stat`` (after comm)."""
+    try:
+        with open(f"/proc/{pid}/stat", "r", encoding="utf-8", errors="ignore") as fh:
+            data = fh.read()
+        rparen = data.rfind(")")
+        rest = data[rparen + 2:].split()
+        return rest[0] if rest else "?"
+    except (OSError, IndexError):
+        return "?"
+
+
+def _read_schedstat(pid):
+    """``/proc/<pid>/schedstat`` -> (on_cpu_ns, wait_ns, timeslices)."""
+    try:
+        with open(f"/proc/{pid}/schedstat", "r", encoding="utf-8", errors="ignore") as fh:
+            parts = fh.read().split()
+        return int(parts[0]), int(parts[1]), int(parts[2])
+    except (OSError, ValueError, IndexError):
+        return 0, 0, 0
+
+
+def _loadavg():
+    try:
+        with open("/proc/loadavg", "r", encoding="utf-8", errors="ignore") as fh:
+            return [float(x) for x in fh.read().split()[:3]]
+    except (OSError, ValueError):
+        return [0.0, 0.0, 0.0]
+
+
+def _read_sched_debug_snapshot(path=None, max_age_s=SCHED_DEBUG_MAX_AGE_S):
+    """Read the EEVDF snapshot written by the root sched_debug collector.
+
+    Returns ``{"available": bool, "tasks": {pid: {...}}, ...}``. When the
+    collector is not running the caller keeps only the client-computable
+    virtual deadline and marks lag/eligibility as unavailable.
+    """
+    snap = path or SCHED_DEBUG_SNAPSHOT
+    try:
+        age = max(0.0, time.time() - os.path.getmtime(snap))
+    except OSError:
+        return {"available": False, "reason": "no-collector"}
+    if age > max_age_s:
+        return {"available": False, "reason": "stale", "age_s": round(age, 1)}
+    try:
+        with open(snap, "r", encoding="utf-8", errors="ignore") as fh:
+            data = json.load(fh)
+    except (OSError, ValueError):
+        return {"available": False, "reason": "unreadable"}
+    if not isinstance(data, dict):
+        return {"available": False, "reason": "malformed"}
+    data["available"] = True
+    data["age_s"] = round(age, 1)
+    return data
+
+
+def _build_task(pid, sd):
+    prio = int(_fnum(sd, "prio", 120))
+    nice = max(-20, min(19, prio - 120))
+    weight_raw = _fnum(sd, "se.load.weight")
+    weight = weight_raw / (1 << SCHED_FIXEDPOINT_SHIFT) if weight_raw else float(PRIO_TO_WEIGHT[nice + 20])
+    on_cpu_ns, wait_ns, slices = _read_schedstat(pid)
+    state = _read_state(pid)
+    vruntime = _fnum(sd, "se.vruntime")
+    slice_ms = _fnum(sd, "se.slice") / 1e6
+    # Real->virtual time scaling: a request of length `slice` costs
+    # slice * NICE_0_WEIGHT / weight in virtual time. Higher weight (lower nice)
+    # => smaller virtual slice => earlier virtual deadline => scheduled sooner.
+    vslice_ms = slice_ms * NICE_0_WEIGHT / weight if weight else slice_ms
+    deadline_v = vruntime + vslice_ms
+    return {
+        "pid": pid,
+        "comm": _read_comm(pid),
+        "state": state,
+        "runnable": state in RUNNABLE_STATES,
+        # PELT signals (0..1024 range; 1024 == a full CPU of the resource)
+        "util_avg": round(_fnum(sd, "se.avg.util_avg"), 1),
+        "load_avg": round(_fnum(sd, "se.avg.load_avg"), 1),
+        "runnable_avg": round(_fnum(sd, "se.avg.runnable_avg"), 1),
+        "util_est": round(_fnum(sd, "se.avg.util_est"), 1),
+        "util_sum": int(_fnum(sd, "se.avg.util_sum")),
+        "load_sum": int(_fnum(sd, "se.avg.load_sum")),
+        # EEVDF bookkeeping
+        "vruntime": round(vruntime, 3),
+        "slice_ms": round(slice_ms, 3),
+        "vslice_ms": round(vslice_ms, 4),
+        "deadline_v": round(deadline_v, 3),
+        "weight": round(weight, 0),
+        "nice": nice,
+        "prio": prio,
+        "policy": int(_fnum(sd, "policy", 0)),
+        # activity counters
+        "nr_switches": int(_fnum(sd, "nr_switches")),
+        "nr_voluntary": int(_fnum(sd, "nr_voluntary_switches")),
+        "nr_involuntary": int(_fnum(sd, "nr_involuntary_switches")),
+        "sum_exec_ms": round(_fnum(sd, "se.sum_exec_runtime"), 1),
+        "on_cpu_ms": round(on_cpu_ns / 1e6, 1),
+        "wait_ms": round(wait_ns / 1e6, 1),
+        "timeslices": slices,
+    }
+
+
+def collect_scheduler_pelt(top_n=14):
+    """Return real EEVDF/PELT telemetry for the busiest ``top_n`` tasks."""
+    prelim = []
+    try:
+        entries = os.listdir("/proc")
+    except OSError:
+        entries = []
+    for entry in entries:
+        if not entry.isdigit():
+            continue
+        pid = int(entry)
+        sd = _read_sched_file(pid)
+        if not sd:
+            continue
+        prelim.append((pid, sd))
+
+    # Rank by recent activity so the view surfaces the tasks actually using the
+    # CPU: util_avg first, then load_avg, then raw context switches.
+    prelim.sort(
+        key=lambda it: (
+            _fnum(it[1], "se.avg.util_avg"),
+            _fnum(it[1], "se.avg.load_avg"),
+            _fnum(it[1], "nr_switches"),
+        ),
+        reverse=True,
+    )
+
+    tasks = [_build_task(pid, sd) for pid, sd in prelim[:top_n]]
+
+    # Enrich with kernel-exact EEVDF fields from the sched_debug collector, when
+    # available (eligibility E/N, kernel virtual deadline, and lag = V - vruntime).
+    snap = _read_sched_debug_snapshot()
+    snap_tasks = snap.get("tasks") or {} if snap.get("available") else {}
+    for t in tasks:
+        row = snap_tasks.get(str(t["pid"])) or snap_tasks.get(t["pid"])
+        if isinstance(row, dict):
+            t["eligible"] = bool(row.get("eligible"))
+            t["vlag_ms"] = row.get("vlag_ms")
+            t["avg_vruntime"] = row.get("avg_vruntime")
+            t["k_deadline_v"] = row.get("deadline_v")
+            t["k_vruntime_v"] = row.get("vruntime_v")
+            t["cgroup"] = row.get("cgroup")
+    eevdf = {
+        "source": "kernel" if snap.get("available") else "computed",
+        "reason": snap.get("reason"),
+        "age_s": snap.get("age_s"),
+        "nice_0_weight": NICE_0_WEIGHT,
+    }
+
+    # EEVDF (6.6+) exposes se.slice; older kernels run CFS without it.
+    scheduler = "EEVDF" if any("se.slice" in sd for _, sd in prelim[:top_n]) else "CFS"
+
+    # Decay kernel y^0..y^(N-1): the weight each past 1ms period contributes to
+    # the current average. ~96 periods spans ~3 half-lives.
+    n_bars = 96
+    kernel_weights = [round(DECAY_Y ** i, 5) for i in range(n_bars)]
+
+    return {
+        "timestamp": datetime.now(timezone.utc).isoformat(),
+        "scheduler": scheduler,
+        "cpus": os.cpu_count() or 1,
+        "loadavg": _loadavg(),
+        "task_count": len(prelim),
+        "pelt": {
+            "y": round(DECAY_Y, 7),
+            "half_life_ms": HALF_LIFE_PERIODS,
+            "period_us": PERIOD_US,
+            "load_avg_max": LOAD_AVG_MAX,
+            "capacity": CAPACITY,
+            "kernel_weights": kernel_weights,
+        },
+        "eevdf": eevdf,
+        "tasks": tasks,
+    }
diff --git a/kernel_ai/services/system_view.py b/kernel_ai/services/system_view.py
index 51896c3..64556e9 100644
--- a/kernel_ai/services/system_view.py
+++ b/kernel_ai/services/system_view.py
@@ -2,9 +2,13 @@
 
 from __future__ import annotations
 
+import json
 import logging
 import os
 import re
+import shutil
+import stat as _stat
+import subprocess
 import time
 from datetime import datetime
 
@@ -18,173 +22,784 @@
 _FILESYSTEM_PREV_DEFAULT = {
     "timestamp": None,
     "write_bytes": None,
+    "read_bytes": None,
+    "per_disk": {},
 }
 
+# Pseudo/virtual filesystems we never want in the real mount map.
+_PSEUDO_FSTYPES = {
+    "proc", "sysfs", "devtmpfs", "devpts", "cgroup", "cgroup2", "pstore",
+    "securityfs", "debugfs", "tracefs", "bpf", "configfs", "fusectl",
+    "mqueue", "hugetlbfs", "autofs", "binfmt_misc", "ramfs", "nsfs",
+    "rpc_pipefs", "efivarfs", "squashfs",
+}
+
+
+def _read_meminfo_kb(keys):
+    """Return selected /proc/meminfo values (in kB) as a dict."""
+    out = {k: 0 for k in keys}
+    text = _proc_fs.safe_read_text("/proc/meminfo") or ""
+    for line in text.splitlines():
+        parts = line.split(":")
+        if len(parts) != 2:
+            continue
+        name = parts[0].strip()
+        if name in out:
+            try:
+                out[name] = int(parts[1].strip().split()[0])
+            except (ValueError, IndexError):
+                pass
+    return out
+
+
+def _read_vmstat(keys):
+    """Return selected /proc/vmstat counters as a dict of ints."""
+    out = {k: 0 for k in keys}
+    text = _proc_fs.safe_read_text("/proc/vmstat") or ""
+    for line in text.splitlines():
+        parts = line.split()
+        if len(parts) == 2 and parts[0] in out:
+            try:
+                out[parts[0]] = int(parts[1])
+            except ValueError:
+                pass
+    return out
+
+
+def _read_sysctl_int(path):
+    text = _proc_fs.safe_read_text(path)
+    if not text:
+        return None
+    try:
+        return int(text.strip())
+    except ValueError:
+        return None
+
+
+def _read_block_scheduler():
+    """Return the active I/O scheduler of the busiest/first real block device."""
+    try:
+        blocks = sorted(os.listdir("/sys/block"))
+    except OSError:
+        return None
+    for name in blocks:
+        if name.startswith(("loop", "ram", "sr")):
+            continue
+        text = _proc_fs.safe_read_text(f"/sys/block/{name}/queue/scheduler")
+        if not text:
+            continue
+        m = re.search(r"\[(\w+[-\w]*)\]", text)
+        if m:
+            return {"device": name, "scheduler": m.group(1),
+                    "available": text.replace("[", "").replace("]", "").split()}
+    return None
+
+
+def _base_disk_name(device):
+    """Map a partition device path to its I/O-counter key.
+
+    /dev/nvme0n1p1 -> nvme0n1 ; /dev/sda1 -> sda ; /dev/mapper/x -> mapper key.
+    """
+    if not device:
+        return ""
+    name = device.split("/")[-1]
+    if name.startswith("nvme"):
+        # nvme0n1p1 -> nvme0n1
+        return re.sub(r"(p\d+)$", "", name)
+    if name.startswith(("sd", "vd", "hd", "xvd")):
+        return re.sub(r"\d+$", "", name)
+    return name
+
+
+def _statvfs_inodes(mountpoint):
+    try:
+        st = os.statvfs(mountpoint)
+    except OSError:
+        return None
+    total = int(st.f_files)
+    free = int(st.f_ffree)
+    if total <= 0:
+        return {"inode_total": 0, "inode_used": 0, "inode_percent": 0.0}
+    used = max(0, total - free)
+    return {
+        "inode_total": total,
+        "inode_used": used,
+        "inode_percent": round(used / total * 100.0, 1),
+    }
+
+
+_ANATOMY_BASE = "/opt/ring0/kernel-ai"
+_HOT_FILES_PREV = {"ts": None, "io": {}}
+_HOTFILES_SNAPSHOT = os.environ.get("HOTFILES_OUT", "/run/kernel-ai/hotfiles.json")
+_HOTFILES_MAX_AGE = 6.0
+
+
+def _read_hotfiles_snapshot():
+    """Return the root collector's system-wide snapshot if present and fresh."""
+    try:
+        with open(_HOTFILES_SNAPSHOT, "r", encoding="utf-8") as fh:
+            data = json.load(fh)
+    except (OSError, ValueError):
+        return None
+    ts = data.get("ts")
+    if not ts or (time.time() - float(ts)) > _HOTFILES_MAX_AGE:
+        return None
+    data["timestamp"] = datetime.now().isoformat()
+    return data
+
+
+def get_hot_files():
+    """Top processes writing to the filesystem right now.
+
+    Prefers the root ``hotfiles`` collector snapshot (system-wide). Falls back
+    to unprivileged same-uid sampling of /proc/<pid>/io when the collector is
+    not running.
+    """
+    snap = _read_hotfiles_snapshot()
+    if snap:
+        return snap
+    now = time.time()
+    prev = _HOT_FILES_PREV
+    dt = max(0.001, now - prev["ts"]) if prev["ts"] else 1.0
+    cur_io = {}
+    rows = []
+    visible_user = None
+    accessible = 0
+    for proc in psutil.process_iter(["pid", "name", "username"]):
+        try:
+            io = proc.io_counters()
+        except (psutil.AccessDenied, psutil.NoSuchProcess, psutil.ZombieProcess, OSError):
+            continue
+        pid = proc.info["pid"]
+        accessible += 1
+        if visible_user is None:
+            visible_user = proc.info.get("username")
+        wchar = int(getattr(io, "write_chars", 0) or 0)
+        rchar = int(getattr(io, "read_chars", 0) or 0)
+        wbytes = int(getattr(io, "write_bytes", 0) or 0)
+        cur_io[pid] = (wchar, rchar, wbytes)
+        pv = prev["io"].get(pid)
+        if not pv:
+            continue
+        w_rate = max(0.0, (wchar - pv[0]) / dt)
+        r_rate = max(0.0, (rchar - pv[1]) / dt)
+        wb_rate = max(0.0, (wbytes - pv[2]) / dt)
+        if w_rate < 1 and r_rate < 1 and wb_rate < 1:
+            continue
+        files = []
+        try:
+            for of in proc.open_files()[:6]:
+                p = str(getattr(of, "path", "") or "")
+                if p.startswith("/") and not p.startswith(("/proc", "/sys", "/dev")):
+                    files.append(p)
+        except (psutil.AccessDenied, psutil.NoSuchProcess, psutil.ZombieProcess, OSError):
+            pass
+        rows.append({
+            "pid": pid,
+            "name": proc.info.get("name") or "?",
+            "user": proc.info.get("username") or "?",
+            "write_bps": round(w_rate, 1),
+            "read_bps": round(r_rate, 1),
+            "disk_write_bps": round(wb_rate, 1),
+            "files": files[:3],
+        })
+
+    prev["ts"] = now
+    prev["io"] = cur_io
+    rows.sort(key=lambda r: r["write_bps"] + r["disk_write_bps"], reverse=True)
+    return {
+        "timestamp": datetime.now().isoformat(),
+        "writers": rows[:12],
+        "visible_user": visible_user,
+        "accessible_procs": accessible,
+        "source": "unprivileged",
+        "note": "unprivileged /proc: only same-uid processes are visible",
+    }
+
+
+_PATH_WALK_ALLOWED = ("/opt/ring0/kernel-ai", "/var/log", "/var/lib", "/run", "/usr")
+
+
+def _sanitize_walk_path(path):
+    """Only allow walking real files under non-sensitive operational roots.
+
+    The site is public, so we must not let a caller lstat arbitrary paths and
+    probe the filesystem. We accept an explicit path only if it normalizes to
+    an absolute path (no ``..``) under an allow-listed root and actually exists.
+    """
+    if not path:
+        return None
+    norm = os.path.normpath(path)
+    if not norm.startswith("/") or ".." in norm.split("/"):
+        return None
+    if not any(norm == root or norm.startswith(root + "/") for root in _PATH_WALK_ALLOWED):
+        return None
+    if not os.path.exists(norm):
+        return None
+    return norm
+
+
+def get_path_walk(path=None):
+    """Resolve a real path component-by-component (the dcache walk)."""
+    target = _sanitize_walk_path(path) or _pick_anatomy_file() or "/opt/ring0/kernel-ai/index.html"
+    target = os.path.normpath(target)
+    parts = [p for p in target.split("/") if p]
+    steps = [{"name": "/", "path": "/", "inode": None, "type": "dir", "mode_str": "", "size_kb": None}]
+    try:
+        st = os.lstat("/")
+        steps[0]["inode"] = int(st.st_ino)
+        steps[0]["mode_str"] = _mode_to_string(st.st_mode)
+    except OSError:
+        pass
+    cur = ""
+    for part in parts:
+        cur = cur + "/" + part
+        entry = {"name": part, "path": cur, "inode": None, "type": "file", "mode_str": "", "size_kb": None}
+        try:
+            st = os.lstat(cur)
+            entry["inode"] = int(st.st_ino)
+            entry["mode_str"] = _mode_to_string(st.st_mode)
+            if _stat.S_ISDIR(st.st_mode):
+                entry["type"] = "dir"
+            elif _stat.S_ISLNK(st.st_mode):
+                entry["type"] = "symlink"
+                try:
+                    entry["target"] = os.readlink(cur)
+                except OSError:
+                    pass
+            else:
+                entry["type"] = "file"
+                entry["size_kb"] = round(st.st_size / 1024.0, 1)
+        except OSError as exc:
+            entry["error"] = str(exc)
+            steps.append(entry)
+            break
+        steps.append(entry)
+
+    dentry = {}
+    dtext = _proc_fs.safe_read_text("/proc/sys/fs/dentry-state") or ""
+    nums = dtext.split()
+    if len(nums) >= 2:
+        try:
+            dentry = {
+                "nr_dentry": int(nums[0]),
+                "nr_unused": int(nums[1]),
+                "active": int(nums[0]) - int(nums[1]),
+            }
+        except ValueError:
+            dentry = {}
+
+    return {
+        "path": target,
+        "steps": steps,
+        "depth": len(steps),
+        "dentry_state": dentry,
+    }
+_FS_TYPE_MAGIC = {"ef53": "ext4", "58465342": "xfs", "2fc12fc1": "zfs", "9123683e": "btrfs"}
+
+
+def _mode_to_string(mode):
+    is_dir = _stat.S_ISDIR(mode)
+    kind = "d" if is_dir else ("l" if _stat.S_ISLNK(mode) else "-")
+    perms = ""
+    for who in ("USR", "GRP", "OTH"):
+        for bit, ch in (("R", "r"), ("W", "w"), ("X", "x")):
+            perms += ch if (mode & getattr(_stat, f"S_I{bit}{who}")) else "-"
+    return kind + perms
+
+
+def _pick_anatomy_file():
+    """Choose the largest readable regular file from a few app dirs.
+
+    A larger file is more likely to span multiple extents, which makes the
+    on-disk layout interesting to visualize.
+    """
+    roots = [
+        os.path.join(_ANATOMY_BASE, "static", "js"),
+        os.path.join(_ANATOMY_BASE, "static"),
+        _ANATOMY_BASE,
+    ]
+    for root in roots:
+        best = None
+        try:
+            names = os.listdir(root)
+        except OSError:
+            continue
+        for name in names:
+            if name.startswith("."):
+                continue
+            fp = os.path.join(root, name)
+            try:
+                if not os.path.isfile(fp) or not os.access(fp, os.R_OK):
+                    continue
+                sz = os.path.getsize(fp)
+            except OSError:
+                continue
+            if sz > 0 and (best is None or sz > best[1]):
+                best = (fp, sz)
+        # Prefer the first root (static/js) that yields any candidate.
+        if best:
+            return best[0]
+    return None
+
+
+def _find_filefrag():
+    """Locate the filefrag binary, including sbin dirs not on the service PATH."""
+    found = shutil.which("filefrag")
+    if found:
+        return found
+    for cand in ("/usr/sbin/filefrag", "/sbin/filefrag", "/usr/bin/filefrag", "/bin/filefrag"):
+        if os.path.isfile(cand) and os.access(cand, os.X_OK):
+            return cand
+    return None
+
+
+def _parse_filefrag(path):
+    """Return (fstype, extents) parsed from `filefrag -v`.
+
+    extents: list of {logical, physical, length, flags}. Uses the FIEMAP
+    ioctl under the hood, which works unprivileged on readable files.
+    """
+    binary = _find_filefrag()
+    if not binary:
+        return None, []
+    try:
+        res = subprocess.run(
+            [binary, "-v", path],
+            capture_output=True, text=True, timeout=4, check=False,
+        )
+    except (OSError, subprocess.SubprocessError):
+        return None, []
+    fstype = None
+    extents = []
+    row_re = re.compile(r"^\s*\d+:\s+(\d+)\.\.\s*(\d+):\s+(\d+)\.\.\s*(\d+):\s+(\d+):\s*(.*)$")
+    for line in (res.stdout or "").splitlines():
+        mt = re.search(r"Filesystem type is:\s*(\w+)", line)
+        if mt:
+            fstype = _FS_TYPE_MAGIC.get(mt.group(1), mt.group(1))
+            continue
+        m = row_re.match(line)
+        if m:
+            extents.append({
+                "logical": int(m.group(1)),
+                "physical": int(m.group(3)),
+                "length": int(m.group(5)),
+                "flags": (m.group(6) or "").strip(),
+            })
+    return fstype, extents
+
+
+def get_ext4_file_anatomy(path=None):
+    """Resolve one real file to its inode metadata and on-disk extent layout."""
+    target = _sanitize_walk_path(path) or _pick_anatomy_file()
+    if not target or not os.path.isfile(target):
+        return {"available": False, "reason": "no readable file found"}
+    try:
+        st = os.stat(target)
+    except OSError as exc:
+        return {"available": False, "reason": str(exc)}
+
+    try:
+        vfs = os.statvfs(target)
+        block_size = int(vfs.f_bsize)
+        dev_total_blocks = int(vfs.f_blocks)
+    except OSError:
+        block_size = 4096
+        dev_total_blocks = 0
+
+    fstype, extents = _parse_filefrag(target)
+    if not fstype:
+        # Fall back to the mount fstype.
+        best_mp = ""
+        try:
+            for part in psutil.disk_partitions(all=False):
+                mp = part.mountpoint
+                if target.startswith(mp) and len(mp) > len(best_mp):
+                    best_mp = mp
+                    fstype = (part.fstype or "").lower()
+        except (psutil.Error, OSError):
+            pass
+
+    total_len = sum(e["length"] for e in extents) or 1
+    phys_positions = [e["physical"] for e in extents] + [e["physical"] + e["length"] for e in extents]
+    span = {
+        "min": min(phys_positions) if phys_positions else 0,
+        "max": max(phys_positions) if phys_positions else 0,
+    }
+    fragmented = len(extents) > 1
+
+    return {
+        "available": True,
+        "path": target,
+        "name": os.path.basename(target),
+        "inode": int(st.st_ino),
+        "mode_octal": oct(st.st_mode & 0o7777),
+        "mode_str": _mode_to_string(st.st_mode),
+        "nlink": int(st.st_nlink),
+        "uid": int(st.st_uid),
+        "gid": int(st.st_gid),
+        "size_bytes": int(st.st_size),
+        "size_kb": round(st.st_size / 1024.0, 1),
+        "blocks_512": int(st.st_blocks),
+        "block_size": block_size,
+        "fs_blocks": (int(st.st_size) + block_size - 1) // block_size if block_size else 0,
+        "fstype": fstype or "ext4",
+        "atime": datetime.fromtimestamp(st.st_atime).isoformat(timespec="seconds"),
+        "mtime": datetime.fromtimestamp(st.st_mtime).isoformat(timespec="seconds"),
+        "ctime": datetime.fromtimestamp(st.st_ctime).isoformat(timespec="seconds"),
+        "extents": extents,
+        "extent_count": len(extents),
+        "total_extent_blocks": total_len,
+        "fragmented": fragmented,
+        "device_total_blocks": dev_total_blocks,
+        "device_span": span,
+        "filefrag_available": bool(_find_filefrag()),
+    }
+
+
+def _find_ext4_root_mount():
+    """Return (device, mountpoint, options_list) for the ext4 mount of `/`."""
+    text = _proc_fs.safe_read_text("/proc/mounts") or ""
+    best = None
+    for line in text.splitlines():
+        parts = line.split()
+        if len(parts) < 4:
+            continue
+        device, mountpoint, fstype, opts = parts[0], parts[1], parts[2], parts[3]
+        if fstype != "ext4":
+            continue
+        if mountpoint == "/":
+            return device, mountpoint, opts.split(",")
+        if best is None:
+            best = (device, mountpoint, opts.split(","))
+    return best if best else (None, None, [])
+
+
+def _parse_jbd2_info(text):
+    """Extract transaction stats from /proc/fs/jbd2/<dev>/info."""
+    info = {"raw": []}
+    for line in text.splitlines():
+        line = line.strip()
+        if not line:
+            continue
+        info["raw"].append(line)
+        m = re.search(r"(\d+)\s+transactions?\s+\((\d+)\s+requested\)", line)
+        if m:
+            info["transactions"] = int(m.group(1))
+            info["requested"] = int(m.group(2))
+        m = re.search(r"up to\s+(\d+)\s+blocks", line)
+        if m:
+            info["max_blocks_per_txn"] = int(m.group(1))
+        m = re.search(r"([\d.]+)ms\s+waiting for transaction", line)
+        if m:
+            info["avg_waiting_ms"] = float(m.group(1))
+        m = re.search(r"([\d.]+)ms\s+running transaction", line)
+        if m:
+            info["avg_running_ms"] = float(m.group(1))
+        m = re.search(r"([\d.]+)ms\s+transaction was being committed", line)
+        if m:
+            info["avg_commit_ms"] = float(m.group(1))
+        m = re.search(r"([\d.]+)ms\s+logging transaction", line)
+        if m:
+            info["avg_logging_ms"] = float(m.group(1))
+        m = re.search(r"(\d+)\s+blocks per transaction", line)
+        if m:
+            info["blocks_per_txn"] = int(m.group(1))
+        m = re.search(r"(\d+)\s+logged blocks per transaction", line)
+        if m:
+            info["logged_blocks_per_txn"] = int(m.group(1))
+        m = re.search(r"([\d.]+)us average transaction commit time", line)
+        if m:
+            info["commit_time_ms"] = round(float(m.group(1)) / 1000.0, 3)
+        m = re.search(r"([\d.]+)ms average transaction commit time", line)
+        if m:
+            info["commit_time_ms"] = round(float(m.group(1)), 3)
+        m = re.search(r"(\d+)\s+handles per transaction", line)
+        if m:
+            info["handles_per_txn"] = int(m.group(1))
+    return info
+
+
+def get_ext4_journal():
+    """Report ext4 journaling mode and live jbd2 transaction statistics."""
+    device, mountpoint, opts = _find_ext4_root_mount()
+    if not device:
+        return {"available": False, "reason": "no ext4 mount found"}
+
+    data_mode = "ordered"
+    for o in opts:
+        if o.startswith("data="):
+            data_mode = o.split("=", 1)[1]
+    has_journal = "data=writeback" not in opts  # journal present unless explicitly disabled
+
+    jbd2 = {"raw_present": False}
+    jbd2_dev = None
+    try:
+        entries = sorted(os.listdir("/proc/fs/jbd2"))
+    except OSError:
+        entries = []
+    # Prefer the entry matching the root device's base name.
+    base = _base_disk_name(device)
+    dev_tail = device.split("/")[-1]
+    for ent in entries:
+        if ent.startswith(dev_tail) or ent.startswith(base) or "dm-" in ent:
+            jbd2_dev = ent
+            break
+    if not jbd2_dev and entries:
+        jbd2_dev = entries[0]
+    if jbd2_dev:
+        info_text = _proc_fs.safe_read_text(f"/proc/fs/jbd2/{jbd2_dev}/info")
+        if info_text:
+            parsed = _parse_jbd2_info(info_text)
+            parsed["raw_present"] = True
+            parsed["raw"] = parsed.get("raw", [])[:14]
+            jbd2 = parsed
+
+    return {
+        "available": True,
+        "device": device,
+        "mount": mountpoint,
+        "mode": data_mode,
+        "has_journal": has_journal,
+        "jbd2_device": jbd2_dev,
+        "jbd2": jbd2,
+        "options": [o for o in opts if o][:10],
+    }
+
+
+def _build_writeback(mem, dirty_mb, writeback_mb):
+    """Reconstruct the kernel dirty-page throttling thresholds.
+
+    The kernel throttles writers in balance_dirty_pages() when dirty pages
+    approach vm.dirty_ratio of dirtyable memory, and wakes background flushers
+    at vm.dirty_background_ratio. If the *_bytes knobs are set they win.
+    """
+    mem_total_mb = round(mem.get("MemTotal", 0) / 1024.0, 1)
+    mem_avail_mb = round(mem.get("MemAvailable", 0) / 1024.0, 1)
+    # Dirtyable memory approximation: available memory + already-dirty pages.
+    dirtyable_mb = max(1.0, mem_avail_mb + dirty_mb)
+
+    dirty_bytes = _read_sysctl_int("/proc/sys/vm/dirty_bytes") or 0
+    bg_bytes = _read_sysctl_int("/proc/sys/vm/dirty_background_bytes") or 0
+    dirty_ratio = _read_sysctl_int("/proc/sys/vm/dirty_ratio")
+    bg_ratio = _read_sysctl_int("/proc/sys/vm/dirty_background_ratio")
+
+    if dirty_bytes > 0:
+        thresh_mb = round(dirty_bytes / (1024.0 * 1024.0), 1)
+        mode = "bytes"
+    else:
+        thresh_mb = round((dirty_ratio or 20) / 100.0 * dirtyable_mb, 1)
+        mode = "ratio"
+    if bg_bytes > 0:
+        bg_thresh_mb = round(bg_bytes / (1024.0 * 1024.0), 1)
+    else:
+        bg_thresh_mb = round((bg_ratio if bg_ratio is not None else 10) / 100.0 * dirtyable_mb, 1)
+
+    pct_of_thresh = round(dirty_mb / thresh_mb * 100.0, 1) if thresh_mb > 0 else 0.0
+    return {
+        "dirty_mb": dirty_mb,
+        "writeback_mb": writeback_mb,
+        "bg_thresh_mb": bg_thresh_mb,
+        "thresh_mb": thresh_mb,
+        "dirty_ratio": dirty_ratio if dirty_ratio is not None else 0,
+        "dirty_background_ratio": bg_ratio if bg_ratio is not None else 0,
+        "mem_total_mb": mem_total_mb,
+        "mem_available_mb": mem_avail_mb,
+        "dirtyable_mb": round(dirtyable_mb, 1),
+        "pct_of_thresh": pct_of_thresh,
+        "bg_flushing": dirty_mb >= bg_thresh_mb and bg_thresh_mb > 0,
+        "throttling": dirty_mb >= thresh_mb and thresh_mb > 0,
+        "thresh_mode": mode,
+    }
+
 
 def get_filesystem_blocks(filesystem_prev=None):
     filesystem_prev = _FILESYSTEM_PREV_DEFAULT if filesystem_prev is None else filesystem_prev
     now = time.time()
+    prev_ts = filesystem_prev.get("timestamp")
+    dt = max(0.001, now - prev_ts) if prev_ts else 1.0
+
+    # --- Root filesystem usage (real) -------------------------------------
     try:
         usage = psutil.disk_usage("/")
     except psutil.Error:
         usage = None
-
     used_percent = float(usage.percent) if usage else 0.0
     total_gb = round((usage.total / (1024**3)), 2) if usage else 0.0
     used_gb = round((usage.used / (1024**3)), 2) if usage else 0.0
     free_gb = round((usage.free / (1024**3)), 2) if usage else 0.0
+    root_inodes = _statvfs_inodes("/") or {"inode_total": 0, "inode_used": 0, "inode_percent": 0.0}
 
+    # --- Global + per-device disk I/O (real) ------------------------------
     io = psutil.disk_io_counters()
     write_bytes = int(io.write_bytes) if io else 0
-    prev_ts = filesystem_prev["timestamp"]
-    prev_write = filesystem_prev["write_bytes"]
-    dt = max(0.001, now - prev_ts) if prev_ts else 1.0
+    read_bytes = int(io.read_bytes) if io else 0
+    prev_write = filesystem_prev.get("write_bytes")
+    prev_read = filesystem_prev.get("read_bytes")
     write_bps = 0.0 if prev_write is None else max(0.0, (write_bytes - prev_write) / dt)
+    read_bps = 0.0 if prev_read is None else max(0.0, (read_bytes - prev_read) / dt)
 
-    rows = 20
-    cols = 34
-    total_blocks = rows * cols
-    used_ratio_global = max(0.0, min(1.0, used_percent / 100.0))
-
-    zone_defs = [
-        {"id": "root", "name": "/", "path": "/", "base": 1.5, "bias": 0.00},
-        {"id": "var", "name": "/var", "path": "/var", "base": 1.6, "bias": 0.10},
-        {"id": "home", "name": "/home", "path": "/home", "base": 1.35, "bias": 0.06},
-        {"id": "usr", "name": "/usr", "path": "/usr", "base": 1.45, "bias": 0.08},
-        {"id": "etc", "name": "/etc", "path": "/etc", "base": 1.0, "bias": -0.03},
-        {"id": "tmp", "name": "/tmp", "path": "/tmp", "base": 1.0, "bias": -0.02},
-        {"id": "dev", "name": "/dev", "path": "/dev", "base": 0.85, "bias": -0.06},
-    ]
+    per_disk_now = {}
+    device_rates = {}
+    try:
+        per_disk = psutil.disk_io_counters(perdisk=True) or {}
+    except (psutil.Error, OSError):
+        per_disk = {}
+    prev_per_disk = filesystem_prev.get("per_disk") or {}
+    for name, ctr in per_disk.items():
+        w = int(getattr(ctr, "write_bytes", 0))
+        r = int(getattr(ctr, "read_bytes", 0))
+        per_disk_now[name] = {"write": w, "read": r}
+        pv = prev_per_disk.get(name)
+        if pv:
+            device_rates[name] = {
+                "write_bps": max(0.0, (w - pv.get("write", w)) / dt),
+                "read_bps": max(0.0, (r - pv.get("read", r)) / dt),
+            }
+        else:
+            device_rates[name] = {"write_bps": 0.0, "read_bps": 0.0}
+
+    # --- Real mount map ---------------------------------------------------
+    mounts = []
+    seen_mp = set()
+    try:
+        partitions = psutil.disk_partitions(all=False)
+    except (psutil.Error, OSError):
+        partitions = []
+    for part in partitions:
+        fstype = (part.fstype or "").lower()
+        mp = part.mountpoint
+        if not fstype or fstype in _PSEUDO_FSTYPES:
+            continue
+        if mp in seen_mp:
+            continue
+        try:
+            u = psutil.disk_usage(mp)
+        except (psutil.Error, OSError):
+            continue
+        if u.total <= 0:
+            continue
+        seen_mp.add(mp)
+        base = _base_disk_name(part.device)
+        rates = device_rates.get(base, {"write_bps": 0.0, "read_bps": 0.0})
+        inodes = _statvfs_inodes(mp) or {"inode_total": 0, "inode_used": 0, "inode_percent": 0.0}
+        mounts.append(
+            {
+                "device": part.device,
+                "disk": base,
+                "mountpoint": mp,
+                "fstype": fstype,
+                "total_gb": round(u.total / (1024**3), 2),
+                "used_gb": round(u.used / (1024**3), 2),
+                "free_gb": round(u.free / (1024**3), 2),
+                "used_percent": round(float(u.percent), 1),
+                "inode_total": inodes["inode_total"],
+                "inode_used": inodes["inode_used"],
+                "inode_percent": inodes["inode_percent"],
+                "write_bps": round(rates["write_bps"], 2),
+                "read_bps": round(rates["read_bps"], 2),
+            }
+        )
+    mounts.sort(key=lambda x: x["total_gb"], reverse=True)
 
-    activity_counts = {z["id"]: 0 for z in zone_defs}
+    devices = [
+        {"name": name, "write_bps": round(r["write_bps"], 2), "read_bps": round(r["read_bps"], 2)}
+        for name, r in device_rates.items()
+    ]
+    devices.sort(key=lambda x: (x["write_bps"] + x["read_bps"]), reverse=True)
+
+    # The write-path "device" stage should represent the disk backing `/`,
+    # not a snap loopback. Prefer the root disk; fall back to the busiest
+    # real (non-loop/ram) device, then to anything available.
+    root_disk = next((mnt["disk"] for mnt in mounts if mnt["mountpoint"] == "/"), None)
+    if root_disk and root_disk in device_rates:
+        busiest = {"name": root_disk, "write_bps": round(device_rates[root_disk]["write_bps"], 2),
+                   "read_bps": round(device_rates[root_disk]["read_bps"], 2)}
+    else:
+        real_devs = [d for d in devices if not d["name"].startswith(("loop", "ram"))]
+        pool = real_devs or devices
+        busiest = pool[0] if pool else {"name": "device", "write_bps": 0.0, "read_bps": 0.0}
+
+    # --- Dirty / writeback pages + throttling thresholds (real) -----------
+    mem = _read_meminfo_kb(["Dirty", "Writeback", "MemTotal", "MemAvailable"])
+    dirty_mb = round(mem.get("Dirty", 0) / 1024.0, 2)
+    writeback_mb = round(mem.get("Writeback", 0) / 1024.0, 2)
+    writeback_block = _build_writeback(mem, dirty_mb, writeback_mb)
+    io_sched = _read_block_scheduler()
+
+    # --- VFS activity: sampled open regular-file descriptors (real) -------
+    open_files_count = 0
     try:
-        processes = list(psutil.process_iter(["pid"]))[:90]
-        zone_paths = sorted([(z["path"], z["id"]) for z in zone_defs], key=lambda x: len(x[0]), reverse=True)
-        for proc in processes:
+        for proc in list(psutil.process_iter(["pid"]))[:140]:
             try:
-                open_files = proc.open_files()[:28]
+                open_files_count += len(proc.open_files())
             except (psutil.AccessDenied, psutil.NoSuchProcess, psutil.ZombieProcess, OSError):
                 continue
-            for of in open_files:
-                fpath = str(getattr(of, "path", "") or "")
-                if not fpath.startswith("/"):
-                    continue
-                for prefix, zone_id in zone_paths:
-                    if prefix == "/":
-                        continue
-                    if fpath == prefix or fpath.startswith(prefix + "/"):
-                        activity_counts[zone_id] += 1
-                        break
-                else:
-                    activity_counts["root"] += 1
     except (psutil.Error, OSError) as exc:
         log_event(
             logger,
             "DEBUG",
-            "Failed to sample process open files for filesystem heatmap",
+            "Failed to sample open files for VFS activity",
             event_dataset="kernel_ai.app",
             component="services.system_view",
             operation="get_filesystem_blocks",
             event_data={"error": str(exc)},
         )
 
-    weighted = []
-    for z in zone_defs:
-        act = float(activity_counts.get(z["id"], 0))
-        z["activity"] = act
-        weighted.append(max(0.2, z["base"] + act * 0.08))
-
-    total_weight = sum(weighted) or 1.0
-    row_counts = [max(1, int(round(rows * w / total_weight))) for w in weighted]
-    while sum(row_counts) > rows:
-        idx = max(range(len(row_counts)), key=lambda i: row_counts[i])
-        if row_counts[idx] > 1:
-            row_counts[idx] -= 1
-        else:
-            break
-    while sum(row_counts) < rows:
-        idx = max(range(len(weighted)), key=lambda i: weighted[i])
-        row_counts[idx] += 1
-
-    writing_ratio = min(0.20, write_bps / (300 * 1024 * 1024))
-    writing_blocks_total = int(round(total_blocks * writing_ratio))
-    writing_blocks_total = max(0, min(total_blocks, writing_blocks_total))
-
-    blocks = []
-    zones = []
-    cursor_row = 0
-    zone_scores = []
-    for z in zone_defs:
-        zone_scores.append(z["activity"] + 1.0)
-    score_sum = sum(zone_scores) or 1.0
-
-    seed = int(now * 3)
-    for idx, z in enumerate(zone_defs):
-        row_span = row_counts[idx]
-        row_start = cursor_row
-        row_end = min(rows - 1, cursor_row + row_span - 1)
-        cursor_row += row_span
-
-        zone_cells = max(1, (row_end - row_start + 1) * cols)
-        local_used_ratio = max(0.05, min(0.98, used_ratio_global + z["bias"] + min(0.18, z["activity"] / 120.0)))
-        zone_used = int(round(zone_cells * local_used_ratio))
-        zone_used = max(0, min(zone_cells, zone_used))
-
-        zone_write_share = zone_scores[idx] / score_sum
-        zone_writing = int(round(writing_blocks_total * zone_write_share))
-        zone_writing = max(0, min(zone_used, zone_writing))
-        inode_pressure = int(max(0, min(100, round((z["activity"] * 2.6) + (zone_writing * 0.9) + (local_used_ratio * 38.0)))))
-
-        cell_index = 0
-        for r in range(row_start, row_end + 1):
-            for c in range(cols):
-                state = "used" if cell_index < zone_used else "free"
-                blocks.append({"r": r, "c": c, "i": r * cols + c, "zone_id": z["id"], "state": state})
-                cell_index += 1
-
-        if zone_writing > 0 and zone_used > 0:
-            zone_block_indices = [i for i, b in enumerate(blocks) if b["zone_id"] == z["id"] and b["state"] == "used"]
-            used_len = len(zone_block_indices)
-            for n in range(min(zone_writing, used_len)):
-                pick = (seed * 31 + idx * 67 + n * 43) % used_len
-                blocks[zone_block_indices[pick]]["state"] = "writing"
-
-        zones.append(
-            {
-                "id": z["id"],
-                "name": z["name"],
-                "path": z["path"],
-                "row_start": row_start,
-                "row_end": row_end,
-                "activity": int(z["activity"]),
-                "used_percent": round(local_used_ratio * 100.0, 1),
-                "writing_blocks": zone_writing,
-                "inode_pressure": inode_pressure,
-            }
-        )
+    write_mb_s = write_bps / (1024 * 1024)
+    read_mb_s = read_bps / (1024 * 1024)
+    dev_mb_s = busiest["write_bps"] / (1024 * 1024)
+
+    # Write-path stages (real values + 0..1 normalization to pick the hot stage).
+    stages = [
+        {"id": "vfs", "label": "VFS", "value": f"{open_files_count} open fds",
+         "norm": round(min(1.0, open_files_count / 2500.0), 3)},
+        {"id": "pagecache", "label": "PAGE CACHE", "value": f"{dirty_mb:.1f} MB dirty",
+         "norm": round(min(1.0, dirty_mb / 256.0), 3)},
+        {"id": "writeback", "label": "WRITEBACK", "value": f"{writeback_mb:.1f} MB",
+         "norm": round(min(1.0, writeback_mb / 64.0), 3)},
+        {"id": "block", "label": "BLOCK / IO SCHED", "value": f"{write_mb_s:.1f} MB/s wr",
+         "norm": round(min(1.0, write_mb_s / 80.0), 3)},
+        {"id": "device", "label": busiest["name"].upper(), "value": f"{dev_mb_s:.1f} MB/s",
+         "norm": round(min(1.0, dev_mb_s / 80.0), 3)},
+    ]
+    hot = max(stages, key=lambda s: s["norm"])
+    hot_id = hot["id"] if hot["norm"] > 0.02 else "block"
 
-    writing_blocks = sum(1 for b in blocks if b["state"] == "writing")
     filesystem_prev["timestamp"] = now
     filesystem_prev["write_bytes"] = write_bytes
-
-    inode_pressure_global = 0
-    if zones:
-        inode_pressure_global = int(round(sum(int(z.get("inode_pressure", 0)) for z in zones) / len(zones)))
+    filesystem_prev["read_bytes"] = read_bytes
+    filesystem_prev["per_disk"] = per_disk_now
 
     return {
         "timestamp": datetime.now().isoformat(),
-        "rows": rows,
-        "cols": cols,
-        "zones": zones,
-        "blocks": blocks,
+        "mounts": mounts,
+        "devices": devices,
+        "writepath": {
+            "stages": stages,
+            "hot": hot_id,
+            "write_bps": round(write_bps, 2),
+            "read_bps": round(read_bps, 2),
+            "open_files": open_files_count,
+        },
+        "writeback": writeback_block,
+        "io_scheduler": io_sched,
         "meta": {
             "total_gb": total_gb,
             "used_gb": used_gb,
             "free_gb": free_gb,
             "used_percent": round(used_percent, 2),
             "write_bps": round(write_bps, 2),
-            "writing_blocks": writing_blocks,
-            "inode_pressure": inode_pressure_global,
+            "read_bps": round(read_bps, 2),
+            "write_mb_s": round(write_mb_s, 3),
+            "read_mb_s": round(read_mb_s, 3),
+            "dirty_mb": dirty_mb,
+            "writeback_mb": writeback_mb,
+            "inode_percent": root_inodes["inode_percent"],
+            "inode_total": root_inodes["inode_total"],
+            "inode_used": root_inodes["inode_used"],
+            "mount_count": len(mounts),
+            "busiest_device": busiest["name"],
         },
     }
 
diff --git a/kernel_ai/state.py b/kernel_ai/state.py
index edf56e4..3116337 100644
--- a/kernel_ai/state.py
+++ b/kernel_ai/state.py
@@ -30,6 +30,8 @@
 FILESYSTEM_PREV = {
     "timestamp": None,
     "write_bytes": None,
+    "read_bytes": None,
+    "per_disk": {},
 }
 CRYPTO_PREV = {
     "timestamp": None,
diff --git a/kernel_ai/views/pages.py b/kernel_ai/views/pages.py
index adf395e..c1529c2 100644
--- a/kernel_ai/views/pages.py
+++ b/kernel_ai/views/pages.py
@@ -17,6 +17,9 @@
     ("/linux-processes-subsystem.html", "linux_processes_subsystem_html", h.linux_processes_subsystem_html),
     ("/linux-memory-subsystem", "linux_memory_subsystem_page", h.linux_memory_subsystem_page),
     ("/linux-memory-subsystem.html", "linux_memory_subsystem_html", h.linux_memory_subsystem_html),
+    ("/linux-network-subsystem", "linux_network_subsystem_page", h.linux_network_subsystem_page),
+    ("/network", "network_page_legacy", h.network_page_legacy),
+    ("/linux-network-subsystem.html", "linux_network_subsystem_html", h.linux_network_subsystem_html),
     ("/health", "health_check", h.health_check),
 ]
 
diff --git a/static/js/aes-ref.js b/static/js/aes-ref.js
index e0fd709..2074727 100644
--- a/static/js/aes-ref.js
+++ b/static/js/aes-ref.js
@@ -157,6 +157,25 @@
         return Z;
     }
 
+    // Same GF(2^128) multiply, but records every one of the 128 shift-and-XOR
+    // iterations so the UI can animate the "school-book" carry-less multiplication
+    // with reduction. steps[i] = state AFTER processing bit i of X.
+    function gfmul128Trace(X, Y) {
+        const Z = new Array(16).fill(0);
+        const V = Y.slice(0, 16);
+        const steps = [];
+        for (let i = 0; i < 128; i += 1) {
+            const bit = (X[i >> 3] >> (7 - (i & 7))) & 1;
+            if (bit) for (let j = 0; j < 16; j += 1) Z[j] ^= V[j];
+            const lsb = V[15] & 1;
+            for (let j = 15; j > 0; j -= 1) V[j] = ((V[j] >> 1) | ((V[j - 1] & 1) << 7)) & 0xff;
+            V[0] = (V[0] >> 1) & 0xff;
+            if (lsb) V[0] ^= 0xe1; // reduction by x^128 + x^7 + x^2 + x + 1
+            steps.push({ i, bit, xored: !!bit, reduced: !!lsb, z: Z.slice(), v: V.slice() });
+        }
+        return { steps, result: Z.slice() };
+    }
+
     // GHASH_H(blocks): Y_0 = 0; Y_i = (Y_{i-1} XOR block_i) . H. Returns the list
     // of intermediate Y states (including Y_0) so the UI can animate accumulation.
     function ghashSteps(H, blocks) {
@@ -192,6 +211,7 @@
         bytesToHex,
         popcount,
         gfmul128,
+        gfmul128Trace,
         ghashSteps,
         be64
     };
diff --git a/static/js/crypto-belt.js b/static/js/crypto-belt.js
index b9079af..1f1d870 100644
--- a/static/js/crypto-belt.js
+++ b/static/js/crypto-belt.js
@@ -2336,6 +2336,7 @@ class CryptoSubsystemVisualization {
             // Y0 node
             let prevX = px + 22 + stepW * 0.5;
             drawChip(prevX, 'Y0 = 0', hex(yStates[0], 6), '#6f8296');
+            const gfSteps = [];
             for (let s = 0; s < nSteps; s += 1) {
                 const cx = px + 22 + stepW * (s + 1.5);
                 // transition annotation
@@ -2346,9 +2347,18 @@ class CryptoSubsystemVisualization {
                     .style('fill', '#5f6f82').style('font-size', '9px').text('→');
                 const isLast = s === nSteps - 1;
                 const g = drawChip(cx, isLast ? 'S (Σ)' : `Y${s + 1}`, hex(yStates[s + 1], 6), yColor);
+                // Drill-down: this step is Y_{s+1} = (Y_s ⊕ block_{s+1}) · H in GF(2^128).
+                const Xin = yStates[s].map((v, j) => v ^ (absorbed[s].block[j] & 0xff));
+                gfSteps.push({ label: absorbed[s].label, X: Xin, H, prevY: yStates[s], block: absorbed[s].block, resultY: yStates[s + 1] });
+                g.style('cursor', 'pointer').on('click', () => this.openGfMulOverlay(s));
                 stepNodes.push({ g, rect: g.select('rect'), step: s });
                 prevX = cx;
             }
+            this._aesGfSteps = gfSteps;
+            // Hint that the chain is drill-downable.
+            box.append('text').attr('x', px + 22).attr('y', chainY + 46)
+                .style('font-family', 'Share Tech Mono, monospace').style('font-size', '7px').style('fill', '#8a7fce')
+                .text('click any Y-node to watch its (Y ⊕ block) · H carry-less multiply in GF(2^128)');
             // Tag node
             const tagX = Math.min(px + panelW - 24 - nodeW / 2, prevX + stepW);
             box.append('text').attr('x', (prevX + tagX) / 2).attr('y', chainY - 16).attr('text-anchor', 'middle')
@@ -2410,6 +2420,217 @@ class CryptoSubsystemVisualization {
         this._aesOpsRaf = requestAnimationFrame(frame);
     }
 
+    // Pure math for the GCM demo (CTR lanes + GHASH accumulation). Shared by the
+    // GCM overlay and the standalone GHASH-multiply entry so the two never drift.
+    _computeGcmDemo() {
+        const R = window.AESRef;
+        if (!this.aesDemo || !R) return null;
+        const key = R.hexToBytes(this.aesDemo.demo_vectors.key);
+        if (key.length !== 16) return null;
+        const nonce = R.hexToBytes('00112233445566778899aabb');
+        const lanes = [];
+        for (let b = 0; b < 4; b += 1) {
+            const ctr = nonce.concat([0, 0, 0, b + 1]);
+            const ks = R.encryptTrace(ctr, key).ciphertext;
+            const pt = [];
+            for (let i = 0; i < 16; i += 1) pt.push((0x40 + b * 16 + i) & 0xff);
+            const ct = ks.map((v, i) => v ^ pt[i]);
+            lanes.push({ b, ctr, ks, pt, ct });
+        }
+        const H = R.encryptTrace(new Array(16).fill(0), key).ciphertext;
+        const aad = R.hexToBytes('6b65726e656c2d61693a67636d2001');
+        while (aad.length < 16) aad.push(0);
+        const cBlocks = lanes.map((ln) => ln.ct);
+        const lenBlock = R.be64(16 * 8).concat(R.be64(cBlocks.length * 16 * 8));
+        const absorbed = [{ label: 'AAD', block: aad, kind: 'aad' }]
+            .concat(cBlocks.map((blk, i) => ({ label: `C${i + 1}`, block: blk, kind: 'ct' })))
+            .concat([{ label: 'LEN', block: lenBlock, kind: 'len' }]);
+        const yStates = R.ghashSteps(H, absorbed.map((a) => a.block));
+        const gfSteps = absorbed.map((a, s) => ({
+            label: a.label,
+            X: yStates[s].map((v, j) => v ^ (a.block[j] & 0xff)),
+            H,
+            prevY: yStates[s],
+            block: a.block,
+            resultY: yStates[s + 1]
+        }));
+        return { key, nonce, lanes, H, aad, absorbed, yStates, gfSteps };
+    }
+
+    // Direct entry: open the GF(2^128) multiply without going through GCM first.
+    openGhashMul(stepIndex = 1) {
+        if (!this._aesGfSteps || !this._aesGfSteps.length) {
+            const gcm = this._computeGcmDemo();
+            if (!gcm) return;
+            this._aesGfSteps = gcm.gfSteps;
+        }
+        this.openGfMulOverlay(Math.min(Math.max(stepIndex, 0), this._aesGfSteps.length - 1));
+    }
+
+    openGfMulOverlay(stepIndex) {
+        if (!this._aesGfSteps || !this._aesGfSteps[stepIndex]) return;
+        this.aesOverlay = 'gfmul';
+        this._aesGfIndex = stepIndex;
+        this.aesOpsClock = (typeof performance !== 'undefined' && performance.now) ? performance.now() : Date.now();
+        this.renderGfMulOverlay();
+    }
+
+    renderGfMulOverlay() {
+        if (!this.svg || this.aesOverlay !== 'gfmul' || !window.AESRef) return;
+        const R = window.AESRef;
+        const step = (this._aesGfSteps || [])[this._aesGfIndex];
+        if (!step) return;
+        const trace = R.gfmul128Trace(step.X, step.H);
+        const hex = (b, n = 16) => b.slice(0, n).map((v) => (v & 0xff).toString(16).padStart(2, '0')).join('');
+
+        const shell = this._aesOverlayShell(
+            `GHASH MULTIPLY · (Y_prev ⊕ ${step.label}) · H  in GF(2^128)`,
+            'carry-less (XOR) multiply with reduction by x^128 + x^7 + x^2 + x + 1 · 128 shift-and-add steps'
+        );
+        const { box, px, py, panelW, panelH } = shell;
+
+        // Back-to-GCM affordance (× / backdrop still fully close).
+        const backG = box.append('g').style('cursor', 'pointer').on('click', () => this.openModeOverlay('GCM'));
+        backG.append('rect').attr('x', px + panelW - 320).attr('y', py + 14).attr('width', 108).attr('height', 20).attr('rx', 4)
+            .style('fill', 'rgba(7,11,17,0.82)').style('stroke', 'rgba(122,145,176,0.5)');
+        backG.append('text').attr('x', px + panelW - 266).attr('y', py + 28).attr('text-anchor', 'middle')
+            .style('font-family', 'Share Tech Mono, monospace').style('font-size', '9px').style('fill', '#cfe3ff').text('‹ BACK TO GCM');
+
+        // Block navigation: browse every GHASH multiply (AAD, C1..Cn, LEN).
+        const steps = this._aesGfSteps || [];
+        const idx = this._aesGfIndex;
+        const navY = py + 52;
+        const goTo = (i) => { if (i >= 0 && i < steps.length) this.openGfMulOverlay(i); };
+        box.append('text').attr('x', px + 22).attr('y', navY + 14)
+            .style('font-family', 'Share Tech Mono, monospace').style('font-size', '8px').style('fill', '#7f8ea3').text('BLOCK');
+        let nx = px + 22 + 40;
+        const mkArrow = (label, i) => {
+            const on = i >= 0 && i < steps.length;
+            const g = box.append('g').style('cursor', on ? 'pointer' : 'default');
+            if (on) g.on('click', () => goTo(i));
+            g.append('rect').attr('x', nx).attr('y', navY).attr('width', 20).attr('height', 20).attr('rx', 4)
+                .style('fill', 'rgba(7,11,17,0.82)').style('stroke', on ? 'rgba(122,145,176,0.5)' : 'rgba(122,145,176,0.16)');
+            g.append('text').attr('x', nx + 10).attr('y', navY + 14).attr('text-anchor', 'middle')
+                .style('font-family', 'Share Tech Mono, monospace').style('font-size', '11px').style('fill', on ? '#cfe3ff' : '#46525f').text(label);
+            nx += 24;
+        };
+        mkArrow('‹', idx - 1);
+        steps.forEach((st, i) => {
+            const on = i === idx;
+            const bw = 34;
+            const g = box.append('g').style('cursor', 'pointer').on('click', () => goTo(i));
+            g.append('rect').attr('x', nx).attr('y', navY).attr('width', bw).attr('height', 20).attr('rx', 4)
+                .style('fill', on ? 'rgba(38,63,98,0.95)' : 'rgba(7,11,17,0.82)')
+                .style('stroke', on ? 'rgba(128,190,255,0.86)' : 'rgba(122,145,176,0.32)');
+            g.append('text').attr('x', nx + bw / 2).attr('y', navY + 14).attr('text-anchor', 'middle')
+                .style('font-family', 'Share Tech Mono, monospace').style('font-size', '8px')
+                .style('fill', on ? '#d8eaff' : '#9dafc5').text(st.label);
+            nx += bw + 4;
+        });
+        mkArrow('›', idx + 1);
+
+        // Operand readouts.
+        const opY = py + 96;
+        const opText = (x, label, val, color) => {
+            box.append('text').attr('x', x).attr('y', opY).style('font-family', 'Share Tech Mono, monospace').style('font-size', '8px').style('fill', color).text(label);
+            box.append('text').attr('x', x).attr('y', opY + 13).style('font-family', 'Share Tech Mono, monospace').style('font-size', '8px').style('fill', '#c5d0df').text(hex(val));
+        };
+        opText(px + 22, `X = Y_prev ⊕ ${step.label}  (multiplier)`, step.X, '#8fdcff');
+        opText(px + 22 + (panelW - 44) * 0.52, 'H = AES_K(0)  (multiplicand)', step.H, '#d9c2ff');
+
+        // Three 16×8 bit grids: X (multiplier), V (running H·x^i), Z (accumulator).
+        const cols = 16, rows = 8;
+        const gap = 26;
+        const gridW = Math.min((panelW - 44 - gap * 2) / 3, 300);
+        const cs = Math.min(gridW / cols, 15);
+        const gy0 = py + 130;
+        const mkGrid = (gx, title, color) => {
+            box.append('text').attr('x', gx).attr('y', gy0 - 7).style('font-family', 'Share Tech Mono, monospace').style('font-size', '8px').style('fill', color).text(title);
+            const cells = [];
+            for (let i = 0; i < 128; i += 1) {
+                const c = i % cols, r = (i / cols) | 0;
+                cells.push(box.append('rect')
+                    .attr('x', gx + c * cs).attr('y', gy0 + r * cs).attr('width', cs - 1.6).attr('height', cs - 1.6).attr('rx', 1.5)
+                    .style('fill', 'rgba(40,52,74,0.5)'));
+            }
+            return cells;
+        };
+        const xCells = mkGrid(px + 22, 'X bits (MSB→LSB, consumed left→right)', '#8fdcff');
+        const vCells = mkGrid(px + 22 + gridW + gap, 'V = H·xⁱ (shift + reduce)', '#d9c2ff');
+        const zCells = mkGrid(px + 22 + 2 * (gridW + gap), 'Z accumulator → product', '#8effc8');
+
+        const annoY = gy0 + rows * cs + 26;
+        const anno = box.append('text').attr('x', px + 22).attr('y', annoY)
+            .style('font-family', 'Share Tech Mono, monospace').style('font-size', '9px').style('fill', '#e6edf8');
+        const counter = box.append('text').attr('x', px + panelW - 24).attr('y', annoY).attr('text-anchor', 'end')
+            .style('font-family', 'Share Tech Mono, monospace').style('font-size', '9px').style('fill', '#9fb1c8');
+        const barY = annoY + 10;
+        box.append('rect').attr('x', px + 22).attr('y', barY).attr('width', panelW - 44).attr('height', 4).attr('rx', 2).style('fill', 'rgba(40,52,74,0.6)');
+        const barFill = box.append('rect').attr('x', px + 22).attr('y', barY).attr('width', 0).attr('height', 4).attr('rx', 2).style('fill', '#8effc8');
+        const resultText = box.append('text').attr('x', px + 22).attr('y', barY + 24)
+            .style('font-family', 'Share Tech Mono, monospace').style('font-size', '9px').style('fill', '#8effc8');
+
+        this._aesGfViz = { trace, X: step.X, H: step.H, xCells, vCells, zCells, anno, counter, barFill, resultText, resultY: step.resultY, hex, barW: panelW - 44 };
+        this._startGfMulAnim();
+    }
+
+    _startGfMulAnim() {
+        if (this._aesOpsRaf) cancelAnimationFrame(this._aesOpsRaf);
+        const viz = this._aesGfViz;
+        if (!viz) return;
+        const steps = viz.trace.steps;
+        const N = steps.length;
+        const stepMs = 42, holdMs = 1600;
+        const cycle = N * stepMs + holdMs;
+        const dim = 'rgba(40,52,74,0.5)';
+        const bitOf = (arr, i) => (arr[i >> 3] >> (7 - (i & 7))) & 1;
+        let lastK = -2;
+        const frame = () => {
+            if (this.aesOverlay !== 'gfmul' || !this.svg || this.svg.selectAll('.aes-ops-overlay').empty()) {
+                this._aesOpsRaf = null;
+                return;
+            }
+            const now = ((typeof performance !== 'undefined' && performance.now) ? performance.now() : Date.now());
+            const elapsed = (now - (this.aesOpsClock || now)) % cycle;
+            let k = Math.floor(elapsed / stepMs);
+            const done = k >= N;
+            if (k >= N) k = N - 1;
+            if (k !== lastK) {
+                lastK = k;
+                const st = steps[k];
+                const vBefore = k === 0 ? viz.H : steps[k - 1].v; // value that is XORed at step k
+                viz.xCells.forEach((cell, i) => {
+                    const b = bitOf(viz.X, i);
+                    if (i === k && !done) cell.style('fill', '#ffffff').style('opacity', 1);
+                    else if (i < k || done) cell.style('fill', b ? 'rgba(120,200,255,0.55)' : 'rgba(40,52,74,0.32)').style('opacity', 0.85);
+                    else cell.style('fill', b ? '#8fdcff' : dim).style('opacity', b ? 0.9 : 0.4);
+                });
+                viz.vCells.forEach((cell, i) => {
+                    const b = bitOf(vBefore, i);
+                    cell.style('fill', b ? '#d9c2ff' : dim).style('opacity', b ? 0.9 : 0.4);
+                });
+                viz.zCells.forEach((cell, i) => {
+                    const b = bitOf(done ? viz.resultY : st.z, i);
+                    cell.style('fill', b ? '#8effc8' : dim).style('opacity', b ? 0.95 : 0.4);
+                });
+                viz.anno.text(done
+                    ? 'complete · Z is the product (Y ⊕ block)·H'
+                    : `bit ${k} of X = ${st.bit}  →  ${st.bit ? 'Z ^= V' : 'skip (bit is 0)'}   ·   then V = V·x${st.reduced ? '  ⊕ R  (reduction fired)' : ''}`);
+                viz.counter.text(`${done ? N : k + 1} / ${N}`);
+                viz.barFill.attr('width', ((done ? N : k + 1) / N) * viz.barW);
+                if (done) {
+                    const ok = viz.hex(viz.trace.result) === viz.hex(viz.resultY);
+                    viz.resultText.style('fill', ok ? '#8effc8' : '#ff9a9a')
+                        .text(`Z = ${viz.hex(viz.trace.result)}  ${ok ? '✓ equals the Y-node in the GHASH chain' : '⚠ mismatch'}`);
+                } else {
+                    viz.resultText.text('');
+                }
+            }
+            this._aesOpsRaf = requestAnimationFrame(frame);
+        };
+        this._aesOpsRaf = requestAnimationFrame(frame);
+    }
+
     renderAesOpsOverlay() {
         if (!this.svg || !this.aesOpsRound || !this.aesDemo || !window.AESRef) return;
         const R = window.AESRef;
@@ -2854,7 +3075,8 @@ class CryptoSubsystemVisualization {
         if (aes) {
             const explore = [
                 ['KEY SCHEDULE', () => this.openKeyScheduleOverlay()],
-                ['GCM / CTR MODE', () => this.openModeOverlay(this.aesModeKind || 'CTR')]
+                ['GCM / CTR MODE', () => this.openModeOverlay(this.aesModeKind || 'CTR')],
+                ['GHASH ⊗ GF(2¹²⁸)', () => this.openGhashMul(1)]
             ];
             explore.forEach(([label, onClick], idx) => {
                 const bw = 118;
diff --git a/static/js/filesystem-map.js b/static/js/filesystem-map.js
index e1988e9..fa2c42b 100644
--- a/static/js/filesystem-map.js
+++ b/static/js/filesystem-map.js
@@ -1,7 +1,7 @@
 // Filesystem Block Map Visualization
-// Version: 3
+// Version: 4
 
-debugLog('🗂️ filesystem-map.js v3: Script loading...');
+debugLog('🗂️ filesystem-map.js v4: Script loading...');
 
 class FilesystemMapVisualization {
     constructor() {
@@ -14,23 +14,56 @@ class FilesystemMapVisualization {
         this.exitButton = null;
         this.overlayNodes = [];
         this.resizeHandler = null;
+        this.keyHandler = null;
         this.telemetry = null;
         this.tick = 0;
         this.renderMode = 'occupancy';
         this.modeButtons = new Map();
         this.legendNode = null;
-        this.orbHitArea = null;
+        this.infoNode = null;
         this.canvasClickHandler = null;
         this.canvasMouseMoveHandler = null;
-        this.zoneHitAreas = [];
-        this.selectedZoneId = null;
-        this.hoveredZoneId = null;
-        this.radialHitModel = null;
-        this.zoneSortMode = 'risk';
+        this.mountSortMode = 'size';
         this.sortModeButton = null;
-        this.archMapMode = 'detailed';
-        this.focusMode = 'soft';
-        this.focusModeButton = null;
+        this.mountHitAreas = [];
+        this.stageHitAreas = [];
+        this.hoveredMountKey = null;
+        this.selectedMountKey = null;
+        this.drillScrim = null;
+        this.drillPanel = null;
+        this.wbHistory = [];
+        this.fxScrim = null;
+        this.fxCanvas = null;
+        this.fxCtx = null;
+        this.fxMode = null;
+        this.fxRaf = null;
+        this.fxW = 0;
+        this.fxH = 0;
+        this.hoveredStageId = null;
+        this.ext4Data = null;
+        this.jbd2Data = null;
+        this.hotFilesData = null;
+        this.pathWalkData = null;
+        this.fxInterval = null;
+        this.fxOpenTime = 0;
+        this.fxHitAreas = [];
+        this.fxHoverKey = null;
+        this.stageOverlayMap = { vfs: 'ext4', pagecache: 'writeback', writeback: 'writeback', block: 'jbd2' };
+    }
+
+    _rr(ctx, x, y, w, h, r) {
+        const radius = Math.max(0, Math.min(r, w / 2, h / 2));
+        ctx.beginPath();
+        ctx.moveTo(x + radius, y);
+        ctx.lineTo(x + w - radius, y);
+        ctx.quadraticCurveTo(x + w, y, x + w, y + radius);
+        ctx.lineTo(x + w, y + h - radius);
+        ctx.quadraticCurveTo(x + w, y + h, x + w - radius, y + h);
+        ctx.lineTo(x + radius, y + h);
+        ctx.quadraticCurveTo(x, y + h, x, y + h - radius);
+        ctx.lineTo(x, y + radius);
+        ctx.quadraticCurveTo(x, y, x + radius, y);
+        ctx.closePath();
     }
 
     init(containerId = 'filesystem-map-container') {
@@ -72,6 +105,13 @@ class FilesystemMapVisualization {
         this.createOverlayUI();
         this.addExitButton();
 
+        this.keyHandler = (event) => {
+            if (event.key !== 'Escape') return;
+            if (this.fxMode) this.closeFx();
+            else if (this.selectedMountKey) this.closeMountDrilldown();
+        };
+        window.addEventListener('keydown', this.keyHandler);
+
         this.resizeHandler = () => this.onResize();
         window.addEventListener('resize', this.resizeHandler);
         this.onResize();
@@ -91,7 +131,7 @@ class FilesystemMapVisualization {
             letter-spacing: 1px;
             z-index: 1001;
         `;
-        title.textContent = 'FILESYSTEM INDEX ARCHIVE (in development)';
+        title.textContent = 'FILESYSTEM · VFS WRITE PATH';
         this.container.appendChild(title);
         this.overlayNodes.push(title);
 
@@ -106,7 +146,7 @@ class FilesystemMapVisualization {
             font-size: 11px;
             z-index: 1001;
         `;
-        legend.textContent = 'filesystem packages + radial block index: blue=used, cyan=writing, dark=free';
+        legend.textContent = 'live write path: VFS → page cache (dirty) → writeback → block/IO → device  ·  real mounts below';
         this.container.appendChild(legend);
         this.overlayNodes.push(legend);
         this.legendNode = legend;
@@ -121,9 +161,9 @@ class FilesystemMapVisualization {
             z-index: 1001;
         `;
         const modes = [
-            { key: 'occupancy', label: 'OCCUPANCY' },
-            { key: 'write', label: 'WRITE HEAT' },
-            { key: 'inode', label: 'INODE' }
+            { key: 'occupancy', label: 'USED %' },
+            { key: 'inode', label: 'INODE %' },
+            { key: 'write', label: 'I/O' }
         ];
         modes.forEach((item) => {
             const btn = document.createElement('button');
@@ -148,7 +188,7 @@ class FilesystemMapVisualization {
         this.setRenderMode(this.renderMode);
 
         const sortBtn = document.createElement('button');
-        sortBtn.textContent = 'SORT: RISK';
+        sortBtn.textContent = 'SORT: SIZE';
         sortBtn.style.cssText = `
             position: absolute;
             top: 72px;
@@ -163,50 +203,159 @@ class FilesystemMapVisualization {
             cursor: pointer;
             z-index: 1001;
         `;
-        sortBtn.onclick = () => this.cycleZoneSortMode();
+        sortBtn.onclick = () => this.cycleMountSortMode();
         this.container.appendChild(sortBtn);
         this.overlayNodes.push(sortBtn);
         this.sortModeButton = sortBtn;
         this.updateSortModeButtonState();
 
-        const focusBtn = document.createElement('button');
-        focusBtn.textContent = 'FOCUS: SOFT';
-        focusBtn.style.cssText = `
+        const featureRow = document.createElement('div');
+        featureRow.style.cssText = `
             position: absolute;
-            top: 72px;
-            left: 136px;
-            padding: 4px 8px;
-            background: rgba(12, 18, 28, 0.9);
-            border: 1px solid rgba(130, 148, 172, 0.35);
-            color: #9fb0c8;
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 9px;
-            letter-spacing: 0.3px;
-            cursor: pointer;
+            bottom: 40px;
+            left: 22px;
+            display: flex;
+            gap: 8px;
             z-index: 1001;
         `;
-        focusBtn.onclick = () => this.toggleFocusMode();
-        this.container.appendChild(focusBtn);
-        this.overlayNodes.push(focusBtn);
-        this.focusModeButton = focusBtn;
-        this.updateFocusModeButtonState();
+        [['LIVE WRITERS', 'hotfiles'], ['PATH WALK', 'pathwalk']].forEach(([label, mode]) => {
+            const b = document.createElement('button');
+            b.textContent = `▸ ${label}`;
+            b.style.cssText = `
+                padding: 5px 10px;
+                background: rgba(12, 18, 28, 0.9);
+                border: 1px solid rgba(130, 148, 172, 0.4);
+                color: #a9c4dd;
+                font-family: 'Share Tech Mono', monospace;
+                font-size: 9px;
+                letter-spacing: 0.4px;
+                cursor: pointer;
+            `;
+            b.onmouseenter = () => { b.style.borderColor = 'rgba(129,180,255,0.9)'; b.style.color = '#d3e7ff'; };
+            b.onmouseleave = () => { b.style.borderColor = 'rgba(130,148,172,0.4)'; b.style.color = '#a9c4dd'; };
+            b.onclick = () => this.openFx(mode);
+            featureRow.appendChild(b);
+            this.overlayNodes.push(b);
+        });
+        this.container.appendChild(featureRow);
+        this.overlayNodes.push(featureRow);
 
         const info = document.createElement('div');
         info.style.cssText = `
             position: absolute;
-            bottom: 18px;
-            right: 20px;
+            bottom: 14px;
+            left: 50%;
+            transform: translateX(-50%);
             color: #a9aeb5;
             font-family: 'Share Tech Mono', monospace;
             font-size: 10px;
             z-index: 1001;
             opacity: 0.9;
-            max-width: 46vw;
-            text-align: right;
+            max-width: 90vw;
+            text-align: center;
+            white-space: nowrap;
         `;
         this.container.appendChild(info);
         this.overlayNodes.push(info);
         this.infoNode = info;
+
+        // ---- Per-mount drill-down overlay (click a mount to inspect) --------
+        const scrim = document.createElement('div');
+        scrim.style.cssText = `
+            position: absolute;
+            inset: 0;
+            z-index: 1200;
+            display: none;
+            pointer-events: auto;
+            background: radial-gradient(ellipse at 50% 46%, rgba(8,12,20,0.62) 0%, rgba(6,9,15,0.86) 62%, rgba(4,6,11,0.94) 100%);
+            backdrop-filter: blur(1.5px);
+            font-family: 'Share Tech Mono', monospace;
+        `;
+        const panel = document.createElement('div');
+        panel.style.cssText = `
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: min(640px, 80vw);
+            background: rgba(11, 16, 26, 0.96);
+            border: 1px solid rgba(103, 190, 224, 0.4);
+            border-radius: 8px;
+            box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
+            color: #cdd6e0;
+            overflow: hidden;
+        `;
+        scrim.appendChild(panel);
+        this.container.appendChild(scrim);
+        this.overlayNodes.push(scrim);
+        this.drillScrim = scrim;
+        this.drillPanel = panel;
+        scrim.addEventListener('click', (e) => {
+            if (e.target === scrim) this.closeMountDrilldown();
+        });
+
+        // ---- Feature overlay (animated canvas: writeback / ext4 / jbd2) -----
+        const fxScrim = document.createElement('div');
+        fxScrim.style.cssText = `
+            position: absolute;
+            inset: 0;
+            z-index: 1300;
+            display: none;
+            pointer-events: auto;
+            background: radial-gradient(ellipse at 50% 46%, rgba(8,12,20,0.6) 0%, rgba(6,9,15,0.88) 60%, rgba(4,6,11,0.96) 100%);
+            backdrop-filter: blur(2px);
+            font-family: 'Share Tech Mono', monospace;
+        `;
+        const fxWrap = document.createElement('div');
+        fxWrap.style.cssText = 'position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);';
+        const fxCanvas = document.createElement('canvas');
+        fxCanvas.style.cssText = 'display:block; border-radius:10px; box-shadow:0 20px 70px rgba(0,0,0,0.6);';
+        const fxClose = document.createElement('div');
+        fxClose.textContent = '✕';
+        fxClose.style.cssText = `
+            position:absolute; top:12px; right:12px; width:28px; height:28px;
+            border:1px solid rgba(160,170,190,0.4); border-radius:5px;
+            display:flex; align-items:center; justify-content:center;
+            color:#c8ccd4; cursor:pointer; font-size:14px; z-index:2;
+        `;
+        fxWrap.appendChild(fxCanvas);
+        fxWrap.appendChild(fxClose);
+        fxScrim.appendChild(fxWrap);
+        this.container.appendChild(fxScrim);
+        this.overlayNodes.push(fxScrim);
+        fxClose.onclick = () => this.closeFx();
+        fxScrim.addEventListener('click', (e) => {
+            if (e.target === fxScrim) this.closeFx();
+        });
+        this.fxScrim = fxScrim;
+        this.fxCanvas = fxCanvas;
+        this.fxCtx = fxCanvas.getContext('2d');
+        fxCanvas.addEventListener('click', (e) => this.onFxClick(e));
+        fxCanvas.addEventListener('mousemove', (e) => this.onFxMove(e));
+    }
+
+    onFxClick(event) {
+        const rect = this.fxCanvas.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        for (const hit of this.fxHitAreas) {
+            if (x >= hit.x && x <= hit.x + hit.w && y >= hit.y && y <= hit.y + hit.h) {
+                if ((hit.action === 'pathwalk' || hit.action === 'ext4') && hit.path) this.openFx(hit.action, hit.path);
+                return;
+            }
+        }
+    }
+
+    onFxMove(event) {
+        const rect = this.fxCanvas.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        let over = null;
+        for (const hit of this.fxHitAreas) {
+            if (x >= hit.x && x <= hit.x + hit.w && y >= hit.y && y <= hit.y + hit.h) { over = hit; break; }
+        }
+        this.fxHoverKey = over ? over.key : null;
+        this.fxCanvas.style.cursor = over ? 'pointer' : 'default';
     }
 
     addExitButton() {
@@ -259,15 +408,22 @@ class FilesystemMapVisualization {
                     throw new Error(data?.error || 'No filesystem data');
                 }
                 this.telemetry = data;
+                const wb = data.writeback;
+                if (wb) {
+                    this.wbHistory.push({ dirty: Number(wb.dirty_mb || 0), wb: Number(wb.writeback_mb || 0), t: Date.now() });
+                    if (this.wbHistory.length > 240) this.wbHistory.shift();
+                }
+                const m = data.meta || {};
                 if (this.infoNode) {
-                    const m = data.meta || {};
                     this.infoNode.textContent =
-                        `used ${m.used_gb || 0}GB / ${m.total_gb || 0}GB (${m.used_percent || 0}%)` +
-                        ` | free ${m.free_gb || 0}GB` +
-                        ` | write ${(m.write_bps || 0).toFixed(0)} B/s` +
-                        ` | writing blocks ${m.writing_blocks || 0}` +
-                        ` | inode ${m.inode_pressure || 0}%`;
+                        `used ${(m.used_gb || 0).toFixed(1)}/${(m.total_gb || 0).toFixed(1)} GB (${m.used_percent || 0}%)` +
+                        ` · free ${(m.free_gb || 0).toFixed(1)} GB` +
+                        ` · write ${(m.write_mb_s || 0).toFixed(2)} MB/s` +
+                        ` · dirty ${(m.dirty_mb || 0).toFixed(1)} MB` +
+                        ` · inode(/) ${(m.inode_percent || 0).toFixed(1)}%` +
+                        ` · mounts ${m.mount_count || 0}`;
                 }
+                if (this.selectedMountKey) this.refreshMountDrilldown();
             })
             .catch((err) => {
                 if (this.infoNode) {
@@ -292,243 +448,6 @@ class FilesystemMapVisualization {
         ctx.closePath();
     }
 
-    drawPackageStack(x, y, w, h, layers, accentColor, label, metaText, subMetaText, isSelected, isHovered, isMuted = false, focusMode = 'soft') {
-        const ctx = this.ctx;
-        const hardFocus = focusMode === 'hard';
-        const stackLayers = Math.max(2, Math.min(4, layers));
-        for (let i = stackLayers - 1; i >= 0; i -= 1) {
-            const dx = -i * 4;
-            const dy = i * 3;
-            this.drawRoundedRect(x + dx, y + dy, w, h, 5);
-            ctx.fillStyle = i === 0
-                ? (isMuted ? (hardFocus ? 'rgba(12, 18, 28, 0.46)' : 'rgba(12, 18, 28, 0.64)') : 'rgba(14, 24, 36, 0.95)')
-                : (isMuted ? (hardFocus ? 'rgba(10, 16, 26, 0.3)' : 'rgba(10, 16, 26, 0.5)') : 'rgba(10, 16, 26, 0.85)');
-            ctx.fill();
-            const baseStroke = i === 0 ? accentColor : 'rgba(72, 94, 124, 0.35)';
-            ctx.strokeStyle = isMuted
-                ? (hardFocus ? 'rgba(82, 104, 132, 0.22)' : 'rgba(82, 104, 132, 0.38)')
-                : (isSelected ? 'rgba(149, 207, 255, 0.95)' : (isHovered ? 'rgba(122, 182, 245, 0.82)' : baseStroke));
-            ctx.lineWidth = isSelected ? 1.4 : (i === 0 ? 1.0 : 0.7);
-            ctx.stroke();
-        }
-        ctx.fillStyle = isMuted ? (hardFocus ? 'rgba(132, 152, 178, 0.45)' : 'rgba(132, 152, 178, 0.62)') : (isSelected ? '#d9ecff' : '#9fc0e8');
-        ctx.font = '10px "Share Tech Mono", monospace';
-        ctx.fillText(label, x + 8, y + 14);
-        ctx.fillStyle = isMuted ? (hardFocus ? 'rgba(124, 140, 160, 0.4)' : 'rgba(124, 140, 160, 0.58)') : (isSelected ? 'rgba(198, 222, 250, 0.96)' : 'rgba(155, 176, 204, 0.9)');
-        ctx.font = '9px "Share Tech Mono", monospace';
-        ctx.fillText(metaText, x + 8, y + 27);
-        if (subMetaText) {
-            ctx.fillStyle = isMuted ? (hardFocus ? 'rgba(120, 138, 162, 0.3)' : 'rgba(120, 138, 162, 0.46)') : 'rgba(132, 156, 186, 0.76)';
-            ctx.font = '8px "Share Tech Mono", monospace';
-            ctx.fillText(subMetaText, x + 8, y + 38);
-        }
-        ctx.fillStyle = isMuted ? (hardFocus ? 'rgba(88, 104, 128, 0.34)' : 'rgba(88, 104, 128, 0.54)') : accentColor;
-        ctx.fillRect(x + 2, y + h - 3, Math.max(8, w - 4), 2);
-    }
-
-    drawParticleOrb(x, y, radius, meta) {
-        const ctx = this.ctx;
-        const mode = String(this.renderMode || 'occupancy');
-        const inodePressure = Math.max(0, Math.min(100, Number(meta?.inode_pressure || 0)));
-        const writeBps = Math.max(0, Number(meta?.write_bps || 0));
-        const writeNorm = Math.max(0, Math.min(1, writeBps / (300 * 1024 * 1024)));
-        const modeBoost = mode === 'write' ? 0.25 : (mode === 'inode' ? 0.18 : 0.08);
-        const pulse = 0.45 + 0.55 * ((Math.sin(this.tick * 0.06) + 1) / 2);
-        const glow = Math.max(0.1, Math.min(1.0, (inodePressure / 100) * 0.6 + writeNorm * 0.4 + modeBoost));
-
-        // Outer glow
-        const g = ctx.createRadialGradient(x, y, radius * 0.3, x, y, radius * 1.2);
-        g.addColorStop(0, `rgba(145, 222, 255, ${0.12 + glow * 0.25})`);
-        g.addColorStop(1, 'rgba(145, 222, 255, 0)');
-        ctx.beginPath();
-        ctx.arc(x, y, radius * 1.2, 0, Math.PI * 2);
-        ctx.fillStyle = g;
-        ctx.fill();
-
-        // Orb body
-        const orb = ctx.createRadialGradient(x - radius * 0.25, y - radius * 0.35, radius * 0.2, x, y, radius);
-        orb.addColorStop(0, 'rgba(196, 238, 255, 0.85)');
-        orb.addColorStop(0.45, 'rgba(79, 148, 196, 0.46)');
-        orb.addColorStop(1, 'rgba(11, 22, 36, 0.95)');
-        ctx.beginPath();
-        ctx.arc(x, y, radius, 0, Math.PI * 2);
-        ctx.fillStyle = orb;
-        ctx.fill();
-
-        // Rim
-        ctx.beginPath();
-        ctx.arc(x, y, radius, 0, Math.PI * 2);
-        ctx.strokeStyle = `rgba(137, 208, 245, ${0.58 + pulse * 0.22})`;
-        ctx.lineWidth = 1.2;
-        ctx.stroke();
-
-        // Minimal version: no inner streaks and no labels.
-    }
-
-    drawFsArchitectureMap(x, y, w, h, meta, zones) {
-        const ctx = this.ctx;
-        const mode = this.archMapMode || 'simple';
-        const usedPercent = Math.max(0, Math.min(100, Number(meta?.used_percent || 0)));
-        const inodePressure = Math.max(0, Math.min(100, Number(meta?.inode_pressure || 0)));
-        const writingBlocks = Math.max(0, Number(meta?.writing_blocks || 0));
-        const writeBps = Math.max(0, Number(meta?.write_bps || 0));
-        const writeMBs = writeBps / (1024 * 1024);
-        const zoneList = Array.isArray(zones) ? zones : [];
-        const activeZones = zoneList.filter((z) => Number(z?.activity || 0) > 8 || Number(z?.writing_blocks || 0) > 0).length;
-        const hotZones = zoneList.filter((z) => Math.max(Number(z?.used_percent || 0), Number(z?.inode_pressure || 0)) >= 80).length;
-
-        this.drawRoundedRect(x, y, w, h, 9);
-        ctx.fillStyle = 'rgba(8, 13, 20, 0.78)';
-        ctx.fill();
-        ctx.strokeStyle = 'rgba(122, 147, 179, 0.34)';
-        ctx.lineWidth = 0.95;
-        ctx.stroke();
-
-        ctx.fillStyle = '#cde3ff';
-        ctx.font = '10px "Share Tech Mono", monospace';
-        ctx.fillText('LINUX FS ARCH MAP', x + 12, y + 18);
-        ctx.fillStyle = 'rgba(151, 173, 203, 0.86)';
-        ctx.font = '8px "Share Tech Mono", monospace';
-        ctx.fillText(`active zones ${activeZones} | hot zones ${hotZones} | write ${writeMBs.toFixed(1)} MB/s`, x + 12, y + 32);
-        ctx.fillText(`mode ${String(mode).toUpperCase()}`, x + w - 102, y + 18);
-
-        const node = (nx, ny, nw, nh, title, sub, tone, small = false) => {
-            this.drawRoundedRect(nx, ny, nw, nh, small ? 4 : 5);
-            ctx.fillStyle = 'rgba(10, 16, 24, 0.82)';
-            ctx.fill();
-            ctx.strokeStyle = tone;
-            ctx.lineWidth = small ? 0.85 : 0.95;
-            ctx.stroke();
-            ctx.fillStyle = '#cfe4ff';
-            ctx.font = small ? '8px "Share Tech Mono", monospace' : '9px "Share Tech Mono", monospace';
-            ctx.fillText(title, nx + 6, ny + (small ? 11 : 13));
-            if (sub) {
-                ctx.fillStyle = 'rgba(146, 170, 201, 0.88)';
-                ctx.font = '8px "Share Tech Mono", monospace';
-                ctx.fillText(sub, nx + 6, ny + (small ? 21 : 24));
-            }
-        };
-        const link = (x0, y0, x1, y1, tone, weight = 1) => {
-            ctx.beginPath();
-            ctx.moveTo(x0, y0);
-            ctx.bezierCurveTo((x0 + x1) / 2, y0, (x0 + x1) / 2, y1, x1, y1);
-            ctx.strokeStyle = tone;
-            ctx.lineWidth = weight;
-            ctx.stroke();
-        };
-
-        const rootX = x + 168;
-        const rootY = y + 98;
-        const syscallX = x + 12;
-        const driverX = x + w - 126;
-        const blockX = x + 152;
-        const ioX = blockX + 122;
-        const devX = ioX + 102;
-        const writeTone = writeMBs >= 80 ? 'rgba(255, 154, 118, 0.86)' : 'rgba(142, 227, 255, 0.78)';
-
-        node(syscallX, rootY - 16, 92, 34, 'SYSCALLS', `rw ${writeMBs.toFixed(1)} MB/s`, 'rgba(142, 206, 255, 0.85)');
-        node(rootX, rootY - 22, 110, 44, 'VFS CORE', `used ${usedPercent.toFixed(1)}%`, 'rgba(132, 194, 255, 0.95)');
-        node(driverX, rootY - 48, 104, 30, 'EXT4/XFS', `${activeZones} active`, 'rgba(145, 226, 255, 0.88)', true);
-        node(driverX, rootY - 12, 104, 30, 'TMPFS/PROC', `inode ${inodePressure.toFixed(0)}%`, 'rgba(148, 198, 255, 0.84)', true);
-        node(driverX, rootY + 24, 104, 30, 'OVERLAY/DM', `${writingBlocks} writing`, writingBlocks > 0 ? 'rgba(255, 164, 170, 0.86)' : 'rgba(142, 186, 230, 0.72)', true);
-        node(blockX, y + h - 58, 102, 32, 'PAGECACHE', `dirty ${writingBlocks}`, writeTone, true);
-        node(ioX, y + h - 58, 94, 32, 'BLOCK IO', `inode ${inodePressure.toFixed(0)}%`, 'rgba(132, 194, 255, 0.84)', true);
-        node(devX, y + h - 58, 86, 32, 'NVME', `util ${usedPercent.toFixed(0)}%`, usedPercent > 86 ? 'rgba(255, 146, 156, 0.88)' : 'rgba(143, 217, 252, 0.85)', true);
-
-        const flowWeight = 0.9 + Math.min(1.8, writeMBs / 70);
-        link(syscallX + 92, rootY + 1, rootX, rootY + 1, 'rgba(124, 181, 234, 0.65)', 1.1);
-        link(rootX + 110, rootY - 2, driverX, rootY - 33, 'rgba(130, 199, 245, 0.52)', 0.9);
-        link(rootX + 110, rootY + 4, driverX, rootY + 3, 'rgba(130, 199, 245, 0.52)', 0.9);
-        link(rootX + 110, rootY + 10, driverX, rootY + 39, 'rgba(130, 199, 245, 0.52)', 0.9);
-        link(rootX + 56, rootY + 22, blockX + 50, y + h - 58, writeTone, flowWeight);
-        link(blockX + 102, y + h - 42, ioX, y + h - 42, 'rgba(134, 196, 243, 0.75)', flowWeight * 0.9);
-        link(ioX + 94, y + h - 42, devX, y + h - 42, usedPercent > 86 ? 'rgba(255, 152, 162, 0.88)' : 'rgba(142, 217, 252, 0.8)', flowWeight * 0.8);
-
-        if (mode === 'detailed') {
-            const dentryX = rootX - 4;
-            const dentryY = y + 48;
-            const journalX = driverX - 12;
-            const journalY = y + h - 94;
-            const wbX = blockX - 4;
-            const wbY = y + h - 94;
-            const schedX = ioX + 2;
-            const schedY = y + h - 94;
-
-            node(dentryX, dentryY, 88, 26, 'DENTRY', `${Math.max(55, 99 - inodePressure * 0.5).toFixed(0)}% hit`, 'rgba(137, 206, 255, 0.78)', true);
-            node(dentryX + 92, dentryY, 88, 26, 'INODE', `${Math.max(48, 98 - usedPercent * 0.48).toFixed(0)}% hit`, 'rgba(132, 194, 255, 0.78)', true);
-            node(journalX, journalY, 94, 26, 'JOURNAL', `${writingBlocks} pend`, writingBlocks > 0 ? 'rgba(255, 167, 136, 0.85)' : 'rgba(132, 180, 220, 0.72)', true);
-            node(wbX, wbY, 86, 26, 'WRITEBACK', `${(writeMBs * 0.72).toFixed(1)} MB/s`, writeTone, true);
-            node(schedX, schedY, 82, 26, 'IO SCHED', inodePressure > 72 ? 'congested' : 'normal', inodePressure > 72 ? 'rgba(255, 158, 166, 0.86)' : 'rgba(138, 198, 244, 0.8)', true);
-
-            link(rootX + 60, rootY - 22, dentryX + 20, dentryY + 13, 'rgba(130, 197, 246, 0.55)', 0.9);
-            link(rootX + 84, rootY - 22, dentryX + 110, dentryY + 13, 'rgba(130, 197, 246, 0.55)', 0.9);
-            link(driverX + 52, rootY + 39, journalX + 40, journalY + 13, 'rgba(214, 148, 137, 0.46)', 0.9);
-            link(journalX + 94, journalY + 13, wbX, wbY + 13, 'rgba(182, 156, 132, 0.45)', 0.8);
-            link(wbX + 86, wbY + 13, schedX, schedY + 13, 'rgba(132, 194, 247, 0.62)', 0.85);
-        }
-    }
-
-    drawLiveBlockMatrix(x, y, w, h, blocks, zones, meta, selectedZoneId = null, focusMode = 'soft') {
-        const ctx = this.ctx;
-        const hardFocus = focusMode === 'hard';
-        const zoneMap = new Map((Array.isArray(zones) ? zones : []).map((z) => [String(z.id || ''), z]));
-        const data = Array.isArray(blocks) ? blocks : [];
-        if (!data.length) return;
-
-        this.drawRoundedRect(x, y, w, h, 7);
-        ctx.fillStyle = 'rgba(8, 13, 21, 0.62)';
-        ctx.fill();
-        ctx.strokeStyle = 'rgba(122, 146, 178, 0.28)';
-        ctx.lineWidth = 0.85;
-        ctx.stroke();
-
-        const cols = 64;
-        const rows = 20;
-        const innerX = x + 10;
-        const innerY = y + 12;
-        const innerW = w - 20;
-        const innerH = h - 26;
-        const cellW = innerW / cols;
-        const cellH = innerH / rows;
-        const inodePressure = Math.max(0, Math.min(100, Number(meta?.inode_pressure || 0)));
-        const writeHot = Number(meta?.write_bps || 0) / (1024 * 1024);
-
-        for (let i = 0; i < rows * cols; i += 1) {
-            const b = data[i % data.length] || {};
-            const zoneId = String(b.zone_id || '');
-            const zone = zoneMap.get(String(b.zone_id || '')) || {};
-            const zx = i % cols;
-            const zy = Math.floor(i / cols);
-            const px = innerX + zx * cellW;
-            const py = innerY + zy * cellH;
-            const zoneAct = Math.max(0, Math.min(100, Number(zone.activity || 0)));
-            const zInode = Math.max(0, Math.min(100, Number(zone.inode_pressure || 0)));
-            const flicker = 0.75 + 0.25 * Math.sin(this.tick * 0.05 + zx * 0.17 + zy * 0.23);
-            const isFocused = !selectedZoneId || zoneId === String(selectedZoneId);
-            const focusAlphaMul = isFocused ? 1 : (hardFocus ? 0.26 : 0.5);
-
-            if (b.state === 'writing') {
-                const alpha = 0.46 + Math.min(0.5, (zoneAct / 130) + (writeHot > 90 ? 0.18 : 0)) * flicker;
-                ctx.fillStyle = `rgba(163, 238, 255, ${Math.min(0.95, alpha * focusAlphaMul).toFixed(3)})`;
-            } else if (b.state === 'used') {
-                const alpha = 0.22 + Math.min(0.5, ((zoneAct + inodePressure * 0.35) / 220)) * flicker;
-                ctx.fillStyle = zInode >= 78
-                    ? `rgba(255, 184, 132, ${Math.min(0.8, (alpha + 0.08) * focusAlphaMul).toFixed(3)})`
-                    : `rgba(96, 166, 220, ${Math.min(0.8, alpha * focusAlphaMul).toFixed(3)})`;
-            } else {
-                ctx.fillStyle = `rgba(17, 30, 46, ${((0.24 + 0.08 * flicker) * focusAlphaMul).toFixed(3)})`;
-            }
-
-            const cw = Math.max(1.5, cellW - 1.15);
-            const ch = Math.max(1.5, cellH - 1.1);
-            ctx.fillRect(px, py, cw, ch);
-        }
-
-        ctx.fillStyle = 'rgba(166, 193, 225, 0.84)';
-        ctx.font = '8px "Share Tech Mono", monospace';
-        ctx.fillText('live block matrix: write glow / inode pressure / occupancy', x + 12, y + h - 8);
-    }
-
     setRenderMode(modeKey) {
         this.renderMode = ['occupancy', 'write', 'inode'].includes(modeKey) ? modeKey : 'occupancy';
         this.modeButtons.forEach((btn, key) => {
@@ -538,128 +457,81 @@ class FilesystemMapVisualization {
             btn.style.color = active ? '#d3e7ff' : '#9fb0c8';
         });
         if (this.legendNode) {
-            if (this.renderMode === 'write') {
-                this.legendNode.textContent = 'mode: write heat (cyan=write hot, blue=active, dark=cold)';
-            } else if (this.renderMode === 'inode') {
-                this.legendNode.textContent = 'mode: inode pressure (cyan=high inode pressure)';
-            } else {
-                this.legendNode.textContent = 'mode: occupancy (blue=used, cyan=writing, dark=free)';
-            }
+            this.legendNode.textContent = this.renderMode === 'write'
+                ? 'mount bars colored by I/O throughput  ·  click a mount to inspect'
+                : (this.renderMode === 'inode'
+                    ? 'mount bars colored by inode usage  ·  click a mount to inspect'
+                    : 'live write path above  ·  mount bars colored by used space  ·  click a mount to inspect');
         }
     }
 
-    cycleRenderMode() {
-        const order = ['occupancy', 'write', 'inode'];
-        const idx = order.indexOf(this.renderMode);
-        const next = order[(idx + 1) % order.length];
-        this.setRenderMode(next);
-    }
-
-    getZoneSortScore(zone, mode) {
-        const used = Number(zone?.used_percent || 0);
-        const inode = Number(zone?.inode_pressure || 0);
-        const activity = Number(zone?.activity || 0);
-        const writing = Number(zone?.writing_blocks || 0);
-        if (mode === 'write') {
-            return writing * 100 + activity * 4 + used * 0.2;
-        }
-        if (mode === 'inode') {
-            return inode * 10 + used * 0.6 + activity * 0.5;
-        }
-        return Math.max(used, inode, writing > 0 ? 86 : 0) * 10 + activity;
+    mountSortValue(mnt, mode) {
+        if (mode === 'used') return Number(mnt.used_percent || 0);
+        if (mode === 'io') return Number(mnt.write_bps || 0) + Number(mnt.read_bps || 0);
+        return Number(mnt.total_gb || 0);
     }
 
-    cycleZoneSortMode() {
-        const order = ['risk', 'write', 'inode'];
-        const idx = order.indexOf(this.zoneSortMode);
-        const next = order[(idx + 1) % order.length];
-        this.zoneSortMode = next;
+    cycleMountSortMode() {
+        const order = ['size', 'used', 'io'];
+        const idx = order.indexOf(this.mountSortMode);
+        this.mountSortMode = order[(idx + 1) % order.length];
         this.updateSortModeButtonState();
     }
 
     updateSortModeButtonState() {
         if (!this.sortModeButton) return;
-        const mode = this.zoneSortMode || 'risk';
-        const label = mode === 'write' ? 'WRITE' : (mode === 'inode' ? 'INODE' : 'RISK');
+        const mode = this.mountSortMode || 'size';
+        const label = mode === 'used' ? 'USED' : (mode === 'io' ? 'I/O' : 'SIZE');
         this.sortModeButton.textContent = `SORT: ${label}`;
-        if (mode === 'write') {
-            this.sortModeButton.style.background = 'rgba(45, 57, 30, 0.92)';
-            this.sortModeButton.style.borderColor = 'rgba(168, 230, 140, 0.85)';
-            this.sortModeButton.style.color = '#e4ffd3';
-        } else if (mode === 'inode') {
-            this.sortModeButton.style.background = 'rgba(29, 43, 62, 0.92)';
-            this.sortModeButton.style.borderColor = 'rgba(127, 194, 255, 0.88)';
-            this.sortModeButton.style.color = '#dbf0ff';
-        } else {
-            this.sortModeButton.style.background = 'rgba(62, 36, 36, 0.92)';
-            this.sortModeButton.style.borderColor = 'rgba(255, 162, 170, 0.88)';
-            this.sortModeButton.style.color = '#ffe1e5';
-        }
-    }
-
-    toggleFocusMode() {
-        this.focusMode = this.focusMode === 'hard' ? 'soft' : 'hard';
-        this.updateFocusModeButtonState();
+        this.sortModeButton.style.background = 'rgba(29, 43, 62, 0.92)';
+        this.sortModeButton.style.borderColor = 'rgba(127, 194, 255, 0.7)';
+        this.sortModeButton.style.color = '#dbf0ff';
     }
 
-    updateFocusModeButtonState() {
-        if (!this.focusModeButton) return;
-        const hard = this.focusMode === 'hard';
-        this.focusModeButton.textContent = hard ? 'FOCUS: HARD' : 'FOCUS: SOFT';
-        this.focusModeButton.style.background = hard ? 'rgba(68, 34, 44, 0.92)' : 'rgba(24, 42, 60, 0.9)';
-        this.focusModeButton.style.borderColor = hard ? 'rgba(255, 158, 172, 0.86)' : 'rgba(132, 194, 255, 0.78)';
-        this.focusModeButton.style.color = hard ? '#ffe3e7' : '#dff1ff';
+    mountBarValue(mnt) {
+        const mode = this.renderMode;
+        if (mode === 'inode') {
+            const p = Number(mnt.inode_percent || 0);
+            const f = Math.max(0, Math.min(1, p / 100));
+            return {
+                frac: f,
+                color: p > 85 ? 'rgba(255,149,158,0.9)' : (p > 60 ? 'rgba(255,206,127,0.9)' : 'rgba(118,220,255,0.85)'),
+                label: `inode ${p.toFixed(1)}%`
+            };
+        }
+        if (mode === 'write') {
+            const io = Number(mnt.write_bps || 0) + Number(mnt.read_bps || 0);
+            const f = Math.max(0.02, Math.min(1, io / (20 * 1024 * 1024)));
+            return { frac: f, color: 'rgba(255,206,127,0.9)', label: `io ${(io / 1024).toFixed(0)} KB/s` };
+        }
+        const p = Number(mnt.used_percent || 0);
+        const f = Math.max(0, Math.min(1, p / 100));
+        return {
+            frac: f,
+            color: p > 85 ? 'rgba(255,149,158,0.9)' : (p > 70 ? 'rgba(255,206,127,0.9)' : 'rgba(118,220,255,0.85)'),
+            label: `used ${p.toFixed(1)}%`
+        };
     }
 
-    getZoneHitAt(x, y) {
-        for (const hit of this.zoneHitAreas) {
-            if (x >= hit.x && x <= hit.x + hit.w && y >= hit.y && y <= hit.y + hit.h) {
-                return hit;
-            }
+    getMountHitAt(x, y) {
+        for (const hit of this.mountHitAreas) {
+            if (x >= hit.x && x <= hit.x + hit.w && y >= hit.y && y <= hit.y + hit.h) return hit;
         }
         return null;
     }
 
-    getRadialZoneAt(x, y) {
-        const model = this.radialHitModel;
-        if (!model) return null;
-        const dx = x - model.cx;
-        const dy = y - model.cy;
-        const dist = Math.hypot(dx, dy);
-        if (dist < model.innerR || dist > model.outerR) return null;
-        const rIdx = Math.floor((dist - model.innerR) / model.ringGap);
-        if (rIdx < 0 || rIdx >= model.rows) return null;
-        let a = Math.atan2(dy, dx);
-        if (a < 0) a += Math.PI * 2;
-        const cIdx = Math.floor(a / model.angleStep);
-        if (cIdx < 0 || cIdx >= model.cols) return null;
-        const zoneId = model.zoneByCell.get(`${rIdx}:${cIdx}`) || null;
-        if (!zoneId) return null;
-        return { zoneId };
-    }
-
     onCanvasClick(event) {
         if (!this.canvas) return;
         const rect = this.canvas.getBoundingClientRect();
         const x = event.clientX - rect.left;
         const y = event.clientY - rect.top;
-        const zoneHit = this.getZoneHitAt(x, y);
-        if (zoneHit) {
-            this.selectedZoneId = this.selectedZoneId === zoneHit.zoneId ? null : zoneHit.zoneId;
+        const stage = this.getStageHitAt(x, y);
+        if (stage && this.stageOverlayMap[stage.id]) {
+            this.openFx(this.stageOverlayMap[stage.id]);
             return;
         }
-        const radialHit = this.getRadialZoneAt(x, y);
-        if (radialHit) {
-            this.selectedZoneId = this.selectedZoneId === radialHit.zoneId ? null : radialHit.zoneId;
-            return;
-        }
-        if (!this.orbHitArea) return;
-        const dx = x - this.orbHitArea.x;
-        const dy = y - this.orbHitArea.y;
-        const dist = Math.sqrt(dx * dx + dy * dy);
-        if (dist <= this.orbHitArea.r * 1.25) {
-            this.cycleRenderMode();
-        }
+        const hit = this.getMountHitAt(x, y);
+        if (hit) this.openMountDrilldown(hit.key);
     }
 
     onCanvasMouseMove(event) {
@@ -667,318 +539,1196 @@ class FilesystemMapVisualization {
         const rect = this.canvas.getBoundingClientRect();
         const x = event.clientX - rect.left;
         const y = event.clientY - rect.top;
-        const zoneHit = this.getZoneHitAt(x, y);
-        const radialHit = zoneHit ? null : this.getRadialZoneAt(x, y);
-        this.hoveredZoneId = zoneHit ? zoneHit.zoneId : (radialHit ? radialHit.zoneId : null);
-        const overOrb = this.orbHitArea && Math.hypot(x - this.orbHitArea.x, y - this.orbHitArea.y) <= this.orbHitArea.r * 1.25;
-        this.canvas.style.cursor = zoneHit || radialHit || overOrb ? 'pointer' : 'default';
+        const stage = this.getStageHitAt(x, y);
+        const stageClickable = stage && !!this.stageOverlayMap[stage.id];
+        this.hoveredStageId = stageClickable ? stage.id : null;
+        const hit = stageClickable ? null : this.getMountHitAt(x, y);
+        this.hoveredMountKey = hit ? hit.key : null;
+        this.canvas.style.cursor = (stageClickable || hit) ? 'pointer' : 'default';
     }
 
     drawScene() {
         if (!this.ctx || !this.canvas) return;
+        const ctx = this.ctx;
         const w = window.innerWidth;
         const h = window.innerHeight;
-        this.ctx.clearRect(0, 0, w, h);
+        ctx.clearRect(0, 0, w, h);
         this.tick += 1;
+        ctx.fillStyle = '#090d14';
+        ctx.fillRect(0, 0, w, h);
 
-        this.ctx.fillStyle = '#090d14';
-        this.ctx.fillRect(0, 0, w, h);
-
-        if (!this.telemetry || !Array.isArray(this.telemetry.blocks)) return;
-
-        const rows = Math.max(1, Number(this.telemetry.rows || 1));
-        const cols = Math.max(1, Number(this.telemetry.cols || 1));
-        const blocks = this.telemetry.blocks;
-        const zones = Array.isArray(this.telemetry.zones) ? this.telemetry.zones : [];
-        const zoneMap = new Map(zones.map((z) => [String(z.id || ''), z]));
-        const selectedZoneId = this.selectedZoneId ? String(this.selectedZoneId) : null;
-        const hasZoneFocus = Boolean(selectedZoneId);
-        const hardFocus = this.focusMode === 'hard';
-        this.zoneHitAreas = [];
-        this.radialHitModel = null;
-
-        const cx = Math.floor(w * 0.53);
-        const cy = Math.floor(h * 0.63);
-        const outerR = Math.max(130, Math.min(250, Math.floor(Math.min(w, h) * 0.28)));
-        const innerR = Math.max(24, Math.floor(outerR * 0.14));
-        const ringGap = (outerR - innerR) / Math.max(1, rows);
-        const angleStep = (Math.PI * 2) / Math.max(1, cols);
-        const m = this.telemetry.meta || {};
-        const zoneByCell = new Map();
+        this.mountHitAreas = [];
+        this.stageHitAreas = [];
 
+        const t = this.telemetry;
+        if (!t) return;
+        const m = t.meta || {};
+        const wp = t.writepath || { stages: [], hot: 'block' };
+        const mounts = Array.isArray(t.mounts) ? t.mounts : [];
+
+        // ---- KPI row (real telemetry) ------------------------------------
         const kpis = [
-            {
-                label: 'USED',
-                value: `${Number(m.used_percent || 0).toFixed(1)}%`,
-                tone: Number(m.used_percent || 0) >= 85 ? '#ff9ca6' : '#8fd8ff'
-            },
-            {
-                label: 'WRITE',
-                value: `${(Number(m.write_bps || 0) / (1024 * 1024)).toFixed(1)} MB/s`,
-                tone: Number(m.write_bps || 0) >= (80 * 1024 * 1024) ? '#ffd08d' : '#8ff3c0'
-            },
-            {
-                label: 'INODE',
-                value: `${Number(m.inode_pressure || 0).toFixed(1)}%`,
-                tone: Number(m.inode_pressure || 0) >= 75 ? '#ff9ca6' : '#8fd8ff'
-            }
+            { label: 'USED /', value: `${Number(m.used_percent || 0).toFixed(1)}%`, tone: Number(m.used_percent || 0) >= 85 ? '#ff9ca6' : '#8fd8ff' },
+            { label: 'WRITE', value: `${Number(m.write_mb_s || 0).toFixed(1)} MB/s`, tone: Number(m.write_mb_s || 0) >= 80 ? '#ffd08d' : '#8ff3c0' },
+            { label: 'DIRTY', value: `${Number(m.dirty_mb || 0).toFixed(1)} MB`, tone: Number(m.dirty_mb || 0) >= 128 ? '#ffd08d' : '#8fd8ff' },
+            { label: 'INODE /', value: `${Number(m.inode_percent || 0).toFixed(1)}%`, tone: Number(m.inode_percent || 0) >= 80 ? '#ff9ca6' : '#8fd8ff' }
         ];
         kpis.forEach((kpi, idx) => {
-            const kx = 26 + idx * 152;
+            const kx = 26 + idx * 150;
             const ky = 98;
-            this.drawRoundedRect(kx, ky, 138, 44, 6);
-            this.ctx.fillStyle = 'rgba(10, 16, 24, 0.74)';
-            this.ctx.fill();
-            this.ctx.strokeStyle = 'rgba(122, 142, 168, 0.32)';
-            this.ctx.lineWidth = 0.9;
-            this.ctx.stroke();
-            this.ctx.fillStyle = 'rgba(159, 177, 201, 0.84)';
-            this.ctx.font = '8px "Share Tech Mono", monospace';
-            this.ctx.fillText(kpi.label, kx + 10, ky + 14);
-            this.ctx.fillStyle = kpi.tone;
-            this.ctx.font = '12px "Share Tech Mono", monospace';
-            this.ctx.fillText(kpi.value, kx + 10, ky + 31);
+            this.drawRoundedRect(kx, ky, 136, 44, 6);
+            ctx.fillStyle = 'rgba(10, 16, 24, 0.74)';
+            ctx.fill();
+            ctx.strokeStyle = 'rgba(122, 142, 168, 0.32)';
+            ctx.lineWidth = 0.9;
+            ctx.stroke();
+            ctx.fillStyle = 'rgba(159, 177, 201, 0.84)';
+            ctx.font = '8px "Share Tech Mono", monospace';
+            ctx.fillText(kpi.label, kx + 10, ky + 14);
+            ctx.fillStyle = kpi.tone;
+            ctx.font = '13px "Share Tech Mono", monospace';
+            ctx.fillText(kpi.value, kx + 10, ky + 32);
         });
 
-        // Background circuit lines.
-        this.ctx.strokeStyle = hasZoneFocus
-            ? (hardFocus ? 'rgba(120, 52, 84, 0.1)' : 'rgba(120, 52, 84, 0.14)')
-            : 'rgba(150, 38, 64, 0.17)';
-        this.ctx.lineWidth = 1;
-        for (let i = 0; i < 9; i += 1) {
-            const y = 120 + i * 44;
-            this.ctx.beginPath();
-            this.ctx.moveTo(cx - outerR - 130, y);
-            this.ctx.lineTo(cx + outerR + 130, y);
-            this.ctx.stroke();
-        }
+        this.drawWritePath(w, h, wp);
+        this.drawMountMap(w, h, mounts);
+    }
 
-        const matrixW = Math.min(760, Math.max(520, Math.floor(w * 0.54)));
-        const matrixH = Math.min(320, Math.max(220, Math.floor(h * 0.28)));
-        const matrixX = Math.max(24, Math.min(w - matrixW - 24, cx - Math.floor(matrixW * 0.52)));
-        const matrixY = Math.max(126, cy - outerR - Math.floor(matrixH * 0.42));
-        this.drawLiveBlockMatrix(matrixX, matrixY, matrixW, matrixH, blocks, zones, m, selectedZoneId, this.focusMode);
-
-        // Main rings.
-        for (let i = 0; i <= 7; i += 1) {
-            const r = innerR + ((outerR - innerR) * i / 7);
-            this.ctx.beginPath();
-            this.ctx.arc(cx, cy, r, 0, Math.PI * 2);
-            this.ctx.strokeStyle = i % 2 === 0 ? 'rgba(89, 140, 192, 0.22)' : 'rgba(58, 96, 136, 0.16)';
-            this.ctx.lineWidth = i === 7 ? 1.2 : 0.8;
-            this.ctx.stroke();
+    drawWritePath(w, h, wp) {
+        const ctx = this.ctx;
+        const stages = Array.isArray(wp.stages) ? wp.stages : [];
+        if (!stages.length) return;
+        const n = stages.length;
+        const bandY = Math.floor(h * 0.31);
+        const x0 = Math.floor(w * 0.14);
+        const x1 = Math.floor(w * 0.86);
+        const span = Math.max(1, x1 - x0);
+        const xs = stages.map((_, i) => x0 + (n > 1 ? span * i / (n - 1) : span / 2));
+        const writeBps = Number(wp.write_bps || 0);
+        const flow = Math.max(0.05, Math.min(1, writeBps / (20 * 1024 * 1024)));
+
+        ctx.fillStyle = 'rgba(150,178,206,0.72)';
+        ctx.font = '10px "Share Tech Mono", monospace';
+        ctx.fillText('WRITE PATH  ·  application → disk', x0, bandY - 60);
+
+        // Segments with flowing particles (density/brightness ~ write rate).
+        for (let i = 0; i < n - 1; i += 1) {
+            const ax = xs[i] + 22;
+            const bx = xs[i + 1] - 22;
+            ctx.beginPath();
+            ctx.moveTo(ax, bandY);
+            ctx.lineTo(bx, bandY);
+            ctx.strokeStyle = 'rgba(90, 130, 175, 0.32)';
+            ctx.lineWidth = 1.4;
+            ctx.stroke();
+            const segLen = bx - ax;
+            const count = 3;
+            for (let k = 0; k < count; k += 1) {
+                const phase = ((this.tick * (0.004 + flow * 0.02) + k / count) % 1);
+                const px = ax + segLen * phase;
+                ctx.beginPath();
+                ctx.arc(px, bandY, 2.2, 0, Math.PI * 2);
+                ctx.fillStyle = `rgba(150, 226, 255, ${(0.22 + flow * 0.6).toFixed(3)})`;
+                ctx.fill();
+            }
         }
 
-        // Radial block matrix.
-        blocks.forEach((b) => {
-            const rIdx = Number.isFinite(Number(b.r)) ? Number(b.r) : Math.floor(Number(b.i || 0) / cols);
-            const cIdx = Number.isFinite(Number(b.c)) ? Number(b.c) : (Number(b.i || 0) % cols);
-            if (rIdx >= 0 && rIdx < rows && cIdx >= 0 && cIdx < cols) {
-                zoneByCell.set(`${rIdx}:${cIdx}`, String(b.zone_id || ''));
+        // Stage nodes.
+        stages.forEach((s, i) => {
+            const nx = xs[i];
+            const ny = bandY;
+            const norm = Math.max(0, Math.min(1, Number(s.norm || 0)));
+            const isHot = s.id === wp.hot;
+            const R = 18 + norm * 10;
+            if (isHot) {
+                const g = ctx.createRadialGradient(nx, ny, R * 0.4, nx, ny, R * 2);
+                g.addColorStop(0, 'rgba(255, 200, 120, 0.34)');
+                g.addColorStop(1, 'rgba(255, 200, 120, 0)');
+                ctx.beginPath();
+                ctx.arc(nx, ny, R * 2, 0, Math.PI * 2);
+                ctx.fillStyle = g;
+                ctx.fill();
             }
-            const r0 = innerR + rIdx * ringGap;
-            const r1 = r0 + Math.max(1.3, ringGap * 0.8);
-            const a0 = cIdx * angleStep;
-            const a1 = a0 + angleStep * 0.88;
-            const blockZoneId = String(b.zone_id || '');
-            const isFocused = !hasZoneFocus || blockZoneId === selectedZoneId;
-            const focusAlphaMul = isFocused ? 1 : (hardFocus ? 0.22 : 0.42);
-
-            const z = zoneMap.get(String(b.zone_id || '')) || {};
-            const zoneAct = Math.max(0, Math.min(100, Number(z.activity || 0)));
-            const inodePressure = Math.max(0, Math.min(100, Number(z.inode_pressure || 0)));
-            if (this.renderMode === 'write') {
-                if (b.state === 'writing') this.ctx.fillStyle = `rgba(127, 232, 255, ${(0.92 * focusAlphaMul).toFixed(3)})`;
-                else if (b.state === 'used') this.ctx.fillStyle = `rgba(44, 132, 184, ${((0.32 + Math.min(0.5, zoneAct / 120)) * focusAlphaMul).toFixed(3)})`;
-                else this.ctx.fillStyle = `rgba(14, 28, 44, ${(0.48 * focusAlphaMul).toFixed(3)})`;
-            } else if (this.renderMode === 'inode') {
-                if (b.state === 'free') this.ctx.fillStyle = `rgba(12, 24, 38, ${(0.45 * focusAlphaMul).toFixed(3)})`;
-                else this.ctx.fillStyle = `rgba(127, 232, 255, ${((0.18 + Math.min(0.72, inodePressure / 110)) * focusAlphaMul).toFixed(3)})`;
-            } else {
-                if (b.state === 'writing') this.ctx.fillStyle = `rgba(127, 232, 255, ${(0.9 * focusAlphaMul).toFixed(3)})`;
-                else if (b.state === 'free') this.ctx.fillStyle = `rgba(19, 38, 58, ${(0.55 * focusAlphaMul).toFixed(3)})`;
-                else this.ctx.fillStyle = `rgba(44, 132, 184, ${(0.72 * focusAlphaMul).toFixed(3)})`;
+            ctx.beginPath();
+            ctx.arc(nx, ny, R, 0, Math.PI * 2);
+            ctx.fillStyle = isHot ? 'rgba(38, 30, 18, 0.95)' : 'rgba(14, 24, 36, 0.95)';
+            ctx.fill();
+            ctx.strokeStyle = isHot ? 'rgba(255, 196, 112, 0.95)' : 'rgba(103, 170, 214, 0.8)';
+            ctx.lineWidth = isHot ? 2 : 1.2;
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.arc(nx, ny, Math.max(2, R * norm), 0, Math.PI * 2);
+            ctx.fillStyle = isHot ? 'rgba(255, 196, 112, 0.5)' : 'rgba(103, 190, 224, 0.4)';
+            ctx.fill();
+
+            ctx.textAlign = 'center';
+            ctx.fillStyle = isHot ? '#ffd08d' : '#bcd4ea';
+            ctx.font = '10px "Share Tech Mono", monospace';
+            ctx.fillText(s.label, nx, ny - R - 10);
+            ctx.fillStyle = 'rgba(150, 176, 204, 0.92)';
+            ctx.font = '9px "Share Tech Mono", monospace';
+            ctx.fillText(String(s.value || ''), nx, ny + R + 16);
+            ctx.textAlign = 'left';
+
+            // "inspect" hint on stages that open a deep-dive overlay.
+            if (this.stageOverlayMap[s.id]) {
+                ctx.fillStyle = this.hoveredStageId === s.id ? 'rgba(255,208,141,0.95)' : 'rgba(120,150,180,0.6)';
+                ctx.font = '7.5px "Share Tech Mono", monospace';
+                ctx.textAlign = 'center';
+                ctx.fillText('▸ inspect', nx, ny + R + 28);
+                ctx.textAlign = 'left';
             }
+            this.stageHitAreas.push({ x: nx - R - 6, y: ny - R - 6, w: (R + 6) * 2, h: (R + 6) * 2, id: s.id });
+        });
+    }
+
+    getStageHitAt(x, y) {
+        for (const hit of this.stageHitAreas) {
+            if (x >= hit.x && x <= hit.x + hit.w && y >= hit.y && y <= hit.y + hit.h) return hit;
+        }
+        return null;
+    }
 
-            this.ctx.beginPath();
-            this.ctx.arc(cx, cy, r1, a0, a1);
-            this.ctx.arc(cx, cy, r0, a1, a0, true);
-            this.ctx.closePath();
-            this.ctx.fill();
+    drawMountMap(w, h, mounts) {
+        const ctx = this.ctx;
+        const colW = Math.min(940, Math.floor(w * 0.68));
+        const x = Math.floor((w - colW) / 2);
+        let y = Math.floor(h * 0.5);
+
+        ctx.fillStyle = 'rgba(150,178,206,0.85)';
+        ctx.font = '11px "Share Tech Mono", monospace';
+        ctx.fillText(`MOUNTS · ${mounts.length}   (sorted by ${String(this.mountSortMode).toUpperCase()})`, x, y);
+        y += 16;
+
+        if (!mounts.length) {
+            ctx.fillStyle = 'rgba(140,160,182,0.7)';
+            ctx.font = '10px "Share Tech Mono", monospace';
+            ctx.fillText('no mounted filesystems reported', x, y + 14);
+            return;
+        }
+
+        const sorted = mounts.slice().sort((a, b) => this.mountSortValue(b, this.mountSortMode) - this.mountSortValue(a, this.mountSortMode));
+        const rowH = 44;
+        const gap = 8;
+        const maxRows = Math.max(1, Math.floor((h - y - 46) / (rowH + gap)));
+
+        sorted.slice(0, maxRows).forEach((mnt) => {
+            const key = mnt.mountpoint;
+            const hovered = this.hoveredMountKey === key;
+            const selected = this.selectedMountKey === key;
+
+            this.drawRoundedRect(x, y, colW, rowH, 6);
+            ctx.fillStyle = selected ? 'rgba(20,34,52,0.95)' : (hovered ? 'rgba(16,26,40,0.95)' : 'rgba(11,18,28,0.9)');
+            ctx.fill();
+            ctx.strokeStyle = selected ? 'rgba(149,207,255,0.9)' : (hovered ? 'rgba(122,182,245,0.7)' : 'rgba(72,94,124,0.4)');
+            ctx.lineWidth = selected ? 1.4 : 0.9;
+            ctx.stroke();
+
+            ctx.fillStyle = '#d3e7ff';
+            ctx.font = '12px "Share Tech Mono", monospace';
+            ctx.fillText(mnt.mountpoint, x + 12, y + 19);
+            ctx.fillStyle = 'rgba(140,164,190,0.8)';
+            ctx.font = '8.5px "Share Tech Mono", monospace';
+            ctx.fillText(`${mnt.fstype} · ${mnt.device}`, x + 12, y + 34);
+
+            const barX = x + 250;
+            const barW = colW - 250 - 168;
+            const barY = y + 11;
+            const barH = 12;
+            ctx.fillStyle = 'rgba(30,44,60,0.85)';
+            this.drawRoundedRect(barX, barY, barW, barH, 3);
+            ctx.fill();
+            const bv = this.mountBarValue(mnt);
+            this.drawRoundedRect(barX, barY, Math.max(2, barW * bv.frac), barH, 3);
+            ctx.fillStyle = bv.color;
+            ctx.fill();
+            ctx.fillStyle = 'rgba(150,176,204,0.85)';
+            ctx.font = '8px "Share Tech Mono", monospace';
+            ctx.fillText(bv.label, barX, y + 37);
+
+            ctx.textAlign = 'right';
+            ctx.fillStyle = '#cfe0f0';
+            ctx.font = '11px "Share Tech Mono", monospace';
+            ctx.fillText(`${Number(mnt.used_gb || 0).toFixed(1)} / ${Number(mnt.total_gb || 0).toFixed(1)} GB`, x + colW - 12, y + 19);
+            const io = Number(mnt.write_bps || 0) + Number(mnt.read_bps || 0);
+            ctx.fillStyle = 'rgba(150,176,204,0.85)';
+            ctx.font = '8.5px "Share Tech Mono", monospace';
+            ctx.fillText(`inode ${Number(mnt.inode_percent || 0).toFixed(1)}%  ·  io ${(io / 1024).toFixed(0)} KB/s`, x + colW - 12, y + 34);
+            ctx.textAlign = 'left';
+
+            this.mountHitAreas.push({ x, y, w: colW, h: rowH, key });
+            y += rowH + gap;
         });
-        this.radialHitModel = {
-            cx,
-            cy,
-            innerR,
-            outerR,
-            ringGap,
-            angleStep,
-            rows,
-            cols,
-            zoneByCell,
+
+        if (sorted.length > maxRows) {
+            ctx.fillStyle = 'rgba(140,160,182,0.6)';
+            ctx.font = '9px "Share Tech Mono", monospace';
+            ctx.fillText(`+ ${sorted.length - maxRows} more`, x, y + 12);
+        }
+    }
+
+    // ---- Drill-down overlay -------------------------------------------------
+    fsTypeNote(fstype) {
+        const notes = {
+            ext4: 'Journaling filesystem. Inodes are fixed at mkfs time, so you can exhaust inodes while bytes remain free.',
+            xfs: 'High-performance journaling filesystem with dynamic inode allocation.',
+            btrfs: 'Copy-on-write filesystem with snapshots, checksums and dynamic inodes.',
+            vfat: 'FAT filesystem (typically the EFI boot partition). No Unix permissions or inode concept.',
+            iso9660: 'Read-only optical/image filesystem.',
+            overlay: 'Union mount used for container layers (lowerdir + upperdir).',
+            tmpfs: 'RAM-backed filesystem; contents are volatile and vanish on reboot.',
+            zfs: 'Pooled copy-on-write filesystem with checksums and snapshots.'
         };
+        return notes[fstype] || 'Mounted filesystem.';
+    }
+
+    openMountDrilldown(key) {
+        if (!this.drillScrim || !this.drillPanel) return;
+        this.selectedMountKey = key;
+        this.refreshMountDrilldown();
+        this.drillScrim.style.display = 'block';
+    }
+
+    refreshMountDrilldown() {
+        if (!this.drillPanel || !this.selectedMountKey) return;
+        const mounts = (this.telemetry && this.telemetry.mounts) || [];
+        const mnt = mounts.find((x) => x.mountpoint === this.selectedMountKey);
+        if (!mnt) return;
+        const usedPct = Number(mnt.used_percent || 0);
+        const inodePct = Number(mnt.inode_percent || 0);
+        const usedCol = usedPct >= 90 ? 'rgba(232,96,104,0.95)' : (usedPct >= 75 ? 'rgba(230,193,90,0.95)' : 'rgba(103,190,224,0.95)');
+        const inodeCol = inodePct >= 85 ? 'rgba(232,96,104,0.95)' : (inodePct >= 60 ? 'rgba(230,193,90,0.95)' : 'rgba(103,190,224,0.95)');
+        const io = Number(mnt.write_bps || 0) + Number(mnt.read_bps || 0);
+        const card = (k, v, sub, col) => `
+            <div style="background:rgba(8,12,20,0.7); border:1px solid rgba(96,110,128,0.32); border-radius:4px; padding:8px 10px;">
+                <div style="font-size:8.5px; letter-spacing:0.6px; color:#7f93a6; text-transform:uppercase;">${k}</div>
+                <div style="font-size:18px; color:${col || '#e2edf5'}; line-height:1.15; margin-top:2px;">${v}</div>
+                ${sub ? `<div style="font-size:8px; color:#728697; margin-top:1px;">${sub}</div>` : ''}
+            </div>`;
+        const watchBits = [];
+        if (usedPct >= 90) watchBits.push('space is nearly full — writes may start failing.');
+        if (inodePct >= 85) watchBits.push('inodes nearly exhausted — new files can fail even with free bytes.');
+        const watch = watchBits.length
+            ? `<div style="margin-top:12px; font-size:10.5px; line-height:1.55; color:#9db6c8; border-left:2px solid rgba(230,193,90,0.6); padding-left:9px;"><span style="color:#e6c15a;">WATCH · </span>${watchBits.join(' ')}</div>`
+            : '';
+        const html = `
+            <div style="display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid rgba(103,190,224,0.25); background:linear-gradient(90deg, rgba(103,190,224,0.10), rgba(103,190,224,0));">
+                <div style="flex:1 1 auto;">
+                    <div style="font-size:8px; letter-spacing:1.4px; color:#6f8597;">MOUNT · ${(mnt.fstype || '').toUpperCase()}</div>
+                    <div style="font-size:20px; letter-spacing:1px; color:#e8f2f9;">${mnt.mountpoint}</div>
+                    <div style="font-size:9px; color:#8ba0b2; margin-top:2px;">${mnt.device}</div>
+                </div>
+                <div class="ns-ov-close" style="flex:none; cursor:pointer; width:26px; height:26px; border:1px solid rgba(160,170,190,0.4); border-radius:4px; display:flex; align-items:center; justify-content:center; color:#c8ccd4; font-size:14px;">✕</div>
+            </div>
+            <div style="padding:14px 18px 16px;">
+                <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:8px; margin-bottom:14px;">
+                    ${card('SPACE USED', `${usedPct.toFixed(1)}%`, `${Number(mnt.used_gb || 0).toFixed(1)} / ${Number(mnt.total_gb || 0).toFixed(1)} GB`, usedCol)}
+                    ${card('FREE', `${Number(mnt.free_gb || 0).toFixed(1)} GB`, 'available', null)}
+                    ${card('INODES USED', `${inodePct.toFixed(1)}%`, `${Number(mnt.inode_used || 0).toLocaleString()} / ${Number(mnt.inode_total || 0).toLocaleString()}`, inodeCol)}
+                    ${card('I/O', `${(io / 1024).toFixed(0)} KB/s`, `wr ${(Number(mnt.write_bps || 0) / 1024).toFixed(0)} · rd ${(Number(mnt.read_bps || 0) / 1024).toFixed(0)} KB/s`, null)}
+                </div>
+                <div style="font-size:11.5px; line-height:1.6; color:#c2cede;">${this.fsTypeNote(mnt.fstype)} Space (bytes) and inodes (file/dir slots) are tracked separately by <b style="color:#a9d4e8">statvfs</b> — an inode shortage and a byte shortage are two different ways to run out.</div>
+                ${watch}
+            </div>`;
+        window.setSafeHtml(this.drillPanel, html);
+        const closeBtn = this.drillPanel.querySelector('.ns-ov-close');
+        if (closeBtn) closeBtn.addEventListener('click', () => this.closeMountDrilldown());
+    }
+
+    closeMountDrilldown() {
+        this.selectedMountKey = null;
+        if (this.drillScrim) this.drillScrim.style.display = 'none';
+    }
 
-        // Central hole.
-        this.ctx.beginPath();
-        this.ctx.arc(cx, cy, innerR - 3, 0, Math.PI * 2);
-        this.ctx.fillStyle = '#081018';
-        this.ctx.fill();
-
-        // Alert banner.
-        if (Number(m.writing_blocks || 0) > 0) {
-            const pulse = 0.5 + 0.5 * Math.sin(this.tick * 0.08);
-            const bw = 330;
-            const bh = 40;
-            const bx = cx - Math.floor(bw / 2);
-            const by = cy - outerR - 26;
-            this.drawRoundedRect(bx, by, bw, bh, 5);
-            this.ctx.fillStyle = `rgba(${90 + Math.floor(80 * pulse)}, 20, 20, 0.9)`;
-            this.ctx.fill();
-            this.ctx.strokeStyle = 'rgba(220, 90, 90, 0.85)';
-            this.ctx.lineWidth = 1;
-            this.ctx.stroke();
-            this.ctx.fillStyle = '#ffd8c0';
-            this.ctx.font = 'bold 17px "Share Tech Mono", monospace';
-            this.ctx.fillText('DATA PACKAGE WRITING', bx + 18, by + 26);
+    // ---- Feature overlay (animated) ----------------------------------------
+    openFx(mode, arg) {
+        if (!this.fxScrim || !this.fxCanvas) return;
+        this.fxMode = mode;
+        this.fxHitAreas = [];
+        this.fxHoverKey = null;
+        const W = Math.min(1040, Math.floor(window.innerWidth * 0.86));
+        const H = Math.min(624, Math.floor(window.innerHeight * 0.82));
+        const dpr = Math.min(window.devicePixelRatio || 1, 2);
+        this.fxCanvas.width = Math.floor(W * dpr);
+        this.fxCanvas.height = Math.floor(H * dpr);
+        this.fxCanvas.style.width = `${W}px`;
+        this.fxCanvas.style.height = `${H}px`;
+        this.fxCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        this.fxW = W;
+        this.fxH = H;
+        this.fxScrim.style.display = 'block';
+        this.fxOpenTime = Date.now();
+        if (this.fxInterval) { clearInterval(this.fxInterval); this.fxInterval = null; }
+        if (mode === 'ext4') this.fetchExt4(arg);
+        if (mode === 'jbd2') this.fetchJbd2();
+        if (mode === 'pathwalk') this.fetchPathWalk(arg);
+        if (mode === 'hotfiles') {
+            this.fetchHotFiles();
+            this.fxInterval = setInterval(() => { if (this.fxMode === 'hotfiles') this.fetchHotFiles(); }, 1300);
         }
+        if (this.fxRaf) cancelAnimationFrame(this.fxRaf);
+        this.fxAnimate();
+    }
 
-        // Side package stacks from zones.
-        const sortedZones = zones
-            .slice()
-            .sort((a, b) => this.getZoneSortScore(b, this.zoneSortMode) - this.getZoneSortScore(a, this.zoneSortMode));
-        const zoneItems = sortedZones.slice(0, 14);
-        const leftItems = zoneItems.filter((_, i) => i % 2 === 0);
-        const rightItems = zoneItems.filter((_, i) => i % 2 === 1);
-        const cardW = 130;
-        const cardH = 46;
-        const leftX = Math.max(24, cx - outerR - 220);
-        const rightX = Math.min(w - cardW - 24, cx + outerR + 110);
-        const topY = Math.max(150, cy - outerR + 12);
-
-        const drawZonePack = (list, xBase, isLeft) => {
-            list.forEach((z, idx) => {
-                const y = topY + idx * 54;
-                const usedPercent = Number(z.used_percent || 0);
-                const writingBlocks = Number(z.writing_blocks || 0);
-                const inodePressure = Number(z.inode_pressure || 0);
-                const riskScore = Math.max(usedPercent, inodePressure, writingBlocks > 0 ? 86 : 0);
-                const active = Number(z.activity || 0) > 6 || writingBlocks > 0;
-                const accent = riskScore >= 80
-                    ? 'rgba(255, 149, 158, 0.92)'
-                    : (riskScore >= 55 ? 'rgba(255, 206, 127, 0.9)' : 'rgba(118, 220, 255, 0.92)');
-                const layers = 2 + (active ? 2 : 1);
-                const zoneId = String(z.id || z.name || `zone-${idx}`);
-                const isSelected = this.selectedZoneId === zoneId;
-                const isHovered = this.hoveredZoneId === zoneId;
-                const isMuted = hasZoneFocus && !isSelected;
-                this.drawPackageStack(
-                    xBase,
-                    y,
-                    cardW,
-                    cardH,
-                    layers,
-                    accent,
-                    String(z.name || z.id || 'zone'),
-                    `used ${usedPercent.toFixed(0)}% | inode ${inodePressure.toFixed(0)}%`,
-                    `wr ${writingBlocks} | act ${Number(z.activity || 0).toFixed(0)}`,
-                    isSelected,
-                    isHovered,
-                    isMuted,
-                    this.focusMode
-                );
-                this.zoneHitAreas.push({ x: xBase, y, w: cardW, h: cardH, zoneId });
-
-                // Connector to central disk with light bundling.
-                const sx = isLeft ? xBase + cardW : xBase;
-                const sy = y + cardH / 2;
-                const tx = cx + (isLeft ? -outerR * 0.85 : outerR * 0.85);
-                const ty = cy - outerR * 0.62 + idx * 9;
-                const bundleX = cx + (isLeft ? -outerR * 1.05 : outerR * 1.05);
-                const bundleY = cy - outerR * 0.5 + idx * 8;
-                this.ctx.beginPath();
-                this.ctx.moveTo(sx, sy);
-                this.ctx.bezierCurveTo(
-                    sx + (isLeft ? 60 : -60),
-                    sy,
-                    bundleX + (isLeft ? -22 : 22),
-                    bundleY,
-                    bundleX,
-                    bundleY
-                );
-                this.ctx.strokeStyle = isMuted
-                    ? (hardFocus ? 'rgba(82, 104, 132, 0.2)' : 'rgba(102, 122, 148, 0.32)')
-                    : (isSelected
-                    ? 'rgba(146, 204, 255, 0.86)'
-                    : (riskScore >= 80 ? 'rgba(226, 92, 106, 0.44)' : 'rgba(169, 52, 80, 0.26)'));
-                this.ctx.lineWidth = isSelected ? 1.5 : (isMuted ? (hardFocus ? 0.8 : 0.95) : 1);
-                this.ctx.stroke();
-
-                this.ctx.beginPath();
-                this.ctx.moveTo(bundleX, bundleY);
-                this.ctx.bezierCurveTo(
-                    bundleX + (isLeft ? 24 : -24),
-                    bundleY,
-                    tx + (isLeft ? -34 : 34),
-                    ty,
-                    tx,
-                    ty
-                );
-                this.ctx.strokeStyle = isMuted
-                    ? (hardFocus ? 'rgba(82, 104, 132, 0.22)' : 'rgba(102, 122, 148, 0.35)')
-                    : (isSelected ? 'rgba(146, 204, 255, 0.86)' : 'rgba(124, 156, 196, 0.34)');
-                this.ctx.lineWidth = isSelected ? 1.3 : (isMuted ? (hardFocus ? 0.85 : 1) : 0.95);
-                this.ctx.stroke();
+    fetchHotFiles() {
+        window.fetchJson('/api/hot-files', { cache: 'no-store' }, {
+            timeoutMs: 6000, suppressToast: true, context: 'hot-files'
+        })
+            .then((d) => { this.hotFilesData = d || { writers: [] }; })
+            .catch((e) => { this.hotFilesData = { writers: [], error: e.message }; });
+    }
+
+    fetchPathWalk(targetPath) {
+        this.pathWalkData = null;
+        const url = targetPath
+            ? `/api/path-walk?path=${encodeURIComponent(targetPath)}`
+            : '/api/path-walk';
+        window.fetchJson(url, { cache: 'no-store' }, {
+            timeoutMs: 6000, suppressToast: true, context: 'path-walk'
+        })
+            .then((d) => { this.pathWalkData = d || { steps: [] }; })
+            .catch((e) => { this.pathWalkData = { steps: [], error: e.message }; });
+    }
+
+    fetchExt4(targetPath) {
+        this.ext4Data = null;
+        const url = targetPath
+            ? `/api/ext4-anatomy?path=${encodeURIComponent(targetPath)}`
+            : '/api/ext4-anatomy';
+        window.fetchJson(url, { cache: 'no-store' }, {
+            timeoutMs: 6000, suppressToast: true, context: 'ext4-anatomy'
+        })
+            .then((d) => { this.ext4Data = d || { available: false, reason: 'empty' }; })
+            .catch((e) => { this.ext4Data = { available: false, reason: e.message }; });
+    }
+
+    fetchJbd2() {
+        this.jbd2Data = null;
+        window.fetchJson('/api/ext4-journal', { cache: 'no-store' }, {
+            timeoutMs: 6000, suppressToast: true, context: 'ext4-journal'
+        })
+            .then((d) => { this.jbd2Data = d || { available: false, reason: 'empty' }; })
+            .catch((e) => { this.jbd2Data = { available: false, reason: e.message }; });
+    }
+
+    closeFx() {
+        this.fxMode = null;
+        if (this.fxRaf) {
+            cancelAnimationFrame(this.fxRaf);
+            this.fxRaf = null;
+        }
+        if (this.fxInterval) {
+            clearInterval(this.fxInterval);
+            this.fxInterval = null;
+        }
+        if (this.fxScrim) this.fxScrim.style.display = 'none';
+    }
+
+    fxAnimate() {
+        if (!this.fxScrim || this.fxScrim.style.display === 'none') return;
+        this.fxRaf = requestAnimationFrame(() => this.fxAnimate());
+        const ctx = this.fxCtx;
+        const W = this.fxW;
+        const H = this.fxH;
+        ctx.clearRect(0, 0, W, H);
+        ctx.fillStyle = 'rgba(11, 16, 26, 0.98)';
+        this._rr(ctx, 0, 0, W, H, 10);
+        ctx.fill();
+        ctx.strokeStyle = 'rgba(103, 190, 224, 0.35)';
+        ctx.lineWidth = 1;
+        this._rr(ctx, 0.5, 0.5, W - 1, H - 1, 10);
+        ctx.stroke();
+        if (this.fxMode === 'writeback') this.drawFxWriteback(ctx, W, H);
+        else if (this.fxMode === 'ext4') this.drawFxExt4(ctx, W, H);
+        else if (this.fxMode === 'jbd2') this.drawFxJbd2(ctx, W, H);
+        else if (this.fxMode === 'hotfiles') this.drawFxHotfiles(ctx, W, H);
+        else if (this.fxMode === 'pathwalk') this.drawFxPathwalk(ctx, W, H);
+    }
+
+    drawFxHotfiles(ctx, W, H) {
+        const FM = '"Share Tech Mono", monospace';
+        const pad = 26;
+        const now = Date.now();
+        this.fxHitAreas = [];
+        const d = this.hotFilesData;
+        const meta = (this.telemetry && this.telemetry.meta) || {};
+        ctx.textAlign = 'left';
+        ctx.fillStyle = '#e8f2f9';
+        ctx.font = `18px ${FM}`;
+        ctx.fillText('LIVE WRITERS · who is touching the filesystem now', pad, 32);
+        if (!d) {
+            ctx.fillStyle = 'rgba(150,178,206,0.75)';
+            ctx.font = `12px ${FM}`;
+            ctx.fillText('sampling /proc/*/io …', pad, 64);
+            return;
+        }
+        ctx.fillStyle = 'rgba(150,178,206,0.72)';
+        ctx.font = `10px ${FM}`;
+        const scope = d.source === 'collector'
+            ? `system-wide (root collector) · ${d.accessible_procs || 0} processes`
+            : `same-uid only (user ${d.visible_user || '?'}) · ${d.accessible_procs || 0} readable`;
+        ctx.fillText(`${scope}  ·  system write ${(meta.write_mb_s || 0).toFixed(2)} MB/s`, pad, 50);
+
+        const writers = Array.isArray(d.writers) ? d.writers : [];
+        const listY = 74;
+        const listH = H - listY - 92;
+        if (!writers.length) {
+            ctx.fillStyle = 'rgba(255,206,127,0.85)';
+            ctx.font = `11px ${FM}`;
+            ctx.fillText('no active writers visible to this user right now (root/other-uid processes are hidden)', pad, listY + 24);
+        } else {
+            let maxW = 1;
+            writers.forEach((w) => { maxW = Math.max(maxW, w.write_bps + w.disk_write_bps); });
+            const rowH = Math.min(46, Math.max(34, listH / writers.length));
+            writers.forEach((w, i) => {
+                const ry = listY + i * rowH;
+                if (ry + rowH > listY + listH) return;
+                const total = w.write_bps + w.disk_write_bps;
+                const frac = Math.max(0.01, Math.min(1, total / maxW));
+                const clickable = Array.isArray(w.files) && w.files.length > 0;
+                const hovered = this.fxHoverKey === w.pid;
+                if (clickable) {
+                    this.fxHitAreas.push({ x: pad, y: ry, w: W - pad * 2, h: rowH, key: w.pid, action: 'pathwalk', path: w.files[0] });
+                    if (hovered) {
+                        ctx.fillStyle = 'rgba(118,220,255,0.08)';
+                        this._rr(ctx, pad - 6, ry + 2, W - pad * 2 + 12, rowH - 4, 5);
+                        ctx.fill();
+                    }
+                }
+                // bar
+                const barX = pad + 250;
+                const barW = W - pad - barX - 8;
+                ctx.fillStyle = 'rgba(24,34,48,0.85)';
+                this._rr(ctx, barX, ry + 8, barW, rowH - 18, 4);
+                ctx.fill();
+                ctx.fillStyle = 'rgba(118,220,255,0.8)';
+                this._rr(ctx, barX, ry + 8, barW * frac, rowH - 18, 4);
+                ctx.fill();
+                // labels
+                ctx.fillStyle = '#dbeafe';
+                ctx.font = `12px ${FM}`;
+                ctx.fillText(`${i + 1}. ${w.name}`, pad, ry + 18);
+                ctx.fillStyle = 'rgba(140,164,190,0.8)';
+                ctx.font = `8px ${FM}`;
+                ctx.fillText(`pid ${w.pid} · ${w.user}`, pad, ry + 31);
+                // rate on bar
+                ctx.fillStyle = '#e8f2f9';
+                ctx.font = `10px ${FM}`;
+                const rateTxt = `${this._fmtRate(w.write_bps)}/s wchar` + (w.disk_write_bps > 1 ? ` · ${this._fmtRate(w.disk_write_bps)}/s disk` : '');
+                ctx.fillText(rateTxt, barX + 6, ry + 20);
+                // files + walk hint
+                if (clickable) {
+                    ctx.fillStyle = 'rgba(150,178,206,0.7)';
+                    ctx.font = `8px ${FM}`;
+                    ctx.fillText(w.files[0].length > 84 ? '…' + w.files[0].slice(-82) : w.files[0], barX + 6, ry + rowH - 4);
+                    ctx.fillStyle = hovered ? 'rgba(143,243,192,0.95)' : 'rgba(120,150,180,0.65)';
+                    ctx.font = `8px ${FM}`;
+                    ctx.textAlign = 'right';
+                    ctx.fillText('▸ walk path', W - pad - 4, ry + rowH - 4);
+                    ctx.textAlign = 'left';
+                }
             });
+        }
+
+        const ex = [
+            '/proc/<pid>/io exposes per-process I/O: wchar = bytes handed to write()/pwrite() (may land in the page cache), write_bytes = bytes',
+            'actually issued to the block device. A process can show high wchar but near-zero disk writes — that is writeback doing its job.',
+            'Unprivileged readers see only same-uid processes, so root daemons and nginx are hidden here unless the app runs as root.'
+        ];
+        ctx.fillStyle = 'rgba(178,196,214,0.9)';
+        ctx.font = `9.5px ${FM}`;
+        let ey = H - 60;
+        ex.forEach((line) => { ctx.fillText(line, pad, ey); ey += 15; });
+    }
+
+    _fmtRate(bps) {
+        if (bps >= 1024 * 1024) return `${(bps / (1024 * 1024)).toFixed(1)} MB`;
+        if (bps >= 1024) return `${(bps / 1024).toFixed(1)} KB`;
+        return `${bps.toFixed(0)} B`;
+    }
+
+    drawFxPathwalk(ctx, W, H) {
+        const FM = '"Share Tech Mono", monospace';
+        const pad = 26;
+        const now = Date.now();
+        this.fxHitAreas = [];
+        const d = this.pathWalkData;
+        ctx.textAlign = 'left';
+        ctx.fillStyle = '#e8f2f9';
+        ctx.font = `18px ${FM}`;
+        ctx.fillText('PATH RESOLUTION · walking the dentry cache', pad, 32);
+        if (!d) {
+            ctx.fillStyle = 'rgba(150,178,206,0.75)';
+            ctx.font = `12px ${FM}`;
+            ctx.fillText('resolving path …', pad, 64);
+            return;
+        }
+        ctx.fillStyle = 'rgba(150,178,206,0.72)';
+        ctx.font = `10px ${FM}`;
+        ctx.fillText(`${d.path}  ·  ${d.depth} components`, pad, 50);
+
+        const steps = Array.isArray(d.steps) ? d.steps : [];
+        const startY = 84;
+        const rowGap = Math.min(58, Math.max(40, (H - startY - 96) / Math.max(1, steps.length)));
+        const nodeW = 340;
+        const typeIcon = { dir: '📁', file: '📄', symlink: '🔗' };
+
+        steps.forEach((s, i) => {
+            const revealT = Math.max(0, Math.min(1, (now - this.fxOpenTime - i * 150) / 240));
+            if (revealT <= 0) return;
+            const indent = pad + 20 + i * 26;
+            const y = startY + i * rowGap;
+            const nh = 40;
+            // connector from previous
+            if (i > 0) {
+                const pIndent = pad + 20 + (i - 1) * 26;
+                ctx.strokeStyle = `rgba(118,220,255,${(0.5 * revealT).toFixed(3)})`;
+                ctx.lineWidth = 1.3;
+                ctx.beginPath();
+                ctx.moveTo(pIndent + 14, y - rowGap + nh);
+                ctx.lineTo(pIndent + 14, y + nh / 2);
+                ctx.lineTo(indent, y + nh / 2);
+                ctx.stroke();
+                // travelling lookup pulse
+                const pp = ((now * 0.001 + i * 0.2) % 1);
+                const py = (y - rowGap + nh) + ((y + nh / 2) - (y - rowGap + nh)) * pp;
+                ctx.beginPath();
+                ctx.arc(pIndent + 14, py, 2, 0, Math.PI * 2);
+                ctx.fillStyle = `rgba(150,226,255,${(0.8 * revealT).toFixed(3)})`;
+                ctx.fill();
+            }
+            ctx.save();
+            ctx.globalAlpha = revealT;
+            const scale = 0.9 + 0.1 * revealT;
+            const isLast = i === steps.length - 1;
+            const clickable = isLast && s.type === 'file' && !s.error;
+            const hovered = clickable && this.fxHoverKey === 'ext4-file';
+            const nw = nodeW * scale;
+            if (clickable && revealT >= 1) {
+                this.fxHitAreas.push({ x: indent, y, w: nw, h: nh, key: 'ext4-file', action: 'ext4', path: d.path });
+            }
+            const col = s.error ? [232, 120, 120] : (s.type === 'dir' ? [118, 220, 255] : (s.type === 'symlink' ? [200, 170, 255] : [143, 243, 192]));
+            ctx.fillStyle = `rgba(${col[0]},${col[1]},${col[2]},${hovered ? 0.20 : 0.10})`;
+            this._rr(ctx, indent, y, nw, nh, 6);
+            ctx.fill();
+            ctx.strokeStyle = `rgba(${col[0]},${col[1]},${col[2]},${isLast ? 0.95 : 0.6})`;
+            ctx.lineWidth = isLast ? 1.6 : 1;
+            this._rr(ctx, indent, y, nw, nh, 6);
+            ctx.stroke();
+            ctx.fillStyle = '#e8f2f9';
+            ctx.font = `13px ${FM}`;
+            ctx.fillText(`${typeIcon[s.type] || '·'} ${s.name}`, indent + 12, y + 18);
+            ctx.fillStyle = `rgba(${col[0]},${col[1]},${col[2]},0.95)`;
+            ctx.font = `9px ${FM}`;
+            const detail = s.error ? `ENOENT: ${s.error}` : `inode #${s.inode}  ${s.mode_str || ''}` + (s.size_kb != null ? `  ${s.size_kb} KB` : '') + (s.target ? `  → ${s.target}` : '');
+            ctx.fillText(detail, indent + 12, y + 32);
+            if (clickable) {
+                ctx.fillStyle = hovered ? 'rgba(143,243,192,0.98)' : 'rgba(143,243,192,0.72)';
+                ctx.font = `10px ${FM}`;
+                ctx.textAlign = 'right';
+                ctx.fillText('▸ inode & extents', indent + nw - 12, y + 24);
+                ctx.textAlign = 'left';
+            }
+            ctx.restore();
+        });
+
+        // ---- dcache stats panel (right) ----
+        const dc = d.dentry_state || {};
+        const px = W - 300;
+        const pyy = 84;
+        ctx.fillStyle = 'rgba(16,26,40,0.9)';
+        this._rr(ctx, px, pyy, 274, 150, 8);
+        ctx.fill();
+        ctx.strokeStyle = 'rgba(118,220,255,0.45)';
+        ctx.lineWidth = 1;
+        this._rr(ctx, px, pyy, 274, 150, 8);
+        ctx.stroke();
+        ctx.fillStyle = '#8fd8ff';
+        ctx.font = `12px ${FM}`;
+        ctx.fillText('DENTRY CACHE (system)', px + 14, pyy + 22);
+        const dstat = (label, value, yy, col) => {
+            ctx.fillStyle = 'rgba(127,147,166,0.9)';
+            ctx.font = `8px ${FM}`;
+            ctx.fillText(label, px + 14, yy);
+            ctx.fillStyle = col || '#e2edf5';
+            ctx.font = `15px ${FM}`;
+            ctx.fillText(value, px + 14, yy + 17);
         };
+        dstat('TOTAL DENTRIES', `${(dc.nr_dentry || 0).toLocaleString()}`, pyy + 44, '#dbeafe');
+        dstat('ACTIVE (in use)', `${(dc.active || 0).toLocaleString()}`, pyy + 84, '#8ff3c0');
+        dstat('CACHED / UNUSED', `${(dc.nr_unused || 0).toLocaleString()}`, pyy + 124, '#ffd08d');
+
+        const ex = [
+            'To open a path the kernel walks it component by component. For each name it looks up a dentry (directory entry) in the dcache — an',
+            'in-memory hash keyed by (parent, name). A hit returns the child dentry → inode instantly; a miss triggers a real directory read and',
+            'inserts a new dentry. "Negative" dentries even cache non-existent names, so repeated failed lookups stay cheap. Cached-but-unused',
+            'dentries are kept on an LRU and reclaimed under memory pressure — which is why a warm path opens far faster than a cold one.'
+        ];
+        ctx.fillStyle = 'rgba(178,196,214,0.9)';
+        ctx.font = `9.5px ${FM}`;
+        let ey = H - 62;
+        ex.forEach((line) => { ctx.fillText(line, pad, ey); ey += 14; });
+    }
+
+    drawFxJbd2(ctx, W, H) {
+        const FM = '"Share Tech Mono", monospace';
+        const pad = 26;
+        const now = Date.now();
+        const d = this.jbd2Data;
+        ctx.textAlign = 'left';
+        ctx.fillStyle = '#e8f2f9';
+        ctx.font = `18px ${FM}`;
+        ctx.fillText('jbd2 · JOURNALING & DURABILITY', pad, 32);
+        if (!d) {
+            ctx.fillStyle = 'rgba(150,178,206,0.75)';
+            ctx.font = `12px ${FM}`;
+            ctx.fillText('reading journal state…', pad, 64);
+            return;
+        }
+        if (!d.available) {
+            ctx.fillStyle = 'rgba(255,156,166,0.9)';
+            ctx.font = `12px ${FM}`;
+            ctx.fillText(`unavailable: ${d.reason || 'unknown'}`, pad, 64);
+            return;
+        }
+        const j = d.jbd2 || {};
+        ctx.fillStyle = 'rgba(150,178,206,0.72)';
+        ctx.font = `10px ${FM}`;
+        ctx.fillText(`${d.device}  ·  data=${d.mode}  ·  ${d.jbd2_device || 'jbd2'}`, pad, 50);
+
+        // ---- Transaction lifecycle cycle (left) ----
+        const cx = pad + 150;
+        const cy = 200;
+        const R = 92;
+        const phases = [
+            { id: 'running', label: 'RUNNING', sub: `${(j.avg_running_ms || 0).toFixed(0)}ms`, col: [118, 220, 255] },
+            { id: 'committing', label: 'COMMITTING', sub: `${(j.commit_time_ms || 0).toFixed(2)}ms`, col: [255, 206, 127] },
+            { id: 'checkpoint', label: 'CHECKPOINT', sub: 'flush + free', col: [143, 243, 192] }
+        ];
+        const trav = (now * 0.00018) % 1;
+        const curPhase = Math.min(2, Math.floor(trav * 3));
+        ctx.fillStyle = 'rgba(150,178,206,0.7)';
+        ctx.font = `10px ${FM}`;
+        ctx.textAlign = 'center';
+        ctx.fillText('TRANSACTION LIFECYCLE', cx, cy - R - 24);
+        ctx.textAlign = 'left';
+        // ring
+        ctx.beginPath();
+        ctx.arc(cx, cy, R, 0, Math.PI * 2);
+        ctx.strokeStyle = 'rgba(90,120,150,0.35)';
+        ctx.lineWidth = 1;
+        ctx.stroke();
+        // travelling marker
+        const ma = -Math.PI / 2 + trav * Math.PI * 2;
+        ctx.beginPath();
+        ctx.arc(cx + Math.cos(ma) * R, cy + Math.sin(ma) * R, 4, 0, Math.PI * 2);
+        ctx.fillStyle = 'rgba(150,226,255,0.95)';
+        ctx.fill();
+        phases.forEach((p, i) => {
+            const a = -Math.PI / 2 + i * (Math.PI * 2 / 3);
+            const nx = cx + Math.cos(a) * R;
+            const ny = cy + Math.sin(a) * R;
+            const active = i === curPhase;
+            const pulse = active ? (0.6 + 0.4 * (0.5 + 0.5 * Math.sin(now * 0.006))) : 0.4;
+            ctx.beginPath();
+            ctx.arc(nx, ny, active ? 26 : 22, 0, Math.PI * 2);
+            ctx.fillStyle = `rgba(${p.col[0]},${p.col[1]},${p.col[2]},${(0.12 + (active ? 0.18 : 0)).toFixed(3)})`;
+            ctx.fill();
+            ctx.strokeStyle = `rgba(${p.col[0]},${p.col[1]},${p.col[2]},${pulse.toFixed(3)})`;
+            ctx.lineWidth = active ? 2 : 1.1;
+            ctx.stroke();
+            ctx.fillStyle = `rgb(${p.col[0]},${p.col[1]},${p.col[2]})`;
+            ctx.font = `9px ${FM}`;
+            ctx.textAlign = 'center';
+            ctx.fillText(p.label, nx, ny - 2);
+            ctx.fillStyle = 'rgba(200,214,228,0.85)';
+            ctx.font = `8px ${FM}`;
+            ctx.fillText(p.sub, nx, ny + 10);
+            ctx.textAlign = 'left';
+        });
+
+        // ---- Metrics column (right of cycle) ----
+        const sx = cx + R + 60;
+        let sy = 96;
+        const stat = (label, value, col) => {
+            ctx.fillStyle = 'rgba(127,147,166,0.9)';
+            ctx.font = `8px ${FM}`;
+            ctx.fillText(label, sx, sy);
+            ctx.fillStyle = col || '#e2edf5';
+            ctx.font = `14px ${FM}`;
+            ctx.fillText(value, sx, sy + 16);
+            sy += 32;
+        };
+        stat('JOURNAL MODE', `data=${d.mode}`, d.mode === 'journal' ? '#8ff3c0' : (d.mode === 'writeback' ? '#ffd08d' : '#8fd8ff'));
+        stat('TRANSACTIONS COMMITTED', `${(j.transactions || 0).toLocaleString()}`, '#8fd8ff');
+        stat('AVG COMMIT TIME', `${(j.commit_time_ms || 0).toFixed(2)} ms`, '#ffd08d');
+        stat('AVG RUNNING WINDOW', `${(j.avg_running_ms || 0).toFixed(0)} ms`, '#cfe0f0');
+        stat('BLOCKS / TXN (logged)', `${j.blocks_per_txn || 0} (${j.logged_blocks_per_txn || 0})`, '#cfe0f0');
+        stat('HANDLES / TXN', `${j.handles_per_txn || 0}  ·  max ${(j.max_blocks_per_txn || 0).toLocaleString()} blk`, '#a9d4e8');
+
+        // ---- Durability ladder (bottom) ----
+        const lY = 316;
+        ctx.fillStyle = 'rgba(150,178,206,0.72)';
+        ctx.font = `11px ${FM}`;
+        ctx.fillText('DURABILITY LADDER · what survives a power cut at each stage', pad, lY);
+        const steps = [
+            { t: 'write()', s: 'copied into page cache; syscall returns immediately', durable: false },
+            { t: 'dirty page', s: 'in RAM only, not yet on disk', durable: false },
+            { t: 'fsync / commit', s: 'jbd2 writes journal + barrier/FUA flush to platter', durable: true },
+            { t: 'checkpoint', s: 'data at final location; journal space freed', durable: true }
+        ];
+        const sw = (W - pad * 2 - (steps.length - 1) * 40) / steps.length;
+        const stepY = lY + 18;
+        const stepH = 92;
+        steps.forEach((st, i) => {
+            const stx = pad + i * (sw + 40);
+            const col = st.durable ? [143, 243, 192] : [232, 120, 120];
+            ctx.fillStyle = `rgba(${col[0]},${col[1]},${col[2]},0.10)`;
+            this._rr(ctx, stx, stepY, sw, stepH, 6);
+            ctx.fill();
+            ctx.strokeStyle = `rgba(${col[0]},${col[1]},${col[2]},0.7)`;
+            ctx.lineWidth = 1.1;
+            this._rr(ctx, stx, stepY, sw, stepH, 6);
+            ctx.stroke();
+            ctx.fillStyle = `rgb(${col[0]},${col[1]},${col[2]})`;
+            ctx.font = `12px ${FM}`;
+            ctx.fillText(st.t, stx + 12, stepY + 24);
+            ctx.fillStyle = st.durable ? 'rgba(143,243,192,0.9)' : 'rgba(255,170,170,0.9)';
+            ctx.font = `8px ${FM}`;
+            ctx.fillText(st.durable ? '✓ DURABLE' : '✗ VOLATILE', stx + 12, stepY + 40);
+            ctx.fillStyle = 'rgba(200,214,228,0.85)';
+            ctx.font = `8.5px ${FM}`;
+            this._wrapText(ctx, st.s, stx + 12, stepY + 58, sw - 20, 12);
+            // arrow + flowing marker to next
+            if (i < steps.length - 1) {
+                const ax0 = stx + sw;
+                const ax1 = stx + sw + 40;
+                const ay = stepY + stepH / 2;
+                ctx.strokeStyle = 'rgba(150,178,206,0.5)';
+                ctx.lineWidth = 1.2;
+                ctx.beginPath();
+                ctx.moveTo(ax0 + 3, ay);
+                ctx.lineTo(ax1 - 6, ay);
+                ctx.stroke();
+                ctx.beginPath();
+                ctx.moveTo(ax1 - 6, ay - 4);
+                ctx.lineTo(ax1 - 1, ay);
+                ctx.lineTo(ax1 - 6, ay + 4);
+                ctx.stroke();
+                const fp = ((now * 0.0009) % 1);
+                ctx.beginPath();
+                ctx.arc(ax0 + 3 + (ax1 - ax0 - 9) * fp, ay, 2, 0, Math.PI * 2);
+                ctx.fillStyle = 'rgba(150,226,255,0.9)';
+                ctx.fill();
+            }
+        });
+        // durability boundary marker between step 2 and 3
+        const boundaryX = pad + 2 * (sw + 40) - 20;
+        ctx.strokeStyle = 'rgba(143,243,192,0.5)';
+        ctx.setLineDash([4, 4]);
+        ctx.beginPath();
+        ctx.moveTo(boundaryX, stepY - 4);
+        ctx.lineTo(boundaryX, stepY + stepH + 16);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.fillStyle = 'rgba(143,243,192,0.85)';
+        ctx.font = `8px ${FM}`;
+        ctx.textAlign = 'center';
+        ctx.fillText('crash-safe boundary', boundaryX, stepY + stepH + 14);
+        ctx.textAlign = 'left';
+
+        // ---- Explainer ----
+        const ex = [
+            `In data=${d.mode} mode, jbd2 batches many operations into one transaction, then commits it atomically to the journal with a barrier/FUA`,
+            'flush before touching the real filesystem. If power is lost mid-write, on reboot the journal is replayed: committed transactions are',
+            'redone, incomplete ones discarded — so metadata (and in data=journal, file data too) never ends up half-written. fsync() forces the',
+            "current transaction to commit now, which is why it's the durability guarantee databases rely on."
+        ];
+        ctx.fillStyle = 'rgba(178,196,214,0.9)';
+        ctx.font = `9.5px ${FM}`;
+        let ey = H - 62;
+        ex.forEach((line) => { ctx.fillText(line, pad, ey); ey += 14; });
+    }
+
+    _wrapText(ctx, text, x, y, maxW, lh) {
+        const words = String(text).split(' ');
+        let line = '';
+        let yy = y;
+        words.forEach((wd) => {
+            const test = line ? line + ' ' + wd : wd;
+            if (ctx.measureText(test).width > maxW && line) {
+                ctx.fillText(line, x, yy);
+                line = wd;
+                yy += lh;
+            } else {
+                line = test;
+            }
+        });
+        if (line) ctx.fillText(line, x, yy);
+    }
+
+    drawFxExt4(ctx, W, H) {
+        const FM = '"Share Tech Mono", monospace';
+        const pad = 26;
+        const now = Date.now();
+        const d = this.ext4Data;
+        ctx.textAlign = 'left';
+        ctx.fillStyle = '#e8f2f9';
+        ctx.font = `18px ${FM}`;
+        ctx.fillText('ext4 · FILE ANATOMY', pad, 32);
+
+        if (!d) {
+            ctx.fillStyle = 'rgba(150,178,206,0.75)';
+            ctx.font = `12px ${FM}`;
+            ctx.fillText('resolving inode…', pad, 64);
+            return;
+        }
+        if (!d.available) {
+            ctx.fillStyle = 'rgba(255,156,166,0.9)';
+            ctx.font = `12px ${FM}`;
+            ctx.fillText(`unavailable: ${d.reason || 'unknown'}`, pad, 64);
+            return;
+        }
+
+        ctx.fillStyle = 'rgba(150,178,206,0.72)';
+        ctx.font = `10px ${FM}`;
+        ctx.fillText(`${d.path}   ·   ${d.fstype}`, pad, 50);
+
+        // ---- INODE card (left) ----
+        const cardX = pad;
+        const cardY = 72;
+        const cardW = 262;
+        const cardH = H - 72 - 168;
+        ctx.fillStyle = 'rgba(16,26,40,0.92)';
+        this._rr(ctx, cardX, cardY, cardW, cardH, 8);
+        ctx.fill();
+        ctx.strokeStyle = 'rgba(118,220,255,0.55)';
+        ctx.lineWidth = 1.2;
+        this._rr(ctx, cardX, cardY, cardW, cardH, 8);
+        ctx.stroke();
+        ctx.fillStyle = '#8fd8ff';
+        ctx.font = `13px ${FM}`;
+        ctx.fillText(`INODE #${d.inode}`, cardX + 14, cardY + 24);
+        ctx.fillStyle = 'rgba(150,178,206,0.6)';
+        ctx.font = `8px ${FM}`;
+        ctx.fillText('the on-disk metadata object', cardX + 14, cardY + 38);
+        const irow = (label, value, yy, col) => {
+            ctx.fillStyle = 'rgba(127,147,166,0.9)';
+            ctx.font = `8.5px ${FM}`;
+            ctx.fillText(label, cardX + 14, yy);
+            ctx.fillStyle = col || '#dbeafe';
+            ctx.font = `11px ${FM}`;
+            ctx.fillText(value, cardX + 120, yy);
+        };
+        let iy = cardY + 62;
+        const step = Math.max(20, Math.min(26, (cardH - 70) / 9));
+        irow('mode', `${d.mode_str}`, iy, '#a9d4e8'); iy += step;
+        irow('perm', `${d.mode_octal}`, iy); iy += step;
+        irow('owner', `${d.uid}:${d.gid}`, iy); iy += step;
+        irow('links', `${d.nlink}`, iy); iy += step;
+        irow('size', `${d.size_kb} KB`, iy, '#8fd8ff'); iy += step;
+        irow('512-blocks', `${d.blocks_512}`, iy); iy += step;
+        irow('fs blocks', `${d.fs_blocks} × ${d.block_size}B`, iy, '#ffd08d'); iy += step;
+        irow('mtime', `${(d.mtime || '').replace('T', ' ')}`, iy); iy += step;
+        irow('ctime', `${(d.ctime || '').replace('T', ' ')}`, iy);
+
+        // ---- EXTENT TREE (center/right) ----
+        const exX = cardX + cardW + 40;
+        const exW = W - pad - exX;
+        const exY = cardY;
+        ctx.fillStyle = '#ffd08d';
+        ctx.font = `13px ${FM}`;
+        ctx.fillText(`EXTENT TREE · ${d.extent_count} extent${d.extent_count === 1 ? '' : 's'}${d.fragmented ? ' (fragmented)' : ' (contiguous)'}`, exX, exY + 16);
+        ctx.fillStyle = 'rgba(150,178,206,0.6)';
+        ctx.font = `8.5px ${FM}`;
+        ctx.fillText('inode → extent header → [ logical block range ] maps to [ physical block range ]', exX, exY + 30);
+
+        const extents = Array.isArray(d.extents) ? d.extents : [];
+        // Animated connector from inode card to the extent list.
+        const linkY = exY + 52;
+        ctx.strokeStyle = 'rgba(118,220,255,0.5)';
+        ctx.lineWidth = 1.2;
+        ctx.beginPath();
+        ctx.moveTo(cardX + cardW, cardY + 40);
+        ctx.bezierCurveTo(cardX + cardW + 20, cardY + 40, exX - 20, linkY, exX, linkY);
+        ctx.stroke();
+        const cp = (now * 0.0004) % 1;
+        const cpx = (cardX + cardW) + (exX - (cardX + cardW)) * cp;
+        const cpy = (cardY + 40) + (linkY - (cardY + 40)) * cp;
+        ctx.beginPath();
+        ctx.arc(cpx, cpy, 2.4, 0, Math.PI * 2);
+        ctx.fillStyle = 'rgba(150,226,255,0.95)';
+        ctx.fill();
+
+        if (!extents.length) {
+            ctx.fillStyle = 'rgba(255,206,127,0.85)';
+            ctx.font = `10px ${FM}`;
+            ctx.fillText(d.filefrag_available ? 'no extents reported' : 'filefrag not available on host — extent map hidden', exX, linkY + 26);
+        }
+
+        const rowH = 30;
+        const maxRows = Math.max(1, Math.floor((H - 172 - linkY) / rowH));
+        const shown = extents.slice(0, maxRows);
+        const extentRowY = [];
+        shown.forEach((e, i) => {
+            const ry = linkY + 14 + i * rowH;
+            extentRowY.push({ y: ry + rowH / 2, e });
+            const hot = ((now * 0.001) % shown.length | 0) === i;
+            ctx.fillStyle = hot ? 'rgba(40,34,20,0.95)' : 'rgba(20,28,40,0.9)';
+            this._rr(ctx, exX, ry, exW, rowH - 6, 5);
+            ctx.fill();
+            ctx.strokeStyle = hot ? 'rgba(255,206,127,0.9)' : 'rgba(90,120,150,0.4)';
+            ctx.lineWidth = hot ? 1.4 : 0.8;
+            this._rr(ctx, exX, ry, exW, rowH - 6, 5);
+            ctx.stroke();
+            ctx.fillStyle = 'rgba(127,147,166,0.9)';
+            ctx.font = `8px ${FM}`;
+            ctx.fillText(`#${i}`, exX + 8, ry + 15);
+            ctx.fillStyle = '#a9d4e8';
+            ctx.font = `10px ${FM}`;
+            ctx.fillText(`logical ${e.logical}‥${e.logical + e.length - 1}`, exX + 34, ry + 16);
+            ctx.fillStyle = 'rgba(150,178,206,0.7)';
+            ctx.fillText('→', exX + exW * 0.44, ry + 16);
+            ctx.fillStyle = '#ffd08d';
+            ctx.fillText(`physical ${e.physical}‥${e.physical + e.length - 1}`, exX + exW * 0.49, ry + 16);
+            ctx.fillStyle = 'rgba(150,178,206,0.75)';
+            ctx.font = `8.5px ${FM}`;
+            ctx.textAlign = 'right';
+            ctx.fillText(`${e.length} blk${e.flags ? ' · ' + e.flags : ''}`, exX + exW - 10, ry + 15);
+            ctx.textAlign = 'left';
+        });
+        if (extents.length > maxRows) {
+            ctx.fillStyle = 'rgba(150,178,206,0.6)';
+            ctx.font = `8.5px ${FM}`;
+            ctx.fillText(`+ ${extents.length - maxRows} more extents`, exX, linkY + 14 + maxRows * rowH + 4);
+        }
 
-        drawZonePack(leftItems, leftX, true);
-        drawZonePack(rightItems, rightX, false);
-
-        // Mini particle-view orb (reference-style status widget).
-        const orbX = Math.max(84, leftX + 44);
-        const orbY = Math.min(h - 48, topY + 290);
-        this.drawParticleOrb(orbX, orbY, 42, m);
-        this.orbHitArea = { x: orbX, y: orbY, r: 42 };
-
-        // Minimal host-data labels.
-        this.ctx.fillStyle = '#6fa4cf';
-        this.ctx.font = '10px "Share Tech Mono", monospace';
-        this.ctx.fillText(`HOST/DATA FILE ${(m.used_gb || 0).toFixed(0)}GB`, leftX, topY - 26);
-        this.ctx.fillText(`HOST/DATA FILE ${(m.free_gb || 0).toFixed(0)}GB`, leftX, topY - 10);
-        this.ctx.fillText(`HOST/DATA WR ${(m.write_bps || 0).toFixed(0)} B/s`, rightX - 40, topY - 10);
-        this.ctx.fillStyle = 'rgba(164, 183, 209, 0.84)';
-        this.ctx.fillText(`zones sorted by ${String(this.zoneSortMode || 'risk').toUpperCase()}`, leftX, topY - 42);
-
-        const archW = Math.min(620, Math.max(470, Math.floor(w * 0.44)));
-        const archH = 228;
-        const archX = Math.max(24, Math.min(w - archW - 24, rightX - 120));
-        const archY = 108;
-        this.drawFsArchitectureMap(archX, archY, archW, archH, m, zones);
-
-        const selectedZone = zones.find((z) => String(z.id || z.name || '') === String(this.selectedZoneId || ''));
-        if (selectedZone) {
-            const panelW = 328;
-            const panelH = 96;
-            const px = 24;
-            const py = h - panelH - 26;
-            this.drawRoundedRect(px, py, panelW, panelH, 8);
-            this.ctx.fillStyle = 'rgba(9, 14, 22, 0.86)';
-            this.ctx.fill();
-            this.ctx.strokeStyle = 'rgba(132, 164, 202, 0.42)';
-            this.ctx.lineWidth = 1;
-            this.ctx.stroke();
-            this.ctx.fillStyle = '#cfe5ff';
-            this.ctx.font = '11px "Share Tech Mono", monospace';
-            this.ctx.fillText(`ZONE FOCUS: ${String(selectedZone.name || selectedZone.id || 'zone').toUpperCase()}`, px + 12, py + 20);
-            this.ctx.fillStyle = 'rgba(165, 187, 217, 0.9)';
-            this.ctx.font = '9px "Share Tech Mono", monospace';
-            this.ctx.fillText(`used ${Number(selectedZone.used_percent || 0).toFixed(1)}%`, px + 12, py + 40);
-            this.ctx.fillText(`inode ${Number(selectedZone.inode_pressure || 0).toFixed(1)}%`, px + 12, py + 56);
-            this.ctx.fillText(`activity ${Number(selectedZone.activity || 0).toFixed(1)}`, px + 12, py + 72);
-            this.ctx.fillText(`writing blocks ${Number(selectedZone.writing_blocks || 0)}`, px + 170, py + 40);
-            this.ctx.fillText(`free ${(100 - Number(selectedZone.used_percent || 0)).toFixed(1)}%`, px + 170, py + 56);
-            this.ctx.fillText('click card again to clear focus', px + 170, py + 72);
+        // ---- DEVICE TRACK (bottom) ----
+        const devTotal = Number(d.device_total_blocks || 0);
+        const tX = pad;
+        const tW = W - pad * 2;
+        const tY = H - 150;
+        const tH = 30;
+        ctx.fillStyle = 'rgba(150,178,206,0.72)';
+        ctx.font = `10px ${FM}`;
+        ctx.fillText(`BLOCK DEVICE  ·  ${devTotal.toLocaleString()} blocks × ${d.block_size}B`, tX, tY - 8);
+        ctx.fillStyle = 'rgba(22,30,42,0.95)';
+        this._rr(ctx, tX, tY, tW, tH, 5);
+        ctx.fill();
+        ctx.strokeStyle = 'rgba(90,120,150,0.4)';
+        ctx.lineWidth = 0.8;
+        this._rr(ctx, tX, tY, tW, tH, 5);
+        ctx.stroke();
+        if (devTotal > 0) {
+            extents.forEach((e, i) => {
+                const startFrac = e.physical / devTotal;
+                const wFrac = Math.max(0.003, e.length / devTotal);
+                const sxp = tX + tW * startFrac;
+                const swp = Math.max(4, tW * wFrac);
+                ctx.fillStyle = 'rgba(255,206,127,0.95)';
+                this._rr(ctx, sxp, tY + 3, swp, tH - 6, 2);
+                ctx.fill();
+                // connector from extent row to its device position
+                const rowInfo = extentRowY[i];
+                if (rowInfo) {
+                    ctx.strokeStyle = 'rgba(255,206,127,0.28)';
+                    ctx.lineWidth = 0.8;
+                    ctx.beginPath();
+                    ctx.moveTo(exX + 20, rowInfo.y);
+                    ctx.bezierCurveTo(sxp, rowInfo.y + 30, sxp, tY - 20, sxp + swp / 2, tY);
+                    ctx.stroke();
+                }
+            });
+            // position callout
+            const span = d.device_span || {};
+            ctx.fillStyle = 'rgba(150,178,206,0.7)';
+            ctx.font = `8px ${FM}`;
+            ctx.fillText('0', tX, tY + tH + 12);
+            ctx.textAlign = 'right';
+            ctx.fillText(`${devTotal.toLocaleString()}`, tX + tW, tY + tH + 12);
+            ctx.textAlign = 'center';
+            const cxp = tX + tW * ((Number(span.min || 0)) / devTotal);
+            ctx.fillStyle = 'rgba(255,206,127,0.9)';
+            ctx.fillText(`file lives near block ${Number(span.min || 0).toLocaleString()}`, Math.min(tX + tW - 90, Math.max(tX + 90, cxp)), tY + tH + 12);
+            ctx.textAlign = 'left';
         }
+
+        // ---- Explainer ----
+        const ex = [
+            'ext4 stores each file as an inode (fixed metadata: permissions, owner, size, timestamps, block count) plus an extent tree that maps',
+            'contiguous logical block ranges to physical ranges on the device. Extents replaced the old indirect block-pointer scheme, so a large',
+            'contiguous file needs just one extent — fewer seeks, less metadata. Many extents = fragmentation. Bytes live in data blocks; the name',
+            'lives in the parent directory, which is just another file whose data maps filenames → inode numbers.'
+        ];
+        ctx.fillStyle = 'rgba(178,196,214,0.9)';
+        ctx.font = `9.5px ${FM}`;
+        let ey = H - 74;
+        ex.forEach((line) => { ctx.fillText(line, pad, ey); ey += 15; });
+    }
+
+    drawFxWriteback(ctx, W, H) {
+        const FM = '"Share Tech Mono", monospace';
+        const wb = (this.telemetry && this.telemetry.writeback) || {};
+        const sched = (this.telemetry && this.telemetry.io_scheduler) || null;
+        const pad = 26;
+        const now = Date.now();
+        const pulse = 0.5 + 0.5 * Math.sin(now * 0.005);
+
+        const dirty = Number(wb.dirty_mb || 0);
+        const wbMb = Number(wb.writeback_mb || 0);
+        const bgT = Number(wb.bg_thresh_mb || 0);
+        const hardT = Number(wb.thresh_mb || 1);
+
+        // Header.
+        ctx.textAlign = 'left';
+        ctx.fillStyle = '#e8f2f9';
+        ctx.font = `18px ${FM}`;
+        ctx.fillText('WRITEBACK · DIRTY PAGE THROTTLING', pad, 32);
+        ctx.fillStyle = 'rgba(150,178,206,0.72)';
+        ctx.font = `10px ${FM}`;
+        ctx.fillText('balance_dirty_pages(): the kernel slows writers as dirty pages approach vm.dirty_ratio', pad, 50);
+
+        // State pill (top-right).
+        const state = wb.throttling
+            ? { t: 'THROTTLING WRITERS', c: [232, 96, 104] }
+            : (wb.bg_flushing ? { t: 'BACKGROUND FLUSHING', c: [230, 193, 90] } : { t: 'IDLE', c: [103, 190, 224] });
+        ctx.font = `11px ${FM}`;
+        const pw = ctx.measureText(state.t).width + 26;
+        const px = W - pad - pw;
+        const glow = state.t === 'IDLE' ? 0.5 : (0.4 + 0.35 * pulse);
+        ctx.fillStyle = `rgba(${state.c[0]},${state.c[1]},${state.c[2]},${(0.14 + glow * 0.14).toFixed(3)})`;
+        this._rr(ctx, px, 16, pw, 24, 12);
+        ctx.fill();
+        ctx.strokeStyle = `rgba(${state.c[0]},${state.c[1]},${state.c[2]},${glow.toFixed(3)})`;
+        ctx.lineWidth = 1.2;
+        this._rr(ctx, px, 16, pw, 24, 12);
+        ctx.stroke();
+        ctx.fillStyle = `rgb(${state.c[0]},${state.c[1]},${state.c[2]})`;
+        ctx.fillText(state.t, px + 13, 32);
+
+        // ---- Pressure bar: 0 → hard limit, with bg + throttle markers ----
+        const barX = pad;
+        const barY = 74;
+        const barW = W - pad * 2;
+        const barH = 30;
+        ctx.fillStyle = 'rgba(24,34,48,0.9)';
+        this._rr(ctx, barX, barY, barW, barH, 6);
+        ctx.fill();
+        // zone shading: idle (0..bg) / flush (bg..hard) / throttle (>hard is off-scale)
+        const bgX = barX + barW * Math.min(1, bgT / hardT);
+        ctx.fillStyle = 'rgba(230,193,90,0.10)';
+        this._rr(ctx, bgX, barY, (barX + barW) - bgX, barH, 6);
+        ctx.fill();
+        // current fill
+        const fillFrac = Math.max(0.004, Math.min(1, dirty / hardT));
+        const fillCol = wb.throttling ? '232,96,104' : (wb.bg_flushing ? '230,193,90' : '118,220,255');
+        ctx.fillStyle = `rgba(${fillCol},0.85)`;
+        this._rr(ctx, barX, barY, barW * fillFrac, barH, 6);
+        ctx.fill();
+        // markers
+        const marker = (mx, label, col) => {
+            ctx.strokeStyle = col;
+            ctx.lineWidth = 1.4;
+            ctx.beginPath();
+            ctx.moveTo(mx, barY - 4);
+            ctx.lineTo(mx, barY + barH + 4);
+            ctx.stroke();
+            ctx.fillStyle = col;
+            ctx.font = `8.5px ${FM}`;
+            ctx.textAlign = 'center';
+            ctx.fillText(label, mx, barY + barH + 15);
+            ctx.textAlign = 'left';
+        };
+        marker(bgX, `bg flush ${bgT.toFixed(0)}MB`, 'rgba(230,193,90,0.9)');
+        marker(barX + barW - 1, `throttle ${hardT.toFixed(0)}MB`, 'rgba(232,96,104,0.9)');
+        ctx.fillStyle = '#dbeafe';
+        ctx.font = `10px ${FM}`;
+        ctx.fillText(`dirty ${dirty.toFixed(1)} MB  (${Number(wb.pct_of_thresh || 0).toFixed(1)}% of limit)`, barX + 6, barY - 6);
+
+        // ---- Rolling history curve ----
+        const gX = pad;
+        const gY = 138;
+        const gW = W - pad * 2 - 244;
+        const gH = H - gY - 96;
+        ctx.strokeStyle = 'rgba(90,120,150,0.35)';
+        ctx.lineWidth = 1;
+        this._rr(ctx, gX, gY, gW, gH, 6);
+        ctx.stroke();
+        ctx.fillStyle = 'rgba(150,178,206,0.7)';
+        ctx.font = `9px ${FM}`;
+        ctx.fillText('DIRTY / WRITEBACK  (MB, live)', gX + 6, gY - 6);
+
+        const hist = this.wbHistory || [];
+        let maxV = 0.5;
+        hist.forEach((s) => { maxV = Math.max(maxV, s.dirty, s.wb); });
+        maxV *= 1.25;
+        const n = hist.length;
+        const plot = (getV, color, fill) => {
+            if (n < 2) return;
+            ctx.beginPath();
+            hist.forEach((s, i) => {
+                const xx = gX + gW * (i / (n - 1));
+                const yy = gY + gH - gH * Math.min(1, getV(s) / maxV);
+                if (i === 0) ctx.moveTo(xx, yy);
+                else ctx.lineTo(xx, yy);
+            });
+            ctx.strokeStyle = color;
+            ctx.lineWidth = 1.6;
+            ctx.stroke();
+            if (fill) {
+                ctx.lineTo(gX + gW, gY + gH);
+                ctx.lineTo(gX, gY + gH);
+                ctx.closePath();
+                ctx.fillStyle = fill;
+                ctx.fill();
+            }
+        };
+        plot((s) => s.dirty, 'rgba(118,220,255,0.95)', 'rgba(118,220,255,0.10)');
+        plot((s) => s.wb, 'rgba(255,206,127,0.9)', null);
+        // y-axis labels
+        ctx.fillStyle = 'rgba(150,178,206,0.6)';
+        ctx.font = `8px ${FM}`;
+        ctx.fillText(`${maxV.toFixed(1)}`, gX + 4, gY + 10);
+        ctx.fillText('0', gX + 4, gY + gH - 3);
+        // legend
+        ctx.fillStyle = 'rgba(118,220,255,0.95)';
+        ctx.fillText('■ dirty', gX + gW - 96, gY + 10);
+        ctx.fillStyle = 'rgba(255,206,127,0.9)';
+        ctx.fillText('■ writeback', gX + gW - 96, gY + 22);
+
+        // ---- Right stats column ----
+        const sx = gX + gW + 22;
+        const sw = W - pad - sx;
+        let sy = gY + 4;
+        const stat = (label, value, col) => {
+            ctx.fillStyle = 'rgba(127,147,166,0.9)';
+            ctx.font = `8px ${FM}`;
+            ctx.fillText(label, sx, sy);
+            ctx.fillStyle = col || '#e2edf5';
+            ctx.font = `14px ${FM}`;
+            ctx.fillText(value, sx, sy + 16);
+            sy += 34;
+        };
+        stat('DIRTY PAGES', `${dirty.toFixed(1)} MB`, '#8fd8ff');
+        stat('IN WRITEBACK', `${wbMb.toFixed(1)} MB`, '#ffd08d');
+        stat('% OF HARD LIMIT', `${Number(wb.pct_of_thresh || 0).toFixed(1)}%`, wb.throttling ? '#ff9ca6' : '#8fd8ff');
+        stat('BG FLUSH THRESHOLD', `${bgT.toFixed(0)} MB`, '#e6c15a');
+        stat('THROTTLE LIMIT', `${hardT.toFixed(0)} MB`, '#ff9ca6');
+        stat('vm.dirty_ratio', `${wb.dirty_ratio || 0}% / bg ${wb.dirty_background_ratio || 0}%`, '#cfe0f0');
+        stat('DIRTYABLE MEM', `${Number(wb.dirtyable_mb || 0).toFixed(0)} MB`, '#cfe0f0');
+        if (sched) stat('I/O SCHEDULER', `${sched.scheduler} · ${sched.device}`, '#a9d4e8');
+
+        // ---- Explainer ----
+        const ex = [
+            'The page cache absorbs writes instantly; dirty pages are flushed to disk later. Two thresholds govern this control loop:',
+            'at vm.dirty_background_ratio the kernel wakes flusher threads (async, invisible); at vm.dirty_ratio it forces the writing',
+            'process itself to block in balance_dirty_pages() until pages drain — a built-in feedback brake so RAM cannot fill with dirty data.',
+            'Thresholds here are computed over dirtyable memory (≈ available + dirty), so they track the real kernel budget closely.'
+        ];
+        ctx.fillStyle = 'rgba(178,196,214,0.9)';
+        ctx.font = `10px ${FM}`;
+        let ey = H - 74;
+        ex.forEach((line) => { ctx.fillText(line, pad, ey); ey += 16; });
     }
 
     animate() {
@@ -1017,6 +1767,8 @@ class FilesystemMapVisualization {
             clearInterval(this.telemetryInterval);
             this.telemetryInterval = null;
         }
+        this.closeMountDrilldown();
+        this.closeFx();
         if (this.container) {
             this.container.style.display = 'none';
             this.container.style.visibility = 'hidden';
diff --git a/static/js/network-stack.js b/static/js/network-stack.js
index 5d8ae2f..6b904fe 100644
--- a/static/js/network-stack.js
+++ b/static/js/network-stack.js
@@ -248,6 +248,14 @@ class NetworkStackVisualization {
 
         this.mouseMoveHandler = (event) => this.onMouseMove(event);
         this.renderer.domElement.addEventListener('mousemove', this.mouseMoveHandler);
+        this.clickHandler = (event) => this.onCanvasClick(event);
+        this.renderer.domElement.addEventListener('click', this.clickHandler);
+        this.keyHandler = (event) => {
+            if (event.key !== 'Escape') return;
+            if (this.bbrOpen) this.closeBbrOverlay();
+            else if (this.drillLayerId) this.closeLayerDrilldown();
+        };
+        window.addEventListener('keydown', this.keyHandler);
 
         this.resizeHandler = () => this.onResize();
         window.addEventListener('resize', this.resizeHandler);
@@ -1040,70 +1048,11 @@ class NetworkStackVisualization {
         arrayCard.appendChild(matrix);
         kpiBar.appendChild(arrayCard);
 
-        // Top-left reference header: "ARRAY OUTPUT PATTERN BIAS / PANEL" with an
-        // A-badge and a compact pattern matrix of code tiles that light up with
-        // live stack activity (a sweeping scan column + activity-locked tiles).
-        const header = document.createElement('div');
-        header.style.cssText = `
-            position: absolute;
-            left: 14px;
-            top: 14px;
-            z-index: 1001;
-            pointer-events: none;
-            display: flex;
-            flex-direction: column;
-            gap: 5px;
-            background: rgba(13, 18, 28, 0.86);
-            border: 1px solid rgba(108, 122, 142, 0.34);
-            border-radius: 6px;
-            padding: 7px 9px 8px;
-            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
-            font-family: 'Share Tech Mono', monospace;
-        `;
-        this.container.appendChild(header);
-        this.overlayNodes.push(header);
-        this.patternHeaderNode = header;
-
-        const hTop = document.createElement('div');
-        hTop.style.cssText = 'display:flex; align-items:flex-start; gap:8px;';
-        const hTitle = document.createElement('div');
-        hTitle.style.cssText = 'display:flex; flex-direction:column; gap:1px;';
-        const hMicro = document.createElement('div');
-        hMicro.style.cssText = 'font-size:7px; letter-spacing:0.6px; color:#5f7484;';
-        hMicro.textContent = 'OBS.06';
-        const hMain = document.createElement('div');
-        hMain.style.cssText = 'font-size:11px; letter-spacing:0.55px; color:#cdd6e0;';
-        hMain.textContent = 'ARRAY OUTPUT PATTERN BIAS';
-        const hSub = document.createElement('div');
-        hSub.style.cssText = 'font-size:8px; letter-spacing:0.5px; color:#7f8fa2;';
-        hSub.textContent = 'PANEL 06 · INDUCTION PATTERN GROUP 43-65';
-        hTitle.appendChild(hMicro);
-        hTitle.appendChild(hMain);
-        hTitle.appendChild(hSub);
-        const hBadge = document.createElement('div');
-        hBadge.style.cssText = 'flex:none; margin-left:auto; padding:3px 7px; background:rgba(103,190,224,0.16); border:1px solid rgba(103,190,224,0.5); border-radius:3px; color:#9bd4f2; font-size:14px; letter-spacing:1px;';
-        hBadge.textContent = 'A7';
-        hTop.appendChild(hTitle);
-        hTop.appendChild(hBadge);
-
-        const PAT_CODES = [
-            'MTN', 'NEL', 'SIN', 'DSP', 'DIL', 'LAW', 'BAB', 'SCI', 'COM', 'LNK', 'GAP', 'COL',
-            'GET', 'VPM', 'JET', 'IDU', 'SUB', 'DMP', 'DWN', 'RUN', 'SYN', 'HEP', 'NET', 'BUF'
-        ];
-        const PAT_COLS = 12;
-        const patGrid = document.createElement('div');
-        patGrid.style.cssText = `display:grid; grid-template-columns: repeat(${PAT_COLS}, 1fr); gap:2px;`;
+        // NOTE: the old top-left "ARRAY OUTPUT PATTERN BIAS" panel was removed —
+        // it rendered synthetic code tiles (not real telemetry) and only added
+        // visual noise. References are nulled so updatePatternMatrix() no-ops.
+        this.patternHeaderNode = null;
         this.patternTiles = [];
-        PAT_CODES.forEach((code) => {
-            const tile = document.createElement('div');
-            tile.style.cssText = 'font-size:6.5px; letter-spacing:0.2px; text-align:center; color:#7b8a9a; background:rgba(34,44,56,0.6); border:1px solid rgba(80,96,112,0.28); border-radius:1px; padding:2px 1px; transition:background 180ms ease, color 180ms ease;';
-            tile.textContent = code;
-            patGrid.appendChild(tile);
-            this.patternTiles.push(tile);
-        });
-
-        header.appendChild(hTop);
-        header.appendChild(patGrid);
 
         // One aligned stack axis: each layer is a single row spanning the scene —
         // [health dot + name] on the left, the live lane in the middle, and the
@@ -1195,6 +1144,10 @@ class NetworkStackVisualization {
             mainline.appendChild(name);
             row.appendChild(code);
             row.appendChild(mainline);
+            row.style.pointerEvents = 'auto';
+            row.style.cursor = 'pointer';
+            row.title = 'Click to inspect layer';
+            row.addEventListener('click', () => this.openLayerDrilldown(spec.id));
             layersPanel.appendChild(row);
             this.layerRows[spec.id] = { row, dot, name };
         });
@@ -1269,11 +1222,8 @@ class NetworkStackVisualization {
         this.layerSpectra = {};
         this.chainModules = {};
         this.layerHeadline = {};
-        this.chainWidth = 452;
-        this.chainRight = 20;
-        const SPEC_W = 78;
-        const SPEC_H = 40;
-        const SPEC_N = 22;
+        this.chainWidth = 158;
+        this.chainRight = 22;
 
         // Small cyan "›" connector glyph placed between chain modules.
         const makeSep = () => {
@@ -1315,129 +1265,44 @@ class NetworkStackVisualization {
                 nic: 'rx+tx errors'
             };
             const numBlock = document.createElement('div');
-            numBlock.style.cssText = 'flex:none; width:70px; display:flex; flex-direction:column; gap:0;';
+            numBlock.style.cssText = 'flex:none; width:96px; display:flex; flex-direction:column; gap:1px;';
             const numCap = document.createElement('div');
-            numCap.style.cssText = 'font-size:7px; letter-spacing:0.5px; color:#6f8597; white-space:nowrap;';
-            numCap.textContent = `ARRAY 0${idx + 1}`;
+            numCap.style.cssText = 'font-size:7px; letter-spacing:0.6px; color:#6f8597; white-space:nowrap;';
+            numCap.textContent = spec.name;
             const numVal = document.createElement('div');
-            numVal.style.cssText = 'font-size:16px; line-height:1.05; letter-spacing:0.3px; color:#cfe6f2; white-space:nowrap;';
+            numVal.style.cssText = 'font-size:19px; line-height:1.05; letter-spacing:0.3px; color:#cfe6f2; white-space:nowrap;';
             numVal.textContent = '--';
             const numSub = document.createElement('div');
-            numSub.style.cssText = 'font-size:6.5px; letter-spacing:0.3px; color:#728697; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;';
+            numSub.style.cssText = 'font-size:8px; letter-spacing:0.3px; color:#8ba0b2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;';
             numSub.textContent = metricCaption[spec.id] || '';
             numBlock.appendChild(numCap);
             numBlock.appendChild(numVal);
             numBlock.appendChild(numSub);
 
-            // 2) EQ + spectrogram block.
-            const eqBlock = document.createElement('div');
-            eqBlock.style.cssText = 'flex:none; display:flex; align-items:stretch; gap:3px; background:rgba(13,18,28,0.78); border:1px solid rgba(96,110,128,0.34); border-radius:2px; padding:2px;';
-            const eqLabel = document.createElement('div');
-            eqLabel.style.cssText = 'font-size:7px; letter-spacing:0.5px; color:#8391a1; writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg); align-self:center;';
-            eqLabel.textContent = 'EQ';
-            const eqCol = document.createElement('div');
-            eqCol.style.cssText = 'display:flex; flex-direction:column; gap:1px;';
-            const spectro = document.createElementNS(svgNS, 'svg');
-            spectro.setAttribute('width', String(SPEC_W));
-            spectro.setAttribute('height', String(SPEC_H));
-            // Explicit inline px size overrides the global `svg { width:100%; height:100vh }`
-            // rule in main.css; without this the SVG would blow up to full screen.
-            spectro.style.cssText = `display:block; width:${SPEC_W}px; height:${SPEC_H}px; flex:none; background:rgba(6,10,16,0.85);`;
-            const bars = [];
-            const barW = SPEC_W / SPEC_N;
-            for (let i = 0; i < SPEC_N; i++) {
-                const r = document.createElementNS(svgNS, 'rect');
-                r.setAttribute('x', (i * barW).toFixed(2));
-                r.setAttribute('width', Math.max(1, barW - 0.8).toFixed(2));
-                r.setAttribute('y', String(SPEC_H - 1));
-                r.setAttribute('height', '1');
-                r.setAttribute('fill', 'rgba(103, 190, 224, 0.55)');
-                spectro.appendChild(r);
-                bars.push(r);
-            }
-            const eqFoot = document.createElement('div');
-            eqFoot.style.cssText = 'display:flex; justify-content:space-between; font-size:7px; color:#5f7484; letter-spacing:1px;';
-            eqFoot.innerHTML = '<span>‹</span><span>›</span>';
-            eqCol.appendChild(spectro);
-            eqCol.appendChild(eqFoot);
-            eqBlock.appendChild(eqLabel);
-            eqBlock.appendChild(eqCol);
-
-            // 3) INTENSITY — big number on a circular dial.
+            // 2) INTENSITY — big number on a circular dial (real layer activity).
             const intBlock = document.createElement('div');
             intBlock.style.cssText = 'flex:none; display:flex; flex-direction:column; align-items:center;';
-            intBlock.appendChild(makeHeader('INTENSITY'));
+            intBlock.appendChild(makeHeader('ACTIVITY'));
             const dial = document.createElement('div');
-            dial.style.cssText = 'position:relative; width:34px; height:34px; border-radius:50%; background:conic-gradient(rgba(103,190,224,0.85) 40deg, rgba(34,44,56,0.7) 0); box-shadow:0 0 0 1px rgba(96,110,128,0.4) inset; display:flex; align-items:center; justify-content:center;';
+            dial.style.cssText = 'position:relative; width:38px; height:38px; border-radius:50%; background:conic-gradient(rgba(103,190,224,0.85) 40deg, rgba(34,44,56,0.7) 0); box-shadow:0 0 0 1px rgba(96,110,128,0.4) inset; display:flex; align-items:center; justify-content:center;';
             const dialNum = document.createElement('div');
-            dialNum.style.cssText = 'font-size:12px; color:#dbe7f0; letter-spacing:0.3px;';
+            dialNum.style.cssText = 'font-size:13px; color:#dbe7f0; letter-spacing:0.3px;';
             dialNum.textContent = '0';
             dial.appendChild(dialNum);
             intBlock.appendChild(dial);
 
-            // 4) LF BIAS ×2 — Lissajous "woven" pattern boxes that morph with load.
-            const biasPaths = [];
-            const makeBias = () => {
-                const col = document.createElement('div');
-                col.style.cssText = 'flex:none; display:flex; flex-direction:column; align-items:center;';
-                col.appendChild(makeHeader('LF BIAS'));
-                const svg = document.createElementNS(svgNS, 'svg');
-                svg.setAttribute('width', '32');
-                svg.setAttribute('height', '32');
-                svg.setAttribute('viewBox', '0 0 32 32');
-                svg.style.cssText = 'display:block; width:32px; height:32px; flex:none; background:rgba(10,14,22,0.7); border:1px solid rgba(96,110,128,0.3);';
-                const p = document.createElementNS(svgNS, 'path');
-                p.setAttribute('fill', 'none');
-                p.setAttribute('stroke', 'rgba(168,200,214,0.7)');
-                p.setAttribute('stroke-width', '0.8');
-                svg.appendChild(p);
-                col.appendChild(svg);
-                biasPaths.push(p);
-                return col;
-            };
-            const bias1 = makeBias();
-            const bias2 = makeBias();
-
-            // 5) INDUCTION RESPONSE — labelled horizontal bars (CT/HT/AM/FR style).
-            const respBlock = document.createElement('div');
-            respBlock.style.cssText = 'flex:1 1 auto; min-width:84px; display:flex; flex-direction:column;';
-            respBlock.appendChild(makeHeader('INDUCTION RESPONSE'));
-            const respBars = [];
-            const respLabels = ['CT', 'HT', 'AM', 'FR'];
-            respLabels.forEach((rl) => {
-                const r = document.createElement('div');
-                r.style.cssText = 'display:flex; align-items:center; gap:4px; margin-bottom:1px;';
-                const lab = document.createElement('div');
-                lab.style.cssText = 'font-size:6.5px; color:#6f8597; width:13px; flex:none;';
-                lab.textContent = rl;
-                const track = document.createElement('div');
-                track.style.cssText = 'position:relative; flex:1 1 auto; height:3px; background:rgba(40,52,64,0.5);';
-                const fill = document.createElement('div');
-                fill.style.cssText = 'position:absolute; left:0; top:0; bottom:0; width:20%; background:rgba(103,190,224,0.7); transition:width 220ms ease, background 220ms ease;';
-                track.appendChild(fill);
-                r.appendChild(lab);
-                r.appendChild(track);
-                respBlock.appendChild(r);
-                respBars.push(fill);
-            });
-
+            // Clean per-layer readout: real metric number + one activity dial.
+            chain.style.pointerEvents = 'auto';
+            chain.style.cursor = 'pointer';
+            chain.title = 'Click to inspect layer';
+            chain.addEventListener('click', () => this.openLayerDrilldown(spec.id));
             chain.appendChild(numBlock);
             chain.appendChild(makeSep());
-            chain.appendChild(eqBlock);
-            chain.appendChild(makeSep());
             chain.appendChild(intBlock);
-            chain.appendChild(makeSep());
-            chain.appendChild(bias1);
-            chain.appendChild(bias2);
-            chain.appendChild(makeSep());
-            chain.appendChild(respBlock);
             chipLayer.appendChild(chain);
 
-            // metricChips is still read by setMetricChip(); point it at numVal so
-            // the headline updates and the left-row health dot keeps working.
             this.metricChips[spec.id] = null;
-            this.chainModules[spec.id] = { numCap, numVal, dialArc: dial, dialNum, biasPaths, respBars };
-            this.layerSpectra[spec.id] = { bars, hist: new Array(SPEC_N).fill(0), h: SPEC_H };
+            this.chainModules[spec.id] = { numCap, numVal, dialArc: dial, dialNum };
         });
 
         // Left operation-mode rail (reference style). The active cell follows the
@@ -1655,6 +1520,92 @@ class NetworkStackVisualization {
         this.overlayNodes.push(layerTip);
         this.layerTooltipNode = layerTip;
 
+        // ---- Per-layer drill-down overlay (click a layer to inspect) ----------
+        // A centered modal with a scrim: real metrics for the layer + a short
+        // "what this layer does" explainer, mirroring the crypto/scheduler
+        // overlays so the whole site reads consistently.
+        const drillScrim = document.createElement('div');
+        drillScrim.style.cssText = `
+            position: absolute;
+            inset: 0;
+            z-index: 1200;
+            display: none;
+            pointer-events: auto;
+            background: radial-gradient(ellipse at 50% 46%, rgba(8,12,20,0.62) 0%, rgba(6,9,15,0.86) 62%, rgba(4,6,11,0.94) 100%);
+            backdrop-filter: blur(1.5px);
+            font-family: 'Share Tech Mono', monospace;
+        `;
+        const drillPanel = document.createElement('div');
+        drillPanel.style.cssText = `
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: min(680px, 78vw);
+            background: rgba(11, 16, 26, 0.96);
+            border: 1px solid rgba(103, 190, 224, 0.4);
+            border-radius: 8px;
+            box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
+            color: #cdd6e0;
+            padding: 0;
+            overflow: hidden;
+        `;
+        drillScrim.appendChild(drillPanel);
+        this.container.appendChild(drillScrim);
+        this.overlayNodes.push(drillScrim);
+        this.drillScrim = drillScrim;
+        this.drillPanel = drillPanel;
+        // Click on the scrim (outside the panel) closes the overlay.
+        drillScrim.addEventListener('click', (e) => {
+            if (e.target === drillScrim) this.closeLayerDrilldown();
+        });
+
+        // ---- TCP BBR path-model overlay --------------------------------------
+        const bbrScrim = document.createElement('div');
+        bbrScrim.style.cssText = drillScrim.style.cssText;
+        bbrScrim.style.display = 'none';
+        const bbrPanel = document.createElement('div');
+        bbrPanel.style.cssText = drillPanel.style.cssText;
+        bbrPanel.style.width = 'min(880px, 88vw)';
+        bbrScrim.appendChild(bbrPanel);
+        this.container.appendChild(bbrScrim);
+        this.overlayNodes.push(bbrScrim);
+        this.bbrScrim = bbrScrim;
+        this.bbrPanel = bbrPanel;
+        bbrScrim.addEventListener('click', (e) => {
+            if (e.target === bbrScrim) this.closeBbrOverlay();
+        });
+
+        // Entry pill for the BBR model, sitting under the flow header.
+        const bbrPill = document.createElement('div');
+        bbrPill.style.cssText = `
+            position: absolute;
+            left: 50%;
+            top: 138px;
+            transform: translateX(-50%);
+            z-index: 1002;
+            cursor: pointer;
+            pointer-events: auto;
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 10px;
+            letter-spacing: 1px;
+            color: #a9d4e8;
+            background: rgba(103,190,224,0.12);
+            border: 1px solid rgba(103,190,224,0.45);
+            border-radius: 14px;
+            padding: 4px 14px;
+            white-space: nowrap;
+            transition: background 160ms ease;
+        `;
+        bbrPill.textContent = '▸ TCP BBR · PATH MODEL';
+        bbrPill.title = 'Open the BBR bottleneck-bandwidth + min-RTT model';
+        bbrPill.addEventListener('mouseenter', () => { bbrPill.style.background = 'rgba(103,190,224,0.22)'; });
+        bbrPill.addEventListener('mouseleave', () => { bbrPill.style.background = 'rgba(103,190,224,0.12)'; });
+        bbrPill.addEventListener('click', () => this.openBbrOverlay());
+        this.container.appendChild(bbrPill);
+        this.overlayNodes.push(bbrPill);
+        this.bbrPillNode = bbrPill;
+
         // Grouped "VIEW" control rail: the four view toggles live in one compact
         // card (clearly a control surface, distinct from the read-only metric
         // chips) instead of four separate floating pills stacked down the edge.
@@ -2242,7 +2193,9 @@ class NetworkStackVisualization {
             if (window.kernelContextMenu) {
                 window.kernelContextMenu.deactivateViews();
             } else {
-                this.deactivate();
+                // Standalone page (e.g. /linux-network-subsystem): go home like
+                // the other subsystem pages instead of leaving a blank view.
+                window.location.assign('/');
             }
         };
         this.container.appendChild(exitBtn);
@@ -2455,13 +2408,13 @@ class NetworkStackVisualization {
         // Headline numbers shown on each chain's NUMBER block (the beam target):
         // the single most representative live figure for that layer.
         this.layerHeadline = {
-            userspace: `${m.userspace?.active_processes ?? 0}p`,
+            userspace: `${m.userspace?.active_processes ?? 0}`,
             socket: `${m.socket_api?.established ?? 0}`,
-            tcp: `${rttMs.toFixed(0)}ms`,
+            tcp: `${rttMs.toFixed(1)} ms`,
             ip: `${(safeNum(m.ip?.in_packets_per_sec ?? 0) + safeNum(m.ip?.out_packets_per_sec ?? 0)).toFixed(0)}/s`,
             netfilter: `${dropPerSec.toFixed(0)}/s`,
-            driver: `${driverTxQ}q`,
-            nic: `${nicErrTotal}e`
+            driver: `${driverTxQ}`,
+            nic: `${nicErrTotal}`
         };
 
         if (this.modeStatValue) {
@@ -2624,6 +2577,9 @@ class NetworkStackVisualization {
                 this.packetSpeed = Math.max(1.1, Math.min(5.2, Number(data.signals?.packet_speed ?? 2.2)));
                 this.updatePacketColorByFlow();
                 this.updateTelemetryUI();
+                this.recordBbrSample();
+                if (this.drillLayerId) this.openLayerDrilldown(this.drillLayerId);
+                if (this.bbrOpen) this.openBbrOverlay();
                 if (this.telemetryErrorNode) {
                     this.telemetryErrorNode.textContent = '';
                 }
@@ -2862,7 +2818,7 @@ class NetworkStackVisualization {
             ).replace('\n', ' ')).join(' | ')
             : '';
         const appendSignals = (body) => (
-            `${body}${signalLine ? `<br><span style="color:#90a8bc">branches: ${signalLine}</span>` : ''}`
+            `${body}${signalLine ? `<br><span style="color:#90a8bc">branches: ${signalLine}</span>` : ''}<br><span style="color:#6f8597; font-size:9px; letter-spacing:0.5px;">click to inspect →</span>`
         );
 
         if (layerId === 'userspace') {
@@ -2889,6 +2845,350 @@ class NetworkStackVisualization {
         return appendSignals(`<strong>${layerId}</strong>`);
     }
 
+    // Static, teachable explainer for each stack layer (English).
+    getLayerDrillInfo(layerId) {
+        const info = {
+            userspace: {
+                title: 'USERSPACE',
+                role: 'process → syscall',
+                what: 'Applications talk to the network through socket syscalls (send/recv, sendmsg, epoll/poll). The kernel copies bytes between user-space buffers and the socket queues, then wakes the process when data is ready.',
+                watch: 'Many processes with rising downstream RTT usually means apps are blocked on the network, not the CPU.',
+                subsystems: ['socket() / connect()', 'epoll / poll', 'sendmsg / recvmsg', 'SO_* options']
+            },
+            socket: {
+                title: 'SOCKET API',
+                role: 'socket layer',
+                what: 'The socket layer maps a file descriptor to a protocol socket (struct sock). It owns the accept queue for listeners and the send/receive buffers, applying backpressure when buffers fill.',
+                watch: 'Accept-queue overflow and buffer exhaustion surface as connection resets and retransmits.',
+                subsystems: ['struct sock / sk_buff', 'accept backlog', 'sndbuf / rcvbuf', 'SO_REUSEPORT']
+            },
+            tcp: {
+                title: 'TCP / UDP',
+                role: 'transport',
+                what: 'TCP keeps a congestion window (cwnd) and estimates RTT to pace how fast it sends; lost or reordered segments trigger retransmission and window reduction. UDP is stateless — no cwnd, no retransmit.',
+                watch: 'cwnd collapsing while RTT and retrans/s climb is the classic signature of congestion or loss on the path — see the BBR model view.',
+                subsystems: ['cwnd / ssthresh', 'RTT / RTO estimator', 'SACK / reordering', 'congestion control']
+            },
+            ip: {
+                title: 'IP',
+                role: 'network layer',
+                what: 'The IP layer makes the routing decision (FIB lookup), handles fragmentation/reassembly and TTL for every datagram before passing it up or down the stack.',
+                watch: 'in/out packets per second is the raw forwarding load; InDiscards point at routing or buffer problems.',
+                subsystems: ['FIB / routing table', 'fragmentation / TTL', 'ICMP', 'IPv4 / IPv6']
+            },
+            netfilter: {
+                title: 'NETFILTER',
+                role: 'firewall / NAT',
+                what: 'Netfilter hooks run at PREROUTING…POSTROUTING to filter (firewall), rewrite (NAT) and track connections (conntrack). Stateful policy decisions and drops happen here.',
+                watch: 'Rising drop/s and drop-ratio means packets are being filtered or conntrack is saturating.',
+                subsystems: ['iptables / nftables', 'conntrack (NEW/ESTABLISHED)', 'NAT / masquerade', 'hook chains']
+            },
+            driver: {
+                title: 'DRIVER',
+                role: 'device driver',
+                what: 'The NIC driver moves packets between the kernel and hardware over DMA ring buffers and TX queues. Incoming frames raise an IRQ, then NAPI/softirq polls the ring to drain them in batches.',
+                watch: 'A growing TX queue or driver drops means the hardware / qdisc can’t keep up with the send rate.',
+                subsystems: ['DMA rings', 'NAPI / softirq', 'TX queue / qdisc', 'GRO / GSO offload']
+            },
+            nic: {
+                title: 'NIC',
+                role: 'wire / PHY',
+                what: 'The physical (or virtio) interface serializes frames onto the wire and receives them back. Hardware-level CRC / RX / TX errors and drops are counted here.',
+                watch: 'Non-zero rx/tx errors point at cabling, duplex mismatch or a struggling virtual NIC — below the software stack.',
+                subsystems: ['PHY / MAC', 'link speed / duplex', 'RX/TX error counters', 'virtio-net (cloud)']
+            }
+        };
+        return info[layerId] || null;
+    }
+
+    // Real live metrics for the layer, pulled from the latest telemetry frame.
+    getLayerDrillMetrics(layerId) {
+        const m = this.telemetryData?.layer_metrics || {};
+        const n = (v) => (Number.isFinite(Number(v)) ? Number(v) : 0);
+        const rows = {
+            userspace: () => [['active processes', n(m.userspace?.active_processes)]],
+            socket: () => [
+                ['established', n(m.socket_api?.established)],
+                ['active sockets', n(m.socket_api?.active_sockets)],
+                ['retransmits/s', n(m.socket_api?.retransmits_per_sec)]
+            ],
+            tcp: () => [
+                ['cwnd (segments)', n(m.tcp_udp?.cwnd)],
+                ['rtt', `${n(m.tcp_udp?.rtt_ms).toFixed(1)} ms`],
+                ['retrans/s', n(m.tcp_udp?.retrans_per_sec)],
+                ['tx queue', n(m.tcp_udp?.tx_queue)]
+            ],
+            ip: () => [
+                ['packets in/s', n(m.ip?.in_packets_per_sec).toFixed(0)],
+                ['packets out/s', n(m.ip?.out_packets_per_sec).toFixed(0)],
+                ['drop/s', n(m.ip?.drop_per_sec)],
+                ['drop ratio', `${(n(m.ip?.drop_ratio) * 100).toFixed(2)}%`]
+            ],
+            netfilter: () => [
+                ['drop/s', n(m.netfilter?.drop_per_sec)],
+                ['drop ratio', `${(n(m.netfilter?.drop_ratio) * 100).toFixed(2)}%`]
+            ],
+            driver: () => [
+                ['iface', m.driver?.iface ?? 'n/a'],
+                ['tx queue', n(m.driver?.tx_queue)],
+                ['drops/s', n(m.driver?.drops_per_sec)],
+                ['rx', `${n(m.driver?.rx_mb_s).toFixed(2)} MB/s`],
+                ['tx', `${n(m.driver?.tx_mb_s).toFixed(2)} MB/s`]
+            ],
+            nic: () => [
+                ['iface', m.nic?.iface ?? 'n/a'],
+                ['rx errors', n(m.nic?.rx_errors)],
+                ['tx errors', n(m.nic?.tx_errors)],
+                ['drops total', n(m.nic?.drops_total)]
+            ]
+        };
+        return (rows[layerId] || (() => []))();
+    }
+
+    openLayerDrilldown(layerId) {
+        if (!this.drillScrim || !this.drillPanel) return;
+        const info = this.getLayerDrillInfo(layerId);
+        if (!info) return;
+        this.drillLayerId = layerId;
+        const act = Math.round(Math.max(0, Math.min(1, Number(this.layerActivity[layerId] ?? 0))) * 100);
+        const actCol = act > 80 ? 'rgba(232,96,104,0.95)' : (act > 55 ? 'rgba(230,193,90,0.95)' : 'rgba(103,190,224,0.95)');
+        const metrics = this.getLayerDrillMetrics(layerId);
+        const metricCells = metrics.map(([k, v]) => `
+            <div style="background:rgba(8,12,20,0.7); border:1px solid rgba(96,110,128,0.32); border-radius:4px; padding:8px 10px;">
+                <div style="font-size:8.5px; letter-spacing:0.6px; color:#7f93a6; text-transform:uppercase;">${k}</div>
+                <div style="font-size:20px; color:#e2edf5; line-height:1.15; margin-top:2px;">${v}</div>
+            </div>`).join('');
+        const subs = info.subsystems.map(s =>
+            `<span style="display:inline-block; margin:2px 4px 2px 0; padding:2px 7px; background:rgba(103,190,224,0.12); border:1px solid rgba(103,190,224,0.34); border-radius:10px; font-size:9px; color:#a9d4e8;">${s}</span>`
+        ).join('');
+        const html = `
+            <div style="display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid rgba(103,190,224,0.25); background:linear-gradient(90deg, rgba(103,190,224,0.10), rgba(103,190,224,0));">
+                <div style="flex:1 1 auto;">
+                    <div style="font-size:8px; letter-spacing:1.4px; color:#6f8597;">STACK LAYER · ${info.role.toUpperCase()}</div>
+                    <div style="font-size:20px; letter-spacing:1.2px; color:#e8f2f9;">${info.title}</div>
+                </div>
+                <div style="flex:none; text-align:right;">
+                    <div style="font-size:8px; letter-spacing:1px; color:#6f8597;">LIVE ACTIVITY</div>
+                    <div style="font-size:22px; color:${actCol};">${act}<span style="font-size:11px; color:#7f93a6;">%</span></div>
+                </div>
+                <div class="ns-ov-close" style="flex:none; cursor:pointer; width:26px; height:26px; border:1px solid rgba(160,170,190,0.4); border-radius:4px; display:flex; align-items:center; justify-content:center; color:#c8ccd4; font-size:14px;">✕</div>
+            </div>
+            <div style="padding:14px 18px 16px;">
+                <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:8px; margin-bottom:14px;">${metricCells}</div>
+                <div style="font-size:11.5px; line-height:1.6; color:#c2cede;">${info.what}</div>
+                <div style="margin-top:10px; font-size:10.5px; line-height:1.55; color:#9db6c8; border-left:2px solid rgba(230,193,90,0.6); padding-left:9px;"><span style="color:#e6c15a; letter-spacing:0.5px;">WATCH · </span>${info.watch}</div>
+                <div style="margin-top:12px;">
+                    <div style="font-size:8px; letter-spacing:1px; color:#6f8597; margin-bottom:4px;">KEY SUBSYSTEMS</div>
+                    ${subs}
+                </div>
+                ${layerId === 'tcp' ? `<div class="ns-drill-bbr" style="margin-top:14px; display:inline-block; cursor:pointer; font-size:10px; letter-spacing:0.8px; color:#a9d4e8; background:rgba(103,190,224,0.12); border:1px solid rgba(103,190,224,0.45); border-radius:14px; padding:5px 14px;">▸ OPEN TCP BBR PATH MODEL</div>` : ''}
+            </div>`;
+        window.setSafeHtml(this.drillPanel, html);
+        const closeBtn = this.drillPanel.querySelector('.ns-ov-close');
+        if (closeBtn) closeBtn.addEventListener('click', () => this.closeLayerDrilldown());
+        const bbrBtn = this.drillPanel.querySelector('.ns-drill-bbr');
+        if (bbrBtn) bbrBtn.addEventListener('click', () => { this.closeLayerDrilldown(); this.openBbrOverlay(); });
+        this.drillScrim.style.display = 'block';
+        if (this.layerTooltipNode) this.layerTooltipNode.style.display = 'none';
+    }
+
+    closeLayerDrilldown() {
+        this.drillLayerId = null;
+        if (this.drillScrim) this.drillScrim.style.display = 'none';
+    }
+
+    // Push the latest BBR sample into a rolling window (used to estimate the
+    // max-bandwidth and min-RTT filters when the CC isn't BBR itself).
+    recordBbrSample() {
+        const b = this.telemetryData?.bbr;
+        if (!b) return;
+        if (!this.bbrHist) this.bbrHist = [];
+        this.bbrHist.push({
+            t: Date.now(),
+            rtt: Number(b.rtt_ms) || 0,
+            dr: Number(b.delivery_rate_mbps) || 0
+        });
+        if (this.bbrHist.length > 160) this.bbrHist.shift();
+    }
+
+    // Build the BBR path model: RTprop (min RTT), BtlBw (max delivery rate),
+    // BDP and inflight. Uses the kernel's real minrtt + a windowed max of the
+    // observed delivery rate (or BBR's own bw/mrtt when BBR is the CC).
+    computeBbrModel() {
+        const b = this.telemetryData?.bbr || {};
+        const hist = this.bbrHist || [];
+        const now = Date.now();
+        // RTprop over a ~10s window (BBR's min-RTT filter horizon).
+        const recentR = hist.filter(s => now - s.t <= 10000).map(s => s.rtt).filter(v => v > 0);
+        const histMinRtt = recentR.length ? Math.min(...recentR) : 0;
+        // BtlBw over a shorter window (BBR's max-bw filter ≈ 10 RTTs).
+        const recentD = hist.slice(-40).map(s => s.dr).filter(v => v > 0);
+        const histMaxBw = recentD.length ? Math.max(...recentD) : 0;
+        const active = !!b.bbr_active;
+        const rtprop = active ? (Number(b.bbr_mrtt_ms) || 0)
+            : Math.min(...[Number(b.min_rtt_ms) || Infinity, histMinRtt || Infinity].filter(isFinite)) || (Number(b.rtt_ms) || 0);
+        const btlbw = active ? (Number(b.bbr_bw_mbps) || 0)
+            : Math.max(Number(b.delivery_rate_mbps) || 0, histMaxBw);
+        const mss = Number(b.mss) || 1448;
+        const cwnd = Number(b.cwnd) || 0;
+        const inflightBytes = cwnd * mss;
+        const bdpBytes = btlbw * rtprop * 125; // Mbps × ms × 125 = bytes
+        return {
+            cc: b.cc || 'unknown',
+            active,
+            rtprop,
+            btlbw,
+            curRtt: Number(b.rtt_ms) || 0,
+            curDr: Number(b.delivery_rate_mbps) || 0,
+            cwnd,
+            mss,
+            inflightBytes,
+            bdpBytes
+        };
+    }
+
+    bbrPlaneSvg(model) {
+        const W = 480;
+        const H = 300;
+        const padL = 46;
+        const padR = 18;
+        const padT = 22;
+        const padB = 34;
+        const plotW = W - padL - padR;
+        const plotH = H - padT - padB;
+        const xMax = Math.max(model.curRtt * 1.35, model.rtprop * 3.2, 4);
+        const yMax = Math.max(model.btlbw * 1.35, model.curDr * 1.3, 0.001);
+        const px = (rtt) => padL + Math.min(1, rtt / xMax) * plotW;
+        const py = (dr) => padT + plotH - Math.min(1, dr / yMax) * plotH;
+        const kneeX = px(model.rtprop);
+        const kneeY = py(model.btlbw);
+
+        let s = `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMidYMid meet" style="display:block;width:${W}px;height:${H}px;max-width:100%;background:rgba(6,10,16,0.6);border:1px solid rgba(96,110,128,0.3);border-radius:4px;">`;
+        // Buffer-filling zone (right of RTprop): where loss-based CC bloats RTT.
+        s += `<rect x="${kneeX.toFixed(1)}" y="${padT}" width="${(padL + plotW - kneeX).toFixed(1)}" height="${plotH}" fill="rgba(232,96,104,0.06)"/>`;
+        // Axes.
+        s += `<line x1="${padL}" y1="${padT}" x2="${padL}" y2="${padT + plotH}" stroke="rgba(140,160,180,0.5)" stroke-width="1"/>`;
+        s += `<line x1="${padL}" y1="${padT + plotH}" x2="${padL + plotW}" y2="${padT + plotH}" stroke="rgba(140,160,180,0.5)" stroke-width="1"/>`;
+        // BtlBw ceiling (max bandwidth).
+        s += `<line x1="${padL}" y1="${kneeY.toFixed(1)}" x2="${padL + plotW}" y2="${kneeY.toFixed(1)}" stroke="rgba(230,193,90,0.85)" stroke-width="1.2" stroke-dasharray="5 3"/>`;
+        s += `<text x="${padL + 4}" y="${(kneeY - 5).toFixed(1)}" fill="rgba(230,193,90,0.95)" font-size="9" font-family="'Share Tech Mono',monospace">BtlBw · max bandwidth</text>`;
+        // RTprop vertical (min RTT).
+        s += `<line x1="${kneeX.toFixed(1)}" y1="${padT}" x2="${kneeX.toFixed(1)}" y2="${padT + plotH}" stroke="rgba(103,190,224,0.85)" stroke-width="1.2" stroke-dasharray="5 3"/>`;
+        s += `<text x="${(kneeX + 4).toFixed(1)}" y="${padT + 10}" fill="rgba(150,200,230,0.95)" font-size="9" font-family="'Share Tech Mono',monospace">RTprop · min RTT</text>`;
+        // History trail.
+        const hist = (this.bbrHist || []).slice(-40).filter(s2 => s2.rtt > 0);
+        if (hist.length >= 2) {
+            let d = '';
+            hist.forEach((pt, i) => { d += `${i === 0 ? 'M' : 'L'} ${px(pt.rtt).toFixed(1)} ${py(pt.dr).toFixed(1)} `; });
+            s += `<path d="${d}" fill="none" stroke="rgba(168,200,214,0.35)" stroke-width="1"/>`;
+            hist.forEach((pt) => { s += `<circle cx="${px(pt.rtt).toFixed(1)}" cy="${py(pt.dr).toFixed(1)}" r="1.5" fill="rgba(168,200,214,0.45)"/>`; });
+        }
+        // Optimal operating point (the BDP knee).
+        s += `<circle cx="${kneeX.toFixed(1)}" cy="${kneeY.toFixed(1)}" r="7" fill="none" stroke="rgba(150,255,190,0.9)" stroke-width="1.5"/>`;
+        s += `<circle cx="${kneeX.toFixed(1)}" cy="${kneeY.toFixed(1)}" r="2.5" fill="rgba(150,255,190,0.95)"/>`;
+        s += `<text x="${(kneeX + 9).toFixed(1)}" y="${(kneeY + 13).toFixed(1)}" fill="rgba(150,255,190,0.9)" font-size="8.5" font-family="'Share Tech Mono',monospace">optimal (BDP)</text>`;
+        // Current operating point.
+        const cx = px(model.curRtt);
+        const cy = py(model.curDr);
+        s += `<circle cx="${cx.toFixed(1)}" cy="${cy.toFixed(1)}" r="9" fill="rgba(232,96,104,0.14)"/>`;
+        s += `<circle cx="${cx.toFixed(1)}" cy="${cy.toFixed(1)}" r="3.5" fill="rgba(232,96,104,0.95)"/>`;
+        s += `<text x="${(cx + 8).toFixed(1)}" y="${(cy - 6).toFixed(1)}" fill="rgba(240,150,155,0.95)" font-size="8.5" font-family="'Share Tech Mono',monospace">now (${model.cc})</text>`;
+        // Axis captions.
+        s += `<text x="${padL + plotW}" y="${padT + plotH + 22}" text-anchor="end" fill="rgba(140,160,180,0.7)" font-size="8.5" font-family="'Share Tech Mono',monospace">round-trip time (ms) →</text>`;
+        s += `<text x="${padL - 4}" y="${padT - 8}" fill="rgba(140,160,180,0.7)" font-size="8.5" font-family="'Share Tech Mono',monospace">delivery rate (Mbps) ↑</text>`;
+        s += `</svg>`;
+        return s;
+    }
+
+    openBbrOverlay() {
+        if (!this.bbrScrim || !this.bbrPanel) return;
+        const m = this.computeBbrModel();
+        this.bbrOpen = true;
+        const fmtBytes = (b) => (b >= 1024 * 1024 ? `${(b / 1048576).toFixed(2)} MB` : `${(b / 1024).toFixed(1)} KB`);
+        const ratio = m.bdpBytes > 0 ? (m.inflightBytes / m.bdpBytes) : 0;
+        const ratioPct = Math.round(ratio * 100);
+        const ratioCol = ratio > 1.25 ? 'rgba(232,96,104,0.95)' : (ratio < 0.6 ? 'rgba(230,193,90,0.95)' : 'rgba(150,255,190,0.95)');
+        const card = (k, v, sub) => `
+            <div style="background:rgba(8,12,20,0.7); border:1px solid rgba(96,110,128,0.32); border-radius:4px; padding:8px 10px;">
+                <div style="font-size:8.5px; letter-spacing:0.6px; color:#7f93a6; text-transform:uppercase;">${k}</div>
+                <div style="font-size:18px; color:#e2edf5; line-height:1.15; margin-top:2px;">${v}</div>
+                ${sub ? `<div style="font-size:8px; color:#728697; margin-top:1px;">${sub}</div>` : ''}
+            </div>`;
+        const modeNote = m.active
+            ? `This connection runs <b style="color:#a9d4e8">BBR</b> — the values below are the kernel's own BtlBw / RTprop estimates.`
+            : `This connection runs <b style="color:#e6c15a">${m.cc}</b> (loss-based). BtlBw / RTprop below are the same model BBR would build, estimated from the observed delivery rate (max) and min RTT.`;
+        const html = `
+            <div style="display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid rgba(103,190,224,0.25); background:linear-gradient(90deg, rgba(103,190,224,0.10), rgba(103,190,224,0));">
+                <div style="flex:1 1 auto;">
+                    <div style="font-size:8px; letter-spacing:1.4px; color:#6f8597;">CONGESTION CONTROL · LEARNED PATH MODEL</div>
+                    <div style="font-size:20px; letter-spacing:1.2px; color:#e8f2f9;">TCP BBR — BOTTLENECK BW × MIN RTT</div>
+                </div>
+                <div class="ns-ov-close" style="flex:none; cursor:pointer; width:26px; height:26px; border:1px solid rgba(160,170,190,0.4); border-radius:4px; display:flex; align-items:center; justify-content:center; color:#c8ccd4; font-size:14px;">✕</div>
+            </div>
+            <div style="display:flex; gap:16px; padding:14px 18px 16px; flex-wrap:wrap;">
+                <div class="ns-bbr-plane" style="flex:1 1 420px; min-width:320px;"></div>
+                <div style="flex:1 1 300px; min-width:260px; display:flex; flex-direction:column; gap:8px;">
+                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
+                        ${card('RTprop', `${m.rtprop.toFixed(2)} <span style="font-size:10px;color:#7f93a6">ms</span>`, 'min RTT · propagation')}
+                        ${card('BtlBw', `${m.btlbw.toFixed(2)} <span style="font-size:10px;color:#7f93a6">Mbps</span>`, 'max delivery rate')}
+                        ${card('BDP', fmtBytes(m.bdpBytes), 'BtlBw × RTprop')}
+                        ${card('inflight', fmtBytes(m.inflightBytes), `cwnd ${m.cwnd} × mss ${m.mss}`)}
+                    </div>
+                    <div style="background:rgba(8,12,20,0.7); border:1px solid rgba(96,110,128,0.32); border-radius:4px; padding:8px 10px;">
+                        <div style="display:flex; justify-content:space-between; font-size:8.5px; letter-spacing:0.6px; color:#7f93a6;"><span>INFLIGHT vs BDP</span><span style="color:${ratioCol}">${ratioPct}%</span></div>
+                        <div style="position:relative; height:8px; margin-top:5px; background:rgba(40,52,64,0.6); border-radius:4px; overflow:hidden;">
+                            <div style="position:absolute; left:0; top:0; bottom:0; width:${Math.min(100, ratioPct)}%; background:${ratioCol};"></div>
+                            <div style="position:absolute; left:100%; top:-2px; bottom:-2px; width:1px; background:rgba(150,255,190,0.9);"></div>
+                        </div>
+                        <div style="font-size:8px; color:#728697; margin-top:3px;">green line = BDP target · over 100% = queueing (bufferbloat)</div>
+                    </div>
+                    <div style="font-size:8.5px; letter-spacing:0.6px; color:#7f93a6;">CC ALGORITHM: <span style="color:#cfe6f2">${m.cc}</span> ${m.active ? '· <span style="color:#96ffbe">BBR live</span>' : '· <span style="color:#e6c15a">modeled</span>'}</div>
+                </div>
+            </div>
+            <div style="padding:0 18px 16px;">
+                <div style="font-size:11.5px; line-height:1.6; color:#c2cede;">BBR continuously measures two things about the path: the maximum delivery rate it has seen (<b style="color:#e6c15a">BtlBw</b>) and the minimum round-trip time (<b style="color:#a9d4e8">RTprop</b>). Their product is the bandwidth-delay product (<b style="color:#96ffbe">BDP</b>) — the amount of data in flight that keeps the pipe exactly full without queueing. BBR paces sending at BtlBw and caps inflight near BDP, avoiding the bufferbloat that loss-based CUBIC causes by filling router buffers until packets drop.</div>
+                <div style="margin-top:9px; font-size:10.5px; line-height:1.55; color:#9db6c8; border-left:2px solid rgba(230,193,90,0.6); padding-left:9px;"><span style="color:#e6c15a;">MODEL · </span>${modeNote} It's control theory, not machine learning — but it's a model of the environment learned online from the traffic itself (the same EWMA-style filtering used in Kernel DNA).</div>
+            </div>`;
+        window.setSafeHtml(this.bbrPanel, html);
+        // The SVG plane must be mounted directly (the HTML sanitizer strips SVG
+        // shape elements), so parse + import it into its placeholder host.
+        const planeHost = this.bbrPanel.querySelector('.ns-bbr-plane');
+        if (planeHost) {
+            try {
+                const doc = new DOMParser().parseFromString(this.bbrPlaneSvg(m), 'image/svg+xml');
+                if (doc.documentElement && doc.documentElement.nodeName.toLowerCase() === 'svg') {
+                    planeHost.appendChild(document.importNode(doc.documentElement, true));
+                }
+            } catch (e) { /* plane is decorative; ignore parse failures */ }
+        }
+        const closeBtn = this.bbrPanel.querySelector('.ns-ov-close');
+        if (closeBtn) closeBtn.addEventListener('click', () => this.closeBbrOverlay());
+        this.bbrScrim.style.display = 'block';
+        if (this.layerTooltipNode) this.layerTooltipNode.style.display = 'none';
+    }
+
+    closeBbrOverlay() {
+        this.bbrOpen = false;
+        if (this.bbrScrim) this.bbrScrim.style.display = 'none';
+    }
+
+    // Resolve which layer sits under the pointer via the tower raycast.
+    layerIdAtPointer(event) {
+        if (!this.raycaster || !this.camera || !this.renderer) return null;
+        const rect = this.renderer.domElement.getBoundingClientRect();
+        this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+        this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+        this.raycaster.setFromCamera(this.mouse, this.camera);
+        const hits = this.raycaster.intersectObjects(this.layerMeshes, false);
+        return hits.length ? (hits[0].object?.userData?.layerId || null) : null;
+    }
+
+    onCanvasClick(event) {
+        if (!this.isActive) return;
+        const layerId = this.hoveredLayerId || this.layerIdAtPointer(event);
+        if (layerId) this.openLayerDrilldown(layerId);
+    }
+
     onMouseMove(event) {
         if (!this.isActive || !this.raycaster || !this.camera || !this.renderer) return;
         if (this.viewDensityMode === 'minimal') {
@@ -3215,6 +3515,8 @@ class NetworkStackVisualization {
         if (this.layerTooltipNode) {
             this.layerTooltipNode.style.display = 'none';
         }
+        this.closeLayerDrilldown();
+        this.closeBbrOverlay();
         if (this.container) {
             this.container.style.display = 'none';
             this.container.style.visibility = 'hidden';
diff --git a/static/js/processes-belt.js b/static/js/processes-belt.js
index 0df9e84..a11d790 100644
--- a/static/js/processes-belt.js
+++ b/static/js/processes-belt.js
@@ -1,7 +1,7 @@
 // Processes Subsystem Visualization
-// Version: 34 — removed FLOW mode
+// Version: 39 — SCHEDULER default mode, removed RADIAL, observed history vs projection
 
-debugLog('🧠 processes-belt.js v34: Script loading...');
+debugLog('🧠 processes-belt.js v39: Script loading...');
 
 class ProcessesSubsystemVisualization {
     constructor() {
@@ -15,7 +15,7 @@ class ProcessesSubsystemVisualization {
         this.telemetry = null;
         this.tick = 0;
         this.nodeLayout = new Map();
-        this.layoutMode = 'microscope';
+        this.layoutMode = 'scheduler';
         this.modeButtons = new Map();
         this.edgeFilter = 'all';
         this.filterButtons = new Map();
@@ -32,6 +32,18 @@ class ProcessesSubsystemVisualization {
         this.processHistoryMaxPoints = 90;
         this.mouseMoveHandler = null;
         this.clickHandler = null;
+        // SCHEDULER (EEVDF + PELT) mode state.
+        this.schedulerData = null;
+        this.schedulerInterval = null;
+        this.schedSelectedPid = null;
+        this.schedHoverPid = null;
+        this.schedHistory = new Map();   // pid -> [{util, load}]
+        this.schedHistoryMax = 80;
+        this.schedRectHits = [];
+        this.schedOverlayPid = null;     // task drill-down overlay
+        this.schedOverlayHits = [];
+        this._schedOverlayPanel = null;
+        this._schedT0 = Date.now();      // wall-clock base for overlay animation
     }
 
     init(containerId = 'processes-belt-container') {
@@ -83,9 +95,9 @@ class ProcessesSubsystemVisualization {
             position:absolute;top:18px;left:18px;display:flex;gap:8px;z-index:1001;
         `;
         const modes = [
+            { key: 'scheduler', label: 'SCHEDULER' },
             { key: 'microscope', label: 'MICROSCOPE' },
             { key: 'temporal', label: '3-LAYER GRAPH' },
-            { key: 'radial', label: 'RADIAL GRAPH' },
             { key: 'wireframe', label: 'WIREFRAME PROC' }
         ];
         modes.forEach((m) => {
@@ -107,7 +119,7 @@ class ProcessesSubsystemVisualization {
     }
 
     setLayoutMode(modeKey) {
-        this.layoutMode = ['temporal', 'radial', 'microscope', 'wireframe'].includes(modeKey) ? modeKey : 'microscope';
+        this.layoutMode = ['temporal', 'microscope', 'wireframe', 'scheduler'].includes(modeKey) ? modeKey : 'scheduler';
         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)';
@@ -115,6 +127,48 @@ class ProcessesSubsystemVisualization {
             btn.style.color = active ? '#d9ecff' : '#bcc8db';
         });
         this.updateAutoFocusButtonState();
+        this.updateSchedulerPolling();
+    }
+
+    updateSchedulerPolling() {
+        const on = this.layoutMode === 'scheduler';
+        if (on && !this.schedulerInterval) {
+            this.fetchSchedulerData();
+            this.schedulerInterval = setInterval(() => {
+                if (this.isActive && this.layoutMode === 'scheduler') this.fetchSchedulerData();
+            }, 1500);
+        } else if (!on && this.schedulerInterval) {
+            clearInterval(this.schedulerInterval);
+            this.schedulerInterval = null;
+            this.schedOverlayPid = null;
+        }
+    }
+
+    fetchSchedulerData() {
+        return fetch('/api/scheduler-pelt', { cache: 'no-store' })
+            .then((res) => res.json())
+            .then((data) => {
+                if (!data || data.error) throw new Error(data?.error || 'no data');
+                this.schedulerData = data;
+                this.updateSchedHistory(data);
+            })
+            .catch(() => { /* keep last good frame */ });
+    }
+
+    updateSchedHistory(data) {
+        const tasks = Array.isArray(data?.tasks) ? data.tasks : [];
+        const keep = new Set();
+        tasks.forEach((t) => {
+            const pid = Number(t.pid || 0);
+            if (pid <= 0) return;
+            keep.add(pid);
+            const arr = this.schedHistory.get(pid) || [];
+            arr.push({ util: Number(t.util_avg || 0), load: Number(t.load_avg || 0) });
+            this.schedHistory.set(pid, arr.slice(-this.schedHistoryMax));
+        });
+        for (const pid of this.schedHistory.keys()) {
+            if (!keep.has(pid) && pid !== this.schedSelectedPid) this.schedHistory.delete(pid);
+        }
     }
 
     createAutoFocusToggle() {
@@ -154,6 +208,30 @@ class ProcessesSubsystemVisualization {
         const rect = this.canvas.getBoundingClientRect();
         const x = event.clientX - rect.left;
         const y = event.clientY - rect.top;
+        if (this.layoutMode === 'scheduler') {
+            if (this.schedOverlayPid !== null) {
+                for (const hit of this.schedOverlayHits) {
+                    if (x >= hit.x && x <= hit.x + hit.w && y >= hit.y && y <= hit.y + hit.h) {
+                        if (hit.kind === 'close') this.schedOverlayPid = null;
+                        return;
+                    }
+                }
+                const p = this._schedOverlayPanel;
+                if (p && (x < p.x || x > p.x + p.w || y < p.y || y > p.y + p.h)) {
+                    this.schedOverlayPid = null;
+                }
+                return;
+            }
+            for (const hit of this.schedRectHits) {
+                if (x >= hit.x && x <= hit.x + hit.w && y >= hit.y && y <= hit.y + hit.h) {
+                    this.schedSelectedPid = hit.pid;
+                    this.schedOverlayPid = hit.pid;
+                    this._schedT0 = Date.now();
+                    return;
+                }
+            }
+            return;
+        }
         for (const hit of this.nodeHitAreas) {
             const dx = x - hit.x;
             const dy = y - hit.y;
@@ -212,6 +290,15 @@ class ProcessesSubsystemVisualization {
         const rect = this.canvas.getBoundingClientRect();
         const x = event.clientX - rect.left;
         const y = event.clientY - rect.top;
+        if (this.layoutMode === 'scheduler') {
+            let hv = null;
+            for (const hit of this.schedRectHits) {
+                if (x >= hit.x && x <= hit.x + hit.w && y >= hit.y && y <= hit.y + hit.h) { hv = hit.pid; break; }
+            }
+            this.schedHoverPid = hv;
+            this.canvas.style.cursor = hv ? 'pointer' : 'default';
+            return;
+        }
         let hovered = null;
         for (const n of this.nodeHitAreas) {
             const dx = x - n.x;
@@ -2179,6 +2266,698 @@ class ProcessesSubsystemVisualization {
         this.ctx.stroke();
     }
 
+    schedUtilColor(frac) {
+        const f = Math.max(0, Math.min(1, frac));
+        if (f < 0.33) return `rgba(110,180,245,${0.55 + f})`;
+        if (f < 0.66) return 'rgba(120,235,220,0.95)';
+        if (f < 0.85) return 'rgba(255,205,120,0.95)';
+        return 'rgba(255,140,120,0.98)';
+    }
+
+    drawSchedulerView(x, y, w, h) {
+        this.schedRectHits = [];
+        const ctx = this.ctx;
+        const d = this.schedulerData;
+
+        // Header strip.
+        const headH = 46;
+        this.drawPanel(x, y, w, headH, '', { alpha: 0.7, showTitle: false });
+        ctx.fillStyle = 'rgba(210,235,255,0.95)';
+        ctx.font = '13px "Share Tech Mono", monospace';
+        ctx.fillText(`CPU SCHEDULER · ${d?.scheduler || '…'} + PELT`, x + 16, y + 20);
+        ctx.font = '9px "Share Tech Mono", monospace';
+        ctx.fillStyle = 'rgba(150,194,225,0.82)';
+        if (!d) {
+            ctx.fillText('loading /api/scheduler-pelt …', x + 16, y + 36);
+            return;
+        }
+        const la = (d.loadavg || []).map((v) => v.toFixed(2)).join(' ');
+        const src = d.eevdf?.source === 'kernel' ? 'sched_debug' : 'computed';
+        ctx.fillText(
+            `cpus ${d.cpus} · loadavg ${la} · tasks ${d.task_count} · y=${d.pelt.y} · half-life ${d.pelt.half_life_ms}ms · util,load ∈ [0,${d.pelt.capacity}] · EEVDF:${src}`,
+            x + 16, y + 36
+        );
+
+        const bodyY = y + headH + 12;
+        const bodyH = h - headH - 12;
+        const leftW = Math.min(440, w * 0.4);
+        const rightX = x + leftW + 14;
+        const rightW = w - leftW - 14;
+
+        const kernelH = Math.min(220, bodyH * 0.5);
+        this.drawPeltDecayKernel(x, bodyY, leftW, kernelH, d);
+        this.drawPeltSelfCheck(x, bodyY + kernelH + 12, leftW, bodyH - kernelH - 12, d);
+        this.drawSchedTasks(rightX, bodyY, rightW, bodyH, d);
+
+        if (this.schedOverlayPid !== null) this.drawSchedOverlay(d);
+    }
+
+    drawPeltDecayKernel(x, y, w, h, d) {
+        const ctx = this.ctx;
+        this.drawPanel(x, y, w, h, 'PELT DECAY KERNEL', { alpha: 0.82 });
+        ctx.fillStyle = 'rgba(150,194,225,0.82)';
+        ctx.font = '9px "Share Tech Mono", monospace';
+        ctx.fillText('util_avg = Σ activityₖ · yᵏ   —  same EWMA as the Kernel DNA z-score', x + 14, y + 34);
+
+        const weights = Array.isArray(d.pelt.kernel_weights) ? d.pelt.kernel_weights : [];
+        const n = weights.length;
+        if (!n) return;
+        const plotX = x + 16;
+        const plotY = y + 46;
+        const plotW = w - 32;
+        const plotH = h - 70;
+        const bw = plotW / n;
+        const sweep = (this.tick * 0.5) % n;
+        weights.forEach((wgt, i) => {
+            const bh = wgt * plotH;
+            const bx = plotX + i * bw;
+            const by = plotY + plotH - bh;
+            const near = Math.abs(i - sweep) < 2.5;
+            ctx.fillStyle = near ? 'rgba(150,225,255,0.98)' : `rgba(110,175,240,${0.28 + 0.5 * wgt})`;
+            ctx.fillRect(bx, by, Math.max(1, bw - 0.7), bh);
+        });
+
+        // Half-life marker at k = 32 periods (~32 ms).
+        const hlX = plotX + 32 * bw;
+        ctx.strokeStyle = 'rgba(255,180,120,0.85)';
+        ctx.setLineDash([3, 3]);
+        ctx.beginPath();
+        ctx.moveTo(hlX, plotY);
+        ctx.lineTo(hlX, plotY + plotH);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.fillStyle = 'rgba(255,195,150,0.95)';
+        ctx.font = '8px "Share Tech Mono", monospace';
+        ctx.fillText('½ · 32 ms', hlX + 4, plotY + 10);
+
+        ctx.fillStyle = 'rgba(150,194,225,0.7)';
+        ctx.fillText('now', plotX, plotY + plotH + 13);
+        ctx.textAlign = 'right';
+        ctx.fillText(`${n} ms ago`, plotX + plotW, plotY + plotH + 13);
+        ctx.textAlign = 'left';
+    }
+
+    drawPeltSelfCheck(x, y, w, h, d) {
+        const ctx = this.ctx;
+        this.drawPanel(x, y, w, h, 'PELT NORMALISATION · OUR MATH vs KERNEL', { alpha: 0.82 });
+        const tasks = Array.isArray(d.tasks) ? d.tasks : [];
+        const task = tasks.find((t) => t.pid === this.schedSelectedPid) || tasks[0];
+        if (!task) {
+            ctx.fillStyle = 'rgba(196,207,224,0.7)';
+            ctx.font = '10px "Share Tech Mono", monospace';
+            ctx.fillText('no task data', x + 16, y + 40);
+            return;
+        }
+        const maxv = d.pelt.load_avg_max;
+        const cap = d.pelt.capacity;
+        const ourUtil = task.util_sum / maxv;
+        const kern = task.util_avg;
+        const matchPct = kern > 0
+            ? Math.max(0, 100 - Math.abs(ourUtil - kern) / kern * 100)
+            : (ourUtil < 1 ? 100 : 0);
+
+        ctx.font = '10px "Share Tech Mono", monospace';
+        const tag = task.pid === this.schedSelectedPid ? '[selected]' : '[top]';
+        const lines = [
+            [`task            ${task.pid} ${task.comm}  ${tag}`, 'rgba(210,235,255,0.95)'],
+            [`util_sum (Σ)    = ${task.util_sum.toLocaleString()}`, 'rgba(150,194,225,0.9)'],
+            [`LOAD_AVG_MAX    = ${maxv}`, 'rgba(150,194,225,0.9)'],
+            [`our util_avg    = util_sum / LOAD_AVG_MAX ≈ ${ourUtil.toFixed(1)}`, 'rgba(150,225,255,0.95)'],
+            [`kernel util_avg = ${kern}`, 'rgba(150,255,190,0.95)'],
+            [`match           = ${matchPct.toFixed(1)}%`, matchPct > 92 ? 'rgba(150,255,190,0.98)' : 'rgba(255,205,120,0.95)']
+        ];
+        let ly = y + 40;
+        lines.forEach(([txt, col]) => {
+            ctx.fillStyle = col;
+            ctx.fillText(txt, x + 16, ly);
+            ly += 16;
+        });
+
+        // Two comparison bars (our vs kernel), 0..cap.
+        const barX = x + 16;
+        const barW = w - 32;
+        const drawBar = (by, val, col, label) => {
+            ctx.fillStyle = 'rgba(60,80,110,0.5)';
+            ctx.fillRect(barX, by, barW, 9);
+            ctx.fillStyle = col;
+            ctx.fillRect(barX, by, Math.min(1, val / cap) * barW, 9);
+            ctx.fillStyle = 'rgba(196,207,224,0.8)';
+            ctx.font = '8px "Share Tech Mono", monospace';
+            ctx.fillText(label, barX, by - 2);
+        };
+        if (ly + 40 < y + h) {
+            drawBar(ly + 6, ourUtil, 'rgba(120,200,255,0.9)', 'our util_avg (from util_sum)');
+            drawBar(ly + 30, kern, 'rgba(150,255,190,0.9)', 'kernel util_avg');
+            ctx.fillStyle = 'rgba(150,194,225,0.62)';
+            ctx.font = '8px "Share Tech Mono", monospace';
+            ctx.fillText('the few-% gap = the current partial 1 ms period in the kernel divider', barX, ly + 52);
+        }
+    }
+
+    drawSchedTasks(x, y, w, h, d) {
+        const ctx = this.ctx;
+        this.drawPanel(x, y, w, h, 'RUNQUEUE · TOP TASKS BY PELT util  ·  click a task to inspect', { alpha: 0.82 });
+        const tasks = Array.isArray(d.tasks) ? d.tasks : [];
+        const cap = d.pelt.capacity;
+
+        // Column header.
+        ctx.font = '8px "Share Tech Mono", monospace';
+        ctx.fillStyle = 'rgba(150,194,225,0.7)';
+        const colGaugeX = x + w * 0.40;
+        const colGaugeW = w * 0.24;
+        const colSparkX = x + w * 0.68;
+        const colSparkW = w * 0.16;
+        ctx.fillText('pid · comm', x + 16, y + 34);
+        ctx.fillText('util / load (0..1024)', colGaugeX, y + 34);
+        ctx.fillText('util history', colSparkX, y + 34);
+        ctx.fillText('vrt · nice · sw', x + w * 0.86, y + 34);
+
+        const rowsY = y + 42;
+        const footH = 30;
+        const rowH = Math.max(20, Math.min(34, (h - (rowsY - y) - footH) / Math.max(1, tasks.length)));
+        tasks.forEach((t, i) => {
+            const ry = rowsY + i * rowH;
+            const selected = t.pid === this.schedSelectedPid;
+            const hover = t.pid === this.schedHoverPid;
+            if (selected || hover) {
+                ctx.fillStyle = selected ? 'rgba(40,70,110,0.5)' : 'rgba(30,50,80,0.32)';
+                ctx.fillRect(x + 8, ry - 2, w - 16, rowH - 2);
+            }
+            this.schedRectHits.push({ x: x + 8, y: ry - 2, w: w - 16, h: rowH - 2, pid: t.pid });
+
+            // pid + comm (▶ marks a currently runnable task).
+            ctx.font = '10px "Share Tech Mono", monospace';
+            ctx.fillStyle = t.runnable ? 'rgba(150,255,190,0.98)' : 'rgba(206,232,255,0.92)';
+            const label = `${t.runnable ? '▶ ' : '   '}${t.pid} ${t.comm}`;
+            ctx.fillText(label.slice(0, 24), x + 14, ry + 12);
+
+            // util gauge (thick) + load gauge (thin) sharing the column.
+            ctx.fillStyle = 'rgba(60,80,110,0.45)';
+            ctx.fillRect(colGaugeX, ry + 2, colGaugeW, 8);
+            ctx.fillStyle = this.schedUtilColor(t.util_avg / cap);
+            ctx.fillRect(colGaugeX, ry + 2, Math.min(1, t.util_avg / cap) * colGaugeW, 8);
+            ctx.fillStyle = 'rgba(150,180,255,0.7)';
+            ctx.fillRect(colGaugeX, ry + 12, Math.min(1, t.load_avg / cap) * colGaugeW, 3);
+
+            // util sparkline.
+            const hist = this.schedHistory.get(t.pid) || [];
+            if (hist.length > 1) {
+                ctx.strokeStyle = 'rgba(140,215,255,0.85)';
+                ctx.lineWidth = 1;
+                ctx.beginPath();
+                hist.forEach((pt, k) => {
+                    const px = colSparkX + (k / (this.schedHistoryMax - 1)) * colSparkW;
+                    const py = ry + 12 - Math.min(1, pt.util / cap) * 12;
+                    if (k === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
+                });
+                ctx.stroke();
+            }
+
+            // right meta: util, nice, virtual-deadline offset (= virtual slice).
+            ctx.font = '8px "Share Tech Mono", monospace';
+            ctx.fillStyle = 'rgba(180,200,224,0.85)';
+            let meta = `u${Math.round(t.util_avg)} n${t.nice} vd+${(t.vslice_ms || 0).toFixed(3)}ms`;
+            ctx.fillText(meta, x + w * 0.86, ry + 8);
+            if (t.eligible !== undefined && t.runnable) {
+                ctx.fillStyle = t.eligible ? 'rgba(150,255,190,0.9)' : 'rgba(255,180,120,0.9)';
+                ctx.fillText(`${t.eligible ? 'E' : 'N'} lag ${Number(t.vlag_ms || 0).toFixed(2)}`, x + w * 0.86, ry + 18);
+            }
+        });
+
+        // EEVDF explainer footer.
+        ctx.font = '8px "Share Tech Mono", monospace';
+        ctx.fillStyle = 'rgba(150,194,225,0.66)';
+        ctx.fillText(
+            '▶ = runnable (state R). EEVDF runs the eligible task with the smallest virtual deadline; vruntime advances slower for higher-weight (lower nice) tasks.',
+            x + 16, y + h - 12
+        );
+    }
+
+    drawSchedOverlay(d) {
+        const ctx = this.ctx;
+        const W = window.innerWidth;
+        const H = window.innerHeight;
+        const task = (d.tasks || []).find((t) => t.pid === this.schedOverlayPid);
+        if (!task) { this.schedOverlayPid = null; return; }
+
+        ctx.fillStyle = 'rgba(4,8,14,0.82)';
+        ctx.fillRect(0, 0, W, H);
+
+        const pad = Math.min(64, W * 0.05);
+        const px = pad;
+        const py = 80;
+        const pw = W - pad * 2;
+        const ph = H - py - 40;
+        this._schedOverlayPanel = { x: px, y: py, w: pw, h: ph };
+        this.drawPanel(px, py, pw, ph, '', { alpha: 0.97, showTitle: false });
+
+        ctx.fillStyle = 'rgba(215,238,255,0.98)';
+        ctx.font = '15px "Share Tech Mono", monospace';
+        ctx.fillText(`TASK ${task.pid} · ${task.comm}  —  EEVDF + PELT`, px + 22, py + 28);
+        ctx.font = '9px "Share Tech Mono", monospace';
+        ctx.fillStyle = 'rgba(150,194,225,0.82)';
+        ctx.fillText(
+            `nice ${task.nice} · weight ${task.weight} · slice ${task.slice_ms}ms · state ${task.state}${task.runnable ? ' (runnable)' : ''}`,
+            px + 22, py + 46
+        );
+
+        // Close button.
+        const cb = { kind: 'close', x: px + pw - 36, y: py + 14, w: 24, h: 24 };
+        ctx.strokeStyle = 'rgba(200,220,245,0.75)';
+        ctx.lineWidth = 1.4;
+        ctx.beginPath();
+        ctx.moveTo(cb.x + 6, cb.y + 6); ctx.lineTo(cb.x + 18, cb.y + 18);
+        ctx.moveTo(cb.x + 18, cb.y + 6); ctx.lineTo(cb.x + 6, cb.y + 18);
+        ctx.stroke();
+        this.schedOverlayHits = [cb];
+
+        const colY = py + 64;
+        const colH = ph - 84;
+        const colGap = 16;
+        const colW = (pw - 44 - colGap * 2) / 3;
+        const c1 = px + 22;
+        const c2 = c1 + colW + colGap;
+        const c3 = c2 + colW + colGap;
+        this.drawOvPeltTrajectory(c1, colY, colW, colH, d, task);
+        this.drawOvEevdf(c2, colY, colW, colH, d, task);
+        this.drawOvReducer(c3, colY, colW, colH, d, task);
+
+        ctx.fillStyle = 'rgba(150,194,225,0.58)';
+        ctx.font = '8px "Share Tech Mono", monospace';
+        ctx.fillText('click outside · × to close', px + 22, py + ph - 12);
+    }
+
+    drawOvPeltTrajectory(x, y, w, h, d, task) {
+        const ctx = this.ctx;
+        this.drawPanel(x, y, w, h, 'PELT TRAJECTORY', { alpha: 0.9 });
+        ctx.fillStyle = 'rgba(150,194,225,0.8)';
+        ctx.font = '8px "Share Tech Mono", monospace';
+        ctx.fillText('util (cyan) & load (blue) history · kernel 1 ms-period EWMA, sampled ~1.5 s', x + 12, y + 30);
+
+        const cap = d.pelt.capacity;
+        const hist = this.schedHistory.get(task.pid) || [];
+        const plotX = x + 16;
+        const plotY = y + 42;
+        const plotW = w - 40;
+        const plotH = 150;
+
+        // Grid + capacity reference lines (¼, ½, ¾, full CPU).
+        ctx.strokeStyle = 'rgba(120,160,210,0.14)';
+        ctx.lineWidth = 1;
+        [0, 0.25, 0.5, 0.75, 1].forEach((f) => {
+            const gy = plotY + plotH - f * plotH;
+            ctx.beginPath();
+            ctx.moveTo(plotX, gy);
+            ctx.lineTo(plotX + plotW, gy);
+            ctx.stroke();
+            ctx.fillStyle = 'rgba(140,175,215,0.55)';
+            ctx.fillText(`${Math.round(f * cap)}`, plotX + plotW + 3, gy + 3);
+        });
+
+        const drawSeries = (key, color, fill) => {
+            if (hist.length < 2) return;
+            ctx.beginPath();
+            hist.forEach((pt, k) => {
+                const sx = plotX + (k / (this.schedHistoryMax - 1)) * plotW;
+                const sy = plotY + plotH - Math.min(1, (pt[key] || 0) / cap) * plotH;
+                if (k === 0) ctx.moveTo(sx, sy); else ctx.lineTo(sx, sy);
+            });
+            ctx.strokeStyle = color;
+            ctx.lineWidth = 1.5;
+            ctx.stroke();
+            if (fill) {
+                const lastX = plotX + ((hist.length - 1) / (this.schedHistoryMax - 1)) * plotW;
+                ctx.lineTo(lastX, plotY + plotH);
+                ctx.lineTo(plotX, plotY + plotH);
+                ctx.closePath();
+                ctx.fillStyle = fill;
+                ctx.fill();
+            }
+        };
+        drawSeries('load', 'rgba(140,170,255,0.85)', null);
+        drawSeries('util', 'rgba(140,225,255,0.95)', 'rgba(120,220,255,0.10)');
+
+        // Estimated-util clamp band (util_est is the boosted running estimate).
+        const estY = plotY + plotH - Math.min(1, (task.util_est || 0) / cap) * plotH;
+        ctx.strokeStyle = 'rgba(255,205,120,0.6)';
+        ctx.setLineDash([4, 3]);
+        ctx.beginPath();
+        ctx.moveTo(plotX, estY);
+        ctx.lineTo(plotX + plotW, estY);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.fillStyle = 'rgba(255,205,120,0.85)';
+        ctx.fillText('util_est', plotX + 2, estY - 3);
+
+        ctx.fillStyle = 'rgba(150,194,225,0.6)';
+        ctx.fillText('now', plotX + plotW - 18, plotY + plotH + 12);
+
+        // --- PELT decay / recovery projection (real y, millisecond scale) ---
+        this.drawOvPeltProjection(x, plotY + plotH + 26, w, 180, d, task, cap);
+
+        // Current values.
+        let ny = plotY + plotH + 26 + 180 + 20;
+        const rows = [
+            [`util_avg      ${task.util_avg}`, 'rgba(140,225,255,0.95)'],
+            [`load_avg      ${task.load_avg}`, 'rgba(140,170,255,0.9)'],
+            [`runnable_avg  ${task.runnable_avg}`, 'rgba(150,210,235,0.9)'],
+            [`util_est      ${task.util_est}`, 'rgba(255,205,120,0.9)'],
+            [`sum_exec      ${task.sum_exec_ms} ms`, 'rgba(180,200,224,0.85)']
+        ];
+        ctx.font = '9px "Share Tech Mono", monospace';
+        rows.forEach(([txt, col]) => {
+            ctx.fillStyle = col;
+            ctx.fillText(txt, x + 14, ny);
+            ny += 15;
+        });
+    }
+
+    drawOvPeltProjection(x, y, w, h, d, task, cap) {
+        const ctx = this.ctx;
+        const y0 = d.pelt.y;               // real per-1ms-period decay factor
+        const halfLife = d.pelt.half_life_ms;
+        const cur = task.util_avg;
+        const spanMs = Math.max(96, halfLife * 3);   // ~3 half-lives
+
+        ctx.fillStyle = 'rgba(150,194,225,0.8)';
+        ctx.font = '8px "Share Tech Mono", monospace';
+        ctx.fillText(`PROJECTION · observed past → now → decay(idle)/recover(busy)  (y=${y0})`, x + 12, y);
+
+        const plotX = x + 16;
+        const plotY = y + 10;
+        const plotW = w - 40;
+        const plotH = h - 40;
+
+        // "now" splits the panel: left = real observed samples (coarse, ~1.5s),
+        // right = the millisecond-scale projection. Both share the util y-axis
+        // and meet at the current util value, so the real trajectory flows
+        // straight into the two hypothetical futures.
+        const nowFrac = 0.42;
+        const nowX = plotX + plotW * nowFrac;
+        const projW = plotW * (1 - nowFrac);
+
+        ctx.strokeStyle = 'rgba(120,160,210,0.14)';
+        ctx.lineWidth = 1;
+        [0, 0.5, 1].forEach((f) => {
+            const gy = plotY + plotH - f * plotH;
+            ctx.beginPath();
+            ctx.moveTo(plotX, gy);
+            ctx.lineTo(plotX + plotW, gy);
+            ctx.stroke();
+        });
+
+        const mapY = (u) => plotY + plotH - Math.min(1, u / cap) * plotH;
+        const mapXp = (tms) => nowX + (tms / spanMs) * projW;   // future (ms)
+
+        // --- Observed past: real util samples flowing into "now". ---
+        const hist = this.schedHistory.get(task.pid) || [];
+        const M = Math.min(hist.length, 28);
+        if (M >= 2) {
+            const recent = hist.slice(-M);
+            const leftW = nowX - plotX;
+            ctx.strokeStyle = 'rgba(200,225,250,0.9)';
+            ctx.lineWidth = 1.5;
+            ctx.beginPath();
+            recent.forEach((pt, k) => {
+                const sx = plotX + (k / (M - 1)) * leftW;
+                const sy = mapY(pt.util || 0);
+                if (k === 0) ctx.moveTo(sx, sy); else ctx.lineTo(sx, sy);
+            });
+            ctx.stroke();
+            // Sample dots.
+            ctx.fillStyle = 'rgba(200,225,250,0.65)';
+            recent.forEach((pt, k) => {
+                const sx = plotX + (k / (M - 1)) * leftW;
+                ctx.beginPath();
+                ctx.arc(sx, mapY(pt.util || 0), 1.6, 0, Math.PI * 2);
+                ctx.fill();
+            });
+        }
+
+        // --- Future decay: u(t) = cur * y^t (task goes idle now). ---
+        ctx.strokeStyle = 'rgba(140,225,255,0.95)';
+        ctx.lineWidth = 1.6;
+        ctx.beginPath();
+        for (let tms = 0; tms <= spanMs; tms += 1) {
+            const u = cur * Math.pow(y0, tms);
+            if (tms === 0) ctx.moveTo(mapXp(tms), mapY(u)); else ctx.lineTo(mapXp(tms), mapY(u));
+        }
+        ctx.stroke();
+
+        // --- Future recovery: u(t) = cap - (cap - cur) * y^t (runs full-tilt). ---
+        ctx.strokeStyle = 'rgba(150,255,190,0.9)';
+        ctx.beginPath();
+        for (let tms = 0; tms <= spanMs; tms += 1) {
+            const u = cap - (cap - cur) * Math.pow(y0, tms);
+            if (tms === 0) ctx.moveTo(mapXp(tms), mapY(u)); else ctx.lineTo(mapXp(tms), mapY(u));
+        }
+        ctx.stroke();
+
+        // Half-life markers (right/future region).
+        ctx.strokeStyle = 'rgba(255,180,120,0.7)';
+        ctx.setLineDash([3, 3]);
+        [1, 2, 3].forEach((k) => {
+            const hx = mapXp(halfLife * k);
+            if (hx > plotX + plotW) return;
+            ctx.beginPath();
+            ctx.moveTo(hx, plotY);
+            ctx.lineTo(hx, plotY + plotH);
+            ctx.stroke();
+            ctx.fillStyle = 'rgba(255,195,150,0.8)';
+            ctx.fillText(`${halfLife * k}ms`, hx + 2, plotY + plotH + 11);
+        });
+        ctx.setLineDash([]);
+
+        // "now" divider.
+        ctx.strokeStyle = 'rgba(215,238,255,0.5)';
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(nowX, plotY - 2);
+        ctx.lineTo(nowX, plotY + plotH + 2);
+        ctx.stroke();
+        ctx.fillStyle = 'rgba(215,238,255,0.85)';
+        ctx.fillText('now', nowX - 8, plotY - 4);
+
+        // Animated marker sweeping along the decay curve.
+        const t = (Date.now() - this._schedT0) / 1000;
+        const sweepMs = (t * 24) % spanMs;   // ~24 ms/s sweep
+        ctx.fillStyle = 'rgba(150,225,255,0.98)';
+        ctx.beginPath();
+        ctx.arc(mapXp(sweepMs), mapY(cur * Math.pow(y0, sweepMs)), 3.5, 0, Math.PI * 2);
+        ctx.fill();
+
+        // "now" point at current util.
+        ctx.fillStyle = 'rgba(215,238,255,0.95)';
+        ctx.beginPath();
+        ctx.arc(nowX, mapY(cur), 3, 0, Math.PI * 2);
+        ctx.fill();
+
+        // Axis captions + legend.
+        ctx.font = '8px "Share Tech Mono", monospace';
+        ctx.fillStyle = 'rgba(150,194,225,0.6)';
+        ctx.fillText('observed (~1.5s/sample)', plotX, plotY + plotH + 24);
+        ctx.fillStyle = 'rgba(140,225,255,0.9)';
+        ctx.fillText('— decay(idle)', plotX + plotW - 150, plotY + 10);
+        ctx.fillStyle = 'rgba(150,255,190,0.9)';
+        ctx.fillText('— recover(busy)', plotX + plotW - 150, plotY + 22);
+    }
+
+    drawOvEevdf(x, y, w, h, d, task) {
+        const ctx = this.ctx;
+        this.drawPanel(x, y, w, h, 'EEVDF · VIRTUAL DEADLINE & LAG', { alpha: 0.9 });
+        const kernel = d.eevdf?.source === 'kernel' && task.eligible !== undefined;
+
+        const v = task.vruntime;
+        const vd = task.deadline_v;         // v + virtual slice (computed)
+        const V = kernel ? task.avg_vruntime : null;
+        // Only fold V into the axis window when it is close enough to v to be
+        // meaningful (i.e. the task is actually competing). For long-sleeping
+        // tasks V is far away and would collapse v/vd to a single pixel — we
+        // then draw V as an off-axis arrow instead.
+        const vNear = (V !== null && V !== undefined)
+            && Math.abs(V - v) <= Math.max(50, task.vslice_ms * 40);
+        const vals = [v, vd];
+        if (vNear) vals.push(V);
+        let lo = Math.min(...vals);
+        let hi = Math.max(...vals);
+        const span = Math.max(hi - lo, task.vslice_ms * 1.5, 0.02);
+        lo -= span * 0.25;
+        hi += span * 0.35;
+        const axX = x + 18;
+        const axW = w - 36;
+        const axY = y + 74;
+        const mapX = (val) => axX + ((val - lo) / (hi - lo)) * axW;
+
+        // Axis.
+        ctx.strokeStyle = 'rgba(150,180,220,0.5)';
+        ctx.lineWidth = 1.2;
+        ctx.beginPath();
+        ctx.moveTo(axX, axY);
+        ctx.lineTo(axX + axW, axY);
+        ctx.stroke();
+        ctx.fillStyle = 'rgba(150,194,225,0.7)';
+        ctx.font = '8px "Share Tech Mono", monospace';
+        ctx.fillText('virtual time (ms) →', axX, axY + 26);
+
+        const marker = (val, color, label, up) => {
+            const mx = mapX(val);
+            const y1 = up ? axY - 30 : axY + 4;
+            const y2 = up ? axY : axY + 14;
+            ctx.strokeStyle = color;
+            ctx.lineWidth = 1.6;
+            ctx.beginPath();
+            ctx.moveTo(mx, y1);
+            ctx.lineTo(mx, y2);
+            ctx.stroke();
+            ctx.fillStyle = color;
+            ctx.fillText(label, mx - 6, up ? y1 - 3 : y2 + 10);
+        };
+
+        // Virtual slice bracket v -> vd.
+        ctx.fillStyle = 'rgba(120,220,255,0.14)';
+        ctx.fillRect(mapX(v), axY - 8, mapX(vd) - mapX(v), 16);
+        marker(v, 'rgba(140,225,255,0.95)', 'v', true);
+        marker(vd, 'rgba(150,255,190,0.95)', 'vd', false);
+        if (vNear) {
+            marker(V, 'rgba(255,205,120,0.95)', 'V', true);
+        } else if (V !== null && V !== undefined) {
+            // V is off-window: draw an arrow at the edge toward it.
+            const rightward = V > v;
+            const ex = rightward ? axX + axW - 2 : axX + 2;
+            ctx.fillStyle = 'rgba(255,205,120,0.9)';
+            ctx.font = '9px "Share Tech Mono", monospace';
+            ctx.fillText(rightward ? 'V →' : '← V', rightward ? ex - 22 : ex, axY - 20);
+        }
+
+        ctx.font = '9px "Share Tech Mono", monospace';
+        let ny = axY + 52;
+        const line = (txt, col) => { ctx.fillStyle = col; ctx.fillText(txt, x + 14, ny); ny += 15; };
+        line(`vruntime v   = ${v.toFixed(3)} ms`, 'rgba(140,225,255,0.95)');
+        line(`virtual slice = slice·1024/w = ${task.vslice_ms.toFixed(4)} ms`, 'rgba(180,200,224,0.88)');
+        line(`deadline  vd = v + vslice = ${vd.toFixed(3)} ms`, 'rgba(150,255,190,0.95)');
+        if (kernel) {
+            const elig = task.eligible;
+            line(`avg_vruntime V = ${Number(V).toFixed(3)} ms`, 'rgba(255,205,120,0.95)');
+            line(`lag = V - v   = ${Number(task.vlag_ms).toFixed(3)} ms`, 'rgba(210,225,245,0.9)');
+            ny += 4;
+            ctx.fillStyle = elig ? 'rgba(150,255,190,0.98)' : 'rgba(255,180,120,0.98)';
+            ctx.font = '11px "Share Tech Mono", monospace';
+            ctx.fillText(elig ? '● ELIGIBLE  (lag ≥ 0, v ≤ V)' : '○ NOT ELIGIBLE  (lag < 0)', x + 14, ny);
+            ny += 18;
+            if (!task.runnable) {
+                ctx.fillStyle = 'rgba(150,194,225,0.6)';
+                ctx.font = '8px "Share Tech Mono", monospace';
+                ctx.fillText('(sleeping — lag/eligibility apply while runnable)', x + 14, ny);
+                ny += 14;
+            }
+        } else {
+            ny += 4;
+            ctx.fillStyle = 'rgba(255,205,120,0.9)';
+            ctx.font = '8px "Share Tech Mono", monospace';
+            ctx.fillText('lag & eligibility need cfs_rq avg_vruntime (V),', x + 14, ny); ny += 12;
+            ctx.fillText('which lives in root-only sched_debug.', x + 14, ny); ny += 12;
+            ctx.fillText('→ enable the sched_debug collector for kernel-exact V.', x + 14, ny); ny += 16;
+        }
+
+        ctx.fillStyle = 'rgba(150,194,225,0.62)';
+        ctx.font = '8px "Share Tech Mono", monospace';
+        this._wrapText(
+            'EEVDF runs the eligible task (lag ≥ 0) with the earliest virtual deadline. Bigger weight ⇒ smaller virtual slice ⇒ earlier deadline ⇒ scheduled sooner.',
+            x + 14, ny + 4, w - 28, 11
+        );
+    }
+
+    drawOvReducer(x, y, w, h, d, task) {
+        const ctx = this.ctx;
+        this.drawPanel(x, y, w, h, 'nice → weight → vruntime SPEED', { alpha: 0.9 });
+        const weight = task.weight || 1024;
+        const rate = 1024 / weight;   // virtual ms accrued per real ms of CPU
+        const cx = x + 16;
+        let ny = y + 36;
+
+        ctx.font = '9px "Share Tech Mono", monospace';
+        const stage = (label, val, col) => {
+            ctx.fillStyle = 'rgba(150,194,225,0.7)';
+            ctx.fillText(label, cx, ny);
+            ctx.fillStyle = col;
+            ctx.fillText(val, cx + 92, ny);
+            ny += 14;
+        };
+        stage('nice', `${task.nice}`, 'rgba(215,238,255,0.95)');
+        stage('→ weight', `${weight}`, 'rgba(140,225,255,0.95)');
+        stage('→ vruntime ×', `${rate.toFixed(4)} /ns`, 'rgba(150,255,190,0.95)');
+        ny += 6;
+
+        // Two vruntime tracks: nice-0 reference vs this task, animated.
+        const t = (Date.now() - this._schedT0) / 1000;
+        const trackX = cx;
+        const trackW = w - 32;
+        const baseSpeed = 0.18; // fraction of track per second for the reference
+        const drawTrack = (ty, speed, color, label) => {
+            ctx.strokeStyle = 'rgba(120,160,210,0.25)';
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(trackX, ty);
+            ctx.lineTo(trackX + trackW, ty);
+            ctx.stroke();
+            const pos = ((t * speed) % 1) * trackW;
+            ctx.fillStyle = color;
+            ctx.beginPath();
+            ctx.arc(trackX + pos, ty, 4, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.fillStyle = 'rgba(180,200,224,0.82)';
+            ctx.font = '8px "Share Tech Mono", monospace';
+            ctx.fillText(label, trackX, ty - 7);
+        };
+        drawTrack(ny + 14, baseSpeed, 'rgba(160,180,210,0.85)', 'nice 0 (weight 1024) — reference vruntime');
+        drawTrack(ny + 44, baseSpeed * rate, 'rgba(150,255,190,0.95)', `nice ${task.nice} (weight ${weight}) — this task`);
+        ny += 64;
+
+        // Comparison bar: how fast this task's vruntime moves vs nice-0.
+        ny += 8;
+        const barX = cx;
+        const barW = w - 32;
+        const norm = Math.max(0, Math.min(1, Math.log2(rate * 16 + 1) / Math.log2(16 * 68 + 1)));
+        ctx.fillStyle = 'rgba(60,80,110,0.5)';
+        ctx.fillRect(barX, ny, barW, 9);
+        ctx.fillStyle = rate < 1 ? 'rgba(140,225,255,0.9)' : 'rgba(255,180,120,0.9)';
+        ctx.fillRect(barX, ny, norm * barW, 9);
+        ny += 22;
+
+        ctx.fillStyle = 'rgba(150,194,225,0.72)';
+        ctx.font = '8px "Share Tech Mono", monospace';
+        const verdict = rate < 1
+            ? `vruntime advances ${(1 / rate).toFixed(1)}× SLOWER than nice 0 ⇒ the scheduler lets it run MORE.`
+            : (rate > 1
+                ? `vruntime advances ${rate.toFixed(1)}× FASTER than nice 0 ⇒ it yields the CPU sooner.`
+                : 'baseline: vruntime advances 1:1 with real time.');
+        this._wrapText(verdict, cx, ny, w - 28, 11);
+        ny += 34;
+        this._wrapText(
+            'PELT feeds util_avg; EEVDF uses weight to scale real time into virtual time. Same geometric-decay math family as the Kernel DNA z-score.',
+            cx, ny, w - 28, 11
+        );
+    }
+
+    _wrapText(text, x, y, maxW, lineH) {
+        const ctx = this.ctx;
+        const words = String(text).split(' ');
+        let line = '';
+        let cy = y;
+        words.forEach((word) => {
+            const test = line ? `${line} ${word}` : word;
+            if (ctx.measureText(test).width > maxW && line) {
+                ctx.fillText(line, x, cy);
+                line = word;
+                cy += lineH;
+            } else {
+                line = test;
+            }
+        });
+        if (line) ctx.fillText(line, x, cy);
+        return cy;
+    }
+
     drawScene() {
         if (!this.ctx || !this.canvas) return;
         const w = window.innerWidth;
@@ -2215,6 +2994,12 @@ class ProcessesSubsystemVisualization {
             this.ctx.stroke();
         }
 
+        if (this.layoutMode === 'scheduler') {
+            this.drawKernelHeader();
+            this.drawSchedulerView(gap, top, w - gap * 2, h - top - 30);
+            return;
+        }
+
         this.drawHudChrome(gap, graphY, w - gap * 2, graphH);
 
         this.drawKernelHeader();
diff --git a/static/js/right-semicircle-menu.js b/static/js/right-semicircle-menu.js
index dc5f9f8..3673f26 100644
--- a/static/js/right-semicircle-menu.js
+++ b/static/js/right-semicircle-menu.js
@@ -98,12 +98,16 @@ class RightSemicircleMenuManager {
             window.location.assign('/linux-memory-subsystem');
             return;
         }
+        if (itemId === 'network') {
+            // Force hard navigation to dedicated SEO page (same as the other
+            // subsystems), instead of opening the in-page overlay view.
+            window.location.assign('/linux-network-subsystem');
+            return;
+        }
         if (!window.kernelContextMenu) return;
         if (itemId === 'kernel') {
             window.kernelContextMenu.activateDNAView();
             return;
-        } else if (itemId === 'network') {
-            window.kernelContextMenu.activateNetworkView();
         } else if (itemId === 'devices') {
             window.kernelContextMenu.activateDevicesView();
         } else if (itemId === 'files') {
diff --git a/static/js/ui-chrome.js b/static/js/ui-chrome.js
index 767c23c..e6bd136 100644
--- a/static/js/ui-chrome.js
+++ b/static/js/ui-chrome.js
@@ -88,6 +88,41 @@ function drawSocialIcons(width, height) {
         .attr("fill", "rgba(255, 255, 255, 0.1)")
         .attr("stroke", "rgba(102, 102, 102, 0.3)")
         .attr("stroke-width", "0.5");
+
+    // GitHub icon, right next to Twitter (same visual treatment).
+    const githubX = twitterX + 40;
+    const githubY = twitterY;
+
+    const githubGroup = svg.append("g")
+        .attr("class", "social-icon")
+        .attr("transform", `translate(${githubX}, ${githubY})`)
+        .style("cursor", "pointer")
+        .on("click", () => {
+            window.open("https://github.com/devops-stack/ring-0", "_blank", "noopener");
+        })
+        .on("mouseenter", function() {
+            d3.select(this).select("path").transition().duration(200).attr("fill", "#ffffff");
+        })
+        .on("mouseleave", function() {
+            d3.select(this).select("path").transition().duration(200).attr("fill", "#666");
+        });
+
+    githubGroup.append("title").text("View source on GitHub");
+
+    // GitHub mark (24x24 path).
+    githubGroup.append("path")
+        .attr("d", "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12")
+        .attr("fill", "#666")
+        .attr("stroke", "none");
+
+    // Add subtle background circle
+    githubGroup.insert("circle", "path")
+        .attr("cx", 0)
+        .attr("cy", 0)
+        .attr("r", iconSize/2 + 2)
+        .attr("fill", "rgba(255, 255, 255, 0.1)")
+        .attr("stroke", "rgba(102, 102, 102, 0.3)")
+        .attr("stroke-width", "0.5");
 }
 
 window.UiChrome = {
diff --git a/templates/linux-crypto-subsystem.html b/templates/linux-crypto-subsystem.html
index 3d251c3..2c1a830 100644
--- a/templates/linux-crypto-subsystem.html
+++ b/templates/linux-crypto-subsystem.html
@@ -139,8 +139,8 @@ <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/aes-ref.js?v=2"></script>
-    <script src="/static/js/crypto-belt.js?v=59"></script>
+    <script src="/static/js/aes-ref.js?v=3"></script>
+    <script src="/static/js/crypto-belt.js?v=61"></script>
     <script>
         (function startCryptoPage() {
             if (typeof window.CryptoSubsystemVisualization !== 'function') {
diff --git a/templates/linux-network-subsystem.html b/templates/linux-network-subsystem.html
new file mode 100644
index 0000000..b5b0b0b
--- /dev/null
+++ b/templates/linux-network-subsystem.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Linux Network Stack Kernel Subsystem - TCP/IP, BBR, Netfilter Visualization</title>
+    <link rel="icon" href="/favicon.ico" sizes="any">
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/images/apple-touch-icon.png">
+    <meta name="description" content="Interactive Linux network stack visualization: the packet path from userspace socket syscalls through TCP/UDP, IP, Netfilter, the NIC driver and the wire, with a live TCP BBR bottleneck-bandwidth and min-RTT model.">
+    <meta name="keywords" content="
+linux network stack,
+linux network subsystem,
+tcp ip stack linux,
+tcp bbr congestion control,
+bottleneck bandwidth min rtt,
+netfilter conntrack,
+sk_buff napi softirq,
+linux socket api,
+linux packet path visualization,
+linux kernel networking
+">
+    <meta name="robots" content="index, follow">
+    <link rel="canonical" href="/linux-network-subsystem">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="/linux-network-subsystem">
+    <meta property="og:title" content="Linux Network Stack Kernel Subsystem Visualization">
+    <meta property="og:description" content="The Linux packet path visualized: socket syscalls, TCP/UDP congestion control (BBR), IP routing, Netfilter/conntrack, the NIC driver and the wire — in real time.">
+    <meta property="og:image" content="/static/images/009.png">
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="/linux-network-subsystem">
+    <meta property="twitter:title" content="Linux Network Stack Kernel Subsystem Visualization">
+    <meta property="twitter:description" content="How a packet travels the Linux kernel network stack, plus a live TCP BBR path model (bottleneck bandwidth × min RTT).">
+    <meta property="twitter:image" content="/static/images/009.png">
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "WebPage",
+        "name": "Linux Network Stack Kernel Subsystem Visualization",
+        "url": "https://ring-0.sh/linux-network-subsystem",
+        "description": "Interactive visualization of the Linux kernel network stack: the packet path from userspace socket syscalls through TCP/UDP, IP, Netfilter, the NIC driver and the wire, with a live TCP BBR bottleneck-bandwidth and min-RTT model.",
+        "about": [
+            {"@type": "Thing", "name": "Linux kernel network stack"},
+            {"@type": "Thing", "name": "TCP BBR congestion control"},
+            {"@type": "Thing", "name": "Netfilter"}
+        ],
+        "isPartOf": {"@type": "WebSite", "name": "ring-0.sh", "url": "https://ring-0.sh/"}
+    }
+    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/css/main.css?v=3">
+    <style>
+        body {
+            margin: 0;
+            background: #0E1114;
+            color: #d4dbe8;
+            font-family: "Share Tech Mono", monospace;
+        }
+        .seo-network {
+            position: absolute;
+            left: -10000px;
+            width: 1px;
+            height: 1px;
+            overflow: hidden;
+        }
+    </style>
+</head>
+<body>
+    <h1 class="seo-network">Linux Network Stack Kernel Subsystem</h1>
+    <section class="seo-network">
+        <h2>The Packet Path Through the Linux Kernel</h2>
+        <p>
+            This page visualizes the Linux network stack as a layered funnel from userspace to
+            the wire. A packet leaves an application through a socket syscall, is buffered by the
+            socket layer, paced by the transport layer (TCP with a congestion window and RTT
+            estimate, or connectionless UDP), routed by the IP layer, inspected by Netfilter and
+            connection tracking, handed to the NIC driver over DMA rings and NAPI/softirq polling,
+            and finally serialized onto the wire by the network interface.
+        </p>
+        <h2>Stack Layers</h2>
+        <ul>
+            <li><strong>Userspace</strong> &mdash; socket(), connect(), sendmsg/recvmsg, epoll and poll.</li>
+            <li><strong>Socket API</strong> &mdash; struct sock, accept backlog, send/receive buffers and backpressure.</li>
+            <li><strong>TCP / UDP</strong> &mdash; congestion window (cwnd), RTT/RTO estimation, retransmission, SACK.</li>
+            <li><strong>IP</strong> &mdash; FIB routing lookup, fragmentation, TTL, ICMP, IPv4 and IPv6.</li>
+            <li><strong>Netfilter</strong> &mdash; iptables/nftables hooks, NAT and conntrack state (NEW/ESTABLISHED).</li>
+            <li><strong>Driver</strong> &mdash; DMA ring buffers, TX queue/qdisc, NAPI and softirq, GRO/GSO offload.</li>
+            <li><strong>NIC</strong> &mdash; PHY/MAC, link speed and duplex, RX/TX error counters, virtio-net in cloud.</li>
+        </ul>
+        <h2>TCP BBR Path Model</h2>
+        <p>
+            The page includes a live TCP BBR model. BBR (Bottleneck Bandwidth and Round-trip
+            propagation time) continuously measures the maximum delivery rate it has seen (BtlBw)
+            and the minimum round-trip time (RTprop). Their product is the bandwidth-delay product
+            (BDP) &mdash; the amount of data in flight that keeps the path full without queueing.
+            BBR paces sending at BtlBw and caps inflight near BDP, avoiding the bufferbloat that
+            loss-based CUBIC creates by filling router buffers until packets drop. It is control
+            theory rather than machine learning, but it is a model of the network path learned
+            online from the traffic itself.
+        </p>
+    </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/network-stack.js?v=41"></script>
+    <script>
+        (function startNetworkPage() {
+            if (typeof window.NetworkStackVisualization !== 'function') {
+                console.error('NetworkStackVisualization is not available');
+                return;
+            }
+            const viz = new window.NetworkStackVisualization();
+            const ok = viz.init('network-stack-container');
+            if (ok === false) return;
+            viz.activate();
+        })();
+    </script>
+</body>
+</html>
diff --git a/templates/linux-processes-subsystem.html b/templates/linux-processes-subsystem.html
index 615617a..91e27ba 100644
--- a/templates/linux-processes-subsystem.html
+++ b/templates/linux-processes-subsystem.html
@@ -62,7 +62,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=27"></script>
+    <script src="/static/js/processes-belt.js?v=39"></script>
     <script>
         (function startProcessesPage() {
             if (typeof window.ProcessesSubsystemVisualization !== 'function') {