@skyhook-io/radar-app 1.17.0 → 1.17.1

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

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest'
+import { cnpgHost } from './host'
+
+const resource = { kind: 'clusters', group: 'postgresql.cnpg.io', namespace: 'db', name: 'pg' }
+
+describe('CNPG host composition', () => {
+  it('preserves context and query state when mapping a generic detail route', () => {
+    const search = new URLSearchParams('apiGroup=postgresql.cnpg.io&ctx=kind-demo&tab=timeline&drawer=pods%3Apg-1')
+    const path = cnpgHost.detailRedirect(resource, search)!
+    const url = new URL(path, 'http://radar.test')
+    expect(url.pathname).toBe('/cnpg/clusters/db/pg')
+    expect(Object.fromEntries(url.searchParams)).toEqual({ ctx: 'kind-demo', tab: 'activity', drawer: 'pods:pg-1' })
+    expect(search.get('tab')).toBe('timeline')
+    expect(search.get('apiGroup')).toBe('postgresql.cnpg.io')
+  })
+
+  it('keeps kind collisions on their own routes and expands CNPG with context', () => {
+    const other = { ...resource, group: 'cluster.x-k8s.io' }
+    expect(cnpgHost.detailRedirect(other, new URLSearchParams())).toBeNull()
+    expect(cnpgHost.expandedPath(other)).toBeNull()
+    expect(cnpgHost.expandedPath(resource, 'kind-demo', 'yaml')).toBe('/cnpg/clusters/db/pg?ctx=kind-demo&tab=yaml')
+    expect(cnpgHost.logs('Cluster', { apiVersion: 'cluster.x-k8s.io/v1beta1' }, 'db', 'pg')).toBeNull()
+  })
+})

package/src/components/cnpg/host.tsx

