@dfosco/storyboard 0.5.0-beta.32 → 0.5.0-beta.34

package/package.json

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

package/src/core/canvas/hot-pool.js

@@ -167,12 +167,25 @@ export class HotPool {
     this.#log('■ STOPPED — all sessions killed')
   }
 
+  /**
+   * Non-mutating probe: would the next acquire() return a session, and would it
+   * be webgl-ready? Used by callers that want to render in webgl-ready mode
+   * without claiming a slot (the actual claim happens later when the WS
+   * connects). Returns { ready, webglReady }.
+   */
+  peek() {
+    if (!this.#enabled || this.#queue.length === 0) return { ready: false, webglReady: false }
+    const idx = this.#queue.findIndex(s => s.state === 'ready')
+    if (idx === -1) return { ready: false, webglReady: false }
+    const webglReady = this.#webglReadySlots > 0 && idx < this.#webglReadySlots
+    return { ready: true, webglReady }
+  }
+
   acquire() {
     if (!this.#enabled || this.#queue.length === 0) {
       this.#log(`→ ACQUIRE — pool ${!this.#enabled ? 'disabled' : 'empty'}, returning null`)
       return null
     }
-
     const idx = this.#queue.findIndex(s => s.state === 'ready')
     if (idx === -1) {
       this.#log(`→ ACQUIRE — ${this.#queue.length} in queue but none ready, returning null`)
@@ -731,6 +744,13 @@ export class HotPoolManager {
     return pool.acquire()
   }
 
+  /** Non-mutating probe: { ready, webglReady } for the specified pool. */
+  peek(poolId) {
+    const pool = this.#pools.get(poolId)
+    if (!pool) return { ready: false, webglReady: false }
+    return pool.peek()
+  }
+
   /** Consume a session (transfer ownership out of pool permanently). */
   consume(poolId, sessionId) {
     this.#pools.get(poolId)?.consume(sessionId)

package/src/core/canvas/server.js

@@ -143,6 +143,7 @@ function findCanvasFiles(root) {
     try { entries = fs.readdirSync(dir, { withFileTypes: true }) } catch { return }
     for (const entry of entries) {
       if (ignore.has(entry.name)) continue
+      if (entry.name.startsWith('~')) continue
       const fullPath = path.join(dir, entry.name)
       const relPath = rel ? `${rel}/${entry.name}` : entry.name
       if (entry.isDirectory()) {
@@ -775,18 +776,19 @@ export function createCanvasHandler(ctx) {
   }
 
   /**
-   * Try to acquire a warm session from the hot pool.
+   * Non-mutating probe of a hot pool — returns webgl-readiness without
+   * claiming a slot. Use this when the canvas API just needs to tell the
+   * client whether to render in webgl-ready mode; the actual session claim
+   * happens later in terminal-server when the WebSocket connects.
    * @param {Object|null} hotPool — HotPoolManager instance
-   * @param {string} poolId — pool to acquire from
+   * @param {string} poolId — pool to peek at
    * @param {string} [mode] — 'auto' (default), 'hot', or 'cold'
-   * @returns {Object|null} acquired session or null
+   * @returns {{ ready: boolean, webglReady: boolean }}
    */
-  function acquireFromPool(hotPool, poolId, mode) {
-    if (!hotPool || mode === 'cold') return null
-    const effectiveMode = mode || 'auto'
-    if (effectiveMode === 'cold') return null
-    if (!hotPool.has(poolId)) return null
-    return hotPool.acquire(poolId) || null
+  function peekPool(hotPool, poolId, mode) {
+    if (!hotPool || mode === 'cold') return { ready: false, webglReady: false }
+    if (!hotPool.has(poolId)) return { ready: false, webglReady: false }
+    return hotPool.peek(poolId)
   }
 
   /**
@@ -1117,12 +1119,17 @@ export function createCanvasHandler(ctx) {
 
         await prepareTerminalWidget({ type, props, widgetId, canvasName: name, req })
 
-        // Hot pool acquisition for terminal/agent widgets
-        let hotSession = null
+        // Hot pool readiness probe for terminal/agent widgets — non-mutating.
+        // The actual session claim happens later in terminal-server when the
+        // WS connects. Probing here only tells the client whether to render
+        // in webgl-ready mode immediately. (Previously this called
+        // acquireFromPool, which leaked a #acquired slot per widget creation
+        // because no consume/release ever fired against this acquisition.)
+        let hotProbe = { ready: false, webglReady: false }
         if ((type === 'terminal' || type === 'agent') && pool !== 'cold') {
           const poolId = resolvePoolId(type, props)
-          hotSession = acquireFromPool(hotPool, poolId, pool)
-          if (!hotSession && pool === 'hot') {
+          hotProbe = peekPool(hotPool, poolId, pool)
+          if (!hotProbe.ready && pool === 'hot') {
             sendJson(res, 409, { error: `No warm sessions available in pool "${poolId}"` })
             return
           }
@@ -1137,7 +1144,7 @@ export function createCanvasHandler(ctx) {
         })
 
         const response = { success: true, widget }
-        if (hotSession) response.hotSession = { id: hotSession.id, tmuxName: hotSession.tmuxName || null, webglReady: !!hotSession.webglReady }
+        if (hotProbe.ready) response.hotSession = { id: null, tmuxName: null, webglReady: hotProbe.webglReady }
         sendJson(res, 201, response)
         pushCanvasUpdate(name, filePath, __viteWs)
       } catch (err) {
@@ -1869,11 +1876,11 @@ export function createCanvasHandler(ctx) {
                 const widgetId = generateWidgetId(type)
                 await prepareTerminalWidget({ type, props, widgetId, canvasName: name, req })
 
-                let hotSession = null
+                let hotProbe = { ready: false, webglReady: false }
                 if ((type === 'terminal' || type === 'agent') && pool !== 'cold') {
                   const poolId = resolvePoolId(type, props)
-                  hotSession = acquireFromPool(hotPool, poolId, pool)
-                  if (!hotSession && pool === 'hot') throw new Error(`No warm sessions available in pool "${poolId}"`)
+                  hotProbe = peekPool(hotPool, poolId, pool)
+                  if (!hotProbe.ready && pool === 'hot') throw new Error(`No warm sessions available in pool "${poolId}"`)
                 }
 
                 const widget = stampBounds({ id: widgetId, type, position, props })
@@ -1886,7 +1893,7 @@ export function createCanvasHandler(ctx) {
                 if (ref) refs[ref] = widgetId
 
                 const result = { index: i, op: 'create-widget', ref: ref || undefined, widgetId, widget }
-                if (hotSession) result.hotSession = { id: hotSession.id, tmuxName: hotSession.tmuxName || null, webglReady: !!hotSession.webglReady }
+                if (hotProbe.ready) result.hotSession = { id: null, tmuxName: null, webglReady: hotProbe.webglReady }
                 results.push(result)
                 break
               }

package/src/internals/canvas/CanvasPage.jsx

@@ -2567,10 +2567,25 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
       const y = widget.position?.y ?? 0
       const w = widget.props?.width ?? fallback.width
       const h = widget.props?.height ?? fallback.height
-      const scale = (zoomRef.current || 100) / 100
+
+      // Zoom in (to at least 100%) so the agent is comfortably visible.
+      const { ZOOM_MIN, ZOOM_MAX } = zoomLimits()
+      const targetZoom = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.max(zoomRef.current || 100, 100)))
+      const newScale = targetZoom / 100
+      if (targetZoom !== zoomRef.current) {
+        zoomRef.current = targetZoom
+        const zoomEl = zoomElRef.current
+        if (zoomEl) {
+          zoomEl.style.transform = `scale(${newScale})`
+          zoomEl.style.width = `${Math.max(10000, 100 / newScale)}vw`
+          zoomEl.style.height = `${Math.max(10000, 100 / newScale)}vh`
+        }
+        setZoom(targetZoom)
+      }
+
       el.scrollTo({
-        left: (x + w / 2) * scale - el.clientWidth / 2,
-        top: (y + h / 2) * scale - el.clientHeight / 2,
+        left: (x + w / 2) * newScale - el.clientWidth / 2,
+        top: (y + h / 2) * newScale - el.clientHeight / 2,
         behavior: 'smooth',
       })
     }

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

@@ -52,9 +52,9 @@ function parseDataFile(filePath) {
   // Handle .canvas.jsonl files
   const canvasJsonlMatch = base.match(/^(.+)\.canvas\.jsonl$/)
   if (canvasJsonlMatch) {
-    if (canvasJsonlMatch[1].startsWith('_')) return null
+    if (canvasJsonlMatch[1].startsWith('_') || canvasJsonlMatch[1].startsWith('~')) return null
     const normalized = filePath.replace(/\\/g, '/')
-    if (normalized.split('/').some(seg => seg.startsWith('_'))) return null
+    if (normalized.split('/').some(seg => seg.startsWith('_') || seg.startsWith('~'))) return null
 
     const baseName = canvasJsonlMatch[1]
     let name = baseName