Move mic button from terminal overlay to project action buttons

Relocates the voice/mic toggle from a floating overlay on the terminal
view to the project command row (alongside Stop, Terminal, Config) so
it no longer blocks access to the terminal window.

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

app/src-tauri/src/models/app_settings.rs

@@ -70,6 +70,8 @@ pub struct AppSettings {
     pub dismissed_update_version: Option<String>,
     #[serde(default)]
     pub timezone: Option<String>,
+    #[serde(default)]
+    pub default_microphone: Option<String>,
 }
 
 impl Default for AppSettings {
@@ -87,6 +89,7 @@ impl Default for AppSettings {
             auto_check_updates: true,
             dismissed_update_version: None,
             timezone: None,
+            default_microphone: None,
         }
     }
 }

app/src/components/projects/ProjectCard.tsx

@@ -5,6 +5,8 @@ import type { Project, ProjectPath, AuthMode, BedrockConfig, BedrockAuthMethod }
 import { useProjects } from "../../hooks/useProjects";
 import { useMcpServers } from "../../hooks/useMcpServers";
 import { useTerminal } from "../../hooks/useTerminal";
+import { useSettings } from "../../hooks/useSettings";
+import { useVoice } from "../../hooks/useVoice";
 import { useAppState } from "../../store/appState";
 import EnvVarsModal from "./EnvVarsModal";
 import PortMappingsModal from "./PortMappingsModal";