@@ -0,0 +1,101 @@
+import { useRadarFeature } from '../../api/client'
+import { useState } from 'react'
+import { isApiGroup } from '@skyhook-io/k8s-ui'
+import type { RenderDiagnoseAction } from '../../context/DiagnoseCustomization'
+import { CNPGClustersKindView } from './CNPGClustersKindView'
+import { CNPGCreateClusterDialog } from './CNPGCreateClusterDialog'
+import { CNPGClusterLogs } from './CNPGClusterLogs'
+import { CNPGDrawerTrailBack } from './CNPGDrawerTrail'
+import { CNPGInvestigationAction } from './CNPGClusterTabs'
+import { renderCNPGSummary } from './CNPGSummaryHost'
+import { renderCNPGHeaderActions } from './actions/renderCNPGHeaderActions'
+import { CNPG_DETAIL_KINDS, cnpgClusterKindListMode, cnpgDetailKindFor, cnpgDetailPath } from './routes'
+import type { DetailSlots, HostResource, KindListProps, ResourceHost } from '../../integrations/resourceHost'
+import { kindToPluralWithGroup } from '../../utils/navigation'
+import { CNPGObjectStoreRenderer } from '../resources/renderers/CNPGObjectStoreRenderer'
+import { CNPGClusterRenderer } from '../resources/renderers/CNPGClusterRenderer'
+import { CNPGImageCatalogRenderer } from '../resources/renderers/CNPGImageCatalogRenderer'
+import {
+  CNPGDatabaseRenderer,
+  CNPGPublicationRenderer,
+  CNPGSubscriptionRenderer,
+} from '../resources/renderers/CNPGDeclarativeRenderer'
+
+export const cnpgHost = {
+  clusterKind: { name: 'clusters', kind: 'Cluster', group: 'postgresql.cnpg.io' },
+
+  expandedPath(resource: HostResource, context?: string, tab?: 'yaml'): string | null {
+    const plural = cnpgDetailKindFor(kindToPluralWithGroup(resource.kind, resource.group ?? ''), resource.group)
+    return plural ? cnpgDetailPath({ plural, namespace: resource.namespace, name: resource.name }, context, tab) : null
+  },
+
+  detailRedirect(resource: HostResource, search: URLSearchParams): string | null {
+    const plural = cnpgDetailKindFor(kindToPluralWithGroup(resource.kind, resource.group ?? ''), resource.group)
+    if (!plural) return null
+    const params = new URLSearchParams(search)
+    params.delete('apiGroup')
+    const tab = params.get('tab')
+    if (plural === 'clusters' && (tab === 'timeline' || tab === 'events')) params.set('tab', 'activity')
+    const base = cnpgDetailPath({ plural, namespace: resource.namespace, name: resource.name })
+    const qs = params.toString()
+    return qs ? `${base}?${qs}` : base
+  },
+
+  detailSlots(namespace: string, name: string, group?: string): DetailSlots {
+    return {
+      renderHeaderActions: ({ resource, context, onNavigate }) => renderCNPGHeaderActions({ resource, namespace, name, compact: context === 'drawer', onNavigate }),
+      renderSummary: (props) => renderCNPGSummary({ ...props, group }),
+    }
+  },
+
+  diagnoseAction(render: RenderDiagnoseAction | undefined): RenderDiagnoseAction | undefined {
+    return render ? (context) => context.kind === 'Cluster' && context.group === 'postgresql.cnpg.io'
+      ? <CNPGDiagnoseForServer render={render} context={context} />
+      : render(context) : undefined
+  },
+
+  logs(kind: string, resource: { apiVersion?: string } | null | undefined, namespace: string, name: string) {
+    return kind === 'Cluster' && isApiGroup(resource?.apiVersion, 'postgresql.cnpg.io') ? <CNPGClusterLogs namespace={namespace} name={name} /> : null
+  },
+}
+
+function CNPGDiagnoseForServer({ render, context }: { render: RenderDiagnoseAction; context: Parameters<RenderDiagnoseAction>[0] }) {
+  const { support } = useRadarFeature('cnpgWorkspace')
+  return support === 'supported'
+    ? <CNPGInvestigationAction namespace={context.namespace} name={context.name} render={render} context={context} />
+    : render(context)
+}
+
+function CNPGKindList(props: KindListProps) {
+  const [creating, setCreating] = useState(false)
+  return <>
+    <CNPGClustersKindView {...props} onCreate={() => setCreating(true)} />
+    {creating && <CNPGCreateClusterDialog namespaces={props.namespaces} onClose={() => setCreating(false)} onCreated={props.onInspect} />}
+  </>
+}
+
+export const cnpgResourceHost: ResourceHost = {
+  id: 'cnpg',
+  renderers: {
+    CNPGObjectStoreRenderer, CNPGClusterRenderer, CNPGDatabaseRenderer,
+    CNPGPublicationRenderer, CNPGSubscriptionRenderer, CNPGImageCatalogRenderer,
+  },
+  resources: Object.entries(CNPG_DETAIL_KINDS).map(([name, kind]) => ({ name, group: kind.group })),
+  feature: 'cnpgWorkspace',
+  expandedPath: cnpgHost.expandedPath,
+  detailRedirect: cnpgHost.detailRedirect,
+  detailOwnership: ['summary', 'destination', 'logs'],
+  detailSlots: resource => cnpgHost.detailSlots(resource.namespace, resource.name, resource.group),
+  diagnoseAction: cnpgHost.diagnoseAction,
+  logs: (resource, data) => kindToPluralWithGroup(resource.kind, resource.group ?? '') === 'clusters' ? cnpgHost.logs('Cluster', data, resource.namespace, resource.name) : null,
+  drawerNavigation: {
+    ownsPath: pathname => pathname === '/cnpg' || pathname.startsWith('/cnpg/'),
+    Component: CNPGDrawerTrailBack,
+  },
+  kindLists: [{
+    kind: cnpgHost.clusterKind,
+    title: 'CloudNativePG Clusters',
+    mode: (support, pending) => cnpgClusterKindListMode(cnpgHost.clusterKind, support, pending),
+    Component: CNPGKindList,
+  }],
+}

package/src/components/cnpg/inspectModel.test.ts

