@try-works/dsh-recursive-mode 0.1.11 → 0.1.13

package/lib/client.js

@@ -206,6 +206,34 @@ window.__ModuleLoader__.load({
 				subagents
 			};
 		}
+		/** Human pill label per kind (neutral renders an empty dash). */
+		const PILL_LABELS = {
+			locked: "locked",
+			"in-progress": "in progress",
+			paused: "paused",
+			blocked: "blocked",
+			tampered: "tampered",
+			advisory: "advisory",
+			neutral: "—"
+		};
+		/**
+		* Solid-pill kind for a whole run card. Priority: tamper > fully-locked >
+		* run-state blocked > run-state paused > still in-progress.
+		*/
+		function cardPill(card) {
+			const facts = cardFacts(card);
+			if (facts.tampered) return "tampered";
+			if (facts.lockValidity === "locked") return "locked";
+			if (facts.state === "blocked") return "blocked";
+			if (facts.state === "paused") return "paused";
+			return "in-progress";
+		}
+		/** Solid-pill kind for a phase row status string (LOCKED / DRAFT / '—'). */
+		function phaseStatusPill(status) {
+			if (status === "LOCKED") return "locked";
+			if (status === "" || status === "—") return "neutral";
+			return "in-progress";
+		}
 		/**
 		* Expand a card's phase chain into full inspector rows: the always-shown
 		* '03.5' slot (§11.10 mandatory deviation) plus 01.5 when present, and
@@ -242,104 +270,60 @@ window.__ModuleLoader__.load({
 			return rows;
 		}
 		//#endregion
+		//#region src/client/theme.ts
+		/**
+		* Board/Inspector theme state (run 16 / Paper). Default LIGHT, dark via a
+		* header toggle that flips data-theme on the root .rec-board / .rec-inspector.
+		* Persisted to localStorage under 'dsh-recursive-theme' (first visit = light).
+		*/
+		const BOARD_THEME_STORAGE_KEY = "dsh-recursive-theme";
+		function readInitialTheme() {
+			if (typeof localStorage === "undefined") return "light";
+			try {
+				return localStorage.getItem("dsh-recursive-theme") === "dark" ? "dark" : "light";
+			} catch {
+				return "light";
+			}
+		}
+		/**
+		* Hoisted at the TOP of Board and Inspector (never after an early return — run
+		* 0.1.10 invariant). Defaults light, reads a persisted dark on init, and writes
+		* the chosen theme back to localStorage.
+		*/
+		function useBoardTheme() {
+			const [theme, setTheme] = (0, react.useState)(readInitialTheme);
+			const toggle = (0, react.useCallback)(() => setTheme((t) => t === "light" ? "dark" : "light"), []);
+			(0, react.useEffect)(() => {
+				try {
+					localStorage.setItem(BOARD_THEME_STORAGE_KEY, theme);
+				} catch {}
+			}, [theme]);
+			return {
+				theme,
+				toggle
+			};
+		}
+		/** The shared header toggle button (moon in light, sun in dark). */
+		function ThemeToggle({ theme, toggle }) {
+			return (0, react.createElement)("button", {
+				type: "button",
+				className: "rec-theme-toggle",
+				onClick: toggle,
+				title: theme === "light" ? "Switch to dark theme" : "Switch to light theme",
+				"aria-label": "Toggle theme"
+			}, theme === "light" ? "☾" : "☀");
+		}
+		//#endregion
 		//#region src/client/board.tsx
 		/**
-		* Board overlay (SP2 R1 + run 08 R3 + run 12): the kanban view over the live
-		* host-route projection. Pure read-only renderer — no filesystem, no run-file
-		* scraping. Cards are grouped by worktree root (the projection's outer key) and
-		* mapped to their current-phase lane via derive.columnForRun. Renders NOTHING
-		* when the snapshot is null (no recursive root / not loaded) or the current
-		* session is not on the recursive preset (the gate lives in slots.ts — here an
-		* empty projection with a null root is a no-op, not an "empty board").
-		*
-		* Run 08 R3: a card click opens the drill-down inspector via onOpenInspector
-		* (the overlay swaps board <-> inspector in slots.ts). Read-only still: the
-		* callback only selects a run for display; no mutation.
+		* Board overlay (SP2 R1 + run 08 R3 + run 15/16): kanban over the live
+		* host-route projection, class-based grid board with the Paper theme.
+		* Pure read-only renderer — no filesystem, no run-file scraping.
 		*
-		* Run 12 (LIVE BUG): shell.overlay is a click-through, unstyled frame layer —
-		* without inline styles the mounted board was INVISIBLE (no position/size/z)
-		* and CLICK-THROUGH (no pointer-events opt-in). Everything is styled inline
-		* (no CSS pipeline in the CJS client bundle): full-cover fixed overlay, opaque
-		* backdrop, pointerEvents auto, and a visible close button.
+		* Run 16 (Paper): data-theme (default light), header theme toggle, workspace
+		* path + count chip, solid status pills. useBoardTheme is hoisted ABOVE the
+		* early returns (0.1.10 hook invariant).
 		*/
