@skyhook-io/k8s-ui 1.14.12 → 1.16.0

package/src/components/logs/useLogSearch.ts

@@ -3,6 +3,8 @@ import type { VirtuosoHandle } from 'react-virtuoso'
 import type { LogEntry } from './useLogBuffer'
 import { stripAnsi, escapeRegExp } from '../../utils/log-format'
 
+export type LogSearchMode = 'highlight' | 'only' | 'hide'
+
 interface UseLogSearchReturn {
   query: string
   setQuery: (q: string) => void
@@ -11,14 +13,16 @@ interface UseLogSearchReturn {
   setIsRegex: (v: boolean) => void
   isCaseSensitive: boolean
   toggleCaseSensitive: () => void
-  isFilterMode: boolean
-  toggleFilterMode: () => void
-  setFilterMode: (v: boolean) => void
+  /** highlight: show every line, mark matches · only: show matching lines · hide: drop matching lines */
+  mode: LogSearchMode
+  setMode: (mode: LogSearchMode) => void
+  /** Whether the query currently narrows the visible lines (only/hide with a non-empty, valid query) */
+  isFiltering: boolean
   matchCount: number
   currentMatch: number
   /** Indices into the entries array that match */
   matchIndices: number[]
-  /** When filter mode is on, only matching entries */
+  /** The lines left after applying the mode: matching lines for `only`, non-matching for `hide` */
   filteredEntries: LogEntry[]
   /** Error message when regex is invalid (null when valid) */
   regexError: string | null
@@ -29,14 +33,32 @@ interface UseLogSearchReturn {
   close: () => void
 }
 
+/**
+ * The lines a search mode leaves visible. Only and Hide act on whole records:
+ * a match on any line of a stack trace keeps or hides the trace together.
+ */
+export function applySearchMode<T extends { id: number }>(
+  entries: readonly T[],
+  matchIndices: readonly number[],
+  mode: LogSearchMode,
+  recordIdOf: (entry: T) => number = e => e.id,
+): T[] {
+  if (mode === 'highlight') return [...entries]
+  const matchedRecords = new Set(matchIndices.map(i => recordIdOf(entries[i])))
+  const keepMatches = mode === 'only'
+  return entries.filter(e => matchedRecords.has(recordIdOf(e)) === keepMatches)
+}
+
 export function useLogSearch(
   entries: LogEntry[],
   virtuosoRef: React.RefObject<VirtuosoHandle | null>,
+  /** Id of the record an entry belongs to (its first line's id); defaults to the entry itself */
+  recordIdOf?: (entry: LogEntry) => number,
 ): UseLogSearchReturn {
   const [query, setQuery] = useState('')
   const [isRegex, setIsRegex] = useState(false)
   const [isCaseSensitive, setIsCaseSensitive] = useState(false)
-  const [isFilterMode, setIsFilterMode] = useState(false)
+  const [mode, setMode] = useState<LogSearchMode>('highlight')
   const [currentMatch, setCurrentMatch] = useState(0)
   const [isOpen, setIsOpen] = useState(false)
 
@@ -72,12 +94,17 @@ export function useLogSearch(
     }
   }, [entries, deferredQuery, isRegex, isCaseSensitive])
 
-  // Filtered entries for filter mode
-  const filteredEntries = useMemo(() => {
-    if (!isFilterMode || !deferredQuery) return entries
-    const matchSet = new Set(matchIndices)
-    return entries.filter((_, i) => matchSet.has(i))
-  }, [entries, isFilterMode, deferredQuery, matchIndices])
+  // Gate on the live query too, so clearing or closing search unfilters immediately
+  // rather than after the deferred value catches up.
+  const isFiltering = mode !== 'highlight' && !!query && !!deferredQuery && !regexError
+  const filteredEntries = useMemo(
+    () => (isFiltering ? applySearchMode(entries, matchIndices, mode, recordIdOf) : entries),
+    [entries, isFiltering, mode, matchIndices, recordIdOf],
+  )
+  const filteredIndexById = useMemo(() => {
+    if (mode !== 'only' || !isFiltering) return null
+    return new Map(filteredEntries.map((e, i) => [e.id, i]))
+  }, [mode, isFiltering, filteredEntries])
 
   // Reset current match when search criteria change (but not when new entries arrive during streaming)
   const prevCriteria = useRef({ query, isRegex, isCaseSensitive })
@@ -94,10 +121,13 @@ export function useLogSearch(
 
   const scrollToMatch = useCallback((matchIdx: number) => {
     if (matchIdx < 0 || matchIdx >= matchIndices.length) return
-    if (isFilterMode) {
-      // In filter mode, match index maps directly to filtered list index
+    if (mode === 'hide') return
+    if (mode === 'only') {
+      // The list holds whole matching records, so find the matched line within it
+      const index = filteredIndexById?.get(entries[matchIndices[matchIdx]].id)
+      if (index === undefined) return
       virtuosoRef.current?.scrollToIndex({
-        index: matchIdx,
+        index,
         align: 'center',
         behavior: 'smooth',
       })
@@ -109,26 +139,24 @@ export function useLogSearch(
         behavior: 'smooth',
       })
     }
-  }, [matchIndices, isFilterMode, virtuosoRef])
+  }, [entries, matchIndices, mode, filteredIndexById, virtuosoRef])
 
   const goToNext = useCallback(() => {
-    if (matchIndices.length === 0) return
+    if (matchIndices.length === 0 || mode === 'hide') return
     const next = (currentMatch + 1) % matchIndices.length
     setCurrentMatch(next)
     scrollToMatch(next)
-  }, [currentMatch, matchIndices.length, scrollToMatch])
+  }, [currentMatch, matchIndices.length, mode, scrollToMatch])
 
   const goToPrev = useCallback(() => {
-    if (matchIndices.length === 0) return
+    if (matchIndices.length === 0 || mode === 'hide') return
     const prev = (currentMatch - 1 + matchIndices.length) % matchIndices.length
     setCurrentMatch(prev)
     scrollToMatch(prev)
-  }, [currentMatch, matchIndices.length, scrollToMatch])
+  }, [currentMatch, matchIndices.length, mode, scrollToMatch])
 
   const toggleRegex = useCallback(() => setIsRegex(p => !p), [])
   const toggleCaseSensitive = useCallback(() => setIsCaseSensitive(p => !p), [])