@@ -0,0 +1,120 @@
+import { describe, expect, it } from 'vitest'
+import type { CNPGParametersResponse } from '../../api/cnpg-inspect'
+import { cnpgDeclaredTargetText, cnpgParametersView, cnpgRecoveryStopText, cnpgSettingTakesEffect } from './inspectModel'
+
+const sw = (reason: string) => ({ from: 1, to: 2, switchLsn: '0/5000A28', reason })
+
+describe('cnpgRecoveryStopText', () => {
+  it('words every reason PostgreSQL writes when it promotes', () => {
+    expect(cnpgRecoveryStopText(sw('before 2026-10-01 12:00:00.123+00'))).toBe('stopped before the transaction that committed at 2026-10-01 12:00:00.123+00')
+    expect(cnpgRecoveryStopText(sw('after transaction 1234'))).toBe('stopped after transaction 1234')
+    expect(cnpgRecoveryStopText(sw('before LSN 0/3000060'))).toBe('stopped before LSN 0/3000060')
+    expect(cnpgRecoveryStopText(sw('at restore point "pre-migration"'))).toBe('stopped at restore point “pre-migration”')
+    expect(cnpgRecoveryStopText(sw('reached consistency'))).toMatch(/immediate target/)
+    // Also what a failover writes, so it is never read as "the restore reached its target".
+    expect(cnpgRecoveryStopText(sw('no recovery target specified'))).toMatch(/failover or switchover reads the same/)
+    expect(cnpgRecoveryStopText(sw('something new'))).toBe('something new')
+  })
+})
+
+describe('cnpgDeclaredTargetText', () => {
+  it('reads the declared target, or says there is none', () => {
+    expect(cnpgDeclaredTargetText(undefined)).toMatch(/^None/)
+    expect(cnpgDeclaredTargetText({ targetTime: '2026-10-01T12:00:00Z', exclusive: true })).toBe('time 2026-10-01T12:00:00Z · exclusive')
+  })
+})
+
+describe('cnpgSettingTakesEffect', () => {
+  it('maps pg_settings.context to when a change applies', () => {
+    expect(cnpgSettingTakesEffect('postmaster')).toBe('restart')
+    expect(cnpgSettingTakesEffect('sighup')).toBe('reload')
+    expect(cnpgSettingTakesEffect('user')).toMatch(/session can override/)
+    expect(cnpgSettingTakesEffect('backend')).toBe('new connections')
+    expect(cnpgSettingTakesEffect('internal')).toMatch(/fixed/)
+    expect(cnpgSettingTakesEffect(undefined)).toBe('unknown')
+  })
+})
+
+describe('cnpgParametersView', () => {
+  const setting = (name: string, value: string | null, extra: Partial<{ pendingRestart: boolean; source: string; context: string }> = {}) => ({
+    name,
+    value,
+    setByClient: value === null,
+    source: extra.source ?? 'configuration file',
+    context: extra.context ?? 'sighup',
+    pendingRestart: extra.pendingRestart ?? false,
+  })
+  const resp = (instances: CNPGParametersResponse['instances']): CNPGParametersResponse => ({
+    cluster: { namespace: 'db', name: 'pg', uid: 'u' },
+    sampledAt: '2026-10-04T00:00:00Z',
+    permission: { exec: 'allowed' },
+    state: 'ok',
+    declared: [
+      { name: 'shared_buffers', value: '256MB' },
+      { name: 'work_mem', value: '8MB' },
+      { name: 'my.custom', value: 'x' },
+    ],
+    instances,
+  })
+
+  it('shows one value when instances agree, each when they differ, and pending restarts', () => {
+    const v = cnpgParametersView(
+      resp([
+        { pod: 'pg-1', role: 'primary', state: 'ok', settings: [setting('shared_buffers', '256MB', { context: 'postmaster' }), setting('work_mem', '8MB')] },
+        { pod: 'pg-2', role: 'replica', state: 'ok', settings: [setting('shared_buffers', '128MB', { context: 'postmaster', pendingRestart: true }), setting('work_mem', '8MB')] },
+        { pod: 'pg-3', role: 'replica', state: 'unreachable', error: 'did not answer' },
+      ]),
+    )
+    const [sb, wm, custom] = v.rows
+    expect(sb.perInstance).toEqual([{ pod: 'pg-1', value: '256MB' }, { pod: 'pg-2', value: '128MB' }])
+    expect(sb.pendingRestart).toEqual(['pg-2'])
+    expect(sb.takesEffect).toBe('restart')
+    expect(wm.value).toBe('8MB')
+    expect(custom.unreported).toEqual(['pg-1', 'pg-2'])
+    expect(v.unread.map((i) => i.pod)).toEqual(['pg-3'])
+    expect(v.summary).toMatchObject({ attention: true, tone: 'degraded' })
+    expect(v.summary.text).toBe('3 declared · read on pg-1, pg-2 · not read on pg-3 · restart pending on pg-2 · 1 differ between instances')
+  })
+
+  it('names the instances read and the declared instance that is not running', () => {
+    const v = cnpgParametersView(resp([{ pod: 'orders-1', role: 'primary', state: 'ok', settings: [setting('work_mem', '8MB')] }]), undefined, { declaredInstances: 2, expectedInstances: ['orders-1', 'orders-2'] })
+    expect(v.summary.text).toBe('3 declared · read on orders-1 · orders-2 not running · 2 instances declared')
+    expect(v.summary.tone).toBe('unknown')
+    expect(cnpgParametersView(resp([{ pod: 'orders-1', role: 'primary', state: 'ok', settings: [setting('work_mem', '8MB')] }]), undefined, { declaredInstances: 1, expectedInstances: ['orders-1', 'orders-2'] }).summary.tone).toBe('unknown')
+  })
+  it('says so when there is no instance Pod to read', () => {
+    expect(cnpgParametersView(resp([])).summary).toEqual({ text: '3 declared · no instance Pod to read', tone: 'unknown', attention: false })
+  })
+  it('keeps differing change contexts attributed to the instances that reported them', () => {
+    const v = cnpgParametersView(resp([
+      { pod: 'pg-1', role: 'primary', state: 'ok', settings: [setting('work_mem', '8MB', { context: 'user' })] },
+      { pod: 'pg-2', role: 'replica', state: 'ok', settings: [setting('work_mem', '8MB', { context: 'backend' })] },
+    ]))
+    expect(v.rows[1].takesEffect).toBe('pg-1: reload · a session can override it · pg-2: new connections')
+  })
+
+  it('never reads a value the connection itself sets', () => {
+    const v = cnpgParametersView(
+      resp([{ pod: 'pg-1', role: 'primary', state: 'ok', settings: [setting('shared_buffers', null, { source: 'client', context: 'user' })] }]),
+    )
+    expect(v.rows[0]).toMatchObject({ setByClient: true, value: undefined, perInstance: undefined })
+  })
+  it('qualifies an existing sample when the Cluster adds an unsampled declaration', () => {
+    const r = resp([{ pod: 'pg-1', role: 'primary', state: 'ok', settings: [setting('work_mem', '8MB')] }])
+    r.declared = [{ name: 'work_mem', value: '8MB' }]
+    const v = cnpgParametersView(r, [...r.declared, { name: 'new_parameter', value: 'on' }])
+    expect(v.summary).toEqual({ text: '2 declared · 1 sampled · 1 not sampled · read on pg-1', tone: 'unknown', attention: false })
+    expect(v.rows).toHaveLength(2)
+  })
+  it('does not infer absent Pods when all names were skipped or the earlier spec had no parameters', () => {
+    const empty = { ...resp([]), declared: [] }
+    expect(cnpgParametersView(empty, [{ name: 'work_mem', value: '8MB' }]).summary.text).toBe('1 declared · no parameters sampled')
+    const skipped = { ...resp([]), declared: [{ name: 'invalid name', value: 'x' }], skipped: ['invalid name'] }
+    expect(cnpgParametersView(skipped).summary.text).toBe('1 declared · no parameters sampled')
+  })
+})
+
+it.each([1, 2])('uses the correct declared-instance noun for %s', (count) => {
+  const response = { state: 'ok', declared: [{ name: 'work_mem', value: '8MB' }], instances: [{ pod: 'pg-1', state: 'ok', settings: [{ name: 'work_mem', value: '8MB' }] }] } as CNPGParametersResponse
+  expect(cnpgParametersView(response, response.declared, { declaredInstances: count }).summary.text).toContain(`${count} instance${count === 1 ? '' : 's'} declared`)
+})

