playthrough 0.4.2 → 0.5.0

package/src/playthrough.js

@@ -1,18 +1,17 @@
 #!/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-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 { 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 } from "node:crypto";
-import { constants, networkInterfaces, tmpdir, userInfo } from "node:os";
-import { dirname, extname, join, normalize, resolve, sep } from "node:path";
+import { createHash, randomBytes } from "node:crypto";
+import { constants, networkInterfaces, tmpdir, uptime, userInfo } from "node:os";
+import { basename, dirname, extname, join, normalize, resolve, sep } from "node:path";
+import { connect } from "node:net";
 import { chromium, request } from "@playwright/test";
 import { fileURLToPath } from "node:url";
-import { createServer, 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) {
@@ -87,7 +86,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 +161,13 @@ 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,
+		boot: boot(),
 		...shared && { shared }
 	};
 	writeFileSync(repo.setAside, JSON.stringify(aside));
@@ -229,8 +230,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 +241,19 @@ 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")));
+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) {
@@ -318,7 +332,11 @@ function running(pid) {
 	}
 }
 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 +448,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();
@@ -557,14 +575,17 @@ async function takeOver$1(repo, id, flowName, stepName) {
 		throw new Refused([`Take over which flow? playthrough take-over ${id} "<flow>" ["<step>"]\nIts flows: ${list(round.flows.map((flow) => quote(flow.name)))}.`]);
 	}
 	console.log(`Running ${quote(flowName)} to ${stepName ? `the end of ${quote(stepName)}` : "its end"}, on the app as it is now…`);
-	const { port, moment, seconds } = await getReady(repo, id, flowName, { step: stepName });
+	const { port, moment, seconds } = await getReady(repo, id, flowName, {
+		step: stepName,
+		network: true
+	});
 	const here = `http://localhost:${port}/take-over/${moment}`;
 	const away = addresses().map((address) => `http://${address}:${port}/take-over/${moment}`);
 	console.log(`
 Ready in ${seconds}s. Carry on from there in your browser: ${here}${away.length ? `\nOr on your phone, on the same network: ${list(away)}` : ""}
 Each address hands over the same copy, and the app is passed on through Playthrough while this runs. Ctrl+C ends it.`);
 }
