@shivaedev/work-board 0.12.0 → 0.14.0

package/src/client/react/SearchDialog.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { Modal } from "#client/react/Modal.tsx";
+import { SearchPalette } from "#client/react/SearchPalette.tsx";
+import type { ShellApi } from "#client/react/ShellApi.ts";
+import { shellIds } from "#client/react/shellIds.ts";
+import type { AppearanceControls } from "#client/react/useAppearance.ts";
+
+export function SearchDialog({
+	api,
+	open,
+	close,
+	appearance,
+	toggleSidebar,
+	returnFocus,
+}: {
+	readonly api: ShellApi;
+	readonly open: boolean;
+	readonly close: () => void;
+	readonly appearance: AppearanceControls;
+	readonly toggleSidebar: () => void;
+	readonly returnFocus?: HTMLElement | undefined;
+}) {
+	const [input, setInput] = useState("");
+	return (
+		<Modal
+			className="command-palette"
+			close={close}
+			focus="search-query"
+			id={shellIds.searchDialog}
+			open={open}
+			returnFocus={returnFocus}
+			title="search-title"
+		>
+			<div className="search-header">
+				<h2 id={shellIds.searchTitle}>Find work</h2>
+				<button aria-label="Close search" id={shellIds.searchClose} onClick={() => close()} type="button">
+					Close
+				</button>
+			</div>
+			{open ? (
+				<SearchPalette api={api} appearance={appearance} close={close} input={input} setInput={setInput} toggleSidebar={toggleSidebar} />
+			) : null}
+		</Modal>
+	);
+}

package/src/client/react/SearchPalette.tsx

@@ -0,0 +1,129 @@
+import { Option } from "effect";
+import { useEffect, useRef, useState } from "react";
+import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import { SearchResults } from "#client/react/SearchResults.tsx";
+import type { ShellApi } from "#client/react/ShellApi.ts";
+import { matchingCommands, type SearchItem } from "#client/react/searchCommands.ts";
+import { searchStatus } from "#client/react/searchStatus.ts";
+import { shellIds } from "#client/react/shellIds.ts";
+import type { AppearanceControls } from "#client/react/useAppearance.ts";
+import { KeyboardHints } from "./KeyboardHints.tsx";
+
+export function SearchPalette({
+	api,
+	close,
+	appearance,
+	toggleSidebar,
+	input,
+	setInput,
+}: {
+	readonly api: ShellApi;
+	readonly close: () => void;
+	readonly appearance: AppearanceControls;
+	readonly toggleSidebar: () => void;
+	readonly input: string;
+	readonly setInput: (input: string) => void;
+}) {
+	const [text, setText] = useState(() => input.trim());
+	const [selected, setSelected] = useState(0);
+	const ref = useRef<HTMLInputElement>(null);
+	const query = useQuery(api.search.query({ query: text }));
+	const data = Option.getOrUndefined(query.data);
+	const goals = useQuery(api.goals.query());
+	const commands = matchingCommands(Option.getOrUndefined(goals.data)?.goals ?? [], text);
+	const editing = input.trim() !== text;
+	const destinations = new Set<string>();
+	const items = editing
+		? []
+		: [...commands, ...(text && data ? data.results : [])].filter((item: SearchItem) => {
+				const destination = item.href ?? item.command;
+				if (!destination) {
+					return true;
+				}
+				if (destinations.has(destination)) {
+					return false;
+				}
+				destinations.add(destination);
+				return true;
+			});
+	useEffect(() => {
+		setSelected((current) => Math.min(current, Math.max(0, items.length - 1)));
+	}, [items.length]);
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setText(input.trim());
+			setSelected(0);
+		}, 150);
+		return () => clearTimeout(timer);
+	}, [input]);
+	useEffect(() => {
+		document.getElementById(`search-result-${selected}`)?.scrollIntoView({ block: "nearest" });
+	}, [selected]);
+	function activate(item: SearchItem) {
+		activateAppearance(item.command, appearance, toggleSidebar);
+		if (!item.command) {
+			ref.current?.closest("dialog")?.close("navigate");
+		}
+		close();
+	}
+	const status = searchStatus(text, query.pending || editing, Option.isSome(query.cause), data);
+	return (
+		<>
+			<form
+				id={shellIds.searchForm}
+				onSubmit={(event) => {
+					event.preventDefault();
+					setText(input.trim());
+					query.refresh();
+				}}
+			>
+				<label htmlFor="search-query">Search work or go to a view</label>
+				<input
+					aria-activedescendant={items[selected] ? `search-result-${selected}` : undefined}
+					aria-autocomplete="list"
+					aria-controls="search-results"
+					aria-expanded="true"
+					autoComplete="off"
+					id={shellIds.searchQuery}
+					maxLength={200}
+					onInput={(event) => setInput(event.currentTarget.value)}
+					onKeyDown={(event) => {
+						if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+							event.preventDefault();
+							setSelected((current) => (items.length > 0 ? (current + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length : 0));
+						}
+						if (event.key === "Enter" && items[selected]) {
+							event.preventDefault();
+							document.getElementById(`search-result-${selected}`)?.click();
+						}
+					}}
+					ref={ref}
+					role="combobox"
+					type="search"
+					value={input}
+				/>
+				<button type="submit">Search</button>
+			</form>
+			<KeyboardHints>
+				<p className="search-help">↑/↓ to choose · Enter to open · Escape to close</p>
+			</KeyboardHints>
+			<p className="mx-4 my-2 text-muted-foreground text-xs">Use records: to include Fleet records.</p>
+			<p id={shellIds.searchStatus} role="status">
+				{status}
+			</p>
+			<SearchResults activate={activate} items={items} selected={selected} />
+		</>
+	);
+}
+
+function activateAppearance(command: string | undefined, appearance: AppearanceControls, toggleSidebar: () => void) {
+	if (command === "sidebar-toggle") {
+		toggleSidebar();
+	}
+	if (command === "density") {
+		appearance.change({ density: appearance.density === "compact" ? "comfortable" : "compact" });
+	}
+	if (command === "theme") {
+		appearance.change({ theme: appearance.theme === "dark" ? "light" : "dark" });
+	}
+}

