@skyhook-io/radar-app 1.6.0 → 1.6.2

package/src/components/home/HomeView.tsx

@@ -1,8 +1,6 @@
 import { useMemo, type ReactNode } from 'react'
-import { useDashboard, useDashboardCRDs, useDashboardHelm } from '../../api/client'
-import type { DashboardResponse } from '../../api/client'
+import { useDashboard, useDashboardCRDs, useDashboardHelm, useIssues, type IssuesResponse } from '../../api/client'
 import type { ExtendedMainView, Topology, SelectedResource } from '../../types'
-import { kindToPlural } from '../../utils/navigation'
 import { TopologyPreview } from './TopologyPreview'
 import { HelmSummary } from './HelmSummary'
 import { ActivitySummary } from './ActivitySummary'
@@ -11,9 +9,18 @@ import { CertificateHealthCard } from './CertificateHealthCard'
 import { NetworkPolicyCoverageCard } from './NetworkPolicyCoverageCard'
 import { CostCard } from './CostCard'
 import { GitOpsControllersCard } from './GitOpsControllersCard'
-import { AuditCard, PaneLoader, StatusDot, mapHealthToTone } from '@skyhook-io/k8s-ui'
+import {
+  AuditCard,
+  PaneLoader,
+  StatusDot,
+  categoryLabel,
+  groupLabel,
+  subjectRef,
+  type Issue,
+} from '@skyhook-io/k8s-ui'
+import { formatCompactAge } from '@skyhook-io/k8s-ui/utils/format'
 import { ClusterHealthCard } from './ClusterHealthCard'
-import { AlertTriangle, Loader2, Shield } from 'lucide-react'
+import { AlertTriangle, CheckCircle, Loader2, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
 
 interface HomeViewProps {
@@ -26,6 +33,10 @@ interface HomeViewProps {
 
 export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToResourceKind, onNavigateToResource }: HomeViewProps) {
   const { data, isLoading, error } = useDashboard(namespaces)
+  const { data: issuesData, isLoading: issuesLoading, isFetching: issuesFetching, error: issuesError } = useIssues(namespaces)
+  const issues = issuesData?.issues ?? []
+  const issueCount = issuesData?.total_matched ?? issuesData?.total ?? issues.length
+  const hasCriticalIssues = issues.some((issue) => issue.severity === 'critical')
 
   // SSE is cluster-wide on small/medium clusters; the picker only narrows the
   // dashboard summary, so re-apply the filter here or the legend disagrees.
@@ -73,8 +84,6 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
     )
   }
 
