@shivaedev/work-board 0.12.0 → 0.14.0

package/src/client/document/boardLayout.ts

@@ -0,0 +1,86 @@
+import type { Element, ElementContent, Root } from "hast";
+
+function element(tagName: string, children: ElementContent[] = [], className?: string): Element {
+	return { children, properties: className ? { className: [className] } : {}, tagName, type: "element" };
+}
+interface Draft {
+	readonly board: Element;
+	closing: boolean;
+	readonly footer: Element;
+	readonly header: Element;
+	item: Element | undefined;
+	section: Element | undefined;
+}
+function place(draft: Draft, node: ElementContent, afterHeading: boolean) {
+	if (node.type === "element" && node.tagName === "hr" && afterHeading && draft.section) {
+		draft.closing = true;
+		return;
+	}
+	if (draft.closing) {
+		draft.footer.children.push(node);
+		return;
+	}
+	if (node.type === "element" && node.tagName === "h2") {
+		draft.section = element("section", [node]);
+		draft.board.children.push(draft.section);
+		draft.item = undefined;
+		return;
+	}
+	if (!draft.section) {
+		draft.header.children.push(node);
+		return;
+	}
+	if (node.type === "element" && node.tagName === "h3") {
+		draft.item = element("article", [node], "item");
+		draft.section.children.push(draft.item);
+		return;
+	}
+	if (!draft.item) {
+		draft.item = element("div", [], "notes");
+		draft.section.children.push(draft.item);
+	}
+	draft.item.children.push(node);
+}
+function summary(counts: readonly { readonly count: number; readonly title: string }[]) {
+	const result = element("p", [], "counts");
+	for (const [index, count] of counts.entries()) {
+		if (index > 0) {
+			result.children.push({ type: "text", value: " · " });
+		}
+		result.children.push(
+			element("span", [element("b", [{ type: "text", value: String(count.count) }]), { type: "text", value: ` ${count.title.toLowerCase()}` }]),
+		);
+	}
+	return result;
+}
+export function boardLayout(
+	counts: readonly { readonly count: number; readonly title: string }[],
+	modified: number,
+	file: string,
+	source: string,
+	layout = false,
+) {
+	return (tree: Root) => {
+		const nodes = tree.children.filter((node): node is ElementContent => node.type !== "doctype" && !(node.type === "text" && !node.value.trim()));
+		const lastHeading = nodes.findLastIndex((node) => node.type === "element" && /^h[1-6]$/u.test(node.tagName));
+		const draft: Draft = {
+			board: element("div", [], layout ? "board lg:col-start-1 lg:row-start-2" : "board"),
+			closing: false,
+			footer: element("footer"),
+			header: element("header", [], layout ? "item-introduction board-head" : "board-head"),
+			item: undefined,
+			section: undefined,
+		};
+		for (const [index, node] of nodes.entries()) {
+			place(draft, node, index > lastHeading);
+		}
+		if (!draft.header.children.some((node) => node.type === "element" && node.tagName === "h1")) {
+			draft.header.children.unshift(element("h1", [{ type: "text", value: file }]));
+		}
+		const age = element("span", [{ type: "text", value: `updated ${new Date(modified).toISOString()}` }], "age");
+		age.properties.dataModified = modified;
+		draft.board.properties.dataSource = source;
+		draft.header.children.push(summary(counts), element("p", [age], "meta"));
+		tree.children = [draft.header, draft.board, ...(draft.footer.children.length > 0 ? [draft.footer] : [])];
+	};
+}

package/src/client/document/layout.ts

