Update templates/index.html

templates/index.html

@@ -6,133 +6,109 @@
     <title>J.A.R.V.I.S. AI</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: #0a0a1a;
-            color: #e0e0e0;
-            height: 100vh;
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
+            background: #0a0a1a; color: #e0e0e0;
+            height: 100vh; display: flex; flex-direction: column; overflow: hidden;
         }
 
         .header {
             background: linear-gradient(135deg, #0d1b2a, #1b2838);
             border-bottom: 1px solid #00d4ff33;
-            padding: 14px 24px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            flex-shrink: 0;
+            padding: 12px 20px; display: flex; align-items: center;
+            justify-content: space-between; flex-shrink: 0;
         }
-
-        .header-left { display: flex; align-items: center; gap: 14px; }
-
+        .header-left { display: flex; align-items: center; gap: 12px; }
         .arc-reactor {
-            width: 42px; height: 42px; border-radius: 50%;
+            width: 38px; height: 38px; border-radius: 50%;
             background: radial-gradient(circle, #00d4ff 0%, #0088aa 40%, #004466 70%, transparent 100%);
             box-shadow: 0 0 20px #00d4ff88, 0 0 40px #00d4ff44, inset 0 0 10px #00d4ff66;
-            animation: pulse 2s ease-in-out infinite;
-            position: relative;
+            animation: pulse 2s ease-in-out infinite; position: relative;
         }
-
         .arc-reactor::after {
             content: ''; position: absolute; top: 50%; left: 50%;
-            transform: translate(-50%, -50%);
-            width: 14px; height: 14px; border-radius: 50%;
-            background: #00d4ff; box-shadow: 0 0 8px #00d4ff;
+            transform: translate(-50%, -50%); width: 12px; height: 12px;
+            border-radius: 50%; background: #00d4ff; box-shadow: 0 0 8px #00d4ff;
         }
-
         @keyframes pulse {
             0%, 100% { box-shadow: 0 0 20px #00d4ff88, 0 0 40px #00d4ff44; }
             50% { box-shadow: 0 0 30px #00d4ffaa, 0 0 60px #00d4ff66; }
         }
+        .header-title h1 { font-size: 1.2rem; color: #00d4ff; letter-spacing: 3px; text-transform: uppercase; }
+        .header-title p { font-size: 0.65rem; color: #5a8a9a; letter-spacing: 1px; }
 
-        .header-title h1 {
-            font-size: 1.3rem; font-weight: 600;
-            color: #00d4ff; letter-spacing: 3px; text-transform: uppercase;
-        }
-        .header-title p { font-size: 0.7rem; color: #5a8a9a; letter-spacing: 1px; }
-
-        .header-controls { display: flex; gap: 10px; align-items: center; }
-
-        .toggle-btn {
+        .header-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+        .ctrl-btn {
             background: #0d1b2a; border: 1px solid #00d4ff44; color: #00d4ff;
-            padding: 6px 14px; border-radius: 6px; cursor: pointer;
-            font-size: 0.75rem; transition: all 0.3s; letter-spacing: 1px;
+            padding: 5px 12px; border-radius: 6px; cursor: pointer;
+            font-size: 0.7rem; transition: all 0.3s; letter-spacing: 0.5px;
         }
-        .toggle-btn:hover { background: #00d4ff22; border-color: #00d4ff88; }
-        .toggle-btn.active { background: #00d4ff22; border-color: #00d4ff; box-shadow: 0 0 10px #00d4ff44; }
-
+        .ctrl-btn:hover { background: #00d4ff22; border-color: #00d4ff88; }
+        .ctrl-btn.active { background: #00d4ff22; border-color: #00d4ff; box-shadow: 0 0 8px #00d4ff44; }
         .status-dot {
             width: 8px; height: 8px; border-radius: 50%;
             background: #00ff88; box-shadow: 0 0 6px #00ff88;
         }
         .status-dot.error { background: #ff4444; box-shadow: 0 0 6px #ff4444; }
 
+        /* Config panel */
+        .config-bar {
+            background: #0d1117; border-bottom: 1px solid #00d4ff15;
+            padding: 8px 20px; display: none; flex-wrap: wrap; gap: 12px;
+            align-items: center; flex-shrink: 0;
+        }
+        .config-bar.open { display: flex; }
+        .config-group { display: flex; align-items: center; gap: 6px; }
+        .config-group label { font-size: 0.65rem; color: #5a8a9a; text-transform: uppercase; letter-spacing: 1px; }
+        .config-group select {
+            background: #0f1923; border: 1px solid #00d4ff33; color: #00d4ff;
+            padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; cursor: pointer;
+        }
+        .config-group select:focus { border-color: #00d4ff; outline: none; }
+        .config-tag {
+            font-size: 0.6rem; padding: 3px 8px; border-radius: 10px;
+            background: #00d4ff15; border: 1px solid #00d4ff33; color: #00d4ffaa;
+        }
+
+        /* Chat */
         .chat-container {
-            flex: 1; overflow-y: auto; padding: 20px 24px;
-            display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth;
+            flex: 1; overflow-y: auto; padding: 16px 20px;
+            display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth;
         }
-        .chat-container::-webkit-scrollbar { width: 4px; }
-        .chat-container::-webkit-scrollbar-track { background: transparent; }
+        .chat-container::-webkit-scrollbar { width: 3px; }
         .chat-container::-webkit-scrollbar-thumb { background: #00d4ff33; border-radius: 2px; }
-
         .message {
-            max-width: 78%; padding: 12px 18px; border-radius: 16px;
-            font-size: 0.92rem; line-height: 1.6; animation: fadeIn 0.3s ease-out;
+            max-width: 80%; padding: 12px 16px; border-radius: 14px;
+            font-size: 0.9rem; line-height: 1.6; animation: fadeIn 0.3s ease-out;
         }
-
         @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
+            from { opacity: 0; transform: translateY(8px); }
             to { opacity: 1; transform: translateY(0); }
         }
-
         .message.user {
-            align-self: flex-end;
-            background: linear-gradient(135deg, #1a3a5c, #0d2847);
-            border: 1px solid #00d4ff33; color: #c8e6ff;
-            border-bottom-right-radius: 4px;
+            align-self: flex-end; background: linear-gradient(135deg, #1a3a5c, #0d2847);
+            border: 1px solid #00d4ff33; color: #c8e6ff; border-bottom-right-radius: 4px;
         }
-
         .message.assistant {
-            align-self: flex-start;
-            background: linear-gradient(135deg, #141e30, #0f1923);
-            border: 1px solid #00d4ff22; color: #e0e0e0;
-            border-bottom-left-radius: 4px;
+            align-self: flex-start; background: linear-gradient(135deg, #141e30, #0f1923);
+            border: 1px solid #00d4ff22; color: #e0e0e0; border-bottom-left-radius: 4px;
         }
-
-        .message.assistant .label {
-            font-size: 0.6rem; color: #00d4ff88;
-            letter-spacing: 2px; margin-bottom: 6px; text-transform: uppercase;
-        }
-
-        .message .text-content { white-space: pre-wrap; }
-
-        .message .audio-controls {
-            margin-top: 8px; display: flex; align-items: center; gap: 8px;
-        }
-
+        .message .label { font-size: 0.58rem; color: #00d4ff88; letter-spacing: 2px; margin-bottom: 5px; text-transform: uppercase; }
+        .message .text-content { white-space: pre-wrap; word-wrap: break-word; }
+        .message .audio-controls { margin-top: 8px; display: flex; align-items: center; gap: 8px; }
         .audio-btn {
             display: inline-flex; align-items: center; gap: 4px;
             background: #00d4ff15; border: 1px solid #00d4ff33; color: #00d4ff;
-            padding: 4px 10px; border-radius: 12px; cursor: pointer;
-            font-size: 0.7rem; transition: all 0.2s;
+            padding: 3px 10px; border-radius: 10px; cursor: pointer;
+            font-size: 0.65rem; transition: all 0.2s;
         }
         .audio-btn:hover { background: #00d4ff25; border-color: #00d4ff66; }
         .audio-btn:disabled { opacity: 0.3; cursor: wait; }
+        .audio-status { font-size: 0.58rem; color: #5a8a9a; }
 
-        .audio-status {
-            font-size: 0.6rem; color: #5a8a9a; font-style: italic;
-        }
-
-        .typing-indicator {
-            align-self: flex-start; display: flex; gap: 5px; padding: 16px 20px;
-        }
+        .typing-indicator { align-self: flex-start; display: flex; gap: 5px; padding: 14px 18px; }
         .typing-indicator span {
-            width: 8px; height: 8px; border-radius: 50%;
-            background: #00d4ff; animation: typing 1.4s infinite;
+            width: 7px; height: 7px; border-radius: 50%; background: #00d4ff; animation: typing 1.4s infinite;
         }
         .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
         .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@@ -142,58 +118,50 @@
         }
 
         .welcome {
-            display: flex; flex-direction: column;
-            align-items: center; justify-content: center;
-            flex: 1; gap: 12px; opacity: 0.6;
+            display: flex; flex-direction: column; align-items: center;
+            justify-content: center; flex: 1; gap: 10px; opacity: 0.5;
         }
         .welcome .big-reactor {
-            width: 80px; height: 80px; border-radius: 50%;
+            width: 70px; height: 70px; border-radius: 50%;
             background: radial-gradient(circle, #00d4ff 0%, #0088aa 35%, #004466 65%, transparent 100%);
-            box-shadow: 0 0 40px #00d4ff66, 0 0 80px #00d4ff22;
-            animation: pulse 2s ease-in-out infinite;
+            box-shadow: 0 0 40px #00d4ff66; animation: pulse 2s ease-in-out infinite;
         }
-        .welcome h2 { color: #00d4ff; font-size: 1.1rem; letter-spacing: 4px; }
-        .welcome p { color: #5a8a9a; font-size: 0.8rem; }
+        .welcome h2 { color: #00d4ff; font-size: 1rem; letter-spacing: 4px; }
+        .welcome p { color: #5a8a9a; font-size: 0.75rem; }
+        .welcome .model-info { font-size: 0.65rem; color: #3a5a6a; margin-top: 4px; }
 
         .input-container {
-            padding: 16px 24px;
-            background: linear-gradient(0deg, #0d1b2a, #0a0a1a);
+            padding: 14px 20px; background: linear-gradient(0deg, #0d1b2a, #0a0a1a);
             border-top: 1px solid #00d4ff22; flex-shrink: 0;
         }
-        .input-wrapper {
-            display: flex; gap: 10px; max-width: 900px; margin: 0 auto;
-        }
+        .input-wrapper { display: flex; gap: 8px; max-width: 900px; margin: 0 auto; }
         #messageInput {
-            flex: 1; background: #0f1923; border: 1px solid #00d4ff33;
-            border-radius: 12px; padding: 12px 18px; color: #e0e0e0;
-            font-size: 0.92rem; outline: none; transition: border-color 0.3s;
-            font-family: inherit;
+            flex: 1; background: #0f1923; border: 1px solid #00d4ff33; border-radius: 12px;
+            padding: 11px 16px; color: #e0e0e0; font-size: 0.9rem; outline: none;
+            transition: border-color 0.3s; font-family: inherit;
         }
-        #messageInput:focus { border-color: #00d4ff88; box-shadow: 0 0 15px #00d4ff22; }
+        #messageInput:focus { border-color: #00d4ff88; box-shadow: 0 0 12px #00d4ff22; }
         #messageInput::placeholder { color: #3a5a6a; }
-
         #sendBtn {
-            background: linear-gradient(135deg, #00d4ff, #0088cc);
-            border: none; border-radius: 12px; padding: 12px 24px;
-            color: #0a0a1a; font-weight: 700; cursor: pointer;
-            font-size: 0.85rem; letter-spacing: 1px; transition: all 0.3s;
-            text-transform: uppercase;
+            background: linear-gradient(135deg, #00d4ff, #0088cc); border: none; border-radius: 12px;
+            padding: 11px 22px; color: #0a0a1a; font-weight: 700; cursor: pointer;
+            font-size: 0.8rem; letter-spacing: 1px; transition: all 0.3s; text-transform: uppercase;
         }
-        #sendBtn:hover { box-shadow: 0 0 20px #00d4ff66; transform: translateY(-1px); }
+        #sendBtn:hover { box-shadow: 0 0 18px #00d4ff66; transform: translateY(-1px); }
         #sendBtn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
-
         .input-footer {
-            display: flex; justify-content: space-between;
-            margin-top: 6px; max-width: 900px; margin-left: auto; margin-right: auto;
+            display: flex; justify-content: space-between; margin-top: 5px;
+            max-width: 900px; margin-left: auto; margin-right: auto;
         }
-        .input-footer span { font-size: 0.65rem; color: #3a5a6a; }
+        .input-footer span { font-size: 0.6rem; color: #3a5a6a; }
 
         @media (max-width: 640px) {
-            .header { padding: 10px 14px; }
+            .header { padding: 10px 12px; }
             .header-title h1 { font-size: 1rem; }
-            .message { max-width: 90%; font-size: 0.85rem; }
-            .chat-container { padding: 12px; }
-            .input-container { padding: 12px; }
+            .message { max-width: 92%; font-size: 0.82rem; }
+            .chat-container { padding: 10px; }
+            .input-container { padding: 10px; }
+            .config-bar { padding: 6px 12px; }
         }
     </style>
 </head>
@@ -209,8 +177,39 @@
     </div>
     <div class="header-controls">
         <div class="status-dot" id="statusDot"></div>
-        <button class="toggle-btn active" id="ttsToggle" onclick="toggleTTS()">🔊 VOICE</button>
-        <button class="toggle-btn" onclick="clearChat()">🗑 CLEAR</button>
+        <button class="ctrl-btn" id="configToggle" onclick="toggleConfig()">⚙ CONFIG</button>
+        <button class="ctrl-btn active" id="ttsToggle" onclick="toggleTTS()">🔊 VOICE</button>
+        <button class="ctrl-btn" onclick="clearChat()">🗑 CLEAR</button>
+    </div>
+</div>
+
+<!-- Config Panel -->
+<div class="config-bar" id="configPanel">
+    <div class="config-group">
+        <label>LLM:</label>
+        <span class="config-tag" id="llmTag">loading...</span>
+    </div>
+    <div class="config-group">
+        <label>TTS:</label>
+        <span class="config-tag" id="ttsTag">loading...</span>
+    </div>
+    <div class="config-group">
+        <label>Voice:</label>
+        <select id="voiceSelect">
+            <option value="Kiki">Kiki</option>
+            <option value="Bella">Bella</option>
+            <option value="Jasper">Jasper</option>
+            <option value="Luna">Luna</option>
+            <option value="Bruno">Bruno</option>
+            <option value="Rosie">Rosie</option>
+            <option value="Hugo">Hugo</option>
+            <option value="Leo">Leo</option>
+        </select>
+    </div>
+    <div class="config-group">
+        <label>Options (set via env vars):</label>
+        <span class="config-tag">LLM_MODE: gemma-3-270m-it | minilm-semantic</span>
+        <span class="config-tag">TTS_MODE: nano-fp32 | nano-int8 | micro | mini</span>
     </div>
 </div>
 
@@ -219,6 +218,7 @@
         <div class="big-reactor"></div>
         <h2>SYSTEMS ONLINE</h2>
         <p>Type a message below to begin interaction</p>
+        <div class="model-info" id="welcomeInfo">Initializing...</div>
     </div>
 </div>
 
@@ -229,26 +229,30 @@
     </div>
     <div class="input-footer">
         <span id="memoryCount">Memory: 0 turns</span>
-        <span id="ttsStatus">KittenTTS · Kiki · CPU</span>
+        <span id="modelInfo">Loading...</span>
     </div>
 </div>
 
 <script>
-    // ── STATE ──
     let sessionId = crypto.randomUUID ? crypto.randomUUID() : Date.now().toString(36) + Math.random().toString(36).slice(2);
     let ttsEnabled = true;
     let isProcessing = false;
-    let messageCounter = 0;
+    let msgCounter = 0;
+    let currentVoice = 'Kiki';
 
-    const chatContainer = document.getElementById('chatContainer');
-    const messageInput = document.getElementById('messageInput');
+    const chatEl = document.getElementById('chatContainer');
+    const inputEl = document.getElementById('messageInput');
     const sendBtn = document.getElementById('sendBtn');
     const welcome = document.getElementById('welcome');
 
-    messageInput.addEventListener('keydown', (e) => {
+    inputEl.addEventListener('keydown', e => {
         if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
     });
 
+    document.getElementById('voiceSelect').addEventListener('change', function() {
+        currentVoice = this.value;
+    });
+
     function toggleTTS() {
         ttsEnabled = !ttsEnabled;
         const btn = document.getElementById('ttsToggle');
@@ -256,60 +260,58 @@
         btn.textContent = ttsEnabled ? '🔊 VOICE' : '🔇 MUTE';
     }
 
-    // ── SEND MESSAGE (TWO-PHASE: text first, audio second) ──
+    function toggleConfig() {
+        const panel = document.getElementById('configPanel');
+        const btn = document.getElementById('configToggle');
+        panel.classList.toggle('open');
+        btn.classList.toggle('active');
+    }
+
     async function sendMessage() {
-        const text = messageInput.value.trim();
+        const text = inputEl.value.trim();
         if (!text || isProcessing) return;
 
         if (welcome) welcome.style.display = 'none';
-
         addUserMessage(text);
-        messageInput.value = '';
+        inputEl.value = '';
         isProcessing = true;
         sendBtn.disabled = true;
 
         const typingEl = showTyping();
-        const msgId = ++messageCounter;
+        const msgId = ++msgCounter;
 
         try {
-            // ✅ PHASE 1: Get text response (fast!)
+            // Phase 1: Text response
             const res = await fetch('/chat', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ message: text, session_id: sessionId })
             });
-
             if (!res.ok) throw new Error(`HTTP ${res.status}`);
-
             const data = await res.json();
             typingEl.remove();
 
-            // Show text immediately
             const msgEl = addAssistantMessage(data.response, msgId);
-
             document.getElementById('memoryCount').textContent = `Memory: ${data.memory_length} turns`;
 
-            // ✅ PHASE 2: Fetch TTS audio in background (non-blocking)
+            // Phase 2: TTS async
             if (ttsEnabled && data.tts_available) {
                 fetchAndPlayAudio(data.response, msgId, msgEl);
             }
-
         } catch (err) {
             typingEl.remove();
-            addAssistantMessage('System malfunction. Unable to process request. Please try again.', msgId);
-            console.error('Chat error:', err);
+            addAssistantMessage('System malfunction. Please try again.', msgId);
+            console.error(err);
         }
 
         isProcessing = false;
         sendBtn.disabled = false;
-        messageInput.focus();
+        inputEl.focus();
     }
 
-    // ── FETCH AUDIO SEPARATELY (non-blocking) ──
     async function fetchAndPlayAudio(text, msgId, msgEl) {
         const statusEl = msgEl.querySelector('.audio-status');
         const playBtn = msgEl.querySelector('.audio-btn');
-
         if (statusEl) statusEl.textContent = '⏳ Generating voice...';
         if (playBtn) playBtn.disabled = true;
 
@@ -317,40 +319,29 @@
             const res = await fetch('/tts', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ text: text })
+                body: JSON.stringify({ text: text, voice: currentVoice })
             });
-
             const data = await res.json();
-
             if (data.audio) {
-                // Store audio data on the button
-                if (playBtn) {
-                    playBtn.dataset.audio = data.audio;
-                    playBtn.disabled = false;
-                    playBtn.textContent = '▶ Play';
-                }
+                if (playBtn) { playBtn.dataset.audio = data.audio; playBtn.disabled = false; playBtn.textContent = '▶ Play'; }
                 if (statusEl) statusEl.textContent = '✅ Ready';
-
-                // Auto-play
                 playAudioBase64(data.audio);
             } else {
                 if (statusEl) statusEl.textContent = '⚠️ Voice unavailable';
                 if (playBtn) playBtn.style.display = 'none';
             }
-        } catch (err) {
-            console.error('TTS error:', err);
+        } catch (e) {
             if (statusEl) statusEl.textContent = '⚠️ Voice error';
             if (playBtn) playBtn.style.display = 'none';
         }
     }
 
-    // ── ADD MESSAGES ──
     function addUserMessage(text) {
         const div = document.createElement('div');
         div.className = 'message user';
-        div.innerHTML = `<div class="text-content">${escapeHtml(text)}</div>`;
-        chatContainer.appendChild(div);
-        scrollToBottom();
+        div.innerHTML = `<div class="text-content">${esc(text)}</div>`;
+        chatEl.appendChild(div);
+        scroll();
     }
 
     function addAssistantMessage(text, msgId) {
@@ -359,15 +350,14 @@
         div.id = `msg-${msgId}`;
         div.innerHTML = `
             <div class="label">⟐ JARVIS</div>
-            <div class="text-content">${escapeHtml(text)}</div>
+            <div class="text-content">${esc(text)}</div>
             ${ttsEnabled ? `
             <div class="audio-controls">
                 <button class="audio-btn" disabled onclick="replayAudio(this)">⏳</button>
                 <span class="audio-status">Requesting voice...</span>
-            </div>` : ''}
-        `;
-        chatContainer.appendChild(div);
-        scrollToBottom();
+            </div>` : ''}`;
+        chatEl.appendChild(div);
+        scroll();
         return div;
     }
 
@@ -375,67 +365,57 @@
         const div = document.createElement('div');
         div.className = 'typing-indicator';
         div.innerHTML = '<span></span><span></span><span></span>';
-        chatContainer.appendChild(div);
-        scrollToBottom();
+        chatEl.appendChild(div);
+        scroll();
         return div;
     }
 
-    // ── AUDIO PLAYBACK ──
     function playAudioBase64(b64) {
         try {
-            const binary = atob(b64);
-            const bytes = new Uint8Array(binary.length);
-            for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+            const bin = atob(b64);
+            const bytes = new Uint8Array(bin.length);
+            for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
             const blob = new Blob([bytes], { type: 'audio/wav' });
             const url = URL.createObjectURL(blob);
             const audio = new Audio(url);
             audio.play().catch(e => console.log('Autoplay blocked:', e));
             audio.onended = () => URL.revokeObjectURL(url);
-        } catch (e) { console.error('Audio error:', e); }
+        } catch (e) { console.error(e); }
     }
 
-    function replayAudio(btn) {
-        if (btn.dataset.audio) playAudioBase64(btn.dataset.audio);
-    }
+    function replayAudio(btn) { if (btn.dataset.audio) playAudioBase64(btn.dataset.audio); }
 
-    // ── CLEAR ──
     async function clearChat() {
         await fetch('/clear', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
+            method: 'POST', headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ session_id: sessionId })
         });
-        chatContainer.innerHTML = `
+        chatEl.innerHTML = `
             <div class="welcome" id="welcome">
                 <div class="big-reactor"></div>
                 <h2>SYSTEMS ONLINE</h2>
-                <p>Type a message below to begin interaction</p>
+                <p>Type a message below to begin</p>
             </div>`;
         document.getElementById('memoryCount').textContent = 'Memory: 0 turns';
         sessionId = crypto.randomUUID ? crypto.randomUUID() : Date.now().toString(36) + Math.random().toString(36).slice(2);
     }
 
-    // ── UTILS ──
-    function escapeHtml(t) {
-        const d = document.createElement('div');
-        d.textContent = t;
-        return d.innerHTML;
-    }
-    function scrollToBottom() {
-        chatContainer.scrollTop = chatContainer.scrollHeight;
-    }
+    function esc(t) { const d = document.createElement('div'); d.textContent = t; return d.innerHTML; }
+    function scroll() { chatEl.scrollTop = chatEl.scrollHeight; }
 
-    // ── HEALTH CHECK ──
+    // Health check & populate config
     fetch('/health').then(r => r.json()).then(d => {
-        const dot = document.getElementById('statusDot');
-        const status = document.getElementById('ttsStatus');
-        if (d.tts_model === 'DISABLED') {
-            dot.classList.add('error');
-            status.textContent = 'TTS Disabled · Text Only';
-        }
+        document.getElementById('llmTag').textContent = d.llm_mode;
+        document.getElementById('ttsTag').textContent = d.tts_mode + (d.tts_model === 'DISABLED' ? ' (OFF)' : '');
+        document.getElementById('modelInfo').textContent = `${d.llm_mode} · ${d.tts_mode} · ${d.tts_voice} · CPU`;
+        const wi = document.getElementById('welcomeInfo');
+        if (wi) wi.textContent = `LLM: ${d.llm_mode} | TTS: ${d.tts_mode} | Voice: ${d.tts_voice}`;
+        if (d.tts_model === 'DISABLED') document.getElementById('statusDot').classList.add('error');
+        // Set voice dropdown
+        if (d.tts_voice) { document.getElementById('voiceSelect').value = d.tts_voice; currentVoice = d.tts_voice; }
     }).catch(() => {});
 
-    messageInput.focus();
+    inputEl.focus();
 </script>
 </body>
 </html>