@skyhook-io/k8s-ui 1.12.0 → 1.13.3

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>
       )}

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

@@ -0,0 +1,303 @@
+import { useState } from 'react'
+import { clsx } from 'clsx'
+import { ListChecks, Workflow, Boxes, FileWarning } from 'lucide-react'
+import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { HEALTH_BADGE_COLORS, SEVERITY_BADGE } from '../../../utils/badge-colors'
+import { formatAge } from '../resource-utils'
+import {
+  getKyvernoRequestType,
+  getKyvernoRequestTriggers,
+  getKyvernoRequestGenerated,
+  getKyvernoRequestState,
+  getKyvernoRequestPolicy,
+  getKyvernoRequestMessage,
+  getKyvernoReportSubject,
+  getKyvernoReportSource,
+  getKyvernoReportSummary,
+  getKyvernoReportResults,
+  kyvernoReportTimestamp,
+} from '../resource-utils-kyverno-queue'
+
+type Nav = (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+
+/** Long trigger lists fold at the same point as the house relationship lists. */
+const FOLD = 10
+
+function RefList({
+  refs,
+  onNavigate,
+  empty,
+}: {
+  refs: Array<{ apiVersion?: string; kind?: string; name?: string; namespace?: string }>
+  onNavigate?: Nav
+  empty: string
+}) {
+  const [expanded, setExpanded] = useState(false)
+  if (refs.length === 0) return <div className="text-sm text-theme-text-tertiary">{empty}</div>
+
+  const shown = expanded ? refs : refs.slice(0, FOLD)
+  return (
+    <div className="space-y-1.5">
+      <div className="flex flex-wrap gap-1.5">
+        {shown.map((r, i) => (
+          <ResourceLink
+            key={`${r.kind}/${r.namespace}/${r.name}/${i}`}
+            name={r.name ?? ''}
+            kind={r.kind ?? ''}
+            namespace={r.namespace ?? ''}
+            group={r.apiVersion?.includes('/') ? r.apiVersion.split('/')[0] : undefined}
+            onNavigate={onNavigate}
+          />
+        ))}
+      </div>
+      {refs.length > FOLD && (
+        <button
+          className="text-xs text-theme-text-secondary hover:text-theme-text-primary"
+          onClick={() => setExpanded(!expanded)}
+        >
+          {expanded ? 'Show fewer' : `Show all ${refs.length}`}
+        </button>
+      )}
+    </div>
+  )
+}
+
+/**
+ * UpdateRequest — the record of work Kyverno queued rather than did inline.
+ *
+ * It is where a generation or a mutate-existing that silently stopped is
+ * diagnosed: the policy looks Ready, the target never appears, and the only
+ * evidence is a request sitting in Pending.
+ *
+ * The two request types are shaped so differently that one renderer reading a
+ * single field set would be blank for half of them — see the accessors.
+ */
+export function KyvernoUpdateRequestRenderer({ data, onNavigate }: { data: any; onNavigate?: Nav }) {
+  const type = getKyvernoRequestType(data)
+  const state = getKyvernoRequestState(data)
+  const triggers = getKyvernoRequestTriggers(data)
+  const generated = getKyvernoRequestGenerated(data)
+  const policy = getKyvernoRequestPolicy(data)
+  const message = getKyvernoRequestMessage(data)
+  // Every trigger in one request comes from the same rule; a generate request
+  // repeats it per entry, a mutate request states it once.
+  const rule = data?.spec?.rule || triggers.find((t) => t.rule)?.rule
+  const deletesDownstream = data?.spec?.deleteDownstream === true || triggers.some((t) => t.deleteDownstream)
+
+  return (
+    <>
+      {state.level === 'unhealthy' && (
+        <AlertBanner
+          variant="error"
+          title="This request failed"
+          message={message || 'Kyverno could not complete this request. The resources below were not updated.'}
+        />
+      )}
+      {state.level === 'degraded' && (
+        <AlertBanner
+          variant="warning"
+          title="Still queued"
+          // Pending is normal for seconds and a symptom for longer, and this
+          // object carries no timestamp of its own beyond creation.
+          message="Kyverno has not processed this request yet. If it stays here, the background controller is not running or cannot reach what it needs."
+        />
+      )}
+
+      <Section title="Request" icon={Workflow} defaultExpanded>
+        <PropertyList>
+          <Property
+            label="State"
+            value={
+              <span className={clsx('badge', HEALTH_BADGE_COLORS[state.level as keyof typeof HEALTH_BADGE_COLORS])}>
+                {state.text}
+              </span>
+            }
+          />
+          <Property label="Type" value={type === 'unknown' ? '-' : type} />
+          {policy && (
+            <Property
+              label="Policy"
+              value={
+                // `spec.policy` is a bare name with no kind and no namespace, and
+                // a namespaced Policy may share it with a ClusterPolicy. A
+                // qualified name is the one case that identifies itself; anything
+                // else links to a page that may not be the policy that queued
+                // this, so it stays plain text rather than guessing.
+                policy.includes('/') ? (
+                  <ResourceLink
+                    name={policy.split('/')[1]}
+                    // `policies` is what the API serves and what a URL can be
+                    // built from; `kyvernopolicies` is an internal display alias
+                    // and 400s when asked for. The group is what disambiguates.
+                    kind="policies"
+                    namespace={policy.split('/')[0]}
+                    group="kyverno.io"
+                    label={policy}
+                    onNavigate={onNavigate}
+                  />
+                ) : (
+                  policy
+                )
+              }
+            />
+          )}
+          {rule && <Property label="Rule" value={rule} />}
+          <Property
+            label="On trigger delete"
+            value={
+              deletesDownstream ? (
+                <span className="text-warning-text">
+                  Removes what this rule created for it
+                </span>
+              ) : (
+                'Leaves what this rule created in place'
+              )
+            }
+          />
+          {data?.metadata?.creationTimestamp && (
+            <Property label="Queued" value={`${formatAge(data.metadata.creationTimestamp)} ago`} />
+          )}
+        </PropertyList>
+        {message && state.level !== 'unhealthy' && (
+          <div className="mt-2 pt-2 border-t border-theme-border text-xs text-theme-text-secondary">{message}</div>
+        )}
+      </Section>
+
+      <Section title={`Triggered By (${triggers.length})`} icon={ListChecks} defaultExpanded>
+        <RefList
+          refs={triggers}
+          onNavigate={onNavigate}
+          // A queued generate request has not been given its triggers yet, so
+          // the empty list means "not written down", not "acts on nothing".
+          empty={
+            state.level === 'degraded'
+              ? 'Kyverno has not recorded what this request is for yet.'
+              : 'This request names no trigger, so there is nothing for it to act on.'
+          }
+        />
+      </Section>
+
+      {type === 'generate' && (
+        <Section title={`Created (${generated.length})`} icon={Boxes} defaultExpanded>
+          <RefList
+            refs={generated}
+            onNavigate={onNavigate}
+            empty={
+              state.level === 'healthy'
+                ? 'Kyverno records nothing created for this request.'
+                : 'Nothing has been created yet.'
+            }
+          />
+        </Section>
+      )}
+    </>
+  )
+}
+
+// Same mapping the policy coverage view uses, so a result reads identically
+// wherever it appears.
+const RESULT_TONE: Record<string, string> = {
+  pass: SEVERITY_BADGE.success,
+  fail: SEVERITY_BADGE.error,
+  warn: SEVERITY_BADGE.warning,
+  error: SEVERITY_BADGE.alert,
+  skip: SEVERITY_BADGE.neutral,
+}
+
+/**
+ * EphemeralReport — a background scan's findings for one resource, before they
+ * are folded into a PolicyReport.
+ *
+ * Worth a surface because it is what exists during a scan, and because a
+ * cluster mid-migration can show findings here that have not reached any
+ * PolicyReport yet. It is also genuinely short-lived: an empty list means the
+ * scan has finished, not that nothing was checked.
+ */
+export function KyvernoEphemeralReportRenderer({ data, onNavigate }: { data: any; onNavigate?: Nav }) {
+  const subject = getKyvernoReportSubject(data)
+  const summary = getKyvernoReportSummary(data)
+  const results = getKyvernoReportResults(data)
+  const source = getKyvernoReportSource(data)
+
+  return (
+    <>
+      <Section title="Scan" icon={FileWarning} defaultExpanded>
+        <PropertyList>
+          <Property
+            label="About"
+            value={
+              subject?.name ? (
+                <ResourceLink
+                  name={subject.name}
+                  kind={subject.kind ?? ''}
+                  namespace={subject.namespace ?? ''}
+                  group={subject.apiVersion?.includes('/') ? subject.apiVersion.split('/')[0] : undefined}
+                  onNavigate={onNavigate}
+                />
+              ) : subject?.kind ? (
+                // The subject is gone; the labels still say what it was.
+                `${subject.kind} (deleted)`
+              ) : (
+                '-'
+              )
+            }
+          />
+          {source && <Property label="Produced by" value={source.replace(/-/g, ' ')} />}
+          <Property
+            label="Outcome"
+            value={
+              summary.total === 0
+                ? 'Nothing was checked'
+                : [
+                    summary.fail ? `${summary.fail} fail` : '',
+                    summary.error ? `${summary.error} error` : '',
+                    summary.warn ? `${summary.warn} warn` : '',
+                    summary.pass ? `${summary.pass} pass` : '',
+                    summary.skip ? `${summary.skip} skipped` : '',
+                  ]
+                    .filter(Boolean)
+                    .join(' · ')
+            }
+          />
+        </PropertyList>
+      </Section>
+
+      <Section title={`Results (${results.length})`} icon={ListChecks} defaultExpanded>
+        {results.length === 0 ? (
+          <div className="text-sm text-theme-text-tertiary">
+            This report carries no results. Kyverno deletes these once the scan is folded into a
+            PolicyReport, so an empty one is finished work rather than a problem.
+          </div>
+        ) : (
+          <div className="space-y-1">
+            {results.map((r: any, i: number) => {
+              const at = kyvernoReportTimestamp(r?.timestamp)
+              return (
+                <div
+                  key={`${r?.policy}/${r?.rule}/${i}`}
+                  className="flex items-baseline gap-2 text-xs py-1 border-b border-theme-border/30 last:border-b-0"
+                >
+                  <span
+                    className={clsx('badge badge-sm shrink-0', RESULT_TONE[r?.result] || SEVERITY_BADGE.neutral)}
+                  >
+                    {r?.result || '-'}
+                  </span>
+                  <span className="text-theme-text-secondary truncate">{r?.policy || '-'}</span>
+                  {r?.rule && <span className="text-theme-text-tertiary truncate">/ {r.rule}</span>}
+                  {r?.message && (
+                    <span className="text-theme-text-tertiary truncate" title={r.message}>
+                      {r.message}
+                    </span>
+                  )}
+                  {at && (
+                    <span className="ml-auto shrink-0 text-theme-text-tertiary">{formatAge(at)} ago</span>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </Section>
+    </>
+  )
+}