@skyhook-io/k8s-ui 1.8.0 → 1.8.2

package/src/components/dock/useMultilinePasteConfirm.tsx

@@ -0,0 +1,75 @@
+import { useCallback, useRef, useState } from 'react'
+import { ConfirmDialog } from '../ui/ConfirmDialog'
+import type { PasteConfirmInfo, PasteConfirmer } from './terminalClipboard'
+
+// Session-scoped "Don't ask again" — app-wide for the page session (shared across
+// terminal tabs), reset on reload. Deliberately not persisted: a multi-line paste
+// warning re-appearing once per session is cheap, and it avoids a safety net the
+// user silently disabled long ago and forgot.
+let warningSuppressedThisSession = false
+
+/**
+ * Owns the themed confirmation shown before a risky multi-line paste runs in a
+ * terminal. Returns a `confirmPaste` callback to hand to setupTerminalClipboard
+ * and a `pasteDialog` node the host must render. Once the user opts out via
+ * "Don't ask again", pastes proceed without prompting for the rest of the session.
+ */
+export function useMultilinePasteConfirm(): { confirmPaste: PasteConfirmer; pasteDialog: React.ReactNode } {
+  const [pending, setPending] = useState<PasteConfirmInfo | null>(null)
+  const [dontAskAgain, setDontAskAgain] = useState(false)
+  const resolverRef = useRef<((ok: boolean) => void) | null>(null)
+
+  const confirmPaste = useCallback<PasteConfirmer>(
+    (info) => {
+      if (warningSuppressedThisSession) return Promise.resolve(true)
+      // A paste arriving while a dialog is still open supersedes it: decline the
+      // pending one so its promise resolves (the superseded paste is dropped)
+      // rather than leaking, then show the new prompt.
+      resolverRef.current?.(false)
+      return new Promise<boolean>((resolve) => {
+        resolverRef.current = resolve
+        setDontAskAgain(false)
+        setPending(info)
+      })
+    },
+    [],
+  )
+
+  const settle = useCallback(
+    (ok: boolean) => {
+      // Only suppress when the user actually proceeds — cancelling shouldn't
+      // quietly disable the warning.
+      if (ok && dontAskAgain) warningSuppressedThisSession = true
+      resolverRef.current?.(ok)
+      resolverRef.current = null
+      setPending(null)
+    },
+    [dontAskAgain],
+  )
+
+  const pasteDialog = pending ? (
+    <ConfirmDialog
+      open
+      variant="warning"
+      title="Paste multiple lines?"
+      message={`This pastes ${pending.lineCount} lines into the shell — they run immediately.`}
+      details={pending.text}
+      confirmLabel="Paste"
+      cancelLabel="Cancel"
+      onConfirm={() => settle(true)}
+      onClose={() => settle(false)}
+    >
+      <label className="flex items-center gap-2 text-sm text-theme-text-secondary cursor-pointer">
+        <input
+          type="checkbox"
+          checked={dontAskAgain}
+          onChange={(e) => setDontAskAgain(e.target.checked)}
+          className="w-4 h-4 rounded border-theme-border bg-theme-base accent-amber-500"
+        />
+        <span>Don&apos;t ask again this session</span>
+      </label>
+    </ConfirmDialog>
+  ) : null
+
+  return { confirmPaste, pasteDialog }
+}

package/src/components/gitops/GitOpsTableView.tsx

@@ -72,12 +72,23 @@ export type GitOpsMode = 'applications' | 'sources' | 'projects' | 'alerts'
 // the Scope switcher stays hidden until a second category lands. A one-option
 // switcher is just noise (an always-selected pill that can't be changed).
 const AVAILABLE_MODES: GitOpsMode[] = ['applications']
+const GITOPS_COUNT_GROUP_PREFIXES = [
+  'argoproj.io/',
+  'source.toolkit.fluxcd.io/',
+  'kustomize.toolkit.fluxcd.io/',
+  'helm.toolkit.fluxcd.io/',
+  'notification.toolkit.fluxcd.io/',
+]
 export type GitOpsViewMode = 'table' | 'tiles'
 // 'urgency' is the curated DEFAULT order (what needs attention first) — not a
 // column, so no header shows it as active; clicking any header replaces it with
 // that column's own semantics.
 export type SortKey = 'urgency' | 'name' | 'health' | 'sync' | 'lastSync' | 'project'
 
