@skyhook-io/radar-app 1.16.2 → 1.17.0

package/src/components/resources/ResourcesView.tsx

@@ -10,6 +10,8 @@ import { useAPIResources } from '../../api/apiResources'
 import { useConnection } from '../../context/ConnectionContext'
 import { initNavigationMap, getSecretStoreProviderType } from '@skyhook-io/k8s-ui'
 import { usePinnedKinds } from '../../hooks/useFavorites'
+import { useResourceCounts } from '../../hooks/useResourceCounts'
+import { useCNPGSidebarWorkspace } from '../cnpg/useCNPGSidebarWorkspace'
 import { useOpenLogs, useOpenWorkloadLogs } from '../dock'
 import {
   canBulkRestartKind,
@@ -26,13 +28,6 @@ import { apiVersionToGroup, kindToPluralWithGroup, type NavigateToResource } fro
 import { CreateResourceDialog } from '../shared/CreateResourceDialog'
 import { getSkeletonYaml } from '../../utils/skeleton-yaml'
 
-interface ResourceCountsResponse {
-  counts: Record<string, number>
-  forbidden?: string[]
-  reasons?: Record<string, string>
-  unavailable?: string[]
-}
-
 interface ResourcesViewProps {
   namespaces: string[]
   selectedResource?: SelectedResource | null
@@ -114,6 +109,8 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
     if (apiResources) initNavigationMap(apiResources)
   }, [apiResources])
 
+  const cnpgSidebarWorkspace = useCNPGSidebarWorkspace({ apiResources, namespaces })
+
   // Track the selected kind from the k8s-ui component
   const [selectedKind, setSelectedKind] = useState<SelectedKindInfo>(null)
   const workloadWrites = namespaces.length === 0
@@ -126,37 +123,7 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
 
   // Lightweight resource counts for sidebar badges (~2KB instead of ~608MB)
   const namespacesParam = namespaces.join(',')
