EXPERIMENT_006 // ADK.VISUALIZER
Static interactive diagram contrasting monolithic and orchestrated agent topologies from Google's ADK case study, annotated in real time by an LLM.
LOADING EXPERIMENT...
You see two agent architecture patterns displayed side by side: a monolithic topology (one agent, four inline tools) and an orchestrated topology (a SequentialAgent with five specialist agents and shared session state). Click any node in either pattern. The model streams a three-sentence annotation explaining what that architectural element is, when to use it, and what breaks if misapplied. The diagram itself is static and pre-positioned for pedagogical contrast. The annotation layer makes the architectural decision-making explicit — every node is an interrogable surface.
HOW IT WORKS
Two pre-defined graphs in `adkTopology.ts`. The monolithic topology: one `LlmAgent` (Titanium) executing all tasks in a linear for loop, with four tool nodes directly attached (web_search, code_exec, vector_search, email_draft). No orchestration, no guardrails. The orchestrated topology: one `SequentialAgent` (orchestrator) executing five specialist agents in defined order, passing a shared `InvocationContext`. Each specialist reads and writes to `session.state` — a whiteboard where agents publish `output_key` values for downstream consumption. Node positions are manually authored to emphasise the structural contrast, not auto-laid out. Based on Google's published "Production-Ready AI Agents: 5 Lessons from Refactoring a Monolith" (April 2026).
`@xyflow/react` renders the graph. Custom node components (OrchestratorNode, SpecialistNode, ToolNode, MonolithNode, MemoryNode) styled with Speculative Interface v2 tokens — colour, typography, spacing. A TopologySelector toggle switches between the two graphs without remounting the canvas. The canvas maintains zoom and pan state across toggles. Node rendering is stateless; clicking a node triggers selection state in a parent container, not within the node itself.
Click any node. The app POSTs to `/api/experiments/orchestration/annotate` with element type, node data, and the full surrounding topology context (adjacent nodes and edges). The model receives the request and a system prompt specifying: annotate this element in the context of the full topology, explain what it does architecturally, when to use it, and what breaks if misapplied — three sentences, no more. The model streams the response via SSE. An AnnotationPanel renders the streamed text token by token. An AbortController cancels any previous stream on re-click, preventing overlapping output.
DelegationEdge (animated dashed line, direction arrow from orchestrator to specialist) and ReturnEdge (solid reverse, specialist to orchestrator) are custom edge components. They communicate the semantic difference between outbound delegation and inbound result — not just visual distinction but structural relationship. Node size and colour reflect hierarchy: orchestrator (large, chartreuse), specialist (medium, cyan), tool (small, violet), memory node (capsule shape, amber). The hierarchy is visible before any interaction.
WHAT THIS PROVES
The pedagogical value is not in the visual — it is in the annotation. A static diagram of two architectures is reference material. The same diagram where every node triggers a live LLM explanation transforms it into an interrogable surface. Each click produces contextual reasoning grounded in the specific architectural pattern and topology, not a generic definition. The experiment demonstrates that LLM-powered annotation converts inert reference material into interactive learning infrastructure.
The topology contrast is the core lesson: monolithic pattern (one agent, all tools inline, failure cascades silently across all tasks) versus orchestrated pattern (SequentialAgent pipeline, specialist agents, shared session state, structured outputs, failure contained to one agent's responsibility). Google's ADK case study grounds this contrast in production experience — moving from Titanium (monolith) to a specialist-agent pipeline reduced failure surface and improved debuggability. Rendering the contrast as an interactive diagram rather than prose makes the architectural trade-offs concrete and interrogable.