diff --git a/.eslintrc.json b/.eslintrc.json
index 4d54b63c..4934137b 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -9,7 +9,32 @@
         "@typescript-eslint"
     ],
     "rules": {
-        "@typescript-eslint/naming-convention": "warn",
+        "@typescript-eslint/naming-convention": [
+            "warn",
+            {
+                "selector": "default",
+                "format": ["camelCase"],
+                "leadingUnderscore": "allow",
+                "trailingUnderscore": "allow"
+            },
+            {
+                "selector": "variable",
+                "format": ["camelCase", "UPPER_CASE"],
+                "leadingUnderscore": "allow",
+                "trailingUnderscore": "allow"
+            },
+            {
+                "selector": "typeLike",
+                "format": ["PascalCase"]
+            },
+            {
+                // Keys of a foreign API, quoted because they have to be - the dotted ELK
+                // layout options have no camelCase spelling to pick.
+                "selector": ["objectLiteralProperty", "typeProperty"],
+                "modifiers": ["requiresQuotes"],
+                "format": null
+            }
+        ],
         "@typescript-eslint/semi": "warn",
         "curly": "warn",
         "eqeqeq": "warn",
diff --git a/elk-task/current.png b/elk-task/current.png
new file mode 100644
index 00000000..9c6d2afa
Binary files /dev/null and b/elk-task/current.png differ
diff --git a/elk-task/elk-plan.md b/elk-task/elk-plan.md
new file mode 100644
index 00000000..eed483a8
--- /dev/null
+++ b/elk-task/elk-plan.md
@@ -0,0 +1,733 @@
+# ELK-based visualization: plan
+
+Replace the current CSS-flexbox + linkerline rendering of the programflow visualization
+with a real graph model laid out by [elkjs](https://github.com/kieler/elkjs), add
+collapsible heap nodes, and make the whole thing themable from CSS.
+
+`example.elkt` in the repo root is the hand-written target shape (prototype for
+<https://rtsys.informatik.uni-kiel.de/elklive/elkgraph.html>). It is a *specification*,
+not a runtime artifact: elkjs consumes a JSON graph, not the `.elkt` text notation.
+
+---
+
+## 1. Where we are today
+
+| Concern | Current implementation |
+| --- | --- |
+| Model | none — `html-generator.ts` builds two raw HTML strings (`stackHTML`, `heapHTML`) |
+| Layout | CSS flex, two floated columns (`.floating-left` = frames 35%, `.floating-right` = objects 65%) |
+| Edges | `linkerline`, drawn *after* render by measuring DOM elements found via `id="…Pointer<addr>"` / `id="heapEndPointer<addr>"` regex-scraped out of the HTML strings |
+| Styling | hardcoded colors in `webview.css` (`.box`, `.frame`, `.current-frame`, …) |
+| Collapsing | not supported |
+
+Blast radius is small: `FrontendTraceElem` / `HTMLGenerator` are referenced **only** by
+`web/webview.ts` and `web/html-generator.ts`. The extension host
+(`frontend/visualization_panel.ts`) only ships `BackendTraceElem`s, so nothing on the
+VS Code side changes.
+
+## 2. Constraints found while checking the code
+
+- **`heap` is not a `Map`.** `types.ts` declares `heap: Map<Address, HeapValue>`, but after
+  IPC/JSON it is a plain object — today's code works around this with `Object.keys(...)`.
+  Same for `HeapValue.value` / `.keys` on `dict` and `instance`. Use `Object.entries`.
+- **CSP blocks Web Workers.** `web/index.html` has `default-src 'none'` and no
+  `worker-src`, so `worker-src` falls back to `none`. → Use the synchronous bundled build
+  `elkjs/lib/elk.bundled.js` (main thread, no worker). Revisit the worker build only if
+  layout is too slow; that would also need `worker-src blob:;` in the CSP.
+- **Bundling, and minification is now mandatory.** `elk.bundled.js` is plain JS and bundles
+  fine into `webview.js` via esbuild; elkjs ships its own type declarations, so no
+  `@types/*` package. Measured by the spike (`elk-task/spike/spike.mjs`):
+
+  | | size |
+  | --- | --- |
+  | `webview.js` today | 161 KiB |
+  | elkjs bundled, unminified | 3423 KiB |
+  | elkjs bundled, minified | 1426 KiB |
+
+  esbuild is currently run **without** `minify`, so bundling elkjs as-is would grow the
+  webview payload 21×. `scripts/build-web.mjs` must set `minify: true` (at least for
+  non-watch builds) before elkjs goes in. Even then it is ~1.4 MiB, so if webview startup
+  suffers, the fallback is a separate `<script src>`: `script-src` includes
+  `{{CSP_SOURCE}}` and `copyStatic()` already copies assets into `localResourceRoots`, so
+  this stays a *choice, not a constraint*.
+- **`StackElem` has no line number**, so `example.elkt`'s `"createGradeList (line 36)"` is
+  not derivable — only `BackendTraceElem.line` (the currently executing line) exists.
+  Decided: no per-frame line, frame headers show the name only.
+- **Pre-existing bug.** `html-generator.frameItem` marks `index === 0` as `current-frame`,
+  but `stack[0]` is `<module>`, the *outermost* frame (the example trace confirms
+  `[<module>, generate_bar]`). The current frame is the **last** element. Fix while porting.
+- **`linkerline` becomes dead** once edges come from ELK bend points → drop the dependency.
+
+## 3. `example.elkt` vs. the current layout
+
+Structurally faithful, visually different. Node *content* is rendered by us as HTML and
+only *placement* comes from ELK (§5), so most differences are free choices.
+
+| Aspect | Current extension | `example.elkt` | Decision |
+| --- | --- | --- | --- |
+| Overall split | Frames left, Objects right, fixed % columns | `frames` / `objects` containers, `direction: RIGHT` | same idea, see §4 |
+| Column grouping | **no box** — `Frames`/`Objects` titles + `.divider` chrome in `index.html` | visible group boxes with labels | keep current (§4) |
+| Frame box | `border-left` 4px, grey / blue for the current frame | plain container node | keep current |
+| Frame header | `<module>` shown as `Global` | `<module>`, plus `(line 36)` | keep current, no line |
+| Variable row | two columns `name` \| `value`, value empty when it's a ref | single label `"tim"` | keep current |
+| list / tuple | **horizontal** strip of boxes, index above value | **vertical** text lines `[0] 3.3` | **changed to vertical**, see §5.2 |
+| set | wrapping row of value boxes, no index | not modelled | **changed to vertical**, see §5.2 |
+| dict | vertical `key` \| `value` pairs, key width from longest key | not modelled | keep current |
+| instance | headline = class name, then `key` \| `value` pairs | labels `name = 'Tim'` | keep current |
+| Edge labels | none — index/key lives inside the source box | `"students"`, `"0"`, … on the edge | keep current (no labels) |
+| Edge colors | per-address hue via `getColor()` | none | **replaced**, see §6.4 |
+| Pointed-to objects | `.object-intendation`, flat 65px left margin | real layout | ELK replaces the hack |
+| Collapsed summary | not supported | `"list" / "12 elements"` | the new feature, mocked |
+
+So: **take layout from `example.elkt`, keep content rendering as it is today.** Where the
+two disagree the current extension wins, with two deliberate exceptions: edge coloring
+(§6.4) and list/tuple/set orientation (§5.2, forced by per-cell arrow origins). The visible
+change stays close to "same boxes, better placement, real arrows" — far easier to review
+than a simultaneous restyle.
+
+`example.elkt` is also wrong twice for runtime use: it hardcodes every label size
+(`layout [ size: 90, 16 ]`; real sizes must be measured, §6.2) and it models rows as child
+nodes, which lets `layered` reorder them (§5.2).
+
+## 4. Layout shape: flat graph, headers computed after layout
+
+No outer `frames` / `objects` container nodes. The current UI has no box around either
+column — the headings and dividers are chrome in `index.html`, outside the content — so
+containers would add visual weight that isn't there. Instead pin frame nodes to the leftmost
+layer with `elk.layered.layering.layerConstraint: FIRST`: every heap object is then strictly
+right of every frame, while ELK compacts the rest freely. Flat also means no
+cross-hierarchy edges, so `hierarchyHandling: INCLUDE_CHILDREN` and the lowest-common-
+ancestor bookkeeping `example.elkt` needs both disappear.
+
+**`layerConstraint: FIRST` forbids incoming edges**, and ELK enforces it by throwing:
+
+> `UnsupportedConfigurationException: Node 'root.frame:0' has its layer constraint set to
+> FIRST, but has at least one incoming edge that does not come from a FIRST_SEPARATE node.`
+
+That is fine for us — nothing ever points *at* a frame, so frames have no incoming edges by
+construction — but it has two consequences the spike confirmed. First, no object can slip
+into the frames layer: layered places a node in a strictly later layer than any predecessor,
+and after the collapse filter (§6.3) every rendered object has at least one incoming edge.
+The split therefore stays well-defined without containers. Second, **cycle breaking must
+stay `GREEDY`** (the default): it only reverses edges inside cycles, and a frame can never
+be in a cycle, so it can never acquire a reversed incoming edge. `INTERACTIVE` cycle
+breaking reverses by coordinate instead and *does* crash this way — see §6.5.
+
+**The `Frames` / `Objects` headers stay above their areas**, recomputed from the layout
+instead of fixed percentages: `framesRight = max(x + width)` over frame nodes,
+`objectsLeft = min(x)` over object nodes, then two absolutely positioned header divs at
+`y = 0` spanning `[0, framesRight]` and `[objectsLeft, canvasWidth]`, reusing the existing
+`.title` + `.divider` markup, with all node `y` values shifted down by the header height.
+As today they live inside `#viz`, the scroll container, so they scroll with the content
+rather than sticking.
+
+Fallback if the computed split looks unstable between steps: switch the model builder to
+two container nodes (rendered borderless) and read the extents from their geometry. Keep
+that switchable.
+
+## 5. Graph modelling: one node per frame/object, rows as ports
+
+### 5.1 Rows are ports, not child nodes
+
+ELK only places boxes and routes edges; the inside of every box is our HTML, exactly as
+rendered today.
+
+`example.elkt` models each variable/field as a **child node**, which makes `layered` run a
+layout inside every frame and leaves it free to reorder rows. `veryRoughMockupOfExample.png`
+shows the damage: the module frame comes out as `karl2, tim, karl, joerg, tom, gerd, …`
+instead of source order. Instead, each referencing row becomes an ELK **port** on its node:
+
+- `elk.portConstraints: FIXED_POS` with explicit port `x`/`y` (row index × measured row
+  height) → row order always matches source order, boxes stay compact, no wasted layout.
+- Ports get zero width/height; edges reference them directly in `sources` / `targets`, so
+  each arrow's origin sits on the exact row holding the reference — what linkerline only
+  approximates today.
+- Fallback if ports prove awkward: child nodes plus
+  `elk.layered.considerModelOrder.strategy: NODES_AND_EDGES` to force ordering.
+
+### 5.2 Consequence: `list` / `tuple` / `set` become vertical
+
+Per-cell arrow origins require one port per cell at that cell's own `y` on the node's
+**east** edge. In a horizontal strip all cells share one row, so their ports would land on
+the *south* edge and, with `direction: RIGHT`, layered would route every one of them down
+and back around — exactly the spaghetti we're removing. Rendering cells vertically (index
+in a left column, value in a right column) puts each port on the east edge at its own `y`.
+Side effects, all good: one row shape for all five heap types, so the existing
+dict/instance `key | value` rendering is reused everywhere with the index playing the role
+of the key; long lists become narrow and tall instead of extremely wide, matching the
+mockup; and the collapsed one-line summary (§6.3) fits the same box shape.
+
+This is the one content-rendering change versus today — forced by the per-cell arrow
+origins requirement, not a free restyle.
+
+## 6. Implementation
+
+```
+BackendTraceElem
+   │
+   ├─ reachability.ts    visibleAddresses / outgoingRefs / rootRefs   (exists already)
+   ├─ graph-model.ts     buildGraph(elem, collapsed) -> ElkNode  (no sizes yet)
+   ├─ measure.ts         fill width/height/port offsets from real text metrics
+   ├─ elk layout         elk.layout(graph)   (elk.bundled.js, main thread)
+   └─ graph-renderer.ts  absolutely-positioned divs + one SVG edge overlay
+
+   node-view.ts          renderNode(node) -> HTMLElement
+                         the single source of node markup, called by BOTH measure.ts and
+                         graph-renderer.ts
+```
+
+`node-view.ts` exists because §6.2 sizes a node by rendering its real markup offscreen and
+§6.3 then renders that markup again for real. If the two ever build markup independently
+they will drift, and every box in the visualization is silently mis-sized. One function,
+two call sites, no exceptions.
+
+New files under `src/programflow-visualization/web/`: `graph-model.ts`, `node-view.ts`,
+`measure.ts`, `graph-renderer.ts`. Removed at the end: `html-generator.ts`, the `linkerline`
+dependency, and the `stackHTML` / `heapHTML` fields of `FrontendTraceElem`.
+
+`src/programflow-visualization/reachability.ts` already exists and is **production code, not
+a test helper**: it is the heap traversal §6.1 and §6.3 are built on. It lives one level
+above `web/` on purpose — `tsconfig.json` excludes `web/**`, so a copy there would be
+bundled by esbuild but never type-checked by `tsc` and not importable from the tests. Where
+it is, it is type-checked, unit-tested (§7.8) and still reachable from the bundle: esbuild
+resolves `../reachability` exactly as `web/html-generator.ts` already resolves `../types`.
+
+| Export | Use in the implementation |
+| --- | --- |
+| `visibleAddresses(elem, collapsed)` | which object boxes `buildGraph` emits (§6.3) |
+| `outgoingRefs(heapValue)` | which edges to emit, and their per-cell origins (§5.2) |
+| `rootRefs(elem)` | the frame-variable → object edges |
+| `heapEntries(heap)` | iterating the heap as `[Address, HeapValue]` pairs |
+| `asRecord(mapLike)` | the `Map`-typed-but-plain-object workaround (§2), needed throughout the renderer |
+
+### 6.1 Graph model (`graph-model.ts`)
+
+`buildGraph(elem: BackendTraceElem, collapsed: Set<Address>): ElkNode`
+
+- Flat graph built from `visibleAddresses(elem, collapsed)`: root → one node per
+  `StackElem` + one node per visible address, one edge per `outgoingRefs` pair whose ends
+  are both visible, plus the `rootRefs` edges. **Import these from `reachability.ts`; do
+  not re-walk the heap inline** — a second traversal would drift from the tested one, and
+  the collapse semantics are the subtle part.
+- Frame nodes get `layerConstraint: FIRST` and a port per `local` with `type === 'ref'`.
+- Object nodes: content per `HeapValue.type` (`list` | `tuple` | `set` | `dict` |
+  `instance`), a port per `ref` element/field. A collapsed node has no ports.
+- Reference edges are plain `ElkExtendedEdge`s on the root. The **source** is the port of
+  the referencing row; the **target** is an explicit zero-size input port at the centre of
+  the object node's *west* edge — not the node itself. Under `portConstraints: FIXED_POS` a
+  portless endpoint leaves ELK to pick a border point that can move between steps, whereas
+  a declared input port makes every arrowhead land in the same place every time.
+- Stable ids — `frame:<index>`, `frame:<index>:<varName>`, `obj:<address>`,
+  `obj:<address>:<slot>` — so collapse and hover state survive a re-render.
+- Every node carries a `data.kind` tag (`frame`, `current-frame`, `list`, `tuple`, `set`,
+  `dict`, `instance`, `collapsed`) that the renderer turns into CSS classes.
+  **No colors or fonts in TS.**
+- Layout options, from `example.elkt` and the spike: `algorithm: layered`,
+  `direction: RIGHT`, `spacing.nodeNode`, `layered.spacing.nodeNodeBetweenLayers`,
+  `edgeRouting: ORTHOGONAL`, and cycle breaking left at its `GREEDY` default (§4).
+  `layered.considerModelOrder` stays **off** — it buys no stability and costs 2.5× (§6.5).
+- Nodes are emitted in a deterministic order — frames by stack index, objects by ascending
+  address. This, not a layout option, is what makes steps stable (§6.5).
+
+**Self-loops and back-edges work.** `example-cycles.py` produces both: a self-referencing
+list is an ELK self-loop, and a two-object cycle is a back-edge under `direction: RIGHT`.
+The spike laid out a self-loop plus a two-object cycle with FIXED_POS east ports and a
+declared west input port, and got clean orthogonal routes — self-loop 4 bends, back-edge 4
+bends, and **no bend point inside a node box it does not belong to**. No special handling
+needed. The one requirement this places on the model is in §4: cycle breaking must stay
+`GREEDY`, or the frame layer constraint throws.
+
+### 6.2 Measurement (`measure.ts`)
+
+ELK needs sizes up front, unlike flexbox which measures during render, and content changes
+every trace step. So before layout, walk the graph and set `width`/`height` on every node
+and `x`/`y` on every port.
+
+Measure by **rendering the real node HTML into one hidden offscreen container** and reading
+`offsetWidth` / `offsetHeight` / row offsets in a single batched pass (write all nodes, then
+read all sizes — one reflow). Not `canvas.measureText`: the boxes use CSS ellipsis, 50%/50%
+`name`/`value` widths and a dict-key width derived from the longest key, and reimplementing
+those rules in canvas math would silently drift from the stylesheet. Reading the browser's
+own layout is simpler and exact, and it keeps §6.4's promise that all sizing lives in CSS.
+Port offsets come from the measured row positions in the same pass, so ports land exactly on
+the rows the user sees.
+
+### 6.3 Rendering (`graph-renderer.ts`) and collapsing
+
+Rendering:
+
+- One positioned container `#viz-canvas`; each ELK node becomes an absolutely positioned
+  `<div>` at its computed `x`/`y`/`width`/`height`, classed from `data.kind`, with the row
+  markup inside.
+- Edges: a single `<svg>` overlay, one `<path>` per edge built from its ELK `sections`
+  (start point, bend points, end point) plus an arrowhead `<marker>`. This fully replaces
+  linkerline — no post-hoc DOM measurement, no regex id scraping.
+- Headers placed from the layout extents (§4); node `y` shifted by the header height.
+- ELK coordinates are parent-relative → accumulate parent offsets when flattening. A no-op
+  for the flat graph, but keep it so the container fallback of §4 works.
+
+Collapsing — state is `collapsed: Set<Address>` in `webview.ts`, **persisted across trace
+steps**, toggled by clicking the header of any `list`, `tuple`, `set`, `dict` or `instance`
+node, passed into `buildGraph` on every render, no auto-collapse. The filter runs **before**
+layout and is already implemented as `visibleAddresses` in `reachability.ts`: traverse from
+all `ref` values in all stack frames, but **do not traverse edges leaving a collapsed
+node**; then drop every heap object not reached and every edge touching a dropped object.
+The collapsed node itself still renders, as a closed box with a one-line summary
+(`list, 12 elements`, `dict, 3 entries`, `Student, 2 fields`), just without outgoing edges.
+That is the requested semantics exactly: a node disappears only if it is *exclusively*
+downstream of the collapsed one; anything reachable by another path stays.
+
+Accepted caveat: collapse state is keyed by heap address and CPython reuses addresses after
+GC, so a collapse can "jump" to an unrelated object many steps later. Cheap mitigation if
+it becomes annoying — drop an address from the set when the object at that address changes
+`type`.
+
+Affordance: nothing in the box tells a learner it can be folded, so every collapsible
+header carries a caret (`▾` expanded, `▸` collapsed) and is a real control —
+`role="button"`, `tabindex="0"`, Enter/Space toggles — so the feature is discoverable and
+usable without a mouse.
+
+### 6.4 Styling
+
+- Class-per-kind in `webview.css`: `.elk-node`, `.elk-frame`, `.elk-current-frame`,
+  `.elk-list`, `.elk-tuple`, `.elk-set`, `.elk-dict`, `.elk-instance`, `.elk-row`,
+  `.elk-collapsed`, `.elk-edge`.
+- Colors from VS Code theme variables (`var(--vscode-editor-foreground)`,
+  `var(--vscode-panel-border)`, `var(--vscode-charts-*)`) instead of today's hardcoded
+  `rgba(56, 56, 56, 0.8)`, so the visualization follows light/dark/high-contrast themes.
+
+**Edge coloring: neutral + hover highlight**, replacing `getColor()`. The current formula
+`((0.618033988749895 + addr / 10) % 1) * 100` → `hsl(h, 60%, 45%)` exists only because
+linkerline draws unrouted, overlapping arrows and color was the only way to tell them
+apart. It also has two bugs — `* 100` instead of `* 360` squeezes all hues into a red→green
+sliver, and `addr / 10` moves the hue by only ~10 per object on small addresses, so
+neighbours look identical. Encoding the heap address is meaningless to a learner anyway,
+and ELK's orthogonal routing separates edges by construction. Therefore: all edges in one
+neutral theme color (`var(--vscode-editor-foreground)`, reduced opacity), and disambiguation
+on interaction — hovering a variable row or object node adds `.elk-edge-active` to its
+incoming/outgoing edges and `.elk-dimmed` to the rest. That scales to dense heaps, is
+theme-friendly and works for color-blind users. The renderer only sets `data-source` /
+`data-target` and toggles classes, so going back to per-address hues (or coloring by edge
+kind) is a CSS change plus one attribute.
+
+### 6.5 Stability across steps, performance, pan/zoom
+
+**Stability: measured, and it is fine.** The worry was that recomputing layout per step
+would reshuffle the heap side and destroy the user's mental map. The spike measured three
+cases:
+
+| Case | Nodes that moved | Largest jump |
+| --- | --- | --- |
+| Only a value changes, structure identical | **0 of 217** | 0 px |
+| One element appended to a list | 81 of 90 | 94 px |
+| Real `example-trace-content.js` steps | 7 of 21 | 192 px |
+
+So ELK does not churn: identical structure gives a pixel-identical layout. The movement in
+rows 2 and 3 is growth, not reshuffling — a box gets taller and its neighbours shift — and
+it is bounded. Deterministic node order (§6.1) is all that's needed.
+
+**The interactive-seeding fallback is withdrawn.** It was listed as mitigation 2; it is both
+unnecessary (above) and *incompatible with §4*: seeding coordinates and switching cycle
+breaking to `INTERACTIVE` makes ELK reverse an edge into a frame node, which immediately
+violates `layerConstraint: FIRST` and throws. Seeding only `crossingMinimization` and
+`nodePlacement` does not throw, but changes nothing (still 7 of 21, 180 px). Keep cycle
+breaking `GREEDY`.
+
+**`considerModelOrder` is dropped.** The plan justified it as the stability mechanism; the
+spike shows it is not — stability is identical with it set to `NONE`, the visual
+top-to-bottom order is unchanged, and it is the single most expensive option measured
+(101 nodes: 245 ms with, 99 ms without). Emit nodes in deterministic order and leave model
+order off.
+
+**Performance is the real problem.** Layout runs on every navigation click, and the slider
+fires continuously while dragging. Measured (Node 18, this machine; a browser will differ
+but the shape holds):
+
+| Graph | Layout time |
+| --- | --- |
+| 11 nodes | 58 ms |
+| 26 nodes | 82 ms |
+| 51 nodes | 137 ms |
+| 101 nodes | 245 ms |
+| 201 nodes | 1396 ms |
+
+The 100 ms budget breaks at roughly 40 nodes — well inside what a student program produces.
+Required measures:
+
+- **Drop `considerModelOrder`** (above): 101 nodes 245 ms → 99 ms. `thoroughness: 1` on top
+  gains only a little more (84 ms) and costs layout quality, so hold it in reserve.
+- **Pre-warm elkjs at webview init.** The first `layout()` call costs ~330 ms of JIT warm-up
+  versus ~27 ms steady state. Run one throwaway layout on a dummy graph when the webview
+  loads, so the user never pays it on a click.
+- Cache the layout result per `(traceIndex, collapsed-set)` key, LRU-bounded; stepping back
+  and forth then costs nothing. Drop the whole cache whenever measurement premises change —
+  a theme switch or an editor font-size change alters text metrics, so every cached layout
+  becomes wrong. The existing `onDidChangeViewState` → `reset` path is the place to hook it.
+- Re-layout on the slider's `change` event, not `input`, so dragging doesn't queue dozens
+  of layouts. Keep the line-highlight message on `input` as it is today.
+- If a heap still exceeds the budget, the remaining lever is the worker build, which needs
+  `worker-src blob:;` added to the CSP (§2).
+
+**Pan and zoom.** Doable, and probably necessary — `current.png` already exceeds the panel
+height and ELK output will be wider. No library needed:
+
+- Everything already lives in one absolutely positioned `#viz-canvas` whose exact bounds
+  ELK reports, so a single `transform: translate(px, py) scale(s)` on that element pans and
+  zooms the node `<div>`s and the SVG edge overlay together, with no re-layout and no
+  coordinate recomputation. It is GPU-composited, so it stays smooth.
+- Wheel (or ctrl+wheel) zooms around the cursor, drag pans, plus a "fit" button that solves
+  `s = min(viewportW / graphW, viewportH / graphH)` from the ELK bounds — the one thing
+  that is easy here and impossible today, because today nothing knows the graph's size.
+- Keep the step controls and stdout pane outside the transformed element so they never
+  scale. The `Frames` / `Objects` headers (§4) sit inside the canvas and scale with it; if
+  they should stay pinned, render them outside the transform and multiply their extents
+  by `s`.
+- Only real caveat: text can look slightly soft at fractional zoom levels. Snapping to
+  sensible zoom steps avoids it.
+
+**Where the view controls live.** Zoom-to-fit, zoom in, zoom out and Expand all sit in a
+floating toolbar pinned to the top right of `#elk-viewport` — a sibling of `#elk-canvas`,
+so the canvas transform never scales them. It carries `data-elk-ui`, and `pan-zoom.ts`
+ignores wheel and pointerdown events originating inside it; without that guard a press on
+a button would also start a pan, and the capture-phase click handler would swallow the
+click. The buttons zoom one step along the same ladder as the wheel, anchored on the
+centre of the viewport instead of the cursor.
+
+### 6.6 Three things that will bite during implementation
+
+- **`elk.layout()` is async, navigation is not.** Clicking "next" five times fast starts
+  five layouts, and they can resolve out of order and paint a stale graph. Guard with a
+  monotonic render token: capture it before awaiting, drop the result if it is no longer
+  the current one. The same guard covers the streaming `append` path.
+- **Measuring while the panel is hidden yields zeros.** The offscreen container of §6.2
+  must use `visibility: hidden` / off-screen positioning, never `display: none`, and
+  rendering should be skipped while the webview is not visible and redone on the existing
+  `onDidChangeViewState` → `reset` path.
+- **Fonts load after first paint.** Measuring before the webview font is ready produces
+  sizes that are wrong by a few pixels and a layout that never gets corrected. Await
+  `document.fonts.ready` before the first measurement pass.
+
+## 7. Rollout order
+
+Each step keeps the extension working.
+
+1. ~~**Spike.**~~ **Done** — `elk-task/spike/spike.mjs` (throwaway, re-runnable with
+   `node elk-task/spike/spike.mjs` after `npm run compile`). It measures bundle size,
+   layout time and scaling, step-to-step stability under three seeding variants, and
+   self-loop / back-edge routing. Results are folded into §2, §4, §6.1 and §6.5; the
+   headlines are: cycles route cleanly, stability is a non-issue, `considerModelOrder` must
+   go, minification is mandatory, and elkjs needs pre-warming.
+2. ~~**Enable `minify` in `scripts/build-web.mjs`**~~ **Done** — watch builds stay readable,
+   production builds are minified. `webview.js` went 161 KiB → 112 KiB before elkjs, and
+   sits at 1555 KiB with it.
+3. ~~**Model + node-view + measure + render** behind a flag~~ **Done**. Files:
+   - `src/programflow-visualization/graph-model.ts` — `buildGraph`, `LAYOUT_OPTIONS`, id
+     helpers. It lives *next to* `reachability.ts`, not under `web/`, for the same reason:
+     `web/**` is excluded from the root `tsconfig.json`, so anything there cannot be
+     compiled to `out/` and therefore cannot be unit tested (§7.8).
+   - `web/node-view.ts` — `renderNode`, the single source of node markup.
+   - `web/measure.ts` — offscreen sizing; returns the elements it measured so the renderer
+     reuses them verbatim and sizes cannot drift.
+   - `web/graph-renderer.ts` — positions those elements, draws edges into one SVG, derives
+     the "Frames"/"Objects" bands from the node extents, wires collapse and hover.
+   - `web/elk-view.ts` — `prewarm()` and `renderStep()`, including the monotonic render
+     token that keeps a slow layout from overwriting a newer one.
+
+   Two supporting changes were needed: `skipLibCheck` in both `tsconfig.json`s, because
+   `elkjs/lib/elk-api.d.ts` does not survive strict checking, and a `compile:web` script
+   (`tsc -p src/programflow-visualization/web --noEmit`) wired into `npm test` — until now
+   nothing type-checked `web/**` at all.
+
+   The flag is `window.__PROGRAMFLOW_ELK__`, or `#elk` / `?elk=1` in web-dev mode. It
+   defaults to off, so `html-generator.ts` is still what ships.
+4. ~~**Switch** `webview.ts` to the new pipeline~~ **Done**. ELK is now the default;
+   `html-generator.ts` survives only behind `window.__PROGRAMFLOW_ELK__ = false` / `#legacy`
+   until step 9 deletes it. Two things came out of the switch:
+   - The slider had to be split early, ahead of §6.5: `input` now only moves the counter,
+     stdout and the editor highlight, `change` triggers the layout. Without it a single
+     drag queues a layout per pixel.
+   - `updateStdout` had to be rewritten rather than reused, because the traceback was
+     appended inside `generateHTML`. It is now built with `textContent` + a `span`
+     instead of string-concatenated `innerHTML`.
+
+   Checked against a real 37-step trace of `elk-task/example.py`, generated with the
+   throwaway `elk-task/spike/make-trace.py` (writes into `out/`, never `src/`): 19 nodes,
+   38 edges, no console errors, scrubbing does not re-lay out, releasing does.
+5. ~~**Collapsing**~~ **Done**. Headers carry `role="button"`, `tabindex="0"` and a caret;
+   click and Enter/Space both toggle. `collapsed` lives in `webview.ts` and survives
+   stepping. An **Expand all** button appears in the floating view toolbar (§6.5) whenever
+   anything is collapsed — without it a collapsed node that lands off-screen is
+   unrecoverable.
+
+   Verified against `example-anonymous.py`, which exists precisely because *every* object in
+   `example.py` also has a global name and therefore never disappears: collapsing `group`
+   removes Anna and Ben (13 nodes → 11), collapsing `holder` keeps Cleo (she is `shared`),
+   collapsing `outer` removes Dan *and* the anonymous inner list. Expand all restores 13.
+6. ~~**Pan/zoom + layout caching + elkjs pre-warm**~~ **Done** (§6.5). Pre-warm landed in
+   step 3. `#elk-canvas` now sits inside a new `#elk-viewport` (`overflow: hidden`) and a
+   single `transform` on the canvas moves nodes and edges together; `web/pan-zoom.ts` owns
+   it. The step controls and the stdout pane are outside the transform, so they never scale.
+
+   Decisions that came out of building it:
+   - **Auto-fit is a mode, not a one-off.** Fitting only on the first render of a trace
+     looked right and was wrong: step 0 is one 180×110 frame, so it fit at scale 1 and was
+     centred with `translate(610, 360)`; by the last step the graph is 1167×1405 and most
+     of it sat off-screen. Every render now re-fits *until the user pans or zooms*, after
+     which the view is theirs. The **Fit** button re-enables the mode.
+   - **Fit never zooms in.** A two-node graph blown up to fill the panel is unreadable, so
+     the scale is clamped at 1.
+   - **Zoom snaps to a ladder** (0.25 … 3) because fractional scales make the text soft.
+   - **Window listeners, not `setPointerCapture`.** Same effect — a drag survives the
+     cursor leaving the canvas — with less API surface and no capture to release.
+   - **A drag must not toggle a node.** Moving more than 3 px arms a capture-phase `click`
+     handler that swallows the synthetic click the browser fires on pointerup.
+   - **The cache cannot hold measured DOM elements.** On a cache hit `renderGraph` would
+     re-attach `click`/`keydown`/`mouseenter` to the *same* element instances, so one click
+     would toggle twice and cancel out. Measurement and rendering are now decoupled:
+     `measureGraph` only fills sizes and port positions and throws its elements away, and
+     `renderGraph` builds fresh ones from the same `renderNode`. "Measured == drawn" still
+     holds because `renderNode` is deterministic and `renderGraph` writes back the measured
+     width.
+   - Cache key is `traceIndex` plus the sorted collapsed set, LRU-bounded at 40. It is
+     dropped on `programflow:reset` (a new trace makes every index stale) and on a
+     `<body>` class mutation, which is how VS Code signals a theme change.
+
+   Verified in the browser against the 37-step `example.py` trace, no console errors:
+   auto-fit picks scale 0.5 for the 1167×1405 last step and centres it; wheel zoom walks
+   the ladder 1 → 1.1 → 1.25 → 1.5 and back while the graph point under the cursor stays
+   pinned to (−110, 40) exactly; a 60×48 drag from a node header pans by exactly that and
+   leaves the node expanded, while a clean click on the same header collapses it
+   (`aria-expanded="false"`, Expand all appears); Fit restores the framed transform.
+   Caching was proved by probe element: re-visiting a step repaints synchronously, a
+   never-visited step does not.
+
+   **Not verifiable in this harness:** the `ResizeObserver` that re-fits on panel resize.
+   The test page reports `visibilityState: "hidden"`, so the rendering pipeline is parked
+   and neither `requestAnimationFrame` nor `ResizeObserver` callbacks are ever delivered.
+   (Which is itself a confirmation of §6.6's third point.)
+7. ~~**Styling pass**: theme variables, per-kind classes, neutral edges + hover
+   highlighting.~~ **Done.** Every colour used by the new code is declared once in a
+   `:root` block of `--wypp-*` variables at the head of the ELK section of `webview.css`
+   and nowhere else, each mapping to a `--vscode-*` token with a literal fallback. Node
+   kinds are distinguished by a 4 px left accent taken from `--vscode-charts-*`
+   (frame/instance blue, list green, tuple purple, dict orange, set yellow), verified
+   distinct in the browser. Rows are zebra-striped with a translucent grey that works on a
+   light or a dark background. `--vscode-contrastBorder` drives the node outline so
+   high-contrast themes get a real border. Hover highlighting uses an `outline`, not
+   `border-color`, so it no longer clobbers the kind accent.
+
+   Two things this pass turned up:
+   - `[hidden]` did not hide `#elk-viewport`: the existing `.row { display: flex }` beats
+     the UA `[hidden]` rule, so `[hidden] { display: none !important }` is now set
+     explicitly.
+   - **A dict whose key is a reference had no incoming edge** (`{(1, 2): "even pair"}` in
+     `example-cycles.py`). `outgoingRefs` counts dict keys, so the tuples were *visible*,
+     but `buildGraph` only emitted an edge for the row's value. ELK correctly treated them
+     as graph roots and put them in layers 0 and 1 — **left of the Global frame** — which
+     made the Frames and Objects bands overlap and become meaningless. Two hours went into
+     suspecting `layerConstraint`, cycle breaking and port configuration; all three were
+     innocent (a synthetic graph proved the constraint is honoured even through cycles).
+     The graph was simply wrong. Fixed by giving such rows their own `keyPortId` port and
+     edge: the key cell now reads `[key]`, carries `.elk-key-ref`, and when a row has both
+     a key ref and a value ref the two ports sit at 1/3 and 2/3 of the row height so the
+     arrows do not leave from the same point. Band overlap is now 0 on every step of all
+     four test programs. Worth remembering: **when ELK puts a node somewhere absurd, check
+     the edges before you check the options.**
+
+   With the edges correct, `FIRST_SEPARATE` became the better layer constraint than
+   `FIRST` — frames get a layer to themselves, which is exactly what the two bands assume,
+   and it roughly halves layout time (`example.py`: worst step 74 ms → 42 ms, whole trace
+   1263 ms → 809 ms).
+8. ~~**Unit tests** in `src/test/unit` for the pure logic — no webview, no ELK run.~~
+   **Done.** `npm run test:unit` (part of `npm test`) now runs 49 cases:
+   `reachability.test.ts` (22) for the collapse filter, and `graph-model.test.ts` (27) for
+   `buildGraph` — node order, frame naming and the current-frame rule, the layer
+   constraint, rows per heap type, port declaration, and the collapse behaviour. Shared
+   fixtures moved to `src/test/unit/fixtures.ts`; it is not a `.test.ts` file, so the mocha
+   glob ignores it.
+
+   Two of these are the definition-of-done criteria expressed as code rather than as
+   something to eyeball: **edge count equals reference count** with nothing collapsed
+   (criterion 2), and **no edge endpoint is a port that no node declares**. The second is
+   what the dict-key bug of step 7 would have failed, so there is also a named regression
+   test for a reference key.
+9. ~~**Cleanup**: delete `html-generator.ts`, drop `linkerline`, trim `FrontendTraceElem`,
+   update `src/programflow-visualization/README.md` (its diagram still shows
+   `html-generator.ts` → `innerHTML`), and delete `elk-task/spike/`.~~ **Done.** Gone:
+   `web/html-generator.ts`, the `linkerline` dependency and the ~150 lines of
+   `updateVisualization` / `updateIndent` / `updateRefArrows` / `getCurrentTags` /
+   `getColor` that drove it, the `FrontendTrace` and `FrontendTraceElem` types, the
+   `useElk` flag and the `#legacy` escape hatch, the `#legacy-headers` / `#legacy-columns`
+   markup, ~120 lines of CSS that only the HTML strings used, and `elk-task/spike/`. The
+   README now describes the real pipeline. `webview.js` is 1.5 MiB, essentially all elkjs.
+
+   With the HTML strings went the last `innerHTML` assignment in the webview: everything
+   is `textContent` and `createElement` now, so a value that happens to look like markup
+   can no longer be parsed as markup.
+10. **Frame order: pinned, newest on top.** Left to itself ELK ordered the frame layer by
+    barycentre, which was not stable — sibling frames swapped between steps
+    (`report > describe` on some, `describe > report` on others) — and sank `Global` to the
+    bottom because it points at objects spread down the whole heap column. Frames now carry
+    an `elk.position` hint and `crossingMinimization.semiInteractive` is switched on so
+    that ELK reads it.
+
+    Measured over the 49 steps of `example-showcase.py`, counting proper segment
+    intersections between edges (shared endpoints excluded):
+
+    | frame order | crossings | steps in stack order |
+    | --- | --- | --- | 
+    | barycentre (before) | 595 | 0/20 |
+    | oldest on top (`Global` first) | 950 | 20/20 |
+    | **newest on top (`Global` last)** | **686** | **20/20** |
+
+    Both directions are equally readable — the stack grows one way either way — so the
+    cheaper one wins. Oldest-on-top costs so much more because it fights the barycentre
+    heuristic head-on; newest-on-top is the direction that heuristic already favoured, so
+    pinning it mostly just makes it stable.
+
+    The remaining cost is collateral, not frame ordering: `semiInteractive` is a graph-wide
+    option, and nodes with no hint of their own get an interpolated position, so the heap
+    column loses the unconstrained heuristic too. `buildGraph` therefore only adds the
+    option when `stack.length > 1`; single-frame steps have nothing to order and stay at
+    their old 198 crossings, which is where the 755 → 686 comes from.
+
+    Two alternatives were measured and rejected: `considerModelOrder.strategy:
+    NODES_AND_EDGES` does nothing for a `FIRST_SEPARATE` layer (0/20 in stack order), and
+    giving heap nodes their own `elk.position` from a breadth-first walk of the frames, to
+    stop the interpolation, was worse than the interpolation (1102). Layout time is
+    unaffected in all arms. If the collateral ever needs to go, the untried route is a
+    hierarchical child node for the frame column, which could carry its own fixed order
+    without handing the whole graph to `semiInteractive`.
+
+## 8. Decisions at a glance
+
+| Decision | Where |
+| --- | --- |
+| Content rendering stays as today, except the two exceptions below | §3 |
+| Per-cell arrow origins kept → `list`/`tuple`/`set` become vertical rows | §5.2 |
+| Rows modelled as fixed-position ports on the east edge | §5.1 |
+| Edge source = row port, target = declared west input port | §6.1 |
+| Node markup lives in one `node-view.ts`, shared by measure and render | §6 |
+| Flat graph, frames pinned to a separate first layer, no outer containers | §4, §7.7 |
+| `Frames` / `Objects` headers stay, positioned from layout extents | §4 |
+| No per-frame line number in frame headers | §2 |
+| Collapse persists across steps; address-reuse caveat accepted | §6.3 |
+| Collapsible types: `list`, `tuple`, `set`, `dict`, `instance` | §6.3 |
+| Collapsible headers show a caret and toggle by keyboard too | §6.3 |
+| No auto-collapse for long lists | §6.3 |
+| Neutral edges + hover highlighting instead of per-address hues | §6.4 |
+| Sizes measured from real DOM offscreen, not canvas text math | §6.2 |
+| Deterministic node order for step-to-step stability; no `considerModelOrder` | §6.5 |
+| Cycle breaking stays `GREEDY`; no interactive layout seeding | §4, §6.5 |
+| elkjs pre-warmed at webview init to hide ~330 ms of JIT | §6.5 |
+| esbuild `minify` enabled before elkjs enters the bundle | §2 |
+| Layout cached per step; slider re-lays out on `change`, not `input` | §6.5 |
+| Pan/zoom via one CSS transform on the canvas, plus zoom-to-fit | §6.5 |
+| Sync `elk.bundled.js`, no Web Worker (CSP) | §2 |
+| elkjs bundled into `webview.js`; separate-asset fallback stays available | §2 |
+
+The spike (§7.1) closed the three risks this section used to list. What remains open is
+**layout time on large heaps**: 100 ms breaks at ~40 nodes, and dropping `considerModelOrder`
+buys back roughly 2.5×, which covers ~100 nodes but not 200. If real student programs turn
+out to exceed that, the escalation is `layered.thoroughness`, then the worker build plus a
+CSP change.
+
+## 9. Definition of done
+
+### 9.1 Test programs
+
+Four programs in `elk-task/`. `example.py` is the main case but **cannot demonstrate
+collapsing on its own**: every `Student` is bound to a module-level global (`tim`, `karl`,
+…), so it stays reachable from a stack root whatever you collapse — collapsing `aud`'s
+student list hides edges but removes no nodes. Hence the other three.
+
+- **`example.py`** — shared objects (`lara`, `quentin`, `jonas`, `fabio`, `hector`, `gerd`
+  are in *both* subject lists), a nested frame (`createGradeList`), a growing list, and a
+  `return` value. Exercises frames, instances, lists and per-cell arrow origins.
+- **`example-anonymous.py`** — `data = [[1, 2], [3, 4]]`, a list of unnamed `Student`s, and
+  one named object inside a container for contrast. The only way to verify that collapsing
+  actually *removes* exclusively-downstream nodes.
+- **`example-cycles.py`** — a self-referencing list, a two-object cycle, dicts with
+  reference values and with tuple (reference) keys, a set and a tuple. Covers the types
+  `example.py` never produces and proves the traversal terminates.
+- **`example-error.py`** — ends in an `IndexError`, so the `traceback` path and a partial
+  trace still render.
+
+There is a fifth, `example-showcase.py`, which is **not** a definition-of-done case: it is
+the one to open when demonstrating the visualization. Its last step puts all six node
+kinds on screen at once (frame, instance, list, tuple, set, dict — 19 nodes, 26 edges), it
+reaches three frames deep while `describe` runs, it has an eight-row node for the striping
+and three dict rows with reference keys, and its two collapse targets are picked so the
+contrast is visible: collapsing `shelf` removes exactly two nodes, collapsing `favourites`
+removes one and leaves `dune` standing because `byTitle` still names it. The comments in
+the file say what to look at.
+
+### 9.2 Functional criteria
+
+1. Steps through all of the above forward and backward, via buttons, slider drag, first and
+   last, with **no console errors and no unhandled promise rejections** — including fast
+   repeated clicks (the async-layout race of §6.6).
+2. **With nothing collapsed**, every `ref` in a step is drawn as exactly one arrow: edge
+   count equals ref count, each arrow starts on the row holding the reference and ends at
+   the referenced object. Assert the counts programmatically rather than eyeballing. (The
+   invariant is stated for the uncollapsed case on purpose — collapsing deliberately
+   removes edges, so with a non-empty `collapsed` set the count drops to the refs among
+   visible objects.)
+3. `example-cycles.py` renders readably: self-loops and back-edges are followable rather
+   than crossing their own or neighbouring boxes (§6.1).
+4. Collapse behaves per §6.3: collapsing `aud`'s list keeps `lara` (still referenced by
+   `prog1`'s list); collapsing a list of anonymous objects removes them; re-expanding
+   restores the previous picture; the state survives stepping away and back. Collapsible
+   headers show their caret and toggle by keyboard as well as by click.
+5. Stepping *n* → *n+1* leaves unrelated nodes in place (§6.5).
+6. Pan, wheel-zoom and zoom-to-fit work; step controls and stdout pane do not scale.
+7. Readable in light, dark and high-contrast themes, with no hardcoded colors left in the
+   new code.
+8. No regression in the non-visual behaviour: editor line highlighting, stdout, traceback
+   display and trace caching all still work.
+
+### 9.3 Hygiene criteria
+
+9. `npm test` clean — compile, lint and the unit tests of §7.8.
+10. Layout stays inside the §6.5 budget on the largest step of `example.py`, and a long
+    trace does not grow memory without bound (layout cache is LRU-bounded).
+11. `html-generator.ts` deleted, `linkerline` removed from `package.json`,
+    `FrontendTraceElem` trimmed, and `src/programflow-visualization/README.md` updated.
+
+Criteria 1-8 have been checked headlessly; **§9.4 is the part that is still outstanding**.
+
+"Runs through `example.py` without errors" is criterion 1 of 11 — it proves the pipeline
+works, not that the feature does.
+
+### 9.4 Manual verification in the real webview — do this before calling it finished
+
+Most of §9.2 was checked headlessly by serving `out/programflow-visualization/web/` over
+`http.server` and driving it with Playwright. That harness has hard limits, so the
+following have **never actually been exercised** and must be walked through by hand in a
+running extension host (F5 → open a `.py` file → *Show Program Flow*):
+
+1. **Resize the panel.** The `ResizeObserver` re-fit in `pan-zoom.ts` is unverified: the
+   test page reports `visibilityState: "hidden"`, so neither `requestAnimationFrame` nor
+   `ResizeObserver` callbacks are ever delivered there. Drag the editor/panel split and
+   confirm the graph re-fits while untouched, and stays put once you have panned.
+2. **Real wheel and real mouse drag.** `page.mouse.wheel()` and `page.mouse.down()` never
+   reach the page in the harness, so every gesture was tested with *synthetic*
+   `WheelEvent`/`PointerEvent`s. Confirm with a real trackpad and a real mouse, including
+   that a drag ending on a node header does not collapse it.
+3. **Themes.** Switch between a light, a dark and a high-contrast theme. The harness has no
+   `--vscode-*` values at all, so only the literal fallbacks were ever rendered: the
+   per-kind accents, the zebra stripe, the edge colour and the high-contrast border are all
+   unproven against real tokens (criterion 7). This includes the floating view toolbar,
+   which sits on `--wypp-node-bg` over the canvas and must stay legible where it overlaps a
+   node, and whose icons are stroked in `currentColor`. Pay particular attention to the
+   blue wash on the Frames column (`--wypp-frame-bg`): it is the one hardcoded colour left,
+   because it layers over the theme's node background and so has to carry an alpha channel,
+   and a translucent blue that reads well on a dark background can turn muddy on a light or
+   high-contrast one.
+4. **Theme-switch invalidation.** Changing the theme must repaint with new colours and not
+   serve a stale cached layout — that path runs through the `<body>` class
+   `MutationObserver` in `webview.ts`, which only fires inside VS Code.
+5. **The non-visual behaviour of criterion 8:** editor line highlighting as you step,
+   stdout, the traceback of `example-error.py`, and trace caching across reopening.
+6. **A real student program**, not one of the four curated examples — the layout-time risk
+   at the end of §8 is about heap size, and the examples top out at 20 nodes.
diff --git a/elk-task/example-anonymous.py b/elk-task/example-anonymous.py
new file mode 100644
index 00000000..851f331d
--- /dev/null
+++ b/elk-task/example-anonymous.py
@@ -0,0 +1,39 @@
+from wypp import *
+
+# Definition-of-done case: objects that are reachable ONLY through another object.
+#
+# In example.py every Student is also bound to a module-level global, so it stays
+# reachable from a stack root no matter what you collapse - collapsing a list there
+# hides edges but removes no nodes. Here nothing inside the containers has a name of
+# its own, so collapsing the container must make its contents disappear.
+
+@record
+class Student:
+    name: str
+    grade: float
+
+
+# Nested lists, no names on the inner lists.
+# Collapsing `data` must remove both inner lists.
+data = [[1, 2], [3, 4]]
+
+# Anonymous instances. Collapsing `group` must remove both Students.
+group = [Student('Anna', 1.0), Student('Ben', 2.3)]
+
+# One shared object for contrast: `shared` keeps its own name, so collapsing
+# `holder` must NOT remove it.
+shared = Student('Cleo', 1.7)
+holder = [shared]
+
+# A container that is itself anonymous: only reachable through `outer`.
+outer = [[shared, Student('Dan', 3.0)]]
+
+
+def summarize(students: list[Student]) -> list[float]:
+    grades = []
+    for student in students:
+        grades.append(student.grade)
+    return grades
+
+
+groupGrades = summarize(group)
diff --git a/elk-task/example-cycles.py b/elk-task/example-cycles.py
new file mode 100644
index 00000000..f9e99ac7
--- /dev/null
+++ b/elk-task/example-cycles.py
@@ -0,0 +1,28 @@
+from wypp import *
+
+# Definition-of-done case: heap shapes that example.py never produces.
+# Covers reference cycles (the traversal must terminate), dicts with reference
+# keys and reference values, tuples, and sets.
+
+# Self-referencing list: selfRef[0] is selfRef.
+selfRef = []
+selfRef.append(selfRef)
+
+# Two-object cycle: left -> right -> left.
+left = []
+right = [left]
+left.append(right)
+
+# Dict with reference values, both anonymous -> collapsing `lookup` removes them.
+lookup = {'evens': [2, 4], 'odds': [1, 3]}
+
+# Dict with reference keys (tuples are hashable, and appear as heap objects).
+byPair = {(1, 2): ['a'], (3, 4): ['b']}
+
+# Set of plain values, and a tuple mixing references with plain values.
+letters = {'a', 'b', 'c'}
+mixed = (selfRef, 42, 'text')
+
+# A dict pointing at something that also has its own name.
+named = [1, 2, 3]
+container = {'named': named, 'anonymous': [4, 5, 6]}
diff --git a/elk-task/example-error.py b/elk-task/example-error.py
new file mode 100644
index 00000000..8f11eba1
--- /dev/null
+++ b/elk-task/example-error.py
@@ -0,0 +1,21 @@
+from wypp import *
+
+# Definition-of-done case: the trace ends in an exception.
+# The visualization must still render every step up to the failure, show the
+# traceback in the output pane, and not break on the partial trace.
+
+@record
+class Student:
+    name: str
+    grade: float
+
+
+students = [Student('Anna', 1.0), Student('Ben', 2.3)]
+grades = []
+
+for student in students:
+    grades.append(student.grade)
+
+# Fails: only two grades were collected.
+third = grades[2]
+print(third)
diff --git a/elk-task/example-showcase.py b/elk-task/example-showcase.py
new file mode 100644
index 00000000..adb850a9
--- /dev/null
+++ b/elk-task/example-showcase.py
@@ -0,0 +1,104 @@
+from wypp import *
+
+# A tour of everything the visualization can draw.
+#
+# Unlike the other three examples, this one is not a definition-of-done case - it exists
+# to be looked at. Each block puts one particular shape on screen; the comment says what
+# to look for. Step to the end first, then walk backwards.
+
+
+@record
+class Book:
+    title: str
+    pages: int
+    rating: float
+
+
+# --- One node of every kind, so the colour accents can be compared side by side ------
+# instance (blue), list (green), tuple (purple), dict (orange), set (yellow).
+
+dune = Book('Dune', 412, 4.5)
+sizes = (13, 21)
+tags = {'scifi', 'classic', 'reread'}
+byTitle = {'Dune': dune}
+
+
+# --- Plain values, one of each type the renderer formats ------------------------------
+# Note that None prints as None rather than as an empty cell.
+
+count = 3
+average = 4.25
+shelfName = 'Reading list'
+finished = True
+nextUp = None
+
+
+# --- Collapsing: nothing in here has a name of its own --------------------------------
+# Collapse `shelf` (click its header) and both Books disappear with it, because no other
+# arrow reaches them.
+
+shelf = [Book('Emma', 474, 4.0), Book('Ulysses', 730, 3.2)]
+
+
+# --- ... but a shared object survives -------------------------------------------------
+# `dune` has a name of its own and `byTitle` also points at it, so collapsing
+# `favourites` removes only the arrow, not the node.
+
+favourites = [dune, Book('Solaris', 204, 4.1)]
+
+
+# --- Dicts whose keys are references ---------------------------------------------------
+# A reference key has no text, so the cell reads [key] and grows its own arrow.
+
+ratingOf = {(4, 5): 'great', (1, 2): 'poor'}
+
+# Here key *and* value are references, so the row sends out two arrows from
+# different heights.
+
+pairs = {sizes: shelf}
+
+
+# --- Cycles: the edges come back on themselves -----------------------------------------
+
+chain = []
+chain.append(chain)
+
+alpha = []
+beta = [alpha]
+alpha.append(beta)
+
+
+# --- A tall node, to show the row striping ---------------------------------------------
+
+pageCounts = [412, 474, 730, 204, 96, 288, 350, 512]
+
+
+# --- Several frames at once -------------------------------------------------------------
+# While `describe` runs there are three frames on screen: Global, report and describe.
+# Only the innermost one gets the current-frame accent. Watch the `return` row appear in
+# a frame just before it disappears - it is the one row drawn in the accent colour.
+
+def describe(book: Book) -> str:
+    return book.title + ' (' + str(book.pages) + ' pages)'
+
+
+def report(books: list[Book]) -> list[str]:
+    lines = []
+    for book in books:
+        lines.append(describe(book))
+    return lines
+
+
+def longest(books: list[Book]) -> Book:
+    best = books[0]
+    for book in books:
+        if book.pages > best.pages:
+            best = book
+    return best
+
+
+summary = report(favourites)
+biggest = longest(favourites)
+
+print(summary)
+print(biggest.title)
diff --git a/elk-task/example.elkt b/elk-task/example.elkt
new file mode 100644
index 00000000..a103135e
--- /dev/null
+++ b/elk-task/example.elkt
@@ -0,0 +1,259 @@
+// complicated.py — Step 35 (about to execute line 36: `return result`)
+// Reconstructed from the real trace of write-your-python-program's
+// pytrace-generator (trace entry index 34).
+//
+// Paste into the ELK demonstrator: https://rtsys.informatik.uni-kiel.de/elklive/elkgraph.html
+
+org.eclipse.elk.algorithm: layered
+org.eclipse.elk.direction: RIGHT
+org.eclipse.elk.hierarchyHandling: INCLUDE_CHILDREN
+org.eclipse.elk.spacing.nodeNode: 20
+org.eclipse.elk.layered.spacing.nodeNodeBetweenLayers: 45
+
+node frames {
+  org.eclipse.elk.padding: "[top=36,left=16,bottom=16,right=16]"
+  org.eclipse.elk.nodeSize.constraints: "[MINIMUM_SIZE]"
+  org.eclipse.elk.nodeSize.minimum: "(320, 220)"
+  label "frames"
+
+  node moduleFrame {
+    org.eclipse.elk.padding: "[top=34,left=14,bottom=14,right=14]"
+    org.eclipse.elk.nodeSize.constraints: "[MINIMUM_SIZE]"
+    org.eclipse.elk.nodeSize.minimum: "(260, 160)"
+    label "<module>"
+
+    node Student         { layout [ size: 170, 28 ] org.eclipse.elk.alignment: LEFT label "Student = <class 'Student'>" }
+    node Subject         { layout [ size: 170, 28 ] org.eclipse.elk.alignment: LEFT label "Subject = <class 'Subject'>" }
+    node createGradeList { layout [ size: 170, 28 ] org.eclipse.elk.alignment: LEFT label "createGradeList = <function>" }
+
+    node tim         { layout [ size: 100, 28 ] org.eclipse.elk.alignment: LEFT label "tim" }
+    node karl        { layout [ size: 100, 28 ] org.eclipse.elk.alignment: LEFT label "karl" }
+    node tom         { layout [ size: 100, 28 ] org.eclipse.elk.alignment: LEFT label "tom" }
+    node karl2       { layout [ size: 100, 28 ] org.eclipse.elk.alignment: LEFT label "karl2" }
+    node mariam      { layout [ size: 100, 28 ] org.eclipse.elk.alignment: LEFT label "mariam" }
+    node hector      { layout [ size: 100, 28 ] org.eclipse.elk.alignment: LEFT label "hector" }
+    node quentin     { layout [ size: 100, 28 ] org.eclipse.elk.alignment: LEFT label "quentin" }
+    node fabio       { layout [ size: 100, 28 ] org.eclipse.elk.alignment: LEFT label "fabio" }
+    node jonas       { layout [ size: 100, 28 ] org.eclipse.elk.alignment: LEFT label "jonas" }
+    node lara        { layout [ size: 100, 28 ] org.eclipse.elk.alignment: LEFT label "lara" }
+    node gerd        { layout [ size: 100, 28 ] org.eclipse.elk.alignment: LEFT label "gerd" }
+    node joerg       { layout [ size: 100, 28 ] org.eclipse.elk.alignment: LEFT label "joerg" }
+    node aud         { layout [ size: 100, 28 ] org.eclipse.elk.alignment: LEFT label "aud" }
+    node prog1       { layout [ size: 100, 28 ] org.eclipse.elk.alignment: LEFT label "prog1" }
+    node subjectList { layout [ size: 100, 28 ] org.eclipse.elk.alignment: LEFT label "subjectList" }
+  }
+
+  node createGradeListFrame {
+    org.eclipse.elk.padding: "[top=34,left=14,bottom=14,right=14]"
+    org.eclipse.elk.nodeSize.constraints: "[MINIMUM_SIZE]"
+    org.eclipse.elk.nodeSize.minimum: "(260, 160)"
+    label "createGradeList (line 36)"
+
+    node subject { layout [ size: 100, 28 ] label "subject" }
+    node result  { layout [ size: 100, 28 ] label "result" }
+    node student { layout [ size: 100, 28 ] label "student" }
+  }
+}
+
+node objects {
+  org.eclipse.elk.padding: "[top=36,left=16,bottom=16,right=16]"
+  org.eclipse.elk.nodeSize.constraints: "[MINIMUM_SIZE]"
+  org.eclipse.elk.nodeSize.minimum: "(320, 220)"
+  label "objects"
+
+  node timObj {
+    layout [ size: 160, 62 ]
+    org.eclipse.elk.nodeLabels.placement: "[H_LEFT, V_TOP, INSIDE]"
+    org.eclipse.elk.nodeLabels.padding: "[top=6,left=10,bottom=6,right=10]"
+    label "Student"        { layout [ size: 55, 16 ] }
+    label "name = 'Tim'"   { layout [ size: 90, 16 ] }
+    label "grade = 1.0"    { layout [ size: 82, 16 ] }
+  }
+  node karlObj {
+    layout [ size: 160, 62 ]
+    org.eclipse.elk.nodeLabels.placement: "[H_LEFT, V_TOP, INSIDE]"
+    org.eclipse.elk.nodeLabels.padding: "[top=6,left=10,bottom=6,right=10]"
+    label "Student"        { layout [ size: 55, 16 ] }
+    label "name = 'karl'"  { layout [ size: 96, 16 ] }
+    label "grade = 2.0"    { layout [ size: 82, 16 ] }
+  }
+  node tomObj {
+    layout [ size: 160, 62 ]
+    org.eclipse.elk.nodeLabels.placement: "[H_LEFT, V_TOP, INSIDE]"
+    org.eclipse.elk.nodeLabels.padding: "[top=6,left=10,bottom=6,right=10]"
+    label "Student"        { layout [ size: 55, 16 ] }
+    label "name = 'Tom'"   { layout [ size: 90, 16 ] }
+    label "grade = 1.3"    { layout [ size: 82, 16 ] }
+  }
+  node karl2Obj {
+    layout [ size: 160, 62 ]
+    org.eclipse.elk.nodeLabels.placement: "[H_LEFT, V_TOP, INSIDE]"
+    org.eclipse.elk.nodeLabels.padding: "[top=6,left=10,bottom=6,right=10]"
+    label "Student"        { layout [ size: 55, 16 ] }
+    label "name = 'karl'"  { layout [ size: 96, 16 ] }
+    label "grade = 2.6"    { layout [ size: 82, 16 ] }
+  }
+  node mariamObj {
+    layout [ size: 160, 62 ]
+    org.eclipse.elk.nodeLabels.placement: "[H_LEFT, V_TOP, INSIDE]"
+    org.eclipse.elk.nodeLabels.padding: "[top=6,left=10,bottom=6,right=10]"
+    label "Student"         { layout [ size: 55, 16 ] }
+    label "name = 'Mariam'"  { layout [ size: 110, 16 ] }
+    label "grade = 1.0"      { layout [ size: 82, 16 ] }
+  }
+  node hectorObj {
+    layout [ size: 160, 62 ]
+    org.eclipse.elk.nodeLabels.placement: "[H_LEFT, V_TOP, INSIDE]"
+    org.eclipse.elk.nodeLabels.padding: "[top=6,left=10,bottom=6,right=10]"
+    label "Student"          { layout [ size: 55, 16 ] }
+    label "name = 'Hector'"  { layout [ size: 110, 16 ] }
+    label "grade = 3.0"      { layout [ size: 82, 16 ] }
+  }
+  node quentinObj {
+    layout [ size: 160, 62 ]
+    org.eclipse.elk.nodeLabels.placement: "[H_LEFT, V_TOP, INSIDE]"
+    org.eclipse.elk.nodeLabels.padding: "[top=6,left=10,bottom=6,right=10]"
+    label "Student"           { layout [ size: 55, 16 ] }
+    label "name = 'Quentin'"  { layout [ size: 118, 16 ] }
+    label "grade = 1.7"       { layout [ size: 82, 16 ] }
+  }
+  node fabioObj {
+    layout [ size: 160, 62 ]
+    org.eclipse.elk.nodeLabels.placement: "[H_LEFT, V_TOP, INSIDE]"
+    org.eclipse.elk.nodeLabels.padding: "[top=6,left=10,bottom=6,right=10]"
+    label "Student"         { layout [ size: 55, 16 ] }
+    label "name = 'Fabio'"  { layout [ size: 102, 16 ] }
+    label "grade = 4.0"     { layout [ size: 82, 16 ] }
+  }
+  node jonasObj {
+    layout [ size: 160, 62 ]
+    org.eclipse.elk.nodeLabels.placement: "[H_LEFT, V_TOP, INSIDE]"
+    org.eclipse.elk.nodeLabels.padding: "[top=6,left=10,bottom=6,right=10]"
+    label "Student"         { layout [ size: 55, 16 ] }
+    label "name = 'Jonas'"  { layout [ size: 102, 16 ] }
+    label "grade = 5.0"     { layout [ size: 82, 16 ] }
+  }
+  node laraObj {
+    layout [ size: 160, 62 ]
+    org.eclipse.elk.nodeLabels.placement: "[H_LEFT, V_TOP, INSIDE]"
+    org.eclipse.elk.nodeLabels.padding: "[top=6,left=10,bottom=6,right=10]"
+    label "Student"        { layout [ size: 55, 16 ] }
+    label "name = 'Lara'"  { layout [ size: 96, 16 ] }
+    label "grade = 3.3"    { layout [ size: 82, 16 ] }
+  }
+  node gerdObj {
+    layout [ size: 160, 62 ]
+    org.eclipse.elk.nodeLabels.placement: "[H_LEFT, V_TOP, INSIDE]"
+    org.eclipse.elk.nodeLabels.padding: "[top=6,left=10,bottom=6,right=10]"
+    label "Student"        { layout [ size: 55, 16 ] }
+    label "name = 'Gerd'"  { layout [ size: 96, 16 ] }
+    label "grade = 2.6"    { layout [ size: 82, 16 ] }
+  }
+  node joergObj {
+    layout [ size: 160, 62 ]
+    org.eclipse.elk.nodeLabels.placement: "[H_LEFT, V_TOP, INSIDE]"
+    org.eclipse.elk.nodeLabels.padding: "[top=6,left=10,bottom=6,right=10]"
+    label "Student"         { layout [ size: 55, 16 ] }
+    label "name = 'Joerg'"  { layout [ size: 104, 16 ] }
+    label "grade = 2.6"     { layout [ size: 82, 16 ] }
+  }
+
+  node audObj {
+    layout [ size: 150, 46 ]
+    org.eclipse.elk.nodeLabels.placement: "[H_LEFT, V_TOP, INSIDE]"
+    org.eclipse.elk.nodeLabels.padding: "[top=6,left=10,bottom=6,right=10]"
+    label "Subject"       { layout [ size: 55, 16 ] }
+    label "name = 'AuD'"  { layout [ size: 90, 16 ] }
+  }
+  node prog1Obj {
+    layout [ size: 150, 46 ]
+    org.eclipse.elk.nodeLabels.placement: "[H_LEFT, V_TOP, INSIDE]"
+    org.eclipse.elk.nodeLabels.padding: "[top=6,left=10,bottom=6,right=10]"
+    label "Subject"         { layout [ size: 55, 16 ] }
+    label "name = 'Prog1'"  { layout [ size: 102, 16 ] }
+  }
+
+  node audStudentsList {
+    layout [ size: 130, 46 ]
+    org.eclipse.elk.nodeLabels.placement: "[H_LEFT, V_TOP, INSIDE]"
+    org.eclipse.elk.nodeLabels.padding: "[top=6,left=10,bottom=6,right=10]"
+    label "list"          { layout [ size: 30, 16 ] }
+    label "12 elements"   { layout [ size: 82, 16 ] }
+  }
+  node prog1StudentsList {
+    layout [ size: 130, 46 ]
+    org.eclipse.elk.nodeLabels.placement: "[H_LEFT, V_TOP, INSIDE]"
+    org.eclipse.elk.nodeLabels.padding: "[top=6,left=10,bottom=6,right=10]"
+    label "list"         { layout [ size: 30, 16 ] }
+    label "6 elements"   { layout [ size: 76, 16 ] }
+  }
+  node subjectListList {
+    layout [ size: 130, 46 ]
+    org.eclipse.elk.nodeLabels.placement: "[H_LEFT, V_TOP, INSIDE]"
+    org.eclipse.elk.nodeLabels.padding: "[top=6,left=10,bottom=6,right=10]"
+    label "list"         { layout [ size: 30, 16 ] }
+    label "2 elements"   { layout [ size: 76, 16 ] }
+  }
+  node resultList {
+    layout [ size: 170, 140 ]
+    org.eclipse.elk.nodeLabels.placement: "[H_LEFT, V_TOP, INSIDE]"
+    org.eclipse.elk.nodeLabels.padding: "[top=6,left=10,bottom=6,right=10]"
+    label "list"                 { layout [ size: 30, 16 ] }
+    label "[0] <class 'float'>"  { layout [ size: 138, 16 ] }
+    label "[1] 3.3"              { layout [ size: 54, 16 ] }
+    label "[2] 1.7"              { layout [ size: 54, 16 ] }
+    label "[3] 5.0"              { layout [ size: 54, 16 ] }
+    label "[4] 4.0"              { layout [ size: 54, 16 ] }
+    label "[5] 3.0"              { layout [ size: 54, 16 ] }
+    label "[6] 2.6"              { layout [ size: 54, 16 ] }
+  }
+
+  edge audObj   -> audStudentsList   { label "students" }
+  edge prog1Obj -> prog1StudentsList { label "students" }
+
+  edge subjectListList -> audObj   { label "0" }
+  edge subjectListList -> prog1Obj { label "1" }
+
+  edge audStudentsList -> timObj     { label "0" }
+  edge audStudentsList -> karlObj    { label "1" }
+  edge audStudentsList -> tomObj     { label "2" }
+  edge audStudentsList -> karl2Obj   { label "3" }
+  edge audStudentsList -> mariamObj  { label "4" }
+  edge audStudentsList -> hectorObj  { label "5" }
+  edge audStudentsList -> quentinObj { label "6" }
+  edge audStudentsList -> fabioObj   { label "7" }
+  edge audStudentsList -> jonasObj   { label "8" }
+  edge audStudentsList -> laraObj    { label "9" }
+  edge audStudentsList -> gerdObj    { label "10" }
+  edge audStudentsList -> joergObj   { label "11" }
+
+  edge prog1StudentsList -> laraObj    { label "0" }
+  edge prog1StudentsList -> quentinObj { label "1" }
+  edge prog1StudentsList -> jonasObj   { label "2" }
+  edge prog1StudentsList -> fabioObj   { label "3" }
+  edge prog1StudentsList -> hectorObj  { label "4" }
+  edge prog1StudentsList -> gerdObj    { label "5" }
+}
+
+// Cross-hierarchy edges: declared at the root, the lowest common ancestor
+// of "frames" and "objects", using qualified references.
+
+edge frames.moduleFrame.tim         -> objects.timObj
+edge frames.moduleFrame.karl        -> objects.karlObj
+edge frames.moduleFrame.tom         -> objects.tomObj
+edge frames.moduleFrame.karl2       -> objects.karl2Obj
+edge frames.moduleFrame.mariam      -> objects.mariamObj
+edge frames.moduleFrame.hector      -> objects.hectorObj
+edge frames.moduleFrame.quentin     -> objects.quentinObj
+edge frames.moduleFrame.fabio       -> objects.fabioObj
+edge frames.moduleFrame.jonas       -> objects.jonasObj
+edge frames.moduleFrame.lara        -> objects.laraObj
+edge frames.moduleFrame.gerd        -> objects.gerdObj
+edge frames.moduleFrame.joerg       -> objects.joergObj
+edge frames.moduleFrame.aud         -> objects.audObj
+edge frames.moduleFrame.prog1       -> objects.prog1Obj
+edge frames.moduleFrame.subjectList -> objects.subjectListList
+
+edge frames.createGradeListFrame.subject -> objects.prog1Obj
+edge frames.createGradeListFrame.result  -> objects.resultList
+edge frames.createGradeListFrame.student -> objects.gerdObj
diff --git a/elk-task/example.py b/elk-task/example.py
new file mode 100644
index 00000000..4f0281a8
--- /dev/null
+++ b/elk-task/example.py
@@ -0,0 +1,38 @@
+from wypp import *
+
+@record
+class Student:
+    name: str
+    grade: float
+
+@record
+class Subject:
+    name: str
+    students: list[Student]
+
+
+tim = Student('Tim', 1.0)
+karl = Student('karl', 2.0)
+tom = Student('Tom', 1.3)
+karl2 = Student('karl', 2.6)
+mariam = Student('Mariam', 1.0)
+hector = Student('Hector', 3.0)
+quentin = Student('Quentin', 1.7)
+fabio = Student('Fabio', 4.0)
+jonas = Student('Jonas', 5.0)
+lara = Student('Lara', 3.3)
+gerd = Student('Gerd', 2.6)
+joerg = Student('Joerg', 2.6)
+
+aud = Subject('AuD', [tim, karl, tom, karl2, mariam, hector, quentin, fabio, jonas, lara, gerd, joerg])
+prog1 = Subject('Prog1', [lara, quentin, jonas, fabio, hector, gerd])
+
+subjectList = [aud, prog1]
+
+def createGradeList(subject: Subject) -> list[float]:
+    result = [float]
+    for student in subject.students:
+        result.append(student.grade)
+    return result
+
+gradeList = createGradeList(prog1)
\ No newline at end of file
diff --git a/elk-task/new.png b/elk-task/new.png
new file mode 100644
index 00000000..165930bb
Binary files /dev/null and b/elk-task/new.png differ
diff --git a/elk-task/veryRoughMockupOfExample.png b/elk-task/veryRoughMockupOfExample.png
new file mode 100644
index 00000000..e47c6d00
Binary files /dev/null and b/elk-task/veryRoughMockupOfExample.png differ
diff --git a/package-lock.json b/package-lock.json
index 75e0e67b..5392f9f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,15 @@
 {
 	"name": "write-your-python-program",
-	"version": "2.1.2",
+	"version": "2.3.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "write-your-python-program",
-			"version": "2.1.2",
+			"version": "2.3.0",
 			"license": "See license in LICENSE",
 			"dependencies": {
-				"linkerline": "^1.5.0",
+				"elkjs": "^0.12.0",
 				"stringify-json": "^2.0.0",
 				"tmp": "^0.2.3",
 				"ts-md5": "^1.3.1"
@@ -1413,6 +1413,11 @@
 			"integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
 			"dev": true
 		},
+		"node_modules/elkjs": {
+			"version": "0.12.0",
+			"resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.12.0.tgz",
+			"integrity": "sha512-YZcKynxVxYoKIOEpywEPwCFdg+BTbxQRNf3pbwdDCvc8O3kQD8bmIwSxKU1eOTVc4Xo+VG9Te+575mlfvOrhEQ=="
+		},
 		"node_modules/emoji-regex": {
 			"version": "8.0.0",
 			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -2309,12 +2314,6 @@
 				"node": ">= 0.8.0"
 			}
 		},
-		"node_modules/linkerline": {
-			"version": "1.5.0",
-			"resolved": "https://registry.npmjs.org/linkerline/-/linkerline-1.5.0.tgz",
-			"integrity": "sha512-DOs7nBPY261mDQ9DfvxVyeoqCVCLtgRyF3LakoZYPDqM+GX8xkbR5gdnNHY8avz6my+ljkA4IqXTHgSqtD3gSA==",
-			"license": "MIT"
-		},
 		"node_modules/listenercount": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/listenercount/-/listenercount-1.0.1.tgz",
diff --git a/package.json b/package.json
index 5377233b..34d8baf1 100644
--- a/package.json
+++ b/package.json
@@ -85,15 +85,17 @@
 	"scripts": {
 		"vscode:prepublish": "npm run build",
 		"compile": "tsc -p ./",
+		"compile:web": "tsc -p src/programflow-visualization/web --noEmit",
 		"lint": "eslint src --ext ts",
 		"watch": "tsc -watch -p ./",
-		"test": "npm run compile && npm run lint",
+		"test:unit": "mocha --ui tdd \"out/test/unit/**/*.test.js\"",
+		"test": "npm run compile && npm run compile:web && npm run lint && npm run test:unit",
 		"build:web": "node scripts/build-web.mjs",
 		"watch:web": "node scripts/build-web.mjs --watch",
 		"build": "npm run compile && npm run build:web"
 	},
 	"dependencies": {
-		"linkerline": "^1.5.0",
+		"elkjs": "^0.12.0",
 		"stringify-json": "^2.0.0",
 		"tmp": "^0.2.3",
 		"ts-md5": "^1.3.1"
diff --git a/scripts/build-web.mjs b/scripts/build-web.mjs
index a7bd2ae1..203e945b 100644
--- a/scripts/build-web.mjs
+++ b/scripts/build-web.mjs
@@ -13,6 +13,10 @@ const webSrc = path.join(root, "src/programflow-visualization/web");
 const webOut = path.join(root, "out/programflow-visualization/web");
 const watch = process.argv.includes("--watch");
 
+// elkjs is ~3.4 MB unminified and dominates the bundle, so production builds are
+// minified (see elk-task/elk-plan.md 2). Watch builds stay readable for debugging.
+const minify = !watch;
+
 fs.mkdirSync(webOut, { recursive: true });
 
 // Bundle webview.ts -> out/.../webview.js
@@ -21,6 +25,7 @@ const webviewCtx = await esbuild.context({
   bundle: true,
   platform: "browser",
   format: "iife",      // classic <script src="...">
+  minify,
   sourcemap: true,
   outfile: path.join(webOut, "webview.js"),
 });
@@ -31,6 +36,7 @@ const adapterCtx = await esbuild.context({
   bundle: true,
   platform: "browser",
   format: "iife",
+  minify,
   sourcemap: true,
   outfile: path.join(webOut, "vscode-host-adapter.js"),
 });
diff --git a/src/programflow-visualization/README.md b/src/programflow-visualization/README.md
index 3ce22a96..c9fffbdd 100644
--- a/src/programflow-visualization/README.md
+++ b/src/programflow-visualization/README.md
@@ -4,13 +4,23 @@
 
 ### **Webview (web/)**
 The self-contained UI component that the user interacts with:
-- **webview.ts**: Manages trace navigation, rendering, and local state. Navigation (prev/next/first/last) is fully local; after updating the visualization, it emits a `highlight` message for line highlighting in the editor.
-- **html-generator.ts**: Converts backend trace elements into HTML fragments for display.
+- **webview.ts**: Manages trace navigation, rendering, and local state. Navigation (prev/next/first/last) is fully local; after updating the visualization, it emits a `highlight` message for line highlighting in the editor. Also owns the set of collapsed heap objects.
+- **elk-view.ts**: Runs one step through the pipeline (build → measure → lay out → draw) and caches the result per step, LRU-bounded.
+- **measure.ts**: Measures the real node markup offscreen and writes sizes and port positions back into the graph, so the layout matches what is drawn.
+- **graph-renderer.ts**: Positions the nodes from the ELK result and draws the edges as SVG paths.
+- **node-view.ts**: The single definition of a node's markup, shared by measurement and rendering.
+- **pan-zoom.ts**: Wheel zoom, drag panning and zoom-to-fit, applied as one CSS transform.
 - **vscode-host-adapter.ts**: Bridges between the webview's custom events and the VS Code webview API. Non-VS Code environments work unchanged (mock postMessage).
 - **index.html**: DOM structure, control buttons, and output panes.
 - **webview.css**: Layout and styling.
 - **example-trace-content.js**: Optional sample trace for design/development mode.
 
+### **Graph model (graph-model.ts, reachability.ts)**
+Outside `web/` because it is pure logic with no DOM, which is what makes it unit-testable
+(`src/test/unit`):
+- **graph-model.ts**: Turns one backend trace element into the ELK graph — one node per frame and per visible heap object, one port per row that holds a reference, one edge per reference.
+- **reachability.ts**: Decides which heap objects a step shows, given the set of collapsed ones.
+
 ### **Panel (frontend/)**
 The VS Code extension-side host that owns the webview:
 - **visualization_panel.ts**: Creates and manages the webview panel lifecycle. Receives `reset` and `append` messages from the trace backend, posts them to the webview. Handles `highlight` messages from the webview to update editor line highlighting.
@@ -29,7 +39,7 @@ graph TB
 
     subgraph webview["Webview (Sandboxed)"]
         ui["webview.ts<br/>(UI + Navigation)"]
-        gen["html-generator.ts<br/>(Rendering)"]
+        elk["elk-view.ts<br/>(build, measure, layout, draw)"]
     end
 
     subgraph editor["Editor"]
@@ -44,8 +54,8 @@ graph TB
     adapter -->|postMessage highlight| panel
     panel -->|updateLineHighlight| editor
 
-    ui -->|local navigation| gen
-    gen -->|innerHTML| ui
+    ui -->|current step + collapsed set| elk
+    elk -->|positioned nodes and edges| ui
 ```
 
 ## Data Flow
diff --git a/src/programflow-visualization/graph-model.ts b/src/programflow-visualization/graph-model.ts
new file mode 100644
index 00000000..d05c6a6d
--- /dev/null
+++ b/src/programflow-visualization/graph-model.ts
@@ -0,0 +1,333 @@
+// Builds the ELK graph for one trace step. See elk-task/elk-plan.md 6.1.
+//
+// Structure only: no sizes, no DOM. measure.ts fills width/height and port
+// positions, then elk.layout() assigns coordinates.
+import type { ElkExtendedEdge, ElkNode, ElkPort } from "elkjs/lib/elk-api";
+import type { Address, BackendTraceElem, HeapValue, Value } from "./types";
+import { asRecord, outgoingRefs, visibleAddresses } from "./reachability";
+
+export type NodeKind =
+  | "frame"
+  | "current-frame"
+  | "list"
+  | "tuple"
+  | "set"
+  | "dict"
+  | "instance";
+
+/** One `key | value` line inside a node. `ref` is set when the line holds a reference. */
+export type RowModel = {
+  key: string;
+  value: string;
+  ref?: Address;
+  /**
+   * Set when the *key* is itself a reference, which only dicts can produce
+   * (`{(1, 2): "pair"}`). Such a key needs its own arrow, or the key object shows up
+   * with nothing pointing at it and ELK lays it out as a root, left of the frames.
+   */
+  keyRef?: Address;
+  /** `return` rows are highlighted, as they are today. */
+  isReturn?: boolean;
+};
+
+export type NodeModel = {
+  id: string;
+  kind: NodeKind;
+  header: string;
+  rows: RowModel[];
+  /** Heap address, absent for frames. Only object nodes can be collapsed. */
+  address?: Address;
+  collapsed: boolean;
+  /** Shown instead of the rows while collapsed, e.g. "12 elements". */
+  summary: string;
+};
+
+export type VizGraph = {
+  /** Handed to elk.layout(). Node content is *not* in here — ELK may drop unknown fields. */
+  graph: ElkNode;
+  /** Node id -> content, for measure.ts and graph-renderer.ts. */
+  nodes: Map<string, NodeModel>;
+};
+
+/**
+ * Layout options settled by the spike, whose findings are in elk-task/elk-plan.md 7.1:
+ * - cycleBreaking stays at its GREEDY default, or the frames' layer constraint throws
+ *   as soon as an edge is reversed into a frame (plan 4).
+ * - considerModelOrder is deliberately absent: it buys no stability and costs 2.5x
+ *   (plan 6.5). Stability comes from emitting nodes in a deterministic order.
+ * - semiInteractive is *not* here: it is switched on per step by buildGraph, and only
+ *   when there is more than one frame to order. See FRAME_ORDER_OPTIONS (plan 7.10).
+ */
+export const LAYOUT_OPTIONS: Record<string, string> = {
+  "elk.algorithm": "layered",
+  "elk.direction": "RIGHT",
+  "elk.edgeRouting": "ORTHOGONAL",
+  "elk.spacing.nodeNode": "25",
+  "elk.layered.spacing.nodeNodeBetweenLayers": "60",
+};
+
+/**
+ * Makes crossing minimisation honour the elk.position hints on the frame nodes.
+ * Without it the frame layer is ordered by barycentre, which lets sibling frames swap
+ * places from one step to the next.
+ *
+ * It is not free: the option is graph-wide, and nodes that carry no hint of their own
+ * get an interpolated one, so the heap column loses the unconstrained barycentre
+ * heuristic too. On this trace that collateral is worth ~35% more crossings, which is
+ * why it is only switched on for the steps that actually need it (plan 7.10).
+ */
+const FRAME_ORDER_OPTIONS: Record<string, string> = {
+  "elk.layered.crossingMinimization.semiInteractive": "true",
+};
+
+export const frameNodeId = (index: number): string => `frame:${index}`;
+export const objectNodeId = (address: Address): string => `obj:${address}`;
+export const rowPortId = (nodeId: string, rowIndex: number): string =>
+  `${nodeId}:${rowIndex}`;
+/** Second port on a dict row whose key is a reference. */
+export const keyPortId = (nodeId: string, rowIndex: number): string =>
+  `${nodeId}:${rowIndex}k`;
+export const inputPortId = (nodeId: string): string => `${nodeId}:in`;
+
+/** Primitive rendering, matching html-generator.getCorrectValueOf. */
+export function formatValue(value: Value): string {
+  switch (value.type) {
+    case "ref":
+      return "";
+    case "none":
+      return "None";
+    default:
+      return String(value.value);
+  }
+}
+
+function dictKeyLabel(key: Value | undefined): string {
+  if (!key) {
+    return "";
+  }
+  // A reference key has no text of its own; the arrow leaving the key cell says
+  // what it is. The bracket keeps the cell from looking empty.
+  return key.type === "ref" ? "[key]" : formatValue(key);
+}
+
+function headerOf(heapValue: HeapValue): string {
+  return heapValue.type === "instance" ? heapValue.name : heapValue.type;
+}
+
+function summaryOf(heapValue: HeapValue, rowCount: number): string {
+  switch (heapValue.type) {
+    case "dict":
+      return `${rowCount} ${rowCount === 1 ? "entry" : "entries"}`;
+    case "instance":
+      return `${rowCount} ${rowCount === 1 ? "field" : "fields"}`;
+    default:
+      return `${rowCount} ${rowCount === 1 ? "element" : "elements"}`;
+  }
+}
+
+/**
+ * Rows of a heap object. list/tuple/set render vertically like dict and instance
+ * (plan 5.2), with the index playing the role of the key.
+ */
+export function rowsOfHeapValue(heapValue: HeapValue): RowModel[] {
+  switch (heapValue.type) {
+    case "dict": {
+      const keys = asRecord<Value>(heapValue.keys);
+      const values = asRecord<Value>(heapValue.value);
+      return Object.keys(values).map((slot) => {
+        const value = values[slot];
+        const key = keys[slot];
+        return {
+          key: dictKeyLabel(key),
+          value: formatValue(value),
+          ref: value.type === "ref" ? value.value : undefined,
+          keyRef: key?.type === "ref" ? key.value : undefined,
+        };
+      });
+    }
+    case "instance": {
+      const fields = asRecord<Value>(heapValue.value);
+      return Object.keys(fields).map((name) => {
+        const value = fields[name];
+        return {
+          key: name,
+          value: formatValue(value),
+          ref: value.type === "ref" ? value.value : undefined,
+        };
+      });
+    }
+    case "set":
+      // A set has no index, so the key column stays empty.
+      return heapValue.value.map((value) => ({
+        key: "",
+        value: formatValue(value),
+        ref: value.type === "ref" ? value.value : undefined,
+      }));
+    default:
+      return heapValue.value.map((value, index) => ({
+        key: `[${index}]`,
+        value: formatValue(value),
+        ref: value.type === "ref" ? value.value : undefined,
+      }));
+  }
+}
+
+function elkNodeFor(model: NodeModel, extraOptions?: Record<string, string>): ElkNode {
+  const ports: ElkPort[] = [];
+
+  // Objects get one west input port so arrowheads always land in the same place
+  // (plan 6.1). Frames are never targets, so they do not get one.
+  if (model.address !== undefined) {
+    ports.push({
+      id: inputPortId(model.id),
+      width: 0,
+      height: 0,
+      layoutOptions: { "elk.port.side": "WEST" },
+    });
+  }
+
+  if (!model.collapsed) {
+    model.rows.forEach((row, index) => {
+      if (row.keyRef !== undefined) {
+        ports.push({
+          id: keyPortId(model.id, index),
+          width: 0,
+          height: 0,
+          layoutOptions: { "elk.port.side": "EAST" },
+        });
+      }
+      if (row.ref === undefined) {
+        return;
+      }
+      ports.push({
+        id: rowPortId(model.id, index),
+        width: 0,
+        height: 0,
+        layoutOptions: { "elk.port.side": "EAST" },
+      });
+    });
+  }
+
+  return {
+    id: model.id,
+    // Filled in by measure.ts; ELK requires them to exist.
+    width: 0,
+    height: 0,
+    ports,
+    layoutOptions: {
+      "elk.portConstraints": "FIXED_POS",
+      ...extraOptions,
+    },
+  };
+}
+
+export function buildGraph(
+  elem: BackendTraceElem,
+  collapsed: ReadonlySet<Address> = new Set()
+): VizGraph {
+  const heap = asRecord<HeapValue>(elem.heap);
+  const visible = visibleAddresses(elem, collapsed);
+  const models = new Map<string, NodeModel>();
+  const children: ElkNode[] = [];
+  const edges: ElkExtendedEdge[] = [];
+
+  const addEdge = (sourcePort: string, target: Address) => {
+    edges.push({
+      id: `edge:${sourcePort}->${target}`,
+      sources: [sourcePort],
+      targets: [inputPortId(objectNodeId(target))],
+    });
+  };
+
+  // Frames, in stack order. The *last* entry is the currently executing frame;
+  // html-generator marked index 0 instead, which was the <module> frame (plan 2).
+  const lastFrameIndex = elem.stack.length - 1;
+  elem.stack.forEach((frame, index) => {
+    const id = frameNodeId(index);
+    const model: NodeModel = {
+      id,
+      kind: index === lastFrameIndex ? "current-frame" : "frame",
+      header: frame.frameName === "<module>" ? "Global" : frame.frameName,
+      rows: frame.locals.map((local) => ({
+        key: local.name,
+        value: formatValue(local),
+        ref: local.type === "ref" ? local.value : undefined,
+        isReturn: local.name === "return",
+      })),
+      collapsed: false,
+      summary: "",
+    };
+    models.set(id, model);
+    children.push(
+      // FIRST_SEPARATE, not FIRST: frames get a layer of their own, which is what the
+      // Frames/Objects bands assume, and it measurably halves layout time (plan 7.7).
+      //
+      // elk.position is only a ranking hint, read by semiInteractive crossing
+      // minimisation; the actual y still comes from node placement. Newest frame on
+      // top, oldest at the bottom: the stack grows in one direction either way, and
+      // this is the direction the barycentre heuristic already favoured, so pinning it
+      // costs a fraction of the crossings that pinning the reverse did (plan 7.10).
+      // Only the frames carry a hint; the heap column is left to the heuristic.
+      elkNodeFor(model, {
+        "elk.layered.layering.layerConstraint": "FIRST_SEPARATE",
+        "elk.position": `(0,${lastFrameIndex - index})`,
+      })
+    );
+    model.rows.forEach((row, rowIndex) => {
+      if (row.ref !== undefined && visible.has(row.ref)) {
+        addEdge(rowPortId(id, rowIndex), row.ref);
+      }
+    });
+  });
+
+  // Objects, ascending address, so the order is identical across steps (plan 6.5).
+  const addresses = [...visible].sort((a, b) => a - b);
+  for (const address of addresses) {
+    const heapValue = heap[address];
+    if (!heapValue) {
+      continue;
+    }
+    const id = objectNodeId(address);
+    const rows = rowsOfHeapValue(heapValue);
+    const isCollapsed = collapsed.has(address);
+    const model: NodeModel = {
+      id,
+      kind: heapValue.type,
+      header: headerOf(heapValue),
+      rows,
+      address,
+      collapsed: isCollapsed,
+      summary: summaryOf(heapValue, rows.length),
+    };
+    models.set(id, model);
+    children.push(elkNodeFor(model));
+
+    if (isCollapsed) {
+      continue;
+    }
+    rows.forEach((row, rowIndex) => {
+      if (row.keyRef !== undefined && visible.has(row.keyRef)) {
+        addEdge(keyPortId(id, rowIndex), row.keyRef);
+      }
+      if (row.ref !== undefined && visible.has(row.ref)) {
+        addEdge(rowPortId(id, rowIndex), row.ref);
+      }
+    });
+  }
+
+  return {
+    graph: {
+      id: "root",
+      layoutOptions:
+        elem.stack.length > 1
+          ? { ...LAYOUT_OPTIONS, ...FRAME_ORDER_OPTIONS }
+          : LAYOUT_OPTIONS,
+      children,
+      edges,
+    },
+    nodes: models,
+  };
+}
+
+/** Addresses a heap object points at. Re-exported so callers need one import. */
+export { outgoingRefs };
diff --git a/src/programflow-visualization/reachability.ts b/src/programflow-visualization/reachability.ts
new file mode 100644
index 00000000..504a603f
--- /dev/null
+++ b/src/programflow-visualization/reachability.ts
@@ -0,0 +1,88 @@
+// Reachability filter for the visualization: decides which heap objects are visible
+// for a trace step, given the set of collapsed objects. See elk-task/elk-plan.md 6.3.
+//
+// Pure and free of DOM/ELK dependencies so it can be unit tested directly.
+import type { Address, BackendTraceElem, HeapValue, NamedValue, Value } from "./types";
+
+type RefValue = { type: 'ref'; value: Address };
+
+/**
+ * `heap`, `dict.keys`, `dict.value` and `instance.value` are declared as `Map`s in
+ * types.ts, but after the IPC/JSON round trip they are plain objects. Everything here
+ * goes through this helper instead of `Map` methods.
+ */
+export function asRecord<T>(mapLike: unknown): Record<string, T> {
+  return (mapLike ?? {}) as Record<string, T>;
+}
+
+function isRef<T extends Value>(value: T): value is T & RefValue {
+  return value.type === 'ref';
+}
+
+export function heapEntries(heap: BackendTraceElem['heap']): Array<[Address, HeapValue]> {
+  return Object.entries(asRecord<HeapValue>(heap)).map(
+    ([address, value]) => [Number(address), value]
+  );
+}
+
+/** Addresses referenced by a heap object: elements, dict keys and values, instance fields. */
+export function outgoingRefs(heapValue: HeapValue): Address[] {
+  switch (heapValue.type) {
+    case 'dict': {
+      const keys = Object.values(asRecord<Value>(heapValue.keys));
+      const values = Object.values(asRecord<Value>(heapValue.value));
+      return [...keys, ...values].filter(isRef).map((value) => value.value);
+    }
+    case 'instance': {
+      const fields = Object.values(asRecord<Value>(heapValue.value));
+      return fields.filter(isRef).map((value) => value.value);
+    }
+    default:
+      return heapValue.value.filter(isRef).map((value) => value.value);
+  }
+}
+
+/** Addresses referenced directly by a stack frame, i.e. the roots of the traversal. */
+export function rootRefs(elem: BackendTraceElem): Address[] {
+  return elem.stack.flatMap((frame) =>
+    (frame.locals as Array<NamedValue>).filter(isRef).map((local) => local.value)
+  );
+}
+
+/**
+ * Every heap address that should be rendered for this step.
+ *
+ * Traversal starts at the stack frames and does not follow edges *out of* a collapsed
+ * object - the collapsed object itself stays visible. An object therefore disappears
+ * only when it is exclusively downstream of a collapsed one; anything still reachable
+ * by another path stays.
+ */
+export function visibleAddresses(
+  elem: BackendTraceElem,
+  collapsed: ReadonlySet<Address> = new Set()
+): Set<Address> {
+  const heap = new Map(heapEntries(elem.heap));
+  const visible = new Set<Address>();
+  const pending = rootRefs(elem).filter((address) => heap.has(address));
+
+  while (pending.length > 0) {
+    const address = pending.pop()!;
+    if (visible.has(address)) {
+      continue;
+    }
+    visible.add(address);
+
+    // Collapsed: render the box, but nothing behind it.
+    if (collapsed.has(address)) {
+      continue;
+    }
+
+    for (const next of outgoingRefs(heap.get(address)!)) {
+      if (!visible.has(next) && heap.has(next)) {
+        pending.push(next);
+      }
+    }
+  }
+
+  return visible;
+}
diff --git a/src/programflow-visualization/types.ts b/src/programflow-visualization/types.ts
index 0a65ba49..acca6adf 100644
--- a/src/programflow-visualization/types.ts
+++ b/src/programflow-visualization/types.ts
@@ -5,17 +5,6 @@ export type Try = Success | Failure;
 export type Success = { result: any };
 export type Failure = { errorMessage: string };
 
-// State Types for the Frontend
-export type FrontendTrace = Array<FrontendTraceElem>;
-
-export type FrontendTraceElem = {
-  lineNumber: number, // 1-based
-  stackHTML: string,
-  heapHTML: string,
-  filename: string,
-  outputState: string,
-};
-
 // ############################################################################################
 // State Types for the Backend
 export type PartialBackendTrace = {
diff --git a/src/programflow-visualization/web/elk-view.ts b/src/programflow-visualization/web/elk-view.ts
new file mode 100644
index 00000000..b00e8200
--- /dev/null
+++ b/src/programflow-visualization/web/elk-view.ts
@@ -0,0 +1,123 @@
+// Ties the pipeline together: model -> measure -> ELK -> DOM.
+// See elk-task/elk-plan.md 6.
+import ELK from "elkjs/lib/elk.bundled.js";
+import type { ElkNode } from "elkjs/lib/elk-api";
+import type { Address, BackendTraceElem } from "../types";
+import { buildGraph, type NodeModel } from "../graph-model";
+import { ensureFontsReady, measureGraph } from "./measure";
+import { renderGraph, type RenderOptions } from "./graph-renderer";
+
+// No workerUrl: elkjs then uses its in-process fake worker. A real Web Worker
+// would be blocked anyway, the webview CSP has no worker-src (plan 2).
+let elk: InstanceType<typeof ELK> | null = null;
+
+function elkInstance(): InstanceType<typeof ELK> {
+  if (!elk) {
+    elk = new ELK();
+  }
+  return elk;
+}
+
+// Layout is async, and steps can be requested faster than they finish. Only the
+// most recent request is allowed to touch the DOM.
+let renderToken = 0;
+
+type CacheEntry = { laidOut: ElkNode; models: Map<string, NodeModel> };
+
+/**
+ * Stepping back and forth re-visits the same graphs constantly, and layout is the
+ * expensive part (plan 6.5). Bounded, or a long trace keeps every step ever visited.
+ */
+const MAX_CACHED_LAYOUTS = 40;
+const layoutCache = new Map<string, CacheEntry>();
+
+/**
+ * Text metrics are baked into every cached layout, so anything that changes them -- a
+ * theme switch, an editor font-size change -- invalidates all of it.
+ */
+export function clearLayoutCache(): void {
+  layoutCache.clear();
+}
+
+function cacheKey(step: string, collapsed: ReadonlySet<Address>): string {
+  return `${step}|${[...collapsed].sort((a, b) => a - b).join(",")}`;
+}
+
+function remember(key: string, entry: CacheEntry): void {
+  layoutCache.set(key, entry);
+  while (layoutCache.size > MAX_CACHED_LAYOUTS) {
+    const oldest = layoutCache.keys().next();
+    if (oldest.done) {
+      break;
+    }
+    layoutCache.delete(oldest.value);
+  }
+}
+
+/**
+ * The first layout pays ~330 ms of JIT warm-up (spike, plan 6.5). Doing it on a
+ * throwaway graph at start-up keeps that cost out of the first real step.
+ */
+export async function prewarm(): Promise<void> {
+  await ensureFontsReady();
+  try {
+    await elkInstance().layout({
+      id: "prewarm",
+      children: [
+        { id: "a", width: 10, height: 10 },
+        { id: "b", width: 10, height: 10 },
+      ],
+      edges: [{ id: "e", sources: ["a"], targets: ["b"] }],
+    });
+  } catch {
+    // Warm-up only; a failure here says nothing about real layouts.
+  }
+}
+
+export type StepRenderOptions = RenderOptions & {
+  /** Identifies the step; together with the collapsed set it keys the layout cache. */
+  step: string;
+  /** Bounds of the drawn graph, reported after every render so the caller can fit. */
+  onBounds?: (width: number, height: number) => void;
+};
+
+export async function renderStep(
+  container: HTMLElement,
+  elem: BackendTraceElem,
+  collapsed: ReadonlySet<Address>,
+  options: StepRenderOptions
+): Promise<void> {
+  const token = ++renderToken;
+  const key = cacheKey(options.step, collapsed);
+
+  const cached = layoutCache.get(key);
+  if (cached) {
+    // Re-insert so this becomes the most recently used entry.
+    layoutCache.delete(key);
+    layoutCache.set(key, cached);
+    paint(container, cached, options);
+    return;
+  }
+
+  const viz = buildGraph(elem, collapsed);
+  measureGraph(viz);
+  const laidOut = await elkInstance().layout(viz.graph);
+  if (token !== renderToken) {
+    return;
+  }
+  const entry: CacheEntry = { laidOut, models: viz.nodes };
+  remember(key, entry);
+  paint(container, entry, options);
+}
+
+function paint(
+  container: HTMLElement,
+  entry: CacheEntry,
+  options: StepRenderOptions
+): void {
+  renderGraph(container, entry.laidOut, entry.models, options);
+  options.onBounds?.(
+    parseFloat(container.style.width) || 0,
+    parseFloat(container.style.height) || 0
+  );
+}
diff --git a/src/programflow-visualization/web/graph-renderer.ts b/src/programflow-visualization/web/graph-renderer.ts
new file mode 100644
index 00000000..ae821740
--- /dev/null
+++ b/src/programflow-visualization/web/graph-renderer.ts
@@ -0,0 +1,248 @@
+// Draws a laid-out graph. See elk-task/elk-plan.md 6.3.
+//
+// Builds the node elements from the same `renderNode` measure.ts used, then places them at
+// the coordinates ELK computed. Edges go into one SVG overlay behind the nodes.
+import type { ElkExtendedEdge, ElkNode } from "elkjs/lib/elk-api";
+import type { NodeModel } from "../graph-model";
+import { headerElement, NODE_CLASS, renderNode } from "./node-view";
+
+const SVG_NS = "http://www.w3.org/2000/svg";
+const MARGIN = 24;
+/** Room above the nodes for the "Frames" / "Objects" captions. */
+const BAND_HEIGHT = 28;
+
+/**
+ * Last seen pointer position, in client coordinates. Collapsing a node re-lays out the
+ * graph under a stationary cursor, and a stationary cursor fires no mouseenter on the
+ * freshly built elements, so each render has to re-derive the hover itself.
+ */
+let pointer: { x: number; y: number } | undefined;
+let pointerTracked = false;
+
+function trackPointer(): void {
+  if (pointerTracked) {
+    return;
+  }
+  pointerTracked = true;
+  window.addEventListener(
+    "pointermove",
+    (event: PointerEvent) => {
+      pointer = { x: event.clientX, y: event.clientY };
+    },
+    { passive: true, capture: true }
+  );
+  // A pointer that has left the window is not over anything. pointerleave does not
+  // bubble, so this has to sit on the element it is targeted at, not on window.
+  document.documentElement.addEventListener("pointerleave", () => {
+    pointer = undefined;
+  });
+}
+
+export type RenderOptions = {
+  /** Called when a collapsible node header is activated. */
+  onToggle?: (address: number) => void;
+};
+
+function pointsOf(edge: ElkExtendedEdge): Array<{ x: number; y: number }> {
+  const section = edge.sections?.[0];
+  if (!section) {
+    return [];
+  }
+  return [section.startPoint, ...(section.bendPoints ?? []), section.endPoint];
+}
+
+function arrowMarker(): SVGMarkerElement {
+  const marker = document.createElementNS(SVG_NS, "marker");
+  marker.setAttribute("id", "elk-arrowhead");
+  marker.setAttribute("viewBox", "0 0 8 8");
+  marker.setAttribute("refX", "7");
+  marker.setAttribute("refY", "4");
+  marker.setAttribute("markerWidth", "7");
+  marker.setAttribute("markerHeight", "7");
+  marker.setAttribute("orient", "auto-start-reverse");
+  const path = document.createElementNS(SVG_NS, "path");
+  path.setAttribute("d", "M 0 0 L 8 4 L 0 8 z");
+  path.setAttribute("class", "elk-arrowhead");
+  marker.append(path);
+  return marker;
+}
+
+function band(
+  label: string,
+  modifier: string,
+  left: number,
+  width: number
+): HTMLElement {
+  const element = document.createElement("div");
+  element.className = `elk-band ${modifier}`;
+  element.textContent = label;
+  element.style.left = `${left}px`;
+  element.style.top = `${MARGIN}px`;
+  element.style.height = `${BAND_HEIGHT}px`;
+  element.style.width = `${Math.max(width, 0)}px`;
+  return element;
+}
+
+export function renderGraph(
+  container: HTMLElement,
+  laidOut: ElkNode,
+  models: Map<string, NodeModel>,
+  options: RenderOptions = {}
+): void {
+  trackPointer();
+  container.textContent = "";
+  container.classList.add("elk-canvas");
+  // Wiping the children destroys the hovered node without ever firing its mouseleave,
+  // so the dim-everything-else class would otherwise survive with nothing highlighted.
+  container.classList.remove("elk-dimming");
+
+  const children = laidOut.children ?? [];
+  const portToNode = new Map<string, string>();
+  for (const child of children) {
+    for (const port of child.ports ?? []) {
+      portToNode.set(port.id, child.id);
+    }
+  }
+
+  const width = Math.max(
+    ...children.map((child) => (child.x ?? 0) + (child.width ?? 0)),
+    0
+  );
+  const height = Math.max(
+    ...children.map((child) => (child.y ?? 0) + (child.height ?? 0)),
+    0
+  );
+  container.style.width = `${width + 2 * MARGIN}px`;
+  container.style.height = `${height + BAND_HEIGHT + 2 * MARGIN}px`;
+
+  const offsetY = MARGIN + BAND_HEIGHT;
+
+  // Edges first: the SVG sits behind the nodes.
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("class", "elk-edges");
+  svg.setAttribute("width", `${width + 2 * MARGIN}`);
+  svg.setAttribute("height", `${height + BAND_HEIGHT + 2 * MARGIN}`);
+  const defs = document.createElementNS(SVG_NS, "defs");
+  defs.append(arrowMarker());
+  svg.append(defs);
+
+  const edgesByNode = new Map<string, SVGPathElement[]>();
+  const track = (nodeId: string | undefined, path: SVGPathElement) => {
+    if (!nodeId) {
+      return;
+    }
+    const list = edgesByNode.get(nodeId);
+    if (list) {
+      list.push(path);
+    } else {
+      edgesByNode.set(nodeId, [path]);
+    }
+  };
+
+  for (const edge of (laidOut.edges ?? []) as ElkExtendedEdge[]) {
+    const points = pointsOf(edge);
+    if (points.length < 2) {
+      continue;
+    }
+    const path = document.createElementNS(SVG_NS, "path");
+    path.setAttribute(
+      "d",
+      points
+        .map((point, index) => `${index === 0 ? "M" : "L"} ${point.x + MARGIN} ${point.y + offsetY}`)
+        .join(" ")
+    );
+    path.setAttribute("class", "elk-edge");
+    path.setAttribute("marker-end", "url(#elk-arrowhead)");
+    svg.append(path);
+    track(portToNode.get(edge.sources[0]), path);
+    track(portToNode.get(edge.targets[0]), path);
+  }
+  container.append(svg);
+
+  // Hovering a node highlights everything it is connected to (plan 6.4). One shared
+  // "which node is active" state, so that a re-render can restore it without a gesture.
+  let active: HTMLElement | undefined;
+
+  const paintActive = (element: HTMLElement, on: boolean) => {
+    element.classList.toggle("elk-node-active", on);
+    for (const path of edgesByNode.get(element.dataset.nodeId ?? "") ?? []) {
+      path.classList.toggle("elk-edge-active", on);
+    }
+  };
+
+  const setActive = (element: HTMLElement | undefined) => {
+    if (active === element) {
+      return;
+    }
+    if (active) {
+      paintActive(active, false);
+    }
+    active = element;
+    if (active) {
+      paintActive(active, true);
+    }
+    container.classList.toggle("elk-dimming", active !== undefined);
+  };
+
+  // Nodes.
+  let framesRight = Number.NEGATIVE_INFINITY;
+  let objectsLeft = Number.POSITIVE_INFINITY;
+
+  for (const child of children) {
+    const model = models.get(child.id);
+    if (!model) {
+      continue;
+    }
+    const element = renderNode(model);
+    element.dataset.nodeId = child.id;
+    element.style.left = `${(child.x ?? 0) + MARGIN}px`;
+    element.style.top = `${(child.y ?? 0) + offsetY}px`;
+    element.style.width = `${child.width ?? 0}px`;
+
+    if (model.address === undefined) {
+      framesRight = Math.max(framesRight, (child.x ?? 0) + (child.width ?? 0));
+    } else {
+      objectsLeft = Math.min(objectsLeft, child.x ?? 0);
+      const header = headerElement(element);
+      const address = model.address;
+      const toggle = () => options.onToggle?.(address);
+      header?.addEventListener("click", toggle);
+      header?.addEventListener("keydown", (event) => {
+        const key = (event as KeyboardEvent).key;
+        if (key === "Enter" || key === " ") {
+          event.preventDefault();
+          toggle();
+        }
+      });
+    }
+
+    // Hovering a node highlights everything it is connected to (plan 6.4).
+    element.addEventListener("mouseenter", () => {
+      setActive(element);
+    });
+    element.addEventListener("mouseleave", () => {
+      setActive(undefined);
+    });
+
+    container.append(element);
+  }
+
+  // Column captions, derived from where the nodes actually ended up: there are no
+  // container nodes to hang them off (plan 4).
+  if (framesRight > Number.NEGATIVE_INFINITY) {
+    container.append(band("Frames", "elk-band-frames", MARGIN, framesRight));
+  }
+  if (objectsLeft < Number.POSITIVE_INFINITY) {
+    container.append(
+      band("Objects", "elk-band-objects", objectsLeft + MARGIN, width - objectsLeft)
+    );
+  }
+
+  // Whatever the cursor is sitting on now is hovered, even though it never moved.
+  // elementFromPoint flushes layout, so the positions set above are already in effect.
+  if (pointer) {
+    const hit = document.elementFromPoint(pointer.x, pointer.y);
+    const node = hit?.closest<HTMLElement>(`.${NODE_CLASS}`) ?? undefined;
+    setActive(node && container.contains(node) ? node : undefined);
+  }
+}
diff --git a/src/programflow-visualization/web/html-generator.ts b/src/programflow-visualization/web/html-generator.ts
deleted file mode 100644
index 3ee2a436..00000000
--- a/src/programflow-visualization/web/html-generator.ts
+++ /dev/null
@@ -1,223 +0,0 @@
-// Convert backend trace elements into HTML fragments for the visualization panes
-import type {
-  BackendTraceElem,
-  FrontendTraceElem,
-  HeapValue,
-  NamedValue,
-  StackElem,
-  Value
-} from "../types";
-
-function escapeHTML(s: any) {
-    if (s !== undefined && s !== null) {
-        return s.toString().replace(/[^0-9A-Za-z ]/g, (c: string) => "&#" + c.charCodeAt(0) + ";");
-    } else {
-        return s;
-    }
-}
-
-function toID(s: any) {
-    if (s !== undefined && s !== null) {
-        return Array.from(s.toString()).filter((c) => {
-            return c !== "\"" && c !== "\t" && c !== "\n" && c !== "\f" && c !== "\r" && c !== " ";
-        }).join("");
-    } else {
-        return s;
-    }
-}
-
-function keyToString(key: any) {
-    if (key.type !== undefined) {
-        return key.type === 'ref' ? '' : (key.value ? key.value : key);
-    } else {
-        return key.toString();
-    }
-}
-
-export class HTMLGenerator {
-    uniqueId: number = -1;
-
-    constructor() {
-    }
-
-    generateHTML(traceElement: BackendTraceElem): FrontendTraceElem {
-        this.uniqueId = -1;
-
-        const frameItems = `
-            <div class="column" id="frameItems">
-                ${traceElement.stack.map((stackElem, index) => this.frameItem(index, stackElem)).join('')}
-            </div>
-        `;
-
-        const keys = Array.from(Object.keys(traceElement.heap));
-        const values = Array.from(Object.values(traceElement.heap));
-        const objectItems = `
-            <div class="column" id="objectItems">
-                ${keys.map((name, index) => this.objectItem(name, values[index])).join('')}
-            <div>
-        `;
-        let output = traceElement.stdout;
-        if (traceElement.traceback !== undefined) {
-            output += `<span class="traceback-text">${traceElement.traceback}</span>`;
-        }
-        return {
-            lineNumber: traceElement.line,
-            stackHTML: frameItems,
-            heapHTML: objectItems,
-            filename: traceElement.filePath,
-            outputState: output
-        };
-    }
-
-    private objectItem(name: string, value: HeapValue): string {
-        let headline: string;
-        switch (value.type) {
-            case 'instance':
-                headline = value.name;
-                break;
-            default:
-                headline = value.type;
-        }
-
-        return `
-            <div class="column object-item" id="objectItem${name}">
-            <div>${escapeHTML(headline)}</div>
-            <div>${this.heapValue(name, value)}</div>
-            </div>
-        `;
-    }
-
-    private heapValue(name: string, heapValue: HeapValue): string {
-        let result = '';
-        let keyLen = 0;
-        switch (heapValue.type) {
-            case 'dict':
-                const metaKeys = Array.from(Object.keys(heapValue.keys));
-                // keys and value are not really Maps but rather objects
-                // -> Conversion required
-                const keyMap = new Map(Object.entries(heapValue.keys));
-                const valueMap = new Map(Object.entries(heapValue.value));
-                keyLen = 0;
-                metaKeys.forEach(metaKey => {
-                    let key = keyMap.get(metaKey)!;
-                    keyLen = Math.max(keyToString(key).length, keyLen);
-                });
-                result = `
-                    <div class="column" id="heapEndPointer${name}">
-                        ${metaKeys.map(metaKey => this.dictValue(keyLen, keyMap.get(metaKey)!, valueMap.get(metaKey)!)).join('')}
-                    </div>
-                `;
-                break;
-            case 'instance':
-                const instanceKeys = Array.from(Object.keys(heapValue.value));
-                const instanceValues = Array.from(Object.values(heapValue.value)); // maybe endpointer look for if its exist and if add a second number or key or smth
-                keyLen = 0;
-                instanceKeys.forEach(key => {
-                    keyLen = Math.max(keyToString(key).length, keyLen);
-                });
-                result = `
-                    <div class="column" id="heapEndPointer${name}">
-                        ${instanceKeys.map((key, index) => this.dictValue(keyLen, key, instanceValues[index])).join('')}
-                    </div>
-                `;
-                break;
-            case 'set':
-                result = `
-                    <div class="row" id="heapEndPointer${name}">
-                        ${heapValue.value.map((v, i) => this.setValue(v)).join('')}
-                    </div>
-                `;
-                break;
-            /* tuple, list, int[], int[][], ...*/
-            default:
-                result = `
-                    <div class="row" id="heapEndPointer${name}">
-                        ${heapValue.value.map((v, i) => this.listValue(v, i)).join('')}
-                    </div>
-                `;
-                break;
-        }
-        return result;
-    }
-
-    private dictValue(maxKeyLen: number, key: any, value: Value): string {
-        this.uniqueId++;
-        const keyWidth = Math.min(100, maxKeyLen * 10 + 10);
-        const valWidth = 200 - keyWidth;
-        return `
-            <div class="row">
-                <div class="box box-content-dict box-content-dict-key" ${key.type === 'ref' ? `id="${this.uniqueId}startPointer${key.value}"` : ''}
-                    style="width: ${keyWidth}px">
-                    ${escapeHTML(keyToString(key))}
-                </div>
-                <div class="box box-content-dict box-content-dict-value" ${value.type === 'ref' ? `id="${this.uniqueId}startPointer${value.value}"` : ''}
-                    style="width: ${valWidth}px">
-                    ${value.type === 'ref' ? '' : this.getCorrectValueOf(value)}
-                </div>
-            </div>
-        `;
-    }
-
-    private listValue(value: Value, index: number): string {
-        this.uniqueId++;
-        return `
-            <div class="box list column">
-                <div class="row box-content-top">
-                    ${index}
-                </div>
-                <div class="row box-content-bottom" ${value.type === 'ref' ? `id="${this.uniqueId}startPointer${value.value}"` : ''}>
-                    ${value.type === 'ref' ? '' : this.getCorrectValueOf(value)}
-                </div>
-            </div>
-        `;
-    }
-
-    private setValue(value: Value): string {
-        this.uniqueId++;
-        return `
-            <div class="box box-set column">
-                <div class="row box-content-bottom" ${value.type === 'ref' ? `id="${this.uniqueId}startPointer${value.value}"` : ''}>
-                    ${value.type === 'ref' ? '' : this.getCorrectValueOf(value)}
-                </div>
-            </div>
-        `;
-    }
-
-    private frameItem(index: number, stackElem: StackElem): string {
-        return `
-            <div class="column frame-item">
-                <div class="row subtitle">
-                    ${stackElem.frameName === '<module>' ? 'Global' : escapeHTML(stackElem.frameName)}
-                </div>
-                <div class="column ${index === 0 ? 'current-frame' : 'frame'}">
-                    ${stackElem.locals.map(namedValue => this.frameSubItem(stackElem.frameName, namedValue)).join('')}
-                </div>
-            </div>
-        `;
-    }
-
-    private frameSubItem(frameName: string, namedValue: NamedValue): string {
-        const isReturn = namedValue.name === 'return';
-        return `
-            <div class="row frame-item" id="subItem${toID(namedValue.name)}">
-                <div class="name-border${isReturn ? ' return-value' : ''}">
-                    ${escapeHTML(namedValue.name)}
-                </div>
-                <div class="value-border" ${namedValue.type === 'ref' ? `id="${toID(frameName)}${toID(namedValue.name)}Pointer${toID(namedValue.value)}"` : ''}>
-                    ${this.getCorrectValueOf(namedValue)}
-                </div>
-            </div>
-        `;
-    }
-
-    private getCorrectValueOf(value: Value): string {
-        switch (value.type) {
-            case 'ref':
-                return '';
-            case 'none':
-                return 'None';
-            default:
-                return escapeHTML(`${value.value}`);
-        }
-    }
-}
diff --git a/src/programflow-visualization/web/index.html b/src/programflow-visualization/web/index.html
index f0382ab6..30566815 100644
--- a/src/programflow-visualization/web/index.html
+++ b/src/programflow-visualization/web/index.html
@@ -18,20 +18,32 @@
 
 <body>
   <div class="column scrollable" id="viz">
-    <div class="row">
-      <div class="column floating-left">
-        <div class="row title">Frames</div>
-        <div class="divider"></div>
-      </div>
-      <div class="column floating-right">
-        <div class="row title">Objects</div>
-        <div class="divider"></div>
-      </div>
-    </div>
+    <!-- ELK-based visualization, see elk-task/elk-plan.md -->
+    <!-- #elk-viewport clips and receives the pan/zoom gestures, #elk-canvas is transformed -->
+    <div id="elk-viewport">
+      <div id="elk-canvas"></div>
 
-    <div class="row">
-      <div class="column floating-left floating-left-content" id="frames"></div>
-      <div class="column floating-right floating-right-content" id="objects"></div>
+      <!-- Floats over the canvas rather than scrolling with it. data-elk-ui tells
+           pan-zoom.ts that events in here are UI, not canvas gestures. -->
+      <div class="elk-controls" data-elk-ui>
+        <button id="expandAllButton" type="button" title="Expand every collapsed object" hidden>Expand all</button>
+        <button id="fitButton" type="button" title="Zoom to fit">Fit</button>
+        <button class="elk-icon-button" id="zoomOutButton" type="button" aria-label="Zoom out" title="Zoom out">
+          <svg viewBox="0 0 16 16" width="18" height="18" aria-hidden="true" focusable="false">
+            <circle cx="6.75" cy="6.75" r="4.25" fill="none" stroke="currentColor" stroke-width="1.5" />
+            <line x1="9.9" y1="9.9" x2="14" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+            <line x1="4.5" y1="6.75" x2="9" y2="6.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          </svg>
+        </button>
+        <button class="elk-icon-button" id="zoomInButton" type="button" aria-label="Zoom in" title="Zoom in">
+          <svg viewBox="0 0 16 16" width="18" height="18" aria-hidden="true" focusable="false">
+            <circle cx="6.75" cy="6.75" r="4.25" fill="none" stroke="currentColor" stroke-width="1.5" />
+            <line x1="9.9" y1="9.9" x2="14" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+            <line x1="4.5" y1="6.75" x2="9" y2="6.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+            <line x1="6.75" y1="4.5" x2="6.75" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          </svg>
+        </button>
+      </div>
     </div>
   </div>
 
diff --git a/src/programflow-visualization/web/measure.ts b/src/programflow-visualization/web/measure.ts
new file mode 100644
index 00000000..01a81426
--- /dev/null
+++ b/src/programflow-visualization/web/measure.ts
@@ -0,0 +1,133 @@
+// Offscreen measurement. See elk-task/elk-plan.md 6.2.
+//
+// ELK needs a width and a height for every node before it can lay anything out, and our
+// nodes are HTML, so the browser has to be asked. The elements built here are throwaway;
+// graph-renderer.ts builds its own from the same `renderNode`, which is what keeps the
+// measured size and the drawn size in agreement.
+import type { ElkNode } from "elkjs/lib/elk-api";
+import type { VizGraph } from "../graph-model";
+import { inputPortId, keyPortId, rowPortId } from "../graph-model";
+import { renderNode, headerElement, rowElements } from "./node-view";
+
+const HOST_ID = "elk-measure-host";
+
+/** Wide enough that nothing wraps for want of room; nodes size to their content. */
+const HOST_WIDTH_PX = 4000;
+
+function measureHost(): HTMLElement {
+  const existing = document.getElementById(HOST_ID);
+  if (existing) {
+    existing.textContent = "";
+    return existing;
+  }
+  const host = document.createElement("div");
+  host.id = HOST_ID;
+  // visibility: hidden, never display: none -- a display:none subtree has no
+  // layout boxes at all and every measurement comes back zero.
+  host.style.cssText = [
+    "position: absolute",
+    "visibility: hidden",
+    "pointer-events: none",
+    "left: -20000px",
+    "top: 0",
+    `width: ${HOST_WIDTH_PX}px`,
+  ].join("; ");
+  document.body.append(host);
+  return host;
+}
+
+/**
+ * Web fonts change text metrics, so anything measured before they load is wrong.
+ * Await this once before the first layout.
+ */
+export function ensureFontsReady(): Promise<void> {
+  const fonts = (document as Document & { fonts?: { ready: Promise<unknown> } }).fonts;
+  return fonts ? fonts.ready.then(() => undefined) : Promise.resolve();
+}
+
+/**
+ * Fills width/height on every node of `viz.graph` and positions its ports.
+ */
+export function measureGraph(viz: VizGraph): void {
+  const host = measureHost();
+  const elements = new Map<string, HTMLElement>();
+  const children: ElkNode[] = viz.graph.children ?? [];
+
+  // Write phase: build the whole subtree first, so the reads below trigger a
+  // single layout pass instead of one per node.
+  for (const child of children) {
+    const model = viz.nodes.get(child.id);
+    if (!model) {
+      continue;
+    }
+    const element = renderNode(model);
+    elements.set(child.id, element);
+    host.append(element);
+  }
+
+  // Read phase.
+  for (const child of children) {
+    const element = elements.get(child.id);
+    if (!element) {
+      continue;
+    }
+    const nodeBox = element.getBoundingClientRect();
+    const width = Math.ceil(nodeBox.width);
+    const height = Math.ceil(nodeBox.height);
+    child.width = width;
+    child.height = height;
+
+    const model = viz.nodes.get(child.id);
+    const rowBoxes = rowElements(element).map((row) => {
+      const box = row.getBoundingClientRect();
+      return { top: box.top - nodeBox.top, height: box.height };
+    });
+    const header = headerElement(element);
+    const headerBox = header?.getBoundingClientRect();
+    const headerCenter = headerBox
+      ? headerBox.top + headerBox.height / 2 - nodeBox.top
+      : height / 2;
+
+    /**
+     * A dict row whose key is a reference has two outgoing edges. Splitting the row
+     * into thirds keeps their start points apart; a row with one edge keeps the
+     * centre, which is where the eye expects it.
+     */
+    const portY = (rowIndex: number, isKey: boolean, split: boolean): number => {
+      const box = rowBoxes[rowIndex];
+      if (!box) {
+        return Math.round(height / 2);
+      }
+      if (!split) {
+        return Math.round(box.top + box.height / 2);
+      }
+      return Math.round(box.top + (isKey ? box.height / 3 : (2 * box.height) / 3));
+    };
+
+    for (const port of child.ports ?? []) {
+      if (port.id === inputPortId(child.id)) {
+        // West side, level with the header, so the arrowhead points at the title.
+        port.x = 0;
+        port.y = Math.round(headerCenter);
+        continue;
+      }
+      port.x = width;
+      const rows = model?.rows ?? [];
+      const keyIndex = rows.findIndex(
+        (_, index) => keyPortId(child.id, index) === port.id
+      );
+      const rowIndex =
+        keyIndex >= 0
+          ? keyIndex
+          : rows.findIndex((_, index) => rowPortId(child.id, index) === port.id);
+      if (rowIndex < 0) {
+        port.y = Math.round(height / 2);
+        continue;
+      }
+      const row = rows[rowIndex];
+      port.y = portY(rowIndex, keyIndex >= 0, row.keyRef !== undefined && row.ref !== undefined);
+    }
+  }
+
+  host.textContent = "";
+}
diff --git a/src/programflow-visualization/web/node-view.ts b/src/programflow-visualization/web/node-view.ts
new file mode 100644
index 00000000..bc02e806
--- /dev/null
+++ b/src/programflow-visualization/web/node-view.ts
@@ -0,0 +1,76 @@
+// The single source of node markup. See elk-task/elk-plan.md 6.
+//
+// measure.ts renders these offscreen to obtain sizes, graph-renderer.ts renders
+// them for real. Both must call renderNode, never build markup of their own, or
+// measured sizes stop matching what is drawn.
+import type { NodeModel, RowModel } from "../graph-model";
+
+export const NODE_CLASS = "elk-node";
+export const HEADER_CLASS = "elk-node-header";
+export const ROWS_CLASS = "elk-node-rows";
+export const ROW_CLASS = "elk-row";
+
+function div(className: string, text?: string): HTMLDivElement {
+  const element = document.createElement("div");
+  element.className = className;
+  if (text !== undefined) {
+    // textContent, not innerHTML: trace values are program data.
+    element.textContent = text;
+  }
+  return element;
+}
+
+function renderRow(row: RowModel): HTMLElement {
+  const element = div(ROW_CLASS);
+  const key = div("elk-row-key" + (row.isReturn ? " return-value" : ""), row.key);
+  const value = div("elk-row-value", row.value);
+  if (row.ref !== undefined) {
+    element.classList.add("elk-row-ref");
+  }
+  if (row.keyRef !== undefined) {
+    key.classList.add("elk-key-ref");
+  }
+  element.append(key, value);
+  return element;
+}
+
+export function renderNode(model: NodeModel): HTMLElement {
+  const node = div(`${NODE_CLASS} elk-${model.kind}`);
+  node.dataset.nodeId = model.id;
+
+  const header = div(HEADER_CLASS);
+  const collapsible = model.address !== undefined;
+  if (collapsible) {
+    // Discoverable and keyboard-operable (plan 6.3).
+    header.classList.add("elk-collapsible");
+    header.setAttribute("role", "button");
+    header.setAttribute("tabindex", "0");
+    header.setAttribute("aria-expanded", String(!model.collapsed));
+    header.append(div("elk-caret", model.collapsed ? "\u25B8" : "\u25BE"));
+  }
+  header.append(div("elk-node-title", model.header));
+  node.append(header);
+
+  const rows = div(ROWS_CLASS);
+  if (model.collapsed) {
+    node.classList.add("elk-collapsed");
+    rows.append(div(`${ROW_CLASS} elk-summary`, model.summary));
+  } else {
+    for (const row of model.rows) {
+      rows.append(renderRow(row));
+    }
+  }
+  node.append(rows);
+
+  return node;
+}
+
+/** Row elements of a rendered node, in model order. */
+export function rowElements(node: HTMLElement): HTMLElement[] {
+  const rows = node.querySelector(`.${ROWS_CLASS}`);
+  return rows ? (Array.from(rows.children) as HTMLElement[]) : [];
+}
+
+export function headerElement(node: HTMLElement): HTMLElement | null {
+  return node.querySelector(`.${HEADER_CLASS}`);
+}
diff --git a/src/programflow-visualization/web/pan-zoom.ts b/src/programflow-visualization/web/pan-zoom.ts
new file mode 100644
index 00000000..9b1a5ef5
--- /dev/null
+++ b/src/programflow-visualization/web/pan-zoom.ts
@@ -0,0 +1,206 @@
+// Pan and zoom for the visualization canvas. See elk-task/elk-plan.md 6.5.
+//
+// Everything ELK produced lives in one absolutely positioned canvas, so a single
+// `transform` on that element moves the node divs and the SVG edge overlay together --
+// no re-layout, no coordinate recomputation, and GPU-composited.
+
+/** Discrete steps: fractional scales make text look soft. */
+const ZOOM_STEPS = [0.25, 0.33, 0.5, 0.67, 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2, 2.5, 3];
+
+/** Pointer movement beyond this counts as a pan, and the trailing click is swallowed. */
+const DRAG_THRESHOLD_PX = 3;
+
+const FIT_PADDING_PX = 16;
+
+export type PanZoom = {
+  /** Scale the content to fit the viewport and centre it, and re-enable auto-fitting. */
+  fit(width: number, height: number): void;
+  /**
+   * Same, but does nothing once the user has panned or zoomed. Until then every render
+   * re-frames the graph, which matters because a trace grows from one node to dozens.
+   */
+  autoFit(width: number, height: number): void;
+  /** One step up the zoom ladder, anchored on the middle of the viewport. */
+  zoomIn(): void;
+  /** One step down the zoom ladder, anchored on the middle of the viewport. */
+  zoomOut(): void;
+};
+
+/** Events on the floating toolbar are UI, not canvas gestures. */
+function isUi(target: EventTarget | null): boolean {
+  return target instanceof Element && target.closest("[data-elk-ui]") !== null;
+}
+
+function nearestStep(scale: number): number {
+  return ZOOM_STEPS.reduce((best, step) =>
+    Math.abs(step - scale) < Math.abs(best - scale) ? step : best
+  );
+}
+
+function stepFrom(scale: number, direction: 1 | -1): number {
+  const index = ZOOM_STEPS.indexOf(nearestStep(scale));
+  return ZOOM_STEPS[Math.min(ZOOM_STEPS.length - 1, Math.max(0, index + direction))];
+}
+
+export function attachPanZoom(viewport: HTMLElement, canvas: HTMLElement): PanZoom {
+  let scale = 1;
+  let translateX = 0;
+  let translateY = 0;
+  /** Set once the user takes the view over, which switches auto-fitting off. */
+  let touched = false;
+  /** Size of the last graph drawn, so a resize can re-fit without being told again. */
+  let lastWidth = 0;
+  let lastHeight = 0;
+
+  const apply = () => {
+    canvas.style.transformOrigin = "0 0";
+    canvas.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
+  };
+
+  /**
+   * One step along the ladder, keeping the graph point at (anchorX, anchorY) -- both
+   * relative to the viewport -- exactly where it is.
+   */
+  const zoomStep = (direction: 1 | -1, anchorX: number, anchorY: number) => {
+    const next = stepFrom(scale, direction);
+    if (next === scale) {
+      return;
+    }
+    touched = true;
+    translateX = anchorX - ((anchorX - translateX) / scale) * next;
+    translateY = anchorY - ((anchorY - translateY) / scale) * next;
+    scale = next;
+    apply();
+  };
+
+  const zoomFromCentre = (direction: 1 | -1) => {
+    const box = viewport.getBoundingClientRect();
+    zoomStep(direction, box.width / 2, box.height / 2);
+  };
+
+  viewport.addEventListener(
+    "wheel",
+    (event: WheelEvent) => {
+      if (isUi(event.target)) {
+        return;
+      }
+      event.preventDefault();
+      const box = viewport.getBoundingClientRect();
+      zoomStep(
+        event.deltaY < 0 ? 1 : -1,
+        event.clientX - box.left,
+        event.clientY - box.top
+      );
+    },
+    { passive: false }
+  );
+
+  let pointerId: number | null = null;
+  let startX = 0;
+  let startY = 0;
+  let dragged = false;
+
+  const onMove = (event: PointerEvent) => {
+    if (pointerId !== event.pointerId) {
+      return;
+    }
+    const nextX = event.clientX - startX;
+    const nextY = event.clientY - startY;
+    if (
+      !dragged &&
+      Math.abs(nextX - translateX) < DRAG_THRESHOLD_PX &&
+      Math.abs(nextY - translateY) < DRAG_THRESHOLD_PX
+    ) {
+      return;
+    }
+    dragged = true;
+    touched = true;
+    viewport.classList.add("elk-panning");
+    translateX = nextX;
+    translateY = nextY;
+    apply();
+  };
+
+  const onUp = (event: PointerEvent) => {
+    if (pointerId !== event.pointerId) {
+      return;
+    }
+    pointerId = null;
+    viewport.classList.remove("elk-panning");
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", onUp);
+    window.removeEventListener("pointercancel", onUp);
+  };
+
+  viewport.addEventListener("pointerdown", (event: PointerEvent) => {
+    if (event.button !== 0 || isUi(event.target)) {
+      return;
+    }
+    pointerId = event.pointerId;
+    startX = event.clientX - translateX;
+    startY = event.clientY - translateY;
+    dragged = false;
+    // Listening on window, not the viewport, keeps a drag alive when the cursor
+    // leaves the canvas -- same effect as pointer capture, without the capture API.
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+  });
+
+  // A pan that ends on a node header must not also toggle it.
+  viewport.addEventListener(
+    "click",
+    (event: MouseEvent) => {
+      if (dragged) {
+        event.stopPropagation();
+        event.preventDefault();
+        dragged = false;
+      }
+    },
+    true
+  );
+
+  const fit = (width: number, height: number) => {
+    const box = viewport.getBoundingClientRect();
+    if (width <= 0 || height <= 0 || box.width <= 0 || box.height <= 0) {
+      return;
+    }
+    lastWidth = width;
+    lastHeight = height;
+    const raw = Math.min(
+      (box.width - FIT_PADDING_PX) / width,
+      (box.height - FIT_PADDING_PX) / height
+    );
+    // Never zoom *in* to fit: a two-node graph blown up to full width is unreadable.
+    scale = raw >= 1 ? 1 : nearestStep(raw);
+    translateX = Math.max(0, (box.width - width * scale) / 2);
+    translateY = Math.max(0, (box.height - height * scale) / 2);
+    apply();
+  };
+
+  // Resizing the panel changes what "fits", so re-frame while auto-fitting is still on.
+  new ResizeObserver(() => {
+    if (!touched) {
+      fit(lastWidth, lastHeight);
+    }
+  }).observe(viewport);
+
+  return {
+    fit(width, height) {
+      // An explicit Fit is also a request to go back to being framed automatically.
+      touched = false;
+      fit(width, height);
+    },
+    autoFit(width, height) {
+      if (!touched) {
+        fit(width, height);
+      }
+    },
+    zoomIn() {
+      zoomFromCentre(1);
+    },
+    zoomOut() {
+      zoomFromCentre(-1);
+    },
+  };
+}
diff --git a/src/programflow-visualization/web/tsconfig.json b/src/programflow-visualization/web/tsconfig.json
index 36c3b4c1..ad34f560 100644
--- a/src/programflow-visualization/web/tsconfig.json
+++ b/src/programflow-visualization/web/tsconfig.json
@@ -2,8 +2,11 @@
 {
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
-    "lib": ["es2017", "dom"],
-    "types": []
+    // es2019 for Array.prototype.flatMap, used by ../reachability.ts.
+    "lib": ["es2019", "dom"],
+    "types": [],
+    // elkjs ships a .d.ts that does not survive strict checking.
+    "skipLibCheck": true
   },
   "include": ["**/*.ts"],
   "exclude": ["../../../node_modules", "../../../.vscode-test"]
diff --git a/src/programflow-visualization/web/webview.css b/src/programflow-visualization/web/webview.css
index d2b57d1a..2136af38 100644
--- a/src/programflow-visualization/web/webview.css
+++ b/src/programflow-visualization/web/webview.css
@@ -1,6 +1,9 @@
 body {
   height: 100vh;
   width: 100vw;
+  /* The UA default of 8px would push 100vw past the window edge, which now matters
+     because the view controls are pinned to the right. VS Code zeroes it anyway. */
+  margin: 0;
   overflow: auto;
   display: flex;
   flex-direction: column;
@@ -10,15 +13,14 @@ body {
   box-sizing: border-box;
 }
 
-.floating-right {
-  float: right;
-  width: 65%;
+/* .row/.column set display, which would otherwise beat the UA [hidden] rule. */
+[hidden] {
+  display: none !important;
 }
 
-.floating-right-content {
+.floating-right {
+  float: right;
   width: 65%;
-  padding: 10px;
-  max-height: 90%;
 }
 
 .floating-left {
@@ -26,13 +28,6 @@ body {
   width: 35%;
 }
 
-.floating-left-content {
-  width: 35%;
-  padding: 10px;
-  max-height: 90%;
-  margin-right: 100px;
-}
-
 .scrollable {
   overflow: auto;
 }
@@ -48,6 +43,15 @@ body {
   padding-bottom: 10px;
 }
 
+/* The two columns are 35%/65% of a flex row, so a narrow panel squeezes the step
+   controls until they overflow their column and land under the stdout pane, which
+   would otherwise swallow the clicks. Lift them into a higher stacking level so they
+   stay pressable even while overlapping. */
+#bottom-area .floating-left {
+  position: relative;
+  z-index: 1;
+}
+
 #stdout-log {
   height: 100%;
   border: 1.5px;
@@ -55,18 +59,6 @@ body {
   border-color: grey;
 }
 
-.next-line-color {
-  border: 6px solid rgba(255, 255, 0, 1);
-  border-radius: 8px;
-  background-color: rgba(255, 255, 0, 1);
-}
-
-.divider {
-  margin: 2px 2px 10px 0;
-  border-top: 2px solid #bbb;
-  border-radius: 5px;
-}
-
 .margin-vertical {
   margin-top: 3px;
   margin-bottom: 3px;
@@ -77,122 +69,326 @@ body {
   margin-right: 3px;
 }
 
-/* Clear floats after the columns */
-.row:after {
-  content: "";
-  display: table;
-  clear: both;
+.row {
+  display: flex;
+  flex-direction: row;
 }
 
-.name-border {
-  width: 50%;
-  font-size: 16px;
-  margin-right: 5px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
+.column {
+  display: flex;
+  flex-direction: column;
 }
 
-.value-border {
-  width: 50%;
-  padding-left: 3px;
-  padding-right: 3px;
-  font-size: 16px;
-  border-bottom: 1.5px solid grey;
-  border-left: 1.5px solid grey;
-  text-overflow: ellipsis;
+.traceback-text {
+  color: red;
+}
+
+#bottom-area button {
+  line-height: 18px;
+}
+
+/* ------------------------------------------------------------------ */
+/* ELK-based visualization. See elk-task/elk-plan.md 6.4.              */
+/* ------------------------------------------------------------------ */
+
+/* Every colour below this line is named here and nowhere else. Inside VS Code the
+   --vscode-* variables win; the literals are only ever used by the browser dev mode
+   (index.web.html), which has no theme to inherit from.
+
+   --vscode-charts-* is the one palette VS Code exposes for "several things that must
+   look different from each other", which is exactly what the node kinds need. */
+:root {
+  --wypp-node-bg: var(--vscode-editorWidget-background, #252526);
+  --wypp-node-fg: var(--vscode-editorWidget-foreground, #ccc);
+  --wypp-node-border: var(--vscode-panel-border, #3c3c3c);
+  --wypp-header-bg: var(--vscode-editorWidget-border, rgba(128, 128, 128, 0.25));
+  --wypp-row-alt-bg: rgba(128, 128, 128, 0.07);
+  --wypp-focus: var(--vscode-focusBorder, #4d64ff);
+  --wypp-edge: var(--vscode-charts-lines, #808080);
+  --wypp-muted: var(--vscode-descriptionForeground, #9d9d9d);
+
+  /* Node kinds. */
+  --wypp-accent-frame: var(--vscode-descriptionForeground, #9d9d9d);
+  --wypp-accent-current-frame: var(--vscode-focusBorder, #4d64ff);
+  --wypp-accent-instance: var(--vscode-charts-blue, #4e95d9);
+  --wypp-accent-list: var(--vscode-charts-green, #89d185);
+  --wypp-accent-tuple: var(--vscode-charts-purple, #b180d7);
+  --wypp-accent-dict: var(--vscode-charts-orange, #d18616);
+  --wypp-accent-set: var(--vscode-charts-yellow, #cca700);
+
+  /* The blue wash over the Frames column. Deliberately a literal rgba rather than a
+     --vscode-* token: it is layered *over* the theme's own node background, so it has
+     to be translucent, and no theme token carries an alpha channel. Keeping the alpha
+     low leaves the theme's own foreground colour readable in light and dark alike. */
+  --wypp-frame-bg: rgba(77, 140, 217, 0.14);
+  --wypp-frame-header-bg: rgba(77, 140, 217, 0.28);
+
+  /* High-contrast themes define --vscode-contrastBorder and expect it to be honoured;
+     everywhere else it is empty and the fallback applies. */
+  --wypp-outline: var(--vscode-contrastBorder, var(--wypp-node-border));
+}
+
+/* The viewport clips and owns the gestures; only #elk-canvas is transformed, so the
+   step controls and the stdout pane never scale. */
+#elk-viewport {
+  flex-grow: 1;
+  /* Without this the flex default min-height:auto lets the canvas stretch #viz. */
+  min-height: 0;
+  position: relative;
   overflow: hidden;
-  white-space: nowrap;
+  cursor: grab;
+  /* Stop the browser from claiming wheel/drag before the handlers see them. */
+  touch-action: none;
+  overscroll-behavior: contain;
 }
 
-.dataRow {
-  justify-content: space-evenly;
+#elk-viewport.elk-panning {
+  cursor: grabbing;
 }
 
-.title {
-  font-weight: 700;
+/* Floating view controls, pinned to the top right of the viewport. A sibling of
+   #elk-canvas rather than a child, so the canvas transform never scales them. */
+.elk-controls {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+  border: 1px solid var(--wypp-outline);
+  border-radius: 4px;
+  background-color: var(--wypp-node-bg);
+  /* The viewport shows a grab cursor; the toolbar is not draggable. */
+  cursor: default;
 }
 
-.subtitle {
-  font-weight: 500;
+.elk-controls button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  padding: 0 8px;
+  line-height: 1;
+  white-space: nowrap;
 }
 
-.frame-item {
-  margin: 3px 0 3px 0;
-  justify-content: flex-end;
+/* Square and unpadded, so the icon gets the whole content box. Scoped to .elk-controls
+   because the rule above is more specific than a bare .elk-icon-button would be. */
+.elk-controls .elk-icon-button {
+  width: 24px;
+  padding: 0;
 }
 
-.frame {
-  border-left: 4px solid grey;
-  padding-left: 5px;
-  background-color: rgba(128, 128, 128, 0.2);
+/* The icons are inline SVG stroked in currentColor, so they follow the button text.
+   flex: none stops the flex container from shrinking them below their intrinsic size. */
+.elk-controls .elk-icon-button svg {
+  display: block;
+  flex: none;
 }
 
-.current-frame {
-  border-left: 4px solid blue;
-  padding-left: 5px;
-  background-color: rgba(77, 100, 255, 0.2);
+.elk-canvas {
+  position: relative;
 }
 
-.row {
+.elk-edges {
+  position: absolute;
+  left: 0;
+  top: 0;
+  /* The SVG spans the canvas and sits behind the nodes. */
+  pointer-events: none;
+}
+
+.elk-band {
+  position: absolute;
   display: flex;
-  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  font-size: 11px;
+  color: var(--wypp-muted);
+  border-bottom: 1px solid var(--wypp-node-border);
+}
+
+/* Matches the tint on the frame nodes below, so the whole left column reads as one. */
+.elk-band-frames {
+  background-color: var(--wypp-frame-bg);
+}
+
+.elk-node {
+  position: absolute;
+  /* Shrink to content, but never so wide that one long value dominates. */
+  width: max-content;
+  min-width: 120px;
+  max-width: 280px;
+  border: 1px solid var(--wypp-outline);
+  /* Overwritten per kind below; declared here so every node reserves the same width. */
+  border-left: 4px solid var(--wypp-muted);
+  border-radius: 4px;
+  background-color: var(--wypp-node-bg);
+  color: var(--wypp-node-fg);
+  font-size: 13px;
+  overflow: hidden;
 }
 
-.column {
+.elk-node-header {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 6px;
+  font-weight: 600;
+  background-color: var(--wypp-header-bg);
 }
 
-.box {
-  color: white;
-  border: 1px solid rgb(209, 209, 209);
-  background-color: rgba(56, 56, 56, 0.8);
+.elk-collapsible {
+  cursor: pointer;
 }
 
-.box-content-top {
-  margin: 2px 2px 2px 5px;
-  color: rgb(184, 184, 184);
+.elk-collapsible:focus-visible {
+  outline: 1px solid var(--wypp-focus);
+  outline-offset: -1px;
 }
 
-.box-content-bottom {
-  margin: 2px 5px 2px 5px;
+.elk-caret {
+  flex: 0 0 auto;
+  color: var(--wypp-muted);
 }
 
-.box-content-dict {
-  padding: 2px 5px 2px 5px;
-  /* max-width: 100px;
-     min-width: 100px; */
+.elk-node-title {
+  overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Table layout keeps the key column aligned across rows while each row keeps a
+   box of its own -- measure.ts needs that box to place the row's port. */
+.elk-node-rows {
+  display: table;
+  width: 100%;
+}
+
+.elk-row {
+  display: table-row;
+}
+
+/* Zebra striping earns its keep here: rows are one line tall and a wide node makes
+   it easy to read a key against the wrong value. */
+.elk-row:nth-child(even) {
+  background-color: var(--wypp-row-alt-bg);
+}
+
+.elk-row-key,
+.elk-row-value {
+  display: table-cell;
+  padding: 2px 6px;
+  vertical-align: middle;
   overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.box-content-dict-key {
+.elk-row-key {
   text-align: right;
+  color: var(--wypp-muted);
+  max-width: 110px;
 }
 
-.box-set {
-  flex-wrap: wrap;
-  width: 150px;
+/* A dict key that is itself a reference; the arrow leaving this cell says which. */
+.elk-key-ref {
+  font-style: italic;
 }
 
-.object-intendation {
-  margin-left: 65px;
+/* `return` rows get the current-frame accent: the legacy blue was invisible in dark
+   themes, and a return value is the one row worth finding at a glance. */
+.elk-row-key.return-value {
+  color: var(--wypp-accent-current-frame);
+  font-weight: 600;
 }
 
-.object-item {
-  margin-bottom: 15px;
+.elk-row-value {
+  max-width: 180px;
+  border-left: 1px solid var(--wypp-node-border);
 }
 
-.return-value {
-  color: blue;
+.elk-summary {
+  display: table-cell;
+  padding: 2px 6px;
+  font-style: italic;
+  color: var(--wypp-muted);
 }
 
-.traceback-text {
-  color: red;
+/* Frames are washed blue so the two columns tell themselves apart even at zoom levels
+   where the header text is no longer legible. The wash goes in background-image, which
+   layers over the background-color .elk-node already set, so the node keeps an opaque
+   base and stays legible whatever the theme. */
+.elk-frame,
+.elk-current-frame {
+  background-image: linear-gradient(var(--wypp-frame-bg), var(--wypp-frame-bg));
 }
 
-#bottom-area button {
-  line-height: 18px;
+.elk-frame .elk-node-header,
+.elk-current-frame .elk-node-header {
+  background-color: var(--wypp-frame-header-bg);
+}
+
+.elk-frame {
+  border-left-color: var(--wypp-accent-frame);
+}
+
+.elk-current-frame {
+  border-left-color: var(--wypp-accent-current-frame);
+}
+
+/* One accent per heap type, so kind is readable at a glance and at small zoom
+   levels where the header text is no longer legible. */
+.elk-instance {
+  border-left-color: var(--wypp-accent-instance);
+}
+
+.elk-list {
+  border-left-color: var(--wypp-accent-list);
+}
+
+.elk-tuple {
+  border-left-color: var(--wypp-accent-tuple);
+}
+
+.elk-dict {
+  border-left-color: var(--wypp-accent-dict);
+}
+
+.elk-set {
+  border-left-color: var(--wypp-accent-set);
+}
+
+.elk-edge {
+  fill: none;
+  stroke: var(--wypp-edge);
+  stroke-width: 1.5;
+}
+
+.elk-arrowhead {
+  fill: var(--wypp-edge);
+}
+
+.elk-edge-active {
+  stroke: var(--wypp-focus);
+  stroke-width: 2.5;
+}
+
+/* Hovering a node fades everything it is not connected to. */
+.elk-canvas.elk-dimming .elk-node:not(.elk-node-active) {
+  opacity: 0.45;
+}
+
+.elk-canvas.elk-dimming .elk-edge:not(.elk-edge-active) {
+  opacity: 0.2;
+}
+
+.elk-node-active {
+  outline: 1px solid var(--wypp-focus);
+  outline-offset: -1px;
 }
diff --git a/src/programflow-visualization/web/webview.ts b/src/programflow-visualization/web/webview.ts
index 5b6bf949..09ea55ab 100644
--- a/src/programflow-visualization/web/webview.ts
+++ b/src/programflow-visualization/web/webview.ts
@@ -1,7 +1,7 @@
 // Render and control the program-flow visualization UI inside the webview
-import { HTMLGenerator } from "./html-generator";
-import LinkerLine from "linkerline";
-import type { BackendTraceElem, FrontendTraceElem } from "../types";
+import type { Address, BackendTraceElem } from "../types";
+import { clearLayoutCache, prewarm, renderStep } from "./elk-view";
+import { attachPanZoom, type PanZoom } from "./pan-zoom";
 
 type ResetMsg = {
   command: "reset";
@@ -18,14 +18,18 @@ type AppendMsg = {
 // Optional example trace format (designer mode)
 type StaticTrace = { complete: boolean; trace: BackendTraceElem[] };
 
-let refLines: any[] = [];
 let trace: BackendTraceElem[] = [];
 let traceComplete = false;
 let traceIndex = 0;
 
-type NavType = "first" | "prev" | "next" | "last";
+/** Heap objects the user has folded away. Kept across steps on purpose. */
+const collapsed = new Set<Address>();
+
+let panZoom: PanZoom | undefined;
+/** Bounds of the last render, so the Fit button has something to fit to. */
+let lastBounds = { width: 0, height: 0 };
 
-const gen = new HTMLGenerator();
+type NavType = "first" | "prev" | "next" | "last";
 
 //DOM helpers
 function $(sel: string): HTMLElement {
@@ -43,7 +47,7 @@ function clamp(n: number, min: number, max: number) {
 }
 
 //Rendering
-function renderCurrent() {
+function updateControls() {
   const max = Math.max(0, trace.length - 1);
   traceIndex = clamp(traceIndex, 0, max);
 
@@ -60,20 +64,55 @@ function renderCurrent() {
   setDisabled("#prevButton", traceIndex <= 0);
   setDisabled("#nextButton", traceIndex >= max);
   setDisabled("#lastButton", traceIndex >= max);
+}
+
+function renderCurrent() {
+  updateControls();
 
   // Nothing to show yet
   if (trace.length === 0) {
-    $("#stdout-log").innerHTML = "";
-    clearArrows();
+    $("#stdout-log").textContent = "";
+    $("#elk-canvas").textContent = "";
     return;
   }
 
   const backendElem = trace[traceIndex];
-  const frontendElem = gen.generateHTML(backendElem);
+  updateStdout(backendElem);
+  void renderElk(backendElem);
+}
 
-  updateVisualization(frontendElem);
-  updateIndent(frontendElem);
-  updateRefArrows(frontendElem);
+function updateStdout(elem: BackendTraceElem) {
+  const stdoutLog = $("#stdout-log");
+  stdoutLog.textContent = elem.stdout;
+  if (elem.traceback !== undefined) {
+    const traceback = document.createElement("span");
+    traceback.className = "traceback-text";
+    traceback.textContent = elem.traceback;
+    stdoutLog.append(traceback);
+  }
+  stdoutLog.scrollTo(0, stdoutLog.scrollHeight);
+}
+
+function renderElk(elem: BackendTraceElem): Promise<void> {
+  // A collapsed object can end up off-screen, so offer a way back without hunting for it.
+  $("#expandAllButton").hidden = collapsed.size === 0;
+  return renderStep($("#elk-canvas"), elem, collapsed, {
+    step: String(traceIndex),
+    onToggle: (address) => {
+      if (collapsed.has(address)) {
+        collapsed.delete(address);
+      } else {
+        collapsed.add(address);
+      }
+      void renderElk(trace[traceIndex]);
+    },
+    onBounds: (width, height) => {
+      lastBounds = { width, height };
+      panZoom?.autoFit(width, height);
+    },
+  }).catch((err) => {
+    console.error("ELK layout failed:", err);
+  });
 }
 
 function postCurrentHighlight() {
@@ -119,119 +158,17 @@ function slideTo(rawValue: string) {
   postCurrentHighlight();
 }
 
-function updateVisualization(traceElem: FrontendTraceElem) {
-  clearArrows();
-
-  const frames = document.getElementById("frames");
-  const objects = document.getElementById("objects");
-  const stdoutLog = document.getElementById("stdout-log");
-
-  if (!frames || !objects || !stdoutLog) {
-    throw new Error("Missing required visualization containers");
-  }
-
-  frames.innerHTML = traceElem.stackHTML;
-  objects.innerHTML = traceElem.heapHTML;
-  stdoutLog.innerHTML = traceElem.outputState;
-  stdoutLog.scrollTo(0, stdoutLog.scrollHeight);
-}
-
-function updateIndent(traceElem: FrontendTraceElem) {
-  const heapTags = traceElem.heapHTML.match(/(?<=startPointer)[0-9]+/g);
-  if (heapTags) {
-    heapTags.forEach((tag: string) => {
-      const element = document.getElementById("objectItem" + tag);
-      if (element) {element.classList.add("object-intendation");}
-    });
-  }
-}
-
-//Arrows
-function clearArrows() {
-  refLines.forEach((l) => {
-    try {
-      l.remove();
-    } catch {}
-  });
-  refLines = [];
-}
-
-function updateRefArrows(traceElem: FrontendTraceElem) {
-  const tags = getCurrentTags(traceElem);
-  if (!tags) { return; }
-
-  requestAnimationFrame(() => {
-    const parent = document.getElementById("viz");
-    if (!parent) { return; }
-
-    const usable = tags.filter((t: any) => {
-      const a = t.elem1 as HTMLElement | null | undefined;
-      const b = t.elem2 as HTMLElement | null | undefined;
-      return !!a && !!b && a.isConnected && b.isConnected;
-    });
-
-    const lines: any[] = [];
-    for (const t of usable) {
-      try {
-        lines.push(
-          new (LinkerLine as any)({
-            parent,
-            start: t.elem1,
-            end: t.elem2,
-            size: 2,
-            path: "magnet",
-            startSocket: "right",
-            endSocket: "left",
-            startPlug: "square",
-            startSocketGravity: [50, -10],
-            endSocketGravity: [-5, -5],
-            endPlug: "arrow1",
-            color: getColor(t),
-          })
-        );
-      } catch (err) {
-        // Keep going if one arrow fails (prevents breaking the whole render)
-        console.warn("LinkerLine failed for one tag:", t, err);
-      }
-    }
-
-    refLines = lines;
-  });
-}
-
-function getCurrentTags(traceElem: FrontendTraceElem) {
-  const stackTags = traceElem.stackHTML.match(/(?<=id=")(.+)Pointer[0-9]+/g);
-  const heapTags = traceElem.heapHTML.match(/(?<=startPointer)[0-9]+/g);
-  const uniqueId = traceElem.heapHTML.match(/\d+(?=startPointer)/g);
-
-  if (!stackTags) {return;}
-
-  const stackRefs = stackTags.map((tag: string) => {
-    const id = tag.match(/(?<=.*Pointer)[\d]+/g);
-    return {
-      tag: id,
-      elem1: document.getElementById(tag),
-      elem2: document.getElementById("heapEndPointer" + id),
-    };
-  });
-
-  let heapRefs: any[] = [];
-  if (heapTags && uniqueId) {
-    heapRefs = heapTags.map((reference: string, index: number) => {
-      return {
-        tag: reference,
-        elem1: document.getElementById(uniqueId[index] + "startPointer" + reference),
-        elem2: document.getElementById("heapEndPointer" + reference),
-      };
-    });
+/**
+ * While the slider is being dragged only the cheap parts follow along. Layout is far too
+ * expensive to run per `input` event (plan 6.5), so it waits for `change`.
+ */
+function scrubTo(rawValue: string) {
+  traceIndex = Number(rawValue) || 0;
+  updateControls();
+  if (trace.length > 0) {
+    updateStdout(trace[traceIndex]);
   }
-
-  return [...heapRefs, ...stackRefs];
-}
-
-function getColor(tag: any) {
-  const hue = ((0.618033988749895 + Number(tag.tag) / 10) % 1) * 100;
-  return `hsl(${hue}, 60%, 45%)`;
+  postCurrentHighlight();
 }
 
 //Incoming events (from vscode-host-adapter.ts)
@@ -239,6 +176,8 @@ window.addEventListener("programflow:reset", (e: Event) => {
   const msg = (e as CustomEvent<ResetMsg>).detail;
   trace = msg.trace ?? [];
   traceComplete = !!msg.complete;
+  // A reset means a different trace, so every cached layout is keyed on stale indices.
+  clearLayoutCache();
   renderCurrent();
   postCurrentHighlight();
 });
@@ -252,6 +191,11 @@ window.addEventListener("programflow:append", (e: Event) => {
 
 
 function setupUi() {
+  panZoom = attachPanZoom($("#elk-viewport"), $("#elk-canvas"));
+  watchThemeChanges();
+  // Warm elkjs up while the user is still reading the first step.
+  void prewarm().then(renderCurrent);
+
   // Disable until first reset arrives
   setDisabled("#nextButton", true);
   setDisabled("#lastButton", true);
@@ -271,11 +215,27 @@ function setupUi() {
   $("#lastButton").addEventListener("click", () => {
     navigate("last");
   });
+  $("#expandAllButton").addEventListener("click", () => {
+    collapsed.clear();
+    renderCurrent();
+  });
+  $("#fitButton").addEventListener("click", () => {
+    panZoom?.fit(lastBounds.width, lastBounds.height);
+  });
+  $("#zoomInButton").addEventListener("click", () => {
+    panZoom?.zoomIn();
+  });
+  $("#zoomOutButton").addEventListener("click", () => {
+    panZoom?.zoomOut();
+  });
 
   // Slider input -> local navigation
-  ($("#traceSlider") as HTMLInputElement).addEventListener("input", (e: Event) => {
-    const value = (e.target as HTMLInputElement).value;
-    slideTo(value);
+  const slider = $("#traceSlider") as HTMLInputElement;
+  slider.addEventListener("input", (e: Event) => {
+    scrubTo((e.target as HTMLInputElement).value);
+  });
+  slider.addEventListener("change", (e: Event) => {
+    slideTo((e.target as HTMLInputElement).value);
   });
 
   // Optional: example trace mode
@@ -291,3 +251,18 @@ function setupUi() {
 }
 
 document.addEventListener("DOMContentLoaded", setupUi);
+
+/**
+ * VS Code signals a theme change by swapping the class on `<body>`. That changes the
+ * colours *and* potentially the font, so the cached layouts have to go (plan 6.5).
+ */
+function watchThemeChanges() {
+  const observer = new MutationObserver(() => {
+    clearLayoutCache();
+    renderCurrent();
+  });
+  observer.observe(document.body, {
+    attributes: true,
+    attributeFilter: ["class", "style"],
+  });
+}
diff --git a/src/test/unit/fixtures.ts b/src/test/unit/fixtures.ts
new file mode 100644
index 00000000..aa4a5c1d
--- /dev/null
+++ b/src/test/unit/fixtures.ts
@@ -0,0 +1,75 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+// Heap addresses are numeric keys, so the fixtures below cannot use camelCase names.
+//
+// Shared by reachability.test.ts and graph-model.test.ts. Not a `.test.ts` file on
+// purpose: the mocha glob is `out/test/unit/**/*.test.js`, so this is never run as a suite.
+import type { Address, BackendTraceElem, HeapValue, NamedValue, StackElem, Value } from '../../programflow-visualization/types';
+
+export function ref(address: Address): Value {
+  return { type: 'ref', value: address };
+}
+
+export function int(value: number): Value {
+  return { type: 'int', value };
+}
+
+export function str(value: string): Value {
+  return { type: 'str', value };
+}
+
+export function none(): Value {
+  return { type: 'none', value: 'None' };
+}
+
+export function local(name: string, value: Value): NamedValue {
+  return { ...value, name };
+}
+
+export function frame(frameName: string, locals: Array<NamedValue>): StackElem {
+  return { frameName, locals };
+}
+
+export function list(...values: Array<Value>): HeapValue {
+  return { type: 'list', value: values };
+}
+
+export function tuple(...values: Array<Value>): HeapValue {
+  return { type: 'tuple', value: values };
+}
+
+export function set(...values: Array<Value>): HeapValue {
+  return { type: 'set', value: values };
+}
+
+export function instance(name: string, fields: Record<string, Value>): HeapValue {
+  return { type: 'instance', name, value: fields as unknown as Map<string, Value> };
+}
+
+export function dict(entries: Array<[Value, Value]>): HeapValue {
+  const keys: Record<string, Value> = {};
+  const values: Record<string, Value> = {};
+  entries.forEach(([key, value], index) => {
+    keys[index] = key;
+    values[index] = value;
+  });
+  return {
+    type: 'dict',
+    keys: keys as unknown as Map<any, Value>,
+    value: values as unknown as Map<any, Value>,
+  };
+}
+
+/**
+ * `heap` is declared as a `Map` but arrives as a plain object after IPC/JSON -
+ * the fixtures deliberately reproduce the runtime shape, not the declared one.
+ */
+export function step(stack: Array<StackElem>, heap: Record<number, HeapValue>): BackendTraceElem {
+  return {
+    line: 1,
+    filePath: 'example.py',
+    stack,
+    heap: heap as unknown as BackendTraceElem['heap'],
+    stdout: '',
+    traceback: undefined,
+  };
+}
diff --git a/src/test/unit/graph-model.test.ts b/src/test/unit/graph-model.test.ts
new file mode 100644
index 00000000..ef539390
--- /dev/null
+++ b/src/test/unit/graph-model.test.ts
@@ -0,0 +1,336 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+// Structure tests for buildGraph. No DOM and no ELK run - this is the pure half of the
+// pipeline, the half that the browser harness is bad at checking (elk-task/elk-plan.md 7.8).
+import * as assert from 'assert';
+
+import {
+  buildGraph,
+  formatValue,
+  frameNodeId,
+  inputPortId,
+  keyPortId,
+  objectNodeId,
+  rowPortId,
+  rowsOfHeapValue,
+} from '../../programflow-visualization/graph-model';
+import type { NodeModel, VizGraph } from '../../programflow-visualization/graph-model';
+import { outgoingRefs } from '../../programflow-visualization/reachability';
+import type { Address, BackendTraceElem, HeapValue } from '../../programflow-visualization/types';
+import { dict, frame, instance, int, list, local, none, ref, set, step, str, tuple } from './fixtures';
+
+// Helpers ---------------------------------------------------------------------
+
+function build(elem: BackendTraceElem, collapsed: Array<Address> = []): VizGraph {
+  return buildGraph(elem, new Set(collapsed));
+}
+
+function nodeIds(viz: VizGraph): Array<string> {
+  return (viz.graph.children ?? []).map((child) => child.id);
+}
+
+function node(viz: VizGraph, id: string) {
+  const found = (viz.graph.children ?? []).find((child) => child.id === id);
+  assert.ok(found, `no node ${id}`);
+  return found;
+}
+
+function portIds(viz: VizGraph, id: string): Array<string> {
+  return (node(viz, id).ports ?? []).map((port) => port.id);
+}
+
+function model(viz: VizGraph, id: string): NodeModel {
+  const found = viz.nodes.get(id);
+  assert.ok(found, `no model ${id}`);
+  return found;
+}
+
+/** Every edge as `sourcePort -> targetPort`, sorted, for order-free comparison. */
+function edges(viz: VizGraph): Array<string> {
+  return (viz.graph.edges ?? [])
+    .map((edge) => `${edge.sources[0]} -> ${edge.targets[0]}`)
+    .sort();
+}
+
+/** How many references the step contains among the visible objects. */
+function refCount(elem: BackendTraceElem, heap: Record<number, HeapValue>): number {
+  const fromStack = elem.stack.reduce(
+    (total, stackElem) => total + stackElem.locals.filter((value) => value.type === 'ref').length,
+    0
+  );
+  const fromHeap = Object.values(heap).reduce(
+    (total, heapValue) => total + outgoingRefs(heapValue).length,
+    0
+  );
+  return fromStack + fromHeap;
+}
+
+// Tests -----------------------------------------------------------------------
+
+suite('graph-model: nodes', () => {
+  test('frames come first, in stack order, then objects ascending by address', () => {
+    const elem = step(
+      [frame('<module>', [local('xs', ref(7))]), frame('f', [local('ys', ref(2))])],
+      { 7: list(int(1)), 2: list(int(2)) }
+    );
+    assert.deepStrictEqual(nodeIds(build(elem)), [
+      frameNodeId(0),
+      frameNodeId(1),
+      objectNodeId(2),
+      objectNodeId(7),
+    ]);
+  });
+
+  test('address order is independent of heap insertion order, so steps stay stable', () => {
+    const ascending = step([frame('<module>', [local('a', ref(1)), local('b', ref(9))])], {
+      1: list(), 9: list(),
+    });
+    const descending = step([frame('<module>', [local('b', ref(9)), local('a', ref(1))])], {
+      9: list(), 1: list(),
+    });
+    assert.deepStrictEqual(nodeIds(build(ascending)).slice(2), nodeIds(build(descending)).slice(2));
+  });
+
+  test('the last stack entry is the current frame, not the first', () => {
+    const elem = step([frame('<module>', []), frame('g', []), frame('h', [])], {});
+    assert.strictEqual(model(build(elem), frameNodeId(0)).kind, 'frame');
+    assert.strictEqual(model(build(elem), frameNodeId(1)).kind, 'frame');
+    assert.strictEqual(model(build(elem), frameNodeId(2)).kind, 'current-frame');
+  });
+
+  test('<module> is shown as Global, other frames keep their name', () => {
+    const elem = step([frame('<module>', []), frame('createGradeList', [])], {});
+    assert.strictEqual(model(build(elem), frameNodeId(0)).header, 'Global');
+    assert.strictEqual(model(build(elem), frameNodeId(1)).header, 'createGradeList');
+  });
+
+  test('node kind and header follow the heap value; instances use their class name', () => {
+    const elem = step(
+      [frame('<module>', [local('a', ref(1)), local('b', ref(2)), local('c', ref(3)), local('d', ref(4)), local('e', ref(5))])],
+      {
+        1: list(int(1)),
+        2: tuple(int(1)),
+        3: set(int(1)),
+        4: dict([[str('k'), int(1)]]),
+        5: instance('Student', { name: str('lara') }),
+      }
+    );
+    const viz = build(elem);
+    const kinds = [1, 2, 3, 4, 5].map((address) => model(viz, objectNodeId(address)).kind);
+    assert.deepStrictEqual(kinds, ['list', 'tuple', 'set', 'dict', 'instance']);
+    assert.strictEqual(model(viz, objectNodeId(5)).header, 'Student');
+    assert.strictEqual(model(viz, objectNodeId(1)).header, 'list');
+  });
+
+  test('only frames carry the layer constraint, and every node has fixed ports', () => {
+    const elem = step([frame('<module>', [local('xs', ref(1))])], { 1: list() });
+    const viz = build(elem);
+    assert.strictEqual(
+      node(viz, frameNodeId(0)).layoutOptions?.['elk.layered.layering.layerConstraint'],
+      'FIRST_SEPARATE'
+    );
+    assert.strictEqual(
+      node(viz, objectNodeId(1)).layoutOptions?.['elk.layered.layering.layerConstraint'],
+      undefined
+    );
+    for (const child of viz.graph.children ?? []) {
+      assert.strictEqual(child.layoutOptions?.['elk.portConstraints'], 'FIXED_POS');
+    }
+  });
+});
+
+suite('graph-model: rows', () => {
+  test('list and tuple rows are indexed, set rows have no key', () => {
+    assert.deepStrictEqual(
+      rowsOfHeapValue(list(int(4), str('x'))).map((row) => row.key),
+      ['[0]', '[1]']
+    );
+    assert.deepStrictEqual(rowsOfHeapValue(set(str('a'), str('b'))).map((row) => row.key), ['', '']);
+  });
+
+  test('instance rows are named after their fields', () => {
+    const rows = rowsOfHeapValue(instance('Student', { name: str('lara'), age: int(21) }));
+    assert.deepStrictEqual(rows.map((row) => row.key), ['name', 'age']);
+    assert.deepStrictEqual(rows.map((row) => row.value), ['lara', '21']);
+  });
+
+  test('a reference cell has no text of its own, only a ref', () => {
+    const rows = rowsOfHeapValue(list(ref(3)));
+    assert.deepStrictEqual(rows, [{ key: '[0]', value: '', ref: 3 }]);
+  });
+
+  test('a dict key that is a reference is labelled [key] and recorded as keyRef', () => {
+    const rows = rowsOfHeapValue(dict([[ref(8), str('even pair')], [str('plain'), int(1)]]));
+    assert.deepStrictEqual(rows[0], { key: '[key]', value: 'even pair', ref: undefined, keyRef: 8 });
+    assert.deepStrictEqual(rows[1], { key: 'plain', value: '1', ref: undefined, keyRef: undefined });
+  });
+
+  test('a local named return is flagged for highlighting', () => {
+    const elem = step([frame('f', [local('x', int(1)), local('return', int(9))])], {});
+    const rows = model(build(elem), frameNodeId(0)).rows;
+    assert.strictEqual(rows[0].isReturn, false);
+    assert.strictEqual(rows[1].isReturn, true);
+  });
+
+  test('formatValue renders None as None and leaves refs blank', () => {
+    assert.strictEqual(formatValue(none()), 'None');
+    assert.strictEqual(formatValue(ref(5)), '');
+    assert.strictEqual(formatValue(int(3)), '3');
+  });
+
+  test('the summary counts rows and is singular for one', () => {
+    const elem = step(
+      [frame('<module>', [local('a', ref(1)), local('b', ref(2)), local('c', ref(3))])],
+      { 1: list(int(1), int(2)), 2: dict([[str('k'), int(1)]]), 3: instance('S', { x: int(1) }) }
+    );
+    const viz = build(elem);
+    assert.strictEqual(model(viz, objectNodeId(1)).summary, '2 elements');
+    assert.strictEqual(model(viz, objectNodeId(2)).summary, '1 entry');
+    assert.strictEqual(model(viz, objectNodeId(3)).summary, '1 field');
+  });
+});
+
+suite('graph-model: ports and edges', () => {
+  test('objects declare a west input port, frames do not', () => {
+    const elem = step([frame('<module>', [local('xs', ref(1))])], { 1: list() });
+    const viz = build(elem);
+    assert.deepStrictEqual(portIds(viz, objectNodeId(1)), [inputPortId(objectNodeId(1))]);
+    assert.deepStrictEqual(portIds(viz, frameNodeId(0)), [rowPortId(frameNodeId(0), 0)]);
+  });
+
+  test('only rows holding a reference get a row port', () => {
+    const elem = step([frame('<module>', [local('xs', ref(1))])], {
+      1: list(int(0), ref(2), int(0)),
+      2: list(),
+    });
+    const viz = build(elem);
+    assert.deepStrictEqual(portIds(viz, objectNodeId(1)), [
+      inputPortId(objectNodeId(1)),
+      rowPortId(objectNodeId(1), 1),
+    ]);
+  });
+
+  test('a row with a reference key and a reference value gets both ports, key first', () => {
+    const elem = step([frame('<module>', [local('d', ref(1))])], {
+      1: dict([[ref(2), ref(3)]]),
+      2: tuple(int(1)),
+      3: list(),
+    });
+    const viz = build(elem);
+    assert.deepStrictEqual(portIds(viz, objectNodeId(1)), [
+      inputPortId(objectNodeId(1)),
+      keyPortId(objectNodeId(1), 0),
+      rowPortId(objectNodeId(1), 0),
+    ]);
+  });
+
+  test('edges leave the referencing row and land on the input port of the target', () => {
+    const elem = step([frame('<module>', [local('xs', ref(1))])], { 1: list(ref(2)), 2: list() });
+    assert.deepStrictEqual(edges(build(elem)), [
+      `${objectNodeId(1)}:0 -> ${inputPortId(objectNodeId(2))}`,
+      `${frameNodeId(0)}:0 -> ${inputPortId(objectNodeId(1))}`,
+    ].sort());
+  });
+
+  test('a dict key that is a reference gets its own edge', () => {
+    // Regression: the key object used to be visible with nothing pointing at it, so ELK
+    // laid it out as a root - left of the frames (elk-task/elk-plan.md 7.7).
+    const heap = { 1: dict([[ref(2), str('even pair')]]), 2: tuple(int(1), int(2)) };
+    const elem = step([frame('<module>', [local('byPair', ref(1))])], heap);
+    const viz = build(elem);
+    assert.deepStrictEqual(edges(viz), [
+      `${frameNodeId(0)}:0 -> ${inputPortId(objectNodeId(1))}`,
+      `${keyPortId(objectNodeId(1), 0)} -> ${inputPortId(objectNodeId(2))}`,
+    ].sort());
+    assert.strictEqual(refCount(elem, heap), edges(viz).length);
+  });
+
+  test('with nothing collapsed, edge count equals reference count', () => {
+    // Definition of done, criterion 2.
+    const heap: Record<number, HeapValue> = {
+      1: list(ref(2), ref(3), int(0)),
+      2: instance('Student', { friend: ref(3), age: int(21) }),
+      3: dict([[ref(4), ref(2)], [str('k'), int(1)]]),
+      4: tuple(int(1), int(2)),
+    };
+    const elem = step(
+      [frame('<module>', [local('xs', ref(1)), local('n', int(3))]), frame('f', [local('s', ref(2))])],
+      heap
+    );
+    const viz = build(elem);
+    assert.strictEqual(edges(viz).length, refCount(elem, heap));
+    assert.strictEqual(new Set(edges(viz)).size, edges(viz).length, 'no duplicate edges');
+  });
+
+  test('every edge endpoint is a port that exists on some node', () => {
+    const heap: Record<number, HeapValue> = {
+      1: list(ref(2)),
+      2: dict([[ref(3), ref(1)]]),
+      3: set(str('a')),
+    };
+    const elem = step([frame('<module>', [local('xs', ref(1))])], heap);
+    const viz = build(elem);
+    const declared = new Set(
+      (viz.graph.children ?? []).flatMap((child) => (child.ports ?? []).map((port) => port.id))
+    );
+    for (const edge of viz.graph.edges ?? []) {
+      assert.ok(declared.has(edge.sources[0]), `dangling source ${edge.sources[0]}`);
+      assert.ok(declared.has(edge.targets[0]), `dangling target ${edge.targets[0]}`);
+    }
+  });
+
+  test('a self-reference becomes a self-loop rather than being dropped', () => {
+    const elem = step([frame('<module>', [local('xs', ref(1))])], { 1: list(ref(1)) });
+    assert.deepStrictEqual(edges(build(elem)), [
+      `${frameNodeId(0)}:0 -> ${inputPortId(objectNodeId(1))}`,
+      `${objectNodeId(1)}:0 -> ${inputPortId(objectNodeId(1))}`,
+    ].sort());
+  });
+
+  test('a cycle terminates and both directions are drawn', () => {
+    const elem = step([frame('<module>', [local('left', ref(1))])], {
+      1: list(ref(2)),
+      2: list(ref(1)),
+    });
+    assert.strictEqual(edges(build(elem)).length, 3);
+  });
+});
+
+suite('graph-model: collapsing', () => {
+  test('a collapsed object keeps its input port but loses its row ports and edges', () => {
+    const elem = step([frame('<module>', [local('xs', ref(1))])], { 1: list(ref(2)), 2: list() });
+    const viz = build(elem, [1]);
+    assert.deepStrictEqual(portIds(viz, objectNodeId(1)), [inputPortId(objectNodeId(1))]);
+    assert.deepStrictEqual(edges(viz), [`${frameNodeId(0)}:0 -> ${inputPortId(objectNodeId(1))}`]);
+  });
+
+  test('a collapsed node keeps its rows in the model, for the summary and for re-expanding', () => {
+    const elem = step([frame('<module>', [local('xs', ref(1))])], { 1: list(int(1), int(2)) });
+    const collapsedModel = model(build(elem, [1]), objectNodeId(1));
+    assert.strictEqual(collapsedModel.collapsed, true);
+    assert.strictEqual(collapsedModel.rows.length, 2);
+    assert.strictEqual(collapsedModel.summary, '2 elements');
+  });
+
+  test('collapsing removes exclusively downstream nodes but keeps shared ones', () => {
+    const elem = step(
+      [frame('<module>', [local('xs', ref(1)), local('shared', ref(3))])],
+      { 1: list(ref(2), ref(3)), 2: list(), 3: list() }
+    );
+    const ids = nodeIds(build(elem, [1]));
+    assert.ok(!ids.includes(objectNodeId(2)), 'anonymous child should be gone');
+    assert.ok(ids.includes(objectNodeId(3)), 'child with another root should stay');
+  });
+
+  test('collapsing an address that is not on screen changes nothing', () => {
+    const elem = step([frame('<module>', [local('xs', ref(1))])], { 1: list(int(1)) });
+    assert.deepStrictEqual(nodeIds(build(elem, [99])), nodeIds(build(elem)));
+    assert.deepStrictEqual(edges(build(elem, [99])), edges(build(elem)));
+  });
+
+  test('frames are never collapsible', () => {
+    const elem = step([frame('<module>', [local('n', int(1))])], {});
+    const frameModel = model(build(elem), frameNodeId(0));
+    assert.strictEqual(frameModel.address, undefined);
+    assert.strictEqual(frameModel.collapsed, false);
+  });
+});
diff --git a/src/test/unit/reachability.test.ts b/src/test/unit/reachability.test.ts
new file mode 100644
index 00000000..23bff004
--- /dev/null
+++ b/src/test/unit/reachability.test.ts
@@ -0,0 +1,191 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+// Heap addresses are numeric keys, so the fixtures below cannot use camelCase names.
+import * as assert from 'assert';
+
+import { outgoingRefs, rootRefs, visibleAddresses } from '../../programflow-visualization/reachability';
+import type { Address, BackendTraceElem } from '../../programflow-visualization/types';
+import { dict, frame, instance, int, list, local, ref, step, str } from './fixtures';
+
+function visible(elem: BackendTraceElem, collapsed: Array<Address> = []): Array<Address> {
+  return [...visibleAddresses(elem, new Set(collapsed))].sort((a, b) => a - b);
+}
+
+// Tests -----------------------------------------------------------------------
+
+suite('reachability: traversal basics', () => {
+  test('empty heap and empty stack yield nothing', () => {
+    assert.deepStrictEqual(visible(step([frame('<module>', [])], {})), []);
+  });
+
+  test('non-reference locals are not roots', () => {
+    const elem = step([frame('<module>', [local('count', int(3))])], { 0: list(int(1)) });
+    assert.deepStrictEqual(visible(elem), []);
+  });
+
+  test('roots come from every frame, not only the current one', () => {
+    const elem = step(
+      [
+        frame('<module>', [local('outer', ref(0))]),
+        frame('helper', [local('inner', ref(1))]),
+      ],
+      { 0: list(int(1)), 1: list(int(2)) }
+    );
+    assert.deepStrictEqual(visible(elem), [0, 1]);
+  });
+
+  test('objects unreachable from the stack are dropped', () => {
+    const elem = step([frame('<module>', [local('kept', ref(0))])], {
+      0: list(int(1)),
+      1: list(int(2)), // garbage: nothing points here
+    });
+    assert.deepStrictEqual(visible(elem), [0]);
+  });
+
+  test('references to addresses missing from the heap are ignored', () => {
+    const elem = step([frame('<module>', [local('dangling', ref(7))])], {});
+    assert.deepStrictEqual(visible(elem), []);
+  });
+});
+
+suite('reachability: container types', () => {
+  test('instance fields are followed', () => {
+    const elem = step([frame('<module>', [local('subject', ref(0))])], {
+      0: instance('Subject', { name: str('AuD'), students: ref(1) }),
+      1: list(ref(2)),
+      2: instance('Student', { name: str('Tim'), grade: int(1) }),
+    });
+    assert.deepStrictEqual(visible(elem), [0, 1, 2]);
+  });
+
+  test('dict reference keys and reference values are both followed', () => {
+    const elem = step([frame('<module>', [local('byPair', ref(0))])], {
+      0: dict([[ref(1), ref(2)]]),
+      1: { type: 'tuple', value: [int(1), int(2)] },
+      2: list(str('a')),
+    });
+    assert.deepStrictEqual(visible(elem), [0, 1, 2]);
+  });
+
+  test('set and tuple elements are followed', () => {
+    const elem = step([frame('<module>', [local('mixed', ref(0))])], {
+      0: { type: 'tuple', value: [ref(1), int(42), str('text')] },
+      1: { type: 'set', value: [ref(2)] },
+      2: list(int(1)),
+    });
+    assert.deepStrictEqual(visible(elem), [0, 1, 2]);
+  });
+
+  test('outgoingRefs reports only reference values', () => {
+    assert.deepStrictEqual(outgoingRefs(list(int(1), ref(4), str('x'), ref(9))), [4, 9]);
+    assert.deepStrictEqual(outgoingRefs(instance('S', { a: int(1), b: ref(3) })), [3]);
+    assert.deepStrictEqual(outgoingRefs(dict([[str('k'), ref(5)]])), [5]);
+  });
+
+  test('rootRefs reports only reference locals', () => {
+    const elem = step(
+      [frame('<module>', [local('n', int(1)), local('a', ref(2)), local('b', ref(3))])],
+      {}
+    );
+    assert.deepStrictEqual(rootRefs(elem), [2, 3]);
+  });
+});
+
+suite('reachability: cycles terminate', () => {
+  test('self-referencing list', () => {
+    const elem = step([frame('<module>', [local('selfRef', ref(0))])], {
+      0: list(ref(0)),
+    });
+    assert.deepStrictEqual(visible(elem), [0]);
+  });
+
+  test('two-object cycle', () => {
+    const elem = step([frame('<module>', [local('left', ref(0))])], {
+      0: list(ref(1)),
+      1: list(ref(0)),
+    });
+    assert.deepStrictEqual(visible(elem), [0, 1]);
+  });
+
+  test('cycle reachable only through a collapsed object disappears', () => {
+    const elem = step([frame('<module>', [local('outer', ref(0))])], {
+      0: list(ref(1)),
+      1: list(ref(2)),
+      2: list(ref(1)),
+    });
+    assert.deepStrictEqual(visible(elem), [0, 1, 2]);
+    assert.deepStrictEqual(visible(elem, [0]), [0]);
+  });
+});
+
+suite('reachability: collapsing', () => {
+  // Mirrors elk-task/example-anonymous.py: `data = [[1, 2], [3, 4]]`
+  const anonymous = step([frame('<module>', [local('data', ref(0))])], {
+    0: list(ref(1), ref(2)),
+    1: list(int(1), int(2)),
+    2: list(int(3), int(4)),
+  });
+
+  test('nothing is hidden while nothing is collapsed', () => {
+    assert.deepStrictEqual(visible(anonymous), [0, 1, 2]);
+  });
+
+  test('the collapsed object itself stays visible', () => {
+    assert.ok(visible(anonymous, [0]).includes(0));
+  });
+
+  test('exclusively downstream objects disappear', () => {
+    assert.deepStrictEqual(visible(anonymous, [0]), [0]);
+  });
+
+  test('expanding again restores the full picture', () => {
+    assert.deepStrictEqual(visible(anonymous, []), visible(anonymous));
+  });
+
+  // Mirrors elk-task/example.py: two subject lists sharing some students.
+  const shared = step(
+    [frame('<module>', [local('aud', ref(0)), local('prog1', ref(1))])],
+    {
+      0: list(ref(2), ref(3)), // aud    -> lara, tim
+      1: list(ref(2)),         // prog1  -> lara
+      2: instance('Student', { name: str('Lara') }),
+      3: instance('Student', { name: str('Tim') }),
+    }
+  );
+
+  test('collapsing one referrer keeps objects the other still reaches', () => {
+    // lara (2) survives because prog1 still points at her, tim (3) does not.
+    assert.deepStrictEqual(visible(shared, [0]), [0, 1, 2]);
+  });
+
+  test('collapsing every referrer removes the shared object', () => {
+    assert.deepStrictEqual(visible(shared, [0, 1]), [0, 1]);
+  });
+
+  test('an object with its own name survives collapsing its container', () => {
+    // elk-task/example-anonymous.py: `shared` is a global, `holder = [shared]`.
+    const elem = step(
+      [frame('<module>', [local('shared', ref(1)), local('holder', ref(0))])],
+      {
+        0: list(ref(1)),
+        1: instance('Student', { name: str('Cleo') }),
+      }
+    );
+    assert.deepStrictEqual(visible(elem, [0]), [0, 1]);
+  });
+
+  test('collapsing cuts only at the collapsed node, not above or below it', () => {
+    // 0 -> 1 -> 2 -> 3, collapse the middle one.
+    const chain = step([frame('<module>', [local('head', ref(0))])], {
+      0: list(ref(1)),
+      1: list(ref(2)),
+      2: list(ref(3)),
+      3: list(int(0)),
+    });
+    assert.deepStrictEqual(visible(chain, [1]), [0, 1]);
+    assert.deepStrictEqual(visible(chain, [2]), [0, 1, 2]);
+  });
+
+  test('collapsing an object that is not in the heap changes nothing', () => {
+    assert.deepStrictEqual(visible(anonymous, [99]), [0, 1, 2]);
+  });
+});
diff --git a/tsconfig.json b/tsconfig.json
index 342b7493..e5432907 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,6 +9,8 @@
 		"types": ["node"],
 		"sourceMap": true,
 		"rootDir": "src",
+		/* elkjs ships a .d.ts that does not survive strict checking. */
+		"skipLibCheck": true,
 		"strict": true   /* enable all strict type-checking options */
 		/* Additional Checks */
 		// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */