@skyhook-io/k8s-ui 1.11.0 → 1.13.0

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

@@ -0,0 +1,81 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { CompositeRenderer } from './CompositeRenderer'
+import type { CrossplaneResourceRef } from '../resource-utils-crossplane'
+
+const claim = {
+  apiVersion: 'platform.example.org/v1alpha1',
+  kind: 'DatabaseClaim',
+  metadata: { name: 'example-database', namespace: 'demo-app' },
+  spec: {
+    compositionRef: { name: 'database' },
+    resourceRef: {
+      apiVersion: 'platform.example.org/v1alpha1',
+      kind: 'Database',
+      name: 'example-database-x7k2m',
+    },
+  },
+}
+
+const composed: CrossplaneResourceRef[] = [
+  { apiVersion: 'database.example.org/v1beta1', kind: 'Instance', name: 'example-database-instance' },
+  { apiVersion: 'identity.example.org/v1beta1', kind: 'Role', name: 'example-database-access' },
+  { apiVersion: 'kubernetes.crossplane.io/v1alpha2', kind: 'Object', name: 'example-database-connection' },
+]
+
+const html = (props: any) => renderToString(<CompositeRenderer {...props} />)
+
+describe('CompositeRenderer — claim composed-resources panel (issue coverage)', () => {
+  it('lists composed resources resolved from the bound XR (the fix)', () => {
+    const out = html({ data: claim, composedRefs: composed })
+    expect(out).toContain('Composed Resources (3)')
+    for (const ref of composed) {
+      expect(out).toContain(ref.name)
+    }
+    expect(out).not.toContain('No composed resources yet')
+    // claim identity section + the bound-XR link
+    expect(out).toContain('Claim')
+    expect(out).toContain('Bound Composite')
+    expect(out).toContain('example-database-x7k2m')
+  })
+
+  it('shows a loading state while the bound XR is being fetched — not "none"', () => {
+    const out = html({ data: claim, composedRefs: [], boundXRStatus: { loading: true } })
+    expect(out).toContain('Loading composed resources')
+    expect(out).not.toContain('No composed resources yet')
+  })
+
+  it('distinguishes a not-found / unreadable bound XR from genuinely-none', () => {
+    const out = html({ data: claim, composedRefs: [], boundXRStatus: { missing: true } })
+    expect(out).toContain('was not found')
+    expect(out).not.toContain('No composed resources yet')
+  })
+
+  it('surfaces a bound-XR read error (RBAC/500) distinctly, with the message', () => {
+    const out = html({
+      data: claim,
+      composedRefs: [],
+      boundXRStatus: { error: true, errorMessage: 'forbidden: cannot get databases' },
+    })
+    expect(out).toContain('read the bound composite') // apostrophe is HTML-escaped in SSR output
+    expect(out).toContain('forbidden: cannot get databases')
+    expect(out).not.toContain('No composed resources yet')
+  })
+
+  it('falls back to the genuine empty state for a claim whose XR simply has none yet', () => {
+    const out = html({ data: claim, composedRefs: [] })
+    expect(out).toContain('No composed resources yet')
+  })
+
+  it('for an XR viewed directly (no bound-XR status), reads its own resourceRefs', () => {
+    const xr = {
+      apiVersion: 'platform.example.org/v1alpha1',
+      kind: 'Database',
+      metadata: { name: 'example-database-x7k2m' },
+      spec: { resourceRefs: composed },
+    }
+    const out = html({ data: xr })
+    expect(out).toContain('Composed Resources (3)')
+    expect(out).toContain('Composite Resource') // not "Claim"
+  })
+})

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

