@shivaedev/work-board 0.12.0 → 0.14.0

package/src/client/react/VisualViewer.tsx

@@ -0,0 +1,149 @@
+import { useEffect, useRef, useState } from "react";
+import { KeyboardHints } from "./KeyboardHints.tsx";
+import { shellIds } from "./shellIds.ts";
+import { VisualControls } from "./VisualControls.tsx";
+import { graphicWidth, visualFilename } from "./visualDimensions.ts";
+import type { VisualSelection } from "./visualSources.ts";
+
+export function VisualViewer({ selection, close }: { readonly selection: VisualSelection; readonly close: () => void }) {
+	const [selected, setSelected] = useState(selection.selected);
+	const [scale, setScale] = useState(100);
+	const [baseWidth, setBaseWidth] = useState(0);
+	const [status, setStatus] = useState("");
+	const [stale, setStale] = useState(false);
+	const [objectUrl, setObjectUrl] = useState<string>();
+	const stageRef = useRef<HTMLDivElement>(null);
+	const contentRef = useRef<HTMLDivElement>(null);
+	const viewportRef = useRef<HTMLDivElement>(null);
+	const image = selection.images[selected];
+	useEffect(() => {
+		if (!selection.drawing) {
+			return;
+		}
+		const copy = selection.drawing.cloneNode(true);
+		contentRef.current?.replaceChildren(copy);
+		const url = URL.createObjectURL(new Blob([new XMLSerializer().serializeToString(selection.drawing)], { type: "image/svg+xml" }));
+		setObjectUrl(url);
+		return () => URL.revokeObjectURL(url);
+	}, [selection.drawing]);
+	useEffect(() => {
+		function changed() {
+			setStale(true);
+			setStatus("Source updated. This preview is the drawing/image opened earlier; close and reopen to inspect or save the latest source.");
+		}
+		document.addEventListener("board-page", changed);
+		return () => document.removeEventListener("board-page", changed);
+	}, []);
+	function handleFitVisual() {
+		setBaseWidth(0);
+		setScale(100);
+		if (viewportRef.current) {
+			viewportRef.current.scrollTop = 0;
+			viewportRef.current.scrollLeft = 0;
+		}
+	}
+	function handleMove(offset: number) {
+		setSelected((current) => Math.max(0, Math.min(selection.images.length - 1, current + offset)));
+		handleFitVisual();
+		setStatus("");
+	}
+	function handleActual() {
+		const graphic = contentRef.current?.firstElementChild;
+		const width = graphicWidth(graphic);
+		if (!width) {
+			setStatus("Original dimensions unavailable; Fit and zoom remain available.");
+			return;
+		}
+		setBaseWidth(width);
+		setScale(100);
+	}
+	async function handleFullscreen() {
+		try {
+			if (document.fullscreenElement) {
+				await document.exitFullscreen();
+			} else {
+				await stageRef.current?.requestFullscreen();
+			}
+		} catch {
+			setStatus("Fullscreen is unavailable here; the scrollable viewer remains available.");
+		}
+	}
+	useEffect(() => {
+		const stage = stageRef.current;
+		const graphic = contentRef.current?.querySelector("img");
+		if (viewportRef.current) {
+			viewportRef.current.tabIndex = 0;
+		}
+		function failed() {
+			setStatus("Image unavailable. Check the local path, supported type, workspace boundary and 16 MiB limit.");
+		}
+		function key(event: KeyboardEvent) {
+			if (selected < 0 || !["ArrowLeft", "ArrowRight"].includes(event.key)) {
+				return;
+			}
+			event.preventDefault();
+			setSelected((current) => Math.max(0, Math.min(selection.images.length - 1, current + (event.key === "ArrowLeft" ? -1 : 1))));
+			setBaseWidth(0);
+			setScale(100);
+			setStatus("");
+		}
+		stage?.addEventListener("keydown", key);
+		graphic?.addEventListener("error", failed);
+		return () => {
+			stage?.removeEventListener("keydown", key);
+			graphic?.removeEventListener("error", failed);
+		};
+	}, [selected, selection.images.length]);
+	useEffect(
+		() => () => {
+			if (stageRef.current?.contains(document.fullscreenElement)) {
+				void document.exitFullscreen().catch(() => undefined);
+			}
+		},
+		[],
+	);
+
+	const href = stale || status.startsWith("Image unavailable") ? undefined : (image?.local ?? objectUrl);
+	const filename = visualFilename(image?.local);
+	return (
+		<div id={shellIds.visualStage} ref={stageRef}>
+			<div className="visual-bar">
+				<h2 id={shellIds.visualTitle}>Visual evidence</h2>
+				<button id={shellIds.visualClose} onClick={() => close()} type="button">
+					Close
+				</button>
+			</div>
+			<p id={shellIds.visualContext}>
+				{image ? `${image.alt || "Local image"} · ${selected + 1} of ${selection.images.length} · ${image.local}` : "Mermaid diagram"} ·{" "}
+				{document.getElementById("doc")?.dataset.file}
+				{image ? "" : " · Current drawing"}
+			</p>
+			<VisualControls
+				baseWidth={baseWidth}
+				count={selection.images.length}
+				filename={filename}
+				href={href}
+				image={image !== undefined}
+				onActual={handleActual}
+				onFit={handleFitVisual}
+				onFullscreen={handleFullscreen}
+				onMove={handleMove}
+				onZoom={setScale}
+				scale={scale}
+				selected={selected}
+			/>
+			<p id={shellIds.visualStatus} role="status">
+				{status}
+			</p>
+			<section aria-label="Scrollable visual" id={shellIds.visualViewport} ref={viewportRef}>
+				<div id={shellIds.visualContent} ref={contentRef} style={{ width: baseWidth ? `${(baseWidth * scale) / 100}px` : `${scale}%` }}>
+					{image ? <img alt={image.alt} src={image.src} /> : null}
+				</div>
+			</section>
+			<p className="visual-help">
+				<KeyboardHints>Arrow keys choose images · Escape returns to the source. </KeyboardHints>
+				Zoom and scroll to inspect. Recorded evidence does not verify acceptance.
+			</p>
+		</div>
+	);
+}

