@shivaedev/work-board 0.12.0 → 0.14.0

package/src/client/react/AnswerPrompts.tsx

@@ -1,80 +1,103 @@
+import { useAtomValue } from "@effect/atom-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";
+import { PromptOption } from "./PromptOption.tsx";
 import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
-export function AnswerPrompts({ document, prompts }: { readonly document: Document; readonly prompts: readonly Prompt[] }) {
-	return prompts.map((prompt, index) => <PromptField document={document} index={index} key={prompt.id} prompt={prompt} />);
+import type { useResponseForm } from "./useResponseForm.ts";
+
+type Model = ReturnType<typeof useResponseForm>["form"];
+interface PromptProps {
+	readonly answers: readonly PromptAnswer[];
+	readonly document: Document;
+	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 }: { readonly document: Document; 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 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;
+
 	let guidance = "Answer in your own words.";
 	if (choices) {
 		guidance = "Choose an option or write another answer.";
 	} else if (prompt.mode !== "text") {
 		guidance = `${prompt.mode === "one" ? "Choose one option" : "Choose any combination"}, or answer in your own words.`;
 	}
-	const options = prompt.options.map((option, choice) => (
-		<PromptOption choice={choice} document={document} index={index} key={option.id} option={option} prompt={prompt} />
-	));
+	function change(next: PromptAnswer) {
+		onEdit(index, next);
+	}
+
+	function choose(id: string, checked: boolean) {
+		let selected: readonly string[] = [];
+		if (prompt.mode === "one") {
+			selected = checked ? [id] : [];
+		} else {
+			selected = checked ? [...new Set([...answer.selected, id])] : answer.selected.filter((entry) => entry !== id);
+		}
+		change({ ...answer, selected });
+	}
+	let message = error;
+	if (error && answer.selected.length === 0 && !answer.text.trim()) {
+		message = `Unanswered: Question ${index + 1} · ${prompt.id}. Choose an option or answer in your own words.`;
+	}
 	return (
 		<fieldset data-mode={prompt.mode} data-prompt={prompt.id} data-source={prompt.source}>
 			<legend>{choices ? "Your answer" : `Question ${index + 1} · ${prompt.id}`}</legend>
 			{choices === undefined && <ResponseMarkdown file={document.file} source={prompt.source} />}
 			<p>{guidance} Nothing is selected for you.</p>
-			<div className={choices ? "question-choices" : undefined}>{options}</div>
+			<div className={choices ? "question-choices" : undefined}>
+				{prompt.options.map((option, choice) => (
+					<PromptOption
+						checked={answer.selected.includes(option.id)}
+						choice={choice}
+						choose={choose}
+						document={document}
+						key={option.id}
+						option={option}
+						prompt={prompt}
+					/>
+				))}
+			</div>
 			{prompt.mode !== "text" && (
-				<button data-clear-choices type="button">
+				<button data-clear-choices onClick={() => change({ ...answer, selected: [] })} type="button">
 					Clear selections
 				</button>
 			)}
 			<label>
 				{choices ? "Another answer / additional text" : "Additional text / another answer"}
-				<textarea data-answer-text maxLength={8192} rows={choices ? 4 : 3} />
+				<textarea
+					aria-describedby={`${errorId}-error`}
+					aria-invalid={Boolean(error)}
+					data-answer-text
+					maxLength={8192}
+					onInput={(event) => change({ ...answer, text: event.currentTarget.value })}
+					ref={ref}
+					rows={choices ? 4 : 3}
+					value={answer.text}
+				/>
+				<span className="response-field-error" hidden={!error} id={`${errorId}-error`}>
+					{message}
+				</span>
 			</label>
 		</fieldset>
 	);
 }
-function PromptOption({
-	document,
-	prompt,
-	option,
-	choice,
-	index,
-}: {
-	readonly document: Document;
-	readonly prompt: Prompt;
-	readonly option: Prompt["options"][number];
-	readonly choice: number;
-	readonly index: number;
-}) {
-	const source = document.metadata.options?.[choice];
-	if (source) {
-		return (
-			<div>
-				<input data-option-source={option.source} hidden name={`choice-${prompt.id}`} type="radio" value={option.id} />
-				<button aria-pressed="false" className="question-choice" data-choice={option.id} type="button">
-					<strong>
-						{source.label}
-						{source.label === document.metadata.recommended && " · Recommended"}
-					</strong>
-					<small>{source.description}</small>
-				</button>
-			</div>
-		);
-	}
-	const id = `question-${index}-${choice}`;
-	return (
-		<div className="question-option">
-			<input
-				data-option-source={option.source}
-				id={id}
-				name={`choice-${prompt.id}`}
-				type={prompt.mode === "one" ? "radio" : "checkbox"}
-				value={option.id}
-			/>
-			<div>
-				<label htmlFor={id}>Option {option.id}</label>
-				<ResponseMarkdown file={document.file} source={option.source} />
-			</div>
-		</div>
-	);
-}

package/src/client/react/BoardMain.tsx

@@ -0,0 +1,30 @@
+import type { Navigation } from "#browser/Navigation.ts";
+import { DocumentMain } from "./DocumentMain.tsx";
+import { documentRoute } from "./documentRoute.ts";
+import type { MainLocation } from "./mainLocation.ts";
+import { ProjectionMain } from "./ProjectionMain.tsx";
+import { projectionRoute } from "./projectionRoute.ts";
+import { RemainingMain } from "./RemainingMain.tsx";
+import { remainingRoute } from "./remainingRoute.ts";
+import type { ShellApi } from "./ShellApi.ts";
+export function BoardMain({
+	api,
+	home,
+	onPage,
+	url,
+}: {
+	readonly api: ShellApi;
+	readonly home: Navigation["home"];
+	readonly onPage: (location: MainLocation) => void;
+	readonly url: string;
+}) {
+	const pathname = new URL(url, "http://127.0.0.1").pathname;
+	const projection = projectionRoute(pathname, home);
+	if (projection) {
+		return <ProjectionMain api={api} onPage={onPage} route={projection} url={url} />;
+	}
+	if (documentRoute(pathname, home)) {
+		return <DocumentMain api={api} onPage={onPage} url={url} />;
+	}
+	return <RemainingMain api={api} onPage={onPage} route={remainingRoute(pathname) ?? "start"} url={url} />;
+}

package/src/client/react/BoardShell.tsx

@@ -1,51 +1,67 @@
 import { useRouterState } from "@tanstack/react-router";
 import { Option } from "effect";
+import type * as AtomRegistry from "effect/reactivity/AtomRegistry";
 import { useCallback, useEffect, useState } from "react";
 import { useQuery } from "@shivaedev/effect-react/result-state.ts";
-import { DocumentMain } from "./DocumentMain.tsx";
-import { documentRoute } from "./documentRoute.ts";
+import type { BrowserClient } from "#client/client.ts";
+import { navigationQuery } from "#client/page/routeQuery.ts";
+import { AgeTicker } from "./Age.tsx";
+import { FleetMain } from "./FleetMain.tsx";
 import { Header } from "./Header.tsx";
-import { LegacyMain } from "./LegacyMain.tsx";
-import { legacyPage, type MainLocation } from "./legacyPage.ts";
+import { LiveControls } from "./LiveControls.tsx";
+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";
 import { Sidebar } from "./Sidebar.tsx";
 import { shellIds } from "./shellIds.ts";
+import { UpdatesToggle } from "./UpdatesToggle.tsx";
+import { useAppearance } from "./useAppearance.ts";
+import { useBoardNavigation } from "./useBoardNavigation.ts";
+import { useSearchDialog } from "./useSearchDialog.ts";
+import { useSidebar } from "./useSidebar.ts";
+import { VisualInspection } from "./VisualInspection.tsx";
 export interface ShellOptions {
 	readonly api: ShellApi;
-	readonly initial: string;
+	readonly client?: BrowserClient;
+	readonly reading?: unknown;
 	readonly ready?: () => void;
+	readonly registry: AtomRegistry.AtomRegistry;
 }
-export function BoardShell({ api, initial, ready }: ShellOptions) {
-	const location = useRouterState({ select: (state) => state.resolvedLocation ?? state.location });
-	const [main, setMain] = useState<MainLocation>(() => {
-		const doc = legacyPage(initial).getElementById("doc");
-		return { file: doc?.dataset.file ?? "", view: doc?.dataset.view ?? "" };
-	});
-	const [bootstrapHome] = useState(() => {
-		const doc = legacyPage(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 });
+export function BoardShell(options: ShellOptions) {
+	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.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() {
-			if (document.getElementById("doc")?.dataset.route) {
+			const doc = document.getElementById("doc");
+			const context = doc?.querySelector<HTMLElement>(".item-context");
+			if (data && doc?.dataset.route && (!context || context.dataset.readingReady === "true")) {
 				ready?.();
 			}
 		}
 		start();
 		document.addEventListener("board-page", start);
-		return () => document.removeEventListener("board-page", start);
-	}, [ready]);
+		document.addEventListener("board-reading-ready", start);
+		return () => {
+			document.removeEventListener("board-page", start);
+			document.removeEventListener("board-reading-ready", start);
+		};
+	}, [ready, data]);
 	useEffect(() => {
 		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);
@@ -56,24 +72,65 @@ export function BoardShell({ api, initial, ready }: ShellOptions) {
 			document.dispatchEvent(new Event("board-index-change"));
 		}
 	}, [data]);
