Repository navigation
LOU-M: real ReactFlow canvas for the agent graph editor - #18
Merged
Merged
Conversation
Replaces the LOU-L1 CanvasArea placeholder with a genuine @xyflow/react integration: - Custom node components (trigger/llm/tool/approval/output) driven by AgentGraphSpec data, with ReactFlow's own Handle/MiniMap/Controls/ Background rather than reimplementing pan/zoom/minimap. - Drag-from-palette node creation, inline rename, delete, duplicate (Ctrl/Cmd+D), connect-drag edge creation with inline port-compatibility rejection, and a dagre-based "Auto layout" toolbar action. - Pure, unit-tested graph-mutation functions (src/canvas/graphMutations.ts) so every canvas interaction flows through AgentGraphSpec - ReactFlow's nodes/edges props are a recomputed view of that state, not a second source of truth. - Extended validateGraph()/connectionRules.ts with the same edge-type compatibility rules the canvas rejects inline (e.g. trigger -> trigger). - AppState now owns `graph: AgentGraphSpec` as canonical state, derives `spec` for persistence/back-compat, and adds multi-agent switching plus a template-based "New agent" flow (blank / support-bot templates). 56 tests passing in apps/agent-forge (18 new for graph mutations, 5 for connection rules, 3 for auto-layout, 1 new validateGraph case). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
@xyflow/reactv12 (the current, actively-maintained React Flow package;reactflowis the predecessor name, now in maintenance mode) plusdagre/@types/dagrefor auto-layout, as real dependencies ofapps/agent-forge.CanvasArea.tsx: real ReactFlow canvas with custom node types, MiniMap/Controls/Background, palette drag-and-drop, connect-drag with inline invalid-connection rejection, delete key, duplicate (Ctrl/Cmd+D), auto-layout + fit-view toolbar buttons.canvas/graphMutations.ts: pure functions (addNode/removeNode/duplicateNode/renameNode/moveNode/updateNodeData/connectNodes/removeEdge) are the only way the canvas mutatesAgentGraphSpec.CanvasAreaderives ReactFlow'snodes/edgesfromAppState.graphviauseMemoevery render and never calls ReactFlow's ownsetNodes/setEdges/addEdge— there is no second source of truth to drift.graph/connectionRules.ts's port-compatibility matrix backs bothisValidConnectionin the live canvas and the batchvalidateGraph()pass — the same rule, enforced in both places.AppState.tsx:graph: AgentGraphSpecis now canonical state;specis derived viagraphToSpec(); added multi-agentswitchAgent/createAgent/agents.Inspector.tsx/LeftRail.tsxrewired accordingly.Verification
Independently verified on this branch (not just taken on faith from the original implementation report):
apps/agent-forge/**+package-lock.jsononly.graphMutations.tsandCanvasArea.tsxend to end: confirmed every node/edge change (position, delete, connect, drag-drop, duplicate, auto-layout) routes throughgraphMutations.ts+setGraph; ReactFlow'snodes/edgesprops are recomputed fromAppState.graphevery render.connectionRules.ts'sisEdgeTypeAllowedis called from bothCanvasArea'sisValidConnectionandvalidateGraph.ts.@xyflow/react@12.12.0is installed and is a real, sensible, actively-versioned package.apps/agent-forge's own build/lint/typecheck/test: all clean, 56/56 tests passing.npm run build,npm run lint(0 errors, pre-existing warnings only),npx tsc --noEmit(clean), andnpm run test:coverage: 747 passed / 5 failed / 3 skipped. Verified the 5 failures are inpackages/create-loushy-agent, caused only by that package'sdist/not being built yet in this fresh worktree (Cannot find module '../dist/index.js') — confirmed by building that package locally (npm run build --workspace=packages/create-loushy-agent), after which those same tests pass (8/8). CI's workflow already runs that build step beforetest:coverage, so this is not a real regression.Test plan
apps/agent-forge:npm run build,npm run lint,npx tsc --noEmit,npm test -- --run(56/56 passing)npm run build,npm run lint,npx tsc --noEmit,npm run test:coverage🤖 Generated with Claude Code