playthrough 0.5.0 → 0.6.0

package/src/playthrough.js

@@ -1,23 +1,88 @@
 #!/usr/bin/env -S node --disable-warning=MODULE_TYPELESS_PACKAGE_JSON
-import { A as quote, C as inOrderJoined, D as roundInProgress, E as problemsFinishing, O as toAccountFor, S as conversation, T as notesToAnswer, g as readingsOn, j as time, k as list, p as firstLine, w as lastSeen, x as allNotes, y as Refused } from "./reporter-Dr7dWwSf.js";
-import { A as repo, O as setupIn, S as stopApp, T as giveBackLeft, _ as compareWithEarlier, a as failedAt, b as keepRunning, c as isFlow, d as runFlows, g as writtenNow, h as trySetup, i as called, j as pausedAt, k as copies, l as makeFlowsFolder, m as whereItStopped, o as flowsOf, p as walkFork, s as howToWriteFlows, t as ALONGSIDE, u as recorder, v as placeIn, x as serves, y as shownAt } from "./flows-DDB6AdQ-.js";
+import { A as quote, C as inOrderJoined, D as roundInProgress, E as problemsFinishing, O as toAccountFor, S as conversation, T as notesToAnswer, g as readingsOn, j as time, k as list, p as firstLine, w as lastSeen, x as allNotes, y as Refused } from "./reporter-DlS7qehW.js";
+import { A as setupIn, C as serves, D as giveBackLeft, F as pausedAt, M as repo, N as stillAt, P as thisCommand, S as keepRunning, _ as compareWithEarlier, a as failedAt, c as isFlow, d as runFlows, f as runFork, g as writtenNow, h as trySetup, i as called, j as copies, l as makeFlowsFolder, m as whereItStopped, o as flowsOf, s as howToWriteFlows, t as ALONGSIDE, u as recorder, v as firstShown, w as stopApp, x as shownAt, y as placeIn } from "./flows-CbrwgoHB.js";
 import { t as read } from "./read-Bg9XVTtn.js";
 import { copyFileSync, cpSync, existsSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 import { execFileSync } from "node:child_process";
 import { readFile, readdir, stat, writeFile } from "node:fs/promises";
 import { createHash, randomBytes } from "node:crypto";
-import { constants, networkInterfaces, tmpdir, uptime, userInfo } from "node:os";
+import { constants, networkInterfaces, tmpdir, userInfo } from "node:os";
 import { basename, dirname, extname, join, normalize, resolve, sep } from "node:path";
 import { connect } from "node:net";
 import { chromium, request } from "@playwright/test";
 import { fileURLToPath } from "node:url";
 import { createServer as createServer$1, request as request$1 } from "node:http";
 // src/node.ts
-const [major] = process.versions.node.split(".").map(Number);
-if (major < 24) {
-	console.error(`Playthrough needs Node 24 or later, and this is Node ${process.versions.node}. Install Node 24, then run this again.`);
+const [major, minor] = process.versions.node.split(".").map(Number);
+if (major < 22 || major === 22 && minor < 18) {
+	console.error(`Playthrough needs Node 22.18 or later, and this is Node ${process.versions.node}. Install Node 24, then run this again.`);
 	process.exit(1);
 }
+// ../page/src/scheme.ts
+function asRecorded(text, recorded) {
+	const answers = {
+		"prefers-color-scheme": recorded.dark ? "dark" : "light",
+		"prefers-reduced-motion": recorded.still ? "reduce" : "no-preference"
+	};
+	return String(text).replace(/\(\s*(prefers-color-scheme|prefers-reduced-motion)\s*(?::\s*([a-z-]+)\s*)?\)/gi, (_, feature, value) => {
+		feature = feature.toLowerCase();
+		return (value ? value.toLowerCase() === answers[feature] : feature === "prefers-color-scheme" || recorded.still) ? "(min-width: 0px)" : "(max-width: 0px)";
+	});
+}
+function answerAs(view, recorded) {
+	const page = view.document;
+	const as = (query) => asRecorded(query, recorded);
+	const matching = view.matchMedia;
+	view.matchMedia = (query) => matching.call(view, as(query));
+	const sheet = view.CSSStyleSheet.prototype;
+	for (const name of [
+		"insertRule",
+		"replace",
+		"replaceSync"
+	]) {
+		const real = sheet[name];
+		if (real) sheet[name] = function(text, ...rest) {
+			return real.call(this, as(text), ...rest);
+		};
+	}
+	const scheme = recorded.dark ? "dark" : "light";
+	const inScheme = (value) => /\blight\b/.test(value) && /\bdark\b/.test(value) ? scheme : value;
+	const rewrite = (rules) => {
+		for (const rule of rules) {
+			if (rule.media && as(rule.media.mediaText) !== rule.media.mediaText) rule.media.mediaText = as(rule.media.mediaText);
+			if (rule.style?.colorScheme && inScheme(rule.style.colorScheme) !== rule.style.colorScheme) rule.style.colorScheme = inScheme(rule.style.colorScheme);
+			if (rule.styleSheet) restyle(rule.styleSheet);
+			if (rule.cssRules) rewrite(rule.cssRules);
+		}
+	};
+	const restyle = (sheet) => {
+		try {
+			rewrite(sheet.cssRules);
+		} catch {}
+	};
+	const restyleAll = () => {
+		for (const sheet of page.styleSheets) restyle(sheet);
+		for (const sheet of page.adoptedStyleSheets ?? []) restyle(sheet);
+		for (const element of page.querySelectorAll("[media]")) {
+			const media = element.getAttribute("media");
+			if (as(media) !== media) element.setAttribute("media", as(media));
+		}
+		for (const meta of page.querySelectorAll("meta[name=\"color-scheme\"]")) {
+			const content = meta.getAttribute("content") ?? "";
+			if (inScheme(content) !== content) meta.setAttribute("content", inScheme(content));
+		}
+	};
+	const styling = (node) => /^(style|link|source|meta)$/i.test(node?.nodeName ?? "");
+	const bringsStyle = (node) => styling(node) || !!node.querySelector?.("style, link, source, meta");
+	new view.MutationObserver((changes) => changes.some((change) => styling(change.target) || styling(change.target.parentNode) || [...change.addedNodes].some(bringsStyle)) && restyleAll()).observe(page, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributeFilter: ["media", "content"]
+	});
+	page.addEventListener("load", (event) => styling(event.target) && restyleAll(), true);
+	restyleAll();
+}
 // src/before.ts
 function keepBefore(repo, id) {
 	if (!attempt(() => git(repo, ["rev-parse", "--is-inside-work-tree"]))) return void 0;
@@ -166,8 +231,7 @@ async function asItWas(repo, unrecorded, commit, shared, run) {
 	const aside = {
 		back: here(repo),
 		stash: `Playthrough: your work, set aside while flows record on Before, ${(/* @__PURE__ */ new Date()).toISOString()}`,
-		by: process.pid,
-		boot: boot(),
+		...thisCommand(),
 		...shared && { shared }
 	};
 	writeFileSync(repo.setAside, JSON.stringify(aside));
@@ -246,14 +310,6 @@ function refuseWhileAside(repo) {
 	if (aside && aside.by !== process.pid && stillAt(aside)) throw new Refused([`Another playthrough command (process ${aside.by}) is recording flows on Before just now, so the app as it was is in your work's place until it's done, in a minute or so. Try again then.`]);
 }
 const setAside = (repo) => attempt(() => JSON.parse(readFileSync(repo.setAside, "utf8")));
-const stillAt = (aside) => sameBoot(aside.boot) && running(aside.by);
-function boot() {
-	return attempt(() => readFileSync("/proc/sys/kernel/random/boot_id", "utf8").trim()) || Date.now() / 1e3 - uptime();
-}
-function sameBoot(then, now = boot()) {
-	if (typeof then === "number" && typeof now === "number") return Math.abs(then - now) < 300;
-	return then === void 0 || then === now;
-}
 function putWorkBack(repo, aside, force) {
 	try {
 		if (here(repo) !== aside.back) {
@@ -272,6 +328,7 @@ function putWorkBack(repo, aside, force) {
 				"--",
 				"playthrough"
 			]);
+			if (force) keepWhatChanged(repo);
 			git(repo, [
 				"checkout",
 				"--quiet",
@@ -292,6 +349,33 @@ function putWorkBack(repo, aside, force) {
 		return said(error);
 	}
 }
+function keepWhatChanged(repo) {
+	const changed = git(repo, [
+		"status",
+		"--porcelain",
+		"--untracked-files=all"
+	]).split("\n").filter(Boolean).map((line) => line.replace(/^\s*\S+\s+/, ""));
+	if (!changed.length) return;
+	const kept = `Playthrough: saved while flows recorded on Before, ${(/* @__PURE__ */ new Date()).toISOString()}`;
+	git(repo, [
+		"stash",
+		"push",
+		"--include-untracked",
+		"--quiet",
+		"--message",
+		kept
+	], {
+		...process.env,
+		...PLAYTHROUGH
+	});
+	const ref = git(repo, [
+		"stash",
+		"list",
+		"--format=%gd %gs"
+	]).split("\n").find((stash) => stash.endsWith(kept))?.split(" ")[0];
+	const files = changed.length > 3 ? `${changed.slice(0, 3).join(", ")} and ${changed.length - 3} more` : changed.join(", ");
+	console.log(`\nWhile flows recorded on Before, ${files} changed, in the app as it was. That's kept, not lost: git stash pop ${ref} puts it over your work, if it's something you saved.`);
+}
 function stillAside(repo, aside, problem) {
 	const stash = stashOf(repo, aside);
 	return new Refused([
@@ -324,13 +408,6 @@ async function caughtUp(url) {
 	await new Promise((done) => setTimeout(done, 1e3));
 	await fetch(url, { signal: AbortSignal.timeout(6e4) }).then((response) => response.body?.cancel(), () => {});
 }
-function running(pid) {
-	try {
-		return process.kill(pid, 0);
-	} catch (error) {
-		return error.code === "EPERM";
-	}
-}
 function git(repo, args, env) {
 	return execFileSync("git", [
 		"-c",
@@ -378,7 +455,7 @@ async function runTo(repo, id, to) {
 				order(one, resting);
 				const { handed, stopped, made } = await one.ran;
 				if (handed) {
-					if (one.passed.length > passed && !to.did?.length) timesOf(repo, id, one).handing.set(momentOf(to.step, to.actions), Date.now() - one.last.when);
+					if (one.passed.length > passed && !to.did?.length && !to.notes) timesOf(repo, id, one).handing.set(momentOf(to.step, to.actions), Date.now() - one.last.when);
 					return {
 						handed,
 						made
@@ -498,7 +575,7 @@ async function start$2(repo, id, to, files, written) {
 		borrowed: repo.borrowed,
 		arrived,
 		person: kept.use.person
-	}, kept.body, orders).catch((error) => ({ stopped: { why: firstLine(String(error?.message ?? error)) } }));
+	}, kept.body, orders, kept.forks).catch((error) => ({ stopped: { why: firstLine(String(error?.message ?? error)) } }));
 	one.ran.finally(() => (one.over = true, close()));
 	one.ran.then(({ handed, made }) => handed ? void 0 : made?.giveBack());
 	context.on("close", one.stop);
@@ -540,6 +617,7 @@ function loadedOf(repo, id, files, written) {
 	const kept = loaded.get(key(repo, id));
 	if (kept?.written === written) return kept.flows;
 	const load = (file, by) => by(file, written).catch((error) => {
+		if (error instanceof Refused) throw error;
 		throw new Refused([`${repo.show(file)} couldn't be loaded, because Node says “${firstLine(String(error?.message ?? error))}”, so no flow of ${id} can be taken over. Fix it, then take the flow over again.`]);
 	});
 	const flows = alongside().then(({ flowsIn }) => Promise.all([Promise.all(files.map((file) => load(file, flowsIn))), load(repo.setup, setupIn)])).then(([each, setup]) => {
@@ -585,7 +663,7 @@ async function takeOver$1(repo, id, flowName, stepName) {
 Ready in ${seconds}s. Carry on from there in your browser: ${here}${away.length ? `\nOr on your phone, on the same network: ${list(away)}` : ""}
 Each address hands over the same copy, and the app is passed on through Playthrough while this runs. Ctrl+C ends it.`);
 }
-async function getReady(repo, id, flowName, { step: stepName, actions, did, ahead, network } = {}) {
+async function getReady(repo, id, flowName, { step: stepName, actions, did, notes, ahead, network } = {}) {
 	const round = await recorded(repo, id);
 	const flow = round.flows.find((flow) => flow.name === flowName);
 	if (!flow) throw new Refused([`${id} has no flow called ${quote(flowName)}. Its flows: ${list(round.flows.map((flow) => quote(flow.name)))}.`]);
@@ -594,7 +672,7 @@ async function getReady(repo, id, flowName, { step: stepName, actions, did, ahea
 	if (outside) throw new Refused([`${quote(flow.name)} reaches outside the app (${outside}), so it's run only when it's taken over.`]);
 	const app = await repo.app();
 	refuseWhileAside(repo);
-	await keepRunning(app, repo.root);
+	await keepRunning(app, repo.root, { ready: true });
 	const began = Date.now();
 	const { handed, made } = await runTo(repo, id, {
 		flow: flow.name,
@@ -602,7 +680,8 @@ async function getReady(repo, id, flowName, { step: stepName, actions, did, ahea
 			step: stepName,
 			...actions && { actions }
 		},
-		...did?.length && { did }
+		...did?.length && { did },
+		...notes?.length && { notes }
 	});
 	if (!passings.has(app.url)) {
 		const moments = /* @__PURE__ */ new Map();
@@ -635,7 +714,7 @@ async function getReady(repo, id, flowName, { step: stepName, actions, did, ahea
 const ready = /* @__PURE__ */ new Map();
 async function keepUp(repo, id, flow, step, actions) {
 	refuseWhileAside(repo);
-	await keepRunning(await repo.app(), repo.root);
+	await keepRunning(await repo.app(), repo.root, { ready: true });
 	await follow(repo, id, {
 		flow,
 		...step && {
@@ -738,52 +817,11 @@ const SAYS = `<script>(() => {
     Object.assign(Shifted, { now: () => Real.now() + ahead, parse: Real.parse, UTC: Real.UTC });
     window.Date = Shifted;
   }
-  // In the browser the flow was recorded in, whatever yours says: light or dark, still or moving, in its languages. A
-  // page asks in its scripts and its styles, and each asking is answered before the app hears it.
+  // In the browser the flow was recorded in, whatever yours says: light or dark, still or moving, in its languages.
   const browser = JSON.parse(sessionStorage.getItem("playthrough:browser") || "null");
   if (browser) {
-    const recorded = { "prefers-color-scheme": browser.dark ? "dark" : "light", "prefers-reduced-motion": browser.still ? "reduce" : "no-preference" };
-    const as = (query) =>
-      String(query).replace(/\\(\\s*(prefers-color-scheme|prefers-reduced-motion)\\s*(?::\\s*([a-z-]+)\\s*)?\\)/gi, (_, feature, value) => {
-        feature = feature.toLowerCase();
-        const holds = value ? value.toLowerCase() === recorded[feature] : feature === "prefers-color-scheme" || browser.still;
-        return holds ? "(min-width: 0px)" : "(max-width: 0px)";
-      });
-    const matching = window.matchMedia;
-    window.matchMedia = (query) => matching.call(window, as(query));
-    for (const name of ["insertRule", "replace", "replaceSync"]) {
-      const real = CSSStyleSheet.prototype[name];
-      if (real) CSSStyleSheet.prototype[name] = function (text, ...rest) { return real.call(this, as(text), ...rest); };
-    }
-    // light-dark(), system colours, form controls and scrollbars follow the page's colour-scheme, not a media query.
-    const scheme = browser.dark ? "dark" : "light";
-    const inScheme = (value) => (/\\blight\\b/.test(value) && /\\bdark\\b/.test(value) ? scheme : value);
-    const rewrite = (rules) => {
-      for (const rule of rules) {
-        if (rule.media && as(rule.media.mediaText) !== rule.media.mediaText) rule.media.mediaText = as(rule.media.mediaText);
-        if (rule.style?.colorScheme && inScheme(rule.style.colorScheme) !== rule.style.colorScheme) rule.style.colorScheme = inScheme(rule.style.colorScheme);
-        if (rule.styleSheet) restyle(rule.styleSheet);
-        if (rule.cssRules) rewrite(rule.cssRules);
-      }
-    };
-    const restyle = (sheet) => { try { rewrite(sheet.cssRules); } catch {} };
-    const restyleAll = () => {
-      for (const sheet of document.styleSheets) restyle(sheet);
-      for (const sheet of document.adoptedStyleSheets ?? []) restyle(sheet);
-      for (const element of document.querySelectorAll("[media]")) {
-        const media = element.getAttribute("media");
-        if (as(media) !== media) element.setAttribute("media", as(media));
-      }
-      for (const meta of document.querySelectorAll('meta[name="color-scheme"]')) {
-        const content = meta.getAttribute("content") ?? "";
-        if (inScheme(content) !== content) meta.setAttribute("content", inScheme(content));
-      }
-    };
-    const styling = (node) => /^(style|link|source|meta)$/i.test(node?.nodeName);
-    const bringsStyle = (node) => styling(node) || !!node.querySelector?.("style, link, source, meta");
-    new MutationObserver((changes) => changes.some((change) => styling(change.target) || styling(change.target.parentNode) || [...change.addedNodes].some(bringsStyle)) && restyleAll())
-      .observe(document, { subtree: true, childList: true, characterData: true, attributeFilter: ["media", "content"] });
-    document.addEventListener("load", (event) => styling(event.target) && restyleAll(), true);
+    ${asRecorded.toString()}
+    (${answerAs.toString()})(window, browser);
     const languages = browser.languages;
     Object.defineProperty(navigator, "language", { get: () => languages[0] });
     Object.defineProperty(navigator, "languages", { get: () => languages });
@@ -822,6 +860,9 @@ const SAYS = `<script>(() => {
   const yours = (mine) => { hidden.disabled = mine; if (mine) sessionStorage.setItem("playthrough:yours", "1"); else sessionStorage.removeItem("playthrough:yours"); };
   yours(!!sessionStorage.getItem("playthrough:yours"));
   addEventListener("message", ({ source, data }) => { if (source === parent && data?.playthrough === "yours") yours(data.yours); });
+  // Taken over, the page is scrolled where the recording was at that moment: made ready at a step's end, it was where
+  // the step left it, a screen or more from a moment partway through a page being read.
+  addEventListener("message", ({ source, data }) => { if (source === parent && data?.playthrough === "scroll") scrollTo({ left: data.x, top: data.y, behavior: "instant" }); });
   const typing = (target) => !!target?.closest?.('input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=range]), textarea, [contenteditable=""], [contenteditable=true]');
   // Every move, as it comes: held for a frame, the name trailed the pointer like a smoothed one. Not the earlier raw
   // updates: in a scaled frame, Chrome gives them the page's position rather than the app's.
@@ -856,7 +897,8 @@ const SAYS = `<script>(() => {
     for (let at = target; at && at !== (pressed ?? document.body); at = at.parentElement) if (at.nodeType === 1 && words(at)) return at;
     return pressed ?? target;
   };
-  const words = (element) => (element.getAttribute?.("aria-label") || element.innerText || element.value || element.placeholder || "").trim().replace(/\\s+/g, " ").slice(0, 80);
+  // The words you saw on it, as you'd name it; its label only when it shows none, as an icon's.
+  const words = (element) => (element.innerText?.trim() || element.getAttribute?.("aria-label") || element.value || element.placeholder || "").trim().replace(/\\s+/g, " ").slice(0, 80);
   const roles = { A: "link", BUTTON: "button", SELECT: "combobox", TEXTAREA: "textbox", H1: "heading", H2: "heading", H3: "heading", H4: "heading", LI: "listitem", TD: "cell", TH: "columnheader", LABEL: "text", P: "text" };
   const role = (element) => element.getAttribute("role") || (element.tagName === "INPUT" ? (["checkbox", "radio"].includes(element.type) ? element.type : "textbox") : roles[element.tagName]) || "text";
   const path = (element) => {
@@ -927,11 +969,14 @@ const SAYS = `<script>(() => {
     e.stopImmediatePropagation();
     if (e.type === "pointerdown") {
       const on = thing(e.target);
-      const name = words(on);
       readNow();
       send();
       const node = window.rrwebRecord?.record?.mirror?.getId(on);
-      parent.postMessage({ playthrough: "noted", ...(name ? { element: { role: role(on), name, css: path(on), ...(node > 0 && { node }) } } : { point: { x: e.clientX / innerWidth, y: e.clientY / innerHeight } }), did, x: e.clientX, y: e.clientY }, "*");
+      // Named as the page is read for every flow, so a later round's flow finds it by the same name: a reminder's
+      // message box is "Message" there, where its own words named it here.
+      const known = node > 0 && recording ? read().things.find((thing) => thing.node === node) : undefined;
+      const [kind, name] = known ? [known.role, known.name] : [role(on), words(on)];
+      parent.postMessage({ playthrough: "noted", ...(name ? { element: { role: kind, name, css: path(on), ...(node > 0 && { node }) } } : { point: { x: e.clientX / innerWidth, y: e.clientY / innerHeight } }), did, x: e.clientX, y: e.clientY }, "*");
       noting = false;
       swallowing = true;
       ringed();
@@ -1040,7 +1085,9 @@ const SAYS = `<script>(() => {
       sampling: { mousemove: 20, scroll: 16, input: "all" },
       maskAllInputs: false,
       inlineStylesheet: true,
-    }) && ((recording = true), readNow());
+    }) && ((recording = true), said(), readNow());
+  // Light or dark, still or moving, as the flow was recorded, for your recording to be played back as it was too.
+  const said = () => window.rrwebRecord.record.addCustomEvent("browser", { dark: matchMedia("(prefers-color-scheme: dark)").matches, still: matchMedia("(prefers-reduced-motion: reduce)").matches });
   addEventListener("message", ({ source, data }) => source === parent && data?.playthrough === "yours" && record());
   const settle = async () => {
     await rested();
@@ -1590,6 +1637,11 @@ async function answer(app, page, you, request, response) {
 			"content-type": TYPES[extname(path)] ?? "application/octet-stream",
 			"cache-control": "max-age=31536000, immutable"
 		});
+		const as = new URL(request.url ?? "/", "http://localhost").searchParams.get("as");
+		if (as !== null && extname(path) === ".svg") return response.end(asRecorded(Buffer.from(bytes).toString("utf8"), {
+			dark: as.includes("dark"),
+			still: as.includes("still")
+		}));
 		return response.end(bytes);
 	}
 	if (request.method === "POST" && rest[0] === "video") return saveVideo(repo, id, request, response);
@@ -1626,11 +1678,12 @@ async function live(repo, id, request, response) {
 	response.end();
 }
 async function takeOver(repo, id, request, response) {
-	const { flow, step, actions, did, ahead } = await body(request);
+	const { flow, step, actions, did, notes, ahead } = await body(request);
 	const { port, moment } = await getReady(repo, id, flow, {
 		step,
 		actions,
 		did,
+		notes,
 		ahead
 	});
 	json(response, 200, {
@@ -1791,9 +1844,9 @@ const known = [
 function agent(written, shell = process.env) {
 	return known.find((agent) => agent.says.some((name) => shell[name]))?.name ?? written ?? "Agent";
 }
-// src/walk.ts
-const forkOf = (recording) => recording.match(/^(?:branches\/(.+)-\d+|walks\/(.+))\.json$/)?.slice(1).find(Boolean) ?? recording.replace(/\W+/g, "-");
-async function walkForks(repo, review, round, flows) {
+// src/forks.ts
+const forkOf = (recording) => recording.match(/^(?:branches\/(.+)-\d+|forks\/(.+))\.json$/)?.slice(1).find(Boolean) ?? recording.replace(/\W+/g, "-");
+async function runForks(repo, review, round, flows) {
 	const everyNote = allNotes(review);
 	const open = notesToAnswer(review, round).flatMap((id) => {
 		const kept = everyNote.get(id);
@@ -1803,103 +1856,123 @@ async function walkForks(repo, review, round, flows) {
 		}] : [];
 	});
 	const forks = Map.groupBy(open, ({ note }) => forkOf(note.on.app.recording));
-	const walked = [];
+	const ran = [];
 	for (const [fork, notes] of forks) {
 		const from = notes[0].note.on.app.from;
 		const then = review.rounds.find((kept) => kept.number === notes[0].round)?.flows.find((flow) => flow.name === from.flow);
 		const now = flows.find((flow) => flow.name === from.flow);
 		const paused = then && pausedAt(then, from.at);
-		const unwalked = (stopped) => notes.map(({ id }) => ({
+		const unrun = (failed) => notes.map(({ id }) => ({
 			note: id,
 			flow: from.flow,
-			reached: false,
-			stopped
+			found: false,
+			failed: { why: failed }
 		}));
 		if (!now || !paused) {
-			walked.push(...unwalked(`${quote(from.flow)} isn't in round ${round}`));
+			ran.push(...unrun(`${quote(from.flow)} isn't in round ${round}`));
 			continue;
 		}
-		const did = notes.map(({ note }) => note.on.app.did).reduce((longest, one) => one.length > longest.length ? one : longest);
-		console.log(`\nWalking ${quote(from.flow)} again, as ${list([...new Set(notes.map(({ note }) => quote(note.id)))])} left it in the app…`);
-		const run = await walkFork(repo, review.id, {
+		console.log(`\nRunning ${quote(from.flow)} to where ${list([...new Set(notes.map(({ note }) => quote(note.id)))])} took it over, then its fork…`);
+		const run = await runFork(repo, review.id, {
 			flow: from.flow,
 			step: paused.step,
 			actions: paused.actions,
-			did,
-			look: notes.map(({ note }) => ({
-				after: note.on.app.did.length,
-				css: note.on.element?.css
-			}))
+			notes: notes.map(({ id }) => id)
 		});
 		if (!run) {
-			walked.push(...unwalked(`${quote(from.flow)} doesn't get to where they took it over`));
+			ran.push(...unrun(`${quote(from.flow)} doesn't get to where they took it over, the step ${quote(paused.step)}`));
+			continue;
+		}
+		const step = paused.step;
+		if (!run.fork || run.failed) {
+			ran.push(...notes.map(({ id }) => ({
+				note: id,
+				flow: from.flow,
+				step,
+				found: false,
+				...run.fork && { fork: run.fork },
+				...run.failed && { failed: run.failed }
+			})));
 			continue;
 		}
-		const recording = `walks/${fork}.json`;
+		const recording = `forks/${fork}.json`;
 		const start = run.events[0].timestamp;
-		const length = run.stopped ? Math.round(((run.done.at(-1) ?? run.from) + .08) * 1e3) / 1e3 : Math.round(run.events.at(-1).timestamp - start) / 1e3;
+		const length = Math.round(run.events.at(-1).timestamp - start) / 1e3;
 		await repo.reviews.saveFile(review.id, round, recording, Buffer.from(JSON.stringify(run.events)));
 		await repo.reviews.saveFile(review.id, round, `readings/${recording}`, Buffer.from(JSON.stringify(run.readings)));
 		await repo.reviews.saveFile(review.id, round, `assets/${recording}`, Buffer.from(JSON.stringify(run.assets)));
 		for (const { name, bytes } of run.files) await repo.reviews.saveFile(review.id, round, name, bytes);
-		const app = {
-			from: {
-				flow: from.flow,
-				at: run.from
-			},
-			did: did.slice(0, run.done.length),
-			recording,
-			length
-		};
-		for (const [i, { id, note }] of notes.entries()) {
-			const steps = note.on.app.did.length;
-			const reached = run.done.length >= steps;
-			const at = (reached ? run.done[steps - 1] : run.done.at(-1)) ?? run.from;
-			const node = reached ? run.found[i] : null;
+		const picture = run.picture && await keepPicture(repo, review.id, round, `notes/${fork}-fork.png`, run.picture);
+		const seen = [...run.readings, ...run.glimpses].filter((glimpse) => glimpse.at >= run.from);
+		for (const { id, note } of notes) {
+			const app = {
+				from: {
+					flow: from.flow,
+					at: run.from
+				},
+				did: note.on.app.did,
+				recording,
+				length,
+				steps: run.steps
+			};
+			const shown = note.on.element && firstShown(note.on.element, seen);
 			const on = {
 				flow: from.flow,
-				at,
-				...node && note.on.element && { element: {
-					role: note.on.element.role,
-					name: note.on.element.name,
-					node
-				} },
+				at: shown ? shown.at : Math.max(run.from, length - .1),
+				...shown && { element: shown.element },
 				app
 			};
-			const picture = run.pictures[i] && await keepPicture(repo, review.id, round, `notes/${id}-walked.png`, run.pictures[i]);
-			walked.push({
+			ran.push({
 				note: id,
 				flow: from.flow,
+				step,
+				fork: run.fork,
 				on,
-				reached,
-				...!reached && { stopped: run.stopped ?? "" },
+				found: !!shown,
 				...picture && { picture }
 			});
 		}
 	}
-	return walked;
+	return ran;
 }
 async function keepPicture(repo, id, round, name, bytes) {
 	await repo.reviews.saveFile(id, round, name, bytes);
 	return repo.show(join(dirname(repo.round(id, round)), "files", name));
 }
-function saidOf(walked) {
-	const fork = `the steps note ${walked.note} was made after, on ${quote(walked.flow)}`;
-	if (walked.reached) return `Walked ${fork} again: they get to the note.${walked.picture ? ` As it is now: ${walked.picture}` : ""}`;
-	if (walked.on) return `Walked ${fork} again: they stop at ${quote(walked.stopped ?? "")}, which they can't do now, and the person sees that there. Fix what it's on, or say in your answer to note ${walked.note} why their steps changed.`;
-	return `Couldn't walk ${fork} again: ${walked.stopped}.`;
+function unfinished(ran) {
+	const unwritten = ran.filter((one) => !one.fork && one.step);
+	const lines = ran.filter((one) => one.fork && one.failed).map(({ note, fork, failed }) => `The fork ${quote(fork)} for note ${note} failed${failed.at ? ` at its step ${quote(failed.at)}` : ""}, where Playwright says “${failed.why}”. Fix it and record again.`);
+	for (const [flow, notes] of Map.groupBy(unwritten, (one) => one.flow)) {
+		const ids = notes.map((one) => one.note);
+		lines.push(`${ids.length > 1 ? `Notes ${list(ids)} were` : `Note ${ids[0]} was`} made in the app, and ${ids.length > 1 ? "have" : "has"} no fork yet. Write what the person did there as a fork of ${quote(flow)}, after it in its file, finding things by role and name as its steps do:
+
+  test.fork("<what they do there>", { notes: [${ids.map((id) => `"${id}"`).join(", ")}] }, async ({ page }) => {
+    await test.step("<a step of theirs>", async () => { … });
+  });
+
+It runs from where they took the flow over, in its step ${quote(notes[0].step)}, every round until the note is settled, and your answer goes on what the note is on, where the fork first shows it. Then record again.`);
+	}
+	return lines;
+}
+function saidOf(ran) {
+	if (!ran.fork) return `Couldn't run note ${ran.note}'s fork: ${ran.failed?.why}.`;
+	const noted = ran.on?.element ? `the ${ran.on.element.role} ${quote(ran.on.element.name)}` : "what it's on";
+	if (ran.found) return `Ran ${quote(ran.fork)}, note ${ran.note}'s fork: it shows ${noted}, and your answer is there.${ran.picture ? ` Where it ends: ${ran.picture}` : ""}`;
+	return `Ran ${quote(ran.fork)}, note ${ran.note}'s fork: it never shows what the note is on, so your answer is at its end.${ran.picture ? ` Where it ends: ${ran.picture}` : ""}`;
 }
-async function walk(repo, id) {
+async function forks(repo, id) {
 	const review = await repo.reviews.get(id);
-	if (review.accepted) throw new Refused(["This review is accepted, so there's nothing left to walk."]);
+	if (review.accepted) throw new Refused(["This review is accepted, so there's no fork left to run."]);
 	const number = roundInProgress(review);
 	const saved = review.rounds.find((round) => round.number === number);
-	const walked = await walkForks(repo, review, number, saved?.flows ?? review.rounds.findLast((round) => round.number > 0)?.flows ?? []);
-	if (!walked.length) return console.log(`Nothing to walk: round ${number} answers no note made in the app.`);
+	const ran = await runForks(repo, review, number, saved?.flows ?? review.rounds.findLast((round) => round.number > 0)?.flows ?? []);
+	if (!ran.length) return console.log(`Nothing to run: round ${number} answers no note made in the app.`);
+	const left = unfinished(ran);
+	if (left.length) throw new Refused(left);
 	const now = saved && (await repo.reviews.get(id)).rounds.find((round) => round.number === number);
 	if (now) {
 		const placed = (reply) => {
-			const on = walked.find((one) => one.note === reply.note)?.on;
+			const on = ran.find((one) => one.note === reply.note)?.on;
 			return on ? {
 				...reply,
 				on
@@ -1910,7 +1983,7 @@ async function walk(repo, id) {
 			replies: now.replies.map(placed)
 		});
 	}
-	console.log(`\n${walked.map(saidOf).join("\n")}`);
+	console.log(`\n${ran.map(saidOf).join("\n")}`);
 }
 // src/record.ts
 async function record(repo, id) {
@@ -1942,8 +2015,10 @@ async function record(repo, id) {
 		words: ""
 	}));
 	const by = agent(saved?.by);
-	const walked = await walkForks(repo, review, number, flows);
-	const replies = await Promise.all([...written, ...waiting].map((reply) => placed(repo, review, number, flows, reply, walked)));
+	const forked = await runForks(repo, review, number, flows);
+	const forkless = unfinished(forked);
+	if (forkless.length) throw new Refused([`\nRound ${number} wasn't recorded:`, ...forkless]);
+	const replies = await Promise.all([...written, ...waiting].map((reply) => placed(repo, review, number, flows, reply, forked)));
 	console.log(`\nComparing round ${number} with each round before it…`);
 	const comparisons = await compareWithEarlier(repo.reviews, id, number, flows);
 	await repo.reviews.saveRound(id, {
@@ -1978,7 +2053,7 @@ async function record(repo, id) {
 		console.log(`${parts} only ${look} different in the pictures, with nothing read there changed${pictured.length > 3 ? "" : `: ${list(pictured.map((change) => quote(change.words)))}`}. The person sees ${them} on the recording, and ${need} nothing from you, unless it's what you changed for a note: then say so in “accounts”, and it shows in your answer.`);
 	}
 	if (since && !since.changes.length && replies.some((reply) => reply.on && !reply.on.app && !reply.watch)) console.log(`Nothing at rest shows an answer that moves, like an animation: if yours does, add "watch": "<the title of the step it's seen in>" to its reply in ${file}, and the note plays that step.`);
-	if (walked.length) console.log(`\n${walked.map(saidOf).join("\n")}`);
+	if (forked.length) console.log(`\n${forked.map(saidOf).join("\n")}`);
 	if (left.length) console.log(`\nStill to do, in ${file}:\n${left.map((problem) => `  ${problem}`).join("\n")}`);
 	if (number === 1 && !saved && named.length) console.log(`\nSay why each change is there in “accounts”, by its id: { "line": "<why, in your words>" }, { "note": "<the id of the note it was made for>" }, or { "notReal": "<why nothing really changed>" }.`);
 	const wrote = number === 1 && !saved && recorded.find((kept) => kept.wrote);
@@ -1991,21 +2066,21 @@ ${quote(wrote.flow.name)} sends the app ${wrote.wrote}, which changes what it ho
 	if (by === "Agent") console.log(`\nPlaythrough can't tell which agent you are. Write your name in ${file} as “by”, and each of your answers shows it.`);
 	console.log(`\n${left.length ? "Then hand it over" : "Hand it over when it's ready"}, in the background, so you're told when the person's notes come: playthrough wait ${id}`);
 }
-async function placed(repo, review, number, flows, reply, walked) {
+async function placed(repo, review, number, flows, reply, forked) {
 	const answer = {
 		note: reply.note,
 		words: reply.words,
 		...reply.watch && { watch: reply.watch }
 	};
-	const seen = lastSeen(review, reply.note, number);
-	const walk = seen?.on.app && walked.find((one) => one.note === reply.note)?.on;
-	if (walk) return {
+	const fork = forked.find((one) => one.note === reply.note);
+	if (fork) return fork.on ? {
 		...answer,
-		on: walk
-	};
+		on: fork.on
+	} : answer;
+	const seen = lastSeen(review, reply.note, number);
 	const flow = seen && flows.find((flow) => flow.name === seen.on.flow);
 	const then = seen && review.rounds.find((round) => round.number === seen.round)?.flows.find((kept) => kept.name === seen.on.flow);
-	if (!seen || seen.on.app || !flow || !then) return answer;
+	if (!seen || !flow || !then) return answer;
 	const from = {
 		flow: then,
 		readings: await readingsOn(repo.reviews, review.id, seen.round, then)
@@ -2186,21 +2261,25 @@ async function wait(repo, id) {
 				return `    ${turn.agent ? `${turn.by === you ? "You" : turn.by}, in round ${turn.round}` : turn.verdict ? `${turn.by}, ${turn.verdict}` : turn.by}${turn.words.trim() ? `: ${turn.words}` : ""}`;
 			});
 			const picture = pictures.get(note);
-			console.log(`\n  ${note}  ${where(notes.get(note)?.note.on)}${picture ? `\n    As they saw it: ${picture}` : ""}\n${turns.join("\n")}`);
+			const kept = notes.get(note);
+			const from = kept?.note.on?.app && review.rounds.find((one) => one.number === kept.round)?.flows.find((flow) => flow.name === kept.note.on.app.from.flow);
+			console.log(`\n  ${note}  ${where(kept?.note.on, from)}${picture ? `\n    As they saw it: ${picture}` : ""}\n${turns.join("\n")}`);
 		}
-		if (asking.some((note) => notes.get(note)?.note.on?.app)) console.log(`\nWhat they did in the app is walked again on the new version when you record the round, and record says whether it still gets to their note. playthrough walk ${id} does that while you work.`);
+		if (asking.some((note) => notes.get(note)?.note.on?.app)) console.log(`\nWhat they did in the app is yours to write, as a fork of the flow they took over, in its file: test.fork("<what they do there>", { notes: ["<the note's id>"] }, async ({ page }) => { … }), with steps as a flow's. Record runs the flow to where they took it over, then the fork, every round until the note is settled, and puts your answer on what the note is on, where the fork first shows it. playthrough forks ${id} runs it while you work.`);
 		const first = pictures.size ? "Look at what each note is on, change" : "Change";
 		console.log(`\n${first} the app, then record round ${round}: playthrough record ${id}. Then answer each note in that round's round.json, under “replies”: record says where.`);
 		return console.log(`New to this review? Run playthrough alone for how Playthrough works. Its flows are in ${repo.show(repo.flows(id))}.`);
 	}
 }
-function where(place) {
+function where(place, from) {
 	if (!place) return "on the work in general";
 	const at = place.at === void 0 ? "" : ` at ${time(place.at)}${place.until === void 0 ? "" : ` to ${time(place.until)}`}`;
 	const on = place.element ? `, the ${place.element.role} “${place.element.name}”` : place.point ? `, ${share(place.point.x)} across and ${share(place.point.y)} down the screen` : place.box ? `, the part of the screen ${share(place.box.x)} across and ${share(place.box.y)} down` : "";
 	if (place.app) {
 		const did = place.app.did.length ? ` and carried on by hand (${list(place.app.did.map(done))})` : "";
-		return `on “${place.app.from.flow}”, in the app: they took the flow over at ${time(place.app.from.at)}${did}${on}`;
+		const paused = from && pausedAt(from, place.app.from.at);
+		const step = paused ? `, ${paused.actions ? `after ${paused.actions} of the actions in` : "at the end of"} its step “${paused.step}”` : "";
+		return `on “${place.app.from.flow}”, in the app: they took the flow over at ${time(place.app.from.at)}${step}${did}${on}`;
 	}
 	return `on “${place.flow}”${at}${on}`;
 }
@@ -2220,7 +2299,7 @@ const takes = {
 	start: [2, `playthrough start <review> "<title>" "<what was asked>"`],
 	record: [0, "playthrough record <review>"],
 	wait: [0, "playthrough wait <review>"],
-	walk: [0, "playthrough walk <review>"],
+	forks: [0, "playthrough forks <review>"],
 	open: [0, "playthrough open [<review>]"],
 	"take-over": [2, `playthrough take-over <review> "<flow>" ["<step>"]`]
 };
@@ -2237,7 +2316,7 @@ try {
 		else if (command === "start") await start(repo(), review, words[0], words[1]);
 		else if (command === "record") await record(repo(), review);
 		else if (command === "wait") await wait(repo(), review);
-		else if (command === "walk") await walk(repo(), review);
+		else if (command === "forks") await forks(repo(), review);
 		else if (command === "take-over") await takeOver$1(repo(), review, words[0], words[1]);
 	}
 } catch (error) {