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

@@ -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()