fix: share dictation hook across surfaces

- add shared useDictation hook to prevent double-stop races
- refactor modal + agent chat to consume shared API
- improve web recorder errors with secure-context messaging

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

packages/app/src/components/agent-input-area.tsx

@@ -21,7 +21,7 @@ import Animated, {
   FadeOut,
 } from "react-native-reanimated";
 import { useRealtime } from "@/contexts/realtime-context";
-import { useAudioRecorder } from "@/hooks/use-audio-recorder";
+import { useDictation } from "@/hooks/use-dictation";
 import { FOOTER_HEIGHT } from "@/contexts/footer-controls-context";
 import { VoiceNoteRecordingOverlay } from "./voice-note-recording-overlay";
 import { generateMessageId } from "@/types/stream";
@@ -107,39 +107,111 @@ export function AgentInputArea({ agentId, serverId }: AgentInputAreaProps) {
   
   const [userInput, setUserInput] = useState("");
   const [inputHeight, setInputHeight] = useState(MIN_INPUT_HEIGHT);
-  const [isRecording, setIsRecording] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
   const [selectedImages, setSelectedImages] = useState<Array<{ uri: string; mimeType: string }>>([]);
-  const [recordingVolume, setRecordingVolume] = useState(0);
-  const [recordingDuration, setRecordingDuration] = useState(0);
-  const [transcribingRequestId, setTranscribingRequestId] = useState<string | null>(null);
   const [isCancellingAgent, setIsCancellingAgent] = useState(false);
   const [audioDebugInfo, setAudioDebugInfo] = useState<AudioDebugInfo | null>(null);
   
-  const recordingIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const textInputRef = useRef<TextInput | (TextInput & { getNativeRef?: () => unknown }) | null>(null);
   const inputHeightRef = useRef(MIN_INPUT_HEIGHT);
   const baselineInputHeightRef = useRef<number | null>(null);
   const overlayTransition = useSharedValue(0);
   const { pickImages } = useImageAttachmentPicker();
   const shouldShowAudioDebug = AUDIO_DEBUG_ENABLED;
-  const pendingTranscriptionRef = useRef<{ requestId: string } | null>(null);
   const agentIdRef = useRef(agentId);
   const sendAgentMessageRef = useRef(sendAgentMessage);
   const agentStatusRef = useRef<string | undefined>(undefined);
   const updateQueueRef = useRef<
     ((updater: (current: QueuedMessage[]) => QueuedMessage[]) => void) | null
   >(null);
+  const handleDictationTranscript = useCallback(
+    (text: string) => {
+      if (!text) {
+        return;
+      }
+      const shouldQueue = agentStatusRef.current === "running";
+      if (shouldQueue) {
+        updateQueueRef.current?.((current) => [
+          ...current,
+          {
+            id: generateMessageId(),
+            text,
+          },
+        ]);
+        return;
+      }
+      void (async () => {
+        try {
+          await sendAgentMessageRef.current?.(agentIdRef.current, text);
+        } catch (error) {
+          console.error("[AgentInput] Failed to send transcribed message:", error);
+          updateQueueRef.current?.((current) => [
+            ...current,
+            {
+              id: generateMessageId(),
+              text,
+            },
+          ]);
+        }
+      })();
+    },
+    []
+  );
 
-  // Stabilize audio level callback to prevent recorder recreation on every render
-  const handleRecordingAudioLevel = useCallback((level: number) => {
-    setRecordingVolume(level);
+  const handleDictationError = useCallback((error: Error) => {
+    console.error("[AgentInput] Dictation error:", error);
   }, []);
 
-  const audioRecorder = useAudioRecorder({
-    onAudioLevel: handleRecordingAudioLevel,
+  const canStartDictation = useCallback(() => {
+    const allowed = !isRealtimeMode && ws.isConnected;
+    console.log("[AgentInput] canStartDictation", {
+      allowed,
+      isRealtimeMode,
+      wsConnected: ws.isConnected,
+    });
+    return allowed;
+  }, [isRealtimeMode, ws.isConnected]);
+
+  const canConfirmDictation = useCallback(() => {
+    const allowed = ws.isConnected;
+    console.log("[AgentInput] canConfirmDictation", {
+      allowed,
+      wsConnected: ws.isConnected,
+    });
+    return allowed;
+  }, [ws.isConnected]);
+
+  const {
+    isRecording: isDictating,
+    isProcessing: isDictationProcessing,
+    volume: dictationVolume,
+    duration: dictationDuration,
+    pendingRequestId: dictationPendingRequestId,
+    startDictation,
+    cancelDictation,
+    confirmDictation,
+  } = useDictation({
+    agentId,
+    sendAgentAudio,
+    ws,
+    mode: "transcribe_only",
+    onTranscript: handleDictationTranscript,
+    onError: handleDictationError,
+    canStart: canStartDictation,
+    canConfirm: canConfirmDictation,
+    enableDuration: true,
   });
 
+  const dictationRequestIdRef = useRef<string | null>(null);
+  useEffect(() => {
+    dictationRequestIdRef.current = dictationPendingRequestId;
+  }, [dictationPendingRequestId]);
+
+  useEffect(() => {
+    const shouldShowOverlay = isDictating || isDictationProcessing;
+    overlayTransition.value = withTiming(shouldShowOverlay ? 1 : 0, { duration: 250 });
+  }, [isDictating, isDictationProcessing, overlayTransition]);
+
   const debugInputHeight = (label: string, payload: Record<string, unknown>) => {
     if (!SHOULD_DEBUG_INPUT_HEIGHT) {
       return;
@@ -196,11 +268,12 @@ export function AgentInputArea({ agentId, serverId }: AgentInputAreaProps) {
   }
 
   async function handleVoicePress() {
-    if (isRecording) {
-      // This shouldn't happen as button is hidden when recording
-      return;
-    }
-    if (isRealtimeMode) {
+    console.log("[AgentInput] handleVoicePress", {
+      isDictating,
+      isRealtimeMode,
+      wsConnected: ws.isConnected,
+    });
+    if (isDictating || isRealtimeMode) {
       return;
     }
 
@@ -208,19 +281,12 @@ export function AgentInputArea({ agentId, serverId }: AgentInputAreaProps) {
       setAudioDebugInfo(null);
     }
 
-    // Start recording
     try {
-      await audioRecorder.start();
-      setIsRecording(true);
-      setRecordingDuration(0);
-      overlayTransition.value = withTiming(1, { duration: 250 });
-      
-      // Start duration timer
-      recordingIntervalRef.current = setInterval(() => {
-        setRecordingDuration((prev) => prev + 1);
-      }, 1000);
+      await startDictation();
+      console.log("[AgentInput] startDictation invoked");
     } catch (error) {
-      const isCancelled = error instanceof Error && error.message.includes("Recording cancelled");
+      const isCancelled =
+        error instanceof Error && error.message.includes("Recording cancelled");
       if (!isCancelled) {
         console.error("[AgentInput] Failed to start recording:", error);
       }
@@ -228,152 +294,66 @@ export function AgentInputArea({ agentId, serverId }: AgentInputAreaProps) {
   }
 
   async function handleCancelRecording() {
+    console.log("[AgentInput] handleCancelRecording", {
+      isDictating,
+      isDictationProcessing,
+    });
+    if (!isDictating && !isDictationProcessing) {
+      return;
+    }
     try {
-      // Stop recording without sending
-      await audioRecorder.stop();
-      setIsRecording(false);
-      overlayTransition.value = withTiming(0, { duration: 250 });
-      
-      // Clear timer
-      if (recordingIntervalRef.current) {
-        clearInterval(recordingIntervalRef.current);
-        recordingIntervalRef.current = null;
-      }
-      setRecordingDuration(0);
-      setRecordingVolume(0);
+      await cancelDictation();
     } catch (error) {
       console.error("[AgentInput] Failed to cancel recording:", error);
-      setIsRecording(false);
-      overlayTransition.value = withTiming(0, { duration: 250 });
     }
   }
 
   async function handleSendRecording() {
+    console.log("[AgentInput] handleSendRecording", {
+      isDictating,
+      isDictationProcessing,
+    });
+    if (!isDictating) {
+      return;
+    }
     try {
-      const audioData = await audioRecorder.stop();
-      setIsRecording(false);
-      
-      // Clear timer
-      if (recordingIntervalRef.current) {
-        clearInterval(recordingIntervalRef.current);
-        recordingIntervalRef.current = null;
-      }
-      setRecordingDuration(0);
-      setRecordingVolume(0);
-
-      if (audioData) {
-        // Generate request ID for tracking transcription
-        const requestId = generateMessageId();
-        setTranscribingRequestId(requestId);
-        pendingTranscriptionRef.current = {
-          requestId,
-        };
-        console.log("[AgentInput] Audio recorded:", audioData.size, "bytes", "requestId:", requestId);
-
-        try {
-          // Send audio to agent for transcription and processing
-          await sendAgentAudio(agentId, audioData, requestId, { mode: "transcribe_only" });
-          console.log("[AgentInput] Audio sent to agent");
-        } catch (error) {
-          console.error("[AgentInput] Failed to send audio:", error);
-          // Clear transcribing state on error
-          setTranscribingRequestId(null);
-          pendingTranscriptionRef.current = null;
-          overlayTransition.value = withTiming(0, { duration: 250 });
-        }
-      } else {
-        // No audio data, dismiss overlay immediately
-        overlayTransition.value = withTiming(0, { duration: 250 });
-      }
+      await confirmDictation();
     } catch (error) {
-      console.error("[AgentInput] Failed to stop recording:", error);
-      setIsRecording(false);
-      setTranscribingRequestId(null);
-      pendingTranscriptionRef.current = null;
-      overlayTransition.value = withTiming(0, { duration: 250 });
+      console.error("[AgentInput] Failed to send recording:", error);
     }
   }
 
   useEffect(() => {
+    if (!shouldShowAudioDebug) {
+      return;
+    }
     const unsubscribe = ws.on("transcription_result", (message: SessionOutboundMessage) => {
       if (message.type !== "transcription_result") {
         return;
       }
 
-      const pending = pendingTranscriptionRef.current;
-      if (!pending || !message.payload.requestId) {
+      const pendingRequestId = dictationRequestIdRef.current;
+      if (!pendingRequestId || message.payload.requestId !== pendingRequestId) {
         return;
       }
 
-      if (message.payload.requestId !== pending.requestId) {
-        return;
-      }
-
-      console.log("[AgentInput] Transcription completed for requestId:", pending.requestId);
-      pendingTranscriptionRef.current = null;
-      setTranscribingRequestId(null);
-      overlayTransition.value = withTiming(0, { duration: 250 });
-
-      if (shouldShowAudioDebug) {
-        setAudioDebugInfo({
-          requestId: pending.requestId,
-          transcript: message.payload.text?.trim(),
-          debugRecordingPath: message.payload.debugRecordingPath ?? undefined,
-          format: message.payload.format,
-          byteLength: message.payload.byteLength,
-          duration: message.payload.duration,
-          avgLogprob: message.payload.avgLogprob,
-          isLowConfidence: message.payload.isLowConfidence,
-        });
-      }
-
-      const transcriptText = message.payload.text?.trim();
-      if (!transcriptText) {
-        return;
-      }
-
-      const shouldQueue = agentStatusRef.current === "running";
-      if (shouldQueue) {
-        updateQueueRef.current?.((current) => [
-          ...current,
-          {
-            id: generateMessageId(),
-            text: transcriptText,
-          },
-        ]);
-        return;
-      }
-
-      void (async () => {
-        try {
-          await sendAgentMessageRef.current?.(agentIdRef.current, transcriptText);
-        } catch (error) {
-          console.error("[AgentInput] Failed to send transcribed message:", error);
-          updateQueueRef.current?.((current) => [
-            ...current,
-            {
-              id: generateMessageId(),
-              text: transcriptText,
-            },
-          ]);
-        }
-      })();
+      dictationRequestIdRef.current = null;
+      setAudioDebugInfo({
+        requestId: pendingRequestId,
+        transcript: message.payload.text?.trim(),
+        debugRecordingPath: message.payload.debugRecordingPath ?? undefined,
+        format: message.payload.format,
+        byteLength: message.payload.byteLength,
+        duration: message.payload.duration,
+        avgLogprob: message.payload.avgLogprob,
+        isLowConfidence: message.payload.isLowConfidence,
+      });
     });
 
     return () => {
       unsubscribe();
     };
-  }, [ws, overlayTransition, shouldShowAudioDebug]);
-
-  // Cleanup timer on unmount
-  useEffect(() => {
-    return () => {
-      if (recordingIntervalRef.current) {
-        clearInterval(recordingIntervalRef.current);
-      }
-    };
-  }, []);
-
+  }, [shouldShowAudioDebug, ws]);
 
   function isTextAreaLike(value: unknown): value is TextAreaHandle {
     if (!value || typeof value !== "object") {
@@ -600,7 +580,7 @@ export function AgentInputArea({ agentId, serverId }: AgentInputAreaProps) {
         event.preventDefault();
         event.stopPropagation();
 
-        if (isRecording) {
+        if (isDictating) {
           void handleSendRecording();
           return;
         }
@@ -611,7 +591,7 @@ export function AgentInputArea({ agentId, serverId }: AgentInputAreaProps) {
         return;
       }
 
-      if (key === "escape" && isRecording) {
+      if (key === "escape" && isDictating) {
         event.preventDefault();
         event.stopPropagation();
         void handleCancelRecording();
@@ -623,7 +603,7 @@ export function AgentInputArea({ agentId, serverId }: AgentInputAreaProps) {
       window.removeEventListener("keydown", listener, true);
     };
   }, [
-    isRecording,
+    isDictating,
     isRealtimeMode,
     shouldShowVoiceControls,
     ws,
@@ -768,10 +748,10 @@ export function AgentInputArea({ agentId, serverId }: AgentInputAreaProps) {
       style={[
         styles.voiceButton as any,
         (!ws.isConnected || isRealtimeMode ? styles.buttonDisabled : undefined) as any,
-        (isRecording ? styles.voiceButtonRecording : undefined) as any,
+        (isDictating ? styles.voiceButtonRecording : undefined) as any,
       ]}
     >
-      {isRecording ? (
+      {isDictating ? (
         <Square size={14} color="white" fill="white" />
       ) : (
         <Mic size={20} color={theme.colors.foreground} />
@@ -858,7 +838,7 @@ export function AgentInputArea({ agentId, serverId }: AgentInputAreaProps) {
             multiline
             scrollEnabled={inputHeight >= MAX_INPUT_HEIGHT}
             onContentSizeChange={handleContentSizeChange}
-            editable={!isRecording && ws.isConnected}
+            editable={!isDictating && ws.isConnected}
             onKeyPress={shouldHandleDesktopSubmit ? handleDesktopSubmitKeyPress : undefined}
           />
 
@@ -942,11 +922,11 @@ export function AgentInputArea({ agentId, serverId }: AgentInputAreaProps) {
         <Animated.View style={[styles.overlayContainer, overlayAnimatedStyle]}>
           <View style={styles.inputAreaContent}>
             <VoiceNoteRecordingOverlay
-              volume={recordingVolume}
-              duration={recordingDuration}
+              volume={dictationVolume}
+              duration={dictationDuration}
               onCancel={handleCancelRecording}
               onSend={handleSendRecording}
-              isTranscribing={transcribingRequestId !== null}
+              isTranscribing={isDictationProcessing}
             />
           </View>
         </Animated.View>

packages/app/src/components/create-agent-modal.tsx

@@ -41,7 +41,7 @@ import { theme as defaultTheme } from "@/styles/theme";
 import { useRecentPaths } from "@/hooks/use-recent-paths";
 import { useRouter } from "expo-router";
 import { generateMessageId } from "@/types/stream";
-import { useAudioRecorder } from "@/hooks/use-audio-recorder";
+import { useDictation } from "@/hooks/use-dictation";
 import { VolumeMeter } from "@/components/volume-meter";
 import { AUDIO_DEBUG_ENABLED } from "@/config/audio-debug";
 import { AudioDebugNotice, type AudioDebugInfo } from "./audio-debug-notice";
@@ -280,7 +280,10 @@ function AgentFlowModal({
   const effectiveWs = ws ?? inertWebSocket;
   const createAgent = session?.createAgent;
   const resumeAgent = session?.resumeAgent;
-  const sendAgentAudio = session?.sendAgentAudio;
+  const sessionSendAgentAudio = session?.sendAgentAudio;
+  const noopSendAgentAudio = useCallback<SessionContextValue["sendAgentAudio"]>(async () => {}, []);
+  const sendAgentAudio = sessionSendAgentAudio ?? noopSendAgentAudio;
+  const hasSendAgentAudio = Boolean(sessionSendAgentAudio);
   const agents = session?.agents;
   const providerModels = session?.providerModels;
   const requestProviderModels = session?.requestProviderModels;
@@ -385,9 +388,6 @@ function AgentFlowModal({
   );
   const [isImportLoading, setIsImportLoading] = useState(false);
   const [importError, setImportError] = useState<string | null>(null);
-  const [isDictating, setIsDictating] = useState(false);
-  const [isDictationProcessing, setIsDictationProcessing] = useState(false);
-  const [dictationVolume, setDictationVolume] = useState(0);
   const [dictationDebugInfo, setDictationDebugInfo] = useState<AudioDebugInfo | null>(null);
   const [openDropdown, setOpenDropdown] = useState<DropdownKey | null>(null);
   const pendingRequestIdRef = useRef<string | null>(null);
@@ -395,6 +395,7 @@ function AgentFlowModal({
   const promptInputRef = useRef<
     TextInput | (TextInput & { getNativeRef?: () => unknown }) | null
   >(null);
+  const focusPromptInputRef = useRef<() => void>(() => {});
   const promptInputHeightRef = useRef(PROMPT_MIN_HEIGHT);
   const promptBaselineHeightRef = useRef<number | null>(null);
   const formPreferencesHydratedRef = useRef(false);
@@ -407,17 +408,80 @@ function AgentFlowModal({
   const prevVisibilityRef = useRef(isVisible);
   const dictationRequestIdRef = useRef<string | null>(null);
 
-  // Stabilize audio level callback to prevent recorder recreation on every render
-  const handleDictationAudioLevel = useCallback((level: number) => {
-    setDictationVolume(level);
-  }, []);
+  const handleDictationTranscript = useCallback(
+    (text: string, _meta: { requestId: string }) => {
+      if (!isCreateFlow || !text) {
+        return;
+      }
+      setInitialPrompt((prev) => {
+        if (!prev) {
+          return text;
+        }
+        const needsSpace = /\s$/.test(prev);
+        return `${prev}${needsSpace ? "" : " "}${text}`;
+      });
+      focusPromptInputRef.current?.();
+    },
+    [isCreateFlow, setInitialPrompt]
+  );
 
-  const dictationRecorder = useAudioRecorder({
-    onAudioLevel: handleDictationAudioLevel,
+  const handleDictationError = useCallback(
+    (dictationError: Error) => {
+      setErrorMessage(dictationError.message);
+    },
+    []
+  );
+
+  const canStartDictation = useCallback(() => {
+    const allowed = isCreateFlow && !isLoading && isTargetDaemonReady && isWsConnected;
+    console.log("[CreateAgentModal] canStartDictation", {
+      allowed,
+      isCreateFlow,
+      isLoading,
+      isTargetDaemonReady,
+      isWsConnected,
+    });
+    return allowed;
+  }, [isCreateFlow, isLoading, isTargetDaemonReady, isWsConnected]);
+
+  const canConfirmDictation = useCallback(() => {
+    const allowed = isTargetDaemonReady && hasSendAgentAudio;
+    console.log("[CreateAgentModal] canConfirmDictation", {
+      allowed,
+      isTargetDaemonReady,
+      hasSendAgentAudio,
+    });
+    return allowed;
+  }, [hasSendAgentAudio, isTargetDaemonReady]);
+
+  const {
+    isRecording: isDictating,
+    isProcessing: isDictationProcessing,
+    volume: dictationVolume,
+    pendingRequestId: dictationPendingRequestId,
+    startDictation,
+    cancelDictation,
+    confirmDictation,
+    reset: resetDictation,
+  } = useDictation({
+    agentId: DICTATION_AGENT_ID,
+    sendAgentAudio,
+    ws: effectiveWs,
+    mode: "transcribe_only",
+    onTranscript: handleDictationTranscript,
+    onError: handleDictationError,
+    canStart: canStartDictation,
+    canConfirm: canConfirmDictation,
+    autoStopWhenHidden: { isVisible },
   });
   const shouldShowAudioDebug = AUDIO_DEBUG_ENABLED;
+
+  useEffect(() => {
+    dictationRequestIdRef.current = dictationPendingRequestId;
+  }, [dictationPendingRequestId]);
+
   const hasPendingCreateOrResume = pendingRequestIdRef.current !== null;
-  const hasPendingDictation = dictationRequestIdRef.current !== null;
+  const hasPendingDictation = dictationPendingRequestId !== null;
   const shouldListenForStatus = isVisible || hasPendingCreateOrResume;
   const shouldListenForDictation =
     isCreateFlow && (isVisible || hasPendingDictation);
@@ -800,6 +864,9 @@ function AgentFlowModal({
       }
     }
   }, [shouldAutoFocusPrompt]);
+  useEffect(() => {
+    focusPromptInputRef.current = focusPromptInput;
+  }, [focusPromptInput]);
   const activeSessionIds = useMemo(() => {
     const ids = new Set<string>();
     if (!agents) {
@@ -916,17 +983,21 @@ function AgentFlowModal({
     pendingNavigationServerIdRef.current = null;
     shouldSyncBaseBranchRef.current = true;
     dictationRequestIdRef.current = null;
-    setIsDictating(false);
-    setIsDictationProcessing(false);
-    setDictationVolume(0);
     setDictationDebugInfo(null);
-    if (isDictating) {
-      void dictationRecorder.stop().catch(() => {});
-    }
+    void cancelDictation();
+    resetDictation();
     cancelRepoInfo();
-  }, [cancelRepoInfo, dictationRecorder, isDictating, resetRepoInfo, setPromptHeight]);
+  }, [cancelRepoInfo, cancelDictation, resetDictation, resetRepoInfo, setPromptHeight]);
 
   const handleDictationStart = useCallback(async () => {
+    console.log("[CreateAgentModal] handleDictationStart", {
+      isCreateFlow,
+      isLoading,
+      isDictating,
+      isDictationProcessing,
+      isTargetDaemonReady,
+      isWsConnected,
+    });
     if (!isCreateFlow || isLoading || isDictating || isDictationProcessing) {
       return;
     }
@@ -941,21 +1012,17 @@ function AgentFlowModal({
       if (shouldShowAudioDebug) {
         setDictationDebugInfo(null);
       }
-      setIsDictating(true);
-      setDictationVolume(0);
       setErrorMessage("");
-      await dictationRecorder.start();
+      await startDictation();
+      console.log("[CreateAgentModal] startDictation invoked");
     } catch (error) {
       const isCancelled = error instanceof Error && error.message.includes("Recording cancelled");
       if (!isCancelled) {
         console.error("[CreateAgentModal] Failed to start dictation:", error);
       }
-      setIsDictating(false);
-      setDictationVolume(0);
     }
   }, [
     daemonAvailabilityError,
-    dictationRecorder,
     isCreateFlow,
     isDictating,
     isDictationProcessing,
@@ -964,27 +1031,34 @@ function AgentFlowModal({
     isWsConnected,
     logOfflineDaemonAction,
     shouldShowAudioDebug,
+    startDictation,
   ]);
 
   const handleDictationCancel = useCallback(async () => {
+    console.log("[CreateAgentModal] handleDictationCancel", {
+      isDictating,
+    });
     if (!isDictating) {
       return;
     }
     try {
-      await dictationRecorder.stop();
+      await cancelDictation();
     } catch (error) {
       console.error("[CreateAgentModal] Failed to cancel dictation:", error);
-    } finally {
-      setIsDictating(false);
-      setDictationVolume(0);
     }
-  }, [dictationRecorder, isDictating]);
+  }, [cancelDictation, isDictating]);
 
   const handleDictationConfirm = useCallback(async () => {
+    console.log("[CreateAgentModal] handleDictationConfirm", {
+      isDictating,
+      isDictationProcessing,
+      isTargetDaemonReady,
+      hasSendAgentAudio,
+    });
     if (!isDictating || isDictationProcessing) {
       return;
     }
-    if (!sendAgentAudio || !isTargetDaemonReady) {
+    if (!isTargetDaemonReady || !hasSendAgentAudio) {
       logOfflineDaemonAction("dictation");
       setErrorMessage(
         daemonAvailabilityError ??
@@ -992,44 +1066,19 @@ function AgentFlowModal({
       );
       return;
     }
-
-    // Set processing state BEFORE stopping to ensure UI updates properly
-    setIsDictationProcessing(true);
-
     try {
-      const audioData = await dictationRecorder.stop();
-      setDictationVolume(0);
-      if (!audioData) {
-        setIsDictating(false);
-        setIsDictationProcessing(false);
-        return;
-      }
-      const requestId = generateMessageId();
-      dictationRequestIdRef.current = requestId;
-      await sendAgentAudio(
-        DICTATION_AGENT_ID,
-        audioData,
-        requestId,
-        { mode: "transcribe_only" }
-      );
-      // Only clear isDictating after successful transcription send
-      setIsDictating(false);
+      await confirmDictation();
     } catch (error) {
       console.error("[CreateAgentModal] Failed to complete dictation:", error);
-      dictationRequestIdRef.current = null;
-      setIsDictationProcessing(false);
-      // CRITICAL FIX: Always reset dictation state on error
-      setIsDictating(false);
-      setDictationVolume(0);
     }
   }, [
     daemonAvailabilityError,
-    dictationRecorder,
+    confirmDictation,
+    hasSendAgentAudio,
     isDictating,
     isDictationProcessing,
     isTargetDaemonReady,
     logOfflineDaemonAction,
-    sendAgentAudio,
   ]);
 
   const navigateToAgentIfNeeded = useCallback(() => {
@@ -1165,39 +1214,6 @@ function AgentFlowModal({
     handleCloseAnimationComplete,
   ]);
 
-  useEffect(() => {
-    if (isVisible || !isDictating) {
-      return;
-    }
-    let cancelled = false;
-
-    const stopRecording = async () => {
-      try {
-        await dictationRecorder.stop();
-      } catch (error) {
-        console.error("[CreateAgentModal] Failed to stop dictation while hidden:", error);
-      } finally {
-        if (!cancelled) {
-          setIsDictating(false);
-          setDictationVolume(0);
-        }
-      }
-    };
-
-    void stopRecording();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [dictationRecorder, isDictating, isVisible]);
-
-  useEffect(() => {
-    return () => {
-      if (isDictating) {
-        void dictationRecorder.stop().catch(() => {});
-      }
-    };
-  }, [dictationRecorder, isDictating]);
 
   useEffect(() => {
     return () => {
@@ -1656,7 +1672,7 @@ function AgentFlowModal({
   }, [handleClose, shouldListenForStatus, ws]);
 
   useEffect(() => {
-    if (!shouldListenForDictation || !ws) {
+    if (!shouldListenForDictation || !ws || !shouldShowAudioDebug) {
       return;
     }
     const unsubscribe = ws.on("transcription_result", (message) => {
@@ -1668,37 +1684,22 @@ function AgentFlowModal({
         return;
       }
       dictationRequestIdRef.current = null;
-      setIsDictationProcessing(false);
-      if (shouldShowAudioDebug) {
-        setDictationDebugInfo({
-          requestId: pendingId,
-          transcript: message.payload.text?.trim(),
-          debugRecordingPath: message.payload.debugRecordingPath ?? undefined,
-          format: message.payload.format,
-          byteLength: message.payload.byteLength,
-          duration: message.payload.duration,
-          avgLogprob: message.payload.avgLogprob,
-          isLowConfidence: message.payload.isLowConfidence,
-        });
-      }
-      const transcriptText = message.payload.text?.trim();
-      if (!transcriptText) {
-        return;
-      }
-      setInitialPrompt((prev) => {
-        if (!prev) {
-          return transcriptText;
-        }
-        const needsSpace = /\s$/.test(prev);
-        return `${prev}${needsSpace ? "" : " "}${transcriptText}`;
+      setDictationDebugInfo({
+        requestId: pendingId,
+        transcript: message.payload.text?.trim(),
+        debugRecordingPath: message.payload.debugRecordingPath ?? undefined,
+        format: message.payload.format,
+        byteLength: message.payload.byteLength,
+        duration: message.payload.duration,
+        avgLogprob: message.payload.avgLogprob,
+        isLowConfidence: message.payload.isLowConfidence,
       });
-      focusPromptInput();
     });
 
     return () => {
       unsubscribe();
     };
-  }, [focusPromptInput, shouldListenForDictation, ws, shouldShowAudioDebug]);
+  }, [shouldListenForDictation, shouldShowAudioDebug, ws]);
 
   useEffect(() => {
     if (!isVisible || !isImportFlow) {