From 9033ff2973d5fe41da738a7505301cbeb5672919 Mon Sep 17 00:00:00 2001
From: Developer <developer@noveria.net>
Date: Fri, 12 Jun 2026 01:01:50 +0200
Subject: [PATCH] feat(v2): live sidebar counts, /dashboard = V2 default route,
 remove V1 dead code

---
 frontend/src/App.vue                          |   2 +-
 .../dashboard/ActiveInitiatives.vue           | 201 ------
 .../src/components/dashboard/AgendaPanel.vue  | 229 -------
 .../src/components/dashboard/AgentModal.vue   | 536 ---------------
 .../components/dashboard/ChatMessageList.vue  |  90 ---
 .../src/components/dashboard/ChatPanel.vue    | 291 --------
 .../components/dashboard/FeedDetailModal.vue  | 260 --------
 .../src/components/dashboard/IrisPanel.vue    | 323 ---------
 .../components/dashboard/OperationsFeed.vue   | 196 ------
 .../src/components/dashboard/QueuePanel.vue   | 293 ---------
 .../components/dashboard/RecentlyFinished.vue |  92 ---
 .../src/components/dashboard/TaskCard.vue     | 219 ------
 .../src/components/dashboard/TeamNetwork.vue  | 541 ---------------
 frontend/src/components/layout/Sidebar.vue    |  45 +-
 frontend/src/composables/icons.ts             |  12 +-
 frontend/src/composables/useDashboardData.ts  | 621 ------------------
 frontend/src/composables/useTeamNetworkSvg.ts | 266 --------
 frontend/src/router.ts                        |  10 +-
 frontend/src/views/DashboardView.vue          | 243 -------
 19 files changed, 54 insertions(+), 4416 deletions(-)
 delete mode 100644 frontend/src/components/dashboard/ActiveInitiatives.vue
 delete mode 100644 frontend/src/components/dashboard/AgendaPanel.vue
 delete mode 100644 frontend/src/components/dashboard/AgentModal.vue
 delete mode 100644 frontend/src/components/dashboard/ChatMessageList.vue
 delete mode 100644 frontend/src/components/dashboard/ChatPanel.vue
 delete mode 100644 frontend/src/components/dashboard/FeedDetailModal.vue
 delete mode 100644 frontend/src/components/dashboard/IrisPanel.vue
 delete mode 100644 frontend/src/components/dashboard/OperationsFeed.vue
 delete mode 100644 frontend/src/components/dashboard/QueuePanel.vue
 delete mode 100644 frontend/src/components/dashboard/RecentlyFinished.vue
 delete mode 100644 frontend/src/components/dashboard/TaskCard.vue
 delete mode 100644 frontend/src/components/dashboard/TeamNetwork.vue
 delete mode 100644 frontend/src/composables/useDashboardData.ts
 delete mode 100644 frontend/src/composables/useTeamNetworkSvg.ts
 delete mode 100644 frontend/src/views/DashboardView.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 01e5766..5bf48d9 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -40,7 +40,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <RouterView v-if="route.name === 'Login' || route.name === 'DashboardV2'" />
+  <RouterView v-if="route.name === 'Login' || route.name === 'Dashboard'" />
   <div v-else class="shell">
     <AppSidebar
       :active-view="activeView"
