@skyhook-io/k8s-ui 1.9.0 → 1.9.1

package/package.json

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

package/src/components/logs/useLogSearch.ts

@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback, useEffect, useRef } from 'react'
+import { useState, useMemo, useCallback, useDeferredValue, useEffect, useRef } from 'react'
 import type { VirtuosoHandle } from 'react-virtuoso'
 import type { LogEntry } from './useLogBuffer'
 import { stripAnsi, escapeRegExp } from '../../utils/log-format'
@@ -40,17 +40,22 @@ export function useLogSearch(
   const [currentMatch, setCurrentMatch] = useState(0)
   const [isOpen, setIsOpen] = useState(false)
 
+  // The scan strips ANSI and regex-tests every buffered line — on a multi-MB
+  // buffer that's too slow to run synchronously per keystroke. Deferring lets
+  // the input echo immediately while the match set catches up.
+  const deferredQuery = useDeferredValue(query)
+
   const { matchIndices, regexError } = useMemo(() => {
-    if (!query) {
+    if (!deferredQuery) {
       return { matchIndices: [] as number[], regexError: null }
     }
 
     try {
       let pattern: RegExp
       if (isRegex) {
-        pattern = new RegExp(query, isCaseSensitive ? 'g' : 'gi')
+        pattern = new RegExp(deferredQuery, isCaseSensitive ? 'g' : 'gi')
       } else {
-        pattern = new RegExp(escapeRegExp(query), isCaseSensitive ? 'g' : 'gi')
+        pattern = new RegExp(escapeRegExp(deferredQuery), isCaseSensitive ? 'g' : 'gi')
       }
 
       const indices: number[] = []
@@ -65,14 +70,14 @@ export function useLogSearch(
     } catch (e) {
       return { matchIndices: [] as number[], regexError: e instanceof Error ? e.message : 'Invalid regex' }
     }
-  }, [entries, query, isRegex, isCaseSensitive])
+  }, [entries, deferredQuery, isRegex, isCaseSensitive])
 
   // Filtered entries for filter mode
   const filteredEntries = useMemo(() => {
-    if (!isFilterMode || !query) return entries
+    if (!isFilterMode || !deferredQuery) return entries
     const matchSet = new Set(matchIndices)
     return entries.filter((_, i) => matchSet.has(i))
-  }, [entries, isFilterMode, query, matchIndices])
+  }, [entries, isFilterMode, deferredQuery, matchIndices])
 
   // Reset current match when search criteria change (but not when new entries arrive during streaming)
   const prevCriteria = useRef({ query, isRegex, isCaseSensitive })

package/src/components/resources/ResourcesView.per-container.test.ts

@@ -0,0 +1,111 @@
+import { describe, expect, it } from 'vitest'
+import type { ContainerResourceMetrics } from '../../types'
+import { podAggregate, readContainer } from './ResourcesView'
+
+// Build a CPU-only container fixture; memory fields default to 0.
+function cpu(name: string, usage: number, request: number, limit: number): ContainerResourceMetrics {
+  return { name, cpu: usage, cpuRequest: request, cpuLimit: limit, memory: 0, memoryRequest: 0, memoryLimit: 0 }
+}
+
+// Build a memory-only container fixture; cpu fields default to 0.
+function mem(name: string, usage: number, request: number, limit: number): ContainerResourceMetrics {
+  return { name, cpu: 0, cpuRequest: 0, cpuLimit: 0, memory: usage, memoryRequest: request, memoryLimit: limit }
+}
+
+describe('readContainer', () => {
+  it("uses limit as the yardstick when a limit is set", () => {
+    const r = readContainer(cpu('app', 50, 25, 100), 'cpu')
+    expect(r.yardstick).toBe('limit')
+    expect(r.denom).toBe(100)
+    expect(r.pct).toBe(50)
+  })
+
+  it('falls back to request when limit is 0 but request is set', () => {
+    const r = readContainer(cpu('app', 80, 100, 0), 'cpu')
+    expect(r.yardstick).toBe('request')
+    expect(r.denom).toBe(100)
+    expect(r.pct).toBe(80)
+  })
+
+  it('allows request-only pct to exceed 100%', () => {
+    const r = readContainer(cpu('app', 200, 100, 0), 'cpu')
+    expect(r.yardstick).toBe('request')
+    expect(r.pct).toBe(200)
+  })
+
+  it("reports 'none' when neither request nor limit is set", () => {
+    const r = readContainer(cpu('app', 40, 0, 0), 'cpu')
+    expect(r.yardstick).toBe('none')
+    expect(r.pct).toBe(-1)
+  })
+
+  it('reads the memory fields for the memory kind', () => {
+    const r = readContainer(mem('app', 64, 32, 128), 'memory')
+    expect(r.yardstick).toBe('limit')
+    expect(r.denom).toBe(128)
+    expect(r.pct).toBe(50)
+  })
+})
+
+describe('podAggregate', () => {
+  it("reports mode 'limit' with the summed limit and request marker when every container is limited", () => {
+    const containers = [
+      cpu('app', 30, 50, 100),
+      cpu('sidecar', 40, 50, 200),
+    ]
+    const result = podAggregate(containers, 'cpu')
+    expect(result.mode).toBe('limit')
+    expect(result.totalUsage).toBe(70)
+    expect(result.denom).toBe(300) // summed limit
+    expect(result.markerPct).toBeCloseTo((100 / 300) * 100) // summed request / summed limit
+    expect(result.unlimitedCount).toBe(0)
+  })
+
+  it("omits the marker in 'limit' mode when no container sets a request", () => {
+    const containers = [cpu('a', 30, 0, 100), cpu('b', 40, 0, 200)]
+    const result = podAggregate(containers, 'cpu')
+    expect(result.mode).toBe('limit')
+    expect(result.markerPct).toBeUndefined()
+  })
+
+  it("reports mode 'partial' with usage and unbounded count when only some containers are limited", () => {
+    const containers = [
+      cpu('app', 80, 0, 0),   // dominant, unbounded
+      cpu('sidecar', 5, 0, 100), // small, limited
+    ]
+    const result = podAggregate(containers, 'cpu')
+    expect(result.mode).toBe('partial')
+    expect(result.totalUsage).toBe(85)
+    expect(result.denom).toBe(0) // a partial limit sum is not a real ceiling
+    expect(result.unlimitedCount).toBe(1)
+  })
+
+  it("reports mode 'request' with the summed request when there are no limits but some requests", () => {
+    const containers = [
+      cpu('a', 50, 100, 0),
+      cpu('b', 40, 200, 0),
+    ]
+    const result = podAggregate(containers, 'cpu')
+    expect(result.mode).toBe('request')
+    expect(result.totalUsage).toBe(90)
+    expect(result.denom).toBe(300) // summed request
+    expect(result.unlimitedCount).toBe(2)
+  })
+
+  it("reports mode 'none' when no container sets a request or limit", () => {
+    const containers = [cpu('a', 10, 0, 0), cpu('b', 20, 0, 0)]
+    const result = podAggregate(containers, 'cpu')
+    expect(result.mode).toBe('none')
+    expect(result.totalUsage).toBe(30)
+    expect(result.denom).toBe(0)
+    expect(result.unlimitedCount).toBe(2)
+  })
+
+  it('aggregates the memory fields for the memory kind', () => {
+    const containers = [mem('a', 64, 32, 128), mem('b', 96, 64, 256)]
+    const result = podAggregate(containers, 'memory')
+    expect(result.mode).toBe('limit')
+    expect(result.totalUsage).toBe(160)
+    expect(result.denom).toBe(384) // summed memory limit
+  })
+})

