@opengeni/react 1.0.1 → 2.2.0-canary.0

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-browser-frame-stream.ts

@@ -389,7 +389,7 @@ export function useBrowserFrameStream(
         connectSocket();
       } catch (cause) {
         if (attachmentAbort.signal.aborted || disposed) return;
-        fail(cause);
+        fail(cause, !isPlacementGenerationLossError(cause));
       }
     };
 
@@ -423,3 +423,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);
+}

package/src/hooks/use-browser-session.ts

@@ -16,6 +16,7 @@ import {
   type EmbeddedBrowserInteractionClientOverride,
   useEmbeddedBrowserInteraction,
 } from "../session-context";
+import { isNonRetryableInteractionError } from "../lib/interaction-errors";
 import { usePageLiveActivity } from "./internal";
 
 export type UseBrowserSessionOptions = EmbeddedBrowserInteractionClientOverride & {
@@ -71,6 +72,7 @@ export function useBrowserSession(options: UseBrowserSessionOptions): UseBrowser
   }>(() => emptyState(browserSessionId, enabled));
   const visible =
     state.browserSessionId === browserSessionId ? state : emptyState(browserSessionId, enabled);
+  const refreshBlocked = isNonRetryableInteractionError(visible.error);
   const selectedTargetIdRef = useRef<string | null>(visible.selectedTargetId);
   selectedTargetIdRef.current = visible.selectedTargetId;
   const observationRef = useRef<{
@@ -198,15 +200,15 @@ export function useBrowserSession(options: UseBrowserSessionOptions): UseBrowser
   }, [browserSessionId, enabled, invalidateRefresh, refresh]);
 
   useEffect(() => {
-    if (!enabled || !pageLive || visible.mutating) return;
+    if (!enabled || !pageLive || visible.mutating || refreshBlocked) return;
     const timer = setInterval(() => {
       if (!requestRef.current.controller) void refresh();
     }, pollIntervalMs);
     return () => clearInterval(timer);
-  }, [enabled, pageLive, pollIntervalMs, refresh, visible.mutating]);
+  }, [enabled, pageLive, pollIntervalMs, refresh, refreshBlocked, visible.mutating]);
 
   useEffect(() => {
-    if (!enabled || !browserSessionId || !pageLive) return;
+    if (!enabled || !browserSessionId || !pageLive || refreshBlocked) return;
     let disposed = false;
     const heartbeat = () => {
       void client.heartbeatBrowserSession(workspaceId, browserSessionId).catch(() => {
@@ -218,7 +220,7 @@ export function useBrowserSession(options: UseBrowserSessionOptions): UseBrowser
       disposed = true;
       clearInterval(timer);
     };
-  }, [browserSessionId, client, enabled, pageLive, refresh, workspaceId]);
+  }, [browserSessionId, client, enabled, pageLive, refresh, refreshBlocked, workspaceId]);
 
   const runMutation = useCallback(
     async <T>(scopeBrowserSessionId: string, operation: () => Promise<T>): Promise<T> => {

package/src/hooks/use-browser-sessions.ts

@@ -60,6 +60,7 @@ export function useBrowserSessions(
   const enabled = options.enabled ?? true;
   const [state, setState] = useState<{
     workspaceId: string;
+    active: boolean;
     revision: number;
     sessions: BrowserSession[];
     loading: boolean;
@@ -89,6 +90,7 @@ export function useBrowserSessions(
       requestRef.current = { id, controller };
       setState((current) => ({
         ...(current.workspaceId === workspaceId ? current : emptyState(workspaceId, true)),
+        active: true,
         loading: foreground,
         refreshing: !foreground,
         error: foreground || current.workspaceId !== workspaceId ? null : current.error,
@@ -100,6 +102,7 @@ export function useBrowserSessions(
         if (!mountedRef.current || requestRef.current.id !== id) return;
         setState({
           workspaceId,
+          active: true,
           revision: response.revision,
           sessions: sortBrowserSessions(response.sessions),
           loading: false,
@@ -229,7 +232,9 @@ export function useBrowserSessions(
     revision: visibleState.revision,
     sessions: visibleState.sessions,
     relevantSessions,
-    loading: visibleState.loading,
+    // A disabled registry is deliberately empty. Expose the first re-enabled
+    // render as loading so consumers do not reconcile against that empty gap.
+    loading: enabled ? !visibleState.active || visibleState.loading : false,
     refreshing: visibleState.refreshing,
     error: visibleState.error,
     refresh,
@@ -243,6 +248,7 @@ export function useBrowserSessions(
 function emptyState(workspaceId: string, loading: boolean) {
   return {
     workspaceId,
+    active: false,
     revision: 0,
     sessions: [] as BrowserSession[],
     loading,

package/src/hooks/use-channels.ts

@@ -1,6 +1,7 @@
 import type { Channel, CreateChannelRequest, Session, UpdateChannelRequest } from "@opengeni/sdk";
-import { useCallback } from "react";
+import { useCallback, useMemo, useSyncExternalStore } from "react";
 import { useOpenGeni, type ClientOverride } from "../provider";
+import { channelCacheFor } from "./channel-cache";
 import { useMutationRunner, usePolledValue } from "./internal";
 
 export type UseChannelsOptions = ClientOverride & {
@@ -15,6 +16,7 @@ export type UseChannelsResult = {
   refresh: () => Promise<void>;
   create: (request: CreateChannelRequest) => Promise<Channel | null>;
   update: (channelId: string, request: UpdateChannelRequest) => Promise<Channel | null>;
+  reorder: (channelIds: string[]) => Promise<Channel[] | null>;
   remove: (channelId: string) => Promise<boolean>;
   /** Re-file a session into a channel; null moves it back to the inbox. */
   moveSession: (sessionId: string, channelId: string | null) => Promise<Session | null>;
@@ -30,25 +32,33 @@ export type UseChannelsResult = {
  */
 export function useChannels(options: UseChannelsOptions = {}): UseChannelsResult {
   const { client, workspaceId } = useOpenGeni(options);
-  const load = useCallback(
-    async () => await client.listChannels(workspaceId),
-    [client, workspaceId],
-  );
-  const { data, loading, error, refresh } = usePolledValue(load, {
+  const cache = useMemo(() => channelCacheFor(client, workspaceId), [client, workspaceId]);
+  const snapshot = useSyncExternalStore(cache.subscribe, cache.getSnapshot, cache.getSnapshot);
+  const load = useCallback(async () => {
+    const ticket = cache.beginLoad();
+    const channels = await client.listChannels(workspaceId);
+    cache.acceptLoad(ticket, channels);
+    return channels;
+  }, [cache, client, workspaceId]);
+  const { loading, error, refresh } = usePolledValue(load, {
     pollIntervalMs: options.pollIntervalMs,
     enabled: options.enabled,
   });
-  const { run, mutating, mutationError, clearMutationError } = useMutationRunner();
+  const { run, mutating, mutationError, clearMutationError } = useMutationRunner(cache);
 
   const create = useCallback(
     async (request: CreateChannelRequest): Promise<Channel | null> => {
       const result = await run(() => client.createChannel(workspaceId, request));
       if (result) {
+        // Publish the canonical write response before this promise can resolve.
+        // The composer may create a session with this id immediately, while a
+        // sibling rail hook could still have an older list request in flight.
+        cache.publishCreated(result);
         await refresh();
       }
       return result;
     },
-    [client, workspaceId, run, refresh],
+    [cache, client, workspaceId, run, refresh],
   );
 
   const update = useCallback(
@@ -76,6 +86,15 @@ export function useChannels(options: UseChannelsOptions = {}): UseChannelsResult
     [client, workspaceId, run, refresh],
   );
 
+  const reorder = useCallback(
+    async (channelIds: string[]): Promise<Channel[] | null> => {
+      const result = await run(() => client.reorderChannels(workspaceId, { channelIds }));
+      if (result) await refresh();
+      return result;
+    },
+    [client, workspaceId, run, refresh],
+  );
+
   const moveSession = useCallback(
     async (sessionId: string, channelId: string | null): Promise<Session | null> => {
       return await run(() => client.updateSessionChannel(workspaceId, sessionId, { channelId }));
@@ -84,12 +103,15 @@ export function useChannels(options: UseChannelsOptions = {}): UseChannelsResult
   );
 
   return {
-    channels: data ?? [],
-    loading,
+    // Cache snapshots replace arrays instead of mutating them, so preserve the
+    // stable reference expected from the previous polled-value implementation.
+    channels: snapshot.channels as Channel[],
+    loading: loading && !snapshot.ready,
     error,
     refresh,
     create,
     update,
+    reorder,
     remove,
     moveSession,
     mutating,