@skyhook-io/k8s-ui 1.14.9 → 1.14.11

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

@@ -0,0 +1,121 @@
+import { renderToString } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { KueueWorkloadRenderer, getKueueWorkloadConditionTone } from './KueueWorkloadRenderer'
+
+const base = {
+  apiVersion: 'kueue.x-k8s.io/v1beta2', kind: 'Workload',
+  metadata: { name: 'training', namespace: 'ml' },
+  spec: { queueName: 'gpu', podSets: [{ name: 'workers', count: 4, minCount: 2 }] },
+}
+const render = (status: any = {}, data: any = base) => renderToString(<KueueWorkloadRenderer data={{ ...data, status }} />).replace(/<!-- -->/g, '')
+
+describe('Kueue Workload detail', () => {
+  it('shows evaluated totals and exact quota blocker without inventing a failure', () => {
+    const html = render({
+      resourceRequests: [{ name: 'workers', resources: { cpu: '8', memory: '32Gi', 'nvidia.com/gpu': '4' } }],
+      conditions: [{ type: 'QuotaReserved', status: 'False', reason: 'Pending', message: 'insufficient quota for nvidia.com/gpu' }],
+    })
+    for (const text of ['Evaluated Requests', 'CPU: 8', 'nvidia.com/gpu: 4', 'insufficient quota', 'No reservation reported']) expect(html).toContain(text)
+    expect(html).not.toContain('failing')
+    expect(html).not.toContain('Workload finished unsuccessfully')
+  })
+
+  it.each(['v1beta1', 'v1beta2'])('separates reservation from admission for %s', (version) => {
+    const html = render({
+      admission: { clusterQueue: 'team-quota', podSetAssignments: [{ name: 'workers', count: 2, resourceUsage: { cpu: '4', 'nvidia.com/gpu': '2' }, flavors: { 'nvidia.com/gpu': 'a100' } }] },
+      admissionChecks: [{ name: 'capacity', state: 'Pending', message: 'Waiting for provisioned nodes' }],
+      conditions: [{ type: 'QuotaReserved', status: 'True' }, { type: 'Admitted', status: 'False', reason: 'AdmissionCheck' }],
+    }, { ...base, apiVersion: `kueue.x-k8s.io/${version}` })
+    for (const text of ['QuotaReserved', 'Pods at Reservation', 'Resources at Reservation', 'CPU: 4', 'nvidia.com/gpu: a100', 'team-quota', 'Waiting for provisioned nodes']) expect(html).toContain(text)
+    expect(html).not.toContain('Admitted Pods')
+    expect(html).not.toContain('Admitted Demand')
+  })
+
+  it('joins PodSet assignments by name rather than array position', () => {
+    const html = render({ admission: { podSetAssignments: [{ name: 'other', resourceUsage: { cpu: '99' } }, { name: 'workers', count: 0, resourceUsage: { cpu: 0, 'example.com/gpu': '0' } }] }, reclaimablePods: [{ name: 'workers', count: 0 }] })
+    expect(html).toContain('example.com/gpu: 0')
+    expect(html).toContain('CPU: 0')
+    expect(html).toContain('Reclaimable Pods')
+    expect(html).not.toContain('CPU: 99')
+  })
+
+  it('does not reconstruct controller totals or turn missing status into zero', () => {
+    const html = render({}, { ...base, spec: { podSets: [{ name: 'workers', count: 4, template: { spec: { containers: [{ resources: { requests: { cpu: '12' } } }] } } }] } })
+    expect(html).toContain('Not reported')
+    expect(html).not.toContain('CPU: 12')
+    expect(html).not.toContain('Pods at Reservation')
+  })
+
+  it.each(['Failed', 'FailedToStart', 'OutOfSync', 'OwnerNotFound'])('highlights terminal %s with its exact reason', (reason) => {
+    const html = render({ conditions: [{ type: 'Finished', status: 'True', reason, message: 'controller explanation' }] })
+    expect(html).toContain('Workload finished unsuccessfully')
+    expect(html).toContain('controller explanation')
+    expect(getKueueWorkloadConditionTone({ type: 'Finished', status: 'True', reason })).toBe('fail')
+  })
+
+  it('keeps unknown completion and condition semantics neutral', () => {
+    expect(getKueueWorkloadConditionTone({ type: 'Finished', status: 'True', reason: 'FutureReason' })).toBe('unknown')
+    expect(getKueueWorkloadConditionTone({ type: 'FutureCondition', status: 'True' })).toBe('unknown')
+    expect(getKueueWorkloadConditionTone({ type: 'Admitted', status: 'Unknown' })).toBe('unknown')
+  })
+
+  it.each(['Ready', 'Pending', 'Retry', 'Rejected', 'FutureState'])('preserves admission check %s and its message', (state) => {
+    const html = render({ admissionChecks: [{ name: 'capacity', state, message: 'Exact controller message' }] })
+    expect(html).toContain(state)
+    expect(html).toContain('Exact controller message')
+  })
+})
+
+it('labels stale failure evidence without displaying it as a current failure', () => {
+  const html = render({ conditions: [{ type: 'Finished', status: 'True', reason: 'FailedToStart', observedGeneration: 2 }] }, { ...base, metadata: { ...base.metadata, generation: 3 } })
+  expect(html).toContain('earlier generation')
+  expect(html).toContain('Finished (generation 2)')
+  expect(html).not.toContain('Workload finished unsuccessfully')
+  expect(html).not.toContain('failing')
+})
+
+
+it('does not neutralize current admission because a historical condition is stale', () => {
+  const html = render({ conditions: [{ type: 'Admitted', status: 'True', observedGeneration: 3 }, { type: 'Requeued', status: 'False', observedGeneration: 2 }] }, { ...base, metadata: { ...base.metadata, generation: 3 } })
+  expect(html).toContain('Admitted')
+  expect(html).not.toContain('earlier generation')
+})
+
+
+it.each([
+  [{ priority: 0 }, '0'],
+  [{ priorityClassName: 'batch-priority' }, 'batch-priority'],
+  [{ priorityClassRef: { name: 'training-priority' } }, 'training-priority'],
+])('shows priority from native fields %j', (fields, value) => {
+  const html = render({}, { ...base, spec: { ...base.spec, ...fields } })
+  expect(html).toContain('Priority')
+  expect(html).toContain(value)
+})
+
+it('labels a stale terminal report even when an admission condition has a newer generation', () => {
+  const html = render({ conditions: [
+    { type: 'Finished', status: 'True', reason: 'FailedToStart', observedGeneration: 2 },
+    { type: 'Admitted', status: 'True', observedGeneration: 3 },
+  ] }, { ...base, metadata: { ...base.metadata, generation: 3 } })
+  expect(html).toContain('Reported state describes an earlier generation')
+  expect(html).toContain('Reported state may not reflect the current specification')
+  expect(html).not.toContain('Workload finished unsuccessfully')
+})
+
+
+it('summarizes reported checks without inferring an admission decision', () => {
+  const html = render({
+    admissionChecks: ['Pending', 'Rejected', 'Pending', 'Ready', 'Retry', 'FutureState'].map((state, index) => ({ name: `check-${index}`, state })),
+    conditions: [{ type: 'Finished', status: 'True', reason: 'Succeeded' }],
+  })
+  expect(html).toContain('Reported Checks')
+  expect(html).toContain('1 Rejected · 1 Retry · 2 Pending · 1 Ready · 1 FutureState')
+  expect(html).toContain('Finished')
+  expect(html).not.toContain('blocked by')
+})
+
+it('does not interpret absent checks as readiness', () => {
+  const html = render()
+  expect(html).not.toContain('Reported Checks')
+  expect(html).not.toContain('Admission Checks (')
+})

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

