@skyhook-io/k8s-ui 1.17.0 → 1.17.1

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)
+    },
+  )
+})

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

@@ -0,0 +1,149 @@
+// @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 pods: APIResource = { group: '', version: 'v1', kind: 'Pod', name: 'pods', namespaced: true, isCrd: false, verbs: ['get', 'list'] }
+const pod = { apiVersion: 'v1', kind: 'Pod', metadata: { name: 'example', namespace: 'test', uid: 'pod-id' }, spec: { containers: [{ name: 'app', image: 'example' }] }, status: { phase: 'Running' } }
+let root: ReturnType<typeof createRoot>
+let host: HTMLDivElement
+
+afterEach(() => { act(() => root?.unmount()); host?.remove(); vi.restoreAllMocks(); localStorage.clear() })
+
+describe('custom resource kind view', () => {
+  it('keeps sidebar navigation while disabling table keys and column settings, then restores the table on null', () => {
+    host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+    const selected = vi.fn()
+    const storageRead = vi.spyOn(Storage.prototype, 'getItem')
+    const storageWrite = vi.spyOn(Storage.prototype, 'setItem')
+    const render = (custom: boolean | undefined) => act(() => root.render(<KeyboardShortcutProvider><ResourcesView
+      namespaces={['test']}
+      apiResources={[pods]}
+      resourceCounts={{ Pod: 1 }}
+      selectedKindQuery={{ isLoading: false, data: [pod], resourceName: 'pods', group: '' }}
+      locationPathname="/resources/pods"
+      locationSearch=""
+      onNavigate={() => {}}
+      onResourceClick={selected}
+      renderKindView={kind => custom === undefined ? false : custom ? <div data-testid="kind-view">Custom {kind.kind}</div> : null}
+    /></KeyboardShortcutProvider>))
+    render(true)
+    expect(host.querySelector('[data-testid="kind-view"]')?.textContent).toBe('Custom Pod')
+    expect(host.querySelectorAll('table')).toHaveLength(0)
+    expect(host.textContent).toContain('Workloads')
+    act(() => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'j', bubbles: true })))
+    act(() => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })))
+    expect(selected).not.toHaveBeenCalled()
+    expect(storageRead.mock.calls.some(([key]) => String(key).startsWith('radar-columns-'))).toBe(false)
+    expect(storageWrite.mock.calls.some(([key]) => String(key).startsWith('radar-columns-'))).toBe(false)
+    render(false)
+    expect(host.querySelector('[data-testid="kind-view"]')).toBeNull()
+    expect(host.querySelector('table')).not.toBeNull()
+    expect(storageRead.mock.calls.some(([key]) => key === 'radar-columns-pods')).toBe(true)
+    act(() => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'j', bubbles: true })))
+    act(() => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })))
+    expect(selected).toHaveBeenCalledWith(expect.objectContaining({ kind: 'pods', namespace: 'test', name: 'example' }))
+    render(undefined)
+    expect(host.querySelector('table')).not.toBeNull()
+  })
+})
+
+it('closes bulk dialogs when the same kind switches to a custom view and keeps the inspected resource', async () => {
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  const selected = vi.fn()
+  const remove = vi.fn()
+  const render = (custom: boolean) => act(() => root.render(<KeyboardShortcutProvider><ResourcesView
+    namespaces={['test']}
+    apiResources={[pods]}
+    resourceCounts={{ Pod: 1 }}
+    selectedKindQuery={{ isLoading: false, data: [pod], resourceName: 'pods', group: '' }}
+    selectedResource={{ kind: 'pods', group: '', namespace: 'test', name: 'example' }}
+    locationPathname="/resources/pods"
+    locationSearch=""
+    onNavigate={() => {}}
+    onResourceClick={selected}
+    onBulkDelete={remove}
+    renderKindView={() => custom ? <div data-testid="custom">Custom</div> : null}
+  /></KeyboardShortcutProvider>))
+  render(false)
+  act(() => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'b', bubbles: true })))
+  act(() => host.querySelector<HTMLInputElement>('input[title="Select all"]')!.click())
+  expect(host.textContent).toContain('1 selected')
+  act(() => [...host.querySelectorAll('button')].find(b => b.textContent?.trim() === 'Delete')!.click())
+  expect(document.querySelector('[role="dialog"]')?.textContent).toContain('Delete 1 Pod?')
+  render(true)
+  await act(async () => { await new Promise(resolve => setTimeout(resolve, 300)) })
+  expect(host.querySelector('[data-testid="custom"]')).not.toBeNull()
+  expect(document.querySelector('[role="dialog"]')).toBeNull()
+  render(false)
+  expect(host.textContent).not.toContain('1 selected')
+  expect(host.querySelector('input[title="Select all"]')).toBeNull()
+  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 })))
+  act(() => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })))
+  expect(host.querySelector('[aria-label="Compare resources tray"]')?.textContent).toContain('example')
+  render(true)
+  render(false)
+  expect(host.querySelector('[aria-label="Compare resources tray"]')).toBeNull()
+  expect(remove).not.toHaveBeenCalled()
+  expect(selected).not.toHaveBeenCalled()
+})
+
+it('keeps sidebar kind shortcuts active while a custom view is shown', () => {
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  const deployments: APIResource = { group: 'apps', version: 'v1', kind: 'Deployment', name: 'deployments', namespaced: true, isCrd: false, verbs: ['get', 'list'] }
+  act(() => root.render(<KeyboardShortcutProvider><ResourcesView
+    namespaces={['test']}
+    apiResources={[pods, deployments]}
+    resourceCounts={{ Pod: 1, Deployment: 1 }}
+    locationPathname="/resources/pods"
+    locationSearch=""
+    onNavigate={() => {}}
+    renderKindView={kind => <div data-testid="kind-view">Custom {kind.kind}</div>}
+  /></KeyboardShortcutProvider>))
+  expect(host.querySelector('[data-testid="kind-view"]')?.textContent).toBe('Custom Pod')
+  act(() => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: ']', bubbles: true })))
+  expect(host.querySelector('[data-testid="kind-view"]')?.textContent).not.toBe('Custom Pod')
+  act(() => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: '[', bubbles: true })))
+  expect(host.querySelector('[data-testid="kind-view"]')?.textContent).toBe('Custom Pod')
+})
+
+it('skips hidden-table sort and filter aggregation for a loaded list, then resumes them with the table', () => {
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  const getSortValue = vi.fn((resource: typeof pod) => resource.metadata.name)
+  const getFilterValue = vi.fn((resource: typeof pod) => resource.metadata.name)
+  const extraColumns = [{ key: 'fixture-rank', label: 'Fixture rank', render: () => null, getSortValue, getFilterValue }]
+  const list = [pod, { ...pod, metadata: { ...pod.metadata, name: 'another', uid: 'another-id' } }]
+  localStorage.setItem('radar-sort-pods', JSON.stringify({ column: 'fixture-rank', direction: 'asc' }))
+  const render = (custom: boolean, data = list) => act(() => root.render(<KeyboardShortcutProvider><ResourcesView
+    namespaces={['test']}
+    apiResources={[pods]}
+    resourceCounts={{ Pod: data.length }}
+    selectedKindQuery={{ isLoading: false, data, resourceName: 'pods', group: '' }}
+    locationPathname="/resources/pods"
+    locationSearch=""
+    onNavigate={() => {}}
+    extraLeadingColumns={extraColumns}
+    renderKindView={() => custom ? <div data-testid="kind-view">Custom</div> : null}
+  /></KeyboardShortcutProvider>))
+  render(true)
+  expect(getSortValue).not.toHaveBeenCalled()
+  expect(getFilterValue).not.toHaveBeenCalled()
+  render(false)
+  expect(getSortValue).toHaveBeenCalled()
+  expect(getFilterValue).toHaveBeenCalled()
+  getSortValue.mockClear(); getFilterValue.mockClear()
+  render(true, [...list])
+  expect(getSortValue).not.toHaveBeenCalled()
+  expect(getFilterValue).not.toHaveBeenCalled()
+  render(false)
+  expect(getSortValue).toHaveBeenCalled()
+  expect(getFilterValue).toHaveBeenCalled()
+})

