From 41d99ec84094617d979cff458283719e9f782ea4 Mon Sep 17 00:00:00 2001
From: Meleki <meleki@gott.local>
Date: Sat, 28 Feb 2026 22:02:18 +0100
Subject: [PATCH] =?UTF-8?q?Custom=20Commands=20ins=20Header-Dropdown-Men?=
 =?UTF-8?q?=C3=BC=20verschoben?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- customCmdBar entfernt, Commands als header-menu-items ins Dropdown eingefügt
- Sektions-Labels: System, Agent, Session mit Separatoren
- Header-Menü-Init nach oben verschoben (vor Command-Aufbau)
- CSS: alte cmd-bar Styles entfernt, neue separator/label/cmd Styles
---
 wwwroot/css/chat.css          |  44 +++-----
 wwwroot/index.html            |   1 -
 wwwroot/js/pages/chat-page.js | 198 +++++++++++++++++-----------------
 3 files changed, 112 insertions(+), 131 deletions(-)

diff --git a/wwwroot/css/chat.css b/wwwroot/css/chat.css
index e40cff2..6d22e6b 100644
--- a/wwwroot/css/chat.css
+++ b/wwwroot/css/chat.css
@@ -13,35 +13,6 @@
   border-radius: var(--border-radius) var(--border-radius) 0 0;
 }
 