@@ -0,0 +1,230 @@
+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 {
+  AlertBanner,
+  ConditionsSection,
+  Property,
+  PropertyList,
+  ResourceLink,
+  Section,
+  type ConditionTone,
+} from '../../ui/drawer-components'
+import { formatResources } from '../resource-utils'
+import { getKueueWorkloadStatus, getKueueWorkloadPriority, getKueueWorkloadStatusCondition, isKueueWorkloadFailureReason, isKueueConditionStale } from '../resource-utils-kueue'
+
+const KUEUE_GROUP = 'kueue.x-k8s.io'
+
+interface KueueWorkloadRendererProps {
+  data: any
+  provisioning?: ReactNode
+  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)])))
+}
+
+export function getKueueWorkloadConditionTone(condition: any): ConditionTone {
+  if (condition?.status !== 'True' && condition?.status !== 'False') return 'unknown'
+
+  if (condition.type === 'Finished') {
+    if (condition.status !== 'True') return 'unknown'
+    return isKueueWorkloadFailureReason(condition.reason) ? 'fail' : condition.reason === 'Succeeded' ? 'ok' : 'unknown'
+  }
+
+  if (['Evicted', 'Preempted', 'DeactivationTarget', 'BlockedOnPreemptionGates', 'WaitingForReplacementPods'].includes(condition.type)) {
+    return condition.status === 'True' ? 'warning' : 'ok'
+  }
+
+  if (['Admitted', 'QuotaReserved', 'PodsReady'].includes(condition.type)) {
+    return condition.status === 'True' ? 'ok' : 'unknown'
+  }
+
+  return 'unknown'
+}
+
+function FlavorAssignments({ flavors, onNavigate }: { flavors: any; onNavigate?: KueueWorkloadRendererProps['onNavigate'] }) {
+  if (!flavors || typeof flavors !== 'object' || Object.keys(flavors).length === 0) return null
+  return (
+    <div className="space-y-1 break-all [&_button]:text-left">
+      {Object.entries(flavors).map(([resource, flavor]) => (
+        <div key={resource} className="text-xs">
+          {resource}:{' '}
+          <ResourceLink name={String(flavor)} kind="resourceflavors" group={KUEUE_GROUP} onNavigate={onNavigate} />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function KueueWorkloadRenderer({ data, onNavigate, provisioning }: KueueWorkloadRendererProps) {
+  const spec = data.spec || {}
+  const status = data.status || {}
+  const namespace = data.metadata?.namespace || ''
+  const workloadStatus = getKueueWorkloadStatus(data)
+  const priority = getKueueWorkloadPriority(data)
+  const statusCondition = getKueueWorkloadStatusCondition(data)
+  const stale = isKueueConditionStale(statusCondition, data.metadata?.generation)
+  const failure = workloadStatus.level === 'unhealthy' && !stale ? statusCondition : undefined
+  const podSets = Array.isArray(spec.podSets) ? spec.podSets : []
+  const assignments = new Map(
+    (Array.isArray(status.admission?.podSetAssignments) ? status.admission.podSetAssignments : []).map((assignment: any) => [
+      assignment.name,
+      assignment,
+    ]),
+  )
+  const requests = new Map(
+    (Array.isArray(status.resourceRequests) ? status.resourceRequests : []).map((request: any) => [request.name, request]),
+  )
+  const reclaimable = new Map(
+    (Array.isArray(status.reclaimablePods) ? status.reclaimablePods : []).map((entry: any) => [entry.name, entry.count]),
+  )
+  const checks = Array.isArray(status.admissionChecks) ? status.admissionChecks : []
+  const checkCounts = new Map<string, number>(['Rejected', 'Retry', 'Pending', 'Ready'].map(state => [state, 0]))
+  for (const check of checks) {
+    const state = check?.state || 'Unknown'
+    checkCounts.set(state, (checkCounts.get(state) || 0) + 1)
+  }
+
+  return (
+    <>
+      {failure && <AlertBanner variant="error" title="Workload finished unsuccessfully" message={failure.message || failure.reason} />}
+
+      {stale && <AlertBanner variant="info" title="Reported state describes an earlier generation" message={`Workload generation ${data.metadata.generation}. Stale condition: ${statusCondition?.type} (generation ${statusCondition?.observedGeneration}). Reported state may not reflect the current specification.`} />}
+
+      <Section title="Admission" icon={Gauge} defaultExpanded>
+        <PropertyList>
+          <Property label="Reported State" value={<Badge colorClass={stale ? undefined : workloadStatus.color} severity={stale ? 'neutral' : undefined}>{workloadStatus.text}</Badge>} />
+          <Property
+            label="Local Queue"
+            value={
+              spec.queueName ? (
+                <ResourceLink name={spec.queueName} kind="localqueues" namespace={namespace} group={KUEUE_GROUP} onNavigate={onNavigate} />
+              ) : (
+                'Not assigned'
+              )
+            }
+          />
+          <Property
+            label="Cluster Queue"
+            value={
+              status.admission?.clusterQueue ? (
+                <ResourceLink name={status.admission.clusterQueue} kind="clusterqueues" group={KUEUE_GROUP} onNavigate={onNavigate} />
+              ) : (
+                'No reservation reported'
+              )
+            }
+          />
+          {priority !== '-' && <Property label="Priority" value={priority} />}
+          {checks.length > 0 && (
+            <Property label="Reported Checks" value={Array.from(checkCounts).filter(([, count]) => count > 0).map(([state, count]) => `${count} ${state}`).join(' · ')} />
+          )}
+          <Property label="Workload Active" value={spec.active === false ? 'No' : 'Yes'} />
+        </PropertyList>
+      </Section>
+
+      {checks.length > 0 && (
+        <Section title={`Admission Checks (${checks.length})`} icon={ListChecks} defaultExpanded>
+          <div className="max-w-2xl space-y-2">
+            {checks.map((check: any, index: number) => (
+              <div key={check?.name || index} className="card-inner">
+                <div className="mb-2 grid max-w-md grid-cols-[minmax(0,1fr)_6rem] items-start gap-2">
+                  <span className="min-w-0 break-words text-sm font-medium text-theme-text-primary [&_button]:text-left">
+                    <ResourceLink
+                      name={check?.name || `check-${index + 1}`}
+                      kind="admissionchecks"
+                      group={KUEUE_GROUP}
+                      onNavigate={onNavigate}
+                    />
+                  </span>
+                  <Badge severity={admissionCheckSeverity(check?.state)} size="sm" className="justify-self-start">
+                    {check?.state || 'Unknown'}
+                  </Badge>
+                </div>
+                {check?.message && <p className="whitespace-pre-wrap break-words text-sm text-theme-text-secondary">{check.message}</p>}
+                {check?.lastTransitionTime && (
+                  <div className="mt-2">
+                    <PropertyList>
+                      <Property label="Last Transition" value={formatRelativeAgeTime(check.lastTransitionTime)} />
+                    </PropertyList>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {provisioning}
+
+      <ConditionsSection conditions={status.conditions} getConditionTone={(condition) => isKueueConditionStale(condition, data.metadata?.generation) ? 'unknown' : getKueueWorkloadConditionTone(condition)} defaultExpanded />
+
+      <Section title={`Pod Sets (${podSets.length})`} icon={Cpu} defaultExpanded>
+        <p className="mb-2 text-xs text-theme-text-tertiary">
+          Controller-reported requests for each PodSet, not measured usage. Reservation values are recorded when quota is assigned; they do not decrease after quota reclamation or completion.
+        </p>
+        {podSets.length > 0 ? (
+          <div className="space-y-2">
+            {podSets.map((podSet: any) => {
+              const name = podSet?.name || 'main'
+              const assignment: any = assignments.get(name)
+              const request: any = requests.get(name)
+              const evaluatedDemand = resourceList(request?.resources)
+              const reservedResources = resourceList(assignment?.resourceUsage)
+              const reserved = status.admission != null
+              const reclaimableCount = reclaimable.get(name)
+              return (
+                <div key={name} className="card-inner">
+                  <div className="mb-2 flex flex-wrap items-center gap-2">
+                    <span className="text-sm font-medium text-theme-text-primary">{name}</span>
+                    <Badge tone="structural" size="sm">
+                      desired {String(podSet?.count ?? 'Not reported')}
+                    </Badge>
+                    {typeof podSet?.minCount === 'number' && (
+                      <Badge tone="note" size="sm">
+                        minimum {podSet.minCount}
+                      </Badge>
+                    )}
+                  </div>
+                  <PropertyList>
+                    {assignment && <Property label="Pods at Reservation" value={assignment.count ?? 'Not reported'} />}
+                    {typeof reclaimableCount === 'number' && <Property label="Reclaimable Pods" value={reclaimableCount} />}
+                    <Property
+                      label={reserved ? 'Resources at Reservation' : 'Evaluated Requests'}
+                      value={reserved ? reservedResources || 'Not reported' : evaluatedDemand || 'Not reported'}
+                    />
+                    {assignment?.flavors && (
+                      <Property
+                        label="Resource Flavors"
+                        value={<FlavorAssignments flavors={assignment.flavors} onNavigate={onNavigate} />}
+                      />
+                    )}
+                  </PropertyList>
+                </div>
+              )
+            })}
+          </div>
+        ) : (
+          <div className="text-sm text-theme-text-tertiary">No PodSets declared</div>
+        )}
+      </Section>
+
+    </>
+  )
+}

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

@@ -0,0 +1,25 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { RayClusterRenderer, rayClusterConditionTone } from './RayClusterRenderer'
+const root = { apiVersion: 'ray.io/v1', kind: 'RayCluster', metadata: { name: 'cluster', namespace: 'ml', uid: 'uid', generation: 2 }, spec: { workerGroupSpecs: [{ groupName: 'zero', replicas: 0, minReplicas: 0, maxReplicas: 3, numOfHosts: 2 }] }, status: { observedGeneration: 2, conditions: [{ type: 'HeadPodReady', status: 'True' }, { type: 'RayClusterProvisioned', status: 'True' }] } }
+describe('RayCluster detail evidence boundaries', () => {
+  it('renders reconciled zeros, declared configuration and historical provisioning', () => {
+    const html = renderToStaticMarkup(<RayClusterRenderer data={root} />)
+    for (const text of ['Runtime Health', 'ready workers', 'Declared sizing', 'zero', 'Hosts per Replica', 'initial provisioning']) expect(html).toContain(text)
+    expect(rayClusterConditionTone({ type: 'RayClusterProvisioned', status: 'True' })).toBe('unknown')
+  })
+  it('does not show cached Pod evidence as current when a refresh failed', () => {
+    const html = renderToStaticMarkup(<RayClusterRenderer data={root} onSelectPods={() => {}} podsError="Access denied" podEvidence={{ pods: [{ name: 'STALE-POD', ready: true, containers: [] }], total: 1, truncated: false }} />)
+    expect(html).toContain('Access denied'); expect(html).not.toContain('STALE-POD')
+  })
+  it('states selected-scope count and truncation without inventing group readiness', () => {
+    const html = renderToStaticMarkup(<RayClusterRenderer data={root} onSelectPods={() => {}} selection={{ nodeType: 'worker', workerGroup: 'zero' }} podEvidence={{ pods: [{ name: 'example', ready: false, containers: [] }], total: 250, truncated: true }} />)
+    expect(html).toContain('250 Pods'); expect(html).toContain('showing 1, failures first')
+    expect(html).not.toContain('No directly owned Pods')
+  })
+})
+
+it('distinguishes unreported counters and humanizes the API default bound', () => {
+ const html = renderToStaticMarkup(<RayClusterRenderer data={{ ...root, spec: { workerGroupSpecs: [{ groupName: 'workers', maxReplicas: 2147483647 }] }, status: {} }} />)
+ expect(html).toContain('Not reported'); expect(html).toContain('No limit'); expect(html).not.toContain('2147483647')
+})

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

@@ -0,0 +1,93 @@
+import { useRef, useState } from 'react'
+import { Activity, Boxes, Server } from 'lucide-react'
+import type { ResourceRef, WorkloadPodInfo } from '../../../types'
+import { apiVersionToGroup } from '../../../utils/navigation'
+import { Badge } from '../../ui/Badge'
+import { SelectMenu } from '../../ui/SelectMenu'
+import { AlertBanner, ConditionsSection, type ConditionTone, Property, PropertyList, ResourceLink, Section } from '../../ui/drawer-components'
+import { PodRow, PodListFrame, PodListToggle, workloadPodDetail } from '../../workload/PodList'
+import { isRayObservationStale, rayClusterWorkerCounts } from '../resource-utils-ray'
+
+export interface RayClusterPodSelection { nodeType?: 'head' | 'worker'; workerGroup?: string }
+export interface RayClusterRendererProps {
+  data: any
+  onNavigate?: (ref: ResourceRef) => void
+  podEvidence?: { pods: WorkloadPodInfo[]; total: number; truncated: boolean }
+  podsLoading?: boolean
+  podsError?: string
+  selection?: RayClusterPodSelection
+  onSelectPods?: (selection: RayClusterPodSelection) => void
+}
+
+export function rayClusterConditionTone(condition: any): ConditionTone {
+  if (!['True', 'False'].includes(condition.status)) return 'unknown'
+  if (condition.type === 'HeadPodReady') return condition.status === 'True' ? 'ok' : 'warning'
+  if (condition.type === 'RayClusterReplicaFailure') return condition.status === 'True' ? 'fail' : 'unknown'
+  if (condition.type === 'RayClusterSuspending') return condition.status === 'True' ? 'warning' : 'unknown'
+  return 'unknown'
+}
+
+export function RayClusterRenderer({ data, onNavigate, podEvidence, podsLoading, podsError, selection = {}, onSelectPods }: RayClusterRendererProps) {
+  const [expanded, setExpanded] = useState(false)
+  const podsRef = useRef<HTMLDivElement>(null)
+  const status = data.status ?? {}
+  const spec = data.spec ?? {}
+  const conditions = status.conditions ?? []
+  const stale = isRayObservationStale(data.metadata?.generation, status.observedGeneration)
+  const head = conditions.find((c: any) => c.type === 'HeadPodReady')
+  const counts = rayClusterWorkerCounts(data)
+  const groups: any[] = spec.workerGroupSpecs ?? []
+  const owners = (data.metadata?.ownerReferences ?? []).filter((owner: any) => owner.controller === true && apiVersionToGroup(owner.apiVersion) === 'ray.io' && ['RayService', 'RayJob'].includes(owner.kind))
+  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 <>
+    {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>
+      <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>} />
+        <Property label="Suspension Requested" value={spec.suspend === true ? 'Yes' : 'No'} />
+        {status.state && <Property label="Reported State" value={status.state} />}
+      </PropertyList>
+      {head?.message && <p className="mt-2 whitespace-pre-wrap break-words text-sm text-theme-text-secondary">{head.message}</p>}
+      <div className="mt-3 grid grid-cols-3 gap-2">
+        {(['ready', 'running', 'desired'] as const).map(key => <div className="card-inner min-w-0" key={key}><p className="text-xs capitalize text-theme-text-secondary">{key} workers</p><p className="mt-1 text-lg font-semibold text-theme-text-primary">{counts[key] ?? 'Not reported'}</p></div>)}
+      </div>
+      <p className="mt-2 text-xs text-theme-text-tertiary">Controller-reported worker Pod counts. Running does not mean ready. These label-based counts can differ from the directly owned Pods below.</p>
+      {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>
+      <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}` }))]}
+        onChange={value => select(value === 'all' ? {} : value === 'head' ? { nodeType: 'head' } : { nodeType: 'worker', workerGroup: value.slice(6) })} />
+      <p className="mb-2 text-xs text-theme-text-tertiary">Directly controlled by this RayCluster incarnation. Cleanup Job descendants are excluded. Open a Pod for logs.</p>
+      {podsError ? <AlertBanner variant="warning" title="Pod evidence unavailable" message={podsError} /> : podsLoading ? <p className="text-sm text-theme-text-secondary">Reading runtime Pods…</p> : podEvidence ? <>
+        <p className="mb-2 text-sm text-theme-text-secondary">{scope} · {podEvidence.total} {podEvidence.total === 1 ? 'Pod' : 'Pods'}{podEvidence.truncated ? ` (showing ${podEvidence.pods.length}, failures first)` : ''}</p>
+        {podEvidence.total === 0 && <p className="text-sm text-theme-text-secondary">No directly owned Pods in this scope.</p>}
+        <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>
+      <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>
+        <PropertyList>
+          <Property label="Replicas" value={group.replicas ?? 'Not specified'} />
+          <Property label="Min / Max Replicas" value={`${group.minReplicas ?? 'Not specified'} / ${group.maxReplicas === 2147483647 ? 'No limit' : group.maxReplicas ?? 'Not specified'}`} />
+          <Property label="Hosts per Replica" value={group.numOfHosts ?? 'Not specified'} />
+          {group.suspend != null && <Property label="Controller Suspension" value={group.suspend ? 'Requested' : 'Not requested'} />}
+        </PropertyList>
+      </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.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 />
+  </>
+}

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

@@ -0,0 +1,62 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { RayServiceRenderer, rayServiceConditionTone, serveStateSeverity } from './RayServiceRenderer'
+
+const condition = (type: string, status = 'True', extra = {}) => ({ type, status, observedGeneration: 3, ...extra })
+const root = (status = {}, spec = {}) => ({ apiVersion: 'ray.io/v1', kind: 'RayService', metadata: { namespace: 'ml', name: 'serve', uid: 'root', generation: 3 }, spec, status: { observedGeneration: 3, ...status } })
+const render = (data: any) => renderToStaticMarkup(<RayServiceRenderer data={data} />)
+
+describe('RayService detail', () => {
+  it('keeps proxy readiness, upgrade and rollback independent', () => {
+    const html = render(root({ conditions: [condition('Ready'), condition('UpgradeInProgress'), condition('RollbackInProgress')], numServeEndpoints: 2 }))
+    for (const text of ['Proxy Readiness', 'Ready', 'UpgradeInProgress', 'RollbackInProgress', 'Reported Serve Endpoints', 'not that every application']) expect(html).toContain(text)
+  })
+  it('shows suspension intent separately from acknowledgement and retains observed teardown after intent changes', () => {
+    expect(render(root({}, { suspend: true }))).toContain('Suspension Requested')
+    expect(render(root({ conditions: [condition('Suspending')] }, { suspend: false }))).toContain('Suspending')
+    expect(render(root({ conditions: [condition('Suspended')] }))).toContain('Suspended')
+  })
+  it('does not turn absent maps or absent percentages into zeros or an outage', () => {
+    const html = render(root({ activeServiceStatus: { rayClusterName: 'old' }, pendingServiceStatus: { rayClusterName: 'new', targetCapacity: 0, trafficRoutedPercent: 0 } }))
+    for (const text of ['Active Revision', 'Pending Revision', 'Application status is not reported', 'endpoint still serves requests', '0%', 'configured route weight']) expect(html).toContain(text)
+    expect(html).not.toContain('Applications (0)')
+    expect(html.match(/Serve Target Capacity/g)).toHaveLength(1)
+    expect(html.match(/Configured Traffic Share/g)).toHaveLength(1)
+  })
+  it('supports traffic-only incremental observations and strategy None without inventing pending slots', () => {
+    const html = render(root({ activeServiceStatus: { rayClusterName: 'old', trafficRoutedPercent: 100 } }, { upgradeStrategy: { type: 'None' } }))
+    expect(html).toContain('100%')
+    expect(html).not.toContain('Serve Target Capacity')
+    expect(html).not.toContain('Pending Revision')
+    expect(html).toContain('None')
+  })
+  it('preserves app/deployment failures even when Ready and a runtime is healthy', () => {
+    const data = root({ conditions: [condition('Ready')], pendingServiceStatus: { rayClusterName: 'new', applicationStatuses: { model: { status: 'DEPLOY_FAILED', message: 'Model import failed', serveDeploymentStatuses: { decoder: { status: 'UNHEALTHY', message: 'Replica constructor failed' } } } } } })
+    const html = renderToStaticMarkup(<RayServiceRenderer data={data} runtimeEvidence={{ pending: <p>HeadPodReady</p> }} />)
+    for (const text of ['Ready', 'HeadPodReady', 'DEPLOY_FAILED', 'Model import failed', 'UNHEALTHY', 'Replica constructor failed']) expect(html).toContain(text)
+  })
+  it('never trusts embedded cluster conditions and bounds large application maps with nested failures first', () => {
+    const apps = Object.fromEntries(Array.from({ length: 21 }, (_, i) => [`app-${i}`, { status: 'RUNNING' }])) as Record<string, any>
+    apps['zz-failed-deployment'] = { status: 'RUNNING', serveDeploymentStatuses: { replica: { status: 'UNHEALTHY', message: 'Visible failure' } } }
+    const html = render(root({ activeServiceStatus: { rayClusterName: 'old', rayClusterStatus: { conditions: [condition('HeadPodReady', 'False', { message: 'OBSOLETE EMBEDDED FAILURE' })] }, applicationStatuses: apps } }))
+    expect(html).toContain('Visible failure')
+    expect(html).toContain('Showing 20 of 22 applications')
+    expect(html).not.toContain('OBSOLETE EMBEDDED FAILURE')
+  })
+  it('labels missing and stale observations without inventing conditions', () => {
+    expect(render(root({ observedGeneration: 2 }))).toContain('Observed generation differs')
+    expect(render(root({ observedGeneration: undefined }))).toContain('not reported an observed generation')
+    expect(render(root({ conditions: [condition('Ready', 'True', { observedGeneration: 2 })] }))).not.toContain('(stale)')
+    expect(rayServiceConditionTone(condition('Ready', 'True', { observedGeneration: 2 }))).toBe('ok')
+    for (const entry of [condition('Suspending'), condition('Ready', 'False', { reason: 'ValidationFailed' }), condition('Ready', 'False', { reason: 'InitializingTimeout' })]) {
+      const html = render(root({ observedGeneration: 2, conditions: [entry] }, { suspend: false }))
+      expect(html).not.toContain('(stale)')
+      expect(html).toContain('Observed generation differs')
+    }
+    const suspended = render(root({ observedGeneration: 2, conditions: [condition('Suspended')] }, { suspend: true }))
+    expect(suspended).toContain('Reconciliation is paused')
+    expect(suspended).not.toContain('Observed generation differs')
+    expect(serveStateSeverity('FUTURE_STATE')).toBe('neutral')
+    expect(serveStateSeverity('DELETING')).toBe('warning')
+  })
+})