@dfosco/storyboard-react 4.2.4 → 4.2.6

package/src/canvas/widgets/StorySetWidget.jsx

@@ -0,0 +1,208 @@
+/**
+ * StorySetWidget — renders all exports from a story in a single iframe grid.
+ *
+ * Instead of N iframes (one per export), this widget loads one iframe pointing
+ * to the isolate-set endpoint. Each export renders in a grid cell inside
+ * that single page. The user can select a cell (via label click) which updates
+ * `props.selected` — visible to connected agents.
+ *
+ * User-facing label: "Component Set"
+ *
+ * Props: { storyId, layout, selected, width, height }
+ */
+import { forwardRef, useImperativeHandle, useRef, useCallback, useState, useEffect, useMemo } from 'react'
+import { getStoryData } from '@dfosco/storyboard-core'
+import Icon from '../../Icon.jsx'
+import WidgetWrapper from './WidgetWrapper.jsx'
+import ResizeHandle from './ResizeHandle.jsx'
+import { useIframeDevLogs } from './iframeDevLogs.js'
+import styles from './StorySetWidget.module.css'
+import overlayStyles from './embedOverlay.module.css'
+
+function GridIcon({ size = 16 }) {
+  return <Icon name="iconoir/view-grid" size={size} />
+}
+
+function resolveStorySetUrl(storyId, layout, selected) {
+  const story = getStoryData(storyId)
+  if (!story?._storyModule) return ''
+  const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
+  const params = new URLSearchParams()
+  params.set('module', story._storyModule)
+  if (layout) params.set('layout', layout)
+  if (selected) params.set('selected', selected)
+  return `${base}/_storyboard/canvas/isolate-set?${params}`
+}
+
+export default forwardRef(function StorySetWidget({ id: widgetId, props, onUpdate, resizable }, ref) {
+  const storyId = props?.storyId || ''
+  const layout = props?.layout || 'horizontal'
+  const selected = props?.selected || ''
+  const width = props?.width
+  const height = props?.height
+
+  const containerRef = useRef(null)
+  const iframeRef = useRef(null)
+  const [interactive, setInteractive] = useState(false)
+  const [storyIndexKey, setStoryIndexKey] = useState(0)
+
+  // Re-resolve when story index is live-patched
+  useEffect(() => {
+    const handler = () => setStoryIndexKey((k) => k + 1)
+    document.addEventListener('storyboard:story-index-changed', handler)
+    return () => document.removeEventListener('storyboard:story-index-changed', handler)
+  }, [])
+
+  const enterInteractive = useCallback(() => setInteractive(true), [])
+
+  // Exit interactive mode when clicking outside
+  useEffect(() => {
+    if (!interactive) return
+    function handlePointerDown(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        const chromeEl = e.target.closest(`[data-widget-id="${widgetId}"]`)
+        if (chromeEl) return
+        setInteractive(false)
+      }
+    }
+    document.addEventListener('pointerdown', handlePointerDown)
+    return () => document.removeEventListener('pointerdown', handlePointerDown)
+  }, [interactive, widgetId])
+
+  // Listen for selection messages from the embedded grid
+  useEffect(() => {
+    function handleMessage(e) {
+      if (e.source !== iframeRef.current?.contentWindow) return
+      if (e.data?.type === 'storyboard:component-set:select') {
+        const newSelected = e.data.exportName || ''
+        if (newSelected !== selected) {
+          onUpdate?.({ selected: newSelected })
+        }
+      } else if (e.data?.type === 'storyboard:component-set:resize') {
+        // Auto-size widget to fit the grid content (+ header height)
+        const headerH = 32
+        const newW = Math.max(200, Math.ceil(e.data.width))
+        const newH = Math.max(60, Math.ceil(e.data.height) + headerH)
+        if (newW !== width || newH !== height) {
+          onUpdate?.({ width: newW, height: newH })
+        }
+      }
+    }
+    window.addEventListener('message', handleMessage)
+    return () => window.removeEventListener('message', handleMessage)
+  }, [selected, width, height, onUpdate])
+
+  const handleResize = useCallback((w, h) => {
+    onUpdate?.({ width: w, height: h })
+  }, [onUpdate])
+
+  useImperativeHandle(ref, () => ({
+    handleAction(actionId) {
+      if (actionId === 'flip-layout') {
+        const next = layout === 'horizontal' ? 'vertical' : 'horizontal'
+        onUpdate?.({ layout: next })
+        return true
+      } else if (actionId === 'open-external') {
+        const story = getStoryData(storyId)
+        if (story?._route) {
+          const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
+          window.open(`${base}${story._route}`, '_blank', 'noopener')
+        }
+        return true
+      }
+    },
+  }), [storyId, layout, onUpdate])
+
+  const iframeSrc = useMemo(
+    () => resolveStorySetUrl(storyId, layout, selected),
+    // storyIndexKey forces re-evaluation when HMR mutates the story index
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [storyId, layout, selected, storyIndexKey],
+  )
+
+  useIframeDevLogs({
+    widget: 'StorySetWidget',
+    loaded: interactive && Boolean(iframeSrc),
+    src: iframeSrc,
+  })
+
+  const displayName = storyId || 'Component Set'
+
+  if (!storyId) {
+    return (
+      <WidgetWrapper>
+        <div className={styles.container} ref={containerRef}>
+          <div className={styles.error}>
+            <span className={styles.errorIcon}><GridIcon size={20} /></span>
+            <span className={styles.errorText}>Missing story ID</span>
+          </div>
+        </div>
+      </WidgetWrapper>
+    )
+  }
+
+  if (!iframeSrc) {
+    return (
+      <WidgetWrapper>
+        <div className={styles.container} ref={containerRef}>
+          <div className={styles.error}>
+            <span className={styles.errorIcon}><GridIcon size={20} /></span>
+            <span className={styles.errorText}>Story &ldquo;{storyId}&rdquo; not found or has no route</span>
+          </div>
+        </div>
+      </WidgetWrapper>
+    )
+  }
+
+  const sizeStyle = {}
+  if (typeof width === 'number') sizeStyle.width = `${width}px`
+  if (typeof height === 'number') sizeStyle.height = `${height}px`
+
+  return (
+    <WidgetWrapper>
+      <div ref={containerRef} className={styles.container} style={sizeStyle}>
+        <div className={styles.header}>
+          <span className={styles.headerIcon}><GridIcon size={16} /></span>
+          <span className={styles.headerTitle}>{displayName}</span>
+          {selected && (
+            <span className={styles.headerSelected}>· {selected}</span>
+          )}
+          <span className={styles.headerLayout} title={`Layout: ${layout}`}>
+            {layout === 'horizontal' ? '⇔' : '⇕'}
+          </span>
+        </div>
+        <div className={styles.content}>
+          <iframe
+            ref={iframeRef}
+            src={iframeSrc}
+            className={styles.iframe}
+            title={`${displayName} component set`}
+            onLoad={(e) => e.target.blur()}
+          />
+        </div>
+        {!interactive && (
+          <div
+            className={overlayStyles.interactOverlay}
+            onClick={(e) => {
+              if (e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return
+              enterInteractive()
+            }}
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                e.stopPropagation()
+                enterInteractive()
+              }
+            }}
+            aria-label="Click to interact"
+          >
+            <span className={overlayStyles.interactHint}>Click to interact</span>
+          </div>
+        )}
+      </div>
+      {resizable && <ResizeHandle targetRef={containerRef} width={width} height={height} onResize={handleResize} />}
+    </WidgetWrapper>
+  )
+})

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

