@opengeni/react 0.42.1 → 0.44.1

package/dist/model-policy.d.ts

@@ -3,6 +3,8 @@ export type PickerBillingClass = "opengeni_credits" | "codex_subscription" | "by
 export type PickerModelRow<TCatalog extends ClientModel = WorkspaceModelCatalogModel> = {
     id: string;
     label: string;
+    /** Catalog-curated compact label for dense UI; fall back to `label` when absent. */
+    shortLabel?: string | undefined;
     billingClass: PickerBillingClass;
     billingClassLabel: string;
     selectable: boolean;

package/dist/model-policy.js

@@ -15,7 +15,7 @@ import {
   projectPickerRows,
   runnableLatencyModesForModel,
   sortPickerRows
-} from "./chunk-SJKT4TKW.js";
+} from "./chunk-23EJ676W.js";
 export {
   advancedSourceSummary,
   availabilityReasonLabel,

package/dist/realtime/realtime-control.d.ts

@@ -1,6 +1,6 @@
 import { type EffectiveSessionControl, type SessionEvent, type SessionStatus } from "@opengeni/sdk";
 import { type SessionRealtimeClientLike, type SessionRealtimeController, type SessionRealtimeControllerSnapshot, type CreateSessionRealtimeControllerOptions, type SessionRealtimeModel } from "@opengeni/sdk/realtime";
-import { type RefObject } from "react";
+import { type ReactNode, type RefObject } from "react";
 import type { EmbeddedRealtimeSessionClientLike } from "../client";
 export type RealtimeModelOption = {
     id: SessionRealtimeModel;
@@ -65,6 +65,8 @@ export declare function SessionRealtimeControl(props: {
     codexConnected: boolean;
     realtimeAutostartModel?: SessionRealtimeModel | undefined;
     onRealtimeAutostartConsumed?: (() => void) | undefined;
+    /** Host hides dictate (and can choreograph layout) while realtime voice is live. */
+    onVoiceActiveChange?: ((active: boolean) => void) | undefined;
     /** Deterministic browser-test/demo seam. Production hosts should use the SDK default. */
     controllerFactory?: SessionRealtimeControllerFactory | undefined;
 }): import("react/jsx-runtime").JSX.Element;
@@ -85,6 +87,16 @@ export declare function NewSessionRealtimeControl(props: {
     disabled?: boolean | undefined;
     disabledReason?: string | null | undefined;
     onStart: (model: SessionRealtimeModel) => Promise<boolean>;
+    /** Parent-owned selection (e.g. shared with the mobile “+” voice-model panel). */
+    models?: readonly RealtimeModelOption[] | undefined;
+    selectedModel?: RealtimeModelOption | undefined;
+    onSelectModel?: ((modelId: string) => void) | undefined;
+    /**
+     * `split` attaches the model chevron at every breakpoint (public default).
+     * `split-desktop` hides it below `sm` when the host owns mobile selection (e.g. “+”).
+     * `none` never attaches a model menu to the bar button.
+     */
+    modelMenu?: "split" | "split-desktop" | "none" | undefined;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function RealtimeVoiceControl(props: {
     snapshot: SessionRealtimeControllerSnapshot;
@@ -94,7 +106,15 @@ export declare function RealtimeVoiceControl(props: {
     selectionDisabled?: boolean | undefined;
     /** Prefer `bottom` on home/new-session; `top` for the docked session composer. */
     menuSide?: "top" | "bottom" | undefined;
+    /**
+     * `split` = start + model chevron at every breakpoint (public SDK default).
+     * `split-desktop` = chevron from `sm` up; below that the host owns selection.
+     * `none` = start button only.
+     */
+    modelMenu?: "split" | "split-desktop" | "none" | undefined;
     showDiagnostics?: boolean;
+    /** Extra classes on the in-bar mute cluster (e.g. `max-sm:hidden` when mutes live in “+”). */
+    muteControlsClassName?: string | undefined;
     audioRef: RefObject<HTMLAudioElement | null>;
     selectedModel?: RealtimeModelOption | undefined;
     models?: readonly RealtimeModelOption[] | undefined;
@@ -106,6 +126,14 @@ export declare function RealtimeVoiceControl(props: {
     onSetInputMuted: (muted: boolean) => void;
     onSetOutputMuted: (muted: boolean) => void;
 }): import("react/jsx-runtime").JSX.Element;
+/** Drill-in body for the mobile composer “+” menu — same catalog as the desktop chevron. */
+export declare function RealtimeVoiceModelPanel(props: {
+    models: readonly RealtimeModelOption[];
+    selectedModel: RealtimeModelOption;
+    disabled?: boolean | undefined;
+    leading?: ReactNode | undefined;
+    onSelect: (modelId: SessionRealtimeModel) => void;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function RealtimeModelPickerMenu(props: {
     models: readonly RealtimeModelOption[];
     selectedModel: RealtimeModelOption;

package/dist/realtime.d.ts

@@ -5,7 +5,7 @@
  * base `@opengeni/react` entry remains SSR/browser safe and does not eagerly
  * load microphone, WebRTC, Gateway, or realtime UI code.
  */
-export { CodexRealtimeControl, NewSessionRealtimeControl, RealtimeModelPickerMenu, RealtimeVoiceControl, SessionCodexRealtimeControl, SessionRealtimeControl, codexRealtimeAdmissionAllowed, codexRealtimeAdmissionBlocker, useRealtimeModelSelection, useSessionCodexRealtime, useSessionRealtime, useWorkspaceRealtimeModelSelection, } from "./realtime/realtime-control";
+export { CodexRealtimeControl, NewSessionRealtimeControl, RealtimeModelPickerMenu, RealtimeVoiceControl, RealtimeVoiceModelPanel, SessionCodexRealtimeControl, SessionRealtimeControl, codexRealtimeAdmissionAllowed, codexRealtimeAdmissionBlocker, useRealtimeModelSelection, useSessionCodexRealtime, useSessionRealtime, useWorkspaceRealtimeModelSelection, } from "./realtime/realtime-control";
 export type { RealtimeModelOption, SessionRealtimeControllerFactory, } from "./realtime/realtime-control";
 export type { EmbeddedRealtimeSessionClientLike } from "./client";
 export type { EmbeddedRealtimeSessionClientOverride } from "./session-context";

package/dist/realtime.js

@@ -3,11 +3,11 @@ import {
   PickerAnimatedPage,
   PickerBackHeader,
   PickerNavRow
-} from "./chunk-WZT5G5OR.js";
+} from "./chunk-U6K24XQD.js";
 import {
   useEmbeddedRealtimeSession
 } from "./chunk-EKZH6IDG.js";
-import "./chunk-SJKT4TKW.js";
+import "./chunk-23EJ676W.js";
 import {
   cn
 } from "./chunk-TK7G6XLT.js";
@@ -31,7 +31,13 @@ import {
   VolumeXIcon
 } from "lucide-react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 
 // src/realtime/dropdown-menu.tsx
 import { ChevronRightIcon } from "lucide-react";
@@ -324,6 +330,11 @@ function SessionRealtimeControl(props) {
   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(() => {
     const pending = autostartModelRef.current;
     if (!pending || autostartStartedRef.current || lifecycle?.state === "active") return;
@@ -440,11 +451,16 @@ var IDLE_REALTIME_SNAPSHOT = {
   error: null
 };
 function NewSessionRealtimeControl(props) {
-  const selection = useRealtimeModelSelection({
+  const internalSelection = 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;
   const audioRef = useRef(null);
   const [starting, setStarting] = useState(false);
   const [error, setError] = useState(null);
@@ -477,6 +493,7 @@ function NewSessionRealtimeControl(props) {
       modelAvailable: selection.selectedModel.available,
       selectionDisabled: starting,
       menuSide: "bottom",
+      modelMenu: props.modelMenu ?? "split",
       showDiagnostics: false,
       audioRef,
       selectedModel: selection.selectedModel,
@@ -513,6 +530,9 @@ function RealtimeVoiceControl(props) {
   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 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
@@ -524,169 +544,217 @@ function RealtimeVoiceControl(props) {
   return /* @__PURE__ */ jsxs2(
     "div",
     {
+      role: "group",
       "aria-label": "Realtime voice",
       "data-picker-side": props.menuSide ?? "top",
       className: "inline-flex shrink-0 items-center",
       children: [
         /* @__PURE__ */ jsx2("audio", { ref: props.audioRef, autoPlay: true, className: "hidden", "aria-hidden": "true" }),
         /* @__PURE__ */ jsx2(RealtimeComposerGlow, { phase: status.phase, reduceMotion: reduceMotion === true }),
-        /* @__PURE__ */ jsx2(AnimatePresence, { initial: false, children: modeOwned ? /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsx2(AnimatePresence, { initial: false, children: modeOwned ? /* @__PURE__ */ jsx2(
           motion.div,
           {
             "data-testid": "realtime-mute-controls",
-            initial: reduceMotion ? false : { opacity: 0, width: 0, marginRight: 0 },
-            animate: { opacity: 1, width: "auto", marginRight: 4 },
-            ...reduceMotion ? {} : { exit: { opacity: 0, width: 0, marginRight: 0 } },
-            transition: { duration: reduceMotion ? 0 : 0.18, ease: [0.2, 0.8, 0.2, 1] },
-            className: "inline-flex shrink-0 items-center gap-0.5 overflow-hidden",
-            children: [
-              /* @__PURE__ */ jsx2(
-                RealtimeMuteButton,
-                {
-                  muted: props.snapshot.inputMuted,
-                  kind: "microphone",
-                  reduceMotion: reduceMotion === true,
-                  onToggle: () => props.onSetInputMuted(!props.snapshot.inputMuted)
-                }
-              ),
-              /* @__PURE__ */ jsx2(
-                RealtimeMuteButton,
-                {
-                  muted: props.snapshot.outputMuted,
-                  kind: "output",
-                  reduceMotion: reduceMotion === true,
-                  onToggle: () => props.onSetOutputMuted(!props.snapshot.outputMuted)
-                }
-              )
-            ]
-          },
-          "realtime-mute-controls"
-        ) : null }),
-        /* @__PURE__ */ jsx2(
-          motion.button,
-          {
-            type: "button",
-            "data-testid": "realtime-primary-action",
-            "data-phase": status.phase,
-            "aria-label": mainLabel,
-            "aria-pressed": modeOwned,
-            title: mainLabel,
-            disabled: mainDisabled,
-            ...reduceMotion ? {} : { whileTap: { scale: 0.92 } },
-            transition: { type: "spring", stiffness: 520, damping: 30 },
-            onClick: () => void runMainAction().catch(() => void 0),
+            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(
-              "relative inline-flex size-8 items-center justify-center rounded-l-og-md border outline-none",
-              "transition-[background-color,border-color,color,box-shadow] duration-200 ease-og-out",
-              "focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-og-accent/45",
-              "disabled:cursor-not-allowed disabled:opacity-45 pointer-coarse:size-11",
-              voiceButtonTone(status.phase)
+              "inline-flex shrink-0 items-center overflow-hidden",
+              props.muteControlsClassName
             ),
-            children: /* @__PURE__ */ jsx2(
-              RealtimeActionGlyph,
+            children: /* @__PURE__ */ jsxs2(
+              motion.div,
               {
-                phase: status.phase,
-                audioBlocked,
-                reduceMotion: reduceMotion === true
+                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)
+                    }
+                  )
+                ]
               }
             )
-          }
-        ),
-        /* @__PURE__ */ jsxs2(DropdownMenu, { open: pickerOpen, onOpenChange: setPickerOpen, children: [
-          /* @__PURE__ */ jsx2(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx2(
-            "button",
+          },
+          "realtime-mute-controls"
+        ) : null }),
+        /* @__PURE__ */ jsxs2("div", { className: "inline-flex shrink-0 items-center", children: [
+          /* @__PURE__ */ jsx2(
+            motion.button,
             {
               type: "button",
-              "aria-label": "Choose voice model and options",
-              title: `Voice model: ${selectedModel.label}`,
-              disabled: props.selectionDisabled,
+              "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(
-                "inline-flex h-8 w-6 items-center justify-center rounded-r-og-md border border-l-0 outline-none",
-                "transition-[background-color,border-color,color] duration-200 ease-og-out",
+                // 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.
+                "relative inline-flex size-8 items-center justify-center outline-none",
+                "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",
-                "pointer-coarse:h-11 pointer-coarse:w-7",
+                "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(ChevronDownIcon, { className: "size-3", "aria-hidden": true })
+              children: /* @__PURE__ */ jsx2(
+                RealtimeActionGlyph,
+                {
+                  phase: status.phase,
+                  audioBlocked,
+                  reduceMotion: reduceMotion === true
+                }
+              )
             }
-          ) }),
-          /* @__PURE__ */ jsxs2(
-            DropdownMenuContent,
-            {
-              side: props.menuSide ?? "top",
-              align: "end",
-              sideOffset: 8,
-              collisionPadding: 12,
-              className: "flex w-72 max-h-[min(20rem,var(--radix-dropdown-menu-content-available-height))] flex-col overflow-hidden rounded-xl border-border bg-surface p-1.5 shadow-xl",
-              onCloseAutoFocus: (event) => event.preventDefault(),
-              children: [
-                /* @__PURE__ */ jsx2("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain", children: /* @__PURE__ */ jsx2(
-                  RealtimeModelPickerMenu,
-                  {
-                    models,
-                    selectedModel,
-                    provider: pickerProvider,
-                    direction: pickerDirection,
-                    disabled: props.selectionDisabled === true || props.snapshot.mode?.state === "active",
-                    onProviderChange: (provider, direction) => {
-                      setPickerDirection(direction);
-                      setPickerProvider(provider);
-                    },
-                    onSelect: (modelId) => {
-                      props.onSelectModel?.(modelId);
-                      setPickerOpen(false);
+          ),
+          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(
+                  // ≥24px wide so WCAG 2.2 target-size passes when the chevron is shown.
+                  "inline-flex h-8 w-6 items-center justify-center rounded-r-og-md outline-none",
+                  "transition-[background-color,border-color,color] duration-200 ease-og-out",
+                  "focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-og-accent/45",
+                  "pointer-coarse:h-11 pointer-coarse:w-7",
+                  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: "flex w-72 max-h-[min(20rem,var(--radix-dropdown-menu-content-available-height))] flex-col overflow-hidden rounded-xl border-border bg-surface p-1.5 shadow-xl",
+                onCloseAutoFocus: (event) => event.preventDefault(),
+                children: [
+                  /* @__PURE__ */ jsx2("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain", children: /* @__PURE__ */ jsx2(
+                    RealtimeModelPickerMenu,
+                    {
+                      models,
+                      selectedModel,
+                      provider: pickerProvider,
+                      direction: pickerDirection,
+                      disabled: props.selectionDisabled === true || props.snapshot.mode?.state === "active",
+                      onProviderChange: (provider, direction) => {
+                        setPickerDirection(direction);
+                        setPickerProvider(provider);
+                      },
+                      onSelect: (modelId) => {
+                        props.onSelectModel?.(modelId);
+                        setPickerOpen(false);
+                      }
                     }
-                  }
-                ) }),
-                status.phase !== "idle" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-                  /* @__PURE__ */ jsx2(DropdownMenuSeparator, { className: "mx-1 bg-og-border" }),
-                  /* @__PURE__ */ jsxs2("div", { className: "px-2.5 py-2", role: "status", "aria-live": "polite", children: [
-                    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-og-sm font-medium text-og-fg", children: [
-                      /* @__PURE__ */ jsx2(RealtimeStatusDot, { phase: status.phase, reduceMotion: reduceMotion === true }),
-                      status.label
-                    ] }),
-                    /* @__PURE__ */ jsx2("p", { className: "mt-1 text-og-xs leading-5 text-og-fg-subtle", children: status.detail })
-                  ] })
-                ] }) : null,
-                audioBlocked ? /* @__PURE__ */ jsxs2(
-                  DropdownMenuItem,
-                  {
-                    className: "rounded-og-md",
-                    onSelect: () => void props.onRetryAudibleOutput().catch(() => void 0),
-                    children: [
-                      /* @__PURE__ */ jsx2(Volume2Icon, {}),
-                      "Resume audio"
-                    ]
-                  }
-                ) : null,
-                retryConnection ? /* @__PURE__ */ jsxs2(
-                  DropdownMenuItem,
-                  {
-                    className: "rounded-og-md",
-                    onSelect: () => void props.onRetry().catch(() => void 0),
-                    children: [
-                      /* @__PURE__ */ jsx2(RotateCcwIcon, {}),
-                      "Retry connection"
-                    ]
-                  }
-                ) : null,
-                modeOwned && props.snapshot.status !== "lost_owner" ? /* @__PURE__ */ jsxs2(
-                  DropdownMenuItem,
-                  {
-                    variant: "destructive",
-                    className: "rounded-og-md",
-                    disabled: props.snapshot.status === "stopping",
-                    onSelect: () => void props.onStop().catch(() => void 0),
-                    children: [
-                      /* @__PURE__ */ jsx2(SquareIcon, {}),
-                      "End voice conversation"
-                    ]
-                  }
-                ) : null,
-                diagnosticsVisible ? /* @__PURE__ */ jsx2(RealtimeDiagnosticsMenu, { snapshot: props.snapshot }) : null
-              ]
-            }
-          )
+                  ) }),
+                  status.phase !== "idle" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+                    /* @__PURE__ */ jsx2(DropdownMenuSeparator, { className: "mx-1 bg-og-border" }),
+                    /* @__PURE__ */ jsxs2("div", { className: "px-2.5 py-2", role: "status", "aria-live": "polite", children: [
+                      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-og-sm font-medium text-og-fg", children: [
+                        /* @__PURE__ */ jsx2(
+                          RealtimeStatusDot,
+                          {
+                            phase: status.phase,
+                            reduceMotion: reduceMotion === true
+                          }
+                        ),
+                        status.label
+                      ] }),
+                      /* @__PURE__ */ jsx2("p", { className: "mt-1 text-og-xs leading-5 text-og-fg-subtle", children: status.detail })
+                    ] })
+                  ] }) : null,
+                  audioBlocked ? /* @__PURE__ */ jsxs2(
+                    DropdownMenuItem,
+                    {
+                      className: "rounded-og-md",
+                      onSelect: () => void props.onRetryAudibleOutput().catch(() => void 0),
+                      children: [
+                        /* @__PURE__ */ jsx2(Volume2Icon, {}),
+                        "Resume audio"
+                      ]
+                    }
+                  ) : null,
+                  retryConnection ? /* @__PURE__ */ jsxs2(
+                    DropdownMenuItem,
+                    {
+                      className: "rounded-og-md",
+                      onSelect: () => void props.onRetry().catch(() => void 0),
+                      children: [
+                        /* @__PURE__ */ jsx2(RotateCcwIcon, {}),
+                        "Retry connection"
+                      ]
+                    }
+                  ) : null,
+                  modeOwned && props.snapshot.status !== "lost_owner" ? /* @__PURE__ */ jsxs2(
+                    DropdownMenuItem,
+                    {
+                      variant: "destructive",
+                      className: "rounded-og-md",
+                      disabled: props.snapshot.status === "stopping",
+                      onSelect: () => void props.onStop().catch(() => void 0),
+                      children: [
+                        /* @__PURE__ */ jsx2(SquareIcon, {}),
+                        "End voice conversation"
+                      ]
+                    }
+                  ) : null,
+                  diagnosticsVisible ? /* @__PURE__ */ jsx2(RealtimeDiagnosticsMenu, { snapshot: props.snapshot }) : null
+                ]
+              }
+            )
+          ] }) : null
         ] }),
         /* @__PURE__ */ jsxs2("span", { className: "sr-only", role: "status", "aria-live": "polite", children: [
           status.label,
@@ -698,6 +766,34 @@ function RealtimeVoiceControl(props) {
     }
   );
 }
+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: [
+      props.leading,
+      /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx2("div", { className: "text-sm font-medium text-og-fg", children: "Voice model" }),
+        /* @__PURE__ */ jsx2("p", { className: "mt-0.5 text-xs text-og-fg-subtle", children: "Used when you start a voice conversation." })
+      ] })
+    ] }),
+    /* @__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
+      }
+    ) })
+  ] });
+}
 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";
@@ -709,13 +805,22 @@ function RealtimeMuteButton(props) {
       "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 border outline-none",
+        "inline-flex size-8 shrink-0 items-center justify-center rounded-og-md outline-none",
         "transition-[background-color,border-color,color] duration-150 ease-og-out",
         "focus-visible:ring-2 focus-visible:ring-og-accent/45 pointer-coarse:size-11",
-        props.muted ? "border-og-accent/35 bg-og-accent-soft text-og-accent" : "border-og-border bg-og-surface-2 text-og-fg-muted hover:border-og-accent/35 hover:text-og-fg"
+        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 })
     }
@@ -970,15 +1075,27 @@ function RealtimeStatusDot(props) {
 }
 function voiceButtonTone(phase) {
   if (phase === "listening" || phase === "speaking") {
-    return "border-og-accent/45 bg-og-accent text-og-accent-fg shadow-og-sm hover:bg-og-accent-strong";
+    return "border border-og-accent/45 bg-og-accent text-og-accent-fg shadow-og-sm hover:bg-og-accent-strong";
+  }
+  if (phase === "blocked" || phase === "error") {
+    return "border 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-accent/45 bg-og-accent text-og-accent-fg hover:bg-og-accent-strong";
   }
   if (phase === "blocked" || phase === "error") {
-    return "border-og-status-waiting/35 bg-og-status-waiting/10 text-og-status-waiting hover:bg-og-status-waiting/15";
+    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-og-accent/35 bg-og-accent-soft text-og-accent";
+    return "border border-l-0 border-og-accent/35 bg-og-accent-soft text-og-accent";
   }
-  return "border-og-border bg-og-surface-2 text-og-fg-muted hover:border-og-accent/35 hover:bg-og-accent-soft hover:text-og-accent";
+  return "text-og-fg-muted hover:bg-og-surface-2 hover:text-og-fg";
 }
 function toRealtimeModelOption(model) {
   return { ...model };
@@ -1011,6 +1128,7 @@ export {
   NewSessionRealtimeControl,
   RealtimeModelPickerMenu,
   RealtimeVoiceControl,
+  RealtimeVoiceModelPanel,
   SessionCodexRealtimeControl,
   SessionRealtimeControl,
   codexRealtimeAdmissionAllowed,