@skyhook-io/k8s-ui 1.16.3 → 1.17.1

package/src/components/checks/ChecksView.tsx

@@ -16,6 +16,7 @@ import {
   SEVERITY_TEXT_CLASS,
 } from './severity'
 import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
+import { CopyableCommand } from '../trace/TracePanel'
 import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
 import { CORE_RESOURCES } from '../../utils/api-resources'
 
@@ -28,6 +29,9 @@ const AUDIT_INPUT_LABELS = new Map<string, string>([
   ['replicaset-ownership', 'ReplicaSet ownership'],
   ['configmap-references', 'ConfigMap references'],
   ['secret-references', 'Secret references'],
+  ['pvc-consumers', 'PVC consumers'],
+  ['pv-deletion-events', 'PV deletion events'],
+  ['pv-release-time', 'PV release time'],
 ])
 
 // Leading severity glyph, one per tier of the 4-tier ladder: critical = octagon,
@@ -101,6 +105,9 @@ export interface ChecksViewProps {
    *  tab governs hiding there). Operate on the whole check, fleet-wide. */
   onHideCheck?: (checkID: string, title: string) => void
   onHideCategory?: (category: string) => void
+  /** Per-resource opt-out annotation the source Radar honors. Omit when it
+   *  doesn't, so the card never suggests an annotation that does nothing. */
+  ignoreChecksAnnotation?: string
 }
 
 // A check rolled up across every cluster it fires on — one row of the fleet
@@ -122,7 +129,7 @@ const CHECKS_FILTER_SCHEMA = defineFilterSchema({
   q: { param: 'q', type: 'text' },
 })
 
