proctolog 0.1.1 → 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 }),
 				),
 			),

data/public/terminal.css

@@ -501,7 +501,10 @@ body.shell::before {
 	white-space: nowrap;
 }
 
+/* The ↩ of a pull request the agent's answers came back on asks for the owner. */
 .side .stops .mark {
+	color: var(--ink);
+	font-weight: 700;
 	white-space: pre;
 }
 
@@ -528,8 +531,7 @@ body.shell::before {
 	background: var(--rest);
 }
 
-.side .stops [aria-current] .number,
-.side .stops [aria-current] .mark {
+.side .stops [aria-current] .number {
 	color: var(--ink);
 }
 
@@ -539,11 +541,6 @@ body.shell::before {
 	white-space: normal;
 }
 
-.side .stops [aria-current] .fraction {
-	border-color: var(--rule-strong);
-	color: var(--ink);
-}
-
 /* The bars: how far, drawn square */
 
 meter,
@@ -960,18 +957,33 @@ body.shell .foot {
 	color: var(--ink);
 }
 
+/* The stage, and beside it, for a pair, the panel of its views and regions;
+   under them the divider's slider, the caption and the keys, the width of
+   the window. */
 .viewer[open] {
 	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
 	grid-template-rows: minmax(0, 1fr) auto auto auto;
 }
 
 .viewer .stage {
 	position: relative;
+	grid-column: 1;
+	grid-row: 1;
 	overflow: hidden;
 	cursor: crosshair;
 	touch-action: none;
 }
 
+.viewer .swipe {
+	grid-column: 1;
+}
+
+.viewer .caption,
+.viewer .keys {
+	grid-column: 1 / -1;
+}
+
 .viewer .stage[data-zoomed="true"] {
 	cursor: grab;
 }
@@ -1011,7 +1023,9 @@ body.shell .foot {
 }
 
 /* The swipe's divider and the changed regions: as thin on the screen at any
-   zoom, white inside black, so that they show on a light picture and a dark. */
+   zoom, white with black, so that they show on a light picture and a dark.
+   A changed region is a black line dashed white, lighter than a note's solid
+   frame, so the two are told apart at a glance. */
 .viewer .divider,
 .viewer .change {
 	position: absolute;
@@ -1038,24 +1052,211 @@ body.shell .foot {
 }
 
 .viewer .change {
-	margin: calc(var(--line) * -2);
-	border: calc(var(--line) * 2) solid #fff;
-	outline: var(--line) solid #000;
+	--dash: calc(var(--line) * 2);
+	margin: calc(var(--dash) * -1);
+	border: var(--dash) solid #000;
+	outline: var(--dash) dashed #fff;
+	outline-offset: calc(var(--dash) * -1);
 }
 
 .viewer .change[data-current] {
-	outline-width: calc(var(--line) * 3);
+	--dash: calc(var(--line) * 3);
+}
+
+/* The region focused on says its number and its half, above it, as large on
+   the screen at any zoom. */
+.viewer .change .tag {
+	position: absolute;
+	bottom: 100%;
+	left: calc(var(--line) * -3);
+	margin-bottom: calc(var(--line) * 3);
+	padding: 0 calc(var(--line) * 5);
+	background: #fff;
+	color: #000;
+	font-size: calc(var(--line) * 12);
+	font-weight: 700;
+	line-height: 1.5;
+	white-space: nowrap;
 }
 
 .viewer .swipe {
 	margin: 0.3rem 1.1rem;
 }
 
-.viewer .keys .current {
+/* The map in the stage's corner, once the stage shows only part of the
+   picture: the whole, small, its regions, and the part shown, framed. */
+.viewer .minimap {
+	position: absolute;
+	right: 12px;
+	bottom: 12px;
+	z-index: 1;
+	padding: 4px;
+	border: 1px solid var(--rule-strong);
+	background: var(--paper);
+	cursor: pointer;
+	--line: 1px;
+}
+
+.viewer .minimap[hidden] {
+	display: none;
+}
+
+.viewer .map-canvas {
+	position: relative;
+	overflow: hidden;
+}
+
+.viewer .map-regions,
+.viewer .map-shown {
+	pointer-events: none;
+}
+
+.viewer .map-region {
+	position: absolute;
+	outline: 1px solid #000;
+}
+
+.viewer .map-region[data-current] {
+	outline: 2px solid #fff;
+}
+
+.viewer .map-shown {
+	position: absolute;
+	border: 1px solid #fff;
+	outline: 1px solid #000;
+	box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.45);
+}
+
+/* The panel beside a pair, quiet: rows without boxes, the view looked at in
+   reverse with a line on what it shows, the regions by number, and the one
+   focused on as each half has it. It scrolls under the ✕'s corner. */
+.viewer .compare {
+	grid-column: 2;
+	grid-row: 1;
+	box-sizing: border-box;
+	width: 16rem;
+	min-height: 0;
+	margin-top: 3rem;
+	padding: 0.6rem 0.8rem 1rem;
+	overflow-y: auto;
+	border-left: 1px solid var(--rule);
+	background: var(--panel);
+	font-size: 0.86rem;
+	--line: 1px;
+}
+
+.viewer .compare[hidden] {
+	display: none;
+}
+
+.viewer .compare h2 {
+	margin: 0 0 0.4rem;
+	color: var(--quiet);
+	font-size: 0.8rem;
+	font-weight: 600;
+	letter-spacing: 0.025em;
+	text-transform: uppercase;
+}
+
+.viewer .compare h2 .count {
 	color: var(--ink);
+}
+
+.viewer .compare section + section {
+	margin-top: 1.4rem;
+}
+
+.viewer .compare p {
+	margin: 0.4rem 0;
+	color: var(--quiet);
+}
+
+.viewer .compare button {
+	border-color: transparent;
+	cursor: pointer;
+}
+
+.viewer .compare .way {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	gap: 0 1ch;
+	width: 100%;
+	padding: 0.15rem 0.4rem;
+	text-align: left;
+}
+
+.viewer .compare .way .shows {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0 1.2ch;
+	width: 100%;
+	padding-left: calc(1.7em + 1ch);
+	font-size: 0.8rem;
+}
+
+.viewer .compare [aria-pressed="true"] kbd {
+	border-color: currentcolor;
+	color: inherit;
+}
+
+.viewer .compare .places {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.15rem;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.viewer .compare .place {
+	min-width: 2em;
+	padding: 0 0.3rem;
+	color: var(--quiet);
+	font-size: 0.8rem;
+}
+
+.viewer .compare .place[aria-current] {
+	background: var(--ink);
+	color: var(--paper);
 	font-weight: 700;
 }
 
+.viewer .compare .going {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0 1.2ch;
+	font-size: 0.8rem;
+}
+
+/* The region focused on, as the before has it and as the after does; a
+   press on either writes a note on it there. */
+.viewer .compare .crop {
+	display: block;
+	width: 100%;
+	margin-top: 0.4rem;
+	padding: 0.3rem;
+	text-align: left;
+}
+
+.viewer .compare .crop .frame {
+	position: relative;
+	display: block;
+	overflow: hidden;
+	background: #000;
+}
+
+.viewer .compare .crop .label {
+	display: block;
+	margin-top: 0.15rem;
+	color: var(--quiet);
+	font-size: 0.8rem;
+}
+
+.viewer .compare .crop:hover:not(:disabled) .label {
+	color: var(--ink);
+}
+
 /* A region being drawn, and the place a note is being written on: white
    inside black, so that it shows on a light picture and a dark, with all
    outside it dimmed. */
@@ -1071,8 +1272,10 @@ body.shell .foot {
 	display: none;
 }
 
-/* The notes on a picture, as thin on the screen at any zoom as the changed
-   regions; a pin is a ring. */
+/* The notes on a picture: a solid frame, black outside and white inside, so
+   that one band shows on a light picture and the other on a dark; heavier
+   than a changed region's dashes, and as heavy on the screen at any zoom. A
+   pin is a small square of the same frame. */
 .viewer .notes {
 	position: absolute;
 	inset: 0;
@@ -1080,17 +1283,18 @@ body.shell .foot {
 }
 
 .viewer .note {
+	--frame: calc(var(--line) * 2);
 	position: absolute;
-	margin: calc(var(--line) * -2);
-	border: calc(var(--line) * 2) solid #fff;
-	outline: var(--line) solid #000;
+	margin: calc(var(--frame) * -2);
+	padding: var(--frame);
+	border: var(--frame) solid #000;
+	box-shadow: inset 0 0 0 var(--frame) #fff;
 }
 
 .viewer .note.pin {
-	width: calc(var(--line) * 14);
-	height: calc(var(--line) * 14);
-	margin: calc(var(--line) * -7);
-	border-radius: 50%;
+	width: calc(var(--line) * 12);
+	height: calc(var(--line) * 12);
+	margin: calc(var(--line) * -6 - var(--frame) * 2);
 }
 
 /* A note saved opens at a click, and says so under the pointer. */
@@ -1099,19 +1303,21 @@ body.shell .foot {
 	cursor: pointer;
 }
 
-.viewer[data-takes-notes] .note[data-note]:hover {
-	border-width: calc(var(--line) * 3);
+.viewer[data-takes-notes] .note[data-note]:hover,
+.viewer .note.drafted {
+	--frame: calc(var(--line) * 3);
 }
 
 .viewer .note.drafted {
-	border-width: calc(var(--line) * 3);
-	box-shadow: 0 0 0 calc(var(--line) * 100000) rgb(0 0 0 / 0.5);
+	box-shadow:
+		inset 0 0 0 var(--frame) #fff,
+		0 0 0 calc(var(--line) * 100000) rgb(0 0 0 / 0.5);
 }
 
-/* The note's form, beside the place it is about. */
+/* The note's form, beside the place it is about, over the map. */
 .viewer .beside-note {
 	position: absolute;
-	z-index: 1;
+	z-index: 2;
 	width: min(24rem, calc(100% - 24px));
 	cursor: auto;
 }
@@ -1150,7 +1356,7 @@ body.shell .foot {
 	position: absolute;
 	top: 0.6rem;
 	right: 0.8rem;
-	z-index: 2;
+	z-index: 3;
 	min-width: 2.2rem;
 	padding: 0.1rem 0.6ch;
 	border: 1px solid var(--rule-strong);
@@ -1300,15 +1506,60 @@ body[data-page="pull_requests"] .flash {
 	font-weight: 400;
 }
 
-.side .stops .fraction {
-	min-width: 4ch;
+.side .stops .decisions {
 	padding-left: 0.6ch;
-	border-left: 1px solid var(--rule-soft);
 	color: var(--quiet);
 	font-size: 0.8rem;
 	text-align: right;
 }
 
+/* Decisions counted as beads, the stepper's own (below): a bead to each
+   blocking decision, a smaller one to each non-blocking, hollow while it
+   waits for the owner and solid once reviewed. In the pane they are smaller
+   again. */
+
+.beads {
+	display: inline-flex;
+	gap: 1ch;
+	align-items: center;
+	vertical-align: middle;
+}
+
+.beads > span {
+	display: inline-flex;
+	gap: 3px;
+	align-items: center;
+}
+
+.beads .non-blocking .bead {
+	width: 6px;
+	height: 6px;
+	border-color: var(--quiet);
+}
+
+.side .beads {
+	gap: 0.8ch;
+}
+
+.side .beads > span {
+	gap: 2px;
+}
+
+.side .beads .bead {
+	width: 7px;
+	height: 7px;
+}
+
+.side .beads .non-blocking .bead {
+	width: 5px;
+	height: 5px;
+}
+
+/* A burst's count: a hollow bead of the grade, then how many of it wait. */
+.side .beads .count {
+	gap: 0.4ch;
+}
+
 .pull-request .status {
 	display: block;
 	margin: 8px 0 var(--group-gap);
@@ -2496,17 +2747,23 @@ button.choice[hidden] {
 }
 
 .stepper .cell,
-.finish .bead {
+.finish .bead,
+.beads .bead {
 	box-sizing: border-box;
 	width: 9px;
 	height: 9px;
 	border: 1px solid var(--ink);
 	border-radius: 50% !important;
+}
+
+.stepper .cell,
+.finish .bead {
 	cursor: pointer;
 }
 
 .stepper .cell:not([data-state=""]),
-.finish [data-line-of]:not([data-state=""]) .bead {
+.finish [data-line-of]:not([data-state=""]) .bead,
+.beads .bead.reviewed {
 	border-color: var(--quiet);
 	background: var(--quiet);
 }
@@ -4002,6 +4259,10 @@ body[data-page="bursts"] > .main {
 	text-align: right;
 }
 
+.lines .stands strong {
+	color: var(--ink);
+}
+
 .lines .number {
 	margin: 0;
 	color: var(--quiet);