Scaffolding for drag and drop connection block set up

app/w/[id]/workflow.tsx

@@ -118,6 +118,7 @@ function WorkflowCanvas() {
     type: 'workflowBlock',
     position: block.position,
     selected: block.id === selectedBlockId,
+    dragHandle: '.workflow-drag-handle',
     data: {
       type: block.type,
       config: getBlock(block.type),
@@ -323,6 +324,7 @@ function WorkflowCanvas() {
         selectNodesOnDrag={false}
         nodesConnectable={true}
         nodesDraggable={true}
+        draggable={false}
       >
         <Background />
       </ReactFlow>

app/w/components/workflow-block/components/connection-block/connection-block.tsx

@@ -11,12 +11,31 @@ export function ConnectionBlock({ blockId }: ConnectionBlockProps) {
 
   if (!hasIncomingConnections) return null
 
+  const handleDragStart = (e: React.DragEvent, connection: any) => {
+    e.stopPropagation() // Prevent parent drag handlers from firing
+    e.dataTransfer.setData(
+      'application/json',
+      JSON.stringify({
+        type: 'connection',
+        connectionData: {
+          id: connection.id,
+          name: connection.name,
+          outputType: connection.outputType,
+          sourceBlockId: blockId,
+        },
+      })
+    )
+    e.dataTransfer.effectAllowed = 'copy'
+  }
+
   return (
     <div className="absolute -left-[180px] top-0 space-y-2 flex flex-col items-end w-[160px]">
       {incomingConnections.map((connection) => (
         <Card
           key={connection.id}
-          className="group flex items-center rounded-lg border bg-card p-2 shadow-sm transition-colors hover:bg-accent/50 cursor-grab w-fit"
+          draggable
+          onDragStart={(e) => handleDragStart(e, connection)}
+          className="group flex items-center rounded-lg border bg-card p-2 shadow-sm transition-colors hover:bg-accent/50 cursor-grab active:cursor-grabbing w-fit"
         >
           <div className="text-sm">
             <span className="font-medium leading-none">

app/w/components/workflow-block/workflow-block.tsx

@@ -51,7 +51,7 @@ export function WorkflowBlock({
   const subBlockRows = groupSubBlocks(workflow.subBlocks)
 
   return (
-    <Card className="w-[320px] shadow-md select-none group relative [&:active]:cursor-grabbing cursor-grab">
+    <Card className="w-[320px] shadow-md select-none group relative cursor-default">
       {selected && <ActionBar blockId={id} />}
       <ConnectionBlock blockId={id} />
 
@@ -59,15 +59,16 @@ export function WorkflowBlock({
         type="target"
         position={Position.Top}
         className={cn(
-          '!w-3 !h-3',
+          '!w-3.5 !h-3.5',
           '!bg-white !rounded-full !border !border-gray-200',
           '!opacity-0 group-hover:!opacity-100',
           '!transition-opacity !duration-200 !cursor-crosshair',
-          'hover:!border-blue-500'
+          'hover:!border-blue-500',
+          '!top-[-7px]'
         )}
       />
 
-      <div className="flex items-center gap-3 p-3 border-b">
+      <div className="flex items-center gap-3 p-3 border-b workflow-drag-handle cursor-grab [&:active]:cursor-grabbing">
         <div
           className="flex items-center justify-center w-7 h-7 rounded"
           style={{ backgroundColor: toolbar.bgColor }}
@@ -98,11 +99,12 @@ export function WorkflowBlock({
         type="source"
         position={Position.Bottom}
         className={cn(
-          '!w-3 !h-3',
+          '!w-3.5 !h-3.5',
           '!bg-white !rounded-full !border !border-gray-200',
           '!opacity-0 group-hover:!opacity-100',
           '!transition-opacity !duration-200 !cursor-crosshair',
-          'hover:!border-blue-500'
+          'hover:!border-blue-500',
+          '!bottom-[-7px]'
         )}
       />
     </Card>