@shivaedev/work-board 0.2.1 → 0.4.0

package/src/metadata/parse.ts

@@ -0,0 +1,62 @@
+import { LineCounter, parseDocument } from "yaml";
+import { metadataFields } from "./fields.ts";
+import { metadataLocations } from "./locations.ts";
+import type { Metadata } from "./schema.ts";
+
+export interface Diagnostic {
+	readonly field?: string;
+	readonly line: number;
+	readonly message: string;
+}
+export interface ParsedMetadata {
+	readonly body: string;
+	readonly bodyLine: number;
+	readonly diagnostics: readonly Diagnostic[];
+	readonly fields: Metadata;
+	readonly lines: Readonly<Record<string, number>>;
+	readonly raw?: string;
+}
+
+export function metadataParse(source: string): ParsedMetadata {
+	const plain: ParsedMetadata = { body: source, bodyLine: 1, diagnostics: [], fields: {}, lines: {} };
+	const opening = /^\uFEFF?---[ \t]*\r?\n/u.exec(source);
+	if (!opening) {
+		return plain;
+	}
+	const remainder = source.slice(opening[0].length);
+	const closing = /^---[ \t]*\r?$/mu.exec(remainder);
+	if (!closing) {
+		return { ...plain, diagnostics: [{ line: 1, message: "Unterminated frontmatter; the original Markdown is shown." }] };
+	}
+	let end = opening[0].length + closing.index + closing[0].length;
+	if (source[end] === "\n") {
+		end += 1;
+	}
+	const raw = source.slice(0, end);
+	const body = source.slice(end);
+	const bodyLine = raw.split("\n").length;
+	const counter = new LineCounter();
+	const doc = parseDocument(remainder.slice(0, closing.index), { lineCounter: counter });
+	const lines = metadataLocations(doc.contents, counter);
+	const diagnostics: Diagnostic[] = [...doc.errors, ...doc.warnings].map((error) => ({
+		line: (error.linePos?.[0].line ?? 1) + 1,
+		message: error.message,
+	}));
+	const result = { body, bodyLine, diagnostics, fields: {}, lines, raw };
+	if (doc.errors.length > 0 || doc.warnings.length > 0) {
+		return result;
+	}
+	let data: unknown;
+	try {
+		data = doc.toJS({ maxAliasCount: 50 });
+	} catch {
+		return { ...result, diagnostics: [...diagnostics, { line: 2, message: "Frontmatter aliases could not be expanded safely." }] };
+	}
+	if (data === null) {
+		return result;
+	}
+	if (typeof data !== "object" || Array.isArray(data)) {
+		return { ...plain, diagnostics: [{ line: 2, message: "Frontmatter must be a mapping; the original Markdown is shown." }] };
+	}
+	return { ...result, ...metadataFields(data, lines) };
+}

package/src/metadata/problems.ts