package/src/client/react/WorkCard.tsx

@@ -0,0 +1,38 @@
+import { cardStatus, type FleetWork, holderOf } from "#browser/views/now.ts";
+import type { WorkProjection } from "#browser/views/schema.ts";
+import type { State } from "#browser/views/state.ts";
+import { Card } from "#client/react/components/ui/Card.tsx";
+import { StatusChip } from "#client/react/components/ui/StatusChip.tsx";
+import { Age } from "./Age.tsx";
+import { PrChip } from "./PrChip.tsx";
+import { WorkItemTitle } from "./WorkItemTitle.tsx";
+
+export function WorkCard({
+	item,
+	state,
+	fleet,
+}: {
+	readonly item: WorkProjection["rows"][number];
+	readonly state: State;
+	readonly fleet: FleetWork | undefined;
+}) {
+	const holder = holderOf(item.metadata, fleet);
+	return (
+		<Card className="work-card" data-item={item.id} data-selected={item.id === state.item ? "true" : undefined}>
+			<p className="work-kind">{item.metadata.kind ?? ""}</p>
+			<h3>
+				<WorkItemTitle item={item} state={state} />
+			</h3>
+			<div className="flex flex-wrap items-center gap-2">
+				<StatusChip status={cardStatus(item.metadata, fleet, item.waiting)} title={item.waiting} />
+				<PrChip url={fleet?.prUrl} />
+			</div>
+			{holder && <p className="work-owner">Holder: {holder}</p>}
+			{fleet?.stageEnteredAt !== undefined && fleet.stageEnteredAt !== null && (
+				<p className="work-stage">
+					In {fleet.stage} for <Age modified={fleet.stageEnteredAt} short />
+				</p>
+			)}
+		</Card>
+	);
+}

