@dfosco/storyboard-react 4.2.0-beta.4 → 4.2.0

package/src/canvas/widgets/TerminalReadWidget.jsx

@@ -0,0 +1,146 @@
+import { useRef, useEffect, useState } from 'react'
+import { readProp, schemas } from './widgetProps.js'
+import styles from './TerminalReadWidget.module.css'
+
+const terminalSchema = schemas['terminal']
+
+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 + '/'
+}
+
+function getCanvasId() {
+  return window.__storyboardCanvasBridgeState?.canvasId || null
+}
+
+function isProduction() {
+  return typeof import.meta !== 'undefined' && import.meta.env?.PROD
+}
+
+export default function TerminalReadWidget({ id, props }) {
+  const width = readProp(props, 'width', terminalSchema)
+  const height = readProp(props, 'height', terminalSchema)
+  const prettyName = props?.prettyName || '...'
+
+  const [content, setContent] = useState(null)
+  const [html, setHtml] = useState(null)
+  const [failed, setFailed] = useState(false)
+  const contentRef = useRef(null)
+
+  useEffect(() => {
+    let cancelled = false
+    async function fetchSnapshot() {
+      const baseUrl = getBaseUrl()
+      const canvasId = getCanvasId()
+      if (!canvasId) { setFailed(true); return }
+
+      const urls = isProduction()
+        ? [
+            // New flat format: <widgetId>.snapshot.json
+            `${baseUrl}_storyboard/terminal-snapshots/${id}.snapshot.json`,
+            // Legacy nested format: <canvasDir>/<widgetId>.json
+            `${baseUrl}_storyboard/terminal-snapshots/${canvasId.replace(/\//g, '--')}/${id}.json`,
+          ]
+        : [
+            `${baseUrl}_storyboard/canvas/terminal-snapshot/${id}`,
+            `${baseUrl}_storyboard/terminal-snapshots/${id}.snapshot.json`,
+            `${baseUrl}_storyboard/terminal-snapshots/${canvasId.replace(/\//g, '--')}/${id}.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 || ''
+          setContent(text)
+
+          const converter = await getConverter()
+          if (cancelled) return
+          if (converter) {
+            setHtml(converter.toHtml(text))
+          } else {
+            setContent(stripAnsi(text))
+          }
+          return
+        } catch {
+          continue
+        }
+      }
+      if (!cancelled) setFailed(true)
+    }
+    fetchSnapshot()
+    return () => { cancelled = true }
+  }, [id])
+
+  // Auto-scroll to bottom
+  useEffect(() => {
+    if (contentRef.current) {
+      contentRef.current.scrollTop = contentRef.current.scrollHeight
+    }
+  }, [html, content])
+
+  const titleLabel = `terminal · ${prettyName}`
+
+  return (
+    <div className={styles.container}>
+      <div className={`tc-drag-handle ${styles.titleBar}`}>
+        <span>{titleLabel}</span>
+        <span className={styles.readOnlyBadge}>read only</span>
+      </div>
+      <div
+        ref={contentRef}
+        className={styles.content}
+        style={{
+          ...(typeof width === 'number' ? { width: `${width}px` } : undefined),
+          ...(typeof height === 'number' ? { height: `${height}px` } : undefined),
+        }}
+      >
+        {failed && (
+          <div className={styles.placeholder}>
+            <span className={styles.placeholderTitle}>Terminal session · {prettyName}</span>
+            <span className={styles.placeholderSub}>No captured output available</span>
+          </div>
+        )}
+        {!failed && content === null && (
+          <div className={styles.placeholder}>
+            <span className={styles.placeholderSub}>Loading…</span>
+          </div>
+        )}
+        {!failed && html && (
+          <pre
+            style={{ margin: 0, whiteSpace: 'pre', fontFamily: 'inherit', fontSize: 'inherit', lineHeight: 'inherit' }}
+            dangerouslySetInnerHTML={{ __html: html }}
+          />
+        )}
+        {!failed && content !== null && !html && (
+          <pre style={{ margin: 0, whiteSpace: 'pre', fontFamily: 'inherit', fontSize: 'inherit', lineHeight: 'inherit' }}>
+            {content}
+          </pre>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,94 @@
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--base-size-16, 16px);
+}
+
+:global(.tc-drag-surface):has(.container) {
+  border-radius: 16px;
+}
+
+.titleBar {
+  position: absolute;
+  top: -28px;
+  left: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 11px;
+  color: #8b949e;
+  user-select: none;
+  white-space: nowrap;
+  z-index: 2;
+  cursor: grab;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+[data-widget-selected] .titleBar {
+  color: var(--borderColor-accent-emphasis, #0969da);
+}
+
+.readOnlyBadge {
+  font-size: 10px;
+  color: #6e7681;
+  background: rgba(110, 118, 129, 0.15);
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+.content {
+  background: #0d1117;
+  color: #e6edf3;
+  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 17px;
+  padding: 12px;
+  overflow-y: auto;
+  white-space: pre;
+  flex: 1;
+  border: 1px solid var(--borderColor-default, #30363d);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
+  border-radius: var(--base-size-16, 16px);
+  box-sizing: border-box;
+}
+
+.content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.content::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 3px;
+}
+
+.content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 100%;
+  color: #8b949e;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 13px;
+  text-align: center;
+  user-select: none;
+}
+
+.placeholderTitle {
+  color: #e6edf3;
+  font-weight: 500;
+}
+
+.placeholderSub {
+  color: #6e7681;
+  font-size: 12px;
+}