package/src/components/cnpg/inspectModel.ts

@@ -0,0 +1,140 @@
+import type { HealthLevel } from '@skyhook-io/k8s-ui'
+import type { CNPGInstanceSettings, CNPGParametersResponse, CNPGTimelineSwitch } from '../../api/cnpg-inspect'
+
+/**
+ * What a timeline switch's reason says, in words. PostgreSQL writes the reason
+ * into the history file when it promotes: the recovery target it stopped at,
+ * or "no recovery target specified" when it replayed all the WAL it had —
+ * which is also what a failover or switchover writes.
+ */
+export function cnpgRecoveryStopText(sw: CNPGTimelineSwitch): string {
+  const r = sw.reason.trim()
+  let m = /^(before|after) transaction (\d+)$/.exec(r)
+  if (m) return `stopped ${m[1]} transaction ${m[2]}`
+  m = /^(before|after) LSN ([0-9A-Fa-f]+\/[0-9A-Fa-f]+)$/.exec(r)
+  if (m) return `stopped ${m[1]} LSN ${m[2]}`
+  m = /^at restore point "(.*)"$/.exec(r)
+  if (m) return `stopped at restore point “${m[1]}”`
+  m = /^(before|after) (\d{4}-\d{2}-\d{2} .+)$/.exec(r)
+  if (m) return `stopped ${m[1]} the transaction that committed at ${m[2]}`
+  if (r === 'reached consistency') return 'stopped as soon as it was consistent (immediate target)'
+  if (r === 'no recovery target specified') return 'promoted without a recovery target: it replayed all the WAL it had (a failover or switchover reads the same)'
+  return r || 'no reason recorded'
+}
+
+/** The declared spec.bootstrap.recovery.recoveryTarget, in words. */
+export function cnpgDeclaredTargetText(target: Record<string, unknown> | undefined): string {
+  if (!target) return 'None: replay all the WAL the archive holds'
+  const parts: string[] = []
+  if (typeof target.targetTime === 'string') parts.push(`time ${target.targetTime}`)
+  if (typeof target.targetLSN === 'string') parts.push(`LSN ${target.targetLSN}`)
+  if (typeof target.targetXID === 'string') parts.push(`transaction ${target.targetXID}`)
+  if (typeof target.targetName === 'string') parts.push(`restore point “${target.targetName}”`)
+  if (target.targetImmediate === true) parts.push('as soon as consistent')
+  if (typeof target.targetTLI === 'string') parts.push(`timeline ${target.targetTLI}`)
+  if (typeof target.backupID === 'string') parts.push(`from backup ${target.backupID}`)
+  if (target.exclusive === true) parts.push('exclusive')
+  return parts.length > 0 ? parts.join(' · ') : 'Declared without a target field'
+}
+
+/** When a change to a parameter takes effect, from pg_settings.context. */
+export function cnpgSettingTakesEffect(context: string | undefined): string {
+  switch (context) {
+    case 'postmaster':
+      return 'restart'
+    case 'sighup':
+      return 'reload'
+    case 'user':
+    case 'superuser':
+      return 'reload · a session can override it'
+    case 'backend':
+    case 'superuser-backend':
+      return 'new connections'
+    case 'internal':
+      return 'fixed (cannot be changed)'
+    default:
+      return 'unknown'
+  }
+}
+
+export interface CNPGParameterRow {
+  name: string
+  declared: string
+  /** The value every instance that answered reports, when they agree. */
+  value?: string
+  /** Pod → value, when instances report different values. */
+  perInstance?: { pod: string; value: string }[]
+  takesEffect: string
+  source?: string
+  setByClient: boolean
+  pendingRestart: string[]
+  /** Instances that answered but did not report this parameter. */
+  unreported: string[]
+}
+
+export interface CNPGParametersView {
+  rows: CNPGParameterRow[]
+  read: CNPGInstanceSettings[]
+  unread: CNPGInstanceSettings[]
+  summary: { text: string; tone: HealthLevel; attention: boolean }
+}
+
+/**
+ * Declared parameters beside what each instance reports. No declared-vs-
+ * effective verdict: PostgreSQL normalizes units ("1024MB" reads "1GB"), and
+ * CloudNativePG merges some values itself. Instances disagreeing or a pending
+ * restart are observations — a rolling restart passes through both.
+ */
+export function cnpgParametersView(resp: CNPGParametersResponse, declared = resp.declared, scope?: { declaredInstances?: number; expectedInstances?: string[] }): CNPGParametersView {
+  const read = resp.instances.filter((i) => i.state === 'ok' && i.settings)
+  const unread = resp.instances.filter((i) => !(i.state === 'ok' && i.settings))
+  const queriedNames = new Set(resp.declared.filter((p) => !resp.skipped?.includes(p.name)).map((p) => p.name.toLowerCase()))
+  const rows = declared.map((d): CNPGParameterRow => {
+    const key = d.name.toLowerCase()
+    const seen = read.map((i) => ({ pod: i.pod, s: i.settings!.find((x) => x.name.toLowerCase() === key) }))
+    const reported = seen.filter((x) => x.s)
+    const values = reported.filter((x) => x.s!.value !== null).map((x) => ({ pod: x.pod, value: x.s!.value as string }))
+    const distinct = new Set(values.map((v) => v.value))
+    const first = reported[0]?.s
+    const sources = new Set(reported.map((x) => x.s!.source))
+    return {
+      name: d.name,
+      declared: d.value,
+      value: distinct.size === 1 ? values[0].value : undefined,
+      perInstance: distinct.size > 1 ? values : undefined,
+      takesEffect: new Set(reported.map((x) => x.s!.context)).size > 1
+        ? reported.map((x) => `${x.pod}: ${cnpgSettingTakesEffect(x.s!.context)}`).join(' · ')
+        : cnpgSettingTakesEffect(first?.context),
+      source: sources.size === 1 ? [...sources][0] : sources.size > 1 ? 'differs by instance' : undefined,
+      setByClient: reported.some((x) => x.s!.setByClient),
+      pendingRestart: reported.filter((x) => x.s!.pendingRestart).map((x) => x.pod),
+      unreported: seen.filter((x) => !x.s).map((x) => x.pod),
+    }
+  })
+  const pending = new Set(rows.flatMap((r) => r.pendingRestart))
+  const differing = rows.filter((r) => r.perInstance).length
+  const unsampled = rows.filter((r) => !queriedNames.has(r.name.toLowerCase())).length
+  if (queriedNames.size === 0) {
+    return { rows, read, unread, summary: { text: `${rows.length} declared · no parameters sampled`, tone: 'unknown', attention: false } }
+  }
+  if (resp.instances.length === 0) {
+    // Hibernated, or no instance Pod yet: nothing was read, which is not calm.
+    return { rows, read, unread, summary: { text: `${rows.length} declared · no instance Pod to read`, tone: 'unknown', attention: false } }
+  }
+  const bits = [`${rows.length} declared`]
+  if (unsampled > 0) bits.push(`${rows.length - unsampled} sampled`, `${unsampled} not sampled`)
+  bits.push(read.length > 0 ? `read on ${read.map((i) => i.pod).join(', ')}` : 'no instance answered')
+  const missing = (scope?.expectedInstances ?? []).filter((pod) => !resp.instances.some((i) => i.pod === pod))
+  if (missing.length > 0) bits.push(`${missing.join(', ')} not running`)
+  if (scope?.declaredInstances !== undefined) bits.push(`${scope.declaredInstances} instance${scope.declaredInstances === 1 ? '' : 's'} declared`)
+  if (unread.length > 0) bits.push(`not read on ${unread.map((i) => i.pod).join(', ')}`)
+  if (pending.size > 0) bits.push(`restart pending on ${[...pending].sort().join(', ')}`)
+  if (differing > 0) bits.push(`${differing} differ between instances`)
+  const attention = pending.size > 0 || differing > 0
+  return {
+    rows,
+    read,
+    unread,
+    summary: { text: bits.join(' · '), tone: attention ? 'degraded' : unread.length > 0 || unsampled > 0 || missing.length > 0 || (scope?.declaredInstances !== undefined && read.length < scope.declaredInstances) ? 'unknown' : 'healthy', attention },
+  }
+}

