Fix Kokoro TTS integration issues: Remove API key requirement and ensure system-specific options display correctly

public/js/options-ui.js

@@ -632,13 +632,19 @@ class OptionsUIModule extends BaseModule {
      * Show the options modal
      */
     show() {
-        if (!this.modal) return;
-        
-        // Reload preferences before showing
-        this.loadPreferences();
-        
         // Show modal
-        this.modal.style.display = 'flex';
+        if (this.modal) {
+            this.modal.style.display = 'flex';
+            
+            // Refresh TTS dropdown
+            this.populateTtsSystems();
+            
+            // Make sure the UI reflects the current voice
+            this.populateVoices();
+            
+            // Update API settings visibility based on the current selection
+            this.updateApiSettingsVisibility();
+        }
     }
     
     /**
@@ -669,6 +675,10 @@ class OptionsUIModule extends BaseModule {
         const ttsFactory = this.getModule('tts-factory');
         if (!ttsFactory) return;
         
+        // Debug TTS handlers to see what's happening
+        console.log('Options UI: Debugging TTS handlers before populating dropdown');
+        ttsFactory.debugTTSHandlers();
+        
         // Clear existing options
         this.elements.ttsSystem.innerHTML = '';
         
@@ -1123,9 +1133,27 @@ class OptionsUIModule extends BaseModule {
             
             const available = event.detail?.available || false;
             
-            // Update the TTS options visibility
+            // DON'T hide the TTS section completely, as this prevents configuring API keys
+            // Instead, just mark it visually (we'll keep controls accessible)
             if (this.elements.ttsSection) {
-                this.elements.ttsSection.style.display = available ? 'block' : 'none';
+                // Set a visual indicator that TTS is not working, but keep it visible
+                this.elements.ttsSection.classList.toggle('tts-unavailable', !available);
+                // Add status message if not available
+                if (!available && !this.elements.ttsUnavailableMessage) {
+                    const statusDiv = document.createElement('div');
+                    statusDiv.className = 'tts-status-message';
+                    statusDiv.innerHTML = '<strong>TTS Unavailable</strong>: Check logs for details. You can still configure API keys below.';
+                    statusDiv.style.color = '#ca3c3c';
+                    statusDiv.style.padding = '5px 0';
+                    statusDiv.style.marginBottom = '10px';
+                    this.elements.ttsUnavailableMessage = statusDiv;
+                    // Insert at the top of the TTS section
+                    this.elements.ttsSection.insertBefore(statusDiv, this.elements.ttsSection.firstChild);
+                } else if (available && this.elements.ttsUnavailableMessage) {
+                    // Remove the message if TTS becomes available
+                    this.elements.ttsUnavailableMessage.remove();
+                    this.elements.ttsUnavailableMessage = null;
+                }
             }
             
             // Update the TTS system dropdown