@skyhook-io/k8s-ui 1.8.10 → 1.8.12

package/src/components/topology/TopologyBreadcrumb.tsx

@@ -0,0 +1,30 @@
+interface TopologyBreadcrumbProps {
+  /** The single active namespace to show. */
+  namespace: string
+  /** When set, renders a clickable "All Namespaces" crumb that clears the filter. */
+  onClear?: () => void
+}
+
+/**
+ * Namespace-context crumb for the topology overlay bar, shown when the graph is
+ * scoped to a single namespace. Place it in the host's overlay-bar composition
+ * (e.g. above the search) so it reads as page context.
+ */
+export function TopologyBreadcrumb({ namespace, onClear }: TopologyBreadcrumbProps) {
+  return (
+    <div className="flex items-center gap-1.5 pointer-events-auto">
+      {onClear && (
+        <button
+          onClick={onClear}
+          className="text-xs text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
+        >
+          All Namespaces
+        </button>
+      )}
+      {onClear && <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">
+        {namespace}
+      </span>
+    </div>
+  )
+}

package/src/components/topology/TopologyControls.tsx

@@ -80,7 +80,9 @@ export function TopologyControls({
   }
 
   return (
-    <div className="absolute top-4 right-4 z-10 flex items-center gap-2">
+    // Layout-neutral (positioned by the host's overlay bar): `relative` anchors
+    // its own dropdowns; `pointer-events-auto` inside the pointer-events-none bar.
+    <div className="relative flex items-center gap-2 pointer-events-auto">
       {/* Freshness/liveness status — backed for legibility over the canvas but
           borderless + divided off, so it reads as a status, not another control. */}
       {leadingSlot && (

package/src/components/topology/TopologyFilterSidebar.tsx

@@ -45,13 +45,22 @@ const RESOURCE_KINDS: {
   { kind: 'PodGroup', label: 'Pod Group', icon: getTopologyIcon('PodGroup'), color: 'text-lime-400', category: 'workloads' },
   { kind: 'Job', label: 'Job', icon: getTopologyIcon('Job'), color: 'text-orange-400', category: 'workloads' },
   { kind: 'CronJob', label: 'CronJob', icon: getTopologyIcon('CronJob'), color: 'text-orange-300', category: 'workloads' },
+  { kind: 'Workflow', label: 'Workflow', icon: getTopologyIcon('Workflow'), color: 'text-purple-400', category: 'workloads' },
+  { kind: 'CronWorkflow', label: 'CronWorkflow', icon: getTopologyIcon('CronWorkflow'), color: 'text-purple-300', category: 'workloads' },
 
   // Config
   { kind: 'ConfigMap', label: 'ConfigMap', icon: getTopologyIcon('ConfigMap'), color: 'text-amber-400', category: 'config' },
   { kind: 'Secret', label: 'Secret', icon: getTopologyIcon('Secret'), color: 'text-red-400', category: 'config' },
+  { kind: 'ServiceAccount', label: 'Service Account', icon: getTopologyIcon('ServiceAccount'), color: 'text-fuchsia-400', category: 'config' },
+  { kind: 'SealedSecret', label: 'Sealed Secret', icon: getTopologyIcon('SealedSecret'), color: 'text-violet-400', category: 'config' },
+  { kind: 'ServiceMonitor', label: 'Service Monitor', icon: getTopologyIcon('ServiceMonitor'), color: 'text-sky-400', category: 'config' },
+  { kind: 'PodMonitor', label: 'Pod Monitor', icon: getTopologyIcon('PodMonitor'), color: 'text-sky-400', category: 'config' },
+  { kind: 'WorkflowTemplate', label: 'WorkflowTemplate', icon: getTopologyIcon('WorkflowTemplate'), color: 'text-purple-300', category: 'config' },
+  { kind: 'ClusterWorkflowTemplate', label: 'ClusterWorkflowTemplate', icon: getTopologyIcon('ClusterWorkflowTemplate'), color: 'text-purple-300', category: 'config' },
 
   // Scaling
   { kind: 'HorizontalPodAutoscaler', label: 'HPA', icon: getTopologyIcon('HorizontalPodAutoscaler'), color: 'text-pink-400', category: 'scaling' },
+  { kind: 'ScaledJob', label: 'ScaledJob', icon: getTopologyIcon('ScaledJob'), color: 'text-pink-300', category: 'scaling' },
 
   // Knative
   { kind: 'KnativeService', label: 'Knative Service', icon: getTopologyIcon('KnativeService'), color: 'text-fuchsia-400', category: 'custom' },

package/src/components/topology/TopologyGraph.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   ReactFlow,
   ReactFlowProvider,
@@ -14,6 +14,7 @@ import {
   type NodeTypes,
   type NodeChange,
   type Viewport,
+  type FitViewOptions,
   BackgroundVariant,
   MarkerType,
 } from '@xyflow/react'
@@ -22,6 +23,8 @@ import { toCanvas } from 'html-to-image'
 
 import { AlertTriangle, ChevronsDownUp, ChevronsUpDown, Download, Info, Layers, LayoutGrid, Loader2, Maximize, Minus, Pause, Play, Plus, RotateCw, Shield } from 'lucide-react'
 import { PaneLoader } from '../ui/PaneLoader'
+import { TopologyOverlayBar } from './TopologyOverlayBar'
+import { Input } from '../ui/Input'
 import { Tooltip } from '../ui/Tooltip'
 import { useToast } from '../ui/Toast'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
@@ -184,10 +187,6 @@ interface TopologyGraphProps {
   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
   /** Node to pan/zoom the canvas to. Bump focusNonce to re-trigger for the same id. */
@@ -201,6 +200,13 @@ interface TopologyGraphProps {
   /** Hover a node → reports its TopologyNode (null on leave). Drives the rail's
    *  reciprocal highlight. */
   onNodeHover?: (node: TopologyNode | null) => void
+  /** Toggle a stable Deployment's normally-collapsed ReplicaSet tier. */
+  onToggleReplicaSets?: (ownerID: string) => void
+  /** Padding reserved around fit-to-view operations for overlaid UI. */
+  fitViewPadding?: FitViewOptions['padding']
+  /** Host overlay content (e.g. a search + controls row), stacked above the
+   *  topology's own status banners in the overlay bar. */
+  children?: ReactNode
 }
 
 export function TopologyGraph({
@@ -214,13 +220,14 @@ export function TopologyGraph({
   paused = false,
   onTogglePause,
   onMaximizeNamespace,
-  namespaceBreadcrumb,
-  onClearNamespace,
   namespacesKey = '',
   focusNodeId,
   focusNonce,
   focusedOwnerId,
   onNodeHover,
+  onToggleReplicaSets,
+  fitViewPadding = 0.15,
+  children,
 }: TopologyGraphProps) {
   const isTrafficView = viewMode === 'traffic'
   const [nodes, setNodes, onNodesChangeBase] = useNodesState([] as Node[])
@@ -701,6 +708,7 @@ export function TopologyGraph({
             onExpand: isExpandablePodGroup ? handleExpandPodGroup : undefined,
             onCollapse: expandedFromGroup ? handleCollapsePodGroup : undefined,
             isExpanded: isExpandablePodGroup ? expandedPodGroups.has(node.id) : undefined,
+            onToggleReplicaSets: nodeData?.replicaSetsExpandable ? onToggleReplicaSets : undefined,
           },
         }
       })
@@ -736,7 +744,7 @@ export function TopologyGraph({
     // 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, groupLevels, handleSetLevel, handleCardClick, onMaximizeNamespace, isTrafficView, expandedPodGroups, handleExpandPodGroup, handleCollapsePodGroup, setNodes, setEdges, layoutRetryCount])
+  }, [workingNodes, workingEdges, structureKey, groupingMode, hideGroupHeader, collapsedGroups, groupLevels, handleSetLevel, handleCardClick, onMaximizeNamespace, isTrafficView, expandedPodGroups, handleExpandPodGroup, handleCollapsePodGroup, onToggleReplicaSets, setNodes, setEdges, layoutRetryCount])
 
   // Handle node click
   const handleNodeClick = useCallback(
@@ -829,6 +837,55 @@ export function TopologyGraph({
     })
   }, [focusedOwnerId, setNodes, nodes])
 
+  // Data-only topology updates must repaint existing nodes without forcing an
+  // ELK relayout. Structure hashing deliberately ignores status and metadata;
+  // keep the React Flow node payload in sync on that fast path.
+  useEffect(() => {
+    const topologyById = new Map(workingNodes.map(node => [node.id, node]))
+    setNodes(nds => {
+      let changed = false
+      const updated = nds.map(node => {
+        if (node.type === 'group') return node
+        const topologyNode = topologyById.get(node.id)
+        if (!topologyNode) return node
+        const nodeData = topologyNode.data as Record<string, unknown>
+        const pods = nodeData.pods
+        const isExpandablePodGroup = topologyNode.kind === 'PodGroup' && Array.isArray(pods) && pods.length > 0
+        const expandedFromGroup = nodeData.expandedFromGroup as string | undefined
+        const onExpand = isExpandablePodGroup ? handleExpandPodGroup : undefined
+        const onCollapse = expandedFromGroup ? handleCollapsePodGroup : undefined
+        const isExpanded = isExpandablePodGroup ? expandedPodGroups.has(node.id) : undefined
+        const toggleReplicaSets = nodeData.replicaSetsExpandable ? onToggleReplicaSets : undefined
+        if (
+          node.data?.kind === topologyNode.kind &&
+          node.data?.name === topologyNode.name &&
+          node.data?.status === topologyNode.status &&
+          node.data?.nodeData === topologyNode.data &&
+          node.data?.onExpand === onExpand &&
+          node.data?.onCollapse === onCollapse &&
+          node.data?.isExpanded === isExpanded &&
+          node.data?.onToggleReplicaSets === toggleReplicaSets
+        ) return node
+        changed = true
+        return {
+          ...node,
+          data: {
+            ...node.data,
+            kind: topologyNode.kind,
+            name: topologyNode.name,
+            status: topologyNode.status,
+            nodeData: topologyNode.data,
+            onExpand,
+            onCollapse,
+            isExpanded,
+            onToggleReplicaSets: toggleReplicaSets,
+          },
+        }
+      })
+      return changed ? updated : nds
+    })
+  }, [workingNodes, expandedPodGroups, handleExpandPodGroup, handleCollapsePodGroup, onToggleReplicaSets, setNodes])
+
   if (!topology) {
     return <PaneLoader label="Loading topology…" className="absolute inset-0" />
   }
@@ -875,86 +932,83 @@ 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'))
-        const otherWarnings = topology.warnings.filter(w => !w.includes('RBAC not granted'))
-        const isAllRbac = otherWarnings.length === 0
-        return (
-          <div className={`absolute top-2 left-2 right-2 z-10 ${isAllRbac ? 'bg-amber-500/10 border-amber-500/20' : 'bg-amber-500/10 border-amber-500/30'} border rounded-lg p-2 backdrop-blur-sm`}>
+      {/* Overlay bar: status banners lead (a partial-data/RBAC warning must read
+          before the user trusts the graph), host children stack below. Flex
+          column so nothing overlaps. Banners de-absoluted — the bar owns position/z. */}
+      <TopologyOverlayBar>
+        {/* Warning banner for partial topology data */}
+        {topology?.warnings && topology.warnings.length > 0 && (() => {
+          const rbacWarnings = topology.warnings.filter(w => w.includes('RBAC not granted'))
+          const viewWarnings = topology.warnings.filter(w => w.startsWith('Topology view:'))
+          const otherWarnings = topology.warnings.filter(w => !w.includes('RBAC not granted') && !w.startsWith('Topology view:'))
+          const isAllRbac = otherWarnings.length === 0 && viewWarnings.length === 0
+          const isViewLimited = otherWarnings.length === 0 && rbacWarnings.length === 0 && viewWarnings.length > 0
+          return (
+            <div className={`pointer-events-auto ${isViewLimited ? 'max-w-xl' : 'w-full'} ${isAllRbac ? 'bg-amber-500/10 border-amber-500/20' : 'bg-amber-500/10 border-amber-500/30'} border rounded-lg p-2 backdrop-blur-sm`}>
+              <div className="flex items-start gap-2">
+                {isAllRbac ? (
+                  <Shield className="w-4 h-4 text-amber-400 shrink-0 mt-0.5" />
+                ) : (
+                  <AlertTriangle className="w-4 h-4 text-amber-500 shrink-0 mt-0.5" />
+                )}
+                <div className="text-sm">
+                  <span className="font-medium text-amber-400">
+                    {isAllRbac ? 'Limited Access:' : isViewLimited ? 'View limited:' : 'Warning:'}
+                  </span>
+                  <span className="text-theme-text-secondary ml-1">
+                    {isAllRbac
+                      ? `${pluralize(rbacWarnings.length, 'resource type')} not accessible due to RBAC restrictions.`
+                      : isViewLimited
+                        ? 'Large retained run history is summarized to keep the graph readable.'
+                        : 'Some resources failed to load. Data may be incomplete.'}
+                  </span>
+                  <details className="mt-1">
+                    <summary className="text-xs text-amber-400/80 hover:text-amber-400">
+                      Show details ({topology.warnings.length})
+                    </summary>
+                    <ul className="mt-1 text-xs text-theme-text-tertiary space-y-0.5">
+                      {rbacWarnings.length > 0 && otherWarnings.length > 0 && (
+                        <li className="text-amber-400/60 font-medium mt-1">RBAC restrictions:</li>
+                      )}
+                      {rbacWarnings.map((w, i) => (
+                        <li key={`rbac-${i}`} className="font-mono">{w}</li>
+                      ))}
+                      {viewWarnings.length > 0 && (rbacWarnings.length > 0 || otherWarnings.length > 0) && (
+                        <li className="text-amber-400/60 font-medium mt-1">View limits:</li>
+                      )}
+                      {viewWarnings.map((w, i) => (
+                        <li key={`view-${i}`} className="font-mono">{w}</li>
+                      ))}
+                      {otherWarnings.length > 0 && (rbacWarnings.length > 0 || viewWarnings.length > 0) && (
+                        <li className="text-amber-400/60 font-medium mt-1">Other warnings:</li>
+                      )}
+                      {otherWarnings.map((w, i) => (
+                        <li key={`other-${i}`} className="font-mono">{w}</li>
+                      ))}
+                    </ul>
+                  </details>
+                </div>
+              </div>
+            </div>
+          )
+        })()}
+        {/* Layout error banner - shown even when stale nodes exist */}
+        {layoutError && nodes.length > 0 && (
+          <div className="w-full pointer-events-auto bg-red-500/10 border border-red-500/30 rounded-lg p-2 backdrop-blur-sm">
             <div className="flex items-start gap-2">
-              {isAllRbac ? (
-                <Shield className="w-4 h-4 text-amber-400 shrink-0 mt-0.5" />
-              ) : (
-                <AlertTriangle className="w-4 h-4 text-amber-500 shrink-0 mt-0.5" />
-              )}
+              <AlertTriangle className="w-4 h-4 text-red-500 shrink-0 mt-0.5" />
               <div className="text-sm">
-                <span className="font-medium text-amber-400">
-                  {isAllRbac ? 'Limited Access:' : 'Warning:'}
-                </span>
+                <span className="font-medium text-red-400">Layout Error:</span>
                 <span className="text-theme-text-secondary ml-1">
-                  {isAllRbac
-                    ? `${pluralize(rbacWarnings.length, 'resource type')} not accessible due to RBAC restrictions.`
-                    : 'Some resources failed to load. Data may be incomplete.'}
+                  Failed to update layout. Showing previous view.
                 </span>
-                <details className="mt-1">
-                  <summary className="text-xs text-amber-400/80 hover:text-amber-400">
-                    Show details ({topology.warnings.length})
-                  </summary>
-                  <ul className="mt-1 text-xs text-theme-text-tertiary space-y-0.5">
-                    {rbacWarnings.length > 0 && otherWarnings.length > 0 && (
-                      <li className="text-amber-400/60 font-medium mt-1">RBAC restrictions:</li>
-                    )}
-                    {rbacWarnings.map((w, i) => (
-                      <li key={`rbac-${i}`} className="font-mono">{w}</li>
-                    ))}
-                    {otherWarnings.length > 0 && rbacWarnings.length > 0 && (
-                      <li className="text-amber-400/60 font-medium mt-1">Other warnings:</li>
-                    )}
-                    {otherWarnings.map((w, i) => (
-                      <li key={`other-${i}`} className="font-mono">{w}</li>
-                    ))}
-                  </ul>
-                </details>
+                <p className="mt-1 text-xs text-theme-text-tertiary font-mono">{layoutError}</p>
               </div>
             </div>
           </div>
-        )
-      })()}
-      {/* Layout error banner - shown even when stale nodes exist */}
-      {layoutError && nodes.length > 0 && (
-        <div className="absolute top-2 left-2 right-2 z-10 bg-red-500/10 border border-red-500/30 rounded-lg p-2 backdrop-blur-sm">
-          <div className="flex items-start gap-2">
-            <AlertTriangle className="w-4 h-4 text-red-500 shrink-0 mt-0.5" />
-            <div className="text-sm">
-              <span className="font-medium text-red-400">Layout Error:</span>
-              <span className="text-theme-text-secondary ml-1">
-                Failed to update layout. Showing previous view.
-              </span>
-              <p className="mt-1 text-xs text-theme-text-tertiary font-mono">{layoutError}</p>
-            </div>
-          </div>
-        </div>
-      )}
+        )}
+        {children}
+      </TopologyOverlayBar>
       {/* Summary-mode pill — pod tier collapsed to per-workload/service counts */}
       {topology?.summaryMode && (
         <div className="absolute bottom-3 left-1/2 -translate-x-1/2 z-10 flex items-center gap-1.5 bg-blue-500/10 border border-blue-500/30 rounded-full px-3 py-1 backdrop-blur-sm">
@@ -974,7 +1028,7 @@ export function TopologyGraph({
         onNodeMouseLeave={handleNodeMouseLeave}
         nodeTypes={nodeTypes}
         fitView
-        fitViewOptions={{ padding: 0.2 }}
+        fitViewOptions={{ padding: fitViewPadding }}
         minZoom={0.1}
         maxZoom={2}
         proOptions={{ hideAttribution: true }}
@@ -1021,6 +1075,7 @@ export function TopologyGraph({
               paused={paused}
               onTogglePause={onTogglePause}
               onExportingChange={setIsExporting}
+              fitViewPadding={fitViewPadding}
             />
           </div>
           {!isTrafficView && (
@@ -1057,6 +1112,7 @@ export function TopologyGraph({
           focusNodeId={focusNodeId}
           focusNonce={focusNonce}
           onRequestExpandForNode={expandGroupForNode}
+          fitViewPadding={fitViewPadding}
         />
       </ReactFlow>
     </ReactFlowProvider>
@@ -1240,9 +1296,8 @@ function ExportImageButton({ onExportingChange }: { onExportingChange: (v: boole
         >
           <div className="text-sm font-medium text-theme-text-primary mb-3">Export topology</div>
           <label className="block text-xs text-theme-text-secondary mb-1">Filename</label>
-          <input
+          <Input
             ref={inputRef}
-            type="text"
             value={filename}
             onChange={(e) => setFilename(e.target.value)}
             className="w-full px-2 py-1.5 text-sm bg-theme-base border border-theme-border rounded text-theme-text-primary outline-none focus:border-blue-500 mb-3"
@@ -1340,11 +1395,13 @@ function CustomControlButtons({
   paused,
   onTogglePause,
   onExportingChange,
+  fitViewPadding,
 }: {
   showExportButton: boolean
   paused: boolean
   onTogglePause?: () => void
   onExportingChange: (v: boolean) => void
+  fitViewPadding: FitViewOptions['padding']
 }) {
   const { zoomIn, zoomOut, fitView } = useReactFlow()
   const TIP = 100
@@ -1361,7 +1418,7 @@ function CustomControlButtons({
         </button>
       </Tooltip>
       <Tooltip content="Fit view" delay={TIP} position="right">
-        <button className="react-flow__controls-button" onClick={() => fitView({ padding: 0.15, duration: 400 })}>
+        <button className="react-flow__controls-button" onClick={() => fitView({ padding: fitViewPadding, duration: 400 })}>
           <Maximize className="w-3 h-3" />
         </button>
       </Tooltip>
@@ -1394,6 +1451,7 @@ function ViewportController({
   focusNodeId,
   focusNonce = 0,
   onRequestExpandForNode,
+  fitViewPadding,
 }: {
   viewMode: string
   layoutRetryCount: number
@@ -1403,6 +1461,7 @@ function ViewportController({
   focusNodeId?: string
   focusNonce?: number
   onRequestExpandForNode?: (nodeId: string) => void
+  fitViewPadding: FitViewOptions['padding']
 }) {
   const { fitView, zoomIn, zoomOut, setViewport, getViewport, getInternalNode, setCenter } = useReactFlow()
   const nodes = useNodes() // Reactive hook to watch node changes
@@ -1431,7 +1490,7 @@ function ViewportController({
       description: 'Fit graph to screen',
       category: 'Topology',
       scope: 'topology',
-      handler: () => fitView({ padding: 0.15, duration: VIEWPORT_ANIMATION_DURATION }),
+      handler: () => fitView({ padding: fitViewPadding, duration: VIEWPORT_ANIMATION_DURATION }),
     },
     {
       id: 'topology-zoom-in',
@@ -1508,14 +1567,14 @@ function ViewportController({
     if (nodesJustPopulated || viewModeChanged || retryRequested || fitViewRequested) {
       const timeoutId = setTimeout(() => {
         fitView({
-          padding: 0.15,
+          padding: fitViewPadding,
           duration: nodesJustPopulated ? 0 : VIEWPORT_ANIMATION_DURATION,
         })
       }, 10)
 
       return () => clearTimeout(timeoutId)
     }
-  }, [viewMode, layoutRetryCount, fitViewCounter, nodes.length, fitView])
+  }, [viewMode, layoutRetryCount, fitViewCounter, nodes.length, fitView, fitViewPadding])
 
   // 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.
@@ -1563,10 +1622,10 @@ function ViewportController({
     if (!fitAllAfterLayoutRef?.current) return
     const id = setTimeout(() => {
       fitAllAfterLayoutRef.current = false
-      fitView({ padding: 0.15, duration: VIEWPORT_ANIMATION_DURATION })
+      fitView({ padding: fitViewPadding, duration: VIEWPORT_ANIMATION_DURATION })
     }, 250)
     return () => clearTimeout(id)
-  }, [nodes, fitView, fitAllAfterLayoutRef])
+  }, [nodes, fitView, fitAllAfterLayoutRef, fitViewPadding])
 
   return null
 }

package/src/components/topology/TopologyOverlayBar.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react'
+import { clsx } from 'clsx'
+
+interface TopologyOverlayBarProps {
+  children: ReactNode
+  /** Extra classes merged onto the bar container. */
+  className?: string
+}
+
+/**
+ * Top-anchored overlay bar for the topology canvas. Stacks children top-to-
+ * bottom (flex column, source order); wrap items in your own `flex` div to put
+ * them on one line. Everything stacks, so overlays never collide.
+ *
+ * `pointer-events-none` so the canvas stays pannable in the gaps — interactive
+ * children opt back in with `pointer-events-auto`. Children are `items-start`
+ * (content width); use `w-full` for a full-width row.
+ */
+export function TopologyOverlayBar({ children, className }: TopologyOverlayBarProps) {
+  return (
+    <div
+      className={clsx(
+        'pointer-events-none absolute inset-x-2 top-2 z-10 flex flex-col items-start gap-2',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/topology/TopologySearch.tsx

@@ -1,5 +1,7 @@
 import { useState, useCallback, useEffect, useRef, useMemo } from 'react'
+import { createPortal } from 'react-dom'
 import { Search, X, ChevronRight } from 'lucide-react'
+import { Input } from '../ui/Input'
 import { getTopologyIcon } from '../../utils/resource-icons'
 import { clsx } from 'clsx'
 import type { TopologyNode } from '../../types'
@@ -23,12 +25,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
+  /** Element the search overlay portals into — typically the topology pane. Set
+   *  it when the trigger lives inside a `pointer-events-none` overlay bar: the
+   *  overlay then renders OUTSIDE that bar (so its backdrop is clickable) and is
+   *  `absolute inset-0` scoped to this container (dims only the pane). Omit to
+   *  fall back to a viewport-level `fixed` overlay on document.body. */
+  overlayContainer?: HTMLElement | null
 }
 
 // Icon mapping for different resource kinds
@@ -70,7 +72,7 @@ function getKindColor(kind: string): string {
   }
 }
 
-export function TopologySearch({ nodes, onNodeSelect, onZoomToNode, allNodes, viewModeLabel, triggerClassName }: TopologySearchProps) {
+export function TopologySearch({ nodes, onNodeSelect, onZoomToNode, allNodes, viewModeLabel, overlayContainer }: TopologySearchProps) {
   const [isOpen, setIsOpen] = useState(false)
   const [query, setQuery] = useState('')
   const [selectedIndex, setSelectedIndex] = useState(0)
@@ -194,15 +196,20 @@ export function TopologySearch({ nodes, onNodeSelect, onZoomToNode, allNodes, vi
     setTimeout(() => inputRef.current?.focus(), 0)
   }, [])
 
+  // Portal the overlay OUT of the (pointer-events-none) overlay bar the trigger
+  // sits in. With a container → `absolute inset-0` scoped to it (the pane);
+  // without → a viewport `fixed` overlay on document.body.
+  const portalTarget = overlayContainer ?? (typeof document !== 'undefined' ? document.body : null)
+  const overlayPositionClass = overlayContainer ? 'absolute' : 'fixed'
+
   return (
     <>
       {/* Search trigger button */}
       <button
         onClick={handleOpen}
-        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'
-        )}
+        // Layout-neutral (positioned by the host's overlay bar); pointer-events-
+        // auto inside the pointer-events-none bar.
+        className="pointer-events-auto 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"
       >
         <Search className="w-4 h-4" />
         <span className="text-sm">Search</span>
@@ -211,9 +218,10 @@ export function TopologySearch({ nodes, onNodeSelect, onZoomToNode, allNodes, vi
         </kbd>
       </button>
 
-      {/* Search modal */}
-      {isOpen && (
-        <div className="absolute inset-0 z-50 flex items-start justify-center pt-[10vh]">
+      {/* Portaled out of the overlay bar (see portalTarget above) so the
+          backdrop is clickable and the dim covers only the pane, not the app. */}
+      {isOpen && portalTarget && createPortal(
+        <div className={`${overlayPositionClass} inset-0 z-50 flex items-start justify-center pt-[10vh]`}>
           {/* Backdrop */}
           <div
             className="absolute inset-0 bg-theme-base/60 backdrop-blur-sm"
@@ -225,9 +233,8 @@ export function TopologySearch({ nodes, onNodeSelect, onZoomToNode, allNodes, vi
             {/* Search input */}
             <div className="flex items-center gap-3 px-4 py-3 border-b border-theme-border">
               <Search className="w-5 h-5 text-theme-text-secondary" />
-              <input
+              <Input
                 ref={inputRef}
-                type="text"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 onKeyDown={handleInputKeyDown}
@@ -339,7 +346,8 @@ export function TopologySearch({ nodes, onNodeSelect, onZoomToNode, allNodes, vi
               </div>
             )}
           </div>
-        </div>
+        </div>,
+        portalTarget,
       )}
     </>
   )

package/src/components/topology/index.ts

@@ -4,4 +4,6 @@ export { GroupNode } from './GroupNode'
 export { TopologySearch } from './TopologySearch'
 export { TopologyFilterSidebar } from './TopologyFilterSidebar'
 export { TopologyControls } from './TopologyControls'
+export { TopologyOverlayBar } from './TopologyOverlayBar'
+export { TopologyBreadcrumb } from './TopologyBreadcrumb'
 export { buildHierarchicalElkGraph, applyHierarchicalLayout, getGroupKey, setLayoutEngine } from './layout'

package/src/components/topology/layout.ts

@@ -827,8 +827,16 @@ function computeWorkloadCards(
       subtitle = (d.type as string) || 'ClusterIP'
     } else if (primary.kind === 'CronJob') {
       subtitle = (d.schedule as string) || ''
+    } else if (primary.kind === 'CronWorkflow') {
+      subtitle = (d.schedule as string) || ''
     } else if (primary.kind === 'Job') {
       subtitle = (d.phase as string) || ''
+    } else if (primary.kind === 'Workflow') {
+      subtitle = (d.progress as string) || (d.phase as string) || ''
+    } else if (primary.kind === 'WorkflowTemplate' || primary.kind === 'ClusterWorkflowTemplate') {
+      const entrypoint = d.entrypoint as string
+      const templateCount = d.templateCount as number
+      subtitle = entrypoint || (templateCount ? `${templateCount} templates` : '')
     } else if (primary.kind === 'Application') {
       const sync = d.syncStatus as string
       const health = d.healthStatus as string
@@ -855,10 +863,10 @@ function computeWorkloadCards(
 // Shared kind priority map — used by both pickGroupName and computeWorkloadCards
 const KIND_PRIORITY: Record<string, number> = {
   'Deployment': 1, 'Rollout': 1, 'StatefulSet': 2, 'DaemonSet': 3,
-  'CronJob': 4, 'Job': 5, 'Service': 6, 'Gateway': 7,
+  'CronJob': 4, 'CronWorkflow': 4, 'Job': 5, 'Workflow': 5, 'Service': 6, 'Gateway': 7,
   'HTTPRoute': 6, 'GRPCRoute': 6, 'TCPRoute': 6, 'TLSRoute': 6, 'Ingress': 7,
   'ReplicaSet': 8, 'Pod': 9, 'PodGroup': 9,
-  'ConfigMap': 10, 'Secret': 10, 'PersistentVolumeClaim': 10, 'HorizontalPodAutoscaler': 10,
+  'ConfigMap': 10, 'Secret': 10, 'ServiceAccount': 10, 'SealedSecret': 10, 'ServiceMonitor': 10, 'PodMonitor': 10, 'WorkflowTemplate': 10, 'ClusterWorkflowTemplate': 10, 'PersistentVolumeClaim': 10, 'HorizontalPodAutoscaler': 10,
   'KnativeService': 1, 'KnativeConfiguration': 3, 'KnativeRevision': 4, 'KnativeRoute': 2,
   'Broker': 2, 'Channel': 2, 'Trigger': 3, 'PingSource': 3, 'ApiServerSource': 3,
   'ContainerSource': 3, 'SinkBinding': 3,