@opengeni/react 0.57.0 → 1.0.2-canary.37191796234001

package/dist/realtime.js

@@ -3,15 +3,22 @@ import {
   PickerAnimatedPage,
   PickerBackHeader,
   PickerNavRow
-} from "./chunk-MKPIAGVL.js";
-import "./chunk-XBZWOM2K.js";
+} from "./chunk-CR7U7HAR.js";
+import {
+  MENU_CHECK_CLASS,
+  MENU_CHEVRON_CLASS,
+  MENU_ITEM_CLASS,
+  MENU_SEPARATOR_CLASS,
+  MENU_SURFACE_CLASS
+} from "./chunk-K3HQAKQX.js";
+import "./chunk-XUW2UWQM.js";
 import {
   usePortalTokenSource,
   usePortalTokenStyle
 } from "./chunk-VZTQ73XT.js";
 import {
   useEmbeddedRealtimeSession
-} from "./chunk-C5ZPSSS5.js";
+} from "./chunk-NEXLLTP4.js";
 import {
   cn
 } from "./chunk-22KP6LR5.js";
@@ -48,6 +55,7 @@ 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);
@@ -88,7 +96,9 @@ function DropdownMenuContent({
       "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 rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "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 },
@@ -108,10 +118,7 @@ function DropdownMenuItem({
       "data-slot": "dropdown-menu-item",
       "data-inset": inset,
       "data-variant": variant,
-      className: cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-og-menu outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
-        className
-      ),
+      className: cn(MENU_ITEM_CLASS, "data-[inset]:pl-9", className),
       ...props
     }
   );
@@ -124,7 +131,7 @@ function DropdownMenuSeparator({
     DropdownMenuPrimitive.Separator,
     {
       "data-slot": "dropdown-menu-separator",
-      className: cn("-mx-1 my-1 h-px bg-border", className),
+      className: cn(MENU_SEPARATOR_CLASS, className),
       ...props
     }
   );
@@ -143,14 +150,11 @@ function DropdownMenuSubTrigger({
     {
       "data-slot": "dropdown-menu-sub-trigger",
       "data-inset": inset,
-      className: cn(
-        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-og-menu outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-        className
-      ),
+      className: cn(MENU_ITEM_CLASS, "data-[inset]:pl-9", className),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })
+        /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true", className: cn(MENU_CHEVRON_CLASS, "ml-auto") })
       ]
     }
   );
