@shivaedev/work-board 0.8.0 → 0.9.0

package/src/browser/responses/questionnaireControls.ts

@@ -0,0 +1,74 @@
+import type { Draft } from "./drafts.ts";
+import type { Prompt } from "./Prompt.ts";
+import type { PromptAnswer } from "./schema.ts";
+
+function restoreAnswers(fields: readonly HTMLFieldSetElement[], draft: Draft, same: boolean) {
+	for (const field of fields) {
+		const answer = draft.answers?.find((entry) => entry.prompt === field.dataset.prompt);
+		for (const input of field.querySelectorAll<HTMLInputElement>("input")) {
+			input.checked = same && (answer?.selected.includes(input.value) ?? false);
+		}
+		const text = field.querySelector<HTMLTextAreaElement>("textarea");
+		if (text) {
+			text.value = answer?.text ?? "";
+		}
+	}
+}
+export function questionnaireControls(form: HTMLFormElement) {
+	function modeOf(field: HTMLFieldSetElement) {
+		if (field.dataset.mode === "text") {
+			return "text";
+		}
+		return field.dataset.mode === "many" ? "many" : "one";
+	}
+	const fields = [...form.querySelectorAll<HTMLFieldSetElement>("fieldset[data-prompt]")];
+	const models: Prompt[] = fields.map((field) => ({
+		id: field.dataset.prompt ?? "",
+		mode: modeOf(field),
+		options: [...field.querySelectorAll<HTMLInputElement>("input[data-option-source]")].map((input) => ({
+			id: input.value,
+			source: input.dataset.optionSource ?? "",
+		})),
+		source: field.dataset.source ?? "",
+	}));
+	function read(): readonly PromptAnswer[] | undefined {
+		return fields.length === 0
+			? undefined
+			: fields.map((field) => ({
+					prompt: field.dataset.prompt ?? "",
+					selected: [...field.querySelectorAll<HTMLInputElement>("input:checked")].map((input) => input.value),
+					text: field.querySelector<HTMLTextAreaElement>("textarea")?.value ?? "",
+				}));
+	}
+	function restore(draft: Draft, revision: string) {
+		const same = draft.revision === revision && (draft.question === undefined || draft.question === form.dataset.question);
+		restoreAnswers(fields, draft, same);
+		const recovery = form.querySelector<HTMLPreElement>("#response-draft-recovery");
+		const retained =
+			!same && draft.answers
+				? `Earlier template answers (selections cleared; review before choosing again):\n${JSON.stringify(draft.answers, null, 2)}\n${draft.recovery ?? ""}`
+				: draft.recovery;
+		if (recovery) {
+			recovery.textContent = retained ?? "";
+			recovery.hidden = !retained;
+		}
+		return retained;
+	}
+	function validate(type: string) {
+		for (const field of fields) {
+			const text = field.querySelector<HTMLTextAreaElement>("textarea");
+			text?.setCustomValidity(
+				type === "answer" && !text.value.trim() && !field.querySelector("input:checked") ? "Choose an option or answer in your own words." : "",
+			);
+		}
+	}
+	for (const field of fields) {
+		field.querySelector("[data-clear-choices]")?.addEventListener("click", () => {
+			for (const input of field.querySelectorAll<HTMLInputElement>("input")) {
+				input.checked = false;
+			}
+			form.dispatchEvent(new Event("input", { bubbles: true }));
+		});
+	}
+	return { models, read, restore, validate };
+}

package/src/browser/responses/schema.ts

@@ -3,6 +3,13 @@ import { Identity } from "#path/Identity.ts";
 
 export const Revision = Schema.String.check(Schema.isPattern(/^[a-f\d]{64}$/u));
 export const ResponseKind = Schema.Literals(["answer", "clarify", "not_now"]);
