Merge branch 'worktree-workflow-canvas-engine'

Author: Juan Roldan

package-lock.json

@@ -1258,8 +1258,17 @@ export function createServer() {
     if (!managed) { res.status(404).json({ error: 'Agent not found' }); return; }
     const { sourceId, targetId, sourceHandle, condition } = req.body;
     if (!sourceId || !targetId) { res.status(400).json({ error: 'sourceId and targetId required' }); return; }
-    const edge = addEdge(req.params.id, req.params.wfId, { sourceId, targetId, sourceHandle, condition });
-    res.status(201).json(edge);
+    try {
+      const edge = addEdge(req.params.id, req.params.wfId, { sourceId, targetId, sourceHandle, condition });
+      res.status(201).json(edge);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      if (msg.includes('FOREIGN KEY')) {
+        res.status(400).json({ error: 'sourceId or targetId does not reference an existing node' });
+      } else {
+        res.status(500).json({ error: msg });
+      }
+    }
   });
 
   app.delete('/agents/:id/workflows/:wfId/edges/:edgeId', (req, res) => {

packages/backend/src/orchestrator/server.ts

@@ -12,10 +12,11 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
+    "@dagrejs/dagre": "^3.0.0",
     "@tailwindcss/typography": "^0.5.19",
+    "@xyflow/react": "^12.6.0",
     "chart.js": "^4.5.1",
     "posthog-js": "^1.368.2",
-    "@xyflow/react": "^12.6.0",
     "react": "^18.3.1",
     "react-chartjs-2": "^5.3.1",
     "react-dom": "^18.3.1",

packages/frontend/package.json

@@ -4,6 +4,8 @@ import {
   addEdge,
   useNodesState,
   useEdgesState,
+  useReactFlow,
+  ReactFlowProvider,
   Controls,
   MiniMap,
   Background,
@@ -13,6 +15,7 @@ import {
   type Node,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
+import dagre from '@dagrejs/dagre';
 
 import { nodeTypes } from './nodes';
 import { NodeConfigPanel } from './NodeConfigPanel';
@@ -93,22 +96,61 @@ function fromReactFlowEdges(edges: Edge[]): Omit<WorkflowEdge, 'workflowId'>[] {
   }));
 }
 
+const NODE_WIDTH = 200;
+const NODE_HEIGHT = 80;
+
+function layoutGraph(nodes: Node[], edges: Edge[]): Node[] {
+  const g = new dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+  g.setGraph({ rankdir: 'TB', nodesep: 60, ranksep: 100, marginx: 40, marginy: 40 });
+
+  for (const node of nodes) {
+    g.setNode(node.id, { width: NODE_WIDTH, height: NODE_HEIGHT });
+  }
+  for (const edge of edges) {
+    g.setEdge(edge.source, edge.target);
+  }
+
+  dagre.layout(g);
+
+  return nodes.map(node => {
+    const pos = g.node(node.id);
+    return { ...node, position: { x: pos.x - NODE_WIDTH / 2, y: pos.y - NODE_HEIGHT / 2 } };
+  });
+}
+
 let nodeIdCounter = 0;
 
-export function WorkflowCanvas({ agentId, workflowId }: Props) {
+function WorkflowCanvasInner({ agentId, workflowId }: Props) {
   const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
   const [selectedNode, setSelectedNode] = useState<Node | null>(null);
   const [saving, setSaving] = useState(false);
   const [dirty, setDirty] = useState(false);
   const loaded = useRef(false);
+  const { fitView } = useReactFlow();
+
+  const applyLayout = useCallback(() => {
+    setNodes(nds => {
+      const laid = layoutGraph(nds, edges);
+      setTimeout(() => fitView({ padding: 0.2, duration: 300 }), 50);
+      return laid;
+    });
+    setDirty(true);
+  }, [edges, fitView]);
 
   // Load graph
   useEffect(() => {
     fetchWorkflowGraph(agentId, workflowId).then(graph => {
       if (graph.nodes.length > 0) {
-        setNodes(graph.nodes.map(toReactFlowNode));
-        setEdges(graph.edges.map(toReactFlowEdge));
+        const rfNodes = graph.nodes.map(toReactFlowNode);
+        const rfEdges = graph.edges.map(toReactFlowEdge);
+        const allAtOrigin = rfNodes.every(n => n.position.x === 0 && n.position.y === 0);
+        if (allAtOrigin) {
+          setNodes(layoutGraph(rfNodes, rfEdges));
+        } else {
+          setNodes(rfNodes);
+        }
+        setEdges(rfEdges);
       } else {
         // Empty graph — seed with trigger + end
         const triggerId = crypto.randomUUID();
@@ -227,6 +269,12 @@ export function WorkflowCanvas({ agentId, workflowId }: Props) {
           {nodes.length} nodes · {edges.length} edges
           {dirty && <span className="text-warning ml-2">• unsaved</span>}
         </span>
+        <button
+          className={buttonGhost + ' !text-[10px]'}
+          onClick={applyLayout}
+        >
+          Auto Layout
+        </button>
         <button
           className={buttonGhost + ' !text-[10px]'}
           onClick={handleSave}
@@ -291,3 +339,11 @@ export function WorkflowCanvas({ agentId, workflowId }: Props) {
     </div>
   );
 }
+
+export function WorkflowCanvas(props: Props) {
+  return (
+    <ReactFlowProvider>
+      <WorkflowCanvasInner {...props} />
+    </ReactFlowProvider>
+  );
+}