@dfosco/storyboard 0.7.1 → 0.9.0

package/src/internals/Viewfinder.jsx

@@ -5,12 +5,27 @@
  * Formerly known as Viewfinder — renamed to match the /workspace route.
  */
 import { useState, useEffect, useRef, useMemo, useCallback, useSyncExternalStore } from 'react'
-import { buildPrototypeIndex, listStories, getStoryData, BranchSelect, getCustomerModeConfig } from '../core/index.js'
-import { MarkGithubIcon, GitBranchIcon, ChevronDownIcon, ChevronRightIcon, PlusIcon, StarIcon, StarFillIcon, ThreeBarsIcon, XIcon, StackIcon, TrashIcon, ShieldLockIcon, KebabHorizontalIcon, PencilIcon } from '@primer/octicons-react'
+import {
+  buildPrototypeIndex,
+  listStories,
+  getStoryData,
+  BranchSelect,
+  getCustomerModeConfig,
+  getConfig,
+  isMenuHidden,
+  trackRecent,
+  subscribeToRecent,
+  getRecentSnapshot,
+} from '../core/index.js'
+import { buildBranchArtifactHref, mergeArtifactIndexIntoPrototypeIndex } from '../core/data/artifactIndex.js'
+import { MarkGithubIcon, GitBranchIcon, ChevronDownIcon, ChevronRightIcon, PlusIcon, StarIcon, StarFillIcon, ThreeBarsIcon, XIcon, StackIcon, TrashIcon, ShieldLockIcon, KebabHorizontalIcon, PencilIcon, EyeClosedIcon } from '@primer/octicons-react'
 import { Menu } from '@base-ui/react/menu'
 import { Dialog } from '@base-ui/react/dialog'
+import Tooltip from './Tooltip.jsx'
 import Icon from './Icon.jsx'
 import { useBranches } from './BranchBar/useBranches.js'
+import { useArtifactIndex } from './hooks/useArtifactIndex.js'
+import BranchesDropdown from './BranchesDropdown/BranchesDropdown.jsx'
 import css from './Viewfinder.module.css'
 
 /* ─── Theme sync: read toolbar theme from DOM and apply to Primer/BaseUI ─── */
