@dfosco/storyboard 0.5.0-beta.47 → 0.5.0-beta.49

package/package.json

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

package/src/core/canvas/server.js

@@ -3015,9 +3015,17 @@ export function Default() {
       }
 
       try {
-        const { readTerminalConfig, initTerminalConfig } = await import('./terminal-config.js')
+        const { readTerminalConfig, readTerminalConfigById, initTerminalConfig } = await import('./terminal-config.js')
         initTerminalConfig(root)
-        const config = readTerminalConfig({ branch, canvasId, widgetId })
+        let config = readTerminalConfig({ branch, canvasId, widgetId })
+        // Fallback: when canvasId/branch are missing, mismatched, or stale
+        // (e.g. the persisted canvasId only captured the parent folder),
+        // recover via the widget-id-named symlink that writeTerminalConfig
+        // creates next to the hashed config.
+        if (!config?.agentStatus) {
+          const byId = readTerminalConfigById(widgetId)
+          if (byId?.agentStatus) config = byId
+        }
         sendJson(res, 200, { agentStatus: config?.agentStatus || null })
       } catch (err) {
         sendJson(res, 500, { error: `Failed to read agent status: ${err.message}` })

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

@@ -9,6 +9,27 @@ function getBase() {
   return (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
 }
 
+/**
+ * Resolve the **full** canvas-page id for the currently-mounted canvas.
+ * Prefer the live bridge state (set by CanvasPage), which always carries the
+ * complete nested id (e.g. `dfosco-explorations/adaptive-threat-view`). Fall
+ * back to URL parsing when the bridge isn't ready yet — and crucially, take
+ * **every** path segment after `/canvas/`, not just the first one, so nested
+ * canvas ids round-trip correctly.
+ */
+function resolveCanvasId() {
+  if (typeof window !== 'undefined') {
+    const fromBridge = window.__storyboardCanvasBridgeState?.canvasId
+    if (fromBridge) return fromBridge
+    const pathParts = window.location.pathname.split('/').filter(Boolean)
+    const canvasIdx = pathParts.indexOf('canvas')
+    if (canvasIdx >= 0 && canvasIdx < pathParts.length - 1) {
+      return pathParts.slice(canvasIdx + 1).join('/')
+    }
+  }
+  return 'default'
+}
+
 async function spawnPromptAgent({ canvasId, widgetId, prompt }) {
   const res = await fetch(`${getBase()}/_storyboard/canvas/prompt/spawn`, {
     method: 'POST',
@@ -116,37 +137,84 @@ 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 params = new URLSearchParams({ widgetId: id })
+        const cid = resolveCanvasId()
+        if (cid && cid !== 'default') params.set('canvasId', cid)
+        const url = `${getBase()}/_storyboard/canvas/agent/status?${params}`
+        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) {
@@ -169,9 +237,7 @@ const PromptWidget = forwardRef(function PromptWidget({ id, props, onUpdate, res
     setExecStatus('pending')
     setExecError('')
 
-    const pathParts = window.location.pathname.split('/')
-    const canvasIdx = pathParts.indexOf('canvas')
-    const canvasId = canvasIdx >= 0 ? pathParts[canvasIdx + 1] : 'default'
+    const canvasId = resolveCanvasId()
 
     onUpdate?.({ text: draftText, status: 'pending' })
 
@@ -271,9 +337,7 @@ const PromptWidget = forwardRef(function PromptWidget({ id, props, onUpdate, res
         term.open(termContainerRef.current)
         termRef.current = term
 
-        const pathParts = window.location.pathname.split('/')
-        const canvasIdx = pathParts.indexOf('canvas')
-        const canvasId = canvasIdx >= 0 ? pathParts[canvasIdx + 1] : 'default'
+        const canvasId = resolveCanvasId()
 
         const url = getWsUrl(id, canvasId, true)
         ws = new WebSocket(url)