templates/index.html aktualisiert

templates/index.html

@@ -5,105 +5,36 @@
     <title>Pi-Orchestrator AI Dashboard</title>
     <script src="https://cdn.tailwindcss.com"></script>
     
-    <link href="/static/gridstack.min.css" rel="stylesheet"/>
-    <script src="/static/gridstack-all.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/gridstack@11.1.0/dist/gridstack.min.css" rel="stylesheet"/>
+    <script src="https://cdn.jsdelivr.net/npm/gridstack@11.1.0/dist/gridstack-all.js"></script>
 
-    <link rel="stylesheet" href="/static/xterm.css" />
-    <script src="/static/xterm.js"></script>
-    <script src="/static/xterm-addon-fit.js"></script>
-    <script src="/static/marked.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css" />
+    <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     
     <style>
         .grid-stack { background: #0f172a; min-height: 100vh; padding: 10px; }
         .grid-stack-item-content {
             background: #1e293b;
-            color: white;
-            border: 1px solid #334155;
-            border-radius: 8px;
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
+            color: white; border: 1px solid #334155; border-radius: 8px;
+            display: flex; flex-direction: column; overflow: hidden;
         }
-        
-        .terminal-container, #terminal { 
-            flex: 1; 
-            width: 100%;
-            height: 100%; 
-            background: black; 
-        }
-        
-        #install-log { 
-            flex: 1;
-            font-family: monospace; 
-            font-size: 11px; 
-            color: #4ade80; 
-            padding: 10px; 
-            overflow-y: auto; 
-            background: #0f172a;
-        }
-
-        .widget-header {
-            background: #334155;
-            padding: 8px 12px;
-            cursor: move;
-            font-size: 12px;
-            font-weight: bold;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            user-select: none;
-        }
-
-        body {
-            margin: 0; 
-            padding-top: 60px; /* Platz für die Toolbar */
-        }
-
-        .top-toolbar {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            background-color: #1e293b;
-            color: white;
-            height: 55px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0 20px;
-            box-sizing: border-box;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
-            z-index: 1000;
-            border-bottom: 1px solid #334155;
-        }
-
+        .terminal-container, #terminal { flex: 1; width: 100%; height: 100%; background: black; }
+        #install-log { flex: 1; font-family: monospace; font-size: 11px; color: #4ade80; padding: 10px; overflow-y: auto; background: #0f172a; }
+        .widget-header { background: #334155; padding: 8px 12px; cursor: move; font-size: 12px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; user-select: none; }
+        body { margin: 0; padding-top: 60px; }
+        .top-toolbar { position: fixed; top: 0; left: 0; width: 100%; background-color: #1e293b; color: white; height: 55px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-sizing: border-box; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); z-index: 1000; border-bottom: 1px solid #334155; }
         .toolbar-title { font-weight: bold; font-size: 1.1em; color: #38bdf8; }
         .toolbar-controls { display: flex; align-items: center; gap: 10px; }
         .toolbar-controls label { white-space: nowrap; font-size: 12px; color: #94a3b8; }
         #ollama-url-container { display: none; align-items: center; gap: 8px; border-left: 1px solid #475569; padding-left: 12px; }
-
-        .toolbar-controls select, 
-        .toolbar-controls input {
-            height: 32px; background: #0f172a; color: white; border: 1px solid #475569;
-            border-radius: 4px; padding: 0 8px; font-size: 12px; outline: none;
-        }
-
-        .toolbar-controls select:focus, 
-        .toolbar-controls input:focus { border-color: #38bdf8; }
-
-        .btn-tool {
-            height: 32px; padding: 0 12px; border-radius: 4px; font-size: 12px;
-            font-weight: bold; transition: all 0.2s; display: flex; align-items: center; gap: 5px;
-        }
+        .toolbar-controls select, .toolbar-controls input { height: 32px; background: #0f172a; color: white; border: 1px solid #475569; border-radius: 4px; padding: 0 8px; font-size: 12px; outline: none; }
+        .btn-tool { height: 32px; padding: 0 12px; border-radius: 4px; font-size: 12px; font-weight: bold; transition: all 0.2s; display: flex; align-items: center; gap: 5px; }
         .save-btn { background-color: #059669; color: white; }
-        .save-btn:hover { background-color: #10b981; }
         .add-node-btn { background-color: #2563eb; color: white; }
-        .add-node-btn:hover { background-color: #3b82f6; }
-
         #settings-status { color: #10b981; font-size: 11px; min-width: 80px; }
         .markdown-content pre { background: #000; padding: 8px; border-radius: 4px; border: 1px solid #334155; overflow-x: auto; margin: 8px 0; }
-        .markdown-content code { font-family: monospace; color: #4ade80; }
-        .markdown-content p { margin-bottom: 8px; }
     </style>
 </head>
 <body class="bg-slate-950 text-white overflow-hidden">
@@ -111,9 +42,7 @@
     <div class="top-toolbar">
         <div class="toolbar-title">🤖 KI-Orchestrator</div>
         <div class="toolbar-controls">
-            <button onclick="addNode()" class="btn-tool add-node-btn">
-                <span>+</span> Node hinzufügen
-            </button>
+            <button onclick="addNode()" class="btn-tool add-node-btn"><span>+</span> Node hinzufügen</button>
             <div class="h-6 w-px bg-slate-700 mx-2"></div>
             <label for="ai-provider">Provider:</label>
             <select id="ai-provider" onchange="updateModelDropdown(false)">
@@ -136,7 +65,9 @@
         <div class="w-64 bg-slate-900 border-r border-slate-800 p-4 flex flex-col">
             <div id="node-list" class="flex-1 overflow-y-auto space-y-2">
                 {% for node in nodes %}
-                    <div class="p-3 bg-slate-800 rounded border border-slate-700 relative group" id="node-card-{{ node.id }}">
+                    <div class="p-3 bg-slate-800 rounded border border-slate-700 relative group node-card-entry" 
+                         id="node-card-{{ node.id }}" 
+                         data-node-id="{{ node.id }}">
                         
                         <div class="flex justify-between items-start">
                             <div class="text-sm font-bold flex items-center gap-1.5 cursor-pointer hover:text-blue-400" onclick="openEditNode({{ node.id }})">
@@ -144,9 +75,9 @@
                                 <span>{{ node.name }}</span>
                             </div>
                             <div class="flex items-center gap-2">
-                                <button onclick="openEditNode({{ node.id }})" class="text-slate-500 hover:text-blue-400 text-xs" title="Bearbeiten">✏️</button>
+                                <button onclick="openEditNode({{ node.id }})" class="text-slate-500 hover:text-blue-400 text-xs">✏️</button>
                                 <form action="/remove_node/{{ node.id }}" method="post" class="inline m-0 p-0">
-                                    <button type="submit" class="text-slate-500 hover:text-red-500 text-xs" title="Löschen">✕</button>
+                                    <button type="submit" class="text-slate-500 hover:text-red-500 text-xs">✕</button>
                                 </form>
                             </div>
                         </div>
@@ -158,10 +89,10 @@
                         
                         <div class="mt-2 flex items-center justify-between">
                             <div class="flex items-center gap-2">
-                                <span id="led-{{ node.id }}" class="h-2 w-2 rounded-full {% if node.status == 'Docker Aktiv' %} bg-blue-500 shadow-[0_0_8px_#3b82f6] {% elif node.status == 'Offline/Fehler' %} bg-red-500 shadow-[0_0_8px_#ef4444] {% else %} bg-yellow-500 {% endif %}"></span>
+                                <span id="led-{{ node.id }}" class="h-2 w-2 rounded-full {% if node.status == 'Docker Aktiv' %} bg-blue-500 shadow-[0_0_8px_#3b82f6] {% elif 'Offline' in node.status %} bg-red-500 shadow-[0_0_8px_#ef4444] {% else %} bg-yellow-500 {% endif %}"></span>
                                 <span id="badge-{{ node.id }}" class="text-[9px] uppercase font-mono text-slate-300">{{ node.status }}</span>
                             </div>
-                            <button onclick="refreshNodeStatus({{ node.id }})" class="text-slate-500 hover:text-blue-400 text-[10px]" title="Status aktualisieren">🔄</button>
+                            <button onclick="refreshNodeStatus({{ node.id }})" class="text-slate-500 hover:text-blue-400 text-[10px]">🔄</button>
                         </div>
                         
                         <div class="flex gap-1.5 mt-2">
@@ -169,7 +100,7 @@
                             <span id="vnc-badge-{{ node.id }}" class="text-[9px] px-1.5 rounded font-bold border {% if node.vnc %}bg-purple-900/50 text-purple-400 border-purple-800{% else %}bg-slate-800 text-slate-600 border-slate-700{% endif %}">VNC</span>
                         </div>
 
-                        <button onclick="openTerminal('{{ node.ip }}')" class="mt-3 w-full text-[10px] bg-slate-700 hover:bg-slate-600 py-1.5 rounded transition-colors font-bold uppercase tracking-wider">Terminal öffnen</button>
+                        <button onclick="openTerminal('{{ node.ip }}')" class="mt-3 w-full text-[10px] bg-slate-700 hover:bg-slate-600 py-1.5 rounded font-bold uppercase tracking-wider">Terminal öffnen</button>
                     </div>
                 {% endfor %}
             </div>
@@ -183,8 +114,8 @@
                         <div class="widget-header"><span>💬 KI Chat</span> <span>⠿</span></div>
                         <div id="chat-window" class="flex-1 p-4 overflow-y-auto text-sm space-y-2 bg-[#0f172a]/50"></div>
                         <div class="p-2 border-t border-slate-700 flex bg-slate-800">
-                            <input id="user-input" type="text" class="flex-1 bg-slate-900 p-2 rounded text-xs outline-none border border-slate-700 focus:border-blue-500" placeholder="Nachricht (Enter zum Senden)..." autocomplete="off">
-                            <button onclick="sendMessage()" class="ml-2 bg-blue-600 hover:bg-blue-500 px-4 py-1 rounded text-xs transition-colors">Senden</button>
+                            <input id="user-input" type="text" class="flex-1 bg-slate-900 p-2 rounded text-xs outline-none border border-slate-700 focus:border-blue-500" placeholder="Nachricht..." autocomplete="off">
+                            <button onclick="sendMessage()" class="ml-2 bg-blue-600 hover:bg-blue-500 px-4 py-1 rounded text-xs">Senden</button>
                         </div>
                     </div>
                 </div>
@@ -207,52 +138,12 @@
     </div>
 
     <div id="add-node-modal" class="hidden fixed inset-0 bg-black/80 flex items-center justify-center z-[2000]">
-        <div class="bg-slate-800 p-6 rounded-lg border border-slate-600 w-96 shadow-2xl">
-            <h3 class="text-lg font-bold mb-4 text-blue-400">Neuen Node hinzufügen</h3>
-            <form action="/add_node" method="post" class="space-y-3">
-                <input type="text" name="name" placeholder="Name (z.B. Pi-Worker-1)" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
-                <input type="text" name="ip" placeholder="IP Adresse" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
-                <input type="text" name="user" placeholder="SSH Benutzer" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
-                <input type="password" name="password" placeholder="SSH Passwort (für Handshake)" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
-                <input type="password" name="sudo_pass" placeholder="Sudo Passwort (Optional für KI)" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm">
-                
-                <div class="flex justify-end gap-2 pt-4">
-                    <button type="button" onclick="closeAddNode()" class="px-4 py-2 text-sm text-slate-400 hover:text-white transition-colors">Abbrechen</button>
-                    <button type="submit" class="bg-blue-600 hover:bg-blue-500 px-4 py-2 text-sm rounded font-bold transition-colors">Koppeln</button>
-                </div>
-            </form>
         </div>
-    </div>
-
-    <div id="edit-node-modal" class="hidden fixed inset-0 bg-black/80 flex items-center justify-center z-[2000]">
-        <div class="bg-slate-800 p-6 rounded-lg border border-slate-600 w-96 shadow-2xl">
-            <h3 class="text-lg font-bold mb-4 text-emerald-400">Node bearbeiten</h3>
-            <form id="edit-node-form" method="post" class="space-y-3">
-                <label class="text-[10px] text-slate-400 uppercase font-bold block mb-[-8px]">Anzeigename</label>
-                <input type="text" id="edit-name" name="name" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
-                
-                <label class="text-[10px] text-slate-400 uppercase font-bold block mb-[-8px]">IP-Adresse</label>
-                <input type="text" id="edit-ip" name="ip" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
-                
-                <label class="text-[10px] text-slate-400 uppercase font-bold block mb-[-8px]">SSH User</label>
-                <input type="text" id="edit-user" name="user" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
-                
-                <label class="text-[10px] text-slate-400 uppercase font-bold block mb-[-8px]">Sudo Passwort</label>
-                <input type="password" id="edit-sudo" name="sudo_pass" placeholder="Leer lassen falls unverändert" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm">
-                
-                <div class="flex justify-end gap-2 pt-4">
-                    <button type="button" onclick="closeEditNode()" class="px-4 py-2 text-sm text-slate-400 hover:text-white transition-colors">Abbrechen</button>
-                    <button type="submit" class="bg-emerald-600 hover:bg-emerald-500 px-4 py-2 text-sm rounded font-bold transition-colors">Speichern</button>
-                </div>
-            </form>
-        </div>
-    </div>
 
     <script>
         let currentSettings = {};
         let termDataDisposable = null;
         
-        // --- Hilfsfunktion für OS Icons ---
         function getOsIcon(osName) {
             const os = (osName || "").toLowerCase();
             if (os.includes("mac") || os.includes("darwin")) return "🍏";
@@ -264,7 +155,6 @@
             return "🖥️";
         }
 
-        // --- Modals Steuerung ---
         window.addNode = () => document.getElementById('add-node-modal').classList.remove('hidden');
         window.closeAddNode = () => document.getElementById('add-node-modal').classList.add('hidden');
         
@@ -272,86 +162,63 @@
             try {
                 const res = await fetch(`/api/node/${nodeId}`);
                 const data = await res.json();
-                if(data.error) { alert(data.error); return; }
-                
                 document.getElementById('edit-name').value = data.name;
                 document.getElementById('edit-ip').value = data.ip;
                 document.getElementById('edit-user').value = data.user;
-                document.getElementById('edit-sudo').value = data.sudo_pass || "";
                 document.getElementById('edit-node-form').action = `/edit_node/${nodeId}`;
                 document.getElementById('edit-node-modal').classList.remove('hidden');
-            } catch(e) { console.error("Fehler beim Laden der Node-Daten:", e); }
+            } catch(e) { console.error(e); }
         };
         window.closeEditNode = () => document.getElementById('edit-node-modal').classList.add('hidden');
 
-        // --- Chat Logik ---
-        function initChat(chatWs) {
-            const input = document.getElementById('user-input');
-            window.sendMessage = function() {
-                const msg = input.value.trim();
-                if(!msg) return;
-                chatWs.send(msg);
-                appendChat("Du", msg, "text-slate-400 font-bold");
-                input.value = '';
-                input.focus();
-            };
-            input.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter') { e.preventDefault(); sendMessage(); }
-            });
-        }
-
-        // --- Status Update mit neuen OS & Arch Werten ---
-        window.refreshNodeStatus = async function(nodeId) {
+        // --- VERBESSERTE REFRESH FUNKTION ---
+        window.refreshNodeStatus = async function(nodeId, isAuto = false) {
             const badge = document.getElementById(`badge-${nodeId}`);
             const led = document.getElementById(`led-${nodeId}`);
             const card = document.getElementById(`node-card-${nodeId}`);
             const archBadge = document.getElementById(`arch-${nodeId}`);
-            const vncBadge = document.getElementById(`vnc-badge-${nodeId}`);
             const osIcon = document.getElementById(`os-icon-${nodeId}`);
+            const vncBadge = document.getElementById(`vnc-badge-${nodeId}`);
             
-            badge.textContent = "PRÜFE...";
-            card.style.opacity = "0.7";
+            if (!isAuto) {
+                badge.textContent = "PRÜFE...";
+                card.style.opacity = "0.7";
+            }
             
             try {
                 const response = await fetch(`/refresh_status/${nodeId}`);
                 const data = await response.json();
                 
-                // Texte & Icons aktualisieren
                 badge.textContent = data.status;
                 archBadge.textContent = data.arch;
                 osIcon.innerText = getOsIcon(data.os);
-                osIcon.title = data.os;
                 
-                // VNC Badge
                 if (data.vnc) {
                     vncBadge.className = "text-[9px] px-1.5 rounded font-bold border bg-purple-900/50 text-purple-400 border-purple-800";
                 } else {
                     vncBadge.className = "text-[9px] px-1.5 rounded font-bold border bg-slate-800 text-slate-600 border-slate-700";
                 }
                 
-                // LED Logik
                 if (data.status === "Docker Aktiv") {
                     led.className = "h-2 w-2 rounded-full bg-blue-500 shadow-[0_0_8px_#3b82f6]";
-                } else if (data.status === "Offline/Fehler") {
+                } else if (data.status.includes("Offline")) {
                     led.className = "h-2 w-2 rounded-full bg-red-500 shadow-[0_0_8px_#ef4444]";
                 } else {
                     led.className = "h-2 w-2 rounded-full bg-yellow-500";
                 }
             } catch (e) {
-                badge.textContent = "FEHLER";
-                led.className = "h-2 w-2 rounded-full bg-red-500 shadow-[0_0_8px_#ef4444]";
+                if (!isAuto) badge.textContent = "FEHLER";
             } finally {
                 card.style.opacity = "1";
             }
         };
 
-        // --- Settings & Models ---
+        // --- Settings / Models ---
         async function loadSettings() {
             try {
                 const res = await fetch('/api/settings');
                 currentSettings = await res.json();
                 document.getElementById('ai-provider').value = currentSettings.provider;
-                document.getElementById('ollama-url').value = currentSettings.ollama_base_url || "http://127.0.0.1:11434/v1";
                 updateModelDropdown(true);
             } catch (e) { console.error(e); }
         }
@@ -360,66 +227,52 @@
             const provider = document.getElementById('ai-provider').value;
             const modelSelect = document.getElementById('ai-model');
             const urlContainer = document.getElementById('ollama-url-container');
-            const ollamaUrl = document.getElementById('ollama-url').value;
-
             urlContainer.style.display = (provider === "ollama") ? "flex" : "none";
             modelSelect.innerHTML = '<option>Lade...</option>';
-
             try {
-                const res = await fetch(`/api/models?provider=${provider}&url=${encodeURIComponent(ollamaUrl)}`);
+                const res = await fetch(`/api/models?provider=${provider}`);
                 const data = await res.json();
                 modelSelect.innerHTML = '';
-                
-                if (data.models && data.models.length > 0) {
-                    data.models.forEach(m => {
-                        const opt = document.createElement('option');
-                        opt.value = opt.textContent = m;
-                        modelSelect.appendChild(opt);
-                    });
-                    const savedModel = currentSettings[`${provider}_model`];
-                    if (isInitialLoad && savedModel) modelSelect.value = savedModel;
-                }
+                data.models.forEach(m => {
+                    const opt = document.createElement('option');
+                    opt.value = opt.textContent = m;
+                    modelSelect.appendChild(opt);
+                });
+                if (isInitialLoad && currentSettings[`${provider}_model`]) modelSelect.value = currentSettings[`${provider}_model`];
             } catch (e) { modelSelect.innerHTML = '<option>Fehler</option>'; }
         }
 
         async function saveSettings() {
             const provider = document.getElementById('ai-provider').value;
             const model = document.getElementById('ai-model').value;
-            const ollama_base_url = document.getElementById('ollama-url').value;
-            const statusEl = document.getElementById('settings-status');
-
             try {
                 await fetch('/api/settings', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ provider, model, ollama_base_url })
+                    body: JSON.stringify({ provider, model })
                 });
-                statusEl.textContent = "✅ Gespeichert";
-                setTimeout(() => statusEl.textContent = "", 2000);
-            } catch (e) { statusEl.textContent = "❌ Fehler"; }
+                document.getElementById('settings-status').textContent = "✅ Gespeichert";
+                setTimeout(() => document.getElementById('settings-status').textContent = "", 2000);
+            } catch (e) { }
         }
 
         // --- Init ---
         document.addEventListener('DOMContentLoaded', function() {
+            // GridStack laden
+            try {
+                var grid = GridStack.init({ cellHeight: 80, margin: 10, float: true, handle: '.widget-header' });
+                const savedLayout = localStorage.getItem('pi-orch-layout-v2');
+                if (savedLayout) grid.load(JSON.parse(savedLayout));
+                grid.on('resizestop dragstop', () => localStorage.setItem('pi-orch-layout-v2', JSON.stringify(grid.save(false))));
+            } catch(e) { console.error("GridStack Fehler:", e); }
 
-            // Setze initiale OS Icons basierend auf den Server-Daten
-            {% for node in nodes %}
-                document.getElementById('os-icon-{{ node.id }}').innerText = getOsIcon("{{ node.os }}");
-            {% endfor %}
-
-            var grid = GridStack.init({
-                cellHeight: 80, margin: 10, float: true, 
-                handle: '.widget-header', resizable: { handles: 'all' }
-            });
-            const savedLayout = localStorage.getItem('pi-orch-layout-v2');
-            if (savedLayout) { try { grid.load(JSON.parse(savedLayout)); } catch(e){} }
-            grid.on('resizestop dragstop', () => localStorage.setItem('pi-orch-layout-v2', JSON.stringify(grid.save(false))));
-
+            // Terminal
             const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, convertEol: true });
             const fitAddon = new FitAddon.FitAddon();
             term.loadAddon(fitAddon);
             term.open(document.getElementById('terminal'));
 
+            // WebSockets
             const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
             logWs.onmessage = (ev) => {
                 const div = document.createElement('div');
@@ -430,26 +283,38 @@
 
             const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
             chatWs.onmessage = (ev) => appendChat("KI", ev.data, "text-blue-400 font-bold");
-            initChat(chatWs);
 
-            window.appendChat = function(user, msg, classes) {
+            window.sendMessage = () => {
+                const input = document.getElementById('user-input');
+                if(!input.value.trim()) return;
+                chatWs.send(input.value);
+                appendChat("Du", input.value, "text-slate-400 font-bold");
+                input.value = '';
+            };
+
+            window.appendChat = (user, msg, classes) => {
                 const win = document.getElementById('chat-window');
-                let formattedMsg = (user === "KI") ? marked.parse(msg) : msg;
-                win.innerHTML += `<div class="mb-4"><span class="${classes} block mb-1 text-[10px] uppercase">${user}</span><div class="markdown-content text-slate-300 text-sm">${formattedMsg}</div></div>`;
+                win.innerHTML += `<div class="mb-4"><span class="${classes} block mb-1 text-[10px] uppercase">${user}</span><div class="markdown-content text-slate-300 text-sm">${marked.parse(msg)}</div></div>`;
                 win.scrollTop = win.scrollHeight;
             };
 
-            window.openTerminal = function(ip) {
+            window.openTerminal = (ip) => {
                 if (window.termWs) window.termWs.close();
-                if (termDataDisposable) termDataDisposable.dispose();
                 term.clear();
                 window.termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
                 window.termWs.onmessage = (ev) => term.write(ev.data);
-                termDataDisposable = term.onData(data => {
-                    if (window.termWs?.readyState === WebSocket.OPEN) window.termWs.send(data);
-                });
+                if (termDataDisposable) termDataDisposable.dispose();
+                termDataDisposable = term.onData(data => window.termWs.send(data));
             };
 
+            // --- NEU: AUTO-REFRESH LOOP (Alle 60 Sek) ---
+            setInterval(() => {
+                document.querySelectorAll('.node-card-entry').forEach(card => {
+                    const nodeId = card.getAttribute('data-node-id');
+                    if(nodeId) refreshNodeStatus(nodeId, true);
+                });
+            }, 60000);
+
             loadSettings();
         });
     </script>