proctolog 0.1.0

data/public/decisions.js

@@ -0,0 +1,1289 @@
+// Choosing on the decisions of a burst, by key or by button: on the page
+// that lists them all, and inline on a pull request's own page, where the
+// keys answer only once a decision is entered (f, or moving onto one).
+
+import { askingPrompt, sessionAddress } from "./asking.js";
+import {
+	closeScreenshots,
+	openScreenshots,
+	prepareScreenshots,
+	toggleScreenshots,
+} from "./decision-screenshots.js";
+import { helping, keyOf, mode } from "./keys.js";
+import { withMentions } from "./mentions.js";
+import { prNumber } from "./pr-number.js";
+import {
+	announce,
+	answeredWith,
+	choiceFor,
+	clearChoice,
+	cursor,
+	handOver,
+	draft,
+	inventory,
+	labels,
+	leaveInBulk,
+	pendingFor,
+	picturesSince,
+	progress,
+	rememberCursor,
+	reopened,
+	reviewed as reviewedItem,
+	ruleFor,
+	saveChoice,
+	saveRule,
+	saveTogether,
+	scope,
+	settled,
+	stale,
+	undoChoice,
+} from "./review-drafts.js";
+import "./review-rounds.js";
+import { toast } from "./toast.js";
+
+const inline = !!document.querySelector("[data-inline-decisions]");
+if (inline) {
+	for (const controls of document.querySelectorAll("[data-decision]")) {
+		const box = controls.closest("li");
+		if (!box) continue;
+		box.dataset.decision = controls.dataset.decision;
+		box.dataset.grade = controls.dataset.grade;
+		box.dataset.held = controls.dataset.held;
+		box.dataset.reading = "";
+		delete controls.dataset.decision;
+		box.id ||= `box-${box.dataset.decision}`;
+		box.tabIndex = -1;
+	}
+}
+// Whether the owner is deciding. On the page that lists them all they always
+// are; on a pull request's page, from f (or Enter on one) until they leave.
+let engaged = !inline;
+const boxes = [...document.querySelectorAll("[data-decision]")];
+if (inline) boxes.forEach(prepareScreenshots);
+const main = document.querySelector("main.decisions, main.description");
+const finish = document.querySelector("[data-finish]");
+// Where the decisions end, a line stands for each of them.
+const lineOf = (box) =>
+	finish?.querySelector(`[data-line-of="${box.dataset.decision}"]`);
+const boxOf = (line) =>
+	boxes.find((box) => box.dataset.decision === line.dataset.lineOf);
+const items = new Map(inventory.map((item) => [item.id, item]));
+let filter = new URL(location.href).searchParams.get("show") || "unreviewed";
+let active;
+const nonBlocking = (box) => box.dataset.grade === "non_blocking";
+// What the list shows: not hidden by its view, nor folded away with the
+// non-blocking decisions.
+const visible = () =>
+	boxes.filter(
+		(box) =>
+			!box.hidden && !box.closest("details[data-non-blocking]:not([open])"),
+	);
+const reviewed = (box) => {
+	const item = items.get(box.dataset.decision);
+	return !!item && reviewedItem(item);
+};
+
+// By theme, the page lists one kind of question across the burst, a heading
+// over each, which the cursor rests on like a decision.
+const byTheme = main?.dataset.byTheme === "true";
+const isHeading = (element) => !!element?.matches?.("[data-theme-heading]");
+const under = (heading) =>
+	[
+		...heading.closest(".theme-group").querySelectorAll("[data-decision]"),
+	].filter((box) => !box.hidden);
+// Where j and k rest: the decisions the list shows, and by theme the heading
+// over each group that shows any.
+const rests = () =>
+	byTheme
+		? [
+				...main.querySelectorAll("[data-theme-heading], [data-decision]"),
+			].filter((element) =>
+				isHeading(element) ? under(element).length : !element.hidden,
+			)
+		: visible();
+
+// The decisions the owner selected, on the page that lists them all, to give
+// them one answer: a, q, c and l then answer every one of them, each with a
+// choice of its own.
+const selected = new Set();
+const setSelected = (boxesToSelect, on) => {
+	for (const { dataset } of boxesToSelect)
+		selected[on ? "add" : "delete"](dataset.decision);
+};
+// x on a decision selects it, or no longer; on a theme's heading, the whole
+// group the list shows.
+const toggleSelection = () => {
+	if (!active) return;
+	const group = isHeading(active) ? under(active) : [active];
+	setSelected(group, !group.every((box) => selected.has(box.dataset.decision)));
+	paint();
+	sayMode();
+};
+const clearSelection = () => {
+	if (!selected.size) return false;
+	selected.clear();
+	paint();
+	sayMode();
+	return true;
+};
+// The decisions an answer goes to: those selected, and the one at hand.
+const answering = () =>
+	boxes.filter((box) => selected.has(box.dataset.decision) || box === active);
+// What deciding on a pull request's page goes through: its blocking
+// decisions; and the non-blocking ones once the owner opens their fold and
+// decides one. Otherwise those wait for one gesture.
+const sequence = () =>
+	boxes.filter((box) => nonBlocking(box) === !!(active && nonBlocking(active)));
+// Where deciding begins: the first blocking decision still to review.
+const firstToReview = () =>
+	boxes.find((box) => !nonBlocking(box) && !reviewed(box));
+
+// The pull request a decision is of: the page's own, on its page.
+const prOf = (box) => prNumber(box.dataset.pr || scope);
+// Why leaving the non-blocking at once passes over a decision: what the desk
+// knows of it (starred, named in the burst file, asked, answered), and a
+// draft on it.
+const holds = (box) => [
+	...(box.dataset.held ? box.dataset.held.split(",") : []),
+	...(pendingFor(box.dataset.decision) ? ["drafted"] : []),
+];
+// The non-blocking decisions of a pull request still to review, and those
+// of them one gesture leaves: the ones that wait for nothing.
+const waitingOn = (pr) =>
+	boxes.filter((box) => nonBlocking(box) && prOf(box) === pr && !reviewed(box));
+const leavable = (pr) => waitingOn(pr).filter((box) => !holds(box).length);
+// "1 starred, 1 drafted": what holds each of these decisions, counted.
+const heldBy = (held) =>
+	Object.entries(Object.groupBy(held, (box) => holds(box)[0]))
+		.map(([reason, them]) => `${them.length} ${reason}`)
+		.join(", ");
+// What the last gesture passed over, and why, said on its line.
+const passedOver = new Map();
+
+// Leaves the non-blocking decisions of a pull request that wait for nothing,
+// in one gesture that u takes back whole, and names those it passed over.
+const leaveNonBlocking = (pr) => {
+	const leaving = leavable(pr);
+	const passed = waitingOn(pr).filter((box) => holds(box).length);
+	if (!leaving.length)
+		return toast(
+			passed.length
+				? `Each non-blocking decision left here waits on something: ${passed.map((box) => holds(box)[0]).join(", ")}.`
+				: "No non-blocking decision of this pull request is left to review.",
+		);
+	leaveInBulk(leaving.map((box) => box.dataset.decision));
+	passedOver.clear();
+	for (const box of passed) passedOver.set(box.dataset.decision, holds(box)[0]);
+	paint();
+	sayMode();
+	announce(
+		`Left ${leaving.length} non-blocking as is${passed.length ? ` · ${passed.length} skipped: ${heldBy(passed)}` : ""} · u undoes it`,
+	);
+};
+// Which decisions the list shows. Deciding on a pull request's page passes
+// over every one of them in order, whichever the list shows.
+const matches = (box) => {
+	if (inline && engaged) return true;
+	switch (filter) {
+		case "all":
+			return true;
+		case "unreviewed":
+			return !reviewed(box);
+		case "reviewed":
+			return reviewed(box);
+		case "waiting":
+			return box.dataset.waiting === "true";
+		default:
+			return box.dataset.state === filter;
+	}
+};
+
+// The bar at the foot of the page: where the owner is, and the few keys that
+// matter there. The rest stand beside the decision itself: each choice by its
+// key in the menu, and on a pull request's page its other keys in the margin.
+const DECIDING = inline
+	? [
+			["← →", "previous, next"],
+			["↑ ↓", "scroll"],
+			["a b q c l", "choose"],
+		]
+	: [
+			["j k", "move"],
+			["a b q c l", "choose"],
+		];
+const sayMode = () => {
+	const at = document.activeElement;
+	// A choice's one line, a note on the alternative or a rule, saves on Enter.
+	if (at.matches(".choice-editor input"))
+		return mode("Writing", [
+			["Enter", "save"],
+			["Esc", "close"],
+		]);
+	if (at.closest("textarea, input, select"))
+		return mode("Writing", [
+			["⌘ Enter", "save and move on"],
+			["Esc", "close, keeping the draft"],
+		]);
+	const response = at.closest("[data-request]");
+	if (response) {
+		// Which of the responses shown the reading is in.
+		const shown = [
+			...document.querySelectorAll("[data-round-results] [data-request]"),
+		].filter((node) => node.getClientRects().length);
+		return mode(
+			`Returned work ${shown.indexOf(response) + 1} of ${shown.length}`,
+			[
+				...(at.matches("figure.evidence") ? [["Space", "look closely"]] : []),
+				["↑ ↓", "move"],
+				["[ ]", "responses"],
+				["a", "confirm"],
+				["q", "answer or ask"],
+				["c", "correction"],
+				["l", "later"],
+				["d", "diff"],
+				["Esc", "leave"],
+			],
+		);
+	}
+	if (at.closest("[data-finish]")) {
+		const leaves = leavable(scope).length;
+		return mode(
+			waitingOn(scope).length ? "Blocking reviewed" : "All reviewed",
+			[
+				["j k", "move"],
+				...(leaves ? [["A", `leave ${leaves} as is`]] : []),
+				["g", "good to go"],
+				["N", "next to review"],
+			],
+		);
+	}
+	if (!inline && selected.size)
+		return mode(`Deciding · ${selected.size} selected`, [
+			["a q c l", `answer the ${selected.size}`],
+			["x", "select, or not"],
+			["Esc", "clear the selection"],
+		]);
+	if (isHeading(active))
+		return mode(`Deciding · ${active.dataset.themeHeading}`, [
+			["x", `select its ${under(active).length}`],
+			["j k", "move"],
+		]);
+	if (!inline || engaged) {
+		// On a pull request's page the count is the stepper's: its place among
+		// the decisions deciding goes through, whichever of them the view lists.
+		const queue = inline ? sequence() : visible();
+		const place = queue.indexOf(active) + 1;
+		return mode(
+			place ? `Deciding ${place} of ${queue.length}` : "Deciding",
+			inline ? DECIDING : [...DECIDING, ["u", "undo"]],
+		);
+	}
+	// What the reading rests on adds the key that opens it.
+	const opens = at.matches("li[data-decision]")
+		? [["Enter", "decide on this"]]
+		: at.closest("figure.picture")
+			? [["Space", "look closely"]]
+			: [];
+	mode("Reading", [
+		...opens,
+		["↑ ↓", "move"],
+		["[ ]", "sections"],
+		...(boxes.length ? [["f", "review decisions"]] : []),
+	]);
+};
+
+// What a pull request's page shows: the whole of it, or, while the owner
+// decides, one decision alone ("decide") and then where they end ("done").
+// The stylesheet does the showing; this must be said before anything it
+// reveals is given the focus.
+const frame = (name) => {
+	if (!inline) return;
+	if (name) document.body.dataset.focus = name;
+	else delete document.body.dataset.focus;
+};
+
+// Into deciding on a pull request's page, or out of it, back to reading. The
+// list shows every decision while the owner decides, and its own view after.
+const engage = (on) => {
+	if (!inline || engaged === on) return;
+	engaged = on;
+	if (on) document.body.dataset.decisionMode = "true";
+	else {
+		delete document.body.dataset.decisionMode;
+		delete document.body.dataset.returnsTo;
+	}
+	paint();
+};
+
+// Deciding begun on a line where the decisions end goes back to that line,
+// on Escape or once nothing is left to review.
+const decideFrom = (line) => {
+	document.body.dataset.returnsTo = "done";
+	select(boxOf(line));
+};
+
+// One bead for each decision of the pull request, in order: which are done,
+// and, while the owner decides, which one is at hand. A bead goes to its decision.
+// While reading, the bead and the line f would begin on are marked too, for the
+// page to point at from the decisions' heading.
+const stepper = document.querySelector("[data-stepper]");
+const step = () => {
+	if (!stepper) return;
+	const at = engaged ? active : undefined;
+	const first = firstToReview();
+	for (const box of boxes) box.toggleAttribute("data-first", box === first);
+	const queue = sequence();
+	const cells = queue.map((box) => {
+		const cell = document.createElement("span");
+		cell.className = "cell";
+		cell.dataset.state = box.dataset.choice || (reviewed(box) ? "ticked" : "");
+		cell.title = box.querySelector("strong")?.textContent ?? "";
+		if (box === at) cell.dataset.at = "";
+		if (box === first) cell.dataset.first = "";
+		cell.addEventListener("click", () => select(box));
+		return cell;
+	});
+	const left = queue.filter((box) => !reviewed(box)).length;
+	const graded = boxes.some(nonBlocking)
+		? queue.some(nonBlocking)
+			? "non-blocking "
+			: "blocking "
+		: "";
+	const place = document.createElement("span");
+	place.className = "place";
+	place.textContent = [
+		at
+			? `Decision ${queue.indexOf(at) + 1} of ${queue.length}`
+			: `${queue.length} ${graded}decisions`,
+		`${left} to review`,
+	].join(" · ");
+	stepper.replaceChildren(...cells, place);
+};
+
+const select = (box, { focus = true } = {}) => {
+	if (active !== box) closeScreenshots(active);
+	active?.removeAttribute("aria-current");
+	active = box;
+	if (!box) {
+		step();
+		return sayMode();
+	}
+	box.setAttribute("aria-current", "true");
+	if (inline && focus) {
+		engage(true);
+		box.closest("details.section").open = true;
+		const fold = box.closest("details[data-non-blocking]");
+		if (fold) fold.open = true;
+		frame("decide");
+		openScreenshots(box);
+	}
+	step();
+	if (focus) {
+		box.focus({ preventScroll: true });
+		// Alone on the page, a decision is read from the page's top.
+		if (inline) scrollTo({ top: 0 });
+		else box.scrollIntoView({ block: "nearest" });
+	}
+	sayMode();
+	if (inline && !focus && !box.contains(document.activeElement)) return;
+	const url = new URL(location.href);
+	url.hash = box === boxes[0] ? "" : box.id;
+	history.replaceState(null, "", url);
+	if (box.dataset.decision && cursor() !== box.dataset.decision)
+		rememberCursor(box.dataset.decision);
+};
+
+const fraction = ({ chosen, ticked, total }) => `${chosen + ticked}/${total}`;
+
+// A choice in a word or two, beside its decision in the list and over it while
+// it is the one at hand.
+const CHOSEN = {
+	leave: "as is",
+	question: "question asked",
+	change: "change suggested",
+	later: "left for later",
+};
+
+// Under a decision whose pictures changed since it was chosen on: each
+// picture as it was beside as it is now, matched by name, and one that is
+// new or gone said so.
+const showPicturesSince = (box, since) => {
+	const moved = since.filter(({ said }) =>
+		["changed", "added", "removed"].includes(said),
+	);
+	const shown = box.querySelector("[data-pictures-since]");
+	const key = JSON.stringify(moved);
+	if (shown?.dataset.key === key) return;
+	shown?.remove();
+	if (!moved.length) return;
+	const panel = document.createElement("div");
+	Object.assign(panel.dataset, { picturesSince: "", desk: "", key });
+	panel.className = "pictures-since";
+	for (const { name, before, after, said } of moved) {
+		const row = document.createElement("figure");
+		row.dataset.said = said;
+		for (const [picture, when] of [
+			[before, "as it was"],
+			[after, "now"],
+		]) {
+			const cell = document.createElement("span");
+			if (picture?.file)
+				cell.append(
+					Object.assign(document.createElement("img"), {
+						src: `/pictures/${picture.file}`,
+						alt: `${name}, ${when}`,
+						loading: "lazy",
+					}),
+				);
+			else cell.textContent = picture ? "not on this Mac" : said;
+			row.append(cell);
+		}
+		const caption = document.createElement("figcaption");
+		caption.textContent = `${name}: ${said}`;
+		row.append(caption);
+		panel.append(row);
+	}
+	box.querySelector("[data-choice-status]").after(panel);
+};
+
+const paint = () => {
+	for (const box of boxes) {
+		const saved = choiceFor(box.dataset.decision);
+		const pending = pendingFor(box.dataset.decision);
+		const status = box.querySelector("[data-choice-status]");
+		const changed = saved && stale(saved);
+		const passed = passedOver.get(box.dataset.decision);
+		const others = saved ? answeredWith(saved) : 0;
+		const together = others
+			? ` (answered with ${others} other${others === 1 ? "" : "s"})`
+			: "";
+		const rule = saved && ruleFor(saved);
+		const since = saved ? picturesSince(saved) : [];
+		// A choice that no longer stands says why, and what it was; one given
+		// with others is answered again alone.
+		status.textContent = [
+			saved
+				? changed
+					? `${reopened(saved)}: needs review again. It was: ${labels[saved.kind]}${saved.text ? ` — ${saved.text}` : ""}${together}`
+					: `Saved: ${labels[saved.kind]}${saved.text ? ` — ${saved.text}` : ""}${together}`
+				: pending
+					? `Unfinished draft: ${labels[pending.kind]}`
+					: "",
+			passed && !saved ? `Not left with the others: ${passed}` : "",
+			rule ? `Rule: “${rule.text}”` : "",
+			since.some(({ said }) => said === "unverified")
+				? "Pictures unverified: their pixels could not be read"
+				: "",
+		]
+			.filter(Boolean)
+			.join(" · ");
+		withMentions(status);
+		showPicturesSince(box, changed ? since : []);
+		const ruleButton = box.querySelector("[data-make-rule]");
+		ruleButton.hidden = !saved || changed;
+		ruleButton.querySelector(".does").textContent = rule
+			? "Edit its rule"
+			: "Make it a rule";
+		box.dataset.choice = changed ? "stale" : saved?.kind || "";
+		box.toggleAttribute("data-selected", selected.has(box.dataset.decision));
+		// What a line of the list says of itself while another decision is at hand.
+		box.dataset.said = changed
+			? "review again"
+			: saved
+				? CHOSEN[saved.kind]
+				: reviewed(box)
+					? "ticked on GitHub"
+					: "";
+		box.querySelector("[data-choice-clear]").hidden = !saved && !pending;
+		for (const button of box.querySelectorAll("[data-choice]"))
+			button.setAttribute(
+				"aria-pressed",
+				String(!changed && saved?.kind === button.dataset.choice),
+			);
+		box.hidden = !matches(box);
+	}
+	for (const part of main.querySelectorAll(".part")) {
+		part.hidden = ![...part.querySelectorAll("[data-decision]")].some(
+			(box) => !box.hidden,
+		);
+		const now = progress(prNumber(part.dataset.part));
+		const said = part.querySelector("[data-part-progress]");
+		if (said) {
+			said.textContent = `${fraction(now)} reviewed`;
+			said.dataset.done = String(!now.left);
+		}
+	}
+	for (const heading of main.querySelectorAll(".lead-in"))
+		heading.hidden = ![
+			...heading.nextElementSibling.querySelectorAll("[data-decision]"),
+		].some((box) => !box.hidden);
+	for (const link of document.querySelectorAll("a[data-filter]")) {
+		if (link.dataset.filter === filter)
+			link.setAttribute("aria-current", "page");
+		else link.removeAttribute("aria-current");
+	}
+	for (const [attribute, name] of [
+		["pending", "unreviewed"],
+		["reviewed", "reviewed"],
+		["all", "all"],
+	]) {
+		for (const control of document.querySelectorAll(`[data-${attribute}-view]`))
+			control.setAttribute("aria-pressed", String(filter === name));
+	}
+	const counts = {
+		unreviewed: boxes.filter((box) => !reviewed(box)).length,
+		reviewed: boxes.filter(reviewed).length,
+		all: boxes.length,
+	};
+	for (const count of document.querySelectorAll("[data-count-of]"))
+		count.textContent = counts[count.dataset.countOf];
+	// The non-blocking decisions, folded: how many wait, and how many of
+	// them one gesture would leave as they are.
+	for (const fold of document.querySelectorAll("details[data-non-blocking]")) {
+		const pr = prNumber(fold.dataset.pr || scope);
+		const open = waitingOn(pr).length;
+		fold.querySelector("[data-non-blocking-count]").textContent = open
+			? `${open} to review`
+			: "all reviewed";
+		fold.querySelector("summary").dataset.leaves = leavable(pr).length;
+	}
+	for (const button of document.querySelectorAll("[data-leave-non-blocking]")) {
+		const leaves = leavable(prNumber(button.dataset.pr)).length;
+		button.hidden = !leaves;
+		button.querySelector("[data-leave-said]").textContent =
+			`leave ${leaves} as is`;
+	}
+	if (inline) {
+		const blockingLeft = boxes.filter(
+			(box) => !nonBlocking(box) && !reviewed(box),
+		).length;
+		const count = document.querySelector("#decisions > summary .count");
+		if (count) {
+			count.textContent = blockingLeft
+				? `${blockingLeft} to review`
+				: counts.unreviewed
+					? "the non-blocking wait"
+					: "all reviewed";
+			count.dataset.waits = blockingLeft > 0;
+		}
+		// Where deciding ends: after the last blocking decision. Non-blocking
+		// ones still open wait for one gesture, offered here.
+		if (finish) {
+			finish.hidden = !boxes.length || blockingLeft > 0;
+			paintEnd();
+		}
+	}
+	const empty = document.querySelector("[data-queue-empty]");
+	if (empty) empty.hidden = visible().length > 0;
+	const emptySaid = empty?.querySelector("[data-empty-said]");
+	if (emptySaid)
+		emptySaid.textContent = filter === "unreviewed" && !counts.unreviewed
+			? "Every decision in this view is reviewed."
+			: "No decisions match this view.";
+	step();
+};
+
+// What the end of the decisions says first: what is reviewed, and how many
+// non-blocking still wait.
+const blockingReviewed = (count) =>
+	({
+		0: "No decision here is blocking",
+		1: "The blocking decision is reviewed",
+	})[count] ?? `The ${count} blocking decisions are reviewed`;
+const endSaid = () => {
+	const waiting = waitingOn(scope).length;
+	if (!waiting) return "Every decision of this pull request is reviewed.";
+	const blocking = boxes.filter((box) => !nonBlocking(box)).length;
+	return `${blockingReviewed(blocking)}; ${waiting} non-blocking ${waiting === 1 ? "waits" : "wait"}.`;
+};
+
+// The end of the decisions, line by line: each decision's bead, and what was
+// chosen on it or what holds it; over each grade, how many are left; under
+// the non-blocking, why one gesture would not leave them all.
+const paintEnd = () => {
+	finish.querySelector("[data-finish-said]").textContent = endSaid();
+	for (const line of finish.querySelectorAll("[data-line-of]")) {
+		const box = boxOf(line);
+		line.dataset.state = box.dataset.choice || (reviewed(box) ? "ticked" : "");
+		line.querySelector("[data-line-said]").textContent =
+			box.dataset.said || holds(box).join(", ");
+		// Unfolded, the choice in full, as the decision itself says it.
+		const choice = line.querySelector("[data-line-choice]");
+		choice.textContent =
+			box.querySelector("[data-choice-status]").textContent ||
+			(reviewed(box) ? "Ticked on GitHub." : "");
+		choice.hidden = !choice.textContent;
+	}
+	for (const grade of finish.querySelectorAll(".grade")) {
+		const left = [...grade.querySelectorAll("[data-line-of]")].filter(
+			(line) => !reviewed(boxOf(line)),
+		).length;
+		grade.querySelector("[data-grade-count]").textContent = left
+			? `${left} to review`
+			: "all reviewed";
+	}
+	const leave = finish.querySelector("[data-finish-leave]");
+	if (!leave) return;
+	const waiting = waitingOn(scope);
+	const held = waiting.filter((box) => holds(box).length);
+	leave.hidden = !waiting.length;
+	leave.querySelector("[data-held-said]").textContent = held.length
+		? `${held.length} ${held.length === 1 ? "waits" : "wait"} for you: ${heldBy(held)}`
+		: "";
+};
+
+const show = (name) => {
+	filter = name;
+	const url = new URL(location.href);
+	url.searchParams.set("show", name);
+	history.replaceState(null, "", url);
+	paint();
+	select(active && !active.hidden ? active : visible()[0]);
+};
+
+const next = (direction) => {
+	const queue = inline ? sequence() : rests();
+	const at = Math.max(0, queue.indexOf(active));
+	select(queue[Math.min(Math.max(at + direction, 0), queue.length - 1)]);
+};
+
+// The first decision of the pull request before or after the one at hand.
+const nextPart = (direction) => {
+	// By theme, from heading to heading.
+	if (byTheme) {
+		const stops = rests();
+		const at = stops.indexOf(active);
+		const ahead =
+			direction > 0
+				? stops.slice(at + 1)
+				: stops.slice(0, Math.max(at, 0)).reverse();
+		const heading = ahead.find(isHeading);
+		if (heading) select(heading);
+		return;
+	}
+	const queue = visible();
+	const here = active?.dataset.pr;
+	const others =
+		direction > 0
+			? queue.slice(queue.indexOf(active) + 1)
+			: queue.slice(0, Math.max(queue.indexOf(active), 0)).reverse();
+	const other = others.find((box) => box.dataset.pr !== here);
+	if (!other) return;
+	select(queue.find((box) => box.dataset.pr === other.dataset.pr));
+};
+
+// How the owner moves from decision to decision. Down the list, on the page of
+// them all, and by [ ] from one pull request's to the next. Along the beads, on
+// a pull request's page, where the one decision shown fills the page and the
+// keys that go down and up scroll it.
+const ABOUT_THREE_LINES = 80;
+const MOVING = inline
+	? {
+			ArrowRight: () => next(1),
+			ArrowLeft: () => next(-1),
+			j: () => scrollBy({ top: ABOUT_THREE_LINES }),
+			ArrowDown: () => scrollBy({ top: ABOUT_THREE_LINES }),
+			k: () => scrollBy({ top: -ABOUT_THREE_LINES }),
+			ArrowUp: () => scrollBy({ top: -ABOUT_THREE_LINES }),
+		}
+	: {
+			j: () => next(1),
+			ArrowDown: () => next(1),
+			k: () => next(-1),
+			ArrowUp: () => next(-1),
+			"[": () => nextPart(-1),
+			"]": () => nextPart(1),
+		};
+
+// The end of a pull request's decisions: its panel takes the focus, or the
+// line of the decision deciding went back from, and the keys that move on
+// from here are on it.
+const finished = (from) => {
+	engage(false);
+	select(undefined);
+	finish.hidden = false;
+	frame("done");
+	const line = from && lineOf(from);
+	(line ?? finish).focus({ preventScroll: true });
+	if (line) line.scrollIntoView({ block: "nearest" });
+	else scrollTo({ top: 0 });
+	sayMode();
+};
+
+// A line where the decisions end unfolds to its decision's own words and the
+// choice in full, and folds again.
+const unfolded = (line) => line.getAttribute("aria-expanded") === "true";
+const unfold = (line, open) => {
+	if (!line) return;
+	line.setAttribute("aria-expanded", String(open));
+	// The cursor's keys beside the line change with it.
+	line.dispatchEvent(new Event("toggle"));
+	line.scrollIntoView({ block: "nearest" });
+};
+
+// Where the decisions end, the reading goes from the panel down its lines.
+const alongTheEnd = (direction) => {
+	const stops = [finish, ...finish.querySelectorAll("[data-line-of]")];
+	const at = Math.max(stops.indexOf(document.activeElement), 0);
+	const to = stops[Math.min(Math.max(at + direction, 0), stops.length - 1)];
+	to.focus({ preventScroll: true });
+	if (to === finish) scrollTo({ top: 0 });
+	else to.scrollIntoView({ block: "nearest" });
+};
+const AT_THE_END = {
+	j: () => alongTheEnd(1),
+	ArrowDown: () => alongTheEnd(1),
+	k: () => alongTheEnd(-1),
+	ArrowUp: () => alongTheEnd(-1),
+	Home: () => alongTheEnd(-Infinity),
+	End: () => alongTheEnd(Infinity),
+	ArrowRight: (line) => unfold(line, true),
+	ArrowLeft: (line) => unfold(line, false),
+};
+
+// What follows a choice. On a pull request's page, the next decision in order,
+// reviewed or not, and past the last the first still to review; once none is,
+// where they end. On the page that lists them all, the next still to review.
+const commit = (box, kind, text = "") => {
+	const queue = inline ? sequence() : visible();
+	const at = queue.indexOf(box);
+	// With decisions selected, one answer goes to each of them.
+	const together = inline ? [] : answering();
+	const remaining = [...queue.slice(at + 1), ...queue.slice(0, at)].find(
+		(item) => !reviewed(item) && !together.includes(item),
+	);
+	const saved =
+		together.length > 1
+			? saveTogether(
+					together.map((item) => item.dataset.decision),
+					kind,
+					text,
+				)
+			: saveChoice(box.dataset.decision, kind, text);
+	if (!saved) return;
+	selected.clear();
+	box.querySelector(".choice-slot").replaceChildren();
+	paint();
+	if (inline && !remaining) {
+		finished(document.body.dataset.returnsTo ? box : undefined);
+		announce(
+			waitingOn(scope).length
+				? `Every blocking decision of this pull request is reviewed. A leaves the non-blocking that wait for nothing as they are.`
+				: "Every decision of this pull request is reviewed.",
+		);
+		return;
+	}
+	if (inline) return select(queue[at + 1] ?? remaining);
+	select(remaining && !remaining.hidden ? remaining : visible()[0]);
+	if (!visible().length) {
+		active?.removeAttribute("aria-current");
+		active = undefined;
+		document.querySelector("[data-hand-over]").focus();
+		announce(
+			"This view is reviewed. Hand it over with e, or use All to revisit your choices.",
+		);
+	}
+};
+
+const edit = (box, kind) => {
+	select(box, { focus: inline });
+	if (kind === "leave") return commit(box, kind);
+	const slot = box.querySelector(".choice-slot");
+	const old = slot.querySelector("textarea")?.value;
+	const pending = pendingFor(box.dataset.decision);
+	const saved = choiceFor(box.dataset.decision);
+	const text = old ?? pending?.text ?? saved?.text ?? "";
+	slot.replaceChildren();
+	const form = document.createElement("form");
+	form.className = "choice-editor";
+	const label = document.createElement("label");
+	const textarea = document.createElement("textarea");
+	textarea.id = `answer-${box.dataset.decision}`;
+	textarea.rows = 3;
+	textarea.required = true;
+	textarea.value = text;
+	label.htmlFor = textarea.id;
+	label.textContent =
+		kind === "later" ? "What should the backlog task cover?" : labels[kind];
+	const help = document.createElement("p");
+	help.className = "reading";
+	help.textContent =
+		kind === "later"
+			? "Keep today's implementation; ask the agent to create a task. Ctrl/⌘ + Enter saves and moves on. Escape closes this draft."
+			: "Ctrl/⌘ + Enter saves and moves on. Enter adds a line. Escape closes this draft.";
+	const save = document.createElement("button");
+	save.type = "submit";
+	save.className = "primary";
+	save.textContent = "Save and next";
+	const cancel = document.createElement("button");
+	cancel.type = "button";
+	cancel.className = "quiet";
+	cancel.textContent = "Close draft";
+	const close = () => {
+		slot.replaceChildren();
+		paint();
+		select(box);
+	};
+	cancel.addEventListener("click", close);
+	textarea.addEventListener("input", () =>
+		draft(box.dataset.decision, kind, textarea.value),
+	);
+	form.addEventListener("submit", (event) => {
+		event.preventDefault();
+		if (!textarea.value.trim()) {
+			textarea.setCustomValidity("Write your question, change or task first.");
+			textarea.reportValidity();
+			return;
+		}
+		textarea.setCustomValidity("");
+		commit(box, kind, textarea.value);
+	});
+	textarea.addEventListener("input", () => textarea.setCustomValidity(""));
+	form.addEventListener("keydown", (event) => {
+		if (event.isComposing) return;
+		if (keyOf(event) === "Escape") {
+			event.preventDefault();
+			close();
+		} else if (keyOf(event) === "Enter" && (event.metaKey || event.ctrlKey)) {
+			event.preventDefault();
+			form.requestSubmit();
+		}
+	});
+	form.append(
+		label,
+		textarea,
+		help,
+		save,
+		...(kind === "question" ? askNow(box, textarea) : []),
+		cancel,
+	);
+	slot.append(form);
+	draft(box.dataset.decision, kind, text);
+	textarea.focus();
+};
+
+// A question may be asked now instead, in a Claude Code session of its own,
+// on the decisions it would answer. Asking leaves the draft as it is: the
+// owner chooses here once the answer is in.
+const askNow = (box, textarea) => {
+	const prompt = () =>
+		askingPrompt(
+			(inline ? [box] : answering()).map((item) => item.dataset.decision),
+			textarea.value,
+		);
+	const ask = document.createElement("a");
+	ask.className = "session-link";
+	ask.textContent = "Ask Claude now";
+	const follow = () => {
+		ask.href = sessionAddress(prompt());
+	};
+	follow();
+	textarea.addEventListener("input", follow);
+	ask.addEventListener("click", () => {
+		follow();
+		announce(
+			"Claude opens a new session in this checkout with the question typed in. Nothing is sent until you send it there; here the question stays a draft.",
+		);
+	});
+	const copy = document.createElement("button");
+	copy.type = "button";
+	copy.className = "quiet";
+	copy.textContent = "Copy prompt";
+	copy.addEventListener("click", () =>
+		navigator.clipboard.writeText(prompt()).then(
+			() => announce("Copied: the decision, quoted, and your question last."),
+			() => toast("This browser would not copy it. Ask Claude now opens it."),
+		),
+	);
+	return [ask, copy];
+};
+
+// The change b asks for: the decision's own alternative, and the owner's note
+// on it where it needs one, such as which of the routes it names they mean.
+const ALTERNATIVE = "Use the suggested alternative: ";
+const NOTED = " My note: ";
+const withNote = (alternative, note) =>
+	`${ALTERNATIVE}${alternative}${note.trim() ? `${NOTED}${note.trim()}` : ""}`;
+const noteIn = (text = "", alternative) => {
+	const noted = `${ALTERNATIVE}${alternative}${NOTED}`;
+	return text.startsWith(noted) ? text.slice(noted.length) : "";
+};
+
+// b opens one line under the decision for that note. Enter saves and moves
+// on, the line empty or not, so the alternative alone is still two keys away.
+const useAlternative = (box) => {
+	// An alternative is one decision's own: it is no answer for several.
+	if (answering().length > 1)
+		return toast(
+			`b uses one decision's own alternative, so it waits while ${answering().length} are selected. Esc clears the selection.`,
+		);
+	const alternative = box?.querySelector("[data-choice-alternative]")?.dataset
+		.alternative;
+	if (!alternative) {
+		if (box) toast("This decision names no alternative to use.");
+		return;
+	}
+	select(box, { focus: inline });
+	const slot = box.querySelector(".choice-slot");
+	const form = document.createElement("form");
+	form.className = "choice-editor";
+	form.dataset.alternativeNote = "";
+	const label = document.createElement("label");
+	const input = document.createElement("input");
+	input.type = "text";
+	input.id = `note-${box.dataset.decision}`;
+	input.value = noteIn(choiceFor(box.dataset.decision)?.text, alternative);
+	label.htmlFor = input.id;
+	label.textContent = "Use the alternative, with a note if it needs one";
+	const help = document.createElement("p");
+	help.className = "reading";
+	help.textContent =
+		"Say which part of it you mean, or leave the line empty. Enter saves and moves on. Escape closes.";
+	const close = () => {
+		slot.replaceChildren();
+		paint();
+		select(box);
+	};
+	form.addEventListener("submit", (event) => {
+		event.preventDefault();
+		commit(box, "change", withNote(alternative, input.value));
+	});
+	form.addEventListener("keydown", (event) => {
+		if (event.isComposing || keyOf(event) !== "Escape") return;
+		event.preventDefault();
+		close();
+	});
+	form.append(label, input, help);
+	slot.replaceChildren(form);
+	input.focus();
+};
+
+// R makes the answer on a decision a rule the agent records beyond this
+// burst, or rewrites the one made of it: one line, under the decision.
+const makeRule = (box) => {
+	if (!box) return;
+	const saved = choiceFor(box.dataset.decision);
+	if (!saved || stale(saved))
+		return toast("R makes a rule of an answer: choose on this decision first.");
+	select(box, { focus: inline });
+	const slot = box.querySelector(".choice-slot");
+	const form = document.createElement("form");
+	form.className = "choice-editor";
+	form.dataset.ruleEditor = "";
+	const label = document.createElement("label");
+	const input = document.createElement("input");
+	input.type = "text";
+	input.id = `rule-${box.dataset.decision}`;
+	input.required = true;
+	input.value = ruleFor(saved)?.text ?? "";
+	label.htmlFor = input.id;
+	label.textContent = "The rule, in one line";
+	const help = document.createElement("p");
+	help.className = "reading";
+	help.textContent =
+		"The agent records it where this project keeps its rules. Enter saves. Escape closes.";
+	const close = () => {
+		slot.replaceChildren();
+		paint();
+		select(box);
+	};
+	form.addEventListener("submit", (event) => {
+		event.preventDefault();
+		if (saveRule(saved, input.value)) close();
+	});
+	form.addEventListener("keydown", (event) => {
+		if (event.isComposing || keyOf(event) !== "Escape") return;
+		event.preventDefault();
+		close();
+	});
+	form.append(label, input, help);
+	slot.replaceChildren(form);
+	input.focus();
+};
+
+const screenshots = (box) => {
+	if (!box) return;
+	if (box.querySelector("[data-decision-screenshots]"))
+		return toggleScreenshots(box);
+	toast(
+		inline
+			? "This decision links no screenshots."
+			: "Screenshots are previewed on the pull request's page: Enter opens this decision there.",
+	);
+};
+
+const undo = () => {
+	const id = undoChoice();
+	if (!id) return;
+	passedOver.clear();
+	const box = boxes.find((box) => box.dataset.decision === id);
+	paint();
+	// Taking back the gesture leaves the folded decisions folded.
+	if (box?.closest("details[data-non-blocking]:not([open])")) return;
+	if (box?.hidden) show("all");
+	select(box);
+};
+
+// Marks the pull request good to go, once the desk has the last choice.
+const goodToGo = async () => {
+	const form = document.querySelector("form[data-good-to-go]");
+	if (!form) return toast("This pull request is already marked good to go.");
+	await settled();
+	form.requestSubmit();
+};
+
+document.addEventListener("click", (event) => {
+	const link = event.target.closest("a[data-filter]");
+	if (
+		link &&
+		!event.metaKey &&
+		!event.ctrlKey &&
+		!event.shiftKey &&
+		!event.altKey
+	) {
+		event.preventDefault();
+		show(link.dataset.filter);
+		return;
+	}
+	if (event.target.closest("[data-pending-view]")) return show("unreviewed");
+	if (event.target.closest("[data-reviewed-view]")) return show("reviewed");
+	if (event.target.closest("[data-all-view]")) return show("all");
+	if (event.target.closest("[data-finish-good]")) return goodToGo();
+	if (event.target.closest("[data-finish-handover]")) return handOver();
+	const leave = event.target.closest("[data-leave-non-blocking]");
+	if (leave) return leaveNonBlocking(prNumber(leave.dataset.pr));
+	// A line where the decisions end unfolds at a press, and folds again. A
+	// picture its words name is seen where the decision is decided.
+	const line = event.target.closest("[data-line-of]");
+	if (line) {
+		if (event.target.closest('a[href*="#screenshot-"]')) {
+			event.preventDefault();
+			return decideFrom(line);
+		}
+		if (event.target.closest(".more")) return;
+		line.focus({ preventScroll: true });
+		return unfold(line, !unfolded(line));
+	}
+	const heading = event.target.closest("[data-theme-heading]");
+	if (heading) return select(heading);
+	const box = event.target.closest("[data-decision]");
+	if (!box) return;
+	if (event.target.closest("[data-choice-alternative]"))
+		return useAlternative(box);
+	if (event.target.closest("[data-make-rule]")) return makeRule(box);
+	const action = event.target.closest("button[data-choice]");
+	if (action) return edit(box, action.dataset.choice);
+	if (event.target.closest("[data-choice-clear]")) {
+		clearChoice(box.dataset.decision);
+		paint();
+		select(box.hidden ? visible()[0] : box);
+		return;
+	}
+	// A click that opened the viewer over the page leaves the page as it was.
+	if (document.querySelector("dialog[open]")) return;
+	// A click on a decision as it is read opens it to decide, unless it was to
+	// follow a link, press something of the page's, or select its words.
+	const opening =
+		inline &&
+		!engaged &&
+		getSelection().isCollapsed &&
+		!event.target.closest("a, button, input, textarea, summary, img");
+	select(box, { focus: opening });
+});
+
+document.addEventListener("focusin", (event) => {
+	// A panel over the page, a picture looked at closely, takes the focus
+	// without leaving the decision: its Esc comes back to it.
+	if (event.target.closest("dialog")) return;
+	const box = event.target.closest("[data-decision]");
+	if (inline) {
+		// Deciding begins only when it is asked for (f, Enter, a click, a choice's
+		// key): the reading passes over a decision like any other block. It ends
+		// when the focus leaves the decision.
+		if (engaged && !box) engage(false);
+		if (event.target.closest("[data-request]"))
+			active?.removeAttribute("aria-current");
+		if (!engaged) frame(event.target.closest("[data-finish]") ? "done" : "");
+	}
+	const rest = box ?? event.target.closest("[data-theme-heading]");
+	if (rest && rest !== active) select(rest, { focus: false });
+	sayMode();
+});
+document.addEventListener("focusout", () => setTimeout(sayMode));
+
+// Into the decisions: the first still to review, or where they end once none is.
+const enter = () => {
+	if (!boxes.length) return toast("This pull request has no decisions.");
+	const box = inline
+		? firstToReview()
+		: visible().find((box) => !reviewed(box));
+	if (box) return select(box);
+	if (inline && finish && !finish.hidden) {
+		finish.closest("details.section").open = true;
+		return finished();
+	}
+	if (visible()[0]) select(visible()[0]);
+};
+for (const control of document.querySelectorAll("[data-enter-decisions]")) {
+	control.addEventListener("click", (event) => {
+		event.preventDefault();
+		enter();
+	});
+}
+document.addEventListener("keydown", (event) => {
+	if (event.isComposing || event.metaKey || event.ctrlKey || event.altKey)
+		return;
+	// A key the reading already answered, by moving onto a decision, is spent.
+	if (helping() || event.defaultPrevented) return;
+	if (event.target.closest("input, textarea, select, [contenteditable]"))
+		return;
+	const anywhere = {
+		f: inline && enter,
+		e: inline && handOver,
+		g: inline && goodToGo,
+		A: inline && (() => leaveNonBlocking(scope)),
+		u: undo,
+	};
+	if (anywhere[keyOf(event)]) {
+		event.preventDefault();
+		anywhere[keyOf(event)]();
+		return;
+	}
+	if (inline && keyOf(event) === "Escape" && engaged) {
+		if (closeScreenshots(active)) {
+			event.preventDefault();
+			active.focus({ preventScroll: true });
+			return;
+		}
+		if (document.body.dataset.returnsTo && !firstToReview())
+			return finished(active);
+		engage(false);
+		frame("");
+		active?.removeAttribute("aria-current");
+		const heading = active?.closest("details.section").querySelector("summary");
+		heading?.focus({ preventScroll: true });
+		// The list keeps its view again, which may not show the decision left.
+		const left = active && !active.hidden ? active : heading;
+		left?.scrollIntoView({ block: "center" });
+		step();
+		return;
+	}
+	if (inline && keyOf(event) === "Escape" && document.body.dataset.focus) {
+		// From where the decisions end, back to the page.
+		frame("");
+		document.querySelector("#decisions > summary")?.focus();
+		return;
+	}
+	// On the condition that its decisions are reviewed, Enter goes to them as f does.
+	if (
+		inline &&
+		keyOf(event) === "Enter" &&
+		event.target.matches?.('[data-about="decisions"]')
+	) {
+		event.preventDefault();
+		return enter();
+	}
+	// Where the decisions end, the reading goes down their lines, and → and ←
+	// unfold and fold the one it rests on. Enter, or a choice's key, opens its
+	// decision, as on a decision the reading rests on; nothing else moves the
+	// reading from the panel.
+	if (inline && !engaged && document.body.dataset.focus === "done") {
+		const line = event.target.closest?.("[data-line-of]");
+		const choosing = "abqcl".includes(keyOf(event));
+		if (line && (choosing || keyOf(event) === "Enter")) {
+			decideFrom(line);
+			if (!choosing) return event.preventDefault();
+		} else {
+			const move = AT_THE_END[keyOf(event)];
+			if (move) {
+				event.preventDefault();
+				move(line);
+			}
+			return;
+		}
+	}
+	if (inline && !engaged) {
+		// On a decision the reading rests on, Enter opens it to decide, and a
+		// choice's key opens it and makes that choice. Anywhere else those keys
+		// do nothing: say where they work, once asked.
+		const row = event.target.matches?.("li[data-decision]")
+			? event.target
+			: undefined;
+		const choosing = "abqcl".includes(keyOf(event));
+		if (row && (choosing || keyOf(event) === "Enter")) {
+			select(row);
+			if (!choosing) return event.preventDefault();
+		} else {
+			if (
+				choosing &&
+				keyOf(event) !== "c" &&
+				boxes.length &&
+				!event.target.closest("[data-request]")
+			)
+				toast("That key chooses on a decision: f goes to the first one.");
+			return;
+		}
+	}
+	const follow = (link) => {
+		if (link) settled().then(() => location.assign(link.href));
+	};
+	// The decision a choice opens on: the one at hand, or, from a theme's
+	// heading, the first of those selected.
+	const choosing = (kind) => {
+		const box = isHeading(active) ? answering()[0] : active;
+		if (box) edit(box, kind);
+		else if (active)
+			toast(
+				"x selects this theme's decisions; a choice then answers them all.",
+			);
+	};
+	const actions = {
+		...MOVING,
+		Home: () => select(visible()[0]),
+		End: () => select(visible().at(-1)),
+		a: () => choosing("leave"),
+		b: () => useAlternative(isHeading(active) ? undefined : active),
+		R: () => makeRule(isHeading(active) ? undefined : active),
+		s: () => screenshots(active),
+		q: () => choosing("question"),
+		c: () => choosing("change"),
+		l: () => choosing("later"),
+		e: handOver,
+		...(inline
+			? {}
+			: {
+					x: toggleSelection,
+					Escape: () => clearSelection(),
+					A: () =>
+						active && !isHeading(active) && leaveNonBlocking(prOf(active)),
+					n: () =>
+						toast(
+							"Notes are written on the pull request's page: Enter opens this decision there.",
+						),
+					h: () => follow(document.querySelector('a[data-key="h"]')),
+					Enter: () => follow(active?.querySelector("a[data-on-its-page]")),
+				}),
+	};
+	if (!Object.hasOwn(actions, keyOf(event))) return;
+	if (keyOf(event) === "Enter" && event.target !== active) return;
+	event.preventDefault();
+	actions[keyOf(event)]();
+});
+
+document.addEventListener("drafts-changed", paint);
+window.addEventListener("popstate", () => {
+	filter = new URL(location.href).searchParams.get("show") || "unreviewed";
+	paint();
+	select(
+		boxes.find((box) => `#${box.id}` === location.hash && !box.hidden) ||
+			visible()[0],
+	);
+});
+paint();
+select(
+	boxes.find((box) => `#${box.id}` === location.hash && !box.hidden) ||
+		boxes.find((box) => box.dataset.decision === cursor() && !box.hidden) ||
+		visible()[0],
+	{ focus: false },
+);
+sayMode();