feat: Enhanced Orchestrator Chat with notifications and better UX

- Add task creation notifications in Orchestrator Chat
- New messages appear at top (newest first)
- Add Clear Chat button with confirmation
- Improve timestamps: DD.MM.YYYY HH:MM:SS format
- Support for system notifications (task created, sub-agent responses)
- Add add_orchestrator_notification() helper function
- Auto-notify when agents create sub-tasks
- Clear Chat route: POST /orchestrator/clear
- Better visual distinction between messages and notifications

templates/orchestrator.html

@@ -42,19 +42,35 @@
     <div class="card">
       <div class="card-header bg-dark d-flex justify-content-between align-items-center">
         <h5 class="mb-0">Orchestrator-Chat</h5>
-        <small style="color:var(--text-muted);">Automatische Agenten-Delegation</small>
+        <div class="d-flex align-items-center gap-2">
+          <small style="color:var(--text-muted);">Automatische Agenten-Delegation</small>
+          {% if chat_history %}
+          <button class="btn btn-sm btn-outline-secondary" onclick="clearOrchestratorChat()">🗑 Clear</button>
+          {% endif %}
+        </div>
       </div>
       <div class="card-body chat-container" id="chatContainer">
         {% if chat_history %}
           {% for chat in chat_history %}
-          <div class="chat-message">
-            <div class="chat-timestamp">
-              {{ chat.timestamp }} ·
-              <span class="badge bg-primary" style="font-size:.65rem;">{{ chat.agent }}</span>
+          {% if chat.is_notification %}
+            <!-- System Notification -->
+            <div class="alert alert-info mb-2" style="font-size:0.875rem;padding:0.75rem;">
+              <div style="display:flex;justify-content:space-between;align-items:center;">
+                <span>{{ chat.message }}</span>
+                <small style="color:var(--text-muted);">{{ chat.timestamp }}</small>
+              </div>
             </div>
-            <div class="chat-prompt mt-1"><strong>Sie:</strong> {{ chat.user_prompt }}</div>
-            <div class="chat-response mt-1"><strong>Orchestrator:</strong> {{ chat.response }}</div>
-          </div>
+          {% else %}
+            <!-- Regular Chat Message -->
+            <div class="chat-message">
+              <div class="chat-timestamp">
+                {{ chat.timestamp }} ·
+                <span class="badge bg-primary" style="font-size:.65rem;">{{ chat.agent }}</span>
+              </div>
+              <div class="chat-prompt mt-1"><strong>Sie:</strong> {{ chat.user_prompt }}</div>
+              <div class="chat-response mt-1"><strong>Orchestrator:</strong> {{ chat.response }}</div>
+            </div>
+          {% endif %}
           {% endfor %}
         {% else %}
           <div class="text-center py-5" style="color:var(--text-muted);" id="emptyState">
@@ -89,7 +105,7 @@ function sendPromptWithStream() {
   const msgDiv = document.createElement('div');
   msgDiv.className = 'chat-message';
   msgDiv.innerHTML = `
-    <div class="chat-timestamp">${new Date().toLocaleTimeString()} · <span class="badge bg-primary" style="font-size:.65rem;" id="agentBadge">wird ausgewählt…</span></div>
+    <div class="chat-timestamp">${formatTimestamp()} · <span class="badge bg-primary" style="font-size:.65rem;" id="agentBadge">wird ausgewählt…</span></div>
     <div class="chat-prompt mt-1"><strong>Sie:</strong> ${escapeHtml(prompt)}</div>
     <div class="chat-response mt-1" id="responseDiv"><strong>Orchestrator:</strong> <span id="responseText">⏳ Agent arbeitet…</span></div>
   `;
@@ -186,5 +202,34 @@ function escapeHtml(text) {
   div.textContent = text;
   return div.innerHTML;
 }
+
+function clearOrchestratorChat() {
+  if (!confirm('Möchten Sie den gesamten Chat-Verlauf löschen?')) return;
+  
+  fetch('/orchestrator/clear', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' }
+  })
+  .then(response => response.json())
+  .then(data => {
+    if (data.success) {
+      location.reload();
+    }
+  })
+  .catch(err => {
+    alert('Fehler beim Löschen: ' + err.message);
+  });
+}
+
+function formatTimestamp() {
+  const now = new Date();
+  const day = String(now.getDate()).padStart(2, '0');
+  const month = String(now.getMonth() + 1).padStart(2, '0');
+  const year = now.getFullYear();
+  const hours = String(now.getHours()).padStart(2, '0');
+  const minutes = String(now.getMinutes()).padStart(2, '0');
+  const seconds = String(now.getSeconds()).padStart(2, '0');
+  return `${day}.${month}.${year} ${hours}:${minutes}:${seconds}`;
+}
 </script>
 {% endblock %}