From b0e65e39808e10b209bad30f0d2972d35503ea24 Mon Sep 17 00:00:00 2001
From: AzuTear <vmbao62@hotmail.com>
Date: Sun, 14 Jun 2026 15:56:40 +0200
Subject: [PATCH] style: strengthen flow lines and tighten modal demo parity

---
 frontend/src/components/dashboard/v2/AgentDetailModal.vue | 8 +++++++-
 frontend/src/components/dashboard/v2/FlowCanvas.vue       | 4 ++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/dashboard/v2/AgentDetailModal.vue b/frontend/src/components/dashboard/v2/AgentDetailModal.vue
index f050143..30c6623 100644
--- a/frontend/src/components/dashboard/v2/AgentDetailModal.vue
+++ b/frontend/src/components/dashboard/v2/AgentDetailModal.vue
@@ -87,6 +87,12 @@ const statusColors: Record<string, string> = {
   idle: 'var(--st-idle)',
   block: 'var(--st-block)',
 }
+
+function avatarLabel() {
+  if (props.agent.id === 'iris') return 'IR'
+  if (props.agent.name === 'Full-Stack Developer') return '</>'
+  return props.agent.name.slice(0, 2).toUpperCase()
+}
 </script>
 
 <template>
@@ -99,7 +105,7 @@ const statusColors: Record<string, string> = {
       <!-- Header -->
       <div class="m-head">
         <div :class="['m-av', { iris: agent.id === 'iris' }]">
-          {{ agent.id === 'iris' ? 'IR' : agent.name.slice(0, 2).toUpperCase() }}
+          {{ avatarLabel() }}
         </div>
         <div style="flex:1; min-width:0">
           <div class="m-name">{{ agent.name }}</div>
diff --git a/frontend/src/components/dashboard/v2/FlowCanvas.vue b/frontend/src/components/dashboard/v2/FlowCanvas.vue
index 14f1f85..16775cf 100644
--- a/frontend/src/components/dashboard/v2/FlowCanvas.vue
+++ b/frontend/src/components/dashboard/v2/FlowCanvas.vue
@@ -114,8 +114,8 @@ function renderEdges() {
     } else {
       // Orchestration (Iris → Agent)
       const targetAgent = props.agents.find(a => a.id === e.b)
-      const op = targetAgent && isActive(targetAgent.status) ? 0.45 : 0.18
-      paths += `<path d="${d}" fill="none" stroke="#7c6cff" stroke-width="1.2" stroke-dasharray="2 6" opacity="${op}"/>`
+      const op = targetAgent && isActive(targetAgent.status) ? 0.52 : 0.34
+      paths += `<path d="${d}" fill="none" stroke="#8b7cff" stroke-width="1.45" stroke-dasharray="2 6" opacity="${op}"/>`
     }
   })