@shivaedev/work-board 0.12.0 → 0.13.0

package/src/client/react/Sidebar.tsx

@@ -1,8 +1,10 @@
+import { useEffect } from "react";
 import type { Navigation } from "#browser/navigation/schema.ts";
 import { InboxCount } from "./Header.tsx";
-import type { MainLocation } from "./legacyPage.ts";
+import type { MainLocation } from "./mainLocation.ts";
 import { NavigationTree } from "./NavigationTree.tsx";
 import { shellIds } from "./shellIds.ts";
+import type { SidebarControls } from "./useSidebar.ts";
 
 const views = [
 	["overview", "Overview"],
@@ -10,9 +12,60 @@ const views = [
 	["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({
+	data,
+	main,
+	home,
+	controls,
+	openLibrary,
+}: {
+	readonly data: Navigation | undefined;
+	readonly main: MainLocation;
+	readonly home: boolean;
+	readonly controls: SidebarControls;
+	readonly openLibrary: () => void;
+}) {
+	useEffect(() => {
+		if (!controls.open) {
+			return;
+		}
+		const frame = requestAnimationFrame(() => {
+			const selected = main.file;
+			const tree = document.getElementById("files");
+			const active = tree?.querySelector('a[aria-current="page"]');
+			if (!(data && selected && tree && active)) {
+				return;
+			}
+			if (active.closest("details:not([open])")) {
+				return;
+			}
+			const bounds = tree.getBoundingClientRect();
+			const row = active.getBoundingClientRect();
+			if (row.top < bounds.top) {
+				tree.scrollTop += row.top - bounds.top;
+			} else if (row.bottom > bounds.bottom) {
+				tree.scrollTop += row.bottom - bounds.bottom;
+			}
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [data, main.file, controls.open]);
+
+	useEffect(() => {
+		const sidebar = document.getElementById("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}>
+		<aside
+			aria-label="Workspace navigation"
+			className="sidebar"
+			hidden={!controls.open}
+			id={shellIds.sidebar}
+			role={controls.narrow && controls.open ? "dialog" : undefined}
+		>
 			<a className="brand" href="/">
 				work board<span>Local workspace</span>
 			</a>
@@ -34,7 +87,7 @@ export function Sidebar({ data, main, home }: { readonly data: Navigation | unde
 					</a>
 				))}
 			</nav>
-			<button aria-controls="library-dialog" aria-haspopup="dialog" disabled id={shellIds.libraryOpen} type="button">
+			<button aria-controls="library-dialog" aria-haspopup="dialog" id={shellIds.libraryOpen} onClick={() => openLibrary()} type="button">
 				Recent documents
 			</button>
 			<a className="start-open" href="/_board/start" id={shellIds.startOpen}>

package/src/client/react/StartPage.tsx

@@ -0,0 +1,41 @@
+import type { StartProjection } from "#browser/views/remaining.ts";
+export function StartPage({ data }: { readonly data: StartProjection }) {
+	return (
+		<article className="doc 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 or marked seen by opening these templates.
+			</p>
+			{data.templates.map((template) => (
+				<section className="start-template" 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 defaultValue={template.source} id={`template-${template.file}`} readOnly rows={16} spellCheck={false} />
+					</details>
+				</section>
+			))}
+		</article>
+	);
+}

package/src/client/react/UpdatesToggle.tsx

@@ -0,0 +1,13 @@
+import { useAtomSet, useAtomValue } from "@effect/atom-react";
+import type { BrowserClient } from "#client/client.ts";
+import { shellIds } from "./shellIds.ts";
+
+export function UpdatesToggle({ client }: { readonly client: BrowserClient }) {
+	const paused = useAtomValue(client.updates.paused);
+	const setPaused = useAtomSet(client.updates.paused);
+	return (
+		<button aria-pressed={paused} id={shellIds.updatesToggle} onClick={() => setPaused((value) => !value)} type="button">
+			{paused ? "Resume updates" : "Pause updates"}
+		</button>
+	);
+}

package/src/client/react/VisualControls.tsx

@@ -0,0 +1,59 @@
+import { shellIds } from "./shellIds.ts";
+
+interface ControlsProps {
+	readonly baseWidth: number;
+	readonly count: number;
+	readonly filename: string;
+	readonly href: string | undefined;
+	readonly image: boolean;
+	readonly onActual: () => void;
+	readonly onFit: () => void;
+	readonly onFullscreen: () => void;
+	readonly onMove: (offset: number) => void;
+	readonly onZoom: (scale: number) => void;
+	readonly scale: number;
+	readonly selected: number;
+}
+export function VisualControls({
+	selected,
+	count,
+	image,
+	scale,
+	baseWidth,
+	href,
+	filename,
+	onMove,
+	onZoom,
+	onFit,
+	onActual,
+	onFullscreen,
+}: ControlsProps) {
+	return (
+		<fieldset aria-label="Visual controls" className="visual-bar">
+			<button disabled={selected <= 0} hidden={!image} id={shellIds.visualPrevious} onClick={() => onMove(-1)} type="button">
+				Previous image
+			</button>
+			<button disabled={selected >= count - 1} hidden={!image} id={shellIds.visualNext} onClick={() => onMove(1)} type="button">
+				Next image
+			</button>
+			<button aria-label="Zoom out" id={shellIds.visualOut} onClick={() => onZoom(Math.max(25, scale / 1.5))} type="button">
+				−
+			</button>
+			<button id={shellIds.visualFit} onClick={onFit} type="button">
+				{scale === 100 && !baseWidth ? "Fit" : `${Math.round(scale)}% · Fit`}
+			</button>
+			<button aria-pressed={Boolean(baseWidth)} id={shellIds.visualActual} onClick={onActual} type="button">
+				Actual size
+			</button>
+			<button aria-label="Zoom in" id={shellIds.visualIn} onClick={() => onZoom(Math.min(800, scale * 1.5))} type="button">
+				+
+			</button>
+			<button id={shellIds.visualFullscreen} onClick={onFullscreen} type="button">
+				Fullscreen
+			</button>
+			<a aria-disabled={!href} download={filename} href={href} id={shellIds.visualDownload}>
+				Save locally
+			</a>
+		</fieldset>
+	);
+}

package/src/client/react/VisualInspection.tsx

@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Modal } from "./Modal.tsx";
+import { shellIds } from "./shellIds.ts";
+import { VisualViewer } from "./VisualViewer.tsx";
+import { useVisualSources, type VisualSelection } from "./visualSources.ts";
+
+export function VisualInspection() {
+	const [selection, setSelection] = useState<VisualSelection>();
+	const originRef = useRef<HTMLElement | undefined>(undefined);
+	const inspect = useCallback((next: VisualSelection) => {
+		originRef.current = next.origin;
+		setSelection(next);
+	}, []);
+	useVisualSources(inspect);
+	const close = useCallback(() => {
+		setSelection(undefined);
+		const origin = originRef.current;
+		(origin?.isConnected ? origin : document.getElementById("doc"))?.focus();
+	}, []);
+	useEffect(() => {
+		window.addEventListener("pagehide", close);
+		return () => window.removeEventListener("pagehide", close);
+	}, [close]);
+	return (
+		<Modal
+			close={close}
+			id={shellIds.visualDialog}
+			open={selection !== undefined}
+			returnFocus={originRef.current?.isConnected ? originRef.current : (document.getElementById("doc") ?? undefined)}
+			title="visual-title"
+		>
+			{selection ? <VisualViewer close={close} key={selection.origin.dataset.localImage ?? "drawing"} selection={selection} /> : null}
+		</Modal>
+	);
+}

package/src/client/react/VisualViewer.tsx

@@ -0,0 +1,147 @@
+import { useEffect, useRef, useState } from "react";
+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">
+				Arrow keys choose images · Zoom and scroll to inspect · Escape returns to the source. Recorded evidence does not verify acceptance.
+			</p>
+		</div>
+	);
+}

package/src/client/react/WorkCards.tsx

@@ -0,0 +1,39 @@
+import type { WorkProjection } from "#browser/views/schema.ts";
+import type { State } from "#browser/views/state.ts";
+import { WorkItemTitle } from "./WorkItemTitle.tsx";
+export function WorkCards({ data }: { readonly data: WorkProjection }) {
+	const columns = [...Map.groupBy(data.rows, (item) => item.metadata.status)].map(([status, items]) => (
+		<Column items={items} key={status ?? ""} state={data.state} status={status} />
+	));
+	return <div className="work-columns">{columns}</div>;
+}
+function Column({ items, state, status }: { readonly items: WorkProjection["rows"]; readonly state: State; readonly status: string | undefined }) {
+	return (
+		<section aria-label={status ?? "Status not recorded"} className="work-column">
+			<h2>
+				{status ?? "Status not recorded"} <span className="work-count">{items.length}</span>
+			</h2>
+			{items.map((item) => (
+				<Card item={item} key={item.id} state={state} />
+			))}
+		</section>
+	);
+}
+function Card({ item, state }: { readonly item: WorkProjection["rows"][number]; readonly state: State }) {
+	return (
+		<article className="work-card" data-item={item.id} data-selected={item.id === state.item ? "true" : undefined}>
+			{Boolean(item.waiting) && (
+				<span className="waiting-badge" title={item.waiting}>
+					Waiting on you
+				</span>
+			)}
+			<p className="work-kind">{item.metadata.kind ?? "Kind not recorded"}</p>
+			<h3>
+				<WorkItemTitle item={item} state={state} />
+			</h3>
+			<p className="work-id">{item.id}</p>
+			<p className="work-owner">Owner: {item.metadata.owner ?? "Not recorded"}</p>
+			{Boolean(item.metadata.nextAction) && <p className="work-next">Next: {item.metadata.nextAction}</p>}
+		</article>
+	);
+}

package/src/client/react/WorkControls.tsx

@@ -0,0 +1,73 @@
+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.map((item) => [fieldFilter(item.metadata[field]), item.metadata[field] ?? `${field === "owner" ? "Owner" : "Status"} not recorded`]),
+		);
+		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,35 @@
+import type { WorkProjection } from "#browser/views/schema.ts";
+import { viewUrl } from "#browser/views/state.ts";
+import { DocumentPage } from "./DocumentPage.tsx";
+import { shellIds } from "./shellIds.ts";
+export function WorkDetail({ data }: { readonly data: WorkProjection }) {
+	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 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/WorkPage.tsx

@@ -0,0 +1,59 @@
+import type { WorkProjection } from "#browser/views/schema.ts";
+import { viewUrl } from "#browser/views/state.ts";
+import { shellIds } from "./shellIds.ts";
+import { WorkControls } from "./WorkControls.tsx";
+import { WorkDetail } from "./WorkDetail.tsx";
+import { WorkResults } from "./WorkResults.tsx";
+import { WorkTools } from "./WorkTools.tsx";
+export function WorkPage({ data }: { readonly data: WorkProjection }) {
+	const { state } = data;
+	const source = `/_board/item/${encodeURIComponent(state.board)}/`;
+	return (
+		<>
+			<header className="work-head">
+				<p className="work-eyebrow">WORK · {state.view.toUpperCase()} VIEW</p>
+				<h1>{data.validBoard ? data.title : "Board unavailable"}</h1>
+				<p>Views use recorded fields. A section heading does not set an item's status.</p>
+				{Boolean(state.board) && data.validBoard && <a href={source}>Board source</a>}
+			</header>
+			<WorkTools state={state} />
+			<WorkControls data={data} key={viewUrl(state)} />
+			{data.validBoard ? (
+				<WorkContent 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 }: { readonly data: WorkProjection }) {
+	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>
+			)}
+			<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 data={data} />
+			</div>
+		</>
+	);
+}

package/src/client/react/WorkResults.tsx

@@ -0,0 +1,9 @@
+import type { WorkProjection } from "#browser/views/schema.ts";
+import { WorkCards } from "./WorkCards.tsx";
+import { WorkTable } from "./WorkTable.tsx";
+export function WorkResults({ data }: { readonly data: WorkProjection }) {
+	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,39 @@
+import type { WorkProjection } from "#browser/views/schema.ts";
+import type { State } from "#browser/views/state.ts";
+import { WorkItemTitle } from "./WorkItemTitle.tsx";
+export function WorkTable({ data }: { readonly data: WorkProjection }) {
+	const headings = ["Work", "Kind", "Status", "Owner", "Next action"].map((label) => (
+		<th key={label} scope="col">
+			{label}
+		</th>
+	));
+	return (
+		<div className="work-table-wrap">
+			<table className="work-table">
+				<caption className="sr-only">Identified work, sorted by {data.state.sort}</caption>
+				<thead>
+					<tr>{headings}</tr>
+				</thead>
+				<tbody>
+					{data.rows.map((item) => (
+						<Row item={item} key={item.id} state={data.state} />
+					))}
+				</tbody>
+			</table>
+		</div>
+	);
+}
+function Row({ item, state }: { readonly item: WorkProjection["rows"][number]; readonly state: State }) {
+	return (
+		<tr data-item={item.id} data-selected={item.id === state.item ? "true" : undefined}>
+			<th scope="row">
+				<WorkItemTitle item={item} state={state} />
+				<span className="work-id">{item.id}</span>
+			</th>
+			<td>{item.metadata.kind ?? "Not recorded"}</td>
+			<td>{item.waiting ? `Waiting on you · ${item.metadata.status ?? "Status not recorded"}` : (item.metadata.status ?? "Not recorded")}</td>
+			<td>{item.metadata.owner ?? "Not recorded"}</td>
+			<td>{item.metadata.nextAction ?? "Not recorded"}</td>
+		</tr>
+	);
+}

package/src/client/react/WorkTools.tsx

@@ -0,0 +1,17 @@
+import type { State } from "#browser/views/state.ts";
+import { viewUrl } from "#browser/views/state.ts";
+import { SavedViews } from "./SavedViews.tsx";
+export function WorkTools({ state }: { readonly state: State }) {
+	return (
+		<>
+			<nav aria-label="Work layout" className="view-layouts">
+				{(["board", "table"] as const).map((view) => (
+					<a aria-current={state.view === view ? "page" : undefined} href={viewUrl(state, { view }, "work-results")} key={view}>
+						{view === "board" ? "Board" : "Table"}
+					</a>
+				))}
+			</nav>
+			<SavedViews url={viewUrl(state, { item: "" })} />
+		</>
+	);
+}