package/src/components/cnpg/logicalSlots.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+import type { CNPGRuntimeResponse } from '../../api/cnpg'
+import { cnpgPublisherSlotsFrom } from './logicalSlots'
+
+const rt = (status: any, proxy: 'allowed' | 'denied' = 'allowed', role: 'primary' | 'replica' = 'primary'): CNPGRuntimeResponse => ({
+  cluster: { namespace: 'src', name: 'src', uid: 'u' },
+  sampledAt: '2026-09-30T10:00:00Z',
+  permission: { proxy, grant: { verb: 'get', resource: 'pods', subresource: 'proxy', namespace: 'src' } },
+  instances: [{ pod: 'src-1', role, status, metrics: { state: 'ok' } }],
+})
+
+describe('cnpgPublisherSlotsFrom', () => {
+  it('keeps unread, denied and unreachable apart from an empty slot list', () => {
+    expect(cnpgPublisherSlotsFrom(undefined).state).toBe('notRead')
+    expect(cnpgPublisherSlotsFrom(rt({ state: 'ok' }, 'denied')).state).toBe('denied')
+    expect(cnpgPublisherSlotsFrom(rt({ state: 'unreachable', error: 'timeout' })).reason).toBe('timeout')
+    expect(cnpgPublisherSlotsFrom(rt({ state: 'ok' }, 'allowed', 'replica')).state).toBe('unavailable')
+  })
+  it('passes the primary slots through', () => {
+    const r = cnpgPublisherSlotsFrom(rt({ state: 'ok', slots: [{ name: 'orders_sub', type: 'logical', active: true, retainedBytes: 10 }] }))
+    expect(r).toEqual({ state: 'ok', slots: [{ name: 'orders_sub', type: 'logical', active: true, walStatus: undefined, retainedBytes: 10, database: undefined }] })
+  })
+  it('keeps a capped report partial and marks cached data after a failed refresh', () => {
+    const capped = cnpgPublisherSlotsFrom(rt({ state: 'partial', reason: '250 replication slots; the first 200 are shown', slots: [] }))
+    expect(capped.state).toBe('partial')
+    expect(capped.reason).toContain('250')
+    expect(cnpgPublisherSlotsFrom(rt({ state: 'ok', slots: [] }), new Error('boom'), true).stale).toBe(true)
+    expect(cnpgPublisherSlotsFrom(rt({ state: 'partial', incomplete: true, slots: null })).state).toBe('unavailable')
+  })
+})

