@try-works/dsh-recursive-mode 0.1.8 → 0.1.9

package/lib/client/board.d.ts

@@ -1,6 +1,28 @@
+/**
+ * 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.
+ *
+ * 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.
+ */
+import { type CSSProperties } from 'react';
 import type { RecursiveProjection, RecursiveRunCard } from '../types.ts';
 import type { LiveProjectionValue } from './contract.ts';
 import type { BoardSelection } from './open-state.ts';
+/** Full-cover overlay style — the shell.overlay seat is click-through + unstyled by default (run 12). */
+export declare const overlayStyle: CSSProperties;
 /** Flatten the worktree-grouped projection into a stable run list. */
 export declare function listRuns(projection: RecursiveProjection | undefined): RecursiveRunCard[];
 export interface BoardProps {
@@ -8,7 +30,10 @@ export interface BoardProps {
     snapshot: LiveProjectionValue | null;
     /** Opens the drill-down inspector for a run (R3). */
     onOpenInspector?: (selection: BoardSelection) => void;
+    /** Closes the overlay (run 12). */
+    onClose?: () => void;
 }
-export declare function Board({ snapshot, onOpenInspector }: BoardProps): import("react").DetailedReactHTMLElement<{
+export declare function Board({ snapshot, onOpenInspector, onClose }: BoardProps): import("react").DetailedReactHTMLElement<{
     className: string;
+    style: CSSProperties;
 }, HTMLElement> | null;

package/lib/client/inspector.d.ts

@@ -1,10 +1,25 @@
+/**
+ * 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.
+ */
+import { type CSSProperties } from 'react';
 import type { LiveProjectionValue } from './contract.ts';
 export interface InspectorProps {
     runId: string;
     worktreeRoot: string;
     snapshot: LiveProjectionValue | null;
     onBackToToolDetails: () => void;
+    /** Closes the overlay (run 12). */
+    onClose?: () => void;
 }
-export declare function Inspector({ runId, worktreeRoot, snapshot, onBackToToolDetails }: InspectorProps): import("react").DetailedReactHTMLElement<{
+export declare function Inspector({ runId, worktreeRoot, snapshot, onBackToToolDetails, onClose }: InspectorProps): import("react").DetailedReactHTMLElement<{
     className: string;
+    style: CSSProperties;
 }, HTMLElement>;

package/lib/client.js

@@ -219,18 +219,102 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client/board.tsx
 		/**
-		* Board overlay (SP2 R1 + run 08 R3): 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").
+		* 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.
+		*
+		* 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.
 		*/
+		/** 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 [];
@@ -238,57 +322,220 @@ 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 Board({ snapshot, onOpenInspector }) {
+		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
-			}, (0, react.createElement)("p", { className: "rec-board-empty" }, "No recursive runs in this workspace yet."));
+				"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", { className: "rec-board" }, KANBAN_LANES.map((lane) => {
+			return (0, react.createElement)("div", {
+				className: "rec-board",
+				style: overlayStyle
+			}, close, KANBAN_LANES.map((lane) => {
 				const laneRuns = runs.filter((r) => columnForRun(r) === lane.id);
 				return (0, react.createElement)("section", {
 					key: lane.id,
-					className: "rec-lane"
-				}, (0, react.createElement)("h2", { className: "rec-lane-title" }, lane.label), laneRuns.map((run) => {
+					className: "rec-lane",
+					style: laneStyle
+				}, (0, react.createElement)("h2", {
+					className: "rec-lane-title",
+					style: laneTitleStyle
+				}, lane.label), laneRuns.map((run) => {
 					const facts = cardFacts(run);
 					return (0, react.createElement)("article", {
 						key: run.worktreeRoot + "\0" + run.runId,
 						className: "rec-card",
+						style: cardStyle,
 						onClick: open(run)
-					}, (0, react.createElement)("div", { className: "rec-card-head" }, (0, react.createElement)("strong", {}, run.runId), facts.tampered && (0, react.createElement)("span", {
+					}, (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" }, (0, react.createElement)("div", {
+					}, "!")), (0, react.createElement)("div", {
+						className: "rec-card-progress",
+						style: progressStyle
+					}, (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", {}, facts.currentPhase ?? "no phases"), (0, react.createElement)("span", { className: "rec-badge" }, facts.state)));
+						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)));
 				}));
 			}));
 		}
 		//#endregion
 		//#region src/client/inspector.tsx
 		/**
-		* Drill-down inspector (SP2 R1): 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.
+		* 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.
 		*/
-		function Inspector({ runId, worktreeRoot, snapshot, onBackToToolDetails }) {
+		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", {
+				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" }, (0, react.createElement)("p", {}, "Run not found: " + 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,
+				className: "rec-back",
+				style: backStyle
+			}, "← back to tool details"), close), (0, react.createElement)("p", {}, "Run not found: " + runId));
 			const facts = cardFacts(card);
 			const rows = expandPhaseRows(card);
