From db1a46af3937b914a50fdfb4b4be62ad97a9920e Mon Sep 17 00:00:00 2001
From: "DESKTOP-72TV0V4\\caoxiaozhu" <leocaoxiaozhu@163.com>
Date: Wed, 25 Mar 2026 15:45:10 +0800
Subject: [PATCH] Update agents hierarchy canvas interactions

Expand the agents page into a three-tier org chart, refine zoom and active route feedback, and cover the hierarchy behavior with targeted tests.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/agents/agentsPage.test.ts |  29 +
 frontend/src/pages/agents/index.vue          | 834 ++++++++++++-------
 2 files changed, 559 insertions(+), 304 deletions(-)

diff --git a/frontend/src/pages/agents/agentsPage.test.ts b/frontend/src/pages/agents/agentsPage.test.ts
index 9cdda37..e60e513 100644
--- a/frontend/src/pages/agents/agentsPage.test.ts
+++ b/frontend/src/pages/agents/agentsPage.test.ts
@@ -64,6 +64,24 @@ describe('agents page pcb command center', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     vi.useFakeTimers()
+    vi.stubGlobal('ResizeObserver', class {
+      observe() {}
+      disconnect() {}
+      unobserve() {}
+    })
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: vi.fn().mockImplementation(() => ({
+        matches: true,
+        media: '(prefers-reduced-motion: no-preference)',
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    })
     mocks.getHierarchyStats.mockResolvedValue(hierarchyStats)
     mocks.updateConfig.mockResolvedValue({})
   })
@@ -92,6 +110,17 @@ describe('agents page pcb command center', () => {
     expect(routeTelemetry.text()).toContain('STEPS')
   })
 