-async function getReady(repo, id, flowName, { step: stepName, actions, did, ahead } = {}) {
+async function getReady(repo, id, flowName, { step: stepName, actions, did, ahead, network } = {}) {
 	const round = await recorded(repo, id);
 	const flow = round.flows.find((flow) => flow.name === flowName);
 	if (!flow) throw new Refused([`${id} has no flow called ${quote(flowName)}. Its flows: ${list(round.flows.map((flow) => quote(flow.name)))}.`]);
@@ -572,6 +593,7 @@ 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();
+	refuseWhileAside(repo);
 	await keepRunning(app, repo.root);
 	const began = Date.now();
 	const { handed, made } = await runTo(repo, id, {
@@ -582,12 +604,15 @@ 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)),
-		numbered: 0
-	};
-	const moment = String(++passing.numbered);
+	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,
 		did
@@ -609,6 +634,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 follow(repo, id, {
 		flow,
@@ -618,18 +644,20 @@ 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);
 	if (!round) throw new Refused([`${id} has nothing recorded yet, so there's nothing to take over. Record it first: playthrough record ${id}`]);
 	return round;
 }
-function passOn(app, handed) {
+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);
+		if (first === "take-over") return handOver(handed(moment ?? ""), response, !fromThisMachine(request));
+		if (!passed(request)) return turnAway(response);
 		const page = /text\/html/.test(request.headers.accept ?? "");
 		const headers = asIfDirect(request, target);
 		if (page) delete headers["accept-encoding"];
@@ -640,7 +668,7 @@ function passOn(app, handed) {
 			path: request.url,
 			headers
 		}, (answer) => {
-			const told = fromTheApp(answer, target);
+			const told = fromTheApp(answer, target, request);
 			if (!page || !/text\/html/.test(String(answer.headers["content-type"])) || answer.headers["content-encoding"]) {
 				response.writeHead(answer.statusCode ?? 502, told);
 				answer.pipe(response);
@@ -662,6 +690,7 @@ function passOn(app, handed) {
 		request.pipe(forward);
 	});
 	server.on("upgrade", (request, socket, head) => {
+		if (!named(request) || !passed(request)) return void socket.destroy();
 		const upstream = connect(Number(target.port || 80), target.hostname, () => {
 			const headers = Object.entries(asIfDirect(request, target)).flatMap(([name, value]) => [value ?? []].flat().map((one) => `${name}: ${one}`));
 			upstream.write(`${request.method} ${request.url} HTTP/1.1\r\n${headers.join("\r\n")}\r\n\r\n`);
@@ -671,7 +700,15 @@ function passOn(app, handed) {
 		upstream.on("error", () => socket.destroy());
 		socket.on("error", () => upstream.destroy());
 	});
-	return listen(server, PORT$1, "0.0.0.0");
+	return listen(server, PORT$1, network ? "0.0.0.0" : "127.0.0.1");
+}
+const named = (request) => thisMachine(request.headers.host) || addresses().includes(request.headers.host?.replace(/:\d+$/, "") ?? "");
+const PASS = `playthrough-pass=${randomBytes(16).toString("base64url")}`;
+const fromThisMachine = (request) => /^(127\.|::1$|::ffff:127\.)/.test(request.socket.remoteAddress ?? "");
+const passed = (request) => fromThisMachine(request) || !!request.headers.cookie?.split(/;\s*/).includes(PASS);
+function turnAway(response) {
+	response.writeHead(403, { "content-type": "text/plain; charset=utf-8" });
+	response.end("Playthrough passes the app on to this machine, and to whoever opened the address of a moment taken over. Open that address first.");
 }
 function asIfDirect(request, target) {
 	const headers = {
@@ -681,9 +718,11 @@ function asIfDirect(request, target) {
 	const from = `http://${request.headers.host}`;
 	if (headers.origin) headers.origin = target.origin;
 	if (headers.referer?.startsWith(from)) headers.referer = target.origin + headers.referer.slice(from.length);
+	const cookie = headers.cookie?.split(/;\s*/).filter((one) => one !== PASS).join("; ");
+	if (cookie) headers.cookie = cookie;
+	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;
@@ -1023,17 +1062,19 @@ const SAYS = `<script>(() => {
   };
   addEventListener("load", () => setTimeout(settle, 50));
 })();<\/script>`;
-function fromTheApp(answer, target) {
+function fromTheApp(answer, target, request) {
 	const headers = { ...answer.headers };
 	delete headers["x-frame-options"];
-	headers["access-control-allow-origin"] = "*";
+	const origin = request.headers.origin;
+	if (origin && URL.canParse(origin) && thisMachine(new URL(origin).host)) headers["access-control-allow-origin"] = origin;
+	headers.vary = [headers.vary, "Origin"].filter(Boolean).join(", ");
 	const policy = headers["content-security-policy"];
 	if (policy) headers["content-security-policy"] = [policy].flat().map((rule) => rule.replace(/frame-ancestors[^;]*;?/i, ""));
 	if (headers.location?.startsWith(target.origin)) headers.location = headers.location.slice(target.origin.length) || "/";
 	if (headers["set-cookie"]) headers["set-cookie"] = headers["set-cookie"].map((cookie) => cookie.replace(/;\s*Domain=[^;]*/i, ""));
 	return headers;
 }
-function handOver(handed, response) {
+function handOver(handed, response, elsewhere) {
 	if (!handed) {
 		response.writeHead(404, { "content-type": "text/plain; charset=utf-8" });
 		response.end("There's no moment ready at this address. Take it over again from the viewer, or with playthrough take-over.");
@@ -1043,6 +1084,7 @@ function handOver(handed, response) {
 	const again = handed.again ?? [];
 	const { pathname, search, hash } = new URL(url);
 	const setCookies = cookies.map(({ name, value, path, expires, httpOnly }) => `${name}=${value}; Path=${path}; SameSite=Lax${httpOnly ? "; HttpOnly" : ""}${expires > 0 ? `; Expires=${(/* @__PURE__ */ new Date(expires * 1e3)).toUTCString()}` : ""}`);
+	if (elsewhere) setCookies.push(`${PASS}; Path=/; SameSite=Lax; HttpOnly`);
 	const keep = JSON.stringify({
 		local,
 		session,
@@ -1078,6 +1120,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 = {
@@ -1097,13 +1527,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 });
@@ -1111,20 +1544,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) {
-	const reviews = repo.reviews;
+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 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("/");
@@ -1137,6 +1592,7 @@ async function answer(repo, page, you, request, response) {
 		});
 		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);
@@ -1218,6 +1674,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, {
@@ -1244,6 +1728,12 @@ async function serve(page, path, response) {
 	});
 	response.end(await readFile(join(page, "index.html")));
 }
+function fromElsewhere(request) {
+	const { host, origin } = request.headers;
+	if (!thisMachine(host)) return `Playthrough answers only at localhost, not at “${host}”. Open http://localhost:${request.socket.localPort}/.`;
+	if (origin !== void 0 && origin !== `http://${host}`) return `Only Playthrough's own page can ask this, not ${origin}.`;
+}
+const thisMachine = (host) => /^(localhost|127\.0\.0\.1|\[::1\])(:\d+)?$/i.test(host ?? "");
 async function body(request) {
 	const chunks = [];
 	for await (const chunk of request) chunks.push(chunk);
@@ -1406,7 +1896,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 ? {
@@ -1415,8 +1906,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")}`);
@@ -1434,7 +1925,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 }) => {
@@ -1532,30 +2023,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: [],
@@ -1563,7 +2056,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."}
@@ -1573,26 +2066,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;
 }
@@ -1719,7 +2216,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>"],
@@ -1731,26 +2227,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;