EXPERIMENT_007 // ORCHESTRATION.MAP
Drag-and-drop agent topology builder. You construct your own agent architecture, and an LLM annotates each node and edge as you build, interrogating your design decisions in real time.
LOADING EXPERIMENT...
You drag nodes (Orchestrator, Specialist, Tool, Memory) from a palette onto a canvas and draw edges to define delegation relationships. Double-click any node to rename it. As you build, an LLM annotates your topology: select a node, and it streams a three-sentence explanation of what that node type does architecturally and how it fits into your system. Select an edge, and it explains the delegation semantics — what happens when that call fails, whether the orchestrator retries or surfaces the error, what assumptions you're making. Export your topology as JSON (for persistence) or PNG (for sharing). The interaction model is direct manipulation; the mental model you're building is explicit agent coordination.
HOW IT WORKS
A palette of four node types (Orchestrator, Specialist, Tool, Memory) sits beside the React Flow canvas. Drag from palette to canvas. Each drop creates a new node instance at the drop position. React Flow handles drag repositioning within the canvas. Double-click any node to edit its label — this is how you name your specialists and tools. The canvas maintains zoom and pan state across interactions. No auto-layout; manual positioning forces you to think about spatial hierarchy and data flow directionality.
Connecting two nodes via React Flow connection handles creates a DelegationEdge (animated dashed line with direction arrow). The edge represents a delegation relationship: orchestrator delegates to specialist, specialist delegates to tool. You are building a mental model of agent coordination and making it concrete on the canvas. Every edge you draw commits to a specific coordination pattern. The semantics are yours to determine — the diagram is notation, not prescription.
Selecting any node or edge triggers a POST to `/api/experiments/orchestration/annotate` with element type, element data, and full surrounding topology context (all nodes and edges currently on canvas). The model receives the full graph state and explains the selected element's architectural role in three sentences, highlighting assumptions or risks in the surrounding pattern. The annotation changes as you modify the topology — adding a new node or drawing a new edge re-triggers annotation for the selected element, so your diagram and the annotation stay synchronised.
`useOrchestrationState` wraps React Flow's built-in node and edge state hooks. No external state library. Session-scoped state — nothing persists across page reload. JSON export serialises current nodes and edges in React Flow format. PNG export uses `html2canvas` to capture the canvas element at 2x resolution, then triggers browser download. Both are one-click operations from the toolbar.
WHAT THIS PROVES
Abstract agent architecture becomes tangible when you draw it. The question "how should my agents coordinate?" shifts from a whiteboard conversation into an interactive canvas where every architectural choice is interrogated by the LLM in real time. The annotation layer makes implicit assumptions explicit — drawing an edge from your orchestrator to a specialist forces you to think about failure modes, retry logic, and state sharing. You cannot draw an edge without confronting the semantics of that delegation.
The shared infrastructure pattern validates the experiment platform's reusability model. Five node component types, two edge component types, one AnnotationPanel, and one SSE annotation hook serve both a static educational diagram (EXP_007) and an interactive builder (EXP_008) without duplication or modification. The shared directory (`src/components/playground/shared/`) is the first test of whether Labs experiments can build on each other's infrastructure rather than reinventing per experiment. Successful reuse here confirms the pattern scales.