@opengeni/react 0.46.1 → 0.52.1

package/src/hooks/internal.ts

@@ -2,6 +2,51 @@ import type { SessionEvent } from "@opengeni/sdk";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import type { EmbeddedSessionEventClientLike } from "../client";
 
+const HIDDEN_STREAM_GRACE_MS = 2_000;
+
+/**
+ * Keep live browser work active while the page is visible, then suspend it
+ * after a short hidden-tab grace period. Returning to the page re-enables the
+ * caller, which must reconcile durable state before resuming live delivery.
+ */
+export function usePageLiveActivity(hiddenGraceMs = HIDDEN_STREAM_GRACE_MS): boolean {
+  // Keep the server and initial browser render identical; the effect applies
+  // visibility after mount and preserves the intentional hidden-tab grace.
+  const [active, setActive] = useState(true);
+
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    let hiddenTimer: ReturnType<typeof setTimeout> | null = null;
+    const cancelHiddenTimer = () => {
+      if (hiddenTimer !== null) {
+        clearTimeout(hiddenTimer);
+        hiddenTimer = null;
+      }
+    };
+    const sync = () => {
+      cancelHiddenTimer();
+      if (document.visibilityState !== "hidden") {
+        setActive(true);
+        return;
+      }
+      hiddenTimer = setTimeout(() => {
+        hiddenTimer = null;
+        if (document.visibilityState === "hidden") setActive(false);
+      }, hiddenGraceMs);
+    };
+    document.addEventListener("visibilitychange", sync);
+    window.addEventListener("pageshow", sync);
+    sync();
+    return () => {
+      cancelHiddenTimer();
+      document.removeEventListener("visibilitychange", sync);
+      window.removeEventListener("pageshow", sync);
+    };
+  }, [hiddenGraceMs]);
+
+  return active;
+}
+
 export type AsyncListState<T> = {
   data: T | null;
   loading: boolean;
@@ -19,6 +64,7 @@ export function usePolledValue<T>(
 ): AsyncListState<T> {
   const enabled = options.enabled ?? true;
   const pollIntervalMs = options.pollIntervalMs;
+  const pageLive = usePageLiveActivity();
   const [data, setData] = useState<T | null>(null);
   const [loading, setLoading] = useState(enabled);
   const [error, setError] = useState<Error | null>(null);
@@ -28,6 +74,8 @@ export function usePolledValue<T>(
     activeLoadRef.current = load;
   }, [load]);
   const requestAbortRef = useRef<AbortController | null>(null);
+  const inFlightRef = useRef<{ load: typeof load; promise: Promise<void> } | null>(null);
+  const trailingRefreshRef = useRef<{ load: typeof load; promise: Promise<void> } | null>(null);
   const [stateIdentity, setStateIdentity] = useState<{ load: typeof load }>(() => ({ load }));
 
   // A new loader identity means a new query (different session/workspace/...):
@@ -40,68 +88,107 @@ export function usePolledValue<T>(
     }
   }, [load, stateIdentity.load]);
 
