Phase 4.2 -- Org Chart Page

Parent: #762 | Wave 1 | Absorbs: #674

Context

Key differentiator. The org chart is not a static diagram -- it reflects real-time organizational state. This absorbs #674 (interactive org chart with department/team CRUD and detail pages).

Scope

Living Org Chart (React Flow)

• Agent nodes with status encoding: active (cyan pulse), idle (dim), warning (amber pulse), error (red)
• Department grouping with health overlay (green/amber/red fill)
• CEO prominent with accent styling, VP columns, IC cards
• Click-to-drill agent detail (navigate to Agent Detail page)
• Auto-layout (no manual positioning needed)
• Pan/zoom with state persistence

CRUD Operations (from #674)

• Context menu on nodes: edit agent, remove agent, assign to department
• Department CRUD: create, edit, delete departments
• Drag-drop agent between departments
• Add agent button within department

Secondary View

• Force-directed graph toggle (communication patterns, not hierarchy)
• Edge encoding: thickness = communication volume, animation = frequency
• From B+D prototype direction

Department Stats

• Department header: name, agent count, active count, task count, cost
• Health overlay on department groups

Design reference

• Prototype: mockups/direction-cd/src/pages/OrgChart.tsx (hierarchy view)
• Prototype: mockups/direction-bd/src/components/ForceGraph.vue (force-directed view)

Data requirements

• GET /company (departments, agents)
• GET /departments/{name}/health (feat: department health, provider status, and activity feed endpoints #773)
• GET /agents (status, current task)
• WebSocket: agent status changes, task updates

Deliverables

• React Flow org chart with living status nodes
• Department CRUD (context menu + dialogs)
• Agent assignment and management within departments
• Force-directed graph secondary view
• Department health overlay
• Auto-layout and pan/zoom persistence
• Unit tests for layout computation, CRUD operations
• Close feat: interactive org chart with department/team CRUD and detail pages #674 as absorbed

Blocked by

• feat: interaction components and animation patterns #776 (interaction components)
• feat: department health, provider status, and activity feed endpoints #773 (department health endpoint)