Voice Settings Tab Frontend

[lbedner]

Scope

React component for voice configuration in the dashboard.

Tasks

1. Create VoiceSettingsTab component

├── ProviderSelector (TTS)
├── ModelSelector (tts-1 vs tts-1-hd)
├── VoiceSelector (cards with preview buttons)
├── SpeedSlider (0.25x - 4.0x)
├── TestVoice button
├── ProviderSelector (STT)
├── ModelSelector (whisper models)
└── LanguageSelector

2. Wire up to catalog API

• Fetch providers, models, voices from catalog endpoints
• Handle loading states and errors

3. Add voice preview functionality

• Play sample audio when user clicks voice card
• Visual feedback during playback

4. Save preferences via settings endpoint

• Persist selections to backend
• Show save confirmation

Files

• frontend/dashboard/VoiceSettingsTab.tsx (NEW)
• frontend/dashboard/components/VoiceSelector.tsx (NEW)
• frontend/dashboard/components/VoicePreview.tsx (NEW)
• Dashboard layout file (add tab)

Dependencies

• Requires Voice Catalog Infrastructure #480 (Voice Catalog Infrastructure)
• Requires Voice Catalog API Endpoints #481 (Voice Catalog API Endpoints)

Verification

Manual: Open dashboard, navigate to Voice tab
- Change TTS provider/model/voice
- Click preview button, hear audio
- Save settings
- Verify settings persist after page refresh