@qontinui/ui-bridge 0.9.1 → 0.11.0

package/dist/react/index.mjs

@@ -24946,7 +24946,7 @@ function exposeProviderOnWindow(internals) {
   if (typeof window === "undefined") return;
   const w = window;
   const root = w.__UI_BRIDGE__ ?? (w.__UI_BRIDGE__ = {});
-  root.version = "0.9.1";
+  root.version = "0.11.0";
   root.specs = { getGlobalSpecStore };
   root.registry = internals.registry;
   root.browserCapture = internals.browserCapture;
@@ -32909,10 +32909,44 @@ function safeJsonStringify(value) {
   });
 }
 var HEARTBEAT_INTERVAL_MS = 1e4;
+function resolveAuthToken(authHeader) {
+  if (!authHeader) return null;
+  try {
+    const value = authHeader();
+    if (typeof value !== "string") return null;
+    const trimmed = value.trim();
+    return trimmed.length > 0 ? trimmed : null;
+  } catch {
+    return null;
+  }
+}
+function transportHeaders(authHeader) {
+  const headers = {
+    "Content-Type": "application/json"
+  };
+  const token = resolveAuthToken(authHeader);
+  if (token) {
+    headers.Authorization = `Bearer ${token}`;
+  }
+  return headers;
+}
+function parseSSEDataBlock(block) {
+  const dataLines = [];
+  for (const line of block.split("\n")) {
+    if (line.startsWith(":")) continue;
+    if (!line.startsWith("data:")) continue;
+    let value = line.slice(5);
+    if (value.startsWith(" ")) value = value.slice(1);
+    dataLines.push(value);
+  }
+  return dataLines.length > 0 ? dataLines.join("\n") : null;
+}
 function useCommandRelay(options) {
   const enabled = options?.enabled ?? true;
   const basePath = options?.basePath ?? "/api/ui-bridge";
   const heartbeatIntervalMs = options?.heartbeatInterval ?? HEARTBEAT_INTERVAL_MS;
+  const authHeaderRef = useRef(void 0);
+  authHeaderRef.current = options?.authHeader;
   const uiBridge = useUIBridge();
   const context = useUIBridgeOptional();
   const bridge2 = useMemo(
@@ -32945,7 +32979,6 @@ function useCommandRelay(options) {
     }),
     [uiBridge, context]
   );
-  const eventSourceRef = useRef(null);
   const reconnectTimeoutRef = useRef(null);
   const processCommandRef = useRef(() => {
   });
