proctolog 0.1.0

data/public/scenarios.css

@@ -0,0 +1,253 @@
+:root {
+	--ok: #2e6b44;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--ok: #8fc99f;
+	}
+}
+
+.server {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 0.4rem 1.4rem;
+	margin-top: 1rem;
+	padding: 0.8rem 1rem;
+	border: 1px solid var(--rule);
+	background: var(--rest);
+}
+
+.server p {
+	margin: 0;
+}
+
+.server .status {
+	display: flex;
+	align-items: center;
+	gap: 0.55rem;
+	font-weight: 500;
+}
+
+.server .where {
+	flex: 1 1 22rem;
+	color: var(--quiet);
+	font-size: 0.87rem;
+}
+
+.server details {
+	flex-basis: 100%;
+}
+
+.server pre {
+	margin: 0.4rem 0 0;
+	overflow-x: auto;
+	font-size: 0.78rem;
+}
+
+.light {
+	width: 0.65rem;
+	height: 0.65rem;
+	border-radius: 50%;
+	background: var(--quiet);
+}
+
+.server[data-state="up"] .light {
+	background: var(--ok);
+}
+
+.server[data-state="starting"] .light {
+	background: var(--pin);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.server[data-state="starting"] .light {
+		animation: breathe 1.2s ease-in-out infinite alternate;
+	}
+}
+
+@keyframes breathe {
+	to {
+		opacity: 0.25;
+	}
+}
+
+.scenarios h2 {
+	margin: 2.4rem 0 0.2rem;
+	font: 500 1.5rem / 1.2 var(--serif);
+}
+
+.scenarios h3 {
+	margin: 1.7rem 0 0.3rem;
+	font: italic 1.08rem / 1.3 var(--serif);
+}
+
+.scenarios .lede {
+	margin: 0;
+	color: var(--quiet);
+}
+
+.steps-of {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.scenario {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) 12rem 17rem;
+	gap: 0.6rem 1.5rem;
+	padding: 0.9rem 0;
+	border-top: 1px solid var(--rule);
+	scroll-margin-block: 3rem;
+}
+
+.scenario:target {
+	background: var(--rest);
+	box-shadow: -0.75rem 0 var(--rest);
+}
+
+.scenario h4 {
+	margin: 0;
+	font: 1.05rem / 1.3 var(--serif);
+}
+
+.scenario .n {
+	display: inline-block;
+	min-width: 1.5rem;
+	color: var(--quiet);
+}
+
+.scenario .expect {
+	margin: 0.2rem 0 0;
+}
+
+.scenario .expect::before {
+	content: "Expect: ";
+	color: var(--quiet);
+}
+
+.steps {
+	margin-top: 0.5rem;
+	color: var(--quiet);
+	font-size: 0.9rem;
+}
+
+.steps summary {
+	cursor: pointer;
+}
+
+.steps ol {
+	margin: 0.3rem 0 0;
+	padding-left: 1.6rem;
+}
+
+.steps li {
+	margin-top: 0.25rem;
+	color: var(--ink);
+}
+
+.steps code,
+.server code {
+	padding: 0 0.25em;
+	background: var(--rest);
+	font-size: 0.86em;
+}
+
+.lost {
+	margin: 0.5rem 0 0;
+	color: var(--pin);
+}
+
+.act {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 0.3rem;
+}
+
+.act small,
+.seen .line {
+	color: var(--quiet);
+	font-size: 0.82rem;
+}
+
+.seen .line {
+	margin: 0 0 0.35rem;
+}
+
+.seen .line[data-result="ok"] {
+	color: var(--ok);
+}
+
+.seen .line[data-result="not_ok"] {
+	color: var(--pin);
+}
+
+.results {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.3rem;
+}
+
+.scenarios form {
+	margin: 0;
+}
+
+.scenario .card {
+	cursor: default;
+}
+
+.open,
+.action,
+.result {
+	border: 1px solid var(--chalk);
+	border-radius: 4px;
+	background: transparent;
+	color: var(--chalk);
+	font: inherit;
+	cursor: pointer;
+}
+
+.open,
+.action {
+	padding: 0.35rem 1.1rem;
+}
+
+.open {
+	background: var(--chalk);
+	color: var(--paper);
+}
+
+.open:disabled {
+	border-color: var(--rule);
+	background: transparent;
+	color: var(--quiet);
+	cursor: not-allowed;
+}
+
+.result {
+	padding: 0.1rem 0.55rem;
+	border-color: var(--rule);
+	color: var(--quiet);
+	font-size: 0.8rem;
+}
+
+.result:hover,
+.action:hover {
+	border-color: var(--chalk);
+	color: var(--ink);
+}
+
+.result[aria-pressed="true"] {
+	border-color: var(--chalk);
+	color: var(--ink);
+	font-weight: 600;
+}
+
+@media (max-width: 52rem) {
+	.scenario {
+		grid-template-columns: 1fr;
+	}
+}