@@ -20,7 +20,7 @@ export function documentLayout(source: string) {
 			{ children: title ? [title] : [], properties: { className: ["item-introduction"] }, tagName: "header", type: "element" },
 			{
 				children: tree.children.filter((node) => node.type !== "doctype"),
-				properties: { className: ["doc"], dataSource: source },
+				properties: { className: ["doc", "reading-column", "lg:col-start-1", "row-start-2"], dataSource: source },
 				tagName: "article",
 				type: "element",
 			},

package/src/client/document/mermaidColor.ts

@@ -0,0 +1,19 @@
+export function mermaidColor(name: string): string {
+	const style = getComputedStyle(document.documentElement);
+	const color = style.getPropertyValue(name).trim();
+	const canvas = document.createElement("canvas");
+	canvas.width = 1;
+	canvas.height = 1;
+	const context = canvas.getContext("2d");
+	if (!context) {
+		return color;
+	}
+	context.fillStyle = style.getPropertyValue("--bg").trim();
+	context.fillRect(0, 0, 1, 1);
+	context.fillStyle = color;
+	context.fillRect(0, 0, 1, 1);
+	return `#${Array.from(context.getImageData(0, 0, 1, 1).data)
+		.slice(0, 3)
+		.map((channel) => channel.toString(16).padStart(2, "0"))
+		.join("")}`;
+}

package/src/client/entry.ts

@@ -1,27 +1,3 @@
-import { navigationHtml as renderNavigation } from "#browser/navigation/html.ts";
-import { setupHandoffs } from "#client/handoffs/setup.ts";
-import { resolvedDocumentFailure as documentFailure } from "#client/page/resolvedDocumentFailure.ts";
-import { attachResponses as attachResponseForm } from "#client/responses/attach.ts";
-import { setupResponses } from "#client/responses/setup.ts";
-
-export const navigationHtml = renderNavigation;
-
-if (typeof window !== "undefined" && typeof document !== "undefined") {
-	setupResponses();
-	setupHandoffs();
-}
-
 import { session as ownedSession } from "./session.ts";
 
 export const session = ownedSession;
-
-import { remember as retain } from "#client/reconcile/signature.ts";
-import { swap as reconcile } from "#client/reconcile/swap.ts";
-export const remember = retain;
-export const swap = reconcile;
-
-import { legacyRuntime as loadLegacy } from "./legacyRuntime.ts";
-export const legacyRuntime = loadLegacy;
-
-export const attachResponses = attachResponseForm;
-export const resolvedDocumentFailure = documentFailure;

package/src/client/formDraft.ts

@@ -0,0 +1,9 @@
+import type { PersistedDraftConfig } from "@shivaedev/effect-form/persistence.ts";
+
+export function formDraft(kind: "response" | "handoff", item: string, request = ""): PersistedDraftConfig {
+	const workspace = typeof document === "undefined" ? "" : (document.documentElement.dataset.workspace ?? "");
+	return {
+		key: `work-board:form:${JSON.stringify([workspace, kind, item, request])}`,
+		storage: () => window.localStorage,
+	};
+}

package/src/client/formFocus.ts

@@ -5,8 +5,7 @@ export interface FormFocus {
 	readonly prompt: string | undefined;
 	readonly start: number | null;
 }
-export function captureFocus(host: HTMLElement): FormFocus | undefined {
-	const control = document.activeElement;
+export function captureFocus(host: HTMLElement, control: Element | null = document.activeElement): FormFocus | undefined {
 	if (!((control instanceof HTMLTextAreaElement || (control instanceof HTMLInputElement && control.type === "text")) && host.contains(control))) {
 		return;
 	}
@@ -25,6 +24,11 @@ export function restoreFocus(main: HTMLElement, selection: FormFocus | undefined
 	const focused = [...main.querySelectorAll<HTMLInputElement | HTMLTextAreaElement>("input, textarea")].find(
 		(field) => field.name === selection.name && field.closest<HTMLElement>("[data-prompt]")?.dataset.prompt === selection.prompt,
 	);
+	for (let parent = focused?.parentElement; parent; parent = parent.parentElement) {
+		if (parent instanceof HTMLDetailsElement) {
+			parent.open = true;
+		}
+	}
 	focused?.focus({ preventScroll: true });
 	if (selection.start !== null && selection.end !== null) {
 		focused?.setSelectionRange(selection.start, selection.end, selection.direction ?? undefined);

package/src/client/handoffs/failureStatus.ts

@@ -0,0 +1,6 @@
+import { Schema } from "effect";
+import { InternalServerError } from "@shivaedev/platform/errors/taxonomy.ts";
+import { PublicationUncertain, ResponseRejection } from "#rpc/rejections.ts";
+export function failureStatus(error: unknown) {
+	return `${Schema.is(ResponseRejection)(error) && !(error instanceof PublicationUncertain) && !(error instanceof InternalServerError) ? "Rejected" : "Uncertain"}: ${String(error)}. Draft retained; preview and retry.`;
+}

package/src/client/page/routeQuery.ts

@@ -2,7 +2,6 @@ import type { BrowserClient } from "#client/client.ts";
 
 interface PageApi {
 	readonly document: Pick<BrowserClient["api"]["document"], "query">;
-	readonly page: Pick<BrowserClient["api"]["page"], "query">;
 }
 
 export const routeQueryOptions = { timeToLive: 60_000 };
@@ -11,6 +10,6 @@ export function documentQuery(api: PageApi, url: string) {
 	return api.document.query({ url }, routeQueryOptions);
 }
 
-export function pageQuery(api: PageApi, url: string) {
-	return api.page.query({ url }, routeQueryOptions);
+export function navigationQuery(api: { readonly navigation: Pick<BrowserClient["api"]["navigation"], "query"> }) {
+	return api.navigation.query({ current: "" }, routeQueryOptions);
 }

package/src/client/react/Age.tsx

@@ -0,0 +1,42 @@
+import { Clock, Effect } from "effect";
+import { createContext, type ReactNode, useContext, useEffect, useState } from "react";
+
+const TimeContext = createContext(Effect.runSync(Clock.currentTimeMillis));
+function now() {
+	return Effect.runSync(Clock.currentTimeMillis);
+}
+export function AgeTicker({ children }: { readonly children: ReactNode }) {
+	const [time, setTime] = useState(now);
+	useEffect(() => {
+		const timer = setInterval(() => setTime(now()), 5000);
+		return () => clearInterval(timer);
+	}, []);
+	return <TimeContext.Provider value={time}>{children}</TimeContext.Provider>;
+}
+function since(seconds: number) {
+	if (seconds < 60) {
+		return `${seconds}s`;
+	}
+	if (seconds < 3600) {
+		return `${Math.round(seconds / 60)}m`;
+	}
+	if (seconds < 172_800) {
+		return `${Math.round(seconds / 3600)}h`;
+	}
+	return `${Math.round(seconds / 86_400)}d`;
+}
+export function Age({ modified, short = false }: { readonly modified: number; readonly short?: boolean }) {
+	const ago = since(Math.max(0, Math.round((useContext(TimeContext) - modified) / 1000)));
+	return (
+		<span
+			className={
+				short
+					? "shrink-0 whitespace-nowrap font-mono text-muted-foreground text-xs"
+					: "ml-1.5 whitespace-nowrap font-mono text-muted-foreground text-xs"
+			}
+			data-modified={modified}
+		>
+			{short ? ago : `updated ${ago} ago`}
+		</span>
+	);
+}

package/src/client/react/AnswerContext.tsx

@@ -0,0 +1,29 @@
+import { cardContext } from "#browser/responses/cardContext.ts";
+import type { QuestionPreview } from "#browser/responses/schema.ts";
+import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
+
+export function AnswerContext({ preview }: { readonly preview: QuestionPreview }) {
+	const context = cardContext(preview.context);
+	return (
+		<>
+			{Boolean(context.recommendation) && (
+				<div className="answer-recommendation">
+					<ResponseMarkdown file={preview.source} source={context.recommendation} />
+				</div>
+			)}
+			{context.links.length > 0 && (
+				<div className="answer-links flex flex-wrap gap-2">
+					{context.links.map((link) => (
+						<a
+							className={`answer-link ${link.primary ? "bg-primary text-primary-foreground" : "border border-border"} inline-flex items-center rounded-md px-4 py-2 font-medium`}
+							href={link.url}
+							key={link.url}
+						>
+							{link.label}
+						</a>
+					))}
+				</div>
+			)}
+		</>
+	);
+}

package/src/client/react/AnswerForm.tsx

@@ -1,98 +1,88 @@
 import type { Document, DocumentRequest } from "#browser/document/schema.ts";
 import type { QuestionPreview } from "#browser/responses/schema.ts";
-import { AnswerFocus } from "./AnswerFocus.tsx";
+import { AnswerMore } from "./AnswerMore.tsx";
 import { AnswerPrompts } from "./AnswerPrompts.tsx";
+import { FormField } from "./FormField.tsx";
 import { shellIds } from "./shellIds.ts";
-export function AnswerForm({
-	document: data,
-	request,
-	preview,
-}: {
+import { useFormFocus } from "./useFormFocus.ts";
+import { useResponseForm } from "./useResponseForm.ts";
+
+interface AnswerProps {
 	readonly document: Document;
-	readonly request: DocumentRequest;
 	readonly preview: QuestionPreview;
-}) {
+	readonly request: DocumentRequest;
+}
+export function AnswerForm(props: AnswerProps) {
+	return <AnswerSession key={JSON.stringify([props.preview.item, props.preview.request, Boolean(props.request.prompts?.length)])} {...props} />;
+}
+function AnswerSession({ document: data, request, preview }: AnswerProps) {
+	function id(value: string) {
+		return data.requests.filter((entry) => entry.open).length > 1 ? `${value}-${request.id}` : value;
+	}
 	const prompts = request.prompts ?? [];
-	const records = request.responses ?? [];
+	const state = useResponseForm(preview, prompts);
+	const focus = useFormFocus(state.draft.key);
+	const form = state.form;
 	const body = (
-		<label>
-			{prompts.length > 0 ? "Overall response / next action (optional)" : "Your response"}
-			<textarea maxLength={32_768} name="body" required={prompts.length === 0} rows={4} />
-		</label>
+		<FormField
+			form={form}
+			label={prompts.length > 0 ? "Overall response / next action (optional)" : "Your response"}
+			maxLength={32_768}
+			name="body"
+			required={prompts.length === 0}
+			rows={4}
+			showErrors={state.attempted}
+		/>
 	);
+	const writableStatus = typeof window === "undefined" ? "JavaScript is required to record a response." : state.status;
 	return (
-		<AnswerFocus context={preview.id}>
-			<form
-				data-item={preview.item}
-				data-question={preview.id}
-				data-request={preview.request}
-				data-revision={preview.reviewedRevision}
-				data-writable={data.writable}
-				id={shellIds.responseForm}
-				noValidate
-			>
-				<label>
-					Local author label <input autoComplete="nickname" maxLength={200} name="author" required />
-				</label>
-				<AnswerPrompts document={data} prompts={prompts} />
-				{prompts.length === 0 && body}
-				<AnswerDetails body={prompts.length > 0 ? body : null} records={records} />
-				<pre hidden id={shellIds.responseDraftRecovery} />
-				<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 disabled id={shellIds.responsePreview} type="button">
-					Preview Markdown
-				</button>
-				<pre hidden id={shellIds.responsePreviewContent} />
-				<button disabled id={shellIds.responseSubmit} type="submit">
-					Record response
-				</button>
-				<button disabled id={shellIds.responseClear} type="button">
-					Clear workspace drafts
-				</button>
-				<p id={shellIds.responseStatus} role="status">
-					{data.writable
-						? "JavaScript is required to record a response."
-						: "Read-only mode. Restart with --responses to explicitly enable local writes."}
-				</p>
-			</form>
-		</AnswerFocus>
-	);
-}
-
-function AnswerDetails({
-	body,
-	records,
-}: {
-	readonly body: import("react").ReactNode;
-	readonly records: readonly import("#browser/responses/schema.ts").RecordedResponse[];
-}) {
-	const options = records.map((record) => (
-		<option key={record.id} value={record.id}>
-			{record.id} · {record.response.author} · {record.response.reviewedRevision.slice(0, 12)}
-		</option>
-	));
-	return (
-		<details data-key="response-details">
-			<summary>Response details</summary>
-			<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>
-			{body}
-			<label>
-				Supersedes an earlier response (optional)
-				<select name="supersedes">
-					<option value="">Adds feedback; does not supersede</option>
-					{options}
-				</select>
-			</label>
-		</details>
+		<form
+			{...focus}
+			data-item={preview.item}
+			data-question={preview.id}
+			data-request={preview.request}
+			data-response-form
+			data-revision={preview.reviewedRevision}
+			data-writable={data.writable}
+			id={id(shellIds.responseForm)}
+			noValidate
+			onChange={state.edit}
+			onInput={state.edit}
+			onSubmit={(event) => {
+				event.preventDefault();
+				const valid = state.attempt();
+				if (!valid) {
+					const target = event.currentTarget;
+					requestAnimationFrame(() => {
+						const invalid = target.querySelector<HTMLElement>('[aria-invalid="true"]');
+						const more = invalid?.closest("details");
+						if (more) {
+							more.open = true;
+						}
+						invalid?.focus();
+					});
+				}
+				if (data.writable && valid && !state.created.saving) {
+					state.created.save();
+				}
+			}}
+		>
+			<AnswerPrompts
+				answers={state.answers ?? []}
+				document={data}
+				form={form}
+				onEdit={state.editAnswers}
+				prompts={prompts}
+				showErrors={state.attempted}
+			/>
+			{prompts.length === 0 && body}
+			<button disabled={!data.writable || state.created.saving} id={id(shellIds.responseSubmit)} type="submit">
+				Record
+			</button>
+			<AnswerMore body={prompts.length > 0 ? body : undefined} id={id} request={request} state={state} />
+			<p data-outcome={state.outcome} id={id(shellIds.responseStatus)} role="status">
+				{data.writable ? writableStatus : `${state.status} Read-only. Restart with --responses to enable answers.`.trim()}
+			</p>
+		</form>
 	);
 }

package/src/client/react/AnswerMore.tsx

@@ -0,0 +1,67 @@
+import type { ReactNode } from "react";
+import type { DocumentRequest } from "#browser/document/schema.ts";
+import { FormField } from "./FormField.tsx";
+import { shellIds } from "./shellIds.ts";
+import type { useResponseForm } from "./useResponseForm.ts";
+
+export function AnswerMore({
+	body,
+	id,
+	request,
+	state,
+}: {
+	readonly body?: ReactNode;
+	readonly id: (value: string) => string;
+	readonly request: DocumentRequest;
+	readonly state: ReturnType<typeof useResponseForm>;
+}) {
+	return (
+		<details data-key="response-details">
+			<summary>More</summary>
+			<FormField
+				autoComplete="nickname"
+				form={state.form}
+				label="Local author label"
+				maxLength={200}
+				name="author"
+				required
+				showErrors={state.attempted}
+			/>
+			<FormField form={state.form} label="Response kind" name="type">
+				<option value="answer">Answer (including no)</option>
+				<option value="clarify">Ask back / clarify</option>
+				<option value="not_now">Not now</option>
+			</FormField>
+			{body}
+			<FormField form={state.form} label="Supersedes an earlier response (optional)" name="supersedes">
+				<option value="">Adds feedback; does not supersede</option>
+				{request.responses?.map((record) => (
+					<option key={record.id} value={record.id}>
+						{record.id} · {record.response.author} · {record.response.reviewedRevision.slice(0, 12)}
+					</option>
+				))}
+			</FormField>
+			<pre hidden={!state.recovery} id={id(shellIds.responseDraftRecovery)}>
+				{state.recovery}
+			</pre>
+			<p>
+				Drafts stay in this browser for seven days after the last edit, with a 256 KiB limit per draft. Saved responses are Markdown files in
+				responses/.
+			</p>
+			<button
+				disabled={typeof window === "undefined" || state.created.saving}
+				id={id(shellIds.responsePreview)}
+				onClick={state.showPreview}
+				type="button"
+			>
+				Preview Markdown
+			</button>
+			<pre hidden={!state.preview} id={id(shellIds.responsePreviewContent)}>
+				{state.preview}
+			</pre>
+			<button disabled={typeof window === "undefined" || state.created.saving} id={id(shellIds.responseClear)} onClick={state.clear} type="button">
+				Clear draft
+			</button>
+		</details>
+	);
+}

package/src/client/react/AnswerPanel.tsx

@@ -1,40 +1,68 @@
-import type { Document } from "#browser/document/schema.ts";
-import { fileUrl } from "#files/url.ts";
+import type { Document, DocumentRequest } from "#browser/document/schema.ts";
+import { reasonMarkdown } from "#browser/responses/reasonMarkdown.ts";
+import { AnswerContext } from "./AnswerContext.tsx";
 import { AnswerForm } from "./AnswerForm.tsx";
 import { ResponseHistory } from "./ResponseHistory.tsx";
+import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
+
 export function AnswerPanel({ document: data }: { readonly document: Document }) {
-	const request = data.requests.find((entry) => entry.id === "answer");
-	const preview = request?.preview;
-	const unavailable = request?.unavailable ?? request?.promptUnavailable;
-	const open = !["closed", "done", "completed", "cancelled", "canceled", "resolved", "released"].includes(
-		data.metadata.status?.trim().toLowerCase() ?? "",
+	const requests = data.requests.filter(
+		(request) =>
+			request.open || (request.id === "answer" && request.sourceOpen && data.metadata.kind === "question" && data.metadata.question === undefined),
 	);
-	let title = "Answer unavailable";
-	if (!open) {
-		title = "Question closed";
-	} else if (preview && !unavailable) {
-		title = "Answer this question";
-	}
+	return requests.length > 0 ? (
+		<div className="answer-cards col-span-full space-y-4">
+			{requests.map((request) => (
+				<AnswerCard document={data} key={request.id} request={request} />
+			))}
+		</div>
+	) : null;
+}
+function AnswerCard({ document: data, request }: { readonly document: Document; readonly request: DocumentRequest }) {
+	const preview = request.preview;
+	const source = {
+		...data,
+		file: preview?.source ?? data.file,
+		metadata: { ...data.metadata, options: request.options, recommended: request.recommended },
+	};
+	const unavailable = request.unavailable ?? request.promptUnavailable;
+	const closed = request.sourceOpen === false;
 	return (
-		<section className="response-panel">
-			<h2>{title}</h2>
-			{!open && <p role="status">This question is closed. Recorded answers remain below.</p>}
+		<section
+			aria-labelledby={`answer-title-${request.id}`}
+			className="response-panel rounded-lg border border-border bg-card p-4"
+			id={`answer-card-${request.id}`}
+			tabIndex={-1}
+		>
+			<h2 id={`answer-title-${request.id}`}>{cardTitle(request, closed)}</h2>
+			{!(request.open || unavailable) && (
+				<p role="status">
+					{closed ? "This question is closed. Recorded answers remain below." : "Answer unavailable. Check the source diagnostics."}
+				</p>
+			)}
 			{Boolean(unavailable) && <p role="status">{unavailable}</p>}
-			{open && preview !== undefined && request !== undefined && !unavailable && (
+			{request.open && preview !== undefined && (
 				<>
-					<p>{preview.reason}</p>
-					<p>
-						<a href={fileUrl(preview.source)}>Source: {preview.source}</a> · Reviewed SHA-256: <code>{preview.reviewedRevision}</code>
-					</p>
-					<p>An answer removes this question from the Inbox for this source revision.</p>
-					<details>
-						<summary>Exact source being reviewed</summary>
-						<pre>{preview.context}</pre>
-					</details>
-					<AnswerForm document={data} preview={preview} request={request} />
+					<AnswerContext preview={preview} />
+					<div className="answer-reason">
+						<ResponseMarkdown file={source.file} source={reasonMarkdown(preview.reason)} />
+					</div>
 				</>
 			)}
-			{!request?.unavailable && <ResponseHistory request={request} />}
+			{request.open && preview && !unavailable && <AnswerForm document={source} preview={preview} request={request} />}
+			{!request.unavailable && (
+				<ResponseHistory
+					id={data.requests.filter((entry) => entry.open).length > 1 ? `response-history-${request.id}` : undefined}
+					request={request}
+				/>
+			)}
 		</section>
 	);
 }
+
+function cardTitle(request: DocumentRequest, closed: boolean) {
+	if (request.open) {
+		return `Answer: ${request.title ?? "this question"}`;
+	}
+	return closed ? "Question closed" : "Answer unavailable";
+}