+	const live = client ? (
+		<LiveControls
+			client={client}
+			current={location.pathname + location.searchStr}
+			navigationFailed={Option.isSome(query.cause)}
+			navigationPending={query.pending}
+		/>
+	) : (
+		<span className="font-mono text-muted-foreground text-xs" id={shellIds.live} role="status">
+			connecting
+		</span>
+	);
 	return (
-		<>
-			<a className="skip" href="#doc">
-				Skip to content
-			</a>
-			<div className="workspace">
-				<Sidebar data={data} home={location.pathname === "/"} main={main} />
-				<div className="sidebar-backdrop" hidden id={shellIds.sidebarBackdrop} />
-				<div className="page">
-					<Header count={data?.inboxCount ?? null} main={main} />
-					{documentRoute(location.pathname, data ? data.home : bootstrapHome) ? (
-						<DocumentMain api={api} initial={initial} onPage={onPage} url={location.pathname + location.searchStr} />
-					) : (
-						<LegacyMain api={api} initial={initial} onPage={onPage} url={location.pathname + location.searchStr} />
-					)}
+		<AgeTicker>
+			<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="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="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="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}
+							live={live}
+							main={main}
+							openSearch={search.show}
+							sidebar={sidebar}
+							status={status}
+							updates={client ? <UpdatesToggle client={client} /> : null}
+						/>
+						<FleetMain api={api} home={data?.home} onPage={onPage} url={location.pathname + location.searchStr} />
+						<PhoneNavigation main={main} openSearch={search.show} />
+					</div>
 				</div>
-			</div>
-			{Option.isSome(query.cause) && <p role="status">Navigation refresh failed. Your displayed files are retained.</p>}
-		</>
+				{Option.isSome(query.cause) && <p role="status">Navigation refresh failed. Your displayed files are retained.</p>}
+				<VisualInspection />
+				<SearchDialog
+					api={api}
+					appearance={appearance}
+					close={search.close}
+					open={search.open}
+					returnFocus={search.returnFocus}
+					toggleSidebar={sidebar.toggle}
+				/>
+			</ReadingLibrary>
+		</AgeTicker>
 	);
 }

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,15 +1,21 @@
-import { useEffect, useRef, useState } from "react";
+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 { shellIds } from "./shellIds.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 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, "") ?? "" }));
@@ -19,25 +25,37 @@ export function DocumentContext({ document: data }: { readonly document: Documen
 		outline();
 		return () => document.removeEventListener("board-page", outline);
 	}, []);
+
+	useLayoutEffect(() => {
+		const context = contextRef.current;
+		if (!context) {
+			return;
+		}
+		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} ·{" "}
-					<span className="age" data-modified={data.modified}>
-						updated
-					</span>
-				</p>
-				<DocumentMetadata document={data} />
-				<div className="reading-tools">
-					<button aria-pressed="false" disabled id={shellIds.favoriteToggle} type="button">
-						Save favorite
-					</button>
-					<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>
 	);
 }
 
@@ -51,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>
@@ -59,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} />
 		</>
 	);