@@ -0,0 +1,66 @@
+import { attentionProblems } from "./attentionProblems.ts";
+import type { MetadataDocument } from "./model.ts";
+import type { Diagnostic } from "./parse.ts";
+
+function referenceProblem(target: string, ids: ReadonlyMap<string, readonly MetadataDocument[]>): string | undefined {
+	const [id = "", criterion] = target.split("#");
+	const matches = ids.get(id);
+	if (!matches?.length) {
+		return `Unresolved reference ${target}.`;
+	}
+	if (matches.length > 1) {
+		return `Ambiguous reference ${target}; the ID is duplicated.`;
+	}
+	if (criterion && matches[0]?.parsed.fields.criteria?.filter((item) => item.id === criterion).length !== 1) {
+		return `Unresolved or duplicated criterion ${target}.`;
+	}
+	return undefined;
+}
+function criterionProblems(document: MetadataDocument): readonly Diagnostic[] {
+	const criteria = document.parsed.fields.criteria ?? [];
+	return criteria.flatMap((criterion, index) =>
+		criteria.filter((item) => item.id === criterion.id).length > 1
+			? [{ field: "criteria", line: document.parsed.lines[`criteria.${index}`] ?? 2, message: `Duplicate criterion ID ${criterion.id}.` }]
+			: [],
+	);
+}
+function referenceProblems(document: MetadataDocument, ids: ReadonlyMap<string, readonly MetadataDocument[]>): readonly Diagnostic[] {
+	const { fields, lines } = document.parsed;
+	const references = [
+		...(fields.attention?.flatMap((request, index) =>
+			request.unblocks.map((target, targetIndex) => ({ field: "attention", key: `attention.${index}.unblocks.${targetIndex}`, target })),
+		) ?? []),
+		...(fields.relationships?.map((link, index) => ({ field: "relationships", key: `relationships.${index}.target`, target: link.target })) ?? []),
+		...(fields.items?.map((target, index) => ({ field: "items", key: `items.${index}`, target })) ?? []),
+		...(fields.evidence?.flatMap((item, index) =>
+			item.criterion ? [{ field: "evidence", key: `evidence.${index}.criterion`, target: item.criterion }] : [],
+		) ?? []),
+	];
+	return references.flatMap((reference) => {
+		const message = referenceProblem(reference.target, ids);
+		return message ? [{ field: reference.field, line: lines[reference.key] ?? lines[reference.field] ?? 2, message }] : [];
+	});
+}
+export function metadataProblems(document: MetadataDocument, ids: ReadonlyMap<string, readonly MetadataDocument[]>, unavailable: readonly string[]) {
+	const { parsed } = document;
+	const problems = [...parsed.diagnostics, ...criterionProblems(document), ...attentionProblems(document)];
+	const matches = parsed.fields.id ? ids.get(parsed.fields.id) : undefined;
+	if (matches && matches.length > 1) {
+		problems.push({
+			field: "id",
+			line: parsed.lines.id ?? 2,
+			message: `Duplicate ID ${parsed.fields.id}: ${matches.map((item) => item.file).join(", ")}. No source is selected.`,
+		});
+	}
+	if (unavailable.length > 0) {
+		if (parsed.raw !== undefined) {
+			problems.push({
+				line: 1,
+				message: `Workspace index incomplete; could not read ${unavailable.join(", ")}. Identity and references cannot be validated completely.`,
+			});
+		}
+	} else {
+		problems.push(...referenceProblems(document, ids));
+	}
+	return problems;
+}

package/src/metadata/relationshipLabel.ts

@@ -0,0 +1,14 @@
+const labels = new Map([
+	["attention target", "Attention request"],
+	["board member", "Board membership"],
+	["criterion evidence", "Criterion evidence"],
+	["depends_on", "Depends on"],
+	["evidence source", "Evidence source"],
+	["implements", "Implements"],
+	["informs", "Informs"],
+	["relates_to", "Related to"],
+]);
+
+export function relationshipLabel(kind: string): string {
+	return labels.get(kind) ?? kind;
+}

package/src/metadata/schema.ts

