@opengeni/react 0.48.0 → 0.57.0

package/src/index.ts

@@ -9,9 +9,12 @@
 // container-responsive composers additionally import responsive.css.
 
 export type {
+  EmbeddedBrowserInteractionClientLike,
+  EmbeddedComputerInteractionClientLike,
   EmbeddedFileAttachmentClientLike,
   EmbeddedGoalClientLike,
   EmbeddedHumanInputSessionClientLike,
+  EmbeddedInteractionClientLike,
   EmbeddedSessionEventClientLike,
   EmbeddedSessionLineageClientLike,
   EmbeddedSessionMcpApprovalPolicyClientLike,
@@ -22,6 +25,7 @@ export type {
 export { OpenGeniProvider } from "./provider";
 export type { OpenGeniProviderProps } from "./provider";
 export { useOpenGeni, useOpenGeniClient } from "./session-context";
+export { useVideoArtifactPlaybackLoader } from "./hooks/use-video-artifact-playback";
 export type { ClientOverride, OpenGeniContextValue } from "./session-context";
 export { usePageLiveActivity } from "./hooks/internal";
 
@@ -171,6 +175,8 @@ export type {
   UseEnvironmentsOptions,
   UseEnvironmentsResult,
 } from "./hooks/use-environments";
+export { useChannels } from "./hooks/use-channels";
+export type { UseChannelsOptions, UseChannelsResult } from "./hooks/use-channels";
 export { useRigs, useRig, useRigVersions, useRigChanges } from "./hooks/use-rigs";
 export type {
   UseRigsOptions,
@@ -332,6 +338,9 @@ export {
 } from "./timeline";
 export type {
   CreateToolRegistryOptions,
+  RetainedArtifactLoader,
+  RetainedScreenshotLoader,
+  VideoArtifactPlaybackLoader,
   ToolRegistry,
   ToolRegistryEntry,
   ToolRenderer,
@@ -464,6 +473,8 @@ export {
 } from "./model-policy";
 export type { LatencyModeId, PickerBillingClass, PickerModelRow } from "./model-policy";
 export { MessageTimeline, TimelineRow } from "./components/message-timeline";
+export { GeneratedVideoPlayer } from "./components/generated-video-player";
+export type { GeneratedVideoPlayerProps } from "./components/generated-video-player";
 export type { MessageTimelineProps } from "./components/message-timeline";
 export { UserMessageBody, userMessageLikelyNeedsDisclosure } from "./components/user-message-body";
 export type { UserMessageBodyProps } from "./components/user-message-body";
@@ -511,6 +522,7 @@ export {
   WORKBENCH_TAB_CHANGES,
   WORKBENCH_TAB_FILES,
   WORKBENCH_TAB_TERMINAL,
+  WORKBENCH_TAB_BROWSER,
   WORKBENCH_TAB_DESKTOP,
   WORKBENCH_SURFACES,
 } from "./components/sandbox-workspace";
@@ -533,6 +545,12 @@ export type {
   UseCodexAccountsOptions,
   UseCodexAccountsResult,
 } from "./hooks/use-codex-accounts";
+export { useSuperGrokAccounts } from "./hooks/use-supergrok-accounts";
+export type {
+  SuperGrokAccountsClientLike,
+  UseSuperGrokAccountsOptions,
+  UseSuperGrokAccountsResult,
+} from "./hooks/use-supergrok-accounts";
 
 // Sandbox helpers
 export { gitFileDiffToPatch } from "./lib/git-patch";

package/src/interaction.ts

@@ -0,0 +1,101 @@
+// @opengeni/react/interaction — standalone Browser/Computer resource UI.
+// Framework hosts may pass a narrow structural client instead of the full provider.
+export type {
+  EmbeddedBrowserInteractionClientLike,
+  EmbeddedComputerInteractionClientLike,
+  EmbeddedInteractionClientLike,
+  EmbeddedInterventionClientLike,
+} from "./client";
+export {
+  useEmbeddedBrowserInteraction,
+  useEmbeddedComputerInteraction,
+  useEmbeddedInteraction,
+  useEmbeddedInterventions,
+} from "./session-context";
+export type {
+  EmbeddedBrowserInteractionClientOverride,
+  EmbeddedComputerInteractionClientOverride,
+  EmbeddedInteractionClientOverride,
+  EmbeddedInterventionClientOverride,
+} from "./session-context";
+export { useNetworkRoutes } from "./hooks/use-network-routes";
+export type {
+  NetworkRoutesClient,
+  UseNetworkRoutesOptions,
+  UseNetworkRoutesResult,
+} from "./hooks/use-network-routes";
+export { useSiteAuthConnections } from "./hooks/use-site-auth-connections";
+export type {
+  SiteAuthConnectionsClient,
+  UseSiteAuthConnectionsOptions,
+  UseSiteAuthConnectionsResult,
+} from "./hooks/use-site-auth-connections";
+export { useAuthRuns } from "./hooks/use-auth-runs";
+export type { AuthRunsClient, UseAuthRunsOptions, UseAuthRunsResult } from "./hooks/use-auth-runs";
+export { useInteractionInterventions } from "./hooks/use-interaction-interventions";
+export type {
+  InteractionInterventionsClient,
+  UseInteractionInterventionsOptions,
+  UseInteractionInterventionsResult,
+} from "./hooks/use-interaction-interventions";
+export { useAttachedBrowsers } from "./hooks/use-attached-browsers";
+export type {
+  AttachedBrowsersClient,
+  UseAttachedBrowsersOptions,
+  UseAttachedBrowsersResult,
+} from "./hooks/use-attached-browsers";
+export { useBrowserSessions } from "./hooks/use-browser-sessions";
+export type {
+  BrowserSessionsClient,
+  UseBrowserSessionsOptions,
+  UseBrowserSessionsResult,
+} from "./hooks/use-browser-sessions";
+export { useBrowserIdentities } from "./hooks/use-browser-identities";
+export type {
+  BrowserIdentitiesClient,
+  UseBrowserIdentitiesOptions,
+  UseBrowserIdentitiesResult,
+} from "./hooks/use-browser-identities";
+export { useBrowserSession } from "./hooks/use-browser-session";
+export type {
+  UseBrowserSessionOptions,
+  UseBrowserSessionResult,
+} from "./hooks/use-browser-session";
+export { useBrowserDownloads } from "./hooks/use-browser-downloads";
+export type {
+  BrowserDownloadsClient,
+  BrowserDownloadSaveOptions,
+  UseBrowserDownloadsOptions,
+  UseBrowserDownloadsResult,
+} from "./hooks/use-browser-downloads";
+export { useBrowserFrameStream } from "./hooks/use-browser-frame-stream";
+export type {
+  BrowserFrameConnectionState,
+  BrowserFrameWebSocket,
+  BrowserFrameWebSocketFactory,
+  UseBrowserFrameStreamOptions,
+  UseBrowserFrameStreamResult,
+} from "./hooks/use-browser-frame-stream";
+export { BrowserViewer } from "./components/browser-viewer";
+export type { BrowserViewerNotification, BrowserViewerProps } from "./components/browser-viewer";
+export { useComputerSessions } from "./hooks/use-computer-sessions";
+export type {
+  ComputerSessionsClient,
+  UseComputerSessionsOptions,
+  UseComputerSessionsResult,
+} from "./hooks/use-computer-sessions";
+export { useComputerSession } from "./hooks/use-computer-session";
+export type {
+  UseComputerSessionOptions,
+  UseComputerSessionResult,
+} from "./hooks/use-computer-session";
+export { useComputerFrameStream } from "./hooks/use-computer-frame-stream";
+export type {
+  ComputerFrameConnectionState,
+  ComputerFrameWebSocket,
+  ComputerFrameWebSocketFactory,
+  UseComputerFrameStreamOptions,
+  UseComputerFrameStreamResult,
+} from "./hooks/use-computer-frame-stream";
+export { ComputerViewer } from "./components/computer-viewer";
+export type { ComputerViewerNotification, ComputerViewerProps } from "./components/computer-viewer";

package/src/lib/host-platform.ts

@@ -0,0 +1,10 @@
+export type InteractionHostPlatform = "mac" | "other";
+
+/** Physical client platform. Remote input adapters use this only to identify
+ * the user's primary shortcut modifier; the target platform is resolved
+ * separately. */
+export function interactionHostPlatform(): InteractionHostPlatform {
+  if (typeof navigator === "undefined") return "other";
+  const platform = navigator.platform || navigator.userAgent;
+  return /Mac|iPhone|iPad|iPod/u.test(platform) ? "mac" : "other";
+}

package/src/lib/relay-wire.ts

@@ -1,5 +1,5 @@
 // Minimal HAND-MIRROR of the relay stream wire messages the desktop frame client
-// needs (`StreamOpen` encode; `StreamOpenAck` + `StreamFrame` decode). It exists
+// needs (`StreamOpen`/`StreamClose` encode; `StreamOpenAck` + `StreamFrame` decode). It exists
 // because the publish-closure guard (scripts/publish-closure-guard.ts) forbids
 // `@opengeni/react` from depending on `@opengeni/agent-proto` — the published SDK
 // closure may only reach `@opengeni/sdk` among `@opengeni/*` packages. So, exactly
@@ -13,12 +13,21 @@
 //   StreamOpenAck: accepted=1(bool), error=2(AgentError msg), resumeFromSeq=3
 //   AgentError:    code=1, message=2, retryable=3, detail=4  (we read only message)
 //   StreamFrame:   channelId=1, seq=2, data=3(bytes), producedAtMs=4  (we read only data)
+//   StreamClose:   channelId=1, reason=2(int32), message=3
 import { BinaryReader, BinaryWriter } from "@bufbuild/protobuf/wire";
 
 /** `StreamKind.STREAM_KIND_DESKTOP` (agent-proto enum value). */
 export const STREAM_KIND_DESKTOP = 2;
+/** `StreamKind.STREAM_KIND_PTY` (agent-proto enum value). */
+export const STREAM_KIND_PTY = 1;
+/** `StreamKind.STREAM_KIND_BROWSER` (agent-proto enum value). */
+export const STREAM_KIND_BROWSER = 3;
+/** `StreamKind.STREAM_KIND_COMPUTER` (agent-proto enum value). */
+export const STREAM_KIND_COMPUTER = 4;
 /** `StreamRole.STREAM_ROLE_CLIENT` (agent-proto enum value). */
 export const STREAM_ROLE_CLIENT = 2;
+/** `StreamCloseReason.STREAM_CLOSE_REASON_NORMAL`. */
+export const STREAM_CLOSE_REASON_NORMAL = 1;
 
 export interface RelayChannel {
   channelId: string;
@@ -54,6 +63,35 @@ export function encodeStreamOpen(message: RelayStreamOpen): Uint8Array {
   return writer.finish();
 }
 
+/** Encode an intentional viewer detach. Transport loss omits this message so
+ * reconnect/resume remains available. */
+export function encodeStreamClose(message: {
+  channelId: string;
+  reason: number;
+  message: string;
+}): Uint8Array {
+  const writer = new BinaryWriter();
+  if (message.channelId !== "") writer.uint32(10).string(message.channelId);
+  if (message.reason !== 0) writer.uint32(16).int32(message.reason);
+  if (message.message !== "") writer.uint32(26).string(message.message);
+  return writer.finish();
+}
+
+/** Encode a viewer→agent PTY input `StreamFrame`. */
+export function encodeStreamFrame(message: {
+  channelId: string;
+  seq: string;
+  data: Uint8Array;
+  producedAtMs: string;
+}): Uint8Array {
+  const writer = new BinaryWriter();
+  if (message.channelId !== "") writer.uint32(10).string(message.channelId);
+  if (message.seq !== "0") writer.uint32(16).uint64(message.seq);
+  if (message.data.length > 0) writer.uint32(26).bytes(message.data);
+  if (message.producedAtMs !== "0") writer.uint32(32).uint64(message.producedAtMs);
+  return writer.finish();
+}
+
 /** The only `AgentError` field we surface from a rejected ack. */
 function decodeAgentErrorMessage(reader: BinaryReader, length: number): { message?: string } {
   const end = reader.pos + length;
@@ -95,13 +133,18 @@ export function decodeStreamOpenAck(bytes: Uint8Array): {
   return error !== undefined ? { accepted, error } : { accepted };
 }
 
-/** Decode a `StreamFrame`, extracting only the `data` (framebuffer PNG) bytes. */
-export function decodeStreamFrame(bytes: Uint8Array): { data: Uint8Array } {
+/** Decode the sequence plus `data` from a `StreamFrame`. */
+export function decodeStreamFrame(bytes: Uint8Array): { seq: string; data: Uint8Array } {
   const reader = new BinaryReader(bytes);
   const end = reader.len;
+  let seq = "0";
   let data = new Uint8Array(0);
   while (reader.pos < end) {
     const tag = reader.uint32();
+    if (tag >>> 3 === 2 && tag === 16) {
+      seq = reader.uint64().toString();
+      continue;
+    }
     if (tag >>> 3 === 3 && tag === 26) {
       // Copy into a fresh ArrayBuffer-backed view: BinaryReader.bytes() returns
       // `Uint8Array<ArrayBufferLike>` (a view into the message buffer), which both
@@ -112,5 +155,5 @@ export function decodeStreamFrame(bytes: Uint8Array): { data: Uint8Array } {
     if ((tag & 7) === 4 || tag === 0) break;
     reader.skip(tag & 7);
   }
-  return { data };
+  return { seq, data };
 }

package/src/lib/sandbox-liveness.ts

@@ -0,0 +1,11 @@
+/**
+ * A sandbox is available for new I/O only after a holder has observed `warm`.
+ *
+ * `draining` means the holder count is zero and teardown owns the provider
+ * instance. The provider may disappear before the durable lease reaches `cold`,
+ * so treating `draining` as live races capture/termination. Explicit user intent
+ * reacquires a holder; only its subsequent `warm` state re-enables live I/O.
+ */
+export function sandboxAcceptsLiveIo(liveness: string | null | undefined): boolean {
+  return liveness === "warm";
+}

package/src/lib/terminal-capability.ts

@@ -0,0 +1,10 @@
+import type { TerminalCapability } from "@opengeni/sdk";
+
+/** Whether an explicit viewer grant can upgrade this cell to a real PTY.
+ * Keep acquisition feasibility separate from the current transport: a cold
+ * real-PTY backend reports sse-events until the just-in-time grant warms it. */
+export function terminalCanAcquirePty(cell: TerminalCapability | null | undefined): boolean {
+  if (!cell?.ptyCapable) return false;
+  if (cell.transport === "pty-ws" || cell.transport === "relay-pty") return true;
+  return cell.reason === "lease_cold" || cell.reason === "not_provisioned";
+}

package/src/model-policy.ts

@@ -1,6 +1,10 @@
 import type { ClientModel, ReasoningEffort, WorkspaceModelCatalogModel } from "@opengeni/sdk";
 
-export type PickerBillingClass = "opengeni_credits" | "codex_subscription" | "byok";
+export type PickerBillingClass =
+  | "opengeni_credits"
+  | "codex_subscription"
+  | "supergrok_subscription"
+  | "byok";
 
 export type PickerModelRow<TCatalog extends ClientModel = WorkspaceModelCatalogModel> = {
   id: string;
@@ -21,12 +25,14 @@ export type LatencyModeId = "standard" | "priority" | "fast";
 const BILLING_CLASS_ORDER: PickerBillingClass[] = [
   "opengeni_credits",
   "codex_subscription",
+  "supergrok_subscription",
   "byok",
 ];
 
 const BILLING_CLASS_LABELS: Record<PickerBillingClass, string> = {
   opengeni_credits: "OpenGeni",
   codex_subscription: "Codex",
+  supergrok_subscription: "SuperGrok",
   byok: "Your Gateway",
 };
 
@@ -41,6 +47,9 @@ const AVAILABILITY_REASON_LABELS: Record<string, string> = {
 };
 
 export function billingClassForModel(model: ClientModel): PickerBillingClass {
+  if (model.source === "supergrok") {
+    return "supergrok_subscription";
+  }
   if (model.source === "codex") {
     return "codex_subscription";
   }
@@ -48,7 +57,9 @@ export function billingClassForModel(model: ClientModel): PickerBillingClass {
     return "byok";
   }
   if (model.credentialSource?.kind === "connected_subscription") {
-    return "codex_subscription";
+    return model.credentialSource.provider === "xai"
+      ? "supergrok_subscription"
+      : "codex_subscription";
   }
   if (model.credentialSource?.kind === "workspace_connection") {
     return "byok";
@@ -135,7 +146,9 @@ export function payerSummaryForModel(model: ClientModel): string {
     return "OpenGeni credits · automatic managed route";
   }
   if (billing.upstreamPayer === "connected_subscription") {
-    return "Codex subscription · external billing";
+    return model.source === "supergrok"
+      ? "SuperGrok subscription · external billing"
+      : "Codex subscription · external billing";
   }
   if (billing.upstreamPayer === "workspace") {
     return "Billed to your AI Gateway";
@@ -149,7 +162,9 @@ export function advancedSourceSummary(model: ClientModel): string | null {
     return null;
   }
   if (source.kind === "connected_subscription") {
-    return "Connected Codex subscription";
+    return source.provider === "xai"
+      ? "Connected SuperGrok subscription"
+      : "Connected Codex subscription";
   }
   if (source.kind === "workspace_connection") {
     return "Workspace AI Gateway";

package/src/provider.tsx

@@ -3,6 +3,7 @@ import {
   OPENGENI_API_CONTRACT_REVISION,
   type StreamConnectionState,
   type WorkspaceControlEvent,
+  type WorkspaceInteractionRevisionEvent,
 } from "@opengeni/sdk";
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import type { SessionClientLike } from "./client";
@@ -17,6 +18,7 @@ export type OpenGeniProviderProps = {
   client: SessionClientLike;
   workspaceId: string;
   onWorkspaceControlEvent?: ((event: WorkspaceControlEvent) => void) | undefined;
+  onWorkspaceInteractionEvent?: ((event: WorkspaceInteractionRevisionEvent) => void) | undefined;
   children?: ReactNode;
 };
 
@@ -28,6 +30,7 @@ export function OpenGeniProvider({
   client,
   workspaceId,
   onWorkspaceControlEvent,
+  onWorkspaceInteractionEvent,
   children,
 }: OpenGeniProviderProps) {
   const [workspaceControlEvent, setWorkspaceControlEvent] = useState<WorkspaceControlEvent | null>(
@@ -36,15 +39,25 @@ export function OpenGeniProvider({
   const [workspaceControlConnectionState, setWorkspaceControlConnectionState] = useState<
     StreamConnectionState | "idle" | "error"
   >("idle");
+  const [workspaceInteractionEvent, setWorkspaceInteractionEvent] =
+    useState<WorkspaceInteractionRevisionEvent | null>(null);
+  const [workspaceInteractionConnectionState, setWorkspaceInteractionConnectionState] = useState<
+    StreamConnectionState | "idle" | "error"
+  >("idle");
   const [contractMismatch, setContractMismatch] = useState<OpenGeniApiContractMismatchError | null>(
     null,
   );
   const callbackRef = useRef(onWorkspaceControlEvent);
+  const interactionCallbackRef = useRef(onWorkspaceInteractionEvent);
   const reconcilersRef = useRef(new Map<string, Map<string, () => Promise<void>>>());
   const reconcileInFlightRef = useRef(new Map<string, Promise<void>>());
   const workspaceControlSequencesRef = useRef(new Map<string, number>());
+  const workspaceInteractionSequencesRef = useRef(new Map<string, number>());
   const pageLive = usePageLiveActivity();
+  const supportsWorkspaceLiveStream =
+    "streamWorkspaceLiveEvents" in client && typeof client.streamWorkspaceLiveEvents === "function";
   callbackRef.current = onWorkspaceControlEvent;
+  interactionCallbackRef.current = onWorkspaceInteractionEvent;
 
   const verifyApiContract = useCallback(async (): Promise<void> => {
     try {
@@ -105,6 +118,78 @@ export function OpenGeniProvider({
   );
 
   useEffect(() => {
+    if (!supportsWorkspaceLiveStream) return;
+    const openLiveStream = client.streamWorkspaceLiveEvents!;
+    setWorkspaceControlEvent(null);
+    setWorkspaceInteractionEvent(null);
+    if (!pageLive) {
+      setWorkspaceControlConnectionState("idle");
+      setWorkspaceInteractionConnectionState("idle");
+      return;
+    }
+    const controller = new AbortController();
+    const setConnectionState = (state: StreamConnectionState) => {
+      setWorkspaceControlConnectionState(state);
+      setWorkspaceInteractionConnectionState(state);
+    };
+    setConnectionState("connecting");
+    void (async () => {
+      try {
+        await verifyApiContract();
+        const workspace = await client.getWorkspace(workspaceId);
+        const controlAfter = Math.max(
+          workspaceControlSequencesRef.current.get(workspaceId) ?? 0,
+          workspace.inferenceControl.revision,
+        );
+        const interactionAfter = workspaceInteractionSequencesRef.current.get(workspaceId) ?? 0;
+        workspaceControlSequencesRef.current.set(workspaceId, controlAfter);
+        const stream = openLiveStream.call(client, workspaceId, {
+          controlAfter,
+          interactionAfter,
+          signal: controller.signal,
+          onStateChange: setConnectionState,
+        });
+        for await (const event of stream) {
+          if (controller.signal.aborted) return;
+          if (event.type === "workspace.control.changed") {
+            workspaceControlSequencesRef.current.set(
+              workspaceId,
+              Math.max(workspaceControlSequencesRef.current.get(workspaceId) ?? 0, event.sequence),
+            );
+            setWorkspaceControlEvent((current) =>
+              !current || event.sequence > current.sequence ? event : current,
+            );
+            callbackRef.current?.(event);
+          } else {
+            workspaceInteractionSequencesRef.current.set(
+              workspaceId,
+              Math.max(
+                workspaceInteractionSequencesRef.current.get(workspaceId) ?? 0,
+                event.sequence,
+              ),
+            );
+            setWorkspaceInteractionEvent((current) =>
+              !current || event.sequence > current.sequence ? event : current,
+            );
+            interactionCallbackRef.current?.(event);
+          }
+        }
+      } catch (error) {
+        if (error instanceof OpenGeniApiContractMismatchError) {
+          setContractMismatch(error);
+          reloadForContractMismatchOnce(error);
+        }
+        if (!controller.signal.aborted) {
+          setWorkspaceControlConnectionState("error");
+          setWorkspaceInteractionConnectionState("error");
+        }
+      }
+    })();
+    return () => controller.abort();
+  }, [client, pageLive, supportsWorkspaceLiveStream, verifyApiContract, workspaceId]);
+
+  useEffect(() => {
+    if (supportsWorkspaceLiveStream) return;
     if (!pageLive) {
       setWorkspaceControlConnectionState("idle");
       return;
@@ -145,7 +230,50 @@ export function OpenGeniProvider({
       }
     })();
     return () => controller.abort();
-  }, [client, pageLive, verifyApiContract, workspaceId]);
+  }, [client, pageLive, supportsWorkspaceLiveStream, verifyApiContract, workspaceId]);
+
+  useEffect(() => {
+    if (supportsWorkspaceLiveStream) return;
+    setWorkspaceInteractionEvent(null);
+    if (!pageLive) {
+      setWorkspaceInteractionConnectionState("idle");
+      return;
+    }
+    const controller = new AbortController();
+    setWorkspaceInteractionConnectionState("connecting");
+    void (async () => {
+      try {
+        await verifyApiContract();
+        const resumeAfter = workspaceInteractionSequencesRef.current.get(workspaceId) ?? 0;
+        const stream = client.streamWorkspaceInteractionRevisions(workspaceId, {
+          after: resumeAfter,
+          signal: controller.signal,
+          onStateChange: setWorkspaceInteractionConnectionState,
+        });
+        for await (const event of stream) {
+          if (controller.signal.aborted) return;
+          workspaceInteractionSequencesRef.current.set(
+            workspaceId,
+            Math.max(
+              workspaceInteractionSequencesRef.current.get(workspaceId) ?? 0,
+              event.sequence,
+            ),
+          );
+          setWorkspaceInteractionEvent((current) =>
+            !current || event.sequence > current.sequence ? event : current,
+          );
+          interactionCallbackRef.current?.(event);
+        }
+      } catch (error) {
+        if (error instanceof OpenGeniApiContractMismatchError) {
+          setContractMismatch(error);
+          reloadForContractMismatchOnce(error);
+        }
+        if (!controller.signal.aborted) setWorkspaceInteractionConnectionState("error");
+      }
+    })();
+    return () => controller.abort();
+  }, [client, pageLive, supportsWorkspaceLiveStream, verifyApiContract, workspaceId]);
 
   const value = useMemo(
     () => ({
@@ -153,6 +281,8 @@ export function OpenGeniProvider({
       workspaceId,
       workspaceControlEvent,
       workspaceControlConnectionState,
+      workspaceInteractionEvent,
+      workspaceInteractionConnectionState,
       registerSessionReconciler,
       reconcileSession,
     }),
@@ -161,6 +291,8 @@ export function OpenGeniProvider({
       workspaceId,
       workspaceControlEvent,
       workspaceControlConnectionState,
+      workspaceInteractionEvent,
+      workspaceInteractionConnectionState,
       registerSessionReconciler,
       reconcileSession,
     ],

package/src/realtime/realtime-control.tsx

@@ -57,7 +57,7 @@ import {
 export type RealtimeModelOption = {
   id: SessionRealtimeModel;
   label: string;
-  provider: "OpenGeni" | "Connected Codex" | "Your Gateway";
+  provider: "OpenGeni" | "Connected Codex" | "Connected SuperGrok" | "Your Gateway";
   description: string;
   available: boolean;
   unavailableReason: string | null;
@@ -74,7 +74,12 @@ const CODEX_LIVE_MODEL: RealtimeModelOption = {
   recommended: false,
 };
 
-const REALTIME_MODEL_PROVIDERS = ["OpenGeni", "Connected Codex", "Your Gateway"] as const;
+const REALTIME_MODEL_PROVIDERS = [
+  "OpenGeni",
+  "Connected Codex",
+  "Connected SuperGrok",
+  "Your Gateway",
+] as const;
 type RealtimeModelProvider = (typeof REALTIME_MODEL_PROVIDERS)[number];
 
 const REALTIME_PROVIDER_META: Record<
@@ -86,6 +91,10 @@ const REALTIME_PROVIDER_META: Record<
     billingClass: "codex_subscription",
     hint: "ChatGPT / Codex plan",
   },
+  "Connected SuperGrok": {
+    billingClass: "supergrok_subscription",
+    hint: "SuperGrok / xAI plan",
+  },
   "Your Gateway": { billingClass: "byok", hint: "Billed to your AI Gateway" },
 };
 const REALTIME_MODEL_STORAGE_PREFIX = "opengeni:realtime-model";
@@ -141,7 +150,11 @@ export function useSessionRealtime(options: {
   const controllerRef = useRef<SessionRealtimeController | null>(null);
   const controllerModelRef = useRef<SessionRealtimeModel | null>(null);
   const [snapshot, setSnapshot] = useState<SessionRealtimeControllerSnapshot>(() => ({
-    status: hasStoredSessionRealtimeOwnerProof({ workspaceId, sessionId: options.sessionId, model })
+    status: hasStoredSessionRealtimeOwnerProof({
+      workspaceId,
+      sessionId: options.sessionId,
+      model,
+    })
       ? "recovering"
       : "idle",
     realtimeId: null,
@@ -684,7 +697,13 @@ export function RealtimeVoiceControl(props: {
                 opacity: 1,
                 transition: reduceMotion
                   ? { duration: 0 }
-                  : { delay: 0.32, type: "spring", stiffness: 320, damping: 30, mass: 0.8 },
+                  : {
+                      delay: 0.32,
+                      type: "spring",
+                      stiffness: 320,
+                      damping: 30,
+                      mass: 0.8,
+                    },
               }}
               {...(reduceMotion
                 ? {}
@@ -1160,7 +1179,11 @@ function statusContent(
         };
       }
       if (!canStart && admissionBlocker) {
-        return { phase: "unavailable", label: "Voice unavailable", detail: admissionBlocker };
+        return {
+          phase: "unavailable",
+          label: "Voice unavailable",
+          detail: admissionBlocker,
+        };
       }
       return {
         phase: "idle",
@@ -1268,7 +1291,11 @@ function RealtimeStatusDot(props: { phase: RealtimeVisualPhase; reduceMotion: bo
         <motion.span
           className="absolute inset-0 rounded-full bg-og-status-running"
           animate={{ opacity: [0.45, 0], scale: [1, 2.2] }}
-          transition={{ duration: 1.4, ease: "easeOut", repeat: Number.POSITIVE_INFINITY }}
+          transition={{
+            duration: 1.4,
+            ease: "easeOut",
+            repeat: Number.POSITIVE_INFINITY,
+          }}
         />
       ) : null}
       <span
@@ -1343,6 +1370,7 @@ function isRealtimeModel(value: string | null): value is SessionRealtimeModel {
     value === "opengeni-gateway/openai/gpt-realtime-2.1" ||
     value === "opengeni-gateway/openai/gpt-realtime-mini" ||
     value === "opengeni-gateway/xai/grok-voice-think-fast-2.0" ||
+    value === "supergrok/grok-voice-think-fast-2.0" ||
     value === "workspace-gateway/openai/gpt-realtime-2.1" ||
     value === "workspace-gateway/openai/gpt-realtime-mini" ||
     value === "workspace-gateway/xai/grok-voice-think-fast-2.0"