+function isGitOpsCountKey(key: string): boolean {
+  return GITOPS_COUNT_GROUP_PREFIXES.some((prefix) => key.startsWith(prefix))
+}
+
 // Row-level actions surfaced from the table's three-dot menu. The set
 // mirrors what the detail page exposes today; callers wire the mutations
 // + dialogs and dispatch via `onRowAction`. Argo-only actions (refresh,
@@ -102,7 +113,7 @@ export interface FleetClusterStamp {
   name: string
 }
 export type FleetDestinationMatch = 'in_cluster' | 'exact' | 'inferred' | 'unmatched'
-// FleetDestinationConfidence is a coarse signal the SPA uses to style
+// FleetDestinationConfidence is a coarse signal the frontend uses to style
 // the destination chip. `high` = URL-equality match (either direct or
 // via Argo cluster-secret), `medium` = name-equality match (more
 // fragile, more likely to be a false positive when two clusters share
@@ -116,7 +127,7 @@ export interface FleetDestinationStamp {
   // Confidence + reason are populated for non-unmatched rows. They power
   // the chip's visual treatment (a checkmark on high-confidence matches)
   // and its title= tooltip respectively. Both come from the hub —
-  // adding new values shouldn't break the SPA (unknown confidence
+  // adding new values shouldn't break the frontend (unknown confidence
   // falls back to no special styling).
   confidence?: FleetDestinationConfidence
   reason?: string
@@ -180,11 +191,12 @@ export interface GitOpsTableViewProps {
   // counts keyed "group/Kind" — e.g. "argoproj.io/Application" → 17. Drives
   // the Scope-section mode tabs and the empty-state check.
   counts: Record<string, number>
+  countsUnavailable?: string[]
   // Caller refresh — typically invalidates its useQuery + refetches.
   onRefresh?: () => void
   // Row click — caller routes to its own detail page. When the host also
   // passes `rowHrefFor`, the callback receives the MouseEvent so it can
-  // `preventDefault()` for SPA-local nav (e.g. react-router) or skip the
+  // `preventDefault()` for same-tree nav (e.g. react-router) or skip the
   // preventDefault to let the anchor's default full-page navigation run
   // (required for cross-router-boundary links).
   onRowClick: (row: GitOpsRow, event?: ReactMouseEvent) => void
@@ -217,8 +229,11 @@ export interface GitOpsTableViewProps {
   searchHotkey?: boolean
   // emptyStateTitle / emptyStateBody override the "No GitOps resources
   // detected" copy. Hub passes "No GitOps resources across the fleet".
-  emptyStateTitle?: string
-  emptyStateBody?: string
+  // ReactNode (not just string) so a host can split the body across lines
+  // (e.g. a `<br/>` between "what's wrong" and "what to do") or emphasize
+  // part of it. Strings still work unchanged.
+  emptyStateTitle?: ReactNode
+  emptyStateBody?: ReactNode
   /**
    * Which side the filter rail sits on. Default 'left' (OSS Radar, which
    * has no app sidebar). A host with its own left navigation rail (the
@@ -259,6 +274,7 @@ export function GitOpsTableView({
   loading,
   error,
   counts,
+  countsUnavailable,
   onRefresh,
   onRowClick,
   rowHrefFor,
@@ -353,7 +369,14 @@ export function GitOpsTableView({
     projects: counts['argoproj.io/AppProject'] ?? 0,
     alerts: counts['notification.toolkit.fluxcd.io/Alert'] ?? 0,
   }
-  const totalGitOps = Object.values(counts).reduce((sum, n) => sum + n, 0)
+  const totalGitOps = Object.entries(counts).reduce(
+    (sum, [key, n]) => sum + (isGitOpsCountKey(key) ? n : 0),
+    0,
+  )
+  const hasUnavailableGitOpsCounts = useMemo(
+    () => (countsUnavailable ?? []).some(isGitOpsCountKey),
+    [countsUnavailable],
+  )
 
   const projects = useMemo(
     () => countValues(allRows.map((row) => row.project).filter(Boolean)),
@@ -481,9 +504,9 @@ export function GitOpsTableView({
   // Also require zero actual rows: the cold-cache retry can populate `rows`
   // before the separate counts map catches up, and a populated table must not
   // be hidden behind a "nothing here" screen.
-  if (totalGitOps === 0 && allRowsInput.length === 0 && !loading && !hasGlobalNamespaceFilter) {
+  if (totalGitOps === 0 && allRowsInput.length === 0 && !loading && !hasGlobalNamespaceFilter && !hasUnavailableGitOpsCounts) {
     return (
-      <div className="flex h-full min-h-0 flex-1 items-center justify-center bg-theme-base p-4">
+      <div className="flex h-full min-h-0 flex-1 items-start justify-center bg-theme-base px-4 pb-4 pt-[22vh]">
         <div className="rounded-lg border border-theme-border bg-theme-surface p-8 text-center">
           <GitBranch className="mx-auto h-8 w-8 text-theme-text-tertiary" />
           <h2 className="mt-3 text-base font-semibold text-theme-text-primary">

package/src/components/gitops/detail-helpers.test.ts

@@ -80,7 +80,7 @@ describe('getGitOpsTool', () => {
     expect(getGitOpsTool('appprojects', 'argoproj.io')).toBe('argo')
   })
   // Argo kinds without an explicit group still route to 'argo'.
-  // Defends against a normalizer that drops `group` from the SPA payload.
+  // Defends against a normalizer that drops `group` from the frontend payload.
   test('Argo kinds without group still route to argo', () => {
     expect(getGitOpsTool('applications', undefined)).toBe('argo')
     expect(getGitOpsTool('applicationsets', '')).toBe('argo')

package/src/components/resources/ResourcesSidebar.tsx

@@ -34,7 +34,8 @@ export interface ResourcesSidebarProps {
   onSelectedKindChange: (kind: SelectedKindInfo) => void
   onKindChange?: () => void
   apiResources?: APIResource[]
-  resourceCounts?: Record<string, number>
+  resourceCounts?: Record<string, number | null>
+  resourceUnavailable?: string[]
   resourceForbidden?: string[]
   pinned?: PinnedItem[]
   togglePin?: (item: PinnedItem) => void
@@ -176,6 +177,7 @@ export function ResourcesSidebar({
   onKindChange,
   apiResources,
   resourceCounts,
+  resourceUnavailable,
   resourceForbidden,
   pinned = [],
   togglePin = () => {},
@@ -257,11 +259,11 @@ export function ResourcesSidebar({
     }))
   }, [categories])
 
-  // null for a key means "not loaded yet" (rendered as a placeholder
-  // dash in the badge). 0 means "the API replied and confirmed there
-  // are zero of this kind". Don't conflate them — otherwise the
-  // sidebar shows a confident "0" for every kind while the count
-  // payload is still in flight.
+  const unavailableKinds = useMemo(() => new Set(resourceUnavailable ?? []), [resourceUnavailable])
+
+  // null for a key means "count unknown/unavailable" (rendered as a
+  // placeholder dash in the badge). 0 means "the API replied and
+  // confirmed there are zero of this kind".
   const counts = useMemo(() => {
     const results: Record<string, number | null> = {}
     if (!resourceCounts) {
@@ -273,15 +275,16 @@ export function ResourcesSidebar({
     }
     for (const resource of resourcesToCount) {
       const key = resource.group ? `${resource.group}/${resource.kind}` : resource.kind
-      const v = resourceCounts[key]
-      // Treat missing keys in a present resourceCounts payload as
-      // "the API replied and didn't include this kind" → 0. Treat the
-      // entire payload being absent as "not loaded" → null (handled
-      // above).
-      results[key] = v ?? 0
+      if (unavailableKinds.has(key)) {
+        results[key] = null
+      } else if (key in resourceCounts) {
+        results[key] = resourceCounts[key] ?? null
+      } else {
+        results[key] = 0
+      }
     }
     return results
-  }, [resourcesToCount, resourceCounts])
+  }, [resourcesToCount, resourceCounts, unavailableKinds])
 
   // Track which resource kinds returned 403 Forbidden
   const forbiddenKinds = useMemo(() => {

package/src/components/resources/ResourcesView.tsx

@@ -1813,6 +1813,20 @@ export interface ResourceQueryResult {
   dataUpdatedAt?: number
 }
 
+export interface LargeListGuardState {
+  kind: string
+  count?: number
+  reason?: 'too-many' | 'count-unavailable'
+  limit: number
+  namespaces: string[]
+}
+
+function formatLargeListScope(namespaces: string[]): string {
+  if (namespaces.length === 0) return 'all namespaces'
+  if (namespaces.length === 1) return namespaces[0]
+  return `${namespaces.length.toLocaleString()} namespaces`
+}
+
 interface ResourcesViewProps {
   namespaces: string[]
   selectedResource?: SelectedResource | null
@@ -1826,8 +1840,10 @@ interface ResourcesViewProps {
   // Lightweight counts for sidebar badges (from /api/resource-counts)
   resourceCounts?: Record<string, number>
   resourceForbidden?: string[]
+  resourceUnavailable?: string[]
   // Single query for the currently selected kind's full data
   selectedKindQuery?: ResourceQueryResult
+  largeListGuard?: LargeListGuardState | null
   topPodMetrics?: TopPodMetrics[]
   topNodeMetrics?: TopNodeMetrics[]
   certExpiry?: Record<string, { expired?: boolean; daysLeft: number }>
@@ -2042,7 +2058,9 @@ export function ResourcesView({
   resourceQueries: resourceQueriesProp,
   resourceCounts: resourceCountsProp,
   resourceForbidden: resourceForbiddenProp,
+  resourceUnavailable: resourceUnavailableProp,
   selectedKindQuery: selectedKindQueryProp,
+  largeListGuard,
   topPodMetrics,
   topNodeMetrics,
   certExpiry,
@@ -3237,22 +3255,29 @@ export function ResourcesView({
   const counts = useMemo(() => {
     if (useNewCountsMode) {
       // resourceCountsProp uses "group/Kind" keys for CRDs, "Kind" for core — same format as sidebar
-      const results: Record<string, number> = {}
+      const unavailableKinds = new Set(resourceUnavailableProp ?? [])
+      const results: Record<string, number | null> = {}
       for (const resource of resourcesToCount) {
         const key = resource.group ? `${resource.group}/${resource.kind}` : resource.kind
-        results[key] = resourceCountsProp![key] ?? 0
+        if (unavailableKinds.has(key)) {
+          results[key] = null
+        } else if (key in resourceCountsProp!) {
+          results[key] = resourceCountsProp![key]
+        } else {
+          results[key] = 0
+        }
       }
       return results
     }
     // Legacy: derive counts from full query data
-    const results: Record<string, number> = {}
+    const results: Record<string, number | null> = {}
     resourcesToCount.forEach((resource, index) => {
       const data = resourceQueries[index]?.data
       const key = resource.group ? `${resource.group}/${resource.kind}` : resource.kind
       results[key] = Array.isArray(data) ? data.length : 0
     })
     return results
-  }, [useNewCountsMode, resourcesToCount, resourceCountsProp, resourceQueries])
+  }, [useNewCountsMode, resourcesToCount, resourceCountsProp, resourceUnavailableProp, resourceQueries])
 
   // Track which resource kinds returned 403 Forbidden
   const forbiddenKinds = useMemo(() => {
@@ -3987,6 +4012,7 @@ export function ResourcesView({
           apiResources={apiResourcesProp}
           resourceCounts={counts}
           resourceForbidden={Array.from(forbiddenKinds)}
+          resourceUnavailable={resourceUnavailableProp}
           pinned={pinned}
           togglePin={togglePin}
           isPinned={isPinned}
@@ -4484,6 +4510,26 @@ export function ResourcesView({
               <p className="text-theme-text-secondary font-medium">Access Restricted</p>
               <p className="text-sm mt-1">Insufficient permissions to list {selectedKind.kind} resources</p>
             </div>
+          ) : largeListGuard ? (
+            <div className="absolute inset-0 flex flex-col items-center justify-center text-theme-text-tertiary px-6 text-center">
+              <AlertTriangle className="w-8 h-8 text-amber-400 mb-2" />
+              <p className="text-theme-text-secondary font-medium">
+                {largeListGuard.reason === 'count-unavailable'
+                  ? `${largeListGuard.kind} count unavailable`
+                  : `Too many ${largeListGuard.kind.toLowerCase()} to show`}
+              </p>
+              <p className="text-sm mt-1 max-w-xl">
+                {largeListGuard.reason === 'count-unavailable'
+                  ? 'Radar could not verify this list is small enough to load. Choose a namespace or smaller namespace set to try again.'
+                  : `${largeListGuard.count?.toLocaleString()} ${largeListGuard.kind.toLowerCase()} are in the current scope. Choose a namespace or smaller namespace set to load this view.`}
+              </p>
+              <p className="text-xs mt-2 text-theme-text-disabled">
+                Radar limits full table loads to {largeListGuard.limit.toLocaleString()} resources to keep the UI responsive.
+              </p>
+              <p className="text-xs mt-2 text-theme-text-disabled">
+                Scope: {formatLargeListScope(largeListGuard.namespaces)}
+              </p>
+            </div>
           ) : filteredResources.length === 0 ? (
             <div className="absolute inset-0 flex flex-col items-center justify-center text-theme-text-tertiary">
               <p>No {selectedKind.kind} found</p>

package/src/components/resources/index.ts

@@ -16,6 +16,6 @@ export * from './resource-utils-trivy'
 export * from './resource-utils-traefik'
 export * from './resource-utils-velero'
 export { ResourcesView, ResourcesViewDataContext } from './ResourcesView'
-export type { ResourceQueryResult, ExtraColumn } from './ResourcesView'
+export type { ResourceQueryResult, ExtraColumn, LargeListGuardState } from './ResourcesView'
 export { ResourcesSidebar } from './ResourcesSidebar'
 export type { ResourcesSidebarProps, SelectedKindInfo, PinnedItem } from './ResourcesSidebar'

package/src/components/resources/resource-utils.ts

@@ -1127,6 +1127,10 @@ export function cronToHuman(cron: string): string {
   if (minute === '0' && hour === '0' && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
     return 'Daily at midnight'
   }
+  if (minute === '0' && hour.startsWith('*/') && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
+    const interval = hour.slice(2)
+    return interval === '1' ? 'Every hour' : `Every ${interval} hours`
+  }
   if (minute === '0' && hour !== '*' && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
     return `Daily at ${hour}:00`
   }

package/src/components/timeline/TimelineList.tsx

@@ -53,6 +53,11 @@ export interface TimelineListProps {
   onResourceClick?: NavigateToResource
   initialFilter?: ActivityTypeFilter
   initialTimeRange?: TimeRange
+  // Controlled "show deleted" toggle. When omitted the component manages it
+  // internally; the host passes it to share one toggle across list + swimlane
+  // and to drive server-side delete filtering.
+  showDeleted?: boolean
+  onShowDeletedChange?: (showDeleted: boolean) => void
 }
 
 const TIME_RANGES: { value: TimeRange; label: string }[] = [
@@ -80,11 +85,14 @@ const RESOURCE_KINDS = [
   'StatefulSet',
 ]
 
-export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasLimitedAccess, namespaces, onViewChange, currentView = 'list', onResourceClick, initialFilter, initialTimeRange }: TimelineListProps) {
+export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasLimitedAccess, namespaces, onViewChange, currentView = 'list', onResourceClick, initialFilter, initialTimeRange, showDeleted: showDeletedProp, onShowDeletedChange }: TimelineListProps) {
   const [searchTerm, setSearchTerm] = useState('')
   const [activityTypeFilter, setActivityTypeFilter] = useState<ActivityTypeFilter>(initialFilter ?? 'all')
   const [timeRange, setTimeRange] = useState<TimeRange>(initialTimeRange ?? '1h')
   const [kindFilter, setKindFilter] = useState<string>('')
+  const [showDeletedInternal, setShowDeletedInternal] = useState(true)
+  const showDeleted = showDeletedProp ?? showDeletedInternal
+  const setShowDeleted = onShowDeletedChange ?? setShowDeletedInternal
   const [expandedItem, setExpandedItem] = useState<string | null>(null)
 
   useEffect(() => {
@@ -111,6 +119,7 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
         const isUnhealthyChange = isChangeEvent(item) && (item.healthState === 'unhealthy' || item.healthState === 'degraded')
         if (!isUnhealthyChange) return false
       }
+      if (!showDeleted && item.eventType === 'delete') return false
 
       // Filter by search term
       if (searchTerm) {
@@ -129,7 +138,7 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
 
       return true
     })
-  }, [events, activityTypeFilter, searchTerm])
+  }, [events, activityTypeFilter, searchTerm, showDeleted])
 
   // Aggregated event group type
   type AggregatedItem = {
@@ -245,12 +254,13 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
 
   // Count stats
   const stats = useMemo(() => {
-    if (!events) return { total: 0, changes: 0, warnings: 0, unhealthy: 0 }
+    if (!events) return { total: 0, changes: 0, warnings: 0, unhealthy: 0, deleted: 0 }
     return {
       total: events.length,
       changes: events.filter((e) => isChangeEvent(e)).length,
       warnings: events.filter((e) => e.eventType === 'Warning').length,
       unhealthy: events.filter((e) => isChangeEvent(e) && (e.healthState === 'unhealthy' || e.healthState === 'degraded')).length,
+      deleted: events.filter((e) => e.eventType === 'delete').length,
     }
   }, [events])
 
@@ -306,6 +316,24 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
           />
         </div>
 
+        <button
+          type="button"
+          onClick={() => setShowDeleted(!showDeleted)}
+          title="Show or hide resources that were deleted, including Pods that no longer exist"
+          className={clsx(
+            'px-3 py-1.5 text-sm rounded-md transition-colors flex items-center gap-2 bg-theme-elevated',
+            showDeleted ? 'text-theme-text-primary' : 'text-theme-text-secondary hover:text-theme-text-primary'
+          )}
+        >
+          <Trash2 className="w-3 h-3" />
+          Deleted
+          {stats.deleted > 0 && (
+            <span className="text-xs px-1.5 rounded bg-theme-hover/50">
+              {stats.deleted}
+            </span>
+          )}
+        </button>
+
         {/* Kind filter */}
         <select
           value={kindFilter}

package/src/components/timeline/TimelineSwimlanes.tsx

@@ -21,6 +21,7 @@ import {
   Timer,
   RotateCcw,
   Shield,
+  Trash2,
 } from 'lucide-react'
 import type { TimelineEvent, Topology } from '../../types'
 import type { NavigateToResource } from '../../utils/navigation'
@@ -54,9 +55,14 @@ export interface TimelineSwimlanesProps {
   // RBAC capability flag (was a radar/web context); host passes it. Default false.
   hasLimitedAccess?: boolean
   // GitOps lane labels deep-link to a controller path; the host decides how to
-  // navigate (radar router push, or cross-SPA href). When omitted, GitOps lanes
+  // navigate (radar router push, or cross-route-tree href). When omitted, GitOps lanes
   // fall back to onResourceClick (the resource drawer).
   onNavigatePath?: (path: string) => void
+  // Controlled "show deleted" toggle. When omitted the component manages it
+  // internally; the host passes it to share one toggle with the list view and
+  // to drive server-side delete filtering on the underlying fetch.
+  showDeleted?: boolean
+  onShowDeletedChange?: (showDeleted: boolean) => void
 }
 
 interface ResourceLane extends BaseResourceLane {
@@ -180,7 +186,7 @@ function calculateInterestingnessWithBreakdown(lane: ResourceLane): ScoreBreakdo
   return breakdown
 }
 
-export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode, onViewModeChange, topology, namespaces, hasLimitedAccess = false, onNavigatePath }: TimelineSwimlanesProps) {
+export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode, onViewModeChange, topology, namespaces, hasLimitedAccess = false, onNavigatePath, showDeleted: showDeletedProp, onShowDeletedChange }: TimelineSwimlanesProps) {
   // Timeline lane labels for GitOps CRs (Application/Kustomization/HelmRelease)
   // deep-link to GitOps detail rather than the resource drawer — the lane is
   // already telling the user "this controller had changes/events"; the GitOps
@@ -203,6 +209,9 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
   const [expandedLanes, setExpandedLanes] = useState<Set<string>>(new Set())
   const [hasAutoZoomed, setHasAutoZoomed] = useState(false)
   const [groupByApp, setGroupByApp] = useState(true) // Group by app.kubernetes.io/name label
+  const [showDeletedInternal, setShowDeletedInternal] = useState(true)
+  const showDeleted = showDeletedProp ?? showDeletedInternal
+  const setShowDeleted = onShowDeletedChange ?? setShowDeletedInternal
 
   // Stable lane ordering - use ref to avoid render loop (lanes depends on order, order depends on lanes)
   const laneOrderRef = useRef<Map<string, number>>(new Map())
@@ -253,17 +262,18 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
 
   // Filter events by search term
   const filteredEvents = useMemo(() => {
-    if (!searchTerm) return events
+    const baseEvents = showDeleted ? events : events.filter(e => e.eventType !== 'delete')
+    if (!searchTerm) return baseEvents
 
     const term = searchTerm.toLowerCase()
-    return events.filter(e =>
+    return baseEvents.filter(e =>
       e.name.toLowerCase().includes(term) ||
       e.kind.toLowerCase().includes(term) ||
       e.namespace?.toLowerCase().includes(term) ||
       e.reason?.toLowerCase().includes(term) ||
       e.message?.toLowerCase().includes(term)
     )
-  }, [events, searchTerm])
+  }, [events, searchTerm, showDeleted])
 
   // Build hierarchical lanes using owner references + topology edges
   // Uses the shared utility from utils/resource-hierarchy.ts
