Custom Commands für Agents: gleiche Befehls-UI wie Sessions, im Chat werden Agent- und Session-Commands zusammengeführt

Backend: - AgentRecord um CustomCommands-Feld erweitert - DB-Migration: custom_commands Spalte für agents Tabelle - Agent-CRUD (Create/Update) verarbeitet customCommands Frontend: - commands-ui.js: Shared Utility (createCommandRow, getCommandsFromUI, loadCommandsIntoUI) für Agent- und Session-Page - Agent-Page: Benutzerdefinierte Befehle Sektion mit Typ-Dropdown - Chat-Page: Lädt Agent-Commands + Session-Commands, zeigt beide mit Labels wenn beide vorhanden - Session-Page: Refactored auf shared commands-ui.js Funktionen - CSS: cmd-bar-label Styling für Agent:/Session: Trennung in der Command-Bar
2026-02-28 21:35:34 +01:00
1 parent ab234fde69
commit e79a69a364
@@ -0,0 +1,58 @@
+// ── Custom Commands UI (shared between session-page and agent-page) ──
+
+function createCommandRow(container, name, command, type) {
+  name = name || '';
+  command = command || '';
+  type = type || 'background';
+
+  const item = document.createElement('div');
+  item.className = 'custom-command-item';
+  item.innerHTML = `
+    <div class="custom-command-fields">
+      <select class="cmd-type">
+        <option value="background">Hintergrund</option>
+        <option value="foreground">Vordergrund</option>
+        <option value="message">Nachricht</option>
+      </select>
+      <input type="text" class="cmd-name" placeholder="Name (z.B. Deploy)" value="${_escCmdAttr(name)}">
+      <input type="text" class="cmd-command" placeholder="${type === 'message' ? 'Nachricht...' : 'Befehl (z.B. ./deploy.sh)'}" value="${_escCmdAttr(command)}">
+    </div>
+    <button type="button" class="remove-cmd-btn icon-btn"><i class="fa fa-times"></i></button>
+  `;
+  var typeSelect = item.querySelector('.cmd-type');
+  typeSelect.value = type;
+  typeSelect.addEventListener('change', function() {
+    var cmdInput = item.querySelector('.cmd-command');
+    cmdInput.placeholder = typeSelect.value === 'message' ? 'Nachricht...' : 'Befehl (z.B. ./deploy.sh)';
+  });
+  item.querySelector('.remove-cmd-btn').addEventListener('click', function() { item.remove(); });
+  container.appendChild(item);
+}
+
+function getCommandsFromUI(container) {
+  var items = container.querySelectorAll('.custom-command-item');
+  var commands = [];
+  for (var i = 0; i < items.length; i++) {
+    var item = items[i];
+    var name = item.querySelector('.cmd-name').value.trim();
+    var command = item.querySelector('.cmd-command').value.trim();
+    var type = item.querySelector('.cmd-type').value;
+    if (name || command) commands.push({ name: name, command: command, type: type });
+  }
+  return commands.length > 0 ? commands : null;
+}
+
+function loadCommandsIntoUI(container, customCommands) {
+  if (!customCommands) return;
+  try {
+    var cmds = typeof customCommands === 'string' ? JSON.parse(customCommands) : customCommands;
+    for (var i = 0; i < cmds.length; i++) {
+      var cmd = cmds[i];
+      createCommandRow(container, cmd.name || '', cmd.command || '', cmd.type || 'background');
+    }
+  } catch (e) { /* ignore parse errors */ }
+}
+
+function _escCmdAttr(str) {
+  return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
@@ -28,6 +28,8 @@ registerPage('agent', {
    const saveBtn = document.getElementById('agentSaveBtn');
    const cancelBtn = document.getElementById('agentCancelBtn');
    const deleteBtn = document.getElementById('agentDeleteBtn');
+    const commandsList = document.getElementById('agentCommandsList');
+    const addCommandBtn = document.getElementById('agentAddCommandBtn');

    _agentAvatarData = null;

@@ -45,8 +47,14 @@ registerPage('agent', {
      if (agent.avatar) {
        avatarPreview.innerHTML = `<img src="${agent.avatar}" alt="Avatar">`;
      }
+
+      // Custom Commands laden
+      loadCommandsIntoUI(commandsList, agent.customCommands);
    }

+    // Befehl hinzufügen
+    addCommandBtn.addEventListener('click', () => createCommandRow(commandsList));
+
    // Avatar Upload
    avatarBtn.addEventListener('click', () => avatarInput.click());
    avatarInput.addEventListener('change', () => {
@@ -95,7 +103,8 @@ registerPage('agent', {
        persona: personaEl.value,
        instructions: instructionsEl.value,
        toolChoice: toolChoiceEl.checked ? 'any' : 'auto',
-        avatar: _agentAvatarData
+        avatar: _agentAvatarData,
+        customCommands: getCommandsFromUI(commandsList)
      };

      if (isNew) {
@@ -57,13 +57,44 @@ registerPage('chat', {
      titleEl.textContent = session.name || 'Unbenannt';
    }

-    // Custom Command Buttons
+    // Custom Command Buttons (Agent + Session)
    const cmdBar = document.getElementById('customCmdBar');
    if (cmdBar) {
      cmdBar.innerHTML = '';
-      let cmds = [];
-      try { cmds = JSON.parse(session.customCommands || '[]') || []; } catch(e) {}
-      cmds.forEach(cmd => {
+      let agentCmds = [];
+      if (session.agentId) {
+        try {
+          const agent = await apiGetAgent(session.agentId);
+          if (agent && agent.customCommands) {
+            agentCmds = JSON.parse(agent.customCommands) || [];
+          }
+        } catch(e) {}
+      }
+      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');
@@ -3,47 +3,6 @@
 let _sessionImageData = null;
 let _sessionPasteHandler = null;

-function _createCommandRow(container, name = '', command = '', type = 'background') {
-  const item = document.createElement('div');
-  item.className = 'custom-command-item';
-  item.innerHTML = `
-    <div class="custom-command-fields">
-      <select class="cmd-type">
-        <option value="background">Hintergrund</option>
-        <option value="foreground">Vordergrund</option>
-        <option value="message">Nachricht</option>
-      </select>
-      <input type="text" class="cmd-name" placeholder="Name (z.B. Deploy)" value="${_escAttr(name)}">
-      <input type="text" class="cmd-command" placeholder="${type === 'message' ? 'Nachricht...' : 'Befehl (z.B. ./deploy.sh)'}" value="${_escAttr(command)}">
-    </div>
-    <button type="button" class="remove-cmd-btn icon-btn"><i class="fa fa-times"></i></button>
-  `;
-  const typeSelect = item.querySelector('.cmd-type');
-  typeSelect.value = type;
-  typeSelect.addEventListener('change', () => {
-    const cmdInput = item.querySelector('.cmd-command');
-    cmdInput.placeholder = typeSelect.value === 'message' ? 'Nachricht...' : 'Befehl (z.B. ./deploy.sh)';
-  });
-  item.querySelector('.remove-cmd-btn').addEventListener('click', () => item.remove());
-  container.appendChild(item);
-}
-
-function _escAttr(str) {
-  return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-}
-
-function _getCommandsFromUI(container) {
-  const items = container.querySelectorAll('.custom-command-item');
-  const commands = [];
-  for (const item of items) {
-    const name = item.querySelector('.cmd-name').value.trim();
-    const command = item.querySelector('.cmd-command').value.trim();
-    const type = item.querySelector('.cmd-type').value;
-    if (name || command) commands.push({ name, command, type });
-  }
-  return commands.length > 0 ? commands : null;
-}
-
 registerPage('session', {
  async init(params) {
    const sessionId = params.id;
@@ -89,16 +48,7 @@ registerPage('session', {
      }

      // Custom Commands laden
-      if (session.customCommands) {
-        try {
-          const cmds = typeof session.customCommands === 'string'
-            ? JSON.parse(session.customCommands)
-            : session.customCommands;
-          for (const cmd of cmds) {
-            _createCommandRow(commandsList, cmd.name || '', cmd.command || '', cmd.type || 'background');
-          }
-        } catch (e) { /* ignore parse errors */ }
-      }
+      loadCommandsIntoUI(commandsList, session.customCommands);
    } else {
      titleEl.textContent = 'Neue Session';
      deleteBtn.hidden = true;
@@ -106,7 +56,7 @@ registerPage('session', {
    }

    // Befehl hinzufügen
-    addCommandBtn.addEventListener('click', () => _createCommandRow(commandsList));
+    addCommandBtn.addEventListener('click', () => createCommandRow(commandsList));

    // Agents laden
    const agents = await apiGetAgents();
@@ -173,7 +123,7 @@ registerPage('session', {

    // Speichern
    saveBtn.addEventListener('click', async () => {
-      const commands = _getCommandsFromUI(commandsList);
+      const commands = getCommandsFromUI(commandsList);
      const data = {
        name: nameEl.value.trim() || 'Unbenannt',
        description: descEl.value.trim(),