-export function ChecksView({ checks, catalog, anyData, evaluated, missingInputs = [], resourceHref, onResourceClick, clusterLabel, clusterLabelById, clusterFilter: clusterFilterProp, onClusterFilterChange, emptyAction, onHideCheck, onHideCategory }: ChecksViewProps) {
+export function ChecksView({ checks, catalog, anyData, evaluated, missingInputs = [], resourceHref, onResourceClick, clusterLabel, clusterLabelById, clusterFilter: clusterFilterProp, onClusterFilterChange, emptyAction, onHideCheck, onHideCategory, ignoreChecksAnnotation }: ChecksViewProps) {
   // Severity / category / framework / search live in the URL (shareable,
   // bookmarkable audit links) via the shared filter-state contract. The cluster
   // facet is deliberately NOT here — it's a host-controlled seam (see
@@ -430,6 +437,7 @@ export function ChecksView({ checks, catalog, anyData, evaluated, missingInputs
               onResourceClick={onResourceClick}
               onHideCheck={onHideCheck}
               onHideCategory={onHideCategory}
+              ignoreChecksAnnotation={ignoreChecksAnnotation}
             />
           ))}
         </ol>
@@ -720,6 +728,7 @@ function FleetCheckRow({
   onResourceClick,
   onHideCheck,
   onHideCategory,
+  ignoreChecksAnnotation,
 }: {
   fc: FleetCheck
   meta?: CheckMeta
@@ -730,6 +739,7 @@ function FleetCheckRow({
   onResourceClick?: (ref: CheckResourceRef) => void
   onHideCheck?: (checkID: string, title: string) => void
   onHideCategory?: (category: string) => void
+  ignoreChecksAnnotation?: string
 }) {
   const clusterCount = fc.clusters.length
   const single = clusterCount <= 1
@@ -762,6 +772,13 @@ function FleetCheckRow({
     >
       <CheckRemediationBlock description={meta?.description} remediation={meta?.remediation} references={meta?.references} />
 
+      {ignoreChecksAnnotation && (
+        <CardSection icon={EyeOff} label="Skip for one resource">
+          <CardBody>Add this annotation to a resource listed below. Its findings for this check are then hidden.</CardBody>
+          <CopyableCommand command={`${ignoreChecksAnnotation}: ${fc.checkID}`} />
+        </CardSection>
+      )}
+
       <CardSection
         icon={Layers}
         label="Affected resources"

package/src/components/checks/types.ts

@@ -61,19 +61,8 @@ export interface CheckResourceRef {
 /** Built-in (Radar-detected) finding source. The only V1 source. */
 export const SOURCE_RADAR_BUILTIN = 'radar_builtin';
 
-/**
- * resourceKey mirrors Go `audit.ResourceKey(group, kind, namespace, name)`:
- * `group|Kind|namespace|name`. Group first because group and namespace can each
- * independently be empty; `|` is delimiter-safe (K8s API groups follow
- * DNS-subdomain rules and can't contain it).
- */
-export function resourceKey(group: string, kind: string, namespace: string, name: string): string {
-  return `${group}|${kind}|${namespace}|${name}`;
-}
-
-export function resourceRefKey(ref: CheckResourceRef): string {
-  return resourceKey(ref.group, ref.kind, ref.namespace, ref.name);
-}
+// Preserve the Checks import path while sharing exact resource identity.
+export { resourceKey, resourceRefKey } from '../../utils/resource-refs';
 
 /**
  * checkFindingKey is the canonical built-in finding key:

package/src/components/cnpg/CNPGBackupSummary.tsx

@@ -7,10 +7,13 @@ import {
   getCNPGScheduledBackupStatus,
 } from '../resources/resource-utils-cnpg'
 import type { CNPGWorkspaceResponse } from './workspace'
-import { FactGrid, FactRow, RefLink, SummaryHeading, toneTextClass, type CNPGNavigate } from './primitives'
+import { cnpgScheduleBasisNote, formatCNPGRunTime, type CNPGSchedulePreview } from './schedule'
+import { Badge } from '../ui/Badge'
+import { Tooltip } from '../ui/Tooltip'
 import { ClusterLink, NotReported, Note, ObjectProblems, PhaseBadge, SummaryShell, TimeAgo } from './CNPGSharedSummary'
 import {
   backupDestination,
+  cnpgScheduleDestinationBlocker,
   backupsForScheduledBackup,
   clustersIn,
   isBackupFromSchedule,
@@ -19,11 +22,15 @@ import {
   scheduledBackupOf,
   workspaceList,
 } from './relations'
+import { type NavigateToRef, RefLink } from '../ui/RefLink'
+import { toneTextClass } from '../ui/status-tone'
+import { FactGrid, FactRow } from '../facts'
+import { SectionHeading } from '../ui/FoldSection'
 
 interface SummaryProps {
   resource: any
   workspace: CNPGWorkspaceResponse | null
-  onNavigate?: CNPGNavigate
+  onNavigate?: NavigateToRef
 }
 
 const RECENT_RUNS = 5
@@ -87,7 +94,7 @@ export function CNPGBackupSummary({ resource, workspace, onNavigate }: SummaryPr
     <SummaryShell>
       <ObjectProblems issues={workspace?.issues} subject={refOf(resource, 'Backup')} onNavigate={onNavigate} />
 
-      <SummaryHeading>Outcome</SummaryHeading>
+      <SectionHeading>Outcome</SectionHeading>
       <FactGrid>
         <FactRow label="Phase">
           <PhaseBadge status={status} />
@@ -109,7 +116,7 @@ export function CNPGBackupSummary({ resource, workspace, onNavigate }: SummaryPr
         )}
       </FactGrid>
 
-      <SummaryHeading>Relationships</SummaryHeading>
+      <SectionHeading>Relationships</SectionHeading>
       <FactGrid>
         <FactRow label="Cluster">
           <ClusterLink resource={resource} workspace={workspace} onNavigate={onNavigate} />
@@ -152,22 +159,62 @@ export function CNPGBackupSummary({ resource, workspace, onNavigate }: SummaryPr
   )
 }
 
-export function CNPGScheduledBackupSummary({ resource, workspace, onNavigate }: SummaryProps) {
+export function CNPGSchedulePreviewFacts({ preview }: { preview: CNPGSchedulePreview }) {
+  if (!preview.valid) {
+    return (
+      <FactRow label="Reading">
+        <span className={toneTextClass('degraded')}>Not a schedule the operator can run: {preview.error}</span>
+      </FactRow>
+    )
+  }
+  return (
+    <>
+      {preview.description && <FactRow label="Reading">{preview.description}{!preview.clock?.declared && <span className="ml-1 text-theme-text-tertiary">· UTC estimate</span>}</FactRow>}
+      <FactRow label={preview.clock?.declared ? 'Calculated upcoming times' : 'Estimated upcoming times'}>
+        <ul className="space-y-0.5">
+          {(preview.nextRuns ?? []).map((r, i) => {
+            const t = formatCNPGRunTime(r)
+            return (
+              <li key={r} className="font-mono text-xs">
+                <Tooltip content={`Your time: ${t.local}`} position="top">
+                  <span>{i === 0 && preview.runsImmediately ? `due (${t.utc})` : t.utc}</span>
+                </Tooltip>
+              </li>
+            )
+          })}
+        </ul>
+        <div className="mt-0.5 text-[11.5px] text-theme-text-tertiary">{cnpgScheduleBasisNote(preview)}</div>
+      </FactRow>
+    </>
+  )
+}
+
+export function CNPGScheduledBackupSummary({
+  resource,
+  workspace,
+  onNavigate,
+  schedulePreview,
+}: SummaryProps & {
+  /** The server's reading of spec.schedule; without it the schedule is shown verbatim only. */
+  schedulePreview?: CNPGSchedulePreview
+}) {
   const ns = resource?.metadata?.namespace ?? ''
   const cron = resource?.spec?.schedule
   const next = getCNPGScheduledBackupNextSchedule(resource)
   const runsUnavailable = relationUnavailable(workspace, 'backups', ns, 'Backups')
   const runs = runsUnavailable ? [] : backupsForScheduledBackup(resource, workspaceList(workspace, 'backups'))
   const shown = runs.slice(0, RECENT_RUNS)
+  const blocker = resource?.spec?.suspend === true ? null : cnpgScheduleDestinationBlocker(resource, clustersIn(workspace))
 
   return (
     <SummaryShell>
       <ObjectProblems issues={workspace?.issues} subject={refOf(resource, 'ScheduledBackup')} onNavigate={onNavigate} />
 
-      <SummaryHeading>Schedule</SummaryHeading>
+      <SectionHeading>Schedule</SectionHeading>
       <FactGrid>
         <FactRow label="Status">
-          <PhaseBadge status={getCNPGScheduledBackupStatus(resource)} />
+          <span className="inline-flex flex-wrap items-center gap-2"><PhaseBadge status={getCNPGScheduledBackupStatus(resource)} />{blocker && <Badge severity="warning" size="sm">{blocker}</Badge>}</span>
+          {blocker && <Note>The resource list status comes from the ScheduledBackup alone.</Note>}
         </FactRow>
         <FactRow label="Cluster">
           <ClusterLink resource={resource} workspace={workspace} onNavigate={onNavigate} />
@@ -182,14 +229,15 @@ export function CNPGScheduledBackupSummary({ resource, workspace, onNavigate }:
             <NotReported text="Not set" />
           )}
         </FactRow>
+        {cron && schedulePreview && schedulePreview.schedule === cron && <CNPGSchedulePreviewFacts preview={schedulePreview} />}
         <FactRow label="Last scheduled">
           <TimeAgo at={resource?.status?.lastScheduleTime} missing="Never" />
         </FactRow>
-        <FactRow label="Next scheduled">{next === '-' ? <NotReported /> : next}</FactRow>
+        <FactRow label="Next run reported by the operator">{next === '-' ? <NotReported /> : next}</FactRow>
         <FactRow label="Method">{methodText(resource) ?? 'Barman object store (in-tree) · default'}</FactRow>
       </FactGrid>
 
-      <SummaryHeading hint={runs.length > shown.length ? `${shown.length} of ${runs.length}` : undefined}>Recent runs</SummaryHeading>
+      <SectionHeading hint={runs.length > shown.length ? `${shown.length} of ${runs.length}` : undefined}>Recent runs</SectionHeading>
       {runsUnavailable ? (
         <div className="text-sm">
           <NotReported text={runsUnavailable} />

package/src/components/cnpg/CNPGClusterHASection.test.tsx

@@ -0,0 +1,90 @@
+// @vitest-environment jsdom
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { CNPGClusterHASection } from './CNPGClusterHASection'
+import type { CNPGClusterHA } from './ha'
+
+const noInstances: CNPGClusterHA = {
+  cluster: { namespace: 'db', name: 'pg', uid: 'u' },
+  sampledAt: '2026-09-30T12:00:00Z',
+  desiredImage: 'pg:17',
+  instances: [],
+  pods: { state: 'ok' },
+  nodes: { state: 'ok' },
+  quorum: { enabled: false, object: { state: 'notFound' } },
+  pdbs: { state: 'ok', enabled: true, items: [] },
+  primaryLease: { state: 'notFound' },
+  operatorLease: { state: 'unavailable' },
+  jobs: { state: 'ok', items: [] },
+  rwEndpoints: { state: 'ok', service: 'pg-rw', pods: [] },
+  certificates: [],
+  maintenance: { declared: false, inProgress: false, reusePVC: true },
+}
+
+describe('CNPGClusterHASection', () => {
+  it('says there is nothing to place rather than showing only the zone source', () => {
+    const html = renderToStaticMarkup(<CNPGClusterHASection ha={noInstances} showCertificates={false} />)
+    expect(html).toContain('No instance Pods to place')
+    expect(html).not.toContain('topology.kubernetes.io/zone of each instance')
+  })
+})
+
+it('shows the read-write Service, its Pods and primary mismatch beside Reachability', () => {
+  const ha: CNPGClusterHA = { ...noInstances, rwEndpoints: { state: 'ok', service: 'pg-rw', pods: ['pg-2'] } }
+  const html = renderToStaticMarkup(<CNPGClusterHASection ha={ha} currentPrimary="pg-1" onOpenReachability={() => {}} />)
+  expect(html).toContain('Read-write Service')
+  expect(html).toContain('pg-rw')
+  expect(html).toContain('pg-2')
+  expect(html).toContain('not on the reported primary pg-1')
+  expect(html).toContain('Reachability')
+  expect(html).toContain('aria-expanded="true"')
+})
+it('distinguishes absent endpoints from denied endpoint reads', () => {
+  expect(renderToStaticMarkup(<CNPGClusterHASection ha={noInstances} />)).toContain('No ready endpoints')
+  const denied: CNPGClusterHA = { ...noInstances, rwEndpoints: { state: 'denied', service: 'pg-rw', pods: [], grant: { verb: 'list', resource: 'endpointslices', group: 'discovery.k8s.io', namespace: 'db' } } }
+  const html = renderToStaticMarkup(<CNPGClusterHASection ha={denied} />)
+  expect(html).toContain('endpointslices')
+  expect(html).not.toContain('No ready endpoints')
+})
+it('does not flag deliberately absent read-write endpoints while hibernated', () => {
+  const html = renderToStaticMarkup(<CNPGClusterHASection ha={noInstances} currentPrimary="pg-1" hibernated />)
+  expect(html).toContain('None expected while hibernated')
+  expect(html).not.toContain('No ready endpoints')
+})
+
+it('shows the desired image without claiming any instance runs it', () => {
+  const html = renderToStaticMarkup(<CNPGClusterHASection ha={noInstances} />)
+  expect(html).toContain('Desired image pg:17; no instance running')
+  expect(html).not.toContain('every instance runs it')
+})
+
+it('describes matching Pod images without claiming the Pods are running', () => {
+  const ha: CNPGClusterHA = { ...noInstances, instances: [{ pod: 'pg-1', podUID: 'p1', role: 'primary', ready: false, restartCount: 0, image: 'pg:17', imageMatches: true }] }
+  const html = renderToStaticMarkup(<CNPGClusterHASection ha={ha} />)
+  expect(html).toContain('observed Pod images match')
+  expect(html).not.toContain('instances run it')
+})
+
+it('keeps the readiness statement inside expanded HA and lists missing expected instances without an observed role', () => {
+  const ha: CNPGClusterHA = { ...noInstances, declaredInstances: 2, expectedInstances: ['orders-1', 'orders-2'], instances: [{ pod: 'orders-1', podUID: 'a', role: 'primary', ready: true, restartCount: 0 }], jobs: { state: 'ok', items: [{ name: 'orders-2-join', role: 'join', phase: 'pending', reason: 'Pod cannot be scheduled: Unschedulable: 0/2 nodes are available: 2 Too many pods. preemption: no victims.' }] } }
+  const html = renderToStaticMarkup(<CNPGClusterHASection ha={ha} showInstances={false} />)
+  expect(html).toContain('1 of 2 declared instances ready; no instance Pod observed for orders-2')
+  expect(html).toContain('orders-1')
+  expect(html).toContain('orders-2</span> · not running')
+  expect(html).toContain('Cannot be scheduled: both nodes have reached their Pod limit')
+  expect(html).toContain('Scheduler message')
+  expect(html).toContain('aria-expanded="false"')
+  expect(html).toContain('preemption: no victims')
+})
+
+it('keeps each Job reason and scheduler disclosure inside its own block', () => {
+  const jobs = ['pg-1-initdb', 'pg-2-join'].map((name) => ({ name, role: 'join', phase: 'pending' as const, reason: `Pod cannot be scheduled: ${name}: 0/2 nodes are available: 2 Too many pods.` }))
+  const host = document.createElement('div'); host.innerHTML = renderToStaticMarkup(<CNPGClusterHASection ha={{ ...noInstances, jobs: { state: 'ok', items: jobs } }} />)
+  const blocks = [...host.querySelectorAll('div.space-y-1.text-xs')]
+  expect(blocks).toHaveLength(2)
+  for (let i = 0; i < jobs.length; i++) {
+    expect(blocks[i].textContent).toContain(jobs[i].name)
+    expect(blocks[i].querySelector('[inert]')?.textContent).toContain(jobs[i].reason)
+    expect(blocks[i].textContent).not.toContain(jobs[1 - i].name)
+  }
+})

package/src/components/cnpg/CNPGClusterHASection.tsx

@@ -0,0 +1,331 @@
+import { clsx } from 'clsx'
+import { Badge } from '../ui/Badge'
+import { Tooltip } from '../ui/Tooltip'
+import { formatAge, summarizeSchedulerMessage } from '../resources/resource-utils'
+import { PrimaryConflictNote } from './primitives'
+import {
+  CNPG_ROLE_DETAIL_TEXT,
+  cnpgCertificateViews,
+  cnpgCertificatesSummary,
+  cnpgHASourceText,
+  cnpgHASummary,
+  cnpgImageDrift,
+  cnpgLeaseHolderPod,
+  cnpgLiveGap,
+  cnpgPDBFact,
+  cnpgPendingRestart,
+  cnpgQuorumFact,
+  cnpgZoneSpread,
+  type CNPGClusterHA,
+  type CNPGHAJob,
+  type CNPGHALease,
+  type CNPGInstanceLive,
+} from './ha'
+import { type NavigateToRef, RefLink } from '../ui/RefLink'
+import { StatusDot, toneTextClass } from '../ui/status-tone'
+import { FactGrid, FactRow, FactValue } from '../facts'
+import { FoldSection, SectionHeading } from '../ui/FoldSection'
+
+function Unknown({ text }: { text: string }) {
+  return <span className="text-theme-text-tertiary">{text}</span>
+}
+
+function LeaseValue({ lease, what }: { lease: CNPGHALease; what: string }) {
+  if (lease.state !== 'ok') return <Unknown text={cnpgHASourceText(lease, what)} />
+  return (
+    <span>
+      held by{' '}
+      {lease.holder && cnpgLeaseHolderPod(lease.holder) !== lease.holder ? (
+        <Tooltip content={lease.holder}>
+          <span className="font-mono text-xs break-all">{cnpgLeaseHolderPod(lease.holder)}</span>
+        </Tooltip>
+      ) : (
+        <span className="font-mono text-xs break-all">{lease.holder || '(nobody)'}</span>
+      )}
+      {lease.renewTime && <span className="text-theme-text-secondary"> · renewed {formatAge(lease.renewTime)} ago</span>}
+      {lease.expired && <span className={toneTextClass('degraded')}> · expired</span>}
+      {lease.controlledByCluster === false && <span className={toneTextClass('degraded')}> · not owned by this Cluster</span>}
+    </span>
+  )
+}
+
+const JOB_SEVERITY: Record<CNPGHAJob['phase'], 'success' | 'error' | 'info' | 'neutral'> = {
+  succeeded: 'success',
+  failed: 'error',
+  running: 'info',
+  active: 'info',
+  pending: 'neutral',
+}
+
+/**
+ * "HA and instances": whether the cluster survives losing an instance, and what
+ * a planned switchover will meet. Every row names its source; a fact the caller
+ * cannot read says so instead of reading as none.
+ */
+export function CNPGClusterHASection({
+  ha,
+  live,
+  liveUnavailable,
+  loading,
+  error,
+  onNavigate,
+  primaryConflict,
+  title = 'HA and instances',
+  showInstances = true,
+  showCertificates = true,
+  currentPrimary,
+  hibernated = false,
+  onOpenReachability,
+}: {
+  currentPrimary?: string
+  hibernated?: boolean
+  onOpenReachability?: (service: { namespace: string; name: string }) => void
+  title?: string
+  /** False where the host lists the instances itself (with their replication state). */
+  showInstances?: boolean
+  /** False where the host shows certificates elsewhere (CNPGClusterCertificates). */
+  showCertificates?: boolean
+  /** status.currentPrimary vs the Pod labelled primary, when they disagree. */
+  primaryConflict?: { status: string; labelled: string }
+  ha?: CNPGClusterHA
+  /** Instance-manager facts, when the caller can read them. */
+  live?: CNPGInstanceLive[]
+  /** Why `live` is absent (e.g. "needs get pods/proxy in db"); read from `live` itself when it is present. */
+  liveUnavailable?: string
+  loading?: boolean
+  error?: string
+  onNavigate?: NavigateToRef
+}) {
+  if (!ha) {
+    return (
+      <>
+        <SectionHeading>{title}</SectionHeading>
+        <div className="text-sm text-theme-text-tertiary">{loading ? 'Reading HA facts…' : `HA facts could not be read${error ? `: ${error}` : ''}`}</div>
+      </>
+    )
+  }
+  const ns = ha.cluster.namespace
+  const spread = cnpgZoneSpread(ha)
+  const drift = cnpgImageDrift(ha)
+  const pending = cnpgPendingRestart(live)
+  const liveBy = new Map((live ?? []).map((l) => [l.pod, l]))
+  const jobs = [...ha.jobs.items].sort((a, b) => (a.phase === 'succeeded' ? 1 : 0) - (b.phase === 'succeeded' ? 1 : 0))
+  const versions = new Set((live ?? []).map((l) => l.instanceManagerVersion).filter(Boolean))
+
+  const haSummary = cnpgHASummary(ha, live, primaryConflict)
+  const endpointProblem = !hibernated && currentPrimary && ha.rwEndpoints.state === 'ok' && !ha.rwEndpoints.pods.includes(currentPrimary)
+    ? ha.rwEndpoints.pods.length === 0 ? 'no read-write endpoint' : 'read-write endpoint not on the primary'
+    : undefined
+
+  return (
+    <>
+      <FoldSection title={title} hint={`checked ${formatAge(ha.sampledAt)} ago`} summary={[endpointProblem, haSummary.text].filter(Boolean).join(' · ')} attention={haSummary.attention || !!endpointProblem}>
+        {<div className="mb-3 text-sm text-theme-text-secondary">{haSummary.text}</div>}
+        {ha.pods.state === 'ok' && <div className="mb-3 flex flex-wrap gap-x-4 gap-y-1 text-xs">
+          {ha.instances.map((i) => <span key={i.pod}><RefLink refTo={{ kind: 'Pod', group: '', namespace: ns, name: i.pod }} onNavigate={onNavigate} mono /> · Pod {i.ready ? 'ready' : 'not ready'}</span>)}
+          {[...new Set(ha.expectedInstances ?? [])].filter((name) => !ha.instances.some((i) => i.pod === name)).map((name) => <span key={name} className="text-theme-text-tertiary"><span className="font-mono">{name}</span> · not running</span>)}
+        </div>}
+        <FactGrid>
+          <FactRow label="Read-write Service">
+            <div className="space-y-1">
+              <RefLink refTo={{ kind: 'Service', group: '', namespace: ns, name: ha.rwEndpoints.service }} onNavigate={onNavigate} mono />
+              {ha.rwEndpoints.state !== 'ok' ? <Unknown text={cnpgHASourceText(ha.rwEndpoints, 'read-write endpoints')} /> : (
+                <>
+                  <div className="flex flex-wrap gap-2">
+                    {ha.rwEndpoints.pods.length === 0 ? <span className={hibernated ? 'text-theme-text-secondary' : toneTextClass('unhealthy')}>{hibernated ? 'None expected while hibernated' : 'No ready endpoints'}</span> : ha.rwEndpoints.pods.map((pod) => <RefLink key={pod} refTo={{ kind: 'Pod', group: '', namespace: ns, name: pod }} onNavigate={onNavigate} mono />)}
+                  </div>
+                  {!hibernated && currentPrimary && ha.rwEndpoints.pods.length > 0 && !ha.rwEndpoints.pods.includes(currentPrimary) && <div className={clsx('text-xs', toneTextClass('unhealthy'))}>Read-write endpoint is not on the reported primary {currentPrimary}.</div>}
+                </>
+              )}
+              {onOpenReachability && <button type="button" className="text-xs text-accent-text hover:underline" onClick={() => onOpenReachability({ namespace: ns, name: ha.rwEndpoints.service })}>Reachability →</button>}
+              <div className="text-[11.5px] text-theme-text-tertiary">Ready Pods from the Service’s EndpointSlices</div>
+            </div>
+          </FactRow>
+          <FactRow label="Failure domains">
+            {!spread.known ? (
+              <div>
+                <Unknown text={ha.pods.state !== 'ok' ? cnpgHASourceText(ha.pods, 'instance Pods') : cnpgHASourceText(ha.nodes, 'Nodes (zones)')} />
+                {spread.nodes.length > 0 && (
+                  <div className="text-xs text-theme-text-secondary">
+                    Nodes: {spread.nodes.map((n) => `${n.node} (${n.pods.join(', ')})`).join(' · ')}
+                  </div>
+                )}
+              </div>
+            ) : spread.zones.length === 0 && spread.unlabelled.length === 0 ? (
+              <Unknown text="No instance Pods to place" />
+            ) : (
+              <div>
+                <div className="flex flex-wrap gap-x-3">
+                  {spread.zones.map((z) => (
+                    <span key={z.zone}>
+                      <span className="font-mono">{z.zone}</span>
+                      <span className="text-theme-text-secondary">: {z.pods.join(', ')}</span>
+                    </span>
+                  ))}
+                  {spread.unlabelled.length > 0 && <Unknown text={`no zone label: ${spread.unlabelled.join(', ')}`} />}
+                </div>
+                {(spread.singleZone || spread.sharedNode) && (
+                  <div className={clsx('text-xs', toneTextClass('degraded'))}>
+                    {spread.singleZone ? 'Every instance is in one zone: losing it loses the cluster. ' : ''}
+                    {spread.sharedNode ? 'Two or more instances share a Node.' : ''}
+                  </div>
+                )}
+                <div className="text-[11.5px] text-theme-text-tertiary">topology.kubernetes.io/zone of each instance’s Node</div>
+              </div>
+            )}
+          </FactRow>
+
+          {showInstances && <FactRow label="Instances">
+            {ha.pods.state !== 'ok' ? (
+              <Unknown text={cnpgHASourceText(ha.pods, 'instance Pods')} />
+            ) : (
+              <div className="space-y-1">
+                {ha.instances.map((i) => {
+                  const l = liveBy.get(i.pod)
+                  return (
+                    <div key={i.pod} className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs">
+                      <Tooltip content={`Pod ${i.ready ? 'ready' : 'not ready'}${l?.roleDetail === 'replayPaused' || l?.roleDetail === 'fileBased' ? ` · ${CNPG_ROLE_DETAIL_TEXT[l.roleDetail]}` : ''}`}>
+                        <StatusDot tone={!i.ready ? 'unhealthy' : l?.roleDetail === 'replayPaused' || l?.roleDetail === 'fileBased' ? 'degraded' : 'healthy'} />
+                      </Tooltip>
+                      <RefLink refTo={{ kind: 'Pod', group: '', namespace: ns, name: i.pod }} onNavigate={onNavigate} mono />
+                      <span className="text-theme-text-secondary">
+                        {l?.roleDetail ? CNPG_ROLE_DETAIL_TEXT[l.roleDetail] : i.role === 'unknown' ? 'role unknown' : i.role}
+                      </span>
+                      {l?.timeline !== undefined && <span className="text-theme-text-tertiary">timeline {l.timeline}</span>}
+                      {i.qosClass && <span className="text-theme-text-tertiary">QoS {i.qosClass}</span>}
+                      {l?.pendingRestart && <Badge severity="warning" size="sm">pending restart</Badge>}
+                      {i.imageMatches === false && <Badge severity="warning" size="sm">image differs</Badge>}
+                      {l?.instanceManagerVersion && versions.size > 1 && <span className="text-theme-text-tertiary">CNPG instance manager {l.instanceManagerVersion}</span>}
+                    </div>
+                  )
+                })}
+                {primaryConflict && <PrimaryConflictNote conflict={primaryConflict} />}
+                <div className="text-[11.5px] text-theme-text-tertiary">
+                  {live ? 'Role detail and pending restart from each instance manager' : `Role from Pod labels; role detail ${cnpgLiveGap(undefined, liveUnavailable)}`}
+                  {versions.size === 1 ? ` · instance manager ${[...versions][0]}` : ''}
+                </div>
+              </div>
+            )}
+          </FactRow>}
+
+          <FactRow label="Pending restart">
+            {!pending.known && pending.pods.length === 0 ? (
+              <Unknown text={`Unknown: ${cnpgLiveGap(live, liveUnavailable)}`} />
+            ) : pending.pods.length === 0 ? (
+              <span className="text-theme-text-secondary">None reported</span>
+            ) : (
+              <span className={toneTextClass('degraded')}>
+                {pending.pods.join(', ')} {pending.pods.length === 1 ? 'needs' : 'need'} a restart to apply changed parameters
+                {pending.forDecrease ? ' (a lowered setting: the primary restarts first)' : ''}
+                {!pending.known ? ` · ${cnpgLiveGap(live, liveUnavailable)}` : ''}
+              </span>
+            )}
+          </FactRow>
+
+          <FactRow label="Image">
+            {!drift.known && drift.drifted.length === 0 ? (
+              <Unknown text={!ha.desiredImage ? 'Desired image not reported' : ha.pods.state === 'ok' && ha.instances.length === 0 ? `Desired image ${ha.desiredImage}; no instance running` : `Desired image ${ha.desiredImage}; running images unknown`} />
+            ) : drift.drifted.length === 0 ? (
+              <span>
+                <span className="font-mono text-xs break-all">{ha.desiredImage}</span>
+                <span className="text-theme-text-secondary"> · observed Pod images match</span>
+              </span>
+            ) : (
+              <span className={toneTextClass('degraded')}>
+                {drift.drifted.map((d) => `${d.pod} has image ${d.image}`).join(' · ')} · desired <span className="font-mono">{ha.desiredImage}</span>
+              </span>
+            )}
+          </FactRow>
+
+          <FactRow label="Failover quorum">
+            <FactValue fact={cnpgQuorumFact(ha.quorum)} />
+          </FactRow>
+
+          <FactRow label="Disruption budgets">
+            <FactValue fact={cnpgPDBFact(ha.pdbs)} />
+          </FactRow>
+
+          <FactRow label="Primary lease">
+            <LeaseValue lease={ha.primaryLease} what="the primary Lease" />
+          </FactRow>
+
+          <FactRow label="Operator leader">
+            <LeaseValue lease={ha.operatorLease} what="the operator’s Lease" />
+          </FactRow>
+
+          <FactRow label="Cluster Jobs">
+            {ha.jobs.state !== 'ok' ? (
+              <Unknown text={cnpgHASourceText(ha.jobs, 'Jobs')} />
+            ) : jobs.length === 0 ? (
+              <span className="text-theme-text-secondary">None present</span>
+            ) : (
+              <div className="space-y-3">
+                {jobs.slice(0, 6).map((j) => (
+                  <div key={j.name} className="space-y-1 text-xs">
+                    <div className="flex flex-wrap items-center gap-2">
+                    <Badge severity={JOB_SEVERITY[j.phase]} size="sm">{j.phase}</Badge>
+                    <span className="text-theme-text-secondary">{j.role ?? 'job'}</span>
+                    <RefLink refTo={{ kind: 'Job', group: 'batch', namespace: ns, name: j.name }} onNavigate={onNavigate} mono />
+                    </div>
+                    {j.reason && (/schedul|Too many pods|Insufficient/i.test(j.reason) ? <div className="w-full">
+                      <span className={toneTextClass('degraded')}>Cannot be scheduled: {summarizeSchedulerMessage(j.reason, { plain: true })}</span>
+                      <div className="mt-1"><FoldSection title="Scheduler message" summary="" attention={false}><div className="break-words text-xs text-theme-text-secondary">{j.reason}</div></FoldSection></div>
+                    </div> : <span className={toneTextClass('degraded')}>{j.reason}</span>)}
+                  </div>
+                ))}
+                {jobs.length > 6 && <div className="text-xs text-theme-text-tertiary">+{jobs.length - 6} more</div>}
+              </div>
+            )}
+          </FactRow>
+        </FactGrid>
+      </FoldSection>
+
+      {showCertificates && <CNPGClusterCertificates ha={ha} onNavigate={onNavigate} />}
+    </>
+  )
+}
+
+/** Certificate expiry and who renews each certificate, folded to one line unless one needs attention. */
+export function CNPGClusterCertificates({ ha, onNavigate }: { ha: CNPGClusterHA; onNavigate?: NavigateToRef }) {
+  const ns = ha.cluster.namespace
+  const certs = cnpgCertificateViews(ha.certificates)
+  const certSummary = cnpgCertificatesSummary(ha.certificates)
+  return (
+    <FoldSection title="Certificates" summary={certSummary.text} attention={certSummary.attention}>
+      <FactGrid>
+        <FactRow label="Expiry">
+          {certs.length === 0 ? (
+            <Unknown text="No expiry reported by the operator" />
+          ) : (
+            <div className="space-y-0.5">
+              {certs.map((c) => (
+                <div key={c.secret} className="text-xs">
+                  <RefLink refTo={{ kind: 'Secret', group: '', namespace: ns, name: c.secret }} onNavigate={onNavigate} mono />{' '}
+                  <span className={toneTextClass(c.tone)}>
+                    {c.expiresAt ? (c.daysLeft !== undefined && c.daysLeft < 0 ? `expired ${c.expiresAt}` : `expires in ${c.daysLeft} d`) : `expiry unreadable (“${c.raw}”)`}
+                  </span>
+                  <span className="text-theme-text-secondary">
+                    {' · '}
+                    {c.renewal === 'operator' ? 'CloudNativePG renews it' : 'you renew it (spec.certificates)'}
+                  </span>
+                  {c.renewal === 'user' &&
+                    (c.certManager ? (
+                      <span className="text-theme-text-secondary">
+                        {' · cert-manager '}
+                        <RefLink refTo={{ kind: 'Certificate', group: 'cert-manager.io', namespace: ns, name: c.certManager.certificate }} onNavigate={onNavigate} mono />
+                      </span>
+                    ) : c.metadata?.state === 'ok' ? (
+                      <span className="text-theme-text-tertiary"> · not issued by cert-manager</span>
+                    ) : (
+                      <span className="text-theme-text-tertiary"> · issuer unknown ({cnpgHASourceText(c.metadata, 'Secret metadata')})</span>
+                    ))}
+                </div>
+              ))}
+              <div className="text-[11.5px] text-theme-text-tertiary">status.certificates.expirations</div>
+            </div>
+          )}
+        </FactRow>
+      </FactGrid>
+    </FoldSection>
+  )
+}