diff --git a/frontend/src/components/dashboard/ActiveInitiatives.vue b/frontend/src/components/dashboard/ActiveInitiatives.vue
deleted file mode 100644
index 439f126..0000000
--- a/frontend/src/components/dashboard/ActiveInitiatives.vue
+++ /dev/null
@@ -1,201 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { Clock } from '@lucide/vue'
-
-type InitiativeStatus = 'healthy' | 'attention' | 'blocked' | 'paused' | 'completed'
-
-interface Initiative {
-  title: string
-  progress: number
-  openTasks: number
-  blockers: number
-  status: InitiativeStatus
-  lastActivity: string
-}
-
-const initiatives = ref<Initiative[]>([
-  { title: 'OpenClaw Companion', progress: 55, openTasks: 7, blockers: 2, status: 'healthy', lastActivity: 'vor 8 Minuten' },
-  { title: '2D Idle Game', progress: 42, openTasks: 4, blockers: 0, status: 'healthy', lastActivity: 'vor 2 Stunden' },
-  { title: 'Deutsch B2', progress: 73, openTasks: 3, blockers: 0, status: 'attention', lastActivity: 'vor 1 Stunde' },
-  { title: 'Nexus Dashboard', progress: 60, openTasks: 3, blockers: 0, status: 'healthy', lastActivity: 'vor 5 Minuten' },
-])
-
-const statusMeta: Record<InitiativeStatus, { label: string; color: string; bg: string }> = {
-  healthy:    { label: 'Healthy',         color: '#22c55e', bg: 'rgba(34,197,94,0.1)' },
-  attention:  { label: 'Needs Attention', color: '#eab308', bg: 'rgba(234,179,8,0.1)' },
-  blocked:    { label: 'Blocked',         color: '#ef4444', bg: 'rgba(239,68,68,0.1)' },
-  paused:     { label: 'Paused',          color: '#6b7280', bg: 'rgba(107,114,128,0.1)' },
-  completed:  { label: 'Completed',       color: '#3b82f6', bg: 'rgba(59,130,246,0.1)' },
-}
-
-function onInitiativeClick(title: string) {
-  console.log('[Dashboard] Open initiative:', title)
-}
-</script>
-
-<template>
-  <div class="initiatives-section">
-    <h2>Active Initiatives</h2>
-    <div class="initiatives-grid">
-      <div
-        v-for="(init, idx) in initiatives"
-        :key="idx"
-        :class="['initiative-card', 'status-' + init.status]"
-        @click="onInitiativeClick(init.title)"
-        role="button"
-        tabindex="0"
-        @keyup.enter="onInitiativeClick(init.title)"
-      >
-        <div class="init-head">
-          <h3>{{ init.title }}</h3>
-          <span
-            class="status-badge"
-            :style="{
-              color: statusMeta[init.status].color,
-              background: statusMeta[init.status].bg,
-            }"
-          >
-            {{ statusMeta[init.status].label }}
-          </span>
-        </div>
-        <div class="progress-bar">
-          <div
-            class="progress-fill"
-            :style="{ width: init.progress + '%' }"
-          ></div>
-        </div>
-        <div class="progress-label">{{ init.progress }}%</div>
-        <div class="init-stats">
-          <span>{{ init.openTasks }} offene Aufgaben</span>
-          <span v-if="init.blockers">&middot; {{ init.blockers }} Blocker</span>
-        </div>
-        <div class="init-meta">
-          <Clock :size="11" />
-          <span>Letzte Aktivität {{ init.lastActivity }}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.initiatives-section {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 18px;
-  background: rgba(22, 27, 34, 0.8);
-  border: 1px solid rgba(139, 124, 246, 0.12);
-  border-radius: 16px;
-  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  transition: all 0.2s ease;
-}
-.initiatives-section:hover {
-  border-color: rgba(139, 124, 246, 0.18);
-}
-.initiatives-section h2 {
-  font-size: 14px;
-  font-weight: 600;
-  margin: 0;
-  color: #e8eaf0;
-}
-.initiatives-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 10px;
-}
-.initiative-card {
-  background: rgba(13, 17, 23, 0.5);
-  border: 1px solid rgba(139, 124, 246, 0.08);
-  border-radius: 14px;
-  padding: 14px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-.initiative-card:hover {
-  transform: scale(1.02);
-  border-color: rgba(139, 124, 246, 0.2);
-  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
-}
-.initiative-card:focus-visible {
-  outline: 2px solid #a78bfa;
-  outline-offset: 2px;
-}
-.init-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 8px;
-  gap: 8px;
-}
-.init-head h3 {
-  font-size: 12px;
-  font-weight: 600;
-  margin: 0;
-  color: #e8eaf0;
-}
-.status-badge {
-  font-size: 8px;
-  font-weight: 700;
-  padding: 2px 7px;
-  border-radius: 12px;
-  white-space: nowrap;
-  flex-shrink: 0;
-  letter-spacing: 0.02em;
-}
-.progress-bar {
-  height: 4px;
-  background: rgba(139, 124, 246, 0.1);
-  border-radius: 4px;
-  margin-bottom: 4px;
-  overflow: hidden;
-}
-.progress-fill {
-  height: 100%;
-  border-radius: 4px;
-  background: linear-gradient(90deg, #a78bfa, #8b5cf6);
-  transition: width 0.5s ease;
-}
-.initiative-card.status-attention .progress-fill {
-  background: linear-gradient(90deg, #eab308, #f59e0b);
-}
-.initiative-card.status-blocked .progress-fill {
-  background: linear-gradient(90deg, #ef4444, #dc2626);
-}
-.progress-label {
-  font-size: 10px;
-  color: #6b7385;
-  margin-bottom: 4px;
-}
-.init-stats {
-  font-size: 9px;
-  color: #6b7385;
-  margin-bottom: 4px;
-  display: flex;
-  gap: 4px;
-  flex-wrap: wrap;
-}
-.init-meta {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 9px;
-  color: #6b7385;
-}
-.init-meta svg {
-  flex-shrink: 0;
-}
-
-@media (max-width: 900px) {
-  .initiatives-grid {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-@media (max-width: 600px) {
-  .initiatives-grid {
-    grid-template-columns: 1fr;
-  }
-}
-</style>
diff --git a/frontend/src/components/dashboard/AgendaPanel.vue b/frontend/src/components/dashboard/AgendaPanel.vue
deleted file mode 100644
index 1dd4df9..0000000
--- a/frontend/src/components/dashboard/AgendaPanel.vue
+++ /dev/null
@@ -1,229 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { CheckCircle2, Circle, AlertTriangle } from '@lucide/vue'
-
-interface AgendaItem {
-  text: string
-  time?: string
-  done?: boolean
-  overdue?: boolean
-}
-
-const STORAGE_KEY = 'nexus-agenda-done'
-
-const agendaToday = ref<AgendaItem[]>([
-  { text: 'Teammeeting', time: '14:00' },
-  { text: 'Deutsch lernen', time: '18:00' },
-  { text: 'Steuerunterlagen prüfen' },
-  { text: 'Dungeon-Balance abschließen' },
-])
-
-const agendaTomorrow = ref<AgendaItem[]>([
-  { text: 'GitHub Issue #23' },
-  { text: 'Backup überprüfen' },
-])
-
-const agendaOverdue = ref<AgendaItem[]>([
-  { text: 'Hangfire konfigurieren', overdue: true },
-])
-
-function loadDoneStates() {
-  try {
-    const raw = localStorage.getItem(STORAGE_KEY)
-    if (!raw) return
-    const keys: string[] = JSON.parse(raw)
-    const set = new Set(keys)
-    const sections = [
-      { items: agendaToday.value, prefix: 'today' },
-      { items: agendaTomorrow.value, prefix: 'tomorrow' },
-      { items: agendaOverdue.value, prefix: 'overdue' },
-    ]
-    for (const { items, prefix } of sections) {
-      items.forEach((item, i) => {
-        if (set.has(`${prefix}-${i}`)) item.done = true
-      })
-    }
-  } catch { /* ignore malformed storage */ }
-}
-
-function saveDoneStates() {
-  const keys: string[] = []
-  const sections = [
-    { items: agendaToday.value, prefix: 'today' },
-    { items: agendaTomorrow.value, prefix: 'tomorrow' },
-    { items: agendaOverdue.value, prefix: 'overdue' },
-  ]
-  for (const { items, prefix } of sections) {
-    items.forEach((item, i) => {
-      if (item.done) keys.push(`${prefix}-${i}`)
-    })
-  }
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(keys))
-}
-
-function toggleAgendaItem(item: AgendaItem) {
-  item.done = !item.done
-  saveDoneStates()
-}
-
-onMounted(() => {
-  loadDoneStates()
-})
-</script>
-
-<template>
-  <div class="agenda-panel">
-    <h2>Agenda</h2>
-
-    <div class="agenda-section">
-      <h3>Heute</h3>
-      <div
-        v-for="(item, idx) in agendaToday"
-        :key="'today-' + idx"
-        :class="['agenda-item', { done: item.done }]"
-        @click="toggleAgendaItem(item)"
-      >
-        <button class="agenda-check">
-          <CheckCircle2 v-if="item.done" :size="14" class="checked" />
-          <Circle v-else :size="14" />
-        </button>
-        <span class="agenda-text">{{ item.text }}</span>
-        <span v-if="item.time" class="agenda-time">{{ item.time }}</span>
-      </div>
-    </div>
-
-    <div class="agenda-section">
-      <h3>Morgen</h3>
-      <div
-        v-for="(item, idx) in agendaTomorrow"
-        :key="'tomorrow-' + idx"
-        :class="['agenda-item', { done: item.done }]"
-        @click="toggleAgendaItem(item)"
-      >
-        <button class="agenda-check">
-          <CheckCircle2 v-if="item.done" :size="14" class="checked" />
-          <Circle v-else :size="14" />
-        </button>
-        <span class="agenda-text">{{ item.text }}</span>
-      </div>
-    </div>
-
-    <div class="agenda-section">
-      <h3 class="overdue-heading">
-        <AlertTriangle :size="12" />
-        Überfällig
-      </h3>
-      <div
-        v-for="(item, idx) in agendaOverdue"
-        :key="'overdue-' + idx"
-        class="agenda-item overdue"
-      >
-        <button class="agenda-check">
-          <AlertTriangle :size="14" class="overdue-icon" />
-        </button>
-        <span class="agenda-text">{{ item.text }}</span>
-        <span class="agenda-sub">seit 2 Tagen</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.agenda-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 18px;
-  background: rgba(22, 27, 34, 0.8);
-  border: 1px solid rgba(139, 124, 246, 0.12);
-  border-radius: 16px;
-  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  transition: all 0.2s ease;
-}
-.agenda-panel:hover {
-  border-color: rgba(139, 124, 246, 0.18);
-}
-.agenda-panel h2 {
-  font-size: 14px;
-  font-weight: 600;
-  margin: 0;
-  color: #e8eaf0;
-}
-.agenda-section h3 {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 10px;
-  font-weight: 700;
-  color: #6b7385;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  margin: 0 0 4px;
-  padding-bottom: 4px;
-  border-bottom: 1px solid rgba(139, 124, 246, 0.06);
-}
-.overdue-heading {
-  color: #ef4444 !important;
-  border-bottom-color: rgba(239, 68, 68, 0.15) !important;
-}
-.agenda-item {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  padding: 5px 6px;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-.agenda-item:hover {
-  background: rgba(139, 124, 246, 0.04);
-}
-.agenda-item.done {
-  opacity: 0.5;
-}
-.agenda-item.done .agenda-text {
-  text-decoration: line-through;
-}
-.agenda-check {
-  display: grid;
-  place-items: center;
-  background: none;
-  border: none;
-  color: #6b7385;
-  padding: 0;
-  cursor: pointer;
-  flex-shrink: 0;
-}
-.agenda-check .checked {
-  color: #22c55e;
-}
-.overdue .overdue-icon {
-  color: #ef4444;
-}
-.agenda-text {
-  flex: 1;
-  font-size: 10.5px;
-  color: #7e8799;
-}
-.agenda-time {
-  font-size: 9px;
-  color: #6b7385;
-  flex-shrink: 0;
-}
-.agenda-sub {
-  font-size: 8px;
-  color: #ef4444;
-  flex-shrink: 0;
-}
-.agenda-item.overdue {
-  background: rgba(239, 68, 68, 0.06);
-}
-
-@media (max-width: 900px) {
-  .agenda-panel {
-    order: 3;
-  }
-}
-</style>
diff --git a/frontend/src/components/dashboard/AgentModal.vue b/frontend/src/components/dashboard/AgentModal.vue
deleted file mode 100644
index 350377a..0000000
--- a/frontend/src/components/dashboard/AgentModal.vue
+++ /dev/null
@@ -1,536 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { X, ExternalLink } from '@lucide/vue'
-import type { AgentNodeData } from '../../composables/useDashboardData'
-import { useToast } from '../../composables/useToast'
-import Button from '@/components/ui/button/Button.vue'
-import Badge from '@/components/ui/Badge.vue'
-import Select from '@/components/ui/Select.vue'
-
-const props = defineProps<{
-  agent: AgentNodeData
-  runtime: string
-}>()
-
-const emit = defineEmits<{
-  close: []
-}>()
-
-const toast = useToast()
-
-interface ModelOption {
-  id: string
-  name: string
-  provider: string
-}
-
-interface ActivityEntry {
-  time: string
-  text: string
-}
-
-const availableModels = ref<ModelOption[]>([])
-const selectedModel = ref('')
-const currentModel = ref('')
-const saving = ref(false)
-
-const activityEntries = ref<ActivityEntry[]>([])
-const activityLoaded = ref(false)
-
-async function loadModels() {
-  try {
-    const res = await fetch('/api/dashboard/models', { credentials: 'include' })
-    if (res.ok) {
-      availableModels.value = await res.json()
-    }
-  } catch {
-    // silent
-  }
-}
-
-async function loadCurrentModel() {
-  try {
-    const res = await fetch(`/api/dashboard/agents/${props.agent.id}/model`, { credentials: 'include' })
-    if (res.ok) {
-      const data = await res.json()
-      selectedModel.value = data.model
-      currentModel.value = data.model
-    }
-  } catch {
-    // silent
-  }
-}
-
-async function saveModel() {
-  saving.value = true
-  try {
-    const res = await fetch(`/api/dashboard/agents/${props.agent.id}/model`, {
-      method: 'PUT',
-      credentials: 'include',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ model: selectedModel.value }),
-    })
-    if (res.ok) {
-      currentModel.value = selectedModel.value
-      toast.success('Model updated successfully')
-    } else {
-      toast.error('Failed to update model')
-    }
-  } catch {
-    toast.error('Connection error')
-  } finally {
-    saving.value = false
-  }
-}
-
-async function loadActivity() {
-  try {
-    const res = await fetch(`/api/dashboard/agents/${props.agent.id}/activity?limit=5`, { credentials: 'include' })
-    if (res.ok) {
-      activityEntries.value = await res.json()
-    }
-  } catch {
-    // silent — fallback to empty
-  } finally {
-    activityLoaded.value = true
-  }
-}
-
-onMounted(async () => {
-  await loadModels()
-  await loadCurrentModel()
-  await loadActivity()
-})
-</script>
-
-<template>
-  <Teleport to="body">
-    <div class="modal-overlay" @click.self="$emit('close')">
-      <div class="modal-card" :style="{ '--agent-color': agent.color }">
-        <!-- Header -->
-        <div class="modal-header">
-          <div class="modal-title-row">
-            <div class="modal-avatar" :style="{ background: `${agent.color}18`, color: agent.color }">
-              <span class="avatar-letter">{{ agent.name.charAt(0) }}</span>
-            </div>
-            <div>
-              <h2>{{ agent.name }}</h2>
-              <span class="modal-role">{{ agent.role }}</span>
-              <a :href="`/agents/${agent.id}`" class="agent-link-btn" title="Open agent config">
-                <ExternalLink :size="12" />
-              </a>
-            </div>
-          </div>
-          <Button variant="ghost" size="icon" class="h-8 w-8" @click="$emit('close')" aria-label="Close">
-            <X :size="16" />
-          </Button>
-        </div>
-
-        <!-- Status -->
-        <section class="modal-section">
-          <h3 class="section-label">Status</h3>
-          <div class="status-row">
-            <Badge
-              :variant="agent.active ? 'default' : 'secondary'"
-              :class="agent.active ? 'bg-[rgba(81,212,154,0.1)] text-[#51d49a] border-[rgba(81,212,154,0.3)]' : 'bg-[rgba(107,115,133,0.08)] text-[#6b7385] border-[rgba(107,115,133,0.2)]'"
-            >
-              <span class="status-dot" :class="{ active: agent.active }" />
-              {{ agent.active ? 'Active' : 'Idle' }}
-            </Badge>
-            <span v-if="agent.active" class="footer-badge">Runtime: {{ runtime }}</span>
-          </div>
-        </section>
-
-        <!-- Description -->
-        <p class="modal-desc">{{ agent.description }}</p>
-
-        <!-- Tags -->
-        <section class="modal-section">
-          <h3 class="section-label">Tags</h3>
-          <div class="modal-tags-row">
-            <Badge
-              v-for="tag in agent.tags"
-              :key="tag"
-              variant="outline"
-              :style="{ background: `${agent.color}18`, color: agent.color, borderColor: `${agent.color}30` }"
-            >
-              {{ tag }}
-            </Badge>
-          </div>
-        </section>
-
-        <!-- Current Task -->
-        <section class="modal-section">
-          <h3 class="section-label">
-            Current Task
-            <span v-if="agent.active" class="thinking-indicator">
-              <span class="thinking-dots-inline">
-                <span class="tdot"></span>
-                <span class="tdot"></span>
-                <span class="tdot"></span>
-              </span>
-              Thinking…
-            </span>
-          </h3>
-          <p class="section-value">
-            {{ agent.currentTask }}
-          </p>
-        </section>
-
-        <!-- Recent Activity -->
-        <section class="modal-section">
-          <h3 class="section-label">Recent Activity</h3>
-          <div v-if="!activityLoaded" class="activity-placeholder">Loading…</div>
-          <div v-else-if="activityEntries.length === 0" class="activity-placeholder">No recent activity</div>
-          <div v-else class="activity-list">
-            <div v-for="(entry, idx) in activityEntries" :key="idx" class="activity-item">
-              <span class="activity-time">{{ entry.time }}</span>
-              <span class="activity-text">{{ entry.text.length > 100 ? entry.text.slice(0, 100) + '…' : entry.text }}</span>
-            </div>
-          </div>
-        </section>
-
-        <!-- Goal + Progress -->
-        <section class="modal-section">
-          <h3 class="section-label">Goal</h3>
-          <p class="section-value">{{ agent.goal }}</p>
-          <div class="progress-row">
-            <span class="progress-pct">{{ agent.progress }}%</span>
-            <div class="progress-track">
-              <div class="progress-fill" :style="{ width: `${agent.progress}%` }"></div>
-            </div>
-          </div>
-        </section>
-
-        <!-- Model -->
-        <section class="modal-section">
-          <h3 class="section-label">Model</h3>
-          <div class="model-select-row">
-            <Select v-model="selectedModel" class="flex-1 text-xs border-[#a78bfa]">
-              <option v-for="m in availableModels" :key="m.id" :value="m.id">
-                {{ m.name }} ({{ m.provider }})
-              </option>
-            </Select>
-            <Button
-              variant="default"
-              size="sm"
-              class="bg-[#a78bfa] hover:bg-[#c4b5fd]"
-              :disabled="saving || selectedModel === currentModel"
-              @click="saveModel"
-            >
-              {{ saving ? 'Saving...' : 'Save' }}
-            </Button>
-          </div>
-        </section>
-
-        <!-- Footer Stats -->
-        <div class="modal-footer">
-          <Badge :class="agent.active ? 'bg-[rgba(81,212,154,0.06)] text-[#51d49a] border-[rgba(81,212,154,0.25)]' : 'bg-[rgba(107,115,133,0.04)] text-[#6b7385] border-[rgba(107,115,133,0.15)]'">
-            {{ agent.active ? '● Active' : '○ Idle' }}
-          </Badge>
-          <span v-if="agent.active" class="footer-badge">{{ runtime }}</span>
-        </div>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<style scoped>
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: grid;
-  place-items: center;
-  padding: 24px;
-  background: rgba(0, 0, 0, 0.55);
-  backdrop-filter: blur(4px);
-  animation: overlay-in 0.2s ease;
-}
-@keyframes overlay-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.modal-card {
-  width: min(480px, 100%);
-  max-height: 80vh;
-  overflow-y: auto;
-  padding: 24px;
-  background: rgba(18, 22, 30, 0.96);
-  border: 1px solid color-mix(in srgb, var(--agent-color) 25%, transparent);
-  border-radius: 16px;
-  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
-  animation: card-in 0.25s ease;
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-}
-@keyframes card-in {
-  from { opacity: 0; transform: translateY(12px) scale(0.98); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
-}
-.modal-card::-webkit-scrollbar {
-  width: 5px;
-}
-.modal-card::-webkit-scrollbar-track {
-  background: transparent;
-}
-.modal-card::-webkit-scrollbar-thumb {
-  background: rgba(139, 124, 246, 0.2);
-  border-radius: 3px;
-}
-
-.modal-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  margin-bottom: 16px;
-}
-.modal-title-row {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-}
-.modal-avatar {
-  width: 44px;
-  height: 44px;
-  display: grid;
-  place-items: center;
-  border-radius: 12px;
-  flex-shrink: 0;
-}
-.avatar-letter {
-  font-size: 18px;
-  font-weight: 700;
-}
-.modal-title-row h2 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 700;
-  color: #e8eaf0;
-}
-.modal-role {
-  font-size: 10px;
-  color: #6b7385;
-  font-weight: 500;
-}
-.agent-link-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  margin-left: 4px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: #6b7385;
-  opacity: 0.4;
-  cursor: pointer;
-  transition: opacity 0.2s;
-  flex-shrink: 0;
-  text-decoration: none;
-  vertical-align: middle;
-}
-.agent-link-btn:hover {
-  opacity: 1;
-  color: var(--agent-color);
-}
-
-.modal-desc {
-  font-size: 11px;
-  line-height: 1.55;
-  color: #7e8799;
-  margin: 0 0 18px;
-  padding-bottom: 14px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-.modal-section {
-  margin-bottom: 16px;
-}
-.section-label {
-  font-size: 9px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: #6b7385;
-  margin: 0 0 6px;
-}
-.section-value {
-  margin: 0;
-  font-size: 12px;
-  color: #e8eaf0;
-  line-height: 1.4;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-/* Status */
-.status-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #6b7385;
-  transition: all 0.3s ease;
-}
-.status-dot.active {
-  background: #51d49a;
-  box-shadow: 0 0 8px rgba(81, 212, 154, 0.6);
-  animation: pulse-dot 2s ease-in-out infinite;
-}
-@keyframes pulse-dot {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.6; transform: scale(1.2); }
-}
-
-/* Tags */
-.modal-tags-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-/* Progress */
-.progress-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-top: 8px;
-}
-.progress-pct {
-  font-size: 11px;
-  font-weight: 600;
-  color: #7e8799;
-  flex-shrink: 0;
-  font-variant-numeric: tabular-nums;
-}
-.progress-track {
-  flex: 1;
-  height: 4px;
-  background: rgba(255, 255, 255, 0.06);
-  border-radius: 4px;
-  overflow: hidden;
-}
-.progress-fill {
-  height: 100%;
-  border-radius: 4px;
-  background: var(--agent-color);
-  transition: width 0.5s ease;
-}
-
-/* Thinking Indicator */
-.thinking-indicator {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 9px;
-  font-weight: 500;
-  text-transform: none;
-  letter-spacing: normal;
-  color: #a78bfa;
-  margin-left: 8px;
-  vertical-align: middle;
-}
-.thinking-dots-inline {
-  display: inline-flex;
-  gap: 4px;
-}
-.thinking-dots-inline .tdot {
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  background: #a78bfa;
-  animation: thinking-bounce 1.2s ease-in-out infinite;
-}
-.thinking-dots-inline .tdot:nth-child(2) {
-  animation-delay: 0.2s;
-}
-.thinking-dots-inline .tdot:nth-child(3) {
-  animation-delay: 0.4s;
-}
-@keyframes thinking-bounce {
-  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
-  40% { transform: scale(1); opacity: 1; }
-}
-
-/* Recent Activity */
-.activity-placeholder {
-  font-size: 10px;
-  color: #6b7385;
-  font-style: italic;
-  padding: 4px 0;
-}
-.activity-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  max-height: 160px;
-  overflow-y: auto;
-}
-.activity-list::-webkit-scrollbar {
-  width: 4px;
-}
-.activity-list::-webkit-scrollbar-track {
-  background: transparent;
-}
-.activity-list::-webkit-scrollbar-thumb {
-  background: rgba(139, 124, 246, 0.15);
-  border-radius: 3px;
-}
-.activity-item {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 6px 10px;
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.04);
-}
-.activity-time {
-  font-size: 9px;
-  font-weight: 600;
-  color: #6b7385;
-  font-variant-numeric: tabular-nums;
-}
-.activity-text {
-  font-size: 11px;
-  line-height: 1.45;
-  color: #c4c8d4;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-/* Footer */
-.modal-footer {
-  display: flex;
-  gap: 10px;
-  padding-top: 14px;
-  margin-top: 6px;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
-}
-.footer-badge {
-  font-size: 9px;
-  font-weight: 600;
-  padding: 4px 10px;
-  border-radius: 6px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  color: #7e8799;
-}
-
-/* Model Selector */
-.model-select-row {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-</style>
diff --git a/frontend/src/components/dashboard/ChatMessageList.vue b/frontend/src/components/dashboard/ChatMessageList.vue
deleted file mode 100644
index 0790775..0000000
--- a/frontend/src/components/dashboard/ChatMessageList.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<script setup lang="ts">
-import { Bot } from '@lucide/vue'
-import type { ChatMessage } from '../../composables/useDashboardData'
-import { renderMarkdown } from '../../utils/markdown'
-
-defineProps<{
-  messages: ChatMessage[]
-  irisBusy: boolean
-  elapsedSeconds: number
-}>()
-
-function formatTime(ts: number): string {
-  const d = new Date(ts)
-  return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
-}
-</script>
-
-<template>
-  <div class="flex flex-col gap-2.5">
-    <div
-      v-for="msg in messages"
-      :key="msg.id"
-      :class="['flex gap-2', msg.sender === 'user' ? 'justify-end' : '']"
-    >
-      <div v-if="msg.sender === 'iris'" class="flex-shrink-0 self-end w-6 h-6 grid place-items-center rounded-lg bg-[rgba(167,139,250,0.15)] text-[#a78bfa]">
-        <Bot :size="12" />
-      </div>
-      <div
-        :class="[
-          'px-3 py-2 rounded-lg text-[10.5px] leading-[1.45] max-w-[85%]',
-          msg.sender === 'iris'
-            ? 'bg-[rgba(167,139,250,0.08)] border border-[rgba(167,139,250,0.1)] text-[#d4d8e0]'
-            : 'bg-[rgba(59,130,246,0.12)] border border-[rgba(59,130,246,0.15)] text-[#e8eaf0]',
-        ]"
-      >
-        <div v-if="msg.sender === 'iris'" v-html="renderMarkdown(msg.text)" class="msg-md"></div>
-        <p v-else class="m-0">{{ msg.text }}</p>
-        <div
-          :class="[
-            'text-[8px] mt-1 opacity-50',
-            msg.sender === 'user' ? 'text-right' : 'text-left',
-          ]"
-        >
-          {{ formatTime(msg.timestamp) }}
-        </div>
-      </div>
-    </div>
-
-    <!-- Busy Bubble -->
-    <div v-if="irisBusy" class="flex gap-2 max-w-[75%]">
-      <div class="flex-shrink-0 self-end w-6 h-6 grid place-items-center rounded-lg bg-[rgba(167,139,250,0.15)] text-[#a78bfa]">
-        <Bot :size="12" />
-      </div>
-      <div class="px-3 py-2 rounded-lg text-[10.5px] bg-[rgba(167,139,250,0.08)] border border-[rgba(167,139,250,0.18)] text-[#c4c8d4]">
-        <div class="flex items-center gap-2">
-          <span class="w-[7px] h-[7px] rounded-full bg-[#a78bfa] animate-pulse flex-shrink-0" />
-          <span>Denkt nach...</span>
-        </div>
-        <div class="text-[8px] mt-1 opacity-50">läuft seit {{ elapsedSeconds }}s</div>
-      </div>
-    </div>
-
-    <div v-if="messages.length === 0" class="flex-1 grid place-items-center text-center py-8">
-      <p class="text-[10px] text-[#6b7385] max-w-[180px] leading-[1.4] m-0">
-        No messages yet. Start a conversation with Iris.
-      </p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.msg-md { line-height: 1.55; }
-.msg-md :deep(p) { margin: 0 0 6px 0; }
-.msg-md :deep(p:last-child) { margin-bottom: 0; }
-.msg-md :deep(strong) { color: #e8eaf0; font-weight: 700; }
-.msg-md :deep(em) { font-style: italic; color: #c4c8d4; }
-.msg-md :deep(code) { background: rgba(0,0,0,0.3); padding: 1px 5px; border-radius: 4px; font-family: 'JetBrains Mono','Fira Code',monospace; font-size: 10px; color: #f472b6; }
-.msg-md :deep(pre) { background: rgba(0,0,0,0.35); padding: 8px 10px; border-radius: 8px; overflow-x: auto; margin: 6px 0; border: 1px solid rgba(255,255,255,0.04); }
-.msg-md :deep(pre code) { background: none; padding: 0; font-size: 10px; color: #d4d8e0; }
-.msg-md :deep(a) { color: #a78bfa; text-decoration: underline; text-underline-offset: 2px; }
-.msg-md :deep(a:hover) { color: #c4b5fd; }
-.msg-md :deep(ul) { margin: 4px 0; padding-left: 16px; }
-.msg-md :deep(li) { margin: 2px 0; }
-.msg-md :deep(h1), .msg-md :deep(h2), .msg-md :deep(h3), .msg-md :deep(h4), .msg-md :deep(h5), .msg-md :deep(h6) { margin: 8px 0 4px 0; color: #e8eaf0; font-weight: 700; line-height: 1.3; }
-.msg-md :deep(h1) { font-size: 13px; }
-.msg-md :deep(h2) { font-size: 12px; }
-.msg-md :deep(h3) { font-size: 11px; }
-.msg-md :deep(h4), .msg-md :deep(h5), .msg-md :deep(h6) { font-size: 10.5px; }
-.msg-md :deep(hr) { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 8px 0; }
-</style>
diff --git a/frontend/src/components/dashboard/ChatPanel.vue b/frontend/src/components/dashboard/ChatPanel.vue
deleted file mode 100644
index 95541ee..0000000
--- a/frontend/src/components/dashboard/ChatPanel.vue
+++ /dev/null
@@ -1,291 +0,0 @@
-<script setup lang="ts">
-import { ref, nextTick, watch, onUnmounted } from 'vue'
-import { Bot, Send, Maximize2 } from '@lucide/vue'
-import type { ChatMessage } from '../../composables/useDashboardData'
-import { useDashboardData } from '../../composables/useDashboardData'
-import Button from '@/components/ui/button/Button.vue'
-import Textarea from '@/components/ui/Textarea.vue'
-import Dialog from '@/components/ui/Dialog.vue'
-import DialogHeader from '@/components/ui/DialogHeader.vue'
-import DialogTitle from '@/components/ui/DialogTitle.vue'
-import ChatMessageList from './ChatMessageList.vue'
-
-const props = defineProps<{
-  messages: ChatMessage[]
-  irisBusy: boolean
-  irisFocus: string
-}>()
-
-const { sendChatMessage, busySince } = useDashboardData()
-
-const elapsedSeconds = ref(0)
-let elapsedInterval: ReturnType<typeof setInterval> | null = null
-
-function startElapsedTimer(): void {
-  stopElapsedTimer()
-  const update = () => {
-    if (busySince.value > 0) {
-      elapsedSeconds.value = Math.floor((Date.now() - busySince.value) / 1000)
-    }
-  }
-  update()
-  elapsedInterval = setInterval(update, 1000)
-}
-
-function stopElapsedTimer(): void {
-  if (elapsedInterval) {
-    clearInterval(elapsedInterval)
-    elapsedInterval = null
-  }
-}
-
-watch(() => props.irisBusy, (busy) => {
-  if (busy) {
-    startElapsedTimer()
-  } else {
-    stopElapsedTimer()
-    elapsedSeconds.value = 0
-  }
-}, { immediate: true })
-
-onUnmounted(() => {
-  stopElapsedTimer()
-})
-
-const inputText = ref('')
-const chatListRef = ref<HTMLElement | null>(null)
-const chatModalListRef = ref<HTMLElement | null>(null)
-const dialogOpen = ref(false)
-
-function sendMessage(): void {
-  if (!inputText.value.trim()) return
-  sendChatMessage(inputText.value)
-  inputText.value = ''
-}
-
-watch(
-  () => props.messages.length,
-  async () => {
-    await nextTick()
-    const el = dialogOpen.value ? chatModalListRef.value : chatListRef.value
-    if (el) {
-      el.scrollTop = el.scrollHeight
-    }
-  }
-)
-</script>
-
-<template>
-  <!-- Inline Chat Panel -->
-  <div class="chat-panel">
-    <div class="chat-header">
-      <div class="chat-header-left">
-        <Bot :size="16" class="text-[#a78bfa]" />
-        <h2>Iris Chat</h2>
-      </div>
-      <Button variant="ghost" size="icon" class="h-7 w-7" @click="dialogOpen = true" title="Open larger chat">
-        <Maximize2 :size="14" />
-      </Button>
-    </div>
-
-    <!-- Focus Bar -->
-    <div v-if="irisBusy && irisFocus" class="focus-bar">
-      <span class="focus-label">Current Focus</span>
-      <span class="focus-text">{{ irisFocus }}</span>
-    </div>
-
-    <!-- Messages -->
-    <div ref="chatListRef" class="chat-messages">
-      <ChatMessageList
-        :messages="messages"
-        :iris-busy="irisBusy"
-        :elapsed-seconds="elapsedSeconds"
-      />
-    </div>
-
-    <!-- Input -->
-    <div class="chat-input-row">
-      <Textarea
-        v-model="inputText"
-        rows="1"
-        placeholder="Type a message..."
-        class="min-h-0 h-9 resize-none text-xs bg-black/30 border-[rgba(255,255,255,0.08)] text-[#e8eaf0] placeholder:text-[#6b7385] text-[10px]"
-        @keyup.enter.exact="sendMessage"
-      />
-      <Button
-        size="icon"
-        class="h-8 w-8 bg-[#a78bfa] hover:bg-[#c4b5fd] flex-shrink-0"
-        :disabled="!inputText.trim()"
-        @click="sendMessage"
-        aria-label="Send"
-      >
-        <Send :size="14" />
-      </Button>
-    </div>
-  </div>
-
-  <!-- Expanded Chat Dialog -->
-  <Dialog :open="dialogOpen" class="sm:max-w-[820px] sm:h-[78vh] p-0 gap-0" @update:open="dialogOpen = $event">
-    <template #default>
-      <DialogHeader class="flex-row items-center justify-between px-5 py-4 border-b border-[rgba(255,255,255,0.06)]">
-        <div class="flex items-center gap-2">
-          <Bot :size="18" class="text-[#a78bfa]" />
-          <DialogTitle>Iris Chat</DialogTitle>
-        </div>
-        <Button variant="ghost" size="icon" class="h-7 w-7" @click="dialogOpen = false" aria-label="Close">
-          <span class="text-lg leading-none">&times;</span>
-        </Button>
-      </DialogHeader>
-
-      <div v-if="irisBusy && irisFocus" class="focus-bar !px-5">
-        <span class="focus-label">Current Focus</span>
-        <span class="focus-text">{{ irisFocus }}</span>
-      </div>
-
-      <div ref="chatModalListRef" class="flex-1 overflow-y-auto px-5 py-4">
-        <ChatMessageList
-          :messages="messages"
-          :iris-busy="irisBusy"
-          :elapsed-seconds="elapsedSeconds"
-        />
-      </div>
-
-      <div class="flex gap-2 px-4 py-3 border-t border-[rgba(255,255,255,0.06)]">
-        <Textarea
-          v-model="inputText"
-          rows="1"
-          placeholder="Type a message..."
-          class="min-h-0 h-10 resize-none text-sm bg-black/30 border-[rgba(255,255,255,0.08)] text-[#e8eaf0] placeholder:text-[#6b7385]"
-          @keyup.enter.exact="sendMessage"
-        />
-        <Button
-          size="icon"
-          class="h-10 w-10 bg-[#a78bfa] hover:bg-[#c4b5fd] flex-shrink-0"
-          :disabled="!inputText.trim()"
-          @click="sendMessage"
-          aria-label="Send"
-        >
-          <Send :size="18" />
-        </Button>
-      </div>
-    </template>
-  </Dialog>
-</template>
-
-<style scoped>
-.chat-panel {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 360px;
-  max-height: 480px;
-  background: rgba(22, 27, 34, 0.75);
-  border: 1px solid rgba(139, 124, 246, 0.12);
-  border-radius: 16px;
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
-  transition: border-color 0.2s ease;
-  overflow: hidden;
-}
-.chat-panel:hover {
-  border-color: rgba(139, 124, 246, 0.18);
-}
-
-.chat-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 16px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-}
-.chat-header-left {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.chat-header h2 {
-  margin: 0;
-  font-size: 13px;
-  font-weight: 600;
-  color: #e8eaf0;
-}
-
-/* Focus Bar */
-.focus-bar {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  padding: 8px 16px;
-  background: rgba(234, 179, 8, 0.04);
-  border-bottom: 1px solid rgba(234, 179, 8, 0.08);
-}
-.focus-label {
-  font-size: 8px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: #eab308;
-}
-.focus-text {
-  font-size: 10px;
-  color: #7e8799;
-  line-height: 1.3;
-}
-
-/* Messages */
-.chat-messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px 16px;
-}
-.chat-messages::-webkit-scrollbar {
-  width: 5px;
-}
-.chat-messages::-webkit-scrollbar-track {
-  background: transparent;
-}
-.chat-messages::-webkit-scrollbar-thumb {
-  background: rgba(139, 124, 246, 0.2);
-  border-radius: 3px;
-}
-
-/* Input */
-.chat-input-row {
-  display: flex;
-  gap: 6px;
-  padding: 10px 12px;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-/* ── Mobile: compact mode ── */
-@media (max-width: 768px) {
-  .chat-panel {
-    min-height: 280px;
-    max-height: 360px;
-    border-radius: 12px;
-  }
-  .chat-header {
-    padding: 10px 12px;
-  }
-  .chat-header h2 {
-    font-size: 11px;
-  }
-  .chat-messages {
-    padding: 8px 12px;
-  }
-  .chat-input-row {
-    padding: 8px 10px;
-    gap: 4px;
-  }
-  .focus-bar {
-    padding: 6px 12px;
-  }
-  .focus-label {
-    font-size: 7px;
-  }
-  .focus-text {
-    font-size: 9px;
-  }
-}
-</style>
diff --git a/frontend/src/components/dashboard/FeedDetailModal.vue b/frontend/src/components/dashboard/FeedDetailModal.vue
deleted file mode 100644
index 2c5ef2a..0000000
--- a/frontend/src/components/dashboard/FeedDetailModal.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { ChevronLeft, ChevronRight, X } from '@lucide/vue'
-import type { FeedEntry } from '../../composables/useDashboardData'
-
-const props = defineProps<{
-  entries: FeedEntry[]
-  modelValue: boolean
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-}>()
-
-const selectedDayOffset = ref(0) // 0 = today, -1 = yesterday, etc.
-
-function close() {
-  emit('update:modelValue', false)
-}
-
-function dayLabel(offset: number): string {
-  if (offset === 0) return 'Heute'
-  if (offset === -1) return 'Gestern'
-  if (offset === -2) return 'Vorgestern'
-  const d = new Date()
-  d.setDate(d.getDate() + offset)
-  return d.toLocaleDateString('de-DE', { weekday: 'long', day: 'numeric', month: 'long' })
-}
-
-function navigateDay(dir: -1 | 1) {
-  const next = selectedDayOffset.value + dir
-  if (next >= -6 && next <= 0) {
-    selectedDayOffset.value = next
-  }
-}
-
-const filteredEntries = computed(() => {
-  const targetDate = new Date()
-  targetDate.setDate(targetDate.getDate() + selectedDayOffset.value)
-  const targetStr = targetDate.toISOString().slice(0, 10)
-  return props.entries.filter(e => e.timestamp.slice(0, 10) === targetStr)
-})
-</script>
-
-<template>
-  <Teleport to="body">
-    <div v-if="modelValue" class="feed-modal-overlay" @click.self="close">
-      <div class="feed-modal-card">
-        <div class="feed-modal-header">
-          <h2 class="feed-modal-title">Operations Log</h2>
-          <button class="feed-modal-close-btn" @click="close" aria-label="Close">
-            <X :size="16" />
-          </button>
-        </div>
-
-        <div class="feed-modal-nav">
-          <button
-            class="feed-nav-btn"
-            :disabled="selectedDayOffset <= -6"
-            @click="navigateDay(-1)"
-            aria-label="Previous day"
-          >
-            <ChevronLeft :size="14" />
-          </button>
-          <span class="feed-nav-label">{{ dayLabel(selectedDayOffset) }}</span>
-          <button
-            class="feed-nav-btn"
-            :disabled="selectedDayOffset >= 0"
-            @click="navigateDay(1)"
-            aria-label="Next day"
-          >
-            <ChevronRight :size="14" />
-          </button>
-        </div>
-
-        <div class="feed-modal-entries">
-          <div v-if="filteredEntries.length === 0" class="feed-modal-empty">
-            Keine Einträge für diesen Tag.
-          </div>
-          <div
-            v-for="(entry, idx) in filteredEntries"
-            :key="entry.timestamp + '-' + idx"
-            class="feed-modal-entry"
-          >
-            <span class="feed-time">{{ entry.time }}</span>
-            <span class="feed-bullet">&middot;</span>
-            <span class="feed-agent" :class="'agent-' + entry.agent.toLowerCase()">
-              {{ entry.agent }}
-            </span>
-            <span class="feed-action">{{ entry.action }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<style scoped>
-.feed-modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: grid;
-  place-items: center;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(4px);
-  padding: 20px;
-  animation: feed-overlay-in 0.2s ease;
-}
-@keyframes feed-overlay-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.feed-modal-card {
-  background: #161b22;
-  border: 1px solid rgba(139, 124, 246, 0.15);
-  border-radius: 16px;
-  padding: 24px;
-  width: 100%;
-  max-width: 520px;
-  max-height: 80vh;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
-  animation: feed-card-in 0.25s ease;
-}
-@keyframes feed-card-in {
-  from { opacity: 0; transform: translateY(12px) scale(0.98); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
-}
-
-.feed-modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-.feed-modal-title {
-  margin: 0;
-  font-size: 15px;
-  font-weight: 600;
-  color: #e8eaf0;
-}
-.feed-modal-close-btn {
-  display: grid;
-  place-items: center;
-  width: 28px;
-  height: 28px;
-  border: none;
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 6px;
-  color: #7e8799;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-.feed-modal-close-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: #e8eaf0;
-}
-
-.feed-modal-nav {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-}
-.feed-nav-btn {
-  display: grid;
-  place-items: center;
-  width: 30px;
-  height: 30px;
-  border: 1px solid rgba(139, 124, 246, 0.15);
-  background: rgba(139, 124, 246, 0.08);
-  border-radius: 8px;
-  color: #a78bfa;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-.feed-nav-btn:hover:not(:disabled) {
-  background: rgba(139, 124, 246, 0.16);
-  border-color: rgba(139, 124, 246, 0.3);
-}
-.feed-nav-btn:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-.feed-nav-label {
-  font-size: 12px;
-  font-weight: 600;
-  color: #d1d5db;
-  min-width: 100px;
-  text-align: center;
-}
-
-.feed-modal-entries {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  overflow-y: auto;
-  max-height: 50vh;
-  padding-right: 4px;
-}
-.feed-modal-empty {
-  text-align: center;
-  padding: 24px 0;
-  font-size: 11px;
-  color: #6b7385;
-}
-
-.feed-modal-entry {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 5px 6px;
-  border-radius: 6px;
-  font-size: 9.5px;
-  line-height: 1.3;
-  transition: background 0.15s;
-}
-.feed-modal-entry:hover {
-  background: rgba(255, 255, 255, 0.03);
-}
-
-.feed-time {
-  color: #6b7385;
-  flex-shrink: 0;
-  font-variant-numeric: tabular-nums;
-  width: 32px;
-}
-.feed-bullet {
-  color: #6b7385;
-  flex-shrink: 0;
-}
-.feed-agent {
-  font-weight: 600;
-  flex-shrink: 0;
-}
-.agent-iris {
-  color: #a78bfa;
-}
-.agent-developer {
-  color: #3b82f6;
-}
-.agent-devops {
-  color: #eab308;
-}
-.agent-researcher {
-  color: #22c55e;
-}
-.agent-reviewer {
-  color: #a855f7;
-}
-.feed-action {
-  color: #7e8799;
-  white-space: normal;
-  word-break: break-word;
-}
-</style>
diff --git a/frontend/src/components/dashboard/IrisPanel.vue b/frontend/src/components/dashboard/IrisPanel.vue
deleted file mode 100644
index 2f9b3c5..0000000
--- a/frontend/src/components/dashboard/IrisPanel.vue
+++ /dev/null
@@ -1,323 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { Bot, Sparkles, MessageSquareText, ListTodo, Zap, FileText, Send, Lightbulb } from '@lucide/vue'
-import { useTime } from '../../composables/useTime'
-import { useOperationsStore } from '../../stores/operations'
-
-interface Suggestion {
-  text: string
-}
-
-const { greeting } = useTime()
-const store = useOperationsStore()
-
-const chatInput = ref('')
-
-const meters = computed(() => {
-  const tasks = store.snapshot.tasks
-  return {
-    openTasks: store.snapshot.metrics.queuedTasks,
-    blocked: store.snapshot.metrics.incidents,
-    critical: tasks.filter(t => t.state === 'Blocked').length,
-    active: tasks.filter(t => t.state === 'In progress').length,
-  }
-})
-
-const suggestions = ref<Suggestion[]>([
-  { text: 'Du solltest zuerst das Dungeon-System abschließen.' },
-  { text: 'Die Dokumentation wurde seit 3 Tagen nicht aktualisiert.' },
-  { text: 'Das Projekt OpenClaw benötigt Aufmerksamkeit.' },
-])
-
-function sendChat() {
-  if (!chatInput.value.trim()) return
-  console.log('[Iris] Chat received:', chatInput.value)
-  chatInput.value = ''
-}
-</script>
-
-<template>
-  <aside class="iris-panel">
-    <div class="iris-profile">
-      <div class="iris-avatar">
-        <Bot :size="32" />
-      </div>
-      <div class="iris-name-block">
-        <h2>Iris</h2>
-        <span class="iris-role">Chief of Staff</span>
-      </div>
-    </div>
-
-    <p class="iris-greeting">{{ greeting }} Bao.</p>
-    <p class="iris-status">Du hast heute <strong>4 wichtige Punkte.</strong></p>
-
-    <div class="meters">
-      <div class="meter-item">
-        <span class="meter-value">{{ meters.openTasks }}</span>
-        <span class="meter-label">Offene Aufgaben</span>
-      </div>
-      <div class="meter-item">
-        <span class="meter-value meter-blocked">{{ meters.blocked }}</span>
-        <span class="meter-label">Blockiert</span>
-      </div>
-      <div class="meter-item">
-        <span class="meter-value meter-critical">{{ meters.critical }}</span>
-        <span class="meter-label">Kritisch</span>
-      </div>
-      <div class="meter-item">
-        <span class="meter-value meter-active">{{ meters.active }}</span>
-        <span class="meter-label">Aktiv</span>
-      </div>
-    </div>
-
-    <div class="suggestions">
-      <h3><Sparkles :size="14" /> Vorschläge</h3>
-      <div
-        v-for="(s, idx) in suggestions"
-        :key="idx"
-        class="suggestion-card"
-      >
-        <Lightbulb :size="14" class="bulb" />
-        <span>{{ s.text }}</span>
-      </div>
-    </div>
-
-    <div class="quick-actions">
-      <button class="qa-btn">
-        <MessageSquareText :size="14" /> Chat öffnen
-      </button>
-      <button class="qa-btn">
-        <ListTodo :size="14" /> Tagesplanung
-      </button>
-      <button class="qa-btn">
-        <Zap :size="14" /> Prioritäten setzen
-      </button>
-      <button class="qa-btn">
-        <FileText :size="14" /> Zusammenfassung
-      </button>
-    </div>
-
-    <div class="chat-box">
-      <div class="chat-input-row">
-        <input
-          v-model="chatInput"
-          type="text"
-          placeholder="Frag Iris etwas..."
-          @keyup.enter="sendChat"
-        />
-        <button class="chat-send" @click="sendChat">
-          <Send :size="14" />
-        </button>
-      </div>
-    </div>
-  </aside>
-</template>
-
-<style scoped>
-.iris-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 18px;
-  background: rgba(22, 27, 34, 0.8);
-  border: 1px solid rgba(139, 124, 246, 0.12);
-  border-radius: 16px;
-  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  transition: all 0.2s ease;
-}
-.iris-panel:hover {
-  border-color: rgba(139, 124, 246, 0.18);
-}
-
-.iris-profile {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-.iris-avatar {
-  width: 48px;
-  height: 48px;
-  border-radius: 14px;
-  background: rgba(167, 139, 250, 0.15);
-  color: #a78bfa;
-  display: grid;
-  place-items: center;
-  flex-shrink: 0;
-}
-.iris-name-block h2 {
-  font-size: 18px;
-  font-weight: 700;
-  margin: 0;
-  line-height: 1.2;
-  color: #e8eaf0;
-}
-.iris-role {
-  font-size: 10px;
-  color: #a78bfa;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-}
-.iris-greeting {
-  font-size: 15px;
-  font-weight: 600;
-  margin: 0;
-  color: #e8eaf0;
-}
-.iris-status {
-  font-size: 11px;
-  color: #7e8799;
-  margin: 0;
-}
-.iris-status strong {
-  color: #e8eaf0;
-}
-
-/* Meters */
-.meters {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 6px;
-}
-.meter-item {
-  background: rgba(139, 124, 246, 0.06);
-  border: 1px solid rgba(139, 124, 246, 0.08);
-  border-radius: 10px;
-  padding: 8px;
-  text-align: center;
-  transition: all 0.2s ease;
-}
-.meter-item:hover {
-  border-color: rgba(139, 124, 246, 0.18);
-  background: rgba(139, 124, 246, 0.1);
-}
-.meter-value {
-  display: block;
-  font-size: 20px;
-  font-weight: 700;
-  color: #e8eaf0;
-}
-.meter-blocked { color: #eab308; }
-.meter-critical { color: #ef4444; }
-.meter-active { color: #3b82f6; }
-.meter-label {
-  display: block;
-  font-size: 8px;
-  color: #6b7385;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  margin-top: 2px;
-}
-
-/* Suggestions */
-.suggestions h3 {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 10px;
-  font-weight: 700;
-  color: #a78bfa;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  margin: 0 0 6px;
-}
-.suggestion-card {
-  display: flex;
-  align-items: flex-start;
-  gap: 7px;
-  padding: 7px 8px;
-  margin-bottom: 3px;
-  border-radius: 8px;
-  cursor: default;
-  transition: all 0.2s ease;
-}
-.suggestion-card:hover {
-  background: rgba(139, 124, 246, 0.08);
-}
-.suggestion-card .bulb {
-  color: #eab308;
-  flex-shrink: 0;
-  margin-top: 1px;
-}
-.suggestion-card span {
-  font-size: 10.5px;
-  line-height: 1.4;
-  color: #7e8799;
-}
-
-/* Quick Actions */
-.quick-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.qa-btn {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  width: 100%;
-  padding: 8px 10px;
-  border: 1px solid rgba(139, 124, 246, 0.1);
-  border-radius: 8px;
-  background: rgba(139, 124, 246, 0.04);
-  color: #7e8799;
-  font-size: 10.5px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-.qa-btn:hover {
-  background: rgba(139, 124, 246, 0.12);
-  border-color: rgba(139, 124, 246, 0.2);
-  color: #e8eaf0;
-}
-
-/* Chat Box */
-.chat-box {
-  margin-top: auto;
-}
-.chat-input-row {
-  display: flex;
-  gap: 5px;
-}
-.chat-input-row input {
-  flex: 1;
-  padding: 7px 10px;
-  border: 1px solid rgba(139, 124, 246, 0.12);
-  border-radius: 8px;
-  background: rgba(13, 17, 23, 0.6);
-  color: #e8eaf0;
-  font-size: 10.5px;
-  font-family: inherit;
-  outline: none;
-  transition: border-color 0.2s;
-}
-.chat-input-row input:focus {
-  border-color: #a78bfa;
-}
-.chat-input-row input::placeholder {
-  color: #6b7385;
-}
-.chat-send {
-  display: grid;
-  place-items: center;
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: 8px;
-  background: #a78bfa;
-  color: #fff;
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: opacity 0.2s;
-}
-.chat-send:hover {
-  opacity: 0.85;
-}
-
-@media (max-width: 900px) {
-  .iris-panel {
-    order: 1;
-  }
-}
-</style>
diff --git a/frontend/src/components/dashboard/OperationsFeed.vue b/frontend/src/components/dashboard/OperationsFeed.vue
deleted file mode 100644
index 7713218..0000000
--- a/frontend/src/components/dashboard/OperationsFeed.vue
+++ /dev/null
@@ -1,196 +0,0 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { Activity } from '@lucide/vue'
-import type { FeedEntry } from '../../composables/useDashboardData'
-import FeedDetailModal from './FeedDetailModal.vue'
-
-const props = defineProps<{
-  entries: FeedEntry[]
-}>()
-
-// ── Compact feed (5 items) ──
-const compactEntries = computed(() => props.entries.slice(0, 5))
-
-// ── Feed Detail Modal ──
-const showDetailModal = ref(false)
-
-function openDetailModal() {
-  showDetailModal.value = true
-}
-</script>
-
-<template>
-  <div class="feed-panel">
-    <div class="feed-header">
-      <Activity :size="14" class="feed-icon" />
-      <h2>Operations Feed</h2>
-    </div>
-
-    <div class="feed-list">
-      <TransitionGroup name="feed">
-        <div
-          v-for="(entry, idx) in compactEntries"
-          :key="entry.timestamp + '-' + idx"
-          class="feed-entry"
-        >
-          <span class="feed-time">{{ entry.time }}</span>
-          <span class="feed-bullet">&middot;</span>
-          <span class="feed-agent" :class="'agent-' + entry.agent.toLowerCase()">
-            {{ entry.agent }}
-          </span>
-          <span class="feed-action">{{ entry.action }}</span>
-        </div>
-      </TransitionGroup>
-
-      <div v-if="entries.length === 0" class="feed-empty">
-        <span>No operations recorded yet.</span>
-      </div>
-
-      <button v-if="entries.length > 5" class="feed-more-btn" @click="openDetailModal">
-        Mehr anzeigen
-      </button>
-    </div>
-
-    <FeedDetailModal
-      :entries="entries"
-      :model-value="showDetailModal"
-      @update:model-value="showDetailModal = $event"
-    />
-  </div>
-</template>
-
-<style scoped>
-.feed-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 14px;
-  background: rgba(22, 27, 34, 0.65);
-  border: 1px solid rgba(139, 124, 246, 0.08);
-  border-radius: 14px;
-  transition: border-color 0.2s ease;
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
-}
-.feed-panel:hover {
-  border-color: rgba(139, 124, 246, 0.15);
-}
-
-.feed-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.feed-icon {
-  color: #a78bfa;
-}
-.feed-header h2 {
-  margin: 0;
-  font-size: 11px;
-  font-weight: 600;
-  color: #e8eaf0;
-}
-
-.feed-list {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  position: relative;
-}
-
-.feed-entry {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 5px 6px;
-  border-radius: 6px;
-  font-size: 9.5px;
-  line-height: 1.3;
-  transition: background 0.15s;
-}
-.feed-entry:hover {
-  background: rgba(255, 255, 255, 0.03);
-}
-
-.feed-time {
-  color: #6b7385;
-  flex-shrink: 0;
-  font-variant-numeric: tabular-nums;
-  width: 32px;
-}
-.feed-bullet {
-  color: #6b7385;
-  flex-shrink: 0;
-}
-.feed-agent {
-  font-weight: 600;
-  flex-shrink: 0;
-}
-.agent-iris {
-  color: #a78bfa;
-}
-.agent-developer {
-  color: #3b82f6;
-}
-.agent-devops {
-  color: #eab308;
-}
-.agent-researcher {
-  color: #22c55e;
-}
-.agent-reviewer {
-  color: #a855f7;
-}
-.feed-action {
-  color: #7e8799;
-  white-space: normal;
-  word-break: break-word;
-}
-
-.feed-empty {
-  text-align: center;
-  padding: 12px 0;
-  font-size: 10px;
-  color: #6b7385;
-}
-
-.feed-more-btn {
-  display: block;
-  width: 100%;
-  padding: 8px;
-  margin-top: 4px;
-  background: rgba(139, 124, 246, 0.08);
-  border: 1px solid rgba(139, 124, 246, 0.12);
-  border-radius: 8px;
-  color: #a78bfa;
-  font-size: 9.5px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s;
-  text-align: center;
-}
-.feed-more-btn:hover {
-  background: rgba(139, 124, 246, 0.14);
-  border-color: rgba(139, 124, 246, 0.2);
-}
-
-/* TransitionGroup */
-.feed-enter-active {
-  transition: all 0.3s ease;
-}
-.feed-leave-active {
-  transition: all 0.3s ease;
-  position: absolute;
-}
-.feed-enter-from {
-  opacity: 0;
-  transform: translateX(-10px);
-}
-.feed-leave-to {
-  opacity: 0;
-  transform: translateX(10px);
-}
-.feed-move {
-  transition: transform 0.3s ease;
-}
-</style>
diff --git a/frontend/src/components/dashboard/QueuePanel.vue b/frontend/src/components/dashboard/QueuePanel.vue
deleted file mode 100644
index 1b2941d..0000000
--- a/frontend/src/components/dashboard/QueuePanel.vue
+++ /dev/null
@@ -1,293 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  ListTodo,
-  ChevronUp,
-  ChevronDown,
-  ArrowUp,
-  ArrowDown,
-  Trash2,
-  Zap,
-  RefreshCw,
-} from '@lucide/vue'
-import type { QueueItem } from '../../composables/useDashboardData'
-import Button from '@/components/ui/button/Button.vue'
-import Badge from '@/components/ui/Badge.vue'
-
-const props = defineProps<{
-  items: QueueItem[]
-}>()
-
-const emit = defineEmits<{
-  remove: [id: string]
-  moveUp: [id: string]
-  moveDown: [id: string]
-  changePriority: [id: string, priority: QueueItem['priority']]
-  executeNow: [id: string]
-}>()
-
-const expanded = ref(true)
-
-const priorityColor: Record<string, string> = {
-  high: '#ef4444',
-  medium: '#eab308',
-  low: '#6b7385',
-}
-
-const dragIndex = ref<number | null>(null)
-const dragOverIndex = ref<number | null>(null)
-
-function onDragStart(idx: number): void {
-  dragIndex.value = idx
-}
-
-function onDragOver(e: DragEvent, idx: number): void {
-  e.preventDefault()
-  dragOverIndex.value = idx
-}
-
-function onDrop(): void {
-  if (dragIndex.value !== null && dragOverIndex.value !== null && dragIndex.value !== dragOverIndex.value) {
-    const id = props.items[dragIndex.value]?.id
-    if (id) {
-      const targetId = props.items[dragOverIndex.value]?.id
-      if (targetId) {
-        if (dragIndex.value < dragOverIndex.value) {
-          for (let i = dragIndex.value; i < dragOverIndex.value; i++) {
-            emit('moveDown', props.items[i]!.id)
-          }
-        } else {
-          for (let i = dragIndex.value; i > dragOverIndex.value; i--) {
-            emit('moveUp', props.items[i]!.id)
-          }
-        }
-      }
-    }
-  }
-  dragIndex.value = null
-  dragOverIndex.value = null
-}
-
-function onDragEnd(): void {
-  dragIndex.value = null
-  dragOverIndex.value = null
-}
-</script>
-
-<template>
-  <div class="queue-panel">
-    <div class="queue-header" @click="expanded = !expanded" role="button" tabindex="0" :aria-expanded="expanded" @keyup.enter="expanded = !expanded">
-      <div class="queue-header-left">
-        <ListTodo :size="14" class="text-[#a78bfa]" />
-        <h2>Chat Queue</h2>
-        <Badge variant="outline" class="text-[10px] font-bold text-[#a78bfa] bg-[rgba(167,139,250,0.1)] border-0 rounded-full px-2">
-          {{ items.length }}
-        </Badge>
-      </div>
-      <Button variant="ghost" size="icon" class="h-6 w-6" :aria-label="expanded ? 'Collapse' : 'Expand'">
-        <ChevronUp v-if="expanded" :size="14" />
-        <ChevronDown v-else :size="14" />
-      </Button>
-    </div>
-
-    <Transition name="queue-expand">
-      <div v-if="expanded" class="queue-list">
-        <div
-          v-for="(item, idx) in items"
-          :key="item.id"
-          class="queue-item"
-          :class="{
-            'drag-source': dragIndex === idx,
-            'drag-over': dragOverIndex === idx && dragIndex !== idx,
-          }"
-          draggable="true"
-          @dragstart="onDragStart(idx)"
-          @dragover="onDragOver($event, idx)"
-          @drop="onDrop"
-          @dragend="onDragEnd"
-        >
-          <div class="queue-item-body">
-            <div class="queue-item-head">
-              <span class="queue-source-badge" :class="item.source">{{ item.source }}</span>
-              <Badge
-                variant="outline"
-                class="text-[7px] font-bold uppercase tracking-wider py-0 px-1.5 border"
-                :style="{
-                  color: priorityColor[item.priority],
-                  borderColor: `${priorityColor[item.priority]}30`,
-                  background: `${priorityColor[item.priority]}10`,
-                }"
-              >
-                {{ item.priority }}
-              </Badge>
-              <span class="queue-wait">{{ item.waitTime }}</span>
-            </div>
-            <p class="queue-text">{{ item.text }}</p>
-          </div>
-
-          <div class="queue-actions">
-            <Button variant="ghost" size="icon" class="h-5 w-5 text-[#6b7385] hover:text-[#e8eaf0]" title="Cycle priority" @click.stop="emit('changePriority', item.id, item.priority === 'high' ? 'medium' : item.priority === 'medium' ? 'low' : 'high')">
-              <RefreshCw :size="12" />
-            </Button>
-            <Button variant="ghost" size="icon" class="h-5 w-5 text-[#6b7385] hover:text-[#e8eaf0]" title="Move up" :disabled="idx === 0" @click.stop="emit('moveUp', item.id)">
-              <ArrowUp :size="12" />
-            </Button>
-            <Button variant="ghost" size="icon" class="h-5 w-5 text-[#6b7385] hover:text-[#e8eaf0]" title="Move down" :disabled="idx === items.length - 1" @click.stop="emit('moveDown', item.id)">
-              <ArrowDown :size="12" />
-            </Button>
-            <Button variant="ghost" size="icon" class="h-5 w-5 text-[#6b7385] hover:text-[#ef4444] hover:bg-[rgba(239,68,68,0.1)]" title="Remove" @click.stop="emit('remove', item.id)">
-              <Trash2 :size="12" />
-            </Button>
-          </div>
-        </div>
-
-        <div v-if="items.length === 0" class="queue-empty">
-          <p>Queue is empty</p>
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<style scoped>
-.queue-panel {
-  display: flex;
-  flex-direction: column;
-  background: rgba(22, 27, 34, 0.75);
-  border: 1px solid rgba(139, 124, 246, 0.12);
-  border-radius: 16px;
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
-  transition: border-color 0.2s ease;
-}
-.queue-panel:hover {
-  border-color: rgba(139, 124, 246, 0.18);
-}
-
-.queue-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 14px;
-  cursor: pointer;
-  user-select: none;
-}
-.queue-header-left {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-}
-.queue-header h2 {
-  margin: 0;
-  font-size: 12px;
-  font-weight: 600;
-  color: #e8eaf0;
-}
-
-.queue-list {
-  display: flex;
-  flex-direction: column;
-  padding: 0 10px 10px;
-  gap: 4px;
-}
-
-.queue-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  padding: 8px 10px;
-  border-radius: 8px;
-  transition: background 0.15s, opacity 0.15s;
-  cursor: grab;
-}
-.queue-item:hover {
-  background: rgba(255, 255, 255, 0.03);
-}
-.queue-item:active {
-  cursor: grabbing;
-}
-.drag-source {
-  opacity: 0.4;
-}
-.drag-over {
-  background: rgba(167, 139, 250, 0.08);
-}
-
-.queue-item-body {
-  flex: 1;
-  min-width: 0;
-}
-.queue-item-head {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 3px;
-}
-.queue-wait {
-  font-size: 8px;
-  color: #6b7385;
-  font-variant-numeric: tabular-nums;
-}
-.queue-text {
-  margin: 0;
-  font-size: 9.5px;
-  color: #7e8799;
-  line-height: 1.3;
-}
-
-/* Actions */
-.queue-actions {
-  display: flex;
-  gap: 2px;
-  flex-shrink: 0;
-  opacity: 0;
-  transition: opacity 0.15s;
-  margin-top: 2px;
-}
-.queue-item:hover .queue-actions {
-  opacity: 1;
-}
-
-.queue-empty {
-  text-align: center;
-  padding: 16px 0;
-}
-.queue-empty p {
-  margin: 0;
-  font-size: 10px;
-  color: #6b7385;
-}
-
-/* Source badge */
-.queue-source-badge {
-  font-size: 7px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  padding: 0 4px;
-  border-radius: 3px;
-  line-height: 14px;
-}
-.queue-source-badge.cron {
-  color: #22c55e;
-  background: rgba(34, 197, 94, 0.1);
-  border: 1px solid rgba(34, 197, 94, 0.2);
-}
-.queue-source-badge.task {
-  color: #a78bfa;
-  background: rgba(167, 139, 250, 0.1);
-  border: 1px solid rgba(167, 139, 250, 0.2);
-}
-
-/* Transition */
-.queue-expand-enter-active,
-.queue-expand-leave-active {
-  transition: all 0.2s ease;
-}
-.queue-expand-enter-from,
-.queue-expand-leave-to {
-  opacity: 0;
-  transform: translateY(-8px);
-}
-</style>
diff --git a/frontend/src/components/dashboard/RecentlyFinished.vue b/frontend/src/components/dashboard/RecentlyFinished.vue
deleted file mode 100644
index ca43ab1..0000000
--- a/frontend/src/components/dashboard/RecentlyFinished.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const recentlyFinished = ref([
-  'Docker Image gebaut',
-  'Memory Compression',
-  'Enemy AI verbessert',
-  'Daily Backup',
-  'TeamView deployt',
-  'Config-Editor live',
-])
-
-function onChipClick(item: string) {
-  console.log('[Dashboard] Recently finished:', item)
-}
-</script>
-
-<template>
-  <div class="finished-section">
-    <h3>Recently Finished</h3>
-    <div class="finished-scroll">
-      <span
-        v-for="(item, idx) in recentlyFinished"
-        :key="idx"
-        class="finished-chip"
-        role="button"
-        tabindex="0"
-        @click="onChipClick(item)"
-        @keyup.enter="onChipClick(item)"
-      >
-        {{ item }}
-      </span>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.finished-section {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.finished-section h3 {
-  font-size: 10px;
-  font-weight: 700;
-  color: #7e8799;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  margin: 0;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-.finished-scroll {
-  display: flex;
-  gap: 6px;
-  overflow-x: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  padding-bottom: 2px;
-}
-.finished-scroll::-webkit-scrollbar {
-  display: none;
-}
-.finished-chip {
-  flex-shrink: 0;
-  padding: 5px 12px;
-  border: 1px solid rgba(139, 124, 246, 0.1);
-  border-radius: 20px;
-  background: rgba(139, 124, 246, 0.06);
-  color: #7e8799;
-  font-size: 9.5px;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: all 0.2s ease;
-}
-.finished-chip:hover {
-  background: rgba(139, 124, 246, 0.12);
-  border-color: rgba(139, 124, 246, 0.2);
-  color: #e8eaf0;
-}
-.finished-chip:focus-visible {
-  outline: 2px solid #a78bfa;
-  outline-offset: 2px;
-}
-
-@media (max-width: 900px) {
-  .finished-section {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
-</style>
diff --git a/frontend/src/components/dashboard/TaskCard.vue b/frontend/src/components/dashboard/TaskCard.vue
deleted file mode 100644
index 700cf95..0000000
--- a/frontend/src/components/dashboard/TaskCard.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { Plus, Circle, ChevronRight } from '@lucide/vue'
-import type { OpenTask } from '../../composables/useDashboardData'
-import Button from '@/components/ui/button/Button.vue'
-import Badge from '@/components/ui/Badge.vue'
-
-defineProps<{
-  tasks: OpenTask[]
-}>()
-
-const emit = defineEmits<{
-  newTask: []
-  'go-board': []
-}>()
-
-const expandedId = ref<string | null>(null)
-
-function toggleExpand(id: string) {
-  expandedId.value = expandedId.value === id ? null : id
-}
-</script>
-
-<template>
-  <div class="task-card-panel">
-    <div class="task-header">
-      <h2 class="task-title">Offene Aufgaben</h2>
-      <Button variant="outline" size="sm" class="h-7 text-[9px] gap-1 border-[rgba(139,124,246,0.2)] bg-[rgba(139,124,246,0.12)] text-[#a78bfa] hover:bg-[rgba(139,124,246,0.2)]" @click="emit('newTask')">
-        <Plus :size="12" />
-        <span>New Task</span>
-      </Button>
-    </div>
-
-    <div class="task-list">
-      <div v-if="tasks.length === 0" class="task-empty">
-        Keine offenen Aufgaben. Erstelle eine mit + New Task.
-      </div>
-
-      <TransitionGroup name="task">
-        <div
-          v-for="task in tasks"
-          :key="task.id"
-          class="task-item"
-          :class="{ expanded: expandedId === task.id }"
-          @click="toggleExpand(task.id)"
-        >
-          <div class="task-main">
-            <Circle
-              :size="8"
-              class="task-source-dot"
-              :class="task.source === 'iris' ? 'dot-iris' : 'dot-bao'"
-              fill="currentColor"
-            />
-            <div class="task-content">
-              <div class="task-title-row">
-                <span class="task-name">{{ task.title }}</span>
-                <span class="task-time">{{ task.createdAt }}</span>
-              </div>
-              <Badge
-                variant="outline"
-                :class="task.source === 'iris'
-                  ? 'bg-[rgba(167,139,250,0.15)] text-[#a78bfa] border-0 text-[8px] py-0 px-1.5'
-                  : 'bg-[rgba(59,130,246,0.15)] text-[#3b82f6] border-0 text-[8px] py-0 px-1.5'"
-              >
-                {{ task.source === 'iris' ? 'Iris' : 'Bao' }}
-              </Badge>
-            </div>
-          </div>
-          <div v-if="expandedId === task.id" class="task-detail">
-            {{ task.detail }}
-          </div>
-        </div>
-      </TransitionGroup>
-    </div>
-
-    <Button variant="ghost" class="w-full mt-3 h-9 gap-1.5 text-[10px] border border-[rgba(139,124,246,0.15)] bg-[rgba(139,124,246,0.08)] text-[#a78bfa] hover:bg-[rgba(139,124,246,0.15)]" @click="emit('go-board')">
-      <span>Zum Task Board</span>
-      <ChevronRight :size="14" />
-    </Button>
-  </div>
-</template>
-
-<style scoped>
-.task-card-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 14px;
-  background: rgba(22, 27, 34, 0.65);
-  border: 1px solid rgba(139, 124, 246, 0.08);
-  border-radius: 14px;
-  transition: border-color 0.2s ease;
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
-}
-.task-card-panel:hover {
-  border-color: rgba(139, 124, 246, 0.15);
-}
-
-.task-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-.task-title {
-  margin: 0;
-  font-size: 11px;
-  font-weight: 600;
-  color: #e8eaf0;
-}
-
-.task-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.task-item {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 8px 10px;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background 0.15s;
-  border: 1px solid transparent;
-}
-.task-item:hover {
-  background: rgba(255, 255, 255, 0.03);
-  border-color: rgba(139, 124, 246, 0.08);
-}
-.task-item.expanded {
-  background: rgba(139, 124, 246, 0.04);
-  border-color: rgba(139, 124, 246, 0.1);
-}
-
-.task-main {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-.task-source-dot {
-  margin-top: 4px;
-  flex-shrink: 0;
-}
-.dot-iris {
-  color: #a78bfa;
-}
-.dot-bao {
-  color: #3b82f6;
-}
-
-.task-content {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-.task-title-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-.task-name {
-  font-size: 10px;
-  font-weight: 500;
-  color: #d1d5db;
-  line-height: 1.35;
-}
-.task-time {
-  font-size: 8.5px;
-  color: #6b7385;
-  flex-shrink: 0;
-  font-variant-numeric: tabular-nums;
-}
-
-.task-detail {
-  padding: 6px 10px;
-  margin: 0 0 2px 16px;
-  font-size: 9.5px;
-  color: #7e8799;
-  line-height: 1.45;
-  background: rgba(0, 0, 0, 0.15);
-  border-radius: 6px;
-  border-left: 2px solid rgba(139, 124, 246, 0.2);
-}
-
-.task-empty {
-  text-align: center;
-  padding: 16px 8px;
-  font-size: 10px;
-  color: #6b7385;
-  line-height: 1.5;
-}
-
-/* TransitionGroup */
-.task-enter-active {
-  transition: all 0.3s ease;
-}
-.task-leave-active {
-  transition: all 0.3s ease;
-  position: absolute;
-}
-.task-enter-from {
-  opacity: 0;
-  transform: translateY(-6px);
-}
-.task-leave-to {
-  opacity: 0;
-  transform: translateY(6px);
-}
-.task-move {
-  transition: transform 0.3s ease;
-}
-</style>
diff --git a/frontend/src/components/dashboard/TeamNetwork.vue b/frontend/src/components/dashboard/TeamNetwork.vue
deleted file mode 100644
index 6cd3bdd..0000000
--- a/frontend/src/components/dashboard/TeamNetwork.vue
+++ /dev/null
@@ -1,541 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, toRef, onMounted, onUnmounted } from 'vue'
-import { Bot, Code2, Server, Shield, Search, Terminal } from '@lucide/vue'
-import type { AgentNodeData } from '../../composables/useDashboardData'
-import { useTeamNetworkSvg } from '../../composables/useTeamNetworkSvg'
-
-const props = defineProps<{
-  agents: AgentNodeData[]
-  heroId?: string
-  activeAgents?: string[]
-}>()
-
-const emit = defineEmits<{
-  select: [id: string]
-}>()
-
-// ── Network ref ──
-const networkRef = ref<HTMLDivElement | null>(null)
-
-// ── Computed data ──
-const heroId = computed(() => props.heroId ?? props.agents[0]?.id ?? '')
-
-function isActive(id: string): boolean {
-  return props.activeAgents?.includes(id) ?? false
-}
-
-// ── SVG composable ──
-const {
-  svgWidth,
-  svgHeight,
-  childAgents,
-  connectionPaths,
-  storePathRef,
-  storePulseRef,
-  storePulseRef2,
-} = useTeamNetworkSvg(networkRef, toRef(props, 'agents'), heroId, isActive)
-
-// ── Icon resolver ──
-function resolveIcon(iconName: string) {
-  switch (iconName) {
-    case 'bot': return Bot
-    case 'code': return Code2
-    case 'server': return Server
-    case 'shield': return Shield
-    case 'search': return Search
-    case 'terminal': return Terminal
-    default: return Bot
-  }
-}
-
-// ── Runtime formatter ──
-function formatRuntime(seconds: number): string {
-  const m = Math.floor(seconds / 60)
-  const s = seconds % 60
-  return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
-}
-
-// ── Model formatter ──
-function formatModel(model: string): string {
-  const parts = model.split('/')
-  const name = parts[parts.length - 1]
-  return name.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
-}
-
-// ── Mobile media query ──
-const isMobile = ref(false)
-let mq: MediaQueryList | null = null
-
-function onMqChange(e: MediaQueryListEvent) {
-  isMobile.value = e.matches
-}
-
-onMounted(() => {
-  mq = window.matchMedia('(max-width: 600px)')
-  isMobile.value = mq.matches
-  mq.addEventListener('change', onMqChange)
-})
-
-onUnmounted(() => {
-  if (mq) {
-    mq.removeEventListener('change', onMqChange)
-  }
-})
-
-function visibleTags(tags: string[]) {
-  if (!isMobile.value || tags.length <= 4) {
-    return { shown: tags, overflow: 0 }
-  }
-  return { shown: tags.slice(0, 4), overflow: tags.length - 4 }
-}
-
-// ── Hero computed ──
-const hero = computed(() => props.agents.find(a => a.id === heroId.value) ?? props.agents[0])
-</script>
-
-<template>
-  <div ref="networkRef" class="ai-team-network">
-    <!-- SVG Connection Layer -->
-    <svg
-      v-if="svgWidth > 0 && svgHeight > 0"
-      class="network-svg"
-      :width="svgWidth"
-      :height="svgHeight"
-      :viewBox="`0 0 ${svgWidth} ${svgHeight}`"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <defs>
-        <filter
-          v-for="agent in childAgents"
-          :key="`glow-${agent.id}`"
-          :id="`glow-${agent.id}`"
-          x="-30%" y="-30%" width="160%" height="160%"
-        >
-          <feGaussianBlur stdDeviation="4" result="blur" />
-          <feMerge>
-            <feMergeNode in="blur" />
-            <feMergeNode in="blur" />
-            <feMergeNode in="SourceGraphic" />
-          </feMerge>
-        </filter>
-      </defs>
-
-      <!-- Connection lines for each agent -->
-      <template v-for="agent in childAgents" :key="agent.id">
-        <!-- Base line -->
-        <path
-          v-if="connectionPaths[agent.id]"
-          :ref="storePathRef(agent.id)"
-          :d="connectionPaths[agent.id]!.d"
-          :stroke="agent.color"
-          :stroke-width="isActive(agent.id) ? 2.5 : 1.5"
-          fill="none"
-          :opacity="isActive(agent.id) ? 0.7 : 0.25"
-          stroke-linecap="round"
-        />
-
-        <!-- Glow line for active agent -->
-        <path
-          v-if="isActive(agent.id) && connectionPaths[agent.id]"
-          :d="connectionPaths[agent.id]!.d"
-          :stroke="agent.color"
-          stroke-width="4"
-          fill="none"
-          stroke-linecap="round"
-          :filter="`url(#glow-${agent.id})`"
-          opacity="0.5"
-        />
-
-        <!-- Pulse line 1 (white dashed segment moving along) -->
-        <path
-          v-if="connectionPaths[agent.id]"
-          :ref="storePulseRef(agent.id)"
-          :d="connectionPaths[agent.id]!.d"
-          stroke="white"
-          stroke-width="3"
-          fill="none"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          :opacity="isActive(agent.id) ? 1 : 0.4"
-        />
-
-        <!-- Pulse line 2 (offset by half cycle) -->
-        <path
-          v-if="connectionPaths[agent.id]"
-          :ref="storePulseRef2(agent.id)"
-          :d="connectionPaths[agent.id]!.d"
-          stroke="white"
-          stroke-width="3"
-          fill="none"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          :opacity="isActive(agent.id) ? 0.8 : 0.3"
-        />
-      </template>
-    </svg>
-
-    <!-- Cards Layer (above SVG) -->
-    <div class="cards-layer">
-      <!-- Hero: Iris centered top -->
-      <div class="hero-slot" :data-agent-id="hero.id">
-        <article
-          class="agent-card hero-card"
-          :style="{
-            '--card-color': hero.color,
-            ...(isActive(hero.id) ? {
-              boxShadow: `0 0 20px ${hero.color}44`,
-              borderColor: hero.color
-            } : {})
-          }"
-          @click="emit('select', hero.id)"
-        >
-          <div class="card-main">
-            <div class="card-icon-wrap" :style="{ background: `${hero.color}18`, color: hero.color }">
-              <component :is="resolveIcon(hero.icon)" :size="20" />
-            </div>
-            <div class="card-body">
-              <div class="card-name-row">
-                <h3 class="card-name">{{ hero.name }}</h3>
-                <span class="card-role-tag" :style="{ background: `${hero.color}18`, color: hero.color, borderColor: `${hero.color}30` }">{{ hero.role }}</span>
-              </div>
-              <p class="card-desc">{{ hero.description }}</p>
-              <div v-if="hero.currentTask" class="task-row">
-                <span class="node-task">
-                  <span class="node-task-dot" :style="{ color: hero.color }">●</span>
-                  {{ hero.currentTask }}
-                </span>
-                <span class="node-runtime">{{ formatRuntime(hero.runtimeSeconds) }}</span>
-                  <span v-if="hero.model" class="node-model">{{ formatModel(hero.model) }}</span>
-              </div>
-              <div v-else class="idle-row">
-                <span class="idle-badge">Idle</span>
-              </div>
-              <div class="card-tags">
-                <template v-for="(tag, idx) in visibleTags(hero.tags).shown" :key="tag">
-                  <span class="card-tag" :style="{ background: `${hero.color}18`, color: hero.color }">{{ tag }}</span>
-                </template>
-                <span v-if="visibleTags(hero.tags).overflow > 0" class="card-tag tag-overflow" :style="{ background: `${hero.color}18`, color: hero.color }">+{{ visibleTags(hero.tags).overflow }}</span>
-              </div>
-            </div>
-          </div>
-          <div class="card-arrow">
-            <span class="arrow-icon">&rarr;</span>
-          </div>
-        </article>
-      </div>
-
-      <!-- Agent Grid: 2 columns x 2 rows -->
-      <div class="agent-grid">
-        <div
-          v-for="agent in childAgents"
-          :key="agent.id"
-          :data-agent-id="agent.id"
-          class="agent-slot"
-        >
-          <article
-            class="agent-card"
-            :style="{
-              '--card-color': agent.color,
-              ...(isActive(agent.id) ? {
-                boxShadow: `0 0 14px ${agent.color}55, 0 0 30px ${agent.color}22`,
-                borderColor: agent.color
-              } : {})
-            }"
-            @click="emit('select', agent.id)"
-          >
-            <div class="card-main">
-              <div class="card-icon-wrap" :style="{ background: `${agent.color}18`, color: agent.color }">
-                <component :is="resolveIcon(agent.icon)" :size="18" />
-              </div>
-              <div class="card-body">
-                <div class="card-name-row">
-                  <h3 class="card-name">{{ agent.name }}</h3>
-                  <span class="card-role-tag" :style="{ background: `${agent.color}18`, color: agent.color, borderColor: `${agent.color}30` }">{{ agent.role }}</span>
-                </div>
-                <p class="card-desc">{{ agent.description }}</p>
-                <div v-if="agent.currentTask" class="task-row">
-                  <span class="node-task">
-                    <span class="node-task-dot" :style="{ color: agent.color }">●</span>
-                    {{ agent.currentTask }}
-                  </span>
-                  <span class="node-runtime">{{ formatRuntime(agent.runtimeSeconds) }}</span>
-                  <span v-if="agent.model" class="node-model">{{ formatModel(agent.model) }}</span>
-                </div>
-                <div v-else class="idle-row">
-                  <span class="idle-badge">Idle</span>
-                </div>
-                <div class="card-tags">
-                  <template v-for="(tag, idx) in visibleTags(agent.tags).shown" :key="tag">
-                    <span class="card-tag" :style="{ background: `${agent.color}18`, color: agent.color }">{{ tag }}</span>
-                  </template>
-                  <span v-if="visibleTags(agent.tags).overflow > 0" class="card-tag tag-overflow" :style="{ background: `${agent.color}18`, color: agent.color }">+{{ visibleTags(agent.tags).overflow }}</span>
-                </div>
-              </div>
-            </div>
-            <div class="card-arrow">
-              <span class="arrow-icon">&rarr;</span>
-            </div>
-          </article>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.ai-team-network {
-  position: relative;
-  width: 100%;
-  background: transparent;
-}
-
-.network-svg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 0;
-  pointer-events: none;
-  overflow: visible;
-}
-
-.cards-layer {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 64px;
-}
-
-.hero-slot {
-  width: 100%;
-  max-width: 520px;
-  transition: border-color 0.3s, box-shadow 0.3s;
-}
-
-.agent-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-  width: 100%;
-  max-width: 820px;
-}
-
-.agent-slot {
-  width: 100%;
-  transition: border-color 0.3s, box-shadow 0.3s;
-}
-
-/* ── Agent Card ── */
-.agent-card {
-  background: rgba(18, 22, 30, 0.45);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  border-radius: 12px;
-  padding: 18px;
-  cursor: pointer;
-  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
-  overflow: hidden;
-  position: relative;
-}
-.agent-card:hover {
-  background: rgba(18, 22, 30, 0.65);
-  border-color: var(--card-color, #8b7cf6);
-  box-shadow: 0 0 16px color-mix(in srgb, var(--card-color, #8b7cf6) 10%, transparent);
-}
-.hero-card {
-  background: rgba(18, 22, 30, 0.45);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  box-shadow: 0 0 20px rgba(139, 124, 246, 0.06);
-}
-.hero-card:hover {
-  background: rgba(18, 22, 30, 0.65);
-  border-color: #8b7cf6;
-  box-shadow: 0 0 24px rgba(139, 124, 246, 0.12);
-}
-.card-main {
-  display: flex;
-  gap: 14px;
-  align-items: flex-start;
-}
-.card-icon-wrap {
-  width: 42px;
-  height: 42px;
-  display: grid;
-  place-items: center;
-  border-radius: 10px;
-  flex-shrink: 0;
-}
-.card-body {
-  flex: 1;
-  min-width: 0;
-}
-.card-name-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 5px;
-  flex-wrap: wrap;
-}
-.card-name {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 600;
-  color: #e8eaf0;
-}
-.card-role-tag {
-  display: inline-block;
-  font-size: 8.5px;
-  font-weight: 600;
-  padding: 2px 8px;
-  border-radius: 5px;
-  border: 1px solid transparent;
-  white-space: nowrap;
-}
-.card-desc {
-  font-size: 10.5px;
-  color: #7e8799;
-  line-height: 1.5;
-  margin: 0 0 8px;
-}
-
-/* ── Task + Runtime Row ── */
-.task-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-.node-task {
-  display: inline-flex;
-  align-items: center;
-  font-size: 10px;
-  color: #9ea5b3;
-  line-height: 1.4;
-  flex: 1;
-  min-width: 0;
-}
-.node-task-dot {
-  display: inline-block;
-  margin-right: 4px;
-  font-size: 8px;
-  vertical-align: middle;
-}
-.node-runtime {
-  font-size: 9px;
-  color: #6b7385;
-  font-variant-numeric: tabular-nums;
-  flex-shrink: 0;
-}
-.node-model {
-  font-size: 8.5px;
-  color: #6b7385;
-  font-weight: 500;
-  flex-shrink: 0;
-  margin-left: 6px;
-}
-
-/* ── Idle Row ── */
-.idle-row {
-  display: flex;
-  align-items: center;
-  margin-bottom: 8px;
-}
-.idle-badge {
-  font-size: 9px;
-  color: #6b7385;
-  padding: 2px 8px;
-  border-radius: 4px;
-  background: rgba(107, 115, 133, 0.15);
-}
-
-/* ── Tags ── */
-.card-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-.card-tag {
-  display: inline-block;
-  font-size: 9px;
-  font-weight: 600;
-  padding: 2px 8px;
-  border-radius: 5px;
-  letter-spacing: 0.02em;
-}
-.tag-overflow {
-  opacity: 0.7;
-}
-
-/* ── Hover Arrow ── */
-.card-arrow {
-  position: absolute;
-  right: 12px;
-  bottom: 12px;
-  color: #6b7385;
-  opacity: 0;
-  transform: translateX(-6px);
-  transition: opacity 0.2s ease, transform 0.2s ease;
-}
-.agent-card:hover .card-arrow {
-  opacity: 1;
-  transform: translateX(0);
-}
-.arrow-icon {
-  font-size: 14px;
-  line-height: 1;
-  display: block;
-}
-
-/* ── Tablet ── */
-@media (max-width: 900px) {
-  .agent-grid {
-    max-width: 100%;
-    gap: 12px;
-  }
-  .hero-slot {
-    max-width: 100%;
-  }
-  .card-name {
-    font-size: 13px;
-  }
-  .card-desc {
-    font-size: 9.5px;
-  }
-}
-
-/* ── Mobile ── */
-@media (max-width: 600px) {
-  .agent-grid {
-    grid-template-columns: 1fr;
-    gap: 10px;
-  }
-  .agent-card {
-    padding: 12px;
-  }
-  .card-icon-wrap {
-    width: 34px;
-    height: 34px;
-  }
-  .card-name {
-    font-size: 12px;
-  }
-  .card-role-tag {
-    font-size: 7.5px;
-  }
-  .card-desc {
-    font-size: 9px;
-  }
-  .card-tag {
-    font-size: 8px;
-    padding: 1px 6px;
-  }
-  .cards-layer {
-    gap: 24px;
-  }
-}
-</style>
diff --git a/frontend/src/components/layout/Sidebar.vue b/frontend/src/components/layout/Sidebar.vue
index 7ae541c..0e8f7de 100644
--- a/frontend/src/components/layout/Sidebar.vue
+++ b/frontend/src/components/layout/Sidebar.vue
@@ -2,11 +2,16 @@
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '../../stores/auth'
+import { useAgentStore } from '../../stores/agents'
+import { useTaskStore } from '../../stores/tasks'
 import { navigation, icons } from '../../composables/icons'
+import type { NavGroupDef } from '../../composables/icons'
 import NavGroup from './NavGroup.vue'
 
 const auth = useAuthStore()
 const router = useRouter()
+const agentStore = useAgentStore()
+const taskStore = useTaskStore()
 
 const ownerInitials = computed(() =>
   auth.user?.displayName?.split(' ').map(p => p[0]).join('').slice(0, 2).toUpperCase()
@@ -17,6 +22,44 @@ function logout() {
   auth.logout()
   router.replace('/login')
 }
+
+/**
+ * Dynamische Nav-Item-Counts aus den Stores.
+ * Überschreibt die hartcodierten `count`-Werte im navigation-Array.
+ */
+const dynamicNavigation = computed<NavGroupDef[]>(() => {
+  // Deep-clone: Jede Gruppe und jedes Item neu erstellen
+  return navigation.map(group => ({
+    ...group,
+    items: group.items.map(item => {
+      let dynamicCount: string | undefined
+
+      switch (item.label) {
+        case 'Agenten':
+        case 'Hosts · OpenClaw':
+          dynamicCount = String(agentStore.agentList.length)
+          break
+        case 'Task Board':
+          dynamicCount = String(taskStore.taskList.length)
+          break
+        case 'Kosten & Tokens':
+          dynamicCount = agentStore.todayCost
+          break
+        case 'Docs & .md':
+          dynamicCount = '0'
+          break
+        case 'Incidents':
+          dynamicCount = '0'
+          break
+      }
+
+      return {
+        ...item,
+        count: dynamicCount ?? item.count,
+      }
+    }),
+  }))
+})
 </script>
 
 <template>
@@ -33,7 +76,7 @@ function logout() {
     <!-- Navigation -->
     <nav class="nav">
       <NavGroup
-        v-for="(group, idx) in navigation"
+        v-for="(group, idx) in dynamicNavigation"
         :key="idx"
         :label="group.group"
         :items="group.items"
diff --git a/frontend/src/composables/icons.ts b/frontend/src/composables/icons.ts
index f0b08e4..3779b9e 100644
--- a/frontend/src/composables/icons.ts
+++ b/frontend/src/composables/icons.ts
@@ -56,9 +56,9 @@ export const navigation: NavGroupDef[] = [
   {
     group: 'Operations',
     items: [
-      { icon: 'grid', label: 'Dashboard', route: '/dashboard/v2', active: true },
-      { icon: 'cpu', label: 'Agenten', route: '/agents', count: '6' },
-      { icon: 'list', label: 'Task Board', route: '/tasks', count: '7' },
+      { icon: 'grid', label: 'Dashboard', route: '/dashboard', active: true },
+      { icon: 'cpu', label: 'Agenten', route: '/agents' },
+      { icon: 'list', label: 'Task Board', route: '/tasks' },
       { icon: 'flow', label: 'Orchestrierung', route: '/orchestration' },
     ],
   },
@@ -66,14 +66,14 @@ export const navigation: NavGroupDef[] = [
     group: 'Knowledge',
     items: [
       { icon: 'brain', label: 'Memory', route: '/memory' },
-      { icon: 'doc', label: 'Docs & .md', route: '/docs', count: '12' },
+      { icon: 'doc', label: 'Docs & .md', route: '/docs' },
       { icon: 'search', label: 'Research', route: '/research' },
     ],
   },
   {
     group: 'Infrastructure',
     items: [
-      { icon: 'server', label: 'Hosts · OpenClaw', route: '/hosts', count: '1' },
+      { icon: 'server', label: 'Hosts · OpenClaw', route: '/hosts' },
       { icon: 'model', label: 'Modelle', route: '/models' },
       { icon: 'activity', label: 'Activity Log', route: '/activity' },
     ],
@@ -83,7 +83,7 @@ export const navigation: NavGroupDef[] = [
     items: [
       { icon: 'coin', label: 'Kosten & Tokens', route: '/costs' },
       { icon: 'shield', label: 'Security', route: '/security' },
-      { icon: 'alert', label: 'Incidents', route: '/incidents', count: '1' },
+      { icon: 'alert', label: 'Incidents', route: '/incidents' },
     ],
   },
 ]
diff --git a/frontend/src/composables/useDashboardData.ts b/frontend/src/composables/useDashboardData.ts
deleted file mode 100644
index f4ad4d2..0000000
--- a/frontend/src/composables/useDashboardData.ts
+++ /dev/null
@@ -1,621 +0,0 @@
-import { ref, computed } from 'vue'
-
-// ── Shared State (singleton: same state regardless of how many times useDashboardData() is called) ──
-const sessionStart = Date.now()
-
-// Intervals registry for cleanup
-const intervals: ReturnType<typeof setInterval>[] = []
-let cleanupRegistered = false
-
-// ── Interfaces (exported for components) ──
-
-export interface AgentNodeData {
-  id: string
-  name: string
-  role: string
-  description: string
-  tags: string[]
-  color: string
-  icon: string
-  model?: string
-  hero?: boolean
-  currentTask: string
-  goal: string
-  progress: number
-  workload: number // 0-100
-  active: boolean
-  runtimeSeconds: number
-  workingFeed: Array<{ time: string; text: string }>
-  thinkingStream?: Array<{ time: string; text: string }>
-}
-
-export interface OpenTask {
-  id: string
-  title: string
-  detail: string
-  source: 'bao' | 'iris'
-  createdAt: string
-}
-
-export interface FeedEntry {
-  time: string
-  agent: string
-  action: string
-  timestamp: string
-}
-
-export interface ChatMessage {
-  id: string
-  sender: 'user' | 'iris'
-  text: string
-  timestamp: number
-}
-
-export interface QueueItem {
-  id: string
-  text: string
-  priority: 'high' | 'medium' | 'low'
-  waitTime: string
-  source: 'cron' | 'task'
-}
-
-// ── API Response Interfaces ──
-
-interface DashboardStatusResponse {
-  gatewayOk: boolean
-  irisStatus: string
-  activeAgents: number
-  pendingTasks: number
-}
-
-interface DashboardAgentInfo {
-  id: string
-  name: string
-  role: string
-  model: string
-  isActive: boolean
-  currentTask: string
-  description?: string
-  tags?: string[]
-  progress?: number
-  workload?: number
-  goal?: string | null
-}
-
-interface DashboardOperationEntry {
-  agent: string
-  action: string
-  timestamp: string
-  time: string
-}
-
-interface DashboardChatMessage {
-  role: 'user' | 'assistant'
-  content: string
-  timestamp: string
-}
-
-interface DashboardSendResponse {
-  ok: boolean
-  reply?: string
-  error?: string
-}
-
-interface DashboardQueueItem {
-  id: string
-  name: string
-  status: string
-  priority: string
-  source: string
-  waitTime: string
-}
-
-interface DashboardTaskResponse {
-  id: string
-  title: string
-  detail: string | null
-  source: string
-  state: string
-  priority: string
-  assignedTo: string | null
-  createdAt: string
-  updatedAt: string
-}
-
-// ── Agent Catalog (static enrichment) ──
-
-const AGENT_CATALOG: Record<string, Partial<AgentNodeData>> = {
-  iris: {
-    description: 'Zentrale operative Führungsinstanz. Strukturiert Aufgaben, bewertet Risiken, steuert spezialisierte Agenten und eskaliert kritische Entscheidungen.',
-    tags: ['Orchestration', 'Delegation', 'Approval', 'Risk Management'],
-    color: '#8b7cf6',
-    icon: 'bot',
-    hero: true,
-    goal: 'Mission Control — maximale Autonomie bei kontrolliertem Risiko',
-    progress: 90,
-    workload: 60,
-    workingFeed: [],
-    thinkingStream: [],
-  },
-  developer: {
-    description: 'Primärer Entwicklungsagent. Implementiert Features, behebt Bugs und schreibt Code im gesamten Stack — autonom im Rahmen seines Scopes.',
-    tags: ['Full-Stack', 'TypeScript', 'C#', 'Vue', '.NET', 'Builds'],
-    color: '#3b82f6',
-    icon: 'code',
-    goal: 'Nexus Dashboard & Dungeon System',
-    progress: 70,
-    workload: 65,
-    workingFeed: [],
-    thinkingStream: [],
-  },
-  architekt: {
-    description: 'Verwaltet die gesamte Server-Infrastruktur. Deployt Services, konfiguriert Docker, Nginx und Firewall. Stellt sicher, dass die Produktivumgebung stabil und sicher läuft.',
-    tags: ['Docker', 'Nginx', 'CI/CD', 'Firewall', 'VPS'],
-    color: '#eab308',
-    icon: 'server',
-    goal: 'Stabile Zero-Downtime-Deployments',
-    progress: 60,
-    workload: 45,
-    workingFeed: [],
-    thinkingStream: [],
-  },
-  researcher: {
-    description: 'Spezialisierter Recherche-Agent. Sucht online, prüft Quellen, analysiert Inhalte (inkl. YouTube-Videos) und übergibt strukturierte Erkenntnisse. Ausschließlich Lese- und Analyse-Rechte.',
-    tags: ['Research', 'Quellenprüfung', 'Analyse', 'Docs'],
-    color: '#22c55e',
-    icon: 'search',
-    goal: 'Verifizierte, strukturierte Recherche-Ergebnisse',
-    progress: 40,
-    workload: 30,
-    workingFeed: [],
-    thinkingStream: [],
-  },
-  reviewer: {
-    description: 'Code-Qualitätskontrolle. Prüft Diffs auf Bugs, Regressionen, Sicherheitslücken und Wartbarkeit. Berichtet Findings strukturiert und knapp.',
-    tags: ['Code Review', 'Testing', 'Security', 'Quality'],
-    color: '#a855f7',
-    icon: 'shield',
-    goal: 'Zero critical findings before merge',
-    progress: 85,
-    workload: 55,
-    workingFeed: [],
-    thinkingStream: [],
-  },
-  executor: {
-    description: 'Einziger Agent mit Host-Exec-Rechten. Führt Docker- und Shell-Befehle auf dem VPS aus — ausschließlich im Auftrag von Iris. Handelt niemals eigeninitiativ.',
-    tags: ['Docker', 'Shell', 'Host', 'Deployment'],
-    color: '#f59e0b',
-    icon: 'server',
-    goal: 'Sichere Host-Execution im Allowlist-Rahmen',
-    progress: 95,
-    workload: 20,
-    workingFeed: [],
-    thinkingStream: [],
-  },
-  // Alias: API sends "programmer" but AGENT_CATALOG uses "developer" as canonical key
-  programmer: {
-    description: 'Primärer Entwicklungsagent. Implementiert Features, behebt Bugs und schreibt Code im gesamten Stack — autonom im Rahmen seines Scopes.',
-    tags: ['Full-Stack', 'TypeScript', 'C#', 'Vue', '.NET', 'Builds'],
-    color: '#3b82f6',
-    icon: 'code',
-    goal: 'Nexus Dashboard & Dungeon System',
-    progress: 70,
-    workload: 65,
-    workingFeed: [],
-    thinkingStream: [],
-  },
-}
-
-function enrichAgent(api: DashboardAgentInfo): AgentNodeData {
-  const catalog = AGENT_CATALOG[api.id] ?? AGENT_CATALOG['reviewer']
-  return {
-    id: api.id,
-    name: api.name,
-    role: api.role,
-    model: api.model,
-    currentTask: api.currentTask ?? 'Idle',
-    active: api.isActive,
-    description: api.description ?? catalog.description ?? '',
-    tags: api.tags ?? catalog.tags ?? [],
-    color: catalog.color ?? '#6b7385',
-    icon: catalog.icon ?? 'bot',
-    hero: catalog.hero ?? false,
-    // Use API-provided values with catalog fallback for metrics
-    goal: api.goal ?? catalog.goal ?? 'No goal set',
-    progress: api.progress ?? catalog.progress ?? 0,
-    workload: api.workload ?? catalog.workload ?? 0,
-    runtimeSeconds: 0,
-    workingFeed: catalog.workingFeed ?? [],
-    thinkingStream: catalog.thinkingStream ?? [],
-  }
-}
-
-// ── Helper: API Fetch with auth ──
-
-async function apiFetch(path: string, init: RequestInit = {}): Promise<Response> {
-  const base = '' // same-origin proxy
-  return fetch(`${base}${path}`, {
-    ...init,
-    credentials: 'include',
-    headers: {
-      'Content-Type': 'application/json',
-      ...(init.headers as Record<string, string> ?? {}),
-    },
-  })
-}
-
-// ── State ──
-
-// Status
-const gatewayOk = ref(true)
-const irisStatus = ref('Active')
-const activeAgents = ref(0)
-const pendingTasks = ref(0)
-
-// Agents
-const agents = ref<AgentNodeData[]>([])
-
-// Chat
-const chatMessages = ref<ChatMessage[]>([])
-const irisBusy = ref(false)
-const irisFocus = ref('')
-const busySince = ref(0)
-
-// Operations Feed
-const feedEntries = ref<FeedEntry[]>([])
-
-// Open Tasks (fetched from API)
-const openTasks = ref<OpenTask[]>([])
-
-// Queue
-const queue = ref<QueueItem[]>([])
-
-// Runtime
-const runtimeSeconds = ref(0)
-let runtimeInterval: ReturnType<typeof setInterval> | null = null
-
-// ── Fetch Functions ──
-
-async function fetchStatus(): Promise<void> {
-  try {
-    const res = await apiFetch('/api/dashboard/status')
-    if (!res.ok) return
-    const data: DashboardStatusResponse = await res.json()
-    gatewayOk.value = data.gatewayOk
-    irisStatus.value = data.irisStatus
-    activeAgents.value = data.activeAgents
-    pendingTasks.value = data.pendingTasks
-  } catch {
-    // API unreachable – keep current values
-  }
-}
-
-async function fetchAgents(): Promise<void> {
-  try {
-    const res = await apiFetch('/api/dashboard/agents')
-    if (!res.ok) return
-    const data: DashboardAgentInfo[] = await res.json()
-    agents.value = data.map(enrichAgent)
-  } catch {
-    // API unreachable – keep current values
-  }
-}
-
-async function fetchOperations(): Promise<void> {
-  try {
-    const res = await apiFetch('/api/dashboard/operations?limit=20')
-    if (!res.ok) return
-    const data: DashboardOperationEntry[] = await res.json()
-    feedEntries.value = data.map((entry) => ({
-      time: entry.time,
-      agent: entry.agent,
-      action: entry.action,
-      timestamp: entry.timestamp,
-    }))
-  } catch {
-    // API unreachable – keep current values
-  }
-}
-
-async function fetchChatMessages(): Promise<void> {
-  try {
-    const res = await apiFetch('/api/dashboard/chat/messages?limit=50')
-    if (!res.ok) return
-    const data: DashboardChatMessage[] = await res.json()
-    // Merge instead of replace — only add messages not already present
-    const existingTexts = new Set(chatMessages.value.map(m => m.text))
-    const existingTimestamps = new Set(chatMessages.value.map(m => m.timestamp))
-    for (const msg of data) {
-      const msgTime = new Date(msg.timestamp).getTime()
-      if (existingTexts.has(msg.content) && existingTimestamps.has(msgTime)) continue
-      chatMessages.value.push({
-        id: `msg-${msgTime}-${msg.role}`,
-        sender: msg.role === 'assistant' ? 'iris' : 'user',
-        text: msg.content,
-        timestamp: msgTime,
-      })
-    }
-  } catch {
-    // API unreachable – keep current values
-  }
-}
-
-async function fetchQueue(): Promise<void> {
-  try {
-    const res = await apiFetch('/api/dashboard/queue')
-    if (!res.ok) return
-    const data: DashboardQueueItem[] = await res.json()
-    queue.value = data.map((item) => ({
-      id: item.id,
-      text: item.name,
-      priority: (item.priority === 'high' || item.priority === 'medium' || item.priority === 'low')
-        ? item.priority as 'high' | 'medium' | 'low'
-        : 'medium',
-      waitTime: item.waitTime || '--',
-      source: (item.source === 'cron' || item.source === 'task') ? item.source as 'cron' | 'task' : 'cron',
-    }))
-  } catch {
-    // API unreachable – keep current values
-  }
-}
-
-async function fetchTasks(): Promise<void> {
-  try {
-    const res = await apiFetch('/api/dashboard/tasks')
-    if (!res.ok) return
-    const data: DashboardTaskResponse[] = await res.json()
-    openTasks.value = data.map(mapTaskResponse)
-  } catch {
-    // API unreachable – keep current values
-  }
-}
-
-function mapTaskResponse(t: DashboardTaskResponse): OpenTask {
-  const source: OpenTask['source'] = t.source === 'iris' ? 'iris' : 'bao'
-  // Format createdAt as relative time string (like "22:30")
-  const created = new Date(t.createdAt)
-  const now = new Date()
-  const diffMs = now.getTime() - created.getTime()
-  const diffMins = Math.floor(diffMs / 60000)
-
-  let createdAt: string
-  if (diffMins < 1) {
-    createdAt = 'just now'
-  } else if (diffMins < 60) {
-    createdAt = `${diffMins}m`
-  } else if (diffMins < 1440) {
-    createdAt = `${Math.floor(diffMins / 60)}h`
-  } else {
-    createdAt = created.toLocaleDateString('de-DE', { month: 'short', day: 'numeric' })
-  }
-
-  return {
-    id: t.id,
-    title: t.title,
-    detail: t.detail ?? '',
-    source,
-    createdAt,
-  }
-}
-
-// ── Chat Send ──
-
-async function sendChatMessage(text: string): Promise<void> {
-  if (!text.trim()) return
-
-  // Optimistic add
-  chatMessages.value.push({
-    id: `user-${Date.now()}`,
-    sender: 'user',
-    text: text.trim(),
-    timestamp: Date.now(),
-  })
-
-  irisBusy.value = true
-  busySince.value = Date.now()
-
-  try {
-    const res = await apiFetch('/api/dashboard/chat/send', {
-      method: 'POST',
-      body: JSON.stringify({ message: text.trim() }),
-    })
-    const data: DashboardSendResponse = await res.json()
-
-    if (data.ok && data.reply) {
-      chatMessages.value.push({
-        id: `iris-${Date.now()}`,
-        sender: 'iris',
-        text: data.reply,
-        timestamp: Date.now(),
-      })
-    } else if (data.error) {
-      chatMessages.value.push({
-        id: `error-${Date.now()}`,
-        sender: 'iris',
-        text: `⚠️ ${data.error}`,
-        timestamp: Date.now(),
-      })
-    }
-  } catch {
-    chatMessages.value.push({
-      id: `error-${Date.now()}`,
-      sender: 'iris',
-      text: '⚠️ Connection error. Please try again.',
-      timestamp: Date.now(),
-    })
-  } finally {
-    irisBusy.value = false
-    busySince.value = 0
-    irisFocus.value = text.trim()
-  }
-}
-
-// ── Queue Operations ──
-
-async function removeQueueItem(id: string): Promise<void> {
-  const item = queue.value.find(q => q.id === id)
-  if (!item) return
-
-  try {
-    const res = await apiFetch(`/api/dashboard/queue/${encodeURIComponent(id)}?source=${item.source}`, {
-      method: 'DELETE',
-    })
-    if (!res.ok) {
-      console.warn('[Dashboard] Failed to remove queue item', id, res.status)
-      return
-    }
-    // Remove from local state on success
-    const idx = queue.value.findIndex(q => q.id === id)
-    if (idx !== -1) queue.value.splice(idx, 1)
-  } catch {
-    console.warn('[Dashboard] Error removing queue item', id)
-  }
-}
-
-function moveQueueItem(fromIdx: number, toIdx: number): void {
-  if (toIdx < 0 || toIdx >= queue.value.length) return
-  const [item] = queue.value.splice(fromIdx, 1)
-  queue.value.splice(toIdx, 0, item)
-}
-
-async function changeQueuePriority(id: string, priority: QueueItem['priority']): Promise<void> {
-  const item = queue.value.find(q => q.id === id)
-  if (!item) return
-
-  // For cron jobs, just update locally (gateway manages its own priorities)
-  if (item.source === 'cron') {
-    item.priority = priority
-    return
-  }
-
-  try {
-    const res = await apiFetch(`/api/dashboard/queue/${encodeURIComponent(id)}/priority`, {
-      method: 'PUT',
-    })
-    if (!res.ok) {
-      console.warn('[Dashboard] Failed to change priority', id, res.status)
-      return
-    }
-    // Update priority from API response
-    const data = await res.json()
-    if (data.priority) {
-      const normalized = data.priority.toLowerCase()
-      if (normalized === 'high' || normalized === 'medium' || normalized === 'low') {
-        item.priority = normalized as 'high' | 'medium' | 'low'
-      } else {
-        // Fallback: cycle locally
-        item.priority = priority
-      }
-    } else {
-      item.priority = priority
-    }
-  } catch {
-    console.warn('[Dashboard] Error changing priority', id)
-  }
-}
-
-// ── Runtime ──
-
-function startRuntime(): void {
-  const startTs = sessionStart
-  runtimeSeconds.value = Math.floor((Date.now() - startTs) / 1000)
-  runtimeInterval = setInterval(() => {
-    runtimeSeconds.value = Math.floor((Date.now() - startTs) / 1000)
-  }, 1000)
-}
-
-function stopRuntime(): void {
-  if (runtimeInterval) {
-    clearInterval(runtimeInterval)
-    runtimeInterval = null
-  }
-}
-
-const formatRuntime = (seconds: number): string => {
-  const m = Math.floor(seconds / 60)
-  const s = seconds % 60
-  return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
-}
-
-const irisRuntime = computed(() => formatRuntime(runtimeSeconds.value))
-
-const getAgentRuntime = (_id: string): string => {
-  // Could be extended to track per-agent runtimes from API
-  return formatRuntime(runtimeSeconds.value)
-}
-
-// ── Polling starten (nur einmal) ──
-
-function startPolling(): void {
-  if (cleanupRegistered) return
-  cleanupRegistered = true
-
-  // Initial fetches
-  fetchStatus()
-  fetchAgents()
-  fetchOperations()
-  fetchChatMessages()
-  fetchQueue()
-  fetchTasks()
-
-  // Polling intervals
-  intervals.push(setInterval(fetchStatus, 5000))
-  intervals.push(setInterval(fetchAgents, 10000))
-  intervals.push(setInterval(fetchOperations, 10000))
-  intervals.push(setInterval(fetchChatMessages, 3000))
-  intervals.push(setInterval(fetchQueue, 10000))
-  intervals.push(setInterval(fetchTasks, 15000))
-}
-
-function stopPolling(): void {
-  for (const interval of intervals) {
-    clearInterval(interval)
-  }
-  intervals.length = 0
-  cleanupRegistered = false
-}
-
-// ── Composable Export ──
-
-export function useDashboardData() {
-  // Start polling on first call
-  startPolling()
-
-  return {
-    // State
-    agents,
-    openTasks,
-    feedEntries,
-    chatMessages,
-    irisBusy,
-    irisFocus,
-    busySince,
-    irisRuntime,
-    queue,
-    gatewayOk,
-    irisStatus,
-    pendingTasks,
-    activeAgents,
-
-    // Runtime
-    runtimeSeconds,
-    getAgentRuntime,
-    startRuntime,
-    stopRuntime,
-    formatRuntime,
-
-    // Actions
-    sendChatMessage,
-    removeQueueItem,
-    moveQueueItem,
-    changeQueuePriority,
-
-    // Fetch (for manual refresh)
-    fetchStatus,
-    fetchAgents,
-    fetchOperations,
-    fetchChatMessages,
-    fetchQueue,
-    fetchTasks,
-  }
-}
diff --git a/frontend/src/composables/useTeamNetworkSvg.ts b/frontend/src/composables/useTeamNetworkSvg.ts
deleted file mode 100644
index 965376e..0000000
--- a/frontend/src/composables/useTeamNetworkSvg.ts
+++ /dev/null
@@ -1,266 +0,0 @@
-import { ref, computed, onMounted, onUnmounted, nextTick, type Ref } from 'vue'
-import type { AgentNodeData } from './useDashboardData'
-
-export interface CardBox {
-  left: number
-  right: number
-  top: number
-  bottom: number
-  cx: number
-  cy: number
-  width: number
-  height: number
-}
-
-export interface ConnectionPath {
-  d: string
-  length: number
-}
-
-export function useTeamNetworkSvg(
-  networkRef: Ref<HTMLElement | null>,
-  agents: Ref<AgentNodeData[]>,
-  heroId: Ref<string>,
-  isActive: (id: string) => boolean,
-) {
-  // ── Layout ──
-  const cardPositions = ref<Record<string, CardBox>>({})
-  const svgWidth = ref(0)
-  const svgHeight = ref(0)
-
-  const childAgents = computed(() => agents.value.filter(a => a.id !== heroId.value))
-
-  function updatePositions() {
-    const el = networkRef.value
-    if (!el) return
-    const rect = el.getBoundingClientRect()
-    svgWidth.value = rect.width
-    svgHeight.value = rect.height
-
-    const cards = el.querySelectorAll('[data-agent-id]')
-    const positions: Record<string, CardBox> = {}
-    cards.forEach(card => {
-      const id = card.getAttribute('data-agent-id')
-      if (!id) return
-      const r = card.getBoundingClientRect()
-      positions[id] = {
-        left: r.left - rect.left,
-        right: r.left + r.width - rect.left,
-        top: r.top - rect.top,
-        bottom: r.top + r.height - rect.top,
-        cx: r.left + r.width / 2 - rect.left,
-        cy: r.top + r.height / 2 - rect.top,
-        width: r.width,
-        height: r.height,
-      }
-    })
-    cardPositions.value = positions
-  }
-
-  // ── Connection paths ──
-  const connectionPaths = computed<Record<string, ConnectionPath | null>>(() => {
-    const result: Record<string, ConnectionPath | null> = {}
-    const pos = cardPositions.value
-    const iris = pos[heroId.value]
-    if (!iris) return result
-
-    const children = childAgents.value
-    const total = children.length
-    if (total === 0) return result
-
-    for (let idx = 0; idx < total; idx++) {
-      const agent = children[idx]
-      const agentPos = pos[agent.id]
-      if (!agentPos) {
-        result[agent.id] = null
-        continue
-      }
-
-      // Spread start points across Iris bottom edge (30%-70% range)
-      const t = total > 1 ? idx / (total - 1) : 0.5
-      const startX = iris.left + iris.width * (0.38 + t * 0.24)
-      const startY = iris.bottom - 1
-
-      // Determine column: left or right of Iris center
-      const isLeftColumn = agentPos.cx < iris.cx
-
-      // End point: approach from side, 8px before card edge
-      const endX = isLeftColumn ? agentPos.right - 8 : agentPos.left + 8
-      const endY = agentPos.cy
-
-      // Bézier control points
-      const cp1x = startX
-      const cp1y = startY + 70
-      const cp2x = endX + (isLeftColumn ? 35 : -35)
-      const cp2y = endY - 10
-
-      const d = `M ${startX} ${startY} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${endX} ${endY}`
-      result[agent.id] = { d, length: 0 }
-    }
-    return result
-  })
-
-  // ── Path refs (template ref functions) ──
-  const pathElements = ref<Record<string, SVGPathElement | null>>({})
-  const pulseElements = ref<Record<string, SVGPathElement | null>>({})
-  const pulseElements2 = ref<Record<string, SVGPathElement | null>>({})
-  const pulseOffsets = ref<Record<string, number>>({})
-  const pulseOffsets2 = ref<Record<string, number>>({})
-
-  function storePathRef(id: string) {
-    return (el: SVGPathElement | null) => {
-      pathElements.value[id] = el
-    }
-  }
-
-  function storePulseRef(id: string) {
-    return (el: SVGPathElement | null) => {
-      pulseElements.value[id] = el
-    }
-  }
-
-  function storePulseRef2(id: string) {
-    return (el: SVGPathElement | null) => {
-      pulseElements2.value[id] = el
-    }
-  }
-
-  // ── Pulse animation ──
-  let animFrameId: number | null = null
-  let lastAnimTime = 0
-  const speeds: Record<string, number> = {}
-
-  function refreshPathLengths() {
-    for (const id of childAgents.value.map(a => a.id)) {
-      const pathEl = pathElements.value[id]
-      const pulseEl = pulseElements.value[id]
-      const p = connectionPaths.value[id]
-      if (pathEl && p) {
-        p.length = pathEl.getTotalLength()
-      }
-      if (pulseEl && p && p.length > 0) {
-        if (pulseOffsets.value[id] === undefined) {
-          pulseOffsets.value[id] = 0
-        }
-        pulseEl.setAttribute('stroke-dasharray', `40 ${p.length}`)
-        pulseEl.setAttribute('stroke-dashoffset', String(-pulseOffsets.value[id]))
-      }
-      const pulseEl2 = pulseElements2.value[id]
-      if (pulseEl2 && p && p.length > 0) {
-        if (pulseOffsets2.value[id] === undefined) {
-          pulseOffsets2.value[id] = 0
-        }
-        pulseEl2.setAttribute('stroke-dasharray', `40 ${p.length}`)
-        pulseEl2.setAttribute('stroke-dashoffset', String(-pulseOffsets2.value[id]))
-      }
-    }
-  }
-
-  function startPulseAnimation() {
-    refreshPathLengths()
-
-    for (const id of childAgents.value.map(a => a.id)) {
-      const p = connectionPaths.value[id]
-      if (p && p.length > 0) {
-        speeds[id] = p.length / 3000
-        if (pulseOffsets.value[id] === undefined) pulseOffsets.value[id] = 0
-        if (pulseOffsets2.value[id] === undefined) pulseOffsets2.value[id] = 0
-      }
-    }
-
-    lastAnimTime = performance.now()
-
-    function tick(now: number) {
-      const dt = now - lastAnimTime
-      lastAnimTime = now
-
-      const children = childAgents.value
-      for (let i = 0; i < children.length; i++) {
-        const id = children[i].id
-        const pathEl = pathElements.value[id]
-        const pulseEl = pulseElements.value[id]
-        const pulseEl2 = pulseElements2.value[id]
-        const p = connectionPaths.value[id]
-        if (!pathEl || !pulseEl || !p) continue
-
-        const len = p.length
-        if (len <= 0) continue
-
-        const speed = speeds[id] ?? len / 3000
-        const cycleLen = len + 40
-
-        // Pulse 1
-        const currentOffset = pulseOffsets.value[id] ?? 0
-        const newOffset = currentOffset + speed * dt
-        pulseOffsets.value[id] = newOffset > cycleLen ? newOffset % cycleLen : newOffset
-        pulseEl.setAttribute('stroke-dashoffset', String(-pulseOffsets.value[id]))
-
-        // Pulse 2 (offset by half cycle)
-        if (pulseEl2) {
-          const offset2 = (pulseOffsets.value[id] + cycleLen / 2) % cycleLen
-          pulseOffsets2.value[id] = offset2
-          pulseEl2.setAttribute('stroke-dashoffset', String(-offset2))
-        }
-      }
-
-      animFrameId = requestAnimationFrame(tick)
-    }
-
-    animFrameId = requestAnimationFrame(tick)
-  }
-
-  function stopPulseAnimation() {
-    if (animFrameId !== null) {
-      cancelAnimationFrame(animFrameId)
-      animFrameId = null
-    }
-  }
-
-  // ── Lifecycle ──
-  let resizeObserver: ResizeObserver | null = null
-
-  onMounted(async () => {
-    await nextTick()
-    updatePositions()
-
-    // Wait for SVG to render so path refs are populated
-    await nextTick()
-    updatePositions()
-    refreshPathLengths()
-
-    startPulseAnimation()
-
-    resizeObserver = new ResizeObserver(() => {
-      updatePositions()
-      requestAnimationFrame(() => {
-        refreshPathLengths()
-      })
-    })
-    if (networkRef.value) {
-      resizeObserver.observe(networkRef.value)
-    }
-  })
-
-  onUnmounted(() => {
-    stopPulseAnimation()
-    resizeObserver?.disconnect()
-  })
-
-  return {
-    cardPositions,
-    svgWidth,
-    svgHeight,
-    childAgents,
-    connectionPaths,
-    pathElements,
-    pulseElements,
-    pulseElements2,
-    pulseOffsets,
-    pulseOffsets2,
-    storePathRef,
-    storePulseRef,
-    storePulseRef2,
-    updatePositions,
-    refreshPathLengths,
-  }
-}
diff --git a/frontend/src/router.ts b/frontend/src/router.ts
index b308ba5..2bd7ba9 100644
--- a/frontend/src/router.ts
+++ b/frontend/src/router.ts
@@ -9,7 +9,6 @@ import AgentsIndexView from './views/AgentsIndexView.vue'
 import SecurityView from './views/SecurityView.vue'
 import IncidentsView from './views/IncidentsView.vue'
 import CalendarView from './views/CalendarView.vue'
-import DashboardView from './views/DashboardView.vue'
 import NexusLayout from './layouts/NexusLayout.vue'
 import FlowBoard from './views/Dashboard/FlowBoard.vue'
 
@@ -17,15 +16,12 @@ const routes = [
   { path: '/login', name: 'Login', component: LoginView, meta: { public: true } },
   { path: '/', redirect: '/dashboard' },
 
-  // V1 Dashboard (altes Layout – bleibt erhalten)
-  { path: '/dashboard', name: 'Dashboard', component: DashboardView },
-
-  // V2 Dashboard (neues NexusLayout)
+  // V2 Dashboard (neues NexusLayout + FlowBoard)
   {
-    path: '/dashboard/v2',
+    path: '/dashboard',
     component: NexusLayout,
     children: [
-      { path: '', name: 'DashboardV2', component: FlowBoard },
+      { path: '', name: 'Dashboard', component: FlowBoard },
     ],
   },
 
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
deleted file mode 100644
index 3a45190..0000000
--- a/frontend/src/views/DashboardView.vue
+++ /dev/null
@@ -1,243 +0,0 @@
-<script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
-import TaskCard from '../components/dashboard/TaskCard.vue'
-import OperationsFeed from '../components/dashboard/OperationsFeed.vue'
-import TeamNetwork from '../components/dashboard/TeamNetwork.vue'
-import ChatPanel from '../components/dashboard/ChatPanel.vue'
-import QueuePanel from '../components/dashboard/QueuePanel.vue'
-import AgentModal from '../components/dashboard/AgentModal.vue'
-import { useDashboardData } from '../composables/useDashboardData'
-import type { AgentNodeData } from '../composables/useDashboardData'
-
-const {
-  agents, openTasks, feedEntries, chatMessages,
-  irisBusy, irisFocus, queue,
-  getAgentRuntime, startRuntime, stopRuntime,
-  sendChatMessage, removeQueueItem, moveQueueItem, changeQueuePriority,
-} = useDashboardData()
-
-const selectedAgent = ref<AgentNodeData | null>(null)
-
-function onAgentSelect(id: string) {
-  const agent = agents.value.find(a => a.id === id)
-  if (agent) selectedAgent.value = agent
-}
-
-onMounted(startRuntime)
-onUnmounted(stopRuntime)
-
-function onQueueMoveUp(id: string): void {
-  const idx = queue.value.findIndex(q => q.id === id)
-  if (idx > 0) moveQueueItem(idx, idx - 1)
-}
-
-function onQueueMoveDown(id: string): void {
-  const idx = queue.value.findIndex(q => q.id === id)
-  if (idx < queue.value.length - 1) moveQueueItem(idx, idx + 1)
-}
-
-function onQueueExecuteNow(id: string): void {
-  const item = queue.value.find(q => q.id === id)
-  if (item) console.log('[Dashboard] Execute now:', item.text)
-}
-</script>
-
-<template>
-  <div class="dashboard">
-    <div class="col-left">
-      <section class="missions-section">
-        <TaskCard :tasks="openTasks" @new-task="console.log('New task requested')" @go-board="console.log('Go to Task Board')" />
-      </section>
-      <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
-        hero-id="iris"
-        :agents="agents"
-        @select="onAgentSelect"
-      />
-
-      <!-- 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" />
-      <QueuePanel :items="queue" @remove="removeQueueItem" @move-up="onQueueMoveUp" @move-down="onQueueMoveDown" @change-priority="changeQueuePriority" @execute-now="onQueueExecuteNow" />
-    </div>
-
-    <AgentModal
-      v-if="selectedAgent"
-      :agent="selectedAgent"
-      :runtime="getAgentRuntime(selectedAgent.id)"
-      @close="selectedAgent = null"
-    />
-  </div>
-</template>
-
-<style scoped>
-.dashboard {
-  display: grid;
-  grid-template-columns: 280px 1fr 320px;
-  gap: 14px;
-  height: 100%; min-height: 0;
-  animation: fade-in 0.35s ease-out;
-}
-@keyframes fade-in {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-.dashboard ::-webkit-scrollbar { width: 5px; height: 5px; }
-.dashboard ::-webkit-scrollbar-track { background: transparent; }
-.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; display: flex; flex-direction: column; gap: 12px; }
-
-/* Quote Pill */
-.quote-pill {
-  background: var(--nx-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(--nx-panel);
-  border: 1px solid var(--nx-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; }
-/* Tablet: 2 columns — left+center together, right column alongside */
-@media (max-width: 1100px) {
-  .dashboard {
-    grid-template-columns: 1fr 320px;
-    grid-template-rows: auto auto;
-  }
-  .col-left {
-    grid-column: 1;
-    grid-row: 1;
-  }
-  .col-center {
-    grid-column: 1;
-    grid-row: 2;
-  }
-  .col-right {
-    grid-column: 2;
-    grid-row: 1 / 3;
-  }
-}
-
-/* Mobile: 1 column, everything stacked */
-@media (max-width: 768px) {
-  .dashboard {
-    grid-template-columns: 1fr;
-    gap: 8px;
-  }
-  .col-left, .col-center, .col-right {
-    grid-column: 1;
-    grid-row: auto;
-    overflow: visible;
-    padding: 0;
-  }
-  .quote-pill { padding: 10px 14px; }
-  .quote-text { font-size: 10px; }
-  .team-title { font-size: 20px; }
-  .legend-row { gap: 12px; padding: 8px 12px; flex-wrap: wrap; }
-  .legend-item { font-size: 8px; gap: 4px; }
-}
-</style>