@skyhook-io/k8s-ui 1.16.3 → 1.17.1

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

@@ -0,0 +1,78 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { ActiveFilterBar, type ActiveFilterBarProps } from './ActiveFilterBar'
+
+vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+
+let root: Root | null = null
+let element: HTMLDivElement
+
+async function render(overrides: Partial<ActiveFilterBarProps> = {}) {
+  const props: ActiveFilterBarProps = {
+    columnFilters: {},
+    columnFilterExcludes: {},
+    problemFilters: [],
+    labelSelector: '',
+    onClearColumn: vi.fn(),
+    onClearProblems: vi.fn(),
+    onClearLabels: vi.fn(),
+    ...overrides,
+  }
+  element = document.createElement('div')
+  root = createRoot(element)
+  await act(async () => root!.render(<ActiveFilterBar {...props} />))
+  return props
+}
+
+function buttonWithText(text: string): HTMLButtonElement {
+  const button = [...element.querySelectorAll('button')].find((b) => b.textContent?.includes(text))
+  if (!button) throw new Error(`no button containing "${text}"`)
+  return button
+}
+
+afterEach(async () => {
+  await act(async () => root?.unmount())
+  root = null
+})
+
+describe('ActiveFilterBar', () => {
+  it('renders nothing without active filters or a restore', async () => {
+    await render({ columnFilters: { status: [] } })
+    expect(element.innerHTML).toBe('')
+  })
+
+  it('renders one chip per active filter, marking excluded columns', async () => {
+    await render({
+      columnFilters: { status: ['Running', 'Pending'], node: ['n1'], empty: [] },
+      columnFilterExcludes: { node: true },
+      problemFilters: ['crashloop'],
+      labelSelector: 'app=nginx',
+    })
+    expect(element.querySelectorAll('button')).toHaveLength(4)
+    expect(element.textContent).toContain('status: Running, Pending')
+    expect(element.textContent).toContain('node: not n1')
+    expect(element.textContent).toContain('Problems: crashloop')
+    expect(element.textContent).toContain('app=nginx')
+    expect(element.textContent).not.toContain('restored')
+  })
+
+  it('calls the matching clear handler when a chip is clicked', async () => {
+    const props = await render({ columnFilters: { status: ['Running'] }, problemFilters: ['oom'], labelSelector: 'tier=web' })
+    await act(async () => buttonWithText('status:').click())
+    await act(async () => buttonWithText('Problems:').click())
+    await act(async () => buttonWithText('tier=web').click())
+    expect(props.onClearColumn).toHaveBeenCalledWith('status')
+    expect(props.onClearProblems).toHaveBeenCalledOnce()
+    expect(props.onClearLabels).toHaveBeenCalledOnce()
+  })
+
+  it('shows the restored line only when restored, with Clear calling onClearAll', async () => {
+    const onClearAll = vi.fn()
+    await render({ restored: true, onClearAll, columnFilters: { status: ['Running'] } })
+    expect(element.textContent).toContain('Filters restored from your last visit')
+    await act(async () => buttonWithText('Clear').click())
+    expect(onClearAll).toHaveBeenCalledOnce()
+  })
+})

package/src/components/resources/ActiveFilterBar.tsx

