@skyhook-io/k8s-ui 1.14.11 → 1.15.0

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

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

@@ -0,0 +1,71 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { Badge } from '../../ui/Badge'
+import { RayJobRenderer } from './RayJobRenderer'
+import { getRayJobStatus } from '../resource-utils-ray'
+import { RayJobCell } from './ray-cells'
+import { getResourceStatus } from '../../shared/ResourceRendererDispatch'
+
+const root = { apiVersion: 'ray.io/v1', kind: 'RayJob', metadata: { name: 'train', namespace: 'ml' }, spec: {} }
+const render = (data: any) => renderToStaticMarkup(<RayJobRenderer data={data} onNavigate={() => {}} />)
+
+describe('RayJob native evidence', () => {
+  it.each(['Retrying', 'Suspending', 'Suspended', 'Failed', 'ValidationFailed'])('prioritizes lifecycle %s across summary, table and header', jobDeploymentStatus => {
+    const data = { ...root, status: { jobDeploymentStatus, jobStatus: 'RUNNING' } }
+    expect(getRayJobStatus(data).text).toBe(jobDeploymentStatus)
+    expect(getResourceStatus('rayjobs', data)?.text).toBe(jobDeploymentStatus)
+    expect(renderToStaticMarkup(<RayJobCell resource={data} column="status" />)).toContain(jobDeploymentStatus)
+    expect(render(data)).toContain('Last reported application state')
+    expect(render(data)).toContain('RUNNING')
+  })
+  it('shows completed suspension with a neutral lifecycle badge', () => {
+    expect(render({ ...root, status: { jobDeploymentStatus: 'Suspended' } })).toContain(renderToStaticMarkup(<Badge severity="neutral">Suspended</Badge>))
+  })
+  it('does not call stopped completion success or missing status healthy', () => {
+    expect(getRayJobStatus({ status: { jobStatus: 'STOPPED', jobDeploymentStatus: 'Complete' } }).text).toBe('Stopped')
+    expect(render(root)).toContain('Not reported')
+    expect(render(root)).not.toContain('Succeeded')
+    expect(render({ ...root, status: { jobDeploymentStatus: 'Failed', jobStatus: 'STOPPED' } })).not.toContain('does not establish')
+  })
+  it('keeps application and controller times separate and clears absent evidence', () => {
+    const html = render({ ...root, status: { startTime: '2026-09-20T00:00:00Z', rayJobInfo: { startTime: '2026-09-20T00:01:00Z' }, message: 'capacity timeout', reason: 'DeadlineExceeded' } })
+    expect(html).toContain('Application started')
+    expect(html).toContain('Controller attempt started')
+    expect(html).toContain('capacity timeout')
+    expect(render({ ...root, status: { jobDeploymentStatus: 'Suspended' } })).not.toContain('Application started')
+  })
+  it.each(['HTTPMode', 'InteractiveMode', 'SidecarMode', 'NewMode'])('never invents a submitter for %s', submissionMode => {
+    const html = render({ ...root, spec: { submissionMode } })
+    expect(html).not.toContain('Observed submitter Job')
+    expect(html).toContain(submissionMode)
+    if (submissionMode === 'InteractiveMode') expect(html).toContain('spec.jobId')
+  })
+  it('does not link remote runtime names locally', () => {
+    const html = render({ ...root, spec: { managedBy: 'kueue.x-k8s.io/multikueue' }, status: { rayClusterName: 'remote-runtime' } })
+    expect(html).toContain('remote-runtime')
+    expect(html).not.toMatch(/<button[^>]*>remote-runtime<\/button>/)
+    expect(html).not.toContain('Observed submitter Job')
+  })
+  it('explains selected-cluster cleanup and gate-dependent policies', () => {
+    expect(render({ ...root, spec: { clusterSelector: { 'ray.io/cluster': 'shared' }, shutdownAfterJobFinishes: true } })).toContain('cleanup is not applied')
+    const html = render({ ...root, spec: { deletionStrategy: { deletionRules: [{ policy: 'DeleteWorkers', condition: { jobStatus: 'SUCCEEDED', ttlSeconds: 0 } }] } } })
+    expect(html).toContain('RayJobDeletionPolicy')
+    expect(html).toContain('DeleteWorkers')
+    expect(html).toContain('TTL 0s')
+    expect(html).not.toContain('No completion shutdown requested')
+    expect(render({ ...root, spec: { clusterSelector: { bad: 'selector' } } })).toContain('cleanup is not applied')
+  })
+})
+
+describe('controller message disclosure', () => {
+  it('keeps short messages inline', () => {
+    expect(render({ ...root, status: { message: 'Submission failed.' } })).not.toContain('Full controller message')
+  })
+  it.each(['x'.repeat(20000), 'Failure\nline two\nline three\nline four\nTraceback: final cause'])('retains the entire long message behind a collapsed disclosure', message => {
+    const html = render({ ...root, status: { message } })
+    expect(html).toContain('Full controller message')
+    expect(html).toContain('aria-expanded="false"')
+    expect(html).toContain(message)
+    expect(html.split('Full controller message')[0]).toContain(message.trim().split('\n').at(-1)!.slice(-240))
+  })
+})

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

