feat(network): add connect tool and middle-pan

frontend/src/components/network/DiagramHeader.tsx

@@ -1,9 +1,9 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { ChevronLeft, Save, Download, FileJson, FileCode, Image, FileText, Undo2, Redo2, MousePointer2, Hand, Share2, Upload } from 'lucide-react'
+import { ChevronLeft, Save, Download, FileJson, FileCode, Image, FileText, Undo2, Redo2, MousePointer2, Hand, Share2, Upload, Cable } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
-export type InteractionMode = 'select' | 'pan'
+export type InteractionMode = 'select' | 'pan' | 'connect'
 
 interface DiagramHeaderProps {
   name: string
@@ -156,6 +156,18 @@ export function DiagramHeader({
         >
           <Hand size={15} />
         </button>
+        <button
+          onClick={() => onModeChange('connect')}
+          title="Connect (C)"
+          className={cn(
+            'p-1.5 transition-colors',
+            interactionMode === 'connect'
+              ? 'bg-elevated text-primary'
+              : 'text-muted-foreground hover:text-primary hover:bg-elevated/50',
+          )}
+        >
+          <Cable size={15} />
+        </button>
       </div>
 
       <div className="mx-2 h-5 w-px bg-border-default" />