@skyhook-io/radar-app 1.16.3 → 1.17.1

package/src/components/cnpg/protection/scheduleModel.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest'
+import { scheduleExpression, simpleSchedule } from './scheduleModel'
+
+describe('simple schedules', () => {
+  it('round-trips only the exact common forms without interpreting custom cron', () => {
+    for (const value of ['0 30 2 * * *', '0 0 23 * * 0', '0 15 6 31 * *'])
+      expect(scheduleExpression(simpleSchedule(value)!)).toBe(value)
+    for (const value of [
+      '@daily',
+      '@every 1h',
+      '0 0 0 */2 * 1',
+      '30 0 2 * * *',
+      '0 0 2 1 * 1',
+      '0 60 2 * * *',
+      '0 0 24 * * *',
+    ])
+      expect(simpleSchedule(value)).toBeNull()
+  })
+})

package/src/components/cnpg/protection/scheduleModel.ts

@@ -0,0 +1,16 @@
+export type SimpleSchedule = { frequency: 'daily' | 'weekly' | 'monthly'; time: string; day: string }
+
+export function simpleSchedule(value: string): SimpleSchedule | null {
+  const match = value.match(/^0 (\d|[1-5]\d) (\d|1\d|2[0-3]) (\*|[1-9]|[12]\d|3[01]) \* (\*|[0-6])$/)
+  if (!match || (match[3] !== '*' && match[4] !== '*')) return null
+  return {
+    frequency: match[3] !== '*' ? 'monthly' : match[4] !== '*' ? 'weekly' : 'daily',
+    time: `${match[2].padStart(2, '0')}:${match[1].padStart(2, '0')}`,
+    day: match[3] !== '*' ? match[3] : match[4] !== '*' ? match[4] : '1',
+  }
+}
+
+export function scheduleExpression(value: SimpleSchedule): string {
+  const [hour, minute] = value.time.split(':').map(Number)
+  return `0 ${minute} ${hour} ${value.frequency === 'monthly' ? value.day : '*'} * ${value.frequency === 'weekly' ? value.day : '*'}`
+}

package/src/components/cnpg/recovery/CNPGRecoveryPoint.tsx

