@skyhook-io/k8s-ui 1.11.0 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/gitops/GitOpsStatusBadge.tsx

@@ -2,6 +2,8 @@ import { clsx } from 'clsx'
 import { CheckCircle2, AlertCircle, Loader2, Pause, HelpCircle, XCircle } from 'lucide-react'
 import type { GitOpsStatus, SyncStatus, GitOpsHealthStatus } from '../../types/gitops'
 import { SEVERITY_BADGE_BORDERED, SEVERITY_BADGE } from '../../utils/badge-colors'
+import { formatCompactAge } from '../../utils/format'
+import { Tooltip } from '../ui/Tooltip'
 
 interface GitOpsStatusBadgeProps {
   status: GitOpsStatus
@@ -176,3 +178,41 @@ export function HealthStatusBadge({ health }: { health: GitOpsHealthStatus }) {
     </span>
   )
 }
+
+
+/**
+ * ReconcilingIndicator rides alongside the sync badge rather than replacing it,
+ * the same primary-plus-secondary shape the Velero schedule cell uses for a
+ * paused-and-rejected schedule.
+ *
+ * A pass being in flight says nothing about whether the declared state is
+ * applied, so it must not touch the sync word — but a pass that never finishes
+ * is the one fault nothing else in the product notices, and on a healthy object
+ * a real pass completes in milliseconds. In practice this only becomes visible
+ * when a controller is wedged, which is exactly when it should be.
+ */
+export function ReconcilingIndicator({
+  reconciling,
+  since,
+  sync,
+}: {
+  reconciling?: boolean
+  since?: string
+  /** The sync word shown beside this. Omitted when there is no badge alongside. */
+  sync?: SyncStatus
+}) {
+  // Suppressed when the sync badge already says Reconciling — it carries the
+  // same fact and spins for it. Showing both puts two spinners on one row for
+  // one thing. The secondary exists for the case the primary CANNOT express:
+  // an applied object whose reconcile pass never finished.
+  if (!reconciling || sync === 'Reconciling') return null
+  const age = formatCompactAge(since)
+  const tip = age
+    ? `A reconcile pass has been in flight for ${age}. On a healthy resource a pass finishes in milliseconds, so a long-running one usually means the controller is stuck.`
+    : 'A reconcile pass is in flight.'
+  return (
+    <Tooltip content={tip}>
+      <Loader2 className="w-3 h-3 shrink-0 animate-spin text-theme-text-tertiary" aria-label="Reconcile pass in flight" />
+    </Tooltip>
+  )
+}

package/src/components/gitops/GitOpsTableView.tsx

@@ -24,7 +24,7 @@ import {
   Zap,
 } from 'lucide-react'
 
-import { HealthStatusBadge, SyncStatusBadge } from './GitOpsStatusBadge'
+import { HealthStatusBadge, ReconcilingIndicator, SyncStatusBadge } from './GitOpsStatusBadge'
 import { Tooltip } from '../ui/Tooltip'
 import { Input } from '../ui/Input'
 import { PageHeader } from '../ui/PageHeader'
