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

package/src/canvas/widgets/PromptWidget.jsx

@@ -0,0 +1,414 @@
+import { useState, useCallback, useEffect, useRef, forwardRef, useImperativeHandle } from 'react'
+import { readProp, promptSchema } from './widgetProps.js'
+import { CopilotIcon, SquareFillIcon, CheckCircleIcon, XIcon } from '@primer/octicons-react'
+import ResizeHandle from './ResizeHandle.jsx'
+import styles from './PromptWidget.module.css'
+
+function getBase() {
+  return (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+}
+
+async function spawnPromptAgent({ canvasId, widgetId, prompt }) {
+  const res = await fetch(`${getBase()}/_storyboard/canvas/prompt/spawn`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ canvasId, widgetId, prompt }),
+  })
+  return res.json()
+}
+
+async function killSession(widgetId) {
+  const res = await fetch(`${getBase()}/_storyboard/canvas/terminal/kill`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ widgetId }),
+  })
+  return res.json()
+}
+
+function getWsUrl(sessionId, canvasId, readOnly = false) {
+  const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
+  const base = (typeof import.meta !== 'undefined' && import.meta.env?.BASE_URL) || '/'
+  const baseClean = base.endsWith('/') ? base : base + '/'
+  let url = `${protocol}//${location.host}${baseClean}_storyboard/terminal/${sessionId}?canvas=${encodeURIComponent(canvasId)}`
+  if (readOnly) url += '&readOnly=1'
+  return url
+}
+
+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('[PromptWidget] ghostty-web not available:', err.message)
+        return null
+      })
+  }
+  return ghosttyPromise
+}
+
+const MINI_FONT_SIZE = 11
+const MINI_TERMINAL_HEIGHT = 180
+
+const DEFAULT_THEME = {
+  background: '#0d1117',
+  foreground: '#e6edf3',
+  cursor: '#e6edf3',
+  selectionBackground: '#264f78',
+}
+
+function calcMiniDimensions(widthPx, heightPx) {
+  const scale = MINI_FONT_SIZE / 13
+  const cellWidth = 7.8 * scale
+  const cellHeight = 17 * scale
+  const hPad = 18
+  const vPad = 18
+  const cols = Math.max(10, Math.floor((widthPx - hPad) / cellWidth))
+  const rows = Math.max(4, Math.floor((heightPx - vPad) / cellHeight))
+  return { cols, rows }
+}
+
+const PromptWidget = forwardRef(function PromptWidget({ id, props, onUpdate, resizable }, ref) {
+  const persistedText = readProp(props, 'text', promptSchema)
+  const persistedStatus = readProp(props, 'status', promptSchema)
+  const errorMessage = readProp(props, 'errorMessage', promptSchema)
+  const width = readProp(props, 'width', promptSchema)
+  const height = readProp(props, 'height', promptSchema)
+  const [draftText, setDraftText] = useState('')
+  const [execStatus, setExecStatus] = useState(persistedStatus || 'idle')
+  const [execError, setExecError] = useState(errorMessage || '')
+  const [showOutput, setShowOutput] = useState(false)
+  const canEdit = typeof onUpdate === 'function'
+
+  const containerRef = useRef(null)
+  const termContainerRef = useRef(null)
+  const termRef = useRef(null)
+  const wsRef = useRef(null)
+  const termDisposedRef = useRef(false)
+  const textareaRef = useRef(null)
+
+  const onUpdateRef = useRef(onUpdate)
+  useEffect(() => { onUpdateRef.current = onUpdate }, [onUpdate])
+
+  useEffect(() => {
+    if (!import.meta.hot) return
+
+    const handler = (data) => {
+      if (data.widgetId !== id) return
+      if (data.status === 'done' || data.status === 'completed') {
+        setExecStatus('done')
+        onUpdateRef.current?.({ status: 'done' })
+      } else if (data.status === 'error') {
+        setExecStatus('error')
+        setExecError(data.message || 'Unknown error')
+        onUpdateRef.current?.({ status: 'error', errorMessage: data.message || 'Unknown error' })
+      } else if (data.status === 'cancelled') {
+        setExecStatus('idle')
+        onUpdateRef.current?.({ status: 'idle', sessionId: '', errorMessage: '' })
+      }
+    }
+
+    import.meta.hot.on('storyboard:agent-status', handler)
+    return () => import.meta.hot.off('storyboard:agent-status', handler)
+  }, [id])
+
+  useImperativeHandle(ref, () => ({
+    handleAction(action) {
+      if (action === 'expand-output') {
+        setShowOutput(prev => !prev)
+        return true
+      }
+      return false
+    },
+    getState(key) {
+      if (key === 'showOutput') return showOutput
+      if (key === 'hasSession') return execStatus !== 'idle'
+      return undefined
+    },
+  }), [id, showOutput, execStatus])
+
+  const handleSubmit = useCallback(async () => {
+    if (!draftText.trim() || !canEdit) return
+
+    setExecStatus('pending')
+    setExecError('')
+
+    const pathParts = window.location.pathname.split('/')
+    const canvasIdx = pathParts.indexOf('canvas')
+    const canvasId = canvasIdx >= 0 ? pathParts[canvasIdx + 1] : 'default'
+
+    onUpdate?.({ text: draftText, status: 'pending' })
+
+    try {
+      const result = await spawnPromptAgent({
+        canvasId,
+        widgetId: id,
+        prompt: draftText,
+      })
+
+      if (result.error) {
+        setExecStatus('error')
+        setExecError(result.error)
+        onUpdate?.({ status: 'error', errorMessage: result.error })
+        return
+      }
+
+      onUpdate?.({ sessionId: result.tmuxName || '' })
+    } catch (err) {
+      setExecStatus('error')
+      setExecError(err.message)
+      onUpdate?.({ status: 'error', errorMessage: err.message })
+    }
+  }, [draftText, canEdit, id, onUpdate])
+
+  const handleCancel = useCallback(async () => {
+    try {
+      await killSession(id)
+      setExecStatus('idle')
+      setExecError('')
+      onUpdate?.({ status: 'idle', sessionId: '', errorMessage: '' })
+    } catch (err) {
+      setExecError(`Cancel failed: ${err.message}`)
+    }
+  }, [id, onUpdate])
+
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault()
+      handleSubmit()
+    }
+    e.stopPropagation()
+  }, [handleSubmit])
+
+  const handleReset = useCallback(() => {
+    setExecStatus('idle')
+    setExecError('')
+    setDraftText('')
+    setShowOutput(false)
+    onUpdate?.({ status: 'idle', sessionId: '', errorMessage: '', text: '' })
+  }, [onUpdate])
+
+  const handleResize = useCallback((newWidth, newHeight) => {
+    const el = containerRef.current
+    const termEl = termContainerRef.current
+    if (el && termEl) {
+      // height prop controls only the terminal area, not the full wrapper
+      const nonTermH = el.offsetHeight - termEl.offsetHeight
+      const newTermH = Math.max(80, newHeight - nonTermH)
+      onUpdate?.({ width: newWidth, height: newTermH })
+    } else {
+      onUpdate?.({ width: newWidth })
+    }
+  }, [onUpdate])
+
+  // Embedded read-only terminal
+  useEffect(() => {
+    if (!showOutput || execStatus === 'idle') return
+    if (!termContainerRef.current) return
+
+    termDisposedRef.current = false
+    let term = null
+    let ws = null
+
+    async function setup() {
+      try {
+        const ghostty = await loadGhostty()
+        if (termDisposedRef.current) return
+        if (!ghostty) return
+
+        const widthPx = typeof width === 'number' ? width : 320
+        const heightPx = typeof height === 'number' ? height : MINI_TERMINAL_HEIGHT
+        const dims = calcMiniDimensions(widthPx, heightPx)
+
+        term = new ghostty.Terminal({
+          fontSize: MINI_FONT_SIZE,
+          fontFamily: "'Ghostty', 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace",
+          cursorBlink: false,
+          cursorStyle: 'bar',
+          cols: dims.cols,
+          rows: dims.rows,
+          theme: DEFAULT_THEME,
+        })
+
+        term.open(termContainerRef.current)
+        termRef.current = term
+
+        const pathParts = window.location.pathname.split('/')
+        const canvasIdx = pathParts.indexOf('canvas')
+        const canvasId = canvasIdx >= 0 ? pathParts[canvasIdx + 1] : 'default'
+
+        const url = getWsUrl(id, canvasId, true)
+        ws = new WebSocket(url)
+        wsRef.current = ws
+
+        ws.onopen = () => {
+          if (termDisposedRef.current) return
+          ws.send(JSON.stringify({ type: 'resize', cols: dims.cols, rows: dims.rows }))
+        }
+
+        ws.onmessage = (e) => {
+          if (termDisposedRef.current) return
+          const data = typeof e.data === 'string' ? e.data : null
+          if (data && data.startsWith('{')) {
+            try {
+              const msg = JSON.parse(data)
+              if (msg.type === 'session-info' || msg.type === 'error') return
+            } catch { /* not JSON */ }
+          }
+          term.write(typeof e.data === 'string' ? e.data : new Uint8Array(e.data))
+        }
+
+        ws.onclose = () => {}
+        ws.onerror = () => {}
+      } catch (err) {
+        console.warn('[PromptWidget] terminal setup failed:', err.message)
+      }
+    }
+
+    setup()
+
+    return () => {
+      termDisposedRef.current = true
+      if (ws && ws.readyState <= 1) try { ws.close() } catch { /* best effort */ }
+      if (term) try { term.dispose() } catch { /* best effort */ }
+      termRef.current = null
+      wsRef.current = null
+    }
+  }, [showOutput, execStatus, id, width, height])
+
+  const isPending = execStatus === 'pending'
+  const isDone = execStatus === 'done'
+  const isError = execStatus === 'error'
+  const hasSession = isPending || isDone || isError
+
+  return (
+    <div
+      ref={containerRef}
+      className={styles.wrapper}
+      style={typeof width === 'number' ? { width: `${width}px` } : undefined}
+    >
+      {/* ── Idle / Error: input state ── */}
+      {(execStatus === 'idle' || isError) && (
+        <>
+          <div className={styles.header}>
+            <span className={styles.avatar}>
+              <CopilotIcon size={20} />
+            </span>
+            <textarea
+              ref={textareaRef}
+              className={styles.textarea}
+              data-canvas-allow-text-selection
+              value={draftText}
+              onChange={(e) => setDraftText(e.target.value)}
+              onKeyDown={handleKeyDown}
+              onMouseDown={(e) => e.stopPropagation()}
+              onPointerDown={(e) => e.stopPropagation()}
+              placeholder="What should I do?"
+              rows={1}
+              disabled={!canEdit}
+            />
+          </div>
+
+          {isError && (
+            <p className={styles.errorText} title={execError}>
+              {execError}
+            </p>
+          )}
+
+          <div className={styles.toolbar}>
+            <button
+              className={styles.submitBtn}
+              onClick={handleSubmit}
+              disabled={!draftText.trim() || !canEdit}
+              title="Run prompt (⌘+Enter)"
+            >
+              {isError ? 'Retry' : 'Run'}
+            </button>
+          </div>
+        </>
+      )}
+
+      {/* ── Pending state ── */}
+      {isPending && (
+        <div className={styles.pendingArea}>
+          <div className={styles.pendingHeader}>
+            <span className={styles.avatar}>
+              <CopilotIcon size={20} />
+            </span>
+            <p className={styles.pendingText}>{persistedText || draftText}</p>
+          </div>
+          <div className={styles.pendingFooter}>
+            <span className={styles.pendingHint}>Processing…</span>
+            <button
+              className={styles.cancelBtn}
+              onClick={handleCancel}
+              title="Cancel (stop agent)"
+            >
+              <svg className={styles.spinnerSvg} viewBox="0 0 16 16" width="14" height="14">
+                <circle cx="8" cy="8" r="6" fill="none" stroke="currentColor" strokeWidth="2" strokeDasharray="28 10" />
+              </svg>
+              <span className={styles.stopIcon}>
+                <SquareFillIcon size={8} />
+              </span>
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* ── Done state ── */}
+      {isDone && (
+        <div className={styles.doneArea}>
+          <div className={styles.doneHeader}>
+            <span className={`${styles.avatar} ${styles.avatarDone}`}>
+              <CheckCircleIcon size={20} />
+            </span>
+            <p className={styles.doneText}>{persistedText}</p>
+          </div>
+          <button className={styles.resetBtn} onClick={handleReset}>
+            New prompt
+          </button>
+        </div>
+      )}
+
+      {/* ── Inline read-only terminal output ── */}
+      {hasSession && showOutput && (
+        <div className={styles.terminalArea}>
+          <div className={styles.terminalHeader}>
+            <span className={styles.terminalLabel}>Output</span>
+            <button
+              className={styles.terminalClose}
+              onClick={() => setShowOutput(false)}
+              title="Hide output"
+            >
+              <XIcon size={12} />
+            </button>
+          </div>
+          <div
+            ref={termContainerRef}
+            className={styles.terminalContainer}
+            onMouseDown={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+            style={{
+              pointerEvents: 'none',
+              height: typeof height === 'number' ? `${height}px` : undefined,
+            }}
+          />
+        </div>
+      )}
+      {resizable && (
+        <ResizeHandle
+          targetRef={containerRef}
+          minWidth={200}
+          onResize={handleResize}
+        />
+      )}
+    </div>
+  )
+})
+
+export default PromptWidget

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