package/src/client/react/WorkCardList.tsx

@@ -0,0 +1,30 @@
+import type { FleetWork } from "#browser/views/now.ts";
+import type { WorkProjection } from "#browser/views/schema.ts";
+import type { State } from "#browser/views/state.ts";
+import { useVirtualRows } from "./useVirtualRows.ts";
+import { WorkCard } from "./WorkCard.tsx";
+
+export function WorkCardList({
+	rows,
+	state,
+	fleet,
+	virtual,
+}: {
+	readonly rows: WorkProjection["rows"];
+	readonly state: State;
+	readonly fleet: ReadonlyMap<string, FleetWork>;
+	readonly virtual: boolean;
+}) {
+	const window = useVirtualRows(rows.length, 224, virtual);
+	return (
+		<section aria-label="Lane items" className="work-card-list" onScroll={window.onScroll}>
+			<div style={{ paddingBottom: window.bottom, paddingTop: window.top }}>
+				{rows.slice(window.start, window.end).map((item) => (
+					<div className="work-card-slot" key={item.id}>
+						<WorkCard fleet={fleet.get(item.id)} item={item} state={state} />
+					</div>
+				))}
+			</div>
+		</section>
+	);
+}

package/src/client/react/WorkCards.tsx

@@ -0,0 +1,27 @@
+import { useContext } from "react";
+import { compareStatuses } from "#browser/views/now.ts";
+import type { WorkProjection } from "#browser/views/schema.ts";
+import { StatusChip } from "#client/react/components/ui/StatusChip.tsx";
+import { FleetItemsContext } from "./FleetItemsContext.ts";
+import { WorkCardList } from "./WorkCardList.tsx";
+
+export function WorkCards({ data }: { readonly data: WorkProjection }) {
+	const fleet = useContext(FleetItemsContext);
+	const items = new Map(fleet?.state === "ready" ? [...fleet.completed, ...fleet.items].map((item) => [item.workId, item] as const) : []);
+	const columns = [...Map.groupBy(data.rows, (item) => item.metadata.status)].sort(([left], [right]) => compareStatuses(left, right));
+	return (
+		<div className="work-columns">
+			{columns.map(([status, rows]) => (
+				<section aria-label={status ?? ""} className="work-column" key={status ?? ""}>
+					{Boolean(status) && (
+						<h2>
+							<StatusChip status={status} />
+							<span className="work-count">{rows.length}</span>
+						</h2>
+					)}
+					<WorkCardList fleet={items} rows={rows} state={data.state} virtual={data.rows.length > 200} />
+				</section>
+			))}
+		</div>
+	);
+}

package/src/client/react/WorkControls.tsx

