@skyhook-io/k8s-ui 1.6.2 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/resources/ResourcesView.tsx

@@ -23,6 +23,7 @@ import {
   Check,
   Plus,
   GitCompare,
+  Regex,
 } from 'lucide-react'
 import { clsx } from 'clsx'
 import { ResourceBar } from '../ui/ResourceBar'
@@ -1940,6 +1941,7 @@ export function ResourcesView({
     onSelectedKindChange?.(selectedKind)
   }, [selectedKind.name, selectedKind.group]) // eslint-disable-line react-hooks/exhaustive-deps
   const [searchTerm, setSearchTerm] = useState(initialFilters.search)
+  const [regexMode, setRegexMode] = useState(false)
   const [sortColumn, setSortColumn] = useState<string | null>(null)
   const [sortDirection, setSortDirection] = useState<SortDirection>(null)
   const [lastUpdated, setLastUpdated] = useState<Date | null>(null)
@@ -2280,7 +2282,7 @@ export function ResourcesView({
 
   // Reset highlight when kind, search, sort, or namespace changes
   const namespacesKey = namespaces.join(',')
-  useEffect(() => { setHighlightedIndex(-1) }, [selectedKind.name, searchTerm, sortColumn, sortDirection, namespacesKey])
+  useEffect(() => { setHighlightedIndex(-1) }, [selectedKind.name, searchTerm, regexMode, sortColumn, sortDirection, namespacesKey])
 
   // Scroll highlighted row into view
   useEffect(() => {
@@ -3073,6 +3075,18 @@ export function ResourcesView({
   }, [])
 
 
+  // On an invalid pattern, fall back to a null matcher (search un-applied, all
+  // rows shown) rather than zero results, so the table doesn't flash empty
+  // while the user is mid-typing a pattern.
+  const searchRegex = useMemo<{ re: RegExp | null; error: string | null }>(() => {
+    if (!regexMode || !searchTerm) return { re: null, error: null }
+    try {
+      return { re: new RegExp(searchTerm, 'i'), error: null }
+    } catch (e) {
+      return { re: null, error: e instanceof Error ? e.message : 'Invalid regex' }
+    }
+  }, [regexMode, searchTerm])
+
   // Filter resources by search term, status, problems, and sort
   const filteredResources = useMemo(() => {
     if (!resources) return []
@@ -3081,11 +3095,21 @@ export function ResourcesView({
 
     // Apply search filter
     if (searchTerm) {
-      const term = searchTerm.toLowerCase()
-      result = result.filter((r: any) =>
-        r.metadata?.name?.toLowerCase().includes(term) ||
-        r.metadata?.namespace?.toLowerCase().includes(term)
-      )
+      if (regexMode) {
+        const re = searchRegex.re
+        if (re) {
+          result = result.filter((r: any) =>
+            re.test(r.metadata?.name ?? '') ||
+            re.test(r.metadata?.namespace ?? '')
+          )
+        }
+      } else {
+        const term = searchTerm.toLowerCase()
+        result = result.filter((r: any) =>
+          r.metadata?.name?.toLowerCase().includes(term) ||
+          r.metadata?.namespace?.toLowerCase().includes(term)
+        )
+      }
     }
 
     // Apply column filters (generic, multi-select per column — OR within column, AND across columns)
@@ -3241,7 +3265,7 @@ export function ResourcesView({
     }
 
     return result
-  }, [resources, searchTerm, columnFilters, problemFilters, showInactiveReplicaSets, labelSelector, ownerKind, ownerName, selectedKind.name, sortColumn, sortDirection, getSortValue, podMatchesProblemFilter])
+  }, [resources, searchTerm, regexMode, searchRegex, columnFilters, problemFilters, showInactiveReplicaSets, labelSelector, ownerKind, ownerName, selectedKind.name, sortColumn, sortDirection, getSortValue, podMatchesProblemFilter])
 
   // For nodes table: compute the majority minor version so outliers can be highlighted
   const majorityNodeMinorVersion = useMemo(() => {
@@ -3557,38 +3581,68 @@ export function ResourcesView({
       <div className="flex-1 flex flex-col overflow-hidden min-w-0 bg-theme-surface">
         {/* Toolbar */}
         <div className="flex items-center gap-3 px-4 py-3 border-b border-theme-border bg-theme-base shrink-0">
-          <div className="flex-1 relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-theme-text-tertiary" />
-            <input
-              ref={searchInputRef}
-              type="text"
-              placeholder="Search... (press /)"
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'ArrowDown') {
-                  // Hand off to the table's keyboard navigation — blur the input
-                  // so the registered ArrowDown/j/k shortcuts take over, and
-                  // highlight the first row.
-                  e.preventDefault()
-                  searchInputRef.current?.blur()
-                  setHighlightedIndex(0)
-                } else if (e.key === 'Enter' && filteredResourceCountRef.current > 0) {
-                  // Select the first (or currently highlighted) resource
-                  e.preventDefault()
-                  searchInputRef.current?.blur()
-                  if (highlightedIndex < 0) setHighlightedIndex(0)
-                  // Defer to next frame so the highlight renders before we open
-                  requestAnimationFrame(() => {
-                    const res = highlightedResourceRef.current ?? filteredResources[0]
-                    selectResource(res)
-                  })
-                } else if (e.key === 'Escape') {
-                  searchInputRef.current?.blur()
-                }
-              }}
-              className="w-full max-w-md pl-10 pr-4 py-2 bg-theme-elevated border border-theme-border-light rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-skyhook-500"
-            />
+          <div className="flex-1 min-w-0">
+            <div className="relative max-w-md">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-theme-text-tertiary" />
+              <input
+                ref={searchInputRef}
+                type="text"
+                placeholder={regexMode ? 'Search by regex... (press /)' : 'Search... (press /)'}
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'ArrowDown') {
+                    // Hand off to the table's keyboard navigation — blur the input
+                    // so the registered ArrowDown/j/k shortcuts take over, and
+                    // highlight the first row.
+                    e.preventDefault()
+                    searchInputRef.current?.blur()
+                    setHighlightedIndex(0)
+                  } else if (e.key === 'Enter' && filteredResourceCountRef.current > 0) {
+                    // Select the first (or currently highlighted) resource
+                    e.preventDefault()
+                    searchInputRef.current?.blur()
+                    if (highlightedIndex < 0) setHighlightedIndex(0)
+                    // Defer to next frame so the highlight renders before we open
+                    requestAnimationFrame(() => {
+                      const res = highlightedResourceRef.current ?? filteredResources[0]
+                      selectResource(res)
+                    })
+                  } else if (e.key === 'Escape') {
+                    searchInputRef.current?.blur()
+                  }
+                }}
+                className={clsx(
+                  'w-full pl-10 pr-10 py-2 bg-theme-elevated border rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2',
+                  searchRegex.error
+                    ? 'border-red-500/60 focus:ring-red-500'
+                    : 'border-theme-border-light focus:ring-skyhook-500'
+                )}
+              />
+              <button
+                type="button"
+                onClick={() => setRegexMode((v) => !v)}
+                aria-pressed={regexMode}
+                aria-label={regexMode ? 'Disable regex search' : 'Enable regex search'}
+                title={regexMode ? 'Regex search enabled — click to disable' : 'Enable regex search'}
+                className={clsx(
+                  'absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center w-6 h-6 rounded transition-colors',
+                  regexMode
+                    ? 'bg-skyhook-500/20 text-skyhook-400'
+                    : 'text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-hover'
+                )}
+              >
+                <Regex className="w-3.5 h-3.5" />
+              </button>
+              {searchRegex.error && (
+                <div
+                  title={searchRegex.error}
+                  className="absolute left-0 top-full mt-1 z-10 px-2 py-1 rounded bg-theme-elevated border border-red-500/40 text-[11px] text-red-400 shadow-theme-sm"
+                >
+                  Invalid regex pattern
+                </div>
+              )}
+            </div>
           </div>
 
           {/* Problems dropdown (pods only) */}

package/src/components/topology/K8sResourceNode.tsx

@@ -5,7 +5,7 @@ import {
   ChevronUp,
 } from 'lucide-react'
 import { clsx } from 'clsx'
-import type { NodeKind, HealthStatus } from '../../types'
+import type { NodeKind, HealthStatus, PodSummary } from '../../types'
 import { displayKind } from '../../types'
 import { healthToSeverity, SEVERITY_DOT } from '../../utils/badge-colors'
 import { Tooltip } from '../ui/Tooltip'
@@ -171,8 +171,27 @@ function getStatusStyle(status: HealthStatus): React.CSSProperties {
 }
 
 
-// Format subtitle based on node kind
+// Format subtitle based on node kind. In summary mode the pod tier is
+// collapsed, so workload/service nodes carry a podSummary — append it so the
+// count of pods (and any unhealthy/pending) is still visible without children.
 function getSubtitle(kind: NodeKind, nodeData: Record<string, unknown>): string {
+  const base = baseSubtitle(kind, nodeData)
+  const ps = nodeData.podSummary as PodSummary | undefined
+  if (ps && SUMMARY_POD_KINDS.has(kind)) {
+    let suffix = `${ps.total} pods`
+    if (ps.unhealthy > 0) suffix += ` (${ps.unhealthy} unhealthy)`
+    else if (ps.degraded > 0) suffix += ` (${ps.degraded} pending)`
+    return base ? `${base} • ${suffix}` : suffix
+  }
+  return base
+}
+
+// Kinds that own pods and therefore carry a podSummary in summary mode.
+const SUMMARY_POD_KINDS = new Set<NodeKind>([
+  'Deployment', 'StatefulSet', 'DaemonSet', 'Rollout', 'Job', 'Service',
+])
+
+function baseSubtitle(kind: NodeKind, nodeData: Record<string, unknown>): string {
   switch (kind) {
     case 'Deployment':
     case 'Rollout':

package/src/components/topology/TopologyGraph.tsx

@@ -20,7 +20,7 @@ import {
 import '@xyflow/react/dist/style.css'
 import { toCanvas } from 'html-to-image'
 
-import { AlertTriangle, Download, LayoutGrid, Loader2, Maximize, Minus, Pause, Play, Plus, RotateCw, Shield, Workflow } from 'lucide-react'
+import { AlertTriangle, Download, Layers, LayoutGrid, Loader2, Maximize, Minus, Pause, Play, Plus, RotateCw, Shield, Workflow } from 'lucide-react'
 import { PaneLoader } from '../ui/PaneLoader'
 import { Tooltip } from '../ui/Tooltip'
 import { useToast } from '../ui/Toast'
@@ -31,6 +31,8 @@ import { GroupNode } from './GroupNode'
 import { buildHierarchicalElkGraph, applyHierarchicalLayout, getGroupKey, type GroupDisplayLevel } from './layout'
 import type { Topology, TopologyNode, TopologyEdge, ViewMode, GroupingMode } from '../../types'
 import { pluralize } from '../../utils/pluralize'
+import { foldHash } from '../../utils/structure-hash'
+import { recordLayoutDuration, recordLayoutSkipped, recordStructureKeyDuration } from '../../perf'
 
 // Edge colors by type
 const EDGE_COLORS = {
@@ -442,13 +444,29 @@ export function TopologyGraph({
     if (topoNode) onNodeClick(topoNode)
   }, [topology, workingNodes, onNodeClick])
 
-  // Structure key for change detection — includes groupLevels so chip↔cardGrid triggers relayout
+  // 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
+  // sort+join. At thousands of nodes the join allocated tens of KB of string
+  // every render (and the sort dominated for short ID arrays); the fold is
+  // O(n) with constant memory and detects the same structural changes
+  // (add/remove/rename) — combined with the element count in the key. Pure
+  // reorders no longer trigger a layout, which is correct: ELK relayouts on
+  // reorder were wasted work.
   const structureKey = useMemo(() => {
-    const nodeIds = workingNodes.map(n => n.id).sort().join(',')
-    const edgeIds = workingEdges.map(e => `${e.source}->${e.target}:${e.type}`).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}|${edgeIds}|${levels}|${expanded}|${groupingMode}|${layoutRetryCount}`
+    const t0 = performance.now()
+    const nodeHash = foldHash(workingNodes, n => n.id)
+    const edgeHash = foldHash(workingEdges, e => `${e.source}->${e.target}:${e.type}`)
+    const levelsHash = foldHash(Array.from(groupLevels.entries()), ([k, v]) => `${k}:${v}`)
+    const expandedHash = foldHash(Array.from(expandedPodGroups), s => s)
+    const key =
+      `${viewMode}|${groupingMode}|${layoutRetryCount}` +
+      `|n${workingNodes.length}:${nodeHash}` +
+      `|e${workingEdges.length}:${edgeHash}` +
+      `|l${groupLevels.size}:${levelsHash}` +
+      `|x${expandedPodGroups.size}:${expandedHash}`
+    recordStructureKeyDuration((performance.now() - t0) * 1000)
+    return key
   }, [viewMode, workingNodes, workingEdges, groupLevels, expandedPodGroups, groupingMode, layoutRetryCount])
 
   // Layout when structure changes - use hierarchical ELK layout
@@ -465,6 +483,7 @@ export function TopologyGraph({
     const structureChanged = structureKey !== prevStructureRef.current
 
     if (!structureChanged) {
+      recordLayoutSkipped()
       return
     }
 
@@ -517,6 +536,7 @@ export function TopologyGraph({
     groupMapRef.current = groupMap
 
     // Apply layout and get positioned nodes
+    const layoutStartMs = performance.now()
     applyHierarchicalLayout(
       elkGraph,
       workingNodes,
@@ -540,6 +560,7 @@ export function TopologyGraph({
         return
       }
       setLayoutError(null)
+      recordLayoutDuration(performance.now() - layoutStartMs, workingNodes.length, workingEdges.length)
 
       // 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.
@@ -562,19 +583,25 @@ export function TopologyGraph({
         savedPositionsRef.current.set(node.id, node.position)
       }
 
-      // Add expand/collapse handlers to pod-related nodes
+      // Add expand/collapse handlers to pod-related nodes. Only PodGroups that
+      // actually carry a per-pod array are expandable — summary-only orphan
+      // nodes (summary mode) hold counts only, so they get no expand affordance.
       const nodesWithHandlers = positionedNodes.map(node => {
         const isPodGroup = node.data?.kind === 'PodGroup'
         const nodeData = node.data?.nodeData as Record<string, unknown> | undefined
+        // The per-pod array lives on the backend node data (nodeData.pods).
+        // Summary-only orphan nodes omit it, so they get no expand affordance.
+        const podsArray = nodeData?.pods
+        const isExpandablePodGroup = isPodGroup && Array.isArray(podsArray) && podsArray.length > 0
         const expandedFromGroup = nodeData?.expandedFromGroup as string | undefined
 
         return {
           ...node,
           data: {
             ...node.data,
-            onExpand: isPodGroup ? handleExpandPodGroup : undefined,
+            onExpand: isExpandablePodGroup ? handleExpandPodGroup : undefined,
             onCollapse: expandedFromGroup ? handleCollapsePodGroup : undefined,
-            isExpanded: isPodGroup ? expandedPodGroups.has(node.id) : undefined,
+            isExpanded: isExpandablePodGroup ? expandedPodGroups.has(node.id) : undefined,
           },
         }
       })
@@ -780,6 +807,15 @@ export function TopologyGraph({
           </div>
         </div>
       )}
+      {/* 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">
+          <Layers className="w-3.5 h-3.5 text-blue-400 shrink-0" />
+          <span className="text-xs text-theme-text-secondary">
+            Summary view — pods collapsed to counts. Filter to a smaller namespace to see individual pods.
+          </span>
+        </div>
+      )}
       <ReactFlow
         nodes={nodes}
         edges={edges}

package/src/components/topology/layout.ts

@@ -164,7 +164,24 @@ async function runLayoutOnMainThread(
 
   const groupLayouts: LayoutResult['groupLayouts'] = []
   const ungroupedNodes: LayoutResult['ungroupedNodes'] = []
-  const groupNodeIds = new Map<string, Set<string>>()
+  // Map each node to its group once. Serves both the intra-group edge bucketing
+  // here (filtering all edges per group would be O(groups × edges)) and the
+  // node→group lookup for Phase 2's inter-group edges below.
+  const nodeToGroup = new Map<string, string>()
+  for (const child of elkGraph.children) {
+    if (child.id.startsWith('group-') && child.children) {
+      for (const c of child.children) nodeToGroup.set(c.id, child.id)
+    }
+  }
+  const intraEdgesByGroup = new Map<string, ElkEdge[]>()
+  for (const e of elkGraph.edges) {
+    const sg = nodeToGroup.get(e.sources[0])
+    if (sg && sg === nodeToGroup.get(e.targets[0])) {
+      const arr = intraEdgesByGroup.get(sg)
+      if (arr) arr.push(e)
+      else intraEdgesByGroup.set(sg, [e])
+    }
+  }
 
   // Phase 1: Layout each group independently
   for (const child of elkGraph.children) {
@@ -173,12 +190,8 @@ async function runLayoutOnMainThread(
     if (isGroup && child.children && child.children.length > 0) {
       const groupKey = child.id.replace(`group-${groupingMode}-`, '')
       const minWidth = hideGroupHeader ? 300 : Math.max(500, groupKey.length * 16 + 200)
-      const nodeIds = new Set(child.children.map(c => c.id))
-      groupNodeIds.set(child.id, nodeIds)
 
-      const intraGroupEdges = elkGraph.edges.filter(e =>
-        nodeIds.has(e.sources[0]) && nodeIds.has(e.targets[0])
-      )
+      const intraGroupEdges = intraEdgesByGroup.get(child.id) ?? []
 
       const layoutResult = await elk.layout({
         id: child.id,
@@ -217,11 +230,7 @@ async function runLayoutOnMainThread(
   }
 
   // Phase 2: Build meta-graph and position groups based on inter-group edges
-  const nodeToGroup = new Map<string, string>()
-  for (const [groupId, nodeIds] of groupNodeIds) {
-    for (const nodeId of nodeIds) nodeToGroup.set(nodeId, groupId)
-  }
-
+  // (nodeToGroup was built once above).
   const interGroupEdges: ElkEdge[] = []
   const seen = new Set<string>()
   for (const edge of elkGraph.edges) {

package/src/components/topology/layout.worker.ts

@@ -116,8 +116,25 @@ self.onmessage = async (e: MessageEvent<LayoutRequest>) => {
     const groupLayouts: GroupLayoutResult[] = []
     const ungroupedNodes: UngroupedNodeResult[] = []
 
-    // Build a set of node IDs in each group for edge filtering
-    const groupNodeIds = new Map<string, Set<string>>()
+    // Map each node to its group once. Serves both the intra-group edge
+    // bucketing here (filtering all edges per group would be O(groups × edges))
+    // and the node→group lookup for Phase 2's inter-group edges. This is the
+    // default (worker) layout path, so the win actually lands here.
+    const nodeToGroup = new Map<string, string>()
+    for (const child of elkGraph.children) {
+      if (child.id.startsWith('group-') && child.children) {
+        for (const c of child.children) nodeToGroup.set(c.id, child.id)
+      }
+    }
+    const intraEdgesByGroup = new Map<string, ElkEdge[]>()
+    for (const e of elkGraph.edges) {
+      const sg = nodeToGroup.get(e.sources[0])
+      if (sg && sg === nodeToGroup.get(e.targets[0])) {
+        const arr = intraEdgesByGroup.get(sg)
+        if (arr) arr.push(e)
+        else intraEdgesByGroup.set(sg, [e])
+      }
+    }
 
     // Phase 1: Layout each group independently
     for (const child of elkGraph.children) {
@@ -127,14 +144,8 @@ self.onmessage = async (e: MessageEvent<LayoutRequest>) => {
         const groupKey = child.id.replace(`group-${groupingMode}-`, '')
         const minWidth = hideGroupHeader ? 300 : Math.max(500, groupKey.length * 16 + 200)
 
-        // Track node IDs in this group
-        const nodeIds = new Set(child.children.map(c => c.id))
-        groupNodeIds.set(child.id, nodeIds)
-
         // Layout this group independently with only intra-group edges
-        const intraGroupEdges = elkGraph.edges.filter(e =>
-          nodeIds.has(e.sources[0]) && nodeIds.has(e.targets[0])
-        )
+        const intraGroupEdges = intraEdgesByGroup.get(child.id) ?? []
 
         const groupGraph: ElkGraph = {
           id: child.id,
@@ -186,14 +197,7 @@ self.onmessage = async (e: MessageEvent<LayoutRequest>) => {
       }
     }
 
-    // Phase 2: Build meta-graph and position groups
-    const nodeToGroup = new Map<string, string>()
-    for (const [groupId, nodeIds] of groupNodeIds) {
-      for (const nodeId of nodeIds) {
-        nodeToGroup.set(nodeId, groupId)
-      }
-    }
-
+    // Phase 2: Build meta-graph and position groups (nodeToGroup built once above).
     // Find inter-group edges
     const interGroupEdges: ElkEdge[] = []
     const seenInterGroupEdges = new Set<string>()

package/src/index.ts

@@ -45,3 +45,6 @@ export * from './components/cluster-switcher'
 
 // Compare (ResourceCompareView, CompareResourcePicker, normalize utilities)
 export * from './components/compare'
+
+// Perf instrumentation (ELK + structureKey timers, surfaced in diagnostics overlay)
+export * from './perf'

package/src/perf/index.ts

@@ -0,0 +1 @@
+export * from './store'

package/src/perf/store.ts

@@ -0,0 +1,110 @@
+// Always-on, in-memory performance instrumentation for k8s-ui internals.
+// Records ELK layout duration and structureKey rebuild duration so users can
+// include them in bug reports via the host app's diagnostics overlay.
+// Cost is one performance.now() pair + a 50-entry ring buffer append per
+// topology layout — negligible.
+
+const RING_SIZE = 50
+
+interface Ring {
+  samples: number[]
+  next: number
+  count: number
+  last: number
+}
+
+function makeRing(): Ring {
+  return { samples: new Array(RING_SIZE), next: 0, count: 0, last: 0 }
+}
+
+function ringAdd(r: Ring, v: number): void {
+  r.samples[r.next] = v
+  r.next = (r.next + 1) % RING_SIZE
+  if (r.count < RING_SIZE) r.count++
+  r.last = v
+}
+
+export interface SampleWindow {
+  count: number
+  last: number
+  min: number
+  p50: number
+  p95: number
+  p99: number
+  max: number
+}
+
+function ringSnapshot(r: Ring): SampleWindow {
+  if (r.count === 0) return { count: 0, last: 0, min: 0, p50: 0, p95: 0, p99: 0, max: 0 }
+  const buf = r.samples.slice(0, r.count).sort((a, b) => a - b)
+  const pick = (p: number) => buf[Math.min(buf.length - 1, Math.floor((buf.length - 1) * p))]
+  return {
+    count: r.count,
+    last: r.last,
+    min: buf[0],
+    p50: pick(0.5),
+    p95: pick(0.95),
+    p99: pick(0.99),
+    max: buf[buf.length - 1],
+  }
+}
+
+const layoutMs = makeRing()
+const structureKeyUs = makeRing()
+const lastLayoutNodeCount = { value: 0 }
+const lastLayoutEdgeCount = { value: 0 }
+let totalLayouts = 0
+let totalLayoutsSkipped = 0
+let totalStructureKeyComputes = 0
+
+export interface K8sUIPerfSnapshot {
+  totalLayouts: number
+  totalLayoutsSkipped: number
+  totalStructureKeyComputes: number
+  lastLayoutNodeCount: number
+  lastLayoutEdgeCount: number
+  layoutMs: SampleWindow
+  structureKeyUs: SampleWindow
+}
+
+export function recordLayoutDuration(ms: number, nodeCount: number, edgeCount: number): void {
+  totalLayouts++
+  ringAdd(layoutMs, ms)
+  lastLayoutNodeCount.value = nodeCount
+  lastLayoutEdgeCount.value = edgeCount
+}
+
+export function recordLayoutSkipped(): void {
+  totalLayoutsSkipped++
+}
+
+export function recordStructureKeyDuration(us: number): void {
+  totalStructureKeyComputes++
+  ringAdd(structureKeyUs, us)
+}
+
+export function getK8sUIPerfSnapshot(): K8sUIPerfSnapshot {
+  return {
+    totalLayouts,
+    totalLayoutsSkipped,
+    totalStructureKeyComputes,
+    lastLayoutNodeCount: lastLayoutNodeCount.value,
+    lastLayoutEdgeCount: lastLayoutEdgeCount.value,
+    layoutMs: ringSnapshot(layoutMs),
+    structureKeyUs: ringSnapshot(structureKeyUs),
+  }
+}
+
+// Test seam — reset all counters and windows. Not safe to call concurrently
+// with the record functions.
+export function resetK8sUIPerf(): void {
+  layoutMs.samples = new Array(RING_SIZE)
+  layoutMs.next = 0; layoutMs.count = 0; layoutMs.last = 0
+  structureKeyUs.samples = new Array(RING_SIZE)
+  structureKeyUs.next = 0; structureKeyUs.count = 0; structureKeyUs.last = 0
+  totalLayouts = 0
+  totalLayoutsSkipped = 0
+  totalStructureKeyComputes = 0
+  lastLayoutNodeCount.value = 0
+  lastLayoutEdgeCount.value = 0
+}

package/src/types/core.ts

@@ -212,9 +212,19 @@ export interface Topology {
   largeCluster?: boolean // True if cluster exceeds large cluster threshold
   hiddenKinds?: string[] // Resource kinds auto-hidden for performance
   requiresNamespaceFilter?: boolean // True if cluster is too large for all-namespace topology
+  estimatedNodes?: number // Pre-build node count estimate
+  summaryMode?: boolean // True when the pod tier was collapsed into per-workload/service counts
   crdDiscoveryStatus?: 'idle' | 'discovering' | 'ready' // CRD discovery status
 }
 
+// PodSummary is stamped onto a workload or service node's data in summary mode.
+export interface PodSummary {
+  total: number
+  healthy: number
+  degraded: number
+  unhealthy: number
+}
+
 // K8s Event (from SSE stream)
 export interface K8sEvent {
   kind: string

package/src/utils/resource-hierarchy.ts

@@ -559,13 +559,23 @@ export function buildResourceHierarchy(options: HierarchyOptions): ResourceLane[
           TraefikService: 2, Middleware: 3, MiddlewareTCP: 3,
           HTTPProxy: 1, // Contour
         }
+        // Precompute each child's latest event time once — otherwise the
+        // comparator below reparses every child's event timestamps on every
+        // comparison (O(children log children × events) Date parses).
+        const latestByChildId = new Map<string, number>()
+        for (const c of lane.children) {
+          let latest = 0
+          for (const e of c.events) {
+            const t = new Date(e.timestamp).getTime()
+            if (t > latest) latest = t
+          }
+          latestByChildId.set(c.id, latest)
+        }
         lane.children.sort((a, b) => {
           const aPriority = kindPriority[a.kind] || 10
           const bPriority = kindPriority[b.kind] || 10
           if (aPriority !== bPriority) return aPriority - bPriority
-          const aLatest = a.events.length > 0 ? Math.max(...a.events.map(e => new Date(e.timestamp).getTime())) : 0
-          const bLatest = b.events.length > 0 ? Math.max(...b.events.map(e => new Date(e.timestamp).getTime())) : 0
-          return bLatest - aLatest
+          return (latestByChildId.get(b.id) ?? 0) - (latestByChildId.get(a.id) ?? 0)
         })
       }
 

package/src/utils/structure-hash.test.ts

@@ -0,0 +1,94 @@
+import { describe, it, expect } from 'vitest'
+import { fnv1a32, foldHash } from './structure-hash'
+
+describe('fnv1a32', () => {
+  it('is deterministic', () => {
+    expect(fnv1a32('hello')).toBe(fnv1a32('hello'))
+  })
+
+  it('distinguishes similar strings', () => {
+    expect(fnv1a32('pod/default/a')).not.toBe(fnv1a32('pod/default/b'))
+    expect(fnv1a32('a')).not.toBe(fnv1a32('A'))
+  })
+
+  it('handles empty string', () => {
+    expect(typeof fnv1a32('')).toBe('number')
+  })
+})
+
+describe('foldHash', () => {
+  const id = (s: string) => s
+
+  it('is order-independent', () => {
+    const a = foldHash(['a', 'b', 'c'], id)
+    const b = foldHash(['c', 'a', 'b'], id)
+    expect(a).toBe(b)
+  })
+
+  it('changes when an element is added', () => {
+    const before = foldHash(['a', 'b'], id)
+    const after = foldHash(['a', 'b', 'c'], id)
+    expect(before).not.toBe(after)
+  })
+
+  it('changes when an element is removed', () => {
+    const before = foldHash(['a', 'b', 'c'], id)
+    const after = foldHash(['a', 'b'], id)
+    expect(before).not.toBe(after)
+  })
+
+  it('changes when an element is renamed', () => {
+    const before = foldHash(['a', 'b', 'c'], id)
+    const after = foldHash(['a', 'b', 'd'], id)
+    expect(before).not.toBe(after)
+  })
+
+  it('returns the zero fingerprint for empty input', () => {
+    expect(foldHash([], id)).toBe('0.0')
+  })
+
+  it('works with object items via keyOf', () => {
+    const items = [{ id: 'x' }, { id: 'y' }]
+    expect(foldHash(items, i => i.id)).toBe(foldHash(['x', 'y'], id))
+  })
+
+  it('emits a "<xor>.<sum>" shape', () => {
+    expect(foldHash(['a', 'b'], id)).toMatch(/^\d+\.\d+$/)
+  })
+
+  // The dual accumulator's whole point: a swap that preserves the XOR fold
+  // (a^b stays constant) must still change the fingerprint via the sum fold.
+  // Single-XOR would have collided here. Construct two sets with equal XOR
+  // but different members.
+  it('distinguishes sets that share an XOR but differ in membership', () => {
+    // {x} vs {y, z} where hash(x) === hash(y) ^ hash(z) would collide under
+    // pure XOR. We can't easily force that, so instead verify the additive
+    // fold breaks a known XOR-preserving transform: doubling an element.
+    // ['a','a'] XOR-folds to 0 (a^a), same as [] — but sum differs.
+    expect(foldHash(['a', 'a'], id)).not.toBe(foldHash([], id))
+    expect(foldHash(['a', 'a'], id)).not.toBe(foldHash(['b', 'b'], id))
+  })
+})
+
+// The production guard against skipped relayouts is the *composed* key
+// (count + foldHash), exactly as TopologyGraph builds it. These tests pin that
+// composition, not just the bare fold — a genuine same-count add/remove/rename
+// must change the composed key so the layout effect doesn't short-circuit.
+describe('composed structure key (count + foldHash)', () => {
+  const id = (s: string) => s
+  // Mirrors TopologyGraph's structureKey shape for the node portion.
+  const composed = (nodeIds: string[]) => `n${nodeIds.length}:${foldHash(nodeIds, id)}`
+
+  it('changes on a same-count rename', () => {
+    expect(composed(['a', 'b', 'c'])).not.toBe(composed(['a', 'b', 'x']))
+  })
+
+  it('changes on add and on remove', () => {
+    expect(composed(['a', 'b'])).not.toBe(composed(['a', 'b', 'c']))
+    expect(composed(['a', 'b', 'c'])).not.toBe(composed(['a', 'b']))
+  })
+
+  it('is stable across reorder (no wasted relayout)', () => {
+    expect(composed(['a', 'b', 'c'])).toBe(composed(['c', 'b', 'a']))
+  })
+})

package/src/utils/structure-hash.ts

@@ -0,0 +1,35 @@
+// FNV-1a 32-bit string hash. Cheap, well-distributed, no allocations.
+export function fnv1a32(s: string): number {
+  let h = 0x811c9dc5
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i)
+    h = Math.imul(h, 0x01000193)
+  }
+  return h >>> 0
+}
+
+// foldHash returns an order-independent fingerprint of the given items as a
+// "<xor>.<sum>" string. Used by TopologyGraph's structureKey change-detection
+// — at thousands of nodes, sort+join over IDs allocated tens of KB of string
+// every render; this is O(n) with two uint32 accumulators.
+//
+// Two independent commutative folds (XOR and 32-bit additive sum) are combined
+// because a single collision in the structure key is a false negative on the
+// exact path that serves big, high-churn graphs: the layout effect bails on an
+// unchanged key, so a real shape change would silently skip setNodes/setEdges.
+// A collision now requires BOTH folds to collide simultaneously across the
+// difference set, which is vanishingly unlikely. Combine with element count
+// (caller composes "count.xor.sum") for full structural identity.
+//
+// Order independence is intentional: pure reorders of the same node/edge set
+// produce an identical graph and shouldn't trigger an ELK relayout.
+export function foldHash<T>(items: ArrayLike<T>, keyOf: (item: T) => string): string {
+  let xor = 0
+  let sum = 0
+  for (let i = 0; i < items.length; i++) {
+    const h = fnv1a32(keyOf(items[i]))
+    xor ^= h
+    sum = (sum + h) >>> 0
+  }
+  return `${xor >>> 0}.${sum}`
+}