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

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.11",
+  "version": "0.1.13",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/client/board.tsx

@@ -1,75 +1,19 @@
 /**
- * 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").
+ * 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 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 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).
  */
-import { createElement, type CSSProperties } from 'react'
+import { createElement } from 'react'
 import type { RecursiveProjection, RecursiveRunCard } from '../types.ts'
 import type { LiveProjectionValue } from './contract.ts'
-import { cardFacts, columnForRun, KANBAN_LANES } from './derive.ts'
+import { cardFacts, columnForRun, KANBAN_LANES, cardPill, PILL_LABELS } from './derive.ts'
+import { useBoardTheme, ThemeToggle } from './theme.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 []
@@ -83,48 +27,74 @@ export function listRuns(projection: RecursiveProjection | undefined): Recursive
 }
 
 export interface BoardProps {
-  /** The live host-route snapshot (null = not loaded / no recursive root). */
   snapshot: LiveProjectionValue | null
-  /** Opens the drill-down inspector for a run (R3). */
   onOpenInspector?: (selection: BoardSelection) => void
-  /** Closes the overlay (run 12). */
   onClose?: () => void
 }
 
+function closeButton(onClose: (() => void) | undefined) {
+  if (onClose === undefined) return null
+  return createElement('button', { type: 'button', className: 'rec-close', onClick: onClose, title: 'Close', 'aria-label': 'Close' }, '×')
+}
+
+function solidPill(kind: ReturnType<typeof cardPill>) {
+  return createElement('span', { className: 'rec-pill', 'data-pill': kind }, PILL_LABELS[kind])
+}
+
 export function Board({ snapshot, onOpenInspector, onClose }: BoardProps) {
+  const { theme, toggle } = useBoardTheme()
   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
+  const workspacePath = snapshot.root
+  const open = (run: RecursiveRunCard) => () => onOpenInspector?.({ worktreeRoot: run.worktreeRoot, runId: run.runId })
   if (runs.length === 0) {
-    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.'),
+    return createElement('div', { className: 'rec-board', 'data-theme': theme, 'data-empty': true },
+      createElement('header', { className: 'rec-board-header' },
+        createElement('h2', { className: 'rec-board-title' }, 'Recursive runs'),
+        createElement('span', { className: 'rec-board-path' }, workspacePath),
+        createElement('span', { className: 'rec-board-count' }, '0 runs'),
+        createElement(ThemeToggle, { theme, toggle }),
+        closeButton(onClose),
+      ),
+      createElement('p', { className: 'rec-board-empty' }, 'No recursive runs in this workspace yet.'),
     )
   }
-  const open = (run: RecursiveRunCard) => () => onOpenInspector?.({ worktreeRoot: run.worktreeRoot, runId: run.runId })
-  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', 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', 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', style: { ...badgeStyle, ...badgeTamperStyle }, title: 'tampered' }, '!'),
-            ),
-            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', style: metaStyle },
-              createElement('span', {}, facts.currentPhase ?? 'no phases'),
-              createElement('span', { className: 'rec-badge', style: badgeStyle }, facts.state),
-            ),
-          )
-        }),
-      )
-    }),
+  return createElement('div', { className: 'rec-board', 'data-theme': theme },
+    createElement('header', { className: 'rec-board-header' },
+      createElement('h2', { className: 'rec-board-title' }, 'Recursive runs'),
+      createElement('span', { className: 'rec-board-path' }, workspacePath),
+      createElement('span', { className: 'rec-board-count' }, runs.length + ' runs'),
+      createElement(ThemeToggle, { theme, toggle }),
+      closeButton(onClose),
+    ),
+    createElement('div', { className: 'rec-columns' },
+      KANBAN_LANES.map((lane) => {
+        const laneRuns = runs.filter((r) => columnForRun(r) === lane.id)
+        return createElement('section', { key: lane.id, className: 'rec-column' },
+          createElement('header', { className: 'rec-column-header' },
+            createElement('span', { className: 'rec-status-dot', 'data-status': laneRuns.length > 0 ? laneRuns[laneRuns.length - 1].state : 'new', 'aria-hidden': true }),
+            createElement('h3', { className: 'rec-column-title' }, lane.label),
+            createElement('span', { className: 'rec-column-count' }, String(laneRuns.length)),
+          ),
+          createElement('div', { className: 'rec-cards' },
+            laneRuns.map((run) => {
+              const facts = cardFacts(run)
+              const pill = cardPill(run)
+              return createElement('article', { key: run.worktreeRoot + '\u0000' + run.runId, className: 'rec-card', 'data-state': run.state, onClick: open(run) },
+                createElement('div', { className: 'rec-card-title' }, run.runId),
+                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-meta' },
+                  createElement('span', { className: 'rec-card-phase' }, facts.currentPhase ?? 'no phases'),
+                  solidPill(pill),
+                ),
+              )
+            }),
+            laneRuns.length === 0 && createElement('div', { className: 'rec-column-empty' }, '—'),
+          ),
+        )
+      }),
+    ),
   )
 }

package/src/client/derive.ts

