playthrough 0.4.3 → 0.5.1

package/src/playthrough.js

@@ -1,24 +1,88 @@
 #!/usr/bin/env -S node --disable-warning=MODULE_TYPELESS_PACKAGE_JSON
-import { A as list, C as conversation, D as problemsFinishing, E as notesToAnswer, M as time, O as roundInProgress, S as allNotes, T as lastSeen, _ as readingsOn, b as Refused, j as quote, k as toAccountFor, p as firstLine, w as inOrderJoined } from "./reporter-DE8aueAO.js";
-import { D as setupIn, O as repo, _ as placeIn, a as failedAt, b as serves, c as isFlow, f as walkFork, g as compareWithEarlier, h as writtenNow, i as called, k as pausedAt, l as makeFlowsFolder, m as trySetup, o as flowsOf, p as whereItStopped, s as howToWriteFlows, t as ALONGSIDE, u as runFlows, v as shownAt, w as giveBackLeft, x as stopApp, y as keepRunning } from "./flows-BkG0TgHA.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 { createRequire } from "node:module";
 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, userInfo } from "node:os";
-import { dirname, extname, join, normalize, resolve, sep } from "node:path";
+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, request as request$1 } from "node:http";
-import { connect } from "node:net";
+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.`);
 	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;
@@ -87,7 +151,7 @@ async function recordOnBefore(repo, id, number, { recorded, written }) {
 	const review = await repo.reviews.get(id);
 	const before = review.rounds.find((round) => round.number === 0);
 	if (!before) return;
-	const ran = await readFile(repo.ranOnBefore(id), "utf8").then(JSON.parse, () => ({}));
+	const ran = await readFile(repo.ranOnBefore(id), "utf8").then(JSON.parse).catch(() => ({}));
 	const setup = await writtenNow(repo);
 	const follows = Object.fromEntries(recorded.map(({ flow, doneOn }) => [flow.name, createHash("sha256").update(JSON.stringify([
 		written[flow.name]?.hash,
@@ -162,11 +226,12 @@ const SIGNALS = [
 	"SIGHUP"
 ];
 async function asItWas(repo, unrecorded, commit, shared, run) {
+	refuseWhileAside(repo);
 	await repo.keepOutOfGit();
 	const aside = {
 		back: here(repo),
 		stash: `Playthrough: your work, set aside while flows record on Before, ${(/* @__PURE__ */ new Date()).toISOString()}`,
-		by: process.pid,
+		...thisCommand(),
 		...shared && { shared }
 	};
 	writeFileSync(repo.setAside, JSON.stringify(aside));
@@ -229,8 +294,8 @@ async function asItWas(repo, unrecorded, commit, shared, run) {
 	}
 }
 async function putBack(repo) {
-	const aside = attempt(() => JSON.parse(readFileSync(repo.setAside, "utf8")));
-	if (!aside || running(aside.by)) return;
+	const aside = setAside(repo);
+	if (!aside || stillAt(aside)) return;
 	const toDo = here(repo) !== aside.back || !!stashOf(repo, aside);
 	const problem = putWorkBack(repo, aside, false);
 	if (problem) throw stillAside(repo, aside, problem);
@@ -240,6 +305,11 @@ async function putBack(repo) {
 	if (url && !aside.shared && await serves(url)) throw new Refused([back, `Something is still serving ${url}, most likely the app as it was, left running: stop it, then run this again.`]);
 	console.log(`${back}\n`);
 }
+function refuseWhileAside(repo) {
+	const aside = setAside(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")));
 function putWorkBack(repo, aside, force) {
 	try {
 		if (here(repo) !== aside.back) {
@@ -310,15 +380,12 @@ 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", args, {
+	return execFileSync("git", [
+		"-c",
+		"core.hooksPath=/dev/null",
+		...args
+	], {
 		cwd: repo.root,
 		env,
 		encoding: "utf8",
@@ -430,11 +497,11 @@ async function followingFor(repo, id, to, fresh = false) {
 	const one = following.get(key(repo, id));
 	if (one && !one.over && !fresh && one.written === written && one.flow === to.flow) return one;
 	one?.stop();
-	const made = await start$1(repo, id, to, files, written);
+	const made = await start$2(repo, id, to, files, written);
 	following.set(key(repo, id), made);
 	return made;
 }
-async function start$1(repo, id, to, files, written) {
+async function start$2(repo, id, to, files, written) {
 	const app = await repo.app();
 	const { started } = await repo.reviews.get(id);
 	const { runAlongside, pageFor } = await alongside();
@@ -575,7 +642,8 @@ async function getReady(repo, id, flowName, { step: stepName, actions, did, ahea
 	const outside = ahead && await reachesOutside(repo, id, flow.name);
 	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();
-	await keepRunning(app, repo.root);
+	refuseWhileAside(repo);
+	await keepRunning(app, repo.root, { ready: true });
 	const began = Date.now();
 	const { handed, made } = await runTo(repo, id, {
 		flow: flow.name,
@@ -585,10 +653,14 @@ async function getReady(repo, id, flowName, { step: stepName, actions, did, ahea
 		},
 		...did?.length && { did }
 	});
-	passing ??= {
-		moments: /* @__PURE__ */ new Map(),
-		port: passOn(app, (moment) => passing.moments.get(moment), network)
-	};
+	if (!passings.has(app.url)) {
+		const moments = /* @__PURE__ */ new Map();
+		passings.set(app.url, {
+			moments,
+			port: passOn(app, (moment) => moments.get(moment), network)
+		});
+	}
+	const passing = passings.get(app.url);
 	const moment = randomBytes(12).toString("base64url");
 	passing.moments.set(moment, did?.length ? {
 		...handed,
@@ -611,7 +683,8 @@ async function getReady(repo, id, flowName, { step: stepName, actions, did, ahea
 }
 const ready = /* @__PURE__ */ new Map();
 async function keepUp(repo, id, flow, step, actions) {
-	await keepRunning(await repo.app(), repo.root);
+	refuseWhileAside(repo);
+	await keepRunning(await repo.app(), repo.root, { ready: true });
 	await follow(repo, id, {
 		flow,
 		...step && {
@@ -620,7 +693,7 @@ async function keepUp(repo, id, flow, step, actions) {
 		}
 	});
 }
-let passing;
+const passings = /* @__PURE__ */ new Map();
 async function recorded(repo, id) {
 	const review = await repo.reviews.get(id);
 	const round = review.rounds.findLast((round) => round.number > 0) ?? review.rounds.at(-1);
@@ -629,7 +702,7 @@ async function recorded(repo, id) {
 }
 function passOn(app, handed, network) {
 	const target = new URL(app.url);
-	const server = createServer((request, response) => {
+	const server = createServer$1((request, response) => {
 		if (!named(request)) return turnAway(response);
 		const [first, moment] = new URL(request.url ?? "/", "http://playthrough").pathname.split("/").filter(Boolean);
 		if (first === "take-over") return handOver(handed(moment ?? ""), response, !fromThisMachine(request));
@@ -699,7 +772,6 @@ function asIfDirect(request, target) {
 	else delete headers.cookie;
 	return headers;
 }
-const recorder = join(dirname(createRequire(import.meta.url).resolve("@rrweb/record")), "record.umd.min.cjs");
 let RECORDER;
 const SAYS = `<script>(() => {
   if (window.parent === window) return;
@@ -715,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 });
@@ -799,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.
@@ -1017,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();
@@ -1097,6 +1133,394 @@ function notAnswering(response, app) {
 	response.end(`The app isn't answering at ${app.url}. Start it as playthrough/app.json says (${app.start}), then reload.`);
 }
 const addresses = () => Object.values(networkInterfaces()).flat().filter((face) => face && face.family === "IPv4" && !face.internal).map((face) => face.address);