@@ -0,0 +1,45 @@
+import { Schema } from "effect";
+
+export const Identity = Schema.String.check(Schema.isPattern(/^[a-zA-Z\d][a-zA-Z\d._-]*$/u));
+export const Reference = Schema.String.check(Schema.isPattern(/^[a-zA-Z\d][a-zA-Z\d._-]*(?:#[a-zA-Z\d][a-zA-Z\d._-]*)?$/u));
+const Text = Schema.String.check(Schema.isPattern(/\S/u));
+const Attention = Schema.Struct({
+	id: Identity,
+	kind: Schema.Literals(["decision", "review", "blocker"]),
+	reason: Text,
+	responseFrom: Schema.Array(Text).check(Schema.isMinLength(1)),
+	state: Schema.Literals(["open", "closed"]),
+	unblocks: Schema.Array(Reference).check(Schema.isMinLength(1)),
+}).pipe(Schema.encodeKeys({ responseFrom: "response_from" }));
+const Criterion = Schema.Struct({ id: Identity, text: Text });
+const Relationship = Schema.Struct({ kind: Schema.Literals(["implements", "informs", "depends_on", "relates_to"]), target: Reference });
+const Evidence = Schema.Struct({
+	checkedRevision: Schema.optional(Schema.String.check(Schema.isPattern(/^(?:[a-f\d]{40}|[a-f\d]{64})$/iu))),
+	criterion: Schema.optional(Reference),
+	method: Schema.optional(Text),
+	observedAt: Schema.optional(
+		Text.check(
+			Schema.makeFilter(
+				(value) =>
+					(Number.isFinite(Date.parse(value)) && /^\d{4}-\d{2}-\d{2}T.*(?:Z|[+-]\d{2}:\d{2})$/u.exec(value) !== null)
+					|| "Expected an ISO timestamp with timezone",
+			),
+		),
+	),
+	outcome: Schema.optional(Text),
+	source: Text,
+}).pipe(Schema.encodeKeys({ checkedRevision: "checked_revision", observedAt: "observed_at" }));
+
+export const Metadata = Schema.Struct({
+	attention: Schema.optional(Schema.Array(Attention)),
+	criteria: Schema.optional(Schema.Array(Criterion)),
+	evidence: Schema.optional(Schema.Array(Evidence)),
+	id: Schema.optional(Identity),
+	items: Schema.optional(Schema.Array(Identity)),
+	kind: Schema.optional(Schema.Literals(["task", "investigation", "decision", "result", "project", "board"])),
+	nextAction: Schema.optional(Text),
+	owner: Schema.optional(Text),
+	relationships: Schema.optional(Schema.Array(Relationship)),
+	status: Schema.optional(Text),
+}).pipe(Schema.encodeKeys({ nextAction: "next_action" }));
+export type Metadata = typeof Metadata.Type;

package/src/metadata/sourceLinks.ts

@@ -0,0 +1,46 @@
+import { fileUrl } from "#files/url.ts";
+import { referenceTarget } from "./links.ts";
+import type { MetadataModel } from "./model.ts";
+
+const BASE = "http://work-board.local";
+const absolute = /^(?:[a-z][a-z\d+.-]*:|\/\/)/iu;
+
+export function sourceHref(source: string, file: string): string | undefined {
+	try {
+		const url = new URL(source, `${BASE}${fileUrl(file)}`);
+		if (!["http:", "https:"].includes(url.protocol)) {
+			return undefined;
+		}
+		return absolute.exec(source) === null ? url.pathname + url.search + url.hash : url.href;
+	} catch {
+		return undefined;
+	}
+}
+
+export function referenceFile(reference: string, model: MetadataModel): string | undefined {
+	if (!referenceTarget(reference, model)) {
+		return undefined;
+	}
+	return model.ids.get(reference.split("#")[0] ?? "")?.[0]?.file;
+}
+
+export function sourceFile(source: string, file: string, model: MetadataModel): string | undefined {
+	const href = sourceHref(source, file);
+	if (!href?.startsWith("/")) {
+		return undefined;
+	}
+	const url = new URL(href, BASE);
+	try {
+		const path = decodeURIComponent(url.pathname);
+		if (path === "/") {
+			return model.rootFile;
+		}
+		const identity = /^\/_board\/item\/(?<id>[^/]+)\/$/u.exec(path)?.groups?.id;
+		if (identity) {
+			return referenceFile(identity, model);
+		}
+		return /\.md$/iu.exec(path) === null ? undefined : path.slice(1);
+	} catch {
+		return undefined;
+	}
+}

package/src/page/attentionDetails.ts

@@ -0,0 +1,18 @@
+import { attentionSource } from "#attention/requests.ts";
+import type { MetadataModel } from "#metadata/model.ts";
+import type { ParsedMetadata } from "#metadata/parse.ts";
+import { escapeHtml } from "./escape.ts";
+import { referenceHtml } from "./metadataLinks.ts";
+
+export function attentionDetails(parsed: ParsedMetadata, file: string, model: MetadataModel): string {
+	const requests = parsed.fields.attention ?? [];
+	if (requests.length === 0) {
+		return "";
+	}
+	return `<h3>Recorded attention requests</h3><p>Open/closed is source state. Closing a request does not establish acceptance or record an answer.</p><ul>${requests
+		.map(
+			(request, index) =>
+				`<li id="${attentionSource({ file, parsed }, index)}" tabindex="-1"><b>${escapeHtml(request.kind)} · ${escapeHtml(request.id)} · ${escapeHtml(request.state)}</b><p>${escapeHtml(request.reason)}</p><p>Response needed from: ${request.responseFrom.map(escapeHtml).join(", ")}</p><p>Recorded to unblock: ${request.unblocks.map((target) => referenceHtml(target, target, model)).join(", ")}</p><p>Source: ${escapeHtml(file)}:${parsed.lines[`attention.${index}`] ?? parsed.lines.attention ?? 2}</p></li>`,
+		)
+		.join("")}</ul>`;
+}

package/src/page/backlinksHtml.ts

@@ -0,0 +1,18 @@
+import { backlinksOf } from "#metadata/backlinks.ts";
+import type { MetadataModel } from "#metadata/model.ts";
+import { relationshipLabel } from "#metadata/relationshipLabel.ts";
+import { escapeHtml } from "./escape.ts";
+import { documentReference } from "./metadataLinks.ts";
+
+export function backlinksHtml(file: string, model: MetadataModel): string {
+	const links = backlinksOf(file, model);
+	if (links.length === 0) {
+		return "";
+	}
+	const entries = [...new Map(links.map((link) => [`${link.file}:${link.kind}:${link.line ?? ""}`, link])).values()];
+	const incomplete =
+		model.unavailable.length > 0
+			? "<p>Available source references only; unreadable files prevent complete backlink and identity validation.</p>"
+			: "";
+	return `<section class="work-context" aria-label="Source backlinks"><details data-key="work-backlinks"><summary>Referenced by (${entries.length})</summary>${incomplete}<ul>${entries.map((link) => `<li>${escapeHtml(relationshipLabel(link.kind))}: <a href="${escapeHtml(documentReference(link.file, model))}">${escapeHtml(link.file)}${link.line === undefined ? "" : `:${link.line}`}</a></li>`).join("")}</ul><p>These are explicit source links, not inferred blockers or workflow rules.</p></details></section>`;
+}

package/src/page/board.ts

@@ -1,7 +1,9 @@
 import { Effect } from "effect";
 import { type Board, countsOf, type Section } from "#render/board.ts";
+import { documentHeadings } from "#render/documentHeadings.ts";
 import { renderMarkdown } from "#render/markdown.ts";
 import { escapeHtml } from "./escape.ts";
+import { readingTools } from "./readingTools.ts";
 import { updated } from "./updated.ts";
 
 const counts = (board: Board): string =>
@@ -12,22 +14,30 @@ const counts = (board: Board): string =>
 type Render = (fragment: string) => ReturnType<typeof renderMarkdown>;
 
 const section = Effect.fn("WorkBoard.section")(function* ({ heading, items, notes }: Section, render: Render) {
-	const rendered = yield* Effect.forEach(items, (item) => Effect.map(render(item), (html) => `<article class="item">${html}</article>`));
+	const title = yield* render(heading);
 	const note = notes === "" ? "" : `<div class="notes">${yield* render(notes)}</div>`;
-	return `<section>${yield* render(heading)}${note}${rendered.join("")}</section>`;
+	const rendered = yield* Effect.forEach(items, (item) => Effect.map(render(item), (html) => `<article class="item">${html}</article>`));
+	return `<section>${title}${note}${rendered.join("")}</section>`;
 });
 
-export const boardHtml = Effect.fn("WorkBoard.boardHtml")(function* (board: Board, fallbackTitle: string, modified: number) {
+export const boardHtml = Effect.fn("WorkBoard.boardHtml")(function* (board: Board, fallbackTitle: string, modified: number, metadata = "") {
 	let fragments = 0;
+	const headings = documentHeadings();
 	const render: Render = (fragment) => {
 		fragments += 1;
-		return renderMarkdown(board.definitions === "" ? fragment : `${fragment}\n\n${board.definitions}`, `part-${fragments}-`);
+		return renderMarkdown(board.definitions === "" ? fragment : `${fragment}\n\n${board.definitions}`, {
+			file: fallbackTitle,
+			headings,
+			idPrefix: `part-${fragments}-`,
+		});
 	};
 	const title = board.title === "" ? `<h1>${escapeHtml(fallbackTitle)}</h1>` : yield* render(board.title);
 	const intro = board.intro === "" ? "" : `<div class="intro">${yield* render(board.intro)}</div>`;
 	const sections = yield* Effect.forEach(board.sections, (each) => section(each, render));
 	const footer = board.footer === "" ? "" : `<footer>${yield* render(board.footer)}</footer>`;
 	return [
+		readingTools(headings.entries),
+		metadata,
 		`<header class="board-head">${title}${intro}`,
 		`<p class="counts">${counts(board)}</p>`,
 		`<p class="meta">${updated(modified)}</p></header>`,

package/src/page/client.ts

@@ -1,6 +1,12 @@
 export const client = `
+import "/_board/saved-views.js";
+import "/_board/history.js";
+import "/_board/preferences.js";
+import "/_board/search.js";
 import { renderDiagrams } from "/_board/diagrams.js";
-import { remember, swap } from "/_board/swap.js";
+import { applyPage } from "/_board/page-state.js";
+import { pageVersion } from "/_board/navigation.js";
+import { remember } from "/_board/swap.js";
 
 const since = (modified) => {
   const seconds = Math.max(0, Math.round((Date.now() - modified) / 1000));
@@ -32,22 +38,23 @@ const show = () => {
 };
 
 const load = async () => {
+  const version = pageVersion();
+  const path = location.pathname + location.search;
   try {
-    const response = await fetch(location.pathname, { cache: "no-store" });
+    const response = await fetch(path, { cache: "no-store" });
     const next = new DOMParser().parseFromString(await response.text(), "text/html");
     const files = next.getElementById("files");
     const doc = next.getElementById("doc");
+    if (version !== pageVersion()) return;
     if (files === null || doc === null) {
       failure = "refresh failed (" + response.status + ")";
       return;
     }
     failure = "";
-    swap(document.getElementById("files"), files);
-    swap(document.getElementById("doc"), doc);
-    document.title = next.title;
+    applyPage(next, true);
     tick();
-    renderDiagrams(document);
   } catch {
+    if (version !== pageVersion()) return;
     failure = "refresh failed";
   }
 };
@@ -71,6 +78,7 @@ const refresh = async () => {
 const events = new EventSource("/events");
 events.addEventListener("ready", () => {
   connected = true;
+  document.dispatchEvent(new Event("board-index-change"));
   show();
   if (dropped) refresh();
   dropped = false;
@@ -80,11 +88,62 @@ const down = () => {
   dropped = true;
   show();
 };
-events.addEventListener("change", refresh);
+events.addEventListener("change", () => { refresh(); document.dispatchEvent(new Event("board-index-change")); });
 events.addEventListener("down", down);
 events.addEventListener("error", down);
 
+document.addEventListener("board-page", tick);
 tick();
 setInterval(tick, 5000);
 renderDiagrams(document);
 `;
+export const preferences = `
+const root = document.documentElement;
+const key = "work-board:appearance:" + root.dataset.workspace;
+const theme = document.getElementById("theme");
+const density = document.getElementById("density");
+const sidebar = document.getElementById("sidebar");
+const toggle = document.getElementById("sidebar-toggle");
+const status = document.getElementById("preference-status");
+const system = matchMedia("(prefers-color-scheme: dark)");
+let saved = {};
+try {
+  const value = JSON.parse(localStorage.getItem(key) ?? "{}");
+  if (value !== null && typeof value === "object" && !Array.isArray(value)) saved = value;
+} catch {
+  status.textContent = "Preferences apply to this page only.";
+}
+
+theme.value = ["light", "dark"].includes(saved.theme) ? saved.theme : "system";
+density.value = saved.density === "compact" ? "compact" : "comfortable";
+let closed = typeof saved.closed === "boolean" ? saved.closed : matchMedia("(max-width: 760px)").matches;
+
+const appearance = () => {
+  root.dataset.theme = theme.value;
+  root.dataset.scheme = theme.value === "system" ? (system.matches ? "dark" : "light") : theme.value;
+  root.dataset.density = density.value;
+  root.dataset.sidebar = closed ? "closed" : "open";
+  sidebar.hidden = closed;
+  toggle.setAttribute("aria-expanded", String(!closed));
+  document.dispatchEvent(new Event("board-theme"));
+};
+
+const save = () => {
+  appearance();
+  try {
+    localStorage.setItem(key, JSON.stringify({ theme: theme.value, density: density.value, closed }));
+    status.textContent = "";
+  } catch {
+    status.textContent = "Preferences apply to this page only.";
+  }
+};
+
+theme.addEventListener("change", save);
+density.addEventListener("change", save);
+toggle.addEventListener("click", () => {
+  closed = !closed;
+  save();
+});
+system.addEventListener("change", appearance);
+appearance();
+`;

package/src/page/criteriaEvidence.ts

@@ -0,0 +1,36 @@
+import { referenceTarget } from "#metadata/links.ts";
+import type { MetadataModel } from "#metadata/model.ts";
+import type { ParsedMetadata } from "#metadata/parse.ts";
+import { escapeHtml } from "./escape.ts";
+import { documentReference } from "./metadataLinks.ts";
+
+function evidenceFor(reference: string, model: MetadataModel): string {
+	const records = model.documents.flatMap(
+		(document) =>
+			document.parsed.fields.evidence?.flatMap((evidence, index) =>
+				evidence.criterion === reference ? [{ file: document.file, index, line: document.parsed.lines[`evidence.${index}.source`] }] : [],
+			) ?? [],
+	);
+	if (records.length === 0) {
+		return "<p>No recorded evidence naming this criterion. Acceptance is not established.</p>";
+	}
+	return `<p>${records.length} recorded ${records.length === 1 ? "claim" : "claims"}, not verified acceptance:</p><ul>${records.map((record) => `<li><a href="${escapeHtml(documentReference(record.file, model, `#recorded-evidence-${record.index}`))}">${escapeHtml(record.file)}${record.line === undefined ? "" : `:${record.line}`} — open recorded evidence</a></li>`).join("")}</ul>`;
+}
+
+export function criteriaEvidence(parsed: ParsedMetadata, model: MetadataModel): string {
+	const criteria = parsed.fields.criteria ?? [];
+	if (criteria.length === 0) {
+		return "";
+	}
+	return `<h3>Criteria and recorded evidence</h3><ul>${criteria
+		.map((criterion) => {
+			const unique = criteria.filter((candidate) => candidate.id === criterion.id).length === 1;
+			const reference = parsed.fields.id ? `${parsed.fields.id}#${criterion.id}` : "";
+			const evidence =
+				reference && referenceTarget(reference, model)
+					? evidenceFor(reference, model)
+					: "<p>Evidence association requires unique item/criterion IDs and a readable workspace. Acceptance is not established.</p>";
+			return `<li${unique ? ` id="criterion-${escapeHtml(criterion.id)}" tabindex="-1"` : ""}><b>${escapeHtml(criterion.id)}</b>: ${escapeHtml(criterion.text)}${evidence}</li>`;
+		})
+		.join("")}</ul>`;
+}

package/src/page/diagrams.ts

@@ -13,7 +13,7 @@ const load = async () => {
     securityLevel: "strict",
     theme: "base",
     themeVariables: {
-      darkMode: dark.matches,
+      darkMode: schemeNow() === "dark",
       background: token("--bg"),
       primaryColor: token("--surface"),
       primaryTextColor: token("--text"),
@@ -26,7 +26,8 @@ const load = async () => {
   return mermaid;
 };
 
-const schemeNow = () => (dark.matches ? "dark" : "light");
+const schemeNow = () => document.documentElement.dataset.scheme ?? (dark.matches ? "dark" : "light");
+let lastScheme = schemeNow();
 
 const draw = async (figure) => {
   const source = figure.querySelector(".diagram-source").textContent;
@@ -65,8 +66,15 @@ export const renderDiagrams = (root, selector = "figure.diagram:not([data-state=
   return Promise.all([...root.querySelectorAll(selector)].map(draw));
 };
 
-dark.addEventListener("change", () => {
+const themeChanged = () => {
+  const scheme = schemeNow();
+  if (lastScheme === scheme) return;
+  lastScheme = scheme;
+  const doc = document.getElementById("doc");
+  if (doc) doc.dataset.scheme = scheme;
   mermaid = undefined;
   renderDiagrams(document, "figure.diagram");
-});
+};
+document.addEventListener("board-theme", themeChanged);
+dark.addEventListener("change", themeChanged);
 `;

package/src/page/document.ts

@@ -1,10 +1,13 @@
 import { Effect } from "effect";
 import type { MarkdownFile } from "#files/list.ts";
+import { documentHeadings } from "#render/documentHeadings.ts";
 import { renderMarkdown } from "#render/markdown.ts";
 import { escapeHtml } from "./escape.ts";
+import { readingTools } from "./readingTools.ts";
 import { updated } from "./updated.ts";
 
-export const documentHtml = Effect.fn("WorkBoard.documentHtml")(function* (source: string, file: MarkdownFile) {
-	const html = yield* renderMarkdown(source);
-	return `<p class="meta">${escapeHtml(file.path)} · ${updated(file.modified)}</p><article class="doc">${html}</article>`;
+export const documentHtml = Effect.fn("WorkBoard.documentHtml")(function* (source: string, file: MarkdownFile, metadata = "") {
+	const headings = documentHeadings();
+	const html = yield* renderMarkdown(source, { file: file.path, headings });
+	return `${readingTools(headings.entries)}<p class="meta">${escapeHtml(file.path)} · ${updated(file.modified)}</p>${metadata}<article class="doc">${html}</article>`;
 });

package/src/page/libraryScript.ts

@@ -0,0 +1,72 @@
+export function libraryScript(): string {
+	return `
+const root = document.documentElement;
+const key = "work-board:library:" + root.dataset.workspace;
+const library = document.getElementById("reading-library");
+let favorites = [];
+let recents = [];
+let notice = "";
+const valid = (items) => Array.isArray(items) ? items.filter((item) => item && typeof item.file === "string" && item.file !== "" && typeof item.title === "string") : [];
+try {
+  const saved = JSON.parse(localStorage.getItem(key) ?? "{}");
+  favorites = valid(saved?.favorites);
+  recents = valid(saved?.recents);
+} catch { notice = "Reading history applies to this page only."; }
+const save = () => {
+  try { localStorage.setItem(key, JSON.stringify({ favorites, recents })); notice = ""; }
+  catch { notice = "Reading history applies to this page only."; }
+};
+const hrefOf = (file) => "/" + file.split("/").map(encodeURIComponent).join("/");
+const list = (title, items) => {
+  const heading = document.createElement("h2");
+  heading.className = "nav-heading";
+  heading.textContent = title;
+  const ul = document.createElement("ul");
+  const available = new Set([...document.querySelectorAll("#files a")].map((a) => new URL(a.href).pathname));
+  for (const item of items) {
+    const li = document.createElement("li");
+    const a = document.createElement("a");
+    a.href = hrefOf(item.file);
+    a.textContent = item.title;
+    if (item.file === document.getElementById("doc").dataset.file) a.setAttribute("aria-current", "page");
+    if (!available.has(a.pathname)) {
+      a.textContent += " (missing)";
+      a.className = "missing";
+    }
+    li.append(a); ul.append(li);
+  }
+  return [heading, ul];
+};
+export const refreshLibrary = (visit = false) => {
+  const doc = document.getElementById("doc");
+  const title = doc.querySelector("h1")?.textContent.trim() || doc.dataset.file;
+  document.title = title ? title + " · Work Board" : "Work Board";
+  const active = document.querySelector('#files a[aria-current="page"]');
+  if (active) active.title = title;
+  const toggle = document.getElementById("favorite-toggle");
+  if (toggle) {
+    const saved = favorites.some((item) => item.file === doc.dataset.file);
+    toggle.disabled = false;
+    toggle.setAttribute("aria-pressed", String(saved));
+    toggle.textContent = saved ? "Remove favorite" : "Save favorite";
+    if (visit) {
+      recents = [{ file: doc.dataset.file, title }, ...recents.filter((item) => item.file !== doc.dataset.file)].slice(0, 10);
+      save();
+    }
+  }
+  const status = document.createElement("p");
+  status.className = "library-status";
+  status.setAttribute("role", "status");
+  status.textContent = notice;
+  library.replaceChildren(...(favorites.length ? list("Favorites", favorites) : []), ...(recents.length ? list("Recent documents", recents) : []), ...(notice ? [status] : []));
+  library.hidden = favorites.length === 0 && recents.length === 0 && notice === "";
+};
+document.addEventListener("click", (event) => {
+  if (!event.target.closest?.("#favorite-toggle")) return;
+  const doc = document.getElementById("doc");
+  const file = doc.dataset.file;
+  favorites = favorites.some((item) => item.file === file) ? favorites.filter((item) => item.file !== file) : [...favorites, { file, title: doc.querySelector("h1")?.textContent.trim() || file }];
+  save(); refreshLibrary();
+});
+`;
+}

package/src/page/metadata.ts

@@ -0,0 +1,40 @@
+import { identityUrl } from "#metadata/links.ts";
+import type { MetadataModel } from "#metadata/model.ts";
+import type { ParsedMetadata } from "#metadata/parse.ts";
+import { stateOf, viewUrl } from "#views/state.ts";
+import { backlinksHtml } from "./backlinksHtml.ts";
+import { escapeHtml } from "./escape.ts";
+import { metadataDetails } from "./metadataDetails.ts";
+
+export function metadataHtml(parsed: ParsedMetadata, file: string, model: MetadataModel): string {
+	const backlinks = backlinksHtml(file, model);
+	const diagnostics = model.diagnostics.get(file) ?? parsed.diagnostics;
+	if (parsed.raw === undefined && diagnostics.length === 0) {
+		return backlinks;
+	}
+	const fields = parsed.fields;
+	const unique = model.unavailable.length === 0 && fields.id !== undefined && model.ids.get(fields.id)?.length === 1;
+	const problems =
+		diagnostics.length > 0
+			? `<div class="metadata-problems" role="status"><b>Source diagnostics</b><ul>${diagnostics.map((problem) => `<li>${escapeHtml(file)}:${problem.line} — ${escapeHtml(problem.message)}</li>`).join("")}</ul></div>`
+			: "";
+	const identity =
+		unique && fields.id
+			? `<a href="${identityUrl(fields.id)}">Item link: ${escapeHtml(fields.id)}</a>`
+			: `ID: ${escapeHtml(fields.id ?? "Not recorded")}`;
+	const details = metadataDetails(parsed, file, model);
+	const boardLink =
+		unique && fields.kind === "board" && fields.id
+			? `<p><a href="${escapeHtml(viewUrl(stateOf("/"), { board: fields.id }))}">View this board</a></p>`
+			: "";
+	return `<section class="work-meta" aria-label="Recorded work"><p class="metadata-summary">Recorded work · ${identity}${fields.status ? ` · ${escapeHtml(fields.status)}` : ""}${fields.owner ? ` · ${escapeHtml(fields.owner)}` : ""}</p>${fields.nextAction ? `<p>Next action: ${escapeHtml(fields.nextAction)}</p>` : ""}${boardLink}${problems}<details data-key="work-metadata"><summary>Work details and source</summary>${details}<p>Source: ${escapeHtml(file)}:${parsed.lines.id ?? 1}; prose starts at line ${parsed.bodyLine}.</p>${parsed.raw ? `<details data-key="frontmatter-source"><summary>Original frontmatter</summary><pre>${escapeHtml(parsed.raw)}</pre></details>` : ""}</details></section>${backlinks}`;
+}
+
+export const metadataStyles = `
+.work-meta{font-size:.9rem;margin:16px 0 24px;padding:12px 16px;border:1px solid var(--border);border-radius:8px;background:var(--surface);overflow-wrap:anywhere}
+.metadata-summary{font-weight:600;margin:0}.work-meta>p{margin-bottom:8px}.work-meta details{margin:0}.work-meta summary{color:var(--link)}
+.work-meta dl{display:grid;grid-template-columns:minmax(80px,auto) minmax(0,1fr);gap:4px 12px;margin:12px 0}.work-meta dt{color:var(--muted)}.work-meta dd{margin:0}
+.work-meta pre{max-height:300px;overflow:auto;margin-top:12px}.metadata-problems{color:var(--danger);margin:12px 0}.metadata-problems ul{margin:4px 0 12px;padding-left:20px}
+.work-context{font-size:.9rem;margin:12px 0 24px;padding:12px 16px;border:1px solid var(--border);border-radius:8px;overflow-wrap:anywhere}.work-context details{margin:0}.work-context ul{margin:12px 0}.work-context p{font-size:13px;color:var(--muted);margin:8px 0 0}
+[id^="recorded-evidence-"],[id^="criterion-"]{scroll-margin-top:20px}
+`;