@@ -0,0 +1,86 @@
+import { clsx } from 'clsx'
+import { AlertTriangle, History, ListFilter, Tag, X } from 'lucide-react'
+
+export interface ActiveFilterBarProps {
+  columnFilters: Record<string, string[]>
+  columnFilterExcludes: Record<string, boolean>
+  problemFilters: string[]
+  labelSelector: string
+  onClearColumn: (key: string) => void
+  onClearProblems: () => void
+  onClearLabels: () => void
+  restored?: boolean
+  onClearAll?: () => void
+  className?: string
+}
+
+export function ActiveFilterBar({
+  columnFilters,
+  columnFilterExcludes,
+  problemFilters,
+  labelSelector,
+  onClearColumn,
+  onClearProblems,
+  onClearLabels,
+  restored = false,
+  onClearAll,
+  className,
+}: ActiveFilterBarProps) {
+  const activeColEntries = Object.entries(columnFilters).filter(([, vals]) => vals.length > 0)
+  const hasChips = activeColEntries.length > 0 || problemFilters.length > 0 || !!labelSelector
+  if (!hasChips && !restored) return null
+
+  return (
+    <div className={clsx('flex flex-wrap items-center gap-1.5', className)}>
+      {restored && (
+        <span className="flex items-center gap-1 text-xs text-theme-text-tertiary">
+          <History className="w-3 h-3" />
+          <span>Filters restored from your last visit.</span>
+          {onClearAll && (
+            <button
+              type="button"
+              onClick={onClearAll}
+              className="text-theme-text-secondary hover:text-theme-text-primary underline underline-offset-2"
+            >
+              Clear
+            </button>
+          )}
+        </span>
+      )}
+      {activeColEntries.map(([key, vals]) => (
+        <button
+          type="button"
+          key={key}
+          onClick={() => onClearColumn(key)}
+          className="flex items-center gap-1 px-2 py-1 text-xs selection selection-text rounded-md hover:selection-strong transition-colors"
+        >
+          <ListFilter className="w-3 h-3" />
+          <span>{key}: {columnFilterExcludes[key] ? 'not ' : ''}{vals.join(', ')}</span>
+          <X className="w-3 h-3" />
+        </button>
+      ))}
+      {problemFilters.length > 0 && (
+        <button
+          type="button"
+          onClick={onClearProblems}
+          className="flex items-center gap-1 px-2 py-1 text-xs bg-red-500/15 text-red-700 dark:text-red-300 rounded-md hover:bg-red-500/25 transition-colors"
+        >
+          <AlertTriangle className="w-3 h-3" />
+          <span>Problems: {problemFilters.join(', ')}</span>
+          <X className="w-3 h-3" />
+        </button>
+      )}
+      {labelSelector && (
+        <button
+          type="button"
+          onClick={onClearLabels}
+          className="flex items-center gap-1 px-2 py-1 text-xs bg-green-500/15 text-green-700 dark:text-green-300 rounded-md hover:bg-green-500/25 transition-colors"
+        >
+          <Tag className="w-3 h-3" />
+          <span>{labelSelector}</span>
+          <X className="w-3 h-3" />
+        </button>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,42 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, expect, it, vi } from 'vitest'
+import { ResourcesSidebar } from './ResourcesSidebar'
+;(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true
+window.matchMedia = vi.fn().mockReturnValue({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() })
+let root: ReturnType<typeof createRoot>
+let host: HTMLDivElement
+afterEach(() => { act(() => root?.unmount()); host?.remove() })
+it('navigates Favorites, Views and grouped kinds in their visible order', () => {
+  Element.prototype.scrollIntoView = vi.fn()
+  const view = vi.fn(), kind = vi.fn()
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  const cluster = { group: 'postgresql.cnpg.io', version: 'v1', kind: 'Cluster', name: 'clusters', namespaced: true, isCrd: true, verbs: ['list'] }
+  act(() => root.render(<ResourcesSidebar selectedKind={null} onSelectedKindChange={kind} apiResources={[cluster]} resourceCounts={{ 'postgresql.cnpg.io/Cluster': 1 }} pinned={[{ name: 'pods', kind: 'Pod', group: '' }]} categoryWorkspaces={{ CloudNativePG: { destinations: [{ id: 'overview', label: 'Clusters view', onSelect: view }], defaultKindsCollapsed: true } }} />))
+  const category = [...host.querySelectorAll('button')].find((b) => b.textContent?.includes('CloudNativePG'))!
+  if (category.getAttribute('aria-expanded') !== 'true') act(() => category.click())
+  const input = host.querySelector('input')!
+  const key = (name: string) => act(() => input.dispatchEvent(new KeyboardEvent('keydown', { key: name, bubbles: true })))
+  key('ArrowDown'); key('ArrowDown'); key('Enter')
+  expect(view).toHaveBeenCalledTimes(1)
+  expect(kind).not.toHaveBeenCalled()
+  act(() => [...host.querySelectorAll('button')].find((b) => b.textContent === 'Resource kinds')!.click())
+  key('ArrowDown'); key('ArrowDown'); key('ArrowDown'); key('Enter')
+  expect(kind).toHaveBeenCalledWith(expect.objectContaining({ name: 'clusters', group: 'postgresql.cnpg.io' }))
+})
+it('opens a matching View with Enter when search finds no kind', () => {
+  Element.prototype.scrollIntoView = vi.fn()
+  const view = vi.fn()
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  act(() => root.render(<ResourcesSidebar selectedKind={null} onSelectedKindChange={() => {}} apiResources={[{ group: 'postgresql.cnpg.io', version: 'v1', kind: 'Cluster', name: 'clusters', namespaced: true, isCrd: true, verbs: ['list'] }]} resourceCounts={{ 'postgresql.cnpg.io/Cluster': 1 }} categoryWorkspaces={{ CloudNativePG: { destinations: [{ id: 'operator', label: 'Operator', onSelect: view }], defaultKindsCollapsed: true } }} />))
+  const input = host.querySelector('input')!
+  act(() => {
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(input, 'operator')
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+  expect(host.textContent).toContain('Operator')
+  expect(host.textContent).not.toContain('>Cluster<')
+  act(() => input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })))
+  expect(view).toHaveBeenCalledTimes(1)
+})

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

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { renderToString } from 'react-dom/server'
 import type { APIResource } from '../../types'
-import { rawCRDGroupTitle, resourceMatchesSidebarFilter, ResourcesSidebar } from './ResourcesSidebar'
+import { rawCRDGroupTitle, resourceMatchesSidebarFilter, ResourcesSidebar, sidebarDestinationsMatching } from './ResourcesSidebar'
 
 const sqlInstance: APIResource = {
   group: 'sql.cnrm.cloud.google.com',
@@ -144,7 +144,7 @@ describe('ResourcesSidebar category workspaces', () => {
         }}
       />
     )
-    expect(html).toContain('Workspace')
+    expect(html).toContain('Views')
     expect(html).toContain('Overview')
     expect(html).toContain('pg-orders')
     expect(html).toContain('Counts for namespace payments')
@@ -153,6 +153,21 @@ describe('ResourcesSidebar category workspaces', () => {
     expect(html).not.toContain('selection-strong selection-text">Pod')
   })
 
+  it('marks a count taken over partly readable data as a lower bound, and never shows its zero as none', () => {
+    const render = (count: number) =>
+      renderToString(
+        <ResourcesSidebar
+          selectedKind={null}
+          onSelectedKindChange={() => {}}
+          apiResources={[cnpgCluster]}
+          resourceCounts={{ 'postgresql.cnpg.io/Cluster': 1 }}
+          categoryWorkspaces={{ CloudNativePG: { destinations: [{ id: 'overview', label: 'Overview', count, countLowerBound: true, onSelect: () => {} }] } }}
+        />,
+      )
+    expect(render(2)).toMatch(/≥(<!-- -->)?2/)
+    expect(render(0)).toContain('–')
+  })
+
   it('keeps a workspace category visible when it has no resources', () => {
     const html = renderToString(
       <ResourcesSidebar
@@ -181,3 +196,22 @@ describe('ResourcesSidebar category workspaces', () => {
     expect(html).toContain('barmancloud.cnpg.io')
   })
 })
+
+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' }]
+  const labels = (term: string) => sidebarDestinationsMatching('CloudNativePG', resources, views, term).map((d) => d.label)
+
+  it('keeps every view when the term names the category or one of its API groups', () => {
+    expect(labels('cloud')).toEqual(['Clusters', 'Backups', 'Declarations', 'Pooling', 'Operator'])
+    expect(labels('cnpg')).toEqual(['Clusters', 'Backups', 'Declarations', 'Pooling', 'Operator'])
+  })
+  it('keeps the views whose label matches otherwise', () => {
+    expect(labels('backup')).toEqual(['Backups'])
+    expect(labels('declar')).toEqual(['Declarations'])
+    expect(labels('deployment')).toEqual([])
+  })
+  it('keeps every view without a term', () => {
+    expect(labels('  ')).toHaveLength(5)
+  })
+})

package/src/components/resources/ResourcesSidebar.tsx

@@ -13,6 +13,7 @@ import type { APIResource } from '../../types'
 import { categorizeResources, CORE_RESOURCES } from '../../utils/api-resources'
 import { getResourceIcon } from '../../utils/resource-icons'
 import { Tooltip } from '../ui/Tooltip'
+import { certaintyGlyph } from '../facts'
 import { Input } from '../ui/Input'
 
 // Selected resource type info (need both name for API and kind for display)
@@ -36,6 +37,8 @@ export interface SidebarCategoryDestination {
   icon?: ComponentType<{ className?: string }>
   /** Problem count. `undefined` renders no badge; `null` renders the unknown dash. */
   count?: number | null
+  /** The count was taken over data read only in part: rendered "≥N", and a zero is unknown rather than none. */
+  countLowerBound?: boolean
   countTitle?: string
   active?: boolean
   /** The object currently open under this destination, nested beneath it. */
@@ -97,6 +100,24 @@ const CORE_RESOURCE_TYPES = [
   { kind: 'hpas', label: 'HPAs' },
 ] as const
 
+/**
+ * The workspace views a filter keeps: all of them when the term names the
+ * category or one of its API groups ("cloud", "cnpg"), otherwise the views
+ * whose label matches. The views are the way into a workspace, so a filter
+ * that finds the category's kinds must not hide them.
+ */
+export function sidebarDestinationsMatching(
+  categoryName: string,
+  resources: Pick<APIResource, 'group'>[],
+  destinations: SidebarCategoryDestination[],
+  term: string,
+): SidebarCategoryDestination[] {
+  const normalized = term.trim().toLowerCase()
+  if (!normalized) return destinations
+  if (categoryName.toLowerCase().includes(normalized) || resources.some((r) => r.group.toLowerCase().includes(normalized))) return destinations
+  return destinations.filter((d) => d.label.toLowerCase().includes(normalized))
+}
+
 export function resourceMatchesSidebarFilter(resource: Pick<APIResource, 'kind' | 'name' | 'group'>, term: string): boolean {
   const normalized = term.trim().toLowerCase()
   if (!normalized) return true
@@ -427,14 +448,16 @@ export function ResourcesSidebar({
         // If the group name matches, show all its resources
         if (categoryMatches || rawGroupMatches) return category
         const matchingResources = category.visibleResources.filter((resource: APIResource) => resourceMatchesSidebarFilter(resource, term))
-        if (matchingResources.length === 0) return null
+        const ws = categoryWorkspaces?.[category.name]
+        const matchingViews = ws ? sidebarDestinationsMatching(category.name, category.resources, ws.destinations, term) : []
+        if (matchingResources.length === 0 && matchingViews.length === 0) return null
         return {
           ...category,
           visibleResources: matchingResources,
         }
       })
       .filter(Boolean) as typeof sortedCategories
-  }, [sortedCategories, kindFilter])
+  }, [sortedCategories, kindFilter, categoryWorkspaces])
 
   // Auto-expand all categories when filtering
   const isKindFiltering = kindFilter.trim().length > 0