@@ -0,0 +1,134 @@
+import type { ReactNode } from 'react'
+import type { ResourceRef } from '../../../types'
+import { formatRelativeAgeTime } from '../../../utils/format'
+import { Tooltip } from '../../ui/Tooltip'
+import { Badge } from '../../ui/Badge'
+import { Disclosure } from '../../ui/Disclosure'
+import { AlertBanner, Property, PropertyList, ResourceLink } from '../../ui/drawer-components'
+import { rayJobIsLocal, rayJobSubmissionMode } from '../resource-utils-ray'
+
+export interface RayJobRendererProps {
+  data: any
+  onNavigate?: (ref: ResourceRef) => void
+  submitterEvidence?: ReactNode
+  selectedClusterEvidence?: ReactNode
+  admissionContent?: ReactNode
+}
+
+const card = 'min-w-0 overflow-hidden rounded-lg border border-theme-border bg-theme-surface'
+const header = 'border-b border-theme-border bg-theme-elevated px-3 py-2.5 text-xs font-medium uppercase tracking-wider text-theme-text-secondary'
+
+export function RayJobRenderer({ data, onNavigate, submitterEvidence, selectedClusterEvidence, admissionContent }: RayJobRendererProps) {
+  const spec = data.spec ?? {}
+  const status = data.status ?? {}
+  const local = rayJobIsLocal(data)
+  const mode = rayJobSubmissionMode(data)
+  const selectsExisting = Object.keys(spec.clusterSelector ?? {}).length > 0
+  const selected = spec.clusterSelector?.['ray.io/cluster']
+  const cluster = selected || status.rayClusterName
+  const lifecycle = status.jobDeploymentStatus
+  const jobStatus = status.jobStatus
+  const failed = lifecycle === 'Failed' || lifecycle === 'ValidationFailed'
+  const transitioning = ['Retrying', 'Suspending', 'Suspended'].includes(lifecycle)
+  const rules: any[] = spec.deletionStrategy?.deletionRules ?? []
+  const time = (value: string) => <Tooltip content={value}><time dateTime={value}>{formatRelativeAgeTime(value)}</time></Tooltip>
+  return <div className="@container/rayjob space-y-4">
+    {!local && <AlertBanner variant="info" title="Externally managed RayJob" message={`Managed by ${spec.managedBy}. Reported runtime names may refer to another cluster; local absence does not establish execution state.`} />}
+    {admissionContent}
+    <div className="grid items-start gap-4 @min-[1024px]/rayjob:grid-cols-[minmax(0,1.7fr)_minmax(320px,0.9fr)]">
+      <section className={card} aria-label="RayJob execution">
+        <h3 className={header}>Execution</h3>
+        <div className="space-y-3 p-3 text-sm">
+          <div className="flex flex-wrap gap-x-6 gap-y-3">
+            <div><p className="mb-1 text-xs text-theme-text-secondary">Controller lifecycle</p><Badge severity={failed ? 'error' : transitioning && lifecycle !== 'Suspended' ? 'warning' : 'neutral'}>{lifecycle || 'Not reported'}</Badge></div>
+            <div><p className="mb-1 text-xs text-theme-text-secondary">Last reported application state</p><Badge severity={failed || transitioning ? 'neutral' : jobStatus === 'FAILED' ? 'error' : jobStatus === 'RUNNING' || jobStatus === 'SUCCEEDED' ? 'success' : 'neutral'}>{jobStatus || 'Not reported'}</Badge></div>
+          </div>
+          {status.reason && <p className="break-words font-medium">{status.reason}</p>}
+          {status.message && <ControllerMessage message={status.message} />}
+          {failed && jobStatus && !['FAILED', 'STOPPED'].includes(jobStatus) && <p className="text-xs text-theme-text-secondary">{jobStatus === 'SUCCEEDED' ? 'The application reported success, but the controller lifecycle failed. Review the controller message and submitter evidence.' : 'Controller failure does not establish that the application has stopped.'}</p>}
+          {lifecycle === 'Retrying' && <p className="text-xs text-theme-text-secondary">Preparing to retry. The reported failure and submitter may belong to the attempt being cleaned up.</p>}
+          <PropertyList>
+            <Property label="Suspension requested" value={spec.suspend === true ? 'Yes' : 'No'} />
+            {status.jobId && <Property label="Ray job ID" value={<span className="break-all font-mono">{status.jobId}</span>} />}
+            {status.rayJobInfo?.startTime && <Property label="Application started" value={time(status.rayJobInfo.startTime)} />}
+            {status.rayJobInfo?.endTime && <Property label="Application ended" value={time(status.rayJobInfo.endTime)} />}
+            {status.failed != null && <Property label="Reported failed runs" value={status.failed} />}
+            {status.succeeded != null && <Property label="Reported successful runs" value={status.succeeded} />}
+          </PropertyList>
+          {status.jobStatusCheckFailureStartTime && <AlertBanner variant="warning" title="Application status checks are failing" >{'Checks have been failing since '}{time(status.jobStatusCheckFailureStartTime)}. Application state is the last reported observation.</AlertBanner>}
+        </div>
+        <div className="border-t border-theme-border p-3 text-xs text-theme-text-secondary">
+          <Disclosure summary="Timing and observation details">
+            <div className="space-y-2 pt-2">
+              {status.startTime && <p>Controller attempt started: {time(status.startTime)}</p>}
+              {status.endTime && <p>Controller terminal time: {time(status.endTime)}</p>}
+              <p>Application and controller times describe different events. Status is a controller snapshot; cleared fields are not retained as attempt history. See Timeline for recorded events and YAML for the full resource.</p>
+            </div>
+          </Disclosure>
+        </div>
+      </section>
+      <section className={card} aria-label="RayJob submission and runtime">
+        <h3 className={header}>Submission and runtime</h3>
+        <div className="space-y-3 p-3 text-sm">
+          <p className="font-medium break-words">{mode}</p>
+          <p className="text-theme-text-secondary">{mode === 'K8sJobMode' ? 'A Kubernetes Job submits the application to Ray.' : mode === 'HTTPMode' ? 'The controller submits directly through the Ray API; there is no submitter Job.' : mode === 'InteractiveMode' ? 'The controller waits for spec.jobId to identify a manually submitted Ray job.' : mode === 'SidecarMode' ? 'A container in the head Pod submits the application; there is no submitter Job.' : 'Submission behavior is defined by the reported mode.'}</p>
+          {selectsExisting && !selected && <p className="text-theme-text-secondary">Cluster selection has no ray.io/cluster name.</p>}
+          {cluster ? <div className="space-y-1 border-t border-theme-border pt-3">
+            <p className="text-xs text-theme-text-secondary">{selected ? 'Selected existing RayCluster' : 'Reported RayCluster'}</p>
+            <p className="break-all font-medium">{local ? <ResourceLink kind="rayclusters" group="ray.io" namespace={data.metadata.namespace} name={cluster} onNavigate={onNavigate} /> : cluster}</p>
+            {local && <p className="text-xs text-theme-text-secondary">Open the RayCluster for head/worker Pods and their logs.</p>}
+            {selectedClusterEvidence}
+            {selected && status.rayClusterName && selected !== status.rayClusterName && <div className="pt-2"><p className="text-xs text-theme-text-secondary">Last reported runtime differs from the selected cluster</p>{local ? <ResourceLink kind="rayclusters" group="ray.io" namespace={data.metadata.namespace} name={status.rayClusterName} onNavigate={onNavigate} /> : <p>{status.rayClusterName}</p>}</div>}
+          </div> : <p className="text-theme-text-secondary">No runtime cluster reported.</p>}
+          {local && mode === 'K8sJobMode' && <div className="space-y-2 border-t border-theme-border pt-3"><p className="text-xs font-medium text-theme-text-secondary">Observed submitter Job</p>{submitterEvidence ?? <p className="text-theme-text-secondary">Submitter evidence is not available.</p>}</div>}
+        </div>
+      </section>
+    </div>
+    <section className={card} aria-label="RayJob configuration">
+      <h3 className={header}>Job configuration</h3>
+      <div className="space-y-3 p-3 text-sm">
+        <p className="text-xs text-theme-text-secondary">Entrypoint</p>
+        <pre className="max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-xs">{spec.entrypoint || 'Not specified'}</pre>
+        <div className="grid gap-4 @min-[1024px]/rayjob:grid-cols-2">
+          <PropertyList>
+            {spec.entrypointNumCpus != null && <Property label="Entrypoint CPUs" value={spec.entrypointNumCpus} />}
+            {spec.entrypointNumGpus != null && <Property label="Entrypoint GPUs" value={spec.entrypointNumGpus} />}
+            {spec.entrypointResources && <Property label="Entrypoint custom resources" value={<code className="break-all">{spec.entrypointResources}</code>} />}
+            {spec.backoffLimit != null && <Property label="RayJob retry limit" value={spec.backoffLimit} />}
+            {spec.submitterConfig?.backoffLimit != null && <Property label="Submitter retry limit" value={spec.submitterConfig.backoffLimit} />}
+            {spec.activeDeadlineSeconds != null && <Property label="Active deadline" value={`${spec.activeDeadlineSeconds}s`} />}
+            {spec.preRunningDeadlineSeconds != null && <Property label="Pre-running deadline" value={`${spec.preRunningDeadlineSeconds}s`} />}
+          </PropertyList>
+          <div className="space-y-2 text-theme-text-secondary">
+            <p className="font-medium text-theme-text-primary">Runtime cleanup</p>
+            {selectsExisting ? <p>Runtime cleanup is not applied to a selected existing cluster.</p> : <>
+              {!spec.deletionStrategy && <p>{spec.shutdownAfterJobFinishes === true ? `Cluster shutdown requested after completion${spec.ttlSecondsAfterFinished != null ? ` (TTL ${spec.ttlSecondsAfterFinished}s)` : ''}.` : 'No completion shutdown requested.'}</p>}
+              {spec.deletionStrategy && <Disclosure summary={`Deletion policy${rules.length ? ` · ${rules.length} ${rules.length === 1 ? 'rule' : 'rules'}` : ''}`}>
+                <div className="space-y-2 pt-2">
+                  <p>Requires the operator’s RayJobDeletionPolicy feature gate. These are declared rules, not proof that cleanup occurred.</p>
+                  {rules.map((rule, index) => <p className="break-words" key={index}>{rule.policy} · {rule.condition?.jobStatus ? `Application ${rule.condition.jobStatus}` : `Controller ${rule.condition?.jobDeploymentStatus}`} · TTL {rule.condition?.ttlSeconds ?? 0}s</p>)}
+                  {spec.deletionStrategy.onSuccess && <p>On success: {spec.deletionStrategy.onSuccess.policy}</p>}
+                  {spec.deletionStrategy.onFailure && <p>On failure: {spec.deletionStrategy.onFailure.policy}</p>}
+                </div>
+              </Disclosure>}
+            </>}
+            <p className="text-xs">Operator configuration can affect cleanup. Missing runtime resources do not establish application failure.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+}
+
+function ControllerMessage({ message }: { message: string }) {
+  const text = message.trim()
+  const lines = text.split('\n')
+  const isLong = text.length > 480 || lines.length > 4
+  if (!isLong) return <p className="max-w-3xl whitespace-pre-wrap break-words">{message}</p>
+  return <div className="min-w-0 space-y-2">
+    <p className="max-w-3xl whitespace-pre-wrap break-words">{lines.slice(0, 2).join('\n').slice(0, 240)}{'\n…\n'}{text.slice(-240).split('\n').slice(-1)[0]}</p>
+    <Disclosure summary="Full controller message" summaryClassName="text-xs text-accent-text">
+      <pre tabIndex={0} className="mt-2 max-h-96 overflow-auto whitespace-pre-wrap break-words rounded border border-theme-border bg-theme-base p-3 font-mono text-xs">{message}</pre>
+    </Disclosure>
+  </div>
+}

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

