diff --git a/.fallowrc.json b/.fallowrc.json
index c1961e7724..103cd2b267 100644
--- a/.fallowrc.json
+++ b/.fallowrc.json
@@ -28,6 +28,7 @@
     "examples/test-app/**",
     "scripts/perf/**",
     "scripts/layering/**",
+    "scripts/depgraph/**",
     "scripts/maestro-conformance/**",
     "apple/runner/AgentDeviceRunner/AgentDeviceRunnerUITests.xctestplan",
     "scripts/write-xcuitest-cache-metadata.mjs"
diff --git a/package.json b/package.json
index 2a894e10e8..8dc8c9a085 100644
--- a/package.json
+++ b/package.json
@@ -118,6 +118,8 @@
     "check:affected": "node --experimental-strip-types scripts/check-affected/run.ts",
     "check:affected:test": "node --experimental-strip-types --test scripts/check-affected/model.test.ts scripts/check-affected/run.test.ts",
     "check:layering": "node --experimental-strip-types --test scripts/layering/model.test.ts && node --experimental-strip-types scripts/layering/check.ts",
+    "depgraph": "node --experimental-strip-types scripts/depgraph/build.ts",
+    "depgraph:test": "node --experimental-strip-types --test scripts/depgraph/model.test.ts",
     "check:production-exports": "fallow dead-code --config fallow-production-exports.json --production --unused-exports --fail-on-issues",
     "check:bundle-owner-files": "node --experimental-strip-types scripts/check-bundle-owner-files.ts",
     "check:freerange": "fr",