package/src/components/cnpg/logicalSlots.ts

@@ -0,0 +1,29 @@
+import type { UseQueryResult } from '@tanstack/react-query'
+import type { CNPGPublisher, CNPGPublisherSlots } from '@skyhook-io/k8s-ui'
+import { useCNPGRuntime, type CNPGRuntimeResponse } from '../../api/cnpg'
+import { formatGrant } from '@skyhook-io/k8s-ui'
+
+/** The publisher primary's replication slots from its runtime answer, never read as "no slots" when unread. */
+export function cnpgPublisherSlotsFrom(rt: CNPGRuntimeResponse | undefined, error?: unknown, refetchFailed = false): CNPGPublisherSlots {
+  if (!rt) return { state: 'notRead', reason: error instanceof Error ? error.message : undefined }
+  const stale = refetchFailed || undefined
+  if (rt.permission.proxy === 'denied') return { state: 'denied', reason: formatGrant(rt.permission.grant) }
+  const primary = rt.instances.find((i) => i.role === 'primary')
+  if (!primary) return { state: 'unavailable', reason: 'no primary reported' }
+  const st = primary.status
+  if (st.state !== 'ok' && st.state !== 'partial') return { state: st.state === 'denied' ? 'denied' : 'unavailable', reason: st.error ?? st.state, stale }
+  if (!st.slots) return { state: 'unavailable', reason: st.reason ?? 'the report carried no slots', stale }
+  return {
+    state: st.state,
+    reason: st.state === 'partial' ? st.reason : undefined,
+    stale,
+    slots: st.slots.map((s) => ({ name: s.name, type: s.type, active: s.active, walStatus: s.walStatus, retainedBytes: s.retainedBytes, database: s.database })),
+  }
+}
+
+/** The slots plus the query, so the caller can say when a refresh failed over cached data. */
+export function useCNPGPublisherSlots(publisher: CNPGPublisher | undefined): { observed: CNPGPublisherSlots; query: UseQueryResult<CNPGRuntimeResponse> } {
+  const cluster = publisher?.kind === 'cluster' ? publisher : undefined
+  const query = useCNPGRuntime(cluster?.namespace ?? '', cluster?.name ?? '', !!cluster)
+  return { observed: cnpgPublisherSlotsFrom(query.data, query.error, query.isRefetchError), query }
+}

