@skyhook-io/k8s-ui 1.17.1 → 1.18.1

package/src/components/resources/ColumnPickerList.tsx

@@ -0,0 +1,174 @@
+import { useId, useLayoutEffect, useRef, useState } from 'react'
+import type React from 'react'
+import { GripVertical, X } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Tooltip } from '../ui/Tooltip'
+import { isMac } from '../../utils/platform'
+import { moveColumn, pinnedColumnCount } from './column-order'
+import type { Column } from './ResourcesView'
+
+interface ColumnPickerListProps {
+  /** Every offered column, in display order. */
+  columns: Column[]
+  visibleColumns: Set<string>
+  customColumnKeys: Set<string>
+  onToggle: (key: string) => void
+  onRemoveCustom: (key: string) => void
+  /** Receives the movable column keys in their new order. */
+  onReorder: (order: string[]) => void
+}
+
+/** The Columns picker's rows: show/hide, remove a custom column, and reorder by
+ *  dragging the grip or with Alt/Option+Up/Down on the row's checkbox. */
+export function ColumnPickerList({
+  columns,
+  visibleColumns,
+  customColumnKeys,
+  onToggle,
+  onRemoveCustom,
+  onReorder,
+}: ColumnPickerListProps) {
+  const pinned = pinnedColumnCount(columns)
+  const [dragKey, setDragKey] = useState<string | null>(null)
+  // Insertion point among the movable rows: 0 = before the first one.
+  const [dropGap, setDropGap] = useState<number | null>(null)
+  const [announcement, setAnnouncement] = useState('')
+  const hintId = useId()
+  const mac = isMac()
+
+  // React moves a keyed row by re-inserting DOM nodes, and re-inserting the
+  // focused checkbox drops focus. Put it back so repeated presses keep working.
+  const refocus = useRef<HTMLElement | null>(null)
+  useLayoutEffect(() => {
+    const el = refocus.current
+    if (!el) return
+    refocus.current = null
+    if (el.isConnected && document.activeElement !== el) el.focus()
+  })
+
+  const commitMove = (key: string, toIndex: number) => {
+    const next = moveColumn(columns, key, toIndex)
+    if (!next) return false
+    onReorder(next)
+    const col = columns.find(c => c.key === key)
+    setAnnouncement(`${col?.label ?? key} moved to position ${pinned + next.indexOf(key) + 1} of ${columns.length}.`)
+    return true
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent, key: string, movableIndex: number) => {
+    if (!e.altKey || (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')) return
+    e.preventDefault()
+    e.stopPropagation()
+    const up = e.key === 'ArrowUp'
+    refocus.current = e.target instanceof HTMLElement ? e.target : null
+    if (!commitMove(key, movableIndex + (up ? -1 : 1))) {
+      refocus.current = null
+      const label = columns.find(c => c.key === key)?.label ?? key
+      setAnnouncement(up ? `${label} is already at the top.` : `${label} is already at the bottom.`)
+    }
+  }
+
+  // The gap above the row when the pointer is in its top half, else below it.
+  const gapAt = (e: React.DragEvent, movableIndex: number) => {
+    const rect = e.currentTarget.getBoundingClientRect()
+    return e.clientY < rect.top + rect.height / 2 ? movableIndex : movableIndex + 1
+  }
+
+  const endDrag = () => {
+    setDragKey(null)
+    setDropGap(null)
+  }
+
+  return (
+    <>
+      <span id={hintId} className="sr-only">
+        {mac ? 'Press Option+Up Arrow or Option+Down Arrow to move this column.' : 'Press Alt+Up Arrow or Alt+Down Arrow to move this column.'}
+      </span>
+      <span className="sr-only" role="status" aria-live="polite">{announcement}</span>
+      {columns.map((col, i) => {
+        const isCustom = customColumnKeys.has(col.key)
+        const movableIndex = i - pinned
+        const movable = movableIndex >= 0
+        const fromIndex = dragKey ? columns.findIndex(c => c.key === dragKey) - pinned : -1
+        const showGap = (gap: number) => dropGap === gap && gap !== fromIndex && gap !== fromIndex + 1
+        return (
+          <div
+            key={col.key}
+            data-column-row
+            className={clsx(
+              'group relative flex items-center gap-1.5 pl-1.5 pr-3 py-1.5 hover:bg-theme-elevated',
+              dragKey === col.key && 'opacity-50',
+            )}
+            onKeyDown={movable ? e => handleKeyDown(e, col.key, movableIndex) : undefined}
+            onDragOver={movable && dragKey ? e => {
+              e.preventDefault()
+              e.dataTransfer.dropEffect = 'move'
+              setDropGap(gapAt(e, movableIndex))
+            } : undefined}
+            onDrop={movable && dragKey ? e => {
+              e.preventDefault()
+              const gap = gapAt(e, movableIndex)
+              commitMove(dragKey, gap > fromIndex ? gap - 1 : gap)
+              endDrag()
+            } : undefined}
+          >
+            {movable && showGap(movableIndex) && (
+              <span aria-hidden className="pointer-events-none absolute inset-x-2 -top-px h-0.5 rounded-full bg-accent" />
+            )}
+            {movable && showGap(movableIndex + 1) && i === columns.length - 1 && (
+              <span aria-hidden className="pointer-events-none absolute inset-x-2 -bottom-px h-0.5 rounded-full bg-accent" />
+            )}
+            {movable ? (
+              <Tooltip content={mac ? 'Drag to reorder, or press ⌥↑ / ⌥↓' : 'Drag to reorder, or press Alt+↑ / Alt+↓'} position="left">
+                <span
+                  aria-hidden
+                  draggable
+                  onDragStart={e => {
+                    e.dataTransfer.effectAllowed = 'move'
+                    // Firefox starts a drag only when data is set.
+                    e.dataTransfer.setData('text/plain', col.key)
+                    const row = e.currentTarget.closest('[data-column-row]')
+                    if (row instanceof HTMLElement) e.dataTransfer.setDragImage(row, 12, row.offsetHeight / 2)
+                    setDragKey(col.key)
+                  }}
+                  onDragEnd={endDrag}
+                  className="flex shrink-0 cursor-grab items-center text-theme-text-tertiary opacity-60 group-hover:opacity-100 active:cursor-grabbing"
+                >
+                  <GripVertical className="w-3.5 h-3.5" />
+                </span>
+              </Tooltip>
+            ) : (
+              <span aria-hidden className="w-3.5 shrink-0" />
+            )}
+            <label className="flex items-center gap-2 flex-1 min-w-0 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={visibleColumns.has(col.key)}
+                onChange={() => onToggle(col.key)}
+                disabled={col.key === 'name'}
+                aria-describedby={movable ? hintId : undefined}
+                className="rounded border-theme-border"
+              />
+              <span className={clsx(
+                'text-sm truncate',
+                col.key === 'name' ? 'text-theme-text-tertiary' : 'text-theme-text-primary'
+              )} title={col.tooltip || col.label}>
+                {col.label}
+              </span>
+            </label>
+            {isCustom && (
+              <button
+                type="button"
+                onClick={() => onRemoveCustom(col.key)}
+                className="shrink-0 p-0.5 text-theme-text-tertiary hover:text-red-500 opacity-0 group-hover:opacity-100 focus:opacity-100"
+                title="Remove column"
+              >
+                <X className="w-3.5 h-3.5" />
+              </button>
+            )}
+          </div>
+        )
+      })}
+    </>
+  )
+}

package/src/components/resources/ResourcesSidebar.test.tsx

@@ -68,6 +68,7 @@ describe('ResourcesSidebar count visibility', () => {
         onSelectedKindChange={() => {}}
         apiResources={[horizontalPodAutoscaler]}
         resourceCounts={{ 'autoscaling/HorizontalPodAutoscaler': 0 }}
+        resourceCoverage={{ 'autoscaling/HorizontalPodAutoscaler': { status: 'complete', gaps: [], scope: { type: 'all_namespaces' }, read: { type: 'all_namespaces' } } }}
       />
     )
 
@@ -82,6 +83,7 @@ describe('ResourcesSidebar count visibility', () => {
         onSelectedKindChange={() => {}}
         apiResources={[horizontalPodAutoscaler]}
         resourceCounts={{ 'autoscaling/HorizontalPodAutoscaler': 0 }}
+        resourceCoverage={{ 'autoscaling/HorizontalPodAutoscaler': { status: 'complete', gaps: [], scope: { type: 'all_namespaces' }, read: { type: 'all_namespaces' } } }}
       />
     )
 
@@ -96,6 +98,7 @@ describe('ResourcesSidebar count visibility', () => {
         onSelectedKindChange={() => {}}
         apiResources={[horizontalPodAutoscaler]}
         resourceCounts={{ 'autoscaling/HorizontalPodAutoscaler': 0 }}
+        resourceCoverage={{ 'autoscaling/HorizontalPodAutoscaler': { status: 'complete', gaps: [], scope: { type: 'all_namespaces' }, read: { type: 'all_namespaces' } } }}
         pinned={[{ name: 'horizontalpodautoscalers', kind: 'HorizontalPodAutoscaler', group: 'autoscaling' }]}
         isPinned={(name, group) => name === 'horizontalpodautoscalers' && group === 'autoscaling'}
       />
@@ -197,6 +200,33 @@ describe('ResourcesSidebar category workspaces', () => {
   })
 })
 
+describe('ResourcesSidebar counts from a Radar that predates coverage', () => {
+  it('hides an empty kind and shows plain counts, as before coverage', () => {
+    const hidden = renderToString(<ResourcesSidebar selectedKind={null} onSelectedKindChange={() => {}} apiResources={[horizontalPodAutoscaler]} resourceCounts={{ 'autoscaling/HorizontalPodAutoscaler': 0 }} resourceCoverage={{ 'autoscaling/HorizontalPodAutoscaler': { status: 'unknown' } }} />)
+    expect(hidden).not.toContain('HorizontalPodAutoscaler')
+    const shown = renderToString(<ResourcesSidebar selectedKind={null} onSelectedKindChange={() => {}} apiResources={[horizontalPodAutoscaler]} resourceCounts={{ 'autoscaling/HorizontalPodAutoscaler': 23 }} />)
+    expect(shown).toContain('>23</')
+    expect(shown).not.toContain('≥')
+  })
+})
+
+it('sizes the count badge to fit a bounded count in the thousands', () => {
+  const html = renderToString(<ResourcesSidebar selectedKind={null} onSelectedKindChange={() => {}} apiResources={[horizontalPodAutoscaler]} resourceCounts={{ 'autoscaling/HorizontalPodAutoscaler': 12345 }} resourceCoverage={{ 'autoscaling/HorizontalPodAutoscaler': { status: 'partial', gaps: [], scope: { type: 'all_namespaces' }, read: { type: 'namespaces', namespaces: { names: ['alpha'], count: 1 } } } }} />)
+  const label = `≥${(12345).toLocaleString()}`
+  const badge = html.slice(html.lastIndexOf('<span', html.indexOf(label)), html.indexOf(label))
+  const classes = badge.match(/class="([^"]*)"/)?.[1].split(/\s+/) ?? []
+  expect(classes).toContain('min-w-8')
+  expect(classes).not.toContain('w-8')
+  expect(classes).not.toContain('w-9')
+})
+
+it('keeps a partial zero visible rather than hiding the kind as empty', () => {
+  const html = renderToString(<ResourcesSidebar selectedKind={null} onSelectedKindChange={() => {}} apiResources={[horizontalPodAutoscaler]} resourceCounts={{ 'autoscaling/HorizontalPodAutoscaler': 0 }} resourceCoverage={{ 'autoscaling/HorizontalPodAutoscaler': { status: 'partial', gaps: [], scope: { type: 'all_namespaces' }, read: { type: 'namespaces', namespaces: { names: ['alpha'], count: 1 } } } }} />)
+  expect(html).toContain('HorizontalPodAutoscaler')
+  expect(html).toContain('–')
+  expect(html).not.toContain('≥0')
+})
+
 describe('sidebarDestinationsMatching', () => {
   const views = ['Clusters', 'Backups', 'Declarations', 'Pooling', 'Operator'].map((label) => ({ id: label, label, onSelect: () => {} }))
   const resources = [{ group: 'postgresql.cnpg.io' }, { group: 'barmancloud.cnpg.io' }]
@@ -215,3 +245,22 @@ describe('sidebarDestinationsMatching', () => {
     expect(labels('  ')).toHaveLength(5)
   })
 })
+
+it('qualifies the collapsed category total as well as the individual kind', () => {
+  const widget = { name: 'widgets', kind: 'Widget', group: 'read.example.test', version: 'v1', namespaced: true, isCrd: true, verbs: ['get', 'list', 'watch'] }
+  const html = renderToString(<ResourcesSidebar selectedKind={null} onSelectedKindChange={() => {}} apiResources={[widget]} resourceCounts={{ 'read.example.test/Widget': 3 }} resourceCoverage={{ 'read.example.test/Widget': { status: 'partial', gaps: [], scope: { type: 'all_namespaces' }, read: { type: 'namespaces', namespaces: { names: ['alpha'], count: 1 } } } }} />)
+  const start = html.indexOf('>Test Read Example</span>')
+  expect(start).toBeGreaterThan(-1)
+  expect(html.slice(start, html.indexOf('</button>', start))).toContain('≥3')
+})
+
+it('bounds a category total over kinds Radar collects in only some namespaces', () => {
+  const widget = { name: 'widgets', kind: 'Widget', group: 'read.example.test', version: 'v1', namespaced: true, isCrd: true, verbs: ['get', 'list', 'watch'] }
+  const gadget = { ...widget, name: 'gadgets', kind: 'Gadget' }
+  const collected = (ns: string) => ({ status: 'complete' as const, narrowedBy: ['namespace_collection'], gaps: [], scope: { type: 'namespaces' as const, namespaces: { names: [ns], count: 1 } }, read: { type: 'namespaces' as const, namespaces: { names: [ns], count: 1 } } })
+  const html = renderToString(<ResourcesSidebar selectedKind={null} onSelectedKindChange={() => {}} apiResources={[widget, gadget]} resourceCounts={{ 'read.example.test/Widget': 3, 'read.example.test/Gadget': 2 }} resourceCoverage={{ 'read.example.test/Widget': collected('alpha'), 'read.example.test/Gadget': collected('beta') }} />)
+  const start = html.indexOf('>Test Read Example</span>')
+  expect(start).toBeGreaterThan(-1)
+  // Each kind is exact where Radar collects it; their sum is exact for no scope.
+  expect(html.slice(start, html.indexOf('</button>', start))).toContain('≥5')
+})

package/src/components/resources/ResourcesSidebar.tsx

@@ -1,3 +1,5 @@
+import type { ResourceCoverage } from '../../types/resource-coverage'
+import { boundedCountLabel, isEmptyCount, isLowerBound, resourceCountHint, resourceCountLabel } from '../../utils/resource-coverage'
 import { useState, useMemo, useEffect, useRef, useCallback, useId, forwardRef, type ComponentType } from 'react'
 import {
   Search,
@@ -60,6 +62,7 @@ export interface ResourcesSidebarProps {
   onKindChange?: () => void
   apiResources?: APIResource[]
   resourceCounts?: Record<string, number | null>
+  resourceCoverage?: Record<string, ResourceCoverage>
   resourceUnavailable?: string[]
   resourceForbidden?: string[]
   pinned?: PinnedItem[]
@@ -143,6 +146,7 @@ interface ResourceTypeButtonProps {
   /** `null` means "count not loaded yet" — rendered as a placeholder so
    *  the badge doesn't flicker to "0" while the API call is in flight. */
   count: number | null
+  coverage?: ResourceCoverage
   isSelected: boolean
   /** Keyboard-highlight state (arrow nav in the filter input). */
   isHighlighted?: boolean
@@ -154,7 +158,7 @@ interface ResourceTypeButtonProps {
 }
 
 const ResourceTypeButton = forwardRef<HTMLButtonElement, ResourceTypeButtonProps>(
-  function ResourceTypeButton({ resource, count, isSelected, isHighlighted, isForbidden: forbidden, isPinned, onTogglePin, onClick, indent }, ref) {
+  function ResourceTypeButton({ resource, count, coverage, isSelected, isHighlighted, isForbidden: forbidden, isPinned, onTogglePin, onClick, indent }, ref) {
     const Icon = getResourceIcon(resource.kind, resource.group)
     return (
       <button
@@ -214,13 +218,14 @@ const ResourceTypeButton = forwardRef<HTMLButtonElement, ResourceTypeButtonProps
               </span>
             </Tooltip>
           ) : (
-            <span className={clsx(
-              'text-xs py-0.5 rounded text-center font-mono',
-              isSelected ? 'bg-skyhook-500/30 selection-text' : 'bg-theme-elevated',
-              count < 1000 ? 'w-8' : 'w-9',
-            )}>
-              {count}
-            </span>
+            <Tooltip disabled={!resourceCountHint(coverage)} content={resourceCountHint(coverage)} position="left">
+              <span className={clsx(
+                'text-xs py-0.5 px-1 min-w-8 rounded text-center font-mono',
+                isSelected ? 'bg-skyhook-500/30 selection-text' : 'bg-theme-elevated',
+              )}>
+                {resourceCountLabel(count, coverage)}
+              </span>
+            </Tooltip>
           )}
         </div>
       </button>
@@ -234,6 +239,7 @@ export function ResourcesSidebar({
   onKindChange,
   apiResources,
   resourceCounts,
+  resourceCoverage,
   resourceUnavailable,
   resourceForbidden,
   pinned = [],
@@ -401,20 +407,25 @@ export function ResourcesSidebar({
         (sum, resource) => sum + (counts[resource.group ? `${resource.group}/${resource.kind}` : resource.kind] ?? 0),
         0
       )
+      const lowerBound = category.resources.some(resource =>
+        isLowerBound(resourceCoverage?.[resource.group ? `${resource.group}/${resource.kind}` : resource.kind]))
+      const totalLabel = boundedCountLabel(total, lowerBound)
 
-      // Filter resources: hide only confirmed-empty kinds. Unknown counts stay
-      // visible as a dash so count coverage gaps do not masquerade as emptiness.
+      // Filter resources: hide only empty kinds. An unknown count stays visible
+      // as a dash, and a partial zero as one too, so count coverage gaps do not
+      // masquerade as emptiness.
       const visibleResources = category.resources.filter(resource => {
         const count = counts[resource.group ? `${resource.group}/${resource.kind}` : resource.kind]
         const isSelectedResource =
           (effectiveSelectedKind.name === resource.name && effectiveSelectedKind.group === resource.group) ||
           (effectiveSelectedKind.kind.toLowerCase() === resource.kind.toLowerCase() && effectiveSelectedKind.group === resource.group)
-        const shouldShow = isSelectedResource || count === null || (count ?? 0) > 0 || showEmptyKinds
+        const key = resource.group ? `${resource.group}/${resource.kind}` : resource.kind
+        const shouldShow = isSelectedResource || count === null || !isEmptyCount(count ?? 0, resourceCoverage?.[key]) || showEmptyKinds
         if (!shouldShow) totalHiddenKinds++
         return shouldShow
       })
 
-      return { ...category, total, visibleResources }
+      return { ...category, total, totalLabel, visibleResources }
     })
 
     // Sort: the category whose workspace is open first, then categories with
@@ -435,7 +446,7 @@ export function ResourcesSidebar({
     })
 
     return { sortedCategories: visibleCategories, hiddenKindsCount: totalHiddenKinds, hiddenGroupsCount: totalHiddenGroups }
-  }, [categories, counts, showEmptyKinds, effectiveSelectedKind.name, effectiveSelectedKind.kind, effectiveSelectedKind.group, categoryWorkspaces, activeDestinationCategory])
+  }, [categories, counts, resourceCoverage, showEmptyKinds, effectiveSelectedKind.name, effectiveSelectedKind.kind, effectiveSelectedKind.group, categoryWorkspaces, activeDestinationCategory])
 
   // Filter sidebar categories/kinds by the kind search term
   const filteredCategories = useMemo(() => {
@@ -621,6 +632,7 @@ export function ResourcesSidebar({
                       ref={highlighted ? highlightedRef : (isResourceSelected ? selectedSidebarRef : null)}
                       resource={{ name: p.name, kind: p.kind, group: p.group, version: '', namespaced: true, isCrd: false, verbs: [] }}
                       count={counts[p.group ? `${p.group}/${p.kind}` : p.kind] ?? null}
+                      coverage={resourceCoverage?.[p.group ? `${p.group}/${p.kind}` : p.kind]}
                       isSelected={isResourceSelected}
                       isHighlighted={highlighted}
                       isForbidden={forbiddenKinds.has(p.group ? `${p.group}/${p.kind}` : p.kind)}
@@ -653,8 +665,8 @@ export function ResourcesSidebar({
                   <CollapseChevron open={isExpanded} className="w-3 h-3" />
                   <span className="flex-1 text-left truncate" title={rawGroupTitle}>{category.name}</span>
                   {!isExpanded && (
-                    <span className={clsx('text-xs py-0.5 rounded bg-theme-elevated text-theme-text-secondary font-normal normal-case text-center font-mono', category.total < 1000 ? 'w-8' : 'w-9')}>
-                      {category.total}
+                    <span className="text-xs py-0.5 px-1 min-w-8 rounded bg-theme-elevated text-theme-text-secondary font-normal normal-case text-center font-mono">
+                      {category.totalLabel}
                     </span>
                   )}
                 </button>
@@ -692,6 +704,7 @@ export function ResourcesSidebar({
                         ref={highlighted ? highlightedRef : (isResourceSelected ? selectedSidebarRef : null)}
                         resource={resource}
                         count={counts[resource.group ? `${resource.group}/${resource.kind}` : resource.kind] ?? null}
+                        coverage={resourceCoverage?.[resource.group ? `${resource.group}/${resource.kind}` : resource.kind]}
                         isSelected={showSelected}
                         isHighlighted={highlighted}
                         isForbidden={forbiddenKinds.has(resource.group ? `${resource.group}/${resource.kind}` : resource.kind)}
@@ -748,12 +761,14 @@ export function ResourcesSidebar({
                     </span>
                   </Tooltip>
                 ) : (
-                  <span className={clsx(
-                    'badge font-mono',
-                    isSelected ? 'bg-skyhook-500/30 selection-text' : 'bg-theme-elevated',
-                  )}>
-                    {count}
-                  </span>
+                  <Tooltip disabled={!resourceCountHint(resourceCoverage?.[kindKey])} content={resourceCountHint(resourceCoverage?.[kindKey])} position="left">
+                    <span className={clsx(
+                      'badge font-mono',
+                      isSelected ? 'bg-skyhook-500/30 selection-text' : 'bg-theme-elevated',
+                    )}>
+                      {resourceCountLabel(count, resourceCoverage?.[kindKey])}
+                    </span>
+                  </Tooltip>
                 )}
               </button>
             )

package/src/components/resources/ResourcesView.kind-view.test.tsx

@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { act } from 'react'
+import { act, type ComponentProps } from 'react'
 import { createRoot } from 'react-dom/client'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { ResourcesView } from './ResourcesView'
@@ -83,7 +83,7 @@ it('closes bulk dialogs when the same kind switches to a custom view and keeps t
   expect(document.querySelector('[role="dialog"]')).toBeNull()
   render(false)
   expect(host.textContent).not.toContain('1 selected')
-  expect(host.querySelector('input[title="Select all"]')).toBeNull()
+  expect(host.querySelector<HTMLInputElement>('input[title="Select all"]')!.checked).toBe(false)
   expect(document.querySelector('[role="dialog"]')).toBeNull()
   act(() => host.querySelector<SVGElement>('button .lucide-git-compare')!.closest<HTMLButtonElement>('button')!.click())
   act(() => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'j', bubbles: true })))
@@ -147,3 +147,150 @@ it('skips hidden-table sort and filter aggregation for a loaded list, then resum
   expect(getSortValue).toHaveBeenCalled()
   expect(getFilterValue).toHaveBeenCalled()
 })
+
+const deployments: APIResource = { group: 'apps', version: 'v1', kind: 'Deployment', name: 'deployments', namespaced: true, isCrd: false, verbs: ['get', 'list'] }
+const widgets: APIResource = { group: 'example.com', version: 'v1', kind: 'Widget', name: 'widgets', namespaced: true, isCrd: true, verbs: ['get', 'list'] }
+const checkboxKey = 'radar-resource-checkboxes'
+const key = (value: string) => act(() => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: value, bubbles: true })))
+const required = <T extends Element>(selector: string, parent: ParentNode = host): T => {
+  const element = parent.querySelector<T>(selector)
+  if (!element) throw new Error(`Missing element: ${selector}`)
+  return element
+}
+const clickButton = (label: string, parent: ParentNode = host) => {
+  const button = [...parent.querySelectorAll('button')].find(candidate => candidate.textContent?.trim() === label)
+  if (!button) throw new Error(`Missing button: ${label}`)
+  act(() => button.click())
+}
+const renderBulkTable = (initialKind = pods, bulkEnabled = true) => {
+  const selected = vi.fn()
+  const remove = vi.fn<NonNullable<ComponentProps<typeof ResourcesView>['onBulkDelete']>>()
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  const render = (kind = initialKind, items = [pod]) => act(() => root.render(<KeyboardShortcutProvider><ResourcesView
+    namespaces={['test']}
+    apiResources={[pods, deployments, widgets]}
+    resourceCounts={{ [kind.kind]: items.length }}
+    selectedKindQuery={{ isLoading: false, data: items, resourceName: kind.name, group: kind.group }}
+    locationPathname={`/resources/${kind.name}`}
+    locationSearch={kind.group ? `?apiGroup=${kind.group}` : ''}
+    onNavigate={() => {}}
+    onResourceClick={selected}
+    onBulkDelete={bulkEnabled ? remove : undefined}
+  /></KeyboardShortcutProvider>))
+  render()
+  return { selected, remove, render }
+}
+
+it.each([pods, deployments, widgets])('hides selection by default on $kind and enables it without an empty action bar', kind => {
+  renderBulkTable(kind)
+  expect(host.querySelector('input[title="Select all"]')).toBeNull()
+  act(() => required<HTMLButtonElement>('button[aria-label="Show selection checkboxes"]').click())
+  expect(host.querySelector('input[title="Select all"]')).not.toBeNull()
+  expect(host.textContent).not.toContain('0 selected')
+  expect(localStorage.getItem(checkboxKey)).toBe('true')
+})
+
+it('remembers both visibility choices across remounts without remembering selected rows', () => {
+  renderBulkTable()
+  key('b')
+  act(() => required<HTMLInputElement>('input[title="Select all"]').click())
+  expect(host.textContent).toContain('1 selected')
+  act(() => root.unmount()); host.remove()
+  renderBulkTable(deployments)
+  expect(host.querySelector('input[title="Select all"]')).not.toBeNull()
+  expect(host.textContent).not.toContain('1 selected')
+  key('b')
+  expect(localStorage.getItem(checkboxKey)).toBe('false')
+  act(() => root.unmount()); host.remove()
+  renderBulkTable()
+  expect(host.querySelector('input[title="Select all"]')).toBeNull()
+})
+
+it('keeps keyboard activation for inspection while checkboxes select', () => {
+  const { selected } = renderBulkTable()
+  key('b')
+  act(() => required<HTMLInputElement>('input[title="Select all"]').click())
+  expect(selected).not.toHaveBeenCalled()
+  expect(host.textContent).toContain('1 selected')
+  key('j'); key('Enter')
+  expect(selected).toHaveBeenCalledTimes(1)
+  expect(host.textContent).toContain('1 selected')
+  key('Escape')
+  expect(host.textContent).not.toContain('1 selected')
+  expect(host.querySelector('input[title="Select all"]')).not.toBeNull()
+  act(() => required<HTMLInputElement>('input[title="Select all"]').click())
+  clickButton('Clear selection')
+  expect(host.textContent).not.toContain('1 selected')
+  expect(localStorage.getItem(checkboxKey)).toBe('true')
+})
+
+it('temporarily hides checkboxes for compare and clears selection on kind changes', () => {
+  const { render } = renderBulkTable()
+  key('b')
+  act(() => required<HTMLInputElement>('input[title="Select all"]').click())
+  act(() => required<HTMLButtonElement>('button:has(.lucide-git-compare)').click())
+  expect(host.querySelector('input[title="Select all"]')).toBeNull()
+  key('Escape')
+  expect(host.querySelector('input[title="Select all"]')).not.toBeNull()
+  expect(host.textContent).not.toContain('1 selected')
+  act(() => required<HTMLInputElement>('input[title="Select all"]').click())
+  render(deployments)
+  expect(host.querySelector('input[title="Select all"]')).not.toBeNull()
+  expect(host.textContent).not.toContain('1 selected')
+  render(widgets)
+  expect(host.querySelector('input[title="Select all"]')).not.toBeNull()
+  expect(localStorage.getItem(checkboxKey)).toBe('true')
+})
+
+it('can show selection from compare without turning off the saved preference', () => {
+  localStorage.setItem(checkboxKey, 'true')
+  renderBulkTable()
+  act(() => required<HTMLButtonElement>('button:has(.lucide-git-compare)').click())
+  key('b')
+  expect(host.querySelector('[aria-label="Compare resources tray"]')).toBeNull()
+  expect(host.querySelector('input[title="Select all"]')).not.toBeNull()
+  expect(localStorage.getItem(checkboxKey)).toBe('true')
+})
+
+it('keeps delete confirmation and clears successful selection without hiding checkboxes', () => {
+  const { remove } = renderBulkTable()
+  key('b')
+  act(() => required<HTMLInputElement>('input[title="Select all"]').click())
+  clickButton('Delete')
+  const dialog = required<HTMLElement>('[role="dialog"]', document)
+  expect(dialog.textContent).toContain('Delete 1 Pod?')
+  expect(remove).not.toHaveBeenCalled()
+  clickButton('Delete 1 resource', dialog)
+  expect(remove).toHaveBeenCalledWith([{ kind: 'pods', group: '', namespace: 'test', name: 'example' }], expect.objectContaining({ force: false }))
+  act(() => remove.mock.calls[0]?.[1]?.onSuccess?.())
+  expect(host.textContent).not.toContain('1 selected')
+  expect(host.querySelector('input[title="Select all"]')).not.toBeNull()
+  expect(localStorage.getItem(checkboxKey)).toBe('true')
+})
+
+it.each(['false', 'garbage', 'null', '1'])('ignores invalid or disabled visibility value %s', value => {
+  localStorage.setItem(checkboxKey, value)
+  renderBulkTable()
+  expect(host.querySelector('input[title="Select all"]')).toBeNull()
+})
+
+it('keeps toggling usable when browser storage is unavailable', () => {
+  vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => { throw new Error('Storage unavailable') })
+  vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => { throw new Error('Storage unavailable') })
+  renderBulkTable()
+  expect(host.querySelector('input[title="Select all"]')).toBeNull()
+  key('b')
+  expect(host.querySelector('input[title="Select all"]')).not.toBeNull()
+  key('b')
+  expect(host.querySelector('input[title="Select all"]')).toBeNull()
+})
+
+it('does not offer selection without a bulk action callback even with saved visibility', () => {
+  localStorage.setItem(checkboxKey, 'true')
+  renderBulkTable(pods, false)
+  expect(host.querySelector('input[title="Select all"]')).toBeNull()
+  expect(host.querySelector('button .lucide-list-checks')).toBeNull()
+  key('b')
+  expect(host.querySelector('input[title="Select all"]')).toBeNull()
+  expect(localStorage.getItem(checkboxKey)).toBe('true')
+})

package/src/components/resources/ResourcesView.selected-kind.test.ts

@@ -3,6 +3,7 @@ import type { APIResource } from '../../types'
 import {
   canonicalizeSelectedKind,
   deriveSidebarResourceCounts,
+  deriveSidebarResourceCoverage,
   LOADED_RESOURCE_COUNT_TTL_MS,
   resourceQueryMatchesSelectedKind,
 } from './ResourcesView'
@@ -141,3 +142,16 @@ describe('resourceQueryMatchesSelectedKind', () => {
     ).toBe(true)
   })
 })
+
+
+describe('loaded count coverage', () => {
+  const partial = { status: 'partial' as const, scope: { type: 'all_namespaces' as const }, read: { type: 'namespaces' as const, namespaces: { names: ['alpha'], count: 1 } }, gaps: [{ code: 'radar_namespace_not_collected' }] }
+  it('retains a cached partial count qualification and expires both together', () => {
+    const cache = { Endpoints: { count: 0, expiresAt: 20, coverage: partial } }
+    expect(deriveSidebarResourceCoverage({}, {}, cache, 10)).toEqual({ Endpoints: partial })
+    expect(deriveSidebarResourceCoverage({}, {}, cache, 20)).toEqual({})
+  })
+  it('does not pair older unqualified count responses with cached newer metadata', () => {
+    expect(deriveSidebarResourceCoverage({ Endpoints: 0 }, undefined, { Endpoints: { count: 0, expiresAt: 20, coverage: partial } }, 10)).toEqual({ Endpoints: { status: 'unknown' } })
+  })
+})

package/src/components/resources/ResourcesView.trivy-search.test.tsx

@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { ResourcesView } from './ResourcesView'
+import { KeyboardShortcutProvider } from '../../hooks/useKeyboardShortcuts'
+import type { APIResource } from '../../types'
+
+;(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true
+window.matchMedia = vi.fn().mockReturnValue({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() })
+Element.prototype.scrollIntoView = vi.fn()
+
+const group = 'aquasecurity.github.io'
+const vulnReports: APIResource = { group, version: 'v1alpha1', kind: 'VulnerabilityReport', name: 'vulnerabilityreports', namespaced: true, isCrd: true, verbs: ['get', 'list'] }
+const report = (name: string, vulnerabilityID: string) => ({
+  apiVersion: `${group}/v1alpha1`, kind: 'VulnerabilityReport',
+  metadata: { name, namespace: 'legacy', uid: name },
+  report: { artifact: { repository: 'trafex/php-nginx', tag: '3.6.0' }, vulnerabilities: [{ vulnerabilityID, resource: 'php83', installedVersion: '8.3.20-r0', fixedVersion: '8.3.36-r0' }] },
+})
+// The match sorts last, so selecting the first row proves the filter ran.
+const billing = report('replicaset-billing-5cfccf7776-php-nginx', 'CVE-2025-0001')
+const web = report('replicaset-web-7685556d86-php', 'CVE-2026-109618')
+
+let root: ReturnType<typeof createRoot>
+let host: HTMLDivElement
+afterEach(() => { act(() => root?.unmount()); host?.remove(); localStorage.clear(); window.history.replaceState(null, '', '/') })
+
+function render(search: string, onResourceClick = vi.fn()) {
+  const locationSearch = `?apiGroup=${group}&search=${encodeURIComponent(search)}`
+  window.history.replaceState(null, '', `/resources/vulnerabilityreports${locationSearch}`)
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  act(() => root.render(<KeyboardShortcutProvider><ResourcesView
+    namespaces={[]}
+    apiResources={[vulnReports]}
+    resourceCounts={{ VulnerabilityReport: 2 }}
+    selectedKindQuery={{ isLoading: false, data: [web, billing], resourceName: 'vulnerabilityreports', group }}
+    locationPathname="/resources/vulnerabilityreports"
+    locationSearch={locationSearch}
+    onNavigate={() => {}}
+    onResourceClick={onResourceClick}
+  /></KeyboardShortcutProvider>))
+  return onResourceClick
+}
+
+describe('Trivy report table search', () => {
+  it('finds a report by a CVE in its findings', () => {
+    const selected = render('CVE-2026-109618')
+    act(() => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'j', bubbles: true })))
+    act(() => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })))
+    expect(selected).toHaveBeenCalledTimes(1)
+    expect(selected).toHaveBeenCalledWith(expect.objectContaining({ name: web.metadata.name }))
+  })
+
+  it('says what it searched when nothing matches', () => {
+    render('CVE-1999-0001')
+    expect(host.textContent).toContain('No results for "CVE-1999-0001"')
+    expect(host.textContent).toContain('Searched names, namespaces and report findings')
+  })
+})