-  const { data: countsData, isError: countsIsError } = useQuery({
-    queryKey: ['resource-counts', namespacesParam],
-    queryFn: async () => {
-      const params = new URLSearchParams()
-      if (namespaces.length > 0) params.set('namespaces', namespacesParam)
-      const startedAt = performance.now()
-      debugNamespaceLog('resources:counts-fetch-start', { namespaces, params: params.toString() })
-      try {
-        return await fetchJSON<ResourceCountsResponse>(`/resource-counts?${params}`)
-      } finally {
-        debugNamespaceLog('resources:counts-fetch-end', {
-          namespaces,
-          params: params.toString(),
-          durationMs: Math.round(performance.now() - startedAt),
-        })
-      }
-    },
-    staleTime: 10000,
-    // SSE invalidation isn't running while connecting, and mid-sync counts
-    // are what unlatch guarded kinds as their informers finish — poll fast
-    // during the shell, settle to the safety net once connected.
-    refetchInterval: connection.state === 'connecting' ? 3000 : 60000,
-    // During the first seconds of the progressive shell the endpoint 503s
-    // (cluster_connecting) until the mid-sync cache handle exists; keep the
-    // query pending rather than parking it in error state, which would
-    // unlatch the large-list guard at the connected flip.
-    retry: (failureCount: number, error: Error) =>
-      isStillLoadingError(error) ? true : failureCount < 3,
-    retryDelay: (failureCount: number, error: Error) =>
-      isStillLoadingError(error) ? 2000 : Math.min(1000 * 2 ** failureCount, 30000),
-  })
+  const { data: countsData, isError: countsIsError } = useResourceCounts(namespaces)
 
   // Determine if selected kind is a CRD (only CRDs should send ?group= to backend)
   const isSelectedCrd = useMemo(() => {
@@ -440,6 +407,7 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       connectionState={connection.state === 'connecting' && connection.syncStatus ? 'syncing' : connection.state}
       largeListGuard={largeListGuard}
       onSelectedKindChange={setSelectedKind}
+      sidebarCategoryWorkspaces={cnpgSidebarWorkspace}
       topPodMetrics={topPodMetrics}
       topNodeMetrics={topNodeMetrics}
       certExpiry={certExpiry}

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

@@ -7,6 +7,7 @@ import { formatAge } from '@skyhook-io/k8s-ui/components/resources/resource-util
 import { isForbiddenError } from '../../../api/client'
 import { isKyvernoMutateExistingEnabled } from '@skyhook-io/k8s-ui/components/resources/resource-utils-kyverno-modern'
 import { usePolicyQueued } from '../../../api/policy'
+import { TimeValue } from '@skyhook-io/k8s-ui/components/ui/ScheduleValue'
 
 /** A request sitting this long is not mid-flight. Kyverno retries on every
  *  reconcile, so past this point a backlog grows rather than drains. */
@@ -160,7 +161,7 @@ export function KyvernoPolicyQueued({ data }: { data: any }) {
             />
           ))}
           {oldestPending && (
-            <Property label="Oldest Pending" value={`${formatAge(oldestPending)} ago`} />
+            <Property label="Oldest Pending" value={<TimeValue timestamp={oldestPending} />} />
           )}
         </PropertyList>
         {messages.length > 0 && (

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

@@ -1,6 +1,7 @@
 import { NodeRenderer as BaseNodeRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/NodeRenderer'
 import { useNavigate } from 'react-router-dom'
-import { getVisibleLiveMetrics, isLiveMetricsUnavailable, shouldFetchLiveMetrics, useNodeMetrics, useNodeMetricsHistory, usePrometheusResourceMetrics, usePrometheusStatus } from '../../../api/client'
+import { getVisibleLiveMetrics, isLiveMetricsUnavailable, shouldFetchLiveMetrics, useNodeRemovalPlan, useNodeMetrics, useNodeMetricsHistory, usePrometheusResourceMetrics, usePrometheusStatus } from '../../../api/client'
+import { getNodeLifecycle } from '@skyhook-io/k8s-ui/utils/node-lifecycle'
 import { serializeColumnFilters } from '../resource-utils'
 
 interface NodeRendererProps {
@@ -11,6 +12,8 @@ interface NodeRendererProps {
 export function NodeRenderer({ data, relationships }: NodeRendererProps) {
   const navigate = useNavigate()
   const nodeName = data.metadata?.name
+  const lifecycle = getNodeLifecycle(data)
+  const removalPlan = useNodeRemovalPlan(nodeName, lifecycle.removing)
 
   // Fetch node metrics
   const metricsHistoryQuery = useNodeMetricsHistory(nodeName)
@@ -35,6 +38,9 @@ export function NodeRenderer({ data, relationships }: NodeRendererProps) {
   return (
     <BaseNodeRenderer
       data={data}
+      removalPlan={removalPlan.data}
+      removalPlanLoading={removalPlan.isLoading}
+      removalPlanError={removalPlan.error?.message}
       relationships={relationships}
       onViewPods={nodeName ? () => {
         const params = new URLSearchParams()

package/src/components/resources/renderers/ServiceRenderer.test.tsx

@@ -0,0 +1,81 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { beforeEach, expect, it, vi } from 'vitest'
+import { RadarFeatureUnsupportedError } from '../../../api/radarFeatures'
+import { ServiceRenderer } from './ServiceRenderer'
+
+const mock = vi.hoisted(() => ({
+  serviceQuery: {} as any,
+  namespaceQuery: {} as any,
+  serviceReads: [] as any[],
+  namespaceReads: [] as any[],
+}))
+vi.mock('../../../api/client', () => ({
+  useServiceEndpointSlices: (...args: any[]) => { mock.serviceReads.push(args); return mock.serviceQuery },
+  useResources: (...args: any[]) => { mock.namespaceReads.push(args); return mock.namespaceQuery },
+}))
+vi.mock('../../../contexts/CapabilitiesContext', () => ({ useNamespacedCapabilities: () => ({ canPortForward: false }), useIsLocalDeployment: () => true }))
+vi.mock('../../portforward/PortForwardButton', () => ({ PortForwardInlineButton: () => null }))
+vi.mock('../../curl/ServiceCurlButton', () => ({ CurlButton: () => null, CurlPanel: () => null, isHttpishPort: () => false, defaultScheme: () => '', defaultPathForPort: () => '' }))
+
+const service = { apiVersion: 'v1', kind: 'Service', metadata: { name: 'web', namespace: 'team' }, spec: { selector: { app: 'web' } } }
+const selectorless = { ...service, spec: {} }
+const slice = (name: string, labels?: Record<string, string>) => ({ apiVersion: 'discovery.k8s.io/v1', kind: 'EndpointSlice', metadata: { namespace: 'team', name, labels } })
+const render = (data: any = service) => renderToStaticMarkup(<ServiceRenderer data={data} onCopy={() => {}} copied={null} />)
+const unsupported = () => new RadarFeatureUnsupportedError('serviceEndpointSlices', { currentVersion: 'v1.7.0' })
+
+beforeEach(() => {
+  mock.serviceQuery = {}
+  mock.namespaceQuery = {}
+  mock.serviceReads = []
+  mock.namespaceReads = []
+})
+
+it('renders the server-selected slices for a selector Service without listing the namespace', () => {
+  mock.serviceQuery = { data: { items: [slice('web-abc', { 'kubernetes.io/service-name': 'web' })], truncated: false } }
+  const html = render()
+  expect(mock.serviceReads[0]).toEqual(['team', 'web', true])
+  expect(mock.namespaceReads[0][3].enabled).toBe(false)
+  expect(html).toContain('EndpointSlices')
+  expect(html).toContain('web-abc')
+  expect(html).not.toContain('Showing the first')
+})
+
+it('says when the server cut the inventory off', () => {
+  mock.serviceQuery = { data: { items: [slice('web-abc')], truncated: true } }
+  expect(render()).toContain('Showing the first 1 EndpointSlices.')
+})
+
+it('surfaces a failed lookup instead of an empty inventory', () => {
+  mock.serviceQuery = { error: new Error('insufficient permissions to list endpointslices') }
+  const html = render()
+  expect(html).toContain('EndpointSlice inventory unavailable')
+  expect(html).toContain('insufficient permissions to list endpointslices')
+  expect(html).not.toContain('No EndpointSlices found')
+})
+
+it('does not query slices for ExternalName Services', () => {
+  const html = render({ ...service, spec: { type: 'ExternalName', externalName: 'example.org' } })
+  expect(mock.serviceReads[0][2]).toBe(false)
+  expect(mock.namespaceReads[0][3].enabled).toBe(false)
+  expect(html).not.toContain('EndpointSlices')
+})
+
+it('falls back to the label-filtered namespace list for selector-less Services on an older Radar', () => {
+  mock.serviceQuery = { error: unsupported() }
+  mock.namespaceQuery = { data: [
+    slice('manual-abc', { 'kubernetes.io/service-name': 'web' }),
+    slice('other-abc', { 'kubernetes.io/service-name': 'other' }),
+  ] }
+  const html = render(selectorless)
+  expect(mock.namespaceReads[0]).toEqual(['endpointslices', 'team', 'discovery.k8s.io', { enabled: true, refetchInterval: 30000 }])
+  expect(html).toContain('manual-abc')
+  expect(html).not.toContain('other-abc')
+  expect(html).not.toContain('EndpointSlice inventory unavailable')
+})
+
+it('keeps selector Services free of slice lookups on an older Radar', () => {
+  mock.serviceQuery = { error: unsupported() }
+  const html = render()
+  expect(mock.namespaceReads[0][3].enabled).toBe(false)
+  expect(html).not.toContain('EndpointSlices')
+})

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

@@ -2,7 +2,8 @@ import { useMemo, useState, useCallback } from 'react'
 import { ServiceRenderer as BaseServiceRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/ServiceRenderer'
 import { PortForwardInlineButton } from '../../portforward/PortForwardButton'
 import { CurlButton, CurlPanel, isHttpishPort, defaultScheme, defaultPathForPort } from '../../curl/ServiceCurlButton'
-import { useResources } from '../../../api/client'
+import { useResources, useServiceEndpointSlices } from '../../../api/client'
+import { isRadarFeatureUnsupported } from '../../../api/radarFeatures'
 import { useNamespacedCapabilities, useIsLocalDeployment } from '../../../contexts/CapabilitiesContext'
 import type { ResourceRef } from '../../../types'
 import { DURATION_DISCLOSURE } from '@skyhook-io/k8s-ui/utils/animation'
@@ -36,21 +37,22 @@ export function ServiceRenderer({ data, onCopy, copied, onNavigate }: ServiceRen
     window.setTimeout(() => setCurl((p) => (p?.closing ? null : p)), DURATION_DISCLOSURE + 20)
   }, [])
   const spec = data.spec || {}
-  const shouldLoadEndpointSlices = Boolean(
-    namespace &&
-    serviceName &&
-    spec.type !== 'ExternalName' &&
-    (!spec.selector || Object.keys(spec.selector).length === 0)
-  )
-  const { data: endpointSlices, isLoading: endpointSlicesLoading } = useResources<any>(
+  const hasNoSelector = !spec.selector || Object.keys(spec.selector).length === 0
+  const canListEndpointSlices = Boolean(namespace && serviceName && spec.type !== 'ExternalName')
+  const serviceSlices = useServiceEndpointSlices(namespace, serviceName, canListEndpointSlices)
+  // A Radar without the per-Service endpoint keeps its earlier behavior: only
+  // selector-less Services list the namespace's slices and filter them here.
+  const legacy = isRadarFeatureUnsupported(serviceSlices.error, 'serviceEndpointSlices')
+  const shouldLoadNamespaceSlices = canListEndpointSlices && hasNoSelector && legacy
+  const { data: namespaceSlices, isLoading: namespaceSlicesLoading, error: namespaceSlicesError } = useResources<any>(
     'endpointslices',
     namespace,
     'discovery.k8s.io',
-    { enabled: shouldLoadEndpointSlices, refetchInterval: 30000 }
+    { enabled: shouldLoadNamespaceSlices, refetchInterval: 30000 }
   )
-  const matchingEndpointSlices = useMemo(
-    () => (endpointSlices || []).filter((slice: any) => slice.metadata?.labels?.['kubernetes.io/service-name'] === serviceName),
-    [endpointSlices, serviceName]
+  const matchingNamespaceSlices = useMemo(
+    () => (namespaceSlices || []).filter((slice: any) => slice.metadata?.labels?.['kubernetes.io/service-name'] === serviceName),
+    [namespaceSlices, serviceName]
   )
 
   return (
@@ -58,8 +60,11 @@ export function ServiceRenderer({ data, onCopy, copied, onNavigate }: ServiceRen
       data={data}
       onCopy={onCopy}
       copied={copied}
-      endpointSlices={matchingEndpointSlices}
-      endpointSlicesLoading={endpointSlicesLoading}
+      endpointSlices={legacy ? matchingNamespaceSlices : serviceSlices.data?.items}
+      endpointSlicesLoading={legacy ? namespaceSlicesLoading : serviceSlices.isLoading}
+      endpointSlicesEnabled={!legacy && canListEndpointSlices}
+      endpointSlicesError={(legacy ? namespaceSlicesError : serviceSlices.error)?.message}
+      endpointSlicesTruncated={!legacy && serviceSlices.data?.truncated}
       onNavigate={onNavigate}
       renderPortAction={({ port, name, appProtocol, protocol }) => (
         <>

package/src/components/settings/SettingsDialog.tsx

@@ -23,7 +23,7 @@ import { AISettingsSection, type AIDraft } from '../diagnose/AISettings'
 import { MyPermissionsContent } from './MyPermissionsDialog'
 import { PrivacySection } from './PrivacySection'
 import { ConfigToggle, SubHeading } from './controls'
-import { useDiagnose } from '../diagnose/DiagnoseContext'
+import { useDiagnose, type DiagnoseSetup } from '../diagnose/DiagnoseContext'
 import { currencyOptionsForValue } from './currency-options'
 import { UpdateNotification } from '../ui/UpdateNotification'
 import {
@@ -924,7 +924,13 @@ export function SettingsDialog({
                   )}
                 </div>
               ) : (
-                <AIUnavailableNotice />
+                <AIUnavailableNotice
+                  setupState={diag.setupState}
+                  cliOverride={diag.cliOverride}
+                  checkingAgents={diag.checkingAgents}
+                  agentsCheckFailed={diag.agentsCheckFailed}
+                  recheckAgents={diag.recheckAgents}
+                />
               )}
             </div>
 
@@ -1354,8 +1360,7 @@ function OverviewPanel({ active, onNavigate }: { active: boolean; onNavigate: (s
     },
     {
       id: 'ai', icon: Sparkles, label: 'AI investigations',
-      tone: aiAvailable ? 'ok' : 'off',
-      value: aiAvailable ? 'Ready' : 'No agent CLI',
+      ...aiOverviewStatus(aiAvailable, diag.setupState, diag.cliOverride, diag.agentsCheckFailed),
       detail: aiAvailable ? agentLabel : undefined,
     },
   ]
@@ -1408,6 +1413,33 @@ function OverviewPanel({ active, onNavigate }: { active: boolean; onNavigate: (s
   )
 }
 
+// aiOverviewStatus says which reason applies, for the same reason
+// AIUnavailableNotice does: "No agent CLI" is a claim about the user's machine,
+// and it is false when RADAR_AI_CLI_BIN is what's broken, when an agent is
+// reported but off, when this deployment can't run investigations at all, or
+// when the agents probe hasn't answered.
+function aiOverviewStatus(
+  aiAvailable: boolean,
+  setupState: DiagnoseSetup,
+  cliOverride: boolean,
+  checkFailed: boolean,
+): Pick<OverviewRow, 'tone' | 'value'> {
+  if (aiAvailable) return { tone: 'ok', value: 'Ready' }
+  if (cliOverride && (setupState === 'needs-install' || setupState === 'needs-restart')) {
+    return { tone: 'warn', value: "RADAR_AI_CLI_BIN can't be run" }
+  }
+  switch (setupState) {
+    case 'unknown':
+      return checkFailed ? { tone: 'warn', value: "Couldn't check" } : { tone: 'unknown', value: 'Checking…' }
+    case 'needs-restart':
+      return { tone: 'warn', value: 'Not available right now' }
+    case 'off':
+      return { tone: 'off', value: 'Not available in this deployment' }
+    default:
+      return { tone: 'off', value: 'No agent CLI' }
+  }
+}
+
 function OverviewStatus({ tone }: { tone: OverviewTone }) {
   const cls =
     tone === 'ok' ? 'bg-green-500'
@@ -1417,24 +1449,95 @@ function OverviewStatus({ tone }: { tone: OverviewTone }) {
   return <span className={clsx('w-2 h-2 rounded-full shrink-0', cls)} />
 }
 
-// AIUnavailableNotice is the body of the AI investigations tab when no supported agent
-// CLI is installed — the heading/description are provided by the tab itself, so
-// this is just the enable explainer (keeping the feature discoverable to whoever
-// would set it up).
-function AIUnavailableNotice() {
-  return (
+// AIUnavailableNotice is the body of the AI investigations tab when the agent,
+// model and effort controls have nothing to configure. The tab supplies the
+// heading, so this is just the explainer.
+//
+// It must say WHICH of the reasons applies. "No supported agent CLI found" is a
+// claim about the user's machine, and when a CLI was found but investigations
+// didn't start it is false.
+function AIUnavailableNotice({
+  setupState,
+  cliOverride,
+  checkingAgents,
+  agentsCheckFailed,
+  recheckAgents,
+}: {
+  setupState: DiagnoseSetup
+  cliOverride: boolean
+  checkingAgents: boolean
+  agentsCheckFailed: boolean
+  recheckAgents: () => Promise<void>
+}) {
+  // The state the tab was in when a check started. "Still…" is only true when
+  // the finished check left it there.
+  const [checkedState, setCheckedState] = useState<DiagnoseSetup | null>(null)
+  const unchanged = checkedState === setupState && !checkingAgents && !agentsCheckFailed
+  const checkAgain = (
+    <button
+      type="button"
+      disabled={checkingAgents}
+      onClick={() => void recheckAgents().then(() => setCheckedState(setupState))}
+      className="mt-3 flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand rounded-md disabled:opacity-50"
+    >
+      <RotateCw className={clsx('w-3.5 h-3.5', checkingAgents && 'animate-spin')} />
+      {checkingAgents ? 'Checking…' : 'Check again'}
+    </button>
+  )
+  const panel = (title: string, body?: ReactNode, action?: ReactNode) => (
     <div className="rounded-md border border-theme-border bg-theme-elevated/50 p-3">
-      <p className="text-sm font-medium text-theme-text-primary">No supported agent CLI found</p>
-      <p className="mt-1 text-xs text-theme-text-tertiary">
-        Install <span className="text-theme-text-secondary">Claude Code</span>,{' '}
-        <span className="text-theme-text-secondary">Codex</span>,{' '}
-        <span className="text-theme-text-secondary">Cursor</span> (
-        <span className="font-mono">cursor-agent</span>), or{' '}
-        <span className="text-theme-text-secondary">OpenCode</span>, then restart Radar — this tab
-        will show the agent, model, and effort controls.
-      </p>
+      <p className="text-sm font-medium text-theme-text-primary">{title}</p>
+      {body && <p className="mt-1 text-xs text-theme-text-tertiary">{body}</p>}
+      {action}
     </div>
   )
+  if (setupState === 'unknown') {
+    // The agent probe hasn't answered. Saying anything about the CLI or the
+    // deployment here would be a guess.
+    return agentsCheckFailed && !checkingAgents
+      ? panel("Couldn't check for agent CLIs", 'Try again.', checkAgain)
+      : panel('Checking…')
+  }
+  if (setupState === 'off') {
+    return panel(
+      'Not available in this deployment',
+      'They need Radar running on your own computer, with MCP on and sign-in off.',
+    )
+  }
+  if (cliOverride) {
+    return panel(
+      "Radar can't run your RADAR_AI_CLI_BIN",
+      <>
+        Fix the path, or remove it and restart Radar.
+        {unchanged && " Still can't run it."}
+      </>,
+      checkAgain,
+    )
+  }
+  if (setupState === 'needs-restart') {
+    return panel(
+      "AI investigations aren't available right now",
+      <>
+        {agentsCheckFailed && !checkingAgents ? "Couldn't check. Try again." : 'Try again in a moment.'}
+        {unchanged && ' Still not available.'}
+      </>,
+      checkAgain,
+    )
+  }
+  return panel(
+    'No supported agent CLI found',
+    <>
+      Install <span className="text-theme-text-secondary">Claude Code</span>,{' '}
+      <span className="text-theme-text-secondary">Codex</span>,{' '}
+      <span className="text-theme-text-secondary">Cursor</span> (
+      <span className="font-mono">cursor-agent</span>), or{' '}
+      <span className="text-theme-text-secondary">OpenCode</span>, and this tab will show the
+      agent, model, and effort controls.
+      {agentsCheckFailed && !checkingAgents && " Couldn't check. Try again."}
+      {unchanged && ' Still not found.'}
+    </>,
+    checkAgain,
+  )
 }
 
 // -- Startup section bodies ---------------------------------------------------

package/src/components/shared/LargeClusterNamespacePicker.tsx

@@ -1,10 +1,14 @@
-import { useState, useRef, useEffect, useMemo } from 'react'
+import { useState, useRef, useEffect, useMemo, type ReactNode } from 'react'
 import { Search } from 'lucide-react'
 import { Input } from '@skyhook-io/k8s-ui'
 
-export function LargeClusterNamespacePicker({ namespaces, onSelect }: {
+export function LargeClusterNamespacePicker({ namespaces, onSelect, ranked = false, renderMeta }: {
   namespaces: { name: string }[] | undefined
   onSelect: (ns: string) => void
+  /** Keep the given order (already ranked) instead of sorting by name. */
+  ranked?: boolean
+  /** Extra detail shown at the end of a namespace's row. */
+  renderMeta?: (name: string) => ReactNode
 }) {
   const [search, setSearch] = useState('')
   const inputRef = useRef<HTMLInputElement>(null)
@@ -15,8 +19,9 @@ export function LargeClusterNamespacePicker({ namespaces, onSelect }: {
 
   const sorted = useMemo(() => {
     if (!namespaces) return []
+    if (ranked) return namespaces
     return [...namespaces].sort((a, b) => a.name.localeCompare(b.name))
-  }, [namespaces])
+  }, [namespaces, ranked])
 
   const filtered = useMemo(() => {
     if (!search.trim()) return sorted
@@ -51,9 +56,10 @@ export function LargeClusterNamespacePicker({ namespaces, onSelect }: {
               key={ns.name}
               type="button"
               onClick={() => onSelect(ns.name)}
-              className="w-full text-left px-3 py-2 text-sm text-theme-text-primary hover:bg-theme-hover transition-colors border-b border-theme-border last:border-b-0"
+              className="w-full flex items-center justify-between gap-3 text-left px-3 py-2 text-sm text-theme-text-primary hover:bg-theme-hover transition-colors border-b border-theme-border last:border-b-0"
             >
-              {ns.name}
+              <span className="truncate">{ns.name}</span>
+              {renderMeta?.(ns.name)}
             </button>
           ))
         )}

package/src/components/timeline/TimelineList.test.ts

@@ -1,11 +1,13 @@
 import { describe, expect, it } from 'vitest'
 import { applyClientFilters } from '../../api/timelineSource'
 import type { TimelineEvent } from '../../types'
-import { listIncludesManaged } from './TimelineList'
+import { splitRoutineActivity } from './TimelineList'
 
+let clock = Date.parse('2024-01-01T00:00:00.000Z')
 function ev(over: Partial<TimelineEvent> & { id: string }): TimelineEvent {
+  clock += 1000
   return {
-    timestamp: '2024-01-01T00:00:00.000Z',
+    timestamp: new Date(clock).toISOString(),
     source: 'informer',
     kind: 'Deployment',
     namespace: 'ns-a',
@@ -15,42 +17,58 @@ function ev(over: Partial<TimelineEvent> & { id: string }): TimelineEvent {
   }
 }
 
-// Mirrors the host: the source filter runs first, then the UI keeps the selected kinds.
-function listRows(events: TimelineEvent[], kinds: string[]): string[] {
-  return applyClientFilters(events, { includeManaged: listIncludesManaged(false, kinds) })
-    .filter((e) => kinds.length === 0 || kinds.includes(e.kind))
-    .map((e) => e.id)
+const deploy = ev({ id: 'deploy', kind: 'Deployment' })
+const podStarted = ev({ id: 'pod-started', kind: 'Pod', source: 'k8s_event', eventType: 'Normal', reason: 'Started' })
+const podOom = ev({ id: 'pod-oom', kind: 'Pod', source: 'k8s_event', eventType: 'Warning', reason: 'OOMKilled' })
+const rsScaled = ev({ id: 'rs-scaled', kind: 'ReplicaSet' })
+const cronJobOk = ev({ id: 'cron-job-ok', kind: 'Job', owner: { kind: 'CronJob', name: 'nightly' }, healthState: 'healthy' })
+const cronJobFailed = ev({ id: 'cron-job-failed', kind: 'Job', owner: { kind: 'CronJob', name: 'nightly' }, healthState: 'unhealthy' })
+const standaloneJob = ev({ id: 'standalone-job', kind: 'Job' })
+const ALL = [deploy, podStarted, podOom, rsScaled, cronJobOk, cronJobFailed, standaloneJob]
+
+// Mirrors the host: one uncapped query through the source's client filters.
+function split(events: TimelineEvent[], kinds: string[], limit = 2000) {
+  return splitRoutineActivity(applyClientFilters(events, { kinds, includeManaged: true }), limit)
 }
+const ids = (rows: TimelineEvent[]) => rows.map((e) => e.id).sort()
+const oom = (id: string) => ev({ id, kind: 'Pod', source: 'k8s_event', eventType: 'Warning', reason: 'OOMKilled' })
+const started = (id: string) => ev({ id, kind: 'Pod', source: 'k8s_event', eventType: 'Normal', reason: 'Started' })
 
-describe('listIncludesManaged', () => {
-  it('includes managed rows when app-scoped or when any kind is selected', () => {
-    expect(listIncludesManaged(true, [])).toBe(true)
-    expect(listIncludesManaged(false, ['Pod'])).toBe(true)
-    expect(listIncludesManaged(false, ['Job'])).toBe(true)
+describe('splitRoutineActivity', () => {
+  it('keeps owner rows and child problems, holds routine child rows apart', () => {
+    const { withoutRoutine, routine } = split(ALL, [])
+    expect(ids(withoutRoutine)).toEqual(['cron-job-failed', 'deploy', 'pod-oom', 'standalone-job'])
+    expect(ids(routine)).toEqual(['cron-job-ok', 'pod-started', 'rs-scaled'])
   })
 
-  it('keeps hiding managed rows for the unfiltered list', () => {
-    expect(listIncludesManaged(false, [])).toBe(false)
-  })
-})
+  it('shows a picked kind\'s problems and holds its routine rows apart', () => {
+    const pods = split(ALL, ['Pod'])
+    expect(ids(pods.withoutRoutine)).toEqual(['pod-oom'])
+    expect(ids(pods.routine)).toEqual(['pod-started'])
 
-describe('timeline list rows', () => {
-  const events = [
-    ev({ id: 'dep', kind: 'Deployment' }),
-    ev({ id: 'pod', kind: 'Pod' }),
-    ev({ id: 'job', kind: 'Job' }),
-    ev({ id: 'cron-job', kind: 'Job', owner: { kind: 'CronJob', name: 'nightly' } }),
-  ]
+    const jobs = split(ALL, ['Job'])
+    expect(ids(jobs.withoutRoutine)).toEqual(['cron-job-failed', 'standalone-job'])
+    expect(ids(jobs.routine)).toEqual(['cron-job-ok'])
+  })
 
-  it('lists pod rows for a Pod selection', () => {
-    expect(listRows(events, ['Pod'])).toEqual(['pod'])
+  it('lists rows newest first', () => {
+    expect(split(ALL, []).withoutRoutine.map((e) => e.id)).toEqual(['standalone-job', 'cron-job-failed', 'pod-oom', 'deploy'])
   })
 
-  it('lists owned rows of an unmanaged kind for that kind', () => {
-    expect(listRows(events, ['Job']).sort()).toEqual(['cron-job', 'job'])
+  it('never lets owner rows crowd out child problems', () => {
+    const owners = [1, 2, 3].map((n) => ev({ id: `deploy-${n}`, kind: 'Deployment' }))
+    const { withoutRoutine, truncated } = split([oom('old-oom'), ...owners], [], 2)
+    expect(ids(withoutRoutine)).toEqual(['deploy-2', 'deploy-3', 'old-oom'])
+    expect(truncated).toBe(true)
   })
 
-  it('hides pod and owned rows when no kind is selected', () => {
-    expect(listRows(events, []).sort()).toEqual(['dep', 'job'])
+  it('only adds rows when routine activity is shown', () => {
+    const olderDeploy = ev({ id: 'older-deploy', kind: 'Deployment' })
+    const burst = [1, 2, 3].map((n) => started(`started-${n}`))
+    const { withoutRoutine, withRoutine, routine, routineTruncated } = split([olderDeploy, ...burst], [], 2)
+    expect(ids(withoutRoutine)).toEqual(['older-deploy'])
+    expect(ids(withRoutine)).toEqual(['older-deploy', 'started-2', 'started-3'])
+    expect(ids(routine)).toEqual(['started-2', 'started-3'])
+    expect(routineTruncated).toBe(true)
   })
 })