-  const run = useCallback(async () => {
+  const run = useCallback((): Promise<void> => {
     // A callback retained by a completed mutation from the previous query must
     // not supersede or settle the current query's request.
-    if (activeLoadRef.current !== load) return;
+    if (activeLoadRef.current !== load) return Promise.resolve();
+    const existing = inFlightRef.current;
+    if (existing?.load === load) return existing.promise;
     const ticket = ++generation.current;
-    requestAbortRef.current?.abort();
     const requestAbort = new AbortController();
     requestAbortRef.current = requestAbort;
-    try {
-      const result = await load(requestAbort.signal);
-      if (
-        ticket === generation.current &&
-        activeLoadRef.current === load &&
-        !requestAbort.signal.aborted
-      ) {
-        setData(result);
-        setError(null);
-        setLoading(false);
-      }
-    } catch (cause) {
-      if (
-        ticket === generation.current &&
-        activeLoadRef.current === load &&
-        !requestAbort.signal.aborted
-      ) {
-        setError(cause instanceof Error ? cause : new Error(String(cause)));
-        setLoading(false);
-      }
-    } finally {
-      if (requestAbortRef.current === requestAbort) {
-        requestAbortRef.current = null;
+    let promise!: Promise<void>;
+    promise = (async () => {
+      try {
+        const result = await load(requestAbort.signal);
+        if (
+          ticket === generation.current &&
+          activeLoadRef.current === load &&
+          !requestAbort.signal.aborted
+        ) {
+          setData(result);
+          setError(null);
+          setLoading(false);
+        }
+      } catch (cause) {
+        if (
+          ticket === generation.current &&
+          activeLoadRef.current === load &&
+          !requestAbort.signal.aborted
+        ) {
+          setError(cause instanceof Error ? cause : new Error(String(cause)));
+          setLoading(false);
+        }
+      } finally {
+        if (requestAbortRef.current === requestAbort) requestAbortRef.current = null;
+        if (inFlightRef.current?.promise === promise) inFlightRef.current = null;
       }
-    }
+    })();
+    inFlightRef.current = { load, promise };
+    return promise;
   }, [load]);
 
+  const refresh = useCallback((): Promise<void> => {
+    const existing = inFlightRef.current;
+    if (existing?.load !== load) return run();
+    const trailing = trailingRefreshRef.current;
+    if (trailing?.load === load) return trailing.promise;
+    let promise!: Promise<void>;
+    promise = existing.promise.then(async () => {
+      if (trailingRefreshRef.current?.promise === promise) {
+        trailingRefreshRef.current = null;
+      }
+      if (activeLoadRef.current === load) await run();
+    });
+    trailingRefreshRef.current = { load, promise };
+    return promise;
+  }, [load, run]);
+
   useEffect(() => {
-    if (!enabled) {
+    if (!enabled || !pageLive) {
       setLoading(false);
+      generation.current += 1;
+      requestAbortRef.current?.abort();
+      inFlightRef.current = null;
+      trailingRefreshRef.current = null;
       return;
     }
     setLoading(true);
-    void run();
+    let cancelled = false;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    const schedule = () => {
+      if (cancelled || pollIntervalMs === undefined || pollIntervalMs <= 0) return;
+      timer = setTimeout(() => {
+        timer = null;
+        void run().finally(schedule);
+      }, pollIntervalMs);
+    };
+    void run().finally(schedule);
     if (pollIntervalMs === undefined || pollIntervalMs <= 0) {
       return () => {
+        cancelled = true;
         generation.current += 1;
         requestAbortRef.current?.abort();
+        inFlightRef.current = null;
+        trailingRefreshRef.current = null;
       };
     }
-    const timer = setInterval(() => void run(), pollIntervalMs);
     return () => {
-      clearInterval(timer);
+      cancelled = true;
+      if (timer !== null) clearTimeout(timer);
       generation.current += 1;
       requestAbortRef.current?.abort();
+      inFlightRef.current = null;
+      trailingRefreshRef.current = null;
     };
-  }, [run, enabled, pollIntervalMs]);
+  }, [run, enabled, pageLive, pollIntervalMs]);
 
   const identityMatches = stateIdentity.load === load;
   return {
     data: identityMatches ? data : null,
     loading: identityMatches ? loading : enabled,
     error: identityMatches ? error : null,
-    refresh: run,
+    refresh,
   };
 }
 
@@ -224,6 +311,8 @@ export function useSessionEventTrigger(
   reconcileBeforeLive?: (() => void | Promise<void>) | undefined,
 ): void {
   const enabled = options.enabled ?? true;
+  const pageLive = usePageLiveActivity();
+  const liveEnabled = enabled && pageLive;
   const events = options.events;
   const sharedFeed = events !== undefined;
   const matchRef = useRef(match);
@@ -240,7 +329,7 @@ export function useSessionEventTrigger(
 
   // Shared-log mode: scan only the unseen tail on every append.
   useEffect(() => {
-    if (!sharedFeed || !enabled || !sessionId) {
+    if (!sharedFeed || !liveEnabled || !sessionId) {
       return;
     }
     const feedKey = `${workspaceId}\u0000${sessionId}`;
@@ -285,11 +374,11 @@ export function useSessionEventTrigger(
         onEventRef.current(event);
       }
     }
-  }, [sharedFeed, enabled, events, workspaceId, sessionId]);
+  }, [sharedFeed, liveEnabled, events, workspaceId, sessionId]);
 
   // Self-stream mode: tail from the session's current lastSequence.
   useEffect(() => {
-    if (sharedFeed || !enabled || !sessionId) {
+    if (sharedFeed || !liveEnabled || !sessionId) {
       return;
     }
     const controller = new AbortController();
@@ -302,7 +391,12 @@ export function useSessionEventTrigger(
         const stream = client.streamEvents(workspaceId, sessionId, {
           after: session.lastSequence,
           signal: controller.signal,
-          beforeLive: async () => await reconcileBeforeLiveRef.current?.(),
+          onOpen: () => {
+            // Start reconciliation without delaying consumption of live SSE.
+            void Promise.resolve()
+              .then(() => reconcileBeforeLiveRef.current?.())
+              .catch(() => undefined);
+          },
         });
         for await (const event of stream) {
           if (matchRef.current(event)) {
@@ -317,7 +411,7 @@ export function useSessionEventTrigger(
     return () => {
       controller.abort();
     };
-  }, [sharedFeed, enabled, client, workspaceId, sessionId]);
+  }, [sharedFeed, liveEnabled, client, workspaceId, sessionId]);
 }
 
 /** Debounce rapid event bursts into one trailing call (default 150ms). */

package/src/hooks/use-attached-browsers.ts

@@ -0,0 +1,152 @@
+import type { AttachedBrowserDevice } from "@opengeni/sdk/interaction";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { EmbeddedBrowserInteractionClientLike } from "../client";
+import {
+  type EmbeddedBrowserInteractionClientOverride,
+  useEmbeddedBrowserInteraction,
+} from "../session-context";
+import { usePageLiveActivity } from "./internal";
+
+export type UseAttachedBrowsersOptions = EmbeddedBrowserInteractionClientOverride & {
+  enabled?: boolean | undefined;
+  includeDisconnected?: boolean | undefined;
+  pollIntervalMs?: number | undefined;
+};
+
+export type UseAttachedBrowsersResult = {
+  revision: number;
+  devices: AttachedBrowserDevice[];
+  loading: boolean;
+  refreshing: boolean;
+  error: Error | null;
+  refresh: () => Promise<void>;
+};
+
+/** Workspace-wide inventory of Chrome profiles currently connected through an
+ * enrolled OpenGeni machine. BrowserSessions remain the execution authority. */
+export function useAttachedBrowsers(
+  options: UseAttachedBrowsersOptions = {},
+): UseAttachedBrowsersResult {
+  const { client, workspaceId } = useEmbeddedBrowserInteraction(options);
+  const enabled = options.enabled ?? true;
+  const includeDisconnected = options.includeDisconnected ?? false;
+  const pageLive = usePageLiveActivity();
+  const pollIntervalMs = Math.max(1_000, options.pollIntervalMs ?? 3_000);
+  const [state, setState] = useState(() => emptyState(workspaceId, enabled));
+  const requestRef = useRef<{ id: number; controller: AbortController | null }>({
+    id: 0,
+    controller: null,
+  });
+  const mountedRef = useRef(true);
+  const visible = state.workspaceId === workspaceId ? state : emptyState(workspaceId, enabled);
+
+  const cancelLoad = useCallback(() => {
+    const id = requestRef.current.id + 1;
+    requestRef.current.controller?.abort();
+    requestRef.current = { id, controller: null };
+  }, []);
+
+  const load = useCallback(
+    async (foreground: boolean): Promise<void> => {
+      if (!enabled) return;
+      const id = requestRef.current.id + 1;
+      requestRef.current.controller?.abort();
+      const controller = new AbortController();
+      requestRef.current = { id, controller };
+      setState((current) => ({
+        ...(current.workspaceId === workspaceId ? current : emptyState(workspaceId, true)),
+        loading: foreground,
+        refreshing: !foreground,
+        error: foreground || current.workspaceId !== workspaceId ? null : current.error,
+      }));
+      try {
+        const response = await client.listAttachedBrowsers(workspaceId, {
+          includeDisconnected,
+          signal: controller.signal,
+        });
+        if (!mountedRef.current || requestRef.current.id !== id) return;
+        setState({
+          workspaceId,
+          revision: response.revision,
+          devices: sortDevices(response.devices),
+          loading: false,
+          refreshing: false,
+          error: null,
+        });
+      } catch (cause) {
+        if (controller.signal.aborted || !mountedRef.current || requestRef.current.id !== id)
+          return;
+        setState((current) => ({
+          ...(current.workspaceId === workspaceId ? current : emptyState(workspaceId, true)),
+          loading: false,
+          refreshing: false,
+          error: cause instanceof Error ? cause : new Error(String(cause)),
+        }));
+      } finally {
+        if (requestRef.current.id === id) requestRef.current = { id, controller: null };
+      }
+    },
+    [client, enabled, includeDisconnected, workspaceId],
+  );
+
+  const refresh = useCallback(async () => await load(false), [load]);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    if (!enabled) {
+      cancelLoad();
+      setState(emptyState(workspaceId, false));
+      return;
+    }
+    void load(true);
+    return () => {
+      mountedRef.current = false;
+      cancelLoad();
+    };
+  }, [cancelLoad, enabled, load, workspaceId]);
+
+  useEffect(() => {
+    if (!enabled || !pageLive) return;
+    const timer = setInterval(() => {
+      if (!requestRef.current.controller) void load(false);
+    }, pollIntervalMs);
+    return () => clearInterval(timer);
+  }, [enabled, load, pageLive, pollIntervalMs]);
+
+  return {
+    revision: visible.revision,
+    devices: visible.devices,
+    loading: visible.loading,
+    refreshing: visible.refreshing,
+    error: visible.error,
+    refresh,
+  };
+}
+
+function emptyState(workspaceId: string, loading: boolean) {
+  return {
+    workspaceId,
+    revision: 0,
+    devices: [] as AttachedBrowserDevice[],
+    loading,
+    refreshing: false,
+    error: null as Error | null,
+  };
+}
+
+function sortDevices(devices: readonly AttachedBrowserDevice[]): AttachedBrowserDevice[] {
+  return [...devices].sort(
+    (left, right) =>
+      Number(right.state === "connected") - Number(left.state === "connected") ||
+      timestamp(right.lastSeenAt) - timestamp(left.lastSeenAt) ||
+      left.name.localeCompare(right.name),
+  );
+}
+
+function timestamp(value: string): number {
+  const parsed = Date.parse(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+/** Exported for narrow proxy implementations and tests. */
+export type AttachedBrowsersClient = EmbeddedBrowserInteractionClientLike;