fix: prevent page crash when creating invalid node connections in agent editor

frontend/app/workspace/[workspaceId]/[agentId]/AgentBuilder.tsx

@@ -25,6 +25,7 @@ import { BuilderCanvas } from './components/BuilderCanvas'
 import { BuilderSidebarTabs } from './components/BuilderSidebarTabs'
 import { BuilderToolbar } from './components/BuilderToolbar'
 import { ExecutionPanelNew as ExecutionPanel } from './components/execution/ExecutionPanelNew'
+import { ErrorBoundary } from './error-boundary'
 import { GraphStatePanel } from './components/GraphStatePanel'
 import { LoadModal } from './components/LoadModal'
 import { RunInputModal } from './components/RunInputModal'
@@ -610,7 +611,9 @@ const AgentBuilderContent = () => {
 
       {/* Main Content Area - Canvas takes full space, panels overlay on top */}
       <div className="flex-1 min-h-0 relative">
-        <BuilderCanvas />
+        <ErrorBoundary>
+          <BuilderCanvas />
+        </ErrorBoundary>
       </div>
 
       {/* RIGHT: Panel - Fixed Position (combines Toolbar and Sidebar) */}

frontend/app/workspace/[workspaceId]/[agentId]/stores/builderStore.ts

@@ -466,52 +466,62 @@ export const useBuilderStore = create<BuilderState>((set, get) => {
     },
 
     onConnect: (connection: Connection) => {
-      const { edges, nodes } = get()
-      const exists = edges.some(
-        (e) => e.source === connection.source && e.target === connection.target
-      )
-      if (exists) return
-
-      // Determine edge type and route_key using extracted utility
-      const { edgeType, routeKey } = determineEdgeTypeAndRouteKey(
-        connection.source!,
-        connection.target!,
-        nodes,
-        edges,
-      )
+      try {
+        if (!connection.source || !connection.target) return
 
-      const edgeData: EdgeData = {
-        edge_type: edgeType,
-        route_key: routeKey,
-      }
+        const { edges, nodes } = get()
+        const exists = edges.some(
+          (e) => e.source === connection.source && e.target === connection.target
+        )
+        if (exists) return
 
-      const { style: edgeStyle } = getEdgeStyleByType(edgeType)
+        if (connection.source === connection.target) return
 
-      get().takeSnapshot()
-      set({
-        edges: addEdge(
-          {
-            ...connection,
-            data: edgeData,
-            type: edgeType === 'loop_back' ? 'loop_back' : 'default',
-            animated: true,
-            style: edgeStyle,
-          },
-          get().edges
-        ),
-      })
+        const sourceNode = nodes.find((n) => n.id === connection.source)
+        const targetNode = nodes.find((n) => n.id === connection.target)
+        if (!sourceNode || !targetNode) return
+
+        // Determine edge type and route_key using extracted utility
+        const { edgeType, routeKey } = determineEdgeTypeAndRouteKey(
+          connection.source,
+          connection.target,
+          nodes,
+          edges,
+        )
+
+        const edgeData: EdgeData = {
+          edge_type: edgeType,
+          route_key: routeKey,
+        }
+
+        const { style: edgeStyle } = getEdgeStyleByType(edgeType)
 
-      // Auto-wire source output to target input mappings
-      if (connection.target && connection.source) {
+        get().takeSnapshot()
+        set({
+          edges: addEdge(
+            {
+              ...connection,
+              data: edgeData,
+              type: edgeType === 'loop_back' ? 'loop_back' : 'default',
+              animated: true,
+              style: edgeStyle,
+            },
+            get().edges
+          ),
+        })
+
+        // Auto-wire source output to target input mappings
         autoWireConnection(
           connection.source,
           connection.target,
           get().nodes,
           get().updateNodeConfig,
         )
-      }
 
-      get().triggerAutoSave()
+        get().triggerAutoSave()
+      } catch (error) {
+        console.error('Failed to create connection:', error)
+      }
     },
 
     setRfInstance: (instance) => set({ rfInstance: instance }),