@dfosco/storyboard-react 4.2.0-beta.4 → 4.2.1

package/src/Viewfinder.jsx

@@ -1,14 +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, useMemo, useCallback, useSyncExternalStore } from 'react'
-import { buildPrototypeIndex, listStories, getStoryData, getLocal, setLocal } from '@dfosco/storyboard-core'
-import { MarkGithubIcon, GitBranchIcon, ChevronDownIcon, ChevronRightIcon, FileDirectoryFillIcon, PlusIcon, StarIcon, StarFillIcon, ThreeBarsIcon, XIcon, StackIcon } from '@primer/octicons-react'
+import { useState, useEffect, useRef, useMemo, useCallback, useSyncExternalStore } from 'react'
+import { buildPrototypeIndex, listStories, getStoryData, BranchSelect } from '@dfosco/storyboard-core'
+import { MarkGithubIcon, GitBranchIcon, ChevronDownIcon, ChevronRightIcon, 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 ─── */
@@ -45,12 +47,58 @@ function useToolbarTheme() {
   return attrs
 }
 
+/* ─── GitHub user hook ─── */
+
+const COMMENTS_USER_KEY = 'sb-comments-user'
+const COMMENTS_TOKEN_KEY = 'sb-comments-token'
+
+/**
+ * Resolve the current GitHub user for display in the sidebar.
+ * Priority: 1) PAT-cached user (from comments auth), 2) gh CLI login via git-user endpoint.
+ */
+function useGitHubUser() {
+  const [user, setUser] = useState(() => {
+    try {
+      const raw = localStorage.getItem(COMMENTS_USER_KEY)
+      const token = localStorage.getItem(COMMENTS_TOKEN_KEY)
+      if (token && raw) {
+        const parsed = JSON.parse(raw)
+        if (parsed?.login) return parsed
+      }
+    } catch { /* ignore */ }
+    return null
+  })
+
+  // Listen for auth changes (when user signs in via AuthModal)
+  useEffect(() => {
+    const handler = () => {
+      try {
+        const raw = localStorage.getItem(COMMENTS_USER_KEY)
+        const token = localStorage.getItem(COMMENTS_TOKEN_KEY)
+        if (token && raw) {
+          const parsed = JSON.parse(raw)
+          if (parsed?.login) { setUser(parsed); return }
+        }
+        setUser(null)
+      } catch { setUser(null) }
+    }
+    window.addEventListener('storage', handler)
+    document.addEventListener('storyboard:auth-changed', handler)
+    return () => {
+      window.removeEventListener('storage', handler)
+      document.removeEventListener('storyboard:auth-changed', handler)
+    }
+  }, [])
+
+  return user
+}
+
 /* ─── 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 }
@@ -106,16 +154,6 @@ function withBase(basePath, route) {
   return `${normalizedBase}${normalizedRoute}`.replace(/\/+/g, '/')
 }
 
-/* ─── Thumbnail color from name hash ─── */
-
-const THUMB_CLASSES = ['thumbBlue', 'thumbAmber', 'thumbGreen', 'thumbPurple', 'thumbRose', 'thumbSlate']
-
-function thumbClass(name) {
-  let h = 0
-  for (let i = 0; i < name.length; i++) h = ((h << 5) - h + name.charCodeAt(i)) | 0
-  return css[THUMB_CLASSES[Math.abs(h) % THUMB_CLASSES.length]]
-}
-
 /* ─── Type helpers ─── */
 
 function getTypeLabel(type) {
@@ -128,7 +166,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
 }
 
@@ -157,10 +195,13 @@ function AvatarStack({ authors }) {
 
 /* ─── Star Button ─── */
 
-function StarBtn({ active, onClick }) {
+function StarBtn({ active, onClick, inline }) {
+  const cls = inline
+    ? (active ? css.iconBtnInlineActive : css.iconBtnInline)
+    : (active ? css.iconBtnActive : css.iconBtn)
   return (
     <button
-      className={active ? css.iconBtnActive : css.iconBtn}
+      className={cls}
       onClick={(e) => { e.preventDefault(); e.stopPropagation(); onClick() }}
       aria-label={active ? 'Remove favorite' : 'Favorite'}
       title={active ? 'Remove favorite' : 'Favorite'}
@@ -170,9 +211,251 @@ function StarBtn({ active, onClick }) {
   )
 }
 
+/* ─── Card Actions Menu ─── */
+
+function CardActionsMenu({ typeLabel, onEdit, onDelete }) {
+  return (
+    <Menu.Root>
+      <Menu.Trigger
+        className={css.iconBtn}
+        onClick={(e) => { e.preventDefault(); e.stopPropagation() }}
+        aria-label="Actions"
+        render={<button />}
+      >
+        <KebabHorizontalIcon size={16} />
+      </Menu.Trigger>
+      <Menu.Portal>
+        <Menu.Positioner className={css.actionsMenuPositioner} side="bottom" alignment="end">
+          <Menu.Popup className={css.actionsMenu} onClick={(e) => { e.preventDefault(); e.stopPropagation() }}>
+            <Menu.Item
+              className={css.actionsMenuItem}
+              onClick={(e) => { e.preventDefault(); e.stopPropagation(); onEdit() }}
+              render={<button />}
+            >
+              <PencilIcon size={16} />
+              Edit {typeLabel}
+            </Menu.Item>
+            <Menu.Item
+              className={css.actionsMenuItemDanger}
+              onClick={(e) => { e.preventDefault(); e.stopPropagation(); onDelete() }}
+              render={<button />}
+            >
+              <TrashIcon size={16} />
+              Delete {typeLabel}
+            </Menu.Item>
+          </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.Root>
+  )
+}
+
+/* ─── Edit Artifact Modal ─── */
+
+function EditArtifactModal({ item, dirName, basePath, onClose }) {
+  const [name, setName] = useState(item.name || '')
+  const [description, setDescription] = useState(item.description || '')
+  const [author, setAuthor] = useState(
+    item.author
+      ? (Array.isArray(item.author) ? item.author.join(', ') : item.author)
+      : ''
+  )
+  const [error, setError] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const overlayRef = useRef(null)
+
+  const typeLabel = item.type === 'canvas' ? 'Canvas' : item.type === 'prototype' ? 'Prototype' : 'Component'
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setError('')
+    setSubmitting(true)
+
+    const apiBase = (basePath || '/').replace(/\/+$/, '')
+    let endpoint
+
+    if (item.type === 'canvas') {
+      endpoint = `${apiBase}/_storyboard/canvas/update-meta`
+    } else if (item.type === 'prototype') {
+      endpoint = `${apiBase}/_storyboard/workshop/prototypes`
+    } else {
+      setError('Editing this type is not supported')
+      setSubmitting(false)
+      return
+    }
+
+    const body = {
+      name: dirName,
+      title: name.trim(),
+      description: description.trim(),
+      author: author.trim(),
+    }
+    if (item.folder) body.folder = item.folder
+
+    try {
+      const res = await fetch(endpoint, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      if (!res.ok) {
+        const text = await res.text()
+        throw new Error(text || `Request failed (${res.status})`)
+      }
+      window.location.reload()
+    } catch (err) {
+      setError(err.message)
+      setSubmitting(false)
+    }
+  }
+
+  useEffect(() => {
+    const handleKey = (e) => { if (e.key === 'Escape') onClose() }
+    document.addEventListener('keydown', handleKey)
+    return () => document.removeEventListener('keydown', handleKey)
+  }, [onClose])
+
+  return (
+    <div className={css.modalOverlay} onClick={(e) => { if (e.target === overlayRef.current) onClose() }} ref={overlayRef}>
+      <div className={css.modalContent} onClick={(e) => e.stopPropagation()}>
+        <form onSubmit={handleSubmit}>
+          <div className={css.createFormHeader}>
+            <div className={css.createMenuTitle}>Edit {typeLabel}</div>
+            <button type="button" className={css.createFormClose} onClick={onClose} aria-label="Close">
+              <XIcon size={16} />
+            </button>
+          </div>
+
+          <div className={css.createFormField}>
+            <label className={css.createFormLabel}>Name</label>
+            <input
+              className={css.createFormInput}
+              value={name}
+              onChange={e => setName(e.target.value)}
+              autoFocus
+            />
+          </div>
+
+          <div className={css.createFormField}>
+            <label className={css.createFormLabel}>Description</label>
+            <input
+              className={css.createFormInput}
+              value={description}
+              onChange={e => setDescription(e.target.value)}
+              placeholder="Optional description"
+            />
+          </div>
+
+          <div className={css.createFormField}>
+            <label className={css.createFormLabel}>Author</label>
+            <input
+              className={css.createFormInput}
+              value={author}
+              onChange={e => setAuthor(e.target.value)}
+              placeholder="GitHub username(s), comma-separated"
+            />
+          </div>
+
+          {error && <div className={css.createFormError}>{error}</div>}
+
+          <div className={css.modalActions}>
+            <button type="button" className={css.modalCancelBtn} onClick={onClose}>Cancel</button>
+            <button type="submit" className={css.modalSubmitBtn} disabled={submitting}>
+              {submitting ? 'Saving…' : 'Save Changes'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+/* ─── Delete Artifact Modal ─── */
+
+function DeleteArtifactModal({ item, dirName, basePath, typeLabel, onClose, onDeleted }) {
+  const [error, setError] = useState('')
+  const [deleting, setDeleting] = useState(false)
+  const overlayRef = useRef(null)
+
+  const handleDelete = async () => {
+    setError('')
+    setDeleting(true)
+
+    const apiBase = (basePath || '/').replace(/\/+$/, '')
+    let endpoint
+
+    if (item.type === 'canvas') {
+      endpoint = `${apiBase}/_storyboard/canvas/delete-canvas`
+    } else if (item.type === 'prototype') {
+      endpoint = `${apiBase}/_storyboard/workshop/prototypes`
+    } else {
+      setError('Deleting this type is not supported')
+      setDeleting(false)
+      return
+    }
+
+    const body = { name: dirName }
+    if (item.folder) body.folder = item.folder
+
+    try {
+      const res = await fetch(endpoint, {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      if (!res.ok) {
+        const text = await res.text()
+        throw new Error(text || `Request failed (${res.status})`)
+      }
+      onDeleted?.()
+      onClose()
+    } catch (err) {
+      setError(err.message)
+      setDeleting(false)
+    }
+  }
+
+  useEffect(() => {
+    const handleKey = (e) => { if (e.key === 'Escape') onClose() }
+    document.addEventListener('keydown', handleKey)
+    return () => document.removeEventListener('keydown', handleKey)
+  }, [onClose])
+
+  return (
+    <div className={css.modalOverlay} onClick={(e) => { if (e.target === overlayRef.current) onClose() }} ref={overlayRef}>
+      <div className={css.modalContent} onClick={(e) => e.stopPropagation()}>
+        <div className={css.createFormHeader}>
+          <div className={css.createMenuTitle}>Delete {typeLabel}</div>
+          <button type="button" className={css.createFormClose} onClick={onClose} aria-label="Close">
+            <XIcon size={16} />
+          </button>
+        </div>
+
+        <p className={css.deleteMessage}>
+          Are you sure you want to delete <strong>{item.name}</strong>? This action cannot be undone.
+        </p>
+
+        {error && <div className={css.createFormError}>{error}</div>}
+
+        <div className={css.modalActions}>
+          <button type="button" className={css.modalCancelBtn} onClick={onClose}>Cancel</button>
+          <button
+            type="button"
+            className={css.deleteConfirmBtn}
+            onClick={handleDelete}
+            disabled={deleting}
+          >
+            {deleting ? 'Deleting…' : `Delete ${typeLabel}`}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 /* ─── Artifact Card ─── */
 
-function ArtifactCard({ item, basePath, starred, onToggleStar }) {
+function ArtifactCard({ item, basePath, starred, onToggleStar, onItemDeleted }) {
   const href = item.route ? withBase(basePath, item.route) : '#'
   const isExternal = item.isExternal
 
@@ -189,36 +472,73 @@ function ArtifactCard({ item, basePath, starred, onToggleStar }) {
     ? (Array.isArray(item.author) ? item.author : [item.author])
     : item.gitAuthor ? [item.gitAuthor] : []
 
+  const [showEdit, setShowEdit] = useState(false)
+  const [showDelete, setShowDelete] = useState(false)
+
+  // 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'
+
   return (
-    <Tag className={css.card} {...linkProps} onClick={handleClick}>
-      <div className={css.cardHeader}>
-        <span className={css.cardBadge}>{getTypeLabel(item.type)}</span>
-        <div className={css.cardActions}>
-          {item.flows?.length > 0 && <FlowsDropdown flows={item.flows} basePath={basePath} />}
-          {item.pages?.length > 1 && <PagesDropdown pages={item.pages} basePath={basePath} />}
-          <StarBtn active={starred} onClick={() => onToggleStar(item.id)} />
-        </div>
-      </div>
-      <div className={css.cardBody}>
-        <div className={css.cardBodyContent}>
-          <div className={css.cardTitle}>
-            {item.name}
-            {isExternal && <span className={css.externalBadge}>↗</span>}
+    <>
+      <Tag className={css.card} {...linkProps} onClick={handleClick}>
+        <div className={css.cardHeader}>
+          <span className={css.cardBadge}>{getTypeLabel(item.type)}</span>
+          <div className={css.cardActions}>
+            {item.flows?.length > 0 && <FlowsDropdown flows={item.flows} basePath={basePath} />}
+            {item.pages?.length > 1 && <PagesDropdown pages={item.pages} basePath={basePath} />}
+            {canEditDelete && (
+              <CardActionsMenu
+                typeLabel={typeLabel}
+                onEdit={() => setShowEdit(true)}
+                onDelete={() => setShowDelete(true)}
+              />
+            )}
           </div>
-          {item.description && (
-            <div className={css.cardDescription}>{item.description}</div>
-          )}
-          <div className={css.cardFooter}>
-            <AvatarStack authors={authorList} />
-            <div className={css.cardMeta}>
-              {authorList.length > 0 && <span>{authorList.join(', ')}</span>}
-              {authorList.length > 0 && formatRelativeTime(item.lastModified) && <span className={css.cardMetaDot} />}
-              {formatRelativeTime(item.lastModified) && <span>{formatRelativeTime(item.lastModified)}</span>}
+        </div>
+        <div className={css.cardBody}>
+          <div className={css.cardBodyContent}>
+            <div className={css.cardTitleRow}>
+              <div className={css.cardTitle}>
+                {item.name}
+                {isExternal && <span className={css.externalBadge}>↗</span>}
+              </div>
+              <StarBtn active={starred} onClick={() => onToggleStar(item.id)} inline />
+            </div>
+            {item.description && (
+              <div className={css.cardDescription}>{item.description}</div>
+            )}
+            <div className={css.cardFooter}>
+              <AvatarStack authors={authorList} />
+              <div className={css.cardMeta}>
+                {authorList.length > 0 && <span>{authorList.join(', ')}</span>}
+                {authorList.length > 0 && formatRelativeTime(item.lastModified) && <span className={css.cardMetaDot} />}
+                {formatRelativeTime(item.lastModified) && <span>{formatRelativeTime(item.lastModified)}</span>}
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </Tag>
+      </Tag>
+      {showEdit && (
+        <EditArtifactModal
+          item={item}
+          dirName={dirName}
+          basePath={basePath}
+          onClose={() => setShowEdit(false)}
+        />
+      )}
+      {showDelete && (
+        <DeleteArtifactModal
+          item={item}
+          dirName={dirName}
+          basePath={basePath}
+          typeLabel={typeLabel}
+          onClose={() => setShowDelete(false)}
+          onDeleted={() => onItemDeleted?.(item.id)}
+        />
+      )}
+    </>
   )
 }
 
@@ -316,7 +636,7 @@ function PagesDropdown({ pages, basePath }) {
 
 /* ─── Folder Section ─── */
 
-function FolderSection({ folder, collapsed, onToggle, basePath, starred, onToggleStar }) {
+function FolderSection({ folder, collapsed, onToggle, basePath, starred, onToggleStar, onItemDeleted }) {
   return (
     <section className={collapsed ? css.folderSectionCollapsed : css.folderSection}>
       <button className={css.folderHeader} onClick={onToggle}>
@@ -337,6 +657,7 @@ function FolderSection({ folder, collapsed, onToggle, basePath, starred, onToggl
               basePath={basePath}
               starred={starred.has(item.id)}
               onToggleStar={onToggleStar}
+              onItemDeleted={onItemDeleted}
             />
           ))}
         </div>
@@ -545,7 +866,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 = [
@@ -615,162 +936,157 @@ const NAV_ITEMS = [
 
 const TAB_FILTERS = ['All', 'Recent', 'Starred']
 
-/* ─── Branch Dropdown ─── */
-
-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])
+/* ─── Branch Navigation ─── */
 
-  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>
-                ))}
-              </>
-            )}
+        <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>}
+    </>
+  )
+}
 
-            {myBranches.length > 0 && recentBranches.length > 0 && (
-              <div className={css.branchSeparator} />
-            )}
+/* ─── User Settings Dialog ─── */
 
-            {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>
-              </>
-            )}
+function UserSettingsDialog({ open, onOpenChange, user, onRemoveToken }) {
+  const hasToken = (() => {
+    try { return !!localStorage.getItem(COMMENTS_TOKEN_KEY) } catch { return false }
+  })()
+  const scopes = user?.scopes || []
+  const isFineGrained = hasToken && scopes.length === 0
 
-            {!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>
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Backdrop className={css.settingsBackdrop} />
+        <div className={css.settingsPopupWrap}>
+          <Dialog.Popup className={css.settingsPopup}>
+            <Dialog.Title className={css.settingsTitle}>Settings</Dialog.Title>
+            <Dialog.Close className={css.settingsCloseBtn} aria-label="Close">×</Dialog.Close>
+
+            {/* GitHub connection section */}
+            <div className={css.settingsSection}>
+              <div className={css.settingsSectionHeader}>
+                <ShieldLockIcon size={16} />
+                <span>GitHub Connection</span>
+              </div>
+
+              {hasToken ? (
+                <div className={css.settingsTokenCard}>
+                  <div className={css.settingsTokenRow}>
+                    <span className={css.settingsTokenLabel}>Token</span>
+                    <code className={css.settingsTokenValue}>••••••••••••••••</code>
+                  </div>
+                  <div className={css.settingsTokenRow}>
+                    <span className={css.settingsTokenLabel}>Permissions</span>
+                    <span className={css.settingsTokenValue}>
+                      {isFineGrained
+                        ? 'Fine-grained token'
+                        : scopes.map(s => <code key={s} className={css.settingsScope}>{s}</code>)
+                      }
+                    </span>
+                  </div>
+                  <button className={css.settingsRemoveBtn} onClick={onRemoveToken}>
+                    <TrashIcon size={14} />
+                    Remove token
+                  </button>
+                </div>
+              ) : (
+                <div className={css.settingsNoToken}>
+                  <p>No GitHub token configured.</p>
+                  <button
+                    className={css.settingsSignInBtn}
+                    onClick={() => {
+                      onOpenChange(false)
+                      document.dispatchEvent(new CustomEvent('storyboard:open-auth-modal'))
+                    }}
+                  >
+                    <MarkGithubIcon size={16} />
+                    Sign in with GitHub
+                  </button>
+                </div>
+              )}
+            </div>
+          </Dialog.Popup>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
   )
 }
 
 /* ─── Main Component ─── */
 
-export default function Viewfinder({
+export default function Workspace({
   pageModules = {},
   basePath,
   title = 'Storyboard',
   subtitle,
-  hideDefaultFlow,
-  hideDefaultScene = false,
 }) {
-  const shouldHideDefault = hideDefaultFlow ?? hideDefaultScene
   const themeAttrs = useToolbarTheme()
+  const ghUser = useGitHubUser(basePath)
+  const [settingsOpen, setSettingsOpen] = useState(false)
+
+  const handleRemoveToken = useCallback(() => {
+    try {
+      localStorage.removeItem(COMMENTS_TOKEN_KEY)
+      localStorage.removeItem(COMMENTS_USER_KEY)
+    } catch { /* ignore */ }
+    document.dispatchEvent(new CustomEvent('storyboard:auth-changed'))
+    setSettingsOpen(false)
+  }, [])
 
   // Build data index from real prototype/canvas/story data
   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],
   )
 
@@ -860,20 +1176,23 @@ export default function Viewfinder({
   const [activeNav, setActiveNav] = useState('all')
   const [activeTab, setActiveTab] = useState('All')
   const [showCreate, setShowCreate] = useState(false)
+  const isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true
   const [sidebarOpen, setSidebarOpen] = useState(false)
   const [groupByFolders, setGroupByFolders] = useState(() => {
     try { return localStorage.getItem(GROUP_BY_FOLDERS_KEY) !== 'false' } catch { return true }
   })
   const [collapsedFolders, setCollapsedFolders] = useState(new Set())
+  const [hiddenItems, setHiddenItems] = useState(new Set())
   const { starred, toggle: toggleStar } = useStarred()
   const recentIds = useRecent()
 
   // Filter by nav category
+  const typeMap = { prototypes: 'prototype', canvases: 'canvas', components: 'component' }
   const navFiltered = useMemo(() => {
-    if (activeNav === 'all') return allItems
-    const typeMap = { prototypes: 'prototype', canvases: 'canvas', components: 'component' }
-    return allItems.filter(i => i.type === typeMap[activeNav])
-  }, [allItems, activeNav])
+    let filtered = activeNav === 'all' ? allItems : allItems.filter(i => i.type === typeMap[activeNav])
+    if (hiddenItems.size > 0) filtered = filtered.filter(i => !hiddenItems.has(i.id))
+    return filtered
+  }, [allItems, activeNav, hiddenItems])
 
   // Filter by tab
   const items = useMemo(() => {
@@ -926,7 +1245,7 @@ export default function Viewfinder({
   const toggleGrouping = useCallback(() => {
     setGroupByFolders(prev => {
       const next = !prev
-      try { localStorage.setItem(GROUP_BY_FOLDERS_KEY, String(next)) } catch {}
+      try { localStorage.setItem(GROUP_BY_FOLDERS_KEY, String(next)) } catch { /* empty */ }
       return next
     })
   }, [])
@@ -940,18 +1259,24 @@ export default function Viewfinder({
     })
   }, [])
 
+  const handleItemDeleted = useCallback((itemId) => {
+    setHiddenItems(prev => new Set(prev).add(itemId))
+  }, [])
+
   // Counts
+  const visibleItems = useMemo(() => 
+    hiddenItems.size > 0 ? allItems.filter(i => !hiddenItems.has(i.id)) : allItems
+  , [allItems, hiddenItems])
+
   const counts = useMemo(() => ({
-    all: allItems.length,
-    prototypes: allItems.filter(i => i.type === 'prototype').length,
-    canvases: allItems.filter(i => i.type === 'canvas').length,
-    components: allItems.filter(i => i.type === 'component').length,
-  }), [allItems])
+    all: visibleItems.length,
+    prototypes: visibleItems.filter(i => i.type === 'prototype').length,
+    canvases: visibleItems.filter(i => i.type === 'canvas').length,
+    components: visibleItems.filter(i => i.type === 'component').length,
+  }), [visibleItems])
 
   // Starred items for sidebar
-  const starredItems = useMemo(() => allItems.filter(i => starred.has(i.id)), [allItems, starred])
-
-  const pageTitle = NAV_ITEMS.find(n => n.id === activeNav)?.label || 'All artifacts'
+  const starredItems = useMemo(() => visibleItems.filter(i => starred.has(i.id)), [visibleItems, starred])
 
   return (
     <div className={css.layout} {...themeAttrs}>
@@ -972,19 +1297,21 @@ export default function Viewfinder({
           </div>
         </div>
         <div className={css.topActions}>
-          <BranchDropdown basePath={basePath} />
-          <Menu.Root open={showCreate} onOpenChange={setShowCreate}>
-            <Menu.Trigger className={css.createBtn}>
-              <PlusIcon size={14} /> Create
-            </Menu.Trigger>
-            <Menu.Portal>
-              <Menu.Positioner className={css.createDropdownPositioner} side="bottom" align="end" sideOffset={4}>
-                <Menu.Popup className={css.createDropdown}>
-                  <CreateMenu onClose={() => setShowCreate(false)} basePath={basePath} />
-                </Menu.Popup>
-              </Menu.Positioner>
-            </Menu.Portal>
-          </Menu.Root>
+          <BranchNav basePath={basePath} />
+          {isLocalDev && (
+            <Menu.Root open={showCreate} onOpenChange={setShowCreate}>
+              <Menu.Trigger className={css.createBtn}>
+                <PlusIcon size={14} /> Create
+              </Menu.Trigger>
+              <Menu.Portal>
+                <Menu.Positioner className={css.createDropdownPositioner} side="bottom" align="end" sideOffset={4}>
+                  <Menu.Popup className={css.createDropdown}>
+                    <CreateMenu onClose={() => setShowCreate(false)} basePath={basePath} />
+                  </Menu.Popup>
+                </Menu.Positioner>
+              </Menu.Portal>
+            </Menu.Root>
+          )}
         </div>
       </header>
 
@@ -1027,16 +1354,41 @@ export default function Viewfinder({
           ))}
           </div>
 
-          {/* User profile / login */}
+          {/* User profile / settings */}
           <div className={css.sidebarFooter}>
-            <button className={css.loginBtn} onClick={() => document.dispatchEvent(new CustomEvent('storyboard:open-auth-modal'))}>
-              <span className={css.avatar}><MarkGithubIcon size={16} /></span>
-              <div>
-                <div className={css.userName}>Sign in</div>
-                <div className={css.userSub}>Connect with GitHub</div>
+            {ghUser ? (
+              <div className={css.footerRow}>
+                <button className={css.userBtn} onClick={() => setSettingsOpen(true)}>
+                  <img
+                    className={css.userAvatar}
+                    src={ghUser.avatarUrl || `https://github.com/${ghUser.login}.png?size=64`}
+                    alt={ghUser.login}
+                    width={32}
+                    height={32}
+                  />
+                  <div className={css.userInfo}>
+                    <div className={css.userName}>{ghUser.login}</div>
+                  </div>
+                </button>
               </div>
-            </button>
+            ) : (
+              <div className={css.footerRow}>
+                <button className={css.loginBtn} onClick={() => document.dispatchEvent(new CustomEvent('storyboard:open-auth-modal'))}>
+                  <span className={css.avatar}><MarkGithubIcon size={16} /></span>
+                  <div>
+                    <div className={css.userName}>Sign in</div>
+                    <div className={css.userSub}>Connect with GitHub</div>
+                  </div>
+                </button>
+              </div>
+            )}
           </div>
+          <UserSettingsDialog
+            open={settingsOpen}
+            onOpenChange={setSettingsOpen}
+            user={ghUser}
+            onRemoveToken={handleRemoveToken}
+          />
         </aside>
 
         {/* ─── Main ─── */}
@@ -1071,7 +1423,7 @@ export default function Viewfinder({
                 {activeTab === 'Starred' && 'No starred items. Click ☆ on a card to star it.'}
                 {activeTab === 'All' && 'No items found. Create a prototype, canvas, or component to get started.'}
               </div>
-            ) : groupByFolders && grouped && activeTab === 'All' && activeNav === 'all' ? (
+            ) : groupByFolders && grouped && activeTab === 'All' ? (
               <>
                 {grouped.folders.map(folder => (
                   <FolderSection
@@ -1082,6 +1434,7 @@ export default function Viewfinder({
                     basePath={basePath}
                     starred={starred}
                     onToggleStar={toggleStar}
+                    onItemDeleted={handleItemDeleted}
                   />
                 ))}
                 {grouped.ungrouped.length > 0 && (
@@ -1093,6 +1446,7 @@ export default function Viewfinder({
                         basePath={basePath}
                         starred={starred.has(item.id)}
                         onToggleStar={toggleStar}
+                        onItemDeleted={handleItemDeleted}
                       />
                     ))}
                   </div>
@@ -1107,6 +1461,7 @@ export default function Viewfinder({
                     basePath={basePath}
                     starred={starred.has(item.id)}
                     onToggleStar={toggleStar}
+                    onItemDeleted={handleItemDeleted}
                   />
                 ))}
               </div>