@@ -0,0 +1,71 @@
+import type { WorkProjection } from "#browser/views/schema.ts";
+import { fieldFilter, viewUrl } from "#browser/views/state.ts";
+import { shellIds } from "./shellIds.ts";
+export function WorkControls({ data }: { readonly data: WorkProjection }) {
+	const { state } = data;
+	function fields(field: "owner" | "status") {
+		const values = new Map(data.items.flatMap((item) => (item.metadata[field] ? [[fieldFilter(item.metadata[field]), item.metadata[field]]] : [])));
+		const current = state[field];
+		if (current && !values.has(current)) {
+			values.set(current, `${current.startsWith("value:") ? current.slice(6) : current} (no current matches)`);
+		}
+		return (
+			<>
+				<option value="">All {field === "owner" ? "owners" : "statuses"}</option>
+				{[...values]
+					.sort((a, b) => a[1].localeCompare(b[1], "en"))
+					.map(([value, label]) => (
+						<option key={value} value={value}>
+							{label}
+						</option>
+					))}
+			</>
+		);
+	}
+	return (
+		<form action="/_board/work#work-results" className="work-filters" id={shellIds.workFilters} method="get">
+			<input name="view" type="hidden" value={state.view} />
+			<input name="item" type="hidden" value={state.item} />
+			<label>
+				<span>Board</span>
+				<select defaultValue={state.board} id={shellIds.workBoard} name="board">
+					<option value="">All work</option>
+					{data.boards.map((board) => (
+						<option key={board.id} value={board.id}>
+							{board.title}
+						</option>
+					))}
+					{state.board && !data.validBoard && <option value={state.board}>{state.board} (unavailable)</option>}
+				</select>
+			</label>
+			<label>
+				<span>Status</span>
+				<select defaultValue={state.status} id={shellIds.workStatus} name="status">
+					{fields("status")}
+				</select>
+			</label>
+			<label>
+				<span>Owner</span>
+				<select defaultValue={state.owner} id={shellIds.workOwner} name="owner">
+					{fields("owner")}
+				</select>
+			</label>
+			<label>
+				<span>Find work</span>
+				<input defaultValue={state.query} id={shellIds.workQuery} maxLength={200} name="q" type="search" />
+			</label>
+			<label>
+				<span>Sort by</span>
+				<select defaultValue={state.sort} id={shellIds.workSort} name="sort">
+					{["title", "owner", "status"].map((sort) => (
+						<option key={sort} value={sort}>
+							{sort.charAt(0).toUpperCase() + sort.slice(1)}
+						</option>
+					))}
+				</select>
+			</label>
+			<button type="submit">Apply</button>
+			<a href={viewUrl(state, { owner: "", query: "", status: "" }, "work-results")}>Clear filters</a>
+		</form>
+	);
+}

package/src/client/react/WorkDetail.tsx

@@ -0,0 +1,36 @@
+import type { WorkProjection } from "#browser/views/schema.ts";
+import { viewUrl } from "#browser/views/state.ts";
+import { DocumentPage } from "./DocumentPage.tsx";
+import type { ShellApi } from "./ShellApi.ts";
+import { shellIds } from "./shellIds.ts";
+export function WorkDetail({ data, api }: { readonly data: WorkProjection; readonly api?: ShellApi | undefined }) {
+	const { state, selected } = data;
+	if (!state.item) {
+		return null;
+	}
+	return (
+		<aside aria-label="Selected work" className="work-detail" id={shellIds.workDetail} tabIndex={-1}>
+			<header>
+				<a className="detail-close" href={viewUrl(state, { item: "" }, "work-results")}>
+					Close detail
+				</a>
+				<a href={`/_board/item/${encodeURIComponent(state.item)}/`}>{selected === undefined ? "Inspect item identity" : "Open document"}</a>
+			</header>
+			{Boolean(data.selectedOutside) && (
+				<p className="detail-notice" role="status">
+					This selected item is outside the current board or filters.
+				</p>
+			)}
+			{selected === undefined ? (
+				<>
+					<h2>Item unavailable</h2>
+					<p>
+						{state.item} {data.selectionProblem}. No source was selected.
+					</p>
+				</>
+			) : (
+				<DocumentPage api={api} document={selected} key={selected.identity ?? selected.file} />
+			)}
+		</aside>
+	);
+}

package/src/client/react/WorkItemTitle.tsx

@@ -0,0 +1,9 @@
+import type { WorkProjection } from "#browser/views/schema.ts";
+import { type State, viewUrl } from "#browser/views/state.ts";
+export function WorkItemTitle({ item, state }: { readonly item: WorkProjection["rows"][number]; readonly state: State }) {
+	return (
+		<a aria-current={item.id === state.item ? "true" : undefined} href={viewUrl(state, { item: item.id }, "work-detail")}>
+			{item.title}
+		</a>
+	);
+}

