starred/aryx
1
0
Fork 0
mirror of https://github.com/davidkaya/aryx.git synced 2026-08-06 19:58:43 +02:00
Code Issues 3 Packages Projects Releases 10 Wiki Activity

feat: replace form-based pattern editor with interactive graph canvas

Browse Source 
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>
This commit is contained in:
David Kaya
2026-03-24 22:54:02 +01:00
co-authored by Copilot
parent 2e2caf78f9
commit 7d078faada
10 changed files with 1106 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ARCHITECTURE.md
+1 -1
View File
@@ -142,7 +142,7 @@ Patterns now persist an explicit graph-backed topology alongside the flat agent
That graph is now the execution contract for the sidecar: sequential order comes from the saved path, handoff routes come from directed graph edges, and concurrent/group-chat participant ordering can be derived from graph node metadata instead of hard-coded runtime assumptions.
Until the dedicated canvas editor lands, the current form-based pattern editor keeps the graph synchronized by rebuilding the saved topology from the selected mode and agent list on change/save. This is an intentional temporary adapter so backend/runtime work can land before the renderer graph UX is replaced.
The pattern editor renders an interactive graph canvas powered by React Flow (`@xyflow/react`). The canvas projects the authoritative `PatternGraph` into React Flow nodes and edges via a view-model layer (`src/renderer/lib/patternGraph.ts`). Users can drag nodes to reposition them, and in handoff mode can draw new agent-to-agent edges directly on the canvas. A right-side inspector panel shows the details of the selected node — system node metadata for system nodes, or the full agent configuration form (model, reasoning, instructions) for agent nodes. The mode selector, pattern metadata, approval checkpoints, and tool auto-approval settings remain below the graph as scrollable settings sections. The `syncPatternGraph()` adapter is still called when agents are added/removed or the mode changes, rebuilding the graph from the current state; direct graph edits (drag positions, handoff edges) are persisted without the adapter.
### Sessions