@opengeni/react 1.0.1 → 1.0.2-canary.37191796234001

package/src/hooks/shared-machines-list.ts

@@ -0,0 +1,239 @@
+import { useCallback, useEffect, useState } from "react";
+import type { MachinesResponse } from "../types/machines";
+import { usePageLiveActivity } from "./internal";
+
+export const EMPTY_MACHINES: MachinesResponse = {
+  activeSandboxId: null,
+  activeEpoch: 0,
+  machines: [],
+};
+
+export type SharedMachinesSnapshot = {
+  data: MachinesResponse | null;
+  loading: boolean;
+  error: Error | null;
+};
+
+type Subscriber = {
+  load: (signal?: AbortSignal) => Promise<MachinesResponse>;
+  pollIntervalMs: number | undefined;
+  enabled: boolean;
+  pageLive: boolean;
+  onChange: () => void;
+};
+
+type Share = {
+  snapshot: SharedMachinesSnapshot;
+  subscribers: Set<Subscriber>;
+  timer: ReturnType<typeof setTimeout> | null;
+  disposeTimer: ReturnType<typeof setTimeout> | null;
+  abort: AbortController | null;
+  inFlight: Promise<void> | null;
+  trailing: Promise<void> | null;
+  generation: number;
+};
+
+const shares = new Map<string, Share>();
+
+function emit(share: Share): void {
+  for (const subscriber of share.subscribers) {
+    subscriber.onChange();
+  }
+}
+
+function effective(share: Share): { enabled: boolean; pollIntervalMs: number | undefined } {
+  let enabled = false;
+  let pollIntervalMs: number | undefined;
+  for (const subscriber of share.subscribers) {
+    if (!subscriber.enabled || !subscriber.pageLive) continue;
+    enabled = true;
+    if (subscriber.pollIntervalMs !== undefined && subscriber.pollIntervalMs > 0) {
+      pollIntervalMs =
+        pollIntervalMs === undefined
+          ? subscriber.pollIntervalMs
+          : Math.min(pollIntervalMs, subscriber.pollIntervalMs);
+    }
+  }
+  return { enabled, pollIntervalMs };
+}
+
+function latestLoad(share: Share): ((signal?: AbortSignal) => Promise<MachinesResponse>) | null {
+  let load: ((signal?: AbortSignal) => Promise<MachinesResponse>) | null = null;
+  for (const subscriber of share.subscribers) {
+    if (subscriber.enabled && subscriber.pageLive) load = subscriber.load;
+  }
+  return load;
+}
+
+function stopTimer(share: Share): void {
+  if (share.timer !== null) {
+    clearTimeout(share.timer);
+    share.timer = null;
+  }
+}
+
+function cancelDispose(share: Share): void {
+  if (share.disposeTimer !== null) {
+    clearTimeout(share.disposeTimer);
+    share.disposeTimer = null;
+  }
+}
+
+function arm(share: Share): void {
+  stopTimer(share);
+  const { enabled, pollIntervalMs } = effective(share);
+  if (!enabled || pollIntervalMs === undefined) return;
+  share.timer = setTimeout(() => {
+    share.timer = null;
+    void run(share).finally(() => arm(share));
+  }, pollIntervalMs);
+}
+
+async function runFresh(share: Share): Promise<void> {
+  const load = latestLoad(share);
+  if (!load) return;
+  const ticket = ++share.generation;
+  const abort = new AbortController();
+  share.abort = abort;
+  try {
+    const data = await load(abort.signal);
+    if (ticket !== share.generation || abort.signal.aborted) return;
+    share.snapshot = { data, loading: false, error: null };
+    emit(share);
+  } catch (cause) {
+    if (ticket !== share.generation || abort.signal.aborted) return;
+    share.snapshot = {
+      data: share.snapshot.data,
+      loading: false,
+      error: cause instanceof Error ? cause : new Error(String(cause)),
+    };
+    emit(share);
+  } finally {
+    if (share.abort === abort) share.abort = null;
+  }
+}
+
+function run(share: Share, force = false): Promise<void> {
+  if (!force && share.inFlight) return share.inFlight;
+  if (force && share.inFlight) {
+    if (share.trailing) return share.trailing;
+    let trailing!: Promise<void>;
+    trailing = share.inFlight
+      .then(async () => {
+        if (!effective(share).enabled) return;
+        await run(share);
+      })
+      .finally(() => {
+        if (share.trailing === trailing) share.trailing = null;
+      });
+    share.trailing = trailing;
+    return trailing;
+  }
+  let promise!: Promise<void>;
+  promise = runFresh(share).finally(() => {
+    if (share.inFlight === promise) share.inFlight = null;
+  });
+  share.inFlight = promise;
+  return promise;
+}
+
+function reconcile(share: Share): void {
+  const { enabled } = effective(share);
+  if (!enabled) {
+    share.generation += 1;
+    share.abort?.abort();
+    share.abort = null;
+    share.inFlight = null;
+    stopTimer(share);
+    if (share.snapshot.loading) {
+      share.snapshot = { ...share.snapshot, loading: false };
+      emit(share);
+    }
+    return;
+  }
+  if (share.snapshot.data !== null || share.snapshot.error) {
+    arm(share);
+    return;
+  }
+  share.snapshot = { ...share.snapshot, loading: true };
+  emit(share);
+  void run(share).finally(() => arm(share));
+}
+
+function getOrCreate(shareKey: string): Share {
+  const existing = shares.get(shareKey);
+  if (existing) {
+    cancelDispose(existing);
+    return existing;
+  }
+  const created: Share = {
+    snapshot: { data: null, loading: true, error: null },
+    subscribers: new Set(),
+    timer: null,
+    disposeTimer: null,
+    abort: null,
+    inFlight: null,
+    trailing: null,
+    generation: 0,
+  };
+  shares.set(shareKey, created);
+  return created;
+}
+
+export async function refreshSharedMachinesList(shareKey: string): Promise<void> {
+  const share = shares.get(shareKey);
+  if (!share) return;
+  await run(share, true);
+}
+
+export function useSharedMachinesList(
+  shareKey: string,
+  load: (signal?: AbortSignal) => Promise<MachinesResponse>,
+  options: { pollIntervalMs?: number | undefined; enabled?: boolean | undefined } = {},
+): SharedMachinesSnapshot & { refresh: () => Promise<void> } {
+  const enabled = options.enabled ?? true;
+  const pageLive = usePageLiveActivity();
+  const [, setRevision] = useState(0);
+  const live = shares.get(shareKey)?.snapshot;
+  const view = live ?? { data: null, loading: enabled && pageLive, error: null };
+
+  useEffect(() => {
+    const share = getOrCreate(shareKey);
+    const subscriber: Subscriber = {
+      load,
+      pollIntervalMs: options.pollIntervalMs,
+      enabled,
+      pageLive,
+      onChange: () => setRevision((revision) => revision + 1),
+    };
+    share.subscribers.add(subscriber);
+    setRevision((revision) => revision + 1);
+    reconcile(share);
+    return () => {
+      share.subscribers.delete(subscriber);
+      if (share.subscribers.size > 0) {
+        reconcile(share);
+        return;
+      }
+      // Abort immediately so a session switch does not keep the old GET alive.
+      // Keep the snapshot one tick so a same-key remount (poll-interval change)
+      // does not flash an empty fleet.
+      share.generation += 1;
+      share.abort?.abort();
+      share.abort = null;
+      share.inFlight = null;
+      share.trailing = null;
+      stopTimer(share);
+      cancelDispose(share);
+      share.disposeTimer = setTimeout(() => {
+        share.disposeTimer = null;
+        if (share.subscribers.size === 0 && shares.get(shareKey) === share) {
+          shares.delete(shareKey);
+        }
+      }, 0);
+    };
+  }, [shareKey, load, options.pollIntervalMs, enabled, pageLive]);
+
+  const refresh = useCallback(() => refreshSharedMachinesList(shareKey), [shareKey]);
+  return { ...view, refresh };
+}

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

