@shivaedev/work-board 0.12.0 → 0.14.0

package/src/browser/responses/cardContext.ts

@@ -0,0 +1,50 @@
+import { reasonMarkdown } from "./reasonMarkdown.ts";
+
+export function cardContext(source: string) {
+	const recommendation = reasonMarkdown(section(source, "Recommendation"));
+	const relevant = section(source, "Relevant links");
+	const links = [...relevant.matchAll(/https?:\/\/[^\s<>()[\]]+/gu)].map(([url]) => {
+		const pr = /\/pull\/(?<number>\d+)/u.exec(url)?.groups?.number;
+		return { label: pr ? `Open PR #${pr}` : "Open relevant link", primary: Boolean(pr), url };
+	});
+	return { links, recommendation };
+}
+
+export function optionLabel(id: string, source: string, reason: string) {
+	const heading = /^#{1,6}\s+(?<title>.+)$/mu.exec(source)?.groups?.title;
+	if (heading) {
+		return heading;
+	}
+	if (id === "retry" && /reviewed pr is ready to merge/iu.test(reason)) {
+		return "Request changes (retry)";
+	}
+	return id.charAt(0).toUpperCase() + id.slice(1).replaceAll("-", " ");
+}
+
+function section(source: string, title: string) {
+	const lines = source.split("\n");
+	let active = false;
+	let fence: string | undefined;
+	const content: string[] = [];
+	for (const line of lines) {
+		const marker = /^\s*(?<fence>`{3,}|~{3,})/u.exec(line)?.groups?.fence;
+		if (!fence && (/^##\s/u.test(line) || line.startsWith("::::question"))) {
+			if (active) {
+				break;
+			}
+			active = line.trim() === `## ${title}`;
+			continue;
+		}
+		if (active) {
+			content.push(line);
+		}
+		if (marker) {
+			fence = nextFence(fence, marker);
+		}
+	}
+	return content.join("\n").trim();
+}
+
+function nextFence(current: string | undefined, marker: string) {
+	return current?.startsWith(marker.charAt(0)) && marker.length >= current.length ? undefined : marker;
+}

package/src/browser/responses/reasonMarkdown.ts