@@ -514,6 +524,18 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
                 <span className="border-b border-dotted border-theme-text-tertiary">Group by app</span>
               </label>
             </Tooltip>
+            <Tooltip content="Show resources Radar observed being deleted, including Pods that no longer exist" position="bottom">
+              <label className="flex items-center gap-1.5 text-xs text-theme-text-secondary hover:text-theme-text-primary">
+                <input
+                  type="checkbox"
+                  checked={showDeleted}
+                  onChange={(e) => setShowDeleted(e.target.checked)}
+                  className="w-3.5 h-3.5 rounded border-theme-border-light bg-theme-elevated text-accent focus:ring-accent focus:ring-offset-0"
+                />
+                <Trash2 className="w-3.5 h-3.5" />
+                <span className="border-b border-dotted border-theme-text-tertiary">Deleted</span>
+              </label>
+            </Tooltip>
             {/* View toggle */}
             {onViewModeChange && (
               <div className="flex items-center gap-1 bg-theme-elevated rounded-lg p-1">

package/src/components/ui/SearchPillInput.tsx

@@ -38,6 +38,8 @@ export interface SearchPillInputProps {
   rightSlot?: React.ReactNode
   /** Applied to the input container (host owns the box chrome: height, bg, border). */
   className?: string
+  /** Applied to the `<input>` itself (host owns text size: e.g. a hero variant). */
+  inputClassName?: string
   'aria-label'?: string
   /** Fires when the modifier autocomplete opens/closes, so the host can suppress
       its own results dropdown while a modifier is being completed. */
@@ -101,6 +103,7 @@ export function SearchPillInput({
   leftSlot,
   rightSlot,
   className,
+  inputClassName,
   onSuggestingChange,
   ...rest
 }: SearchPillInputProps) {
@@ -110,6 +113,20 @@ export function SearchPillInput({
   const [sel, setSel] = useState(0)
   const [dismissed, setDismissed] = useState(false)
   const [anchor, setAnchor] = useState<{ left: number; bottom: number } | null>(null)
+  // Collapse a long pill list to a few + "+N more" so they don't flood the
+  // field (e.g. a broad namespace scope seeded as ns: pills). Expanding wraps
+  // them so every pill stays removable.
+  const [pillsExpanded, setPillsExpanded] = useState(false)
+  const MAX_VISIBLE_PILLS = 3
+  // Reset the expand toggle once there's nothing to collapse (pills cleared or
+  // trimmed) — otherwise a later seed of many pills would render expanded,
+  // re-flooding the field instead of collapsing.
+  useEffect(() => {
+    if (pills.length <= MAX_VISIBLE_PILLS + 1) setPillsExpanded(false)
+  }, [pills.length])
+  const collapsePills = !pillsExpanded && pills.length > MAX_VISIBLE_PILLS + 1
+  const shownPills = collapsePills ? pills.slice(0, MAX_VISIBLE_PILLS) : pills
+  const hiddenPillCount = pills.length - shownPills.length
 
   const mod = useMemo(() => activeModifier(text, aliases), [text, aliases])
 
@@ -181,12 +198,12 @@ export function SearchPillInput({
   }, [suggesting, filtered, sel, mod, text, pills, commitPill, onChange, onKeyDown])
 
   return (
-    <div ref={containerRef} className={clsx('flex items-center gap-1.5', className)} onClick={() => inputRef.current?.focus()}>
+    <div ref={containerRef} className={clsx('flex items-center gap-1.5', pillsExpanded && 'flex-wrap', className)} onClick={() => inputRef.current?.focus()}>
       {leftSlot}
-      {pills.map((p, i) => (
+      {shownPills.map((p, i) => (
         <span key={`${p.key}:${p.value}:${i}`} className="inline-flex items-center gap-1 shrink-0 rounded-md bg-theme-elevated border border-theme-border-light pl-1.5 pr-1 py-0.5 text-xs whitespace-nowrap">
           <span className="text-theme-text-tertiary">{p.key}:</span>
-          <span className="text-theme-text-primary font-medium">{p.value}</span>
+          <span className="max-w-[16ch] truncate font-medium text-theme-text-primary" title={p.value}>{p.value}</span>
           <button
             type="button"
             tabIndex={-1}
@@ -198,6 +215,27 @@ export function SearchPillInput({
           </button>
         </span>
       ))}
+      {collapsePills && hiddenPillCount > 0 && (
+        <button
+          type="button"
+          tabIndex={-1}
+          onMouseDown={(e) => { e.preventDefault(); setPillsExpanded(true) }}
+          className="shrink-0 rounded-md bg-theme-elevated border border-theme-border-light px-1.5 py-0.5 text-xs font-medium text-theme-text-secondary hover:text-theme-text-primary whitespace-nowrap"
+          title="Show all filters"
+        >
+          +{hiddenPillCount} more
+        </button>
+      )}
+      {pillsExpanded && pills.length > MAX_VISIBLE_PILLS + 1 && (
+        <button
+          type="button"
+          tabIndex={-1}
+          onMouseDown={(e) => { e.preventDefault(); setPillsExpanded(false) }}
+          className="shrink-0 rounded-md px-1.5 py-0.5 text-xs text-theme-text-tertiary hover:text-theme-text-primary whitespace-nowrap"
+        >
+          less
+        </button>
+      )}
       <input
         ref={inputRef}
         type="text"
@@ -207,7 +245,10 @@ export function SearchPillInput({
         onFocus={onFocus}
         placeholder={pills.length ? '' : placeholder}
         aria-label={rest['aria-label']}
-        className="flex-1 min-w-[80px] bg-transparent text-sm text-theme-text-primary placeholder-theme-text-tertiary outline-none"
+        className={clsx(
+          'flex-1 min-w-[80px] bg-transparent text-theme-text-primary placeholder-theme-text-tertiary outline-none',
+          inputClassName ?? 'text-sm',
+        )}
       />
       {rightSlot}
       {suggesting && anchor && mod && createPortal(

package/src/hooks/useKeyboardShortcuts.tsx

@@ -1,4 +1,5 @@
 import { createContext, useContext, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { isMac as isMacPlatform } from '../utils/platform'
 
 export type ShortcutScope = 'global' | 'topology' | 'resources' | 'timeline' | 'helm' | 'gitops' | 'traffic' | 'applications' | 'audit' | 'drawer'
 
@@ -78,7 +79,7 @@ interface KeyMatcher {
   altKey?: boolean
 }
 
-const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform)
+const isMac = isMacPlatform()
 
 function parseKeys(keys: string): KeyMatcher {
   // Multi-key sequence (space-separated, e.g. "g g")