From cf9c258f9ebb5b0b88b3b3562ff8b263bf5fb50b Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Tue, 14 Apr 2026 03:41:21 +0000
Subject: [PATCH] fix(network): surface connect tool and middle-pan

---
 frontend/src/components/network/DiagramHeader.tsx | 11 +++++++----
 frontend/src/components/network/NetworkCanvas.tsx | 11 ++++++++++-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/network/DiagramHeader.tsx b/frontend/src/components/network/DiagramHeader.tsx
index 9cc59332..618fafe7 100644
--- a/frontend/src/components/network/DiagramHeader.tsx
+++ b/frontend/src/components/network/DiagramHeader.tsx
@@ -131,42 +131,45 @@ export function DiagramHeader({
       <div className="mx-2 h-5 w-px bg-border-default" />
 
       {/* Interaction mode toggle */}
-      <div className="flex items-center rounded border border-default overflow-hidden">
+      <div className="flex items-center overflow-hidden rounded border border-default">
         <button
           onClick={() => onModeChange('select')}
           title="Select (V)"
           className={cn(
-            'p-1.5 transition-colors',
+            'flex items-center gap-1.5 px-2.5 py-1.5 text-xs transition-colors',
             interactionMode === 'select'
               ? 'bg-elevated text-primary'
               : 'text-muted-foreground hover:text-primary hover:bg-elevated/50',
           )}
         >
           <MousePointer2 size={15} />
+          <span className="hidden sm:inline">Select</span>
         </button>
         <button
           onClick={() => onModeChange('pan')}
           title="Pan (H)"
           className={cn(
-            'p-1.5 transition-colors',
+            'flex items-center gap-1.5 border-l border-default px-2.5 py-1.5 text-xs transition-colors',
             interactionMode === 'pan'
               ? 'bg-elevated text-primary'
               : 'text-muted-foreground hover:text-primary hover:bg-elevated/50',
           )}
         >
           <Hand size={15} />
+          <span className="hidden sm:inline">Pan</span>
         </button>
         <button
           onClick={() => onModeChange('connect')}
           title="Connect (C)"
           className={cn(
-            'p-1.5 transition-colors',
+            'flex items-center gap-1.5 border-l border-default px-2.5 py-1.5 text-xs transition-colors',
             interactionMode === 'connect'
               ? 'bg-elevated text-primary'
               : 'text-muted-foreground hover:text-primary hover:bg-elevated/50',
           )}
         >
           <Cable size={15} />
+          <span className="hidden sm:inline">Connect</span>
         </button>
       </div>
 
diff --git a/frontend/src/components/network/NetworkCanvas.tsx b/frontend/src/components/network/NetworkCanvas.tsx
index 5dc18919..35363421 100644
--- a/frontend/src/components/network/NetworkCanvas.tsx
+++ b/frontend/src/components/network/NetworkCanvas.tsx
@@ -17,6 +17,7 @@ import { edgeTypes } from './edges/edgeTypes'
 import { getDeviceRenderConfig } from './nodes/deviceRegistry'
 import type { DeviceNodeData } from './nodes/DeviceNode'
 import type { InteractionMode } from './DiagramHeader'
+import { cn } from '@/lib/utils'
 
 interface NetworkCanvasProps {
   nodes: Node[]
@@ -81,7 +82,15 @@ export function NetworkCanvas({
   }, [])
 
   return (
-    <div className="relative h-full w-full" onDragLeave={onDragLeave}>
+    <div
+      className="relative h-full w-full"
+      onDragLeave={onDragLeave}
+      onMouseDownCapture={(event) => {
+        if (event.button === 1) {
+          event.preventDefault()
+        }
+      }}
+    >
       <ReactFlow
         nodes={nodes}
         edges={edges}