templates/index.html aktualisiert

templates/index.html

@@ -56,7 +56,7 @@
 
         body {
             margin: 0; 
-            padding-top: 60px; /* Platz für die Toolbar schaffen */
+            padding-top: 60px; /* Platz für die Toolbar */
         }
 
         .top-toolbar {
@@ -64,87 +64,93 @@
             top: 0;
             left: 0;
             width: 100%;
-            background-color: #2c3e50;
+            background-color: #1e293b;
             color: white;
-            height: 50px;
+            height: 55px;
             display: flex;
             align-items: center;
             justify-content: space-between;
             padding: 0 20px;
             box-sizing: border-box;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            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.2em;
+            font-size: 1.1em;
+            color: #38bdf8;
         }
 
-        /* Erzeugt eine horizontale Reihe für alle Steuerelemente */
         .toolbar-controls {
             display: flex;
             align-items: center;
-            gap: 12px; /* Abstand zwischen den Elementen */
-            flex-wrap: nowrap; /* Verhindert das Umbrechen in eine neue Zeile */
+            gap: 10px;
         }
 
-        /* Verhindert, dass Labels umbrechen */
         .toolbar-controls label {
             white-space: nowrap;
-            font-size: 13px;
-            color: #bdc3c7;
+            font-size: 12px;
+            color: #94a3b8;
         }
 
-        /* Der URL-Container als Teil der horizontalen Kette */
         #ollama-url-container {
-            display: none; /* Wird per JS auf 'flex' gesetzt */
+            display: none;
             align-items: center;
             gap: 8px;
-            border-left: 1px solid #555;
+            border-left: 1px solid #475569;
             padding-left: 12px;
         }
 
-        /* Kurze Korrektur für die Eingabefelder, damit sie nicht zu breit werden */
         .toolbar-controls select, 
         .toolbar-controls input {
             height: 32px;
-            background: white;
-            color: #2c3e50;
+            background: #0f172a;
+            color: white;
+            border: 1px solid #475569;
             border-radius: 4px;
             padding: 0 8px;
-            font-size: 13px;
+            font-size: 12px;
+            outline: none;
         }
 
-        #ollama-url {
-            width: 180px; /* Damit das Feld nicht die ganze Leiste sprengt */
+        .toolbar-controls select:focus, 
+        .toolbar-controls input:focus {
+            border-color: #38bdf8;
         }
 
-        /* WICHTIG: Den Speichern-Button überschreiben wir wieder, damit er grün mit weißer Schrift bleibt */
-        .save-btn {
-            background-color: #27ae60;
-            color: white !important; 
-            border: none;
-            cursor: pointer;
+        /* Schicke Toolbar-Buttons */
+        .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: #27ae60;
+            background-color: #059669;
             color: white;
-            border: none;
-            cursor: pointer;
-            font-weight: bold;
         }
 
-        .save-btn:hover {
-            background-color: #2ecc71;
+        .save-btn:hover { background-color: #10b981; }
+
+        .add-node-btn {
+            background-color: #2563eb;
+            color: white;
         }
 
+        .add-node-btn:hover { background-color: #3b82f6; }
+
         #settings-status {
-            color: #2ecc71;
-            font-size: 0.9em;
-            min-width: 100px;
+            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; }
@@ -153,10 +159,17 @@
     </style>
 </head>
 <body class="bg-slate-950 text-white overflow-hidden">
+    
     <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>
+
+            <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)">
                 <option value="google">Google Gemini</option>
@@ -172,14 +185,16 @@
                 <input type="text" id="ollama-url" onblur="updateModelDropdown(false)" placeholder="http://192.168.x.x:11434/v1">
             </div>
             
-            <button class="save-btn" onclick="saveSettings()">Speichern</button>
+            <button class="btn-tool save-btn" onclick="saveSettings()">Speichern</button>
             <span id="settings-status"></span>
         </div>
     </div>
-</div>
+
     <div class="flex h-screen">
-        <div class="w-64 bg-slate-900 border-r border-slate-700 p-4 flex flex-col">
-            <h2 class="text-xl font-bold mb-4">📍 Nodes</h2>
+        <div class="w-64 bg-slate-900 border-r border-slate-800 p-4 flex flex-col">
+            <h2 class="text-xl font-bold mb-4 flex items-center gap-2">
+                <span class="text-blue-400">📍</span> Nodes
+            </h2>
             <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 }}">