@@ -96,8 +111,6 @@ function useGitHubUser() {
 /* ─── localStorage helpers ─── */
 
 const STARRED_KEY = 'sb-workspace-starred'
-const RECENT_KEY = 'sb-workspace-recent'
-const MAX_RECENT = 30
 const GROUP_BY_FOLDERS_KEY = 'sb-workspace-group-folders'
 const COLLAPSED_FOLDERS_KEY = 'sb-workspace-collapsed-folders'
 
@@ -122,7 +135,6 @@ function createLocalStorageStore(key, fallback) {
 }
 
 const starredStore = createLocalStorageStore(STARRED_KEY, [])
-const recentStore = createLocalStorageStore(RECENT_KEY, [])
 
 function useStarred() {
   const raw = useSyncExternalStore(starredStore.subscribe, starredStore.getSnapshot)
@@ -135,15 +147,61 @@ function useStarred() {
   return { starred: new Set(ids), toggle }
 }
 
+/**
+ * Map a recent store entry `{type, key}` to the composite id used by the
+ * workspace `itemMap` (`proto:`, `canvas:`, `component:`).
+ *
+ * The unified recent store uses `'story'` as the canonical type for
+ * component/story artifacts (matches `core/stores/paletteProviders.js`),
+ * but the workspace's items use `'component'` for the same things.
+ */
+function recentEntryToItemId(entry) {
+  if (!entry || typeof entry.type !== 'string' || typeof entry.key !== 'string') return null
+  switch (entry.type) {
+    case 'prototype': return `proto:${entry.key}`
+    case 'canvas':    return `canvas:${entry.key}`
+    case 'story':
+    case 'component': return `component:${entry.key}`
+    default:          return `${entry.type}:${entry.key}`
+  }
+}
+
+/**
+ * Map a workspace `item.type` value to the canonical type stored in the
+ * recent artifacts store. The workspace uses `'component'` for stories
+ * but the recent store (shared with the command palette) uses `'story'`.
+ */
+function itemTypeToRecentType(itemType) {
+  if (itemType === 'component') return 'story'
+  return itemType
+}
+
 function useRecent() {
-  const raw = useSyncExternalStore(recentStore.subscribe, recentStore.getSnapshot)
-  return JSON.parse(raw)
+  const raw = useSyncExternalStore(subscribeToRecent, getRecentSnapshot)
+  return useMemo(() => {
+    try {
+      const entries = JSON.parse(raw)
+      if (!Array.isArray(entries)) return []
+      const ids = []
+      for (const entry of entries) {
+        const id = recentEntryToItemId(entry)
+        if (id) ids.push(id)
+      }
+      return ids
+    } catch {
+      return []
+    }
+  }, [raw])
 }
 
-function trackRecent(id) {
-  const current = readJSON(RECENT_KEY, [])
-  const next = [id, ...current.filter(x => x !== id)].slice(0, MAX_RECENT)
-  writeJSON(RECENT_KEY, next)
+function trackRecentItem(item) {
+  if (!item || !item.id) return
+  const colonIdx = item.id.indexOf(':')
+  if (colonIdx <= 0) return
+  const key = item.id.slice(colonIdx + 1)
+  const type = itemTypeToRecentType(item.type)
+  if (!type) return
+  trackRecent(type, key, item.name || key)
 }
 
 /* ─── URL helpers ─── */
@@ -440,18 +498,26 @@ function DeleteArtifactModal({ item, dirName, basePath, typeLabel, onClose, onDe
 
 /* ─── Artifact Card ─── */
 
-function ArtifactCard({ item, basePath, starred, onToggleStar, onItemDeleted }) {
-  const href = item.route ? withBase(basePath, item.route) : '#'
+function ArtifactCard({ item, basePath, branchBasePath, currentBranch, starred, onToggleStar, onItemDeleted }) {
+  const isBranchOnly = !!item.isBranchOnly
   const isExternal = item.isExternal
+  const branchOnlyHref = isBranchOnly
+    ? isExternal
+      ? item.externalUrl
+      : buildBranchArtifactHref(branchBasePath || basePath, item.homeBranch?.folder, item.homeBranch?.route || item.route)
+    : null
+  const href = item.route ? withBase(basePath, item.route) : '#'
 
   const handleClick = () => {
-    trackRecent(item.id)
+    if (!isBranchOnly) trackRecentItem(item)
   }
 
-  const Tag = isExternal ? 'a' : 'a'
-  const linkProps = isExternal
-    ? { href: item.externalUrl, target: '_blank', rel: 'noopener noreferrer' }
-    : { href }
+  const Tag = 'a'
+  const linkProps = isBranchOnly
+    ? { href: branchOnlyHref || '#', target: '_blank', rel: 'noopener noreferrer' }
+    : isExternal
+      ? { href: item.externalUrl, target: '_blank', rel: 'noopener noreferrer' }
+      : { href }
 
   const authorList = item.author
     ? (Array.isArray(item.author) ? item.author : [item.author])
@@ -463,17 +529,40 @@ function ArtifactCard({ item, basePath, starred, onToggleStar, onItemDeleted })
   // Extract dirName from item.id (format: "type:dirName")
   const dirName = item.id.split(':').slice(1).join(':')
   const typeLabel = item.type === 'canvas' ? 'Canvas' : item.type === 'prototype' ? 'Prototype' : 'Component'
-  const canEditDelete = item.type === 'canvas' || item.type === 'prototype'
+  const canEditDelete = !isBranchOnly && (item.type === 'canvas' || item.type === 'prototype')
+  const cardClass = `${css.card}${item.isPrivate ? ' ' + css.cardPrivate : ''}${isBranchOnly ? ' ' + css.branchOnlyCard : ''}`
 
   return (
     <>
-      <Tag className={css.card} {...linkProps} onClick={handleClick}>
+      <Tag className={cardClass} {...linkProps} onClick={handleClick}>
         <div className={css.cardHeader}>
-          <span className={css.cardBadge}>{getTypeLabel(item.type)}</span>
+          <div className={css.cardBadgeGroup}>
+            <span className={css.cardBadge}>{getTypeLabel(item.type)}</span>
+            {isBranchOnly && <span className={css.branchOnlyBadge}>Branch-only</span>}
+            {item.isPrivate && !isBranchOnly && (
+              <Tooltip text={`${typeLabel} not published, only visible to you`} direction="n">
+                <button
+                  type="button"
+                  className={css.cardPrivateBadge}
+                  aria-label={`Private ${typeLabel.toLowerCase()}`}
+                  onClick={(e) => { e.preventDefault(); e.stopPropagation() }}
+                >
+                  <EyeClosedIcon size={12} />
+                </button>
+              </Tooltip>
+            )}
+          </div>
           <div className={css.cardActions}>
-            <StarBtn active={starred} onClick={() => onToggleStar(item.id)} inline />
-            {item.flows?.length > 1 && <FlowsDropdown flows={item.flows} basePath={basePath} />}
-            {item.pages?.length > 1 && <PagesDropdown pages={item.pages} basePath={basePath} />}
+            {!isBranchOnly && <StarBtn active={starred} onClick={() => onToggleStar(item.id)} inline />}
+            {!isBranchOnly && item.flows?.length > 1 && <FlowsDropdown flows={item.flows} basePath={basePath} />}
+            {!isBranchOnly && item.pages?.length > 1 && <PagesDropdown pages={item.pages} basePath={basePath} />}
+            <BranchesDropdown
+              branches={item.branches || []}
+              branchBasePath={branchBasePath}
+              currentBranch={currentBranch}
+              homeTitle={item.name}
+              homeFolder={item.folder}
+            />
             {canEditDelete && (
               <CardActionsMenu
                 typeLabel={typeLabel}
@@ -505,7 +594,7 @@ function ArtifactCard({ item, basePath, starred, onToggleStar, onItemDeleted })
           </div>
         </div>
       </Tag>
-      {showEdit && (
+      {showEdit && !isBranchOnly && (
         <EditArtifactModal
           item={item}
           dirName={dirName}
@@ -513,7 +602,7 @@ function ArtifactCard({ item, basePath, starred, onToggleStar, onItemDeleted })
           onClose={() => setShowEdit(false)}
         />
       )}
-      {showDelete && (
+      {showDelete && !isBranchOnly && (
         <DeleteArtifactModal
           item={item}
           dirName={dirName}
@@ -609,8 +698,12 @@ function PagesDropdown({ pages, basePath }) {
                 <a
                   href={withBase(basePath, page.route)}
                   className={css.flowsItemLink}
+                  title={page.isPrivate ? 'Local-only page — gitignored, dev-only' : undefined}
                 >
                   {page.name}
+                  {page.isPrivate && (
+                    <EyeClosedIcon size={12} className={css.flowsItemPrivateIcon} />
+                  )}
                 </a>
               </Menu.Item>
             ))}
@@ -623,18 +716,37 @@ function PagesDropdown({ pages, basePath }) {
 
 /* ─── Folder Section ─── */
 
-function FolderSection({ folder, collapsed, onToggle, basePath, starred, onToggleStar, onItemDeleted }) {
+function FolderSection({ folder, collapsed, onToggle, basePath, branchBasePath, currentBranch, starred, onToggleStar, onItemDeleted }) {
+  const sectionClass = collapsed ? css.folderSectionCollapsed : css.folderSection
   return (
-    <section className={collapsed ? css.folderSectionCollapsed : css.folderSection}>
-      <button className={css.folderHeader} onClick={onToggle}>
+    <section className={`${sectionClass}${folder.isPrivate ? ' ' + css.folderSectionPrivate : ''}`}>
+      <div
+        className={css.folderHeader}
+        role="button"
+        tabIndex={0}
+        onClick={onToggle}
+        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onToggle() } }}
+      >
         <Icon name={collapsed ? 'folder' : 'folder-open'} size={16} className={css.folderIcon} />
         <span className={css.folderName}>{folder.name}</span>
+        {folder.isPrivate && (
+          <Tooltip text="Folder not published, only visible to you" direction="n">
+            <button
+              type="button"
+              className={css.folderPrivateBadge}
+              aria-label="Private folder"
+              onClick={(e) => { e.preventDefault(); e.stopPropagation() }}
+            >
+              <EyeClosedIcon size={12} />
+            </button>
+          </Tooltip>
+        )}
         <span className={css.folderCount}>{folder.items.length}</span>
         <ChevronRightIcon
           size={14}
           className={collapsed ? css.folderChevron : css.folderChevronExpanded}
         />
-      </button>
+      </div>
       {!collapsed && (
         <div className={css.grid}>
           {folder.items.map(item => (
@@ -642,6 +754,8 @@ function FolderSection({ folder, collapsed, onToggle, basePath, starred, onToggl
               key={item.id}
               item={item}
               basePath={basePath}
+              branchBasePath={branchBasePath}
+              currentBranch={currentBranch}
               starred={starred.has(item.id)}
               onToggleStar={onToggleStar}
               onItemDeleted={onItemDeleted}
@@ -878,22 +992,30 @@ function CreateForm({ type, onClose, basePath }) {
 
 /* ─── Create Menu (Dropdown) ─── */
 
-function CreateMenu({ onClose, basePath }) {
+export function CreateMenu({ onClose, basePath }) {
   const [activeForm, setActiveForm] = useState(null)
   const [showMore, setShowMore] = useState(false)
 
+  // Each menu item is enabled by default; a workshop.features.create<X> flag
+  // can opt it out per consumer. Preserves current behavior when no flags are
+  // set, and lets a consumer hide individual artifact types by adding e.g.
+  //   { "workshop": { "features": { "createComponent": false } } }
+  // to their storyboard.config.json.
+  const features = getConfig('workshop')?.features || {}
+  const isEnabled = (flag) => features[flag] !== false
+
   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="iconoir/-couple-solid" size={18} />, title: 'Component', desc: 'Reusable component' },
-  ]
+    { icon: <Icon name="canvas" size={18} />, title: 'Canvas', desc: 'Interactive board for prototypes, components, and documents', flag: 'createCanvas' },
+    { icon: <Icon name="prototype" size={18} />, title: 'Prototype', desc: 'Interactive page flow', flag: 'createPrototype' },
+    { icon: <Icon name="iconoir/-couple-solid" size={18} />, title: 'Component', desc: 'Reusable component', flag: 'createComponent' },
+  ].filter(it => isEnabled(it.flag))
 
   const moreItems = [
-    { title: 'Prototype Flow', desc: 'A flow data file for a prototype', type: 'Flow' },
-    { title: 'Prototype Page', desc: 'A new page inside a prototype', type: 'Page' },
-    { title: 'Object', desc: 'Reusable JSON data fragment', type: 'Object' },
-    { title: 'Record', desc: 'Collection of entries with IDs', type: 'Record' },
-  ]
+    { title: 'Prototype Flow', desc: 'A flow data file for a prototype', type: 'Flow', flag: 'createFlow' },
+    { title: 'Prototype Page', desc: 'A new page inside a prototype', type: 'Page', flag: 'createPage' },
+    { title: 'Object', desc: 'Reusable JSON data fragment', type: 'Object', flag: 'createObject' },
+    { title: 'Record', desc: 'Collection of entries with IDs', type: 'Record', flag: 'createRecord' },
+  ].filter(it => isEnabled(it.flag))
 
   if (activeForm) {
     return (
@@ -923,7 +1045,7 @@ function CreateMenu({ onClose, basePath }) {
         ))}
       </div>
 
-      {!showMore ? (
+      {moreItems.length > 0 && (!showMore ? (
         <button className={css.moreOptionsBtn} onClick={() => setShowMore(true)}>
           More options <ChevronDownIcon size={12} />
         </button>
@@ -936,7 +1058,7 @@ function CreateMenu({ onClose, basePath }) {
             </button>
           ))}
         </div>
-      )}
+      ))}
 
       <CreateTip />
       <CreateFooter />
@@ -956,6 +1078,7 @@ const NAV_ITEMS = [
 ]
 
 const TAB_FILTERS = ['All', 'Recent', 'Starred']
+const TYPE_MAP = { prototypes: 'prototype', canvases: 'canvas', components: 'component' }
 
 /* ─── Branch Navigation ─── */
 
@@ -970,7 +1093,17 @@ function BranchNav({ basePath }) {
   if (isLocalDev) return null
   if (!branches || branches.length === 0) return null
 
-  const branchNames = branches.map(b => b.branch)
+  // Ensure `main` is always present and sorted first. CI's `branches.json`
+  // historically lists only `branch--*/` folders, so `main` is missing on
+  // prod deploys — without this the <select> falls back to its first option
+  // (often something like `0.5.0-fix-…`) when the user is actually on main.
+  const branchNames = [
+    'main',
+    ...branches
+      .map(b => b.branch)
+      .filter(b => b && b !== 'main')
+      .sort((a, b) => a.localeCompare(b)),
+  ]
 
   const navigate = async (branch) => {
     if (switching) return
@@ -1093,6 +1226,8 @@ function WorkspaceImpl({
   basePath,
   title = 'Storyboard',
   subtitle,
+  logo,
+  logoIcon = 'iconoir/key-command',
   showAllArtifacts = false,
   showPrototypes = true,
   showCanvases = true,
@@ -1100,6 +1235,8 @@ function WorkspaceImpl({
 }) {
   const themeAttrs = useToolbarTheme()
   const ghUser = useGitHubUser(basePath)
+  const { currentBranch, branchBasePath } = useBranches(basePath)
+  const { artifactIndex } = useArtifactIndex(basePath)
   const [settingsOpen, setSettingsOpen] = useState(false)
 
   const handleRemoveToken = useCallback(() => {
@@ -1129,13 +1266,17 @@ function WorkspaceImpl({
   const knownRoutes = useMemo(() =>
     Object.keys(pageModules)
       .map(p => p.replace('/src/prototypes/', '').replace('.jsx', ''))
-      .filter(n => !n.startsWith('_') && n !== 'index' && n !== 'workspace' && n !== 'viewfinder'),
+      .filter(n => !n.startsWith('_') && n !== 'index' && n !== 'workspace' && n !== 'viewfinder' && n !== 'create'),
     [pageModules],
   )
 
   // canvasIndexTick is an intentional re-render trigger from HMR events
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const prototypeIndex = useMemo(() => buildPrototypeIndex(knownRoutes), [knownRoutes, canvasIndexTick])
+  const localPrototypeIndex = useMemo(() => buildPrototypeIndex(knownRoutes), [knownRoutes, canvasIndexTick])
+  const prototypeIndex = useMemo(
+    () => mergeArtifactIndexIntoPrototypeIndex(localPrototypeIndex, artifactIndex, currentBranch),
+    [localPrototypeIndex, artifactIndex, currentBranch],
+  )
 
   // Build unified items list from all sources
   const allItems = useMemo(() => {
@@ -1152,18 +1293,22 @@ function WorkspaceImpl({
           : `/${proto.dirName}`
 
       items.push({
-        id: `proto:${proto.dirName}`,
+        id: proto.id || `proto:${proto.dirName}`,
         name: proto.name,
         type: 'prototype',
         author: proto.author,
         gitAuthor: proto.gitAuthor,
         lastModified: proto.lastModified,
-        route,
+        route: proto.route || route,
         isExternal: proto.isExternal,
         externalUrl: proto.externalUrl,
         folder: proto.folder,
         description: proto.description,
         flows: proto.flows || [],
+        isPrivate: !!proto.isPrivate,
+        branches: proto.branches || [],
+        isBranchOnly: !!proto.isBranchOnly,
+        homeBranch: proto.homeBranch || null,
       })
     }
 
@@ -1175,18 +1320,22 @@ function WorkspaceImpl({
     // Canvases (ungrouped + from folders)
     const addCanvas = (canvas) => {
       items.push({
-        id: `canvas:${canvas.dirName}`,
+        id: canvas.id || `canvas:${canvas.dirName}`,
         name: canvas.name,
         type: 'canvas',
         author: canvas.author,
         gitAuthor: canvas.gitAuthor,
-        lastModified: null,
+        lastModified: canvas.lastModified || null,
         route: canvas.route,
         isExternal: false,
         externalUrl: null,
         folder: canvas.folder,
         description: canvas.description,
         pages: canvas.pages || null,
+        isPrivate: !!canvas.isPrivate,
+        branches: canvas.branches || [],
+        isBranchOnly: !!canvas.isBranchOnly,
+        homeBranch: canvas.homeBranch || null,
       })
     }
 
@@ -1200,9 +1349,10 @@ function WorkspaceImpl({
     for (const name of storyNames) {
       const data = getStoryData(name)
       if (!data) continue
+      const displayName = (name.split('/').pop() || name).replace(/^~/, '')
       items.push({
         id: `component:${name}`,
-        name: name.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' '),
+        name: displayName.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' '),
         type: 'component',
         author: null,
         gitAuthor: null,
@@ -1212,6 +1362,7 @@ function WorkspaceImpl({
         externalUrl: null,
         folder: null,
         description: null,
+        isPrivate: !!data._isPrivate || name.split('/').includes('drafts'),
       })
     }
 
@@ -1220,7 +1371,10 @@ function WorkspaceImpl({
 
   const itemMap = useMemo(() => Object.fromEntries(allItems.map(i => [i.id, i])), [allItems])
 
-  // Filter nav items based on visibility props
+  // Filter nav items based on visibility props AND `ui.hide` config keys.
+  // `ui.hide` entries take the form `workspace:<navId>` (e.g.
+  // "workspace:components") and let consumers hide individual nav items
+  // without passing component props.
   const visibleNavItems = useMemo(() => {
     const visibility = {
       all: showAllArtifacts,
@@ -1228,7 +1382,7 @@ function WorkspaceImpl({
       canvases: showCanvases,
       components: showComponents,
     }
-    return NAV_ITEMS.filter(nav => visibility[nav.id])
+    return NAV_ITEMS.filter(nav => visibility[nav.id] && !isMenuHidden(`workspace:${nav.id}`))
   }, [showAllArtifacts, showPrototypes, showCanvases, showComponents])
 
   // State - default to first visible nav item
@@ -1253,9 +1407,8 @@ function WorkspaceImpl({
   const recentIds = useRecent()
 
   // Filter by nav category
-  const typeMap = { prototypes: 'prototype', canvases: 'canvas', components: 'component' }
   const navFiltered = useMemo(() => {
-    let filtered = activeNav === 'all' ? allItems : allItems.filter(i => i.type === typeMap[activeNav])
+    let filtered = activeNav === 'all' ? allItems : allItems.filter(i => i.type === TYPE_MAP[activeNav])
     if (hiddenItems.size > 0) filtered = filtered.filter(i => !hiddenItems.has(i.id))
     return filtered
   }, [allItems, activeNav, hiddenItems])
@@ -1263,15 +1416,14 @@ function WorkspaceImpl({
   // Filter by tab
   const items = useMemo(() => {
     if (activeTab === 'Recent') {
-      const ordered = recentIds.map(id => itemMap[id]).filter(Boolean)
+      const ordered = recentIds.map(id => itemMap[id]).filter(item => item && !item.isBranchOnly)
       if (activeNav !== 'all') {
-        const typeMap = { prototypes: 'prototype', canvases: 'canvas', components: 'component' }
-        return ordered.filter(i => i.type === typeMap[activeNav])
+        return ordered.filter(i => i.type === TYPE_MAP[activeNav])
       }
       return ordered
     }
     const base = activeTab === 'Starred'
-      ? navFiltered.filter(i => starred.has(i.id))
+      ? navFiltered.filter(i => !i.isBranchOnly && starred.has(i.id))
       : navFiltered
     return [...base].sort((a, b) => {
       const aTime = a.lastModified ? new Date(a.lastModified).getTime() : 0
@@ -1298,6 +1450,7 @@ function WorkspaceImpl({
     const folders = Object.entries(folderItems).map(([dirName, fItems]) => ({
       dirName,
       name: folderMeta[dirName]?.name || dirName,
+      isPrivate: !!folderMeta[dirName]?.isPrivate || dirName === 'drafts',
       items: fItems,
     }))
     folders.sort((a, b) => {
@@ -1343,7 +1496,7 @@ function WorkspaceImpl({
   }), [visibleItems])
 
   // Starred items for sidebar
-  const starredItems = useMemo(() => visibleItems.filter(i => starred.has(i.id)), [visibleItems, starred])
+  const starredItems = useMemo(() => visibleItems.filter(i => !i.isBranchOnly && starred.has(i.id)), [visibleItems, starred])
 
   return (
     <div className={css.layout} {...themeAttrs}>
@@ -1357,7 +1510,9 @@ function WorkspaceImpl({
           >
             {sidebarOpen ? <XIcon size={18} /> : <ThreeBarsIcon size={18} />}
           </button>
-          <div className={`${css.logo} smooth-corners`}><Icon name="iconoir/key-command" size={22} color="#fff" /></div>
+          {logo
+            ? <div className={`${css.logo} smooth-corners`}>{logo}</div>
+            : <div className={`${css.logo} smooth-corners`}><Icon name={logoIcon} size={22} color="#fff" /></div>}
           <div>
             <div className={css.appName}>{title}</div>
             {subtitle && <div className={css.appSubtitle}>{subtitle}</div>}
@@ -1413,7 +1568,7 @@ function WorkspaceImpl({
               className={css.starredItem}
               href={s.isExternal ? s.externalUrl : withBase(basePath, s.route)}
               {...(s.isExternal ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
-              onClick={() => trackRecent(s.id)}
+              onClick={() => trackRecentItem(s)}
             >
               <span className={css.starredIcon}>{getTypeIcon(s.type)}</span>
               {s.name}
@@ -1499,6 +1654,8 @@ function WorkspaceImpl({
                     collapsed={collapsedFolders.has(folder.dirName)}
                     onToggle={() => toggleFolder(folder.dirName)}
                     basePath={basePath}
+                    branchBasePath={branchBasePath}
+                    currentBranch={currentBranch}
                     starred={starred}
                     onToggleStar={toggleStar}
                     onItemDeleted={handleItemDeleted}
@@ -1511,6 +1668,8 @@ function WorkspaceImpl({
                         key={item.id}
                         item={item}
                         basePath={basePath}
+                        branchBasePath={branchBasePath}
+                        currentBranch={currentBranch}
                         starred={starred.has(item.id)}
                         onToggleStar={toggleStar}
                         onItemDeleted={handleItemDeleted}
@@ -1526,6 +1685,8 @@ function WorkspaceImpl({
                     key={item.id}
                     item={item}
                     basePath={basePath}
+                    branchBasePath={branchBasePath}
+                    currentBranch={currentBranch}
                     starred={starred.has(item.id)}
                     onToggleStar={toggleStar}
                     onItemDeleted={handleItemDeleted}
@@ -1543,11 +1704,15 @@ function WorkspaceImpl({
 /**
  * Workspace wrapper — short-circuits to an empty page when customer mode
  * has `hideHomepage` enabled, so the workspace dashboard never renders for
- * end-customers. Wrapping (instead of an early return inside WorkspaceImpl)
- * keeps the inner component's hooks call order stable.
+ * end-customers. Also short-circuits when `canvasHomepage` is set, since
+ * that already replaces the homepage via `history.replaceState` in
+ * `mountStoryboardCore.applyCustomerMode` — rendering the workspace would
+ * cause a flash before the redirect resolves. Wrapping (instead of an early
+ * return inside WorkspaceImpl) keeps the inner component's hooks call order
+ * stable.
  */
 export default function Workspace(props) {
   const cm = getCustomerModeConfig()
-  if (cm.enabled && cm.hideHomepage) return null
+  if (cm.enabled && (cm.hideHomepage || cm.canvasHomepage)) return null
   return <WorkspaceImpl {...props} />
 }