@opengeni/react 0.57.0 → 1.0.2-canary.37191796234001

package/src/realtime/dropdown-menu.tsx

@@ -4,6 +4,15 @@ import { ChevronRightIcon } from "lucide-react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import { createContext, useContext, type ComponentProps, type Ref } from "react";
 import { cn } from "../lib/cn";
+import {
+  MENU_CHEVRON_CLASS,
+  MENU_ITEM_CLASS,
+  MENU_SEPARATOR_CLASS,
+  MENU_SURFACE_CLASS,
+} from "../lib/menu-styles";
+
+const 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";
 import { usePortalTokenSource, usePortalTokenStyle } from "../lib/use-portal-token-style";
 
 type DropdownMenuSourceContextValue = {
@@ -58,7 +67,9 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={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 }}
@@ -82,10 +93,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}
     />
   );
@@ -98,7 +106,7 @@ function DropdownMenuSeparator({
   return (
     <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}
     />
   );
@@ -118,14 +126,11 @@ function DropdownMenuSubTrigger({
     <DropdownMenuPrimitive.SubTrigger
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
-      className={cn(
-        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-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}
-      <ChevronRightIcon className="ml-auto size-4" />
+      <ChevronRightIcon aria-hidden="true" className={cn(MENU_CHEVRON_CLASS, "ml-auto")} />
     </DropdownMenuPrimitive.SubTrigger>
   );
 }
@@ -141,7 +146,9 @@ function DropdownMenuSubContent({
     <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 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 }}

package/src/realtime/realtime-control.tsx

@@ -6,6 +6,7 @@ import {
   type SessionRealtimeController,
   type SessionRealtimeControllerSnapshot,
   type CreateSessionRealtimeControllerOptions,
+  type SessionRealtimeLifecycleProjection,
   type SessionRealtimeModel,
   type WorkspaceRealtimeModelCatalogItem,
 } from "@opengeni/sdk/realtime";
@@ -53,6 +54,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "./dropdown-menu";
+import { MENU_CHECK_CLASS } from "../lib/menu-styles";
 
 export type RealtimeModelOption = {
   id: SessionRealtimeModel;
@@ -98,9 +100,155 @@ const REALTIME_PROVIDER_META: Record<
   "Your Gateway": { billingClass: "byok", hint: "Billed to your AI Gateway" },
 };
 const REALTIME_MODEL_STORAGE_PREFIX = "opengeni:realtime-model";
+const REALTIME_MODEL_CATALOG_CACHE_TTL_MS = 60_000;
+const REALTIME_MODEL_CATALOG_CACHE_MAX_WORKSPACES = 64;
 
 type RealtimeControllerClient = EmbeddedRealtimeSessionClientLike & SessionRealtimeClientLike;
 
+type RealtimeModelCatalogCacheEntry =
+  | {
+      state: "loading";
+      promise: Promise<RealtimeModelOption[]>;
+      controller: AbortController;
+      consumers: number;
+    }
+  | { state: "ready"; models: RealtimeModelOption[]; expiresAt: number };
+
+// Scope advisory availability to the exact client object and workspace. The
+// server still authorizes every realtime operation; changing principals should
+// replace the client just as it does for the rest of the SDK state.
+const realtimeModelCatalogCache = new WeakMap<
+  RealtimeControllerClient,
+  Map<string, RealtimeModelCatalogCacheEntry>
+>();
+
+function realtimeModelFallback(codexConnected: boolean): RealtimeModelOption[] {
+  return [
+    {
+      ...CODEX_LIVE_MODEL,
+      available: codexConnected,
+      unavailableReason: codexConnected ? null : CODEX_LIVE_MODEL.unavailableReason,
+    },
+  ];
+}
+
+function realtimeModelCatalogCacheFor(
+  client: RealtimeControllerClient,
+): Map<string, RealtimeModelCatalogCacheEntry> {
+  const existing = realtimeModelCatalogCache.get(client);
+  if (existing) return existing;
+  const created = new Map<string, RealtimeModelCatalogCacheEntry>();
+  realtimeModelCatalogCache.set(client, created);
+  return created;
+}
+
+function readCachedRealtimeModelCatalog(
+  client: RealtimeControllerClient,
+  workspaceId: string,
+  now = Date.now(),
+): RealtimeModelOption[] | null {
+  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: Map<string, RealtimeModelCatalogCacheEntry>,
+  now: number,
+): void {
+  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 === undefined) return;
+    cache.delete(oldestWorkspaceId);
+  }
+}
+
+function loadRealtimeModelCatalog(
+  client: RealtimeControllerClient,
+  workspaceId: string,
+  signal?: AbortSignal,
+): Promise<RealtimeModelOption[]> | null {
+  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: unknown) => {
+      const current = cache.get(workspaceId);
+      if (current?.state === "loading" && current.promise === promise) cache.delete(workspaceId);
+      throw error;
+    });
+  const loading: RealtimeModelCatalogCacheEntry & { state: "loading" } = {
+    state: "loading",
+    promise,
+    controller,
+    consumers: 0,
+  };
+  cache.set(workspaceId, loading);
+  return consumeRealtimeModelCatalog(loading, signal);
+}
+
+function consumeRealtimeModelCatalog(
+  entry: RealtimeModelCatalogCacheEntry & { state: "loading" },
+  signal?: AbortSignal,
+): Promise<RealtimeModelOption[]> {
+  entry.consumers += 1;
+  return new Promise((resolve, reject) => {
+    let released = false;
+    const release = (abandoned: boolean) => {
+      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);
+    });
+  });
+}
+
 export type SessionRealtimeControllerFactory = (
   options: CreateSessionRealtimeControllerOptions,
 ) => SessionRealtimeController;
