@shivaedev/work-board 0.13.0 → 0.14.1

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

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { LibraryContext } from "./readingLibrary.ts";
+import { LibraryContext } from "#client/react/LibraryContext.ts";
 import { shellIds } from "./shellIds.ts";
 export function Favorite({ file, title }: { readonly file: string; readonly title: string }) {
 	const library = useContext(LibraryContext);

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

@@ -12,6 +12,7 @@ export function FormField<TFields extends Fields, A, E, TRuntimeError>({
 	rows,
 	children,
 	autoComplete,
+	showErrors = true,
 }: {
 	readonly form: Form<TFields, A, E, TRuntimeError>;
 	readonly name: Name<TFields>;
@@ -21,16 +22,19 @@ export function FormField<TFields extends Fields, A, E, TRuntimeError>({
 	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 error = name === "author" && !value.trim() ? "Add your local author label." : field.error;
+	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,
@@ -57,10 +61,10 @@ export function FormField<TFields extends Fields, A, E, TRuntimeError>({
 		control = <input {...props} autoComplete={autoComplete} maxLength={maxLength} onInput={(event) => change(event.currentTarget.value)} />;
 	}
 	return (
-		<label htmlFor={id}>
+		<label className="grid gap-2 text-sm" htmlFor={id}>
 			{label}
 			{control}
-			<span className="response-field-error" hidden={!error} id={`${id}-error`}>
+			<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>
+	);
+}

package/src/client/react/GoalProgressHeader.tsx

@@ -0,0 +1,35 @@
+import { Option } from "effect";
+import { useId } from "react";
+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 { GoalProgressSummary } from "./GoalProgressSummary.tsx";
+import type { ShellApi } from "./ShellApi.ts";
+
+export function GoalProgressHeader({ api, document }: { readonly api: ShellApi; readonly document: Document }) {
+	const headingId = useId();
+	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);
+	return (
+		<section aria-labelledby={headingId} className="document-lead col-span-full max-w-[68ch] space-y-4" data-goal-section="progress">
+			<h2 className="font-semibold text-xl" id={headingId}>
+				Progress
+			</h2>
+			{goal ? (
+				<>
+					<p>
+						{goal.linked} linked items ·{" "}
+						<span data-goal-open-asks>
+							{goal.openAsks} open {goal.openAsks === 1 ? "ask" : "asks"}
+						</span>
+					</p>
+					<GoalProgressSummary bar counts={goal.counts} />
+				</>
+			) : (
+				<p role="status">{progress.pending ? "Loading goal progress…" : "Progress is available for uniquely identified projects."}</p>
+			)}
+			{Option.isSome(progress.cause) && <p role="status">Goal progress refresh failed.</p>}
+		</section>
+	);
+}

package/src/client/react/GoalProgressSummary.tsx

@@ -0,0 +1,13 @@
+import { SegmentedBar } from "#client/react/components/ui/SegmentedBar.tsx";
+
+export function GoalProgressSummary({ counts, bar = false }: { readonly counts: Readonly<Record<string, number>>; readonly bar?: boolean }) {
+	return bar ? (
+		<SegmentedBar counts={counts} label="Linked work progress" size="large" />
+	) : (
+		<p className="text-muted-foreground text-sm" data-criterion-progress>
+			{Object.entries(counts)
+				.map(([status, count]) => `${count} ${status}`)
+				.join(" · ")}
+		</p>
+	);
+}

package/src/client/react/GoalWorkTable.tsx

@@ -0,0 +1,82 @@
+import { useContext, useId } from "react";
+import { goalState } from "#browser/views/goalWorkState.ts";
+import { StatusChip } from "#client/react/components/ui/StatusChip.tsx";
+import { FleetItemsContext } from "./FleetItemsContext.ts";
+import { type GoalWorkItem, goalGroup, goalGroups, goalRun } from "./goalWork.ts";
+
+export function GoalWorkTable({ items }: { readonly items: readonly GoalWorkItem[] }) {
+	const headingId = useId();
+	const fleet = useContext(FleetItemsContext);
+	return (
+		<section aria-labelledby={headingId} data-goal-section="work">
+			<h2 id={headingId}>Linked work</h2>
+			{goalGroups.map((group) => {
+				const work = items.filter((item) => goalGroup(item, goalRun(item, fleet)) === group);
+				if (work.length === 0) {
+					return null;
+				}
+				const table = <WorkGroup group={group} items={work} key={group} />;
+				return group === "Done" ? (
+					<details data-goal-group={group} key={group}>
+						<summary>Done ({work.length})</summary>
+						{table}
+					</details>
+				) : (
+					<section data-goal-group={group} key={group}>
+						<h3>
+							{group} ({work.length})
+						</h3>
+						{table}
+					</section>
+				);
+			})}
+		</section>
+	);
+}
+function WorkGroup({ group, items }: { readonly group: string; readonly items: readonly GoalWorkItem[] }) {
+	return (
+		<div className="min-w-0 overflow-x-auto">
+			<table className="w-full text-sm">
+				<caption className="sr-only">{group} linked work</caption>
+				<thead>
+					<tr>
+						<th scope="col">Work</th>
+						<th scope="col">State</th>
+						<th className="whitespace-nowrap" scope="col">
+							PR
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					{items.map((item) => (
+						<WorkRow item={item} key={item.id} />
+					))}
+				</tbody>
+			</table>
+		</div>
+	);
+}
+function WorkRow({ item }: { readonly item: GoalWorkItem }) {
+	const fleet = useContext(FleetItemsContext);
+	const run = goalRun(item, fleet);
+	return (
+		<tr data-goal-item={item.id}>
+			<th scope="row">
+				<GoalWorkLink item={item} />
+			</th>
+			<td>
+				<GoalWorkStatus item={item} />
+			</td>
+			<td className="whitespace-nowrap">{run?.prUrl ? <a href={run.prUrl}>PR</a> : null}</td>
+		</tr>
+	);
+}
+export function GoalWorkLink({ item }: { readonly item: GoalWorkItem }) {
+	return <a href={`/_board/item/${encodeURIComponent(item.id)}/`}>{item.title}</a>;
+}
+export function GoalWorkStatus({ item }: { readonly item: GoalWorkItem }) {
+	const fleet = useContext(FleetItemsContext);
+	const run = goalRun(item, fleet);
+	const state = goalState(item.metadata.status, run?.stage);
+	return state ? <StatusChip className="whitespace-nowrap" status={state} /> : null;
+}