@skyhook-io/k8s-ui 1.19.0 → 1.20.0

package/src/components/resources/ResourcesView.tsx

@@ -1,3 +1,6 @@
+import { CRDVersionsCell } from './renderers/crd-cells'
+import { getCRDColumnValue } from './resource-utils-crd'
+import { getStrimziConnectorColumnValue } from './resource-utils-strimzi'
 import { getOpenTelemetryColumnValue } from './resource-utils-opentelemetry'
 import { getFlaggerColumnValue } from './resource-utils-flagger'
 import type { ResourceCoverage } from '../../types/resource-coverage'
@@ -369,6 +372,7 @@ function phonePinnedLeft(compareMode: boolean | undefined, showCheckbox: boolean
 // Built-in sortable keys. Hoisted so getColumnMinWidth can reserve room for the
 // sort icon without the header render and the width math drifting apart.
 const BUILTIN_SORTABLE_COLUMN_KEYS = new Set([
+  'connectCluster', 'connectorClass', 'connectorTasks',
   'name', 'namespace', 'age', 'status', 'ready', 'restarts', 'type', 'version',
   'desired', 'available', 'upToDate', 'lastSeen', 'count', 'reason', 'object',
   'cpu', 'memory', 'containers',
@@ -579,6 +583,15 @@ const DEFAULT_COLUMNS: Column[] = [
 ]
 
 const KNOWN_COLUMNS: Record<string, Column[]> = {
+  kafkaconnectors: [
+    { key: 'name', label: 'Name', width: 'min-w-40' },
+    { key: 'namespace', label: 'Namespace', width: 'w-40 shrink-0' },
+    { key: 'status', label: 'Operator Snapshot', width: 'w-44 shrink-0', tooltip: 'Operator-reported connector and task state, not a live runtime check.' },
+    { key: 'connectCluster', label: 'KafkaConnect', width: 'min-w-32' },
+    { key: 'connectorClass', label: 'Class', width: 'min-w-48' },
+    { key: 'connectorTasks', label: 'Tasks / Max', width: 'w-28 shrink-0', tooltip: 'Reported tasks / configured maximum. A smaller count is not itself a failure.' },
+    { key: 'age', label: 'Age', width: 'w-24 shrink-0' },
+  ],
   opentelemetrycollectors: [
     { key: 'name', label: 'Name', width: 'min-w-40' },
     { key: 'namespace', label: 'Namespace', width: 'w-40 shrink-0' },
@@ -1009,6 +1022,7 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
     { key: 'status', label: 'Status', width: 'w-24' },
     { key: 'cohort', label: 'Cohort', width: 'w-32', tooltip: 'Queues in this cohort can share unused quota, subject to borrowing and lending limits' },
     { key: 'pendingWorkloads', label: 'Pending', width: 'w-24', tooltip: 'Workloads in this ClusterQueue waiting for admission, across namespaces; inspect workload status for the blocker' },
+    { key: 'reservingWorkloads', label: 'Reserving', width: 'w-24', tooltip: 'Workloads holding a quota reservation in this ClusterQueue, admitted ones included, so it is not added to Admitted' },
     { key: 'admittedWorkloads', label: 'Admitted', width: 'w-24', tooltip: 'Unfinished workloads admitted through this ClusterQueue, across namespaces; admission does not mean their pods are running' },
     { key: 'flavors', label: 'Flavors', width: 'w-40' },
     { key: 'age', label: 'Age', width: 'w-24' },
@@ -1019,6 +1033,7 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
     { key: 'status', label: 'Status', width: 'w-24' },
     { key: 'clusterQueue', label: 'Cluster Queue', width: 'w-40' },
     { key: 'pendingWorkloads', label: 'Pending', width: 'w-24', tooltip: 'Workloads submitted to this LocalQueue that are waiting for ClusterQueue admission' },
+    { key: 'reservingWorkloads', label: 'Reserving', width: 'w-24', tooltip: 'Workloads from this LocalQueue holding a quota reservation, admitted ones included, so it is not added to Admitted' },
     { key: 'admittedWorkloads', label: 'Admitted', width: 'w-24', tooltip: 'Unfinished workloads from this LocalQueue admitted to its ClusterQueue; their pods may still be waiting to run' },
     { key: 'age', label: 'Age', width: 'w-24' },
   ],
@@ -1717,6 +1732,14 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
     { key: 'renewTime', label: 'Last Renewed', width: 'w-32', tooltip: 'Time since the recorded renewal; red means it exceeds leaseDurationSeconds. Check holder health and API connectivity' },
     { key: 'age', label: 'Age', width: 'w-24' },
   ],
+  customresourcedefinitions: [
+    { key: 'name', label: 'Name' },
+    { key: 'kind', label: 'Kind', width: 'w-56' },
+    { key: 'scope', label: 'Scope', width: 'w-32' },
+    { key: 'versions', label: 'Served Versions', width: 'w-64' },
+    { key: 'status', label: 'Status', width: 'w-36' },
+    { key: 'age', label: 'Age', width: 'w-24' },
+  ],
   priorityclasses: [
     { key: 'name', label: 'Name' },
     { key: 'value', label: 'Value', width: 'w-24', tooltip: 'Higher values receive scheduling preference; Pods can still be preempted by Pods with higher priority' },
@@ -2914,6 +2937,7 @@ function isCuratedUnboundedGroup(key: string, group: string): boolean {
  * cannot occupy one. See CORE_API_GROUPS.
  */
 const CURATED_COLUMN_GROUPS: Record<string, readonly string[]> = {
+  kafkaconnectors: ['kafka.strimzi.io'],
   opentelemetrycollectors: ['opentelemetry.io'],
   instrumentations: ['opentelemetry.io'],
   canaries: ['flagger.app'],
@@ -4640,12 +4664,12 @@ export function ResourcesView({
           if (containers.length > 0) {
             openLogs?.({ namespace: ns, podName: name, containers })
           }
-        } else if (['deployments', 'statefulsets', 'daemonsets', 'replicasets', 'workflows', 'cronjobs', 'cronworkflows', 'workflowtemplates', 'clusterworkflowtemplates', 'scaledjobs'].includes(kindLower) || isCoreBatchJob(kindLower, selectedKind.group)) {
+        } else if (['deployments', 'statefulsets', 'daemonsets', 'workflows', 'cronjobs', 'cronworkflows', 'workflowtemplates', 'clusterworkflowtemplates', 'scaledjobs'].includes(kindLower) || isCoreBatchJob(kindLower, selectedKind.group)) {
           openWorkloadLogs?.({ namespace: ns, workloadKind: selectedKind.kind, workloadName: name })
         }
       },
       enabled: highlightedIndex >= 0 && !compareMode && (
-        ['pods', 'deployments', 'statefulsets', 'daemonsets', 'replicasets', 'workflows', 'cronjobs', 'cronworkflows', 'workflowtemplates', 'clusterworkflowtemplates', 'scaledjobs'].includes(selectedKind.name.toLowerCase()) ||
+        ['pods', 'deployments', 'statefulsets', 'daemonsets', 'workflows', 'cronjobs', 'cronworkflows', 'workflowtemplates', 'clusterworkflowtemplates', 'scaledjobs'].includes(selectedKind.name.toLowerCase()) ||
         isCoreBatchJob(selectedKind.name, selectedKind.group)
       ),
     },
@@ -5441,6 +5465,11 @@ export function ResourcesView({
     const meta = resource.metadata || {}
     const status = resource.status || {}
     const kindLower = kind?.toLowerCase() || ''
+    const connectorValue = getStrimziConnectorColumnValue(resource, column)
+    if (connectorValue !== undefined) {
+      if (column === 'connectorTasks') return Array.isArray(resource.status?.connectorStatus?.tasks) ? resource.status.connectorStatus.tasks.length : -1
+      return connectorValue
+    }
     const otelValue = getOpenTelemetryColumnValue(resource, column)
     if (otelValue !== undefined) return otelValue
     const flaggerValue = getFlaggerColumnValue(resource, column)
@@ -7579,6 +7608,11 @@ function CellContent({ resource, kind, column, group, majorityNodeMinorVersion,
     return <KyvernoCleanupPolicyCell resource={resource} column={column} />
   }
 
+  const connectorValue = getStrimziConnectorColumnValue(resource, column)
+  if (connectorValue !== undefined) {
+    if (column === 'status') return <GenericCell resource={resource} column={column} />
+    return <span className="text-sm text-theme-text-secondary break-all">{connectorValue || '-'}</span>
+  }
   if (isApiGroup(resource.apiVersion, 'opentelemetry.io') && ['opentelemetrycollectors', 'instrumentations'].includes(kindLower)) {
     if (column === 'status') return <GenericCell resource={resource} column={column} />
     return <span className="text-sm text-theme-text-secondary break-all">{getOpenTelemetryColumnValue(resource, column) || '-'}</span>
@@ -7703,6 +7737,8 @@ function CellContent({ resource, kind, column, group, majorityNodeMinorVersion,
       return <IngressClassCell resource={resource} column={column} />
     case 'leases':
       return <LeaseCell resource={resource} column={column} />
+    case 'customresourcedefinitions':
+      return isApiGroup(resource.apiVersion, 'apiextensions.k8s.io') ? <CRDCell resource={resource} column={column} /> : <GenericCell resource={resource} column={column} />
     case 'priorityclasses':
       return <PriorityClassCell resource={resource} column={column} />
     case 'runtimeclasses':
@@ -9250,7 +9286,10 @@ function NodeCell({ resource, column, majorityNodeMinorVersion }: { resource: an
     case 'pods': {
       const m = metrics.nodes.get(resource.metadata?.name)
       const allocatable = resource.status?.allocatable?.pods
-      const podCount = m?.podCount ?? 0
+      // No metrics entry means the count wasn't loaded (e.g. node metrics are
+      // off while a namespace is selected), not that the node runs no Pods.
+      if (!m) return <span className="text-sm text-theme-text-tertiary font-mono">-</span>
+      const podCount = m.podCount ?? 0
       if (!allocatable) return <span className="text-sm text-theme-text-tertiary font-mono">{podCount || '-'}</span>
       // Allocatable pods is a Quantity, so a 1000-pod node reports "1k" —
       // a raw-integer read would see 1 and peg the bar at 21600%.
@@ -9912,3 +9951,11 @@ function EventCell({ resource, column }: { resource: any; column: string }) {
       return <span className="text-sm text-theme-text-tertiary">-</span>
   }
 }
+
+function CRDCell({ resource, column }: { resource: any; column: string }) {
+  if (column === 'status') return <GenericCell resource={resource} column={column} />
+  const spec = resource.spec || {}
+  if (column === 'versions') return <CRDVersionsCell versions={spec.versions || []} />
+  const value = getCRDColumnValue(resource, column)
+  return <span className="text-sm text-theme-text-secondary">{value || '-'}</span>
+}

package/src/components/resources/curated-column-ownership.test.ts

@@ -108,8 +108,8 @@ describe('curated column ownership', () => {
   // Brace-counting, not parsing: assert the extraction actually saw the whole
   // table, or a silently-missed key would let the guard above pass vacuously.
   it('extracted every curated key', () => {
-    expect(CURATED.length).toBe(244)
-    expect(OWNED.size).toBe(206)
+    expect(CURATED.length).toBe(246)
+    expect(OWNED.size).toBe(207)
     expect(CURATED).toContain('pods')
     expect(CURATED).toContain('crossplanemanagedresources')
     expect([...OWNED]).toContain('awsmanagedcontrolplanes')
@@ -166,7 +166,7 @@ describe('every declaration resolves', () => {
     .map(m => [m[1], m[2].split(',').map(g => g.trim().replace(/'/g, ''))] as const)
 
   it('covers the whole ownership table', () => {
-    expect(DECLARED.length).toBe(206)
+    expect(DECLARED.length).toBe(207)
   })
 
   it.each(DECLARED)('%s is curated under each group it claims', (key, groups) => {

package/src/components/resources/generic-status.ts

@@ -1,3 +1,5 @@
+import { getCRDStatus } from './resource-utils-crd'
+import { getStrimziConnectorStatus } from './resource-utils-strimzi'
 import { getOpenTelemetryCollectorStatus, getOpenTelemetryInstrumentationStatus } from './resource-utils-opentelemetry'
 import { getFlaggerCanaryStatus } from './resource-utils-flagger'
 import { isApiGroup } from './resource-utils-cnpg'
@@ -91,6 +93,11 @@ function fromCondition(cond: any, polarityKnown: boolean): GenericStatus | null
  * callers render their own placeholder rather than inventing one.
  */
 export function getGenericResourceStatus(resource: any): GenericStatus | null {
+  if (resource?.kind === 'CustomResourceDefinition' && isApiGroup(resource.apiVersion, 'apiextensions.k8s.io')) return getCRDStatus(resource)
+  if (resource?.kind === 'KafkaConnector' && isApiGroup(resource.apiVersion, 'kafka.strimzi.io')) {
+    const native = getStrimziConnectorStatus(resource)
+    return { text: native.text, tone: native.level }
+  }
   if (isApiGroup(resource?.apiVersion, 'opentelemetry.io')) {
     const native = resource.kind === 'OpenTelemetryCollector' ? getOpenTelemetryCollectorStatus(resource)
       : resource.kind === 'Instrumentation' ? getOpenTelemetryInstrumentationStatus(resource) : null

package/src/components/resources/get-pod-phase-display.test.ts

@@ -568,3 +568,73 @@ describe('getPodPhaseDisplay', () => {
     expect(r.level).toBe('healthy')
   })
 })
+
+describe('scheduling-gated pods', () => {
+  const oldTs = '2020-01-01T00:00:00Z'
+  const gated = {
+    metadata: { creationTimestamp: oldTs },
+    spec: { schedulingGates: [{ name: 'kueue.x-k8s.io/admission' }] },
+    status: { phase: 'Pending' },
+  }
+
+  it('getPodStatus reads a gated pod as neutral "Scheduling gated", not an aged Pending warning', () => {
+    const r = getPodStatus(gated)
+    expect(r.level).toBe('neutral')
+    expect(r.text).toBe('Scheduling gated')
+  })
+
+  it('getPodStatus still ages an ungated Pending pod into a degraded warning', () => {
+    const ungated = { metadata: { creationTimestamp: oldTs }, status: { phase: 'Pending' } }
+    expect(getPodStatus(ungated).level).toBe('degraded')
+  })
+
+  it('getPodPhaseDisplay explains the hold and names the gate in its hint', () => {
+    const r = getPodPhaseDisplay(gated)
+    expect(r.level).toBe('neutral')
+    expect(r.text).toContain('Scheduling gated')
+    expect(r.hint).toContain('kueue.x-k8s.io/admission')
+  })
+})
+
+describe('scheduling-gated detection on summary list payloads', () => {
+  // The summary list payload keeps spec.schedulingGates (with an otherwise minimal
+  // spec), so the badge classifies a held pod straight from the authoritative spec
+  // field — no dependency on the scheduler's PodScheduled condition.
+  const summaryGated = {
+    metadata: { creationTimestamp: '2020-01-01T00:00:00Z' },
+    spec: { schedulingGates: [{ name: 'kueue.x-k8s.io/admission' }], containers: [{ name: 'trainer' }] },
+    status: { phase: 'Pending' },
+  }
+
+  it('getPodStatus reads a summary-shaped gated pod as neutral', () => {
+    const r = getPodStatus(summaryGated)
+    expect(r.level).toBe('neutral')
+    expect(r.text).toBe('Scheduling gated')
+  })
+
+  it('a released pod is aged normally even if a stale SchedulingGated condition lingers', () => {
+    // Gates removed (empty spec) but the scheduler has not yet rewritten the
+    // condition: the spec is authoritative, so the pod must age, not read as held.
+    const released = {
+      metadata: { creationTimestamp: '2020-01-01T00:00:00Z' },
+      spec: { containers: [{ name: 'trainer' }] },
+      status: {
+        phase: 'Pending',
+        conditions: [{ type: 'PodScheduled', status: 'False', reason: 'SchedulingGated' }],
+      },
+    }
+    expect(getPodStatus(released).level).toBe('degraded')
+    expect(getPodStatus(released).text).toBe('Pending')
+  })
+
+  it('an Unschedulable condition is NOT treated as scheduling-gated', () => {
+    const unsched = {
+      metadata: { creationTimestamp: '2020-01-01T00:00:00Z' },
+      status: {
+        phase: 'Pending',
+        conditions: [{ type: 'PodScheduled', status: 'False', reason: 'Unschedulable' }],
+      },
+    }
+    expect(getPodStatus(unsched).text).toBe('Unschedulable')
+  })
+})

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

@@ -1,7 +1,60 @@
-import { renderToStaticMarkup } from 'react-dom/server'
 import { describe, expect, it } from 'vitest'
+import { renderToStaticMarkup, renderToString } from 'react-dom/server'
 import { ArgoApplicationRenderer } from './ArgoApplicationRenderer'
 
+// SSR splits interpolated text with <!-- --> markers; strip so assertions read as prose.
+function render(element: Parameters<typeof renderToString>[0]): string {
+  return renderToString(element).replace(/<!-- -->/g, '')
+}
+
+function app(automated: Record<string, unknown> | undefined) {
+  return {
+    metadata: { name: 'guestbook', namespace: 'argocd' },
+    spec: {
+      project: 'default',
+      source: { repoURL: 'https://github.com/argoproj/argocd-example-apps', path: 'guestbook', targetRevision: 'HEAD' },
+      destination: { server: 'https://kubernetes.default.svc', namespace: 'guestbook' },
+      syncPolicy: automated ? { automated } : {},
+    },
+    status: { sync: { status: 'Synced' }, health: { status: 'Healthy' } },
+  }
+}
+
+function automatedSyncBadge(html: string): string | undefined {
+  return html.match(/Automated Sync<\/span>.*?<span class="badge[^"]*">([^<]+)<\/span>/)?.[1]
+}
+
+describe('ArgoApplicationRenderer sync policy', () => {
+  it('reads an automated block as auto-sync on', () => {
+    const html = render(<ArgoApplicationRenderer data={app({ prune: true, selfHeal: true })} />)
+    expect(automatedSyncBadge(html)).toBe('Enabled')
+    expect(html).toContain('Self Heal')
+  })
+
+  // Argo CD 3.x switches automation off in place: the block and its
+  // prune/selfHeal stay, but the controller does not auto-sync.
+  it('reads automated.enabled=false as auto-sync off', () => {
+    const html = render(<ArgoApplicationRenderer data={app({ enabled: false, prune: true, selfHeal: true })} />)
+    expect(automatedSyncBadge(html)).toBe('Disabled')
+    expect(html).not.toContain('Self Heal')
+  })
+
+  it('reads a missing automated block as auto-sync off', () => {
+    const html = render(<ArgoApplicationRenderer data={app(undefined)} />)
+    expect(automatedSyncBadge(html)).toBe('Disabled')
+  })
+})
+
+// ManagedResourcesList appends the count to its title itself.
+describe('ArgoApplicationRenderer managed resources', () => {
+  it('shows the count once', () => {
+    const data = app(undefined)
+    const html = render(<ArgoApplicationRenderer data={{ ...data, status: { ...data.status, resources: [{ kind: 'Service', name: 'guestbook-ui', namespace: 'guestbook', status: 'Synced' }] } }} />)
+    expect(html).toContain('Managed Resources (1)')
+    expect(html).not.toContain('(1) (1)')
+  })
+})
+
 describe('Argo Helm value files', () => {
   it.each([true, false, undefined])('shows missing-file behavior for single and multiple sources: %s', optional => {
     const source = { chart: 'cluster', repoURL: 'https://cloudnative-pg.github.io/charts', helm: { valueFiles: ['values.yaml', 'overrides.yaml'], ignoreMissingValueFiles: optional } }

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

@@ -1,6 +1,7 @@
 import { GitBranch, FolderTree, Settings, Target, XCircle, History, ListChecks, ExternalLink } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
+import { isArgoAutoSyncEnabled } from '../resource-utils-argo'
 import { GitOpsStatusBadge, ManagedResourcesList, SyncCountdown } from '../../gitops'
 import {
   argoStatusToGitOpsStatus,
@@ -157,6 +158,7 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
   const isMultiSource = Array.isArray(spec.sources) && spec.sources.length > 0
   const destination = spec.destination || {}
   const syncPolicy = spec.syncPolicy || {}
+  const autoSyncEnabled = isArgoAutoSyncEnabled(data)
   const operationState = status.operationState
 
   // Check if sync is in progress
@@ -192,7 +194,7 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
           </div>
 
           {/* Sync countdown (only if automated sync is enabled) */}
-          {syncPolicy.automated && (
+          {autoSyncEnabled && (
             <SyncCountdown
               interval="5m" // ArgoCD default
               lastSyncTime={status.reconciledAt}
@@ -241,14 +243,14 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
               <span
                 className={clsx(
                   'badge',
-                  syncPolicy.automated ? 'status-green' : BADGE_INACTIVE
+                  autoSyncEnabled ? 'status-green' : BADGE_INACTIVE
                 )}
               >
-                {syncPolicy.automated ? 'Enabled' : 'Disabled'}
+                {autoSyncEnabled ? 'Enabled' : 'Disabled'}
               </span>
             }
           />
-          {syncPolicy.automated && (
+          {autoSyncEnabled && (
             <>
               <Property
                 label="Self Heal"
@@ -374,10 +376,7 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
 
       {/* Managed Resources */}
       {managedResources.length > 0 && (
-        <ManagedResourcesList
-          resources={managedResources}
-          title={`Managed Resources (${managedResources.length})`}
-        />
+        <ManagedResourcesList resources={managedResources} />
       )}
 
       {/* Revision History */}

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

@@ -0,0 +1,105 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, expect, it, vi } from 'vitest'
+import { CRDSchemaBrowser } from './CRDSchemaBrowser'
+import { resourceToYaml } from '../../../utils/yaml'
+
+vi.mock('../../ui/CodeViewer', () => ({ CodeViewer: (props: any) => <pre data-theme={props.theme} data-language={props.language} data-copy={props.showCopyButton}>{props.code}</pre> }))
+;(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
+const schema = { type: 'object', 'x-kubernetes-validations': [{ rule: 'has(self.spec)', message: 'Spec is required' }], properties: { spec: {
+  type: 'object', description: 'Settings', required: ['name'], 'x-kubernetes-validations': [{ rule: 'self.name != ""', message: 'Choose a name' }], properties: {
+    name: { type: 'string', description: 'A display name', minLength: 1, 'x-kubernetes-validations': [{ rule: 'self != "bad"', message: 'Use a good name' }] },
+    ports: { type: 'array', items: { properties: { port: { type: 'integer', minimum: 1 } } } },
+  },
+} } }
+const data = { metadata: { uid: 'a', name: 'widgets.example.io' }, spec: { names: { kind: 'Widget' }, versions: [
+  { name: 'v1', served: true, schema: { openAPIV3Schema: schema } },
+  { name: 'v1beta1', served: true, schema: { openAPIV3Schema: { properties: { spec: { properties: { name: { type: 'integer' } } } } } } },
+  { name: 'v1alpha1', served: true, schema: { openAPIV3Schema: { properties: { other: { type: 'boolean' } } } } },
+  { name: 'v2', served: false },
+] } }
+afterEach(() => { act(() => root?.unmount()); host?.remove() })
+function mount(resource = data, onCopy?: (text: string) => void) {
+  if (!host?.isConnected) { host = document.createElement('div'); document.body.append(host); root = createRoot(host) }
+  act(() => root.render(<CRDSchemaBrowser data={resource} theme="light" onCopy={onCopy} />))
+}
+function click(text: string, within: Element = host) {
+  const button = Array.from(within.querySelectorAll('button')).find(b => b.textContent === text || b.getAttribute('aria-label') === text)
+  expect(button, text).toBeDefined(); act(() => button!.click())
+}
+function filter(value: string) {
+  const input = host.querySelector('input')!
+  act(() => { Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(input, value); input.dispatchEvent(new Event('input', { bubbles: true })) })
+}
+function version(name: string) {
+  act(() => host.querySelector<HTMLButtonElement>('button[aria-haspopup="listbox"]')!.click())
+  const option = Array.from(document.querySelectorAll<HTMLButtonElement>('[role="option"]')).find(b => b.textContent?.startsWith(name))!
+  act(() => option.click())
+}
+const detail = () => host.querySelector('[aria-label="Schema field detail"]')!
+const outline = () => host.querySelector('[aria-label="Schema outline"]')!
+
+it('selects independently of expansion, shows facts and parent rules, and follows child fields', () => {
+  const copy = vi.fn(); mount(data, copy)
+  expect(detail().textContent).toContain('Select a field')
+  expect(outline().textContent).not.toContain('ports')
+  click('specobject', outline())
+  expect(detail().textContent).toContain('Settings')
+  expect(detail().textContent).toContain('Choose a name')
+  expect(detail().textContent).toContain('Spec is required')
+  expect(outline().textContent).not.toContain('ports')
+  click('namestringrequired', detail())
+  expect(detail().textContent).toContain('spec.name')
+  expect(detail().textContent).toContain('minLength: 1')
+  expect(detail().textContent).toContain('Use a good name')
+  expect(detail().textContent).toContain('Rules on parent fields')
+  expect(detail().textContent).toContain('Choose a name')
+  click('Copy field path', detail()); expect(copy).toHaveBeenCalledWith('spec.name')
+  click('Expand spec', outline())
+  expect(outline().querySelector('[aria-current="true"]')?.textContent).toContain('name')
+})
+it('filters pasted paths, selects results and highlights only direct matches', () => {
+  mount(); filter('spec.ports[0].port')
+  expect(host.textContent).toContain('1 matching field')
+  expect(outline().querySelector('mark')).toBeNull()
+  click('spec.ports[].portinteger', outline())
+  expect(detail().textContent).toContain('spec.ports[].port')
+  expect(detail().textContent).toContain('minimum: 1')
+  filter('PORTS[]')
+  expect(outline().querySelector('mark')?.textContent).toBe('ports[]')
+  click('Clear field filter'); expect(host.querySelector('input')?.value).toBe('')
+})
+it('retains selection across versions only while the path exists, and resets on another CRD', () => {
+  mount(); filter('spec.name'); click('spec.namestringrequired', outline())
+  version('v1beta1')
+  expect(detail().textContent).toContain('spec.name')
+  expect(detail().textContent).toContain('integer')
+  expect(host.querySelector('input')?.value).toBe('spec.name')
+  version('v1alpha1'); expect(detail().textContent).toContain('Select a field')
+  version('v1'); expect(detail().textContent).toContain('Select a field')
+  click('Raw'); mount({ ...data, metadata: { ...data.metadata, uid: 'b' } })
+  expect(host.querySelector('input')?.value).toBe('')
+  expect(host.querySelector('button[aria-pressed="true"]')?.textContent).toBe('Fields')
+  expect(detail().textContent).toContain('Select a field')
+})
+it('shows the version schema as YAML with the existing raw viewer and honest missing-schema copy', () => {
+  mount(); click('Raw')
+  expect(host.querySelector('input[aria-label="Filter fields"]')).toBeNull()
+  const raw = host.querySelector('pre')!
+  expect(raw.textContent).toBe(resourceToYaml(schema))
+  expect(raw.dataset).toMatchObject({ theme: 'light', language: 'yaml', copy: 'true' })
+  version('v2')
+  expect(host.textContent).toContain("Radar didn't receive a schema for this version")
+  expect(host.querySelector('pre')).toBeNull()
+})
+it('copies a path through the clipboard and handles clipboard rejection', async () => {
+  const writeText = vi.fn().mockRejectedValue(new Error('denied'))
+  Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText } })
+  mount(); click('specobject', outline())
+  await act(async () => click('Copy field path', detail()))
+  expect(writeText).toHaveBeenCalledWith('spec')
+})

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

@@ -0,0 +1,134 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Check, Copy } from 'lucide-react'
+import { Collapse, CollapseChevron, useDisclosure } from '../../ui/Collapse'
+import { CodeViewer } from '../../ui/CodeViewer'
+import { SelectMenu } from '../../ui/SelectMenu'
+import { resourceToYaml } from '../../../utils/yaml'
+import {
+  displaySchemaPath, filterCRDSchema, indexCRDSchema, preferredCRDVersion,
+  schemaChildren, schemaLeafName, schemaTypeLabel,
+  type CRDSchema, type CRDVersion, type SchemaNode,
+} from '../../../utils/crd-schema'
+import { ParentRulesList, RequiredMarker, SchemaFacts, SchemaFieldFilter, SchemaPathText } from './crd-schema-parts'
+
+export interface CRDSchemaBrowserProps {
+  data: any
+  theme?: 'light' | 'dark'
+  onCopy?: (text: string) => void
+}
+
+function OutlineRows({ nodes, selected, onSelect, query = '' }: { nodes: SchemaNode[]; selected?: string; onSelect: (node: SchemaNode) => void; query?: string }) {
+  const [visible, setVisible] = useState(100)
+  return <div className="space-y-0.5">
+    {nodes.slice(0, query ? 200 : visible).map(node => <OutlineRow key={displaySchemaPath(node.path)} node={node} selected={selected} onSelect={onSelect} query={query} />)}
+    {!query && nodes.length > visible && <button type="button" className="py-1 text-xs text-accent" onClick={() => setVisible(n => n + 100)}>Show {Math.min(100, nodes.length - visible)} more</button>}
+  </div>
+}
+
+function OutlineRow({ node, selected, onSelect, query }: { node: SchemaNode; selected?: string; onSelect: (node: SchemaNode) => void; query: string }) {
+  const [open, setOpen] = useState(false)
+  const disclosure = useDisclosure(open)
+  const children = useMemo(() => schemaChildren(node.schema, node.path, node), [node])
+  const path = displaySchemaPath(node.path)
+  return <div>
+    <div className={`flex items-start rounded ${selected === path ? 'selection' : 'hover:bg-theme-hover'}`}>
+      {!query && children.length > 0 ? <button type="button" {...disclosure.buttonProps} aria-label={`Expand ${path}`} onClick={() => setOpen(v => !v)} className="shrink-0 p-2"><CollapseChevron open={open} className="h-3 w-3" /></button> : <span className="w-7 shrink-0" />}
+      <button type="button" aria-current={selected === path ? 'true' : undefined} onClick={() => onSelect(node)} className="min-w-0 flex-1 py-1.5 pr-2 text-left text-sm">
+        {query && <SchemaPathText path={node.path} query={query} part="parent" />}
+        <span className="flex flex-wrap items-baseline gap-x-2">
+          <span className="break-all font-mono text-theme-text-primary">{query ? <SchemaPathText path={node.path} query={query} part="leaf" /> : schemaLeafName(node.path)}</span>
+          <span className="text-xs text-theme-text-tertiary">{schemaTypeLabel(node.schema)}</span>
+          {node.required && <RequiredMarker />}
+        </span>
+      </button>
+    </div>
+    {!query && children.length > 0 && <Collapse open={open} id={disclosure.panelId} mountLazily><div className="border-l border-theme-border pl-3"><OutlineRows nodes={children} selected={selected} onSelect={onSelect} /></div></Collapse>}
+  </div>
+}
+
+function ChildFields({ nodes, onSelect }: { nodes: SchemaNode[]; onSelect: (node: SchemaNode) => void }) {
+  const [visible, setVisible] = useState(100)
+  return <div className="space-y-1">
+    <h3 className="text-sm font-medium text-theme-text-primary">Fields</h3>
+    {nodes.slice(0, visible).map(node => <button key={displaySchemaPath(node.path)} type="button" onClick={() => onSelect(node)} className="flex w-full flex-wrap items-baseline gap-2 rounded px-2 py-1 text-left hover:bg-theme-hover">
+      <span className="break-all font-mono text-sm text-accent">{schemaLeafName(node.path)}</span><span className="text-xs text-theme-text-tertiary">{schemaTypeLabel(node.schema)}</span>{node.required && <RequiredMarker />}
+    </button>)}
+    {nodes.length > visible && <button type="button" onClick={() => setVisible(n => n + 100)} className="text-xs text-accent">Show {Math.min(100, nodes.length - visible)} more</button>}
+  </div>
+}
+
+function FieldDetail({ node, schema, onSelect, onCopy }: { node: SchemaNode; schema: CRDSchema; onSelect: (node: SchemaNode) => void; onCopy?: (text: string) => void }) {
+  const path = displaySchemaPath(node.path)
+  const children = useMemo(() => schemaChildren(node.schema, node.path, node), [node])
+  const [copied, setCopied] = useState(false)
+  useEffect(() => {
+    if (!copied) return
+    const timer = setTimeout(() => setCopied(false), 1500)
+    return () => clearTimeout(timer)
+  }, [copied])
+  return <div className="space-y-4 text-sm text-theme-text-secondary">
+    <div className="flex items-start gap-2">
+      <h2 className="min-w-0 flex-1 break-all font-mono text-theme-text-primary">{path}</h2>
+      <button type="button" aria-label="Copy field path" className="flex shrink-0 items-center gap-1 text-xs hover:text-theme-text-primary" onClick={async () => {
+        try {
+          if (onCopy) onCopy(path)
+          else await navigator.clipboard.writeText(path)
+          setCopied(true)
+        } catch { /* Clipboard access can be denied by the browser. */ }
+      }}>{copied ? <><Check className="h-3 w-3" />Copied</> : <><Copy className="h-3 w-3" />Copy</>}</button>
+    </div>
+    <div className="flex items-baseline gap-2"><span className="font-mono">{schemaTypeLabel(node.schema)}</span>{node.required && <RequiredMarker />}</div>
+    <SchemaFacts schema={node.schema} />
+    <ParentRulesList node={node} root={schema} />
+    {children.length > 0 && <ChildFields key={path} nodes={children} onSelect={onSelect} />}
+  </div>
+}
+
+export function CRDSchemaBrowser(props: CRDSchemaBrowserProps) {
+  return <SchemaBrowser key={JSON.stringify([props.data.metadata?.uid, props.data.metadata?.name])} {...props} />
+}
+
+function SchemaBrowser({ data, theme, onCopy }: CRDSchemaBrowserProps) {
+  const versions: CRDVersion[] = data.spec?.versions ?? []
+  const [picked, setPicked] = useState(() => preferredCRDVersion(versions)?.name)
+  const version = versions.find(v => v.name === picked) ?? preferredCRDVersion(versions)
+  const schema = version?.schema?.openAPIV3Schema
+  const [filter, setFilter] = useState('')
+  const [mode, setMode] = useState<'fields' | 'raw'>('fields')
+  const [selection, setSelection] = useState<SchemaNode>()
+  const needsIndex = Boolean(filter.trim() || selection)
+  const index = useMemo(() => needsIndex ? indexCRDSchema(schema) : [], [schema, needsIndex])
+  const path = selection && displaySchemaPath(selection.path)
+  const selected = selection && index.find(node => displaySchemaPath(node.path) === path)
+  useEffect(() => {
+    if (selection && !selected) setSelection(undefined)
+  }, [selection, selected])
+  const nodes = useMemo(() => schema ? schemaChildren(schema) : [], [schema])
+  const results = filter.trim() ? filterCRDSchema(index, filter) : undefined
+  return <div className="min-w-0">
+    <div className="sticky top-0 z-10 flex flex-wrap items-center gap-3 border-b border-theme-border bg-theme-surface p-3">
+      {mode === 'fields' ? <SchemaFieldFilter value={filter} onChange={setFilter} /> : <p className="min-w-0 flex-1 text-xs text-theme-text-tertiary">The {version?.name} schema exactly as the CRD declares it</p>}
+      {versions.length > 1 && <div className="flex items-center gap-2 text-xs text-theme-text-secondary"><span>Version</span><SelectMenu ariaLabel="Schema version" value={version?.name ?? ''} onChange={setPicked} options={versions.map(v => ({ value: v.name, label: v.name, description: [v.storage && 'storage', v.deprecated && 'deprecated', !v.served && 'not served', !v.schema?.openAPIV3Schema && 'schema not received'].filter(Boolean).join(' · ') }))} /></div>}
+      <div className="flex rounded-md border border-theme-border bg-theme-base p-0.5 text-xs">
+        {(['fields', 'raw'] as const).map(value => <button key={value} type="button" aria-pressed={mode === value} onClick={() => setMode(value)} className={`rounded px-2 py-1 ${mode === value ? 'bg-theme-elevated text-theme-text-primary' : 'text-theme-text-tertiary hover:text-theme-text-secondary'}`}>{value === 'fields' ? 'Fields' : 'Raw'}</button>)}
+      </div>
+      {mode === 'fields' && results && <p className="text-xs text-theme-text-tertiary">{results.total} matching {results.total === 1 ? 'field' : 'fields'}{results.total > 200 ? ' — showing 200; narrow the filter' : ''}</p>}
+    </div>
+    {!schema ? <p className="p-4 text-sm text-theme-text-tertiary">Radar didn't receive a schema for this version. The YAML tab shows the object as returned.</p>
+      : mode === 'raw' ? <CodeViewer code={resourceToYaml(schema)} language="yaml" showCopyButton theme={theme} onCopy={onCopy} />
+      : <div className="grid min-w-0 md:grid-cols-[2fr_3fr]">
+        <div aria-label="Schema outline" className="max-h-[calc(100vh-15rem)] min-w-0 overflow-auto border-b border-theme-border p-3 md:border-b-0 md:border-r">
+          <OutlineRows key={`${version?.name}:${results ? 'filter' : 'tree'}`} nodes={results?.nodes ?? nodes} selected={selected && displaySchemaPath(selected.path)} onSelect={setSelection} query={filter.trim()} />
+          {!results && nodes.length === 0 && <p className="text-sm text-theme-text-tertiary">This schema declares no fields.</p>}
+        </div>
+        <div aria-label="Schema field detail" className="max-h-[calc(100vh-15rem)] min-w-0 overflow-auto p-4">
+          {selected ? <FieldDetail key={`${version?.name}:${path}`} node={selected} schema={schema} onSelect={setSelection} onCopy={onCopy} /> : <div className="space-y-4 text-sm text-theme-text-secondary">
+            <h2 className="font-medium text-theme-text-primary">{data.spec?.names?.kind} · {version?.name}</h2>
+            <p>Select a field to see its rules, or paste a path from an API error into the filter.</p>
+            <SchemaFacts schema={schema} />
+            <ChildFields key={version?.name} nodes={nodes} onSelect={setSelection} />
+          </div>}
+        </div>
+      </div>}
+  </div>
+}