diff --git a/.agents/skills/recording-petrinaut-demos/SKILL.md b/.agents/skills/recording-petrinaut-demos/SKILL.md
new file mode 100644
index 00000000000..d28af843ae3
--- /dev/null
+++ b/.agents/skills/recording-petrinaut-demos/SKILL.md
@@ -0,0 +1,189 @@
+---
+name: recording-petrinaut-demos
+description: "Record a short screen capture of a Petrinaut flow and share it: the storyboard rules, the Playwright scenario format, the retina capture and H.264 encode, the pointer-and-keystroke overlay, and the GitHub API upload that turns the file into a link anyone on the repository can play. Use when a change needs a video or GIF of the UI, when asked for a screen recording, demo, capture or before/after pair, or when a screenshot cannot show the behaviour because it moves."
+license: Apache-2.0
+metadata:
+  triggers:
+    type: domain
+    enforcement: suggest
+    priority: medium
+    keywords:
+      - demo
+      - recording
+      - screencast
+      - video
+      - gif
+    intent-patterns:
+      - "\\b(record|capture|film)\\b.*?\\b(demo|video|gif|flow|screen)\\b"
+      - "\\b(demo|video|gif|screen recording)\\b.*?\\b(petrinaut|editor|ui)\\b"
+      - "\\bbefore\\b.*?\\bafter\\b.*?\\b(video|recording|gif)\\b"
+---
+
+# Recording a Petrinaut demo
+
+Every recording has the same shape, so two of them can be compared at a glance — a before against an after, or one change against another.
+
+| Property    | Value                                                                  |
+| ----------- | ---------------------------------------------------------------------- |
+| Duration    | 18 s, real time, no speed-up                                           |
+| Aspect      | 16:10                                                                  |
+| Viewport    | 1300 × 812 CSS px                                                      |
+| Capture     | 2600 × 1624 device px (`deviceScaleFactor: 2`)                         |
+| Output      | MP4, H.264 High, `yuv420p`, 1600 × 1000, 30 fps, `faststart`, no audio |
+| Alternative | GIF, 1600 × 1000, 20 fps, only where autoplay matters                  |
+| Size        | under 10 MB, and a UI flow lands near 1.5 MB                           |
+
+`scripts/make-demo.sh` fixes those numbers. The only creative work is the path through the app.
+
+## Viewport and output are separate dials
+
+The viewport decides how large the interface reads in the frame; the output decides the file's resolution. Capture is always at `deviceScaleFactor: 2`, so a viewport of half the output width means no rescale and maximum sharpness, and a larger capture downsampled to the output is the next best thing.
+
+| Viewport | Output | Result                                                       |
+| -------- | ------ | ------------------------------------------------------------ |
+| 1300     | 1600   | interface 1.23× life size. The default.                      |
+| 1600     | 1600   | one CSS pixel per output pixel, so the interface reads small |
+| 1280     | 2560   | HiDPI file, 1:1 from the capture, interface 2×               |
+
+Pair them explicitly: `record-demo.mjs --viewport-width 1280` with `make-demo.sh --width 2560`.
+
+## Why this and not a screen recorder
+
+- **A hand-driven recording cannot be repeated.** A before/after pair has to run the same path, and a scripted take does.
+- **Playwright's own `recordVideo` cannot capture retina.** A `size` larger than the viewport pads the frame with grey rather than scaling, and `deviceScaleFactor` never reaches the video. `record-demo.mjs` drives a CDP `Page.startScreencast` instead and rebuilds a constant-rate video from the timestamped frames.
+- **Record headless, not in an embedded browser pane.** A pane that is not on screen delivers no animation frames and no `ResizeObserver` callbacks, so transitions do not advance and anything measured from a resize observer stays frozen at its mount value. Layout read back with `getBoundingClientRect` still looks right, which makes this hard to spot.
+
+## The five steps
+
+1. **Start the app.** `yarn workspace @apps/petrinaut-website dev` (port 5173) is the usual target; a branch's Vercel preview works too and needs no local server. Poll until it answers 200.
+2. **Write the storyboard**, as a comment at the top of the scenario file: numbered beats, each with what the viewer sees and a time budget, summing to 18 s.
+3. **Write the scenario.** Copy [`references/example.scenario.mjs`](references/example.scenario.mjs) and edit its four exports.
+4. **Record, encode, and read the check frames.**
+
+   ```sh
+   node .agents/skills/recording-petrinaut-demos/scripts/record-demo.mjs ./my.scenario.mjs --out ./demo
+   .agents/skills/recording-petrinaut-demos/scripts/make-demo.sh ./demo/recording.json ./demo/my-flow.mp4
+   ```
+
+   Run both from the repository root: the recorder resolves Playwright and the example models through the working directory. The recorder prints the take's timeline and every console or page error — zero is the bar. The encoder writes check frames at 0, 6, 12 and 17.9 s next to the output; open all four and compare them with the storyboard's beats at those times. A take whose pacing is wrong is re-recorded, not re-encoded.
+
+5. **Share it.** `scripts/upload-attachment.sh ./demo/my-flow.mp4` prints an asset URL that plays inline for anyone who can read the repository. See [Sharing](#sharing).
+
+## The storyboard
+
+Budget the 18 s in three acts:
+
+| Act     | Share             | What it is                                                                             |
+| ------- | ----------------- | -------------------------------------------------------------------------------------- |
+| Context | 40–45 % (7–8 s)   | what a viewer must understand: the state before, every choice made, the primary action |
+| Motion  | 35–40 % (6.5–7 s) | the behaviour being shown                                                              |
+| Result  | 15–20 % (3–3.5 s) | the finished state, held still                                                         |
+
+Beat holds, measured after the UI has changed: 0.8–1.0 s on the first frame, 1.0 s when a panel or dialog opens, 0.6–0.7 s per field or toggle, 1.0 s before the primary action, 3 s or more once the result lands. A reader needs to see an input, read it, and see the next one land, and 0.6 s is the floor for that.
+
+Then, in priority order:
+
+1. **Few steps.** A viewer has to follow it on the first watch. Bound the domain — six trials, not fifteen.
+2. **Focus fast.** Open on the relevant view in a clean state. Loading a model, dismissing the tour and warming a runtime all happen off camera in `prepare`.
+3. **Show the motion.** Keep the region that moves in frame while it moves, and let it finish on camera so the last beat is a result and not a spinner.
+4. **Name what you can.** Type a descriptive name where the UI shows one; it becomes a label in the video.
+
+**A glide takes about twice the duration you give it.** Each step of `hud.glide` is a mouse move plus a page evaluate, and the round trips dominate the 22 ms step. Halve every glide duration when translating a storyboard into code, then check the recorder's printed timeline rather than the intended one.
+
+## The scenario
+
+A scenario is an ES module with four exports. `references/example.scenario.mjs` is a worked one — a drag, a hover, and a panel toggle.
+
+| Export               | Runs              | For                                                                        |
+| -------------------- | ----------------- | -------------------------------------------------------------------------- |
+| `url`                | —                 | path or URL to open, relative to `--base-url`                              |
+| `init(page)`         | before navigation | `addInitScript` to seed `localStorage`: the model, the settings, the flags |
+| `prepare(page, log)` | off camera        | dismiss the tour, reach the view, frame the canvas, warm anything slow     |
+| `take(page, log)`    | on camera         | the 18 s path, one block per beat                                          |
+
+Drive the pointer through the overlay (see [The input overlay](#the-input-overlay)) so the viewer can follow it, and `log()` the state you are asserting at each beat — the printed timeline is how you check the pacing without watching the file.
+
+Use Playwright role locators. Two things in this app ignore synthetic clicks and need `dispatchEvent("click")`: the mode segmented control and switch-style radios. Monaco takes no synthetic keystrokes at all — drive code through seeded state instead, and say so rather than faking it.
+
+## Petrinaut specifics
+
+[`references/petrinaut-setup.md`](references/petrinaut-setup.md) carries the detail: the two `localStorage` keys, the settings that make up the house look, the canvas framing helper, and the traps that swallow a click aimed at a node.
+
+The short version: seed the net under `petrinaut-sdcpn` and the settings under `petrinaut:user-settings` in `init`, always set `showWalkthroughOnInit: false`, `useEntitiesTreeView: true`, `compactNodes: true` and `leftSidebarWidth: 240`, then frame the net with `frameNet` from `scripts/petrinaut-canvas.mjs` in `prepare`. Both keys are read once at load, so a flag set after navigation does nothing.
+
+## The input overlay
+
+`scripts/demo-hud.mjs` draws the pointer and the keystrokes over the app; Playwright itself renders no cursor into a screencast.
+
+```js
+const hud = createDemoHud(page, { rest: { x: width - 150, y: height - 260 } });
+await hud.install(); // in prepare; the pointer starts hidden
+await hud.showPointer();
+await hud.glideTo(button, 300);
+await hud.click();
+await hud.down(); // a drag: press, glide, release
+await hud.glide(x, y, 700);
+await hud.up();
+await hud.press("Meta+k"); // key caps: the modifier, then the key
+await hud.type("layout"); // no caps; the field already shows the text
+await hud.hidePointer();
+```
+
+What it does and why:
+
+- **The pointer is a mirror, not a capture.** Every gesture moves the real pointer and the mirror in one loop, so hover states track the glide instead of firing ahead of it.
+- **The shape follows the app.** The overlay reads the computed `cursor` of the element under the pointer, so a resize handle turns the arrow into the system's double arrow. A `down()` holds that shape until the matching `up()`, because one pixel into a drag the element under the pointer is no longer the handle.
+- **Only chords and named keys reach the caps.** Characters typed into a field are already visible in the field, and a cap per letter is noise.
+- **The pointer appears and leaves.** Hide it during a keyboard-only act and after the last click, so no arrow sits over the result frame.
+
+`scripts/probe-cursor.mjs` screenshots both cursor shapes, hovering and mid-drag, in a few seconds. Use it to judge the overlay instead of spending a whole take on it.
+
+## Gotchas that cost real time
+
+- **`cd` inside a command leaks into the next one.** The recorder resolves Playwright and the example models from `process.cwd()`; run it from the repository root, and pass absolute paths in one-off probes.
+- **Warm heavy runtimes off camera.** A first run that downloads WASM or compiles shaders shows seconds of nothing. Run a throwaway in `prepare`, then reset the state it left behind.
+- **WebGPU is off in headless Chromium.** `navigator.gpu.requestAdapter()` returns null, so a GPU path silently falls back to the CPU on camera. Export `browserArgs = ["--enable-unsafe-webgpu", "--ignore-gpu-blocklist", "--use-angle=metal"]` from the scenario and probe the adapter once before recording.
+- **Duplicate accessible names break strict locators.** Dialogs often carry an icon button and a footer button both named "Close"; add `{ exact: true }` and `.last()`, or a more specific role.
+- **Screencast frames arrive only when pixels change**, so a static screen produces none. The harness writes each frame's on-screen duration and the encoder fills the gaps; do not reason about offsets by counting frames.
+- **Growing lists push the interesting region out of frame.** Collapse them, or scroll once the layout is stable.
+- **An odd output height fails the encode.** `yuv420p` subsamples by two, and ffmpeg reports it as "Could not open encoder before EOF", which reads like a codec problem.
+- **Check the frame counts.** 540 frames for 18 s at 30 fps, 360 for a GIF at 20 fps, and the width you asked for. Anything else means a wrong flag.
+
+## Before and after pairs
+
+A pair has to run the same path against two builds, so record it in one sitting
+from one scenario file:
+
+1. **Record the after take** against the branch: build the library, start the
+   dev server, record.
+2. **Put the package back to main**: `git checkout origin/main -- libs/@hashintel/petrinaut/src`.
+   One path, all or nothing, rather than a file list that goes stale as the
+   branch grows.
+3. **Rebuild and restart the dev server.** The website serves the built output,
+   and a server started before the build serves the previous bundle.
+4. **Record the before take.**
+5. **Restore the branch**: `git checkout HEAD -- libs/@hashintel/petrinaut/src`.
+
+**Step 5 does not fully undo step 2.** A file that main has and the branch
+deleted comes back _staged_, because `git checkout HEAD -- <path>` cannot
+remove what HEAD does not contain. Finish with `git status --short`, and for
+anything still listed run `git rm --cached <path> && rm <path>`. Do not commit
+until that status is empty.
+
+Encode both with the same `--width`, and read the same check frames in each:
+the beats should land within about 0.2 s of each other, which is what makes the
+two comparable.
+
+## Sharing
+
+`scripts/upload-attachment.sh <file> [--repo owner/name]` posts the file to GitHub's user-attachments store and prints an asset URL. The repository decides the audience: anyone who can read it can play the video, and nobody else can.
+
+That URL goes bare on a line of its own in the body text of a pull request, issue, or comment, where GitHub's front end turns it into a player. `<video>` markup is stripped by the sanitizer whatever the host, and only `github.com` and the `*-user-images.githubusercontent.com` hosts are allowed as media sources, so a raw or release-asset URL never plays.
+
+**Fetching the asset URL yourself answers 404.** The redirect is signed for a browser session, so a bare `curl` proves nothing. Confirm the upload by rendering the body that carries it:
+
+```sh
+gh api repos/<owner>/<repo>/pulls/<number> -H 'Accept: application/vnd.github.html+json' --jq .body_html | grep -c '<video'
+```
+
+For Slack or anywhere outside GitHub, send the file itself: the asset URL needs a GitHub session and will not preview.
diff --git a/.agents/skills/recording-petrinaut-demos/references/example.scenario.mjs b/.agents/skills/recording-petrinaut-demos/references/example.scenario.mjs
new file mode 100644
index 00000000000..d7727459f36
--- /dev/null
+++ b/.agents/skills/recording-petrinaut-demos/references/example.scenario.mjs
@@ -0,0 +1,215 @@
+// A worked scenario: the bottom toolbar keeping clear of the side panels.
+//
+// It exercises the three things most takes need — a click that opens a panel,
+// a drag with a held cursor shape, and a hover that reveals something — so it
+// is the file to copy when starting a new one.
+//
+// Storyboard (18 s):
+//   Context, ~7.4 s
+//     0.0  SIR net, toolbar centred on the canvas            hold 1.1
+//     1.1  pointer fades in, glides onto Susceptible         1.0
+//     2.1  click: properties panel opens, toolbar steps left hold 1.6
+//     3.7  pointer glides onto the panel's resize handle     0.9
+//     4.6  drag the panel wider, toolbar tracks the edge     2.8
+//   Motion, ~6.6 s
+//     7.4  toolbar collapses to cursor, status and Play      hold 1.6
+//     9.0  pointer leaves the handle                         0.7
+//     9.7  pointer glides onto the collapsed toolbar         0.9
+//    10.6  the hidden controls come back under the pointer   hold 1.7
+//    12.3  pointer leaves, the toolbar folds again           1.0
+//    13.3  hold the folded toolbar                           0.7
+//   Result, ~4.0 s
+//    13.6  click empty canvas: panel closes                  0.9
+//    14.5  toolbar expands and returns to centre             hold 0.8
+//    15.3  click the panel toggle                            0.6
+//    15.9  bottom panel slides up, toolbar rides with it     hold 2.1
+//
+// A glide costs about twice the duration it is given: every step is a mouse
+// move plus a page evaluate, and the round trips dominate the 22 ms step. The
+// durations below are halved for that, so the beats land where the storyboard
+// puts them.
+//
+// Run from the repository root, against the website dev server:
+//   node .agents/skills/recording-petrinaut-demos/scripts/record-demo.mjs \
+//     <this file> --out ./demo --base-url http://localhost:5173
+
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+
+const scripts = path.join(
+  process.cwd(),
+  ".agents/skills/recording-petrinaut-demos/scripts",
+);
+
+const { createDemoHud } = await import(
+  pathToFileURL(path.join(scripts, "demo-hud.mjs")).href
+);
+const { frameNet, nodeBox, selectNode } = await import(
+  pathToFileURL(path.join(scripts, "petrinaut-canvas.mjs")).href
+);
+const { sirModel } = await import(
+  pathToFileURL(
+    path.join(
+      process.cwd(),
+      "libs/@hashintel/petrinaut-core/dist/examples/index.js",
+    ),
+  ).href
+);
+
+export const url = "/";
+
+const pause = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const SIDEBAR_WIDTH = 240;
+/**
+ * How much wider the drag makes the properties panel. Enough to take the
+ * toolbar past the width it needs, not so much that the hover beat has it
+ * covering the viewport controls it normally keeps clear of.
+ */
+const DRAG_DISTANCE = 210;
+
+let hud;
+
+/** The toolbar's own box, and the gap between its two segments. */
+const barGeometry = (page) =>
+  page.evaluate(() => {
+    // Matched by the segment gap and by sitting at the bottom of the window,
+    // so the same take can be recorded against a build that predates the
+    // lane the bar now sits in.
+    const bar = [...document.querySelectorAll("div")].find(
+      (element) =>
+        typeof element.className === "string" &&
+        element.className.includes("gap_[20px]") &&
+        element.querySelector("button") !== null &&
+        element.getBoundingClientRect().bottom > window.innerHeight - 220,
+    );
+    const box = bar.getBoundingClientRect();
+    const segments = [...bar.children]
+      .map((child) => child.getBoundingClientRect())
+      .filter((rect) => rect.width > 0);
+    const first = segments[0];
+    const last = segments[segments.length - 1];
+    return {
+      left: Math.round(box.x),
+      right: Math.round(box.right),
+      width: Math.round(box.width),
+      // The gap between the segments belongs to the bar and holds no control,
+      // so hovering there expands it without raising a tooltip.
+      gapX: Math.round((first.right + last.x) / 2),
+      centreY: Math.round(box.y + box.height / 2),
+    };
+  });
+
+export const init = async (page) => {
+  await page.addInitScript(
+    ({ net, sidebarWidth }) => {
+      localStorage.setItem(
+        "petrinaut-sdcpn",
+        JSON.stringify({
+          "net-sir": {
+            id: "net-sir",
+            title: net.title,
+            sdcpn: net.petriNetDefinition,
+            lastUpdated: new Date().toISOString(),
+          },
+        }),
+      );
+      localStorage.setItem(
+        "petrinaut:user-settings",
+        JSON.stringify({
+          showWalkthroughOnInit: false,
+          isBottomPanelOpen: false,
+          useEntitiesTreeView: true,
+          compactNodes: true,
+          leftSidebarWidth: sidebarWidth,
+        }),
+      );
+    },
+    { net: sirModel, sidebarWidth: SIDEBAR_WIDTH },
+  );
+};
+
+export const prepare = async (page, log) => {
+  const skipTour = page.getByRole("button", { name: "Skip tour" });
+  await skipTour
+    .waitFor({ timeout: 15_000 })
+    .then(() => skipTour.click())
+    .catch(() => log("no tour"));
+  await page.keyboard.press("Escape");
+  await pause(400);
+
+  const viewport = page.viewportSize();
+  hud = createDemoHud(page, {
+    rest: { x: viewport.width - 150, y: viewport.height - 260 },
+  });
+  await hud.install();
+
+  await page.locator(".react-flow__node").first().waitFor({ timeout: 15_000 });
+  // The properties panel opens on the first click and the canvas never
+  // refits, so the frame holds back the width the panel will take.
+  await frameNet(page, {
+    viewport,
+    leftEdge: SIDEBAR_WIDTH,
+    rightReserve: 380,
+    log,
+  });
+  const box = await nodeBox(page);
+  log(`net spans ${box.left}..${box.right} of ${viewport.width}`);
+  log(`toolbar at rest: ${JSON.stringify(await barGeometry(page))}`);
+};
+
+export const take = async (page, log) => {
+  const viewport = page.viewportSize();
+  await pause(1100);
+
+  await hud.showPointer();
+  await selectNode(page, hud, "place__susceptible", 620);
+  log(`panel open, toolbar ${JSON.stringify(await barGeometry(page))}`);
+  await pause(1600);
+
+  // Widen the properties panel until the toolbar runs out of room.
+  const handle = page.getByRole("button", { name: "Resize panel from left" });
+  const handleBox = await handle.boundingBox();
+  await hud.glide(handleBox.x + handleBox.width / 2, handleBox.y + 260, 470);
+  // The handle asks for `ew-resize`, so the mirror shows the double arrow on
+  // arrival and holds it until the drag is released.
+  await hud.down();
+  await hud.glide(handleBox.x - DRAG_DISTANCE, handleBox.y + 260, 1450);
+  await hud.up();
+  const squeezed = await barGeometry(page);
+  log(`panel widened, toolbar ${JSON.stringify(squeezed)}`);
+  await pause(1600);
+
+  // Hover it: the hidden controls come back for as long as the pointer stays.
+  await hud.glide(squeezed.gapX + 160, squeezed.centreY - 150, 370);
+  await hud.glide(squeezed.gapX, squeezed.centreY, 470);
+  await pause(250);
+  // Expanding moves the segments out from under the pointer, and resting it on
+  // a button raises that button's tooltip over the toolbar.
+  const expanded = await barGeometry(page);
+  await hud.glide(expanded.gapX, expanded.centreY, 130);
+  log(`hovered, toolbar ${JSON.stringify(expanded)}`);
+  await pause(1300);
+
+  await hud.glide(squeezed.gapX - 120, squeezed.centreY - 190, 520);
+  log(`pointer away, toolbar ${JSON.stringify(await barGeometry(page))}`);
+  await pause(700);
+
+  // Deselect: the panel closes and the toolbar returns to the centre.
+  const box = await nodeBox(page);
+  const emptyY = Math.min(box.bottom + 70, squeezed.centreY - 90);
+  await hud.glide(SIDEBAR_WIDTH + 70, emptyY, 470);
+  await hud.click();
+  await pause(400);
+  log(`panel closed, toolbar ${JSON.stringify(await barGeometry(page))}`);
+  await pause(700);
+
+  // The bottom panel lifts the toolbar, which rides the panel's own slide.
+  await hud.glideTo(page.getByRole("button", { name: "Show panel" }), 250);
+  await hud.click();
+  await pause(250);
+  log(`bottom panel open, toolbar ${JSON.stringify(await barGeometry(page))}`);
+  await hud.toRest(250);
+  await hud.hidePointer();
+  await pause(1500);
+};
diff --git a/.agents/skills/recording-petrinaut-demos/references/petrinaut-setup.md b/.agents/skills/recording-petrinaut-demos/references/petrinaut-setup.md
new file mode 100644
index 00000000000..eef9d8499ce
--- /dev/null
+++ b/.agents/skills/recording-petrinaut-demos/references/petrinaut-setup.md
@@ -0,0 +1,116 @@
+# Recording the Petrinaut editor
+
+What a scenario has to do to put the editor in a filmable state, and the traps
+that waste takes.
+
+## Where to point the recorder
+
+| Target             | Command                                                                    | Port |
+| ------------------ | -------------------------------------------------------------------------- | ---- |
+| Website demo       | `yarn workspace @apps/petrinaut-website dev`                               | 5173 |
+| Storybook          | `yarn workspace @hashintel/petrinaut dev`                                  | 6006 |
+| A branch's preview | none — pass `--base-url https://petrinaut-git-<branch-slug>.stage.hash.ai` | —    |
+
+The website serves the library's built output, so **rebuild before recording**
+a change to it: `npx turbo run build --filter @hashintel/petrinaut`. A dev
+server started before that build serves the previous bundle and will hash-miss
+on reload; restart it after building.
+
+## Seeding the state
+
+Two `localStorage` keys, both read once at load, so `init` is the only place
+they can be set:
+
+```js
+export const init = async (page) => {
+  await page.addInitScript((net) => {
+    localStorage.setItem(
+      "petrinaut-sdcpn",
+      JSON.stringify({
+        "net-sir": {
+          id: "net-sir",
+          title: net.title,
+          sdcpn: net.petriNetDefinition,
+          lastUpdated: new Date().toISOString(),
+        },
+      }),
+    );
+    localStorage.setItem(
+      "petrinaut:user-settings",
+      JSON.stringify({
+        showWalkthroughOnInit: false,
+        isBottomPanelOpen: false,
+        // The house look for a Petrinaut demo.
+        useEntitiesTreeView: true,
+        compactNodes: true,
+        leftSidebarWidth: 240,
+      }),
+    );
+  }, sirModel);
+};
+```
+
+Models come from `libs/@hashintel/petrinaut-core/dist/examples` — build
+`petrinaut-core` first, or the import fails. A feature behind a flag needs that
+flag in the same settings object.
+
+`leftSidebarWidth: 240` matters: the editor's own default is 320, a quarter of
+a 1300px viewport, and the framing loses a zoom step to it.
+
+## Reaching a view
+
+Dismiss the tour, then switch modes. The segmented control ignores synthetic
+clicks, so dispatch the event:
+
+```js
+const skip = page.getByRole("button", { name: "Skip tour" });
+await skip
+  .waitFor({ timeout: 15_000 })
+  .then(() => skip.click())
+  .catch(() => log("no tour"));
+await page.getByRole("radio", { name: "simulate" }).dispatchEvent("click");
+```
+
+## Framing the canvas
+
+The editor fits the view once, on load, caps that fit at zoom 1.1, and never
+refits, so a net lands small in a wide viewport and there is no fit-view
+control. `scripts/petrinaut-canvas.mjs` solves for the largest zoom whose pan
+keeps the net inside the region the viewer can see:
+
+```js
+await frameNet(page, { viewport, leftEdge: 240, rightReserve: 380, log });
+```
+
+`rightReserve` holds back the width a panel will claim later in the take — the
+properties panel opens on the first selection and the canvas does not refit, so
+without it the nodes that panel covers leave the frame.
+
+## Clicking things on the canvas
+
+- **The left sidebar and the minimap swallow clicks** aimed at nodes under
+  them. `selectNode(page, hud, id)` asserts the node ended up selected, so a
+  swallowed click is an error rather than a take where nothing happens.
+- **Selecting through the sidebar list is more reliable** than the canvas when
+  the geometry does not matter: `page.getByRole("option", { name: "Susceptible" }).click()`.
+- **Compact nodes are 180x49 flow units**, and a model's stock coordinates were
+  placed for circles, so two pills can overlap and the click lands on whichever
+  is on top. Seed a layout with at least a 460 pitch across.
+- **Drag handlers register on mousedown**, so a synthetic drag must be
+  `mouse.down()` → wait → `mouse.move()` → `mouse.up()`, or through the
+  overlay's `hud.down()` / `hud.glide()` / `hud.up()`.
+- **Monaco takes no synthetic keystrokes.** Scenario parameters and code
+  editors are not drivable; change them by patching the seeded model.
+
+## Scaling a run to the budget
+
+The CPU pool takes about 4 s for 600 runs over a 180 s horizon, which fills a
+5 s motion act. The GPU is far faster, and its histogram tops out at 255 tokens
+per bin: a place value above that raises a red clamping toast that ruins the
+last frame, so lower the population rather than the run count. Check the final
+frame for a toast before sharing.
+
+WebGPU is off in headless Chromium; export
+`browserArgs = ["--enable-unsafe-webgpu", "--ignore-gpu-blocklist", "--use-angle=metal"]`
+from the scenario and probe `navigator.gpu.requestAdapter()` once before
+recording a GPU path.
diff --git a/.agents/skills/recording-petrinaut-demos/scripts/demo-hud.mjs b/.agents/skills/recording-petrinaut-demos/scripts/demo-hud.mjs
new file mode 100644
index 00000000000..1b81382d460
--- /dev/null
+++ b/.agents/skills/recording-petrinaut-demos/scripts/demo-hud.mjs
@@ -0,0 +1,668 @@
+// A head-up display for a demo take: the macOS pointer and a row of key caps,
+// drawn over the app so a viewer can follow the input.
+//
+// The layer is `position: fixed`, `pointer-events: none`, and at the top of the
+// stacking order, so it takes no layout space, never appears in hit testing,
+// and sits over any modal the app draws. React only manages its own root
+// container, so appending to the body does not disturb it.
+//
+// Playwright draws no cursor into a screencast, so the arrow is a mirror. Every
+// gesture drives the real input and the mirror from one call, so the mirror is
+// never at a different point from the real pointer, and hover states track the
+// glide rather than firing ahead of it.
+//
+// Usage from a scenario:
+//   import path from "node:path";
+//   import { pathToFileURL } from "node:url";
+//   const scripts = ".agents/skills/recording-petrinaut-demos/scripts";
+//   const { createDemoHud } = await import(
+//     pathToFileURL(path.join(process.cwd(), scripts, "demo-hud.mjs")).href
+//   );
+//
+//   let hud;
+//   export const prepare = async (page) => {
+//     const viewport = page.viewportSize();
+//     hud = createDemoHud(page, {
+//       rest: { x: viewport.width - 190, y: viewport.height - 120 },
+//     });
+//     await hud.install();          // the arrow starts hidden
+//   };
+//   export const take = async (page) => {
+//     await hud.press("Meta+k");    // caps: the modifier, then the key
+//     await hud.type("layout");     // no caps: the field shows the text
+//     await hud.press("Enter");
+//     await hud.showPointer();
+//     await hud.glideTo(page.getByRole("button", { name: "Run" }));
+//     await hud.click();
+//     await hud.down();            // drag: press, glide, release
+//     await hud.glide(x, y, 1400);
+//     await hud.up();
+//     await hud.hidePointer();
+//   };
+//
+// The shape follows the app: wherever the element under the pointer asks for
+// a horizontal resize cursor, the arrow becomes the system's double arrow,
+// and a `down` holds that shape until the matching `up`.
+
+const pause = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+/**
+ * Runs in the page. Self-contained on purpose: `page.evaluate` serializes the
+ * function, so it can close over nothing.
+ *
+ * The pointer is the macOS arrow, the two-path white-over-black shape the
+ * system draws, whose tip is at (10.01, 7.41) of its 32-unit box.
+ */
+const installHud = () => {
+  if (document.getElementById("__demo_hud")) {
+    return;
+  }
+
+  // A little over life size: at 1x the arrow reads small against an app
+  // recorded at 1300 CSS px and shown at 1600.
+  const SCALE = 1.25;
+  const BOX = 32 * SCALE;
+  // The resize cursor is drawn smaller than the arrow, the way the system's
+  // is: a double arrow reads at a glance and does not need the arrow's reach.
+  const RESIZE_BOX = 32 * SCALE * 0.78;
+  // The macOS arrow's tip within its 32-unit box, and the centre hotspot the
+  // resize cursor is drawn around.
+  const TIPS = {
+    arrow: { x: 10.01 * SCALE, y: 7.41 * SCALE },
+    resize: { x: RESIZE_BOX / 2, y: RESIZE_BOX / 2 },
+  };
+  const SYSTEM_FONT =
+    '-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif';
+
+  const root = document.createElement("div");
+  root.id = "__demo_hud";
+  root.setAttribute("aria-hidden", "true");
+  root.style.cssText = [
+    "position:fixed",
+    "inset:0",
+    "pointer-events:none",
+    "z-index:2147483647",
+  ].join(";");
+
+  // Two elements: the outer one carries the position, the inner one the
+  // appear, press and leave animations, so a transform never fights a move.
+  const pointer = document.createElement("div");
+  pointer.style.cssText = [
+    "position:absolute",
+    "left:0",
+    "top:0",
+    `width:${BOX}px`,
+    `height:${BOX}px`,
+    "transform:translate(-80px,-80px)",
+    "will-change:transform",
+  ].join(";");
+
+  const pointerBody = document.createElement("div");
+  pointerBody.style.cssText = [
+    `width:${BOX}px`,
+    `height:${BOX}px`,
+    // Scaled about the hotspot, so a press dips the cursor into the click.
+    `transform-origin:${TIPS.arrow.x}px ${TIPS.arrow.y}px`,
+    "transform:scale(0.6)",
+    "opacity:0",
+    "filter:drop-shadow(0 1px 1.5px rgba(0,0,0,0.32))",
+  ].join(";");
+  // Both shapes are drawn, and one is shown: switching display keeps the
+  // press and leave animations on the same element.
+  pointerBody.innerHTML = `
+    <svg data-shape="arrow" width="${BOX}" height="${BOX}" viewBox="0 0 32 32" style="display:block">
+      <g fill="none" fill-rule="evenodd" transform="translate(10 7)">
+        <path fill="#fff" d="m6.148 18.473 1.863-1.003 1.615-.839-2.568-4.816h4.332l-11.379-11.408v16.015l3.316-3.221z"/>
+        <path fill="#000" d="m6.431 17 1.765-.941-2.775-5.202h3.604l-8.025-8.043v11.188l2.53-2.442z"/>
+      </g>
+    </svg>
+    <svg data-shape="resize" width="${RESIZE_BOX}" height="${RESIZE_BOX}" viewBox="0 0 32 32" style="display:none">
+      <path
+        d="M4 16 10 11 10 14 22 14 22 11 28 16 22 21 22 18 10 18 10 21Z"
+        fill="#000" stroke="#fff" stroke-width="2.8" stroke-linejoin="round"
+        paint-order="stroke"
+      />
+    </svg>`;
+  pointer.append(pointerBody);
+
+  // A click is marked at the pointer, the way KeyCastr marks one, rather than
+  // in the caps.
+  const ripple = document.createElement("div");
+  ripple.style.cssText = [
+    "position:absolute",
+    "left:0",
+    "top:0",
+    `width:${34 * SCALE}px`,
+    `height:${34 * SCALE}px`,
+    `margin:${-17 * SCALE}px 0 0 ${-17 * SCALE}px`,
+    "border-radius:50%",
+    "border:2px solid rgba(28,32,40,0.55)",
+    "opacity:0",
+    "transform:translate(-80px,-80px) scale(0.4)",
+  ].join(";");
+
+  // Bottom left, inset from the edge: an app usually centres its own toolbar
+  // along the bottom and stacks controls on the right.
+  const capBar = document.createElement("div");
+  capBar.style.cssText = [
+    "position:absolute",
+    "left:32px",
+    "bottom:32px",
+    "display:flex",
+    "align-items:center",
+    "gap:9px",
+    "padding:14px 16px",
+    "border-radius:18px",
+    "background:rgba(24,26,32,0.82)",
+    "border:1px solid rgba(255,255,255,0.10)",
+    "box-shadow:0 10px 30px rgba(0,0,0,0.30)",
+    "backdrop-filter:blur(14px)",
+    "-webkit-backdrop-filter:blur(14px)",
+    "opacity:0",
+    "transform:translateY(8px)",
+    "transition:opacity 130ms ease,transform 130ms ease",
+  ].join(";");
+
+  // Same corner and the same visual family as the caps, and never shown with
+  // them: a location badge replaces the caps for a take about navigation,
+  // where the URL is the subject and the keystrokes are not.
+  const locationBar = document.createElement("div");
+  locationBar.style.cssText = [
+    "position:absolute",
+    "left:32px",
+    // Low in the corner. It carries a short label rather than the query
+    // string now, so it no longer reaches the centred bottom toolbar.
+    "bottom:44px",
+    "display:flex",
+    "align-items:center",
+    "gap:11px",
+    "padding:13px 22px",
+    "border-radius:999px",
+    "background:rgba(24,26,32,0.82)",
+    "border:1px solid rgba(255,255,255,0.10)",
+    "box-shadow:0 10px 30px rgba(0,0,0,0.30)",
+    "backdrop-filter:blur(14px)",
+    "-webkit-backdrop-filter:blur(14px)",
+    `font-family:${SYSTEM_FONT}`,
+    // No CSS transition here: each pop is a Web Animation with fill:both, and
+    // a transition on the same properties fights it.
+    "opacity:0",
+  ].join(";");
+
+  root.append(ripple, pointer, capBar, locationBar);
+  document.body.append(root);
+
+  let fadeTimer;
+  let position = { x: -80, y: -80 };
+
+  /** One key cap. A word key is wider than a single glyph. */
+  const cap = (label) => {
+    const element = document.createElement("span");
+    element.textContent = label;
+    const isWord = [...label].length > 1;
+    element.style.cssText = [
+      isWord ? "padding:0 15px" : "width:44px",
+      "height:44px",
+      "flex-shrink:0",
+      "display:inline-flex",
+      "align-items:center",
+      "justify-content:center",
+      "border-radius:10px",
+      "background:linear-gradient(#fdfdfe,#eceef3)",
+      "border:1px solid rgba(0,0,0,0.16)",
+      "box-shadow:0 3px 0 rgba(0,0,0,0.22),inset 0 1px 0 #fff",
+      `font-family:${SYSTEM_FONT}`,
+      "font-size:22px",
+      "font-weight:600",
+      "line-height:1",
+      "color:#15181f",
+      "letter-spacing:0.2px",
+    ].join(";");
+    return element;
+  };
+
+  const show = () => {
+    capBar.style.opacity = "1";
+    capBar.style.transform = "translateY(0)";
+    clearTimeout(fadeTimer);
+    fadeTimer = setTimeout(() => {
+      capBar.style.opacity = "0";
+      capBar.style.transform = "translateY(8px)";
+    }, 1200);
+  };
+
+  /**
+   * What the transition was, not where it went. A reviewer reads the address
+   * bar for the parameters; the badge only has to say that the route moved,
+   * and which way, in the browser's own vocabulary.
+   */
+  const MOVE_LABEL = {
+    back: "Back",
+    forward: "Forward",
+    new: "New location",
+  };
+
+  const label = (text) => {
+    const shown = document.createElement("span");
+    shown.textContent = text;
+    shown.style.cssText = [
+      "font-size:19px",
+      "font-weight:600",
+      "letter-spacing:0.2px",
+      "line-height:1",
+      "white-space:nowrap",
+      "color:#f6f7f9",
+    ].join(";");
+    return shown;
+  };
+
+  /** The direction glyph, bare inside the pill rather than in its own chip. */
+  const arrow = (glyph) => {
+    const shown = document.createElement("span");
+    shown.textContent = glyph;
+    shown.style.cssText = [
+      "flex-shrink:0",
+      "font-size:21px",
+      "font-weight:700",
+      "line-height:1",
+      "color:rgba(255,255,255,0.92)",
+    ].join(";");
+    return shown;
+  };
+
+  let locationOn = false;
+  let pendingMove = null;
+  let hideTimer;
+  let lastSearch = null;
+
+  /**
+   * The badge pops for the transition and leaves, travelling the way the router
+   * moved: a new location rises from the bottom and leaves through the top,
+   * forward crosses left to right, back crosses right to left. The arrow runs
+   * its own animation on top of that one, so the pill arrives and the arrow
+   * kicks the same way.
+   */
+  const popLocation = (move) => {
+    const kind = move ?? "new";
+    const glyph =
+      kind === "back" ? arrow("←") : kind === "forward" ? arrow("→") : null;
+    const text = label(MOVE_LABEL[kind]);
+    locationBar.replaceChildren(
+      ...(kind === "back"
+        ? [glyph, text]
+        : kind === "forward"
+          ? [text, glyph]
+          : [text]),
+    );
+
+    // The pill crosses the corner in the direction the router moved: forward
+    // left to right, back right to left, a new location bottom to top. Entry
+    // and exit are two halves of that one move, so it leaves by carrying on
+    // rather than retreating the way it came. The exit covers half the
+    // distance, which reads as a departure rather than a second arrival.
+    const enter =
+      kind === "back"
+        ? "translateX(18px)"
+        : kind === "forward"
+          ? "translateX(-18px)"
+          : "translateY(14px)";
+    const exit =
+      kind === "back"
+        ? "translateX(-9px)"
+        : kind === "forward"
+          ? "translateX(9px)"
+          : "translateY(-7px)";
+
+    locationBar.style.opacity = "1";
+    locationBar.animate(
+      [
+        { opacity: 0, transform: enter },
+        { opacity: 1, transform: "translate(0, 0)" },
+      ],
+      { duration: 180, easing: "cubic-bezier(0.2,0.9,0.25,1)", fill: "both" },
+    );
+
+    // Nested inside the pill, so this composes with the slide above instead of
+    // replacing it. It starts behind the pill's own travel direction and
+    // overshoots past its resting place, which reads as a flick rather than a
+    // slide, and pulls the same way the pill and the glyph both point.
+    if (glyph) {
+      const reach = kind === "back" ? -1 : 1;
+      glyph.animate(
+        [
+          { opacity: 0, transform: `translateX(${-7 * reach}px)` },
+          { opacity: 1, transform: `translateX(${3 * reach}px)`, offset: 0.7 },
+          { opacity: 1, transform: "translateX(0)" },
+        ],
+        {
+          duration: 340,
+          delay: 110,
+          easing: "cubic-bezier(0.2,0.9,0.25,1)",
+          fill: "both",
+        },
+      );
+    }
+
+    clearTimeout(hideTimer);
+    hideTimer = setTimeout(() => {
+      locationBar.animate(
+        [
+          { opacity: 1, transform: "translate(0, 0)" },
+          { opacity: 0, transform: exit },
+        ],
+        { duration: 160, easing: "ease-in", fill: "both" },
+      );
+    }, 900);
+  };
+
+  /** Pops whenever the URL changes, so the badge cannot claim a stale one. */
+  setInterval(() => {
+    if (!locationOn) {
+      return;
+    }
+    if (window.location.search !== lastSearch) {
+      lastSearch = window.location.search;
+      popLocation(pendingMove);
+      pendingMove = null;
+    }
+  }, 60);
+
+  let shape = "arrow";
+  let held = false;
+
+  /**
+   * The shape the app itself asks for at that point. Reading the computed
+   * cursor means the mirror cannot disagree with the real one, the way the
+   * key caps come from the chord actually pressed.
+   */
+  const shapeUnder = (x, y) => {
+    const element = document.elementFromPoint(x, y);
+    if (!element) {
+      return "arrow";
+    }
+    const cursor = window.getComputedStyle(element).cursor;
+    return /^(ew|col|e|w)-resize$/u.test(cursor) ? "resize" : "arrow";
+  };
+
+  const setShape = (next) => {
+    if (next === shape) {
+      return;
+    }
+    shape = next;
+    for (const svg of pointerBody.children) {
+      svg.style.display = svg.dataset.shape === next ? "block" : "none";
+    }
+    const tip = TIPS[next];
+    pointerBody.style.transformOrigin = `${tip.x}px ${tip.y}px`;
+  };
+
+  const place = () => {
+    const tip = TIPS[shape];
+    pointer.style.transform = `translate(${position.x - tip.x}px, ${position.y - tip.y}px)`;
+    ripple.style.transform = `translate(${position.x}px, ${position.y}px) scale(0.4)`;
+  };
+
+  window.__demoHud = {
+    /**
+     * Arms the badge rather than showing it. It stays hidden until the URL
+     * actually changes, then pops for that transition and leaves, so the take
+     * reads as a sequence of route changes and not a permanent status line.
+     */
+    location(on) {
+      locationOn = on;
+      lastSearch = window.location.search;
+      if (!on) {
+        locationBar.style.opacity = "0";
+      }
+    },
+    /** Tags the next pop with the history move about to produce it. */
+    history(move) {
+      pendingMove = move;
+    },
+    pointer(x, y) {
+      position = { x, y };
+      if (!held) {
+        setShape(shapeUnder(x, y));
+      }
+      place();
+    },
+    /**
+     * A press that starts a drag rather than ending in a click: the cursor
+     * dips but no ring is left behind, and the shape it had on the way down
+     * is held for the whole gesture. The element under the pointer stops
+     * being the handle as soon as the drag moves, so resolving per frame
+     * would flick the arrow back mid-resize.
+     */
+    grab() {
+      held = true;
+      pointerBody.animate(
+        [
+          { transform: "scale(1)" },
+          { transform: "scale(0.88)", offset: 0.4 },
+          { transform: "scale(1)" },
+        ],
+        { duration: 220, easing: "ease-out" },
+      );
+    },
+    release() {
+      held = false;
+      setShape(shapeUnder(position.x, position.y));
+      place();
+    },
+    /** Fades and scales the arrow in, so it arrives rather than blinking on. */
+    enter() {
+      pointerBody.animate(
+        [
+          { opacity: 0, transform: "scale(0.6)" },
+          { opacity: 1, transform: "scale(1.06)", offset: 0.72 },
+          { opacity: 1, transform: "scale(1)" },
+        ],
+        { duration: 340, easing: "cubic-bezier(0.2,0.9,0.25,1)", fill: "both" },
+      );
+    },
+    leave() {
+      pointerBody.animate(
+        [
+          { opacity: 1, transform: "scale(1)" },
+          { opacity: 0, transform: "scale(0.65)" },
+        ],
+        { duration: 260, easing: "ease-in", fill: "both" },
+      );
+    },
+    /** The arrow dips into the click, and a ring marks where it landed. */
+    press() {
+      pointerBody.animate(
+        [
+          { transform: "scale(1)" },
+          { transform: "scale(0.82)", offset: 0.35 },
+          { transform: "scale(1)" },
+        ],
+        { duration: 260, easing: "ease-out" },
+      );
+      const at = `translate(${position.x}px, ${position.y}px)`;
+      ripple.style.transform = `${at} scale(0.4)`;
+      ripple.animate(
+        [
+          { opacity: 0.9, transform: `${at} scale(0.4)` },
+          { opacity: 0, transform: `${at} scale(1.35)` },
+        ],
+        { duration: 440, easing: "ease-out" },
+      );
+    },
+    /**
+     * Named keys and modifier chords only; never the characters typed into a
+     * field. A chord arrives one cap at a time, so a call that extends what is
+     * already shown appends rather than rebuilding, and only the new cap pops.
+     */
+    caps(labels) {
+      const shown = [...capBar.children].map((child) => child.textContent);
+      const extends_ =
+        labels.length > shown.length &&
+        shown.every((label, index) => label === labels[index]);
+      const added = extends_
+        ? labels.slice(shown.length).map(cap)
+        : labels.map(cap);
+      if (extends_) {
+        capBar.append(...added);
+      } else {
+        capBar.replaceChildren(...added);
+      }
+      // Each cap rises into place, the way a key travels back up.
+      for (const element of added) {
+        element.animate(
+          [
+            { opacity: 0, transform: "translateY(9px)" },
+            { opacity: 1, transform: "translateY(0)" },
+          ],
+          { duration: 150, easing: "cubic-bezier(0.2,0.9,0.25,1)" },
+        );
+      }
+      show();
+    },
+  };
+};
+
+/**
+ * Apple's own keycap legends: the glyph for a modifier, the printed word for a
+ * named key. Derived from the chord actually pressed, so a cap can never
+ * disagree with the keystroke.
+ */
+const CAP_LEGENDS = {
+  meta: "⌘",
+  control: "⌃",
+  alt: "⌥",
+  shift: "⇧",
+  enter: "return",
+  escape: "esc",
+  tab: "tab",
+  backspace: "delete",
+  arrowup: "↑",
+  arrowdown: "↓",
+  arrowleft: "←",
+  arrowright: "→",
+};
+
+export const capLegends = (combo) =>
+  combo
+    .split("+")
+    .map(
+      (key) =>
+        CAP_LEGENDS[key.toLowerCase()] ??
+        (key.length === 1 ? key.toUpperCase() : key),
+    );
+
+const easeInOut = (t) =>
+  t < 0.5 ? 2 * t * t : 1 - ((-2 * t + 2) * (-2 * t + 2)) / 2;
+
+/**
+ * Drives the real input and its mirror together.
+ *
+ * `rest` is where the arrow waits; give it a point clear of the app's own
+ * controls. `chordStagger` is the gap between the caps of one chord, so a
+ * viewer reads the modifier before the key, the way it is actually held.
+ */
+export const createDemoHud = (page, { rest, chordStagger = 220 } = {}) => {
+  let cursor = { ...rest };
+
+  const mirror = (x, y) =>
+    page.evaluate(([px, py]) => window.__demoHud?.pointer(px, py), [x, y]);
+
+  const glide = async (x, y, ms = 620) => {
+    const steps = Math.max(2, Math.round(ms / 22));
+    const from = { ...cursor };
+    for (let step = 1; step <= steps; step += 1) {
+      const progress = easeInOut(step / steps);
+      const nextX = from.x + (x - from.x) * progress;
+      const nextY = from.y + (y - from.y) * progress;
+      await page.mouse.move(nextX, nextY);
+      await mirror(nextX, nextY);
+      await pause(ms / steps);
+    }
+    cursor = { x, y };
+  };
+
+  return {
+    /** Installed after the app has mounted, so nothing in its tree owns it. */
+    async install() {
+      await page.evaluate(installHud);
+      await mirror(rest.x, rest.y);
+      await page.mouse.move(rest.x, rest.y);
+    },
+    glide,
+    async glideTo(locator, ms) {
+      const box = await locator.boundingBox();
+      if (!box) {
+        throw new Error("cannot glide to a locator with no box");
+      }
+      await glide(box.x + box.width / 2, box.y + box.height / 2, ms);
+    },
+    async toRest(ms = 700) {
+      await glide(rest.x, rest.y, ms);
+    },
+    async click() {
+      await page.evaluate(() => window.__demoHud?.press());
+      await page.mouse.down();
+      await pause(90);
+      await page.mouse.up();
+    },
+    /**
+     * Press and release for a drag: `down`, then `glide` to drag, then `up`.
+     * The cursor holds the shape it had at the press, so a resize keeps its
+     * double arrow across the whole gesture.
+     */
+    async down() {
+      await page.evaluate(() => window.__demoHud?.grab());
+      await page.mouse.down();
+    },
+    async up() {
+      await page.mouse.up();
+      await page.evaluate(() => window.__demoHud?.release());
+    },
+    showPointer: () => page.evaluate(() => window.__demoHud?.enter()),
+    hidePointer: () => page.evaluate(() => window.__demoHud?.leave()),
+    /**
+     * Arms the location badge, for a take whose subject is the URL. It pops on
+     * each route change and leaves, so it shares the bottom-left corner with
+     * the caps without either one having to be cleared.
+     */
+    showLocation: () => page.evaluate(() => window.__demoHud?.location(true)),
+    hideLocation: () => page.evaluate(() => window.__demoHud?.location(false)),
+    /**
+     * Goes back or forward, tagging the pop with the direction it travelled.
+     * Driven through the History API rather than Playwright's navigation,
+     * because a router's entries are same-document and `goBack` resolves null
+     * on those.
+     */
+    async history(direction) {
+      await page.evaluate((move) => window.__demoHud?.history(move), direction);
+      await page.evaluate((move) => {
+        if (move === "back") {
+          window.history.back();
+        } else {
+          window.history.forward();
+        }
+      }, direction);
+    },
+    /** A chord or a named key: shown on the caps, one cap at a time. */
+    async press(combo) {
+      const legends = capLegends(combo);
+      for (let count = 1; count <= legends.length; count += 1) {
+        await page.evaluate(
+          (labels) => window.__demoHud?.caps(labels),
+          legends.slice(0, count),
+        );
+        if (count < legends.length) {
+          await pause(chordStagger);
+        }
+      }
+      await page.keyboard.press(combo);
+    },
+    /** Characters into a field: the field shows them, so the caps stay quiet. */
+    async type(text, perCharacter = 145) {
+      for (const character of text) {
+        await page.keyboard.type(character);
+        await pause(perCharacter);
+      }
+    },
+  };
+};
diff --git a/.agents/skills/recording-petrinaut-demos/scripts/make-demo.sh b/.agents/skills/recording-petrinaut-demos/scripts/make-demo.sh
new file mode 100755
index 00000000000..497c6e89509
--- /dev/null
+++ b/.agents/skills/recording-petrinaut-demos/scripts/make-demo.sh
@@ -0,0 +1,90 @@
+#!/usr/bin/env bash
+# Converts a recorded take into the standard demo video and extracts check frames.
+#
+# Usage: make-demo.sh <recording.json> <out.mp4|out.gif> [--fps <n>]
+#
+# Fixed output, 18 s at 1600x1000 (16:10):
+#   .mp4  H.264 High 4.1, yuv420p limited range, 30 fps, faststart, no audio.
+#         Plays inline on GitHub (PR bodies, comments) and Slack; the default.
+#   .gif  20 fps, per-GIF palette. Only when autoplay matters more than colour
+#         depth and size (README embeds); 3-6 MB is typical.
+#
+# --fps raises the frame rate for a take whose motion needs it (60 for pointer
+# glides and cursor animation). Every other demo keeps the default, so a raised
+# rate makes this one no longer frame-comparable with the rest of a stack.
+#
+# --width sets the output width and derives the height at 16:10. Pair it with
+# the recorder's --viewport-width: the viewport decides how large the UI reads
+# in the frame, this decides the file's resolution. A viewport of half the
+# output width gives a HiDPI file that maps 1:1 on a retina display, and no
+# rescale at all when it matches the deviceScaleFactor-2 capture.
+# Input is the timestamped frame list record-demo.mjs wrote. Check frames land
+# next to the output as <stem>--check-<t>.png. Publish the finished file with
+# publish-demo.sh, which names it after its PR in the stack's shared folder.
+set -euo pipefail
+
+recording="${1:?usage: make-demo.sh <recording.json> <out.mp4|out.gif> [--fps <n>] [--width <px>]}"
+out="${2:?usage: make-demo.sh <recording.json> <out.mp4|out.gif> [--fps <n>] [--width <px>]}"
+shift 2 || true
+
+fps_override=""
+width_override=""
+duration_override=""
+while [ $# -gt 0 ]; do
+  case "$1" in
+    --fps) fps_override="${2:?--fps needs a value}"; shift 2 ;;
+    --width) width_override="${2:?--width needs a value}"; shift 2 ;;
+    --duration) duration_override="${2:?--duration needs a value}"; shift 2 ;;
+    *) echo "unknown argument: $1" >&2; exit 2 ;;
+  esac
+done
+
+frames=$(python3 -c "import json,sys; print(json.load(open(sys.argv[1]))['framesList'])" "$recording")
+
+# Must match the recorder's --duration, or the encode cuts the take's tail.
+duration="${duration_override:-18}"
+width="${width_override:-1600}"
+# 16:10, rounded down to an even height: yuv420p subsamples by two, so an odd
+# dimension fails the encode outright.
+height=$(( width * 10 / 16 / 2 * 2 ))
+stem="${out%.*}"
+
+# H.264 levels cap the frame size, and 4.1 stops at 8192 macroblocks, which
+# 1600x1000 already fills. A HiDPI output needs the higher ceiling of 5.1.
+if [ "$width" -gt 1600 ]; then level=5.1; else level=4.1; fi
+
+case "$out" in
+  *.mp4)
+    fps="${fps_override:-30}"
+    ffmpeg -v error -y -f concat -safe 0 -i "$frames" -t "$duration" \
+      -vf "fps=${fps},scale=${width}:${height}:flags=lanczos:in_range=pc:out_range=tv,format=yuv420p" \
+      -color_range tv -c:v libx264 -preset slow -crf 18 -profile:v high -level "$level" \
+      -movflags +faststart -an "$out"
+    ;;
+  *.gif)
+    fps="${fps_override:-20}"
+    ffmpeg -v error -y -f concat -safe 0 -i "$frames" -t "$duration" \
+      -filter_complex "[0:v]fps=${fps},scale=${width}:${height}:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=192:stats_mode=diff[p];[s1][p]paletteuse=dither=bayer:bayer_scale=4:diff_mode=rectangle" \
+      "$out"
+    ;;
+  *)
+    echo "output must end in .mp4 or .gif" >&2
+    exit 2
+    ;;
+esac
+
+# Quarter points plus the last frame, so the checks scale with the duration.
+checkpoints=$(python3 -c "
+d = float('$duration')
+print(' '.join(f'{p:g}' for p in [0, round(d/3, 1), round(2*d/3, 1), round(d - 0.1, 1)]))
+")
+for t in $checkpoints; do
+  ffmpeg -v error -y -ss "$t" -i "$out" -frames:v 1 "${stem}--check-${t}.png"
+done
+
+echo "output: $out"
+echo "next: $(dirname "$0")/publish-demo.sh \"$out\" [--pr <number>]  (names it after the PR, into the stack's shared folder)"
+echo "size bytes: $(stat -f%z "$out" 2>/dev/null || stat -c%s "$out")"
+echo "stream: $(ffprobe -v error -select_streams v:0 -show_entries stream=codec_name,pix_fmt,width,height,r_frame_rate,nb_frames -of csv=p=0 "$out")"
+echo "duration: $(ffprobe -v error -show_entries format=duration -of csv=p=0 "$out")"
+echo "check frames: ${stem}--check-{$(echo "$checkpoints" | tr ' ' ',')}.png"
diff --git a/.agents/skills/recording-petrinaut-demos/scripts/petrinaut-canvas.mjs b/.agents/skills/recording-petrinaut-demos/scripts/petrinaut-canvas.mjs
new file mode 100644
index 00000000000..f004a726f65
--- /dev/null
+++ b/.agents/skills/recording-petrinaut-demos/scripts/petrinaut-canvas.mjs
@@ -0,0 +1,166 @@
+// Framing helpers for a take on the Petrinaut canvas.
+//
+// The editor fits the view once, on load, caps that fit at zoom 1.1, and never
+// refits. There is no fit-view control either: the viewport buttons are Zoom
+// in, Zoom out, Fullscreen, Lock view and Settings. The canvas pane also spans
+// the full window width while the left sidebar covers its left edge, so a
+// fitted net can sit partly behind the panel, and moving the seeded
+// coordinates does not help because the fit re-centres them.
+//
+// `frameNet` therefore measures and solves: the largest zoom whose pan puts
+// the net inside the region the viewer can actually see. Measured rather than
+// hardcoded, so a change to the model, the node size setting or the viewport
+// moves the numbers and not the framing.
+
+const pause = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+/** Screen box the canvas nodes currently occupy. */
+export const nodeBox = (page) =>
+  page.evaluate(() => {
+    const boxes = [...document.querySelectorAll(".react-flow__node")].map(
+      (node) => node.getBoundingClientRect(),
+    );
+    if (boxes.length === 0) {
+      throw new Error("no canvas nodes to measure");
+    }
+    return {
+      left: Math.round(Math.min(...boxes.map((box) => box.x))),
+      right: Math.round(Math.max(...boxes.map((box) => box.x + box.width))),
+      top: Math.round(Math.min(...boxes.map((box) => box.y))),
+      bottom: Math.round(Math.max(...boxes.map((box) => box.y + box.height))),
+    };
+  });
+
+const ZOOM_FACTOR = 1.2;
+
+/**
+ * Zooms and pans so the net fills the visible canvas.
+ *
+ * `leftEdge` is where the viewer can first see the canvas, which is the
+ * sidebar's width when one is open and zero otherwise. `rightReserve` is the
+ * width a panel will claim during the take. `paneTop` is the height of the
+ * chrome above it.
+ */
+export const frameNet = async (
+  page,
+  {
+    viewport,
+    leftEdge = 0,
+    rightReserve = 0,
+    paneTop = 64,
+    edge = 16,
+    maxSteps = 4,
+    log,
+  },
+) => {
+  const measured = await nodeBox(page);
+  const centreX = viewport.width / 2;
+  const centreY = paneTop + (viewport.height - paneTop) / 2;
+  const clamp = (value, low, high) => Math.min(Math.max(value, low), high);
+  /** The zoom buttons scale about the pane centre. */
+  const zoomed = (box, factor) => ({
+    left: centreX + (box.left - centreX) * factor,
+    right: centreX + (box.right - centreX) * factor,
+    top: centreY + (box.top - centreY) * factor,
+    bottom: centreY + (box.bottom - centreY) * factor,
+  });
+
+  // `rightReserve` holds back the width a panel will take once the take opens
+  // it. The properties panel appears on the first selection and the canvas
+  // does not refit, so without this the nodes it covers leave the frame.
+  const visible = {
+    left: leftEdge + edge,
+    right: viewport.width - rightReserve - edge,
+    top: paneTop + edge,
+    bottom: viewport.height - edge,
+  };
+
+  const planFor = (steps) => {
+    const box = zoomed(measured, ZOOM_FACTOR ** steps);
+    if (
+      box.right - box.left > visible.right - visible.left ||
+      box.bottom - box.top > visible.bottom - visible.top
+    ) {
+      return null;
+    }
+    return {
+      steps,
+      box,
+      panX: clamp(
+        (visible.left + visible.right) / 2 - (box.left + box.right) / 2,
+        visible.left - box.left,
+        visible.right - box.right,
+      ),
+      panY: clamp(
+        (visible.top + visible.bottom) / 2 - (box.top + box.bottom) / 2,
+        visible.top - box.top,
+        visible.bottom - box.bottom,
+      ),
+    };
+  };
+
+  // Largest zoom that fits, searching down through zoom-out steps as well: a
+  // net wider than the region left by the sidebar and a reserved panel has to
+  // shrink, not give up.
+  let plan = null;
+  for (let steps = maxSteps; steps >= -maxSteps; steps -= 1) {
+    plan = planFor(steps);
+    if (plan) {
+      break;
+    }
+  }
+  if (!plan) {
+    throw new Error("the net does not fit the visible canvas at any zoom");
+  }
+
+  const button = page.getByRole("button", {
+    name: plan.steps < 0 ? "Zoom out" : "Zoom in",
+  });
+  for (let step = 0; step < Math.abs(plan.steps); step += 1) {
+    await button.click();
+    await pause(350);
+  }
+
+  // Dragging empty canvas pans. Start above the net, which the fit leaves
+  // clear, and inside the visible region.
+  const from = { x: visible.left + 60, y: paneTop + 30 };
+  await page.mouse.move(from.x, from.y);
+  await page.mouse.down();
+  await page.mouse.move(from.x + plan.panX, from.y + plan.panY, { steps: 12 });
+  await page.mouse.up();
+  await pause(300);
+
+  const framed = await nodeBox(page);
+  log?.(
+    `zoomed x${plan.steps}, panned ${Math.round(plan.panX)},${Math.round(plan.panY)}; ` +
+      `net spans ${framed.left}..${framed.right} of ${viewport.width}, ` +
+      `${Math.round(((framed.right - framed.left) / viewport.width) * 100)}% of the width`,
+  );
+  return framed;
+};
+
+/**
+ * Clicks a node by its id, gliding the mirrored pointer onto it first, and
+ * checks the node ended up selected.
+ *
+ * The check matters: the minimap floats over the canvas's top-right corner and
+ * swallows a click aimed at a node underneath it, which looks like nothing
+ * happening rather than like an error. Compact nodes overlap at coordinates
+ * placed for circles, which does the same. Prefer nodes away from that corner.
+ */
+export const selectNode = async (page, hud, id, ms = 800) => {
+  const node = page.locator(`.react-flow__node[data-id="${id}"]`);
+  await node.waitFor({ timeout: 10_000 });
+  await hud.glideTo(node, ms);
+  await hud.click();
+  await pause(250);
+  const selected = await node.evaluate((element) =>
+    element.classList.contains("selected"),
+  );
+  if (!selected) {
+    throw new Error(
+      `clicking ${id} did not select it: something is drawn over it, ` +
+        "the minimap and overlapping nodes being the usual causes",
+    );
+  }
+};
diff --git a/.agents/skills/recording-petrinaut-demos/scripts/probe-cursor.mjs b/.agents/skills/recording-petrinaut-demos/scripts/probe-cursor.mjs
new file mode 100644
index 00000000000..2c130dbdf92
--- /dev/null
+++ b/.agents/skills/recording-petrinaut-demos/scripts/probe-cursor.mjs
@@ -0,0 +1,104 @@
+// Screenshots the two cursor shapes at retina scale, so their size can be
+// judged without recording a whole take.
+import { createRequire } from "node:module";
+import path from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+
+// Playwright and the example models come from the repository this runs in, so
+// the script works from any checkout. Run it from the repository root.
+const require = createRequire(path.join(process.cwd(), "package.json"));
+const playwright = await import(
+  pathToFileURL(require.resolve("playwright")).href
+);
+// Playwright ships CommonJS, so the named export only exists on `default`
+// under some resolvers.
+const chromium = playwright.chromium ?? playwright.default.chromium;
+const here = path.dirname(fileURLToPath(import.meta.url));
+const { createDemoHud } = await import(
+  pathToFileURL(path.join(here, "demo-hud.mjs")).href
+);
+const { sirModel } = await import(
+  pathToFileURL(
+    path.join(
+      process.cwd(),
+      "libs/@hashintel/petrinaut-core/dist/examples/index.js",
+    ),
+  ).href
+);
+
+const pause = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+const out = process.argv[2] ?? "./cursor-probe";
+
+const browser = await chromium.launch();
+const context = await browser.newContext({
+  viewport: { width: 1300, height: 812 },
+  deviceScaleFactor: 2,
+});
+const page = await context.newPage();
+await page.addInitScript((net) => {
+  localStorage.setItem(
+    "petrinaut-sdcpn",
+    JSON.stringify({
+      "net-sir": {
+        id: "net-sir",
+        title: net.title,
+        sdcpn: net.petriNetDefinition,
+        lastUpdated: new Date().toISOString(),
+      },
+    }),
+  );
+  localStorage.setItem(
+    "petrinaut:user-settings",
+    JSON.stringify({
+      showWalkthroughOnInit: false,
+      isBottomPanelOpen: false,
+      useEntitiesTreeView: true,
+      compactNodes: true,
+      leftSidebarWidth: 240,
+    }),
+  );
+}, sirModel);
+await page.goto("http://localhost:5173/");
+const skip = page.getByRole("button", { name: "Skip tour" });
+await skip
+  .waitFor({ timeout: 20_000 })
+  .then(() => skip.click())
+  .catch(() => {});
+await page.locator(".react-flow__node").first().waitFor({ timeout: 20_000 });
+await pause(500);
+
+const hud = createDemoHud(page, { rest: { x: 1150, y: 560 } });
+await hud.install();
+await hud.showPointer();
+
+await page.locator('.react-flow__node[data-id="place__susceptible"]').click();
+await pause(700);
+
+const handle = page.getByRole("button", { name: "Resize panel from left" });
+const box = await handle.boundingBox();
+await hud.glide(box.x + box.width / 2, box.y + 300, 200);
+await pause(250);
+await page.screenshot({
+  path: `${out}-resize-hover.png`,
+  clip: { x: box.x - 90, y: box.y + 210, width: 200, height: 170 },
+});
+
+await hud.down();
+await hud.glide(box.x - 120, box.y + 300, 300);
+await pause(200);
+await page.screenshot({
+  path: `${out}-resize-drag.png`,
+  clip: { x: box.x - 240, y: box.y + 210, width: 200, height: 170 },
+});
+await hud.up();
+
+// The arrow, for size comparison, parked over the canvas.
+await hud.glide(600, 400, 250);
+await pause(250);
+await page.screenshot({
+  path: `${out}-arrow.png`,
+  clip: { x: 520, y: 330, width: 200, height: 170 },
+});
+
+console.log("wrote", `${out}-{resize-hover,resize-drag,arrow}.png`);
+await browser.close();
diff --git a/.agents/skills/recording-petrinaut-demos/scripts/record-demo.mjs b/.agents/skills/recording-petrinaut-demos/scripts/record-demo.mjs
new file mode 100755
index 00000000000..e4702a4f677
--- /dev/null
+++ b/.agents/skills/recording-petrinaut-demos/scripts/record-demo.mjs
@@ -0,0 +1,203 @@
+#!/usr/bin/env node
+// Records a demo take at retina density and writes the frames of the 18 s
+// window as a timestamped image sequence for make-demo.sh.
+//
+// Usage: node record-demo.mjs <scenario.mjs> [--out <dir>] [--base-url <url>] [--viewport-width <css px>] [--browser-args <a,b,c>]
+//
+// --browser-args passes comma-separated Chromium flags to launch(); a scenario
+// may also export `browserArgs: string[]`. Headless Chromium exposes no WebGPU
+// adapter by default; "--enable-unsafe-webgpu,--ignore-gpu-blocklist,--use-angle=metal"
+// enables it on macOS.
+//
+// The scenario module exports:
+//   url          string          path or URL to open (relative to base URL)
+//   init?        (page) => void  before navigation: addInitScript for localStorage etc.
+//   prepare?     (page, log)     off camera: dismiss tours, warm runtimes, clean up
+//   take         (page, log)     the 18 s path; the harness marks its start
+//   holdSeconds? number          how long the take is recorded (default 21)
+//
+// Capture is a CDP screencast of a 16:10 viewport at deviceScaleFactor 2, so a
+// 1300 CSS px wide page arrives as 2600x1624 device pixels. Playwright's own
+// recordVideo cannot do this: it never upscales, and CSS zoom breaks its
+// actionability checks.
+//
+// Playwright is resolved from the current working directory's node_modules, so
+// run this from the repository root.
+
+import { mkdirSync, writeFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+
+const args = process.argv.slice(2);
+const scenarioArg = args.find((arg) => !arg.startsWith("--"));
+if (!scenarioArg) {
+  console.error(
+    "usage: record-demo.mjs <scenario.mjs> [--out <dir>] [--base-url <url>] [--viewport-width <css px>]",
+  );
+  process.exit(2);
+}
+const option = (name, fallback) => {
+  const index = args.indexOf(name);
+  return index === -1 ? fallback : args[index + 1];
+};
+const outDir = path.resolve(option("--out", "./demo"));
+const framesDir = path.join(outDir, "frames");
+const baseUrl = option(
+  "--base-url",
+  process.env.BASE_URL ?? "http://localhost:5173",
+);
+mkdirSync(framesDir, { recursive: true });
+
+const require = createRequire(path.join(process.cwd(), "package.json"));
+const playwright = await import(
+  pathToFileURL(require.resolve("playwright")).href
+);
+const chromium = playwright.chromium ?? playwright.default.chromium;
+const scenario = await import(pathToFileURL(path.resolve(scenarioArg)).href);
+
+const cssWidth = Number(option("--viewport-width", "1300"));
+const cssHeight = Math.round((cssWidth * 10) / 16 / 2) * 2;
+const viewport = { width: cssWidth, height: cssHeight };
+const capture = { width: cssWidth * 2, height: cssHeight * 2 };
+// The take's length. 18s is the house default; a path with more beats than that
+// can carry gets `--duration`, and the same number has to reach make-demo.sh or
+// the encode will cut the tail off.
+const demoSeconds = Number(option("--duration", "18"));
+const holdSeconds = scenario.holdSeconds ?? demoSeconds + 3;
+const startedAt = Date.now();
+// The format string stays constant and the elapsed time is an argument:
+// putting a computed value first would make `console.log` read it for format
+// specifiers.
+const log = (...parts) =>
+  console.log("[%ss]", ((Date.now() - startedAt) / 1000).toFixed(1), ...parts);
+const pause = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+log(
+  "viewport",
+  `${viewport.width}x${viewport.height}`,
+  "capture",
+  `${capture.width}x${capture.height}`,
+);
+const browserArgs = [
+  ...(scenario.browserArgs ?? []),
+  ...option("--browser-args", "")
+    .split(",")
+    .map((flag) => flag.trim())
+    .filter(Boolean),
+];
+if (browserArgs.length > 0) log("browser args", browserArgs.join(" "));
+const browser = await chromium.launch({ headless: true, args: browserArgs });
+const context = await browser.newContext({ viewport, deviceScaleFactor: 2 });
+const page = await context.newPage();
+
+const errors = [];
+page.on("console", (message) => {
+  if (message.type() === "error") errors.push(message.text());
+});
+page.on("pageerror", (error) => errors.push(`pageerror: ${error.message}`));
+
+// Screencast frames arrive only when the page changes; each carries the wall
+// clock at receipt so the GIF step can lay them out on a constant timeline.
+const frames = [];
+const cdp = await context.newCDPSession(page);
+cdp.on("Page.screencastFrame", ({ data, sessionId }) => {
+  const file = path.join(
+    framesDir,
+    `f${String(frames.length).padStart(6, "0")}.jpg`,
+  );
+  writeFileSync(file, Buffer.from(data, "base64"));
+  frames.push({ file, at: Date.now() });
+  cdp.send("Page.screencastFrameAck", { sessionId }).catch(() => undefined);
+});
+const startScreencast = () =>
+  cdp.send("Page.startScreencast", {
+    format: "jpeg",
+    quality: 95,
+    maxWidth: capture.width,
+    maxHeight: capture.height,
+    everyNthFrame: 1,
+  });
+
+await scenario.init?.(page);
+
+let takeStartedAt = 0;
+let takeEndedAt = 0;
+try {
+  await page.goto(new URL(scenario.url, baseUrl).href);
+  log("loaded", scenario.url);
+  await scenario.prepare?.(page, log);
+  await pause(600);
+
+  await startScreencast();
+  await pause(300);
+  takeStartedAt = Date.now();
+  log("TAKE START");
+  await scenario.take(page, (...parts) =>
+    log(`take ${((Date.now() - takeStartedAt) / 1000).toFixed(1)}s:`, ...parts),
+  );
+  while (Date.now() - takeStartedAt < holdSeconds * 1000) {
+    await pause(200);
+  }
+  takeEndedAt = Date.now();
+  log("TAKE END");
+} catch (error) {
+  log("FAILED:", error instanceof Error ? error.message : String(error));
+  const snapshot = await page
+    .locator("body")
+    .ariaSnapshot()
+    .catch(() => "no snapshot");
+  console.log(snapshot.slice(0, 4000));
+  process.exitCode = 1;
+}
+await cdp.send("Page.stopScreencast").catch(() => undefined);
+await context.close();
+await browser.close();
+
+// The concat list covers the take window: the frame on screen when the take
+// started, then every frame until the window ends, each shown until the next
+// one arrived.
+const windowEnd = takeStartedAt + demoSeconds * 1000;
+const inWindow = frames.filter((frame) => frame.at <= windowEnd);
+const firstIndex = Math.max(
+  0,
+  inWindow.findLastIndex((frame) => frame.at <= takeStartedAt),
+);
+const list = [];
+for (let index = firstIndex; index < inWindow.length; index += 1) {
+  const frame = inWindow[index];
+  const shownFrom = Math.max(frame.at, takeStartedAt);
+  const shownUntil =
+    index + 1 < inWindow.length ? inWindow[index + 1].at : windowEnd;
+  const duration = (shownUntil - shownFrom) / 1000;
+  if (duration <= 0) continue;
+  list.push(`file '${frame.file}'`, `duration ${duration.toFixed(3)}`);
+}
+if (inWindow.length > 0) {
+  list.push(`file '${inWindow[inWindow.length - 1].file}'`);
+}
+const framesList = path.join(outDir, "frames.txt");
+writeFileSync(framesList, list.join("\n") + "\n");
+
+const recording = {
+  framesList,
+  frameCount: frames.length,
+  takeFrameCount: Math.max(0, inWindow.length - firstIndex),
+  takeMs: takeEndedAt - takeStartedAt,
+  demoSeconds,
+  viewport,
+  capture,
+  errors,
+};
+writeFileSync(
+  path.join(outDir, "recording.json"),
+  JSON.stringify(recording, null, 2),
+);
+log(
+  "frames captured",
+  frames.length,
+  "in take window",
+  recording.takeFrameCount,
+);
+log("errors:", errors.length);
+for (const error of errors) log("  ", error.slice(0, 300));
diff --git a/.agents/skills/recording-petrinaut-demos/scripts/upload-attachment.sh b/.agents/skills/recording-petrinaut-demos/scripts/upload-attachment.sh
new file mode 100755
index 00000000000..4fd7d14bbc8
--- /dev/null
+++ b/.agents/skills/recording-petrinaut-demos/scripts/upload-attachment.sh
@@ -0,0 +1,60 @@
+#!/usr/bin/env bash
+# Uploads a finished demo to GitHub's user-attachments store and prints the
+# asset URL, so a video can go into a pull request, issue, or comment without
+# a browser drag-and-drop.
+#
+# Usage: upload-attachment.sh <file.mp4|file.gif|file.png> [--repo owner/name] [--name <asset name>]
+#
+# The repository decides who can see the asset: only people who can read that
+# repository can play it. Without --repo the current checkout's repository is
+# used. The printed URL belongs on a line of its own in the body text, where
+# GitHub's front end turns it into a player; markup around it is stripped.
+set -euo pipefail
+
+file="${1:?usage: upload-attachment.sh <file> [--repo owner/name] [--name <asset name>]}"
+shift
+repo=""
+name=""
+while [ $# -gt 0 ]; do
+  case "$1" in
+    --repo) repo="$2"; shift 2 ;;
+    --name) name="$2"; shift 2 ;;
+    *) echo "unknown argument: $1" >&2; exit 2 ;;
+  esac
+done
+
+[ -f "$file" ] || { echo "no such file: $file" >&2; exit 1; }
+[ -n "$repo" ] || repo=$(gh repo view --json nameWithOwner --jq .nameWithOwner)
+[ -n "$name" ] || name=$(basename "$file")
+
+case "${file##*.}" in
+  mp4) content_type="video/mp4" ;;
+  mov) content_type="video/quicktime" ;;
+  gif) content_type="image/gif" ;;
+  png) content_type="image/png" ;;
+  jpg|jpeg) content_type="image/jpeg" ;;
+  *) echo "unsupported extension: ${file##*.}" >&2; exit 2 ;;
+esac
+
+# The endpoint is undocumented but takes a plain token, and it wants the
+# repository's numeric id rather than its name.
+repository_id=$(gh api "repos/${repo}" --jq .id)
+response=$(curl -sS -X POST \
+  -H "Authorization: Bearer $(gh auth token)" \
+  -H "Accept: application/json" \
+  "https://uploads.github.com/user-attachments/assets?name=$(printf '%s' "$name" | sed 's/ /%20/g')&content_type=${content_type//\//%2F}&repository_id=${repository_id}" \
+  --data-binary "@${file}")
+
+url=$(printf '%s' "$response" | python3 -c 'import json,sys; print(json.load(sys.stdin).get("url",""))' 2>/dev/null || true)
+if [ -z "$url" ]; then
+  echo "upload failed: $response" >&2
+  exit 1
+fi
+
+echo "asset: $url"
+echo "size:  $(du -h "$file" | cut -f1) ($content_type)"
+echo
+echo "Put that URL bare on its own line in the body. Fetching it yourself"
+echo "answers 404 without a session, which is not a failed upload: confirm it"
+echo "by rendering the body that carries it, e.g."
+echo "  gh api repos/${repo}/pulls/<number> -H 'Accept: application/vnd.github.html+json' --jq .body_html | grep -c '<video'"
diff --git a/.claude/skills/skill-rules.json b/.claude/skills/skill-rules.json
index 7b5114a9578..8f93e30028c 100644
--- a/.claude/skills/skill-rules.json
+++ b/.claude/skills/skill-rules.json
@@ -214,6 +214,28 @@
       "blockMessage": "Skill is required to proceed",
       "skipConditions": {}
     },
