refactor(frontend): deduplicate CSS keyframes, unify types, extract format utils, add UI states, trim mock data

- Remove duplicate @keyframes pulse-* from 3 component files (already in nexus-tokens.css)
- Rename AgentDetail → AgentDetailData in dashboard types to avoid collision with types/agent.ts
- Extract shared formatNumber/initials/formatTime to utils/format.ts
- Simplify FlowBoard: use agentStore modal/selection getters instead of duplicating local state
- Add error banner + empty state to IrisChat; add loading skeleton + error/empty states to TaskStrip
- Remove 105-line unused mockAgents array from useFlowLayout
- Reduce operations store fallbacks from hardcoded preview data to minimal safe defaults
- Update operations store tests to match lean fallback structure
- Net: -73 lines, cleaner imports, fewer magic strings

frontend/src/components/dashboard/v2/AgentDetailModal.vue

@@ -12,12 +12,13 @@
  */
 
 import { ref, onMounted, onUnmounted, watch } from 'vue'
-import type { ThinkingItem, AgentDetail } from './types'
+import type { ThinkingItem, AgentDetailData } from './types'
+import { formatNumber } from '../../../utils/format'
 
 /* ── Props ──────────────────────────────────────────── */
 
 const props = defineProps<{
-  agent: AgentDetail
+  agent: AgentDetailData
   // Agent-Liste für Pfeilnavigation (IDs in Anzeigereihenfolge)
   agentOrder: string[]
 }>()
@@ -97,7 +98,7 @@ interface MetricDef {
   sub?: string
 }
 
-function getMetrics(a: AgentDetail): MetricDef[] {
+function getMetrics(a: AgentDetailData): MetricDef[] {
   return [
     {
       label: 'Tasks aktiv',
@@ -132,12 +133,6 @@ function getMetrics(a: AgentDetail): MetricDef[] {
   ]
 }
 
-function formatNumber(n: number): string {
-  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M'
-  if (n >= 1_000) return (n / 1_000).toFixed(1) + 'k'
-  return String(n)
-}
-
 /* ── Pretty Model Name ────────────────────────────── */
 
 function modelLabel(alias: string): string {
@@ -453,18 +448,6 @@ const typeConfig: Record<ThinkingItem['type'], { dotClass: string; label: string
   background: var(--st-idle);
 }
 
-@keyframes pulse-work {
-  0%   { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.55); }
-  70%  { box-shadow: 0 0 0 6px rgba(61, 220, 151, 0); }
-  100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); }
-}
-
-@keyframes pulse-think {
-  0%   { box-shadow: 0 0 0 0 rgba(52, 214, 245, 0.55); }
-  70%  { box-shadow: 0 0 0 6px rgba(52, 214, 245, 0); }
-  100% { box-shadow: 0 0 0 0 rgba(52, 214, 245, 0); }
-}
-
 /* ── Model Area ────────────────────────────────────── */
 .m-model-area {
   flex: 0 0 auto;

frontend/src/components/dashboard/v2/AgentNode.vue

@@ -269,21 +269,4 @@ defineEmits<{
   font-weight: 600;
 }
 
-@keyframes pulse-work {
-  0%   { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.55); }
-  70%  { box-shadow: 0 0 0 7px rgba(61, 220, 151, 0); }
-  100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); }
-}
-
-@keyframes pulse-think {
-  0%   { box-shadow: 0 0 0 0 rgba(52, 214, 245, 0.55); }
-  70%  { box-shadow: 0 0 0 7px rgba(52, 214, 245, 0); }
-  100% { box-shadow: 0 0 0 0 rgba(52, 214, 245, 0); }
-}
-
-@keyframes pulse-block {
-  0%   { box-shadow: 0 0 0 0 rgba(251, 113, 133, 0.55); }
-  70%  { box-shadow: 0 0 0 7px rgba(251, 113, 133, 0); }
-  100% { box-shadow: 0 0 0 0 rgba(251, 113, 133, 0); }
-}
 </style>

frontend/src/components/dashboard/v2/IrisChat.vue

