@shivaedev/work-board 0.12.0 → 0.14.0

package/src/client/react/DocumentMain.tsx

@@ -4,8 +4,9 @@ import { useQuery } from "@shivaedev/effect-react/result-state.ts";
 import type { Document } from "#browser/document/schema.ts";
 import { documentQuery } from "#client/page/routeQuery.ts";
 import { DocumentPage } from "./DocumentPage.tsx";
-import { LegacyMain } from "./LegacyMain.tsx";
-import type { MainLocation } from "./legacyPage.ts";
+import type { MainLocation } from "./mainLocation.ts";
+import { ProjectionMain } from "./ProjectionMain.tsx";
+import { RemainingMain } from "./RemainingMain.tsx";
 import type { ShellApi } from "./ShellApi.ts";
 import { shellIds } from "./shellIds.ts";
 import { useDocumentPage } from "./useDocumentPage.ts";
@@ -14,34 +15,35 @@ export function DocumentMain({
 	api,
 	url,
 	onPage,
-	initial,
 }: {
 	readonly api: ShellApi;
 	readonly url: string;
-	readonly initial: string;
 	readonly onPage: (location: MainLocation) => void;
 }) {
 	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 || (url === "/" && failure?._tag === "NotFound")) {
-		return <LegacyMain api={api} initial={initial} onPage={onPage} url={url} />;
+	if (data?.reading?.board) {
+		return <ProjectionMain api={api} onPage={onPage} route="board" url={url} />;
+	}
+	if (url === "/" && failure?._tag === "NotFound") {
+		return <RemainingMain api={api} onPage={onPage} route="start" url={url} />;
 	}
 	return (
 		<>
 			<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)}
@@ -65,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>
 			)}
 		</>

package/src/client/react/DocumentPage.tsx

@@ -2,27 +2,21 @@ import type { Document } from "#browser/document/schema.ts";
 import { DocumentView } from "#client/document/View.ts";
 import { AnswerPanel } from "./AnswerPanel.tsx";
 import { DocumentContext } from "./DocumentContext.tsx";
