@dfosco/storyboard-react 4.1.0 → 4.2.0-alpha.5

package/src/canvas/widgets/ActionWidget.jsx

@@ -0,0 +1,193 @@
+import { useState, useEffect, useCallback } 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 function ActionWidget({ id, props, onUpdate, resizable }) {
+  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)
+
+  // 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/MarkdownBlock.jsx

@@ -68,6 +68,7 @@ export default function MarkdownBlock({ props, onUpdate, resizable }) {
   const content = readProp(props, 'content', markdownSchema)
   const width = readProp(props, 'width', markdownSchema)
   const height = props?.height
+  const collapsed = !!props?.collapsed
   const canEdit = typeof onUpdate === 'function'
   const [editing, setEditing] = useState(false)
   const editingActive = canEdit && editing
@@ -121,7 +122,14 @@ export default function MarkdownBlock({ props, onUpdate, resizable }) {
         setEditHeight(blockRef.current.offsetHeight)
       }
       if (textareaRef.current) {
-        textareaRef.current.focus()
+        // Place cursor at end and prevent scroll jump to top
+        const len = textareaRef.current.value.length
+        textareaRef.current.setSelectionRange(len, len)
+        textareaRef.current.focus({ preventScroll: true })
+        // Restore the block's scroll position (captured before React swapped the DOM)
+        if (blockRef.current) {
+          blockRef.current.scrollTop = blockRef.current.dataset.scrollTop || 0
+        }
       }
     } else {
       setEditHeight(null)
@@ -132,15 +140,19 @@ export default function MarkdownBlock({ props, onUpdate, resizable }) {
     <WidgetWrapper>
       <div
         ref={blockRef}
-        className={styles.block}
-        style={{ width, ...(height ? { height, overflow: 'auto' } : {}), minHeight: editHeight || undefined }}
+        className={`${styles.block}${collapsed && !editingActive ? ` ${styles.blockCollapsed}` : ''}`}
+        style={{
+          width,
+          ...(height ? { height, overflow: 'auto' } : {}),
+          ...(editHeight ? { height: editHeight, display: 'flex', flexDirection: 'column' } : {}),
+        }}
       >
         {editingActive ? (
           <textarea
             ref={textareaRef}
             className={styles.editor}
             data-canvas-allow-text-selection
-            style={{ minHeight: editHeight ? editHeight - 2 : undefined }}
+            style={{ flex: 1 }}
             value={content}
             onChange={handleContentChange}
             onBlur={() => setEditing(false)}
@@ -158,10 +170,19 @@ export default function MarkdownBlock({ props, onUpdate, resizable }) {
             data-canvas-allow-text-selection={!canEdit ? '' : undefined}
             onClick={!canEdit ? (e) => e.stopPropagation() : undefined}
             onCopy={!canEdit ? handleReadOnlyCopy : undefined}
-            onDoubleClick={canEdit ? () => setEditing(true) : undefined}
+            onDoubleClick={canEdit ? () => {
+              // Save scroll position before switching to editor
+              if (blockRef.current) blockRef.current.dataset.scrollTop = blockRef.current.scrollTop
+              setEditing(true)
+            } : undefined}
             role={canEdit ? 'button' : undefined}
             tabIndex={canEdit ? 0 : undefined}
-            onKeyDown={canEdit ? (e) => { if (e.key === 'Enter') setEditing(true) } : undefined}
+            onKeyDown={canEdit ? (e) => {
+              if (e.key === 'Enter') {
+                if (blockRef.current) blockRef.current.dataset.scrollTop = blockRef.current.scrollTop
+                setEditing(true)
+              }
+            } : undefined}
             dangerouslySetInnerHTML={{
               __html: renderedHtml || (canEdit
                 ? '<p class="placeholder">Double-click to edit…</p>'

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

@@ -10,6 +10,16 @@
   font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
 }
 
+.blockCollapsed {
+  max-height: 360px;
+  overflow: hidden;
+}
+
+.blockCollapsed .preview {
+  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
+}
+
 .preview {
   padding: 16px 20px;
   font-size: 14px;
@@ -206,7 +216,7 @@
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  min-height: 120px;
+
   padding: 16px 20px;
   border: none;
   outline: none;

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

@@ -12,6 +12,8 @@
   font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
   overflow: auto;
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 :global([data-sb-canvas-theme^='dark']) .sticky {
@@ -35,6 +37,7 @@
   word-break: break-word;
   cursor: text;
   min-height: 60px;
+  flex: 1;
 }
 
 :global([data-sb-canvas-theme^='dark']) .text {

package/src/canvas/widgets/TerminalWidget.jsx

@@ -0,0 +1,280 @@
+import { useRef, useEffect, useCallback, useState } from 'react'
+import { readProp } from './widgetProps.js'
+import { schemas } from './widgetProps.js'
+import { getTerminalConfig } from '@dfosco/storyboard-core'
+import ResizeHandle from './ResizeHandle.jsx'
+import styles from './TerminalWidget.module.css'
+import overlayStyles from './embedOverlay.module.css'
+
+const terminalSchema = schemas['terminal']
+
+/**
+ * Lazy-load ghostty-web to avoid bundling WASM in prod.
+ */
+let ghosttyPromise = null
+function loadGhostty() {
+  if (!ghosttyPromise) {
+    ghosttyPromise = import(/* @vite-ignore */ 'ghostty-web')
+      .then(async (mod) => {
+        if (mod.init) await mod.init()
+        return mod
+      })
+      .catch((err) => {
+        ghosttyPromise = null
+        console.warn('[TerminalWidget] ghostty-web not available:', err.message)
+        return null
+      })
+  }
+  return ghosttyPromise
+}
+
+/**
+ * Build the WebSocket URL for the terminal backend.
+ * Includes the base path (e.g. /branch--4.2.0/) so the proxy routes correctly.
+ * Passes canvasId as a query parameter for session scoping.
+ */
+function getWsUrl(sessionId, prettyName) {
+  const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
+  const base = (typeof import.meta !== 'undefined' && import.meta.env?.BASE_URL) || '/'
+  const baseClean = base.endsWith('/') ? base : base + '/'
+  const canvasId = window.__storyboardCanvasBridgeState?.canvasId || 'unknown'
+  let url = `${protocol}//${location.host}${baseClean}_storyboard/terminal/${sessionId}?canvas=${encodeURIComponent(canvasId)}`
+  if (prettyName) url += `&name=${encodeURIComponent(prettyName)}`
+  return url
+}
+
+/**
+ * Calculate terminal cols/rows from pixel dimensions.
+ */
+function calcDimensions(widthPx, heightPx) {
+  // Approximate character cell size for 13px monospace
+  const cellWidth = 7.8
+  const cellHeight = 17
+  const padding = 24 // 12px each side
+  const cols = Math.max(10, Math.floor((widthPx - padding) / cellWidth))
+  const rows = Math.max(4, Math.floor((heightPx - padding) / cellHeight))
+  return { cols, rows }
+}
+
+const DEFAULT_THEME = {
+  background: '#0d1117',
+  foreground: '#e6edf3',
+  cursor: '#e6edf3',
+  selectionBackground: '#264f78',
+  black: '#484f58',
+  red: '#ff7b72',
+  green: '#3fb950',
+  yellow: '#d29922',
+  blue: '#58a6ff',
+  magenta: '#bc8cff',
+  cyan: '#39d2c0',
+  white: '#b1bac4',
+  brightBlack: '#6e7681',
+  brightRed: '#ffa198',
+  brightGreen: '#56d364',
+  brightYellow: '#e3b341',
+  brightBlue: '#79c0ff',
+  brightMagenta: '#d2a8ff',
+  brightCyan: '#56d4dd',
+  brightWhite: '#f0f6fc',
+}
+
+export default function TerminalWidget({ id, props, onUpdate, resizable }) {
+  const width = readProp(props, 'width', terminalSchema)
+  const height = readProp(props, 'height', terminalSchema)
+  const prettyName = props?.prettyName || null
+
+  const containerRef = useRef(null)
+  const termRef = useRef(null)
+  const terminalRef = useRef(null)
+  const wsRef = useRef(null)
+  const [ready, setReady] = useState(false)
+  const [error, setError] = useState(null)
+  const [sessionEnded, setSessionEnded] = useState(false)
+  const [connectAttempt, setConnectAttempt] = useState(0)
+
+  const handleResize = useCallback((w, h) => {
+    onUpdate?.({ width: w, height: h })
+  }, [onUpdate])
+
+  // Initialize terminal
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    let disposed = false
+    let term = null
+    let ws = null
+
+    async function setup() {
+      try {
+        const ghostty = await loadGhostty()
+        if (disposed || !ghostty) return
+
+        const dims = calcDimensions(width, height)
+        const cfg = getTerminalConfig()
+
+        term = new ghostty.Terminal({
+          fontSize: cfg.fontSize ?? 13,
+          fontFamily: cfg.fontFamily ?? "'Ghostty', 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace",
+          cursorBlink: true,
+          cursorStyle: 'bar',
+          cols: dims.cols,
+          rows: dims.rows,
+          theme: { ...DEFAULT_THEME, ...cfg.theme },
+        })
+
+        term.open(containerRef.current)
+        termRef.current = term
+
+        // Connect WebSocket
+        const url = getWsUrl(id, prettyName)
+        ws = new WebSocket(url)
+        wsRef.current = ws
+
+        ws.onopen = () => {
+          if (disposed) return
+          setReady(true)
+          ws.send(JSON.stringify({ type: 'resize', cols: dims.cols, rows: dims.rows }))
+        }
+
+        ws.onmessage = (e) => {
+          if (disposed) return
+          const data = typeof e.data === 'string' ? e.data : null
+          // Intercept JSON control messages from the server
+          if (data && data.startsWith('{')) {
+            try {
+              const msg = JSON.parse(data)
+              if (msg.type === 'session-info' || msg.type === 'conflict' || msg.type === 'detached') {
+                // Control message — don't render to terminal
+                return
+              }
+            } catch {
+              // Not valid JSON — pass through as terminal data
+            }
+          }
+          term.write(typeof e.data === 'string' ? e.data : new Uint8Array(e.data))
+        }
+
+        ws.onclose = () => {
+          if (disposed) return
+          setReady(false)
+          setSessionEnded(true)
+        }
+
+        ws.onerror = () => {
+          if (disposed) return
+          setReady(false)
+          setSessionEnded(true)
+        }
+
+        // Terminal input → WebSocket
+        term.onData((data) => {
+          if (ws.readyState === WebSocket.OPEN) {
+            ws.send(data)
+          }
+        })
+      } catch (err) {
+        if (!disposed) setError(err.message || 'Failed to load terminal')
+      }
+    }
+
+    setup()
+
+    return () => {
+      disposed = true
+      if (ws && ws.readyState <= WebSocket.OPEN) ws.close()
+      if (term) term.dispose()
+      termRef.current = null
+      wsRef.current = null
+    }
+  }, [id, connectAttempt])
+
+  // Resize terminal on dimension changes
+  useEffect(() => {
+    if (!termRef.current) return
+    const timer = setTimeout(() => {
+      const dims = calcDimensions(width, height)
+      termRef.current?.resize?.(dims.cols, dims.rows)
+      if (wsRef.current?.readyState === WebSocket.OPEN) {
+        wsRef.current.send(JSON.stringify({ type: 'resize', cols: dims.cols, rows: dims.rows }))
+      }
+    }, 50)
+    return () => clearTimeout(timer)
+  }, [width, height])
+
+  const handleClick = useCallback(() => {
+    if (sessionEnded) return
+    termRef.current?.focus()
+  }, [sessionEnded])
+
+  const [waking, setWaking] = useState(false)
+
+  const handleStartSession = useCallback(() => {
+    setWaking(true)
+    setTimeout(() => {
+      setWaking(false)
+      setSessionEnded(false)
+      setError(null)
+      setConnectAttempt(c => c + 1)
+    }, 1500)
+  }, [])
+
+  // Show interact gate when session is ready but not interacting
+
+  const titleLabel = `terminal · ${prettyName || '...'}`
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.titleBar}>{titleLabel}</div>
+      <div
+        ref={terminalRef}
+        className={styles.terminal}
+        style={{
+          ...(typeof width === 'number' ? { width: `${width}px` } : undefined),
+          ...(typeof height === 'number' ? { height: `${height}px` } : undefined),
+        }}
+        onClick={handleClick}
+      >
+        {error && !sessionEnded && (
+          <div className={styles.error}>
+            <span>⚠ {error}</span>
+          </div>
+        )}
+        <div ref={containerRef} className={styles.xtermContainer} />
+        {sessionEnded && (
+          <div
+            className={overlayStyles.interactOverlay}
+            style={{ backgroundColor: '#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={overlayStyles.interactHint}>
+              {waking ? 'Waking up...' : 'Start terminal session'}
+            </span>
+          </div>
+        )}
+        {!ready && !error && !sessionEnded && (
+          <div className={styles.loading}>Connecting…</div>
+        )}
+      </div>
+      {resizable && (
+        <ResizeHandle
+          targetRef={terminalRef}
+          onResize={handleResize}
+          minWidth={300}
+          minHeight={200}
+        />
+      )}
+    </div>
+  )
+}