@reactor-team/js-sdk 2.3.1 → 2.4.0

package/dist/index.mjs

@@ -206,11 +206,58 @@ function parseMessage(data) {
 function closePeerConnection(pc) {
   pc.close();
 }
+function extractConnectionStats(report) {
+  let rtt;
+  let availableOutgoingBitrate;
+  let localCandidateId;
+  let framesPerSecond;
+  let jitter;
+  let packetLossRatio;
+  report.forEach((stat) => {
+    if (stat.type === "candidate-pair" && stat.state === "succeeded") {
+      if (stat.currentRoundTripTime !== void 0) {
+        rtt = stat.currentRoundTripTime * 1e3;
+      }
+      if (stat.availableOutgoingBitrate !== void 0) {
+        availableOutgoingBitrate = stat.availableOutgoingBitrate;
+      }
+      localCandidateId = stat.localCandidateId;
+    }
+    if (stat.type === "inbound-rtp" && stat.kind === "video") {
+      if (stat.framesPerSecond !== void 0) {
+        framesPerSecond = stat.framesPerSecond;
+      }
+      if (stat.jitter !== void 0) {
+        jitter = stat.jitter;
+      }
+      if (stat.packetsReceived !== void 0 && stat.packetsLost !== void 0 && stat.packetsReceived + stat.packetsLost > 0) {
+        packetLossRatio = stat.packetsLost / (stat.packetsReceived + stat.packetsLost);
+      }
+    }
+  });
+  let candidateType;
+  if (localCandidateId) {
+    const localCandidate = report.get(localCandidateId);
+    if (localCandidate == null ? void 0 : localCandidate.candidateType) {
+      candidateType = localCandidate.candidateType;
+    }
+  }
+  return {
+    rtt,
+    candidateType,
+    availableOutgoingBitrate,
+    framesPerSecond,
+    packetLossRatio,
+    jitter,
+    timestamp: Date.now()
+  };
+}
 
 // src/core/CoordinatorClient.ts
 var INITIAL_BACKOFF_MS = 500;
-var MAX_BACKOFF_MS = 3e4;
+var MAX_BACKOFF_MS = 15e3;
 var BACKOFF_MULTIPLIER = 2;
+var DEFAULT_MAX_ATTEMPTS = 6;
 var CoordinatorClient = class {
   constructor(options) {
     this.baseUrl = options.baseUrl;
@@ -403,13 +450,14 @@ var CoordinatorClient = class {
     });
   }
   /**
-   * Polls for the SDP answer with geometric backoff.
+   * Polls for the SDP answer with exponential backoff.
    * Used for async reconnection when the answer is not immediately available.
    * @param sessionId - The session ID to poll for
+   * @param maxAttempts - Optional maximum number of polling attempts before giving up
    * @returns The SDP answer from the server
    */
-  pollSdpAnswer(sessionId) {
-    return __async(this, null, function* () {
+  pollSdpAnswer(_0) {
+    return __async(this, arguments, function* (sessionId, maxAttempts = DEFAULT_MAX_ATTEMPTS) {
       console.debug(
         "[CoordinatorClient] Polling for SDP answer for session:",
         sessionId
@@ -417,9 +465,14 @@ var CoordinatorClient = class {
       let backoffMs = INITIAL_BACKOFF_MS;
       let attempt = 0;
       while (true) {
+        if (attempt >= maxAttempts) {
+          throw new Error(
+            `SDP polling exceeded maximum attempts (${maxAttempts}) for session ${sessionId}`
+          );
+        }
         attempt++;
         console.debug(
-          `[CoordinatorClient] SDP poll attempt ${attempt} for session ${sessionId}`
+          `[CoordinatorClient] SDP poll attempt ${attempt}/${maxAttempts} for session ${sessionId}`
         );
         const response = yield fetch(
           `${this.baseUrl}/sessions/${sessionId}/sdp_params`,
@@ -456,9 +509,10 @@ var CoordinatorClient = class {
    * falls back to polling. If no sdpOffer is provided, goes directly to polling.
    * @param sessionId - The session ID to connect to
    * @param sdpOffer - Optional SDP offer from the local WebRTC peer connection
+   * @param maxAttempts - Optional maximum number of polling attempts before giving up
    * @returns The SDP answer from the server
    */
-  connect(sessionId, sdpOffer) {
+  connect(sessionId, sdpOffer, maxAttempts) {
     return __async(this, null, function* () {
       console.debug("[CoordinatorClient] Connecting to session:", sessionId);
       if (sdpOffer) {
@@ -467,7 +521,7 @@ var CoordinatorClient = class {
           return answer;
         }
       }
-      return this.pollSdpAnswer(sessionId);
+      return this.pollSdpAnswer(sessionId, maxAttempts);
     });
   }
   /**
@@ -573,6 +627,7 @@ var LocalCoordinatorClient = class extends CoordinatorClient {
 
 // src/core/GPUMachineClient.ts
 var PING_INTERVAL_MS = 5e3;
+var STATS_INTERVAL_MS = 2e3;
 var GPUMachineClient = class {
   constructor(config) {
     this.eventListeners = /* @__PURE__ */ new Map();
@@ -656,6 +711,7 @@ var GPUMachineClient = class {
   disconnect() {
     return __async(this, null, function* () {
       this.stopPing();
+      this.stopStatsPolling();
       if (this.publishedTrack) {
         yield this.unpublishTrack();
       }
@@ -812,6 +868,31 @@ var GPUMachineClient = class {
     }
   }
   // ─────────────────────────────────────────────────────────────────────────────
+  // Stats Polling (RTT)
+  // ─────────────────────────────────────────────────────────────────────────────
+  getStats() {
+    return this.stats;
+  }
+  startStatsPolling() {
+    this.stopStatsPolling();
+    this.statsInterval = setInterval(() => __async(this, null, function* () {
+      if (!this.peerConnection) return;
+      try {
+        const report = yield this.peerConnection.getStats();
+        this.stats = extractConnectionStats(report);
+        this.emit("statsUpdate", this.stats);
+      } catch (e) {
+      }
+    }), STATS_INTERVAL_MS);
+  }
+  stopStatsPolling() {
+    if (this.statsInterval !== void 0) {
+      clearInterval(this.statsInterval);
+      this.statsInterval = void 0;
+    }
+    this.stats = void 0;
+  }
+  // ─────────────────────────────────────────────────────────────────────────────
   // Private Helpers
   // ─────────────────────────────────────────────────────────────────────────────
   setStatus(newStatus) {
@@ -830,6 +911,7 @@ var GPUMachineClient = class {
         switch (state) {
           case "connected":
             this.setStatus("connected");
+            this.startStatsPolling();
             break;
           case "disconnected":
           case "closed":
@@ -1011,8 +1093,9 @@ var Reactor = class {
   }
   /**
    * Public method for reconnecting to an existing session, that may have been interrupted but can be recovered.
+   * @param options Optional connect options (e.g. maxAttempts for SDP polling)
    */
-  reconnect() {
+  reconnect(options) {
     return __async(this, null, function* () {
       if (!this.sessionId || !this.coordinatorClient) {
         console.warn("[Reactor] No active session to reconnect to.");
@@ -1032,7 +1115,8 @@ var Reactor = class {
       try {
         const sdpAnswer = yield this.coordinatorClient.connect(
           this.sessionId,
-          sdpOffer
+          sdpOffer,
+          options == null ? void 0 : options.maxAttempts
         );
         yield this.machineClient.connect(sdpAnswer);
         this.setStatus("ready");
@@ -1056,8 +1140,10 @@ var Reactor = class {
    * Connects to the coordinator and waits for a GPU to be assigned.
    * Once a GPU is assigned, the Reactor will connect to the gpu machine via WebRTC.
    * If no authentication is provided and not in local mode, an error is thrown.
+   * @param jwtToken Optional JWT token for authentication
+   * @param options Optional connect options (e.g. maxAttempts for SDP polling)
    */
-  connect(jwtToken) {
+  connect(jwtToken, options) {
     return __async(this, null, function* () {
       console.debug("[Reactor] Connecting, status:", this.status);
       if (jwtToken == void 0 && !this.local) {
@@ -1074,7 +1160,7 @@ var Reactor = class {
         this.coordinatorClient = this.local ? new LocalCoordinatorClient(this.coordinatorUrl) : new CoordinatorClient({
           baseUrl: this.coordinatorUrl,
           jwtToken,
-          // Safe: validated on line 186-188
+          // Safe: validated above
           model: this.model
         });
         const iceServers = yield this.coordinatorClient.getIceServers();
@@ -1083,7 +1169,11 @@ var Reactor = class {
         const sdpOffer = yield this.machineClient.createOffer();
         const sessionId = yield this.coordinatorClient.createSession(sdpOffer);
         this.setSessionId(sessionId);
-        const sdpAnswer = yield this.coordinatorClient.connect(sessionId);
+        const sdpAnswer = yield this.coordinatorClient.connect(
+          sessionId,
+          void 0,
+          options == null ? void 0 : options.maxAttempts
+        );
         yield this.machineClient.connect(sdpAnswer);
       } catch (error) {
         console.error("[Reactor] Connection failed:", error);
@@ -1093,7 +1183,14 @@ var Reactor = class {
           "coordinator",
           true
         );
-        this.setStatus("disconnected");
+        try {
+          yield this.disconnect(false);
+        } catch (disconnectError) {
+          console.error(
+            "[Reactor] Failed to clean up after connection failure:",
+            disconnectError
+          );
+        }
         throw error;
       }
     });
@@ -1104,7 +1201,11 @@ var Reactor = class {
   setupMachineClientHandlers() {
     if (!this.machineClient) return;
     this.machineClient.on("message", (message, scope) => {
-      this.emit("newMessage", message, scope);
+      if (scope === "application") {
+        this.emit("message", message);
+      } else if (scope === "runtime") {
+        this.emit("runtimeMessage", message);
+      }
     });
     this.machineClient.on("statusChanged", (status) => {
       switch (status) {
@@ -1131,6 +1232,9 @@ var Reactor = class {
         this.emit("streamChanged", track, stream);
       }
     );
+    this.machineClient.on("statsUpdate", (stats) => {
+      this.emit("statsUpdate", stats);
+    });
   }
   /**
    * Disconnects from the coordinator and the gpu machine.
@@ -1217,6 +1321,10 @@ var Reactor = class {
   getLastError() {
     return this.lastError;
   }
+  getStats() {
+    var _a;
+    return (_a = this.machineClient) == null ? void 0 : _a.getStats();
+  }
   /**
    * Create and store an error
    */
@@ -1305,10 +1413,10 @@ var createReactorStore = (initProps, publicState = defaultInitState) => {
       // actions
       onMessage: (handler) => {
         console.debug("[ReactorStore] Registering message handler");
-        get().internal.reactor.on("newMessage", handler);
+        get().internal.reactor.on("message", handler);
         return () => {
           console.debug("[ReactorStore] Cleaning up message handler");
-          get().internal.reactor.off("newMessage", handler);
+          get().internal.reactor.off("message", handler);
         };
       },
       sendCommand: (command, data, scope) => __async(null, null, function* () {
@@ -1325,13 +1433,13 @@ var createReactorStore = (initProps, publicState = defaultInitState) => {
           throw error;
         }
       }),
-      connect: (jwtToken) => __async(null, null, function* () {
+      connect: (jwtToken, options) => __async(null, null, function* () {
         if (jwtToken === void 0) {
           jwtToken = get().jwtToken;
         }
         console.debug("[ReactorStore] Connect called.");
         try {
-          yield get().internal.reactor.connect(jwtToken);
+          yield get().internal.reactor.connect(jwtToken, options);
           console.debug("[ReactorStore] Connect completed successfully");
         } catch (error) {
           console.error("[ReactorStore] Connect failed:", error);
@@ -1376,10 +1484,10 @@ var createReactorStore = (initProps, publicState = defaultInitState) => {
           throw error;
         }
       }),
-      reconnect: () => __async(null, null, function* () {
+      reconnect: (options) => __async(null, null, function* () {
         console.debug("[ReactorStore] Reconnecting");
         try {
-          yield get().internal.reactor.reconnect();
+          yield get().internal.reactor.reconnect(options);
           console.debug("[ReactorStore] Reconnect completed successfully");
         } catch (error) {
           console.error("[ReactorStore] Failed to reconnect:", error);
@@ -1396,11 +1504,11 @@ import { jsx } from "react/jsx-runtime";
 function ReactorProvider(_a) {
   var _b = _a, {
     children,
-    autoConnect = true,
+    connectOptions,
     jwtToken
   } = _b, props = __objRest(_b, [
     "children",
-    "autoConnect",
+    "connectOptions",
     "jwtToken"
   ]);
   const storeRef = useRef(void 0);
@@ -1415,14 +1523,16 @@ function ReactorProvider(_a) {
     );
     console.debug("[ReactorProvider] Reactor store created successfully");
   }
+  const _a2 = connectOptions != null ? connectOptions : {}, { autoConnect = false } = _a2, pollingOptions = __objRest(_a2, ["autoConnect"]);
   const { coordinatorUrl, modelName, local } = props;
+  const maxAttempts = pollingOptions.maxAttempts;
   useEffect(() => {
     const handleBeforeUnload = () => {
-      var _a2;
+      var _a3;
       console.debug(
         "[ReactorProvider] Page unloading, performing non-recoverable disconnect"
       );
-      (_a2 = storeRef.current) == null ? void 0 : _a2.getState().internal.reactor.disconnect(false);
+      (_a3 = storeRef.current) == null ? void 0 : _a3.getState().internal.reactor.disconnect(false);
     };
     window.addEventListener("beforeunload", handleBeforeUnload);
     return () => {
@@ -1437,7 +1547,7 @@ function ReactorProvider(_a) {
         console.debug(
           "[ReactorProvider] Starting autoconnect in first render..."
         );
-        current2.getState().connect(jwtToken).then(() => {
+        current2.getState().connect(jwtToken, pollingOptions).then(() => {
           console.debug(
             "[ReactorProvider] Autoconnect successful in first render"
           );
@@ -1480,7 +1590,7 @@ function ReactorProvider(_a) {
     );
     if (autoConnect && current.getState().status === "disconnected" && jwtToken) {
       console.debug("[ReactorProvider] Starting autoconnect...");
-      current.getState().connect(jwtToken).then(() => {
+      current.getState().connect(jwtToken, pollingOptions).then(() => {
         console.debug("[ReactorProvider] Autoconnect successful");
       }).catch((error) => {
         console.error("[ReactorProvider] Failed to autoconnect:", error);
@@ -1496,7 +1606,7 @@ function ReactorProvider(_a) {
         console.error("[ReactorProvider] Failed to disconnect:", error);
       });
     };
-  }, [coordinatorUrl, modelName, autoConnect, local, jwtToken]);
+  }, [coordinatorUrl, modelName, autoConnect, local, jwtToken, maxAttempts]);
   return /* @__PURE__ */ jsx(ReactorContext.Provider, { value: storeRef.current, children });
 }
 function useReactorStore(selector) {
@@ -1509,7 +1619,7 @@ function useReactorStore(selector) {
 
 // src/react/hooks.ts
 import { useShallow } from "zustand/shallow";
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 function useReactor(selector) {
   return useReactorStore(useShallow(selector));
 }
@@ -1520,21 +1630,45 @@ function useReactorMessage(handler) {
     handlerRef.current = handler;
   }, [handler]);
   useEffect2(() => {
-    console.debug("[useReactorMessage] Setting up message subscription");
-    const stableHandler = (message, scope) => {
-      console.debug("[useReactorMessage] Message received", {
-        message,
-        scope
-      });
-      handlerRef.current(message, scope);
+    const stableHandler = (message) => {
+      handlerRef.current(message);
+    };
+    reactor.on("message", stableHandler);
+    return () => {
+      reactor.off("message", stableHandler);
+    };
+  }, [reactor]);
+}
+function useReactorInternalMessage(handler) {
+  const reactor = useReactor((state) => state.internal.reactor);
+  const handlerRef = useRef2(handler);
+  useEffect2(() => {
+    handlerRef.current = handler;
+  }, [handler]);
+  useEffect2(() => {
+    const stableHandler = (message) => {
+      handlerRef.current(message);
+    };
+    reactor.on("runtimeMessage", stableHandler);
+    return () => {
+      reactor.off("runtimeMessage", stableHandler);
+    };
+  }, [reactor]);
+}
+function useStats() {
+  const reactor = useReactor((state) => state.internal.reactor);
+  const [stats, setStats] = useState2(void 0);
+  useEffect2(() => {
+    const handler = (newStats) => {
+      setStats(newStats);
     };
-    reactor.on("newMessage", stableHandler);
-    console.debug("[useReactorMessage] Message handler registered");
+    reactor.on("statsUpdate", handler);
     return () => {
-      console.debug("[useReactorMessage] Cleaning up message subscription");
-      reactor.off("newMessage", stableHandler);
+      reactor.off("statsUpdate", handler);
+      setStats(void 0);
     };
   }, [reactor]);
+  return stats;
 }
 
 // src/react/ReactorView.tsx
@@ -1633,7 +1767,7 @@ function ReactorView({
 }
 
 // src/react/ReactorController.tsx
-import React, { useState as useState2, useCallback } from "react";
+import React, { useState as useState3, useCallback } from "react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function ReactorController({
   className,
@@ -1643,9 +1777,9 @@ function ReactorController({
     sendCommand: state.sendCommand,
     status: state.status
   }));
-  const [commands, setCommands] = useState2({});
-  const [formValues, setFormValues] = useState2({});
-  const [expandedCommands, setExpandedCommands] = useState2({});
+  const [commands, setCommands] = useState3({});
+  const [formValues, setFormValues] = useState3({});
+  const [expandedCommands, setExpandedCommands] = useState3({});
   React.useEffect(() => {
     if (status === "disconnected") {
       setCommands({});
@@ -1672,8 +1806,8 @@ function ReactorController({
     }, 5e3);
     return () => clearInterval(interval);
   }, [status, commands, requestCapabilities]);
-  useReactorMessage((message, scope) => {
-    if (scope === "runtime" && message && typeof message === "object" && message.type === "modelCapabilities" && message.data && "commands" in message.data) {
+  useReactorInternalMessage((message) => {
+    if (message && typeof message === "object" && message.type === "modelCapabilities" && message.data && "commands" in message.data) {
       const commandsMessage = message.data;
       setCommands(commandsMessage.commands);
       const initialValues = {};
@@ -2086,7 +2220,7 @@ function ReactorController({
 }
 
 // src/react/WebcamStream.tsx
-import { useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function WebcamStream({
   className,
@@ -2098,9 +2232,9 @@ function WebcamStream({
   showWebcam = true,
   videoObjectFit = "contain"
 }) {
-  const [stream, setStream] = useState3(null);
-  const [isPublishing, setIsPublishing] = useState3(false);
-  const [permissionDenied, setPermissionDenied] = useState3(false);
+  const [stream, setStream] = useState4(null);
+  const [isPublishing, setIsPublishing] = useState4(false);
+  const [permissionDenied, setPermissionDenied] = useState4(false);
   const { status, publishVideoStream, unpublishVideoStream, reactor } = useReactor((state) => ({
     status: state.status,
     publishVideoStream: state.publishVideoStream,
@@ -2305,7 +2439,9 @@ export {
   WebcamStream,
   fetchInsecureJwtToken,
   useReactor,
+  useReactorInternalMessage,
   useReactorMessage,
-  useReactorStore
+  useReactorStore,
+  useStats
 };
 //# sourceMappingURL=index.mjs.map