# Tasks: add-audio-device-selector

## Phase 1: Core Device Management

### Task 1.1: Add Audio Settings Panel HTML Structure
- [x] Add collapsible panel container in meeting-detail.html
- [x] Add device dropdown selector element
- [x] Add volume meter container (canvas or div bars)
- [x] Add test recording/playback buttons
- [x] Add status indicator element
- **Validation**: Panel renders correctly, all elements visible

### Task 1.2: Implement Device Enumeration
- [x] Create `enumerateAudioDevices()` function
- [x] Filter out virtual devices (Stereo Mix)
- [x] Populate dropdown with device labels
- [x] Mark default device in dropdown
- [x] Add device change event listener for hot-plug support
- **Validation**: All connected microphones appear in dropdown

### Task 1.3: Implement Device Selection Logic
- [x] Create `selectAudioDevice(deviceId)` function
- [x] Stop existing audio context when switching
- [x] Create new AudioContext with selected device
- [x] Save selection to localStorage
- [x] Handle device unavailable errors
- **Validation**: Selecting device updates state, persists after refresh

## Phase 2: Volume Monitoring

### Task 2.1: Implement Volume Meter
- [x] Create AudioContext and AnalyserNode
- [x] Connect selected device to analyser
- [x] Create volume calculation function (RMS or peak)
- [x] Implement requestAnimationFrame loop for updates
- [x] Render volume level as visual bar
- **Validation**: Meter responds to voice input, updates smoothly

### Task 2.2: Volume Meter Styling
- [x] Add CSS for volume meter bar
- [x] Add gradient colors (green → yellow → red)
- [x] Add percentage text display
- [x] Add "No input detected" indicator
- **Validation**: Visual feedback is clear and responsive

## Phase 3: Test Recording

### Task 3.1: Implement Test Recording Function
- [x] Create `startTestRecording()` function
- [x] Use MediaRecorder with selected device
- [x] Implement 5-second auto-stop timer
- [x] Store recording as Blob
- [x] Update UI during recording (countdown, indicator)
- **Validation**: Can record 5 seconds, blob created

### Task 3.2: Implement Test Playback Function
- [x] Create `playTestRecording()` function
- [x] Create Audio element from blob URL
- [x] Handle play/stop states
- [x] Update UI during playback
- [x] Clean up blob URL when done
- **Validation**: Recorded audio plays back correctly

### Task 3.3: Test Recording UI State Management
- [x] Disable recording button during recording
- [x] Show countdown timer during recording
- [x] Enable play button after recording
- [x] Disable test controls during main recording
- **Validation**: UI states transition correctly

## Phase 4: Integration

### Task 4.1: Integrate with Main Recording
- [x] Modify `startRecording()` to use selected device
- [x] Add fallback to auto-selection if no preference
- [x] Handle selected device being unavailable
- [x] Stop volume monitoring during main recording
- **Validation**: Main recording uses selected device

### Task 4.2: Add Panel Collapse/Expand
- [x] Add collapse toggle button
- [x] Save panel state to localStorage
- [x] Load panel state on page load
- [x] Stop volume monitoring when collapsed
- **Validation**: Panel remembers collapse state

### Task 4.3: Add Refresh Device List Button
- [x] Add refresh icon button
- [x] Re-enumerate devices on click
- [x] Preserve selection if still available
- [x] Update dropdown options
- **Validation**: New devices appear after refresh

## Phase 5: Polish & Error Handling

### Task 5.1: Error Handling
- [x] Handle "No devices found" state
- [x] Handle permission denied errors
- [x] Handle device disconnection during use
- [x] Show user-friendly error messages (Chinese)
- **Validation**: All error states show appropriate messages

### Task 5.2: Localization
- [x] Add Chinese labels for all UI elements
- [x] Add Chinese error messages
- [x] Add tooltips for buttons
- **Validation**: All text is in Traditional Chinese

### Task 5.3: Testing & Documentation
- [x] Manual testing with multiple microphones
- [x] Test USB microphone hot-plug
- [x] Test headset microphone switching
- [x] Update DEPLOYMENT.md if needed
- **Validation**: Feature works with various microphone types

## Dependencies
- Task 1.2 depends on Task 1.1
- Task 2.1 depends on Task 1.3
- Task 3.1 depends on Task 1.3
- Task 4.1 depends on Tasks 1.3, 3.1
- Phase 5 depends on all previous phases

## Parallelizable Work
- Task 1.1 (HTML) and Task 2.2 (CSS) can run in parallel
- Task 3.1 (Recording) and Task 2.1 (Volume) can run in parallel after Task 1.3