@shivaedev/work-board 0.13.0 → 0.14.1

package/src/client/react/SourceList.tsx

@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { type SourceLink, sourceGroups } from "#browser/document/sourceGroups.ts";
+import { StatusChip } from "#client/react/components/ui/StatusChip.tsx";
+
+export function SourceList({ links }: { readonly links: readonly SourceLink[] }) {
+	return (
+		<ul>
+			{sourceGroups(links).map((group) => (
+				<SourceGroup group={group} key={group.title} />
+			))}
+		</ul>
+	);
+}
+
+function SourceGroup({ group }: { readonly group: ReturnType<typeof sourceGroups>[number] }) {
+	const [open, setOpen] = useState(false);
+	const links = group.sources.map((link) => (
+		<li key={link.href}>
+			<Source link={link} />
+		</li>
+	));
+	if (group.sources.length === 1) {
+		return links;
+	}
+	return (
+		<li>
+			<details onToggle={(event) => setOpen(event.currentTarget.open)} open={open}>
+				<summary>{group.label}</summary>
+				{Boolean(open) && <ul>{links}</ul>}
+			</details>
+		</li>
+	);
+}
+
+function Source({ link }: { readonly link: SourceLink }) {
+	return (
+		<span className="inline-flex flex-wrap items-center gap-2">
+			<a href={link.href} title={link.label}>
+				{link.title ?? link.label}
+			</a>
+			<StatusChip status={link.status} />
+		</span>
+	);
+}

package/src/client/react/StartPage.tsx

@@ -1,7 +1,8 @@
 import type { StartProjection } from "#browser/views/remaining.ts";
