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

package/src/canvas/widgets/TerminalWidget.jsx

@@ -1,55 +1,98 @@
-import { useRef, useEffect, useCallback, useState } from 'react'
+import { useRef, useEffect, useCallback, useState, useMemo, forwardRef, useImperativeHandle } from 'react'
+import { createPortal } from 'react-dom'
 import { readProp } from './widgetProps.js'
 import { schemas } from './widgetProps.js'
 import { getTerminalConfig } from '@dfosco/storyboard-core'
+import { ScreenNormalIcon } from '@primer/octicons-react'
+import { useOverride } from '../../hooks/useOverride.js'
+import { getSplitPaneLabel, findConnectedSplitTarget, buildSecondaryIframeUrl as buildSplitUrl, getPaneOrder } from './expandUtils.js'
+import SplitScreenTopBar from './SplitScreenTopBar.jsx'
 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('ghostty-web').then(async (mod) => {
-      if (mod.init) await mod.init()
-      return mod
-    })
+    ghosttyPromise = import('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) {
+function getWsUrl(sessionId, prettyName, startupCommand) {
   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)}`
+  if (startupCommand) url += `&startupCommand=${encodeURIComponent(startupCommand)}`
   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
+function calcDimensions(widthPx, heightPx, fontSize = 13) {
+  // Cell dimensions scale proportionally with font size.
+  // Base measurements at 13px: ~7.8px wide, ~17px tall.
+  const scale = fontSize / 13
+  const cellWidth = 7.8 * scale
+  const cellHeight = 17 * scale
+  const padding = 24
   const cols = Math.max(10, Math.floor((widthPx - padding) / cellWidth))
   const rows = Math.max(4, Math.floor((heightPx - padding) / cellHeight))
   return { cols, rows }
 }
 
+const EMBED_TYPES = new Set(['prototype', 'story'])
+
+function findConnectedEmbed(widgetId) {
+  const bridge = window.__storyboardCanvasBridgeState
+  if (!bridge?.connectors || !bridge?.widgets) return null
+  const connectedIds = new Set()
+  for (const c of bridge.connectors) {
+    if (c.start?.widgetId === widgetId) connectedIds.add(c.end?.widgetId)
+    if (c.end?.widgetId === widgetId) connectedIds.add(c.start?.widgetId)
+  }
+  for (const w of bridge.widgets) {
+    if (connectedIds.has(w.id) && EMBED_TYPES.has(w.type)) return w
+  }
+  return null
+}
+
+function buildEmbedUrl(widget) {
+  if (!widget) return null
+  const base = (typeof import.meta !== 'undefined' && import.meta.env?.BASE_URL) || '/'
+  const baseClean = base.endsWith('/') ? base.slice(0, -1) : base
+  if (widget.type === 'prototype') {
+    const src = widget.props?.src
+    if (!src) return null
+    if (/^https?:\/\//.test(src)) return src
+    return `${baseClean}${src.startsWith('/') ? '' : '/'}${src}?_sb_embed&_sb_hide_branch_bar`
+  }
+  if (widget.type === 'story') {
+    const storyId = widget.props?.storyId
+    const exportName = widget.props?.exportName
+    if (!storyId) return null
+    const storyData = typeof window !== 'undefined' && window.__storyboardStoryIndex?.[storyId]
+    if (storyData?._route) {
+      const route = exportName ? `${storyData._route}?export=${exportName}` : storyData._route
+      return `${baseClean}${route}`
+    }
+    return null
+  }
+  return null
+}
+
 const DEFAULT_THEME = {
   background: '#0d1117',
   foreground: '#e6edf3',
@@ -73,25 +116,60 @@ const DEFAULT_THEME = {
   brightWhite: '#f0f6fc',
 }
 
-export default function TerminalWidget({ id, props, onUpdate, resizable }) {
-  const width = readProp(props, 'width', terminalSchema)
-  const height = readProp(props, 'height', terminalSchema)
+export default forwardRef(function TerminalWidget({ id, props, onUpdate, resizable }, ref) {
+  const cfg = getTerminalConfig()
+  const fontSize = cfg.fontSize ?? 13
+  const width = props?.width ?? cfg.defaultWidth ?? readProp(props, 'width', terminalSchema)
+  const height = props?.height ?? cfg.defaultHeight ?? readProp(props, 'height', terminalSchema)
   const prettyName = props?.prettyName || null
+  const startupCommand = props?.startupCommand || 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 [interactive, setInteractive] = useState(false)
+  const [expandedOverride, setExpandedOverride, clearExpandedOverride] = useOverride(`_terminal_expanded_${id}`)
+  const expanded = expandedOverride === 'true'
+  const setExpanded = useCallback((val) => {
+    if (val) setExpandedOverride('true')
+    else clearExpandedOverride()
+  }, [setExpandedOverride, clearExpandedOverride])
+  const [waking, setWaking] = useState(false)
+  const [showDragHint, setShowDragHint] = useState(false)
+  const expandContainerRef = useRef(null)
+  const dragHintTimer = useRef(null)
+
+  useImperativeHandle(ref, () => ({
+    handleAction(actionId) {
+      if (actionId === 'expand' || actionId === 'split-screen') setExpanded(true)
+    },
+  }), [setExpanded])
+
+  // Exit interactive on click outside
+  useEffect(() => {
+    if (!interactive) return
+    function handlePointerDown(e) {
+      if (terminalRef.current && !terminalRef.current.contains(e.target)) {
+        const chromeEl = e.target.closest(`[data-widget-id="${id}"]`)
+        if (chromeEl) return
+        setInteractive(false)
+      }
+    }
+    document.addEventListener('pointerdown', handlePointerDown)
+    return () => document.removeEventListener('pointerdown', handlePointerDown)
+  }, [interactive, id])
 
   const handleResize = useCallback((w, h) => {
     onUpdate?.({ width: w, height: h })
   }, [onUpdate])
 
-  // Initialize terminal
+  // Connect terminal + WebSocket
   useEffect(() => {
     if (!containerRef.current) return
 
@@ -103,8 +181,12 @@ export default function TerminalWidget({ id, props, onUpdate, resizable }) {
       try {
         const ghostty = await loadGhostty()
         if (disposed) return
+        if (!ghostty) {
+          setError('ghostty-web not installed — add it to your dependencies to enable terminal widgets')
+          return
+        }
 
-        const dims = calcDimensions(width, height)
+        const dims = calcDimensions(width, height, fontSize)
         const cfg = getTerminalConfig()
 
         term = new ghostty.Terminal({
@@ -120,31 +202,39 @@ export default function TerminalWidget({ id, props, onUpdate, resizable }) {
         term.open(containerRef.current)
         termRef.current = term
 
-        // Connect WebSocket
-        const url = getWsUrl(id, prettyName)
+        // SGR mouse wheel for tmux scroll in alternate screen
+        term.attachCustomWheelEventHandler((e) => {
+          if (!(term.wasmTerm?.isAlternateScreen?.() ?? false)) return false
+          const sock = wsRef.current
+          if (!sock || sock.readyState !== WebSocket.OPEN) return true
+          const btn = e.deltaY < 0 ? 64 : 65
+          const lines = Math.max(1, Math.min(5, Math.ceil(Math.abs(e.deltaY) / 33)))
+          for (let i = 0; i < lines; i++) {
+            sock.send(`\x1b[<${btn};1;1M`)
+            sock.send(`\x1b[<${btn};1;1m`)
+          }
+          return true
+        })
+
+        const url = getWsUrl(id, prettyName, startupCommand)
         ws = new WebSocket(url)
         wsRef.current = ws
 
         ws.onopen = () => {
           if (disposed) return
           setReady(true)
+          setInteractive(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
-            }
+              if (msg.type === 'session-info' || msg.type === 'conflict' || msg.type === 'detached') return
+            } catch { /* not JSON */ }
           }
           term.write(typeof e.data === 'string' ? e.data : new Uint8Array(e.data))
         }
@@ -161,11 +251,8 @@ export default function TerminalWidget({ id, props, onUpdate, resizable }) {
           setSessionEnded(true)
         }
 
-        // Terminal input → WebSocket
         term.onData((data) => {
-          if (ws.readyState === WebSocket.OPEN) {
-            ws.send(data)
-          }
+          if (ws.readyState === WebSocket.OPEN) ws.send(data)
         })
       } catch (err) {
         if (!disposed) setError(err.message || 'Failed to load terminal')
@@ -187,7 +274,7 @@ export default function TerminalWidget({ id, props, onUpdate, resizable }) {
   useEffect(() => {
     if (!termRef.current) return
     const timer = setTimeout(() => {
-      const dims = calcDimensions(width, height)
+      const dims = calcDimensions(width, height, fontSize)
       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 }))
@@ -196,12 +283,84 @@ export default function TerminalWidget({ id, props, onUpdate, resizable }) {
     return () => clearTimeout(timer)
   }, [width, height])
 
+  // Resize for expand
+  useEffect(() => {
+    if (!expanded || !termRef.current || !expandContainerRef.current) return
+    const timer = setTimeout(() => {
+      const el = expandContainerRef.current
+      if (!el) return
+      const dims = calcDimensions(el.clientWidth, el.clientHeight - 40, fontSize)
+      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 }))
+      }
+      setInteractive(true)
+      termRef.current?.focus?.()
+    }, 100)
+    return () => clearTimeout(timer)
+  }, [expanded])
+
+  // Restore size on collapse
+  useEffect(() => {
+    if (expanded || !termRef.current) return
+    const timer = setTimeout(() => {
+      const dims = calcDimensions(width, height, fontSize)
+      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 }))
+      }
+    }, 100)
+    return () => clearTimeout(timer)
+  }, [expanded, width, height])
+
+  // Reparent terminal DOM between inline and expand
+  useEffect(() => {
+    const xtermEl = containerRef.current
+    if (!xtermEl) return
+    if (expanded && expandContainerRef.current) {
+      expandContainerRef.current.appendChild(xtermEl)
+    } else if (!expanded && terminalRef.current) {
+      terminalRef.current.appendChild(xtermEl)
+    }
+  }, [expanded])
+
   const handleClick = useCallback(() => {
     if (sessionEnded) return
-    termRef.current?.focus()
-  }, [sessionEnded])
+    if (ready) {
+      setInteractive(true)
+      const scrollEl = terminalRef.current?.closest('[class*="canvasScroll"]')
+      const scrollTop = scrollEl?.scrollTop
+      const scrollLeft = scrollEl?.scrollLeft
+      termRef.current?.focus({ preventScroll: true })
+      if (scrollEl && (scrollEl.scrollTop !== scrollTop || scrollEl.scrollLeft !== scrollLeft)) {
+        scrollEl.scrollTop = scrollTop
+        scrollEl.scrollLeft = scrollLeft
+      }
+    }
+  }, [sessionEnded, ready])
 
-  const [waking, setWaking] = useState(false)
+  const handleTerminalPointerDown = useCallback((e) => {
+    if (!interactive) return
+    if (e.target.closest('.tc-drag-handle')) return
+    e.stopPropagation()
+    const startX = e.clientX
+    const startY = e.clientY
+    let moved = false
+    function onMove(me) {
+      if (!moved && (Math.abs(me.clientX - startX) > 5 || Math.abs(me.clientY - startY) > 5)) {
+        moved = true
+        setShowDragHint(true)
+        clearTimeout(dragHintTimer.current)
+        dragHintTimer.current = setTimeout(() => setShowDragHint(false), 2000)
+      }
+    }
+    function onUp() {
+      document.removeEventListener('pointermove', onMove)
+      document.removeEventListener('pointerup', onUp)
+    }
+    document.addEventListener('pointermove', onMove)
+    document.addEventListener('pointerup', onUp)
+  }, [interactive])
 
   const handleStartSession = useCallback(() => {
     setWaking(true)
@@ -213,11 +372,24 @@ export default function TerminalWidget({ id, props, onUpdate, resizable }) {
     }, 1500)
   }, [])
 
-  // Show interact gate when session is ready but not interacting
+  const titleLabel = `Terminal · ${prettyName || '…'}`
+  const connectedEmbed = expanded ? findConnectedSplitTarget(id) : null
+  const embedUrl = expanded ? buildSplitUrl(connectedEmbed) : null
+  const hasSplit = Boolean(connectedEmbed)
+  const [activePane, setActivePane] = useState('left')
 
-  const titleLabel = `terminal · ${prettyName || '...'}`
+  const paneOrder = useMemo(
+    () => (hasSplit ? getPaneOrder(id, connectedEmbed) : { primaryIsLeft: true }),
+    [hasSplit, id, connectedEmbed],
+  )
+  const primaryWidget = useMemo(() => ({ type: 'terminal', props: { prettyName } }), [prettyName])
+  const primaryLabel = useMemo(() => getSplitPaneLabel(primaryWidget), [primaryWidget])
+  const secondaryLabel = useMemo(() => getSplitPaneLabel(connectedEmbed), [connectedEmbed])
+  const leftLabel = paneOrder.primaryIsLeft ? primaryLabel : secondaryLabel
+  const rightLabel = paneOrder.primaryIsLeft ? secondaryLabel : primaryLabel
 
   return (
+    <>
     <div className={styles.container}>
       <div className={styles.titleBar}>{titleLabel}</div>
       <div
@@ -228,13 +400,41 @@ export default function TerminalWidget({ id, props, onUpdate, resizable }) {
           ...(typeof height === 'number' ? { height: `${height}px` } : undefined),
         }}
         onClick={handleClick}
+        onPointerDown={handleTerminalPointerDown}
+        onKeyDown={interactive ? (e) => e.stopPropagation() : undefined}
       >
+        {showDragHint && (
+          <div className={styles.dragHint}>
+            <span className={styles.dragHintArrow}>←</span> Drag here to move widget
+          </div>
+        )}
         {error && !sessionEnded && (
           <div className={styles.error}>
             <span>⚠ {error}</span>
           </div>
         )}
         <div ref={containerRef} className={styles.xtermContainer} />
+
+        {/* Live but not interactive */}
+        {ready && !interactive && !sessionEnded && (
+          <div
+            className={overlayStyles.interactOverlay}
+            style={{ backgroundColor: 'transparent' }}
+            onClick={(e) => {
+              if (e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return
+              setInteractive(true)
+              termRef.current?.focus({ preventScroll: true })
+            }}
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e) => { if (e.key === 'Enter') { setInteractive(true); termRef.current?.focus({ preventScroll: true }) } }}
+            aria-label="Click to interact"
+          >
+            <span className={overlayStyles.interactHint}>Click to interact</span>
+          </div>
+        )}
+
+        {/* Session ended */}
         {sessionEnded && (
           <div
             className={overlayStyles.interactOverlay}
@@ -253,10 +453,12 @@ export default function TerminalWidget({ id, props, onUpdate, resizable }) {
               </div>
             )}
             <span className={overlayStyles.interactHint}>
-              {waking ? 'Waking up...' : 'Start terminal session'}
+              {waking ? 'Waking up...' : connectAttempt > 0 ? 'Continue terminal session' : 'Start terminal session'}
             </span>
           </div>
         )}
+
+        {/* Connecting */}
         {!ready && !error && !sessionEnded && (
           <div className={styles.loading}>Connecting…</div>
         )}
@@ -270,5 +472,53 @@ export default function TerminalWidget({ id, props, onUpdate, resizable }) {
         />
       )}
     </div>
+    {createPortal(
+      <div
+        className={styles.expandBackdrop}
+        style={expanded ? undefined : { display: 'none' }}
+        onPointerDown={(e) => e.stopPropagation()}
+        onKeyDown={(e) => { if (e.key === 'Escape') setExpanded(false) }}
+        onWheel={(e) => e.stopPropagation()}
+      >
+        {hasSplit ? (
+          <SplitScreenTopBar
+            leftLabel={leftLabel}
+            rightLabel={rightLabel}
+            activePane={activePane}
+            onClose={() => setExpanded(false)}
+          />
+        ) : (
+          <div className={styles.expandTopBar}>
+            <span className={styles.expandTitle}>{titleLabel}</span>
+            <button className={styles.expandClose} onClick={() => setExpanded(false)} aria-label="Close expanded view" autoFocus><ScreenNormalIcon size={16} /></button>
+          </div>
+        )}
+        <div className={`${styles.expandBody}${hasSplit ? ` ${styles.expandSplit}` : ''}`}>
+          {hasSplit ? (
+            <>
+              {paneOrder.primaryIsLeft ? (
+                <>
+                  <div ref={expandContainerRef} className={styles.expandTerminal} onPointerDown={() => setActivePane('left')} />
+                  <div className={styles.expandEmbed} onPointerDown={() => setActivePane('right')}>
+                    {embedUrl ? <iframe src={embedUrl} className={styles.expandIframe} title="Connected embed" /> : null}
+                  </div>
+                </>
+              ) : (
+                <>
+                  <div className={styles.expandEmbed} onPointerDown={() => setActivePane('left')}>
+                    {embedUrl ? <iframe src={embedUrl} className={styles.expandIframe} title="Connected embed" /> : null}
+                  </div>
+                  <div ref={expandContainerRef} className={styles.expandTerminal} onPointerDown={() => setActivePane('right')} />
+                </>
+              )}
+            </>
+          ) : (
+            <div ref={expandContainerRef} className={styles.expandTerminal} />
+          )}
+        </div>
+      </div>,
+      document.body
+    )}
+    </>
   )
-}
+})

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

@@ -33,7 +33,8 @@
   background: #0d1117;
   border: 1px solid var(--borderColor-default, #30363d);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
-  padding: 8px;
+  padding: var(--base-size-8, 8px);
+  padding-bottom: var(--base-size-16, 16px);
 }
 
 .xtermContainer {
@@ -49,6 +50,22 @@
   padding: 12px;
 }
 
+/* Hide the native caret on ghostty-web's helper textarea —
+   without this it renders a visible blinking cursor at (0,0)
+   and triggers scrollIntoView on focus (scroll-to-top bug). */
+.xtermContainer :global(.xterm-helper-textarea),
+.xtermContainer textarea {
+  caret-color: transparent !important;
+  opacity: 0 !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  pointer-events: none !important;
+}
+
 .xtermContainer :global(.xterm-viewport) {
   overflow-y: auto;
 }
@@ -156,3 +173,140 @@
     transform: translateY(-24px);
   }
 }
+
+/* Fullscreen expand */
+
+/* Drag hint tooltip — appears when user tries to drag the terminal body */
+.dragHint {
+  position: absolute;
+  bottom: -32px;
+  right: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  background: var(--bgColor-inverse, #1f2328);
+  color: var(--fgColor-onInverse, #ffffff);
+  font-size: 12px;
+  font-weight: 500;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  white-space: nowrap;
+  pointer-events: none;
+  animation: dragHintIn 150ms ease;
+}
+
+.dragHintArrow {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+@keyframes dragHintIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.expandBackdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 100000;
+  background: #0d1117;
+  display: flex;
+  flex-direction: column;
+  animation: expandFadeIn 0.15s ease;
+}
+
+@keyframes expandFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.expandTopBar {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding: 0 12px;
+  background: #161b22;
+  border-bottom: 1px solid #30363d;
+  flex-shrink: 0;
+}
+
+.expandTitle {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  color: #e6edf3;
+}
+
+.expandEmbedLabel {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 12px;
+  color: #8b949e;
+  margin-left: auto;
+  margin-right: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.expandClose {
+  all: unset;
+  cursor: pointer;
+  margin-left: auto;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  color: #8b949e;
+  font-size: 14px;
+  transition: background 100ms, color 100ms;
+}
+
+.expandClose:hover {
+  background: #30363d;
+  color: #e6edf3;
+}
+
+.expandEmbedLabel + .expandClose {
+  margin-left: 0;
+}
+
+.expandBody {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+
+.expandTerminal {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  background: #0d1117;
+}
+
+.expandTerminal :global(.xterm) {
+  height: 100%;
+}
+
+.expandSplit .expandTerminal {
+  flex: 1;
+  border-right: 1px solid #30363d;
+}
+
+.expandSplit .expandEmbed {
+  flex: 1;
+  min-width: 0;
+}
+
+.expandEmbed {
+  display: flex;
+}
+
+.expandIframe {
+  border: none;
+  width: 100%;
+  height: 100%;
+}