@dfosco/storyboard 0.5.0-beta.46 → 0.5.0-beta.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/storyboard",
-  "version": "0.5.0-beta.46",
+  "version": "0.5.0-beta.48",
   "type": "module",
   "license": "MIT",
   "description": "Storyboard prototyping framework — core engine, React integration, and canvas",

package/src/internals/Viewfinder.jsx

@@ -963,6 +963,10 @@ function BranchNav({ basePath }) {
   const { branches, currentBranch, branchBasePath } = useBranches(basePath)
   const [switching, setSwitching] = useState(null)
 
+  // Branch switcher is meaningful only in deployed environments where users
+  // need to jump between branch deploys. In local dev each worktree is its own
+  // process; switching is handled via `sb dev` / `sb code`.
+  if (isLocalDev) return null
   if (!branches || branches.length === 0) return null
 
   const branchNames = branches.map(b => b.branch)

package/src/internals/canvas/widgets/PromptWidget.jsx

@@ -116,37 +116,81 @@ const PromptWidget = forwardRef(function PromptWidget({ id, props, onUpdate, res
   const onUpdateRef = useRef(onUpdate)
   useEffect(() => { onUpdateRef.current = onUpdate }, [onUpdate])
 
+  // Apply a status payload (from WS event or polled config) to local + persisted state.
+  const applyStatus = useCallback((data) => {
+    if (!data || !data.status) return
+    if (data.status === 'done' || data.status === 'completed') {
+      setExecStatus('done')
+      onUpdateRef.current?.({ status: 'done' })
+    } else if (data.status === 'error') {
+      setExecStatus('error')
+      setExecError(data.message || 'Unknown error')
+      onUpdateRef.current?.({ status: 'error', errorMessage: data.message || 'Unknown error' })
+    } else if (data.status === 'cancelled') {
+      setExecStatus('idle')
+      onUpdateRef.current?.({ status: 'idle', sessionId: '', errorMessage: '' })
+    } else if (data.status === 'working' || data.status === 'running' || data.status === 'pending') {
+      setExecStatus('pending')
+      onUpdateRef.current?.({ status: 'pending' })
+    }
+  }, [])
+
   useEffect(() => {
     if (!import.meta.hot) return
-
     const handler = (data) => {
       if (data.widgetId !== id) return
-      if (data.status === 'done' || data.status === 'completed') {
-        setExecStatus('done')
-        onUpdateRef.current?.({ status: 'done' })
-      } else if (data.status === 'error') {
-        setExecStatus('error')
-        setExecError(data.message || 'Unknown error')
-        onUpdateRef.current?.({ status: 'error', errorMessage: data.message || 'Unknown error' })
-      } else if (data.status === 'cancelled') {
-        setExecStatus('idle')
-        onUpdateRef.current?.({ status: 'idle', sessionId: '', errorMessage: '' })
-      } else if (data.status === 'working') {
-        setExecStatus('pending')
-        onUpdateRef.current?.({ status: 'pending' })
-      } else if (data.status === 'running' || data.status === 'pending') {
-        setExecStatus('pending')
-        onUpdateRef.current?.({ status: 'pending' })
-      }
+      applyStatus(data)
     }
-
     import.meta.hot.on('storyboard:agent-status', handler)
     return () => {
       if (typeof import.meta.hot.off === 'function') {
         import.meta.hot.off('storyboard:agent-status', handler)
       }
     }
-  }, [id])
+  }, [id, applyStatus])
+
+  // Reconcile with the server-side persisted agentStatus.
+  // The agent always writes its final status to .storyboard/terminals/{id}.json
+  // via POST /agent/signal, but the live `storyboard:agent-status` WS event
+  // can be missed (tab in background, HMR reconnect, page navigation). On
+  // mount and while we believe the agent is still pending, poll the persisted
+  // status as a safety net so the widget can never get stuck.
+  useEffect(() => {
+    if (execStatus !== 'pending' && execStatus !== 'idle') return
+
+    let cancelled = false
+    let timer = null
+
+    async function pollOnce() {
+      try {
+        const url = `${getBase()}/_storyboard/canvas/agent/status?widgetId=${encodeURIComponent(id)}`
+        const res = await fetch(url)
+        if (!res.ok) return
+        const json = await res.json().catch(() => null)
+        const persisted = json?.agentStatus
+        if (cancelled || !persisted?.status) return
+        // Only apply terminal states or transitions we don't already reflect.
+        if (persisted.status === 'done' || persisted.status === 'error' || persisted.status === 'cancelled') {
+          applyStatus(persisted)
+        } else if (execStatus === 'idle' && (persisted.status === 'running' || persisted.status === 'working' || persisted.status === 'pending')) {
+          applyStatus(persisted)
+        }
+      } catch { /* offline — try again next tick */ }
+    }
+
+    // Reconcile immediately on mount / when we enter pending.
+    pollOnce()
+    // And keep polling at a low cadence while pending, in case the WS event
+    // is missed entirely.
+    if (execStatus === 'pending') {
+      timer = setInterval(pollOnce, 5000)
+    }
+
+    return () => {
+      cancelled = true
+      if (timer) clearInterval(timer)
+    }
+  }, [id, execStatus, applyStatus])
 
   useImperativeHandle(ref, () => ({
     handleAction(action) {

package/src/internals/vite/data-plugin.js

@@ -1394,6 +1394,41 @@ export default function storyboardDataPlugin() {
       }
     },
 
+    // Guard against known invalid named imports from @primer/react.
+    // The most common offender is `Octicon`, which lives in
+    // `@primer/octicons-react`, not `@primer/react`. When a consumer
+    // writes `import { Octicon } from '@primer/react'`, Vite happily
+    // pre-bundles the dep and only fails at runtime with a cryptic
+    // "does not provide an export named 'Octicon'" error from inside
+    // `node_modules/.vite/deps/@primer_react.js`. Catch it here at
+    // transform time with a clear, actionable error pointing to the
+    // correct package.
+    transform(code, id) {
+      if (!/\.(jsx?|tsx?|mjs|cjs)(\?|$)/.test(id)) return null
+      if (id.includes('/node_modules/')) return null
+      if (!code.includes('@primer/react')) return null
+      const re = /import\s*(?:type\s*)?\{([^}]*)\}\s*from\s*['"]@primer\/react['"]/g
+      let match
+      while ((match = re.exec(code)) !== null) {
+        const names = match[1]
+          .split(',')
+          .map(s => s.replace(/\s+as\s+\w+/, '').trim())
+          .filter(Boolean)
+        if (names.includes('Octicon')) {
+          const before = code.slice(0, match.index)
+          const line = before.split('\n').length
+          const rel = id.replace(root + '/', '')
+          throw new Error(
+            `[storyboard] Invalid import in ${rel}:${line} — \`Octicon\` is not exported by \`@primer/react\`.\n` +
+            `  Import the icon you need directly from \`@primer/octicons-react\` instead, e.g.:\n` +
+            `    import { GearIcon } from '@primer/octicons-react'\n` +
+            `  See AGENTS.md: "Use Primer Octicons from @primer/octicons-react for icons".`
+          )
+        }
+      }
+      return null
+    },
+
     handleHotUpdate(ctx) {
       const normalized = ctx.file.replace(/\\/g, '/')
       if (!/\.canvas\.jsonl$/.test(normalized)) return