@@ -167,7 +171,9 @@ function DropdownMenuSubContent({
     {
       "data-slot": "dropdown-menu-sub-content",
       className: cn(
-        "og-root z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "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 },
@@ -206,6 +212,109 @@ var REALTIME_PROVIDER_META = {
   "Your Gateway": { billingClass: "byok", hint: "Billed to your AI Gateway" }
 };
 var REALTIME_MODEL_STORAGE_PREFIX = "opengeni:realtime-model";
+var REALTIME_MODEL_CATALOG_CACHE_TTL_MS = 6e4;
+var REALTIME_MODEL_CATALOG_CACHE_MAX_WORKSPACES = 64;
+var realtimeModelCatalogCache = /* @__PURE__ */ new WeakMap();
+function realtimeModelFallback(codexConnected) {
+  return [
+    {
+      ...CODEX_LIVE_MODEL,
+      available: codexConnected,
+      unavailableReason: codexConnected ? null : CODEX_LIVE_MODEL.unavailableReason
+    }
+  ];
+}
+function realtimeModelCatalogCacheFor(client) {
+  const existing = realtimeModelCatalogCache.get(client);
+  if (existing) return existing;
+  const created = /* @__PURE__ */ new Map();
+  realtimeModelCatalogCache.set(client, created);
+  return created;
+}
+function readCachedRealtimeModelCatalog(client, workspaceId, now = Date.now()) {
+  const cache = realtimeModelCatalogCache.get(client);
+  const entry = cache?.get(workspaceId);
+  if (!entry || entry.state === "loading") return null;
+  if (entry.expiresAt > now) return entry.models;
+  cache?.delete(workspaceId);
+  return null;
+}
+function pruneRealtimeModelCatalogCache(cache, now) {
+  for (const [workspaceId, entry] of cache) {
+    if (entry.state === "ready" && entry.expiresAt <= now) cache.delete(workspaceId);
+  }
+  while (cache.size >= REALTIME_MODEL_CATALOG_CACHE_MAX_WORKSPACES) {
+    const oldestWorkspaceId = cache.keys().next().value;
+    if (oldestWorkspaceId === void 0) return;
+    cache.delete(oldestWorkspaceId);
+  }
+}
+function loadRealtimeModelCatalog(client, workspaceId, signal) {
+  const load = client.getWorkspaceRealtimeModelCatalog;
+  if (!load) return null;
+  if (signal?.aborted) {
+    return Promise.reject(signal.reason ?? new DOMException("Request aborted", "AbortError"));
+  }
+  const now = Date.now();
+  const cache = realtimeModelCatalogCacheFor(client);
+  const entry = cache.get(workspaceId);
+  if (entry?.state === "loading" && !entry.controller.signal.aborted) {
+    return consumeRealtimeModelCatalog(entry, signal);
+  }
+  if (entry?.state === "ready" && entry.expiresAt > now) return Promise.resolve(entry.models);
+  if (entry) cache.delete(workspaceId);
+  pruneRealtimeModelCatalogCache(cache, now);
+  const controller = new AbortController();
+  const promise = load.call(client, workspaceId, { signal: controller.signal }).then((response) => response.models.map(toRealtimeModelOption)).then((models) => {
+    const current = cache.get(workspaceId);
+    if (current?.state === "loading" && current.promise === promise) {
+      cache.delete(workspaceId);
+      cache.set(workspaceId, {
+        state: "ready",
+        models,
+        expiresAt: Date.now() + REALTIME_MODEL_CATALOG_CACHE_TTL_MS
+      });
+    }
+    return models;
+  }).catch((error) => {
+    const current = cache.get(workspaceId);
+    if (current?.state === "loading" && current.promise === promise) cache.delete(workspaceId);
+    throw error;
+  });
+  const loading = {
+    state: "loading",
+    promise,
+    controller,
+    consumers: 0
+  };
+  cache.set(workspaceId, loading);
+  return consumeRealtimeModelCatalog(loading, signal);
+}
+function consumeRealtimeModelCatalog(entry, signal) {
+  entry.consumers += 1;
+  return new Promise((resolve, reject) => {
+    let released = false;
+    const release = (abandoned) => {
+      if (released) return;
+      released = true;
+      entry.consumers = Math.max(0, entry.consumers - 1);
+      if (abandoned && entry.consumers === 0) {
+        entry.controller.abort(
+          signal?.reason ?? new DOMException("Request abandoned", "AbortError")
+        );
+      }
+    };
+    const onAbort = () => {
+      release(true);
+      reject(signal?.reason ?? new DOMException("Request aborted", "AbortError"));
+    };
+    signal?.addEventListener("abort", onAbort, { once: true });
+    void entry.promise.then(resolve, reject).finally(() => {
+      signal?.removeEventListener("abort", onAbort);
+      release(false);
+    });
+  });
+}
 function codexRealtimeAdmissionAllowed(input) {
   return codexRealtimeAdmissionBlocker(input) === null;
 }
@@ -226,6 +335,8 @@ function useSessionRealtime(options) {
   const audioRef = useRef(null);
   const controllerRef = useRef(null);
   const controllerModelRef = useRef(null);
+  const modelContextProviderRef = useRef(options.getModelContext);
+  modelContextProviderRef.current = options.getModelContext;
   const [snapshot, setSnapshot] = useState(() => ({
     status: hasStoredSessionRealtimeOwnerProof({
       workspaceId,
@@ -252,7 +363,7 @@ function useSessionRealtime(options) {
   const eventsReadyRef = useRef(options.eventsReady);
   lifecycleRef.current = lifecycle;
   eventsReadyRef.current = options.eventsReady;
-  const lifecycleActive = lifecycle?.state === "active";
+  const lifecycleActive = sessionRealtimeLifecycleIsActive(lifecycle);
   useEffect(() => {
     let disposed = false;
     let controller = null;
@@ -265,7 +376,8 @@ function useSessionRealtime(options) {
         workspaceId,
         sessionId: options.sessionId,
         ...audioRef.current ? { remoteAudio: audioRef.current } : {},
-        model
+        model,
+        getModelContext: () => modelContextProviderRef.current?.()
       });
       controllerRef.current = controller;
       controllerModelRef.current = model;
@@ -356,13 +468,19 @@ function useSessionRealtime(options) {
     setOutputMuted
   };
 }
+function sessionRealtimeLifecycleIsActive(lifecycle) {
+  if (lifecycle?.state !== "active") return false;
+  const leaseExpiresAt = Date.parse(lifecycle.leaseExpiresAt);
+  return !Number.isFinite(leaseExpiresAt) || leaseExpiresAt > Date.now();
+}
 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: lifecycle?.state === "active" ? lifecycle.model : null
+    activeModel: lifecycleActive && lifecycle?.state === "active" ? lifecycle.model : null
   });
   const selectedModel = selection.selectedModel;
   const realtime = useSessionRealtime({
@@ -383,7 +501,7 @@ function SessionRealtimeControl(props) {
   }, [onVoiceActiveChange, voiceActive]);
   useEffect(() => {
     const pending = autostartModelRef.current;
-    if (!pending || autostartStartedRef.current || lifecycle?.state === "active") return;
+    if (!pending || autostartStartedRef.current || lifecycleActive) return;
     const available = models.some((model) => model.id === pending && model.available);
     if (!available) return;
     if (selectedRealtimeModel.id !== pending) {
@@ -400,7 +518,7 @@ function SessionRealtimeControl(props) {
     });
   }, [
     canStart,
-    lifecycle?.state,
+    lifecycleActive,
     models,
     props.sessionId,
     props.workspaceId,
@@ -418,6 +536,7 @@ function SessionRealtimeControl(props) {
       modelAvailable: selectedModel.available,
       menuSide: "top",
       modelMenu: props.modelMenu ?? "split",
+      showDiagnostics: props.showDiagnostics,
       audioRef: realtime.audioRef,
       selectedModel,
       models: selection.models,
@@ -437,31 +556,51 @@ function useRealtimeModelSelection(options) {
     workspaceId: options.workspaceId
   });
   const activeModel = options.activeModel;
-  const [catalog, setCatalog] = useState(() => [
-    {
-      ...CODEX_LIVE_MODEL,
-      available: options.codexConnected,
-      unavailableReason: options.codexConnected ? null : CODEX_LIVE_MODEL.unavailableReason
-    }
-  ]);
-  const [selectedModelId, setSelectedModelId] = useState(
-    () => readRealtimeModelPreference(workspaceId) ?? CODEX_LIVE_MODEL.id
+  const initialCachedCatalog = readCachedRealtimeModelCatalog(client, workspaceId);
+  const [catalog, setCatalog] = useState(
+    () => initialCachedCatalog ?? realtimeModelFallback(options.codexConnected)
   );
+  const catalogScopeRef = useRef({
+    client,
+    workspaceId,
+    source: initialCachedCatalog ? "cache" : "fallback"
+  });
+  const [selectedModelId, setSelectedModelId] = useState(() => {
+    const preferred = readRealtimeModelPreference(workspaceId) ?? CODEX_LIVE_MODEL.id;
+    if (!initialCachedCatalog) return preferred;
+    if (initialCachedCatalog.some((model) => model.id === preferred && model.available)) {
+      return preferred;
+    }
+    return initialCachedCatalog.find((model) => model.available)?.id ?? CODEX_LIVE_MODEL.id;
+  });
   useEffect(() => {
     let disposed = false;
-    const load = client.getWorkspaceRealtimeModelCatalog;
-    if (!load) return;
-    void load.call(client, workspaceId).then((response) => {
-      if (disposed) return;
-      const models = response.models.map(toRealtimeModelOption);
+    const requestAbort = new AbortController();
+    const applyCatalog = (models) => {
+      catalogScopeRef.current = { client, workspaceId, source: "cache" };
       setCatalog(models);
       setSelectedModelId((current) => {
         if (models.some((model) => model.id === current && model.available)) return current;
         return models.find((model) => model.available)?.id ?? CODEX_LIVE_MODEL.id;
       });
+    };
+    const cached = readCachedRealtimeModelCatalog(client, workspaceId);
+    if (cached) {
+      const scope = catalogScopeRef.current;
+      if (scope.client !== client || scope.workspaceId !== workspaceId || scope.source !== "cache") {
+        applyCatalog(cached);
+      }
+      return;
+    }
+    const loading = loadRealtimeModelCatalog(client, workspaceId, requestAbort.signal);
+    if (!loading) return;
+    void loading.then((models) => {
+      if (disposed) return;
+      applyCatalog(models);
     }).catch(() => void 0);
     return () => {
       disposed = true;
+      requestAbort.abort();
     };
   }, [client, workspaceId]);
   useEffect(() => {
@@ -498,16 +637,31 @@ var IDLE_REALTIME_SNAPSHOT = {
   error: null
 };
 function NewSessionRealtimeControl(props) {
-  const internalSelection = useRealtimeModelSelection({
+  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
   });
-  const selection = props.models && props.selectedModel && props.onSelectModel ? {
-    models: props.models,
-    selectedModel: props.selectedModel,
-    selectModel: props.onSelectModel
-  } : internalSelection;
+  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);
@@ -576,7 +730,7 @@ function RealtimeVoiceControl(props) {
   const mainDisabled = props.snapshot.status === "stopping" || props.snapshot.status === "lost_owner" || !modeOwned && !props.canStart || props.snapshot.status === "starting" && !modeOwned;
   const mainLabel = audioBlocked ? "Resume voice audio" : retryConnection ? "Retry voice connection" : modeOwned ? "End voice conversation" : `Start voice with ${selectedModel.label}`;
   const runMainAction = audioBlocked ? props.onRetryAudibleOutput : retryConnection ? props.onRetry : modeOwned ? props.onStop : props.onStart;
-  const diagnosticsVisible = props.showDiagnostics ?? import.meta.env.DEV;
+  const diagnosticsVisible = props.showDiagnostics ?? false;
   const modelMenu = props.modelMenu ?? "split";
   const showAttachedModelMenu = modelMenu === "split" || modelMenu === "split-desktop";
   const desktopOnlyModelMenu = modelMenu === "split-desktop";
@@ -732,7 +886,7 @@ function RealtimeVoiceControl(props) {
                 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 rounded-xl border-border bg-surface p-1.5 shadow-xl",
+                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(
@@ -753,8 +907,9 @@ function RealtimeVoiceControl(props) {
                       }
                     }
                   ) }),
-                  status.phase !== "idle" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-                    /* @__PURE__ */ jsx2(DropdownMenuSeparator, { className: "mx-1 bg-og-border" }),
+                  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(
@@ -772,7 +927,6 @@ function RealtimeVoiceControl(props) {
                   audioBlocked ? /* @__PURE__ */ jsxs2(
                     DropdownMenuItem,
                     {
-                      className: "rounded-og-md",
                       onSelect: () => void props.onRetryAudibleOutput().catch(() => void 0),
                       children: [
                         /* @__PURE__ */ jsx2(Volume2Icon, {}),
@@ -780,22 +934,14 @@ function RealtimeVoiceControl(props) {
                       ]
                     }
                   ) : null,
-                  retryConnection ? /* @__PURE__ */ jsxs2(
-                    DropdownMenuItem,
-                    {
-                      className: "rounded-og-md",
-                      onSelect: () => void props.onRetry().catch(() => void 0),
-                      children: [
-                        /* @__PURE__ */ jsx2(RotateCcwIcon, {}),
-                        "Retry connection"
-                      ]
-                    }
-                  ) : 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",
-                      className: "rounded-og-md",
                       disabled: props.snapshot.status === "stopping",
                       onSelect: () => void props.onStop().catch(() => void 0),
                       children: [
@@ -824,28 +970,28 @@ 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 shrink-0 items-start gap-1 px-2 pt-1 pb-1.5", 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__ */ jsxs2("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx2("div", { className: "text-og-menu font-medium text-og-fg", children: "Voice model" }),
-        /* @__PURE__ */ jsx2("p", { className: "mt-0.5 text-og-control text-og-fg-subtle", children: "Used when you start a voice conversation." })
-      ] })
+      /* @__PURE__ */ jsx2("div", { className: "min-w-0 flex-1 text-og-menu font-medium text-og-fg", children: "Voice model" })
     ] }),
-    /* @__PURE__ */ jsx2("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-1.5 pb-1.5", children: /* @__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
-      }
-    ) })
+    /* @__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) {
@@ -911,7 +1057,7 @@ function RealtimeModelPickerMenu(props) {
           title: model.unavailableReason ?? model.description,
           active: selected,
           showChevron: false,
-          trailing: selected ? /* @__PURE__ */ jsx2(CheckIcon, { className: "size-3.5", "aria-hidden": true }) : void 0,
+          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)
         },
@@ -960,10 +1106,10 @@ function RealtimeDiagnosticsMenu({ snapshot }) {
     ["diagnostic", snapshot.diagnostic?.kind ?? "none"]
   ];
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx2(DropdownMenuSeparator, { className: "mx-1 bg-og-border" }),
+    /* @__PURE__ */ jsx2(DropdownMenuSeparator, {}),
     /* @__PURE__ */ jsxs2(DropdownMenuSub, { children: [
-      /* @__PURE__ */ jsx2(DropdownMenuSubTrigger, { className: "rounded-og-md text-og-fg-muted", children: "Realtime diagnostics" }),
-      /* @__PURE__ */ jsx2(DropdownMenuSubContent, { className: "max-h-80 w-72 overflow-y-auto rounded-og-lg border-og-border bg-og-surface-1 p-1.5 text-og-fg shadow-og-lg", children: rows.map(([label, value]) => /* @__PURE__ */ jsxs2(
+      /* @__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,
@@ -1137,7 +1283,7 @@ function RealtimeStatusDot(props) {
 }
 function voiceButtonTone(phase) {
   if (phase === "listening" || phase === "speaking") {
-    return "border border-og-accent/45 bg-og-accent text-og-accent-fg shadow-og-sm hover:bg-og-accent-strong";
+    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";
@@ -1149,7 +1295,7 @@ function voiceButtonTone(phase) {
 }
 function voiceChevronTone(phase) {
   if (phase === "listening" || phase === "speaking") {
-    return "border border-l-0 border-og-accent/45 bg-og-accent text-og-accent-fg hover:bg-og-accent-strong";
+    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";