@try-works/dsh-recursive-mode 0.1.12 → 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,15 +270,59 @@ 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 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 and mapped to their current-phase
-		* lane via derive.columnForRun.
+		* 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 15 (task-board redesign): class-based structure + theme-token stylesheet
-		* injected once via styles.ts (no inline styles — unlocks hover/grid/theme).
+		* 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).
 		*/
 		/** Flatten the worktree-grouped projection into a stable run list. */
 		function listRuns(projection) {
@@ -269,18 +341,36 @@ window.__ModuleLoader__.load({
 				"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 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"), 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) => {
+			}, (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",
+				"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,
@@ -291,6 +381,7 @@ window.__ModuleLoader__.load({
 					"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",
@@ -299,23 +390,17 @@ window.__ModuleLoader__.load({
 					}, (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",
-						"data-status": run.state,
-						title: "tampered"
-					}, "!"), (0, react.createElement)("span", {
-						className: "rec-badge",
-						"data-status": run.state
-					}, run.state)));
+					})), (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 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.
+		* Drill-down inspector (SP2 R1 + run 15/16): centered modal-style detail panel
+		* (Paper .detail shape) with back + close, data-theme (default light), theme
+		* toggle, and solid status pills. All from the live host-route snapshot.
+		* useBoardTheme is hoisted ABOVE the not-found early return.
 		*/
 		function closeButton(onClose) {
 			if (onClose === void 0) return null;
@@ -327,37 +412,35 @@ window.__ModuleLoader__.load({
 				"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", {
+		function solidPill(kind) {
+			return (0, react.createElement)("span", {
+				className: "rec-pill",
+				"data-pill": kind
+			}, PILL_LABELS[kind]);
+		}
+		function detailShell(runId, onBackToToolDetails, onClose, headerExtra, body, theme, toggle) {
+			return (0, react.createElement)("div", {
+				className: "rec-inspector",
+				"data-theme": theme
+			}, (0, react.createElement)("div", { className: "rec-detail" }, (0, react.createElement)("div", { className: "rec-detail-header" }, (0, react.createElement)("button", {
 				type: "button",
 				className: "rec-back",
 				onClick: onBackToToolDetails
-			}, "← Back"), (0, react.createElement)("h2", { className: "rec-detail-title" }, runId), headerExtra, closeButton(onClose)), (0, react.createElement)("div", { className: "rec-detail-body" }, body)));
+			}, "← 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));
+			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);
-			const badge = (0, react.createElement)("span", {
-				className: "rec-badge",
-				"data-status": card.state
-			}, facts.state);
-			const tamper = facts.tampered ? (0, react.createElement)("span", {
-				className: "rec-badge rec-badge-tamper",
-				"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", {
+			return detailShell(runId, onBackToToolDetails, onClose, solidPill(cardPill(card)), (0, react.createElement)("section", { className: "rec-detail-section" }, (0, react.createElement)("h3", {}, "Phases"), rows.map((row) => (0, react.createElement)("div", {
 				key: row.phase,
 				className: "rec-phase-row"
-			}, (0, react.createElement)("span", { className: "rec-phase-id" }, row.phase), (0, react.createElement)("span", { className: "rec-phase-name" }, row.fileName ?? "—"), (0, react.createElement)("span", {
-				className: "rec-badge",
-				"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 ?? "") + ")"))));
+			}, (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
@@ -565,28 +648,138 @@ window.__ModuleLoader__.load({
 		//#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.
+		* 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 board + inspector (theme-token driven, .rec-* scoped) */
+/* ===== 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;
-  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;
+  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;
 }
@@ -594,86 +787,119 @@ window.__ModuleLoader__.load({
 .rec-board-header {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--board-space-12);
   flex: none;
 }
 
 .rec-board-title {
   margin: 0;
-  font-size: 16px;
-  font-weight: 700;
-  color: var(--dsw-alias-label-primary);
+  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: 12px;
-  color: var(--dsw-alias-label-tertiary);
-  background: var(--dsw-alias-interactive-bg-hover);
-  border-radius: 999px;
-  padding: 1px 8px;
+  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: 40px;
+  padding: var(--board-space-32);
   text-align: center;
-  color: var(--dsw-alias-label-tertiary);
+  color: var(--board-muted-fg);
 }
 
 .rec-close {
-  position: absolute;
-  top: 14px;
-  right: 16px;
-  z-index: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 26px;
-  height: 26px;
+  width: 28px;
+  height: 28px;
   padding: 0;
+  margin-left: auto;
+  flex: none;
   background: transparent;
-  border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 6px;
-  color: var(--dsw-alias-label-secondary);
+  border: 1px solid var(--board-border);
+  border-radius: var(--board-radius-md);
+  color: var(--board-muted-fg);
   cursor: pointer;
-  font-size: 15px;
+  font-size: var(--board-text-md);
   line-height: 1;
 }
 
 .rec-close:hover {
-  background: var(--dsw-alias-interactive-bg-hover);
-  color: var(--dsw-alias-label-primary);
+  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(240px, 1fr);
-  gap: 12px;
+  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(--dsw-alias-border-l3) var(--dsw-alias-interactive-bg-hover);
+  scrollbar-color: var(--board-border) var(--board-accent);
   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-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(--dsw-alias-bg-layer-2);
-  border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: 12px;
+  background: var(--board-muted);
+  border: 1px solid var(--board-border);
+  border-radius: var(--board-radius-xl);
   overflow: hidden;
 }
 
@@ -681,7 +907,7 @@ window.__ModuleLoader__.load({
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 10px 12px;
+  padding: var(--board-space-12);
   flex: none;
 }
 
@@ -689,8 +915,8 @@ window.__ModuleLoader__.load({
   margin: 0;
   flex: 1;
   font-size: 13px;
-  font-weight: 700;
-  color: var(--dsw-alias-label-primary);
+  font-weight: var(--board-fw-semibold);
+  color: var(--board-fg);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -698,77 +924,71 @@ window.__ModuleLoader__.load({
 
 .rec-column-count {
   flex: none;
-  font-size: 12px;
-  color: var(--dsw-alias-label-tertiary);
-  background: var(--dsw-alias-interactive-bg-hover);
-  border-radius: 999px;
+  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: 8px;
-  height: 8px;
+  width: 6px;
+  height: 6px;
   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-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: 8px;
-  padding: 2px 8px 10px;
+  gap: var(--board-space-8);
+  padding: 10px;
   overflow-y: auto;
   flex: 1;
   min-height: 0;
 }
 
 .rec-column-empty {
-  padding: 24px 8px;
+  padding: var(--board-space-24) var(--board-space-8);
   text-align: center;
-  font-size: 12px;
-  color: var(--dsw-alias-label-tertiary);
+  font-size: var(--board-text-xs);
+  color: var(--board-muted-fg);
 }
 
 .rec-card {
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  padding: 10px 12px;
+  gap: var(--board-space-8);
+  padding: var(--board-space-12) 14px;
   text-align: left;
-  background: var(--dsw-alias-bg-base);
-  border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 10px;
+  background: var(--board-card);
+  border: 1px solid var(--board-border);
+  border-radius: var(--board-radius-lg);
   cursor: pointer;
-  color: var(--dsw-alias-label-primary);
+  color: var(--board-fg);
   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);
+  border-color: var(--board-info);
   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;
+  font-weight: var(--board-fw-semibold);
   line-height: 1.35;
   overflow: hidden;
   display: -webkit-box;
@@ -778,52 +998,55 @@ window.__ModuleLoader__.load({
 
 .rec-card-progress {
   height: 6px;
-  background: var(--dsw-alias-interactive-bg-hover);
+  background: var(--board-accent);
   border-radius: 3px;
   overflow: hidden;
 }
 
 .rec-card-progress-fill {
   height: 100%;
-  background: var(--dsw-alias-state-business-primary);
+  background: var(--board-info);
 }
 
 .rec-card-meta {
   display: flex;
   align-items: center;
-  gap: 8px;
-  font-size: 11px;
-  color: var(--dsw-alias-label-tertiary);
+  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;
 }
 
-.rec-badge {
+/* ===== Solid status pill (Paper StatusPill) ===== */
+.rec-pill {
   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);
+  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-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-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); }
 
-.rec-badge-tamper {
-  color: var(--dsw-alias-state-error-primary);
-  border-color: var(--dsw-alias-state-error-primary);
-}
-
-/* inspector: centered modal-style detail */
+/* ===== Inspector: centered modal detail ===== */
 .rec-inspector {
   position: fixed;
   inset: 0;
@@ -831,7 +1054,7 @@ window.__ModuleLoader__.load({
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--dsw-alias-bg-mask-1);
+  background: rgba(0, 0, 0, 0.4);
   pointer-events: auto;
 }
 
@@ -840,20 +1063,21 @@ window.__ModuleLoader__.load({
   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);
+  background: var(--board-bg);
+  border: 1px solid var(--board-border);
   border-radius: 14px;
-  box-shadow: var(--dsw-shadow-lv3);
-  color: var(--dsw-alias-label-primary);
+  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: 10px;
-  padding: 14px 18px;
-  border-bottom: 1px solid var(--dsw-alias-separator-primary);
+  gap: var(--board-space-12);
+  padding: var(--board-space-16) var(--board-space-16);
+  border-bottom: 1px solid var(--board-border);
   flex: none;
 }
 
@@ -861,7 +1085,8 @@ window.__ModuleLoader__.load({
   margin: 0;
   flex: 1;
   font-size: 15px;
-  font-weight: 700;
+  font-weight: var(--board-fw-semibold);
+  letter-spacing: var(--board-tracking-tight);
   overflow-wrap: anywhere;
 }
 
@@ -869,26 +1094,26 @@ window.__ModuleLoader__.load({
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 5px 12px;
-  font-size: 12px;
-  color: var(--dsw-alias-label-primary);
+  padding: 5px var(--board-space-12);
+  font-size: var(--board-text-xs);
+  color: var(--board-fg);
   background: transparent;
-  border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 8px;
+  border: 1px solid var(--board-border);
+  border-radius: var(--board-radius-lg);
   cursor: pointer;
   white-space: nowrap;
 }
 
 .rec-back:hover {
-  background: var(--dsw-alias-interactive-bg-hover);
+  background: var(--board-accent);
 }
 
 .rec-detail-body {
-  padding: 14px 18px;
+  padding: var(--board-space-16);
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--board-space-16);
   flex: 1;
 }
 
@@ -900,43 +1125,70 @@ window.__ModuleLoader__.load({
 
 .rec-detail-section h3 {
   margin: 0;
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--dsw-alias-label-tertiary);
+  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: 10px;
-  padding: 8px 10px;
-  border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: 8px;
+  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(--dsw-font-markdown-code-block-small);
-  color: var(--dsw-alias-state-business-primary);
+  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(--dsw-alias-label-primary);
+  color: var(--board-fg);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .rec-lockhash {
-  font-family: var(--dsw-font-markdown-code-block-small);
+  font-family: var(--board-font-mono);
   font-size: 11px;
-  color: var(--dsw-alias-label-tertiary);
+  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 { transition: none; }
+  .rec-card, .rec-back, .rec-close, .rec-theme-toggle { transition: none; }
 }
 `;
 		/**