@skyhook-io/radar-app 1.16.3 → 1.17.1

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

@@ -0,0 +1,223 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { MemoryRouter } from 'react-router-dom'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+vi.mock('./useCNPGKubectlContext', () => ({ useCNPGKubectlContext: () => ({ name: 'kind-test', source: 'test-config' }) }))
+import { CNPGConfiguration, CNPGDeclaredSettings } from './CNPGConfiguration'
+
+const state = vi.hoisted(() => ({ cluster: {} as any, params: {} as any, ha: {} as any, row: undefined as any, workspace: {} as any, navigate: vi.fn() }))
+vi.mock('../../api/client', () => ({ useResource: (kind: string, ns: string, name: string, group: string) => {
+  expect([kind, ns, name, group]).toEqual(['clusters', 'db', 'pg', 'postgresql.cnpg.io'])
+  return { data: state.cluster }
+} }))
+vi.mock('../../api/cnpg-inspect', () => ({ useCNPGParameters: () => state.params }))
+vi.mock('./useCNPGClusterAssessment', () => ({ useCNPGClusterAssessment: () => ({ query: state.workspace, row: state.row, ha: state.ha }) }))
+vi.mock('../../context/ConnectionContext', () => ({ useConnection: () => ({ connection: { context: 'test' } }) }))
+vi.mock('./useCNPGNavigate', () => ({ useCNPGNavigate: () => state.navigate }))
+
+;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+
+const render = () => renderToStaticMarkup(<MemoryRouter><CNPGConfiguration namespace="db" name="pg" onNavigate={() => {}} onSelectTab={() => {}} /></MemoryRouter>)
+beforeEach(() => {
+  state.cluster = { apiVersion: 'postgresql.cnpg.io/v1', kind: 'Cluster', metadata: { namespace: 'db', name: 'pg' }, spec: { postgresql: { parameters: { shared_buffers: '256MB', work_mem: '8MB' } } }, status: { conditions: [{ type: 'Ready', status: 'False' }] } }
+  state.params = { data: { state: 'denied', declared: [], permission: { exec: 'denied', grant: { verb: 'create', resource: 'pods', subresource: 'exec', namespace: 'db' } }, instances: [] } }
+  state.ha = { error: new Error('HA read denied') }
+  state.row = undefined
+  state.workspace = {}
+  state.navigate.mockClear()
+})
+
+describe('Configuration composition', () => {
+  it('shows declarations when exec is denied, without duplicating status, events or certificates', () => {
+    const html = render()
+    for (const text of ['shared_buffers', '256MB', 'work_mem', '8MB', 'Reported by instance', 'create pods/exec', 'Certificates could not be read: HA read denied']) expect(html).toContain(text)
+    for (const text of ['Conditions', 'Recent Events', 'Audit Findings', 'Cluster Overview', 'on this tab below']) expect(html).not.toContain(text)
+    expect(html.match(/>Certificates</g)).toHaveLength(1)
+    expect(html.indexOf('Connect')).toBeLessThan(html.indexOf('PostgreSQL parameters'))
+    expect(html.indexOf('PostgreSQL parameters')).toBeLessThan(html.indexOf('Certificates'))
+    expect(html.indexOf('Certificates')).toBeLessThan(html.indexOf('Labels and annotations'))
+    expect(html).toContain('aria-expanded="false"')
+    expect(html).toContain('kubectl --context kind-test -n db port-forward service/pg-rw')
+    expect(html).toContain('Context as named in your kubeconfig (test-config); kubectl must read the same kubeconfig file.')
+  })
+  it.each([{ isLoading: true }, { error: new Error('runtime failed') }])('keeps Cluster declarations when observations are unavailable: %j', (query) => {
+    state.params = query
+    const html = render()
+    expect(html).toContain('shared_buffers')
+    expect(html).toContain('256MB')
+    expect(html).toContain('Not read:')
+    expect(html).not.toContain('>In effect<')
+  })
+  it('names which instances answered each parameter and which restart is pending', () => {
+    state.params = { data: { state: 'partial', declared: [{ name: 'shared_buffers', value: '256MB' }, { name: 'work_mem', value: '8MB' }], permission: { exec: 'allowed' }, instances: [
+      { pod: 'pg-1', state: 'ok', settings: [{ name: 'shared_buffers', value: '256MB', source: 'configuration file', context: 'postmaster' }, { name: 'work_mem', value: '8MB', context: 'user' }] },
+      { pod: 'pg-2', state: 'ok', settings: [{ name: 'shared_buffers', value: '128MB', source: 'configuration file', context: 'postmaster', pendingRestart: true }] },
+      { pod: 'pg-3', state: 'unreachable', error: 'timeout' },
+    ] } }
+    const html = render()
+    for (const text of ['pg-1: 256MB', 'pg-2: 128MB', 'Restart pending on pg-2', 'Not reported by pg-2', 'pg-3 (timeout)', '>restart<', 'reload']) expect(html).toContain(text)
+  })
+  it('shows parameters beyond the sampled set as declared and unreported', () => {
+    state.cluster.spec.postgresql.parameters.extra = 'x'
+    state.params = { data: { state: 'ok', declared: [{ name: 'shared_buffers', value: 'old declaration' }], permission: { exec: 'allowed' }, instances: [], omitted: 1 } }
+    const html = render()
+    expect(html).toContain('extra')
+    expect(html).toContain('256MB')
+    expect(html).not.toContain('old declaration')
+    expect(html).toContain('no instance Pod to read')
+    expect(html).toContain('1 declaration was not sampled')
+    expect(html).not.toContain('>unknown<')
+  })
+  it('renders the shared certificate section once when HA answers, including the renewal owner', () => {
+    state.ha = { data: { cluster: { namespace: 'db', name: 'pg' }, rwEndpoints: { state: 'denied', pods: [] }, pods: { state: 'denied' }, instances: [], certificates: [{ secret: 'pg-server', raw: '2100-01-01', expiresAt: '2100-01-01T00:00:00Z', renewal: 'operator' }] } }
+    const html = render()
+    expect(html.match(/>Certificates</g)).toHaveLength(1)
+    expect(html).toContain('pg-server')
+    expect(html).toContain('CloudNativePG renews it')
+    expect(html).not.toContain('Certificates could not be read')
+  })
+  it('keeps cached parameter observations with a refresh-failed notice', () => {
+    state.params = { isRefetchError: true, dataUpdatedAt: Date.now() - 60_000, error: new Error('refresh timed out'), data: { state: 'ok', sampledAt: '2026-10-04T00:00:00Z', declared: [{ name: 'work_mem', value: '8MB' }], permission: { exec: 'allowed' }, instances: [{ pod: 'pg-1', state: 'ok', settings: [{ name: 'work_mem', value: '8MB', context: 'user' }] }] } }
+    const html = render()
+    expect(html).toContain('Last refresh failed: refresh timed out')
+    expect(html).toContain('showing data from')
+    expect(html).toContain('>8MB</span>')
+    expect(html).toContain('read on pg-1')
+    expect(html).not.toContain('Not read: refresh timed out')
+  })
+  it('distinguishes skipped names, no readable instances and a parameter missing from a successful read', () => {
+    state.cluster.spec.postgresql.parameters['invalid name'] = 'x'
+    state.params = { data: { state: 'ok', declared: Object.entries(state.cluster.spec.postgresql.parameters).map(([name, value]) => ({ name, value })), skipped: ['invalid name'], permission: { exec: 'allowed' }, instances: [{ pod: 'pg-1', state: 'unreachable', error: 'timeout' }] } }
+    let html = render()
+    expect(html).toContain('Not read (not a parameter name): invalid name')
+    expect(html).toContain('no instance answered')
+    expect(html).not.toContain('>unknown<')
+    state.params.data.instances = [{ pod: 'pg-1', state: 'ok', settings: [] }]
+    html = render()
+    expect(html).toContain('Not reported by pg-1')
+  })
+  it('opens Declarations scoped to this Cluster with return context', () => {
+    state.cluster.spec.managed = { roles: [{ name: 'reader' }] }
+    const host = document.createElement('div')
+    const root = createRoot(host)
+    act(() => root.render(<MemoryRouter><CNPGConfiguration namespace="db" name="pg" onNavigate={() => {}} onSelectTab={() => {}} /></MemoryRouter>))
+    act(() => [...host.querySelectorAll('button')].find((b) => b.textContent === 'Declarations →')!.click())
+    expect(state.navigate).toHaveBeenCalledWith('/cnpg/declarations?cluster=db%2Fpg', { state: { returnLabel: expect.any(String), returnCtx: 'test' } })
+    act(() => root.unmount())
+  })
+  it('labels a retained workspace row when its Pooler refresh fails', () => {
+    state.row = { poolersKnown: true, poolerObjects: [{ metadata: { namespace: 'db', name: 'pg-pool' }, spec: { cluster: { name: 'pg' } } }] }
+    state.workspace = { isRefetchError: true, dataUpdatedAt: Date.now() - 60_000, error: new Error('workspace timed out') }
+    const html = render()
+    expect(html).toContain('pg-pool')
+    expect(html).toContain('Last refresh failed: workspace timed out')
+    expect(html).toContain('showing data from')
+  })
+  it('labels newly declared parameters as unsampled rather than inferring absent Pods', () => {
+    state.params = { data: { state: 'ok', declared: [], instances: [], permission: { exec: 'allowed' } } }
+    const html = render()
+    expect(html).toContain('2 declared · no parameters sampled')
+    expect(html).not.toContain('no instance Pod')
+    expect(html).toContain('no parameters sampled')
+    expect(html).not.toContain('>unknown<')
+  })
+})
+
+describe('Declared settings', () => {
+  const settings = () => renderToStaticMarkup(<CNPGDeclaredSettings cluster={state.cluster} onSelectTab={() => {}} onOpenDeclarations={() => {}} />)
+  it('omits empty cards and does not invent defaults from the restore preflight', () => {
+    state.cluster.spec = {}
+    state.cluster.status.image = 'running:17'
+    expect(settings()).toBe('')
+    state.cluster.spec = { instances: 2, enableSuperuserAccess: false }
+    const html = settings()
+    expect(html).toContain('Instances and image')
+    expect(html).toContain('Disabled')
+    for (const title of ['Placement and resources', 'Storage', 'Bootstrap and source', 'Backups configuration', 'Roles, services and monitoring']) expect(html).not.toContain(title)
+  })
+  it('omits empty storage stanzas and names PVC template size and class paths precisely', () => {
+    state.cluster.spec = { storage: {}, walStorage: {}, tablespaces: [], resources: { requests: {}, limits: {} }, affinity: { tolerations: [], nodeSelector: {} }, replica: {}, monitoring: {}, managed: { roles: [], services: { additional: [], disabledDefaultServices: [] } }, plugins: [] }
+    expect(settings()).toBe('')
+    state.cluster.spec.storage = { pvcTemplate: { resources: { requests: { storage: '30Gi' } }, storageClassName: 'template-class' } }
+    const html = settings()
+    for (const text of ['30Gi', 'template-class', 'spec.storage.pvcTemplate.resources.requests.storage', 'spec.storage.pvcTemplate.storageClassName']) expect(html).toContain(text)
+    expect(html).not.toContain('size from pvcTemplate')
+  })
+  it('shows each populated card with spec paths and links to operational evidence', () => {
+    state.cluster.spec = {
+      instances: 3, imageName: 'desired:17', primaryUpdateStrategy: 'supervised', primaryUpdateMethod: 'switchover', minSyncReplicas: 1, maxSyncReplicas: 2, postgresql: { synchronous: { method: 'any', number: 1, dataDurability: 'required' } },
+      affinity: { enablePodAntiAffinity: true, topologyKey: 'zone', nodeSelector: { disk: 'ssd' } },
+      topologySpreadConstraints: [{ topologyKey: 'zone', maxSkew: 1, whenUnsatisfiable: 'DoNotSchedule' }], resources: { requests: { cpu: '500m' }, limits: { memory: '1Gi' } }, priorityClassName: 'database',
+      storage: { size: '20Gi', storageClass: 'fast' }, walStorage: { size: '5Gi', storageClass: 'wal' }, tablespaces: [{ name: 'analytics', storage: { size: '10Gi', storageClass: 'slow' } }],
+      bootstrap: { initdb: { database: 'appdb', owner: 'owner' } }, replica: { enabled: false, source: 'origin' }, externalClusters: [{ name: 'origin', connectionParameters: { password: 'DO-NOT-DISPLAY' } }],
+      backup: { barmanObjectStore: { destinationPath: 's3://bucket' }, retentionPolicy: '7d', volumeSnapshot: { className: 'csi' }, target: 'primary' },
+      managed: { roles: [{ name: 'reader' }], services: { disabledDefaultServices: ['ro'], additional: [{ serviceTemplate: { metadata: { name: 'custom' } } }] } },
+      monitoring: { enablePodMonitor: false, customQueriesConfigMap: [{ name: 'queries', key: 'sql' }], customQueriesSecret: [{ name: 'secret-queries', key: 'sql' }] },
+      plugins: [{ name: 'barman-cloud.cloudnative-pg.io', isWALArchiver: true, parameters: { barmanObjectName: 'archive', serverName: 'origin-server' } }],
+    }
+    state.cluster.status.image = 'running:16'
+    const html = settings()
+    for (const title of ['Instances and image', 'Placement and resources', 'Storage', 'Bootstrap and source', 'Backups configuration', 'Roles, services and monitoring']) expect(html).toContain(title)
+    for (const value of ['desired:17', 'running:16', 'status.image', 'spec.instances', 'spec.primaryUpdateMethod', 'disk=ssd', 'max skew 1', '500m', '20Gi', '5Gi', 'analytics', 'appdb', 'owner', 'origin', 's3://bucket', 'volumeSnapshot', '7d', 'archive', 'custom', 'queries', 'secret-queries', 'Declarations', 'Usage → Storage tab', 'Runs and recovery evidence → Backups tab']) expect(html).toContain(value)
+    expect(html).not.toContain('DO-NOT-DISPLAY')
+    for (const path of ['spec.minSyncReplicas', 'spec.maxSyncReplicas', 'spec.postgresql.synchronous.method', 'spec.backup.target', '.isWALArchiver', '.parameters.serverName']) expect(html).toContain(path)
+  })
+  it('links image catalogs and preserves their declared major alongside the resolved image', () => {
+    state.cluster.spec = { imageCatalogRef: { kind: 'ClusterImageCatalog', name: 'catalog', major: 17 } }
+    state.cluster.status.image = 'resolved:17'
+    const html = settings()
+    expect(html).toContain('catalog')
+    expect(html).toContain('major 17')
+    expect(html).toContain('resolved:17')
+    expect(html).toContain('spec.imageCatalogRef')
+  })
+})
+
+it.each(['unsupervised', 'supervised'])('explains %s and anti-affinity while keeping raw fields', (strategy) => {
+  state.cluster.spec = { primaryUpdateStrategy: strategy, primaryUpdateMethod: 'restart', affinity: { podAntiAffinityType: 'preferred' } }
+  const html = renderToStaticMarkup(<CNPGDeclaredSettings cluster={state.cluster} onSelectTab={() => {}} onOpenDeclarations={() => {}} />)
+  expect(html).toContain(strategy === 'unsupervised' ? 'Updates the primary automatically' : 'Waits for a manual switchover')
+  expect(html).toContain(`${strategy} · spec.primaryUpdateStrategy`)
+  expect(html).toContain('Pod anti-affinity')
+  expect(html).toContain('Spreads instances across nodes when possible')
+  expect(html).toContain('preferred · spec.affinity.podAntiAffinityType')
+  expect(html).toContain('Updates the primary in place')
+})
+
+it('does not promise spreading when anti-affinity is disabled and respects its topology', () => {
+  state.cluster.spec = { affinity: { podAntiAffinityType: 'preferred', enablePodAntiAffinity: false } }
+  const render = () => renderToStaticMarkup(<CNPGDeclaredSettings cluster={state.cluster} onSelectTab={() => {}} onOpenDeclarations={() => {}} />)
+  expect(render()).toContain('Not applied: pod anti-affinity is disabled')
+  expect(render()).not.toContain('Spreads instances across')
+  state.cluster.spec.affinity = { podAntiAffinityType: 'preferred', topologyKey: 'topology.kubernetes.io/zone' }
+  expect(render()).toContain('Spreads instances across topology domains when possible')
+  expect(render()).toContain('topology.kubernetes.io/zone')
+})
+
+it('explains required anti-affinity for node and zone topology', () => {
+  state.cluster.spec = { affinity: { podAntiAffinityType: 'required' } }
+  const render = () => renderToStaticMarkup(<CNPGDeclaredSettings cluster={state.cluster} onSelectTab={() => {}} onOpenDeclarations={() => {}} />)
+  expect(render()).toContain('Requires instances on separate nodes')
+  state.cluster.spec.affinity.topologyKey = 'topology.kubernetes.io/zone'
+  expect(render()).toContain('Requires instances on separate topology domains')
+  expect(render()).toContain('required · spec.affinity.podAntiAffinityType')
+})
+
+it('shows one shared denial while retaining every declaration with empty observation cells', () => {
+  const host = document.createElement('div'); host.innerHTML = render()
+  const table = [...host.querySelectorAll('table')].find((t) => t.textContent?.includes('Reported by instance'))!
+  expect(table.querySelectorAll('tbody tr')).toHaveLength(2)
+  for (const r of table.querySelectorAll('tbody tr')) {
+    expect(r.children[2].textContent).toBe('')
+    expect(r.children[3].textContent).toBe('')
+  }
+  expect(host.textContent!.match(/Reading instance values needs/g)).toHaveLength(1)
+})
+it('labels the operator target image without claiming a running image', () => {
+  state.cluster.spec = { imageName: 'declared:17' }; state.cluster.status.image = 'target:17'
+  const html = render()
+  expect(html).toContain('Target image (status.image): target:17')
+  expect(html).not.toContain('Running target:17')
+})