package/src/components/resources/ResourcesView.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useMemo, useEffect, useCallback, useRef, useContext, useId } from 'react'
+import React, { useState, useMemo, useEffect, useCallback, useDeferredValue, useRef, useContext, useId } from 'react'
 import { TableVirtuoso, type TableVirtuosoHandle } from 'react-virtuoso'
+import { useDebouncedValue } from '../../hooks/useDebouncedValue'
 import { PaneLoader } from '../ui/PaneLoader'
 import { RestrictedState } from '../ui/RestrictedState'
 import { Input } from '../ui/Input'
-import type { TopPodMetrics, TopNodeMetrics } from '../../types'
+import type { TopPodMetrics, TopNodeMetrics, ContainerResourceMetrics } from '../../types'
 import {
   Search,
   RefreshCw,
@@ -2185,6 +2186,15 @@ export function ResourcesView({
     setBulkForceDelete(false)
   }, [selectedKind.name, selectedKind.group]) // eslint-disable-line react-hooks/exhaustive-deps
   const [searchTerm, setSearchTerm] = useState(initialFilters.search)
+  // Typing must never wait on the list or the router. The input renders raw
+  // searchTerm; filtering consumes the deferred copy (React yields to keep
+  // keystrokes responsive on large lists); the URL write consumes the
+  // debounced copy (one history entry per pause, not one per keystroke —
+  // per-keystroke navigations re-render the whole route tree and, when
+  // renders lag, the URL→state sync effect could revert in-flight input).
+  // Clearing skips the debounce so the × cleans the URL immediately.
+  const deferredSearchTerm = useDeferredValue(searchTerm)
+  const debouncedSearchTerm = useDebouncedValue(searchTerm, 300, (v) => v === '')
   const [regexMode, setRegexMode] = useState(initialFilters.regex)
   const [sortColumn, setSortColumn] = useState<string | null>(null)
   const [sortDirection, setSortDirection] = useState<SortDirection>(null)
@@ -2963,8 +2973,17 @@ export function ResourcesView({
       setOwnerName(newFilters.ownerName)
     }
 
-    // Update search if it changed
-    if (newFilters.search !== searchTerm) {
+    // Update search if it changed — unless this navigation is the echo of our
+    // own debounced URL write (its search equals the value we just wrote), or
+    // the user is mid-typing in the box. During typing the URL intentionally
+    // lags the input, so an un-guarded sync here would revert in-flight
+    // keystrokes whenever a write echo lands mid-burst. Genuinely external
+    // navigations (deep links, back/forward) carry a different search value
+    // and still sync.
+    const isOwnWriteEcho =
+      newFilters.search === debouncedSearchTerm ||
+      (typeof document !== 'undefined' && document.activeElement === searchInputRef.current)
+    if (!isOwnWriteEcho && newFilters.search !== searchTerm) {
       setSearchTerm(newFilters.search)
     }
 
@@ -3173,8 +3192,8 @@ export function ResourcesView({
     shouldPushHistory.current = false
     prevSelectedResourceRef.current = current
 
-    updateURL(selectedKind, searchTerm, regexMode, columnFilters, columnFilterExcludes, problemFilters, showInactiveReplicaSets, selectedResource?.namespace, selectedResource?.name, pushHistory)
-  }, [selectedKind, searchTerm, regexMode, columnFilters, columnFilterExcludes, problemFilters, showInactiveReplicaSets, selectedResource, updateURL, basePath, locationPathname])
+    updateURL(selectedKind, debouncedSearchTerm, regexMode, columnFilters, columnFilterExcludes, problemFilters, showInactiveReplicaSets, selectedResource?.namespace, selectedResource?.name, pushHistory)
+  }, [selectedKind, debouncedSearchTerm, regexMode, columnFilters, columnFilterExcludes, problemFilters, showInactiveReplicaSets, selectedResource, updateURL, basePath, locationPathname])
 
   // Handle resource click from URL on mount
   useEffect(() => {
@@ -3605,13 +3624,13 @@ export function ResourcesView({
   // 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 }
+    if (!regexMode || !deferredSearchTerm) return { re: null, error: null }
     try {
-      return { re: new RegExp(searchTerm, 'i'), error: null }
+      return { re: new RegExp(deferredSearchTerm, 'i'), error: null }
     } catch (e) {
       return { re: null, error: e instanceof Error ? e.message : 'Invalid regex' }
     }
-  }, [regexMode, searchTerm])
+  }, [regexMode, deferredSearchTerm])
 
   // Filter resources by search term, status, problems, and sort
   const filteredResources = useMemo(() => {
@@ -3620,7 +3639,7 @@ export function ResourcesView({
     let result = resources
 
     // Apply search filter
-    if (searchTerm) {
+    if (deferredSearchTerm) {
       if (regexMode) {
         const re = searchRegex.re
         if (re) {
@@ -3630,7 +3649,7 @@ export function ResourcesView({
           )
         }
       } else {
-        const term = searchTerm.toLowerCase()
+        const term = deferredSearchTerm.toLowerCase()
         result = result.filter((r: any) =>
           r.metadata?.name?.toLowerCase().includes(term) ||
           r.metadata?.namespace?.toLowerCase().includes(term)
@@ -3792,7 +3811,7 @@ export function ResourcesView({
     }
 
     return result
-  }, [resources, searchTerm, regexMode, searchRegex, columnFilters, columnFilterExcludes, problemFilters, showInactiveReplicaSets, labelSelector, ownerKind, ownerName, selectedKind.name, sortColumn, sortDirection, getSortValue, extraColumnsByKey, podMatchesProblemFilter])
+  }, [resources, deferredSearchTerm, regexMode, searchRegex, columnFilters, columnFilterExcludes, problemFilters, showInactiveReplicaSets, labelSelector, ownerKind, ownerName, selectedKind.name, sortColumn, sortDirection, getSortValue, extraColumnsByKey, podMatchesProblemFilter])
 
   // For nodes table: compute the majority minor version so outliers can be highlighted
   const majorityNodeMinorVersion = useMemo(() => {
@@ -3919,6 +3938,16 @@ export function ResourcesView({
 
   const isCheckboxMode = canBulkSelect && bulkMode
 
+  // Stable row handlers so the memoized ResourceRowCells skips re-rendering
+  // rows whose data didn't change on a refetch (React Query's structural
+  // sharing keeps unchanged resources referentially identical).
+  const handleRowClick = useCallback((resource: any, isSelected: boolean) => {
+    if (compareMode) toggleComparePick(resource)
+    else if (isCheckboxMode) toggleChecked(resource)
+    else selectResource(resource, isSelected)
+  }, [compareMode, isCheckboxMode, toggleComparePick, toggleChecked, selectResource])
+  const handleRowMouseEnter = useCallback(() => setHighlightedIndex(-1), [])
+
   // Filter columns by visibility
   const columns = useMemo(() => {
     if (visibleColumns.size === 0) return allColumns.filter(c => c.defaultVisible !== false)
@@ -5045,12 +5074,12 @@ export function ResourcesView({
                     isChecked={checkedResources.has(resourceKey)}
                     showCheckbox={isCheckboxMode}
                     majorityNodeMinorVersion={majorityNodeMinorVersion}
-                    onClick={() => compareMode ? toggleComparePick(resource) : isCheckboxMode ? toggleChecked(resource) : selectResource(resource, isSelected)}
-                    onMouseEnter={() => setHighlightedIndex(-1)}
+                    onRowClick={handleRowClick}
+                    onRowMouseEnter={handleRowMouseEnter}
                     compareMode={compareMode}
                     comparePickIndex={pickIdx}
                     rowHref={rowHrefFor?.(resource)}
-                    onCheckToggle={() => toggleChecked(resource)}
+                    onRowCheckToggle={toggleChecked}
                   />
                 )
               }}
@@ -5200,8 +5229,11 @@ interface ResourceRowCellsProps {
   isChecked?: boolean
   showCheckbox?: boolean
   majorityNodeMinorVersion?: string
-  onClick?: () => void
-  onMouseEnter?: () => void
+  // Row callbacks receive the resource so the parent can pass referentially
+  // stable handlers — per-row closures would defeat React.memo and re-render
+  // every visible row on each SSE-driven refetch.
+  onRowClick?: (resource: any, isSelected: boolean) => void
+  onRowMouseEnter?: () => void
   compareMode?: boolean
   /** -1 when not picked; 0 = pick A; 1 = pick B. */
   comparePickIndex?: number
@@ -5209,7 +5241,7 @@ interface ResourceRowCellsProps {
    *  data cells drop their click handlers. The compare-mode chip column
    *  is unaffected (still toggles picks). */
   rowHref?: string
-  onCheckToggle?: () => void
+  onRowCheckToggle?: (resource: any) => void
 }
 
 function rowHighlightClass(
@@ -5231,9 +5263,11 @@ function rowHighlightClass(
   return 'group-hover/row:bg-theme-surface/50'
 }
 
-function ResourceRowCells({ resource, kind, group, columns, extraColumnsByKey, hasSpacerColumn, isSelected, isHighlighted, isChecked, showCheckbox, majorityNodeMinorVersion, onClick, onMouseEnter, compareMode, comparePickIndex = -1, rowHref, onCheckToggle }: ResourceRowCellsProps) {
+const ResourceRowCells = React.memo(function ResourceRowCells({ resource, kind, group, columns, extraColumnsByKey, hasSpacerColumn, isSelected, isHighlighted, isChecked, showCheckbox, majorityNodeMinorVersion, onRowClick, onRowMouseEnter, compareMode, comparePickIndex = -1, rowHref, onRowCheckToggle }: ResourceRowCellsProps) {
   const rowHighlight = rowHighlightClass(compareMode, comparePickIndex, isSelected, isHighlighted, isChecked)
   const pickedSide = comparePickIndex === 0 ? 'a' : comparePickIndex === 1 ? 'b' : null
+  const onClick = onRowClick ? () => onRowClick(resource, !!isSelected) : undefined
+  const onMouseEnter = onRowMouseEnter
   // When the host supplies an anchor, drop per-cell onClick for the data
   // columns: the anchor is the only navigation surface. The compare-mode
   // chip column keeps its onClick so pick toggling still works.
@@ -5268,7 +5302,7 @@ function ResourceRowCells({ resource, kind, group, columns, extraColumnsByKey, h
       {showCheckbox && (
         <td
           className={clsx('border-b-subtle text-center px-0 py-3 w-10 cursor-pointer transition-colors', rowHighlight)}
-          onClick={(e) => { e.stopPropagation(); onCheckToggle?.() }}
+          onClick={(e) => { e.stopPropagation(); onRowCheckToggle?.(resource) }}
         >
           <input
             type="checkbox"
@@ -5304,7 +5338,7 @@ function ResourceRowCells({ resource, kind, group, columns, extraColumnsByKey, h
       {hasSpacerColumn && <td className="border-b-subtle p-0" />}
     </>
   )
-}
+})
 
 const VirtuosoTableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
   function VirtuosoTableRow(props, ref) {
@@ -6032,27 +6066,91 @@ function PodCell({ resource, column }: { resource: any; column: string }) {
       const ip = resource.status?.podIP || '-'
       return <span className="text-sm text-theme-text-secondary font-mono">{ip}</span>
     }
-    case 'cpu': {
-      const key = `${resource.metadata?.namespace}/${resource.metadata?.name}`
-      const m = metrics.pods.get(key)
-      if (!m || m.cpu === 0) return <span className="text-sm text-theme-text-tertiary">-</span>
-      const denom = m.cpuLimit || m.cpuRequest
-      if (!denom) return <span className="text-sm text-theme-text-secondary font-mono">{formatCPU(m.cpu)}</span>
-      const pct = (m.cpu / denom) * 100
-      const marker = m.cpuLimit > 0 && m.cpuRequest > 0 ? (m.cpuRequest / m.cpuLimit) * 100 : undefined
-      const tip = buildResourceTooltip('CPU', m.cpu, m.cpuRequest, m.cpuLimit, formatCPU)
-      return <ResourceBar used={formatCPU(m.cpu)} total={formatCPU(denom)} percent={pct} colorScheme={getBulletBarScheme(pct, marker)} markerPercent={marker} tooltip={tip} />
-    }
+    case 'cpu':
     case 'memory': {
+      const kind = column as 'cpu' | 'memory'
+      const isCPU = kind === 'cpu'
       const key = `${resource.metadata?.namespace}/${resource.metadata?.name}`
       const m = metrics.pods.get(key)
-      if (!m || m.memory === 0) return <span className="text-sm text-theme-text-tertiary">-</span>
-      const denom = m.memoryLimit || m.memoryRequest
-      if (!denom) return <span className="text-sm text-theme-text-secondary font-mono">{formatMemoryShort(m.memory)}</span>
-      const pct = (m.memory / denom) * 100
-      const marker = m.memoryLimit > 0 && m.memoryRequest > 0 ? (m.memoryRequest / m.memoryLimit) * 100 : undefined
-      const tip = buildResourceTooltip('Memory', m.memory, m.memoryRequest, m.memoryLimit, formatMemoryShort)
-      return <ResourceBar used={formatMemoryShort(m.memory)} total={formatMemoryShort(denom)} percent={pct} colorScheme={getBulletBarScheme(pct, marker)} markerPercent={marker} tooltip={tip} />
+      if (!m) return <span className="text-sm text-theme-text-tertiary">-</span>
+      const label = isCPU ? 'CPU' : 'Memory'
+      const format = isCPU ? formatCPU : formatMemoryShort
+
+      // Multi-container pods carry a per-container breakdown; single-container
+      // pods fall back to the (union-summed) pod-level fields as one synthetic
+      // container so the rest of the logic is uniform.
+      const list: ContainerResourceMetrics[] = (m.containers && m.containers.length > 0)
+        ? m.containers
+        : [{
+            name: resource.spec?.containers?.[0]?.name ?? resource.metadata?.name ?? '',
+            cpu: m.cpu, cpuRequest: m.cpuRequest, cpuLimit: m.cpuLimit,
+            memory: m.memory, memoryRequest: m.memoryRequest, memoryLimit: m.memoryLimit,
+          }]
+
+      const { mode, totalUsage, denom, markerPct, unlimitedCount } = podAggregate(list, kind)
+      if (totalUsage === 0) return <span className="text-sm text-theme-text-tertiary">-</span>
+
+      // Pod-vs-node context: how full the pod's node is (the risk signal) and
+      // how much of it this pod takes. Only when node metrics are loaded.
+      const nodeName = resource.spec?.nodeName as string | undefined
+      const node = nodeName ? metrics.nodes.get(nodeName) : undefined
+      const nodeAlloc = node ? (isCPU ? node.cpuAllocatable : node.memoryAllocatable) : 0
+      const nodeUsage = node ? (isCPU ? node.cpu : node.memory) : 0
+      // Zero usage means metrics-server has no sample for the node (down, or not
+      // yet scraped) — the same "no data" NodeCell renders blank — so skip the
+      // line rather than assert a misleading "0% used" that reads as safe.
+      const nodeCtx = node && nodeAlloc > 0 && nodeUsage > 0
+        ? {
+            name: nodeName!,
+            usedPct: (nodeUsage / nodeAlloc) * 100,
+            podSharePct: (totalUsage / nodeAlloc) * 100,
+          }
+        : undefined
+
+      const tip = buildContainerResourceTooltip(label, list, kind, format, nodeCtx)
+
+      // Every container is limited → aggregate bar against the summed limit; a
+      // real pod-level ceiling, so it may go red.
+      if (mode === 'limit') {
+        const pct = denom > 0 ? (totalUsage / denom) * 100 : 0
+        return (
+          <ResourceBar
+            used={format(totalUsage)}
+            total={format(denom)}
+            percent={pct}
+            colorScheme={getBulletBarScheme(pct, markerPct)}
+            markerPercent={markerPct}
+            tooltip={tip}
+          />
+        )
+      }
+
+      // No limits but some requests → neutral bar against the summed request
+      // (no ceiling → never red), no marker.
+      if (mode === 'request') {
+        const pct = denom > 0 ? (totalUsage / denom) * 100 : 0
+        return (
+          <ResourceBar
+            used={format(totalUsage)}
+            total={format(denom)}
+            percent={pct}
+            colorScheme="quiet"
+            tooltip={tip}
+          />
+        )
+      }
+
+      // partial (some limited, some not — the sum is not a real ceiling) or none
+      // (nothing set) → plain usage number plus a faint tag.
+      const tag = mode === 'partial' ? `${unlimitedCount} unbounded` : 'no limit'
+      return (
+        <Tooltip content={tip} delay={200} position="top" wrapperClassName="w-full min-w-0">
+          <span className="inline-flex items-center gap-1.5 min-w-0">
+            <span className="text-sm text-theme-text-secondary font-mono">{format(totalUsage)}</span>
+            <span className="text-[10px] text-theme-text-tertiary shrink-0">{tag}</span>
+          </span>
+        </Tooltip>
+      )
     }
     case 'gpu': {
       const count = getPodGpuCount(resource)
@@ -6575,65 +6673,176 @@ function getBulletBarScheme(_usagePct: number, _markerPct: number | undefined):
   return 'utilization'
 }
 
-function buildResourceTooltip(
-  type: 'CPU' | 'Memory',
-  usage: number,
-  request: number,
-  limit: number,
-  formatFn: (n: number) => string,
-) {
-  const isCPU = type === 'CPU'
-
-  let guidance: string
-  if (limit > 0 && request > 0) {
-    const pctOfLimit = (usage / limit) * 100
-    if (pctOfLimit > 90) {
-      guidance = isCPU
-        ? 'Near the limit — CPU may be throttled'
-        : 'Near the limit — at risk of OOM kill'
-    } else if (usage > request) {
-      guidance = 'Exceeds request — consider raising it if sustained'
-    } else {
-      guidance = 'Below request — healthy headroom'
-    }
-  } else if (limit > 0) {
-    const pctOfLimit = (usage / limit) * 100
-    if (pctOfLimit > 90) {
-      guidance = isCPU
-        ? 'Near the limit — CPU may be throttled'
-        : 'Near the limit — at risk of OOM kill'
+// Max per-container rows shown in the compact cell tooltip before collapsing
+// the tail into a "+N more" line.
+const CONTAINER_TOOLTIP_CAP = 3
+
+// Per-container resource reading. The yardstick is the container's own limit
+// when set, otherwise its request. A limit means an enforced ceiling (usage can
+// be throttled / OOM-killed → the bar may go red); a request-only container has
+// no ceiling, so usage above request is normal and the bar stays neutral.
+type Yardstick = 'limit' | 'request' | 'none'
+
+export function readContainer(c: ContainerResourceMetrics, kind: 'cpu' | 'memory') {
+  const isCPU = kind === 'cpu'
+  const usage = isCPU ? c.cpu : c.memory
+  const limit = isCPU ? c.cpuLimit : c.memoryLimit
+  const request = isCPU ? c.cpuRequest : c.memoryRequest
+  let yardstick: Yardstick = 'none'
+  let denom = 0
+  if (limit > 0) {
+    yardstick = 'limit'
+    denom = limit
+  } else if (request > 0) {
+    yardstick = 'request'
+    denom = request
+  }
+  const pct = denom > 0 ? (usage / denom) * 100 : -1
+  return { usage, limit, request, yardstick, denom, pct }
+}
+
+interface PodAggregate {
+  // limit: every container is limited → a real ceiling exists (bar vs summed
+  // limit). partial: some containers limited, some not → the sum is not a true
+  // ceiling, so plain usage + an "unbounded" tag. request: no limits but some
+  // requests → neutral bar vs summed request. none: nothing set → plain usage.
+  mode: 'limit' | 'partial' | 'request' | 'none'
+  totalUsage: number
+  /** summed limit (limit mode) or summed request (request mode); 0 otherwise. */
+  denom: number
+  /** request marker as % of summed limit; limit mode only. */
+  markerPct?: number
+  /** number of containers with no limit set. */
+  unlimitedCount: number
+}
+
+// podAggregate reduces a pod's containers to the aggregate the compact cell
+// headline renders — total usage measured against a pod-level yardstick. It
+// keeps the dominant consumer visible instead of demoting it behind a small
+// limited container, and stays honest about partial limits (which don't form a
+// real ceiling).
+export function podAggregate(list: ContainerResourceMetrics[], kind: 'cpu' | 'memory'): PodAggregate {
+  const isCPU = kind === 'cpu'
+  let totalUsage = 0
+  let limitedCount = 0
+  let requestedCount = 0
+  let unlimitedCount = 0
+  let summedLimit = 0
+  let summedRequest = 0
+  for (const c of list) {
+    const usage = isCPU ? c.cpu : c.memory
+    const limit = isCPU ? c.cpuLimit : c.memoryLimit
+    const request = isCPU ? c.cpuRequest : c.memoryRequest
+    totalUsage += usage
+    if (limit > 0) {
+      limitedCount++
+      summedLimit += limit
     } else {
-      guidance = 'No request set — scheduling may be suboptimal'
+      unlimitedCount++
+    }
+    if (request > 0) {
+      requestedCount++
+      summedRequest += request
     }
-  } else if (request > 0) {
-    guidance = usage > request
-      ? `Exceeds request with no limit — unbounded ${isCPU ? 'CPU' : 'memory'} access`
-      : 'No limit set — pod can burst beyond request'
-  } else {
-    guidance = 'No request or limit configured'
   }
+  const allLimited = list.length > 0 && limitedCount === list.length
+  if (allLimited) {
+    return {
+      mode: 'limit',
+      totalUsage,
+      denom: summedLimit,
+      markerPct: summedRequest > 0 ? (summedRequest / summedLimit) * 100 : undefined,
+      unlimitedCount,
+    }
+  }
+  if (limitedCount > 0) {
+    return { mode: 'partial', totalUsage, denom: 0, unlimitedCount }
+  }
+  if (requestedCount > 0) {
+    return { mode: 'request', totalUsage, denom: summedRequest, unlimitedCount }
+  }
+  return { mode: 'none', totalUsage, denom: 0, unlimitedCount }
+}
+
+// buildContainerResourceTooltip renders one row per container — usage against
+// its OWN yardstick (limit if set, otherwise request) and percentage — sorted
+// by pct descending, intermixing limited and request-only. Containers with
+// neither render the words "no limit". Capped at CONTAINER_TOOLTIP_CAP rows,
+// with a final "+N more" line pointing at the pod.
+// NodeContext answers "is this pod at risk from its node?" — how full the node
+// is (the risk signal) and how much of the node this pod takes (attribution).
+interface NodeContext {
+  name: string
+  usedPct: number
+  podSharePct: number
+}
+
+// A node this full puts every pod on it at risk (eviction / OOM / throttling),
+// regardless of the pod's own limit headroom — so the line goes amber here.
+const NODE_PRESSURE_PCT = 85
+
+function formatSharePct(pct: number): string {
+  if (pct > 0 && pct < 1) return '<1%'
+  return `${Math.round(pct)}%`
+}
+
+function buildContainerResourceTooltip(
+  label: 'CPU' | 'Memory',
+  containers: ContainerResourceMetrics[],
+  kind: 'cpu' | 'memory',
+  formatFn: (n: number) => string,
+  nodeCtx?: NodeContext,
+) {
+  const rows = [...containers].sort((a, b) => {
+    const diff = readContainer(b, kind).pct - readContainer(a, kind).pct
+    return diff !== 0 ? diff : a.name.localeCompare(b.name)
+  })
+  const shown = rows.slice(0, CONTAINER_TOOLTIP_CAP)
+  const remaining = rows.length - shown.length
 
   return (
-    <div className="whitespace-normal w-52 flex flex-col gap-1.5 py-0.5">
-      <div className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-xs font-mono">
-        <span className="text-theme-text-tertiary">Usage</span>
-        <span className="text-theme-text-primary">{formatFn(usage)}</span>
-        {request > 0 && (
-          <>
-            <span className="text-theme-text-tertiary">Request</span>
-            <span className="text-theme-text-primary">{formatFn(request)}</span>
-          </>
-        )}
-        {limit > 0 && (
-          <>
-            <span className="text-theme-text-tertiary">Limit</span>
-            <span className="text-theme-text-primary">{formatFn(limit)}</span>
-          </>
-        )}
-      </div>
-      <div className="text-[11px] text-theme-text-secondary border-t border-theme-border/50 pt-1">
-        {guidance}
+    <div className="whitespace-normal w-72 flex flex-col gap-2 py-0.5">
+      <div className="text-[11px] text-theme-text-tertiary uppercase tracking-wide">{label} by container</div>
+      <div className="flex flex-col gap-2">
+        {shown.map((c) => {
+          const r = readContainer(c, kind)
+          // Container name on its own line, the numbers below it. Limited
+          // containers also show the request (the tooltip is the detail
+          // surface and shouldn't drop it); request-only/unset show their
+          // single yardstick or "no limit".
+          const detail = r.yardstick === 'limit'
+            ? `${formatFn(r.usage)} · ${Math.round(r.pct)}% · ${formatFn(r.denom)} limit${r.request > 0 ? ` · req ${formatFn(r.request)}` : ''}`
+            : r.yardstick === 'request'
+              ? `${formatFn(r.usage)} · ${Math.round(r.pct)}% · ${formatFn(r.denom)} request`
+              : `${formatFn(r.usage)} · no limit`
+          return (
+            <div key={c.name} className="flex flex-col leading-snug">
+              <span className="text-[11px] text-theme-text-tertiary truncate">{c.name}</span>
+              <span className="text-xs font-mono text-theme-text-primary">{detail}</span>
+            </div>
+          )
+        })}
       </div>
+      {remaining > 0 && (
+        <div className="text-[11px] text-theme-text-tertiary border-t border-theme-border/50 pt-1">
+          +{remaining} more → open pod
+        </div>
+      )}
+      {nodeCtx && (
+        <div className="flex flex-col leading-snug border-t border-theme-border/50 pt-1">
+          <span className="text-[11px] text-theme-text-tertiary truncate">Node {nodeCtx.name}</span>
+          <span
+            className={clsx(
+              'text-[11px]',
+              nodeCtx.usedPct >= NODE_PRESSURE_PCT
+                ? 'text-amber-500 font-medium'
+                : 'text-theme-text-secondary',
+            )}
+          >
+            {formatSharePct(nodeCtx.usedPct)} used · this pod {formatSharePct(nodeCtx.podSharePct)}
+          </span>
+        </div>
+      )}
     </div>
   )
 }

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

@@ -740,8 +740,11 @@ export function PodRenderer({
               {(metricsHistory?.containers || currentMetrics?.containers || []).map((historyContainer) => {
                 // Find current metrics for this container
                 const currentContainerMetrics = currentMetrics?.containers?.find(c => c.name === historyContainer.name)
-                // Find the container spec to compare against limits
+                // Find the container spec to compare against limits. Native
+                // sidecars live in initContainers (restartPolicy Always), so
+                // fall through to them or their chart shows no limit line.
                 const containerSpec = containers.find((c: any) => c.name === historyContainer.name)
+                  || initContainers.find((c: any) => c.name === historyContainer.name && c.restartPolicy === 'Always')
                 const limits = containerSpec?.resources?.limits
                 const requests = containerSpec?.resources?.requests
 

package/src/components/timeline/TimelineList.tsx

@@ -1,4 +1,5 @@
 import { useState, useMemo, useEffect, useCallback, useRef } from 'react'
+import { useDebouncedValue } from '../../hooks/useDebouncedValue'
 import { PaneLoader } from '../ui/PaneLoader'
 import { Tooltip } from '../ui/Tooltip'
 import {
@@ -117,6 +118,10 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
   const [searchInternal, setSearchInternal] = useState('')
   const searchTerm = searchProp ?? searchInternal
   const setSearchTerm = onSearchChange ?? setSearchInternal
+  // Coalesce typing bursts: re-filtering the aggregated list per keystroke is
+  // what makes the search box feel dead on large timelines. Clearing flushes
+  // immediately.
+  const debouncedSearchTerm = useDebouncedValue(searchTerm, 300, (v) => v === '')
   const [activityFilterInternal, setActivityFilterInternal] = useState<ActivityFilterKey[]>(
     initialFilter && initialFilter !== 'all' ? [initialFilter] : [],
   )
@@ -174,10 +179,10 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
       if (!matchesActivityFilter(item, activityTypeFilter)) return false
       if (kindFilter.length > 0 && !kindFilter.includes(item.kind)) return false
       if (!showDeleted && item.eventType === 'delete') return false
-      if (!matchesTimelineSearch(item, searchTerm)) return false
+      if (!matchesTimelineSearch(item, debouncedSearchTerm)) return false
       return true
     })
-  }, [events, activityTypeFilter, kindFilter, searchTerm, showDeleted])
+  }, [events, activityTypeFilter, kindFilter, debouncedSearchTerm, showDeleted])
 
   // Aggregated event group type
   type AggregatedItem = {

package/src/components/timeline/TimelineSwimlanes.tsx

@@ -1,5 +1,6 @@
 import { Fragment, useState, useMemo, useRef, useCallback, useEffect } from 'react'
 import { clsx } from 'clsx'
+import { useDebouncedValue } from '../../hooks/useDebouncedValue'
 import {
   AlertCircle,
   AlertTriangle,
@@ -795,6 +796,10 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
   const [searchInternal, setSearchInternal] = useState('')
   const searchTerm = searchProp ?? searchInternal
   const setSearchTerm = onSearchChange ?? setSearchInternal
+  // Filtering and re-ranking rebuild the whole lane board (tens of thousands
+  // of DOM mutations on a large timeline) — coalesce a typing burst into one
+  // rebuild instead of one per keystroke. Clearing flushes immediately.
+  const debouncedSearchTerm = useDebouncedValue(searchTerm, 300, (v) => v === '')
   const [activityFilterInternal, setActivityFilterInternal] = useState<ActivityFilterKey[]>([])
   const activityFilter = activityFilterProp ?? activityFilterInternal
   const setActivityFilter = onActivityFilterChange ?? setActivityFilterInternal
@@ -939,10 +944,10 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
       if (!showDeleted && e.eventType === 'delete') return false
       if (!matchesActivityFilter(e, activityFilter)) return false
       if (kindFilter.length > 0 && !kindFilter.includes(e.kind)) return false
-      if (!matchesTimelineSearch(e, searchTerm)) return false
+      if (!matchesTimelineSearch(e, debouncedSearchTerm)) return false
       return true
     })
-  }, [events, searchTerm, showDeleted, activityFilter, kindFilter])
+  }, [events, debouncedSearchTerm, showDeleted, activityFilter, kindFilter])
 
   // Kind dropdown options: seed set + every kind present in the (unfiltered)
   // events. The swimlane fetches all kinds, so deriving from events is stable.
@@ -1111,8 +1116,8 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
   // calm across it is the whole point. Inert when !isLive (local / WorkloadView).
   const laneOrderRef = useRef<string[] | null>(null)
   const rankResetKey = useMemo(
-    () => JSON.stringify([sort, grouping, searchTerm, showDeleted, activityFilter, kindFilter]),
-    [sort, grouping, searchTerm, showDeleted, activityFilter, kindFilter],
+    () => JSON.stringify([sort, grouping, debouncedSearchTerm, showDeleted, activityFilter, kindFilter]),
+    [sort, grouping, debouncedSearchTerm, showDeleted, activityFilter, kindFilter],
   )
   const rankResetKeyRef = useRef(rankResetKey)
   const wasLiveRef = useRef(false)

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export { useAnimatedUnmount } from './useAnimatedUnmount'
+export { useDebouncedValue } from './useDebouncedValue'
 export { useRefreshAnimation } from './useRefreshAnimation'
 export {
   KeyboardShortcutProvider,

package/src/hooks/useDebouncedValue.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react'
+
+/** Trailing-edge debounce of a value. Unlike useDeferredValue (which yields to
+ *  React's scheduler but still emits once per input change), this coalesces a
+ *  burst of changes into one emission after `delayMs` of quiet — the right tool
+ *  when each downstream emission has a fixed cost regardless of render pressure
+ *  (router URL writes, live-order re-ranks).
+ *
+ *  `flushWhen` values bypass the delay (e.g. an emptied search box: a delayed
+ *  clear makes the × button feel broken). The flush must reset the pending
+ *  timer state INSIDE the hook — masking it at the call site
+ *  (`v === '' ? '' : debounced`) leaves the stale value armed, and it
+ *  resurfaces if the user types again before the timer fires. */
+export function useDebouncedValue<T>(value: T, delayMs: number, flushWhen?: (value: T) => boolean): T {
+  const [debounced, setDebounced] = useState(value)
+
+  useEffect(() => {
+    if (Object.is(debounced, value)) return
+    if (flushWhen?.(value)) {
+      setDebounced(value)
+      return
+    }
+    const timer = setTimeout(() => setDebounced(value), delayMs)
+    return () => clearTimeout(timer)
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- re-arm only when the input changes; `debounced` catching up (or an inline `flushWhen` identity) must not restart the timer
+  }, [value, delayMs])
+
+  return debounced
+}

package/src/types/core.ts

@@ -1032,15 +1032,28 @@ export type ChartSource = 'local' | 'artifacthub'
 // ============================================================================
 
 // Top metrics types (bulk, for resource table view)
+export interface ContainerResourceMetrics {
+  name: string
+  cpu: number           // nanocores (usage)
+  cpuRequest: number    // nanocores
+  cpuLimit: number      // nanocores
+  memory: number        // bytes (usage)
+  memoryRequest: number // bytes
+  memoryLimit: number   // bytes
+}
+
 export interface TopPodMetrics {
   namespace: string
   name: string
   cpu: number           // nanocores (usage)
   memory: number        // bytes (usage)
-  cpuRequest: number    // nanocores (sum across containers)
-  cpuLimit: number      // nanocores (sum across containers)
-  memoryRequest: number // bytes (sum across containers)
-  memoryLimit: number   // bytes (sum across containers)
+  cpuRequest: number    // nanocores (sum across running containers)
+  cpuLimit: number      // nanocores (sum across running containers)
+  memoryRequest: number // bytes (sum across running containers)
+  memoryLimit: number   // bytes (sum across running containers)
+  // Per-container breakdown; present only for pods with more than one running
+  // container (regular + native sidecars). Absent for single-container pods.
+  containers?: ContainerResourceMetrics[]
 }
 
 export interface TopNodeMetrics {