package/src/components/resources/ResourcesView.per-container.test.ts

@@ -1,6 +1,7 @@
+import { renderToStaticMarkup } from 'react-dom/server'
 import { describe, expect, it } from 'vitest'
 import type { ContainerResourceMetrics } from '../../types'
-import { podAggregate, readContainer } from './ResourcesView'
+import { buildContainerResourceTooltip, podAggregate, readContainer } from './ResourcesView'
 
 // Build a CPU-only container fixture; memory fields default to 0.
 function cpu(name: string, usage: number, request: number, limit: number): ContainerResourceMetrics {
@@ -109,3 +110,57 @@ describe('podAggregate', () => {
     expect(result.denom).toBe(384) // summed memory limit
   })
 })
+
+describe('podAggregate with pod-level resources', () => {
+  it("treats a pod-level limit as the ceiling even when containers set none", () => {
+    const containers = [cpu('app', 300, 0, 0), cpu('sidecar', 100, 0, 0)]
+    const result = podAggregate(containers, 'cpu', { request: 500, limit: 1000 })
+    expect(result.mode).toBe('limit')
+    expect(result.denom).toBe(1000)
+    expect(result.markerPct).toBeCloseTo(50)
+  })
+
+  it("uses the pod-level limit over a partial container sum", () => {
+    const containers = [cpu('app', 300, 0, 0), cpu('sidecar', 100, 0, 200)]
+    const result = podAggregate(containers, 'cpu', { limit: 1000 })
+    expect(result.mode).toBe('limit')
+    expect(result.denom).toBe(1000)
+    expect(result.markerPct).toBeUndefined()
+  })
+
+  it("uses the container limits when they are tighter than the pod limit", () => {
+    const single = podAggregate([cpu('app', 450, 100, 500)], 'cpu', { request: 800, limit: 1000 })
+    expect(single.mode).toBe('limit')
+    expect(single.denom).toBe(500)
+    const both = podAggregate([cpu('app', 200, 0, 300), cpu('sidecar', 50, 0, 300)], 'cpu', { limit: 1000 })
+    expect(both.denom).toBe(600)
+  })
+
+  it("uses a pod-level request as the yardstick when nothing is limited", () => {
+    const containers = [cpu('app', 300, 0, 0), cpu('sidecar', 100, 0, 0)]
+    const result = podAggregate(containers, 'cpu', { request: 800 })
+    expect(result.mode).toBe('request')
+    expect(result.denom).toBe(800)
+  })
+})
+
+describe('buildContainerResourceTooltip with a pod-level budget', () => {
+  const fmt = (n: number) => `${n}m`
+  const containers = [cpu('app', 300, 0, 0), cpu('sidecar', 100, 0, 0)]
+
+  it('shows the shared pod budget instead of calling covered containers unlimited', () => {
+    const html = renderToStaticMarkup(
+      buildContainerResourceTooltip('CPU', containers, 'cpu', fmt, undefined, { usage: 400, limit: 1000, request: 500 }),
+    )
+    expect(html).not.toContain('no limit')
+    expect(html).toContain('pod limit')
+    expect(html).toContain('Pod (shared)')
+    expect(html).toContain('400m · 40% · 1000m limit · req 500m')
+  })
+
+  it('keeps "no limit" when there is no pod-level budget', () => {
+    const html = renderToStaticMarkup(buildContainerResourceTooltip('CPU', containers, 'cpu', fmt))
+    expect(html).toContain('no limit')
+    expect(html).not.toContain('Pod (shared)')
+  })
+})