@dfosco/storyboard-core 4.2.0-beta.2 → 4.2.0-beta.21

package/src/vite/server-plugin.js

@@ -14,14 +14,17 @@ import fs from 'node:fs'
 import path from 'node:path'
 import { parse as parseJsonc } from 'jsonc-parser'
 import { getConfig } from '../configSchema.js'
+import { createDevLogger, setDevLogger } from '../logger/devLogger.js'
 import { serverFeatures as workshopFeatures } from '../workshop/features/registry-server.js'
 import { docsHandler, collectFiles } from './docs-handler.js'
 import { createCanvasHandler } from '../canvas/server.js'
 import { setupSelectedWidgets } from '../canvas/selectedWidgets.js'
+import { HotPoolManager } from '../canvas/hot-pool.js'
 import { createAutosyncHandler } from '../autosync/server.js'
 import { setupTerminalServer } from '../canvas/terminal-server.js'
-import { listSessions, detachSession, killSession, orphanSession } from '../canvas/terminal-registry.js'
+import { listSessions, detachSession, killSession, orphanSession, bulkCleanup, getSessionStats } from '../canvas/terminal-registry.js'
 import { execSync as cpExecSync } from 'node:child_process'
+import { list as listRunningServers } from '../worktree/serverRegistry.js'
 
 const API_PREFIX = '/_storyboard/'
 
@@ -49,6 +52,27 @@ function sendJson(res, status, data) {
   res.end(JSON.stringify(data))
 }
 
+/**
+ * Create a logging wrapper around sendJson.
+ * Reads per-request route context from res.__sbLogCtx (set by middleware).
+ */
+function createLoggedSendJson(logger) {
+  return function sendJsonLogged(res, status, data) {
+    sendJson(res, status, data)
+    if (status >= 400 && logger) {
+      const ctx = res.__sbLogCtx || {}
+      logger.logResponse({
+        status,
+        method: ctx.method || 'UNKNOWN',
+        url: ctx.url || '',
+        route: ctx.route || null,
+        subRoute: ctx.subRoute || null,
+        error: data?.error || null,
+      })
+    }
+  }
+}
+
 /**
  * Read storyboard.config.json from the project root and apply defaults.
  */