package/src/client/react/WorkLane.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import type { FleetWork, NowLane } from "#browser/views/now.ts";
+import type { WorkProjection } from "#browser/views/schema.ts";
+import type { State } from "#browser/views/state.ts";
+import { Button } from "#client/react/components/ui/Button.tsx";
+import { WorkCardList } from "#client/react/WorkCardList.tsx";
+
+export function WorkLane({
+	lane,
+	rows,
+	state,
+	fleet,
+	virtual,
+	collapsed,
+}: {
+	readonly lane: NowLane;
+	readonly rows: WorkProjection["rows"];
+	readonly state: State;
+	readonly fleet: ReadonlyMap<string, FleetWork>;
+	readonly virtual: boolean;
+	readonly collapsed: boolean;
+}) {
+	const [open, setOpen] = useState(!collapsed);
+	return (
+		<section aria-label={lane} className="work-column min-w-0">
+			<h2 className="m-0 mb-3 flex min-h-8 items-center justify-between gap-3 whitespace-nowrap font-semibold text-sm">
+				{collapsed ? (
+					<Button aria-expanded={open} onClick={() => setOpen(!open)} size="sm" variant="outline">
+						{lane}
+					</Button>
+				) : (
+					lane
+				)}
+				<span className="work-count shrink-0 text-muted-foreground text-xs tabular-nums">{rows.length}</span>
+			</h2>
+			{Boolean(open) && <WorkCardList fleet={fleet} rows={rows} state={state} virtual={virtual} />}
+		</section>
+	);
+}

package/src/client/react/WorkNow.tsx

@@ -0,0 +1,35 @@
+import { Clock, Effect } from "effect";
+import { useContext } from "react";
+import { laneOf, nowLanes } from "#browser/views/now.ts";
+import type { WorkProjection } from "#browser/views/schema.ts";
+import { FleetItemsContext } from "#client/react/FleetItemsContext.ts";
+import { WorkLane } from "#client/react/WorkLane.tsx";
+
+export function WorkNow({ data }: { readonly data: WorkProjection }) {
+	const fleet = useContext(FleetItemsContext);
+	const ready = fleet?.state === "ready";
+	const items = new Map(ready ? [...fleet.completed, ...fleet.items].map((item) => [item.workId, item] as const) : []);
+	const recent = new Set(
+		ready
+			? fleet.completed.filter((item) => item.completedAt >= Effect.runSync(Clock.currentTimeMillis) - 604_800_000).map((item) => item.workId)
+			: [],
+	);
+	const groups = Map.groupBy(data.rows, (item) => laneOf(item.metadata, items.get(item.id), item.fleetApproved));
+	return (
+		<>
+			{!ready && (
+				<p role="status">
+					Fleet is unavailable. Lanes use authored status. {fleet?.state === "unavailable" ? fleet.reason : "Fleet data has not loaded."}
+				</p>
+			)}
+			<div className="work-columns work-now grid auto-cols-[minmax(260px,1fr)] grid-flow-col gap-4 overflow-x-auto pb-2 max-md:auto-cols-auto max-md:grid-flow-row">
+				{nowLanes.map((lane, index) => {
+					const rows = (groups.get(lane) ?? []).filter((item) => index !== 5 || recent.has(item.id));
+					return (
+						<WorkLane collapsed={index === 5} fleet={items} key={lane} lane={lane} rows={rows} state={data.state} virtual={data.rows.length > 200} />
+					);
+				})}
+			</div>
+		</>
+	);
+}

package/src/client/react/WorkPage.tsx

