@skyhook-io/radar-app 1.16.3 → 1.17.1

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

@@ -0,0 +1,89 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { expect, it, vi } from 'vitest'
+import { buildCNPGFleet, CNPG_WORKSPACE_KEYS, type CNPGWorkspaceResponse, type CNPGPoolerPressureLive } from '@skyhook-io/k8s-ui'
+import { CNPGPooling } from './CNPGPooling'
+
+const live = vi.hoisted(() => ({ pods: [] as CNPGPoolerPressureLive['pods'], failed: false }))
+vi.mock('../../api/cnpg', () => ({ useCNPGPoolerRuntime: () => ({ data: { permission: { proxy: 'allowed' }, pods: live.pods }, isRefetchError: live.failed, error: new Error('Pressure timeout'), dataUpdatedAt: Date.now() - 120_000 }) }))
+vi.mock('../../api/cnpg-sessions', () => ({ useCNPGPoolerCapabilities: () => ({ data: { facts: { deployment: { name: 'p', state: 'ok', replicas: 2, readyReplicas: 0 } } }, isRefetchError: live.failed, error: new Error('Readiness timeout'), dataUpdatedAt: Date.now() - 180_000 }) }))
+vi.mock('../../context/ConnectionContext', () => ({ useConnection: () => ({ connection: { context: 'test' } }) }))
+function render(type = 'rw') {
+  const data: CNPGWorkspaceResponse = { installed: true, context: 'test', namespaces: null, coverage: Object.fromEntries(CNPG_WORKSPACE_KEYS.map((k) => [k, { state: 'full' }])), objects: { poolers: [{ apiVersion: 'postgresql.cnpg.io/v1', metadata: { name: 'p', namespace: 'pg' }, spec: { type, cluster: { name: 'pg' }, pgbouncer: { paused: true } } }] }, issues: [], audit: [], backupsOmitted: 0 }
+  return renderToStaticMarkup(<CNPGPooling data={data} fleet={buildCNPGFleet(data)} namespaces={[]} searchParams={new URLSearchParams()} onSetParams={() => {}} onInspect={() => {}} inspected={null} onClearNamespaces={() => {}} />)
+}
+it('does not call an empty partial read idle and names the unread Pod', () => {
+  live.pods = [{ pod: 'a', state: 'ok', pools: [] }, { pod: 'b', state: 'unreachable', reason: 'timeout' }]
+  const html = render()
+  expect(html).toContain('No pools seen in what was read')
+  expect(html).toContain('b: not read (timeout)')
+  expect(html).not.toContain('Idle')
+})
+it('qualifies partial totals and retains readiness beside the request', () => {
+  live.pods = [{ pod: 'a', state: 'partial', reason: 'pools capped', pools: [{ database: 'app', user: 'app', clWaiting: 0, svActive: 3 }] }]
+  const html = render()
+  expect(html).toContain('Unknown')
+  expect(html).toContain('≥3')
+  expect(html).toContain('pools capped')
+  expect(html).toContain('0/2 ready')
+  expect(html).toContain('Pause requested')
+})
+it('says idle for complete empty reads', () => {
+  live.pods = [{ pod: 'a', state: 'ok', pools: [] }]
+  expect(render()).toContain('Idle: no client pools open')
+})
+it('labels retained pressure and readiness after their refreshes fail', () => {
+  live.failed = true
+  live.pods = [{ pod: 'a', state: 'ok', pools: [] }]
+  const html = render()
+  expect(html).toContain('Idle: no client pools open')
+  expect(html).toContain('0/2 ready')
+  expect(html).toContain('Last refresh failed: Readiness timeout')
+  expect(html).toContain('Last refresh failed: Pressure timeout')
+  expect(html).toContain('3m ago')
+  expect(html).toContain('2m ago')
+  live.failed = false
+})
+
+it('shows a pending Pod scheduling cause and inspection link beside Deployment readiness', () => {
+  live.pods = [{ pod: 'p-pending', state: 'unreachable', reason: 'proxy failed', schedulingReason: 'Unschedulable: insufficient memory' }]
+  const html = render()
+  expect(html).toContain('0/2 ready')
+  expect(html).toContain('Unschedulable: insufficient memory')
+  expect(html).toMatch(/<button[^>]*>p-pending<\/button>/)
+  expect(html).toContain('Not measured: proxy failed')
+  expect(html).toContain('p-pending')
+})
+
+it('opens the Pod once and folds details without opening the Pooler row', () => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+  const inspect = vi.fn()
+  live.pods = [{ pod: 'p-pending', state: 'unreachable', error: 'address not allowed', schedulingReason: 'Unschedulable: insufficient memory' }]
+  const data: CNPGWorkspaceResponse = { installed: true, context: 'test', namespaces: null, coverage: Object.fromEntries(CNPG_WORKSPACE_KEYS.map((k) => [k, { state: 'full' }])), objects: { poolers: [{ apiVersion: 'postgresql.cnpg.io/v1', metadata: { name: 'p', namespace: 'pg' }, spec: {} }] }, issues: [], audit: [], backupsOmitted: 0 }
+  const host = document.createElement('div'); const root = createRoot(host)
+  act(() => root.render(<CNPGPooling data={data} fleet={buildCNPGFleet(data)} namespaces={[]} searchParams={new URLSearchParams()} onSetParams={() => {}} onInspect={inspect} inspected={null} onClearNamespaces={() => {}} />))
+  const button = [...host.querySelectorAll('button')].find((b) => b.textContent === 'p-pending')!
+  act(() => button.click())
+  expect(inspect).toHaveBeenCalledExactlyOnceWith({ kind: 'pods', group: '', namespace: 'pg', name: 'p-pending' })
+  inspect.mockClear()
+  for (const label of ['Scheduler message', 'Measurement details']) {
+    const fold = [...host.querySelectorAll('button')].find((b) => b.textContent?.includes(label))!
+    expect(fold.getAttribute('aria-expanded')).toBe('false')
+    act(() => fold.click())
+    expect(fold.getAttribute('aria-expanded')).toBe('true')
+    expect(inspect).not.toHaveBeenCalled()
+  }
+  act(() => host.querySelector('tbody tr td:nth-child(5)')!.querySelector('span')!.click())
+  expect(inspect).toHaveBeenCalledExactlyOnceWith({ kind: 'poolers', group: 'postgresql.cnpg.io', namespace: 'pg', name: 'p' })
+  act(() => root.unmount())
+})
+
+it('labels primary and standby routing in plain words', () => {
+  expect(render()).toContain('Primary (read-write)')
+  expect(render('ro')).toContain('Standbys (read-only)')
+  expect(render('r')).toContain('Any instance')
+  expect(render('future-selector')).toContain('future-selector')
+  expect(render('')).toContain('Not reported')
+})