-  const toggleFilterMode = useCallback(() => setIsFilterMode(p => !p), [])
-  const setFilterMode = useCallback((v: boolean) => setIsFilterMode(v), [])
 
   const open = useCallback(() => setIsOpen(true), [])
   const close = useCallback(() => {
@@ -144,9 +172,9 @@ export function useLogSearch(
     setIsRegex,
     isCaseSensitive,
     toggleCaseSensitive,
-    isFilterMode,
-    toggleFilterMode,
-    setFilterMode,
+    mode,
+    setMode,
+    isFiltering,
     matchCount: matchIndices.length,
     currentMatch,
     matchIndices,

package/src/components/namespace-switcher/NamespacePicker.test.tsx

@@ -0,0 +1,140 @@
+// @vitest-environment jsdom
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { NamespacePicker, type NamespacePickerProps, type NamespaceScopeView } from './NamespacePicker'
+
+vi.mock('../ui/Tooltip', () => ({
+  Tooltip: ({ children, content }: { children: ReactNode; content: ReactNode }) => (
+    <>
+      {children}
+      <span data-testid="tooltip">{content}</span>
+    </>
+  ),
+}))
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+let root: Root
+
+beforeEach(() => {
+  const element = document.createElement('div')
+  document.body.appendChild(element)
+  root = createRoot(element)
+})
+
+afterEach(async () => {
+  await act(async () => root.unmount())
+  document.body.replaceChildren()
+})
+
+const baseScope: NamespaceScopeView = {
+  actives: ['team-a'],
+  accessibleNamespaces: ['team-a'],
+  kubeconfigNamespace: 'team-a',
+  deniedNamespaces: [],
+  mode: 'namespace',
+  cacheScoped: false,
+  namespaceRescope: false,
+  canClearNamespace: true,
+  authoritative: false,
+}
+
+const help = <a data-testid="help">How to add namespaces</a>
+
+async function renderOpen(scope: Partial<NamespaceScopeView>, props: Partial<NamespacePickerProps> = {}) {
+  await act(async () => {
+    root.render(<NamespacePicker scope={{ ...baseScope, ...scope }} onApply={vi.fn()} {...props} />)
+  })
+  const trigger = document.querySelector<HTMLButtonElement>('button[aria-label="Switch active namespaces"]')!
+  const warning = trigger.querySelector('.lucide-triangle-alert, .lucide-alert-triangle') !== null
+  const tooltip = document.querySelector('[data-testid="tooltip"]')?.textContent ?? ''
+  await act(async () => { trigger.click() })
+  return { warning, tooltip, text: document.body.textContent ?? '' }
+}
+
+describe('NamespacePicker incomplete-list notice', () => {
+  it.each(['namespace', 'restricted'] as const)('offers the host action for a non-authoritative list in %s mode', async (mode) => {
+    const { text } = await renderOpen({ mode }, { limitedListHelp: help })
+    expect(text).toContain('Missing a namespace?')
+    expect(document.querySelector('[data-testid="help"]')).not.toBeNull()
+  })
+
+  it('says nothing about the list when the host has no action to offer', async () => {
+    const { warning, text } = await renderOpen({})
+    expect(warning).toBe(false)
+    expect(text).not.toContain('Missing a namespace?')
+  })
+
+  it('says nothing when the list is authoritative', async () => {
+    const { warning, text } = await renderOpen({ authoritative: true }, { limitedListHelp: help })
+    expect(warning).toBe(false)
+    expect(text).not.toContain('Missing a namespace?')
+    expect(document.querySelector('[data-testid="help"]')).toBeNull()
+  })
+
+  it('points an empty list at the note below it', async () => {
+    const { text } = await renderOpen(
+      { actives: [], accessibleNamespaces: [], mode: 'restricted' },
+      { limitedListHelp: help },
+    )
+    expect(text).toContain('No namespaces yet.')
+    expect(text).toContain('Missing a namespace?')
+  })
+
+  // The picker can't tell an unconfigured list from a configured or timed-out
+  // one, so a standing warning icon would nag users who have nothing to fix.
+  it('never puts a warning icon on the trigger', async () => {
+    const { warning } = await renderOpen({ mode: 'namespace' }, { limitedListHelp: help })
+    expect(warning).toBe(false)
+  })
+
+  it('says Radar can\u2019t list namespaces when the host can help and nothing is picked', async () => {
+    const { tooltip } = await renderOpen({ actives: [], mode: 'restricted' }, { limitedListHelp: help })
+    expect(tooltip).toBe('Radar can\u2019t list namespaces on this cluster.')
+  })
+
+  // A picked view keeps describing its filter; the footer carries the help.
+  it('keeps the filter tooltip once a namespace is picked', async () => {
+    const { tooltip, text } = await renderOpen({ mode: 'namespace' }, { limitedListHelp: help })
+    expect(tooltip).toBe('View is filtered to namespace team-a. Click to switch or reset.')
+    expect(text).toContain('Missing a namespace?')
+  })
+
+  // Without a host action the list is usually the viewer's complete RBAC view
+  // (auth-enabled installs, Radar Cloud), so say what it is rather than warn.
+  it('describes an RBAC-scoped list with nothing picked', async () => {
+    const { tooltip, text } = await renderOpen({ actives: [], mode: 'restricted' })
+    expect(tooltip).toBe('Showing the namespaces your account can access.')
+    expect(text).not.toContain('Missing a namespace?')
+  })
+
+  it('keeps the usual tooltip for an authoritative list', async () => {
+    const { tooltip } = await renderOpen({ actives: [], mode: 'cluster-wide', authoritative: true })
+    expect(tooltip).toBe('Currently viewing all namespaces. Click to narrow the view.')
+  })
+
+  // The backend keeps saved picks through a failed namespace load, when the
+  // list it returns can be shorter than the pick.
+  it('lists a pick missing from the available namespaces so it can be unchecked', async () => {
+    const onApply = vi.fn()
+    await act(async () => {
+      root.render(
+        <NamespacePicker
+          scope={{ ...baseScope, actives: ['team-a', 'team-b'], accessibleNamespaces: ['team-a'] }}
+          onApply={onApply}
+        />,
+      )
+    })
+    const trigger = document.querySelector<HTMLButtonElement>('button[aria-label="Switch active namespaces"]')!
+    await act(async () => { trigger.click() })
+
+    const row = Array.from(document.querySelectorAll('label')).find(l => l.textContent?.includes('team-b'))
+    const checkbox = row?.querySelector<HTMLInputElement>('input[type="checkbox"]')
+    expect(checkbox?.checked).toBe(true)
+
+    await act(async () => { checkbox!.click() })
+    const done = Array.from(document.querySelectorAll('button')).find(b => b.textContent === 'Done')!
+    await act(async () => { done.click() })
+    expect(onApply).toHaveBeenCalledWith(['team-a'])
+  })
+})

package/src/components/namespace-switcher/NamespacePicker.tsx

@@ -1,6 +1,6 @@
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
-import { ChevronDown, Globe, Search, AlertTriangle } from 'lucide-react'
+import { ChevronDown, Globe, Search } from 'lucide-react'
 import { Badge } from '../ui/Badge'
 import { Tooltip } from '../ui/Tooltip'
 import { MultiSelectPicker } from '../ui/MultiSelectPicker'
@@ -57,6 +57,12 @@ export interface NamespacePickerProps {
   variant?: 'chip' | 'segment'
   /** Muted label shown before the value in the 'segment' variant (e.g. "Namespace"). */
   label?: string
+  /**
+   * A short action (e.g. a "How to add namespaces" link) for when the list is
+   * not authoritative and the viewer can supply namespaces themselves. Omit it
+   * when the viewer can't act — the picker then says nothing about the list.
+   */
+  limitedListHelp?: ReactNode
 }
 
 /**
@@ -79,7 +85,7 @@ export interface NamespacePickerProps {
  * onApply. "Clear all" applies immediately and closes.
  */
 export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePickerProps>(function NamespacePicker(
-  { scope, onApply, loading = false, pending = false, disabled = false, disabledTooltip, className = '', variant = 'chip', label },
+  { scope, onApply, loading = false, pending = false, disabled = false, disabledTooltip, className = '', variant = 'chip', label, limitedListHelp },
   ref,
 ) {
   const [isOpen, setIsOpen] = useState(false)
@@ -116,8 +122,11 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
 
   const items = useMemo(() => {
     if (!scope) return [] as string[]
-    return [...(scope.accessibleNamespaces ?? [])].sort((a, b) => a.localeCompare(b))
-  }, [scope])
+    // A pick the backend kept through a failed namespace load can be missing
+    // from accessibleNamespaces; list it anyway so it can still be unchecked.
+    const all = new Set([...(scope.accessibleNamespaces ?? []), ...scopeActives])
+    return [...all].sort((a, b) => a.localeCompare(b))
+  }, [scope, scopeActives])
   const deniedNamespaces = useMemo(() => new Set(scope?.deniedNamespaces ?? []), [scope?.deniedNamespaces])
 
   const filteredItems = useMemo(() => {
@@ -201,8 +210,9 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
   const triggerLabel =
     activeCount === 0 ? 'All namespaces' : activeCount === 1 ? scopeActives[0] : `${activeCount} namespaces`
   const isClusterWide = activeCount === 0
-  const restrictedHint = scope.mode === 'restricted'
   const cacheScopeLocked = scope.cacheScoped && !scope.namespaceRescope
+  const needsNamespaces = scope.authoritative === false && limitedListHelp != null
+  const emptyStateLabel = needsNamespaces ? 'No namespaces yet.' : 'No namespaces available.'
   const isDisabled = disabled || loading || pending || cacheScopeLocked
   const canClearAll = scope.canClearNamespace || activeCount === 0
   const tooltipContent = disabled && disabledTooltip
@@ -211,8 +221,10 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
       ? scope.namespaceRescope
         ? `Radar is watching only ${scope.cacheScopeNamespace || triggerLabel} to stay fast on large clusters. Pick another namespace to re-point it (takes a moment; closes open terminals).`
         : `Radar is watching only ${scope.cacheScopeNamespace || triggerLabel} on this cluster.`
-      : restrictedHint
-      ? 'Limited namespace visibility — only namespaces granted by your RBAC are shown.'
+      : needsNamespaces && isClusterWide
+      ? 'Radar can\u2019t list namespaces on this cluster.'
+      : scope.authoritative === false && isClusterWide
+      ? 'Showing the namespaces your account can access.'
       : isClusterWide
         ? 'Currently viewing all namespaces. Click to narrow the view.'
         : activeCount === 1
@@ -255,11 +267,7 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
           {label && (
             <span className="shrink-0 font-normal text-theme-text-tertiary">{label}</span>
           )}
-          {isClusterWide ? (
-            <Globe className="w-3.5 h-3.5 shrink-0 text-theme-text-tertiary" />
-          ) : restrictedHint ? (
-            <AlertTriangle className="w-3.5 h-3.5 shrink-0 text-theme-text-tertiary" />
-          ) : null}
+          {isClusterWide && <Globe className="w-3.5 h-3.5 shrink-0 text-theme-text-tertiary" />}
           <span className={`font-medium truncate ${variant === 'segment' ? 'min-w-0' : 'max-w-[180px]'}`}>
             {pending ? 'Switching…' : triggerLabel}
           </span>
@@ -299,7 +307,7 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
                 <ul className="max-h-80 overflow-y-auto py-1">
                   {filteredItems.length === 0 && (
                     <li className="px-3 py-2 text-xs text-theme-text-tertiary">
-                      {search ? 'No matches.' : 'No namespaces available.'}
+                      {search ? 'No matches.' : emptyStateLabel}
                     </li>
                   )}
 
@@ -346,18 +354,16 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
                 onSearchChange={setSearch}
                 searchPlaceholder="Filter namespaces"
                 summaryEmptyLabel="All namespaces"
-                noItemsLabel="No namespaces available."
+                noItemsLabel={emptyStateLabel}
                 clearAllDisabled={!canClearAll || activeCount === 0}
                 clearAllAriaLabel="Clear namespace selection"
                 renderItemMeta={renderNamespaceMeta}
               />
             )}
 
-            {!scope.authoritative && (
-              <div className="px-3 py-2 border-t border-theme-border text-[11px] status-degraded">
-                Limited list — your RBAC doesn&rsquo;t allow listing all
-                namespaces. Other namespaces may be accessible but won&rsquo;t
-                appear here until you switch context.
+            {needsNamespaces && (
+              <div className="px-3 py-2 border-t border-theme-border text-[11px] text-theme-text-secondary">
+                Missing a namespace? {limitedListHelp}
               </div>
             )}
           </div>,

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

@@ -1,3 +1,6 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { describe, expect, it } from 'vitest'
 import { KueueAdmissionSection } from './KueueAdmissionSection'
@@ -15,6 +18,40 @@ function render(data?: KueueAdmissionResponse, props: Partial<React.ComponentPro
 }
 
 describe('Kueue admission investigation', () => {
+  it('offers source navigation only when the Workload reference and navigation are available', async () => {
+    const data = response()
+    const navigated: unknown[] = []
+    const container = document.createElement('div')
+    const root = createRoot(container)
+    await act(async () => root.render(<KueueAdmissionSection data={data} loading={false} hinted externalExecution={false} onNavigate={(target) => navigated.push(target)} />))
+    const button = Array.from(container.querySelectorAll('button')).find((node) => node.textContent === 'View Workload details')!
+    await act(async () => button.click())
+    expect(navigated).toEqual([{ ...ref, kind: 'workloads' }])
+    await act(async () => root.unmount())
+    expect(render(data, { onNavigate: undefined })).not.toContain('View Workload details')
+    delete data.workloads[0].ref
+    expect(render(data)).not.toContain('View Workload details')
+  })
+
+  it('shows supplied gate transition times without inventing missing timestamps', () => {
+    const lastTransitionTime = '2026-09-26T10:00:00Z'
+    const gate = { kind: 'admission_check', name: 'capacity', decision: 'unsatisfied' as const, nativeState: 'Pending' }
+    expect(render(response({ gates: [{ ...gate, lastTransitionTime }] }))).toContain(`dateTime="${lastTransitionTime}"`)
+    expect(render(response({ gates: [gate] }))).not.toContain('Status since')
+  })
+
+  it('shows record creation times only when distinguishing multiple Workloads', () => {
+    const data = response()
+    data.workloads[0].createdAt = '2026-09-26T09:00:00Z'
+    expect(render(data)).not.toContain('Created <time')
+    data.total = 2
+    data.truncated = true
+    expect(render(data)).toContain('Created <time')
+    expect(render(data)).toContain('order does not identify a current attempt')
+    data.workloads[0].createdAt = null
+    expect(render(data)).not.toContain('Created <time')
+  })
+
   it('hides confirmed empty unhinted roots but preserves unavailable and in-flight evidence', () => {
     const empty = { uid: 'root-uid', installed: true, total: 0, truncated: false, workloads: [] }
     expect(render(empty)).toBe('')
@@ -34,8 +71,8 @@ describe('Kueue admission investigation', () => {
     const html = render(response({ primaryCondition: { type: 'QuotaReserved', status: 'False', reason: 'Inadmissible', message: 'ClusterQueue training is inactive', observedGeneration: 1 }, queues: [{ name: 'ready', roles: ['submission'] }] }))
     expect(html).toContain('Inadmissible')
     expect(html).toContain('ClusterQueue training is inactive')
-    expect(html).toContain('stale evidence')
-    expect(html).toContain('submission queue: ready')
+    expect(html).toContain('Stale evidence')
+    expect(html).toContain('Submission queue: ready')
     expect(html).not.toContain('suspended because')
   })
 
@@ -44,7 +81,7 @@ describe('Kueue admission investigation', () => {
   ] as const)('preserves native phase %s', (phase, label) => {
     const html = render(response({ decision: 'satisfied', kueue: { phase } }))
     expect(html).toContain(label)
-    expect(html).toContain('does not prove that Jobs or Pods are running')
+    expect(html.includes('Admission status; execution is shown separately.')).toBe(phase === 'admitted' || phase === 'quota_reserved')
   })
 
   it('keeps disruptions, inactive state, check retries and requeues distinct', () => {
@@ -71,15 +108,15 @@ describe('Kueue admission investigation', () => {
   it('does not present an unrecognized finish reason as a successful outcome', () => {
     const html = render(response({ decision: 'unknown', primaryCondition: { type: 'Finished', status: 'True', reason: 'CustomFinish' }, kueue: { phase: 'finished' } }))
     expect(html).toContain('CustomFinish')
-    expect(html).toContain('lucide-minus')
+    expect(html).toContain('Admission unknown')
     expect(html).not.toContain('lucide-check')
   })
 
   it('shows a deactivation condition once when it is also the primary evidence', () => {
     const condition = { type: 'DeactivationTarget', status: 'True', reason: 'AdmissionCheck' }
     const html = render(response({ decision: 'held', primaryCondition: condition, disruptions: [condition], kueue: { phase: 'pending', active: false } }))
-    expect(html).toContain('Primary condition: DeactivationTarget')
-    expect(html.match(/AdmissionCheck/g)).toHaveLength(1)
+    expect(html).toContain('DeactivationTarget=True')
+    expect(html).not.toContain('Reported disruptions')
   })
 
   it('keeps bounded records separate and never names the newest as current', () => {
@@ -93,3 +130,143 @@ describe('Kueue admission investigation', () => {
     expect(html).toContain('Deleting')
   })
 })
+
+
+it('keeps actionable evidence visible while nominal evidence is inert until expanded', async () => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+  const container = document.createElement('div')
+  const root = createRoot(container)
+  const data = response({
+    primaryCondition: { type: 'Admitted', status: 'True', reason: 'Admitted', message: 'Primary message' },
+    kueue: { phase: 'admitted', podsReady: { type: 'PodsReady', status: 'False', message: 'Workers not ready' }, waitingForReplacementPods: { type: 'WaitingForReplacementPods', status: 'False', message: 'No replacements needed' } },
+    gates: [
+      { kind: 'admission_check', name: 'ready-check', nativeState: 'Ready', decision: 'satisfied', message: 'Policy accepted' },
+      { kind: 'admission_check', name: 'reject-check', nativeState: 'Rejected', decision: 'unsatisfied', message: 'Policy limit exceeded', retryCount: 0 },
+    ],
+  })
+  try {
+    await act(async () => root.render(<KueueAdmissionSection data={data} loading={false} hinted externalExecution={false} />))
+    const text = (value: string) => [...container.querySelectorAll('p')].find((element) => element.textContent?.endsWith(value))!
+    expect(text('Workers not ready').closest('[inert]')).toBeNull()
+    expect(text('Policy limit exceeded').closest('[inert]')).toBeNull()
+    expect(text('No replacements needed').closest('[inert]')).not.toBeNull()
+    expect(text('Policy accepted').closest('[inert]')).not.toBeNull()
+    const toggle = [...container.querySelectorAll('button')].find((button) => button.textContent?.startsWith('Technical details'))!
+    expect(toggle.getAttribute('aria-expanded')).toBe('false')
+    expect(toggle.textContent).toContain('1 additional condition')
+    expect(toggle.textContent).toContain('1 ready check')
+    await act(async () => toggle.click())
+    expect(toggle.getAttribute('aria-expanded')).toBe('true')
+    expect(text('Policy accepted').closest('[inert]')).toBeNull()
+    expect(container.textContent?.match(/Primary message/g)).toHaveLength(1)
+  } finally { await act(async () => root.unmount()) }
+})
+
+it.each([
+  { type: 'PodsReady', status: 'True', observedGeneration: 1 },
+  { type: 'PodsReady', status: 'Unknown' },
+  { type: 'WaitingForReplacementPods', status: 'True' },
+])('does not hide stale or non-nominal supporting conditions: %j', async (condition) => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+  const container = document.createElement('div')
+  const root = createRoot(container)
+  try {
+    await act(async () => root.render(<KueueAdmissionSection data={response({ kueue: { phase: 'pending', [condition.type === 'PodsReady' ? 'podsReady' : 'waitingForReplacementPods']: { ...condition, message: 'Needs attention' } } })} loading={false} hinted externalExecution={false} />))
+    const message = [...container.querySelectorAll('p')].find((element) => element.textContent?.endsWith('Needs attention'))!
+    expect(message.closest('[inert]')).toBeNull()
+  } finally { await act(async () => root.unmount()) }
+})
+
+it.each(['failed', undefined] as const)('never colors a finished %s outcome as successful admission', (outcome) => {
+  const html = render(response({ decision: 'satisfied', primaryCondition: { type: 'Finished', status: 'True' }, kueue: { phase: 'finished', outcome, podsReady: { type: 'PodsReady', status: 'False', message: 'No running pods' } } }))
+  expect(html).not.toContain('bg-emerald')
+  expect(html).toContain('Pod readiness')
+  expect(html).toContain('No running pods')
+})
+
+
+it('uses an expanded Section in drawers and keeps the default fullscreen card', async () => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+  const container = document.createElement('div')
+  const root = createRoot(container)
+  try {
+    await act(async () => root.render(<KueueAdmissionSection presentation="drawer" data={response()} loading={false} hinted externalExecution={false} />))
+    const toggle = [...container.querySelectorAll('button')].find((button) => button.textContent === 'Kueue admission')!
+    expect(toggle.getAttribute('aria-expanded')).toBe('true')
+    expect(container.querySelector('section[aria-label="Kueue admission"]')).toBeNull()
+    await act(async () => toggle.click())
+    expect(toggle.getAttribute('aria-expanded')).toBe('false')
+    expect(container.querySelector('article')!.closest('[inert]')).not.toBeNull()
+    await act(async () => root.render(<KueueAdmissionSection data={response()} loading={false} hinted externalExecution={false} />))
+    expect(container.querySelector('section[aria-label="Kueue admission"]')).not.toBeNull()
+  } finally { await act(async () => root.unmount()) }
+})
+
+
+it('does not color an open preemption gate as an admission warning', () => {
+  const html = render(response({ decision: 'satisfied', kueue: { phase: 'admitted' }, gates: [{ kind: 'preemption_gate', name: 'preemption-policy', nativeState: 'Open', decision: 'satisfied' }] }))
+  expect(html).toContain('Open')
+  expect(html).not.toContain('bg-amber')
+  expect(html).toContain('alone does not establish an admission blocker')
+})
+
+
+it('preserves producer check order and keeps operational delays visible while zero metadata collapses', async () => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+  const container = document.createElement('div')
+  const root = createRoot(container)
+  const data = response({
+    primaryCondition: { type: 'QuotaReserved', status: 'True', reason: 'ReservedNativeReason', message: 'Waiting for checks' },
+    gates: [
+      { kind: 'admission_check', name: 'rejected', nativeState: 'Rejected', decision: 'unsatisfied', message: 'Policy rejected' },
+      { kind: 'admission_check', name: 'retry', nativeState: 'Retry', decision: 'unsatisfied', retryCount: 3, requeueAfterSeconds: 60 },
+      { kind: 'admission_check', name: 'pending', nativeState: 'Pending', decision: 'unsatisfied', retryCount: 0 },
+    ],
+    disruptions: [{ type: 'Evicted', status: 'True', reason: 'NativeEviction', message: 'Eviction message', lastTransitionTime: '2026-09-26T00:00:00Z' }],
+    kueue: { phase: 'quota_reserved', podsReady: { type: 'PodsReady', status: 'Unknown', message: 'Readiness message' }, requeueState: { count: 0 } },
+  })
+  try {
+    await act(async () => root.render(<KueueAdmissionSection data={data} loading={false} hinted externalExecution={false} />))
+    const checks = container.querySelector('section[aria-label="Admission checks"]')!
+    expect(checks.textContent!.indexOf('rejected')).toBeLessThan(checks.textContent!.indexOf('retry'))
+    expect(checks.textContent!.indexOf('retry')).toBeLessThan(checks.textContent!.indexOf('pending'))
+    const paragraph = (value: string) => [...container.querySelectorAll('p')].find(e => e.textContent?.includes(value))!
+    expect(paragraph('Retries: 3').closest('[inert]')).toBeNull()
+    expect(paragraph('Requeue delay: 60s').closest('[inert]')).toBeNull()
+    expect(paragraph('Retries: 0').closest('[inert]')).not.toBeNull()
+    expect(paragraph('Requeues: 0').closest('[inert]')).not.toBeNull()
+    expect(paragraph('ReservedNativeReason').closest('[inert]')).not.toBeNull()
+    expect(paragraph('Readiness message').textContent).toContain('Pods ready: Unknown')
+    expect(paragraph('Eviction message').querySelector('span.block')?.textContent).toMatch(/^Evicted · Status since .+ ago$/)
+    expect(paragraph('Eviction message').lastChild?.textContent).toBe('Eviction message')
+    expect([...container.querySelectorAll('h4, h5')].map(e => e.textContent)).toEqual(['Admission', 'Admission checks · 3 not ready', 'Supporting evidence', 'Reported disruptions · 1', 'Pod readiness · 1'])
+  } finally { await act(async () => root.unmount()) }
+})
+
+
+it('labels a missing native check state Unknown rather than displaying its decision as a state', () => {
+  const html = render(response({ gates: [{ kind: 'admission_check', name: 'unknown-check', decision: 'unsatisfied', message: 'Controller has not reported a state' }] }))
+  expect(html).toContain('>Unknown</span>')
+  expect(html).toContain('Controller has not reported a state')
+})
+
+
+it('shows requeue eligibility without inventing a count or a leading separator', () => {
+  const html = render(response({ kueue: { phase: 'pending', requeueState: { requeueAt: '2026-09-27T00:00:00Z' } } }))
+  expect(html).toContain('>Eligible again: 2026-09-27T00:00:00Z</p>')
+  expect(html).not.toContain('Requeues:')
+})
+
+
+it('shows primary-condition polarity next to its transition age', () => {
+  const html = render(response({ primaryCondition: { type: 'QuotaReserved', status: 'False', message: 'Insufficient quota', lastTransitionTime: '2026-09-26T00:00:00Z' } }))
+  expect(html).toContain('QuotaReserved=False since')
+})
+
+
+it.each([false, true, undefined])('suppresses the held qualifier only when inactive already explains it: %s', (active) => {
+  const html = render(response({ decision: 'held', kueue: { phase: 'quota_reserved', active } }))
+  expect(html.includes('Admission held')).toBe(active !== false)
+  expect(html.includes('Workload inactive')).toBe(active === false)
+  expect(html).toContain('Decision: held')
+})