-		/** Full-cover overlay style — the shell.overlay seat is click-through + unstyled by default (run 12). */
-		const overlayStyle = {
-			position: "fixed",
-			inset: 0,
-			background: "rgba(15, 17, 21, 0.92)",
-			color: "#e6e6e6",
-			zIndex: 9999,
-			overflowY: "auto",
-			padding: "24px 32px",
-			pointerEvents: "auto",
-			fontFamily: "system-ui, sans-serif"
-		};
-		const laneStyle = { marginBottom: 24 };
-		const laneTitleStyle = {
-			fontSize: 14,
-			textTransform: "uppercase",
-			letterSpacing: "0.08em",
-			marginBottom: 8,
-			color: "#aaa"
-		};
-		const cardStyle = {
-			display: "inline-block",
-			width: 280,
-			margin: "0 12px 12px 0",
-			padding: 12,
-			background: "#1f2329",
-			borderRadius: 8,
-			border: "1px solid #333",
-			cursor: "pointer",
-			verticalAlign: "top"
-		};
-		const cardHeadStyle = {
-			display: "flex",
-			justifyContent: "space-between",
-			marginBottom: 8
-		};
-		const badgeStyle$1 = {
-			fontSize: 11,
-			padding: "2px 6px",
-			borderRadius: 4,
-			background: "#333"
-		};
-		const badgeTamperStyle = { background: "#7a1f1f" };
-		const progressStyle = {
-			height: 6,
-			background: "#333",
-			borderRadius: 3,
-			overflow: "hidden"
-		};
-		const progressFillStyle = {
-			background: "#4c9aff",
-			height: "100%"
-		};
-		const metaStyle = {
-			marginTop: 8,
-			fontSize: 12,
-			color: "#aaa",
-			display: "flex",
-			justifyContent: "space-between"
-		};
-		const emptyStyle = {
-			padding: 40,
-			textAlign: "center",
-			color: "#888"
-		};
-		const closeStyle$1 = {
-			position: "absolute",
-			top: 12,
-			right: 16,
-			background: "#1f2329",
-			color: "#e6e6e6",
-			border: "1px solid #444",
-			borderRadius: 6,
-			padding: "4px 12px",
-			cursor: "pointer",
-			fontSize: 16,
-			zIndex: 1
-		};
 		/** Flatten the worktree-grouped projection into a stable run list. */
 		function listRuns(projection) {
 			if (projection === void 0) return [];
@@ -347,220 +331,116 @@ window.__ModuleLoader__.load({
 			for (const worktreeRoot of Object.keys(projection)) for (const runId of Object.keys(projection[worktreeRoot])) runs.push(projection[worktreeRoot][runId]);
 			return runs;
 		}
+		function closeButton$1(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$1(kind) {
+			return (0, react.createElement)("span", {
+				className: "rec-pill",
+				"data-pill": kind
+			}, PILL_LABELS[kind]);
+		}
 		function Board({ snapshot, onOpenInspector, onClose }) {
+			const { theme, toggle } = useBoardTheme();
 			if (snapshot === null || snapshot.root === null) return null;
 			const runs = listRuns(snapshot.projection);
-			const close = onClose !== void 0 ? (0, react.createElement)("button", {
-				className: "rec-close",
-				style: closeStyle$1,
-				onClick: onClose,
-				title: "Close"
-			}, "×") : null;
-			if (runs.length === 0) return (0, react.createElement)("div", {
-				className: "rec-board",
-				"data-empty": true,
-				style: overlayStyle
-			}, close, (0, react.createElement)("p", {
-				className: "rec-board-empty",
-				style: emptyStyle
-			}, "No recursive runs in this workspace yet."));
+			const workspacePath = snapshot.root;
 			const open = (run) => () => onOpenInspector?.({
 				worktreeRoot: run.worktreeRoot,
 				runId: run.runId
 			});
+			if (runs.length === 0) return (0, react.createElement)("div", {
+				className: "rec-board",
+				"data-theme": theme,
+				"data-empty": true
+			}, (0, react.createElement)("header", { className: "rec-board-header" }, (0, react.createElement)("h2", { className: "rec-board-title" }, "Recursive runs"), (0, react.createElement)("span", { className: "rec-board-path" }, workspacePath), (0, react.createElement)("span", { className: "rec-board-count" }, "0 runs"), (0, react.createElement)(ThemeToggle, {
+				theme,
+				toggle
+			}), closeButton$1(onClose)), (0, react.createElement)("p", { className: "rec-board-empty" }, "No recursive runs in this workspace yet."));
 			return (0, react.createElement)("div", {
 				className: "rec-board",
-				style: overlayStyle
-			}, close, KANBAN_LANES.map((lane) => {
+				"data-theme": theme
+			}, (0, react.createElement)("header", { className: "rec-board-header" }, (0, react.createElement)("h2", { className: "rec-board-title" }, "Recursive runs"), (0, react.createElement)("span", { className: "rec-board-path" }, workspacePath), (0, react.createElement)("span", { className: "rec-board-count" }, runs.length + " runs"), (0, react.createElement)(ThemeToggle, {
+				theme,
+				toggle
+			}), closeButton$1(onClose)), (0, react.createElement)("div", { className: "rec-columns" }, KANBAN_LANES.map((lane) => {
 				const laneRuns = runs.filter((r) => columnForRun(r) === lane.id);
 				return (0, react.createElement)("section", {
 					key: lane.id,
-					className: "rec-lane",
-					style: laneStyle
-				}, (0, react.createElement)("h2", {
-					className: "rec-lane-title",
-					style: laneTitleStyle
-				}, lane.label), laneRuns.map((run) => {
+					className: "rec-column"
+				}, (0, react.createElement)("header", { className: "rec-column-header" }, (0, react.createElement)("span", {
+					className: "rec-status-dot",
+					"data-status": laneRuns.length > 0 ? laneRuns[laneRuns.length - 1].state : "new",
+					"aria-hidden": true
+				}), (0, react.createElement)("h3", { className: "rec-column-title" }, lane.label), (0, react.createElement)("span", { className: "rec-column-count" }, String(laneRuns.length))), (0, react.createElement)("div", { className: "rec-cards" }, laneRuns.map((run) => {
 					const facts = cardFacts(run);
+					const pill = cardPill(run);
 					return (0, react.createElement)("article", {
 						key: run.worktreeRoot + "\0" + run.runId,
 						className: "rec-card",
-						style: cardStyle,
+						"data-state": run.state,
 						onClick: open(run)
-					}, (0, react.createElement)("div", {
-						className: "rec-card-head",
-						style: cardHeadStyle
-					}, (0, react.createElement)("strong", {}, run.runId), facts.tampered && (0, react.createElement)("span", {
-						className: "rec-badge rec-badge-tamper",
-						style: {
-							...badgeStyle$1,
-							...badgeTamperStyle
-						},
-						title: "tampered"
-					}, "!")), (0, react.createElement)("div", {
-						className: "rec-card-progress",
-						style: progressStyle
-					}, (0, react.createElement)("div", {
+					}, (0, react.createElement)("div", { className: "rec-card-title" }, run.runId), (0, react.createElement)("div", { className: "rec-card-progress" }, (0, react.createElement)("div", {
 						className: "rec-card-progress-fill",
-						style: {
-							...progressFillStyle,
-							width: Math.round(facts.progress * 100) + "%"
-						}
-					})), (0, react.createElement)("div", {
-						className: "rec-card-meta",
-						style: metaStyle
-					}, (0, react.createElement)("span", {}, facts.currentPhase ?? "no phases"), (0, react.createElement)("span", {
-						className: "rec-badge",
-						style: badgeStyle$1
-					}, facts.state)));
-				}));
-			}));
+						style: { width: Math.round(facts.progress * 100) + "%" }
+					})), (0, react.createElement)("div", { className: "rec-card-meta" }, (0, react.createElement)("span", { className: "rec-card-phase" }, facts.currentPhase ?? "no phases"), solidPill$1(pill)));
+				}), laneRuns.length === 0 && (0, react.createElement)("div", { className: "rec-column-empty" }, "—")));
+			})));
 		}
 		//#endregion
 		//#region src/client/inspector.tsx
 		/**
-		* Drill-down inspector (SP2 R1 + run 12): the details-seat swap rendering one
-		* run's phase chain (with the always-shown 3.5 row + full 6/7/8 rows), lock
-		* badges, and tamper/gate facts — all from the live host-route snapshot, never
-		* disk.
-		*
-		* Run 12 (LIVE BUG): same as the board — shell.overlay is click-through and
-		* unstyled, so the inspector mounts INVISIBLE + CLICK-THROUGH without inline
-		* styles. Full-cover fixed overlay + pointerEvents auto + a back button and a
-		* close button.
+		* 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.
 		*/
