- Color-code edges by semantic role: structural edges (system↔node) in
muted zinc, agent-to-agent edges in indigo for clear visual separation
- Switch from smoothstep to bezier curves for smoother, more natural
edge routing that reduces right-angle overlaps
- Stagger agent nodes at alternating X offsets in concurrent, handoff,
and group-chat layouts so parallel fan-out/fan-in edges take distinct
bezier paths instead of stacking
- Increase spacing in all layouts to give edges more room
- Add dagre-powered auto-layout button (top-right of canvas) that
computes optimal left-to-right hierarchical node positions
- Add 2 new tests for auto-layout across all orchestration modes
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Add ArrowClosed markers to all graph edges for clear directional flow
- Replace generic Bot icon with AI provider logos (OpenAI, Anthropic,
Google) on agent nodes, inferred from the agent's model id
- Show model display name as subtitle on agent nodes (e.g. 'GPT-5.4',
'Claude Opus 4.5')
- Thread availableModels catalog from PatternEditor through canvas to
resolve friendly model names; falls back to raw model id
- Add 3 new tests for arrow markers, provider icons, and model labels
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Hide input handle on User Input nodes and output handle on User Output
nodes (separate userInputNode/userOutputNode node types)
- Enable edge deletion in handoff mode only (Delete key or React Flow UI);
only agent-to-agent edges are deletable, structural edges are protected
- Block all edge mutations (add/delete) in concurrent and group chat modes
- Add agent as disconnected node without auto-rebuilding the graph
- Add sequential reorder controls (↑↓) in the inspector panel with
position/order swap and automatic edge rebuilding
- Replace circular group chat layout with vertical column to prevent
bidirectional edge crossings
- Tighten handoff layout spacing so edges between triage and specialists
don't overlap nodes
- Use smoothstep edge type for cleaner edge routing across all modes
- Add 6 new tests covering reorder, disconnected add, edge deletion rules,
and node type assertions
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace the flat agent list and static flow diagrams in PatternEditor with
an interactive React Flow canvas backed by the authoritative PatternGraph
model. Users can now see and manipulate orchestration topology visually.
Changes:
- Add @xyflow/react (React Flow) as a canvas library
- Create patternGraph view-model layer for graph-to-canvas projection
- Create GraphNodes with custom system/agent node components
- Create PatternGraphCanvas with drag, connect, and selection support
- Create PatternGraphInspector for selected node/agent details
- Rewrite PatternEditor with split layout: canvas + inspector sidebar
- Add dark theme CSS overrides for React Flow
- Add 11 tests covering view-model projection, connection rules, and
graph mutation helpers
- Update ARCHITECTURE.md to reflect the new renderer graph boundary
The canvas projects PatternGraph into React Flow nodes/edges. Handoff mode
supports drawing new agent-to-agent edges interactively. Node positions
persist to the graph on drag completion. Agent editing moves from inline
forms to the inspector panel on node selection.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
