From 269ef7992c845262cb49f7ab5eefce4f8dbad3d7 Mon Sep 17 00:00:00 2001
From: "info@pi-farm.de" <pi-farm@noreply.git.pi-farm.de>
Date: Fri, 6 Mar 2026 15:59:59 +0000
Subject: [PATCH] templates/index.html aktualisiert

---
 templates/index.html | 448 ++++++++++++++++++++++++++++++-------------
 1 file changed, 311 insertions(+), 137 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index c7ce251..26b5441 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -12,7 +12,6 @@
     <script src="/static/xterm.js"></script>
     <script src="/static/xterm-addon-fit.js"></script>
     <script src="/static/marked.min.js"></script>
-    <script src="https://unpkg.com/lucide@latest"></script>
     
     <style>
         .grid-stack { background: #0f172a; min-height: 100vh; padding: 10px; }
@@ -27,146 +26,225 @@
         }
         
         .terminal-container, #terminal { 
-            flex: 1; width: 100%; height: 100%; background: black; 
+            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;
+            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;
+            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; }
+        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; z-index: 1000;
+            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;
         }
 
-        .os-icon { width: 18px; height: 18px; filter: grayscale(0.5); }
-        .node-card:hover .os-icon { filter: grayscale(0); }
-        
-        /* Tooltip Style */
-        .feature-icon { font-size: 12px; opacity: 0.4; transition: opacity 0.3s; }
-        .feature-active { opacity: 1; color: #38bdf8; }
+        .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;
+        }
+
+        .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; }
+
+        /* NEUE STYLES FÜR NODE CARDS */
+        .node-badge {
+            background: #334155;
+            padding: 2px 5px;
+            border-radius: 4px;
+            font-size: 8px;
+            text-transform: uppercase;
+            font-weight: bold;
+            color: #94a3b8;
+        }
     </style>
 </head>
 <body class="bg-slate-950 text-white overflow-hidden">
     
     <div class="top-toolbar">
-        <div class="toolbar-title font-bold text-sky-400">🤖 KI-Orchestrator</div>
+        <div class="toolbar-title">🤖 KI-Orchestrator</div>
         
-        <div class="toolbar-controls flex items-center gap-4">
-            <button onclick="openAddNode()" class="bg-blue-600 hover:bg-blue-500 px-3 py-1.5 rounded text-xs font-bold transition-all">
-                + Node hinzufügen
+        <div class="toolbar-controls">
+            <button onclick="addNode()" class="btn-tool add-node-btn">
+                <span>+</span> Node hinzufügen
             </button>
 
-            <div class="h-6 w-px bg-slate-700"></div>
+            <div class="h-6 w-px bg-slate-700 mx-2"></div>
 
-            <select id="ai-provider" onchange="updateModelDropdown(false)" class="bg-slate-900 border border-slate-700 text-xs rounded p-1">
+            <label for="ai-provider">Provider:</label>
+            <select id="ai-provider" onchange="updateModelDropdown(false)">
                 <option value="google">Google Gemini</option>
                 <option value="openai">OpenAI</option>
                 <option value="ollama">Ollama</option>
             </select>
             
-            <select id="ai-model" class="bg-slate-900 border border-slate-700 text-xs rounded p-1 min-w-[120px]"></select>
+            <label for="ai-model">Modell:</label>
+            <select id="ai-model"></select>
             
-            <div id="ollama-url-container" class="hidden flex items-center gap-2">
-                <input type="text" id="ollama-url" class="bg-slate-900 border border-slate-700 text-xs rounded p-1" placeholder="URL">
+            <div id="ollama-url-container">
+                <label for="ollama-url">URL:</label>
+                <input type="text" id="ollama-url" onblur="updateModelDropdown(false)" placeholder="http://192.168.x.x:11434/v1">
             </div>
             
-            <button class="bg-emerald-600 hover:bg-emerald-500 px-3 py-1.5 rounded text-xs font-bold" onclick="saveSettings()">Speichern</button>
+            <button class="btn-tool save-btn" onclick="saveSettings()">Speichern</button>
             <span id="settings-status"></span>
         </div>
     </div>
 
     <div class="flex h-screen">
-        <div class="w-72 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-3">
+        <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-lg border border-slate-700 hover:border-slate-500 transition-all group relative" id="node-card-{{ node.id }}">
+                    <div class="p-3 bg-slate-800 rounded border border-slate-700 relative group" id="node-card-{{ node.id }}">
+                        <div class="flex justify-between items-start">
+                            <div class="text-sm font-bold">{{ node.name }}</div>
+                            <form action="/remove_node/{{ node.id }}" method="post" onsubmit="return confirm('Node wirklich entfernen?')">
+                                <button type="submit" class="text-slate-500 hover:text-red-500 text-xs">✕</button>
+                            </form>
+                        </div>
                         
