@skyhook-io/k8s-ui 1.8.15 → 1.9.1

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.
@@ -1077,16 +1082,29 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
     return { start, end, windowMs, now: effectiveNow }
   }, [zoom, panOffset, effectiveNow, viewWindow])
 
+  // The visible window WITHOUT the live-`now` field. Keyed on the primitive
+  // bounds so its identity changes only when the window actually moves — a live
+  // `now` tick (30s) advances `visibleTimeRange.now` for the now-line but must
+  // NOT invalidate the lane-ordering / window-clip memos below, which only care
+  // about [start,end]. This stops the heavy build from re-running on each tick
+  // while the window is static — the controlled retained lens or a paused view.
+  // (In uncontrolled live mode start/end track `effectiveNow`, so they advance
+  // every tick regardless; the win is for the static-window cases this targets.)
+  const visibleWindow = useMemo(
+    () => ({ start: visibleTimeRange.start, end: visibleTimeRange.end, windowMs: visibleTimeRange.windowMs }),
+    [visibleTimeRange.start, visibleTimeRange.end, visibleTimeRange.windowMs],
+  )
+
   // Apply the chosen ordering to the top-level lanes. 'recent' needs the visible
   // window (newest-in-view first), so this lives after visibleTimeRange. The
   // pinned section is ordered separately (strict pin order) and never flows here.
   const orderedLanes = useMemo(
     () => sortTimelineLanes(lanes, sort, {
-      windowStart: visibleTimeRange.start,
-      windowEnd: visibleTimeRange.end,
+      windowStart: visibleWindow.start,
+      windowEnd: visibleWindow.end,
       scoreOf: (lane) => lane.scoreBreakdown?.total ?? calculateInterestingness(lane),
     }),
-    [lanes, sort, visibleTimeRange],
+    [lanes, sort, visibleWindow],
   )
 
   // Live-mode order hysteresis. The importance rank recomputes every poll (recency
@@ -1098,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)
@@ -1147,17 +1165,17 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
   // "events" count so it's view-scoped like "resources" — a lens sitting in a
   // recording gap reads "0 resources · 0 events", not "0 resources · N events".
   const eventsInWindow = useMemo(() => {
-    const { start, end } = visibleTimeRange
+    const { start, end } = visibleWindow
     return filteredEvents.filter((e) => {
       const t = new Date(e.timestamp).getTime()
       return t >= start && t <= end
     })
-  }, [filteredEvents, visibleTimeRange])
+  }, [filteredEvents, visibleWindow])
 
   // Recording gaps clipped to the visible window, for the hatched lane bands.
   const visibleGaps = useMemo(() => {
     if (!gaps || gaps.length === 0) return []
-    const { start, end } = visibleTimeRange
+    const { start, end } = visibleWindow
     const out: TimeWindow[] = []
     for (const g of gaps) {
       const fromMs = Math.max(g.fromMs, start)
@@ -1165,7 +1183,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
       if (toMs > fromMs) out.push({ fromMs, toMs })
     }
     return out
-  }, [gaps, visibleTimeRange])
+  }, [gaps, visibleWindow])
 
   // Pin MOVES a row: pinned lanes (and pinned children inside groups) leave
   // the regular list entirely — the pinned section is their only home.
@@ -1181,7 +1199,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
 
   // Filter out lanes with no events in the visible time window
   const visibleLanes = useMemo(() => {
-    const { start, end } = visibleTimeRange
+    const { start, end } = visibleWindow
     return unpinnedLanes.filter(lane => {
       const allLaneEvents = lane.allEventsSorted || []
       return allLaneEvents.some(e => {
@@ -1189,7 +1207,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
         return t >= start && t <= end
       })
     })
-  }, [unpinnedLanes, visibleTimeRange])
+  }, [unpinnedLanes, visibleWindow])
 
   // Pinned rows: resolved from the FULL lane list (pre-window-filter, any
   // grouping) so they stay put while the lens moves and even when they have no
