@skyhook-io/radar-app 1.17.0 → 1.17.1

package/src/components/resource/WorkloadMetricsHelpDialog.test.tsx

@@ -35,7 +35,9 @@ describe('Metrics help', () => {
     expect(html).toContain('--prometheus-single-cluster')
     expect(html).toContain('they do not add missing metrics')
     expect(html).toContain('Leave both unset for automatic matching')
-    expect(html).toContain('it does not scope rightsizing')
+    expect(html).toContain('It does not scope rightsizing')
+    expect(html).toContain('Pod comparison and PVC usage')
+    expect(html).toContain('labels must exist on the kubelet volume stats')
     expect(html).toContain('Standalone CLI:')
     expect(html).toContain('when starting Radar')
     expect(html).toContain('traffic.prometheusSingleCluster')

package/src/components/resource/WorkloadMetricsHelpDialog.tsx

@@ -133,7 +133,7 @@ export function WorkloadMetricsHelpContent({ data, pending, error }: Pick<Props,
           <div><dt className="font-medium">Backend dedicated to this cluster</dt><dd><code className="break-all font-mono text-xs">--prometheus-single-cluster</code><p className="mt-1">Helm: <code className="break-all font-mono text-xs">traffic.prometheusSingleCluster: true</code></p></dd></div>
           <div><dt className="font-medium">Shared backend with a cluster label</dt><dd><code className="break-all font-mono text-xs">--prometheus-cluster-label cluster=your-cluster</code><p className="mt-1">Helm: set the backend’s actual label and value in <code className="break-all font-mono text-xs">traffic.prometheusClusterLabels</code>.</p></dd></div>
         </dl>
-        <p>Leave both unset for automatic matching. An override replaces automatic matching for workload requests, resources, history and Pod comparison only; it does not scope rightsizing or other metrics features.</p>
+        <p>Leave both unset for automatic matching. An override replaces automatic matching for workload requests, resources, history, Pod comparison and PVC usage. For PVC usage, its labels must exist on the kubelet volume stats. It does not scope rightsizing, node/HPA or legacy network/storage metrics.</p>
         <h4 className="font-medium text-theme-text-primary">Operator configuration</h4>
         <p><strong className="font-medium">Standalone CLI:</strong> supply the flag when starting Radar. Overrides are not saved; after changing the cluster, backend or credentials, verify the new scope before restarting with a fresh override.</p>
         <p><strong className="font-medium">In-cluster OSS or Radar Cloud:</strong> ask the installation’s operator to update its Helm values or GitOps configuration. These are shared backend settings, not viewer preferences.</p>

package/src/components/resources/CompositeRenderer.tsx

@@ -12,7 +12,7 @@ import {
   type CrossplaneResourceRef,
 } from '@skyhook-io/k8s-ui/components/resources/resource-utils-crossplane'
 import { getResourceStatus } from '@skyhook-io/k8s-ui'
-import { kindToPlural } from '@skyhook-io/k8s-ui/utils/navigation'
+import { kindToPluralWithGroup } from '@skyhook-io/k8s-ui/utils/navigation'
 import type { ResourceRef as NavRef } from '../../types'
 import { fetchJSON, ApiError } from '../../api/client'
 
@@ -59,8 +59,8 @@ export function CompositeRenderer({ data, onNavigate }: CompositeRendererProps)
     ],
     queryFn: async () => {
       const ns = boundXRRef!.namespace || '_'
-      const plural = kindToPlural(boundXRRef!.kind)
       const group = groupFromApiVersion(boundXRRef!.apiVersion)
+      const plural = kindToPluralWithGroup(boundXRRef!.kind, group)
       const query = group ? `?group=${encodeURIComponent(group)}` : ''
       return fetchJSON<{ resource: any }>(`/resources/${plural}/${ns}/${boundXRRef!.name}${query}`)
     },
@@ -99,7 +99,7 @@ export function CompositeRenderer({ data, onNavigate }: CompositeRendererProps)
         queryKey: ['composed-ref', group, ref.kind, ref.namespace ?? '', ref.name],
         queryFn: async () => {
           const ns = ref.namespace || '_'
-          const plural = kindToPlural(ref.kind)
+          const plural = kindToPluralWithGroup(ref.kind, group)
           const query = group ? `?group=${encodeURIComponent(group)}` : ''
           return fetchJSON<{ resource: any }>(`/resources/${plural}/${ns}/${ref.name}${query}`)
         },
@@ -137,7 +137,7 @@ export function CompositeRenderer({ data, onNavigate }: CompositeRendererProps)
         map.set(key, { ref, missing: true })
         return
       }
-      const status = getResourceStatus(kindToPlural(ref.kind), q.data.resource) ?? undefined
+      const status = getResourceStatus(kindToPluralWithGroup(ref.kind, groupFromApiVersion(ref.apiVersion)), q.data.resource) ?? undefined
       map.set(key, {
         ref,
         status: status ? { ...status, level: (status as any).level ?? 'unknown' } : undefined,

package/src/components/resources/ResourceDetailDrawer.tsx

@@ -1,7 +1,7 @@
 import { ResourceDetailDrawer as BaseResourceDetailDrawer } from '@skyhook-io/k8s-ui'
 import type { SelectedResource } from '../../types'
 import { WorkloadView } from '../workload/WorkloadView'
-import { CNPGDrawerTrailBack } from '../cnpg/CNPGDrawerTrail'
+import { ResourceDrawerNavigation } from '../../integrations/resourceHosts'
 
 interface ResourceDetailDrawerProps {
   resource: SelectedResource
@@ -33,7 +33,7 @@ export function ResourceDetailDrawer(props: ResourceDetailDrawerProps) {
     <BaseResourceDetailDrawer {...props}>
       {({ resource, expanded, active, initialTab, onClose, onExpand, onExpandIntent, onCancelExpandIntent, onBack, onNavigateToResource, onCollapseToDrawer }) => (
         <div className="flex h-full min-h-0 flex-col">
-        {!expanded && <CNPGDrawerTrailBack resource={resource} />}
+        {!expanded && <ResourceDrawerNavigation resource={resource} />}
         <div className="min-h-0 flex-1">
         <WorkloadView
           kind={resource.kind}

package/src/components/resources/ResourcesView.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback, useEffect } from 'react'
+import { useState, useMemo, useCallback } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 import { ApiError, debugNamespaceLog, fetchJSON, isForbiddenError, isKindSyncFailed, isStillLoadingError, useCapabilities, useNamespaceCapabilities, useResources, useSecretCertExpiry, useTopPodMetrics, useTopNodeMetrics, useBulkDeleteResources, useBulkRestartWorkloads, useBulkScaleWorkloads, useAudit } from '../../api/client'
@@ -8,10 +8,11 @@ import { apiUrl, getAuthHeaders, getCredentialsMode, stripBasename } from '../..
 import { readErrorBody } from '../../api/httpErrors'
 import { useAPIResources } from '../../api/apiResources'
 import { useConnection } from '../../context/ConnectionContext'
-import { initNavigationMap, getSecretStoreProviderType } from '@skyhook-io/k8s-ui'
+import { getSecretStoreProviderType } from '@skyhook-io/k8s-ui'
 import { usePinnedKinds } from '../../hooks/useFavorites'
 import { useResourceCounts } from '../../hooks/useResourceCounts'
 import { useCNPGSidebarWorkspace } from '../cnpg/useCNPGSidebarWorkspace'
+import { renderResourceKindList, resourceKindListMode, useResourceHostFeatures } from '../../integrations/resourceHosts'
 import { useOpenLogs, useOpenWorkloadLogs } from '../dock'
 import {
   canBulkRestartKind,
@@ -35,6 +36,9 @@ interface ResourcesViewProps {
   onResourceClickYaml?: NavigateToResource
   onKindChange?: () => void
   onClearNamespaces?: () => void
+  rememberedKindSearch?: (kind: { name: string; group: string }) => string | undefined
+  onKindFiltersChange?: (kind: { name: string; group: string }, search: string) => void
+  onApplyNamespacesToAllSections?: (namespaces: string[]) => Promise<unknown> | void
 }
 
 type SelectedKindInfo = { name: string; kind: string; group: string } | null
@@ -70,12 +74,13 @@ function hasResourceCount(counts: Record<string, number> | undefined, key: strin
   return Object.prototype.hasOwnProperty.call(counts ?? {}, key)
 }
 
-export function ResourcesView({ namespaces, selectedResource, onResourceClick, onResourceClickYaml, onKindChange, onClearNamespaces }: ResourcesViewProps) {
+export function ResourcesView({ namespaces, selectedResource, onResourceClick, onResourceClickYaml, onKindChange, onClearNamespaces, rememberedKindSearch, onKindFiltersChange, onApplyNamespacesToAllSections }: ResourcesViewProps) {
   const location = useLocation()
   const navigate = useNavigate()
   const { connection } = useConnection()
 
-  const { data: capabilities } = useCapabilities()
+  const { data: capabilities, isPending: capabilitiesPending } = useCapabilities()
+  const hostFeatures = useResourceHostFeatures()
   const namespaceForCapabilities = namespaces.length === 1 ? namespaces[0] : undefined
   const { data: namespaceCapabilities } = useNamespaceCapabilities(namespaceForCapabilities, capabilities)
   const namespaceCapabilityNames = useMemo(() => namespaces.length > 1 ? [...namespaces].sort() : [], [namespaces])
@@ -104,15 +109,9 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
   // API resources discovery
   const { data: apiResources } = useAPIResources()
 
-  // Initialize navigation kind↔plural maps from discovered API resources
-  useEffect(() => {
-    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 cnpgSidebarWorkspace = useCNPGSidebarWorkspace({ apiResources, namespaces, withMetrics: selectedKind?.group === 'postgresql.cnpg.io' })
   const workloadWrites = namespaces.length === 0
     ? capabilities?.workloadWrites
     : namespaces.length === 1
@@ -281,7 +280,7 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
         printerTable: sanitizePrinterTable(body),
       }
     },
-    enabled: !!selectedKind && !selectedKindQueryBlocked,
+    enabled: !!selectedKind && !selectedKindQueryBlocked && resourceKindListMode(selectedKind, hostFeatures, capabilitiesPending) === 'table',
     staleTime: 30000,
     refetchInterval: 120000, // Safety net — SSE k8s_event drives near-real-time invalidation
     retry: (failureCount: number, error: Error) => {
@@ -385,6 +384,17 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
     setCreateDialogOpen(true)
   }, [])
 
+  const renderKindView = useCallback(
+    (kind: SelectedKindInfo) => renderResourceKindList(kind, hostFeatures, capabilitiesPending, {
+      namespaces,
+      inspected: selectedResource ?? null,
+      onInspect: (resource) => onResourceClick?.(resource),
+      onClearNamespaces: onClearNamespaces ?? (() => {}),
+      onCreate: handleCreateResource,
+    }),
+    [hostFeatures, capabilitiesPending, namespaces, selectedResource, onResourceClick, onClearNamespaces, handleCreateResource],
+  )
+
   return (
     <>
     <BaseResourcesView
@@ -395,6 +405,9 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       onResourceClickYaml={onResourceClickYaml}
       onKindChange={onKindChange}
       onClearNamespaces={onClearNamespaces}
+      rememberedKindSearch={rememberedKindSearch}
+      onKindFiltersChange={onKindFiltersChange}
+      onApplyNamespacesToAllSections={onApplyNamespacesToAllSections}
       // Injected data
       apiResources={apiResources}
       // Lightweight counts for sidebar (replaces 233 parallel queries)
@@ -434,6 +447,7 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       onOpenWorkloadLogs={openWorkloadLogs}
       // Create resource
       onCreateResource={handleCreateResource}
+      renderKindView={renderKindView}
       // Bulk operations
       onBulkDelete={(items, options) => bulkDeleteMutation.mutate({ items, force: options?.force }, { onSuccess: options?.onSuccess })}
       isBulkDeleting={bulkDeleteMutation.isPending}

package/src/components/settings/LocalIntegrationStatus.test.tsx

@@ -0,0 +1,52 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+import type { useArgoStatus } from '../../api/client'
+import type { IntegrationProfile } from './LocalConnectionSettings'
+import { LocalIntegrationStatus } from './LocalIntegrationStatus'
+
+vi.mock('../../api/client', () => ({
+  usePrometheusStatus: () => ({}),
+  useOpenCostSummary: () => ({}),
+}))
+
+const profile: IntegrationProfile = {
+  target: {
+    binding: 'opaque',
+    context: 'development',
+    source: '/configs/team',
+    inFileName: 'dev',
+    fingerprint: 'target',
+    clientGeneration: 1,
+    operationGeneration: 1,
+    identity: { server: 'https://kubernetes', user: 'developer', trust: 'trust', insecureTls: false },
+  },
+  revision: 'revision',
+  state: 'saved',
+  mode: 'auto',
+  url: '',
+  headerKeys: [],
+  envHeaderKeys: [],
+  headersManaged: false,
+  secretSet: true,
+  insecureTls: false,
+  clusterId: '',
+}
+
+const render = (data: Record<string, unknown>) => {
+  const argo = { data, isError: false, isPlaceholderData: false, isFetching: false, dataUpdatedAt: 1, errorUpdatedAt: 0 } as unknown as ReturnType<typeof useArgoStatus>
+  return renderToStaticMarkup(<LocalIntegrationStatus kind="argocd" profile={profile} argo={argo} busy={false} changedAt={0} />)
+}
+
+describe('LocalIntegrationStatus for Argo CD', () => {
+  it('says Connecting while the first connection is being made', () => {
+    const html = render({ configured: true, connected: false, connecting: true })
+    expect(html).toContain('Connecting…')
+    expect(html).not.toContain('Not connected')
+  })
+
+  it('shows why the last read failed on a working connection', () => {
+    const html = render({ configured: true, connected: true, address: 'https://argocd', reason: "Radar's last read from Argo CD failed: the request timed out." })
+    expect(html).toContain('Connected')
+    expect(html).toContain('the request timed out')
+  })
+})

package/src/components/settings/LocalIntegrationStatus.tsx

@@ -26,13 +26,12 @@ export function LocalIntegrationStatus({ kind, profile, argo, busy, changedAt }:
       status = prom.data.connected ? 'Connected' : prom.data.discovering ? 'Discovering…' : 'Not connected'
       detail = prom.data.connected ? !profile.url ? `Discovered: ${prom.data.address}` : undefined : prom.data.error
     } else if (kind === 'argocd' && argo.data) {
-      status = argo.data.connected ? argo.data.anonymous ? 'Connected · no token needed' : 'Connected' : 'Not connected'
-      detail = argo.data.connected ? !profile.url ? `Discovered: ${argo.data.address}` : undefined : argo.data.reason
+      status = argo.data.connected ? argo.data.anonymous ? 'Connected · no token needed' : 'Connected' : argo.data.connecting ? 'Connecting…' : 'Not connected'
+      detail = argo.data.reason ?? (argo.data.connected && !profile.url ? `Discovered: ${argo.data.address}` : undefined)
     } else if (kind === 'cost' && cost.data) {
       status = cost.data.available ? `Available · ${costSourceLabel(cost.data.source)}`
         : ['no_prometheus', 'no_cost_source', 'no_metrics'].includes(cost.data.reason ?? '') ? 'No cost data' : 'Unavailable'
-      detail = cost.data.reason ? costIntegrationUnavailableMessage(cost.data.reason)
-        ?? (cost.data.reason === 'query_error' ? 'The active cost source query failed.' : undefined) : undefined
+      detail = cost.data.reason ? costIntegrationUnavailableMessage(cost.data.reason) : undefined
     }
   }
   const lastDetail = useRef({ text: detail, visible: !!detail })

package/src/components/settings/SettingsDialog.tsx

@@ -856,11 +856,8 @@ export function SettingsDialog({
                 anonymous={argoSectionStatus?.connected && argoSectionStatus.anonymous}
                 connectedAddress={argoSectionStatus?.connected && !argoSectionStatus.anonymous ? argoSectionStatus.address : undefined}
                 active={section === 'argocd'}
-                statusReason={
-                  argoSectionStatus?.configured && !argoSectionStatus.connected
-                    ? argoSectionStatus.reason
-                    : undefined
-                }
+                statusReason={argoSectionStatus?.configured ? argoSectionStatus.reason : undefined}
+                connecting={argoSectionStatus?.connecting}
                 onChangeUrl={(v) => updateConfigField('argoCdUrl', v || undefined)}
                 onChangeInsecureTls={(v) => updateConfigField('argoCdInsecureTls', v || undefined)}
                 onApplied={({ url, insecureTls, tokenSet }) => {
@@ -1218,7 +1215,7 @@ function OperatorSettingsSummary({ section, config }: { section: SettingsSection
       break
     case 'argocd':
       rows = [
-        ['Status', argoError ? 'Status unavailable' : !argo ? 'Checking…' : argo.connected ? 'Connected' : 'Not connected'],
+        ['Status', argoError ? 'Status unavailable' : !argo ? 'Checking…' : argo.connected ? 'Connected' : argo.connecting ? 'Connecting…' : 'Not connected'],
         ['Endpoint', argo?.address || c.argoCdUrl || 'Auto-discovery'],
         ['Token', config.argoCdTokenSet ? 'Configured' : 'None configured'],
         ['TLS verification', c.argoCdInsecureTls ? 'Disabled' : 'Enabled'],
@@ -1317,7 +1314,7 @@ function OverviewPanel({ active, onNavigate }: { active: boolean; onNavigate: (s
       : cost?.reason === 'access_denied'
         ? 'Your current permissions do not allow cost data.'
         : cost?.reason
-          ? costIntegrationUnavailableMessage(cost.reason) ?? 'The active cost source query failed.'
+          ? costIntegrationUnavailableMessage(cost.reason) ?? 'The active cost source could not provide data.'
           : undefined
 
   const rows: OverviewRow[] = [
@@ -1347,9 +1344,9 @@ function OverviewPanel({ active, onNavigate }: { active: boolean; onNavigate: (s
     },
     {
       id: 'argocd', icon: GitBranch, label: 'Argo CD',
-      tone: argo?.connected ? 'ok' : argo?.configured || argo?.reason ? 'warn' : 'off',
-      value: argo?.connected ? (argo.anonymous ? 'Connected · no token needed' : 'Connected') : 'Not connected',
-      detail: argo?.connected ? argo.address : argo?.reason ? 'Open Argo CD for connection details.' : undefined,
+      tone: argo?.connected ? (argo.reason ? 'warn' : 'ok') : argo?.connecting ? 'unknown' : argo?.configured || argo?.reason ? 'warn' : 'off',
+      value: argo?.connected ? (argo.anonymous ? 'Connected · no token needed' : 'Connected') : argo?.connecting ? 'Connecting…' : 'Not connected',
+      detail: argo?.reason ? 'Open Argo CD for connection details.' : argo?.connected ? argo.address : undefined,
     },
     {
       id: 'advanced', icon: Zap, label: 'MCP',
@@ -2228,6 +2225,7 @@ function ArgoCDConfigField({
   envError,
   cliSession,
   statusReason,
+  connecting,
   anonymous,
   connectedAddress,
   active,
@@ -2242,6 +2240,7 @@ function ArgoCDConfigField({
   envError?: string
   cliSession?: { server: string; user: string; insecure?: boolean }
   statusReason?: string
+  connecting?: boolean
   anonymous?: boolean
   connectedAddress?: string
   active?: boolean
@@ -2250,7 +2249,7 @@ function ArgoCDConfigField({
   onApplied?: (v: { url: string; insecureTls: boolean; tokenSet: boolean }) => void
 }) {
   if (envManaged) {
-    return <ArgoCDEnvManagedField url={url} insecureTls={insecureTls} envError={envError} connectedAddress={connectedAddress} statusReason={statusReason} />
+    return <ArgoCDEnvManagedField url={url} insecureTls={insecureTls} envError={envError} connectedAddress={connectedAddress} statusReason={statusReason} connecting={connecting} />
   }
   return (
     <ArgoCDEditableField
@@ -2259,6 +2258,7 @@ function ArgoCDConfigField({
       tokenSet={tokenSet}
       cliSession={cliSession}
       statusReason={statusReason}
+      connecting={connecting}
       anonymous={anonymous}
       connectedAddress={connectedAddress}
       active={active}
@@ -2279,6 +2279,7 @@ function ArgoCDEnvManagedField({
   envError,
   connectedAddress,
   statusReason,
+  connecting,
 }: {
   url: string
   insecureTls: boolean
@@ -2288,6 +2289,7 @@ function ArgoCDEnvManagedField({
   // so this is the one thing on it that can change after deploy.
   connectedAddress?: string
   statusReason?: string
+  connecting?: boolean
 }) {
   if (envError) {
     return (
@@ -2344,10 +2346,15 @@ function ArgoCDEnvManagedField({
             <dt className="w-24 shrink-0 text-theme-text-tertiary">Status</dt>
             <dd className="min-w-0 truncate text-theme-text-secondary">
               {connectedAddress ? (
-                <span className="inline-flex items-center gap-1">
-                  <Check className="w-3 h-3 shrink-0 text-green-600 dark:text-green-400/80" />
-                  Connected at {connectedAddress}
-                </span>
+                <>
+                  <span className="inline-flex items-center gap-1">
+                    <Check className="w-3 h-3 shrink-0 text-green-600 dark:text-green-400/80" />
+                    Connected at {connectedAddress}
+                  </span>
+                  {statusReason && <span className="block whitespace-normal text-warning-text">{statusReason}</span>}
+                </>
+              ) : connecting ? (
+                'Connecting…'
               ) : statusReason ? (
                 <span className="text-warning-text">Not connected — {statusReason}</span>
               ) : (
@@ -2377,6 +2384,7 @@ function ArgoCDEditableField({
   tokenSet,
   cliSession,
   statusReason,
+  connecting: serverConnecting,
   anonymous,
   connectedAddress,
   active,
@@ -2389,6 +2397,7 @@ function ArgoCDEditableField({
   tokenSet: boolean
   cliSession?: { server: string; user: string; insecure?: boolean }
   statusReason?: string
+  connecting?: boolean
   anonymous?: boolean
   connectedAddress?: string
   active?: boolean
@@ -2517,6 +2526,10 @@ function ArgoCDEditableField({
         </p>
       )}
 
+      {serverConnecting && state.status === 'idle' && !anonymous && !connectedAddress && (
+        <p className="mb-3 text-xs text-theme-text-secondary">Connecting to Argo CD…</p>
+      )}
+
       {statusReason && state.status !== 'connected' && (
         <div className="mb-3 rounded-md border border-theme-border bg-theme-elevated p-3">
           <p className="flex items-center gap-1.5 text-sm font-medium text-warning-text">

package/src/components/timeline/TimelineList.tsx

@@ -1,6 +1,5 @@
 import { useState, useCallback, useMemo } from 'react'
 import {
-  SEVERITY_TEXT,
   TimelineList as TimelineListUI,
   eventsForApplication,
   isTimelineProblem,
@@ -16,7 +15,9 @@ 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'
+import { TimelineLoadError, TimelineStaleNote } from './TimelineLoadError'
+import { useStickyError } from './useStickyError'
+import { ViewModeToggle } from './ViewModeToggle'
 
 export type { ActivityTypeFilter, ActivityFilterKey }
 
@@ -93,9 +94,10 @@ interface TimelineListProps {
   appScoped?: boolean
   topology?: Topology
   appScopeLoading?: boolean
+  onOpenDiagnostics?: () => void
 }
 
-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) {
+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, onOpenDiagnostics }: TimelineListProps) {
   const hasLimitedAccess = useHasLimitedAccess()
   const timelineSource = useTimelineSource()
   const [queryParams, setQueryParams] = useState<{ timeRange: TimeRange; kinds: string[] }>({
@@ -112,7 +114,7 @@ export function TimelineList({ namespaces, onViewChange, currentView, onResource
   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({
+  const { data: fetchedEvents, isLoading, isFetching, isError, error, refetch } = timelineSource.useEvents({
     namespaces,
     kinds: queryParams.kinds,
     timeRange: queryParams.timeRange,
@@ -123,6 +125,7 @@ export function TimelineList({ namespaces, onViewChange, currentView, onResource
     fromMs: selectionWindow?.fromMs,
     toMs: selectionWindow?.toMs,
   })
+  const loadError = useStickyError(error, fetchedEvents != null)
   const split = useMemo(
     () => (splitRows && fetchedEvents ? splitRoutineActivity(fetchedEvents, fetchLimit) : undefined),
     [splitRows, fetchedEvents, fetchLimit],
@@ -141,21 +144,22 @@ export function TimelineList({ namespaces, onViewChange, currentView, onResource
 
   // Full-screen error only when nothing is loaded; a failing background poll
   // with data on screen keeps rendering (data before error).
-  if (isError && !fetchedEvents) {
+  if (loadError && !fetchedEvents) {
     return (
-      <div className="flex flex-col items-center justify-center h-full text-theme-text-tertiary gap-3">
-        <AlertTriangle className="w-10 h-10 text-amber-400/70" />
-        <p className="text-base">Failed to load timeline data</p>
-        {error?.message?.trim() && (
-          <p className="max-w-md px-6 text-center text-sm text-theme-text-tertiary">{error.message.trim()}</p>
+      <div className="flex flex-col h-full">
+        {currentView && onViewChange && (
+          <div className="flex items-center justify-between px-4 py-2 border-b border-theme-border">
+            <div />
+            <ViewModeToggle viewMode={currentView} onViewModeChange={onViewChange} />
+          </div>
         )}
-        <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>
+        <TimelineLoadError
+          className="flex-1"
+          error={loadError}
+          retrying={isFetching}
+          onRetry={() => refetch()}
+          onOpenDiagnostics={onOpenDiagnostics}
+        />
       </div>
     )
   }
@@ -165,13 +169,7 @@ export function TimelineList({ namespaces, onViewChange, currentView, onResource
   // view-level banner already reports the shared failure, and a second note
   // would double up.
   const staleNote = isError && fetchedEvents && !selectionWindow ? (
-    <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 list may be stale.
-      <button type="button" onClick={() => refetch()} className="underline hover:text-theme-text-primary">
-        Retry now
-      </button>
-    </div>
+    <TimelineStaleNote error={error} subject="list" onRetry={() => refetch()} />
   ) : null
 
   return (

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

@@ -0,0 +1,62 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { ApiError } from '../../api/client'
+import { TimelineLoadError, TimelineStaleNote } from './TimelineLoadError'
+
+const driverError = 'open PostgreSQL timeline database: dial tcp 10.0.0.5:5432: connect: connection refused'
+
+function databaseDown(): ApiError {
+  return new ApiError('Timeline history is unavailable because Radar can\'t connect to its PostgreSQL database.', 503, {
+    error_code: 'timeline_database_unreachable',
+    detail: driverError,
+  })
+}
+
+function render(error: Error, onOpenDiagnostics?: () => void): string {
+  return renderToStaticMarkup(
+    <TimelineLoadError error={error} onRetry={() => {}} onOpenDiagnostics={onOpenDiagnostics} />,
+  )
+}
+
+describe('TimelineLoadError', () => {
+  it('names the database and points to the logs when PostgreSQL is unreachable', () => {
+    const html = render(databaseDown(), () => {})
+    expect(html).toContain('Timeline history is unavailable')
+    expect(html).toContain('can&#x27;t connect to its PostgreSQL database')
+    expect(html).toContain('[timeline]')
+    // The driver's error names the database host; it belongs in the logs and
+    // diagnostics, not on the page.
+    expect(html).not.toContain(driverError)
+    expect(html).toContain('Open diagnostics')
+    expect(html).not.toContain('Failed to load timeline data')
+  })
+
+  it('omits the diagnostics link when the host cannot open diagnostics', () => {
+    expect(render(databaseDown())).not.toContain('Open diagnostics')
+  })
+
+  it('keeps the generic state, without a diagnostics link, for other failures', () => {
+    const html = render(new ApiError('upstream timed out', 502, { error: 'upstream timed out' }), () => {})
+    expect(html).toContain('Failed to load timeline data')
+    expect(html).toContain('upstream timed out')
+    expect(html).not.toContain('Open diagnostics')
+  })
+})
+
+describe('TimelineStaleNote', () => {
+  const note = (error: Error) =>
+    renderToStaticMarkup(<TimelineStaleNote error={error} subject="timeline" onRetry={() => {}} />)
+
+  it('names the database and points to the logs when PostgreSQL is the cause', () => {
+    const html = note(databaseDown())
+    expect(html).toContain('can&#x27;t connect to its PostgreSQL database, so the timeline may be stale')
+    expect(html).toContain('[timeline]')
+    expect(html).not.toContain(driverError)
+  })
+
+  it('keeps the generic note for other failures', () => {
+    const html = note(new ApiError('upstream timed out', 502, { error: 'upstream timed out' }))
+    expect(html).toContain('Live updates are failing, so the timeline may be stale')
+    expect(html).not.toContain('PostgreSQL')
+  })
+})

package/src/components/timeline/TimelineLoadError.tsx

@@ -0,0 +1,96 @@
+import { clsx } from 'clsx'
+import { AlertTriangle, Bug, RefreshCw } from 'lucide-react'
+import { timelineDatabaseError } from '../../api/client'
+import { SEVERITY_TEXT } from '@skyhook-io/k8s-ui'
+
+const SECONDARY_BUTTON =
+  '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'
+
+// TimelineLoadError is the full-screen state when the timeline has nothing to
+// show. An unreachable PostgreSQL database gets its own copy: it says the
+// database is the problem and where to look. The driver's error stays in
+// Radar's logs and the diagnostics overlay.
+export function TimelineLoadError({
+  error,
+  onRetry,
+  retrying = false,
+  onOpenDiagnostics,
+  className,
+}: {
+  error?: Error | null
+  onRetry: () => void
+  /** A request is in flight: the error stays up, the button shows the attempt. */
+  retrying?: boolean
+  onOpenDiagnostics?: () => void
+  className?: string
+}) {
+  const databaseError = timelineDatabaseError(error)
+  const detail = error?.message?.trim()
+
+  return (
+    <div className={clsx('flex flex-col items-center justify-center text-theme-text-tertiary gap-3 px-6', className)}>
+      <AlertTriangle className="w-10 h-10 text-amber-400/70" />
+      {databaseError !== null ? (
+        <>
+          <p className="text-base text-theme-text-secondary">Timeline history is unavailable</p>
+          <p className="max-w-md text-center text-sm">
+            Radar can't connect to its PostgreSQL database, so changes aren't being recorded. It keeps
+            retrying, and this page recovers on its own once the database is back.
+          </p>
+          <p className="max-w-md text-center text-xs">
+            Radar's logs have the details: search them for <code className="font-mono">[timeline]</code>.
+          </p>
+        </>
+      ) : (
+        <>
+          <p className="text-base">Failed to load timeline data</p>
+          {detail && <p className="max-w-md text-center text-sm">{detail}</p>}
+        </>
+      )}
+      <div className="flex items-center gap-2">
+        <button type="button" onClick={onRetry} disabled={retrying} className={clsx(SECONDARY_BUTTON, 'disabled:opacity-60 disabled:cursor-default')}>
+          <RefreshCw className={clsx('w-3.5 h-3.5', retrying && 'animate-spin')} />
+          Try again
+        </button>
+        {databaseError !== null && onOpenDiagnostics && (
+          <button type="button" onClick={onOpenDiagnostics} className={SECONDARY_BUTTON}>
+            <Bug className="w-3.5 h-3.5" />
+            Open diagnostics
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// TimelineStaleNote is the banner over data that is still on screen while its
+// refresh fails. When the database is the cause it says so and where to look,
+// since the data underneath otherwise reads as current.
+export function TimelineStaleNote({
+  error,
+  subject,
+  onRetry,
+}: {
+  error?: Error | null
+  /** What may be stale: the swimlane view or the list. */
+  subject: 'timeline' | 'list'
+  onRetry: () => void
+}) {
+  const databaseDown = timelineDatabaseError(error) !== null
+  return (
+    <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}`} />
+      {databaseDown ? (
+        <span>
+          Radar can't connect to its PostgreSQL database, so the {subject} may be stale. Search Radar's logs
+          for <code className="font-mono">[timeline]</code>.
+        </span>
+      ) : (
+        <span>Live updates are failing, so the {subject} may be stale.</span>
+      )}
+      <button type="button" onClick={onRetry} className="underline hover:text-theme-text-primary">
+        Retry now
+      </button>
+    </div>
+  )
+}