@dfosco/storyboard 0.6.4 → 0.6.5

package/src/core/rename-watcher/watcher.js

@@ -78,11 +78,16 @@ function scanDirectory(root, watchEntry, config) {
 
 /**
  * Compute the route path for a prototype file (relative to src/prototypes/).
- * Mirrors the route regex in src/routes.jsx.
+ * Mirrors the route regex in src/routes.jsx — strips `.folder/` segments,
+ * `drafts/` segments (scratch dirs share the public URL of their non-draft
+ * sibling), and trailing file extension.
  */
 function prototypeRoute(relPath) {
   let route = relPath
     .replace(/[^/]*\.folder\//g, '')
+    .split('/')
+    .filter((seg) => seg !== 'drafts')
+    .join('/')
     .replace(/\.(jsx|tsx|mdx)$/, '')
     .replace(/\/index$/, '')
 
@@ -92,12 +97,14 @@ function prototypeRoute(relPath) {
 
 /**
  * Compute the route path for a canvas file (relative to src/canvas/).
- * Uses toCanvasId() for proper folder handling.
+ * Uses toCanvasId() for proper folder handling, then strips `drafts/`
+ * segments so moves in/out of `drafts/` are no-ops.
  */
 function canvasRoute(relPath) {
   // relPath is relative to src/canvas/, prepend prefix for toCanvasId()
   const canvasId = toCanvasId('src/canvas/' + relPath)
-  return '/canvas/' + canvasId
+  const stripped = canvasId.split('/').filter((seg) => seg !== 'drafts').join('/')
+  return '/canvas/' + stripped
 }
 
 function computeRoute(relPath, watchType) {

package/src/internals/Viewfinder.jsx

@@ -6,9 +6,10 @@
  */
 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 { 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 '@primer/react'
 import Icon from './Icon.jsx'
 import { useBranches } from './BranchBar/useBranches.js'
 import css from './Viewfinder.module.css'
@@ -467,9 +468,23 @@ function ArtifactCard({ item, basePath, starred, onToggleStar, onItemDeleted })
 
   return (
     <>
-      <Tag className={css.card} {...linkProps} onClick={handleClick}>
+      <Tag className={`${css.card}${item.isPrivate ? ' ' + css.cardPrivate : ''}`} {...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>
+            {item.isPrivate && (
+              <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} />}
@@ -609,8 +624,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>
             ))}
@@ -624,17 +643,36 @@ function PagesDropdown({ pages, basePath }) {
 /* ─── Folder Section ─── */
 
 function FolderSection({ folder, collapsed, onToggle, basePath, 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 => (
@@ -1164,6 +1202,7 @@ function WorkspaceImpl({
         folder: proto.folder,
         description: proto.description,
         flows: proto.flows || [],
+        isPrivate: !!proto.isPrivate,
       })
     }
 
@@ -1187,6 +1226,7 @@ function WorkspaceImpl({
         folder: canvas.folder,
         description: canvas.description,
         pages: canvas.pages || null,
+        isPrivate: !!canvas.isPrivate,
       })
     }
 
@@ -1200,9 +1240,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 +1253,7 @@ function WorkspaceImpl({
         externalUrl: null,
         folder: null,
         description: null,
+        isPrivate: !!data._isPrivate || name.split('/').includes('drafts'),
       })
     }
 
@@ -1298,6 +1340,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) => {

package/src/internals/Viewfinder.module.css

@@ -637,6 +637,14 @@
   color: inherit;
 }
 
+.cardPrivate {
+  opacity: 0.8;
+}
+
+.cardPrivate:hover {
+  opacity: 1;
+}
+
 .cardThumb {
   height: 140px;
   background: var(--bgColor-muted, #f5f5f5);
@@ -658,6 +666,22 @@
   color: var(--fgColor-muted, #555);
 }
 
+.cardPrivateBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fgColor-muted, #656d76);
+  background: none;
+  border: none;
+  padding: 2px;
+}
+
+.cardBadgeGroup {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
 /* Icon buttons (star, flows, etc.) */
 
 .iconBtn {
@@ -1031,6 +1055,25 @@
   flex: 1;
 }
 
+.folderSectionPrivate {
+  opacity: 0.8;
+}
+
+.folderSectionPrivate:hover {
+  opacity: 1;
+}
+
+.folderPrivateBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fgColor-muted, #656d76);
+  background: none;
+  border: none;
+  padding: 2px;
+  margin-right: 6px;
+}
+
 .folderCount {
   font-size: 14px;
   font-weight: 400;
@@ -1114,11 +1157,19 @@
 }
 
 .flowsItemLink {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 6px;
   color: inherit;
   text-decoration: none;
 }
 
+.flowsItemPrivateIcon {
+  color: var(--fgColor-muted, #656d76);
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
 /* Avatar stack */
 
 .avatarStack {

package/src/internals/canvas/PageSelector.jsx

@@ -497,11 +497,25 @@ export default function PageSelector({ currentName, pages: initialPages, isLocal
                 ) : (
                   <a
                     href={getPageHref(page)}
-                    className={styles.itemLink}
+                    className={`${styles.itemLink} ${page.isPrivate ? styles.itemPrivate : ''}`}
                     onClick={(e) => handleItemClick(page, e)}
                     onDoubleClick={(e) => e.stopPropagation()}
+                    title={page.isPrivate ? 'Local-only page — gitignored, dev-only' : undefined}
                   >
                     <span className={styles.itemContent}>{page.title}</span>
+                    {page.isPrivate && (
+                      <svg
+                        className={styles.privateIcon}
+                        width="14"
+                        height="14"
+                        viewBox="0 0 16 16"
+                        fill="currentColor"
+                        aria-hidden="true"
+                      >
+                        <path d="M.143 2.31a.75.75 0 0 1 1.047-.167l14.5 10.5a.75.75 0 1 1-.88 1.214l-2.248-1.628C11.346 13.19 9.792 14 8 14c-1.981 0-3.67-.992-4.933-2.078C1.797 10.832.88 9.577.43 8.9a1.62 1.62 0 0 1 0-1.797c.353-.533 1.068-1.495 2.062-2.42L.31 3.357A.75.75 0 0 1 .143 2.31Zm1.536 5.622A.12.12 0 0 0 1.659 8c0 .021.006.045.02.068.387.582 1.211 1.703 2.31 2.646C5.1 11.668 6.42 12.5 8 12.5c1.286 0 2.413-.55 3.359-1.252L9.81 10.13a2.5 2.5 0 0 1-3.498-3.498L4.388 5.226c-1.014.91-1.749 1.886-2.108 2.426Zm6.728 1.42-1.668-1.208a1 1 0 0 0 1.36 1.207Z" />
+                        <path d="M8 3.5c-.387 0-.74.057-1.063.145L5.793 2.503A7.84 7.84 0 0 1 8 2.207c1.981 0 3.67.992 4.933 2.078 1.27 1.09 2.187 2.345 2.637 3.022a1.62 1.62 0 0 1 0 1.795c-.247.371-.622.86-1.118 1.384L13.39 9.4c.402-.43.706-.83.91-1.137a.121.121 0 0 0 .012-.022.122.122 0 0 0-.012-.023c-.387-.582-1.211-1.703-2.31-2.646C10.9 4.733 9.58 3.9 8 3.9Zm.482 2.067-.044-.011a.748.748 0 0 0 .044.011Zm-.482 0c-.272 0-.5.228-.5.5 0 .272.228.5.5.5h.022l1.024.741A2.5 2.5 0 0 0 8 5.5Z" />
+                      </svg>
+                    )}
                   </a>
                 )}
                 {!isEditing && isLocalDev && (

package/src/internals/canvas/PageSelector.module.css

@@ -166,6 +166,20 @@
   background: var(--bgColor-accent-muted, #ddf4ff);
 }
 
+.itemPrivate {
+  opacity: 0.55;
+}
+
+.itemPrivate:hover {
+  opacity: 1;
+}
+
+.privateIcon {
+  color: var(--fgColor-muted, #656d76);
+  flex-shrink: 0;
+  margin-left: 4px;
+}
+
 .separator {
   height: 1px;
   background: var(--borderColor-default, rgba(0, 0, 0, 0.15));

package/src/internals/canvas/widgets/FrozenTerminalOverlay.jsx

@@ -48,32 +48,41 @@ export default function FrozenTerminalOverlay({ widgetId, onActivate }) {
 
     async function fetchSnapshot() {
       const baseUrl = getBaseUrl()
-      const urls = [
-        `${baseUrl}_storyboard/canvas/terminal-snapshot/${widgetId}`,
-        `${baseUrl}_storyboard/terminal-snapshots/${widgetId}.snapshot.json`,
-      ]
-
-      for (const url of urls) {
-        try {
-          const res = await fetch(url)
-          if (!res.ok) continue
+      // Try the dev-server REST endpoint first, then fall back to the static
+      // consolidated index (production builds / no server).
+      const restUrl = `${baseUrl}_storyboard/canvas/terminal-snapshot/${widgetId}`
+      const indexUrl = `${baseUrl}_storyboard/terminal-snapshots/agents.snapshot.json`
+
+      try {
+        const res = await fetch(restUrl)
+        if (res.ok) {
           const data = await res.json()
           if (cancelled) return
           const text = data.paneContent || data.content || data.output || ''
-          if (!text) continue
-
-          const converter = await getConverter()
-          if (cancelled) return
-          if (converter) {
-            setHtml(converter.toHtml(text))
-          } else {
-            setPlainText(stripAnsi(text))
+          if (text) {
+            const converter = await getConverter()
+            if (cancelled) return
+            if (converter) setHtml(converter.toHtml(text))
+            else setPlainText(stripAnsi(text))
+            return
           }
-          return
-        } catch {
-          continue
         }
-      }
+      } catch { /* fall through to static index */ }
+
+      try {
+        const res = await fetch(indexUrl)
+        if (!res.ok) return
+        const data = await res.json()
+        if (cancelled) return
+        const entry = data?.agents?.[widgetId]
+        if (!entry) return
+        const text = entry.paneContent || entry.content || entry.output || ''
+        if (!text) return
+        const converter = await getConverter()
+        if (cancelled) return
+        if (converter) setHtml(converter.toHtml(text))
+        else setPlainText(stripAnsi(text))
+      } catch { /* empty */ }
     }
 
     fetchSnapshot()

package/src/internals/canvas/widgets/PrototypeEmbed.jsx

@@ -54,13 +54,41 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
 
   const basePath = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
   const baseSegment = basePath.replace(/^\//, '')
+  // Internal prototype iframes load the isolated prototypes.html entry
+  // (see .agents/plans/vite-isolation.md). prototypes.html uses
+  // createHashRouter so the prototype route lives in the URL hash —
+  // any path /MyProto/SignupForm becomes prototypes.html#/MyProto/SignupForm.
+  // External http(s) URLs are left alone.
   const rawSrc = useMemo(() => {
     if (!src) return ''
     if (/^https?:\/\//.test(src)) return src
     const cleaned = src.replace(/^\/branch--[^/]+/, '')
-    if (baseSegment && cleaned.startsWith(basePath)) return cleaned
-    if (baseSegment && cleaned.startsWith(baseSegment)) return `/${cleaned}`
-    return `${basePath}${cleaned}`
+    let normalized
+    if (baseSegment && cleaned.startsWith(basePath)) normalized = cleaned
+    else if (baseSegment && cleaned.startsWith(baseSegment)) normalized = `/${cleaned}`
+    else normalized = `${basePath}${cleaned}`
+    // Strip basePath so we can split path/query/hash and re-anchor on
+    // prototypes.html. Any pre-existing #hash on the prototype URL is
+    // preserved by appending it after the route hash with an extra `#`,
+    // so the inner router still parses /MyProto correctly.
+    const withoutBase = baseSegment && normalized.startsWith(basePath)
+      ? normalized.slice(basePath.length) || '/'
+      : normalized
+    const hashIdx = withoutBase.indexOf('#')
+    const innerHash = hashIdx >= 0 ? withoutBase.slice(hashIdx + 1) : ''
+    const pathAndQuery = hashIdx >= 0 ? withoutBase.slice(0, hashIdx) : withoutBase
+    const routeHash = pathAndQuery.startsWith('/') ? pathAndQuery : `/${pathAndQuery}`
+    const suffix = innerHash ? `#${innerHash}` : ''
+    // Extract the prototype name (first path segment) so the dev iframe can
+    // narrow its router to just that prototype's subtree — broken siblings
+    // never appear in the matched lazy() chain. The consumer's
+    // prototypes-entry.jsx reads ?proto= and calls getRoutesForProto(); if
+    // it doesn't (older scaffold), the param is harmlessly ignored and the
+    // full route tree loads. Prod builds skip the param entirely.
+    const pathOnly = pathAndQuery.split('?')[0]
+    const protoName = pathOnly.split('/').filter(Boolean)[0] || ''
+    const queryStr = (import.meta.env.DEV && protoName) ? `?proto=${encodeURIComponent(protoName)}` : ''
+    return `${basePath}/prototypes.html${queryStr}#${routeHash}${suffix}`
   }, [src, basePath, baseSegment])
 
   const scale = zoom / 100

package/src/internals/canvas/widgets/StorySetWidget.jsx

@@ -31,11 +31,23 @@ function resolveStorySetUrl(storyId, layout, selected, density, theme) {
   const story = getStoryData(storyId)
   if (!story?._storyModule) return ''
   const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
+
+  // In dev, prefer the dedicated isolate-set middleware: it serves a
+  // minimal HTML shell + dynamic-imports just this one story module, so a
+  // broken story cannot poison the canvas SPA's module graph. The
+  // middleware doesn't exist in deployed builds, so production falls
+  // through to the real story page with `_sb_component_set`.
+  if (import.meta.env.DEV) {
+    const params = new URLSearchParams()
+    params.set('module', story._storyModule)
+    if (layout) params.set('layout', layout)
+    if (selected) params.set('selected', selected)
+    if (density) params.set('density', density)
+    if (theme) params.set('theme', theme)
+    return `${base}/_storyboard/canvas/isolate-set?${params}`
+  }
+
   const params = new URLSearchParams()
-  // Route via the real story page (works in dev AND prod). The dev-only
-  // `_storyboard/canvas/isolate-set` middleware doesn't exist in deployed
-  // builds, so we mount ComponentSetPage at the story's route with
-  // `_sb_component_set` instead. `_sb_embed` keeps the canvas chrome off.
   params.set('_sb_embed', '')
   params.set('_sb_component_set', '')
   if (layout) params.set('layout', layout)

package/src/internals/canvas/widgets/TerminalReadWidget.jsx

@@ -55,26 +55,24 @@ export default function TerminalReadWidget({ id, props }) {
       const canvasId = getCanvasId()
       if (!canvasId) { setFailed(true); return }
 
-      const urls = isProduction()
-        ? [
-            // New flat format: <widgetId>.snapshot.json
-            `${baseUrl}_storyboard/terminal-snapshots/${id}.snapshot.json`,
-            // Legacy nested format: <canvasDir>/<widgetId>.json
-            `${baseUrl}_storyboard/terminal-snapshots/${canvasId.replace(/\//g, '--')}/${id}.json`,
-          ]
-        : [
-            `${baseUrl}_storyboard/canvas/terminal-snapshot/${id}`,
-            `${baseUrl}_storyboard/terminal-snapshots/${id}.snapshot.json`,
-            `${baseUrl}_storyboard/terminal-snapshots/${canvasId.replace(/\//g, '--')}/${id}.json`,
-          ]
-
-      for (const url of urls) {
+      const indexUrl = `${baseUrl}_storyboard/terminal-snapshots/agents.snapshot.json`
+      const legacyUrl = `${baseUrl}_storyboard/terminal-snapshots/${canvasId.replace(/\//g, '--')}/${id}.json`
+      const restUrl = `${baseUrl}_storyboard/canvas/terminal-snapshot/${id}`
+
+      const tryUrls = isProduction()
+        ? [{ url: indexUrl, fromIndex: true }, { url: legacyUrl, fromIndex: false }]
+        : [{ url: restUrl, fromIndex: false }, { url: indexUrl, fromIndex: true }, { url: legacyUrl, fromIndex: false }]
+
+      for (const { url, fromIndex } of tryUrls) {
         try {
           const res = await fetch(url)
           if (!res.ok) continue
           const data = await res.json()
           if (cancelled) return
-          const text = data.paneContent || data.content || data.output || ''
+          const entry = fromIndex ? data?.agents?.[id] : data
+          if (!entry) continue
+          const text = entry.paneContent || entry.content || entry.output || ''
+          if (!text) continue
           setContent(text)
 
           const converter = await getConverter()

package/src/internals/canvas/widgets/WidgetChrome.module.css

@@ -149,6 +149,21 @@
   top: calc(100% + 10px);
 }
 
+/* Invisible hit-area that bridges the 10px gap between the widget and the
+   toolbar. Keeps the parent .chromeContainer in :hover (and React mouseenter)
+   when the pointer crosses the padding, and — crucially — stops the pointer
+   from falling through to widgets stacked underneath, so the toolbar of an
+   overlapping widget on top stays interactive. */
+.toolbar::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 100%;
+  height: 10px;
+  pointer-events: auto;
+}
+
 /* Trigger dot — positioned in the toolbar, visible at rest */
 .triggerDot {
   width: 6px;

package/src/internals/context.jsx

@@ -70,6 +70,7 @@ function getCanvasGroupMap() {
       name,
       route,
       title: data?.title || name.split('/').pop(),
+      isPrivate: !!data?._isPrivate,
       _canvasMeta: data?._canvasMeta || null,
     })
   }
@@ -428,7 +429,7 @@ function StoryboardProviderInner({ flowName, sceneName, recordName, recordParam,
     const _hmrTick = canvasIndexKey
     const siblingPages = group
       ? getCanvasGroupMap().get(group) || []
-      : [{ name: canvasId, route: canvasData?._route || `/canvas/${canvasId}`, title: canvasData?.title || canvasId.split('/').pop() }]
+      : [{ name: canvasId, route: canvasData?._route || `/canvas/${canvasId}`, title: canvasData?.title || canvasId.split('/').pop(), isPrivate: !!canvasData?._isPrivate }]
     const canvasMeta = canvasData?._canvasMeta || null
     const canvasValue = {
       data: null,