@@ -138,6 +286,8 @@ export function useSessionRealtime(options: {
   model?: SessionRealtimeModel | undefined;
   modelAvailable?: boolean | undefined;
   modelUnavailableReason?: string | null | undefined;
+  /** Model-visible application context captured with each durable realtime message. */
+  getModelContext?: (() => string | undefined) | undefined;
   /** Deterministic browser-test/demo seam. Production hosts should use the SDK default. */
   controllerFactory?: SessionRealtimeControllerFactory | undefined;
 }) {
@@ -149,6 +299,8 @@ export function useSessionRealtime(options: {
   const audioRef = useRef<HTMLAudioElement>(null);
   const controllerRef = useRef<SessionRealtimeController | null>(null);
   const controllerModelRef = useRef<SessionRealtimeModel | null>(null);
+  const modelContextProviderRef = useRef(options.getModelContext);
+  modelContextProviderRef.current = options.getModelContext;
   const [snapshot, setSnapshot] = useState<SessionRealtimeControllerSnapshot>(() => ({
     status: hasStoredSessionRealtimeOwnerProof({
       workspaceId,
@@ -177,7 +329,7 @@ export 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;
@@ -193,6 +345,7 @@ export function useSessionRealtime(options: {
           sessionId: options.sessionId,
           ...(audioRef.current ? { remoteAudio: audioRef.current } : {}),
           model,
+          getModelContext: () => modelContextProviderRef.current?.(),
         });
         controllerRef.current = controller;
         controllerModelRef.current = model;
@@ -297,6 +450,14 @@ export function useSessionRealtime(options: {
   };
 }
 
+function sessionRealtimeLifecycleIsActive(
+  lifecycle: SessionRealtimeLifecycleProjection | null,
+): boolean {
+  if (lifecycle?.state !== "active") return false;
+  const leaseExpiresAt = Date.parse(lifecycle.leaseExpiresAt);
+  return !Number.isFinite(leaseExpiresAt) || leaseExpiresAt > Date.now();
+}
+
 export function SessionRealtimeControl(props: {
   client?: RealtimeControllerClient | undefined;
   workspaceId?: string | undefined;
@@ -306,6 +467,8 @@ export function SessionRealtimeControl(props: {
   events: SessionEvent[];
   eventsReady: boolean;
   codexConnected: boolean;
+  /** Model-visible application context captured with each durable realtime message. */
+  getModelContext?: (() => string | undefined) | undefined;
   realtimeAutostartModel?: SessionRealtimeModel | undefined;
   onRealtimeAutostartConsumed?: (() => void) | undefined;
   /** Host hides dictate (and can choreograph layout) while realtime voice is live. */
@@ -317,15 +480,18 @@ export function SessionRealtimeControl(props: {
    * `none` never attaches a model menu to the bar button.
    */
   modelMenu?: "split" | "split-desktop" | "none" | undefined;
+  /** Explicitly expose low-level controller diagnostics; disabled by default. */
+  showDiagnostics?: boolean | undefined;
   /** Deterministic browser-test/demo seam. Production hosts should use the SDK default. */
   controllerFactory?: SessionRealtimeControllerFactory | undefined;
 }) {
   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({
@@ -349,7 +515,7 @@ export function SessionRealtimeControl(props: {
 
   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) {
@@ -368,7 +534,7 @@ export function SessionRealtimeControl(props: {
       });
   }, [
     canStart,
-    lifecycle?.state,
+    lifecycleActive,
     models,
     props.sessionId,
     props.workspaceId,
@@ -386,6 +552,7 @@ export function SessionRealtimeControl(props: {
       modelAvailable={selectedModel.available}
       menuSide="top"
       modelMenu={props.modelMenu ?? "split"}
+      showDiagnostics={props.showDiagnostics}
       audioRef={realtime.audioRef}
       selectedModel={selectedModel}
       models={selection.models}
@@ -411,35 +578,58 @@ export function useRealtimeModelSelection(options: {
     workspaceId: options.workspaceId,
   });
   const activeModel = options.activeModel;
-  const [catalog, setCatalog] = useState<RealtimeModelOption[]>(() => [
-    {
-      ...CODEX_LIVE_MODEL,
-      available: options.codexConnected,
-      unavailableReason: options.codexConnected ? null : CODEX_LIVE_MODEL.unavailableReason,
-    },
-  ]);
-  const [selectedModelId, setSelectedModelId] = useState<SessionRealtimeModel>(
-    () => readRealtimeModelPreference(workspaceId) ?? CODEX_LIVE_MODEL.id,
+  const initialCachedCatalog = readCachedRealtimeModelCatalog(client, workspaceId);
+  const [catalog, setCatalog] = useState<RealtimeModelOption[]>(
+    () => initialCachedCatalog ?? realtimeModelFallback(options.codexConnected),
   );
+  const catalogScopeRef = useRef({
+    client,
+    workspaceId,
+    source: initialCachedCatalog ? ("cache" as const) : ("fallback" as const),
+  });
+  const [selectedModelId, setSelectedModelId] = useState<SessionRealtimeModel>(() => {
+    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) => {
+    const requestAbort = new AbortController();
+    const applyCatalog = (models: RealtimeModelOption[]) => {
+      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;
-        const models = response.models.map(toRealtimeModelOption);
-        setCatalog(models);
-        setSelectedModelId((current) => {
-          if (models.some((model) => model.id === current && model.available)) return current;
-          return models.find((model) => model.available)?.id ?? CODEX_LIVE_MODEL.id;
-        });
+        applyCatalog(models);
       })
       .catch(() => undefined);
     return () => {
       disposed = true;
+      requestAbort.abort();
     };
   }, [client, workspaceId]);
 
@@ -482,7 +672,7 @@ const IDLE_REALTIME_SNAPSHOT: SessionRealtimeControllerSnapshot = {
   error: null,
 };
 
-export function NewSessionRealtimeControl(props: {
+type NewSessionRealtimeControlProps = {
   client?: RealtimeControllerClient | undefined;
   workspaceId?: string | undefined;
   codexConnected: boolean;
@@ -500,20 +690,43 @@ export function NewSessionRealtimeControl(props: {
    * `none` never attaches a model menu to the bar button.
    */
   modelMenu?: "split" | "split-desktop" | "none" | undefined;
-}) {
-  const internalSelection = useRealtimeModelSelection({
+};
+
+type NewSessionRealtimeSelection = {
+  models: readonly RealtimeModelOption[];
+  selectedModel: RealtimeModelOption;
+  selectModel: (modelId: string) => void;
+};
+
+export function NewSessionRealtimeControl(props: NewSessionRealtimeControlProps) {
+  if (props.models && props.selectedModel && props.onSelectModel) {
+    return (
+      <NewSessionRealtimeControlView
+        {...props}
+        selection={{
+          models: props.models,
+          selectedModel: props.selectedModel,
+          selectModel: props.onSelectModel,
+        }}
+      />
+    );
+  }
+  return <NewSessionRealtimeControlWithInternalSelection {...props} />;
+}
+
+function NewSessionRealtimeControlWithInternalSelection(props: NewSessionRealtimeControlProps) {
+  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 <NewSessionRealtimeControlView {...props} selection={selection} />;
+}
+
+function NewSessionRealtimeControlView(
+  props: NewSessionRealtimeControlProps & { selection: NewSessionRealtimeSelection },
+) {
+  const selection = props.selection;
   const audioRef = useRef<HTMLAudioElement>(null);
   const [starting, setStarting] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -582,7 +795,7 @@ export function RealtimeVoiceControl(props: {
    * `none` = start button only.
    */
   modelMenu?: "split" | "split-desktop" | "none" | undefined;
-  showDiagnostics?: boolean;
+  showDiagnostics?: boolean | undefined;
   /** Extra classes on the in-bar mute cluster (e.g. `max-sm:hidden` when mutes live in “+”). */
   muteControlsClassName?: string | undefined;
   audioRef: RefObject<HTMLAudioElement | null>;
@@ -636,7 +849,7 @@ export function RealtimeVoiceControl(props: {
       : 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";
@@ -793,7 +1006,7 @@ export 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()}
             >
               <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
@@ -816,9 +1029,15 @@ export function RealtimeVoiceControl(props: {
                 />
               </div>
 
-              {status.phase !== "idle" ? (
+              {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
+              ) ? (
                 <>
-                  <DropdownMenuSeparator className="mx-1 bg-og-border" />
+                  <DropdownMenuSeparator />
                   <div className="px-2.5 py-2" role="status" aria-live="polite">
                     <div className="flex items-center gap-2 text-og-sm font-medium text-og-fg">
                       <RealtimeStatusDot
@@ -834,7 +1053,6 @@ export function RealtimeVoiceControl(props: {
 
               {audioBlocked ? (
                 <DropdownMenuItem
-                  className="rounded-og-md"
                   onSelect={() => void props.onRetryAudibleOutput().catch(() => undefined)}
                 >
                   <Volume2Icon />
@@ -842,10 +1060,7 @@ export function RealtimeVoiceControl(props: {
                 </DropdownMenuItem>
               ) : null}
               {retryConnection ? (
-                <DropdownMenuItem
-                  className="rounded-og-md"
-                  onSelect={() => void props.onRetry().catch(() => undefined)}
-                >
+                <DropdownMenuItem onSelect={() => void props.onRetry().catch(() => undefined)}>
                   <RotateCcwIcon />
                   Retry connection
                 </DropdownMenuItem>
@@ -853,7 +1068,6 @@ export function RealtimeVoiceControl(props: {
               {modeOwned && props.snapshot.status !== "lost_owner" ? (
                 <DropdownMenuItem
                   variant="destructive"
-                  className="rounded-og-md"
                   disabled={props.snapshot.status === "stopping"}
                   onSelect={() => void props.onStop().catch(() => undefined)}
                 >
@@ -893,16 +1107,14 @@ export function RealtimeVoiceModelPanel(props: {
 
   return (
     <div className="flex min-h-0 flex-1 flex-col" data-testid="realtime-voice-model-panel">
-      <div className="flex shrink-0 items-start gap-1 px-2 pt-1 pb-1.5">
+      <div className="flex min-h-10 shrink-0 items-center gap-2 border-b border-og-border px-2 pb-2">
         {props.leading}
-        <div className="min-w-0">
-          <div className="text-og-menu font-medium text-og-fg">Voice model</div>
-          <p className="mt-0.5 text-og-control text-og-fg-subtle">
-            Used when you start a voice conversation.
-          </p>
-        </div>
+        <div className="min-w-0 flex-1 text-og-menu font-medium text-og-fg">Voice model</div>
       </div>
-      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-1.5 pb-1.5">
+      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-2">
+        <p className="mb-3 text-og-control text-og-fg-muted">
+          Used when you start a voice conversation.
+        </p>
         <RealtimeModelPickerMenu
           models={props.models}
           selectedModel={props.selectedModel}
@@ -1016,7 +1228,9 @@ export function RealtimeModelPickerMenu(props: {
                 title={model.unavailableReason ?? model.description}
                 active={selected}
                 showChevron={false}
-                trailing={selected ? <CheckIcon className="size-3.5" aria-hidden /> : undefined}
+                trailing={
+                  selected ? <CheckIcon className={MENU_CHECK_CLASS} aria-hidden /> : undefined
+                }
                 testId={`realtime-model-choice-${model.id}`}
                 onClick={() => props.onSelect(model.id)}
               />
@@ -1079,12 +1293,12 @@ function RealtimeDiagnosticsMenu({ snapshot }: { snapshot: SessionRealtimeContro
 
   return (
     <>
-      <DropdownMenuSeparator className="mx-1 bg-og-border" />
+      <DropdownMenuSeparator />
       <DropdownMenuSub>
-        <DropdownMenuSubTrigger className="rounded-og-md text-og-fg-muted">
+        <DropdownMenuSubTrigger className="text-og-fg-muted">
           Realtime diagnostics
         </DropdownMenuSubTrigger>
-        <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">
+        <DropdownMenuSubContent className="max-h-80 w-72 overflow-y-auto">
           {rows.map(([label, value]) => (
             <DropdownMenuItem
               key={label}
@@ -1316,7 +1530,7 @@ function RealtimeStatusDot(props: { phase: RealtimeVisualPhase; reduceMotion: bo
 
 function voiceButtonTone(phase: RealtimeVisualPhase): string {
   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";
@@ -1330,7 +1544,7 @@ function voiceButtonTone(phase: RealtimeVisualPhase): string {
 
 function voiceChevronTone(phase: RealtimeVisualPhase): string {
   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";

package/src/session-auth-recommendation.ts

@@ -0,0 +1,48 @@
+import type { AuthNeededItem } from "./timeline/types";
+import type { CapabilityCatalogItem } from "@opengeni/sdk";
+
+/** Recovery events identify runtime servers/connections, while recommendation
+ * events already carry a catalog id. Never guess among same-domain accounts. */
+export function sessionAuthRecommendation(
+  item: AuthNeededItem,
+  catalog: CapabilityCatalogItem[],
+): AuthNeededItem | undefined {
+  if (
+    item.authoritySource === "host" ||
+    item.reason === "unsupported_auth" ||
+    item.reason === "resource_scope_unavailable"
+  )
+    return undefined;
+  if (item.capability) return item;
+  const recoveryServerId = item.canonicalServerId ?? item.serverId;
+  const matches = catalog.filter(
+    (candidate) =>
+      (recoveryServerId !== null &&
+        candidate.runtime.mcpServerId === recoveryServerId &&
+        recoveryServerId !== "opengeni") ||
+      (item.connectionId !== null && candidate.connectionRef?.connectionId === item.connectionId),
+  );
+  if (matches.length !== 1) return undefined;
+  const entry = matches[0]!;
+  const personalAccess = item.reason === "personal_authority_unavailable";
+  if (
+    personalAccess &&
+    ((item.connectionSubjectScope ?? entry.connectionRef?.subjectScope) !== "subject" ||
+      entry.connectionRef?.authoritySource === "host")
+  )
+    return undefined;
+  return {
+    ...item,
+    capability: {
+      id: entry.id,
+      name: entry.name,
+      kind: entry.kind,
+      source: entry.source,
+      action: "connect",
+      rationale: personalAccess
+        ? "Review permission to use your personal account in this conversation."
+        : "Reconnect this integration to use its tools in this conversation.",
+      requiredVariables: [],
+    },
+  };
+}