@skyhook-io/radar-app 1.16.2 → 1.17.0

package/src/components/timeline/TimelineList.tsx

@@ -3,13 +3,17 @@ import {
   SEVERITY_TEXT,
   TimelineList as TimelineListUI,
   eventsForApplication,
+  isTimelineProblem,
   type ActivityTypeFilter,
   type ActivityFilterKey,
   type AppMembershipIndex,
   type TimeRange,
   type Topology,
 } from '@skyhook-io/k8s-ui'
+import type { TimelineEvent } from '../../types'
 import { useTimelineSource } from '../../context/TimelineSource'
+import { isManagedTimelineEvent } from '../../api/timelineSource'
+import { TimelineRetentionBanner } from './TimelineRetentionNote'
 import { useHasLimitedAccess } from '../../contexts/CapabilitiesContext'
 import type { NavigateToResource } from '../../utils/navigation'
 import { AlertTriangle, RefreshCw } from 'lucide-react'
@@ -24,10 +28,33 @@ export type { ActivityTypeFilter, ActivityFilterKey }
 const LIST_FETCH_LIMIT = 2000
 const APP_SCOPED_FETCH_LIMIT = 10000
 
-// The source drops managed rows (Pod, ReplicaSet, Event, or any owned row) before
-// the kind filter runs, so an explicit kind selection must keep them or it lists nothing.
-export function listIncludesManaged(appScoped: boolean, kinds: string[]): boolean {
-  return appScoped || kinds.length > 0
+function isChildProblem(e: TimelineEvent): boolean {
+  return isManagedTimelineEvent(e) && isTimelineProblem(e)
+}
+
+const byNewest = (a: TimelineEvent, b: TimelineEvent) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+
+// Splits the list's rows into owner-level rows, problems on child resources,
+// and routine child activity, each newest first under its own `limit`. Separate
+// budgets keep the promises the toggle makes: a burst of owner rows can't crowd
+// out child problems, and showing routine activity only ever adds rows.
+export function splitRoutineActivity(allRows: TimelineEvent[], limit: number) {
+  const owners: TimelineEvent[] = []
+  const childProblems: TimelineEvent[] = []
+  const routine: TimelineEvent[] = []
+  for (const e of allRows) {
+    const bucket = !isManagedTimelineEvent(e) ? owners : isTimelineProblem(e) ? childProblems : routine
+    bucket.push(e)
+  }
+  const base = [...owners.slice(0, limit), ...childProblems.slice(0, limit)].sort(byNewest)
+  const shownRoutine = routine.slice(0, limit)
+  return {
+    withoutRoutine: base,
+    withRoutine: [...base, ...shownRoutine].sort(byNewest),
+    routine: shownRoutine,
+    truncated: owners.length > limit || childProblems.length > limit,
+    routineTruncated: routine.length > limit,
+  }
 }
 
 interface TimelineListProps {
@@ -39,6 +66,10 @@ interface TimelineListProps {
   initialTimeRange?: TimeRange
   showDeleted: boolean
   onShowDeletedChange: (showDeleted: boolean) => void
+  // Routine activity (normal steps of pods, replica sets and other child
+  // resources) is hidden unless the user opts in. Problems always show.
+  showRoutine: boolean
+  onShowRoutineChange: (showRoutine: boolean) => void
   // Shared filter state lifted to TimelineView so it survives the view switch.
   search: string
   onSearchChange: (value: string) => void
@@ -64,7 +95,7 @@ interface TimelineListProps {
   appScopeLoading?: boolean
 }
 
-export function TimelineList({ namespaces, onViewChange, currentView, onResourceClick, initialFilter, initialTimeRange, showDeleted, onShowDeletedChange, search, onSearchChange, activityFilter, onActivityFilterChange, kindFilter, onKindFilterChange, selectionWindow, onVisibleWindowChange, scrollToMs, focusedAppIndex, appScoped = false, topology, appScopeLoading = false }: TimelineListProps) {
+export function TimelineList({ namespaces, onViewChange, currentView, onResourceClick, initialFilter, initialTimeRange, showDeleted, onShowDeletedChange, showRoutine, onShowRoutineChange, search, onSearchChange, activityFilter, onActivityFilterChange, kindFilter, onKindFilterChange, selectionWindow, onVisibleWindowChange, scrollToMs, focusedAppIndex, appScoped = false, topology, appScopeLoading = false }: TimelineListProps) {
   const hasLimitedAccess = useHasLimitedAccess()
   const timelineSource = useTimelineSource()
   const [queryParams, setQueryParams] = useState<{ timeRange: TimeRange; kinds: string[] }>({
@@ -77,26 +108,36 @@ export function TimelineList({ namespaces, onViewChange, currentView, onResource
   }, [])
 
   const fetchLimit = appScoped ? APP_SCOPED_FETCH_LIMIT : LIST_FETCH_LIMIT
+  // The application-scoped list keeps every row: its app filter needs the pods.
+  const splitRows = !appScoped
+  // Uncapped when splitting: each part gets its own cap below. The rows come
+  // from the loaded ring, so this costs no extra fetch.
   const { data: fetchedEvents, isLoading, isError, error, refetch } = timelineSource.useEvents({
     namespaces,
     kinds: queryParams.kinds,
     timeRange: queryParams.timeRange,
     includeK8sEvents: true,
-    includeManaged: listIncludesManaged(appScoped, queryParams.kinds),
+    includeManaged: true,
     includeDeleted: showDeleted,
-    limit: fetchLimit,
+    limit: splitRows ? undefined : fetchLimit,
     fromMs: selectionWindow?.fromMs,
     toMs: selectionWindow?.toMs,
   })
+  const split = useMemo(
+    () => (splitRows && fetchedEvents ? splitRoutineActivity(fetchedEvents, fetchLimit) : undefined),
+    [splitRows, fetchedEvents, fetchLimit],
+  )
   const events = useMemo(() => {
-    const unscoped = fetchedEvents ?? []
+    const unscoped = split ? (showRoutine ? split.withRoutine : split.withoutRoutine) : fetchedEvents ?? []
     return appScoped
       ? focusedAppIndex
         ? eventsForApplication(unscoped, topology, focusedAppIndex)
         : []
       : unscoped
-  }, [appScoped, focusedAppIndex, topology, fetchedEvents])
-  const sourceTruncated = (fetchedEvents?.length ?? 0) >= fetchLimit
+  }, [appScoped, focusedAppIndex, topology, split, showRoutine, fetchedEvents])
+  const sourceTruncated = split
+    ? split.truncated || (showRoutine && split.routineTruncated)
+    : (fetchedEvents?.length ?? 0) >= fetchLimit
 
   // Full-screen error only when nothing is loaded; a failing background poll
   // with data on screen keeps rendering (data before error).
@@ -135,6 +176,8 @@ export function TimelineList({ namespaces, onViewChange, currentView, onResource
 
   return (
     <div className="flex h-full min-h-0 flex-1 flex-col">
+      {/* Under a scrubber TimelineView already shows the note above it. */}
+      {!selectionWindow && <TimelineRetentionBanner />}
       {staleNote}
       <div className="min-h-0 flex-1">
         <TimelineListUI
@@ -151,6 +194,10 @@ export function TimelineList({ namespaces, onViewChange, currentView, onResource
           hideRangeSelector={!!selectionWindow}
           showDeleted={showDeleted}
           onShowDeletedChange={onShowDeletedChange}
+          showRoutine={showRoutine}
+          onShowRoutineChange={split ? onShowRoutineChange : undefined}
+          routineEvents={split?.routine}
+          foldPerResource={split && !showRoutine ? isChildProblem : undefined}
           search={search}
           onSearchChange={onSearchChange}
           activityFilter={activityFilter}
@@ -163,7 +210,9 @@ export function TimelineList({ namespaces, onViewChange, currentView, onResource
           isTruncated={sourceTruncated}
           truncationMessage={appScoped && sourceTruncated
             ? `Showing application activity found in the newest ${fetchLimit.toLocaleString()} events in this range — narrow the query to see older activity`
-            : undefined}
+            : split && sourceTruncated
+              ? 'Some older activity in this range is not listed. Narrow the time range to see it.'
+              : undefined}
         />
       </div>
     </div>

package/src/components/timeline/TimelineRetentionNote.test.tsx

@@ -0,0 +1,49 @@
+import { describe, expect, it, vi } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
+import type { TimelineEventsResult, TimelineSource } from '../../api/timelineSource'
+
+// The list reads its source from context; hand it a fixed empty result so the
+// test is about the note row alone.
+const eventsResult: TimelineEventsResult = { data: [], isLoading: false, isFetching: false, isError: false, refetch: () => {} }
+const fakeSource: TimelineSource = {
+  capabilities: { mode: 'local', ringLimit: 10_000 },
+  useEvents: () => eventsResult,
+}
+vi.mock('../../context/TimelineSource', () => ({ useTimelineSource: () => fakeSource }))
+
+import { TimelineRetentionNoteProvider } from '../../context/TimelineCustomization'
+import { TimelineList } from './TimelineList'
+
+describe('TimelineList history-limit row', () => {
+  const props = {
+    namespaces: [],
+    showDeleted: false,
+    onShowDeletedChange: () => {},
+    showRoutine: false,
+    onShowRoutineChange: () => {},
+    search: '',
+    onSearchChange: () => {},
+    activityFilter: [],
+    onActivityFilterChange: () => {},
+    kindFilter: [],
+    onKindFilterChange: () => {},
+  }
+  const withNote = (node: React.ReactNode) => (
+    <TimelineRetentionNoteProvider value={<a href="/plans">Host note</a>}>{node}</TimelineRetentionNoteProvider>
+  )
+
+  it('shows the host note in its own row', () => {
+    const html = renderToStaticMarkup(withNote(<TimelineList {...props} />))
+    expect(html).toContain('data-testid="timeline-retention-note"')
+    expect(html).toContain('<a href="/plans">Host note</a>')
+  })
+
+  it('renders no row without a host note (standalone Radar)', () => {
+    expect(renderToStaticMarkup(<TimelineList {...props} />)).not.toContain('timeline-retention-note')
+  })
+
+  it('leaves the note to the view when a scrubber owns the range', () => {
+    const html = renderToStaticMarkup(withNote(<TimelineList {...props} selectionWindow={{ fromMs: 0, toMs: 1 }} />))
+    expect(html).not.toContain('timeline-retention-note')
+  })
+})

package/src/components/timeline/TimelineRetentionNote.tsx

@@ -0,0 +1,20 @@
+import { Clock } from 'lucide-react'
+import { useTimelineRetentionNote } from '../../context/TimelineCustomization'
+
+// The host's history-limit note as a full-width row above the timeline,
+// beside the other history-completeness rows (truncation, stale live
+// updates). Informational, not a warning: nothing is broken, the server
+// serves this much. Renders nothing when the host has no note.
+export function TimelineRetentionBanner() {
+  const note = useTimelineRetentionNote()
+  if (!note) return null
+  return (
+    <div
+      className="flex flex-wrap items-center gap-x-1.5 gap-y-1 border-b border-theme-border px-4 py-1.5 text-xs text-theme-text-tertiary"
+      data-testid="timeline-retention-note"
+    >
+      <Clock className="h-3.5 w-3.5 shrink-0" />
+      {note}
+    </div>
+  )
+}

package/src/components/timeline/TimelineView.tsx

@@ -25,6 +25,7 @@ import type { ActivityFilterKey } from './TimelineList'
 import { TimelineSwimlanes } from './TimelineSwimlanes'
 import { RetainedTimelineScrubber, extendSelection, type ScrubberDomainInfo } from './RetainedTimelineScrubber'
 import { LocalTimelineScrubber } from './LocalTimelineScrubber'
+import { TimelineRetentionBanner } from './TimelineRetentionNote'
 import { useTopology, useApplications } from '../../api/client'
 import { useTimelineSource } from '../../context/TimelineSource'
 import type { Topology } from '../../types'
@@ -125,6 +126,7 @@ export interface PersistedTimelineState {
   viewMode: TimelineViewMode
   mode: TimelineMode
   showDeleted: boolean
+  showRoutine: boolean
   pinnedOnly: boolean
   search: string
   activityFilter: ActivityFilterKey[]
@@ -237,6 +239,7 @@ export function writeTimelineParams(
   set('activity', s.activityFilter.length ? s.activityFilter.join(',') : null)
   set('kinds', s.kindFilter.length ? s.kindFilter.join(',') : null)
   set('deleted', s.showDeleted ? null : '0')
+  set('routine', s.showRoutine ? '1' : null)
   set('pinnedOnly', s.pinnedOnly ? '1' : null)
   set('q', s.search.length ? s.search : null)
   set('grouping', s.grouping !== DEFAULT_GROUPING ? s.grouping : null)
@@ -309,6 +312,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
   // and so the fetch can exclude deletes at the source rather than only hiding
   // them client-side.
   const [showDeleted, setShowDeleted] = useState(() => searchParams.get('deleted') !== '0')
+  const [showRoutine, setShowRoutine] = useState(() => searchParams.get('routine') === '1')
   // ?pinnedOnly=1 is inert without pins: honoring it with no stored pins would
   // arm a filter that hides everything. Gate the read on stored pins so the param
   // can never arm on its own — ordering-proof, independent of when the empty-pins
@@ -634,6 +638,8 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     setMode((prev) => (timeModeEqual(prev, nextMode) ? prev : nextMode))
     const nextDeleted = sp.get('deleted') !== '0'
     setShowDeleted((prev) => (prev === nextDeleted ? prev : nextDeleted))
+    const nextRoutine = sp.get('routine') === '1'
+    setShowRoutine((prev) => (prev === nextRoutine ? prev : nextRoutine))
     // Same guard as the lazy init: the param can only arm the filter when pins
     // exist, so a mount that runs this after the empty-pins reset can't re-arm it.
     const nextPinnedOnly = sp.get('pinnedOnly') === '1' && pinnedLanes.length > 0
@@ -658,7 +664,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     const current = searchParamsRef.current
     const target = writeTimelineParams(
       current,
-      { viewMode, mode, showDeleted, pinnedOnly, search: debouncedSearch, activityFilter, kindFilter, grouping, sort, selectedEventId },
+      { viewMode, mode, showDeleted, showRoutine, pinnedOnly, search: debouncedSearch, activityFilter, kindFilter, grouping, sort, selectedEventId },
       { isRetained: isRetained || isLocal, requiresNamespaceFilter: scopeRequiresNamespaceFilter },
     )
     const targetStr = target.toString()
@@ -672,7 +678,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     const replace = !didMountUrlSyncRef.current || onlyHighFreqDiffer(currentStr, targetStr)
     didMountUrlSyncRef.current = true
     setSearchParamsRef.current(target, { replace })
-  }, [viewMode, mode, showDeleted, pinnedOnly, debouncedSearch, activityFilter, kindFilter, grouping, sort, selectedEventId, isRetained, isLocal, scopeRequiresNamespaceFilter])
+  }, [viewMode, mode, showDeleted, showRoutine, pinnedOnly, debouncedSearch, activityFilter, kindFilter, grouping, sort, selectedEventId, isRetained, isLocal, scopeRequiresNamespaceFilter])
 
   // Fetch all activity - zoom controls what's visible in the UI. This ring feeds
   // the swimlanes and the local strip's histogram, so it also runs in list mode
@@ -824,11 +830,16 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
   // The scrubber sits above whichever view is active, sharing one selection
   // across list + swimlane. Retained draws its server-overview strip; local
   // derives the strip client-side from the loaded ring and omits the gap band.
+  // The host's note about how far back history goes: without it the stretch
+  // before the limit reads as "nothing happened". Without a scrubber the list
+  // view shows it itself, above its own range selector.
+  const retentionBanner = showScrubber || viewMode === 'swimlane' ? <TimelineRetentionBanner /> : null
   const wrap = (node: ReactNode): ReactNode => {
     if (!showScrubber) {
       return (
         <div className="flex-1 flex flex-col min-h-0">
           {appScopeBar}
+          {retentionBanner}
           <div className="flex-1 flex flex-col min-h-0">{node}</div>
         </div>
       )
@@ -845,6 +856,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     return (
       <div className="flex-1 flex flex-col min-h-0">
         {appScopeBar}
+        {retentionBanner}
         {/* A row-capped ring load means the OLDEST part of the retention
             window is not loaded — say so, or an old selection reads as
             "nothing happened back then". */}
@@ -1032,6 +1044,8 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
       initialTimeRange={initialTimeRange}
       showDeleted={showDeleted}
       onShowDeletedChange={setShowDeleted}
+      showRoutine={showRoutine}
+      onShowRoutineChange={setShowRoutine}
       search={search}
       onSearchChange={setSearch}
       activityFilter={activityFilter}

package/src/components/timeline/TimelineView.urlparams.test.ts

@@ -75,6 +75,7 @@ function parseState(
     viewMode,
     mode: parseTimeMode(params, opts.isRetained, opts.maxRangeDays),
     showDeleted: params.get('deleted') !== '0',
+    showRoutine: params.get('routine') === '1',
     pinnedOnly: params.get('pinnedOnly') === '1' && opts.hasPins,
     search: params.get('q') ?? '',
     activityFilter,
@@ -89,6 +90,7 @@ const defaultState: PersistedTimelineState = {
   viewMode: DEFAULT_VIEW,
   mode: live(DEFAULT_LIVE_WIDTH_MS),
   showDeleted: true,
+  showRoutine: false,
   pinnedOnly: false,
   search: '',
   activityFilter: [],
@@ -158,6 +160,7 @@ describe('writeTimelineParams', () => {
       viewMode: 'list',
       mode: live(6 * 60 * 60 * 1000),
       showDeleted: false,
+      showRoutine: true,
       pinnedOnly: true,
       search: 'nginx',
       activityFilter: ['warnings', 'unhealthy'],
@@ -175,6 +178,7 @@ describe('writeTimelineParams', () => {
       ['kinds', 'Pod,Deployment'],
       ['pinnedOnly', '1'],
       ['q', 'nginx'],
+      ['routine', '1'],
       ['sort', 'recent'],
       ['view', 'list'],
       ['window', '21600000'],
@@ -265,6 +269,7 @@ describe('parse(write(state)) round-trip', () => {
       viewMode: 'list',
       mode: live(6 * 60 * 60 * 1000),
       showDeleted: false,
+      showRoutine: true,
       pinnedOnly: true,
       search: 'nginx',
       activityFilter: ['warnings', 'unhealthy'],
@@ -338,6 +343,7 @@ describe('onlyHighFreqDiffer (history replace vs push)', () => {
     expect(onlyHighFreqDiffer('', 'activity=warnings')).toBe(false)
     expect(onlyHighFreqDiffer('', 'kinds=Pod')).toBe(false)
     expect(onlyHighFreqDiffer('', 'deleted=0')).toBe(false)
+    expect(onlyHighFreqDiffer('', 'routine=1')).toBe(false)
     expect(onlyHighFreqDiffer('', 'pinnedOnly=1')).toBe(false)
   })
 

package/src/components/traffic/TrafficConnectionsTable.tsx

@@ -0,0 +1,144 @@
+import { useMemo } from 'react'
+import { Virtuoso } from 'react-virtuoso'
+import { clsx } from 'clsx'
+import { ArrowRight, Crosshair, Minus } from 'lucide-react'
+import type { AggregatedFlow } from '../../types'
+import { SEVERITY_TEXT } from '@skyhook-io/k8s-ui/utils/badge-colors'
+import { Tooltip } from '../ui/Tooltip'
+import type { TrafficGraphSelection } from './TrafficGraph'
+import {
+  connectionRows, displayVolume, edgesOnPort, flowDrops, flowErrors, formatRate, graphEndpointId, hasStatusData, isExternalKind,
+  type GraphFlow, type TrafficFocus,
+} from './trafficFilters'
+
+interface TrafficConnectionsTableProps {
+  flows: AggregatedFlow[]
+  isRateBased: boolean
+  selection: TrafficGraphSelection | null
+  onSelect: (selection: TrafficGraphSelection | null) => void
+  onFocus: (focus: TrafficFocus) => void
+  /** The focused endpoint, whose name is not offered as a focus again. */
+  focusedId?: string
+}
+
+const GRID = 'grid grid-cols-[minmax(0,1fr)_1rem_minmax(0,1fr)_6.5rem_5rem_4.5rem_4.5rem] items-center gap-x-3'
+// Without HTTP status anywhere in view (plain TCP) a 5xx column would read as
+// "no errors" rather than "not measured".
+const GRID_NO_STATUS = 'grid grid-cols-[minmax(0,1fr)_1rem_minmax(0,1fr)_6.5rem_5rem_4.5rem] items-center gap-x-3'
+
+function rowSelection(flow: AggregatedFlow): TrafficGraphSelection {
+  return {
+    type: 'edge',
+    sourceId: graphEndpointId(flow.source),
+    destId: graphEndpointId(flow.destination),
+    port: flow.port,
+    directionUnknown: !!flow.directionUnknown,
+  }
+}
+
+function selectedRows(rows: GraphFlow[], selection: TrafficGraphSelection | null): Set<GraphFlow> {
+  if (selection?.type !== 'edge' || selection.port === undefined) return new Set()
+  const between = rows.filter(flow =>
+    graphEndpointId(flow.source) === selection.sourceId && graphEndpointId(flow.destination) === selection.destId &&
+    !!flow.directionUnknown === !!selection.directionUnknown)
+  return new Set(edgesOnPort(between, f => f, selection.port))
+}
+
+/**
+ * The view's connections as rows, for when there are too many to draw. Where
+ * the problems are comes first. Selecting a row loads its records into the
+ * flow list, as selecting an edge does; a name narrows the view to it.
+ */
+export function TrafficConnectionsTable({ flows, isRateBased, selection, onSelect, onFocus, focusedId }: TrafficConnectionsTableProps) {
+  const rows = useMemo(() => connectionRows(flows), [flows])
+  const selected = useMemo(() => selectedRows(rows, selection), [rows, selection])
+  const showStatus = useMemo(() => flows.some(hasStatusData), [flows])
+  const grid = showStatus ? GRID : GRID_NO_STATUS
+
+  const endpoint = (e: AggregatedFlow['source']) => {
+    const id = graphEndpointId(e)
+    const label = (
+      <span className="min-w-0">
+        <span className="block truncate text-theme-text-primary">{e.name}</span>
+        {e.namespace && <span className="block truncate text-[10px] text-theme-text-tertiary">{e.namespace}</span>}
+      </span>
+    )
+    if (id === focusedId || e.kind === 'Internet') return <span className="flex min-w-0 items-center">{label}</span>
+    return (
+      <Tooltip content={`Focus on ${e.name}`} wrapperClassName="min-w-0">
+        <button
+          type="button"
+          onClick={ev => {
+            ev.stopPropagation()
+            onFocus({ namespace: e.namespace || undefined, name: e.name })
+          }}
+          className="group flex min-w-0 max-w-full items-center gap-1 text-left hover:underline"
+        >
+          {label}
+          <Crosshair className="h-3 w-3 shrink-0 opacity-0 group-hover:opacity-70" />
+        </button>
+      </Tooltip>
+    )
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <div className={clsx(grid, 'px-3 py-1.5 text-[10px] font-medium uppercase tracking-wide text-theme-text-tertiary border-b border-theme-border')}>
+        <span>Source</span>
+        <span />
+        <span>Destination</span>
+        <span>Port</span>
+        <span className="text-right">{isRateBased ? 'Req/s' : 'Conns'}</span>
+        {showStatus && <span className="text-right">5xx</span>}
+        <span className="text-right">Dropped</span>
+      </div>
+      <Virtuoso
+        className="flex-1"
+        data={rows}
+        computeItemKey={(_, flow) => `${graphEndpointId(flow.source)}->${graphEndpointId(flow.destination)}:${flow.port}${flow.directionUnknown ? ':u' : ''}`}
+        itemContent={(_, flow) => {
+          const sel = rowSelection(flow)
+          const isSelected = selected.has(flow)
+          const errors = flowErrors(flow)
+          const drops = flowDrops(flow)
+          return (
+            <div
+              role="row"
+              aria-selected={isSelected}
+              onClick={() => onSelect(isSelected ? null : sel)}
+              className={clsx(
+                grid,
+                'cursor-pointer px-3 py-1.5 text-xs border-b border-theme-border/50 transition-colors',
+                isSelected ? 'bg-theme-elevated' : 'hover:bg-theme-hover',
+              )}
+            >
+              {endpoint(flow.source)}
+              {flow.directionUnknown
+                ? <Tooltip content="Direction unknown"><Minus className="h-3 w-3 text-theme-text-tertiary" /></Tooltip>
+                : <ArrowRight className="h-3 w-3 text-theme-text-tertiary" />}
+              {endpoint(flow.destination)}
+              <span className="truncate text-theme-text-secondary tabular-nums">
+                {flow.port > 0 ? flow.port : '—'}
+                {(flow.l7Protocol || flow.protocol) && (
+                  <span className="ml-1 text-theme-text-tertiary">{flow.l7Protocol || flow.protocol.toUpperCase()}</span>
+                )}
+                {isExternalKind(flow.destination.kind) && <span className="ml-1 text-theme-text-tertiary">ext</span>}
+              </span>
+              <span className="text-right tabular-nums text-theme-text-secondary">
+                {isRateBased ? formatRate(displayVolume(flow, true)) : flow.connections.toLocaleString()}
+              </span>
+              {showStatus && (
+                <span className={clsx('text-right tabular-nums', errors > 0 ? clsx(SEVERITY_TEXT.error, 'font-medium') : 'text-theme-text-tertiary')}>
+                  {errors > 0 ? (isRateBased ? formatRate(errors) : errors.toLocaleString()) : hasStatusData(flow) ? '0' : '—'}
+                </span>
+              )}
+              <span className={clsx('text-right tabular-nums', drops > 0 ? clsx(SEVERITY_TEXT.error, 'font-medium') : 'text-theme-text-tertiary')}>
+                {drops > 0 ? drops.toLocaleString() : '—'}
+              </span>
+            </div>
+          )
+        }}
+      />
+    </div>
+  )
+}

package/src/components/traffic/TrafficFilterSidebar.tsx

@@ -10,6 +10,7 @@ import {
   Filter,
   Info,
   Puzzle,
+  Boxes,
 } from 'lucide-react'
 import { clsx } from 'clsx'
 import { SEVERITY_BADGE } from '@skyhook-io/k8s-ui/utils/badge-colors'
@@ -41,6 +42,8 @@ interface TrafficFilterSidebarProps {
   setShowNamespaceGroups: (v: boolean) => void
   collapseInternet: boolean
   setCollapseInternet: (v: boolean) => void
+  groupByWorkload: boolean
+  setGroupByWorkload: (v: boolean) => void
   addonMode: AddonMode
   setAddonMode: (v: AddonMode) => void
 
@@ -83,6 +86,9 @@ interface TrafficFilterSidebarProps {
   namespaces: Array<{ name: string; nodeCount: number }>
   hiddenNamespaces: Set<string>
   onToggleNamespace: (ns: string) => void
+  /** Set while the view is focused on an endpoint: the namespace choices are
+   *  kept but not applied, so a neighbor in a hidden namespace still shows. */
+  namespacesPausedFor?: string
 
 }
 
@@ -150,6 +156,8 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
   setShowNamespaceGroups,
   collapseInternet,
   setCollapseInternet,
+  groupByWorkload,
+  setGroupByWorkload,
   addonMode,
   setAddonMode,
   aggregateExternal,
@@ -177,6 +185,7 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
   namespaces,
   hiddenNamespaces,
   onToggleNamespace,
+  namespacesPausedFor,
 }: TrafficFilterSidebarProps) {
   const [namespacesExpanded, setNamespacesExpanded] = useState(false)
 
@@ -298,6 +307,13 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
               onToggle={() => setCollapseInternet(!collapseInternet)}
               icon={Globe}
             />
+            <ToggleOption
+              label="Group by Workload"
+              description="Draw a workload's pods as one node. Off, each pod gets its own node"
+              enabled={groupByWorkload}
+              onToggle={() => setGroupByWorkload(!groupByWorkload)}
+              icon={Boxes}
+            />
           </div>
         </div>
 
@@ -494,7 +510,12 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
                 </button>
               </div>
             </div>
-            <div className="space-y-0.5">
+            {namespacesPausedFor && (
+              <p className="mb-1.5 text-[10px] text-theme-text-tertiary">
+                Paused while focused on {namespacesPausedFor}: its neighbors show whatever their namespace.
+              </p>
+            )}
+            <div className={clsx('space-y-0.5', namespacesPausedFor && 'opacity-50 pointer-events-none')} aria-disabled={!!namespacesPausedFor}>
               {visibleNamespaces.map(({ name, nodeCount }) => {
                 const isHidden = hiddenNamespaces.has(name)
                 return (

package/src/components/traffic/TrafficFlowListContext.tsx

@@ -7,10 +7,16 @@ interface TrafficFlowListContextValue {
   responsesCallerOriented: boolean
   graphSelection: TrafficGraphSelection | null
   clearSelection: () => void
+  /** The records for the current selection are still being fetched. */
+  loading?: boolean
+  /** Says which records the list holds when it is not all of them. */
+  note?: string
 }
 
+const emptyValue: TrafficFlowListContextValue = { flows: [], responsesCallerOriented: false, graphSelection: null, clearSelection: () => {} }
+
 // Module-level store — TrafficView writes, dock tab reads.
-let currentValue: TrafficFlowListContextValue = { flows: [], responsesCallerOriented: false, graphSelection: null, clearSelection: () => {} }
+let currentValue: TrafficFlowListContextValue = emptyValue
 const listeners = new Set<() => void>()
 
 function setValue(val: TrafficFlowListContextValue) {
@@ -53,15 +59,17 @@ export function TrafficFlowListProvider({
   responsesCallerOriented,
   graphSelection,
   clearSelection,
+  loading,
+  note,
   children,
 }: TrafficFlowListContextValue & { children: ReactNode }) {
   useEffect(() => {
-    setValue({ flows, responsesCallerOriented, graphSelection, clearSelection })
-  }, [flows, responsesCallerOriented, graphSelection, clearSelection])
+    setValue({ flows, responsesCallerOriented, graphSelection, clearSelection, loading, note })
+  }, [flows, responsesCallerOriented, graphSelection, clearSelection, loading, note])
 
   useEffect(() => {
     return () => {
-      setValue({ flows: [], responsesCallerOriented: false, graphSelection: null, clearSelection: () => {} })
+      setValue(emptyValue)
       setFlowSearch('')
     }
   }, [])