Office
The bird's-eye view of every agent in the workspace — a read-only React Flow canvas with delegation edges.
Office is a read-only React Flow canvas that lays out every agent in your workspace, with delegation edges drawn between them.
Layout
CanvasOfficeCard wraps OfficeCanvas with:
- A small overlay stats card (agent counts by type)
- The
OfficeDropdownbreadcrumb sub-route
Each agent renders as an AgentNode: its Lucide icon, name, model, sandbox
summary, and a tools summary.
Reading the graph
- Nodes = agents.
- Edges =
subagents.allowAgentsreferences. An edge from A → B means agent A is allowed to delegate to agent B.
This is the same data model as the Tools tab on each agent — Office just
visualizes the workspace-wide pattern.
Why this mode exists
When you have a handful of agents that delegate to each other, the delegation graph stops being obvious. Office gives you a single screen where you can:
- Spot delegation loops (A → B → A) before they cause runtime issues.
- See which orchestrator agents have a hub-and-spoke pattern.
- Identify orphaned agents with no incoming or outgoing edges.
Editing
Office itself is read-only for layout — clicking an agent node opens
the standard AgentCanvasModal (the same modal as in the Agents mode), so
you can edit the agent's tools, system prompt, and sub-agents without
leaving the canvas.