playthrough 0.5.0 → 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
@@ -79,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,6 +4,8 @@ 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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playthrough",
-  "version": "0.5.0",
+  "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-DDB6AdQ-.js → flows-vi0amwSo.js}

@@ -1,11 +1,11 @@
-import { A as quote, b as Reviews, h as readingsOf, k as list, m as glimpsesOf, p as firstLine, y as Refused } from "./reporter-Dr7dWwSf.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 { 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 { 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";
@@ -69,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) {
@@ -123,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"),
@@ -324,7 +349,7 @@ function alive(pid) {
 // src/app.ts
 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);
@@ -337,6 +362,7 @@ async function keepRunning(app, root) {
 		]) process.once(signal, end);
 		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)) {
@@ -359,6 +385,12 @@ async function keepRunning(app, root) {
 		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 [running.stdout, running.stderr]) {
 		output.on("data", (chunk) => {
@@ -387,6 +419,29 @@ async function keepRunning(app, root) {
 		"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(url)) return;
 	const began = Date.now();
@@ -483,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");
@@ -599,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",
@@ -759,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(" ");
@@ -877,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)));
@@ -1095,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))) {
@@ -1294,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": {
@@ -1353,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;
 		}
@@ -1369,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);
@@ -1459,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"));
@@ -1624,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
 		};
 	});
 }
@@ -1875,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);
@@ -1883,6 +1982,8 @@ async function comparing(page, earlier, round, unsteady = () => /* @__PURE__ */
 			id,
 			words,
 			seen: [place],
+			...reworded && { reworded },
+			...gone && { gone },
 			...pictureOnly && { pictureOnly }
 		});
 		else {
@@ -1927,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 }
@@ -1941,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;
@@ -2365,4 +2469,4 @@ async function playwright(run) {
 		});
 	});
 }
-export { repo as A, changes as C, personIn as D, make as E, 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, pausedAt 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 };
+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 };

package/src/playthrough.js

@@ -1,12 +1,12 @@
 #!/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-S9fOk0za.js";