@@ -225,13 +225,14 @@ describe("Reflector resource hierarchy", () => {
   it("keeps ConfigMap data ahead of detailed settings and source mirror list", () => {
     const html = renderToStaticMarkup(
       <ResourceRendererDispatch
-        kind="configmaps"
         data={{
           ...resource({ "reflection-allowed": "true" }),
           data: { setting: "value" },
         }}
         resource={{ kind: "configmaps", namespace: "app", name: "mirror" }}
         relationships={{ reflection: { mirrors: [mirror] } }}
+        onCopy={() => {}}
+        copied={null}
       />,
     );
     expect(html.indexOf("Data (1 keys)")).toBeLessThan(
@@ -242,7 +243,6 @@ describe("Reflector resource hierarchy", () => {
   it("puts TLS expiry and mirror provenance ahead of data, with details below", () => {
     const html = renderToStaticMarkup(
       <ResourceRendererDispatch
-        kind="secrets"
         data={{
           ...resource({ reflects: "source/settings" }),
           type: "kubernetes.io/tls",
@@ -268,6 +268,8 @@ describe("Reflector resource hierarchy", () => {
             ],
           } as any
         }
+        onCopy={() => {}}
+        copied={null}
       />,
     );
     expect(html.indexOf("Certificate has expired")).toBeLessThan(

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

@@ -371,7 +371,7 @@ describe('rolloutActions promote reachability', () => {
 
   it('blocks promote, promote-full and skip-step alike on an aborted rollout', () => {
     const data = canaryRollout({ phase: 'Degraded', abort: true, currentStepIndex: 1 })
-    for (const action of ['promote', 'promote-full', 'skip-step']) {
+    for (const action of ['promote', 'promote-full', 'skip-step'] as const) {
       expect(blockedReason(data, action)).toBe('Retry the rollout first')
     }
   })

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

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useId } from 'react'
 import { Server, ExternalLink, Scale, Minus, Plus, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
 import { PolicySection } from './PolicySection'
@@ -131,6 +131,7 @@ function compactHPASummary(diagnosis: HPADiagnosis): string {
 }
 
 export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale, isScalePending, scaleBlockedBy, scalerDiagnostics, workloadPods, onRequestRefresh, rbacData, rbacLoading, rbacError, policyData, policyLoading, policyError, namespaceLimitRangeNames }: WorkloadRendererProps) {
+  const titleId = useId()
   const status = data.status || {}
   const spec = data.spec || {}
   const metadata = data.metadata || {}
@@ -288,13 +289,14 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
       </Section>
 
       {/* Scale Dialog */}
-      <DialogPortal open={showScaleDialog} onClose={() => setShowScaleDialog(false)} className="w-80 p-4">
-        <h3 className="text-sm font-medium text-theme-text-primary mb-4">
+      <DialogPortal ariaLabelledBy={titleId} open={showScaleDialog} onClose={() => setShowScaleDialog(false)} className="w-80 p-4">
+        <h3 id={titleId} className="text-sm font-medium text-theme-text-primary mb-4">
           Scale {metadata.name}
         </h3>
 
         <div className="flex items-center justify-center gap-4 mb-4">
           <button
+            aria-label="Decrease replicas"
             onClick={() => setTargetReplicas(Math.max(0, targetReplicas - 1))}
             className="p-2 rounded-lg bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
             disabled={targetReplicas <= 0}
@@ -307,12 +309,14 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
             min="0"
             max="10000"
             value={targetReplicas}
+            aria-label="Replicas"
             onChange={(e) => setTargetReplicas(Math.min(10000, Math.max(0, parseInt(e.target.value) || 0)))}
             className="w-20 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-blue-500"
             autoFocus
           />
 
           <button
+            aria-label="Increase replicas"
             onClick={() => setTargetReplicas(Math.min(10000, targetReplicas + 1))}
             disabled={targetReplicas >= 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/renderers/index.ts

@@ -190,3 +190,5 @@ export { AdmissionCheckRenderer, ProvisioningRequestRenderer } from './KueueProv
 export { RayServiceRenderer } from './RayServiceRenderer'
 
 export { RayClusterRenderer } from './RayClusterRenderer'
+
+export { RayJobRenderer } from './RayJobRenderer'

package/src/components/resources/resource-utils-kueue.ts

@@ -1,5 +1,6 @@
 // Kueue + Cluster Autoscaler ProvisioningRequest CRD utility functions
 
+import type { BadgeSeverity } from '../ui/Badge'
 import type { StatusBadge } from './resource-utils'
 import { healthColors } from './resource-utils'
 
@@ -293,3 +294,16 @@ export function getProvisioningRequestClassName(resource: any): string {
 export function getProvisioningRequestPodSetCount(resource: any): number {
   return (resource?.spec?.podSets || []).length
 }
+
+export function admissionCheckSeverity(state?: string): BadgeSeverity {
+  switch (state) {
+    case 'Ready':
+      return 'success'
+    case 'Rejected':
+      return 'error'
+    case 'Retry':
+      return 'warning'
+    default:
+      return 'neutral'
+  }
+}

package/src/components/resources/resource-utils-ray.ts

@@ -63,6 +63,12 @@ export function getRayJobStatus(resource: any): StatusBadge {
     return { text: deploymentStatus, color: healthColors.unhealthy, level: 'unhealthy' }
   }
 
+  if (['Retrying', 'Suspending', 'Suspended'].includes(deploymentStatus)) {
+    return deploymentStatus === 'Suspended'
+      ? { text: deploymentStatus, color: healthColors.neutral, level: 'neutral' }
+      : { text: deploymentStatus, color: healthColors.degraded, level: 'degraded' }
+  }
+
   switch (jobStatus) {
     case 'SUCCEEDED':
       return { text: 'Succeeded', color: healthColors.neutral, level: 'neutral' }
@@ -77,15 +83,11 @@ export function getRayJobStatus(resource: any): StatusBadge {
   }
 
   switch (deploymentStatus) {
-    case 'Suspended':
-      return { text: 'Suspended', color: healthColors.neutral, level: 'neutral' }
     case 'Complete':
       return { text: 'Complete', color: healthColors.neutral, level: 'neutral' }
     case 'Running':
       return { text: 'Running', color: healthColors.healthy, level: 'healthy' }
     case 'Initializing':
-    case 'Suspending':
-    case 'Retrying':
     case 'Waiting':
       return { text: deploymentStatus, color: healthColors.degraded, level: 'degraded' }
   }
@@ -184,3 +186,11 @@ export function getRayCronJobLastSchedule(resource: any): string {
   if (!lastSchedule) return '-'
   return formatAge(lastSchedule)
 }
+
+export function rayJobIsLocal(resource: any): boolean {
+  return !resource.spec?.managedBy || resource.spec.managedBy === 'ray.io/kuberay-operator'
+}
+
+export function rayJobSubmissionMode(resource: any): string {
+  return resource.spec?.submissionMode || 'K8sJobMode'
+}

package/src/components/shared/CreateResourceDialog.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState, type DragEvent as ReactDragEvent } from 'react'
+import { useCallback, useEffect, useRef, useState, type DragEvent as ReactDragEvent, useId } from 'react'
 import { AlertTriangle, Check, Loader2, Upload, X } from 'lucide-react'
 import { Collapse, CollapseChevron, useDisclosure } from '../ui/Collapse'
 import { ConfirmDialog } from '../ui/ConfirmDialog'
@@ -69,6 +69,7 @@ export function CreateResourceDialog({
   schemaLoader,
   onCreated,
 }: CreateResourceDialogProps) {
+  const titleId = useId()
   const [yaml, setYaml] = useState(initialYaml)
   const [mode, setMode] = useState<'apply' | 'create'>('apply')
   const [dryRun, setDryRun] = useState(false)
@@ -363,6 +364,7 @@ export function CreateResourceDialog({
 
   return (
     <DialogPortal
+      ariaLabelledBy={titleId}
       open={open}
       onClose={handleClose}
       closable={!pending}
@@ -374,6 +376,7 @@ export function CreateResourceDialog({
     >
       {preview ? (
         <YamlReview
+          titleId={titleId}
           submittedYaml={preview.yaml}
           documents={preview.documents}
           nonAtomic={preview.nonAtomic}
@@ -393,11 +396,12 @@ export function CreateResourceDialog({
       ) : (
         <>
           <div className="flex shrink-0 items-center justify-between border-b border-theme-border px-5 py-3.5">
-            <h2 className="text-sm font-semibold text-theme-text-primary">{dialogTitle}</h2>
+            <h2 id={titleId} className="text-sm font-semibold text-theme-text-primary">{dialogTitle}</h2>
             <Tooltip content="Close">
               <button
                 type="button"
                 onClick={handleClose}
+                aria-label="Close"
                 className="rounded p-1 text-theme-text-secondary transition-colors hover:bg-theme-hover"
               >
                 <X className="h-4 w-4" />