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

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

package/src/client/board.tsx

@@ -1,75 +1,18 @@
 /**
- * Board overlay (SP2 R1 + run 08 R3 + run 12): the kanban view over the live
+ * Board overlay (SP2 R1 + run 08 R3 + run 15): the kanban view over the live
  * host-route projection. Pure read-only renderer — no filesystem, no run-file
- * scraping. Cards are grouped by worktree root (the projection's outer key) and
- * mapped to their current-phase lane via derive.columnForRun. Renders NOTHING
- * when the snapshot is null (no recursive root / not loaded) or the current
- * session is not on the recursive preset (the gate lives in slots.ts — here an
- * empty projection with a null root is a no-op, not an "empty board").
+ * scraping. Cards are grouped by worktree root and mapped to their current-phase
+ * lane via derive.columnForRun.
  *
- * Run 08 R3: a card click opens the drill-down inspector via onOpenInspector
- * (the overlay swaps board <-> inspector in slots.ts). Read-only still: the
- * callback only selects a run for display; no mutation.
- *
- * Run 12 (LIVE BUG): shell.overlay is a click-through, unstyled frame layer —
- * without inline styles the mounted board was INVISIBLE (no position/size/z)
- * and CLICK-THROUGH (no pointer-events opt-in). Everything is styled inline
- * (no CSS pipeline in the CJS client bundle): full-cover fixed overlay, opaque
- * backdrop, pointerEvents auto, and a visible close button.
+ * Run 15 (task-board redesign): class-based structure + theme-token stylesheet
+ * injected once via styles.ts (no inline styles — unlocks hover/grid/theme).
  */
-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 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 +26,63 @@ 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' }, '×')
+}
+
 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
+  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-empty': true },
+      createElement('header', { className: 'rec-board-header' },
+        createElement('h2', { className: 'rec-board-title' }, 'Recursive runs'),
+        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' },
+    createElement('header', { className: 'rec-board-header' },
+      createElement('h2', { className: 'rec-board-title' }, 'Recursive runs'),
+      createElement('span', { className: 'rec-board-count' }, String(runs.length)),
+      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)
+              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'),
+                  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),
+                ),
+              )
+            }),
+            laneRuns.length === 0 && createElement('div', { className: 'rec-column-empty' }, '—'),
+          ),
+        )
+      }),
+    ),
   )
 }

package/src/client/contract.ts

@@ -101,3 +101,51 @@ export function isRecursivePreset(state: SessionListStateLike): boolean {
 export function currentSessionCwd(state: SessionListStateLike): string {
   return state.current === undefined ? '' : (state.byId[state.current]?.cwd ?? '')
 }
+
+/**
+ * A workspace row — the structural mirror of the REAL WorkspaceView the host
+ * injects. We consume only workspaceId/path/title/sessionIds.
+ */
+export interface WorkspaceViewLike {
+  workspaceId: string
+  path: string
+  title: string
+  sessionIds: string[]
+}
+
+/**
+ * The workspace-list snapshot — the structural subset of the REAL
+ * WorkspaceListState we consume (items + recentWorkspaceId). The real state
+ * also carries archivedSessionIds/state/phase/error/baselinesReady; those are
+ * irrelevant here and the real value satisfies this subset.
+ */
+export interface WorkspaceListStateLike {
+  items: readonly WorkspaceViewLike[]
+  recentWorkspaceId?: string
+}
+
+/**
+ * Resolve the CURRENT workspace path for a workspace-scoped board (run 14):
+ * the WORKSPACE owns the .recursive/ run-layer, not the session. Resolution:
+ *   1) recentWorkspaceId's item path (the workspace the user is viewing), else
+ *   2) the workspace whose sessionIds contains sessionList.current, else
+ *   3) the workspace whose path === currentSessionCwd(sessionList), else
+ *   4) '' (empty -> the route returns null root -> board renders nothing).
+ */
+export function currentWorkspacePath(list: WorkspaceListStateLike, sessionList: SessionListStateLike): string {
+  if (list.recentWorkspaceId !== undefined) {
+    const recent = list.items.find((w) => w.workspaceId === list.recentWorkspaceId)
+    if (recent !== undefined) return recent.path
+  }
+  const current = sessionList.current
+  if (current !== undefined) {
+    const bySession = list.items.find((w) => w.sessionIds.includes(current))
+    if (bySession !== undefined) return bySession.path
+  }
+  const cwd = currentSessionCwd(sessionList)
+  if (cwd !== '') {
+    const byCwd = list.items.find((w) => w.path === cwd)
+    if (byCwd !== undefined) return byCwd.path
+  }
+  return ''
+}

package/src/client/index.ts

@@ -23,8 +23,8 @@ export { useLiveProjection } from './use-live.ts'
 export type { LiveProjectionSnapshot } from './use-live.ts'
 export { fetchLiveState, subscribeLiveEvents } from './host-api.ts'
 export type { LiveRecursiveState, LiveRecursiveFrame, LiveScope } from './host-api.ts'
-export { isRecursivePreset, currentSessionCwd } from './contract.ts'
-export type { SessionSummaryRow, SessionListStateLike, SnapshotSelectorHook, ClientContext } from './contract.ts'
+export { isRecursivePreset, currentSessionCwd, currentWorkspacePath } from './contract.ts'
+export type { SessionSummaryRow, SessionListStateLike, SnapshotSelectorHook, WorkspaceViewLike, WorkspaceListStateLike, ClientContext } from './contract.ts'
 
 /** Required services (fiber inject waiting — the runtime must be up first). */
 export const inject = ['slots', 'sessions', 'workspaces', 'connection']

package/src/client/inspector.tsx

@@ -1,72 +1,63 @@
 /**
- * Drill-down inspector (SP2 R1 + run 12): the details-seat swap rendering one
- * run's phase chain (with the always-shown 3.5 row + full 6/7/8 rows), lock
- * badges, and tamper/gate facts — all from the live host-route snapshot, never
- * disk.
- *
- * Run 12 (LIVE BUG): same as the board — shell.overlay is click-through and
- * unstyled, so the inspector mounts INVISIBLE + CLICK-THROUGH without inline
- * styles. Full-cover fixed overlay + pointerEvents auto + a back button and a
- * close button.
+ * Drill-down inspector (SP2 R1 + run 15): centered modal-style detail panel
+ * (task-board .detail shape) rendering one run's phase chain, lock badges, and
+ * tamper/gate facts — all from the live host-route snapshot, never disk.
  */
-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' }
 
 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 detailShell(runId: string, onBackToToolDetails: () => void, onClose: (() => void) | undefined, headerExtra: ReactNode, body: ReactNode) {
+  return createElement('div', { className: 'rec-inspector' },
+    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,
+        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 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),
     )
   }
   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 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 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),
