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

package/src/Icon.jsx

@@ -40,16 +40,6 @@ const customIcons = {
       'M4 12H20',
     ],
   },
-  // Diamond grid icon (from StoryWidget/ComponentWidget title bar)
-  'component': {
-    viewBox: '0 0 24 24',
-    strokePaths: [
-      'M5.21173 15.1113L2.52473 12.4243C2.29041 12.1899 2.29041 11.8101 2.52473 11.5757L5.21173 8.88873C5.44605 8.65442 5.82595 8.65442 6.06026 8.88873L8.74727 11.5757C8.98158 11.8101 8.98158 12.1899 8.74727 12.4243L6.06026 15.1113C5.82595 15.3456 5.44605 15.3456 5.21173 15.1113Z',
-      'M11.5757 21.475L8.88874 18.788C8.65443 18.5537 8.65443 18.1738 8.88874 17.9395L11.5757 15.2525C11.8101 15.0182 12.19 15.0182 12.4243 15.2525L15.1113 17.9395C15.3456 18.1738 15.3456 18.5537 15.1113 18.788L12.4243 21.475C12.19 21.7094 11.8101 21.7094 11.5757 21.475Z',
-      'M17.9395 15.1113L15.2525 12.4243C15.0182 12.1899 15.0182 11.8101 15.2525 11.5757L17.9395 8.88873C18.1738 8.65442 18.5537 8.65442 18.788 8.88873L21.475 11.5757C21.7094 11.8101 21.7094 12.1899 21.475 12.4243L18.788 15.1113C18.5537 15.3456 18.1738 15.3456 17.9395 15.1113Z',
-      'M11.5757 8.74727L8.88874 6.06026C8.65443 5.82595 8.65443 5.44605 8.88874 5.21173L11.5757 2.52473C11.8101 2.29041 12.19 2.29041 12.4243 2.52473L15.1113 5.21173C15.3456 5.44605 15.3456 5.82595 15.1113 6.06026L12.4243 8.74727C12.19 8.98158 11.8101 8.98158 11.5757 8.74727Z',
-    ],
-  },
   // Smiley face icon (from assets/icons/canvas.svg)
   'canvas': {
     viewBox: '0 0 28 23',
@@ -60,10 +50,20 @@ const customIcons = {
       'M17.6103 6.5C18.2731 6.5 18.8104 7.03731 18.8104 7.70012C18.8104 8.36293 18.2731 8.90025 17.6103 8.90025H17.5986C16.9358 8.90025 16.3984 8.36293 16.3984 7.70012C16.3984 7.03731 16.9358 6.5 17.5986 6.5H17.6103Z',
     ],
   },
+  'sticky-note': {
+    viewBox: '0 0 14 14',
+    fillRule: 'evenodd',
+    path: 'M3.709.471C4.763.353 5.867.25 7 .25s2.237.104 3.29.22h.003a3.694 3.694 0 0 1 3.247 3.256v.004c.113 1.049.21 2.145.21 3.27q-.001.595-.032 1.176l-.008.067c-.556 3.437-3.804 5.226-6.192 5.498h-.006l-.048.006a.6.6 0 0 1-.126 0q-.168.003-.338.003c-1.133 0-2.236-.103-3.29-.221h-.003A3.695 3.695 0 0 1 .46 10.272v-.004C.346 9.221.25 8.126.25 7s.097-2.222.21-3.27v-.003A3.694 3.694 0 0 1 3.707.472zm8.784 7.047h-2.37c-.854 0-1.514.656-1.628 1.442c-.22 1.52-.706 2.546-1.413 3.54H7c-1.061 0-2.108-.097-3.15-.213a2.445 2.445 0 0 1-2.148-2.153C1.592 9.1 1.5 8.057 1.5 7s.091-2.1.202-3.134A2.444 2.444 0 0 1 3.85 1.714C4.89 1.597 5.938 1.5 7 1.5s2.107.098 3.151.213a2.444 2.444 0 0 1 2.147 2.152C12.408 4.9 12.5 5.944 12.5 7q0 .259-.007.518',
+  },
   'agents': {
     viewBox: '0 0 32 32',
     path: 'M27.2 16c0-6.19-5.01-11.2-11.2-11.2S4.8 9.81 4.8 16S9.81 27.2 16 27.2S27.2 22.19 27.2 16m-5.6 2.1a1.4 1.4 0 0 1 0 2.8h-4.2a1.4 1.4 0 0 1 0-2.8zm-11.2-6.8a1.397 1.397 0 0 1 1.84.361l.08.119l2.1 3.5l.087.171a1.4 1.4 0 0 1 0 1.1l-.088.171l-2.1 3.5a1.4 1.4 0 0 1-2.4-1.44l1.67-2.78l-1.67-2.78l-.067-.127a1.394 1.394 0 0 1 .547-1.79zM30 16c0 7.73-6.27 14-14 14S2 23.73 2 16S8.27 2 16 2s14 6.27 14 14',
   },
