@skyhook-io/k8s-ui 1.14.11 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.14.11",
+  "version": "1.15.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -19,6 +19,7 @@
       "./src/components/resources/*.ts",
       "./src/components/resources/*.tsx"
     ],
+    "./components/resources/KueueAdmissionSection": "./src/components/resources/KueueAdmissionSection.tsx",
     "./components/resources/renderers/*": [
       "./src/components/resources/renderers/*.tsx",
       "./src/components/resources/renderers/*.ts"

package/src/components/compare/CompareResourcePicker.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState, useId } from 'react'
 import { clsx } from 'clsx'
 import { GitCompare, Search, X } from 'lucide-react'
 import { DialogPortal } from '../ui/DialogPortal'
@@ -33,6 +33,7 @@ export function CompareResourcePicker({
   error,
   onPick,
 }: CompareResourcePickerProps) {
+  const titleId = useId()
   const [query, setQuery] = useState('')
   const [highlightIdx, setHighlightIdx] = useState(0)
   const listRef = useRef<HTMLUListElement | null>(null)
@@ -90,11 +91,11 @@ export function CompareResourcePicker({
   const sourceChipBg = SIDE_TONES[sourceSide].chipBg
 
   return (
-    <DialogPortal open={open} onClose={onClose} className="max-w-xl w-full max-h-[70vh] flex flex-col">
+    <DialogPortal ariaLabelledBy={titleId} open={open} onClose={onClose} className="max-w-xl w-full max-h-[70vh] flex flex-col">
       <div className="flex items-center justify-between px-4 py-3 border-b border-theme-border shrink-0">
         <div className="flex items-center gap-2">
           <GitCompare className="w-5 h-5 text-skyhook-400" />
-          <h3 className="text-sm font-semibold text-theme-text-primary">
+          <h3 id={titleId} className="text-sm font-semibold text-theme-text-primary">
             {sourceSide === 'a'
               ? `Compare to another ${pluralToKind(source.kind)}`
               : `Replace side B with another ${pluralToKind(source.kind)}`}

package/src/components/gitops/RollbackDialog.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useId } from 'react'
 import { History, Loader2 } from 'lucide-react'
 
 import { DialogPortal } from '../ui/DialogPortal'
@@ -30,6 +30,7 @@ export interface RollbackDialogProps {
 }
 
 export function RollbackDialog({ open, appLabel, revision, historyId, pending, onCancel, onConfirm }: RollbackDialogProps) {
+  const titleId = useId()
   const [prune, setPrune] = useState(false)
   const [dryRun, setDryRun] = useState(false)
 
@@ -41,9 +42,9 @@ export function RollbackDialog({ open, appLabel, revision, historyId, pending, o
   }, [open])
 
   return (
-    <DialogPortal open={open} onClose={pending ? () => {} : onCancel} className="w-[440px]" closable={!pending}>
+    <DialogPortal ariaLabelledBy={titleId} open={open} onClose={pending ? () => {} : onCancel} className="w-[440px]" closable={!pending}>
       <div className="border-b border-theme-border px-4 py-3">
-        <h2 className="text-sm font-semibold text-theme-text-primary">Roll back application</h2>
+        <h2 id={titleId} className="text-sm font-semibold text-theme-text-primary">Roll back application</h2>
         <p className="mt-0.5 text-xs text-theme-text-tertiary">{appLabel}</p>
       </div>
       <div className="space-y-4 px-4 py-4 text-sm">

package/src/components/gitops/SyncOptionsDialog.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, type ComponentType } from 'react'
+import { useState, useEffect, type ComponentType, useId } from 'react'
 import { AlertTriangle, CheckCircle2, CircleAlert, Loader2, RefreshCw, ShieldCheck, XCircle } from 'lucide-react'
 
 import { DialogPortal } from '../ui/DialogPortal'
@@ -58,6 +58,7 @@ export interface ResourceValidationResult {
 }
 
 export function SyncOptionsDialog({ open, appLabel, resource, pending, autoSyncEnabled, validationPending, operationInProgress, validationResult, validationError, onCancel, onConfirm, onValidate, onValidationReset }: SyncOptionsDialogProps) {
+  const titleId = useId()
   const [revision, setRevision] = useState('')
   const [prune, setPrune] = useState(true)
   const [dryRun, setDryRun] = useState(false)
@@ -97,9 +98,9 @@ export function SyncOptionsDialog({ open, appLabel, resource, pending, autoSyncE
   }
 
   return (
-    <DialogPortal open={open} onClose={busy ? () => {} : onCancel} className="w-[480px]" closable={!busy}>
+    <DialogPortal ariaLabelledBy={titleId} open={open} onClose={busy ? () => {} : onCancel} className="w-[480px]" closable={!busy}>
       <div className="border-b border-theme-border px-4 py-3">
-        <h2 className="text-sm font-semibold text-theme-text-primary">{resource ? 'Sync resource' : 'Sync application'}</h2>
+        <h2 id={titleId} className="text-sm font-semibold text-theme-text-primary">{resource ? 'Sync resource' : 'Sync application'}</h2>
         <p className="mt-0.5 break-all text-xs text-theme-text-tertiary">{appLabel}</p>
       </div>
       <div className="space-y-4 px-4 py-4 text-sm">

package/src/components/gitops/health-provenance.test.ts

@@ -30,7 +30,7 @@ describe('radarHealthNote', () => {
 
   test('hasRadarFinding reads the rows the markers read', () => {
     const row = (health: string, healthSource?: string) =>
-      ({ ref: { kind: 'Deployment', namespace: 'p', name: 'w' }, category: 'Unknown', health, healthSource, hasDesired: false, hasLive: true }) as const
+      ({ ref: { kind: 'Deployment', namespace: 'p', name: 'w' }, category: 'Unknown', health, healthSource, hasDesired: false, hasLive: true, partial: false }) as const
     expect(hasRadarFinding(undefined)).toBe(false)
     expect(hasRadarFinding([row('Degraded', 'controller')])).toBe(false)
     expect(hasRadarFinding([row('Healthy', 'radar')])).toBe(false)

package/src/components/gitops/insights/ArgoResourceDiff.tsx

@@ -83,6 +83,7 @@ export function ArgoResourceDiff({ diff, loading, error }: ArgoResourceDiffProps
       <DialogPortal
         open={maximized}
         onClose={() => setMaximized(false)}
+        ariaLabel="Resource diff"
         className="dialog flex h-[90vh] w-full max-w-6xl flex-col"
       >
         <ArgoResourceDiffContent diff={diff} onClose={() => setMaximized(false)} />

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

package/src/components/resources/KueueAdmissionSection.tsx

@@ -1,87 +1,176 @@
-import { isKueueConditionStale } from './resource-utils-kueue'
+import { admissionCheckSeverity, isKueueConditionStale } from './resource-utils-kueue'
+import { Disclosure } from '../ui/Disclosure'
+import { formatRelativeAgeTime } from '../../utils/format'
 import { Badge } from '../ui/Badge'
-import { AlertBanner, ConditionsSection, ResourceLink } from '../ui/drawer-components'
+import { AlertBanner, ResourceLink, Section } from '../ui/drawer-components'
 import { kindToPluralWithGroup } from '../../utils/navigation'
-import type { KueueAdmissionResponse, SchedulingObservation, SchedulingRef } from '../../types/scheduling'
+import type { KueueAdmissionResponse, SchedulingCondition, SchedulingObservation, SchedulingRef } from '../../types/scheduling'
 
 interface KueueAdmissionSectionProps {
+  presentation?: 'card' | 'drawer'
   data?: KueueAdmissionResponse
   loading: boolean
   error?: string
   forbidden?: boolean
   hinted: boolean
   externalExecution: boolean
+  hasOwner?: boolean
   onRetry?: () => void
   onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
 }
 
 const phases = { pending: 'Pending admission', quota_reserved: 'Quota reserved', admitted: 'Admitted', finished: 'Finished' }
 
-export function KueueAdmissionSection({ data, loading, error, forbidden, hinted, externalExecution, onRetry, onNavigate }: KueueAdmissionSectionProps) {
+export function KueueAdmissionSection({ presentation = 'card', data, loading, error, forbidden, hinted, externalExecution, hasOwner, onRetry, onNavigate }: KueueAdmissionSectionProps) {
   if (!loading && !error && data && data.workloads.length === 0 && !hinted) return null
   const link = (name: string, ref?: SchedulingRef) => ref
     ? <ResourceLink {...ref} kind={kindToPluralWithGroup(ref.kind, ref.group ?? '')} label={name} onNavigate={onNavigate} />
     : name
-  return (
-    <section className="rounded-lg border border-theme-border bg-theme-surface p-4" aria-label="Kueue admission">
-      <h3 className="text-sm font-semibold text-theme-text-primary">Kueue admission</h3>
-      <p className="mt-1 text-xs text-theme-text-secondary">Admission and execution are separate observations. An admitted Workload does not prove that Jobs or Pods are running.</p>
-      {loading ? <p className="mt-3 text-sm text-theme-text-secondary">Looking for controller-owned Workloads…</p>
-        : error ? <div className="mt-3 [&>div]:mb-0"><AlertBanner variant={forbidden ? 'info' : 'warning'} title={forbidden ? 'Admission lookup requires permission' : 'Admission evidence unavailable'} message={error}>{!forbidden && onRetry && <button type="button" className="mt-2 text-accent-text hover:underline" onClick={onRetry}>Retry admission lookup</button>}</AlertBanner></div>
-          : data && !data.installed ? <p className="mt-3 text-sm text-theme-text-secondary">Kueue Workloads are not served by this cluster.</p>
-            : data && data.workloads.length === 0 ? <p className="mt-3 text-sm text-theme-text-secondary">No controller-owned Kueue Workload observed in this namespace.{externalExecution ? ' This JobSet uses an external controller; local absence does not establish remote admission or execution state.' : ' Queue metadata alone does not establish an admission decision.'}</p>
-              : data && <div className="mt-3 space-y-3">
+  const spacing = presentation === 'drawer' ? '' : 'mt-3'
+  const content = <>
+      {loading ? <p className={`${spacing} text-sm text-theme-text-secondary`}>Looking for controller-owned Workloads…</p>
+        : error ? <div className={`${spacing} [&>div]:mb-0`}><AlertBanner variant={forbidden ? 'info' : 'warning'} title={forbidden ? 'Admission lookup requires permission' : 'Admission evidence unavailable'} message={error}>{!forbidden && onRetry && <button type="button" className="mt-2 text-accent-text hover:underline" onClick={onRetry}>Retry admission lookup</button>}</AlertBanner></div>
+          : data && !data.installed ? <p className={`${spacing} text-sm text-theme-text-secondary`}>Kueue Workloads are not served by this cluster.</p>
+            : data && data.workloads.length === 0 ? <p className={`${spacing} text-sm text-theme-text-secondary`}>No controller-owned Kueue Workload observed in this namespace.{hasOwner ? ' Admission may be tracked on the owning resource; use the existing owner link to inspect it.' : externalExecution ? ' This workload uses an external controller; local absence does not establish remote admission or execution state.' : ' Queue metadata alone does not establish an admission decision.'}</p>
+              : data && <div className={`${spacing} space-y-3`}>
                 {data.total > 1 && <p className="text-xs text-theme-text-secondary">{data.truncated ? `${data.workloads.length} of ${data.total}` : data.total} Workloads shown, newest first. Each is a separate controller-owned record; order does not identify a current attempt.</p>}
-                {data.workloads.map((workload) => <article key={workload.uid} className="card-inner space-y-2 text-sm">
-                  <div className="flex flex-wrap items-center gap-2"><span className="font-medium">{link(workload.name, workload.ref)}</span>{workload.deleting && <Badge severity="alert">Deleting</Badge>}<span className="text-xs text-theme-text-tertiary">Generation {workload.generation}</span></div>
+                {data.workloads.map((workload) => <article key={workload.uid} className="space-y-2 text-sm border-t border-theme-border pt-3 first:border-0 first:pt-0">
+                  {data.total > 1 && workload.createdAt && <p className="text-xs text-theme-text-tertiary">Created <time dateTime={workload.createdAt} title={workload.createdAt}>{formatRelativeAgeTime(workload.createdAt)}</time></p>}
+                  {workload.projection !== 'available' && <div className="flex flex-wrap items-center gap-2">{link(workload.name, workload.ref)}{workload.deleting && <Badge severity="alert">Deleting</Badge>}</div>}
                   {workload.projection === 'unsupported' ? <p className="text-theme-text-secondary">Associated Workload found. Scheduling projection is unavailable for {workload.apiVersion}; inspect the resource for native evidence.</p>
                     : workload.projection === 'forbidden' ? <p className="text-theme-text-secondary">Associated Workload found, but permission to get this Workload is required for its scheduling detail.</p>
-                      : workload.scheduling?.observations?.map((observation, index) => <AdmissionObservation key={index} observation={observation} link={link} />)}
+                      : workload.scheduling?.observations?.map((observation, index) => <AdmissionObservation key={index} presentation={presentation} observation={observation} identity={link(workload.name, workload.ref)} sourceLink={workload.ref && onNavigate ? link("View Workload details", workload.ref) : undefined} generation={workload.generation} deleting={workload.deleting} link={link} />)}
                   {workload.linksLimited && <p className="text-xs text-theme-text-tertiary">Some resource links are unavailable. Names already reported by the Workload remain visible.</p>}
                 </article>)}
               </div>}
-    </section>
-  )
+    </>
+  return presentation === 'drawer'
+    ? <Section title="Kueue admission">{content}</Section>
+    : <section className="space-y-3" aria-label="Kueue admission"><h3 className="text-sm font-semibold text-theme-text-primary">Kueue admission</h3>{content}</section>
+}
+
+type Link = (name: string, ref?: SchedulingRef) => React.ReactNode
+
+
+const evidenceCard = 'min-w-0 overflow-hidden rounded-lg border border-theme-border bg-theme-surface'
+const cardHeader = 'border-b border-theme-border bg-theme-elevated px-3 py-2.5'
+const groupHeading = 'text-xs font-medium uppercase tracking-wider text-theme-text-secondary'
+type Gate = NonNullable<SchedulingObservation['gates']>[number]
+
+function conditionLabel(condition: SchedulingCondition): string {
+  const { type, status } = condition
+  if (type === 'PodsReady') return `Pods ready: ${status === 'True' ? 'yes' : status === 'False' ? 'no' : status}`
+  if (type === 'WaitingForReplacementPods') return `Replacement Pods: ${status === 'True' ? 'waiting' : status === 'False' ? 'not waiting' : status}`
+  if (status === 'True') {
+    if (type === 'Evicted') return 'Evicted'
+    if (type === 'Preempted') return 'Preempted'
+    if (type === 'DeactivationTarget') return 'Deactivation requested'
+  }
+  return `${type}=${status}`
+}
+
+function ConditionEvidence({ condition, generation, showAge }: { condition: SchedulingCondition; generation?: number; showAge?: boolean }) {
+  return <div className="space-y-1 py-3 first:pt-0 last:pb-0">
+    <p className="max-w-3xl whitespace-pre-wrap break-words text-theme-text-secondary">
+      <span className="block font-medium text-theme-text-primary">{conditionLabel(condition)}{showAge && condition.lastTransitionTime && <span className="font-normal text-xs text-theme-text-tertiary"> · Status since {formatRelativeAgeTime(condition.lastTransitionTime)}</span>}</span>
+      {condition.message || condition.reason || `${condition.type}=${condition.status}`}
+    </p>
+    {isKueueConditionStale(condition, generation) && <p className="text-xs text-warning-text">Stale evidence: condition generation {condition.observedGeneration}; Workload generation {generation}.</p>}
+  </div>
+}
+
+function GateEvidence({ gate, link }: { gate: Gate; link: Link }) {
+  const retryMetadata = [gate.retryCount != null && gate.retryCount > 0 ? `Retries: ${gate.retryCount}` : null, gate.requeueAfterSeconds != null && gate.requeueAfterSeconds > 0 ? `Requeue delay: ${gate.requeueAfterSeconds}s` : null].filter(Boolean)
+  return <div className="space-y-2 py-3">
+    <div className="grid grid-cols-[minmax(0,1fr)_6rem] items-start gap-2">
+      <span className="min-w-0 break-words font-medium [&_button]:text-left">{link(gate.name, gate.ref)}</span>
+      <Badge className="justify-self-end" severity={gate.kind === 'preemption_gate' ? 'neutral' : admissionCheckSeverity(gate.nativeState)}>{gate.nativeState || 'Unknown'}</Badge>
+    </div>
+    {gate.lastTransitionTime && <p className="text-xs text-theme-text-tertiary">Status since <time dateTime={gate.lastTransitionTime} title={gate.lastTransitionTime}>{formatRelativeAgeTime(gate.lastTransitionTime)}</time></p>}
+    {gate.message && <p className="max-w-3xl whitespace-pre-wrap break-words">{gate.message}</p>}
+    {retryMetadata.length > 0 && <p className="text-xs text-theme-text-secondary">{retryMetadata.join(' · ')}</p>}
+  </div>
 }
 
-function AdmissionObservation({ observation, link }: { observation: SchedulingObservation; link: (name: string, ref?: SchedulingRef) => React.ReactNode }) {
+function AdmissionObservation({ observation, identity, sourceLink, generation, deleting, presentation, link }: { observation: SchedulingObservation; identity: React.ReactNode; sourceLink?: React.ReactNode; generation: number; deleting: boolean; presentation: 'card' | 'drawer'; link: Link }) {
   const kueue = observation.kueue
   const condition = observation.primaryCondition
   const stale = isKueueConditionStale(condition, observation.subjectGeneration)
-  const conditions = [condition, ...(observation.disruptions ?? []), kueue?.podsReady, kueue?.waitingForReplacementPods]
+  const secondary = [...(observation.disruptions ?? []), kueue?.podsReady, kueue?.waitingForReplacementPods]
     .filter((entry) => entry != null)
+    .filter((entry) => entry.type !== condition?.type)
     .filter((entry, index, entries) => entries.findIndex((candidate) => candidate.type === entry.type) === index)
-  return <div className="space-y-2">
-    <div className="flex flex-wrap items-center gap-2">
-      <Badge severity={stale || observation.decision === 'unknown' ? 'neutral' : observation.decision === 'satisfied' ? 'success' : 'warning'}>{kueue ? phases[kueue.phase] : 'Admission'}</Badge>
-      <span className="text-theme-text-secondary">Decision: {observation.decision}</span>
-      {kueue?.outcome && <span>Outcome: {kueue.outcome}</span>}
-      {kueue?.active === false && <span>Workload inactive</span>}
+  const nominal = (entry: SchedulingCondition) => !isKueueConditionStale(entry, observation.subjectGeneration) && ((entry.type === 'PodsReady' && entry.status === 'True') || (entry.type === 'WaitingForReplacementPods' && entry.status === 'False'))
+  const supporting = secondary.filter(nominal)
+  const visible = secondary.filter((entry) => !nominal(entry))
+  const isDisruption = (entry: SchedulingCondition) => observation.disruptions?.some((item) => item.type === entry.type)
+  const disruptions = visible.filter(isDisruption)
+  const readiness = visible.filter((entry) => !isDisruption(entry))
+  const checks = (observation.gates ?? []).filter((gate) => gate.kind !== 'preemption_gate')
+  const pendingChecks = checks.filter((gate) => gate.nativeState !== 'Ready')
+  const readyChecks = checks.filter((gate) => gate.nativeState === 'Ready')
+  const preemption = (observation.gates ?? []).filter((gate) => gate.kind === 'preemption_gate')
+  const split = presentation === 'card' && (visible.length > 0 || preemption.length > 0)
+  const severity = stale || observation.decision === 'unknown' ? 'neutral'
+    : kueue?.phase === 'finished' ? kueue.outcome === 'failed' ? 'error' : kueue.outcome === 'succeeded' ? 'success' : 'neutral'
+      : observation.decision === 'satisfied' ? 'success' : 'warning'
+  const qualifier = observation.decision === 'held' && kueue?.active !== false ? 'Admission held' : observation.decision === 'unknown' ? 'Admission unknown' : null
+  return <div className="@container/admission space-y-4">
+    <div className={split ? 'grid min-w-0 items-start gap-4 @min-[1024px]/admission:grid-cols-[minmax(0,1.7fr)_minmax(320px,0.9fr)]' : 'space-y-4'}>
+    <div className="min-w-0 space-y-4">
+    <section aria-label="Admission" className={evidenceCard}>
+      <h4 className={`${groupHeading} ${cardHeader}`}>Admission</h4>
+      <div className="space-y-2 p-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="font-medium break-all">{identity}</span>
+        <Badge severity={severity}>{kueue ? phases[kueue.phase] : 'Admission'}</Badge>
+        {qualifier && <span className="text-xs text-theme-text-secondary">{qualifier}</span>}
+        {kueue?.active === false && <Badge severity="neutral">Workload inactive</Badge>}
+        {deleting && <Badge severity="alert">Deleting</Badge>}
+        {kueue?.outcome && <span>Outcome: {kueue.outcome}</span>}
+      </div>
+        {stale && <p className="text-xs text-warning-text">Stale evidence: condition generation {condition!.observedGeneration}; Workload generation {observation.subjectGeneration}.</p>}
+        {condition ? <p className="max-w-3xl whitespace-pre-wrap break-words">{condition.message || <><code>{condition.reason}</code>{condition.reason && ' · '}{condition.type}={condition.status}</>}</p> : <p className="text-theme-text-secondary">No primary admission condition reported.</p>}
+        {condition?.lastTransitionTime && <p className="text-xs text-theme-text-tertiary">{condition.type}={condition.status} since {formatRelativeAgeTime(condition.lastTransitionTime)}</p>}
+      <div className="empty:hidden flex flex-wrap gap-x-5 gap-y-2 border-t border-theme-border pt-2 text-xs text-theme-text-secondary">
+      {sourceLink && <span>{sourceLink}</span>}
+      {(!!observation.queues?.length || kueue?.concurrentAdmission) && <div className="flex flex-wrap gap-x-5 gap-y-1 text-xs text-theme-text-secondary">
+        {observation.queues?.map((queue, index) => <span key={index}>{queue.roles.join(' + ').replace(/^./, (letter) => letter.toUpperCase())} queue: {link(queue.name, queue.ref)}</span>)}
+        {kueue?.concurrentAdmission && <span>Parent Workload: {link(kueue.concurrentAdmission.parentName, kueue.concurrentAdmission.parentRef)}</span>}
+      </div>}
+      {kueue?.requeueState && ((kueue.requeueState.count ?? 0) > 0 || kueue.requeueState.requeueAt) && <p className="text-xs text-theme-text-secondary">{kueue.requeueState.count != null && `Requeues: ${kueue.requeueState.count}`}{kueue.requeueState.requeueAt && `${kueue.requeueState.count != null ? ' · ' : ''}Eligible again: ${kueue.requeueState.requeueAt}`}</p>}
+      {(kueue?.phase === 'admitted' || kueue?.phase === 'quota_reserved') && <p className="text-xs text-theme-text-tertiary">Admission status; execution is shown separately.</p>}
+      </div>
+      </div>
+      <div className="border-t border-theme-border p-3">
+    <Disclosure summary={<span>Technical details{supporting.length > 0 && ` · ${supporting.length} additional condition${supporting.length === 1 ? '' : 's'}`}{readyChecks.length > 0 && ` · ${readyChecks.length} ready check${readyChecks.length === 1 ? '' : 's'}`}</span>} summaryClassName="text-xs text-theme-text-secondary">
+      <div className="space-y-2 pt-2 text-xs text-theme-text-secondary">
+        <p>Decision: {observation.decision} · Generation {generation}</p>
+        {[condition, ...secondary].filter((entry) => entry != null).map((entry) => <div key={entry.type}>
+          <p>{entry.type}={entry.status}{entry.reason && ` · Reason: ${entry.reason}`}{entry.observedGeneration != null && ` · Observed generation ${entry.observedGeneration}`}{entry.lastTransitionTime && ` · Status since ${formatRelativeAgeTime(entry.lastTransitionTime)}`}</p>
+          {supporting.includes(entry) && entry.message && <p className="whitespace-pre-wrap break-words">{entry.message}</p>}
+        </div>)}
+        {(observation.gates ?? []).filter((gate) => gate.retryCount === 0 || gate.requeueAfterSeconds === 0).map((gate, index) => <p key={index}>{gate.kind === 'preemption_gate' ? 'Preemption gate' : 'Admission check'} {gate.name}{gate.retryCount === 0 && ' · Retries: 0'}{gate.requeueAfterSeconds === 0 && ' · Requeue delay: 0s'}</p>)}
+        {kueue?.requeueState?.count === 0 && !kueue.requeueState.requeueAt && <p>Requeues: 0</p>}
+        {readyChecks.map((gate, index) => <GateEvidence key={index} gate={gate} link={link} />)}
+      </div>
+    </Disclosure>
+      </div>
+    </section>
+    {pendingChecks.length > 0 && <section aria-label="Admission checks" className={evidenceCard}>
+      <h4 className={`${groupHeading} ${cardHeader}`}>Admission checks · {pendingChecks.length} not ready</h4>
+      <div className="divide-y divide-theme-border [&>div]:p-3">{pendingChecks.map((gate, index) => <GateEvidence key={index} gate={gate} link={link} />)}</div>
+    </section>}
     </div>
-    {stale && <p className="text-sm text-theme-text-secondary">The primary condition describes generation {condition!.observedGeneration}; this Workload is now generation {observation.subjectGeneration}. Treat that condition as stale evidence.</p>}
-    {condition && <p className="text-xs text-theme-text-secondary">Selected admission evidence · Primary condition: {condition.type}</p>}
-    {!condition && <p className="text-theme-text-secondary">No primary admission condition reported.</p>}
-    <ConditionsSection
-      conditions={conditions}
-      defaultExpanded={true}
-      getConditionTone={(entry) => {
-        if (entry.status !== 'True' && entry.status !== 'False') return 'unknown'
-        if (isKueueConditionStale(entry, observation.subjectGeneration)) return 'unknown'
-        if (entry.type === 'Finished') return entry.status === 'False' ? 'unknown' : kueue?.outcome === 'failed' ? 'fail' : kueue?.outcome === 'succeeded' ? 'ok' : 'unknown'
-        if (entry.type === condition?.type) return observation.decision === 'satisfied' ? 'ok' : observation.decision === 'unknown' ? 'unknown' : 'warning'
-        if (entry.type === 'WaitingForReplacementPods' || observation.disruptions?.some((item) => item.type === entry.type)) return entry.status === 'True' ? 'warning' : 'ok'
-        return entry.status === 'True' ? 'ok' : 'warning'
-      }}
-    />
-    {!!observation.queues?.length && <div className="flex flex-wrap gap-x-5 gap-y-1 text-xs">{observation.queues.map((queue, index) => <span key={index}>{queue.roles.join(' + ')} queue: {link(queue.name, queue.ref)}</span>)}</div>}
-    {observation.gates?.map((gate, index) => <div key={index} className="border-l-2 border-theme-border pl-3 text-xs text-theme-text-secondary">
-      <p>{gate.kind === 'preemption_gate' ? 'Preemption gate' : 'Admission check'}: {link(gate.name, gate.ref)} · {gate.nativeState || gate.decision}</p>
-      {gate.message && <p className="whitespace-pre-wrap break-words">{gate.message}</p>}
-      {gate.kind === 'preemption_gate' && <p>This gate governs preemption; it alone does not establish an admission blocker.</p>}
-      {gate.retryCount != null && <p>Retries: {gate.retryCount}</p>}
-      {gate.requeueAfterSeconds != null && <p>Requeue delay: {gate.requeueAfterSeconds}s</p>}
-    </div>)}
-    {kueue?.requeueState && <p className="text-xs text-theme-text-secondary">Requeues: {kueue.requeueState.count ?? 'Not reported'}{kueue.requeueState.requeueAt && ` · Eligible again: ${kueue.requeueState.requeueAt}`}</p>}
-    {kueue?.concurrentAdmission && <p className="text-xs">Parent Workload: {link(kueue.concurrentAdmission.parentName, kueue.concurrentAdmission.parentRef)}</p>}
+    {(visible.length > 0 || preemption.length > 0) && <section aria-label="Supporting evidence" className={`${evidenceCard} self-start`}>
+      <h4 className={`${groupHeading} ${cardHeader}`}>Supporting evidence</h4>
+      <div className="divide-y divide-theme-border px-3">
+        {disruptions.length > 0 && <div className="space-y-3 py-3"><h5 className={groupHeading}>Reported disruptions · {disruptions.length}</h5><div className="divide-y divide-theme-border">{disruptions.map((entry) => <ConditionEvidence key={entry.type} condition={entry} generation={observation.subjectGeneration} showAge />)}</div></div>}
+        {readiness.length > 0 && <div className="space-y-3 py-3"><h5 className={groupHeading}>Pod readiness · {readiness.length}</h5><div className="divide-y divide-theme-border">{readiness.map((entry) => <ConditionEvidence key={entry.type} condition={entry} generation={observation.subjectGeneration} />)}</div></div>}
+        {preemption.length > 0 && <div className="space-y-2 py-3"><h5 className={groupHeading}>Preemption gates · {preemption.length}</h5><p className="text-xs text-theme-text-tertiary">Governs preemption; it alone does not establish an admission blocker.</p><div className="divide-y divide-theme-border">{preemption.map((gate, index) => <GateEvidence key={index} gate={gate} link={link} />)}</div></div>}
+      </div>
+    </section>}
+    </div>
+
   </div>
 }