@@ -197,12 +212,11 @@
                             <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] {% 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">Konsole öffnen</button>
+                        <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="addNode()" class="mt-4 bg-blue-600 hover:bg-blue-500 p-2 rounded text-sm font-bold">+ Node hinzufügen</button>
-            <button onclick="localStorage.removeItem('pi-orch-layout-v2'); location.reload();" class="mt-2 text-[10px] text-slate-500 hover:text-white uppercase">Layout Reset</button>
+            <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">
@@ -212,8 +226,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="KI fragen..." autocomplete="off">
-                            <button onclick="sendMessage()" class="ml-2 bg-blue-600 hover:bg-blue-500 px-3 py-1 rounded text-xs">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>
@@ -235,155 +249,132 @@
         </div>
     </div>
 
-    <script>
-        // 1. GLOBALE VARIABLEN (Ganz oben, für alle sichtbar)
-        const modelOptions = {
-            google: ["gemini-2.0-flash", "gemini-1.5-flash", "gemini-1.5-pro"],
-            openai: ["gpt-4o", "gpt-4o-mini", "gpt-4-turbo"],
-            ollama: ["llama3.2", "llama3.1", "mistral", "phi3"]
-        };
+    <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 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" 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</button>
+                </div>
+            </form>
+        </div>
+    </div>
 
+    <script>
         let currentSettings = {};
         let termDataDisposable = null;
+        const modelOptions = { google: [], openai: [], ollama: [] }; // Wird vom Backend befüllt
 
-        // 2. GLOBALE FUNKTIONEN (Damit das HTML onchange/onclick sie findet)
+        // 1. CHAT LOGIK (Mit Enter und Fokus)
+        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(); // Fokus zurücksetzen
+            };
+
+            input.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    sendMessage();
+                }
+            });
+        }
+
+        // 2. NODE MODAL LOGIK
+        window.addNode = function() {
+            document.getElementById('add-node-modal').classList.remove('hidden');
+        };
+        window.closeAddNode = function() {
+            document.getElementById('add-node-modal').classList.add('hidden');
+        };
+
+        // 3. 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) {
-                console.error("Fehler beim Laden:", e);
-            }
+            } catch (e) { console.error("Load Settings Error", e); }
         }
 
         async function updateModelDropdown(isInitialLoad = false) {
-            const providerSelect = document.getElementById('ai-provider');
+            const provider = document.getElementById('ai-provider').value;
             const modelSelect = document.getElementById('ai-model');
             const urlContainer = document.getElementById('ollama-url-container');
-            const ollamaUrlInput = document.getElementById('ollama-url');
+            const ollamaUrl = document.getElementById('ollama-url').value;
 
-            if (!providerSelect || !urlContainer) return;
-
-            const provider = providerSelect.value;
-
-            // URL-Feld nur bei Ollama einblenden
-            if (provider === "ollama") {
-                urlContainer.style.display = "flex";
-            } else {
-                urlContainer.style.display = "none";
-            }
-
-            // Lade-Indikator setzen, damit du siehst, dass etwas passiert
-            modelSelect.innerHTML = '<option value="">Lade Modelle...</option>';
+            urlContainer.style.display = (provider === "ollama") ? "flex" : "none";
+            modelSelect.innerHTML = '<option>Lade...</option>';
 
             try {
-                // Wir fragen jetzt DEIN Backend, nicht die Anbieter direkt!
-                // Wir schicken die Provider-Wahl und (falls Ollama) die URL mit.
-                const targetUrl = (provider === "ollama") ? ollamaUrlInput.value : "";
+                const res = await fetch(`/api/models?provider=${provider}&url=${encodeURIComponent(ollamaUrl)}`);
+                const data = await res.json();
+                modelSelect.innerHTML = '';
                 
-                const response = await fetch(`/api/models?provider=${provider}&url=${encodeURIComponent(targetUrl)}`);
-                
-                if (!response.ok) throw new Error("Backend antwortet nicht korrekt");
-                
-                const data = await response.json();
-                
-                modelSelect.innerHTML = ''; // Lade-Text entfernen
-                
-                // Wenn das Backend Modelle liefert, füllen wir das Dropdown
                 if (data.models && data.models.length > 0) {
                     data.models.forEach(m => {
                         const opt = document.createElement('option');
-                        opt.value = m;
-                        opt.textContent = m;
+                        opt.value = opt.textContent = m;
                         modelSelect.appendChild(opt);
                     });
-                } else {
-                    // Fallback, falls die Liste leer ist
-                    fillStaticModels(provider, modelSelect);
-                }
-            } catch (e) {
-                console.error("Konnte Modelle nicht laden, nutze Standard-Liste:", e);
-                fillStaticModels(provider, modelSelect);
-            }
                     
-            // Gespeichertes Modell wiederherstellen (beim Neuladen der Seite)
-            if (isInitialLoad && currentSettings) {
                     const savedModel = currentSettings[`${provider}_model`];
-                if (savedModel) {
-                    // Falls das gespeicherte Modell nicht in der Liste ist, fügen wir es an
-                    if (!Array.from(modelSelect.options).some(opt => opt.value === savedModel)) {
-                        const opt = document.createElement('option');
-                        opt.value = savedModel;
-                        opt.textContent = savedModel;
-                        modelSelect.appendChild(opt);
+                    if (isInitialLoad && savedModel) modelSelect.value = savedModel;
                 }
-                    modelSelect.value = savedModel;
-                }
-            }
-        }
-
-        // Hilfsfunktion für die statischen Listen (OpenAI/Google)
-        function fillStaticModels(provider, selectElement) {
-            selectElement.innerHTML = '';
-            const options = modelOptions[provider] || [];
-            options.forEach(m => {
-                const opt = document.createElement('option');
-                opt.value = m;
-                opt.textContent = m;
-                selectElement.appendChild(opt);
-            });
+            } catch (e) { modelSelect.innerHTML = '<option>Fehler beim Laden</option>'; }
         }
 
         async function saveSettings() {
             const provider = document.getElementById('ai-provider').value;
             const model = document.getElementById('ai-model').value;
-            const ollamaUrl = document.getElementById('ollama-url').value;
+            const ollama_base_url = document.getElementById('ollama-url').value;
             const statusEl = document.getElementById('settings-status');
 
-            statusEl.textContent = "Speichere...";
-            
             try {
                 await fetch('/api/settings', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ provider, model, ollama_base_url: ollamaUrl })
+                    body: JSON.stringify({ provider, model, ollama_base_url })
                 });