@@ -32968,7 +33001,7 @@ function useCommandRelay(options) {
       try {
         await fetch(`${basePath}/commands`, {
           method: "POST",
-          headers: { "Content-Type": "application/json" },
+          headers: transportHeaders(authHeaderRef.current),
           body: safeJsonStringify({
             commandId,
             success: ok,
@@ -33021,10 +33054,6 @@ function useCommandRelay(options) {
   processCommandRef.current = processCommand;
   useEffect(() => {
     if (!enabled) {
-      if (eventSourceRef.current) {
-        eventSourceRef.current.close();
-        eventSourceRef.current = null;
-      }
       if (reconnectTimeoutRef.current) {
         clearTimeout(reconnectTimeoutRef.current);
         reconnectTimeoutRef.current = null;
@@ -33032,35 +33061,73 @@ function useCommandRelay(options) {
       return;
     }
     let isMounted = true;
+    let abortController = null;
+    const closeStream = () => {
+      if (abortController) {
+        abortController.abort();
+        abortController = null;
+      }
+    };
+    const scheduleReconnect = () => {
+      if (!isMounted) return;
+      if (reconnectTimeoutRef.current) return;
+      reconnectTimeoutRef.current = setTimeout(() => {
+        reconnectTimeoutRef.current = null;
+        if (isMounted) connect();
+      }, SSE_RECONNECT_DELAY_MS);
+    };
     const connect = () => {
       if (!isMounted) return;
-      const es = new EventSource(
-        `${basePath}/commands/stream${tabId ? `?tabId=${encodeURIComponent(tabId)}` : ""}`
-      );
-      eventSourceRef.current = es;
-      es.onmessage = (event) => {
-        try {
-          const data = JSON.parse(event.data);
-          if (data.type === "connected") return;
-          if (data.commandId && data.action) processCommandRef.current(data);
-        } catch (e) {
-          console.error("[UIBridge] Failed to parse SSE message:", e);
+      closeStream();
+      const controller = new AbortController();
+      abortController = controller;
+      const url = `${basePath}/commands/stream${tabId ? `?tabId=${encodeURIComponent(tabId)}` : ""}`;
+      const headers = { Accept: "text/event-stream" };
+      const token = resolveAuthToken(authHeaderRef.current);
+      if (token) headers.Authorization = `Bearer ${token}`;
+      fetch(url, { method: "GET", headers, signal: controller.signal, cache: "no-store" }).then(async (resp) => {
+        if (!resp.ok || !resp.body) {
+          if (abortController === controller) abortController = null;
+          scheduleReconnect();
+          return;
         }
-      };
-      es.onerror = () => {
-        es.close();
-        if (eventSourceRef.current === es) eventSourceRef.current = null;
-        if (isMounted) {
-          reconnectTimeoutRef.current = setTimeout(() => {
-            reconnectTimeoutRef.current = null;
-            if (isMounted) connect();
-          }, SSE_RECONNECT_DELAY_MS);
+        const reader = resp.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+        try {
+          for (; ; ) {
+            const { value, done } = await reader.read();
+            if (done) break;
+            buffer += decoder.decode(value, { stream: true });
+            let sep;
+            while ((sep = buffer.indexOf("\n\n")) !== -1) {
+              const block = buffer.slice(0, sep);
+              buffer = buffer.slice(sep + 2);
+              const data = parseSSEDataBlock(block);
+              if (data == null) continue;
+              try {
+                const parsed = JSON.parse(data);
+                if (parsed.type === "connected") continue;
+                if (parsed.commandId && parsed.action) {
+                  processCommandRef.current(parsed);
+                }
+              } catch (e) {
+                console.error("[UIBridge] Failed to parse SSE message:", e);
+              }
+            }
+          }
+        } catch {
         }
-      };
+        if (abortController === controller) abortController = null;
+        if (isMounted && !controller.signal.aborted) scheduleReconnect();
+      }).catch(() => {
+        if (abortController === controller) abortController = null;
+        if (isMounted && !controller.signal.aborted) scheduleReconnect();
+      });
     };
     const handleVisibility = () => {
       if (document.visibilityState === "visible") {
-        if (!eventSourceRef.current) {
+        if (!abortController) {
           if (reconnectTimeoutRef.current) {
             clearTimeout(reconnectTimeoutRef.current);
             reconnectTimeoutRef.current = null;
@@ -33073,10 +33140,7 @@ function useCommandRelay(options) {
     document.addEventListener("visibilitychange", handleVisibility);
     forceReconnectRef.current = () => {
       if (!isMounted) return;
-      if (eventSourceRef.current) {
-        eventSourceRef.current.close();
-        eventSourceRef.current = null;
-      }
+      closeStream();
       if (reconnectTimeoutRef.current) {
         clearTimeout(reconnectTimeoutRef.current);
         reconnectTimeoutRef.current = null;
@@ -33087,10 +33151,7 @@ function useCommandRelay(options) {
       isMounted = false;
       forceReconnectRef.current = () => {
       };
-      if (eventSourceRef.current) {
-        eventSourceRef.current.close();
-        eventSourceRef.current = null;
-      }
+      closeStream();
       if (reconnectTimeoutRef.current) {
         clearTimeout(reconnectTimeoutRef.current);
         reconnectTimeoutRef.current = null;
@@ -33123,7 +33184,7 @@ function useCommandRelay(options) {
         if (heartbeatVersion !== void 0) body.version = heartbeatVersion;
         const resp = await fetch(`${basePath}/heartbeat`, {
           method: "POST",
-          headers: { "Content-Type": "application/json" },
+          headers: transportHeaders(authHeaderRef.current),
           body: JSON.stringify(body)
         });
         if (resp.ok) {
@@ -33254,7 +33315,8 @@ function CommandRelayListener(props) {
     appType: props.appType,
     framework: props.framework,
     capabilities: props.capabilities,
-    version: props.version
+    version: props.version,
+    authHeader: props.authHeader
   };
   useCommandRelay(options);
   return null;