-		const headStyle = {
-			display: "flex",
-			alignItems: "center",
-			gap: 12,
-			marginBottom: 16,
-			borderBottom: "1px solid #333",
-			paddingBottom: 12
-		};
-		const backStyle = {
-			background: "#1f2329",
-			color: "#e6e6e6",
-			border: "1px solid #444",
-			borderRadius: 6,
-			padding: "6px 12px",
-			cursor: "pointer"
-		};
-		const closeStyle = {
-			background: "#1f2329",
-			color: "#e6e6e6",
-			border: "1px solid #444",
-			borderRadius: 6,
-			padding: "6px 12px",
-			cursor: "pointer",
-			marginLeft: "auto"
-		};
-		const sectionStyle = { marginBottom: 16 };
-		const rowStyle = {
-			display: "flex",
-			gap: 12,
-			alignItems: "center",
-			padding: "6px 0",
-			borderBottom: "1px solid #222",
-			fontSize: 13
-		};
-		const phaseIdStyle = {
-			minWidth: 220,
-			fontFamily: "monospace",
-			color: "#4c9aff"
-		};
-		const phaseNameStyle = {
-			flex: 1,
-			color: "#ccc"
-		};
-		const badgeStyle = {
-			fontSize: 11,
-			padding: "2px 6px",
-			borderRadius: 4,
-			background: "#333"
-		};
-		const lockhashStyle = {
-			fontFamily: "monospace",
-			fontSize: 11,
-			color: "#888"
-		};
-		function Inspector({ runId, worktreeRoot, snapshot, onBackToToolDetails, onClose }) {
-			const close = onClose !== void 0 ? (0, react.createElement)("button", {
+		function closeButton(onClose) {
+			if (onClose === void 0) return null;
+			return (0, react.createElement)("button", {
+				type: "button",
 				className: "rec-close",
-				style: closeStyle,
 				onClick: onClose,
-				title: "Close"
-			}, "×") : null;
-			const card = snapshot?.projection?.[worktreeRoot]?.[runId];
-			if (card === void 0) return (0, react.createElement)("div", {
+				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",
-				style: overlayStyle
-			}, (0, react.createElement)("div", {
-				className: "rec-inspector-head",
-				style: headStyle
-			}, (0, react.createElement)("button", {
-				onClick: onBackToToolDetails,
+				"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",
-				style: backStyle
-			}, "← back to tool details"), close), (0, react.createElement)("p", {}, "Run not found: " + runId));
+				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 (0, react.createElement)("div", {
-				className: "rec-inspector",
-				style: overlayStyle
-			}, (0, react.createElement)("div", {
-				className: "rec-inspector-head",
-				style: headStyle
-			}, (0, react.createElement)("button", {
-				onClick: onBackToToolDetails,
-				className: "rec-back",
-				style: backStyle
-			}, "← back to tool details"), (0, react.createElement)("h2", { style: {
-				margin: 0,
-				fontSize: 18
-			} }, runId), (0, react.createElement)("span", {
-				className: "rec-badge",
-				style: badgeStyle
-			}, facts.state), facts.tampered && (0, react.createElement)("span", {
-				className: "rec-badge rec-badge-tamper",
-				style: {
-					...badgeStyle,
-					background: "#7a1f1f"
-				}
-			}, "tampered"), close), (0, react.createElement)("section", {
-				className: "rec-inspector-section",
-				style: sectionStyle
-			}, (0, react.createElement)("h3", { style: {
-				fontSize: 13,
-				textTransform: "uppercase",
-				letterSpacing: "0.08em",
-				color: "#aaa",
-				marginBottom: 8
-			} }, "Phases"), rows.map((row) => (0, react.createElement)("div", {
+			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",
-				style: rowStyle
-			}, (0, react.createElement)("span", {
-				className: "rec-phase-id",
-				style: phaseIdStyle
-			}, row.phase), (0, react.createElement)("span", {
-				className: "rec-phase-name",
-				style: phaseNameStyle
-			}, row.fileName ?? "—"), (0, react.createElement)("span", {
-				className: "rec-badge",
-				style: badgeStyle
-			}, row.status), row.lockHash !== void 0 && (0, react.createElement)("code", {
-				className: "rec-lockhash",
-				style: lockhashStyle
-			}, "#" + row.lockHash.slice(0, 8))))), facts.gateBlocked && (0, react.createElement)("section", {
-				className: "rec-inspector-section",
-				style: sectionStyle
-			}, (0, react.createElement)("h3", { style: {
-				fontSize: 13,
-				textTransform: "uppercase",
-				letterSpacing: "0.08em",
-				color: "#aaa",
-				marginBottom: 8
-			} }, "Gate"), (0, react.createElement)("p", {}, "Blocked (" + (facts.gateKind ?? "") + ")")));
+				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/strip.tsx
@@ -766,6 +646,571 @@ window.__ModuleLoader__.load({
 			return (0, react.useSyncExternalStore)(store.subscribe, store.get, store.get);
 		}
 		//#endregion
+		//#region src/client/styles.ts
+		/**
+		* One-shot board/inspector stylesheet injection (run 15 + run 16 / Paper).
+		* The client bundle is a plain CJS closure with NO CSS pipeline (tsdown), so we
+		* inject a single <style data-dsh-recursive> element into document.head.
+		*
+		* Run 16 (Paper): the design is ported 1:1 — DEFAULT LIGHT theme, dark via a
+		* data-theme attribute on the .rec-board / .rec-inspector root. Raw --rm3-*
+		* tokens live on the scoped roots; semantic --board-* aliases remap under
+		* [data-theme='dark']. EVERY component rule consumes ONLY --board-* aliases
+		* (never --rm3-* directly). Idempotent injection; disposer removes the element.
+		*/
+		const BOARD_CSS = `
+/* ===== dsh-recursive Paper theme (run 16) ===== */
+
+/* Raw tokens: light (default) + dark + shared, scoped to the board/inspector. */
+.rec-board, .rec-inspector {
+  /* light */
+  --rm3-light-background: #FFFFFF;
+  --rm3-light-foreground: #111111;
+  --rm3-light-card: #FFFFFF;
+  --rm3-light-muted: #FAFAFA;
+  --rm3-light-muted-foreground: #666666;
+  --rm3-light-accent: #F5F5F5;
+  --rm3-light-border: #EAEAEA;
+  --rm3-light-success: #27A644;
+  --rm3-light-warning: #B67A11;
+  --rm3-light-error: #D84F6A;
+  --rm3-light-advisory: #9664E8;
+  --rm3-light-info: #3F87F5;
+  --rm3-light-destructive: #B4261A;
+  /* dark */
+  --rm3-background: #0A0A0A;
+  --rm3-foreground: #EDEDED;
+  --rm3-card: #0F0F0F;
+  --rm3-muted: #141414;
+  --rm3-muted-foreground: #9A9A9A;
+  --rm3-accent: #1A1A1A;
+  --rm3-border: #1F1F1F;
+  --rm3-success: #27A644;
+  --rm3-warning: #D9A441;
+  --rm3-error: #E06C89;
+  --rm3-advisory: #B479FF;
+  --rm3-info: #6EA8FF;
+  /* shared */
+  --rm3-font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
+  --rm3-font-mono: 'Geist Mono', ui-monospace, Menlo, monospace;
+  --rm3-text-xs: 12px;
+  --rm3-text-sm: 14px;
+  --rm3-text-md: 16px;
+  --rm3-text-lg: 20px;
+  --rm3-text-xl: 28px;
+  --rm3-font-weight-regular: 400;
+  --rm3-font-weight-medium: 500;
+  --rm3-font-weight-semibold: 600;
+  --rm3-radius-sm: 5px;
+  --rm3-radius-md: 6px;
+  --rm3-radius-lg: 8px;
+  --rm3-radius-xl: 11px;
+  --rm3-space-8: 8px;
+  --rm3-space-12: 12px;
+  --rm3-space-16: 16px;
+  --rm3-space-24: 24px;
+  --rm3-space-32: 32px;
+  --rm3-tracking-tight: -0.02em;
+  --rm3-tracking-mono: 0.02em;
+
+  /* Semantic aliases (LIGHT default) */
+  --board-bg: var(--rm3-light-background);
+  --board-fg: var(--rm3-light-foreground);
+  --board-card: var(--rm3-light-card);
+  --board-muted: var(--rm3-light-muted);
+  --board-muted-fg: var(--rm3-light-muted-foreground);
+  --board-accent: var(--rm3-light-accent);
+  --board-border: var(--rm3-light-border);
+  --board-success: var(--rm3-light-success);
+  --board-warning: var(--rm3-light-warning);
+  --board-error: var(--rm3-light-error);
+  --board-advisory: var(--rm3-light-advisory);
+  --board-info: var(--rm3-light-info);
+  --board-destructive: var(--rm3-light-destructive);
+  --board-font-sans: var(--rm3-font-sans);
+  --board-font-mono: var(--rm3-font-mono);
+  --board-text-xs: var(--rm3-text-xs);
+  --board-text-sm: var(--rm3-text-sm);
+  --board-text-md: var(--rm3-text-md);
+  --board-text-lg: var(--rm3-text-lg);
+  --board-text-xl: var(--rm3-text-xl);
+  --board-fw-regular: var(--rm3-font-weight-regular);
+  --board-fw-medium: var(--rm3-font-weight-medium);
+  --board-fw-semibold: var(--rm3-font-weight-semibold);
+  --board-radius-sm: var(--rm3-radius-sm);
+  --board-radius-md: var(--rm3-radius-md);
+  --board-radius-lg: var(--rm3-radius-lg);
+  --board-radius-xl: var(--rm3-radius-xl);
+  --board-space-8: var(--rm3-space-8);
+  --board-space-12: var(--rm3-space-12);
+  --board-space-16: var(--rm3-space-16);
+  --board-space-24: var(--rm3-space-24);
+  --board-space-32: var(--rm3-space-32);
+  --board-tracking-tight: var(--rm3-tracking-tight);
+  --board-tracking-mono: var(--rm3-tracking-mono);
+}
+
+/* Semantic aliases remapped for DARK. */
+.rec-board[data-theme='dark'], .rec-inspector[data-theme='dark'] {
+  --board-bg: var(--rm3-background);
+  --board-fg: var(--rm3-foreground);
+  --board-card: var(--rm3-card);
+  --board-muted: var(--rm3-muted);
+  --board-muted-fg: var(--rm3-muted-foreground);
+  --board-accent: var(--rm3-accent);
+  --board-border: var(--rm3-border);
+  --board-success: var(--rm3-success);
+  --board-warning: var(--rm3-warning);
+  --board-error: var(--rm3-error);
+  --board-advisory: var(--rm3-advisory);
+  --board-info: var(--rm3-info);
+  --board-destructive: var(--rm3-error);
+}
+
+/* ===== Board ===== */
+.rec-board {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: var(--board-space-16);
+  gap: var(--board-space-12);
+  background: var(--board-bg);
+  color: var(--board-fg);
+  font-family: var(--board-font-sans);
+  pointer-events: auto;
+  overflow: hidden;
+}
+
+.rec-board-header {
+  display: flex;
+  align-items: center;
+  gap: var(--board-space-12);
+  flex: none;
+}
+
+.rec-board-title {
+  margin: 0;
+  font-size: 22px;
+  font-weight: var(--board-fw-semibold);
+  letter-spacing: var(--board-tracking-tight);
+  color: var(--board-fg);
+  white-space: nowrap;
+}
+
+.rec-board-path {
+  flex: none;
+  font-family: var(--board-font-mono);
+  font-size: var(--board-text-xs);
+  letter-spacing: var(--board-tracking-mono);
+  color: var(--board-muted-fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 40%;
+}
+
+.rec-board-count {
+  flex: none;
+  font-size: var(--board-text-xs);
+  font-weight: var(--board-fw-medium);
+  color: var(--board-muted-fg);
+  background: var(--board-muted);
+  border-radius: 9999px;
+  padding: 4px 10px;
+}
+
+.rec-board-empty {
+  margin: 0;
+  padding: var(--board-space-32);
+  text-align: center;
+  color: var(--board-muted-fg);
+}
+
+.rec-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  margin-left: auto;
+  flex: none;
+  background: transparent;
+  border: 1px solid var(--board-border);
+  border-radius: var(--board-radius-md);
+  color: var(--board-muted-fg);
+  cursor: pointer;
+  font-size: var(--board-text-md);
+  line-height: 1;
+}
+
+.rec-close:hover {
+  background: var(--board-accent);
+  color: var(--board-fg);
+}
+
+.rec-theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  flex: none;
+  background: transparent;
+  border: 1px solid var(--board-border);
+  border-radius: var(--board-radius-md);
+  color: var(--board-muted-fg);
+  cursor: pointer;
+  font-size: var(--board-text-md);
+  line-height: 1;
+}
+
+.rec-theme-toggle:hover {
+  background: var(--board-accent);
+  color: var(--board-fg);
+}
+
+.rec-columns {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(220px, 1fr);
+  gap: var(--board-space-12);
+  flex: 1;
+  min-height: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-inline: contain;
+  padding-bottom: 6px;
+  scrollbar-color: var(--board-border) var(--board-accent);
+  scrollbar-width: thin;
+}
+
+.rec-columns::-webkit-scrollbar { height: 10px; }
+.rec-columns::-webkit-scrollbar-track { background: var(--board-accent); border-radius: 999px; }
+.rec-columns::-webkit-scrollbar-thumb { background: var(--board-border); border-radius: 999px; }
+
+.rec-column {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--board-muted);
+  border: 1px solid var(--board-border);
+  border-radius: var(--board-radius-xl);
+  overflow: hidden;
+}
+
+.rec-column-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: var(--board-space-12);
+  flex: none;
+}
+
+.rec-column-title {
+  margin: 0;
+  flex: 1;
+  font-size: 13px;
+  font-weight: var(--board-fw-semibold);
+  color: var(--board-fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rec-column-count {
+  flex: none;
+  font-size: var(--board-text-xs);
+  font-weight: var(--board-fw-medium);
+  color: var(--board-muted-fg);
+  background: var(--board-accent);
+  border-radius: 9999px;
+  padding: 1px 8px;
+}
+
+.rec-status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex: none;
+}
+
+.rec-status-dot[data-status='new']      { background: var(--board-muted-fg); }
+.rec-status-dot[data-status='active']   { background: var(--board-info); }
+.rec-status-dot[data-status='paused']   { background: var(--board-warning); }
+.rec-status-dot[data-status='blocked']  { background: var(--board-error); }
+.rec-status-dot[data-status='complete'] { background: var(--board-success); }
+
+.rec-cards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--board-space-8);
+  padding: 10px;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.rec-column-empty {
+  padding: var(--board-space-24) var(--board-space-8);
+  text-align: center;
+  font-size: var(--board-text-xs);
+  color: var(--board-muted-fg);
+}
+
+.rec-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--board-space-8);
+  padding: var(--board-space-12) 14px;
+  text-align: left;
+  background: var(--board-card);
+  border: 1px solid var(--board-border);
+  border-radius: var(--board-radius-lg);
+  cursor: pointer;
+  color: var(--board-fg);
+  font-family: inherit;
+  transition: box-shadow 120ms ease, border-color 120ms ease, transform 120ms ease;
+}
+
+.rec-card:hover {
+  border-color: var(--board-info);
+  transform: translateY(-1px);
+}
+
+.rec-card:active {
+  transform: translateY(0);
+}
+
+.rec-card-title {
+  font-size: 13px;
+  font-weight: var(--board-fw-semibold);
+  line-height: 1.35;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.rec-card-progress {
+  height: 6px;
+  background: var(--board-accent);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.rec-card-progress-fill {
+  height: 100%;
+  background: var(--board-info);
+}
+
+.rec-card-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--board-space-8);
+}
+
+.rec-card-phase {
+  flex: 1;
+  font-family: var(--board-font-mono);
+  font-size: var(--board-text-xs);
+  letter-spacing: var(--board-tracking-mono);
+  color: var(--board-muted-fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ===== Solid status pill (Paper StatusPill) ===== */
+.rec-pill {
+  flex: none;
+  border-radius: 9999px;
+  padding: 4px 10px;
+  font-size: var(--board-text-xs);
+  font-weight: var(--board-fw-medium);
+  line-height: 1;
+  border: none;
+  background: var(--board-muted-fg);
+  color: var(--board-bg);
+}
+
+.rec-pill[data-pill='locked']      { background: var(--board-success);  color: var(--board-bg); }
+.rec-pill[data-pill='in-progress'] { background: var(--board-info);     color: var(--board-bg); }
+.rec-pill[data-pill='paused']      { background: var(--board-warning);  color: var(--board-bg); }
+.rec-pill[data-pill='blocked']     { background: var(--board-error);    color: var(--board-bg); }
+.rec-pill[data-pill='tampered']    { background: var(--board-error);    color: var(--board-bg); }
+.rec-pill[data-pill='advisory']    { background: var(--board-advisory); color: var(--board-bg); }
+.rec-pill[data-pill='neutral']     { background: var(--board-muted-fg); color: var(--board-bg); }
+
+/* ===== Inspector: centered modal detail ===== */
+.rec-inspector {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.4);
+  pointer-events: auto;
+}
+
+.rec-detail {
+  display: flex;
+  flex-direction: column;
+  width: min(640px, calc(100vw - 48px));
+  max-height: calc(100vh - 80px);
+  background: var(--board-bg);
+  border: 1px solid var(--board-border);
+  border-radius: 14px;
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
+  color: var(--board-fg);
+  font-family: var(--board-font-sans);
+  overflow: hidden;
+}
+
+.rec-detail-header {
+  display: flex;
+  align-items: center;
+  gap: var(--board-space-12);
+  padding: var(--board-space-16) var(--board-space-16);
+  border-bottom: 1px solid var(--board-border);
+  flex: none;
+}
+
+.rec-detail-title {
+  margin: 0;
+  flex: 1;
+  font-size: 15px;
+  font-weight: var(--board-fw-semibold);
+  letter-spacing: var(--board-tracking-tight);
+  overflow-wrap: anywhere;
+}
+
+.rec-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px var(--board-space-12);
+  font-size: var(--board-text-xs);
+  color: var(--board-fg);
+  background: transparent;
+  border: 1px solid var(--board-border);
+  border-radius: var(--board-radius-lg);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.rec-back:hover {
+  background: var(--board-accent);
+}
+
+.rec-detail-body {
+  padding: var(--board-space-16);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--board-space-16);
+  flex: 1;
+}
+
+.rec-detail-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.rec-detail-section h3 {
+  margin: 0;
+  font-size: var(--board-text-xs);
+  font-weight: var(--board-fw-semibold);
+  color: var(--board-muted-fg);
+}
+
+.rec-detail-text {
+  margin: 0;
+  font-size: var(--board-text-sm);
+  color: var(--board-muted-fg);
+}
+
+.rec-phase-row {
+  display: flex;
+  align-items: center;
+  gap: var(--board-space-12);
+  padding: var(--board-space-8) var(--board-space-12);
+  border: 1px solid var(--board-border);
+  border-radius: var(--board-radius-lg);
+  font-size: 13px;
+}
+
+.rec-phase-id {
+  min-width: 48px;
+  font-family: var(--board-font-mono);
+  font-size: var(--board-text-xs);
+  letter-spacing: var(--board-tracking-mono);
+  color: var(--board-info);
+}
+
+.rec-phase-name {
+  flex: 1;
+  color: var(--board-fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rec-lockhash {
+  font-family: var(--board-font-mono);
+  font-size: 11px;
+  letter-spacing: var(--board-tracking-mono);
+  color: var(--board-muted-fg);
+}
+
+/* ===== Strip (session dock) — keeps the shell --dsw-* theme ===== */
+.rec-badge {
+  flex: none;
+  padding: 2px 10px;
+  font-size: 12px;
+  border-radius: 999px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  color: var(--dsw-alias-label-secondary);
+}
+.rec-badge-tamper {
+  color: var(--dsw-alias-state-error-primary);
+  border-color: var(--dsw-alias-state-error-primary);
+}
+.rec-badge-gate {
+  color: var(--dsw-alias-state-warn-primary);
+  border-color: var(--dsw-alias-state-warn-primary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rec-card, .rec-back, .rec-close, .rec-theme-toggle { transition: none; }
+}
+`;
+		/**
+		* Inject the board/inspector stylesheet once. Idempotent: if a <style
+		* data-dsh-recursive> already exists, returns a disposer that does nothing
+		* (the first injector owns the element). Returns a disposer that removes it.
+		*/
+		function injectBoardStyles() {
+			if (typeof document === "undefined") return () => {};
+			if (document.querySelector("style[data-dsh-recursive]") !== null) return () => {};
+			const style = document.createElement("style");
+			style.setAttribute("data-dsh-recursive", "");
+			style.textContent = BOARD_CSS;
+			document.head.appendChild(style);
+			let disposed = false;
+			return () => {
+				if (disposed) return;
+				disposed = true;
+				style.remove();
+			};
+		}
+		//#endregion
 		//#region src/client/slots.ts
 		/**
 		* Slot registrations (SP2 R1 + run 08 R1/R3/R4): the sidebar launcher, the
@@ -817,6 +1262,7 @@ window.__ModuleLoader__.load({
 		}
 		function registerSlots(ctx) {
 			const disposers = [];
+			disposers.push(injectBoardStyles());
 			disposers.push(ctx.slots.inject("sidebar.footer.action", () => ctx.slots.register({
 				name: "sidebar.footer.action",
 				id: "recursive",