proctolog 0.1.1 → 0.3.0

data/public/notes.js

@@ -8,7 +8,7 @@
 // written in a small form right under what it is about (respond.js).
 
 import { helping, keyOf } from "./keys.js";
-import { respond } from "./respond.js";
+import { putAway, respond, saveInPlace } from "./respond.js";
 import { toast } from "./toast.js";
 import { tryIt } from "./try.js";
 import { viewPictures } from "./viewer.js";
@@ -195,9 +195,111 @@ const placeOn = (figure, box) => ({
 	},
 });
 
-// A note on a pair's half is written under the pair.
-const notePicture = (figure, box = [0, 0, 1, 1]) =>
-	respond(slotAfter(figure.closest("figure.picture")), placeOn(figure, box));
+// A note on a picture is written under it (under the pair, for one of its
+// halves) and saved without leaving the page, which stays where it was and
+// draws the note there.
+const notePicture = (figure, box = [0, 0, 1, 1]) => {
+	const slot = slotAfter(figure.closest("figure.picture"));
+	const form = respond(slot, placeOn(figure, box));
+	saveInPlace(form, async ({ id }) => {
+		await redrawNotes();
+		putAway(form);
+		lightNote(id);
+	});
+};
+
+// The marks of a note on the page and its card, lit where they stand.
+const lightNote = (id) => {
+	for (const part of document.querySelectorAll(
+		`[data-note="${id}"], [data-card="${id}"]`,
+	))
+		light(part);
+};
+
+// The page as the desk has it now, or nothing when the desk does not answer.
+const freshCopy = async () => {
+	const address = new URL(location.href);
+	// The page as it is, not GitHub read again.
+	address.searchParams.delete("fresh");
+	address.hash = "";
+	const response = await fetch(address, {
+		headers: { Accept: "text/html" },
+	}).catch(() => undefined);
+	if (!response?.ok) return undefined;
+	return new DOMParser().parseFromString(await response.text(), "text/html");
+};
+
+// Ways to find a place of the page, which a page and its fresh copy answer
+// alike.
+const selecting = (selector) => (page) => page.querySelector(selector);
+
+// The count beside the heading of one of the page's own sections, not the
+// description's: the description may have a section of the same name.
+const sectionCount = (heading) =>
+	selecting(`.page > details[data-heading="${heading}"] > summary .count`);
+
+// The count on the outline's line for a section: the last line so named, as
+// the description's sections come first and may have the same name.
+const outlineCount = (name) => (page) =>
+	[...page.querySelectorAll("[data-outline] > *")]
+		.findLast((line) => line.querySelector(".name")?.textContent === name)
+		?.querySelector(".count");
+
+// Where the page shows what a saved note changes: where the pull request
+// stands, the Standing section, the cards of the notes, and the counts of what
+// is open, beside two headings and on the outline. The outline's other counts
+// are kept by the scripts that own them.
+const CHANGED_BY_NOTES = [
+	selecting("#standing"),
+	selecting("section.standing"),
+	sectionCount("Standing"),
+	outlineCount("Standing"),
+	selecting("aside.margin"),
+	sectionCount("Notes"),
+	outlineCount("Notes"),
+];
+
+// The fresh copy's element in place of the page's, when both have one.
+const swapIn = (now, was) => {
+	if (!now || !was) return;
+	was.replaceWith(now);
+	readable(now);
+};
+
+// The notes as the desk now has them, drawn without the page going anywhere:
+// the boxes on its pictures, then everything else that notes change, from a
+// fresh copy of the page.
+const redrawNotes = async () => {
+	const fresh = await freshCopy();
+	if (!fresh) return location.reload();
+	redrawRegions(fresh);
+	for (const find of CHANGED_BY_NOTES) swapIn(find(fresh), find(document));
+};
+
+// The pictures of the description that notes are drawn on, by their asset:
+// the same picture shown twice is the same picture twice, in order.
+const figuresByAsset = (page) =>
+	Map.groupBy(
+		page.querySelectorAll(
+			"main.description :is(figure.picture:not(.pair), figure.pair > .half)[data-asset]",
+		),
+		(figure) => figure.dataset.asset,
+	);
+
+const redrawRegions = (fresh) => {
+	const drawn = figuresByAsset(fresh);
+	for (const [asset, figures] of figuresByAsset(document))
+		figures.forEach((figure, index) => {
+			const now = drawn.get(asset)?.[index];
+			if (!now) return;
+			// The region being drawn for a note not yet saved stays.
+			for (const region of figure.querySelectorAll(
+				":scope > .region:not(.draft)",
+			))
+				region.remove();
+			figure.append(...now.querySelectorAll(":scope > .region"));
+		});
+};
 
 let pending;
 document.addEventListener("selectionchange", () => {
@@ -211,11 +313,26 @@ document.addEventListener("selectionchange", () => {
 			rect.right,
 			innerWidth - selectionButton.offsetWidth - 8,
 		);
-		selectionButton.style.left = `${Math.max(8, left) + scrollX}px`;
-		selectionButton.style.top = `${rect.top + scrollY - selectionButton.offsetHeight - 6}px`;
+		const origin = originOf(selectionButton);
+		selectionButton.style.left = `${Math.max(8, left) - origin.left}px`;
+		selectionButton.style.top = `${rect.top - origin.top - selectionButton.offsetHeight - 6}px`;
 	}, 120);
 });
 