@@ -150,6 +150,14 @@ export interface GitOpsRow {
   sync: string
   health: string
   suspended: boolean
+  /**
+   * A reconcile pass is executing. Deliberately separate from sync: a pass
+   * being in flight says nothing about whether the declared state is applied,
+   * but a pass that never finishes is the one fault nothing else in the
+   * product notices.
+   */
+  reconciling?: boolean
+  reconcilingSince?: string
   repository: string
   targetRevision: string
   path: string
@@ -1300,7 +1308,12 @@ function GitOpsTable({
               <TableCell>
                 {row.terminating
                   ? <span className="text-[11px] text-theme-text-tertiary">—</span>
-                  : <SyncStatusBadge sync={row.sync as any} suspended={row.suspended} />}
+                  : (
+                    <span className="inline-flex items-center gap-1 min-w-0">
+                      <SyncStatusBadge sync={row.sync as any} suspended={row.suspended} />
+                      <ReconcilingIndicator reconciling={row.reconciling} since={row.reconcilingSince} sync={row.sync as any} />
+                    </span>
+                  )}
               </TableCell>
               <TableCell>
                 {row.terminating
@@ -1529,6 +1542,7 @@ function GitOpsTile({
           ) : (
             <>
               <SyncStatusBadge sync={row.sync as any} suspended={row.suspended} />
+              <ReconcilingIndicator reconciling={row.reconciling} since={row.reconcilingSince} sync={row.sync as any} />
               <HealthStatusBadge health={row.health as any} />
             </>
           )}
@@ -1896,6 +1910,8 @@ export function normalizeArgoApplication(resource: any): GitOpsRow {
     labels: (resource.metadata?.labels ?? {}) as Record<string, string>,
     sync: status?.sync ?? 'Unknown',
     health: status?.health ?? 'Unknown',
+    reconciling: status?.reconciling,
+    reconcilingSince: status?.reconcilingSince,
     suspended: (status?.suspended ?? false) || isArgoSuspendedByRadar(resource),
     repository: resource.spec?.source?.repoURL ?? '',
     targetRevision: resource.spec?.source?.targetRevision ?? '',
@@ -1932,6 +1948,8 @@ export function normalizeFluxKustomization(resource: any, fluxSourceUrls?: Map<s
     labels: (resource.metadata?.labels ?? {}) as Record<string, string>,
     sync: status?.sync ?? 'Unknown',
     health: status?.health ?? 'Unknown',
+    reconciling: status?.reconciling,
+    reconcilingSince: status?.reconcilingSince,
     suspended: status?.suspended ?? resource.spec?.suspend === true,
     repository,
     targetRevision: resource.status?.lastAppliedRevision ?? resource.status?.lastAttemptedRevision ?? '',
@@ -1969,6 +1987,8 @@ export function normalizeFluxHelmRelease(resource: any, fluxSourceUrls?: Map<str
     labels: (resource.metadata?.labels ?? {}) as Record<string, string>,
     sync: status?.sync ?? 'Unknown',
     health: status?.health ?? 'Unknown',
+    reconciling: status?.reconciling,
+    reconcilingSince: status?.reconcilingSince,
     suspended: status?.suspended ?? resource.spec?.suspend === true,
     repository,
     targetRevision: chartSpec.version ?? resource.status?.lastAttemptedRevision ?? '',

package/src/components/gitops/ReconcilingIndicator.test.tsx

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { ReconcilingIndicator } from './GitOpsStatusBadge'
+
+const LABEL = 'Reconcile pass in flight'
+
+// A reconcile pass in flight is worth showing only where the sync word cannot
+// already say it. Radar's own precedent for a secondary indicator (the Velero
+// schedule cell's paused-and-rejected case) suppresses the icon when the badge
+// carries the same fact, and without that rule one row shows two spinners.
+describe('ReconcilingIndicator', () => {
+  it('shows on an applied object whose pass never finished', () => {
+    // The case the sync word cannot express, and the reason this exists: a
+    // wedged controller behind a correct "Synced".
+    const html = renderToString(
+      <ReconcilingIndicator reconciling since="2026-08-11T06:05:00Z" sync="Synced" />,
+    )
+    expect(html).toContain(LABEL)
+  })
+
+  it('is suppressed when the sync badge already reports Reconciling', () => {
+    const html = renderToString(
+      <ReconcilingIndicator reconciling since="2026-08-11T06:05:00Z" sync="Reconciling" />,
+    )
+    expect(html).toBe('')
+  })
+
+  it('is absent when nothing is in flight', () => {
+    expect(renderToString(<ReconcilingIndicator reconciling={false} sync="Synced" />)).toBe('')
+  })
+})

package/src/components/gitops/detail-helpers.ts

@@ -100,7 +100,10 @@ export function getGitOpsResourceStatus(kind: string, resource: any): GitOpsStat
     return argoStatusToGitOpsStatus(resource?.status ?? {})
   }
   const conditions = (resource?.status?.conditions ?? []) as FluxCondition[]
-  return fluxConditionsToGitOpsStatus(conditions, resource?.spec?.suspend === true)
+  return fluxConditionsToGitOpsStatus(conditions, resource?.spec?.suspend === true, {
+    generation: resource?.metadata?.generation,
+    observedGeneration: resource?.status?.observedGeneration,
+  })
 }
 
 // getGitOpsTool routes a kind+group to 'argo' or 'flux'. Same shape used

package/src/components/resources/ResourcesView.tsx

@@ -707,6 +707,7 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
   policyreports: [
     { key: 'name', label: 'Name' },
     { key: 'namespace', label: 'Namespace', width: 'w-36' },
+    { key: 'scope', label: 'Subject', width: 'w-56' },
     { key: 'status', label: 'Status', width: 'w-32' },
     { key: 'pass', label: 'Pass', width: 'w-16' },
     { key: 'fail', label: 'Fail', width: 'w-16' },
@@ -717,6 +718,7 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
   ],
   clusterpolicyreports: [
     { key: 'name', label: 'Name' },
+    { key: 'scope', label: 'Subject', width: 'w-56' },
     { key: 'status', label: 'Status', width: 'w-32' },
     { key: 'pass', label: 'Pass', width: 'w-16' },
     { key: 'fail', label: 'Fail', width: 'w-16' },

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

@@ -14,7 +14,10 @@ export function AlertRenderer({ data }: AlertRendererProps) {
   const conditions = (status.conditions || []) as FluxCondition[]
 
   // 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/CNPGClusterRenderer.tsx

@@ -7,6 +7,7 @@ import {
   getCNPGClusterImage,
   getCNPGClusterStorage,
   getCNPGClusterStorageClass,
+  getCNPGVolumeHealth,
   getCNPGClusterWALStorage,
   getCNPGClusterBootstrapMethod,
   getCNPGClusterUpdateStrategy,
@@ -43,6 +44,7 @@ export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererPro
   const monitoring = getCNPGClusterMonitoring(data)
   const isReplica = getCNPGClusterIsReplica(data)
   const walStorage = getCNPGClusterWALStorage(data)
+  const volumeHealth = getCNPGVolumeHealth(data)
   const postgresParams = getCNPGClusterPostgresParams(data)
   const instanceNames = getCNPGClusterInstanceNames(data)
   const bootstrapMethod = getCNPGClusterBootstrapMethod(data)
@@ -210,6 +212,14 @@ export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererPro
         />
       )}
 
+      {volumeHealth && volumeHealth.unusable.length > 0 && (
+        <AlertBanner
+          variant="error"
+          title="Unusable storage volume"
+          message={`${volumeHealth.unusable.join(', ')} cannot be used because a paired volume is missing. An instance backed by it will not start, and the cluster cannot return to full size until the volume is restored or removed.`}
+        />
+      )}
+
       {/* Cluster Overview */}
       <Section title="Cluster Overview" icon={Database} defaultExpanded>
         <PropertyList>
@@ -290,6 +300,20 @@ export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererPro
         <PropertyList>
           <Property label="Data Size" value={getCNPGClusterStorage(data)} />
           <Property label="Storage Class" value={getCNPGClusterStorageClass(data)} />
+          {/* Requested size and class are spec-side intentions. These are what the
+              operator reports about the volumes that actually exist. */}
+          {volumeHealth?.total !== undefined && (
+            <Property label="Volumes" value={`${volumeHealth.healthy.length}/${volumeHealth.total} healthy`} />
+          )}
+          {volumeHealth && volumeHealth.unusable.length > 0 && (
+            <Property label="Unusable" value={volumeHealth.unusable.join(', ')} />
+          )}
+          {volumeHealth && volumeHealth.resizing.length > 0 && (
+            <Property label="Resizing" value={volumeHealth.resizing.join(', ')} />
+          )}
+          {volumeHealth && volumeHealth.dangling.length > 0 && (
+            <Property label="Detached" value={volumeHealth.dangling.join(', ')} />
+          )}
         </PropertyList>
         {walStorage && (
           <div className="mt-2 pt-2 border-t border-theme-border">

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

@@ -8,6 +8,7 @@ import {
   getCNPGPoolerParameters,
   getCNPGPoolerAuthQuery,
   getCNPGPoolerAuthQuerySecret,
+  isCNPGPoolerPaused,
 } from '../resource-utils-cnpg'
 
 interface CNPGPoolerRendererProps {
@@ -23,6 +24,7 @@ export function CNPGPoolerRenderer({ data, onNavigate }: CNPGPoolerRendererProps
   // CR never establishes.
   const scheduled = data.status?.instances ?? 0
   const isDegraded = desired > 0 && scheduled < desired
+  const isPaused = isCNPGPoolerPaused(data)
   const clusterName = getCNPGPoolerCluster(data)
   const parameters = getCNPGPoolerParameters(data)
   const authQuery = getCNPGPoolerAuthQuery(data)
@@ -39,12 +41,21 @@ export function CNPGPoolerRenderer({ data, onNavigate }: CNPGPoolerRendererProps
         />
       )}
 
+      {isPaused && (
+        <AlertBanner
+          variant="warning"
+          title="Pooler Paused"
+          message="PgBouncer is paused, so client connections are held rather than served. The pods stay scheduled and Ready throughout, so nothing else about this Pooler will look wrong."
+        />
+      )}
+
       {/* Pooler Configuration */}
       <Section title="Pooler Configuration" icon={Users} defaultExpanded>
         <PropertyList>
           <Property label="Type" value={getCNPGPoolerType(data)} />
           <Property label="Pool Mode" value={getCNPGPoolerMode(data)} />
           <Property label="Instances Scheduled" value={getCNPGPoolerInstances(data)} />
+          {isPaused && <Property label="PgBouncer" value="Paused" />}
         </PropertyList>
       </Section>
 

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/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) => {