package/src/components/cnpg/CNPGConfiguration.tsx

@@ -0,0 +1,190 @@
+import { useCNPGKubectlContext } from './useCNPGKubectlContext'
+import type { ReactNode } from 'react'
+import {
+  CNPG_GROUP, CNPG_BARMAN_OBJECTSTORE_GROUP, CNPGClusterCertificates, CNPGConnectSection,
+  FactGrid, FactRow, FoldSection, KeyValueBadgeList, PaneLoader, RefLink, SectionHeading,
+  cnpgConnectInfo, getCNPGClusterBackupConfig, getCNPGClusterPostgresParams,
+  getCNPGClusterReplicaSource, refToSelectedResource, type NavigateToRef,
+} from '@skyhook-io/k8s-ui'
+import { useResource } from '../../api/client'
+import type { SelectedResource } from '../../types'
+import { buildWorkloadPath } from '../../utils/navigation'
+import { RefreshFailedNotice } from '../workspace/layout'
+import { useCNPGClusterAssessment } from './useCNPGClusterAssessment'
+import { useCNPGNavigate } from './useCNPGNavigate'
+import { CNPGParametersInEffect } from './CNPGParametersInEffect'
+import { preflightFacts } from './recovery/restoreModel'
+import { cnpgScreenPath } from './routes'
+import { useConnection } from '../../context/ConnectionContext'
+import { currentPageLabel } from '../../utils/page-links'
+
+const cardClass = 'rounded-xl border border-theme-border bg-theme-surface px-4 py-3 shadow-theme-sm'
+
+export function CNPGConfiguration({ namespace, name, onNavigate, onSelectTab }: {
+  namespace: string; name: string; onNavigate: (r: SelectedResource) => void; onSelectTab: (tab: string) => void
+}) {
+  const kubeconfigContext = useCNPGKubectlContext()
+  const object = useResource<any>('clusters', namespace, name, CNPG_GROUP)
+  const { query, row, ha } = useCNPGClusterAssessment(namespace, name)
+  const navigate = useCNPGNavigate()
+  const { connection } = useConnection()
+  const go: NavigateToRef = (ref) => onNavigate(refToSelectedResource(ref))
+  const cluster = object.data
+  if (!cluster) return object.isLoading ? <PaneLoader label="Loading Configuration…" className="h-40" /> : (
+    <p className="p-4 text-sm text-theme-text-tertiary">{object.error instanceof Error ? object.error.message : 'The Cluster could not be read.'}</p>
+  )
+  const info = cnpgConnectInfo(cluster, row?.poolerObjects)
+  const services = info.endpoints.filter((e) => e.role !== 'pooler').map((e) => e.name).join(', ')
+  const poolers = row?.poolersKnown ? info.endpoints.filter((e) => e.role === 'pooler').map((e) => e.name).join(', ') || 'none' : 'not read'
+  return (
+    <div className="space-y-4 p-4">
+      <RefreshFailedNotice queries={[object, ha, query]} />
+      <section className={cardClass}>
+        <FoldSection title="Connect" summary={`Services ${services} · poolers ${poolers} · database ${info.database.value ?? 'unknown'}`} attention={false}>
+          <CNPGConnectSection ha={ha.data} haUnavailableReason={ha.isLoading ? 'Reading availability…' : ha.error instanceof Error ? `Availability could not be read: ${ha.error.message}` : undefined} kubeconfigContext={kubeconfigContext?.name} kubeconfigSource={kubeconfigContext?.source} cluster={cluster} poolers={row?.poolerObjects} poolersKnown={row?.poolersKnown ?? false} showHeading={false} onNavigate={go}
+            onOpenReachability={(svc) => navigate(buildWorkloadPath({ kind: 'services', group: '', namespace: svc.namespace, name: svc.name, tab: 'reachability' }))} />
+        </FoldSection>
+      </section>
+      <section className={cardClass}>
+        <CNPGParametersInEffect namespace={namespace} name={name} declared={getCNPGClusterPostgresParams(cluster)} scope={{ declaredInstances: cluster.spec?.instances, expectedInstances: [...new Set<string>([...(cluster.status?.instanceNames ?? []), ...(ha.data?.expectedInstances ?? [])])] }} />
+      </section>
+      <CNPGDeclaredSettings cluster={cluster} onNavigate={go} onSelectTab={onSelectTab} onOpenDeclarations={() => navigate(`${cnpgScreenPath('declarations')}?${new URLSearchParams({ cluster: `${namespace}/${name}` })}`, { state: { returnLabel: currentPageLabel(), returnCtx: connection.context } })} />
+      <section className={cardClass}>
+        {ha.data ? <CNPGClusterCertificates ha={ha.data} onNavigate={go} /> : <>
+          <SectionHeading>Certificates</SectionHeading>
+          <p className="text-sm text-theme-text-tertiary">{ha.isLoading ? 'Reading certificates…' : ha.error instanceof Error ? `Certificates could not be read: ${ha.error.message}` : 'Certificates could not be read.'}</p>
+        </>}
+      </section>
+      <section className={cardClass}>
+        <FoldSection title="Labels and annotations" summary={`${Object.keys(cluster.metadata?.labels ?? {}).length} labels · ${Object.keys(cluster.metadata?.annotations ?? {}).length} annotations`} attention={false}>
+          <SectionHeading>Labels</SectionHeading>
+          {Object.keys(cluster.metadata?.labels ?? {}).length > 0 ? <KeyValueBadgeList items={cluster.metadata.labels} /> : <p className="text-sm text-theme-text-tertiary">No labels</p>}
+          <SectionHeading>Annotations</SectionHeading>
+          <FactGrid>{Object.entries(cluster.metadata?.annotations ?? {}).map(([key, value]) => <FactRow key={key} label={key}><span className="break-all">{String(value)}</span></FactRow>)}</FactGrid>
+          {Object.keys(cluster.metadata?.annotations ?? {}).length === 0 && <p className="text-sm text-theme-text-tertiary">No annotations</p>}
+        </FoldSection>
+      </section>
+    </div>
+  )
+}
+
+type DeclaredFact = { label: string; path: string; value: ReactNode; raw?: string }
+
+export function CNPGDeclaredSettings({ cluster, onNavigate, onSelectTab, onOpenDeclarations }: {
+  cluster: any; onNavigate?: NavigateToRef; onSelectTab: (tab: string) => void; onOpenDeclarations: () => void
+}) {
+  const spec = cluster.spec ?? {}
+  const ns = cluster.metadata?.namespace ?? ''
+  const copied = preflightFacts(cluster).filter((f) => f.copied)
+  const basic: DeclaredFact[] = copied.filter((f) => f.path === 'spec.instances' || (f.label === 'Image' && (spec.imageName || spec.imageCatalogRef)))
+  if (spec.imageCatalogRef) {
+    const ref = spec.imageCatalogRef
+    const fact = basic.find((f) => f.label === 'Image')!
+    fact.value = <><RefLink refTo={{ kind: ref.kind ?? 'ImageCatalog', group: CNPG_GROUP, namespace: ref.kind === 'ClusterImageCatalog' ? '' : ns, name: ref.name }} onNavigate={onNavigate} mono /> · major {ref.major}</>
+  }
+  const add = (facts: DeclaredFact[], label: string, path: string, value: unknown) => {
+    if (value !== undefined && value !== null && value !== '' && !(Array.isArray(value) && value.length === 0)) facts.push({ label, path, value: typeof value === 'boolean' ? (value ? 'Enabled' : 'Disabled') : String(value) })
+  }
+  if (cluster.status?.image && (spec.imageCatalogRef || (spec.imageName && cluster.status.image !== spec.imageName))) {
+    const image = basic.find((f) => f.label === 'Image')
+    if (image) image.value = <>{image.value}<div className="text-xs text-theme-text-secondary">Target image (status.image): {cluster.status.image}</div></>
+  }
+  if (spec.primaryUpdateStrategy) basic.push({ label: 'Primary update strategy', path: 'spec.primaryUpdateStrategy', raw: spec.primaryUpdateStrategy, value: spec.primaryUpdateStrategy === 'unsupervised' ? 'Updates the primary automatically (switchover or restart per update method)' : spec.primaryUpdateStrategy === 'supervised' ? 'Waits for a manual switchover' : spec.primaryUpdateStrategy })
+  if (spec.primaryUpdateMethod) basic.push({ label: 'Primary update method', path: 'spec.primaryUpdateMethod', raw: spec.primaryUpdateMethod, value: spec.primaryUpdateMethod === 'restart' ? 'Updates the primary in place, interrupting its connections' : spec.primaryUpdateMethod === 'switchover' ? 'Promotes an updated standby before updating the old primary' : spec.primaryUpdateMethod })
+  add(basic, 'Superuser access', 'spec.enableSuperuserAccess', spec.enableSuperuserAccess)
+  add(basic, 'Minimum sync replicas', 'spec.minSyncReplicas', spec.minSyncReplicas)
+  add(basic, 'Maximum sync replicas', 'spec.maxSyncReplicas', spec.maxSyncReplicas)
+  if (spec.postgresql?.synchronous) {
+    for (const key of ['method', 'number', 'dataDurability', 'maxStandbyNamesFromCluster']) add(basic, `Synchronous ${key}`, `spec.postgresql.synchronous.${key}`, spec.postgresql.synchronous[key])
+  }
+
+  const placement: DeclaredFact[] = Object.keys(spec.resources?.requests ?? {}).length > 0 || Object.keys(spec.resources?.limits ?? {}).length > 0 ? copied.filter((f) => f.path === 'spec.resources') : []
+  const affinity = spec.affinity
+  if (affinity && Object.keys(affinity).length > 0) {
+    const bits: string[] = []
+    if (affinity.enablePodAntiAffinity !== undefined) bits.push(`pod anti-affinity ${affinity.enablePodAntiAffinity ? 'enabled' : 'disabled'}`)
+    if (affinity.podAntiAffinityType) placement.push({ label: 'Pod anti-affinity', path: 'spec.affinity.podAntiAffinityType', raw: affinity.podAntiAffinityType, value: affinity.enablePodAntiAffinity === false ? `Not applied: pod anti-affinity is disabled` : affinity.podAntiAffinityType === 'preferred' ? `Spreads instances across ${affinity.topologyKey && affinity.topologyKey !== 'kubernetes.io/hostname' ? 'topology domains' : 'nodes'} when possible` : affinity.podAntiAffinityType === 'required' ? `Requires instances on separate ${affinity.topologyKey && affinity.topologyKey !== 'kubernetes.io/hostname' ? 'topology domains' : 'nodes'}` : affinity.podAntiAffinityType })
+    if (affinity.topologyKey) bits.push(`topology ${affinity.topologyKey}`)
+    if (Object.keys(affinity.nodeSelector ?? {}).length > 0) bits.push(`nodes ${Object.entries(affinity.nodeSelector).map(([k, v]) => `${k}=${v}`).join(', ')}`)
+    for (const key of ['nodeAffinity', 'podAffinity', 'podAntiAffinity', 'additionalPodAffinity', 'additionalPodAntiAffinity', 'tolerations']) {
+      if (affinity[key] && Object.keys(affinity[key]).length > 0) bits.push(`${key} declared`)
+    }
+    add(placement, 'Affinity', 'spec.affinity', bits.join(' · '))
+  }
+  add(placement, 'Topology spread', 'spec.topologySpreadConstraints', spec.topologySpreadConstraints?.map((c: any) => `${c.topologyKey} · max skew ${c.maxSkew} · ${c.whenUnsatisfiable}`).join('; '))
+  add(placement, 'Priority class', 'spec.priorityClassName', spec.priorityClassName)
+
+  const storage: DeclaredFact[] = []
+  for (const volume of [
+    { label: 'Data', path: 'spec.storage', config: spec.storage },
+    { label: 'WAL', path: 'spec.walStorage', config: spec.walStorage },
+    ...(spec.tablespaces ?? []).map((t: any) => ({ label: `Tablespace ${t.name}`, path: `spec.tablespaces[name=${t.name}].storage`, config: t.storage })),
+  ]) {
+    if (!volume.config) continue
+    if (volume.config.size !== undefined) add(storage, `${volume.label} size`, `${volume.path}.size`, volume.config.size)
+    else add(storage, `${volume.label} size`, `${volume.path}.pvcTemplate.resources.requests.storage`, volume.config.pvcTemplate?.resources?.requests?.storage)
+    if (volume.config.storageClass !== undefined) add(storage, `${volume.label} storage class`, `${volume.path}.storageClass`, volume.config.storageClass)
+    else add(storage, `${volume.label} storage class`, `${volume.path}.pvcTemplate.storageClassName`, volume.config.pvcTemplate?.storageClassName)
+  }
+  const bootstrap: DeclaredFact[] = []
+  add(bootstrap, 'Application database', 'spec.bootstrap.initdb.database', spec.bootstrap?.initdb?.database)
+  add(bootstrap, 'Owner', 'spec.bootstrap.initdb.owner', spec.bootstrap?.initdb?.owner)
+  if (spec.bootstrap?.initdb && bootstrap.length === 0) add(bootstrap, 'Bootstrap', 'spec.bootstrap.initdb', 'initdb declared')
+  add(bootstrap, 'Recovery source', 'spec.bootstrap.recovery.source', spec.bootstrap?.recovery?.source)
+  if (spec.bootstrap?.recovery?.backup?.name) bootstrap.push({ label: 'Recovery backup', path: 'spec.bootstrap.recovery.backup.name', value: <RefLink refTo={{ kind: 'Backup', group: CNPG_GROUP, namespace: ns, name: spec.bootstrap.recovery.backup.name }} onNavigate={onNavigate} mono /> })
+  if (spec.bootstrap?.recovery && !spec.bootstrap.recovery.source && !spec.bootstrap.recovery.backup?.name) add(bootstrap, 'Bootstrap', 'spec.bootstrap.recovery', 'recovery declared')
+  add(bootstrap, 'Base backup source', 'spec.bootstrap.pg_basebackup.source', spec.bootstrap?.pg_basebackup?.source)
+  if (spec.replica) {
+    if (spec.replica.source || spec.replica.primary) add(bootstrap, 'Replica source', `spec.replica.${spec.replica.source ? 'source' : 'primary'}`, getCNPGClusterReplicaSource(cluster))
+    add(bootstrap, 'Replica enabled', 'spec.replica.enabled', spec.replica.enabled)
+  }
+  add(bootstrap, 'External clusters', 'spec.externalClusters', spec.externalClusters?.map((c: any) => c.name).join(', '))
+
+  const backups: DeclaredFact[] = []
+  const backup = getCNPGClusterBackupConfig(cluster)
+  if (spec.backup?.barmanObjectStore) {
+    add(backups, 'Method', 'spec.backup.barmanObjectStore', 'barmanObjectStore')
+    add(backups, 'Destination', 'spec.backup.barmanObjectStore.destinationPath', backup.destinationPath)
+  }
+  if (backup.plugin) {
+    add(backups, 'Method', 'spec.plugins', `plugin ${backup.plugin.name}`)
+    const pluginPath = `spec.plugins[name=${backup.plugin.name}]`
+    const declaredPlugin = spec.plugins.find((p: any) => p.name === backup.plugin!.name)
+    add(backups, 'WAL archiver', `${pluginPath}.isWALArchiver`, declaredPlugin.isWALArchiver)
+    add(backups, 'Archive server', `${pluginPath}.parameters.serverName`, declaredPlugin.parameters?.serverName)
+    if (backup.plugin.barmanObjectName) backups.push({ label: 'Destination', path: `spec.plugins[name=${backup.plugin.name}].parameters.barmanObjectName`, value: <RefLink refTo={{ kind: 'ObjectStore', group: CNPG_BARMAN_OBJECTSTORE_GROUP, namespace: ns, name: backup.plugin.barmanObjectName }} onNavigate={onNavigate} mono /> })
+  }
+  if (spec.backup?.volumeSnapshot) {
+    add(backups, 'Method', 'spec.backup.volumeSnapshot', 'volumeSnapshot')
+    add(backups, 'Snapshot class', 'spec.backup.volumeSnapshot.className', spec.backup.volumeSnapshot.className)
+    add(backups, 'WAL snapshot class', 'spec.backup.volumeSnapshot.walClassName', spec.backup.volumeSnapshot.walClassName)
+    add(backups, 'Snapshot ownership', 'spec.backup.volumeSnapshot.snapshotOwnerReference', spec.backup.volumeSnapshot.snapshotOwnerReference)
+  }
+  add(backups, 'Retention', 'spec.backup.retentionPolicy', backup.retentionPolicy)
+  add(backups, 'Backup target', 'spec.backup.target', spec.backup?.target)
+
+  const other: DeclaredFact[] = []
+  if (spec.managed?.roles?.length > 0) other.push({ label: 'Managed roles', path: 'spec.managed.roles', value: <>{spec.managed.roles.length} · <button type="button" onClick={onOpenDeclarations} className="text-xs text-accent-text hover:underline">Declarations →</button></> })
+  add(other, 'Additional services', 'spec.managed.services.additional', spec.managed?.services?.additional?.map((s: any) => s.serviceTemplate?.metadata?.name).join(', '))
+  add(other, 'Disabled services', 'spec.managed.services.disabledDefaultServices', spec.managed?.services?.disabledDefaultServices?.join(', '))
+  add(other, 'PodMonitor', 'spec.monitoring.enablePodMonitor', spec.monitoring?.enablePodMonitor)
+  for (const [field, kind] of [['customQueriesConfigMap', 'ConfigMap'], ['customQueriesSecret', 'Secret']] as const) {
+    if (spec.monitoring?.[field]?.length > 0) other.push({ label: `Query ${kind}s`, path: `spec.monitoring.${field}`, value: <div className="flex flex-wrap gap-x-3">{spec.monitoring[field].map((ref: { name: string; key: string }) => <span key={`${ref.name}/${ref.key}`}><RefLink refTo={{ kind, group: '', namespace: ns, name: ref.name }} onNavigate={onNavigate} mono /> · key {ref.key}</span>)}</div> })
+  }
+  add(other, 'Plugins', 'spec.plugins', spec.plugins?.map((p: any) => `${p.name}${p.enabled === false ? ' (disabled)' : ''}`).join(', '))
+
+  return <>{[
+    { title: 'Instances and image', facts: basic },
+    { title: 'Placement and resources', facts: placement },
+    { title: 'Storage', facts: storage, link: 'Usage → Storage tab', tab: 'storage' },
+    { title: 'Bootstrap and source', facts: bootstrap },
+    { title: 'Backups configuration', facts: backups, link: 'Runs and recovery evidence → Backups tab', tab: 'backups' },
+    { title: 'Roles, services and monitoring', facts: other },
+  ].filter((c) => c.facts.length > 0).map((c) => <section key={c.title} className={cardClass}>
+    <SectionHeading>{c.title}</SectionHeading>
+    <FactGrid>{c.facts.map((f) => <FactRow key={`${f.label}/${f.path}`} label={f.label}>
+      {f.value}<div className="mt-0.5 text-[11px] text-theme-text-tertiary">{f.raw ? `${f.raw} · ${f.path}` : f.path}</div>
+    </FactRow>)}</FactGrid>
+    {c.tab && <button type="button" onClick={() => onSelectTab(c.tab!)} className="mt-2 text-xs text-accent-text hover:underline">{c.link}</button>}
+  </section>)}</>
+}

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

