@skyhook-io/k8s-ui 1.8.0 → 1.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/checks/ChecksView.tsx

@@ -820,9 +820,9 @@ function FindingLine({
         </button>
       ) : resourceHref ? (
         // Opens in a new tab to match the ExternalLink glyph in `body`. For the
-        // Hub fleet view this href crosses the Hub→Cluster SPA boundary (a full
+        // Hub fleet view this href crosses the Hub to Cluster route-tree boundary (a full
         // document nav); a new tab keeps the Checks queue intact and avoids the
-        // cross-tree browser-Back dead-end (SKY-931).
+        // cross-tree browser-Back dead-end.
         <a href={resourceHref(r)} target="_blank" rel="noreferrer" className={cls}>
           {body}
         </a>

package/src/components/gitops/GitOpsTableView.tsx

@@ -102,7 +102,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 +116,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
@@ -184,7 +184,7 @@ export interface GitOpsTableViewProps {
   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 +217,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
@@ -483,7 +486,7 @@ export function GitOpsTableView({
   // be hidden behind a "nothing here" screen.
   if (totalGitOps === 0 && allRowsInput.length === 0 && !loading && !hasGlobalNamespaceFilter) {
     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/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(