+  it('renders child agents beneath the four main roles in the same hierarchy canvas', async () => {
+    const wrapper = mount(AgentsPage)
+    await Promise.resolve()
+    await Promise.resolve()
+
+    expect(wrapper.get('[data-testid="agent-chip-planner_scope"]').text()).toContain('SCOPE')
+    expect(wrapper.get('[data-testid="agent-chip-planner_steps"]').text()).toContain('STEPS')
+    expect(wrapper.get('[data-testid="agent-chip-executor_tasks"]').text()).toContain('TASK OPS')
+    expect(wrapper.get('[data-testid="agent-chip-analyst_insights"]').text()).toContain('INSIGHTS')
+  })
+
   it('keeps the configuration drawer available when selecting a main agent chip', async () => {
     const wrapper = mount(AgentsPage)
     await Promise.resolve()
diff --git a/frontend/src/pages/agents/index.vue b/frontend/src/pages/agents/index.vue
index ea7ee79..5ac1d55 100644
--- a/frontend/src/pages/agents/index.vue
+++ b/frontend/src/pages/agents/index.vue
@@ -1,13 +1,11 @@
 <template>
   <div class="agent-view scanlines">
-    <!-- Background -->
     <div class="bg-grid"></div>
     <div class="bg-glow"></div>
     <div class="bg-particles">
       <span v-for="p in bgParticles" :key="p.id" class="bg-particle" :style="p.style"></span>
     </div>
 
-    <!-- Header -->
     <div class="view-header">
       <div class="header-title">
         <span class="title-bracket">[</span>
@@ -29,7 +27,6 @@
       </div>
     </div>
 
-    <!-- Nodes Canvas -->
     <div
       class="nodes-canvas"
       ref="canvasRef"
@@ -39,9 +36,33 @@
     >
       <div class="canvas-aura"></div>
       <div class="canvas-scan"></div>
+
+      <div class="hud-panels">
+        <div class="hud-panel commander-skills" data-testid="commander-skills">
+          <div class="hud-title">指挥官技能</div>
+          <div class="skill-list">
+            <div
+              v-for="skill in commanderSkills"
+              :key="skill.id"
+              class="skill-chip"
+              :class="{ active: activeSkillId === skill.id }"
+              :data-testid="`commander-skill-${skill.id}`"
+            >
+              <span class="skill-label">{{ skill.label }}</span>
+              <span class="skill-title">{{ skill.title }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="hud-panel route-telemetry" data-testid="route-telemetry">
+          <div class="hud-title">ACTIVE ROUTE</div>
+          <div class="route-main">{{ activeMainRouteLabel }}</div>
+          <div class="route-child">{{ activeChildRouteLabel }}</div>
+        </div>
+      </div>
+
       <div class="nodes-viewport" :style="viewportStyle">
         <div class="nodes-stage" :style="stageStyle">
-          <!-- SVG for connection lines (dynamically sized to canvas) -->
           <svg class="conn-svg" ref="svgRef">
             <defs>
               <filter id="lineGlow">
@@ -49,25 +70,40 @@
                 <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
               </filter>
             </defs>
+
             <path
-              v-for="sub in subAgents"
-              :key="`line-${sub.id}`"
-              :d="getLinePath(sub.id)"
+              v-for="agent in mainAgents"
+              :key="`bus-${agent.id}`"
+              :d="getBusLinePath(agent.id)"
               class="conn-path"
-              :class="{ active: activeLine === sub.id }"
+              :class="{ energized: activeMainId === agent.id }"
+              :data-testid="`bus-link-${agent.id}`"
+            />
+            <path
+              v-for="agent in activeMainAgents"
+              :key="`bus-current-${agent.id}`"
+              :d="getBusLinePath(agent.id)"
+              class="conn-current"
+              :data-testid="`bus-current-${agent.id}`"
+            />
+
+            <path
+              v-for="child in childAgents"
+              :key="`sub-${child.id}`"
+              :d="getSubLinePath(child.id)"
+              class="conn-path conn-path-sub"
+              :class="{ energized: activeChildId === child.id }"
+              :data-testid="`sub-link-${child.id}`"
+            />
+            <path
+              v-for="child in activeChildAgents"
+              :key="`sub-current-${child.id}`"
+              :d="getSubLinePath(child.id)"
+              class="conn-current conn-current-sub"
+              :data-testid="`sub-current-${child.id}`"
             />
-            <circle r="5" class="pulse-dot">
-              <animateMotion
-                v-if="firingLine"
-                :dur="pulseDuration + 'ms'"
-                :path="getLinePath(firingLine)"
-                fill="freeze"
-                @end="onPulseEnd"
-              />
-            </circle>
           </svg>
 
-          <!-- Master node -->
           <div
             ref="masterCardRef"
             class="node-card node-master"
@@ -90,47 +126,76 @@
               <div class="node-footer">
                 <span class="node-stat">
                   <span class="stat-label">调用</span>
-                  <span class="stat-val">{{ agentData['master']?.callCount || 0 }}</span>
-                </span>
-                <span v-if="agentData['master']?.currentTask" class="node-task-tag">
-                  {{ agentData['master'].currentTask }}
+                  <span class="stat-val">{{ agentData.master?.callCount || 0 }}</span>
                 </span>
+                <span v-if="agentData.master?.currentTask" class="node-task-tag">{{ agentData.master.currentTask }}</span>
               </div>
             </div>
           </div>
 
-          <!-- Sub-agent nodes -->
           <div
-            v-for="sub in subAgents"
-            :key="sub.id"
-            :ref="el => setSubRef(sub.id, el as HTMLElement)"
+            v-for="agent in mainAgents"
+            :key="agent.id"
+            :ref="el => setNodeRef(agent.id, el as HTMLElement)"
             class="node-card node-sub"
-            :class="{ selected: selectedAgentId === sub.id, disabled: !localAgents[sub.id]?.enabled }"
-            :style="getSubNodeStyle(sub)"
-            @click="selectAgent(sub.id)"
+            :class="{ selected: selectedAgentId === agent.id, disabled: !localAgents[agent.id]?.enabled }"
+            :style="getMainNodeStyle(agent.id)"
+            :data-testid="`agent-chip-${agent.id}`"
+            @click="selectAgent(agent.id)"
           >
             <div class="node-inner">
               <div class="node-corner tl"></div>
               <div class="node-corner tr"></div>
               <div class="node-corner bl"></div>
               <div class="node-corner br"></div>
-              <div class="node-status" :class="getStatusClass(sub.id)">
+              <div class="node-status" :class="getStatusClass(agent.id)">
                 <span class="status-ring"></span>
               </div>
-              <div class="node-label">{{ sub.name }}</div>
-              <div class="node-role">{{ sub.role }}</div>
-              <div class="node-desc">{{ sub.description }}</div>
+              <div class="node-label">{{ getAgentName(agent.id) }}</div>
+              <div class="node-role">{{ getAgentRole(agent.id) }}</div>
+              <div class="node-desc">{{ getAgentDesc(agent.id) }}</div>
               <div class="node-footer">
                 <span class="node-stat">
                   <span class="stat-label">调用</span>
-                  <span class="stat-val">{{ agentData[sub.id]?.callCount || 0 }}</span>
-                </span>
-                <span v-if="agentData[sub.id]?.currentTask" class="node-task-tag">
-                  {{ agentData[sub.id].currentTask }}
+                  <span class="stat-val">{{ agentData[agent.id]?.callCount || 0 }}</span>
                 </span>
+                <span v-if="agentData[agent.id]?.currentTask" class="node-task-tag">{{ agentData[agent.id]?.currentTask }}</span>
                 <span v-else class="node-idle">待机中</span>
               </div>
-              <div class="rel-label">{{ sub.relLabel }}</div>
+              <div class="rel-label">{{ relationLabels[`master-${agent.id}`] }}</div>
+            </div>
+          </div>
+
+          <div
+            v-for="child in childAgents"
+            :key="child.id"
+            :ref="el => setNodeRef(child.id, el as HTMLElement)"
+            class="node-card node-sub node-child"
+            :class="{ selected: selectedAgentId === child.id, disabled: !localAgents[child.id]?.enabled }"
+            :style="getChildNodeStyle(child.id)"
+            :data-testid="`agent-chip-${child.id}`"
+            @click="selectAgent(child.id)"
+          >
+            <div class="node-inner">
+              <div class="node-corner tl"></div>
+              <div class="node-corner tr"></div>
+              <div class="node-corner bl"></div>
+              <div class="node-corner br"></div>
+              <div class="node-status" :class="getStatusClass(child.id)">
+                <span class="status-ring"></span>
+              </div>
+              <div class="node-label">{{ child.name }}</div>
+              <div class="node-role">{{ child.role }}</div>
+              <div class="node-desc">{{ child.description }}</div>
+              <div class="node-footer">
+                <span class="node-stat">
+                  <span class="stat-label">调用</span>
+                  <span class="stat-val">{{ agentData[child.id]?.callCount || 0 }}</span>
+                </span>
+                <span v-if="agentData[child.id]?.currentTask" class="node-task-tag">{{ agentData[child.id]?.currentTask }}</span>
+                <span v-else class="node-idle">待机中</span>
+              </div>
+              <div class="rel-label">{{ child.toolScopeLabel }}</div>
             </div>
           </div>
         </div>
@@ -149,7 +214,6 @@
       </div>
     </div>
 
-    <!-- Right Drawer -->
     <Transition :css="false" @enter="animateIn" @leave="animateOut">
       <div v-if="drawerOpen" class="config-drawer">
         <div class="drawer-header">
@@ -194,7 +258,6 @@
       </div>
     </Transition>
 
-    <!-- Add Modal -->
     <Transition :css="false" @enter="animateIn" @leave="animateOut">
       <div v-if="addModalOpen" class="modal-overlay" @click.self="addModalOpen = false">
         <div class="modal-card">
@@ -239,47 +302,56 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
+import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
 import { RefreshCw, X, Plus } from 'lucide-vue-next'
-import { DEFAULT_AGENTS, RELATION_LABELS } from '@/data/agents'
-import type { Agent } from '@/data/agents'
-import { agentApi } from '@/api/agent'
+import { COMMANDER_SKILLS, DEFAULT_AGENTS, MAIN_AGENT_ORDER, RELATION_LABELS, SUB_COMMANDERS } from '@/data/agents'
+import type { Agent, MainAgentId, SubCommander } from '@/data/agents'
+import { agentApi, type AgentHierarchyStats, type AgentStats } from '@/api/agent'
 
-// ── Node dimensions ──────────────────────────────────────────────
 const NODE_W = 200
 const NODE_H = 170
-const MASTER_TOP = 48       // px from top
-const SUB_TOP = 350         // px from top
-// Horizontal percentages: master=50%, subs=12.5/37.5/62.5/87.5%
-const SUB_XS = [12.5, 37.5, 62.5, 87.5]
-
-// ── Sub-agent static data ────────────────────────────────────────
-interface SubAgentCard {
-  id: string
-  name: string
-  role: string
-  description: string
-  relLabel: string
+const CHILD_W = 140
+const CHILD_H = 150
+const MASTER_TOP = 48
+const MAIN_TOP = 350
+const CHILD_TOP = 640
+const MAIN_XS: Record<Exclude<MainAgentId, 'master'>, number> = {
+  planner: 12.5,
+  executor: 37.5,
+  librarian: 62.5,
+  analyst: 87.5,
 }
-
-const subAgents: SubAgentCard[] = [
-  { id: 'planner', name: 'PLANNER', role: '规划者', description: '制定任务计划，拆解复杂目标为可执行步骤', relLabel: RELATION_LABELS['master-planner'] },
-  { id: 'executor', name: 'EXECUTOR', role: '执行者', description: '调用工具执行具体操作，创建/更新/删除系统资源', relLabel: RELATION_LABELS['master-executor'] },
-  { id: 'librarian', name: 'LIBRARIAN', role: '知识官', description: '管理知识库和知识图谱，检索相关信息，更新记忆', relLabel: RELATION_LABELS['master-librarian'] },
-  { id: 'analyst', name: 'ANALYST', role: '分析师', description: '分析工作数据，生成统计报告，提供洞察建议', relLabel: RELATION_LABELS['master-analyst'] },
-]
+const CHILD_LANE_OFFSET = 6
+const motionEnabled = typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+  ? window.matchMedia('(prefers-reduced-motion: no-preference)').matches
+  : false
+const MIN_ZOOM = 0.8
+const MAX_ZOOM = 1.6
+const ZOOM_STEP = 0.1
+const CRISP_ZOOM_THRESHOLD = 1.12
+const OFFLINE_ROUTE_INTERVAL = 1700
 
 type PlaybackHandle = ReturnType<typeof window.setTimeout>
+type PollHandle = ReturnType<typeof setInterval>
+interface AgentRuntimeState {
+  callCount: number
+  currentTask: string | null
+  status: string
+}
 
+const mainAgents = computed(() => MAIN_AGENT_ORDER.map(id => localAgents[id]))
+const childAgents = SUB_COMMANDERS
+const commanderSkills = COMMANDER_SKILLS
+const relationLabels = RELATION_LABELS
+const childLabelMap = Object.fromEntries(childAgents.map(child => [child.id, child.name])) as Record<string, string>
+const childMetaMap = Object.fromEntries(childAgents.map(child => [child.id, child])) as Record<string, SubCommander>
 
-// ── Refs ────────────────────────────────────────────────────────
 const canvasRef = ref<HTMLElement | null>(null)
 const svgRef = ref<SVGElement | null>(null)
 const masterCardRef = ref<HTMLElement | null>(null)
-const subRefs: Record<string, HTMLElement> = {}
+const nodeRefs: Record<string, HTMLElement> = {}
 const cleanupFns: Array<() => void> = []
 const hoverResetTimers: Record<string, PlaybackHandle | null> = {}
-// Background particles
 const bgParticles = Array.from({ length: 60 }, (_, i) => {
   const d = 3 + Math.random() * 5
   const delay = Math.random() * 4
@@ -301,6 +373,8 @@ const bgParticles = Array.from({ length: 60 }, (_, i) => {
 })
 
 let resizeObserver: ResizeObserver | null = null
+let pollInterval: PollHandle | null = null
+let demoInterval: PollHandle | null = null
 
 const selectedAgentId = ref<string | null>(null)
 const drawerOpen = ref(false)
@@ -318,98 +392,93 @@ const panOrigin = reactive({ x: 0, y: 0 })
 const connectionStatus = ref<'connected' | 'disconnected'>('disconnected')
 const connectionLabel = computed(() => connectionStatus.value === 'connected' ? '实时同步' : '离线模式')
 const zoomPercent = computed(() => `${Math.round(zoom.value * 100)}%`)
-function roundPx(value: number) {
-  return Math.round(value)
-}
+const activeMainId = ref<string>('planner')
+const activeChildId = ref<string>('planner_scope')
+const agentData = reactive<Record<string, AgentRuntimeState>>({})
+
+const localAgents = reactive<Record<string, Agent>>(
+  Object.fromEntries([
+    ...DEFAULT_AGENTS,
+    ...SUB_COMMANDERS.map((child) => ({
+      id: child.id,
+      name: child.name,
+      role: child.role,
+      roleKey: child.id,
+      description: child.description,
+      systemPrompt: `${child.role}：${child.description}`,
+      enabled: true,
+    })),
+  ].map(agent => [agent.id, { ...agent }]))
+)
+
+const layoutZoom = computed(() => Math.min(zoom.value, CRISP_ZOOM_THRESHOLD))
+const stageScale = computed(() => zoom.value / layoutZoom.value)
 
 const viewportStyle = computed(() => ({
   transform: `translate(${roundPx(basePan.x + pan.x)}px, ${roundPx(basePan.y + pan.y)}px)`,
 }))
+
 const stageStyle = computed(() => ({
   width: '100%',
+  minHeight: `${roundPx((CHILD_TOP + CHILD_H + 120) * layoutZoom.value)}px`,
   left: '0px',
-  '--node-scale': String(zoom.value),
+  transform: `scale(${stageScale.value})`,
+  transformOrigin: '50% 0%',
+  '--node-scale': String(layoutZoom.value),
 }))
-const motionEnabled = window.matchMedia('(prefers-reduced-motion: no-preference)').matches
-const MIN_ZOOM = 0.8
-const MAX_ZOOM = 1.6
-const ZOOM_STEP = 0.1
 
-const agentData = reactive<Record<string, { callCount: number; currentTask: string | null; status: string }>>({})
-const activeLine = ref<string | null>(null)
-const firingLine = ref<string | null>(null)
-const pulseDuration = 600
+const activeSkillId = computed(() => {
+  const current = activeChildId.value || activeMainId.value
+  return commanderSkills.find(skill => skill.relatedAgentIds.includes(current) || skill.relatedAgentIds.includes(activeMainId.value))?.id ?? 'skill_orchestration'
+})
+const activeMainAgents = computed(() => mainAgents.value.filter(agent => agent.id === activeMainId.value))
+const activeChildAgents = computed(() => childAgents.filter(child => child.id === activeChildId.value))
+const activeMainRouteLabel = computed(() => (activeMainId.value || 'master').toUpperCase())
+const activeChildRouteLabel = computed(() => childLabelMap[activeChildId.value] || 'STANDBY')
 
-const localAgents = reactive<Record<string, Agent>>(
-  Object.fromEntries(DEFAULT_AGENTS.map(a => [a.id, { ...a }]))
-)
-
-let pollInterval: ReturnType<typeof setInterval> | null = null
-
-// ── Layout ─────────────────────────────────────────────────────
-function pxToSvg(pctX: number, top: number) {
-  const canvas = canvasRef.value
-  if (!canvas) return { x: 0, y: top }
-  return {
-    x: (pctX / 100) * canvas.clientWidth,
-    y: top,
-  }
+function roundPx(value: number) {
+  return Math.round(value)
 }
 
 function getCanvasMetrics() {
   const canvas = canvasRef.value
   if (!canvas) return { width: 0, height: 0 }
-  return {
-    width: canvas.clientWidth,
-    height: canvas.clientHeight,
-  }
+  return { width: canvas.clientWidth, height: canvas.clientHeight }
+}
+
+function pxToSvg(pctX: number) {
+  const canvas = canvasRef.value
+  if (!canvas) return 0
+  return (pctX / 100) * canvas.clientWidth
 }
 
 function updateBasePan() {
-  const { width } = getCanvasMetrics()
+  const { width, height } = getCanvasMetrics()
   const scaledWidth = width * zoom.value
+  const scaledHeight = height * zoom.value
   basePan.x = width ? roundPx((width - scaledWidth) / 2) : 0
-  basePan.y = 0
+  basePan.y = height ? roundPx((height - scaledHeight) / 2) : 0
 }
 
-function getNodeMetrics() {
+function getNodeMetrics(width = NODE_W, height = NODE_H) {
   return {
-    width: roundPx(NODE_W * zoom.value),
-    height: roundPx(NODE_H * zoom.value),
-    paddingX: roundPx(16 * zoom.value),
-    paddingY: roundPx(14 * zoom.value),
-    corner: Math.max(6, roundPx(10 * zoom.value)),
-    status: Math.max(8, roundPx(10 * zoom.value)),
-    statusRing: Math.max(6, roundPx(8 * zoom.value)),
-    relOffset: roundPx(-20 * zoom.value),
+    width: roundPx(width * layoutZoom.value),
+    height: roundPx(height * layoutZoom.value),
+    paddingX: roundPx(16 * layoutZoom.value),
+    paddingY: roundPx(14 * layoutZoom.value),
+    corner: Math.max(6, roundPx(10 * layoutZoom.value)),
+    status: Math.max(8, roundPx(10 * layoutZoom.value)),
+    statusRing: Math.max(6, roundPx(8 * layoutZoom.value)),
+    relOffset: roundPx(-20 * layoutZoom.value),
   }
 }
 
-const masterNodeStyle = computed(() => {
-  const { x } = pxToSvg(50, MASTER_TOP)
-  const metrics = getNodeMetrics()
+function buildNodeStyle(centerPct: number, top: number, width = NODE_W, height = NODE_H) {
+  const x = pxToSvg(centerPct)
+  const metrics = getNodeMetrics(width, height)
   return {
     left: `${roundPx(x - metrics.width / 2)}px`,
-    top: `${roundPx(MASTER_TOP)}px`,
-    width: `${metrics.width}px`,
-    height: `${metrics.height}px`,
-    '--node-padding-x': `${metrics.paddingX}px`,
-    '--node-padding-y': `${metrics.paddingY}px`,
-    '--node-corner-size': `${metrics.corner}px`,
-    '--node-status-size': `${metrics.status}px`,
-    '--node-status-ring-size': `${metrics.statusRing}px`,
-    '--node-rel-offset': `${metrics.relOffset}px`,
-  }
-})
-
-function getSubNodeStyle(sub: SubAgentCard) {
-  const idx = subAgents.findIndex(s => s.id === sub.id)
-  const pct = SUB_XS[idx] ?? 50
-  const { x } = pxToSvg(pct, SUB_TOP)
-  const metrics = getNodeMetrics()
-  return {
-    left: `${roundPx(x - metrics.width / 2)}px`,
-    top: `${roundPx(SUB_TOP)}px`,
+    top: `${roundPx(top)}px`,
     width: `${metrics.width}px`,
     height: `${metrics.height}px`,
     '--node-padding-x': `${metrics.paddingX}px`,
@@ -421,36 +490,50 @@ function getSubNodeStyle(sub: SubAgentCard) {
   }
 }
 
-function getLinePath(subId: string) {
-  const canvas = canvasRef.value
-  if (!canvas) return ''
-  const w = canvas.clientWidth
-  const idx = subAgents.findIndex(s => s.id === subId)
-  const subPct = SUB_XS[idx] ?? 50
-  const metrics = getNodeMetrics()
-  const masterX = (50 / 100) * w
-  const masterY = MASTER_TOP + metrics.height / 2
-  const subX = (subPct / 100) * w
-  const subY = SUB_TOP + metrics.height / 2
-  const midY = (masterY + subY) / 2
-  return `M ${roundPx(masterX)},${roundPx(masterY)} C ${roundPx(masterX)},${roundPx(midY)} ${roundPx(subX)},${roundPx(midY)} ${roundPx(subX)},${roundPx(subY)}`
+const masterNodeStyle = computed(() => buildNodeStyle(50, MASTER_TOP, NODE_W, NODE_H))
+function getMainNodeStyle(id: string) {
+  return buildNodeStyle(MAIN_XS[id as keyof typeof MAIN_XS] ?? 50, MAIN_TOP, NODE_W, NODE_H)
+}
+function getChildNodeStyle(id: string) {
+  const child = childMetaMap[id]
+  const parentX = MAIN_XS[child.parentId]
+  const siblingIndex = childAgents.filter(item => item.parentId === child.parentId).findIndex(item => item.id === id)
+  const offset = siblingIndex === 0 ? -CHILD_LANE_OFFSET : CHILD_LANE_OFFSET
+  return buildNodeStyle(parentX + offset, CHILD_TOP, CHILD_W, CHILD_H)
+}
+
+function getCurvePath(fromX: number, fromY: number, toX: number, toY: number) {
+  const midY = (fromY + toY) / 2
+  return `M ${roundPx(fromX)},${roundPx(fromY)} C ${roundPx(fromX)},${roundPx(midY)} ${roundPx(toX)},${roundPx(midY)} ${roundPx(toX)},${roundPx(toY)}`
+}
+
+function getBusLinePath(mainId: string) {
+  const metrics = getNodeMetrics()
+  return getCurvePath(pxToSvg(50), MASTER_TOP + metrics.height / 2, pxToSvg(MAIN_XS[mainId as keyof typeof MAIN_XS] ?? 50), MAIN_TOP + metrics.height / 2)
+}
+
+function getSubLinePath(childId: string) {
+  const child = childMetaMap[childId]
+  const mainMetrics = getNodeMetrics()
+  const childMetrics = getNodeMetrics(CHILD_W, CHILD_H)
+  const parentX = pxToSvg(MAIN_XS[child.parentId])
+  const siblingIndex = childAgents.filter(item => item.parentId === child.parentId).findIndex(item => item.id === childId)
+  const childX = pxToSvg(MAIN_XS[child.parentId] + (siblingIndex === 0 ? -CHILD_LANE_OFFSET : CHILD_LANE_OFFSET))
+  return getCurvePath(parentX, MAIN_TOP + mainMetrics.height / 2, childX, CHILD_TOP + childMetrics.height / 2)
 }
 
-// ── SVG sizing ──────────────────────────────────────────────────
 function updateSvgSize() {
   const canvas = canvasRef.value
   const svg = svgRef.value
   if (!canvas || !svg) return
   svg.setAttribute('width', String(canvas.clientWidth))
-  svg.setAttribute('height', String(canvas.clientHeight))
+  svg.setAttribute('height', String(Math.max(canvas.clientHeight, CHILD_TOP + CHILD_H + 120)))
 }
 
-// ── Ref helpers ──────────────────────────────────────────────────
-function setSubRef(id: string, el: HTMLElement | null) {
-  if (el) subRefs[id] = el
+function setNodeRef(id: string, el: HTMLElement | null) {
+  if (el) nodeRefs[id] = el
 }
 
-// ── Status / data ────────────────────────────────────────────────
 function getStatusClass(agentId: string) {
   const data = agentData[agentId]
   const agent = localAgents[agentId]
@@ -458,44 +541,62 @@ function getStatusClass(agentId: string) {
   if (!data) return 'idle'
   return data.status === 'active' ? 'active' : 'idle'
 }
-function getAgentName(id: string) { return localAgents[id]?.name || DEFAULT_AGENTS.find(a => a.id === id)?.name || id.toUpperCase() }
-function getAgentRole(id: string) { return localAgents[id]?.role || DEFAULT_AGENTS.find(a => a.id === id)?.role || '' }
-function getAgentDesc(id: string) { return localAgents[id]?.description || DEFAULT_AGENTS.find(a => a.id === id)?.description || '' }
+function getAgentName(id: string) { return localAgents[id]?.name || id.toUpperCase() }
+function getAgentRole(id: string) { return localAgents[id]?.role || '' }
+function getAgentDesc(id: string) { return localAgents[id]?.description || '' }
 function clampZoom(value: number) {
   return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, Number(value.toFixed(2))))
 }
 
+function applyZoom(nextZoom: number, anchorX?: number, anchorY?: number) {
+  const clamped = clampZoom(nextZoom)
+  const canvas = canvasRef.value
+  const previousZoom = zoom.value
+
+  if (!canvas || clamped === previousZoom) {
+    zoom.value = clamped
+    updateBasePan()
+    return
+  }
+
+  const rect = canvas.getBoundingClientRect()
+  const localX = anchorX ?? rect.width / 2
+  const localY = anchorY ?? rect.height / 2
+  const contentX = (localX - (basePan.x + pan.x)) / previousZoom
+  const contentY = (localY - (basePan.y + pan.y)) / previousZoom
+
+  zoom.value = clamped
+  updateBasePan()
+
+  pan.x = roundPx(localX - basePan.x - contentX * zoom.value)
+  pan.y = roundPx(localY - basePan.y - contentY * zoom.value)
+}
+
 function zoomIn() {
-  zoom.value = clampZoom(zoom.value + ZOOM_STEP)
-  updateBasePan()
+  applyZoom(zoom.value + ZOOM_STEP)
 }
-
 function zoomOut() {
-  zoom.value = clampZoom(zoom.value - ZOOM_STEP)
-  updateBasePan()
+  applyZoom(zoom.value - ZOOM_STEP)
 }
-
 function resetView() {
   zoom.value = 1
   pan.x = 0
   pan.y = 0
   updateBasePan()
-  requestAnimationFrame(() => {
-    pan.x = 0
-    pan.y = 0
-  })
 }
-
 function handleWheel(event: WheelEvent) {
   const delta = event.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP
-  zoom.value = clampZoom(zoom.value + delta)
-  updateBasePan()
+  const canvas = canvasRef.value
+  if (!canvas) {
+    applyZoom(zoom.value + delta)
+    return
+  }
+  const rect = canvas.getBoundingClientRect()
+  applyZoom(zoom.value + delta, event.clientX - rect.left, event.clientY - rect.top)
 }
-
 function startPan(event: MouseEvent) {
   const target = event.target as HTMLElement | null
-  if (!target || target.closest('.node-card') || target.closest('.canvas-controls')) return
-
+  if (!target || target.closest('.node-card') || target.closest('.canvas-controls') || target.closest('.hud-panel')) return
   isPanning.value = true
   panStart.x = event.clientX
   panStart.y = event.clientY
@@ -504,19 +605,16 @@ function startPan(event: MouseEvent) {
   window.addEventListener('mousemove', movePan)
   window.addEventListener('mouseup', endPan, { once: true })
 }
-
 function movePan(event: MouseEvent) {
   if (!isPanning.value) return
   pan.x = panOrigin.x + event.clientX - panStart.x
   pan.y = panOrigin.y + event.clientY - panStart.y
 }
-
 function endPan() {
   isPanning.value = false
   window.removeEventListener('mousemove', movePan)
 }
 
-// ── Actions ───────────────────────────────────────────────────────
 function selectAgent(id: string) {
   const agent = localAgents[id]
   if (!agent) return
@@ -526,8 +624,16 @@ function selectAgent(id: string) {
 }
 
 function resetConfig() {
-  const original = DEFAULT_AGENTS.find(a => a.id === selectedAgentId.value)
-  if (original && editAgent.value) Object.assign(editAgent.value, { name: original.name, role: original.role, description: original.description, systemPrompt: original.systemPrompt, enabled: original.enabled })
+  const original = localAgents[selectedAgentId.value || '']
+  if (original && editAgent.value) {
+    Object.assign(editAgent.value, {
+      name: original.name,
+      role: original.role,
+      description: original.description,
+      systemPrompt: original.systemPrompt,
+      enabled: original.enabled,
+    })
+  }
 }
 
 async function saveConfig() {
@@ -536,10 +642,19 @@ async function saveConfig() {
   try {
     if (localAgents[selectedAgentId.value]) Object.assign(localAgents[selectedAgentId.value], editAgent.value)
     try {
-      await agentApi.updateConfig(selectedAgentId.value, { name: editAgent.value!.name, description: editAgent.value!.description, system_prompt: editAgent.value!.systemPrompt, enabled: editAgent.value!.enabled })
-    } catch { /* local only */ }
+      await agentApi.updateConfig(selectedAgentId.value, {
+        name: editAgent.value.name,
+        description: editAgent.value.description,
+        system_prompt: editAgent.value.systemPrompt,
+        enabled: editAgent.value.enabled,
+      })
+    } catch {
+      // local only
+    }
     drawerOpen.value = false
-  } finally { saving.value = false }
+  } finally {
+    saving.value = false
+  }
 }
 
 function addAgent() {
@@ -550,149 +665,198 @@ function addAgent() {
   addModalOpen.value = false
 }
 
+function setRuntimeState(agentId: string, state: AgentStats) {
+  agentData[agentId] = {
+    callCount: state.call_count,
+    currentTask: state.current_task,
+    status: state.status,
+  }
+}
+
+function applyHierarchyStats(stats: AgentHierarchyStats) {
+  agentData.master = { callCount: 47, currentTask: '协调组织链路', status: 'active' }
+  let nextMain = 'planner'
+  let nextChild = 'planner_scope'
+
+  for (const main of stats.main_agents) {
+    setRuntimeState(main.agent_id, main)
+    if (main.status === 'active') nextMain = main.agent_id
+
+    for (const child of main.sub_commanders) {
+      setRuntimeState(child.agent_id, child)
+      if (child.status === 'active') {
+        nextMain = main.agent_id
+        nextChild = child.agent_id
+      }
+    }
+  }
+
+  activeMainId.value = nextMain
+  activeChildId.value = nextChild
+}
+
+function stopDemoRouteCycle() {
+  if (demoInterval) {
+    clearInterval(demoInterval)
+    demoInterval = null
+  }
+}
+
+function startDemoRouteCycle() {
+  stopDemoRouteCycle()
+  const demoRoutes = childAgents.map(child => ({ mainId: child.parentId, childId: child.id }))
+  let index = 0
+  const applyRoute = () => {
+    const route = demoRoutes[index]
+    activeMainId.value = route.mainId
+    activeChildId.value = route.childId
+    index = (index + 1) % demoRoutes.length
+  }
+  applyRoute()
+  demoInterval = setInterval(applyRoute, OFFLINE_ROUTE_INTERVAL)
+}
+
+function buildOfflineStats() {
+  return {
+    main_agents: [
+      {
+        agent_id: 'planner',
+        call_count: 12,
+        current_task: null,
+        status: 'active',
+        sub_commanders: [
+          { agent_id: 'planner_scope', call_count: 4, current_task: '收束需求', status: 'active' },
+          { agent_id: 'planner_steps', call_count: 9, current_task: null, status: 'idle' },
+        ],
+      },
+      {
+        agent_id: 'executor',
+        call_count: 8,
+        current_task: '创建文档',
+        status: 'idle',
+        sub_commanders: [
+          { agent_id: 'executor_tasks', call_count: 8, current_task: null, status: 'idle' },
+          { agent_id: 'executor_forum', call_count: 4, current_task: null, status: 'idle' },
+        ],
+      },
+      {
+        agent_id: 'librarian',
+        call_count: 5,
+        current_task: null,
+        status: 'idle',
+        sub_commanders: [
+          { agent_id: 'librarian_retrieval', call_count: 5, current_task: null, status: 'idle' },
+          { agent_id: 'librarian_graph', call_count: 2, current_task: null, status: 'idle' },
+        ],
+      },
+      {
+        agent_id: 'analyst',
+        call_count: 3,
+        current_task: null,
+        status: 'idle',
+        sub_commanders: [
+          { agent_id: 'analyst_progress', call_count: 2, current_task: null, status: 'idle' },
+          { agent_id: 'analyst_insights', call_count: 3, current_task: null, status: 'idle' },
+        ],
+      },
+    ],
+  } satisfies AgentHierarchyStats
+}
+
 async function refreshStats() {
   loading.value = true
   try {
-    const stats = await agentApi.getStats()
-    for (const s of stats) {
-      agentData[s.agent_id] = { callCount: s.call_count, currentTask: s.current_task, status: s.status }
-      if (s.status === 'active' && s.agent_id !== 'master') { firingLine.value = s.agent_id; activeLine.value = s.agent_id }
-    }
+    const stats = await agentApi.getHierarchyStats()
+    applyHierarchyStats(stats)
     connectionStatus.value = 'connected'
+    stopDemoRouteCycle()
   } catch {
     connectionStatus.value = 'disconnected'
-    agentData['master'] = { callCount: 47, currentTask: '协调子Agent工作', status: 'active' }
-    agentData['planner'] = { callCount: 12, currentTask: null, status: 'idle' }
-    agentData['executor'] = { callCount: 8, currentTask: '创建文档', status: 'active' }
-    agentData['librarian'] = { callCount: 5, currentTask: null, status: 'idle' }
-    agentData['analyst'] = { callCount: 3, currentTask: null, status: 'idle' }
-    firingLine.value = 'executor'; activeLine.value = 'executor'
+    applyHierarchyStats(buildOfflineStats())
+    startDemoRouteCycle()
+  } finally {
+    loading.value = false
   }
-  loading.value = false
 }
 
-function onPulseEnd() { firingLine.value = null; activeLine.value = null }
-
 function stopTimer(timer: PlaybackHandle | null) {
   if (timer) window.clearTimeout(timer)
 }
 
-function runTransition(
-  el: Element,
-  keyframes: Keyframe[],
-  options: KeyframeAnimationOptions,
-  done?: () => void,
-) {
-  const animation = (el as HTMLElement).animate(keyframes, {
-    fill: 'forwards',
-    ...options,
-  })
-
+function runTransition(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions, done?: () => void) {
+  const target = el as HTMLElement
+  if (typeof target.animate !== 'function') {
+    done?.()
+    return null
+  }
+  const animation = target.animate(keyframes, { fill: 'forwards', ...options })
   const finish = () => done?.()
   animation.addEventListener('finish', finish, { once: true })
   cleanupFns.push(() => animation.cancel())
   return animation
 }
 
-// ── Motion helpers ───────────────────────────────────────────────
 function animateIn(el: Element, done: () => void) {
-  runTransition(
-    el,
-    [
-      { opacity: 0, transform: 'translateX(80px)' },
-      { opacity: 1, transform: 'translateX(0)' },
-    ],
-    { duration: 350, easing: 'cubic-bezier(0.4, 0, 0.2, 1)' },
-    done,
-  )
+  runTransition(el, [{ opacity: 0, transform: 'translateX(80px)' }, { opacity: 1, transform: 'translateX(0)' }], { duration: 350, easing: 'cubic-bezier(0.4, 0, 0.2, 1)' }, done)
 }
-
 function animateOut(el: Element, done: () => void) {
-  runTransition(
-    el,
-    [
-      { opacity: 1, transform: 'translateX(0)' },
-      { opacity: 0, transform: 'translateX(80px)' },
-    ],
-    { duration: 250, easing: 'cubic-bezier(0.4, 0, 1, 1)' },
-    done,
-  )
+  runTransition(el, [{ opacity: 1, transform: 'translateX(0)' }, { opacity: 0, transform: 'translateX(80px)' }], { duration: 250, easing: 'cubic-bezier(0.4, 0, 1, 1)' }, done)
 }
-
 function fadeIn(el: Element, done: () => void) {
   runTransition(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 }, done)
 }
-
 function fadeOut(el: Element, done: () => void) {
   runTransition(el, [{ opacity: 1 }, { opacity: 0 }], { duration: 200 }, done)
 }
 
 function playEntranceAnimations() {
   if (!motionEnabled) return
-
   if (masterCardRef.value) {
-    runTransition(
-      masterCardRef.value,
-      [
-        { opacity: 0, transform: 'translateY(14px) scale(0.99)', filter: 'brightness(0.86)' },
-        { opacity: 1, transform: 'translateY(0) scale(1)', filter: 'brightness(1)' },
-      ],
-      { duration: 680, easing: 'cubic-bezier(0.16, 1, 0.3, 1)' },
-    )
+    runTransition(masterCardRef.value, [
+      { opacity: 0, transform: 'translateY(14px) scale(0.99)', filter: 'brightness(0.86)' },
+      { opacity: 1, transform: 'translateY(0) scale(1)', filter: 'brightness(1)' },
+    ], { duration: 680, easing: 'cubic-bezier(0.16, 1, 0.3, 1)' })
   }
 
-  subAgents.forEach((sub, idx) => {
-    const el = subRefs[sub.id]
+  ;[...mainAgents.value.map(agent => agent.id), ...childAgents.map(child => child.id)].forEach((id, idx) => {
+    const el = nodeRefs[id]
     if (!el) return
-
-    runTransition(
-      el,
-      [
-        { opacity: 0, transform: 'translateY(12px) scale(0.99)', filter: 'brightness(0.82)' },
-        { opacity: 1, transform: 'translateY(0) scale(1)', filter: 'brightness(1)' },
-      ],
-      {
-        duration: 500,
-        delay: 210 + idx * 85,
-        easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
-      },
-    )
+    runTransition(el, [
+      { opacity: 0, transform: 'translateY(12px) scale(0.99)', filter: 'brightness(0.82)' },
+      { opacity: 1, transform: 'translateY(0) scale(1)', filter: 'brightness(1)' },
+    ], { duration: 500, delay: 210 + idx * 55, easing: 'cubic-bezier(0.16, 1, 0.3, 1)' })
 
     const handleMouseEnter = () => {
-      if (!localAgents[sub.id]?.enabled) return
-      stopTimer(hoverResetTimers[sub.id] ?? null)
+      if (!localAgents[id]?.enabled) return
+      stopTimer(hoverResetTimers[id] ?? null)
       el.style.transform = 'translateY(-2px)'
     }
-
     const handleMouseLeave = () => {
-      stopTimer(hoverResetTimers[sub.id] ?? null)
-      hoverResetTimers[sub.id] = window.setTimeout(() => {
+      stopTimer(hoverResetTimers[id] ?? null)
+      hoverResetTimers[id] = window.setTimeout(() => {
         el.style.transform = ''
-        hoverResetTimers[sub.id] = null
+        hoverResetTimers[id] = null
       }, 180)
     }
 
     el.addEventListener('mouseenter', handleMouseEnter)
     el.addEventListener('mouseleave', handleMouseLeave)
     cleanupFns.push(() => {
-      stopTimer(hoverResetTimers[sub.id] ?? null)
+      stopTimer(hoverResetTimers[id] ?? null)
       el.removeEventListener('mouseenter', handleMouseEnter)
       el.removeEventListener('mouseleave', handleMouseLeave)
     })
   })
 }
 
-// ── Lifecycle ────────────────────────────────────────────────────
 onMounted(async () => {
   await refreshStats()
   pollInterval = setInterval(refreshStats, 5000)
-
   requestAnimationFrame(() => {
     updateBasePan()
     updateSvgSize()
     playEntranceAnimations()
   })
-
   resizeObserver = new ResizeObserver(() => {
     updateBasePan()
     updateSvgSize()
@@ -702,6 +866,7 @@ onMounted(async () => {
 
 onUnmounted(() => {
   if (pollInterval) clearInterval(pollInterval)
+  stopDemoRouteCycle()
   resizeObserver?.disconnect()
   window.removeEventListener('mousemove', movePan)
   window.removeEventListener('mouseup', endPan)
@@ -718,7 +883,6 @@ onUnmounted(() => {
   position: relative;
   background: var(--bg-void);
 }
-
 .bg-grid {
   position: absolute;
   inset: 0;
@@ -754,8 +918,6 @@ onUnmounted(() => {
   0%, 100% { opacity: var(--o, 0.4); transform: scale(1); }
   50% { opacity: calc(var(--o, 0.4) * 0.3); transform: scale(0.5); }
 }
-
-/* Header */
 .view-header {
   display: flex;
   align-items: center;
@@ -770,7 +932,6 @@ onUnmounted(() => {
 .header-title { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.2em; color: var(--text-primary); }
 .title-bracket { color: var(--accent-cyan); opacity: 0.6; }
 .header-actions { display: flex; align-items: center; gap: 12px; }
-
 .btn-icon {
   width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
   background: var(--bg-card); border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
@@ -779,7 +940,6 @@ onUnmounted(() => {
 .btn-icon:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); box-shadow: var(--glow-cyan); }
 .btn-icon.spinning svg { animation: spin 0.8s linear infinite; }
 @keyframes spin { to { transform: rotate(360deg); } }
-
 .btn-add {
   display: flex; align-items: center; gap: 6px; padding: 6px 14px;
   background: rgba(0,245,212,0.08); border: 1px solid rgba(0,245,212,0.3);
@@ -787,7 +947,6 @@ onUnmounted(() => {
   font-size: 11px; letter-spacing: 0.1em; cursor: pointer; transition: all var(--transition-fast);
 }
 .btn-add:hover { background: rgba(0,245,212,0.15); border-color: var(--accent-cyan); box-shadow: var(--glow-cyan); }
-
 .status-bar { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-dim); letter-spacing: 0.1em; }
 .status-dot { width: 6px; height: 6px; border-radius: 50%; }
 .status-dot.connected { background: var(--accent-cyan); box-shadow: 0 0 6px var(--accent-cyan); animation: status-pulse-soft 2.6s ease-in-out infinite; }
@@ -796,8 +955,6 @@ onUnmounted(() => {
   0%, 100% { opacity: 1; transform: scale(1); }
   50% { opacity: 0.55; transform: scale(0.82); }
 }
-
-/* Canvas */
 .nodes-canvas {
   flex: 1;
   position: relative;
@@ -809,6 +966,74 @@ onUnmounted(() => {
   cursor: grabbing;
   user-select: none;
 }
+.hud-panels {
+  position: absolute;
+  top: 18px;
+  right: 20px;
+  z-index: 12;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 260px;
+}
+.hud-panel {
+  border: 1px solid rgba(0,245,212,0.12);
+  border-radius: 16px;
+  background: linear-gradient(180deg, rgba(8, 13, 22, 0.92), rgba(5, 9, 18, 0.86));
+  backdrop-filter: blur(14px);
+  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255,255,255,0.04);
+  padding: 14px;
+}
+.hud-title {
+  font-family: var(--font-display);
+  font-size: 10px;
+  letter-spacing: 0.16em;
+  color: var(--accent-cyan);
+  margin-bottom: 10px;
+}
+.skill-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.skill-chip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid rgba(0,245,212,0.1);
+  border-radius: 10px;
+  padding: 8px 10px;
+  color: var(--text-secondary);
+  background: rgba(11, 18, 30, 0.88);
+}
+.skill-chip.active {
+  border-color: rgba(0,245,212,0.4);
+  box-shadow: 0 0 16px rgba(0,245,212,0.12);
+  color: var(--text-primary);
+}
+.skill-label {
+  font-family: var(--font-display);
+  font-size: 9px;
+  letter-spacing: 0.14em;
+  color: var(--accent-amber);
+}
+.skill-title {
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+.route-main {
+  font-family: var(--font-display);
+  font-size: 18px;
+  letter-spacing: 0.08em;
+  color: var(--text-primary);
+}
+.route-child {
+  margin-top: 6px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--accent-cyan);
+  letter-spacing: 0.08em;
+}
 .canvas-controls {
   position: absolute;
   right: 20px;
@@ -840,25 +1065,10 @@ onUnmounted(() => {
   color: var(--accent-cyan);
   box-shadow: 0 0 18px rgba(0,245,212,0.08);
 }
-.zoom-chip {
-  width: 36px;
-  flex-shrink: 0;
-}
-.chip-symbol {
-  font-family: var(--font-display);
-  font-size: 18px;
-  line-height: 1;
-}
-.zoom-readout {
-  min-width: 72px;
-  padding: 0 14px;
-}
-.chip-value {
-  font-family: var(--font-display);
-  font-size: 11px;
-  letter-spacing: 0.08em;
-  color: var(--text-primary);
-}
+.zoom-chip { width: 36px; flex-shrink: 0; }
+.chip-symbol { font-family: var(--font-display); font-size: 18px; line-height: 1; }
+.zoom-readout { min-width: 72px; padding: 0 14px; }
+.chip-value { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.08em; color: var(--text-primary); }
 .nodes-viewport {
   position: absolute;
   inset: 0;
@@ -912,22 +1122,41 @@ onUnmounted(() => {
   filter: drop-shadow(0 0 6px rgba(0,245,212,0.06));
   animation: dash-flow 5.5s linear infinite;
 }
+.conn-path-sub {
+  stroke-width: 1.2;
+  stroke-opacity: 0.7;
+}
 @keyframes dash-flow { to { stroke-dashoffset: -48; } }
-.conn-path.active {
-  stroke: color-mix(in srgb, var(--accent-cyan) 68%, var(--accent-amber) 32%);
-  stroke-opacity: 0.72;
+.conn-path.energized {
+  stroke: color-mix(in srgb, var(--accent-cyan) 72%, var(--accent-amber) 28%);
+  stroke-opacity: 0.62;
   stroke-width: 1.9;
   stroke-dasharray: none;
   filter: url(#lineGlow) drop-shadow(0 0 8px rgba(0,245,212,0.16));
-  animation: line-flare 1.8s ease-in-out infinite alternate;
+  animation: line-flare 2.2s ease-in-out infinite alternate;
+}
+.conn-current {
+  fill: none;
+  stroke: rgba(232, 255, 255, 0.98);
+  stroke-width: 3.2;
+  stroke-linecap: round;
+  stroke-dasharray: 18 220;
+  filter: drop-shadow(0 0 10px rgba(0,245,212,0.36)) drop-shadow(0 0 18px rgba(255,255,255,0.24));
+  animation: current-flow 1.2s linear infinite;
+}
+.conn-current-sub {
+  stroke-width: 2.6;
+  stroke-dasharray: 14 180;
+  animation-duration: 1s;
 }
 @keyframes line-flare {
-  from { stroke-opacity: 0.42; }
-  to { stroke-opacity: 0.78; }
+  from { stroke-opacity: 0.38; }
+  to { stroke-opacity: 0.72; }
+}
+@keyframes current-flow {
+  from { stroke-dashoffset: 0; }
+  to { stroke-dashoffset: -238; }
 }
-.pulse-dot { fill: var(--accent-amber); filter: drop-shadow(0 0 8px var(--accent-amber)); }
-
-/* Node Cards */
 .node-card {
   position: absolute;
   z-index: 2;
@@ -935,7 +1164,12 @@ onUnmounted(() => {
   transition: transform 0.22s ease;
 }
 .node-sub.disabled { opacity: 0.35; cursor: not-allowed; }
-
+.node-child { z-index: 2; }
+.node-child .node-name,
+.node-child .node-role,
+.node-child .node-label {
+  word-break: break-word;
+}
 .node-inner {
   width: 100%;
   height: 100%;
@@ -993,13 +1227,11 @@ onUnmounted(() => {
   0%, 100% { opacity: 0.46; transform: scale(0.98); }
   50% { opacity: 0.8; transform: scale(1.01); }
 }
-
 .node-corner { position: absolute; width: var(--node-corner-size, 10px); height: var(--node-corner-size, 10px); opacity: 0.6; }
 .node-corner.tl { top: calc(6px * var(--node-scale, 1)); left: calc(6px * var(--node-scale, 1)); border-top: calc(1.5px * var(--node-scale, 1)) solid var(--accent-cyan); border-left: calc(1.5px * var(--node-scale, 1)) solid var(--accent-cyan); }
 .node-corner.tr { top: calc(6px * var(--node-scale, 1)); right: calc(6px * var(--node-scale, 1)); border-top: calc(1.5px * var(--node-scale, 1)) solid var(--accent-cyan); border-right: calc(1.5px * var(--node-scale, 1)) solid var(--accent-cyan); }
 .node-corner.bl { bottom: calc(6px * var(--node-scale, 1)); left: calc(6px * var(--node-scale, 1)); border-bottom: calc(1.5px * var(--node-scale, 1)) solid var(--accent-cyan); border-left: calc(1.5px * var(--node-scale, 1)) solid var(--accent-cyan); }
 .node-corner.br { bottom: calc(6px * var(--node-scale, 1)); right: calc(6px * var(--node-scale, 1)); border-bottom: calc(1.5px * var(--node-scale, 1)) solid var(--accent-cyan); border-right: calc(1.5px * var(--node-scale, 1)) solid var(--accent-cyan); }
-
 .node-status { position: absolute; top: calc(10px * var(--node-scale, 1)); right: calc(10px * var(--node-scale, 1)); width: var(--node-status-size, 10px); height: var(--node-status-size, 10px); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
 .status-ring { width: var(--node-status-ring-size, 8px); height: var(--node-status-ring-size, 8px); border-radius: 50%; }
 .node-status.active::before {
@@ -1018,7 +1250,6 @@ onUnmounted(() => {
   0% { transform: scale(0.5); opacity: 0.65; }
   100% { transform: scale(1.3); opacity: 0; }
 }
-
 .node-label { font-family: var(--font-display); font-size: calc(8px * var(--node-scale, 1)); letter-spacing: 0.2em; color: var(--text-dim); margin-bottom: 1px; }
 .node-master .node-label { color: rgba(0,245,212,0.5); }
 .node-name { font-family: var(--font-display); font-size: calc(15px * var(--node-scale, 1)); font-weight: 700; letter-spacing: 0.08em; color: var(--accent-cyan); line-height: 1.2; }
@@ -1029,6 +1260,7 @@ onUnmounted(() => {
   line-height: 1.5; flex: 1; overflow: hidden; display: -webkit-box;
   -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis;
 }
+.node-child .node-desc { -webkit-line-clamp: 2; }
 .node-footer { display: flex; align-items: center; gap: calc(8px * var(--node-scale, 1)); flex-wrap: wrap; margin-top: 2px; }
 .node-stat { display: flex; align-items: center; gap: calc(4px * var(--node-scale, 1)); font-family: var(--font-mono); font-size: calc(9px * var(--node-scale, 1)); }
 .stat-label { color: var(--text-dim); }
@@ -1046,14 +1278,10 @@ onUnmounted(() => {
   letter-spacing: 0.05em; pointer-events: none; left: 50%; transform: translateX(-50%);
   bottom: var(--node-rel-offset, -20px); white-space: nowrap;
 }
-.particle { position: absolute; border-radius: 50%; background: var(--accent-cyan); pointer-events: none; }
-
 @keyframes task-tag-glow {
   0%, 100% { box-shadow: 0 0 8px rgba(249,168,37,0.04); }
   50% { box-shadow: 0 0 14px rgba(249,168,37,0.1); }
 }
-
-/* Drawer */
 .config-drawer {
   position: fixed; top: 0; right: 0; width: 420px; height: 100%;
   background: rgba(5,8,16,0.97); border-left: 1px solid var(--border-mid);
@@ -1107,8 +1335,6 @@ onUnmounted(() => {
 .btn-primary:hover { background: rgba(0,245,212,.2); box-shadow: var(--glow-cyan); }
 .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
 .btn-loader { width: 12px; height: 12px; border: 1.5px solid transparent; border-top-color: var(--accent-cyan); border-radius: 50%; animation: spin .6s linear infinite; }
-
-/* Modal */
 .modal-overlay {
   position: fixed; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(4px);
   z-index: 200; display: flex; align-items: center; justify-content: center;