-                        <div class="flex justify-between items-start mb-2">
-                            <div class="flex items-center gap-2">
-                                <div class="w-6 h-6 flex items-center justify-center bg-slate-900 rounded">
-                                    {% if node.os_type == 'debian' %} 🐧
-                                    {% elif node.os_type == 'raspbian' %} 🍓
-                                    {% elif node.os_type == 'fedora' %} 🎩
-                                    {% elif node.os_type == 'ubuntu' %} 🧡
-                                    {% else %} 💻 {% endif %}
-                                </div>
-                                <span class="text-sm font-bold truncate max-w-[120px]">{{ node.name }}</span>
-                            </div>
-                            <div class="flex gap-2">
-                                <button onclick="openEditNode({{ node | tojson }})" class="text-slate-500 hover:text-blue-400 p-1">
-                                    <i data-lucide="edit-3" class="w-3.5 h-3.5"></i>
-                                </button>
-                                <form action="/remove_node/{{ node.id }}" method="post" onsubmit="return confirm('Node wirklich löschen?')">
-                                    <button type="submit" class="text-slate-500 hover:text-red-500 p-1">
-                                        <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
-                                    </button>
-                                </form>
-                            </div>
+                        <div class="text-[10px] text-slate-500 font-mono flex justify-between items-center mb-1">
+                            {{ node.ip }}
+                            <button onclick="refreshNodeStatus({{ node.id }})" class="hover:text-blue-400">🔄</button>
                         </div>
 
-                        <div class="flex justify-between items-center text-[10px] text-slate-400 font-mono mb-2">
-                            <span>{{ node.ip }}</span>
-                            <span class="bg-slate-700 px-1 rounded text-slate-300">{{ node.arch }}</span>
+                        <div class="flex gap-1 mb-2">
+                            <span id="os-{{ node.id }}" class="node-badge truncate max-w-[80px]" title="{{ node.os }}">{{ node.os }}</span>
+                            <span id="arch-{{ node.id }}" class="node-badge">{{ node.arch }}</span>
                         </div>
 
-                        <div class="flex items-center justify-between mt-2 pt-2 border-t border-slate-700/50">
-                            <div class="flex items-center gap-2">
-                                <span id="led-{{ node.id }}" class="h-2 w-2 rounded-full {% if node.status == 'Online' %} bg-emerald-500 shadow-[0_0_8px_#10b981] {% else %} bg-slate-600 {% endif %}"></span>
-                                <span id="badge-{{ node.id }}" class="text-[9px] uppercase font-bold tracking-wider">{{ node.status }}</span>
-                            </div>
-                            
-                            <div class="flex gap-2">
-                                <i data-lucide="container" title="Docker" class="w-3.5 h-3.5 {% if node.has_docker %} text-blue-400 {% else %} text-slate-600 {% endif %}"></i>
-                                <i data-lucide="monitor" title="VNC" class="w-3.5 h-3.5 {% if node.has_vnc %} text-orange-400 {% else %} text-slate-600 {% endif %}"></i>
-                                <i data-lucide="terminal" title="SSH" class="w-3.5 h-3.5 text-emerald-400"></i>
-                            </div>
-                        </div>
-
-                        <div class="mt-3 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                            <button onclick="openTerminal('{{ node.ip }}')" class="flex-1 text-[9px] bg-blue-600/20 hover:bg-blue-600 text-blue-400 hover:text-white py-1 rounded transition-all">TERMINAL</button>
-                            <button onclick="refreshNodeStatus({{ node.id }})" class="px-2 text-[9px] bg-slate-700 hover:bg-slate-600 rounded">🔄</button>
+                        <div class="mt-1 flex items-center gap-2">
+                            <span id="led-{{ node.id }}" class="h-2 w-2 rounded-full {% if 'Aktiv' in node.status %} bg-blue-500 shadow-[0_0_8px_#3b82f6] {% 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="openTerminal('{{ node.ip }}')" class="mt-2 w-full text-[10px] bg-slate-700 hover:bg-slate-600 py-1 rounded transition-colors">Konsole öffnen</button>
                     </div>
                 {% endfor %}
             </div>
