@skyhook-io/k8s-ui 1.19.0 → 1.20.0

package/src/components/resources/renderers/crd-cells.test.tsx

@@ -0,0 +1,30 @@
+// @vitest-environment jsdom
+import { renderToStaticMarkup } from 'react-dom/server'
+import { expect, it } from 'vitest'
+import { CRDVersionsCell } from './crd-cells'
+
+it('sorts served versions, shows two complete tokens and summarizes the rest', () => {
+  const container = document.createElement('div')
+  container.innerHTML = renderToStaticMarkup(<CRDVersionsCell versions={[
+    { name: 'v2alpha1', served: true, deprecated: true }, { name: 'v1beta1', served: true },
+    { name: 'v1', served: true, storage: true }, { name: 'v2', served: true }, { name: 'v3', served: false },
+  ]} />)
+  expect(Array.from(container.querySelectorAll('.font-mono')).map(el => el.textContent)).toEqual(['v2', 'v1'])
+  expect(container.textContent).toBe('v2v1+2')
+  expect(container.querySelector('[class*="overflow-hidden"]')).toBeNull()
+  for (const token of container.querySelectorAll('.font-mono')) {
+    expect(token.parentElement?.classList.contains('shrink-0')).toBe(true)
+    expect(token.parentElement?.classList.contains('whitespace-nowrap')).toBe(true)
+  }
+  container.innerHTML = renderToStaticMarkup(<CRDVersionsCell versions={[
+    { name: 'v1beta2', served: true }, { name: 'v1beta1', served: true, deprecated: true },
+  ]} />)
+  expect(container.textContent).toBe('v1beta2v1beta1deprecated')
+  container.innerHTML = renderToStaticMarkup(<CRDVersionsCell versions={[
+    { name: 'v1beta2', served: true, deprecated: true }, { name: 'v1beta1', served: true, deprecated: true },
+    { name: 'v1alpha1', served: true },
+  ]} />)
+  expect(container.textContent).toBe('v1beta2deprecated+2')
+  container.innerHTML = renderToStaticMarkup(<CRDVersionsCell versions={[]} />)
+  expect(container.textContent).toBe('None served')
+})

package/src/components/resources/renderers/crd-cells.tsx

@@ -0,0 +1,55 @@
+import { Badge } from '../../ui/Badge'
+import { Tooltip } from '../../ui/Tooltip'
+import { compareKubeAwareVersions, type CRDVersion } from '../../../utils/crd-schema'
+
+export function CRDVersionLabel({ version, showStorage = true }: { version: CRDVersion; showStorage?: boolean }) {
+  return <span className="inline-flex shrink-0 items-center gap-1 whitespace-nowrap">
+    <span className="font-mono">{version.name}</span>
+    {showStorage && version.storage && <Tooltip content="Objects are saved in this version; the API server converts them to the others on read">
+      <Badge tone="structural" size="sm">storage</Badge>
+    </Tooltip>}
+    {version.deprecated && <Tooltip content={version.deprecationWarning || 'Requests for this version return a deprecation warning'}>
+      <Badge severity="warning" size="sm">deprecated</Badge>
+    </Tooltip>}
+    {!version.served && <Tooltip content="The API server doesn't serve this version, so clients can't read or write it">
+      <Badge severity="neutral" size="sm">not served</Badge>
+    </Tooltip>}
+  </span>
+}
+
+// Rendered widths (px) measured in the list: a version name character, the
+// deprecated badge with its gap, the gap between tokens, the "+N" count, and the
+// Served Versions column's content width (w-64 less its padding).
+const VERSION_CHAR_PX = 8.5
+const DEPRECATED_BADGE_PX = 80
+const TOKEN_GAP_PX = 8
+const COUNT_PX = 24
+const VERSIONS_CELL_CONTENT_PX = 224
+
+function versionTokenWidth(version: CRDVersion): number {
+  return version.name.length * VERSION_CHAR_PX + (version.deprecated ? DEPRECATED_BADGE_PX : 0)
+}
+
+// One line per row and never a partial version: storage is left to the drawer,
+// and versions that would not fit whole collapse into a count.
+export function CRDVersionsCell({ versions }: { versions: CRDVersion[] }) {
+  const served = versions.filter(v => v.served).sort((a, b) => compareKubeAwareVersions(a.name, b.name))
+  if (served.length === 0) return <span className="text-sm text-theme-text-tertiary">None served</span>
+  let used = 0
+  let shown = 0
+  for (const version of served.slice(0, 2)) {
+    const width = versionTokenWidth(version) + (shown ? TOKEN_GAP_PX : 0)
+    const hiddenAfter = served.length - shown - 1
+    const budget = VERSIONS_CELL_CONTENT_PX - (hiddenAfter > 0 ? COUNT_PX + TOKEN_GAP_PX : 0)
+    if (shown && used + width > budget) break
+    used += width
+    shown++
+  }
+  const rest = served.slice(shown)
+  return <div className="flex items-center gap-2 whitespace-nowrap text-sm text-theme-text-secondary">
+    {served.slice(0, shown).map(v => <CRDVersionLabel key={v.name} version={v} showStorage={false} />)}
+    {rest.length > 0 && <Tooltip wrapperClassName="shrink-0 whitespace-nowrap" content={rest.map(v => [v.name, v.storage && 'storage', v.deprecated && (v.deprecationWarning ? `deprecated: ${v.deprecationWarning}` : 'deprecated')].filter(Boolean).join(' · ')).join('; ')}>
+      <span className="shrink-0 whitespace-nowrap">+{rest.length}</span>
+    </Tooltip>}
+  </div>
+}

