@opengeni/react 0.15.0 → 0.20.0

package/README.md

@@ -4,16 +4,17 @@ React hooks and styled components for OpenGeni, built on
 [`@opengeni/sdk`](../sdk): live session streaming, a chat composer, a message
 timeline that renders streaming deltas / tool calls / spawned-worker status,
 session status badges, and fleet tiles for workspace overviews. Two opt-in
-surfaces layer on top: a **sandbox-surfacing** workbench (files, terminal, diff,
+surfaces layer on top: a **sandbox workspace** workbench (files, terminal, diff,
 and an optional desktop stream) and, at the
 [`@opengeni/react/machines`](#connected-machines-opengenireactmachines) subpath,
 the **Connected Machines** dashboard + enrollment flow.
 
 The default root import (`@opengeni/react`) is the clean sandbox-agnostic
-surface — the chat/timeline hooks and components plus the sandbox-surfacing
-suite. Connected-Machine UI lives under the `@opengeni/react/machines` subpath so
-consumers that never surface machines don't pull it in. (The root barrel still
-re-exports the machines island for back-compat, deprecated per #144.)
+surface — the chat/timeline hooks and components plus the sandbox workspace
+suite. Advanced chat-composer composition lives under
+`@opengeni/react/composer`; Connected-Machine UI lives under
+`@opengeni/react/machines`. (The root barrel still re-exports the machines
+island for back-compat, deprecated per #144.)
 
 Design-system-first: every visual decision routes through CSS-variable tokens
 (`styles/tokens.css`) — color, typography, radius, shadow, motion. Dark mode is
@@ -24,6 +25,27 @@ animation. Override the tokens to rebrand everything.
 
 ## Install & styles
 
+Hosts that render their own UI should import the session-only surface:
+
+```tsx
+import {
+  useComposer,
+  useSessionControl,
+  useSessionEvents,
+  useTurnQueue,
+} from "@opengeni/react/session";
+```
+
+That subpath contains session hooks, approval helpers, and the pure timeline
+projection only. It does not load the styled composer, timeline, workbench,
+CSS, or their optional editor/terminal peers. Pass `{ client, workspaceId }` to
+each hook when the host intentionally does not mount `OpenGeniProvider`. The
+exported `SessionClientLike` is deliberately narrow: a tenant-safe proxy needs
+only session events, composer draft/send, queue, pause/resume, and approval
+operations. Workspace-level Resume is an optional authority.
+
+The styled root surface uses Tailwind v4 and the package CSS entries:
+
 The package ships TypeScript source plus two CSS entries. In your Tailwind v4
 entry CSS:
 
@@ -84,6 +106,82 @@ export function App() {
 }
 ```
 
+## Composer customization (`@opengeni/react/composer`)
+
+Use `ChatComposer` for the standard layout and its `controlsStart`, `header`,
+and `messages` props for small additions. For a different layout, import the
+headless controller and compound primitives as a namespace. The controller is
+the one behavior path for keyboard routing, guarded queue/steer submission,
+attachments, commands, pause/resume, focus, confirmations, and feedback.
+
+```tsx
+import * as Composer from "@opengeni/react/composer";
+
+function InsertTranscript() {
+  const composer = Composer.useChatComposer();
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        const separator = composer.value.trim().length > 0 ? " " : "";
+        composer.setValue(`${composer.value}${separator}Transcribed text`);
+        composer.focusInput();
+      }}
+    >
+      Insert transcript
+    </button>
+  );
+}
+
+function CustomComposer({ sessionComposer, attachments, effectiveControl }) {
+  const controller = Composer.useChatComposerController({
+    delivery: sessionComposer,
+    draft: sessionComposer,
+    control: sessionComposer,
+    attachments,
+    effectiveControl,
+  });
+
+  return (
+    <Composer.Root controller={controller}>
+      <Composer.Frame>
+        <Composer.CommandPalette />
+        <Composer.Surface>
+          <Composer.PausedState />
+          <Composer.RestoredResources />
+          <Composer.Attachments />
+          <Composer.Input />
+          {controller.confirmState ? (
+            <Composer.Confirmation />
+          ) : (
+            <Composer.Footer>
+              <Composer.Controls>
+                <Composer.AttachButton />
+                <InsertTranscript />
+              </Composer.Controls>
+              <Composer.Actions>
+                <Composer.PauseButton />
+                <Composer.SendButton />
+              </Composer.Actions>
+            </Composer.Footer>
+          )}
+        </Composer.Surface>
+      </Composer.Frame>
+      <Composer.Help />
+      <Composer.Status />
+    </Composer.Root>
+  );
+}
+```
+
+For a pre-session or otherwise limited composer, pass only `delivery`; `draft`
+and `control` are optional capabilities rather than no-op requirements. Custom
+controls should call `controller.submit("queue" | "steer")` (or read it through
+`useChatComposer`) instead of calling a delivery adapter directly, so upload,
+disabled, in-flight, and slash-command guards stay intact. Accessory-local UI
+state remains application-owned; durable draft and session state remain in
+`useComposer`.
+
 ## Hooks
 
 - `useSessionEvents(sessionId)` — loads a compact, bounded tail window by
@@ -108,7 +206,8 @@ export function App() {
   `steerTurn`, and `removeTurn`. Mutations carry observed revisions and conflicts
   refetch server truth. Live-updates on `turn.*` and `session.queue.*` events — pass the
   `events` log from `useSessionEvents` to reuse its stream, or let it tail the
-  session itself.
+  session itself. Providerless self-streams reconcile authoritative queue/draft
+  state after the SSE connection opens, closing the initial-read handoff race.
 - `useGoal(sessionId, { events })` — goal state + autonomy counters
   (`autoContinuations`, `noProgressStreak`) with `pause(rationale?)` /
   `resume()`. Goal-less sessions yield `goal: null`. Live-updates on `goal.*`
@@ -165,11 +264,12 @@ intentional changes should regenerate those snapshots and review the diff.
 
 ## Components
 
-- `ChatComposer` — auto-growing textarea, Enter-to-send (IME-safe), stop
-  control while a turn runs, inline error recovery. Slots for app chrome:
+- `ChatComposer` — auto-growing textarea, Enter-to-send (IME-safe), pause/resume
+  controls, inline error recovery. Slots for app chrome:
   `controlsStart` (footer controls like model pickers / attach buttons),
   `header` (e.g. attachment chips above the field), and `onPaste`
-  (paste-image-to-attach).
+  (paste-image-to-attach). Its advanced controller and compound primitives are
+  exported from `@opengeni/react/composer`.
 - `MessageTimeline` — the session timeline with stick-to-bottom scrolling, a
   "jump to latest" affordance, streaming caret, collapsible activity clusters,
   and worker cards (wire `onOpenSession` to drill into a worker). Pass
@@ -253,7 +353,7 @@ end-to-end embedder story (create-on-machine, discover, swap, enroll, revoke).
 
 ## Optional peer dependencies
 
-The chat/timeline surface has none. The sandbox-surfacing and diff surfaces pull
+The chat/timeline surface has none. The sandbox workspace and diff surfaces pull
 their heavy libraries from **optional** `peerDependencies`, so you install only
 what the surfaces you mount need:
 

package/dist/{chunk-TOJR776I.js → chunk-6BXBGJ3B.js}

@@ -1,3 +1,15 @@
+import {
+  cn
+} from "./chunk-TK7G6XLT.js";
+import {
+  OpenGeniContext,
+  formatBytes,
+  formatRelativeTime,
+  useMutationRunner,
+  useOpenGeni,
+  usePolledValue
+} from "./chunk-HHFA4AFX.js";
+
 // src/types/machines.ts
 function connectionStatusForState(state) {
   switch (state) {
@@ -17,20 +29,6 @@ function connectionStatusForState(state) {
   }
 }
 
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [{ text: ["og-xs", "og-sm", "og-base", "og-md"] }]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
 // src/components/machine-status-pill.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var CONNECTION_STATUS_META = {
@@ -153,116 +151,6 @@ function MachineStatusPill({
   );
 }
 
-// src/lib/format.ts
-function formatRelativeTime(iso, now = /* @__PURE__ */ new Date()) {
-  const then = new Date(iso).getTime();
-  if (Number.isNaN(then)) {
-    return "";
-  }
-  const seconds = Math.max(0, Math.floor((now.getTime() - then) / 1e3));
-  if (seconds < 10) {
-    return "now";
-  }
-  if (seconds < 60) {
-    return `${seconds}s`;
-  }
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) {
-    return `${minutes}m`;
-  }
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) {
-    return `${hours}h`;
-  }
-  const days = Math.floor(hours / 24);
-  if (days < 14) {
-    return `${days}d`;
-  }
-  return new Date(iso).toLocaleDateString();
-}
-function formatBytes(bytes) {
-  if (bytes < 1024) {
-    return `${bytes} B`;
-  }
-  const units = ["KB", "MB", "GB"];
-  let value = bytes / 1024;
-  for (const unit of units) {
-    if (value < 1024 || unit === "GB") {
-      return `${value.toFixed(value < 10 ? 1 : 0)} ${unit}`;
-    }
-    value /= 1024;
-  }
-  return `${bytes} B`;
-}
-function truncate(text, maxLength) {
-  const collapsed = text.replace(/\s+/g, " ").trim();
-  if (collapsed.length <= maxLength) {
-    return collapsed;
-  }
-  return `${collapsed.slice(0, Math.max(0, maxLength - 1)).trimEnd()}\u2026`;
-}
-function stringifyPayload(value) {
-  if (value === null || value === void 0) {
-    return "";
-  }
-  if (typeof value === "string") {
-    const parsed = tryParseJson(value);
-    if (parsed !== void 0 && typeof parsed === "object") {
-      return stringifyPayload(parsed);
-    }
-    return value;
-  }
-  try {
-    return JSON.stringify(value, null, 2) ?? String(value);
-  } catch {
-    return String(value);
-  }
-}
-function tryParseJson(text) {
-  const trimmed = text.trim();
-  if (!trimmed.startsWith("{") && !trimmed.startsWith("[") && !trimmed.startsWith('"')) {
-    return void 0;
-  }
-  try {
-    return JSON.parse(trimmed);
-  } catch {
-    return void 0;
-  }
-}
-var CREDIT_EXHAUSTION_MESSAGE = "Out of OpenGeni credits \u2014 this workspace's balance is empty. Add credits to continue; the conversation is preserved.";
-function isCreditExhaustion(input) {
-  if (typeof input === "string") {
-    return input.toLowerCase().includes("insufficient opengeni credits");
-  }
-  if (input.segmentLimit === "budget_exhausted") {
-    return true;
-  }
-  for (const text of [input.error, input.detail]) {
-    if (typeof text === "string" && text.toLowerCase().includes("insufficient opengeni credits")) {
-      return true;
-    }
-  }
-  return false;
-}
-function humanizeFailureReason(reason) {
-  if (!reason) {
-    return reason;
-  }
-  if (isCreditExhaustion(reason)) {
-    return CREDIT_EXHAUSTION_MESSAGE;
-  }
-  const normalized = reason.toLowerCase();
-  const authFailure = normalized.includes("incorrect api key") || normalized.includes("invalid api key") || normalized.includes("invalid_api_key") || normalized.includes("platform.openai.com/account/api-keys") || normalized.includes("401") && (normalized.includes("api key") || normalized.includes("unauthorized"));
-  if (authFailure) {
-    return "The model provider rejected this deployment's engine credentials. Sending messages won't help until the deployment's engine configuration is fixed.";
-  }
-  const quotaFailure = normalized.includes("insufficient_quota") || normalized.includes("exceeded your current quota");
-  if (quotaFailure) {
-    return "The model provider refused the request: this deployment's provider quota is exhausted.";
-  }
-  return reason;
-}
-
 // src/components/machine-metrics.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function pct(value) {
@@ -741,7 +629,7 @@ function MachineCard({
                 onAttach?.(machine);
               },
               className: cn(
-                "rounded-og-sm border border-og-border px-2.5 py-1 text-og-xs font-medium text-og-fg-muted transition-colors pointer-coarse:min-h-10",
+                "rounded-og-sm border border-og-border px-2.5 py-1 text-og-xs font-medium text-og-fg-muted transition-colors pointer-coarse:min-h-11",
                 "hover:border-og-border-strong hover:text-og-fg disabled:cursor-not-allowed disabled:opacity-50"
               ),
               children: attaching ? "Switching\u2026" : "Attach"
@@ -1260,7 +1148,7 @@ function EmptyState({ onEnroll }) {
             type: "button",
             "data-enroll-cta": true,
             onClick: onEnroll,
-            className: "inline-flex items-center gap-1.5 rounded-og-sm bg-og-accent px-3 py-1.5 text-og-sm font-medium text-og-accent-fg transition-colors hover:bg-og-accent-strong pointer-coarse:min-h-10",
+            className: "inline-flex items-center gap-1.5 rounded-og-sm bg-og-accent px-3 py-1.5 text-og-sm font-medium text-og-accent-fg transition-colors hover:bg-og-accent-strong pointer-coarse:min-h-11",
             children: [
               /* @__PURE__ */ jsx8(PlusIcon, { className: "size-3.5", "aria-hidden": true }),
               "Enroll a machine"
@@ -1300,7 +1188,7 @@ function Header({
           type: "button",
           "data-enroll-cta": true,
           onClick: onEnroll,
-          className: "inline-flex items-center gap-1.5 rounded-og-sm border border-og-border px-2.5 py-1 text-og-sm font-medium text-og-fg-muted transition-colors hover:border-og-border-strong hover:text-og-fg pointer-coarse:min-h-10",
+          className: "inline-flex items-center gap-1.5 rounded-og-sm border border-og-border px-2.5 py-1 text-og-sm font-medium text-og-fg-muted transition-colors hover:border-og-border-strong hover:text-og-fg pointer-coarse:min-h-11",
           children: [
             /* @__PURE__ */ jsx8(PlusIcon, { className: "size-3.5", "aria-hidden": true }),
             "Enroll machine"
@@ -1344,7 +1232,7 @@ function MachinesDashboard({
               "data-machines-retry": true,
               onClick: onRefresh,
               disabled: loading,
-              className: "inline-flex items-center gap-1.5 rounded-og-sm border border-og-status-failed/30 px-2 py-1 text-og-xs font-medium transition-colors hover:border-og-status-failed/50 disabled:cursor-not-allowed disabled:opacity-60 pointer-coarse:min-h-10",
+              className: "inline-flex items-center gap-1.5 rounded-og-sm border border-og-status-failed/30 px-2 py-1 text-og-xs font-medium transition-colors hover:border-og-status-failed/50 disabled:cursor-not-allowed disabled:opacity-60 pointer-coarse:min-h-11",
               children: [
                 /* @__PURE__ */ jsx8(RefreshCwIcon, { className: cn("size-3.5", loading && "animate-og-spin"), "aria-hidden": true }),
                 loading ? "Retrying\u2026" : "Retry"
@@ -1751,7 +1639,7 @@ function EnrollmentConsent({
               "data-deny": true,
               disabled: busy,
               onClick: () => onDeny?.(),
-              className: "flex-1 rounded-og-sm border border-og-border px-3 py-2 text-og-sm font-medium text-og-fg-muted transition-colors hover:border-og-border-strong hover:text-og-fg disabled:opacity-50 pointer-coarse:min-h-10",
+              className: "flex-1 rounded-og-sm border border-og-border px-3 py-2 text-og-sm font-medium text-og-fg-muted transition-colors hover:border-og-border-strong hover:text-og-fg disabled:opacity-50 pointer-coarse:min-h-11",
               children: "Cancel"
             }
           ),
@@ -1762,7 +1650,7 @@ function EnrollmentConsent({
               "data-approve": true,
               disabled: busy,
               onClick: () => onApprove?.(allowScreenControl),
-              className: "flex-1 rounded-og-sm bg-og-status-failed px-3 py-2 text-og-sm font-semibold text-og-accent-fg transition-colors hover:opacity-90 disabled:opacity-50 pointer-coarse:min-h-10",
+              className: "flex-1 rounded-og-sm bg-og-status-failed px-3 py-2 text-og-sm font-semibold text-og-accent-fg transition-colors hover:opacity-90 disabled:opacity-50 pointer-coarse:min-h-11",
               children: busy ? "Connecting\u2026" : "Grant full access"
             }
           )
@@ -1807,26 +1695,15 @@ function ConsentResult({
 }
 
 // src/hooks/use-machines.ts
-import { useCallback as useCallback3, useState as useState5 } from "react";
+import { useCallback as useCallback2, useRef as useRef3, useState as useState4 } from "react";
 
 // src/provider.tsx
 import {
   OpenGeniApiContractMismatchError,
   OPENGENI_API_CONTRACT_REVISION
 } from "@opengeni/sdk";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef as useRef2,
-  useState as useState3
-} from "react";
+import { useCallback, useEffect, useMemo, useRef as useRef2, useState as useState3 } from "react";
 import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
-var OpenGeniContext = createContext(null);
-var NOOP_REGISTER_RECONCILER = () => () => void 0;
-var NOOP_RECONCILE_SESSION = async () => void 0;
 var CONTRACT_RELOAD_STORAGE_PREFIX = "opengeni.reloadForApiContract:";
 function OpenGeniProvider({
   client,
@@ -1972,205 +1849,6 @@ function reloadForContractMismatchOnce(mismatch) {
   sessionStorage.setItem(key, OPENGENI_API_CONTRACT_REVISION);
   window.setTimeout(() => window.location.reload(), 150);
 }
-function useOpenGeni(override = {}) {
-  const context = useContext(OpenGeniContext);
-  const client = override.client ?? context?.client;
-  const workspaceId = override.workspaceId ?? context?.workspaceId;
-  if (!client || !workspaceId) {
-    throw new Error(
-      "@opengeni/react: no OpenGeni client/workspace available. Wrap the tree in <OpenGeniProvider> or pass { client, workspaceId } to the hook."
-    );
-  }
-  return {
-    client,
-    workspaceId,
-    workspaceControlEvent: context?.workspaceControlEvent ?? null,
-    workspaceControlConnectionState: context?.workspaceControlConnectionState ?? "idle",
-    registerSessionReconciler: context?.registerSessionReconciler ?? NOOP_REGISTER_RECONCILER,
-    reconcileSession: context?.reconcileSession ?? NOOP_RECONCILE_SESSION
-  };
-}
-function useOpenGeniClient(override = {}) {
-  const context = useContext(OpenGeniContext);
-  const client = override.client ?? context?.client;
-  if (!client) {
-    throw new Error(
-      "@opengeni/react: no OpenGeni client available. Wrap the tree in <OpenGeniProvider> or pass { client } to the hook."
-    );
-  }
-  return client;
-}
-
-// src/hooks/internal.ts
-import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef3, useState as useState4 } from "react";
-function usePolledValue(load, options = {}) {
-  const enabled = options.enabled ?? true;
-  const pollIntervalMs = options.pollIntervalMs;
-  const [data, setData] = useState4(null);
-  const [loading, setLoading] = useState4(enabled);
-  const [error, setError] = useState4(null);
-  const generation = useRef3(0);
-  const loadRef = useRef3(load);
-  useEffect2(() => {
-    if (loadRef.current !== load) {
-      loadRef.current = load;
-      setData(null);
-      setError(null);
-    }
-  }, [load]);
-  const run = useCallback2(async () => {
-    const ticket = ++generation.current;
-    try {
-      const result = await load();
-      if (ticket === generation.current) {
-        setData(result);
-        setError(null);
-        setLoading(false);
-      }
-    } catch (cause) {
-      if (ticket === generation.current) {
-        setError(cause instanceof Error ? cause : new Error(String(cause)));
-        setLoading(false);
-      }
-    }
-  }, [load]);
-  useEffect2(() => {
-    if (!enabled) {
-      setLoading(false);
-      return;
-    }
-    setLoading(true);
-    void run();
-    if (pollIntervalMs === void 0 || pollIntervalMs <= 0) {
-      return () => {
-        generation.current += 1;
-      };
-    }
-    const timer = setInterval(() => void run(), pollIntervalMs);
-    return () => {
-      clearInterval(timer);
-      generation.current += 1;
-    };
-  }, [run, enabled, pollIntervalMs]);
-  return { data, loading, error, refresh: run };
-}
-function useMutationRunner() {
-  const [mutating, setMutating] = useState4(false);
-  const [mutationError, setMutationError] = useState4(null);
-  const inFlight = useRef3(0);
-  const mounted = useRef3(true);
-  useEffect2(() => {
-    mounted.current = true;
-    return () => {
-      mounted.current = false;
-    };
-  }, []);
-  const run = useCallback2(async (operation) => {
-    inFlight.current += 1;
-    if (mounted.current) {
-      setMutating(true);
-      setMutationError(null);
-    }
-    try {
-      return await operation();
-    } catch (cause) {
-      if (mounted.current) {
-        setMutationError(cause instanceof Error ? cause : new Error(String(cause)));
-      }
-      return null;
-    } finally {
-      inFlight.current -= 1;
-      if (mounted.current && inFlight.current === 0) {
-        setMutating(false);
-      }
-    }
-  }, []);
-  return {
-    mutating,
-    mutationError,
-    clearMutationError: useCallback2(() => setMutationError(null), []),
-    run
-  };
-}
-function useSessionEventTrigger(client, workspaceId, sessionId, match, onEvent, options = {}) {
-  const enabled = options.enabled ?? true;
-  const events = options.events;
-  const sharedFeed = events !== void 0;
-  const matchRef = useRef3(match);
-  matchRef.current = match;
-  const onEventRef = useRef3(onEvent);
-  onEventRef.current = onEvent;
-  const consumedRef = useRef3(0);
-  const feedKeyRef = useRef3(null);
-  useEffect2(() => {
-    if (!sharedFeed || !enabled || !sessionId) {
-      return;
-    }
-    const feedKey = `${workspaceId}\0${sessionId}`;
-    const firstSequence = events[0]?.sequence ?? 0;
-    if (feedKeyRef.current !== feedKey || firstSequence > consumedRef.current + 1) {
-      feedKeyRef.current = feedKey;
-      consumedRef.current = 0;
-    }
-    for (const event of events) {
-      if (event.sequence <= consumedRef.current) {
-        continue;
-      }
-      consumedRef.current = event.sequence;
-      if (matchRef.current(event)) {
-        onEventRef.current(event);
-      }
-    }
-  }, [sharedFeed, enabled, events, workspaceId, sessionId]);
-  useEffect2(() => {
-    if (sharedFeed || !enabled || !sessionId) {
-      return;
-    }
-    const controller = new AbortController();
-    void (async () => {
-      try {
-        const session = await client.getSession(workspaceId, sessionId);
-        if (controller.signal.aborted) {
-          return;
-        }
-        const stream = client.streamEvents(workspaceId, sessionId, {
-          after: session.lastSequence,
-          signal: controller.signal
-        });
-        for await (const event of stream) {
-          if (matchRef.current(event)) {
-            onEventRef.current(event);
-          }
-        }
-      } catch {
-      }
-    })();
-    return () => {
-      controller.abort();
-    };
-  }, [sharedFeed, enabled, client, workspaceId, sessionId]);
-}
-function useDebouncedCallback(callback, delayMs = 150) {
-  const callbackRef = useRef3(callback);
-  callbackRef.current = callback;
-  const timerRef = useRef3(null);
-  useEffect2(() => {
-    return () => {
-      if (timerRef.current !== null) {
-        clearTimeout(timerRef.current);
-      }
-    };
-  }, []);
-  return useCallback2(() => {
-    if (timerRef.current !== null) {
-      clearTimeout(timerRef.current);
-    }
-    timerRef.current = setTimeout(() => {
-      timerRef.current = null;
-      callbackRef.current();
-    }, delayMs);
-  }, [delayMs]);
-}
 
 // src/hooks/use-machines.ts
 var EMPTY = { activeSandboxId: null, activeEpoch: 0, machines: [] };
@@ -2178,9 +1856,18 @@ function useMachines(options = {}) {
   const { client, workspaceId } = useOpenGeni(options);
   const machinesClient = options.machinesClient ?? client;
   const sessionId = options.sessionId;
-  const load = useCallback3(async () => {
-    return await machinesClient.listMachines(workspaceId, sessionId ? { sessionId } : void 0);
-  }, [machinesClient, workspaceId, sessionId]);
+  const identityKey = `${workspaceId}\0${sessionId ?? ""}`;
+  const identityRef = useRef3(identityKey);
+  identityRef.current = identityKey;
+  const load = useCallback2(
+    async (signal) => {
+      return await machinesClient.listMachines(workspaceId, {
+        ...sessionId ? { sessionId } : {},
+        ...signal ? { signal } : {}
+      });
+    },
+    [machinesClient, workspaceId, sessionId]
+  );
   const {
     data: loadedData,
     loading,
@@ -2190,27 +1877,31 @@ function useMachines(options = {}) {
     pollIntervalMs: options.pollIntervalMs,
     enabled: options.enabled
   });
-  const { run, mutating, mutationError, clearMutationError } = useMutationRunner();
-  const [attachingSandboxId, setAttachingSandboxId] = useState5(null);
+  const { run, mutating, mutationError, clearMutationError } = useMutationRunner(identityKey);
+  const [attachState, setAttachState] = useState4(() => ({ identity: identityKey, sandboxId: null }));
+  const attachingSandboxId = attachState.identity === identityKey ? attachState.sandboxId : null;
   const data = loadedData ?? EMPTY;
   const canAttach = sessionId !== void 0 && (typeof machinesClient.attachMachine === "function" || typeof machinesClient.swapActiveSandbox === "function");
-  const attach = useCallback3(
+  const attach = useCallback2(
     async (sandboxId) => {
       if (sessionId === void 0) return false;
       const runSwap = machinesClient.attachMachine ? () => machinesClient.attachMachine(workspaceId, sessionId, sandboxId) : machinesClient.swapActiveSandbox ? () => machinesClient.swapActiveSandbox(workspaceId, sessionId, { target: sandboxId }) : null;
       if (!runSwap) return false;
-      setAttachingSandboxId(sandboxId);
+      const ownedIdentity = identityKey;
+      setAttachState({ identity: ownedIdentity, sandboxId });
       const result = await run(async () => {
         await runSwap();
         return true;
       });
-      setAttachingSandboxId(null);
-      if (result) await refresh();
+      if (identityRef.current === ownedIdentity) {
+        setAttachState({ identity: ownedIdentity, sandboxId: null });
+        if (result) await refresh();
+      }
       return result === true;
     },
-    [machinesClient, workspaceId, sessionId, run, refresh]
+    [machinesClient, workspaceId, sessionId, identityKey, run, refresh]
   );
-  const fetchSeries = useCallback3(
+  const fetchSeries = useCallback2(
     async (enrollmentId, window2 = "1h") => {
       if (!machinesClient.machineMetricsSeries) return [];
       return await machinesClient.machineMetricsSeries(workspaceId, enrollmentId, { window: window2 });
@@ -2236,21 +1927,6 @@ function useMachines(options = {}) {
 
 export {
   OpenGeniProvider,
-  useOpenGeni,
-  useOpenGeniClient,
-  usePolledValue,
-  useMutationRunner,
-  useSessionEventTrigger,
-  useDebouncedCallback,
-  formatRelativeTime,
-  formatBytes,
-  truncate,
-  stringifyPayload,
-  tryParseJson,
-  CREDIT_EXHAUSTION_MESSAGE,
-  isCreditExhaustion,
-  humanizeFailureReason,
-  cn,
   useMachines,
   connectionStatusForState,
   CONNECTION_STATUS_META,
@@ -2277,4 +1953,4 @@ export {
   EnrollmentDeviceFlow,
   EnrollmentConsent
 };
-//# sourceMappingURL=chunk-TOJR776I.js.map
+//# sourceMappingURL=chunk-6BXBGJ3B.js.map