+            <button onclick="localStorage.removeItem('pi-orch-layout-v2'); location.reload();" class="mt-4 text-[10px] text-slate-500 hover:text-white uppercase text-center w-full">Layout Reset</button>
         </div>
 
         <div class="flex-1 overflow-y-auto">
             <div class="grid-stack">
-                <div class="grid-stack-item" gs-id="chat-widget" gs-w="6" gs-h="5">
+                <div class="grid-stack-item" gs-id="chat-widget" gs-w="6" gs-h="5" gs-x="0" gs-y="0">
                     <div class="grid-stack-item-content">
                         <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="Frage die KI..." autocomplete="off">
-                            <button onclick="sendMessage()" class="ml-2 bg-blue-600 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 (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>
                         </div>
                     </div>
                 </div>
 
-                <div class="grid-stack-item" gs-id="logs-widget" gs-w="6" gs-h="5">
+                <div class="grid-stack-item" gs-id="logs-widget" gs-w="6" gs-h="5" gs-x="6" gs-y="0">
                     <div class="grid-stack-item-content">
                         <div class="widget-header"><span>📜 System Logs</span> <span>⠿</span></div>
                         <div id="install-log">Warte auf Aufgaben...</div>
                     </div>
                 </div>
 
-                <div class="grid-stack-item" gs-id="term-widget" gs-w="12" gs-h="6">
+                <div class="grid-stack-item" gs-id="term-widget" gs-w="12" gs-h="6" gs-x="0" gs-y="5">
                     <div class="grid-stack-item-content">
                         <div class="widget-header"><span>🖥️ Live Terminal</span> <span>⠿</span></div>
                         <div id="terminal" class="terminal-container"></div>
@@ -176,86 +254,182 @@
         </div>
     </div>
 
-    <div id="add-node-modal" class="hidden fixed inset-0 bg-black/80 flex items-center justify-center z-[2000] backdrop-blur-sm">
-        <div class="bg-slate-800 p-6 rounded-xl border border-slate-600 w-96 shadow-2xl">
-            <h3 class="text-lg font-bold mb-4 flex items-center gap-2 text-blue-400">
-                <i data-lucide="plus-circle"></i> Node hinzufügen
-            </h3>
-            <form action="/add_node" method="post" class="space-y-3">
-                <input type="text" name="name" placeholder="Name" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
+    <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">
+            <h3 class="text-lg font-bold mb-4">Neuen Node hinzufügen</h3>
+            <form action="/add_node" method="post" class="space-y-4">
+                <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 User" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
-                <input type="password" name="password" placeholder="SSH/Sudo Passwort" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
-                <div class="flex justify-end gap-2 pt-4">
-                    <button type="button" onclick="closeModals()" class="px-4 py-2 text-sm text-slate-400 hover:text-white transition">Abbrechen</button>
-                    <button type="submit" class="bg-blue-600 hover:bg-blue-500 px-6 py-2 text-sm rounded-lg font-bold shadow-lg shadow-blue-900/20">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] backdrop-blur-sm">
-        <div class="bg-slate-800 p-6 rounded-xl border border-slate-600 w-96 shadow-2xl">
-            <h3 class="text-lg font-bold mb-4 flex items-center gap-2 text-amber-400">
-                <i data-lucide="settings-2"></i> Node bearbeiten
-            </h3>
-            <form id="edit-node-form" method="post" class="space-y-3">
-                <div class="text-[10px] text-slate-500 uppercase font-bold tracking-widest">Grunddaten</div>
-                <input type="text" id="edit-name" name="name" placeholder="Name" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
-                <input type="text" id="edit-ip" name="ip" placeholder="IP Adresse" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
-                <input type="text" id="edit-user" name="user" placeholder="SSH User" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
-                
-                <div class="text-[10px] text-slate-500 uppercase font-bold tracking-widest pt-2">Sicherheit</div>
-                <input type="password" id="edit-password" name="password" placeholder="Neues Passwort (optional)" 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="closeModals()" class="px-4 py-2 text-sm text-slate-400 hover:text-white">Abbrechen</button>
-                    <button type="submit" class="bg-amber-600 hover:bg-amber-500 px-6 py-2 text-sm rounded-lg font-bold shadow-lg shadow-amber-900/20 text-white">Speichern</button>
+                <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="Sudo/SSH Passwort" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
+                <div class="flex justify-end gap-2 pt-2">
+                    <button type="button" onclick="closeAddNode()" class="px-4 py-2 text-sm text-slate-400">Abbrechen</button>
+                    <button type="submit" class="bg-blue-600 px-4 py-2 text-sm rounded font-bold">Koppeln & Inventur</button>
                 </div>
             </form>
         </div>
     </div>
 
     <script>