package/src/components/resources/renderers/crd-schema-parts.test.tsx

@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, expect, it, vi } from 'vitest'
+import { ParentRulesList, SchemaFacts, SchemaPathText } from './crd-schema-parts'
+import { indexCRDSchema } from '../../../utils/crd-schema'
+
+;(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true
+window.matchMedia = vi.fn().mockReturnValue({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() })
+let root: ReturnType<typeof createRoot>
+let host: HTMLDivElement
+afterEach(() => { act(() => root?.unmount()); host?.remove() })
+function mount(content: React.ReactNode) {
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  act(() => root.render(content))
+}
+it('renders messages before their expressions, including parent and root rules, and discloses grouped rules', () => {
+  const schema = { 'x-kubernetes-validations': [{ rule: 'has(self.spec)', message: 'Spec must exist' }], properties: { spec: {
+    'x-kubernetes-validations': Array.from({ length: 5 }, (_, i) => ({ rule: `self.x > ${i}`, message: `Message ${i}` })), properties: { x: { type: 'integer' } },
+  } } }
+  const node = indexCRDSchema(schema).find(node => node.path.length === 2)!
+  mount(<><SchemaFacts schema={{ 'x-kubernetes-validations': [{ rule: 'self > 0', message: 'Positive value' }, { rule: 'self < 10' }] }} /><ParentRulesList node={node} root={schema} /></>)
+  const own = host.querySelector('.card-inner')!
+  expect(own.firstElementChild?.textContent).toBe('Positive value')
+  expect(own.lastElementChild?.textContent).toBe('self > 0')
+  expect(host.textContent).toContain('5 rules on spec')
+  expect(host.textContent).toContain('1 rule on Document root')
+  const rootGroup = Array.from(host.querySelectorAll('button')).find(b => b.textContent?.includes('1 rule on Document root'))!
+  expect(rootGroup.getAttribute('aria-expanded')).toBe('false')
+  expect(host.textContent).not.toContain('Spec must exist')
+  act(() => rootGroup.click())
+  expect(host.textContent).toContain('Spec must exist')
+  expect(host.textContent).not.toContain('Message 3')
+  const button = Array.from(host.querySelectorAll('button')).find(b => b.textContent === 'Show 2 more')!
+  expect(button.getAttribute('aria-expanded')).toBe('false')
+  act(() => button.click())
+  expect(button.getAttribute('aria-expanded')).toBe('true')
+  expect(host.textContent).toContain('Message 4')
+  for (const card of host.querySelectorAll('.card-inner')) {
+    if (card.children.length === 2) expect(card.firstElementChild?.tagName).toBe('P')
+  }
+})
+it('uses labeled code blocks for long constraints and structured defaults while short scalars remain badges', () => {
+  mount(<SchemaFacts schema={{ default: { x: 1 }, pattern: 'x'.repeat(41), minimum: 0 }} />)
+  expect(Array.from(host.querySelectorAll('pre')).map(p => p.textContent)).toEqual(['{"x":1}', 'x'.repeat(41)])
+  expect(Array.from(host.querySelectorAll('pre')).map(p => p.previousElementSibling?.textContent)).toEqual(['default', 'pattern'])
+  expect(host.querySelector('.badge-sm')?.textContent).toContain('minimum: 0')
+})
+it('highlights only direct case-insensitive substrings of the displayed path', () => {
+  const node = indexCRDSchema({ properties: { ports: { items: { properties: { name: { type: 'string' } } } } } })[1]
+  const both = (query: string) => <><SchemaPathText path={node.path} query={query} part="parent" /><SchemaPathText path={node.path} query={query} part="leaf" /></>
+  mount(both('PORTS[]'))
+  expect(host.querySelector('mark')?.textContent).toBe('ports[]')
+  act(() => root.render(both('nam')))
+  expect(host.querySelector('mark')?.textContent).toBe('nam')
+  act(() => root.render(both('ports[0].name')))
+  expect(host.querySelector('mark')).toBeNull()
+  expect(host.textContent).toBe('ports[].name')
+})

package/src/components/resources/renderers/crd-schema-parts.tsx

@@ -0,0 +1,121 @@
+import { useState, type ReactNode } from 'react'
+import { Search, X } from 'lucide-react'
+import { Badge } from '../../ui/Badge'
+import { Collapse, CollapseChevron, useDisclosure } from '../../ui/Collapse'
+import { Input } from '../../ui/Input'
+import {
+  displaySchemaPath, enclosingRules, schemaCompositions, schemaConstraints, schemaElement, schemaParentPath,
+  type CRDSchema, type EnclosingRules, type SchemaNode, type SchemaPath,
+} from '../../../utils/crd-schema'
+
+export function RequiredMarker() {
+  return <span className="text-xs font-semibold uppercase tracking-wide text-theme-text-secondary">required</span>
+}
+
+export function SchemaFieldFilter({ value, onChange }: { value: string; onChange: (value: string) => void }) {
+  return <div className="relative min-w-0 flex-1">
+    <Search aria-hidden="true" className="pointer-events-none absolute left-2.5 top-2 h-4 w-4 text-theme-text-tertiary" />
+    <Input aria-label="Filter fields" placeholder="Find a field or paste an error path" value={value} onChange={e => onChange(e.target.value)} className="h-8 w-full min-w-0 rounded-md border border-theme-border bg-theme-elevated pl-8 pr-8 text-xs text-theme-text-primary placeholder:text-theme-text-tertiary focus:border-accent focus:outline-none" />
+    {value && <button type="button" aria-label="Clear field filter" onClick={() => onChange('')} className="absolute right-2 top-2 text-theme-text-tertiary hover:text-theme-text-primary"><X className="h-4 w-4" /></button>}
+  </div>
+}
+
+// Renders text[from, to) with the matched range marked and a break opportunity
+// after each `.`, so long paths wrap between segments instead of mid-name.
+function PathPiece({ text, from, to, match }: { text: string; from: number; to: number; match: [number, number] | null }) {
+  const parts: ReactNode[] = []
+  const pushPlain = (start: number, end: number) => {
+    text.slice(start, end).split(/(?<=\.)/).forEach((piece, i, all) => {
+      parts.push(<span key={`${start}-${i}`}>{piece}</span>)
+      if (piece.endsWith('.') && i < all.length - 1) parts.push(<wbr key={`${start}-${i}-w`} />)
+    })
+  }
+  const [ms, me] = match ? [Math.max(match[0], from), Math.min(match[1], to)] : [0, 0]
+  if (!match || ms >= me) { pushPlain(from, to); return <>{parts}</> }
+  pushPlain(from, ms)
+  parts.push(<mark key="m" className="rounded-sm bg-accent-muted text-theme-text-primary">{text.slice(ms, me)}</mark>)
+  pushPlain(me, to)
+  return <>{parts}</>
+}
+
+/** One part of a search hit's path, with the query's match marked across the
+ *  parent/field boundary: the muted parent path, or the field name itself. */
+export function SchemaPathText({ path, query = '', part }: { path: SchemaPath; query?: string; part: 'parent' | 'leaf' }) {
+  const text = displaySchemaPath(path)
+  const parentLength = schemaParentPath(path).length
+  const term = query.trim().toLowerCase()
+  const at = term ? text.toLowerCase().indexOf(term) : -1
+  const match: [number, number] | null = at < 0 ? null : [at, at + term.length]
+  if (part === 'parent') {
+    return parentLength > 0 ? <span className="block font-mono text-xs text-theme-text-tertiary [overflow-wrap:anywhere]"><PathPiece text={text} from={0} to={parentLength} match={match} /></span> : null
+  }
+  return <PathPiece text={text} from={parentLength} to={text.length} match={match} />
+}
+
+export function SchemaRules({ rules }: { rules: NonNullable<CRDSchema['x-kubernetes-validations']> }) {
+  return <>{rules.map((validation, i) => <div key={i} className="card-inner space-y-1">
+    {validation.message && <p className="text-sm text-theme-text-secondary">{validation.message}</p>}
+    <div className={`whitespace-pre-wrap break-words font-mono text-xs ${validation.message ? 'text-theme-text-tertiary' : 'text-theme-text-secondary'}`}>{validation.rule}</div>
+  </div>)}</>
+}
+
+function ConstraintDisplay({ label, value, block }: { label: string; value: string; block: boolean }) {
+  return block ? <div className="min-w-0 w-full space-y-1">
+    <p className="text-xs text-theme-text-secondary">{label}</p>
+    <pre className="max-h-60 overflow-auto whitespace-pre-wrap break-words rounded bg-theme-elevated p-3 font-mono text-xs text-theme-text-secondary">{value}</pre>
+  </div> : <Badge tone="structural" size="sm">{label}: {value}</Badge>
+}
+
+export function SchemaFacts({ schema, elementOf, parentDescription, showDescription = true }: { schema: CRDSchema; elementOf?: string; parentDescription?: string; showDescription?: boolean }) {
+  const element = schemaElement(schema)
+  const prefix = elementOf ? `${elementOf} ` : ''
+  return <>
+    {showDescription && schema.description && schema.description !== parentDescription && <p className="whitespace-pre-wrap">{elementOf ? `Each entry (${elementOf}): ${schema.description}` : schema.description}</p>}
+    <div className="flex flex-wrap gap-1">{schemaConstraints(schema).map(fact => <ConstraintDisplay key={fact.label} label={`${prefix}${fact.label}`} value={fact.value} block={fact.value.length > 40 || (fact.label === 'default' && schema.default !== null && typeof schema.default === 'object')} />)}</div>
+    {schema['x-kubernetes-embedded-resource'] && <p>{elementOf ? 'Each entry is' : 'Holds'} a Kubernetes object: apiVersion, kind and metadata are implied.</p>}
+    {schema['x-kubernetes-preserve-unknown-fields'] && <p>{elementOf ? 'Each entry accepts' : 'Accepts'} fields not declared in this schema.</p>}
+    {schema['x-kubernetes-int-or-string'] && <p>{elementOf ? 'Each entry is' : 'Accepts'} an integer or a string.</p>}
+    <SchemaRules rules={schema['x-kubernetes-validations'] ?? []} />
+    {schemaCompositions(schema).map(composition => <div key={composition.label}>
+      <span>{prefix}{composition.label}: </span><code className="break-words whitespace-pre-wrap">{composition.value}</code>
+    </div>)}
+    {element && <SchemaFacts schema={element.schema} elementOf={`${prefix}${element.label}`} parentDescription={schema.description ?? parentDescription} />}
+  </>
+}
+
+function ParentRuleGroup({ group, defaultOpen }: { group: EnclosingRules; defaultOpen: boolean }) {
+  const [groupOpen, setGroupOpen] = useState(defaultOpen)
+  const [moreOpen, setMoreOpen] = useState(false)
+  const groupDisclosure = useDisclosure(groupOpen)
+  const moreDisclosure = useDisclosure(moreOpen)
+  const count = group.validations.length + group.compositions.length
+  const rules = [
+    ...group.validations.map((rule, i) => <SchemaRules key={`v${i}`} rules={[rule]} />),
+    ...group.compositions.map(composition => <div key={composition.label}><span>{composition.label}: </span><code className="whitespace-pre-wrap break-words">{composition.value}</code></div>),
+  ]
+  return <div className="space-y-1">
+    <button type="button" {...groupDisclosure.buttonProps} onClick={() => setGroupOpen(v => !v)} className="flex items-start gap-1 text-left text-xs text-theme-text-tertiary hover:text-theme-text-secondary">
+      <CollapseChevron open={groupOpen} className="mt-0.5 h-3 w-3 shrink-0" />
+      <span className="break-words">{count} {count === 1 ? 'rule' : 'rules'} on <span className="font-mono">{group.path || 'Document root'}</span></span>
+    </button>
+    <Collapse open={groupOpen} id={groupDisclosure.panelId} mountLazily>
+      <div className="space-y-1">
+        {rules.slice(0, 3)}
+        {count > 3 && <>
+          <button type="button" {...moreDisclosure.buttonProps} onClick={() => setMoreOpen(v => !v)} className="text-xs text-accent">{moreOpen ? 'Show fewer' : `Show ${count - 3} more`}</button>
+          <Collapse open={moreOpen} id={moreDisclosure.panelId} mountLazily><div className="space-y-1">{rules.slice(3)}</div></Collapse>
+        </>}
+      </div>
+    </Collapse>
+  </div>
+}
+
+// The nearest parent's rules are the likeliest to concern the field; farther
+// groups start collapsed to their path and count.
+export function ParentRulesList({ node, root }: { node: SchemaNode; root: CRDSchema }) {
+  const groups = enclosingRules(node, root)
+  return groups.length ? <div className="space-y-2">
+    <p className="text-xs font-medium text-theme-text-tertiary">Rules on parent fields</p>
+    {groups.map((group, i) => <ParentRuleGroup key={group.path} group={group} defaultOpen={i === 0} />)}
+  </div> : null
+}

package/src/components/resources/renderers/index.ts

@@ -195,3 +195,9 @@ export { RayJobRenderer } from './RayJobRenderer'
 
 export { OpenTelemetryCollectorRenderer, OpenTelemetryInstrumentationRenderer } from './OpenTelemetryRenderers'
 export { FlaggerCanaryRenderer, FlaggerMetricTemplateRenderer } from './FlaggerRenderers'
+
+export { StrimziConnectorRenderer } from './StrimziConnectorRenderer'
+
+export { CustomResourceDefinitionRenderer } from './CustomResourceDefinitionRenderer'
+
+export { CRDSchemaBrowser, type CRDSchemaBrowserProps } from './CRDSchemaBrowser'

package/src/components/resources/renderers/kueue-cells.tsx

@@ -6,6 +6,7 @@ import {
   getClusterQueueCohort,
   getClusterQueuePendingWorkloads,
   getClusterQueueAdmittedWorkloads,
+  getKueueQueueReservingWorkloads,
   getClusterQueueFlavors,
   getLocalQueueStatus,
   getLocalQueueClusterQueue,
@@ -42,6 +43,8 @@ export function ClusterQueueCell({ resource, column }: { resource: any; column:
       const pending = getClusterQueuePendingWorkloads(resource)
       return <span className="text-sm text-theme-text-secondary">{pending}</span>
     }
+    case 'reservingWorkloads':
+      return <span className="text-sm text-theme-text-secondary">{getKueueQueueReservingWorkloads(resource)}</span>
     case 'admittedWorkloads': {
       const admitted = getClusterQueueAdmittedWorkloads(resource)
       return <span className="text-sm text-theme-text-secondary">{admitted}</span>
@@ -73,6 +76,8 @@ export function LocalQueueCell({ resource, column }: { resource: any; column: st
       const pending = getLocalQueuePendingWorkloads(resource)
       return <span className="text-sm text-theme-text-secondary">{pending}</span>
     }
+    case 'reservingWorkloads':
+      return <span className="text-sm text-theme-text-secondary">{getKueueQueueReservingWorkloads(resource)}</span>
     case 'admittedWorkloads': {
       const admitted = getLocalQueueAdmittedWorkloads(resource)
       return <span className="text-sm text-theme-text-secondary">{admitted}</span>

package/src/components/resources/resource-utils-argo.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { getArgoApplicationStatus, isArgoOperationInProgress } from './resource-utils-argo'
+import { argoComparedRevisionCurrent, argoResumeSettings, getArgoApplicationStatus, isArgoAutoSyncEnabled, isArgoAutoSyncSwitchedOff, isArgoOperationInProgress } from './resource-utils-argo'
 
 describe('getArgoApplicationStatus', () => {
   // A Suspended Argo app is intentionally paused — neutral (sky), matching the
@@ -21,6 +21,16 @@ describe('getArgoApplicationStatus', () => {
     expect(badge.level).toBe('unhealthy')
   })
 
+  // Radar's annotations plus automation switched off in place still read as
+  // suspended; the same annotations on an app that auto-syncs again do not.
+  it('treats a Radar-suspended app with automated.enabled=false as suspended', () => {
+    const annotations = { 'radarhq.io/suspended-prune': 'true' }
+    const off = { metadata: { annotations }, spec: { syncPolicy: { automated: { enabled: false } } }, status: {} }
+    const on = { metadata: { annotations }, spec: { syncPolicy: { automated: { prune: true } } }, status: {} }
+    expect(getArgoApplicationStatus(off).text).toBe('Suspended')
+    expect(getArgoApplicationStatus(on).text).not.toBe('Suspended')
+  })
+
   it('surfaces an operation being terminated', () => {
     const badge = getArgoApplicationStatus({ status: { operationState: { phase: 'Terminating' } } })
     expect(badge.level).toBe('degraded')
@@ -38,3 +48,86 @@ describe('isArgoOperationInProgress', () => {
     expect(isArgoOperationInProgress(app)).toBe(expected)
   })
 })
+
+// Mirrors gitops.ArgoAutoSyncEnabled and Argo's SyncPolicy.IsAutomatedSyncEnabled:
+// Argo CD 3.x keeps the automated block (and its prune/selfHeal) when
+// automation is switched off with enabled: false.
+describe('isArgoAutoSyncEnabled', () => {
+  const app = (syncPolicy: unknown) => ({ spec: { syncPolicy } })
+  it.each([
+    ['no sync policy', undefined, false],
+    ['no automated block', {}, false],
+    ['automated: null', { automated: null }, false],
+    ['empty automated block', { automated: {} }, true],
+    ['automated with prune/selfHeal', { automated: { prune: true, selfHeal: true } }, true],
+    ['enabled: true', { automated: { enabled: true } }, true],
+    ['enabled: false', { automated: { enabled: false, prune: true, selfHeal: true } }, false],
+  ])('%s', (_label, syncPolicy, expected) => {
+    expect(isArgoAutoSyncEnabled(app(syncPolicy))).toBe(expected)
+  })
+
+  it('tolerates a missing resource', () => {
+    expect(isArgoAutoSyncEnabled(undefined)).toBe(false)
+  })
+})
+
+describe('isArgoAutoSyncSwitchedOff', () => {
+  const app = (syncPolicy: unknown) => ({ spec: { syncPolicy } })
+  // Only an automated block kept with enabled: false; a Manual app has none.
+  it.each([
+    ['no automated block', {}, false],
+    ['automated: null', { automated: null }, false],
+    ['automated on', { automated: { prune: true } }, false],
+    ['enabled: true', { automated: { enabled: true } }, false],
+    ['enabled: false', { automated: { enabled: false, prune: true } }, true],
+  ])('%s', (_label, syncPolicy, expected) => {
+    expect(isArgoAutoSyncSwitchedOff(app(syncPolicy))).toBe(expected)
+  })
+
+  it('tolerates a missing resource', () => {
+    expect(isArgoAutoSyncSwitchedOff(undefined)).toBe(false)
+  })
+})
+
+describe('argoResumeSettings', () => {
+  const app = (syncPolicy: unknown) => ({ spec: { syncPolicy } })
+  it('keeps a block switched off in place, whatever the Radar', () => {
+    expect(argoResumeSettings(app({ automated: { enabled: false, prune: true } }), undefined)).toEqual({ prune: true, selfHeal: false })
+  })
+  it.each([
+    ['a Radar starting both off', true, true, { prune: false, selfHeal: false }],
+    ['a Radar starting only prune off', true, false, { prune: false, selfHeal: true }],
+    ['a host that passes no self-heal answer', true, undefined, { prune: false, selfHeal: true }],
+    ['an older Radar', false, false, { prune: true, selfHeal: true }],
+    ['an unknown Radar', undefined, undefined, null],
+  ])('without a block, follows %s', (_label, serverStartsPruneOff, serverStartsSelfHealOff, expected) => {
+    expect(argoResumeSettings(app({}), serverStartsPruneOff, serverStartsSelfHealOff)).toEqual(expected)
+  })
+})
+
+// Mirrors the backend's pin rule (pkg/gitops argoSyncOperation), so the sync
+// dialog names the compared revision only when a sync will use it.
+describe('argoComparedRevisionCurrent', () => {
+  const source = { repoURL: 'https://example.com/repo', path: 'app', targetRevision: 'main' }
+  const values = { repoURL: 'https://example.com/values', ref: 'values', targetRevision: 'main' }
+  const single = (sync: any, spec: any = { source }) => ({ spec, status: { sync } })
+
+  it('is current when the comparison was for the same source, whatever its key order', () => {
+    expect(argoComparedRevisionCurrent(single({ revision: 'sha', comparedTo: { source: { targetRevision: 'main', path: 'app', repoURL: 'https://example.com/repo' } } }))).toBe(true)
+  })
+  it('is not current after the source changed, or without a compared revision', () => {
+    expect(argoComparedRevisionCurrent(single({ revision: 'sha', comparedTo: { source: { ...source, targetRevision: 'release' } } }))).toBe(false)
+    expect(argoComparedRevisionCurrent(single({ comparedTo: { source } }))).toBe(false)
+    expect(argoComparedRevisionCurrent(single(undefined))).toBe(false)
+  })
+  it('needs every source compared, one revision each, for a multi-source Application', () => {
+    const spec = { sources: [source, values] }
+    expect(argoComparedRevisionCurrent(single({ revisions: ['a', 'b'], comparedTo: { sources: [source, values] } }, spec))).toBe(true)
+    expect(argoComparedRevisionCurrent(single({ revisions: ['a'], comparedTo: { sources: [source, values] } }, spec))).toBe(false)
+    expect(argoComparedRevisionCurrent(single({ revisions: ['a', 'b'], comparedTo: { sources: [values, source] } }, spec))).toBe(false)
+  })
+  it('is never current for a hydrated Application', () => {
+    const spec = { sourceHydrator: { drySource: source, syncSource: { targetBranch: 'env/prod', path: 'out' } }, source }
+    expect(argoComparedRevisionCurrent(single({ revision: 'sha', comparedTo: { source } }, spec))).toBe(false)
+  })
+})

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

@@ -12,16 +12,15 @@ export function getArgoApplicationStatus(app: any): StatusBadge {
   const sync = app.status?.sync?.status
   const opPhase = app.status?.operationState?.phase
 
-  // Check for suspended (no automated sync policy). Honor both the current
+  // Check for suspended (auto-sync off). Honor both the current
   // "radarhq.io/suspended-prune" annotation and the legacy "skyhook.io/..."
   // key still present on Applications suspended by older Radar builds.
   // The annotation value stores the prior prune state as "true"/"false" for
   // restore on resume — both strings are truthy in JS, which is intentional:
   // the *presence* of the annotation is what signals suspended, not its value.
-  const hasAutomatedSync = !!app.spec?.syncPolicy?.automated
   const annotations = app.metadata?.annotations
   const suspendedByRadar = annotations?.['radarhq.io/suspended-prune'] || annotations?.['skyhook.io/suspended-prune']
-  if (health === 'Suspended' || (!hasAutomatedSync && suspendedByRadar)) {
+  if (health === 'Suspended' || (!isArgoAutoSyncEnabled(app) && suspendedByRadar)) {
     // Suspended = an operator deliberately paused this app — intentional, not a
     // degradation. Neutral (sky), matching the backend rollup (mapArgoHealth) so a
     // suspended app reads the same Idle tone in Applications, the resource table,
@@ -64,14 +63,94 @@ export function getArgoApplicationStatus(app: any): StatusBadge {
   return { text: health || sync || 'Unknown', color: healthColors.unknown, level: 'unknown' }
 }
 
+// isArgoAutoSyncEnabled reports whether an Argo CD Application auto-syncs.
+// Argo CD 3.x can keep spec.syncPolicy.automated, with its prune and selfHeal
+// settings, while switching automation off with `enabled: false`, so the block
+// being present is not enough: only an absent or true `enabled` counts. Same
+// rule as Argo's SyncPolicy.IsAutomatedSyncEnabled and the backend's
+// gitops.ArgoAutoSyncEnabled, so the UI and the rollback gate agree.
+export function isArgoAutoSyncEnabled(app: any): boolean {
+  const automated = app?.spec?.syncPolicy?.automated
+  if (automated == null || typeof automated !== 'object') return false
+  return automated.enabled !== false
+}
+
+// isArgoAutoSyncSwitchedOff reports an automated block kept with
+// `enabled: false`. Only a Radar advertising `argoRollbackSync` turns such an
+// app's auto-sync back on; an older one's resume leaves `enabled: false` set.
+export function isArgoAutoSyncSwitchedOff(app: any): boolean {
+  const automated = app?.spec?.syncPolicy?.automated
+  return automated != null && typeof automated === 'object' && automated.enabled === false
+}
+
+// argoResumeSettings says what Enable auto-sync turns on for an Application
+// Radar didn't suspend. A block switched off in place keeps its own prune and
+// selfHeal. Without a block it depends on the Radar serving the request: one
+// advertising argoSyncInheritance starts prune off, and one advertising
+// argoEnableSelfHealOff starts selfHeal off; an older one turns each on. Null
+// while either isn't known.
+export function argoResumeSettings(app: any, serverStartsPruneOff: boolean | undefined, serverStartsSelfHealOff?: boolean): { prune: boolean; selfHeal: boolean } | null {
+  const automated = app?.spec?.syncPolicy?.automated
+  if (automated != null && typeof automated === 'object') {
+    return { prune: automated.prune === true, selfHeal: automated.selfHeal === true }
+  }
+  if (serverStartsPruneOff === undefined) return null
+  return { prune: !serverStartsPruneOff, selfHeal: !serverStartsSelfHealOff }
+}
+
+// isArgoHydrated: spec.sourceHydrator sets the Application's source, taking
+// precedence over spec.source and spec.sources.
+function isArgoHydrated(app: any): boolean {
+  return app?.spec?.sourceHydrator != null
+}
+
+// isArgoMultiSource: the Application syncs several sources, so a single
+// revision override doesn't apply. Leftover spec.sources beside a hydrator don't count.
+export function isArgoMultiSource(app: any): boolean {
+  return !isArgoHydrated(app) && Array.isArray(app?.spec?.sources) && app.spec.sources.length > 0
+}
+
+// argoComparedRevisionCurrent mirrors the rule a Radar advertising
+// argoSyncInheritance applies to a sync without a revision: it uses the last
+// compared revision(s) only when the comparison was for the Application's
+// current source(s), one revision per source. Hydrated Applications are
+// never pinned.
+export function argoComparedRevisionCurrent(app: any): boolean {
+  if (isArgoHydrated(app)) return false
+  const sync = app?.status?.sync
+  if (isArgoMultiSource(app)) {
+    const sources = app.spec.sources
+    return Array.isArray(sync?.revisions) && sync.revisions.length === sources.length && jsonEqual(sources, sync?.comparedTo?.sources)
+  }
+  const source = app?.spec?.source
+  return !!source && Object.keys(source).length > 0 && !!sync?.revision && jsonEqual(source, sync?.comparedTo?.source)
+}
+
+function jsonEqual(a: unknown, b: unknown): boolean {
+  if (a === b) return true
+  if (Array.isArray(a)) return Array.isArray(b) && a.length === b.length && a.every((item, i) => jsonEqual(item, b[i]))
+  if (a && b && typeof a === 'object' && typeof b === 'object' && !Array.isArray(b)) {
+    const aKeys = Object.keys(a)
+    return aKeys.length === Object.keys(b).length && aKeys.every((key) => jsonEqual((a as any)[key], (b as any)[key]))
+  }
+  return false
+}
+
+// argoApplicationSyncOptions returns spec.syncPolicy.syncOptions: the options
+// Argo CD applies to every sync of the Application unless a sync names its own.
+export function argoApplicationSyncOptions(app: any): string[] {
+  const options = app?.spec?.syncPolicy?.syncOptions
+  return Array.isArray(options) ? options.filter((option): option is string => typeof option === 'string') : []
+}
+
 export function isArgoOperationInProgress(app: any): boolean {
   const phase = app?.status?.operationState?.phase
   return app?.operation != null || phase === 'Running' || phase === 'Terminating'
 }
 
 // Radar suspends an Argo Application by clearing spec.syncPolicy.automated and
-// recording the prior prune/selfHeal flags in annotations so Resume can restore
-// them. The *presence* of any of these annotations marks the app as suspended —
+// recording the prior block in annotations (the whole block, plus the
+// prune/selfHeal flags older builds read) so Resume can restore it. The *presence* of any of these annotations marks the app as suspended —
 // independent of health.status, which stays whatever the app's resources report
 // (often Missing/OutOfSync, never literally "Suspended"). Both the current
 // radarhq.io keys and the legacy skyhook.io keys (still on apps suspended by

package/src/components/resources/resource-utils-crd.test.ts

@@ -0,0 +1,32 @@
+import { expect, it } from 'vitest'
+import { getCRDStatus, getCRDColumnValue } from './resource-utils-crd'
+import { getCellFilterValue } from './resource-utils'
+import { getGenericResourceStatus } from './generic-status'
+import { getResourceStatus } from '../shared/ResourceRendererDispatch'
+
+it.each([
+  [{ type: 'Established', status: 'True' }, 'Established', 'healthy'],
+  [{ type: 'Established', status: 'False', message: 'waiting' }, 'Not established', 'unhealthy'],
+  [{ type: 'NamesAccepted', status: 'False', reason: 'Conflict', message: 'name taken' }, 'Conflict', 'unhealthy'],
+  [{ type: 'Terminating', status: 'True' }, 'Terminating', 'degraded'],
+  [{ type: 'Established', status: 'Unknown' }, 'Unknown', 'unknown'],
+  [undefined, 'Unknown', 'unknown'],
+])('shares CRD condition classification: %j', (condition, text, tone) => {
+  const data = { kind: 'CustomResourceDefinition', apiVersion: 'apiextensions.k8s.io/v1', status: { conditions: condition ? [condition] : [] } }
+  expect(getCRDStatus(data)).toMatchObject({ text, tone })
+  expect(getGenericResourceStatus(data)).toEqual(getCRDStatus(data))
+  expect(getResourceStatus('customresourcedefinitions', data)?.text).toBe(text)
+})
+it('prioritizes termination and rejected names over establishment', () => {
+  const status = { conditions: [{ type: 'Established', status: 'True' }, { type: 'NamesAccepted', status: 'False' }] }
+  expect(getCRDStatus({ status }).tone).toBe('unhealthy')
+  expect(getCRDStatus({ metadata: { deletionTimestamp: 'now' }, status }).text).toBe('Terminating')
+})
+
+it('filters the CRD list by the declared kind and served versions, not the CRD object itself', () => {
+  const crd = { apiVersion: 'apiextensions.k8s.io/v1', kind: 'CustomResourceDefinition', spec: { scope: 'Cluster', names: { kind: 'Widget' }, versions: [{ name: 'v1', served: true }, { name: 'v2', served: false }] } }
+  expect(getCellFilterValue(crd, 'kind', 'customresourcedefinitions')).toBe('Widget')
+  expect(getCellFilterValue(crd, 'versions', 'customresourcedefinitions')).toBe('v1')
+  expect(getCellFilterValue(crd, 'scope', 'customresourcedefinitions')).toBe('Cluster')
+  expect(getCRDColumnValue({ ...crd, apiVersion: 'other.example.io/v1' }, 'kind')).toBeUndefined()
+})

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

@@ -0,0 +1,26 @@
+import type { GenericStatus } from './generic-status'
+import { isApiGroup } from './resource-utils-cnpg'
+
+export function getCRDStatus(data: any): GenericStatus {
+  const conditions: any[] = data.status?.conditions || []
+  const terminating = conditions.find(c => c.type === 'Terminating' && c.status === 'True')
+  if (data.metadata?.deletionTimestamp || terminating) return { text: 'Terminating', tone: 'degraded', reason: terminating?.message }
+  for (const [type, fallback] of [['NamesAccepted', 'Names not accepted'], ['Established', 'Not established']]) {
+    const condition = conditions.find(c => c.type === type && c.status === 'False')
+    if (condition) return { text: condition.reason || fallback, tone: 'unhealthy', reason: condition.message }
+  }
+  return conditions.some(c => c.type === 'Established' && c.status === 'True')
+    ? { text: 'Established', tone: 'healthy' }
+    : { text: 'Unknown', tone: 'unknown' }
+}
+
+export function getCRDColumnValue(data: any, column: string): string | undefined {
+  if (data?.kind !== 'CustomResourceDefinition' || !isApiGroup(data.apiVersion, 'apiextensions.k8s.io')) return undefined
+  switch (column) {
+    case 'kind': return data.spec?.names?.kind ?? ''
+    case 'scope': return data.spec?.scope ?? ''
+    case 'versions': return (data.spec?.versions ?? []).filter((v: any) => v?.served).map((v: any) => v.name).join(', ')
+    case 'status': return getCRDStatus(data).text
+    default: return undefined
+  }
+}

package/src/components/resources/resource-utils-gpu-ecosystem.test.ts

@@ -1,3 +1,5 @@
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
 import { describe, expect, it } from 'vitest'
 import {
   getClusterQueueCohort,
@@ -335,3 +337,13 @@ describe('JobSet status evidence boundaries', () => {
     expect(getJobSetStatus({ spec: { suspend: true }, status: { conditions } }).text).toBe('Suspended')
   })
 })
+
+// The topology node (pkg/topology) and Go's lifecycle read the same vectors.
+describe('JobSet status shared lifecycle vectors', () => {
+  const vectors = JSON.parse(readFileSync(fileURLToPath(new URL('../../../../../pkg/jobset/testdata/lifecycle.json', import.meta.url)), 'utf8')) as {
+    cases: { name: string; jobSet: unknown; label: string; level: string }[]
+  }
+  it.each(vectors.cases.map((c) => [c.name, c] as const))('%s', (_name, c) => {
+    expect(getJobSetStatus(c.jobSet)).toMatchObject({ text: c.label, level: c.level })
+  })
+})