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

@@ -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"

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>