-			return (0, react.createElement)("div", { className: "rec-inspector" }, (0, react.createElement)("div", { className: "rec-inspector-head" }, (0, react.createElement)("button", {
+			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"
-			}, "← back to tool details"), (0, react.createElement)("h2", {}, runId), (0, react.createElement)("span", { className: "rec-badge" }, facts.state), facts.tampered && (0, react.createElement)("span", { className: "rec-badge rec-badge-tamper" }, "tampered")), (0, react.createElement)("section", { className: "rec-inspector-section" }, (0, react.createElement)("h3", {}, "Phases"), rows.map((row) => (0, react.createElement)("div", {
+				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", {
 				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 ?? "—"), (0, react.createElement)("span", { className: "rec-badge" }, row.status), row.lockHash !== void 0 && (0, react.createElement)("code", { className: "rec-lockhash" }, "#" + row.lockHash.slice(0, 8))))), facts.gateBlocked && (0, react.createElement)("section", { className: "rec-inspector-section" }, (0, react.createElement)("h3", {}, "Gate"), (0, react.createElement)("p", {}, "Blocked (" + (facts.gateKind ?? "") + ")")));
+				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 ?? "") + ")")));
 		}
 		//#endregion
 		//#region src/client/strip.tsx
@@ -607,11 +854,13 @@ window.__ModuleLoader__.load({
 				runId: board.selection.runId,
 				worktreeRoot: board.selection.worktreeRoot,
 				snapshot,
-				onBackToToolDetails: () => boardState.backToBoard()
+				onBackToToolDetails: () => boardState.backToBoard(),
+				onClose: () => boardState.close()
 			});
 			return (0, react.createElement)(Board, {
 				snapshot,
-				onOpenInspector: (sel) => boardState.openInspector(sel)
+				onOpenInspector: (sel) => boardState.openInspector(sel),
+				onClose: () => boardState.close()
 			});
 		}
 		/**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@try-works/dsh-recursive-mode",
   "description": "recursive-mode workflow as a DeepSeek Harness bundle: RecursiveRuntime service + recursive_status tool",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/client/board.tsx

@@ -1,22 +1,75 @@
 /**
- * Board overlay (SP2 R1 + run 08 R3): 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").
+ * 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.
+ *
+ * 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.
  */
-import { createElement } from 'react'
+import { createElement, type CSSProperties } from 'react'
 import type { RecursiveProjection, RecursiveRunCard } from '../types.ts'
 import type { LiveProjectionValue } from './contract.ts'
 import { cardFacts, columnForRun, KANBAN_LANES } from './derive.ts'
 import type { BoardSelection } from './open-state.ts'
 
