@try-works/dsh-recursive-mode 0.1.12 → 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.12",
+  "version": "0.1.13",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/client/board.tsx

@@ -1,16 +1,17 @@
 /**
- * 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).
  */
 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'
 
 /** Flatten the worktree-grouped projection into a stable run list. */
@@ -36,23 +37,34 @@ function closeButton(onClose: (() => void) | undefined) {
   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 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 },
+    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.'),
     )
   }
-  return createElement('div', { className: 'rec-board' },
+  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-count' }, String(runs.length)),
+      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' },
@@ -67,6 +79,7 @@ export function Board({ snapshot, onOpenInspector, onClose }: BoardProps) {
           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' },
@@ -74,8 +87,7 @@ export function Board({ snapshot, onOpenInspector, onClose }: BoardProps) {
                 ),
                 createElement('div', { className: 'rec-card-meta' },
                   createElement('span', { className: 'rec-card-phase' }, facts.currentPhase ?? 'no phases'),
-                  facts.tampered && createElement('span', { className: 'rec-badge rec-badge-tamper', 'data-status': run.state, title: 'tampered' }, '!'),
-                  createElement('span', { className: 'rec-badge', 'data-status': run.state }, run.state),
+                  solidPill(pill),
                 ),
               )
             }),

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,11 +1,14 @@
 /**
- * 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.
  */
 import { createElement, type ReactNode } from 'react'
 import type { LiveProjectionValue } from './contract.ts'
-import { cardFacts, expandPhaseRows } from './derive.ts'
+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
@@ -20,13 +23,18 @@ function closeButton(onClose: (() => void) | undefined) {
   return createElement('button', { type: 'button', className: 'rec-close', onClick: onClose, title: 'Close', 'aria-label': 'Close' }, '×')
 }
 
-function detailShell(runId: string, onBackToToolDetails: () => void, onClose: (() => void) | undefined, headerExtra: ReactNode, body: ReactNode) {
-  return createElement('div', { className: 'rec-inspector' },
+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),
@@ -35,23 +43,24 @@ function detailShell(runId: string, onBackToToolDetails: () => void, onClose: ((
 }
 
 export function Inspector({ runId, worktreeRoot, snapshot, onBackToToolDetails, onClose }: InspectorProps) {
+  const { theme, toggle } = useBoardTheme()
   const card = snapshot?.projection?.[worktreeRoot]?.[runId]
   if (card === undefined) {
     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)
-  const badge = createElement('span', { className: 'rec-badge', 'data-status': card.state }, facts.state)
-  const tamper = facts.tampered ? createElement('span', { className: 'rec-badge rec-badge-tamper', 'data-status': card.state }, 'tampered') : null
-  const headerExtra = createElement('span', { style: { display: 'flex', alignItems: 'center', gap: 6 } }, badge, tamper)
+  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 ?? '—'),
-      createElement('span', { className: 'rec-badge', 'data-status': row.status === 'LOCKED' ? 'complete' : 'active' }, row.status),
+      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' },
@@ -59,5 +68,5 @@ export function Inspector({ runId, worktreeRoot, snapshot, onBackToToolDetails,
       createElement('p', { className: 'rec-detail-text' }, 'Blocked (' + (facts.gateKind ?? '') + ')'),
     ),
   )
-  return detailShell(runId, onBackToToolDetails, onClose, headerExtra, body)
+  return detailShell(runId, onBackToToolDetails, onClose, headerExtra, body, theme, toggle)
 }