-        // Icons initialisieren
-        lucide.createIcons();
+        let currentSettings = {};
+        let termDataDisposable = null;
 
-        // 1. MODAL LOGIK
-        window.openAddNode = function() {
-            document.getElementById('add-node-modal').classList.remove('hidden');
-        };
+        // 1. 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(); } });
+        }
 
-        window.openEditNode = function(node) {
-            document.getElementById('edit-name').value = node.name;
-            document.getElementById('edit-ip').value = node.ip;
-            document.getElementById('edit-user').value = node.user;
-            document.getElementById('edit-node-form').action = `/edit_node/${node.id}`;
-            document.getElementById('edit-node-modal').classList.remove('hidden');
-        };
+        // 2. MODAL LOGIK
+        window.addNode = () => document.getElementById('add-node-modal').classList.remove('hidden');
+        window.closeAddNode = () => document.getElementById('add-node-modal').classList.add('hidden');
 
-        window.closeModals = function() {
-            document.getElementById('add-node-modal').classList.add('hidden');
-            document.getElementById('edit-node-modal').classList.add('hidden');
-        };
-
-        // 2. REFRESH LOGIK (Mit UI-Update für neue Felder)
+        // 3. ERWEITERTER REFRESH (Aktualisiert OS & Arch)
         window.refreshNodeStatus = async function(nodeId) {
+            const badge = document.getElementById(`badge-${nodeId}`);
+            const led = document.getElementById(`led-${nodeId}`);
+            const osEl = document.getElementById(`os-${nodeId}`);
+            const archEl = document.getElementById(`arch-${nodeId}`);
             const card = document.getElementById(`node-card-${nodeId}`);
-            card.classList.add('animate-pulse', 'opacity-70');
+            
+            badge.textContent = "PRÜFE...";
+            card.style.opacity = "0.7";
             
             try {
                 const response = await fetch(`/refresh_status/${nodeId}`);
-                // Wir laden die Seite neu, um die Jinja-Templates mit den neuen DB-Werten zu rendern
-                // Alternativ könnte man hier die DOM-Elemente einzeln updaten
-                location.reload();
+                const data = await response.json();
+                
+                badge.textContent = data.status;
+                osEl.textContent = data.os;
+                archEl.textContent = data.arch;
+                
+                if (data.status.includes("Aktiv")) {
+                    led.className = "h-2 w-2 rounded-full bg-blue-500 shadow-[0_0_8px_#3b82f6]";
+                } else if (data.status === "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) {
-                console.error("Refresh failed", e);
-                card.classList.remove('animate-pulse', 'opacity-70');
+                badge.textContent = "FEHLER";
+                led.className = "h-2 w-2 rounded-full bg-red-500";
+            } finally {
+                card.style.opacity = "1";
             }
         };
 
-        // ... (Der restliche JavaScript-Code für Chat, Terminal und Settings bleibt identisch zu deinem Original)
-        // [Hier den bestehenden JS-Code für initChat, loadSettings, GridStack etc. einfügen]
+        // 4. SETTINGS & MODEL LOGIK
+        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) {}
+        }
+
+        async function updateModelDropdown(isInitialLoad = false) {
+            const provider = document.getElementById('ai-provider').value;
+            const modelSelect = document.getElementById('ai-model');
+            const urlContainer = document.getElementById('ollama-url-container');
+            let 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 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;
+                }
+            } 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 })
+                });
+                statusEl.textContent = "✅ Gespeichert";
+                setTimeout(() => statusEl.textContent = "", 2000);
+            } catch (e) { statusEl.textContent = "❌ Fehler"; }
+        }
+
+        // 5. INITIALISIERUNG
+        document.addEventListener('DOMContentLoaded', function() {
+            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)));
+            });
+
+            const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, convertEol: true });
+            const fitAddon = new FitAddon.FitAddon();
+            term.loadAddon(fitAddon);
+            term.open(document.getElementById('terminal'));
+            
+            const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
+            logWs.onmessage = (ev) => {
+                const div = document.createElement('div');
+                div.textContent = `> ${ev.data}`;
+                document.getElementById('install-log').appendChild(div);
+                document.getElementById('install-log').scrollTop = document.getElementById('install-log').scrollHeight;
+            };
+
+            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) {
+                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.scrollTop = win.scrollHeight;
+            };
+
+            window.openTerminal = function(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);
+                });
+            };
+
+            loadSettings();
+        });
     </script>
 </body>
 </html>
\ No newline at end of file