@@ -455,26 +478,23 @@ export function ResourcesSidebar({
     })
   }
 
-  // --- Keyboard navigation ---
-  // Flat list of all navigable kinds in the order they appear in the sidebar.
-  const flatVisibleKinds = useMemo<SelectedKindInfo[]>(() => {
-    const kinds: SelectedKindInfo[] = []
+  const visibleResults = useMemo(() => {
+    const results: ({ type: 'kind'; kind: SelectedKindInfo } | { type: 'view'; category: string; destination: SidebarCategoryDestination })[] = []
     if (favoritesExpanded) {
-      for (const p of pinned) {
-        kinds.push({ name: p.name, kind: p.kind, group: p.group })
-      }
+      for (const kind of pinned) results.push({ type: 'kind', kind })
     }
-    if (filteredCategories) {
-      for (const cat of filteredCategories) {
-        if (effectiveExpandedCategories.has(cat.name) && (isKindFiltering || kindsOpen(cat.name))) {
-          for (const r of cat.visibleResources) {
-            kinds.push({ name: r.name, kind: r.kind, group: r.group })
-          }
-        }
+    for (const cat of filteredCategories ?? []) {
+      if (!effectiveExpandedCategories.has(cat.name)) continue
+      const workspace = categoryWorkspaces?.[cat.name]
+      for (const destination of workspace ? sidebarDestinationsMatching(cat.name, cat.resources, workspace.destinations, kindFilter) : []) {
+        results.push({ type: 'view', category: cat.name, destination })
+      }
+      if (isKindFiltering || kindsOpen(cat.name)) {
+        for (const kind of workspace ? sortByGroup(cat.visibleResources) : cat.visibleResources) results.push({ type: 'kind', kind })
       }
     }
-    return kinds
-  }, [favoritesExpanded, pinned, filteredCategories, effectiveExpandedCategories, kindsOpenOverrides, categoryWorkspaces, activeDestinationCategory]) // eslint-disable-line react-hooks/exhaustive-deps
+    return results
+  }, [favoritesExpanded, pinned, filteredCategories, effectiveExpandedCategories, kindsOpenOverrides, categoryWorkspaces, activeDestinationCategory, isKindFiltering, kindFilter]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const [highlightedIndex, setHighlightedIndex] = useState(-1)
   // Reset highlight when the filter or kind list changes
@@ -482,10 +502,12 @@ export function ResourcesSidebar({
     setHighlightedIndex(kindFilter ? 0 : -1)
   }, [kindFilter]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  const highlightedKind = highlightedIndex >= 0 && highlightedIndex < flatVisibleKinds.length
-    ? flatVisibleKinds[highlightedIndex]
+  const highlightedResult = highlightedIndex >= 0 && highlightedIndex < visibleResults.length
+    ? visibleResults[highlightedIndex]
     : null
 
+  const highlightedKind = highlightedResult?.type === 'kind' ? highlightedResult.kind : null
+
   // Scroll the highlighted kind button into view
   const highlightedRef = useRef<HTMLButtonElement>(null)
   useEffect(() => {
@@ -501,18 +523,19 @@ export function ResourcesSidebar({
       ;(e.target as HTMLInputElement).blur()
     } else if (e.key === 'ArrowDown') {
       e.preventDefault()
-      setHighlightedIndex(prev => Math.min(prev + 1, flatVisibleKinds.length - 1))
+      setHighlightedIndex(prev => Math.min(prev + 1, visibleResults.length - 1))
     } else if (e.key === 'ArrowUp') {
       e.preventDefault()
       setHighlightedIndex(prev => Math.max(prev - 1, 0))
-    } else if (e.key === 'Enter' && highlightedKind) {
+    } else if (e.key === 'Enter' && highlightedResult) {
       e.preventDefault()
-      selectKind(highlightedKind)
+      if (highlightedResult.type === 'view') highlightedResult.destination.onSelect()
+      else selectKind(highlightedResult.kind)
       setHighlightedIndex(-1)
       setKindFilter('')
       onKindNavigated?.()
     }
-  }, [flatVisibleKinds.length, highlightedKind, selectKind, onKindNavigated]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [visibleResults.length, highlightedResult, selectKind, onKindNavigated]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const isKindHighlighted = useCallback((name: string, group: string) => {
     return highlightedKind?.name === name && highlightedKind?.group === group
@@ -618,6 +641,7 @@ export function ResourcesSidebar({
             const rawGroupTitle = rawCRDGroupTitle(category.resources)
             const workspace = categoryWorkspaces?.[category.name]
             const showKinds = isKindFiltering || kindsOpen(category.name)
+            const views = workspace ? sidebarDestinationsMatching(category.name, category.resources, workspace.destinations, kindFilter) : []
             return (
               <div key={category.name} className="mb-2">
                 <button
@@ -635,9 +659,14 @@ export function ResourcesSidebar({
                   )}
                 </button>
                 <Collapse open={isExpanded} id={disclosurePanelId(categoryPanelBase, category.name)}>
-                  {workspace && !isKindFiltering && (
+                  {workspace && views.length > 0 && (
                     <WorkspaceDestinations
                       workspace={workspace}
+                      highlightedId={highlightedResult?.type === 'view' && highlightedResult.category === category.name ? highlightedResult.destination.id : undefined}
+                      highlightedRef={highlightedRef}
+                      destinations={views}
+                      filtering={isKindFiltering}
+                      hasKinds={category.visibleResources.length > 0}
                       kindsOpen={showKinds}
                       onToggleKinds={() => toggleKinds(category.name)}
                       kindsPanelId={disclosurePanelId(categoryPanelBase, `${category.name}-kinds`)}
@@ -776,45 +805,63 @@ function groupHeaderBefore(resources: APIResource[], index: number): string | nu
   return group || 'core'
 }
 
+// While the sidebar is filtered, `destinations` are the views that match and
+// the kinds below are forced open, so they get a label rather than a toggle.
 function WorkspaceDestinations({
   workspace,
+  destinations,
+  filtering,
+  hasKinds,
   kindsOpen,
   onToggleKinds,
   kindsPanelId,
+  highlightedId,
+  highlightedRef,
 }: {
   workspace: SidebarCategoryWorkspace
+  highlightedId?: string
+  highlightedRef: React.RefObject<HTMLButtonElement | null>
+  destinations: SidebarCategoryDestination[]
+  filtering: boolean
+  hasKinds: boolean
   kindsOpen: boolean
   onToggleKinds: () => void
   kindsPanelId: string
 }) {
   return (
     <div className="space-y-0.5">
-      <div className="pl-5 pr-2 pt-0.5 pb-0.5 text-[10.5px] font-semibold uppercase tracking-wide text-theme-text-tertiary">Workspace</div>
-      {workspace.destinations.map((d) => {
+      <div className="pl-5 pr-2 pt-0.5 pb-0.5 text-[10.5px] font-semibold uppercase tracking-wide text-theme-text-tertiary">Views</div>
+      {destinations.map((d) => {
         const Icon = d.icon
         return (
           <div key={d.id}>
             <button
+              ref={highlightedId === d.id ? highlightedRef : undefined}
               onClick={d.onSelect}
               aria-current={d.active && !d.child ? 'page' : undefined}
               className={clsx(
                 'w-full flex items-center gap-2 pl-5 xl:pl-6 pr-2 xl:pr-3 py-1.5 rounded-lg text-sm transition-colors min-w-0',
                 d.active && !d.child
                   ? 'selection-strong selection-text'
-                  : d.active
-                    ? 'text-theme-text-primary font-medium hover:bg-theme-elevated'
-                    : 'text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary',
+                  : highlightedId === d.id
+                    ? 'bg-theme-hover text-theme-text-primary'
+                    : d.active
+                      ? 'text-theme-text-primary font-medium hover:bg-theme-elevated'
+                      : 'text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary',
               )}
             >
               {Icon && <Icon className="w-4 h-4 shrink-0" />}
               <span className="flex-1 text-left truncate">{d.label}</span>
-              {d.count === null ? (
+              {d.count === null || (d.count === 0 && d.countLowerBound) ? (
                 <Tooltip content={d.countTitle ?? COUNT_UNAVAILABLE_MESSAGE} position="left">
                   <span className="text-xs py-0.5 rounded text-center font-mono w-8 bg-theme-elevated text-theme-text-disabled">–</span>
                 </Tooltip>
               ) : d.count !== undefined && d.count > 0 ? (
                 <Tooltip content={d.countTitle ?? `${d.count}`} position="left">
-                  <span className="text-xs py-0.5 rounded text-center font-mono w-8 status-degraded">{d.count}</span>
+                  <span className={clsx('text-xs py-0.5 rounded text-center font-mono status-degraded', d.countLowerBound ? 'min-w-8 px-1' : 'w-8')}>
+                    {d.countLowerBound && certaintyGlyph('lower_bound')}
+                    {d.count}
+                  </span>
                 </Tooltip>
               ) : null}
             </button>
@@ -833,15 +880,19 @@ function WorkspaceDestinations({
       {workspace.scopeNote && (
         <div className="pl-6 pr-2 pt-0.5 text-[11px] text-theme-text-tertiary">{workspace.scopeNote}</div>
       )}
-      <button
-        aria-expanded={kindsOpen}
-        aria-controls={kindsPanelId}
-        onClick={onToggleKinds}
-        className="w-full flex items-center gap-1.5 pl-5 pr-2 pt-2 pb-0.5 text-[10.5px] font-semibold uppercase tracking-wide text-theme-text-tertiary hover:text-theme-text-secondary"
-      >
-        <CollapseChevron open={kindsOpen} className="w-3 h-3" />
-        <span>Resource kinds</span>
-      </button>
+      {filtering ? (
+        hasKinds && <div className="pl-5 pr-2 pt-2 pb-0.5 text-[10.5px] font-semibold uppercase tracking-wide text-theme-text-tertiary">Resource kinds</div>
+      ) : (
+        <button
+          aria-expanded={kindsOpen}
+          aria-controls={kindsPanelId}
+          onClick={onToggleKinds}
+          className="w-full flex items-center gap-1.5 pl-5 pr-2 pt-2 pb-0.5 text-[10.5px] font-semibold uppercase tracking-wide text-theme-text-tertiary hover:text-theme-text-secondary"
+        >
+          <CollapseChevron open={kindsOpen} className="w-3 h-3" />
+          <span>Resource kinds</span>
+        </button>
+      )}
     </div>
   )
 }

package/src/components/resources/ResourcesView.kind-filter-memory.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest'
+import { hasFilterIntent } from './ResourcesView'
+import { kindFiltersFromSearch, kindFiltersToSearch, serializeColumnFilters } from './resource-utils'
+
+describe('kindFiltersFromSearch', () => {
+  it('restores column filters, their exclude operator and problem filters', () => {
+    const filters = serializeColumnFilters({ namespace: ['a', 'b'], status: ['Running'] }, { status: true })
+    const search = `?${new URLSearchParams({ filters, problems: 'failed,pending', search: 'web' })}`
+
+    expect(kindFiltersFromSearch(search)).toEqual({
+      columnFilters: { namespace: ['a', 'b'], status: ['Running'] },
+      columnFilterExcludes: { status: true },
+      problemFilters: ['failed', 'pending'],
+    })
+  })
+
+  it('starts empty for a kind with nothing remembered', () => {
+    expect(kindFiltersFromSearch(undefined)).toEqual({ columnFilters: {}, columnFilterExcludes: {}, problemFilters: [] })
+  })
+})
+
+describe('kindFiltersToSearch', () => {
+  it('round-trips through kindFiltersFromSearch and keeps only the per-kind filters', () => {
+    const filters = serializeColumnFilters({ namespace: ['a'], status: ['Running'] }, { status: true })
+    const saved = kindFiltersToSearch(kindFiltersFromSearch(`?${new URLSearchParams({ filters, problems: 'failed', search: 'web', namespaces: 'x' })}`))
+
+    expect(new URLSearchParams(saved).get('search')).toBeNull()
+    expect(kindFiltersFromSearch(saved)).toEqual({
+      columnFilters: { namespace: ['a'], status: ['Running'] },
+      columnFilterExcludes: { status: true },
+      problemFilters: ['failed'],
+    })
+  })
+
+  it('is empty when there is nothing to save, ignoring an exclude flag with no values', () => {
+    expect(kindFiltersToSearch({ columnFilters: { status: [] }, columnFilterExcludes: { status: true }, problemFilters: [] })).toBe('')
+  })
+})
+
+describe('hasFilterIntent', () => {
+  it('is false for a bare list URL, even with the namespace pick or a kind group', () => {
+    expect(hasFilterIntent('')).toBe(false)
+    expect(hasFilterIntent('?namespaces=a,b&apiGroup=serving.knative.dev&ai-run=r1')).toBe(false)
+  })
+
+  it.each(['filters=status:Running', 'problems=failed', 'search=web', 'regex=true', 'labels=app%3Dweb', 'ownerKind=DaemonSet', 'ownerName=x', 'resource=a/web', 'showInactive=true'])(
+    'is true when the URL carries %s',
+    (param) => {
+      expect(hasFilterIntent(`?namespaces=a&${param}`)).toBe(true)
+    },
+  )
+})