@dfosco/storyboard 0.6.3 → 0.6.5

package/src/core/data/viewfinder.js

@@ -133,6 +133,8 @@ export function buildPrototypeIndex(knownRoutes = []) {
     const raw = getPrototypeMetadata(name)
     const meta = raw?.meta || raw || {}
     const isExternal = Boolean(raw?.url)
+    const folder = raw?.folder || null
+    const isPrivate = raw?._isPrivate || false
     protoMap[name] = {
       name: meta.title || name,
       dirName: name,
@@ -144,9 +146,10 @@ export function buildPrototypeIndex(knownRoutes = []) {
       team: meta.team || null,
       tags: meta.tags || null,
       hideFlows: meta.hideFlows ?? raw?.hideFlows ?? true,
-      folder: raw?.folder || null,
+      folder,
       isExternal,
       externalUrl: isExternal ? raw.url : null,
+      isPrivate,
       flows: [],
     }
   }
@@ -202,6 +205,7 @@ export function buildPrototypeIndex(knownRoutes = []) {
       dirName: folderName,
       description: meta.description || null,
       icon: meta.icon || null,
+      isPrivate: !!raw?._isPrivate,
       prototypes: [],
     }
   }
@@ -218,6 +222,7 @@ export function buildPrototypeIndex(knownRoutes = []) {
         dirName: proto.folder,
         description: null,
         icon: null,
+        isPrivate: false,
         prototypes: [proto],
       }
     } else {
@@ -243,25 +248,56 @@ export function buildPrototypeIndex(knownRoutes = []) {
     const pageName = data.title || toTitleCase(fileSegment)
 
     const pageEntry = {
+      id: canvasId,
       name: pageName,
       route: data._route || `/canvas/${canvasId}`,
+      isPrivate: !!data._isPrivate,
     }
 
     // If this canvas belongs to a group we've already seen, add as a page
     if (group && seenGroups.has(group)) {
       const idx = seenGroups.get(group)
-      if (!canvasEntries[idx].pages) {
+      const existing = canvasEntries[idx]
+      if (!existing.pages) {
         // Retroactively add the first page
-        const firstId = canvasEntries[idx].dirName
+        const firstId = existing.dirName
         const firstData = getCanvasData(firstId)
         const firstSegment = firstId.split('/').pop()
         const firstName = firstData?.title || toTitleCase(firstSegment)
-        canvasEntries[idx].pages = [{ name: firstName, route: canvasEntries[idx].route }]
+        existing.pages = [{
+          id: firstId,
+          name: firstName,
+          route: existing.route,
+          isPrivate: !!firstData?._isPrivate,
+        }]
       }
-      canvasEntries[idx].pages.push(pageEntry)
+      // If the existing card is private but this incoming page is public,
+      // promote the public page to be the card's public face. The private
+      // sibling stays as one of the group's pages (with its eye-off icon
+      // in the dropdown). Without this swap, the workspace card would
+      // inherit the title + privacy of whichever page happened to come
+      // first in iteration order.
+      const incomingIsPrivate = !!data._isPrivate || canvasId.split('/').includes('drafts')
+      if (existing.isPrivate && !incomingIsPrivate) {
+        existing.name = meta?.title || data.title || canvasId
+        existing.dirName = canvasId
+        existing.description = meta?.description || data.description || null
+        existing.route = data._route || `/canvas/${canvasId}`
+        existing.folder = data._folder || existing.folder
+        existing.isPrivate = false
+        existing.author = meta?.author || data.author || existing.author
+        existing.gitAuthor = data.gitAuthor || existing.gitAuthor
+        existing._canvasMeta = meta || existing._canvasMeta
+      }
+      existing.pages.push(pageEntry)
       continue
     }
 
+    // Canvas is "private" when its parsed data carries _isPrivate (from the
+    // data plugin) or — fallback — when its canonical ID contains a `drafts`
+    // path segment.
+    const isPrivate = data._isPrivate
+      || canvasId.split('/').includes('drafts')
     const entry = {
       name: meta?.title || data.title || canvasId,
       dirName: canvasId,
@@ -269,6 +305,7 @@ export function buildPrototypeIndex(knownRoutes = []) {
       route: data._route || `/canvas/${canvasId}`,
       folder: data._folder || null,
       isCanvas: true,
+      isPrivate,
       author: meta?.author || data.author || null,
       gitAuthor: data.gitAuthor || null,
       _canvasMeta: meta || null,
@@ -287,8 +324,10 @@ export function buildPrototypeIndex(knownRoutes = []) {
       if (key) orderMap.set(key, idx)
     })
     entry.pages.sort((a, b) => {
-      const aIdx = orderMap.has(a.name) ? orderMap.get(a.name) : Infinity
-      const bIdx = orderMap.has(b.name) ? orderMap.get(b.name) : Infinity
+      const aKey = a.id ?? a.name
+      const bKey = b.id ?? b.name
+      const aIdx = orderMap.has(aKey) ? orderMap.get(aKey) : Infinity
+      const bIdx = orderMap.has(bKey) ? orderMap.get(bKey) : Infinity
       return aIdx - bIdx
     })
   }
@@ -305,6 +344,7 @@ export function buildPrototypeIndex(knownRoutes = []) {
           dirName: canvas.folder,
           description: null,
           icon: null,
+          isPrivate: false,
           prototypes: [],
           canvases: [canvas],
         }

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) => {
@@ -1357,7 +1400,13 @@ 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>
+          <img
+            src={`${basePath || '/'}favicon.svg`}
+            alt=""
+            width={48}
+            height={48}
+            className={css.logo}
+          />
           <div>
             <div className={css.appName}>{title}</div>
             {subtitle && <div className={css.appSubtitle}>{subtitle}</div>}

package/src/internals/Viewfinder.module.css

@@ -30,13 +30,8 @@
 .logo {
   width: 48px;
   height: 48px;
-  background: var(--bgColor-emphasis, #313131);
-  border-radius: 8px;
   transform: rotate(-1deg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--fgColor-onEmphasis, #fff);
+  display: block;
   flex-shrink: 0;
 }
 
@@ -642,6 +637,14 @@
   color: inherit;
 }
 
+.cardPrivate {
+  opacity: 0.8;
+}
+
+.cardPrivate:hover {
+  opacity: 1;
+}
+
 .cardThumb {
   height: 140px;
   background: var(--bgColor-muted, #f5f5f5);
@@ -663,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 {
@@ -1036,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;
@@ -1119,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/CanvasPage.jsx

@@ -1636,6 +1636,15 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
             : [],
           createdAt: snapshot.createdAt ?? null,
           updatedAt: snapshot.updatedAt ?? null,
+          // PR-specific metadata (state, branches, diff stats)
+          state: snapshot.state ?? null,
+          merged: typeof snapshot.merged === 'boolean' ? snapshot.merged : null,
+          draft: typeof snapshot.draft === 'boolean' ? snapshot.draft : null,
+          baseRef: typeof snapshot.baseRef === 'string' ? snapshot.baseRef : null,
+          headRef: typeof snapshot.headRef === 'string' ? snapshot.headRef : null,
+          additions: typeof snapshot.additions === 'number' ? snapshot.additions : null,
+          deletions: typeof snapshot.deletions === 'number' ? snapshot.deletions : null,
+          changedFiles: typeof snapshot.changedFiles === 'number' ? snapshot.changedFiles : null,
           fetchedAt: new Date().toISOString(),
         },
       }

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/LinkPreview.module.css

@@ -599,8 +599,8 @@
 .prStateBadge {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 3px 8px;
+  gap: 6px;
+  padding: 5px 10px 5px 9px;
   border-radius: 2em;
   font-size: 12px;
   font-weight: 500;

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()