playthrough 0.4.3 → 0.5.1

package/INSTRUCTIONS.md

@@ -22,7 +22,8 @@ THE LOOP
    does as far as the app as it was can, then compares the round with every round before it. In the round's round.json,
    say why each change since the round before is there, under "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>" }. What only the
-   pictures show is the person's to look at, and asks nothing of you, unless you made it for a note: then say so.
+   pictures show is the person's to look at, and asks nothing of you, unless you made it for a note: then say so. The
+   person sees what changed, marked where it is: a line says only why, in a short sentence.
 5. playthrough wait <review> hands the round over and waits for the notes, which can take hours: run it in the
    background, so you're told when it ends. Each note comes with a picture of what it's on, or what the person did in
    the app. Change the app, record the next round, and answer each note in its round.json, under "replies", in its
@@ -38,15 +39,24 @@ THE APP
 The first time, add playthrough to the app's devDependencies with the app's own package manager, and run
 npx playwright install chromium: flows import from it, and record in that browser.
 
-playthrough/app.json says how to start the app, and is committed so every review uses it:
+playthrough/app.json says how to start the app, and is committed so every review uses it. Where the command can be
+given a port, say {port} in both, and Playthrough starts this copy of the app on a port of its own each time it records
+or the person takes a flow over, beside the person's own and any other worktree's:
+
+  { "start": "npm run dev -- --port {port}", "url": "http://localhost:{port}" }
+
+Where it can't, as when another part of the app expects it at one address, give the address it always has:
 
   { "start": "npm run dev", "url": "http://localhost:3000" }
 
+There, every round is recorded on whatever serves that url, and Playthrough starts the app only when nothing does: leave
+a server you didn't start running, and let it follow the working copy, as a dev server does. In a worktree, what serves
+it could be another copy, so Playthrough needs the address free, and says so. An app of several servers, one calling
+another at its address, takes the address it always has, or a copy on a port of its own would call the person's.
+
 Flows run several at once. Where a page shows what every run made, as a blog's index lists every post, add
-"oneAtATime": true. Every round is recorded on whatever serves that url, and Playthrough starts the app only when nothing
-does: leave a server you didn't start running, and let it follow the working copy, as a dev server does. Recording on
-Before sets your work aside with git stash for a minute, puts the app as it was in its place, with playthrough/ as it is
-now, and puts your work back after, even when Playthrough is stopped.
+"oneAtATime": true. Recording on Before sets your work aside with git stash for a minute, puts the app as it was in its
+place, with playthrough/ as it is now, and puts your work back after, even when Playthrough is stopped.
 
 FLOWS
 
@@ -70,6 +80,12 @@ the page once it rests after each step. A dialog the browser shows is recorded,
 first: page.once("dialog", (dialog) => dialog.accept()). A flow that fails stops the round: record names it and the
 step, and keeps the page it failed on in .playthrough/<review>/failed/.
 
+Steps go where a person goes, by what the app had before your work too, never to what you changed: the app as it was
+doesn't have it, so Before stops short there and your change reads as new steps. Playthrough finds what changed, and
+shows each change when the recording first has it on the screen. A page people read, like a landing page or docs, is a
+flow of reading it, top to bottom: a step for each screen, scrolled with page.mouse.wheel(0, 600), which Playthrough scrolls as a person does, as
+many as the longer page needs.
+
 While the person watches, Playthrough runs the flow again in the background, so taking it over is quick. If its steps do
 something outside the app that mustn't happen again, like sending an email, say so, and it runs only when taken over:
 

package/README.md

@@ -4,8 +4,12 @@ The agent says it's done. You decide if it's good.
 
 Playthrough records your coding agent's change the way a person would use it, before and after, so you can watch it instead of setting it up by hand. Point at what's wrong, right on the recording, and the next round answers it there. Take over any moment and carry on in the real app. It runs on your machine, with any coding agent that has a shell.
 