+  'codex': {
+    viewBox: '0 0 24 24',
+    fillRule: 'evenodd',
+    path: 'M8.086.457a6.105 6.105 0 013.046-.415c1.333.153 2.521.72 3.564 1.7a.117.117 0 00.107.029c1.408-.346 2.762-.224 4.061.366l.063.03.154.076c1.357.703 2.33 1.77 2.918 3.198.278.679.418 1.388.421 2.126a5.655 5.655 0 01-.18 1.631.167.167 0 00.04.155 5.982 5.982 0 011.578 2.891c.385 1.901-.01 3.615-1.183 5.14l-.182.22a6.063 6.063 0 01-2.934 1.851.162.162 0 00-.108.102c-.255.736-.511 1.364-.987 1.992-1.199 1.582-2.962 2.462-4.948 2.451-1.583-.008-2.986-.587-4.21-1.736a.145.145 0 00-.14-.032c-.518.167-1.04.191-1.604.185a5.924 5.924 0 01-2.595-.622 6.058 6.058 0 01-2.146-1.781c-.203-.269-.404-.522-.551-.821a7.74 7.74 0 01-.495-1.283 6.11 6.11 0 01-.017-3.064.166.166 0 00.008-.074.115.115 0 00-.037-.064 5.958 5.958 0 01-1.38-2.202 5.196 5.196 0 01-.333-1.589 6.915 6.915 0 01.188-2.132c.45-1.484 1.309-2.648 2.577-3.493.282-.188.55-.334.802-.438.286-.12.573-.22.861-.304a.129.129 0 00.087-.087A6.016 6.016 0 015.635 2.31C6.315 1.464 7.132.846 8.086.457zm-.804 7.85a.848.848 0 00-1.473.842l1.694 2.965-1.688 2.848a.849.849 0 001.46.864l1.94-3.272a.849.849 0 00.007-.854l-1.94-3.393zm5.446 6.24a.849.849 0 000 1.695h4.848a.849.849 0 000-1.696h-4.848z',
+  },
   'claude': {
     viewBox: '0 0 24 24',
     path: 'm4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z',
@@ -121,6 +121,41 @@ const iconoirIcons = {
     strokeWidth: '1.5',
     content: '<path d="M3 21V3.6C3 3.26863 3.26863 3 3.6 3H21" stroke="currentColor"/><path d="M17 21H20.4C20.7314 21 21 20.7314 21 20.4V17" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 7V9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 12V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 21H9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 21H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 4C3.55228 4 4 3.55228 4 3C4 2.44772 3.55228 2 3 2C2.44772 2 2 2.44772 2 3C2 3.55228 2.44772 4 3 4Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 22C3.55228 22 4 21.5523 4 21C4 20.4477 3.55228 20 3 20C2.44772 20 2 20.4477 2 21C2 21.5523 2.44772 22 3 22Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 4C21.5523 4 22 3.55228 22 3C22 2.44772 21.5523 2 21 2C20.4477 2 20 2.44772 20 3C20 3.55228 20.4477 4 21 4Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>',
   },
+  'white-flag': {
+    viewBox: '0 0 24 24',
+    strokeWidth: '1.5',
+    content: '<path d="M5 15L5.95039 4.54568C5.97849 4.23663 6.23761 4 6.54793 4H20.343C20.6958 4 20.9725 4.30295 20.9405 4.65432L20.0496 14.4543C20.0215 14.7634 19.7624 15 19.4521 15H5ZM5 15L4.4 21" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>',
+  },
+  'light-bulb': {
+    viewBox: '0 0 24 24',
+    strokeWidth: '1.5',
+    content: '<path d="M9 18H15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 21H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.00082 15C9.00098 13 8.50098 12.5 7.50082 11.5C6.50067 10.5 6.02422 9.48689 6.00082 8C5.95284 4.95029 8.00067 3 12.0008 3C16.001 3 18.0488 4.95029 18.0008 8C17.9774 9.48689 17.5007 10.5 16.5008 11.5C15.501 12.5 15.001 13 15.0008 15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>',
+  },
+  'light-bulb-off': {
+    viewBox: '0 0 24 24',
+    strokeWidth: '1.5',
+    content: '<path d="M9 18H15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 21H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.4999 11.5C17.4997 10.5 17.9765 9.48689 17.9999 8C18.0479 4.95029 16 3 11.9999 3C10.8324 3 9.83119 3.16613 8.99988 3.47724" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.99985 15C9 13 8.5 12.5 7.49985 11.5C6.4997 10.5 6.02324 9.48689 5.99985 8C5.99142 7.46458 6.0476 6.96304 6.1676 6.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 3L21 21" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>',
+  },
+  'keyframes': {
+    viewBox: '0 0 24 24',
+    strokeWidth: '1.5',
+    content: '<path d="M13.8476 13.317L9.50515 18.2798C8.70833 19.1905 7.29167 19.1905 6.49485 18.2798L2.15238 13.317C1.49259 12.563 1.49259 11.437 2.15238 10.683L6.49485 5.72018C7.29167 4.80952 8.70833 4.80952 9.50515 5.72017L13.8476 10.683C14.5074 11.437 14.5074 12.563 13.8476 13.317Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M13 19L17.8844 13.3016C18.5263 12.5526 18.5263 11.4474 17.8844 10.6984L13 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M17 19L21.8844 13.3016C22.5263 12.5526 22.5263 11.4474 21.8844 10.6984L17 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>',
+  },
+  'keyframes-couple-solid': {
+    viewBox: '0 0 24 24',
+    fill: true,
+    content: '<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0658 5.18029L12.5606 6.87362L11.4395 5.87707L12.9447 4.18374C14.0386 2.95308 15.9614 2.95308 17.0554 4.18373L22.3794 10.1733C23.3056 11.2152 23.3057 12.7855 22.3795 13.8273L17.0554 19.8169C15.9614 21.0476 14.0386 21.0477 12.9447 19.8169L11.4395 18.1236L12.5606 17.1271L14.0658 18.8204C14.563 19.3798 15.437 19.3798 15.9342 18.8204L21.2583 12.8308C21.6793 12.3572 21.6793 11.6435 21.2584 11.17L15.9343 5.18029C15.437 4.6209 14.563 4.6209 14.0658 5.18029" fill="currentColor"/><path d="M6.94474 4.18374C8.03866 2.95307 9.96152 2.95308 11.0555 4.18374L16.3795 10.1733C17.3057 11.2152 17.3058 12.7855 16.3796 13.8273L11.0555 19.8169C9.96155 21.0476 8.03866 21.0477 6.94474 19.8169L1.62067 13.8273C0.694507 12.7855 0.694485 11.2152 1.62064 10.1734L6.94474 4.18374Z" fill="currentColor"/>',
+  },
+  'keyframe': {
+    viewBox: '0 0 24 24',
+    strokeWidth: '1.5',
+    content: '<path d="M20.777 13.3453L13.4799 21.3721C12.6864 22.245 11.3136 22.245 10.5201 21.3721L3.22304 13.3453C2.52955 12.5825 2.52955 11.4175 3.22304 10.6547L10.5201 2.62787C11.3136 1.755 12.6864 1.755 13.4799 2.62787L20.777 10.6547C21.4705 11.4175 21.4705 12.5825 20.777 13.3453Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>',
+  },
+  'wrench': {
+    viewBox: '0 0 24 24',
+    strokeWidth: '1.5',
+    content: '<path d="M10.0503 10.6066L2.97923 17.6777C2.19818 18.4587 2.19818 19.725 2.97923 20.5061V20.5061C3.76027 21.2871 5.0266 21.2871 5.80765 20.5061L12.8787 13.435" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.0502 10.6066C9.20638 8.45358 9.37134 5.6286 11.1109 3.88909C12.8504 2.14957 16.0606 1.76777 17.8284 2.82843L14.7877 5.8691L14.5051 8.98014L17.6161 8.69753L20.6568 5.65685C21.7175 7.42462 21.3357 10.6349 19.5961 12.3744C17.8566 14.1139 15.0316 14.2789 12.8786 13.435" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>',
+  },
 }
 
 /* ─── React Component ─── */