-                statusEl.textContent = "✅ Gespeichert!";
-                statusEl.style.color = "#2ecc71";
-            } catch (e) {
-                statusEl.textContent = "❌ Fehler";
-                statusEl.style.color = "#e74c3c";
-            }
-            setTimeout(() => statusEl.textContent = "", 3000);
+                statusEl.textContent = "✅ Gespeichert";
+                setTimeout(() => statusEl.textContent = "", 2000);
+            } catch (e) { statusEl.textContent = "❌ Fehler"; }
         }
 
-        // 3. INITIALISIERUNG (Wenn die Seite geladen ist)
+        // 4. INITIALISIERUNG
         document.addEventListener('DOMContentLoaded', function() {
-            // Hier nur die Gridstack/Terminal/WebSocket Initialisierung rein
-            
-            // GridStack
+            // GridStack mit allen Resize-Handles
             var grid = GridStack.init({
-                cellHeight: 80, margin: 10, float: true, handle: '.widget-header'
+                cellHeight: 80, margin: 10, float: true, 
+                handle: '.widget-header',
+                resizable: { handles: 'all' } // Erlaubt Resize an allen Seiten
             });
-            const savedData = localStorage.getItem('pi-orch-layout-v2');
-            if (savedData) { try { grid.load(JSON.parse(savedData)); } catch(e) {} }
+
+            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
+            // Terminal & WebSockets
             const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, convertEol: true });
-            window.fitAddon = new FitAddon.FitAddon();
-            term.loadAddon(window.fitAddon);
+            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');
@@ -394,24 +385,15 @@
 
             const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
             chatWs.onmessage = (ev) => appendChat("KI", ev.data, "text-blue-400 font-bold");
+            initChat(chatWs);
 
-            // Chat Senden Funktion global machen
-            window.sendMessage = function() {
-                const input = document.getElementById('user-input');
-                if(!input.value.trim()) return;
-                chatWs.send(input.value);
-                appendChat("Du", input.value, "text-slate-300 font-bold");
-                input.value = '';
-            };
-
-            function appendChat(user, msg, classes) {
+            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">${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">${formattedMsg}</div></div>`;
                 win.scrollTop = win.scrollHeight;
-            }
+            };
 
-            // Node Funktionen global machen
             window.openTerminal = function(ip) {
                 if (window.termWs) window.termWs.close();
                 if (termDataDisposable) termDataDisposable.dispose();
@@ -423,7 +405,6 @@
                 });
             };
 
-            // Jetzt die Einstellungen laden
             loadSettings();
         });
     </script>