package/src/components/cnpg/CNPGPooling.tsx

@@ -1,25 +1,23 @@
 import { useMemo } from 'react'
 import {
   Badge,
+  toneTextClass,
   getCNPGPoolerMode,
-  getCNPGPoolerStatus,
+  FactValue,
+  poolerPressureCoverage,
+  poolerPressureFact,
   getCNPGPoolerType,
   isApiGroup,
+  isCNPGPoolerPaused,
+  poolerReadiness,
+  CNPGPoolerScheduling,
+  CNPGPoolerUnmeasured,
   type HealthLevel,
 } from '@skyhook-io/k8s-ui'
-import {
-  CNPGWorkspaceHeader,
-  CoverageNotice,
-  FilterChips,
-  Mono,
-  ScreenBody,
-  SectionTable,
-  Sub,
-  cnpgResource,
-  coverageEmpty,
-  namespaceChip,
-  type CNPGScreenProps,
-} from './shared'
+import { useCNPGPoolerRuntime } from '../../api/cnpg'
+import { useCNPGPoolerCapabilities } from '../../api/cnpg-sessions'
+import { CNPGWorkspaceHeader, CoverageNotice, cnpgResource, coverageEmpty, type CNPGScreenProps } from './shared'
+import { FilterChips, namespaceChip, RefreshFailedNotice, ScreenBody, SectionTable, Sub } from '../workspace/layout'
 
 const SEVERITY: Record<HealthLevel, 'success' | 'warning' | 'alert' | 'error' | 'neutral'> = {
   healthy: 'success',
@@ -51,15 +49,15 @@ export function CNPGPooling({ data, fleet, namespaces, searchParams, onSetParams
         subtitle="PgBouncer Poolers, the clusters they front, and their readiness."
       />
       <ScreenBody>
-        <CoverageNotice fleet={fleet} data={data} />
+        <CoverageNotice fleet={fleet} data={data} kinds={['clusters', 'poolers']} />
         <FilterChips chips={chips} />
         <SectionTable
           title="Poolers"
           columns={[
-            { header: 'Pooler', width: '22%', cell: (p: any) => <>{p.metadata?.name}<Sub>{p.metadata?.namespace}</Sub></> },
+            { header: 'Pooler', width: '18%', cell: (p: any) => <>{p.metadata?.name}<Sub>{p.metadata?.namespace}</Sub></> },
             {
               header: 'Target cluster',
-              width: '18%',
+              width: '16%',
               cell: (p) => {
                 const name = p.spec?.cluster?.name
                 const visible = fleet.rows.some((r) => r.namespace === p.metadata?.namespace && r.name === name)
@@ -71,34 +69,17 @@ export function CNPGPooling({ data, fleet, namespaces, searchParams, onSetParams
                 )
               },
             },
-            { header: 'Type', width: '8%', cell: (p) => <Mono>{getCNPGPoolerType(p)}</Mono> },
+            { header: 'Type', width: '14%', cell: (p) => { const type = getCNPGPoolerType(p); return type === 'ro' ? 'Standbys (read-only)' : type === 'rw' ? 'Primary (read-write)' : type === 'r' ? 'Any instance' : type === '-' ? 'Not reported' : type } },
             { header: 'Mode', width: '12%', cell: (p) => getCNPGPoolerMode(p) },
             {
-              header: 'Instances',
-              width: '10%',
-              cell: (p) => (
-                <span className="font-mono">
-                  {typeof p.status?.instances === 'number' ? p.status.instances : '–'}/{typeof p.spec?.instances === 'number' ? p.spec.instances : '–'}
-                </span>
-              ),
-            },
-            {
-              header: 'Status',
-              width: '14%',
-              cell: (p) => {
-                const st = getCNPGPoolerStatus(p)
-                return <Badge severity={SEVERITY[st.level]} size="sm">{st.text}</Badge>
-              },
+              header: 'Readiness',
+              width: '24%',
+              cell: (p) => <div onClick={(e) => { if ((e.target as Element).closest('button, a')) e.stopPropagation() }}><PoolerReadiness pooler={p} onInspect={onInspect} /></div>,
             },
             {
               header: 'Connection pressure',
               width: '16%',
-              cell: () => (
-                <>
-                  <span className="text-theme-text-tertiary">Not measured</span>
-                  <Sub>Needs PgBouncer metrics</Sub>
-                </>
-              ),
+              cell: (p) => <div onClick={(e) => { if ((e.target as Element).closest('button, a')) e.stopPropagation() }}><PoolerPressure namespace={p.metadata?.namespace} name={p.metadata?.name} /></div>,
             },
           ]}
           rows={poolers}
@@ -108,9 +89,85 @@ export function CNPGPooling({ data, fleet, namespaces, searchParams, onSetParams
           inspected={inspected}
           minWidth={880}
           empty={coverageEmpty(data.coverage.poolers, 'Poolers')}
-          footer="Instances are the Pooler’s own ready count. Client waits and server-pool saturation come from PgBouncer metrics, which Radar does not read yet."
+          footer="Readiness is the Pooler’s Deployment (the Pooler status reports an operator count). Pressure is read live from each PgBouncer's metrics through the Kubernetes API proxy."
         />
       </ScreenBody>
     </div>
   )
 }
+
+function PoolerReadiness({ pooler, onInspect }: { pooler: any; onInspect: CNPGScreenProps['onInspect'] }) {
+  const namespace = pooler.metadata?.namespace
+  const name = pooler.metadata?.name
+  const caps = useCNPGPoolerCapabilities(namespace, name)
+  const runtime = useCNPGPoolerRuntime(namespace, name)
+  const paused = isCNPGPoolerPaused(pooler)
+  if (!caps.data) {
+    const st = poolerReadiness(undefined)
+    return (
+      <>
+        <Badge severity={SEVERITY[st.level]} size="sm">{st.text}</Badge>
+        {paused && <Badge severity="warning" size="sm">Pause requested</Badge>}
+        <Sub>{caps.isLoading ? 'reading Deployment…' : 'Deployment was not read'}</Sub>
+      </>
+    )
+  }
+  const r = poolerReadiness(caps.data.facts.deployment)
+  return (
+    <>
+      <span className="inline-flex flex-wrap items-center gap-1">
+        <Badge severity={SEVERITY[r.level]} size="sm">{r.text}</Badge>
+        {paused && <Badge severity="warning" size="sm">Pause requested</Badge>}
+      </span>
+      <Sub>{r.detail}</Sub>
+      <CNPGPoolerScheduling namespace={namespace} pods={runtime.data?.pods ?? []} onNavigate={(ref) => onInspect({ kind: 'pods', group: '', namespace, name: ref.name })} />
+      <RefreshFailedNotice queries={[caps]} />
+    </>
+  )
+}
+
+function PoolerPressure({ namespace, name }: { namespace: string; name: string }) {
+  const q = useCNPGPoolerRuntime(namespace, name)
+  if (!q.data) return <span className="text-theme-text-tertiary">{q.isLoading ? 'Reading…' : 'Unavailable'}</span>
+  return <><RefreshFailedNotice queries={[q]} /><PoolerPressureData data={q.data} /></>
+}
+
+function PoolerPressureData({ data }: { data: NonNullable<ReturnType<typeof useCNPGPoolerRuntime>['data']> }) {
+  if (data.permission.proxy === 'denied') {
+    return (
+      <>
+        <span className="text-theme-text-tertiary">No access</span>
+        <Sub>needs get pods/proxy</Sub>
+      </>
+    )
+  }
+  const { reporting: ok, limitation, empty } = poolerPressureCoverage(data.pods)
+  if (ok.length === 0) {
+    return <CNPGPoolerUnmeasured pods={data.pods} />
+  }
+  const pools = ok.flatMap((p) => p.pools ?? [])
+  if (pools.length === 0) {
+    return (
+      <>
+        <span>{empty}</span>
+        <Sub>
+          {limitation ?? `${ok.length}/${data.pods.length} pods reporting`}
+        </Sub>
+      </>
+    )
+  }
+  const waiting = poolerPressureFact(data.pods, 'clWaiting')
+  const waits = pools.map((x) => x.maxwaitSeconds).filter((v): v is number => v !== undefined)
+  const maxwait = waits.length > 0 ? Math.max(...waits) : undefined
+  return (
+    <>
+      <span className={toneTextClass(waiting.tone)}>
+        <span className="whitespace-nowrap"><FactValue fact={waiting} /> waiting</span> · <span className="whitespace-nowrap"><FactValue fact={poolerPressureFact(data.pods, 'svActive')} /> servers busy</span>
+      </span>
+      <Sub>
+        {maxwait !== undefined && maxwait > 0 ? `longest wait ${poolerPressureFact(data.pods, 'maxwaitSeconds').text} · ` : ''}
+        {ok.length}/{data.pods.length} pods reporting{limitation ? ` · ${limitation}` : ''}
+      </Sub>
+    </>
+  )
+}

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

@@ -0,0 +1,145 @@
+// @vitest-environment jsdom
+import { renderToStaticMarkup } from 'react-dom/server'
+import { expect, it, vi, afterEach } from 'vitest'
+import { buildCNPGFleet, CNPG_WORKSPACE_KEYS, type CNPGWorkspaceResponse, type CNPGKindCoverage } from '@skyhook-io/k8s-ui'
+import { CNPGProtection } from './CNPGProtection'
+
+vi.mock('../../context/ConnectionContext', () => ({ useConnection: () => ({ connection: { context: 'test' } }) }))
+vi.mock('./useCNPGNavigate', () => ({ useCNPGNavigate: () => vi.fn() }))
+afterEach(() => vi.useRealTimers())
+const now = Date.parse('2026-10-05T12:00:00Z')
+const backup = (name: string, phase: string, ageDays: number) => ({ apiVersion: 'postgresql.cnpg.io/v1', kind: 'Backup', metadata: { namespace: 'pg', name }, spec: { cluster: { name: 'pg' } }, status: { phase, startedAt: new Date(now - ageDays * 86400000).toISOString() } })
+
+function render(objects: CNPGWorkspaceResponse['objects'], coverage: CNPGKindCoverage = { state: 'full' }, query = '', scopeCluster?: { namespace: string; name: string }) {
+  const data: CNPGWorkspaceResponse = { installed: true, context: 'test', namespaces: null, coverage: { ...Object.fromEntries(CNPG_WORKSPACE_KEYS.map((k) => [k, { state: 'full' as const }])), backups: coverage }, objects, issues: [], audit: [], backupsOmitted: 0 }
+  return renderToStaticMarkup(<CNPGProtection data={data} fleet={buildCNPGFleet(data)} namespaces={[]} searchParams={new URLSearchParams(query)} onSetParams={() => {}} onInspect={() => {}} inspected={null} onClearNamespaces={() => {}} scopeCluster={scopeCluster} />)
+}
+
+it('marks a blocked schedule amber and names its missing destination and unreported time', () => {
+  const cluster = { apiVersion: 'postgresql.cnpg.io/v1', kind: 'Cluster', metadata: { name: 'payments', namespace: 'pg' }, spec: {} }
+  const schedule = { metadata: { name: 'nightly', namespace: 'pg' }, spec: { cluster: { name: 'payments' }, schedule: '0 0 2 * * *' } }
+  const html = render({ clusters: [cluster], scheduledBackups: [schedule] })
+  expect(html).toContain('Enabled · 0 0 2 * * * · blocked: no backup destination')
+  expect(html).toContain('No backup destination')
+  expect(html).toContain('Next run reported by the operator')
+  expect(html).toContain('Not reported')
+  const table = html.slice(html.indexOf('Schedules</h2>'))
+  expect(table).not.toContain('bg-emerald-100')
+  const unknown = render({ scheduledBackups: [schedule] })
+  expect(unknown).not.toContain('No backup destination')
+})
+
+it('uses green only for a completed Backup from the latest schedule firing', () => {
+  vi.useFakeTimers(); vi.setSystemTime(now)
+  const schedule = { metadata: { name: 'nightly', namespace: 'pg' }, spec: { cluster: { name: 'pg' } }, status: { lastScheduleTime: new Date(now).toISOString() } }
+  const completed = { ...backup('ok', 'completed', 0), metadata: { namespace: 'pg', name: 'ok', labels: { 'cnpg.io/scheduled-backup': 'nightly' } } }
+  const html = render({ scheduledBackups: [schedule], backups: [completed] })
+  const table = html.slice(html.indexOf('Schedules</h2>'))
+  expect(table).toMatch(/bg-emerald-100[^>]*>completed/)
+  expect(table).not.toMatch(/bg-emerald-100[^>]*>Enabled/)
+  const older = { ...completed, status: { ...completed.status, startedAt: new Date(now - 3600000).toISOString() } }
+  const olderTable = render({ scheduledBackups: [schedule], backups: [older] }).split('Schedules</h2>')[1]
+  expect(olderTable).toContain('its Backup is not loaded')
+  expect(olderTable).not.toContain('bg-emerald-100')
+})
+
+it('says restore tests are not recorded once inside the cluster evidence card', () => {
+  const cluster = { apiVersion: 'postgresql.cnpg.io/v1', kind: 'Cluster', metadata: { name: 'payments', namespace: 'pg' }, spec: {} }
+  const html = render({ clusters: [cluster] }, { state: 'full' }, '', { namespace: 'pg', name: 'payments' })
+  expect(html.match(/Kubernetes (?:does not record|records no) restore tests/g)).toHaveLength(1)
+})
+
+it('uses the same suspended, due-now and overdue next-run wording as the drawer', () => {
+  vi.useFakeTimers(); vi.setSystemTime(now)
+  const schedule = (name: string, minutes: number, suspend = false) => ({ metadata: { name, namespace: 'pg' }, spec: { suspend }, status: { nextScheduleTime: new Date(now - minutes * 60000).toISOString() } })
+  const html = render({ scheduledBackups: [schedule('paused', 90, true), schedule('due', 5), schedule('late', 15)] })
+  expect(html).toContain('suspended')
+  const host = document.createElement('div'); host.innerHTML = html
+  const paused = [...host.querySelectorAll('tr')].find((row) => row.textContent?.includes('paused'))!
+  expect(paused.textContent).toContain('Suspended')
+  expect(paused.textContent).not.toContain('Enabled')
+  expect(html).toContain('due now')
+  expect(html).toContain('overdue by 15m')
+  expect(html).not.toContain('90m overdue')
+})
+
+it('retains old in-flight runs with their age qualification and drops old settled runs', () => {
+  vi.useFakeTimers(); vi.setSystemTime(now)
+  const html = render({ backups: [backup('old-running', 'running', 10), backup('old-completed', 'completed', 10), backup('old-failed', 'failed', 10)] })
+  expect(html).toContain('old-running')
+  expect(html).toContain('started more than a week ago')
+  expect(html).not.toContain('old-completed')
+  expect(html).not.toContain('old-failed')
+  expect(html).toContain('All 1')
+})
+
+it('marks backup run counts as lower bounds or unknown when coverage is incomplete', () => {
+  vi.useFakeTimers(); vi.setSystemTime(now)
+  const html = render({ backups: [backup('failed-read', 'failed', 1)] }, { state: 'partial', allowedNamespaces: ['pg'] })
+  expect(html).toContain('Failed ≥1')
+  expect(html).toContain('All ≥1')
+  expect(html).toContain('Backups not read')
+  const denied = render({}, { state: 'denied' })
+  expect(denied).toContain('Failed ?')
+  expect(denied).toContain('All ?')
+  expect(denied).toContain('No access to Backups')
+  const scoped = render({ backups: [backup('failed-read', 'failed', 1)] }, { state: 'partial', allowedNamespaces: ['pg'] }, 'cluster=pg/pg')
+  expect(scoped).toContain('Failed 1')
+  expect(scoped).not.toContain('Failed ≥1')
+})
+
+it('explains absent WAL storage and suppresses ObjectStore-only footnotes on fleet and cluster views', () => {
+  const cluster = { apiVersion: 'postgresql.cnpg.io/v1', kind: 'Cluster', metadata: { name: 'payments', namespace: 'pg' }, spec: {}, status: { conditions: [{ type: 'ContinuousArchiving', status: 'True', message: 'Continuous archiving is working', lastTransitionTime: '2026-10-01T12:00:00Z' }] } }
+  for (const scope of [undefined, { namespace: 'pg', name: 'payments' }]) {
+    const html = render({ clusters: [cluster] }, { state: 'full' }, '', scope)
+    expect(html).toContain('Not archived: no destination configured')
+    if (scope) {
+      expect(html).toContain('point-in-time recovery is unavailable')
+      expect(html).toContain('Operator report')
+      expect(html).toContain('aria-expanded="false"')
+    } else {
+      expect(html).toContain('Recovery evidence for pg/payments')
+      expect(html).not.toContain('Operator report')
+      expect(html).toContain('without keeping it')
+    }
+    expect(html).toContain('None: no backup destination')
+    expect(html).not.toContain('Recovery windows come from ObjectStore status')
+    expect(html).not.toContain('ObjectStore has no health status')
+  }
+})
+it('keeps ObjectStore notes when ObjectStore evidence is present', () => {
+  const cluster = { apiVersion: 'postgresql.cnpg.io/v1', kind: 'Cluster', metadata: { name: 'pg', namespace: 'pg' }, spec: { plugins: [{ name: 'barman-cloud.cloudnative-pg.io', parameters: { barmanObjectName: 'store' } }] } }
+  const store = { apiVersion: 'barmancloud.cnpg.io/v1', kind: 'ObjectStore', metadata: { name: 'store', namespace: 'pg' }, spec: {} }
+  for (const scope of [undefined, { namespace: 'pg', name: 'pg' }]) {
+    const html = render({ clusters: [cluster], objectStores: [store] }, { state: 'full' }, '', scope)
+    expect(html).toContain('Recovery windows come from ObjectStore status')
+    expect(html).toContain('ObjectStore has no health status')
+  }
+})
+it('gives schedule state space and wraps the long next-run heading without changing shared table headings', () => {
+  const schedule = { metadata: { name: 'nightly', namespace: 'pg' }, spec: { cluster: { name: 'payments' } } }
+  const html = render({ scheduledBackups: [schedule] }, { state: 'full' }, '', { namespace: 'pg', name: 'payments' })
+  const table = html.slice(html.indexOf('Schedules</h2>'))
+  expect(table).toContain('min-width:820px')
+  expect(table).toContain('width:25%')
+  expect(table).toContain('block whitespace-normal')
+  expect(table).toContain('whitespace-nowrap')
+})
+
+it('uses the Configuration card gutter and SectionHeading in scoped recovery evidence', () => {
+  const cluster = { apiVersion: 'postgresql.cnpg.io/v1', kind: 'Cluster', metadata: { name: 'pg', namespace: 'pg' }, spec: {}, status: {} }
+  const host = document.createElement('div'); host.innerHTML = render({ clusters: [cluster] }, { state: 'full' }, '', { namespace: 'pg', name: 'pg' })
+  const title = [...host.querySelectorAll('h3')].find((h) => h.textContent === 'Recovery evidence')!
+  expect(title.classList.contains('uppercase')).toBe(true)
+  expect(title.closest('section')?.classList.contains('px-4')).toBe(true)
+  expect(title.closest('section')?.parentElement?.classList.contains('p-4')).toBe(true)
+})
+
+it('explains no-destination operator success once for the fleet table and provides full evidence access per row', () => {
+  const clusters = ['orders', 'payments'].map((name) => ({ apiVersion: 'postgresql.cnpg.io/v1', metadata: { name, namespace: 'pg' }, spec: {}, status: { conditions: [{ type: 'ContinuousArchiving', status: 'True', message: 'working' }] } }))
+  const html = render({ clusters })
+  expect(html.match(/CloudNativePG reports archiving as working because/g)).toHaveLength(1)
+  expect(html.match(/Recovery evidence for pg\//g)).toHaveLength(2)
+  expect(html).not.toContain('Operator report')
+  expect(html).not.toContain('WAL is not archived to recovery storage')
+})