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

package/lib/client.js

@@ -244,102 +244,14 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client/board.tsx
 		/**
-		* Board overlay (SP2 R1 + run 08 R3 + run 12): the kanban view over the live
+		* Board overlay (SP2 R1 + run 08 R3 + run 15): 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").
+		* scraping. Cards are grouped by worktree root and mapped to their current-phase
+		* lane via derive.columnForRun.
 		*
-		* 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.
-		*
-		* 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 15 (task-board redesign): class-based structure + theme-token stylesheet
+		* injected once via styles.ts (no inline styles — unlocks hover/grid/theme).
 		*/
-		/** 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 +259,105 @@ 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 Board({ snapshot, onOpenInspector, onClose }) {
 			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 open = (run) => () => onOpenInspector?.({
 				worktreeRoot: run.worktreeRoot,
 				runId: run.runId
 			});
-			return (0, react.createElement)("div", {
+			if (runs.length === 0) return (0, react.createElement)("div", {
 				className: "rec-board",
-				style: overlayStyle
-			}, close, KANBAN_LANES.map((lane) => {
+				"data-empty": true
+			}, (0, react.createElement)("header", { className: "rec-board-header" }, (0, react.createElement)("h2", { className: "rec-board-title" }, "Recursive runs"), 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" }, (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-count" }, String(runs.length)), 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);
 					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", {
+					}, (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: { 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"), facts.tampered && (0, react.createElement)("span", {
 						className: "rec-badge rec-badge-tamper",
-						style: {
-							...badgeStyle$1,
-							...badgeTamperStyle
-						},
+						"data-status": run.state,
 						title: "tampered"
-					}, "!")), (0, react.createElement)("div", {
-						className: "rec-card-progress",
-						style: progressStyle
-					}, (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", {
+					}, "!"), (0, react.createElement)("span", {
 						className: "rec-badge",
-						style: badgeStyle$1
-					}, facts.state)));
-				}));
-			}));
+						"data-status": run.state
+					}, run.state)));
+				}), 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): centered modal-style detail panel
+		* (task-board .detail shape) rendering one run's phase chain, lock badges, and
+		* tamper/gate facts — all from the live host-route snapshot, never disk.
 		*/
-		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", {
-				className: "rec-inspector",
-				style: overlayStyle
-			}, (0, react.createElement)("div", {
-				className: "rec-inspector-head",
-				style: headStyle
-			}, (0, react.createElement)("button", {
-				onClick: onBackToToolDetails,
+				title: "Close",
+				"aria-label": "Close"
+			}, "×");
+		}
+		function detailShell(runId, onBackToToolDetails, onClose, headerExtra, body) {
+			return (0, react.createElement)("div", { className: "rec-inspector" }, (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, closeButton(onClose)), (0, react.createElement)("div", { className: "rec-detail-body" }, body)));
+		}
+		function Inspector({ runId, worktreeRoot, snapshot, onBackToToolDetails, onClose }) {
+			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));
 			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", {
+			const badge = (0, react.createElement)("span", {
 				className: "rec-badge",
-				style: badgeStyle
-			}, facts.state), facts.tampered && (0, react.createElement)("span", {
+				"data-status": card.state
+			}, facts.state);
+			const tamper = 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", {
+				"data-status": card.state
+			}, "tampered") : null;
+			return detailShell(runId, onBackToToolDetails, onClose, (0, react.createElement)("span", { style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 6
+			} }, badge, tamper), (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-phase-row"
+			}, (0, react.createElement)("span", { className: "rec-phase-id" }, row.phase), (0, react.createElement)("span", { className: "rec-phase-name" }, 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 ?? "") + ")")));
+				"data-status": row.status === "LOCKED" ? "complete" : "active"
+			}, 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 ?? "") + ")"))));
 		}
 		//#endregion
 		//#region src/client/strip.tsx
