proctolog 0.1.0 → 0.2.0

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 }),
 				),
 			),