@opengeni/react 3.1.0 → 3.1.3-canary.38890816741001

package/dist/chunk-5EY26VZ7.js

@@ -0,0 +1,1053 @@
+"use client";
+import {
+  CODEX_LIVE_MODEL,
+  sessionRealtimeLifecycleIsActive,
+  useRealtimeModelSelection,
+  useSessionRealtime
+} from "./chunk-A55KV72M.js";
+import {
+  COMPOSER_VOICE_INPUT_START_EVENT,
+  composerVoiceEventScope
+} from "./chunk-NX4ADH73.js";
+import {
+  BillingClassMark,
+  PickerAnimatedPage,
+  PickerBackHeader,
+  PickerNavRow
+} from "./chunk-XDA5QJE7.js";
+import {
+  MENU_CHECK_CLASS,
+  MENU_CHEVRON_CLASS,
+  MENU_ITEM_CLASS,
+  MENU_SEPARATOR_CLASS,
+  MENU_SURFACE_CLASS
+} from "./chunk-PMV53IMM.js";
+import {
+  usePortalTokenSource,
+  usePortalTokenStyle
+} from "./chunk-XEA5BCMA.js";
+import {
+  cn
+} from "./chunk-TXS65BB2.js";
+
+// src/realtime/realtime-control.tsx
+import {
+  projectSessionRealtimeLifecycle
+} from "@opengeni/sdk/realtime";
+import {
+  AudioLinesIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  CircleAlertIcon,
+  LoaderCircleIcon,
+  MicIcon,
+  MicOffIcon,
+  RotateCcwIcon,
+  SquareIcon,
+  Volume2Icon,
+  VolumeXIcon,
+  XIcon
+} 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 { createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MENU_MOTION_CLASS = "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";
+var DropdownMenuSourceContext = createContext(null);
+function assignRef(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
+function DropdownMenu(props) {
+  const source = usePortalTokenSource();
+  return /* @__PURE__ */ jsx(DropdownMenuSourceContext.Provider, { value: source, children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props }) });
+}
+function DropdownMenuTrigger({
+  ref,
+  ...props
+}) {
+  const sourceRef = useContext(DropdownMenuSourceContext);
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ref: (node) => {
+        sourceRef?.ref(node);
+        assignRef(ref, node);
+      },
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  style,
+  ...props
+}) {
+  const source = useContext(DropdownMenuSourceContext);
+  const portalStyle = usePortalTokenStyle(source?.source ?? null);
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "og-root 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",
+        MENU_SURFACE_CLASS,
+        MENU_MOTION_CLASS,
+        className
+      ),
+      style: { ...portalStyle, ...style },
+      ...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(MENU_ITEM_CLASS, "data-[inset]:pl-9", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn(MENU_SEPARATOR_CLASS, 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(MENU_ITEM_CLASS, "data-[inset]:pl-9", className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true", className: cn(MENU_CHEVRON_CLASS, "ml-auto") })
+      ]
+    }
+  );
+}
+function DropdownMenuSubContent({
+  className,
+  style,
+  ...props
+}) {
+  const source = useContext(DropdownMenuSourceContext);
+  const portalStyle = usePortalTokenStyle(source?.source ?? null);
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.SubContent,
+    {
+      "data-slot": "dropdown-menu-sub-content",
+      className: cn(
+        "og-root z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden",
+        MENU_SURFACE_CLASS,
+        MENU_MOTION_CLASS,
+        className
+      ),
+      style: { ...portalStyle, ...style },
+      ...props
+    }
+  );
+}
+
+// src/realtime/realtime-control.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function realtimeRefusalLabel(code) {
+  switch (code) {
+    case "insufficient_credits":
+      return "Credits needed";
+    case "allowance_exhausted":
+    case "monthly_model_cost_limit":
+      return "Usage limit reached";
+    case "realtime_voice_unavailable":
+      return "Voice unavailable";
+    case "credits_disabled":
+      return "Credits off";
+    default:
+      return null;
+  }
+}
+var REALTIME_MODEL_PROVIDERS = [
+  "OpenGeni",
+  "Connected Codex",
+  "Connected SuperGrok",
+  "Your Gateway"
+];
+var REALTIME_PROVIDER_META = {
+  // The wire value keeps its historical spelling; the product name is Opengeni.
+  OpenGeni: { billingClass: "opengeni_credits", label: "Opengeni", hint: "Uses Opengeni credits" },
+  "Connected Codex": {
+    billingClass: "codex_subscription",
+    label: "Connected Codex",
+    hint: "ChatGPT / Codex plan"
+  },
+  "Connected SuperGrok": {
+    billingClass: "supergrok_subscription",
+    label: "Connected SuperGrok",
+    hint: "SuperGrok / xAI plan"
+  },
+  "Your Gateway": {
+    billingClass: "byok",
+    label: "Your Gateway",
+    hint: "Billed to your AI Gateway"
+  }
+};
+function realtimeProviderLabel(provider) {
+  return provider === "OpenGeni" ? "Opengeni" : provider;
+}
+function SessionRealtimeControl(props) {
+  const lifecycle = useMemo(() => projectSessionRealtimeLifecycle(props.events), [props.events]);
+  const lifecycleActive = sessionRealtimeLifecycleIsActive(lifecycle);
+  const selection = useRealtimeModelSelection({
+    client: props.client,
+    workspaceId: props.workspaceId,
+    codexConnected: props.codexConnected,
+    activeModel: lifecycleActive && 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;
+  const onVoiceActiveChange = props.onVoiceActiveChange;
+  const voiceActive = realtime.snapshot.mode?.state === "active";
+  useEffect(() => {
+    onVoiceActiveChange?.(voiceActive);
+  }, [onVoiceActiveChange, voiceActive]);
+  useEffect(() => () => onVoiceActiveChange?.(false), [onVoiceActiveChange]);
+  useEffect(() => {
+    const pending = autostartModelRef.current;
+    if (!pending || autostartStartedRef.current || lifecycleActive) 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;
+    const consume = () => {
+      autostartModelRef.current = null;
+      onRealtimeAutostartConsumed?.();
+    };
+    void start().then(consume, consume);
+  }, [
+    canStart,
+    lifecycleActive,
+    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",
+      modelMenu: props.modelMenu ?? "split",
+      showDiagnostics: props.showDiagnostics,
+      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
+    }
+  );
+}
+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) {
+  if (props.models && props.selectedModel && props.onSelectModel) {
+    return /* @__PURE__ */ jsx2(
+      NewSessionRealtimeControlView,
+      {
+        ...props,
+        selection: {
+          models: props.models,
+          selectedModel: props.selectedModel,
+          selectModel: props.onSelectModel
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(NewSessionRealtimeControlWithInternalSelection, { ...props });
+}
+function NewSessionRealtimeControlWithInternalSelection(props) {
+  const selection = useRealtimeModelSelection({
+    client: props.client,
+    workspaceId: props.workspaceId,
+    codexConnected: props.codexConnected
+  });
+  return /* @__PURE__ */ jsx2(NewSessionRealtimeControlView, { ...props, selection });
+}
+function NewSessionRealtimeControlView(props) {
+  const selection = props.selection;
+  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",
+      modelMenu: props.modelMenu ?? "split",
+      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,
+    selectedModel.unavailableCode ?? null
+  );
+  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 startFailed = props.snapshot.status === "error" && !modeOwned;
+  const failureText = status.label === "Voice unavailable" ? status.detail : `${status.label}. ${status.detail}`;
+  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" : !props.canStart && status.phase === "unavailable" ? `${status.label}: ${status.detail}` : startFailed ? `Try voice again with ${selectedModel.label}` : `Start voice with ${selectedModel.label}`;
+  const runMainAction = audioBlocked ? props.onRetryAudibleOutput : retryConnection ? props.onRetry : modeOwned ? props.onStop : props.onStart;
+  const diagnosticsVisible = props.showDiagnostics ?? false;
+  const modelMenu = props.modelMenu ?? "split";
+  const showAttachedModelMenu = modelMenu === "split" || modelMenu === "split-desktop";
+  const desktopOnlyModelMenu = modelMenu === "split-desktop";
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [pickerProvider, setPickerProvider] = useState(
+    selectedModel.provider
+  );
+  const [pickerDirection, setPickerDirection] = useState(1);
+  const [failureDismissed, setFailureDismissed] = useState(false);
+  useEffect(() => {
+    if (!startFailed) setFailureDismissed(false);
+  }, [startFailed]);
+  const rootRef = useRef(null);
+  useEffect(() => {
+    if (!startFailed) return;
+    const scope = composerVoiceEventScope(rootRef.current);
+    if (!scope) return;
+    const dismiss = () => setFailureDismissed(true);
+    scope.addEventListener(COMPOSER_VOICE_INPUT_START_EVENT, dismiss);
+    return () => scope.removeEventListener(COMPOSER_VOICE_INPUT_START_EVENT, dismiss);
+  }, [startFailed]);
+  useEffect(() => {
+    if (!pickerOpen) setPickerProvider(selectedModel.provider);
+  }, [pickerOpen, selectedModel.provider]);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: rootRef,
+      role: "group",
+      "aria-label": "Realtime voice",
+      "data-picker-side": props.menuSide ?? "top",
+      "data-model-menu": modelMenu,
+      className: "og-realtime-control 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__ */ jsx2(
+          motion.div,
+          {
+            "data-testid": "realtime-mute-controls",
+            initial: reduceMotion ? false : { opacity: 0, width: 0 },
+            animate: {
+              opacity: 1,
+              width: "auto",
+              transition: reduceMotion ? { duration: 0 } : { delay: 0.3, duration: 0.48, ease: [0.22, 1, 0.36, 1] }
+            },
+            ...reduceMotion ? {} : {
+              exit: {
+                opacity: 0,
+                width: 0,
+                transition: { duration: 0.28, ease: [0.4, 0, 1, 1] }
+              }
+            },
+            className: cn(
+              "inline-flex shrink-0 items-center overflow-hidden",
+              props.muteControlsClassName
+            ),
+            children: /* @__PURE__ */ jsxs2(
+              motion.div,
+              {
+                className: "inline-flex items-center gap-0.5 pr-1",
+                initial: reduceMotion ? false : { x: 18, opacity: 0 },
+                animate: {
+                  x: 0,
+                  opacity: 1,
+                  transition: reduceMotion ? { duration: 0 } : {
+                    delay: 0.32,
+                    type: "spring",
+                    stiffness: 320,
+                    damping: 30,
+                    mass: 0.8
+                  }
+                },
+                ...reduceMotion ? {} : {
+                  exit: {
+                    x: 14,
+                    opacity: 0,
+                    transition: { duration: 0.22, ease: [0.4, 0, 1, 1] }
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsx2(
+                    RealtimeMuteButton,
+                    {
+                      muted: props.snapshot.inputMuted,
+                      kind: "microphone",
+                      reduceMotion: reduceMotion === true,
+                      enterDelay: reduceMotion ? 0 : 0.34,
+                      onToggle: () => props.onSetInputMuted(!props.snapshot.inputMuted)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    RealtimeMuteButton,
+                    {
+                      muted: props.snapshot.outputMuted,
+                      kind: "output",
+                      reduceMotion: reduceMotion === true,
+                      enterDelay: reduceMotion ? 0 : 0.4,
+                      onToggle: () => props.onSetOutputMuted(!props.snapshot.outputMuted)
+                    }
+                  )
+                ]
+              }
+            )
+          },
+          "realtime-mute-controls"
+        ) : null }),
+        startFailed && !failureDismissed ? /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            type: "button",
+            "data-realtime-attention": "",
+            "data-testid": "realtime-failure-reason",
+            title: "Dismiss",
+            "aria-label": `Dismiss: ${failureText}`,
+            onClick: () => setFailureDismissed(true),
+            className: "og-realtime-failure mr-1.5 inline-flex min-w-0 items-center gap-1 rounded-og-sm text-right text-og-xs leading-tight text-og-status-failed outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/45",
+            children: [
+              /* @__PURE__ */ jsx2("span", { className: "og-realtime-failure-label line-clamp-2 max-w-56", children: failureText }),
+              /* @__PURE__ */ jsx2(XIcon, { className: "size-3 shrink-0 opacity-70", "aria-hidden": true })
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs2("div", { className: "inline-flex shrink-0 items-center", children: [
+          /* @__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(
+                // Match transcription mic: ghost icon when idle; filled only when live.
+                // Public contract: coarse pointers keep a 44px target; split menu uses
+                // left-only rounding at `sm+` where the chevron attaches.
+                "og-realtime-primary relative inline-flex size-8 items-center justify-center outline-hidden",
+                "rounded-og-md 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",
+                showAttachedModelMenu && (desktopOnlyModelMenu ? "sm:rounded-l-og-md sm:rounded-r-none" : "rounded-l-og-md rounded-r-none"),
+                voiceButtonTone(status.phase)
+              ),
+              children: /* @__PURE__ */ jsx2(
+                RealtimeActionGlyph,
+                {
+                  phase: status.phase,
+                  audioBlocked,
+                  reduceMotion: reduceMotion === true
+                }
+              )
+            }
+          ),
+          showAttachedModelMenu ? /* @__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(
+                  // Keep the split trigger compact on desktop while preserving a
+                  // full 44px mobile target independent of pointer-media support.
+                  "og-realtime-model-trigger inline-flex h-11 w-11 items-center justify-center rounded-r-og-md outline-hidden sm:h-8 sm:w-6",
+                  "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",
+                  desktopOnlyModelMenu && "hidden sm:inline-flex",
+                  voiceChevronTone(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: "og-realtime-menu flex w-72 max-h-[min(20rem,var(--radix-dropdown-menu-content-available-height))] flex-col overflow-hidden",
+                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" && // Say it once: the selected model's row already carries its reason.
+                  !(status.phase === "unavailable" && pickerProvider === selectedModel.provider && selectedModel.unavailableReason === status.detail) ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+                    /* @__PURE__ */ jsx2(DropdownMenuSeparator, {}),
+                    /* @__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,
+                    {
+                      onSelect: () => void props.onRetryAudibleOutput().catch(() => void 0),
+                      children: [
+                        /* @__PURE__ */ jsx2(Volume2Icon, {}),
+                        "Resume audio"
+                      ]
+                    }
+                  ) : null,
+                  retryConnection ? /* @__PURE__ */ jsxs2(DropdownMenuItem, { 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",
+                      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
+                ]
+              }
+            )
+          ] }) : 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 RealtimeVoiceModelPanel(props) {
+  const [provider, setProvider] = useState(null);
+  const [direction, setDirection] = useState(1);
+  return /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 flex-1 flex-col", "data-testid": "realtime-voice-model-panel", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex min-h-10 shrink-0 items-center gap-2 border-b border-og-border px-2 pb-2", children: [
+      props.leading,
+      /* @__PURE__ */ jsx2("div", { className: "min-w-0 flex-1 text-og-menu font-medium text-og-fg", children: "Voice model" })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-2", children: [
+      /* @__PURE__ */ jsx2("p", { className: "mb-3 text-og-control text-og-fg-muted", children: "Used when you start a voice conversation." }),
+      /* @__PURE__ */ jsx2(
+        RealtimeModelPickerMenu,
+        {
+          models: props.models,
+          selectedModel: props.selectedModel,
+          provider,
+          direction,
+          disabled: props.disabled === true,
+          onProviderChange: (next, nextDirection) => {
+            setDirection(nextDirection);
+            setProvider(next);
+          },
+          onSelect: props.onSelect
+        }
+      )
+    ] })
+  ] });
+}
+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,
+      initial: props.reduceMotion ? false : { scale: 0.72, opacity: 0 },
+      animate: { scale: 1, opacity: 1 },
+      transition: {
+        delay: props.enterDelay ?? 0,
+        type: "spring",
+        stiffness: 420,
+        damping: 26,
+        mass: 0.7
+      },
+      ...props.reduceMotion ? {} : { whileTap: { scale: 0.92 } },
+      onClick: props.onToggle,
+      className: cn(
+        "inline-flex size-8 shrink-0 items-center justify-center rounded-og-md outline-hidden",
+        "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 border-og-accent/35 bg-og-accent-soft text-og-accent" : "text-og-fg-muted hover:bg-og-surface-2 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: realtimeProviderLabel(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: MENU_CHECK_CLASS, "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: realtimeProviderLabel(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, {}),
+    /* @__PURE__ */ jsxs2(DropdownMenuSub, { children: [
+      /* @__PURE__ */ jsx2(DropdownMenuSubTrigger, { className: "text-og-fg-muted", children: "Realtime diagnostics" }),
+      /* @__PURE__ */ jsx2(DropdownMenuSubContent, { className: "max-h-80 w-72 overflow-y-auto", 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, unavailableCode = null) {
+  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":
+      if (snapshot.refusal) {
+        return {
+          phase: "unavailable",
+          label: realtimeRefusalLabel(snapshot.refusal.code) ?? "Voice unavailable",
+          detail: snapshot.refusal.message
+        };
+      }
+      return {
+        phase: "error",
+        label: "Voice unavailable",
+        detail: snapshot.error ?? "The connection could not be started."
+      };
+    case "idle":
+      if (!modelAvailable) {
+        return {
+          phase: "unavailable",
+          label: realtimeRefusalLabel(unavailableCode) ?? "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 border-og-primary-border bg-og-primary text-og-primary-fg hover:bg-og-primary-hover";
+  }
+  if (phase === "blocked" || phase === "error") {
+    return "border 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 border-og-accent/35 bg-og-accent-soft text-og-accent";
+  }
+  return "text-og-fg-muted hover:bg-og-surface-2 hover:text-og-fg";
+}
+function voiceChevronTone(phase) {
+  if (phase === "listening" || phase === "speaking") {
+    return "border border-l-0 border-og-primary-border bg-og-primary text-og-primary-fg hover:bg-og-primary-hover";
+  }
+  if (phase === "blocked" || phase === "error") {
+    return "border border-l-0 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 border-l-0 border-og-accent/35 bg-og-accent-soft text-og-accent";
+  }
+  return "text-og-fg-muted hover:bg-og-surface-2 hover:text-og-fg";
+}
+var useSessionCodexRealtime = useSessionRealtime;
+var useWorkspaceRealtimeModelSelection = useRealtimeModelSelection;
+var SessionCodexRealtimeControl = SessionRealtimeControl;
+var CodexRealtimeControl = RealtimeVoiceControl;
+
+export {
+  SessionRealtimeControl,
+  NewSessionRealtimeControl,
+  RealtimeVoiceControl,
+  RealtimeVoiceModelPanel,
+  RealtimeModelPickerMenu,
+  useSessionCodexRealtime,
+  useWorkspaceRealtimeModelSelection,
+  SessionCodexRealtimeControl,
+  CodexRealtimeControl
+};
+//# sourceMappingURL=chunk-5EY26VZ7.js.map