From 394abb58bec6d48808812f3d18c3c30bd76ea917 Mon Sep 17 00:00:00 2001
From: duffyduck <info@hacker-net.de>
Date: Sun, 19 Apr 2026 16:27:56 +0200
Subject: [PATCH] fix: Runtime-Config Layout + Eye-Toggle fuer Token-Felder
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Eingabefelder haben jetzt width:100% + box-sizing:border-box,
  keine Ueberlappung mehr im Grid
- Token-Felder haben einen Augen-Button daneben (👁/👀) zum
  Anzeigen/Verbergen des Inhalts
- Kleineres Label-Grid (140px statt 150px), grosszuegigerer Gap

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 diagnostic/index.html | 33 +++++++++++++++++++++++++++------
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/diagnostic/index.html b/diagnostic/index.html
index d36ea11..538c519 100644
--- a/diagnostic/index.html
+++ b/diagnostic/index.html
@@ -533,20 +533,26 @@
         (Diagnostic-Container bleibt auf ENV).
       </div>
       <div class="card" style="max-width:600px;">
-        <div style="display:grid;grid-template-columns:150px 1fr;gap:8px;align-items:center;font-size:13px;">
+        <div style="display:grid;grid-template-columns:140px 1fr;gap:8px 10px;align-items:center;font-size:13px;">
           <label style="color:#8888AA;">RVS Host:</label>
-          <input type="text" id="rc-rvs-host" style="background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;">
+          <input type="text" id="rc-rvs-host" style="width:100%;box-sizing:border-box;background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;">
           <label style="color:#8888AA;">RVS Port:</label>
-          <input type="text" id="rc-rvs-port" style="background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;">
+          <input type="text" id="rc-rvs-port" style="width:100%;box-sizing:border-box;background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;">
           <label style="color:#8888AA;">RVS TLS:</label>
-          <select id="rc-rvs-tls" style="background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;">
+          <select id="rc-rvs-tls" style="width:100%;box-sizing:border-box;background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;">
             <option value="true">true (wss://)</option>
             <option value="false">false (ws://)</option>
           </select>
           <label style="color:#8888AA;">RVS Token:</label>
-          <input type="password" id="rc-rvs-token" style="background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;font-family:monospace;">
+          <div style="display:flex;gap:4px;min-width:0;">
+            <input type="password" id="rc-rvs-token" style="flex:1;min-width:0;box-sizing:border-box;background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;font-family:monospace;">
+            <button type="button" class="btn secondary" onclick="toggleSecret('rc-rvs-token', this)" style="padding:4px 10px;flex-shrink:0;" title="Anzeigen/Verbergen">&#128065;</button>
+          </div>
           <label style="color:#8888AA;">Aria Auth Token:</label>
-          <input type="password" id="rc-auth-token" style="background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;font-family:monospace;">
+          <div style="display:flex;gap:4px;min-width:0;">
+            <input type="password" id="rc-auth-token" style="flex:1;min-width:0;box-sizing:border-box;background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;font-family:monospace;">
+            <button type="button" class="btn secondary" onclick="toggleSecret('rc-auth-token', this)" style="padding:4px 10px;flex-shrink:0;" title="Anzeigen/Verbergen">&#128065;</button>
+          </div>
         </div>
         <div style="display:flex;gap:8px;margin-top:12px;">
           <button class="btn" onclick="saveRuntimeConfig()" style="flex:1;">Speichern</button>
@@ -1498,6 +1504,21 @@
       send({ action: 'send_voice_config', defaultVoice, highlightVoice, ttsEnabled, speedRamona, speedThorsten, ttsEngine, xttsVoice, whisperModel });
     }
 
+    // ── Passwort-Feld Anzeigen/Verbergen ─────────────────────
+    function toggleSecret(inputId, btn) {
+      const el = document.getElementById(inputId);
+      if (!el) return;
+      if (el.type === 'password') {
+        el.type = 'text';
+        btn.innerHTML = '&#128064;'; // 👀
+        btn.title = 'Verbergen';
+      } else {
+        el.type = 'password';
+        btn.innerHTML = '&#128065;'; // 👁
+        btn.title = 'Anzeigen';
+      }
+    }
+
     // ── Runtime-Konfiguration ─────────────────────
     async function loadRuntimeConfig() {
       const statusEl = document.getElementById('rc-status');