@shivaedev/work-board 0.2.1 → 0.4.0

package/src/page/style.ts

@@ -1,36 +1,13 @@
-const tokens = `
-:root {
-  color-scheme: light dark;
-  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
-  --bg: #ffffff; --surface: #f6f8fa; --text: #1f2328; --muted: #59636e; --border: #d1d9e0; --link: #0969da; --danger: #b3261e;
-}
-@media (prefers-color-scheme: dark) {
-  :root { --bg: #1e1e1e; --surface: #272727; --text: #e8e8e8; --muted: #a8a8a8; --border: #3d3d3d; --link: #58a6ff; --danger: #ff8a80; }
-}
-`;
-
-const page = `
-body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--sans); }
-a { color: var(--link); }
-.page { box-sizing: content-box; max-width: 72ch; margin: 0 auto; padding: 0 16px 64px; }
-.bar { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
-.files { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
-.files a { color: var(--text); text-decoration: none; }
-.files a:hover, .files a[aria-current="page"] { color: var(--link); text-decoration: underline; }
-.files details[open] { flex-basis: 100%; }
-.files summary { cursor: pointer; color: var(--muted); }
-.files ul { list-style: none; margin: 4px 0 8px; padding: 0 0 0 12px; border-left: 1px solid var(--border); }
-.age { color: var(--muted); font: 12px var(--mono); margin-left: 6px; }
-.live { color: var(--muted); font: 12px/1.9 var(--mono); }
-.live[data-state="down"], .live[data-state="stale"] { color: var(--danger); }
-.meta { color: var(--muted); font-size: 14px; margin: 0; }
-.meta .age { margin: 0; }
-`;
+import { attentionStyle } from "#attention/style.ts";
+import { workStyle } from "#views/workStyle.ts";
+import { metadataStyles } from "./metadata.ts";
+import { readingStyles } from "./readingStyles.ts";
+import { searchStyles } from "./searchDialog.ts";
+import { layout, theme } from "./workspaceStyles.ts";
 
 const prose = `
 h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; margin: 1.6em 0 0.5em; }
-h1 { font-size: 1.9em; margin-top: 1em; }
+h1 { overflow-wrap: anywhere; font-size: 1.9em; margin-top: 1em; }
 h2 { font-size: 1.45em; }
 h3 { font-size: 1.15em; }
 h1 strong, h2 strong, h3 strong { font-weight: inherit; }
@@ -43,7 +20,8 @@ code { font: 0.875em var(--mono); background: var(--surface); padding: 0.1em 0.3
 pre { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
 pre code { background: none; padding: 0; font-size: 0.85em; }
 .shiki span { color: var(--shiki-light); }
-@media (prefers-color-scheme: dark) { .shiki span { color: var(--shiki-dark); } }
+@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shiki span { color: var(--shiki-dark); } }
+:root[data-theme="dark"] .shiki span { color: var(--shiki-dark); }
 table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.925em; }
 th, td { text-align: left; vertical-align: top; padding: 6px 10px; border: 1px solid var(--border); }
 tr:nth-child(2n) td { background: var(--surface); }
@@ -59,9 +37,11 @@ const board = `
 .board-head .intro { color: var(--muted); }
 .counts { margin: 0; }
 .counts b { font-variant-numeric: tabular-nums; }
-.board section { margin-top: 2.2em; }
-.board section > h2 { margin: 0 0 0.2em; }
-.item, .notes { padding: 0.9em 0 0.1em; border-top: 1px solid var(--border); }
+.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--space); margin-top: 2em; align-items: start; }
+.board section { min-width: 0; }
+.board section > h2 { margin: 0 0 0.8em; font-size: 1.1em; overflow-wrap: anywhere; }
+.item, .notes { padding: var(--card-space); margin-bottom: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); overflow-wrap: anywhere; }
+.item > :last-child, .notes > :last-child { margin-bottom: 0; }
 .item > h3 { margin: 0 0 0.4em; }
 .item > h3 > code:first-child { background: none; padding: 0; margin-right: 0.6em; color: var(--muted); font-weight: 400; }
 footer { margin-top: 2.5em; padding-top: 1em; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.925em; }
