@opengeni/react 6.5.2-canary.41607687019001 → 6.7.0

package/dist/chunk-NRTE7DNV.js

@@ -0,0 +1,1270 @@
+"use client";
+import {
+  COMPOSER_VOICE_INPUT_START_EVENT,
+  composerVoiceEventScope,
+  useComposerFooterSignal
+} from "./chunk-6F34IWSA.js";
+import {
+  BillingClassMark,
+  PickerAnimatedPage,
+  PickerBackHeader,
+  PickerNavRow
+} from "./chunk-XLH7QY2R.js";
+import {
+  MENU_CHECK_CLASS,
+  MENU_CHEVRON_CLASS,
+  MENU_ITEM_CLASS,
+  MENU_SEPARATOR_CLASS,
+  MENU_SURFACE_CLASS
+} from "./chunk-PNNTR6KP.js";
+import {
+  useMergedRefs
+} from "./chunk-EDYVC3U3.js";
+import {
+  containedPortal
+} from "./chunk-UD6AAZSC.js";
+import {
+  usePortalTokenSource,
+  usePortalTokenStyle
+} from "./chunk-XEA5BCMA.js";
+import {
+  CODEX_LIVE_MODEL,
+  realtimeAppLanguage,
+  sessionRealtimeLifecycleIsActive,
+  useRealtimeLanguagePreference,
+  useRealtimeModelSelection,
+  useSessionRealtime
+} from "./chunk-I7ITSXSJ.js";
+import {
+  isRegionRestricted,
+  regionRestrictedText
+} from "./chunk-MBSN5HHQ.js";
+import {
+  cn
+} from "./chunk-TXS65BB2.js";
+import {
+  useOpenGeniText
+} from "./chunk-7T2ZE3VT.js";
+
+// src/realtime/realtime-control.tsx
+import {
+  projectSessionRealtimeLifecycle
+} from "@opengeni/sdk/realtime";
+import {
+  AudioLinesIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  CircleAlertIcon,
+  LanguagesIcon,
+  LoaderCircleIcon,
+  MicIcon,
+  MicOffIcon,
+  RotateCcwIcon,
+  SquareIcon,
+  Volume2Icon,
+  VolumeXIcon,
+  XIcon
+} from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import {
+  useCallback,
+  useEffect as useEffect2,
+  useMemo,
+  useRef,
+  useState as useState2
+} from "react";
+
+// src/realtime/dropdown-menu.tsx
+import { ChevronRightIcon } from "lucide-react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import {
+  createContext,
+  forwardRef,
+  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 DropdownMenuContainedPortal = containedPortal(DropdownMenuPrimitive.Portal);
+var DropdownMenuSourceContext = createContext(null);
+function DropdownMenu(props) {
+  const source = usePortalTokenSource();
+  return /* @__PURE__ */ jsx(DropdownMenuSourceContext.Provider, { value: source, children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props }) });
+}
+var DropdownMenuTrigger = /* @__PURE__ */ forwardRef(function DropdownMenuTrigger2(props, forwardedRef) {
+  const sourceRef = useContext(DropdownMenuSourceContext);
+  const ref = useMergedRefs(sourceRef?.ref, forwardedRef);
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ref, ...props });
+});
+var DropdownMenuContent = /* @__PURE__ */ forwardRef(function DropdownMenuContent2({ className, sideOffset = 4, style, ...props }, ref) {
+  const source = useContext(DropdownMenuSourceContext);
+  const portalStyle = usePortalTokenStyle(source?.source ?? null);
+  return /* @__PURE__ */ jsx(DropdownMenuContainedPortal, { 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 },
+      ref,
+      ...props
+    }
+  ) });
+});
+var DropdownMenuItem = /* @__PURE__ */ forwardRef(function DropdownMenuItem2({ className, inset, variant = "default", ...props }, ref) {
+  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),
+      ref,
+      ...props
+    }
+  );
+});
+var DropdownMenuSeparator = /* @__PURE__ */ forwardRef(function DropdownMenuSeparator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn(MENU_SEPARATOR_CLASS, className),
+      ref,
+      ...props
+    }
+  );
+});
+function DropdownMenuSub(props) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef(function DropdownMenuSubTrigger2({ className, inset, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.SubTrigger,
+    {
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-inset": inset,
+      className: cn(MENU_ITEM_CLASS, "data-[inset]:pl-9", className),
+      ref,
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true", className: cn(MENU_CHEVRON_CLASS, "ml-auto") })
+      ]
+    }
+  );
+});
+var DropdownMenuSubContent = /* @__PURE__ */ forwardRef(function DropdownMenuSubContent2({ className, style, ...props }, ref) {
+  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 },
+      ref,
+      ...props
+    }
+  );
+});
+
+// src/realtime/microphone-access.ts
+import { useEffect, useState } from "react";
+function useMicrophoneAccess() {
+  const [blocked] = useState(microphoneBlockedByPage);
+  const [denied, setDenied] = useState(false);
+  useEffect(() => {
+    if (blocked) return;
+    const permissions = typeof navigator === "undefined" ? void 0 : navigator.permissions;
+    if (typeof permissions?.query !== "function") return;
+    let active = true;
+    let status = null;
+    const update = () => setDenied(status?.state === "denied");
+    let query;
+    try {
+      query = permissions.query({ name: "microphone" });
+    } catch {
+      return;
+    }
+    query.then(
+      (result) => {
+        if (!active) return;
+        status = result;
+        update();
+        result.addEventListener("change", update);
+      },
+      // A browser that cannot query the microphone asks when voice starts.
+      () => void 0
+    );
+    return () => {
+      active = false;
+      status?.removeEventListener("change", update);
+    };
+  }, [blocked]);
+  return blocked ? "blocked" : denied ? isEmbedded() ? "blocked" : "denied" : "unknown";
+}
+function isEmbedded() {
+  if (typeof window === "undefined") return false;
+  try {
+    return window.top !== window.self;
+  } catch {
+    return true;
+  }
+}
+function microphoneBlockedByPage() {
+  if (typeof document === "undefined") return false;
+  const policies = document;
+  const policy = policies.permissionsPolicy ?? policies.featurePolicy;
+  try {
+    return policy?.allowsFeature?.("microphone") === false;
+  } catch {
+    return false;
+  }
+}
+
+// src/realtime/realtime-control.tsx
+import { errorMessage } from "@opengeni/contracts/values";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function realtimeRefusalLabel(t, code) {
+  switch (code) {
+    case "insufficient_credits":
+      return t("realtime.realtimeControl.creditsNeeded");
+    case "allowance_exhausted":
+    case "monthly_model_cost_limit":
+      return t("realtime.realtimeControl.usageLimitReached");
+    case "realtime_voice_unavailable":
+      return t("realtime.realtimeControl.voiceUnavailable");
+    case "credits_disabled":
+      return t("realtime.realtimeControl.creditsOff");
+    default:
+      return regionRestrictedText(t, code);
+  }
+}
+var REALTIME_MODEL_PROVIDERS = [
+  "OpenGeni",
+  "Connected Codex",
+  "Connected SuperGrok",
+  "Your Gateway",
+  "Your ElevenLabs"
+];
+var REALTIME_PROVIDER_META = (t) => ({
+  // The wire value keeps its historical spelling; the product name is Opengeni.
+  OpenGeni: {
+    key: "opengeni",
+    billingClass: "opengeni_credits",
+    label: t("realtime.realtimeControl.opengeni"),
+    hint: t("realtime.realtimeControl.usesOpengeniCredits")
+  },
+  "Connected Codex": {
+    key: "codex",
+    billingClass: "codex_subscription",
+    label: t("realtime.realtimeControl.connectedCodex"),
+    hint: t("realtime.realtimeControl.chatgptCodexPlan")
+  },
+  "Connected SuperGrok": {
+    key: "supergrok",
+    billingClass: "supergrok_subscription",
+    label: t("realtime.realtimeControl.connectedSupergrok"),
+    hint: t("realtime.realtimeControl.supergrokXaiPlan")
+  },
+  "Your Gateway": {
+    key: "gateway",
+    billingClass: "byok",
+    label: t("realtime.realtimeControl.yourGateway"),
+    hint: t("realtime.realtimeControl.billedToYourAiGateway")
+  },
+  "Your ElevenLabs": {
+    key: "elevenlabs",
+    billingClass: "byok",
+    label: t("realtime.realtimeControl.yourElevenlabs"),
+    hint: t("realtime.realtimeControl.billedToYourElevenlabs")
+  }
+});
+function realtimeProviderLabel(t, provider) {
+  return REALTIME_PROVIDER_META(t)[provider].label;
+}
+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,
+    language: selection.languageFor(selectedModel.id),
+    voiceSettings: selection.voiceSettingsFor(selectedModel.id, props.voiceSettings)
+  });
+  const autostartModelRef = useRef(props.realtimeAutostartModel ?? null);
+  const autostartStartedRef = useRef(false);
+  const { models, selectedModel: selectedRealtimeModel, selectModel } = selection;
+  const { canStart, start, prestarted } = realtime;
+  const onRealtimeAutostartConsumed = props.onRealtimeAutostartConsumed;
+  const onVoiceActiveChange = props.onVoiceActiveChange;
+  const voiceActive = realtime.snapshot.mode?.state === "active";
+  useEffect2(() => {
+    onVoiceActiveChange?.(voiceActive);
+  }, [onVoiceActiveChange, voiceActive]);
+  useEffect2(() => () => onVoiceActiveChange?.(false), [onVoiceActiveChange]);
+  useEffect2(() => {
+    const pending = autostartModelRef.current;
+    if (!pending || autostartStartedRef.current) return;
+    const consume = () => {
+      autostartModelRef.current = null;
+      onRealtimeAutostartConsumed?.();
+    };
+    if (prestarted && selectedRealtimeModel.id === pending) {
+      autostartStartedRef.current = true;
+      consume();
+      return;
+    }
+    if (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;
+    void start().then(consume, consume);
+  }, [
+    canStart,
+    lifecycleActive,
+    models,
+    prestarted,
+    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,
+      loadState: selection.loadState,
+      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,
+          loadState: props.loadState
+        }
+      }
+    );
+  }
+  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 t = useOpenGeniText();
+  const selection = props.selection;
+  const audioRef = useRef(null);
+  const [starting, setStarting] = useState2(false);
+  const [error, setError] = useState2(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(t("realtime.realtimeControl.theVoiceSessionCouldNot"));
+    } catch (cause) {
+      setError(errorMessage(cause));
+    } finally {
+      setStarting(false);
+    }
+  }, [canStart, onStart, selectedModelId, t]);
+  return /* @__PURE__ */ jsx2(
+    RealtimeVoiceControl,
+    {
+      snapshot,
+      canStart,
+      admissionBlocker: selection.selectedModel.unavailableReason ?? props.disabledReason ?? null,
+      modelAvailable: selection.selectedModel.available,
+      loadState: selection.loadState,
+      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 t = useOpenGeniText();
+  const reduceMotion = useReducedMotion();
+  const selectedModel = props.selectedModel ?? {
+    ...CODEX_LIVE_MODEL(t),
+    available: props.modelAvailable,
+    unavailableReason: props.modelAvailable ? null : CODEX_LIVE_MODEL(t).unavailableReason
+  };
+  const models = props.models ?? [selectedModel];
+  const microphone = useMicrophoneAccess();
+  const startable = props.canStart && microphone === "unknown";
+  const modelsKnown = (props.loadState ?? "ready") === "ready" || props.modelAvailable;
+  const status = statusContent(
+    t,
+    props.snapshot,
+    props.modelAvailable,
+    props.canStart,
+    props.admissionBlocker ?? null,
+    selectedModel.unavailableCode ?? null,
+    props.loadState ?? "ready",
+    microphone
+  );
+  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 === t("realtime.realtimeControl.voiceUnavailable") ? status.detail : !status.detail ? status.label : t("realtime.realtimeControl.labelDetail", { label: status.label, detail: status.detail });
+  const mainDisabled = props.snapshot.status === "stopping" || props.snapshot.status === "lost_owner" || !modeOwned && !startable || props.snapshot.status === "starting" && !modeOwned;
+  const mainLabel = audioBlocked ? t("realtime.realtimeControl.resumeVoiceAudio") : retryConnection ? t("realtime.realtimeControl.retryVoiceConnection") : modeOwned ? t("realtime.realtimeControl.endVoiceConversation") : !startable && (status.phase === "unavailable" || status.phase === "checking") ? status.detail ? `${status.label}: ${status.detail}` : status.label : startFailed ? t("realtime.realtimeControl.tryVoiceAgain") : t("realtime.realtimeControl.startVoice");
+  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] = useState2(false);
+  const [pickerProvider, setPickerProvider] = useState2(
+    selectedModel.provider
+  );
+  const [pickerDirection, setPickerDirection] = useState2(1);
+  const [failureDismissed, setFailureDismissed] = useState2(false);
+  useEffect2(() => {
+    if (!startFailed) setFailureDismissed(false);
+  }, [startFailed]);
+  useComposerFooterSignal("realtime-attention", startFailed && !failureDismissed);
+  const rootRef = useRef(null);
+  useEffect2(() => {
+    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]);
+  useEffect2(() => {
+    if (!pickerOpen) setPickerProvider(selectedModel.provider);
+  }, [pickerOpen, selectedModel.provider]);
+  const allRegionRestricted = modelsKnown && models.length > 0 && models.every((model) => isRegionRestricted(model.unavailableCode ?? null));
+  if (!models.some((model) => model.available) && !allRegionRestricted && (props.loadState ?? "ready") !== "failed" && props.snapshot.status === "idle" && !modeOwned)
+    return null;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: rootRef,
+      role: "group",
+      "aria-label": t("realtime.realtimeControl.realtimeVoice"),
+      "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: t("realtime.realtimeControl.dismiss"),
+            "aria-label": t("realtime.realtimeControl.dismissFailuretext", { 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": t("realtime.realtimeControl.chooseVoiceModelAndOptions"),
+                title: modelsKnown ? t("realtime.realtimeControl.voiceModelLabel", {
+                  label: selectedModel.label
+                }) : t("realtime.realtimeControl.chooseVoiceModelAndOptions"),
+                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: [
+                  modelsKnown ? /* @__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);
+                      }
+                    }
+                  ) }) : null,
+                  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 || !status.detail)) ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+                    modelsKnown ? /* @__PURE__ */ jsx2(DropdownMenuSeparator, {}) : null,
+                    /* @__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
+                      ] }),
+                      status.detail ? /* @__PURE__ */ jsx2("p", { className: "mt-1 text-og-xs leading-5 text-og-fg-subtle", children: status.detail }) : null
+                    ] })
+                  ] }) : null,
+                  audioBlocked ? /* @__PURE__ */ jsxs2(
+                    DropdownMenuItem,
+                    {
+                      onSelect: () => void props.onRetryAudibleOutput().catch(() => void 0),
+                      children: [
+                        /* @__PURE__ */ jsx2(Volume2Icon, {}),
+                        t("realtime.realtimeControl.resumeAudio")
+                      ]
+                    }
+                  ) : null,
+                  retryConnection ? /* @__PURE__ */ jsxs2(DropdownMenuItem, { onSelect: () => void props.onRetry().catch(() => void 0), children: [
+                    /* @__PURE__ */ jsx2(RotateCcwIcon, {}),
+                    t("realtime.realtimeControl.retryConnection")
+                  ] }) : 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, {}),
+                        t("realtime.realtimeControl.endVoiceConversation")
+                      ]
+                    }
+                  ) : null,
+                  diagnosticsVisible ? /* @__PURE__ */ jsx2(RealtimeDiagnosticsMenu, { snapshot: props.snapshot }) : null
+                ]
+              }
+            )
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsx2("span", { className: "sr-only", role: "status", "aria-live": "polite", children: status.detail ? `${status.label}. ${status.detail}` : status.label }),
+        props.snapshot.error ? /* @__PURE__ */ jsx2("span", { className: "sr-only", role: "alert", children: props.snapshot.error }) : null
+      ]
+    }
+  );
+}
+function RealtimeVoiceModelPanel(props) {
+  const t = useOpenGeniText();
+  const [provider, setProvider] = useState2(null);
+  const [direction, setDirection] = useState2(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: t("realtime.realtimeControl.voiceModel") })
+    ] }),
+    /* @__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: t("realtime.realtimeControl.usedWhenYouStartA") }),
+      /* @__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 t = useOpenGeniText();
+  const microphone = props.kind === "microphone";
+  const label = microphone ? props.muted ? t("realtime.realtimeControl.unmuteMicrophone") : t("realtime.realtimeControl.muteMicrophone") : props.muted ? t("realtime.realtimeControl.unmuteVoiceAudio") : t("realtime.realtimeControl.muteVoiceAudio");
+  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 t = useOpenGeniText();
+  const { language: languagePreference, setLanguage } = useRealtimeLanguagePreference();
+  const [languagePage, setLanguagePage] = useState2(null);
+  const changeProvider = (provider, direction2) => {
+    setLanguagePage(null);
+    props.onProviderChange(provider, direction2);
+  };
+  const providers = REALTIME_MODEL_PROVIDERS.filter(
+    (provider) => props.models.some((model) => model.provider === provider)
+  );
+  const providerLanguages = props.provider ? props.models.find((model) => model.provider === props.provider && model.languages?.length)?.languages : void 0;
+  const languagePageOpen = providerLanguages !== void 0 && languagePage?.provider === props.provider && languagePage.open;
+  const direction = languagePage?.provider === props.provider ? languagePage.open ? 1 : -1 : props.direction;
+  const pageKey = languagePageOpen ? `voice-languages:${props.provider}` : props.provider ? `voice-models:${props.provider}` : "voice-providers";
+  const appLanguage = realtimeAppLanguage(t.locale);
+  const appLanguageName = appLanguage ? languageDisplayName(baseLanguage(appLanguage), t.locale) : null;
+  const workspaceLanguage = props.provider ? props.models.find(
+    (model) => model.provider === props.provider && model.workspaceVoiceSettings?.language
+  )?.workspaceVoiceSettings?.language : void 0;
+  const workspaceLanguageName = workspaceLanguage ? languageDisplayName(baseLanguage(workspaceLanguage), t.locale) : null;
+  const automaticLanguageName = workspaceLanguageName ?? appLanguageName;
+  const body = languagePageOpen && props.provider ? /* @__PURE__ */ jsxs2("div", { "data-testid": "realtime-language-picker", children: [
+    /* @__PURE__ */ jsx2(
+      PickerBackHeader,
+      {
+        label: t("realtime.realtimeControl.voiceLanguage"),
+        icon: /* @__PURE__ */ jsx2(LanguagesIcon, { className: "size-4 text-og-fg-muted", "aria-hidden": true }),
+        onBack: () => setLanguagePage({ provider: props.provider, open: false })
+      }
+    ),
+    /* @__PURE__ */ jsx2("p", { className: "px-2.5 pb-1.5 text-og-sm text-og-fg-muted", children: t("realtime.realtimeControl.voiceLanguageDescription") }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsx2(
+        PickerNavRow,
+        {
+          label: t("realtime.realtimeControl.voiceLanguageAutomatic"),
+          hint: workspaceLanguageName ? t("realtime.realtimeControl.voiceLanguageWorkspaceLanguage", {
+            language: workspaceLanguageName
+          }) : appLanguageName ? t("realtime.realtimeControl.voiceLanguageAppLanguage", {
+            language: appLanguageName
+          }) : void 0,
+          disabled: props.disabled,
+          active: languagePreference === null,
+          showChevron: false,
+          trailing: languagePreference === null ? /* @__PURE__ */ jsx2(CheckIcon, { className: MENU_CHECK_CLASS, "aria-hidden": true }) : void 0,
+          testId: "realtime-language-choice-automatic",
+          onClick: () => setLanguage(null)
+        }
+      ),
+      sortedLanguages(providerLanguages ?? [], t.locale).map(({ code, name, nativeName }) => {
+        const selected = languagePreference === code;
+        return /* @__PURE__ */ jsx2(
+          PickerNavRow,
+          {
+            label: name,
+            hint: nativeName !== name ? nativeName : void 0,
+            disabled: props.disabled,
+            active: selected,
+            showChevron: false,
+            trailing: selected ? /* @__PURE__ */ jsx2(CheckIcon, { className: MENU_CHECK_CLASS, "aria-hidden": true }) : void 0,
+            testId: `realtime-language-choice-${code}`,
+            onClick: () => setLanguage(code)
+          },
+          code
+        );
+      })
+    ] })
+  ] }) : props.provider ? /* @__PURE__ */ jsxs2("div", { "data-testid": "realtime-model-picker-models", children: [
+    /* @__PURE__ */ jsx2(
+      PickerBackHeader,
+      {
+        label: realtimeProviderLabel(t, props.provider),
+        icon: /* @__PURE__ */ jsx2(
+          BillingClassMark,
+          {
+            billingClass: REALTIME_PROVIDER_META(t)[props.provider].billingClass,
+            "aria-label": ""
+          }
+        ),
+        onBack: () => changeProvider(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: regionRestrictedText(t, model.unavailableCode) ?? model.unavailableReason ?? (model.recommended ? t("realtime.realtimeControl.recommendedDescription", {
+            description: model.description
+          }) : model.description),
+          disabled: props.disabled || !model.available,
+          title: regionRestrictedText(t, model.unavailableCode) ?? 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
+      );
+    }) }),
+    providerLanguages ? /* @__PURE__ */ jsx2("div", { className: "mt-1.5 border-t border-og-border pt-1.5", children: /* @__PURE__ */ jsx2(
+      PickerNavRow,
+      {
+        label: t("realtime.realtimeControl.voiceLanguage"),
+        hint: languagePreference !== null ? languageDisplayName(languagePreference, t.locale) : automaticLanguageName ? t("realtime.realtimeControl.voiceLanguageAutomaticValue", {
+          language: automaticLanguageName
+        }) : t("realtime.realtimeControl.voiceLanguageAutomatic"),
+        icon: /* @__PURE__ */ jsx2(LanguagesIcon, { className: "size-4 shrink-0 text-og-fg-muted", "aria-hidden": true }),
+        disabled: props.disabled,
+        testId: "realtime-language-row",
+        onClick: () => setLanguagePage({ provider: props.provider, open: true })
+      }
+    ) }) : null
+  ] }) : /* @__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(t)[provider];
+    return /* @__PURE__ */ jsx2(
+      PickerNavRow,
+      {
+        label: realtimeProviderLabel(t, provider),
+        hint: meta.hint,
+        icon: /* @__PURE__ */ jsx2(BillingClassMark, { billingClass: meta.billingClass, "aria-label": "" }),
+        active: props.selectedModel.provider === provider,
+        testId: `realtime-model-provider-${meta.key}`,
+        onClick: () => changeProvider(provider, 1)
+      },
+      provider
+    );
+  }) });
+  return /* @__PURE__ */ jsx2("div", { className: "relative overflow-hidden", "data-testid": "realtime-model-picker-menu", children: /* @__PURE__ */ jsx2(PickerAnimatedPage, { pageKey, direction, children: body }) });
+}
+function baseLanguage(tag) {
+  return tag.split(/[-_]/)[0] ?? tag;
+}
+function languageDisplayName(code, locale) {
+  try {
+    return new Intl.DisplayNames(locale ? [locale] : void 0, { type: "language" }).of(code) ?? code;
+  } catch {
+    return code;
+  }
+}
+function sortedLanguages(codes, locale) {
+  return codes.map((code) => ({
+    code,
+    name: languageDisplayName(code, locale),
+    nativeName: languageDisplayName(code, code)
+  })).sort((left, right) => left.name.localeCompare(right.name, locale));
+}
+function RealtimeDiagnosticsMenu({ snapshot }) {
+  const t = useOpenGeniText();
+  const bridge = snapshot.bridge;
+  const rows = [
+    ["controller", snapshot.status],
+    ["microphone", snapshot.microphone],
+    [t("realtime.realtimeControl.microphoneMuted"), String(snapshot.inputMuted)],
+    ["audio", snapshot.audibleOutput],
+    [t("realtime.realtimeControl.audioMuted"), String(snapshot.outputMuted)],
+    ["generation", String(snapshot.connectionGeneration)],
+    [t("realtime.realtimeControl.reconnectAttempt"), String(snapshot.reconnectAttempt)],
+    ["mode", snapshot.mode?.state ?? "none"],
+    [
+      t("realtime.realtimeControl.modeVersion"),
+      snapshot.mode ? String(snapshot.mode.version) : "\u2014"
+    ],
+    [
+      t("realtime.realtimeControl.connectionEpoch"),
+      snapshot.mode ? String(snapshot.mode.connectionEpoch) : "\u2014"
+    ],
+    [
+      t("realtime.realtimeControl.providerStarted"),
+      bridge ? String(bridge.providerStarted) : "false"
+    ],
+    [t("realtime.realtimeControl.providerSpeaking"), bridge ? String(bridge.speaking) : "false"],
+    ["delegation", bridge?.activeDelegationId ? "active" : "none"],
+    [
+      t("realtime.realtimeControl.pendingDurableEvents"),
+      bridge ? String(bridge.pendingInbound) : "0"
+    ],
+    [t("realtime.realtimeControl.pendingBytes"), bridge ? String(bridge.pendingInboundBytes) : "0"],
+    [t("realtime.realtimeControl.clientAck"), bridge?.clientAckThroughSequence?.toString() ?? "\u2014"],
+    [
+      t("realtime.realtimeControl.ignoredProviderEvents"),
+      bridge ? String(bridge.ignoredEventCount) : "0"
+    ],
+    [t("realtime.realtimeControl.lastIgnoredEvent"), bridge?.lastIgnoredEventType ?? "none"],
+    [t("realtime.realtimeControl.bridgeError"), 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: t("realtime.realtimeControl.realtimeDiagnostics") }),
+      /* @__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(t, snapshot, modelAvailable, canStart, admissionBlocker, unavailableCode = null, loadState = "ready", microphone = "unknown") {
+  if (snapshot.audibleOutput === "blocked" && !snapshot.outputMuted) {
+    return {
+      phase: "blocked",
+      label: t("realtime.realtimeControl.audioOutputBlocked"),
+      detail: t("realtime.realtimeControl.resumeAudioToHearThe")
+    };
+  }
+  switch (snapshot.status) {
+    case "starting":
+      return {
+        phase: "connecting",
+        label: t("realtime.realtimeControl.connecting"),
+        detail: t("realtime.realtimeControl.preparingYourMicrophoneAndLive")
+      };
+    case "active":
+      return snapshot.bridge?.speaking ? {
+        phase: "speaking",
+        label: t("realtime.realtimeControl.speaking"),
+        detail: t("realtime.realtimeControl.interruptNaturallyWheneverYouWant")
+      } : {
+        phase: "listening",
+        label: t("realtime.realtimeControl.listening"),
+        detail: t("realtime.realtimeControl.voiceAndTypedMessagesShare")
+      };
+    case "stopping":
+      return {
+        phase: "stopping",
+        label: t("realtime.realtimeControl.endingVoice"),
+        detail: t("realtime.realtimeControl.savingTheRemainingConversationContext")
+      };
+    case "recovering":
+      return {
+        phase: "reconnecting",
+        label: t("realtime.realtimeControl.reconnecting"),
+        detail: snapshot.error ?? t("realtime.realtimeControl.keepingThisVoiceConversationConnected")
+      };
+    case "lost_owner":
+      return {
+        phase: "elsewhere",
+        label: t("realtime.realtimeControl.voiceActiveElsewhere"),
+        detail: t("realtime.realtimeControl.returnToTheBrowserThat")
+      };
+    case "error":
+      if (snapshot.refusal) {
+        return {
+          phase: "unavailable",
+          label: realtimeRefusalLabel(t, snapshot.refusal.code) ?? t("realtime.realtimeControl.voiceUnavailable"),
+          detail: snapshot.refusal.message
+        };
+      }
+      return {
+        phase: "error",
+        label: t("realtime.realtimeControl.voiceUnavailable"),
+        detail: snapshot.error ?? t("realtime.realtimeControl.theConnectionCouldNotBe")
+      };
+    case "idle":
+      if (microphone !== "unknown") {
+        return {
+          phase: "unavailable",
+          label: t("realtime.realtimeControl.voiceUnavailable"),
+          detail: microphone === "blocked" ? t("realtime.realtimeControl.microphoneCantBeUsedHere") : t("composerTranscriptionControl.microphoneAccessIsBlockedAllow")
+        };
+      }
+      if (loadState === "loading" && (!modelAvailable || !canStart && admissionBlocker)) {
+        return {
+          phase: "checking",
+          label: t("realtime.realtimeControl.checkingVoice"),
+          detail: t("realtime.realtimeControl.findingTheVoiceModelsYou")
+        };
+      }
+      if (loadState === "failed" && !modelAvailable) {
+        return {
+          phase: "unavailable",
+          label: t("realtime.realtimeControl.voiceUnavailable"),
+          detail: t("realtime.realtimeControl.voiceCouldNotLoad")
+        };
+      }
+      if (!modelAvailable) {
+        const refusal = realtimeRefusalLabel(t, unavailableCode);
+        const detail = admissionBlocker ?? t("realtime.realtimeControl.chooseAnotherVoiceModel");
+        return {
+          phase: "unavailable",
+          label: refusal ?? t("realtime.realtimeControl.voiceModelUnavailable"),
+          // Say it once: "Not supported in EU" needs no second line.
+          detail: refusal !== null && (detail === refusal || isRegionRestricted(detail)) ? "" : detail
+        };
+      }
+      if (!canStart && admissionBlocker) {
+        return {
+          phase: "unavailable",
+          label: t("realtime.realtimeControl.voiceUnavailable"),
+          detail: admissionBlocker
+        };
+      }
+      return {
+        phase: "idle",
+        label: t("realtime.realtimeControl.startVoice"),
+        detail: t("realtime.realtimeControl.talkLiveWithTheAgent")
+      };
+  }
+}
+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" || props.phase === "checking" ? "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-NRTE7DNV.js.map