fix: resolve SVG dimension observer loading mount lifecycle issue using callback refs

frontend/src/views/AgentView.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from "react"
+import { useEffect, useState, useRef, useCallback } from "react"
 import { Bot, ExternalLink, Activity, Cpu, Wrench, Shield, X, Check, Copy } from "lucide-react"
 import { api, type AgentStatus, type ModelInfo, type RoutingResp, type ConnectResp } from "@/lib/api"
 import { cn, resolveExternalUrl } from "@/lib/utils"
@@ -50,17 +50,22 @@ export function AgentView() {
 
   // Canvas pixel tracking for pixel-perfect connection graph without non-uniform scaling
   const [dimensions, setDimensions] = useState({ width: 800, height: 360 })
-  const containerRef = useRef<HTMLDivElement>(null)
+  const observerRef = useRef<ResizeObserver | null>(null)
 
-  useEffect(() => {
-    if (!containerRef.current) return
-    const observer = new ResizeObserver((entries) => {
-      if (!entries || entries.length === 0) return
-      const rect = entries[0].contentRect
-      setDimensions({ width: rect.width, height: rect.height })
-    })
-    observer.observe(containerRef.current)
-    return () => observer.disconnect()
+  const containerRef = useCallback((node: HTMLDivElement | null) => {
+    if (observerRef.current) {
+      observerRef.current.disconnect()
+      observerRef.current = null
+    }
+    if (node) {
+      const observer = new ResizeObserver((entries) => {
+        if (!entries || entries.length === 0) return
+        const rect = entries[0].contentRect
+        setDimensions({ width: rect.width, height: rect.height })
+      })
+      observer.observe(node)
+      observerRef.current = observer
+    }
   }, [])
 
   const w = dimensions.width