@@ -0,0 +1,89 @@
+/* StorySetWidget — canvas widget chrome */
+
+.container {
+  position: relative;
+  overflow: hidden;
+  min-width: 200px;
+  min-height: 120px;
+  background: var(--bgColor-default, #ffffff);
+  border: 3px solid var(--borderColor-default, #d0d7de);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  width: 100%;
+  height: 100%;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--fgColor-muted, #656d76);
+  background: var(--bgColor-muted, #f6f8fa);
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
+}
+
+.headerIcon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.headerTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.headerSelected {
+  color: var(--fgColor-accent, #0969da);
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.headerLayout {
+  margin-left: auto;
+  font-size: 14px;
+  opacity: 0.5;
+  flex-shrink: 0;
+}
+
+.content {
+  position: relative;
+  width: 100%;
+  height: calc(100% - 37px);
+}
+
+.iframe {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: none;
+  z-index: 1;
+}
+
+.error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+  color: var(--fgColor-danger, #cf222e);
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.errorIcon {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.errorText {
+  word-break: break-word;
+}

package/src/canvas/widgets/StoryWidget.jsx

@@ -26,13 +26,12 @@ function ComponentIcon({ size = 36 }) {
 
 function resolveStoryUrl(storyId, exportName) {
   const story = getStoryData(storyId)
-  if (!story?._route) return ''
+  if (!story?._storyModule) return ''
   const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
   const params = new URLSearchParams()
+  params.set('module', story._storyModule)
   if (exportName) params.set('export', exportName)
-  params.set('_sb_embed', '')
-  params.set('_sb_hide_branch_bar', '')
-  return `${base}${story._route}?${params}`
+  return `${base}/_storyboard/canvas/isolate?${params}`
 }
 
 const _storySourcesCache = {}

package/src/canvas/widgets/TerminalWidget.jsx

@@ -5,6 +5,8 @@ import { getTerminalConfig, getTerminalDimensions } from '@dfosco/storyboard-cor
 import { useOverride } from '../../hooks/useOverride.js'
 import { getSplitPaneLabel, findAllConnectedSplitTargets, buildPaneForWidget, buildSplitLayout } from './expandUtils.js'
 import ExpandedPane from './ExpandedPane.jsx'
+import { useWebGLSlot, Priority } from '../WebGLContextPool.jsx'
+import FrozenTerminalOverlay from './FrozenTerminalOverlay.jsx'
 import styles from './TerminalWidget.module.css'
 import overlayStyles from './embedOverlay.module.css'
 
@@ -106,17 +108,16 @@ export default forwardRef(function TerminalWidget({ id, props, onUpdate, multiSe
   const cfg = getTerminalConfig()
   const fontSize = cfg.fontSize ?? 13
   const agentId = props?.agentId || null
+  // Config dimensions are authoritative — always use them as the base
   const dims = getTerminalDimensions(agentId, {
     width: readProp(props, 'width', terminalSchema),
     height: readProp(props, 'height', terminalSchema),
   })
-  const rawWidth = props?.width ?? dims.width
-  const rawHeight = props?.height ?? dims.height
+  const width = dims.width
+  const height = dims.height
   const prettyName = props?.prettyName || null
   const startupCommand = props?.startupCommand || null
 
-  const width = rawWidth
-  const height = rawHeight
   // Snapped dimensions computed from ghostty's actual cell metrics (set after open)
   const [snappedHeight, setSnappedHeight] = useState(null)
   const [snappedWidth, setSnappedWidth] = useState(null)
@@ -145,6 +146,25 @@ export default forwardRef(function TerminalWidget({ id, props, onUpdate, multiSe
   const expandContainerRef = useRef(null)
   const dragHintTimer = useRef(null)
 
+  // ── WebGL context pool integration ──
+  // webglReady: PINNED (bypass cap, guaranteed live — no frozen flash)
+  // All others: VISIBLE (auto-requests a live slot — no manual click needed)
+  const initialPriority = props?.webglReady ? Priority.PINNED : Priority.VISIBLE
+  const { isLive, generation, setPriority } = useWebGLSlot(id, initialPriority)
+
+  // Update pool priority based on widget state
+  useEffect(() => {
+    if (expanded || interactive) {
+      setPriority(Priority.PINNED)
+    }
+    // Priority for VISIBLE/NEAR/OFFSCREEN is set by CanvasPage via usePoolVisibilityUpdater
+  }, [expanded, interactive, setPriority])
+
+  // Request activation when user clicks a frozen terminal
+  const handleFrozenActivate = useCallback(() => {
+    setPriority(Priority.PINNED)
+  }, [setPriority])
+
   useImperativeHandle(ref, () => ({
     handleAction(actionId) {
       if (actionId === 'expand') { setExpanded('single'); return true }
@@ -179,8 +199,9 @@ export default forwardRef(function TerminalWidget({ id, props, onUpdate, multiSe
     if (multiSelected && interactive) setInteractive(false)
   }, [multiSelected])
 
-  // Connect terminal + WebSocket
+  // Connect terminal + WebSocket (only when pool grants a live slot)
   useEffect(() => {
+    if (!isLive) return
     if (!containerRef.current) return
 
     let disposed = false
@@ -308,8 +329,10 @@ export default forwardRef(function TerminalWidget({ id, props, onUpdate, multiSe
       if (term) term.dispose()
       termRef.current = null
       wsRef.current = null
+      setReady(false)
+      setRevealed(false)
     }
-  }, [id, connectAttempt])
+  }, [id, isLive, generation, connectAttempt])
 
   // Resize terminal on dimension changes
   useEffect(() => {
@@ -472,112 +495,135 @@ export default forwardRef(function TerminalWidget({ id, props, onUpdate, multiSe
         ref={terminalRef}
         className={styles.terminal}
         style={{
-          ...(typeof (snappedWidth ?? width) === 'number' ? { width: `${snappedWidth ?? width}px` } : undefined),
-          ...(typeof (snappedHeight ?? height) === 'number' ? { height: `${snappedHeight ?? height}px` } : undefined),
+          ...(typeof (isLive ? (snappedWidth ?? width) : width) === 'number'
+            ? { width: `${isLive ? (snappedWidth ?? width) : width}px` }
+            : undefined),
+          ...(typeof (isLive ? (snappedHeight ?? height) : height) === 'number'
+            ? { height: `${isLive ? (snappedHeight ?? height) : height}px` }
+            : undefined),
         }}
         onClick={handleClick}
         onPointerDown={handleTerminalPointerDown}
         onKeyDown={interactive ? (e) => e.stopPropagation() : undefined}
       >
-        {showDragHint && (
-          <div className={styles.dragHint}>
-            <span className={styles.dragHintArrow}>←</span> Drag here to move widget
-          </div>
-        )}
-        {error && !sessionEnded && (
-          <div className={styles.error}>
-            <span>⚠ {error}</span>
-          </div>
-        )}
-        <div ref={containerRef} className={styles.xtermContainer} style={{ opacity: revealed ? 1 : 0 }} />
-
-        {/* Live but not interactive */}
-        {revealed && !interactive && !sessionEnded && (
-          <div
-            className={overlayStyles.interactOverlay}
-            style={{ backgroundColor: 'transparent' }}
-            onClick={(e) => {
-              if (multiSelected || e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return
-              setInteractive(true)
-              termRef.current?.focus({ preventScroll: true })
-            }}
-            role="button"
-            tabIndex={0}
-            onKeyDown={(e) => { if (!multiSelected && e.key === 'Enter') { setInteractive(true); termRef.current?.focus({ preventScroll: true }) } }}
-            aria-label="Click to interact"
-          >
-            {!multiSelected && <span className={overlayStyles.interactHint}>Click to interact</span>}
-          </div>
+        {/* ── Frozen state: WebGL context released, show snapshot ── */}
+        {!isLive && (
+          <FrozenTerminalOverlay
+            widgetId={id}
+            onActivate={handleFrozenActivate}
+          />
         )}
 
-        {/* Session ended — resource limited */}
-        {sessionEnded && resourceLimited && (
-          <div
-            className={overlayStyles.interactOverlay}
-            style={{ backgroundColor: 'var(--term-bg, #0d1117)', flexDirection: 'column', gap: '8px', padding: '24px' }}
-          >
-            <span className={styles.resourceIcon}>⚠</span>
-            <span className={styles.resourceTitle}>No terminal devices available</span>
-            <span className={styles.resourceMessage}>
-              Too many terminal sessions are open.
-              {resourceLimited.counts && (
-                <span className={styles.resourceCounts}>
-                  {resourceLimited.counts.live} live · {resourceLimited.counts.background} background · {resourceLimited.counts.archived} archived
-                </span>
-              )}
-            </span>
-            <div className={styles.resourceActions}>
-              {!resourceLimited.cleanupResult && (resourceLimited.counts?.background > 0 || resourceLimited.counts?.archived > 0) && (
-                <button className={styles.resourceBtn} onClick={handleCleanupAndRetry}>
-                  Close background sessions
-                </button>
-              )}
-              {resourceLimited.cleanupResult === 'nothing-to-clean' && (
-                <span className={styles.resourceMuted}>
-                  All background sessions already cleaned. Close some live terminals to free resources.
-                </span>
-              )}
-              {resourceLimited.cleanupResult === 'failed' && (
-                <span className={styles.resourceMuted}>
-                  Cleanup failed — could not reach dev server.
+        {/* ── Live state: ghostty WebGL terminal ── */}
+        {isLive && (
+          <>
+            {showDragHint && (
+              <div className={styles.dragHint}>
+                <span className={styles.dragHintArrow}>←</span> Drag here to move widget
+              </div>
+            )}
+            {error && !sessionEnded && (
+              <div className={styles.error}>
+                <span>⚠ {error}</span>
+              </div>
+            )}
+            <div ref={containerRef} className={styles.xtermContainer} style={{ opacity: revealed ? 1 : 0 }} />
+
+            {/* Live but not interactive */}
+            {revealed && !interactive && !sessionEnded && (
+              <div
+                className={overlayStyles.interactOverlay}
+                style={{ backgroundColor: 'transparent' }}
+                onClick={(e) => {
+                  if (multiSelected || e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return
+                  setInteractive(true)
+                  termRef.current?.focus({ preventScroll: true })
+                }}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => { if (!multiSelected && e.key === 'Enter') { setInteractive(true); termRef.current?.focus({ preventScroll: true }) } }}
+                aria-label="Click to interact"
+              >
+                {!multiSelected && <span className={overlayStyles.interactHint}>Click to interact</span>}
+              </div>
+            )}
+
+            {/* Session ended — resource limited */}
+            {sessionEnded && resourceLimited && (
+              <div
+                className={overlayStyles.interactOverlay}
+                style={{ backgroundColor: 'var(--term-bg, #0d1117)', flexDirection: 'column', gap: '8px', padding: '24px' }}
+              >
+                <span className={styles.resourceIcon}>⚠</span>
+                <span className={styles.resourceTitle}>No terminal devices available</span>
+                <span className={styles.resourceMessage}>
+                  Too many terminal sessions are open.
+                  {resourceLimited.counts && (
+                    <span className={styles.resourceCounts}>
+                      {resourceLimited.counts.live} live · {resourceLimited.counts.background} background · {resourceLimited.counts.archived} archived
+                    </span>
+                  )}
                 </span>
-              )}
-              <button className={styles.resourceBtnSecondary} onClick={handleStartSession}>
-                Retry
-              </button>
-            </div>
-          </div>
-        )}
+                <div className={styles.resourceActions}>
+                  {!resourceLimited.cleanupResult && (resourceLimited.counts?.background > 0 || resourceLimited.counts?.archived > 0) && (
+                    <button className={styles.resourceBtn} onClick={handleCleanupAndRetry}>
+                      Close background sessions
+                    </button>
+                  )}
+                  {resourceLimited.cleanupResult === 'nothing-to-clean' && (
+                    <span className={styles.resourceMuted}>
+                      All background sessions already cleaned. Close some live terminals to free resources.
+                    </span>
+                  )}
+                  {resourceLimited.cleanupResult === 'failed' && (
+                    <span className={styles.resourceMuted}>
+                      Cleanup failed — could not reach dev server.
+                    </span>
+                  )}
+                  <button className={styles.resourceBtnSecondary} onClick={handleStartSession}>
+                    Retry
+                  </button>
+                </div>
+              </div>
+            )}
 
-        {/* Session ended — normal (zzz) */}
-        {sessionEnded && !resourceLimited && (
-          <div
-            className={overlayStyles.interactOverlay}
-            style={{ backgroundColor: 'var(--term-bg, #0d1117)', flexDirection: 'column', gap: 0 }}
-            onClick={handleStartSession}
-            role="button"
-            tabIndex={0}
-            aria-label="Start terminal session"
-            onKeyDown={(e) => { if (e.key === 'Enter') handleStartSession() }}
-          >
-            {!waking && (
-              <div className={styles.buddyZzz}>
-                <span className={styles.z1}>z</span>
-                <span className={styles.z2}>z</span>
-                <span className={styles.z3}>z</span>
+            {/* Session ended — normal */}
+            {sessionEnded && !resourceLimited && (
+              <div
+                className={overlayStyles.interactOverlay}
+                style={{ backgroundColor: 'var(--term-bg, #0d1117)', flexDirection: 'column', gap: 0 }}
+                onClick={handleStartSession}
+                role="button"
+                tabIndex={0}
+                aria-label="Start terminal session"
+                onKeyDown={(e) => { if (e.key === 'Enter') handleStartSession() }}
+              >
+                {!waking && (
+                  <>
+                    <div className={styles.buddyZzz}>
+                      <span className={styles.z1}>z</span>
+                      <span className={styles.z2}>z</span>
+                      <span className={styles.z3}>z</span>
+                    </div>
+                    <span className={styles.sessionEndedBadge}>Session ended</span>
+                    <span className={styles.sessionEndedAction}>Click to start</span>
+                  </>
+                )}
+                {waking && (
+                  <span className={overlayStyles.interactHint} style={{ opacity: 1 }}>
+                    Waking up...
+                  </span>
+                )}
               </div>
             )}
-            <span className={overlayStyles.interactHint}>
-              {waking ? 'Waking up...' : connectAttempt > 0 ? 'Continue terminal session' : 'Start terminal session'}
-            </span>
-          </div>
-        )}
 
-        {/* Connecting / reveal mask */}
-        {!revealed && !error && !sessionEnded && (
-          <div className={styles.loading}>
-            <div className={styles.spinner} />
-          </div>
+            {/* Connecting / reveal mask */}
+            {!revealed && !error && !sessionEnded && (
+              <div className={styles.loading}>
+                <div className={styles.spinner} />
+              </div>
+            )}
+          </>
         )}
       </div>
     </div>

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

@@ -204,6 +204,29 @@
   }
 }
 
+/* ── Session-ended badge + action ── */
+
+.sessionEndedBadge {
+  display: inline-flex;
+  align-items: center;
+  background: rgba(110, 118, 129, 0.25);
+  color: #8b949e;
+  font-size: 12px;
+  padding: 5px 14px;
+  border-radius: 999px;
+  letter-spacing: 0.01em;
+  pointer-events: none;
+  margin-bottom: 12px;
+}
+
+.sessionEndedAction {
+  color: #e6edf3;
+  font-size: 14px;
+  font-weight: 600;
+  opacity: 0.7;
+  pointer-events: none;
+}
+
 /* ── Resource-limited overlay ── */
 
 .resourceIcon {