feat: [US-027] - Connect nodes with edges

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/editor/[projectId]/FlowchartEditor.tsx

@@ -14,6 +14,7 @@ import ReactFlow, {
   Node,
   Edge,
   NodeTypes,
+  MarkerType,
 } from 'reactflow'
 import { nanoid } from 'nanoid'
 import 'reactflow/dist/style.css'
@@ -47,6 +48,10 @@ function toReactFlowEdges(edges: FlowchartEdge[]): Edge[] {
     target: edge.target,
     targetHandle: edge.targetHandle,
     data: edge.data,
+    type: 'smoothstep',
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+    },
   }))
 }
 
@@ -72,7 +77,21 @@ function FlowchartEditorInner({ initialData }: FlowchartEditorProps) {
   )
 
   const onConnect = useCallback(
-    (params: Connection) => setEdges((eds) => addEdge(params, eds)),
+    (params: Connection) => {
+      if (!params.source || !params.target) return
+      const newEdge: Edge = {
+        id: nanoid(),
+        source: params.source,
+        target: params.target,
+        sourceHandle: params.sourceHandle,
+        targetHandle: params.targetHandle,
+        type: 'smoothstep',
+        markerEnd: {
+          type: MarkerType.ArrowClosed,
+        },
+      }
+      setEdges((eds) => addEdge(newEdge, eds))
+    },
     [setEdges]
   )