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

package/src/story/ComponentSetPage.module.css

@@ -0,0 +1,121 @@
+/* ComponentSetPage — grid layout for all exports of a story */
+
+.grid {
+  background-color: var(--bgColor-muted, #f6f8fa);
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 12px;
+  padding: 12px;
+  min-height: 100vh;
+  width: max-content;
+  min-width: 100%;
+  box-sizing: border-box;
+}
+
+.grid[data-layout="horizontal"] {
+  flex-direction: row;
+}
+
+.grid[data-layout="vertical"] {
+  flex-direction: column;
+}
+
+.cell {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  border: 2px solid var(--borderColor-muted, #d8dee4);
+  border-radius: 2px;
+  overflow: hidden;
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+  position: relative;
+  background: var(--bgColor-default, #ffffff);
+}
+
+/* In horizontal layout, each cell snaps to the widest component */
+.grid[data-layout="horizontal"] .cell {
+  min-width: var(--cell-snap-w, 200px);
+}
+
+/* In vertical layout, each cell snaps to the tallest component */
+.grid[data-layout="vertical"] .cell {
+  min-height: var(--cell-snap-h, 120px);
+  min-width: 100%;
+}
+
+.cell[data-selected] {
+  border-color: var(--fgColor-accent, #0969da);
+  box-shadow: 0 0 0 1px var(--fgColor-accent, #0969da);
+}
+
+.cellLabel {
+  all: unset;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--fgColor-muted, #656d76);
+  background: var(--bgColor-muted, #f6f8fa);
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  cursor: pointer;
+  user-select: none;
+  transition: background 100ms ease, color 100ms ease;
+  flex-shrink: 0;
+  /* Round top corners to match cell */
+  border-radius: 6px 6px 0 0;
+}
+
+.cellLabel:hover {
+  background: var(--bgColor-neutral-muted, #eaeef2);
+  color: var(--fgColor-default, #1f2328);
+}
+
+.cellLabel[data-selected] {
+  color: var(--fgColor-accent, #0969da);
+  background: var(--bgColor-accent-muted, #ddf4ff);
+}
+
+.cellRadio {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid var(--borderColor-accent, #d8dee4);
+  flex-shrink: 0;
+  transition: border-color 100ms ease, background 100ms ease;
+}
+
+.cellRadio[data-selected] {
+  border-color: var(--fgColor-accent, #0969da);
+  background: var(--fgColor-accent, #0969da);
+}
+
+.cellContent {
+  flex: 1;
+  overflow: visible;
+  position: relative;
+}
+
+.error {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 1rem;
+  color: var(--fgColor-danger, #cf222e);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  color: var(--fgColor-muted, #656d76);
+  font-size: 0.875rem;
+}

package/src/story/StoryPage.jsx

@@ -5,12 +5,14 @@
  * When ?export=ExportName is present, renders that single export.
  * Without ?export, renders all named exports stacked.
  */
-import { useState, useEffect, useMemo } from 'react'
+import { useState, useEffect, useMemo, lazy, Suspense } from 'react'
 import { useLocation } from 'react-router-dom'
 import { getStoryData } from '@dfosco/storyboard-core'
 import { ThemeProvider, BaseStyles } from '@primer/react'
 import styles from './StoryPage.module.css'
 
+const ComponentSetPageLazy = lazy(() => import('./ComponentSetPage.jsx'))
+
 function StoryErrorFallback({ name, error }) {
   return (
     <div className={styles.error}>
@@ -25,12 +27,31 @@ export default function StoryPage({ name }) {
   const searchParams = new URLSearchParams(location.search)
   const exportFilter = searchParams.get('export')
   const isEmbed = searchParams.has('_sb_embed')
+  const isComponentSet = searchParams.has('_sb_component_set')
+
+  // When embedded as a canvas iframe, suppress HMR full-reloads.
+  // Story content updates via React Fast Refresh; a full-reload
+  // causes a visible flash and can create a reload loop when
+  // multiple story iframes are on the same canvas.
+  useEffect(() => {
+    if (!isEmbed || !import.meta.hot) return
+    const msg = { active: true }
+    import.meta.hot.send('storyboard:canvas-hmr-guard', msg)
+    const interval = setInterval(() => {
+      import.meta.hot.send('storyboard:canvas-hmr-guard', msg)
+    }, 3000)
+    return () => {
+      clearInterval(interval)
+      import.meta.hot.send('storyboard:canvas-hmr-guard', { active: false })
+    }
+  }, [isEmbed])
 
   const story = useMemo(() => getStoryData(name), [name])
   const [exports, setExports] = useState(null)
   const [error, setError] = useState(null)
 
   useEffect(() => {
+    if (isComponentSet) return
     if (!story?._storyImport) {
       Promise.resolve().then(() => setError(`Story "${name}" not found or missing import`))
       return
@@ -55,7 +76,7 @@ export default function StoryPage({ name }) {
       })
 
     return () => { cancelled = true }
-  }, [name, story])
+  }, [name, story, isComponentSet])
 
   // Signal snapshot-ready after story renders in embed mode.
   useEffect(() => {
@@ -67,6 +88,15 @@ export default function StoryPage({ name }) {
     })
   }, [isEmbed, exports])
 
+  // Delegate to ComponentSetPage for grid view (after all hooks)
+  if (isComponentSet) {
+    return (
+      <Suspense fallback={isEmbed ? null : <div className={styles.loading}>Loading component set…</div>}>
+        <ComponentSetPageLazy name={name} />
+      </Suspense>
+    )
+  }
+
   if (error) {
     return (
       <StoryErrorFallback name={name} error={error} />

package/src/vite/data-plugin.js

@@ -5,7 +5,9 @@ import { globSync } from 'glob'
 import { parse as parseJsonc } from 'jsonc-parser'
 import { materializeFromText } from '@dfosco/storyboard-core/canvas/materializer'
 import { toCanvasId } from '@dfosco/storyboard-core/canvas/identity'
+import { isCanvasWriteInFlight } from '../../../core/src/canvas/writeGuard.js'
 import { getConfig } from '@dfosco/storyboard-core/config'
+import { list as listRunningServers } from '../../../core/src/worktree/serverRegistry.js'
 
 const VIRTUAL_MODULE_ID = 'virtual:storyboard-data-index'
 const RESOLVED_ID = '\0' + VIRTUAL_MODULE_ID
@@ -1153,14 +1155,20 @@ export default function storyboardDataPlugin() {
         // custom HMR event with updated metadata so the canvas page and
         // viewfinder can react in place.
         if (/\.canvas\.jsonl$/.test(normalized)) {
-          const parsed = parseDataFile(filePath)
-          if (parsed?.suffix === 'canvas' && parsed?.id) {
-            const metadata = readCanvasMetadata(filePath, parsed)
-            server.ws.send({
-              type: 'custom',
-              event: 'storyboard:canvas-file-changed',
-              data: { canvasId: parsed.id, name: parsed.id, ...(metadata ? { metadata } : {}) },
-            })
+          // If this file change was caused by the canvas server API, it has
+          // already pushed an HMR event via pushCanvasUpdate(). Skip the
+          // duplicate watcher-triggered event to prevent stale-data rollbacks.
+          const absPath = path.resolve(root, filePath)
+          if (!isCanvasWriteInFlight(absPath)) {
+            const parsed = parseDataFile(filePath)
+            if (parsed?.suffix === 'canvas' && parsed?.id) {
+              const metadata = readCanvasMetadata(filePath, parsed)
+              server.ws.send({
+                type: 'custom',
+                event: 'storyboard:canvas-file-changed',
+                data: { canvasId: parsed.id, name: parsed.id, ...(metadata ? { metadata } : {}) },
+              })
+            }
           }
           softInvalidate()
           return
@@ -1197,6 +1205,17 @@ export default function storyboardDataPlugin() {
         // Source files inside .folder/ dirs (jsx, css, etc.) are handled by
         // Vite's built-in HMR / React Fast Refresh — don't full-reload for them.
         if (!parsed && inFolder) return
+
+        // Story file content changes are handled by Vite's built-in HMR
+        // (React Fast Refresh). Only soft-invalidate the virtual module so
+        // the next page load picks up updated metadata — don't full-reload,
+        // which would destroy canvas state and cause embedded iframes to
+        // reload unnecessarily.
+        if (parsed?.suffix === 'story') {
+          softInvalidate()
+          return
+        }
+
         // Rebuild index and invalidate virtual module
         buildResult = null
         const mod = server.moduleGraph.getModuleById(RESOLVED_ID)
@@ -1345,19 +1364,16 @@ export default function storyboardDataPlugin() {
     },
 
     // Inject __SB_BRANCHES__ into HTML so the Viewfinder branch selector works.
-    // Reads .worktrees/ports.json to enumerate active worktree dev servers.
+    // Uses server registry (live running processes) instead of stale ports.json.
     transformIndexHtml(html, ctx) {
       // Only inject in dev mode
       if (!ctx.server) return html
 
       try {
-        const portsJsonPath = path.resolve(root, '.worktrees', 'ports.json')
-        if (!fs.existsSync(portsJsonPath)) return html
-
-        const ports = JSON.parse(fs.readFileSync(portsJsonPath, 'utf-8'))
-        const branches = Object.entries(ports)
-          .filter(([name]) => name !== 'main')
-          .map(([name, port]) => ({ branch: name, folder: `branch--${name}`, port }))
+        const servers = listRunningServers()
+        const branches = servers
+          .filter(srv => srv.worktree !== 'main')
+          .map(srv => ({ branch: srv.worktree, folder: `branch--${srv.worktree}`, port: srv.port }))
 
         if (branches.length === 0) return html
 
@@ -1376,34 +1392,62 @@ export default function storyboardDataPlugin() {
 }
 
 /**
- * Vite plugin that copies `.storyboard/terminal-snapshots/` into the build
- * output so TerminalReadWidget can fetch them as static files in production.
+ * Vite plugin that copies terminal snapshots into the build output
+ * so TerminalReadWidget can fetch them as static files in production.
+ *
+ * Sources (in priority order):
+ *   1. assets/.storyboard-public/terminal-snapshots/<widgetId>.snapshot.json (new, flat)
+ *   2. .storyboard/terminal-snapshots/<canvasDir>/<widgetId>.json (legacy, nested)
+ *
+ * Both are emitted to `_storyboard/terminal-snapshots/` in the build.
+ * Tilde-prefixed files (~) are excluded (private).
  */
 export function terminalSnapshotPlugin() {
   return {
     name: 'storyboard-terminal-snapshots',
 
     generateBundle() {
-      const snapshotsDir = path.resolve('.storyboard/terminal-snapshots')
-      if (!fs.existsSync(snapshotsDir)) return
-
-      const walk = (dir) => {
-        const entries = fs.readdirSync(dir, { withFileTypes: true })
-        for (const entry of entries) {
-          const full = path.join(dir, entry.name)
-          if (entry.isDirectory()) {
-            walk(full)
-          } else if (entry.name.endsWith('.json')) {
-            const rel = path.relative(snapshotsDir, full).replace(/\\/g, '/')
-            this.emitFile({
-              type: 'asset',
-              fileName: `_storyboard/terminal-snapshots/${rel}`,
-              source: fs.readFileSync(full, 'utf-8'),
-            })
+      const emittedIds = new Set()
+
+      // 1. New public snapshots (flat structure)
+      const publicDir = path.resolve('assets/.storyboard-public/terminal-snapshots')
+      if (fs.existsSync(publicDir)) {
+        for (const file of fs.readdirSync(publicDir)) {
+          if (file.startsWith('~') || file.startsWith('.') || !file.endsWith('.json')) continue
+          // Extract widgetId from filename: <widgetId>.snapshot.json
+          const widgetId = file.replace(/\.snapshot\.json$/, '')
+          if (widgetId) emittedIds.add(widgetId)
+          this.emitFile({
+            type: 'asset',
+            fileName: `_storyboard/terminal-snapshots/${file}`,
+            source: fs.readFileSync(path.join(publicDir, file), 'utf-8'),
+          })
+        }
+      }
+
+      // 2. Legacy snapshots (nested by canvas dir) — skip if already emitted
+      const legacyDir = path.resolve('.storyboard/terminal-snapshots')
+      if (fs.existsSync(legacyDir)) {
+        const walk = (dir) => {
+          const entries = fs.readdirSync(dir, { withFileTypes: true })
+          for (const entry of entries) {
+            const full = path.join(dir, entry.name)
+            if (entry.isDirectory()) {
+              walk(full)
+            } else if (entry.name.endsWith('.json') && !entry.name.startsWith('~')) {
+              const widgetId = entry.name.replace(/\.json$/, '')
+              if (emittedIds.has(widgetId)) continue // new format takes priority
+              const rel = path.relative(legacyDir, full).replace(/\\/g, '/')
+              this.emitFile({
+                type: 'asset',
+                fileName: `_storyboard/terminal-snapshots/${rel}`,
+                source: fs.readFileSync(full, 'utf-8'),
+              })
+            }
           }
         }
+        walk(legacyDir)
       }
-      walk(snapshotsDir)
     },
   }
 }

package/src/canvas/widgets/ActionWidget.jsx

@@ -1,200 +0,0 @@
-import { useState, useEffect, useCallback, forwardRef, useImperativeHandle } from 'react'
-import { readProp } from './widgetProps.js'
-import { schemas } from './widgetProps.js'
-import ResizeHandle from './ResizeHandle.jsx'
-import styles from './ActionWidget.module.css'
-
-const actionSchema = schemas['action']
-
-/**
- * ActionWidget — a canvas widget that runs a background agent.
- *
- * Displays a "Run" button. When clicked, spawns a headless tmux+copilot
- * session via the /agent/spawn endpoint. Shows status indicators
- * (running/done/error) and allows peeking into errored sessions.
- */
-export default forwardRef(function ActionWidget({ id, props, onUpdate, resizable }, ref) {
-  const width = readProp(props, 'width', actionSchema)
-  const height = readProp(props, 'height', actionSchema)
-  const prompt = readProp(props, 'prompt', actionSchema) || ''
-  const label = readProp(props, 'label', actionSchema) || 'Run Agent'
-
-  const [status, setStatus] = useState('idle') // idle | running | done | error
-  const [message, setMessage] = useState(null)
-
-  useImperativeHandle(ref, () => ({
-    handleAction(actionId) {
-      // ActionWidget doesn't handle expand/split-screen itself
-      return false
-    },
-  }), [])
-
-  // Listen for agent status updates via Vite HMR custom events
-  useEffect(() => {
-    if (!import.meta.hot) return
-
-    const handler = (data) => {
-      if (data.widgetId === id) {
-        setStatus(data.status)
-        setMessage(data.message || null)
-      }
-    }
-
-    import.meta.hot.on('storyboard:agent-status', handler)
-    return () => {
-      // Vite HMR doesn't support removeListener, but cleanup on unmount
-    }
-  }, [id])
-
-  // Poll for status on mount (in case we missed a WS event)
-  useEffect(() => {
-    const base = (typeof import.meta !== 'undefined' && import.meta.env?.BASE_URL) || '/'
-    const baseClean = base.endsWith('/') ? base : base + '/'
-
-    fetch(`${baseClean}_storyboard/canvas/agent/status?widgetId=${id}`)
-      .then((r) => r.json())
-      .then((data) => {
-        if (data.agentStatus?.status) {
-          setStatus(data.agentStatus.status)
-          setMessage(data.agentStatus.message || null)
-        }
-      })
-      .catch(() => {})
-  }, [id])
-
-  const handleRun = useCallback(async () => {
-    if (status === 'running') return
-
-    setStatus('running')
-    setMessage('Spawning agent...')
-
-    const base = (typeof import.meta !== 'undefined' && import.meta.env?.BASE_URL) || '/'
-    const baseClean = base.endsWith('/') ? base : base + '/'
-
-    try {
-      const res = await fetch(`${baseClean}_storyboard/canvas/agent/spawn`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          canvasId: window.__storyboardCanvasBridgeState?.canvasId || 'unknown',
-          widgetId: id,
-          prompt,
-          autopilot: true,
-        }),
-      })
-
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}))
-        setStatus('error')
-        setMessage(data.error || 'Spawn failed')
-      }
-    } catch (err) {
-      setStatus('error')
-      setMessage(err.message || 'Connection failed')
-    }
-  }, [id, prompt, status])
-
-  const handlePeek = useCallback(async () => {
-    const base = (typeof import.meta !== 'undefined' && import.meta.env?.BASE_URL) || '/'
-    const baseClean = base.endsWith('/') ? base : base + '/'
-
-    try {
-      const res = await fetch(`${baseClean}_storyboard/canvas/agent/peek`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          widgetId: id,
-          canvasId: window.__storyboardCanvasBridgeState?.canvasId || 'unknown',
-        }),
-      })
-
-      if (res.ok) {
-        setMessage('Session opened — check the new terminal widget')
-      } else {
-        const data = await res.json().catch(() => ({}))
-        setMessage(data.error || 'Peek failed')
-      }
-    } catch (err) {
-      setMessage(err.message || 'Connection failed')
-    }
-  }, [id])
-
-  const handleDismiss = useCallback(() => {
-    setStatus('idle')
-    setMessage(null)
-  }, [])
-
-  const handleResize = useCallback((w, h) => {
-    onUpdate?.({ width: w, height: h })
-  }, [onUpdate])
-
-  const statusIcon = {
-    idle: '⚡',
-    running: '⏳',
-    done: '✓',
-    error: '!',
-  }
-
-  const statusClass = {
-    idle: styles.idle,
-    running: styles.running,
-    done: styles.done,
-    error: styles.error,
-  }
-
-  return (
-    <div
-      className={`${styles.container} ${statusClass[status] || ''}`}
-      style={{
-        ...(typeof width === 'number' ? { width: `${width}px` } : undefined),
-        ...(typeof height === 'number' ? { height: `${height}px` } : undefined),
-      }}
-    >
-      <div className={styles.header}>
-        <span className={styles.icon}>{statusIcon[status]}</span>
-        <span className={styles.label}>{label}</span>
-      </div>
-
-      {prompt && (
-        <div className={styles.prompt}>
-          {prompt.length > 100 ? prompt.slice(0, 100) + '…' : prompt}
-        </div>
-      )}
-
-      <div className={styles.actions}>
-        {(status === 'idle' || status === 'done') && (
-          <button className={styles.runButton} onClick={handleRun}>
-            {status === 'done' ? 'Run Again' : 'Run'}
-          </button>
-        )}
-
-        {status === 'running' && (
-          <div className={styles.spinner}>Running…</div>
-        )}
-
-        {status === 'error' && (
-          <div className={styles.errorActions}>
-            <button className={styles.peekButton} onClick={handlePeek}>
-              Peek Session
-            </button>
-            <button className={styles.dismissButton} onClick={handleDismiss}>
-              Dismiss
-            </button>
-          </div>
-        )}
-      </div>
-
-      {message && (
-        <div className={styles.message}>{message}</div>
-      )}
-
-      {resizable && (
-        <ResizeHandle
-          onResize={handleResize}
-          minWidth={200}
-          minHeight={120}
-        />
-      )}
-    </div>
-  )
-})

package/src/canvas/widgets/ActionWidget.module.css

@@ -1,122 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 16px;
-  border-radius: 8px;
-  background: var(--bgColor-default, #0d1117);
-  border: 1px solid var(--borderColor-default, #30363d);
-  color: var(--fgColor-default, #e6edf3);
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  overflow: hidden;
-}
-
-.container.running {
-  border-color: var(--borderColor-accent-emphasis, #58a6ff);
-}
-
-.container.done {
-  border-color: var(--borderColor-success-emphasis, #3fb950);
-}
-
-.container.error {
-  border-color: var(--borderColor-danger-emphasis, #f85149);
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.icon {
-  font-size: 16px;
-}
-
-.label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.prompt {
-  color: var(--fgColor-muted, #8b949e);
-  font-size: 12px;
-  line-height: 1.4;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-}
-
-.actions {
-  display: flex;
-  gap: 8px;
-  margin-top: auto;
-}
-
-.runButton {
-  padding: 6px 16px;
-  border-radius: 6px;
-  border: none;
-  background: var(--bgColor-accent-emphasis, #1f6feb);
-  color: #fff;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.runButton:hover {
-  background: var(--bgColor-accent-emphasis, #388bfd);
-}
-
-.spinner {
-  color: var(--fgColor-accent, #58a6ff);
-  font-size: 12px;
-}
-
-.errorActions {
-  display: flex;
-  gap: 8px;
-}
-
-.peekButton {
-  padding: 4px 12px;
-  border-radius: 6px;
-  border: 1px solid var(--borderColor-danger-emphasis, #f85149);
-  background: transparent;
-  color: var(--fgColor-danger, #f85149);
-  font-size: 12px;
-  cursor: pointer;
-}
-
-.peekButton:hover {
-  background: var(--bgColor-danger-muted, rgba(248, 81, 73, 0.1));
-}
-
-.dismissButton {
-  padding: 4px 12px;
-  border-radius: 6px;
-  border: 1px solid var(--borderColor-default, #30363d);
-  background: transparent;
-  color: var(--fgColor-muted, #8b949e);
-  font-size: 12px;
-  cursor: pointer;
-}
-
-.dismissButton:hover {
-  background: var(--bgColor-muted, #161b22);
-}
-
-.message {
-  color: var(--fgColor-muted, #8b949e);
-  font-size: 11px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}