@@ -0,0 +1,66 @@
+import type { WorkProjection } from "#browser/views/schema.ts";
+import { viewUrl } from "#browser/views/state.ts";
+import { SavedViews } from "#client/react/SavedViews.tsx";
+import type { ShellApi } from "#client/react/ShellApi.ts";
+import { shellIds } from "#client/react/shellIds.ts";
+import { WorkControls } from "#client/react/WorkControls.tsx";
+import { WorkDetail } from "#client/react/WorkDetail.tsx";
+import { WorkResults } from "#client/react/WorkResults.tsx";
+import { WorkTools } from "#client/react/WorkTools.tsx";
+export function WorkPage({ data, api }: { readonly data: WorkProjection; readonly api?: ShellApi | undefined }) {
+	const { state } = data;
+	const source = `/_board/item/${encodeURIComponent(state.board)}/`;
+	return (
+		<>
+			<header className="work-head mb-4 space-y-2">
+				{state.view !== "now" && <p className="work-eyebrow">WORK · {state.view.toUpperCase()} VIEW</p>}
+				<h1 className="m-0 font-semibold text-2xl">{data.validBoard ? data.title : "Board unavailable"}</h1>
+				{Boolean(state.board) && data.validBoard && <a href={source}>Board source</a>}
+			</header>
+			<WorkTools state={state} />
+			<details className="work-options mb-4" open={state.view !== "now"}>
+				<summary className="cursor-pointer text-muted-foreground text-sm">Filter</summary>
+				<SavedViews url={viewUrl(state, { item: "" })} />
+				<WorkControls data={data} key={viewUrl(state)} />
+			</details>
+			{data.validBoard ? (
+				<WorkContent api={api} data={data} />
+			) : (
+				<p className="empty">
+					{state.board} is missing, has a duplicate ID, or is not a declared board. Choose another board or open its{" "}
+					<a href={source}>source identity</a>.
+				</p>
+			)}
+		</>
+	);
+}
+function WorkContent({ data, api }: { readonly data: WorkProjection; readonly api?: ShellApi | undefined }) {
+	const issues = data.issues.map((issue) => <li key={issue}>{issue}</li>);
+	return (
+		<>
+			{issues.length > 0 && (
+				<details className="view-issues">
+					<summary>Source issues ({issues.length})</summary>
+					<ul>{issues}</ul>
+				</details>
+			)}
+			{data.state.view !== "now" && (
+				<p className="work-total" role="status">
+					{data.rows.length} shown · {data.items.length} items in this view
+				</p>
+			)}
+			<div className={data.state.item ? "work-layout has-detail" : "work-layout"}>
+				<section aria-label="Work items" id={shellIds.workResults} tabIndex={-1}>
+					{data.items.length === 0 && (
+						<p className="empty">
+							No identified work is declared here. Keep reading ordinary files, or add item IDs and explicit board membership in their Markdown
+							sources.
+						</p>
+					)}
+					<WorkResults data={data} />
+				</section>
+				<WorkDetail api={api} data={data} />
+			</div>
+		</>
+	);
+}

package/src/client/react/WorkResults.tsx

@@ -0,0 +1,13 @@
+import type { WorkProjection } from "#browser/views/schema.ts";
+import { WorkCards } from "./WorkCards.tsx";
+import { WorkNow } from "./WorkNow.tsx";
+import { WorkTable } from "./WorkTable.tsx";
+export function WorkResults({ data }: { readonly data: WorkProjection }) {
+	if (data.state.view === "now") {
+		return <WorkNow data={data} />;
+	}
+	if (data.rows.length === 0) {
+		return <p className="empty">No work matches these filters.</p>;
+	}
+	return data.state.view === "table" ? <WorkTable data={data} /> : <WorkCards data={data} />;
+}

package/src/client/react/WorkTable.tsx

