vibesurf 0.1.20__py3-none-any.whl → 0.1.21__py3-none-any.whl

vibe_surf/chrome_extension/scripts/settings-manager.js

@@ -7,14 +7,19 @@ class VibeSurfSettingsManager {
     this.state = {
       llmProfiles: [],
       mcpProfiles: [],
+      voiceProfiles: [],
       settings: {},
       currentProfileForm: null
     };
     this.elements = {};
     this.eventListeners = new Map();
     
+    // Initialize user settings storage
+    this.userSettingsStorage = new VibeSurfUserSettingsStorage();
+    
     this.bindElements();
     this.bindEvents();
+    this.initializeUserSettings();
   }
 
   bindElements() {
@@ -24,6 +29,11 @@ class VibeSurfSettingsManager {
       settingsTabs: document.querySelectorAll('.settings-tab'),
       settingsTabContents: document.querySelectorAll('.settings-tab-content'),
       
+      // General Settings
+      themeSelect: document.getElementById('theme-select'),
+      defaultAsrSelect: document.getElementById('default-asr-select'),
+      defaultTtsSelect: document.getElementById('default-tts-select'),
+      
       // LLM Profiles
       llmProfilesContainer: document.getElementById('llm-profiles-container'),
       addLlmProfileBtn: document.getElementById('add-llm-profile-btn'),
@@ -32,6 +42,10 @@ class VibeSurfSettingsManager {
       mcpProfilesContainer: document.getElementById('mcp-profiles-container'),
       addMcpProfileBtn: document.getElementById('add-mcp-profile-btn'),
       
+      // Voice Profiles
+      voiceProfilesContainer: document.getElementById('voice-profiles-container'),
+      addVoiceProfileBtn: document.getElementById('add-voice-profile-btn'),
+      
       // Profile Form Modal
       profileFormModal: document.getElementById('profile-form-modal'),
       profileFormTitle: document.getElementById('profile-form-title'),
@@ -64,6 +78,7 @@ class VibeSurfSettingsManager {
     // Profile management
     this.elements.addLlmProfileBtn?.addEventListener('click', () => this.handleAddProfile('llm'));
     this.elements.addMcpProfileBtn?.addEventListener('click', () => this.handleAddProfile('mcp'));
+    this.elements.addVoiceProfileBtn?.addEventListener('click', () => this.handleAddProfile('voice'));
     
     // Profile form modal
     this.elements.profileFormCancel?.addEventListener('click', this.closeProfileForm.bind(this));
@@ -78,6 +93,11 @@ class VibeSurfSettingsManager {
       this.elements.profileFormSubmit.addEventListener('click', this.handleProfileFormSubmitClick.bind(this));
     }
     
+    // General settings
+    this.elements.themeSelect?.addEventListener('change', this.handleThemeChange.bind(this));
+    this.elements.defaultAsrSelect?.addEventListener('change', this.handleDefaultAsrChange.bind(this));
+    this.elements.defaultTtsSelect?.addEventListener('change', this.handleDefaultTtsChange.bind(this));
+    
     // Environment variables
     this.elements.saveEnvVarsBtn?.addEventListener('click', this.handleSaveEnvironmentVariables.bind(this));
     
@@ -88,6 +108,65 @@ class VibeSurfSettingsManager {
     document.addEventListener('keydown', this.handleKeydown.bind(this));
   }
 
+  // Initialize user settings storage
+  async initializeUserSettings() {
+    try {
+      await this.userSettingsStorage.initialize();
+      
+      // Listen to storage events
+      this.userSettingsStorage.on('settingChanged', this.handleStorageSettingChanged.bind(this));
+      this.userSettingsStorage.on('settingsChanged', this.handleStorageSettingsChanged.bind(this));
+      
+    } catch (error) {
+      console.error('[SettingsManager] Failed to initialize user settings storage:', error);
+    }
+  }
+
+  // Handle individual setting changes from storage
+  handleStorageSettingChanged(data) {
+    
+    // Apply setting changes to UI if needed
+    switch (data.key) {
+      case 'theme':
+        this.applyTheme(data.value);
+        if (this.elements.themeSelect) {
+          this.elements.themeSelect.value = data.value;
+        }
+        break;
+      case 'defaultAsr':
+        if (this.elements.defaultAsrSelect) {
+          this.elements.defaultAsrSelect.value = data.value;
+        }
+        break;
+      case 'defaultTts':
+        if (this.elements.defaultTtsSelect) {
+          this.elements.defaultTtsSelect.value = data.value;
+        }
+        break;
+    }
+  }
+
+  // Handle bulk settings changes from storage
+  handleStorageSettingsChanged(allSettings) {
+    console.log('[SettingsManager] Storage settings changed (bulk):', allSettings);
+    
+    // Apply bulk setting changes to UI if needed
+    if (allSettings.theme) {
+      this.applyTheme(allSettings.theme);
+      if (this.elements.themeSelect) {
+        this.elements.themeSelect.value = allSettings.theme;
+      }
+    }
+    
+    if (allSettings.defaultAsr && this.elements.defaultAsrSelect) {
+      this.elements.defaultAsrSelect.value = allSettings.defaultAsr;
+    }
+    
+    if (allSettings.defaultTts && this.elements.defaultTtsSelect) {
+      this.elements.defaultTtsSelect.value = allSettings.defaultTts;
+    }
+  }
+
   handleKeydown(event) {
     // Close settings modal on Escape key
     if (event.key === 'Escape') {
@@ -140,6 +219,11 @@ class VibeSurfSettingsManager {
     if (targetContent) {
       targetContent.classList.add('active');
     }
+    
+    // If switching to general tab, ensure environment variables are loaded
+    if (targetTabId === 'general') {
+      this.loadEnvironmentVariables();
+    }
   }
 
   // Data Loading
@@ -151,13 +235,24 @@ class VibeSurfSettingsManager {
       // Load MCP profiles
       await this.loadMCPProfiles();
       
+      // Load Voice profiles
+      await this.loadVoiceProfiles();
+      
       // Load environment variables
       await this.loadEnvironmentVariables();
       
+      // Load general settings
+      await this.loadGeneralSettings();
+      
+      // Load voice profiles for general settings dropdowns
+      await this.loadVoiceProfilesForGeneral();
+      
       // Emit event to update LLM profile select dropdown
+      // This should happen AFTER all data is loaded but BEFORE user selections are restored
       this.emit('profilesUpdated', {
         llmProfiles: this.state.llmProfiles,
-        mcpProfiles: this.state.mcpProfiles
+        mcpProfiles: this.state.mcpProfiles,
+        voiceProfiles: this.state.voiceProfiles
       });
       
     } catch (error) {
@@ -214,6 +309,30 @@ class VibeSurfSettingsManager {
     }
   }
 
+  async loadVoiceProfiles() {
+    try {
+      const response = await this.apiClient.getVoiceProfiles(false); // Load all profiles, not just active
+      console.log('[SettingsManager] Voice profiles loaded:', response);
+      
+      // Handle different response structures
+      let profiles = [];
+      if (Array.isArray(response)) {
+        profiles = response;
+      } else if (response.profiles && Array.isArray(response.profiles)) {
+        profiles = response.profiles;
+      } else if (response.data && Array.isArray(response.data)) {
+        profiles = response.data;
+      }
+      
+      this.state.voiceProfiles = profiles;
+      this.renderVoiceProfiles(profiles);
+    } catch (error) {
+      console.error('[SettingsManager] Failed to load Voice profiles:', error);
+      this.state.voiceProfiles = [];
+      this.renderVoiceProfiles([]);
+    }
+  }
+
   async loadEnvironmentVariables() {
     try {
       const response = await this.apiClient.getEnvironmentVariables();
@@ -226,6 +345,215 @@ class VibeSurfSettingsManager {
     }
   }
 
+  async loadGeneralSettings() {
+    try {
+      // Load and apply theme setting from user settings storage
+      const savedTheme = await this.userSettingsStorage.getTheme();
+      if (this.elements.themeSelect) {
+        this.elements.themeSelect.value = savedTheme;
+      }
+      this.applyTheme(savedTheme);
+      
+      // Voice profile defaults will be handled by autoSelectLatestVoiceProfiles
+      // after voice profiles are loaded in loadVoiceProfilesForGeneral
+      
+      console.log('[SettingsManager] General settings loaded successfully');
+    } catch (error) {
+      console.error('[SettingsManager] Failed to load general settings:', error);
+    }
+  }
+
+  async loadVoiceProfilesForGeneral() {
+    try {
+      // Load voice profiles for ASR and TTS dropdowns in general settings
+      const response = await this.apiClient.getVoiceProfiles(false);
+      
+      // Handle different response structures
+      let profiles = [];
+      if (Array.isArray(response)) {
+        profiles = response;
+      } else if (response.profiles && Array.isArray(response.profiles)) {
+        profiles = response.profiles;
+      } else if (response.data && Array.isArray(response.data)) {
+        profiles = response.data;
+      }
+      
+      // Filter profiles by type
+      const asrProfiles = profiles.filter(p => p.voice_model_type === 'asr' && p.is_active);
+      const ttsProfiles = profiles.filter(p => p.voice_model_type === 'tts' && p.is_active);
+      
+      // Populate ASR dropdown
+      if (this.elements.defaultAsrSelect) {
+        this.elements.defaultAsrSelect.innerHTML = '<option value="">No ASR profile selected</option>';
+        asrProfiles.forEach(profile => {
+          const option = document.createElement('option');
+          option.value = profile.voice_profile_name;
+          option.textContent = profile.voice_profile_name;
+          this.elements.defaultAsrSelect.appendChild(option);
+        });
+      }
+      
+      // Populate TTS dropdown
+      if (this.elements.defaultTtsSelect) {
+        this.elements.defaultTtsSelect.innerHTML = '<option value="">No TTS profile selected</option>';
+        ttsProfiles.forEach(profile => {
+          const option = document.createElement('option');
+          option.value = profile.voice_profile_name;
+          option.textContent = profile.voice_profile_name;
+          this.elements.defaultTtsSelect.appendChild(option);
+        });
+      }
+      
+      // Auto-select latest updated profiles if no defaults are set
+      await this.autoSelectLatestVoiceProfiles(asrProfiles, ttsProfiles);
+      
+    } catch (error) {
+      console.error('[SettingsManager] Failed to load voice profiles for general settings:', error);
+      // Populate with empty options on error
+      if (this.elements.defaultAsrSelect) {
+        this.elements.defaultAsrSelect.innerHTML = '<option value="">Failed to load ASR profiles</option>';
+      }
+      if (this.elements.defaultTtsSelect) {
+        this.elements.defaultTtsSelect.innerHTML = '<option value="">Failed to load TTS profiles</option>';
+      }
+    }
+  }
+
+  async autoSelectLatestVoiceProfiles(asrProfiles, ttsProfiles) {
+    try {
+      // Get current saved defaults
+      const savedAsrProfile = await this.userSettingsStorage.getDefaultAsr();
+      const savedTtsProfile = await this.userSettingsStorage.getDefaultTts();
+      
+      // Check ASR profile
+      if (!savedAsrProfile || !asrProfiles.find(p => p.voice_profile_name === savedAsrProfile)) {
+        // No ASR profile selected or saved profile doesn't exist, select latest updated
+        if (asrProfiles.length > 0) {
+          // Sort by updated_at desc to get the latest updated profile
+          const latestAsrProfile = asrProfiles.sort((a, b) => {
+            const dateA = new Date(a.updated_at || a.created_at);
+            const dateB = new Date(b.updated_at || b.created_at);
+            return dateB - dateA; // DESC order
+          })[0];
+          
+          console.log('[SettingsManager] Auto-selecting latest ASR profile:', latestAsrProfile.voice_profile_name);
+          
+          // Set as default in storage
+          await this.userSettingsStorage.setDefaultAsr(latestAsrProfile.voice_profile_name);
+          
+          // Update UI
+          if (this.elements.defaultAsrSelect) {
+            this.elements.defaultAsrSelect.value = latestAsrProfile.voice_profile_name;
+          }
+          
+          this.emit('notification', {
+            message: `Auto-selected latest ASR profile: ${latestAsrProfile.voice_profile_name}`,
+            type: 'info'
+          });
+        }
+      } else {
+        // Saved ASR profile exists and is valid - restore it to UI
+        console.log('[SettingsManager] Restoring saved ASR profile to UI:', savedAsrProfile);
+        if (this.elements.defaultAsrSelect) {
+          this.elements.defaultAsrSelect.value = savedAsrProfile;
+        }
+      }
+      
+      // Check TTS profile
+      if (!savedTtsProfile || !ttsProfiles.find(p => p.voice_profile_name === savedTtsProfile)) {
+        // No TTS profile selected or saved profile doesn't exist, select latest updated
+        if (ttsProfiles.length > 0) {
+          // Sort by updated_at desc to get the latest updated profile
+          const latestTtsProfile = ttsProfiles.sort((a, b) => {
+            const dateA = new Date(a.updated_at || a.created_at);
+            const dateB = new Date(b.updated_at || b.created_at);
+            return dateB - dateA; // DESC order
+          })[0];
+          
+          console.log('[SettingsManager] Auto-selecting latest TTS profile:', latestTtsProfile.voice_profile_name);
+          
+          // Set as default in storage
+          await this.userSettingsStorage.setDefaultTts(latestTtsProfile.voice_profile_name);
+          
+          // Update UI
+          if (this.elements.defaultTtsSelect) {
+            this.elements.defaultTtsSelect.value = latestTtsProfile.voice_profile_name;
+          }
+          
+          this.emit('notification', {
+            message: `Auto-selected latest TTS profile: ${latestTtsProfile.voice_profile_name}`,
+            type: 'info'
+          });
+        }
+      } else {
+        // Saved TTS profile exists and is valid - restore it to UI
+        console.log('[SettingsManager] Restoring saved TTS profile to UI:', savedTtsProfile);
+        if (this.elements.defaultTtsSelect) {
+          this.elements.defaultTtsSelect.value = savedTtsProfile;
+        }
+      }
+      
+    } catch (error) {
+      console.error('[SettingsManager] Failed to auto-select latest voice profiles:', error);
+    }
+  }
+
+  async handleDefaultAsrChange(event) {
+    const selectedProfile = event.target.value;
+    
+    try {
+      // Store ASR profile preference in user settings storage
+      await this.userSettingsStorage.setDefaultAsr(selectedProfile);
+      
+      if (selectedProfile) {
+        this.emit('notification', {
+          message: `Default ASR profile set to ${selectedProfile}`,
+          type: 'success'
+        });
+      } else {
+        this.emit('notification', {
+          message: 'Default ASR profile cleared',
+          type: 'info'
+        });
+      }
+      
+    } catch (error) {
+      console.error('[SettingsManager] Failed to change default ASR profile:', error);
+      this.emit('notification', {
+        message: 'Failed to change default ASR profile',
+        type: 'error'
+      });
+    }
+  }
+
+  async handleDefaultTtsChange(event) {
+    const selectedProfile = event.target.value;
+    
+    try {
+      // Store TTS profile preference in user settings storage
+      await this.userSettingsStorage.setDefaultTts(selectedProfile);
+      
+      if (selectedProfile) {
+        this.emit('notification', {
+          message: `Default TTS profile set to ${selectedProfile}`,
+          type: 'success'
+        });
+      } else {
+        this.emit('notification', {
+          message: 'Default TTS profile cleared',
+          type: 'info'
+        });
+      }
+      
+    } catch (error) {
+      console.error('[SettingsManager] Failed to change default TTS profile:', error);
+      this.emit('notification', {
+        message: 'Failed to change default TTS profile',
+        type: 'error'
+      });
+    }
+  }
+
   // Profile Management
   async handleAddProfile(type) {
     try {
@@ -238,7 +566,7 @@ class VibeSurfSettingsManager {
 
   async showProfileForm(type, profile = null) {
     const isEdit = profile !== null;
-    const title = isEdit ? `Edit ${type.toUpperCase()} Profile` : `Add ${type.toUpperCase()} Profile`;
+    const title = isEdit ? `Edit ${type.toUpperCase()}` : `Add ${type.toUpperCase()}`;
     
     if (this.elements.profileFormTitle) {
       this.elements.profileFormTitle.textContent = title;
@@ -250,6 +578,8 @@ class VibeSurfSettingsManager {
       formHTML = await this.generateLLMProfileForm(profile);
     } else if (type === 'mcp') {
       formHTML = this.generateMCPProfileForm(profile);
+    } else if (type === 'voice') {
+      formHTML = await this.generateVoiceProfileForm(profile);
     }
     
     if (this.elements.profileForm) {
@@ -257,7 +587,7 @@ class VibeSurfSettingsManager {
       this.elements.profileForm.dataset.type = type;
       this.elements.profileForm.dataset.mode = isEdit ? 'edit' : 'create';
       if (isEdit && profile) {
-        this.elements.profileForm.dataset.profileId = profile.profile_name || profile.mcp_id;
+        this.elements.profileForm.dataset.profileId = profile.profile_name || profile.mcp_id || profile.voice_profile_name;
       }
     }
     
@@ -367,6 +697,104 @@ class VibeSurfSettingsManager {
     `;
   }
 
+  async generateVoiceProfileForm(profile = null) {
+    // Fetch available voice models
+    let models = [];
+    try {
+      const response = await this.apiClient.getVoiceModels();
+      models = response.models || response || [];
+    } catch (error) {
+      console.error('[SettingsManager] Failed to fetch voice models:', error);
+    }
+    
+    // Group models by type
+    const asrModels = models.filter(m => m.model_type === 'asr');
+    const ttsModels = models.filter(m => m.model_type === 'tts');
+    
+    const selectedModelType = profile?.voice_model_type || 'asr';
+    const availableModels = selectedModelType === 'asr' ? asrModels : ttsModels;
+    
+    const modelsOptions = availableModels.map(m =>
+      `<option value="${m.model_name}" ${profile?.voice_model_name === m.model_name ? 'selected' : ''}>${m.model_name}</option>`
+    ).join('');
+    
+    // Convert existing meta params to JSON for editing
+    let defaultMetaJson = '{}';
+    if (profile?.voice_meta_params) {
+      try {
+        defaultMetaJson = JSON.stringify(profile.voice_meta_params, null, 2);
+      } catch (error) {
+        console.warn('[SettingsManager] Failed to stringify existing voice_meta_params:', error);
+      }
+    }
+    
+    return `
+      <div class="form-group">
+        <label class="form-label required">Profile Name</label>
+        <input type="text" name="voice_profile_name" class="form-input" value="${profile?.voice_profile_name || ''}"
+               placeholder="Enter a unique name for this profile" required ${profile ? 'readonly' : ''}>
+        <div class="form-help">A unique identifier for this voice configuration</div>
+      </div>
+      
+      <div class="form-group">
+        <label class="form-label required">Model Type</label>
+        <select name="voice_model_type" class="form-select" required>
+          <option value="asr" ${selectedModelType === 'asr' ? 'selected' : ''}>ASR (Speech Recognition)</option>
+          <option value="tts" ${selectedModelType === 'tts' ? 'selected' : ''}>TTS (Text to Speech)</option>
+        </select>
+        <div class="form-help">Choose the type of voice model</div>
+      </div>
+      
+      <div class="form-group">
+        <label class="form-label required">Voice Model</label>
+        <select name="voice_model_name" class="form-select voice-model-select" required>
+          <option value="">Select a model</option>
+          ${modelsOptions}
+        </select>
+        <div class="form-help">Choose your voice model</div>
+      </div>
+      
+      <div class="form-group api-key-field">
+        <label class="form-label required">API Key</label>
+        <input type="password" name="api_key" class="form-input api-key-input"
+               placeholder="${profile ? 'Leave empty to keep existing key' : 'Enter your API key'}"
+               ${profile ? '' : 'required'}>
+        <button type="button" class="api-key-toggle" title="Toggle visibility">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M1 12S5 4 12 4S23 12 23 12S19 20 12 20S1 12 1 12Z" stroke="currentColor" stroke-width="2"/>
+            <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
+          </svg>
+        </button>
+        <div class="form-help">Your voice provider's API key for authentication</div>
+      </div>
+      
+      <div class="form-group">
+        <label class="form-label">Model Parameters (JSON)</label>
+        <textarea name="voice_meta_params_json" class="form-textarea json-input" rows="4"
+                  placeholder="Enter JSON configuration for model parameters (optional)">${defaultMetaJson}</textarea>
+        <div class="json-validation-feedback"></div>
+        <div class="form-help">
+          Optional JSON configuration for model-specific parameters. Example:
+          <br><code>{"language": "zh", "sample_rate": 16000}</code>
+        </div>
+      </div>
+      
+      <div class="form-group">
+        <label class="form-label">Description</label>
+        <textarea name="description" class="form-textarea" placeholder="Optional description for this profile">${profile?.description || ''}</textarea>
+        <div class="form-help">Optional description to help identify this profile</div>
+      </div>
+      
+      <div class="form-group">
+        <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
+          <input type="checkbox" name="is_active" ${profile?.is_active !== false ? 'checked' : ''}>
+          <span class="form-label" style="margin: 0;">Active</span>
+        </label>
+        <div class="form-help">Whether this voice profile is active and available for use</div>
+      </div>
+    `;
+  }
+
   generateMCPProfileForm(profile = null) {
     // Convert existing profile to JSON for editing
     let defaultJson = '{\n  "command": "npx",\n  "args": [\n    "-y",\n    "@modelcontextprotocol/server-filesystem",\n    "/path/to/directory"\n  ]\n}';
@@ -430,6 +858,12 @@ class VibeSurfSettingsManager {
       providerSelect.addEventListener('change', this.handleProviderChange.bind(this));
     }
     
+    // Voice model type change handler for Voice profiles
+    const voiceModelTypeSelect = this.elements.profileForm?.querySelector('select[name="voice_model_type"]');
+    if (voiceModelTypeSelect) {
+      voiceModelTypeSelect.addEventListener('change', this.handleVoiceModelTypeChange.bind(this));
+    }
+    
     // API key toggle handler
     const apiKeyToggle = this.elements.profileForm?.querySelector('.api-key-toggle');
     const apiKeyInput = this.elements.profileForm?.querySelector('.api-key-input');
@@ -457,6 +891,16 @@ class VibeSurfSettingsManager {
       // Trigger initial validation
       this.handleJsonInputValidation({ target: jsonInput });
     }
+    
+    // JSON validation handler for Voice meta params
+    const voiceJsonInput = this.elements.profileForm?.querySelector('textarea[name="voice_meta_params_json"]');
+    if (voiceJsonInput) {
+      voiceJsonInput.addEventListener('input', this.handleVoiceJsonInputValidation.bind(this));
+      voiceJsonInput.addEventListener('blur', this.handleVoiceJsonInputValidation.bind(this));
+      
+      // Trigger initial validation
+      this.handleVoiceJsonInputValidation({ target: voiceJsonInput });
+    }
   }
 
   handleJsonInputValidation(event) {
@@ -511,6 +955,48 @@ class VibeSurfSettingsManager {
     }
   }
 
+  handleVoiceJsonInputValidation(event) {
+    const textarea = event.target;
+    const feedbackElement = textarea.parentElement.querySelector('.json-validation-feedback');
+    
+    if (!feedbackElement) return;
+    
+    const jsonText = textarea.value.trim();
+    
+    if (!jsonText) {
+      feedbackElement.innerHTML = '';
+      textarea.classList.remove('json-valid', 'json-invalid');
+      return;
+    }
+    
+    try {
+      const parsed = JSON.parse(jsonText);
+      
+      // Validate that it's an object (not array, string, etc.)
+      if (typeof parsed !== 'object' || Array.isArray(parsed) || parsed === null) {
+        throw new Error('Voice meta parameters must be a JSON object');
+      }
+      
+      // Success - no specific validation required for voice meta params (flexible structure)
+      feedbackElement.innerHTML = '<span class="json-success">✓ Valid JSON configuration</span>';
+      textarea.classList.remove('json-invalid');
+      textarea.classList.add('json-valid');
+      
+      // Store valid state for form submission
+      textarea.dataset.isValid = 'true';
+      
+    } catch (error) {
+      const errorMessage = error.message;
+      feedbackElement.innerHTML = `<span class="json-error">✗ Invalid JSON: ${errorMessage}</span>`;
+      textarea.classList.remove('json-valid');
+      textarea.classList.add('json-invalid');
+      
+      // Store invalid state for form submission
+      textarea.dataset.isValid = 'false';
+      textarea.dataset.errorMessage = errorMessage;
+    }
+  }
+
   handleProfileFormSubmitClick(event) {
     console.log('[SettingsManager] Profile form submit button clicked');
     event.preventDefault();
@@ -523,6 +1009,41 @@ class VibeSurfSettingsManager {
     }
   }
 
+  async handleVoiceModelTypeChange(event) {
+    const selectedType = event.target.value;
+    const modelSelect = this.elements.profileForm?.querySelector('select[name="voice_model_name"]');
+    
+    if (!selectedType || !modelSelect) {
+      return;
+    }
+    
+    // Clear current options
+    modelSelect.innerHTML = '<option value="">Loading...</option>';
+    
+    try {
+      const response = await this.apiClient.getVoiceModels(selectedType);
+      const models = response.models || response || [];
+      
+      // Models are already filtered by the API, no need to filter again
+      
+      // Update select options
+      modelSelect.innerHTML = '<option value="">Select a model</option>' +
+        models.map(model =>
+          `<option value="${model.model_name}">${model.model_name}</option>`
+        ).join('');
+        
+    } catch (error) {
+      console.error('[SettingsManager] Failed to fetch voice models for type:', error);
+      modelSelect.innerHTML = '<option value="">Failed to load models</option>';
+      
+      // Show user-friendly error notification
+      this.emit('notification', {
+        message: `Failed to load models for ${selectedType}. Please try again.`,
+        type: 'warning'
+      });
+    }
+  }
+
   async handleProviderChange(event) {
     const selectedProvider = event.target.value;
     const modelInput = this.elements.profileForm?.querySelector('input[name="model"]');
@@ -623,6 +1144,35 @@ class VibeSurfSettingsManager {
       }
     }
     
+    // Handle Voice profile meta params structure - parse JSON input
+    if (type === 'voice') {
+      const jsonInput = data.voice_meta_params_json;
+      
+      if (jsonInput && jsonInput.trim()) {
+        try {
+          const parsedParams = JSON.parse(jsonInput);
+          
+          // Validate that it's an object (not array, string, etc.)
+          if (typeof parsedParams !== 'object' || Array.isArray(parsedParams) || parsedParams === null) {
+            throw new Error('Voice meta parameters must be a JSON object');
+          }
+          
+          // Set the parsed parameters
+          data.voice_meta_params = parsedParams;
+          
+        } catch (error) {
+          console.error('[SettingsManager] Failed to parse Voice meta params JSON:', error);
+          this.emit('error', { message: error.message });
+          form.dataset.submitting = 'false';
+          this.setProfileFormSubmitting(false);
+          return;
+        }
+      }
+      
+      // Remove the JSON field as it's not needed in the API request
+      delete data.voice_meta_params_json;
+    }
+    
     // Handle MCP server params structure - parse JSON input
     if (type === 'mcp') {
       const jsonInput = data.mcp_server_params_json;
@@ -679,12 +1229,16 @@ class VibeSurfSettingsManager {
       if (mode === 'create') {
         if (type === 'llm') {
           response = await this.apiClient.createLLMProfile(data);
+        } else if (type === 'voice') {
+          response = await this.apiClient.createVoiceProfile(data);
         } else {
           response = await this.apiClient.createMCPProfile(data);
         }
       } else {
         if (type === 'llm') {
           response = await this.apiClient.updateLLMProfile(profileId, data);
+        } else if (type === 'voice') {
+          response = await this.apiClient.updateVoiceProfile(profileId, data);
         } else {
           response = await this.apiClient.updateMCPProfile(profileId, data);
         }
@@ -779,6 +1333,60 @@ class VibeSurfSettingsManager {
     }
   }
 
+  async handleThemeChange(event) {
+    const selectedTheme = event.target.value;
+    
+    try {
+      // Store theme preference in user settings storage
+      await this.userSettingsStorage.setTheme(selectedTheme);
+      
+      // Apply theme to document
+      this.applyTheme(selectedTheme);
+      
+      this.emit('notification', {
+        message: `Theme changed to ${selectedTheme}`,
+        type: 'success'
+      });
+      
+    } catch (error) {
+      console.error('[SettingsManager] Failed to change theme:', error);
+      this.emit('notification', {
+        message: 'Failed to change theme',
+        type: 'error'
+      });
+    }
+  }
+
+
+  applyTheme(theme) {
+    const root = document.documentElement;
+    
+    if (theme === 'dark') {
+      root.setAttribute('data-theme', 'dark');
+      root.classList.add('dark-theme');
+      root.classList.remove('light-theme');
+    } else if (theme === 'light') {
+      root.setAttribute('data-theme', 'light');
+      root.classList.add('light-theme');
+      root.classList.remove('dark-theme');
+    } else { // auto
+      root.classList.remove('dark-theme', 'light-theme');
+      // Let system preference take over
+      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        root.setAttribute('data-theme', 'dark');
+        root.classList.add('dark-theme');
+      } else {
+        root.setAttribute('data-theme', 'light');
+        root.classList.add('light-theme');
+      }
+    }
+    
+    // Force a repaint to ensure theme changes are applied immediately
+    document.body.style.display = 'none';
+    document.body.offsetHeight; // trigger reflow
+    document.body.style.display = '';
+  }
+
   async handleBackendUrlChange(event) {
     const newUrl = event.target.value.trim();
     
@@ -1006,6 +1614,79 @@ class VibeSurfSettingsManager {
     });
   }
 
+  renderVoiceProfiles(profiles) {
+    const container = document.getElementById('voice-profiles-list');
+    if (!container) return;
+
+    if (profiles.length === 0) {
+      container.innerHTML = `
+        <div class="empty-state">
+          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M19 14C19 18.5 15.5 22 11 22C6.5 22 3 18.5 3 14V12C3 7.5 6.5 4 11 4S19 7.5 19 12V14ZM11 8C8.8 8 7 9.8 7 12V14C7 16.2 8.8 18 11 18S15 16.2 15 14V12C15 9.8 13.2 8 11 8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <circle cx="11" cy="11" r="2" stroke="currentColor" stroke-width="2"/>
+          </svg>
+          <h3>No Voice Profiles</h3>
+          <p>Create your first voice profile to enable speech features</p>
+        </div>
+      `;
+      return;
+    }
+
+    const profilesHTML = profiles.map(profile => `
+      <div class="profile-card ${profile.is_active ? 'active' : 'inactive'}" data-profile-id="${profile.voice_profile_name}">
+        <div class="profile-status ${profile.is_active ? 'active' : 'inactive'}">
+          ${profile.is_active ? 'Active' : 'Inactive'}
+        </div>
+        <div class="profile-header">
+          <div class="profile-title">
+            <h3>${this.escapeHtml(profile.voice_profile_name)}</h3>
+            <span class="profile-provider">${this.escapeHtml(profile.voice_model_name)} (${profile.voice_model_type.toUpperCase()})</span>
+          </div>
+          <div class="profile-actions">
+            <button class="profile-action-btn edit" title="Edit Profile" data-profile='${JSON.stringify(profile)}'>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M18.5 2.5C18.8978 2.10217 19.4374 1.87868 20 1.87868C20.5626 1.87868 21.1022 2.10217 21.5 2.5C21.8978 2.89783 22.1213 3.43739 22.1213 4C22.1213 4.56261 21.8978 5.10217 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </button>
+            <button class="profile-action-btn delete" title="Delete Profile" data-profile-id="${profile.voice_profile_name}">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M3 6H5H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div class="profile-content">
+          ${profile.description ? `<p class="profile-description">${this.escapeHtml(profile.description)}</p>` : ''}
+          <div class="profile-details">
+            <div class="profile-detail"><strong>Model:</strong> ${this.escapeHtml(profile.voice_model_name)}</div>
+            <div class="profile-detail"><strong>Type:</strong> ${profile.voice_model_type.toUpperCase()}</div>
+            ${profile.voice_meta_params ? `<div class="profile-detail"><strong>Parameters:</strong> ${Object.keys(profile.voice_meta_params).length} custom settings</div>` : ''}
+          </div>
+        </div>
+      </div>
+    `).join('');
+
+    container.innerHTML = profilesHTML;
+
+    // Add event listeners for profile actions
+    container.querySelectorAll('.edit').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const profile = JSON.parse(btn.dataset.profile);
+        this.showProfileForm('voice', profile);
+      });
+    });
+
+    container.querySelectorAll('.delete').forEach(btn => {
+      btn.addEventListener('click', async (e) => {
+        e.stopPropagation();
+        await this.handleDeleteProfile('voice', btn.dataset.profileId);
+      });
+    });
+  }
+
   renderEnvironmentVariables(envVars) {
     const container = this.elements.envVariablesList;
     if (!container) return;
@@ -1142,6 +1823,8 @@ class VibeSurfSettingsManager {
       
       if (type === 'llm') {
         await this.apiClient.deleteLLMProfile(profileId);
+      } else if (type === 'voice') {
+        await this.apiClient.deleteVoiceProfile(profileId);
       } else {
         await this.apiClient.deleteMCPProfile(profileId);
       }
@@ -1185,6 +1868,10 @@ class VibeSurfSettingsManager {
     return this.state.mcpProfiles || [];
   }
 
+  getVoiceProfiles() {
+    return this.state.voiceProfiles || [];
+  }
+
   showModal() {
     if (this.elements.settingsModal) {
       this.elements.settingsModal.classList.remove('hidden');