@dfosco/storyboard-core 4.2.0-beta.3 → 4.2.0

package/src/modes.test.js

@@ -359,7 +359,7 @@ describe('locked mode', () => {
 describe('tool registry', () => {
   const SAMPLE_TOOLS = {
     '*': [
-      { id: 'viewfinder', label: 'Viewfinder', group: 'dev' },
+      { id: 'workspace', label: 'Workspace', group: 'dev' },
       { id: 'reset-params', label: 'Reset all params', group: 'dev' },
     ],
     'present': [
@@ -372,14 +372,14 @@ describe('tool registry', () => {
       initTools(SAMPLE_TOOLS)
       const tools = getToolsForMode('present')
       const ids = tools.map(t => t.id)
-      expect(ids).toContain('viewfinder')
+      expect(ids).toContain('workspace')
       expect(ids).toContain('comments-toggle')
     })
 
     it('wildcard tools appear in all modes', () => {
       initTools(SAMPLE_TOOLS)
       const protoTools = getToolsForMode('prototype')
-      expect(protoTools.map(t => t.id)).toContain('viewfinder')
+      expect(protoTools.map(t => t.id)).toContain('workspace')
     })
 
     it('mode-specific tools only appear in their mode', () => {
@@ -390,7 +390,7 @@ describe('tool registry', () => {
 
     it('tools start with default state', () => {
       initTools(SAMPLE_TOOLS)
-      const state = getToolState('viewfinder')
+      const state = getToolState('workspace')
       expect(state).toEqual({
         enabled: true,
         active: false,

package/src/mountStoryboardCore.js

@@ -13,17 +13,65 @@
 import { installHideParamListener } from './interceptHideParams.js'
 import { installHistorySync } from './hideMode.js'
 import { installBodyClassSync } from './bodyClasses.js'
-import { initCommentsConfig, isCommentsEnabled } from './comments/config.js'
-import { initFeatureFlags } from './featureFlags.js'
-import { initPlugins } from './plugins.js'
-import { initUIConfig } from './uiConfig.js'
-import { initCanvasConfig } from './canvasConfig.js'
-import { initCommandPaletteConfig } from './commandPaletteConfig.js'
-import { initToolbarConfig } from './toolbarConfigStore.js'
-import { initCustomerModeConfig } from './customerModeConfig.js'
+import {
+  initCommentsConfig, isCommentsEnabled,
+  initFeatureFlags,
+  initPlugins,
+  initUIConfig,
+  initCanvasConfig,
+  initCommandPaletteConfig,
+  initToolbarConfig, consumeClientToolbarOverrides,
+  initCustomerModeConfig,
+  getConfig,
+} from '@dfosco/storyboard-core'
 
 let _mounted = false
 
+const CHROME_HIDDEN_KEY = 'sb-chrome-hidden'
+
+/**
+ * Migrate localStorage keys renamed in 4.3.0.
+ * Runs once at startup, idempotent: only copies if new key doesn't exist yet.
+ */
+function migrateLocalStorageKeys() {
+  if (typeof localStorage === 'undefined') return
+  const renames = [
+    ['sb-viewfinder-starred', 'sb-workspace-starred'],
+    ['sb-viewfinder-recent', 'sb-workspace-recent'],
+    ['sb-viewfinder-group-folders', 'sb-workspace-group-folders'],
+  ]
+  for (const [oldKey, newKey] of renames) {
+    if (localStorage.getItem(newKey) === null && localStorage.getItem(oldKey) !== null) {
+      localStorage.setItem(newKey, localStorage.getItem(oldKey))
+    }
+  }
+}
+
+/**
+ * Restore the saved chrome-hidden state immediately, before React mounts.
+ * Prevents a flash of toolbars appearing then disappearing.
+ */
+function applyEarlyChromeState() {
+  if (typeof document === 'undefined' || typeof localStorage === 'undefined') return
+  const hidden = localStorage.getItem(CHROME_HIDDEN_KEY) === '1'
+  if (hidden) {
+    document.documentElement.classList.add('storyboard-chrome-hidden')
+  }
+}
+
+/**
+ * Watch for changes to the storyboard-chrome-hidden class and persist to
+ * localStorage. Works regardless of which code path toggles the class.
+ */
+function installChromeStatePersistence() {
+  if (typeof document === 'undefined' || typeof localStorage === 'undefined') return
+  const observer = new MutationObserver(() => {
+    const hidden = document.documentElement.classList.contains('storyboard-chrome-hidden')
+    localStorage.setItem(CHROME_HIDDEN_KEY, hidden ? '1' : '0')
+  })
+  observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+}
+
 /**
  * Apply the saved theme to Primer CSS attributes immediately, before
  * React or Svelte mount. This prevents a flash of wrong-theme content.
@@ -138,6 +186,12 @@ export async function mountStoryboardCore(config = {}, options = {}) {
   const basePath = options.basePath || '/'
   const customHandlers = options.handlers || {}
 
+  // Migrate renamed localStorage keys (4.3.0: viewfinder → workspace)
+  migrateLocalStorageKeys()
+
+  // Apply saved chrome-hidden state immediately — before React mount
+  applyEarlyChromeState()
+
   // Apply saved theme to DOM immediately — before Svelte/React mount
   applyEarlyTheme()
 
@@ -145,60 +199,104 @@ export async function mountStoryboardCore(config = {}, options = {}) {
   installHideParamListener()
   installHistorySync()
   installBodyClassSync()
+  installChromeStatePersistence()
 
-  // Initialize config-driven systems
-  if (config.featureFlags) {
+  // Initialize config-driven systems.
+  // The unified config store is already seeded by the virtual module's initConfig().
+  // Individual stores are initialized here for backward compatibility — consumers
+  // that import directly from these stores still work.
+  const uc = getConfig()
+
+  if (uc.featureFlags && Object.keys(uc.featureFlags).length > 0) {
+    initFeatureFlags(uc.featureFlags)
+  } else if (config.featureFlags) {
     initFeatureFlags(config.featureFlags)
   }
 
-  if (config.plugins) {
+  if (uc.plugins && Object.keys(uc.plugins).length > 0) {
+    initPlugins(uc.plugins)
+  } else if (config.plugins) {
     initPlugins(config.plugins)
   }
 
-  if (config.ui) {
+  if (uc.ui && Object.keys(uc.ui).length > 0) {
+    initUIConfig(uc.ui)
+  } else if (config.ui) {
     initUIConfig(config.ui)
   }
 
-  if (config.canvas) {
+  if (uc.canvas && Object.keys(uc.canvas).length > 0) {
+    initCanvasConfig(uc.canvas)
+  } else if (config.canvas) {
     initCanvasConfig(config.canvas)
   }
 
   // Load and merge command palette config.
-  // Core defaults come from commandpalette.config.json (bundled).
-  // Client can provide overrides via config.commandPalette (legacy) or a commandpalette.config.json at repo root.
-  const defaultCmdPaletteConfig = (await import('../commandpalette.config.json')).default
-  if (config.commandPalette) {
-    const { deepMerge: deepMergeCp } = await import('./loader.js')
-    initCommandPaletteConfig(deepMergeCp(defaultCmdPaletteConfig, config.commandPalette))
+  // If the unified store has commandPalette data, use it directly.
+  // Otherwise fall back to legacy merging with bundled defaults.
+  const ucCmdPalette = uc.commandPalette
+  if (ucCmdPalette && Object.keys(ucCmdPalette).length > 0) {
+    initCommandPaletteConfig(ucCmdPalette)
   } else {
-    initCommandPaletteConfig({ ...defaultCmdPaletteConfig })
+    const defaultCmdPaletteConfig = (await import('../commandpalette.config.json')).default
+    if (config.commandPalette) {
+      const merged = { ...defaultCmdPaletteConfig, ...config.commandPalette }
+      if (config.commandPalette.sections && defaultCmdPaletteConfig.sections) {
+        const clientIds = new Set(config.commandPalette.sections.map(s => s.id))
+        const preserved = defaultCmdPaletteConfig.sections.filter(s => !clientIds.has(s.id))
+        merged.sections = [...config.commandPalette.sections, ...preserved]
+      }
+      initCommandPaletteConfig(merged)
+    } else {
+      initCommandPaletteConfig({ ...defaultCmdPaletteConfig })
+    }
   }
 
   // Initialize customer mode config
-  if (config.customerMode) {
+  if (uc.customerMode && Object.keys(uc.customerMode).length > 0) {
+    initCustomerModeConfig(uc.customerMode)
+  } else if (config.customerMode) {
     initCustomerModeConfig(config.customerMode)
   }
 
   // Initialize comments config (framework-agnostic)
-  if (config.comments) {
-    initCommentsConfig(config, { basePath })
+  const commentsConfig = uc.comments && Object.keys(uc.comments).length > 0 ? uc.comments : config.comments
+  if (commentsConfig) {
+    initCommentsConfig({ ...config, comments: commentsConfig }, { basePath })
   }
 
   // Inject compiled UI styles (await to prevent late restyle / FOUC)
   await injectUIStyles()
 
-  // Load and merge toolbar config.
-  // Core defaults come from toolbar.config.json (bundled).
-  // Client can provide overrides via config.toolbar or a toolbar.config.json at repo root.
-  const { deepMerge } = await import('./loader.js')
-  const defaultConfig = (await import('../toolbar.config.json')).default
-  let toolbarConfig = config.toolbar
-    ? deepMerge(defaultConfig, config.toolbar)
-    : { ...defaultConfig }
-
-  // Inject repository URL from storyboard.config.json into the toolbar config
-  if (config.repository?.owner && config.repository?.name) {
-    const repoUrl = `https://github.com/${config.repository.owner}/${config.repository.name}`
+  // Load toolbar config from the unified store.
+  // The unified store already has core defaults merged with client overrides.
+  // Fall back to legacy merging if unified store wasn't seeded.
+  const { deepMerge } = await import('@dfosco/storyboard-core')
+  let toolbarConfig = uc.toolbar && Object.keys(uc.toolbar).length > 0
+    ? { ...uc.toolbar }
+    : null
+
+  if (!toolbarConfig) {
+    // Legacy path: unified store not seeded, merge manually
+    const defaultConfig = (await import('../toolbar.config.json')).default
+    const clientOverrides = consumeClientToolbarOverrides()
+    const explicitToolbar = config.toolbar
+
+    if (explicitToolbar && clientOverrides) {
+      toolbarConfig = deepMerge(deepMerge(defaultConfig, clientOverrides), explicitToolbar)
+    } else if (explicitToolbar) {
+      toolbarConfig = deepMerge(defaultConfig, explicitToolbar)
+    } else if (clientOverrides) {
+      toolbarConfig = deepMerge(defaultConfig, clientOverrides)
+    } else {
+      toolbarConfig = { ...defaultConfig }
+    }
+  }
+
+  // Inject repository URL into the toolbar config
+  const repo = uc.repository || config.repository
+  if (repo?.owner && repo?.name) {
+    const repoUrl = `https://github.com/${repo.owner}/${repo.name}`
 
     // New tools schema
     if (toolbarConfig.tools?.repository) {

package/src/paletteProviders.js

@@ -55,6 +55,9 @@ export function buildCommandItems(mode, basePath) {
       if (state === 'disabled' || state === 'hidden') continue
     }
 
+    // Skip items hidden from search
+    if (action.hideFromCommandPaletteSearch) continue
+
     if (action.type === 'submenu') {
       // Flatten submenu children into individual items
       const children = getActionChildren(action.id)

package/src/paletteProviders.test.js

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi } from 'vitest'
 
-// Mock loader and viewfinder before importing providers
+// Mock loader and workspace before importing providers
 vi.mock('./loader.js', () => ({
   listStories: vi.fn(() => ['button', 'card']),
   getStoryData: vi.fn((name) => ({
@@ -34,7 +34,7 @@ vi.mock('./loader.js', () => ({
 
 vi.mock('./commandActions.js', () => ({
   getActionsForMode: vi.fn(() => [
-    { id: 'core/viewfinder', label: 'Go to Viewfinder', type: 'link', url: '/', toolKey: 'viewfinder' },
+    { id: 'core/workspace', label: 'Go to Workspace', type: 'link', url: '/', toolKey: 'workspace' },
     { id: 'core/docs', label: 'Documentation', type: 'default', toolKey: 'docs' },
     { id: 'core/devtools', label: 'DevTools', type: 'submenu', toolKey: 'devtools' },
     { type: 'header', label: 'Command Menu' },

package/src/server/index.js

@@ -14,11 +14,13 @@
 
 import http from 'node:http'
 import { spawn } from 'node:child_process'
-import { existsSync, readFileSync, mkdirSync } from 'node:fs'
-import { resolve, join, dirname } from 'node:path'
-import { getPort, portsFilePath, repoRoot, worktreeDir, listWorktrees } from '../worktree/port.js'
+import { existsSync } from 'node:fs'
+import { resolve, join } from 'node:path'
+import { getPort, releasePort, repoRoot } from '../worktree/port.js'
 import { generateCaddyfile, generateRouteConfig, upsertCaddyRoute, isCaddyRunning, reloadCaddy, readDevDomain } from '../cli/proxy.js'
 import { compactAll } from '../canvas/compact.js'
+import { register, unregister, generateId, list, findByWorktree } from '../worktree/serverRegistry.js'
+import { createDevLogger } from '../logger/devLogger.js'
 
 const SERVER_PORT_BASE = 4100
 
@@ -46,6 +48,12 @@ const processes = new Map()
 /** Route handlers: prefix → handler function */
 const routeHandlers = new Map()
 
+// ─── Dev Logger ───
+
+let _currentBranch = null
+try { _currentBranch = (await import('node:child_process')).execSync('git branch --show-current', { encoding: 'utf8', cwd: repoRoot() }).trim() } catch { /* empty */ }
+const devLogger = createDevLogger({ root: repoRoot(), devDomain: DEV_DOMAIN.replace('.localhost', ''), branch: _currentBranch })
+
 // ─── JSON helpers ───
 
 function sendJson(res, status, data) {
@@ -54,6 +62,21 @@ function sendJson(res, status, data) {
   res.end(body)
 }
 
+function sendJsonLogged(res, status, data) {
+  sendJson(res, status, data)
+  if (status >= 400) {
+    const ctx = res.__sbLogCtx || {}
+    devLogger.logResponse({
+      status,
+      method: ctx.method || 'UNKNOWN',
+      url: ctx.url || '',
+      route: ctx.route || null,
+      subRoute: ctx.subRoute || null,
+      error: data?.error || null,
+    })
+  }
+}
+
 async function parseBody(req) {
   const chunks = []
   for await (const chunk of req) chunks.push(chunk)
@@ -117,15 +140,23 @@ function spawnVite(branch) {
         stdio: ['ignore', 'pipe', 'pipe'],
       })
 
-  const entry = { child, port, status: 'starting', cwd, branch }
+  const entry = { child, port, status: 'starting', cwd, branch, serverId: generateId() }
   processes.set(branch, entry)
 
+  // Register in persistent server registry
+  register({ id: entry.serverId, worktree: branch, pid: child.pid, port, background: true })
+
   // Detect ready state from stdout
   child.stdout.on('data', (data) => {
     const text = data.toString()
     const portMatch = text.match(/localhost:(\d+)/)
     if (portMatch) {
-      entry.port = Number(portMatch[1])
+      const actualPort = Number(portMatch[1])
+      if (actualPort !== entry.port) {
+        entry.port = actualPort
+        // Re-register with the actual port Vite bound to
+        register({ id: entry.serverId, worktree: branch, pid: child.pid, port: actualPort, background: true })
+      }
     }
     if (text.includes('ready in')) {
       entry.status = 'ready'
@@ -135,9 +166,12 @@ function spawnVite(branch) {
 
   child.stderr.on('data', () => { /* suppress */ })
 
-  child.on('exit', (code) => {
+  child.on('exit', (_code) => {
+    void _code
     entry.status = 'stopped'
     processes.delete(branch)
+    unregister(entry.serverId)
+    releasePort(branch)
   })
 
   return entry
@@ -167,13 +201,13 @@ function registerCaddyRoute(branch, port) {
 // POST /_storyboard/switch-branch
 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
   }
 
   const { branch } = ctx.body
   if (!branch) {
-    sendJson(res, 400, { error: 'branch is required' })
+    sendJsonLogged(res, 400, { error: 'branch is required' })
     return
   }
 
@@ -188,59 +222,77 @@ routeHandlers.set('switch-branch', async (req, res, ctx) => {
     if (existing && existing.status === 'ready') {
       const alive = await isPortReady(existing.port)
       if (alive) {
-        sendJson(res, 200, { url: targetUrl, status: 'already_running' })
+        sendJsonLogged(res, 200, { url: targetUrl, status: 'already_running' })
         return
       }
       // Stale entry — remove it
       processes.delete(branch)
     }
 
-    // Check if Vite is already running on the assigned port (started outside this server)
-    const port = getPort(branch)
-    if (await isPortReady(port)) {
-      registerCaddyRoute(branch, port)
-      sendJson(res, 200, { url: targetUrl, status: 'already_running' })
-      return
+    // Check if Vite is already running in this server's process map
+    const _port = getPort(branch)
+    void _port
+    const existingInRegistry = findByWorktree(branch)
+    if (existingInRegistry.length > 0) {
+      const latest = existingInRegistry.reduce((a, b) =>
+        (a.startedAt || '') >= (b.startedAt || '') ? a : b
+      )
+      if (await isPortReady(latest.port)) {
+        registerCaddyRoute(branch, latest.port)
+        sendJsonLogged(res, 200, { url: targetUrl, status: 'already_running' })
+        return
+      }
     }
 
     // Check worktree exists
     const cwd = resolveWorktreeCwd(branch)
     if (!cwd) {
-      sendJson(res, 404, { error: `Worktree not found: ${branch}. Create it with: npx storyboard dev ${branch}` })
+      sendJsonLogged(res, 404, { error: `Worktree not found: ${branch}. Create it with: npx storyboard dev ${branch}` })
       return
     }
 
     // Spawn Vite
     const entry = spawnVite(branch)
 
-    // Wait for ready
-    const ready = await waitForPort(entry.port, HEALTH_TIMEOUT)
+    // Wait for Vite to report ready via stdout (not TCP polling, which
+    // can false-positive on occupied ports from other processes)
+    const ready = await (async () => {
+      const start = Date.now()
+      while (Date.now() - start < HEALTH_TIMEOUT) {
+        if (entry.status === 'ready') return true
+        await new Promise(r => setTimeout(r, 300))
+      }
+      return false
+    })()
     if (!ready) {
       stopVite(branch)
-      sendJson(res, 504, { error: `Vite server for ${branch} did not become ready in time` })
+      sendJsonLogged(res, 504, { error: `Vite server for ${branch} did not become ready in time` })
       return
     }
 
-    sendJson(res, 200, { url: targetUrl, status: 'started' })
+    sendJsonLogged(res, 200, { url: targetUrl, status: 'started' })
   } catch (err) {
-    sendJson(res, 500, { error: err.message })
+    sendJsonLogged(res, 500, { error: err.message })
   }
 })
 
 // GET /_storyboard/worktrees
 routeHandlers.set('worktrees', async (req, res) => {
   try {
-    const pf = portsFilePath()
-    if (!existsSync(pf)) { sendJson(res, 200, []); return }
-    const ports = JSON.parse(readFileSync(pf, 'utf8'))
-    const branches = Object.keys(ports).map(name => ({
-      branch: name,
-      folder: name === 'main' ? '' : `branch--${name}/`,
-      port: ports[name],
-      running: processes.has(name) ? processes.get(name).status : null,
+    // Use the server registry (live processes) instead of stale ports.json
+    const servers = list()
+    const branches = servers.map(srv => ({
+      branch: srv.worktree,
+      folder: srv.worktree === 'main' ? '' : `branch--${srv.worktree}/`,
+      port: srv.port,
+      running: processes.has(srv.worktree) ? processes.get(srv.worktree).status : 'background',
     }))
-    sendJson(res, 200, branches)
-  } catch { sendJson(res, 200, []) }
+    // Always include main even if no server is registered for it
+    if (!branches.some(b => b.branch === 'main')) {
+      branches.unshift({ branch: 'main', folder: '', port: 1234, running: null })
+    }
+    sendJsonLogged(res, 200, branches)
+  } catch { sendJsonLogged(res, 200, []) }
 })
 
 // GET /_storyboard/server/status
@@ -250,10 +302,10 @@ routeHandlers.set('server', async (req, res, ctx) => {
     for (const [branch, entry] of processes) {
       active.push({ branch, port: entry.port, status: entry.status })
     }
-    sendJson(res, 200, { active, serverPort: SERVER_PORT })
+    sendJsonLogged(res, 200, { active, serverPort: SERVER_PORT })
     return
   }
-  sendJson(res, 404, { error: 'Unknown server route' })
+  sendJsonLogged(res, 404, { error: 'Unknown server route' })
 })
 
 // ─── HTTP Server ───
@@ -280,6 +332,9 @@ const server = http.createServer(async (req, res) => {
     const prefix = slashIdx === -1 ? after : after.slice(0, slashIdx)
     const restPath = slashIdx === -1 ? '/' : after.slice(slashIdx)
 
+    // Attach route context for the logging sendJson wrapper
+    res.__sbLogCtx = { method: req.method, url: req.url, route: prefix, subRoute: restPath }
+
     const handler = routeHandlers.get(prefix)
     if (handler) {
       let body = {}
@@ -289,8 +344,7 @@ const server = http.createServer(async (req, res) => {
       try {
         await handler(req, res, { body, path: restPath, method: req.method })
       } catch (err) {
-        console.error(`[storyboard-server] Error in ${prefix}:`, err)
-        sendJson(res, 500, { error: err.message })
+        sendJsonLogged(res, 500, { error: err.message })
       }
       return
     }
@@ -298,18 +352,28 @@ const server = http.createServer(async (req, res) => {
 
   // Health check
   if (pathname === '/health') {
-    sendJson(res, 200, { ok: true, devDomain: DEV_DOMAIN })
+    sendJsonLogged(res, 200, { ok: true, devDomain: DEV_DOMAIN })
     return
   }
 
-  sendJson(res, 404, { error: 'Not found' })
+  // Set context for catch-all 404
+  res.__sbLogCtx = { method: req.method, url: req.url, route: null, subRoute: null }
+  sendJsonLogged(res, 404, { error: 'Not found' })
 })
 
 export function startServer(port = SERVER_PORT) {
-  server.listen(port, () => {
-    // port logged by CLI via onReady; suppress here to avoid duplicate output
+  return new Promise((resolve, reject) => {
+    server.on('error', (err) => {
+      if (err.code === 'EADDRINUSE') {
+        reject(Object.assign(new Error(`Port ${port} already in use`), { code: 'EADDRINUSE' }))
+        return
+      }
+      reject(err)
+    })
+    server.listen(port, () => {
+      resolve(server)
+    })
   })
-  return server
 }
 
 /** Public API for spawning Vite from CLI (with stdout piping) */