@opengeni/react 0.36.1 → 0.40.0

package/dist/realtime.js

@@ -0,0 +1,1023 @@
+import {
+  BillingClassMark,
+  PickerAnimatedPage,
+  PickerBackHeader,
+  PickerNavRow
+} from "./chunk-WZT5G5OR.js";
+import {
+  useEmbeddedRealtimeSession
+} from "./chunk-EKZH6IDG.js";
+import "./chunk-SJKT4TKW.js";
+import {
+  cn
+} from "./chunk-TK7G6XLT.js";
+
+// src/realtime/realtime-control.tsx
+import {
+  hasStoredSessionRealtimeOwnerProof,
+  projectSessionRealtimeLifecycle
+} from "@opengeni/sdk/realtime";
+import {
+  AudioLinesIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  CircleAlertIcon,
+  LoaderCircleIcon,
+  MicIcon,
+  MicOffIcon,
+  RotateCcwIcon,
+  SquareIcon,
+  Volume2Icon,
+  VolumeXIcon
+} from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+// src/realtime/dropdown-menu.tsx
+import { ChevronRightIcon } from "lucide-react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DropdownMenu(props) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger(props) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("-mx-1 my-1 h-px bg-border", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuSub(props) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.SubTrigger,
+    {
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-inset": inset,
+      className: cn(
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })
+      ]
+    }
+  );
+}
+function DropdownMenuSubContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.SubContent,
+    {
+      "data-slot": "dropdown-menu-sub-content",
+      className: cn(
+        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/realtime/realtime-control.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var CODEX_LIVE_MODEL = {
+  id: "gpt-live-1-boulder-alpha",
+  label: "Codex Live",
+  provider: "Connected Codex",
+  description: "Deep session integration",
+  available: false,
+  unavailableReason: "Connect Codex to use this voice model",
+  recommended: false
+};
+var REALTIME_MODEL_PROVIDERS = ["OpenGeni", "Connected Codex", "Your Gateway"];
+var REALTIME_PROVIDER_META = {
+  OpenGeni: { billingClass: "opengeni_credits", hint: "Will use credits" },
+  "Connected Codex": {
+    billingClass: "codex_subscription",
+    hint: "ChatGPT / Codex plan"
+  },
+  "Your Gateway": { billingClass: "byok", hint: "Billed to your AI Gateway" }
+};
+var REALTIME_MODEL_STORAGE_PREFIX = "opengeni:realtime-model";
+function codexRealtimeAdmissionAllowed(input) {
+  return codexRealtimeAdmissionBlocker(input) === null;
+}
+function codexRealtimeAdmissionBlocker(input) {
+  if (input.sessionStatus === "cancelled") return "This session was cancelled.";
+  if (input.controlState !== "active") return "Resume this session before starting voice.";
+  if (input.settlement !== null) return "Wait for the current session transition to finish.";
+  if (!input.codexConnected) return "Connect Codex to use this voice model.";
+  if (input.lifecycleActive) return "Voice is already active for this session.";
+  return null;
+}
+function useSessionRealtime(options) {
+  const { client, workspaceId } = useEmbeddedRealtimeSession({
+    client: options.client,
+    workspaceId: options.workspaceId
+  });
+  const model = options.model ?? CODEX_LIVE_MODEL.id;
+  const audioRef = useRef(null);
+  const controllerRef = useRef(null);
+  const controllerModelRef = useRef(null);
+  const [snapshot, setSnapshot] = useState(() => ({
+    status: hasStoredSessionRealtimeOwnerProof({ workspaceId, sessionId: options.sessionId, model }) ? "recovering" : "idle",
+    realtimeId: null,
+    mode: null,
+    bridge: null,
+    microphone: "inactive",
+    inputMuted: false,
+    audibleOutput: "inactive",
+    outputMuted: false,
+    connectionGeneration: 0,
+    reconnectAttempt: 0,
+    diagnostic: null,
+    error: null
+  }));
+  const lifecycle = useMemo(
+    () => projectSessionRealtimeLifecycle(options.events),
+    [options.events]
+  );
+  const lifecycleRef = useRef(lifecycle);
+  const eventsReadyRef = useRef(options.eventsReady);
+  lifecycleRef.current = lifecycle;
+  eventsReadyRef.current = options.eventsReady;
+  const lifecycleActive = lifecycle?.state === "active";
+  useEffect(() => {
+    let disposed = false;
+    let controller = null;
+    let unsubscribe = null;
+    void import("@opengeni/sdk/realtime").then(({ createSessionRealtimeController }) => {
+      if (disposed) return;
+      const controllerFactory = options.controllerFactory ?? createSessionRealtimeController;
+      controller = controllerFactory({
+        client,
+        workspaceId,
+        sessionId: options.sessionId,
+        ...audioRef.current ? { remoteAudio: audioRef.current } : {},
+        model
+      });
+      controllerRef.current = controller;
+      controllerModelRef.current = model;
+      unsubscribe = controller.subscribe(setSnapshot);
+      if (eventsReadyRef.current) {
+        void controller.observeLifecycle(lifecycleRef.current).catch(() => void 0);
+      }
+    }).catch((error) => {
+      if (disposed) return;
+      setSnapshot({
+        status: "error",
+        realtimeId: null,
+        mode: null,
+        bridge: null,
+        microphone: "inactive",
+        inputMuted: false,
+        audibleOutput: "inactive",
+        outputMuted: false,
+        connectionGeneration: 0,
+        reconnectAttempt: 0,
+        diagnostic: {
+          kind: "negotiation_failure",
+          message: error instanceof Error ? error.message : "Codex realtime controller failed to load",
+          recoverable: false,
+          connectionGeneration: 0,
+          attempt: 0
+        },
+        error: error instanceof Error ? error.message : "Codex realtime controller failed to load"
+      });
+    });
+    return () => {
+      disposed = true;
+      unsubscribe?.();
+      controller?.close();
+      if (controllerRef.current === controller) {
+        controllerRef.current = null;
+        controllerModelRef.current = null;
+      }
+    };
+  }, [client, model, options.controllerFactory, options.sessionId, workspaceId]);
+  useEffect(() => {
+    if (!options.eventsReady) return;
+    void controllerRef.current?.observeLifecycle(lifecycle).catch(() => void 0);
+  }, [lifecycle, options.eventsReady]);
+  const start = useCallback(async () => {
+    const controller = controllerRef.current;
+    if (!controller || controllerModelRef.current !== model) {
+      throw new Error("The selected voice model is still preparing");
+    }
+    await controller.start();
+  }, [model]);
+  const stop = useCallback(async () => {
+    await controllerRef.current?.stop();
+  }, []);
+  const retry = useCallback(async () => {
+    await controllerRef.current?.retry();
+  }, []);
+  const retryAudibleOutput = useCallback(async () => {
+    await controllerRef.current?.retryAudibleOutput();
+  }, []);
+  const setInputMuted = useCallback((muted) => {
+    controllerRef.current?.setInputMuted(muted);
+  }, []);
+  const setOutputMuted = useCallback((muted) => {
+    controllerRef.current?.setOutputMuted(muted);
+  }, []);
+  const admissionInput = {
+    sessionStatus: options.sessionStatus,
+    controlState: options.effectiveControl.state,
+    settlement: options.effectiveControl.settlement,
+    codexConnected: options.modelAvailable ?? options.codexConnected,
+    lifecycleActive
+  };
+  const admissionBlocker = options.modelAvailable === false ? options.modelUnavailableReason ?? "This voice model is unavailable." : codexRealtimeAdmissionBlocker(admissionInput);
+  const canStart = controllerRef.current !== null && controllerModelRef.current === model && ["idle", "error"].includes(snapshot.status) && admissionBlocker === null;
+  return {
+    snapshot,
+    lifecycleActive,
+    canStart,
+    admissionBlocker,
+    codexConnected: options.codexConnected,
+    audioRef,
+    start,
+    stop,
+    retry,
+    retryAudibleOutput,
+    setInputMuted,
+    setOutputMuted
+  };
+}
+function SessionRealtimeControl(props) {
+  const lifecycle = useMemo(() => projectSessionRealtimeLifecycle(props.events), [props.events]);
+  const selection = useRealtimeModelSelection({
+    client: props.client,
+    workspaceId: props.workspaceId,
+    codexConnected: props.codexConnected,
+    activeModel: lifecycle?.state === "active" ? lifecycle.model : null
+  });
+  const selectedModel = selection.selectedModel;
+  const realtime = useSessionRealtime({
+    ...props,
+    model: selectedModel.id,
+    modelAvailable: selectedModel.available,
+    modelUnavailableReason: selectedModel.unavailableReason
+  });
+  const autostartModelRef = useRef(props.realtimeAutostartModel ?? null);
+  const autostartStartedRef = useRef(false);
+  const { models, selectedModel: selectedRealtimeModel, selectModel } = selection;
+  const { canStart, start } = realtime;
+  const onRealtimeAutostartConsumed = props.onRealtimeAutostartConsumed;
+  useEffect(() => {
+    const pending = autostartModelRef.current;
+    if (!pending || autostartStartedRef.current || lifecycle?.state === "active") return;
+    const available = models.some((model) => model.id === pending && model.available);
+    if (!available) return;
+    if (selectedRealtimeModel.id !== pending) {
+      selectModel(pending);
+      return;
+    }
+    if (!canStart) return;
+    autostartStartedRef.current = true;
+    void start().then(() => {
+      autostartModelRef.current = null;
+      onRealtimeAutostartConsumed?.();
+    }).catch(() => {
+      autostartStartedRef.current = false;
+    });
+  }, [
+    canStart,
+    lifecycle?.state,
+    models,
+    props.sessionId,
+    props.workspaceId,
+    onRealtimeAutostartConsumed,
+    selectModel,
+    selectedRealtimeModel.id,
+    start
+  ]);
+  return /* @__PURE__ */ jsx2(
+    RealtimeVoiceControl,
+    {
+      snapshot: realtime.snapshot,
+      canStart: realtime.canStart,
+      admissionBlocker: realtime.admissionBlocker,
+      modelAvailable: selectedModel.available,
+      menuSide: "top",
+      audioRef: realtime.audioRef,
+      selectedModel,
+      models: selection.models,
+      onSelectModel: realtime.lifecycleActive ? void 0 : selection.selectModel,
+      onStart: realtime.start,
+      onStop: realtime.stop,
+      onRetry: realtime.retry,
+      onRetryAudibleOutput: realtime.retryAudibleOutput,
+      onSetInputMuted: realtime.setInputMuted,
+      onSetOutputMuted: realtime.setOutputMuted
+    }
+  );
+}
+function useRealtimeModelSelection(options) {
+  const { client, workspaceId } = useEmbeddedRealtimeSession({
+    client: options.client,
+    workspaceId: options.workspaceId
+  });
+  const activeModel = options.activeModel;
+  const [catalog, setCatalog] = useState(() => [
+    {
+      ...CODEX_LIVE_MODEL,
+      available: options.codexConnected,
+      unavailableReason: options.codexConnected ? null : CODEX_LIVE_MODEL.unavailableReason
+    }
+  ]);
+  const [selectedModelId, setSelectedModelId] = useState(
+    () => readRealtimeModelPreference(workspaceId) ?? CODEX_LIVE_MODEL.id
+  );
+  useEffect(() => {
+    let disposed = false;
+    const load = client.getWorkspaceRealtimeModelCatalog;
+    if (!load) return;
+    void load.call(client, workspaceId).then((response) => {
+      if (disposed) return;
+      const models = response.models.map(toRealtimeModelOption);
+      setCatalog(models);
+      setSelectedModelId((current) => {
+        if (models.some((model) => model.id === current && model.available)) return current;
+        return models.find((model) => model.available)?.id ?? CODEX_LIVE_MODEL.id;
+      });
+    }).catch(() => void 0);
+    return () => {
+      disposed = true;
+    };
+  }, [client, workspaceId]);
+  useEffect(() => {
+    if (activeModel) setSelectedModelId(activeModel);
+  }, [activeModel]);
+  const selectedModel = catalog.find((model) => model.id === selectedModelId) ?? {
+    ...CODEX_LIVE_MODEL,
+    available: options.codexConnected,
+    unavailableReason: options.codexConnected ? null : CODEX_LIVE_MODEL.unavailableReason
+  };
+  const selectModel = useCallback(
+    (value) => {
+      const model = catalog.find((candidate) => candidate.id === value);
+      if (!model || !model.available || activeModel) return;
+      setSelectedModelId(model.id);
+      writeRealtimeModelPreference(workspaceId, model.id);
+    },
+    [activeModel, catalog, workspaceId]
+  );
+  return { models: catalog, selectedModel, selectModel };
+}
+var IDLE_REALTIME_SNAPSHOT = {
+  status: "idle",
+  realtimeId: null,
+  mode: null,
+  bridge: null,
+  microphone: "inactive",
+  inputMuted: false,
+  audibleOutput: "inactive",
+  outputMuted: false,
+  connectionGeneration: 0,
+  reconnectAttempt: 0,
+  diagnostic: null,
+  error: null
+};
+function NewSessionRealtimeControl(props) {
+  const selection = useRealtimeModelSelection({
+    client: props.client,
+    workspaceId: props.workspaceId,
+    codexConnected: props.codexConnected
+  });
+  const audioRef = useRef(null);
+  const [starting, setStarting] = useState(false);
+  const [error, setError] = useState(null);
+  const snapshot = useMemo(
+    () => starting ? { ...IDLE_REALTIME_SNAPSHOT, status: "starting" } : error ? { ...IDLE_REALTIME_SNAPSHOT, status: "error", error } : IDLE_REALTIME_SNAPSHOT,
+    [error, starting]
+  );
+  const canStart = selection.selectedModel.available && props.disabled !== true && !starting;
+  const onStart = props.onStart;
+  const selectedModelId = selection.selectedModel.id;
+  const start = useCallback(async () => {
+    if (!canStart) return;
+    setStarting(true);
+    setError(null);
+    try {
+      const started = await onStart(selectedModelId);
+      if (!started) setError("The voice session could not be created.");
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+    } finally {
+      setStarting(false);
+    }
+  }, [canStart, onStart, selectedModelId]);
+  return /* @__PURE__ */ jsx2(
+    RealtimeVoiceControl,
+    {
+      snapshot,
+      canStart,
+      admissionBlocker: selection.selectedModel.unavailableReason ?? props.disabledReason ?? null,
+      modelAvailable: selection.selectedModel.available,
+      selectionDisabled: starting,
+      menuSide: "bottom",
+      showDiagnostics: false,
+      audioRef,
+      selectedModel: selection.selectedModel,
+      models: selection.models,
+      onSelectModel: selection.selectModel,
+      onStart: start,
+      onStop: async () => void 0,
+      onRetry: start,
+      onRetryAudibleOutput: async () => void 0,
+      onSetInputMuted: () => void 0,
+      onSetOutputMuted: () => void 0
+    }
+  );
+}
+function RealtimeVoiceControl(props) {
+  const reduceMotion = useReducedMotion();
+  const selectedModel = props.selectedModel ?? {
+    ...CODEX_LIVE_MODEL,
+    available: props.modelAvailable,
+    unavailableReason: props.modelAvailable ? null : CODEX_LIVE_MODEL.unavailableReason
+  };
+  const models = props.models ?? [selectedModel];
+  const status = statusContent(
+    props.snapshot,
+    props.modelAvailable,
+    props.canStart,
+    props.admissionBlocker ?? null,
+    selectedModel.label
+  );
+  const modeOwned = props.snapshot.mode?.state === "active";
+  const retryConnection = modeOwned && props.snapshot.status !== "stopping" && props.snapshot.status !== "active" && props.snapshot.diagnostic?.recoverable === true;
+  const audioBlocked = props.snapshot.audibleOutput === "blocked" && !props.snapshot.outputMuted;
+  const mainDisabled = props.snapshot.status === "stopping" || props.snapshot.status === "lost_owner" || !modeOwned && !props.canStart || props.snapshot.status === "starting" && !modeOwned;
+  const mainLabel = audioBlocked ? "Resume voice audio" : retryConnection ? "Retry voice connection" : modeOwned ? "End voice conversation" : `Start voice with ${selectedModel.label}`;
+  const runMainAction = audioBlocked ? props.onRetryAudibleOutput : retryConnection ? props.onRetry : modeOwned ? props.onStop : props.onStart;
+  const diagnosticsVisible = props.showDiagnostics ?? import.meta.env.DEV;
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [pickerProvider, setPickerProvider] = useState(
+    selectedModel.provider
+  );
+  const [pickerDirection, setPickerDirection] = useState(1);
+  useEffect(() => {
+    if (!pickerOpen) setPickerProvider(selectedModel.provider);
+  }, [pickerOpen, selectedModel.provider]);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "aria-label": "Realtime voice",
+      "data-picker-side": props.menuSide ?? "top",
+      className: "inline-flex shrink-0 items-center",
+      children: [
+        /* @__PURE__ */ jsx2("audio", { ref: props.audioRef, autoPlay: true, className: "hidden", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx2(RealtimeComposerGlow, { phase: status.phase, reduceMotion: reduceMotion === true }),
+        /* @__PURE__ */ jsx2(AnimatePresence, { initial: false, children: modeOwned ? /* @__PURE__ */ jsxs2(
+          motion.div,
+          {
+            "data-testid": "realtime-mute-controls",
+            initial: reduceMotion ? false : { opacity: 0, width: 0, marginRight: 0 },
+            animate: { opacity: 1, width: "auto", marginRight: 4 },
+            ...reduceMotion ? {} : { exit: { opacity: 0, width: 0, marginRight: 0 } },
+            transition: { duration: reduceMotion ? 0 : 0.18, ease: [0.2, 0.8, 0.2, 1] },
+            className: "inline-flex shrink-0 items-center gap-0.5 overflow-hidden",
+            children: [
+              /* @__PURE__ */ jsx2(
+                RealtimeMuteButton,
+                {
+                  muted: props.snapshot.inputMuted,
+                  kind: "microphone",
+                  reduceMotion: reduceMotion === true,
+                  onToggle: () => props.onSetInputMuted(!props.snapshot.inputMuted)
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                RealtimeMuteButton,
+                {
+                  muted: props.snapshot.outputMuted,
+                  kind: "output",
+                  reduceMotion: reduceMotion === true,
+                  onToggle: () => props.onSetOutputMuted(!props.snapshot.outputMuted)
+                }
+              )
+            ]
+          },
+          "realtime-mute-controls"
+        ) : null }),
+        /* @__PURE__ */ jsx2(
+          motion.button,
+          {
+            type: "button",
+            "data-testid": "realtime-primary-action",
+            "data-phase": status.phase,
+            "aria-label": mainLabel,
+            "aria-pressed": modeOwned,
+            title: mainLabel,
+            disabled: mainDisabled,
+            ...reduceMotion ? {} : { whileTap: { scale: 0.92 } },
+            transition: { type: "spring", stiffness: 520, damping: 30 },
+            onClick: () => void runMainAction().catch(() => void 0),
+            className: cn(
+              "relative inline-flex size-8 items-center justify-center rounded-l-og-md border outline-none",
+              "transition-[background-color,border-color,color,box-shadow] duration-200 ease-og-out",
+              "focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-og-accent/45",
+              "disabled:cursor-not-allowed disabled:opacity-45 pointer-coarse:size-11",
+              voiceButtonTone(status.phase)
+            ),
+            children: /* @__PURE__ */ jsx2(
+              RealtimeActionGlyph,
+              {
+                phase: status.phase,
+                audioBlocked,
+                reduceMotion: reduceMotion === true
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs2(DropdownMenu, { open: pickerOpen, onOpenChange: setPickerOpen, children: [
+          /* @__PURE__ */ jsx2(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Choose voice model and options",
+              title: `Voice model: ${selectedModel.label}`,
+              disabled: props.selectionDisabled,
+              className: cn(
+                "inline-flex h-8 w-6 items-center justify-center rounded-r-og-md border border-l-0 outline-none",
+                "transition-[background-color,border-color,color] duration-200 ease-og-out",
+                "focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-og-accent/45",
+                "pointer-coarse:h-11 pointer-coarse:w-7",
+                voiceButtonTone(status.phase)
+              ),
+              children: /* @__PURE__ */ jsx2(ChevronDownIcon, { className: "size-3", "aria-hidden": true })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs2(
+            DropdownMenuContent,
+            {
+              side: props.menuSide ?? "top",
+              align: "end",
+              sideOffset: 8,
+              collisionPadding: 12,
+              className: "flex w-72 max-h-[min(20rem,var(--radix-dropdown-menu-content-available-height))] flex-col overflow-hidden rounded-xl border-border bg-surface p-1.5 shadow-xl",
+              onCloseAutoFocus: (event) => event.preventDefault(),
+              children: [
+                /* @__PURE__ */ jsx2("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain", children: /* @__PURE__ */ jsx2(
+                  RealtimeModelPickerMenu,
+                  {
+                    models,
+                    selectedModel,
+                    provider: pickerProvider,
+                    direction: pickerDirection,
+                    disabled: props.selectionDisabled === true || props.snapshot.mode?.state === "active",
+                    onProviderChange: (provider, direction) => {
+                      setPickerDirection(direction);
+                      setPickerProvider(provider);
+                    },
+                    onSelect: (modelId) => {
+                      props.onSelectModel?.(modelId);
+                      setPickerOpen(false);
+                    }
+                  }
+                ) }),
+                status.phase !== "idle" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+                  /* @__PURE__ */ jsx2(DropdownMenuSeparator, { className: "mx-1 bg-og-border" }),
+                  /* @__PURE__ */ jsxs2("div", { className: "px-2.5 py-2", role: "status", "aria-live": "polite", children: [
+                    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-og-sm font-medium text-og-fg", children: [
+                      /* @__PURE__ */ jsx2(RealtimeStatusDot, { phase: status.phase, reduceMotion: reduceMotion === true }),
+                      status.label
+                    ] }),
+                    /* @__PURE__ */ jsx2("p", { className: "mt-1 text-og-xs leading-5 text-og-fg-subtle", children: status.detail })
+                  ] })
+                ] }) : null,
+                audioBlocked ? /* @__PURE__ */ jsxs2(
+                  DropdownMenuItem,
+                  {
+                    className: "rounded-og-md",
+                    onSelect: () => void props.onRetryAudibleOutput().catch(() => void 0),
+                    children: [
+                      /* @__PURE__ */ jsx2(Volume2Icon, {}),
+                      "Resume audio"
+                    ]
+                  }
+                ) : null,
+                retryConnection ? /* @__PURE__ */ jsxs2(
+                  DropdownMenuItem,
+                  {
+                    className: "rounded-og-md",
+                    onSelect: () => void props.onRetry().catch(() => void 0),
+                    children: [
+                      /* @__PURE__ */ jsx2(RotateCcwIcon, {}),
+                      "Retry connection"
+                    ]
+                  }
+                ) : null,
+                modeOwned && props.snapshot.status !== "lost_owner" ? /* @__PURE__ */ jsxs2(
+                  DropdownMenuItem,
+                  {
+                    variant: "destructive",
+                    className: "rounded-og-md",
+                    disabled: props.snapshot.status === "stopping",
+                    onSelect: () => void props.onStop().catch(() => void 0),
+                    children: [
+                      /* @__PURE__ */ jsx2(SquareIcon, {}),
+                      "End voice conversation"
+                    ]
+                  }
+                ) : null,
+                diagnosticsVisible ? /* @__PURE__ */ jsx2(RealtimeDiagnosticsMenu, { snapshot: props.snapshot }) : null
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("span", { className: "sr-only", role: "status", "aria-live": "polite", children: [
+          status.label,
+          ". ",
+          status.detail
+        ] }),
+        props.snapshot.error ? /* @__PURE__ */ jsx2("span", { className: "sr-only", role: "alert", children: props.snapshot.error }) : null
+      ]
+    }
+  );
+}
+function RealtimeMuteButton(props) {
+  const microphone = props.kind === "microphone";
+  const label = microphone ? props.muted ? "Unmute microphone" : "Mute microphone" : props.muted ? "Unmute voice audio" : "Mute voice audio";
+  const Icon = microphone ? props.muted ? MicOffIcon : MicIcon : props.muted ? VolumeXIcon : Volume2Icon;
+  return /* @__PURE__ */ jsx2(
+    motion.button,
+    {
+      type: "button",
+      "aria-label": label,
+      "aria-pressed": props.muted,
+      title: label,
+      ...props.reduceMotion ? {} : { whileTap: { scale: 0.92 } },
+      onClick: props.onToggle,
+      className: cn(
+        "inline-flex size-8 shrink-0 items-center justify-center rounded-og-md border outline-none",
+        "transition-[background-color,border-color,color] duration-150 ease-og-out",
+        "focus-visible:ring-2 focus-visible:ring-og-accent/45 pointer-coarse:size-11",
+        props.muted ? "border-og-accent/35 bg-og-accent-soft text-og-accent" : "border-og-border bg-og-surface-2 text-og-fg-muted hover:border-og-accent/35 hover:text-og-fg"
+      ),
+      children: /* @__PURE__ */ jsx2(Icon, { className: "size-3.5", "aria-hidden": true })
+    }
+  );
+}
+function RealtimeModelPickerMenu(props) {
+  const providers = REALTIME_MODEL_PROVIDERS.filter(
+    (provider) => props.models.some((model) => model.provider === provider)
+  );
+  const pageKey = props.provider ? `voice-models:${props.provider}` : "voice-providers";
+  const body = props.provider ? /* @__PURE__ */ jsxs2("div", { "data-testid": "realtime-model-picker-models", children: [
+    /* @__PURE__ */ jsx2(
+      PickerBackHeader,
+      {
+        label: props.provider,
+        icon: /* @__PURE__ */ jsx2(
+          BillingClassMark,
+          {
+            billingClass: REALTIME_PROVIDER_META[props.provider].billingClass,
+            "aria-label": ""
+          }
+        ),
+        onBack: () => props.onProviderChange(null, -1)
+      }
+    ),
+    /* @__PURE__ */ jsx2("div", { className: "flex flex-col gap-0.5", children: props.models.filter((model) => model.provider === props.provider).map((model) => {
+      const selected = model.id === props.selectedModel.id;
+      return /* @__PURE__ */ jsx2(
+        PickerNavRow,
+        {
+          label: model.label,
+          hint: model.unavailableReason ?? (model.recommended ? `Recommended \xB7 ${model.description}` : model.description),
+          disabled: props.disabled || !model.available,
+          title: model.unavailableReason ?? model.description,
+          active: selected,
+          showChevron: false,
+          trailing: selected ? /* @__PURE__ */ jsx2(CheckIcon, { className: "size-3.5", "aria-hidden": true }) : void 0,
+          testId: `realtime-model-choice-${model.id}`,
+          onClick: () => props.onSelect(model.id)
+        },
+        model.id
+      );
+    }) })
+  ] }) : /* @__PURE__ */ jsx2("div", { className: "flex flex-col gap-0.5", "data-testid": "realtime-model-picker-providers", children: providers.map((provider) => {
+    const meta = REALTIME_PROVIDER_META[provider];
+    return /* @__PURE__ */ jsx2(
+      PickerNavRow,
+      {
+        label: provider,
+        hint: meta.hint,
+        icon: /* @__PURE__ */ jsx2(BillingClassMark, { billingClass: meta.billingClass, "aria-label": "" }),
+        active: props.selectedModel.provider === provider,
+        testId: `realtime-model-provider-${meta.billingClass}`,
+        onClick: () => props.onProviderChange(provider, 1)
+      },
+      provider
+    );
+  }) });
+  return /* @__PURE__ */ jsx2("div", { className: "relative overflow-hidden", "data-testid": "realtime-model-picker-menu", children: /* @__PURE__ */ jsx2(PickerAnimatedPage, { pageKey, direction: props.direction, children: body }) });
+}
+function RealtimeDiagnosticsMenu({ snapshot }) {
+  const bridge = snapshot.bridge;
+  const rows = [
+    ["controller", snapshot.status],
+    ["microphone", snapshot.microphone],
+    ["microphone muted", String(snapshot.inputMuted)],
+    ["audio", snapshot.audibleOutput],
+    ["audio muted", String(snapshot.outputMuted)],
+    ["generation", String(snapshot.connectionGeneration)],
+    ["reconnect attempt", String(snapshot.reconnectAttempt)],
+    ["mode", snapshot.mode?.state ?? "none"],
+    ["mode version", snapshot.mode ? String(snapshot.mode.version) : "\u2014"],
+    ["connection epoch", snapshot.mode ? String(snapshot.mode.connectionEpoch) : "\u2014"],
+    ["provider started", bridge ? String(bridge.providerStarted) : "false"],
+    ["provider speaking", bridge ? String(bridge.speaking) : "false"],
+    ["delegation", bridge?.activeDelegationId ? "active" : "none"],
+    ["pending durable events", bridge ? String(bridge.pendingInbound) : "0"],
+    ["pending bytes", bridge ? String(bridge.pendingInboundBytes) : "0"],
+    ["client ack", bridge?.clientAckThroughSequence?.toString() ?? "\u2014"],
+    ["ignored provider events", bridge ? String(bridge.ignoredEventCount) : "0"],
+    ["last ignored event", bridge?.lastIgnoredEventType ?? "none"],
+    ["bridge error", bridge?.lastError ?? "none"],
+    ["diagnostic", snapshot.diagnostic?.kind ?? "none"]
+  ];
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(DropdownMenuSeparator, { className: "mx-1 bg-og-border" }),
+    /* @__PURE__ */ jsxs2(DropdownMenuSub, { children: [
+      /* @__PURE__ */ jsx2(DropdownMenuSubTrigger, { className: "rounded-og-md text-og-fg-muted", children: "Realtime diagnostics" }),
+      /* @__PURE__ */ jsx2(DropdownMenuSubContent, { className: "max-h-80 w-72 overflow-y-auto rounded-og-lg border-og-border bg-og-surface-1 p-1.5 text-og-fg shadow-og-lg", children: rows.map(([label, value]) => /* @__PURE__ */ jsxs2(
+        DropdownMenuItem,
+        {
+          disabled: true,
+          className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-3 rounded-og-md font-mono text-[11px] opacity-100",
+          children: [
+            /* @__PURE__ */ jsx2("span", { className: "truncate text-og-fg-subtle", children: label }),
+            /* @__PURE__ */ jsx2("span", { className: "truncate text-right text-og-fg", children: value })
+          ]
+        },
+        label
+      )) })
+    ] })
+  ] });
+}
+function statusContent(snapshot, modelAvailable, canStart, admissionBlocker, modelLabel) {
+  if (snapshot.audibleOutput === "blocked" && !snapshot.outputMuted) {
+    return {
+      phase: "blocked",
+      label: "Audio output blocked",
+      detail: "Resume audio to hear the existing voice connection."
+    };
+  }
+  switch (snapshot.status) {
+    case "starting":
+      return {
+        phase: "connecting",
+        label: "Connecting\u2026",
+        detail: "Preparing your microphone and live voice."
+      };
+    case "active":
+      return snapshot.bridge?.speaking ? {
+        phase: "speaking",
+        label: "Speaking",
+        detail: "Interrupt naturally whenever you want."
+      } : {
+        phase: "listening",
+        label: "Listening",
+        detail: "Voice and typed messages share this session."
+      };
+    case "stopping":
+      return {
+        phase: "stopping",
+        label: "Ending voice\u2026",
+        detail: "Saving the remaining conversation context."
+      };
+    case "recovering":
+      return {
+        phase: "reconnecting",
+        label: "Reconnecting\u2026",
+        detail: snapshot.error ?? "Keeping this voice conversation connected."
+      };
+    case "lost_owner":
+      return {
+        phase: "elsewhere",
+        label: "Voice active elsewhere",
+        detail: "Return to the browser that started it, or wait for that connection to expire."
+      };
+    case "error":
+      return {
+        phase: "error",
+        label: "Voice unavailable",
+        detail: snapshot.error ?? "The connection could not be started."
+      };
+    case "idle":
+      if (!modelAvailable) {
+        return {
+          phase: "unavailable",
+          label: "Voice model unavailable",
+          detail: admissionBlocker ?? "Choose another voice model."
+        };
+      }
+      if (!canStart && admissionBlocker) {
+        return { phase: "unavailable", label: "Voice unavailable", detail: admissionBlocker };
+      }
+      return {
+        phase: "idle",
+        label: "Start voice",
+        detail: `Talk live with ${modelLabel}.`
+      };
+  }
+}
+function RealtimeComposerGlow(props) {
+  const visible = [
+    "connecting",
+    "listening",
+    "speaking",
+    "reconnecting",
+    "blocked",
+    "error",
+    "stopping"
+  ].includes(props.phase);
+  return /* @__PURE__ */ jsx2(AnimatePresence, { initial: false, children: visible ? /* @__PURE__ */ jsx2(
+    motion.span,
+    {
+      "aria-hidden": true,
+      initial: { opacity: 0 },
+      animate: props.reduceMotion ? { opacity: 0.48 } : props.phase === "speaking" ? { opacity: [0.42, 0.82, 0.52] } : props.phase === "listening" ? { opacity: [0.34, 0.62, 0.42] } : { opacity: [0.28, 0.58, 0.28] },
+      exit: { opacity: 0 },
+      transition: props.reduceMotion ? { duration: 0.12 } : {
+        duration: props.phase === "speaking" ? 1.15 : 2.1,
+        ease: "easeInOut",
+        repeat: Number.POSITIVE_INFINITY
+      },
+      className: cn(
+        "pointer-events-none absolute -inset-px z-[1] rounded-og-lg ring-1 ring-inset shadow-og-glow",
+        props.phase === "speaking" ? "ring-og-status-running/50" : props.phase === "blocked" || props.phase === "error" ? "ring-og-status-waiting/45" : "ring-og-accent/45"
+      )
+    },
+    props.phase
+  ) : null });
+}
+function RealtimeActionGlyph(props) {
+  if (["connecting", "reconnecting", "stopping"].includes(props.phase)) {
+    return /* @__PURE__ */ jsx2(LoaderCircleIcon, { className: "size-3.5 animate-og-spin", "aria-hidden": true });
+  }
+  if (props.phase === "blocked") {
+    return props.audioBlocked ? /* @__PURE__ */ jsx2(Volume2Icon, { className: "size-3.5", "aria-hidden": true }) : /* @__PURE__ */ jsx2(CircleAlertIcon, { className: "size-3.5", "aria-hidden": true });
+  }
+  if (props.phase === "error" || props.phase === "elsewhere" || props.phase === "unavailable") {
+    return /* @__PURE__ */ jsx2(CircleAlertIcon, { className: "size-3.5", "aria-hidden": true });
+  }
+  if (props.phase === "listening" || props.phase === "speaking") {
+    return /* @__PURE__ */ jsxs2("span", { className: "relative inline-flex size-4 items-center justify-center", children: [
+      !props.reduceMotion ? /* @__PURE__ */ jsx2(
+        motion.span,
+        {
+          "aria-hidden": true,
+          className: "absolute inset-0 rounded-full border border-current",
+          animate: { opacity: [0.65, 0], scale: [0.65, 1.45] },
+          transition: {
+            duration: props.phase === "speaking" ? 0.9 : 1.5,
+            ease: "easeOut",
+            repeat: Number.POSITIVE_INFINITY
+          }
+        }
+      ) : null,
+      /* @__PURE__ */ jsx2(SquareIcon, { className: "relative size-2.5 fill-current", "aria-hidden": true })
+    ] });
+  }
+  return /* @__PURE__ */ jsx2(AudioLinesIcon, { className: "size-4", "aria-hidden": true });
+}
+function RealtimeStatusDot(props) {
+  const live = props.phase === "listening" || props.phase === "speaking";
+  return /* @__PURE__ */ jsxs2("span", { className: "relative inline-flex size-2 shrink-0", "aria-hidden": true, children: [
+    live && !props.reduceMotion ? /* @__PURE__ */ jsx2(
+      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 }
+      }
+    ) : null,
+    /* @__PURE__ */ jsx2(
+      "span",
+      {
+        className: cn(
+          "relative size-2 rounded-full",
+          live ? "bg-og-status-running" : props.phase === "blocked" || props.phase === "error" ? "bg-og-status-waiting" : props.phase === "elsewhere" || props.phase === "unavailable" ? "bg-og-fg-subtle" : "bg-og-accent"
+        )
+      }
+    )
+  ] });
+}
+function voiceButtonTone(phase) {
+  if (phase === "listening" || phase === "speaking") {
+    return "border-og-accent/45 bg-og-accent text-og-accent-fg shadow-og-sm hover:bg-og-accent-strong";
+  }
+  if (phase === "blocked" || phase === "error") {
+    return "border-og-status-waiting/35 bg-og-status-waiting/10 text-og-status-waiting hover:bg-og-status-waiting/15";
+  }
+  if (phase === "connecting" || phase === "reconnecting" || phase === "stopping") {
+    return "border-og-accent/35 bg-og-accent-soft text-og-accent";
+  }
+  return "border-og-border bg-og-surface-2 text-og-fg-muted hover:border-og-accent/35 hover:bg-og-accent-soft hover:text-og-accent";
+}
+function toRealtimeModelOption(model) {
+  return { ...model };
+}
+function readRealtimeModelPreference(workspaceId) {
+  if (typeof localStorage === "undefined") return null;
+  try {
+    const value = localStorage.getItem(`${REALTIME_MODEL_STORAGE_PREFIX}:${workspaceId}`);
+    return isRealtimeModel(value) ? value : null;
+  } catch {
+    return null;
+  }
+}
+function writeRealtimeModelPreference(workspaceId, model) {
+  if (typeof localStorage === "undefined") return;
+  try {
+    localStorage.setItem(`${REALTIME_MODEL_STORAGE_PREFIX}:${workspaceId}`, model);
+  } catch {
+  }
+}
+function isRealtimeModel(value) {
+  return value === "gpt-live-1-boulder-alpha" || 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 === "workspace-gateway/openai/gpt-realtime-2.1" || value === "workspace-gateway/openai/gpt-realtime-mini" || value === "workspace-gateway/xai/grok-voice-think-fast-2.0";
+}
+var useSessionCodexRealtime = useSessionRealtime;
+var useWorkspaceRealtimeModelSelection = useRealtimeModelSelection;
+var SessionCodexRealtimeControl = SessionRealtimeControl;
+var CodexRealtimeControl = RealtimeVoiceControl;
+export {
+  CodexRealtimeControl,
+  NewSessionRealtimeControl,
+  RealtimeModelPickerMenu,
+  RealtimeVoiceControl,
+  SessionCodexRealtimeControl,
+  SessionRealtimeControl,
+  codexRealtimeAdmissionAllowed,
+  codexRealtimeAdmissionBlocker,
+  useRealtimeModelSelection,
+  useSessionCodexRealtime,
+  useSessionRealtime,
+  useWorkspaceRealtimeModelSelection
+};
+//# sourceMappingURL=realtime.js.map