@skyhook-io/k8s-ui 1.11.0 → 1.12.0

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

@@ -0,0 +1,102 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { PolicySection } from './PolicySection'
+import type { PolicyResourceResponse } from '../../../types/policy'
+
+const base: PolicyResourceResponse = {
+  evaluated: true,
+  status: 'ready',
+  liveUpdates: true,
+  counts: { pass: 0, fail: 0, warn: 0, error: 0, skip: 0 },
+  findings: [],
+}
+const resp = (over: Partial<PolicyResourceResponse>): PolicyResourceResponse => ({ ...base, ...over })
+
+
+// The unhappy paths carry this section. An empty finding list means several
+// unrelated things, and rendering them all as blank space would tell an
+// operator they are compliant in the cases where nothing was checked.
+describe('PolicySection — what an empty result means', () => {
+  it('says which rules failed when there are violations', () => {
+    const html = renderToString(<PolicySection data={resp({
+      counts: { pass: 2, fail: 1, warn: 0, error: 0, skip: 0 },
+      findings: [{ policy: 'require-run-as-nonroot', result: 'fail', message: 'must set runAsNonRoot' }],
+    })} />)
+    expect(html).toContain('require-run-as-nonroot')
+    expect(html).toContain('must set runAsNonRoot')
+    // The passing checks are counted, not listed — otherwise two failures drown
+    // in a wall of green on a heavily-policed workload.
+    expect(html).toContain('2 other checks passing')
+  })
+
+  it('distinguishes "everything passed" from "nothing was checked"', () => {
+    const passing = renderToString(<PolicySection data={resp({
+      counts: { pass: 5, fail: 0, warn: 0, error: 0, skip: 0 },
+    })} />)
+    expect(passing).toContain('All 5 checks passing')
+
+    const unchecked = renderToString(<PolicySection data={resp({})} />)
+    expect(unchecked).toContain('No policy applies')
+    expect(unchecked).not.toContain('passing')
+  })
+
+  it('never claims compliance when the results could not be read', () => {
+    const html = renderToString(<PolicySection data={resp({
+      evaluated: false, status: 'deferred', reasonCode: 'rbac_denied',
+    })} />)
+    expect(html).toContain('has not been checked')
+    expect(html).toContain('rbac_denied')
+    expect(html).not.toContain('passing')
+  })
+
+  it('says results are still loading during warmup rather than reporting clean', () => {
+    const html = renderToString(<PolicySection data={resp({ evaluated: false, status: 'warmup' })} />)
+    expect(html).toContain('still loading')
+  })
+
+  it('renders nothing at all when no policy engine is installed', () => {
+    // A disclaimer on every cluster without a policy engine is pure noise.
+    expect(renderToString(<PolicySection data={resp({ evaluated: false, status: 'not_installed' })} />)).toBe('')
+    expect(renderToString(<PolicySection data={null} />)).toBe('')
+  })
+})
+
+describe('PolicySection — partial coverage', () => {
+  it('admits when some report families were unreadable, even while passing', () => {
+    // "All checks passing" plus an unreadable family is a claim of coverage we
+    // do not have.
+    const html = renderToString(<PolicySection data={resp({
+      counts: { pass: 3, fail: 0, warn: 0, error: 0, skip: 0 },
+      deniedGroups: ['openreports.io'],
+    })} />)
+    expect(html).toContain('All 3 checks passing')
+    expect(html).toContain('may be incomplete')
+    expect(html).toContain('openreports.io')
+  })
+
+  it('admits when the results are frozen', () => {
+    const html = renderToString(<PolicySection data={resp({
+      counts: { pass: 1, fail: 0, warn: 0, error: 0, skip: 0 }, liveUpdates: false,
+    })} />)
+    expect(html).toContain('not updating live')
+  })
+})
+
+describe('PolicySection — request states', () => {
+  it('shows loading rather than an empty result', () => {
+    expect(renderToString(<PolicySection data={null} loading />)).toContain('Loading policy results')
+  })
+
+  it('treats a permission denial as an expected state, not a red failure', () => {
+    const denied = Object.assign(new Error('forbidden'), { status: 403 })
+    const html = renderToString(<PolicySection data={null} error={denied} />)
+    expect(html).toContain('don’t have permission')
+    expect(html).not.toContain('text-red')
+  })
+
+  it('keeps a genuine fault loud', () => {
+    const html = renderToString(<PolicySection data={null} error={new Error('connection reset')} />)
+    expect(html).toContain('connection reset')
+    expect(html).toContain('text-red')
+  })
+})

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

