Cleaned persistence manager, updated ui-options connectivity

public/js/tts-factory-module.js

@@ -314,14 +314,15 @@ class TTSFactoryModule extends BaseModule {
         for (const id in this.handlers) {
             const handler = this.handlers[id];
             availableHandlers.push({
-                id: id,
+                id: handler.getId(),
                 handler: handler,
+                displayName: handler.getName(),
                 isReady: handler.isReady === true
             });
         }
         
         // Add placeholder entries for important API handlers that might not be registered yet
-        const apiHandlerIds = ['elevenlabs', 'openai'];
+        const apiHandlerIds = ['elevenlabs-tts', 'openai-tts'];
         for (const id of apiHandlerIds) {
             // Only add if not already in the list
             if (!this.handlers[id] && !availableHandlers.some(h => h.id === id)) {
@@ -329,6 +330,7 @@ class TTSFactoryModule extends BaseModule {
                 availableHandlers.push({
                     id: id,
                     handler: null,
+                    displayName: id.split('-')[0].charAt(0).toUpperCase() + id.split('-')[0].slice(1),
                     isReady: false
                 });
             }
@@ -431,10 +433,10 @@ class TTSFactoryModule extends BaseModule {
         
         // Register handlers (in order of preference)
         const handlers = [
-            { id: 'kokoro', displayName: 'Kokoro TTS' },
-            { id: 'browser', displayName: 'Browser TTS' },
-            { id: 'elevenlabs', displayName: 'ElevenLabs TTS' },
-            { id: 'openai', displayName: 'OpenAI TTS' }
+            { id: 'kokoro-tts', displayName: 'Kokoro TTS' },
+            { id: 'browser-tts', displayName: 'Browser TTS' },
+            { id: 'elevenlabs-tts', displayName: 'ElevenLabs TTS' },
+            { id: 'openai-tts', displayName: 'OpenAI TTS' }
         ];
         
         // Register each handler