@try-works/dsh-recursive-mode 0.2.3 → 0.2.4

package/lib/client.js

@@ -405,64 +405,6 @@ window.__ModuleLoader__.load({
 			})));
 		}
 		//#endregion
-		//#region src/client/inspector.tsx
-		/**
-		* Drill-down inspector (SP2 R1 + run 15/16): centered modal-style detail panel
-		* (Paper .detail shape) with back + close, data-theme (default light), theme
-		* toggle, and solid status pills. All from the live host-route snapshot.
-		* useBoardTheme is hoisted ABOVE the not-found early return.
-		*/
-		function closeButton(onClose) {
-			if (onClose === void 0) return null;
-			return (0, react.createElement)("button", {
-				type: "button",
-				className: "rec-close",
-				onClick: onClose,
-				title: "Close",
-				"aria-label": "Close"
-			}, "×");
-		}
-		function solidPill(kind) {
-			return (0, react.createElement)("span", {
-				className: "rec-pill",
-				"data-pill": kind
-			}, PILL_LABELS[kind]);
-		}
-		function detailShell(runId, onBackToToolDetails, onClose, headerExtra, body, theme, toggle) {
-			return (0, react.createElement)("div", {
-				className: "rec-inspector",
-				"data-theme": theme
-			}, (0, react.createElement)("div", { className: "rec-detail" }, (0, react.createElement)("div", { className: "rec-detail-header" }, (0, react.createElement)("button", {
-				type: "button",
-				className: "rec-back",
-				onClick: onBackToToolDetails
-			}, "← Back"), (0, react.createElement)("h2", { className: "rec-detail-title" }, runId), headerExtra, (0, react.createElement)(ThemeToggle, {
-				theme,
-				toggle
-			}), closeButton(onClose)), (0, react.createElement)("div", { className: "rec-detail-body" }, body)));
-		}
-		function Inspector({ runId, worktreeRoot, snapshot, onBackToToolDetails, onClose }) {
-			const { theme, toggle } = useBoardTheme();
-			const card = snapshot?.projection?.[worktreeRoot]?.[runId];
-			if (card === void 0) return detailShell(runId, onBackToToolDetails, onClose, null, (0, react.createElement)("p", { className: "rec-detail-text" }, "Run not found: " + runId), theme, toggle);
-			const facts = cardFacts(card);
-			const rows = expandPhaseRows(card);
-			return detailShell(runId, onBackToToolDetails, onClose, solidPill(cardPill(card)), (0, react.createElement)("section", { className: "rec-detail-section" }, (0, react.createElement)("h3", {}, "Phases"), rows.map((row) => (0, react.createElement)("div", {
-				key: row.phase,
-				className: "rec-phase-row"
-			}, (0, react.createElement)("span", { className: "rec-phase-id" }, row.phase), (0, react.createElement)("span", { className: "rec-phase-name" }, row.fileName ?? "—"), solidPill(phaseStatusPill(row.status)), row.lockHash !== void 0 && (0, react.createElement)("code", { className: "rec-lockhash" }, "#" + row.lockHash.slice(0, 8)))), facts.gateBlocked && (0, react.createElement)("div", { className: "rec-detail-section" }, (0, react.createElement)("h3", {}, "Gate"), (0, react.createElement)("p", { className: "rec-detail-text" }, "Blocked (" + (facts.gateKind ?? "") + ")"))), theme, toggle);
-		}
-		//#endregion
-		//#region src/client/settings.tsx
-		/**
-		* Recursive settings page (Phase D R8, §11.8): a settings.section list entry
-		* surfacing the host-owned enforcement config. The client is read-mostly; all
-		* writes ride the host config path (never run files).
-		*/
-		function RecursiveSettings({ close }) {
-			return (0, react.createElement)("div", { className: "rec-settings" }, (0, react.createElement)("h2", {}, "Recursive"), (0, react.createElement)("p", {}, "Enforcement policy, scratch format, provider defaults, and preset install path are configured on the host. The client is read-only (§11.9)."), (0, react.createElement)("button", { onClick: close }, "Close"));
-		}
-		//#endregion
 		//#region src/client/host-api.ts
 		/**
 		* Live recursive board/strip feed (SP2 R1): the browser half of the host
@@ -503,6 +445,27 @@ window.__ModuleLoader__.load({
 			}
 		}
 		/**
+		* Fetch one per-phase run doc (0.2.4) via the lazy GET /.recursive/api/doc
+		* route. Raw markdown text; the host validates the root (known workspace) and
+		* guards the file path (phase-doc basename only, containment under the run
+		* dir). Same 15s AbortController timeout as fetchLiveState.
+		*/
+		async function fetchPhaseDoc(req) {
+			const controller = new AbortController();
+			const timer = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+			try {
+				const q = "root=" + encodeURIComponent(req.root) + "&runId=" + encodeURIComponent(req.runId) + "&file=" + encodeURIComponent(req.file);
+				const res = await fetch("/.recursive/api/doc?" + q, {
+					signal: controller.signal,
+					cache: "no-store"
+				});
+				if (!res.ok) throw new Error("recursive phase doc: HTTP " + res.status);
+				return await res.text();
+			} finally {
+				clearTimeout(timer);
+			}
+		}
+		/**
 		* Subscribe to the SSE events feed. Returns a disposer. The host pushes a full
 		* {revision, root, projection} frame on every fs change + a 15s heartbeat.
 		*
@@ -536,6 +499,485 @@ window.__ModuleLoader__.load({
 			};
 		}
 		//#endregion
+		//#region src/client/doc-viewer.tsx
+		/**
+		* Per-phase run-doc viewer (0.2.4): renders one .recursive/run/<runId>/<file>
+		* markdown doc read LAZILY via the host GET /.recursive/api/doc route, inside
+		* the Inspector run-detail panel. Read-only: NO approve / changes / comment /
+		* quit actions, NO session-answer writes, NO recursive/* session events.
+		*
+		* ATTRIBUTION — ported from @guillaumemeyer/dsh-plan-approval (MIT),
+		* https://github.com/guillaumemeyer/dsh-plan-approval:
+		*   - the markdown line parser (parseDoc, based on parsePlan), and
+		*   - the vim-nav + / search key handling (onKey/move/goTop/goBottom/
+		*     computeMatches/searchNext/searchPrev/openSearch/closeSearch).
+		* Reused under MIT. NO planReviewOf / overlay / session-question logic is
+		* carried over — this viewer reads run artifacts.
+		*/
+		/**
+		* Markdown -> line tokens. Base is parsePlan (blank/h1-h4/li/plain, MIT),
+		* extended for fenced code blocks (one code line per block) and pipe tables
+		* (one table line per block, header separator row dropped).
+		*/
+		function parseDoc(plan) {
+			const raw = String(plan == null ? "" : plan).split("\n");
+			const out = [];
+			let i = 0;
+			while (i < raw.length) {
+				const line = raw[i];
+				if (/^\s*$/.test(line)) {
+					out.push({
+						kind: "blank",
+						text: ""
+					});
+					i += 1;
+					continue;
+				}
+				if (/^```\s*([\w+-]*)\s*$/.exec(line)) {
+					const code = [];
+					i += 1;
+					while (i < raw.length && !/^```\s*$/.test(raw[i])) {
+						code.push(raw[i]);
+						i += 1;
+					}
+					i += 1;
+					out.push({
+						kind: "code",
+						text: code.join("\n")
+					});
+					continue;
+				}
+				if (/^\s*\|/.test(line)) {
+					const rows = [];
+					while (i < raw.length && /^\s*\|/.test(raw[i])) {
+						const parts = raw[i].split("|").slice(1, -1).map((c) => c.trim());
+						rows.push(parts);
+						i += 1;
+					}
+					const data = rows.filter((r) => !r.every((c) => /^:?-{3,}:?$/.test(c)));
+					out.push({
+						kind: "table",
+						text: rows.map((r) => r.join(" | ")).join("\n"),
+						cells: data
+					});
+					continue;
+				}
+				const h = /^(#{1,4})\s+(.+?)\s*$/.exec(line);
+				if (h) {
+					let kind;
+					switch (h[1].length) {
+						case 1:
+							kind = "h1";
+							break;
+						case 2:
+							kind = "h2";
+							break;
+						case 3:
+							kind = "h3";
+							break;
+						default: kind = "h4";
+					}
+					out.push({
+						kind,
+						text: h[2]
+					});
+					i += 1;
+					continue;
+				}
+				const li = /^\s*[-*]\s+(.+)$/.exec(line);
+				if (li) {
+					out.push({
+						kind: "li",
+						text: li[1]
+					});
+					i += 1;
+					continue;
+				}
+				out.push({
+					kind: "plain",
+					text: line
+				});
+				i += 1;
+			}
+			return out;
+		}
+		/**
+		* Inline scanner: **bold**, `code`, [text](url); unmatched markers stay plain
+		* text. Used to build the React children of a line text.
+		*/
+		function parseInline(text) {
+			const out = [];
+			const re = /(\*\*(.+?)\*\*)|(`([^`]+)`)|(\[([^\]]+)\]\(([^)]+)\))/g;
+			let last = 0;
+			let m;
+			while ((m = re.exec(text)) !== null) {
+				if (m.index > last) out.push({
+					type: "text",
+					text: text.slice(last, m.index)
+				});
+				if (m[1] !== void 0) out.push({
+					type: "bold",
+					text: m[2]
+				});
+				if (m[3] !== void 0) out.push({
+					type: "code",
+					text: m[4]
+				});
+				if (m[5] !== void 0) out.push({
+					type: "link",
+					text: m[6],
+					href: m[7]
+				});
+				last = re.lastIndex;
+			}
+			if (last < text.length) out.push({
+				type: "text",
+				text: text.slice(last)
+			});
+			return out;
+		}
+		const SEARCH_HINTS = [
+			["j/k", "move"],
+			["gg/G", "ends"],
+			["/", "search"],
+			["n/N", "next/prev"],
+			["y", "copy"],
+			["Esc", "close"]
+		];
+		/** Inline segments -> ReactNodes (bold/code/link markup). */
+		function inlineNodes(segments, baseKey) {
+			return segments.map((seg, n) => {
+				const key = baseKey + "-seg-" + String(n);
+				if (seg.type === "bold") return (0, react.createElement)("strong", { key }, seg.text);
+				if (seg.type === "code") return (0, react.createElement)("code", {
+					key,
+					className: "rec-doc-inline-code"
+				}, seg.text);
+				if (seg.type === "link") return (0, react.createElement)("a", {
+					key,
+					href: seg.href,
+					target: "_blank",
+					rel: "noreferrer",
+					className: "rec-doc-inline-link"
+				}, seg.text);
+				return (0, react.createElement)("span", { key }, seg.text);
+			});
+		}
+		/**
+		* Render one parsed line as a React element. Headings/bullets get parsePlan
+		* sizing; code/table get block layout; inline markup applies to plain-ish text.
+		*/
+		function lineElement(line, i, isCurrent) {
+			const cls = "rec-doc-line rec-doc-" + line.kind + (isCurrent ? " rec-doc-line-current" : "");
+			if (line.kind === "blank") return (0, react.createElement)("div", {
+				key: i,
+				"data-line": String(i),
+				className: cls
+			}, null);
+			if (line.kind === "code") return (0, react.createElement)("pre", {
+				key: i,
+				"data-line": String(i),
+				className: cls + " rec-doc-pre"
+			}, (0, react.createElement)("code", { className: "rec-doc-code" }, line.text));
+			if (line.kind === "table") {
+				const all = line.cells ?? [];
+				const header = all[0] ?? [];
+				const body = all.slice(1);
+				return (0, react.createElement)("div", {
+					key: i,
+					"data-line": String(i),
+					className: cls
+				}, (0, react.createElement)("table", { className: "rec-doc-table" }, (0, react.createElement)("thead", null, (0, react.createElement)("tr", null, header.map((c, n) => (0, react.createElement)("th", { key: "th-" + String(n) }, c)))), (0, react.createElement)("tbody", null, body.map((r, n) => (0, react.createElement)("tr", { key: "tr-" + String(n) }, r.map((c, m) => (0, react.createElement)("td", { key: "td-" + String(m) }, c)))))));
+			}
+			const nodes = inlineNodes(parseInline(line.text), String(i));
+			if (line.kind === "li") return (0, react.createElement)("div", {
+				key: i,
+				"data-line": String(i),
+				className: cls
+			}, (0, react.createElement)("span", { className: "rec-doc-bullet" }, "•"), (0, react.createElement)("span", { className: "rec-doc-li-text" }, nodes));
+			return (0, react.createElement)("div", {
+				key: i,
+				"data-line": String(i),
+				className: cls
+			}, nodes);
+		}
+		/**
+		* The per-phase doc viewer. Fetches the route on mount / fileName change.
+		* Vim nav + / search + n/N + Esc; y copies the doc. Esc closes search first,
+		* else the viewer. data-theme is passed down by the hoisting Inspector
+		* (0.1.10 invariant: useBoardTheme lives in the panel).
+		*/
+		function DocViewer({ runId, worktreeRoot, fileName, theme, onClose }) {
+			const [text, setText] = (0, react.useState)(null);
+			const [error, setError] = (0, react.useState)(null);
+			const [notice, setNotice] = (0, react.useState)(null);
+			const [cursor, setCursor] = (0, react.useState)(0);
+			const [searchOpen, setSearchOpen] = (0, react.useState)(false);
+			const [query, setQuery] = (0, react.useState)("");
+			const [matches, setMatches] = (0, react.useState)([]);
+			const [activeMatch, setActiveMatch] = (0, react.useState)(0);
+			const ggArmed = (0, react.useRef)(false);
+			const rootRef = (0, react.useRef)(null);
+			const [copied, setCopied] = (0, react.useState)(false);
+			(0, react.useEffect)(() => {
+				let disposed = false;
+				setText(null);
+				setError(null);
+				setNotice(null);
+				setCopied(false);
+				setCursor(0);
+				fetchPhaseDoc({
+					root: worktreeRoot,
+					runId,
+					file: fileName
+				}).then((t) => {
+					if (!disposed) {
+						setText(t);
+						setCopied(false);
+					}
+				}).catch(() => {
+					if (!disposed) setError("Failed to load doc");
+				});
+				return () => {
+					disposed = true;
+				};
+			}, [
+				worktreeRoot,
+				runId,
+				fileName
+			]);
+			const docLines = (0, react.useMemo)(() => text === null ? [] : parseDoc(text), [text]);
+			const move = (delta) => {
+				if (docLines.length === 0) return;
+				setCursor((c) => Math.max(0, Math.min(docLines.length - 1, c + delta)));
+			};
+			const goTop = () => setCursor(0);
+			const goBottom = () => setCursor(Math.max(0, docLines.length - 1));
+			const computeMatches = (q) => {
+				if (!q) return [];
+				const needle = q.toLowerCase();
+				const found = [];
+				for (let i = 0; i < docLines.length; i++) if (docLines[i].text.toLowerCase().indexOf(needle) >= 0) found.push(i);
+				return found;
+			};
+			const openSearch = () => {
+				setSearchOpen(true);
+				setError(null);
+				setNotice(null);
+			};
+			const closeSearch = () => {
+				setSearchOpen(false);
+				setQuery("");
+				setMatches([]);
+				setActiveMatch(0);
+				if (rootRef.current) rootRef.current.focus();
+			};
+			const onSearchChange = (e) => {
+				const q = e.target.value;
+				setQuery(q);
+				setMatches(computeMatches(q));
+				setActiveMatch(0);
+			};
+			const searchNext = () => {
+				if (matches.length === 0) return;
+				const next = (activeMatch + 1) % matches.length;
+				setActiveMatch(next);
+				setCursor(matches[next]);
+			};
+			const searchPrev = () => {
+				if (matches.length === 0) return;
+				const prev = (activeMatch - 1 + matches.length) % matches.length;
+				setActiveMatch(prev);
+				setCursor(matches[prev]);
+			};
+			const onSearchKey = (e) => {
+				if (e.key === "Enter" && e.shiftKey) {
+					e.preventDefault();
+					searchPrev();
+				} else if (e.key === "Enter") {
+					e.preventDefault();
+					searchNext();
+				} else if (e.key === "Escape") {
+					e.preventDefault();
+					closeSearch();
+				}
+			};
+			const copyDoc = () => {
+				const clip = globalThis.navigator?.clipboard;
+				if (clip === void 0 || clip.writeText === void 0) {
+					setError("Copy unavailable");
+					setNotice(null);
+					return;
+				}
+				if (clip && clip.writeText) {
+					const data = text ?? "";
+					clip.writeText(data).then(() => {
+						setNotice("Doc copied");
+						setError(null);
+						setCopied(true);
+					}).catch(() => {
+						setError("Copy failed");
+						setNotice(null);
+					});
+				} else {
+					setError("Copy unavailable");
+					setNotice(null);
+				}
+			};
+			const onKey = (e) => {
+				const tag = e.target && e.target.tagName || "";
+				if (tag === "INPUT" || tag === "TEXTAREA") return;
+				const rawKey = e.key || "";
+				const key = rawKey.toLowerCase();
+				if (rawKey === "G") {
+					e.preventDefault();
+					ggArmed.current = false;
+					goBottom();
+					return;
+				}
+				if (rawKey === "N") {
+					e.preventDefault();
+					ggArmed.current = false;
+					searchPrev();
+					return;
+				}
+				if (key === "g") {
+					e.preventDefault();
+					if (ggArmed.current) {
+						ggArmed.current = false;
+						goTop();
+					} else ggArmed.current = true;
+					return;
+				}
+				ggArmed.current = false;
+				if (key === "j") {
+					e.preventDefault();
+					move(1);
+				} else if (key === "k") {
+					e.preventDefault();
+					move(-1);
+				} else if (key === "/") {
+					e.preventDefault();
+					openSearch();
+				} else if (key === "n") {
+					e.preventDefault();
+					searchNext();
+				} else if (key === "y") {
+					e.preventDefault();
+					copyDoc();
+				} else if (key === "escape") {
+					e.preventDefault();
+					if (searchOpen) closeSearch();
+					else onClose();
+				}
+			};
+			new Set(matches);
+			matches.length > 0 && matches[activeMatch];
+			const lineEls = docLines.map((line, i) => lineElement(line, i, i === cursor));
+			const searchBar = searchOpen ? (0, react.createElement)("div", { className: "rec-doc-search" }, (0, react.createElement)("input", {
+				className: "rec-doc-search-input",
+				value: query,
+				placeholder: "/ search doc…",
+				onChange: onSearchChange,
+				onKeyDown: onSearchKey
+			}), (0, react.createElement)("span", { className: "rec-doc-search-count" }, matches.length > 0 ? activeMatch + 1 + "/" + matches.length : query ? "0" : "")) : null;
+			const statusText = error || notice || docLines.length + " lines";
+			const statusCls = "rec-doc-status" + (error ? " rec-doc-status-error" : notice ? " rec-doc-status-ok" : "");
+			return (0, react.createElement)("div", {
+				className: "rec-doc",
+				"data-theme": theme,
+				onKeyDown: onKey,
+				ref: rootRef,
+				tabIndex: -1
+			}, (0, react.createElement)("header", { className: "rec-doc-header" }, (0, react.createElement)("div", { className: "rec-doc-heading" }, (0, react.createElement)("span", { className: "rec-doc-badge" }, "Phase doc"), (0, react.createElement)("h2", { className: "rec-doc-title" }, fileName), (0, react.createElement)("span", { className: "rec-doc-run" }, runId)), (0, react.createElement)("button", {
+				type: "button",
+				className: "rec-doc-btn rec-doc-copy",
+				onClick: copyDoc,
+				title: "Copy doc",
+				"aria-label": "Copy doc"
+			}, "Copy doc"), (0, react.createElement)("button", {
+				type: "button",
+				className: "rec-doc-btn rec-doc-close",
+				onClick: onClose,
+				title: "Close",
+				"aria-label": "Close"
+			}, "Close")), searchBar, (0, react.createElement)("div", { className: "rec-doc-body" }, text === null && error === null ? (0, react.createElement)("p", { className: "rec-doc-text" }, "Loading doc…") : null, error !== null ? (0, react.createElement)("p", { className: "rec-doc-text rec-doc-error" }, error) : null, text !== null ? lineEls : null), (0, react.createElement)("footer", { className: "rec-doc-footer" }, (0, react.createElement)("div", {
+				className: statusCls,
+				role: "status"
+			}, statusText), (0, react.createElement)("div", { className: "rec-doc-hints" }, SEARCH_HINTS.map((h, n) => (0, react.createElement)("span", { key: "hint-" + String(n) }, (0, react.createElement)("kbd", null, h[0]), " " + h[1] + (n < SEARCH_HINTS.length - 1 ? " |" : ""))))));
+		}
+		//#endregion
+		//#region src/client/inspector.tsx
+		/**
+		* Drill-down inspector (SP2 R1 + run 15/16): centered modal-style detail panel
+		* (Paper .detail shape) with back + close, data-theme (default light), theme
+		* toggle, and solid status pills. All from the live host-route snapshot.
+		* useBoardTheme is hoisted ABOVE the not-found early return.
+		*/
+		function closeButton(onClose) {
+			if (onClose === void 0) return null;
+			return (0, react.createElement)("button", {
+				type: "button",
+				className: "rec-close",
+				onClick: onClose,
+				title: "Close",
+				"aria-label": "Close"
+			}, "×");
+		}
+		function solidPill(kind) {
+			return (0, react.createElement)("span", {
+				className: "rec-pill",
+				"data-pill": kind
+			}, PILL_LABELS[kind]);
+		}
+		function detailShell(runId, onBackToToolDetails, onClose, headerExtra, body, theme, toggle) {
+			return (0, react.createElement)("div", {
+				className: "rec-inspector",
+				"data-theme": theme
+			}, (0, react.createElement)("div", { className: "rec-detail" }, (0, react.createElement)("div", { className: "rec-detail-header" }, (0, react.createElement)("button", {
+				type: "button",
+				className: "rec-back",
+				onClick: onBackToToolDetails
+			}, "← Back"), (0, react.createElement)("h2", { className: "rec-detail-title" }, runId), headerExtra, (0, react.createElement)(ThemeToggle, {
+				theme,
+				toggle
+			}), closeButton(onClose)), (0, react.createElement)("div", { className: "rec-detail-body" }, body)));
+		}
+		function Inspector({ runId, worktreeRoot, snapshot, onBackToToolDetails, onClose }) {
+			const { theme, toggle } = useBoardTheme();
+			const [openFileName, setOpenFileName] = (0, react.useState)(null);
+			const card = snapshot?.projection?.[worktreeRoot]?.[runId];
+			if (card === void 0) return detailShell(runId, onBackToToolDetails, onClose, null, (0, react.createElement)("p", { className: "rec-detail-text" }, "Run not found: " + runId), theme, toggle);
+			const facts = cardFacts(card);
+			const rows = expandPhaseRows(card);
+			return detailShell(runId, onBackToToolDetails, onClose, solidPill(cardPill(card)), openFileName !== null ? (0, react.createElement)(DocViewer, {
+				runId,
+				worktreeRoot,
+				fileName: openFileName,
+				theme,
+				onClose: () => setOpenFileName(null)
+			}) : (0, react.createElement)("section", { className: "rec-detail-section" }, (0, react.createElement)("h3", {}, "Phases"), rows.map((row) => (0, react.createElement)("div", {
+				key: row.phase,
+				className: "rec-phase-row"
+			}, (0, react.createElement)("span", { className: "rec-phase-id" }, row.phase), (0, react.createElement)("span", { className: "rec-phase-name" }, row.fileName ?? "—"), solidPill(phaseStatusPill(row.status)), row.lockHash !== void 0 && (0, react.createElement)("code", { className: "rec-lockhash" }, "#" + row.lockHash.slice(0, 8)), row.present && row.fileName !== null && (0, react.createElement)("button", {
+				type: "button",
+				className: "rec-phase-view",
+				onClick: () => setOpenFileName(row.fileName),
+				title: "View phase doc",
+				"aria-label": "View phase doc"
+			}, "View phase"))), facts.gateBlocked && (0, react.createElement)("div", { className: "rec-detail-section" }, (0, react.createElement)("h3", {}, "Gate"), (0, react.createElement)("p", { className: "rec-detail-text" }, "Blocked (" + (facts.gateKind ?? "") + ")"))), theme, toggle);
+		}
+		//#endregion
+		//#region src/client/settings.tsx
+		/**
+		* Recursive settings page (Phase D R8, §11.8): a settings.section list entry
+		* surfacing the host-owned enforcement config. The client is read-mostly; all
+		* writes ride the host config path (never run files).
+		*/
+		function RecursiveSettings({ close }) {
+			return (0, react.createElement)("div", { className: "rec-settings" }, (0, react.createElement)("h2", {}, "Recursive"), (0, react.createElement)("p", {}, "Enforcement policy, scratch format, provider defaults, and preset install path are configured on the host. The client is read-only (§11.9)."), (0, react.createElement)("button", { onClick: close }, "Close"));
+		}
+		//#endregion
 		//#region src/client/use-live.ts
 		/**
 		* useLiveProjection(scope): the client bridge to the live host route (SP2 R1).
@@ -1178,6 +1620,316 @@ window.__ModuleLoader__.load({
   color: var(--board-muted-fg);
 }
 
+/* ===== Per-phase doc viewer (0.2.4, inside the inspector detail body) ===== */
+
+/* View phase ghost button on each present phase row. */
+.rec-phase-view {
+  flex: none;
+  padding: 3px 10px;
+  font-size: var(--board-text-xs);
+  color: var(--board-info);
+  background: transparent;
+  border: 1px solid var(--board-border);
+  border-radius: 999px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.rec-phase-view:hover {
+  background: var(--board-accent);
+}
+
+/* Viewer shell: fills the inspector detail body (the panel owns data-theme). */
+.rec-doc {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  gap: var(--board-space-12);
+  color: var(--board-fg);
+  font-family: var(--board-font-sans);
+  background: var(--board-bg);
+  border: 1px solid var(--board-border);
+  border-radius: var(--board-radius-xl);
+  overflow: hidden;
+}
+
+.rec-doc-header {
+  display: flex;
+  align-items: center;
+  gap: var(--board-space-12);
+  padding: var(--board-space-12) var(--board-space-16);
+  border-bottom: 1px solid var(--board-border);
+  flex: none;
+}
+
+.rec-doc-heading {
+  display: flex;
+  align-items: baseline;
+  gap: var(--board-space-12);
+  flex: 1;
+  min-width: 0;
+}
+
+.rec-doc-badge {
+  flex: none;
+  padding: 2px 10px;
+  font-size: 11px;
+  font-weight: var(--board-fw-semibold);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  border-radius: 999px;
+  background: var(--board-accent);
+  color: var(--board-muted-fg);
+}
+
+.rec-doc-title {
+  margin: 0;
+  font-size: var(--board-text-sm);
+  font-weight: var(--board-fw-semibold);
+  letter-spacing: var(--board-tracking-tight);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rec-doc-run {
+  flex: none;
+  font-family: var(--board-font-mono);
+  font-size: var(--board-text-xs);
+  color: var(--board-muted-fg);
+}
+
+.rec-doc-btn {
+  flex: none;
+  padding: 5px 12px;
+  font-size: var(--board-text-xs);
+  color: var(--board-fg);
+  background: transparent;
+  border: 1px solid var(--board-border);
+  border-radius: 999px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.rec-doc-btn:hover {
+  background: var(--board-accent);
+}
+
+/* Search bar (/ to open). */
+.rec-doc-search {
+  display: flex;
+  align-items: center;
+  gap: var(--board-space-12);
+  padding: var(--board-space-8) var(--board-space-16);
+  border-bottom: 1px solid var(--board-border);
+  flex: none;
+}
+
+.rec-doc-search-input {
+  flex: 1 1 auto;
+  background: var(--board-muted);
+  color: var(--board-fg);
+  border: 1px solid var(--board-border);
+  border-radius: var(--board-radius-md);
+  padding: 5px 10px;
+  font-size: var(--board-text-xs);
+  font-family: inherit;
+  min-width: 0;
+}
+
+.rec-doc-search-input::placeholder {
+  color: var(--board-muted-fg);
+  opacity: 1;
+}
+
+.rec-doc-search-count {
+  font-size: var(--board-text-xs);
+  color: var(--board-muted-fg);
+  white-space: nowrap;
+}
+
+/* Body: scrollable line list. */
+.rec-doc-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--board-space-12) var(--board-space-16) var(--board-space-16);
+}
+
+.rec-doc-line {
+  font-size: var(--board-text-sm);
+  line-height: 1.7;
+  padding: 0 6px;
+  border-left: 2px solid transparent;
+}
+
+.rec-doc-line-current {
+  background: var(--board-muted);
+  border-left-color: var(--board-info);
+}
+
+.rec-doc-blank {
+  height: 10px;
+}
+
+.rec-doc-plain {
+  white-space: pre-wrap;
+}
+
+.rec-doc-h1 {
+  font-size: 22px;
+  font-weight: 700;
+  margin: 8px 0 6px;
+  line-height: 1.3;
+}
+
+.rec-doc-h2 {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 12px 0 4px;
+  line-height: 1.3;
+}
+
+.rec-doc-h3 {
+  font-size: 15px;
+  font-weight: 600;
+  margin: 10px 0 4px;
+  line-height: 1.3;
+}
+
+.rec-doc-h4 {
+  font-size: 14px;
+  font-weight: 600;
+  margin: 8px 0 4px;
+  line-height: 1.3;
+}
+
+.rec-doc-li {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-size: var(--board-text-sm);
+  line-height: 1.65;
+  margin: 0 0 4px;
+}
+
+.rec-doc-bullet {
+  flex: none;
+  color: var(--board-muted-fg);
+  width: 14px;
+  text-align: center;
+}
+
+.rec-doc-li-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.rec-doc-pre {
+  margin: 6px 0;
+  padding: var(--board-space-12);
+  background: var(--board-muted);
+  border: 1px solid var(--board-border);
+  border-radius: var(--board-radius-md);
+  overflow-x: auto;
+}
+
+.rec-doc-code,
+.rec-doc-inline-code {
+  font-family: var(--board-font-mono);
+  font-size: 12.5px;
+  letter-spacing: var(--board-tracking-mono);
+}
+
+.rec-doc-inline-code {
+  background: var(--board-muted);
+  border: 1px solid var(--board-border);
+  border-radius: 4px;
+  padding: 0 4px;
+}
+
+.rec-doc-inline-link {
+  color: var(--board-info);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.rec-doc-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 6px 0;
+  font-size: var(--board-text-xs);
+}
+
+.rec-doc-table th,
+.rec-doc-table td {
+  border: 1px solid var(--board-border);
+  padding: 4px 8px;
+  text-align: left;
+}
+
+.rec-doc-table th {
+  background: var(--board-muted);
+  color: var(--board-muted-fg);
+  font-weight: var(--board-fw-semibold);
+}
+
+/* Footer: status + key hints. */
+.rec-doc-footer {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--board-space-16);
+  padding: var(--board-space-8) var(--board-space-16);
+  border-top: 1px solid var(--board-border);
+  flex-wrap: wrap;
+}
+
+.rec-doc-status {
+  font-size: var(--board-text-xs);
+  color: var(--board-muted-fg);
+  min-width: 120px;
+}
+
+.rec-doc-status-error {
+  color: var(--board-error);
+}
+
+.rec-doc-status-ok {
+  color: var(--board-success);
+}
+
+.rec-doc-hints {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-wrap: wrap;
+  font-size: var(--board-text-xs);
+  color: var(--board-muted-fg);
+}
+
+.rec-doc-hints kbd {
+  background: var(--board-muted);
+  border: 1px solid var(--board-border);
+  border-radius: 4px;
+  padding: 1px 6px;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--board-fg);
+  margin: 0 3px 0 8px;
+}
+
+.rec-doc-text {
+  margin: 0;
+  font-size: var(--board-text-sm);
+  color: var(--board-muted-fg);
+}
+
+.rec-doc-error {
+  color: var(--board-error);
+}
+
 /* ===== Strip (session dock) — keeps the shell --dsw-* theme ===== */
 .rec-badge {
   flex: none;
@@ -1407,6 +2159,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		exports.Board = Board;
+		exports.DocViewer = DocViewer;
 		exports.Inspector = Inspector;
 		exports.RecursiveSettings = RecursiveSettings;
 		exports.RecursiveView = RecursiveView;
@@ -1417,6 +2170,8 @@ window.__ModuleLoader__.load({
 		exports.inject = inject;
 		exports.isRecursivePreset = isRecursivePreset;
 		exports.listRuns = listRuns;
+		exports.parseDoc = parseDoc;
+		exports.parseInline = parseInline;
 		exports.subscribeLiveEvents = subscribeLiveEvents;
 		exports.useLiveProjection = useLiveProjection;
 		return module.exports;