data/public/scenarios.js

@@ -0,0 +1,36 @@
+// While the sitting server starts, ask it every two seconds whether it is
+// up, and read the page again once it is (or has stopped).
+
+const server = document.querySelector('.server[data-state="starting"]');
+
+const wait = async () => {
+	const response = await fetch(server.dataset.statusUrl, {
+		headers: { Accept: "application/json" },
+	});
+	const { state } = await response.json();
+	if (state === "starting") setTimeout(wait, 2000);
+	else location.reload();
+};
+
+if (server) setTimeout(wait, 2000);
+
+// A note on a scenario: one dialog, told which scenario it is about and where
+// the note goes.
+
+const dialog = document.querySelector("#note-dialog");
+const form = dialog.querySelector("form");
+
+document.addEventListener("click", (event) => {
+	const button = event.target.closest("[data-note-scenario]");
+	if (!button) return;
+
+	form.reset();
+	form.action = button.dataset.noteScenario;
+	dialog.querySelector("[data-about]").textContent = button.dataset.name;
+	dialog.showModal();
+});
+
+form.addEventListener("keydown", (event) => {
+	if (event.key === "Enter" && (event.metaKey || event.ctrlKey))
+		form.requestSubmit();
+});

data/public/schemas/proctolog-response-v1.json

@@ -0,0 +1,101 @@
+{
+	"$schema": "https://json-schema.org/draft/2020-12/schema",
+	"title": "PRoctolog agent response v1",
+	"type": "object",
+	"required": [
+		"format",
+		"id",
+		"repository",
+		"review",
+		"batchId",
+		"createdAt",
+		"summary",
+		"results"
+	],
+	"properties": {
+		"format": { "const": "proctolog-response/v1" },
+		"id": { "type": "string", "minLength": 1 },
+		"repository": { "type": "string", "minLength": 1 },
+		"review": { "type": "string", "minLength": 1 },
+		"batchId": { "type": "string", "minLength": 1 },
+		"createdAt": { "type": "string", "format": "date-time" },
+		"summary": { "type": "string", "minLength": 1 },
+		"followups": { "type": "array", "items": { "type": "string" } },
+		"results": {
+			"type": "array",
+			"items": {
+				"type": "object",
+				"required": [
+					"id",
+					"status",
+					"summary",
+					"details",
+					"evidence",
+					"verification"
+				],
+				"properties": {
+					"id": {
+						"type": "string",
+						"minLength": 1,
+						"description": "The request's id as the worklist gives it. A rule to record is answered under the rule's own id, never the id of the choice it was made from."
+					},
+					"status": {
+						"enum": ["done", "answered", "deferred", "needs_owner", "blocked"]
+					},
+					"summary": { "type": "string", "minLength": 1 },
+					"details": { "type": "string" },
+					"head": { "type": "string", "pattern": "^[0-9a-f]{40}$" },
+					"backlog": { "type": "string", "minLength": 1 },
+					"question": {
+						"type": "object",
+						"required": ["prompt", "recommendation", "blocking"],
+						"properties": {
+							"prompt": { "type": "string", "minLength": 1 },
+							"recommendation": { "type": "string", "minLength": 1 },
+							"blocking": { "type": "boolean" },
+							"options": { "type": "array", "items": { "type": "string" } }
+						}
+					},
+					"evidence": {
+						"type": "array",
+						"items": {
+							"type": "object",
+							"required": ["label"],
+							"properties": {
+								"label": { "type": "string" },
+								"url": { "type": "string", "pattern": "^https?://" },
+								"path": {
+									"type": "string",
+									"description": "A file the result rests on: for a rule, the file it was recorded in, such as CLAUDE.md or a decision record."
+								},
+								"quote": { "type": "string" }
+							}
+						}
+					},
+					"verification": {
+						"type": "array",
+						"items": {
+							"type": "object",
+							"required": ["command", "result"],
+							"properties": {
+								"command": { "type": "string" },
+								"result": { "enum": ["passed", "failed", "not_run"] },
+								"head": { "type": "string", "pattern": "^[0-9a-f]{40}$" }
+							}
+						}
+					}
+				},
+				"allOf": [
+					{
+						"if": { "properties": { "status": { "const": "needs_owner" } } },
+						"then": { "required": ["question"] }
+					},
+					{
+						"if": { "properties": { "status": { "const": "deferred" } } },
+						"then": { "required": ["backlog"] }
+					}
+				]
+			}
+		}
+	}
+}