+    "recording-petrinaut-demos": {
+      "type": "domain",
+      "enforcement": "suggest",
+      "priority": "medium",
+      "description": "Record a short screen capture of a Petrinaut flow and share it: the storyboard rules, the Playwright scenario format, the retina capture and H.264 encode, the pointer-and-keystroke overlay, and the GitHub API upload that turns the file into a link anyone on the repository can play. Use when a change needs a video or GIF of the UI, when asked for a screen recording, demo, capture or before/after pair, or when a screenshot cannot show the behaviour because it moves.",
+      "promptTriggers": {
+        "keywords": ["demo", "recording", "screencast", "video", "gif"],
+        "intentPatterns": [
+          "\\b(record|capture|film)\\b.*?\\b(demo|video|gif|flow|screen)\\b",
+          "\\b(demo|video|gif|screen recording)\\b.*?\\b(petrinaut|editor|ui)\\b",
+          "\\bbefore\\b.*?\\bafter\\b.*?\\b(video|recording|gif)\\b"
+        ]
+      },
+      "fileTriggers": {
+        "include": [],
+        "exclude": [],
+        "content": [],
+        "create-only": false
+      },
+      "blockMessage": "Skill is required to proceed",
+      "skipConditions": {}
+    },
     "rust-coding-style": {
       "type": "domain",
       "enforcement": "suggest",