-/* Custom Command Buttons */
-
-.custom-cmd-bar {
-  display: flex;
-  gap: var(--badge-spacing);
-  margin-left: var(--badge-spacing);
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.custom-cmd-bar:empty {
-  display: none;
-}
-
-.cmd-bar-label {
-  font-size: var(--font-size);
-  opacity: var(--semi-transparent);
-  white-space: nowrap;
-}
-
-.custom-cmd-btn:hover {
-  background: var(--f3-bg);
-  border-color: var(--f3-border);
-}
-
-.custom-cmd-btn.running {
-  opacity: var(--semi-transparent);
-}
-
 /* Header Menu */
 
 .header-menu {
@@ -82,6 +53,21 @@
   border: none;
 }
 
+.header-menu-separator {
+  border-top: var(--border-width) solid var(--f2-border);
+}
+
+.header-menu-label {
+  padding: var(--badge-spacing) .75em;
+  font-size: var(--font-size);
+  opacity: var(--semi-transparent);
+  white-space: nowrap;
+}
+
+.header-menu-cmd.running {
+  opacity: var(--semi-transparent);
+}
+
 .meta-bar {
   padding: var(--box-padding);
   background: var(--chat-bg);
diff --git a/wwwroot/index.html b/wwwroot/index.html
index f96a669..54b5ff9 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -148,7 +148,6 @@
     <header>
       <button class="back-btn icon-btn" id="chatBackBtn"><i class="fa fa-arrow-left"></i></button>
       <h1 id="sessionTitle">-</h1>
-      <div class="custom-cmd-bar" id="customCmdBar"></div>
       <div class="header-menu">
         <button class="header-menu-trigger icon-btn" id="chatMenuBtn"><i class="fa fa-ellipsis-v"></i></button>
         <div class="header-menu-dropdown" id="chatMenuDropdown" hidden>
diff --git a/wwwroot/js/pages/chat-page.js b/wwwroot/js/pages/chat-page.js
index b9b236e..fb2d06e 100644
--- a/wwwroot/js/pages/chat-page.js
+++ b/wwwroot/js/pages/chat-page.js
@@ -57,10 +57,57 @@ registerPage('chat', {
       titleEl.textContent = session.name || 'Unbenannt';
     }
 
-    // Custom Command Buttons (Agent + Session)
-    const cmdBar = document.getElementById('customCmdBar');
-    if (cmdBar) {
-      cmdBar.innerHTML = '';
+    // Header-Menü (3-Dot)
+    const chatMenuBtn = document.getElementById('chatMenuBtn');
+    const chatMenuDropdown = document.getElementById('chatMenuDropdown');
+    if (chatMenuBtn && chatMenuDropdown) {
+      chatMenuBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        chatMenuDropdown.hidden = !chatMenuDropdown.hidden;
+      });
+      document.addEventListener('click', this._closeMenu = () => {
+        chatMenuDropdown.hidden = true;
+      });
+    }
+
+    // System-Prompt anzeigen
+    const systemPromptBtn = document.getElementById('systemPromptBtn');
+    if (systemPromptBtn) systemPromptBtn.addEventListener('click', () => {
+      if (chatMenuDropdown) chatMenuDropdown.hidden = true;
+      showSystemPromptModal(sessionId);
+    });
+
+    // Archivieren
+    const archiveBtn = document.getElementById('archiveBtn');
+    if (archiveBtn) archiveBtn.addEventListener('click', () => {
+      if (chatMenuDropdown) chatMenuDropdown.hidden = true;
+      clearChat();
+    });
+
+    // Datenbank sichern
+    const backupDbBtn = document.getElementById('backupDbBtn');
+    if (backupDbBtn) backupDbBtn.addEventListener('click', async () => {
+      if (chatMenuDropdown) chatMenuDropdown.hidden = true;
+      backupDbBtn.disabled = true;
+      try {
+        await apiBackupDb();
+        setMetaHtml('<i class="fa fa-check-circle"></i> Backup erstellt und heruntergeladen');
+      } catch (e) {
+        console.error('Backup fehlgeschlagen:', e);
+        setMetaHtml('<i class="fa fa-times-circle"></i> Backup fehlgeschlagen');
+      } finally {
+        backupDbBtn.disabled = false;
+      }
+    });
+
+    // Custom Command Buttons ins Header-Menü einfügen
+    if (chatMenuDropdown) {
+      // "System"-Label ganz oben einfügen
+      const systemLabel = document.createElement('div');
+      systemLabel.className = 'header-menu-label';
+      systemLabel.textContent = 'System';
+      chatMenuDropdown.prepend(systemLabel);
+
       let agentCmds = [];
       if (session.agentId) {
         try {
@@ -73,63 +120,55 @@ registerPage('chat', {
       let sessionCmds = [];
       try { sessionCmds = JSON.parse(session.customCommands || '[]') || []; } catch(e) {}
 
-      const allCmds = agentCmds.concat(sessionCmds);
-      const hasAgentCmds = agentCmds.length > 0;
-      const hasSessionCmds = sessionCmds.length > 0;
-      const hasBoth = hasAgentCmds && hasSessionCmds;
-
-      if (hasBoth) {
-        const sep1 = document.createElement('span');
-        sep1.className = 'cmd-bar-label';
-        sep1.textContent = 'Agent:';
-        cmdBar.appendChild(sep1);
-      }
-
-      let sessionSepAdded = false;
-      let cmdIndex = 0;
-      allCmds.forEach((cmd, idx) => {
-        if (hasBoth && !sessionSepAdded && idx === agentCmds.length) {
-          const sep2 = document.createElement('span');
-          sep2.className = 'cmd-bar-label';
-          sep2.textContent = 'Session:';
-          cmdBar.appendChild(sep2);
-          sessionSepAdded = true;
-        }
-        if (!cmd.name || !cmd.command) return;
-        const type = cmd.type || 'background';
-        const btn = document.createElement('button');
-        btn.className = 'custom-cmd-btn';
-        if (type === 'message') btn.classList.add('cmd-type-message');
-        btn.textContent = cmd.name;
-        btn.title = type === 'message' ? cmd.command : `[${type}] ${cmd.command}`;
-        btn.addEventListener('click', async () => {
-          if (type === 'message') {
-            // Nachricht in den Chat senden
-            const inputEl = document.getElementById('input');
-            if (inputEl) {
-              inputEl.value = cmd.command;
-              inputEl.dispatchEvent(new Event('input'));
+      const addCmdSection = (cmds, label) => {
+        const validCmds = cmds.filter(c => c.name && c.command);
+        if (validCmds.length === 0) return;
+        const sep = document.createElement('div');
+        sep.className = 'header-menu-separator';
+        chatMenuDropdown.appendChild(sep);
+        const lbl = document.createElement('div');
+        lbl.className = 'header-menu-label';
+        lbl.textContent = label;
+        chatMenuDropdown.appendChild(lbl);
+        validCmds.forEach(cmd => {
+          if (!cmd.name || !cmd.command) return;
+          const type = cmd.type || 'background';
+          const btn = document.createElement('button');
+          btn.className = 'header-menu-item header-menu-cmd';
+          btn.textContent = cmd.name;
+          btn.title = type === 'message' ? cmd.command : `[${type}] ${cmd.command}`;
+          btn.addEventListener('click', async () => {
+            chatMenuDropdown.hidden = true;
+            if (type === 'message') {
+              const inputEl = document.getElementById('input');
+              if (inputEl) {
+                inputEl.value = cmd.command;
+                inputEl.dispatchEvent(new Event('input'));
+              }
+              sendMessage();
+              return;
             }
-            sendMessage();
-            return;
-          }
-          btn.disabled = true;
-          btn.classList.add('running');
-          try {
-            if (type === 'foreground') {
-              const result = await apiExecCommand(sessionId, cmd.command, 'foreground');
-              showCommandOutputModal(cmd.name, cmd.command, result);
-            } else {
-              await apiExecCommand(sessionId, cmd.command, 'background');
+            btn.disabled = true;
+            btn.classList.add('running');
+            try {
+              if (type === 'foreground') {
+                const result = await apiExecCommand(sessionId, cmd.command, 'foreground');
+                showCommandOutputModal(cmd.name, cmd.command, result);
+              } else {
+                await apiExecCommand(sessionId, cmd.command, 'background');
+              }
+            } catch(e) {
+              console.error('Exec failed:', e);
             }
-          } catch(e) {
-            console.error('Exec failed:', e);
-          }
-          btn.disabled = false;
-          btn.classList.remove('running');
+            btn.disabled = false;
+            btn.classList.remove('running');
+          });
+          chatMenuDropdown.appendChild(btn);
         });
-        cmdBar.appendChild(btn);
-      });
+      };
+
+      addCmdSection(agentCmds, 'Agent');
+      addCmdSection(sessionCmds, 'Session');
     }
 
     // Zurück zur Session-Edit-Seite
@@ -207,49 +246,6 @@ registerPage('chat', {
       });
     }
 
-    // Header-Menü (3-Dot)
-    const chatMenuBtn = document.getElementById('chatMenuBtn');
-    const chatMenuDropdown = document.getElementById('chatMenuDropdown');
-    if (chatMenuBtn && chatMenuDropdown) {
-      chatMenuBtn.addEventListener('click', (e) => {
-        e.stopPropagation();
-        chatMenuDropdown.hidden = !chatMenuDropdown.hidden;
-      });
-      document.addEventListener('click', this._closeMenu = () => {
-        chatMenuDropdown.hidden = true;
-      });
-    }
-
-    // System-Prompt anzeigen
-    const systemPromptBtn = document.getElementById('systemPromptBtn');
-    if (systemPromptBtn) systemPromptBtn.addEventListener('click', () => {
-      if (chatMenuDropdown) chatMenuDropdown.hidden = true;
-      showSystemPromptModal(sessionId);
-    });
-
-    // Archivieren
-    const archiveBtn = document.getElementById('archiveBtn');
-    if (archiveBtn) archiveBtn.addEventListener('click', () => {
-      if (chatMenuDropdown) chatMenuDropdown.hidden = true;
-      clearChat();
-    });
-
-    // Datenbank sichern
-    const backupDbBtn = document.getElementById('backupDbBtn');
-    if (backupDbBtn) backupDbBtn.addEventListener('click', async () => {
-      if (chatMenuDropdown) chatMenuDropdown.hidden = true;
-      backupDbBtn.disabled = true;
-      try {
-        await apiBackupDb();
-        setMetaHtml('<i class="fa fa-check-circle"></i> Backup erstellt und heruntergeladen');
-      } catch (e) {
-        console.error('Backup fehlgeschlagen:', e);
-        setMetaHtml('<i class="fa fa-times-circle"></i> Backup fehlgeschlagen');
-      } finally {
-        backupDbBtn.disabled = false;
-      }
-    });
-
     // State zurücksetzen und History laden
     messages.length = 0;
     lastKnownMessageId = 0;