@dfosco/storyboard-react 4.2.4 → 4.2.6

package/src/canvas/widgets/ComponentSetWidget.jsx

@@ -1,208 +1,2 @@
-/**
- * ComponentSetWidget — 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 story's ComponentSetPage. 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.
- *
- * 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 './ComponentSetWidget.module.css'
-import overlayStyles from './embedOverlay.module.css'
-
-function GridIcon({ size = 16 }) {
-  return <Icon name="iconoir/view-grid" size={size} />
-}
-
-function resolveComponentSetUrl(storyId, layout, selected) {
-  const story = getStoryData(storyId)
-  if (!story?._route) return ''
-  const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
-  const params = new URLSearchParams()
-  params.set('_sb_embed', '')
-  params.set('_sb_hide_branch_bar', '')
-  params.set('_sb_component_set', '')
-  if (layout) params.set('layout', layout)
-  if (selected) params.set('selected', selected)
-  return `${base}${story._route}?${params}`
-}
-
-export default forwardRef(function ComponentSetWidget({ 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 ComponentSetPage
-  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(
-    () => resolveComponentSetUrl(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: 'ComponentSetWidget',
-    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>
-  )
-})
+// Deprecated — renamed to StorySetWidget. This re-export exists for backward compatibility.
+export { default } from './StorySetWidget.jsx'

package/src/canvas/widgets/ComponentWidget.jsx

@@ -1,139 +1,14 @@
-import { useRef, useCallback, useState, useEffect, useMemo } from 'react'
+// Deprecated stub — ComponentWidget was removed in 4.2.5.
+// This file exists only to prevent crashes in CanvasPage's jsx- code path,
+// which still references ComponentWidget for legacy canvas companion files.
+// The jsx- system is dormant (no canvases define a `jsx` field).
 import WidgetWrapper from './WidgetWrapper.jsx'
-import ResizeHandle from './ResizeHandle.jsx'
-import ComponentErrorBoundary from '../ComponentErrorBoundary.jsx'
-import { useIframeDevLogs } from './iframeDevLogs.js'
-import styles from './ComponentWidget.module.css'
-import overlayStyles from './embedOverlay.module.css'
-
-/**
- * Renders a live JSX export from a .story.jsx file.
- *
- * In dev mode (isLocalDev), each component is rendered inside an iframe
- * via the /_storyboard/canvas/isolate middleware. This isolates broken
- * components so they cannot crash the entire canvas page.
- *
- * In production, the component is rendered directly with an ErrorBoundary
- * as a fallback safety net.
- *
- * Double-click the overlay to enter interactive mode (dropdowns, buttons work).
- * Click outside to exit interactive mode.
- */
-export default function ComponentWidget({
-  component: Component,
-  jsxModule,
-  exportName,
-  canvasTheme,
-  isLocalDev,
-  width,
-  height,
-  onUpdate,
-  resizable,
-}) {
-  const containerRef = useRef(null)
-  const [interactive, setInteractive] = useState(false)
-  const [showIframe, setShowIframe] = useState(false)
-
-  const handleResize = useCallback((w, h) => {
-    onUpdate?.({ width: w, height: h })
-  }, [onUpdate])
-
-  const enterInteractive = useCallback(() => setInteractive(true), [])
-
-  // Exit interactive mode when clicking outside the component
-  useEffect(() => {
-    if (!interactive) return
-    function handlePointerDown(e) {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setInteractive(false)
-        setShowIframe(false)
-      }
-    }
-    document.addEventListener('pointerdown', handlePointerDown)
-    return () => document.removeEventListener('pointerdown', handlePointerDown)
-  }, [interactive])
-
-  // Build iframe src for dev isolation
-  const iframeSrc = useMemo(() => {
-    if (!isLocalDev || !jsxModule || !exportName) return null
-    const basePath = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
-    const params = new URLSearchParams({
-      module: jsxModule,
-      export: exportName,
-      theme: canvasTheme || 'light',
-    })
-    return `${basePath}/_storyboard/canvas/isolate?${params}`
-  }, [isLocalDev, jsxModule, exportName, canvasTheme])
-
-  const useIframe = isLocalDev && iframeSrc
-
-  useIframeDevLogs({
-    widget: 'ComponentWidget',
-    loaded: Boolean(useIframe && showIframe),
-    src: iframeSrc,
-  })
-
-  if (!useIframe && !Component) return null
-
-  const sizeStyle = {}
-  if (typeof width === 'number') sizeStyle.width = `${width}px`
-  if (typeof height === 'number') sizeStyle.height = `${height}px`
 
+export default function ComponentWidget({ component: Component, exportName }) {
+  if (!Component) return null
   return (
     <WidgetWrapper>
-      <div ref={containerRef} className={styles.container} style={sizeStyle}>
-        <div className={styles.content}>
-          {useIframe ? (
-            showIframe ? (
-              <iframe
-                src={iframeSrc}
-                className={styles.iframe}
-                title={exportName || 'Component widget'}
-                sandbox="allow-same-origin allow-scripts"
-                onLoad={(e) => e.target.blur()}
-              />
-            ) : (
-              <div className={styles.placeholder} />
-            )
-          ) : Component ? (
-            <ComponentErrorBoundary name={exportName}>
-              <Component />
-            </ComponentErrorBoundary>
-          ) : null}
-        </div>
-        {!interactive && (
-          <div
-            className={overlayStyles.interactOverlay}
-            onClick={(e) => {
-              // Don't enter interactive mode for modifier clicks (shift/meta/ctrl for multi-select)
-              if (e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return
-              if (useIframe) setShowIframe(true)
-              enterInteractive()
-            }}
-            role="button"
-            tabIndex={0}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault()
-                e.stopPropagation()
-                if (useIframe) setShowIframe(true)
-                enterInteractive()
-              }
-            }}
-            aria-label="Click to interact with component"
-          >
-            <span className={overlayStyles.interactHint}>Click to interact</span>
-          </div>
-        )}
-        {resizable && (
-          <ResizeHandle
-            targetRef={containerRef}
-            minWidth={100}
-            minHeight={60}
-            onResize={handleResize}
-          />
-        )}
-      </div>
+      <Component />
     </WidgetWrapper>
   )
 }

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'