@@ -19,6 +19,7 @@ import type { ChatMessage } from './types'
 const props = defineProps<{
   messages: ChatMessage[]
   isThinking: boolean
+  error?: string | null
 }>()
 
 const emit = defineEmits<{
@@ -79,6 +80,12 @@ watch(
 
     <!-- Messages (flex column-reverse — neueste unten) -->
     <div ref="msgContainer" class="messages">
+      <!-- Error Banner -->
+      <div v-if="error" class="chat-error">
+        <span class="error-icon">⚠</span>
+        <span>Chat unavailable: {{ error }}</span>
+      </div>
+
       <!-- Thinking Indicator -->
       <div v-if="isThinking" class="thinking-indicator">
         <span class="thinking-dots">
@@ -89,6 +96,11 @@ watch(
         <span class="thinking-text">thinking…</span>
       </div>
 
+      <!-- Empty State -->
+      <div v-if="!messages.length && !isThinking" class="chat-empty">
+        <span class="empty-text">No messages yet. Ask Iris something.</span>
+      </div>
+
       <!-- Messages (reverse order → newest first in DOM, column-reverse flips) -->
       <template v-for="(msg, i) in reversedMessages" :key="i">
         <!-- Iris Bubble -->
@@ -322,6 +334,40 @@ watch(
   color: var(--st-think);
 }
 
+/* ── Error Banner ─────────────────────────────────── */
+.chat-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 13px;
+  background: rgba(251, 113, 133, 0.12);
+  border: 1px solid rgba(251, 113, 133, 0.25);
+  border-radius: 10px;
+  font-family: 'Manrope', sans-serif;
+  font-size: 11px;
+  color: #fda4b0;
+}
+
+.error-icon {
+  flex: 0 0 auto;
+  font-size: 14px;
+}
+
+/* ── Empty State ──────────────────────────────────── */
+.chat-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 16px;
+}
+
+.chat-empty .empty-text {
+  font-family: 'Manrope', sans-serif;
+  font-size: 12px;
+  color: var(--tx-3);
+  font-style: italic;
+}
+
 /* ── Thinking Indicator ────────────────────────────── */
 .thinking-indicator {
   display: flex;

frontend/src/components/dashboard/v2/TaskStrip.vue

@@ -10,11 +10,29 @@ import type { TaskItem } from './types'
 
 defineProps<{
   tasks: TaskItem[]
+  loading?: boolean
+  error?: string | null
 }>()
 </script>
 
 <template>
   <div class="taskstrip v2-scroll">
+    <!-- Loading skeleton -->
+    <template v-if="loading">
+      <div v-for="n in 3" :key="'sk-' + n" class="taskcard skeleton" />
+    </template>
+
+    <!-- Error -->
+    <div v-else-if="error" class="task-error">
+      <span class="error-icon">⚠</span> {{ error }}
+    </div>
+
+    <!-- Empty -->
+    <div v-else-if="!tasks.length" class="task-empty">
+      No active tasks
+    </div>
+
+    <!-- Tasks -->
     <div
       v-for="task in tasks"
       :key="task.id"
@@ -169,4 +187,40 @@ defineProps<{
   background: var(--st-block);
   opacity: 0.55;
 }
+
+/* ── Skeleton ─────────────────────────────────── */
+.taskcard.skeleton {
+  height: 98px;
+  background: var(--glass);
+  animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes skeleton-pulse {
+  0%, 100% { opacity: 0.5; }
+  50%      { opacity: 0.8; }
+}
+
+/* ── Error ────────────────────────────────────── */
+.task-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: 'Manrope', sans-serif;
+  font-size: 11px;
+  color: #fda4b0;
+  padding: 12px;
+  white-space: nowrap;
+}
+
+.error-icon { flex: 0 0 auto; font-size: 14px; }
+
+/* ── Empty ────────────────────────────────────── */
+.task-empty {
+  font-family: 'Manrope', sans-serif;
+  font-size: 11px;
+  color: var(--tx-3);
+  font-style: italic;
+  padding: 12px;
+  white-space: nowrap;
+}
 </style>

frontend/src/components/dashboard/v2/types.ts

@@ -26,7 +26,8 @@ export interface ThinkingItem {
   ts: string
 }
 
-export interface AgentDetail {
+/** Dashboard view-model for an agent detail modal (distinct from types/agent.ts AgentDetail) */
+export interface AgentDetailData {
   id: string
   name: string
   role: string

frontend/src/components/layout/AppSidebar.vue

@@ -8,6 +8,7 @@ import {
 } from '@lucide/vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '../../stores/auth'
+import { initials } from '../../utils/format'
 
 const props = defineProps<{
   activeView: string
@@ -23,7 +24,9 @@ const emit = defineEmits<{
 const auth = useAuthStore()
 const router = useRouter()
 
-const ownerInitials = computed(() => auth.user?.displayName.split(' ').map(part => part[0]).join('').slice(0, 2).toUpperCase() ?? 'OW')
+const ownerInitials = computed(() =>
+  auth.user?.displayName ? initials(auth.user.displayName) : 'OW'
+)
 
 const navigation = [
   { label: 'Dashboard', icon: LayoutDashboard },

frontend/src/components/layout/Sidebar.vue

@@ -7,6 +7,7 @@ import { useTaskStore } from '../../stores/tasks'
 import { navigation, icons } from '../../composables/icons'
 import type { NavGroupDef } from '../../composables/icons'
 import NavGroup from './NavGroup.vue'
+import { initials } from '../../utils/format'
 
 const auth = useAuthStore()
 const router = useRouter()
@@ -14,8 +15,7 @@ const agentStore = useAgentStore()
 const taskStore = useTaskStore()
 
 const ownerInitials = computed(() =>
-  auth.user?.displayName?.split(' ').map(p => p[0]).join('').slice(0, 2).toUpperCase()
-  ?? 'OW'
+  auth.user?.displayName ? initials(auth.user.displayName) : 'OW'
 )
 
 function logout() {

frontend/src/components/layout/Topbar.vue

@@ -138,9 +138,4 @@ defineProps<{
   height: 15px;
 }
 
-@keyframes pulse-work {
-  0%   { box-shadow: 0 0 0 0   rgba(61,220,151,.55); }
-  70%  { box-shadow: 0 0 0 7px rgba(61,220,151,0); }
-  100% { box-shadow: 0 0 0 0   rgba(61,220,151,0); }
-}
 </style>

frontend/src/composables/useFlowLayout.ts

@@ -118,133 +118,7 @@ export function curve(p1: Point, p2: Point): string {
 }
 
 /**
- * Mock-Daten (identisch zu NEXUS.agents aus agents.js)
- */
-export const mockAgents: AgentNodeData[] = [
-  {
-    id: 'iris',
-    name: 'Iris',
-    role: 'Chief of Staff',
-    roleBadge: 'badge-purple',
-    model: 'Deepseek V4 Pro',
-    avatar: 'IR',
-    status: 'think',
-    statusLabel: 'Orchestriert',
-    task: 'Sprint-Planung koordinieren',
-    goal: 'Tagesziele auf das Team verteilen',
-    progress: 60,
-    elapsed: '00:14:22',
-    next: 'Standup-Report 17:00',
-    tokens: '48.2k',
-    cost: '1.84',
-    md: 'mission/sprint-12.md',
-    think: 'Priorisiere Deploy-Blocker vor Feature-Tasks; weise Healthcheck-Fehler dem Executor zu…',
-    links: ['dev', 'rev', 'arch', 'exec', 'res'],
-  },
-  {
-    id: 'dev',
-    name: 'Full-Stack Developer',
-    role: 'Implementation',
-    roleBadge: 'badge-blue',
-    model: 'Deepseek V4 Flash',
-    avatar: '</>',
-    status: 'work',
-    statusLabel: 'Arbeitet',
-    task: 'Auth-Refactor — JWT-Rotation',
-    goal: 'Sichere Token-Rotation in api/auth',
-    progress: 72,
-    elapsed: '00:41:09',
-    next: 'Unit-Tests schreiben',
-    tokens: '121k',
-    cost: '2.40',
-    md: 'projects/auth/refactor.md',
-    think: 'Erzeuge Refresh-Token-Middleware, prüfe Edge-Case bei abgelaufenem Token…',
-    handoff: 'rev',
-  },
-  {
-    id: 'rev',
-    name: 'Reviewer',
-    role: 'Code Quality',
-    roleBadge: 'badge-cyan',
-    model: 'Deepseek V4 Pro',
-    avatar: 'RV',
-    status: 'work',
-    statusLabel: 'Arbeitet',
-    task: 'Review PR #142 — Auth-Refactor',
-    goal: 'Diff auf Regressionen prüfen',
-    progress: 35,
-    elapsed: '00:08:51',
-    next: 'Feedback an Developer',
-    tokens: '64k',
-    cost: '1.10',
-    md: 'reviews/pr-142.md',
-    think: 'Analysiere Änderungen in auth/middleware.ts — fehlende Rate-Limit-Prüfung gefunden…',
-    from: 'dev',
-  },
-  {
-    id: 'arch',
-    name: 'Architekt',
-    role: 'Infrastructure',
-    roleBadge: 'badge-amber',
-    model: 'Deepseek V4 Pro',
-    avatar: 'AR',
-    status: 'think',
-    statusLabel: 'Plant',
-    task: 'VPS-Skalierung planen',
-    goal: 'Lastspitzen abfedern, Kosten senken',
-    progress: 20,
-    elapsed: '00:03:30',
-    next: 'Terraform-Plan an Executor',
-    tokens: '31k',
-    cost: '0.74',
-    md: 'infra/scaling-q3.md',
-    think: 'Vergleiche vertikale vs. horizontale Skalierung…',
-    handoff: 'exec',
-  },
-  {
-    id: 'exec',
-    name: 'Executor',
-    role: 'Host Executor',
-    roleBadge: 'badge-green',
-    model: 'Deepseek V4 Flash',
-    avatar: 'EX',
-    status: 'work',
-    statusLabel: 'Deployt',
-    task: 'Deploy nexus-api v2.3',
-    goal: 'Zero-Downtime Rollout auf VPS',
-    progress: 88,
-    elapsed: '00:02:12',
-    next: 'Healthcheck verifizieren',
-    tokens: '18k',
-    cost: '0.32',
-    md: 'ops/deploy-v2.3.md',
-    think: '$ docker compose up -d --no-deps api…',
-    from: 'arch',
-  },
-  {
-    id: 'res',
-    name: 'Researcher',
-    role: 'Research & Analysis',
-    roleBadge: 'badge-slate',
-    model: 'Deepseek V4 Flash',
-    avatar: 'RS',
-    status: 'idle',
-    statusLabel: 'Bereit',
-    task: null,
-    goal: null,
-    progress: 0,
-    elapsed: '—',
-    next: 'LLM-Cost-Benchmark (Queue)',
-    tokens: '0',
-    cost: '0.00',
-    md: 'research/vector-db.md',
-    think: null,
-    handoff: 'iris',
-  },
-]
-
-/**
- * Padding-ähnliche Extra-Agenten zum Hinzufügen
+ * Extra agents that can be added to the FlowBoard dynamically
  */
 export const extraAgentPool: AgentNodeData[] = [
   {

frontend/src/stores/agents.ts

@@ -11,7 +11,7 @@
 import { defineStore } from 'pinia'
 import { apiFetch } from '../services/api'
 import type { AgentNodeData } from '../composables/useFlowLayout'
-import type { AgentDetail, ThinkingItem } from '../components/dashboard/v2/types'
+import type { AgentDetailData, ThinkingItem } from '../components/dashboard/v2/types'
 
 /* ── API Response Shapes ──────────────────────────── */
 
@@ -127,7 +127,7 @@ function buildThinkingItems(data: AgentNodeData): ThinkingItem[] {
   return items
 }
 
-export function buildAgentDetail(data: AgentNodeData, models: { id: string; alias: string }[]): AgentDetail {
+export function buildAgentDetail(data: AgentNodeData, models: { id: string; alias: string }[]): AgentDetailData {
   const tokenNum = parseFloat(data.tokens?.replace(/[^0-9.]/g, '') || '0')
   const tokenMultiplier = data.tokens?.includes('M') ? 1_000_000 : data.tokens?.includes('k') ? 1_000 : 1
   const tokensToday = Math.round(tokenNum * tokenMultiplier)
@@ -177,7 +177,7 @@ export const useAgentStore = defineStore('agents', {
     },
 
     /** Selected agent detail for modal */
-    selectedAgent(state): AgentDetail | null {
+    selectedAgent(state): AgentDetailData | null {
       if (!state.selectedAgentId) return null
       const data = state.agents.find(a => a.id === state.selectedAgentId)
       if (!data) return null

frontend/src/stores/operations.ts

@@ -4,36 +4,15 @@ import { apiFetch } from '../services/api'
 
 const fallback: OperationsSnapshot = {
   generatedAt: new Date().toISOString(),
-  runtime: { runtime: 'OpenClaw', status: 'Online', detail: 'Gateway responding' },
-  models: [
-    { provider: 'OpenClaw', model: 'deepseek/deepseek-v4-flash', status: 'Online', isLocal: false, detail: 'Programmer agent' },
-    { provider: 'OpenClaw', model: 'deepseek/deepseek-v4-pro', status: 'Online', isLocal: false, detail: 'Reviewer agent' },
-    { provider: 'OpenClaw', model: 'openai/gpt-5.3-chat-latest', status: 'Online', isLocal: false, detail: 'Iris orchestrator' },
-  ],
-  metrics: { activeAgents: 3, queuedTasks: 7, successRate: 98.4, incidents: 0 },
-  projects: [
-    { id: 'nexus', name: 'Nexus', status: 'Active', progress: 18 },
-    { id: 'openclaw', name: 'OpenClaw Runtime', status: 'Online', progress: 100 },
-    { id: 'infra', name: 'Noveria Infrastructure', status: 'Stable', progress: 74 },
-  ],
-  tasks: [
-    { id: 'preview-foundation', title: 'Nexus foundation', state: 'In progress', priority: 'Critical', updatedAt: new Date().toISOString() },
-    { id: 'preview-runtime', title: 'Connect OpenClaw adapter', state: 'In progress', priority: 'High', updatedAt: new Date().toISOString() },
-    { id: 'preview-routing', title: 'Configure model routing', state: 'In progress', priority: 'High', updatedAt: new Date().toISOString() },
-    { id: 'preview-auth', title: 'Owner authentication', state: 'Done', priority: 'Critical', updatedAt: new Date().toISOString() },
-  ],
-  activity: [
-    { type: 'runtime', message: 'OpenClaw runtime health checked', at: new Date().toISOString() },
-    { type: 'deploy', message: 'Nexus foundation initialized', at: new Date(Date.now() - 720000).toISOString() },
-    { type: 'deploy', message: 'Model routing configured for DeepSeek agents', at: new Date(Date.now() - 1140000).toISOString() },
-  ],
+  runtime: { runtime: 'OpenClaw', status: 'Unknown', detail: 'Awaiting connection…' },
+  models: [],
+  metrics: { activeAgents: 0, queuedTasks: 0, successRate: 0, incidents: 0 },
+  projects: [],
+  tasks: [],
+  activity: [],
 }
 
-const fallbackRouting: RoutingTarget[] = [
-  { priority: 1, provider: 'OpenClaw', model: 'deepseek/deepseek-v4-flash', purpose: 'Programmer agent', status: 'Online', detail: 'Routed through OpenClaw' },
-  { priority: 2, provider: 'OpenClaw', model: 'deepseek/deepseek-v4-pro', purpose: 'Reviewer agent', status: 'Online', detail: 'Routed through OpenClaw' },
-  { priority: 3, provider: 'OpenClaw', model: 'openai/gpt-5.3-chat-latest', purpose: 'Iris orchestrator', status: 'Online', detail: 'Routed through OpenClaw' },
-]
+const fallbackRouting: RoutingTarget[] = []
 
 export const useOperationsStore = defineStore('operations', {
   state: () => ({

frontend/src/utils/format.ts

@@ -0,0 +1,30 @@
+/**
+ * Shared formatting utilities for Nexus Dashboard
+ */
+
+/** Format a number with SI suffixes (k, M) */
+export function formatNumber(n: number): string {
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M'
+  if (n >= 1_000) return (n / 1_000).toFixed(1) + 'k'
+  return String(n)
+}
+
+/** Format currency with $ prefix */
+export function formatCurrency(n: number): string {
+  return '$' + n.toFixed(2)
+}
+
+/** Format a Date as German locale time HH:MM:SS */
+export function formatTime(d: Date): string {
+  return d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+}
+
+/** Format a Date as German locale time HH:MM */
+export function formatTimeShort(d: Date): string {
+  return d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
+}
+
+/** Extract initials (max 2 chars) from a display name */
+export function initials(name: string): string {
+  return name.split(' ').map(p => p[0]).join('').slice(0, 2).toUpperCase()
+}

frontend/src/views/Dashboard/FlowBoard.vue

@@ -12,7 +12,7 @@
  *
  * Polling startet bei Mount, stoppt bei Unmount.
  */
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { useAgentStore } from '../../stores/agents'
 import { useChatStore } from '../../stores/chat'
 import { useTaskStore } from '../../stores/tasks'
@@ -21,7 +21,6 @@ import FlowCanvas from '../../components/dashboard/v2/FlowCanvas.vue'
 import IrisChat from '../../components/dashboard/v2/IrisChat.vue'
 import TaskStrip from '../../components/dashboard/v2/TaskStrip.vue'
 import AgentDetailModal from '../../components/dashboard/v2/AgentDetailModal.vue'
-import { buildAgentDetail } from '../../stores/agents'
 import type { AgentNodeData } from '../../composables/useFlowLayout'
 import { extraAgentPool } from '../../composables/useFlowLayout'
 
@@ -35,42 +34,14 @@ const agentPositions = ref<Record<string, { x: number; y: number }>>({})
 const enteringIds = ref<string[]>([])
 const localAgentPool = ref<AgentNodeData[]>([...extraAgentPool])
 
-/* ── Modal State ──────────────────────────────────── */
-const selectedAgentId = ref<string | null>(null)
-const modalOpen = computed(() => selectedAgentId.value !== null)
-const agentOrder = computed(() => {
-  const ids = agentStore.agentList.map(a => a.id)
-  // Iris first
-  const irisIdx = ids.indexOf('iris')
-  if (irisIdx > 0) {
-    ids.splice(irisIdx, 1)
-    ids.unshift('iris')
-  }
-  return ids
-})
-
-const selectedAgent = computed(() => {
-  if (!selectedAgentId.value) return null
-  const data = agentStore.agentList.find(a => a.id === selectedAgentId.value)
-  if (!data) return null
-  // Build AgentDetail using the store's available models
-  return agentStore.models.length > 0
-    ? buildAgentDetail(data, agentStore.models)
-    : null
-})
-
 /* ── Event Handlers ───────────────────────────────── */
 
 function handleSelect(id: string) {
-  selectedAgentId.value = id
+  agentStore.selectAgent(id)
 }
 
 function handleCloseModal() {
-  selectedAgentId.value = null
-}
-
-function handleAgentSelect(id: string) {
-  selectedAgentId.value = id
+  agentStore.selectAgent(null)
 }
 
 function handleChangeModel(agentId: string, modelAlias: string) {
@@ -149,24 +120,25 @@ onUnmounted(() => {
           @update-positions="handleUpdatePositions"
         />
 
-        <TaskStrip :tasks="taskStore.taskList" />
+        <TaskStrip :tasks="taskStore.taskList" :loading="taskStore.loading" :error="taskStore.error" />
       </div>
 
       <!-- Rail: IrisChat -->
       <IrisChat
         :messages="chatStore.messageList"
         :is-thinking="chatStore.isThinking"
+        :error="chatStore.error"
         @send="handleChatSend"
       />
     </div>
 
     <!-- Agent Detail Modal -->
     <AgentDetailModal
-      v-if="modalOpen && selectedAgent"
-      :agent="selectedAgent"
-      :agent-order="agentOrder"
+      v-if="agentStore.modalOpen && agentStore.selectedAgent"
+      :agent="agentStore.selectedAgent"
+      :agent-order="agentStore.agentOrder"
       @close="handleCloseModal"
-      @select="handleAgentSelect"
+      @select="handleSelect"
       @change-model="handleChangeModel"
     />
   </div>