Kanshō/Agent communication graph

Agent communication graph

Composes the workflow canvas + node + edge primitives into an actor-style graph: orchestrator, agents, tools, and humans, with labelled message edges between them.

Included in the single kansho full pack. Components are not offered as separate installs.

Live communication topology

Active edges animate. Click a node to inspect.
orchestratorRunning

Orchestrator

in — data port
out — data port
agentRunning

Plan & dispatch

in — data port
out — data port
agentSuccess

Audit log writer

in — data port
out — data port
toolSuccess

postgres.execute

in — data port
out — data port
humanPaused

Avery

in — data port
out — data port
OrchestratorAgentToolHuman

Notes

  • Animated edges represent in-flight messages. Dashed edges represent pending dispatch.
  • Warning-toned edges flag handoffs that require human approval.
  • Selecting a node would normally open the process inspector in the right pane.

Supporting sources

These installed helpers belong to components documented on this page. They do not increase the public component count.

lib/edge-key.ts

Stable graph-edge key helper shared by graph components.

Component documentation

Agent Communication Graph

components/control-plane/agent-communication-graph.tsx

Purpose

Composes workflow primitives into a directed graph of agents, tools, humans, and message handoffs.

Appropriate use

Use for a caller-positioned live topology when selection and message direction matter.

Example

components/control-plane/agent-communication-graph.tsx has a representative live example in the "Live communication topology" section on /components/agent-communication-graph.

States

Node kinds are orchestrator, agent, tool, human, and source; edges may be solid or dashed, animated, labelled, and toned; selection is controlled.

API and props

Exports AgentCommunicationGraph and CommunicationGraphSample plus node, edge, and props types; graph props are nodes, edges, height, className, legend, status, selectedId, and onSelect.

Dependencies

Direct imports are React, Lucide icons, the edge-key helper, WorkflowCanvas, WorkflowNode, WorkflowEdge, Legend, and cn.

Accessibility

Interactive nodes inherit named keyboard controls from WorkflowNode and the canvas; visible labels and legend text supplement shape, tone, and animation.

Limitations

It has no layout engine, event stream, or topology validation; callers supply coordinates, valid endpoint ids, and selection state.

Source

Source: components/control-plane/agent-communication-graph.tsx.

Full pack

components/control-plane/agent-communication-graph.tsx is documented at /components/agent-communication-graph and installs only through the single Kansho full pack; no individual component install is offered.