@@ -1203,7 +1221,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
   // Honest counts while filtered to pins: only pinned rows' in-window events.
   const pinnedEventsInWindow = useMemo(() => {
     if (pinnedLaneRows.length === 0) return 0
-    const { start, end } = visibleTimeRange
+    const { start, end } = visibleWindow
     let n = 0
     for (const lane of pinnedLaneRows) {
       for (const e of lane.allEventsSorted || []) {
@@ -1212,7 +1230,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
       }
     }
     return n
-  }, [pinnedLaneRows, visibleTimeRange])
+  }, [pinnedLaneRows, visibleWindow])
 
   const pinnedIdSet = useMemo(() => new Set((pinnedLanes ?? []).map((p) => p.id)), [pinnedLanes])
   // A pin button for a lane, or null when the host wired no pin handler. A pinned
@@ -1236,7 +1254,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
 
   // Generate time axis ticks
   const axisTicks = useMemo(() => {
-    const { start, end } = visibleTimeRange
+    const { start, end } = visibleWindow
     const ticks: { time: number; label: string }[] = []
     const span = end - start
     if (span <= 0) return ticks
@@ -1262,18 +1280,18 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
     }
 
     return ticks
-  }, [visibleTimeRange])
+  }, [visibleWindow])
 
   // Convert timestamp to X position (0-100%)
   const timeToX = useCallback(
     (timestamp: number): number => {
-      const { start, windowMs } = visibleTimeRange
+      const { start, windowMs } = visibleWindow
       // A zero-width window (host bounds with fromMs === toMs) would divide by
       // zero and emit NaN into `left:` CSS — pin everything to the left edge.
       if (windowMs <= 0) return 0
       return ((timestamp - start) / windowMs) * 100
     },
-    [visibleTimeRange]
+    [visibleWindow]
   )
 
   // Vertical grid line positions (x-percent) shared by every lane backdrop.

package/src/components/timeline/index.ts

@@ -20,8 +20,6 @@ export {
   advanceLatchedLens,
   deriveLiveSelection,
   isLensLatched,
-  quantizeBaseWindow,
   LIVE_TICK_MS,
-  BASE_QUANTIZE_STEP_MS,
   type TimelineLiveState,
 } from './timeline-live'

package/src/components/timeline/timeline-live.test.ts

@@ -1,12 +1,10 @@
 import { describe, expect, it } from 'vitest'
 import {
-  BASE_QUANTIZE_STEP_MS,
   LENS_LATCH_EPSILON_MS,
   STALE_AMBER_AFTER_MS,
   advanceLatchedLens,
   deriveLiveSelection,
   isLensLatched,
-  quantizeBaseWindow,
 } from './timeline-live'
 import { clampSelection, type ScrubberRange } from './scrubber-math'
 
@@ -20,41 +18,6 @@ describe('deriveLiveSelection', () => {
   })
 })
 
