@skyhook-io/k8s-ui 1.7.7 → 1.7.8

package/src/components/timeline/index.ts

@@ -1,3 +1,4 @@
 export * from './shared'
 export * from './DiffViewer'
 export * from './TimelineList'
+export * from './TimelineSwimlanes'

package/src/components/topology/K8sResourceNode.tsx

@@ -129,70 +129,70 @@ function getIssueTooltip(issue: string | undefined): React.ReactNode {
 }
 
 // Default dimensions for unknown CRD kinds
-export const DEFAULT_NODE_DIMENSIONS = { width: 260, height: 56 }
+export const DEFAULT_NODE_DIMENSIONS = { width: 260, height: 84 }
 
 // Node dimensions for ELK layout - sized for typical K8s resource names
 export const NODE_DIMENSIONS: Record<NodeKind, { width: number; height: number }> = {
   Internet: { width: 120, height: 52 },
-  Ingress: { width: 300, height: 56 },
-  Gateway: { width: 300, height: 56 },
-  HTTPRoute: { width: 300, height: 56 },
-  GRPCRoute: { width: 300, height: 56 },
-  TCPRoute: { width: 300, height: 56 },
-  TLSRoute: { width: 300, height: 56 },
-  Service: { width: 260, height: 56 },
-  Deployment: { width: 280, height: 56 },
-  Rollout: { width: 280, height: 56 },
-  Application: { width: 300, height: 56 }, // ArgoCD Application
-  Kustomization: { width: 300, height: 56 }, // FluxCD Kustomization
-  HelmRelease: { width: 280, height: 56 }, // FluxCD HelmRelease
-  GitRepository: { width: 280, height: 56 }, // FluxCD GitRepository
-  DaemonSet: { width: 280, height: 56 },
-  StatefulSet: { width: 280, height: 56 },
-  ReplicaSet: { width: 280, height: 56 },
-  Pod: { width: 300, height: 56 },
+  Ingress: { width: 300, height: 84 },
+  Gateway: { width: 300, height: 84 },
+  HTTPRoute: { width: 300, height: 84 },
+  GRPCRoute: { width: 300, height: 84 },
+  TCPRoute: { width: 300, height: 84 },
+  TLSRoute: { width: 300, height: 84 },
+  Service: { width: 260, height: 84 },
+  Deployment: { width: 280, height: 84 },
+  Rollout: { width: 280, height: 84 },
+  Application: { width: 300, height: 84 }, // ArgoCD Application
+  Kustomization: { width: 300, height: 84 }, // FluxCD Kustomization
+  HelmRelease: { width: 280, height: 84 }, // FluxCD HelmRelease
+  GitRepository: { width: 280, height: 84 }, // FluxCD GitRepository
+  DaemonSet: { width: 280, height: 84 },
+  StatefulSet: { width: 280, height: 84 },
+  ReplicaSet: { width: 280, height: 84 },
+  Pod: { width: 300, height: 84 },
   PodGroup: { width: 200, height: 64 },
-  ConfigMap: { width: 180, height: 48 },
-  Secret: { width: 180, height: 48 },
-  HorizontalPodAutoscaler: { width: 280, height: 56 },
-  Job: { width: 180, height: 56 },
-  CronJob: { width: 200, height: 56 },
-  PersistentVolumeClaim: { width: 200, height: 48 },
-  Namespace: { width: 180, height: 48 },
-  Node: { width: 280, height: 56 },
-  NodePool: { width: 260, height: 56 },
-  NodeClaim: { width: 260, height: 56 },
-  NodeClass: { width: 260, height: 56 },
-  KnativeService: { width: 280, height: 56 },
-  KnativeConfiguration: { width: 280, height: 56 },
-  KnativeRevision: { width: 280, height: 56 },
-  KnativeRoute: { width: 280, height: 56 },
-  Broker: { width: 280, height: 56 },
-  Channel: { width: 280, height: 56 },
-  Trigger: { width: 280, height: 56 },
-  PingSource: { width: 280, height: 56 },
-  ApiServerSource: { width: 280, height: 56 },
-  ContainerSource: { width: 280, height: 56 },
-  SinkBinding: { width: 280, height: 56 },
-  IngressRoute: { width: 280, height: 56 },
-  IngressRouteTCP: { width: 280, height: 56 },
-  IngressRouteUDP: { width: 280, height: 56 },
-  Middleware: { width: 280, height: 56 },
-  MiddlewareTCP: { width: 280, height: 56 },
-  TraefikService: { width: 280, height: 56 },
-  ServersTransport: { width: 280, height: 56 },
-  ServersTransportTCP: { width: 300, height: 56 },
-  TLSOption: { width: 280, height: 56 },
-  TLSStore: { width: 280, height: 56 },
-  HTTPProxy: { width: 280, height: 56 }, // Contour
-  CAPICluster: { width: 280, height: 56 }, // Cluster API
-  MachineDeployment: { width: 300, height: 56 },
-  MachineSet: { width: 280, height: 56 },
-  Machine: { width: 260, height: 56 },
-  MachinePool: { width: 280, height: 56 },
-  KubeadmControlPlane: { width: 300, height: 56 },
-  ClusterClass: { width: 280, height: 56 },
-  MachineHealthCheck: { width: 300, height: 56 },
+  ConfigMap: { width: 180, height: 84 },
+  Secret: { width: 180, height: 84 },
+  HorizontalPodAutoscaler: { width: 280, height: 84 },
+  Job: { width: 180, height: 84 },
+  CronJob: { width: 200, height: 84 },
+  PersistentVolumeClaim: { width: 200, height: 84 },
+  Namespace: { width: 180, height: 84 },
+  Node: { width: 280, height: 84 },
+  NodePool: { width: 260, height: 84 },
+  NodeClaim: { width: 260, height: 84 },
+  NodeClass: { width: 260, height: 84 },
+  KnativeService: { width: 280, height: 84 },
+  KnativeConfiguration: { width: 280, height: 84 },
+  KnativeRevision: { width: 280, height: 84 },
+  KnativeRoute: { width: 280, height: 84 },
+  Broker: { width: 280, height: 84 },
+  Channel: { width: 280, height: 84 },
+  Trigger: { width: 280, height: 84 },
+  PingSource: { width: 280, height: 84 },
+  ApiServerSource: { width: 280, height: 84 },
+  ContainerSource: { width: 280, height: 84 },
+  SinkBinding: { width: 280, height: 84 },
+  IngressRoute: { width: 280, height: 84 },
+  IngressRouteTCP: { width: 280, height: 84 },
+  IngressRouteUDP: { width: 280, height: 84 },
+  Middleware: { width: 280, height: 84 },
+  MiddlewareTCP: { width: 280, height: 84 },
+  TraefikService: { width: 280, height: 84 },
+  ServersTransport: { width: 280, height: 84 },
+  ServersTransportTCP: { width: 300, height: 84 },
+  TLSOption: { width: 280, height: 84 },
+  TLSStore: { width: 280, height: 84 },
+  HTTPProxy: { width: 280, height: 84 }, // Contour
+  CAPICluster: { width: 280, height: 84 }, // Cluster API
+  MachineDeployment: { width: 300, height: 84 },
+  MachineSet: { width: 280, height: 84 },
+  Machine: { width: 260, height: 84 },
+  MachinePool: { width: 280, height: 84 },
+  KubeadmControlPlane: { width: 300, height: 84 },
+  ClusterClass: { width: 280, height: 84 },
+  MachineHealthCheck: { width: 300, height: 84 },
 }
 
 