@@ -52,6 +52,28 @@ interface CompositeRendererProps {
    * of an unrelated Bucket from another provider. Populated by the host
    * wrapper. When absent, the renderer shows refs without status badges. */
   composedRefStatuses?: Map<string, ComposedRefStatus>
+  /** Composed-resource refs resolved by the host. A v1 Claim carries only a
+   * singular spec.resourceRef to its bound XR — the composed refs live on that
+   * XR, not the claim — so the host follows the ref, fetches the XR, and passes
+   * its refs here. When omitted, refs are read off `data` directly (correct for
+   * an XR/Composite viewed on its own). */
+  composedRefs?: CrossplaneResourceRef[]
+  /** State of the host's fetch of the claim's bound XR. Set only for a v1 Claim.
+   * Without it, a claim whose XR is still loading or unreadable (404/RBAC) would
+   * fall into the empty branch and read "No composed resources yet" — which is
+   * indistinguishable from a claim that genuinely has none. */
+  boundXRStatus?: BoundXRStatus
+}
+
+/** Fetch state of a claim's bound XR, reported by the host wrapper. */
+export interface BoundXRStatus {
+  /** true while the XR fetch is in flight */
+  loading?: boolean
+  /** 404 — the referenced XR does not exist (dangling resourceRef) */
+  missing?: boolean
+  /** any non-404 failure (auth, network, server error); message in errorMessage */
+  error?: boolean
+  errorMessage?: string
 }
 
 function makeRefKey(ref: CrossplaneResourceRef): string {
@@ -67,13 +89,13 @@ function groupFromApiVersion(apiVersion: string | undefined): string {
   return slash < 0 ? '' : apiVersion.slice(0, slash)
 }
 
-export function CompositeRenderer({ data, onNavigate, composedRefStatuses }: CompositeRendererProps) {
+export function CompositeRenderer({ data, onNavigate, composedRefStatuses, composedRefs, boundXRStatus }: CompositeRendererProps) {
   const status = getCrossplaneStatus(data)
   const reason = getCrossplaneStatusReason(data)
   const compositionRef = getCompositionRef(data)
   const compositionRevisionRef = getCompositionRevisionRef(data)
   const compositionUpdatePolicy = getCompositionUpdatePolicy(data)
-  const resourceRefs = getCrossplaneResourceRefs(data)
+  const resourceRefs = composedRefs ?? getCrossplaneResourceRefs(data)
   const claim = isClaim(data)
   const boundXR = claim ? getBoundXRRef(data) : null
   const paused = isCrossplanePaused(data)
@@ -153,9 +175,7 @@ export function CompositeRenderer({ data, onNavigate, composedRefStatuses }: Com
         defaultExpanded
       >
         {resourceRefs.length === 0 ? (
-          <div className="text-sm text-theme-text-tertiary py-2">
-            No composed resources yet — the composition has not produced any managed resources.
-          </div>
+          <ComposedResourcesEmpty boundXRStatus={boundXRStatus} boundXRName={boundXR?.name} />
         ) : (
           <div className="space-y-1">
             {resourceRefs.map((ref) => (
@@ -175,6 +195,44 @@ export function CompositeRenderer({ data, onNavigate, composedRefStatuses }: Com
   )
 }
 
+function ComposedResourcesEmpty({
+  boundXRStatus,
+  boundXRName,
+}: {
+  boundXRStatus?: BoundXRStatus
+  boundXRName?: string
+}) {
+  if (boundXRStatus?.loading) {
+    return (
+      <div className="text-sm text-theme-text-tertiary py-2">
+        Loading composed resources from the bound composite…
+      </div>
+    )
+  }
+  if (boundXRStatus?.missing) {
+    const named = boundXRName ? ` (${boundXRName})` : ''
+    return (
+      <div className="text-sm text-theme-text-tertiary py-2">
+        The bound composite{named} referenced by this claim was not found — it may not have been
+        created yet, or you may not have permission to read it.
+      </div>
+    )
+  }
+  if (boundXRStatus?.error) {
+    const named = boundXRName ? ` (${boundXRName})` : ''
+    return (
+      <div className="text-sm status-unhealthy rounded px-2 py-2">
+        Couldn't read the bound composite{named}: {boundXRStatus.errorMessage || 'fetch failed'}
+      </div>
+    )
+  }
+  return (
+    <div className="text-sm text-theme-text-tertiary py-2">
+      No composed resources yet — the composition has not produced any managed resources.
+    </div>
+  )
+}
+
 function ComposedRefRow({
   ref_,
   statusEntry,
@@ -189,7 +247,9 @@ function ComposedRefRow({
   return (
     <div className="flex items-center gap-2 py-1 px-2 rounded hover:bg-theme-hover text-sm">
       <Box className="w-3.5 h-3.5 text-theme-text-tertiary shrink-0" />
-      <span className="text-theme-text-tertiary font-mono shrink-0 w-32 truncate">{ref_.kind}</span>
+      {/* Kind is content-sized (capped) so the resource name — the field that
+          distinguishes rows — keeps the width instead of truncating. */}
+      <span className="text-theme-text-tertiary font-mono shrink-0 max-w-[8rem] truncate">{ref_.kind}</span>
       <span className="flex-1 min-w-0 truncate">
         <ResourceLink
           name={ref_.name}
@@ -200,7 +260,7 @@ function ComposedRefRow({
         />
       </span>
       {ref_.namespace && (
-        <span className="text-xs text-theme-text-tertiary truncate w-32 text-right">{ref_.namespace}</span>
+        <span className="text-xs text-theme-text-tertiary truncate max-w-[8rem] shrink-0 text-right">{ref_.namespace}</span>
       )}
       <StatusCellInline statusEntry={statusEntry} />
       <ChevronRight className="w-3.5 h-3.5 text-theme-text-tertiary shrink-0" />

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

@@ -17,7 +17,10 @@ export function FluxHelmReleaseRenderer({ data, onNavigate }: FluxHelmReleaseRen
   const history = status.history || []
 
   // Convert to unified GitOps status
-  const gitOpsStatus = fluxConditionsToGitOpsStatus(conditions, spec.suspend === true)
+  const gitOpsStatus = fluxConditionsToGitOpsStatus(conditions, spec.suspend === true, {
+    generation: data.metadata?.generation,
+    observedGeneration: status.observedGeneration,
+  })
 
   // Problem detection
   const problems: Array<{ color: 'red' | 'yellow'; message: string }> = []

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

@@ -16,7 +16,10 @@ export function GitRepositoryRenderer({ data }: GitRepositoryRendererProps) {
   const artifact = status.artifact || {}
 
   // Convert to unified GitOps status
-  const gitOpsStatus = fluxConditionsToGitOpsStatus(conditions, spec.suspend === true)
+  const gitOpsStatus = fluxConditionsToGitOpsStatus(conditions, spec.suspend === true, {
+    generation: data.metadata?.generation,
+    observedGeneration: status.observedGeneration,
+  })
 
   // Problem detection
   const problems: Array<{ color: 'red' | 'yellow'; message: string }> = []

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

@@ -17,7 +17,10 @@ export function HelmRepositoryRenderer({ data }: HelmRepositoryRendererProps) {
   const artifact = status.artifact || {}
 
   // Convert to unified GitOps status
-  const gitOpsStatus = fluxConditionsToGitOpsStatus(conditions, spec.suspend === true)
+  const gitOpsStatus = fluxConditionsToGitOpsStatus(conditions, spec.suspend === true, {
+    generation: data.metadata?.generation,
+    observedGeneration: status.observedGeneration,
+  })
 
   // Determine repository type
   const isOCI = spec.type === 'oci'

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

@@ -16,7 +16,10 @@ export function KustomizationRenderer({ data, onNavigate }: KustomizationRendere
   const inventoryEntries = status.inventory?.entries || []
 
   // Convert to unified GitOps status
-  const gitOpsStatus = fluxConditionsToGitOpsStatus(conditions, spec.suspend === true)
+  const gitOpsStatus = fluxConditionsToGitOpsStatus(conditions, spec.suspend === true, {
+    generation: data.metadata?.generation,
+    observedGeneration: status.observedGeneration,
+  })
 
   // Parse inventory to managed resources
   const managedResources = parseFluxInventory(inventoryEntries)

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

@@ -1,3 +1,4 @@
+import type React from 'react'
 // Renderers for Kyverno's modern CEL policy family (policies.kyverno.io),
 // stabilized in Kyverno 1.17/1.18 and the family that survives the removal of
 // kyverno.io Policy/ClusterPolicy planned for 1.20.
@@ -14,6 +15,7 @@
 
 import { FileWarning, ShieldCheck, Wand2, Sparkles, Trash2, Clock, Fingerprint, ScrollText } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { CronValue } from '../../ui/ScheduleValue'
 import {
   KyvernoEvaluationSection,
   KyvernoExpressionList,
@@ -70,10 +72,11 @@ function ValidationsSection({ validations }: { validations: KyvernoCELValidation
   )
 }
 
-export function KyvernoValidatingPolicyRenderer({ data }: { data: any }) {
+export function KyvernoValidatingPolicyRenderer({ data, coverage }: { data: any; coverage?: React.ReactNode }) {
   return (
     <div className="space-y-4">
       <KyvernoPostureHeader data={data} family="validating" />
+      {coverage}
       <ValidationsSection validations={getKyvernoValidations(data)} />
       <KyvernoMatchScopeSection data={data} />
       <KyvernoVariablesSection data={data} />
@@ -83,7 +86,7 @@ export function KyvernoValidatingPolicyRenderer({ data }: { data: any }) {
   )
 }
 
-export function KyvernoImageValidatingPolicyRenderer({ data }: { data: any }) {
+export function KyvernoImageValidatingPolicyRenderer({ data, coverage }: { data: any; coverage?: React.ReactNode }) {
   const attestors = getKyvernoAttestors(data)
   const attestations = getKyvernoAttestations(data)
   const imageRefs = getKyvernoImageReferences(data)
@@ -92,6 +95,7 @@ export function KyvernoImageValidatingPolicyRenderer({ data }: { data: any }) {
   return (
     <div className="space-y-4">
       <KyvernoPostureHeader data={data} family="imageValidating" />
+      {coverage}
 
       {imageRefs.length > 0 && (
         <Section title={`Image References (${imageRefs.length})`} icon={ScrollText}>
@@ -163,13 +167,14 @@ export function KyvernoImageValidatingPolicyRenderer({ data }: { data: any }) {
   )
 }
 
-export function KyvernoMutatingPolicyRenderer({ data }: { data: any }) {
+export function KyvernoMutatingPolicyRenderer({ data, coverage }: { data: any; coverage?: React.ReactNode }) {
   const mutations = getKyvernoMutations(data)
   const reinvocation = getKyvernoReinvocationPolicy(data)
 
   return (
     <div className="space-y-4">
       <KyvernoPostureHeader data={data} family="mutating" />
+      {coverage}
 
       {mutations.length > 0 && (
         <Section title={`Mutations (${mutations.length})`} icon={Wand2}>
@@ -218,13 +223,14 @@ export function KyvernoMutatingPolicyRenderer({ data }: { data: any }) {
   )
 }
 
-export function KyvernoGeneratingPolicyRenderer({ data }: { data: any }) {
+export function KyvernoGeneratingPolicyRenderer({ data, coverage }: { data: any; coverage?: React.ReactNode }) {
   const generations = getKyvernoGenerations(data)
   const settings = getKyvernoGenerationSettings(data)
 
   return (
     <div className="space-y-4">
       <KyvernoPostureHeader data={data} family="generating" />
+      {coverage}
 
       {generations.length > 0 && (
         <Section title={`Generates (${generations.length})`} icon={Sparkles}>
@@ -274,7 +280,7 @@ export function KyvernoGeneratingPolicyRenderer({ data }: { data: any }) {
   )
 }
 
-export function KyvernoDeletingPolicyRenderer({ data }: { data: any }) {
+export function KyvernoDeletingPolicyRenderer({ data, coverage }: { data: any; coverage?: React.ReactNode }) {
   const schedule = getKyvernoSchedule(data)
   const conditions = getKyvernoDeletionConditions(data)
   const propagation = getKyvernoDeletionPropagationPolicy(data)
@@ -282,12 +288,13 @@ export function KyvernoDeletingPolicyRenderer({ data }: { data: any }) {
   return (
     <div className="space-y-4">
       <KyvernoPostureHeader data={data} family="deleting" />
+      {coverage}
 
       <Section title="Schedule" icon={Clock}>
         <PropertyList>
           <Property
             label="Cron"
-            value={schedule ? <span className="font-mono">{schedule}</span> : 'Not set — this policy will not run'}
+            value={schedule ? <CronValue cron={schedule} /> : 'Not set — this policy will not run'}
           />
           {propagation && <Property label="Deletion Propagation" value={propagation} />}
         </PropertyList>

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

@@ -14,6 +14,7 @@ import {
   AlertBanner,
   LabelSelectorDisplay,
 } from '../../ui/drawer-components'
+import { CronValue, TimeValue } from '../../ui/ScheduleValue'
 import { KyvernoExpressionList } from './KyvernoPolicyShared'
 import {
   getKyvernoCleanupConditions,
@@ -225,9 +226,9 @@ export function KyvernoCleanupPolicyRenderer({ data }: { data: any }) {
 
       <Section title="Schedule" icon={Clock}>
         <PropertyList>
-          <Property label="Cron" value={schedule ? <span className="font-mono">{schedule}</span> : 'Not set'} />
+          <Property label="Cron" value={schedule ? <CronValue cron={schedule} /> : 'Not set'} />
           {propagation && <Property label="Deletion Propagation" value={propagation} />}
-          {lastExecution && <Property label="Last Execution" value={lastExecution} />}
+          {lastExecution && <Property label="Last Execution" value={<TimeValue timestamp={lastExecution} />} />}
         </PropertyList>
       </Section>
 

package/src/components/resources/renderers/KyvernoGlobalContextRenderer.test.ts

@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest'
+import { getKyvernoContextRefresh } from './KyvernoGlobalContextRenderer'
+
+/**
+ * Kyverno records a successful refresh and records nothing at all for a failed
+ * one — no message, no condition. Verified on 1.18.2: `cluster-namespaces` came
+ * back with `lastRefreshTime`, `broken-lookup` came back with an empty status.
+ * Age is therefore the only thing separating "failing" from "not yet".
+ */
+describe('global context refresh state', () => {
+  const ago = (ms: number) => new Date(Date.now() - ms).toISOString()
+
+  it('is healthy once it has refreshed', () => {
+    const r = getKyvernoContextRefresh({ status: { lastRefreshTime: ago(60_000) } })
+    expect(r.refreshed).toBe(true)
+    expect(r.level).toBe('healthy')
+  })
+
+  it('is unknown while the entry is young enough not to have run yet', () => {
+    const r = getKyvernoContextRefresh({ metadata: { creationTimestamp: ago(10_000) }, status: {} })
+    expect(r.level).toBe('unknown')
+  })
+
+  // Old and never refreshed is the diagnosis; anything sooner would accuse the
+  // entry before its first attempt.
+  it('is unhealthy once an old entry still has no refresh', () => {
+    const r = getKyvernoContextRefresh({ metadata: { creationTimestamp: ago(10 * 60_000) }, status: {} })
+    expect(r.level).toBe('unhealthy')
+    expect(r.refreshed).toBe(false)
+  })
+})

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

@@ -0,0 +1,124 @@
+import { Globe, RefreshCw } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { HEALTH_BADGE_COLORS } from '../../../utils/badge-colors'
+import { formatAge, healthColors } from '../resource-utils'
+import type { StatusBadge } from '../resource-utils'
+
+type Nav = (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+
+/**
+ * Whether the entry has ever produced data.
+ *
+ * Kyverno records success as `status.lastRefreshTime` and records failure as
+ * nothing at all — there is no message, no condition, no reason. So the only
+ * honest reading is "it has refreshed" versus "it has never refreshed", and the
+ * age of the entry is what turns the second into a diagnosis. Inventing a cause
+ * for a silent failure would be worse than naming the silence.
+ */
+export function getKyvernoContextRefresh(resource: any): {
+  refreshed: boolean
+  at?: string
+  level: 'healthy' | 'unhealthy' | 'unknown'
+} {
+  const at = resource?.status?.lastRefreshTime
+  if (typeof at === 'string' && at !== '') return { refreshed: true, at, level: 'healthy' }
+  // Young enough that the first refresh may simply not have happened yet.
+  const created = resource?.metadata?.creationTimestamp
+  const ageMs = created ? Date.now() - new Date(created).getTime() : 0
+  return { refreshed: false, level: ageMs > 2 * 60 * 1000 ? 'unhealthy' : 'unknown' }
+}
+
+/**
+ * GlobalContextEntry — external data a policy reads while it evaluates.
+ *
+ * It matters because a policy referencing an entry that never resolves fails at
+ * evaluation time, and the failure surfaces as a policy error with no obvious
+ * cause. This page is where that cause lives.
+ */
+export function KyvernoGlobalContextRenderer({ data, onNavigate }: { data: any; onNavigate?: Nav }) {
+  const spec = data?.spec ?? {}
+  const api = spec.apiCall
+  const cm = spec.configMap
+  const refresh = getKyvernoContextRefresh(data)
+
+  return (
+    <>
+      {refresh.level === 'unhealthy' && (
+        <AlertBanner
+          variant="error"
+          title="This entry has never refreshed"
+          // Deliberately not a diagnosis: Kyverno records no reason for a failed
+          // refresh, so the page reports the fact and where to look.
+          message="Kyverno records no reason when a refresh fails. Any policy referencing this entry will error while it evaluates. Check the source below is reachable and that Kyverno may read it."
+        />
+      )}
+
+      <Section title="Refresh" icon={RefreshCw} defaultExpanded>
+        <PropertyList>
+          <Property
+            label="State"
+            value={
+              <span
+                className={clsx('badge', HEALTH_BADGE_COLORS[refresh.level as keyof typeof HEALTH_BADGE_COLORS])}
+              >
+                {refresh.refreshed ? 'Refreshed' : refresh.level === 'unhealthy' ? 'Never refreshed' : 'Not refreshed yet'}
+              </span>
+            }
+          />
+          {refresh.at && <Property label="Last Refreshed" value={`${formatAge(refresh.at)} ago`} />}
+          {api?.refreshInterval && <Property label="Interval" value={api.refreshInterval} />}
+          {api?.retryLimit != null && <Property label="Retry Limit" value={String(api.retryLimit)} />}
+        </PropertyList>
+        {!refresh.refreshed && refresh.level === 'unknown' && (
+          <div className="mt-2 pt-2 border-t border-theme-border text-xs text-theme-text-secondary">
+            Created moments ago — the first refresh may not have run yet.
+          </div>
+        )}
+      </Section>
+
+      <Section title="Source" icon={Globe} defaultExpanded>
+        {api ? (
+          <PropertyList>
+            <Property label="Kind" value="Kubernetes API call" />
+            <Property label="Method" value={api.method || 'GET'} />
+            <Property label="Path" value={<span className="font-mono text-xs">{api.urlPath || '-'}</span>} />
+            {api.jmesPath && (
+              <Property label="Filter" value={<span className="font-mono text-xs">{api.jmesPath}</span>} />
+            )}
+          </PropertyList>
+        ) : cm ? (
+          <PropertyList>
+            <Property label="Kind" value="ConfigMap" />
+            <Property
+              label="ConfigMap"
+              value={
+                <ResourceLink
+                  name={cm.name}
+                  kind="configmaps"
+                  namespace={cm.namespace ?? ''}
+                  onNavigate={onNavigate}
+                />
+              }
+            />
+            {cm.namespace && <Property label="Namespace" value={cm.namespace} />}
+          </PropertyList>
+        ) : (
+          <div className="text-sm text-theme-text-tertiary">
+            No API call or ConfigMap source is declared, so this entry can never produce data.
+          </div>
+        )}
+      </Section>
+    </>
+  )
+}
+
+/** List badge for GlobalContextEntry, mirroring the detail page's three states. */
+export function getKyvernoGlobalContextStatus(resource: any): StatusBadge {
+  const r = getKyvernoContextRefresh(resource)
+  if (r.refreshed) return { text: 'Refreshed', color: healthColors.healthy, level: 'healthy' }
+  if (r.level === 'unhealthy') {
+    return { text: 'Never Refreshed', color: healthColors.unhealthy, level: 'unhealthy' }
+  }
+  return { text: 'Pending', color: healthColors.unknown, level: 'unknown' }
+}

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

@@ -1,3 +1,4 @@
+import type React from 'react'
 import { Shield, ShieldCheck, ShieldAlert, FileWarning, ListChecks, ChevronDown, ChevronRight } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useState } from 'react'
@@ -225,6 +226,13 @@ export function PolicyReportRenderer({ data }: PolicyReportRendererProps) {
 
 interface KyvernoPolicyRendererProps {
   data: any
+  /** Filled by the host with the policy's coverage section — what this policy
+   *  actually decided about the cluster. */
+  coverage?: React.ReactNode
+  /** Filled by the host with the work this policy has queued and not finished.
+   *  The failure worth catching here is a pile-up, not one request, so it
+   *  belongs beside the policy rather than only on its own page. */
+  queued?: React.ReactNode
 }
 
 const ruleTypeColorMap: Record<string, string> = {
@@ -234,7 +242,7 @@ const ruleTypeColorMap: Record<string, string> = {
   verifyImages: 'bg-orange-500/20 text-orange-400',
 }
 
-export function KyvernoPolicyRenderer({ data }: KyvernoPolicyRendererProps) {
+export function KyvernoPolicyRenderer({ data, coverage, queued }: KyvernoPolicyRendererProps) {
   const spec = data.spec || {}
   const status = data.status || {}
   const conditions = status.conditions || []
@@ -249,9 +257,18 @@ export function KyvernoPolicyRenderer({ data }: KyvernoPolicyRendererProps) {
 
   return (
     <>
+      {coverage}
+      {queued}
       {/* Configuration */}
       <Section title="Configuration" icon={Shield}>
         <PropertyList>
+          {/* Audit / Enforce governs the rules that can REJECT — validation and
+              image verification. A policy whose rules only generate or mutate
+              carries the field inertly, and showing it as the policy's mode
+              reads as "this one only reports" about a policy that is actively
+              writing to the cluster. status.rulecount is Kyverno's own count,
+              so this is checkable rather than guessed. */}
+          {(ruleCountByType.validate > 0 || ruleCountByType.verifyImages > 0) && (
           <Property label="Failure Action" value={
             <span className={clsx(
               'badge',
@@ -260,6 +277,7 @@ export function KyvernoPolicyRenderer({ data }: KyvernoPolicyRendererProps) {
               {action}
             </span>
           } />
+          )}
           <Property label="Background" value={background ? 'Enabled' : 'Disabled'} />
           {spec.webhookTimeoutSeconds && (
             <Property label="Webhook Timeout" value={`${spec.webhookTimeoutSeconds}s`} />
@@ -342,7 +360,15 @@ export function KyvernoPolicyRenderer({ data }: KyvernoPolicyRendererProps) {
             {status.rulecount.validate !== undefined && <Property label="Validate" value={status.rulecount.validate} />}
             {status.rulecount.mutate !== undefined && <Property label="Mutate" value={status.rulecount.mutate} />}
             {status.rulecount.generate !== undefined && <Property label="Generate" value={status.rulecount.generate} />}
-            {status.rulecount.verifyImages !== undefined && <Property label="Verify Images" value={status.rulecount.verifyImages} />}
+            {/* All-lowercase in Kyverno's own status, so the camelCase read
+                dropped the only non-zero row on an image-verification policy
+                and left three zeros reading as "no rules". */}
+            {(status.rulecount.verifyImages ?? status.rulecount.verifyimages) !== undefined && (
+              <Property
+                label="Verify Images"
+                value={status.rulecount.verifyImages ?? status.rulecount.verifyimages}
+              />
+            )}
           </PropertyList>
         </Section>
       )}