diff --git a/frontend/src/components/canvas/CanvasContainer.tsx b/frontend/src/components/canvas/CanvasContainer.tsx
index 2e74c83..9ec2726 100644
--- a/frontend/src/components/canvas/CanvasContainer.tsx
+++ b/frontend/src/components/canvas/CanvasContainer.tsx
@@ -78,6 +78,11 @@ export function CanvasContainer({ onConnect: onConnectProp, onEdgeDoubleClick, o
     return true
   }, [snapshotHistory])
 
+  const isValidConnection = useCallback(
+    (connection: { source: string | null; target: string | null }) => connection.source !== connection.target,
+    []
+  )
+
   return (
     <div className="w-full h-full" style={{ background: theme.colors.canvasBackground }}>
       <ReactFlow
@@ -107,7 +112,7 @@ export function CanvasContainer({ onConnect: onConnectProp, onEdgeDoubleClick, o
         colorMode={theme.colors.reactFlowColorMode}
         elevateNodesOnSelect={false}
         connectionMode={ConnectionMode.Loose}
-        isValidConnection={(connection) => connection.source !== connection.target}
+        isValidConnection={isValidConnection}
       >
         <Background
           variant={BackgroundVariant.Dots}
diff --git a/frontend/src/components/canvas/__tests__/BaseNode.test.tsx b/frontend/src/components/canvas/__tests__/BaseNode.test.tsx
index a4fd826..71064df 100644
--- a/frontend/src/components/canvas/__tests__/BaseNode.test.tsx
+++ b/frontend/src/components/canvas/__tests__/BaseNode.test.tsx
@@ -50,11 +50,17 @@ vi.mock('@/utils/maskIp', () => ({
   maskIp: (ip: string) => ip,
 }))
 
+vi.mock('@/utils/propertyIcons', () => ({
+  resolvePropertyIcon: (icon: string | null) => icon ? Server : null,
+}))
+
 vi.mock('@/utils/handleUtils', () => ({
   BOTTOM_HANDLE_IDS: ['bottom'],
   BOTTOM_HANDLE_POSITIONS: { 1: [50] },
 }))
 
+beforeEach(() => { mockZoom = 1 })
+
 function makeNode(data: Partial<NodeData>): Node<NodeData> {
   return {
     id: 'n1',
diff --git a/frontend/src/components/canvas/nodes/BaseNode.tsx b/frontend/src/components/canvas/nodes/BaseNode.tsx
index e760c87..8b95b7e 100644
--- a/frontend/src/components/canvas/nodes/BaseNode.tsx
+++ b/frontend/src/components/canvas/nodes/BaseNode.tsx
@@ -115,10 +115,10 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
         <>
           <div style={{ height: 1, background: `${colors.border}44`, margin: '0 8px' }} />
           <div className="flex flex-col gap-1 px-2.5 py-1.5">
-            {visibleProperties.map((prop, i) => {
+            {visibleProperties.map((prop) => {
               const Icon = resolvePropertyIcon(prop.icon)
               return (
-                <div key={i} className="flex items-center gap-1 font-mono text-[10px]" style={{ color: theme.colors.nodeSubtextColor }}>
+                <div key={prop.key} className="flex items-center gap-1 font-mono text-[10px]" style={{ color: theme.colors.nodeSubtextColor }}>
                   {Icon && <Icon size={9} className="shrink-0" />}
                   <span className="truncate max-w-[60px] shrink-0" title={prop.key}>{prop.key}</span>
                   <span className="truncate" title={prop.value}>· {prop.value}</span>