@skyhook-io/k8s-ui 1.10.5 → 1.12.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/EventRenderer.test.tsx

@@ -0,0 +1,23 @@
+import { renderToString } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+
+import { EventRenderer } from './EventRenderer'
+
+describe('EventRenderer', () => {
+  it.each([
+    ['Warning', 'status-degraded'],
+    ['Normal', 'status-neutral'],
+  ])('uses the theme-aware status tone for %s events', (type, statusClass) => {
+    const html = renderToString(<EventRenderer data={{
+      type,
+      reason: 'FailedScheduling',
+      message: 'No nodes are available',
+    }} />)
+
+    expect(html).toContain(statusClass)
+    expect(html).toContain('FailedScheduling')
+    expect(html).toContain('No nodes are available')
+    expect(html).not.toMatch(/text-(?:amber|blue)-(?:200|300|400)/)
+    expect(html).not.toContain('opacity-')
+  })
+})

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

@@ -1,5 +1,6 @@
 import { AlertTriangle, Info, Clock, Target, Server, Hash } from 'lucide-react'
 import { clsx } from 'clsx'
+import { Badge } from '../../ui/Badge'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
 import type { NavigateToResource } from '../../../utils/navigation'
@@ -20,35 +21,29 @@ export function EventRenderer({ data, onNavigate }: EventRendererProps) {
   const source = data.source || {}
   const firstTimestamp = data.firstTimestamp
   const lastTimestamp = data.lastTimestamp || data.metadata?.creationTimestamp
+  const statusClass = isWarning ? 'status-degraded' : 'status-neutral'
+  const badgeSeverity = isWarning ? 'warning' : 'info'
 
   return (
     <>
       {/* Event Type Banner */}
       <div className={clsx(
         'mb-4 p-4 rounded-lg border',
-        isWarning
-          ? 'bg-amber-500/10 border-amber-500/30'
-          : 'bg-blue-500/10 border-blue-500/30'
+        statusClass,
       )}>
         <div className="flex items-start gap-3">
           {isWarning ? (
-            <AlertTriangle className="w-5 h-5 text-amber-400 mt-0.5 shrink-0" />
+            <AlertTriangle className="w-5 h-5 mt-0.5 shrink-0" />
           ) : (
-            <Info className="w-5 h-5 text-blue-400 mt-0.5 shrink-0" />
+            <Info className="w-5 h-5 mt-0.5 shrink-0" />
           )}
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 mb-1">
-              <span className={clsx(
-                'badge',
-                isWarning ? 'bg-amber-500/20 text-amber-400' : 'bg-blue-500/20 text-blue-400'
-              )}>
+              <Badge severity={badgeSeverity}>
                 {eventType}
-              </span>
+              </Badge>
               {reason && (
-                <span className={clsx(
-                  'text-sm font-semibold',
-                  isWarning ? 'text-amber-300' : 'text-blue-300'
-                )}>
+                <span className="text-sm font-semibold">
                   {reason}
                 </span>
               )}
@@ -59,10 +54,7 @@ export function EventRenderer({ data, onNavigate }: EventRendererProps) {
               )}
             </div>
             {message && (
-              <p className={clsx(
-                'text-sm break-all',
-                isWarning ? 'text-amber-200/90' : 'text-blue-200/90'
-              )}>
+              <p className="text-sm break-all">
                 {message}
               </p>
             )}

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

@@ -0,0 +1,317 @@
+// 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.
+//
+// One renderer per behavioural family, each sharing the posture header and
+// match-scope sections from KyvernoPolicyShared. The five specs overlap far
+// less than their names suggest — DeletingPolicy has no failurePolicy,
+// evaluation or webhookConfiguration at all and is scheduled rather than
+// admission-driven — so a merged renderer would be mostly branches.
+//
+// Each Namespaced* twin renders through its cluster-scoped counterpart: same
+// spec, narrower scope, and the scope is already conveyed by the namespace in
+// the resource header.
+
+import { FileWarning, ShieldCheck, Wand2, Sparkles, Trash2, Clock, Fingerprint, ScrollText } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import {
+  KyvernoEvaluationSection,
+  KyvernoExpressionList,
+  KyvernoMatchScopeSection,
+  KyvernoPostureHeader,
+  KyvernoVariablesSection,
+} from './KyvernoPolicyShared'
+import {
+  getKyvernoAttestations,
+  getKyvernoAttestors,
+  getKyvernoDeletionConditions,
+  getKyvernoDeletionPropagationPolicy,
+  getKyvernoGenerationSettings,
+  getKyvernoGenerations,
+  getKyvernoImageExtractors,
+  getKyvernoImageReferences,
+  getKyvernoMutations,
+  getKyvernoPolicyConditions,
+  getKyvernoReinvocationPolicy,
+  getKyvernoSchedule,
+  getKyvernoValidations,
+  type KyvernoCELValidation,
+} from '../resource-utils-kyverno-modern'
+
+/**
+ * The CEL rules themselves, each with the message an operator sees when it
+ * fails. Expression and message belong together — a rule without its message
+ * is unreadable, and a message without its rule is unverifiable.
+ */
+function ValidationsSection({ validations }: { validations: KyvernoCELValidation[] }) {
+  if (validations.length === 0) return null
+  return (
+    <Section title={`Validations (${validations.length})`} icon={FileWarning}>
+      <div className="space-y-2">
+        {validations.map((v, i) => (
+          <div key={i} className="card-inner-lg">
+            <pre className="text-xs text-theme-text-primary font-mono whitespace-pre-wrap break-all">
+              {v.expression}
+            </pre>
+            {(v.message || v.messageExpression) && (
+              <div className="mt-2 text-xs text-theme-text-secondary">
+                {v.message || <span className="font-mono">{v.messageExpression}</span>}
+              </div>
+            )}
+            {v.reason && (
+              <div className="mt-1">
+                <span className="badge status-neutral">{v.reason}</span>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </Section>
+  )
+}
+
+export function KyvernoValidatingPolicyRenderer({ data }: { data: any }) {
+  return (
+    <div className="space-y-4">
+      <KyvernoPostureHeader data={data} family="validating" />
+      <ValidationsSection validations={getKyvernoValidations(data)} />
+      <KyvernoMatchScopeSection data={data} />
+      <KyvernoVariablesSection data={data} />
+      <KyvernoEvaluationSection data={data} />
+      <ConditionsSection conditions={getKyvernoPolicyConditions(data)} />
+    </div>
+  )
+}
+
+export function KyvernoImageValidatingPolicyRenderer({ data }: { data: any }) {
+  const attestors = getKyvernoAttestors(data)
+  const attestations = getKyvernoAttestations(data)
+  const imageRefs = getKyvernoImageReferences(data)
+  const extractors = getKyvernoImageExtractors(data)
+
+  return (
+    <div className="space-y-4">
+      <KyvernoPostureHeader data={data} family="imageValidating" />
+
+      {imageRefs.length > 0 && (
+        <Section title={`Image References (${imageRefs.length})`} icon={ScrollText}>
+          <div className="space-y-1">
+            {imageRefs.map((ref, i) => (
+              <div key={i} className="text-xs font-mono text-theme-text-primary break-all">
+                {ref}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Attestors are the trust anchor — who must have signed. Without one,
+          image verification has nothing to check against. */}
+      {attestors.length > 0 ? (
+        <Section title={`Attestors (${attestors.length})`} icon={Fingerprint}>
+          <div className="space-y-2">
+            {attestors.map((a, i) => (
+              <div key={i} className="card-inner">
+                <div className="flex items-center gap-2 flex-wrap">
+                  {a.name && <span className="text-xs font-medium text-theme-text-primary">{a.name}</span>}
+                  {a.kind && <span className="badge status-neutral">{a.kind}</span>}
+                </div>
+                {a.identity && (
+                  <div className="mt-1 text-xs font-mono text-theme-text-secondary break-all">{a.identity}</div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      ) : (
+        <AlertBanner
+          variant="warning"
+          title="No attestors configured"
+          message="This image policy has no trusted authority to verify signatures against."
+        />
+      )}
+
+      {attestations.length > 0 && (
+        <Section title={`Attestations (${attestations.length})`} icon={ShieldCheck}>
+          <div className="space-y-2">
+            {attestations.map((a, i) => (
+              <div key={i} className="card-inner">
+                <div className="flex items-center gap-2 flex-wrap">
+                  {a.name && <span className="text-xs font-medium text-theme-text-primary">{a.name}</span>}
+                  {a.kind && <span className="badge status-neutral">{a.kind}</span>}
+                </div>
+                {a.type && <div className="mt-1 text-xs font-mono text-theme-text-secondary break-all">{a.type}</div>}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ValidationsSection validations={getKyvernoValidations(data)} />
+
+      {extractors.length > 0 && (
+        <Section title={`Image Extractors (${extractors.length})`} icon={ScrollText} defaultExpanded={false}>
+          <KyvernoExpressionList items={extractors} />
+        </Section>
+      )}
+
+      <KyvernoMatchScopeSection data={data} />
+      <KyvernoVariablesSection data={data} />
+      <KyvernoEvaluationSection data={data} />
+      <ConditionsSection conditions={getKyvernoPolicyConditions(data)} />
+    </div>
+  )
+}
+
+export function KyvernoMutatingPolicyRenderer({ data }: { data: any }) {
+  const mutations = getKyvernoMutations(data)
+  const reinvocation = getKyvernoReinvocationPolicy(data)
+
+  return (
+    <div className="space-y-4">
+      <KyvernoPostureHeader data={data} family="mutating" />
+
+      {mutations.length > 0 && (
+        <Section title={`Mutations (${mutations.length})`} icon={Wand2}>
+          <div className="space-y-2">
+            {mutations.map((m, i) => (
+              <div key={i} className="card-inner-lg">
+                {m.patchType && (
+                  <div className="mb-1">
+                    <span className="badge status-neutral">{m.patchType}</span>
+                  </div>
+                )}
+                <pre className="text-xs text-theme-text-primary font-mono whitespace-pre-wrap break-all">
+                  {m.expression}
+                </pre>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {reinvocation && (
+        <Section title="Reinvocation" icon={Wand2} defaultExpanded={false}>
+          <PropertyList>
+            <Property
+              label="Policy"
+              value={
+                <span className="flex items-center gap-2">
+                  <span className="badge status-neutral">{reinvocation}</span>
+                  <span className="text-xs text-theme-text-tertiary">
+                    {reinvocation === 'IfNeeded'
+                      ? 're-runs when another webhook changes the object'
+                      : 'runs once per admission request'}
+                  </span>
+                </span>
+              }
+            />
+          </PropertyList>
+        </Section>
+      )}
+
+      <KyvernoMatchScopeSection data={data} />
+      <KyvernoVariablesSection data={data} />
+      <KyvernoEvaluationSection data={data} />
+      <ConditionsSection conditions={getKyvernoPolicyConditions(data)} />
+    </div>
+  )
+}
+
+export function KyvernoGeneratingPolicyRenderer({ data }: { data: any }) {
+  const generations = getKyvernoGenerations(data)
+  const settings = getKyvernoGenerationSettings(data)
+
+  return (
+    <div className="space-y-4">
+      <KyvernoPostureHeader data={data} family="generating" />
+
+      {generations.length > 0 && (
+        <Section title={`Generates (${generations.length})`} icon={Sparkles}>
+          <div className="space-y-2">
+            {generations.map((expr, i) => (
+              <div key={i} className="card-inner-lg">
+                <pre className="text-xs text-theme-text-primary font-mono whitespace-pre-wrap break-all">{expr}</pre>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* These three decide what happens to already-generated objects, which
+          is where generation surprises operators: whether existing resources
+          are backfilled, whether edits are reverted, and whether downstream
+          objects survive deleting the policy. */}
+      <Section title="Generation Behavior" icon={Sparkles}>
+        <PropertyList>
+          <Property
+            label="Generate Existing"
+            value={settings.generateExisting ? 'Yes — applies to resources that already exist' : 'No — new resources only'}
+          />
+          <Property
+            label="Synchronize"
+            value={
+              settings.synchronize
+                ? 'Yes — manual edits to generated resources are reverted'
+                : 'No — generated resources are left alone after creation'
+            }
+          />
+          <Property
+            label="Orphan On Delete"
+            value={
+              settings.orphanDownstreamOnPolicyDelete
+                ? 'Yes — generated resources survive deleting this policy'
+                : 'No — generated resources are removed with this policy'
+            }
+          />
+        </PropertyList>
+      </Section>
+
+      <KyvernoMatchScopeSection data={data} />
+      <KyvernoVariablesSection data={data} />
+      <ConditionsSection conditions={getKyvernoPolicyConditions(data)} />
+    </div>
+  )
+}
+
+export function KyvernoDeletingPolicyRenderer({ data }: { data: any }) {
+  const schedule = getKyvernoSchedule(data)
+  const conditions = getKyvernoDeletionConditions(data)
+  const propagation = getKyvernoDeletionPropagationPolicy(data)
+
+  return (
+    <div className="space-y-4">
+      <KyvernoPostureHeader data={data} family="deleting" />
+
+      <Section title="Schedule" icon={Clock}>
+        <PropertyList>
+          <Property
+            label="Cron"
+            value={schedule ? <span className="font-mono">{schedule}</span> : 'Not set — this policy will not run'}
+          />
+          {propagation && <Property label="Deletion Propagation" value={propagation} />}
+        </PropertyList>
+      </Section>
+
+      {/* Without conditions every matched resource is deleted on schedule.
+          That is a materially different blast radius and has to be stated
+          rather than left as an empty section. */}
+      {conditions.length > 0 ? (
+        <Section title={`Deletion Conditions (${conditions.length})`} icon={Trash2}>
+          <KyvernoExpressionList items={conditions} />
+        </Section>
+      ) : (
+        <AlertBanner
+          variant="warning"
+          icon={Trash2}
+          title="No deletion conditions"
+          message="Every resource matched by this policy is deleted when the schedule fires."
+        />
+      )}
+
+      <KyvernoMatchScopeSection data={data} />
+      <KyvernoVariablesSection data={data} />
+      <ConditionsSection conditions={getKyvernoPolicyConditions(data)} />
+    </div>
+  )
+}