@tangle-network/sandbox-ui 0.13.0 → 0.14.0

package/dist/{chunk-ESVYBDGA.js → chunk-AG7QDC2Q.js}

@@ -3,6 +3,38 @@ import { useState, useEffect, useRef, useCallback } from "react";
 function createEmptyBatch() {
   return { data: "", waiters: [] };
 }
+var WS_OPEN_TIMEOUT_MS = 1500;
+function toWsUrl(apiUrl, sessionId) {
+  try {
+    const url = new URL(`${apiUrl}/terminals/${sessionId}/ws`);
+    if (url.protocol === "https:") url.protocol = "wss:";
+    else if (url.protocol === "http:") url.protocol = "ws:";
+    else return null;
+    return url.toString();
+  } catch {
+    return null;
+  }
+}
+var BEARER_SUBPROTOCOL_PREFIX = "bearer.";
+function toBearerSubprotocol(token) {
+  if (typeof btoa === "undefined") return null;
+  let encoded;
+  try {
+    encoded = btoa(token);
+  } catch {
+    return null;
+  }
+  return `${BEARER_SUBPROTOCOL_PREFIX}${encoded.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "")}`;
+}
+var stdinEncoder = typeof TextEncoder !== "undefined" ? new TextEncoder() : null;
+function encodeStdin(text) {
+  if (!stdinEncoder) {
+    throw new Error(
+      "TextEncoder is unavailable; WebSocket transport cannot encode stdin"
+    );
+  }
+  return stdinEncoder.encode(text);
+}
 function usePtySession({ apiUrl, token, onData }) {
   const [isConnected, setIsConnected] = useState(false);
   const [error, setError] = useState(null);
@@ -13,6 +45,8 @@ function usePtySession({ apiUrl, token, onData }) {
   const mountedRef = useRef(true);
   const onDataRef = useRef(onData);
   const connectStreamRef = useRef(null);
+  const wsRef = useRef(null);
+  const pendingWsRef = useRef(null);
   const pendingBatchRef = useRef(createEmptyBatch());
   const drainPromiseRef = useRef(null);
   const inputAbortRef = useRef(null);
@@ -37,8 +71,27 @@ function usePtySession({ apiUrl, token, onData }) {
       abortRef.current = null;
     }
   }, []);