+Many agents, one of you: each change arrives already recorded, and one page shows which ones need you. Any flow downloads as a video, for a pull request or a teammate. Keep your code review: it reads the code; Playthrough shows what the change does.
+
 To see a review before you install anything, play the one at [playthrough.sh](https://playthrough.sh).
 
+<a href="https://playthrough.sh"><img src="https://raw.githubusercontent.com/itmostlyworks/playthrough/main/docs/viewer-light.png" alt="The viewer: the agent's recording of Send a reminder, paused on your note and the agent's answer, asking whether it fixes it, with Note, Compare and Take over on the bar"></a>
+
 ## Try it
 
 Ask your agent for a change in your app, as you would anyway, and add:
@@ -20,9 +24,13 @@ npx playthrough open
 
 Reviews stay in `.playthrough/` in your app's repo, recordings and all; nothing is uploaded. Playthrough needs Node 24 or later.
 
-## On the example
+You can teach your agent Playthrough once, so “Show me this change” is enough from then on:
+
+```bash
+npx skills add itmostlyworks/playthrough
+```
 
-`example/` in this repo is a small invoices app to try it on before your own. Clone the repo, run `npm install`, `npx playwright install chromium` and `npm run build`, and from `example/`, ask your agent to show how much is overdue in total under the Invoices heading, and to show you the change with `npx playthrough`.
+In Claude Code, it's a plugin too: `/plugin install playthrough --marketplace itmostlyworks/playthrough`.
 
 ## How a review goes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playthrough",
-  "version": "0.4.3",
+  "version": "0.5.1",
   "description": "Review what your coding agent built in your web app by watching recordings of it.",
   "keywords": [
     "coding-agent",

package/src/{flows-BkG0TgHA.js → flows-vi0amwSo.js}

@@ -1,12 +1,13 @@
-import { A as list, b as Refused, g as readingsOf, j as quote, m as glimpsesOf, p as firstLine, x as Reviews } from "./reporter-DE8aueAO.js";
+import { A as quote, b as Reviews, h as readingsOf, k as list, m as glimpsesOf, p as firstLine, y as Refused } from "./reporter-S9fOk0za.js";
 import * as modules from "node:module";
 import { createRequire } from "node:module";
-import { existsSync, watch } from "node:fs";
-import { spawn } from "node:child_process";
+import { existsSync, readFileSync, watch, writeFileSync } from "node:fs";
+import { execFileSync, spawn } from "node:child_process";
 import { mkdir, mkdtemp, readFile, readdir, rename, rm, stat, writeFile } from "node:fs/promises";
 import { createHash, randomUUID } from "node:crypto";
-import { constants, tmpdir } from "node:os";
-import { dirname, join, relative } from "node:path";
+import { constants, tmpdir, uptime } from "node:os";
+import { dirname, join, relative, resolve } from "node:path";
+import { createServer } from "node:net";
 import { chromium, request } from "@playwright/test";
 import { fileURLToPath, pathToFileURL } from "node:url";
 // ../review/src/steps.ts
@@ -68,6 +69,30 @@ function pausedAt(flow, at) {
 		actions: 1
 	};
 }
+// src/command.ts
+const thisCommand = () => ({
+	by: process.pid,
+	boot: boot()
+});
+const stillAt = (command) => sameBoot(command.boot) && running(command.by);
+function boot() {
+	try {
+		return readFileSync("/proc/sys/kernel/random/boot_id", "utf8").trim();
+	} catch {
+		return 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 running(pid) {
+	try {
+		return process.kill(pid, 0);
+	} catch (error) {
+		return error.code === "EPERM";
+	}
+}
 // ../review/src/folder.ts
 const LOOK_EVERY = 2e3;
 function folder(root) {
@@ -82,7 +107,7 @@ function folder(root) {
 		},
 		async write(path, bytes) {
 			const file = join(root, path);
-			const unfinished = `${file}.${process.pid}.${Date.now()}.writing`;
+			const unfinished = `${file}.${randomUUID()}.writing`;
 			await mkdir(dirname(file), { recursive: true });
 			await writeFile(unfinished, bytes);
 			await rename(unfinished, file);
@@ -122,6 +147,7 @@ function repo(root = home(process.cwd())) {
 		round: (review, round) => join(reviews, review, "rounds", String(round), "round.json"),
 		ranOnBefore: (review) => join(reviews, review, "ran-on-before.json"),
 		setAside: join(reviews, "set-aside.json"),
+		turn: join(reviews, "turn.json"),
 		appFile,
 		setup: join(root, "playthrough", "setup.ts"),
 		borrowed: join(reviews, "borrowed"),
@@ -132,7 +158,7 @@ function repo(root = home(process.cwd())) {
 			await writeFile(join(reviews, ".gitignore"), "*\n");
 		},
 		async app() {
-			const how = `Say how to start the app in playthrough/app.json: { "start": "<the command that serves it>", "url": "<where it's served>" }.`;
+			const how = `Say how to start the app in playthrough/app.json: ${PORTED}, or with the address it always has where it can't be given a port.`;
 			const text = await readFile(appFile, "utf8").catch(() => void 0);
 			if (text === void 0) throw new Refused([`Playthrough needs to start the app to record it. ${how}`]);
 			let app;
@@ -141,12 +167,19 @@ function repo(root = home(process.cwd())) {
 			} catch (error) {
 				throw new Refused([`playthrough/app.json isn't JSON: ${error.message}. ${how}`]);
 			}
-			if (!isText(app.start) || !isText(app.url)) throw new Refused([`playthrough/app.json needs both “start” and “url”. ${how}`]);
+			if (!app || typeof app !== "object" || !isText(app.start) || !isText(app.url)) throw new Refused([`playthrough/app.json needs both “start” and “url”. ${how}`]);
+			const saying = [app.start, app.url].filter((said) => said.includes("{port}")).length;
+			if (saying === 1) throw new Refused([`playthrough/app.json says {port} in only one of “start” and “url”. Say it in both, so the app is started on the port Playthrough gives it and found there: ${PORTED}.`]);
+			const port = saying ? await portFor(root) : void 0;
+			const given = (said) => port === void 0 ? said : said.replaceAll("{port}", String(port));
+			const url = given(app.url);
+			if (!/^https?:$/.test(URL.parse(url)?.protocol ?? "")) throw new Refused([`playthrough/app.json's “url” is a whole address, as a browser takes it, like http://localhost:{port}, not “${app.url}”.`]);
 			if (app.oneAtATime !== void 0 && typeof app.oneAtATime !== "boolean") throw new Refused([`playthrough/app.json's “oneAtATime” is true or false: true runs each flow by itself.`]);
 			return {
-				start: app.start,
-				url: app.url,
-				...app.oneAtATime && { oneAtATime: true }
+				start: given(app.start),
+				url,
+				...app.oneAtATime && { oneAtATime: true },
+				...port !== void 0 && { port }
 			};
 		}
 	};
@@ -157,6 +190,35 @@ function home(here) {
 		if (existsSync(join(folder, ".git")) || dirname(folder) === folder) return here;
 	}
 }
+const PORTED = `{ "start": "npm run dev -- --port {port}", "url": "http://localhost:{port}" }`;
+const ports = /* @__PURE__ */ new Map();
+const portFor = (root) => ports.get(root) ?? ports.set(root, free()).get(root);
+const free = () => new Promise((resolve, reject) => {
+	const server = createServer();
+	server.once("error", reject);
+	server.listen(0, "127.0.0.1", () => {
+		const { port } = server.address();
+		server.close(() => resolve(port));
+	});
+});
+function copies(root) {
+	try {
+		const git = (...args) => execFileSync("git", args, {
+			cwd: root,
+			encoding: "utf8",
+			stdio: [
+				"ignore",
+				"pipe",
+				"ignore"
+			]
+		}).trim();
+		const inside = relative(git("rev-parse", "--show-toplevel"), root);
+		return git("worktree", "list", "--porcelain").split("\n").filter((line) => line.startsWith("worktree ")).map((line) => line.slice(9)).map((worktree) => resolve(worktree, inside)).filter((folder) => existsSync(folder));
+	} catch {
+		return [resolve(root)];
+	}
+}
+const inWorktree = (root) => copies(root)[0] !== resolve(root);
 const isText = (value) => typeof value === "string" && value.trim() !== "";
 // src/setup.ts
 const OURS = [
@@ -250,8 +312,9 @@ async function giveBackOf({ after }, borrowed, whose) {
 	for (const name of left) {
 		const file = join(borrowed, `${process.pid}-${name.slice(name.indexOf("-") + 1)}`);
 		if (!await rename(join(borrowed, name), file).then(() => true, () => false)) continue;
-		const { baseURL, setup } = JSON.parse(await readFile(file, "utf8"));
-		await giveBack(after, file, baseURL, setup);
+		const given = await readFile(file, "utf8").then(JSON.parse).catch(() => void 0);
+		if (!given) await rm(file, { force: true });
+		else await giveBack(after, file, given.baseURL, given.setup);
 	}
 }
 const giving = /* @__PURE__ */ new Set();
@@ -284,9 +347,9 @@ function alive(pid) {
 	}
 }
 // src/app.ts
-let started;
+const started = /* @__PURE__ */ new Map();
 let ending = false;
-async function keepRunning(app, root) {
+async function keepRunning(app, root, { ready = false } = {}) {
 	if (!ending) {
 		ending = true;
 		const { setup, borrowed } = repo(root);
@@ -297,12 +360,18 @@ async function keepRunning(app, root) {
 			"SIGTERM",
 			"SIGHUP"
 		]) process.once(signal, end);
-		process.once("exit", stop);
+		process.once("exit", () => [...started.keys()].forEach(stop));
+	}
+	await takeTurns(root, ready);
+	const ours = started.get(app.url);
+	if (ours && ours.root !== root) await stopApp(app.url);
+	if (await serves(app.url)) {
+		if (ours?.root === root || app.port !== void 0 || !inWorktree(root)) return;
+		throw new Refused([`Something else answers at ${app.url}, most likely the app running from another folder. This is a worktree, so Playthrough runs this copy of the app there itself: whoever started what's there can stop it, then try again.`, `Or give each copy a port of its own in playthrough/app.json: ${PORTED}.`]);
 	}
-	if (await serves(app.url)) return;
 	console.log(`Starting the app: ${app.start}`);
 	const began = Date.now();
-	started = spawn(app.start, {
+	const running = spawn(app.start, {
 		cwd: root,
 		shell: true,
 		stdio: [
@@ -312,17 +381,27 @@ async function keepRunning(app, root) {
 		],
 		detached: true
 	});
+	started.set(app.url, {
+		app: running,
+		root
+	});
+	if (ready) writeFileSync(repo(root).turn, JSON.stringify({
+		...thisCommand(),
+		ready,
+		app: running.pid,
+		url: app.url
+	}));
 	const said = [];
-	for (const output of [started.stdout, started.stderr]) {
+	for (const output of [running.stdout, running.stderr]) {
 		output.on("data", (chunk) => {
 			said.push(...chunk.toString().split("\n").filter((line) => line.trim() && !/^\s+at /.test(line)));
 			said.splice(0, said.length - 10);
 		});
 		output.unref();
 	}
-	started.unref();
+	running.unref();
 	let ended = false;
-	started.once("exit", () => ended = true);
+	running.once("exit", () => ended = true);
 	const saying = () => said.length ? ["It said, last:", ...said.map((line) => `  ${line}`)] : [];
 	while (Date.now() - began < 18e4) {
 		if (await serves(app.url)) return Date.now() - began;
@@ -333,24 +412,48 @@ async function keepRunning(app, root) {
 		]);
 		await new Promise((resolve) => setTimeout(resolve, 250));
 	}
-	stop();
+	stop(app.url);
 	throw new Refused([
 		`The app didn't answer at ${app.url} within three minutes of ${quote(app.start)}.`,
 		...saying(),
 		"Check that playthrough/app.json starts it there."
 	]);
 }
+async function takeTurns(root, ready) {
+	const here = repo(root);
+	let turn;
+	try {
+		turn = JSON.parse(readFileSync(here.turn, "utf8"));
+	} catch {}
+	const theirs = turn && turn.by !== process.pid && stillAt(turn) ? turn : void 0;
+	if (ready) {
+		if (theirs && !theirs.ready) throw new Refused([`Another playthrough command (process ${theirs.by}) runs the app just now, until it's done, in a minute or so. Try again then.`]);
+		return;
+	}
+	await here.keepOutOfGit();
+	writeFileSync(here.turn, JSON.stringify({
+		...thisCommand(),
+		ready
+	}));
+	if (!theirs?.ready) return;
+	try {
+		process.kill(-theirs.app);
+	} catch {}
+	const began = Date.now();
+	while (Date.now() - began < 1e4 && await serves(theirs.url)) await new Promise((resolve) => setTimeout(resolve, 250));
+}
 async function stopApp(url) {
-	if (!stop()) return;
+	if (!stop(url)) return;
 	const began = Date.now();
 	while (Date.now() - began < 1e4 && await serves(url)) await new Promise((resolve) => setTimeout(resolve, 250));
 }
-function stop() {
-	if (!started) return false;
+function stop(url) {
+	const ours = started.get(url);
+	if (!ours) return false;
 	try {
-		process.kill(-started.pid);
+		process.kill(-ours.app.pid);
 	} catch {}
-	started = void 0;
+	started.delete(url);
 	return true;
 }
 const serves = (url) => fetch(url, { signal: AbortSignal.timeout(2e3) }).then((response) => (response.body?.cancel(), true), (error) => error?.name === "TimeoutError");
@@ -435,6 +538,17 @@ function rewordedWords(a, b) {
 	};
 	return `“${part(a.words)}” now says “${part(b.words)}”`;
 }
+function rewordedPart(a, b) {
+	const letter = /[\p{L}\p{N}’']/u;
+	let start = 0;
+	while (start < a.length && start < b.length && a[start] === b[start]) start++;
+	let end = 0;
+	while (end < a.length - start && end < b.length - start && a.at(-1 - end) === b.at(-1 - end)) end++;
+	let to = b.length - end;
+	while (start > 0 && letter.test(b[start - 1]) && letter.test(b[start] ?? "")) start--;
+	while (to < b.length && to > 0 && letter.test(b[to - 1]) && letter.test(b[to])) to++;
+	return b.slice(start, to).trim() || void 0;
+}
 function lookWords(a, b) {
 	const parts = [];
 	if (a.look.background !== b.look.background) parts.push("background");
@@ -551,7 +665,7 @@ function differences(then, now) {
 			});
 			continue;
 		}
-		a = b.role !== "text" ? take((a) => a.role === b.role && (a.name === b.name || samePlace(a, b) || mostlyWhereItWas(a, b) || holdsTheSameWords(a, b) || CONTROL.test(b.role) && (!!bare(b.name) && bare(a.name) === bare(b.name) || overlap(a, b) > .5))) : take((a) => a.role === "text" && samePlace(a, b)) ?? (holderOf(now, b) && goneWords.get(holderKey(now, b)) === newWords.get(holderKey(now, b)) ? take((a) => a.role === "text" && holderKey(then, a) === holderKey(now, b)) : void 0) ?? take((a) => a.role === "text" && holderKey(then, a) === holderKey(now, b) && !!bare(b.words) && bare(a.words) === bare(b.words));
+		a = b.role !== "text" ? take((a) => a.role === b.role && (a.name === b.name || samePlace(a, b) || mostlyWhereItWas(a, b) || holdsTheSameWords(a, b) || CONTROL.test(b.role) && (!!bare(b.name) && bare(a.name) === bare(b.name) || overlap(a, b) > .5))) : take((a) => a.role === "text" && samePlace(a, b)) ?? (holderOf(now, b) && goneWords.get(holderKey(now, b)) === newWords.get(holderKey(now, b)) ? take((a) => a.role === "text" && holderKey(then, a) === holderKey(now, b)) : void 0) ?? take((a) => a.role === "text" && holderKey(then, a) === holderKey(now, b) && !!bare(b.words) && bare(a.words) === bare(b.words)) ?? take((a) => a.role === "text" && kept$1(a.words, b.words));
 		if (!a) {
 			found.push({
 				what: "new",
@@ -711,6 +825,14 @@ function gained(reading, control, was) {
 }
 const CONTROL = /^(button|link|textbox|searchbox|combobox|checkbox|radio|switch|slider|tab|menuitem|option)$/;
 const holdsControls = (reading, thing) => reading.things.some((inside) => parentOf(reading, inside) === thing && CONTROL.test(inside.role));
+function kept$1(a, b) {
+	if (a.length < 24 || a === b) return false;
+	let start = 0;
+	while (start < a.length && start < b.length && a[start] === b[start]) start++;
+	let end = 0;
+	while (end < a.length - start && end < b.length - start && a.at(-1 - end) === b.at(-1 - end)) end++;
+	return (start + end) / a.length >= 2 / 3;
+}
 const mostlyWhereItWas = (a, b) => HOLDS.test(b.role) && overlap(a, b) > .5;
 const holdsTheSameWords = (a, b) => /^(box|menu)$/.test(b.role) && !!a.wordsInside && bag(a) === bag(b);
 const bag = (thing) => (thing.wordsInside ?? "").split(" ").sort().join(" ");
@@ -829,7 +951,7 @@ function changesAt(then, now, unsteady = /* @__PURE__ */ new Set(), shown = {
 	const told = [
 		...items.reordered,
 		...reordered,
-		...swappedOrMoved(moment, loose),
+		...swappedOrMoved(moment, madeRoom(loose, others, caused, along)),
 		...causesOfShifts(moment, shifts, widened, others, caused, along)
 	];
 	for (const difference of others) if (!caused.has(difference)) told.push(tell(moment, difference, along.get(difference)));
@@ -1047,6 +1169,20 @@ function layoutShifts(moves, carried) {
 		loose: all.filter((shift) => counted(shift.moves) < MANY).flatMap((shift) => shift.moves)
 	};
 }
+function madeRoom(loose, others, caused, along) {
+	const candidates = others.filter((difference) => !caused.has(difference));
+	return loose.filter((move) => {
+		const by = movedBy(move);
+		if (!near(by.x, 0) || loose.some((other) => Math.sign(movedBy(other).y) === -Math.sign(by.y))) return true;
+		const cause = causeOf(spanOf([move.now]), {
+			vertical: true,
+			by: by.y,
+			moving: true
+		}, candidates);
+		if (cause) addAlong(along, cause, "pushed", [move.now], wayOf(0, by.y));
+		return !cause;
+	});
+}
 function swappedOrMoved(moment, loose) {
 	const told = [];
 	for (const [holder, moves] of groupBy(loose, (move) => holderOf(moment.now, move.now))) {
@@ -1246,6 +1382,7 @@ function tell(moment, difference, along = {}) {
 			thing: difference.now,
 			in: now,
 			words: rewordedWords(difference.then, difference.now),
+			reworded: rewordedPart(difference.then.words, difference.now.words),
 			...along
 		};
 		case "looks different": {
@@ -1305,7 +1442,11 @@ function said(told, moment, unsteady) {
 				words: alikeWords(alike),
 				...placeOf(alike[0], now),
 				...alikeOf(alike, now),
-				pieces: alike.flatMap(piecesOf)
+				pieces: alike.flatMap(piecesOf),
+				...alike[0].reworded && { reworded: alike[0].reworded },
+				...alike[0].in !== now && { gone: true },
+				...offScreen(alike),
+				top: topOf(alike[0], now)
 			});
 			continue;
 		}
@@ -1321,11 +1462,15 @@ function said(told, moment, unsteady) {
 			id: id(changed),
 			words: sentence(words),
 			...placeOf(changed, now),
-			pieces: all.flat().flatMap(piecesOf)
+			pieces: all.flat().flatMap(piecesOf),
+			...offScreen(all.flat()),
+			top: topOf(changed, now)
 		});
 	}
 	return found;
 }
+const topOf = (told, now) => told.in === now ? told.thing.box.y / now.screen.height : 2;
+const offScreen = (told) => told.some((one) => onScreen(one.thing.box, one.in.screen)) ? {} : { offScreen: true };
 function identityOf({ in: reading, thing, what }, moment) {
 	const item = thing.item === void 0 ? void 0 : reading.items?.[thing.item];
 	if (!item) return identity(reading, thing);
@@ -1411,6 +1556,7 @@ function asItems(told, moment, id) {
 			...whole,
 			what: "reworded",
 			words: reworded,
+			reworded: rewordedPart(before.words, item.words),
 			pieces: words.flatMap((one) => one.pieces ?? [id(one)]),
 			key: `${item.role} of ${listOf(now, item)}: ${shapeOf(before.words, item.words)}`
 		}, ...all.filter((one) => one.thing.role !== "text"));
@@ -1576,7 +1722,8 @@ async function picturesAt(page, then, now, pictures) {
 			id,
 			words: sentence(words),
 			...box && { box },
-			pieces: [here ? `${HERE}${id}` : id]
+			pieces: [here ? `${HERE}${id}` : id],
+			top: patch.y / now.screen.height
 		};
 	});
 }
@@ -1827,7 +1974,7 @@ function unsteadyIn(flows) {
 async function comparing(page, earlier, round, unsteady = () => /* @__PURE__ */ new Set()) {
 	const changes = /* @__PURE__ */ new Map();
 	const pieces = /* @__PURE__ */ new Map();
-	const see = ({ id, words, place, of = [id], pictureOnly }) => {
+	const see = ({ id, words, place, of = [id], reworded, gone, pictureOnly }) => {
 		if (unsteady(place.flow).has(id)) return;
 		const change = changes.get(id);
 		for (const piece of of) (pieces.get(id) ?? pieces.set(id, /* @__PURE__ */ new Set()).get(id)).add(piece);
@@ -1835,6 +1982,8 @@ async function comparing(page, earlier, round, unsteady = () => /* @__PURE__ */
 			id,
 			words,
 			seen: [place],
+			...reworded && { reworded },
+			...gone && { gone },
 			...pictureOnly && { pictureOnly }
 		});
 		else {
@@ -1879,7 +2028,7 @@ async function compareFlow(page, earlier, before, round, flow, unsteady) {
 			now: around(glimpsed.now, flow, reading.step)
 		};
 		const pictured = await picturesAt(page, was, reading, pictures);
-		for (const found of [...changesAt(was, reading, unsteady, shown), ...pictured]) {
+		for (const found of [...changesAt(was, reading, unsteady, shown), ...pictured].sort((a, b) => (a.top ?? 0) - (b.top ?? 0))) {
 			const on = found.element ? {
 				element: found.element,
 				...found.alike && { alike: found.alike }
@@ -1893,11 +2042,14 @@ async function compareFlow(page, earlier, before, round, flow, unsteady) {
 					...on
 				},
 				of: found.pieces,
-				...pictured.includes(found) && { pictureOnly: true }
+				...found.reworded && { reworded: found.reworded },
+				...found.gone && { gone: true },
+				...pictured.includes(found) && { pictureOnly: true },
+				...found.offScreen && { offScreen: true }
 			});
 		}
 	}
-	return sightings.sort((a, b) => (a.place.at ?? 0) - (b.place.at ?? 0));
+	return sightings.sort((a, b) => Number(!!a.offScreen) - Number(!!b.offScreen) || (a.place.at ?? 0) - (b.place.at ?? 0));
 }
 function around(glimpses, flow, step) {
 	const next = flow.steps[flow.steps.findIndex((kept) => kept.title === step) + 1]?.title;
@@ -1962,7 +2114,7 @@ async function trySetup(repo, again) {
 	const app = await repo.app();
 	const written = await writtenNow(repo);
 	const last = join(repo.tried, "tried.json");
-	if (await readFile(last, "utf8").then((text) => JSON.parse(text).written, () => void 0) === written) return;
+	if (await readFile(last, "utf8").then((text) => JSON.parse(text).written).catch(() => void 0) === written) return;
 	console.log("Trying the app's setup by itself first, twice, as every flow will start…");
 	const browser = await chromium.launch().catch((error) => {
 		const { version } = createRequire(import.meta.url)("@playwright/test/package.json");
@@ -2075,6 +2227,7 @@ async function writtenNow(repo) {
 	return createHash("sha256").update(await text(repo.appFile)).update("\0").update(await text(repo.setup)).digest("hex");
 }
 // src/flows.ts
+const recorder = join(dirname(createRequire(import.meta.url).resolve("@rrweb/record")), "record.umd.min.cjs");
 const WALKED = "walked.json";
 const ALONGSIDE = Symbol.for("playthrough: flows taken over here");
 const REACHES_OUTSIDE = "reaches outside";
@@ -2117,7 +2270,6 @@ async function runFlows(repo, id, round, { before, first = () => false }) {
 	const app = await repo.app();
 	if (!before) await trySetup(repo, `playthrough record ${id}`);
 	const { started, rounds } = await repo.reviews.get(id);
-	const recorder = join(dirname(createRequire(import.meta.url).resolve("@rrweb/record")), "record.umd.min.cjs");
 	const longest = (rounds.filter((kept) => kept.number < round).at(-1)?.flows ?? []).toSorted((a, b) => b.length - a.length).map((flow) => flow.name);
 	const run = (only, results) => runOnce({
 		flows,
@@ -2198,7 +2350,7 @@ async function keepFailed(repo, id, failed) {
 	await mkdir(folder, { recursive: true });
 	await writeFile(join(folder, FAILED), JSON.stringify(failed.map(({ flow }) => flow)));
 }
-const failedLastTime = (repo, id) => readFile(join(repo.failed(id), FAILED), "utf8").then(JSON.parse, () => []);
+const failedLastTime = (repo, id) => readFile(join(repo.failed(id), FAILED), "utf8").then(JSON.parse).catch(() => []);
 const FAILED = "flows.json";
 const whereItStopped = (repo, id, failed) => `What the page held where ${failed.length > 1 ? "each" : "it"} stopped is in ${repo.show(repo.failed(id))}/.`;
 function inMemory(number, recorded) {
@@ -2249,7 +2401,6 @@ async function runOnce(run) {
 async function walkFork(repo, id, walk) {
 	const app = await repo.app();
 	const { started } = await repo.reviews.get(id);
-	const recorder = join(dirname(createRequire(import.meta.url).resolve("@rrweb/record")), "record.umd.min.cjs");
 	const folder = await mkdtemp(join(tmpdir(), "playthrough-"));
 	try {
 		await playwright({
@@ -2318,4 +2469,4 @@ async function playwright(run) {
 		});
 	});
 }
-export { firstOf$1 as C, setupIn as D, personIn as E, repo as O, changes as S, make as T, placeIn as _, failedAt as a, serves as b, isFlow as c, waitsFor as d, walkFork as f, compareWithEarlier as g, writtenNow as h, called as i, pausedAt as k, makeFlowsFolder as l, trySetup as m, REACHES_OUTSIDE as n, flowsOf as o, whereItStopped as p, WALKED as r, howToWriteFlows as s, ALONGSIDE as t, runFlows as u, shownAt as v, giveBackLeft as w, stopApp as x, keepRunning as y };
+export { repo as A, changes as C, personIn as D, make as E, thisCommand as M, pausedAt as N, setupIn as O, stopApp as S, giveBackLeft as T, compareWithEarlier as _, failedAt as a, keepRunning as b, isFlow as c, runFlows as d, waitsFor as f, writtenNow as g, trySetup as h, called as i, stillAt as j, copies as k, makeFlowsFolder as l, whereItStopped as m, REACHES_OUTSIDE as n, flowsOf as o, walkFork as p, WALKED as r, howToWriteFlows as s, ALONGSIDE as t, recorder as u, placeIn as v, firstOf$1 as w, serves as x, shownAt as y };