@@ -1,4 +1,4 @@
-import type { AttachedBrowserDevice } from "@opengeni/sdk/interaction";
+import type { AttachedBrowserBridge, AttachedBrowserDevice } from "@opengeni/sdk/interaction";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { EmbeddedBrowserInteractionClientLike } from "../client";
 import {
@@ -15,6 +15,7 @@ export type UseAttachedBrowsersOptions = EmbeddedBrowserInteractionClientOverrid
 
 export type UseAttachedBrowsersResult = {
   revision: number;
+  bridges: AttachedBrowserBridge[];
   devices: AttachedBrowserDevice[];
   loading: boolean;
   refreshing: boolean;
@@ -67,6 +68,7 @@ export function useAttachedBrowsers(
         setState({
           workspaceId,
           revision: response.revision,
+          bridges: response.bridges,
           devices: sortDevices(response.devices),
           loading: false,
           refreshing: false,
@@ -117,6 +119,7 @@ export function useAttachedBrowsers(
 
   return {
     revision: visible.revision,
+    bridges: visible.bridges,
     devices: visible.devices,
     loading: visible.loading,
     refreshing: visible.refreshing,
@@ -129,6 +132,7 @@ function emptyState(workspaceId: string, loading: boolean) {
   return {
     workspaceId,
     revision: 0,
+    bridges: [] as AttachedBrowserBridge[],
     devices: [] as AttachedBrowserDevice[],
     loading,
     refreshing: false,

package/src/hooks/use-available-models.ts

@@ -43,7 +43,10 @@ export function useAvailableModels(
   options: UseAvailableModelsOptions = {},
 ): UseAvailableModelsResult {
   const client = useOpenGeniClient(options);
-  const load = useCallback(async () => await client.getClientConfig(), [client]);
+  const load = useCallback(
+    async (signal?: AbortSignal) => await client.getClientConfig({ signal }),
+    [client],
+  );
   const state = usePolledValue(load, {
     pollIntervalMs: options.pollIntervalMs,
     enabled: options.enabled,
@@ -62,19 +65,22 @@ export function useWorkspaceModelCatalog(
   options: UseWorkspaceModelCatalogOptions,
 ): UseWorkspaceModelCatalogResult {
   const client = useOpenGeniClient(options);
-  const load = useCallback(async () => {
-    if (!options.workspaceId) {
-      return { models: [], defaultModel: null };
-    }
-    const [catalog, config] = await Promise.all([
-      client.getWorkspaceModelCatalog(options.workspaceId),
-      client.getClientConfig(),
-    ]);
-    return {
-      models: catalog.models,
-      defaultModel: config.defaultModel,
-    };
-  }, [client, options.workspaceId]);
+  const load = useCallback(
+    async (signal?: AbortSignal) => {
+      if (!options.workspaceId) {
+        return { models: [], defaultModel: null };
+      }
+      const [catalog, config] = await Promise.all([
+        client.getWorkspaceModelCatalog(options.workspaceId, { signal }),
+        client.getClientConfig({ signal, workspaceId: options.workspaceId }),
+      ]);
+      return {
+        models: catalog.models,
+        defaultModel: config.defaultModel,
+      };
+    },
+    [client, options.workspaceId],
+  );
   const state = usePolledValue(load, {
     pollIntervalMs: options.pollIntervalMs,
     enabled: options.enabled !== false && Boolean(options.workspaceId),

package/src/hooks/use-browser-frame-stream.ts

@@ -19,6 +19,7 @@ import {
   STREAM_KIND_BROWSER,
   STREAM_ROLE_CLIENT,
 } from "../lib/relay-wire";
+import { usePageLiveActivity } from "./internal";
 
 export type BrowserFrameConnectionState =
   | "idle"
@@ -57,7 +58,12 @@ export type UseBrowserFrameStreamResult = {
   frame: BrowserFrame | null;
   attachment: Pick<
     BrowserSessionAttachment,
-    "browserSessionId" | "controllerGeneration" | "targetId" | "expiresAt"
+    | "browserSessionId"
+    | "controllerGeneration"
+    | "targetId"
+    | "expiresAt"
+    | "fencedInputBatches"
+    | "focusedInputObservations"
   > | null;
   error: Error | null;
   reconnect: () => void;
@@ -73,7 +79,8 @@ export function useBrowserFrameStream(
   options: UseBrowserFrameStreamOptions,
 ): UseBrowserFrameStreamResult {
   const { client, workspaceId } = useEmbeddedBrowserInteraction(options);
-  const enabled = options.enabled ?? true;
+  const pageLive = usePageLiveActivity();
+  const enabled = (options.enabled ?? true) && pageLive;
   const [nonce, setNonce] = useState(0);
   const [result, setResult] = useState<Omit<UseBrowserFrameStreamResult, "reconnect">>({
     state: "idle",
@@ -320,6 +327,10 @@ export function useBrowserFrameStream(
           : browserFrameSocketUrl(activeAttachment, streamRef.current),
         activeStream.kind === "direct_websocket" ? [...activeStream.protocols] : [],
       );
+      // Frame sequence numbers belong to the producer behind this socket, not
+      // to the target document. A refreshed attachment can restart at one
+      // without changing any target or document generation.
+      latestRef.current = { key: "", sequence: -1 };
       socket = openedSocket;
       socketHandlers = {
         open: () => onOpen(openedSocket),
@@ -372,6 +383,12 @@ export function useBrowserFrameStream(
             controllerGeneration: attachment.controllerGeneration,
             targetId: attachment.targetId,
             expiresAt: attachment.expiresAt,
+            ...(attachment.fencedInputBatches === true
+              ? { fencedInputBatches: true as const }
+              : {}),
+            ...(attachment.focusedInputObservations === true
+              ? { focusedInputObservations: true as const }
+              : {}),
           },
           error: null,
         }));
@@ -389,7 +406,7 @@ export function useBrowserFrameStream(
         connectSocket();
       } catch (cause) {
         if (attachmentAbort.signal.aborted || disposed) return;
-        fail(cause);
+        fail(cause, !isPlacementGenerationLossError(cause));
       }
     };
 
@@ -423,3 +440,8 @@ async function messageBytes(value: unknown): Promise<Uint8Array> {
   }
   throw new Error("browser frame stream returned a non-binary message");
 }
+
+function isPlacementGenerationLossError(cause: unknown): boolean {
+  const message = cause instanceof Error ? cause.message : String(cause);
+  return /placement instance changed|controller authority changed/i.test(message);
+}