+  const closeWs = useCallback(() => {
+    const active = wsRef.current;
+    if (active) {
+      wsRef.current = null;
+      try {
+        active.close();
+      } catch {
+      }
+    }
+    const pending = pendingWsRef.current;
+    if (pending) {
+      pendingWsRef.current = null;
+      try {
+        pending.close();
+      } catch {
+      }
+    }
+  }, []);
   const cleanup = useCallback(() => {
     abortStream();
+    closeWs();
     if (inputAbortRef.current) {
       inputAbortRef.current.abort();
       inputAbortRef.current = null;
@@ -55,7 +108,110 @@ function usePtySession({ apiUrl, token, onData }) {
     }
     rejectPendingInput("Terminal session is not connected");
     setIsConnected(false);
-  }, [apiUrl, token, abortStream, rejectPendingInput]);
+  }, [apiUrl, token, abortStream, closeWs, rejectPendingInput]);
+  const connectWs = useCallback((sessionId) => {
+    return new Promise((resolve) => {
+      if (typeof WebSocket === "undefined" || stdinEncoder === null) {
+        resolve(false);
+        return;
+      }
+      const wsUrl = toWsUrl(apiUrl, sessionId);
+      if (!wsUrl) {
+        resolve(false);
+        return;
+      }
+      const subprotocol = toBearerSubprotocol(token);
+      if (!subprotocol) {
+        resolve(false);
+        return;
+      }
+      let ws;
+      try {
+        ws = new WebSocket(wsUrl, [subprotocol]);
+      } catch {
+        resolve(false);
+        return;
+      }
+      ws.binaryType = "arraybuffer";
+      pendingWsRef.current = ws;
+      let opened = false;
+      let settled = false;
+      const settle = (ok) => {
+        if (settled) return;
+        settled = true;
+        clearTimeout(handshakeTimer);
+        resolve(ok);
+      };
+      const handshakeTimer = setTimeout(() => {
+        if (opened) return;
+        try {
+          ws.close();
+        } catch {
+        }
+        settle(false);
+      }, WS_OPEN_TIMEOUT_MS);
+      ws.onopen = () => {
+        opened = true;
+        if (pendingWsRef.current !== ws || !mountedRef.current) {
+          try {
+            ws.close();
+          } catch {
+          }
+          settle(false);
+          return;
+        }
+        pendingWsRef.current = null;
+        wsRef.current = ws;
+        setIsConnected(true);
+        setError(null);
+        retryCountRef.current = 0;
+        settle(true);
+      };
+      ws.onmessage = (ev) => {
+        if (!mountedRef.current) return;
+        const data = ev.data;
+        let text;
+        if (typeof data === "string") {
+          text = data;
+        } else if (data instanceof ArrayBuffer) {
+          text = new TextDecoder().decode(data);
+        } else if (ArrayBuffer.isView(data)) {
+          text = new TextDecoder().decode(data);
+        } else {
+          data.text().then((t) => {
+            if (mountedRef.current) onDataRef.current(t);
+          }).catch(() => {
+          });
+          return;
+        }
+        if (text) onDataRef.current(text);
+      };
+      ws.onerror = () => {
+      };
+      ws.onclose = () => {
+        if (pendingWsRef.current === ws) {
+          pendingWsRef.current = null;
+        }
+        const wasActive = wsRef.current === ws;
+        if (wasActive) {
+          wsRef.current = null;
+        }
+        if (!opened) {
+          settle(false);
+          return;
+        }
+        if (!wasActive || !mountedRef.current) return;
+        setIsConnected(false);
+        if (sessionIdRef.current) {
+          retryTimerRef.current = setTimeout(() => {
+            if (mountedRef.current && sessionIdRef.current) {
+              connectStreamRef.current?.(sessionIdRef.current);
+            }
+          }, 1e3);
+        }
+      };
+    });
+  }, [apiUrl, token]);
   const connectStream = useCallback(async (sessionId) => {
     abortStream();
     setError(null);
@@ -162,7 +318,12 @@ function usePtySession({ apiUrl, token, onData }) {
       if (!mountedRef.current) return;
       sessionIdRef.current = sessionId;
       inputAbortRef.current = new AbortController();
+      const wsOk = await connectWs(sessionId);
+      if (!mountedRef.current || sessionIdRef.current !== sessionId) return;
       ensureDrainRunningRef.current?.();
+      if (wsOk) {
+        return;
+      }
       await connectStream(sessionId);
     } catch (err) {
       if (err.name === "AbortError") return;
@@ -172,10 +333,19 @@ function usePtySession({ apiUrl, token, onData }) {
         setIsConnected(false);
       }
     }
-  }, [apiUrl, token, cleanup, connectStream]);
+  }, [apiUrl, token, cleanup, connectWs, connectStream]);
   const resizeTerminal = useCallback(async (cols, rows) => {
     const sid = sessionIdRef.current;
     if (!sid || cols <= 0 || rows <= 0) return;
+    const ws = wsRef.current;
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      try {
+        ws.send(JSON.stringify({ type: "resize", cols, rows }));
+        return;
+      } catch (err) {
+        console.warn("Terminal resize over WS failed; falling back to HTTP", err);
+      }
+    }
     try {
       const res = await fetch(`${apiUrl}/terminals/${sid}`, {
         method: "PATCH",
@@ -201,6 +371,16 @@ function usePtySession({ apiUrl, token, onData }) {
       }
       const batch = pendingBatchRef.current;
       pendingBatchRef.current = createEmptyBatch();
+      const ws = wsRef.current;
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        try {
+          ws.send(encodeStdin(batch.data));
+          for (const w of batch.waiters) w.resolve();
+        } catch (err) {
+          for (const w of batch.waiters) w.reject(err);
+        }
+        continue;
+      }
       try {
         const res = await fetch(`${apiUrl}/terminals/${sid}/input`, {
           method: "POST",

package/dist/globals.css

@@ -283,6 +283,9 @@
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .sticky {
     position: sticky;
   }

package/dist/hooks.d.ts

@@ -1,4 +1,4 @@
-export { A as AuthUser, S as SandboxMetrics, a as SidecarMetricsPayload, U as UseAuthOptions, b as UseAuthResult, c as UsePtySessionOptions, d as UsePtySessionReturn, e as UseSandboxMetricsOptions, f as UseSandboxMetricsResult, g as createAuthFetcher, u as useApiKey, h as useAuth, i as useLiveTime, j as usePtySession, k as useSandboxMetrics } from './use-sandbox-metrics-B64diPqN.js';
+export { A as AuthUser, S as SandboxMetrics, a as SidecarMetricsPayload, U as UseAuthOptions, b as UseAuthResult, c as UsePtySessionOptions, d as UsePtySessionReturn, e as UseSandboxMetricsOptions, f as UseSandboxMetricsResult, g as createAuthFetcher, u as useApiKey, h as useAuth, i as useLiveTime, j as usePtySession, k as useSandboxMetrics } from './use-sandbox-metrics-DWc0k9Xm.js';
 export { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, ConnectionState, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SessionInfo, SidecarAuth, TaskStreamEvent, TerminalStreamEvent, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseSessionStreamOptions, UseSessionStreamResult, UseSidecarAuthOptions, UseToolCallStreamReturn, useAutoScroll, useDropdownMenu, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionStream, useSidecarAuth, useToolCallStream } from './sdk-hooks.js';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { S as Session } from './sidecar-CFU2W9j1.js';

package/dist/hooks.js

@@ -7,7 +7,7 @@ import {
 } from "./chunk-DPGIXDAI.js";
 import {
   usePtySession
-} from "./chunk-ESVYBDGA.js";
+} from "./chunk-AG7QDC2Q.js";
 import {
   RealtimeSessionRegistry,
   useDropdownMenu,

package/dist/index.d.ts

@@ -20,7 +20,7 @@ export { c as BillingDashboard, d as BillingDashboardProps, e as PricingCards, f
 export { AuthHeader, GitHubLoginButton, LoginLayout, LoginLayoutProps, UserMenu } from './auth.js';
 export { CodeBlock, CodeBlock as CodeBlockDisplay, CopyButton, Markdown, MarkdownProps } from './markdown.js';
 export { AppendUserMessageOptions, ApplySdkEventOptions, BeginAssistantMessageOptions, CompleteAssistantMessageOptions, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, useAutoScroll, useDropdownMenu, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionStream, useSidecarAuth, useToolCallStream } from './sdk-hooks.js';
-export { S as SandboxMetrics, a as SidecarMetricsPayload, e as UseSandboxMetricsOptions, f as UseSandboxMetricsResult, g as createAuthFetcher, u as useApiKey, h as useAuth, i as useLiveTime, j as usePtySession, k as useSandboxMetrics } from './use-sandbox-metrics-B64diPqN.js';
+export { S as SandboxMetrics, a as SidecarMetricsPayload, e as UseSandboxMetricsOptions, f as UseSandboxMetricsResult, g as createAuthFetcher, u as useApiKey, h as useAuth, i as useLiveTime, j as usePtySession, k as useSandboxMetrics } from './use-sandbox-metrics-DWc0k9Xm.js';
 export { G as GroupedMessage, R as Run, b as RunStats, T as ToolCategory } from './run-CtFZ6s-D.js';
 export { S as Session } from './sidecar-CFU2W9j1.js';
 export { C as CustomToolRenderer, D as DisplayVariant, T as ToolDisplayMetadata } from './tool-display-Ct9nFAzJ.js';

package/dist/index.js

@@ -31,7 +31,7 @@ import {
 } from "./chunk-DPGIXDAI.js";
 import {
   usePtySession
-} from "./chunk-ESVYBDGA.js";
+} from "./chunk-AG7QDC2Q.js";
 import {
   RealtimeSessionRegistry,
   useDropdownMenu,

package/dist/styles.css

@@ -283,6 +283,9 @@
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .sticky {
     position: sticky;
   }

package/dist/terminal.js

@@ -1,6 +1,6 @@
 import {
   usePtySession
-} from "./chunk-ESVYBDGA.js";
+} from "./chunk-AG7QDC2Q.js";
 
 // src/terminal/terminal-view.tsx
 import "@xterm/xterm/css/xterm.css";
@@ -48,8 +48,19 @@ function TerminalView({
   const containerRef = useRef(null);
   const termRef = useRef(null);
   const fitAddonRef = useRef(null);
+  const pendingWritesRef = useRef([]);
+  const writeRafRef = useRef(null);
   const onData = useCallback((data) => {
-    termRef.current?.write(data);
+    if (!data) return;
+    pendingWritesRef.current.push(data);
+    if (writeRafRef.current !== null) return;
+    writeRafRef.current = requestAnimationFrame(() => {
+      writeRafRef.current = null;
+      const chunks = pendingWritesRef.current;
+      if (chunks.length === 0) return;
+      pendingWritesRef.current = [];
+      termRef.current?.write(chunks.length === 1 ? chunks[0] : chunks.join(""));
+    });
   }, []);
   const { isConnected, error, sendCommand, resizeTerminal, reconnect } = usePtySession({
     apiUrl,
@@ -74,6 +85,25 @@ function TerminalView({
     term.loadAddon(fitAddon);
     term.loadAddon(webLinksAddon);
     term.open(containerRef.current);
+    let webglAddon = null;
+    let webglCancelled = false;
+    void (async () => {
+      try {
+        const mod = await import("@xterm/addon-webgl");
+        if (webglCancelled) return;
+        try {
+          const addon = new mod.WebglAddon();
+          addon.onContextLoss(() => {
+            webglAddon?.dispose();
+            webglAddon = null;
+          });
+          webglAddon = addon;
+          term.loadAddon(addon);
+        } catch {
+        }
+      } catch {
+      }
+    })();
     requestAnimationFrame(() => {
       fitAddon.fit();
     });
@@ -102,7 +132,14 @@ function TerminalView({
     });
     ro.observe(containerRef.current);
     return () => {
+      webglCancelled = true;
       ro.disconnect();
+      if (writeRafRef.current !== null) {
+        cancelAnimationFrame(writeRafRef.current);
+        writeRafRef.current = null;
+      }
+      pendingWritesRef.current = [];
+      webglAddon?.dispose();
       term.dispose();
       termRef.current = null;
       fitAddonRef.current = null;

package/dist/{use-sandbox-metrics-B64diPqN.d.ts → use-sandbox-metrics-DWc0k9Xm.d.ts}

@@ -46,7 +46,7 @@ interface UsePtySessionOptions {
     onData: (data: string) => void;
 }
 interface UsePtySessionReturn {
-    /** Whether the SSE stream is connected and receiving data. */
+    /** Whether the underlying transport is connected and receiving data. */
     isConnected: boolean;
     /** Connection or API error, if any. */
     error: string | null;
@@ -60,11 +60,23 @@ interface UsePtySessionReturn {
 /**
  * Manages a PTY session against the sidecar terminal API.
  *
- * Protocol:
- * - POST /terminals              → create session → { data: { sessionId } }
- * - GET  /terminals/{id}/stream  → SSE output (raw PTY with ANSI codes)
- * - POST /terminals/{id}/input   → send input     { data: "..." }
- * - DELETE /terminals/{id}       → close session
+ * Transport:
+ *   1. POST /terminals creates the session.
+ *   2. The hook tries WebSocket: GET /terminals/:id/ws (Upgrade).
+ *      - Server → client: TEXT frames carrying raw PTY output.
+ *      - Client → server: BINARY frames carrying stdin (UTF-8); TEXT
+ *        frames carrying JSON control messages (`{"type":"resize",...}`).
+ *   3. If the WS does not reach OPEN within WS_OPEN_TIMEOUT_MS, or it
+ *      errors before opening, the hook falls back to SSE+POST:
+ *      - GET /terminals/:id/stream (SSE for output)
+ *      - POST /terminals/:id/input (one batched POST at a time)
+ *      - PATCH /terminals/:id (resize)
+ *   4. DELETE /terminals/:id closes the session (both transports).
+ *
+ * The WS path eliminates the per-keystroke HTTP round-trip that
+ * dominates typing latency through edge proxies; the HTTP+SSE path is
+ * preserved as a fallback so the hook keeps working against
+ * deployments that have not yet shipped the WS endpoint.
  */
 declare function usePtySession({ apiUrl, token, onData }: UsePtySessionOptions): UsePtySessionReturn;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -119,6 +119,9 @@
     "@xterm/addon-web-links": {
       "optional": true
     },
+    "@xterm/addon-webgl": {
+      "optional": true
+    },
     "@tanstack/react-query": {
       "optional": true
     },
@@ -206,6 +209,7 @@
     "@types/turndown": "^5.0.6",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/addon-webgl": "^0.19.0",
     "@xterm/xterm": "^6.0.0",
     "jsdom": "^29.0.2",
     "postcss": "^8.5.8",