-  const hasProblems = data.problems && data.problems.length > 0
-
   const stillLoading = data.deferredLoading || (data.partialData && data.partialData.length > 0)
 
   return (
@@ -98,19 +107,17 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
           metrics={data.metrics}
           metricsServerAvailable={data.metricsServerAvailable}
           topCRDs={crdsData?.topCRDs}
-          problems={data.problems ?? []}
+          issueCount={issueCount}
+          hasCriticalIssues={hasCriticalIssues}
           nodeVersionSkew={data.nodeVersionSkew}
           onNavigateToKind={onNavigateToResourceKind}
           onNavigateToView={() => onNavigateToView('resources')}
           onWarningEventsClick={() => onNavigateToView('timeline', { view: 'list', filter: 'warnings', time: 'all' })}
-          onUnhealthyClick={() => onNavigateToView('timeline', { view: 'list', filter: 'unhealthy', time: 'all' })}
+          onIssuesClick={() => onNavigateToView('issues')}
         />
 
-        {/* Row 2: Main content columns — teasers left, problems right (if any) */}
-        <div className={clsx(
-          'grid gap-6',
-          hasProblems ? 'grid-cols-1 lg:grid-cols-[1fr_420px]' : 'grid-cols-1'
-        )}>
+        {/* Row 2: Main content columns - teasers left, issues right */}
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-[1fr_420px]">
           {/* Left column: teaser cards */}
           <div className="flex flex-col gap-6 auto-rows-min">
             {/* Live band — Topology + Timeline always render, so a fixed 2-up never strands.
@@ -190,14 +197,18 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
             )}
           </div>
 
-          {/* Right column: problems panel */}
-          {hasProblems && (
-            <ProblemsPanel
-              problems={data.problems}
-              onNavigateToIssues={() => onNavigateToView('issues')}
-              onResourceClick={onNavigateToResource}
-            />
-          )}
+          <ProblemsPanel
+            issues={issues}
+            issueCount={issueCount}
+            visibility={issuesData?.visibility}
+            hasData={!!issuesData}
+            isLoading={issuesLoading && !issuesData}
+            isRefreshing={issuesFetching && !!issuesData}
+            error={issuesError}
+            totalReturned={issues.length}
+            onNavigateToIssues={() => onNavigateToView('issues')}
+            onResourceClick={onNavigateToResource}
+          />
         </div>
       </div>
     </div>
@@ -216,19 +227,56 @@ function BandItem({ children }: { children: ReactNode }) {
 // ============================================================================
 
 interface ProblemsPanelProps {
-  problems: DashboardResponse['problems']
+  issues: Issue[]
+  issueCount: number
+  visibility?: IssuesResponse['visibility']
+  hasData: boolean
+  isLoading: boolean
+  isRefreshing: boolean
+  error: unknown
+  totalReturned: number
   onNavigateToIssues: () => void
   onResourceClick: (resource: SelectedResource) => void
 }
 
 
-function ProblemsPanel({ problems, onNavigateToIssues, onResourceClick }: ProblemsPanelProps) {
+function ProblemsPanel({
+  issues,
+  issueCount,
+  visibility,
+  hasData,
+  isLoading,
+  isRefreshing,
+  error,
+  totalReturned,
+  onNavigateToIssues,
+  onResourceClick,
+}: ProblemsPanelProps) {
+  const hasCriticalIssues = issues.some((issue) => issue.severity === 'critical')
+  const hasIssues = issueCount > 0
+  const hasHardError = !!error && !hasData
+  const hasLimitedVisibility = !!visibility?.impact
+  const isTruncated = issueCount > totalReturned
+  const titleClass = hasCriticalIssues
+    ? 'text-red-500'
+    : hasIssues || hasHardError || hasLimitedVisibility
+      ? 'text-amber-500'
+      : 'text-theme-text-secondary'
+  const countClass = hasHardError
+    ? 'status-unknown'
+    : hasCriticalIssues
+      ? 'status-unhealthy'
+      : hasIssues || hasLimitedVisibility
+        ? 'status-degraded'
+        : 'status-healthy'
+  const countLabel = isLoading ? '...' : hasHardError ? 'error' : String(issueCount)
+
   return (
     <div className="rounded-xl bg-theme-surface shadow-theme-sm flex flex-col lg:max-h-[calc(100vh-280px)] lg:sticky lg:top-0">
       <div className="flex items-center justify-between px-5 py-3 border-b border-theme-border/50 shrink-0">
         <div className="flex items-center gap-2">
-          <AlertTriangle className="w-4 h-4 text-red-500" />
-          <span className="text-xs font-semibold uppercase tracking-wider text-red-500">Active Issues</span>
+          <AlertTriangle className={clsx('w-4 h-4', titleClass)} />
+          <span className={clsx('text-xs font-semibold uppercase tracking-wider', titleClass)}>Active Issues</span>
         </div>
         <div className="flex items-center gap-2">
           <button
@@ -238,41 +286,141 @@ function ProblemsPanel({ problems, onNavigateToIssues, onResourceClick }: Proble
           >
             View all
           </button>
-          <span className="badge status-unhealthy rounded-full">{problems.length}</span>
+          {isRefreshing && !isLoading && (
+            <Loader2 className="h-3.5 w-3.5 animate-spin text-theme-text-tertiary" aria-label="Refreshing issues" />
+          )}
+          <span className={clsx('badge rounded-full', countClass)}>{countLabel}</span>
         </div>
       </div>
       <div className="overflow-y-auto flex-1 min-h-0">
-        <div className="divide-y divide-theme-border">
-          {problems.map((p, i) => (
-            <button
-              key={`${p.kind}-${p.namespace}-${p.name}-${i}`}
-              className="w-full flex items-center gap-2 px-3 py-1.5 hover:bg-theme-hover transition-colors text-left"
-              onClick={() => onResourceClick({
-                kind: kindToPlural(p.kind),
-                namespace: p.namespace,
-                name: p.name,
-                group: p.group,
-              })}
-            >
-              <StatusDot tone={mapHealthToTone(p.severity)} className="shrink-0" />
-              <div className="min-w-0 flex-1">
-                <div className="flex items-center gap-1.5">
-                  <span className="text-[10px] text-theme-text-tertiary bg-theme-elevated px-1 py-0.5 rounded">{p.kind}</span>
-                  <span className="text-xs text-theme-text-primary truncate font-medium">{p.name}</span>
-                  <span className="text-[10px] text-theme-text-tertiary ml-auto shrink-0">{p.duration || p.age}</span>
-                </div>
-                <div className="flex items-center gap-1.5 mt-0.5">
-                  <span className="text-[11px] text-theme-text-secondary truncate">{p.reason}</span>
-                  <span className="text-[10px] text-theme-text-tertiary shrink-0">{p.namespace}</span>
-                </div>
-                {p.message && (
-                  <div className="text-[10px] text-theme-text-tertiary truncate mt-0.5">{p.message}</div>
-                )}
+        {isLoading ? (
+          <ProblemsPanelState
+            icon={<Loader2 className="h-5 w-5 animate-spin text-theme-text-tertiary" />}
+            title="Loading issues"
+            body="Checking live cluster issues for the selected scope."
+          />
+        ) : hasHardError ? (
+          <ProblemsPanelState
+            icon={<AlertTriangle className="h-5 w-5 text-amber-500" />}
+            title="Issues unavailable"
+            body={formatIssueError(error)}
+          />
+        ) : (
+          <>
+            {!!error && (
+              <ProblemsPanelNotice tone="warning">
+                Issue refresh failed. Showing the last successful result.
+              </ProblemsPanelNotice>
+            )}
+            {visibility?.impact && (
+              <ProblemsPanelNotice tone="warning">
+                Limited visibility - {visibility.impact} Results may be incomplete.
+              </ProblemsPanelNotice>
+            )}
+            {isTruncated && (
+              <ProblemsPanelNotice tone="neutral">
+                Showing {totalReturned} of {issueCount} issues. Narrow by namespace to see the rest.
+              </ProblemsPanelNotice>
+            )}
+
+            {issues.length === 0 ? (
+              <ProblemsPanelState
+                icon={
+                  hasLimitedVisibility
+                    ? <AlertTriangle className="h-5 w-5 text-amber-500" />
+                    : <CheckCircle className="h-5 w-5 text-green-500" />
+                }
+                title={hasLimitedVisibility ? 'No visible active issues' : 'No active issues'}
+                body={
+                  hasLimitedVisibility
+                    ? 'Radar could not read every workload source in this scope.'
+                    : 'No critical or warning issues across the selected scope.'
+                }
+              />
+            ) : (
+              <div className="divide-y divide-theme-border">
+                {issues.map((issue) => {
+                  const ref = subjectRef(issue)
+                  const age = issue.first_seen
+                    ? issue.issue_timing === 'started_at_resource_creation'
+                      ? 'since deploy'
+                      : formatCompactAge(issue.first_seen)
+                    : ''
+
+                  return (
+                    <button
+                      key={issue.id}
+                      className="w-full flex items-center gap-2 px-3 py-1.5 hover:bg-theme-hover transition-colors text-left"
+                      onClick={() => onResourceClick({
+                        kind: ref.kind,
+                        namespace: ref.namespace ?? '',
+                        name: ref.name,
+                        group: ref.group ?? '',
+                      })}
+                    >
+                      <StatusDot tone={issue.severity === 'critical' ? 'unhealthy' : 'degraded'} className="shrink-0" />
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-center gap-1.5">
+                          <span className="text-[10px] text-theme-text-tertiary bg-theme-elevated px-1 py-0.5 rounded">{issue.kind}</span>
+                          <span className="text-xs text-theme-text-primary truncate font-medium">{issue.name}</span>
+                          {age && <span className="text-[10px] text-theme-text-tertiary ml-auto shrink-0">{age}</span>}
+                        </div>
+                        <div className="flex items-center gap-1.5 mt-0.5">
+                          <span className="text-[11px] text-theme-text-secondary truncate">{categoryLabel(issue.category)}</span>
+                          <span className="text-[10px] text-theme-text-tertiary shrink-0">{groupLabel(issue.category_group)}</span>
+                          {issue.namespace && <span className="text-[10px] text-theme-text-tertiary shrink-0">{issue.namespace}</span>}
+                        </div>
+                        {(issue.reason || issue.message) && (
+                          <div className="text-[10px] text-theme-text-tertiary truncate mt-0.5">
+                            {issue.reason}
+                            {issue.reason && issue.message ? ' - ' : ''}
+                            {issue.message}
+                          </div>
+                        )}
+                      </div>
+                    </button>
+                  )
+                })}
               </div>
-            </button>
-          ))}
-        </div>
+            )}
+          </>
+        )}
       </div>
     </div>
   )
 }
+
+function ProblemsPanelState({ icon, title, body }: { icon: ReactNode; title: string; body: string }) {
+  return (
+    <div className="flex min-h-[220px] flex-col items-center justify-center gap-2 px-6 py-10 text-center">
+      <div className="flex h-9 w-9 items-center justify-center rounded-full bg-theme-elevated">
+        {icon}
+      </div>
+      <p className="text-sm font-medium text-theme-text-primary">{title}</p>
+      <p className="max-w-[280px] text-xs leading-5 text-theme-text-secondary">{body}</p>
+    </div>
+  )
+}
+
+function ProblemsPanelNotice({ tone, children }: { tone: 'warning' | 'neutral'; children: ReactNode }) {
+  return (
+    <div className="px-3 pt-3">
+      <div
+        className={clsx(
+          'rounded-lg border px-3 py-2 text-xs leading-5',
+          tone === 'warning'
+            ? 'border-amber-500/20 bg-amber-500/10 text-theme-text-secondary'
+            : 'border-theme-border bg-theme-elevated text-theme-text-secondary',
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+function formatIssueError(error: unknown): string {
+  return error instanceof Error && error.message
+    ? error.message
+    : 'Failed to load active issues.'
+}

package/src/components/resources/ResourceDetailDrawer.tsx

@@ -18,6 +18,9 @@ interface ResourceDetailDrawerProps {
   onExpand?: (resource: SelectedResource) => void
   /** Navigate to another resource within expanded WorkloadView */
   onNavigateToResource?: (resource: SelectedResource) => void
+  /** Top offset for the drawer (px). Defaults to Radar's 49px header height;
+   *  pass 0 in chromeless embeds where there's no Radar header above it. */
+  headerHeight?: number
 }
 
 export function ResourceDetailDrawer(props: ResourceDetailDrawerProps) {

package/src/components/resources/ResourcesView.tsx

@@ -23,6 +23,7 @@ import { getSkeletonYaml } from '../../utils/skeleton-yaml'
 interface ResourceCountsResponse {
   counts: Record<string, number>
   forbidden?: string[]
+  unavailable?: string[]
 }
 
 interface ResourcesViewProps {
@@ -36,6 +37,14 @@ interface ResourcesViewProps {
 
 type SelectedKindInfo = { name: string; kind: string; group: string } | null
 
+const LARGE_RESOURCE_LIST_LIMIT = 25000
+const LARGE_RESOURCE_LIST_GUARD_KEYS = new Set([
+  'Pod',
+  'Event',
+  'apps/ReplicaSet',
+  'discovery.k8s.io/EndpointSlice',
+])
+
 const deniedWorkloadWrites: WorkloadWritePermissions = {
   deployments: false,
   daemonSets: false,
@@ -43,6 +52,10 @@ const deniedWorkloadWrites: WorkloadWritePermissions = {
   rollouts: false,
 }
 
+function resourceCountKey(kind: NonNullable<SelectedKindInfo>): string {
+  return kind.group ? `${kind.group}/${kind.kind}` : kind.kind
+}
+
 export function ResourcesView({ namespaces, selectedResource, onResourceClick, onResourceClickYaml, onKindChange, onClearNamespaces }: ResourcesViewProps) {
   const location = useLocation()
   const navigate = useNavigate()
@@ -93,7 +106,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 } = useQuery({
+  const { data: countsData, isError: countsIsError } = useQuery({
     queryKey: ['resource-counts', namespacesParam],
     queryFn: async () => {
       const params = new URLSearchParams()
@@ -123,6 +136,29 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
     return match?.isCrd ?? (!!selectedKind.group) // default: has group = likely CRD
   }, [selectedKind, apiResources])
 
+  const selectedCountKey = selectedKind ? resourceCountKey(selectedKind) : ''
+  const selectedCount = selectedCountKey ? countsData?.counts[selectedCountKey] : undefined
+  const selectedCountUnavailable = selectedCountKey ? countsData?.unavailable?.includes(selectedCountKey) ?? false : false
+  const isSelectedKindGuarded = selectedCountKey !== '' && LARGE_RESOURCE_LIST_GUARD_KEYS.has(selectedCountKey)
+  const waitingForGuardCount = isSelectedKindGuarded && !countsData && !countsIsError
+  const largeListBlocked = isSelectedKindGuarded && countsData != null && (selectedCountUnavailable || (selectedCount ?? 0) > LARGE_RESOURCE_LIST_LIMIT)
+  const selectedKindQueryBlocked = waitingForGuardCount || largeListBlocked
+  const podCount = countsData?.counts.Pod
+  const podCountUnavailable = countsData?.unavailable?.includes('Pod') ?? false
+  const podCountAllowsBulkMetrics = countsData != null && !podCountUnavailable && (podCount ?? 0) <= LARGE_RESOURCE_LIST_LIMIT
+  const selectedKindName = selectedKind?.name.toLowerCase() ?? ''
+  const topPodMetricsEnabled = selectedKindName === 'pods' && podCountAllowsBulkMetrics
+  const topNodeMetricsEnabled = selectedKindName === 'nodes' && namespaces.length === 0 && podCountAllowsBulkMetrics
+  const largeListGuard = selectedKind && largeListBlocked
+    ? {
+        kind: selectedKind.name,
+        count: selectedCountUnavailable ? undefined : selectedCount,
+        reason: selectedCountUnavailable ? 'count-unavailable' as const : 'too-many' as const,
+        limit: LARGE_RESOURCE_LIST_LIMIT,
+        namespaces,
+      }
+    : null
+
   // Fetch full data only for the selected kind
   const selectedKindQuery = useQuery({
     queryKey: ['resources', selectedKind?.name, isSelectedCrd ? selectedKind?.group : '', namespaces],
@@ -156,7 +192,7 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       }
       return res.json()
     },
-    enabled: !!selectedKind,
+    enabled: !!selectedKind && !selectedKindQueryBlocked,
     staleTime: 30000,
     refetchInterval: 120000, // Safety net — SSE k8s_event drives near-real-time invalidation
     retry: (failureCount: number, error: Error) => {
@@ -169,17 +205,17 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
   const selectedKindQueryResult: ResourceQueryResult | undefined = useMemo(() => {
     if (!selectedKind) return undefined
     return {
-      data: selectedKindQuery.data as any[] | undefined,
-      isLoading: selectedKindQuery.isLoading,
-      error: selectedKindQuery.error,
+      data: selectedKindQueryBlocked ? [] : selectedKindQuery.data as any[] | undefined,
+      isLoading: waitingForGuardCount || selectedKindQuery.isLoading,
+      error: selectedKindQueryBlocked ? undefined : selectedKindQuery.error,
       refetch: selectedKindQuery.refetch,
       dataUpdatedAt: selectedKindQuery.dataUpdatedAt,
     }
-  }, [selectedKind, selectedKindQuery.data, selectedKindQuery.isLoading, selectedKindQuery.error, selectedKindQuery.refetch, selectedKindQuery.dataUpdatedAt])
+  }, [selectedKind, selectedKindQueryBlocked, waitingForGuardCount, selectedKindQuery.data, selectedKindQuery.isLoading, selectedKindQuery.error, selectedKindQuery.refetch, selectedKindQuery.dataUpdatedAt])
 
   // Metrics
-  const { data: topPodMetrics } = useTopPodMetrics()
-  const { data: topNodeMetrics } = useTopNodeMetrics()
+  const { data: topPodMetrics } = useTopPodMetrics({ enabled: topPodMetricsEnabled, namespaces })
+  const { data: topNodeMetrics } = useTopNodeMetrics({ enabled: topNodeMetricsEnabled })
 
   // Certificate expiry
   const { data: certExpiry, isError: certExpiryError } = useSecretCertExpiry()
@@ -248,7 +284,9 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       // Lightweight counts for sidebar (replaces 233 parallel queries)
       resourceCounts={countsData?.counts}
       resourceForbidden={countsData?.forbidden}
+      resourceUnavailable={countsData?.unavailable}
       selectedKindQuery={selectedKindQueryResult}
+      largeListGuard={largeListGuard}
       onSelectedKindChange={setSelectedKind}
       topPodMetrics={topPodMetrics}
       topNodeMetrics={topNodeMetrics}

package/src/components/timeline/TimelineList.tsx

@@ -15,9 +15,11 @@ interface TimelineListProps {
   onResourceClick?: NavigateToResource
   initialFilter?: ActivityTypeFilter
   initialTimeRange?: TimeRange
+  showDeleted: boolean
+  onShowDeletedChange: (showDeleted: boolean) => void
 }
 
-export function TimelineList({ namespaces, onViewChange, currentView, onResourceClick, initialFilter, initialTimeRange }: TimelineListProps) {
+export function TimelineList({ namespaces, onViewChange, currentView, onResourceClick, initialFilter, initialTimeRange, showDeleted, onShowDeletedChange }: TimelineListProps) {
   const hasLimitedAccess = useHasLimitedAccess()
   const [queryParams, setQueryParams] = useState<{ timeRange: TimeRange; kind?: string }>({
     timeRange: initialTimeRange ?? '1h',
@@ -32,6 +34,7 @@ export function TimelineList({ namespaces, onViewChange, currentView, onResource
     kind: queryParams.kind,
     timeRange: queryParams.timeRange,
     includeK8sEvents: true,
+    includeDeleted: showDeleted,
     limit: 500,
   })
 
@@ -64,6 +67,8 @@ export function TimelineList({ namespaces, onViewChange, currentView, onResource
       onResourceClick={onResourceClick}
       initialFilter={initialFilter}
       initialTimeRange={initialTimeRange}
+      showDeleted={showDeleted}
+      onShowDeletedChange={onShowDeletedChange}
     />
   )
 }

package/src/components/timeline/TimelineView.tsx

@@ -42,6 +42,10 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
   // Force list view on large clusters without namespace filter
   const effectiveInitialMode = requiresNamespaceFilter ? 'list' : (initialViewMode ?? 'swimlane')
   const [viewMode, setViewMode] = useState<TimelineViewMode>(effectiveInitialMode)
+  // Shared across list + swimlane so the toggle carries across the view switch,
+  // and so the swimlane fetch can exclude deletes server-side (before LIMIT)
+  // rather than only hiding them client-side after the 10k cap.
+  const [showDeleted, setShowDeleted] = useState(true)
 
   // Only fetch heavy swimlane data when actually showing swimlanes
   const showSwimlanes = viewMode === 'swimlane' && !requiresNamespaceFilter
@@ -53,6 +57,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     timeRange: 'all',
     includeK8sEvents: true,
     includeManaged: true,
+    includeDeleted: showDeleted,
     limit: 10000,
     enabled: showSwimlanes,
   })
@@ -119,6 +124,8 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
         onViewModeChange={setViewMode}
         topology={stableTopology}
         namespaces={namespaces}
+        showDeleted={showDeleted}
+        onShowDeletedChange={setShowDeleted}
       />
     )
   }
@@ -131,6 +138,8 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
       onResourceClick={onResourceClick}
       initialFilter={initialFilter}
       initialTimeRange={initialTimeRange}
+      showDeleted={showDeleted}
+      onShowDeletedChange={setShowDeleted}
     />
   )
 }