@skyhook-io/k8s-ui 1.2.4 → 1.3.1

package/src/components/topology/TopologyGraph.tsx

@@ -12,6 +12,7 @@ import {
   type Node,
   type Edge,
   type NodeTypes,
+  type NodeChange,
   type Viewport,
   BackgroundVariant,
   MarkerType,
@@ -19,13 +20,14 @@ import {
 import '@xyflow/react/dist/style.css'
 import { toCanvas } from 'html-to-image'
 
-import { AlertTriangle, Download, Loader2, RotateCw, Shield } from 'lucide-react'
+import { AlertTriangle, Download, LayoutGrid, Loader2, Maximize, Minus, Pause, Play, Plus, RotateCw, Shield, Workflow } from 'lucide-react'
+import { Tooltip } from '../ui/Tooltip'
 import { useToast } from '../ui/Toast'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 
 import { K8sResourceNode } from './K8sResourceNode'
 import { GroupNode } from './GroupNode'
-import { buildHierarchicalElkGraph, applyHierarchicalLayout, getGroupKey } from './layout'
+import { buildHierarchicalElkGraph, applyHierarchicalLayout, getGroupKey, type GroupDisplayLevel } from './layout'
 import type { Topology, TopologyNode, TopologyEdge, ViewMode, GroupingMode } from '../../types'
 
 // Edge colors by type
@@ -66,6 +68,9 @@ function getEdgeStyle(type: string, isTrafficView: boolean, isTrafficEdge: boole
 // Threshold for disabling edge animations (performance optimization)
 const EDGE_ANIMATION_THRESHOLD = 200
 
+// Auto-collapse all namespace groups when cluster has more than this many namespaces
+const LARGE_CLUSTER_NS_THRESHOLD = 5
+
 // Build edges, handling collapsed groups
 function buildEdges(
   topologyEdges: { id: string; source: string; target: string; type: string }[],
@@ -156,6 +161,16 @@ interface TopologyGraphProps {
   selectedNodeId?: string
   /** Show image export button in controls. Default: true */
   showExportButton?: boolean
+  paused?: boolean
+  onTogglePause?: () => void
+  /** Called when user clicks "maximize" on a namespace group — sets namespace filter to just that namespace */
+  onMaximizeNamespace?: (namespace: string) => void
+  /** Shown as a breadcrumb label when viewing a single namespace */
+  namespaceBreadcrumb?: string
+  /** Called when breadcrumb "back" is clicked to return to all-namespace view */
+  onClearNamespace?: () => void
+  /** Serialized namespace filter — when this changes, reset groupLevels for fresh smart default */
+  namespacesKey?: string
 }
 
 export function TopologyGraph({
@@ -166,31 +181,91 @@ export function TopologyGraph({
   onNodeClick,
   selectedNodeId,
   showExportButton = true,
+  paused = false,
+  onTogglePause,
+  onMaximizeNamespace,
+  namespaceBreadcrumb,
+  onClearNamespace,
+  namespacesKey = '',
 }: TopologyGraphProps) {
   const isTrafficView = viewMode === 'traffic'
-  const [nodes, setNodes, onNodesChange] = useNodesState([] as Node[])
+  const [nodes, setNodes, onNodesChangeBase] = useNodesState([] as Node[])
   const [edges, setEdges, onEdgesChange] = useEdgesState([] as Edge[])
-  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set())
+
+  // Wrap onNodesChange to track user-dragged positions so they survive re-layouts.
+  const onNodesChange = useCallback((changes: NodeChange<Node>[]) => {
+    onNodesChangeBase(changes)
+    for (const change of changes) {
+      if (change.type === 'position' && change.position) {
+        savedPositionsRef.current.set(change.id, change.position)
+      }
+    }
+  }, [onNodesChangeBase])
+  // 3-level display: chip (compact) → cardGrid (workload cards) → topology (full graph)
+  const [groupLevels, setGroupLevels] = useState<Map<string, GroupDisplayLevel>>(new Map())
   const [expandedPodGroups, setExpandedPodGroups] = useState<Set<string>>(new Set())
+
+  // Derive collapsedGroups for ELK/edges: both 'chip' and 'cardGrid' are collapsed
+  const collapsedGroups = useMemo(() => {
+    const set = new Set<string>()
+    for (const [id, level] of groupLevels) {
+      if (level !== 'topology') set.add(id)
+    }
+    return set
+  }, [groupLevels])
   const [layoutError, setLayoutError] = useState<string | null>(null)
   const [layoutRetryCount, setLayoutRetryCount] = useState(0)
+  const [fitViewCounter, setFitViewCounter] = useState(0)
   const [isExporting, setIsExporting] = useState(false)
   const prevStructureRef = useRef<string>('')
   const layoutVersionRef = useRef(0) // Used to invalidate stale layout results
+  // Saved node positions for preservation across topology updates.
+  // Prevents every cluster change from re-running a full ELK layout (which shifts all nodes).
+  const savedPositionsRef = useRef<Map<string, { x: number; y: number }>>(new Map())
+  const prevRetryCountRef = useRef(0)
+  // Stores the current groupMap so collapse-all can reference group IDs without a stale closure
+  const groupMapRef = useRef<Map<string, string[]>>(new Map())
+  // Tracks whether the one-time smart default (collapse all for large clusters) has fired
+  const hasAppliedSmartDefaultRef = useRef(false)
+  // After layout completes for a single-group change, stores the group ID so
+  // ViewportController can fitView to it (with correct timing — after setNodes)
+  const fitToGroupAfterLayoutRef = useRef<string | null>(null)
+
+  // Reset group display levels when namespace filter changes (instant switching)
+  const prevNamespacesKeyRef = useRef(namespacesKey)
+  useEffect(() => {
+    if (namespacesKey !== prevNamespacesKeyRef.current) {
+      prevNamespacesKeyRef.current = namespacesKey
+      setGroupLevels(new Map())
+      hasAppliedSmartDefaultRef.current = false
+      savedPositionsRef.current.clear()
+      setFitViewCounter(c => c + 1)
+    }
+  }, [namespacesKey])
 
-  // Toggle group collapse
-  const handleToggleCollapse = useCallback((groupId: string) => {
-    setCollapsedGroups(prev => {
-      const next = new Set(prev)
-      if (next.has(groupId)) {
-        next.delete(groupId)
-      } else {
-        next.add(groupId)
-      }
+  // Set display level for a single group
+  const handleSetLevel = useCallback((groupId: string, level: GroupDisplayLevel) => {
+    setGroupLevels(prev => {
+      const next = new Map(prev)
+      next.set(groupId, level)
       return next
     })
+    savedPositionsRef.current.clear()
+    // After layout completes, ViewportController will fitView to this group
+    fitToGroupAfterLayoutRef.current = groupId
   }, [])
 
+  // Set all groups to a given level
+  const setAllLevels = useCallback((level: GroupDisplayLevel) => {
+    const next = new Map<string, GroupDisplayLevel>()
+    for (const groupKey of groupMapRef.current.keys()) {
+      next.set(`group-${groupingMode}-${groupKey}`, level)
+    }
+    setGroupLevels(next)
+    savedPositionsRef.current.clear()
+    setFitViewCounter(c => c + 1)
+  }, [groupingMode])
+
   // Expand pod group to show individual pods
   const handleExpandPodGroup = useCallback((podGroupId: string) => {
     setExpandedPodGroups(prev => new Set(prev).add(podGroupId))
@@ -359,13 +434,19 @@ export function TopologyGraph({
     return { workingNodes: nodes, workingEdges: edges }
   }, [topology, expandedPodGroups, expandPodGroup, isTrafficView, groupingMode, createPerGroupInternetNodes])
 
-  // Structure key for change detection
+  // Handle card click in card-grid view — find the topology node and open drawer
+  const handleCardClick = useCallback((nodeId: string) => {
+    const topoNode = topology?.nodes.find(n => n.id === nodeId) || workingNodes.find(n => n.id === nodeId)
+    if (topoNode) onNodeClick(topoNode)
+  }, [topology, workingNodes, onNodeClick])
+
+  // Structure key for change detection — includes groupLevels so chip↔cardGrid triggers relayout
   const structureKey = useMemo(() => {
     const nodeIds = workingNodes.map(n => n.id).sort().join(',')
-    const collapsed = Array.from(collapsedGroups).sort().join(',')
+    const levels = Array.from(groupLevels.entries()).sort().map(([k, v]) => `${k}:${v}`).join(',')
     const expanded = Array.from(expandedPodGroups).sort().join(',')
-    return `${viewMode}|${nodeIds}|${collapsed}|${expanded}|${groupingMode}|${layoutRetryCount}`
-  }, [viewMode, workingNodes, collapsedGroups, expandedPodGroups, groupingMode, layoutRetryCount])
+    return `${viewMode}|${nodeIds}|${levels}|${expanded}|${groupingMode}|${layoutRetryCount}`
+  }, [viewMode, workingNodes, groupLevels, expandedPodGroups, groupingMode, layoutRetryCount])
 
   // Layout when structure changes - use hierarchical ELK layout
   useEffect(() => {
@@ -373,6 +454,8 @@ export function TopologyGraph({
       setNodes([])
       setEdges([])
       prevStructureRef.current = ''
+      savedPositionsRef.current.clear() // Clear on context switch / topology reset
+      hasAppliedSmartDefaultRef.current = false
       return
     }
 
@@ -382,8 +465,40 @@ export function TopologyGraph({
       return
     }
 
+    // Detect explicit re-layout request (Retry button) — clear saved positions so
+    // ELK computes a fresh layout from scratch instead of preserving old positions.
+    const isRetry = layoutRetryCount !== prevRetryCountRef.current
+    if (isRetry) {
+      prevRetryCountRef.current = layoutRetryCount
+      savedPositionsRef.current.clear()
+    }
+
+    // For the initial layout (no saved positions yet) run ELK for all nodes.
+    // For subsequent updates, preserve existing positions — only new nodes get
+    // ELK-computed positions. This prevents the whole graph from shifting every
+    // time the cluster adds a new resource.
+    const isInitialLayout = savedPositionsRef.current.size === 0
+
     prevStructureRef.current = structureKey
 
+    // Smart default: start all namespace groups as chips for large clusters.
+    // Fires once per topology lifecycle (reset on context switch). Returns early
+    // so the re-render with groupLevels set computes the actual layout.
+    if (!hasAppliedSmartDefaultRef.current && groupLevels.size === 0 && groupingMode === 'namespace' && !hideGroupHeader) {
+      const uniqueNamespaces = new Set(workingNodes.map(n => n.data.namespace as string).filter(Boolean))
+      if (uniqueNamespaces.size > LARGE_CLUSTER_NS_THRESHOLD) {
+        hasAppliedSmartDefaultRef.current = true
+        savedPositionsRef.current.clear()
+        const levels = new Map<string, GroupDisplayLevel>()
+        for (const ns of uniqueNamespaces) levels.set(`group-namespace-${ns}`, 'chip')
+        setGroupLevels(levels)
+        return
+      }
+      // Don't mark as applied when skipping — topology data may be stale (e.g., still
+      // showing single-namespace data during a transition to all-namespaces). The real
+      // all-namespace data will arrive and re-trigger this check.
+    }
+
     // Increment version to invalidate any previous in-flight layout
     const thisLayoutVersion = ++layoutVersionRef.current
 
@@ -392,18 +507,22 @@ export function TopologyGraph({
       workingNodes,
       workingEdges,
       groupingMode,
-      collapsedGroups
+      collapsedGroups,
+      groupLevels
     )
+    groupMapRef.current = groupMap
 
     // Apply layout and get positioned nodes
     applyHierarchicalLayout(
       elkGraph,
       workingNodes,
+      workingEdges,
       groupMap,
       groupingMode,
       collapsedGroups,
-      handleToggleCollapse,
-      hideGroupHeader
+      { onSetLevel: handleSetLevel, onCardClick: handleCardClick, onMaximizeNamespace },
+      hideGroupHeader,
+      groupLevels
     ).then(({ nodes: layoutedNodes, error }) => {
       // Check if a newer layout has started - if so, discard this stale result
       if (layoutVersionRef.current !== thisLayoutVersion) {
@@ -418,8 +537,29 @@ export function TopologyGraph({
       }
       setLayoutError(null)
 
+      // Preserve positions for nodes that already have a saved position (i.e. were
+      // present in a previous layout). New nodes use the ELK-computed position.
+      // This prevents the whole graph from shifting every time the topology changes.
+      // isInitialLayout is captured in the outer effect scope.
+      const positionedNodes = isInitialLayout
+        ? layoutedNodes
+        : layoutedNodes.map(node => {
+            const saved = savedPositionsRef.current.get(node.id)
+            return saved ? { ...node, position: saved } : node
+          })
+
+      // Update saved positions: add/overwrite with positions from this layout run.
+      // Remove stale entries for nodes no longer in the topology.
+      const currentIds = new Set(positionedNodes.map(n => n.id))
+      for (const id of savedPositionsRef.current.keys()) {
+        if (!currentIds.has(id)) savedPositionsRef.current.delete(id)
+      }
+      for (const node of positionedNodes) {
+        savedPositionsRef.current.set(node.id, node.position)
+      }
+
       // Add expand/collapse handlers to pod-related nodes
-      const nodesWithHandlers = layoutedNodes.map(node => {
+      const nodesWithHandlers = positionedNodes.map(node => {
         const isPodGroup = node.data?.kind === 'PodGroup'
         const nodeData = node.data?.nodeData as Record<string, unknown> | undefined
         const expandedFromGroup = nodeData?.expandedFromGroup as string | undefined
@@ -437,23 +577,34 @@ export function TopologyGraph({
 
       setNodes(nodesWithHandlers)
 
-      // Build edges with styling (pass node count for animation threshold)
-      const builtEdges = buildEdges(
-        workingEdges,
-        collapsedGroups,
-        groupMap,
-        groupingMode,
-        isTrafficView,
-        nodeToGroup,
-        nodesWithHandlers.length
+      // Hide edges when all groups are collapsed — inter-namespace edges are noise in the overview.
+      // Always show edges in single-namespace view (hideGroupHeader) since there's no group container.
+      const hasAnyExpandedGroup = hideGroupHeader || nodesWithHandlers.some(n =>
+        n.type === 'group' && (n.data as Record<string, unknown>)?.displayLevel === 'topology'
       )
-      setEdges(builtEdges)
+      if (!hasAnyExpandedGroup && groupingMode !== 'none') {
+        setEdges([])
+      } else {
+        const builtEdges = buildEdges(
+          workingEdges,
+          collapsedGroups,
+          groupMap,
+          groupingMode,
+          isTrafficView,
+          nodeToGroup,
+          nodesWithHandlers.length
+        )
+        setEdges(builtEdges)
+      }
+    }).catch((err) => {
+      console.error('[TopologyGraph] Layout post-processing error:', err)
+      setLayoutError(err instanceof Error ? err.message : String(err))
     })
 
     // No cleanup function - we use version-based invalidation instead
     // This prevents React's effect re-runs from canceling in-flight layouts
     // when the actual structure hasn't changed
-  }, [workingNodes, workingEdges, structureKey, groupingMode, hideGroupHeader, collapsedGroups, handleToggleCollapse, isTrafficView, expandedPodGroups, handleExpandPodGroup, handleCollapsePodGroup, setNodes, setEdges, layoutRetryCount])
+  }, [workingNodes, workingEdges, structureKey, groupingMode, hideGroupHeader, collapsedGroups, groupLevels, handleSetLevel, handleCardClick, onMaximizeNamespace, isTrafficView, expandedPodGroups, handleExpandPodGroup, handleCollapsePodGroup, setNodes, setEdges, layoutRetryCount])
 
   // Handle node click
   const handleNodeClick = useCallback(
@@ -499,7 +650,18 @@ export function TopologyGraph({
     })
   }, [selectedNodeId, setNodes])
 
-  if (!topology || topology.nodes.length === 0) {
+  if (!topology) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-theme-text-secondary">
+        <div className="text-center">
+          <Loader2 className="w-6 h-6 animate-spin mx-auto mb-2 opacity-50" />
+          <p className="text-sm">Loading topology...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (topology.nodes.length === 0) {
     return (
       <div className="flex-1 flex items-center justify-center text-theme-text-secondary">
         <div className="text-center">
@@ -541,6 +703,25 @@ export function TopologyGraph({
 
   return (
     <ReactFlowProvider>
+      {/* Namespace breadcrumb — shown when viewing a single namespace */}
+      {namespaceBreadcrumb && (
+        <div className="absolute top-3 left-3 z-10 flex items-center gap-1.5">
+          {onClearNamespace && (
+            <button
+              onClick={onClearNamespace}
+              className="text-xs text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
+            >
+              All Namespaces
+            </button>
+          )}
+          {onClearNamespace && (
+            <span className="text-xs text-theme-text-tertiary">/</span>
+          )}
+          <span className="text-xs font-medium text-theme-text-secondary bg-theme-surface/80 backdrop-blur-sm border border-theme-border/50 rounded-md px-2 py-0.5">
+            {namespaceBreadcrumb}
+          </span>
+        </div>
+      )}
       {/* Warning banner for partial topology data */}
       {topology?.warnings && topology.warnings.length > 0 && (() => {
         const rbacWarnings = topology.warnings.filter(w => w.includes('RBAC not granted'))
@@ -620,10 +801,53 @@ export function TopologyGraph({
         <Controls
           className="bg-theme-surface border border-theme-border rounded-lg"
           showInteractive={false}
+          showZoom={false}
+          showFitView={false}
         >
-          {showExportButton && <ExportImageButton onExportingChange={setIsExporting} />}
+          <CustomControlButtons
+            showExportButton={showExportButton}
+            paused={paused}
+            onTogglePause={onTogglePause}
+            onExportingChange={setIsExporting}
+          />
         </Controls>
-        <ViewportController structureKey={structureKey} />
+        {/* Level controls — separate group matching per-node icons */}
+        {groupingMode !== 'none' && (
+          <div className="react-flow__panel react-flow__controls bottom-left bg-theme-surface border border-theme-border rounded-lg" style={{ marginBottom: 0, left: 10, bottom: 'auto', top: namespaceBreadcrumb ? 40 : 10 }}>
+            {!hideGroupHeader && (
+              <Tooltip content="Collapse all" delay={100} position="right">
+                <button
+                  className="react-flow__controls-button"
+                  onClick={() => setAllLevels('chip')}
+                >
+                  <Minus className="w-3.5 h-3.5" />
+                </button>
+              </Tooltip>
+            )}
+            <Tooltip content="All workload cards" delay={100} position="right">
+              <button
+                className="react-flow__controls-button"
+                onClick={() => setAllLevels('cardGrid')}
+              >
+                <LayoutGrid className="w-3.5 h-3.5" />
+              </button>
+            </Tooltip>
+            <Tooltip content="Expand all" delay={100} position="right">
+              <button
+                className="react-flow__controls-button"
+                onClick={() => setAllLevels('topology')}
+              >
+                <Workflow className="w-3.5 h-3.5" />
+              </button>
+            </Tooltip>
+          </div>
+        )}
+        <ViewportController
+          viewMode={viewMode}
+          layoutRetryCount={layoutRetryCount}
+          fitViewCounter={fitViewCounter}
+          fitToGroupAfterLayoutRef={fitToGroupAfterLayoutRef}
+        />
       </ReactFlow>
     </ReactFlowProvider>
   )
@@ -790,14 +1014,15 @@ function ExportImageButton({ onExportingChange }: { onExportingChange: (v: boole
 
   return (
     <>
-      <button
-        className="react-flow__controls-button"
-        onClick={openDialog}
-        disabled={exporting}
-        title="Export as image"
-      >
-        {exporting ? <Loader2 className="w-3 h-3 animate-spin" /> : <Download className="w-3 h-3" />}
-      </button>
+      <Tooltip content="Export as image" delay={100} position="right">
+        <button
+          className="react-flow__controls-button"
+          onClick={openDialog}
+          disabled={exporting}
+        >
+          {exporting ? <Loader2 className="w-3 h-3 animate-spin" /> : <Download className="w-3 h-3" />}
+        </button>
+      </Tooltip>
       {showDialog && (
         <div
           className="absolute bottom-12 left-0 z-50 bg-theme-surface border border-theme-border rounded-lg shadow-2xl p-3 w-72"
@@ -818,7 +1043,7 @@ function ExportImageButton({ onExportingChange }: { onExportingChange: (v: boole
               <button
                 key={mode}
                 onClick={() => setCaptureMode(mode)}
-                className={`flex-1 px-2 py-1.5 text-xs rounded transition-colors ${captureMode === mode ? 'bg-blue-600 text-white' : 'bg-theme-base text-theme-text-secondary hover:text-theme-text-primary border border-theme-border'}`}
+                className={`flex-1 px-2 py-1.5 text-xs rounded transition-colors ${captureMode === mode ? 'btn-brand' : 'bg-theme-base text-theme-text-secondary hover:text-theme-text-primary border border-theme-border'}`}
               >
                 {mode === 'full' ? 'Entire graph' : 'Visible area'}
               </button>
@@ -832,7 +1057,7 @@ function ExportImageButton({ onExportingChange }: { onExportingChange: (v: boole
                   <button
                     key={f}
                     onClick={() => setFormat(f)}
-                    className={`flex-1 px-2 py-1.5 text-xs rounded transition-colors ${format === f ? 'bg-blue-600 text-white' : 'bg-theme-base text-theme-text-secondary hover:text-theme-text-primary border border-theme-border'}`}
+                    className={`flex-1 px-2 py-1.5 text-xs rounded transition-colors ${format === f ? 'btn-brand' : 'bg-theme-base text-theme-text-secondary hover:text-theme-text-primary border border-theme-border'}`}
                   >
                     {FORMAT_LABELS[f]}
                   </button>
@@ -880,7 +1105,7 @@ function ExportImageButton({ onExportingChange }: { onExportingChange: (v: boole
             <button
               onClick={doExport}
               disabled={exporting}
-              className="flex-1 px-3 py-1.5 text-sm font-medium bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors disabled:opacity-50 flex items-center justify-center gap-1.5"
+              className="flex-1 px-3 py-1.5 text-sm font-medium btn-brand rounded flex items-center justify-center gap-1.5"
             >
               {exporting ? <Loader2 className="w-3 h-3 animate-spin" /> : <Download className="w-3 h-3" />}
               Export
@@ -899,15 +1124,73 @@ function ExportImageButton({ onExportingChange }: { onExportingChange: (v: boole
   )
 }
 
+// Custom control buttons — replaces ReactFlow defaults so we can use our Tooltip component
+function CustomControlButtons({
+  showExportButton,
+  paused,
+  onTogglePause,
+  onExportingChange,
+}: {
+  showExportButton: boolean
+  paused: boolean
+  onTogglePause?: () => void
+  onExportingChange: (v: boolean) => void
+}) {
+  const { zoomIn, zoomOut, fitView } = useReactFlow()
+  const TIP = 100
+  return (
+    <>
+      <Tooltip content="Zoom in" delay={TIP} position="right">
+        <button className="react-flow__controls-button" onClick={() => zoomIn({ duration: 200 })}>
+          <Plus className="w-3 h-3" />
+        </button>
+      </Tooltip>
+      <Tooltip content="Zoom out" delay={TIP} position="right">
+        <button className="react-flow__controls-button" onClick={() => zoomOut({ duration: 200 })}>
+          <Minus className="w-3 h-3" />
+        </button>
+      </Tooltip>
+      <Tooltip content="Fit view" delay={TIP} position="right">
+        <button className="react-flow__controls-button" onClick={() => fitView({ padding: 0.15, duration: 400 })}>
+          <Maximize className="w-3 h-3" />
+        </button>
+      </Tooltip>
+      {showExportButton && <ExportImageButton onExportingChange={onExportingChange} />}
+      {onTogglePause && (
+        <Tooltip content={paused ? 'Resume live updates' : 'Pause live updates'} delay={TIP} position="right">
+          <button
+            className={`react-flow__controls-button ${paused ? 'text-amber-400' : ''}`}
+            onClick={onTogglePause}
+          >
+            {paused ? <Play className="w-3 h-3" /> : <Pause className="w-3 h-3" />}
+          </button>
+        </Tooltip>
+      )}
+    </>
+  )
+}
+
 // Animation duration for viewport transitions
 const VIEWPORT_ANIMATION_DURATION = 400
 
 // Inner component to handle animated viewport transitions and zoom-based CSS variables
 // Must be inside ReactFlow to use useReactFlow hook
-function ViewportController({ structureKey }: { structureKey: string }) {
+function ViewportController({
+  viewMode,
+  layoutRetryCount,
+  fitViewCounter = 0,
+  fitToGroupAfterLayoutRef,
+}: {
+  viewMode: string
+  layoutRetryCount: number
+  fitViewCounter?: number
+  fitToGroupAfterLayoutRef?: React.MutableRefObject<string | null>
+}) {
   const { fitView, zoomIn, zoomOut, setViewport, getViewport } = useReactFlow()
   const nodes = useNodes() // Reactive hook to watch node changes
-  const prevStructureKeyRef = useRef<string>('')
+  const prevViewModeRef = useRef<string>(viewMode)
+  const prevRetryCountRef = useRef(layoutRetryCount)
+  const prevFitViewCounterRef = useRef(fitViewCounter)
   const prevNodesLengthRef = useRef(0)
 
   // Topology keyboard shortcuts
@@ -978,34 +1261,51 @@ function ViewportController({ structureKey }: { structureKey: string }) {
     updateZoomOffset(getViewport())
   }, [updateZoomOffset, getViewport])
 
-  // Fit view when nodes become available or structure changes
-  // This handles both initial mount and view switching scenarios
+  // Fit view only on intentional changes: initial load, namespace/view switch, explicit retry.
+  // Background topology updates (new pods, status changes) must NOT trigger fitView —
+  // doing so would cause the viewport to zoom/pan every few seconds in active clusters.
   useEffect(() => {
-    const structureChanged = structureKey !== prevStructureKeyRef.current
     const nodesJustPopulated = prevNodesLengthRef.current === 0 && nodes.length > 0
+    const viewModeChanged = viewMode !== prevViewModeRef.current
+    const retryRequested = layoutRetryCount !== prevRetryCountRef.current
+    const fitViewRequested = fitViewCounter !== prevFitViewCounterRef.current
 
-    // Update refs
     prevNodesLengthRef.current = nodes.length
-    if (structureChanged) {
-      prevStructureKeyRef.current = structureKey
-    }
+    prevViewModeRef.current = viewMode
+    prevRetryCountRef.current = layoutRetryCount
+    prevFitViewCounterRef.current = fitViewCounter
 
-    // Fit view when:
-    // 1. Nodes just became available (were 0, now > 0) - handles initial mount/view switch
-    // 2. Structure changed AND nodes already exist - handles topology changes
-    if (nodesJustPopulated || (structureChanged && nodes.length > 0)) {
-      // Small delay to ensure DOM is updated
+    if (nodesJustPopulated || viewModeChanged || retryRequested || fitViewRequested) {
       const timeoutId = setTimeout(() => {
         fitView({
           padding: 0.15,
-          // No animation when nodes first appear, animate on subsequent structure changes
           duration: nodesJustPopulated ? 0 : VIEWPORT_ANIMATION_DURATION,
         })
       }, 10)
 
       return () => clearTimeout(timeoutId)
     }
-  }, [structureKey, nodes.length, fitView])
+  }, [viewMode, layoutRetryCount, fitViewCounter, nodes.length, fitView])
+
+  // After a single-group expand/collapse, fit the viewport to that group.
+  // This effect fires when nodes update (triggered by setNodes after async layout).
+  useEffect(() => {
+    if (!fitToGroupAfterLayoutRef?.current) return
+    const targetGroupId = fitToGroupAfterLayoutRef.current
+    fitToGroupAfterLayoutRef.current = null
+    // Find the group and its children to fit to
+    const targetNodes = nodes.filter(n => n.id === targetGroupId || n.parentId === targetGroupId)
+    if (targetNodes.length > 0) {
+      setTimeout(() => {
+        fitView({
+          nodes: targetNodes.map(n => ({ id: n.id })),
+          padding: 0.2,
+          duration: VIEWPORT_ANIMATION_DURATION,
+          maxZoom: 1.5,
+        })
+      }, 10)
+    }
+  }, [nodes, fitView, fitToGroupAfterLayoutRef])
 
   return null
 }