@@ -0,0 +1,170 @@
+import { ShieldCheck, ShieldAlert, ShieldQuestion } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section } from '../../ui/drawer-components'
+import { SEVERITY_BADGE } from '../../../utils/badge-colors'
+import { isForbiddenError } from '../../../types/fetch-error'
+import type { PolicyResourceResponse, PolicyResourceFinding } from '../../../types/policy'
+
+interface PolicySectionProps {
+  data: PolicyResourceResponse | null
+  loading?: boolean
+  error?: Error | null
+}
+
+const TITLE = 'Policy'
+
+// Result → badge tone. `error` means the engine could not evaluate the rule,
+// which is not the same as the rule failing, so it does not share fail's red.
+function resultTone(result: string): { badge: string; label: string } {
+  switch (result.toLowerCase()) {
+    case 'fail':
+      return { badge: SEVERITY_BADGE.error, label: 'Fail' }
+    case 'warn':
+      return { badge: SEVERITY_BADGE.warning, label: 'Warn' }
+    case 'error':
+      return { badge: SEVERITY_BADGE.alert, label: 'Error' }
+    case 'skip':
+      return { badge: SEVERITY_BADGE.neutral, label: 'Skipped' }
+    default:
+      return { badge: SEVERITY_BADGE.neutral, label: result }
+  }
+}
+
+/**
+ * PolicySection reports what the cluster's policy engine says about this one
+ * resource.
+ *
+ * The unhappy paths carry the weight here. An empty finding list means one of
+ * several unrelated things, and rendering them all as blank space would tell an
+ * operator they are compliant in the cases where nothing was actually checked —
+ * the failure mode this section exists to avoid. Each state therefore says which
+ * one it is, in its own words, and the red treatment is reserved for genuine
+ * faults. Same division the RBAC sections already draw.
+ */
+export function PolicySection({ data, loading, error }: PolicySectionProps) {
+  if (loading) {
+    return (
+      <Section title={TITLE} icon={ShieldQuestion}>
+        <div className="text-sm text-theme-text-tertiary">Loading policy results…</div>
+      </Section>
+    )
+  }
+
+  if (error) {
+    // A denial is an expected state on a namespace-scoped account, not a fault.
+    if (isForbiddenError(error)) {
+      return (
+        <Section title={TITLE} icon={ShieldQuestion}>
+          <div className="text-sm text-theme-text-tertiary">
+            You don’t have permission to view policy results in this namespace.
+          </div>
+        </Section>
+      )
+    }
+    return (
+      <Section title={TITLE} icon={ShieldAlert}>
+        <div className="text-sm text-red-400">{`Could not load policy results: ${error.message}`}</div>
+      </Section>
+    )
+  }
+
+  // No engine installed — the section is genuinely not applicable, so it is
+  // absent rather than showing a reassuring "nothing to report". A disclaimer on
+  // every cluster without a policy engine would be noise.
+  if (!data || data.status === 'not_installed') return null
+
+  if (!data.evaluated) {
+    return (
+      <Section title={TITLE} icon={ShieldQuestion}>
+        <div className="text-sm text-theme-text-tertiary">
+          {(data.status === 'warmup'
+            ? 'Policy results are still loading from the cluster.'
+            : 'Policy results are unavailable, so this resource has not been checked.') +
+            (data.reasonCode ? ` (${data.reasonCode})` : '')}
+        </div>
+      </Section>
+    )
+  }
+
+  const { counts, findings } = data
+  const checked = counts.pass + counts.fail + counts.warn + counts.error + counts.skip
+
+  // Evaluated, but no policy selected this resource at all. Distinct from
+  // "passing everything": nothing examined it, so there is nothing to pass.
+  if (checked === 0) {
+    return (
+      <Section title={TITLE} icon={ShieldQuestion}>
+        <div className="text-sm text-theme-text-tertiary">
+          No policy applies to this resource.
+        </div>
+        <PartialCoverageNote data={data} />
+      </Section>
+    )
+  }
+
+  const failing = findings.length
+
+  return (
+    <Section
+      title={TITLE}
+      icon={failing > 0 ? ShieldAlert : ShieldCheck}
+      defaultExpanded={failing > 0}
+    >
+      {failing === 0 ? (
+        <div className="text-sm text-theme-text-secondary">
+          {`All ${counts.pass} ${counts.pass === 1 ? 'check' : 'checks'} passing.`}
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {findings.map((f, i) => (
+            <PolicyFindingRow key={`${f.policy}/${f.rule}/${i}`} finding={f} />
+          ))}
+          {counts.pass > 0 && (
+            <div className="text-xs text-theme-text-tertiary pt-1">
+              {`${counts.pass} other ${counts.pass === 1 ? 'check' : 'checks'} passing`}
+            </div>
+          )}
+        </div>
+      )}
+      <PartialCoverageNote data={data} />
+    </Section>
+  )
+}
+
+function PolicyFindingRow({ finding }: { finding: PolicyResourceFinding }) {
+  const tone = resultTone(finding.result)
+  return (
+    <div className="flex items-start gap-2 min-w-0">
+      <span className={clsx('badge shrink-0', tone.badge)}>{tone.label}</span>
+      <div className="min-w-0">
+        <div className="text-sm text-theme-text-primary truncate" title={finding.policy}>
+          {finding.policy}
+          {finding.rule && finding.rule !== finding.policy && (
+            <span className="text-theme-text-tertiary"> · {finding.rule}</span>
+          )}
+        </div>
+        {finding.message && (
+          <div className="text-xs text-theme-text-secondary">{finding.message}</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * A result can be real and incomplete at the same time: some report families
+ * may be unreadable by this identity, or the index may be frozen. Saying
+ * "all checks passing" without mentioning that claims coverage we do not have.
+ */
+function PartialCoverageNote({ data }: { data: PolicyResourceResponse }) {
+  const denied = data.deniedGroups ?? []
+  if (denied.length === 0 && data.liveUpdates) return null
+  return (
+    <div className="mt-2 pt-2 border-t border-theme-border text-xs text-theme-text-tertiary">
+      {denied.length > 0 && (
+        <div>{`Some policy results could not be read (${denied.join(', ')}), so this list may be incomplete.`}</div>
+      )}
+      {!data.liveUpdates && <div>These results are not updating live.</div>}
+    </div>
+  )
+}

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

@@ -1,6 +1,8 @@
 import { useState, useEffect } from 'react'
 import { Server, ExternalLink, Scale, Minus, Plus, Loader2, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
+import { PolicySection } from './PolicySection'
+import type { PolicyResourceResponse } from '../../../types/policy'
 import { Section, PropertyList, Property, ConditionsSection, PodTemplateSection, AlertBanner, ResourceLink, ResourceRefBadge, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { DialogPortal } from '../../ui/DialogPortal'
 import { Tooltip } from '../../ui/Tooltip'
@@ -40,6 +42,14 @@ interface WorkloadRendererProps {
   rbacData?: RBACSubjectResponse | null
   rbacLoading?: boolean
   rbacError?: Error | null
+  /**
+   * Policy findings for this workload. Undefined means the host didn't wire the
+   * fetch, so the section is omitted entirely — consumers that skip it get the
+   * original sections and nothing breaks.
+   */
+  policyData?: PolicyResourceResponse | null
+  policyLoading?: boolean
+  policyError?: Error | null
 }
 
 // Check if the workload is actively progressing (scaling, rolling update)
@@ -140,7 +150,7 @@ function compactHPASummary(diagnosis: HPADiagnosis): string {
   return diagnosis.summary
 }
 
-export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale, isScalePending, scaleBlockedBy, scalerDiagnostics, onRequestRefresh, rbacData, rbacLoading, rbacError }: WorkloadRendererProps) {
+export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale, isScalePending, scaleBlockedBy, scalerDiagnostics, onRequestRefresh, rbacData, rbacLoading, rbacError, policyData, policyLoading, policyError }: WorkloadRendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
   const metadata = data.metadata || {}
@@ -372,6 +382,10 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
         </div>
       </DialogPortal>
 
+      {policyData !== undefined && (
+        <PolicySection data={policyData} loading={policyLoading} error={policyError} />
+      )}
+
       <Section title="Strategy">
         <PropertyList>
           {isDaemonSet || isStatefulSet ? (

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

@@ -160,3 +160,4 @@ export * from './ResourceSliceRenderer'
 export * from './nvidia-cells'
 export * from './NvidiaClusterPolicyRenderer'
 export * from './NvidiaDriverRenderer'
+export { PolicySection } from './PolicySection'

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

@@ -2,6 +2,7 @@
 
 import { clsx } from 'clsx'
 import {
+  getPolicyReportScope,
   getPolicyReportStatus,
   getPolicyReportSummary,
   getKyvernoPolicyStatus,
@@ -19,6 +20,14 @@ export function PolicyReportCell({ resource, column }: { resource: any; column:
         </span>
       )
     }
+    // Kyverno names a per-resource report after the subject's UID, so the Name
+    // column reads as a bare UUID. Without the subject the whole table is
+    // unidentifiable rows with counts beside them — you cannot tell which of
+    // your workloads a failing report belongs to without opening every one.
+    case 'scope': {
+      const scope = getPolicyReportScope(resource)
+      return <span className="truncate text-theme-text-primary" title={scope}>{scope}</span>
+    }
     case 'pass': {
       const summary = getPolicyReportSummary(resource)
       return <span className={clsx('text-sm', summary.pass > 0 ? 'text-green-400' : 'text-theme-text-tertiary')}>{summary.pass}</span>

package/src/components/resources/renderers/policyreport-subject.test.tsx

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { PolicyReportCell } from './kyverno-cells'
+import { getPolicyReportScope } from '../resource-utils-kyverno'
+
+// Kyverno names each per-resource report after the subject's UID, so the Name
+// column is a bare UUID. Without the subject, the table is a list of
+// unidentifiable rows with counts beside them.
+describe('PolicyReport subject column', () => {
+  const report = {
+    metadata: { name: '4c1d2f8a-91e3-4b7c-9f11-2a6e0c5d7b83', namespace: 'payments' },
+    scope: { kind: 'Deployment', namespace: 'payments', name: 'checkout-api' },
+  }
+
+  it('names the workload the report is about', () => {
+    const html = renderToString(<PolicyReportCell resource={report} column="scope" />)
+    expect(html).toContain('checkout-api')
+    expect(html).toContain('Deployment')
+  })
+
+  it('degrades to a dash rather than an empty cell when there is no subject', () => {
+    // Cluster-scoped reports and some producers omit scope entirely.
+    expect(getPolicyReportScope({ metadata: { name: 'x' } })).toBe('-')
+    const html = renderToString(<PolicyReportCell resource={{ metadata: { name: 'x' } }} column="scope" />)
+    expect(html).toContain('-')
+  })
+})

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

@@ -4,6 +4,8 @@ import {
   getCNPGClusterStatus,
   getCNPGBackupStatus,
   getCNPGPoolerStatus,
+  isCNPGPoolerPaused,
+  getCNPGVolumeHealth,
   getCNPGClusterInstancesReportedState,
   getCNPGClusterBackupConfig,
   getCNPGClusterBarmanPlugin,
@@ -599,3 +601,64 @@ describe('an absent count is unknown, never zero', () => {
       .toMatchObject({ text: 'Scheduled', level: 'healthy' })
   })
 })
+
+describe('paused Pooler', () => {
+  // PgBouncer PAUSE holds client connections instead of serving them, while
+  // every pod stays scheduled and Ready. Reading only the pod counts rendered
+  // a pooler that serves nothing in healthy green.
+  const paused = { spec: { instances: 2, pgbouncer: { paused: true } }, status: { instances: 2 } }
+
+  it('does not read as healthy', () => {
+    expect(getCNPGPoolerStatus(paused)).toMatchObject({ text: 'Paused', level: 'degraded' })
+  })
+
+  it('treats pausing as intent, not a fault', () => {
+    // Same tier as a paused Velero Schedule: amber, not red.
+    expect(getCNPGPoolerStatus(paused).level).not.toBe('unhealthy')
+  })
+
+  it('lets a real fault outrank the pause', () => {
+    const pausedAndDown = { spec: { instances: 2, pgbouncer: { paused: true } }, status: { instances: 0 } }
+    expect(getCNPGPoolerStatus(pausedAndDown)).toMatchObject({ text: 'Not Scheduled', level: 'unhealthy' })
+  })
+
+  it('only an explicit true pauses', () => {
+    expect(getCNPGPoolerStatus({ spec: { instances: 2, pgbouncer: {} }, status: { instances: 2 } }))
+      .toMatchObject({ text: 'Scheduled', level: 'healthy' })
+    expect(getCNPGPoolerStatus({ spec: { instances: 2, pgbouncer: { paused: false } }, status: { instances: 2 } }))
+      .toMatchObject({ text: 'Scheduled', level: 'healthy' })
+    expect(isCNPGPoolerPaused({ spec: { pgbouncer: { paused: true } } })).toBe(true)
+    expect(isCNPGPoolerPaused({ spec: {} })).toBe(false)
+  })
+})
+
+describe('volume health', () => {
+  // Field names and shape verified against a live CloudNativePG 1.27 CRD and a
+  // running cluster: pvcCount is a number, the rest are arrays of PVC names.
+  const healthy = {
+    status: { pvcCount: 2, healthyPVC: ['pg-healthy-1', 'pg-healthy-2'] },
+  }
+
+  it('reads what the operator reports about volumes that exist', () => {
+    const h = getCNPGVolumeHealth(healthy)
+    expect(h).toMatchObject({ total: 2, healthy: ['pg-healthy-1', 'pg-healthy-2'], unusable: [] })
+  })
+
+  it('surfaces an unusable volume, which is why an instance cannot start', () => {
+    // Upstream: unusable means a paired volume is missing.
+    const h = getCNPGVolumeHealth({ status: { pvcCount: 3, healthyPVC: ['a'], unusablePVC: ['pg-main-3'] } })
+    expect(h?.unusable).toEqual(['pg-main-3'])
+  })
+
+  it('stays silent when the operator has reported nothing', () => {
+    // Absence must not render as "0 problems" — the section is hidden instead,
+    // so it never claims a check it did not perform.
+    expect(getCNPGVolumeHealth({ status: {} })).toBeNull()
+    expect(getCNPGVolumeHealth({})).toBeNull()
+  })
+
+  it('ignores malformed entries rather than rendering them', () => {
+    const h = getCNPGVolumeHealth({ status: { pvcCount: 1, healthyPVC: ['ok', 42, null] } })
+    expect(h?.healthy).toEqual(['ok'])
+  })
+})

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

@@ -666,6 +666,12 @@ export function getCNPGPoolerStatus(resource: any): StatusBadge {
     return { text: 'Degraded', color: healthColors.degraded, level: 'degraded' }
   }
 
+  // Faults outrank intent: a Pooler that is both paused and unscheduled has a
+  // problem worth fixing before the pause is worth mentioning.
+  if (isCNPGPoolerPaused(resource)) {
+    return { text: 'Paused', color: healthColors.degraded, level: 'degraded' }
+  }
+
   if (desired > 0 && scheduled >= desired) {
     return { text: 'Scheduled', color: healthColors.healthy, level: 'healthy' }
   }
@@ -673,6 +679,16 @@ export function getCNPGPoolerStatus(resource: any): StatusBadge {
   return { text: 'Unknown', color: healthColors.unknown, level: 'unknown' }
 }
 
+/**
+ * PgBouncer holds client connections instead of serving them while paused, and
+ * every pod stays scheduled and Ready throughout - the one Pooler state that
+ * pod counts cannot express. CRD-defaulted to false, so only an explicit true
+ * pauses.
+ */
+export function isCNPGPoolerPaused(resource: any): boolean {
+  return resource.spec?.pgbouncer?.paused === true
+}
+
 /** Name of the Deployment CNPG generates for this Pooler — where real readiness lives. */
 export function getCNPGPoolerDeploymentName(resource: any): string {
   return resource.metadata?.name || ''
@@ -707,3 +723,47 @@ export function getCNPGPoolerAuthQuerySecret(resource: any): { name: string } |
   if (!secret?.name) return undefined
   return { name: secret.name }
 }
+
+/**
+ * Volume health for a CNPG cluster, read from the arrays the operator publishes
+ * on status. Radar previously showed only the REQUESTED size and storage class,
+ * which are spec-side intentions — a cluster whose volumes had failed rendered
+ * a cheerful "20Gi" with nothing to suggest otherwise.
+ *
+ * `unusablePVC` is the sharp one. Upstream defines it as a volume that cannot be
+ * used because a paired volume is missing, which is why a database instance can
+ * be permanently unable to start while every other field looks ordinary.
+ *
+ * Returns null when the operator has published nothing, so the section can stay
+ * silent rather than claim zero problems it never checked for.
+ */
+export interface CNPGVolumeHealth {
+  total?: number
+  healthy: string[]
+  unusable: string[]
+  dangling: string[]
+  resizing: string[]
+  initializing: string[]
+}
+
+export function getCNPGVolumeHealth(resource: any): CNPGVolumeHealth | null {
+  const s = resource?.status
+  if (!s) return null
+  const list = (v: any): string[] => (Array.isArray(v) ? v.filter((x: any) => typeof x === 'string') : [])
+  const health: CNPGVolumeHealth = {
+    total: typeof s.pvcCount === 'number' ? s.pvcCount : undefined,
+    healthy: list(s.healthyPVC),
+    unusable: list(s.unusablePVC),
+    dangling: list(s.danglingPVC),
+    resizing: list(s.resizingPVC),
+    initializing: list(s.initializingPVC),
+  }
+  const reportedAnything =
+    health.total !== undefined ||
+    health.healthy.length > 0 ||
+    health.unusable.length > 0 ||
+    health.dangling.length > 0 ||
+    health.resizing.length > 0 ||
+    health.initializing.length > 0
+  return reportedAnything ? health : null
+}

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

@@ -9,6 +9,7 @@ import {
   getProviderConfigStatus,
   getProviderConfigRef,
   getCrossplaneResourceRefs,
+  getBoundXRRef,
   getExternalName,
   getComposingXRRef,
   isCrossplanePaused,
@@ -512,6 +513,73 @@ describe('getCrossplaneResourceRefs', () => {
   })
 })
 
+describe('getBoundXRRef', () => {
+  it('returns the singular spec.resourceRef of a v1 claim', () => {
+    const claim = {
+      spec: {
+        compositionRef: { name: 'database' },
+        resourceRef: {
+          apiVersion: 'platform.example.org/v1alpha1',
+          kind: 'Database',
+          name: 'example-database-x7k2m',
+        },
+      },
+    } as const
+    const ref = getBoundXRRef(claim)
+    expect(ref?.kind).toBe('Database')
+    expect(ref?.name).toBe('example-database-x7k2m')
+    expect(ref?.apiVersion).toBe('platform.example.org/v1alpha1')
+  })
+
+  it('returns null when resourceRef is absent or malformed', () => {
+    expect(getBoundXRRef({ spec: {} } as const)).toBeNull()
+    expect(getBoundXRRef({ spec: { resourceRef: { name: 'no-kind' } } } as const)).toBeNull()
+    expect(getBoundXRRef({ spec: { resourceRef: { kind: 'X' } } } as const)).toBeNull()
+    expect(getBoundXRRef({} as const)).toBeNull()
+  })
+})
+
+describe('claim vs XR composed-refs split', () => {
+  // A v1 claim carries NO resourceRefs of its own — only a singular resourceRef
+  // to its bound XR. The composed refs live on that XR. The claim panel must
+  // follow the ref rather than read the claim, or it shows "No composed
+  // resources" for a claim that has composed plenty.
+  const claim = {
+    spec: {
+      compositionRef: { name: 'database' },
+      resourceRef: {
+        apiVersion: 'platform.example.org/v1alpha1',
+        kind: 'Database',
+        name: 'example-database-x7k2m',
+      },
+    },
+  } as const
+  const boundXR = {
+    spec: {
+      resourceRefs: [
+        { apiVersion: 'database.example.org/v1beta1', kind: 'Instance', name: 'example-database-x7k2m' },
+        { apiVersion: 'identity.example.org/v1beta1', kind: 'Role', name: 'example-database-access' },
+        { apiVersion: 'kubernetes.crossplane.io/v1alpha2', kind: 'Object', name: 'example-database-connection' },
+      ],
+    },
+  } as const
+
+  it('reads nothing off the claim itself', () => {
+    expect(getCrossplaneResourceRefs(claim)).toEqual([])
+  })
+
+  it('is detected as a claim with a bound XR', () => {
+    expect(isClaim(claim)).toBe(true)
+    expect(getBoundXRRef(claim)?.name).toBe('example-database-x7k2m')
+  })
+
+  it('reads the composed refs off the bound XR', () => {
+    const refs = getCrossplaneResourceRefs(boundXR)
+    expect(refs).toHaveLength(3)
+    expect(refs.map(r => r.kind)).toEqual(['Instance', 'Role', 'Object'])
+  })
+})
+
 describe('getExternalName', () => {
   it('reads the crossplane.io/external-name annotation', () => {
     const resource = {