Context

The Org Chart page (#778) ships with a Hierarchy/Communication view toggle in the toolbar, but the force-directed "Communication" view is stubbed -- selecting it shows a toast ("not yet available"). This issue covers the full implementation.

Scope

• Force-directed graph layout using d3-force (or similar physics simulation)
• Nodes represent agents (same AgentNode/CeoNode components)
• Edge encoding: thickness = communication volume, animation speed = frequency
• Data source: GET /messages channel data for inter-agent communication volume
• Toggle between hierarchy (dagre) and force-directed layouts preserves node selection and viewport

Design reference

• Issue feat: Org Chart page (living nodes, status, CRUD, department health) #778 "Secondary View" section
• Prototype: mockups/direction-bd/src/components/ForceGraph.vue
• docs/design/page-structure.md Org Chart section

Dependencies

• Communication volume data available from messages API (may need a new aggregation endpoint)

Deliverables

• Force-directed layout engine integrated with React Flow
• Edge thickness/animation encoding for communication patterns
• Smooth transition animation between hierarchy and force views
• Unit tests for force layout computation
• Update Storybook stories