package/src/components/cnpg/lsn.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest'
+import { formatBytes, lsnDistance, parseLsn, standbyOwnBacklog } from './lsn'
+
+describe('parseLsn', () => {
+  it('reads the high and low halves', () => {
+    expect(parseLsn('0/21000000')).toBe(0x21000000)
+    expect(parseLsn('16/B374D848')).toBe(0x16 * 2 ** 32 + 0xb374d848)
+  })
+  it('is unknown, not zero, when it does not parse', () => {
+    expect(parseLsn(undefined)).toBeUndefined()
+    expect(parseLsn('')).toBeUndefined()
+    expect(parseLsn('garbage')).toBeUndefined()
+  })
+})
+
+describe('lsnDistance', () => {
+  it('measures the backlog in bytes', () => {
+    expect(lsnDistance('0/21000100', '0/21000000')).toBe(256)
+    expect(lsnDistance('1/0', 'FFFFFFFF/0')).toBe(0)
+  })
+  it('is unknown when either side is', () => {
+    expect(lsnDistance('0/1', undefined)).toBeUndefined()
+  })
+})
+
+describe('formatBytes', () => {
+  it('formats and keeps unknown visible', () => {
+    expect(formatBytes(undefined)).toBe('—')
+    expect(formatBytes(0)).toBe('0 B')
+    expect(formatBytes(16 * 1024 * 1024)).toBe('16 MiB')
+  })
+})
+
+describe('standbyOwnBacklog', () => {
+  it('compares positions only on the same timeline', () => {
+    expect(standbyOwnBacklog({ currentLsn: '0/3000000', timeline: 4 }, { replayLsn: '0/1000000', timeline: 4 })).toBe(0x2000000)
+    expect(standbyOwnBacklog({ currentLsn: '0/3000000', timeline: 5 }, { replayLsn: '0/4000000', timeline: 4 })).toBeUndefined()
+    expect(standbyOwnBacklog({ currentLsn: '0/3000000' }, { replayLsn: '0/1000000' })).toBeUndefined()
+  })
+})