@@ -0,0 +1,113 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, beforeEach, expect, it, vi } from 'vitest'
+import yaml from 'yaml'
+import { CNPGCreateClusterDialog } from './CNPGCreateClusterDialog'
+
+const state = vi.hoisted(() => ({ context: 'kind-demo', namespaces: { data: [{ name: 'db' }, { name: 'prod' }], isError: false }, editor: {} as any }))
+vi.mock('../../api/client', () => ({ useNamespaces: () => state.namespaces, useResources: () => ({ data: [] }) }))
+vi.mock('../../context/ConnectionContext', () => ({ useConnection: () => ({ connection: { context: state.context } }) }))
+vi.mock('../shared/CreateResourceDialog', () => ({ CreateResourceDialog: (props: any) => { state.editor = props; return <pre>{props.initialYaml}</pre> } }))
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+let root: ReturnType<typeof createRoot>, host: HTMLDivElement
+const button = (text: string) => [...document.querySelectorAll('button')].find((item) => item.textContent?.trim() === text)!
+const change = (id: string, value: string) => act(() => {
+  const input = document.querySelector<HTMLInputElement>(`#cnpg-create-${id}`)!
+  Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(input, value)
+  input.dispatchEvent(new Event('input', { bubbles: true }))
+})
+const fillTarget = () => { change('name', 'orders-db'); change('size', '20Gi') }
+
+
+beforeEach(() => {
+  state.context = 'kind-demo'
+  state.editor = {}
+  state.namespaces = { data: [{ name: 'db' }, { name: 'prod' }], isError: false }
+  host = document.createElement('div')
+  document.body.appendChild(host)
+  root = createRoot(host)
+})
+
+it('projects YAML fields back into setup and preserves advanced edits when resizing the target', async () => {
+  await act(async () => root.render(<CNPGCreateClusterDialog namespaces={['db']} onClose={vi.fn()} onCreated={vi.fn()} />))
+  fillTarget()
+  act(() => button('Review manifest').click())
+  const doc = yaml.parseDocument(state.editor.initialYaml)
+  doc.setIn(['metadata', 'name'], 'custom-name')
+  doc.setIn(['spec', 'resources'], { requests: { memory: '1Gi' } })
+  act(() => state.editor.onBack(`${doc.toString()}\n# keep memory request\n`))
+  expect(document.querySelector<HTMLInputElement>('#cnpg-create-name')!.value).toBe('custom-name')
+  change('size', '40Gi')
+  act(() => button('Review manifest').click())
+  expect(yaml.parse(state.editor.initialYaml)).toMatchObject({ metadata: { name: 'custom-name' }, spec: { storage: { size: '40Gi' }, resources: { requests: { memory: '1Gi' } } } })
+  expect(state.editor.initialYaml).toContain('keep memory request')
+})
+
+it('preserves unsupported drafts until replacement is explicitly chosen', async () => {
+  await act(async () => root.render(<CNPGCreateClusterDialog namespaces={['db']} onClose={vi.fn()} onCreated={vi.fn()} />))
+  fillTarget()
+  act(() => button('Review manifest').click())
+  act(() => state.editor.onBack(''))
+  act(() => button('Continue editing current YAML').click())
+  expect(state.editor.initialYaml).toBe('')
+  const incomplete = 'apiVersion: postgresql.cnpg.io/v1\nkind: Cluster\nmetadata:\n  name: orders-db\n  namespace: db\nspec: {}\n'
+  act(() => state.editor.onBack(incomplete))
+  expect(button('Review manifest').disabled).toBe(true)
+  act(() => button('Continue editing current YAML').click())
+  expect(state.editor.initialYaml).toBe(incomplete)
+  act(() => state.editor.onBack('kind: Secret\n'))
+  fillTarget()
+  act(() => button('Review manifest').click())
+  expect(document.body.textContent).toContain('Replace the current manifest?')
+  act(() => button('Replace manifest').click())
+  expect(yaml.parse(state.editor.initialYaml).kind).toBe('Cluster')
+})
+afterEach(() => { act(() => root.unmount()); host.remove() })
+
+it.each([{ namespaces: [] }, { namespaces: ['db', 'prod'] }])('requires a target namespace for scope $namespaces', async ({ namespaces }) => {
+  await act(async () => root.render(<CNPGCreateClusterDialog namespaces={namespaces} onClose={vi.fn()} onCreated={vi.fn()} />))
+  expect(document.querySelector<HTMLInputElement>('#cnpg-create-namespace')!.value).toBe('')
+  expect(button('Review manifest').disabled).toBe(true)
+})
+
+it('seeds the selected namespace and opens strict create for the exact CNPG identity', async () => {
+  const onCreated = vi.fn()
+  await act(async () => root.render(<CNPGCreateClusterDialog namespaces={['prod']} onClose={vi.fn()} onCreated={onCreated} />))
+  expect(document.querySelector<HTMLInputElement>('#cnpg-create-namespace')!.value).toBe('prod')
+  fillTarget()
+  act(() => button('Review manifest').click())
+  expect(yaml.parse(state.editor.initialYaml)).toMatchObject({ apiVersion: 'postgresql.cnpg.io/v1', kind: 'Cluster', metadata: { namespace: 'prod' } })
+  expect(state.editor.initialMode).toBe('create')
+  expect(state.editor.lockMode).toBe(true)
+  state.editor.onCreated({ apiVersion: 'cluster.x-k8s.io/v1beta1', kind: 'Cluster', namespace: 'prod', name: 'capi' })
+  expect(onCreated).not.toHaveBeenCalled()
+  state.editor.onCreated({ apiVersion: 'postgresql.cnpg.io/v1', kind: 'Cluster', namespace: 'prod', name: 'pg' })
+  expect(onCreated).toHaveBeenCalledWith({ kind: 'clusters', group: 'postgresql.cnpg.io', namespace: 'prod', name: 'pg' })
+})
+
+it('allows an explicit namespace when suggestions are unavailable', async () => {
+  state.namespaces = { data: [], isError: true }
+  await act(async () => root.render(<CNPGCreateClusterDialog namespaces={[]} onClose={vi.fn()} onCreated={vi.fn()} />))
+  expect(document.body.textContent).toContain('Namespace suggestions could not be read')
+  act(() => {
+    const input = document.querySelector('#cnpg-create-namespace')!
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(input, 'restricted')
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+  fillTarget()
+  act(() => button('Review manifest').click())
+  expect(yaml.parse(state.editor.initialYaml).metadata.namespace).toBe('restricted')
+})
+
+it('does not carry a prepared manifest into a different context', async () => {
+  const render = () => root.render(<CNPGCreateClusterDialog namespaces={['db']} onClose={vi.fn()} onCreated={vi.fn()} />)
+  await act(async () => render())
+  fillTarget()
+  act(() => button('Review manifest').click())
+  state.context = 'kind-other'
+  await act(async () => render())
+  expect(host.querySelector('pre')).toBeNull()
+  expect(document.body.textContent).toContain('The Kubernetes context changed')
+  expect(button('Review manifest').disabled).toBe(true)
+})

package/src/components/cnpg/CNPGCreateClusterDialog.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react'
+import yaml from 'yaml'
+import { ActionConfirmDialog, ConfirmDialog, isApiGroup } from '@skyhook-io/k8s-ui'
+import { useNamespaces, useResources } from '../../api/client'
+import { useConnection } from '../../context/ConnectionContext'
+import type { SelectedResource } from '../../types'
+import { getSkeletonYaml } from '../../utils/skeleton-yaml'
+import { CreateResourceDialog } from '../shared/CreateResourceDialog'
+import { CNPGTargetFields } from './creation/CNPGTargetFields'
+import { cnpgTargetDraft, cnpgTargetFromManifest, cnpgTargetIssue, updateCNPGTargetYaml, withCNPGTarget, type CNPGTarget } from './creation/targetModel'
+import { clusterResource } from './shared'
+
+export function CNPGCreateClusterDialog({ namespaces, onClose, onCreated }: {
+  namespaces: string[]
+  onClose: () => void
+  onCreated: (resource: SelectedResource) => void
+}) {
+  const { connection } = useConnection()
+  const [context] = useState(connection.context)
+  const [base] = useState(() => yaml.parse(getSkeletonYaml('Cluster', 'postgresql.cnpg.io')))
+  const [target, setTarget] = useState<CNPGTarget>(() => ({ ...cnpgTargetFromManifest(base), name: '', namespace: namespaces.length === 1 ? namespaces[0] : '', size: '' }))
+  const [manifest, setManifest] = useState<string | null>(null)
+  const [editing, setEditing] = useState(false)
+  const [replace, setReplace] = useState(false)
+  const availableNamespaces = useNamespaces()
+  const storageClasses = useResources<any>('storageclasses', undefined, 'storage.k8s.io')
+  const contextChanged = context !== connection.context
+  const generated = () => yaml.stringify(withCNPGTarget(base, target))
+
+  if (contextChanged) return <ActionConfirmDialog open onClose={onClose} onConfirm={() => {}} title="Create Cluster" subject={{ kind: 'Cluster', namespace: target.namespace, name: target.name || 'new cluster' }} context={context || undefined} effect="The Kubernetes context changed." confirmLabel="Review manifest" disabledReason="Close this dialog and start again in the current context." />
+  if (replace) return <ConfirmDialog open onClose={() => setReplace(false)} onConfirm={() => { setManifest(generated()); setReplace(false); setEditing(true) }} variant="warning" showWarning={false} title="Replace the current manifest?" message="This YAML cannot be represented by the Cluster setup. Rebuilding uses your setup choices and discards the current YAML." confirmLabel="Replace manifest" cancelLabel="Keep editing setup" />
+  if (editing && manifest !== null) return <CreateResourceDialog
+    open
+    onClose={onClose}
+    onBack={(draft) => {
+      setManifest(draft)
+      const parsed = cnpgTargetDraft(draft)
+      if (parsed) setTarget(cnpgTargetFromManifest(parsed))
+      setEditing(false)
+    }}
+    backLabel="Back to cluster setup"
+    initialYaml={manifest}
+    initialMode="create"
+    lockMode
+    title="Create Cluster"
+    onCreated={(created) => {
+      if (created.kind === 'Cluster' && isApiGroup(created.apiVersion, 'postgresql.cnpg.io')) onCreated(clusterResource(created.namespace, created.name))
+    }}
+  />
+
+  return <ActionConfirmDialog
+    open
+    onClose={onClose}
+    onConfirm={() => {
+      if (manifest !== null) {
+        const updated = updateCNPGTargetYaml(manifest, target)
+        if (updated === null) { setReplace(true); return }
+        setManifest(updated)
+      } else setManifest(generated())
+      setEditing(true)
+    }}
+    title="Create Cluster"
+    subject={{ kind: 'Cluster', namespace: target.namespace.trim(), name: target.name.trim() || 'new cluster' }}
+    context={context || undefined}
+    effect="Create a PostgreSQL Cluster with the placement and resources below, then review the exact manifest."
+    confirmLabel="Review manifest"
+    incompleteReason={cnpgTargetIssue(target)}
+    notes={['An existing Cluster will not be updated. This does not change the namespace filter.', 'The new Cluster starts without backups or WAL archiving. Its Backups tab guides the next step.']}
+  >
+    {manifest !== null && <div className="mb-4 space-y-2 text-sm text-theme-text-secondary">{!cnpgTargetDraft(manifest) && <p>The current YAML cannot be represented by these fields. Rebuilding from setup requires confirmation.</p>}<button type="button" className="btn-secondary px-3 py-1.5 text-xs" onClick={() => setEditing(true)}>Continue editing current YAML</button></div>}
+    <CNPGTargetFields value={target} onChange={setTarget} idPrefix="cnpg-create" namespaces={availableNamespaces.data?.map((item) => item.name)} storageClasses={storageClasses.data?.map((item) => item.metadata.name)} defaultClassDisabled={manifest !== null && cnpgTargetDraft(manifest)?.spec.storage?.pvcTemplate?.storageClassName === ''} />
+    {(availableNamespaces.isError || storageClasses.isError) && <p className="mt-3 text-xs text-theme-text-tertiary">{availableNamespaces.isError && 'Namespace suggestions could not be read. '}{storageClasses.isError && 'Storage class suggestions could not be read. '}You can enter names directly; access and configuration are checked at manifest review.</p>}
+  </ActionConfirmDialog>
+}