@dfosco/storyboard-react 4.2.0-beta.17 → 4.2.0-beta.19

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.2.0-beta.17",
+  "version": "4.2.0-beta.19",
   "type": "module",
   "dependencies": {
     "@base-ui/react": "^1.4.0",
-    "@dfosco/storyboard-core": "4.2.0-beta.17",
-    "@dfosco/tiny-canvas": "4.2.0-beta.17",
+    "@dfosco/storyboard-core": "4.2.0-beta.19",
+    "@dfosco/tiny-canvas": "4.2.0-beta.19",
     "@neodrag/react": "^2.3.1",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-visually-hidden": "^1.2.4",
     "ansi-to-html": "^0.7.2",
+    "cmdk": "^1.1.1",
+    "feather-icons": "^4.29.2",
     "ghostty-web": "^0.4.0",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1",

package/src/BranchBar/BranchBar.jsx

@@ -16,7 +16,9 @@ function checkLocalDev() {
 }
 
 export default function BranchBar({ basePath }) {
-  const [hidden, setHidden] = useState(false)
+  const [hidden, setHidden] = useState(
+    () => typeof document !== 'undefined' && document.documentElement.classList.contains('storyboard-chrome-hidden')
+  )
 
   const isHiddenByParam = useMemo(() => {
     if (typeof window === 'undefined') return false

package/src/BranchBar/BranchBar.module.css

@@ -96,11 +96,11 @@
 }
 
 /* Push page content down */
-:global(html:has([data-branch-bar])) {
+:global(html:has([data-branch-bar]):not(.storyboard-chrome-hidden)) {
   --sb-branch-bar-height: 32px;
 }
 
-:global(html:has([data-branch-bar]) body) {
+:global(html:has([data-branch-bar]):not(.storyboard-chrome-hidden) body) {
   padding-top: 32px;
 }
 

package/src/BranchBar/useBranches.js

@@ -15,27 +15,41 @@ export function useBranches(basePath) {
   })
 
   const [gitUser, setGitUser] = useState(null)
+  const branchBasePath = (basePath || '/').replace(/\/branch--[^/]*\/?$/, '/')
 
   useEffect(() => {
     const apiBase = (basePath || '/').replace(/\/$/, '')
+    const branchManifestUrl = `${branchBasePath.replace(/\/$/, '')}/branches.json`
 
     fetch(`${apiBase}/_storyboard/git-user`).then(r => r.ok ? r.json() : null)
       .then(data => { if (data?.name) setGitUser(data.name) })
       .catch(() => {})
 
-    // Always fetch live branch list
+    // Keep dev behavior: prefer live branch list from server API.
+    // On static deployments (GitHub Pages), fallback to branches.json.
     fetch(`${apiBase}/_storyboard/worktrees`).then(r => r.ok ? r.json() : null)
-      .then(data => { if (Array.isArray(data) && data.length > 0) setBranches(data) })
-      .catch(() => {})
-  }, [basePath])
+      .then(data => {
+        if (Array.isArray(data) && data.length > 0) {
+          setBranches(data)
+          return true
+        }
+        return false
+      })
+      .catch(() => false)
+      .then((hasLiveData) => {
+        if (hasLiveData || isLocalDev) return
+        return fetch(branchManifestUrl)
+          .then(r => r.ok ? r.json() : null)
+          .then(data => { if (Array.isArray(data) && data.length > 0) setBranches(data) })
+          .catch(() => {})
+      })
+  }, [basePath, branchBasePath])
 
   const currentBranch = useMemo(() => {
     const m = (basePath || '').match(/\/branch--([^/]+)\/?$/)
     return m ? m[1] : 'main'
   }, [basePath])
 
-  const branchBasePath = (basePath || '/').replace(/\/branch--[^/]*\/$/, '/')
-
   return { branches, currentBranch, branchBasePath, gitUser }
 }
 

package/src/BranchBar/useBranches.test.js

@@ -0,0 +1,68 @@
+import { renderHook, waitFor } from '@testing-library/react'
+import { useBranches } from './useBranches.js'
+
+describe('useBranches', () => {
+  afterEach(() => {
+    delete window.__SB_BRANCHES__
+    vi.unstubAllGlobals()
+  })
+
+  it('loads branches from branches.json when worktrees API is unavailable on branch deploys', async () => {
+    const branchesFromManifest = [
+      { folder: 'branch--4.3.0-prompt-widget', branch: '4.3.0-prompt-widget' },
+      { folder: 'branch--main', branch: 'main' },
+    ]
+
+    const fetchMock = vi.fn((url) => {
+      if (url === '/storyboard/branch--4.3.0-prompt-widget/_storyboard/git-user') {
+        return Promise.resolve({ ok: false, json: async () => null })
+      }
+      if (url === '/storyboard/branch--4.3.0-prompt-widget/_storyboard/worktrees') {
+        return Promise.resolve({ ok: false, json: async () => null })
+      }
+      if (url === '/storyboard/branches.json') {
+        return Promise.resolve({ ok: true, json: async () => branchesFromManifest })
+      }
+      return Promise.reject(new Error(`Unexpected fetch URL: ${url}`))
+    })
+
+    vi.stubGlobal('fetch', fetchMock)
+
+    const { result } = renderHook(() => useBranches('/storyboard/branch--4.3.0-prompt-widget/'))
+
+    await waitFor(() => {
+      expect(result.current.branches).toEqual(branchesFromManifest)
+    })
+
+    expect(fetchMock).toHaveBeenCalledWith('/storyboard/branches.json')
+  })
+
+  it('resolves branches.json from repo root when basePath has no trailing slash', async () => {
+    const branchesFromManifest = [
+      { folder: 'branch--4.3.0-prompt-widget', branch: '4.3.0-prompt-widget' },
+    ]
+
+    const fetchMock = vi.fn((url) => {
+      if (url === '/storyboard/branch--4.3.0-prompt-widget/_storyboard/git-user') {
+        return Promise.resolve({ ok: false, json: async () => null })
+      }
+      if (url === '/storyboard/branch--4.3.0-prompt-widget/_storyboard/worktrees') {
+        return Promise.resolve({ ok: false, json: async () => null })
+      }
+      if (url === '/storyboard/branches.json') {
+        return Promise.resolve({ ok: true, json: async () => branchesFromManifest })
+      }
+      return Promise.reject(new Error(`Unexpected fetch URL: ${url}`))
+    })
+
+    vi.stubGlobal('fetch', fetchMock)
+
+    const { result } = renderHook(() => useBranches('/storyboard/branch--4.3.0-prompt-widget'))
+
+    await waitFor(() => {
+      expect(result.current.branches).toEqual(branchesFromManifest)
+    })
+
+    expect(fetchMock).toHaveBeenCalledWith('/storyboard/branches.json')
+  })
+})