@dfosco/storyboard-react 4.2.4 → 4.2.5

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

@@ -1,26 +0,0 @@
-.container {
-  position: relative;
-  overflow: hidden;
-  min-width: 100px;
-  min-height: 60px;
-  background: var(--bgColor-default, #ffffff);
-  width: 100%;
-  height: 100%;
-}
-
-.content {
-  width: 100%;
-  height: 100%;
-}
-
-.iframe {
-  display: block;
-  width: 100%;
-  height: 100%;
-  border: none;
-}
-
-.placeholder {
-  width: 100%;
-  height: 100%;
-}

package/src/canvas/widgets/FrozenTerminalOverlay.jsx

@@ -0,0 +1,151 @@
+import { useState, useEffect, useRef } from 'react'
+import styles from './FrozenTerminalOverlay.module.css'
+
+/**
+ * Renders a frozen terminal preview from the latest server snapshot.
+ * Shown when a terminal widget loses its live WebGL slot but the
+ * server-side tmux session is still running.
+ *
+ * The snapshot text is rendered at a base font size then CSS-scaled to
+ * fill the widget width — matching the live ghostty terminal's sizing.
+ */
+
+let Convert = null
+let ansiLoadAttempted = false
+
+async function getConverter() {
+  if (Convert) return new Convert({ fg: '#e6edf3', bg: '#0d1117', newline: true })
+  if (ansiLoadAttempted) return null
+  ansiLoadAttempted = true
+  try {
+    const mod = await import(/* @vite-ignore */ 'ansi-to-html')
+    Convert = mod.default || mod
+    return new Convert({ fg: '#e6edf3', bg: '#0d1117', newline: true })
+  } catch {
+    return null
+  }
+}
+
+function stripAnsi(text) {
+  // eslint-disable-next-line no-control-regex
+  return text.replace(/\x1b\[[0-9;]*[a-zA-Z]/g, '')
+}
+
+function getBaseUrl() {
+  const base = (typeof import.meta !== 'undefined' && import.meta.env?.BASE_URL) || '/'
+  return base.endsWith('/') ? base : base + '/'
+}
+
+export default function FrozenTerminalOverlay({ widgetId, onActivate }) {
+  const [html, setHtml] = useState(null)
+  const [plainText, setPlainText] = useState(null)
+  const [scale, setScale] = useState(1)
+  const containerRef = useRef(null)
+  const preRef = useRef(null)
+
+  useEffect(() => {
+    let cancelled = false
+
+    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
+          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))
+          }
+          return
+        } catch {
+          continue
+        }
+      }
+    }
+
+    fetchSnapshot()
+    return () => { cancelled = true }
+  }, [widgetId])
+
+  // Scale the pre to fill the padded content area width
+  useEffect(() => {
+    const container = containerRef.current
+    const pre = preRef.current
+    if (!container || !pre) return
+
+    function updateScale() {
+      const style = getComputedStyle(container)
+      const padL = parseFloat(style.paddingLeft) || 0
+      const padR = parseFloat(style.paddingRight) || 0
+      const availableWidth = container.clientWidth - padL - padR
+      const naturalWidth = pre.scrollWidth
+      if (naturalWidth > 0 && availableWidth > 0) {
+        setScale(availableWidth / naturalWidth)
+      }
+    }
+
+    const observer = new ResizeObserver(updateScale)
+    observer.observe(container)
+    updateScale()
+
+    return () => observer.disconnect()
+  }, [html, plainText])
+
+  const hasSnapshot = !!(html || plainText)
+
+  return (
+    <div
+      className={styles.overlay}
+      onClick={onActivate}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => { if (e.key === 'Enter') onActivate?.() }}
+      aria-label="Click to resume terminal"
+    >
+      {/* Faded snapshot background — scaled to fill widget width */}
+      {hasSnapshot && (
+        <div ref={containerRef} className={styles.snapshotContent}>
+          {html && (
+            <pre
+              ref={preRef}
+              className={styles.snapshotPre}
+              style={{ transform: `scale(${scale})` }}
+              dangerouslySetInnerHTML={{ __html: html }}
+            />
+          )}
+          {!html && plainText && (
+            <pre
+              ref={preRef}
+              className={styles.snapshotPre}
+              style={{ transform: `scale(${scale})` }}
+            >
+              {plainText}
+            </pre>
+          )}
+        </div>
+      )}
+
+      {/* Status + action */}
+      <div className={styles.statusLayer}>
+        <span className={styles.actionButton}>Click to resume</span>
+        <span className={styles.statusBadge}>
+          Running in background
+          <span className={styles.orbitSpinner} />
+        </span>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,83 @@
+.overlay {
+  position: absolute;
+  inset: 0;
+  background: var(--term-bg, #181b22);
+  overflow: hidden;
+  cursor: pointer;
+}
+
+/* ── Faded snapshot background ── */
+
+.snapshotContent {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  padding: var(--base-size-16, 16px);
+  font-family: 'Ghostty', 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
+  font-size: 12px;
+  line-height: 1.4;
+  color: #e6edf3;
+  opacity: 0.35;
+  pointer-events: none;
+}
+
+.snapshotPre {
+  margin: 0;
+  white-space: pre;
+  display: inline-block;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  transform-origin: top left;
+}
+
+/* ── Status + action layer ── */
+
+.statusLayer {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  pointer-events: none;
+}
+
+/* Matches interactHint from embedOverlay — solid pill button, always visible */
+.actionButton {
+  color: var(--fgColor-onInverse, #fff);
+  background-color: var(--bgColor-inverse, #21262d);
+  padding: var(--base-size-12, 12px) var(--base-size-16, 16px);
+  border-radius: var(--base-size-6, 6px);
+  font-size: 14px;
+  font-weight: 600;
+  pointer-events: none;
+}
+
+/* Transparent badge — no opaque bg so snapshot text stays readable */
+.statusBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: #8b949e;
+  font-size: 12px;
+  padding: 4px 0;
+  letter-spacing: 0.01em;
+}
+
+/* ── Orbit spinner ── */
+
+.orbitSpinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 1.5px solid transparent;
+  border-top-color: #8b949e;
+  border-radius: 50%;
+  animation: orbitSpin 1s linear infinite;
+}
+
+@keyframes orbitSpin {
+  to { transform: rotate(360deg); }
+}

package/src/canvas/widgets/PromptWidget.jsx

@@ -2,6 +2,7 @@ import { useState, useCallback, useEffect, useRef, forwardRef, useImperativeHand
 import { readProp, promptSchema } from './widgetProps.js'
 import { CopilotIcon, SquareFillIcon, CheckCircleIcon, XIcon } from '@primer/octicons-react'
 import ResizeHandle from './ResizeHandle.jsx'
+import { useWebGLSlot, Priority } from '../WebGLContextPool.jsx'
 import styles from './PromptWidget.module.css'
 
 function getBase() {
@@ -92,6 +93,18 @@ const PromptWidget = forwardRef(function PromptWidget({ id, props, onUpdate, res
   const termDisposedRef = useRef(false)
   const textareaRef = useRef(null)
 
+  // ── WebGL context pool integration ──
+  // Only request a live slot when the output terminal is actually shown
+  const { isLive, setPriority } = useWebGLSlot(id)
+
+  useEffect(() => {
+    if (showOutput && execStatus !== 'idle') {
+      setPriority(Priority.VISIBLE)
+    } else {
+      setPriority(Priority.OFFSCREEN)
+    }
+  }, [showOutput, execStatus, setPriority])
+
   const onUpdateRef = useRef(onUpdate)
   useEffect(() => { onUpdateRef.current = onUpdate }, [onUpdate])
 
@@ -206,8 +219,9 @@ const PromptWidget = forwardRef(function PromptWidget({ id, props, onUpdate, res
     }
   }, [onUpdate])
 
-  // Embedded read-only terminal
+  // Embedded read-only terminal (only created when pool grants a live slot)
   useEffect(() => {
+    if (!isLive) return
     if (!showOutput || execStatus === 'idle') return
     if (!termContainerRef.current) return
 
@@ -279,7 +293,7 @@ const PromptWidget = forwardRef(function PromptWidget({ id, props, onUpdate, res
       termRef.current = null
       wsRef.current = null
     }
-  }, [showOutput, execStatus, id, width, height])
+  }, [isLive, showOutput, execStatus, id, width, height])
 
   const isPending = execStatus === 'pending'
   const isDone = execStatus === 'done'

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 = {}