diff --git a/scripts/depgraph/README.md b/scripts/depgraph/README.md
new file mode 100644
index 0000000000..cfc189c5af
--- /dev/null
+++ b/scripts/depgraph/README.md
@@ -0,0 +1,97 @@
+# Dependency graph viewer
+
+```sh
+pnpm depgraph                       # -> .tmp/depgraph/index.html (+ index.json)
+pnpm depgraph --out /tmp/graph.html
+pnpm depgraph:test
+```
+
+Renders every production file under `src/` (tests excluded) as an interactive graph in a
+single self-contained HTML file — no external requests, no build step, no runtime
+dependency. Open it from `file://`, publish it as a static page, or embed it.
+
+## When to reach for this
+
+It pays for itself on three questions, and misleads on a fourth.
+
+**"What am I about to break?"** `nodes[].in` is the dependent count — blast radius. Size the
+nodes by dependents and the files you should touch carefully are the big ones. Faster than
+grepping, and it counts type-only and dynamic edges that a grep for `from '...'` misses.
+
+**"Where is the debt actually concentrated?"** Zone-level counts (`zoneEdges`) answer "which
+boundary carries the most traffic" in one query. The pass that produced ADR-adjacent findings
+started here.
+
+**"What is wrong that the gate does not enforce?"** This is the part CI cannot give you. The
+gate rejects value-import cycles (R4) and spine back-edges (R5); the graph additionally reports:
+
+- **transitively redundant value edges** — the target is still reachable from the source at
+  distance >= 2, so the direct import changes nothing about what the module can see. A
+  _candidate_, not a defect: a direct import is often clearer than a re-export chain. There are
+  ~1300 of these, so treat it as a place to look, never a work list.
+- **type-only and dynamic cycles** — 8 of them, all outside R4 by design (a type-only import is
+  free at runtime, a dynamic one is a deliberate cold-start seam). Worth reading when a module
+  feels hard to reason about.
+
+**Where it misleads: a cluster's size is not its difficulty.** This is worth stating plainly
+because it already cost a day. The `commands -> client` cluster looked like the obvious win — 28
+type-only inversions, all pointing at one file. Moving that file down took the gate from **42 to
+48**, because the vocabulary it holds *depends on* `commands/`, `metro/`, `core/` and `remote/`;
+declaring it in `contracts/` made the foundation depend on the layers above it. The picture shows
+you an edge's weight, not whether it can be reversed.
+
+So: use the render to find a candidate, then answer "can this move?" numerically before planning
+anything. The question is always *what does the target itself import, and what rank is that?*
+
+```sh
+pnpm depgraph
+# Zone pairs that invert the ranked spine, by type-only edge count. Reproduces the gate's R6
+# breakdown from the JSON alone — if these disagree with TYPE_INVERSION_BASELINE, regenerate.
+node -e "const j=require('./.tmp/depgraph/index.json');
+  const rank=Object.fromEntries(j.zones.map(z=>[z.id,z.rank]));
+  j.zoneEdges
+    .filter(e=>rank[e.from]!=null && rank[e.to]!=null && rank[e.from]<rank[e.to])
+    .map(e=>({pair:e.from+' -> '+e.to, typeOnly:e.count-e.valueCount}))
+    .filter(e=>e.typeOnly>0).sort((a,b)=>b.typeOnly-a.typeOnly)
+    .forEach(e=>console.log(String(e.typeOnly).padStart(4), e.pair));"
+```
+
+Note `zoneEdges[].backEdge` flags **R5 value** back-edges only, and there are none — filtering on
+it returns an empty list, which is the gate passing, not a broken query.
+
+
+## What is authoritative
+
+`pnpm check:layering` is. The viewer reads the same model, so the numbers should agree — its R6
+count matching `TYPE_INVERSION_BASELINE` is a useful self-check — but if they ever diverge, the
+gate is right and the graph is stale. Nothing here runs in CI, and nothing here should gate a
+merge: it is an instrument, not a rule.
+
+## Why it reuses the layering gate
+
+The graph is extracted with `scripts/layering/model.ts`, the same module
+`scripts/layering/check.ts` uses in CI. File set, zone partition, edge kinds
+(value / type-only / dynamic), and cycle definition are therefore identical to the rules
+the gate enforces — a separate extractor with its own resolution behaviour would draw a
+graph nobody is enforcing. Cross-checked once against `dependency-cruiser` 3.1.1 (at the commit it was written): same
+modules and edges, plus 88 dynamic/type-only edges dependency-cruiser fails to resolve.
+
+## What the view encodes
+
+- **Colour** is the ranked spine (`kernel` sink → `cli`); zones sharing a rank differ in
+  lightness. Unranked zones (`UNRANKED_ZONES`) get a muted palette of their own, because
+  the gate deliberately asserts no ordering over them.
+- **Size** is coupling, dependents, or lines — dependents is the blast-radius metric.
+- **Clusters** layout: folder groups placed by how much they import from each other, then
+  files relaxed inside their group. Tight blobs are cohesive; long bridges are coupling.
+- **Layers** layout: x is the longest path to a leaf over static value imports. R4
+  guarantees that subgraph is a DAG, so every edge should read leftwards.
+- **Overlays** for spine back-edges (R5), import cycles, and transitively redundant edges.
+
+A "redundant" edge means the target is still reachable from the source at distance >= 2
+over value edges, so removing the direct import would not change what the module can see.
+That makes it a _candidate_, not a defect: plenty of direct imports are clearer than
+relying on a re-export chain.
+
+Layouts are computed at build time and shipped as coordinates, so the viewer never runs a
+physics simulation on the reader's phone, and the same commit always renders identically.
diff --git a/scripts/depgraph/build.ts b/scripts/depgraph/build.ts
new file mode 100644
index 0000000000..148ee106ab
--- /dev/null
+++ b/scripts/depgraph/build.ts
@@ -0,0 +1,156 @@
+// Dependency graph generator — emits a single self-contained HTML file.
+//
+//   node --experimental-strip-types scripts/depgraph/build.ts [--out <path>]
+//
+// The output has no external requests of any kind: data, styles, and viewer script are
+// inlined, so it works from `file://`, from a static host, or inside a sandboxed page.
+
+import { execFileSync } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { listSourceFiles } from '../layering/check.ts';
+import { resolveImportEdges, zoneRank } from '../layering/model.ts';
+import { clusterLayout, computeLevels, layeredLayout } from './layout.ts';
+import { buildGraph, type GraphData } from './model.ts';
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+
+const repoRoot = execFileSync('git', ['rev-parse', '--show-toplevel'], {
+  encoding: 'utf8',
+}).trim();
+
+/** Compact wire form. Nodes and edges are index-addressed to keep the payload small. */
+type Payload = {
+  generated: { commit: string; files: number; edges: number };
+  zones: { id: string; rank: number | null; classification: string; files: number; loc: number }[];
+  zoneEdges: GraphData['zoneEdges'];
+  nodes: {
+    id: string;
+    z: number;
+    loc: number;
+    in: number;
+    out: number;
+    lvl: number;
+    cyc: number;
+    cx: number;
+    cy: number;
+    lx: number;
+    ly: number;
+  }[];
+  /**
+   * `[fromIndex, toIndex, kind, flags]`; kind 0=value 1=type 2=dynamic,
+   * flags bit0=R5 back-edge, bit1=transitively redundant, bit2=R6 type inversion.
+   */
+  edges: [number, number, number, number][];
+  cycles: { kind: string; path: number[] }[];
+};
+
+function headCommit(): string {
+  try {
+    return execFileSync('git', ['rev-parse', '--short', 'HEAD'], {
+      cwd: repoRoot,
+      encoding: 'utf8',
+    }).trim();
+  } catch {
+    return 'unknown';
+  }
+}
+
+export function buildPayload(): Payload {
+  const files = listSourceFiles();
+  const sources = new Map(
+    files.map((file) => [file, fs.readFileSync(path.join(repoRoot, file), 'utf8')]),
+  );
+  const resolved = resolveImportEdges(sources);
+  const graph = buildGraph(sources, resolved);
+  const levels = computeLevels(graph.nodes, graph.edges);
+  const cluster = clusterLayout(graph);
+  const layered = layeredLayout(graph, levels);
+
+  const zoneIndex = new Map(graph.zones.map((zone, index) => [zone.id, index]));
+  const nodeIndex = new Map(graph.nodes.map((node, index) => [node.id, index]));
+  const round = (value: number): number => Math.round(value * 10) / 10;
+
+  return {
+    generated: { commit: headCommit(), files: graph.nodes.length, edges: graph.edges.length },
+    zones: graph.zones.map((zone) => ({ ...zone, rank: zoneRank(zone.id) })),
+    zoneEdges: graph.zoneEdges,
+    nodes: graph.nodes.map((node) => ({
+      id: node.id.replace(/^src\//, ''),
+      z: zoneIndex.get(node.zone)!,
+      loc: node.loc,
+      in: node.fanIn,
+      out: node.fanOut,
+      lvl: levels.get(node.id) ?? 0,
+      cyc: node.cycle,
+      cx: round(cluster.get(node.id)!.x),
+      cy: round(cluster.get(node.id)!.y),
+      lx: round(layered.get(node.id)!.x),
+      ly: round(layered.get(node.id)!.y),
+    })),
+    edges: graph.edges.map((edge) => [
+      nodeIndex.get(edge.from)!,
+      nodeIndex.get(edge.to)!,
+      edge.kind === 'value' ? 0 : edge.kind === 'type' ? 1 : 2,
+      (edge.backEdge ? 1 : 0) | (edge.redundant ? 2 : 0) | (edge.typeInversion ? 4 : 0),
+    ]),
+    cycles: graph.cycles.map((cycle) => ({
+      kind: cycle.kind,
+      path: cycle.path.map((file) => nodeIndex.get(file)!),
+    })),
+  };
+}
+
+function renderHtml(payload: Payload): string {
+  const template = fs.readFileSync(path.join(here, 'viewer.html'), 'utf8');
+  const script = fs.readFileSync(path.join(here, 'viewer.js'), 'utf8');
+  const styles = fs.readFileSync(path.join(here, 'viewer.css'), 'utf8');
+  // `</script>` inside JSON would close the inline tag early; `<!--` would open a comment.
+  const data = JSON.stringify(payload)
+    .replace(/</g, '\\u003c')
+    .replace(/>/g, '\\u003e')
+    .replace(/\u2028/g, '\\u2028')
+    .replace(/\u2029/g, '\\u2029');
+  return template
+    .replace('/*__STYLES__*/', () => styles)
+    .replace('"__DATA__"', () => data)
+    .replace('/*__SCRIPT__*/', () => script);
+}
+
+export function main(argv: readonly string[]): number {
+  const outFlag = argv.indexOf('--out');
+  const outPath =
+    outFlag >= 0 && argv[outFlag + 1]
+      ? path.resolve(argv[outFlag + 1]!)
+      : path.join(repoRoot, '.tmp/depgraph/index.html');
+
+  const payload = buildPayload();
+  const html = renderHtml(payload);
+  fs.mkdirSync(path.dirname(outPath), { recursive: true });
+  fs.writeFileSync(outPath, html);
+
+  const jsonPath = outPath.replace(/\.html$/, '.json');
+  fs.writeFileSync(jsonPath, `${JSON.stringify(payload, null, 2)}\n`);
+
+  const valueCycles = payload.cycles.filter((cycle) => cycle.kind === 'value').length;
+  const otherCycles = payload.cycles.length - valueCycles;
+  const backEdges = payload.edges.filter(([, , , flags]) => flags & 1).length;
+  const redundant = payload.edges.filter(([, , , flags]) => flags & 2).length;
+  const typeInversions = payload.edges.filter(([, , , flags]) => flags & 4).length;
+  process.stdout.write(
+    `Dependency graph: ${payload.generated.files} files, ${payload.generated.edges} edges, ` +
+      `${payload.zones.length} zones\n` +
+      `  value-import cycles (R4): ${valueCycles}\n` +
+      `  type-only/dynamic cycles (not gate-rejected): ${otherCycles}\n` +
+      `  spine back-edges (R5): ${backEdges}\n` +
+      `  type-only spine inversions (R6): ${typeInversions}\n` +
+      `  transitively redundant value edges: ${redundant}\n` +
+      `  wrote ${path.relative(repoRoot, outPath)} and ${path.relative(repoRoot, jsonPath)}\n`,
+  );
+  return 0;
+}
+
+if (import.meta.url === pathToFileURL(process.argv[1] ?? '').href) {
+  process.exit(main(process.argv.slice(2)));
+}
diff --git a/scripts/depgraph/layout.ts b/scripts/depgraph/layout.ts
new file mode 100644
index 0000000000..d669c46628
Binary files /dev/null and b/scripts/depgraph/layout.ts differ
diff --git a/scripts/depgraph/model.test.ts b/scripts/depgraph/model.test.ts
new file mode 100644
index 0000000000..4cbe4ca8fd
--- /dev/null
+++ b/scripts/depgraph/model.test.ts
@@ -0,0 +1,147 @@
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { resolveImportEdges } from '../layering/model.ts';
+import { buildGraph, collapseEdges, collectCycles, markRedundantEdges } from './model.ts';
+
+function sources(entries: Record<string, string>): Map<string, string> {
+  return new Map(Object.entries(entries));
+}
+
+test('collapseEdges keeps one edge per pair at the strongest kind', () => {
+  const edges = resolveImportEdges(
+    sources({
+      'src/core/a.ts': [
+        "import type { Shape } from './b.ts';",
+        "import { run } from './b.ts';",
+        "import type { Other } from './c.ts';",
+        "void import('./d.ts');",
+      ].join('\n'),
+      'src/core/b.ts': 'export const run = 1;',
+      'src/core/c.ts': 'export type Other = string;',
+      'src/core/d.ts': 'export const lazy = 1;',
+    }),
+  );
+
+  assert.deepEqual(
+    collapseEdges(edges).map((edge) => ({ to: edge.to, kind: edge.kind })),
+    [
+      { to: 'src/core/b.ts', kind: 'value' },
+      { to: 'src/core/c.ts', kind: 'type' },
+      { to: 'src/core/d.ts', kind: 'dynamic' },
+    ],
+  );
+});
+
+test('redundant marks only value edges whose target is already reachable at distance >= 2', () => {
+  const edges = collapseEdges(
+    resolveImportEdges(
+      sources({
+        // a -> b -> c makes the direct a -> c edge removable; a -> d is the only route to d.
+        'src/core/a.ts': [
+          "import { b } from './b.ts';",
+          "import { c } from './c.ts';",
+          "import { d } from './d.ts';",
+        ].join('\n'),
+        'src/core/b.ts': "export { c as b } from './c.ts';",
+        'src/core/c.ts': 'export const c = 1;',
+        'src/core/d.ts': 'export const d = 1;',
+      }),
+    ),
+  );
+  markRedundantEdges(edges);
+
+  const flagged = edges
+    .filter((edge) => edge.redundant)
+    .map((edge) => `${edge.from} -> ${edge.to}`);
+  assert.deepEqual(flagged, ['src/core/a.ts -> src/core/c.ts']);
+});
+
+test('a type-only shortcut is never treated as redundant against a value path', () => {
+  const edges = collapseEdges(
+    resolveImportEdges(
+      sources({
+        'src/core/a.ts': ["import { b } from './b.ts';", "import type { C } from './c.ts';"].join(
+          '\n',
+        ),
+        'src/core/b.ts': "export { c as b } from './c.ts';",
+        'src/core/c.ts': 'export type C = string;\nexport const c = 1;',
+      }),
+    ),
+  );
+  markRedundantEdges(edges);
+
+  assert.deepEqual(
+    edges.filter((edge) => edge.redundant),
+    [],
+  );
+});
+
+test('collectCycles separates gate-rejected value cycles from type-only and dynamic loops', () => {
+  const valueCycle = collectCycles(
+    resolveImportEdges(
+      sources({
+        'src/core/a.ts': "import { b } from './b.ts';\nexport const a = 1;",
+        'src/core/b.ts': "import { a } from './a.ts';\nexport const b = 1;",
+      }),
+    ),
+  );
+  assert.deepEqual(
+    valueCycle.map((cycle) => cycle.kind),
+    ['value'],
+  );
+
+  const typeCycle = collectCycles(
+    resolveImportEdges(
+      sources({
+        'src/core/a.ts': "import type { B } from './b.ts';\nexport type A = B;",
+        'src/core/b.ts': "import type { A } from './a.ts';\nexport type B = A | null;",
+      }),
+    ),
+  );
+  assert.deepEqual(
+    typeCycle.map((cycle) => cycle.kind),
+    ['type'],
+  );
+
+  const dynamicCycle = collectCycles(
+    resolveImportEdges(
+      sources({
+        'src/core/a.ts': "export const a = () => import('./b.ts');",
+        'src/core/b.ts': "export const b = () => import('./a.ts');",
+      }),
+    ),
+  );
+  assert.deepEqual(
+    dynamicCycle.map((cycle) => cycle.kind),
+    ['dynamic'],
+  );
+});
+
+test('buildGraph reports zone membership, degrees, and cross-zone edge counts', () => {
+  const files = sources({
+    'src/kernel/errors.ts': 'export const fail = 1;\n',
+    'src/core/interactors/tap.ts': "import { fail } from '../../kernel/errors.ts';\n",
+    'src/commands/tap.ts': [
+      "import { fail } from '../kernel/errors.ts';",
+      "import '../core/interactors/tap.ts';",
+    ].join('\n'),
+  });
+  const graph = buildGraph(files, resolveImportEdges(files));
+
+  const kernel = graph.nodes.find((node) => node.id === 'src/kernel/errors.ts')!;
+  assert.equal(kernel.zone, 'kernel');
+  assert.equal(kernel.fanIn, 2);
+  assert.equal(kernel.fanOut, 0);
+
+  const interactor = graph.nodes.find((node) => node.id === 'src/core/interactors/tap.ts')!;
+  assert.equal(interactor.group, 'core/interactors');
+
+  assert.deepEqual(
+    graph.zoneEdges.map((edge) => `${edge.from} -> ${edge.to} (${edge.count})`),
+    ['commands -> core (1)', 'commands -> kernel (1)', 'core -> kernel (1)'],
+  );
+  assert.deepEqual(
+    graph.zones.map((zone) => zone.classification),
+    ['ranked', 'ranked', 'ranked'],
+  );
+});
diff --git a/scripts/depgraph/model.ts b/scripts/depgraph/model.ts
new file mode 100644
index 0000000000..27213f8ee6
Binary files /dev/null and b/scripts/depgraph/model.ts differ
diff --git a/scripts/depgraph/viewer.css b/scripts/depgraph/viewer.css
new file mode 100644
index 0000000000..620dcb484c
--- /dev/null
+++ b/scripts/depgraph/viewer.css
@@ -0,0 +1,774 @@
+/* Instrument-panel treatment: the canvas is the ground, chrome floats above it.
+   Rank is encoded as a sequential ramp (kernel sink -> cli) rather than 25 arbitrary
+   zone hues, so "is the spine obeyed" is readable from color alone. Unranked zones are
+   deliberately neutral — the gate makes no ordering claim about them. */
+
+:root {
+  color-scheme: light dark;
+
+  --ground: #eef0f4;
+  --ground-deep: #e3e6ec;
+  --surface: rgba(255, 255, 255, 0.86);
+  --surface-solid: #fbfcfe;
+  --line: rgba(22, 30, 45, 0.14);
+  --line-strong: rgba(22, 30, 45, 0.28);
+  --ink: #131926;
+  --ink-soft: #4a5468;
+  --ink-faint: #7b8598;
+  --accent: #1f6f8b;
+  --edge: rgba(30, 41, 61, 0.3);
+  --edge-weak: rgba(30, 41, 61, 0.15);
+  --critical: #c93a3f;
+  --warning: #b0700c;
+  --halo: rgba(255, 255, 255, 0.9);
+
+  --rank-0: #2f4b8c;
+  --rank-1: #2c7096;
+  --rank-2: #1f8f8a;
+  --rank-3: #46a05e;
+  --rank-4: #94ab3c;
+  --rank-5: #cf9130;
+  --rank-6: #cc5f37;
+  --rank-none: #7c8698;
+
+  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
+  --ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+
+  --rail: 288px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --ground: #0c0f16;
+    --ground-deep: #070910;
+    --surface: rgba(20, 25, 36, 0.88);
+    --surface-solid: #141924;
+    --line: rgba(150, 168, 200, 0.16);
+    --line-strong: rgba(150, 168, 200, 0.34);
+    --ink: #e6ebf4;
+    --ink-soft: #a3aec4;
+    --ink-faint: #6f7b91;
+    --accent: #57c8e3;
+    --edge: rgba(160, 180, 215, 0.2);
+    --edge-weak: rgba(160, 180, 215, 0.09);
+    --critical: #ff6b6f;
+    --warning: #f0a83c;
+    --halo: rgba(8, 11, 18, 0.92);
+
+    --rank-0: #5878c9;
+    --rank-1: #43a1cc;
+    --rank-2: #2fc0b6;
+    --rank-3: #5fca7e;
+    --rank-4: #b7d155;
+    --rank-5: #efb055;
+    --rank-6: #f0785a;
+    --rank-none: #8b95a9;
+  }
+}
+
+:root[data-theme='light'] {
+  --ground: #eef0f4;
+  --ground-deep: #e3e6ec;
+  --surface: rgba(255, 255, 255, 0.86);
+  --surface-solid: #fbfcfe;
+  --line: rgba(22, 30, 45, 0.14);
+  --line-strong: rgba(22, 30, 45, 0.28);
+  --ink: #131926;
+  --ink-soft: #4a5468;
+  --ink-faint: #7b8598;
+  --accent: #1f6f8b;
+  --edge: rgba(30, 41, 61, 0.3);
+  --edge-weak: rgba(30, 41, 61, 0.15);
+  --critical: #c93a3f;
+  --warning: #b0700c;
+  --halo: rgba(255, 255, 255, 0.9);
+  --rank-0: #2f4b8c;
+  --rank-1: #2c7096;
+  --rank-2: #1f8f8a;
+  --rank-3: #46a05e;
+  --rank-4: #94ab3c;
+  --rank-5: #cf9130;
+  --rank-6: #cc5f37;
+  --rank-none: #7c8698;
+}
+
+:root[data-theme='dark'] {
+  --ground: #0c0f16;
+  --ground-deep: #070910;
+  --surface: rgba(20, 25, 36, 0.88);
+  --surface-solid: #141924;
+  --line: rgba(150, 168, 200, 0.16);
+  --line-strong: rgba(150, 168, 200, 0.34);
+  --ink: #e6ebf4;
+  --ink-soft: #a3aec4;
+  --ink-faint: #6f7b91;
+  --accent: #57c8e3;
+  --edge: rgba(160, 180, 215, 0.2);
+  --edge-weak: rgba(160, 180, 215, 0.09);
+  --critical: #ff6b6f;
+  --warning: #f0a83c;
+  --halo: rgba(8, 11, 18, 0.92);
+  --rank-0: #5878c9;
+  --rank-1: #43a1cc;
+  --rank-2: #2fc0b6;
+  --rank-3: #5fca7e;
+  --rank-4: #b7d155;
+  --rank-5: #efb055;
+  --rank-6: #f0785a;
+  --rank-none: #8b95a9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--ground);
+  color: var(--ink);
+  font-family: var(--ui);
+  -webkit-text-size-adjust: 100%;
+  overscroll-behavior: none;
+}
+
+#stage {
+  position: fixed;
+  inset: 0;
+  touch-action: none;
+}
+
+#canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+}
+
+#canvas.dragging {
+  cursor: grabbing;
+}
+
+/* ---------- top strip ---------- */
+
+#strip {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 10px 16px;
+  background: linear-gradient(to bottom, var(--ground-deep) 20%, transparent);
+  pointer-events: none;
+  z-index: 3;
+}
+
+#strip h1 {
+  margin: 0;
+  font-family: var(--mono);
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--ink);
+  white-space: nowrap;
+}
+
+#strip h1 span {
+  color: var(--ink-faint);
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.stats {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  pointer-events: auto;
+}
+
+.stat {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  padding: 4px 9px;
+  border: 1px solid var(--line);
+  border-radius: 3px;
+  background: var(--surface);
+  backdrop-filter: blur(8px);
+  font-size: 11px;
+  color: var(--ink-soft);
+  white-space: nowrap;
+}
+
+.stat b {
+  font-family: var(--mono);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  color: var(--ink);
+}
+
+.stat.is-critical b {
+  color: var(--critical);
+}
+
+.stat.is-warning b {
+  color: var(--warning);
+}
+
+.stat.is-ok b {
+  color: var(--rank-3);
+}
+
+/* ---------- control rail ---------- */
+
+#rail {
+  position: fixed;
+  top: 52px;
+  left: 12px;
+  bottom: 12px;
+  width: var(--rail);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 14px;
+  overflow-y: auto;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  background: var(--surface);
+  backdrop-filter: blur(14px);
+  z-index: 4;
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.group > h2 {
+  margin: 0;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.11em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+
+#search {
+  width: 100%;
+  padding: 7px 9px;
+  border: 1px solid var(--line-strong);
+  border-radius: 3px;
+  background: var(--surface-solid);
+  color: var(--ink);
+  font-family: var(--mono);
+  font-size: 12px;
+}
+
+#search::placeholder {
+  color: var(--ink-faint);
+}
+
+.segmented {
+  display: flex;
+  border: 1px solid var(--line-strong);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.segmented button {
+  flex: 1;
+  padding: 6px 4px;
+  border: 0;
+  border-right: 1px solid var(--line-strong);
+  background: transparent;
+  color: var(--ink-soft);
+  font-family: var(--ui);
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.segmented button:last-child {
+  border-right: 0;
+}
+
+.segmented button[aria-pressed='true'] {
+  background: var(--accent);
+  color: var(--ground-deep);
+  font-weight: 600;
+}
+
+.checks {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.check {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--ink-soft);
+  cursor: pointer;
+}
+
+.check input {
+  accent-color: var(--accent);
+  margin: 0;
+}
+
+.swatch {
+  width: 9px;
+  height: 9px;
+  border-radius: 2px;
+  flex: none;
+}
+
+.legend {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.legend-row {
+  display: grid;
+  grid-template-columns: 10px 1fr auto;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 0;
+  font-size: 11.5px;
+  color: var(--ink-soft);
+  background: none;
+  border: 0;
+  text-align: left;
+  cursor: pointer;
+  font-family: var(--ui);
+}
+
+.legend-row[aria-pressed='false'] {
+  opacity: 0.38;
+}
+
+.legend-row .zone {
+  font-family: var(--mono);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.legend-row .count {
+  font-family: var(--mono);
+  font-size: 10.5px;
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-faint);
+}
+
+.legend-row .zone i {
+  font-style: normal;
+  color: var(--ink-faint);
+}
+
+.hotspots {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.hotspot {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 8px;
+  align-items: center;
+  padding: 4px 6px;
+  border: 0;
+  border-radius: 3px;
+  background: none;
+  color: var(--ink-soft);
+  font-family: var(--mono);
+  font-size: 11px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.hotspot:hover,
+.hotspot:focus-visible {
+  background: var(--ground-deep);
+  color: var(--ink);
+}
+
+.hotspot .metric {
+  font-variant-numeric: tabular-nums;
+  color: var(--accent);
+}
+
+.hint {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--ink-faint);
+}
+
+/* ---------- detail panel ---------- */
+
+#detail {
+  position: fixed;
+  top: 52px;
+  right: 12px;
+  bottom: 12px;
+  width: 340px;
+  display: none;
+  flex-direction: column;
+  gap: 12px;
+  padding: 14px;
+  overflow-y: auto;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  background: var(--surface);
+  backdrop-filter: blur(14px);
+  z-index: 5;
+}
+
+#detail.open {
+  display: flex;
+}
+
+.detail-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.detail-head h2 {
+  margin: 0;
+  flex: 1;
+  font-family: var(--mono);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+
+.close {
+  flex: none;
+  width: 26px;
+  height: 26px;
+  border: 1px solid var(--line-strong);
+  border-radius: 3px;
+  background: transparent;
+  color: var(--ink-soft);
+  font-size: 15px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.facts {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.fact {
+  padding: 6px 8px;
+  border: 1px solid var(--line);
+  border-radius: 3px;
+}
+
+.fact dt {
+  margin: 0 0 2px;
+  font-size: 9.5px;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+
+.fact dd {
+  margin: 0;
+  font-family: var(--mono);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  color: var(--ink);
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 7px;
+  border-radius: 999px;
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+}
+
+.pill.rank {
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+  color: var(--ink);
+}
+
+.pill.critical {
+  background: color-mix(in srgb, var(--critical) 20%, transparent);
+  color: var(--critical);
+}
+
+.pill.warning {
+  background: color-mix(in srgb, var(--warning) 22%, transparent);
+  color: var(--warning);
+}
+
+.deps h3 {
+  margin: 0 0 5px;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+
+.deps ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  max-height: 190px;
+  overflow-y: auto;
+}
+
+.deps button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 5px;
+  border: 0;
+  border-radius: 3px;
+  background: none;
+  color: var(--ink-soft);
+  font-family: var(--mono);
+  font-size: 11px;
+  text-align: left;
+  cursor: pointer;
+  overflow-wrap: anywhere;
+}
+
+.deps button:hover,
+.deps button:focus-visible {
+  background: var(--ground-deep);
+  color: var(--ink);
+}
+
+.tag {
+  flex: none;
+  padding: 1px 4px;
+  border-radius: 2px;
+  font-size: 9px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  background: var(--ground-deep);
+  color: var(--ink-faint);
+}
+
+.tag.type {
+  color: var(--rank-1);
+}
+
+.tag.dynamic {
+  color: var(--rank-5);
+}
+
+.tag.redundant {
+  color: var(--warning);
+}
+
+.tag.back {
+  color: var(--critical);
+}
+
+.empty {
+  margin: 0;
+  font-size: 11px;
+  font-style: italic;
+  color: var(--ink-faint);
+}
+
+/* ---------- floating controls ---------- */
+
+#zoom {
+  position: fixed;
+  right: 12px;
+  bottom: 12px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  overflow: hidden;
+  background: var(--surface);
+  backdrop-filter: blur(8px);
+  z-index: 3;
+}
+
+#zoom button {
+  width: 34px;
+  height: 32px;
+  border: 0;
+  border-bottom: 1px solid var(--line);
+  background: transparent;
+  color: var(--ink-soft);
+  font-family: var(--mono);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+#zoom button:last-child {
+  border-bottom: 0;
+}
+
+#rail-toggle {
+  display: none;
+}
+
+.sheet-head {
+  display: none;
+}
+
+button:focus-visible,
+input:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+#tooltip {
+  position: fixed;
+  z-index: 6;
+  display: none;
+  padding: 4px 7px;
+  border: 1px solid var(--line-strong);
+  border-radius: 3px;
+  background: var(--surface-solid);
+  color: var(--ink);
+  font-family: var(--mono);
+  font-size: 11px;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+/* ---------- mobile: rail becomes a bottom sheet ---------- */
+
+@media (max-width: 860px) {
+  #strip {
+    gap: 10px;
+    padding: 8px 10px;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .stats {
+    width: 100%;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+    padding-bottom: 2px;
+  }
+
+  .stats::-webkit-scrollbar {
+    display: none;
+  }
+
+  #strip h1 {
+    font-size: 11px;
+  }
+
+  #strip h1 span {
+    display: none;
+  }
+
+  .stat {
+    font-size: 10px;
+    padding: 3px 7px;
+  }
+
+  #rail-toggle {
+    display: block;
+    position: fixed;
+    left: 10px;
+    bottom: 10px;
+    z-index: 6;
+    padding: 9px 14px;
+    border: 1px solid var(--line-strong);
+    border-radius: 4px;
+    background: var(--surface-solid);
+    color: var(--ink);
+    font-family: var(--mono);
+    font-size: 12px;
+    cursor: pointer;
+  }
+
+  #rail {
+    top: auto;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: auto;
+    max-height: 64vh;
+    border-radius: 10px 10px 0 0;
+    border-bottom: 0;
+    transform: translateY(101%);
+    transition: transform 0.22s ease;
+    padding-bottom: max(16px, env(safe-area-inset-bottom));
+  }
+
+  /* The opener is a floating chip; once the sheet is up, its own sticky header owns the
+     dismiss action, so nothing floats over the scrolling list. */
+  .sheet-head {
+    position: sticky;
+    top: -14px;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    margin: -14px -14px 0;
+    padding: 10px 14px;
+    background: var(--surface-solid);
+    border-bottom: 1px solid var(--line);
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--ink-faint);
+  }
+
+  #rail.open {
+    transform: translateY(0);
+  }
+
+  #detail {
+    top: auto;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: auto;
+    max-height: 66vh;
+    border-radius: 10px 10px 0 0;
+  }
+
+  #zoom {
+    bottom: 58px;
+  }
+
+  #tooltip {
+    display: none !important;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #rail {
+    transition: none;
+  }
+}
diff --git a/scripts/depgraph/viewer.html b/scripts/depgraph/viewer.html
new file mode 100644
index 0000000000..1b96057c27
--- /dev/null
+++ b/scripts/depgraph/viewer.html
@@ -0,0 +1,125 @@
+<title>agent-device — module dependency graph</title>
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+<style>
+  /*__STYLES__*/
+</style>
+
+<div id="stage">
+  <canvas id="canvas"></canvas>
+</div>
+
+<header id="strip">
+  <h1>agent-device <span id="commit"></span></h1>
+  <div class="stats" id="stats"></div>
+</header>
+
+<button id="rail-toggle" type="button" aria-expanded="false" aria-controls="rail">Controls</button>
+
+<aside id="rail" aria-label="Graph controls">
+  <div class="sheet-head">
+    <span>Controls</span>
+    <button type="button" class="close" id="rail-done" aria-label="Hide controls">×</button>
+  </div>
+
+  <div class="group">
+    <h2>Find a file</h2>
+    <input
+      id="search"
+      type="search"
+      placeholder="core/interactors/tap"
+      autocomplete="off"
+      spellcheck="false"
+      aria-label="Filter files by path"
+    />
+    <p class="hint" id="search-hint">
+      Drag to pan, pinch or scroll to zoom, tap a node for detail.
+    </p>
+  </div>
+
+  <div class="group">
+    <h2>Layout</h2>
+    <div class="segmented" id="layout-mode" role="group" aria-label="Layout">
+      <button type="button" data-layout="cluster" aria-pressed="true">Clusters</button>
+      <button type="button" data-layout="layered" aria-pressed="false">Layers</button>
+    </div>
+    <p class="hint" id="layout-hint"></p>
+  </div>
+
+  <div class="group">
+    <h2>Size nodes by</h2>
+    <div class="segmented" id="size-mode" role="group" aria-label="Node size metric">
+      <button type="button" data-size="degree" aria-pressed="true">Coupling</button>
+      <button type="button" data-size="in" aria-pressed="false">Dependents</button>
+      <button type="button" data-size="loc" aria-pressed="false">Lines</button>
+    </div>
+  </div>
+
+  <div class="group">
+    <h2>Overlay</h2>
+    <div class="checks" id="overlays">
+      <label class="check"
+        ><input type="checkbox" id="show-back" /><span
+          class="swatch"
+          style="background: var(--critical)"
+        ></span
+        >Spine back-edges (R5)</label
+      >
+      <label class="check"
+        ><input type="checkbox" id="show-cycles" /><span
+          class="swatch"
+          style="background: var(--critical)"
+        ></span
+        >Import cycles</label
+      >
+      <label class="check"
+        ><input type="checkbox" id="show-type-inversion" /><span
+          class="swatch"
+          style="background: var(--warning)"
+        ></span
+        >Type-only inversions (R6)</label
+      >
+      <label class="check"
+        ><input type="checkbox" id="show-redundant" /><span
+          class="swatch"
+          style="background: var(--warning)"
+        ></span
+        >Redundant edges</label
+      >
+      <label class="check"><input type="checkbox" id="hide-weak" />Static value edges only</label>
+      <label class="check"
+        ><input type="checkbox" id="show-labels" checked />Labels when zoomed</label
+      >
+    </div>
+  </div>
+
+  <div class="group">
+    <h2>Zones — rank ◄ colour</h2>
+    <div class="legend" id="legend"></div>
+    <p class="hint">
+      Colour is the layering gate's spine rank: <b>kernel</b> sink through <b>cli</b>. Grey zones
+      are intentionally unranked — R1–R4 still apply, but the gate asserts no ordering over them.
+    </p>
+  </div>
+
+  <div class="group">
+    <h2>Hotspots — most depended on</h2>
+    <div class="hotspots" id="hotspots"></div>
+  </div>
+</aside>
+
+<section id="detail" aria-live="polite"></section>
+
+<div id="zoom">
+  <button type="button" id="zoom-in" aria-label="Zoom in">+</button>
+  <button type="button" id="zoom-out" aria-label="Zoom out">−</button>
+  <button type="button" id="zoom-fit" aria-label="Fit graph to screen">⤢</button>
+</div>
+
+<div id="tooltip" role="status"></div>
+
+<script id="graph-data" type="application/json">
+  "__DATA__"
+</script>
+<script>
+  /*__SCRIPT__*/
+</script>
diff --git a/scripts/depgraph/viewer.js b/scripts/depgraph/viewer.js
new file mode 100644
index 0000000000..44ea0f5d12
--- /dev/null
+++ b/scripts/depgraph/viewer.js
@@ -0,0 +1,920 @@
+// Zero-dependency canvas viewer. Layout coordinates arrive precomputed from
+// scripts/depgraph/build.ts, so this file only ever renders, hit-tests, and filters —
+// no physics runs on the device.
+
+(() => {
+  const data = JSON.parse(document.getElementById('graph-data').textContent);
+  const nodes = data.nodes;
+  const edges = data.edges;
+  const zones = data.zones;
+
+  const KIND = ['value', 'type', 'dynamic'];
+  const FLAG_BACK = 1;
+  const FLAG_REDUNDANT = 2;
+  const FLAG_TYPE_INVERSION = 4;
+
+  const outEdges = nodes.map(() => []);
+  const inEdges = nodes.map(() => []);
+  edges.forEach((edge, index) => {
+    outEdges[edge[0]].push(index);
+    inEdges[edge[1]].push(index);
+  });
+
+  const edgeByPair = new Map();
+  edges.forEach((edge, index) => edgeByPair.set(`${edge[0]},${edge[1]}`, index));
+
+  const cycleEdges = new Set();
+  const cycleNodes = new Set();
+  for (const cycle of data.cycles) {
+    for (let index = 0; index < cycle.path.length; index++) {
+      cycleNodes.add(cycle.path[index]);
+      const next = cycle.path[index + 1];
+      if (next === undefined) continue;
+      const edgeIndex = edgeByPair.get(`${cycle.path[index]},${next}`);
+      if (edgeIndex !== undefined) cycleEdges.add(edgeIndex);
+    }
+  }
+
+  const cyclesByNode = new Map();
+  data.cycles.forEach((cycle, index) => {
+    for (const node of cycle.path) {
+      if (!cyclesByNode.has(node)) cyclesByNode.set(node, index);
+    }
+  });
+
+  const state = {
+    layout: 'cluster',
+    size: 'degree',
+    showBack: false,
+    showCycles: false,
+    showRedundant: false,
+    showTypeInversion: false,
+    hideWeak: false,
+    labels: true,
+    query: '',
+    hiddenZones: new Set(),
+    selected: null,
+    hover: null,
+  };
+
+  const canvas = document.getElementById('canvas');
+  const context = canvas.getContext('2d');
+  const tooltip = document.getElementById('tooltip');
+  const camera = { x: 0, y: 0, k: 1 };
+  let width = 0;
+  let height = 0;
+  let ratio = 1;
+  let frame = null;
+
+  const palette = {};
+  function readPalette() {
+    const styles = getComputedStyle(document.documentElement);
+    for (let rank = 0; rank <= 6; rank++) {
+      palette[rank] = styles.getPropertyValue(`--rank-${rank}`).trim();
+    }
+    palette.none = styles.getPropertyValue('--rank-none').trim();
+    palette.edge = styles.getPropertyValue('--edge').trim();
+    palette.edgeWeak = styles.getPropertyValue('--edge-weak').trim();
+    palette.critical = styles.getPropertyValue('--critical').trim();
+    palette.warning = styles.getPropertyValue('--warning').trim();
+    palette.ink = styles.getPropertyValue('--ink').trim();
+    palette.inkFaint = styles.getPropertyValue('--ink-faint').trim();
+    palette.accent = styles.getPropertyValue('--accent').trim();
+    palette.halo = styles.getPropertyValue('--halo').trim();
+  }
+
+  // Rank carries the hue; zones sharing a rank are separated by lightness, and unranked
+  // zones get a muted wheel of their own so twelve of them are still tellable apart
+  // without ever competing with the ramp.
+  let zoneColors = [];
+
+  function parseColor(value) {
+    const hex = value.replace('#', '').trim();
+    const full =
+      hex.length === 3
+        ? hex
+            .split('')
+            .map((character) => character + character)
+            .join('')
+        : hex;
+    return [
+      parseInt(full.slice(0, 2), 16),
+      parseInt(full.slice(2, 4), 16),
+      parseInt(full.slice(4, 6), 16),
+    ];
+  }
+
+  function shade(value, amount) {
+    const [red, green, blue] = parseColor(value);
+    const target = amount > 0 ? 255 : 0;
+    const weight = Math.abs(amount);
+    const mix = (channel) => Math.round(channel + (target - channel) * weight);
+    return `rgb(${mix(red)},${mix(green)},${mix(blue)})`;
+  }
+
+  function computeZoneColors() {
+    const [red, green, blue] = parseColor(
+      getComputedStyle(document.documentElement).getPropertyValue('--ground'),
+    );
+    const dark = (red * 0.299 + green * 0.587 + blue * 0.114) / 255 < 0.5;
+    const byRank = new Map();
+    for (let index = 0; index < zones.length; index++) {
+      const rank = zones[index].rank;
+      const list = byRank.get(rank) ?? [];
+      list.push(index);
+      byRank.set(rank, list);
+    }
+    zoneColors = new Array(zones.length);
+    for (const [rank, list] of byRank) {
+      list.sort((left, right) => zones[left].id.localeCompare(zones[right].id));
+      list.forEach((zoneIndex, position) => {
+        if (rank === null) {
+          const hue = (28 + (position * 320) / Math.max(list.length, 1)) % 360;
+          const lightness = (dark ? 58 : 42) + (position % 2 === 0 ? 7 : -7);
+          zoneColors[zoneIndex] = `hsl(${hue.toFixed(0)} 26% ${lightness}%)`;
+          return;
+        }
+        const offset = list.length === 1 ? 0 : (position / (list.length - 1) - 0.5) * 0.44;
+        zoneColors[zoneIndex] = shade(palette[rank], dark ? offset : -offset);
+      });
+    }
+  }
+
+  function zoneColor(zoneIndex) {
+    return zoneColors[zoneIndex] ?? palette.none;
+  }
+
+  // ---------- geometry ----------
+
+  function position(node) {
+    return state.layout === 'cluster' ? { x: node.cx, y: node.cy } : { x: node.lx, y: node.ly };
+  }
+
+  // Transition positions when the layout changes, so the eye can follow a node across
+  // the two views instead of re-finding it.
+  let morph = null;
+  function livePosition(node) {
+    const target = position(node);
+    if (!morph) return target;
+    const from =
+      morph.layout === 'cluster' ? { x: node.cx, y: node.cy } : { x: node.lx, y: node.ly };
+    return {
+      x: from.x + (target.x - from.x) * morph.t,
+      y: from.y + (target.y - from.y) * morph.t,
+    };
+  }
+
+  function radius(node) {
+    if (state.size === 'loc') return 2 + Math.sqrt(node.loc) * 0.42;
+    if (state.size === 'in') return 2.4 + Math.sqrt(node.in) * 1.5;
+    return 2.4 + Math.sqrt(node.in + node.out) * 1.15;
+  }
+
+  function screenRadius(node) {
+    return Math.max(1.5, radius(node) * Math.min(Math.max(camera.k, 0.45), 3));
+  }
+
+  function toScreen(point) {
+    return {
+      x: (point.x - camera.x) * camera.k + width / 2,
+      y: (point.y - camera.y) * camera.k + height / 2,
+    };
+  }
+
+  function visible(index) {
+    return !state.hiddenZones.has(nodes[index].z);
+  }
+
+  function matched(index) {
+    return state.query === '' || nodes[index].id.toLowerCase().includes(state.query);
+  }
+
+  function neighbourhood(index) {
+    if (index === null) return null;
+    const set = new Set([index]);
+    for (const edge of outEdges[index]) set.add(edges[edge][1]);
+    for (const edge of inEdges[index]) set.add(edges[edge][0]);
+    return set;
+  }
+
+  // ---------- rendering ----------
+
+  function resize() {
+    ratio = Math.min(window.devicePixelRatio || 1, 2);
+    width = canvas.clientWidth;
+    height = canvas.clientHeight;
+    canvas.width = Math.round(width * ratio);
+    canvas.height = Math.round(height * ratio);
+    context.setTransform(ratio, 0, 0, ratio, 0, 0);
+    schedule();
+  }
+
+  function schedule() {
+    if (frame !== null) return;
+    frame = requestAnimationFrame(() => {
+      frame = null;
+      draw();
+    });
+  }
+
+  function edgeStyle(index) {
+    const edge = edges[index];
+    const kind = edge[2];
+    if (state.hideWeak && kind !== 0) return null;
+    if (state.showBack && edge[3] & FLAG_BACK) return 'critical';
+    if (state.showTypeInversion && edge[3] & FLAG_TYPE_INVERSION) return 'warning';
+    if (state.showCycles && cycleEdges.has(index)) return 'critical';
+    if (state.showRedundant && edge[3] & FLAG_REDUNDANT) return 'warning';
+    return kind === 0 ? 'base' : 'weak';
+  }
+
+  function draw() {
+    context.clearRect(0, 0, width, height);
+    const anchor = state.selected ?? state.hover;
+    const focus = neighbourhood(anchor);
+    const buckets = { weak: [], base: [], warning: [], critical: [], focus: [] };
+
+    for (let index = 0; index < edges.length; index++) {
+      const edge = edges[index];
+      if (!visible(edge[0]) || !visible(edge[1])) continue;
+      const style = edgeStyle(index);
+      if (style === null) continue;
+      // With a node selected, its own edges are the whole story: overlay colouring stays
+      // on that node's edges and everything else drops out rather than competing.
+      if (focus) {
+        if (edge[0] !== anchor && edge[1] !== anchor) continue;
+        buckets[style === 'critical' || style === 'warning' ? style : 'focus'].push(index);
+        continue;
+      }
+      buckets[style].push(index);
+    }
+
+    const strokes = {
+      weak: { color: palette.edgeWeak, width: 0.6, alpha: 0.7 },
+      base: { color: palette.edge, width: 0.7, alpha: 1 },
+      warning: { color: palette.warning, width: 1.1, alpha: 0.75 },
+      critical: { color: palette.critical, width: 1.4, alpha: 0.9 },
+      focus: { color: palette.accent, width: 1.3, alpha: 0.95 },
+    };
+
+    for (const name of ['weak', 'base', 'warning', 'critical', 'focus']) {
+      const list = buckets[name];
+      if (list.length === 0) continue;
+      const stroke = strokes[name];
+      context.globalAlpha = stroke.alpha;
+      context.strokeStyle = stroke.color;
+      context.lineWidth = Math.max(stroke.width, stroke.width * Math.min(camera.k, 2.2));
+      context.beginPath();
+      for (const index of list) {
+        const from = toScreen(livePosition(nodes[edges[index][0]]));
+        const to = toScreen(livePosition(nodes[edges[index][1]]));
+        context.moveTo(from.x, from.y);
+        context.lineTo(to.x, to.y);
+      }
+      context.stroke();
+    }
+    context.globalAlpha = 1;
+
+    const labels = [];
+    for (let index = 0; index < nodes.length; index++) {
+      if (!visible(index)) continue;
+      const node = nodes[index];
+      const point = toScreen(livePosition(node));
+      const size = screenRadius(node);
+      if (point.x < -40 || point.y < -40 || point.x > width + 40 || point.y > height + 40) continue;
+
+      const isMatch = matched(index);
+      const inFocus = !focus || focus.has(index);
+      const flagged =
+        (state.showCycles && cycleNodes.has(index)) ||
+        (state.showBack && outEdges[index].some((edge) => edges[edge][3] & FLAG_BACK)) ||
+        (state.showTypeInversion &&
+          outEdges[index].some((edge) => edges[edge][3] & FLAG_TYPE_INVERSION));
+
+      context.globalAlpha = isMatch ? (inFocus ? 1 : 0.22) : 0.08;
+      context.beginPath();
+      context.arc(point.x, point.y, size, 0, Math.PI * 2);
+      context.fillStyle = flagged ? palette.critical : zoneColor(node.z);
+      context.fill();
+
+      if (index === state.selected || (isMatch && state.query !== '')) {
+        context.lineWidth = 1.5;
+        context.strokeStyle = index === state.selected ? palette.ink : palette.accent;
+        context.stroke();
+      }
+
+      if (
+        state.labels &&
+        isMatch &&
+        inFocus &&
+        (index === state.selected || (camera.k > 1.1 && size > 4) || size > 11)
+      ) {
+        labels.push({ point, size, node, strong: index === state.selected });
+      }
+      context.globalAlpha = 1;
+    }
+
+    labels.sort((left, right) => right.size - left.size);
+    context.font = '11px ui-monospace, SFMono-Regular, Menlo, monospace';
+    context.textBaseline = 'middle';
+    for (const label of labels.slice(0, 220)) {
+      const text = label.strong ? label.node.id : label.node.id.split('/').pop();
+      const x = label.point.x + label.size + 4;
+      const metrics = context.measureText(text);
+      context.globalAlpha = 0.82;
+      context.fillStyle = palette.halo;
+      context.fillRect(x - 2, label.point.y - 7, metrics.width + 4, 14);
+      context.globalAlpha = 1;
+      context.fillStyle = label.strong ? palette.ink : palette.inkFaint;
+      context.fillText(text, x, label.point.y);
+    }
+  }
+
+  // ---------- camera ----------
+
+  function bounds() {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (let index = 0; index < nodes.length; index++) {
+      if (!visible(index)) continue;
+      const point = position(nodes[index]);
+      minX = Math.min(minX, point.x);
+      minY = Math.min(minY, point.y);
+      maxX = Math.max(maxX, point.x);
+      maxY = Math.max(maxY, point.y);
+    }
+    if (minX === Infinity) return { minX: -100, minY: -100, maxX: 100, maxY: 100 };
+    return { minX, minY, maxX, maxY };
+  }
+
+  // The rail and the detail panel float over the canvas, so framing has to target the
+  // clear area rather than the viewport — otherwise "fit" hides a third of the graph
+  // behind the controls.
+  function insets() {
+    const wide = window.innerWidth > 860;
+    return {
+      left: wide ? 314 : 12,
+      right: wide && detail.classList.contains('open') ? 366 : 12,
+      top: wide ? 58 : 92,
+      bottom: wide ? 26 : 72,
+    };
+  }
+
+  function fit() {
+    const box = bounds();
+    const inset = insets();
+    const availableWidth = Math.max(width - inset.left - inset.right, 80);
+    const availableHeight = Math.max(height - inset.top - inset.bottom, 80);
+    const spanX = Math.max(box.maxX - box.minX, 1);
+    const spanY = Math.max(box.maxY - box.minY, 1);
+    camera.k = Math.min(availableWidth / spanX, availableHeight / spanY);
+    camera.x = (box.minX + box.maxX) / 2 - (inset.left + availableWidth / 2 - width / 2) / camera.k;
+    camera.y =
+      (box.minY + box.maxY) / 2 - (inset.top + availableHeight / 2 - height / 2) / camera.k;
+    schedule();
+  }
+
+  function zoomBy(factor, anchorX = width / 2, anchorY = height / 2) {
+    const before = {
+      x: (anchorX - width / 2) / camera.k + camera.x,
+      y: (anchorY - height / 2) / camera.k + camera.y,
+    };
+    camera.k = Math.max(0.02, Math.min(camera.k * factor, 24));
+    const after = {
+      x: (anchorX - width / 2) / camera.k + camera.x,
+      y: (anchorY - height / 2) / camera.k + camera.y,
+    };
+    camera.x += before.x - after.x;
+    camera.y += before.y - after.y;
+    schedule();
+  }
+
+  function focusNode(index, zoom = true) {
+    const point = position(nodes[index]);
+    camera.x = point.x;
+    camera.y = point.y;
+    if (zoom) camera.k = Math.max(camera.k, 2.2);
+    select(index);
+  }
+
+  function pick(clientX, clientY) {
+    const rect = canvas.getBoundingClientRect();
+    const x = clientX - rect.left;
+    const y = clientY - rect.top;
+    let best = null;
+    let bestDistance = Infinity;
+    for (let index = 0; index < nodes.length; index++) {
+      if (!visible(index) || !matched(index)) continue;
+      const point = toScreen(livePosition(nodes[index]));
+      const size = screenRadius(nodes[index]);
+      const distance = (point.x - x) ** 2 + (point.y - y) ** 2;
+      const threshold = Math.max(size + 7, 12) ** 2;
+      if (distance < threshold && distance < bestDistance) {
+        best = index;
+        bestDistance = distance;
+      }
+    }
+    return best;
+  }
+
+  // ---------- detail panel ----------
+
+  const detail = document.getElementById('detail');
+
+  // Everything below builds DOM nodes and sets `textContent` rather than assembling an
+  // HTML string. The graph payload is read out of the page (`textContent` of an inline
+  // JSON block), which makes any interpolation of it into `innerHTML` a text-to-HTML
+  // reinterpretation — CodeQL flagged four, and hand-escaping only moves the problem to
+  // "did every interpolation remember to escape". With no HTML sink there is nothing to
+  // escape: a file path containing `<` renders as that path.
+  function el(tag, props, children) {
+    const node = document.createElement(tag);
+    for (const [key, value] of Object.entries(props ?? {})) {
+      if (value === undefined || value === false) continue;
+      if (key === 'text') node.textContent = String(value);
+      else if (key === 'class') node.className = value;
+      else if (key === 'style') node.setAttribute('style', value);
+      else if (key.startsWith('data-') || key.startsWith('aria-')) {
+        node.setAttribute(key, String(value));
+      } else node[key] = value;
+    }
+    for (const child of children ?? []) {
+      if (child === null || child === undefined || child === false) continue;
+      node.append(child);
+    }
+    return node;
+  }
+
+  function replaceChildren(target, children) {
+    target.replaceChildren(...children.filter(Boolean));
+  }
+
+  function edgeTags(edge, index) {
+    const tags = [];
+    if (edge[2] !== 0)
+      tags.push(el('span', { class: `tag ${KIND[edge[2]]}`, text: KIND[edge[2]] }));
+    if (edge[3] & FLAG_BACK) tags.push(el('span', { class: 'tag back', text: 'back-edge' }));
+    if (edge[3] & FLAG_TYPE_INVERSION) {
+      tags.push(el('span', { class: 'tag redundant', text: 'type inversion' }));
+    }
+    if (edge[3] & FLAG_REDUNDANT) {
+      tags.push(el('span', { class: 'tag redundant', text: 'redundant' }));
+    }
+    if (cycleEdges.has(index)) tags.push(el('span', { class: 'tag back', text: 'cycle' }));
+    return tags;
+  }
+
+  function depList(title, edgeIndices, endpoint) {
+    const heading = el('h3', { text: `${title} — ${edgeIndices.length}` });
+    if (edgeIndices.length === 0) {
+      return el('div', { class: 'deps' }, [heading, el('p', { class: 'empty', text: 'none' })]);
+    }
+    const rows = edgeIndices
+      .map((index) => ({ index, other: edges[index][endpoint] }))
+      .sort((left, right) => nodes[left.other].id.localeCompare(nodes[right.other].id))
+      .map(({ index, other }) =>
+        el('li', {}, [
+          el('button', { type: 'button', 'data-goto': other }, [
+            el('span', { text: nodes[other].id }),
+            ...edgeTags(edges[index], index),
+          ]),
+        ]),
+      );
+    return el('div', { class: 'deps' }, [heading, el('ul', {}, rows)]);
+  }
+
+  function fact(term, value) {
+    return el('div', { class: 'fact' }, [
+      el('dt', { text: term }),
+      el('dd', { text: String(value) }),
+    ]);
+  }
+
+  function select(index) {
+    state.selected = index;
+    if (index === null) {
+      detail.classList.remove('open');
+      detail.replaceChildren();
+      syncToggle();
+      schedule();
+      return;
+    }
+
+    const node = nodes[index];
+    const zone = zones[node.z];
+    const cycleIndex = cyclesByNode.get(index);
+    const backOut = outEdges[index].filter((edge) => edges[edge][3] & FLAG_BACK).length;
+    const redundantOut = outEdges[index].filter((edge) => edges[edge][3] & FLAG_REDUNDANT).length;
+
+    const pills = [
+      el('span', {
+        class: 'pill rank',
+        text: `${zone.id}${zone.rank === null ? ' · unranked' : ` · rank ${zone.rank}`}`,
+      }),
+    ];
+    if (cycleIndex !== undefined) {
+      pills.push(
+        el('span', { class: 'pill critical', text: `${data.cycles[cycleIndex].kind} cycle` }),
+      );
+    }
+    if (backOut > 0) {
+      pills.push(el('span', { class: 'pill critical', text: `${backOut} back-edge` }));
+    }
+    if (redundantOut > 0) {
+      pills.push(el('span', { class: 'pill warning', text: `${redundantOut} redundant` }));
+    }
+
+    replaceChildren(detail, [
+      el('div', { class: 'detail-head' }, [
+        el('h2', { text: `src/${node.id}` }),
+        el('button', {
+          type: 'button',
+          class: 'close',
+          'data-close': '',
+          'aria-label': 'Close details',
+          text: '×',
+        }),
+      ]),
+      el('div', {}, pills),
+      el('dl', { class: 'facts' }, [
+        fact('Dependents', node.in),
+        fact('Dependencies', node.out),
+        fact('Lines', node.loc),
+        fact('Depth to sink', node.lvl),
+      ]),
+      depList('Imported by', inEdges[index], 0),
+      depList('Imports', outEdges[index], 1),
+    ]);
+    detail.classList.add('open');
+    syncToggle();
+    schedule();
+  }
+
+  detail.addEventListener('click', (event) => {
+    const goto = event.target.closest('[data-goto]');
+    if (goto) {
+      focusNode(Number(goto.dataset.goto), false);
+      return;
+    }
+    if (event.target.closest('[data-close]')) select(null);
+  });
+
+  // ---------- chrome ----------
+
+  function renderStats() {
+    const backEdges = edges.filter((edge) => edge[3] & FLAG_BACK).length;
+    const redundant = edges.filter((edge) => edge[3] & FLAG_REDUNDANT).length;
+    const typeInversions = edges.filter((edge) => edge[3] & FLAG_TYPE_INVERSION).length;
+    const valueCycles = data.cycles.filter((cycle) => cycle.kind === 'value').length;
+    const weakCycles = data.cycles.length - valueCycles;
+    const cells = [
+      { label: 'files', value: data.generated.files, tone: '' },
+      { label: 'edges', value: data.generated.edges, tone: '' },
+      { label: 'zones', value: zones.length, tone: '' },
+      {
+        label: 'back-edges',
+        value: backEdges,
+        tone: backEdges === 0 ? 'is-ok' : 'is-critical',
+      },
+      {
+        label: 'value cycles',
+        value: valueCycles,
+        tone: valueCycles === 0 ? 'is-ok' : 'is-critical',
+      },
+      {
+        label: 'type/dynamic cycles',
+        value: weakCycles,
+        tone: weakCycles === 0 ? 'is-ok' : 'is-warning',
+      },
+      {
+        label: 'type inversions (R6)',
+        value: typeInversions,
+        tone: typeInversions === 0 ? 'is-ok' : 'is-warning',
+      },
+      {
+        label: 'redundant edges',
+        value: redundant,
+        tone: redundant === 0 ? 'is-ok' : 'is-warning',
+      },
+    ];
+    replaceChildren(
+      document.getElementById('stats'),
+      cells.map((cell) =>
+        el('div', { class: `stat ${cell.tone}` }, [
+          el('b', { text: String(cell.value) }),
+          document.createTextNode(cell.label),
+        ]),
+      ),
+    );
+    document.getElementById('commit').textContent = `@ ${data.generated.commit}`;
+  }
+
+  function renderLegend() {
+    const ordered = [...zones.keys()].sort((left, right) => {
+      const rankLeft = zones[left].rank ?? 99;
+      const rankRight = zones[right].rank ?? 99;
+      return rankLeft - rankRight || zones[left].id.localeCompare(zones[right].id);
+    });
+    replaceChildren(
+      document.getElementById('legend'),
+      ordered.map((index) => {
+        const zone = zones[index];
+        const rank = zone.rank === null ? 'unranked' : `rank ${zone.rank}`;
+        return el(
+          'button',
+          {
+            type: 'button',
+            class: 'legend-row',
+            'data-zone': index,
+            'aria-pressed': String(!state.hiddenZones.has(index)),
+          },
+          [
+            el('span', { class: 'swatch', style: `background:${zoneColor(index)}` }),
+            el('span', { class: 'zone' }, [
+              document.createTextNode(`${zone.id} `),
+              el('i', { text: rank }),
+            ]),
+            el('span', { class: 'count', text: String(zone.files) }),
+          ],
+        );
+      }),
+    );
+  }
+
+  function renderHotspots() {
+    const top = [...nodes.keys()]
+      .sort((left, right) => nodes[right].in - nodes[left].in || nodes[right].out - nodes[left].out)
+      .slice(0, 14);
+    replaceChildren(
+      document.getElementById('hotspots'),
+      top.map((index) =>
+        el('button', { type: 'button', class: 'hotspot', 'data-focus': index }, [
+          el('span', { text: nodes[index].id }),
+          el('span', { class: 'metric', text: String(nodes[index].in) }),
+        ]),
+      ),
+    );
+  }
+
+  const layoutHint = document.getElementById('layout-hint');
+  function renderLayoutHint() {
+    layoutHint.textContent =
+      state.layout === 'cluster'
+        ? 'Force-directed: folders pull together, so tight blobs are cohesive modules and long bridges are cross-module coupling.'
+        : 'Layered by depth to a leaf over static value imports: sinks on the left, entrypoints on the right. Every edge should point leftwards.';
+  }
+
+  document.getElementById('legend').addEventListener('click', (event) => {
+    const row = event.target.closest('[data-zone]');
+    if (!row) return;
+    const index = Number(row.dataset.zone);
+    if (state.hiddenZones.has(index)) state.hiddenZones.delete(index);
+    else state.hiddenZones.add(index);
+    row.setAttribute('aria-pressed', String(!state.hiddenZones.has(index)));
+    schedule();
+  });
+
+  document.getElementById('hotspots').addEventListener('click', (event) => {
+    const button = event.target.closest('[data-focus]');
+    if (button) focusNode(Number(button.dataset.focus));
+  });
+
+  function bindSegmented(id, key, onChange) {
+    const container = document.getElementById(id);
+    container.addEventListener('click', (event) => {
+      const button = event.target.closest('button');
+      if (!button) return;
+      const value = button.dataset[key];
+      if (!value) return;
+      for (const sibling of container.querySelectorAll('button')) {
+        sibling.setAttribute('aria-pressed', String(sibling === button));
+      }
+      onChange(value);
+    });
+  }
+
+  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+  bindSegmented('layout-mode', 'layout', (value) => {
+    if (value === state.layout) return;
+    const previous = state.layout;
+    state.layout = value;
+    renderLayoutHint();
+    if (reduceMotion) {
+      fit();
+      return;
+    }
+    const start = performance.now();
+    morph = { layout: previous, t: 0 };
+    const step = (now) => {
+      const progress = Math.min((now - start) / 420, 1);
+      morph.t = progress < 0.5 ? 2 * progress * progress : 1 - (-2 * progress + 2) ** 2 / 2;
+      draw();
+      if (progress < 1) requestAnimationFrame(step);
+      else {
+        morph = null;
+        fit();
+      }
+    };
+    requestAnimationFrame(step);
+    // Reframe onto the incoming layout's bounds while the morph plays, so the transition
+    // ends framed instead of off-screen.
+    fit();
+  });
+
+  bindSegmented('size-mode', 'size', (value) => {
+    state.size = value;
+    schedule();
+  });
+
+  for (const [id, key] of [
+    ['show-back', 'showBack'],
+    ['show-cycles', 'showCycles'],
+    ['show-redundant', 'showRedundant'],
+    ['show-type-inversion', 'showTypeInversion'],
+    ['hide-weak', 'hideWeak'],
+    ['show-labels', 'labels'],
+  ]) {
+    document.getElementById(id).addEventListener('change', (event) => {
+      state[key] = event.target.checked;
+      schedule();
+    });
+  }
+
+  const search = document.getElementById('search');
+  const searchHint = document.getElementById('search-hint');
+  search.addEventListener('input', () => {
+    state.query = search.value.trim().toLowerCase();
+    const count = state.query === '' ? 0 : nodes.filter((_, index) => matched(index)).length;
+    searchHint.textContent =
+      state.query === ''
+        ? 'Drag to pan, pinch or scroll to zoom, tap a node for detail.'
+        : `${count} file${count === 1 ? '' : 's'} match — everything else dims.`;
+    schedule();
+  });
+  search.addEventListener('keydown', (event) => {
+    if (event.key !== 'Enter') return;
+    const first = nodes.findIndex((_, index) => matched(index) && visible(index));
+    if (first >= 0) focusNode(first);
+  });
+
+  document.getElementById('zoom-in').addEventListener('click', () => zoomBy(1.4));
+  document.getElementById('zoom-out').addEventListener('click', () => zoomBy(1 / 1.4));
+  document.getElementById('zoom-fit').addEventListener('click', () => fit());
+
+  const rail = document.getElementById('rail');
+  const railToggle = document.getElementById('rail-toggle');
+
+  // The opener chip would otherwise float over whichever sheet is up.
+  function syncToggle() {
+    const covered = rail.classList.contains('open') || detail.classList.contains('open');
+    railToggle.style.display = covered ? 'none' : '';
+  }
+
+  function setRail(open) {
+    rail.classList.toggle('open', open);
+    railToggle.setAttribute('aria-expanded', String(open));
+    syncToggle();
+  }
+
+  railToggle.addEventListener('click', () => setRail(true));
+  document.getElementById('rail-done').addEventListener('click', () => setRail(false));
+
+  // ---------- pointer input ----------
+
+  const pointers = new Map();
+  let dragged = false;
+  let pinch = null;
+
+  canvas.addEventListener('pointerdown', (event) => {
+    canvas.setPointerCapture(event.pointerId);
+    pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    dragged = false;
+    if (pointers.size === 2) {
+      const [first, second] = [...pointers.values()];
+      pinch = { distance: Math.hypot(first.x - second.x, first.y - second.y) };
+    }
+    canvas.classList.add('dragging');
+  });
+
+  canvas.addEventListener('pointermove', (event) => {
+    if (!pointers.has(event.pointerId)) {
+      if (event.pointerType === 'mouse') hoverAt(event.clientX, event.clientY);
+      return;
+    }
+    const previous = pointers.get(event.pointerId);
+    pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+
+    if (pointers.size === 2 && pinch) {
+      const [first, second] = [...pointers.values()];
+      const distance = Math.hypot(first.x - second.x, first.y - second.y);
+      const rect = canvas.getBoundingClientRect();
+      if (pinch.distance > 0) {
+        zoomBy(
+          distance / pinch.distance,
+          (first.x + second.x) / 2 - rect.left,
+          (first.y + second.y) / 2 - rect.top,
+        );
+      }
+      pinch.distance = distance;
+      dragged = true;
+      return;
+    }
+
+    const dx = event.clientX - previous.x;
+    const dy = event.clientY - previous.y;
+    if (Math.abs(dx) > 1 || Math.abs(dy) > 1) dragged = true;
+    camera.x -= dx / camera.k;
+    camera.y -= dy / camera.k;
+    schedule();
+  });
+
+  function endPointer(event) {
+    if (!pointers.has(event.pointerId)) return;
+    pointers.delete(event.pointerId);
+    if (pointers.size < 2) pinch = null;
+    if (pointers.size === 0) {
+      canvas.classList.remove('dragging');
+      if (!dragged) {
+        const hit = pick(event.clientX, event.clientY);
+        select(hit);
+        if (hit !== null && window.innerWidth <= 860) setRail(false);
+      }
+    }
+  }
+
+  canvas.addEventListener('pointerup', endPointer);
+  canvas.addEventListener('pointercancel', endPointer);
+
+  canvas.addEventListener(
+    'wheel',
+    (event) => {
+      event.preventDefault();
+      const rect = canvas.getBoundingClientRect();
+      zoomBy(
+        Math.exp(-event.deltaY * (event.deltaMode === 1 ? 0.05 : 0.0016)),
+        event.clientX - rect.left,
+        event.clientY - rect.top,
+      );
+    },
+    { passive: false },
+  );
+
+  function hoverAt(clientX, clientY) {
+    const hit = pick(clientX, clientY);
+    if (hit !== state.hover) {
+      state.hover = hit;
+      schedule();
+    }
+    if (hit === null) {
+      tooltip.style.display = 'none';
+      return;
+    }
+    tooltip.textContent = `src/${nodes[hit].id} · in ${nodes[hit].in} · out ${nodes[hit].out}`;
+    tooltip.style.display = 'block';
+    const box = tooltip.getBoundingClientRect();
+    tooltip.style.left = `${Math.min(clientX + 12, window.innerWidth - box.width - 8)}px`;
+    tooltip.style.top = `${Math.max(clientY - box.height - 10, 8)}px`;
+  }
+
+  canvas.addEventListener('pointerleave', () => {
+    tooltip.style.display = 'none';
+    if (state.hover !== null) {
+      state.hover = null;
+      schedule();
+    }
+  });
+
+  window.addEventListener('keydown', (event) => {
+    if (event.target === search) return;
+    if (event.key === 'Escape') select(null);
+    if (event.key === '+' || event.key === '=') zoomBy(1.3);
+    if (event.key === '-') zoomBy(1 / 1.3);
+    if (event.key === 'f') fit();
+  });
+
+  window.addEventListener('resize', resize);
+  const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  function applyTheme() {
+    readPalette();
+    computeZoneColors();
+    renderLegend();
+    schedule();
+  }
+  darkQuery.addEventListener('change', applyTheme);
+  new MutationObserver(applyTheme).observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-theme'],
+  });
+
+  readPalette();
+  computeZoneColors();
+  renderStats();
+  renderLegend();
+  renderHotspots();
+  renderLayoutHint();
+  resize();
+  fit();
+})();
diff --git a/scripts/layering/model.ts b/scripts/layering/model.ts
index e0fe1dc4f0..50dd3c3ef6 100644
--- a/scripts/layering/model.ts
+++ b/scripts/layering/model.ts
@@ -52,6 +52,15 @@ const TARGET_DAG_RANK = new Map([
 
 export const RANKED_ZONES: ReadonlySet<string> = new Set(TARGET_DAG_RANK.keys());
 
+/**
+ * Spine rank of a zone, or `null` when the zone is intentionally unranked. Exported for the
+ * dependency-graph viewer, which colours nodes by rank so an inversion is visible as an edge
+ * pointing the wrong way down the ramp. The gate itself compares ranks internally.
+ */
+export function zoneRank(zone: string): number | null {
+  return TARGET_DAG_RANK.get(zone) ?? null;
+}
+
 // The one zone deliberately left OUT of the ranked spine. It is NOT unenforced: every file
 // in it is still subject to the global production value-import cycle rejection (R4) and the
 // R1-R3 move rules. It opts out of spine back-edge ranking because `(root)` holds the
@@ -144,7 +153,7 @@ export function topFolder(file: string): string {
   return match ? match[1]! : '(root)';
 }
 
-function targetDagZone(file: string): string {
+export function targetDagZone(file: string): string {
   if (file.startsWith('src/daemon/client/')) return 'daemon-client';
   if (file.startsWith('src/daemon/')) return 'daemon-server';
   return topFolder(file);