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

package/src/canvas/ConnectorLayer.jsx

@@ -112,35 +112,35 @@ function buildPath(startPt, startAnchor, endPt, endAnchor, freeEnd = false) {
  * @param {Object} endPt — position of the connector's end endpoint
  */
 function EndpointShape({ x, y, startPt, endPt, style, onPointerDown }) {
+  const passThrough = !onPointerDown ? { pointerEvents: 'none' } : {}
   if (style === 'none') {
     return (
       <circle cx={x} cy={y} r={connectorConfig.endpointRadius}
-        style={{ fill: 'transparent', stroke: 'none', pointerEvents: 'auto', cursor: 'crosshair' }}
+        style={{ fill: 'transparent', stroke: 'none', ...(onPointerDown ? { pointerEvents: 'auto', cursor: 'crosshair' } : { pointerEvents: 'none' }) }}
         onPointerDown={onPointerDown}
       />
     )
   }
   if (style === 'arrow-start' || style === 'arrow-end') {
     const size = connectorConfig.endpointRadius * 2.2
-    // Determine which point the arrow should aim toward
     const target = style === 'arrow-start' ? startPt : endPt
     const dx = target.x - x
     const dy = target.y - y
-    // atan2 gives angle from positive X axis; polygon tip points up (-Y), so offset by 90°
     const rotation = (Math.atan2(dy, dx) * 180 / Math.PI) + 90
     return (
       <polygon
         points={`0,${-size} ${size * 0.6},${size * 0.5} ${-size * 0.6},${size * 0.5}`}
         transform={`translate(${x},${y}) rotate(${rotation})`}
         className={styles.connectorEndpoint}
+        style={passThrough}
         onPointerDown={onPointerDown}
       />
     )
   }
-  // Default: circle
   return (
     <circle cx={x} cy={y} r={connectorConfig.endpointRadius}
       className={styles.connectorEndpoint}
+      style={passThrough}
       onPointerDown={onPointerDown}
     />
   )
@@ -216,7 +216,7 @@ export default function ConnectorLayer({
               className={styles.connectorPath}
               onClick={(e) => handleClick(e, conn.id)}
             />
-            {/* Endpoint shapes — draggable to reconnect or remove */}
+            {/* Endpoint shapes — visual only, pointer events pass through to anchor dots */}
             <EndpointShape x={startPt.x} y={startPt.y} startPt={startPt} endPt={endPt} style={startStyle}
               onPointerDown={onEndpointDrag ? (e) => { e.stopPropagation(); e.preventDefault(); onEndpointDrag(conn, 'start', e) } : undefined}
             />

package/src/canvas/PageSelector.test.jsx

@@ -1,5 +1,5 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import PageSelector from './PageSelector.jsx'
 
 const PAGES = [
@@ -10,9 +10,15 @@ const PAGES = [
 
 describe('PageSelector', () => {
   beforeEach(() => {
-    // Reset location mock
+    // Reset location mock — use a setter spy so we can track assignments
     delete window.location
-    window.location = { href: '' }
+    const loc = { _href: '' }
+    Object.defineProperty(loc, 'href', {
+      get() { return loc._href },
+      set(v) { loc._href = v },
+      configurable: true,
+    })
+    window.location = loc
   })
 
   it('renders nothing when fewer than 2 pages', () => {
@@ -58,14 +64,17 @@ describe('PageSelector', () => {
     expect(options[0].getAttribute('aria-selected')).toBe('false')
   })
 
-  it('navigates to selected page', () => {
+  it('navigates to selected page', async () => {
     render(<PageSelector currentName="research/interviews" pages={PAGES} />)
     fireEvent.click(screen.getByTitle('Switch canvas page'))
     // Click the option in the menu (not the trigger label)
     const options = screen.getAllByRole('option')
     fireEvent.click(options[1]) // Surveys
 
-    expect(window.location.href).toContain('/canvas/research/surveys')
+    // Navigation uses a 300ms setTimeout for mouse clicks
+    await waitFor(() => {
+      expect(window.location.href).toContain('/canvas/research/surveys')
+    })
   })
 
   it('closes dropdown on Escape', () => {

package/src/canvas/useCanvas.js

@@ -100,7 +100,7 @@ export function useCanvas(canvasId) {
   useEffect(() => {
     if (!import.meta.hot || !buildTimeCanvas) return
 
-    const handleCanvasFileChanged = ({ data }) => {
+    const handleCanvasFileChanged = (data) => {
       const eventId = data?.canvasId || data?.name
       if (!data || eventId !== canvasId) return
       // Use metadata from the HMR event directly if available (faster)

package/src/canvas/widgets/ActionWidget.jsx

@@ -0,0 +1,200 @@
+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

@@ -0,0 +1,122 @@
+.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;
+}

package/src/canvas/widgets/FigmaEmbed.jsx

@@ -5,6 +5,8 @@ import { readProp } from './widgetProps.js'
 import { schemas } from './widgetConfig.js'
 import { toFigmaEmbedUrl, getFigmaTitle, getFigmaType, isFigmaUrl } from './figmaUrl.js'
 import { useIframeDevLogs } from './iframeDevLogs.js'
+import { findConnectedSplitTarget, getPaneOrder, buildSecondaryIframeUrl, reparentTerminalInto, getSplitPaneLabel } from './expandUtils.js'
+import SplitScreenTopBar from './SplitScreenTopBar.jsx'
 import styles from './FigmaEmbed.module.css'
 import overlayStyles from './embedOverlay.module.css'
 
@@ -49,7 +51,7 @@ function FigmaLogo() {
 
 const TYPE_LABELS = { board: 'Board', design: 'Design', proto: 'Prototype' }
 
-export default forwardRef(function FigmaEmbed({ props, onUpdate, resizable }, ref) {
+export default forwardRef(function FigmaEmbed({ id: widgetId, props, onUpdate, resizable }, ref) {
   const url = readProp(props, 'url', figmaEmbedSchema)
   const width = readProp(props, 'width', figmaEmbedSchema)
   const height = readProp(props, 'height', figmaEmbedSchema)
@@ -156,7 +158,7 @@ export default forwardRef(function FigmaEmbed({ props, onUpdate, resizable }, re
     handleAction(actionId) {
       if (actionId === 'open-external') {
         if (url) window.open(url, '_blank', 'noopener')
-      } else if (actionId === 'expand') {
+      } else if (actionId === 'expand' || actionId === 'split-screen') {
         setShowIframe(true)
         setExpanded(true)
       }
@@ -247,35 +249,101 @@ export default forwardRef(function FigmaEmbed({ props, onUpdate, resizable }, re
       )}
     </WidgetWrapper>
     {createPortal(
-      <div
-        className={styles.expandBackdrop}
-        style={expanded && embedUrl ? undefined : { display: 'none' }}
-        onClick={() => setExpanded(false)}
-        onPointerDown={(e) => e.stopPropagation()}
-        onKeyDown={(e) => {
-          e.stopPropagation()
-          if (e.key === 'Escape') setExpanded(false)
-        }}
-        onWheel={(e) => e.stopPropagation()}
-        tabIndex={-1}
-        ref={(el) => { if (el && expanded) el.focus() }}
-      >
-        <div
-          ref={modalContainerRef}
-          className={styles.expandContainer}
-          onClick={(e) => e.stopPropagation()}
-        >
-          {/* iframe is reparented here via useEffect */}
-          <button
-            className={styles.expandClose}
-            onClick={() => setExpanded(false)}
-            aria-label="Close expanded view"
-            autoFocus
-          >✕</button>
-        </div>
-      </div>,
+      <FigmaExpandModal
+        expanded={expanded && !!embedUrl}
+        onClose={() => setExpanded(false)}
+        modalContainerRef={modalContainerRef}
+        widgetId={widgetId}
+      />,
       document.body
     )}
     </>
   )
 })
+
+function FigmaExpandModal({ expanded, onClose, modalContainerRef, widgetId }) {
+  const connectedWidget = useMemo(
+    () => (expanded ? findConnectedSplitTarget(widgetId) : null),
+    [expanded, widgetId],
+  )
+  const hasSplit = Boolean(connectedWidget)
+  const paneOrder = useMemo(
+    () => (hasSplit ? getPaneOrder(widgetId, connectedWidget) : { primaryIsLeft: true }),
+    [hasSplit, widgetId, connectedWidget],
+  )
+  const secondaryUrl = useMemo(() => buildSecondaryIframeUrl(connectedWidget), [connectedWidget])
+  const isTerminalSecondary = connectedWidget?.type === 'terminal' || connectedWidget?.type === 'terminal-read' || connectedWidget?.type === 'agent'
+  const terminalRef = useRef(null)
+  const cleanupRef = useRef(null)
+  const [activePane, setActivePane] = useState('left')
+
+  const primaryWidget = useMemo(() => {
+    const bridge = window.__storyboardCanvasBridgeState
+    return bridge?.widgets?.find((w) => w.id === widgetId) || { type: 'figma-embed', props: {} }
+  }, [widgetId, expanded])
+
+  const primaryLabel = useMemo(() => getSplitPaneLabel(primaryWidget), [primaryWidget])
+  const secondaryLabel = useMemo(() => getSplitPaneLabel(connectedWidget), [connectedWidget])
+  const leftLabel = paneOrder.primaryIsLeft ? primaryLabel : secondaryLabel
+  const rightLabel = paneOrder.primaryIsLeft ? secondaryLabel : primaryLabel
+
+  useEffect(() => {
+    if (!isTerminalSecondary || !expanded || !terminalRef.current) return
+    cleanupRef.current = reparentTerminalInto(connectedWidget.id, terminalRef.current)
+    return () => { cleanupRef.current?.(); cleanupRef.current = null }
+  }, [isTerminalSecondary, expanded, connectedWidget?.id])
+
+  const primaryPane = (
+    <div
+      ref={modalContainerRef}
+      className={hasSplit ? styles.expandContainerSplit : styles.expandContainer}
+      onClick={(e) => e.stopPropagation()}
+      onPointerDown={() => setActivePane(paneOrder.primaryIsLeft ? 'left' : 'right')}
+    >
+      {!hasSplit && <button className={styles.expandClose} onClick={onClose} aria-label="Close expanded view" autoFocus>✕</button>}
+    </div>
+  )
+
+  let secondaryPane = null
+  const secondarySide = paneOrder.primaryIsLeft ? 'right' : 'left'
+  if (hasSplit) {
+    if (secondaryUrl) {
+      secondaryPane = <div className={styles.expandSecondary} onClick={(e) => e.stopPropagation()} onPointerDown={() => setActivePane(secondarySide)}><iframe src={secondaryUrl} className={styles.expandSecondaryIframe} title="Connected widget" /></div>
+    } else if (isTerminalSecondary) {
+      secondaryPane = <div className={styles.expandSecondary} onClick={(e) => e.stopPropagation()} onPointerDown={() => setActivePane(secondarySide)}><div ref={terminalRef} className={styles.expandTerminal} /></div>
+    }
+  }
+
+  const leftPane = paneOrder.primaryIsLeft ? primaryPane : secondaryPane
+  const rightPane = paneOrder.primaryIsLeft ? secondaryPane : primaryPane
+
+  return (
+    <div
+      className={styles.expandBackdrop}
+      style={expanded ? undefined : { display: 'none' }}
+      onClick={onClose}
+      onPointerDown={(e) => e.stopPropagation()}
+      onKeyDown={(e) => { e.stopPropagation(); if (e.key === 'Escape') onClose() }}
+      onWheel={(e) => e.stopPropagation()}
+      tabIndex={-1}
+      ref={(el) => { if (el && expanded) el.focus() }}
+    >
+      {hasSplit ? (
+        <div className={styles.expandSplitBody}>
+          <SplitScreenTopBar
+            leftLabel={leftLabel}
+            rightLabel={rightLabel}
+            activePane={activePane}
+            onClose={onClose}
+          />
+          <div className={styles.expandSplitPanes}>
+            <div className={styles.expandSplitLeft}>{leftPane}</div>
+            <div className={styles.expandSplitRight}>{rightPane}</div>
+          </div>
+        </div>
+      ) : (
+        primaryPane
+      )}
+    </div>
+  )
+}

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

@@ -139,6 +139,67 @@
   background: rgba(0, 0, 0, 0.7);
 }
 
+/* ── Split-screen layout ──────────────────────────────────────────── */
+
+.expandContainerSplit {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: var(--bgColor-default, #ffffff);
+}
+
+.expandSplitBody {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: expandScaleIn 0.2s ease;
+}
+
+.expandSplitPanes {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+
+.expandSplitLeft {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  overflow: hidden;
+  border-right: 1px solid var(--borderColor-muted, #d8dee4);
+}
+
+.expandSplitRight {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+.expandSecondary {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background: var(--bgColor-default, #ffffff);
+}
+
+.expandSecondaryIframe {
+  border: none;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.expandTerminal {
+  width: 100%;
+  height: 100%;
+  background: #0d1117;
+}
+
 .emptyState {
   width: 100%;
   height: calc(100% - 10px);

package/src/canvas/widgets/ImageWidget.jsx

@@ -59,7 +59,7 @@ const ImageWidget = forwardRef(function ImageWidget({ props, onUpdate, resizable
         const url = getImageUrl(src)
         const a = document.createElement('a')
         a.href = url
-        a.download = src.replace(/^_/, '')
+        a.download = src.replace(/^~/, '')
         document.body.appendChild(a)
         a.click()
         document.body.removeChild(a)