-export function DocumentPage({ document }: { readonly document: Document }) {
+import { DocumentCriteria } from "./DocumentCriteria.tsx";
+import { GoalPage } from "./GoalPage.tsx";
+import { GoalProgressHeader } from "./GoalProgressHeader.tsx";
+import { ItemSummary } from "./ItemSummary.tsx";
+import type { ShellApi } from "./ShellApi.ts";
+export function DocumentPage({ document, api }: { readonly document: Document; readonly api?: ShellApi | undefined }) {
+	const projectContent = api ? <GoalPage api={api} document={document} /> : <DocumentCriteria document={document} />;
 	return (
-		<>
-			<DocumentView context={<DocumentContext document={document} />} document={document} introduction={<Introduction document={document} />} />
-			{document.metadata.kind === "question" && document.metadata.question === undefined && document.identity !== undefined && (
-				<AnswerPanel document={document} />
-			)}
-		</>
-	);
-}
-function Introduction({ document }: { readonly document: Document }) {
-	if (document.reading?.raw === undefined) {
-		return null;
-	}
-	return (
-		<section aria-label="Authored work" className="item-summary">
-			<p>
-				Status (source): <b>{document.metadata.status ?? "Not recorded"}</b>
-				{document.metadata.owner ? ` · Owner: ${document.metadata.owner}` : ""}
-			</p>
-			<p>Next action: {document.metadata.nextAction ?? "Not recorded"}</p>
-		</section>
+		<DocumentView
+			answer={<AnswerPanel document={document} />}
+			content={document.metadata.kind === "project" ? projectContent : undefined}
+			context={<DocumentContext document={document} />}
+			document={document}
+			introduction={<ItemSummary document={document} />}
+			lead={api && document.metadata.kind === "project" ? <GoalProgressHeader api={api} document={document} /> : undefined}
+		/>
 	);
 }

package/src/client/react/DocumentRecords.tsx

@@ -13,7 +13,7 @@ export function DocumentRecords({ document: data }: { readonly document: Documen
 					</p>
 					<p>Receipt is separate from execution and acceptance.</p>
 					<p>
-						{handoff.by ?? "Attribution not recorded"}
+						{handoff.by ?? ""}
 						{Boolean(handoff.note) && ` · ${handoff.note}`}
 					</p>
 					<p>

package/src/client/react/DocumentRelationships.tsx

@@ -0,0 +1,59 @@
+import type { Document } from "#browser/document/schema.ts";
+import { type SourceLink, specificSources } from "#browser/document/sourceGroups.ts";
+import { keyed } from "./keyed.ts";
+import { Reference } from "./Reference.tsx";
+import { SourceList } from "./SourceList.tsx";
+export function DocumentRelationships({ document }: { readonly document: Document }) {
+	const fields = document.metadata;
+	const relationships = fields.relationships ?? [];
+	const links = specificSources(
+		relationships
+			.map((link) => ({
+				href: document.references[link.target] ?? "",
+				kind: link.kind,
+				label: link.target,
+				status: document.referenceDetails?.[link.target]?.status,
+				title: document.referenceDetails?.[link.target]?.title,
+			}))
+			.filter((link) => link.href),
+	);
+	const unresolved = relationships.filter((link) => !document.references[link.target]);
+	const missing = keyed(unresolved, (link) => `${link.kind}:${link.target}`).map(({ key, value: link }) => (
+		<li key={key}>
+			{link.kind.replaceAll("_", " ")}: <Reference document={document} target={link.target} />
+		</li>
+	));
+	const items = keyed(fields.items ?? [], (id) => id).map(({ key, value: id }) => (
+		<li key={key}>
+			<Reference document={document} target={id} />
+		</li>
+	));
+	return (
+		<>
+			{links.length + unresolved.length > 0 && (
+				<section aria-label="Relationships">
+					<h3>Relationships</h3>
+					{[...Map.groupBy(links, (link) => link.kind)].map(([kind, sources]) => (
+						<RelationshipGroup key={kind} kind={kind} sources={sources} />
+					))}
+					{missing.length > 0 && <ul>{missing}</ul>}
+				</section>
+			)}
+			{items.length > 0 && (
+				<section aria-label="Board membership">
+					<h3>Declared board membership</h3>
+					<ul>{items}</ul>
+				</section>
+			)}
+		</>
+	);
+}
+
+function RelationshipGroup({ kind, sources }: { readonly kind: string; readonly sources: readonly SourceLink[] }) {
+	return (
+		<div>
+			<h4>{kind.replaceAll("_", " ")}</h4>
+			<SourceList links={sources} />
+		</div>
+	);
+}

package/src/client/react/DocumentSource.tsx

@@ -0,0 +1,30 @@
+import type { Document } from "#browser/document/schema.ts";
+import { fileUrl } from "#files/url.ts";
+import { DocumentAttention } from "./DocumentAttention.tsx";
+import { DocumentRecords } from "./DocumentRecords.tsx";
+export function DocumentSource({ document }: { readonly document: Document }) {
+	const reading = document.reading;
+	return (
+		<section aria-label="Document source" className="space-y-4">
+			<p>
+				Source:{" "}
+				{/[a-f\d]{64}/iu.test(document.file) ? (
+					<a href={fileUrl(document.file)}>Open source file</a>
+				) : (
+					<code>
+						{document.file}:{reading?.lines.id ?? 1}
+					</code>
+				)}
+				; prose starts at line {reading?.proseLine ?? 1}.
+			</p>
+			{reading?.raw !== undefined && (
+				<>
+					<h3>Original frontmatter</h3>
+					<pre className="overflow-auto whitespace-pre-wrap font-mono text-xs">{reading.raw}</pre>
+				</>
+			)}
+			<DocumentAttention document={document} />
+			<DocumentRecords document={document} />
+		</section>
+	);
+}

package/src/client/react/DocumentWorkMetadata.tsx

@@ -1,51 +1,28 @@
-import { Fragment } from "react";
 import type { Document } from "#browser/document/schema.ts";
 import { DocumentEvidence } from "./DocumentEvidence.tsx";
-import { DocumentRecords } from "./DocumentRecords.tsx";
+import { DocumentRelationships } from "./DocumentRelationships.tsx";
 import { keyed } from "./keyed.ts";
-import { Reference } from "./Reference.tsx";
 export function DocumentWorkMetadata({ document }: { readonly document: Document }) {
 	return (
-		<section aria-label="Recorded work" className="work-meta">
+		<section aria-label="Work details" className="work-meta">
 			<MetadataLead document={document} />
-			<details data-key="work-metadata">
-				<summary>Work details and source</summary>
-				<DocumentRecords document={document} />
-				<MetadataFields document={document} />
-				<DocumentEvidence document={document} />
-				<SourceInfo document={document} />
-			</details>
+			<DocumentEvidence document={document} />
+			<DocumentRelationships document={document} />
 		</section>
 	);
 }
+
 function MetadataLead({ document }: { readonly document: Document }) {
-	const { identity, metadata: fields } = document;
 	const diagnostics = keyed(document.diagnostics, (problem) => `${problem.line}:${problem.message}`).map(({ key, value: problem }) => (
 		<li key={key}>
-			{document.file}:{problem.line} — {problem.message}
+			<code>
+				{document.file}:{problem.line}
+			</code>{" "}
+			— {problem.message}
 		</li>
 	));
 	return (
 		<>
-			<p className="metadata-summary">
-				Recorded work ·{" "}
-				{identity ? <a href={`/_board/item/${encodeURIComponent(identity)}/`}>Item link: {identity}</a> : `ID: ${fields.id ?? "Not recorded"}`}
-			</p>
-			{identity !== undefined && fields.kind === "board" && (
-				<p>
-					<a href={`/_board/work?view=board&board=${encodeURIComponent(identity)}`}>View this board</a>
-				</p>
-			)}
-			{identity !== undefined && fields.kind === "result" && (
-				<p>
-					<a href={`/_board/result?item=${encodeURIComponent(identity)}`}>Review returned result</a>
-				</p>
-			)}
-			{identity !== undefined && !["question", "response", "handoff"].includes(fields.kind ?? "") && (
-				<p>
-					<a href={`/_board/handoff?item=${encodeURIComponent(identity)}`}>Prepare an agent handoff</a>
-				</p>
-			)}
 			{diagnostics.length > 0 && (
 				<div className="metadata-problems" role="status">
 					<b>Source diagnostics</b>
@@ -55,62 +32,3 @@ function MetadataLead({ document }: { readonly document: Document }) {
 		</>
 	);
 }
-function MetadataFields({ document }: { readonly document: Document }) {
-	const fields = document.metadata;
-	const values = [
-		["Kind", fields.kind],
-		["Status", fields.status],
-		["Owner", fields.owner],
-		["Next action", fields.nextAction],
-	].map(([label, value]) => (
-		<Fragment key={label}>
-			<dt>{label}</dt>
-			<dd>{value ?? "Not recorded"}</dd>
-		</Fragment>
-	));
-	const relationships =
-		keyed(fields.relationships ?? [], (link) => `${link.kind}:${link.target}`).map(({ key, value: link }) => (
-			<li key={key}>
-				{link.kind.replace("_", " ")}: <Reference document={document} target={link.target} />
-			</li>
-		)) ?? [];
-	const items =
-		fields.items?.map((id) => (
-			<li key={id}>
-				<Reference document={document} target={id} />
-			</li>
-		)) ?? [];
-	return (
-		<>
-			<dl>{values}</dl>
-			{relationships.length > 0 && (
-				<>
-					<h3>Relationships</h3>
-					<ul>{relationships}</ul>
-				</>
-			)}
-			{items.length > 0 && (
-				<>
-					<h3>Declared board membership</h3>
-					<ul>{items}</ul>
-				</>
-			)}
-		</>
-	);
-}
-function SourceInfo({ document }: { readonly document: Document }) {
-	const reading = document.reading;
-	return (
-		<>
-			<p>
-				Source: {document.file}:{reading?.lines.id ?? 1}; prose starts at line {reading?.proseLine ?? 1}.
-			</p>
-			{Boolean(reading?.raw) && (
-				<details data-key="frontmatter-source">
-					<summary>Original frontmatter</summary>
-					<pre>{reading?.raw}</pre>
-				</details>
-			)}
-		</>
-	);
-}

package/src/client/react/Favorite.tsx

@@ -0,0 +1,17 @@
+import { useContext } from "react";
+import { LibraryContext } from "./readingLibrary.ts";
+import { shellIds } from "./shellIds.ts";
+export function Favorite({ file, title }: { readonly file: string; readonly title: string }) {
+	const library = useContext(LibraryContext);
+	const saved = library.favorites.some((item) => item.file === file);
+	return (
+		<button
+			aria-pressed={saved}
+			id={shellIds.favoriteToggle}
+			onClick={() => library.toggle(file, document.getElementById("doc")?.querySelector("h1")?.textContent?.trim() || title)}
+			type="button"
+		>
+			{saved ? "Remove favorite" : "Save favorite"}
+		</button>
+	);
+}

package/src/client/react/FleetItemsContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+import type { FleetItemsProjection } from "#browser/views/FleetItemsProjection.ts";
+export const FleetItemsContext = createContext<FleetItemsProjection | undefined>(undefined);

package/src/client/react/FleetMain.tsx

@@ -0,0 +1,13 @@
+import { Option } from "effect";
+import type { ComponentProps } from "react";
+import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import { BoardMain } from "./BoardMain.tsx";
+import { FleetItemsContext } from "./FleetItemsContext.ts";
+export function FleetMain(props: ComponentProps<typeof BoardMain>) {
+	const query = useQuery(props.api.fleetItems.query(undefined, { timeToLive: 60_000 }), { keepPreviousData: true });
+	return (
+		<FleetItemsContext.Provider value={Option.getOrUndefined(query.data)}>
+			<BoardMain {...props} />
+		</FleetItemsContext.Provider>
+	);
+}

package/src/client/react/FormField.tsx

@@ -0,0 +1,72 @@
+import { type ReactNode, useId, useLayoutEffect, useRef } from "react";
+import { useField } from "@shivaedev/effect-form/react.ts";
+import type { Fields, Form, Name } from "@shivaedev/effect-form/shape.ts";
+
+type Control = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+export function FormField<TFields extends Fields, A, E, TRuntimeError>({
+	form,
+	name,
+	label,
+	maxLength,
+	required,
+	rows,
+	children,
+	autoComplete,
+	showErrors = true,
+}: {
+	readonly form: Form<TFields, A, E, TRuntimeError>;
+	readonly name: Name<TFields>;
+	readonly label: string;
+	readonly maxLength?: number;
+	readonly required?: boolean;
+	readonly rows?: number;
+	readonly children?: ReactNode;
+	readonly autoComplete?: string;
+	readonly showErrors?: boolean;
+}) {
+	const field = useField(form, name);
+	const ref = useRef<Control | null>(null);
+	const id = useId();
+	const value = typeof field.value === "string" ? field.value : "";
+	const validation = name === "author" && !value.trim() ? "Add your local author label." : field.error;
+	const error = showErrors ? validation : undefined;
+	useLayoutEffect(() => ref.current?.setCustomValidity(error ?? ""), [error]);
+	const props = {
+		"aria-describedby": `${id}-error`,
+		"aria-invalid": Boolean(error),
+		className: "w-full rounded-md border bg-background px-3 py-2 text-sm",
+		id,
+		name,
+		onBlur: field.onBlur,
+		ref: (element: Control | null) => {
+			ref.current = element;
+		},
+		required,
+		value,
+	};
+	function change(next: string) {
+		form.values.set({ ...form.values.value, [name]: next || (name === "supersedes" ? undefined : "") });
+		form.blur(name);
+	}
+	let control: ReactNode;
+	if (children) {
+		control = (
+			<select {...props} onChange={(event) => change(event.currentTarget.value)} onInput={(event) => change(event.currentTarget.value)}>
+				{children}
+			</select>
+		);
+	} else if (rows) {
+		control = <textarea {...props} maxLength={maxLength} onInput={(event) => change(event.currentTarget.value)} rows={rows} />;
+	} else {
+		control = <input {...props} autoComplete={autoComplete} maxLength={maxLength} onInput={(event) => change(event.currentTarget.value)} />;
+	}
+	return (
+		<label className="grid gap-2 text-sm" htmlFor={id}>
+			{label}
+			{control}
+			<span className="response-field-error text-destructive text-xs" hidden={!error} id={`${id}-error`}>
+				{error}
+			</span>
+		</label>
+	);
+}

package/src/client/react/GoalCriteria.tsx

@@ -0,0 +1,59 @@
+import { useId } from "react";
+import type { Document } from "#browser/document/schema.ts";
+import type { GoalsProjection } from "#browser/views/GoalsProjection.ts";
+import { CriterionClaims } from "./DocumentCriteria.tsx";
+import { GoalProgressSummary } from "./GoalProgressSummary.tsx";
+import { GoalWorkLink, GoalWorkStatus } from "./GoalWorkTable.tsx";
+import { type GoalWorkItem, targetsGoal } from "./goalWork.ts";
+import { keyed } from "./keyed.ts";
+
+interface Props {
+	readonly document: Document;
+	readonly items: readonly GoalWorkItem[] | undefined;
+	readonly progress: GoalsProjection["goals"][number]["criteria"] | undefined;
+}
+export function GoalCriteria({ document, items, progress }: Props) {
+	const headingId = useId();
+	const criteria = document.metadata.criteria ?? [];
+	return (
+		<section aria-labelledby={headingId} data-goal-section="criteria">
+			<h2 id={headingId}>Criteria and recorded evidence</h2>
+			{criteria.length === 0 && <p>No criteria recorded.</p>}
+			{keyed(criteria, (criterion) => criterion.id).map(({ key, index }) => (
+				<Criterion document={document} index={index} items={items} key={key} progress={progress} />
+			))}
+		</section>
+	);
+}
+function Criterion({ document, items, index, progress }: Props & { readonly index: number }) {
+	const criteria = document.metadata.criteria ?? [];
+	const criterion = criteria[index];
+	if (!criterion) {
+		return null;
+	}
+	const unique = criteria.filter((entry) => entry.id === criterion.id).length === 1;
+	const counts = progress?.find((entry) => entry.id === criterion.id)?.counts;
+	const work = items?.filter((item) => targetsGoal(item, document.identity ?? "", criterion.id));
+	return (
+		<section className="rounded-lg border p-4" id={unique ? `criterion-${criterion.id}` : undefined} tabIndex={-1}>
+			<h3 className="!mt-0">{criterion.text}</h3>
+			{counts && Object.values(counts).some((count) => count > 0) && <GoalProgressSummary counts={counts} />}
+			<LinkedItems items={work} />
+			<CriterionClaims document={document} id={criterion.id} valid={Boolean(document.identity) && document.unavailable.length === 0 && unique} />
+		</section>
+	);
+}
+function LinkedItems({ items }: { readonly items: readonly GoalWorkItem[] | undefined }) {
+	if (!items) {
+		return <p>Linked work unavailable.</p>;
+	}
+	return items.length === 0 ? null : (
+		<ul>
+			{items.map((item) => (
+				<li key={item.id}>
+					<GoalWorkLink item={item} /> <GoalWorkStatus item={item} />
+				</li>
+			))}
+		</ul>
+	);
+}

package/src/client/react/GoalOverviewCard.tsx

@@ -0,0 +1,48 @@
+import type { GoalsProjection } from "#browser/views/GoalsProjection.ts";
+import { GoalProgress } from "./GoalProgress.tsx";
+
+export function GoalOverviewCard({ goal }: { readonly goal: GoalsProjection["goals"][number] }) {
+	const criteria = goal.criteria.filter((criterion) => criterion.linked > 0);
+	return (
+		<article className="min-w-0 rounded-lg border border-border bg-card p-3" data-goal-id={goal.id}>
+			<h2 className="m-0 font-semibold text-sm [overflow-wrap:anywhere]">
+				<a href={`/_board/item/${encodeURIComponent(goal.id)}/`}>{goal.title}</a>
+			</h2>
+			{goal.nextAction ? (
+				<p className="m-0 mt-1 line-clamp-2 text-muted-foreground text-xs [overflow-wrap:anywhere]" title={goal.nextAction}>
+					{goal.nextAction}
+				</p>
+			) : null}
+			{goal.linked > 0 && <GoalProgress counts={goal.counts} title={goal.title} />}
+			{goal.openAsks > 0 && (
+				<p className="m-0 mt-2 text-muted-foreground text-xs">
+					{goal.openAsks} open {goal.openAsks === 1 ? "ask" : "asks"}
+				</p>
+			)}
+			{criteria.length > 0 && (
+				<ul aria-label={`Criteria for ${goal.title}`} className="m-0 mt-2 list-none space-y-1 p-0 text-xs">
+					{criteria.map((criterion) => (
+						<CriterionProgress criterion={criterion} goal={goal.id} key={criterion.id} />
+					))}
+				</ul>
+			)}
+		</article>
+	);
+}
+
+function CriterionProgress({ criterion, goal }: { readonly criterion: GoalsProjection["goals"][number]["criteria"][number]; readonly goal: string }) {
+	return (
+		<li className="flex min-w-0 items-center gap-2">
+			<a
+				className="min-w-0 flex-1 truncate text-muted-foreground"
+				href={`/_board/item/${encodeURIComponent(goal)}/#criterion-${encodeURIComponent(criterion.id)}`}
+				title={criterion.text}
+			>
+				{criterion.text}
+			</a>
+			<span className="shrink-0 text-muted-foreground tabular-nums" title={`${criterion.counts.done} of ${criterion.linked} done`}>
+				{criterion.counts.done}/{criterion.linked}
+			</span>
+		</li>
+	);
+}

package/src/client/react/GoalPage.tsx

@@ -0,0 +1,22 @@
+import { Option } from "effect";
+import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import type { Document } from "#browser/document/schema.ts";
+import { routeQueryOptions } from "#client/page/routeQuery.ts";
+import { GoalCriteria } from "./GoalCriteria.tsx";
+import { GoalWorkTable } from "./GoalWorkTable.tsx";
+import { targetsGoal } from "./goalWork.ts";
+import type { ShellApi } from "./ShellApi.ts";
+
+export function GoalPage({ api, document }: { readonly api: ShellApi; readonly document: Document }) {
+	const progress = useQuery(api.goals.query(undefined, routeQueryOptions), { keepPreviousData: true });
+	const data = Option.getOrUndefined(progress.data);
+	const goal = data?.goals.find((entry) => entry.id === document.identity) ?? data?.closedGoals.find((entry) => entry.id === document.identity);
+	const items = data?.items.filter((item) => targetsGoal(item, document.identity ?? ""));
+	return (
+		<div className="goal-page space-y-6">
+			<GoalCriteria document={document} items={items} progress={goal?.criteria} />
+			{items ? <GoalWorkTable items={items} /> : <p role="status">{progress.pending ? "Loading linked work…" : "Linked work unavailable."}</p>}
+			{Option.isSome(progress.cause) && <p role="status">Linked work refresh failed.</p>}
+		</div>
+	);
+}

package/src/client/react/GoalProgress.tsx

@@ -0,0 +1,45 @@
+import { SegmentedBar } from "#client/react/components/ui/SegmentedBar.tsx";
+export function GoalProgress({
+	counts,
+	title,
+	compact = false,
+}: {
+	readonly counts: Readonly<Record<string, number>>;
+	readonly title: string;
+	readonly compact?: boolean;
+}) {
+	const grouped = { done: 0, "in progress": 0, planned: 0 };
+	for (const [status, count] of Object.entries(counts)) {
+		if (["done", "completed", "accepted"].includes(status)) {
+			grouped.done += count;
+		} else if (
+			[
+				"active",
+				"running",
+				"in-progress",
+				"in progress",
+				"agent-working",
+				"blocked",
+				"needs-human",
+				"executing",
+				"reviewing",
+				"repairing",
+				"adopting",
+			].includes(status)
+		) {
+			grouped["in progress"] += count;
+		} else {
+			grouped.planned += count;
+		}
+	}
+	const total = grouped.done + grouped["in progress"] + grouped.planned;
+	const amount = compact ? `${grouped.done}/${total}` : `${grouped.done} of ${total} done`;
+	return (
+		<div className="mt-2 space-y-1">
+			<SegmentedBar counts={grouped} label={`${title}: ${grouped.done} of ${total} done`} />
+			<p className="m-0 text-muted-foreground text-xs tabular-nums" title={`${grouped.done} of ${total} done`}>
+				{amount}
+			</p>
+		</div>
+	);
+}