data/public/side.js

@@ -0,0 +1,133 @@
+// A pull request in the pane at the left, held under the pointer: a card
+// beside the pane with its title in full, each mark its row shows said in
+// words, and the way to it on GitHub. The card is written from the row as it
+// stands when it opens, so it follows the marks a page rewrites as choices
+// are made, and the * that keys.js puts on a row GitHub moved on from.
+
+const side = document.querySelector(".side");
+const OPENS_AFTER = 350;
+const STAYS_FOR = 200;
+
+const made = (name, properties = {}, ...children) => {
+	const element = Object.assign(document.createElement(name), properties);
+	element.append(...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",
+};
+
+const marksOf = (row) => {
+	const mark = row.querySelector("[data-side-mark]").textContent.trim();
+	const fraction = row.querySelector("[data-side-fraction]").textContent.trim();
+	return [
+		[
+			[mark, fraction].filter(Boolean).join(" "),
+			progressInWords(mark, fraction),
+		],
+		row.dataset.moved && ["*", MOVED[row.dataset.moved]],
+	].filter(Boolean);
+};
+
+const cardOf = (row) => {
+	const number = row.dataset.sidePr;
+	const title = row.querySelector(".title").textContent;
+	const again = side.querySelector(".read .again");
+	return [
+		made(
+			"p",
+			{ className: "name" },
+			made("span", { className: "number", textContent: `#${number}` }),
+			` ${title}`,
+		),
+		made(
+			"dl",
+			{},
+			...marksOf(row).map(([shown, said]) =>
+				made(
+					"div",
+					{},
+					made("dt", { textContent: shown }),
+					made("dd", { textContent: said }),
+				),
+			),
+		),
+		made(
+			"p",
+			{ className: "ways" },
+			made("a", {
+				href: row.dataset.github,
+				target: "_blank",
+				rel: "noopener",
+				textContent: "on GitHub",
+			}),
+			...(row.dataset.moved && again
+				? [made("a", { href: again.href, textContent: "read again" })]
+				: []),
+		),
+	];
+};
+
+const card = made("div", { className: "side-card", popover: "manual" });
+card.dataset.desk = "";
+let opening;
+let closing;
+
+// Level with its row, just clear of the pane, and wholly on the screen.
+const place = (row) => {
+	const { top } = row.getBoundingClientRect();
+	const foot = document.querySelector(".foot")?.offsetHeight ?? 0;
+	card.style.left = `${Math.max(8, Math.min(side.getBoundingClientRect().right + 8, innerWidth - card.offsetWidth - 8))}px`;
+	card.style.top = `${Math.max(8, Math.min(top, innerHeight - foot - card.offsetHeight - 8))}px`;
+};
+
+const open = (row) => {
+	card.replaceChildren(...cardOf(row));
+	card.dataset.for = row.dataset.sidePr;
+	if (!card.matches(":popover-open")) card.showPopover();
+	place(row);
+};
+
+const close = () => {
+	clearTimeout(opening);
+	if (card.matches(":popover-open")) card.hidePopover();
+};
+
+const stay = () => clearTimeout(closing);
+const leave = () => {
+	clearTimeout(opening);
+	closing = setTimeout(close, STAYS_FOR);
+};
+
+if (side) {
+	document.body.append(card);
+	for (const row of side.querySelectorAll("[data-side-pr]")) {
+		row.addEventListener("mouseenter", () => {
+			stay();
+			clearTimeout(opening);
+			// Once one card is open, the next row's opens at once.
+			if (card.matches(":popover-open")) open(row);
+			else opening = setTimeout(() => open(row), OPENS_AFTER);
+		});
+		row.addEventListener("mouseleave", leave);
+	}
+	card.addEventListener("mouseenter", stay);
+	card.addEventListener("mouseleave", leave);
+	side.addEventListener("scroll", close, { passive: true });
+	document.addEventListener("keydown", close);
+}