@dfosco/storyboard 0.5.0-alpha.0

package/src/internals/BranchBar/BranchBar.jsx

@@ -0,0 +1,87 @@
+/**
+ * BranchBar — blue accent bar showing current branch and local dev status.
+ *
+ * Dev: always visible (main or branch). Shows "Local development" label.
+ * Prod: shows on non-main branches only.
+ */
+import { useState, useEffect, useMemo } from 'react'
+import { GitBranchIcon } from '@primer/octicons-react'
+import css from './BranchBar.module.css'
+
+/** Check if we're in local dev mode (respects ?prodMode simulation). */
+function checkLocalDev() {
+  if (typeof window === 'undefined') return false
+  if (new URLSearchParams(window.location.search).has('prodMode')) return false
+  return window.__SB_LOCAL_DEV__ === true
+}
+
+/** Read the dev domain color injected by the server plugin, validated via CSS.supports. */
+function getDevDomainColor() {
+  if (typeof window === 'undefined') return null
+  const color = window.__SB_DEV_DOMAIN_COLOR__
+  if (!color) return null
+  if (typeof CSS !== 'undefined' && CSS.supports && !CSS.supports('color', color)) return null
+  return color
+}
+
+export default function BranchBar({ basePath }) {
+  const [hidden, setHidden] = useState(
+    () => typeof document !== 'undefined' && document.documentElement.classList.contains('storyboard-chrome-hidden')
+  )
+
+  const isHiddenByParam = useMemo(() => {
+    if (typeof window === 'undefined') return false
+    const params = new URLSearchParams(window.location.search)
+    return params.has('_sb_hide_branch_bar') || params.has('_sb_embed')
+  }, [])
+
+  const currentBranch = useMemo(() => {
+    const m = (basePath || '').match(/\/branch--([^/]+)\/?$/)
+    return m ? m[1] : 'main'
+  }, [basePath])
+
+  const isLocalDev = checkLocalDev()
+  const isOnBranch = currentBranch !== 'main'
+  const domainColor = isLocalDev ? getDevDomainColor() : null
+
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setHidden(document.documentElement.classList.contains('storyboard-chrome-hidden'))
+    })
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+    return () => observer.disconnect()
+  }, [])
+
+  if ((!isOnBranch && !isLocalDev) || hidden || isHiddenByParam) return null
+
+  function hideChrome() {
+    window.dispatchEvent(new KeyboardEvent('keydown', {
+      key: '.', metaKey: true, bubbles: true,
+    }))
+  }
+
+  return (
+    <div className={css.bar} data-branch-bar>
+      <div
+        className={`${css.barInner}${isLocalDev ? '' : ` ${css.barProd}`}`}
+        style={domainColor ? { '--sb-branch-bar-bg': domainColor } : undefined}
+      >
+        <span className={css.barLabel}>
+          {isLocalDev && window.__SB_DEV_DOMAIN__ && <>
+            <span className={css.barDomainName}>⌘ {window.__SB_DEV_DOMAIN__}</span>
+            <span className={css.barSeparator}>·</span>
+          </>}
+          <GitBranchIcon size={12} />
+          <span className={css.barBranchName}>{currentBranch}</span>
+          {isLocalDev && <>
+            <span className={css.barSeparator}>·</span>
+            <span>Local development</span>
+          </>}
+        </span>
+        <div className={css.barActions}>
+          <button className={css.barAction} onClick={hideChrome}>Hide</button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/internals/BranchBar/BranchBar.module.css

@@ -0,0 +1,247 @@
+/* ─── BranchBar (fixed top bar) ─── */
+
+.bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10000;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 12px;
+}
+
+.barInner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 32px;
+  background: var(--sb-branch-bar-bg, hsl(212, 92%, 45%));
+  color: #fff;
+  padding: 4px 12px;
+  position: relative;
+}
+
+.barProd {
+  background: #1c2128;
+}
+
+.barTrigger {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  background: none;
+  border: none;
+  color: var(--fgColor-onEmphasis, #ddd);
+  font-size: 11px;
+  font-weight: 400;
+  font-family: inherit;
+  cursor: pointer;
+  padding: 2px 8px;
+  border-radius: 4px;
+  transition: background 0.1s;
+}
+
+.barTrigger:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+
+.barActions {
+  position: absolute;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.barLabel {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--fgColor-onEmphasis, #ddd);
+  font-size: 11px;
+  font-weight: 400;
+}
+
+.barBranchName {
+  font-weight: 500;
+  max-width: 240px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.barDomainName {
+  font-weight: 400;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.barSeparator {
+  opacity: 0.6;
+  margin: 0 2px;
+}
+
+.barAction {
+  background: none;
+  border: none;
+  color: var(--fgColor-onEmphasis, #777);
+  font-size: 11px;
+  font-weight: 400;
+  font-family: inherit;
+  cursor: pointer;
+  padding: 2px 8px;
+  border-radius: 3px;
+  transition: all 0.1s;
+}
+
+.barAction:hover {
+  color: var(--fgColor-onEmphasis, #fff);
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* Push page content down */
+:global(html:has([data-branch-bar]):not(.storyboard-chrome-hidden)) {
+  --sb-branch-bar-height: 32px;
+}
+
+:global(html:has([data-branch-bar]):not(.storyboard-chrome-hidden) body) {
+  padding-top: 32px;
+}
+
+:global(html.storyboard-chrome-hidden [data-branch-bar]) {
+  display: none;
+}
+
+/* ─── Shared dropdown (used by both BranchBar and ViewfinderNew) ─── */
+
+.branchBtn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 14px;
+  background: #fff;
+  color: #555;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+  font-family: inherit;
+}
+
+.branchBtn:hover {
+  background: #f5f5f5;
+  border-color: #ccc;
+}
+
+.branchBtnText {
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 1.5px solid rgba(255, 255, 255, 0.15);
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.branchPositioner {
+  z-index: 10001;
+}
+
+.branchPopup {
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 10px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  min-width: 240px;
+  max-width: 320px;
+  padding: 6px 0;
+  font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.branchSectionLabel {
+  padding: 8px 14px 4px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #999;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+
+.branchItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 14px;
+  font-size: 16px;
+  color: #555;
+  cursor: pointer;
+  transition: background 0.1s;
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+}
+
+.branchItem:hover,
+.branchItem[data-highlighted] {
+  background: #f5f5f5;
+}
+
+.branchItemActive {
+  composes: branchItem;
+  color: #1a1a1a;
+  font-weight: 600;
+}
+
+.branchSeparator {
+  height: 1px;
+  background: #e5e5e5;
+  margin: 4px 10px;
+}
+
+.branchViewport {
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.branchShowAll {
+  display: block;
+  width: 100%;
+  padding: 8px 14px;
+  font-size: 16px;
+  color: #2563eb;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+}
+
+.branchShowAll:hover {
+  background: #f5f5f5;
+}
+
+.branchError {
+  padding: 6px 14px;
+  font-size: 12px;
+  color: #ef4444;
+  background: #fef2f2;
+  border-bottom: 1px solid #fecaca;
+}

package/src/internals/BranchBar/useBranches.js

@@ -0,0 +1,93 @@
+/**
+ * useBranches — shared hook for branch data across BranchBar and BranchDropdown.
+ * Fetches live branch list from /_storyboard/worktrees API on mount.
+ */
+import { useState, useEffect, useMemo, useCallback } from 'react'
+
+const isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true
+
+export function useBranches(basePath) {
+  const [branches, setBranches] = useState(() => {
+    if (typeof window !== 'undefined' && Array.isArray(window.__SB_BRANCHES__)) {
+      return window.__SB_BRANCHES__
+    }
+    return null
+  })
+
+  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(() => {})
+
+    // 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)
+          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])
+
+  return { branches, currentBranch, branchBasePath, gitUser }
+}
+
+export function useSwitchBranch(basePath, branchBasePath) {
+  const [switching, setSwitching] = useState(null)
+  const [switchError, setSwitchError] = useState(null)
+
+  const switchBranch = useCallback(async (branch, folder) => {
+    if (switching) return
+    setSwitching(branch)
+    setSwitchError(null)
+
+    if (!isLocalDev) {
+      // Prod: direct navigation
+      window.location.href = `${branchBasePath}${folder || (branch === 'main' ? '' : `branch--${branch}/`)}`
+      return
+    }
+
+    // Dev: call switch-branch API to spin up server
+    const apiBase = (basePath || '/').replace(/\/$/, '')
+    try {
+      const res = await fetch(`${apiBase}/_storyboard/switch-branch`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ branch }),
+      })
+      const data = await res.json()
+      if (res.ok && data.url) {
+        window.location.href = data.url
+      } else {
+        setSwitchError(data.error || 'Failed to switch')
+        setSwitching(null)
+      }
+    } catch (e) {
+      setSwitchError(e.message || 'Server not reachable')
+      setSwitching(null)
+    }
+  }, [basePath, branchBasePath, switching])
+
+  return { switching, switchError, switchBranch }
+}

package/src/internals/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')
+  })
+})