@@ -176,7 +211,7 @@ export default function Icon({
     if (custom.path) {
       svgContent = (
         <svg width={size} height={size} viewBox={custom.viewBox} fill="currentColor" {...ariaProps}>
-          <path d={custom.path} />
+          <path d={custom.path} fillRule={custom.fillRule} clipRule={custom.fillRule} />
         </svg>
       )
     } else if (custom.strokePaths) {

package/src/Viewfinder.jsx

@@ -1,15 +1,16 @@
 /**
- * Viewfinder — SaaS-style homescreen for Storyboard.
+ * Workspace — SaaS-style homescreen for Storyboard.
  *
- * Replaces the old list-based Viewfinder with a sidebar + grid layout.
- * Wired to real data from buildPrototypeIndex and listStories.
+ * Sidebar + grid layout wired to real data from buildPrototypeIndex and listStories.
+ * Formerly known as Viewfinder — renamed to match the /workspace route.
  */
 import { useState, useEffect, useRef, useMemo, useCallback, useSyncExternalStore } from 'react'
-import { buildPrototypeIndex, listStories, getStoryData, getLocal, setLocal } from '@dfosco/storyboard-core'
+import { buildPrototypeIndex, listStories, getStoryData, getLocal, setLocal, BranchSelect } from '@dfosco/storyboard-core'
 import { MarkGithubIcon, GitBranchIcon, ChevronDownIcon, ChevronRightIcon, FileDirectoryFillIcon, PlusIcon, StarIcon, StarFillIcon, ThreeBarsIcon, XIcon, StackIcon, TrashIcon, ShieldLockIcon, KebabHorizontalIcon, PencilIcon } from '@primer/octicons-react'
 import { Menu } from '@base-ui/react/menu'
 import { Dialog } from '@base-ui/react/dialog'
 import Icon from './Icon.jsx'
+import { useBranches } from './BranchBar/useBranches.js'
 import css from './Viewfinder.module.css'
 
 /* ─── Theme sync: read toolbar theme from DOM and apply to Primer/BaseUI ─── */
@@ -94,10 +95,10 @@ function useGitHubUser(basePath) {
 
 /* ─── localStorage helpers ─── */
 
-const STARRED_KEY = 'sb-viewfinder-starred'
-const RECENT_KEY = 'sb-viewfinder-recent'
+const STARRED_KEY = 'sb-workspace-starred'
+const RECENT_KEY = 'sb-workspace-recent'
 const MAX_RECENT = 30
-const GROUP_BY_FOLDERS_KEY = 'sb-viewfinder-group-folders'
+const GROUP_BY_FOLDERS_KEY = 'sb-workspace-group-folders'
 
 function readJSON(key, fallback) {
   try { return JSON.parse(localStorage.getItem(key)) || fallback }
@@ -175,7 +176,7 @@ function getTypeLabel(type) {
 function getTypeIcon(type, size = 14) {
   if (type === 'prototype') return <Icon name="prototype" size={size} />
   if (type === 'canvas') return <Icon name="canvas" size={size} />
-  if (type === 'component') return <Icon name="component" size={size} />
+  if (type === 'component') return <Icon name="iconoir/keyframe" size={size} />
   return null
 }
 
@@ -875,7 +876,7 @@ function CreateMenu({ onClose, basePath }) {
   const items = [
     { icon: <Icon name="canvas" size={18} />, title: 'Canvas', desc: 'Interactive board for prototypes, components, and documents' },
     { icon: <Icon name="prototype" size={18} />, title: 'Prototype', desc: 'Interactive page flow' },
-    { icon: <Icon name="component" size={18} />, title: 'Component', desc: 'Reusable component' },
+    { icon: <Icon name="iconoir/-couple-solid" size={18} />, title: 'Component', desc: 'Reusable component' },
   ]
 
   const moreItems = [
@@ -945,141 +946,60 @@ const NAV_ITEMS = [
 
 const TAB_FILTERS = ['All', 'Recent', 'Starred']
 
-/* ─── Branch Dropdown ─── */
+/* ─── Branch Navigation ─── */
 
-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)
-
-  useEffect(() => {
-    const apiBase = (basePath || '/').replace(/\/$/, '')
-
-    // Fetch git user info for "my branches" filtering
-    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 from server API
-    fetch(`${apiBase}/_storyboard/worktrees`).then(r => r.ok ? r.json() : null)
-      .then(data => { if (Array.isArray(data) && data.length > 0) setBranches(data) })
-      .catch(() => {})
-  }, [])
-
-  const currentBranch = useMemo(() => {
-    const m = (basePath || '').match(/\/branch--([^/]+)\/?$/)
-    return m ? m[1] : 'main'
-  }, [basePath])
-
-  const branchBasePath = (basePath || '/').replace(/\/branch--[^/]*\/$/, '/')
-
-  return { branches, currentBranch, branchBasePath, gitUser }
-}
-
-function BranchDropdown({ basePath }) {
-  // Dev: hide dropdown — use CLI to switch branches
+function BranchNav({ basePath }) {
   const isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true
-  if (isLocalDev) return null
-
-  const { branches, currentBranch, branchBasePath, gitUser } = useBranches(basePath)
-  const [showAll, setShowAll] = useState(false)
+  const { branches, currentBranch, branchBasePath } = useBranches(basePath)
   const [switching, setSwitching] = useState(null)
-  const [switchError, setSwitchError] = useState(null)
 
   if (!branches || branches.length === 0) return null
 
-  const twoWeeksAgo = Date.now() - 14 * 24 * 60 * 60 * 1000
+  const branchNames = branches.map(b => b.branch)
 
-  // Split into "my branches" vs others
-  const myBranches = gitUser
-    ? branches.filter(b => b.author === gitUser || b.branch === currentBranch)
-    : branches.filter(b => b.branch === currentBranch)
+  const navigate = async (branch) => {
+    if (switching) return
+    const target = branches.find(b => b.branch === branch)
+    const folder = target?.folder || (branch === 'main' ? '' : `branch--${branch}/`)
+    const directUrl = `${branchBasePath}${folder}`
 
-  const otherBranches = branches.filter(b => !myBranches.some(m => m.branch === b.branch))
-
-  // Recent = last 2 weeks (or all if showAll)
-  const recentBranches = showAll
-    ? [...otherBranches].sort((a, b) => (a.branch || '').localeCompare(b.branch || ''))
-    : otherBranches
-        .filter(b => !b.lastModified || new Date(b.lastModified).getTime() > twoWeeksAgo)
-        .sort((a, b) => (a.branch || '').localeCompare(b.branch || ''))
+    if (!isLocalDev) {
+      window.location.href = directUrl
+      return
+    }
 
-  const switchBranch = (branch) => {
+    // Local dev: ask server to spin up the branch, then navigate
     setSwitching(branch)
-    const target = branches?.find(b => b.branch === branch)
-    window.location.href = `${branchBasePath}${target?.folder || (branch === 'main' ? '' : `branch--${branch}/`)}`
+    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()
+      window.location.href = (res.ok && data.url) ? data.url : directUrl
+    } catch {
+      window.location.href = directUrl
+    }
   }
 
   return (
-    <Menu.Root>
-      <Menu.Trigger className={css.branchBtn} disabled={!!switching}>
+    <>
+      <div className={css.branchNav}>
         <GitBranchIcon size={14} />
-        <span className={css.branchBtnText}>{switching ? `Switching to ${switching}…` : currentBranch}</span>
-        {!switching && <ChevronDownIcon size={12} />}
-      </Menu.Trigger>
-      <Menu.Portal>
-        <Menu.Positioner className={css.branchPositioner} side="bottom" align="end" sideOffset={4}>
-          <Menu.Popup className={css.branchPopup}>
-            {myBranches.length > 0 && (
-              <>
-                <div className={css.branchSectionLabel}>My branches</div>
-                {myBranches.map(b => (
-                  <Menu.Item
-                    key={b.branch}
-                    className={`${css.branchItem}${b.branch === currentBranch ? ` ${css.branchItemActive}` : ''}`}
-                    onClick={() => switchBranch(b.branch)}
-                  >
-                    <GitBranchIcon size={12} />
-                    {b.branch}
-                  </Menu.Item>
-                ))}
-              </>
-            )}
-
-            {myBranches.length > 0 && recentBranches.length > 0 && (
-              <div className={css.branchSeparator} />
-            )}
-
-            {recentBranches.length > 0 && (
-              <>
-                <div className={css.branchSectionLabel}>
-                  {showAll ? 'All branches' : 'Recent branches'}
-                </div>
-                <Menu.Viewport className={css.branchViewport}>
-                  {recentBranches.map(b => (
-                    <Menu.Item
-                      key={b.branch}
-                      className={`${css.branchItem}${b.branch === currentBranch ? ` ${css.branchItemActive}` : ''}`}
-                      onClick={() => switchBranch(b.branch)}
-                    >
-                      <GitBranchIcon size={12} />
-                      {b.branch}
-                    </Menu.Item>
-                  ))}
-                </Menu.Viewport>
-              </>
-            )}
-
-            {!showAll && otherBranches.length > recentBranches.length && (
-              <>
-                <div className={css.branchSeparator} />
-                <button
-                  className={css.branchShowAll}
-                  onClick={(e) => { e.stopPropagation(); setShowAll(true) }}
-                >
-                  See all branches ({otherBranches.length})
-                </button>
-              </>
-            )}
-          </Menu.Popup>
-        </Menu.Positioner>
-      </Menu.Portal>
-    </Menu.Root>
+        <BranchSelect
+          branches={branchNames}
+          value={currentBranch}
+          onChange={(e) => navigate(e.target.value)}
+          disabled={!!switching}
+        />
+      </div>
+      {switching && <div className={css.switchOverlay}>
+        <div className={css.switchSpinner} />
+        <span>Starting {switching}…</span>
+      </div>}
+    </>
   )
 }
 
@@ -1153,7 +1073,7 @@ function UserSettingsDialog({ open, onOpenChange, user, onRemoveToken }) {
 
 /* ─── Main Component ─── */
 
-export default function Viewfinder({
+export default function Workspace({
   pageModules = {},
   basePath,
   title = 'Storyboard',
@@ -1179,7 +1099,7 @@ export default function Viewfinder({
   const knownRoutes = useMemo(() =>
     Object.keys(pageModules)
       .map(p => p.replace('/src/prototypes/', '').replace('.jsx', ''))
-      .filter(n => !n.startsWith('_') && n !== 'index' && n !== 'viewfinder'),
+      .filter(n => !n.startsWith('_') && n !== 'index' && n !== 'workspace' && n !== 'viewfinder'),
     [pageModules],
   )
 
@@ -1392,7 +1312,7 @@ export default function Viewfinder({
           </div>
         </div>
         <div className={css.topActions}>
-          <BranchDropdown basePath={basePath} />
+          <BranchNav basePath={basePath} />
           {isLocalDev && (
             <Menu.Root open={showCreate} onOpenChange={setShowCreate}>
               <Menu.Trigger className={css.createBtn}>

package/src/Viewfinder.module.css

@@ -81,110 +81,39 @@
 
 /* Branch dropdown */
 
-.branchBtn {
+.branchNav {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 7px 14px;
-  background: var(--bgColor-default, #fff);
   color: var(--fgColor-muted, #555);
-  border: 1px solid var(--borderColor-default, #e5e5e5);
-  border-radius: 8px;
-  font-size: 16px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s;
-  font-family: inherit;
-}
-
-.branchBtn:hover {
-  background: var(--bgColor-muted, #f5f5f5);
-  border-color: var(--borderColor-muted);
-}
-
-.branchBtnText {
-  max-width: 160px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.branchPositioner {
-  z-index: 200;
-}
-
-.branchPopup {
-  background: var(--bgColor-default, #fff);
-  border: 1px solid var(--borderColor-default, #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: var(--fgColor-muted, #999);
-  text-transform: uppercase;
-  letter-spacing: 0.4px;
 }
 
-.branchItem {
+.switchOverlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 8px;
-  padding: 7px 14px;
-  font-size: 16px;
+  justify-content: center;
+  gap: 12px;
+  background: var(--bgColor-default, #fff);
   color: var(--fgColor-muted, #555);
-  cursor: pointer;
-  transition: background 0.1s;
-  border: none;
-  background: none;
-  width: 100%;
-  text-align: left;
-}
-
-.branchItem:hover,
-.branchItem[data-highlighted] {
-  background: var(--bgColor-muted, #f5f5f5);
-}
-
-.branchItemActive {
-  composes: branchItem;
-  color: var(--fgColor-default, #1a1a1a);
-  font-weight: 600;
-}
-
-.branchSeparator {
-  height: 1px;
-  background: var(--borderColor-default, #e5e5e5);
-  margin: 4px 10px;
-}
-
-.branchViewport {
-  max-height: 280px;
-  overflow-y: auto;
+  font-size: 15px;
+  font-weight: 500;
 }
 
-.branchShowAll {
-  display: block;
-  width: 100%;
-  padding: 8px 14px;
-  font-size: 16px;
-  color: var(--fgColor-accent, #2563eb);
-  background: none;
-  border: none;
-  cursor: pointer;
-  text-align: left;
-  font-family: inherit;
+.switchSpinner {
+  width: 24px;
+  height: 24px;
+  border: 3px solid var(--borderColor-default, #e5e5e5);
+  border-top-color: var(--fgColor-accent, #2563eb);
+  border-radius: 50%;
+  animation: branchSpin 0.6s linear infinite;
 }
 
-.branchShowAll:hover {
-  background: var(--bgColor-muted, #f5f5f5);
+@keyframes branchSpin {
+  to { transform: rotate(360deg); }
 }
 
 /* ─── Body: sidebar + content ─── */

package/src/Workspace.jsx

@@ -0,0 +1,7 @@
+/**
+ * Workspace — canonical entry point.
+ *
+ * Re-exports from Viewfinder.jsx (legacy filename kept for backwards compat).
+ * New code should import from this file.
+ */
+export { default, default as Workspace } from './Viewfinder.jsx'