From 2857c27b7c8f295d6a3cd81474f9e6b140e2c7e8 Mon Sep 17 00:00:00 2001
From: Developer <developer@noveria.net>
Date: Tue, 9 Jun 2026 21:58:20 +0200
Subject: [PATCH] feat: Quote, Title, Legende um AI Team Network im Dashboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Quote-Pill: 'An autonomous organization of AI agents...' wie alte TeamView
- Title/Subtitle/Description über Netzwerk
- Legende (Aktive/Idle/Pulse) unter Netzwerk
- Klick = Modal (wie neue Version, NICHT router.push)
- TeamNetwork unangetastet (SVG-Linien, Bézier, Pulse, Glow)
---
 frontend/src/views/DashboardView.vue | 112 ++++++++++++++++++++++++++-
 1 file changed, 111 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
index ef62ecd..cc549e1 100644
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/DashboardView.vue
@@ -45,12 +45,40 @@ function onQueueExecuteNow(id: string): void {
       <OperationsFeed :entries="feedEntries" />
     </div>
     <div class="col-center">
+      <!-- Quote Pill -->
+      <div class="quote-pill">
+        <span class="quote-text">"An autonomous organization of AI agents that does work for me and produces value 24/7"</span>
+      </div>
+
+      <!-- Header -->
+      <div class="team-header">
+        <h1 class="team-title">AI Team Network</h1>
+        <p class="team-subtitle">{{ agents.length }} AI agents, connected in real-time.</p>
+        <p class="team-description">Mission Control orchestriert ein Team spezialisierter Agenten — jeder mit eigener Identität, eigenem Workspace und klaren Verantwortlichkeiten. Die Pulse zeigen aktive Kommunikationsflüsse.</p>
+      </div>
+
       <TeamNetwork
         :agents="agents"
         :iris-runtime="irisRuntime"
         :get-agent-runtime="getAgentRuntime"
         :iris-focus="irisFocus"
       />
+
+      <!-- Legend -->
+      <div class="legend-row">
+        <div class="legend-item">
+          <span class="legend-dot active-pulse"></span>
+          <span>Aktive Verbindung</span>
+        </div>
+        <div class="legend-item">
+          <span class="legend-dot idle-pulse"></span>
+          <span>Idle</span>
+        </div>
+        <div class="legend-item">
+          <span class="legend-dot pulse-dot"></span>
+          <span>Datenfluss (Pulse)</span>
+        </div>
+      </div>
     </div>
     <div class="col-right">
       <ChatPanel :messages="chatMessages" :iris-busy="irisBusy" :iris-focus="irisFocus" @send="onChatSend" />
@@ -74,7 +102,89 @@ function onQueueExecuteNow(id: string): void {
 .dashboard ::-webkit-scrollbar-thumb { background: rgba(139,124,246,0.2); border-radius: 3px; }
 .dashboard ::-webkit-scrollbar-thumb:hover { background: rgba(139,124,246,0.35); }
 .col-left { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding-right: 4px; }
-.col-center { overflow-y: auto; padding: 0 4px; min-height: 0; }
+.col-center { overflow-y: auto; padding: 0 4px; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
+
+/* Quote Pill */
+.quote-pill {
+  background: var(--panel);
+  border: 1px solid rgba(139, 124, 246, 0.25);
+  border-radius: 14px;
+  padding: 14px 22px;
+  box-shadow: 0 0 18px rgba(139, 124, 246, 0.06), inset 0 0 18px rgba(139, 124, 246, 0.03);
+  text-align: center;
+}
+.quote-text {
+  font-style: italic;
+  font-size: 12px;
+  color: #9ea5b3;
+  line-height: 1.5;
+}
+
+/* Team Header */
+.team-header {
+  text-align: center;
+}
+.team-title {
+  font-size: 26px;
+  font-weight: 600;
+  color: #e8eaf0;
+  margin: 0 0 6px;
+}
+.team-subtitle {
+  font-size: 12px;
+  color: #7e8799;
+  margin: 0 0 4px;
+}
+.team-description {
+  font-size: 10.5px;
+  color: #6b7385;
+  margin: 0;
+  max-width: 560px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Legend */
+.legend-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  padding: 12px 20px;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+}
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 10px;
+  color: #7e8799;
+}
+.legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.active-pulse {
+  background: #51d49a;
+  box-shadow: 0 0 6px rgba(81, 212, 154, 0.6);
+}
+.idle-pulse {
+  background: #3a3f4b;
+}
+.pulse-dot {
+  background: white;
+  width: 6px;
+  height: 6px;
+  animation: legend-pulse 1.5s ease-in-out infinite;
+}
+@keyframes legend-pulse {
+  0%, 100% { opacity: 0.3; transform: scale(0.8); }
+  50% { opacity: 1; transform: scale(1.2); }
+}
 .col-right { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding-left: 4px; }
 .missions-section { display: flex; flex-direction: column; gap: 8px; }
 .column-title { margin: 0; font-size: 13px; font-weight: 600; color: #e8eaf0; letter-spacing: 0.01em; }