package/src/client/react/SearchResults.tsx

@@ -0,0 +1,51 @@
+import { StatusChip } from "#client/react/components/ui/StatusChip.tsx";
+import type { SearchItem } from "./searchCommands.ts";
+import { shellIds } from "./shellIds.ts";
+export function SearchResults({
+	items,
+	selected,
+	activate,
+}: {
+	readonly items: readonly SearchItem[];
+	readonly selected: number;
+	readonly activate: (item: SearchItem) => void;
+}) {
+	const occurrences = new Map<string, number>();
+	function resultKey(item: SearchItem) {
+		const identity = JSON.stringify([item.command, item.href, item.file, item.id, item.kind, item.line, item.snippet, item.title]);
+		const occurrence = occurrences.get(identity) ?? 0;
+		occurrences.set(identity, occurrence + 1);
+		return `${identity}:${occurrence}`;
+	}
+	function choose(event: React.MouseEvent<HTMLAnchorElement>, item: SearchItem) {
+		if (item.command) {
+			event.preventDefault();
+		}
+		activate(item);
+	}
+	return (
+		<div aria-label="Search results" id={shellIds.searchResults} role="listbox">
+			{items.map((item, index) => (
+				<div key={resultKey(item)} role="presentation">
+					<a
+						aria-selected={index === selected}
+						data-command={item.command}
+						href={item.href ?? "#"}
+						id={`search-result-${index}`}
+						onClick={(event) => choose(event, item)}
+						role="option"
+					>
+						<strong>{item.title}</strong>
+						<small>
+							{item.itemKind ?? item.kind}
+							{Boolean(item.id) && <code className="font-mono">{item.id}</code>}
+							{Boolean(item.status) && <StatusChip status={item.status} />}
+							{!item.id && item.file ? ` · ${item.file}${item.line ? `:${item.line}` : ""}` : ""}
+						</small>
+						{Boolean(item.snippet) && <p>{item.snippet}</p>}
+					</a>
+				</div>
+			))}
+		</div>
+	);
+}