-describe('quantizeBaseWindow', () => {
-  it('floors both edges to the step', () => {
-    const step = BASE_QUANTIZE_STEP_MS
-    const q = quantizeBaseWindow(step * 3 + 12_345, step * 10 + 4_000, step)
-    expect(q).toEqual({ fromMs: step * 3, toMs: step * 10 })
-  })
-
-  it('is stable across two ticks inside the same step', () => {
-    const step = BASE_QUANTIZE_STEP_MS
-    const base = step * 100
-    // Two "now" values 30s apart but inside the same 5-minute step.
-    const a = quantizeBaseWindow(base - HOUR + 10_000, base + 10_000, step)
-    const b = quantizeBaseWindow(base - HOUR + 40_000, base + 40_000, step)
-    expect(a).toEqual(b)
-  })
-
-  it('advances once the edge crosses a step boundary', () => {
-    const step = BASE_QUANTIZE_STEP_MS
-    const before = quantizeBaseWindow(0, step - 1, step)
-    const after = quantizeBaseWindow(0, step + 1, step)
-    expect(before.toMs).toBe(0)
-    expect(after.toMs).toBe(step)
-  })
-
-  it('trailing seam never exceeds one step (covered by the 10-min live poll)', () => {
-    const step = BASE_QUANTIZE_STEP_MS
-    const now = step * 42 + 137_000
-    const q = quantizeBaseWindow(now - HOUR, now, step)
-    // Gap between the quantized right edge and now is < one step, and one step
-    // (5min) is well inside the 10-min live poll window ⇒ no data hole.
-    expect(now - q.toMs).toBeLessThan(step)
-    expect(step).toBeLessThan(10 * MIN)
-  })
-})
-
 describe('isLensLatched', () => {
   const sel: ScrubberRange = { fromMs: 0, toMs: 100 * HOUR }
 

package/src/components/timeline/timeline-live.ts

@@ -18,8 +18,8 @@ export type TimelineLiveState =
   | { kind: 'frozen'; asOfMs: number; newEventCount?: number }
 
 // Cadence the host slides a live selection at. Coarse on purpose: the precise
-// [from,to] is re-derived every tick, but the base fetch is quantized so the
-// query key only churns every QUANTIZE step (see quantizeBaseWindow).
+// [from,to] is re-derived every tick without refetching — data arrives via the
+// source's own delta polling, so the tick only moves the visible window.
 export const LIVE_TICK_MS = 30_000
 
 // A frozen selection older than this reads as stale — the chip turns amber.
@@ -30,33 +30,11 @@ export const STALE_AMBER_AFTER_MS = 15 * 60_000
 // LIVE_TICK_MS so a lens that just slid with the tick still reads as latched.
 export const LENS_LATCH_EPSILON_MS = 60_000
 
-// Base-fetch quantization step. The react-query key is keyed on the quantized
-// window, so it only changes when the live edge crosses a 5-minute boundary —
-// the seam between the quantized edge and now is covered by the 10-minute live
-// poll (5min quantization lag < 10min poll window ⇒ no hole).
-export const BASE_QUANTIZE_STEP_MS = 5 * 60_000
-
 /** LIVE selection: a width pinned to now. */
 export function deriveLiveSelection(widthMs: number, nowMs: number): ScrubberRange {
   return { fromMs: nowMs - widthMs, toMs: nowMs }
 }
 
-/**
- * Quantize a sliding [from,to] down to fixed steps so the value is stable across
- * ticks within one step (identical output ⇒ stable react-query key). Both edges
- * floor to the step; the trailing seam to `now` is filled by the live poll.
- */
-export function quantizeBaseWindow(
-  fromMs: number,
-  toMs: number,
-  stepMs: number = BASE_QUANTIZE_STEP_MS,
-): ScrubberRange {
-  return {
-    fromMs: Math.floor(fromMs / stepMs) * stepMs,
-    toMs: Math.floor(toMs / stepMs) * stepMs,
-  }
-}
-
 /**
  * True when the lens rides the selection's live edge (so it should slide with
  * the tick). A lens the user dragged into the past sits further than epsilon

package/src/components/topology/K8sResourceNode.tsx

@@ -10,13 +10,14 @@ import {
 import { clsx } from 'clsx'
 import type { NodeKind, HealthStatus, PodSummary } from '../../types'
 import { displayKind } from '../../types'
-import { healthToSeverity, SEVERITY_DOT, SEVERITY_TEXT } from '../../utils/badge-colors'
+import { healthToSeverity, SEVERITY_DOT } from '../../utils/badge-colors'
 import { workloadHue } from '../../utils/workload-colors'
 import { ownershipOf } from '../../utils/topology-neighborhood'
 import { midTruncate } from '../../utils/format'
 import { getTopologyIcon } from '../../utils/resource-icons'
 import { Tooltip } from '../ui/Tooltip'
 import { AuditBadgeTooltip, type AuditBadgeMessage } from '../audit/AuditBadgeTooltip'
+import { SEVERITY_TEXT_CLASS } from '../checks/severity'
 import argoCdLogo from '../../assets/gitops/argocd.png'
 import fluxLogo from '../../assets/gitops/flux.svg'
 
@@ -464,12 +465,13 @@ export const K8sResourceNode = memo(function K8sResourceNode({
   // node's data by auditKey). The host only counts "badge-worthy" findings —
   // reference-integrity / lifecycle, "this resource is actually broken" — not the
   // posture/best-practice nags that fire near-universally, so the indicator stays
-  // a signal. Colored by worst severity (danger red, else warning amber).
-  const auditDanger =
+  // a signal. The counters retain the raw transport names, but presentation
+  // follows the canonical Checks severity ladder (High, then Medium).
+  const auditHigh =
     typeof nodeData.auditDanger === "number" ? nodeData.auditDanger : 0;
-  const auditWarning =
+  const auditMedium =
     typeof nodeData.auditWarning === "number" ? nodeData.auditWarning : 0;
-  const auditTotal = auditDanger + auditWarning;
+  const auditTotal = auditHigh + auditMedium;
   const auditMessages = Array.isArray(nodeData.auditMessages)
     ? (nodeData.auditMessages as AuditBadgeMessage[])
     : [];
@@ -652,7 +654,7 @@ export const K8sResourceNode = memo(function K8sResourceNode({
                         clickHint={false}
                       />
                     ) : (
-                      `${auditTotal} audit ${auditTotal === 1 ? "finding" : "findings"}${auditDanger > 0 ? ` · ${auditDanger} danger` : ""}`
+                      `${auditTotal} audit ${auditTotal === 1 ? "finding" : "findings"}${auditHigh > 0 ? ` · ${auditHigh} high` : ""}${auditMedium > 0 ? ` · ${auditMedium} medium` : ""}`
                     )
                   }
                   position="right"
@@ -660,9 +662,9 @@ export const K8sResourceNode = memo(function K8sResourceNode({
                   <TriangleAlert
                     className={clsx(
                       "w-3 h-3 cursor-help",
-                      auditDanger > 0
-                        ? SEVERITY_TEXT.error
-                        : SEVERITY_TEXT.warning,
+                      auditHigh > 0
+                        ? SEVERITY_TEXT_CLASS.high
+                        : SEVERITY_TEXT_CLASS.medium,
                     )}
                   />
                 </Tooltip>

package/src/components/ui/FilterPill.tsx

@@ -22,7 +22,7 @@ import { Tooltip } from './Tooltip'
 // screen readers announce pressed/unpressed correctly. Optional tooltip
 // describes the toggle action ("Click to stop filtering by danger").
 
-export type FilterPillTone = 'neutral' | 'danger' | 'warn' | 'ok' | 'brand'
+export type FilterPillTone = 'neutral' | 'danger' | 'warn' | 'high' | 'medium' | 'ok' | 'brand'
 
 interface Props {
   label: ReactNode
@@ -49,6 +49,8 @@ const TONE_ACTIVE: Record<FilterPillTone, string> = {
   neutral: 'bg-theme-text-primary/10 border-theme-text-primary/25 text-theme-text-primary',
   danger:  'bg-red-500/15 border-red-500/40 text-red-700 dark:text-red-300',
   warn:    'bg-amber-500/15 border-amber-500/40 text-amber-800 dark:text-amber-300',
+  high:    'bg-orange-500/15 border-orange-500/40 text-orange-800 dark:text-orange-300',
+  medium:  'bg-yellow-500/15 border-yellow-500/40 text-yellow-800 dark:text-yellow-300',
   ok:      'bg-emerald-500/15 border-emerald-500/40 text-emerald-700 dark:text-emerald-300',
   brand:   'bg-[var(--color-brand-50)] border-[var(--color-radar-accent)] text-theme-text-primary dark:bg-[var(--color-brand-950)]',
 }

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 {