+import { A as repo, M as thisCommand, N as pausedAt, 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 stillAt, 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-vi0amwSo.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";
@@ -18,6 +18,71 @@ 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.`);
 	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) {
@@ -324,13 +380,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",
@@ -594,7 +643,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,
@@ -635,7 +684,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 +787,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 +830,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.
@@ -1040,7 +1051,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 +1603,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);

package/src/playwright.config.js

@@ -1,4 +1,4 @@
-import { f as waitsFor } from "./flows-DDB6AdQ-.js";
+import { f as waitsFor } from "./flows-vi0amwSo.js";
 import { availableParallelism } from "node:os";
 import { defineConfig } from "@playwright/test";
 import { fileURLToPath } from "node:url";

package/src/{reporter-Dr7dWwSf.js → reporter-S9fOk0za.js}

@@ -76,6 +76,8 @@ const Flow = z.strictObject({
 const Change = z.strictObject({
 	id: text("needs an id").describe("Its thing and its kind of change, so it keeps its id in every round while it's the same change"),
 	words: text("needs its words").describe("What changed, for the agent: “Download CSV and Cancel have swapped places”"),
+	reworded: text("needs the words that read differently").optional().describe("For words reworded, the words that read differently now, which the viewer marks where they are: “on their own”"),
+	gone: z.literal(true).optional().describe("Not on the newer round: where it was, on the round before, is where it's seen, with Compare"),
 	seen: z.array(Place, { error: "needs where it's seen, a list" }).min(1, { error: "needs where it's seen: each flow, at its moment there" }).describe("Each flow it's seen in, at its moment there; a flow that's gone, with no moment"),
 	pictureOnly: z.literal(true).optional().describe("Seen only in the pictures, with nothing read there changed: shown to the person, who can see what it is, and not put to the agent, who can't see more of it than Playthrough did")
 });

package/src/reporter.js

@@ -1 +1 @@
-export { t as ACTIONS, n as ASSETS, r as DONE_ON, a as GLIMPSES, o as HANDS, s as HOLD, c as PERSON, l as PICTURE, u as READINGS, d as RECORDING, f as WROTE, i as default, p as firstLine, m as glimpsesOf, h as readingsOf, g as readingsOn, _ as seconds } from "./reporter-Dr7dWwSf.js";
+export { t as ACTIONS, n as ASSETS, r as DONE_ON, a as GLIMPSES, o as HANDS, s as HOLD, c as PERSON, l as PICTURE, u as READINGS, d as RECORDING, f as WROTE, i as default, p as firstLine, m as glimpsesOf, h as readingsOf, g as readingsOn, _ as seconds } from "./reporter-S9fOk0za.js";

package/src/test.js

@@ -1,5 +1,5 @@
-import { _ as seconds, a as GLIMPSES, c as PERSON, d as RECORDING, f as WROTE, l as PICTURE, n as ASSETS, o as HANDS, p as firstLine, r as DONE_ON, s as HOLD, t as ACTIONS, u as READINGS, v as keepAssets } from "./reporter-Dr7dWwSf.js";
-import { A as repo, C as changes, D as personIn, E as make, O as setupIn, n as REACHES_OUTSIDE, r as WALKED, t as ALONGSIDE, w as firstOf } from "./flows-DDB6AdQ-.js";
+import { _ as seconds, a as GLIMPSES, c as PERSON, d as RECORDING, f as WROTE, l as PICTURE, n as ASSETS, o as HANDS, p as firstLine, r as DONE_ON, s as HOLD, t as ACTIONS, u as READINGS, v as keepAssets } from "./reporter-S9fOk0za.js";
+import { A as repo, C as changes, D as personIn, E as make, O as setupIn, n as REACHES_OUTSIDE, r as WALKED, t as ALONGSIDE, w as firstOf } from "./flows-vi0amwSo.js";
 import { n as readPage, r as unhovered } from "./read-Bg9XVTtn.js";
 import { readFileSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
@@ -92,15 +92,20 @@ function onlyWaits(expect) {
 const recorder = (rrweb) => `;((Date, setTimeout, clearTimeout, requestAnimationFrame, cancelAnimationFrame) => {
 ${readFileSync(rrweb, "utf8")}
 })(Date, setTimeout, clearTimeout, requestAnimationFrame, cancelAnimationFrame);
-if (window.top === window) window.rrwebRecord.record({
-  // Nothing is kept until the flow itself starts, after whatever the app's setup did on the page.
-  emit: (event) => window.__playthrough?.(event),
-  // every input, not just the last: with "last", rrweb only hears a field change when it loses focus,
-  // so words typed into a search box that kept focus never reached the recording
-  sampling: { mousemove: 20, scroll: 16, input: "all" },
-  maskAllInputs: false,
-  inlineStylesheet: true,
-});`;
+// With each page taken whole, whether its browser was light or dark, still or moving, for it to be played back as it
+// was: said once rrweb has the page, as said at its very start it went before anything was listening.
+const said = () => window.rrwebRecord.record.addCustomEvent("browser", { dark: matchMedia("(prefers-color-scheme: dark)").matches, still: matchMedia("(prefers-reduced-motion: reduce)").matches });
+if (window.top === window) {
+  window.rrwebRecord.record({
+    // Nothing is kept until the flow itself starts, after whatever the app's setup did on the page.
+    emit: (event) => (window.__playthrough?.(event), event.type === 2 && setTimeout(said)),
+    // every input, not just the last: with "last", rrweb only hears a field change when it loses focus,
+    // so words typed into a search box that kept focus never reached the recording
+    sampling: { mousemove: 20, scroll: 16, input: "all" },
+    maskAllInputs: false,
+    inlineStylesheet: true,
+  });
+}`;
 const FRAME = 16;
 const REST = 140;
 const KEY = 60;
@@ -703,6 +708,20 @@ function pace(page) {
 			return result;
 		};
 	}
+	const mouse = Object.getPrototypeOf(page.mouse);
+	const wheel = mouse.wheel;
+	mouse.wheel = async function(deltaX, deltaY) {
+		if (!pointer) return wheel.call(this, deltaX, deltaY);
+		const moves = Math.max(10, Math.min(36, Math.round(Math.hypot(deltaX, deltaY) / 25)));
+		let done = 0;
+		for (let i = 1; i <= moves; i++) {
+			await wheel.call(this, deltaX * (ease(i / moves) - done), deltaY * (ease(i / moves) - done));
+			done = ease(i / moves);
+			await pointer.page.waitForTimeout(FRAME);
+		}
+		await pointer.page.waitForTimeout(650);
+		await glimpse();
+	};
 	const keyboard = Object.getPrototypeOf(page.keyboard);
 	const focused = async (page) => {
 		const on = page.locator(":focus").first();