package/src/client/react/SettingsPopover.tsx

@@ -0,0 +1,43 @@
+import { Settings } from "lucide-react";
+import type { ReactNode } from "react";
+import { Popover } from "#client/react/components/ui/Popover.tsx";
+import { shellIds } from "./shellIds.ts";
+import type { AppearanceControls } from "./useAppearance.ts";
+export function SettingsPopover({ appearance, updates }: { readonly appearance: AppearanceControls; readonly updates: ReactNode }) {
+	return (
+		<Popover label="Settings" trigger={<Settings aria-hidden="true" />} triggerId="settings-open">
+			<fieldset aria-label="Reading preferences" className="m-0 grid gap-4 border-0 p-0">
+				<legend className="mb-3 font-semibold">Settings</legend>
+				<label className="grid gap-1" htmlFor={shellIds.theme}>
+					Theme
+					<select
+						className="h-9 rounded-md border bg-background px-2 text-foreground"
+						id={shellIds.theme}
+						onChange={(event) => appearance.change({ theme: event.target.value })}
+						value={appearance.theme}
+					>
+						<option value="system">System</option>
+						<option value="light">Light</option>
+						<option value="dark">Dark</option>
+					</select>
+				</label>
+				<label className="grid gap-1" htmlFor={shellIds.density}>
+					Density
+					<select
+						className="h-9 rounded-md border bg-background px-2 text-foreground"
+						id={shellIds.density}
+						onChange={(event) => appearance.change({ density: event.target.value })}
+						value={appearance.density}
+					>
+						<option value="comfortable">Comfortable</option>
+						<option value="compact">Compact</option>
+					</select>
+				</label>
+				{updates}
+				<span className="text-muted-foreground text-xs empty:hidden" id={shellIds.preferenceStatus} role="status">
+					{appearance.notice}
+				</span>
+			</fieldset>
+		</Popover>
+	);
+}

package/src/client/react/ShellApi.ts

@@ -1,6 +1,17 @@
 import type { BrowserClient } from "#client/client.ts";
 export interface ShellApi {
+	readonly board: Pick<BrowserClient["api"]["board"], "query">;
+	readonly diagnostics: Pick<BrowserClient["api"]["diagnostics"], "query">;
 	readonly document: Pick<BrowserClient["api"]["document"], "query">;
+	readonly fleetItems: Pick<BrowserClient["api"]["fleetItems"], "query">;
+	readonly goals: Pick<BrowserClient["api"]["goals"], "query">;
+	readonly handoff: Pick<BrowserClient["api"]["handoff"], "query">;
+	readonly inbox: Pick<BrowserClient["api"]["inbox"], "query">;
+	readonly library: Pick<BrowserClient["api"]["library"], "query">;
 	readonly navigation: Pick<BrowserClient["api"]["navigation"], "query">;
-	readonly page: Pick<BrowserClient["api"]["page"], "query">;
+	readonly respond: Pick<BrowserClient["api"]["respond"], "query">;
+	readonly result: Pick<BrowserClient["api"]["result"], "query">;
+	readonly search: Pick<BrowserClient["api"]["search"], "query">;
+	readonly start: Pick<BrowserClient["api"]["start"], "query">;
+	readonly work: Pick<BrowserClient["api"]["work"], "query">;
 }

package/src/client/react/Sidebar.tsx

@@ -1,49 +1,122 @@
-import type { Navigation } from "#browser/navigation/schema.ts";
-import { InboxCount } from "./Header.tsx";
-import type { MainLocation } from "./legacyPage.ts";
-import { NavigationTree } from "./NavigationTree.tsx";
-import { shellIds } from "./shellIds.ts";
+import { Option } from "effect";
+import { PanelsTopLeft } from "lucide-react";
+import { useContext, useEffect } from "react";
+import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import type { Navigation } from "#browser/Navigation.ts";
+import { Badge } from "#client/react/components/ui/Badge.tsx";
+import { buttonVariants } from "#client/react/components/ui/buttonVariants.ts";
+import { GoalProgress } from "#client/react/GoalProgress.tsx";
+import { InboxCount } from "#client/react/Header.tsx";
+import { cn } from "#client/react/lib/cn.ts";
+import type { MainLocation } from "#client/react/mainLocation.ts";
+import { type Item, LibraryContext } from "#client/react/readingLibrary.ts";
+import type { ShellApi } from "#client/react/ShellApi.ts";
+import { shellIds } from "#client/react/shellIds.ts";
+import type { SidebarControls } from "#client/react/useSidebar.ts";
+import { workspaceDestinations } from "#client/react/workspaceDestinations.ts";
+import { fileUrl } from "#files/url.ts";
 