@@ -0,0 +1,5 @@
+export function reasonMarkdown(reason: string): string {
+	const source = reason.trim();
+	const fenced = /^(?<fence>`{3,}|~{3,})[^\n]*\n(?<reason>[\s\S]*?)\n\k<fence>$/u.exec(source);
+	return fenced?.groups?.reason?.trim() ?? source;
+}

package/src/browser/views/FleetItemsProjection.ts

@@ -0,0 +1,14 @@
+import { Schema } from "effect";
+import { CompletedFleetItem, FleetItem } from "#diagnostics/fleetItems.ts";
+import { Metadata } from "#metadata/schema.ts";
+
+const FleetDocument = Schema.NullOr(Schema.Struct({ file: Schema.String, metadata: Metadata, title: Schema.String }));
+export const FleetItemsProjection = Schema.Union([
+	Schema.Struct({
+		completed: Schema.Array(Schema.Struct({ ...CompletedFleetItem.fields, document: FleetDocument })),
+		items: Schema.Array(Schema.Struct({ ...FleetItem.fields, document: FleetDocument })),
+		state: Schema.Literal("ready"),
+	}),
+	Schema.Struct({ reason: Schema.String, state: Schema.Literal("unavailable") }),
+]);
+export type FleetItemsProjection = typeof FleetItemsProjection.Type;

package/src/browser/views/GoalsProjection.ts

@@ -0,0 +1,23 @@
+import { Schema } from "effect";
+import { WorkItem } from "./schema.ts";
+
+const Counts = Schema.Struct({ done: Schema.Number, "in progress": Schema.Number, planned: Schema.Number });
+const Criterion = Schema.Struct({ counts: Counts, evidence: Schema.Number, id: Schema.String, linked: Schema.Number, text: Schema.String });
+const Goal = Schema.Struct({
+	counts: Counts,
+	criteria: Schema.Array(Criterion),
+	id: Schema.String,
+	linked: Schema.Number,
+	nextAction: Schema.optional(Schema.String),
+	openAsks: Schema.Number,
+	owner: Schema.optional(Schema.String),
+	status: Schema.optional(Schema.String),
+	title: Schema.String,
+	unlinked: Schema.Boolean,
+});
+export const GoalsProjection = Schema.Struct({
+	closedGoals: Schema.Array(Goal),
+	goals: Schema.Array(Goal),
+	items: Schema.Array(WorkItem),
+});
+export type GoalsProjection = typeof GoalsProjection.Type;

package/src/browser/views/ResultProjection.ts

@@ -0,0 +1,37 @@
+import { Schema } from "effect";
+import { Document } from "#browser/document/schema.ts";
+import { Question, RecordedResponse } from "#browser/responses/schema.ts";
+
+const Link = Schema.Struct({ href: Schema.optional(Schema.String), label: Schema.String });
+const Claim = Schema.Struct({
+	checkedRevision: Schema.optional(Schema.String),
+	method: Schema.optional(Schema.String),
+	observedAt: Schema.optional(Schema.String),
+	outcome: Schema.optional(Schema.String),
+	problem: Schema.String,
+	source: Link,
+});
+export const ResultProjection = Schema.Struct({
+	document: Document,
+	feedback: Schema.Array(
+		Schema.Struct({
+			matching: Schema.Boolean,
+			question: Question,
+			questionFile: Schema.String,
+			response: RecordedResponse,
+			responseFile: Schema.String,
+			supersedesFile: Schema.optional(Schema.String),
+		}),
+	),
+	feedbackUnknown: Schema.Boolean,
+	revision: Schema.String,
+	targets: Schema.Array(
+		Schema.Struct({
+			available: Schema.Boolean,
+			criteria: Schema.Array(Schema.Struct({ claims: Schema.Array(Claim), link: Link, text: Schema.String })),
+			link: Link,
+			status: Schema.optional(Schema.String),
+		}),
+	),
+});
+export type ResultProjection = typeof ResultProjection.Type;

package/src/browser/views/goalWorkState.ts

@@ -0,0 +1,17 @@
+import type { FleetItems } from "#diagnostics/fleetItems.ts";
+
+type Stage = FleetItems["items"][number]["stage"];
+const done = new Set(["closed", "done", "superseded", "completed", "cancelled", "canceled", "resolved", "released"]);
+export function goalState(status: string | undefined, stage: Stage | undefined): string | undefined {
+	return stage && stage !== "released" ? stage : status;
+}
+export function goalWorkGroup(status: string | undefined, stage: Stage | undefined): "In progress" | "Planned" | "Done" | "Deferred" {
+	const state = goalState(status, stage)?.trim().toLowerCase();
+	if (state && done.has(state)) {
+		return "Done";
+	}
+	if (!state || state === "planned" || state === "prepared") {
+		return "Planned";
+	}
+	return state === "deferred" ? "Deferred" : "In progress";
+}

package/src/browser/views/now.ts

@@ -0,0 +1,93 @@
+import type { Metadata } from "#metadata/schema.ts";
+import type { FleetItemsProjection } from "./FleetItemsProjection.ts";
+
+export const nowLanes = ["Queued", "Executing", "Reviewing", "Delivering", "Waiting on a person", "Done in the last 7 days"] as const;
+export type NowLane = (typeof nowLanes)[number];
+export type FleetWork = Extract<FleetItemsProjection, { state: "ready" }>["items"][number];
+
+const stages: Record<FleetWork["stage"], NowLane | undefined> = {
+	adopting: "Executing",
+	completed: "Done in the last 7 days",
+	delivering: "Delivering",
+	executing: "Executing",
+	"needs-human": "Waiting on a person",
+	prepared: "Queued",
+	released: undefined,
+	repairing: "Reviewing",
+	reviewing: "Reviewing",
+	validating: "Reviewing",
+};
+
+export function isWork(metadata: Metadata): boolean {
+	return !(metadata.requestReceipt || ["board", "decision", "question", "response", "result"].includes(metadata.kind ?? ""));
+}
+
+export function laneOf(metadata: Metadata, fleet: FleetWork | undefined, approved = false): NowLane | undefined {
+	if (metadata.kind !== "task" || metadata.requestReceipt) {
+		return undefined;
+	}
+	if (fleet) {
+		return stages[fleet.stage];
+	}
+	if (["superseded", "deferred", "cancelled", "canceled", "done", "completed"].includes(metadata.status ?? "")) {
+		return undefined;
+	}
+	return authoredLane(metadata.status, approved);
+}
+
+function authoredLane(status: string | undefined, approved: boolean): NowLane | undefined {
+	if (["active", "running", "in-progress", "agent-working", "executing", "adopting"].includes(status ?? "")) {
+		return "Executing";
+	}
+	if (["blocked", "needs-human", "needs-you", "waiting-on-person"].includes(status ?? "")) {
+		return "Waiting on a person";
+	}
+	if (status === "in-review") {
+		return "Reviewing";
+	}
+	if (status === "approved" || (approved && [undefined, "planned", "received"].includes(status))) {
+		return "Queued";
+	}
+	return Object.entries(stages).find(([stage]) => stage === status)?.[1];
+}
+
+export function holderOf(metadata: Metadata, fleet: FleetWork | undefined): string | undefined {
+	if (fleet) {
+		return fleet.attentionOwner && fleet.attentionOwner !== "automation" ? fleet.attentionOwner : "Fleet";
+	}
+	return ["maintainer", "orchestrator"].includes(metadata.owner ?? "") ? metadata.owner : undefined;
+}
+
+export function cardStatus(metadata: Metadata, fleet: FleetWork | undefined, waiting: string | undefined): string | undefined {
+	if (fleet) {
+		if (fleet.stage === "needs-human") {
+			return "needs-you";
+		}
+		return fleet.stage === "completed" ? "done" : fleet.stage;
+	}
+	return waiting ? "needs-you" : metadata.status;
+}
+
+const statusOrder = [
+	"planned",
+	"received",
+	"active",
+	"running",
+	"in-progress",
+	"reviewing",
+	"repairing",
+	"validating",
+	"delivering",
+	"blocked",
+	"needs-human",
+	"done",
+	"deferred",
+	"superseded",
+];
+export function compareStatuses(left: string | undefined, right: string | undefined): number {
+	function rank(status: string | undefined) {
+		const index = statusOrder.indexOf(status ?? "");
+		return index < 0 ? statusOrder.length : index;
+	}
+	return rank(left) - rank(right) || (left ?? "\uffff").localeCompare(right ?? "\uffff", "en");
+}

package/src/browser/views/remaining.ts

@@ -0,0 +1,26 @@
+import { Schema } from "effect";
+import { Document, DocumentRequest } from "#browser/document/schema.ts";
+import { HandoffPreview, HandoffReading } from "#browser/handoffs/schema.ts";
+import { DiagnosticsSnapshot } from "#diagnostics/daemonContract.ts";
+
+export const DiagnosticsProjection = Schema.Struct({ now: Schema.Number, sources: DiagnosticsSnapshot });
+export type DiagnosticsProjection = typeof DiagnosticsProjection.Type;
+
+export const StartProjection = Schema.Struct({
+	empty: Schema.Boolean,
+	templates: Schema.Array(Schema.Struct({ file: Schema.String, label: Schema.String, source: Schema.String })),
+});
+export type StartProjection = typeof StartProjection.Type;
+export const RespondProjection = Schema.Struct({ document: Document, request: DocumentRequest });
+export type RespondProjection = typeof RespondProjection.Type;
+export const HandoffProjection = Schema.Struct({
+	background: Schema.String,
+	goal: Schema.String,
+	item: Schema.String,
+	nextAction: Schema.String,
+	reading: HandoffReading,
+	source: Schema.optional(HandoffPreview),
+	unavailable: Schema.optional(Schema.String),
+	writable: Schema.Boolean,
+});
+export type HandoffProjection = typeof HandoffProjection.Type;

package/src/browser/views/schema.ts

@@ -0,0 +1,53 @@
+import { Schema } from "effect";
+import { Document } from "#browser/document/schema.ts";
+import { Metadata } from "#metadata/schema.ts";
+import { State } from "./state.ts";
+
+export const WorkItem = Schema.Struct({
+	file: Schema.String,
+	fleetApproved: Schema.optional(Schema.Boolean),
+	id: Schema.String,
+	metadata: Metadata,
+	title: Schema.String,
+	waiting: Schema.optional(Schema.String),
+});
+export const WorkProjection = Schema.Struct({
+	boards: Schema.Array(WorkItem),
+	issues: Schema.Array(Schema.String),
+	items: Schema.Array(WorkItem),
+	rows: Schema.Array(WorkItem),
+	selected: Schema.optional(Document),
+	selectedOutside: Schema.Boolean,
+	selectionProblem: Schema.optional(Schema.String),
+	state: State,
+	title: Schema.String,
+	validBoard: Schema.Boolean,
+});
+export type WorkProjection = typeof WorkProjection.Type;
+const InboxItem = Schema.Struct({
+	earlierAsks: Schema.optional(Schema.Number),
+	file: Schema.String,
+	href: Schema.String,
+	id: Schema.String,
+	modified: Schema.optional(Schema.Number),
+	problem: Schema.optional(Schema.String),
+	reason: Schema.String,
+	responseFrom: Schema.optional(Schema.Array(Schema.String)),
+	title: Schema.String,
+});
+export const InboxProjection = Schema.Struct({
+	agents: Schema.Array(InboxItem),
+	complete: Schema.Boolean,
+	issues: Schema.Array(Schema.Struct({ file: Schema.String, line: Schema.Number, message: Schema.String })),
+	items: Schema.Array(InboxItem),
+	parked: Schema.Array(InboxItem),
+	resolved: Schema.Array(InboxItem),
+	sourceIssues: Schema.Boolean,
+	you: Schema.Array(InboxItem),
+});
+export type InboxProjection = typeof InboxProjection.Type;
+export const BoardProjection = Schema.Struct({
+	counts: Schema.Array(Schema.Struct({ count: Schema.Number, title: Schema.String })),
+	document: Document,
+});
+export type BoardProjection = typeof BoardProjection.Type;

package/src/browser/views/state.ts

@@ -0,0 +1,47 @@
+import { Option, Schema } from "effect";
+
+const View = Schema.Literals(["now", "board", "table"]);
+const Sort = Schema.Literals(["title", "owner", "status"]);
+export const State = Schema.Struct({
+	board: Schema.String,
+	item: Schema.String,
+	owner: Schema.String,
+	query: Schema.String,
+	sort: Sort,
+	status: Schema.String,
+	view: View,
+});
+export type State = typeof State.Type;
+
+export function stateOf(url: string): State {
+	const params = new URL(url, "http://127.0.0.1").searchParams;
+	return {
+		board: params.get("board") ?? "",
+		item: params.get("item") ?? "",
+		owner: params.get("owner") ?? "",
+		query: (params.get("q") ?? "").slice(0, 200),
+		sort: Option.getOrElse(Schema.decodeUnknownOption(Sort)(params.get("sort")), () => "title"),
+		status: params.get("status") ?? "",
+		view: Option.getOrElse(Schema.decodeUnknownOption(View)(params.get("view")), () => "now"),
+	};
+}
+export function viewUrl(state: State, changes: Partial<State> = {}, hash = ""): string {
+	const next = { ...state, ...changes };
+	const params = new URLSearchParams({ view: next.view });
+	for (const [key, value] of Object.entries({
+		board: next.board,
+		item: next.item,
+		owner: next.owner,
+		q: next.query,
+		sort: next.sort,
+		status: next.status,
+	})) {
+		if (value) {
+			params.set(key, value);
+		}
+	}
+	return `/_board/work?${params}${hash ? `#${hash}` : ""}`;
+}
+export function fieldFilter(value: string | undefined): string {
+	return value === undefined ? "missing" : `value:${value}`;
+}

package/src/client/client.ts

@@ -1,12 +1,12 @@
 import { Effect, Layer } from "effect";
-import { FetchHttpClient } from "effect/unstable/http";
-import type * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
-import type * as Atom from "effect/unstable/reactivity/Atom";
-import * as AtomRegistry from "effect/unstable/reactivity/AtomRegistry";
-import * as AtomRpc from "effect/unstable/reactivity/AtomRpc";
-import type * as Reactivity from "effect/unstable/reactivity/Reactivity";
-import { RpcClient, RpcSerialization } from "effect/unstable/rpc";
-import type { RpcClientError } from "effect/unstable/rpc/RpcClientError";
+import { FetchHttpClient } from "effect/http";
+import type * as AsyncResult from "effect/reactivity/AsyncResult";
+import type * as Atom from "effect/reactivity/Atom";
+import * as AtomRegistry from "effect/reactivity/AtomRegistry";
+import * as AtomRpc from "effect/reactivity/AtomRpc";
+import type * as Reactivity from "effect/reactivity/Reactivity";
+import { RpcClient, RpcSerialization } from "effect/rpc";
+import type { RpcClientError } from "effect/rpc/RpcClientError";
 import { type Bound, bind } from "@shivaedev/effect-contract/bind.ts";
 import type { Contract } from "@shivaedev/effect-contract/contract.ts";
 import { live } from "@shivaedev/effect-contract/live.ts";

package/src/client/document/Mermaid.ts

@@ -1,10 +1,16 @@
-import { createElement, useEffect, useId, useState } from "react";
+import { createElement, useCallback, useEffect, useId, useRef, useState } from "react";
+import { mermaidColor } from "./mermaidColor.ts";
+
+const drawings = new Map<string, { readonly source: string; readonly svg: string }>();
+
+const MAX_DRAWINGS = 30;
 
 type Drawing = { readonly source: string; readonly svg: string } | { readonly source: string; readonly error: string };
 
 export function Mermaid({ source }: { readonly source: string }) {
 	const id = useId().replace(/[^a-z\d_-]/giu, "");
-	const [drawing, setDrawing] = useState<Drawing>();
+	const [drawing, setDrawing] = useState<Drawing | undefined>(() => drawings.get(`${document.documentElement.dataset.scheme ?? "light"}:${source}`));
+	const previousSourceRef = useRef(source);
 	const [theme, setTheme] = useState(() => document.documentElement.dataset.scheme ?? "light");
 	useEffect(() => {
 		function sync() {
@@ -14,12 +20,25 @@ export function Mermaid({ source }: { readonly source: string }) {
 		return () => document.removeEventListener("board-theme", sync);
 	}, []);
 	useEffect(() => {
+		if (previousSourceRef.current !== source) {
+			for (const [key, value] of drawings) {
+				if (value.source === previousSourceRef.current) {
+					drawings.delete(key);
+				}
+			}
+			previousSourceRef.current = source;
+		}
+		const cached = drawings.get(`${theme}:${source}`);
+		if (cached) {
+			setDrawing(cached);
+			return;
+		}
 		let current = true;
 		async function draw() {
 			try {
 				const { default: mermaid } = await import("mermaid");
 				function token(name: string) {
-					return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+					return name === "--sans" ? getComputedStyle(document.documentElement).getPropertyValue(name).trim() : mermaidColor(name);
 				}
 				mermaid.initialize({
 					securityLevel: "strict",
@@ -30,7 +49,7 @@ export function Mermaid({ source }: { readonly source: string }) {
 						background: token("--bg"),
 						darkMode: theme === "dark",
 						fontFamily: token("--sans"),
-						lineColor: token("--muted"),
+						lineColor: token("--muted-foreground"),
 						primaryBorderColor: token("--border"),
 						primaryColor: token("--surface"),
 						primaryTextColor: token("--text"),
@@ -39,7 +58,7 @@ export function Mermaid({ source }: { readonly source: string }) {
 				});
 				const { svg } = await mermaid.render(`document-diagram-${id}`, source);
 				if (current) {
-					setDrawing({ source, svg });
+					setDrawing(retainDrawing(theme, source, svg));
 				}
 			} catch (error) {
 				if (current) {
@@ -54,21 +73,33 @@ export function Mermaid({ source }: { readonly source: string }) {
 	}, [id, source, theme]);
 	const shown = drawing?.source === source || (drawing && "svg" in drawing) ? drawing : undefined;
 	const state = drawingState(shown, source);
+	const svgSource = shown && "svg" in shown ? shown.svg : undefined;
+	const svgRef = useCallback(
+		(element: HTMLDivElement | null) => {
+			if (element && svgSource) {
+				const svg = new DOMParser().parseFromString(svgSource, "text/html").body.firstElementChild;
+				if (svg) {
+					element.replaceChildren(document.importNode(svg, true));
+				}
+			}
+		},
+		[svgSource],
+	);
 	return createElement(
 		"figure",
 		{ className: "diagram", "data-error": shown && "error" in shown ? shown.error : undefined, "data-react-diagram": "", "data-state": state },
 		shown && "svg" in shown
 			? createElement("div", {
 					className: "diagram-svg",
-					ref: (element: HTMLDivElement | null) => {
-						if (element) {
-							const svg = new DOMParser().parseFromString(shown.svg, "image/svg+xml").documentElement;
-							element.replaceChildren(document.importNode(svg, true));
-						}
-					},
+					ref: svgRef,
 				})
 			: null,
-		createElement("pre", { className: "diagram-source" }, source),
+		createElement("pre", { className: "diagram-source", hidden: !(shown && "error" in shown) }, source),
+		createElement(
+			"span",
+			{ "data-visual-tools": "" },
+			createElement("button", { "data-inspect-diagram": "", disabled: state !== "drawn", type: "button" }, "Inspect diagram"),
+		),
 		shown && "error" in shown ? createElement("p", { "data-diagram-error": "", role: "status" }, `Diagram could not be drawn: ${shown.error}`) : null,
 	);
 }
@@ -82,3 +113,13 @@ function drawingState(shown: Drawing | undefined, source: string): string {
 	}
 	return shown.source === source ? "drawn" : "redrawing";
 }
+
+function retainDrawing(theme: string, source: string, svg: string) {
+	const next = { source, svg };
+	drawings.set(`${theme}:${source}`, next);
+	const oldest = drawings.keys().next().value;
+	if (drawings.size > MAX_DRAWINGS && oldest !== undefined) {
+		drawings.delete(oldest);
+	}
+	return next;
+}

package/src/client/document/View.ts

@@ -3,10 +3,12 @@ import { type Components, MarkdownHooks } from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import type { PluggableList } from "unified";
 import type { Document } from "#browser/document/schema.ts";
+import { Age } from "#client/react/Age";
 import { documentHeadings } from "#render/documentHeadings.ts";
 import { documentLinks } from "#render/documentLinks.ts";
 import { documentPlugins } from "#render/documentPlugins.ts";
 import { footnoteIds } from "#render/footnotes.ts";
+import { boardLayout } from "./boardLayout.ts";
 import { DetailStatesContext, DocumentDetails } from "./Details.ts";
 import { highlightDocument } from "./highlight.ts";
 import { documentLayout, documentSourceId } from "./layout.ts";
@@ -25,35 +27,69 @@ const components: Components = {
 			? createElement(Fragment, null, children)
 			: createElement("pre", props, children);
 	},
+	span: ({ node, children, ...props }) => {
+		const modified = node?.properties.dataModified ?? node?.properties["data-modified"];
+		if (modified !== undefined && props.className?.split(" ").includes("age")) {
+			return createElement(Age, { modified: Number(modified), short: props.className.split(" ").includes("short") });
+		}
+		return createElement("span", props, children);
+	},
 };
 
 export interface DocumentViewProps {
+	readonly answer?: ReactNode;
+	readonly board?: readonly { readonly count: number; readonly title: string }[];
+	readonly content?: ReactNode;
 	readonly context?: ReactNode;
 	readonly document: Document;
 	readonly idPrefix?: string;
 	readonly introduction?: ReactNode;
+	readonly lead?: ReactNode;
 }
 
-const LayoutContext = createContext<{ readonly context: ReactNode; readonly introduction: ReactNode; readonly file: string }>({
+const LayoutContext = createContext<{
+	readonly answer: ReactNode;
+	readonly context: ReactNode;
+	readonly content: ReactNode;
+	readonly introduction: ReactNode;
+	readonly lead: ReactNode;
+	readonly file: string;
+	readonly identified: boolean;
+}>({
+	answer: null,
+	content: null,
 	context: null,
 	file: "",
+	identified: false,
 	introduction: null,
+	lead: null,
 });
-const layoutComponents: Components = { ...components, header: LayoutHeader };
+const layoutComponents: Components = { ...components, article: LayoutArticle, header: LayoutHeader };
+function LayoutArticle({ node, children, ...props }: React.ComponentProps<"article"> & import("react-markdown").ExtraProps) {
+	const { content } = useContext(LayoutContext);
+	return createElement("article", props, node?.properties.dataSource === undefined ? null : content, children);
+}
 function LayoutHeader({ node: _node, children, ...props }: React.ComponentProps<"header"> & import("react-markdown").ExtraProps) {
-	const { context, introduction, file } = useContext(LayoutContext);
+	const { answer, context, introduction, lead, file, identified } = useContext(LayoutContext);
 	const header = createElement("header", props, children);
-	if (props.className !== "item-introduction") {
+	if (!props.className?.split(" ").includes("item-introduction")) {
 		return header;
 	}
 	return createElement(
 		Fragment,
 		null,
-		createElement("header", props, Children.count(children) > 0 ? children : createElement("h1", null, file), introduction),
+		createElement(
+			"header",
+			{ ...props, className: `${props.className} col-span-full bg-background py-3 ${identified ? "sticky top-0 z-20 border-b border-border" : ""}` },
+			Children.count(children) > 0 ? children : createElement("h1", { className: "font-mono" }, file),
+			introduction,
+		),
+		lead,
+		answer,
 		context,
 	);
 }
-export function DocumentView({ document, idPrefix = "", context, introduction }: DocumentViewProps) {
+export function DocumentView({ document, idPrefix = "", context, content, introduction, board, answer, lead }: DocumentViewProps) {
 	const layout = context !== undefined;
 	const identity = document.identity ?? document.file;
 	const states = useMemo(() => ({ identity, values: new Map<string, boolean>() }), [identity]);
@@ -64,18 +100,23 @@ export function DocumentView({ document, idPrefix = "", context, introduction }:
 		documentLinks(document.file, document.links),
 		documentHeadings(true).plugin,
 	];
-	if (layout) {
+	if (board) {
+		rehypePlugins.push([boardLayout, board, document.modified, document.file, documentSourceId(document), layout]);
+	}
+	if (layout && !board) {
 		rehypePlugins.push([documentLayout, documentSourceId(document)]);
 	}
 	return createElement(
 		layout ? "div" : "article",
-		{ className: layout ? "document-layout" : "doc" },
+		{
+			className: layout ? "document-layout grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,68ch)_minmax(240px,1fr)] lg:gap-x-8" : "doc reading-column",
+		},
 		createElement(
 			DetailStatesContext.Provider,
 			{ key: states.identity, value: states.values },
 			createElement(
 				LayoutContext.Provider,
-				{ value: { context, file: document.file, introduction } },
+				{ value: { answer, content, context, file: document.file, identified: Boolean(document.metadata.id), introduction, lead } },
 				createElement(
 					MarkdownHooks,
 					{