@@ -100,11 +124,17 @@ export default function storyboardServer() {
     },
 
     configureServer(server) {
-      // --- Canvas reload guard ---------------------------------------------------
-      // Suppress full-reloads and HMR updates for clients on canvas routes.
-      // Canvas pages send heartbeats via import.meta.hot; the guard auto-expires
-      // 5s after the last heartbeat so closed tabs never leave it stuck.
-      // Opt out with ?canvas-hmr in the URL when developing canvas UI code.
+      // --- Reload guard ----------------------------------------------------------
+      // Suppress full-reloads and HMR updates for guarded clients.
+      //
+      // Two guard channels:
+      //   1. Canvas guard — canvas pages send heartbeats via storyboard:canvas-hmr-guard.
+      //      Controlled by the "canvas-auto-reload" feature flag (default: false = guard ON).
+      //   2. Prototype guard — all pages send heartbeats via storyboard:prototype-reload-guard.
+      //      Controlled by the "prototype-auto-reload" feature flag (default: true = guard OFF).
+      //
+      // Both guards auto-expire 5s after the last heartbeat so closed tabs never
+      // leave them stuck. Custom storyboard events always pass through.
       {
         let recentCanvasMutationAt = 0
         const CANVAS_WINDOW_MS = 1500
@@ -119,29 +149,46 @@ export default function storyboardServer() {
         server.watcher.on('add', markCanvasMutation)
         server.watcher.on('unlink', markCanvasMutation)
 
-        const guardedClients = new Map()
+        const canvasGuardedClients = new Map()
+        const prototypeGuardedClients = new Map()
 
         server.hot.on('storyboard:canvas-hmr-guard', (data, client) => {
-          if (data.active && !data.hmrEnabled) {
-            guardedClients.set(client, Date.now() + GUARD_TTL_MS)
+          if (data.active) {
+            canvasGuardedClients.set(client, Date.now() + GUARD_TTL_MS)
+          } else {
+            canvasGuardedClients.delete(client)
+          }
+        })
+
+        server.hot.on('storyboard:prototype-reload-guard', (data, client) => {
+          if (data.active) {
+            prototypeGuardedClients.set(client, Date.now() + GUARD_TTL_MS)
           } else {
-            guardedClients.delete(client)
+            prototypeGuardedClients.delete(client)
           }
         })
 
         const cleanup = setInterval(() => {
           const now = Date.now()
-          for (const [client, until] of guardedClients) {
+          for (const [client, until] of canvasGuardedClients) {
             if (now > until || !server.ws.clients.has(client)) {
-              guardedClients.delete(client)
+              canvasGuardedClients.delete(client)
+            }
+          }
+          for (const [client, until] of prototypeGuardedClients) {
+            if (now > until || !server.ws.clients.has(client)) {
+              prototypeGuardedClients.delete(client)
             }
           }
         }, 10000)
         server.httpServer?.on('close', () => clearInterval(cleanup))
 
         function isClientGuarded(client) {
-          const until = guardedClients.get(client)
-          return until != null && Date.now() < until
+          const cu = canvasGuardedClients.get(client)
+          if (cu != null && Date.now() < cu) return true
+          const pu = prototypeGuardedClients.get(client)
+          if (pu != null && Date.now() < pu) return true
+          return false
         }
 
         const originalSend = server.ws.send.bind(server.ws)
@@ -156,7 +203,7 @@ export default function storyboardServer() {
           }
 
           // No guarded clients → broadcast normally
-          if (guardedClients.size === 0) {
+          if (canvasGuardedClients.size === 0 && prototypeGuardedClients.size === 0) {
             return originalSend(payload, ...rest)
           }
 
@@ -174,7 +221,28 @@ export default function storyboardServer() {
           return originalSend(payload, ...rest)
         }
       }
-      // --- End canvas reload guard -----------------------------------------------
+      // --- End reload guard ------------------------------------------------------
+
+      // Initialize dev logger for structured o11y logging
+      const devDomain = config.devDomain || null
+      let currentBranch = null
+      try { currentBranch = cpExecSync('git branch --show-current', { encoding: 'utf8', cwd: root }).trim() } catch {}
+      const logVerbose = config.featureFlags?.['dev-logs'] || false
+      const devLogger = createDevLogger({ root, devDomain, branch: currentBranch, verbose: logVerbose })
+      setDevLogger(devLogger) // make available to all server-side modules via devLog()
+      const sendJsonLogged = createLoggedSendJson(devLogger)
+
+      // Listen for browser-side console errors forwarded via HMR
+      server.hot.on('storyboard:client-error', (data) => {
+        devLogger.logEvent(data.level || 'error', data.message || 'Unknown browser error', {
+          source: 'browser',
+          url: data.url || null,
+          line: data.line || null,
+          col: data.col || null,
+          stack: data.stack || null,
+          route: data.route || null,
+        })
+      })
 
       const workshopConfig = config.workshop || {}
       const enabledFeatures = workshopConfig.features || {}
@@ -184,7 +252,7 @@ export default function storyboardServer() {
       for (const [featureName, featureModule] of Object.entries(workshopFeatures)) {
         if (enabledFeatures[featureName] === false) continue
         if (featureModule.serverSetup) {
-          workshopHandlers.push(featureModule.serverSetup({ root, sendJson, workshopConfig }))
+          workshopHandlers.push(featureModule.serverSetup({ root, sendJson: sendJsonLogged, workshopConfig }))
         }
       }
       if (workshopHandlers.length > 0) {
@@ -193,15 +261,24 @@ export default function storyboardServer() {
             await handler(req, res, ctx)
             if (res.writableEnded) return
           }
-          sendJson(res, 404, { error: `Unknown workshop route: ${ctx.method} ${ctx.path}` })
+          sendJsonLogged(res, 404, { error: `Unknown workshop route: ${ctx.method} ${ctx.path}` })
         })
       }
 
       // Wire docs API routes (always enabled — serves README + source files)
-      routeHandlers.set('docs', docsHandler({ root, sendJson }))
+      routeHandlers.set('docs', docsHandler({ root, sendJson: sendJsonLogged }))
+
+      // Create shared hot pool manager (per-type pre-warmed sessions)
+      const hotPoolConfig = config.hotPool || {}
+      const agentsConfig = config.canvas?.agents || {}
+      const wsSend = server.ws.send.bind(server.ws)
+      const hotPool = new HotPoolManager({ root, config: hotPoolConfig, agentsConfig, wsSend })
+      hotPool.start().catch((err) => {
+        devLogger.logEvent('error', 'Hot pool failed to start', { error: err.message })
+      })
 
       // Wire canvas API routes (always enabled — CRUD for .canvas.jsonl files)
-      routeHandlers.set('canvas', createCanvasHandler({ root, sendJson }))
+      routeHandlers.set('canvas', createCanvasHandler({ root, sendJson: sendJsonLogged, hotPool }))
 
       // Selected widgets bridge — writes .selectedwidgets.json for Copilot context
       setupSelectedWidgets(server, root)
@@ -212,15 +289,16 @@ export default function storyboardServer() {
         try {
           branch = cpExecSync('git branch --show-current', { encoding: 'utf8', cwd: root }).trim()
         } catch {}
-        setupTerminalServer(server.httpServer, base, branch)
+        setupTerminalServer(server.httpServer, base, branch, hotPool)
       }
 
       // Ignore assets/canvas/ so image/snapshot writes don't trigger reloads
       server.watcher.unwatch(path.join(root, 'assets', 'canvas', 'images'))
       server.watcher.unwatch(path.join(root, 'assets', 'canvas', 'snapshots'))
+      server.watcher.unwatch(path.join(root, 'assets', '.storyboard-public', 'terminal-snapshots'))
 
       // Wire autosync API routes (always enabled — git automation for dev)
-      routeHandlers.set('autosync', createAutosyncHandler({ root, sendJson }))
+      routeHandlers.set('autosync', createAutosyncHandler({ root, sendJson: sendJsonLogged }))
 
       // Terminal sessions API — list, detach, kill sessions
       routeHandlers.set('terminal', async (req, res, ctx) => {
@@ -232,7 +310,37 @@ export default function storyboardServer() {
         if (ctx.method === 'GET' && (subpath === 'sessions' || subpath === 'sessions/')) {
           const url = new URL(req.url, 'http://localhost')
           const filterBranch = url.searchParams.get('branch') || null
-          sendJson(res, 200, { sessions: listSessions(filterBranch) })
+          sendJsonLogged(res, 200, { sessions: listSessions(filterBranch) })
+          return
+        }
+
+        // GET /sessions/stats — quick session counts by status
+        if (ctx.method === 'GET' && subpath === 'sessions/stats') {
+          sendJsonLogged(res, 200, getSessionStats())
+          return
+        }
+
+        // POST /sessions/cleanup — bulk remove sessions by status
+        if (ctx.method === 'POST' && subpath === 'sessions/cleanup') {
+          let body = ''
+          for await (const chunk of req) body += chunk
+          try {
+            const { statuses } = JSON.parse(body)
+            const allowed = new Set(['archived', 'background'])
+            if (!Array.isArray(statuses) || statuses.length === 0) {
+              sendJsonLogged(res, 400, { error: 'statuses must be a non-empty array' })
+              return
+            }
+            const invalid = statuses.filter(s => !allowed.has(s))
+            if (invalid.length > 0) {
+              sendJsonLogged(res, 400, { error: `Invalid statuses: ${invalid.join(', ')}. Allowed: archived, background` })
+              return
+            }
+            const result = bulkCleanup({ statuses })
+            sendJsonLogged(res, 200, { success: true, ...result })
+          } catch {
+            sendJsonLogged(res, 400, { error: 'Invalid JSON body' })
+          }
           return
         }
 
@@ -242,10 +350,10 @@ export default function storyboardServer() {
           const tmuxName = decodeURIComponent(detachMatch[1])
           const entry = detachSession(tmuxName)
           if (!entry) {
-            sendJson(res, 404, { error: 'Session not found' })
+            sendJsonLogged(res, 404, { error: 'Session not found' })
             return
           }
-          sendJson(res, 200, { success: true, session: entry })
+          sendJsonLogged(res, 200, { success: true, session: entry })
           return
         }
 
@@ -254,7 +362,7 @@ export default function storyboardServer() {
         if (ctx.method === 'POST' && orphanMatch) {
           const tmuxName = decodeURIComponent(orphanMatch[1])
           orphanSession(tmuxName)
-          sendJson(res, 200, { success: true })
+          sendJsonLogged(res, 200, { success: true })
           return
         }
 
@@ -263,44 +371,76 @@ export default function storyboardServer() {
         if (ctx.method === 'DELETE' && deleteMatch) {
           const tmuxName = decodeURIComponent(deleteMatch[1])
           killSession(tmuxName)
-          sendJson(res, 200, { success: true })
+          sendJsonLogged(res, 200, { success: true })
           return
         }
 
-        sendJson(res, 404, { error: 'Not found' })
+        // ── Hot Pool routes (/terminal/hot-pool/*) ──────────────
+
+        // GET /hot-pool — pool status
+        if (ctx.method === 'GET' && subpath === 'hot-pool') {
+          sendJsonLogged(res, 200, hotPool.status())
+          return
+        }
+
+        // PUT /hot-pool — reconfigure pool
+        if (ctx.method === 'PUT' && subpath === 'hot-pool') {
+          hotPool.reconfigure(ctx.body || {})
+          sendJsonLogged(res, 200, hotPool.status())
+          return
+        }
+
+        // POST /hot-pool/acquire — acquire a warm session from a specific pool
+        if (ctx.method === 'POST' && subpath === 'hot-pool/acquire') {
+          const poolId = ctx.body?.poolId || 'terminal'
+          const session = hotPool.acquire(poolId)
+          if (!session) {
+            sendJsonLogged(res, 200, { acquired: false, poolId, session: null })
+            return
+          }
+          sendJsonLogged(res, 200, { acquired: true, poolId, session: { id: session.id, tmuxName: session.tmuxName, poolId: session.poolId } })
+          return
+        }
+
+        sendJsonLogged(res, 404, { error: 'Not found' })
       })
 
-      // Worktrees API — lists available worktrees/branches from ports.json
+      // Worktrees API — lists running worktrees/branches from server registry
       routeHandlers.set('worktrees', async (req, res) => {
         try {
-          // Walk up from root to find the repo root's .worktrees/ports.json
-          let dir = root
-          let portsPath = null
-          for (let i = 0; i < 10; i++) {
-            const candidate = path.join(dir, '.worktrees', 'ports.json')
-            if (fs.existsSync(candidate)) { portsPath = candidate; break }
-            // Check if ports.json is a sibling (we're inside a worktree)
-            const parentCandidate = path.join(path.dirname(dir), 'ports.json')
-            if (fs.existsSync(parentCandidate)) { portsPath = parentCandidate; break }
-            const parent = path.dirname(dir)
-            if (parent === dir) break
-            dir = parent
-          }
-          if (!portsPath) { sendJson(res, 200, []); return }
-          const ports = JSON.parse(fs.readFileSync(portsPath, 'utf8'))
-          const branches = Object.keys(ports).map(name => ({
-            branch: name,
-            folder: name === 'main' ? '' : `branch--${name}/`,
+          const servers = listRunningServers()
+          const branches = servers.map(srv => ({
+            branch: srv.worktree,
+            folder: srv.worktree === 'main' ? '' : `branch--${srv.worktree}/`,
           }))
-          sendJson(res, 200, branches)
-        } catch { sendJson(res, 200, []) }
+          // Always include main
+          if (!branches.some(b => b.branch === 'main')) {
+            branches.unshift({ branch: 'main', folder: '' })
+          }
+          sendJsonLogged(res, 200, branches)
+        } catch { sendJsonLogged(res, 200, []) }
+      })
+
+      // Git user — return git config user name and GitHub login (via gh CLI)
+      routeHandlers.set('git-user', async (req, res) => {
+        try {
+          const { execSync } = await import('node:child_process')
+          const name = execSync('git config user.name', { cwd: root, encoding: 'utf8' }).trim()
+          let login = null
+          try {
+            const status = execSync('gh auth status 2>&1', { cwd: root, encoding: 'utf8' })
+            const m = status.match(/Logged in to github\.com account (\S+)/) || status.match(/Logged in to github\.com as (\S+)/)
+            if (m) login = m[1]
+          } catch { /* gh not installed or not logged in */ }
+          sendJsonLogged(res, 200, { name, login })
+        } catch { sendJsonLogged(res, 200, { name: null, login: null }) }
       })
 
       // Switch branch — proxy to storyboard server which manages worktree
       // dev servers. The server port is derived from the devDomain.
       routeHandlers.set('switch-branch', async (req, res, ctx) => {
         if (ctx.method !== 'POST') {
-          sendJson(res, 405, { error: 'POST required' })
+          sendJsonLogged(res, 405, { error: 'POST required' })
           return
         }
         try {
@@ -319,16 +459,16 @@ export default function storyboardServer() {
             body: JSON.stringify(ctx.body),
           })
           const data = await proxyRes.json()
-          sendJson(res, proxyRes.status, data)
+          sendJsonLogged(res, proxyRes.status, data)
         } catch {
-          sendJson(res, 502, {
+          sendJsonLogged(res, 502, {
             error: 'Storyboard server not running. Start it with: npx storyboard server',
           })
         }
       })
 
       // Watch toolbar.config.json for changes — trigger full reload so
-      // CoreUIBar.svelte picks up menu/mode config changes during dev
+      // CoreUIBar.jsx picks up menu/mode config changes during dev
       const toolbarConfigPath = path.resolve(
         path.dirname(new URL(import.meta.url).pathname),
         '../../toolbar.config.json'
@@ -377,6 +517,9 @@ export default function storyboardServer() {
         const prefix = slashIndex === -1 ? pathAfterPrefix : pathAfterPrefix.slice(0, slashIndex)
         const restPath = slashIndex === -1 ? '/' : pathAfterPrefix.slice(slashIndex)
 
+        // Attach route context for the logging sendJson wrapper
+        res.__sbLogCtx = { method: req.method, url, route: prefix, subRoute: restPath }
+
         const handler = routeHandlers.get(prefix)
         if (!handler) {
           // Proxy to standalone storyboard server for unhandled prefixes
@@ -388,7 +531,7 @@ export default function storyboardServer() {
               proxyRes.pipe(res)
             })
             proxy.on('error', () => {
-              sendJson(res, 502, { error: `Storyboard server not running. Start it with: npx storyboard server` })
+              sendJsonLogged(res, 502, { error: `Storyboard server not running. Start it with: npx storyboard server` })
             })
             if (req.method === 'POST' || req.method === 'PUT' || req.method === 'PATCH') {
               req.pipe(proxy)
@@ -396,7 +539,7 @@ export default function storyboardServer() {
               proxy.end()
             }
           } catch {
-            sendJson(res, 502, { error: 'Storyboard server not running' })
+            sendJsonLogged(res, 502, { error: 'Storyboard server not running' })
           }
           return
         }
@@ -406,10 +549,9 @@ export default function storyboardServer() {
           if (req.method === 'POST' || req.method === 'PUT' || req.method === 'PATCH' || req.method === 'DELETE') {
             body = await parseJsonBody(req)
           }
-          await handler(req, res, { body, path: restPath, method: req.method })
+          await handler(req, res, { body, path: restPath, method: req.method, __viteWs: server.ws })
         } catch (err) {
-          console.error(`[storyboard-server] Error in ${prefix}:`, err)
-          sendJson(res, 500, { error: err.message || 'Internal server error' })
+          sendJsonLogged(res, 500, { error: err.message || 'Internal server error' })
         }
       })
     },
@@ -424,6 +566,46 @@ export default function storyboardServer() {
           children: 'window.__SB_LOCAL_DEV__=true',
           injectTo: 'head',
         })
+
+        // Browser error bridge — forwards console.error/warn and uncaught
+        // exceptions to the dev server via HMR for structured o11y logging
+        tags.push({
+          tag: 'script',
+          attrs: { type: 'module' },
+          children: `
+(function() {
+  if (!import.meta.hot) return;
+  var MAX_LEN = 2000;
+  function trunc(s) { return typeof s === 'string' && s.length > MAX_LEN ? s.slice(0, MAX_LEN) + '…' : s; }
+  function route() { return location.pathname + location.hash; }
+  function send(level, msg, extra) {
+    try { import.meta.hot.send('storyboard:client-error', Object.assign({ level: level, message: trunc(msg), route: route() }, extra || {})); } catch {}
+  }
+  // Patch console.error and console.warn
+  ['error', 'warn'].forEach(function(level) {
+    var orig = console[level];
+    console[level] = function() {
+      orig.apply(console, arguments);
+      var parts = [];
+      for (var i = 0; i < arguments.length; i++) {
+        try { parts.push(typeof arguments[i] === 'string' ? arguments[i] : JSON.stringify(arguments[i])); } catch { parts.push(String(arguments[i])); }
+      }
+      send(level, parts.join(' '));
+    };
+  });
+  // Uncaught errors
+  window.addEventListener('error', function(e) {
+    send('error', e.message || 'Uncaught error', { url: e.filename, line: e.lineno, col: e.colno, stack: trunc(e.error && e.error.stack) });
+  });
+  // Unhandled promise rejections
+  window.addEventListener('unhandledrejection', function(e) {
+    var msg = e.reason ? (e.reason.message || String(e.reason)) : 'Unhandled rejection';
+    send('error', msg, { stack: trunc(e.reason && e.reason.stack) });
+  });
+})();
+`.trim(),
+          injectTo: 'head',
+        })
       }
 
       // Inject base path so the inspector UI can resolve static assets
@@ -549,7 +731,7 @@ export default function storyboardServer() {
 
       // Emit canvas images so they're available in deployed (static) builds.
       // Dev server serves these dynamically; production needs the static files.
-      // Private images (prefixed with _) are excluded from the build.
+      // Private images (prefixed with ~) are excluded from the build.
       for (const dir of [
         path.join(root, 'assets', 'canvas', 'images'),
         path.join(root, 'assets', 'canvas', 'snapshots'),
@@ -558,7 +740,7 @@ export default function storyboardServer() {
           const imageFiles = await fs.promises.readdir(dir)
           const subdir = dir.endsWith('snapshots') ? 'snapshots' : 'images'
           for (const file of imageFiles) {
-            if (file.startsWith('_') || file.startsWith('.')) continue
+            if (file.startsWith('~') || file.startsWith('.')) continue
             try {
               const data = await fs.promises.readFile(path.join(dir, file))
               this.emitFile({