+/** Full-cover overlay style — the shell.overlay seat is click-through + unstyled by default (run 12). */
+export const overlayStyle: CSSProperties = {
+  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: CSSProperties = { marginBottom: 24 }
+const laneTitleStyle: CSSProperties = { fontSize: 14, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8, color: '#aaa' }
+const cardStyle: CSSProperties = {
+  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: CSSProperties = { display: 'flex', justifyContent: 'space-between', marginBottom: 8 }
+const badgeStyle: CSSProperties = { fontSize: 11, padding: '2px 6px', borderRadius: 4, background: '#333' }
+const badgeTamperStyle: CSSProperties = { background: '#7a1f1f' }
+const progressStyle: CSSProperties = { height: 6, background: '#333', borderRadius: 3, overflow: 'hidden' }
+const progressFillStyle: CSSProperties = { background: '#4c9aff', height: '100%' }
+const metaStyle: CSSProperties = { marginTop: 8, fontSize: 12, color: '#aaa', display: 'flex', justifyContent: 'space-between' }
+const emptyStyle: CSSProperties = { padding: 40, textAlign: 'center', color: '#888' }
+const closeStyle: CSSProperties = {
+  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. */
 export function listRuns(projection: RecursiveProjection | undefined): RecursiveRunCard[] {
   if (projection === undefined) return []
@@ -34,35 +87,40 @@ export interface BoardProps {
   snapshot: LiveProjectionValue | null
   /** Opens the drill-down inspector for a run (R3). */
   onOpenInspector?: (selection: BoardSelection) => void
+  /** Closes the overlay (run 12). */
+  onClose?: () => void
 }
 
-export function Board({ snapshot, onOpenInspector }: BoardProps) {
+export function Board({ snapshot, onOpenInspector, onClose }: BoardProps) {
   if (snapshot === null || snapshot.root === null) return null
   const runs = listRuns(snapshot.projection)
+  const close = onClose !== undefined ? createElement('button', { className: 'rec-close', style: closeStyle, onClick: onClose, title: 'Close' }, '×') : null
   if (runs.length === 0) {
-    return createElement('div', { className: 'rec-board', 'data-empty': true },
-      createElement('p', { className: 'rec-board-empty' }, 'No recursive runs in this workspace yet.'),
+    return createElement('div', { className: 'rec-board', 'data-empty': true, style: overlayStyle },
+      close,
+      createElement('p', { className: 'rec-board-empty', style: emptyStyle }, 'No recursive runs in this workspace yet.'),
     )
   }
   const open = (run: RecursiveRunCard) => () => onOpenInspector?.({ worktreeRoot: run.worktreeRoot, runId: run.runId })
-  return createElement('div', { className: 'rec-board' },
+  return createElement('div', { className: 'rec-board', style: overlayStyle },
+    close,
     KANBAN_LANES.map((lane) => {
       const laneRuns = runs.filter((r) => columnForRun(r) === lane.id)
-      return createElement('section', { key: lane.id, className: 'rec-lane' },
-        createElement('h2', { className: 'rec-lane-title' }, lane.label),
+      return createElement('section', { key: lane.id, className: 'rec-lane', style: laneStyle },
+        createElement('h2', { className: 'rec-lane-title', style: laneTitleStyle }, lane.label),
         laneRuns.map((run) => {
           const facts = cardFacts(run)
-          return createElement('article', { key: run.worktreeRoot + '\u0000' + run.runId, className: 'rec-card', onClick: open(run) },
-            createElement('div', { className: 'rec-card-head' },
+          return createElement('article', { key: run.worktreeRoot + '\u0000' + run.runId, className: 'rec-card', style: cardStyle, onClick: open(run) },
+            createElement('div', { className: 'rec-card-head', style: cardHeadStyle },
               createElement('strong', {}, run.runId),
-              facts.tampered && createElement('span', { className: 'rec-badge rec-badge-tamper', title: 'tampered' }, '!'),
+              facts.tampered && createElement('span', { className: 'rec-badge rec-badge-tamper', style: { ...badgeStyle, ...badgeTamperStyle }, title: 'tampered' }, '!'),
             ),
-            createElement('div', { className: 'rec-card-progress' },
-              createElement('div', { className: 'rec-card-progress-fill', style: { width: Math.round(facts.progress * 100) + '%' } }),
+            createElement('div', { className: 'rec-card-progress', style: progressStyle },
+              createElement('div', { className: 'rec-card-progress-fill', style: { ...progressFillStyle, width: Math.round(facts.progress * 100) + '%' } }),
             ),
-            createElement('div', { className: 'rec-card-meta' },
+            createElement('div', { className: 'rec-card-meta', style: metaStyle },
               createElement('span', {}, facts.currentPhase ?? 'no phases'),
-              createElement('span', { className: 'rec-badge' }, facts.state),
+              createElement('span', { className: 'rec-badge', style: badgeStyle }, facts.state),
             ),
           )
         }),

package/src/client/inspector.tsx

@@ -1,46 +1,71 @@
 /**
- * Drill-down inspector (SP2 R1): 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.
+ * 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.
  */
-import { createElement } from 'react'
+import { createElement, type CSSProperties } from 'react'
 import type { LiveProjectionValue } from './contract.ts'
 import { cardFacts, expandPhaseRows } from './derive.ts'
+import { overlayStyle } from './board.tsx'
+
+const headStyle: CSSProperties = { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16, borderBottom: '1px solid #333', paddingBottom: 12 }
+const backStyle: CSSProperties = { background: '#1f2329', color: '#e6e6e6', border: '1px solid #444', borderRadius: 6, padding: '6px 12px', cursor: 'pointer' }
+const closeStyle: CSSProperties = { background: '#1f2329', color: '#e6e6e6', border: '1px solid #444', borderRadius: 6, padding: '6px 12px', cursor: 'pointer', marginLeft: 'auto' }
+const sectionStyle: CSSProperties = { marginBottom: 16 }
+const rowStyle: CSSProperties = { display: 'flex', gap: 12, alignItems: 'center', padding: '6px 0', borderBottom: '1px solid #222', fontSize: 13 }
+const phaseIdStyle: CSSProperties = { minWidth: 220, fontFamily: 'monospace', color: '#4c9aff' }
+const phaseNameStyle: CSSProperties = { flex: 1, color: '#ccc' }
+const badgeStyle: CSSProperties = { fontSize: 11, padding: '2px 6px', borderRadius: 4, background: '#333' }
+const lockhashStyle: CSSProperties = { fontFamily: 'monospace', fontSize: 11, color: '#888' }
 
 export interface InspectorProps {
   runId: string
   worktreeRoot: string
   snapshot: LiveProjectionValue | null
   onBackToToolDetails: () => void
+  /** Closes the overlay (run 12). */
+  onClose?: () => void
 }
 
-export function Inspector({ runId, worktreeRoot, snapshot, onBackToToolDetails }: InspectorProps) {
+export function Inspector({ runId, worktreeRoot, snapshot, onBackToToolDetails, onClose }: InspectorProps) {
+  const close = onClose !== undefined ? createElement('button', { className: 'rec-close', style: closeStyle, onClick: onClose, title: 'Close' }, '×') : null
   const card = snapshot?.projection?.[worktreeRoot]?.[runId]
   if (card === undefined) {
-    return createElement('div', { className: 'rec-inspector' },
+    return createElement('div', { className: 'rec-inspector', style: overlayStyle },
+      createElement('div', { className: 'rec-inspector-head', style: headStyle },
+        createElement('button', { onClick: onBackToToolDetails, className: 'rec-back', style: backStyle }, '← back to tool details'),
+        close,
+      ),
       createElement('p', {}, 'Run not found: ' + runId),
     )
   }
   const facts = cardFacts(card)
   const rows = expandPhaseRows(card)
-  return createElement('div', { className: 'rec-inspector' },
-    createElement('div', { className: 'rec-inspector-head' },
-      createElement('button', { onClick: onBackToToolDetails, className: 'rec-back' }, '← back to tool details'),
-      createElement('h2', {}, runId),
-      createElement('span', { className: 'rec-badge' }, facts.state),
-      facts.tampered && createElement('span', { className: 'rec-badge rec-badge-tamper' }, 'tampered'),
+  return createElement('div', { className: 'rec-inspector', style: overlayStyle },
+    createElement('div', { className: 'rec-inspector-head', style: headStyle },
+      createElement('button', { onClick: onBackToToolDetails, className: 'rec-back', style: backStyle }, '← back to tool details'),
+      createElement('h2', { style: { margin: 0, fontSize: 18 } }, runId),
+      createElement('span', { className: 'rec-badge', style: badgeStyle }, facts.state),
+      facts.tampered && createElement('span', { className: 'rec-badge rec-badge-tamper', style: { ...badgeStyle, background: '#7a1f1f' } }, 'tampered'),
+      close,
     ),
-    createElement('section', { className: 'rec-inspector-section' },
-      createElement('h3', {}, 'Phases'),
-      rows.map((row) => createElement('div', { key: row.phase, className: 'rec-phase-row' },
-        createElement('span', { className: 'rec-phase-id' }, row.phase),
-        createElement('span', { className: 'rec-phase-name' }, row.fileName ?? '—'),
-        createElement('span', { className: 'rec-badge' }, row.status),
-        row.lockHash !== undefined && createElement('code', { className: 'rec-lockhash' }, '#' + row.lockHash.slice(0, 8)),
+    createElement('section', { className: 'rec-inspector-section', style: sectionStyle },
+      createElement('h3', { style: { fontSize: 13, textTransform: 'uppercase', letterSpacing: '0.08em', color: '#aaa', marginBottom: 8 } }, 'Phases'),
+      rows.map((row) => createElement('div', { key: row.phase, className: 'rec-phase-row', style: rowStyle },
+        createElement('span', { className: 'rec-phase-id', style: phaseIdStyle }, row.phase),
+        createElement('span', { className: 'rec-phase-name', style: phaseNameStyle }, row.fileName ?? '—'),
+        createElement('span', { className: 'rec-badge', style: badgeStyle }, row.status),
+        row.lockHash !== undefined && createElement('code', { className: 'rec-lockhash', style: lockhashStyle }, '#' + row.lockHash.slice(0, 8)),
       )),
     ),
-    facts.gateBlocked && createElement('section', { className: 'rec-inspector-section' },
-      createElement('h3', {}, 'Gate'),
+    facts.gateBlocked && createElement('section', { className: 'rec-inspector-section', style: sectionStyle },
+      createElement('h3', { style: { fontSize: 13, textTransform: 'uppercase', letterSpacing: '0.08em', color: '#aaa', marginBottom: 8 } }, 'Gate'),
       createElement('p', {}, 'Blocked (' + (facts.gateKind ?? '') + ')'),
     ),
   )

package/src/client/slots.ts

@@ -143,9 +143,10 @@ function RecursiveBoardOverlay({ useSessions }: { useSessions: SnapshotSelectorH
       worktreeRoot: board.selection.worktreeRoot,
       snapshot,
       onBackToToolDetails: () => boardState.backToBoard(),
+      onClose: () => boardState.close(),
     })
   }
-  return createElement(Board, { snapshot, onOpenInspector: (sel) => boardState.openInspector(sel) })
+  return createElement(Board, { snapshot, onOpenInspector: (sel) => boardState.openInspector(sel), onClose: () => boardState.close() })
 }
 
 /**