@@ -0,0 +1,65 @@
+import type { WorkProjection } from "#browser/views/schema.ts";
+import type { State } from "#browser/views/state.ts";
+import { StatusChip } from "#client/react/components/ui/StatusChip.tsx";
+import { useVirtualRows } from "./useVirtualRows.ts";
+import { WorkItemTitle } from "./WorkItemTitle.tsx";
+export function WorkTable({ data }: { readonly data: WorkProjection }) {
+	const window = useVirtualRows(data.rows.length, 96);
+	const virtual = data.rows.length > 200;
+	const headings = ["Work", "Kind", "Status", "Owner", "Next action"].map((label) => (
+		<th key={label} scope="col">
+			{label}
+		</th>
+	));
+	return (
+		<div className="work-table-wrap" onScroll={window.onScroll}>
+			<table className="work-table">
+				<caption className="sr-only">Identified work, sorted by {data.state.sort}</caption>
+				<thead>
+					<tr>{headings}</tr>
+				</thead>
+				<tbody>
+					{window.top > 0 && (
+						<tr>
+							<td colSpan={5} style={{ height: window.top, padding: 0 }} />
+						</tr>
+					)}
+					{data.rows.slice(window.start, window.end).map((item) => (
+						<Row item={item} key={item.id} state={data.state} virtual={virtual} />
+					))}
+					{window.bottom > 0 && (
+						<tr>
+							<td colSpan={5} style={{ height: window.bottom, padding: 0 }} />
+						</tr>
+					)}
+				</tbody>
+			</table>
+		</div>
+	);
+}
+function Row({ item, state, virtual }: { readonly item: WorkProjection["rows"][number]; readonly state: State; readonly virtual: boolean }) {
+	return (
+		<tr className={virtual ? "work-virtual-row" : undefined} data-item={item.id} data-selected={item.id === state.item ? "true" : undefined}>
+			<th scope="row">
+				<div className="work-cell">
+					<WorkItemTitle item={item} state={state} />
+					<span className="work-id">{item.id}</span>
+				</div>
+			</th>
+			<td>
+				<div className="work-cell">{item.metadata.kind ?? ""}</div>
+			</td>
+			<td>
+				<div className="work-cell">
+					{Boolean(item.waiting) && <StatusChip status="needs-you" />} <StatusChip status={item.metadata.status} />
+				</div>
+			</td>
+			<td>
+				<div className="work-cell">{item.metadata.owner ?? ""}</div>
+			</td>
+			<td>
+				<div className="work-cell">{item.metadata.nextAction ?? ""}</div>
+			</td>
+		</tr>
+	);
+}

package/src/client/react/WorkTools.tsx

@@ -0,0 +1,19 @@
+import type { State } from "#browser/views/state.ts";
+import { viewUrl } from "#browser/views/state.ts";
+import { buttonVariants } from "#client/react/components/ui/buttonVariants.ts";
+export function WorkTools({ state }: { readonly state: State }) {
+	return (
+		<nav aria-label="Work layout" className="view-layouts mb-4 flex flex-wrap gap-2">
+			{(["now", "board", "table"] as const).map((view) => (
+				<a
+					aria-current={state.view === view ? "page" : undefined}
+					className={buttonVariants({ size: "sm", variant: state.view === view ? "secondary" : "outline" })}
+					href={viewUrl(state, { view }, "work-results")}
+					key={view}
+				>
+					{{ board: "All work", now: "Now", table: "Table" }[view]}
+				</a>
+			))}
+		</nav>
+	);
+}

package/src/client/react/activeRead.ts

@@ -0,0 +1,19 @@
+import type { Cause } from "effect";
+import * as Atom from "effect/reactivity/Atom";
+import { resolvedDocumentFailure } from "#client/page/resolvedDocumentFailure.ts";
+import { pageQueries } from "./pageQueries.ts";
+import type { ShellApi } from "./ShellApi.ts";
+
+function health(value: { readonly _tag: string; readonly waiting: boolean; readonly cause?: Cause.Cause<unknown> }) {
+	return {
+		failed: value._tag === "Failure" && !(value.cause && resolvedDocumentFailure(value.cause)),
+		pending: value.waiting || value._tag === "Initial",
+	};
+}
+export function activeRead(api: ShellApi, kind: string, url: string) {
+	const queries = pageQueries(api, kind, url);
+	return Atom.make((get) => {
+		const readings = queries.map((query) => health(get(query)));
+		return { failed: readings.some((reading) => reading.failed), pending: readings.some((reading) => reading.pending) };
+	});
+}