@dfosco/storyboard 0.6.0-beta.18 → 0.6.0-beta.19

package/package.json

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

package/src/core/canvas/terminal-server.js

@@ -1376,41 +1376,53 @@ function handleConnection(ws, widgetId, canvasId, prettyName, widgetStartupComma
               } catch { /* empty */ }
 
               if (readinessSignal || useReadyFile) {
-                // Poll for readiness, then send postStartup command and deliver messages
-                let sent = false
-                const finalize = (reason) => {
-                  if (sent) return
-                  sent = true
+                // Poll for readiness, then send postStartup command and deliver messages.
+                // The .ready marker is the accurate signal (Copilot/Claude/Codex
+                // sessionStart hook touches it once the TUI is interactive). On
+                // consumer repos with cold caches + resume mode, that can easily
+                // take 30–60s — well past any reasonable hard timeout. So we:
+                //   1. Keep polling indefinitely at 3s intervals for .ready.
+                //   2. At 30s, do a "soft commit": inject identity and bind to
+                //      the messaging bus so the widget is at least addressable
+                //      for hub broadcast and live messages.
+                //   3. When .ready finally appears, run the real postStartup.
+                let softBound = false
+                let postStartupSent = false
+                const softBind = () => {
+                  if (softBound) return
+                  softBound = true
+                  injectIdentityMessage(tmuxName, { widgetId, displayName: prettyName, canvasId, branch, serverUrl })
+                  injectRoleMessageForWidget(tmuxName, widgetId)
+                  setTimeout(() => {
+                    migratePendingMessages(widgetId, branch, canvasId).then(() => {
+                      bindWidget({ widgetId, tmuxName, branch, canvasId, displayName: prettyName }).catch(() => {})
+                    }).catch(() => {
+                      bindWidget({ widgetId, tmuxName, branch, canvasId, displayName: prettyName }).catch(() => {})
+                    })
+                    joinPresence({ widgetId, senderName: prettyName || widgetId, branch, canvasId }).catch(() => {})
+                  }, 2000)
+                }
+                const runPostStartup = (reason) => {
+                  if (postStartupSent) return
+                  postStartupSent = true
                   clearInterval(pollInterval)
                   try { rmSync(readyFilePath, { force: true }) } catch { /* empty */ }
                   setTimeout(() => {
                     if (postStartup) {
                       tmuxSubmit(tmuxName, postStartup)
                     }
-                    // Inject identity, then bind to messaging bus. This restores
-                    // hub/role/broadcast context after a tmux restart — the
-                    // widget's terminal-config preserves hubs/role/connectedWidgets,
-                    // and bindWidget reattaches live message delivery + backfill.
-                    injectIdentityMessage(tmuxName, { widgetId, displayName: prettyName, canvasId, branch, serverUrl })
-                    injectRoleMessageForWidget(tmuxName, widgetId)
-                    setTimeout(() => {
-                      migratePendingMessages(widgetId, branch, canvasId).then(() => {
-                        bindWidget({ widgetId, tmuxName, branch, canvasId, displayName: prettyName }).catch(() => {})
-                      }).catch(() => {
-                        bindWidget({ widgetId, tmuxName, branch, canvasId, displayName: prettyName }).catch(() => {})
-                      })
-                      joinPresence({ widgetId, senderName: prettyName || widgetId, branch, canvasId }).catch(() => {})
-                    }, 2000)
+                    // Ensure identity/bind happened (no-op if already soft-bound)
+                    softBind()
                   }, 500)
-                  if (reason === 'timeout') {
-                    devLog(`[terminal-server] readiness timeout for ${widgetId} (${tmuxName}); proceeding with bind anyway (likely resume mode)`)
+                  if (reason === 'soft-bind-timeout') {
+                    devLog(`[terminal-server] readiness slow for ${widgetId} (${tmuxName}); soft-binding now, will run postStartup when .ready arrives`)
                   }
                 }
                 const pollInterval = setInterval(() => {
-                  if (sent) { clearInterval(pollInterval); return }
+                  if (postStartupSent) { clearInterval(pollInterval); return }
                   // Primary: sessionStart hook touches the marker once the
                   // agent is fully loaded and interactive.
-                  if (useReadyFile && existsSync(readyFilePath)) { finalize('file'); return }
+                  if (useReadyFile && existsSync(readyFilePath)) { runPostStartup('file'); return }
                   if (!readinessSignal) return
                   try {
                     // Fallback for agents without a hook: scan pane + 200
@@ -1419,14 +1431,13 @@ function handleConnection(ws, widgetId, canvasId, prettyName, widgetStartupComma
                       `tmux capture-pane -t "${tmuxName}" -p -S -200`,
                       { encoding: 'utf8', timeout: 1000 }
                     )
-                    if (paneContent.includes(readinessSignal)) finalize('signal')
+                    if (paneContent.includes(readinessSignal)) runPostStartup('signal')
                   } catch { /* empty */ }
-                }, 1000)
-                // Fallback: if readiness signal never matches (e.g. resume mode
-                // doesn't print "Environment loaded:", or the agent shows a
-                // prompt we can't detect), bind anyway after 30s so the widget
-                // is at least addressable for live messages and hub broadcast.
-                setTimeout(() => finalize('timeout'), 30000)
+                }, 500)
+                // Soft-bind at 30s so the widget is addressable for hub/live
+                // messages even if Copilot's TUI is still warming up. The poller
+                // keeps running and will fire postStartup once .ready appears.
+                setTimeout(softBind, 30000)
               } else {
                 // No readiness signal — inject identity and bind to bus after a delay
                 setTimeout(() => {

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

@@ -32,12 +32,18 @@ function resolveStorySetUrl(storyId, layout, selected, density, theme) {
   if (!story?._storyModule) return ''
   const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
   const params = new URLSearchParams()
-  params.set('module', story._storyModule)
+  // Route via the real story page (works in dev AND prod). The dev-only
+  // `_storyboard/canvas/isolate-set` middleware doesn't exist in deployed
+  // builds, so we mount ComponentSetPage at the story's route with
+  // `_sb_component_set` instead. `_sb_embed` keeps the canvas chrome off.
+  params.set('_sb_embed', '')
+  params.set('_sb_component_set', '')
   if (layout) params.set('layout', layout)
   if (selected) params.set('selected', selected)
   if (density) params.set('density', density)
   if (theme) params.set('theme', theme)
-  return `${base}/_storyboard/canvas/isolate-set?${params}`
+  const route = story._route || `/components/${storyId}`
+  return `${base}${route}?${params}`
 }
 
 export default forwardRef(function StorySetWidget({ id: widgetId, props, onUpdate, resizable }, ref) {
@@ -103,7 +109,7 @@ export default forwardRef(function StorySetWidget({ id: widgetId, props, onUpdat
         if (typeof width === 'number' && typeof height === 'number') return
         const headerH = 37
         const newW = typeof width === 'number' ? width : Math.max(200, Math.ceil(e.data.width))
-        const newH = typeof height === 'number' ? height : Math.max(120, Math.ceil(e.data.height) + headerH)
+        const newH = typeof height === 'number' ? height : Math.max(120, Math.ceil(e.data.height) + headerH + 8)
         onUpdate?.({ width: newW, height: newH })
       } else if (e.data?.type === 'storyboard:component-set:content-size') {
         contentSizeRef.current = {
@@ -128,7 +134,7 @@ export default forwardRef(function StorySetWidget({ id: widgetId, props, onUpdat
     const contentH = contentSizeRef.current.height
     const contentW = contentSizeRef.current.width
     if (!contentH && !contentW) return
-    const fitH = contentH ? contentH + headerH : h
+    const fitH = contentH ? contentH + headerH + 8 : h
     const fitW = contentW || w
     const shouldSnapH = contentH && h > fitH + 2
     const shouldSnapW = contentW && w > fitW + 2

package/src/internals/canvas/widgets/expandUtils.js

@@ -513,12 +513,14 @@ export function buildSecondaryIframeUrl(widget) {
     const storyData = getStoryData(storyId)
     if (storyData?._storyModule) {
       const params = new URLSearchParams()
-      params.set('module', storyData._storyModule)
+      params.set('_sb_embed', '')
+      params.set('_sb_component_set', '')
       const layout = widget.props?.layout
       if (layout) params.set('layout', layout)
       const selected = widget.props?.selected
       if (selected) params.set('selected', selected)
-      return `${baseClean}/_storyboard/canvas/isolate-set?${params}`
+      const route = storyData._route || `/components/${storyId}`
+      return `${baseClean}${route}?${params}`
     }
     return null
   }