@@ -187,6 +187,40 @@ export function cardFacts(card: RecursiveRunCard): RecursiveCardFacts {
  * worktree root is part of the id so two runs with the same runId in
  * different worktrees never collide — never "latest unfinished".
  */
+/** Solid status-pill kinds (run 16 / Paper StatusPill). */
+export type PillKind = 'locked' | 'in-progress' | 'paused' | 'blocked' | 'tampered' | 'advisory' | 'neutral'
+
+/** Human pill label per kind (neutral renders an empty dash). */
+export const PILL_LABELS: Record<PillKind, string> = {
+  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.
+ */
+export function cardPill(card: RecursiveRunCard): PillKind {
+  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 / '—'). */
+export function phaseStatusPill(status: string): PillKind {
+  if (status === 'LOCKED') return 'locked'
+  if (status === '' || status === '—') return 'neutral'
+  return 'in-progress'
+}
+
 export function nodeKeyOf(runId: string, worktreeRoot: string): string {
   return worktreeRoot + '\u0000' + runId
 }

package/src/client/inspector.tsx

@@ -1,72 +1,72 @@
 /**
- * Drill-down inspector (SP2 R1 + run 12): the details-seat swap rendering one
- * run's phase chain (with the always-shown 3.5 row + full 6/7/8 rows), lock
- * badges, and tamper/gate facts — all from the live host-route snapshot, never
- * disk.
- *
- * Run 12 (LIVE BUG): same as the board — shell.overlay is click-through and
- * unstyled, so the inspector mounts INVISIBLE + CLICK-THROUGH without inline
- * styles. Full-cover fixed overlay + pointerEvents auto + a back button and a
- * close button.
+ * Drill-down inspector (SP2 R1 + run 15/16): centered modal-style detail panel
+ * (Paper .detail shape) with back + close, data-theme (default light), theme
+ * toggle, and solid status pills. All from the live host-route snapshot.
+ * useBoardTheme is hoisted ABOVE the not-found early return.
  */
-import { createElement, type CSSProperties } from 'react'
+import { createElement, type ReactNode } 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' }
+import { cardFacts, expandPhaseRows, cardPill, phaseStatusPill, PILL_LABELS } from './derive.ts'
+import { useBoardTheme, ThemeToggle } from './theme.ts'
+import type { BoardTheme } from './theme.ts'
 
 export interface InspectorProps {
   runId: string
   worktreeRoot: string
   snapshot: LiveProjectionValue | null
   onBackToToolDetails: () => void
-  /** Closes the overlay (run 12). */
   onClose?: () => void
 }
 
+function closeButton(onClose: (() => void) | undefined) {
+  if (onClose === undefined) return null
+  return createElement('button', { type: 'button', className: 'rec-close', onClick: onClose, title: 'Close', 'aria-label': 'Close' }, '×')
+}
+
+function solidPill(kind: string) {
+  return createElement('span', { className: 'rec-pill', 'data-pill': kind }, PILL_LABELS[kind as keyof typeof PILL_LABELS])
+}
+
+function detailShell(runId: string, onBackToToolDetails: () => void, onClose: (() => void) | undefined, headerExtra: ReactNode, body: ReactNode, theme: BoardTheme, toggle: () => void) {
+  return createElement('div', { className: 'rec-inspector', 'data-theme': theme },
+    createElement('div', { className: 'rec-detail' },
+      createElement('div', { className: 'rec-detail-header' },
+        createElement('button', { type: 'button', className: 'rec-back', onClick: onBackToToolDetails }, '← Back'),
+        createElement('h2', { className: 'rec-detail-title' }, runId),
+        headerExtra,
+        createElement(ThemeToggle, { theme, toggle }),
+        closeButton(onClose),
+      ),
+      createElement('div', { className: 'rec-detail-body' }, body),
+    ),
+  )
+}
+
 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 { theme, toggle } = useBoardTheme()
   const card = snapshot?.projection?.[worktreeRoot]?.[runId]
   if (card === undefined) {
-    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),
+    return detailShell(runId, onBackToToolDetails, onClose, null,
+      createElement('p', { className: 'rec-detail-text' }, 'Run not found: ' + runId),
+      theme, toggle,
     )
   }
   const facts = cardFacts(card)
   const rows = expandPhaseRows(card)
-  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', 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', style: sectionStyle },
-      createElement('h3', { style: { fontSize: 13, textTransform: 'uppercase', letterSpacing: '0.08em', color: '#aaa', marginBottom: 8 } }, 'Gate'),
-      createElement('p', {}, 'Blocked (' + (facts.gateKind ?? '') + ')'),
+  const pill = cardPill(card)
+  const headerExtra = solidPill(pill)
+  const body = createElement('section', { className: 'rec-detail-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 ?? '—'),
+      solidPill(phaseStatusPill(row.status)),
+      row.lockHash !== undefined && createElement('code', { className: 'rec-lockhash' }, '#' + row.lockHash.slice(0, 8)),
+    )),
+    facts.gateBlocked && createElement('div', { className: 'rec-detail-section' },
+      createElement('h3', {}, 'Gate'),
+      createElement('p', { className: 'rec-detail-text' }, 'Blocked (' + (facts.gateKind ?? '') + ')'),
     ),
   )
+  return detailShell(runId, onBackToToolDetails, onClose, headerExtra, body, theme, toggle)
 }

package/src/client/slots.ts

@@ -25,6 +25,7 @@ import { StatusStrip } from './strip.tsx'
 import { RecursiveSettings } from './settings.tsx'
 import { useLiveProjection } from './use-live.ts'
 import { boardState, useBoardState } from './open-state.ts'
+import { injectBoardStyles } from './styles.ts'
 
 /** Structural standard-prop face for the root scope (useSessions/useWorkspaces). */
 interface RootSlotProps {
@@ -73,6 +74,8 @@ export function RecursiveLauncherGate({ useSessions }: { useSessions: SnapshotSe
 
 export function registerSlots(ctx: ClientContext): () => void {
   const disposers: (() => void)[] = []
+  // Run 15: inject the one-shot theme-token stylesheet once per document (idempotent).
+  disposers.push(injectBoardStyles())
 
   // Board launcher in the sidebar footer action list — OPENS the shared board store (run 08 R1).
   // Run 11 (UX gate): the seat is root-scoped (visible in every session), but the board it