From 1f44e292f7c809185d8068e349618d34f6274238 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Thu, 29 Jan 2026 23:07:04 +0000
Subject: [PATCH] Fix spending edges to use explicit bottom handle + enable
 edge reconnection

- Added explicit 'spending-out' ID to bottom handle on funnels
- Spending edges now explicitly connect from bottom handle
- Enable edgesReconnectable so users can drag edges to different handles
- Added onReconnect handler for edge re-attachment

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 components/FlowCanvas.tsx       | 12 +++++++++++-
 components/nodes/FunnelNode.tsx |  1 +
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/components/FlowCanvas.tsx b/components/FlowCanvas.tsx
index fd84ae2..b725a72 100644
--- a/components/FlowCanvas.tsx
+++ b/components/FlowCanvas.tsx
@@ -9,6 +9,7 @@ import {
   useNodesState,
   useEdgesState,
   addEdge,
+  reconnectEdge,
   Connection,
   MarkerType,
   Panel,
@@ -252,7 +253,7 @@ function generateEdges(nodes: FlowNode[]): FlowEdge[] {
         id: `spending-${node.id}-${alloc.targetId}`,
         source: node.id,
         target: alloc.targetId,
-        sourceHandle: undefined, // Default bottom
+        sourceHandle: 'spending-out', // Explicit bottom handle
         animated: true,
         style: {
           stroke: alloc.color,
@@ -298,6 +299,13 @@ export default function FlowCanvas() {
     [setEdges]
   )
 
+  // Allow edges to be reconnected by dragging
+  const onReconnect = useCallback(
+    (oldEdge: FlowEdge, newConnection: Connection) =>
+      setEdges((eds) => reconnectEdge(oldEdge, newConnection, eds) as FlowEdge[]),
+    [setEdges]
+  )
+
   // Simulation effect
   useEffect(() => {
     if (!isSimulating) return
@@ -350,7 +358,9 @@ export default function FlowCanvas() {
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
+        onReconnect={onReconnect}
         nodeTypes={nodeTypes}
+        edgesReconnectable={true}
         fitView
         fitViewOptions={{ padding: 0.15 }}
         className="bg-slate-50"
diff --git a/components/nodes/FunnelNode.tsx b/components/nodes/FunnelNode.tsx
index dd75b8f..e398176 100644
--- a/components/nodes/FunnelNode.tsx
+++ b/components/nodes/FunnelNode.tsx
@@ -618,6 +618,7 @@ function FunnelNode({ data, selected, id }: NodeProps) {
         <Handle
           type="source"
           position={Position.Bottom}
+          id="spending-out"
           className="!w-4 !h-4 !bg-blue-500 !border-2 !border-white !-bottom-2"
         />
       </div>