+// Where an element placed absolutely counts its left and top from, on the
+// screen: the box of the nearest ancestor laid out on its own (the column
+// beside the burst's pane), or else the page.
+const originOf = (element) => {
+	const parent = element.offsetParent;
+	if (!parent || getComputedStyle(parent).position === "static")
+		return { left: -scrollX, top: -scrollY };
+	const box = parent.getBoundingClientRect();
+	return {
+		left: box.left + parent.clientLeft - parent.scrollLeft,
+		top: box.top + parent.clientTop - parent.scrollTop,
+	};
+};
+
 // Keeps the selection alive while the button is pressed.
 selectionButton.addEventListener("mousedown", (event) =>
 	event.preventDefault(),
@@ -353,14 +470,18 @@ document.addEventListener("pointercancel", () => {
 	drag = null;
 });
 
-// Reading has its own cursor; Tab still reaches every link and control.
-for (const element of document.querySelectorAll(
-	"h1, h2, h3, h4, summary, .conditions > li, li.scenario, [data-card]",
-)) {
-	if (element.closest("[data-desk]")) continue;
-	element.dataset.reading = "";
-	if (element.localName !== "summary") element.tabIndex = -1;
-}
+// Reading has its own cursor; Tab still reaches every link and control. What
+// the page draws again, a card or a condition, is read the same way.
+const readable = (root) => {
+	for (const element of root.querySelectorAll(
+		"h1, h2, h3, h4, summary, .conditions > li, li.scenario, [data-card]",
+	)) {
+		if (element.closest("[data-desk]")) continue;
+		element.dataset.reading = "";
+		if (element.localName !== "summary") element.tabIndex = -1;
+	}
+};
+readable(document);
 for (const body of document.querySelectorAll("[data-quotable]")) {
 	for (const block of blocksIn(body)) {
 		if (!block.matches("figure.picture") && !hasWords(block)) continue;
@@ -498,7 +619,10 @@ const keys = {
 	G: () => {
 		const link = document.querySelector('.whole a[data-key="G"]');
 		if (link) link.click();
-		else toast("Nobody has opened this pull request yet: GitHub has nothing of it.");
+		else
+			toast(
+				"Nobody has opened this pull request yet: GitHub has nothing of it.",
+			);
 	},
 };
 
@@ -539,10 +663,9 @@ const linkedShown = (preview) => {
 // A note on a place marked in the viewer is written beside it, and saved
 // without leaving it, so that the owner goes on looking where they were. A
 // note drawn there opens beside it the same way, with its words, to be
-// written over or withdrawn. The page comes back at the last of them once the
-// viewer closes. A note the desk would not take is sent as the page sends it,
-// which says why.
-let notedAt;
+// written over or withdrawn. Once the viewer closes, the page draws them
+// where it is.
+let notedHere = false;
 const notesAddress = document
 	.querySelector("#note-form")
 	?.content.querySelector("form")
@@ -552,7 +675,13 @@ const savedHere = new Map();
 const writtenNote = (id) => {
 	const card = document.querySelector(`[data-card="${id}"]`);
 	const said = savedHere.get(id) ?? card?.dataset;
-	return said && { address: `${notesAddress}/${id}`, kind: said.kind, text: said.text };
+	return (
+		said && {
+			address: `${notesAddress}/${id}`,
+			kind: said.kind,
+			text: said.text,
+		}
+	);
 };
 const noteInViewer = ({ figure }, box, beside, id) => {
 	if (!figure?.dataset.asset) {
@@ -564,46 +693,23 @@ const noteInViewer = ({ figure }, box, beside, id) => {
 		toast("That note is not on this page, so it cannot be opened here.");
 		return false;
 	}
-	respond(beside, { ...placeOn(figure, box), written });
-	const form = beside.querySelector("form");
-	if (form.dataset.inViewer === undefined) {
-		form.dataset.inViewer = "";
-		form.addEventListener("submit", async (event) => {
-			event.preventDefault();
-			const response = await fetch(form.action, {
-				method: "POST",
-				body: new FormData(form, event.submitter),
-				headers: { Accept: "application/json" },
-			}).catch(() => undefined);
-			if (!response?.headers.get("content-type")?.includes("json"))
-				return form.submit();
-			const saved = await response.json();
-			const withdrawn = event.submitter?.matches("[data-withdraw]") ?? false;
-			notedAt = saved.at;
-			savedHere.set(saved.id, {
-				kind: form.elements.kind.value,
-				text: form.elements.text.value.trim(),
-			});
-			beside.dispatchEvent(
-				new CustomEvent("noted", { detail: { id: saved.id, withdrawn } }),
-			);
+	const form = respond(beside, { ...placeOn(figure, box), written });
+	saveInPlace(form, ({ id: saved, withdrawn }) => {
+		notedHere = true;
+		savedHere.set(saved, {
+			kind: form.elements.kind.value,
+			text: form.elements.text.value.trim(),
 		});
-	}
+		beside.dispatchEvent(
+			new CustomEvent("noted", { detail: { id: saved, withdrawn } }),
+		);
+	});
 	return true;
 };
-const backAtNote = () => {
-	if (!notedAt) return;
-	const at = new URL(notedAt, location.href);
-	notedAt = undefined;
-	// A decision being decided keeps the page where it is: the page shows
-	// the note the next time it loads.
-	if (document.body.dataset.focus)
-		return toast(
-			"Your note is kept. The description shows it the next time the page loads.",
-		);
-	if (at.pathname !== location.pathname) return location.assign(at);
-	history.replaceState(history.state, "", at);
-	location.reload();
+const redrawSavedNotes = () => {
+	if (!notedHere) return;
+	notedHere = false;
+	redrawNotes();
 };
 // The pictures Space would open here, and which of them first; nothing when
 // the owner is not at a picture, and Space is the browser's to scroll with.
@@ -633,7 +739,7 @@ const lookClosely = (found = picturesHere(), first = found?.first) => {
 	if (found)
 		viewPictures(found.pictures, first, {
 			note: noteInViewer,
-			closed: backAtNote,
+			closed: redrawSavedNotes,
 		});
 };
 keys[" "] = lookClosely;

data/public/pick.css

@@ -97,3 +97,24 @@
 		margin-left: 10ch;
 	}
 }
+
+/* What to do here, before anything to pick: framed, so a first look lands on it. */
+.pick .start {
+	margin: 0 0 24px;
+	padding: 12px 16px;
+	border: 1px solid var(--rule-strong);
+	background: var(--surface);
+}
+
+.pick .start h2 {
+	margin-top: 0;
+}
+
+.pick .start p {
+	max-width: 72ch;
+	margin: 0 0 8px;
+}
+
+.pick .start p:last-child {
+	margin-bottom: 0;
+}

data/public/respond.css

@@ -109,6 +109,12 @@ li.card p {
 	font-size: 0.85rem;
 }
 
+/* Where a note answered in a handover is judged, in place of the buttons. */
+.card .moves .judged {
+	margin: 0;
+	color: var(--quiet);
+}
+
 .card[data-state="confirmed"],
 .card[data-state="withdrawn"] {
 	opacity: 0.7;

data/public/respond.js

@@ -15,10 +15,11 @@ const fill = (form, name, values) => {
 };
 
 // Opens the form in `slot`, or turns the one already there to this note,
-// keeping what was typed. `quote` and `picture` are the parts of a place;
-// `back` is the address to come back to once the note is saved, when the page
-// is not the pull request's own. `written`, a note already there by its
-// `address`, `kind` and `text`, opens it again to be written over or withdrawn.
+// keeping what was typed, and gives the form back. `quote` and `picture` are
+// the parts of a place; `back` is the address to come back to once the note is
+// saved, when the page is not the pull request's own. `written`, a note
+// already there by its `address`, `kind` and `text`, opens it again to be
+// written over or withdrawn.
 export const respond = (
 	slot,
 	{ kind = "change", action, on, quote, picture, back, written },
@@ -54,17 +55,60 @@ export const respond = (
 	// Written again from where it ends.
 	const end = form.elements.text.value.length;
 	if (written) form.elements.text.setSelectionRange(end, end);
+	return form;
 };
 
-const close = (holder) => {
+// The form taken away, its note saved or not: its slot says so by "closed".
+// It is given the form, or anything in it.
+export const putAway = (inside) => {
+	const holder = inside.closest(".respond");
 	const slot = holder.parentElement;
 	holder.remove();
 	slot.dispatchEvent(new CustomEvent("closed", { bubbles: true }));
 };
 
+// A note sent from `form` without leaving the page: `saved` is called with
+// what the desk answers, the note's `id` and `at`, the address that shows it,
+// and whether it was withdrawn. A note the desk would not take is sent as the
+// page sends it, which says why.
+export const saveInPlace = (form, saved) => {
+	// The form already in a slot is turned to each note opened there: it is
+	// listened to once.
+	if (form.dataset.inPlace !== undefined) return;
+	form.dataset.inPlace = "";
+	form.addEventListener("submit", async (event) => {
+		event.preventDefault();
+		const response = await fetch(form.action, {
+			method: "POST",
+			body: new FormData(form, event.submitter),
+			headers: { Accept: "application/json" },
+		}).catch(() => undefined);
+		if (!response?.headers.get("content-type")?.includes("json"))
+			return sendAsThePage(form, event.submitter);
+		saved({
+			...(await response.json()),
+			withdrawn: event.submitter?.matches("[data-withdraw]") ?? false,
+		});
+	});
+};
+
+// The form sent as the page sends it, with the button pressed, which
+// form.submit() leaves out: without it a withdrawal would go as an edit.
+const sendAsThePage = (form, button) => {
+	if (button?.name)
+		form.append(
+			Object.assign(document.createElement("input"), {
+				type: "hidden",
+				name: button.name,
+				value: button.value,
+			}),
+		);
+	form.submit();
+};
+
 document.addEventListener("click", (event) => {
 	const cancel = event.target.closest("[data-cancel]");
-	if (cancel) return close(cancel.closest(".respond"));
+	if (cancel) return putAway(cancel);
 
 	const action = event.target.closest("[data-respond]");
 	if (!action) return;
@@ -91,5 +135,5 @@ document.addEventListener("keydown", (event) => {
 
 	if (event.key === "Enter" && (event.metaKey || event.ctrlKey))
 		holder.querySelector("form").requestSubmit();
-	if (event.key === "Escape" && !event.target.value) close(holder);
+	if (event.key === "Escape" && !event.target.value) putAway(holder);
 });

data/public/review-drafts.js

@@ -447,11 +447,14 @@ export const progress = (pr) => {
 	const mine = (entry) => of(entry.decision.pr);
 	const picked = items.filter(chosen).length;
 	const ticked = items.filter((item) => !chosen(item) && item.ticked).length;
+	const blocking = items.filter((item) => item.grade !== "non_blocking");
 	return {
 		total: items.length,
 		chosen: picked,
 		ticked,
 		left: items.length - picked - ticked,
+		blocking: blocking.length,
+		blockingLeft: blocking.filter((item) => !reviewed(item)).length,
 		drafts: state.pending.filter(mine).length,
 		again: state.choices.filter(
 			(entry) =>
@@ -485,20 +488,55 @@ const changed = () => {
 };
 
 // The pane at the left counts the same choices: its rows follow them as they
-// are made, in the marks the server wrote them with.
+// are made, in beads as the server draws them (DeskHelper#decision_beads).
+const reviewedInWords = ({ name, total, left }) => {
+	const decisions = `${name} ${total === 1 ? "decision" : "decisions"}`;
+	const reviewed = total - left;
+	if (!left)
+		return total === 1
+			? `its one ${decisions} reviewed`
+			: `all ${total} ${decisions} reviewed`;
+	if (!reviewed) return `none of ${total} ${decisions} reviewed yet`;
+	return `${reviewed} of ${total} ${decisions} reviewed`;
+};
+const span = (properties, ...children) => {
+	const element = Object.assign(document.createElement("span"), properties);
+	element.append(...children);
+	return element;
+};
+const beadsOf = (now) =>
+	span(
+		{ className: "beads" },
+		...[
+			{ name: "blocking", total: now.blocking, left: now.blockingLeft },
+			{
+				name: "non-blocking",
+				total: now.total - now.blocking,
+				left: now.left - now.blockingLeft,
+			},
+		]
+			.filter((grade) => grade.total)
+			.map((grade) =>
+				span(
+					{
+						className: grade.name,
+						role: "img",
+						ariaLabel: reviewedInWords(grade),
+					},
+					...Array.from({ length: grade.total }, (_, at) =>
+						span({
+							className: at < grade.total - grade.left ? "bead reviewed" : "bead",
+						}),
+					),
+				),
+			),
+	);
 const side = () => {
 	const count = (number) => number.toLocaleString("en-US");
 	for (const row of document.querySelectorAll("[data-side-pr]")) {
 		const now = progress(prNumber(row.dataset.sidePr));
 		if (!now.total) continue;
-		const done = now.chosen + now.ticked;
-		row.querySelector("[data-side-mark]").textContent = !now.left
-			? "x"
-			: done
-				? "~"
-				: "";
-		row.querySelector("[data-side-fraction]").textContent =
-			`${done}/${now.total}`;
+		row.querySelector("[data-side-decisions]").replaceChildren(beadsOf(now));
 	}
 	const overall = document.querySelector("[data-side-overall]");
 	if (!overall || !inventory.length) return;

data/public/review-rounds.js

@@ -1,10 +1,11 @@
-import { helping, keyOf } from "./keys.js";
+import { helping, keyOf, overThePage } from "./keys.js";
 import { prNumber } from "./pr-number.js";
 import {
 	announce,
 	handOver,
 	draftsState,
 	registerRounds,
+	settled,
 	stale,
 	updateDrafts,
 } from "./review-drafts.js";
@@ -28,6 +29,25 @@ const reviewData = async () => {
 	if (!response.ok) throw new Error(`Desk returned ${response.status}`);
 	return response.json();
 };
+// The pane's ↩, on each pull request something came back on, in the words
+// the desk gives (DeskHelper#side_mark).
+const markThePane = (back = {}) => {
+	for (const row of document.querySelectorAll("[data-side-pr]")) {
+		const said = back[row.dataset.sidePr];
+		Object.assign(row.querySelector("[data-side-mark]"), {
+			textContent: said ? "↩" : "",
+			role: said ? "img" : null,
+			ariaLabel: said ?? null,
+		});
+	}
+};
+// Once the desk has the owner's word on an answer, it has moved the notes the
+// answer was to (Rounds#move_notes), and the pane is marked again from it. A
+// desk that does not answer leaves the pane as the page drew it.
+const followThePane = async () => {
+	await settled();
+	markThePane((await reviewData()).back);
+};
 // 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
@@ -589,6 +609,7 @@ const mark = (item, resolution, latest, kind, text) => {
 			},
 		};
 	});
+	followThePane().catch(() => {});
 	selectResponse(
 		visibleResponses().find((node) => node.dataset.request === next) ||
 			visibleResponses()[0],
@@ -1275,6 +1296,7 @@ registerRounds({
 		context = await reviewData();
 		importServerBatches();
 		importServerResponses();
+		markThePane(context.back);
 	},
 });
 
@@ -1290,6 +1312,7 @@ tools
 					? "Agent response imported. Confirm or reply to its existing requests."
 					: "The desk has this answer already.",
 			);
+			followThePane().catch(() => {});
 		} catch (error) {
 			announce(`Response could not be imported: ${error.message}`);
 		} finally {
@@ -1361,8 +1384,9 @@ 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;
+	// A picture looked at closely, or a note written in Grouse's overlay, leaves
+	// the response marked: Esc comes back to it.
+	if (overThePage(event.target)) return;
 	const node = event.target.closest("[data-request]");
 	if (node) markResponse(node);
 	else activeResponse?.removeAttribute("aria-current");

data/public/share.css

@@ -0,0 +1,58 @@
+/* Sharing the desk: where it is now, then each way to share it, in the
+   route's own frame, with what it needs first or its button under its words. */
+
+.share .now {
+	margin-block: 0 0.5lh;
+}
+
+.share .ways {
+	border: 1px solid var(--rule);
+	border-top: 0;
+	background: var(--surface);
+}
+
+.share .way {
+	display: grid;
+	row-gap: 8px;
+	padding: var(--row-pad) 12px;
+	border-bottom: 1px solid var(--rule-soft);
+}
+
+.share .way:last-child {
+	border-bottom: 0;
+}
+
+.share .way h3 {
+	margin: 0;
+	font-size: 1rem;
+	color: var(--ink);
+}
+
+.share .way p {
+	margin: 0;
+}
+
+.share .way .facts {
+	color: var(--quiet);
+}
+
+.share .way form {
+	display: grid;
+	row-gap: 8px;
+	justify-items: start;
+}
+
+.share .allow {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px 2ch;
+	align-items: baseline;
+}
+
+.share .allow input {
+	width: min(40ch, 100%);
+}
+
+.share code {
+	white-space: nowrap;
+}

data/public/side.js

@@ -14,32 +14,23 @@ const made = (name, properties = {}, ...children) => {
 	return element;
 };
 
-// "3 of 19 decisions reviewed", from the row's "~" and "3/19".
-const progressInWords = (mark, fraction) => {
-	if (!fraction) return "no decisions to review";
-	const [reviewed, total] = fraction.split("/").map(Number);
-	const decisions = total === 1 ? "decision" : "decisions";
-	if (mark === "x")
-		return total === 1
-			? "its one decision reviewed"
-			: `all ${total} decisions reviewed`;
-	if (!reviewed) return `none of ${total} ${decisions} reviewed yet`;
-	return `${reviewed} of ${total} ${decisions} reviewed`;
-};
-
 const MOVED = {
 	changed: "changed on GitHub since it was read",
 	closed: "no longer open on GitHub",
 };
 
+// The row's marks said in words: what came back from the agent, then each
+// grade's beads with what they count, in the words the server labelled them with.
 const marksOf = (row) => {
-	const mark = row.querySelector("[data-side-mark]").textContent.trim();
-	const fraction = row.querySelector("[data-side-fraction]").textContent.trim();
+	const back = row.querySelector("[data-side-mark]");
+	const grades = row.querySelectorAll("[data-side-decisions] [role=img]");
 	return [
-		[
-			[mark, fraction].filter(Boolean).join(" "),
-			progressInWords(mark, fraction),
-		],
+		back.textContent && [back.textContent, back.ariaLabel],
+		...[...grades].map((grade) => [
+			made("span", { className: "beads" }, grade.cloneNode(true)),
+			grade.ariaLabel,
+		]),
+		!grades.length && ["", "no decisions to review"],
 		row.dataset.moved && ["*", MOVED[row.dataset.moved]],
 	].filter(Boolean);
 };
@@ -62,7 +53,7 @@ const cardOf = (row) => {
 				made(
 					"div",
 					{},
-					made("dt", { textContent: shown }),
+					made("dt", {}, shown),
 					made("dd", { textContent: said }),
 				),
 			),