diff --git a/docs/systems/voice.md b/docs/systems/voice.md
index 9ce73a87..2fb77962 100644
--- a/docs/systems/voice.md
+++ b/docs/systems/voice.md
@@ -292,6 +292,60 @@ The fullscreen toggle in `VoiceControlBar` flips the `voiceFullscreen` flag in `
 
 ---
 
+## Audio Device Selection (Microphone & Speakers)
+
+Users pick mic and speaker devices in two surfaces:
+1. **User Settings → Voice & Video** (`AudioInputSection.tsx`, `AudioOutputSection.tsx`) — full picker with input volume, live level meter, output volume, and a "Play test sound" button.
+2. **Bottom-left UserArea quick popups** (`ChannelSidebar.tsx UserAreaPanel`) — opened by the caret buttons next to mute (input picker) and deafen (output picker). Same picker UX, more compact.
+
+Both surfaces are backed by the shared `useAudioDevices()` hook. The store fields `inputDeviceId` and `outputDeviceId` (both `string`, default `'default'`) are persisted in `voiceStore`.
+
+### `useAudioDevices()` hook (canonical enumeration)
+- Mirrors `VideoSection.tsx`'s permission/enumeration/devicechange pattern.
+- Mount-time probe: `navigator.permissions.query({ name: 'microphone' })`. **Never auto-fires `getUserMedia`** — that requires an explicit user gesture via the returned `requestPermission()`.
+- States: `unknown` → `granted` | `prompt` | `denied`. Lists are populated only in `granted`.
+- Refreshes both `inputs` and `outputs` on every `devicechange` event.
+- Output devices are gated behind microphone permission (no separate output permission exists in browsers).
+- Returns `inputLabels` / `outputLabels` maps with disambiguation suffixes for duplicate names (e.g. `"USB Audio (1)"`, `"USB Audio (2)"`).
+
+### Output routing — `AudioContext.setSinkId`
+All audio (remote voice, screen-share audio, sound effects) flows through `AudioManager`'s master bus → `AudioContext.destination`. Output device switching is therefore done via `AudioContext.setSinkId(deviceId)`, NOT via LiveKit's `switchActiveDevice('audiooutput')` (which targets `<audio>` elements that are killed by `AppLayout`'s MutationObserver). Safari < 17 lacks `setSinkId` on AudioContext — `AudioOutputSection` detects this and falls back to OS default with an explanatory note.
+
+### Input pipeline — republish, never `switchActiveDevice`
+Input device changes flow through `AudioManager.setInputDevice(deviceId)` (serialized chain). The `useLiveKit syncMic` effect detects the bumped stream generation and unpublishes/republishes via `getFreshTrack()`. This asymmetry vs. the camera (which uses `room.switchActiveDevice('videoinput', …)`) is intentional and documented under "Architectural asymmetry" below — the published mic track is the output of a Web Audio graph (RNNoise, gain, AEC), not a raw `getUserMedia` track.
+
+### Hot-plug seamlessness
+The global `devicechange` handler in `AppLayout.tsx` does four things on every event:
+1. **Prune** persisted IDs that no longer exist (`pruneStaleDevices`).
+2. **Re-acquire** the live mic stream when `inputDeviceId === 'default'` AND `AudioManager.hasActiveStream()`. Chromium does NOT migrate an existing `getUserMedia` track to the new OS-default — calling `setInputDevice('default')` triggers a fresh `getUserMedia` which picks up the new default; `syncMic` then republishes.
+3. **Re-apply** `setSinkId('')` when `outputDeviceId === 'default'`, for the analogous reason.
+4. **Toast** on a *new* `audioinput` group appearing (debounced 1s, deduped by `groupId` for 30s). Removals do not toast — the user already knows they unplugged it. Toast is informational ("AirPods Pro detected — choose it in Voice settings to switch") — never auto-switches; auto-switch would be a privacy/UX regression for users who deliberately keep a non-default device selected.
+
+### Mic-track-loss recovery
+The published mic track is a *clone* of `AudioManager`'s `MediaStreamAudioDestinationNode` output (see `getFreshTrack()`), and a destination-node track does not end on upstream loss — it just outputs silence. So the published track's `onended` is the wrong signal. Instead, `AudioManager` installs `onended` on every track of the upstream `getUserMedia` stream and exposes a subscription API:
+
+- `AudioManager.onInputTrackEnded(cb)` — subscribers receive a `'unplug' | 'revoke' | 'unknown'` reason hint and probe `getUserMedia` themselves to classify.
+- Deliberate replacements (`setInputDevice`, `setRnnoiseEnabled`, `setVoiceProcessing` re-init) detach the per-track listener BEFORE calling `.stop()` and null `currentStream` immediately, so subscribers are never notified for non-loss events. A surviving listener (e.g. attached by a future external caller) bails via the `currentStream !== capturedStream` identity check.
+
+`useLiveKit` subscribes to this signal whenever a room is connected, captures `subscriberRoom = roomRef.current`, and on emission:
+1. Bail if the room has been replaced.
+2. Probe `getUserMedia({audio:{deviceId}})` to classify:
+   - Probe succeeds → `setInputDevice(deviceId)` to re-acquire AND call `republishMicrophone(subscriberRoom, lastMicGenRef)` directly (the syncMic dep array does not include `streamGeneration`, so we cannot rely on it to re-fire).
+   - `NotAllowedError` → `"Microphone permission was revoked"` (warning toast).
+   - `NotFoundError` with non-default device → set store to `'default'` and toast `"Microphone disconnected — switched to system default"`. The store change triggers `syncMic`, which re-acquires + republishes via the shared helper.
+   - `NotFoundError` on default → `"Microphone disconnected"`.
+   - Other → `"Microphone could not be restored"`.
+
+`republishMicrophone` is a module-level helper extracted from `syncMic` so both the normal device-change path and the recovery path share the staleness-check / unpublish / `getFreshTrack` / publish flow.
+
+### Privacy gate — never auto-fire `getUserMedia`
+The `useAudioDevices` hook only calls `getUserMedia` from the explicit `requestPermission()` action. The previous `ChannelSidebar.UserAreaPanel.loadDevices` implementation fired `getUserMedia({audio:true})` on every panel open as long as no `AudioContext` existed — which flashed the mic indicator even when permission had been previously granted in another session. That probe has been removed.
+
+### Resolved-default hint
+When `inputDeviceId === 'default'` and a stream is active, `AudioInputSection` shows a `Currently using: <label>` subline by reading `AudioManager.getCurrentInputDeviceId()` and looking up the label in `inputLabels`. This makes the "default → which device?" indirection visible to the user.
+
+---
+
 ## Camera Device Selection
 
 Users pick a camera in **User Settings → Voice & Video → Video**. Selection is persisted in `voiceStore.cameraDeviceId` (`string | null`; `null` = "let LiveKit/browser auto-pick on next fresh enable").
diff --git a/packages/web/src/audio/AudioManager.ts b/packages/web/src/audio/AudioManager.ts
index dc610068..96f2f479 100644
--- a/packages/web/src/audio/AudioManager.ts
+++ b/packages/web/src/audio/AudioManager.ts
@@ -32,6 +32,12 @@ export class AudioManager {
   private rnnoiseReady = false;
   private keepAliveOscillator: OscillatorNode | null = null;
 
+  // Subscribers notified when the *upstream* getUserMedia track ends unexpectedly
+  // (hardware unplug, OS-level revoke, system audio service crash). Distinct from
+  // the published mic track's `onended` — the published track is a clone of the
+  // WebAudio destination node, which never ends on upstream loss.
+  private inputTrackEndedListeners: Set<(reason: 'unplug' | 'revoke' | 'unknown') => void> = new Set();
+
   private constructor() {}
 
   static getInstance(): AudioManager {
@@ -205,7 +211,17 @@ export class AudioManager {
 
     try {
       if (this.currentStream) {
-        this.currentStream.getTracks().forEach(t => t.stop());
+        // Detach our `onended` handlers BEFORE stopping. `.stop()` synchronously
+        // queues an `ended` event on each track; by clearing the listener first
+        // we guarantee the deliberate-replace path never notifies subscribers,
+        // regardless of microtask/task ordering.
+        const oldTracks = this.currentStream.getTracks();
+        oldTracks.forEach(t => { t.onended = null; });
+        oldTracks.forEach(t => t.stop());
+        // Drop the reference immediately so any stray handler that survived
+        // (e.g. attached by external code) sees `currentStream` no longer
+        // pointing to the old stream and bails out via the identity check.
+        this.currentStream = null;
       }
 
       // Chrome AEC stays on during screen share — headphone users unaffected,
@@ -231,10 +247,17 @@ export class AudioManager {
         } as any
       };
 
-      this.currentStream = await navigator.mediaDevices.getUserMedia(constraints);
+      const newStream = await navigator.mediaDevices.getUserMedia(constraints);
+      this.currentStream = newStream;
       this.currentInputDeviceId = deviceId;
       this.streamGeneration++;
 
+      // Attach upstream-loss detection to every track in the new stream. If the
+      // OS / hardware ends a track (unplug, revoke, audio-service crash), the
+      // `ended` event fires and we notify subscribers — provided the stream is
+      // still the active one (identity check guards against later replacements).
+      this.attachInputEndedListeners(newStream);
+
       if (this.ctx && this.inputGain) {
         if (this.inputSource) {
           this.inputSource.disconnect();
@@ -250,6 +273,52 @@ export class AudioManager {
     }
   }
 
+  /**
+   * Attaches an `onended` listener to every audio track in the supplied stream.
+   * The listener identity-checks against `this.currentStream` so it only fires
+   * for *unexpected* track loss — deliberate replacement clears the listener and
+   * nulls `currentStream` BEFORE stopping, so neither path can leak a false
+   * positive into subscribers.
+   */
+  private attachInputEndedListeners(stream: MediaStream): void {
+    for (const track of stream.getTracks()) {
+      track.onended = () => {
+        // Stream has been replaced (deliberate device change, RNNoise toggle,
+        // setVoiceProcessing reset) — this is not a hardware-loss event.
+        if (this.currentStream !== stream) return;
+        // Drop our reference so any subsequent `hasActiveStream()` check
+        // reflects reality, and so a downstream re-acquire attempt via
+        // `setInputDevice` does not short-circuit on the stale-but-non-null
+        // currentStream.
+        this.currentStream = null;
+        // Reason classification is the consumer's responsibility — they probe
+        // `getUserMedia` to distinguish unplug vs revoke vs unavailable. We
+        // emit `'unknown'` so the type is still informative if a future caller
+        // wires reason inference at this layer.
+        const reason: 'unplug' | 'revoke' | 'unknown' = 'unknown';
+        // Snapshot listeners before iteration: a subscriber that synchronously
+        // unsubscribes during notification (e.g. cleanup-on-disconnect) would
+        // otherwise mutate the set mid-iteration.
+        const snapshot = Array.from(this.inputTrackEndedListeners);
+        for (const cb of snapshot) {
+          try { cb(reason); } catch (err) {
+            console.error('[AudioManager] inputTrackEnded listener threw:', err);
+          }
+        }
+      };
+    }
+  }
+
+  /**
+   * Subscribe to upstream input-track-end events. Returns an unsubscribe.
+   * Callers should treat `reason` as a hint and probe `getUserMedia` themselves
+   * to distinguish unplug from revoke.
+   */
+  onInputTrackEnded(cb: (reason: 'unplug' | 'revoke' | 'unknown') => void): () => void {
+    this.inputTrackEndedListeners.add(cb);
+    return () => { this.inputTrackEndedListeners.delete(cb); };
+  }
+
   private getInputTarget(): AudioNode {
     return (this.rnnoiseEnabled && this.rnnoiseNode) ? this.rnnoiseNode : this.inputGain!;
   }
@@ -307,7 +376,10 @@ export class AudioManager {
     // Force track re-publish so LiveKit picks up the new pipeline
     this.streamGeneration++;
     if (this.currentStream) {
-      this.currentStream.getTracks().forEach(t => t.stop());
+      // Detach listeners before stopping (see `_setInputDeviceImpl`).
+      const tracks = this.currentStream.getTracks();
+      tracks.forEach(t => { t.onended = null; });
+      tracks.forEach(t => t.stop());
       this.currentStream = null;
     }
   }
@@ -339,7 +411,10 @@ export class AudioManager {
       changed = true;
     }
     if (changed && this.currentStream) {
-      this.currentStream.getTracks().forEach(t => t.stop());
+      // Detach listeners before stopping (see `_setInputDeviceImpl`).
+      const tracks = this.currentStream.getTracks();
+      tracks.forEach(t => { t.onended = null; });
+      tracks.forEach(t => t.stop());
       this.currentStream = null;
     }
   }
@@ -389,6 +464,46 @@ export class AudioManager {
     return this.masterBoost!;
   }
 
+  /**
+   * Returns the deviceId of the currently active mic stream (the one being
+   * captured by getUserMedia). May differ from the persisted store value when
+   * the store says 'default' but Chromium has resolved that to a concrete ID.
+   */
+  getCurrentInputDeviceId(): string {
+    return this.currentInputDeviceId;
+  }
+
+  /**
+   * True if a live mic stream is currently captured. Used by the global
+   * devicechange handler to decide whether to force-reacquire on OS-default
+   * change.
+   */
+  hasActiveStream(): boolean {
+    return !!this.currentStream?.active;
+  }
+
+  /**
+   * Plays a short test tone through the master output bus, exercising the
+   * current setSinkId binding. Used by the "Test Sound" button in audio
+   * settings to confirm that audio is reaching the chosen output device.
+   */
+  async playTestTone(): Promise<void> {
+    await this.resumeContext();
+    if (!this.ctx) return;
+    const osc = this.ctx.createOscillator();
+    osc.frequency.value = 440;
+    const gain = this.ctx.createGain();
+    // Soft envelope to avoid pop on start/stop.
+    const now = this.ctx.currentTime;
+    gain.gain.setValueAtTime(0, now);
+    gain.gain.linearRampToValueAtTime(0.15, now + 0.02);
+    gain.gain.linearRampToValueAtTime(0, now + 0.4);
+    osc.connect(gain);
+    gain.connect(this.masterBoost!);
+    osc.start(now);
+    osc.stop(now + 0.45);
+  }
+
   getContext(): AudioContext | null {
     return this.ctx;
   }
diff --git a/packages/web/src/components/layout/AppLayout.tsx b/packages/web/src/components/layout/AppLayout.tsx
index eaefe4b2..4c498af6 100644
--- a/packages/web/src/components/layout/AppLayout.tsx
+++ b/packages/web/src/components/layout/AppLayout.tsx
@@ -92,14 +92,122 @@ export function AppLayout() {
     AudioManager.getInstance().setOutputDevice(outputDeviceId);
   }, [outputDeviceId]);
 
-  // Sweep stale persisted device IDs (mic/speaker/camera) on mount and whenever
-  // the device list changes (USB plug/unplug, permission unlock, etc.).
+  // Audio device hot-plug handler.
+  //
+  // Three jobs on every devicechange event:
+  //   (1) Prune persisted IDs that no longer exist (delegated to voiceStore).
+  //   (2) Force re-acquire the live mic stream when the user's chosen input is
+  //       'default' AND a stream is already live. Chromium does NOT migrate an
+  //       existing getUserMedia track to the new OS-default — it stays bound to
+  //       the device that was default at acquisition time. Setting the input
+  //       again with 'default' triggers a fresh getUserMedia, which picks up
+  //       the new OS default. The downstream syncMic effect republishes.
+  //   (3) Force re-apply setSinkId('') for output when 'default' is selected,
+  //       for the same reason on the output side.
+  //   (4) Toast on a *new* audioinput appearance (debounced + dedupe by groupId).
+  //       Removals do not toast — the user already knows they unplugged it.
   useEffect(() => {
     const prune = useVoiceStore.getState().pruneStaleDevices;
-    prune(); // initial sweep
-    const handler = () => prune();
-    navigator.mediaDevices.addEventListener('devicechange', handler);
-    return () => navigator.mediaDevices.removeEventListener('devicechange', handler);
+    let lastInputGroupIds = new Set<string>();
+    const recentToastByGroup = new Map<string, number>(); // groupId -> timestamp ms
+    const TOAST_DEBOUNCE_MS = 1000;
+    const TOAST_DEDUPE_WINDOW_MS = 30_000;
+    let pendingDebounceTimer: ReturnType<typeof setTimeout> | null = null;
+    // Handler-level debounce: collapses devicechange storms (BT re-pair, USB
+    // hub enumeration can fire 5-10x/sec) into a single prune + reacquire pass.
+    // The toast logic has its own longer debounce (TOAST_DEBOUNCE_MS) layered
+    // on top so user-visible toasts collapse storms even more aggressively.
+    let pendingHandlerTimer: ReturnType<typeof setTimeout> | null = null;
+    const HANDLER_DEBOUNCE_MS = 250;
+
+    const seedBaseline = async () => {
+      try {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        lastInputGroupIds = new Set(
+          devices.filter(d => d.kind === 'audioinput' && d.groupId).map(d => d.groupId)
+        );
+      } catch { /* enumeration may be blocked pre-permission; baseline is empty */ }
+    };
+
+    const handleNewDeviceToasts = async () => {
+      try {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        const currentInputGroupIds = new Set(
+          devices.filter(d => d.kind === 'audioinput' && d.groupId).map(d => d.groupId)
+        );
+        const now = Date.now();
+        const newGroups: string[] = [];
+        for (const gid of currentInputGroupIds) {
+          if (lastInputGroupIds.has(gid)) continue;
+          const lastToast = recentToastByGroup.get(gid) ?? 0;
+          if (now - lastToast < TOAST_DEDUPE_WINDOW_MS) continue;
+          newGroups.push(gid);
+          recentToastByGroup.set(gid, now);
+        }
+        // GC dedupe map entries older than the window so it doesn't leak.
+        for (const [gid, ts] of recentToastByGroup) {
+          if (now - ts > TOAST_DEDUPE_WINDOW_MS) recentToastByGroup.delete(gid);
+        }
+        lastInputGroupIds = currentInputGroupIds;
+
+        if (newGroups.length > 0) {
+          const newest = devices.find(d =>
+            d.kind === 'audioinput' && d.groupId && newGroups.includes(d.groupId) && d.label,
+          );
+          const label = newest?.label || 'New audio device';
+          useUIStore.getState().addToast(
+            `${label} detected — choose it in Voice settings to switch`,
+            'info',
+            6000,
+          );
+        }
+      } catch { /* enumeration failure is non-fatal */ }
+    };
+
+    const reacquireLiveStream = async () => {
+      const am = AudioManager.getInstance();
+      const inputId = useVoiceStore.getState().inputDeviceId;
+      const outputId = useVoiceStore.getState().outputDeviceId;
+      // Re-acquire input only if user is on 'default' AND a stream is live.
+      // Anything else: persisted ID is concrete, stream stays bound correctly.
+      if (inputId === 'default' && am.hasActiveStream()) {
+        try { await am.setInputDevice('default'); } catch { /* serialized chain handles errors */ }
+      }
+      if (outputId === 'default') {
+        try { await am.setOutputDevice('default'); } catch { /* setSinkId may not exist on Safari */ }
+      }
+    };
+
+    const handler = () => {
+      if (pendingHandlerTimer) clearTimeout(pendingHandlerTimer);
+      pendingHandlerTimer = setTimeout(async () => {
+        await prune();
+        await reacquireLiveStream();
+        if (pendingDebounceTimer) clearTimeout(pendingDebounceTimer);
+        pendingDebounceTimer = setTimeout(() => { handleNewDeviceToasts(); }, TOAST_DEBOUNCE_MS);
+      }, HANDLER_DEBOUNCE_MS);
+    };
+
+    // Seed baseline so the first event after mount doesn't false-positive every
+    // existing device as "new". Register the listener only AFTER baseline is
+    // seeded so the first real event compares against a populated set.
+    let listenerRegistered = false;
+    let cancelled = false;
+    seedBaseline()
+      .then(() => prune())
+      .then(() => {
+        if (cancelled) return;
+        navigator.mediaDevices.addEventListener('devicechange', handler);
+        listenerRegistered = true;
+      });
+    return () => {
+      cancelled = true;
+      if (pendingHandlerTimer) clearTimeout(pendingHandlerTimer);
+      if (pendingDebounceTimer) clearTimeout(pendingDebounceTimer);
+      if (listenerRegistered) {
+        navigator.mediaDevices.removeEventListener('devicechange', handler);
+      }
+    };
   }, []);
 
   const { user, isLoading } = useAuth();
diff --git a/packages/web/src/components/layout/ChannelSidebar.tsx b/packages/web/src/components/layout/ChannelSidebar.tsx
index 2b7f5732..0770df11 100644
--- a/packages/web/src/components/layout/ChannelSidebar.tsx
+++ b/packages/web/src/components/layout/ChannelSidebar.tsx
@@ -21,6 +21,8 @@ import { DmSearchBar } from './DmSearchBar';
 import { DmListItem } from './DmListItem';
 import { useDragManager, type DropTarget, type LayoutItem } from '../../hooks/useDragManager';
 import { useDelayedLoading } from '../../hooks/useDelayedLoading';
+import { useAudioDevices } from '../../hooks/useAudioDevices';
+import { DropdownItem } from '../modals/settingsPanels/_shared/SettingsPickerPrimitives';
 
 export function ChannelSidebar() {
   const spaces = useSpaceStore((s) => s.spaces);
@@ -843,15 +845,20 @@ function UserAreaPanel({
   onSettingsClick: (tab?: string) => void;
 }) {
   const [openPanel, setOpenPanel] = useState<'input' | 'output' | null>(null);
-  const [inputDevices, setInputDevices] = useState<MediaDeviceInfo[]>([]);
-  const [outputDevices, setOutputDevices] = useState<MediaDeviceInfo[]>([]);
   const inputDeviceId = useVoiceStore((s) => s.inputDeviceId);
   const outputDeviceId = useVoiceStore((s) => s.outputDeviceId);
   const setInputDevice = useVoiceStore((s) => s.setInputDevice);
   const setOutputDevice = useVoiceStore((s) => s.setOutputDevice);
-  
-  const [selectedInputLabel, setSelectedInputLabel] = useState<string>('Default');
-  const [selectedOutputLabel, setSelectedOutputLabel] = useState<string>('Default');
+
+  // Shared hook drives lists, permission state, and live devicechange refresh.
+  const { permState, inputs: inputDevices, outputs: outputDevices, inputLabels, outputLabels, requestPermission } = useAudioDevices();
+
+  const selectedInputLabel = inputDeviceId === 'default'
+    ? 'System Default'
+    : inputLabels.get(inputDeviceId) ?? 'System Default';
+  const selectedOutputLabel = outputDeviceId === 'default'
+    ? 'System Default'
+    : outputLabels.get(outputDeviceId) ?? 'System Default';
 
   const inputVolume = useVoiceStore((s) => s.inputVolume);
   const storeSetInputVolume = useVoiceStore((s) => s.setInputVolume);
@@ -864,38 +871,6 @@ function UserAreaPanel({
   const analyserRef = useRef<AnalyserNode | null>(null);
   const animFrameRef = useRef<number>(0);
 
-  const loadDevices = useCallback(async () => {
-    try {
-      // Need to request permission first to get labels
-      if (!AudioManager.getInstance().getContext()) {
-        await navigator.mediaDevices.getUserMedia({ audio: true }).then(s => s.getTracks().forEach(t => t.stop()));
-      }
-      const devices = await navigator.mediaDevices.enumerateDevices();
-      // Deduplicate by deviceId — USB devices sharing the same audio chipset
-      // (e.g. C-Media 0d8c:0134) appear as multiple entries with identical IDs.
-      const dedup = (list: MediaDeviceInfo[]): MediaDeviceInfo[] => {
-        const seen = new Set<string>();
-        return list.filter(d => {
-          if (seen.has(d.deviceId)) return false;
-          seen.add(d.deviceId);
-          return true;
-        });
-      };
-      const inputs = dedup(devices.filter(d => d.kind === 'audioinput'));
-      const outputs = dedup(devices.filter(d => d.kind === 'audiooutput'));
-      setInputDevices(inputs);
-      setOutputDevices(outputs);
-      
-      const currentInput = inputs.find(d => d.deviceId === inputDeviceId);
-      if (currentInput) setSelectedInputLabel(currentInput.label || 'Default');
-      
-      const currentOutput = outputs.find(d => d.deviceId === outputDeviceId);
-      if (currentOutput) setSelectedOutputLabel(currentOutput.label || 'Default');
-    } catch {
-      // permission denied
-    }
-  }, [inputDeviceId, outputDeviceId]);
-
   // Start mic level monitoring when input panel opens
   useEffect(() => {
     if (openPanel !== 'input') {
@@ -946,27 +921,24 @@ function UserAreaPanel({
     if (openPanel === panel) {
       setOpenPanel(null);
     } else {
-      loadDevices();
       setOpenPanel(panel);
       setShowInputDeviceList(false);
       setShowOutputDeviceList(false);
-      // Explicitly resume on interaction
+      // Resume the AudioContext so the mic-level meter starts measuring on open.
       AudioManager.getInstance().resumeContext();
     }
   };
 
-  const selectInput = (device: MediaDeviceInfo) => {
-    setInputDevice(device.deviceId); // Pure state update → triggers syncMic if in voice call
-    AudioManager.getInstance().setInputDevice(device.deviceId); // Immediate preview for mic level meter
-    setSelectedInputLabel(device.label || 'Default');
+  const selectInput = (deviceId: string) => {
+    setInputDevice(deviceId); // Pure state update → triggers syncMic if in voice call
+    AudioManager.getInstance().setInputDevice(deviceId).catch(() => {});
     setShowInputDeviceList(false);
   };
 
-  const selectOutput = (device: MediaDeviceInfo) => {
-    setOutputDevice(device.deviceId);
-    setSelectedOutputLabel(device.label || 'Default');
+  const selectOutput = (deviceId: string) => {
+    setOutputDevice(deviceId);
+    AudioManager.getInstance().setOutputDevice(deviceId).catch(() => {});
     setShowOutputDeviceList(false);
-    AudioManager.getInstance().setOutputDevice(device.deviceId);
   };
 
   // Generate mic level bars (20 bars like Discord)
@@ -993,23 +965,35 @@ function UserAreaPanel({
               </svg>
             </button>
             {showInputDeviceList && (
-              <div className="bg-surface-base rounded-lg shadow-lg mx-2 mb-2 py-1 border border-border-hard">
-                {inputDevices.map(d => (
-                  <button
-                    key={d.deviceId}
-                    onClick={() => selectInput(d)}
-                    className={`w-full px-3 py-2 text-left text-[13px] hover:bg-interactive-hover transition-colors flex items-center gap-2 ${
-                      inputDeviceId === d.deviceId ? 'text-txt-primary' : 'text-txt-secondary'
-                    }`}
-                  >
-                    {inputDeviceId === d.deviceId && (
-                      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" className="text-accent-primary flex-shrink-0">
-                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
-                      </svg>
-                    )}
-                    <span className={inputDeviceId === d.deviceId ? '' : 'pl-6'}>{d.label || 'Default'}</span>
-                  </button>
-                ))}
+              <div className="bg-surface-base rounded-lg shadow-lg mx-2 mb-2 py-1 border border-border-hard max-h-64 overflow-y-auto">
+                {permState !== 'granted' && (
+                  <div className="px-3 py-2 text-[12px] text-txt-tertiary">
+                    Microphone permission needed.{' '}
+                    <button
+                      onClick={() => { requestPermission().catch(() => {}); }}
+                      className="underline text-accent-primary"
+                    >
+                      Enable
+                    </button>
+                  </div>
+                )}
+                {permState === 'granted' && (
+                  <>
+                    <DropdownItem
+                      label="System Default"
+                      active={inputDeviceId === 'default'}
+                      onClick={() => selectInput('default')}
+                    />
+                    {inputDevices.filter(d => d.deviceId !== 'default').map(d => (
+                      <DropdownItem
+                        key={d.deviceId}
+                        label={inputLabels.get(d.deviceId) ?? d.deviceId}
+                        active={inputDeviceId === d.deviceId}
+                        onClick={() => selectInput(d.deviceId)}
+                      />
+                    ))}
+                  </>
+                )}
               </div>
             )}
           </div>
@@ -1079,23 +1063,35 @@ function UserAreaPanel({
                           </svg>
                         </button>
                         {showOutputDeviceList && (
-                          <div className="bg-surface-base rounded-lg shadow-lg mx-2 mb-2 py-1 border border-border-hard">
-                            {outputDevices.map(d => (
-                              <button
-                                key={d.deviceId}
-                                onClick={() => selectOutput(d)}
-                                className={`w-full px-3 py-2 text-left text-[13px] hover:bg-interactive-hover transition-colors flex items-center gap-2 ${
-                                  outputDeviceId === d.deviceId ? 'text-txt-primary' : 'text-txt-secondary'
-                                }`}
-                              >
-                                {outputDeviceId === d.deviceId && (
-                                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" className="text-accent-primary flex-shrink-0">
-                                    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
-                                  </svg>
-                                )}
-                                <span className={outputDeviceId === d.deviceId ? '' : 'pl-6'}>{d.label || 'Default'}</span>
-                              </button>
-                            ))}
+                          <div className="bg-surface-base rounded-lg shadow-lg mx-2 mb-2 py-1 border border-border-hard max-h-64 overflow-y-auto">
+                            {permState !== 'granted' && (
+                              <div className="px-3 py-2 text-[12px] text-txt-tertiary">
+                                Audio permission needed.{' '}
+                                <button
+                                  onClick={() => { requestPermission().catch(() => {}); }}
+                                  className="underline text-accent-primary"
+                                >
+                                  Enable
+                                </button>
+                              </div>
+                            )}
+                            {permState === 'granted' && (
+                              <>
+                                <DropdownItem
+                                  label="System Default"
+                                  active={outputDeviceId === 'default'}
+                                  onClick={() => selectOutput('default')}
+                                />
+                                {outputDevices.filter(d => d.deviceId !== 'default').map(d => (
+                                  <DropdownItem
+                                    key={d.deviceId}
+                                    label={outputLabels.get(d.deviceId) ?? d.deviceId}
+                                    active={outputDeviceId === d.deviceId}
+                                    onClick={() => selectOutput(d.deviceId)}
+                                  />
+                                ))}
+                              </>
+                            )}
                           </div>
                         )}
                       </div>
diff --git a/packages/web/src/components/modals/settingsPanels/AudioInputSection.tsx b/packages/web/src/components/modals/settingsPanels/AudioInputSection.tsx
new file mode 100644
index 00000000..2bc2931c
--- /dev/null
+++ b/packages/web/src/components/modals/settingsPanels/AudioInputSection.tsx
@@ -0,0 +1,217 @@
+import { useEffect, useRef, useState } from 'react';
+import { useVoiceStore } from '../../../stores/voiceStore';
+import { AudioManager } from '../../../audio/AudioManager';
+import { useAudioDevices } from '../../../hooks/useAudioDevices';
+import { SectionShell, DropdownItem } from './_shared/SettingsPickerPrimitives';
+
+export function AudioInputSection() {
+  const inputDeviceId = useVoiceStore((s) => s.inputDeviceId);
+  const setInputDevice = useVoiceStore((s) => s.setInputDevice);
+  const inputVolume = useVoiceStore((s) => s.inputVolume);
+  const setInputVolume = useVoiceStore((s) => s.setInputVolume);
+  const { permState, inputs, inputLabels, requestPermission } = useAudioDevices();
+
+  const [listOpen, setListOpen] = useState(false);
+  const [micLevel, setMicLevel] = useState(0);
+  const [activeUpstreamId, setActiveUpstreamId] = useState<string | null>(null);
+  // Bumped whenever AudioManager's AudioContext transitions to 'running'.
+  // Used as a dep on effects that need to re-run once the context exists —
+  // the user may open Settings before joining voice (no AudioContext yet),
+  // then join voice and expect the meter / resolved-default hint to come
+  // alive without reopening the panel.
+  const [audioCtxGen, setAudioCtxGen] = useState(0);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const animFrameRef = useRef<number>(0);
+
+  // Click-outside-to-close.
+  useEffect(() => {
+    if (!listOpen) return;
+    const onMouseDown = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setListOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', onMouseDown);
+    return () => document.removeEventListener('mousedown', onMouseDown);
+  }, [listOpen]);
+
+  // Listen for AudioContext resume events so dependent effects re-trigger
+  // when the context first becomes available (e.g. user joins voice after
+  // opening Settings). onResumed fires on every 'running' state transition;
+  // we only need an opaque generation bump to re-run downstream effects.
+  useEffect(() => {
+    if (permState !== 'granted') return;
+    const am = AudioManager.getInstance();
+    const unsubscribe = am.onResumed(() => setAudioCtxGen((g) => g + 1));
+    return () => { unsubscribe(); };
+  }, [permState]);
+
+  // Live mic-level meter. Reuses AudioManager's analyser node, which is part
+  // of the canonical pipeline — no extra getUserMedia required once the user
+  // is in voice. Re-runs on `audioCtxGen` bumps so the meter activates after
+  // the AudioContext appears mid-session.
+  useEffect(() => {
+    if (permState !== 'granted') return;
+    let stopped = false;
+    const am = AudioManager.getInstance();
+    const ctx = am.getContext();
+    if (!ctx) return; // nothing to measure until the user joins voice or hits Test
+    const analyser = am.getAnalyserNode();
+    analyser.fftSize = 256;
+    const data = new Uint8Array(analyser.frequencyBinCount);
+    const tick = () => {
+      if (stopped) return;
+      analyser.getByteFrequencyData(data);
+      const avg = data.reduce((a, b) => a + b, 0) / data.length;
+      setMicLevel(Math.min(avg / 128, 1));
+      animFrameRef.current = requestAnimationFrame(tick);
+    };
+    tick();
+    return () => {
+      stopped = true;
+      if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
+    };
+  }, [permState, audioCtxGen]);
+
+  // Track the resolved upstream deviceId for the "Currently using: X" hint.
+  // Re-runs on `audioCtxGen` because the resolved-default ID is only known
+  // after AudioManager has actually opened a stream.
+  useEffect(() => {
+    if (permState !== 'granted') return;
+    const am = AudioManager.getInstance();
+    const id = am.getCurrentInputDeviceId();
+    setActiveUpstreamId(id === 'default' ? null : id);
+  }, [permState, inputDeviceId, audioCtxGen]);
+
+  if (permState === 'unknown') {
+    return (
+      <SectionShell title="Input Device">
+        <div className="text-sm text-txt-tertiary">Checking microphone access…</div>
+      </SectionShell>
+    );
+  }
+
+  if (permState === 'denied') {
+    return (
+      <SectionShell title="Input Device">
+        <div className="space-y-2">
+          <div className="text-sm text-txt-primary">⚠ Microphone access denied</div>
+          <div className="text-xs text-txt-tertiary">
+            Grant microphone permission to choose an input device.
+          </div>
+          <button
+            onClick={() => { requestPermission().catch(() => {}); }}
+            className="text-xs px-3 py-1.5 rounded-md bg-surface-base hover:bg-interactive-hover text-txt-secondary transition-colors"
+          >
+            Try again
+          </button>
+        </div>
+      </SectionShell>
+    );
+  }
+
+  if (permState === 'prompt') {
+    return (
+      <SectionShell title="Input Device">
+        <div className="space-y-3">
+          <div className="text-xs text-txt-tertiary">
+            Microphone permission needed to list and choose an input device.
+          </div>
+          <button
+            onClick={() => { requestPermission().catch(() => {}); }}
+            className="text-[13px] px-3 py-2 rounded-md bg-accent-primary hover:bg-accent-primary-hover text-white font-medium transition-colors"
+          >
+            Enable microphone access
+          </button>
+        </div>
+      </SectionShell>
+    );
+  }
+
+  // permState === 'granted'
+  const selectedLabel = inputDeviceId === 'default'
+    ? 'System Default'
+    : inputLabels.get(inputDeviceId) ?? 'System Default';
+  const resolvedHint = inputDeviceId === 'default' && activeUpstreamId
+    ? inputLabels.get(activeUpstreamId)
+    : null;
+
+  const handleSelect = (id: string) => {
+    setInputDevice(id);
+    AudioManager.getInstance().setInputDevice(id).catch(() => {});
+    setListOpen(false);
+  };
+
+  const micBars = 20;
+  const activeBars = Math.round(micLevel * micBars * (inputVolume / 100));
+
+  return (
+    <SectionShell title="Input Device">
+      <div className="space-y-3">
+        <div ref={dropdownRef}>
+          <button
+            type="button"
+            onClick={() => setListOpen((v) => !v)}
+            className="w-full px-3 py-2 flex items-center justify-between rounded-md bg-surface-base hover:bg-interactive-hover transition-colors"
+          >
+            <span className="text-[13px] text-txt-primary truncate text-left">{selectedLabel}</span>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"
+              className={`text-txt-tertiary flex-shrink-0 ml-2 transition-transform ${listOpen ? 'rotate-90' : ''}`}>
+              <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+            </svg>
+          </button>
+          {listOpen && (
+            <div className="mt-1 rounded-md bg-surface-base border border-border-hard py-1 max-h-64 overflow-y-auto">
+              <DropdownItem label="System Default" active={inputDeviceId === 'default'} onClick={() => handleSelect('default')} />
+              {inputs.filter(d => d.deviceId !== 'default').map((d) => (
+                <DropdownItem
+                  key={d.deviceId}
+                  label={inputLabels.get(d.deviceId) ?? d.deviceId}
+                  active={inputDeviceId === d.deviceId}
+                  onClick={() => handleSelect(d.deviceId)}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+        {resolvedHint && (
+          <div className="text-xs text-txt-tertiary -mt-1">Currently using: {resolvedHint}</div>
+        )}
+        {inputs.length === 0 && (
+          <div className="text-xs text-txt-tertiary">No microphones detected.</div>
+        )}
+
+        <div>
+          <div className="flex items-center justify-between mb-1.5">
+            <div className="text-[13px] font-medium text-txt-primary">Input Volume</div>
+            <div className="text-xs text-txt-tertiary tabular-nums">{inputVolume}%</div>
+          </div>
+          <input
+            type="range"
+            min={0}
+            max={200}
+            value={inputVolume}
+            onChange={(e) => setInputVolume(Number(e.target.value))}
+            className="w-full h-1.5 rounded-full appearance-none cursor-pointer bg-surface-base [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-md"
+            style={{
+              background: `linear-gradient(to right, rgb(var(--accent-primary)) 0%, rgb(var(--accent-primary)) ${inputVolume / 2}%, rgb(var(--interactive-muted)) ${inputVolume / 2}%, rgb(var(--interactive-muted)) 100%)`,
+            }}
+          />
+          <div className="flex items-center gap-[3px] mt-2">
+            {Array.from({ length: micBars }).map((_, i) => (
+              <div
+                key={i}
+                className={`flex-1 h-[6px] rounded-[1px] transition-colors duration-75 ${
+                  i < activeBars ? 'bg-status-online' : 'bg-interactive-muted'
+                }`}
+              />
+            ))}
+          </div>
+          <div className="text-xs text-txt-tertiary mt-1.5">
+            The level meter activates once you join a voice channel.
+          </div>
+        </div>
+      </div>
+    </SectionShell>
+  );
+}
diff --git a/packages/web/src/components/modals/settingsPanels/AudioOutputSection.tsx b/packages/web/src/components/modals/settingsPanels/AudioOutputSection.tsx
new file mode 100644
index 00000000..2c2108a7
--- /dev/null
+++ b/packages/web/src/components/modals/settingsPanels/AudioOutputSection.tsx
@@ -0,0 +1,167 @@
+import { useEffect, useRef, useState } from 'react';
+import { useVoiceStore } from '../../../stores/voiceStore';
+import { AudioManager } from '../../../audio/AudioManager';
+import { useAudioDevices } from '../../../hooks/useAudioDevices';
+import { SectionShell, DropdownItem } from './_shared/SettingsPickerPrimitives';
+
+export function AudioOutputSection() {
+  const outputDeviceId = useVoiceStore((s) => s.outputDeviceId);
+  const setOutputDevice = useVoiceStore((s) => s.setOutputDevice);
+  const outputVolume = useVoiceStore((s) => s.outputVolume);
+  const setOutputVolume = useVoiceStore((s) => s.setOutputVolume);
+  const { permState, outputs, outputLabels, requestPermission } = useAudioDevices();
+
+  const [listOpen, setListOpen] = useState(false);
+  // Default to "supported" — only flip false if a real context exists and
+  // lacks setSinkId (Safari < 17). Pre-context users can still pick a device;
+  // AudioManager.setOutputDevice defers the actual setSinkId until the
+  // context exists (applyOutputDevice early-returns when ctx is null, and
+  // initContext re-applies the persisted ID on creation).
+  const [supportsSinkId, setSupportsSinkId] = useState(true);
+  // Bumped whenever AudioManager's AudioContext transitions to 'running'.
+  // Used as a dep on the supportsSinkId effect so the check re-evaluates
+  // when the user joins voice after opening Settings — without this, a
+  // user who opens Settings before joining voice would see an incorrect
+  // "browser doesn't support setSinkId" fallback that never recovers.
+  const [audioCtxGen, setAudioCtxGen] = useState(0);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Click-outside-to-close.
+  useEffect(() => {
+    if (!listOpen) return;
+    const onMouseDown = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setListOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', onMouseDown);
+    return () => document.removeEventListener('mousedown', onMouseDown);
+  }, [listOpen]);
+
+  // Listen for AudioContext resume events so the supportsSinkId check
+  // re-evaluates once the context first becomes available.
+  useEffect(() => {
+    if (permState !== 'granted') return;
+    const am = AudioManager.getInstance();
+    const unsubscribe = am.onResumed(() => setAudioCtxGen((g) => g + 1));
+    return () => { unsubscribe(); };
+  }, [permState]);
+
+  // Detect setSinkId support — Safari < 17 does not support it on AudioContext.
+  // Default state is "supported"; we only flip to false once we have a real
+  // context to inspect AND it lacks the API. This avoids hiding the picker
+  // from users who open Settings before joining voice (no context yet).
+  useEffect(() => {
+    const ctx = AudioManager.getInstance().getContext();
+    if (ctx && !('setSinkId' in ctx)) {
+      setSupportsSinkId(false);
+    } else {
+      setSupportsSinkId(true);
+    }
+  }, [permState, audioCtxGen]);
+
+  if (permState === 'unknown') {
+    return (
+      <SectionShell title="Output Device">
+        <div className="text-sm text-txt-tertiary">Checking audio access…</div>
+      </SectionShell>
+    );
+  }
+
+  // Output-device labels are gated behind microphone permission. If permission
+  // is not granted we can still let the user adjust output volume + test the
+  // current default, but the picker is hidden.
+  const showPicker = permState === 'granted' && supportsSinkId;
+  const selectedLabel = outputDeviceId === 'default'
+    ? 'System Default'
+    : outputLabels.get(outputDeviceId) ?? 'System Default';
+
+  const handleSelect = (id: string) => {
+    setOutputDevice(id);
+    AudioManager.getInstance().setOutputDevice(id).catch(() => {});
+    setListOpen(false);
+  };
+
+  const handleTestTone = async () => {
+    try { await AudioManager.getInstance().playTestTone(); } catch { /* best-effort */ }
+  };
+
+  return (
+    <SectionShell title="Output Device">
+      <div className="space-y-3">
+        {showPicker ? (
+          <div ref={dropdownRef}>
+            <button
+              type="button"
+              onClick={() => setListOpen((v) => !v)}
+              className="w-full px-3 py-2 flex items-center justify-between rounded-md bg-surface-base hover:bg-interactive-hover transition-colors"
+            >
+              <span className="text-[13px] text-txt-primary truncate text-left">{selectedLabel}</span>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"
+                className={`text-txt-tertiary flex-shrink-0 ml-2 transition-transform ${listOpen ? 'rotate-90' : ''}`}>
+                <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+              </svg>
+            </button>
+            {listOpen && (
+              <div className="mt-1 rounded-md bg-surface-base border border-border-hard py-1 max-h-64 overflow-y-auto">
+                <DropdownItem label="System Default" active={outputDeviceId === 'default'} onClick={() => handleSelect('default')} />
+                {outputs.filter(d => d.deviceId !== 'default').map((d) => (
+                  <DropdownItem
+                    key={d.deviceId}
+                    label={outputLabels.get(d.deviceId) ?? d.deviceId}
+                    active={outputDeviceId === d.deviceId}
+                    onClick={() => handleSelect(d.deviceId)}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        ) : permState === 'granted' && !supportsSinkId ? (
+          <div className="text-xs text-txt-tertiary">
+            This browser doesn't support choosing an output device. Audio plays to the system default.
+          </div>
+        ) : (
+          <div className="space-y-2">
+            <div className="text-xs text-txt-tertiary">
+              Grant microphone permission to list output devices (browsers gate output names behind microphone access).
+            </div>
+            <button
+              onClick={() => { requestPermission().catch(() => {}); }}
+              className="text-[13px] px-3 py-2 rounded-md bg-accent-primary hover:bg-accent-primary-hover text-white font-medium transition-colors"
+            >
+              Enable audio access
+            </button>
+          </div>
+        )}
+
+        <div>
+          <div className="flex items-center justify-between mb-1.5">
+            <div className="text-[13px] font-medium text-txt-primary">Output Volume</div>
+            <div className="text-xs text-txt-tertiary tabular-nums">{outputVolume}%</div>
+          </div>
+          <input
+            type="range"
+            min={0}
+            max={200}
+            value={outputVolume}
+            onChange={(e) => setOutputVolume(Number(e.target.value))}
+            className="w-full h-1.5 rounded-full appearance-none cursor-pointer bg-surface-base [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-md"
+            style={{
+              background: `linear-gradient(to right, rgb(var(--accent-primary)) 0%, rgb(var(--accent-primary)) ${outputVolume / 2}%, rgb(var(--interactive-muted)) ${outputVolume / 2}%, rgb(var(--interactive-muted)) 100%)`,
+            }}
+          />
+        </div>
+
+        <button
+          onClick={handleTestTone}
+          className="w-full text-[13px] px-3 py-2 rounded-md bg-surface-base hover:bg-interactive-hover text-txt-primary transition-colors flex items-center justify-center gap-2"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z" />
+          </svg>
+          Play test sound
+        </button>
+      </div>
+    </SectionShell>
+  );
+}
diff --git a/packages/web/src/components/modals/settingsPanels/VoicePanel.tsx b/packages/web/src/components/modals/settingsPanels/VoicePanel.tsx
index 3c42533f..b848e7e5 100644
--- a/packages/web/src/components/modals/settingsPanels/VoicePanel.tsx
+++ b/packages/web/src/components/modals/settingsPanels/VoicePanel.tsx
@@ -1,6 +1,8 @@
 import { useVoiceStore } from '../../../stores/voiceStore';
 import { Toggle } from '../../ui/Toggle';
 import { VideoSection } from './VideoSection';
+import { AudioInputSection } from './AudioInputSection';
+import { AudioOutputSection } from './AudioOutputSection';
 
 export function VoicePanel() {
   const echoCancellation = useVoiceStore((s) => s.echoCancellation);
@@ -17,6 +19,10 @@ export function VoicePanel() {
   return (
     <div className="space-y-5">
       <h2 className="text-lg font-semibold text-txt-primary mb-6">Voice &amp; Video</h2>
+
+      <AudioInputSection />
+      <AudioOutputSection />
+
       <div>
         <div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">
           Volume
@@ -69,7 +75,7 @@ export function VoicePanel() {
           <div className="flex items-center justify-between py-2">
             <div>
               <div className="text-sm text-txt-primary">Echo Cancellation</div>
-              <div className="text-xs text-txt-tertiary">Removes echo when using speakers</div>
+              <div className="text-xs text-txt-tertiary">Cancels echo from your speakers feeding back into the mic. Always on for voice channels and calls.</div>
             </div>
             <Toggle enabled={echoCancellation} onChange={setEchoCancellation} />
           </div>
diff --git a/packages/web/src/components/modals/settingsPanels/_shared/SettingsPickerPrimitives.tsx b/packages/web/src/components/modals/settingsPanels/_shared/SettingsPickerPrimitives.tsx
new file mode 100644
index 00000000..3dddae44
--- /dev/null
+++ b/packages/web/src/components/modals/settingsPanels/_shared/SettingsPickerPrimitives.tsx
@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+
+/**
+ * Section wrapper used by audio/video picker subsections (AudioInputSection,
+ * AudioOutputSection, …). Provides the small uppercase title above a soft
+ * inset card. Settings-panel-internal — kept under `_shared/` rather than
+ * promoted to `ui/` because nothing outside settings panels needs this look.
+ */
+export function SectionShell({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <div>
+      <div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">{title}</div>
+      <div className="rounded-lg bg-white/[0.03] border border-white/[0.04] p-3.5">{children}</div>
+    </div>
+  );
+}
+
+export interface DropdownItemProps {
+  label: string;
+  active: boolean;
+  onClick: () => void;
+}
+
+/**
+ * Single row of a settings picker dropdown (input device, output device, etc.).
+ * Renders a checkmark on the active row and indents inactive labels by the
+ * checkmark's width so labels align across rows. Settings-panel-internal.
+ */
+export function DropdownItem({ label, active, onClick }: DropdownItemProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`w-full px-3 py-2 text-left text-[13px] hover:bg-interactive-hover transition-colors flex items-center gap-2 ${
+        active ? 'text-txt-primary' : 'text-txt-secondary'
+      }`}
+    >
+      {active && (
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" className="text-accent-primary flex-shrink-0">
+          <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+        </svg>
+      )}
+      <span className={`truncate ${active ? '' : 'pl-6'}`}>{label}</span>
+    </button>
+  );
+}
diff --git a/packages/web/src/hooks/useAudioDevices.test.ts b/packages/web/src/hooks/useAudioDevices.test.ts
new file mode 100644
index 00000000..d2ebad58
--- /dev/null
+++ b/packages/web/src/hooks/useAudioDevices.test.ts
@@ -0,0 +1,129 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { useAudioDevices } from './useAudioDevices';
+
+type Listener = () => void;
+
+function setupMediaDevicesMock(opts: {
+  permissionState?: 'granted' | 'prompt' | 'denied';
+  devices?: MediaDeviceInfo[];
+  permissionThrows?: boolean;
+} = {}) {
+  const listeners = new Set<Listener>();
+  const permState = opts.permissionState ?? 'granted';
+  const devices = opts.devices ?? [
+    { deviceId: 'mic-1', kind: 'audioinput', label: 'Built-in Mic', groupId: 'g1', toJSON: () => ({}) } as MediaDeviceInfo,
+    { deviceId: 'mic-2', kind: 'audioinput', label: 'USB Headset', groupId: 'g2', toJSON: () => ({}) } as MediaDeviceInfo,
+    { deviceId: 'spk-1', kind: 'audiooutput', label: 'Built-in Speakers', groupId: 'g1', toJSON: () => ({}) } as MediaDeviceInfo,
+    { deviceId: 'spk-2', kind: 'audiooutput', label: 'USB Headset', groupId: 'g2', toJSON: () => ({}) } as MediaDeviceInfo,
+  ];
+
+  const mediaDevices = {
+    enumerateDevices: vi.fn().mockResolvedValue(devices),
+    addEventListener: (_evt: string, l: Listener) => { listeners.add(l); },
+    removeEventListener: (_evt: string, l: Listener) => { listeners.delete(l); },
+    getUserMedia: vi.fn().mockResolvedValue({ getTracks: () => [{ stop: vi.fn() }] }),
+  };
+  Object.defineProperty(navigator, 'mediaDevices', { value: mediaDevices, configurable: true });
+
+  const permStatus = {
+    state: permState,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  };
+  const permissions = {
+    query: opts.permissionThrows
+      ? vi.fn().mockRejectedValue(new Error('not supported'))
+      : vi.fn().mockResolvedValue(permStatus),
+  };
+  Object.defineProperty(navigator, 'permissions', { value: permissions, configurable: true });
+
+  return { listeners, mediaDevices, permissions, permStatus, fireDeviceChange: () => listeners.forEach(l => l()) };
+}
+
+describe('useAudioDevices', () => {
+  beforeEach(() => { vi.restoreAllMocks(); });
+
+  it('starts in unknown state, transitions to granted, enumerates inputs and outputs', async () => {
+    const m = setupMediaDevicesMock({ permissionState: 'granted' });
+    const { result } = renderHook(() => useAudioDevices());
+
+    expect(result.current.permState).toBe('unknown');
+    await waitFor(() => expect(result.current.permState).toBe('granted'));
+    await waitFor(() => expect(result.current.inputs.length).toBe(2));
+    expect(result.current.outputs.length).toBe(2);
+    expect(result.current.inputs[0].deviceId).toBe('mic-1');
+  });
+
+  it('returns prompt state when permission is prompt', async () => {
+    setupMediaDevicesMock({ permissionState: 'prompt' });
+    const { result } = renderHook(() => useAudioDevices());
+    await waitFor(() => expect(result.current.permState).toBe('prompt'));
+    expect(result.current.inputs).toEqual([]);
+    expect(result.current.outputs).toEqual([]);
+  });
+
+  it('returns denied state when permission is denied', async () => {
+    setupMediaDevicesMock({ permissionState: 'denied' });
+    const { result } = renderHook(() => useAudioDevices());
+    await waitFor(() => expect(result.current.permState).toBe('denied'));
+  });
+
+  it('falls back to prompt when permissions.query throws', async () => {
+    setupMediaDevicesMock({ permissionThrows: true });
+    const { result } = renderHook(() => useAudioDevices());
+    await waitFor(() => expect(result.current.permState).toBe('prompt'));
+  });
+
+  it('refreshes lists on devicechange', async () => {
+    const m = setupMediaDevicesMock({ permissionState: 'granted' });
+    const { result } = renderHook(() => useAudioDevices());
+    await waitFor(() => expect(result.current.inputs.length).toBe(2));
+
+    m.mediaDevices.enumerateDevices.mockResolvedValueOnce([
+      { deviceId: 'mic-1', kind: 'audioinput', label: 'Built-in Mic', groupId: 'g1', toJSON: () => ({}) } as MediaDeviceInfo,
+    ]);
+    act(() => { m.fireDeviceChange(); });
+    await waitFor(() => expect(result.current.inputs.length).toBe(1));
+  });
+
+  it('deduplicates devices by deviceId', async () => {
+    setupMediaDevicesMock({
+      permissionState: 'granted',
+      devices: [
+        { deviceId: 'mic-1', kind: 'audioinput', label: 'A', groupId: 'g1', toJSON: () => ({}) } as MediaDeviceInfo,
+        { deviceId: 'mic-1', kind: 'audioinput', label: 'A', groupId: 'g1', toJSON: () => ({}) } as MediaDeviceInfo,
+        { deviceId: 'spk-1', kind: 'audiooutput', label: 'B', groupId: 'g1', toJSON: () => ({}) } as MediaDeviceInfo,
+      ],
+    });
+    const { result } = renderHook(() => useAudioDevices());
+    await waitFor(() => expect(result.current.permState).toBe('granted'));
+    expect(result.current.inputs.length).toBe(1);
+    expect(result.current.outputs.length).toBe(1);
+  });
+
+  it('requestPermission fires getUserMedia({audio:true}) and stops the stream', async () => {
+    const m = setupMediaDevicesMock({ permissionState: 'prompt' });
+    const { result } = renderHook(() => useAudioDevices());
+    await waitFor(() => expect(result.current.permState).toBe('prompt'));
+
+    await act(async () => { await result.current.requestPermission(); });
+    expect(m.mediaDevices.getUserMedia).toHaveBeenCalledWith({ audio: true });
+  });
+
+  it('builds display labels with disambiguation suffix for duplicate names', async () => {
+    setupMediaDevicesMock({
+      permissionState: 'granted',
+      devices: [
+        { deviceId: 'mic-1', kind: 'audioinput', label: 'USB Audio', groupId: 'g1', toJSON: () => ({}) } as MediaDeviceInfo,
+        { deviceId: 'mic-2', kind: 'audioinput', label: 'USB Audio', groupId: 'g2', toJSON: () => ({}) } as MediaDeviceInfo,
+        { deviceId: 'mic-3', kind: 'audioinput', label: '', groupId: 'g3', toJSON: () => ({}) } as MediaDeviceInfo,
+      ],
+    });
+    const { result } = renderHook(() => useAudioDevices());
+    await waitFor(() => expect(result.current.inputs.length).toBe(3));
+    expect(result.current.inputLabels.get('mic-1')).toBe('USB Audio (1)');
+    expect(result.current.inputLabels.get('mic-2')).toBe('USB Audio (2)');
+    expect(result.current.inputLabels.get('mic-3')).toBe('Microphone 3');
+  });
+});
diff --git a/packages/web/src/hooks/useAudioDevices.ts b/packages/web/src/hooks/useAudioDevices.ts
new file mode 100644
index 00000000..6c39b567
--- /dev/null
+++ b/packages/web/src/hooks/useAudioDevices.ts
@@ -0,0 +1,175 @@
+import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
+
+/**
+ * Permission state machine for audio device enumeration.
+ *
+ * - `unknown`: initial mount, before `permissions.query` resolves.
+ * - `granted`: permission granted; both input + output lists populated.
+ * - `prompt`:  permission not yet decided; lists empty until requestPermission().
+ * - `denied`:  permission denied; lists empty.
+ *
+ * `permissions.query({ name: 'microphone' })` is the ONLY mount-time API call.
+ * It is passive — does NOT light the mic indicator on any platform. We never
+ * auto-fire `getUserMedia` to "unlock labels"; that requires an explicit user
+ * gesture via `requestPermission()`.
+ *
+ * Note on output devices: there is no separate "speaker" permission. Browsers
+ * gate output-device labels behind the same microphone permission. So a single
+ * permission state covers both lists.
+ */
+export type AudioDevicesPermState = 'unknown' | 'granted' | 'prompt' | 'denied';
+
+export interface UseAudioDevicesResult {
+  permState: AudioDevicesPermState;
+  inputs: MediaDeviceInfo[];
+  outputs: MediaDeviceInfo[];
+  inputLabels: Map<string, string>;
+  outputLabels: Map<string, string>;
+  /** Re-enumerate immediately. Safe to call any time after permission is granted. */
+  refresh: () => void;
+  /**
+   * Explicit user gesture: fires `getUserMedia({audio:true})` to grant permission
+   * and unlock device labels. Stops the stream immediately. Only call from a
+   * click/keydown handler — calling this from an effect would defeat the privacy
+   * model and flash the mic indicator.
+   */
+  requestPermission: () => Promise<void>;
+}
+
+function buildLabels(devices: MediaDeviceInfo[], kindLabel: string): Map<string, string> {
+  const counts = new Map<string, number>();
+  for (const d of devices) {
+    if (d.label) counts.set(d.label, (counts.get(d.label) ?? 0) + 1);
+  }
+  const seen = new Map<string, number>();
+  const labels = new Map<string, string>();
+  devices.forEach((d, i) => {
+    if (!d.label) {
+      labels.set(d.deviceId, `${kindLabel} ${i + 1}`);
+      return;
+    }
+    const total = counts.get(d.label) ?? 1;
+    if (total <= 1) {
+      labels.set(d.deviceId, d.label);
+      return;
+    }
+    const used = (seen.get(d.label) ?? 0) + 1;
+    seen.set(d.label, used);
+    labels.set(d.deviceId, `${d.label} (${used})`);
+  });
+  return labels;
+}
+
+export function useAudioDevices(): UseAudioDevicesResult {
+  const [permState, setPermState] = useState<AudioDevicesPermState>('unknown');
+  const [inputs, setInputs] = useState<MediaDeviceInfo[]>([]);
+  const [outputs, setOutputs] = useState<MediaDeviceInfo[]>([]);
+  const mountedRef = useRef(true);
+  const enumerateGenRef = useRef(0);
+
+  const enumerate = useCallback(async () => {
+    const gen = ++enumerateGenRef.current;
+    try {
+      const all = await navigator.mediaDevices.enumerateDevices();
+      if (gen !== enumerateGenRef.current || !mountedRef.current) return;
+      const seenIn = new Set<string>();
+      const seenOut = new Set<string>();
+      const ins: MediaDeviceInfo[] = [];
+      const outs: MediaDeviceInfo[] = [];
+      for (const d of all) {
+        if (d.kind === 'audioinput' && !seenIn.has(d.deviceId)) {
+          seenIn.add(d.deviceId);
+          ins.push(d);
+        } else if (d.kind === 'audiooutput' && !seenOut.has(d.deviceId)) {
+          seenOut.add(d.deviceId);
+          outs.push(d);
+        }
+      }
+      setInputs(ins);
+      setOutputs(outs);
+    } catch {
+      if (gen === enumerateGenRef.current && mountedRef.current) {
+        setInputs([]);
+        setOutputs([]);
+      }
+    }
+  }, []);
+
+  // Mount-time permission probe. Mirrors VideoSection.tsx:158-210.
+  useEffect(() => {
+    mountedRef.current = true;
+    let cancelled = false;
+    let status: PermissionStatus | null = null;
+    let onChange: (() => void) | null = null;
+
+    const apply = (state: PermissionState) => {
+      if (cancelled || !mountedRef.current) return;
+      if (state === 'granted') setPermState('granted');
+      else if (state === 'prompt') setPermState('prompt');
+      else setPermState('denied');
+    };
+
+    const run = async () => {
+      if (!navigator.permissions || typeof navigator.permissions.query !== 'function') {
+        if (!cancelled && mountedRef.current) setPermState('prompt');
+        return;
+      }
+      try {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        const s = await navigator.permissions.query({ name: 'microphone' as PermissionName });
+        status = s;
+        apply(s.state);
+        onChange = () => apply(s.state);
+        s.addEventListener('change', onChange);
+      } catch {
+        if (!cancelled && mountedRef.current) setPermState('prompt');
+      }
+    };
+
+    run();
+
+    return () => {
+      cancelled = true;
+      mountedRef.current = false;
+      if (status && onChange) {
+        try { status.removeEventListener('change', onChange); } catch { /* best-effort */ }
+      }
+    };
+  }, []);
+
+  // Enumerate when permission grants; refresh on devicechange.
+  useEffect(() => {
+    if (permState !== 'granted') {
+      setInputs([]);
+      setOutputs([]);
+      return;
+    }
+    enumerate();
+    const onChange = () => { enumerate(); };
+    navigator.mediaDevices.addEventListener('devicechange', onChange);
+    return () => {
+      navigator.mediaDevices.removeEventListener('devicechange', onChange);
+    };
+  }, [permState, enumerate]);
+
+  const inputLabels = useMemo(() => buildLabels(inputs, 'Microphone'), [inputs]);
+  const outputLabels = useMemo(() => buildLabels(outputs, 'Speakers'), [outputs]);
+
+  const requestPermission = useCallback(async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      stream.getTracks().forEach(t => t.stop());
+      if (mountedRef.current) {
+        setPermState('granted');
+        await enumerate();
+      }
+    } catch (err: unknown) {
+      if (err instanceof Error && err.name === 'NotAllowedError' && mountedRef.current) {
+        setPermState('denied');
+      }
+      throw err;
+    }
+  }, [enumerate]);
+
+  return { permState, inputs, outputs, inputLabels, outputLabels, refresh: enumerate, requestPermission };
+}
diff --git a/packages/web/src/hooks/useLiveKit.ts b/packages/web/src/hooks/useLiveKit.ts
index d18f6734..f9af6001 100644
--- a/packages/web/src/hooks/useLiveKit.ts
+++ b/packages/web/src/hooks/useLiveKit.ts
@@ -143,6 +143,49 @@ function destroyRoom(room: Room | null): Promise<void> | void {
   return room.disconnect();
 }
 
+/**
+ * Ensures a fresh microphone track from the AudioManager pipeline is published
+ * to the supplied room. If the existing publication is already current (live
+ * MediaStreamTrack matching the latest AudioManager streamGeneration), this is
+ * a no-op apart from un-muting. Otherwise the stale track is unpublished and a
+ * cloned destination-node track is published in its place.
+ *
+ * Extracted from the syncMic effect so the input-track-loss recovery path can
+ * call it directly — without relying on syncMic's React dep array catching a
+ * change that never re-renders the hook.
+ */
+async function republishMicrophone(r: Room, lastMicGenRef: { current: number }): Promise<void> {
+  const audioManager = AudioManager.getInstance();
+  const currentGen = audioManager.getStreamGeneration();
+
+  const micPub = r.localParticipant.getTrackPublications()
+    .find(p => p.source === Track.Source.Microphone);
+
+  if (micPub?.track) {
+    // Track already published — check if it's still current
+    if (micPub.track.mediaStreamTrack?.readyState === 'live' && lastMicGenRef.current === currentGen) {
+      // Current and live — just unmute if needed
+      if (micPub.isMuted) {
+        await r.localParticipant.setMicrophoneEnabled(true);
+      }
+      return;
+    }
+    // Track is stale (device or constraint change) — replace it
+    await r.localParticipant.unpublishTrack(micPub.track as LocalAudioTrack);
+  }
+
+  // Publish fresh track from AudioManager pipeline
+  const audioTrack = audioManager.getFreshTrack();
+  if (!audioTrack) return;
+
+  console.log('[LiveKit] Publishing fresh microphone track (gen:', currentGen, ')');
+  await r.localParticipant.publishTrack(audioTrack, {
+    name: 'microphone',
+    source: Track.Source.Microphone,
+  });
+  lastMicGenRef.current = currentGen;
+}
+
 export function useLiveKit() {
   const [room, setRoom] = useState<Room | null>(null);
   const [isConnected, setIsConnected] = useState(false);
@@ -353,36 +396,12 @@ export function useLiveKit() {
           return;
         }
 
-        // Not muted — ensure mic is published and live
+        // Not muted — ensure the AudioManager pipeline is on the right device
+        // and at the right volume, then republish if the published track is
+        // stale or missing.
         await audioManager.setInputDevice(inputDeviceId);
         audioManager.setInputVolume(inputVolume);
-
-        const currentGen = audioManager.getStreamGeneration();
-
-        if (micPub?.track) {
-          // Track already published — check if it's still current
-          if (micPub.track.mediaStreamTrack?.readyState === 'live' && lastMicGenRef.current === currentGen) {
-            // Current and live — just unmute if needed
-            if (micPub.isMuted) {
-              await r.localParticipant.setMicrophoneEnabled(true);
-            }
-            return;
-          }
-          // Track is stale (device or constraint change) — replace it
-          await r.localParticipant.unpublishTrack(micPub.track as LocalAudioTrack);
-        }
-
-        // Publish fresh track from AudioManager pipeline
-        const audioTrack = audioManager.getFreshTrack();
-        if (!audioTrack) return;
-
-        console.log('[LiveKit] Publishing fresh microphone track (gen:', currentGen, ')');
-        await r.localParticipant.publishTrack(audioTrack, {
-          name: 'microphone',
-          source: Track.Source.Microphone,
-        });
-        lastMicGenRef.current = currentGen;
-
+        await republishMicrophone(r, lastMicGenRef);
       } catch (err) {
         console.error('[LiveKit] Failed to sync mic state:', err);
       }
@@ -391,15 +410,76 @@ export function useLiveKit() {
     syncMic();
 
     // Re-sync when AudioManager resumes
-    const unsubscribe = AudioManager.getInstance().onResumed(() => {
+    const unsubscribeResume = AudioManager.getInstance().onResumed(() => {
       syncMic();
     });
 
     return () => {
-      unsubscribe();
+      unsubscribeResume();
     };
   }, [isMuted, isDeafened, spaceMutedUserIds, spaceDeafenedUserIds, permissionMutedUserIds, inputDeviceId, inputVolume, isConnected, echoCancellation, noiseSuppression, autoGainControl, rnnoiseEnabled]);
 
+  // Subscribe to upstream-input-track-end events from AudioManager whenever a
+  // room is connected. The published mic track is a clone of a WebAudio
+  // destination node and never ends on hardware loss; only the upstream
+  // getUserMedia track does. AudioManager owns that signal — we react to it.
+  useEffect(() => {
+    if (!isConnected) return;
+    const am = AudioManager.getInstance();
+    const subscriberRoom = roomRef.current;
+
+    const unsubscribe = am.onInputTrackEnded(async () => {
+      // Room was replaced or torn down between event emission and handler run.
+      if (roomRef.current !== subscriberRoom || !subscriberRoom) return;
+
+      const deviceId = useVoiceStore.getState().inputDeviceId;
+      let copy = 'Microphone could not be restored';
+
+      try {
+        // Probe is intentionally constraint-free — we want to know whether the
+        // device is reachable, not whether full voice constraints succeed. Adding
+        // constraints here would create probe-vs-acquire skew (probe might fail
+        // for a constraint that AudioManager would have negotiated around).
+        const probe = await navigator.mediaDevices.getUserMedia({
+          audio: deviceId === 'default' ? true : { deviceId: { exact: deviceId } },
+        });
+        probe.getTracks().forEach(t => t.stop());
+
+        // Probe succeeded — device is back. Re-acquire and force a republish.
+        if (roomRef.current !== subscriberRoom) return;
+        try {
+          await am.setInputDevice(deviceId);
+          if (roomRef.current !== subscriberRoom) return;
+          await republishMicrophone(subscriberRoom, lastMicGenRef);
+          return;
+        } catch {
+          // copy already holds 'Microphone could not be restored'
+        }
+      } catch (err: any) {
+        if (err?.name === 'NotAllowedError') {
+          copy = 'Microphone permission was revoked';
+        } else if (err?.name === 'NotFoundError') {
+          if (deviceId !== 'default') {
+            // The configured device disappeared. Fall back to default — the
+            // store update triggers syncMic via its dep array, which calls
+            // republishMicrophone with the freshly acquired default stream.
+            useVoiceStore.getState().setInputDevice('default');
+            copy = 'Microphone disconnected — switched to system default';
+          } else {
+            copy = 'Microphone disconnected';
+          }
+        } else {
+          copy = 'Microphone could not be restored';
+        }
+      }
+
+      if (roomRef.current !== subscriberRoom) return;
+      useUIStore.getState().addToast(copy, 'warning');
+    });
+
+    return () => { unsubscribe(); };
+  }, [isConnected]);
+
   // Hot-swap the camera source when cameraDeviceId changes mid-call.
   // Compares against the published track's actual deviceId (getSettings().deviceId)
   // rather than a memoised previous store value, so the null → explicit-same-device
@@ -613,6 +693,11 @@ export function useLiveKit() {
             };
           }
         }
+        // NOTE: Microphone track-loss is handled at the AudioManager layer via
+        // `onInputTrackEnded`, NOT here. The published mic track is a clone of
+        // a WebAudio destination node and does not end on hardware loss — only
+        // the upstream getUserMedia track does. See the `useEffect` that
+        // subscribes to `AudioManager.onInputTrackEnded` above.
         guardedUpdate();
       });
       newRoom.on(RoomEvent.LocalTrackUnpublished, (publication: LocalTrackPublication) => {