@skyhook-io/k8s-ui 1.10.5 → 1.12.0

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

@@ -0,0 +1,264 @@
+// PolicyException and CleanupPolicy renderers.
+//
+// PolicyException is the record of who was let off the hook — the most
+// operationally interesting Kyverno object after the policy itself. One
+// renderer serves both API families; the accessors it calls are
+// group-qualified, so the same component reads whichever shape it is handed.
+
+import { ShieldOff, Filter, Clock, Trash2, AlertTriangle, ScrollText } from 'lucide-react'
+import {
+  Section,
+  PropertyList,
+  Property,
+  ConditionsSection,
+  AlertBanner,
+  LabelSelectorDisplay,
+} from '../../ui/drawer-components'
+import { KyvernoExpressionList } from './KyvernoPolicyShared'
+import {
+  getKyvernoCleanupConditions,
+  getKyvernoCleanupExclude,
+  getKyvernoCleanupLastExecution,
+  getKyvernoCleanupMatch,
+  getKyvernoCleanupMatchedKinds,
+  getKyvernoCleanupPropagationPolicy,
+  getKyvernoCleanupSchedule,
+  getKyvernoExceptedPolicies,
+  getKyvernoExceptionLegacyConditions,
+  getKyvernoExceptionMatch,
+  getKyvernoExceptionMatchConditions,
+  getKyvernoExceptionReportResult,
+  isBlanketKyvernoException,
+  isModernKyvernoPolicyException,
+} from '../resource-utils-kyverno-exceptions'
+
+/**
+ * Renders the legacy any/all match block. Each entry carries a
+ * `resources` selector with kinds/names/namespaces/selector.
+ */
+function LegacyMatchBlock({ match }: { match: any }) {
+  const blocks: Array<{ operator: string; entries: any[] }> = []
+  if (Array.isArray(match?.any)) blocks.push({ operator: 'any', entries: match.any })
+  if (Array.isArray(match?.all)) blocks.push({ operator: 'all', entries: match.all })
+  if (blocks.length === 0) return null
+
+  return (
+    <div className="space-y-2">
+      {blocks.map((block) => (
+        <div key={block.operator}>
+          <div className="text-xs uppercase tracking-wide text-theme-text-tertiary mb-1">Match {block.operator}</div>
+          <div className="space-y-2">
+            {block.entries.map((entry, i) => {
+              const resources = entry?.resources || {}
+              return (
+                <div key={i} className="card-inner">
+                  <PropertyList>
+                    {Array.isArray(resources.kinds) && resources.kinds.length > 0 && (
+                      <Property label="Kinds" value={resources.kinds.join(', ')} />
+                    )}
+                    {Array.isArray(resources.names) && resources.names.length > 0 && (
+                      <Property label="Names" value={resources.names.join(', ')} />
+                    )}
+                    {Array.isArray(resources.namespaces) && resources.namespaces.length > 0 && (
+                      <Property label="Namespaces" value={resources.namespaces.join(', ')} />
+                    )}
+                    {resources.selector && (
+                      <Property label="Selector" value={<LabelSelectorDisplay selector={resources.selector} inline />} />
+                    )}
+                    {resources.namespaceSelector && (
+                      <Property
+                        label="Namespace Selector"
+                        value={<LabelSelectorDisplay selector={resources.namespaceSelector} inline />}
+                      />
+                    )}
+                  </PropertyList>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function KyvernoPolicyExceptionRenderer({ data }: { data: any }) {
+  const isModern = isModernKyvernoPolicyException(data)
+  const excepted = getKyvernoExceptedPolicies(data)
+  const blanket = isBlanketKyvernoException(data)
+  const matchConditions = getKyvernoExceptionMatchConditions(data)
+  const legacyMatch = getKyvernoExceptionMatch(data)
+  const legacyConditions = getKyvernoExceptionLegacyConditions(data)
+  const reportResult = getKyvernoExceptionReportResult(data)
+
+  return (
+    <div className="space-y-4">
+      {/* An exception naming no policy exempts everything in its match scope.
+          That is the widest exemption expressible here and the operator has to
+          see it before anything else. */}
+      {blanket && (
+        <AlertBanner
+          variant="warning"
+          icon={AlertTriangle}
+          title="Blanket exception"
+          message="This exception names no specific policy, so every policy matching its scope is bypassed."
+        />
+      )}
+
+      <div className="card-inner-lg">
+        <div className="flex items-center gap-2 flex-wrap">
+          <span className="text-xs uppercase tracking-wide text-theme-text-tertiary">Exempts</span>
+          <span className={`badge ${blanket ? 'status-alert' : 'status-neutral'}`}>
+            {blanket ? 'All matching policies' : `${excepted.length} ${excepted.length === 1 ? 'policy' : 'policies'}`}
+          </span>
+          <span className="badge status-neutral">{isModern ? 'policies.kyverno.io' : 'kyverno.io'}</span>
+        </div>
+        {/* Kyverno has no expiry field on either shape — the upstream pattern
+            is a companion cleanup policy — so an exception persists until
+            somebody deletes it. */}
+        <div className="mt-2 text-xs text-theme-text-secondary">
+          Exceptions do not expire; this one applies until it is deleted.
+        </div>
+      </div>
+
+      {excepted.length > 0 && (
+        <Section title={`Excepted Policies (${excepted.length})`} icon={ShieldOff}>
+          <div className="space-y-2">
+            {excepted.map((policy, i) => (
+              <div key={i} className="card-inner">
+                <div className="flex items-center gap-2 flex-wrap">
+                  <span className="text-sm font-medium text-theme-text-primary">{policy.name}</span>
+                  {policy.kind && <span className="badge status-neutral">{policy.kind}</span>}
+                </div>
+                {policy.ruleNames.length > 0 ? (
+                  <div className="mt-1 flex items-center gap-1 flex-wrap">
+                    <span className="text-xs text-theme-text-tertiary">Rules:</span>
+                    {policy.ruleNames.map((rule) => (
+                      <span key={rule} className="badge status-neutral">
+                        {rule}
+                      </span>
+                    ))}
+                  </div>
+                ) : (
+                  !isModern && <div className="mt-1 text-xs text-theme-text-tertiary">All rules in this policy</div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {reportResult && (
+        <Section title="Reporting" icon={ScrollText}>
+          <PropertyList>
+            <Property
+              label="Report Result"
+              value={
+                <span className="flex items-center gap-2">
+                  <span className="badge status-neutral">{reportResult}</span>
+                  <span className="text-xs text-theme-text-tertiary">how excepted resources appear in reports</span>
+                </span>
+              }
+            />
+          </PropertyList>
+        </Section>
+      )}
+
+      {legacyMatch && (
+        <Section title="Match Scope" icon={Filter}>
+          <LegacyMatchBlock match={legacyMatch} />
+        </Section>
+      )}
+
+      {matchConditions.length > 0 && (
+        <Section title={`Match Conditions (${matchConditions.length})`} icon={Filter}>
+          <KyvernoExpressionList items={matchConditions} />
+        </Section>
+      )}
+
+      {legacyConditions && (
+        <Section title="Conditions" icon={Filter} defaultExpanded={false}>
+          <pre className="text-xs text-theme-text-secondary font-mono whitespace-pre-wrap break-all">
+            {JSON.stringify(legacyConditions, null, 2)}
+          </pre>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data?.status?.conditions} />
+    </div>
+  )
+}
+
+/**
+ * CleanupPolicy / ClusterCleanupPolicy (kyverno.io/v2), deprecated in Kyverno
+ * 1.18 in favour of DeletingPolicy. Rendered because the installed base runs
+ * it today and "what deleted my resource?" is an expensive question to answer
+ * without it.
+ */
+export function KyvernoCleanupPolicyRenderer({ data }: { data: any }) {
+  const schedule = getKyvernoCleanupSchedule(data)
+  const kinds = getKyvernoCleanupMatchedKinds(data)
+  const lastExecution = getKyvernoCleanupLastExecution(data)
+  const propagation = getKyvernoCleanupPropagationPolicy(data)
+  const match = getKyvernoCleanupMatch(data)
+  const exclude = getKyvernoCleanupExclude(data)
+  const conditions = getKyvernoCleanupConditions(data)
+
+  return (
+    <div className="space-y-4">
+      <div className="card-inner-lg">
+        <div className="flex items-center gap-2 flex-wrap">
+          <span className="text-xs uppercase tracking-wide text-theme-text-tertiary">Deletes</span>
+          <span className="badge status-alert">{kinds.length > 0 ? kinds.join(', ') : 'matched resources'}</span>
+          {schedule ? (
+            <span className="text-xs text-theme-text-secondary">
+              on schedule <span className="font-mono">{schedule}</span>
+            </span>
+          ) : (
+            <span className="text-xs text-theme-text-secondary">no schedule set — this policy will not run</span>
+          )}
+        </div>
+        <div className="mt-2 text-xs text-theme-text-secondary">
+          Deprecated in Kyverno 1.18; DeletingPolicy (policies.kyverno.io) is its replacement.
+        </div>
+      </div>
+
+      <Section title="Schedule" icon={Clock}>
+        <PropertyList>
+          <Property label="Cron" value={schedule ? <span className="font-mono">{schedule}</span> : 'Not set'} />
+          {propagation && <Property label="Deletion Propagation" value={propagation} />}
+          {lastExecution && <Property label="Last Execution" value={lastExecution} />}
+        </PropertyList>
+      </Section>
+
+      {match && (
+        <Section title="Match Scope" icon={Filter}>
+          <LegacyMatchBlock match={match} />
+        </Section>
+      )}
+
+      {exclude && (
+        <Section title="Excluded" icon={Filter} defaultExpanded={false}>
+          <LegacyMatchBlock match={exclude} />
+        </Section>
+      )}
+
+      {conditions ? (
+        <Section title="Deletion Conditions" icon={Trash2}>
+          <pre className="text-xs text-theme-text-secondary font-mono whitespace-pre-wrap break-all">
+            {JSON.stringify(conditions, null, 2)}
+          </pre>
+        </Section>
+      ) : (
+        <AlertBanner
+          variant="warning"
+          icon={Trash2}
+          title="No deletion conditions"
+          message="Every resource matched by this policy is deleted when the schedule fires."
+        />
+      )}
+
+      <ConditionsSection conditions={data?.status?.conditions} />
+    </div>
+  )
+}

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

@@ -0,0 +1,212 @@
+// Shared building blocks for the modern Kyverno CEL policy family
+// (policies.kyverno.io). Each of the five policy kinds gets its own thin
+// renderer; everything they genuinely have in common lives here so the
+// enforcement-posture answer can't drift between them.
+
+import { Shield, Filter, Code, AlertTriangle } from 'lucide-react'
+import { Section, PropertyList, Property, LabelSelectorDisplay, AlertBanner } from '../../ui/drawer-components'
+import {
+  formatKyvernoResourceRule,
+  getKyvernoEnforcementPosture,
+  getKyvernoExcludeResourceRules,
+  getKyvernoFailurePolicy,
+  getKyvernoMatchConditions,
+  getKyvernoNamespaceSelector,
+  getKyvernoObjectSelector,
+  getKyvernoPolicyReady,
+  getKyvernoPolicyStatusMessage,
+  getKyvernoResourceRules,
+  getKyvernoVariables,
+  isKyvernoAdmissionEnabled,
+  isKyvernoBackgroundEnabled,
+  type KyvernoNamedExpression,
+  type KyvernoPolicyFamily,
+} from '../resource-utils-kyverno-modern'
+
+const POSTURE_TONE: Record<string, string> = {
+  healthy: 'status-healthy',
+  degraded: 'status-degraded',
+  alert: 'status-alert',
+  unhealthy: 'status-unhealthy',
+  neutral: 'status-neutral',
+  unknown: 'status-unknown',
+}
+
+/**
+ * The answer to the operator's first question — "does this block, and what
+ * does it match?" — rendered above everything else.
+ *
+ * It states the EFFECTIVE posture, not the declared one. A policy declaring
+ * `validationActions: [Deny]` with admission evaluation disabled blocks
+ * nothing, and showing it as a red "Deny" badge would report a cluster as
+ * protected when it isn't.
+ */
+export function KyvernoPostureHeader({
+  data,
+  family,
+}: {
+  data: any
+  family: KyvernoPolicyFamily | undefined
+}) {
+  const posture = getKyvernoEnforcementPosture(data, family)
+  const ready = getKyvernoPolicyReady(data)
+  const statusMessage = getKyvernoPolicyStatusMessage(data)
+  const rules = getKyvernoResourceRules(data)
+
+  return (
+    <div className="space-y-2">
+      {/* A policy that failed to compile enforces nothing whatever its spec
+          says — the most common "why isn't my policy working" cause, so it
+          outranks the posture badge. */}
+      {ready === false && (
+        <AlertBanner
+          variant="error"
+          icon={AlertTriangle}
+          title="Policy not ready"
+          message={
+            statusMessage ||
+            'The controller has not accepted this policy. It is not being enforced — check the CEL expressions for compile errors.'
+          }
+        />
+      )}
+
+      <div className="card-inner-lg">
+        <div className="flex items-center gap-2 flex-wrap">
+          <span className="text-xs uppercase tracking-wide text-theme-text-tertiary">Enforcement</span>
+          <span className={`badge ${POSTURE_TONE[posture.level] || 'status-unknown'}`}>{posture.label}</span>
+          {posture.summary && <span className="text-xs text-theme-text-secondary">{posture.summary}</span>}
+        </div>
+
+        {posture.note && <div className="mt-2 text-xs text-theme-text-secondary">{posture.note}</div>}
+
+        {rules.length > 0 && (
+          <div className="mt-3">
+            <div className="text-xs uppercase tracking-wide text-theme-text-tertiary mb-1">Applies to</div>
+            <div className="space-y-1">
+              {rules.map((rule, i) => (
+                <div key={i} className="text-xs font-mono text-theme-text-primary break-all">
+                  {formatKyvernoResourceRule(rule)}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Match scope beyond the headline resourceRules — exclusions and selectors.
+ * The header already shows what the policy applies to; this section is the
+ * detail an operator opens when the headline doesn't explain why a given
+ * resource was or wasn't caught.
+ */
+export function KyvernoMatchScopeSection({ data }: { data: any }) {
+  const excludeRules = getKyvernoExcludeResourceRules(data)
+  const namespaceSelector = getKyvernoNamespaceSelector(data)
+  const objectSelector = getKyvernoObjectSelector(data)
+  const matchConditions = getKyvernoMatchConditions(data)
+
+  const hasSelectors =
+    (namespaceSelector && Object.keys(namespaceSelector).length > 0) ||
+    (objectSelector && Object.keys(objectSelector).length > 0)
+
+  if (excludeRules.length === 0 && !hasSelectors && matchConditions.length === 0) return null
+
+  return (
+    <Section title="Match Scope" icon={Filter}>
+      <PropertyList>
+        {namespaceSelector && Object.keys(namespaceSelector).length > 0 && (
+          <Property label="Namespace Selector" value={<LabelSelectorDisplay selector={namespaceSelector} inline />} />
+        )}
+        {objectSelector && Object.keys(objectSelector).length > 0 && (
+          <Property label="Object Selector" value={<LabelSelectorDisplay selector={objectSelector} inline />} />
+        )}
+      </PropertyList>
+
+      {excludeRules.length > 0 && (
+        <div className="mt-3">
+          <div className="text-xs uppercase tracking-wide text-theme-text-tertiary mb-1">Excluded</div>
+          <div className="space-y-1">
+            {excludeRules.map((rule, i) => (
+              <div key={i} className="text-xs font-mono text-theme-text-secondary break-all">
+                {formatKyvernoResourceRule(rule)}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {matchConditions.length > 0 && (
+        <div className="mt-3">
+          <div className="text-xs uppercase tracking-wide text-theme-text-tertiary mb-1">
+            Match Conditions ({matchConditions.length})
+          </div>
+          <KyvernoExpressionList items={matchConditions} />
+        </div>
+      )}
+    </Section>
+  )
+}
+
+/** A list of named CEL expressions in a mono block. */
+export function KyvernoExpressionList({ items }: { items: KyvernoNamedExpression[] }) {
+  if (items.length === 0) return null
+  return (
+    <div className="space-y-2">
+      {items.map((item, i) => (
+        <div key={i} className="card-inner">
+          {item.name && <div className="text-xs font-medium text-theme-text-primary mb-1">{item.name}</div>}
+          <pre className="text-xs text-theme-text-secondary font-mono whitespace-pre-wrap break-all">
+            {item.expression}
+          </pre>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function KyvernoVariablesSection({ data }: { data: any }) {
+  const variables = getKyvernoVariables(data)
+  if (variables.length === 0) return null
+  return (
+    <Section title={`Variables (${variables.length})`} icon={Code} defaultExpanded={false}>
+      <KyvernoExpressionList items={variables} />
+    </Section>
+  )
+}
+
+/**
+ * The evaluation/webhook knobs shared by the four admission-shaped kinds.
+ * DeletingPolicy has none of these — it is scheduled, not admission-driven —
+ * and deliberately does not render this section.
+ */
+export function KyvernoEvaluationSection({ data }: { data: any }) {
+  const failurePolicy = getKyvernoFailurePolicy(data)
+  return (
+    <Section title="Evaluation" icon={Shield} defaultExpanded={false}>
+      <PropertyList>
+        <Property label="Admission" value={isKyvernoAdmissionEnabled(data) ? 'Enabled' : 'Disabled'} />
+        <Property label="Background Scans" value={isKyvernoBackgroundEnabled(data) ? 'Enabled' : 'Disabled'} />
+        {failurePolicy && (
+          <Property
+            label="Failure Policy"
+            value={
+              <span className="flex items-center gap-2">
+                <span className={`badge ${failurePolicy === 'Ignore' ? 'status-degraded' : 'status-neutral'}`}>
+                  {failurePolicy}
+                </span>
+                <span className="text-xs text-theme-text-tertiary">
+                  {failurePolicy === 'Ignore'
+                    ? 'requests are admitted when the engine itself errors'
+                    : 'requests are rejected when the engine itself errors'}
+                </span>
+              </span>
+            }
+          />
+        )}
+      </PropertyList>
+    </Section>
+  )
+}

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

@@ -16,7 +16,10 @@ export function OCIRepositoryRenderer({ data }: OCIRepositoryRendererProps) {
   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/PodRenderer.tsx

@@ -1,6 +1,8 @@
 import { useState, type ReactNode, type JSX } from 'react'
 import { Server, HardDrive, Terminal as TerminalIcon, FileText, Activity, CirclePlay, FolderOpen, List, Eye, EyeOff, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
+import { PolicySection } from './PolicySection'
+import type { PolicyResourceResponse } from '../../../types/policy'
 import { Section, PropertyList, Property, ConditionsSection, CopyHandler, AlertBanner, ResourceLink, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { formatResources, formatDuration, getPodProblems, getPodPhaseDisplay, healthColors, SEVERITY_DOT_COLOR, getDefaultContainerName } from '../resource-utils'
 import { getResourceStatusColor, SEVERITY_BADGE_BORDERED } from '../../../utils/badge-colors'
@@ -108,6 +110,10 @@ interface PodRendererProps {
   rbacData?: RBACSubjectResponse | null
   rbacLoading?: boolean
   rbacError?: Error | null
+  /** Undefined means the host didn't wire the fetch; the section is omitted. */
+  policyData?: PolicyResourceResponse | null
+  policyLoading?: boolean
+  policyError?: Error | null
 }
 
 // ── Env vars section — extracted to use hooks (useState for reveal) ──────────
@@ -287,6 +293,9 @@ export function PodRenderer({
   rbacData,
   rbacLoading,
   rbacError,
+  policyData,
+  policyLoading,
+  policyError,
 }: PodRendererProps) {
   const containerStatuses = data.status?.containerStatuses || []
   const containers = data.spec?.containers || []
@@ -582,6 +591,10 @@ export function PodRenderer({
       )}
 
       {/* Container Status */}
+      {policyData !== undefined && (
+        <PolicySection data={policyData} loading={policyLoading} error={policyError} />
+      )}
+
       <Section title="Containers" icon={HardDrive} defaultExpanded>
         <div className="space-y-3">
           {containers.map((container: any) => {

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