-const views = [
-	["overview", "Overview"],
-	["work", "Work"],
-	["changes", "Changes"],
-	["diagnostics", "Diagnostics"],
-] as const;
-export function Sidebar({ data, main, home }: { readonly data: Navigation | undefined; readonly main: MainLocation; readonly home: boolean }) {
+export function Sidebar({
+	api,
+	data,
+	main,
+	home,
+	controls,
+	openLibrary,
+}: {
+	readonly api: ShellApi;
+	readonly data: Navigation | undefined;
+	readonly main: MainLocation;
+	readonly home: boolean;
+	readonly controls: SidebarControls;
+	readonly openLibrary: () => void;
+}) {
+	const reading = useContext(LibraryContext);
+	const query = useQuery(api.goals.query(undefined, { timeToLive: 60_000 }), { keepPreviousData: true });
+	const goals = Option.getOrUndefined(query.data)?.goals;
+	const counts = {
+		today: data?.inboxCount,
+		work: data?.counts.now,
+	};
+	useEffect(() => {
+		const sidebar = document.getElementById(shellIds.sidebar);
+		if (controls.narrow && controls.open) {
+			sidebar?.setAttribute("aria-modal", "true");
+		} else {
+			sidebar?.removeAttribute("aria-modal");
+		}
+	}, [controls.narrow, controls.open]);
 	return (
-		<aside aria-label="Workspace navigation" className="sidebar" id={shellIds.sidebar}>
-			<a className="brand" href="/">
-				work board<span>Local workspace</span>
+		<aside
+			aria-label="Workspace navigation"
+			className="sticky top-0 flex h-dvh flex-col gap-5 overflow-y-auto border-r bg-card p-4 text-card-foreground max-md:fixed max-md:inset-y-0 max-md:left-0 max-md:z-40 max-md:w-[min(320px,calc(100vw-48px))] print:hidden"
+			hidden={!controls.open}
+			id={shellIds.sidebar}
+			role={controls.narrow && controls.open ? "dialog" : undefined}
+		>
+			<a
+				aria-current={home ? "page" : undefined}
+				className="flex items-center gap-2 px-2 py-3 font-semibold text-lg text-primary no-underline"
+				href="/"
+			>
+				<PanelsTopLeft aria-hidden="true" className="size-5" />
+				work board
 			</a>
-			<nav aria-label="Workspace" className="primary-navigation" id={shellIds.primaryNavigation}>
-				<a aria-current={home ? "page" : undefined} href="/" id={shellIds.homeOpen}>
-					Home
-				</a>
-				<a aria-current={main.view === "inbox" ? "page" : undefined} className="inbox-link" href="/_board/inbox" id={shellIds.inboxOpen}>
-					Inbox <InboxCount count={data?.inboxCount ?? null} id={shellIds.inboxCount} />
-				</a>
-				{views.map(([view, label]) => (
+			<nav aria-label="Workspace" className="grid shrink-0 gap-1" data-inbox-count={String(data?.inboxCount ?? "?")} id={shellIds.primaryNavigation}>
+				{workspaceDestinations.map(({ label, href, view, id }) => (
 					<a
-						aria-current={main.view === view ? "page" : undefined}
-						href={`/_board/${view}${view === "work" ? "?view=board" : ""}`}
-						id={`${view}-open`}
+						aria-current={(view === "today" ? home : main.view === view) ? "page" : undefined}
+						className={cn(
+							buttonVariants({ variant: "ghost" }),
+							"justify-between no-underline",
+							(view === "today" ? home : main.view === view) && "bg-accent",
+						)}
+						href={href}
+						id={id}
 						key={view}
 					>
-						{label}
+						<span>{label}</span>
+						{view === "today" && <InboxCount count={counts.today ?? null} id={shellIds.inboxCount} />}
+						{view === "work" && <Badge>{counts.work ?? "?"}</Badge>}
 					</a>
 				))}
 			</nav>
-			<button aria-controls="library-dialog" aria-haspopup="dialog" disabled id={shellIds.libraryOpen} type="button">
-				Recent documents
+			<ReadingSection current={main.file} items={reading.favorites} title="Pinned" />
+			<section aria-label="Active goals">
+				<h2 className="mb-2 px-2 font-semibold text-muted-foreground text-xs">Active goals</h2>
+				{goals?.length === 0 && <p className="px-2 text-muted-foreground text-xs">No active goals.</p>}
+				{goals?.map((goal) => (
+					<div className="mb-3 px-2" key={goal.id}>
+						<a className="block truncate text-sm" href={`/_board/item/${encodeURIComponent(goal.id)}/`}>
+							{goal.title}
+						</a>
+						<GoalProgress compact counts={goal.counts} title={goal.title} />
+					</div>
+				))}
+			</section>
+			<ReadingSection current={main.file} items={reading.recents.slice(0, 5)} title="Recent" />
+			<button className="mt-auto text-left text-muted-foreground text-xs" id={shellIds.libraryOpen} onClick={() => openLibrary()} type="button">
+				Reading history
 			</button>
-			<a className="start-open" href="/_board/start" id={shellIds.startOpen}>
-				Getting started
-			</a>
-			<h2 className="nav-heading">Project files</h2>
-			<nav aria-label="Project files" className="files" id={shellIds.files}>
-				{data ? <NavigationTree current={main.view ? "" : main.file} data={data} /> : <p role="status">Loading files…</p>}
-			</nav>
 		</aside>
 	);
 }
+function ReadingSection({ title, items, current }: { readonly title: string; readonly items: readonly Item[]; readonly current: string }) {
+	return (
+		<section aria-label={title}>
+			<h2 className="mb-2 px-2 font-semibold text-muted-foreground text-xs">{title}</h2>
+			<ul className="m-0 grid list-none gap-2 p-0">
+				{items.map((item) => (
+					<li className="min-w-0 px-2 text-sm" key={item.file}>
+						<a aria-current={item.file === current ? "page" : undefined} className="block truncate" href={fileUrl(item.file)} title={item.title}>
+							{item.title}
+						</a>
+					</li>
+				))}
+			</ul>
+			{items.length === 0 && (
+				<p className="px-2 text-muted-foreground text-xs">{title === "Pinned" ? "Pin a document to keep it here." : "No recent documents."}</p>
+			)}
+		</section>
+	);
+}

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

@@ -0,0 +1,49 @@
+import type { StartProjection } from "#browser/views/remaining.ts";
+import { ReadingPanel } from "./ReadingPanel.tsx";
+export function StartPage({ data }: { readonly data: StartProjection }) {
+	return (
+		<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
+				does not write project files.
+			</p>
+			<ol>
+				<li>Choose a template below. Focus its text area, select all, and copy the Markdown.</li>
+				<li>Save it in the served folder with the suggested filename, or adjust its links to your chosen filenames.</li>
+				<li>
+					Replace the example IDs with unique stable IDs and update every matching relationship and criterion reference. Frontmatter is optional;
+					ordinary Markdown and existing heading boards also work.
+				</li>
+				<li>
+					Fill in real context and observations. Work Board discovers saved files automatically. Start with the project, then follow the investigation
+					and result links.
+				</li>
+			</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 by opening these templates.
+			</p>
+			{data.templates.map((template) => (
+				<section className="start-template rounded-lg border p-4" key={template.file}>
+					<h2>{template.label}</h2>
+					<p>
+						Suggested file: <code>{template.file}</code>
+					</p>
+					<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
+							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>
+			))}
+		</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} />
+		</>
+	);
+}