+      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)
 }

package/src/client/slots.ts

@@ -17,19 +17,20 @@
  * READ-ONLY (R9): the client only GETs the live host route; no mutation.
  */
 import { createElement, type ReactNode } from 'react'
-import type { ClientContext, SessionListStateLike, SnapshotSelectorHook } from './contract.ts'
-import { isRecursivePreset, currentSessionCwd } from './contract.ts'
+import type { ClientContext, SessionListStateLike, SnapshotSelectorHook, WorkspaceListStateLike } from './contract.ts'
+import { isRecursivePreset, currentSessionCwd, currentWorkspacePath } from './contract.ts'
 import { Board } from './board.tsx'
 import { Inspector } from './inspector.tsx'
 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 {
   useSessions?: SnapshotSelectorHook<SessionListStateLike>
-  useWorkspaces?: SnapshotSelectorHook<unknown>
+  useWorkspaces?: SnapshotSelectorHook<WorkspaceListStateLike>
 }
 
 /** Structural standard-prop face for the session scope (sessionId + useSessions). */
@@ -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
@@ -97,7 +100,7 @@ export function registerSlots(ctx: ClientContext): () => void {
   }, (props: RootSlotProps) => {
     const useSessions = props?.useSessions
     if (useSessions === undefined) return null
-    return createElement(RecursiveBoardOverlay, { useSessions })
+    return createElement(RecursiveBoardOverlay, { useSessions, useWorkspaces: props?.useWorkspaces })
   })))
 
   // Status strip in the composer input dock (session scope) — gated the same way.
@@ -129,12 +132,17 @@ export function registerSlots(ctx: ClientContext): () => void {
  * Run 10: consumes the full SessionListStateLike through the identity selector
  * (useSessions((s) => s)); no fake {list:{getSnapshot}} wrapper.
  */
-export function RecursiveBoardOverlay({ useSessions }: { useSessions: SnapshotSelectorHook<SessionListStateLike> }): ReactNode {
+export function RecursiveBoardOverlay({ useSessions, useWorkspaces }: { useSessions: SnapshotSelectorHook<SessionListStateLike>; useWorkspaces?: SnapshotSelectorHook<WorkspaceListStateLike> }): ReactNode {
   const board = useBoardState()
-  const list = useRecursiveSessions(useSessions)
-  const content = overlayContent(board, list)
-  const cwd = currentSessionCwd(list)
-  const scope = { sessionId: list.current, cwd }
+  const sessions = useRecursiveSessions(useSessions)
+  // Run 14 (USER-DIRECTED): the board keys on the WORKSPACE, not the session —
+  // the workspace owns the .recursive/ run-layer history. Hoist ALL hooks first.
+  const workspaces: WorkspaceListStateLike = useWorkspaces !== undefined
+    ? useWorkspaces((s) => s)
+    : { items: [], recentWorkspaceId: undefined }
+  const content = overlayContent(board, sessions)
+  const wsPath = currentWorkspacePath(workspaces, sessions)
+  const scope = { cwd: wsPath }
   // Run 13 (LIVE BUG): ALWAYS call useLiveProjection — a conditional hook (after the
   // hidden early return) changed the hook count across renders and threw
   // 'Rendered more hooks than during the previous render'.