+// src/mp4.ts
+function mp4({ width, height, fps, avcC, frames }) {
+	const scale = fps * 1e3;
+	const length = frames.length * 1e3;
+	const keys = frames.flatMap((frame, i) => frame.key ? [i + 1] : []);
+	const moov = (offset) => box("moov", [full("mvhd", 0, 0, [
+		u32(0),
+		u32(0),
+		u32(scale),
+		u32(length),
+		u32(65536),
+		u16(256),
+		zeros(10),
+		matrix,
+		zeros(24),
+		u32(2)
+	]), box("trak", [full("tkhd", 0, 3, [
+		u32(0),
+		u32(0),
+		u32(1),
+		u32(0),
+		u32(length),
+		zeros(8),
+		u16(0),
+		u16(0),
+		u16(0),
+		u16(0),
+		matrix,
+		u32(width << 16),
+		u32(height << 16)
+	]), box("mdia", [
+		full("mdhd", 0, 0, [
+			u32(0),
+			u32(0),
+			u32(scale),
+			u32(length),
+			u16(21956),
+			u16(0)
+		]),
+		full("hdlr", 0, 0, [
+			u32(0),
+			ascii("vide"),
+			zeros(12),
+			ascii("Playthrough\0")
+		]),
+		box("minf", [
+			full("vmhd", 0, 1, [zeros(8)]),
+			box("dinf", [full("dref", 0, 0, [u32(1), full("url ", 0, 1, [])])]),
+			box("stbl", [
+				full("stsd", 0, 0, [u32(1), box("avc1", [
+					zeros(6),
+					u16(1),
+					zeros(16),
+					u16(width),
+					u16(height),
+					u32(4718592),
+					u32(4718592),
+					u32(0),
+					u16(1),
+					zeros(32),
+					u16(24),
+					u16(65535),
+					box("avcC", [avcC])
+				])]),
+				full("stts", 0, 0, [
+					u32(1),
+					u32(frames.length),
+					u32(1e3)
+				]),
+				full("stss", 0, 0, [u32(keys.length), ...keys.map(u32)]),
+				full("stsc", 0, 0, [
+					u32(1),
+					u32(1),
+					u32(frames.length),
+					u32(1)
+				]),
+				full("stsz", 0, 0, [
+					u32(0),
+					u32(frames.length),
+					...frames.map((frame) => u32(frame.data.length))
+				]),
+				full("stco", 0, 0, [u32(1), u32(offset)])
+			])
+		])
+	])])]);
+	const ftyp = box("ftyp", [
+		ascii("isom"),
+		u32(512),
+		ascii("isom"),
+		ascii("iso2"),
+		ascii("avc1"),
+		ascii("mp41")
+	]);
+	return join$1([
+		ftyp,
+		moov(ftyp.length + moov(0).length + 8),
+		box("mdat", frames.map((frame) => frame.data))
+	]);
+}
+const matrix = join$1([
+	65536,
+	0,
+	0,
+	0,
+	65536,
+	0,
+	0,
+	0,
+	1073741824
+].map(u32));
+function box(type, parts) {
+	const body = join$1(parts);
+	return join$1([
+		u32(body.length + 8),
+		ascii(type),
+		body
+	]);
+}
+const full = (type, version, flags, parts) => box(type, [u32(version << 24 | flags), ...parts]);
+function u32(value) {
+	const bytes = /* @__PURE__ */ new Uint8Array(4);
+	new DataView(bytes.buffer).setUint32(0, value >>> 0);
+	return bytes;
+}
+function u16(value) {
+	const bytes = /* @__PURE__ */ new Uint8Array(2);
+	new DataView(bytes.buffer).setUint16(0, value);
+	return bytes;
+}
+const zeros = (length) => new Uint8Array(length);
+const ascii = (text) => new TextEncoder().encode(text);
+function join$1(parts) {
+	const joined = new Uint8Array(parts.reduce((length, part) => length + part.length, 0));
+	let at = 0;
+	for (const part of parts) {
+		joined.set(part, at);
+		at += part.length;
+	}
+	return joined;
+}
+// src/video.ts
+const FPS = 60;
+const WIDEST = 1920;
+const ROOM = 32;
+const CAPTION = 26;
+const GAP = 20;
+const TALLEST = 1920;
+const LARGEST = 2;
+const PER_FRAME = .009;
+async function video(port, id, filmed, shape, onLeft) {
+	const beside = filmed.beside !== void 0;
+	const room = {
+		width: (beside ? 2 * shape.width + GAP : shape.width) + 64,
+		height: shape.height + CAPTION + 64
+	};
+	const larger = Math.min(WIDEST / room.width, TALLEST / (room.height - (beside ? 0 : CAPTION)), LARGEST);
+	const viewport = {
+		width: Math.round(larger * room.width),
+		height: Math.round(larger * room.height)
+	};
+	const browser = await chromium.launch();
+	try {
+		const page = await (await browser.newContext({
+			viewport,
+			colorScheme: filmed.dark ? "dark" : "light"
+		})).newPage();
+		const { dark, ...shown } = filmed;
+		await page.goto(`http://localhost:${port}/${encodeURIComponent(id)}?video=${encodeURIComponent(JSON.stringify({
+			...shown,
+			larger
+		}))}`);
+		await page.waitForFunction((frames) => !!window.video && document.querySelectorAll("[data-frame]:not([hidden]) iframe").length >= frames, beside ? 2 : 1);
+		await page.evaluate(() => document.fonts.ready);
+		await page.waitForTimeout(600);
+		const crop = await page.evaluate(around, {
+			room: larger * ROOM,
+			caption: beside ? larger * CAPTION : 0
+		});
+		return await film(page, await encoder(await browser.newPage(), crop), onLeft);
+	} finally {
+		await browser.close();
+	}
+}
+function around({ room, caption }) {
+	const boxes = [...document.querySelectorAll("[data-frame]:not([hidden])")].map((frame) => frame.getBoundingClientRect());
+	const left = Math.max(0, Math.min(...boxes.map((box) => box.left)) - room);
+	const top = Math.max(0, Math.min(...boxes.map((box) => box.top)) - caption - room);
+	const right = Math.min(innerWidth, Math.max(...boxes.map((box) => box.right)) + room);
+	const bottom = Math.min(innerHeight, Math.max(...boxes.map((box) => box.bottom)) + room);
+	return {
+		x: left,
+		y: top,
+		width: right - left,
+		height: bottom - top
+	};
+}
+async function encoder(page, crop) {
+	const k = Math.min(1, WIDEST / crop.width);
+	const even = (value) => 2 * Math.round(value / 2);
+	const size = {
+		width: even(crop.width * k),
+		height: even(crop.height * k)
+	};
+	await page.route("https://video.playthrough/", (route) => route.fulfill({
+		contentType: "text/html",
+		body: ""
+	}));
+	await page.goto("https://video.playthrough/");
+	await page.evaluate(start$1, {
+		...size,
+		fps: FPS,
+		crop
+	});
+	return {
+		page,
+		size
+	};
+}
+async function film(page, { page: putting, size }, onLeft) {
+	const length = await page.evaluate(() => window.video.length);
+	const browser = await page.context().newCDPSession(page);
+	let start = Infinity;
+	let drawn;
+	let last;
+	let made = 0;
+	let done = 0;
+	let going = Promise.resolve();
+	const upTo = (at) => {
+		for (; made / FPS <= at; made++) {
+			const [jpeg, key] = [drawn === last ? void 0 : drawn, made % 120 === 0];
+			last = drawn;
+			going = going.then(() => putting.evaluate(add, {
+				jpeg,
+				key
+			})).then(() => void done++);
+		}
+	};
+	let firstDrawn = () => {};
+	browser.on("Page.screencastFrame", ({ data, metadata, sessionId }) => {
+		upTo((metadata.timestamp ?? Date.now() / 1e3) - start);
+		drawn = data;
+		firstDrawn();
+		browser.send("Page.screencastFrameAck", { sessionId }).catch(() => {});
+	});
+	await new Promise((drew) => {
+		firstDrawn = drew;
+		browser.send("Page.startScreencast", {
+			format: "jpeg",
+			quality: 92,
+			maxWidth: page.viewportSize().width,
+			maxHeight: page.viewportSize().height
+		});
+	});
+	start = Date.now() / 1e3;
+	const telling = setInterval(() => onLeft(Math.max(0, start + length - Date.now() / 1e3) + (made - done) * PER_FRAME), 250);
+	try {
+		await page.evaluate(() => window.video.play());
+		upTo(Date.now() / 1e3 - start);
+		await browser.send("Page.stopScreencast");
+		await going;
+	} finally {
+		clearInterval(telling);
+	}
+	const finished = await putting.evaluate(finish);
+	const bytes = (base64) => new Uint8Array(Buffer.from(base64, "base64"));
+	return mp4({
+		...size,
+		fps: FPS,
+		avcC: bytes(finished.avcC),
+		frames: finished.frames.map((frame) => ({
+			data: bytes(frame.data),
+			key: frame.key
+		}))
+	});
+}
+async function start$1({ width, height, fps, crop }) {
+	const base64 = (bytes) => btoa(Array.from(bytes, (byte) => String.fromCharCode(byte)).join(""));
+	const state = {
+		encoder: new VideoEncoder({
+			output: (chunk, metadata) => {
+				const data = new Uint8Array(chunk.byteLength);
+				chunk.copyTo(data);
+				state.frames.push({
+					data: base64(data),
+					key: chunk.type === "key"
+				});
+				const description = metadata?.decoderConfig?.description;
+				if (description) state.avcC = base64(ArrayBuffer.isView(description) ? new Uint8Array(description.buffer, description.byteOffset, description.byteLength) : new Uint8Array(description));
+			},
+			error: (error) => console.error(error)
+		}),
+		canvas: new OffscreenCanvas(width, height),
+		crop,
+		fps,
+		i: 0,
+		picture: new Uint8Array(width * height * 3 / 2),
+		frames: []
+	};
+	window.encoding = state;
+	for (const codec of [
+		"avc1.640033",
+		"avc1.64002a",
+		"avc1.640028"
+	]) if ((await VideoEncoder.isConfigSupported({
+		codec,
+		width,
+		height
+	})).supported) {
+		state.encoder.configure({
+			codec,
+			width,
+			height,
+			bitrate: 6e6,
+			framerate: fps,
+			avc: { format: "avc" }
+		});
+		return;
+	}
+	throw new Error(`This browser can't make an H.264 video ${width}×${height} wide.`);
+}
+async function add({ jpeg, key }) {
+	const state = window.encoding;
+	const { width, height } = state.canvas;
+	if (jpeg) {
+		const picture = await createImageBitmap(await (await fetch(`data:image/jpeg;base64,${jpeg}`)).blob());
+		const draw = state.canvas.getContext("2d", { willReadFrequently: true });
+		draw.imageSmoothingQuality = "high";
+		draw.drawImage(picture, state.crop.x, state.crop.y, state.crop.width, state.crop.height, 0, 0, width, height);
+		picture.close();
+		const rgba = draw.getImageData(0, 0, width, height).data;
+		const [brightness, blue, red] = [
+			state.picture.subarray(0, width * height),
+			state.picture.subarray(width * height, width * height * 5 / 4),
+			state.picture.subarray(width * height * 5 / 4)
+		];
+		for (let y = 0; y < height; y += 2) for (let x = 0; x < width; x += 2) {
+			let [r, g, b] = [
+				0,
+				0,
+				0
+			];
+			for (const at of [
+				y * width + x,
+				y * width + x + 1,
+				(y + 1) * width + x,
+				(y + 1) * width + x + 1
+			]) {
+				const [dotR, dotG, dotB] = [
+					rgba[at * 4],
+					rgba[at * 4 + 1],
+					rgba[at * 4 + 2]
+				];
+				brightness[at] = 16 + (11966 * dotR + 40254 * dotG + 4064 * dotB + 32768 >> 16);
+				r += dotR;
+				g += dotG;
+				b += dotB;
+			}
+			const square = y / 2 * (width / 2) + x / 2;
+			blue[square] = 128 + (-6596 * r - 22189 * g + 28785 * b + 131072 >> 18);
+			red[square] = 128 + (28785 * r - 26145 * g - 2640 * b + 131072 >> 18);
+		}
+	}
+	const frame = new VideoFrame(state.picture, {
+		format: "I420",
+		codedWidth: width,
+		codedHeight: height,
+		timestamp: state.i * 1e6 / state.fps,
+		duration: 1e6 / state.fps,
+		colorSpace: {
+			primaries: "bt709",
+			transfer: "bt709",
+			matrix: "bt709",
+			fullRange: false
+		}
+	});
+	state.encoder.encode(frame, { keyFrame: key });
+	frame.close();
+	state.i++;
+	while (state.encoder.encodeQueueSize > 8) await new Promise((done) => setTimeout(done, 5));
+}
+async function finish() {
+	const state = window.encoding;
+	await state.encoder.flush();
+	return {
+		avcC: state.avcC,
+		frames: state.frames
+	};
+}
 // src/open.ts
 const PORT = 5790;
 const TYPES = {
@@ -1116,13 +1540,16 @@ const TYPES = {
 	".ttf": "font/ttf",
 	".otf": "font/otf"
 };
-async function open(repo, id) {
-	if (id) await repo.reviews.get(id);
+async function open(here, id) {
+	const app = everyCopy(here);
+	if (id) await (await app.holding(id)).reviews.get(id);
+	const already = await openAlready(app.folder);
+	if (already) return console.log(`Playthrough is already open at http://localhost:${already}/${id ?? ""}`);
 	const page = fileURLToPath(new URL("../viewer", import.meta.url));
 	if (!await readFile(join(page, "index.html")).catch(() => void 0)) throw new Refused(["The viewer isn't built yet. Build it from core with npm run build."]);
-	const you = whoYouAre(repo.root);
-	const port = await listen(createServer((request, response) => {
-		answer(repo, page, you, request, response).catch((error) => {
+	const you = whoYouAre(here.root);
+	const port = await listen(createServer$1((request, response) => {
+		answer(app, page, you, request, response).catch((error) => {
 			if (response.headersSent) return response.end();
 			const problems = error instanceof Refused ? error.problems : [String(error?.message ?? error)];
 			json(response, error instanceof Refused ? 400 : 500, { problems });
@@ -1130,22 +1557,42 @@ async function open(repo, id) {
 	}), PORT);
 	console.log(`Playthrough is open at http://localhost:${port}/${id ?? ""}`);
 }
-async function answer(repo, page, you, request, response) {
+function everyCopy(here) {
+	const all = () => copies(here.root).map((root) => root === here.root ? here : repo(root));
+	const found = /* @__PURE__ */ new Map();
+	return {
+		all,
+		folder: all()[0]?.root ?? here.root,
+		async holding(id) {
+			if (!found.has(id)) {
+				for (const copy of all()) if ((await copy.reviews.list()).includes(id) && !found.has(id)) found.set(id, copy);
+			}
+			return found.get(id) ?? here;
+		}
+	};
+}
+async function openAlready(folder) {
+	const ports = Array.from({ length: 21 }, (_, i) => PORT + i);
+	const asked = (port) => fetch(`http://127.0.0.1:${port}/api/app`, { signal: AbortSignal.timeout(1e3) }).then((answer) => answer.json()).then((said) => said.folder === folder ? port : void 0, () => void 0);
+	return (await Promise.all(ports.map(asked))).find((port) => port !== void 0);
+}
+async function answer(app, page, you, request, response) {
 	const stranger = fromElsewhere(request);
 	if (stranger) return json(response, 403, { problems: [stranger] });
-	const reviews = repo.reviews;
 	const path = decodeURIComponent(new URL(request.url ?? "/", "http://localhost").pathname);
 	const [api, collection, id, ...rest] = path.split("/").filter(Boolean);
 	if (api !== "api") return serve(page, path, response);
 	if (request.method === "GET" && collection === "you") return json(response, 200, { name: you });
+	if (request.method === "GET" && collection === "app") return json(response, 200, { folder: app.folder });
 	if (collection !== "reviews") return json(response, 404, { problems: [`There's nothing at ${path}.`] });
-	if (request.method === "GET" && !id) return json(response, 200, (await Promise.all((await reviews.list()).map((id) => reviews.get(id)))).map(({ id, title, rounds, accepted }) => ({
-		id,
-		title,
-		rounds: rounds.filter((round) => round.finished && round.number > 0).length,
-		accepted: !!accepted
-	})));
+	if (request.method === "GET" && !id) {
+		const read = async (copy) => Promise.all((await copy.reviews.list()).map((id) => copy.reviews.get(id).catch(() => void 0)));
+		const every = (await Promise.all(app.all().map(read))).flat();
+		return json(response, 200, every.filter((review, i) => review && every.findIndex((first) => first?.id === review.id) === i));
+	}
 	if (!id) return json(response, 404, { problems: [`There's nothing at ${path}.`] });
+	const repo = await app.holding(id);
+	const reviews = repo.reviews;
 	if (request.method === "GET" && rest[0] === "live") return live(repo, id, request, response);
 	if (request.method === "GET" && rest[0] === "rounds" && rest[2] === "files" && rest[3]) {
 		const name = rest.slice(3).join("/");
@@ -1156,8 +1603,14 @@ async function answer(repo, 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);
 	if (request.method === "POST" && rest[0] === "take-over") return takeOver(repo, id, request, response);
 	if (request.method === "POST" && rest[0] === "follow") return followAlong(repo, id, request, response);
 	if (request.method === "POST" && rest[0] === "ready-in") return readyInFor(repo, id, request, response);
@@ -1239,6 +1692,34 @@ function paced(events) {
 	});
 }
 const readingOf = (event) => event.type === 5 && event.data?.tag === "reading" ? event.data.payload : void 0;
+async function saveVideo(repo, id, request, response) {
+	const filmed = await body(request);
+	const rounds = (await repo.reviews.get(id)).rounds.filter((round) => round.number === filmed.round || round.number === filmed.beside);
+	const screens = [];
+	for (const round of rounds) {
+		const flow = round.flows.find((flow) => flow.name === filmed.flow);
+		const kept = flow && await repo.reviews.file(id, round.number, flow.recording);
+		if (kept) {
+			for (const event of JSON.parse(Buffer.from(kept).toString("utf8"))) if (event.type === 4) screens.push(event.data);
+		}
+	}
+	if (!screens.length) return json(response, 404, { problems: [`Round ${filmed.round} of ${id} has no recording of “${filmed.flow}”.`] });
+	const shape = {
+		width: Math.max(...screens.map((screen) => screen.width)),
+		height: Math.max(...screens.map((screen) => screen.height))
+	};
+	response.writeHead(200, {
+		"content-type": "application/x-ndjson",
+		"cache-control": "no-store"
+	});
+	const say = (line) => response.write(`${JSON.stringify(line)}\n`);
+	try {
+		say({ video: Buffer.from(await video(request.socket.localPort, id, filmed, shape, (left) => say({ left: Math.round(left * 10) / 10 }))).toString("base64") });
+	} catch (error) {
+		say({ problems: [`The video couldn't be made: ${error.message.split("\n")[0]}`] });
+	}
+	response.end();
+}
 async function readyInFor(repo, id, request, response) {
 	const { flow, step, actions } = await body(request);
 	json(response, 200, { in: await readyIn(repo, id, {
@@ -1433,7 +1914,8 @@ async function walk(repo, id) {
 	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.`);
-	if (saved) {
+	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;
 			return on ? {
@@ -1442,8 +1924,8 @@ async function walk(repo, id) {
 			} : reply;
 		};
 		await repo.reviews.saveRound(id, {
-			...saved,
-			replies: saved.replies.map(placed)
+			...now,
+			replies: now.replies.map(placed)
 		});
 	}
 	console.log(`\n${walked.map(saidOf).join("\n")}`);
@@ -1461,7 +1943,7 @@ async function record(repo, id) {
 		`Fix ${failed.length > 1 ? "them" : "it"} and record again, which runs ${failed.length > 1 ? "them" : "it"} first. ${whereItStopped(repo, id, failed)}`
 	]);
 	await recordOnBefore(repo, id, number, ran);
-	const saved = review.rounds.find((round) => round.number === number);
+	const saved = (await repo.reviews.get(id)).rounds.find((round) => round.number === number);
 	const joined = inOrderJoined(review);
 	const place = (name) => joined.includes(name) ? joined.indexOf(name) : joined.length;
 	const flows = recorded.map(({ flow }) => {
@@ -1559,30 +2041,32 @@ const changed = (count, since) => {
 	return count ? `${count} ${count > 1 ? "changes" : "change"} since ${round}.` : `Nothing changed since ${round}.`;
 };
 // src/start.ts
-async function start(repo, id, title, asked) {
-	if (!(await repo.reviews.list()).includes(id)) {
+async function start(repo$1, id, title, asked) {
+	if (!(await repo$1.reviews.list()).includes(id)) {
+		if ([repo$1.tried, repo$1.borrowed].some((own) => basename(own) === id)) throw new Refused([`“${id}” is the name of a folder Playthrough keeps for itself. Give the review another name.`]);
+		for (const other of copies(repo$1.root).filter((root) => root !== repo$1.root)) if ((await repo(other).reviews.list()).includes(id)) throw new Refused([`There's a review called “${id}” in another worktree, at ${other}. Give this one another name.`]);
 		if (!title || !asked) throw new Refused([`There's no review called “${id}” yet. Start it with a few words for the change, as a pull request's title, and what was asked, in the person's words: playthrough start ${id} "<title>" "<what was asked>"`]);
-		await repo.reviews.start(id, title, asked);
-		await repo.keepOutOfGit();
-		await makeFlowsFolder(repo, id);
+		await repo$1.reviews.start(id, title, asked);
+		await repo$1.keepOutOfGit();
+		await makeFlowsFolder(repo$1, id);
 		return console.log(`Started ${id}: “${title}”.
 
 Write its flows before you change anything. They show what was asked, so write them from the task, not from the code.
 
-${howToWriteFlows(repo, id)}
+${howToWriteFlows(repo$1, id)}
 
 Then run playthrough start ${id} again. It tries the app's setup, and keeps the app as it is as Before, to record each flow on with round 1, so the person can compare. If the app is new, there's no Before: go straight to the work.`);
 	}
-	const review = await repo.reviews.get(id);
+	const review = await repo$1.reviews.get(id);
 	if (title && title !== review.title) throw new Refused([`There's already a review called “${id}”, of “${review.title}”. Give this one another name, or carry that one on: playthrough start ${id}`]);
 	const last = review.rounds.at(-1);
 	if (last?.number === 0) throw new Refused([`Before is kept already. Change the app, then record round 1: playthrough record ${id}`]);
 	if (last) throw new Refused([`Before is how the app was before the work, and ${id} has round ${last.number} already. Record the round being worked on: playthrough record ${id}`]);
-	await flowsOf(repo, id);
-	await trySetup(repo, `playthrough start ${id}`);
-	const commit = keepBefore(repo, id);
+	await flowsOf(repo$1, id);
+	await trySetup(repo$1, `playthrough start ${id}`);
+	const commit = keepBefore(repo$1, id);
 	if (commit) {
-		await repo.reviews.saveRound(id, {
+		await repo$1.reviews.saveRound(id, {
 			number: 0,
 			by: agent(),
 			flows: [],
@@ -1590,7 +2074,7 @@ Then run playthrough start ${id} again. It tries the app's setup, and keeps the
 			accounts: {},
 			commit
 		});
-		await repo.reviews.finish(id, 0);
+		await repo$1.reviews.finish(id, 0);
 	}
 	console.log(`
 ${commit ? "Kept Before: the app as it is now. Each flow is recorded on it with round 1, as far as the app as it was takes it, for the person to compare with." : "This folder isn't in git, or has no commits yet, so there's no Before: the app as it is can't be put back once you've changed it."}
@@ -1600,26 +2084,30 @@ Now change the app. Keep each flow's name, and each step's while it does the sam
 // src/noted.ts
 async function pictureNotes(repo, review, round, notes) {
 	const shown = /* @__PURE__ */ new Map();
-	const browser = await chromium.launch();
+	let browser;
 	try {
 		for (const id of notes) {
 			if (allNotes(review).get(id)?.note.on?.app) continue;
 			const found = await whereSeen(repo, review, id, round).catch(() => void 0);
-			if (!found) continue;
+			const picture = found && await repo.reviews.file(review.id, found.round, found.picture);
+			if (!found || !picture) continue;
+			browser ??= await chromium.launch();
 			const page = await browser.newPage({ viewport: {
 				width: found.width,
 				height: found.height
 			} });
-			const picture = Buffer.from(await repo.reviews.file(review.id, found.round, found.picture)).toString("base64");
-			await page.setContent(drawn(picture, found));
-			await page.locator("img").evaluate((image) => image.decode());
-			const name = `notes/${id}.png`;
-			await repo.reviews.saveFile(review.id, round, name, await page.screenshot());
-			await page.close();
-			shown.set(id, repo.show(join(dirname(repo.round(review.id, round)), "files", name)));
+			try {
+				await page.setContent(drawn(Buffer.from(picture).toString("base64"), found));
+				await page.locator("img").evaluate((image) => image.decode());
+				const name = `notes/${id}.png`;
+				await repo.reviews.saveFile(review.id, round, name, await page.screenshot());
+				shown.set(id, repo.show(join(dirname(repo.round(review.id, round)), "files", name)));
+			} catch {} finally {
+				await page.close();
+			}
 		}
 	} catch {} finally {
-		await browser.close();
+		await browser?.close();
 	}
 	return shown;
 }
@@ -1746,7 +2234,6 @@ const share = (fraction) => `${Math.round(fraction * 100)}%`;
 const HELP = readFileSync(new URL("../INSTRUCTIONS.md", import.meta.url), "utf8").trimEnd();
 const given = process.argv.slice(2);
 const [command, review, ...words] = given;
-const needs = (usage) => new Refused([`That needs more: ${usage}`]);
 const takes = {
 	start: [2, `playthrough start <review> "<title>" "<what was asked>"`],
 	record: [0, "playthrough record <review>"],
@@ -1758,26 +2245,18 @@ const takes = {
 const limit = Object.hasOwn(takes, command ?? "") ? takes[command] : void 0;
 try {
 	if (!command || command === "help" || given.some((word) => ["--help", "-h"].includes(word))) console.log(HELP);
-	else if (limit && words.length > limit[0]) throw new Refused([`That's more than it takes: ${limit[1]}`]);
+	else if (!limit) throw new Refused([`There's no command “${command}”. Run playthrough alone for what each one does.`]);
+	else if (words.length > limit[0]) throw new Refused([`That's more than it takes: ${limit[1]}`]);
+	else if (!review && command !== "open") throw new Refused([`That needs more: ${limit[1]}`]);
 	else {
 		await putBack(repo());
-		if (command === "start") {
-			if (!review) throw needs(takes.start[1]);
-			await start(repo(), review, words[0], words[1]);
-		} else if (command === "record") {
-			if (!review) throw needs(takes.record[1]);
-			await record(repo(), review);
-		} else if (command === "wait") {
-			if (!review) throw needs(takes.wait[1]);
-			await wait(repo(), review);
-		} else if (command === "walk") {
-			if (!review) throw needs(takes.walk[1]);
-			await walk(repo(), review);
-		} else if (command === "open") await open(repo(), review);
-		else if (command === "take-over") {
-			if (!review) throw needs(takes["take-over"][1]);
-			await takeOver$1(repo(), review, words[0], words[1]);
-		} else throw new Refused([`There's no command “${command}”. Run playthrough alone for what each one does.`]);
+		if (command !== "open" && command !== "wait") refuseWhileAside(repo());
+		if (command === "open") await open(repo(), review);
+		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 === "take-over") await takeOver$1(repo(), review, words[0], words[1]);
 	}
 } catch (error) {
 	if (!(error instanceof Refused)) throw error;