@skyhook-io/k8s-ui 1.14.12 → 1.16.0

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>
 }

package/src/components/resources/ResourcesView.tsx

@@ -6243,6 +6243,7 @@ export function ResourcesView({
           {onCreateResource && (
             <Tooltip content={`Create ${selectedKind.kind || 'resource'}`}>
               <button
+                aria-label={`Create ${selectedKind.kind || 'resource'}`}
                 onClick={() => onCreateResource(selectedKind)}
                 className="p-2 hover:bg-theme-elevated rounded-lg text-theme-text-secondary hover:text-theme-text-primary transition-colors"
               >
@@ -6846,6 +6847,7 @@ export function ResourcesView({
         <div className="flex items-center justify-center gap-3">
           <button
             type="button"
+            aria-label="Decrease replicas"
             onClick={() => setBulkScaleReplicas(Math.max(0, bulkScaleReplicas - 1))}
             disabled={bulkScaleReplicas <= 0}
             className="p-2 rounded-lg bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
@@ -6857,12 +6859,14 @@ export function ResourcesView({
             min="0"
             max="10000"
             value={bulkScaleReplicas}
+            aria-label="Replicas"
             onChange={(e) => setBulkScaleReplicas(Math.min(10000, Math.max(0, Number.parseInt(e.target.value, 10) || 0)))}
             className="w-24 text-center text-2xl font-semibold bg-theme-elevated border border-theme-border rounded-lg py-2 text-theme-text-primary focus:outline-none focus:border-skyhook-500"
             autoFocus
           />
           <button
             type="button"
+            aria-label="Increase replicas"
             onClick={() => setBulkScaleReplicas(Math.min(10000, bulkScaleReplicas + 1))}
             disabled={bulkScaleReplicas >= 10000}
             className="p-2 rounded-lg bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"

package/src/components/resources/printer-columns.test.ts

@@ -113,7 +113,7 @@ describe('formatPrinterCell', () => {
 describe('printerCellSortValue', () => {
   // Sorting must use the value, not its rendered text, or 10 sorts before 9.
   it('sorts numbers numerically', () => {
-    expect([10, 9, 100].map(printerCellSortValue).sort((a, b) => (a as number) - (b as number)))
+    expect([10, 9, 100].map(v => printerCellSortValue(v)).sort((a, b) => (a as number) - (b as number)))
       .toEqual([9, 10, 100])
   })
   it('sorts booleans by truth and falls back to empty for anything else', () => {

package/src/components/resources/renderers/JobRenderer.tsx

@@ -1,9 +1,11 @@
+import type { ReactNode } from 'react'
 import { Clock } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
 import { formatDuration } from '../resource-utils'
 
 interface JobRendererProps {
   data: any
+  admissionContent?: ReactNode
 }
 
 // Extract problems from Job status and conditions
@@ -42,7 +44,7 @@ function getJobProblems(data: any): string[] {
   return problems
 }
 
-export function JobRenderer({ data }: JobRendererProps) {
+export function JobRenderer({ data, admissionContent }: JobRendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
   const conditions = status.conditions || []
@@ -82,6 +84,8 @@ export function JobRenderer({ data }: JobRendererProps) {
         <AlertBanner variant="success" title="Job Completed Successfully" />
       )}
 
+      {admissionContent}
+
       <Section title="Status" icon={Clock}>
         <PropertyList>
           <Property label="Succeeded" value={status.succeeded || 0} />

package/src/components/resources/renderers/JobSetRenderer.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 import { Activity, Boxes, Network as NetworkIcon, ShieldCheck } from 'lucide-react'
 import {
   ConditionsSection,
@@ -13,6 +14,7 @@ import { getJobSetStatus } from '../resource-utils-jobset-lws'
 
 interface JobSetRendererProps {
   data: any
+  admissionContent?: ReactNode
   mode?: 'detail' | 'overview' | 'configuration'
   shownMemberCounts?: ReadonlyMap<string, number>
   onSelectRole?: (role: string) => void
@@ -50,7 +52,7 @@ function sumCountArray(value: unknown): number | undefined {
   return value.reduce((total: number, count: unknown) => total + (typeof count === 'number' ? count : 0), 0)
 }
 
-export function JobSetRenderer({ data, mode = 'detail', shownMemberCounts, onSelectRole }: JobSetRendererProps) {
+export function JobSetRenderer({ data, admissionContent, mode = 'detail', shownMemberCounts, onSelectRole }: JobSetRendererProps) {
   const spec = data?.spec || {}
   const status = data?.status || {}
   const conditions: any[] = Array.isArray(status.conditions) ? status.conditions : []
@@ -85,6 +87,7 @@ export function JobSetRenderer({ data, mode = 'detail', shownMemberCounts, onSel
   return (
     <>
       {showSummary && <ProblemAlerts problems={problems} />}
+      {showSummary && admissionContent}
 
       {showSummary && externalController && (
         <div className="mb-3 rounded border border-theme-border bg-theme-elevated p-3 text-sm text-theme-text-secondary">

package/src/components/resources/renderers/KueueQueueNavigation.test.tsx

@@ -5,7 +5,7 @@ import { expect, it, vi } from 'vitest'
 import { ClusterQueueRenderer, LocalQueueRenderer } from './KueueQueueRenderers'
 
 it('navigates from a namespaced LocalQueue to exact cluster-scoped Kueue dependencies', async () => {
-  globalThis.IS_REACT_ACT_ENVIRONMENT = true
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
   const container = document.createElement('div')
   const root = createRoot(container)
   const onNavigate = vi.fn()
@@ -64,6 +64,6 @@ it('navigates from a namespaced LocalQueue to exact cluster-scoped Kueue depende
     })
   } finally {
     await act(async () => root.unmount())
-    globalThis.IS_REACT_ACT_ENVIRONMENT = false
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: false })
   }
 })

package/src/components/resources/renderers/KueueWorkloadRenderer.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 import { Cpu, Gauge, ListChecks } from 'lucide-react'
 import { formatRelativeAgeTime } from '../../../utils/format'
-import { Badge, type BadgeSeverity } from '../../ui/Badge'
+import { Badge } from '../../ui/Badge'
 import {
   AlertBanner,
   ConditionsSection,
@@ -12,7 +12,7 @@ import {
   type ConditionTone,
 } from '../../ui/drawer-components'
 import { formatResources } from '../resource-utils'
-import { getKueueWorkloadStatus, getKueueWorkloadPriority, getKueueWorkloadStatusCondition, isKueueWorkloadFailureReason, isKueueConditionStale } from '../resource-utils-kueue'
+import { admissionCheckSeverity, getKueueWorkloadStatus, getKueueWorkloadPriority, getKueueWorkloadStatusCondition, isKueueWorkloadFailureReason, isKueueConditionStale } from '../resource-utils-kueue'
 
 const KUEUE_GROUP = 'kueue.x-k8s.io'
 
@@ -22,19 +22,6 @@ interface KueueWorkloadRendererProps {
   onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
 }
 
-function admissionCheckSeverity(state: string): BadgeSeverity {
-  switch (state) {
-    case 'Ready':
-      return 'success'
-    case 'Rejected':
-      return 'error'
-    case 'Retry':
-      return 'warning'
-    default:
-      return 'neutral'
-  }
-}
-
 function resourceList(resources: any): string | null {
   if (!resources || typeof resources !== 'object' || Object.keys(resources).length === 0) return null
   return formatResources(Object.fromEntries(Object.entries(resources).map(([name, quantity]) => [name, String(quantity)])))

package/src/components/resources/renderers/PodRenderer.test.tsx

@@ -435,3 +435,18 @@ describe('PodRenderer metrics', () => {
     expect(html).toContain('CPU')
   })
 })
+
+describe('PodRenderer on a Radar without variable sources', () => {
+  it('falls back to the spec view with an upgrade note, not an error', () => {
+    const unsupported = Object.assign(new Error('unsupported'), {
+      radarUpgrade: { feature: 'Values from ConfigMaps and Secrets', minimumVersion: 'v1.9.0', currentVersion: 'v1.7.2' },
+    })
+    const html = renderToString(
+      <PodRenderer data={pod} onCopy={() => undefined} copied={null} environmentError={unsupported} />,
+    )
+    expect(html).toContain('Values from ConfigMaps and Secrets')
+    expect(html).toContain('need Radar v1.9 or newer on this cluster. It runs v1.7.2.')
+    expect(html).toContain('ConfigMap')
+    expect(html).not.toContain('could not be loaded')
+  })
+})

package/src/components/resources/renderers/PodRenderer.tsx

@@ -23,6 +23,8 @@ import type {
   RBACPolicyRule,
 } from '../../../types'
 import { Tooltip } from '../../ui/Tooltip'
+import { RadarUpgradeNote } from '../../ui/RadarUpgradeNote'
+import { getRadarUpgradeRequirement, type RadarUpgradeRequirement } from '../../../types/fetch-error'
 import { MetricsChart } from '../../ui/MetricsChart'
 import { MetricsUnavailableNotice } from './MetricsUnavailableNotice'
 import { ContainerEnvironmentSection } from './ContainerEnvironmentSection'
@@ -191,10 +193,12 @@ function EnvVarsSection({
   initContainers,
   containers,
   resolvedEnvFrom,
+  upgrade,
 }: {
   initContainers: any[]
   containers: any[]
   resolvedEnvFrom?: ResolvedEnvFrom
+  upgrade?: RadarUpgradeRequirement | null
 }) {
   const allContainers = [...initContainers, ...containers]
   const containersWithEnv = allContainers.filter((c: any) => c.env?.length > 0 || c.envFrom?.length > 0)
@@ -205,6 +209,7 @@ function EnvVarsSection({
   return (
     <Section title={`Environment Variables  ·  ${subtitle}`} icon={List} defaultExpanded={false}>
       <div className="space-y-4">
+        {upgrade && <RadarUpgradeNote requirement={upgrade} />}
         {allContainers.map((container: any) => {
           const envVars: any[] = container.env || []
           const envFrom: any[] = container.envFrom || []
@@ -312,6 +317,8 @@ export function PodRenderer({
   const hasResolvedEnvironmentRows = environment?.containers.some(
     container => container.rows.length > 0 || container.truncated,
   ) ?? false
+  // An older Radar can't resolve variable sources; fall back to the spec view.
+  const environmentUpgrade = getRadarUpgradeRequirement(environmentError)
 
   const namespace = data.metadata?.namespace
   const podName = data.metadata?.name
@@ -792,7 +799,7 @@ export function PodRenderer({
           <div className="text-xs text-theme-text-tertiary">Loading variable sources…</div>
         </Section>
       )}
-      {hasEnvironmentDeclarations && environmentError && !environment && (
+      {hasEnvironmentDeclarations && environmentError && !environment && !environmentUpgrade && (
         <Section title="Environment Variables" icon={List} defaultExpanded={false}>
           <div className="space-y-2 text-xs">
             <p className="text-theme-text-secondary">Variable sources could not be loaded.</p>
@@ -800,11 +807,12 @@ export function PodRenderer({
           </div>
         </Section>
       )}
-      {(!environment || !hasResolvedEnvironmentRows) && !environmentLoading && !environmentError && hasEnvironmentDeclarations && (
+      {(!environment || !hasResolvedEnvironmentRows) && !environmentLoading && (!environmentError || environmentUpgrade) && hasEnvironmentDeclarations && (
         <EnvVarsSection
           initContainers={initContainers}
           containers={containers}
           resolvedEnvFrom={resolvedEnvFrom}
+          upgrade={environmentUpgrade}
         />
       )}
 

package/src/components/resources/renderers/PolicySection.test.tsx

@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { renderToString } from 'react-dom/server'
 import { PolicySection } from './PolicySection'
+import { RadarUpgradeContext } from '../../ui/RadarUpgradeNote'
 import type { PolicyResourceResponse } from '../../../types/policy'
 
 const base: PolicyResourceResponse = {
@@ -157,3 +158,44 @@ describe('when results were withheld from this caller', () => {
     expect(html).not.toContain('not shown here')
   })
 })
+
+// An older in-cluster Radar behind a newer frontend (Radar Hub) has no policy
+// endpoint. That is an expected state, so it gets an upgrade prompt, not red.
+describe('PolicySection — connected Radar predates policy results', () => {
+  const unsupported = Object.assign(new Error('Policy results need Radar v1.10.0 or newer'), {
+    radarUpgrade: { feature: 'Policy results', minimumVersion: 'v1.10.0', currentVersion: 'v1.7.2' },
+  })
+
+  it('prompts an upgrade instead of reporting a failure', () => {
+    const html = renderToString(<PolicySection data={null} error={unsupported} />)
+    expect(html).toContain('Policy results')
+    expect(html).toContain('need Radar v1.10 or newer on this cluster. It runs v1.7.2.')
+    expect(html).not.toContain('Could not load policy results')
+    expect(html).not.toContain('text-red-400')
+  })
+
+  it('hands the upgrade to the host when it offers a flow', () => {
+    const html = renderToString(
+      <RadarUpgradeContext.Provider value={{ onRequestUpgrade: () => undefined }}>
+        <PolicySection data={null} error={unsupported} />
+      </RadarUpgradeContext.Provider>,
+    )
+    expect(html).toContain('<button')
+    expect(html).toContain('Upgrade Radar')
+  })
+
+  it('links to instructions when the host has no flow', () => {
+    const html = renderToString(
+      <RadarUpgradeContext.Provider value={{ upgradeHref: 'https://radarhq.io/docs/configuration/in-cluster' }}>
+        <PolicySection data={null} error={unsupported} />
+      </RadarUpgradeContext.Provider>,
+    )
+    expect(html).toContain('href="https://radarhq.io/docs/configuration/in-cluster"')
+    expect(html).toContain('How to upgrade')
+  })
+
+  it('keeps a genuine failure red', () => {
+    const html = renderToString(<PolicySection data={null} error={new Error('HTTP 502 (Bad Gateway)')} />)
+    expect(html).toContain('Could not load policy results: HTTP 502 (Bad Gateway)')
+  })
+})

package/src/components/resources/renderers/PolicySection.tsx

@@ -2,7 +2,8 @@ import { ShieldCheck, ShieldAlert, ShieldQuestion } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section } from '../../ui/drawer-components'
 import { SEVERITY_BADGE } from '../../../utils/badge-colors'
-import { isForbiddenError } from '../../../types/fetch-error'
+import { RadarUpgradeNote } from '../../ui/RadarUpgradeNote'
+import { getRadarUpgradeRequirement, isForbiddenError } from '../../../types/fetch-error'
 import type { PolicyResourceResponse, PolicyResourceFinding } from '../../../types/policy'
 
 interface PolicySectionProps {
@@ -61,6 +62,14 @@ export function PolicySection({ data, loading, error }: PolicySectionProps) {
         </Section>
       )
     }
+    const upgrade = getRadarUpgradeRequirement(error)
+    if (upgrade) {
+      return (
+        <Section title={TITLE} icon={ShieldQuestion}>
+          <RadarUpgradeNote requirement={upgrade} />
+        </Section>
+      )
+    }
     return (
       <Section title={TITLE} icon={ShieldAlert}>
         <div className="text-sm text-red-400">{`Could not load policy results: ${error.message}`}</div>

package/src/components/resources/renderers/RayClusterRenderer.tsx

@@ -41,9 +41,9 @@ export function RayClusterRenderer({ data, onNavigate, podEvidence, podsLoading,
   const scope = selection.workerGroup != null ? `Worker group: ${selection.workerGroup}` : selection.nodeType === 'head' ? 'Head' : 'All runtime Pods'
   const select = (value: RayClusterPodSelection) => { setExpanded(false); onSelectPods?.(value) }
   const row = (pod: WorkloadPodInfo) => <PodRow key={pod.name} name={pod.name} namespace={data.metadata.namespace} ready={pod.ready} healthLevel={pod.healthLevel} detail={workloadPodDetail(pod)} onNavigate={onNavigate} />
-  return <>
+  return <div className="space-y-4">
     {stale && <AlertBanner variant="info" title="Status describes an earlier generation" message={`Specification generation ${data.metadata.generation}; controller observed ${status.observedGeneration}. Counts and conditions below retain that observation.`} />}
-    <Section title="Runtime Health" icon={Activity} defaultExpanded>
+    <Section variant="card" title="Runtime Health" icon={Activity} defaultExpanded>
       <PropertyList>
         <Property label="Ray Version" value={spec.rayVersion || 'Not specified'} />
         <Property label="Head" value={<Badge severity={stale ? 'neutral' : head?.status === 'True' ? 'success' : head?.status === 'False' ? 'warning' : 'neutral'}>{head?.status === 'True' ? 'Ready' : head?.status === 'False' ? 'Not ready' : 'Not reported'}{stale ? ' (stale)' : ''}</Badge>} />
@@ -58,7 +58,7 @@ export function RayClusterRenderer({ data, onNavigate, podEvidence, podsLoading,
       {status.observedGeneration == null && <p className="mt-2 text-xs text-theme-text-tertiary">Observed generation is not reported.</p>}
       {conditions.some((c: any) => c.type === 'RayClusterProvisioned' && c.status === 'True') && <p className="mt-2 text-xs text-theme-text-tertiary">Provisioned records initial provisioning, not continuing runtime health.</p>}
     </Section>
-    {onSelectPods && <div ref={podsRef}><Section title="Runtime Pods" icon={Server} defaultExpanded>
+    {onSelectPods && <div ref={podsRef}><Section variant="card" title="Runtime Pods" icon={Server} defaultExpanded>
       <SelectMenu ariaLabel="Pod scope" className="mb-3" searchPlaceholder="Find a worker group…"
         value={selection.workerGroup != null ? `group:${selection.workerGroup}` : selection.nodeType === 'head' ? 'head' : 'all'}
         options={[{ value: 'all', label: 'All runtime Pods' }, { value: 'head', label: 'Head' }, ...groups.map((g: any) => ({ value: `group:${g.groupName}`, label: `Worker group: ${g.groupName}` }))]}
@@ -70,7 +70,7 @@ export function RayClusterRenderer({ data, onNavigate, podEvidence, podsLoading,
         <PodListFrame expanded={expanded} hasOverflow={podEvidence.pods.length > 20} overflow={podEvidence.pods.slice(20).map(row)} toggle={<PodListToggle expanded={expanded} hiddenCount={podEvidence.pods.length - 20} label="Pods" onToggle={() => setExpanded(!expanded)} />}>{podEvidence.pods.slice(0,20).map(row)}</PodListFrame>
       </> : <p className="text-sm text-theme-text-secondary">Pod evidence is not available.</p>}
     </Section></div>}
-    <Section title={`Worker Groups (${groups.length})`} icon={Boxes} defaultExpanded>
+    <Section variant="card" title={`Worker Groups (${groups.length})`} icon={Boxes} defaultExpanded>
       <p className="mb-3 text-xs text-theme-text-tertiary">Declared sizing, not observed group health. Replicas can span multiple hosts; controller-reported worker counts above are Pods. In-tree autoscaling: {spec.enableInTreeAutoscaling === true ? 'enabled' : 'disabled'}.</p>
       <div className="space-y-3">{groups.map((group: any) => <div className="card-inner min-w-0" key={group.groupName}>
         <div className="mb-2 flex items-start justify-between gap-3"><span className="break-all text-sm font-medium text-theme-text-primary">{group.groupName}</span>{onSelectPods && <button className="shrink-0 text-xs text-accent-text hover:underline" onClick={() => { select({ nodeType: 'worker', workerGroup: group.groupName }); podsRef.current?.scrollIntoView({ block: 'start' }) }}>View Pods</button>}</div>
@@ -83,11 +83,11 @@ export function RayClusterRenderer({ data, onNavigate, podEvidence, podsLoading,
       </div>)}</div>
       {groups.length === 0 && <p className="text-sm text-theme-text-secondary">No worker groups declared.</p>}
     </Section>
-    {(owners.length > 0 || status.head?.podName || status.head?.serviceName) && <Section title="References" defaultExpanded><PropertyList>
+    {(owners.length > 0 || status.head?.podName || status.head?.serviceName) && <Section variant="card" title="References" defaultExpanded><PropertyList>
       {owners.map((owner: any) => <Property key={owner.uid} label="Controller" value={<ResourceLink kind={owner.kind === 'RayService' ? 'rayservices' : 'rayjobs'} group="ray.io" namespace={data.metadata.namespace} name={owner.name} onNavigate={onNavigate} />} />)}
       {status.head?.podName && <Property label="Reported Head Pod" value={<ResourceLink kind="pods" namespace={data.metadata.namespace} name={status.head.podName} onNavigate={onNavigate} />} />}
       {status.head?.serviceName && <Property label="Reported Head Service" value={<ResourceLink kind="services" namespace={data.metadata.namespace} name={status.head.serviceName} onNavigate={onNavigate} />} />}
     </PropertyList></Section>}
-    <ConditionsSection conditions={conditions} getConditionTone={c => stale ? 'unknown' : rayClusterConditionTone(c)} defaultExpanded />
-  </>
+    <ConditionsSection variant="card" conditions={conditions} getConditionTone={c => stale ? 'unknown' : rayClusterConditionTone(c)} defaultExpanded />
+  </div>
 }