@@ -0,0 +1,273 @@
+/* ── Loom-style prompt widget ── */
+
+.wrapper {
+  background: var(--bgColor-default, #fff);
+  border: 1px solid var(--borderColor-default, #d0d7de);
+  border-radius: 16px;
+  padding: 20px;
+  min-width: 200px;
+  font-family: var(--fontStack-system, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.06);
+}
+
+/* ── Header: avatar + textarea ── */
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--bgColor-neutral-muted, #eaeef2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--fgColor-muted, #636c76);
+}
+
+.avatarDone {
+  background: var(--bgColor-success-muted, #dafbe1);
+  color: var(--fgColor-success, #1a7f37);
+}
+
+.textarea {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: var(--fgColor-default, #1f2328);
+  font-size: 14px;
+  font-family: inherit;
+  line-height: 1.5;
+  resize: none;
+  padding: 4px 0;
+  min-height: 24px;
+  field-sizing: content;
+}
+
+.textarea:focus {
+  outline: none;
+}
+
+.textarea::placeholder {
+  color: var(--fgColor-muted, #636c76);
+}
+
+/* ── Toolbar: icons + submit ── */
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-bottom: 4px;
+}
+
+
+.submitBtn {
+  font-size: 12px;
+  padding: 4px 14px;
+  border-radius: 6px;
+  border: 1px solid var(--borderColor-default, #d0d7de);
+  background: var(--bgColor-default, #fff);
+  color: var(--fgColor-muted, #636c76);
+  cursor: pointer;
+  white-space: nowrap;
+  font-weight: 500;
+  transition: background 0.15s, color 0.15s;
+}
+
+.submitBtn:hover:not(:disabled) {
+  background: var(--bgColor-neutral-muted, rgba(175, 184, 193, 0.2));
+  color: var(--fgColor-default, #1f2328);
+}
+
+.submitBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ── Error ── */
+
+.errorText {
+  margin: 0 0 12px;
+  padding: 6px 10px;
+  background: var(--bgColor-danger-muted, #ffebe9);
+  border-radius: 8px;
+  color: var(--fgColor-danger, #cf222e);
+  font-size: 12px;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── Pending state ── */
+
+.pendingArea {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.pendingHeader {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.pendingText {
+  font-size: 14px;
+  color: var(--fgColor-default, #1f2328);
+  line-height: 1.5;
+  margin: 0;
+  padding-top: 4px;
+}
+
+.pendingFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.pendingHint {
+  font-size: 12px;
+  color: var(--fgColor-muted, #636c76);
+  margin: 0;
+}
+
+.cancelBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--fgColor-accent, #0969da);
+  transition: background 0.15s;
+  position: relative;
+  width: 24px;
+  height: 24px;
+}
+
+.cancelBtn:hover {
+  background: var(--bgColor-neutral-muted, rgba(175, 184, 193, 0.2));
+}
+
+.spinnerSvg {
+  animation: spin 1s linear infinite;
+  color: var(--fgColor-accent, #0969da);
+}
+
+.stopIcon {
+  display: none;
+  position: absolute;
+  color: var(--fgColor-danger, #cf222e);
+}
+
+.cancelBtn:hover .spinnerSvg {
+  display: none;
+}
+
+.cancelBtn:hover .stopIcon {
+  display: flex;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* ── Done state ── */
+
+.doneArea {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.doneHeader {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.doneText {
+  font-size: 14px;
+  color: var(--fgColor-default, #1f2328);
+  line-height: 1.5;
+  margin: 0;
+  padding-top: 4px;
+}
+
+.resetBtn {
+  align-self: flex-end;
+  padding: 4px 14px;
+  background: transparent;
+  color: var(--fgColor-accent, #0969da);
+  border: 1px solid var(--borderColor-default, #d0d7de);
+  border-radius: 6px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.resetBtn:hover {
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
+/* ── Inline terminal output (flush to bottom edge) ── */
+
+.terminalArea {
+  margin: 16px -20px -20px;
+  border-top: 1px solid var(--borderColor-muted, #d8dee4);
+  overflow: hidden;
+  border-radius: 0 0 16px 16px;
+}
+
+.terminalHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 10px;
+  background: var(--bgColor-muted, #f6f8fa);
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+}
+
+.terminalLabel {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--fgColor-muted, #636c76);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.terminalClose {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--fgColor-muted, #636c76);
+  transition: background 0.15s;
+}
+
+.terminalClose:hover {
+  background: var(--bgColor-neutral-muted, rgba(175, 184, 193, 0.2));
+  color: var(--fgColor-default, #1f2328);
+}
+
+.terminalContainer {
+  height: 180px;
+  background: #0d1117;
+  overflow: auto;
+}