@tangle-network/sandbox-ui 0.2.0

package/dist/chunk-GRYHFH5O.js

@@ -0,0 +1,110 @@
+// src/hooks/use-pty-session.ts
+import { useState, useEffect, useRef, useCallback } from "react";
+function usePtySession({ apiUrl, token, onData }) {
+  const [isConnected, setIsConnected] = useState(false);
+  const [error, setError] = useState(null);
+  const sessionIdRef = useRef(null);
+  const eventSourceRef = useRef(null);
+  const retryTimerRef = useRef(void 0);
+  const mountedRef = useRef(true);
+  const onDataRef = useRef(onData);
+  onDataRef.current = onData;
+  const cleanup = useCallback(() => {
+    if (retryTimerRef.current) {
+      clearTimeout(retryTimerRef.current);
+      retryTimerRef.current = void 0;
+    }
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+      eventSourceRef.current = null;
+    }
+    if (sessionIdRef.current) {
+      const sid = sessionIdRef.current;
+      sessionIdRef.current = null;
+      fetch(`${apiUrl}/terminals/${sid}`, {
+        method: "DELETE",
+        headers: { Authorization: `Bearer ${token}` }
+      }).catch(() => {
+      });
+    }
+    setIsConnected(false);
+  }, [apiUrl, token]);
+  const connect = useCallback(async () => {
+    cleanup();
+    setError(null);
+    try {
+      const res = await fetch(`${apiUrl}/terminals`, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "application/json"
+        }
+      });
+      if (!res.ok) {
+        throw new Error(`Failed to create terminal: ${res.status}`);
+      }
+      const body = await res.json();
+      const sessionId = body.data?.sessionId ?? body.sessionId;
+      if (!sessionId) throw new Error("No sessionId in response");
+      if (!mountedRef.current) return;
+      sessionIdRef.current = sessionId;
+      const streamUrl = `${apiUrl}/terminals/${sessionId}/stream?token=${encodeURIComponent(token)}`;
+      const es = new EventSource(streamUrl);
+      eventSourceRef.current = es;
+      es.onopen = () => {
+        if (mountedRef.current) {
+          setIsConnected(true);
+          setError(null);
+        }
+      };
+      es.onmessage = (event) => {
+        if (mountedRef.current && event.data) {
+          onDataRef.current(event.data);
+        }
+      };
+      es.onerror = () => {
+        if (!mountedRef.current) return;
+        es.close();
+        eventSourceRef.current = null;
+        setIsConnected(false);
+        retryTimerRef.current = setTimeout(() => {
+          if (mountedRef.current) connect();
+        }, 3e3);
+      };
+    } catch (err) {
+      if (mountedRef.current) {
+        setError(err instanceof Error ? err.message : "Terminal connection failed");
+        setIsConnected(false);
+      }
+    }
+  }, [apiUrl, token, cleanup]);
+  const sendCommand = useCallback(async (command) => {
+    const sid = sessionIdRef.current;
+    if (!sid) return;
+    const res = await fetch(`${apiUrl}/terminals/${sid}/execute`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ command })
+    });
+    if (!res.ok) {
+      const text = await res.text();
+      throw new Error(text || `Execute failed: ${res.status}`);
+    }
+  }, [apiUrl, token]);
+  useEffect(() => {
+    mountedRef.current = true;
+    connect();
+    return () => {
+      mountedRef.current = false;
+      cleanup();
+    };
+  }, [connect, cleanup]);
+  return { isConnected, error, sendCommand, reconnect: connect };
+}
+
+export {
+  usePtySession
+};