@agent-native/core 0.94.1 → 0.94.2

package/corpus/core/src/client/agent-chat.ts

@@ -138,6 +138,12 @@ export interface AgentChatContextState {
 export interface AgentChatOpenThreadRequest {
   threadId: string;
   newThread?: boolean;
+  /**
+   * Open only while this thread is still active (or no thread is active).
+   * This lets transient surfaces restore their own chat without stealing a
+   * thread the user selected in the meantime.
+   */
+  onlyIfActiveThreadId?: string;
   openRequestId?: string;
 }
 

package/corpus/core/src/client/composer/RealtimeVoiceMode.tsx

@@ -6,7 +6,7 @@ import {
   IconPhoneOff,
   IconVolume,
 } from "@tabler/icons-react";
-import { useId, useState } from "react";
+import { useEffect, useId, useState, useSyncExternalStore } from "react";
 
 import {
   Popover,
@@ -19,6 +19,10 @@ import {
   TooltipTrigger,
 } from "../components/ui/tooltip.js";
 import { cn } from "../utils.js";
+import {
+  createRealtimeVoiceAudioLevelStore,
+  type RealtimeVoiceAudioLevelStore,
+} from "./realtime-voice-audio-level.js";
 
 export type RealtimeVoiceModeState =
   | "connecting"
@@ -164,12 +168,55 @@ export interface RealtimeVoiceModeDockProps {
   state: RealtimeVoiceModeState;
   copy: RealtimeVoiceModeCopy;
   chatVisible: boolean;
+  audioLevels?: RealtimeVoiceAudioLevelStore;
   onToggleChat: () => void;
   onEndVoiceMode: () => void;
   errorMessage?: string | null;
   className?: string;
 }
 
+const SILENT_AUDIO_LEVELS = createRealtimeVoiceAudioLevelStore();
+const WAVEFORM_WEIGHTS = [0.55, 0.82, 1, 0.82, 0.55];
+const AUDIO_ACTIVITY_THRESHOLD = 0.035;
+
+function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const update = () => setReduced(query.matches);
+    update();
+    query.addEventListener?.("change", update);
+    return () => query.removeEventListener?.("change", update);
+  }, []);
+  return reduced;
+}
+
+function VoiceWaveform({
+  level,
+  reducedMotion,
+}: {
+  level: number;
+  reducedMotion: boolean;
+}) {
+  const visibleLevel = reducedMotion ? 0.45 : level;
+  return (
+    <span
+      aria-hidden="true"
+      className="flex h-6 items-center justify-center gap-0.5"
+      data-realtime-voice-waveform="true"
+    >
+      {WAVEFORM_WEIGHTS.map((weight, index) => (
+        <span
+          key={index}
+          className="w-0.5 rounded-full bg-current transition-[height] duration-75 ease-out motion-reduce:transition-none"
+          style={{ height: `${4 + visibleLevel * 16 * weight}px` }}
+        />
+      ))}
+    </span>
+  );
+}
+
 const ORB_STATE_CLASSES: Record<RealtimeVoiceModeState, string> = {
   connecting:
     "bg-secondary text-secondary-foreground ring-4 ring-secondary/40 hover:bg-secondary/80",
@@ -212,12 +259,26 @@ export function RealtimeVoiceModeDock({
   state,
   copy,
   chatVisible,
+  audioLevels = SILENT_AUDIO_LEVELS,
   onToggleChat,
   onEndVoiceMode,
   errorMessage,
   className,
 }: RealtimeVoiceModeDockProps) {
   const statusId = useId();
+  const levels = useSyncExternalStore(
+    audioLevels.subscribe,
+    audioLevels.getSnapshot,
+    audioLevels.getSnapshot,
+  );
+  const reducedMotion = usePrefersReducedMotion();
+  const activity =
+    levels.output > AUDIO_ACTIVITY_THRESHOLD
+      ? "assistant"
+      : levels.input > AUDIO_ACTIVITY_THRESHOLD
+        ? "user"
+        : "idle";
+  const activityLevel = activity === "assistant" ? levels.output : levels.input;
   const toggleLabel = chatVisible ? copy.hideChat : copy.showChat;
   const ending = state === "ending";
   const errorDetailVisible = state === "error" && Boolean(errorMessage);
@@ -228,7 +289,9 @@ export function RealtimeVoiceModeDock({
         "pointer-events-none fixed bottom-4 end-4 flex max-w-[calc(100vw-2rem)] flex-col items-end gap-2",
         className,
       )}
+      style={{ zIndex: 270 }}
       data-realtime-voice-state={state}
+      data-realtime-voice-activity={activity}
     >
       {errorDetailVisible ? (
         <div
@@ -283,7 +346,14 @@ export function RealtimeVoiceModeDock({
                 ORB_STATE_CLASSES[state],
               )}
             >
-              <VoiceStateIcon state={state} />
+              {activity === "idle" ? (
+                <VoiceStateIcon state={state} />
+              ) : (
+                <VoiceWaveform
+                  level={activityLevel}
+                  reducedMotion={reducedMotion}
+                />
+              )}
             </Button>
           </TooltipTrigger>
           <TooltipContent>{toggleLabel}</TooltipContent>

package/corpus/core/src/client/composer/realtime-voice-audio-level.ts

@@ -0,0 +1,64 @@
+export interface RealtimeVoiceAudioLevels {
+  input: number;
+  output: number;
+}
+
+export interface RealtimeVoiceAudioLevelStore {
+  getSnapshot: () => RealtimeVoiceAudioLevels;
+  subscribe: (listener: () => void) => () => void;
+  set: (levels: RealtimeVoiceAudioLevels) => void;
+  reset: () => void;
+}
+
+const SILENT_LEVELS: RealtimeVoiceAudioLevels = { input: 0, output: 0 };
+
+function clampLevel(value: number): number {
+  if (!Number.isFinite(value)) return 0;
+  return Math.max(0, Math.min(1, value));
+}
+
+export function normalizeRealtimeVoiceRms(samples: Uint8Array): number {
+  if (samples.length === 0) return 0;
+  let sumSquares = 0;
+  for (const sample of samples) {
+    const normalized = (sample - 128) / 128;
+    sumSquares += normalized * normalized;
+  }
+  const rms = Math.sqrt(sumSquares / samples.length);
+  return clampLevel(Math.max(0, rms - 0.012) * 3.2);
+}
+
+export function smoothRealtimeVoiceLevel(
+  previous: number,
+  next: number,
+): number {
+  const target = clampLevel(next);
+  const factor = target > previous ? 0.55 : 0.2;
+  return clampLevel(previous + (target - previous) * factor);
+}
+
+export function createRealtimeVoiceAudioLevelStore(): RealtimeVoiceAudioLevelStore {
+  let snapshot = SILENT_LEVELS;
+  const listeners = new Set<() => void>();
+
+  const set = (levels: RealtimeVoiceAudioLevels) => {
+    const next = {
+      input: clampLevel(levels.input),
+      output: clampLevel(levels.output),
+    };
+    if (next.input === snapshot.input && next.output === snapshot.output)
+      return;
+    snapshot = next;
+    for (const listener of listeners) listener();
+  };
+
+  return {
+    getSnapshot: () => snapshot,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    set,
+    reset: () => set(SILENT_LEVELS),
+  };
+}

package/corpus/core/src/client/composer/realtime-voice-transcript.ts

@@ -0,0 +1,134 @@
+export type RealtimeVoiceTranscriptRole = "user" | "assistant";
+
+export interface RealtimeVoiceTranscriptMessage {
+  id: string;
+  threadId: string;
+  role: RealtimeVoiceTranscriptRole;
+  text: string;
+  createdAt: string;
+}
+
+export interface RealtimeVoiceTranscriptSink {
+  threadId: string;
+  active: boolean;
+  append: (message: RealtimeVoiceTranscriptMessage) => boolean;
+}
+
+export interface RealtimeVoiceTranscriptRegistry {
+  activeThreadId: () => string | undefined;
+  publish: (message: RealtimeVoiceTranscriptMessage) => void;
+  register: (sink: RealtimeVoiceTranscriptSink) => () => void;
+  pendingCount: () => number;
+}
+
+export function appendRealtimeVoiceTranscriptToRepository(
+  value: unknown,
+  transcript: RealtimeVoiceTranscriptMessage,
+): { appended: boolean; repository: Record<string, unknown> } {
+  const repository =
+    value && typeof value === "object" && !Array.isArray(value)
+      ? (value as Record<string, unknown>)
+      : {};
+  const messages = Array.isArray(repository.messages)
+    ? [...repository.messages]
+    : [];
+  const duplicate = messages.some((entry) => {
+    if (!entry || typeof entry !== "object") return false;
+    const record = entry as Record<string, unknown>;
+    const message =
+      record.message && typeof record.message === "object"
+        ? (record.message as Record<string, unknown>)
+        : record;
+    return message.id === transcript.id;
+  });
+  if (duplicate) return { appended: false, repository };
+
+  const parentId =
+    typeof repository.headId === "string" ? repository.headId : null;
+  const createdAt = new Date(transcript.createdAt);
+  const message = {
+    id: transcript.id,
+    role: transcript.role,
+    content: [{ type: "text", text: transcript.text }],
+    createdAt: Number.isNaN(createdAt.getTime()) ? new Date() : createdAt,
+    metadata: {
+      custom: {
+        source: "realtime-voice",
+      },
+    },
+    ...(transcript.role === "assistant"
+      ? { status: { type: "complete", reason: "stop" } }
+      : {}),
+  };
+
+  return {
+    appended: true,
+    repository: {
+      ...repository,
+      messages: [...messages, { message, parentId }],
+      headId: transcript.id,
+    },
+  };
+}
+
+export function createRealtimeVoiceTranscriptRegistry(): RealtimeVoiceTranscriptRegistry {
+  const sinks = new Map<
+    symbol,
+    RealtimeVoiceTranscriptSink & { order: number }
+  >();
+  const pending = new Map<string, RealtimeVoiceTranscriptMessage>();
+  const delivered = new Set<string>();
+  let order = 0;
+
+  const flush = () => {
+    for (const [id, message] of pending) {
+      let consumed = false;
+      for (const sink of sinks.values()) {
+        if (sink.threadId !== message.threadId) continue;
+        try {
+          consumed = sink.append(message) || consumed;
+        } catch {
+          // Keep the completed transcript queued until the chat can import it.
+        }
+      }
+      if (!consumed) continue;
+      pending.delete(id);
+      delivered.add(id);
+      if (delivered.size > 1_000) {
+        const oldest = delivered.values().next().value;
+        if (typeof oldest === "string") delivered.delete(oldest);
+      }
+    }
+  };
+
+  return {
+    activeThreadId() {
+      let active: (RealtimeVoiceTranscriptSink & { order: number }) | undefined;
+      for (const sink of sinks.values()) {
+        if (!sink.active || (active && sink.order <= active.order)) continue;
+        active = sink;
+      }
+      return active?.threadId;
+    },
+    publish(message) {
+      const id = message.id.trim();
+      const threadId = message.threadId.trim();
+      const text = message.text.trim();
+      if (!id || !threadId || !text || delivered.has(id) || pending.has(id)) {
+        return;
+      }
+      pending.set(id, { ...message, id, threadId, text });
+      flush();
+    },
+    register(sink) {
+      const token = Symbol("realtime-voice-transcript-sink");
+      sinks.set(token, { ...sink, order: ++order });
+      flush();
+      return () => sinks.delete(token);
+    },
+    pendingCount: () => pending.size,
+  };
+}
+
+export const realtimeVoiceTranscriptRegistry =
+  createRealtimeVoiceTranscriptRegistry();

package/corpus/core/src/client/composer/useRealtimeVoiceMode.tsx

@@ -10,6 +10,7 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 
+import { requestAgentChatThreadOpen } from "../agent-chat.js";
 import {
   SIDEBAR_STATE_CHANGE_EVENT,
   type AgentSidebarStateChangeDetail,
@@ -18,6 +19,13 @@ import { agentNativePath } from "../api-path.js";
 import { readClientAppState, setClientAppState } from "../application-state.js";
 import { getBrowserTabId } from "../browser-tab-id.js";
 import { useT } from "../i18n.js";
+import {
+  createRealtimeVoiceAudioLevelStore,
+  normalizeRealtimeVoiceRms,
+  smoothRealtimeVoiceLevel,
+  type RealtimeVoiceAudioLevelStore,
+} from "./realtime-voice-audio-level.js";
+import { realtimeVoiceTranscriptRegistry } from "./realtime-voice-transcript.js";
 import {
   RealtimeVoiceModeDock,
   type RealtimeVoiceModeCopy,
@@ -43,11 +51,54 @@ export interface RealtimeVoiceModeApi {
   active: boolean;
   errorMessage: string | null;
   chatVisible: boolean;
+  audioLevels: RealtimeVoiceAudioLevelStore;
   start: () => Promise<void>;
   end: () => void;
   toggleChat: () => void;
 }
 
+export interface CompletedRealtimeVoiceTranscript {
+  role: "user" | "assistant";
+  text: string;
+  providerId?: string;
+}
+
+/**
+ * Voice mode owns the chat only temporarily. Restore the captured transcript
+ * when it is still the user's active thread (or the chat has no active thread)
+ * but never pull them back after they deliberately selected another thread.
+ */
+export function shouldRestoreRealtimeVoiceTranscriptThread(
+  transcriptThreadId: string | undefined,
+  activeThreadId: string | undefined,
+): transcriptThreadId is string {
+  return Boolean(
+    transcriptThreadId &&
+    (!activeThreadId || activeThreadId === transcriptThreadId),
+  );
+}
+
+export function extractCompletedRealtimeVoiceTranscript(
+  event: RealtimeServerEvent,
+): CompletedRealtimeVoiceTranscript | null {
+  const userCompleted =
+    event.type === "conversation.item.input_audio_transcription.completed";
+  const assistantCompleted =
+    event.type === "response.output_audio_transcript.done";
+  if (!userCompleted && !assistantCompleted) return null;
+  const text =
+    typeof event.transcript === "string" ? event.transcript.trim() : "";
+  if (!text) return null;
+  const providerId = [event.item_id, event.response_id, event.event_id].find(
+    (value): value is string => typeof value === "string" && value.length > 0,
+  );
+  return {
+    role: userCompleted ? "user" : "assistant",
+    text,
+    ...(providerId ? { providerId } : {}),
+  };
+}
+
 export interface RealtimeVoiceModeProviderProps {
   children: ReactNode;
   browserTabId?: string;
@@ -232,17 +283,29 @@ function useRealtimeVoiceModeController(
   const [state, setState] = useState<"idle" | RealtimeVoiceModeState>("idle");
   const [error, setError] = useState<string | null>(null);
   const [chatVisible, setChatVisible] = useState(false);
+  const [audioLevels] = useState(createRealtimeVoiceAudioLevelStore);
   const stateRef = useRef(state);
   const peerRef = useRef<RTCPeerConnection | null>(null);
   const channelRef = useRef<RTCDataChannel | null>(null);
   const streamRef = useRef<MediaStream | null>(null);
   const audioRef = useRef<HTMLAudioElement | null>(null);
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const inputAnalyserRef = useRef<AnalyserNode | null>(null);
+  const outputAnalyserRef = useRef<AnalyserNode | null>(null);
+  const inputMeterBufferRef = useRef<Uint8Array<ArrayBuffer> | null>(null);
+  const outputMeterBufferRef = useRef<Uint8Array<ArrayBuffer> | null>(null);
+  const inputSourceRef = useRef<MediaStreamAudioSourceNode | null>(null);
+  const outputSourceRef = useRef<MediaStreamAudioSourceNode | null>(null);
+  const meterFrameRef = useRef<number | null>(null);
+  const lastMeterSampleRef = useRef(0);
   const abortRef = useRef<AbortController | null>(null);
   const handledCallsRef = useRef(new Set<string>());
   const sessionIdRef = useRef<string | undefined>(undefined);
   const startedAtRef = useRef<string | undefined>(undefined);
   const lastUserTextRef = useRef("");
   const lastAssistantTextRef = useRef("");
+  const transcriptThreadIdRef = useRef<string | undefined>(undefined);
+  const transcriptSequenceRef = useRef(0);
 
   useEffect(() => {
     stateRef.current = state;
@@ -279,6 +342,77 @@ function useRealtimeVoiceModeController(
     [syncAppState],
   );
 
+  const startMeterLoop = useCallback(() => {
+    if (meterFrameRef.current !== null) return;
+    const sample = (timestamp: number) => {
+      meterFrameRef.current = requestAnimationFrame(sample);
+      if (timestamp - lastMeterSampleRef.current < 50) return;
+      lastMeterSampleRef.current = timestamp;
+
+      const current = audioLevels.getSnapshot();
+      let input = current.input;
+      let output = current.output;
+      const inputAnalyser = inputAnalyserRef.current;
+      const inputBuffer = inputMeterBufferRef.current;
+      if (inputAnalyser && inputBuffer) {
+        inputAnalyser.getByteTimeDomainData(inputBuffer);
+        input = smoothRealtimeVoiceLevel(
+          input,
+          normalizeRealtimeVoiceRms(inputBuffer),
+        );
+      }
+      const outputAnalyser = outputAnalyserRef.current;
+      const outputBuffer = outputMeterBufferRef.current;
+      if (outputAnalyser && outputBuffer) {
+        outputAnalyser.getByteTimeDomainData(outputBuffer);
+        output = smoothRealtimeVoiceLevel(
+          output,
+          normalizeRealtimeVoiceRms(outputBuffer),
+        );
+      }
+      audioLevels.set({ input, output });
+    };
+    meterFrameRef.current = requestAnimationFrame(sample);
+  }, [audioLevels]);
+
+  const attachAudioMeter = useCallback(
+    (stream: MediaStream, channel: "input" | "output") => {
+      try {
+        const AudioCtor =
+          window.AudioContext ??
+          (
+            window as typeof window & {
+              webkitAudioContext?: typeof AudioContext;
+            }
+          ).webkitAudioContext;
+        if (!AudioCtor) return;
+        const context = audioContextRef.current ?? new AudioCtor();
+        audioContextRef.current = context;
+        void context.resume().catch(() => undefined);
+        const analyser = context.createAnalyser();
+        analyser.fftSize = 512;
+        const source = context.createMediaStreamSource(stream);
+        source.connect(analyser);
+        const buffer = new Uint8Array(analyser.frequencyBinCount);
+        if (channel === "input") {
+          inputSourceRef.current?.disconnect();
+          inputSourceRef.current = source;
+          inputAnalyserRef.current = analyser;
+          inputMeterBufferRef.current = buffer;
+        } else {
+          outputSourceRef.current?.disconnect();
+          outputSourceRef.current = source;
+          outputAnalyserRef.current = analyser;
+          outputMeterBufferRef.current = buffer;
+        }
+        startMeterLoop();
+      } catch {
+        // Audio metering is visual-only; keep the realtime call healthy.
+      }
+    },
+    [startMeterLoop],
+  );
+
   const cleanupTransport = useCallback(() => {
     abortRef.current?.abort();
     abortRef.current = null;
@@ -293,8 +427,25 @@ function useRealtimeVoiceModeController(
       audioRef.current.srcObject = null;
     }
     audioRef.current = null;
+    if (meterFrameRef.current !== null) {
+      cancelAnimationFrame(meterFrameRef.current);
+      meterFrameRef.current = null;
+    }
+    inputSourceRef.current?.disconnect();
+    outputSourceRef.current?.disconnect();
+    inputSourceRef.current = null;
+    outputSourceRef.current = null;
+    inputAnalyserRef.current = null;
+    outputAnalyserRef.current = null;
+    inputMeterBufferRef.current = null;
+    outputMeterBufferRef.current = null;
+    lastMeterSampleRef.current = 0;
+    const audioContext = audioContextRef.current;
+    audioContextRef.current = null;
+    if (audioContext) void audioContext.close().catch(() => undefined);
+    audioLevels.reset();
     handledCallsRef.current.clear();
-  }, []);
+  }, [audioLevels]);
 
   const fail = useCallback(
     (message: string, options?: { openKeySettings?: boolean }) => {
@@ -342,6 +493,26 @@ function useRealtimeVoiceModeController(
     [browserTabId, transition],
   );
 
+  const persistCompletedTranscript = useCallback(
+    (event: RealtimeServerEvent) => {
+      const transcript = extractCompletedRealtimeVoiceTranscript(event);
+      const threadId = transcriptThreadIdRef.current;
+      if (!transcript || !threadId) return;
+      const sessionIdentity =
+        sessionIdRef.current ?? startedAtRef.current ?? "pending";
+      const providerIdentity =
+        transcript.providerId ?? `sequence-${++transcriptSequenceRef.current}`;
+      realtimeVoiceTranscriptRegistry.publish({
+        id: `realtime-voice:${sessionIdentity}:${transcript.role}:${providerIdentity}`,
+        threadId,
+        role: transcript.role,
+        text: transcript.text,
+        createdAt: new Date().toISOString(),
+      });
+    },
+    [],
+  );
+
   const handleServerEvent = useCallback(
     (event: RealtimeServerEvent) => {
       if (event.type === "session.created") {
@@ -367,14 +538,16 @@ function useRealtimeVoiceModeController(
         if (typeof event.transcript === "string") {
           lastAssistantTextRef.current = event.transcript;
         }
+        persistCompletedTranscript(event);
         syncAppState("speaking");
       } else if (
         event.type === "conversation.item.input_audio_transcription.completed"
       ) {
         if (typeof event.transcript === "string") {
           lastUserTextRef.current = event.transcript;
-          syncAppState("working");
         }
+        persistCompletedTranscript(event);
+        syncAppState("working");
       } else if (event.type === "response.done") {
         const response = event.response;
         const status =
@@ -410,7 +583,14 @@ function useRealtimeVoiceModeController(
         transition("listening");
       }
     },
-    [copy, fail, handleFunctionCall, syncAppState, transition],
+    [
+      copy,
+      fail,
+      handleFunctionCall,
+      persistCompletedTranscript,
+      syncAppState,
+      transition,
+    ],
   );
 
   const start = useCallback(async () => {
@@ -430,6 +610,9 @@ function useRealtimeVoiceModeController(
     lastUserTextRef.current = "";
     lastAssistantTextRef.current = "";
     sessionIdRef.current = undefined;
+    transcriptThreadIdRef.current =
+      realtimeVoiceTranscriptRegistry.activeThreadId();
+    transcriptSequenceRef.current = 0;
     transition("connecting");
     setChatVisible(false);
     window.dispatchEvent(new Event("agent-panel:close"));
@@ -445,6 +628,7 @@ function useRealtimeVoiceModeController(
         },
       });
       streamRef.current = stream;
+      attachAudioMeter(stream, "input");
 
       const peer = new RTCPeerConnection();
       peerRef.current = peer;
@@ -455,7 +639,9 @@ function useRealtimeVoiceModeController(
       audio.setAttribute("playsinline", "");
       audioRef.current = audio;
       peer.ontrack = (trackEvent) => {
-        audio.srcObject = trackEvent.streams[0] ?? null;
+        const remoteStream = trackEvent.streams[0] ?? null;
+        audio.srcObject = remoteStream;
+        if (remoteStream) attachAudioMeter(remoteStream, "output");
         void audio.play().catch(() => undefined);
       };
 
@@ -501,15 +687,42 @@ function useRealtimeVoiceModeController(
       const status = (startError as { status?: unknown })?.status;
       fail(errorMessage(startError), { openKeySettings: status === 400 });
     }
-  }, [browserTabId, copy, fail, handleServerEvent, transition]);
+  }, [
+    attachAudioMeter,
+    browserTabId,
+    copy,
+    fail,
+    handleServerEvent,
+    transition,
+  ]);
 
   const end = useCallback(() => {
     if (stateRef.current === "idle" || stateRef.current === "ending") return;
+    const transcriptThreadId = transcriptThreadIdRef.current;
+    const activeThreadId = realtimeVoiceTranscriptRegistry.activeThreadId();
     transition("ending");
     cleanupTransport();
     setError(null);
     sessionIdRef.current = undefined;
     startedAtRef.current = undefined;
+    transcriptThreadIdRef.current = undefined;
+    setChatVisible(true);
+    if (
+      shouldRestoreRealtimeVoiceTranscriptThread(
+        transcriptThreadId,
+        activeThreadId,
+      )
+    ) {
+      requestAgentChatThreadOpen({
+        threadId: transcriptThreadId,
+        // The request is delivered asynchronously. Re-checking this at the
+        // receiver prevents a navigation that happened during that gap from
+        // being overwritten.
+        onlyIfActiveThreadId: transcriptThreadId,
+      });
+    } else {
+      window.dispatchEvent(new Event("agent-panel:open"));
+    }
     transition("idle");
   }, [cleanupTransport, transition]);
 
@@ -538,6 +751,7 @@ function useRealtimeVoiceModeController(
     active: state !== "idle",
     errorMessage: error,
     chatVisible,
+    audioLevels,
     start,
     end,
     toggleChat,
@@ -568,10 +782,10 @@ export function RealtimeVoiceModeProvider({
               state={voice.state === "idle" ? "ending" : voice.state}
               copy={copy}
               chatVisible={voice.chatVisible}
+              audioLevels={voice.audioLevels}
               onToggleChat={voice.toggleChat}
               onEndVoiceMode={voice.end}
               errorMessage={voice.errorMessage}
-              className="z-[270]"
             />,
             document.body,
           )