@shivaedev/work-board 0.13.0 → 0.14.0

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";
+}

package/src/client/react/AnswerPrompts.tsx

@@ -1,5 +1,5 @@
 import { useAtomValue } from "@effect/atom-react";
-import { useLayoutEffect, useRef } from "react";
+import { useId, useLayoutEffect, useRef } from "react";
 import type { Document } from "#browser/document/schema.ts";
 import type { Prompt } from "#browser/responses/Prompt.ts";
 import type { PromptAnswer } from "#browser/responses/schema.ts";
@@ -14,13 +14,24 @@ interface PromptProps {
 	readonly form: Model;
 	readonly onEdit: (index: number, answer: PromptAnswer) => void;
 	readonly prompts: readonly Prompt[];
+	readonly showErrors: boolean;
 }
 export function AnswerPrompts(props: PromptProps) {
 	return props.prompts.map((prompt, index) => <PromptField {...props} index={index} key={prompt.id} prompt={prompt} />);
 }
-function PromptField({ document, prompt, index, answers, form, onEdit }: PromptProps & { readonly prompt: Prompt; readonly index: number }) {
+function PromptField({
+	document,
+	prompt,
+	index,
+	answers,
+	form,
+	onEdit,
+	showErrors,
+}: PromptProps & { readonly prompt: Prompt; readonly index: number }) {
+	const errorId = useId();
 	const answer = answers[index] ?? { prompt: prompt.id, selected: [], text: "" };
-	const error = useAtomValue(form.errorAt(["answers", index, "text"]));
+	const validation = useAtomValue(form.errorAt(["answers", index, "text"]));
+	const error = showErrors ? validation : undefined;
 	const ref = useRef<HTMLTextAreaElement>(null);
 	useLayoutEffect(() => ref.current?.setCustomValidity(error ?? ""), [error]);
 	const choices = document.metadata.options;
@@ -60,7 +71,6 @@ function PromptField({ document, prompt, index, answers, form, onEdit }: PromptP
 						choice={choice}
 						choose={choose}
 						document={document}
-						index={index}
 						key={option.id}
 						option={option}
 						prompt={prompt}
@@ -75,7 +85,7 @@ function PromptField({ document, prompt, index, answers, form, onEdit }: PromptP
 			<label>
 				{choices ? "Another answer / additional text" : "Additional text / another answer"}
 				<textarea
-					aria-describedby={`answer-${index}-error`}
+					aria-describedby={`${errorId}-error`}
 					aria-invalid={Boolean(error)}
 					data-answer-text
 					maxLength={8192}
@@ -84,7 +94,7 @@ function PromptField({ document, prompt, index, answers, form, onEdit }: PromptP
 					rows={choices ? 4 : 3}
 					value={answer.text}
 				/>
-				<span className="response-field-error" hidden={!error} id={`answer-${index}-error`}>
+				<span className="response-field-error" hidden={!error} id={`${errorId}-error`}>
 					{message}
 				</span>
 			</label>

package/src/client/react/BoardMain.tsx

@@ -1,4 +1,4 @@
-import type { Navigation } from "#browser/navigation/schema.ts";
+import type { Navigation } from "#browser/Navigation.ts";
 import { DocumentMain } from "./DocumentMain.tsx";
 import { documentRoute } from "./documentRoute.ts";
 import type { MainLocation } from "./mainLocation.ts";

package/src/client/react/BoardShell.tsx

@@ -4,12 +4,13 @@ import type * as AtomRegistry from "effect/reactivity/AtomRegistry";
 import { useCallback, useEffect, useState } from "react";
 import { useQuery } from "@shivaedev/effect-react/result-state.ts";
 import type { BrowserClient } from "#client/client.ts";
+import { navigationQuery } from "#client/page/routeQuery.ts";
 import { AgeTicker } from "./Age.tsx";
-import { BoardMain } from "./BoardMain.tsx";
+import { FleetMain } from "./FleetMain.tsx";
 import { Header } from "./Header.tsx";
-import { HistoryRetention } from "./HistoryRetention.tsx";
 import { LiveControls } from "./LiveControls.tsx";
-import { bootstrapPage, type MainLocation } from "./mainLocation.ts";
+import { displayedLocation, type MainLocation, sameMainLocation } from "./mainLocation.ts";
+import { PhoneNavigation } from "./PhoneNavigation.tsx";
 import { ReadingLibrary } from "./ReadingLibrary.tsx";
 import { SearchDialog } from "./SearchDialog.tsx";
 import type { ShellApi } from "./ShellApi.ts";
@@ -24,33 +25,22 @@ import { VisualInspection } from "./VisualInspection.tsx";
 export interface ShellOptions {
 	readonly api: ShellApi;
 	readonly client?: BrowserClient;
-	readonly initial: string;
 	readonly reading?: unknown;
 	readonly ready?: () => void;
 	readonly registry: AtomRegistry.AtomRegistry;
 }
 export function BoardShell(options: ShellOptions) {
-	const { api, initial, ready, client } = options;
+	const { api, ready, client } = options;
 	const appearance = useAppearance();
 	const sidebar = useSidebar(appearance);
 	const status = useBoardNavigation(options);
 	const search = useSearchDialog();
 	const [libraryOpen, setLibraryOpen] = useState(false);
-	const location = useRouterState({ select: (state) => state.resolvedLocation ?? state.location });
-	const [main, setMain] = useState<MainLocation>(() => {
-		const doc = bootstrapPage(initial).getElementById("doc");
-		return { file: doc?.dataset.file ?? "", view: doc?.dataset.view ?? "" };
-	});
-	const [bootstrapHome] = useState(() => {
-		const doc = bootstrapPage(initial).getElementById("doc");
-		return doc?.classList.contains("board-view") ? { file: doc.dataset.file ?? "", identity: doc.dataset.identity } : undefined;
-	});
-	const query = useQuery(api.navigation.query({ current: main.view ? "" : main.file }), { keepPreviousData: true });
+	const location = useRouterState({ select: (state) => state.location });
+	const [main, setMain] = useState<MainLocation>({ file: "", view: "" });
+	const query = useQuery(navigationQuery(api), { keepPreviousData: true });
 	const data = Option.getOrUndefined(query.data);
-	const onPage = useCallback(
-		(next: MainLocation) => setMain((previous) => (previous.file === next.file && previous.view === next.view ? previous : next)),
-		[],
-	);
+	const onPage = useCallback((next: MainLocation) => setMain((previous) => (sameMainLocation(previous, next) ? previous : next)), []);
 	useEffect(() => {
 		function start() {
 			const doc = document.getElementById("doc");
@@ -71,7 +61,7 @@ export function BoardShell(options: ShellOptions) {
 		function sync() {
 			const doc = document.getElementById("doc");
 			if (doc) {
-				onPage({ file: doc.dataset.file ?? "", view: doc.dataset.view ?? "" });
+				onPage(displayedLocation(doc));
 			}
 		}
 		document.addEventListener("board-page", sync);
@@ -90,27 +80,32 @@ export function BoardShell(options: ShellOptions) {
 			navigationPending={query.pending}
 		/>
 	) : (
-		<span className="live" id={shellIds.live} role="status">
+		<span className="font-mono text-muted-foreground text-xs" id={shellIds.live} role="status">
 			connecting
 		</span>
 	);
 	return (
 		<AgeTicker>
-			<ReadingLibrary close={() => setLibraryOpen(false)} data={data} open={libraryOpen}>
-				<a className="skip" href="#doc">
+			<ReadingLibrary api={api} close={() => setLibraryOpen(false)} open={libraryOpen}>
+				<a className="sr-only rounded-md bg-background p-3 focus:not-sr-only focus:absolute focus:z-50" href="#doc">
 					Skip to content
 				</a>
-				<div className="workspace">
-					<Sidebar controls={sidebar} data={data} home={location.pathname === "/"} main={main} openLibrary={() => setLibraryOpen(true)} />
+				<div
+					className="grid min-h-dvh grid-cols-1 bg-background text-foreground md:data-[sidebar=open]:grid-cols-[248px_minmax(0,1fr)] print:block"
+					data-board-workspace
+					data-sidebar={sidebar.open ? "open" : "closed"}
+				>
+					<Sidebar api={api} controls={sidebar} data={data} home={location.pathname === "/"} main={main} openLibrary={() => setLibraryOpen(true)} />
 					<button
 						aria-label="Close files"
-						className="sidebar-backdrop"
+						className="fixed inset-0 z-30 hidden border-0 bg-black/45 p-0 data-[open=true]:block md:hidden"
+						data-open={sidebar.narrow && sidebar.open}
 						hidden={!(sidebar.narrow && sidebar.open)}
 						id={shellIds.sidebarBackdrop}
 						onClick={() => sidebar.close()}
 						type="button"
 					/>
-					<div className="page" inert={sidebar.narrow && sidebar.open}>
+					<div className="min-w-0 pb-[calc(4rem+env(safe-area-inset-bottom))] md:pb-0" data-board-page inert={sidebar.narrow && sidebar.open}>
 						<Header
 							appearance={appearance}
 							count={data?.inboxCount ?? null}
@@ -121,11 +116,11 @@ export function BoardShell(options: ShellOptions) {
 							status={status}
 							updates={client ? <UpdatesToggle client={client} /> : null}
 						/>
-						<BoardMain api={api} home={data ? data.home : bootstrapHome} onPage={onPage} url={location.pathname + location.searchStr} />
+						<FleetMain api={api} home={data?.home} onPage={onPage} url={location.pathname + location.searchStr} />
+						<PhoneNavigation main={main} openSearch={search.show} />
 					</div>
 				</div>
 				{Option.isSome(query.cause) && <p role="status">Navigation refresh failed. Your displayed files are retained.</p>}
-				{main.view !== "changes" && <HistoryRetention api={api} />}
 				<VisualInspection />
 				<SearchDialog
 					api={api}

package/src/client/react/DocumentAttention.tsx

@@ -1,4 +1,5 @@
 import type { Document } from "#browser/document/schema.ts";
+import { fileUrl } from "#files/url.ts";
 import { keyed } from "./keyed.ts";
 import { Reference } from "./Reference.tsx";
 export function DocumentAttention({ document }: { readonly document: Document }) {
@@ -8,8 +9,7 @@ export function DocumentAttention({ document }: { readonly document: Document })
 	}
 	return (
 		<>
-			<h3>Recorded attention requests</h3>
-			<p>Open/closed is source state. Closing a request does not establish acceptance or record an answer.</p>
+			<h3 title="Open/closed is source state. Closing a request does not establish acceptance or record an answer.">Recorded attention requests</h3>
 			<ul>
 				{keyed(requests, (entry) => entry.id).map(({ index, key }) => (
 					<Request document={document} index={index} key={key} />
@@ -28,6 +28,9 @@ function Request({ document, index }: { readonly document: Document; readonly in
 		document.metadata.attention?.filter((entry) => entry.id === request.id).length === 1
 			? `attention-request-${request.id}`
 			: `attention-record-${index}`;
+	const respond = document.requests.some((entry) => entry.id === request.id && entry.open)
+		? `#answer-card-${request.id}`
+		: `/_board/respond?item=${encodeURIComponent(document.metadata.id ?? "")}&request=${encodeURIComponent(request.id)}`;
 	const targets = request.unblocks.map((target, targetIndex) => (
 		<span key={target}>
 			{targetIndex > 0 && ", "}
@@ -49,22 +52,20 @@ function Request({ document, index }: { readonly document: Document; readonly in
 					</p>
 				</>
 			)}
-			<p>{request.reason}</p>
+			{!document.requests.some((entry) => entry.id === request.id && entry.open) && <p>{request.reason}</p>}
 			<p>Response needed from: {request.responseFrom.join(", ")}</p>
 			<p>Recorded to unblock: {targets}</p>
 			<p>
 				{receipt === undefined && (
 					<>
-						<a href={`/_board/respond?item=${encodeURIComponent(document.metadata.id ?? "")}&request=${encodeURIComponent(request.id)}`}>
-							Respond to this request
-						</a>{" "}
-						·{" "}
+						<a href={respond}>Respond to this request</a> ·{" "}
 					</>
 				)}
 				<a href={`/_board/item/${encodeURIComponent(document.metadata.id ?? "")}/`}>Reviewed item</a>
 			</p>
 			<p>
-				Source: {document.file}:{document.reading?.lines[`attention.${index}`] ?? document.reading?.lines.attention ?? 2}
+				Source: {/[a-f\d]{64}/iu.test(document.file) ? <a href={fileUrl(document.file)}>Open source file</a> : document.file}:
+				{document.reading?.lines[`attention.${index}`] ?? document.reading?.lines.attention ?? 2}
 			</p>
 		</li>
 	);

package/src/client/react/DocumentClaims.tsx

@@ -9,11 +9,9 @@ export function DocumentClaims({ document }: { readonly document: Document }) {
 	}
 	return (
 		<>
-			<h3>Recorded evidence</h3>
-			<p>
-				Source claims — not independently verified. A recorded outcome does not establish human acceptance. Work Board does not check recorded
-				revisions against the current workspace.
-			</p>
+			<h3 title="Source claims are not independently verified. A recorded outcome does not establish human acceptance. Work Board does not check recorded revisions against the current workspace.">
+				Recorded evidence
+			</h3>
 			<ul>
 				{keyed(evidence, (entry) => entry.source).map(({ index, key }) => (
 					<Claim document={document} index={index} key={key} />
@@ -36,26 +34,28 @@ function Claim({ document, index }: { readonly document: Document; readonly inde
 	].map(([label, value]) => (
 		<Fragment key={label}>
 			<dt>{label}</dt>
-			<dd>{value ?? "Not recorded"}</dd>
+			<dd>{label === "Checked revision" ? <code>{value ?? ""}</code> : (value ?? "")}</dd>
 		</Fragment>
 	));
 	return (
 		<li id={`recorded-evidence-${index}`} tabIndex={-1}>
 			{source?.href ? (
 				<a href={source.href} rel="noreferrer">
-					{entry.source}
+					<code>{entry.source}</code>
 				</a>
 			) : (
-				entry.source
+				<code>{entry.source}</code>
 			)}
 			{source?.problem}
 			<dl>
 				<dt>Recorded in</dt>
 				<dd>
-					{document.file}:{document.reading?.lines[`evidence.${index}.source`] ?? document.reading?.lines.evidence ?? 1}
+					<code>
+						{document.file}:{document.reading?.lines[`evidence.${index}.source`] ?? document.reading?.lines.evidence ?? 1}
+					</code>
 				</dd>
 				<dt>Criterion</dt>
-				<dd>{entry.criterion ? <Reference document={document} target={entry.criterion} /> : "Not recorded"}</dd>
+				<dd>{entry.criterion ? <Reference document={document} target={entry.criterion} /> : ""}</dd>
 				{details}
 			</dl>
 		</li>

package/src/client/react/DocumentContext.tsx

@@ -1,23 +1,21 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import type { Document } from "#browser/document/schema.ts";
+import { Tabs } from "#client/react/components/ui/Tabs.tsx";
 import { Age } from "./Age.tsx";
 import { DocumentMetadata } from "./DocumentMetadata.tsx";
-import { Favorite } from "./Favorite.tsx";
-import { useMedia } from "./useMedia.ts";
+import { DocumentSource } from "./DocumentSource.tsx";
 
 export function DocumentContext({ document: data }: { readonly document: Document }) {
 	const [headings, setHeadings] = useState<readonly { readonly id: string; readonly title: string; readonly depth: number }[]>([]);
-	const contextRef = useRef<HTMLDetailsElement>(null);
-	const wide = useMedia("(min-width: 1100px)");
-	useLayoutEffect(() => {
-		if (contextRef.current) {
-			contextRef.current.open = wide;
-		}
-	}, [wide]);
+	const contextRef = useRef<HTMLElement>(null);
+	const [tab, setTab] = useState("details");
 	useEffect(() => {
 		function outline() {
 			const entries = [
-				...(contextRef.current?.closest("main")?.querySelectorAll<HTMLElement>(".item-introduction h1, article.doc :is(h1,h2,h3,h4,h5,h6)") ?? []),
+				...(contextRef.current
+					?.closest("main")
+					?.querySelectorAll<HTMLElement>(".item-introduction h1, :is(.document-lead, article.doc, .document-layout > .board) :is(h1,h2,h3,h4,h5,h6)")
+					?? []),
 			]
 				.filter((heading) => heading.id)
 				.map((heading) => ({ depth: Number(heading.tagName.slice(1)), id: heading.id, title: heading.textContent?.replace(/#$/u, "") ?? "" }));
@@ -33,27 +31,31 @@ export function DocumentContext({ document: data }: { readonly document: Documen
 		if (!context) {
 			return;
 		}
-		const count = context.closest("main")?.querySelectorAll(".item-introduction h1[id], article.doc :is(h1,h2,h3,h4,h5,h6)[id]").length ?? 0;
+		const count =
+			context
+				.closest("main")
+				?.querySelectorAll(".item-introduction h1[id], :is(.document-lead, article.doc, .document-layout > .board) :is(h1,h2,h3,h4,h5,h6)[id]").length
+			?? 0;
 		if (count !== headings.length) {
 			return;
 		}
 		context.dataset.readingReady = "true";
 		document.dispatchEvent(new Event("board-reading-ready"));
 	}, [headings]);
+	const tabs = [
+		{ content: <Outline headings={headings} />, label: "Details", value: "details" },
+		{ content: <SourcePanel document={data} />, label: "Source", value: "source" },
+	];
 	return (
-		<details className="item-context" data-key="item-context" ref={contextRef}>
-			<summary>Context and tools</summary>
-			<div className="context-content">
-				<p className="meta">
-					Source: {data.file} · <Age modified={data.modified} />
-				</p>
-				<DocumentMetadata document={data} />
-				<div className="reading-tools">
-					<Favorite file={data.file} title={headings.find((heading) => heading.depth === 1)?.title || data.file} />
-					<Outline headings={headings} />
-				</div>
-			</div>
-		</details>
+		<aside
+			aria-label="Item context"
+			className="item-context row-start-3 min-w-0 self-start rounded-lg border border-border p-4 text-sm lg:col-start-2 lg:row-start-2"
+			data-key="item-context"
+			ref={contextRef}
+		>
+			<Tabs label="Item context" onValueChange={setTab} tabs={tabs} value={tab} />
+			<DocumentMetadata document={data} />
+		</aside>
 	);
 }
 
@@ -67,7 +69,7 @@ function Outline({ headings }: { readonly headings: readonly { readonly id: stri
 		</li>
 	));
 	return (
-		<details className="outline" data-key="outline">
+		<details className="document-outline" data-key="outline">
 			<summary>On this page</summary>
 			<nav aria-label="Document outline">
 				<ol>{entries}</ol>
@@ -75,3 +77,12 @@ function Outline({ headings }: { readonly headings: readonly { readonly id: stri
 		</details>
 	);
 }
+
+function SourcePanel({ document }: { readonly document: Document }) {
+	return (
+		<>
+			<DocumentSource document={document} />
+			<Age modified={document.modified} />
+		</>
+	);
+}

package/src/client/react/DocumentCriteria.tsx

@@ -5,9 +5,20 @@ export function DocumentCriteria({ document }: { readonly document: Document })
 	if (criteria.length === 0) {
 		return null;
 	}
+	const valid = Boolean(document.identity) && document.unavailable.length === 0;
+	function unique(id: string) {
+		return criteria.filter((entry) => entry.id === id).length === 1;
+	}
+	const evidenced = criteria.filter((entry) => valid && unique(entry.id) && (document.reading?.claims[entry.id]?.length ?? 0) > 0).length;
 	return (
 		<>
 			<h3>Criteria and recorded evidence</h3>
+			<p className="text-muted-foreground text-xs">
+				{evidenced} of {criteria.length} criteria have recorded evidence
+			</p>
+			{(!valid || criteria.some((entry) => !unique(entry.id))) && (
+				<p>Evidence association requires unique item/criterion IDs and a readable workspace.</p>
+			)}
 			<ul>
 				{keyed(criteria, (entry) => entry.id).map(({ index, key }) => (
 					<Criterion document={document} index={index} key={key} />
@@ -24,23 +35,20 @@ function Criterion({ document, index }: { readonly document: Document; readonly
 	const unique = document.metadata.criteria?.filter((entry) => entry.id === criterion.id).length === 1;
 	return (
 		<li id={unique ? `criterion-${criterion.id}` : undefined} tabIndex={-1}>
-			<b>{criterion.id}</b>: {criterion.text}
-			<Claims document={document} id={criterion.id} valid={Boolean(document.identity) && document.unavailable.length === 0 && unique} />
+			<code>{criterion.id}</code>: {criterion.text}
+			<CriterionClaims document={document} id={criterion.id} valid={Boolean(document.identity) && document.unavailable.length === 0 && unique} />
 		</li>
 	);
 }
-function Claims({ document, id, valid }: { readonly document: Document; readonly id: string; readonly valid: boolean }) {
+export function CriterionClaims({ document, id, valid }: { readonly document: Document; readonly id: string; readonly valid: boolean }) {
 	const claims = document.reading?.claims[id] ?? [];
-	if (!valid) {
-		return <p>Evidence association requires unique item/criterion IDs and a readable workspace. Acceptance is not established.</p>;
-	}
-	if (claims.length === 0) {
-		return <p>No recorded evidence naming this criterion. Acceptance is not established.</p>;
+	if (!valid || claims.length === 0) {
+		return null;
 	}
 	return (
 		<>
-			<p>
-				{claims.length} recorded {claims.length === 1 ? "claim" : "claims"}, not verified acceptance:
+			<p title="Recorded claims do not establish verified acceptance.">
+				{claims.length} recorded {claims.length === 1 ? "claim" : "claims"}:
 			</p>
 			<ul>
 				{keyed(claims, (claim) => `${claim.href}:${claim.label}`).map(({ key, value: claim }) => (

package/src/client/react/DocumentEvidence.tsx

@@ -1,12 +1,10 @@
 import type { Document } from "#browser/document/schema.ts";
-import { DocumentAttention } from "./DocumentAttention.tsx";
 import { DocumentClaims } from "./DocumentClaims.tsx";
 import { DocumentCriteria } from "./DocumentCriteria.tsx";
 export function DocumentEvidence({ document }: { readonly document: Document }) {
 	return (
 		<>
-			<DocumentCriteria document={document} />
-			<DocumentAttention document={document} />
+			{document.metadata.kind !== "project" && <DocumentCriteria document={document} />}
 			<DocumentClaims document={document} />
 		</>
 	);

package/src/client/react/DocumentMain.tsx

@@ -22,15 +22,15 @@ export function DocumentMain({
 }) {
 	const query = useQuery(documentQuery(api, url));
 	const fresh = Option.getOrUndefined(query.data);
-	const [retained, setRetained] = useState<Document>();
+	const [retained, setRetained] = useState<{ readonly data: Document; readonly url: string }>();
 	useEffect(() => {
 		if (fresh) {
-			setRetained(fresh);
+			setRetained({ data: fresh, url });
 		}
-	}, [fresh]);
+	}, [fresh, url]);
 	const failure = Option.getOrUndefined(Option.flatMap(query.cause, Cause.findErrorOption));
 	const terminal = failure?._tag === "Conflict" || failure?._tag === "NotFound";
-	const data = terminal ? undefined : (fresh ?? retained);
+	const data = terminal ? undefined : (fresh ?? (retained?.url === url ? retained.data : undefined));
 	const status = readStatus(failure?._tag, Option.isSome(query.cause));
 	const hostRef = useDocumentPage({ data, onPage, pending: query.pending, status, url });
 	if (data?.reading?.board) {
@@ -43,7 +43,7 @@ export function DocumentMain({
 		<>
 			<main className="document-view" data-file="" data-react-document data-url="" id={shellIds.doc} ref={hostRef} tabIndex={-1}>
 				{data ? (
-					<DocumentPage document={data} key={data.identity ?? data.file} />
+					<DocumentPage api={api} document={data} key={data.identity ?? data.file} />
 				) : (
 					<p className="empty" role="status">
 						{loadingMessage(failure?._tag, Option.isSome(query.cause), url)}
@@ -67,6 +67,9 @@ function loadingMessage(tag: string | undefined, failed: boolean, url: string) {
 	if (tag === "Conflict") {
 		return "The document identity is duplicated. No document was selected. Inspect the project files to resolve the duplicate ID.";
 	}
+	if (tag === "NotFound" && /^\/_board\/item\/[^/]+\/?$/u.test(new URL(url, "http://127.0.0.1").pathname)) {
+		return "No item with this id is available. It may be missing, renamed, or invalid.";
+	}
 	if (tag === "NotFound" && /\.md$/iu.test(new URL(url, "http://127.0.0.1").pathname)) {
 		return `No markdown file at ${decodeURIComponent(new URL(url, "http://127.0.0.1").pathname.slice(1))}.`;
 	}

package/src/client/react/DocumentMetadata.tsx

@@ -1,13 +1,18 @@
 import type { Document } from "#browser/document/schema.ts";
+import { specificSources } from "#browser/document/sourceGroups.ts";
 import { DocumentWorkMetadata } from "./DocumentWorkMetadata.tsx";
-import { keyed } from "./keyed.ts";
+import { SourceList } from "./SourceList.tsx";
+
 export function DocumentMetadata({ document }: { readonly document: Document }) {
 	const reading = document.reading;
-	const backlinks = reading?.backlinks ?? [];
-	const entries = keyed(backlinks, (link) => `${link.href}:${link.kind}:${link.label}`).map(({ key, value: link }) => (
-		<li key={key}>
-			{link.kind}: <a href={link.href}>{link.label}</a>
-		</li>
+	const backlinks = specificSources(reading?.backlinks ?? []).filter((link) => document.metadata.kind !== "project" || link.kind !== "Implements");
+	const groups = [...Map.groupBy(backlinks, (link) => link.kind)].map(([kind, links]) => (
+		<section aria-label={`${kind} backlinks`} key={kind}>
+			<h4>
+				{kind} ({links.length})
+			</h4>
+			<SourceList links={links} />
+		</section>
 	));
 	return (
 		<>
@@ -19,11 +24,8 @@ export function DocumentMetadata({ document }: { readonly document: Document })
 			)}
 			{backlinks.length > 0 && (
 				<section aria-label="Source backlinks" className="work-context">
-					<details data-key="work-backlinks">
-						<summary>Referenced by ({backlinks.length})</summary>
-						<ul>{entries}</ul>
-						<p>These are explicit source links, not inferred blockers or workflow rules.</p>
-					</details>
+					<h3 title="These are explicit source links, not inferred blockers or workflow rules.">Referenced by ({backlinks.length})</h3>
+					{groups}
 				</section>
 			)}
 		</>