@@ -0,0 +1,220 @@
+import type { ReactNode } from 'react'
+import { toneTextClass, Tooltip, type HealthLevel } from '@skyhook-io/k8s-ui'
+import {
+  describeSource,
+  formatLocal,
+  formatUTC,
+  restoreTargetKinds,
+  sourcePinsBackup,
+  type EvidencePoint,
+  type RecoveryEvidence,
+  type RestoreSource,
+  type RestoreTarget,
+} from './restoreModel'
+
+const FIELD = 'rounded-lg border border-theme-border bg-theme-base px-2 py-1 text-sm text-theme-text-primary'
+
+function When({ point, empty }: { point?: EvidencePoint & { wal?: string }; empty: string }) {
+  if (!point) return <span className="text-theme-text-tertiary">{empty}</span>
+  return (
+    <>
+      <div className="font-mono text-[12.5px] text-theme-text-primary">{formatUTC(point.at)}</div>
+      <div className="text-[11px] text-theme-text-tertiary">
+        {formatLocal(point.at)}
+        {point.wal ? ` · ${point.wal}` : ''}
+      </div>
+      <div className="text-[11px] text-theme-text-tertiary">{point.source}</div>
+    </>
+  )
+}
+
+function EvidenceRow({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="grid grid-cols-[8.5rem_minmax(0,1fr)] gap-x-3 py-1.5">
+      <div className="text-xs text-theme-text-secondary">{label}</div>
+      <div className="min-w-0">{children}</div>
+    </div>
+  )
+}
+
+export function CNPGRecoveryPoint({
+  sources,
+  sourceIndex,
+  onSourceChange,
+  targetKind,
+  onTargetChange,
+  timeValue,
+  onTimeChange,
+  zone,
+  onZoneChange,
+  targetIso,
+  evidence,
+  sourceClusterName,
+}: {
+  sources: RestoreSource[]
+  sourceIndex: number
+  onSourceChange: (index: number) => void
+  targetKind: RestoreTarget['kind']
+  onTargetChange: (kind: RestoreTarget['kind']) => void
+  timeValue: string
+  onTimeChange: (value: string) => void
+  zone: 'utc' | 'local'
+  onZoneChange: (value: 'utc' | 'local') => void
+  targetIso: string | null
+  evidence: RecoveryEvidence
+  sourceClusterName?: string
+}) {
+  const source = sources[sourceIndex]
+  const pinned = sourcePinsBackup(source)
+  const snapshot = source?.kind === 'backup' && !!source.snapshot
+  const kinds = restoreTargetKinds(source)
+  const end = source?.kind === 'objectStore' || source?.kind === 'backup' ? source.backupEnd : undefined
+  const localZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+  return (
+    <>
+      <div className="mb-4 grid grid-cols-[7.5rem_minmax(0,1fr)] items-center gap-x-3">
+        <label className="text-xs text-theme-text-secondary" htmlFor="cnpg-restore-source">
+          Restore from
+        </label>
+        <select
+          id="cnpg-restore-source"
+          value={sourceIndex}
+          onChange={(e) => onSourceChange(Number(e.target.value))}
+          className={FIELD}
+        >
+          {sources.map((s, i) => (
+            <option key={i} value={i}>
+              {describeSource(s)}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div className="grid gap-5 sm:grid-cols-2">
+        <div>
+          <fieldset className="space-y-1.5">
+            <legend className="mb-1 text-xs text-theme-text-secondary">Recover to</legend>
+            {kinds.includes('backupEnd') && (
+              <label className="flex items-center gap-2 text-sm text-theme-text-primary">
+                <input
+                  type="radio"
+                  name="cnpg-restore-target"
+                  checked={targetKind === 'backupEnd'}
+                  onChange={() => onTargetChange('backupEnd')}
+                />
+                {snapshot ? 'The end of this snapshot' : 'The end of this backup'}
+                {end ? ` (${formatUTC(end)})` : ''}
+              </label>
+            )}
+            {snapshot && (
+              <p className="ml-6 text-xs text-theme-text-tertiary">
+                No later point is offered: replaying WAL past a snapshot needs a WAL archive source, which this restore does not configure.
+              </p>
+            )}
+            {kinds.includes('latest') && (
+              <>
+                <label className="flex items-center gap-2 text-sm text-theme-text-primary">
+                  <input
+                    type="radio"
+                    name="cnpg-restore-target"
+                    checked={targetKind === 'latest'}
+                    onChange={() => onTargetChange('latest')}
+                  />
+                  The latest archived WAL
+                </label>
+                <p className="ml-6 text-xs text-theme-text-tertiary">
+                  Replay the archived transaction logs to the newest available point.
+                </p>
+              </>
+            )}
+            {kinds.includes('time') && (
+              <label className="flex items-center gap-2 text-sm text-theme-text-primary">
+                <input
+                  type="radio"
+                  name="cnpg-restore-target"
+                  checked={targetKind === 'time'}
+                  onChange={() => onTargetChange('time')}
+                />
+                A point in time
+              </label>
+            )}
+            {targetKind === 'time' && (
+              <div className="ml-6 space-y-1">
+                <div className="flex flex-wrap items-center gap-2">
+                  <input
+                    id="cnpg-restore-time"
+                    aria-label="Target time"
+                    type="datetime-local"
+                    step={1}
+                    value={timeValue}
+                    onChange={(e) => onTimeChange(e.target.value)}
+                    className={FIELD}
+                  />
+                  <select
+                    aria-label="Time zone of the target"
+                    value={zone}
+                    onChange={(e) => onZoneChange(e.target.value as 'utc' | 'local')}
+                    className={FIELD}
+                  >
+                    <option value="utc">UTC</option>
+                    <option value="local">{localZone}</option>
+                  </select>
+                </div>
+                <div className="text-[11px] text-theme-text-tertiary">
+                  {targetIso ? (
+                    <>
+                      Target: <span className="font-mono">{targetIso}</span> · {formatLocal(targetIso)}
+                    </>
+                  ) : (
+                    'The target is written to the manifest in UTC.'
+                  )}
+                </div>
+              </div>
+            )}
+            {pinned && targetKind !== 'backupEnd' && (
+              <div className="ml-6 text-[11px] text-theme-text-tertiary">
+                Starts from this backup and replays archived WAL after it.
+              </div>
+            )}
+          </fieldset>
+          <p className="mt-4 text-xs text-theme-text-tertiary">
+            A restore creates a separate Cluster. Choose its name, instance count and storage next.
+          </p>
+        </div>
+        <div className="rounded-lg border border-theme-border bg-theme-base px-3 py-2">
+          <div className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">
+            What the source holds
+          </div>
+          <EvidenceRow label="First recoverability point">
+            <When point={evidence.firstPoint} empty={snapshot ? 'This snapshot' : source?.kind === 'backup' ? 'This backup' : 'Not reported'} />
+          </EvidenceRow>
+          <EvidenceRow label="Last successful backup">
+            <When point={evidence.lastBackup} empty="None observed" />
+          </EvidenceRow>
+          <EvidenceRow label="WAL archiving">
+            <Tooltip content={evidence.archiving.detail} disabled={!evidence.archiving.detail}>
+              <span className={toneTextClass(evidence.archiving.tone as HealthLevel)}>{evidence.archiving.text}</span>
+            </Tooltip>
+            <div className="text-[11px] text-theme-text-tertiary">{evidence.archiving.source}</div>
+          </EvidenceRow>
+          {!snapshot && (
+            <EvidenceRow label="Last archived WAL">
+              <When point={evidence.lastArchived} empty={sourceClusterName ? 'Not reported' : 'Unknown'} />
+            </EvidenceRow>
+          )}
+          {evidence.lastArchiveFailure && (
+            <EvidenceRow label="Last archive failure">
+              <When point={evidence.lastArchiveFailure} empty="" />
+            </EvidenceRow>
+          )}
+          {evidence.gaps.length > 0 && (
+            <ul className="mt-1 list-disc space-y-0.5 pl-4 text-[11px] text-theme-text-tertiary">
+              {evidence.gaps.map((g) => (
+                <li key={g}>{g}</li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}

package/src/components/cnpg/recovery/CNPGRestoreButton.test.tsx

@@ -0,0 +1,29 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, expect, it, vi } from 'vitest'
+import { CNPGRestoreButton } from './CNPGRestoreButton'
+
+vi.mock('./CNPGRestoreDialog', () => ({ CNPGRestoreDialog: ({ entry }: any) => <div role="dialog">{entry.name}</div> }))
+;(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true
+let root: ReturnType<typeof createRoot>
+let host: HTMLDivElement
+afterEach(() => { act(() => root?.unmount()); host?.remove() })
+
+it('keeps the blocked entry focusable for its explanation and prevents starting restore', () => {
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  act(() => root.render(<CNPGRestoreButton namespace="db" entry={{ kind: 'cluster', name: 'pg' }} disabledReason="Needs create clusters" />))
+  const button = host.querySelector('button')!
+  expect(button.disabled).toBe(false)
+  expect(button.getAttribute('aria-disabled')).toBe('true')
+  act(() => { button.focus(); button.click() })
+  expect(document.activeElement).toBe(button)
+  expect(host.querySelector('[role=dialog]')).toBeNull()
+})
+
+it('opens the selected source when restore is allowed', () => {
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  act(() => root.render(<CNPGRestoreButton namespace="db" entry={{ kind: 'backup', name: 'base-backup' }} />))
+  act(() => host.querySelector('button')!.click())
+  expect(host.querySelector('[role=dialog]')?.textContent).toBe('base-backup')
+})

package/src/components/cnpg/recovery/CNPGRestoreButton.tsx

@@ -0,0 +1,26 @@
+import { useState } from 'react'
+import { History } from 'lucide-react'
+import { Tooltip } from '@skyhook-io/k8s-ui'
+import { CNPGRestoreDialog, type CNPGRestoreEntry } from './CNPGRestoreDialog'
+
+/** Restore into a new Cluster, from a Backup, an ObjectStore or a Cluster's backups. */
+export function CNPGRestoreButton({ namespace, entry, disabledReason, compact }: { namespace: string; entry: CNPGRestoreEntry; disabledReason?: string; compact?: boolean }) {
+  const [open, setOpen] = useState(false)
+  const label = entry.kind === 'backup' ? 'Restore from this backup' : entry.kind === 'cluster' ? 'Restore to a new cluster' : 'Restore a cluster from this store'
+  return (
+    <>
+      <Tooltip content={disabledReason ?? `${label} into a new Cluster`} position="bottom">
+        <button
+          type="button"
+          aria-disabled={!!disabledReason}
+          onClick={() => { if (!disabledReason) setOpen(true) }}
+          className={`btn-secondary inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap px-2.5 py-1.5 text-xs font-medium ${disabledReason ? 'cursor-not-allowed opacity-50' : ''}`}
+        >
+          <History className="h-3.5 w-3.5" />
+          {!compact && label}
+        </button>
+      </Tooltip>
+      {open && <CNPGRestoreDialog namespace={namespace} entry={entry} onClose={() => setOpen(false)} />}
+    </>
+  )
+}

package/src/components/cnpg/recovery/CNPGRestoreChecks.test.tsx

@@ -0,0 +1,23 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { expect, it, vi } from 'vitest'
+import { CNPGRestoreChecks } from './CNPGRestoreChecks'
+
+const state = vi.hoisted(() => ({ estimatedRows: 0, noEstimate: 1 }))
+vi.mock('../../../api/cnpg-inspect', () => ({
+  useCNPGRestoreChecks: () => ({
+    data: { state: 'ok', database: 'app', timeline: 2, contents: { tables: 1, ...state, largest: [] } },
+    refetch: vi.fn(),
+  }),
+}))
+
+it('distinguishes unavailable, partial and known-zero row estimates', () => {
+  const render = () => renderToStaticMarkup(<CNPGRestoreChecks namespace="db" name="restored" />)
+  expect(render()).toContain('Row estimate unavailable')
+  expect(render()).not.toContain('about 0 rows')
+  state.estimatedRows = 12000
+  expect(render()).toContain('about 12 k rows (partial estimate)')
+  state.estimatedRows = 0
+  state.noEstimate = 0
+  expect(render()).toContain('about 0 rows')
+  expect(render()).not.toContain('Row estimate unavailable')
+})

package/src/components/cnpg/recovery/CNPGRestoreChecks.tsx

@@ -0,0 +1,153 @@
+import { cnpgFormatBytes, FactGrid, FactRow, formatAge, formatGrant, toneTextClass } from '@skyhook-io/k8s-ui'
+import { useCNPGRestoreChecks, type CNPGRestoreChecksResponse } from '../../../api/cnpg-inspect'
+import { cnpgDeclaredTargetText, cnpgRecoveryStopText } from '../inspectModel'
+
+const LIST_SHOWN = 6
+
+function countList(names: string[], total: number): string {
+  const shown = names.slice(0, LIST_SHOWN).join(', ')
+  return total > LIST_SHOWN ? `${shown} and ${total - LIST_SHOWN} more` : shown
+}
+
+function approxRows(n: number): string {
+  if (n >= 1_000_000) return `about ${(n / 1_000_000).toFixed(1)} M rows`
+  if (n >= 1_000) return `about ${Math.round(n / 1_000)} k rows`
+  return `about ${n} rows`
+}
+
+/**
+ * What Radar reads inside a restored cluster's primary: where recovery
+ * stopped beside the declared target, and what the databases hold. These
+ * describe what is there; whether it is what the restore needed is still the
+ * person's call, recorded separately as the validation note.
+ */
+export function CNPGRestoreChecks({ namespace, name }: { namespace: string; name: string }) {
+  const q = useCNPGRestoreChecks(namespace, name)
+  const d = q.data
+  return (
+    <div className="border-b border-theme-border px-4 py-3 text-sm">
+      <div className="flex flex-wrap items-baseline gap-x-2">
+        <h3 className="text-xs font-semibold uppercase tracking-wide text-theme-text-tertiary">What Radar reads in it</h3>
+        {d?.pod && d.state === 'ok' && (
+          <span className="text-xs text-theme-text-tertiary">
+            {d.pod} · {d.capturedAt ? `${formatAge(d.capturedAt)} ago` : 'just now'} · fixed read-only SQL over your pods/exec
+          </span>
+        )}
+        <button type="button" onClick={() => q.refetch()} disabled={q.isFetching} className="ml-auto text-xs text-accent-text hover:underline disabled:opacity-50">
+          {q.isFetching ? 'Reading…' : 'Read again'}
+        </button>
+      </div>
+      <div className="mt-2">
+        {!d ? (
+          <p className="text-theme-text-tertiary">
+            {q.isLoading ? 'Reading the restored primary…' : `Could not read it: ${q.error instanceof Error ? q.error.message : 'unknown error'}`}
+          </p>
+        ) : d.state === 'denied' ? (
+          <p className="text-theme-text-secondary">
+            Reading inside the restored databases needs {formatGrant(d.permission.grant) ?? `create pods/exec in namespace ${namespace}`}.
+          </p>
+        ) : d.state !== 'ok' ? (
+          <p className={toneTextClass('unknown')}>
+            Could not read the primary{d.pod ? ` ${d.pod}` : ''}: {d.error ?? d.state}.
+          </p>
+        ) : (
+          <RestoreFacts d={d} />
+        )}
+      </div>
+    </div>
+  )
+}
+
+function RestoreFacts({ d }: { d: CNPGRestoreChecksResponse }) {
+  const history = [...(d.history ?? [])].reverse()
+  return (
+    <>
+      <FactGrid>
+        <FactRow label="State">
+          {d.inRecovery ? (
+            <span className={toneTextClass('degraded')}>Still in recovery: it does not accept writes yet</span>
+          ) : (
+            <span className="text-theme-text-primary">Out of recovery, on timeline {d.timeline}</span>
+          )}
+        </FactRow>
+        <FactRow label="Where recovery stopped">
+          {d.historyMissing ? (
+            <span className="text-theme-text-tertiary">No timeline history: timeline {d.timeline} never switched</span>
+          ) : history.length === 0 ? (
+            <span className="text-theme-text-tertiary">The history file lists no switches</span>
+          ) : (
+            <ul className="space-y-0.5">
+              {history.slice(0, 4).map((sw) => (
+                <li key={`${sw.from}-${sw.switchLsn}`}>
+                  <span className="font-mono text-xs text-theme-text-tertiary">
+                    timeline {sw.from} → {sw.to} at {sw.switchLsn}
+                  </span>{' '}
+                  <span className="text-theme-text-primary">{cnpgRecoveryStopText(sw)}</span>
+                </li>
+              ))}
+            </ul>
+          )}
+          <div className="mt-0.5 text-[11.5px] text-theme-text-tertiary">
+            Declared target: {cnpgDeclaredTargetText(d.target)}. From the current timeline’s history file, newest first; later switches are failovers or switchovers since
+            the restore.
+          </div>
+        </FactRow>
+        <FactRow label="Databases">
+          {d.databases && d.databases.length > 0 ? (
+            <span>
+              {countList(
+                d.databases.map((x) => `${x.name} ${cnpgFormatBytes(x.bytes)}`),
+                d.databaseCount ?? d.databases.length,
+              )}
+            </span>
+          ) : (
+            <span className="text-theme-text-tertiary">None besides the templates</span>
+          )}
+        </FactRow>
+        <FactRow label="Roles">
+          {d.roles && d.roles.length > 0 ? (
+            <span>
+              {countList(
+                d.roles.map((r) => r.name),
+                d.roleCount ?? d.roles.length,
+              )}
+            </span>
+          ) : (
+            <span className="text-theme-text-tertiary">None</span>
+          )}
+        </FactRow>
+        <FactRow label={<span className="font-mono">{d.database}</span>}>
+          {d.contents ? (
+            <>
+              <span className="text-theme-text-primary">
+                {d.contents.tables} {d.contents.tables === 1 ? 'table' : 'tables'} ·{' '}
+                {d.contents.noEstimate > 0 && d.contents.estimatedRows === 0
+                  ? 'Row estimate unavailable'
+                  : `${approxRows(d.contents.estimatedRows)}${d.contents.noEstimate > 0 ? ' (partial estimate)' : ''}`}
+              </span>
+              {d.contents.largest.length > 0 && (
+                <div className="mt-0.5 text-xs text-theme-text-secondary">
+                  Largest:{' '}
+                  {d.contents.largest
+                    .slice(0, 3)
+                    .map((t) => `${t.name} ${cnpgFormatBytes(t.bytes)}${t.estimatedRows !== undefined ? ` (${approxRows(t.estimatedRows).replace('about ', '~')})` : ''}`)
+                    .join(' · ')}
+                </div>
+              )}
+              <div className="mt-0.5 text-[11.5px] text-theme-text-tertiary">
+                Row counts are the planner’s estimates, which can be stale
+                {d.contents.noEstimate > 0 ? `; ${d.contents.noEstimate} without an estimate, so not counted` : ''}.
+              </div>
+            </>
+          ) : (
+            <span className="text-theme-text-tertiary">Not read: {d.contentsSource?.error ?? 'unknown reason'}</span>
+          )}
+        </FactRow>
+      </FactGrid>
+      <p className="mt-2 text-[11.5px] text-theme-text-tertiary">
+        This describes what is there, not whether it is what you expected. The bootstrap database and owner exist whether or not the backup held them: CloudNativePG
+        creates them when missing.
+      </p>
+    </>
+  )
+}

package/src/components/cnpg/recovery/CNPGRestoreDialog.back.test.tsx

@@ -0,0 +1,149 @@
+// @vitest-environment jsdom
+import { act, type ReactNode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, beforeEach, expect, it, vi } from 'vitest'
+import yaml from 'yaml'
+import { CNPGRestoreDialog } from './CNPGRestoreDialog'
+
+const state = vi.hoisted(() => ({ context: 'kind-demo', editor: {} as any, toast: vi.fn() }))
+vi.mock('../../../api/cnpg', () => ({
+  useCNPGWorkspace: () => ({ isLoading: false, data: { coverage: { backups: { state: 'full' }, objectStores: { state: 'full' } }, objects: { clusters: [{ apiVersion: 'postgresql.cnpg.io/v1', metadata: { name: 'pg', namespace: 'db' }, spec: { imageName: 'postgres:17', storage: { size: '20Gi' }, backup: { barmanObjectStore: { destinationPath: 's3://archive' } } } }], backups: [] } } }),
+  useCNPGRuntime: () => ({}),
+}))
+vi.mock('../../../api/client', () => ({ useResources: () => ({ data: [] }) }))
+vi.mock('../../../api/cnpg-recovery', () => ({ useCNPGRestoreCapability: () => ({ data: { allowed: true } }) }))
+vi.mock('../../../context/ConnectionContext', () => ({ useConnection: () => ({ connection: { context: state.context } }) }))
+vi.mock('../../ui/Toast', () => ({ useToast: () => ({ showSuccess: state.toast }) }))
+vi.mock('../useCNPGNavigate', () => ({ useCNPGNavigate: () => vi.fn() }))
+vi.mock('../../shared/CreateResourceDialog', () => ({ CreateResourceDialog: (props: any) => { state.editor = props; return <pre>{props.initialYaml}</pre> } }))
+vi.mock('@skyhook-io/k8s-ui', async (original) => ({
+  ...(await original<typeof import('@skyhook-io/k8s-ui')>()),
+  ActionConfirmDialog: ({ onConfirm, onBack, backLabel, confirmLabel, disabledReason, incompleteReason, notes, children }: { onConfirm: () => void; onBack?: () => void; backLabel?: string; confirmLabel: string; disabledReason?: string; incompleteReason?: string; notes?: string[]; children: ReactNode }) => <div>{notes?.join(' ')}{disabledReason}{children}{onBack && <button onClick={onBack}>{backLabel}</button>}<button disabled={!!disabledReason || !!incompleteReason} onClick={onConfirm}>{confirmLabel}</button></div>,
+}))
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+let root: ReturnType<typeof createRoot>, host: HTMLDivElement
+const onClose = vi.fn()
+const button = (text: string) => [...document.querySelectorAll('button')].find((item) => item.textContent?.trim() === text)!
+const render = () => root.render(<CNPGRestoreDialog namespace="db" entry={{ kind: 'cluster', name: 'pg' }} onClose={onClose} />)
+const changeField = (field: string, value: string) => act(() => {
+  const input = host.querySelector(`#cnpg-restore-${field}`)!
+  Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(input, value)
+  input.dispatchEvent(new Event('input', { bubbles: true }))
+})
+const changeName = (value: string) => changeField('name', value)
+const selectTarget = (label: string) => act(() => [...host.querySelectorAll('label')].find((item) => item.textContent?.trim() === label)!.querySelector<HTMLInputElement>('input')!.click())
+beforeEach(async () => {
+  state.context = 'kind-demo'
+  onClose.mockClear()
+  state.toast.mockClear()
+  host = document.createElement('div')
+  document.body.appendChild(host)
+  root = createRoot(host)
+  await act(async () => render())
+  act(() => button('Continue to new Cluster').click())
+})
+afterEach(() => { act(() => root.unmount()); host.remove() })
+
+it('retains setup choices and arbitrary YAML edits through Back', () => {
+  changeName('custom-restore')
+  act(() => button('Review manifest').click())
+  const draft = `${state.editor.initialYaml}\n# retained advanced settings\n`
+  act(() => state.editor.onBack(draft))
+  expect((host.querySelector('#cnpg-restore-name') as HTMLInputElement).value).toBe('custom-restore')
+  expect(host.textContent).toContain('Your YAML edits are retained')
+  act(() => button('Review manifest').click())
+  expect(state.editor.initialYaml).toBe(draft)
+  expect(state.editor.initialMode).toBe('create')
+  expect(state.editor.lockMode).toBe(true)
+  expect(onClose).not.toHaveBeenCalled()
+})
+
+it('requires an explicit replacement when changed setup would discard edited YAML', () => {
+  act(() => button('Review manifest').click())
+  const draft = `${state.editor.initialYaml}\n# keep this edit\n`
+  act(() => state.editor.onBack(draft))
+  act(() => button('Back to recovery point').click())
+  selectTarget('A point in time')
+  changeField('time', '2026-10-01T12:00')
+  act(() => button('Continue to new Cluster').click())
+  act(() => button('Review manifest').click())
+  expect(document.body.textContent).toContain('Replace edited restore manifest?')
+  act(() => button('Keep editing setup').click())
+  act(() => button('Back to recovery point').click())
+  selectTarget('The latest archived WAL')
+  act(() => button('Continue to new Cluster').click())
+  act(() => button('Review manifest').click())
+  expect(state.editor.initialYaml).toBe(draft)
+  act(() => state.editor.onBack(draft))
+  act(() => button('Back to recovery point').click())
+  selectTarget('A point in time')
+  act(() => button('Continue to new Cluster').click())
+  act(() => button('Review manifest').click())
+  act(() => button('Replace manifest').click())
+  expect(yaml.parse(state.editor.initialYaml).spec.bootstrap.recovery.recoveryTarget.targetTime).toContain('2026-10-01T12:00:00')
+  expect(state.editor.initialYaml).not.toContain('keep this edit')
+})
+
+it('rebuilds an unedited draft after setup changes and preserves empty edited drafts', () => {
+  act(() => button('Review manifest').click())
+  act(() => state.editor.onBack(state.editor.initialYaml))
+  changeName('new-target')
+  act(() => button('Review manifest').click())
+  expect(yaml.parse(state.editor.initialYaml).metadata.name).toBe('new-target')
+  act(() => state.editor.onBack(''))
+  act(() => button('Continue editing current YAML').click())
+  expect(state.editor.initialYaml).toBe('')
+})
+
+it('refuses to reuse the restore draft after a context switch', async () => {
+  act(() => button('Review manifest').click())
+  state.context = 'kind-other'
+  await act(async () => render())
+  expect(host.querySelector('pre')).toBeNull()
+  expect(host.textContent).toContain('start again in the current context')
+  expect(button('Review manifest').disabled).toBe(true)
+})
+
+
+it('projects supported YAML inputs and preserves other edits when target fields change', () => {
+  act(() => button('Review manifest').click())
+  const doc = yaml.parseDocument(state.editor.initialYaml, { version: '1.1' })
+  doc.setIn(['spec', 'storage', 'size'], '40Gi')
+  doc.setIn(['spec', 'postgresql'], { parameters: { max_connections: '250' } })
+  const draft = `${doc.toString()}\n# preserve this note\n`
+  expect(yaml.parse(draft).spec.postgresql).toEqual({ parameters: { max_connections: '250' } })
+  act(() => state.editor.onBack(draft))
+  expect((host.querySelector('#cnpg-restore-size') as HTMLInputElement).value).toBe('40Gi')
+  changeName('different-target')
+  changeField('instances', '2')
+  act(() => button('Review manifest').click())
+  const manifest = yaml.parse(state.editor.initialYaml)
+  expect(manifest.metadata.name).toBe('different-target')
+  expect(manifest.spec.instances).toBe(2)
+  expect(manifest.spec.storage.size).toBe('40Gi')
+  expect(manifest.spec.postgresql.parameters.max_connections).toBe('250')
+  expect(state.editor.initialYaml).toContain('preserve this note')
+})
+
+it('does not claim an edited initdb manifest started a restore', () => {
+  act(() => button('Review manifest').click())
+  const doc = yaml.parseDocument(state.editor.initialYaml)
+  doc.setIn(['spec', 'bootstrap'], { initdb: {} })
+  const created = { kind: 'Cluster', apiVersion: 'postgresql.cnpg.io/v1', namespace: 'db', name: 'pg-restore' }
+  act(() => state.editor.onCreated(created, doc.toString()))
+  expect(state.toast).toHaveBeenCalledWith('Cluster pg-restore created', 'Review its current state on the Cluster page.', expect.objectContaining({ label: 'Open Cluster' }))
+})
+
+
+it('puts recovery decisions first and keeps target inputs when stepping back', () => {
+  changeName('chosen-target')
+  act(() => button('Back to recovery point').click())
+  expect(host.querySelector('#cnpg-restore-name')).toBeNull()
+  expect(host.textContent).toContain('What the source holds')
+  selectTarget('A point in time')
+  expect(button('Continue to new Cluster').disabled).toBe(true)
+  changeField('time', '2026-10-01T12:00')
+  act(() => button('Continue to new Cluster').click())
+  expect((host.querySelector('#cnpg-restore-name') as HTMLInputElement).value).toBe('chosen-target')
+  expect(host.textContent).toContain('Recover to 2026-10-01 12:00:00 UTC')
+})