@@ -766,6 +563,402 @@ 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). The client bundle is a
+		* plain CJS closure with NO CSS pipeline (tsdown has no CSS handling), so we
+		* inject a single <style data-dsh-recursive> element into document.head and
+		* style via class names + the shell's --dsw-* theme tokens. That unlocks hover,
+		* grid layout, and light/dark/skin theme following — impossible with inline
+		* styles. Idempotent: guarded by document.querySelector, so every registration
+		* reuses the one element; the returned disposer removes it.
+		*/
+		const BOARD_CSS = `
+/* dsh-recursive board + inspector (theme-token driven, .rec-* scoped) */
+.rec-board {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: var(--dsw-alias-bg-base);
+  color: var(--dsw-alias-label-primary);
+  font-family: var(--dsw-font-family);
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 14px 16px 16px;
+  gap: 12px;
+  pointer-events: auto;
+  overflow: hidden;
+}
+
+.rec-board-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: none;
+}
+
+.rec-board-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--dsw-alias-label-primary);
+  white-space: nowrap;
+}
+
+.rec-board-count {
+  flex: none;
+  font-size: 12px;
+  color: var(--dsw-alias-label-tertiary);
+  background: var(--dsw-alias-interactive-bg-hover);
+  border-radius: 999px;
+  padding: 1px 8px;
+}
+
+.rec-board-empty {
+  margin: 0;
+  padding: 40px;
+  text-align: center;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.rec-close {
+  position: absolute;
+  top: 14px;
+  right: 16px;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  background: transparent;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 6px;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  font-size: 15px;
+  line-height: 1;
+}
+
+.rec-close:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+
+.rec-columns {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(240px, 1fr);
+  gap: 12px;
+  flex: 1;
+  min-height: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-inline: contain;
+  padding-bottom: 6px;
+  scrollbar-color: var(--dsw-alias-border-l3) var(--dsw-alias-interactive-bg-hover);
+  scrollbar-width: thin;
+}
+
+.rec-columns::-webkit-scrollbar { height: 10px; }
+.rec-columns::-webkit-scrollbar-track { background: var(--dsw-alias-interactive-bg-hover); border-radius: 999px; }
+.rec-columns::-webkit-scrollbar-thumb { background: var(--dsw-alias-border-l3); background-clip: content-box; border: 2px solid transparent; border-radius: 999px; }
+.rec-columns::-webkit-scrollbar-thumb:hover { background: var(--dsw-alias-border-l3); background-clip: content-box; }
+
+.rec-column {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--dsw-alias-bg-layer-2);
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.rec-column-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 12px;
+  flex: none;
+}
+
+.rec-column-title {
+  margin: 0;
+  flex: 1;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--dsw-alias-label-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rec-column-count {
+  flex: none;
+  font-size: 12px;
+  color: var(--dsw-alias-label-tertiary);
+  background: var(--dsw-alias-interactive-bg-hover);
+  border-radius: 999px;
+  padding: 1px 8px;
+}
+
+.rec-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex: none;
+}
+
+.rec-status-dot[data-status='new']      { background: var(--dsw-alias-label-tertiary); }
+.rec-status-dot[data-status='active']   { background: var(--dsw-alias-state-business-primary); }
+.rec-status-dot[data-status='paused']   { background: var(--dsw-alias-state-warn-primary); }
+.rec-status-dot[data-status='blocked']  { background: var(--dsw-alias-state-error-primary); }
+.rec-status-dot[data-status='complete'] { background: var(--dsw-alias-state-success-primary); }
+
+.rec-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 2px 8px 10px;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.rec-column-empty {
+  padding: 24px 8px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.rec-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  text-align: left;
+  background: var(--dsw-alias-bg-base);
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
+  cursor: pointer;
+  color: var(--dsw-alias-label-primary);
+  font-family: inherit;
+  transition: box-shadow 120ms ease, border-color 120ms ease, transform 120ms ease;
+}
+
+.rec-card:hover {
+  box-shadow: var(--dsw-shadow-lv2);
+  border-color: var(--dsw-alias-border-l3);
+  transform: translateY(-1px);
+}
+
+.rec-card:active {
+  box-shadow: var(--dsw-shadow-lv1);
+  transform: translateY(0);
+}
+
+.rec-card[data-state='active']   { border-color: var(--dsw-alias-state-business-primary); }
+.rec-card[data-state='paused']   { border-color: var(--dsw-alias-state-warn-primary); }
+.rec-card[data-state='blocked']  { border-color: var(--dsw-alias-state-error-primary); }
+.rec-card[data-state='complete'] { border-color: var(--dsw-alias-state-success-primary); }
+
+.rec-card-title {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.35;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.rec-card-progress {
+  height: 6px;
+  background: var(--dsw-alias-interactive-bg-hover);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.rec-card-progress-fill {
+  height: 100%;
+  background: var(--dsw-alias-state-business-primary);
+}
+
+.rec-card-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.rec-card-phase {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.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[data-status='active']   { color: var(--dsw-alias-state-business-primary); border-color: var(--dsw-alias-state-business-primary); }
+.rec-badge[data-status='paused']   { color: var(--dsw-alias-state-warn-primary); border-color: var(--dsw-alias-state-warn-primary); }
+.rec-badge[data-status='blocked']  { color: var(--dsw-alias-state-error-primary); border-color: var(--dsw-alias-state-error-primary); }
+.rec-badge[data-status='complete'] { color: var(--dsw-alias-state-success-primary); border-color: var(--dsw-alias-state-success-primary); }
+.rec-badge[data-status='new']      { color: var(--dsw-alias-label-tertiary); }
+
+.rec-badge-tamper {
+  color: var(--dsw-alias-state-error-primary);
+  border-color: var(--dsw-alias-state-error-primary);
+}
+
+/* inspector: centered modal-style detail */
+.rec-inspector {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--dsw-alias-bg-mask-1);
+  pointer-events: auto;
+}
+
+.rec-detail {
+  display: flex;
+  flex-direction: column;
+  width: min(640px, calc(100vw - 48px));
+  max-height: calc(100vh - 80px);
+  background: var(--dsw-alias-bg-base);
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 14px;
+  box-shadow: var(--dsw-shadow-lv3);
+  color: var(--dsw-alias-label-primary);
+  overflow: hidden;
+}
+
+.rec-detail-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--dsw-alias-separator-primary);
+  flex: none;
+}
+
+.rec-detail-title {
+  margin: 0;
+  flex: 1;
+  font-size: 15px;
+  font-weight: 700;
+  overflow-wrap: anywhere;
+}
+
+.rec-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 12px;
+  font-size: 12px;
+  color: var(--dsw-alias-label-primary);
+  background: transparent;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.rec-back:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.rec-detail-body {
+  padding: 14px 18px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  flex: 1;
+}
+
+.rec-detail-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.rec-detail-section h3 {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.rec-phase-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 8px;
+  font-size: 13px;
+}
+
+.rec-phase-id {
+  min-width: 48px;
+  font-family: var(--dsw-font-markdown-code-block-small);
+  color: var(--dsw-alias-state-business-primary);
+}
+
+.rec-phase-name {
+  flex: 1;
+  color: var(--dsw-alias-label-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rec-lockhash {
+  font-family: var(--dsw-font-markdown-code-block-small);
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rec-card, .rec-back, .rec-close { 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 +1010,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",