@@ -425,7 +425,7 @@ export const K8sResourceNode = memo(function K8sResourceNode({
         className={clsx(
           'relative rounded-lg overflow-hidden',
           'bg-theme-surface topology-node-card',
-          selected && 'ring-2 ring-skyhook-400',
+          selected && 'topology-node-selected',
           isSmallNode && 'opacity-90',
           // Status bar via CSS pseudo-element (defined in index.css)
           (status === 'healthy' || status === 'unknown') && 'topology-node-status-bar',

package/src/components/topology/TopologyFilterSidebar.tsx

@@ -386,9 +386,31 @@ export const TopologyFilterSidebar = memo(function TopologyFilterSidebar({
 
       {/* Footer stats */}
       <div className="px-3 py-2 border-t border-theme-border bg-theme-surface/50">
-        <div className="text-xs text-theme-text-tertiary">
-          Showing {availableKinds.filter(k => visibleKinds.has(k.kind)).reduce((sum, k) => sum + (kindCounts.get(k.kind) || 0), 0)} of {nodes.length} resources
-        </div>
+        {(() => {
+          // Total and visible both sum over availableKinds (the kinds the user
+          // can filter). nodes.length would include the synthetic Internet node,
+          // which isn't a filterable kind, so the two wouldn't reconcile and a
+          // "filtered" count would show even with nothing hidden.
+          const sumKinds = (ks: typeof availableKinds) =>
+            ks.reduce((sum, k) => sum + (kindCounts.get(k.kind) || 0), 0)
+          const total = sumKinds(availableKinds)
+          const visible = sumKinds(availableKinds.filter(k => visibleKinds.has(k.kind)))
+          const hidden = total - visible
+          const filteredOutKinds = availableKinds.filter(k => !visibleKinds.has(k.kind) && (kindCounts.get(k.kind) || 0) > 0)
+          return (
+            <div
+              className="text-xs text-theme-text-tertiary"
+              title={filteredOutKinds.length > 0
+                ? `Hidden by kind filter: ${filteredOutKinds.map(k => `${kindCounts.get(k.kind)} ${k.kind}`).join(', ')}`
+                : undefined}
+            >
+              Showing {visible} of {total} resources
+              {hidden > 0 && (
+                <span className="ml-1 text-amber-400 cursor-help">· {hidden} filtered</span>
+              )}
+            </div>
+          )
+        })()}
       </div>
     </div>
   )

package/src/components/topology/TopologyGraph.tsx

@@ -3,7 +3,7 @@ import {
   ReactFlow,
   ReactFlowProvider,
   Background,
-  Controls,
+  Panel,
   useNodesState,
   useEdgesState,
   useReactFlow,
@@ -20,7 +20,7 @@ import {
 import '@xyflow/react/dist/style.css'
 import { toCanvas } from 'html-to-image'
 
-import { AlertTriangle, Download, Layers, LayoutGrid, Loader2, Maximize, Minus, Pause, Play, Plus, RotateCw, Shield, Workflow } from 'lucide-react'
+import { AlertTriangle, ChevronsDownUp, ChevronsUpDown, Download, Layers, LayoutGrid, Loader2, Maximize, Minus, Pause, Play, Plus, RotateCw, Shield } from 'lucide-react'
 import { PaneLoader } from '../ui/PaneLoader'
 import { Tooltip } from '../ui/Tooltip'
 import { useToast } from '../ui/Toast'
@@ -175,6 +175,10 @@ interface TopologyGraphProps {
   onClearNamespace?: () => void
   /** Serialized namespace filter — when this changes, reset groupLevels for fresh smart default */
   namespacesKey?: string
+  /** Node to pan/zoom the canvas to. Bump focusNonce to re-trigger for the same id. */
+  focusNodeId?: string
+  /** Increment to request a focus on focusNodeId (lets the same node be re-focused). */
+  focusNonce?: number
 }
 
 export function TopologyGraph({
@@ -191,6 +195,8 @@ export function TopologyGraph({
   namespaceBreadcrumb,
   onClearNamespace,
   namespacesKey = '',
+  focusNodeId,
+  focusNonce,
 }: TopologyGraphProps) {
   const isTrafficView = viewMode === 'traffic'
   const [nodes, setNodes, onNodesChangeBase] = useNodesState([] as Node[])
@@ -234,6 +240,11 @@ export function TopologyGraph({
   // 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)
+  // Set by the bulk level controls (collapse/cards/expand all); fits the whole
+  // graph once the relayout lands. A flag (not a counter) so the fit is keyed
+  // to the post-relayout nodes update, not the click — the click fires before
+  // the async ELK relayout, which would frame the pre-change layout.
+  const fitAllAfterLayoutRef = useRef(false)
 
   // Reset group display levels when namespace filter changes (instant switching)
   const prevNamespacesKeyRef = useRef(namespacesKey)
@@ -247,6 +258,21 @@ export function TopologyGraph({
     }
   }, [namespacesKey])
 
+  // Changing grouping (By Namespace / By App / No Grouping) reorganizes the
+  // whole graph, so re-frame it. Skip when a namespace change drove it — that
+  // path already fits via the effect above (avoids a double fit).
+  const prevGroupingModeRef = useRef(groupingMode)
+  const prevNsKeyForGroupingRef = useRef(namespacesKey)
+  useEffect(() => {
+    const groupingChanged = groupingMode !== prevGroupingModeRef.current
+    const nsChanged = namespacesKey !== prevNsKeyForGroupingRef.current
+    prevGroupingModeRef.current = groupingMode
+    prevNsKeyForGroupingRef.current = namespacesKey
+    if (groupingChanged && !nsChanged) {
+      fitAllAfterLayoutRef.current = true
+    }
+  }, [groupingMode, namespacesKey])
+
   // Set display level for a single group
   const handleSetLevel = useCallback((groupId: string, level: GroupDisplayLevel) => {
     setGroupLevels(prev => {
@@ -267,7 +293,9 @@ export function TopologyGraph({
     }
     setGroupLevels(next)
     savedPositionsRef.current.clear()
-    setFitViewCounter(c => c + 1)
+    // Re-frame the whole graph after the relayout — collapse/expand changes the
+    // content bounds enough that the old viewport no longer fits it.
+    fitAllAfterLayoutRef.current = true
   }, [groupingMode])
 
   // Expand pod group to show individual pods
@@ -444,6 +472,30 @@ export function TopologyGraph({
     if (topoNode) onNodeClick(topoNode)
   }, [topology, workingNodes, onNodeClick])
 
+  // Expand the group containing a searched-but-collapsed node, then fit the
+  // viewport to that group once the relayout lands. We fit to the GROUP (via
+  // the existing fitToGroupAfterLayoutRef path) rather than centering on the
+  // node directly: the node's absolute position isn't settled until ELK
+  // finishes the async relayout, so a per-node center races it and lands on
+  // stale coords. The node still carries data.selected, so it glows inside the
+  // framed group.
+  const expandGroupForNode = useCallback((nodeId: string) => {
+    if (groupingMode === 'none') return
+    const target = workingNodes.find(n => n.id === nodeId)
+    if (!target) return
+    const groupKey = getGroupKey(target, groupingMode)
+    if (!groupKey) return
+    const groupId = `group-${groupingMode}-${groupKey}`
+    fitToGroupAfterLayoutRef.current = groupId
+    savedPositionsRef.current.clear()
+    setGroupLevels(prev => {
+      if (prev.get(groupId) === 'topology') return prev
+      const next = new Map(prev)
+      next.set(groupId, 'topology')
+      return next
+    })
+  }, [groupingMode, workingNodes])
+
   // Structure key for change detection — includes groupLevels so chip↔cardGrid triggers relayout.
   //
   // Uses an order-independent fold of per-ID hashes (see foldHash) instead of
@@ -665,10 +717,17 @@ export function TopologyGraph({
       const updated = nds.map(node => {
         const shouldBeSelected = node.id === selectedNodeId
         const isCurrentlySelected = node.data?.selected ?? false
+        // Only act on the select/deselect transition. Don't touch zIndex
+        // otherwise — a blanket compare would fight the layout's group zIndex
+        // (-1) every render and loop (React #185). Groups are never selectable,
+        // so they never enter here and keep their layout zIndex.
         if (shouldBeSelected !== isCurrentlySelected) {
           changed = true
           return {
             ...node,
+            // Lift the selected leaf above its siblings (default z 0) so its
+            // outline+glow isn't painted over; restore default on deselect.
+            zIndex: shouldBeSelected ? 10 : undefined,
             data: {
               ...node.data,
               selected: shouldBeSelected,
@@ -679,7 +738,10 @@ export function TopologyGraph({
       })
       return changed ? updated : nds // Return same array if nothing changed
     })
-  }, [selectedNodeId, setNodes])
+    // `nodes` is a dep so selection re-applies after a relayout introduces the
+    // target node (e.g. search expands a collapsed group). Safe from loops: the
+    // functional update returns the same array ref when nothing changed.
+  }, [selectedNodeId, setNodes, nodes])
 
   if (!topology) {
     return <PaneLoader label="Loading topology…" className="absolute inset-0" />
@@ -831,55 +893,58 @@ export function TopologyGraph({
         onlyRenderVisibleElements={!isExporting}
       >
         <Background variant={BackgroundVariant.Dots} gap={20} size={1} color="#334155" />
-        <Controls
-          className="bg-theme-surface border border-theme-border rounded-lg"
-          showInteractive={false}
-          showZoom={false}
-          showFitView={false}
-        >
-          <CustomControlButtons
-            showExportButton={showExportButton}
-            paused={paused}
-            onTogglePause={onTogglePause}
-            onExportingChange={setIsExporting}
-          />
-        </Controls>
-        {/* 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">
+        {/* Bottom-left controls. Two distinct pills with a gap rather than one
+            long strip: a viewport group (zoom/fit/export/pause) and, only when
+            grouping is active, a level-of-detail group. */}
+        <Panel position="bottom-left" className="flex flex-col items-start gap-2">
+          {groupingMode !== 'none' && (
+            <div className="react-flow__controls overflow-hidden" style={{ position: 'static', margin: 0 }}>
+              {!hideGroupHeader && (
+                <Tooltip content="Collapse all groups" delay={100} position="right">
+                  <button
+                    className="react-flow__controls-button"
+                    onClick={() => setAllLevels('chip')}
+                  >
+                    <ChevronsDownUp 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('chip')}
+                  onClick={() => setAllLevels('cardGrid')}
                 >
-                  <Minus className="w-3.5 h-3.5" />
+                  <LayoutGrid 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>
+              <Tooltip content="Expand all groups" delay={100} position="right">
+                <button
+                  className="react-flow__controls-button"
+                  onClick={() => setAllLevels('topology')}
+                >
+                  <ChevronsUpDown className="w-3.5 h-3.5" />
+                </button>
+              </Tooltip>
+            </div>
+          )}
+          <div className="react-flow__controls overflow-hidden" style={{ position: 'static', margin: 0 }}>
+            <CustomControlButtons
+              showExportButton={showExportButton}
+              paused={paused}
+              onTogglePause={onTogglePause}
+              onExportingChange={setIsExporting}
+            />
           </div>
-        )}
+        </Panel>
         <ViewportController
           viewMode={viewMode}
           layoutRetryCount={layoutRetryCount}
           fitViewCounter={fitViewCounter}
           fitToGroupAfterLayoutRef={fitToGroupAfterLayoutRef}
+          fitAllAfterLayoutRef={fitAllAfterLayoutRef}
+          focusNodeId={focusNodeId}
+          focusNonce={focusNonce}
+          onRequestExpandForNode={expandGroupForNode}
         />
       </ReactFlow>
     </ReactFlowProvider>
@@ -1213,17 +1278,37 @@ function ViewportController({
   layoutRetryCount,
   fitViewCounter = 0,
   fitToGroupAfterLayoutRef,
+  fitAllAfterLayoutRef,
+  focusNodeId,
+  focusNonce = 0,
+  onRequestExpandForNode,
 }: {
   viewMode: string
   layoutRetryCount: number
   fitViewCounter?: number
   fitToGroupAfterLayoutRef?: React.MutableRefObject<string | null>
+  fitAllAfterLayoutRef?: React.MutableRefObject<boolean>
+  focusNodeId?: string
+  focusNonce?: number
+  onRequestExpandForNode?: (nodeId: string) => void
 }) {
-  const { fitView, zoomIn, zoomOut, setViewport, getViewport } = useReactFlow()
+  const { fitView, zoomIn, zoomOut, setViewport, getViewport, getInternalNode, setCenter } = useReactFlow()
   const nodes = useNodes() // Reactive hook to watch node changes
+
+  // Pan/zoom the viewport so a single node is centered.
+  const centerOnNode = useCallback((nodeId: string): boolean => {
+    const node = getInternalNode(nodeId)
+    if (!node) return false
+    const { x, y } = node.internals.positionAbsolute
+    const w = node.measured?.width ?? 0
+    const h = node.measured?.height ?? 0
+    setCenter(x + w / 2, y + h / 2, { zoom: 1.2, duration: VIEWPORT_ANIMATION_DURATION })
+    return true
+  }, [getInternalNode, setCenter])
   const prevViewModeRef = useRef<string>(viewMode)
   const prevRetryCountRef = useRef(layoutRetryCount)
   const prevFitViewCounterRef = useRef(fitViewCounter)
+  const prevFocusNonceRef = useRef(focusNonce)
   const prevNodesLengthRef = useRef(0)
 
   // Topology keyboard shortcuts
@@ -1320,25 +1405,56 @@ function ViewportController({
     }
   }, [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).
+  // Pan/zoom to a single searched node. Gated on focusNonce so the same
+  // node can be re-focused, and so this never fires on background updates.
+  // If the node is already on the canvas, center now. If it isn't (it's
+  // collapsed inside a group chip), ask the parent to expand that group
+  // (onRequestExpandForNode); the fit-to-group effect then frames the group
+  // once the relayout lands, and the node glows inside it via data.selected.
+  useEffect(() => {
+    if (focusNonce === prevFocusNonceRef.current) return
+    prevFocusNonceRef.current = focusNonce
+    if (!focusNodeId) return
+    if (!centerOnNode(focusNodeId)) {
+      onRequestExpandForNode?.(focusNodeId)
+    }
+  }, [focusNonce, focusNodeId, centerOnNode, onRequestExpandForNode])
+
+  // After a single-group expand/collapse, fit the viewport to that group, once
+  // the relayout has SETTLED. Debounced (reschedules on each nodes update) so
+  // it frames the final positions, not an intermediate layout — and so the
+  // group's nodes are measured when fitView reads their bounds.
   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(() => {
+    const id = setTimeout(() => {
+      fitToGroupAfterLayoutRef.current = null
+      const targetNodes = nodes.filter(n => n.id === targetGroupId || n.parentId === targetGroupId)
+      if (targetNodes.length > 0) {
         fitView({
           nodes: targetNodes.map(n => ({ id: n.id })),
           padding: 0.2,
           duration: VIEWPORT_ANIMATION_DURATION,
           maxZoom: 1.5,
         })
-      }, 10)
-    }
+      }
+    }, 250)
+    return () => clearTimeout(id)
   }, [nodes, fitView, fitToGroupAfterLayoutRef])
 
+  // After a bulk level change (collapse/cards/expand all), fit the whole graph
+  // once the relayout has SETTLED. The expand relayout lands in phases, so a
+  // fit on the first nodes update frames an intermediate (compact) layout.
+  // Debounce instead: each nodes update reschedules, so the fit fires only
+  // after nodes stop changing, then clears the flag.
+  useEffect(() => {
+    if (!fitAllAfterLayoutRef?.current) return
+    const id = setTimeout(() => {
+      fitAllAfterLayoutRef.current = false
+      fitView({ padding: 0.15, duration: VIEWPORT_ANIMATION_DURATION })
+    }, 250)
+    return () => clearTimeout(id)
+  }, [nodes, fitView, fitAllAfterLayoutRef])
+
   return null
 }

package/src/components/topology/TopologySearch.tsx

@@ -15,7 +15,7 @@ interface TopologySearchProps {
    * only shows CAPI kinds), it should still pass the full topology
    * here so the empty-state can tell users "your query matches X
    * resources hidden by the current view" rather than the
-   * misleading "No resources found." (SKY-828 bug 45)
+   * misleading "No resources found."
    */
   allNodes?: TopologyNode[]
   /**
@@ -23,6 +23,12 @@ interface TopologySearchProps {
    * empty-state hint above. Defaults to "current view".
    */
   viewModeLabel?: string
+  /**
+   * Position utilities for the trigger button (default "top-4 left-4").
+   * The host overrides this to avoid colliding with other canvas overlays
+   * (e.g. stacking below the namespace breadcrumb).
+   */
+  triggerClassName?: string
 }
 
 // Icon mapping for different resource kinds
@@ -64,7 +70,7 @@ function getKindColor(kind: string): string {
   }
 }
 
-export function TopologySearch({ nodes, onNodeSelect, onZoomToNode, allNodes, viewModeLabel }: TopologySearchProps) {
+export function TopologySearch({ nodes, onNodeSelect, onZoomToNode, allNodes, viewModeLabel, triggerClassName }: TopologySearchProps) {
   const [isOpen, setIsOpen] = useState(false)
   const [query, setQuery] = useState('')
   const [selectedIndex, setSelectedIndex] = useState(0)
@@ -96,9 +102,9 @@ export function TopologySearch({ nodes, onNodeSelect, onZoomToNode, allNodes, vi
   // Count of matches in the unfiltered topology that the current
   // view-mode filter is hiding. We only compute this when there's
   // a query AND the visible set returned zero results, so the cost
-  // is bounded to actual no-result interactions.
-  // (SKY-828 bug 45: Fleet view hides Pods, so searching pod names
-  // returned "No resources found" — misleading.)
+  // is bounded to actual no-result interactions. (Fleet view hides
+  // Pods, so searching a pod name there would otherwise just say
+  // "No resources found".)
   const hiddenMatchCount = useMemo(() => {
     if (!query.trim() || filteredNodes.length > 0 || !allNodes) return 0
     const lowerQuery = query.toLowerCase()
@@ -193,12 +199,15 @@ export function TopologySearch({ nodes, onNodeSelect, onZoomToNode, allNodes, vi
       {/* Search trigger button */}
       <button
         onClick={handleOpen}
-        className="absolute top-4 left-4 z-10 flex items-center gap-2 px-3 py-2 bg-theme-surface/90 backdrop-blur border border-theme-border rounded-lg text-theme-text-secondary hover:text-theme-text-primary hover:border-theme-border-light transition-colors"
+        className={clsx(
+          'absolute z-10 flex items-center gap-2 px-3 py-2 bg-theme-surface/90 backdrop-blur border border-theme-border rounded-lg text-theme-text-secondary hover:text-theme-text-primary hover:border-theme-border-light transition-colors',
+          triggerClassName ?? 'top-4 left-4'
+        )}
       >
         <Search className="w-4 h-4" />
         <span className="text-sm">Search</span>
-        <kbd className="hidden sm:inline-flex items-center gap-0.5 px-1.5 py-0.5 text-xs bg-theme-elevated rounded border border-theme-border-light">
-          <span className="text-[10px]">⌘</span>K
+        <kbd className="hidden sm:inline-flex items-center px-1.5 py-0.5 text-xs bg-theme-elevated rounded border border-theme-border-light">
+          /
         </kbd>
       </button>
 

package/src/components/topology/topology-search-match.test.ts

@@ -40,7 +40,7 @@ function makeNode(id: string, kind: string, name: string, namespace = 'default')
   } as unknown as TopologyNode
 }
 
-describe('TopologySearch hidden-match counting (SKY-828 bug 45)', () => {
+describe('TopologySearch hidden-match counting', () => {
   // The bug: in Fleet topology view (which only shows CAPI kinds),
   // searching pod names returned "No resources found" — misleading
   // when the cluster has 338 pods. We compute a hidden-match count

package/src/components/topology/topology.css

@@ -18,6 +18,24 @@
   box-shadow: var(--topology-node-shadow);
 }
 
+/*
+ * Selected node (its drawer/detail is open). An outline (not box-shadow) draws
+ * the crisp "outside border" with a gap and isn't clipped by the card's
+ * overflow-hidden; the box-shadow keeps the base elevation and adds a soft
+ * brand glow so the node lifts off the dark canvas. color-mix keeps the glow
+ * on the theme token instead of a hardcoded rgba.
+ */
+.topology-node-selected {
+  /* skyhook-400 (#6A9FE0) — hardcoded like the rest of this file's palette
+     because @theme inline doesn't expose the brand vars at runtime. */
+  outline: 3px solid #6a9fe0;
+  outline-offset: 2px;
+  box-shadow:
+    var(--topology-node-shadow),
+    0 0 0 1px rgba(106, 159, 224, 0.85),
+    0 0 28px 5px rgba(106, 159, 224, 0.7);
+}
+
 /* Status bar via pseudo-element (saves one DOM element per node) */
 .topology-node-status-bar::before {
   content: '';