@skyhook-io/k8s-ui 1.6.2 → 1.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.6.2",
+  "version": "1.7.1",
   "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/resources/renderers/NamespaceRenderer.tsx

@@ -1,8 +1,10 @@
-import { Shield, Box, Users } from 'lucide-react'
+import { Shield, Box, Users, Gauge } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ResourceLink } from '../../ui/drawer-components'
 import type { RBACNamespaceResponse, RBACBindingWithSubjects, RBACSubject, ResourceRef } from '../../../types'
 import { rbacKindBadgeClass } from '../../../utils/rbac-badges'
+import { SEVERITY_TEXT, SEVERITY_DOT } from '../../../utils/badge-colors'
+import { parseCPUToNanocores, parseMemoryToBytes } from '../../../utils/format'
 
 interface NamespaceRendererProps {
   data: any
@@ -14,10 +16,23 @@ interface NamespaceRendererProps {
   rbacData?: RBACNamespaceResponse | null
   rbacLoading?: boolean
   rbacError?: Error | null
+  /**
+   * ResourceQuota objects for this namespace (from /api/resources/
+   * resourcequotas?namespace=). Undefined when the host hasn't wired the
+   * fetch (quota section omitted). A saturated quota is exactly why a
+   * namespace stops admitting pods, yet it's shown nowhere else.
+   */
+  quotaData?: any[] | null
+  /**
+   * Non-403 quota fetch error. When set, the quota section renders a note
+   * instead of silently disappearing — so a quota-constrained namespace whose
+   * fetch 500/503s isn't mistaken for quota-free. (403 stays hidden upstream.)
+   */
+  quotaError?: Error | null
   onNavigate?: (ref: ResourceRef) => void
 }
 
-export function NamespaceRenderer({ data, rbacData, rbacLoading, rbacError, onNavigate }: NamespaceRendererProps) {
+export function NamespaceRenderer({ data, rbacData, rbacLoading, rbacError, quotaData, quotaError, onNavigate }: NamespaceRendererProps) {
   const metadata = data.metadata || {}
   const status = data.status || {}
   const phase = status.phase
@@ -48,6 +63,11 @@ export function NamespaceRenderer({ data, rbacData, rbacLoading, rbacError, onNa
         </PropertyList>
       </Section>
 
+      {/* ResourceQuota usage — only when host wired the fetch. */}
+      {(quotaError || (quotaData != null && quotaData.length > 0)) && (
+        <NamespaceQuotaSection quotas={quotaData ?? []} error={quotaError ?? null} />
+      )}
+
       {/* RBAC summary — only when host wired the fetch. */}
       {rbacData !== undefined && (
         <NamespaceRBACSection
@@ -61,6 +81,89 @@ export function NamespaceRenderer({ data, rbacData, rbacLoading, rbacError, onNa
   )
 }
 
+// ============================================================================
+// NAMESPACE QUOTA SECTION
+// ============================================================================
+// Shows ResourceQuota saturation — the signal that answers "why did this
+// namespace stop admitting pods?" A quota at its hard limit blocks every new
+// pod the namespace tries to create, with no failing Pod to inspect (the
+// controller's FailedCreate event is the only trace). Surfacing usage here
+// turns that invisible failure into a glanceable bar.
+
+// quotaUsageRatio parses a used/hard pair for a quota resource, picking the
+// right unit parser by resource name (cpu → millicores, memory/storage →
+// bytes, everything else → plain count). Returns null when hard is unset or
+// unparseable so the row falls back to showing the raw strings.
+function quotaUsageRatio(resourceName: string, used: string, hard: string): number | null {
+  if (!hard) return null
+  const isCPU = /(^|\.)cpu$/i.test(resourceName)
+  const isBytes = /(memory|storage)$/i.test(resourceName)
+  const parse = isCPU ? parseCPUToNanocores : isBytes ? parseMemoryToBytes : (v: string) => parseFloat(v) || 0
+  const h = parse(hard)
+  if (!h) return null
+  return parse(used || '0') / h
+}
+
+function NamespaceQuotaSection({ quotas, error }: { quotas: any[]; error?: Error | null }) {
+  return (
+    <Section title="Resource Quotas" icon={Gauge} defaultExpanded>
+      {error && (
+        <div className="text-xs text-theme-text-secondary">
+          Couldn’t load resource quotas — retry shortly. A quota at its limit blocks new pods in this namespace.
+        </div>
+      )}
+      <div className="space-y-3">
+        {quotas.map((q: any, qi: number) => {
+          const name = q?.metadata?.name ?? `quota-${qi}`
+          const hard: Record<string, string> = q?.status?.hard ?? q?.spec?.hard ?? {}
+          const used: Record<string, string> = q?.status?.used ?? {}
+          const resourceNames = Object.keys(hard).sort()
+          return (
+            <div key={name} className="card-inner">
+              <div className="text-xs font-medium text-theme-text-primary mb-1.5">{name}</div>
+              {resourceNames.length === 0 ? (
+                <div className="text-xs text-theme-text-secondary">No hard limits set.</div>
+              ) : (
+                <div className="space-y-1">
+                  {resourceNames.map((res) => {
+                    const ratio = quotaUsageRatio(res, used[res] ?? '0', hard[res])
+                    const pct = ratio === null ? null : Math.min(100, Math.round(ratio * 100))
+                    const tone =
+                      ratio === null ? SEVERITY_TEXT.neutral
+                        : ratio >= 1 ? SEVERITY_TEXT.error
+                          : ratio >= 0.9 ? SEVERITY_TEXT.alert
+                            : SEVERITY_TEXT.neutral
+                    const barTone =
+                      ratio === null ? 'bg-theme-border'
+                        : ratio >= 1 ? SEVERITY_DOT.error
+                          : ratio >= 0.9 ? SEVERITY_DOT.alert
+                            : 'bg-theme-text-tertiary'
+                    return (
+                      <div key={res} className="text-xs">
+                        <div className="flex items-center justify-between gap-2">
+                          <span className="text-theme-text-secondary truncate">{res}</span>
+                          <span className={clsx('shrink-0 tabular-nums', tone)}>
+                            {used[res] ?? '0'} / {hard[res]}{pct !== null && ` (${pct}%)`}
+                          </span>
+                        </div>
+                        {pct !== null && (
+                          <div className="mt-0.5 h-1 rounded-full bg-theme-base overflow-hidden">
+                            <div className={clsx('h-full rounded-full', barTone)} style={{ width: `${pct}%` }} />
+                          </div>
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </Section>
+  )
+}
+
 // ============================================================================
 // NAMESPACE RBAC SECTION
 // ============================================================================

package/src/components/resources/renderers/PodRenderer.tsx

@@ -338,9 +338,12 @@ export function PodRenderer({
         <AlertBanner variant="error" title="Issues Detected">
           <ul className="text-xs space-y-1">
             {podProblems.map((p, i) => (
-              <li key={i} className="flex items-center gap-1.5">
-                <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', SEVERITY_DOT_COLOR[p.severity])} />
-                <span className="text-red-600 dark:text-red-400">{p.message}</span>
+              <li key={i} className="flex items-start gap-1.5">
+                <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0 mt-1', SEVERITY_DOT_COLOR[p.severity])} />
+                <span className="text-red-600 dark:text-red-400">
+                  {p.message}
+                  {p.detail && <span className="text-theme-text-secondary">: {p.detail}</span>}
+                </span>
               </li>
             ))}
           </ul>

package/src/components/resources/resource-utils.ts

@@ -48,6 +48,27 @@ export const healthColors: Record<HealthLevel, string> = {
 export interface PodProblem {
   severity: 'critical' | 'high' | 'medium'
   message: string
+  // detail carries extra human context shown after the short message (e.g.
+  // the scheduler's verdict for an Unschedulable pod). message stays the
+  // stable short label so filter-chip matching (podMatchesProblemCategory)
+  // and known-pattern checks keep working on exact strings.
+  detail?: string
+}
+
+/**
+ * Condense a kube-scheduler verdict (the PodScheduled=False / FailedScheduling
+ * message) for display: drop the "0/N nodes are available:" prefix and the
+ * "preemption: …" tail, keeping the per-predicate clause list — which already
+ * names untolerated taints, insufficient resources, and affinity/selector
+ * misses. Presentation-only; the backend `scheduling` issue source does the
+ * structured decomposition + node-label resolution (e.g. naming arm64).
+ */
+export function summarizeSchedulerMessage(message?: string): string {
+  if (!message) return ''
+  let m = message.split('. preemption:')[0].split(' preemption:')[0].trim()
+  const colon = m.indexOf(':')
+  if (colon >= 0) m = m.slice(colon + 1).trim()
+  return m.replace(/\.\s*$/, '').trim()
 }
 
 /** Tailwind classes for severity dot indicators (used in tooltips and alert banners) */
@@ -302,7 +323,7 @@ export function getPodProblems(pod: any): PodProblem[] {
   for (const cond of conditions) {
     if (cond.type === 'PodScheduled' && cond.status === 'False') {
       if (cond.reason === 'Unschedulable') {
-        problems.push({ severity: 'high', message: 'Unschedulable' })
+        problems.push({ severity: 'high', message: 'Unschedulable', detail: summarizeSchedulerMessage(cond.message) || undefined })
       }
     }
     // Readiness/Liveness probe failures

package/src/components/resources/summarize-scheduler-message.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+import { summarizeSchedulerMessage } from './resource-utils'
+
+describe('summarizeSchedulerMessage', () => {
+  it('strips the "0/N nodes are available:" prefix and the preemption tail', () => {
+    const msg =
+      '0/5 nodes are available: 2 Insufficient cpu, 3 node(s) had untolerated taint {dedicated: gpu}. ' +
+      'preemption: 0/5 nodes are available: 5 No preemption victims found for incoming pod.'
+    expect(summarizeSchedulerMessage(msg)).toBe(
+      '2 Insufficient cpu, 3 node(s) had untolerated taint {dedicated: gpu}',
+    )
+  })
+
+  it('returns the clause list without a node prefix unchanged (minus trailing period)', () => {
+    expect(summarizeSchedulerMessage('0/2 nodes are available: 2 Insufficient memory.')).toBe(
+      '2 Insufficient memory',
+    )
+  })
+
+  it('handles the bare " preemption:" tail variant', () => {
+    expect(
+      summarizeSchedulerMessage('0/3 nodes are available: 3 Insufficient cpu preemption: not helpful'),
+    ).toBe('3 Insufficient cpu')
+  })
+
+  it('returns empty string for empty/undefined input (so detail is omitted, message stays the stable label)', () => {
+    expect(summarizeSchedulerMessage('')).toBe('')
+    expect(summarizeSchedulerMessage(undefined)).toBe('')
+  })
+})

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'
@@ -43,13 +43,63 @@ function getIssueTooltip(issue: string | undefined): React.ReactNode {
     Pending: {
       title: 'Pending',
       description: 'Pod is waiting to be scheduled to a node.',
-      action: 'Check for resource constraints or node availability.',
+      action: 'Open the pod to see the scheduler verdict (taints, resources, affinity).',
     },
     FailedScheduling: {
       title: 'Scheduling Failed',
       description: 'No suitable node found for this pod.',
       action: 'Check node resources, taints, tolerations, and affinity rules.',
     },
+    Unschedulable: {
+      title: 'Unschedulable',
+      description: 'The scheduler tried every node and none fit.',
+      action: 'Open the pod for the decomposed reason — arch/OS mismatch, untolerated taint, insufficient resources, or affinity.',
+    },
+    QuotaExceeded: {
+      title: 'ResourceQuota Exceeded',
+      description: 'A namespace ResourceQuota is at its hard limit, so new pods are rejected at admission.',
+      action: 'Open the namespace to see quota usage; raise the quota or free usage.',
+    },
+    QuotaNearLimit: {
+      title: 'ResourceQuota Near Limit',
+      description: 'A namespace ResourceQuota is close to its hard limit and will soon block new pods.',
+      action: 'Open the namespace to see quota usage.',
+    },
+    IPExhaustion: {
+      title: 'IP Exhaustion (CNI)',
+      description: 'The pod was scheduled but the CNI could not assign an IP — the node/subnet pool is exhausted.',
+      action: 'Free IPs, scale the subnet/ENI pool, or move the pod to a node with capacity.',
+    },
+    SandboxCreationFailed: {
+      title: 'Sandbox Creation Failed',
+      description: 'The kubelet could not create the pod sandbox.',
+      action: 'Check kubelet/CNI events on the node.',
+    },
+    VolumeMount: {
+      title: 'Volume Mount Failed',
+      description: 'The pod was scheduled but a volume could not be mounted.',
+      action: 'Check the PVC/PV binding and the CSI driver on the node.',
+    },
+    VolumeAttach: {
+      title: 'Volume Attach Failed',
+      description: 'A volume could not be attached to the node.',
+      action: 'Check the CSI driver and cloud-provider attach limits.',
+    },
+    VolumeMultiAttach: {
+      title: 'Volume Multi-Attach',
+      description: 'The volume is still attached to another node — a RWO volume cannot attach in two places.',
+      action: 'Wait for the old pod to terminate, or cordon/drain the stale node.',
+    },
+    PodSecurityViolation: {
+      title: 'Pod Security Violation',
+      description: 'Pod Security Admission rejected the pod template at admission.',
+      action: 'Align the pod securityContext with the namespace PSA level.',
+    },
+    WebhookDenied: {
+      title: 'Admission Webhook Denied',
+      description: 'A validating/mutating admission webhook rejected pod creation.',
+      action: 'Check the webhook policy that denied the request.',
+    },
     Evicted: {
       title: 'Pod Evicted',
       description: 'Pod was evicted from the node (usually due to resource pressure).',
@@ -171,8 +221,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}`
+}