package/src/components/cnpg/lsn.ts

@@ -0,0 +1,43 @@
+/**
+ * A PostgreSQL LSN ("16/B374D848") as a byte position. Undefined when it does
+ * not parse: an unreadable position must not read as zero backlog.
+ */
+export function parseLsn(lsn: string | undefined): number | undefined {
+  if (!lsn) return undefined
+  const m = /^([0-9A-Fa-f]{1,8})\/([0-9A-Fa-f]{1,8})$/.exec(lsn.trim())
+  if (!m) return undefined
+  return parseInt(m[1], 16) * 0x1_0000_0000 + parseInt(m[2], 16)
+}
+
+/** Bytes from `behind` to `ahead`; undefined when either is unknown. Never negative. */
+export function lsnDistance(ahead: string | undefined, behind: string | undefined): number | undefined {
+  const a = parseLsn(ahead)
+  const b = parseLsn(behind)
+  if (a === undefined || b === undefined) return undefined
+  return Math.max(0, a - b)
+}
+
+/**
+ * A standby's backlog from the position it reports itself, for one with no
+ * pg_stat_replication row. Positions on different timelines aren't
+ * comparable: after a failover a diverged standby can read as caught up.
+ */
+export function standbyOwnBacklog(
+  primary: { currentLsn?: string; timeline?: number } | undefined,
+  standby: { replayLsn?: string; timeline?: number } | undefined,
+): number | undefined {
+  if (primary?.timeline === undefined || primary.timeline !== standby?.timeline) return undefined
+  return lsnDistance(primary.currentLsn, standby.replayLsn)
+}
+
+export function formatBytes(n: number | undefined): string {
+  if (n === undefined) return '—'
+  const u = ['B', 'KiB', 'MiB', 'GiB', 'TiB']
+  let v = n
+  let i = 0
+  while (v >= 1024 && i < u.length - 1) {
+    v /= 1024
+    i++
+  }
+  return `${v.toFixed(v >= 10 || i === 0 ? 0 : 1)} ${u[i]}`
+}

package/src/components/cnpg/operations/CNPGFleetOperation.tsx

@@ -0,0 +1,30 @@
+import { StatusDot, Tooltip, formatAge } from '@skyhook-io/k8s-ui'
+import { CNPG_OP_STATE_TEXT, CNPG_OP_STATE_TONE } from './presentation'
+import type { CNPGTrackedOperation } from './model'
+
+export function CNPGFleetOperation({ op, onFollow }: { op: CNPGTrackedOperation; onFollow: () => void }) {
+  return (
+    <div className="mt-1 text-[11px]">
+      <Tooltip
+        content={`${op.label}: ${CNPG_OP_STATE_TEXT[op.state]}. ${op.detail || ''} ${op.clusterUID ? '' : 'Cluster UID was not recorded; verify identity.'} The fleet does not poll this operation. Open the Cluster to follow it.`}
+      >
+        <button
+          type="button"
+          onClick={(event) => {
+            event.stopPropagation()
+            onFollow()
+          }}
+          className="inline-flex max-w-full items-center gap-1 rounded text-accent-text hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+        >
+          <StatusDot tone={CNPG_OP_STATE_TONE[op.state]} size="xs" />
+          <span className="truncate">{op.label}</span>
+          <span className="shrink-0">· {CNPG_OP_STATE_TEXT[op.state]}</span>
+        </button>
+      </Tooltip>
+      <div className="text-theme-text-tertiary">
+        This tab ·{' '}
+        {op.lastCheckedAt ? `checked ${formatAge(new Date(op.lastCheckedAt).toISOString())} ago` : 'not yet checked'}
+      </div>
+    </div>
+  )
+}