+import { ReadingPanel } from "./ReadingPanel.tsx";
 export function StartPage({ data }: { readonly data: StartProjection }) {
 	return (
-		<article className="doc onboarding">
+		<ReadingPanel className="onboarding">
 			<h1>{data.empty ? "Start your local workspace" : "Project and report templates"}</h1>
 			<p>
 				Work Board reads Markdown files from your workspace folder. Use your editor or existing agent tools to create and update them; this viewer
@@ -21,10 +22,10 @@ export function StartPage({ data }: { readonly data: StartProjection }) {
 			</ol>
 			<p>
 				Unknown checks stay unknown. Add criterion evidence only after a real observation; a finished agent run is not verified acceptance. No project
-				content is created or marked seen by opening these templates.
+				content is created by opening these templates.
 			</p>
 			{data.templates.map((template) => (
-				<section className="start-template" key={template.file}>
+				<section className="start-template rounded-lg border p-4" key={template.file}>
 					<h2>{template.label}</h2>
 					<p>
 						Suggested file: <code>{template.file}</code>
@@ -32,10 +33,17 @@ export function StartPage({ data }: { readonly data: StartProjection }) {
 					<details data-key={`template:${template.file}`}>
 						<summary>Read and copy {template.label.toLowerCase()} Markdown</summary>
 						<label htmlFor={`template-${template.file}`}>{template.label} template Markdown</label>
-						<textarea defaultValue={template.source} id={`template-${template.file}`} readOnly rows={16} spellCheck={false} />
+						<textarea
+							className="mt-3 w-full rounded-md border bg-background p-3 font-mono text-sm"
+							defaultValue={template.source}
+							id={`template-${template.file}`}
+							readOnly
+							rows={16}
+							spellCheck={false}
+						/>
 					</details>
 				</section>
 			))}
-		</article>
+		</ReadingPanel>
 	);
 }

package/src/client/react/SystemFleetLane.tsx

@@ -0,0 +1,40 @@
+import type { FleetItemsProjection } from "#browser/views/FleetItemsProjection.ts";
+import { Badge } from "#client/react/components/ui/Badge.tsx";
+import { Card } from "#client/react/components/ui/Card.tsx";
+
+export function SystemFleetLane({ data }: { readonly data: FleetItemsProjection | undefined }) {
+	const items = data?.state === "ready" ? data.items.filter((item) => !["completed", "released"].includes(item.stage)) : undefined;
+	return (
+		<Card aria-label="Fleet work" className="min-w-0 space-y-4">
+			<h2 className="font-semibold text-lg">Fleet work</h2>
+			{items === undefined && <p role="status">{data?.state === "unavailable" ? `Fleet work unavailable. ${data.reason}` : "Loading Fleet work…"}</p>}
+			{items?.length === 0 && <p className="text-muted-foreground text-sm">No running or waiting Fleet work.</p>}
+			{items && items.length > 0 && (
+				<ul className="m-0 list-none divide-y p-0">
+					{items.map((item) => (
+						<FleetRow item={item} key={item.workId} />
+					))}
+				</ul>
+			)}
+		</Card>
+	);
+}
+
+type Item = Extract<FleetItemsProjection, { readonly state: "ready" }>["items"][number];
+function FleetRow({ item }: { readonly item: Item }) {
+	const title = item.document?.title ?? item.workId;
+	return (
+		<li className="flex min-w-0 flex-wrap items-center gap-2 py-3" data-fleet-id={item.workId}>
+			<a className="min-w-0 flex-1 basis-40 font-medium text-sm [overflow-wrap:anywhere]" href={`/_board/item/${encodeURIComponent(item.workId)}/`}>
+				{title}
+			</a>
+			<Badge variant="outline">{item.stage}</Badge>
+			{Boolean(item.attentionOwner) && <span className="text-muted-foreground text-xs">Waiting on {item.attentionOwner}</span>}
+			{Boolean(item.prUrl) && (
+				<a aria-label={`Pull request for ${title}`} className="text-sm underline" href={item.prUrl}>
+					PR ↗
+				</a>
+			)}
+		</li>
+	);
+}

package/src/client/react/SystemHealth.tsx

@@ -0,0 +1,64 @@
+import type { FleetHealth } from "#diagnostics/health.ts";
+import { ObservedTime } from "./diagnosticsValues.tsx";
+export function SystemHealth({ value, now }: { readonly value: FleetHealth; readonly now: number }) {
+	let freshness = "Current snapshot";
+	if (now < value.observedAt) {
+		freshness = "Publisher clock is ahead";
+	} else if (now - value.observedAt > value.staleAfterMs) {
+		freshness = "Stale snapshot — Fleet has not refreshed its health";
+	}
+
+	return (
+		<>
+			<p className="text-muted-foreground text-xs">{freshness}</p>
+			<dl className="grid gap-4 text-sm [&_dt]:text-muted-foreground">
+				<div>
+					<dt>Running / concurrency cap</dt>
+					<dd>
+						<strong>
+							{value.running} / {value.concurrency}
+						</strong>
+					</dd>
+				</div>
+				<div>
+					<dt>Queued</dt>
+					<dd>
+						<strong>{value.queued}</strong>
+					</dd>
+				</div>
+				{Object.entries(value.waiting).map(([owner, count]) => (
+					<div key={owner}>
+						<dt>Waiting on {owner}</dt>
+						<dd>
+							<strong>{count}</strong>
+						</dd>
+					</div>
+				))}
+				<div>
+					<dt>Last scheduler pass</dt>
+					<dd>
+						<ObservedTime at={value.lastSchedulerPass} />
+					</dd>
+				</div>
+				<div>
+					<dt>Last provider capacity rejection</dt>
+					<dd>
+						<CapacityRejection value={value.lastCapacityRejection} />
+					</dd>
+				</div>
+			</dl>
+		</>
+	);
+}
+
+function CapacityRejection({ value }: { readonly value: FleetHealth["lastCapacityRejection"] }) {
+	return value === null ? (
+		"None observed"
+	) : (
+		<>
+			{value.cause}
+			<br />
+			<ObservedTime at={value.at} />
+		</>
+	);
+}

package/src/client/react/SystemMain.tsx

@@ -0,0 +1,29 @@
+import { routeQueryOptions } from "#client/page/routeQuery.ts";
+import type { MainLocation } from "./mainLocation.ts";
+import { ProjectionFrame } from "./ProjectionFrame.tsx";
+import type { ShellApi } from "./ShellApi.ts";
+import { SystemPage } from "./SystemPage.tsx";
+import { useDiagnosticsPolling } from "./useDiagnosticsPolling.ts";
+
+export function SystemMain({
+	api,
+	onPage,
+	url,
+}: {
+	readonly api: ShellApi;
+	readonly onPage: (location: MainLocation) => void;
+	readonly url: string;
+}) {
+	const atom = api.diagnostics.query(undefined, routeQueryOptions);
+	useDiagnosticsPolling(atom, api.fleetItems.query(undefined, routeQueryOptions));
+	return (
+		<ProjectionFrame
+			atom={atom}
+			location={() => ({ file: "System", status: 200, view: "system" })}
+			onPage={onPage}
+			render={(data) => <SystemPage data={data} />}
+			route="system"
+			url={url}
+		/>
+	);
+}

package/src/client/react/SystemPage.tsx

@@ -0,0 +1,89 @@
+import { type ReactNode, useContext } from "react";
+import type { Observation } from "#browser/diagnostics/schema.ts";
+import type { DiagnosticsProjection } from "#browser/views/remaining.ts";
+import { Card as Surface } from "#client/react/components/ui/Card.tsx";
+import { DiagnosticsGithub, DiagnosticsWindows, ObservedTime } from "./diagnosticsValues.tsx";
+import { FleetItemsContext } from "./FleetItemsContext.ts";
+import { SystemFleetLane } from "./SystemFleetLane.tsx";
+import { SystemHealth } from "./SystemHealth.tsx";
+export function SystemPage({ data: { sources: data, now } }: { readonly data: DiagnosticsProjection }) {
+	const items = useContext(FleetItemsContext);
+	const fleet = data.fleet.state === "ready" ? { ...data.fleet, observedAt: data.fleet.value.observedAt } : data.fleet;
+	return (
+		<div className="space-y-6">
+			<h1 className="font-semibold text-2xl">System</h1>
+			<p>Agent usage and Fleet health. Refreshes every 15 seconds while this view is visible; Pause updates holds the current view.</p>
+			<div className="grid gap-4 lg:grid-cols-2">
+				<Card
+					attention={
+						data.codex.state === "ready"
+						&& [data.codex.value.primary, data.codex.value.secondary].some((window) => window !== null && window.usedPercent >= 90)
+					}
+					name="Codex"
+					render={(value) => <DiagnosticsWindows now={now} value={value} />}
+					source={data.codex}
+				/>
+				<Card
+					attention={data.github.state === "ready" && [data.github.value.core, data.github.value.graphql].some((window) => window.remaining === 0)}
+					name="GitHub"
+					render={(value) => <DiagnosticsGithub now={now} value={value} />}
+					source={data.github}
+				/>
+				<Card
+					attention={
+						fleet.state === "ready"
+						&& (fleet.value.running >= fleet.value.concurrency
+							|| Object.values(fleet.value.waiting).some((count) => count > 0)
+							|| now < fleet.value.observedAt)
+					}
+					name="Fleet"
+					render={(value) => <SystemHealth now={now} value={value} />}
+					source={fleet}
+					stale={fleet.state === "ready" && now - fleet.value.observedAt > fleet.value.staleAfterMs}
+				/>
+			</div>
+			<SystemFleetLane data={items} />
+		</div>
+	);
+}
+function Card<A>({
+	name,
+	source,
+	attention,
+	stale,
+	render,
+}: {
+	readonly name: string;
+	readonly source: Observation<A>;
+	readonly attention: boolean;
+	readonly stale?: boolean;
+	readonly render: (value: A) => ReactNode;
+}) {
+	let state: Observation<A>["state"] | "attention" | "stale" = source.state;
+	if (source.state === "ready" && attention) {
+		state = "attention";
+	}
+	if (source.state === "ready" && stale) {
+		state = "stale";
+	}
+	const label = { attention: "Needs attention", error: "Unavailable", "not-configured": "Not configured", ready: "Available", stale: "Stale" }[state];
+	return (
+		<Surface
+			aria-labelledby={`diagnostics-${name.toLowerCase()}`}
+			className="min-w-0 space-y-4 [overflow-wrap:anywhere]"
+			data-source={name.toLowerCase()}
+			data-state={state}
+		>
+			<header className="flex flex-wrap items-center justify-between gap-2">
+				<h2 className="font-semibold text-lg" id={`diagnostics-${name.toLowerCase()}`}>
+					{name}
+				</h2>
+				<span className="rounded-full bg-muted px-2 py-1 text-xs">{label}</span>
+			</header>
+			{source.state === "ready" ? render(source.value) : <p role="status">{source.cause}</p>}
+			<p className="text-muted-foreground text-xs">
+				Observed <ObservedTime at={source.observedAt} />
+			</p>
+		</Surface>
+	);
+}

package/src/client/react/TodayGoals.tsx

@@ -0,0 +1,52 @@
+import type { GoalsProjection } from "#browser/views/GoalsProjection.ts";
+import { GoalProgress } from "./GoalProgress.tsx";
+
+export function TodayGoals({ data }: { readonly data: GoalsProjection }) {
+	return data.goals.length > 0 ? (
+		<div className="space-y-3">
+			{data.goals.map((goal) => (
+				<GoalCard goal={goal} key={goal.id} />
+			))}
+		</div>
+	) : (
+		<p className="text-muted-foreground text-sm">No active goals.</p>
+	);
+}
+function GoalCard({ goal }: { readonly goal: GoalsProjection["goals"][number] }) {
+	return (
+		<article className="today-goal rounded-lg border border-border bg-card p-3" data-goal-id={goal.id}>
+			<h3 className="m-0 font-semibold text-sm">
+				<a href={`/_board/item/${encodeURIComponent(goal.id)}/`}>{goal.title}</a>
+			</h3>
+			{goal.nextAction ? (
+				<p className="m-0 mt-1 line-clamp-2 text-muted-foreground text-xs" data-goal-next-action="" title={goal.nextAction}>
+					{goal.nextAction}
+				</p>
+			) : null}
+			<GoalProgress counts={goal.counts} title={goal.title} />
+			<details className="mt-2">
+				<summary className="cursor-pointer text-muted-foreground text-xs">Criteria</summary>
+				<ul aria-label={`Criteria for ${goal.title}`} className="m-0 mt-3 list-none space-y-2 p-0 text-sm">
+					{goal.criteria.map((criterion) => (
+						<CriterionRow criterion={criterion} goal={goal.id} key={criterion.id} />
+					))}
+				</ul>
+			</details>
+		</article>
+	);
+}
+function CriterionRow({ criterion, goal }: { readonly criterion: GoalsProjection["goals"][number]["criteria"][number]; readonly goal: string }) {
+	return (
+		<li className="flex items-start gap-2">
+			<span aria-label={criterion.evidence > 0 ? "Evidence recorded" : "No evidence recorded"} className="text-muted-foreground" role="img">
+				{criterion.evidence > 0 ? "☑" : "☐"}
+			</span>
+			<div className="min-w-0">
+				<a href={`/_board/item/${encodeURIComponent(goal)}/#criterion-${encodeURIComponent(criterion.id)}`}>{criterion.text}</a>
+				<p className="m-0 text-muted-foreground text-xs tabular-nums">
+					{criterion.linked} linked · {criterion.evidence} with evidence
+				</p>
+			</div>
+		</li>
+	);
+}

package/src/client/react/TodayNeeds.tsx

@@ -0,0 +1,54 @@
+import type { InboxProjection } from "#browser/views/schema.ts";
+import { StatusChip } from "#client/react/components/ui/StatusChip.tsx";
+import { Age } from "./Age.tsx";
+import type { ShellApi } from "./ShellApi.ts";
+import { TodayOptions } from "./TodayOptions.tsx";
+
+type Item = InboxProjection["you"][number];
+export function TodayNeeds({ api, data }: { readonly api: ShellApi; readonly data: InboxProjection }) {
+	if (!data.complete) {
+		return <p role="status">Workspace incomplete. Needs-you membership and counts are unavailable.</p>;
+	}
+	return data.you.length > 0 ? (
+		<ul aria-label="Needs you" className="m-0 list-none divide-y rounded-lg border border-border p-0">
+			{data.you.map((item) => (
+				<li className="h-12 max-h-12" data-attention-id={item.id} key={`${item.file}:${item.href}`}>
+					<TodayRow api={api} item={item} />
+				</li>
+			))}
+		</ul>
+	) : (
+		<p className="text-muted-foreground text-sm">All quiet — nothing needs you.</p>
+	);
+}
+
+function TodayRow({ api, item }: { readonly api: ShellApi; readonly item: Item }) {
+	return (
+		<div className="today-row flex h-full min-w-0 items-center gap-2 px-2" data-attention-row>
+			<StatusChip
+				aria-label="Needs you"
+				className="shrink-0 max-sm:size-6 max-sm:justify-center max-sm:gap-0 max-sm:px-1 max-sm:text-[0px] max-sm:[&_svg]:shrink-0"
+				status="needs-you"
+			/>
+			<div className="min-w-0 flex-1">
+				<div className="flex min-w-0 items-baseline gap-2">
+					<a className="truncate font-medium text-sm" href={item.href} title={item.title}>
+						{item.title}
+					</a>
+					<span className="shrink-0 font-mono text-[10px] text-muted-foreground max-sm:hidden">{item.id}</span>
+				</div>
+				<p className="m-0 truncate text-muted-foreground text-xs" title={item.problem ?? item.reason}>
+					<span className="inline-block max-w-24 truncate align-bottom font-mono text-[10px] sm:hidden" title={item.id}>
+						{item.id}
+					</span>
+					<span className="sm:hidden"> · </span>
+					{item.problem ?? item.reason}
+				</p>
+			</div>
+			<span className="shrink-0 text-[10px] text-muted-foreground tabular-nums">
+				{item.modified === undefined ? "Age ?" : <Age modified={item.modified} short />}
+			</span>
+			<TodayOptions api={api} item={item} />
+		</div>
+	);
+}

package/src/client/react/TodayOptions.tsx

@@ -0,0 +1,116 @@
+import { RegistryContext } from "@effect/atom-react";
+import { Effect, Option } from "effect";
+import * as Atom from "effect/reactivity/Atom";
+import { useContext, useMemo, useState } from "react";
+import { useAction, useQuery } from "@shivaedev/effect-react/result-state.ts";
+import type { Document, DocumentRequest } from "#browser/document/schema.ts";
+import { answerBody } from "#browser/responses/answerBody.ts";
+import { optionLabel } from "#browser/responses/cardContext.ts";
+import type { InboxProjection } from "#browser/views/schema.ts";
+import { documentQuery, navigationQuery, routeQueryOptions } from "#client/page/routeQuery.ts";
+import { Button } from "#client/react/components/ui/Button.tsx";
+import { Popover } from "#client/react/components/ui/Popover.tsx";
+import { authorLabel } from "#client/responses/authorLabel.ts";
+import { fileUrl } from "#files/url.ts";
+import { createResponse } from "./createResponse.ts";
+import type { ShellApi } from "./ShellApi.ts";
+
+export function TodayOptions({ api, item }: { readonly api: ShellApi; readonly item: InboxProjection["you"][number] }) {
+	const query = useQuery(documentQuery(api, fileUrl(item.file)), { keepPreviousData: true });
+	const data = Option.getOrUndefined(query.data);
+	const requestId = new URL(item.href, "http://127.0.0.1").searchParams.get("request");
+	const request = data?.requests.find((entry) => entry.id === requestId && entry.open);
+	return data
+		&& !item.problem
+		&& request?.preview
+		&& !request.unavailable
+		&& !request.promptUnavailable
+		&& request.prompts?.length === 1
+		&& request.prompts[0]?.mode === "one" ? (
+		<Popover label={`Answer ${item.title}`} trigger="Answer" triggerClassName="h-8 w-auto px-1 text-xs">
+			<a className="mb-3 block text-xs" href={item.href}>
+				Open full question
+			</a>
+			<InlineOptions api={api} document={data} key={request.preview.reviewedRevision} request={request} />
+		</Popover>
+	) : (
+		<a aria-label={`Answer ${item.title}`} className="shrink-0 text-xs" href={item.href}>
+			Answer
+		</a>
+	);
+}
+
+function InlineOptions({ api, document: data, request }: { readonly api: ShellApi; readonly document: Document; readonly request: DocumentRequest }) {
+	const registry = useContext(RegistryContext);
+	const [status, setStatus] = useState("");
+	const [outcome, setOutcome] = useState("");
+	const [label] = useState(() => authorLabel(() => localStorage, document.documentElement.dataset.workspace));
+	const [author, setAuthor] = useState(() => label.read("") || "maintainer");
+	const actionAtom = useMemo(
+		() =>
+			Atom.fn<string>()((choice) => {
+				const preview = request.preview;
+				const prompt = request.prompts?.[0];
+				if (!(preview && prompt && author.trim())) {
+					return Effect.fail("Add your local author label.");
+				}
+				const answers = [{ prompt: prompt.id, selected: [choice], text: "" }];
+				const submission = {
+					answers,
+					author: author.trim(),
+					body: answerBody([prompt], answers, ""),
+					id: `response.${crypto.randomUUID()}`,
+					question: preview.id,
+					revision: preview.reviewedRevision,
+					type: "answer" as const,
+				};
+				return createResponse(preview, submission, () => submission, setOutcome, setStatus).pipe(
+					Effect.tap(() =>
+						Effect.sync(() => {
+							label.save(author);
+							registry.refresh(api.inbox.query(undefined, routeQueryOptions));
+							registry.refresh(navigationQuery(api));
+							registry.refresh(documentQuery(api, fileUrl(data.file)));
+						}),
+					),
+				);
+			}),
+		[api, registry, request, author, data.file, label.save],
+	);
+	const action = useAction(actionAtom);
+	const prompt = request.prompts?.[0];
+	return (
+		<fieldset aria-label={`Options for ${data.identity}`} className="m-0 min-w-0 space-y-2 border-0 px-2 pb-2">
+			<div className="flex flex-wrap gap-2">
+				{prompt?.options.map((option, index) => {
+					const text = data.metadata.options?.[index]?.label ?? optionLabel(option.id, option.source, request.preview?.reason ?? "");
+					return (
+						<Button
+							disabled={!(data.writable && author.trim()) || action.pending || outcome === "pending" || outcome === "saved"}
+							key={option.id}
+							onClick={() => action.dispatch(option.id)}
+							size="sm"
+							variant="outline"
+						>
+							{text}
+							{data.metadata.recommended === text && " · Recommended"}
+						</Button>
+					);
+				})}
+			</div>
+			<details className="text-muted-foreground text-xs">
+				<summary className="cursor-pointer">Answer as {author || "…"}</summary>
+				<label>
+					Local author label{" "}
+					<input className="rounded border px-2 py-1" maxLength={200} onChange={(event) => setAuthor(event.currentTarget.value)} value={author} />
+				</label>
+			</details>
+			{!data.writable && <p className="m-0 text-muted-foreground text-xs">Read-only. Enable responses to record an answer.</p>}
+			{Boolean(status) && (
+				<p className="m-0 text-xs" role="status">
+					{status}
+				</p>
+			)}
+		</fieldset>
+	);
+}

package/src/client/react/TodayPage.tsx

@@ -0,0 +1,69 @@
+import { Option } from "effect";
+import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import type { InboxProjection } from "#browser/views/schema.ts";
+import { navigationQuery, routeQueryOptions } from "#client/page/routeQuery.ts";
+import { fileUrl } from "#files/url.ts";
+import { inProgressItems } from "./inProgressItems.ts";
+import type { ShellApi } from "./ShellApi.ts";
+import { TodayGoals } from "./TodayGoals.tsx";
+import { TodayNeeds } from "./TodayNeeds.tsx";
+import { TodayProgress } from "./TodayProgress.tsx";
+
+const todayIds = { goals: "today-goals", needs: "needs-you", progress: "in-progress" };
+
+export function TodayPage({ api, data }: { readonly api: ShellApi; readonly data: InboxProjection }) {
+	const query = useQuery(api.goals.query(undefined, routeQueryOptions), { keepPreviousData: true });
+	const goals = Option.getOrUndefined(query.data);
+	const fleetQuery = useQuery(api.fleetItems.query(undefined, routeQueryOptions), { keepPreviousData: true });
+	const fleet = Option.getOrUndefined(fleetQuery.data);
+	const progress = inProgressItems(fleet);
+	const navigation = useQuery(navigationQuery(api), { keepPreviousData: true });
+	const home = Option.getOrUndefined(navigation.data)?.home;
+	return (
+		<div className="today-page min-w-0 space-y-3 md:space-y-6">
+			<header className="flex items-center justify-between gap-3">
+				<h1 className="m-0 font-semibold text-2xl">Today</h1>
+				{home !== undefined && (
+					<a className="text-sm" href={fileUrl(home.file)}>
+						Workspace notes
+					</a>
+				)}
+			</header>
+			<nav aria-label="Today summary" className="today-strip flex items-center gap-1 whitespace-nowrap text-xs tabular-nums sm:gap-2 sm:text-sm">
+				<a href={`#${todayIds.needs}`}>{data.complete ? data.you.length : "?"} need you</a>
+				<span aria-hidden="true">·</span>
+				<a href={`#${todayIds.progress}`}>{progress?.length ?? "?"} in progress</a>
+				<span aria-hidden="true">·</span>
+				<a href={`#${todayIds.goals}`}>{goals?.goals.length ?? "?"} active goals</a>
+			</nav>
+			<div className="today-grid grid min-w-0 gap-6 xl:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
+				<div className="min-w-0 space-y-6">
+					<NeedsYou api={api} data={data} />
+					<section className="min-w-0" id={todayIds.progress}>
+						<h2 className="mt-0 mb-3 font-semibold text-lg">In progress</h2>
+						<TodayProgress data={fleet} failed={Option.isSome(fleetQuery.cause)} />
+					</section>
+				</div>
+				<section className="min-w-0" id={todayIds.goals}>
+					<h2 className="mt-0 mb-3 font-semibold text-lg">Goals</h2>
+					{goals ? <TodayGoals data={goals} /> : <p role="status">{Option.isSome(query.cause) ? "Goals unavailable." : "Loading goals…"}</p>}
+					{goals && Option.isSome(query.cause) && <p role="status">Goal refresh failed. Displayed goals are retained.</p>}
+				</section>
+			</div>
+		</div>
+	);
+}
+
+function NeedsYou({ api, data }: { readonly api: ShellApi; readonly data: InboxProjection }) {
+	return (
+		<section className="min-w-0" id={todayIds.needs}>
+			<h2 className="mt-0 mb-3 font-semibold text-lg">Needs you</h2>
+			<TodayNeeds api={api} data={data} />
+			{data.complete && data.you.length === 0 && (
+				<a className="text-sm" href="/_board/start">
+					Getting started
+				</a>
+			)}
+		</section>
+	);
+}

package/src/client/react/TodayProgress.tsx

@@ -0,0 +1,58 @@
+import type { FleetItemsProjection } from "#browser/views/FleetItemsProjection.ts";
+import { Badge } from "#client/react/components/ui/Badge.tsx";
+import { inProgressItems } from "./inProgressItems.ts";
+
+export function TodayProgress({ data, failed }: { readonly data: FleetItemsProjection | undefined; readonly failed: boolean }) {
+	const items = inProgressItems(data);
+	return (
+		<div className="space-y-3">
+			{items === undefined && (
+				<p className="text-muted-foreground text-sm" role="status">
+					{unavailable(data, failed)}
+				</p>
+			)}
+			{items?.length === 0 && <p className="text-muted-foreground text-sm">Fleet holds no work in progress.</p>}
+			{items !== undefined && items.length > 0 && (
+				<ul aria-label="In progress" className="m-0 list-none divide-y rounded-lg border border-border p-0">
+					{items.slice(0, 8).map((item) => (
+						<ProgressRow item={item} key={item.workId} />
+					))}
+				</ul>
+			)}
+			{items !== undefined && failed && (
+				<p className="text-sm" role="status">
+					Fleet refresh failed. Displayed work is retained.
+				</p>
+			)}
+			<a className="inline-block text-sm" href="/_board/work">
+				All in Now →
+			</a>
+		</div>
+	);
+}
+
+function ProgressRow({ item }: { readonly item: NonNullable<ReturnType<typeof inProgressItems>>[number] }) {
+	const title = item.document?.title ?? item.workId;
+	return (
+		<li className="flex h-10 min-w-0 items-center gap-2 px-2" data-progress-id={item.workId}>
+			<a className="min-w-0 flex-1 truncate text-sm" href={`/_board/item/${encodeURIComponent(item.workId)}/`} title={title}>
+				{title}
+			</a>
+			<Badge className="shrink-0 border-agent-working/25 bg-agent-working/10 text-agent-working text-xs" variant="outline">
+				Fleet · {item.stage}
+			</Badge>
+			{item.prUrl ? (
+				<a aria-label={`Pull request for ${title}`} className="shrink-0 text-xs" href={item.prUrl}>
+					PR ↗
+				</a>
+			) : null}
+		</li>
+	);
+}
+
+function unavailable(data: FleetItemsProjection | undefined, failed: boolean) {
+	if (data?.state === "unavailable") {
+		return `Fleet unavailable. ${data.reason}`;
+	}
+	return failed ? "Fleet work unavailable." : "Loading Fleet work…";
+}