@skyhook-io/radar-app 1.16.3 → 1.17.1

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

@@ -1,7 +1,7 @@
 import { useState, useMemo, useRef, useCallback, useEffect } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import type { ReactNode } from 'react'
-import { Network, AlertTriangle, RefreshCw, Boxes, X } from 'lucide-react'
+import { Network, AlertTriangle, Boxes, X } from 'lucide-react'
 import {
   clampLensToSelection,
   deriveLiveSelection,
@@ -21,10 +21,14 @@ import {
   useDebouncedValue,
 } from '@skyhook-io/k8s-ui'
 import { TimelineList } from './TimelineList'
+import { TimelineLoadError, TimelineStaleNote } from './TimelineLoadError'
+import { ViewModeToggle } from './ViewModeToggle'
+import { useStickyError } from './useStickyError'
 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'
@@ -274,6 +278,7 @@ interface TimelineViewProps {
   requiresNamespaceFilter?: boolean
   availableNamespaces?: { name: string }[]
   onNamespaceSelect?: (ns: string) => void
+  onOpenDiagnostics?: () => void
 }
 
 export function resolveApplicationTimelineScope(searchParams: URLSearchParams, namespaces: string[]) {
@@ -292,7 +297,7 @@ export function resolveApplicationTimelineScope(searchParams: URLSearchParams, n
   }
 }
 
-export function TimelineView({ namespaces, onResourceClick, initialViewMode, initialFilter, initialTimeRange, requiresNamespaceFilter, availableNamespaces, onNamespaceSelect }: TimelineViewProps) {
+export function TimelineView({ namespaces, onResourceClick, initialViewMode, initialFilter, initialTimeRange, requiresNamespaceFilter, availableNamespaces, onNamespaceSelect, onOpenDiagnostics }: TimelineViewProps) {
   // URL is the source of truth for every control below (deep-linkable +
   // back/forward-restorable). Read on mount, written on user change.
   const [searchParams, setSearchParams] = useSearchParams()
@@ -682,7 +687,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
   // 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
   // when that strip is shown; the list itself fetches its own 2000.
-  const { data: activity, isLoading, isError, error, refetch, truncated: ringTruncated } = timelineSource.useEvents({
+  const { data: activity, isLoading, isFetching, isError, error, refetch, truncated: ringTruncated } = timelineSource.useEvents({
     namespaces: timelineNamespaces,
     timeRange: 'all',
     includeK8sEvents: true,
@@ -700,6 +705,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     fromMs: isRetained ? selection.fromMs : undefined,
     toMs: isRetained ? selection.toMs : undefined,
   })
+  const loadError = useStickyError(error, activity != null)
 
   // Topology powers both swimlane hierarchy and application-scoped attribution.
   const { data: rawTopology } = useTopology(timelineNamespaces, 'resources', {
@@ -829,11 +835,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>
       )
@@ -850,6 +861,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". */}
@@ -862,13 +874,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
         {/* Failing background polls with a loaded ring: keep the data, say
             it's going stale. The full-screen error is reserved for no-data. */}
         {isError && activity && (
-          <div className="flex items-center gap-1.5 border-b border-theme-border px-4 py-1.5 text-xs text-theme-text-tertiary">
-            <AlertTriangle className={`h-3.5 w-3.5 shrink-0 ${SEVERITY_TEXT.warning}`} />
-            Live updates are failing — the timeline may be stale.
-            <button type="button" onClick={() => refetch()} className="underline hover:text-theme-text-primary">
-              Retry now
-            </button>
-          </div>
+          <TimelineStaleNote error={error} subject="timeline" onRetry={() => refetch()} />
         )}
         {isRetained ? (
           <RetainedTimelineScrubber
@@ -960,29 +966,23 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     // a load failure. With a loaded ring on screen, a failing background poll
     // must NOT blank it (gate on data before error); the stale-data banner
     // below carries the warning instead.
-    if (isError && !activity) {
+    if (loadError && !activity) {
       // Surface the server's own message — a generic "failed to load" would
       // swallow whatever the hub said. "Try again" is a full resync: the
       // retained source drops its delta cursor and reloads the whole ring.
-      const detail = error?.message?.trim()
       return wrap(
         <div className="flex-1 flex flex-col">
           <div className="flex items-center justify-between px-4 py-2 border-b border-theme-border">
             <div />
             <ViewModeToggle viewMode={viewMode} onViewModeChange={setViewMode} />
           </div>
-          <div className="flex-1 flex flex-col items-center justify-center text-theme-text-tertiary gap-3 px-6">
-            <AlertTriangle className="w-10 h-10 text-amber-400/70" />
-            <p className="text-base">Failed to load timeline data</p>
-            {detail && <p className="max-w-md text-center text-sm text-theme-text-tertiary">{detail}</p>}
-            <button
-              onClick={() => refetch()}
-              className="flex items-center gap-2 px-3 py-1.5 text-sm bg-theme-elevated border border-theme-border-light rounded-lg hover:bg-theme-hover transition-colors"
-            >
-              <RefreshCw className="w-3.5 h-3.5" />
-              Try again
-            </button>
-          </div>
+          <TimelineLoadError
+            className="flex-1"
+            error={loadError}
+            retrying={isFetching}
+            onRetry={() => refetch()}
+            onOpenDiagnostics={onOpenDiagnostics}
+          />
         </div>
       )
     }
@@ -1057,27 +1057,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
       appScoped={Boolean(focusedAppKey)}
       topology={stableTopology}
       appScopeLoading={focusedAppLoading}
+      onOpenDiagnostics={onOpenDiagnostics}
     />
   )
 }
-
-function ViewModeToggle({ viewMode, onViewModeChange }: { viewMode: TimelineViewMode, onViewModeChange: (mode: TimelineViewMode) => void }) {
-  return (
-    <div className="flex items-center gap-1 bg-theme-base rounded-lg p-0.5 border border-theme-border">
-      <button
-        type="button"
-        onClick={() => onViewModeChange('list')}
-        className={`px-2 py-1 text-xs rounded-md transition-colors ${viewMode === 'list' ? 'bg-theme-surface text-theme-text-primary shadow-sm' : 'text-theme-text-secondary hover:text-theme-text-primary'}`}
-      >
-        List
-      </button>
-      <button
-        type="button"
-        onClick={() => onViewModeChange('swimlane')}
-        className={`px-2 py-1 text-xs rounded-md transition-colors ${viewMode === 'swimlane' ? 'bg-theme-surface text-theme-text-primary shadow-sm' : 'text-theme-text-secondary hover:text-theme-text-primary'}`}
-      >
-        Swimlane
-      </button>
-    </div>
-  )
-}

package/src/components/timeline/ViewModeToggle.tsx

@@ -0,0 +1,20 @@
+export function ViewModeToggle({ viewMode, onViewModeChange }: { viewMode: 'list' | 'swimlane', onViewModeChange: (mode: 'list' | 'swimlane') => void }) {
+  return (
+    <div className="flex items-center gap-1 bg-theme-base rounded-lg p-0.5 border border-theme-border">
+      <button
+        type="button"
+        onClick={() => onViewModeChange('list')}
+        className={`px-2 py-1 text-xs rounded-md transition-colors ${viewMode === 'list' ? 'bg-theme-surface text-theme-text-primary shadow-sm' : 'text-theme-text-secondary hover:text-theme-text-primary'}`}
+      >
+        List
+      </button>
+      <button
+        type="button"
+        onClick={() => onViewModeChange('swimlane')}
+        className={`px-2 py-1 text-xs rounded-md transition-colors ${viewMode === 'swimlane' ? 'bg-theme-surface text-theme-text-primary shadow-sm' : 'text-theme-text-secondary hover:text-theme-text-primary'}`}
+      >
+        Swimlane
+      </button>
+    </div>
+  )
+}

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

@@ -0,0 +1,47 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { useStickyError } from './useStickyError'
+
+const seen: (Error | null)[] = []
+function Harness({ error, hasData }: { error: Error | null; hasData: boolean }) {
+  seen.push(useStickyError(error, hasData))
+  return null
+}
+
+let root: Root
+let container: HTMLDivElement
+beforeEach(() => {
+  seen.length = 0
+  container = document.createElement('div')
+  root = createRoot(container)
+})
+afterEach(() => act(() => root.unmount()))
+const render = (error: Error | null, hasData: boolean) => act(() => root.render(<Harness error={error} hasData={hasData} />))
+const last = () => seen[seen.length - 1]
+
+describe('useStickyError', () => {
+  it('keeps the error while a refetch with no data clears it', () => {
+    const down = new Error('database down')
+    render(down, false)
+    expect(last()).toBe(down)
+    render(null, false)
+    expect(last()).toBe(down)
+  })
+
+  it('drops the error once data arrives', () => {
+    render(new Error('database down'), false)
+    render(null, true)
+    expect(last()).toBeNull()
+  })
+
+  // A page with data on screen whose poll starts failing: the hook must settle,
+  // not bounce between the error and null until React gives up.
+  it('settles when an error arrives while data is on screen', () => {
+    render(null, true)
+    render(new Error('database down'), true)
+    expect(last()).toBeNull()
+    expect(seen.length).toBeLessThan(10)
+  })
+})

package/src/components/timeline/useStickyError.ts

@@ -0,0 +1,15 @@
+import { useState } from 'react'
+
+// React Query clears the error of a query that has never loaded each time it
+// refetches, so a failure that persists across polls would flicker to a loader
+// on every interval. This keeps the last error on screen until data arrives.
+// Once data is loaded it returns null: a failing poll then belongs to the
+// stale-data banner, not the full-screen error.
+export function useStickyError(error: Error | null | undefined, hasData: boolean): Error | null {
+  const [shown, setShown] = useState<Error | null>(null)
+  const next = hasData ? null : (error ?? shown)
+  // Adjusting state during render: converges in one extra pass because `next`
+  // is a fixed point once stored.
+  if (next !== shown) setShown(next)
+  return next
+}

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('')
     }
   }, [])