+export const PromptAnswer = Schema.Struct({
+	prompt: Identity.check(Schema.isMaxLength(128)),
+	selected: Schema.Array(Identity.check(Schema.isMaxLength(128))).check(Schema.isMaxLength(32)),
+	text: Schema.String.check(Schema.isMaxLength(8192)),
+});
+export const Answers = Schema.Array(PromptAnswer).check(Schema.isMaxLength(32));
+export type PromptAnswer = typeof PromptAnswer.Type;
 export const QuestionRecord = Schema.Struct({
 	deadline: Schema.Number.check(Schema.isFinite(), Schema.isGreaterThanOrEqualTo(0), Schema.isLessThanOrEqualTo(8_640_000_000_000_000)),
 	item: Identity,
@@ -13,10 +20,12 @@ export const QuestionRecord = Schema.Struct({
 	source: Schema.String,
 });
 export const ResponseRecord = Schema.Struct({
+	answers: Schema.optional(Answers),
 	author: Schema.String.check(Schema.isPattern(/\S/u), Schema.isMaxLength(200)),
 	question: Identity,
 	recordedAt: Schema.Number.check(Schema.isFinite(), Schema.isGreaterThanOrEqualTo(0), Schema.isLessThanOrEqualTo(8_640_000_000_000_000)),
 	reviewedRevision: Revision,
+	supersedes: Schema.optional(Identity),
 	type: ResponseKind,
 });
 export const QuestionPreview = Schema.Struct({
@@ -40,10 +49,12 @@ export class ResponseFailed extends Schema.TaggedError<ResponseFailed>()("Respon
 	message: Schema.String,
 }) {}
 export const DraftInput = Schema.Struct({
+	answers: Schema.optional(Answers),
 	author: ResponseRecord.fields.author,
-	body: Schema.String.check(Schema.isPattern(/\S/u), Schema.isMaxLength(32_768)),
+	body: Schema.String.check(Schema.isMaxLength(32_768)),
 	id: Identity,
 	question: Identity,
+	supersedes: Schema.optional(Identity),
 	type: ResponseKind,
 });
 export type Question = typeof Question.Type;

package/src/browser/responses/setup.ts

@@ -1,5 +1,6 @@
 import { draftSession } from "./draftSession.ts";
 import { responsePreview } from "./preview.ts";
+import { questionnaireControls } from "./questionnaireControls.ts";
 import { submitResponse } from "./submit.ts";
 
 function attach() {
@@ -16,6 +17,7 @@ function attach() {
 	const author = form.elements.namedItem("author");
 	const body = form.elements.namedItem("body");
 	const type = form.elements.namedItem("type");
+	const supersedes = form.elements.namedItem("supersedes");
 	const submit = form.querySelector<HTMLButtonElement>("#response-submit");
 	const preview = form.querySelector<HTMLPreElement>("#response-preview-content");
 	const clear = form.querySelector<HTMLButtonElement>("#response-clear");
@@ -40,6 +42,7 @@ function attach() {
 	const item = form.dataset.item ?? "";
 	const request = form.dataset.request ?? "";
 	const revision = form.dataset.revision ?? "";
+	const questionId = form.dataset.question ?? "";
 	const key = `${item}/${request}`;
 	const storage = `work-board:drafts:${document.documentElement.dataset.workspace}`;
 	let storageApi: Storage | undefined;
@@ -52,12 +55,29 @@ function attach() {
 		status.textContent = message;
 	});
 	let draft = drafts.current();
+	const controls = questionnaireControls(form);
+	let recovery = controls.restore(draft, revision);
+	if (draft.question && draft.question !== questionId && draft.revision === revision) {
+		status.textContent = "Source moved since this draft. Text is retained and selections cleared; review the source and preview before responding.";
+	}
+	if (supersedes instanceof HTMLSelectElement) {
+		supersedes.value = draft.supersedes ?? "";
+	}
 	author.value = draft.author;
 	body.value = draft.body;
 	type.value = draft.type;
 	const fields = { author, body, type };
 	function save() {
-		draft = drafts.update({ author: fields.author.value, body: fields.body.value, revision: draft.revision, type: fields.type.value });
+		draft = drafts.update({
+			answers: controls.read(),
+			author: fields.author.value,
+			body: fields.body.value,
+			question: draft.question ?? questionId,
+			recovery,
+			revision: draft.revision,
+			supersedes: supersedes instanceof HTMLSelectElement ? supersedes.value || undefined : undefined,
+			type: fields.type.value,
+		});
 	}
 	form.addEventListener("input", () => {
 		save();
@@ -67,29 +87,39 @@ function attach() {
 	previewButton.disabled = false;
 	clear.disabled = false;
 	previewButton.addEventListener("click", () => {
+		controls.validate(type.value);
 		draft = drafts.update({
+			answers: controls.read(),
 			author: author.value,
 			body: body.value,
-			id: draft.revision === revision ? drafts.current().id : `response.${crypto.randomUUID()}`,
+			id: draft.revision === revision && (!draft.question || draft.question === questionId) ? drafts.current().id : `response.${crypto.randomUUID()}`,
+			question: questionId,
+			recovery,
 			revision,
+			supersedes: supersedes instanceof HTMLSelectElement ? supersedes.value || undefined : undefined,
 			type: type.value,
 		});
-		preview.textContent = responsePreview(draft, form.dataset.question ?? "");
+		preview.textContent = responsePreview(draft, questionId ?? "", controls.models);
 		preview.hidden = false;
 		submit.disabled = form.dataset.writable !== "true" || !form.checkValidity();
 	});
 	clear.addEventListener("click", drafts.clear);
 	form.addEventListener("submit", async (event) => {
 		event.preventDefault();
-		if (submit.disabled || draft.revision !== revision || !form.reportValidity()) {
+		if (submit.disabled || draft.revision !== revision || draft.question !== questionId || !form.reportValidity()) {
 			return;
 		}
 		submit.disabled = true;
 		previewButton.disabled = true;
 		if (await submitResponse(form, status, drafts, draft)) {
 			draft = drafts.current();
+			recovery = draft.recovery;
 			if (form.isConnected) {
 				body.value = "";
+				controls.restore(draft, revision);
+				if (supersedes instanceof HTMLSelectElement) {
+					supersedes.value = "";
+				}
 			}
 		}
 		previewButton.disabled = false;

package/src/browser/responses/submissionFields.ts

@@ -0,0 +1,15 @@
+import { Schema } from "effect";
+import type { Draft } from "./drafts.ts";
+import { ResponseKind } from "./schema.ts";
+
+export function submissionFields(pending: Draft, question: string) {
+	return {
+		...(pending.answers === undefined ? {} : { answers: pending.answers }),
+		...(pending.supersedes === undefined ? {} : { supersedes: pending.supersedes }),
+		author: pending.author,
+		body: pending.body,
+		id: pending.id,
+		question,
+		type: Schema.decodeUnknownSync(ResponseKind)(pending.type),
+	};
+}

package/src/browser/responses/submit.ts

@@ -1,8 +1,8 @@
-import { Schema } from "effect";
 import { session } from "#browser/session.ts";
 import type { draftSession } from "./draftSession.ts";
 import type { Draft } from "./drafts.ts";
-import { ResponseFailed, ResponseKind } from "./schema.ts";
+import { ResponseFailed } from "./schema.ts";
+import { submissionFields } from "./submissionFields.ts";
 
 export async function submitResponse(form: HTMLFormElement, status: HTMLParagraphElement, drafts: ReturnType<typeof draftSession>, pending: Draft) {
 	status.dataset.outcome = "pending";
@@ -12,15 +12,7 @@ export async function submitResponse(form: HTMLFormElement, status: HTMLParagrap
 		const question = await native.mutate(
 			native.responses.registerQuestion.run({ item: form.dataset.item ?? "", request: form.dataset.request ?? "", revision: pending.revision }),
 		);
-		await native.mutate(
-			native.responses.recordResponse.run({
-				author: pending.author,
-				body: pending.body,
-				id: pending.id,
-				question: question.id,
-				type: Schema.decodeUnknownSync(ResponseKind)(pending.type),
-			}),
-		);
+		await native.mutate(native.responses.recordResponse.run(submissionFields(pending, question.id)));
 		if (form.isConnected) {
 			status.dataset.outcome = "saved";
 			status.textContent = `Saved: responses/${pending.id}.md. This records feedback, not acceptance.`;

package/src/metadata/backlinks.ts

@@ -12,6 +12,9 @@ function references(document: MetadataDocument, model: MetadataModel) {
 	return [
 		...(fields.question ? [{ kind: "reviewed question", line: lines.question, target: referenceFile(fields.question.item, model) }] : []),
 		...(fields.response ? [{ kind: "recorded response", line: lines.response, target: referenceFile(fields.response.question, model) }] : []),
+		...(fields.response?.supersedes
+			? [{ kind: "superseding response", line: lines.response, target: referenceFile(fields.response.supersedes, model) }]
+			: []),
 		...(fields.attention?.flatMap((request, index) =>
 			request.unblocks.map((target, targetIndex) => ({
 				kind: "attention target",

package/src/metadata/problems.ts

@@ -29,6 +29,7 @@ function referenceProblems(document: MetadataDocument, ids: ReadonlyMap<string,
 	const references = [
 		...(fields.question ? [{ field: "question", key: "question.item", target: fields.question.item }] : []),
 		...(fields.response ? [{ field: "response", key: "response.question", target: fields.response.question }] : []),
+		...(fields.response?.supersedes ? [{ field: "response", key: "response.supersedes", target: fields.response.supersedes }] : []),
 		...(fields.attention?.flatMap((request, index) =>
 			request.unblocks.map((target, targetIndex) => ({ field: "attention", key: `attention.${index}.unblocks.${targetIndex}`, target })),
 		) ?? []),

package/src/page/metadataDetails.ts

@@ -22,7 +22,7 @@ export function metadataDetails(parsed: ParsedMetadata, file: string, model: Met
 			? `<h3>Reviewed question</h3><p>${referenceHtml(fields.question.item, fields.question.item, model)} / ${escapeHtml(fields.question.request)} · ${escapeHtml(fields.question.reason)}</p><p>Reviewed SHA-256: <code>${fields.question.reviewedRevision}</code>. Registered: ${new Date(fields.question.registeredAt).toISOString()}. Unanswered deadline: ${new Date(fields.question.deadline).toISOString()}.</p>`
 			: "",
 		fields.response
-			? `<h3>Recorded response</h3><p>${referenceHtml(fields.response.question, fields.response.question, model)} · ${escapeHtml(fields.response.author)} · ${escapeHtml(fields.response.type)}</p><p>Reviewed SHA-256: <code>${fields.response.reviewedRevision}</code>. This is authored feedback, not verified acceptance.</p>`
+			? `<h3>Recorded response</h3><p>${referenceHtml(fields.response.question, fields.response.question, model)} · ${escapeHtml(fields.response.author)} · ${escapeHtml(fields.response.type)}</p><p>Reviewed SHA-256: <code>${fields.response.reviewedRevision}</code>. This is authored feedback, not verified acceptance.</p>${fields.response.supersedes ? `<p>Explicitly supersedes ${referenceHtml(fields.response.supersedes, fields.response.supersedes, model)}.</p>` : ""}`
 			: "",
 		criteriaEvidence(parsed, model),
 		attentionDetails(parsed, file, model),

package/src/page/style.ts

@@ -97,4 +97,5 @@ export const style =
 	+ attentionStyle()
 	+ visualStyles
 	+ documents
+	+ ".response-panel fieldset, .questionnaire-reading { min-width: 0; border: 1px solid var(--border); border-radius: 12px; padding: 1rem; margin: 1rem 0; } .response-panel legend { font-weight: 650; } .response-panel .question-option { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .75rem; padding: 1rem; margin: .5rem 0; border: 1px solid var(--border); border-radius: 8px; } .response-panel .question-option:has(input:checked) { border-color: var(--link); background: var(--surface); } .response-panel .question-option input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; accent-color: var(--link); } .response-panel .question-option label { font-weight: 650; cursor: pointer; } .response-panel .question-option p { margin-top: .5rem; } .response-panel #response-history article { border-top: 1px solid var(--border); margin-top: 1.5rem; padding-top: 1rem; } .response-context, .question-option, .response-panel fieldset { overflow-wrap: anywhere; }"
 	+ ".response-panel { max-width: 850px; margin: auto; padding: 1.5rem; } .response-panel form { display: grid; gap: 1rem; } .response-panel label { display: grid; gap: .5rem; } .response-panel input, .response-panel textarea, .response-panel select { width: 100%; box-sizing: border-box; font: inherit; background: var(--surface); color: inherit; padding: .75rem; border: 1px solid var(--border); } .response-panel pre, .response-panel code { white-space: pre-wrap; overflow-wrap: anywhere; }";

package/src/render/markdown.ts

@@ -14,16 +14,18 @@ import { documentLinks } from "./documentLinks.ts";
 import { RenderFailed } from "./failed.ts";
 import { footnoteIds } from "./footnotes.ts";
 import { Highlighter } from "./highlighter.ts";
+import { questionnaireDocuments } from "./questionnaireDocuments.ts";
 
 export interface RenderOptions {
 	readonly file?: string;
 	readonly headings?: ReturnType<typeof documentHeadings>;
 	readonly idPrefix?: string;
+	readonly safe?: boolean;
 }
 
 export const renderMarkdown = Effect.fn("WorkBoard.renderMarkdown")(function* (source: string, options: RenderOptions = {}) {
 	const highlighter = yield* Highlighter;
-	const plugins: PluggableList = [rehypeRaw, codeBlocks(highlighter)];
+	const plugins: PluggableList = [...(options.safe ? [] : [rehypeRaw]), codeBlocks(highlighter)];
 	if (options.idPrefix !== undefined) {
 		plugins.push(footnoteIds(options.idPrefix));
 	}
@@ -41,7 +43,8 @@ export const renderMarkdown = Effect.fn("WorkBoard.renderMarkdown")(function* (s
 					children: source,
 					components: { img: ({ node: _node, ...props }) => createElement("img", { ...props, loading: "lazy" }) },
 					rehypePlugins: plugins,
-					remarkPlugins: [remarkGfm, remarkDirective, visualDocuments, callouts],
+					remarkPlugins: [remarkGfm, remarkDirective, questionnaireDocuments, visualDocuments, callouts],
+					skipHtml: options.safe,
 				}),
 			),
 	});

package/src/render/questionnaireDocuments.ts

@@ -0,0 +1,12 @@
+import type { Root } from "mdast";
+import { visit } from "unist-util-visit";
+
+export function questionnaireDocuments() {
+	return (tree: Root) => {
+		visit(tree, "containerDirective", (node) => {
+			if (node.name === "question" || node.name === "option") {
+				node.data = { hName: "section", hProperties: { className: ["questionnaire-reading", `questionnaire-${node.name}`] } };
+			}
+		});
+	};
+}

package/src/render/visualDocuments.ts

@@ -43,6 +43,9 @@ export function visualDocuments() {
 			if (!isDirective(directive) || index === undefined || parent === undefined) {
 				return;
 			}
+			if (directive.type === "containerDirective" && ["question", "option"].includes(directive.name)) {
+				return;
+			}
 			const failure = failureOf(directive, source);
 			if (failure === undefined) {
 				return;

package/src/responses/composerHtml.ts

@@ -0,0 +1,28 @@
+import { Effect } from "effect";
+import type { QuestionPreview, RecordedResponse } from "#browser/responses/schema.ts";
+import { fileUrl } from "#files/url.ts";
+import { escapeHtml } from "#page/escape.ts";
+import { renderMarkdown } from "#render/markdown.ts";
+import { templateHtml } from "./templateHtml.ts";
+
+export const composerHtml = Effect.fn("WorkBoard.composerHtml")(function* (
+	q: QuestionPreview,
+	records: readonly RecordedResponse[],
+	enabled: boolean,
+) {
+	const template = yield* templateHtml(q.context, q.request, q.source);
+	const history = yield* Effect.forEach(records, (record) =>
+		Effect.map(
+			renderMarkdown(record.body, { file: `responses/${record.id}.md`, safe: true }),
+			(html) =>
+				`<article id="${escapeHtml(record.id)}"><h3><a href="/responses/${record.id}.md">${escapeHtml(record.response.author)} · ${record.response.type}</a></h3><p>${record.response.question === q.id ? "This reviewed revision" : "Earlier reviewed context — does not approve the current source"} · <code>${record.response.reviewedRevision}</code></p>${record.response.supersedes ? `<p>Explicitly supersedes <a href="/responses/${escapeHtml(record.response.supersedes)}.md">${escapeHtml(record.response.supersedes)}</a>.</p>` : ""}${html}</article>`,
+		),
+	);
+	const prior = records
+		.map(
+			(record) =>
+				`<option value="${escapeHtml(record.id)}">${escapeHtml(record.id)} · ${escapeHtml(record.response.author)} · ${record.response.reviewedRevision.slice(0, 12)}</option>`,
+		)
+		.join("");
+	return `<section class="response-panel"><h1>Respond to ${escapeHtml(q.item)} / ${escapeHtml(q.request)}</h1><p>${escapeHtml(q.reason)}</p><p><a href="${fileUrl(q.source)}">Source: ${escapeHtml(q.source)}</a> · Reviewed SHA-256: <code>${q.reviewedRevision}</code></p><p>Saved replies are authored feedback. They do not close the request or establish acceptance.</p><section class="response-context">${template.background}</section><details><summary>Exact source being reviewed</summary><pre>${escapeHtml(q.context)}</pre></details><form id="response-form" data-question="${q.id}" data-writable="${enabled}" data-item="${escapeHtml(q.item)}" data-request="${escapeHtml(q.request)}" data-revision="${q.reviewedRevision}"><label>Local author label <input name="author" maxlength="200" required></label><label>Response kind <select name="type"><option value="answer">Answer (including no)</option><option value="clarify">Ask back / clarify</option><option value="not_now">Not now</option></select></label>${template.controls}<label>${template.hasPrompts ? "Overall response / next action (optional)" : "Your response"}<textarea name="body" rows="8" maxlength="32768" ${template.hasPrompts ? "" : "required"}></textarea></label><label>Supersedes an earlier response (optional)<select name="supersedes"><option value="">Adds feedback; does not supersede</option>${prior}</select></label><pre id="response-draft-recovery" hidden></pre><p>Submit the whole packet together. Drafts stay in this browser for 30 days after the last edit, with a 2 MiB workspace limit. Saved responses are Markdown files in responses/.</p><button id="response-preview" type="button" disabled>Preview Markdown</button><pre id="response-preview-content" hidden></pre><button id="response-submit" type="submit" disabled>Record response</button><button id="response-clear" type="button" disabled>Clear workspace drafts</button><p id="response-status" role="status">${enabled ? "JavaScript is required to record a response." : "Read-only mode. Restart with --responses to explicitly enable local writes."}</p></form><section id="response-history"><h2>Recorded responses</h2>${history.join("") || "<p>No response is recorded for this source revision.</p>"}</section></section>`;
+});

package/src/responses/history.ts

@@ -0,0 +1,18 @@
+import type { QuestionPreview } from "#browser/responses/schema.ts";
+import type { Snapshot } from "#search/snapshot.ts";
+import { malformedResponse, questionFrom, responsesFor } from "./records.ts";
+
+export function responseHistory(data: Snapshot, preview: QuestionPreview) {
+	if (data.unavailable.length > 0 || data.documents.some(malformedResponse)) {
+		throw new Error("Response history is incomplete or malformed.");
+	}
+	const questions = data.documents.flatMap((document) => {
+		const question = questionFrom(document);
+		return question && question.question.item === preview.item && question.question.request === preview.request ? [question] : [];
+	});
+	const responses = questions.flatMap((question) => responsesFor(data.documents, question).responses);
+	if ([...questions, ...responses].some((record) => data.model.ids.get(record.id)?.length !== 1)) {
+		throw new Error("Response history includes ambiguous identities.");
+	}
+	return responses.sort((a, b) => b.response.recordedAt - a.response.recordedAt);
+}

package/src/responses/locate.ts

@@ -6,6 +6,7 @@ import { metadataModel } from "#metadata/model.ts";
 import { metadataParse } from "#metadata/parse.ts";
 import type { Snapshot } from "#search/snapshot.ts";
 import { questionId, revisionOf } from "./records.ts";
+import { questionTemplate } from "./template.ts";
 
 function reject(code: ResponseFailed["code"], message: string) {
 	return Effect.fail(new ResponseFailed({ code, message }));
@@ -41,6 +42,10 @@ export function locate(root: string, realRoot: string, snapshot: Effect.Effect<S
 			return yield* reject("Stale", "The current request or its references are invalid. Review the source diagnostics before registering it.");
 		}
 		const revision = revisionOf(source);
+		yield* Effect.try({
+			catch: (cause) => new ResponseFailed({ code: "Unsupported", message: `Invalid response template: ${String(cause)}` }),
+			try: () => questionTemplate(source, request),
+		});
 		const question: QuestionPreview = {
 			context: source,
 			id: questionId(item, request, revision, entry.document.file),

package/src/responses/make.ts

@@ -0,0 +1,17 @@
+import type { DraftInput, Question, RecordedResponse } from "#browser/responses/schema.ts";
+
+export function makeResponse(input: DraftInput, question: Question, recordedAt: number): RecordedResponse {
+	return {
+		body: input.body,
+		id: input.id,
+		response: {
+			...(input.answers === undefined ? {} : { answers: input.answers }),
+			...(input.supersedes === undefined ? {} : { supersedes: input.supersedes }),
+			author: input.author,
+			question: input.question,
+			recordedAt,
+			reviewedRevision: question.question.reviewedRevision,
+			type: input.type,
+		},
+	};
+}

package/src/responses/page.ts

@@ -1,11 +1,11 @@
 import { Effect } from "effect";
 import type { HttpServerRequest } from "effect/unstable/http";
 import type { Changes } from "#files/changes.ts";
-import { fileUrl } from "#files/url.ts";
 import { respond } from "#http/respond.ts";
 import { escapeHtml } from "#page/escape.ts";
 import { navHtml } from "#page/nav.ts";
 import { shell } from "#page/shell.ts";
+import { composerHtml } from "./composerHtml.ts";
 import type { responseService } from "./service.ts";
 
 export function responsePage(
@@ -16,26 +16,15 @@ export function responsePage(
 ) {
 	return Effect.fn("WorkBoard.responsePage")(function* (request: HttpServerRequest.HttpServerRequest) {
 		const params = new URL(request.url, "http://127.0.0.1").searchParams;
-		const item = params.get("item") ?? "";
-		const requestId = params.get("request") ?? "";
 		const files = yield* changes.files;
 		function layout(body: string, status = 200) {
 			return respond(shell("Respond", navHtml(files, "", home), body, changes.realRoot, false, undefined, "response"), "text/html", status);
 		}
-		return yield* service.locate(item, requestId).pipe(
-			Effect.flatMap((question) =>
-				Effect.map(
-					service
-						.read(question.id)
-						.pipe(Effect.catch((error) => (error.code === "Missing" ? Effect.succeed({ responses: [] }) : Effect.fail(error)))),
-					(recorded) => {
-						const q = question;
-						const body = `<section class="response-panel"><h1>Respond to ${escapeHtml(item)} / ${escapeHtml(requestId)}</h1><p>${escapeHtml(q.reason)}</p><p><a href="${fileUrl(q.source)}">Source: ${escapeHtml(q.source)}</a> · Reviewed SHA-256: <code>${q.reviewedRevision}</code></p><p>Saved replies are authored feedback. They do not close the request or establish acceptance.</p><details><summary>Exact source being reviewed</summary><pre>${escapeHtml(question.context)}</pre></details><form id="response-form" data-question="${question.id}" data-writable="${enabled}" data-item="${escapeHtml(item)}" data-request="${escapeHtml(requestId)}" data-revision="${q.reviewedRevision}"><label>Local author label <input name="author" maxlength="200" required></label><label>Response kind <select name="type"><option value="answer">Answer (including no)</option><option value="clarify">Ask back / clarify</option><option value="not_now">Not now</option></select></label><label>Your response <textarea name="body" rows="8" maxlength="32768" required></textarea></label><p>Drafts stay in this browser for 30 days after the last edit, with a 2 MiB workspace limit. Saved responses are Markdown files in responses/.</p><button id="response-preview" type="button" disabled>Preview Markdown</button><pre id="response-preview-content" hidden></pre><button id="response-submit" type="submit" disabled>Record response</button><button id="response-clear" type="button" disabled>Clear workspace drafts</button><p id="response-status" role="status">${enabled ? "JavaScript is required to record a response." : "Read-only mode. Restart with --responses to explicitly enable local writes."}</p></form><section id="response-history"><h2>Recorded responses</h2>${recorded.responses.map((record) => `<article><p><a href="/responses/${record.id}.md">${escapeHtml(record.response.author)} · ${escapeHtml(record.response.type)}</a></p><pre>${escapeHtml(record.body)}</pre></article>`).join("") || "<p>No response is recorded for this source revision.</p>"}</section></section>`;
-						return layout(body);
-					},
-				),
-			),
-			Effect.catch((error) => Effect.succeed(layout(`<h1>Response unavailable</h1><p>${escapeHtml(error.message)}</p>`, 409))),
-		);
+		return yield* Effect.gen(function* () {
+			const question = yield* service.locate(params.get("item") ?? "", params.get("request") ?? "");
+			yield* service.read(question.id).pipe(Effect.catch((error) => (error.code === "Missing" ? Effect.void : Effect.fail(error))));
+			const records = yield* service.history(question);
+			return layout(yield* composerHtml(question, records, enabled));
+		}).pipe(Effect.catch((error) => Effect.succeed(layout(`<h1>Response unavailable</h1><p>${escapeHtml(String(error))}</p>`, 409))));
 	});
 }

package/src/responses/records.ts

@@ -41,6 +41,8 @@ export function responsesFor(documents: readonly MetadataDocument[], question: Q
 export function matchesResponse(record: RecordedResponse, input: DraftInput) {
 	return (
 		record.body === input.body
+		&& JSON.stringify(record.response.answers) === JSON.stringify(input.answers)
+		&& record.response.supersedes === input.supersedes
 		&& record.response.author === input.author
 		&& record.response.type === input.type
 		&& record.response.question === input.question

package/src/responses/service.ts

@@ -1,13 +1,17 @@
 import { Clock, Effect, FileSystem, Semaphore } from "effect";
-import { type DraftInput, type Question, type RecordedResponse, ResponseFailed } from "#browser/responses/schema.ts";
+import { type DraftInput, type Question, ResponseFailed } from "#browser/responses/schema.ts";
 import type { Changes } from "#files/changes.ts";
 import type { Snapshot } from "#search/snapshot.ts";
 import { awaitResponse } from "./await.ts";
+import { responseHistory } from "./history.ts";
 import { locate as locateQuestion } from "./locate.ts";
+import { makeResponse } from "./make.ts";
 import { publish } from "./publish.ts";
 import { readResponses } from "./read.ts";
 import { questionMarkdown, responseMarkdown } from "./records.ts";
 import { retryResponse } from "./retry.ts";
+import { validatedInput } from "./validatedInput.ts";
+import { validateSupersedes } from "./validateSupersedes.ts";
 
 export interface ResponseOptions {
 	readonly changes: Changes;
@@ -65,11 +69,15 @@ export const responseService = Effect.fn("WorkBoard.responseService")(function*
 			}),
 		);
 	}
-	function record(input: DraftInput) {
+	function record(draft: DraftInput) {
 		return lock.withPermit(
 			Effect.gen(function* () {
 				yield* enabled;
-				const result = yield* read(input.question);
+				const result = yield* read(draft.question);
+				const input = yield* Effect.try({
+					catch: (cause) => new ResponseFailed({ code: "Conflict", message: String(cause) }),
+					try: () => validatedInput(draft, result.question.context, result.question.question.request, result.question.question.source),
+				});
 				const existing = result.responses.find((candidate) => candidate.id === input.id);
 				if (existing) {
 					yield* retryResponse(existing, input, snapshot, options);
@@ -81,20 +89,15 @@ export const responseService = Effect.fn("WorkBoard.responseService")(function*
 					return yield* reject("Stale", "Source changed or moved. Keep the draft and review the new revision before responding.");
 				}
 				const data = yield* snapshot;
+				yield* validateSupersedes(input, question, data);
 				if (data.model.ids.has(input.id)) {
 					return yield* reject("Conflict", "This response identity is already used.");
 				}
-				const response: RecordedResponse = {
-					body: input.body,
-					id: input.id,
-					response: {
-						author: input.author,
-						question: input.question,
-						recordedAt: result.responses.reduce((time, saved) => Math.max(time, saved.response.recordedAt + 1), yield* Clock.currentTimeMillis),
-						reviewedRevision: question.question.reviewedRevision,
-						type: input.type,
-					},
-				};
+				const response = makeResponse(
+					input,
+					question,
+					result.responses.reduce((time, saved) => Math.max(time, saved.response.recordedAt + 1), yield* Clock.currentTimeMillis),
+				);
 				yield* publish(options.root, options.changes.realRoot, response.id, responseMarkdown(response)).pipe(
 					Effect.ensuring(options.changes.refresh ?? Effect.void),
 				);
@@ -102,5 +105,13 @@ export const responseService = Effect.fn("WorkBoard.responseService")(function*
 			}),
 		);
 	}
-	return { awaitResponse: awaitResponse(read), locate, read, record, register };
+	function history(preview: Parameters<typeof responseHistory>[1]) {
+		return Effect.flatMap(snapshot, (data) =>
+			Effect.try({
+				catch: (cause) => new ResponseFailed({ code: "Unavailable", message: String(cause) }),
+				try: () => responseHistory(data, preview),
+			}),
+		);
+	}
+	return { awaitResponse: awaitResponse(read), history, locate, read, record, register };
 });