@tangle-network/sandbox-ui 0.12.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",