From 49bbb763202d5aeadf8979d879dc0e53c5559178 Mon Sep 17 00:00:00 2001
From: "info@pi-farm.de" <pi-farm@noreply.git.pi-farm.de>
Date: Wed, 4 Mar 2026 23:34:18 +0000
Subject: [PATCH] templates/index.html aktualisiert

---
 templates/index.html | 149 ++++++++++++++++++++++++-------------------
 1 file changed, 85 insertions(+), 64 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index 856b546..873378b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -14,7 +14,8 @@
     <script src="/static/marked.min.js"></script>
     
     <style>
-        .grid-stack { background: #0f172a; min-height: 100vh; }
+        /* Bestehendes CSS erweitern/korrigieren */
+        .grid-stack { background: #0f172a; min-height: 100vh; padding: 10px; }
         .grid-stack-item-content {
             background: #1e293b;
             color: white;
@@ -22,56 +23,43 @@
             border-radius: 8px;
             display: flex;
             flex-direction: column;
-            overflow: hidden;
+            overflow: hidden; /* Verhindert, dass Inhalt aus dem Widget quillt */
         }
-        .widget-header {
-            background: #334155;
-            padding: 5px 10px;
-            cursor: move;
-            font-size: 12px;
-            font-weight: bold;
-            display: flex;
-            justify-content: space-between;
-            user-select: none;
-        }
-        .terminal-container { 
+        
+        /* FIX: Terminal und Logs müssen 100% Höhe einnehmen */
+        .terminal-container, #terminal { 
             flex: 1; 
+            width: 100%;
+            height: 100%; 
             background: black; 
-            padding: 4px;
-            overflow: hidden;
         }
+        
         #install-log { 
+            flex: 1;
             font-family: monospace; 
             font-size: 11px; 
             color: #4ade80; 
             padding: 10px; 
             overflow-y: auto; 
-            flex: 1; 
             background: #0f172a;
+            height: 100%;
         }
-        /* Scrollbar Styling */
-        ::-webkit-scrollbar { width: 6px; }
-        ::-webkit-scrollbar-track { background: #1e293b; }
-        ::-webkit-scrollbar-thumb { background: #475569; border-radius: 10px; }
 
-        /* Styling für KI Markdown */
-        .markdown-content pre {
-            background: #000;
-            padding: 8px;
-            border-radius: 4px;
-            border: 1px solid #334155;
-            overflow-x: auto;
-            margin: 8px 0;
+        .widget-header {
+            background: #334155;
+            padding: 8px 12px;
+            cursor: move;
+            font-size: 12px;
+            font-weight: bold;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
         }
-        .markdown-content code {
-            font-family: monospace;
-            color: #4ade80;
-        }
-        .markdown-content pre code { color: #fff; }
+
+        /* Markdown Styling bleibt gleich... */
+        .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; }
-        .markdown-content ul { list-style-type: disc; margin-left: 20px; margin-bottom: 8px; }
-        .markdown-content ol { list-style-type: decimal; margin-left: 20px; margin-bottom: 8px; }
-        .markdown-content strong { color: #fff; font-weight: bold; }
     </style>
 </head>
 <body class="bg-slate-950 text-white overflow-hidden">
@@ -137,39 +125,59 @@
         </div>
     </div>
 
-    <script>
+<script>
         document.addEventListener('DOMContentLoaded', function() {
-            // --- UI Setup ---
+            // 1. GridStack mit verbesserten Parametern
             var grid = GridStack.init({
-                cellHeight: 70,
-                margin: 5,
+                cellHeight: 80, // Etwas höher für bessere Lesbarkeit
+                margin: 10,
                 float: true,
-                handle: '.widget-header', 
-                resizable: { handles: 'se, sw, ne, nw, e, w, s, n' },
-                staticGrid: false 
+                handle: '.widget-header',
+                resizable: { handles: 'se, sw, ne, nw, e, w, s, n' }
             });
 
+            // 2. Layout-Logik (mit Sicherheitscheck)
             function saveLayout() {
                 const data = grid.save(false);
-                localStorage.setItem('grid-layout-v1', JSON.stringify(data));
+                localStorage.setItem('pi-orch-layout-v2', JSON.stringify(data));
             }
 
             function loadLayout() {
-                const data = localStorage.getItem('grid-layout-v1');
-                if (data) grid.load(JSON.parse(data));
+                const data = localStorage.getItem('pi-orch-layout-v2');
+                if (data) {
+                    try {
+                        grid.load(JSON.parse(data));
+                    } catch (e) {
+                        console.error("Layout-Laden fehlgeschlagen", e);
+                        localStorage.removeItem('pi-orch-layout-v2');
+                    }
+                }
             }
 
+            // Layout laden
             loadLayout();
 
-            grid.on('dragstop resizestop', function() {
+            // Automatisches Resizen des Terminals beim Verschieben/Größe ändern
+            grid.on('resizestop', function() {
                 saveLayout();
-                if (window.fitAddon) window.fitAddon.fit();
+                if (window.fitAddon) {
+                    setTimeout(() => window.fitAddon.fit(), 100);
+                }
             });
+            grid.on('dragstop', saveLayout);
 
-            const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, cursorBlink: true });
+            // 3. Xterm.js Setup (WICHTIG: Terminal muss in den Container passen)
+            const term = new Terminal({ 
+                theme: { background: '#000' }, 
+                fontSize: 13, 
+                cursorBlink: true,
+                convertEol: true // Korrigiert Zeilenumbrüche
+            });
             window.fitAddon = new FitAddon.FitAddon();
             term.loadAddon(window.fitAddon);
             term.open(document.getElementById('terminal'));
+            
+            // Verzögertes Fit, damit das Grid erst stabil steht
             setTimeout(() => window.fitAddon.fit(), 500);
 
             // --- WebSockets ---
@@ -183,31 +191,42 @@
             const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
             chatWs.onmessage = (ev) => appendChat("KI", ev.data, "text-blue-400 font-bold");
 
-            // --- NEU: Enter-Taste & Fokus Logik ---
             const userInput = document.getElementById('user-input');
-
-            // Fokus beim Laden setzen
             userInput.focus();
-
-            // Auf Enter-Taste hören
-            userInput.addEventListener('keydown', function(event) {
-                if (event.key === 'Enter') {
-                    event.preventDefault(); // Verhindert Neuladen/Standardverhalten
-                    window.sendMessage();
-                }
+            userInput.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') { e.preventDefault(); window.sendMessage(); }
             });
 
+            const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
+            chatWs.onmessage = (ev) => appendChat("KI", ev.data, "text-blue-400 font-bold");
+
             window.sendMessage = function() {
                 const val = userInput.value.trim();
                 if(!val) return;
-                
                 chatWs.send(val);
                 appendChat("Du", val, "text-slate-300 font-bold");
-                
-                userInput.value = ''; // Feld leeren
-                userInput.focus();    // Fokus sofort zurücksetzen
+                userInput.value = '';
+                userInput.focus();
             };
 
+            const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
+            logWs.onmessage = (ev) => {
+                const l = document.getElementById('install-log');
+                l.innerHTML += `<div>> ${ev.data}</div>`;
+                l.scrollTop = l.scrollHeight;
+            };
+
+            // appendChat Funktion...
+            function appendChat(user, msg, classes) {
+                const win = document.getElementById('chat-window');
+                let formattedMsg = msg;
+                if (user === "KI" && typeof marked !== 'undefined') {
+                    formattedMsg = marked.parse(msg);
+                }
+                win.innerHTML += `<div class="mb-4"><span class="${classes} block mb-1">${user}:</span><div class="markdown-content text-slate-300 text-sm leading-relaxed">${formattedMsg}</div></div>`;
+                win.scrollTop = win.scrollHeight;
+            }
+
             // --- Restliche Funktionen ---
             window.openTerminal = function(ip) {
                 if(window.termWs) window.termWs.close();
@@ -262,4 +281,6 @@
                 badge.classList.add("animate-pulse");
 
                 try {
-                    const response = await fetch(`/refresh_status/${nodeId}`);
\ No newline at end of file
+                    const response = await fetch(`/refresh_status/${nodeId}`);
+            });
+</script>
\ No newline at end of file
