proctolog 0.1.0

data/public/review-rounds.js

@@ -0,0 +1,1447 @@
+import { helping, keyOf } from "./keys.js";
+import { prNumber } from "./pr-number.js";
+import {
+	announce,
+	handOver,
+	draftsState,
+	registerRounds,
+	stale,
+	updateDrafts,
+} from "./review-drafts.js";
+import { toast } from "./toast.js";
+import { viewPictures } from "./viewer.js";
+
+const tools = document.querySelector("[data-review-draft]");
+const { repository, burst } = tools.dataset;
+const onPR = document.querySelector("[data-round-results][data-pr]");
+const localPR = onPR ? prNumber(onPR.dataset.pr) : null;
+let context = JSON.parse(
+	document.querySelector("#review-round-data").textContent,
+);
+// The rounds as the desk holds them now; on a pull request's page, with its
+// descriptions.
+const reviewData = async () => {
+	const response = await fetch(
+		`/bursts/${encodeURIComponent(burst)}/review_data${localPR ? `?pr=${localPR}` : ""}`,
+		{ headers: { Accept: "application/json" } },
+	);
+	if (!response.ok) throw new Error(`Desk returned ${response.status}`);
+	return response.json();
+};
+// What GitHub draws of each piece of markdown, by its words, asked once while
+// the page is open: returned work is laid out again at every change of the
+// drafts, and must not fall back to markdown each time. A piece that cannot
+// be drawn stays as written.
+const drawing = new Map();
+const ask = (texts) => {
+	if (!texts.length) return;
+	const asked = fetch(`/bursts/${encodeURIComponent(burst)}/rendered_pieces`, {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+			Accept: "application/json",
+			"X-CSRF-Token":
+				document.querySelector('meta[name="csrf-token"]')?.content ?? "",
+		},
+		body: JSON.stringify({ markdown: texts }),
+	})
+		.then((response) => (response.ok ? response.json() : { pieces: [] }))
+		.then(({ pieces }) => pieces)
+		.catch(() => []);
+	for (const [index, text] of texts.entries())
+		drawing.set(
+			text,
+			asked.then((pieces) => pieces[index]),
+		);
+};
+// Swaps the markdown pieces under `parent` for what GitHub draws of them,
+// their pictures served from here.
+const drawPieces = (parent) => {
+	// What the description says since a handover is drawn only once it is opened.
+	const pieces = [...parent.querySelectorAll("pre[data-markdown]")].filter(
+		(piece) => !piece.closest("details[data-pass-changes]:not([open])"),
+	);
+	ask([
+		...new Set(
+			pieces
+				.map((piece) => piece.textContent)
+				.filter((text) => !drawing.has(text)),
+		),
+	]);
+	for (const piece of pieces)
+		drawing.get(piece.textContent).then((html) => {
+			if (!html || !piece.isConnected) return;
+			const drawn = element("div", undefined, "markdown-body piece");
+			drawn.innerHTML = html;
+			piece.replaceWith(drawn);
+		});
+};
+// Words written in markdown, by an agent or a description, read as written
+// until GitHub's drawing of them comes.
+const markdown = (text) => {
+	const piece = element("pre", text, "as-written");
+	piece.dataset.markdown = "";
+	return piece;
+};
+
+const labels = {
+	leave: "Leave as is",
+	question: "Question / research",
+	change: "Requested change",
+	later: "Backlog task",
+	remark: "Review note",
+	rule: "Rule to record",
+};
+const signature = (item) => JSON.stringify([item.kind, item.text]);
+const choiceItem = (entry) => ({
+	id:
+		entry.requestId ||
+		`choice:${entry.decision.id}:${entry.savedAt || "legacy"}`,
+	pr: entry.decision.pr,
+	kind: entry.kind,
+	text: entry.text || entry.decision.lead,
+	source: {
+		kind: "decision",
+		decision: entry.decision,
+		needsReview: stale(entry),
+	},
+});
+// A withdrawn rule asks nothing more: the request to take it out does.
+const withdrawn = (id) =>
+	(draftsState().requests || []).some(
+		(item) => item.id === id && item.withdrawn,
+	);
+const currentItems = () => [
+	...context.requests,
+	...draftsState().choices.map(choiceItem),
+	...(draftsState().requests || []).filter((item) => !item.withdrawn),
+];
+const batches = () => draftsState().batches || [];
+const feedbackFor = (id) => draftsState().feedback?.[id];
+
+const latestFor = (item) => {
+	const candidates = [];
+	for (const report of draftsState().responses || []) {
+		const batch = batches().find(
+			(candidate) => candidate.id === report.batchId,
+		);
+		const request = batch?.items.find((candidate) => candidate.id === item.id);
+		if (!request || signature(request) !== signature(item)) continue;
+		const result = report.results.find((candidate) => candidate.id === item.id);
+		if (result)
+			candidates.push({
+				report,
+				result,
+				batch,
+				request,
+				key: `${report.id}:${report.createdAt}`,
+				order: batches().indexOf(batch),
+			});
+	}
+	const ordered = candidates
+		.sort(
+			(a, b) =>
+				a.order - b.order ||
+				Date.parse(a.report.createdAt) - Date.parse(b.report.createdAt),
+		)
+		.at(-1);
+	const feedback = feedbackFor(item.id);
+	if (feedback?.intent === signature(item)) {
+		const repliedTo = candidates.find(
+			(candidate) => candidate.key === feedback.replyTo,
+		);
+		if (feedback.resolution === "confirmed") return repliedTo || ordered;
+		if (feedback.resolution === "reopened") {
+			const newer = candidates.filter((candidate) => {
+				const batch = batches().find(
+					(value) => value.id === candidate.report.batchId,
+				);
+				const request = batch.items.find((value) => value.id === item.id);
+				return (
+					Date.parse(batch.createdAt) >= Date.parse(feedback.at) &&
+					request.ownerReply?.text === feedback.text &&
+					request.ownerReply?.kind === feedback.kind
+				);
+			});
+			return (
+				newer
+					.sort(
+						(a, b) =>
+							a.order - b.order ||
+							Date.parse(a.report.createdAt) - Date.parse(b.report.createdAt),
+					)
+					.at(-1) ||
+				repliedTo ||
+				ordered
+			);
+		}
+	}
+	return ordered;
+};
+
+// The batch that last carried a request as it stands, with the owner's
+// reply when they reopened it; and whether anything came back to it.
+const carrier = (item) => {
+	const feedback = feedbackFor(item.id);
+	const reply =
+		feedback?.resolution === "reopened" && feedback.intent === signature(item)
+			? feedback
+			: undefined;
+	return batches().findLast((batch) =>
+		batch.items.some(
+			(request) =>
+				request.id === item.id &&
+				signature(request) === signature(item) &&
+				(!reply ||
+					(request.ownerReply?.kind === reply.kind &&
+						request.ownerReply?.text === reply.text)),
+		),
+	);
+};
+const dayAndTime = (at) =>
+	new Date(at).toLocaleString("en-GB", {
+		day: "numeric",
+		month: "short",
+		hour: "2-digit",
+		minute: "2-digit",
+	});
+const handedOverAt = (batch) => dayAndTime(batch.createdAt);
+// An answer named as the owner knows it: by the handover it answers.
+const answerTo = (report) => {
+	const batch = batches().find((candidate) => candidate.id === report.batchId);
+	return batch
+		? `The agent's answer to the handover of ${handedOverAt(batch)}`
+		: "An agent's answer";
+};
+const answered = (batch) =>
+	(draftsState().responses || []).some((report) => report.batchId === batch.id);
+// For the next pass, unless an agent took it and has not answered: the desk
+// holds that back (Rounds#state_of in rounds.rb follows the same rules).
+const forAgent = (item) => {
+	const batch = carrier(item);
+	return batch && !answered(batch) ? "out" : "agent";
+};
+
+const statusOf = (item) => {
+	if (item.pr && !Object.hasOwn(context.heads, item.pr)) return "archived";
+	if (withdrawn(item.id)) return "archived";
+	if (
+		item.source.kind === "decision" &&
+		!draftsState().choices.some((entry) => choiceItem(entry).id === item.id)
+	)
+		return "archived";
+	if (item.kind === "leave" && item.source.decision?.id.startsWith("missing:"))
+		return "archived";
+	if (item.kind === "leave") return "closed";
+	const latest = latestFor(item);
+	const feedback = feedbackFor(item.id);
+	if (!latest) return forAgent(item);
+	if (feedback?.intent === signature(item) && feedback.replyTo === latest.key)
+		return feedback.resolution === "confirmed" ? "closed" : forAgent(item);
+	return latest.result.status === "needs_owner" ? "question" : "owner";
+};
+
+const allItems = () => {
+	const items = new Map(currentItems().map((item) => [item.id, item]));
+	for (const batch of batches())
+		for (const item of batch.items)
+			if (!items.has(item.id) && latestFor(item)) items.set(item.id, item);
+	return [...items.values()];
+};
+
+const validateResponse = (report) => {
+	if (
+		report?.format !== "proctolog-response/v1" ||
+		report.repository !== repository ||
+		report.review !== burst ||
+		!["id", "batchId", "createdAt", "summary"].every(
+			(key) => typeof report[key] === "string" && report[key].trim(),
+		) ||
+		!Number.isFinite(Date.parse(report.createdAt)) ||
+		!Array.isArray(report.results)
+	)
+		throw new Error("Not a proctolog-response/v1 response for this burst.");
+	const batch = batches().find((candidate) => candidate.id === report.batchId);
+	if (!batch)
+		throw new Error(
+			"This batch is not in this browser. Restore its choices backup, or export a new handover.",
+		);
+	const allowed = new Set(batch.items.map((item) => item.id));
+	const seen = new Set();
+	for (const result of report.results) {
+		if (!allowed.has(result.id) || seen.has(result.id))
+			throw new Error(`Unknown or repeated request: ${result.id}`);
+		seen.add(result.id);
+		if (
+			!["done", "answered", "deferred", "needs_owner", "blocked"].includes(
+				result.status,
+			) ||
+			!["summary", "details"].every((key) => typeof result[key] === "string") ||
+			!result.summary.trim() ||
+			!Array.isArray(result.evidence) ||
+			!Array.isArray(result.verification)
+		)
+			throw new Error(`Incomplete result for ${result.id}.`);
+		if (
+			result.status === "needs_owner" &&
+			(!result.question ||
+				!["prompt", "recommendation"].every(
+					(key) =>
+						typeof result.question[key] === "string" &&
+						result.question[key].trim(),
+				) ||
+				typeof result.question.blocking !== "boolean")
+		)
+			throw new Error(
+				`Question ${result.id} needs a recommendation and a blocking flag.`,
+			);
+		if (
+			result.evidence.some(
+				(entry) => !entry || typeof entry.label !== "string",
+			) ||
+			result.verification.some(
+				(entry) =>
+					!entry ||
+					typeof entry.command !== "string" ||
+					!["passed", "failed", "not_run"].includes(entry.result),
+			)
+		)
+			throw new Error(
+				`Evidence or verification has the wrong shape for ${result.id}.`,
+			);
+		if (
+			result.status === "deferred" &&
+			(typeof result.backlog !== "string" || !result.backlog.trim())
+		)
+			throw new Error(
+				`Deferred request ${result.id} needs a backlog reference or proposed task.`,
+			);
+		if (result.head !== undefined && !/^[a-f0-9]{40}$/.test(result.head))
+			throw new Error(`Result ${result.id} needs a full verified head hash.`);
+	}
+	if (
+		report.followups !== undefined &&
+		(!Array.isArray(report.followups) ||
+			report.followups.some((entry) => typeof entry !== "string"))
+	)
+		throw new Error(
+			"Follow-ups must be a list of suggestions; they do not add requests.",
+		);
+	return report;
+};
+
+// An answer is known by its id and the time it was written: one an agent
+// writes again under a new time is a newer version of it, shown in its place,
+// and the one before goes under the earlier responses. The owner's replies
+// name the version they answered, so none moves to words they did not read.
+const versionOf = (report) => `${report.id}:${report.createdAt}`;
+const repliedTo = (version) =>
+	Object.values(draftsState().feedback || {}).some(
+		(feedback) =>
+			feedback?.replyTo === version ||
+			feedback?.history?.some((reply) => reply?.replyTo === version),
+	);
+
+// Takes an answer in, and says whether it was new, a newer version of one
+// already shown, or nothing the page did not have.
+const acceptResponse = (report) => {
+	try {
+		validateResponse(report);
+	} catch (error) {
+		throw new Error(`${answerTo(report)} cannot be read: ${error.message}`);
+	}
+	const kept = draftsState().responses || [];
+	const same = kept.find(
+		(candidate) => versionOf(candidate) === versionOf(report),
+	);
+	if (same && JSON.stringify(same) === JSON.stringify(report)) return;
+	// Written again without a new time, it can stand in for the old one only
+	// while the owner has not replied to it.
+	if (same && repliedTo(versionOf(same)))
+		throw new Error(
+			`${answerTo(report)} was changed after you replied to it, and kept its old time, so the desk cannot tell the two apart. It goes on showing the version you replied to.`,
+		);
+	const earlier = kept.filter((candidate) => candidate.id === report.id);
+	updateDrafts((state) => {
+		state.responses = [
+			...(state.responses || []).filter(
+				(candidate) => versionOf(candidate) !== versionOf(report),
+			),
+			report,
+		];
+	});
+	return earlier.length ? "rewritten" : "new";
+};
+
+const element = (tag, text, className) => {
+	const node = document.createElement(tag);
+	if (text !== undefined) node.textContent = text;
+	if (className) node.className = className;
+	return node;
+};
+
+const button = (label, action) => {
+	const node = element("button", label, "quiet");
+	node.type = "button";
+	node.addEventListener("click", action);
+	return node;
+};
+
+const safeLink = (url, label) => {
+	try {
+		const parsed = new URL(url);
+		if (!["https:", "http:"].includes(parsed.protocol))
+			return element("span", label);
+		const link = element("a", label);
+		link.href = parsed.href;
+		link.target = "_blank";
+		link.rel = "noopener noreferrer";
+		return link;
+	} catch {
+		return element("span", label);
+	}
+};
+
+// On a pull request's page the reading goes through returned work block by
+// block, as through the description (notes.js), and the cursor stands beside
+// the block it rests on. Each block is named by its part, unique on the page,
+// so that the reading keeps its place when the work is laid out again.
+const stop = (node, part) => {
+	node.dataset.part = part;
+	if (!onPR) return node;
+	node.dataset.reading = "";
+	if (node.localName !== "summary") node.tabIndex = -1;
+	return node;
+};
+// A block of words, drawn as GitHub draws markdown.
+const said = (text, part, className = "response-prose") => {
+	const block = stop(element("div", undefined, className), part);
+	block.append(markdown(text));
+	return block;
+};
+
+// Whether each fold of returned work is open, by its part, so that laying the
+// work out again leaves the folds as the owner left them.
+const folds = new Map();
+const fold = (part, label, open = false) => {
+	const details = element("details");
+	details.open = folds.get(part) ?? open;
+	details.addEventListener("toggle", () => folds.set(part, details.open));
+	details.append(stop(element("summary", label), part));
+	return details;
+};
+
+// What an answer rests on, as the owner would check it: the pictures it names
+// shown, each before beside its after; the files and pages it names; and the
+// checks the agent ran, with how each came out.
+const PICTURE = /\.(png|jpe?g|gif|webp)$/i;
+const evidenceAt = (path) =>
+	`/bursts/${encodeURIComponent(burst)}/evidence?path=${encodeURIComponent(path)}`;
+// A before and its after are pictures named alike but for that word.
+const afterOf = (path) => path.replace(/before(?=[^/]*$)/, "after");
+const inPairs = (pictures) => {
+	const placed = new Set();
+	return pictures.flatMap((entry) => {
+		if (placed.has(entry)) return [];
+		const twin = (match) =>
+			pictures.find(
+				(other) => other !== entry && !placed.has(other) && match(other),
+			);
+		const after = twin((other) => other.path === afterOf(entry.path));
+		const before = twin((other) => afterOf(other.path) === entry.path);
+		const shots = after ? [entry, after] : before ? [before, entry] : [entry];
+		for (const shot of shots) placed.add(shot);
+		return [shots];
+	});
+};
+// A pair is named as its before is, without the word.
+const nameOf = ([first, second]) =>
+	(second && first.label.replace(/[\s,:·–—-]*before\s*$/i, "")) || first.label;
+
+const pictureOf = (shots, part) => {
+	const figure = stop(element("figure", undefined, "evidence"), part);
+	figure.dataset.name = nameOf(shots);
+	if (shots.length > 1)
+		figure.dataset.compare = `/bursts/${encodeURIComponent(burst)}/evidence/compare?${new URLSearchParams({ before: shots[0].path, after: shots[1].path })}`;
+	shots.forEach((entry, index) => {
+		const shot = element("span", undefined, "shot");
+		const image = element("img");
+		Object.assign(image, {
+			src: evidenceAt(entry.path),
+			alt: entry.label,
+			loading: "lazy",
+			draggable: false,
+		});
+		image.addEventListener("error", () =>
+			image.replaceWith(
+				element("span", `Not on this Mac: ${entry.path}`, "missing"),
+			),
+		);
+		shot.append(image);
+		if (shots.length > 1)
+			shot.append(element("span", index ? "after" : "before", "half-said"));
+		figure.append(shot);
+	});
+	figure.append(element("figcaption", figure.dataset.name));
+	return figure;
+};
+
+const evidenceOf = (result, at) => {
+	const pictures = result.evidence.filter((entry) =>
+		PICTURE.test(entry.path ?? ""),
+	);
+	const named = result.evidence.filter((entry) => !pictures.includes(entry));
+	const shown = fold(
+		at("evidence"),
+		`Evidence · ${result.evidence.length}`,
+		true,
+	);
+	for (const [index, shots] of inPairs(pictures).entries())
+		shown.append(pictureOf(shots, at(`picture ${index}`)));
+	if (named.length) {
+		const list = stop(element("ul", undefined, "evidence-named"), at("named"));
+		for (const entry of named) {
+			const row = element("li");
+			row.append(
+				entry.url
+					? safeLink(entry.url, entry.label)
+					: element("span", entry.label),
+			);
+			if (entry.path) row.append(element("code", entry.path));
+			if (entry.quote) row.append(element("blockquote", entry.quote));
+			list.append(row);
+		}
+		shown.append(list);
+	}
+	return shown;
+};
+
+const RESULTS = { passed: "passed", failed: "failed", not_run: "not run" };
+const verificationOf = (result, at) => {
+	const passed = result.verification.filter(
+		(check) => check.result === "passed",
+	).length;
+	const checks = fold(
+		at("verification"),
+		`Verification · ${passed} of ${result.verification.length} passed`,
+		true,
+	);
+	const list = stop(element("ul", undefined, "checks"), at("checks"));
+	for (const check of result.verification) {
+		const row = element("li");
+		row.dataset.result = check.result;
+		row.append(
+			element("span", RESULTS[check.result], "check"),
+			element("code", check.command),
+		);
+		if (check.head) row.append(element("span", ` at ${check.head}`, "reading"));
+		list.append(row);
+	}
+	checks.append(list);
+	return checks;
+};
+
+// Looks closely at the pictures of a response, from the one given, as the
+// description's are looked at: a pair is compared by its halves.
+const lookAt = (figure) => {
+	const all = [
+		...figure.closest("[data-request]").querySelectorAll("figure.evidence"),
+	];
+	const shown = (one) => {
+		const images = [...one.querySelectorAll("img")];
+		const picture = (image) => ({
+			src: image.src,
+			alt: image.alt,
+			name: image.alt,
+		});
+		return images.length > 1
+			? {
+					name: one.dataset.name,
+					pair: images.map(picture),
+					compare: one.dataset.compare,
+				}
+			: { ...picture(images[0]), name: one.dataset.name };
+	};
+	const pictures = all.filter((one) => one.querySelector("img"));
+	if (!pictures.includes(figure))
+		return toast("That picture is not on this Mac.");
+	viewPictures(pictures.map(shown), pictures.indexOf(figure));
+};
+
+const mark = (item, resolution, latest, kind, text) => {
+	const nodes = visibleResponses();
+	const at = nodes.findIndex((node) => node.dataset.request === item.id);
+	const next = nodes[at + 1]?.dataset.request || nodes[at - 1]?.dataset.request;
+	updateDrafts((state) => {
+		const previous = state.feedback?.[item.id];
+		state.feedback = {
+			...(state.feedback || {}),
+			[item.id]: {
+				history: previous
+					? [...(previous.history || []), { ...previous, history: undefined }]
+					: [],
+				resolution,
+				replyTo: latest.key,
+				intent: signature(item),
+				kind,
+				text,
+				at: new Date().toISOString(),
+			},
+		};
+	});
+	selectResponse(
+		visibleResponses().find((node) => node.dataset.request === next) ||
+			visibleResponses()[0],
+	);
+	if (!visibleResponses().length && onPR) {
+		document.querySelector("[data-hand-over]").focus();
+		announce(
+			"Returned work reviewed. Confirmed requests stay closed; corrections join the next handover.",
+		);
+	}
+};
+
+const editor = (slot, label, save, chooseKind = false) => {
+	slot.replaceChildren();
+	const form = element("form", undefined, "choice-editor");
+	const name = element("label", label);
+	const textarea = element("textarea");
+	textarea.id = `reply-${crypto.randomUUID()}`;
+	name.htmlFor = textarea.id;
+	textarea.rows = 3;
+	textarea.required = true;
+	const submit = element("button", "Save reply", "primary");
+	submit.type = "submit";
+	const help = element(
+		"p",
+		"Ctrl/⌘ + Enter saves. Escape closes the editor.",
+		"reading",
+	);
+	const kind = element("select");
+	if (chooseKind) {
+		kind.id = `kind-${crypto.randomUUID()}`;
+		const kindLabel = element("label", "Kind of request");
+		kindLabel.htmlFor = kind.id;
+		for (const value of ["question", "change", "later"]) {
+			const option = element("option", labels[value]);
+			option.value = value;
+			kind.append(option);
+		}
+		form.append(kindLabel, kind);
+	}
+	form.append(
+		name,
+		textarea,
+		help,
+		submit,
+		button("Cancel", () => {
+			slot.replaceChildren();
+			slot.closest("[data-request]")?.focus();
+		}),
+	);
+	form.addEventListener("submit", (event) => {
+		event.preventDefault();
+		if (!textarea.value.trim()) return;
+		save(textarea.value.trim(), kind.value || "question");
+	});
+	form.addEventListener("keydown", (event) => {
+		if (keyOf(event) === "Enter" && (event.metaKey || event.ctrlKey)) {
+			event.preventDefault();
+			form.requestSubmit();
+		}
+		if (keyOf(event) === "Escape") {
+			event.preventDefault();
+			slot.replaceChildren();
+			slot.closest("[data-request]")?.focus();
+		}
+	});
+	slot.append(form);
+	textarea.focus();
+};
+
+const renderResult = (item) => {
+	const latest = latestFor(item);
+	const state = statusOf(item);
+	const at = (part) => `${item.id} ${part}`;
+	const article = element("article", undefined, "round-result");
+	article.dataset.request = item.id;
+	article.dataset.reviewState = state;
+	// Elsewhere the reading rests on a response whole.
+	if (!onPR) article.tabIndex = -1;
+	const title =
+		onPR && item.source.decision?.lead
+			? item.source.decision.lead
+			: `${item.pr && !onPR ? `#${item.pr} · ` : ""}${labels[item.kind] || item.kind}`;
+	article.append(stop(element("h3", title), at("title")));
+	article.append(stop(element("p", item.text, "request-text"), at("request")));
+	const feedback = feedbackFor(item.id);
+	const ownerReply =
+		feedback?.resolution === "reopened" ? feedback : latest?.request.ownerReply;
+	if (ownerReply?.text)
+		article.append(
+			stop(
+				element("p", `Your reply: ${ownerReply.text}`, "request-text"),
+				at("reply"),
+			),
+		);
+	if (item.source.decision?.text) {
+		const original = fold(at("reviewed"), "What you reviewed");
+		original.append(
+			said(
+				item.source.decision.text.replace(/<!--.*?-->/g, ""),
+				at("reviewed words"),
+			),
+		);
+		article.append(original);
+	}
+	if (item.source.kind === "code") {
+		const anchor = item.source.anchor;
+		article.append(
+			stop(
+				element(
+					"p",
+					`${anchor.path}${anchor.kind === "line" ? `:${anchor.startLine}-${anchor.endLine}` : " (whole file)"}`,
+					"reading",
+				),
+				at("place"),
+			),
+		);
+		if (anchor.quoted)
+			article.append(
+				stop(element("pre", anchor.quoted, "quoted-code"), at("quoted")),
+			);
+	}
+	const stateText =
+		item.kind === "leave"
+			? "Left as is"
+			: state === "closed"
+				? latest?.result.status === "deferred"
+					? "Confirmed · filed for later"
+					: "Confirmed"
+				: state === "agent"
+					? "For the next agent handover"
+					: state === "out"
+						? `With an agent since ${handedOverAt(carrier(item))} · no answer yet`
+						: state === "question"
+							? "Your answer is needed"
+							: "Answered · yours to confirm";
+	article.append(stop(element("p", stateText, "response-state"), at("state")));
+	if (item.source.needsReview)
+		article.append(
+			stop(
+				element(
+					"p",
+					"This decision's wording changed. Revisit the decision before continuing this request.",
+					"response-warning",
+				),
+				at("wording"),
+			),
+		);
+	if (!latest) return article;
+	const { result } = latest;
+	const reviewedHead =
+		latest.request.source.reviewedHead ||
+		latest.request.source.decision?.head ||
+		latest.request.source.head ||
+		latest.batch.heads?.[item.pr]?.head;
+	if (item.pr && result.head) {
+		const openCode = (label, base, primary = false) => {
+			const form = element("form");
+			form.method = "post";
+			form.action = `/bursts/${encodeURIComponent(burst)}/pull_requests/${item.pr}/code_review`;
+			form.target = "_blank";
+			if (primary) form.dataset.returnedCode = "";
+			for (const [name, value] of [
+				[
+					"authenticity_token",
+					document.querySelector('meta[name="csrf-token"]').content,
+				],
+				["head", result.head],
+				["base", base],
+			]) {
+				const input = element("input");
+				input.type = "hidden";
+				input.name = name;
+				input.value = value;
+				form.append(input);
+			}
+			const open = element("button", label, "quiet");
+			open.type = "submit";
+			if (primary) open.append(" ", element("kbd", "d"));
+			form.append(open);
+			article.append(form);
+		};
+		if (reviewedHead && reviewedHead !== result.head)
+			openCode("Review changes", reviewedHead, true);
+		else
+			article.append(
+				stop(
+					element(
+						"p",
+						reviewedHead === result.head
+							? "No code changes since your reviewed head."
+							: "Earlier reviewed head unavailable; use the whole PR view.",
+						"reading",
+					),
+					at("code"),
+				),
+			);
+		openCode("Whole PR against main", "main", !reviewedHead);
+	}
+	article.append(said(result.summary, at("summary"), "response-summary"));
+	if (result.details.trim())
+		article.append(said(result.details, at("details")));
+	const earlier = (draftsState().responses || []).filter(
+		(report) =>
+			versionOf(report) !== versionOf(latest.report) &&
+			report.results.some((result) => result.id === item.id),
+	);
+	if (earlier.length || feedback?.history?.some((reply) => reply.text)) {
+		const history = fold(at("earlier"), "Earlier replies and responses");
+		(feedback?.history || []).forEach((reply, index) => {
+			if (reply.text)
+				history.append(
+					stop(
+						element("p", `You: ${reply.text}`, "request-text"),
+						at(`earlier reply ${index}`),
+					),
+				);
+		});
+		for (const report of earlier) {
+			const answer = report.results.find((result) => result.id === item.id);
+			history.append(
+				said(
+					answer.summary,
+					at(`earlier ${versionOf(report)}`),
+					"response-summary",
+				),
+				said(answer.details, at(`earlier ${versionOf(report)} details`)),
+			);
+		}
+		article.append(history);
+	}
+	if (result.head && item.pr && context.heads[item.pr]?.head !== result.head)
+		article.append(
+			stop(
+				element(
+					"p",
+					"The PR head differs from this response's verification. Your settled intent stays settled; verification must be checked on the current head before merge.",
+					"response-warning",
+				),
+				at("head"),
+			),
+		);
+	if (result.question) {
+		article.append(
+			said(result.question.prompt, at("question"), "owner-question"),
+			said(
+				`**Recommendation:** ${result.question.recommendation}`,
+				at("recommendation"),
+			),
+			stop(
+				element(
+					"p",
+					result.question.blocking
+						? "Blocks this request"
+						: "Does not block this request",
+					"reading",
+				),
+				at("blocking"),
+			),
+		);
+		if (Array.isArray(result.question.options))
+			article.append(
+				stop(
+					element(
+						"p",
+						`Options: ${result.question.options.join(" · ")}`,
+						"response-prose",
+					),
+					at("options"),
+				),
+			);
+	}
+	if (result.backlog)
+		article.append(
+			stop(
+				element(
+					"p",
+					`Backlog: ${typeof result.backlog === "string" ? result.backlog : JSON.stringify(result.backlog)}`,
+					"response-prose",
+				),
+				at("backlog"),
+			),
+		);
+	if (result.evidence.length) article.append(evidenceOf(result, at));
+	if (result.verification.length) article.append(verificationOf(result, at));
+	const actions = element("div", undefined, "actions");
+	const slot = element("div");
+	if (state === "archived") return article;
+	if (
+		state !== "closed" &&
+		result.status !== "needs_owner" &&
+		result.status !== "blocked"
+	) {
+		const confirm = button("Confirm and close ", () =>
+			mark(item, "confirmed", latest),
+		);
+		confirm.append(element("kbd", "a"));
+		confirm.dataset.responseAction = "a";
+		actions.append(confirm);
+	}
+	const reply = (kind, label) =>
+		editor(slot, label, (text) => mark(item, "reopened", latest, kind, text));
+	for (const [key, label, kind, prompt] of [
+		[
+			"q",
+			result.status === "needs_owner"
+				? "Answer this question"
+				: "Ask a follow-up",
+			"question",
+			result.status === "needs_owner"
+				? "Your answer to the agent"
+				: "Your follow-up question",
+		],
+		["c", "Request a correction", "change", "What still needs changing?"],
+		[
+			"l",
+			"Leave for later",
+			"later",
+			"What should be recorded as a backlog task?",
+		],
+	]) {
+		const action = button(`${label} `, () => reply(kind, prompt));
+		action.append(element("kbd", key));
+		action.dataset.responseAction = key;
+		actions.append(action);
+	}
+	if (state === "closed")
+		actions.append(
+			button("Reopen", () =>
+				reply("change", "Why does this request need another pass?"),
+			),
+		);
+	article.append(actions, slot);
+	return article;
+};
+
+const render = () => {
+	const focused =
+		document.activeElement.closest("[data-request]")?.dataset.request;
+	const place = document.activeElement.closest(
+		"[data-round-results] [data-part]",
+	)?.dataset.part;
+	const items = allItems().filter((item) => !onPR || item.pr === localPR);
+	const counts = {
+		agent: 0,
+		out: 0,
+		owner: 0,
+		question: 0,
+		closed: 0,
+		archived: 0,
+	};
+	for (const item of items) counts[statusOf(item)]++;
+	const questions = `${counts.question} ${counts.question === 1 ? "question" : "questions"} for you`;
+	tools.querySelector("[data-round-summary]").textContent =
+		`${counts.agent} for the agent · ${counts.out} with an agent · ${counts.owner} to confirm · ${questions} · ${counts.closed} closed${counts.archived ? ` · ${counts.archived} archived` : ""}`;
+	// Beside the progress, only what asks something of someone.
+	const asks = [
+		[counts.question, questions],
+		[counts.owner, `${counts.owner} returned, to confirm`],
+		[counts.agent, `${counts.agent} for the agent's next handover`],
+		[counts.out, `${counts.out} with an agent`],
+	]
+		.filter(([count]) => count)
+		.map(([, text]) => text);
+	const roundLine = tools.querySelector("[data-round-line]");
+	roundLine.textContent = asks.join(" · ");
+	roundLine.hidden = !asks.length;
+	const container = document.querySelector("[data-round-results]");
+	if (!container) return;
+	container.id = "responses";
+	// On a pull request's page it shows once something came back or was kept
+	// from earlier wording: a decision left as is has nothing to return.
+	container.hidden =
+		!!onPR &&
+		!items.some(
+			(item) => latestFor(item) || ["archived", "out"].includes(statusOf(item)),
+		);
+	container.replaceChildren(stop(element("h2", "Returned work"), "returned"));
+	// What asks nothing of the owner folds away here, so that what does comes first.
+	const background = fold("background", "Background");
+	background.className = "round-background";
+	container.append(
+		stop(
+			element(
+				"p",
+				asks.length
+					? `Waiting: ${asks.join(" · ")}`
+					: "Nothing is waiting. Press e to hand over.",
+				"round-status",
+			),
+			"status",
+		),
+	);
+	const waiting = items.some((item) =>
+		["owner", "question"].includes(statusOf(item)),
+	);
+	const entry = document.querySelector("[data-enter-responses]");
+	if (entry) entry.hidden = !waiting;
+	const newest = draftsState().responses?.at(-1);
+	if (newest && !onPR)
+		container.append(element("p", newest.summary, "response-prose"));
+	if (!onPR)
+		container.append(
+			element(
+				"p",
+				"Confirm an answer to close its request. Reply on the same request to continue it. Closed requests stay out of the next handover. This does not approve merging or release.",
+				"response-prose",
+			),
+		);
+	const responses = items.filter(
+		(item) =>
+			latestFor(item) || ["closed", "archived", "out"].includes(statusOf(item)),
+	);
+	if (onPR) {
+		// The desk keeps each description as a handover found it; a batch
+		// from before it did carries its own.
+		const handedOver = (batch) =>
+			context.descriptions?.handedOver[batch.id] ??
+			batch.heads?.[localPR]?.descriptionText;
+		const batch = batches().findLast(
+			(batch) =>
+				handedOver(batch) !== undefined &&
+				responses.some((item) => latestFor(item)?.batch.id === batch.id),
+		);
+		if (batch) {
+			const paragraphs = (text) =>
+				text
+					.replace(/<!-- proctolog:decision [\w.-]+ -->/g, "")
+					.replace(/\r\n/g, "\n")
+					.split(/\n[ \t]*\n/)
+					.map((text) => text.trim())
+					.filter(Boolean);
+			const before = paragraphs(handedOver(batch));
+			const after = paragraphs(context.descriptions.now);
+			const added = after.filter((text) => !before.includes(text));
+			const changes = fold(
+				"changes",
+				"Description changes since this handover",
+			);
+			changes.dataset.passChanges = "";
+			if (!added.length)
+				changes.append(
+					stop(
+						element(
+							"p",
+							"No new or rewritten paragraphs on GitHub since this handover.",
+							"reading",
+						),
+						"changes none",
+					),
+				);
+			for (const [index, text] of added.entries())
+				changes.append(said(text, `change ${index}`));
+			// Drawn once it is opened: what it says is the description's, not the agent's.
+			changes.addEventListener("toggle", () => drawPieces(changes));
+			background.append(changes);
+		}
+	}
+	const lostDrafts = draftsState().pending.filter(
+		(entry) =>
+			entry.decision.id.startsWith("missing:") &&
+			(!onPR || entry.decision.pr === localPR),
+	);
+	if (lostDrafts.length) {
+		container.hidden = false;
+		const kept = fold("lost", "Unfinished drafts kept from earlier wording");
+		for (const entry of lostDrafts) {
+			kept.append(
+				stop(
+					element("p", `#${entry.decision.pr} · ${entry.decision.lead}`),
+					`lost ${entry.requestId}`,
+				),
+				stop(
+					element("p", entry.text, "response-prose"),
+					`lost ${entry.requestId} words`,
+				),
+			);
+			const recover = button("Recover as a request", () =>
+				updateDrafts((state) => {
+					state.pending = state.pending.filter(
+						(item) => item.requestId !== entry.requestId,
+					);
+					state.requests = [
+						...(state.requests || []),
+						{
+							id: `request:${crypto.randomUUID()}`,
+							pr: Object.hasOwn(context.heads, entry.decision.pr)
+								? entry.decision.pr
+								: null,
+							kind: entry.kind,
+							text: entry.text,
+							source: {
+								kind: "recovered_draft",
+								formerDecision: entry.decision,
+							},
+						},
+					];
+				}),
+			);
+			recover.disabled = !entry.text.trim();
+			kept.append(recover);
+		}
+		background.append(kept);
+	}
+	if (!responses.length)
+		container.append(
+			element(
+				"p",
+				"Hand over with e, then refresh once the agent writes its answer to the response folder, or import that answer.",
+			),
+		);
+	const asksOfOwner = ["question", "owner", "agent"];
+	for (const state of [
+		"question",
+		"owner",
+		"agent",
+		"out",
+		"closed",
+		"archived",
+	]) {
+		const group = responses.filter((item) => statusOf(item) === state);
+		if (!group.length) continue;
+		const heading = {
+			question: "Questions for you",
+			owner: "Confirm or push back",
+			agent: "Reopened for the next pass",
+			out: "With an agent",
+			closed: "Closed requests",
+			archived: "Earlier review context",
+		}[state];
+		const section = ["closed", "archived"].includes(state)
+			? fold(`group ${state}`, heading)
+			: element("section");
+		if (section.localName === "section")
+			section.append(stop(element("h3", heading), `group ${state}`));
+		// What an agent took stays out of the next pass until it answers; one
+		// that never will is let go of here.
+		if (state === "out") {
+			section.append(
+				stop(
+					element(
+						"p",
+						"An agent took these and has not answered. The next handover leaves them out, so that two agents never do the same work.",
+						"response-prose",
+					),
+					"group out said",
+				),
+				button("Hand them over again", () => handOver({ again: true })),
+			);
+		}
+		for (const item of group) section.append(renderResult(item));
+		(asksOfOwner.includes(state) ? container : background).append(section);
+	}
+	if (background.children.length > 1) container.append(background);
+	const followups = [
+		...new Set(
+			(draftsState().responses || []).flatMap(
+				(report) => report.followups || [],
+			),
+		),
+	];
+	if (followups.length && !onPR) {
+		const section = element("details");
+		section.append(
+			element("summary", "Suggested follow-ups · outside this review"),
+		);
+		section.append(
+			element(
+				"p",
+				"These do not add requests or hold up this review. Add one explicitly only if you want to take it on.",
+			),
+		);
+		const list = element("ul");
+		for (const text of followups) list.append(element("li", text));
+		section.append(list);
+		container.append(section);
+	}
+	const addSlot = element("div");
+	container.append(
+		button("Ask or request something else", () =>
+			editor(
+				addSlot,
+				"A new request outside the existing PR items",
+				(text, kind) => {
+					updateDrafts((state) => {
+						state.requests = [
+							...(state.requests || []),
+							{
+								id: `request:${crypto.randomUUID()}`,
+								pr: localPR,
+								kind,
+								text,
+								source: { kind: "discussion" },
+							},
+						];
+					});
+				},
+				true,
+			),
+		),
+		addSlot,
+	);
+	drawPieces(container);
+	// The reading stays where it was, whatever moved around it.
+	const again =
+		place && container.querySelector(`[data-part="${CSS.escape(place)}"]`);
+	if (onPR && again?.getClientRects().length)
+		again.focus({ preventScroll: true });
+	else if (focused)
+		selectResponse(
+			visibleResponses().find((node) => node.dataset.request === focused),
+		);
+};
+
+// A batch the desk wrote, of a pass `e` or an agent took, becomes this
+// page's as well, so that the answer to it is known when it comes back.
+const importServerBatches = () => {
+	const known = new Set(batches().map((batch) => batch.id));
+	const fresh = (context.batches || []).filter((batch) => !known.has(batch.id));
+	if (fresh.length)
+		updateDrafts((state) => {
+			state.batches = [...(state.batches || []), ...fresh];
+		});
+};
+
+// What an answer the desk could not take in is wrong with it, said once in
+// this browser rather than at every page: m shows it again.
+const SAID = `proctolog:answers-said:${repository}:${burst}`;
+const unsaid = (failures) => {
+	try {
+		const said = JSON.parse(localStorage.getItem(SAID) ?? "[]");
+		localStorage.setItem(
+			SAID,
+			JSON.stringify([...new Set([...said, ...failures])].slice(-50)),
+		);
+		return failures.filter((failure) => !said.includes(failure));
+	} catch {
+		return failures;
+	}
+};
+const importServerResponses = () => {
+	const failures = [...context.errors];
+	const said = [];
+	let taken = 0;
+	for (const report of context.reports) {
+		try {
+			const outcome = acceptResponse(report);
+			if (outcome === "new") taken += 1;
+			if (outcome === "rewritten")
+				said.push(
+					`${answerTo(report)} was written again on ${dayAndTime(report.createdAt)}. The desk shows the new version; the one before is under “Earlier replies and responses”.`,
+				);
+		} catch (error) {
+			failures.push(error.message);
+		}
+	}
+	if (taken)
+		said.unshift(
+			`${taken === 1 ? "An agent's answer came back" : `${taken} agents' answers came back`}: v on a pull request's page reads it, to confirm or reply.`,
+		);
+	said.push(...unsaid(failures));
+	if (said.length) announce(said.join("\n"));
+	render();
+};
+
+registerRounds({
+	isActivePR: (pr) => Object.hasOwn(context.heads, pr),
+	isChoiceClosed: (entry) => {
+		const item = {
+			id:
+				entry.requestId ||
+				`choice:${entry.decision.id}:${entry.savedAt || "legacy"}`,
+			kind: entry.kind,
+			text: entry.text || entry.decision.lead,
+		};
+		const feedback = feedbackFor(item.id);
+		return (
+			feedback?.resolution === "confirmed" &&
+			feedback.intent === signature(item) &&
+			latestFor(item)?.key === feedback.replyTo
+		);
+	},
+	refresh: async () => {
+		context = await reviewData();
+		importServerBatches();
+		importServerResponses();
+	},
+});
+
+tools
+	.querySelector("[data-import-response]")
+	.addEventListener("change", async (event) => {
+		try {
+			const file = event.target.files[0];
+			if (!file) return;
+			const outcome = acceptResponse(JSON.parse(await file.text()));
+			announce(
+				outcome
+					? "Agent response imported. Confirm or reply to its existing requests."
+					: "The desk has this answer already.",
+			);
+		} catch (error) {
+			announce(`Response could not be imported: ${error.message}`);
+		} finally {
+			event.target.value = "";
+		}
+	});
+
+tools
+	.querySelector("[data-refresh-review]")
+	.addEventListener("click", async (event) => {
+		const button = event.target;
+		button.disabled = true;
+		try {
+			context = await reviewData();
+			importServerBatches();
+			importServerResponses();
+		} catch (error) {
+			announce(
+				`Comments and responses could not be refreshed: ${error.message}`,
+			);
+		} finally {
+			button.disabled = false;
+		}
+	});
+
+document.addEventListener("drafts-changed", render);
+let activeResponse;
+const visibleResponses = () =>
+	[...document.querySelectorAll("[data-round-results] [data-request]")].filter(
+		(node) => !node.closest("details:not([open])"),
+	);
+// The response the reading is in is marked whole, wherever in it the reading rests.
+const markResponse = (node) => {
+	activeResponse?.removeAttribute("aria-current");
+	node?.setAttribute("aria-current", "true");
+	if (node) activeResponse = node;
+};
+// Onto a response: on a pull request's page the reading rests on its title,
+// elsewhere on the response whole.
+const selectResponse = (node) => {
+	if (!node) return markResponse(undefined);
+	const target = onPR ? node.querySelector("[data-reading]") : node;
+	target.focus({ preventScroll: true });
+	target.scrollIntoView({ block: "nearest" });
+	markResponse(node);
+};
+// Where v was pressed, for Esc to go back to.
+let cameFrom;
+const enterResponses = () => {
+	// A page that shows one decision alone shows all of itself again first.
+	delete document.body.dataset.focus;
+	const here = document.activeElement.closest?.("[data-reading]");
+	if (here && !here.closest("[data-round-results]")) cameFrom = here;
+	selectResponse(
+		visibleResponses().find((node) =>
+			["owner", "question"].includes(node.dataset.reviewState),
+		) || visibleResponses()[0],
+	);
+};
+const leaveResponses = () => {
+	const back =
+		cameFrom?.isConnected && cameFrom.getClientRects().length
+			? cameFrom
+			: document.querySelector("main.description details.section > summary");
+	back?.focus({ preventScroll: true });
+	back?.scrollIntoView({ block: "nearest" });
+};
+document
+	.querySelector("[data-enter-responses]")
+	?.addEventListener("click", enterResponses);
+document.addEventListener("focusin", (event) => {
+	// A picture looked at closely leaves the response marked: Esc comes back to it.
+	if (event.target.closest("dialog")) return;
+	const node = event.target.closest("[data-request]");
+	if (node) markResponse(node);
+	else activeResponse?.removeAttribute("aria-current");
+});
+// A picture an answer rests on opens at a click, as the description's do.
+document.addEventListener("click", (event) => {
+	const figure = event.target.closest?.("[data-round-results] figure.evidence");
+	if (!figure || event.target.localName !== "img") return;
+	figure.focus({ preventScroll: true });
+	lookAt(figure);
+});
+importServerBatches();
+importServerResponses();
+document.addEventListener("keydown", (event) => {
+	if (
+		!document.querySelector("[data-round-results]") ||
+		event.isComposing ||
+		event.metaKey ||
+		event.ctrlKey ||
+		event.altKey ||
+		event.target.closest("textarea, input, select, [contenteditable]") ||
+		helping()
+	)
+		return;
+	const key = keyOf(event);
+	if (onPR && key === "v") {
+		event.preventDefault();
+		if (visibleResponses().length) enterResponses();
+		else
+			toast(
+				"No returned work waits for you on this pull request. An agent's response to a handover shows here.",
+			);
+		return;
+	}
+	// On a pull request's page these keys are the returned work's only there;
+	// the reading moves through it as through the rest of the page (notes.js).
+	if (onPR && !event.target.closest("[data-round-results]")) return;
+	if (onPR && key === "Escape") {
+		event.preventDefault();
+		leaveResponses();
+		return;
+	}
+	if (key === "e") {
+		event.preventDefault();
+		handOver();
+		return;
+	}
+	const figure = event.target.closest("figure.evidence");
+	if (figure && [" ", "Enter"].includes(key)) {
+		event.preventDefault();
+		lookAt(figure);
+		return;
+	}
+	const response = onPR
+		? event.target.closest("[data-request]")
+		: activeResponse?.isConnected
+			? activeResponse
+			: visibleResponses()[0];
+	if (response && ["a", "q", "c", "l", "d"].includes(key)) {
+		event.preventDefault();
+		if (!onPR) selectResponse(response);
+		if (key === "d")
+			response.querySelector("form[data-returned-code]")?.requestSubmit();
+		else response.querySelector(`[data-response-action="${key}"]`)?.click();
+		return;
+	}
+	if (onPR) return;
+	const nodes = visibleResponses();
+	if (!nodes.length) return;
+	const at = Math.max(0, nodes.indexOf(activeResponse));
+	const to = {
+		j: at + 1,
+		ArrowDown: at + 1,
+		k: at - 1,
+		ArrowUp: at - 1,
+		Home: 0,
+		End: nodes.length - 1,
+	}[key];
+	if (to === undefined) return;
+	event.preventDefault();
+	selectResponse(nodes[Math.min(Math.max(to, 0), nodes.length - 1)]);
+});