@@ -76,4 +56,4 @@ figure.diagram[data-state="failed"]::after { content: attr(data-error); color: v
 @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
 `;
 
-export const style = tokens + page + prose + board + diagrams;
+export const style = theme + layout + prose + board + diagrams + readingStyles() + searchStyles + metadataStyles + workStyle() + attentionStyle();

package/src/page/swap.ts

@@ -1,5 +1,5 @@
 export const swap = `
-const containers = new Set(["DIV", "SECTION", "ARTICLE", "HEADER", "FOOTER", "MAIN", "NAV"]);
+const containers = new Set(["DIV", "SECTION", "ARTICLE", "HEADER", "FOOTER", "MAIN", "NAV", "FORM", "SELECT", "LABEL", "ASIDE"]);
 
 const structural = (element) => [...element.childNodes].every((node) => node.nodeType === 1 || node.textContent.trim() === "");
 
@@ -56,6 +56,8 @@ const matches = (a, b) => {
 };
 
 const patch = (current, incoming) => {
+  const selected = current.tagName === "SELECT" ? current.value : null;
+  const fallback = incoming.tagName === "SELECT" ? incoming.value : null;
   if (!structural(current) || !structural(incoming)) {
     current.replaceChildren(...incoming.childNodes);
     for (const child of current.children) remember(child);
@@ -83,6 +85,7 @@ const patch = (current, incoming) => {
     i++;
     j++;
   }
+  if (selected !== null) current.value = [...current.options].some((option) => option.value === selected) ? selected : fallback;
 };
 
 const keysOf = (root) => {

package/src/page/workspaceStyles.ts

@@ -0,0 +1,79 @@
+export const layout = `
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--sans); }
+a { color: var(--link); }
+button, select { font: inherit; color: inherit; }
+button, select, summary { cursor: pointer; }
+button, select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); }
+:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
+.skip { position: fixed; top: -100px; left: 16px; z-index: 5; padding: 8px 16px; background: var(--card); }
+.skip:focus { top: 8px; }
+.workspace { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
+:root[data-sidebar="closed"] .workspace { grid-template-columns: minmax(0, 1fr); }
+.sidebar { --focus: #e2bc79; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; padding: var(--space) 16px; background: var(--sidebar); color: var(--sidebar-text); }
+.sidebar[hidden] { display: none; }
+.brand { display: block; padding: 0 12px 28px; font-size: 24px; font-weight: 600; letter-spacing: -0.8px; text-decoration: none; color: var(--sidebar-text); }
+.brand span { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--sidebar-muted); }
+.sidebar .nav-heading { margin: 0 12px 12px; font: 600 12px var(--sans); color: var(--sidebar-muted); }
+.files { font-size: 14px; }
+.files ul { list-style: none; margin: 0 0 10px; padding: 0; }
+.files li { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 4px 10px; border-radius: 5px; }
+.files li:has(a[aria-current="page"]) { background: #385242; }
+.files a { flex: 1; min-width: 0; color: var(--sidebar-text); text-decoration: none; overflow-wrap: anywhere; }
+.files a:hover, .files a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
+.files details { margin: 8px 0; }
+.files summary { padding: 6px 10px; color: var(--sidebar-muted); overflow-wrap: anywhere; }
+.files details ul { margin-left: 14px; border-left: 1px solid var(--sidebar-border); }
+.age { color: var(--muted); font: 12px var(--mono); margin-left: 6px; white-space: nowrap; }
+.files .age { color: var(--sidebar-muted); margin: 0; flex-shrink: 0; }
+.page { min-width: 0; }
+.bar { display: flex; align-items: center; gap: 16px; padding: 16px var(--space); border-bottom: 1px solid var(--border); font-size: 13px; }
+.bar button { flex-shrink: 0; }
+.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.breadcrumbs > span:not(.separator) { min-width: 0; }
+.separator { color: var(--muted); }
+.live { color: var(--muted); font: 12px/1.9 var(--mono); }
+.live[data-state="down"], .live[data-state="stale"] { color: var(--danger); }
+.preferences { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px var(--space) 0; color: var(--muted); font-size: 12px; }
+.preference { display: flex; gap: 8px; align-items: center; }
+#preference-status:empty { display: none; }
+#doc { padding: var(--space) var(--space) 64px; min-width: 0; }
+.document-view { max-width: calc(72ch + 2 * var(--space)); margin-inline: auto; }
+.board-view { max-width: 1600px; margin-inline: auto; }
+.meta { color: var(--muted); font-size: 13px; margin: 0; overflow-wrap: anywhere; }
+.meta .age { margin: 0; }
+@media (max-width: 760px) {
+  .workspace { grid-template-columns: minmax(0, 1fr); }
+  .sidebar { position: static; height: auto; max-height: 42vh; border-bottom: 1px solid var(--border); }
+  .brand { padding-bottom: 16px; }
+  .bar { flex-wrap: wrap; gap: 12px; }
+  .breadcrumbs { flex-basis: calc(100% - 100px); }
+  .live { margin-left: auto; }
+  .preferences { justify-content: flex-start; }
+  :root { --space: 18px; }
+}
+`;
+const light = `
+  color-scheme: light;
+  --bg: #f7f8f4; --surface: #edf1e7; --card: #ffffff; --text: #263c34; --muted: #596957;
+  --border: #d5dfd0; --link: #315f45; --danger: #a03024; --focus: #976323;
+  --sidebar: #203a30; --sidebar-text: #e7eee2; --sidebar-muted: #b6c8ad; --sidebar-border: #4a624c;
+`;
+const dark = `
+  color-scheme: dark;
+  --bg: #18251f; --surface: #26382d; --card: #203027; --text: #e7eee2; --muted: #b0c1a6;
+  --border: #455a48; --link: #b1d4a1; --danger: #ffafa2; --focus: #e2bc79;
+  --sidebar: #142219; --sidebar-text: #e7eee2; --sidebar-muted: #b6c8ad; --sidebar-border: #455a48;
+`;
+
+export const theme = `
+:root {
+  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+  --space: 24px; --card-space: 20px;
+  ${light}
+}
+@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { ${dark} } }
+:root[data-theme="dark"] { ${dark} }
+:root[data-density="compact"] { --space: 16px; --card-space: 12px; }
+`;

package/src/render/documentHeadings.ts

@@ -0,0 +1,52 @@
+import { defineHastPlugin } from "satteri";
+
+export interface Heading {
+	readonly depth: number;
+	readonly id: string;
+	readonly title: string;
+}
+
+export function documentHeadings() {
+	const entries: Heading[] = [];
+	const used = new Set<string>();
+	const plugin = defineHastPlugin({
+		element: {
+			filter: ["h1", "h2", "h3", "h4", "h5", "h6"],
+			visit: (element, context) => {
+				if (element.properties.id !== undefined) {
+					return;
+				}
+				const title = context.textContent(element).trim();
+				const slug =
+					title
+						.normalize("NFKC")
+						.toLowerCase()
+						.replace(/[^\p{Letter}\p{Number}\s_-]/gu, "")
+						.trim()
+						.replace(/\s+/gu, "-") || "section";
+				const base = `heading-${slug}`;
+				let id = base;
+				for (let suffix = 2; used.has(id); suffix += 1) {
+					id = `${base}-${suffix}`;
+				}
+				used.add(id);
+				entries.push({ depth: Number(element.tagName.slice(1)), id, title });
+				return {
+					...element,
+					children: [
+						...element.children,
+						{
+							children: [],
+							properties: { ariaLabel: `Link to ${title || "section"}`, className: ["heading-anchor"], href: `#${id}` },
+							tagName: "a",
+							type: "element" as const,
+						},
+					],
+					properties: { ...element.properties, id, tabIndex: -1 },
+				};
+			},
+		},
+		name: "work-board-headings",
+	});
+	return { entries, plugin };
+}

package/src/render/documentLinks.ts

@@ -0,0 +1,19 @@
+import { defineHastPlugin } from "satteri";
+import { fileUrl } from "#files/url.ts";
+
+export function documentLinks(file: string) {
+	return defineHastPlugin({
+		element: {
+			filter: ["a"],
+			visit: (element) => {
+				const href = element.properties.href;
+				if (typeof href !== "string" || href.startsWith("#") || href.startsWith("/") || /^[a-z][a-z\d+.-]*:/iu.exec(href) !== null) {
+					return;
+				}
+				const target = new URL(href, `http://work-board.local${fileUrl(file)}`);
+				return { ...element, properties: { ...element.properties, href: target.pathname + target.search + target.hash } };
+			},
+		},
+		name: "work-board-document-links",
+	});
+}

package/src/render/markdown.ts

@@ -1,16 +1,33 @@
 import { Effect } from "effect";
-import { markdownToHtml } from "satteri";
+import { type HastPluginInput, markdownToHtml } from "satteri";
 import { codeBlocks } from "./code.ts";
+import type { documentHeadings } from "./documentHeadings.ts";
+import { documentLinks } from "./documentLinks.ts";
 import { RenderFailed } from "./failed.ts";
 import { footnoteIds } from "./footnotes.ts";
 import { Highlighter } from "./highlighter.ts";
 
-export const renderMarkdown = Effect.fn("WorkBoard.renderMarkdown")(function* (source: string, idPrefix = "") {
+export interface RenderOptions {
+	readonly file?: string;
+	readonly headings?: ReturnType<typeof documentHeadings>;
+	readonly idPrefix?: string;
+}
+
+export const renderMarkdown = Effect.fn("WorkBoard.renderMarkdown")(function* (source: string, options: RenderOptions = {}) {
 	const highlighter = yield* Highlighter;
+	const plugins: HastPluginInput[] = [codeBlocks(highlighter)];
+	if (options.idPrefix !== undefined) {
+		plugins.push(footnoteIds(options.idPrefix));
+	}
+	if (options.file !== undefined) {
+		plugins.push(documentLinks(options.file));
+	}
+	if (options.headings !== undefined) {
+		plugins.push(options.headings.plugin);
+	}
 	const { html } = yield* Effect.tryPromise({
 		catch: (cause) => new RenderFailed({ cause }),
-		try: async () =>
-			markdownToHtml(source, { hastPlugins: idPrefix === "" ? [codeBlocks(highlighter)] : [codeBlocks(highlighter), footnoteIds(idPrefix)] }),
+		try: async () => markdownToHtml(source, { hastPlugins: plugins }),
 	});
 	return html;
 });

package/src/search/attentionEntries.ts

@@ -0,0 +1,22 @@
+import type { MetadataDocument } from "#metadata/model.ts";
+import type { Entry } from "./entries.ts";
+
+export function attentionEntries(document: MetadataDocument, href: string): readonly Entry[] {
+	const requests = document.parsed.fields.attention ?? [];
+	return requests.flatMap((request, index) => {
+		if (requests.filter((other) => other.id === request.id).length !== 1) {
+			return [];
+		}
+		const line = document.parsed.lines[`attention.${index}`] ?? document.parsed.lines.attention;
+		return [
+			{
+				file: document.file,
+				href: `${href}#attention-request-${encodeURIComponent(request.id)}`,
+				kind: "passage",
+				...(line === undefined ? {} : { line }),
+				text: [request.reason, request.id, request.kind, request.state, ...request.responseFrom, ...request.unblocks].join(" "),
+				title: request.reason,
+			},
+		];
+	});
+}

package/src/search/collector.ts

@@ -0,0 +1,44 @@
+import type { Element } from "hast";
+import { defineHastPlugin } from "satteri";
+import { fileUrl } from "#files/url.ts";
+import type { Entry } from "./entries.ts";
+
+function sourceLine(element: Element, first: number | undefined, length: number): { readonly line?: number } {
+	if (!element.position || first === undefined || element.position.start.line > length) {
+		return {};
+	}
+	return { line: first + element.position.start.line - 1 };
+}
+
+export function searchCollector(file: string, startLine: () => number | undefined, length: () => number) {
+	const entries: Entry[] = [];
+	let passage = "";
+	let label = file;
+	const plugin = defineHastPlugin({
+		element: {
+			filter: ["h1", "h2", "h3", "h4", "h5", "h6", "p", "pre", "li", "td", "th"],
+			visit: (element, context) => {
+				const text = context.textContent(element).replace(/\s+/gu, " ").trim();
+				if (!text || element.properties.id === "footnote-label") {
+					return;
+				}
+				const heading = element.tagName.startsWith("h") && element.tagName !== "th";
+				if (heading && typeof element.properties.id === "string") {
+					passage = element.properties.id;
+					label = text;
+				}
+				entries.push({
+					file,
+					href: fileUrl(file) + (passage ? `#${encodeURIComponent(passage)}` : ""),
+					kind: heading ? "heading" : "passage",
+					...sourceLine(element, startLine(), length()),
+					text,
+					title: label,
+				});
+			},
+		},
+		name: "work-board-search-text",
+	});
+
+	return { entries, plugin };
+}

package/src/search/entries.ts

@@ -0,0 +1,51 @@
+import { markdownToHtml } from "satteri";
+import { fileUrl } from "#files/url.ts";
+import { boardOf } from "#render/board.ts";
+import { documentHeadings } from "#render/documentHeadings.ts";
+import { searchCollector } from "./collector.ts";
+import { linkCollector } from "./linkCollector.ts";
+
+export interface Entry {
+	readonly file: string;
+	readonly href: string;
+	readonly kind: "document" | "heading" | "passage";
+	readonly line?: number;
+	readonly text: string;
+	readonly title: string;
+}
+
+function fragmentLocation(source: string, fragment: string, bodyLine: number, seen: Map<string, number>): number | undefined {
+	const start = source.indexOf(fragment, seen.get(fragment) ?? 0);
+	if (start < 0) {
+		return undefined;
+	}
+	seen.set(fragment, start + fragment.length);
+	return bodyLine + source.slice(0, start).split("\n").length - 1;
+}
+
+export async function entriesOf(source: string, file: string, home: boolean, bodyLine = 1, links = new Set<string>()): Promise<readonly Entry[]> {
+	const headings = documentHeadings();
+	let fragmentLine: number | undefined = bodyLine;
+	let fragmentLength = 0;
+	const seenFragments = new Map<string, number>();
+	const { entries, plugin } = searchCollector(
+		file,
+		() => fragmentLine,
+		() => fragmentLength,
+	);
+	const board = home ? boardOf(source) : undefined;
+	const fragments = board
+		? [board.title, board.intro, ...board.sections.flatMap((section) => [section.heading, section.notes, ...section.items]), board.footer]
+		: [source];
+	for (const fragment of fragments) {
+		if (fragment) {
+			fragmentLength = fragment.split("\n").length;
+			fragmentLine = board ? fragmentLocation(source, fragment, bodyLine, seenFragments) : bodyLine;
+			await markdownToHtml(board?.definitions ? `${fragment}\n\n${board.definitions}` : fragment, {
+				hastPlugins: [headings.plugin, plugin, linkCollector(links)],
+			});
+		}
+	}
+	const title = headings.entries.find((heading) => heading.depth === 1)?.title || file;
+	return [{ file, href: fileUrl(file), kind: "document", line: bodyLine, text: `${file} ${title}`, title }, ...entries];
+}

package/src/search/linkCollector.ts

@@ -0,0 +1,16 @@
+import { defineHastPlugin } from "satteri";
+
+export function linkCollector(links: Set<string>) {
+	return defineHastPlugin({
+		element: {
+			filter: ["a"],
+			visit: (element) => {
+				const href = element.properties.href;
+				if (typeof href === "string" && !href.startsWith("#")) {
+					links.add(href);
+				}
+			},
+		},
+		name: "work-board-link-collector",
+	});
+}

package/src/search/match.ts

@@ -0,0 +1,28 @@
+import type { Entry } from "./entries.ts";
+
+function normalize(text: string): string {
+	return text.normalize("NFKC").toLowerCase().replace(/\s+/gu, " ").trim();
+}
+
+export function searchMatch(entries: readonly Entry[], query: string) {
+	const phrase = normalize(query.slice(0, 200));
+	const terms = phrase.split(" ").filter(Boolean).slice(0, 8);
+	if (terms.length === 0) {
+		return { results: [], total: 0 };
+	}
+	const matches = entries
+		.flatMap((entry, order) => {
+			const text = normalize(entry.text);
+			if (!terms.every((term) => text.includes(term))) {
+				return [];
+			}
+			const at = Math.max(0, entry.text.toLowerCase().indexOf(terms[0] ?? ""));
+			const start = Math.max(0, at - 50);
+			const snippet = (start ? "…" : "") + entry.text.slice(start, start + 180) + (entry.text.length > start + 180 ? "…" : "");
+			const ranks = { document: 0, heading: 2, passage: 4 };
+			const rank = ranks[entry.kind] + (text.includes(phrase) ? 0 : 1);
+			return [{ entry: { ...entry, snippet }, order, rank }];
+		})
+		.sort((left, right) => left.rank - right.rank || left.order - right.order);
+	return { results: matches.slice(0, 40).map((match) => match.entry), total: matches.length };
+}

package/src/search/metadataEntries.ts

@@ -0,0 +1,44 @@
+import { fileUrl } from "#files/url.ts";
+import { identityUrl } from "#metadata/links.ts";
+import type { MetadataDocument, MetadataModel } from "#metadata/model.ts";
+import { attentionEntries } from "./attentionEntries.ts";
+import type { Entry } from "./entries.ts";
+
+function itemUrl(document: MetadataDocument, model: MetadataModel): string {
+	const id = document.parsed.fields.id;
+	return model.unavailable.length === 0 && id && model.ids.get(id)?.length === 1 ? identityUrl(id) : fileUrl(document.file);
+}
+export function metadataEntries(entries: readonly Entry[], documents: readonly MetadataDocument[], model: MetadataModel): readonly Entry[] {
+	const sources = new Map(documents.map((document) => [document.file, document]));
+	const enriched = entries.map((entry) => {
+		const document = sources.get(entry.file);
+		if (entry.kind !== "document" || !document) {
+			return entry;
+		}
+		const fields = document.parsed.fields;
+		return {
+			...entry,
+			href: itemUrl(document, model),
+			text: [entry.text, fields.id, fields.kind, fields.status, fields.owner, fields.nextAction].filter(Boolean).join(" "),
+		};
+	});
+	for (const document of documents) {
+		enriched.push(...attentionEntries(document, itemUrl(document, model)));
+		const criteria = document.parsed.fields.criteria ?? [];
+		for (const [index, criterion] of criteria.entries()) {
+			if (criteria.filter((item) => item.id === criterion.id).length !== 1) {
+				continue;
+			}
+			const line = document.parsed.lines[`criteria.${index}`] ?? document.parsed.lines.criteria;
+			enriched.push({
+				file: document.file,
+				href: `${itemUrl(document, model)}#criterion-${encodeURIComponent(criterion.id)}`,
+				kind: "passage",
+				...(line === undefined ? {} : { line }),
+				text: criterion.text,
+				title: criterion.text,
+			});
+		}
+	}
+	return enriched;
+}

package/src/search/snapshot.ts

@@ -0,0 +1,59 @@
+import { Effect, FileSystem, Option, Ref, Semaphore } from "effect";
+import type { Changes } from "#files/changes.ts";
+import { markdownPath } from "#files/markdownPath.ts";
+import { type MetadataDocument, metadataModel } from "#metadata/model.ts";
+import { metadataParse } from "#metadata/parse.ts";
+import { type Entry, entriesOf } from "./entries.ts";
+import { metadataEntries } from "./metadataEntries.ts";
+
+export interface Snapshot {
+	readonly documents: readonly MetadataDocument[];
+	readonly entries: readonly Entry[];
+	readonly model: ReturnType<typeof metadataModel>;
+	readonly revision: number;
+	readonly unavailable: readonly string[];
+}
+
+export const searchSnapshot = Effect.fn("WorkBoard.searchSnapshot")(function* (root: string, home: string | undefined, changes: Changes) {
+	const cached = yield* Ref.make<Snapshot | undefined>(undefined);
+	const semaphore = yield* Semaphore.make(1);
+	const read = Effect.gen(function* () {
+		const revision = yield* changes.revision;
+		const hit = yield* Ref.get(cached);
+		if (hit?.revision === revision && (yield* Ref.get(changes.watching))) {
+			return hit;
+		}
+		const fs = yield* FileSystem.FileSystem;
+		const files = yield* changes.files;
+		const entries: Entry[] = [];
+		const documents: MetadataDocument[] = [];
+		const unavailable: string[] = [];
+		for (const file of files) {
+			const found = yield* Effect.option(
+				Effect.gen(function* () {
+					const real = yield* markdownPath(root, changes.realRoot, file.path);
+					if (real === undefined) {
+						return undefined;
+					}
+					const source = yield* fs.readFileString(real);
+					const parsed = metadataParse(source);
+					const links = new Set<string>();
+					const rendered = yield* Effect.tryPromise(() => entriesOf(parsed.body, file.path, file.path === home, parsed.bodyLine, links));
+					return { links: [...links], parsed, rendered };
+				}),
+			);
+			if (Option.isSome(found) && found.value) {
+				documents.push({ file: file.path, links: found.value.links, parsed: found.value.parsed });
+				entries.push(...found.value.rendered);
+			} else {
+				unavailable.push(file.path);
+			}
+		}
+		const model = metadataModel(documents, unavailable, home ?? files[0]?.path);
+		const enriched = metadataEntries(entries, documents, model);
+		const snapshot = { documents, entries: enriched, model, revision, unavailable };
+		yield* Ref.set(cached, unavailable.length > 0 ? undefined : snapshot);
+		return snapshot;
+	});
+	return semaphore.withPermit(read);
+});

package/src/views/items.ts

@@ -0,0 +1,55 @@
+import type { MetadataDocument } from "#metadata/model.ts";
+import type { Snapshot } from "#search/snapshot.ts";
+import { fieldFilter, type State } from "./state.ts";
+
+export interface Item {
+	readonly document: MetadataDocument;
+	readonly id: string;
+	readonly title: string;
+}
+export function itemsOf(snapshot: Snapshot): readonly Item[] {
+	const titles = new Map(snapshot.entries.filter((entry) => entry.kind === "document").map((entry) => [entry.file, entry.title]));
+	return [...snapshot.model.ids].flatMap(([id, documents]) => {
+		const document = documents.length === 1 ? documents[0] : undefined;
+		return document ? [{ document, id, title: titles.get(document.file) ?? document.file }] : [];
+	});
+}
+function matches(item: Item, state: State): boolean {
+	const fields = item.document.parsed.fields;
+	if (state.owner && fieldFilter(fields.owner) !== state.owner) {
+		return false;
+	}
+	if (state.status && fieldFilter(fields.status) !== state.status) {
+		return false;
+	}
+	const text = [item.id, item.title, fields.kind, fields.status, fields.owner, fields.nextAction]
+		.filter(Boolean)
+		.join(" ")
+		.normalize("NFKC")
+		.toLowerCase();
+	return state.query
+		.normalize("NFKC")
+		.toLowerCase()
+		.split(/\s+/u)
+		.filter(Boolean)
+		.every((term) => text.includes(term));
+}
+function order(item: Item, sort: State["sort"]): string | undefined {
+	return sort === "title" ? item.title : item.document.parsed.fields[sort];
+}
+const collator = new Intl.Collator("en", { numeric: true, sensitivity: "base" });
+export function filterItems(items: readonly Item[], state: State): readonly Item[] {
+	return items
+		.filter((item) => matches(item, state))
+		.sort((a, b) => {
+			const left = order(a, state.sort);
+			const right = order(b, state.sort);
+			if (left === undefined) {
+				return right === undefined ? a.id.localeCompare(b.id) : 1;
+			}
+			if (right === undefined) {
+				return -1;
+			}
+			return collator.compare(left, right) || a.id.localeCompare(b.id);
+		});
+}