@skyhook-io/k8s-ui 1.18.2 → 1.20.0

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

@@ -26,7 +26,7 @@ describe('Kueue Workload detail', () => {
       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)
+    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')
   })

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

@@ -12,14 +12,21 @@ import {
   type ConditionTone,
 } from '../../ui/drawer-components'
 import { formatResources } from '../resource-utils'
+import type { Relationships } from '../../../types'
+import { AdmissionPath, FlavorReasons, type KueueWorkloadReads } from '../../kueue/AdmissionPath'
+import { KUEUE_GROUP } from '../../kueue/constants'
 import { admissionCheckSeverity, getKueueWorkloadStatus, getKueueWorkloadPriority, getKueueWorkloadStatusCondition, isKueueWorkloadFailureReason, isKueueConditionStale } from '../resource-utils-kueue'
 
-const KUEUE_GROUP = 'kueue.x-k8s.io'
-
 interface KueueWorkloadRendererProps {
   data: any
   provisioning?: ReactNode
+  /** Kueue's reported pending position, supplied by the host (it reads the visibility API). */
+  pendingPosition?: ReactNode
   onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+  /** The Workload's own REST relationships: its owner comes from the ownership answer. */
+  relationships?: Relationships
+  /** Objects on the admission path, read as the viewer. Absent: names only. */
+  reads?: KueueWorkloadReads
 }
 
 function resourceList(resources: any): string | null {
@@ -46,24 +53,9 @@ export function getKueueWorkloadConditionTone(condition: any): ConditionTone {
   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) {
+export function KueueWorkloadRenderer({ data, onNavigate, provisioning, pendingPosition, relationships, reads }: 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)
@@ -95,29 +87,10 @@ export function KueueWorkloadRenderer({ data, onNavigate, provisioning }: KueueW
 
       {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>
+      <Section variant="card" 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'
-              )
-            }
-          />
+          {pendingPosition && <Property label="Queue Position" value={pendingPosition} />}
           {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(' · ')} />
@@ -126,11 +99,15 @@ export function KueueWorkloadRenderer({ data, onNavigate, provisioning }: KueueW
         </PropertyList>
       </Section>
 
+      <AdmissionPath data={data} reads={reads} relationships={relationships} onNavigate={onNavigate} />
+
+      <FlavorReasons data={data} onNavigate={onNavigate} />
+
       {checks.length > 0 && (
-        <Section title={`Admission Checks (${checks.length})`} icon={ListChecks} defaultExpanded>
-          <div className="max-w-2xl space-y-2">
+        <Section variant="card" title={`Admission Checks (${checks.length})`} icon={ListChecks} defaultExpanded>
+          <div className="divide-y divide-theme-border">
             {checks.map((check: any, index: number) => (
-              <div key={check?.name || index} className="card-inner">
+              <div key={check?.name || index} className="py-3 first:pt-0 last:pb-0">
                 <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
@@ -160,14 +137,14 @@ export function KueueWorkloadRenderer({ data, onNavigate, provisioning }: KueueW
 
       {provisioning}
 
-      <ConditionsSection conditions={status.conditions} getConditionTone={(condition) => isKueueConditionStale(condition, data.metadata?.generation) ? 'unknown' : getKueueWorkloadConditionTone(condition)} defaultExpanded />
+      <ConditionsSection variant="card" conditions={status.conditions} getConditionTone={(condition) => isKueueConditionStale(condition, data.metadata?.generation) ? 'unknown' : getKueueWorkloadConditionTone(condition)} defaultExpanded />
 
-      <Section title={`Pod Sets (${podSets.length})`} icon={Cpu} defaultExpanded>
+      <Section variant="card" 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">
+          <div className="divide-y divide-theme-border">
             {podSets.map((podSet: any) => {
               const name = podSet?.name || 'main'
               const assignment: any = assignments.get(name)
@@ -177,7 +154,7 @@ export function KueueWorkloadRenderer({ data, onNavigate, provisioning }: KueueW
               const reserved = status.admission != null
               const reclaimableCount = reclaimable.get(name)
               return (
-                <div key={name} className="card-inner">
+                <div key={name} className="py-3 first:pt-0 last:pb-0">
                   <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">
@@ -196,12 +173,6 @@ export function KueueWorkloadRenderer({ data, onNavigate, provisioning }: KueueW
                       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>
               )

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

@@ -1,10 +1,12 @@
-import { useMemo, useState } from 'react'
+import { useMemo, useState, type ReactNode } from 'react'
 import { Badge } from '../../ui/Badge'
 import { healthToSeverity } from '../../../utils/badge-colors'
 import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
 import { getCollectorPipelines, getOpenTelemetryCollectorStatus, getOpenTelemetryInstrumentationStatus } from '../resource-utils-opentelemetry'
 
-export function OpenTelemetryCollectorRenderer({ data }: { data: any }) {
+// workloadEvidence is the host-provided current workload preview; shared hosts
+// can omit it and retain the native reconciliation/configuration view.
+export function OpenTelemetryCollectorRenderer({ data, workloadEvidence }: { data: any; workloadEvidence?: ReactNode }) {
   const state = getOpenTelemetryCollectorStatus(data)
   const preview = useMemo(() => getCollectorPipelines(data), [data])
   const [showAll, setShowAll] = useState(false)
@@ -24,6 +26,7 @@ export function OpenTelemetryCollectorRenderer({ data }: { data: any }) {
       {state.text === 'Status stale' && <p className="mt-2 text-sm text-theme-text-secondary">The reported reconciliation describes an earlier configuration generation.</p>}
       {ready?.message && <p className="mt-2 whitespace-pre-wrap break-words text-sm text-theme-text-secondary">{ready.message}</p>}
     </Section>
+    {workloadEvidence}
     <Section title={preview.error ? 'Configured Pipelines' : `Configured Pipelines (${preview.pipelines.length})`} defaultExpanded>
       {preview.error ? <p className="text-sm text-theme-text-secondary">{preview.error}</p> : preview.pipelines.length === 0 ? <p className="text-sm text-theme-text-tertiary">No pipelines are declared in this configuration.</p> : <>
         <div className="space-y-3">
@@ -48,6 +51,8 @@ export function OpenTelemetryInstrumentationRenderer({ data }: { data: any }) {
   const spec = data.spec ?? {}
   const state = getOpenTelemetryInstrumentationStatus(data)
   const blocked = Object.keys(data.status?.upgradeBlockedVersions ?? {})
+  const blockedPreview = blocked.slice(0, 10)
+  const languageLabel = (language: string) => language.length > 160 ? `${language.slice(0, 160)}…` : language
   const runtimeImages = ['java', 'nodejs', 'python', 'dotnet', 'go', 'apacheHttpd', 'nginx', 'php', 'ruby'].filter(language => spec[language]?.image)
   return <>
     <Section title="Auto-instrumentation Configuration" defaultExpanded>
@@ -57,13 +62,13 @@ export function OpenTelemetryInstrumentationRenderer({ data }: { data: any }) {
         <Property label="Propagators" value={spec.propagators?.join(', ')} />
         <Property label="Sampler" value={spec.sampler?.type} />
         <Property label="Sampler argument" value={spec.sampler?.argument} />
-        {blocked.length > 0 && <Property label="Blocked image upgrades" value={blocked.join(', ')} />}
       </PropertyList>
       <p className="mt-2 text-xs text-theme-text-tertiary">These settings configure injection into annotated workloads. This resource does not report which Pods were injected or whether telemetry reaches the endpoint.</p>
-      {blocked.length > 0 && <p className="mt-2 text-sm text-theme-text-secondary">The operator could not automatically upgrade the listed runtime images. Inspect status in YAML and the operator logs before choosing a supported image.</p>}
+      {blocked.length > 0 && <p className="mt-2 text-sm text-theme-text-secondary">The operator recorded these blocks during a startup upgrade check. This record can remain after image changes. Inspect the current auto-instrumentation images, status in YAML and operator logs before choosing a supported image.</p>}
     </Section>
-    {blocked.length > 0 && <Section title="Blocked Image Upgrades" defaultExpanded>
-      <PropertyList>{blocked.map(language => <Property key={language} label={language} value={<span className="whitespace-pre-wrap break-words">{String(data.status.upgradeBlockedVersions[language]).slice(0, 1000)}{String(data.status.upgradeBlockedVersions[language]).length > 1000 ? '… Inspect YAML for the full explanation.' : ''}</span>} />)}</PropertyList>
+    {blocked.length > 0 && <Section title="Recorded Image Upgrade Blocks" defaultExpanded>
+      <PropertyList>{blockedPreview.map(language => <Property key={language} label={languageLabel(language)} value={<span className="whitespace-pre-wrap break-words">{String(data.status.upgradeBlockedVersions[language]).slice(0, 1000)}{String(data.status.upgradeBlockedVersions[language]).length > 1000 ? '… Inspect YAML for the full explanation.' : ''}</span>} />)}</PropertyList>
+      {blocked.length > 10 && <p className="mt-2 text-xs text-theme-text-tertiary">{blocked.length - 10} more recorded languages in YAML.</p>}
     </Section>}
     {/* Runtime image defaults are secondary to endpoint/sampler and upgrade failures. */}
     {runtimeImages.length > 0 && <Section title="Runtime Images" defaultExpanded={false}><PropertyList>

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

@@ -1,7 +1,11 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { describe, expect, it } from 'vitest'
 import { 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' }] } }
+;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
 describe('RayCluster detail evidence boundaries', () => {
   it('renders reconciled zeros, declared configuration and historical provisioning', () => {
     const html = renderToStaticMarkup(<RayClusterRenderer data={root} />)
@@ -23,3 +27,38 @@ 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')
 })
+
+describe('RayCluster Pod log links', () => {
+  const started = (name: string) => [{ name, ready: true, restartCount: 0 }]
+  const evidence = { pods: [{ name: 'cluster-head-abc', ready: true, containers: ['ray-head'], containerStatuses: started('ray-head') }, { name: 'cluster-cpu-worker-def', ready: false, containers: ['wait-gcs-ready', 'ray-worker'], containerStatuses: started('ray-worker') }, { name: 'cluster-cpu-worker-new', ready: false, containers: ['wait-gcs-ready', 'ray-worker'] }, { name: 'cluster-cpu-worker-bound', ready: false, nodeName: 'node-a', containers: ['ray-worker'] }, { name: 'cluster-cpu-worker-evicted', ready: false, phase: 'Failed', nodeName: 'node-a', containers: ['ray-worker'] }, { name: 'cluster-cpu-worker-sidecar-only', ready: false, phase: 'Pending', nodeName: 'node-a', containers: ['proxy', 'ray-worker'], containerStatuses: [{ name: 'proxy', init: true, sidecar: true, ready: true, restartCount: 0 }] }], total: 6, truncated: false }
+  it('offers logs on each verified Pod only when the host can open them', () => {
+    const withLogs = renderToStaticMarkup(<RayClusterRenderer data={root} onSelectPods={() => {}} podEvidence={evidence} onOpenPodLogs={() => {}} />)
+    expect(withLogs).toContain('Open logs for cluster-head-abc'); expect(withLogs).toContain('Open logs for cluster-cpu-worker-def')
+    expect(withLogs).toContain('container output while the Pod exists'); expect(withLogs).toContain('/tmp/ray')
+    const without = renderToStaticMarkup(<RayClusterRenderer data={root} onSelectPods={() => {}} podEvidence={evidence} />)
+    expect(without).not.toContain('logs for'); expect(without).not.toContain('/tmp/ray')
+  })
+  it('says why a Pod with no reported container status has no logs instead of offering a button', () => {
+    const html = renderToStaticMarkup(<RayClusterRenderer data={root} onSelectPods={() => {}} podEvidence={evidence} onOpenPodLogs={() => {}} />)
+    expect(html).toContain('Logs for cluster-cpu-worker-new: </span>Not scheduled'); expect(html).toContain('Logs for cluster-cpu-worker-bound: </span>No status yet'); expect(html).toContain('Logs for cluster-cpu-worker-evicted: </span>Ended before starting'); expect(html).toContain('Logs for cluster-cpu-worker-sidecar-only: </span>Waiting to start')
+    expect(html).not.toContain('Open logs for cluster-cpu-worker-new'); expect(html).not.toContain('Open logs for cluster-cpu-worker-bound')
+  })
+  it('opens the clicked row\'s Pod', () => {
+    const opened: string[] = []
+    const host = document.createElement('div')
+    const view = createRoot(host)
+    act(() => view.render(<RayClusterRenderer data={root} onSelectPods={() => {}} podEvidence={evidence} onOpenPodLogs={pod => opened.push(pod.name)} />))
+    act(() => host.querySelector<HTMLButtonElement>('[aria-label="Open logs for cluster-cpu-worker-def"]')!.click())
+    expect(opened).toEqual(['cluster-cpu-worker-def'])
+    act(() => view.unmount())
+  })
+  it('offers no log links when the Pod list could not be read', () => {
+    const html = renderToStaticMarkup(<RayClusterRenderer data={root} onSelectPods={() => {}} podsError="Forbidden" podEvidence={evidence} onOpenPodLogs={() => {}} />)
+    expect(html).not.toContain('Open logs for')
+  })
+  it('asks for a newer Radar instead of showing an unsupported-route error', () => {
+    const html = renderToStaticMarkup(<RayClusterRenderer data={root} onSelectPods={() => {}} podsUpgrade={{ feature: 'RayCluster runtime Pods', minimumVersion: 'v1.15.0', currentVersion: 'v1.14.0' }} podsError="only deployments are supported" />)
+    expect(html).toContain('RayCluster runtime Pods'); expect(html).toContain('v1.15')
+    expect(html).not.toContain('only deployments are supported')
+  })
+})

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

@@ -1,12 +1,14 @@
 import { useRef, useState } from 'react'
 import { Activity, Boxes, Server } from 'lucide-react'
 import type { ResourceRef, WorkloadPodInfo } from '../../../types'
+import type { RadarUpgradeRequirement } from '../../../types/fetch-error'
+import { RadarUpgradeNote } from '../../ui/RadarUpgradeNote'
 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'
+import { isRayObservationStale, podLogsUnavailableReason, rayClusterWorkerCounts } from '../resource-utils-ray'
 
 export interface RayClusterPodSelection { nodeType?: 'head' | 'worker'; workerGroup?: string }
 export interface RayClusterRendererProps {
@@ -17,6 +19,21 @@ export interface RayClusterRendererProps {
   podsError?: string
   selection?: RayClusterPodSelection
   onSelectPods?: (selection: RayClusterPodSelection) => void
+  /**
+   * Opens one Pod's logs. The host decides whether the viewer may read Pod
+   * logs; without it the rows have no Logs buttons and no logs note.
+   */
+  onOpenPodLogs?: (pod: WorkloadPodInfo) => void
+  /** Said in place of the logs note when the host offers no Logs buttons. */
+  podLogsNote?: string
+  /** Shown above a Pod list that is kept although its last refresh failed. */
+  podsNote?: string
+  /**
+   * Set when the connected Radar can't list this RayCluster's Pods: Runtime
+   * Pods (shown only with `onSelectPods`) then shows this upgrade note instead
+   * of the error, loading or Pod list. Absent says nothing about support.
+   */
+  podsUpgrade?: RadarUpgradeRequirement | null
 }
 
 export function rayClusterConditionTone(condition: any): ConditionTone {
@@ -27,7 +44,7 @@ export function rayClusterConditionTone(condition: any): ConditionTone {
   return 'unknown'
 }
 
-export function RayClusterRenderer({ data, onNavigate, podEvidence, podsLoading, podsError, selection = {}, onSelectPods }: RayClusterRendererProps) {
+export function RayClusterRenderer({ data, onNavigate, podEvidence, podsLoading, podsError, selection = {}, onSelectPods, onOpenPodLogs, podLogsNote, podsNote, podsUpgrade }: RayClusterRendererProps) {
   const [expanded, setExpanded] = useState(false)
   const podsRef = useRef<HTMLDivElement>(null)
   const status = data.status ?? {}
@@ -40,7 +57,7 @@ export function RayClusterRenderer({ data, onNavigate, podEvidence, podsLoading,
   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} />
+  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} onOpenLogs={onOpenPodLogs && (() => onOpenPodLogs(pod))} logsUnavailable={podLogsUnavailableReason(pod)} />
   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 variant="card" title="Runtime Health" icon={Activity} defaultExpanded>
@@ -63,8 +80,9 @@ export function RayClusterRenderer({ data, onNavigate, podEvidence, podsLoading,
         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-xs text-theme-text-tertiary">Directly controlled by this RayCluster incarnation. Cleanup Job descendants are excluded.{onOpenPodLogs ? ' The Logs button shows a Pod\'s container output while the Pod exists. Ray session logs under /tmp/ray aren\'t read.' : podLogsNote ? ` ${podLogsNote}` : ''}</p>
+      {podsUpgrade ? <RadarUpgradeNote requirement={podsUpgrade} /> : podsError ? <AlertBanner variant="warning" title="Pod evidence unavailable" message={podsError} /> : podsLoading ? <p className="text-sm text-theme-text-secondary">Reading runtime Pods…</p> : podEvidence ? <>
+        {podsNote && <p className="mb-2 text-xs text-theme-text-tertiary">{podsNote}</p>}
         <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>

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

@@ -0,0 +1,83 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { expect, it, vi } from 'vitest'
+import { ServiceAccountRenderer } from './ServiceAccountRenderer'
+
+it('navigates both declared Secret roles using the host resource-kind contract', async () => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+  const container = document.createElement('div')
+  const root = createRoot(container)
+  const onNavigate = vi.fn()
+  try {
+    await act(async () => root.render(
+      <ServiceAccountRenderer
+        data={{ metadata: { name: 'runner', namespace: 'team' }, secrets: [{ name: 'token-association' }], imagePullSecrets: [{ name: 'registry' }] }}
+        onNavigate={onNavigate}
+      />,
+    ))
+    for (const name of ['token-association', 'registry']) {
+      const button = [...container.querySelectorAll('button')].find((button) => button.textContent === name)
+      expect(button).toBeDefined()
+      await act(async () => button!.click())
+      expect(onNavigate).toHaveBeenLastCalledWith({ kind: 'secrets', namespace: 'team', name, group: undefined })
+    }
+  } finally {
+    await act(async () => root.unmount())
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: false })
+  }
+})
+
+it('leaves secrets[] references to other namespaces, kinds or API groups as text', async () => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+  const container = document.createElement('div')
+  const root = createRoot(container)
+  try {
+    await act(async () => root.render(
+      <ServiceAccountRenderer
+        data={{
+          metadata: { name: 'runner', namespace: 'team' },
+          secrets: [
+            { name: 'foreign', namespace: 'other' },
+            { name: 'not-a-secret', kind: 'ConfigMap' },
+            { name: 'custom-group', apiVersion: 'example.io/v1' },
+            { name: 'local', namespace: 'team', kind: 'Secret', apiVersion: 'v1' },
+          ],
+        }}
+        onNavigate={vi.fn()}
+      />,
+    ))
+    const linked = [...container.querySelectorAll('button')].map((button) => button.textContent)
+    expect(linked).toContain('local')
+    for (const name of ['foreign', 'not-a-secret', 'custom-group']) {
+      expect(linked).not.toContain(name)
+      expect(container.textContent).toContain(name)
+    }
+  } finally {
+    await act(async () => root.unmount())
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: false })
+  }
+})
+
+it('skips unnamed Secret entries instead of rendering blank links', async () => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+  const container = document.createElement('div')
+  const root = createRoot(container)
+  try {
+    await act(async () => root.render(
+      <ServiceAccountRenderer
+        data={{ metadata: { name: 'runner', namespace: 'team' }, secrets: [{}, { name: 'token' }], imagePullSecrets: [{}, { name: 'registry' }] }}
+        onNavigate={vi.fn()}
+      />,
+    ))
+    const links = [...container.querySelectorAll('button')].map((button) => button.textContent)
+    expect(links).toContain('token')
+    expect(links).toContain('registry')
+    expect(links).not.toContain('')
+    expect(container.textContent).toContain('Secrets (1)')
+    expect(container.textContent).toContain('Image Pull Secrets (1)')
+  } finally {
+    await act(async () => root.unmount())
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: false })
+  }
+})

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

@@ -62,8 +62,9 @@ export function ServiceAccountRenderer({
 }: ServiceAccountRendererProps) {
   const metadata = data.metadata || {}
   const annotations = metadata.annotations || {}
-  const secrets = data.secrets || []
-  const imagePullSecrets = data.imagePullSecrets || []
+  // The API server accepts unnamed entries; they name no Secret to show or link.
+  const secrets = (data.secrets || []).filter((secret: any) => secret?.name)
+  const imagePullSecrets = (data.imagePullSecrets || []).filter((secret: any) => secret?.name)
 
   // automountServiceAccountToken defaults to true if not set
   const automountToken = data.automountServiceAccountToken !== false
@@ -150,7 +151,7 @@ export function ServiceAccountRenderer({
         <Section title={`Secrets (${secrets.length})`} icon={Key}>
           <PropertyList>
             {secrets.map((secret: any) => (
-              <Property key={secret.name} label="Secret" value={secret.name} />
+              <Property key={secret.name} label="Secret" value={namesLocalSecret(secret, metadata.namespace) ? <ResourceLink name={secret.name} kind="secrets" namespace={metadata.namespace} onNavigate={onNavigate} /> : secret.name} />
             ))}
           </PropertyList>
         </Section>
@@ -159,14 +160,9 @@ export function ServiceAccountRenderer({
       {/* Image Pull Secrets */}
       {imagePullSecrets.length > 0 && (
         <Section title={`Image Pull Secrets (${imagePullSecrets.length})`}>
-          <div className="flex flex-wrap gap-1">
+          <div className="flex flex-wrap gap-x-3 gap-y-1 text-sm">
             {imagePullSecrets.map((secret: any) => (
-              <span
-                key={secret.name}
-                className="badge bg-theme-elevated text-theme-text-secondary"
-              >
-                {secret.name}
-              </span>
+              <ResourceLink key={secret.name} name={secret.name} kind="secrets" namespace={metadata.namespace} onNavigate={onNavigate} />
             ))}
           </div>
         </Section>
@@ -175,6 +171,15 @@ export function ServiceAccountRenderer({
   )
 }
 
+// secrets[] entries are ObjectReferences, which the API server stores without
+// checking that they name a Secret in this namespace. Link only those that do.
+function namesLocalSecret(ref: { name?: string; namespace?: string; kind?: string; apiVersion?: string }, namespace: string): boolean {
+  return !!ref.name
+    && (!ref.namespace || ref.namespace === namespace)
+    && (!ref.kind || ref.kind === 'Secret')
+    && (!ref.apiVersion || !ref.apiVersion.includes('/'))
+}
+
 // ---------------------------------------------------------------------------
 // RBAC sections — pulled out so the main renderer body stays readable.
 // ---------------------------------------------------------------------------

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

@@ -0,0 +1,61 @@
+import { useState } from 'react'
+import type { ResourceRef } from '../../../types'
+import { Badge } from '../../ui/Badge'
+import { healthToSeverity } from '../../../utils/badge-colors'
+import { Section, Property, PropertyList, ResourceLink, ConditionsSection, AlertBanner, useOperationalIssuesShown } from '../../ui/drawer-components'
+import { getStrimziConnectorStatus } from '../resource-utils-strimzi'
+
+export function StrimziConnectorRenderer({ data, onNavigate }: { data: any; onNavigate?: (ref: ResourceRef) => void }) {
+  const [showAll, setShowAll] = useState(false)
+  const state = getStrimziConnectorStatus(data)
+  const operationalIssuesShown = useOperationalIssuesShown()
+  const spec = data.spec ?? {}
+  const status = data.status ?? {}
+  const runtime = status.connectorStatus ?? {}
+  const conditions = Array.isArray(status.conditions) ? status.conditions
+    .filter((condition: any) => typeof condition?.type === 'string' && typeof condition?.status === 'string')
+    .map((condition: any) => ({ type: condition.type, status: condition.status, message: typeof condition.message === 'string' && condition.message.trim() ? 'Strimzi condition message withheld; inspect status.conditions in YAML.' : undefined, reason: typeof condition.reason === 'string' ? condition.reason : undefined, lastTransitionTime: typeof condition.lastTransitionTime === 'string' ? condition.lastTransitionTime : undefined })) : []
+  const tasks: any[] = Array.isArray(runtime.tasks) ? [...runtime.tasks].sort((a, b) => (a?.state === 'FAILED' ? 0 : a?.state === 'RUNNING' ? 2 : 1) - (b?.state === 'FAILED' ? 0 : b?.state === 'RUNNING' ? 2 : 1)) : []
+  const cluster = data.metadata?.labels?.['strimzi.io/cluster']
+  const historical = !state.snapshotCurrent
+  return <>
+    <Section title="Connector" defaultExpanded>
+      <PropertyList>
+        <Property label="Operator snapshot" value={<Badge severity={healthToSeverity(state.level)}>{state.text}</Badge>} />
+        <Property label="KafkaConnect" value={cluster ? <ResourceLink kind="KafkaConnect" group="kafka.strimzi.io" name={cluster} namespace={data.metadata?.namespace} onNavigate={onNavigate} /> : 'Not specified'} />
+        <Property label="Connector class" value={<span className="break-all">{spec.class ?? 'Not specified'}</span>} />
+        <Property label="Desired state" value={spec.state ?? (data.apiVersion === 'kafka.strimzi.io/v1beta2' && spec.pause === true ? 'paused (spec.pause)' : 'running (default)')} />
+        <Property label="Maximum tasks" value={spec.tasksMax ?? 'Not specified'} />
+      </PropertyList>
+      {!operationalIssuesShown && state.level === 'degraded' && <AlertBanner variant="warning" title={state.text} message="Strimzi reports a failure in this operator snapshot. Inspect task states, condition details in YAML, and worker logs." />}
+    </Section>
+    <Section title="Reported Runtime" defaultExpanded>
+      <p className="mb-3 text-xs text-theme-text-secondary">{historical ? 'Historical or unassessed status. These observations do not establish current runtime health.' : 'Strimzi operator snapshot, not a live runtime check. Runtime state may have changed since reconciliation.'}</p>
+      <PropertyList>
+        <Property label="Connector state" value={typeof runtime.connector?.state === 'string' ? runtime.connector.state : 'Not reported'} />
+        <Property label="Worker" value={<span className="break-all">{typeof runtime.connector?.worker_id === 'string' ? runtime.connector.worker_id : 'Not reported'}</span>} />
+        <Property label="Observed / desired generation" value={`${status.observedGeneration ?? 'Unknown'} / ${data.metadata?.generation ?? 'Unknown'}`} />
+      </PropertyList>
+      <h4 className="mt-4 mb-2 text-sm font-medium">Reported tasks ({tasks.length})</h4>
+      {tasks.length === 0 ? <p className="text-sm text-theme-text-secondary">No task states reported. This does not establish that tasks are running.</p> : <>
+        <div className="overflow-x-auto"><table className="w-full text-left text-sm"><thead><tr className="text-theme-text-secondary"><th className="pr-3 pb-2">Task</th><th className="pr-3 pb-2">State</th><th className="pb-2">Worker</th></tr></thead><tbody>
+          {(showAll ? tasks.slice(0, 100) : tasks.slice(0, 5)).map((task, index) => <tr key={index} className="border-t border-theme-border"><td className="py-2 pr-3">{Number.isInteger(task?.id) && task.id >= 0 ? task.id : 'Unknown'}</td><td className="py-2 pr-3">{typeof task?.state === 'string' ? task.state : 'Not reported'}</td><td className="py-2 break-all">{typeof task?.worker_id === 'string' ? task.worker_id : 'Not reported'}</td></tr>)}
+        </tbody></table></div>
+        {tasks.length > 5 && <button type="button" className="mt-2 text-sm text-accent-text hover:underline" onClick={() => setShowAll(!showAll)}>{showAll ? 'Show fewer tasks' : `Show ${Math.min(tasks.length, 100)} tasks`}</button>}
+        {tasks.length > 100 && <p className="mt-2 text-xs text-theme-text-secondary">Task preview is limited to 100 of {tasks.length}. Inspect YAML for the full reported list.</p>}
+      </>}
+      <p className="mt-3 text-xs text-theme-text-tertiary">For failure details, inspect task traces in YAML and worker logs. Open KafkaConnect and follow its related resources to the worker Pods. A task count below the configured maximum is not itself a failure.</p>
+    </Section>
+    {(spec.autoRestart || status.autoRestart) && <Section title="Automatic Restart" defaultExpanded>
+      <PropertyList>
+        <Property label="Enabled" value={spec.autoRestart?.enabled === undefined ? spec.autoRestart ? 'Yes (default)' : 'Not specified' : spec.autoRestart.enabled ? 'Yes' : 'No'} />
+        {spec.autoRestart?.enabled !== false && <Property label="Maximum restarts" value={spec.autoRestart?.maxRestarts ?? (spec.autoRestart ? 'Unlimited (default)' : 'Not specified')} />}
+        <Property label="Reported restarts" value={status.autoRestart?.count ?? 'Not reported'} />
+        <Property label="Last reported restart" value={status.autoRestart?.lastRestartTimestamp ?? 'Not reported'} />
+      </PropertyList>
+    </Section>}
+    {/* Topic inventory is secondary to identifying the failing task. */}
+    {Array.isArray(status.topics) && status.topics.length > 0 && <Section title={`Reported Topics (${status.topics.length})`} defaultExpanded={false}><p className="break-all text-sm">{status.topics.slice(0, 20).join(', ')}{status.topics.length > 20 && `; ${status.topics.length - 20} more in YAML`}</p></Section>}
+    <ConditionsSection conditions={conditions} getConditionTone={condition => historical ? 'unknown' : condition.type === 'NotReady' && condition.status === 'True' ? 'fail' : condition.type === 'Warning' && condition.status === 'True' ? 'warning' : 'neutral'} />
+  </>
+}

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

@@ -0,0 +1,32 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { describe, expect, it, vi } from 'vitest'
+import { WebhookConfigRenderer } from './WebhookConfigRenderer'
+
+describe('WebhookConfigRenderer backend navigation', () => {
+  for (const isMutating of [false, true]) {
+    it(`navigates the ${isMutating ? 'mutating' : 'validating'} backend in its declared namespace`, async () => {
+      Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+      const container = document.createElement('div')
+      const root = createRoot(container)
+      const onNavigate = vi.fn()
+      try {
+        await act(async () => root.render(<WebhookConfigRenderer isMutating={isMutating} onNavigate={onNavigate} data={{ webhooks: [{ name: 'hook.example.com', failurePolicy: 'Ignore', clientConfig: { service: { namespace: 'backend', name: 'admission', port: 9443, path: '/validate' } } }] }} />))
+        const button = [...container.querySelectorAll('button')].find(button => button.textContent === 'backend/admission')
+        expect(button).toBeDefined()
+        await act(async () => button!.click())
+        expect(onNavigate).toHaveBeenCalledWith({ kind: 'services', namespace: 'backend', name: 'admission' })
+        expect(container.textContent).toContain(':9443/validate')
+        await act(async () => root.render(<WebhookConfigRenderer onNavigate={onNavigate} data={{ webhooks: [{ name: 'external.example.com', clientConfig: { url: 'https://external.example.com/validate' } }] }} />))
+        expect(container.textContent).toContain('URL: https://external.example.com/validate')
+        const labels = [...container.querySelectorAll('button')].map(button => button.textContent)
+        expect(labels).not.toContain('external.example.com')
+        expect(labels).not.toContain('https://external.example.com/validate')
+      } finally {
+        await act(async () => root.unmount())
+        Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: false })
+      }
+    })
+  }
+})

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

@@ -1,10 +1,12 @@
+import type { ResourceRef } from '../../../types'
 import { Shield } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, AlertBanner, LabelSelectorDisplay } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, AlertBanner, LabelSelectorDisplay, ResourceLink } from '../../ui/drawer-components'
 
 interface WebhookConfigRendererProps {
   data: any
   isMutating?: boolean
+  onNavigate?: (ref: ResourceRef) => void
 }
 
 function getOperationColor(op: string): string {
@@ -21,7 +23,7 @@ function getSideEffectsColor(se: string): string {
   return 'status-amber'
 }
 
-export function WebhookConfigRenderer({ data, isMutating }: WebhookConfigRendererProps) {
+export function WebhookConfigRenderer({ data, isMutating, onNavigate }: WebhookConfigRendererProps) {
   const webhooks = data.webhooks || []
   const hasFailPolicy = webhooks.some((w: any) => w.failurePolicy === 'Fail')
   const allIgnore = webhooks.length > 0 && webhooks.every((w: any) => w.failurePolicy === 'Ignore')
@@ -71,7 +73,11 @@ export function WebhookConfigRenderer({ data, isMutating }: WebhookConfigRendere
             return (
               <div key={i} className="card-inner-lg">
                 <div className="text-sm font-medium text-theme-text-primary">{wh.name}</div>
-                <div className="text-xs text-theme-text-secondary mt-0.5">{target}</div>
+                <div className="text-xs text-theme-text-secondary mt-0.5">
+                  {svc?.namespace && svc?.name ? (
+                    <><span>Service: </span><ResourceLink name={svc.name} kind="services" namespace={svc.namespace} label={`${svc.namespace}/${svc.name}`} onNavigate={onNavigate} /><span>{svc.port ? `:${svc.port}` : ''}{svc.path || ''}</span></>
+                  ) : target}
+                </div>
 
                 {/* Policy badges */}
                 <div className="flex flex-wrap gap-1.5 mt-2">