@@ -21,6 +23,15 @@ export default function ProjectCard({ project }: Props) {
   const { start, stop, rebuild, remove, update } = useProjects();
   const { mcpServers } = useMcpServers();
   const { open: openTerminal } = useTerminal();
+  const { appSettings } = useSettings();
+  const sessions = useAppState(s => s.sessions);
+  const activeSessionId = useAppState(s => s.activeSessionId);
+
+  // Find the active terminal session for this project (prefer the currently viewed one)
+  const projectSession = sessions.find(s => s.projectId === project.id && s.id === activeSessionId)
+    ?? sessions.find(s => s.projectId === project.id);
+  const voice = useVoice(projectSession?.id ?? "", appSettings?.default_microphone);
+
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [showConfig, setShowConfig] = useState(false);
@@ -371,6 +382,9 @@ export default function ProjectCard({ project }: Props) {
               <>
                 <ActionButton onClick={handleStop} disabled={loading} label="Stop" />
                 <ActionButton onClick={handleOpenTerminal} disabled={loading} label="Terminal" accent />
+                {projectSession && (
+                  <MicButton voice={voice} />
+                )}
               </>
             ) : (
               <>
@@ -869,3 +883,35 @@ function ActionButton({
     </button>
   );
 }
+
+function MicButton({ voice }: { voice: ReturnType<typeof useVoice> }) {
+  const color =
+    voice.state === "active"
+      ? "text-[var(--success)] hover:text-[var(--success)]"
+      : voice.state === "starting"
+        ? "text-[var(--warning)] opacity-75"
+        : voice.state === "error"
+          ? "text-[var(--error)] hover:text-[var(--error)]"
+          : "text-[var(--text-secondary)] hover:text-[var(--text-primary)]";
+
+  return (
+    <button
+      onClick={(e) => { e.stopPropagation(); voice.toggle(); }}
+      disabled={voice.state === "starting"}
+      title={
+        voice.state === "active"
+          ? "Voice active — click to stop"
+          : voice.error
+            ? `Voice error: ${voice.error}`
+            : "Enable voice input for /voice mode"
+      }
+      className={`text-xs px-2 py-0.5 rounded transition-colors disabled:opacity-50 ${color} hover:bg-[var(--bg-primary)]`}
+    >
+      {voice.state === "active"
+        ? "Mic On"
+        : voice.state === "starting"
+          ? "Mic..."
+          : "Mic Off"}
+    </button>
+  );
+}

app/src/components/settings/MicrophoneSettings.tsx

@@ -0,0 +1,101 @@
+import { useState, useEffect, useCallback } from "react";
+import { useSettings } from "../../hooks/useSettings";
+
+interface AudioDevice {
+  deviceId: string;
+  label: string;
+}
+
+export default function MicrophoneSettings() {
+  const { appSettings, saveSettings } = useSettings();
+  const [devices, setDevices] = useState<AudioDevice[]>([]);
+  const [selected, setSelected] = useState(appSettings?.default_microphone ?? "");
+  const [loading, setLoading] = useState(false);
+  const [permissionNeeded, setPermissionNeeded] = useState(false);
+
+  // Sync local state when appSettings change
+  useEffect(() => {
+    setSelected(appSettings?.default_microphone ?? "");
+  }, [appSettings?.default_microphone]);
+
+  const enumerateDevices = useCallback(async () => {
+    setLoading(true);
+    setPermissionNeeded(false);
+    try {
+      // Request mic permission first so device labels are available
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      stream.getTracks().forEach((t) => t.stop());
+
+      const allDevices = await navigator.mediaDevices.enumerateDevices();
+      const mics = allDevices
+        .filter((d) => d.kind === "audioinput")
+        .map((d) => ({
+          deviceId: d.deviceId,
+          label: d.label || `Microphone (${d.deviceId.slice(0, 8)}...)`,
+        }));
+      setDevices(mics);
+    } catch {
+      setPermissionNeeded(true);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // Enumerate devices on mount
+  useEffect(() => {
+    enumerateDevices();
+  }, [enumerateDevices]);
+
+  const handleChange = async (deviceId: string) => {
+    setSelected(deviceId);
+    if (appSettings) {
+      await saveSettings({ ...appSettings, default_microphone: deviceId || null });
+    }
+  };
+
+  return (
+    <div>
+      <label className="block text-sm font-medium mb-1">Microphone</label>
+      <p className="text-xs text-[var(--text-secondary)] mb-1.5">
+        Audio input device for Claude Code voice mode (/voice)
+      </p>
+      {permissionNeeded ? (
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-[var(--text-secondary)]">
+            Microphone permission required
+          </span>
+          <button
+            onClick={enumerateDevices}
+            className="text-xs px-2 py-0.5 text-[var(--accent)] hover:text-[var(--accent-hover)] hover:bg-[var(--bg-primary)] rounded transition-colors"
+          >
+            Grant Access
+          </button>
+        </div>
+      ) : (
+        <div className="flex items-center gap-2">
+          <select
+            value={selected}
+            onChange={(e) => handleChange(e.target.value)}
+            disabled={loading}
+            className="flex-1 px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+          >
+            <option value="">System Default</option>
+            {devices.map((d) => (
+              <option key={d.deviceId} value={d.deviceId}>
+                {d.label}
+              </option>
+            ))}
+          </select>
+          <button
+            onClick={enumerateDevices}
+            disabled={loading}
+            title="Refresh microphone list"
+            className="text-xs px-2 py-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-primary)] rounded transition-colors disabled:opacity-50"
+          >
+            {loading ? "..." : "Refresh"}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

app/src/components/settings/SettingsPanel.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import ApiKeyInput from "./ApiKeyInput";
 import DockerSettings from "./DockerSettings";
 import AwsSettings from "./AwsSettings";
+import MicrophoneSettings from "./MicrophoneSettings";
 import { useSettings } from "../../hooks/useSettings";
 import { useUpdates } from "../../hooks/useUpdates";
 import ClaudeInstructionsModal from "../projects/ClaudeInstructionsModal";
@@ -59,6 +60,8 @@ export default function SettingsPanel() {
       <DockerSettings />
       <AwsSettings />
 
+      <MicrophoneSettings />
+
       {/* Container Timezone */}
       <div>
         <label className="block text-sm font-medium mb-1">Container Timezone</label>

app/src/components/terminal/TerminalView.tsx

@@ -6,7 +6,6 @@ import { WebLinksAddon } from "@xterm/addon-web-links";
 import { openUrl } from "@tauri-apps/plugin-opener";
 import "@xterm/xterm/css/xterm.css";
 import { useTerminal } from "../../hooks/useTerminal";
-import { useVoice } from "../../hooks/useVoice";
 import { UrlDetector } from "../../lib/urlDetector";
 import UrlToast from "./UrlToast";
 
@@ -24,8 +23,6 @@ export default function TerminalView({ sessionId, active }: Props) {
   const detectorRef = useRef<UrlDetector | null>(null);
   const { sendInput, pasteImage, resize, onOutput, onExit } = useTerminal();
 
-  const voice = useVoice(sessionId);
-
   const [detectedUrl, setDetectedUrl] = useState<string | null>(null);
   const [imagePasteMsg, setImagePasteMsg] = useState<string | null>(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
@@ -203,7 +200,6 @@ export default function TerminalView({ sessionId, active }: Props) {
       try { webglRef.current?.dispose(); } catch { /* may already be disposed */ }
       webglRef.current = null;
       term.dispose();
-      voice.stop();
     };
   }, [sessionId]); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -288,32 +284,6 @@ export default function TerminalView({ sessionId, active }: Props) {
           {imagePasteMsg}
         </div>
       )}
-      <button
-        onClick={voice.toggle}
-        title={
-          voice.state === "active"
-            ? "Voice active — click to stop"
-            : voice.error
-              ? `Voice error: ${voice.error}`
-              : "Enable voice input for /voice mode"
-        }
-        className={`absolute bottom-4 left-4 z-50 px-3 py-1.5 rounded-md text-xs font-medium border shadow-lg transition-colors cursor-pointer ${
-          voice.state === "active"
-            ? "bg-[#1a3a2a] text-[#3fb950] border-[#238636] hover:bg-[#243b2a]"
-            : voice.state === "starting"
-              ? "bg-[#1f2937] text-[#d29922] border-[#30363d] opacity-75"
-              : voice.state === "error"
-                ? "bg-[#3a1a1a] text-[#ff7b72] border-[#da3633] hover:bg-[#4a2020]"
-                : "bg-[#1f2937] text-[#b1bac4] border-[#30363d] hover:bg-[#2d3748] hover:text-[#e6edf3]"
-        }`}
-        disabled={voice.state === "starting"}
-      >
-        {voice.state === "active"
-          ? "Mic On"
-          : voice.state === "starting"
-            ? "Mic..."
-            : "Mic Off"}
-      </button>
       {!isAtBottom && (
         <button
           onClick={handleScrollToBottom}

app/src/hooks/useVoice.ts

@@ -3,7 +3,7 @@ import * as commands from "../lib/tauri-commands";
 
 type VoiceState = "inactive" | "starting" | "active" | "error";
 
-export function useVoice(sessionId: string) {
+export function useVoice(sessionId: string, deviceId?: string | null) {
   const [state, setState] = useState<VoiceState>("inactive");
   const [error, setError] = useState<string | null>(null);
 
@@ -20,14 +20,19 @@ export function useVoice(sessionId: string) {
       // 1. Start the audio bridge in the container (creates FIFO writer)
       await commands.startAudioBridge(sessionId);
 
-      // 2. Get microphone access
+      // 2. Get microphone access (use specific device if configured)
+      const audioConstraints: MediaTrackConstraints = {
+        channelCount: 1,
+        echoCancellation: true,
+        noiseSuppression: true,
+        autoGainControl: true,
+      };
+      if (deviceId) {
+        audioConstraints.deviceId = { exact: deviceId };
+      }
+
       const stream = await navigator.mediaDevices.getUserMedia({
-        audio: {
-          channelCount: 1,
-          echoCancellation: true,
-          noiseSuppression: true,
-          autoGainControl: true,
-        },
+        audio: audioConstraints,
       });
       streamRef.current = stream;
 
@@ -62,7 +67,7 @@ export function useVoice(sessionId: string) {
       // Clean up on failure
       await commands.stopAudioBridge(sessionId).catch(() => {});
     }
-  }, [sessionId, state]);
+  }, [sessionId, state, deviceId]);
 
   const stop = useCallback(async () => {
     // Tear down audio pipeline

app/src/lib/types.ts

@@ -100,6 +100,7 @@ export interface AppSettings {
   auto_check_updates: boolean;
   dismissed_update_version: string | null;
   timezone: string | null;
+  default_microphone: string | null;
 }
 
 export interface UpdateInfo {