@opengeni/react 1.0.1 → 1.0.2-canary.37202341988001

package/dist/chunk-WRHIZYZF.js

@@ -0,0 +1,988 @@
+import {
+  sandboxAcceptsLiveIo
+} from "./chunk-YV4L3ILF.js";
+import {
+  STREAM_KIND_PTY,
+  STREAM_ROLE_CLIENT,
+  decodeStreamFrame,
+  decodeStreamOpenAck,
+  encodeStreamFrame,
+  encodeStreamOpen
+} from "./chunk-5J4FOW6Q.js";
+import {
+  sandboxTerminalPeers
+} from "./chunk-JT4JW7BC.js";
+import {
+  cn
+} from "./chunk-22KP6LR5.js";
+
+// src/hooks/use-terminal-stream.ts
+import {
+  TTYD_SUBPROTOCOL,
+  terminalSocketUrl,
+  ttydAuthFrame,
+  ttydInputFrame,
+  ttydResizeFrame,
+  TtydServerCommand
+} from "@opengeni/sdk";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+var MAX_PENDING_TERMINAL_INPUT_CODE_UNITS = 64 * 1024;
+var TERMINAL_CONNECT_EXPIRY_SKEW_MS = 5e3;
+var TERMINAL_RECONNECT_INITIAL_MS = 100;
+var TERMINAL_RECONNECT_MAX_MS = 3e3;
+var RELAY_TAG_OPEN = 1;
+var RELAY_TAG_OPEN_ACK = 2;
+var RELAY_TAG_FRAME = 3;
+function relayDatagram(tag, body) {
+  const bytes = new Uint8Array(body.length + 1);
+  bytes[0] = tag;
+  bytes.set(body, 1);
+  return bytes.buffer;
+}
+function relayChannelFromUrl(url) {
+  const endpoint = new URL(url);
+  const channel = {
+    channelId: endpoint.searchParams.get("channel") ?? "",
+    workspaceId: endpoint.searchParams.get("ws") ?? "",
+    agentId: endpoint.searchParams.get("agent") ?? "",
+    kind: STREAM_KIND_PTY,
+    port: Number(endpoint.searchParams.get("port") ?? "0")
+  };
+  if (!channel.channelId || !channel.workspaceId || !channel.agentId || !Number.isSafeInteger(channel.port) || channel.port <= 0) {
+    throw new Error("terminal relay endpoint is incomplete");
+  }
+  return channel;
+}
+function sendRelayInput(socket, channel, sequence, data) {
+  socket.send(
+    relayDatagram(
+      RELAY_TAG_FRAME,
+      encodeStreamFrame({
+        channelId: channel.channelId,
+        seq: sequence.toString(),
+        data: new TextEncoder().encode(data),
+        producedAtMs: String(Date.now())
+      })
+    )
+  );
+}
+function terminalStreamCredentialUsable(capability, nowMs = Date.now()) {
+  if (capability?.transport !== "pty-ws" && capability?.transport !== "relay-pty" || !capability.url) {
+    return false;
+  }
+  if (!capability.expiresAt) return true;
+  const expiresAt = Date.parse(capability.expiresAt);
+  return Number.isFinite(expiresAt) && expiresAt > nowMs + TERMINAL_CONNECT_EXPIRY_SKEW_MS;
+}
+function decodeFrame(data) {
+  if (typeof data === "string") {
+    return { command: data.charAt(0), payload: data.slice(1) };
+  }
+  const bytes = new Uint8Array(data);
+  const command = bytes.length > 0 ? String.fromCharCode(bytes[0]) : "";
+  const payload = bytes.length > 1 ? new TextDecoder().decode(bytes.subarray(1)) : "";
+  return { command, payload };
+}
+function closeSocket(socket) {
+  try {
+    socket?.close();
+  } catch {
+  }
+}
+function useTerminalStream(options) {
+  const { capability, onOutput, onTitle, onReconnectNeeded, initialCols, initialRows } = options;
+  const [status, setStatus] = useState("closed");
+  const [reconnectGeneration, setReconnectGeneration] = useState(0);
+  const wsRef = useRef(null);
+  const pendingInputRef = useRef("");
+  const socketFailedRef = useRef(false);
+  const socketAuthenticatedRef = useRef(false);
+  const relayChannelRef = useRef(null);
+  const relayIdentityRef = useRef(null);
+  const relayInputSequenceRef = useRef(0n);
+  const relayOutputSequenceRef = useRef(0n);
+  const reconnectAttemptRef = useRef(0);
+  const credentialIdentityRef = useRef(null);
+  const refreshRequestedRef = useRef(false);
+  const intentionalCloseRef = useRef(/* @__PURE__ */ new WeakSet());
+  const sizeRef = useRef({
+    cols: initialCols ?? 80,
+    rows: initialRows ?? 24
+  });
+  const onOutputRef = useRef(onOutput);
+  const onTitleRef = useRef(onTitle);
+  const onReconnectNeededRef = useRef(onReconnectNeeded);
+  onOutputRef.current = onOutput;
+  onTitleRef.current = onTitle;
+  onReconnectNeededRef.current = onReconnectNeeded;
+  const transport = capability?.transport ?? null;
+  const url = capability?.url ?? null;
+  const token = capability?.token ?? null;
+  const expiresAt = capability?.expiresAt ?? null;
+  const transportRef = useRef(transport);
+  transportRef.current = transport;
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof WebSocket === "undefined") return;
+    const relay = transport === "relay-pty";
+    if (transport !== "pty-ws" && !relay) {
+      pendingInputRef.current = "";
+      socketAuthenticatedRef.current = false;
+      relayIdentityRef.current = null;
+      relayInputSequenceRef.current = 0n;
+      relayOutputSequenceRef.current = 0n;
+      reconnectAttemptRef.current = 0;
+      credentialIdentityRef.current = null;
+      refreshRequestedRef.current = false;
+      setStatus("closed");
+      return;
+    }
+    const credentialIdentity = `${transport}\0${url ?? ""}\0${token ?? ""}\0${expiresAt ?? ""}`;
+    if (credentialIdentityRef.current !== credentialIdentity) {
+      credentialIdentityRef.current = credentialIdentity;
+      reconnectAttemptRef.current = 0;
+      refreshRequestedRef.current = false;
+    }
+    socketFailedRef.current = false;
+    socketAuthenticatedRef.current = false;
+    if (!url) {
+      setStatus("closed");
+      return;
+    }
+    if (!terminalStreamCredentialUsable({ transport, url, expiresAt })) {
+      setStatus("closed");
+      if (!refreshRequestedRef.current) {
+        refreshRequestedRef.current = true;
+        onReconnectNeededRef.current?.();
+      }
+      return;
+    }
+    let disposed = false;
+    let reconnectTimer = null;
+    let socket;
+    let relayChannel = null;
+    const relayOutputDecoder = new TextDecoder();
+    setStatus("connecting");
+    try {
+      if (relay) {
+        relayChannel = relayChannelFromUrl(url);
+        const relayIdentity = [
+          relayChannel.workspaceId,
+          relayChannel.agentId,
+          relayChannel.port,
+          relayChannel.channelId
+        ].join("\0");
+        if (relayIdentityRef.current !== relayIdentity) {
+          relayIdentityRef.current = relayIdentity;
+          relayInputSequenceRef.current = 0n;
+          relayOutputSequenceRef.current = 0n;
+        }
+        relayChannelRef.current = relayChannel;
+        socket = new WebSocket(url);
+      } else {
+        socket = new WebSocket(terminalSocketUrl({ url }), TTYD_SUBPROTOCOL);
+      }
+    } catch {
+      socketFailedRef.current = true;
+      setStatus("error");
+      return;
+    }
+    socket.binaryType = "arraybuffer";
+    wsRef.current = socket;
+    const requestFreshGrant = () => {
+      if (disposed || refreshRequestedRef.current || intentionalCloseRef.current.has(socket))
+        return;
+      refreshRequestedRef.current = true;
+      onReconnectNeededRef.current?.();
+    };
+    const scheduleTransportReconnect = () => {
+      if (disposed || reconnectTimer !== null || intentionalCloseRef.current.has(socket)) return;
+      if (refreshRequestedRef.current) return;
+      if (!terminalStreamCredentialUsable({ transport, url, expiresAt })) {
+        requestFreshGrant();
+        return;
+      }
+      const attempt = reconnectAttemptRef.current++;
+      const delay = Math.min(
+        TERMINAL_RECONNECT_INITIAL_MS * 2 ** Math.min(attempt, 8),
+        TERMINAL_RECONNECT_MAX_MS
+      );
+      setStatus("connecting");
+      reconnectTimer = setTimeout(() => {
+        reconnectTimer = null;
+        if (!disposed) setReconnectGeneration((generation) => generation + 1);
+      }, delay);
+    };
+    socket.onopen = () => {
+      if (disposed) return;
+      if (relay && relayChannel) {
+        try {
+          socket.send(
+            relayDatagram(
+              RELAY_TAG_OPEN,
+              encodeStreamOpen({
+                channel: relayChannel,
+                token: token ?? "",
+                role: STREAM_ROLE_CLIENT,
+                resumeFromSeq: relayOutputSequenceRef.current.toString()
+              })
+            )
+          );
+        } catch {
+          socketFailedRef.current = false;
+          setStatus("connecting");
+          closeSocket(socket);
+        }
+        return;
+      }
+      try {
+        socket.send(ttydAuthFrame({ columns: sizeRef.current.cols, rows: sizeRef.current.rows }));
+        socket.send(ttydResizeFrame(sizeRef.current.cols, sizeRef.current.rows));
+        if (pendingInputRef.current.length > 0) {
+          socket.send(ttydInputFrame(pendingInputRef.current));
+          pendingInputRef.current = "";
+        }
+        socketAuthenticatedRef.current = true;
+      } catch {
+        socketFailedRef.current = false;
+        setStatus("connecting");
+        closeSocket(socket);
+        return;
+      }
+      setStatus("open");
+      reconnectAttemptRef.current = 0;
+      refreshRequestedRef.current = false;
+    };
+    socket.onmessage = (ev) => {
+      if (disposed) return;
+      if (relay) {
+        if (!(ev.data instanceof ArrayBuffer) || !relayChannel) return;
+        const bytes = new Uint8Array(ev.data);
+        if (bytes.length < 1) return;
+        const tag = bytes[0];
+        const body = bytes.subarray(1);
+        if (tag === RELAY_TAG_OPEN_ACK) {
+          try {
+            const ack = decodeStreamOpenAck(body);
+            if (!ack.accepted) throw new Error(ack.error?.message ?? "terminal relay rejected");
+            reconnectAttemptRef.current = 0;
+            refreshRequestedRef.current = false;
+            socketAuthenticatedRef.current = true;
+            if (pendingInputRef.current.length > 0) {
+              sendRelayInput(
+                socket,
+                relayChannel,
+                relayInputSequenceRef.current++,
+                pendingInputRef.current
+              );
+              pendingInputRef.current = "";
+            }
+            setStatus("open");
+          } catch {
+            socketFailedRef.current = true;
+            setStatus("error");
+            requestFreshGrant();
+            closeSocket(socket);
+          }
+        } else if (tag === RELAY_TAG_FRAME && socketAuthenticatedRef.current) {
+          try {
+            const frame = decodeStreamFrame(body);
+            const sequence = BigInt(frame.seq);
+            if (sequence < relayOutputSequenceRef.current) return;
+            relayOutputSequenceRef.current = sequence + 1n;
+            if (frame.data.length > 0) {
+              onOutputRef.current?.(relayOutputDecoder.decode(frame.data, { stream: true }));
+            }
+          } catch {
+          }
+        }
+        return;
+      }
+      const { command, payload } = decodeFrame(ev.data);
+      switch (command) {
+        case TtydServerCommand.OUTPUT:
+          onOutputRef.current?.(payload);
+          break;
+        case TtydServerCommand.SET_WINDOW_TITLE:
+          onTitleRef.current?.(payload);
+          break;
+        // SET_PREFERENCES ("2") and anything else: ignored.
+        default:
+          break;
+      }
+    };
+    socket.onerror = () => {
+      if (!disposed) {
+        socketFailedRef.current = false;
+        setStatus("connecting");
+        closeSocket(socket);
+      }
+    };
+    socket.onclose = () => {
+      if (wsRef.current === socket) wsRef.current = null;
+      socketAuthenticatedRef.current = false;
+      if (!disposed) {
+        if (socketFailedRef.current) setStatus("error");
+        else scheduleTransportReconnect();
+      }
+    };
+    return () => {
+      disposed = true;
+      wsRef.current = null;
+      socketAuthenticatedRef.current = false;
+      relayChannelRef.current = null;
+      if (reconnectTimer !== null) clearTimeout(reconnectTimer);
+      socket.onopen = null;
+      socket.onmessage = null;
+      socket.onerror = null;
+      socket.onclose = null;
+      closeSocket(socket);
+    };
+  }, [transport, url, token, expiresAt, reconnectGeneration]);
+  const write = useCallback((data) => {
+    const currentTransport = transportRef.current;
+    const ws = wsRef.current;
+    if (ws && ws.readyState === WebSocket.OPEN && socketAuthenticatedRef.current) {
+      try {
+        const relayChannel = relayChannelRef.current;
+        if (currentTransport === "relay-pty" && relayChannel) {
+          sendRelayInput(ws, relayChannel, relayInputSequenceRef.current++, data);
+        } else {
+          ws.send(ttydInputFrame(data));
+        }
+      } catch {
+        socketFailedRef.current = false;
+        setStatus("connecting");
+        closeSocket(ws);
+      }
+    } else if ((currentTransport === "pty-ws" || currentTransport === "relay-pty") && !socketFailedRef.current) {
+      const nextSize = pendingInputRef.current.length + data.length;
+      if (nextSize > MAX_PENDING_TERMINAL_INPUT_CODE_UNITS) {
+        pendingInputRef.current = "";
+        socketFailedRef.current = true;
+        setStatus("error");
+        closeSocket(ws);
+        return;
+      }
+      pendingInputRef.current += data;
+    }
+  }, []);
+  const resize = useCallback((cols, rows) => {
+    if (cols <= 0 || rows <= 0) return;
+    sizeRef.current = { cols, rows };
+    const ws = wsRef.current;
+    if (ws && ws.readyState === WebSocket.OPEN && socketAuthenticatedRef.current) {
+      try {
+        if (transportRef.current === "pty-ws") ws.send(ttydResizeFrame(cols, rows));
+      } catch {
+      }
+    }
+  }, []);
+  const disconnect = useCallback(() => {
+    const ws = wsRef.current;
+    wsRef.current = null;
+    pendingInputRef.current = "";
+    socketFailedRef.current = false;
+    socketAuthenticatedRef.current = false;
+    relayChannelRef.current = null;
+    setStatus("closed");
+    if (ws) intentionalCloseRef.current.add(ws);
+    closeSocket(ws);
+  }, []);
+  return useMemo(() => {
+    return { connected: status === "open", status, write, resize, disconnect };
+  }, [status, write, resize, disconnect]);
+}
+
+// src/lib/xterm-theme.ts
+var DARK_ANSI = {
+  black: "oklch(0.3 0 0)",
+  red: "oklch(0.68 0.17 22)",
+  green: "oklch(0.75 0.13 155)",
+  yellow: "oklch(0.8 0.11 80)",
+  blue: "oklch(0.7 0.14 255)",
+  magenta: "oklch(0.72 0.13 305)",
+  cyan: "oklch(0.75 0.1 210)",
+  white: "oklch(0.8 0 0)",
+  brightBlack: "oklch(0.45 0 0)",
+  brightRed: "oklch(0.76 0.17 22)",
+  brightGreen: "oklch(0.82 0.14 155)",
+  brightYellow: "oklch(0.86 0.12 85)",
+  brightBlue: "oklch(0.78 0.13 255)",
+  brightMagenta: "oklch(0.8 0.13 305)",
+  brightCyan: "oklch(0.83 0.1 200)",
+  brightWhite: "oklch(0.97 0 0)",
+  selectionBackground: "oklch(0.8 0 0 / 0.3)",
+  selectionForeground: "oklch(0.985 0 0)",
+  selectionInactiveBackground: "oklch(0.72 0 0 / 0.2)"
+};
+var LIGHT_ANSI = {
+  black: "oklch(0.35 0 0)",
+  red: "oklch(0.52 0.19 22)",
+  green: "oklch(0.5 0.13 155)",
+  yellow: "oklch(0.56 0.13 80)",
+  blue: "oklch(0.52 0.18 255)",
+  magenta: "oklch(0.52 0.16 305)",
+  cyan: "oklch(0.52 0.1 210)",
+  white: "oklch(0.7 0 0)",
+  brightBlack: "oklch(0.5 0 0)",
+  brightRed: "oklch(0.55 0.2 22)",
+  brightGreen: "oklch(0.54 0.14 155)",
+  brightYellow: "oklch(0.6 0.14 80)",
+  brightBlue: "oklch(0.48 0.19 255)",
+  brightMagenta: "oklch(0.54 0.17 305)",
+  brightCyan: "oklch(0.54 0.11 210)",
+  brightWhite: "oklch(0.3 0 0)",
+  selectionBackground: "oklch(0.45 0 0 / 0.2)",
+  selectionForeground: "oklch(0.21 0 0)",
+  selectionInactiveBackground: "oklch(0.6 0 0 / 0.14)"
+};
+function ogAnsiPalette(mode) {
+  return mode === "light" ? LIGHT_ANSI : DARK_ANSI;
+}
+function buildXtermTheme(read, mode) {
+  const ansi = ogAnsiPalette(mode);
+  const bgFallback = mode === "light" ? "#ffffff" : "#202020";
+  const fgFallback = mode === "light" ? "#242424" : "#e6e6e6";
+  const bg = read("--og-color-bg") ?? bgFallback;
+  const fg = read("--og-color-fg") ?? fgFallback;
+  const accent = read("--og-color-accent") ?? ansi.brightBlue;
+  return {
+    // Match the dock surface the terminal paints on (`--og-color-bg`).
+    background: bg,
+    foreground: fg,
+    cursor: accent,
+    cursorAccent: bg,
+    selectionBackground: ansi.selectionBackground,
+    selectionForeground: ansi.selectionForeground,
+    selectionInactiveBackground: ansi.selectionInactiveBackground,
+    black: ansi.black,
+    red: ansi.red,
+    green: ansi.green,
+    yellow: ansi.yellow,
+    blue: ansi.blue,
+    magenta: ansi.magenta,
+    cyan: ansi.cyan,
+    white: ansi.white,
+    brightBlack: ansi.brightBlack,
+    brightRed: ansi.brightRed,
+    brightGreen: ansi.brightGreen,
+    brightYellow: ansi.brightYellow,
+    brightBlue: ansi.brightBlue,
+    brightMagenta: ansi.brightMagenta,
+    brightCyan: ansi.brightCyan,
+    brightWhite: ansi.brightWhite
+  };
+}
+function detectMode(el, style) {
+  const closest = el.closest?.bind(el);
+  if (closest) {
+    if (closest('[data-og-theme="light"]') || closest(".og-light")) return "light";
+    const explicit = closest("[data-og-theme]");
+    if (explicit) return explicit.getAttribute("data-og-theme") === "light" ? "light" : "dark";
+  }
+  const scheme = (style.getPropertyValue("color-scheme").trim() || style.colorScheme || "").toLowerCase();
+  if (scheme.includes("light") && !scheme.includes("dark")) return "light";
+  return "dark";
+}
+function xtermThemeFromTokens(root) {
+  if (typeof window === "undefined" || typeof getComputedStyle === "undefined") return void 0;
+  const el = root ?? (typeof document !== "undefined" ? document.querySelector("[data-og-theme]") ?? document.documentElement : null);
+  if (!el) return void 0;
+  const style = getComputedStyle(el);
+  const read = (name) => {
+    const value = style.getPropertyValue(name).trim();
+    return value || void 0;
+  };
+  return buildXtermTheme(read, detectMode(el, style));
+}
+var FALLBACK_MONO = "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace";
+function resolveTerminalFontFromReader(read, overrides) {
+  const rawFamily = overrides?.fontFamily ?? read("--og-font-mono");
+  const fontFamily = rawFamily && rawFamily.trim() && !rawFamily.includes("var(") ? rawFamily.trim() : FALLBACK_MONO;
+  let fontSize = overrides?.fontSize;
+  if (fontSize == null) {
+    const raw = read("--og-code-font-size");
+    const parsed = raw ? Number.parseFloat(raw) : Number.NaN;
+    fontSize = Number.isFinite(parsed) && parsed > 0 ? parsed : 13;
+  }
+  return { fontFamily, fontSize, lineHeight: 1.3 };
+}
+function resolveTerminalFont(el, overrides) {
+  const style = getComputedStyle(el);
+  const read = (name) => {
+    const value = style.getPropertyValue(name).trim();
+    return value || void 0;
+  };
+  return resolveTerminalFontFromReader(read, overrides);
+}
+
+// src/components/sandbox-terminal.tsx
+import {
+  useEffect as useEffect2,
+  useLayoutEffect,
+  useRef as useRef2,
+  useState as useState2,
+  useSyncExternalStore
+} from "react";
+
+// src/lib/terminal-capability.ts
+function terminalCanAcquirePty(cell) {
+  if (!cell?.ptyCapable) return false;
+  if (cell.transport === "pty-ws" || cell.transport === "relay-pty") return true;
+  return cell.reason === "lease_cold" || cell.reason === "not_provisioned";
+}
+
+// src/lib/xterm-renderer.ts
+var ORDER = ["webgl", "canvas", "dom"];
+function nextRendererTier(tier) {
+  const i = ORDER.indexOf(tier);
+  return i >= 0 && i < ORDER.length - 1 ? ORDER[i + 1] : null;
+}
+async function attachRenderer(prefer, loaders, onTier) {
+  const start = Math.max(0, ORDER.indexOf(prefer));
+  for (let i = start; i < ORDER.length; i++) {
+    const tier = ORDER[i];
+    if (tier === "dom") break;
+    const loader = tier === "webgl" ? loaders.webgl : loaders.canvas;
+    if (!loader) continue;
+    try {
+      const downgrade = nextRendererTier(tier) ?? "dom";
+      await loader(() => {
+        void attachRenderer(downgrade, loaders, onTier);
+      });
+      onTier(tier);
+      return tier;
+    } catch {
+    }
+  }
+  onTier("dom");
+  return "dom";
+}
+
+// src/components/sandbox-terminal.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function terminalSurfaceState(input) {
+  if (!input.ready) return "loading";
+  if (input.acceptsInput) return "interactive";
+  if (input.inputPending) return "connecting";
+  if (input.ptyStatus === "connecting") return "connecting";
+  if (input.ptyStatus === "error") return "error";
+  if (input.booting) return "waking";
+  return "output-only";
+}
+function subscribeTerminalInput(term, sink, enabled) {
+  if (!enabled || !term || !sink) return null;
+  return term.onData(sink);
+}
+function clearTerminalBootStatus(term) {
+  term.write("\r\x1B[2K\x1B[2J\x1B[H");
+}
+function forcedRendererFailures() {
+  const raw = typeof globalThis !== "undefined" ? globalThis.__OG_FORCE_RENDERER_FAIL__ : void 0;
+  const set = /* @__PURE__ */ new Set();
+  if (typeof raw === "string") {
+    for (const tier of raw.split(/[\s,]+/)) {
+      if (tier === "webgl" || tier === "canvas") set.add(tier);
+    }
+  }
+  return set;
+}
+function SandboxTerminal({
+  result,
+  terminalCapability,
+  theme,
+  fontFamily,
+  fontSize,
+  liveness,
+  readOnly,
+  placeholder,
+  showHeader,
+  shell,
+  onActivate,
+  onReconnectNeeded,
+  className
+}) {
+  const containerRef = useRef2(null);
+  const termRef = useRef2(null);
+  const fitRef = useRef2(null);
+  const rendererRef = useRef2(null);
+  const writtenRef = useRef2(/* @__PURE__ */ new Set());
+  const wroteFirehoseRef = useRef2(false);
+  const bootActiveRef = useRef2(false);
+  const [ready, setReady] = useState2(false);
+  const [loadError, setLoadError] = useState2(null);
+  const peerRevision = useSyncExternalStore(
+    sandboxTerminalPeers.subscribe,
+    sandboxTerminalPeers.revision,
+    sandboxTerminalPeers.revision
+  );
+  const [inputReady, setInputReady] = useState2(false);
+  const [activated, setActivated] = useState2(false);
+  const ptyDescriptor = terminalCapability?.transport === "pty-ws" || terminalCapability?.transport === "relay-pty";
+  const ptyAttachable = terminalCanAcquirePty(terminalCapability);
+  const {
+    status: ptyStatus,
+    write: ptyWrite,
+    resize: resizePty,
+    connected: ptyConnected
+  } = useTerminalStream({
+    // Connect only after xterm exists. This makes the renderer the sole output
+    // owner from the first websocket frame and removes an otherwise unbounded
+    // pre-mount output queue during large command bursts.
+    capability: ptyAttachable && ready ? {
+      transport: terminalCapability.transport,
+      url: ptyDescriptor ? terminalCapability.url : null,
+      token: ptyDescriptor ? terminalCapability.token : null,
+      expiresAt: ptyDescriptor ? terminalCapability.expiresAt : null
+    } : null,
+    onOutput: (data) => {
+      termRef.current?.write(data);
+    },
+    onReconnectNeeded
+  });
+  const ptyMode = ptyDescriptor;
+  const ptyCapturesInput = ptyAttachable && ptyStatus !== "error";
+  const interactive = !readOnly && (ptyAttachable ? ptyCapturesInput : result.write !== null);
+  const acceptsInput = inputReady && (!ptyAttachable || ptyConnected);
+  const inputPending = inputReady && ptyAttachable && !ptyConnected && activated;
+  let terminalModeLabel;
+  if (readOnly) terminalModeLabel = "read-only";
+  else if (!ptyAttachable) terminalModeLabel = acceptsInput ? null : "output only";
+  else if (ptyStatus === "error") terminalModeLabel = "connection error";
+  else if (acceptsInput) terminalModeLabel = null;
+  else terminalModeLabel = activated ? "connecting" : "connect on input";
+  const warm = sandboxAcceptsLiveIo(liveness);
+  const booting = activated && !ptyMode && !warm && liveness !== null && liveness !== void 0 && result.chunks.length === 0;
+  const surfaceState = terminalSurfaceState({
+    ready,
+    acceptsInput,
+    inputPending,
+    ptyStatus,
+    booting
+  });
+  function handleActivate() {
+    const term = termRef.current;
+    if (term && !readOnly && (ptyAttachable || result.write !== null)) {
+      term.options.disableStdin = false;
+      term.options.cursorBlink = true;
+    }
+    term?.focus();
+    if (!activated) setActivated(true);
+    onActivate?.();
+  }
+  useEffect2(() => {
+    if (typeof window === "undefined") return;
+    const el = containerRef.current;
+    if (!el) return;
+    let disposed = false;
+    const waitForSize = (node) => new Promise((resolve) => {
+      if (node.clientWidth > 0 && node.clientHeight > 0) return resolve();
+      const ro = new ResizeObserver(() => {
+        if (node.clientWidth > 0 && node.clientHeight > 0) {
+          ro.disconnect();
+          resolve();
+        }
+      });
+      ro.observe(node);
+      setTimeout(() => {
+        ro.disconnect();
+        resolve();
+      }, 1e3);
+    });
+    ensureXtermBaseCss();
+    setLoadError(null);
+    void (async () => {
+      const { Terminal, FitAddon, WebLinksAddon, loadWebgl } = await sandboxTerminalPeers.load();
+      if (disposed) return;
+      await waitForSize(el);
+      if (disposed) return;
+      const font = resolveTerminalFont(el, { fontFamily, fontSize });
+      const initialTheme = theme ?? xtermThemeFromTokens(el);
+      const term = new Terminal({
+        convertEol: true,
+        disableStdin: !interactive,
+        cursorBlink: interactive,
+        fontFamily: font.fontFamily,
+        fontSize: font.fontSize,
+        lineHeight: font.lineHeight,
+        ...initialTheme ? { theme: initialTheme } : {}
+      });
+      const fit = new FitAddon();
+      term.loadAddon(fit);
+      term.loadAddon(
+        new WebLinksAddon(
+          (_e, uri) => window.open(uri, "_blank", "noopener,noreferrer")
+        )
+      );
+      term.open(el);
+      termRef.current = term;
+      fitRef.current = fit;
+      const failSet = forcedRendererFailures();
+      const loaders = {
+        webgl: async (onLoss) => {
+          if (disposed) throw new Error("Terminal was disposed");
+          if (failSet.has("webgl")) throw new Error("forced webgl failure");
+          if (!loadWebgl) throw new Error("WebGL terminal renderer is not enabled");
+          const { WebglAddon } = await loadWebgl();
+          if (disposed) throw new Error("Terminal was disposed");
+          const addon = new WebglAddon();
+          addon.onContextLoss?.(() => {
+            if (disposed) return;
+            try {
+              addon.dispose();
+            } catch {
+            }
+            onLoss();
+          });
+          term.loadAddon(addon);
+          return addon;
+        }
+      };
+      await attachRenderer("webgl", loaders, (tier) => {
+        if (disposed) return;
+        rendererRef.current = tier;
+        el.setAttribute("data-og-term-renderer", tier);
+      });
+      if (disposed) return;
+      const settle = () => {
+        try {
+          fit.fit();
+        } catch {
+        }
+      };
+      settle();
+      requestAnimationFrame(() => {
+        if (disposed) return;
+        settle();
+        el.setAttribute("data-og-term-ready", "true");
+        if (typeof globalThis.__OG_TERMINAL_DEBUG__ === "function") {
+          globalThis.__OG_TERMINAL_DEBUG__({
+            renderer: rendererRef.current,
+            fontFamily: term.options.fontFamily,
+            fontSize: term.options.fontSize,
+            hasVarInFont: String(term.options.fontFamily ?? "").includes("var("),
+            theme: term.options.theme,
+            term
+          });
+        }
+        setReady(true);
+      });
+    })().catch((cause) => {
+      if (!disposed) setLoadError(cause instanceof Error ? cause : new Error(String(cause)));
+    });
+    return () => {
+      disposed = true;
+      termRef.current?.dispose();
+      termRef.current = null;
+      fitRef.current = null;
+      rendererRef.current = null;
+      writtenRef.current = /* @__PURE__ */ new Set();
+      wroteFirehoseRef.current = false;
+      bootActiveRef.current = false;
+      setReady(false);
+    };
+  }, [peerRevision]);
+  useLayoutEffect(() => {
+    const term = termRef.current;
+    if (!ready || !term) return;
+    term.options.disableStdin = !interactive;
+    term.options.cursorBlink = interactive;
+  }, [ready, interactive]);
+  useEffect2(() => {
+    const term = termRef.current;
+    if (!ready || !term) return;
+    const next = theme ?? xtermThemeFromTokens(containerRef.current);
+    if (next) term.options.theme = next;
+  }, [ready, theme]);
+  useEffect2(() => {
+    const term = termRef.current;
+    if (!ready || !term) return;
+    if (!booting) {
+      if (bootActiveRef.current) {
+        bootActiveRef.current = false;
+        if (!wroteFirehoseRef.current) clearTerminalBootStatus(term);
+      }
+      return;
+    }
+    bootActiveRef.current = true;
+    const start = Date.now();
+    const paint = () => {
+      const s = Math.max(0, Math.round((Date.now() - start) / 1e3));
+      term.write(`\r\x1B[2K\x1B[94m\u25CF\x1B[0m \x1B[2mwaking machine \u2014 ${s}s\u2026\x1B[0m`);
+    };
+    term.write("\r\n");
+    paint();
+    const id = setInterval(paint, 1e3);
+    return () => clearInterval(id);
+  }, [ready, booting]);
+  useEffect2(() => {
+    const term = termRef.current;
+    if (!ready || !term || ptyMode) return;
+    for (const chunk of result.chunks) {
+      if (writtenRef.current.has(chunk.id)) continue;
+      writtenRef.current.add(chunk.id);
+      wroteFirehoseRef.current = true;
+      term.write(chunk.text);
+    }
+  }, [ready, result.chunks, ptyMode]);
+  useLayoutEffect(() => {
+    const term = termRef.current;
+    if (!ready || !term || !interactive) {
+      setInputReady(false);
+      return;
+    }
+    const sink = ptyAttachable ? ptyWrite : result.write;
+    if (!sink) {
+      setInputReady(false);
+      return;
+    }
+    const sub = subscribeTerminalInput(term, sink, true);
+    setInputReady(sub !== null);
+    return () => sub?.dispose();
+  }, [ready, interactive, ptyAttachable, ptyWrite, result.write]);
+  useEffect2(() => {
+    const term = termRef.current;
+    if (!ready || !term || !ptyMode) return;
+    resizePty(term.cols, term.rows);
+    const sub = term.onResize(({ cols, rows }) => resizePty(cols, rows));
+    return () => sub.dispose();
+  }, [ready, ptyMode, ptyConnected, resizePty]);
+  useEffect2(() => {
+    if (typeof window === "undefined") return;
+    const refit = () => {
+      try {
+        fitRef.current?.fit();
+      } catch {
+      }
+    };
+    window.addEventListener("resize", refit);
+    let observer = null;
+    const el = containerRef.current;
+    if (el && typeof ResizeObserver !== "undefined") {
+      observer = new ResizeObserver(() => refit());
+      observer.observe(el);
+    }
+    return () => {
+      window.removeEventListener("resize", refit);
+      observer?.disconnect();
+    };
+  }, [ready]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex h-full w-full flex-col overflow-hidden", className), children: [
+    showHeader && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-og-border px-2 py-1 text-og-xs text-og-fg-subtle", children: [
+      /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "size-1.5 shrink-0 rounded-full",
+              result.running ? "bg-og-status-running" : "bg-og-fg-subtle"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "truncate font-og-mono", children: [
+          "pty: ",
+          shell ?? "shell"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-2", children: [
+        terminalModeLabel && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "rounded-og-sm bg-og-surface-2 px-1.5 py-0.5 text-og-xs uppercase tracking-wide",
+            role: "status",
+            children: terminalModeLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              termRef.current?.clear();
+              writtenRef.current = /* @__PURE__ */ new Set();
+              wroteFirehoseRef.current = false;
+            },
+            className: "rounded-og-sm px-1.5 py-0.5 text-og-xs hover:text-og-fg pointer-coarse:min-h-11",
+            children: "Clear"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative min-h-0 flex-1 bg-og-bg p-3",
+        onPointerDownCapture: handleActivate,
+        onFocusCapture: handleActivate,
+        children: [
+          !ready && (loadError ? /* @__PURE__ */ jsx("p", { role: "alert", children: loadError.message }) : placeholder ?? /* @__PURE__ */ jsx(TerminalPlaceholder, {})),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: containerRef,
+              className: "h-full w-full",
+              style: { visibility: ready ? "visible" : "hidden" },
+              "data-opengeni-terminal": true,
+              "data-opengeni-terminal-ready": ready ? "true" : "false",
+              "data-opengeni-terminal-interactive": surfaceState === "interactive" ? "true" : "false",
+              "data-opengeni-terminal-state": surfaceState,
+              "data-opengeni-terminal-status": ptyAttachable ? ptyStatus : "firehose"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var XTERM_STYLE_ID = "opengeni-xterm-base-css";
+var XTERM_BASE_CSS = `
+.xterm{cursor:text;position:relative;user-select:none;-ms-user-select:none;-webkit-user-select:none}
+.xterm.focus,.xterm:focus{outline:none}
+.xterm .xterm-helpers{position:absolute;top:0;z-index:5}
+.xterm .xterm-helper-textarea{padding:0;border:0;margin:0;position:absolute;opacity:0;left:-9999em;top:0;width:0;height:0;z-index:-5;white-space:nowrap;overflow:hidden;resize:none}
+.xterm .composition-view{background:var(--og-color-bg);color:var(--og-color-fg);display:none;position:absolute;white-space:nowrap;z-index:1}
+.xterm .composition-view.active{display:block}
+.xterm .xterm-viewport{background-color:transparent;overflow-y:scroll;cursor:default;position:absolute;right:0;left:0;top:0;bottom:0}
+.xterm .xterm-screen{position:relative}
+.xterm .xterm-screen canvas{position:absolute;left:0;top:0}
+.xterm .xterm-scroll-area{visibility:hidden}
+.xterm-char-measure-element{display:inline-block;visibility:hidden;position:absolute;top:0;left:-9999em;line-height:normal}
+.xterm.enable-mouse-events{cursor:default}
+.xterm.xterm-cursor-pointer,.xterm .xterm-cursor-pointer{cursor:pointer}
+.xterm.column-select.focus{cursor:crosshair}
+.xterm .xterm-accessibility:not(.debug),.xterm .xterm-message{position:absolute;left:0;top:0;bottom:0;right:0;z-index:10;color:transparent;pointer-events:none}
+.xterm .xterm-accessibility-tree:not(.debug) *::selection{color:transparent}
+.xterm .xterm-accessibility-tree{user-select:text;white-space:pre}
+.xterm .live-region{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
+.xterm-dim{opacity:1!important}
+.xterm-underline-1{text-decoration:underline}
+.xterm-underline-2{text-decoration:double underline}
+.xterm-underline-3{text-decoration:wavy underline}
+.xterm-underline-4{text-decoration:dotted underline}
+.xterm-underline-5{text-decoration:dashed underline}
+.xterm-overline{text-decoration:overline}
+.xterm-strikethrough{text-decoration:line-through}
+.xterm-screen .xterm-decoration-container .xterm-decoration{z-index:6;position:absolute}
+.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer{z-index:7}
+.xterm-decoration-overview-ruler{z-index:8;position:absolute;top:0;right:0;pointer-events:none}
+.xterm-decoration-top{z-index:2;position:relative}
+`;
+function ensureXtermBaseCss() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(XTERM_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = XTERM_STYLE_ID;
+  style.textContent = XTERM_BASE_CSS;
+  document.head.appendChild(style);
+}
+function TerminalPlaceholder() {
+  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center text-og-sm text-og-fg-subtle", children: "Loading terminal\u2026" });
+}
+
+export {
+  useTerminalStream,
+  xtermThemeFromTokens,
+  terminalCanAcquirePty,
+  SandboxTerminal
+};
+//# sourceMappingURL=chunk-WRHIZYZF.js.map