@stacksjs/defaults 0.70.366 → 0.70.368

package/resources/components/Dashboard/Operations/IncidentDashboard.stx

@@ -0,0 +1,39 @@
+<script client>
+import type { IncidentAlert, IncidentOperationsResponse } from '../../../../functions/operations'
+import { fetchIncidentOperations, updateIncident } from '../../../../functions/operations'
+import { pushToast } from '../../../../functions/toasts'
+
+const data = state<IncidentOperationsResponse | null>(null)
+const loading = state(true)
+const busy = state('')
+const selected = state<IncidentAlert | null>(null)
+
+async function load(): Promise<void> { loading.set(true); try { data.set(await fetchIncidentOperations()) } catch (error) { pushToast('error', 'Could not load incidents', { detail: String(error) }) } finally { loading.set(false) } }
+async function mutate(action: 'acknowledge' | 'assign_self' | 'unassign' | 'silence'): Promise<void> {
+  if (!selected()) return
+  busy.set(action)
+  try {
+    const until = action === 'silence' ? new Date(Date.now() + 60 * 60 * 1000).toISOString() : undefined
+    await updateIncident(selected()!.id, { action, until })
+    pushToast('success', action === 'silence' ? 'Alert silenced for one hour.' : 'Incident updated.')
+    selected.set(null); await load()
+  }
+  catch (error) { pushToast('error', 'Incident update failed', { detail: String(error) }) }
+  finally { busy.set('') }
+}
+function severityVariant(value: string): string { return value === 'critical' ? 'danger' : value === 'warning' ? 'warning' : 'info' }
+onMount(() => void load())
+</script>
+
+<div class="space-y-6">
+  <PageHeader title="Operations" description="Triage application-wide alerts from native health rules and delivery routes."><template #actions><Button variant="secondary" :loading="loading()" @click="load"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button></template></PageHeader>
+  <OperationsNavigation active="incidents" />
+  <section class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4"><StatsCard title="Firing" :value="String(data()?.summary.firing || 0)" icon="i-hugeicons-alert-02" iconBg="warning" :loading="loading()" /><StatsCard title="Critical" :value="String(data()?.summary.critical || 0)" icon="i-hugeicons-fire" iconBg="danger" :loading="loading()" /><StatsCard title="Acknowledged" :value="String(data()?.summary.acknowledged || 0)" icon="i-hugeicons-checkmark-circle-02" iconBg="success" :loading="loading()" /><StatsCard title="Active rules" :value="String(data()?.summary.rules || 0)" icon="i-hugeicons-radar-02" iconBg="neutral" :loading="loading()" /></section>
+  <section class="overflow-hidden bg-white dark:bg-neutral-900 border border-gray-200 rounded-lg dark:border-neutral-800">
+    <div class="px-4 py-4 border-b border-gray-200 dark:border-neutral-800"><h2 class="font-semibold text-gray-900 dark:text-white">Incidents</h2><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Acknowledgement does not resolve an alert. Resolution follows recovered signal evidence.</p></div>
+    <div :if="!loading() && !data()?.alerts.length" class="px-6 py-12 text-center"><span class="mx-auto h-8 w-8 text-green-500 i-hugeicons-checkmark-circle-02"></span><p class="mt-3 font-medium text-gray-900 dark:text-white">No incidents</p><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">No native alert is pending, firing, resolved, or silenced in this environment.</p></div>
+    <button :for="alert in data()?.alerts || []" type="button" class="flex w-full items-start justify-between gap-4 px-4 py-4 text-left border-b border-gray-100 last:border-0 dark:border-neutral-800 hover:bg-gray-50 dark:hover:bg-neutral-800" @click="selected.set(alert)"><div><div class="flex gap-2 items-center"><p class="font-medium text-gray-900 text-sm dark:text-white">{{ alert.title }}</p><Badge :variant="severityVariant(alert.severity)">{{ alert.severity }}</Badge></div><p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ alert.state }} · {{ alert.occurrenceCount }} occurrences · {{ alert.ownerName || 'Unassigned' }}</p></div><span class="h-4 w-4 text-gray-400 i-hugeicons-arrow-right-01"></span></button>
+  </section>
+  <OperationHistory :operations="data()?.operations || []" :loading="loading()" />
+  <Modal :isOpen="Boolean(selected())" title="Incident actions" :description="selected()?.title || ''" size="sm" @close="selected.set(null)"><div class="grid gap-2"><Button variant="secondary" :loading="busy() === 'acknowledge'" @click="mutate('acknowledge')">Acknowledge</Button><Button variant="secondary" :loading="busy() === 'assign_self'" @click="mutate('assign_self')">Assign to me</Button><Button variant="secondary" :loading="busy() === 'silence'" @click="mutate('silence')">Silence for one hour</Button></div></Modal>
+</div>

package/resources/components/Dashboard/Operations/MigrationDashboard.stx

@@ -0,0 +1,146 @@
+<script client>
+import type { MigrationOperationsResponse } from '../../../../functions/operations'
+import { applyMigrationOperations, fetchMigrationOperations, reconcileMigrationLedger } from '../../../../functions/operations'
+import { pushToast } from '../../../../functions/toasts'
+
+const data = state<MigrationOperationsResponse | null>(null)
+const loading = state(true)
+const busy = state('')
+const errorMessage = state('')
+const dialog = state<'' | 'apply' | 'reconcile'>('')
+const confirmation = state('')
+
+async function load(): Promise<void> {
+  loading.set(true)
+  errorMessage.set('')
+  try {
+    data.set(await fetchMigrationOperations())
+  }
+  catch (error) {
+    errorMessage.set('Migration state could not be loaded.')
+    pushToast('error', 'Could not load migrations', { detail: String(error) })
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+function openDialog(kind: 'apply' | 'reconcile'): void {
+  confirmation.set('')
+  dialog.set(kind)
+}
+
+function closeDialog(): void {
+  if (!busy()) dialog.set('')
+}
+
+async function confirm(): Promise<void> {
+  const current = data()
+  const kind = dialog()
+  if (!current || !kind) return
+  busy.set(kind)
+  try {
+    if (kind === 'apply') {
+      const result = await applyMigrationOperations(current.revision, confirmation())
+      pushToast('success', result.message)
+    }
+    else {
+      await reconcileMigrationLedger(current.revision, confirmation())
+      pushToast('success', 'Migration ledger reconciled.')
+    }
+    dialog.set('')
+    await load()
+  }
+  catch (error) {
+    pushToast('error', kind === 'apply' ? 'Migration failed' : 'Reconciliation failed', { detail: String(error) })
+  }
+  finally {
+    busy.set('')
+  }
+}
+
+function statusClass(status: string): string {
+  if (status === 'applied' || status === 'stranded') return 'text-green-700 bg-green-50 dark:text-green-300 dark:bg-green-950/30'
+  if (status === 'pending') return 'text-blue-700 bg-blue-50 dark:text-blue-300 dark:bg-blue-950/30'
+  return 'text-orange-700 bg-orange-50 dark:text-orange-300 dark:bg-orange-950/30'
+}
+
+onMount(() => void load())
+</script>
+
+<div class="space-y-6">
+  <PageHeader title="Operations" description="Review model-derived schema changes and migration ledger health before changing the database.">
+    <template #actions>
+      <Button variant="secondary" :loading="loading()" @click="load">
+        <span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>
+        Refresh
+      </Button>
+    </template>
+  </PageHeader>
+  <OperationsNavigation active="migrations" />
+
+  <div :if="errorMessage()" role="alert" class="px-4 py-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ errorMessage() }}</div>
+
+  <section aria-label="Migration summary" class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+    <StatsCard title="Applied" :value="String(data()?.applied || 0)" icon="i-hugeicons-checkmark-circle-02" iconBg="success" :loading="loading()" />
+    <StatsCard title="Pending changes" :value="String(data()?.summary.pending || 0)" icon="i-hugeicons-git-compare" iconBg="primary" :loading="loading()" />
+    <StatsCard title="Destructive" :value="String(data()?.summary.destructive || 0)" icon="i-hugeicons-alert-02" iconBg="warning" :loading="loading()" />
+    <StatsCard title="Ledger issues" :value="String(data()?.summary.ledgerIssues || 0)" icon="i-hugeicons-database-01" iconBg="neutral" :loading="loading()" />
+  </section>
+
+  <section class="overflow-hidden bg-white dark:bg-neutral-900 border border-gray-200 rounded-lg dark:border-neutral-800">
+    <div class="flex flex-col gap-3 px-4 py-4 border-b border-gray-200 dark:border-neutral-800 sm:flex-row sm:items-center sm:justify-between">
+      <div>
+        <h2 class="font-semibold text-gray-900 dark:text-white">Schema plan</h2>
+        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">{{ data()?.dialect || 'database' }} in {{ data()?.environment || 'current environment' }}. The plan revision is rechecked at execution.</p>
+      </div>
+      <Button :disabled="!data()?.summary.pending" @click="openDialog('apply')">Apply migrations</Button>
+    </div>
+    <div :if="!loading() && !data()?.operations.length" class="px-6 py-12 text-center">
+      <span aria-hidden="true" class="mx-auto h-8 w-8 text-green-500 i-hugeicons-checkmark-circle-02"></span>
+      <p class="mt-3 font-medium text-gray-900 dark:text-white">Schema is current</p>
+      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Models and the connected database have no pending structural changes.</p>
+    </div>
+    <div :if="data()?.operations.length" class="divide-y divide-gray-100 dark:divide-neutral-800">
+      <div :for="operation in data()?.operations || []" class="flex items-start justify-between gap-4 px-4 py-3">
+        <div>
+          <p class="font-medium text-gray-900 text-sm dark:text-white">{{ operation.kind.replaceAll('_', ' ') }}</p>
+          <p class="mt-0.5 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ operation.table }}{{ operation.column ? '.' + operation.column : '' }}</p>
+        </div>
+        <Badge :variant="operation.destructive ? 'danger' : 'info'">{{ operation.destructive ? 'Destructive' : 'Safe' }}</Badge>
+      </div>
+    </div>
+  </section>
+
+  <section class="overflow-hidden bg-white dark:bg-neutral-900 border border-gray-200 rounded-lg dark:border-neutral-800">
+    <div class="flex items-center justify-between gap-3 px-4 py-4 border-b border-gray-200 dark:border-neutral-800">
+      <div>
+        <h2 class="font-semibold text-gray-900 dark:text-white">Migration ledger</h2>
+        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Compared with both migration files and live schema effects.</p>
+      </div>
+      <Button variant="secondary" :disabled="!data()?.summary.drift" @click="openDialog('reconcile')">Reconcile provable drift</Button>
+    </div>
+    <div class="max-h-96 overflow-auto divide-y divide-gray-100 dark:divide-neutral-800">
+      <div :for="entry in data()?.ledger.entries || []" class="flex items-center justify-between gap-4 px-4 py-3">
+        <span class="min-w-0 truncate font-mono text-gray-700 text-xs dark:text-neutral-300">{{ entry.file }}</span>
+        <span :class="'shrink-0 px-2 py-1 font-medium text-xs rounded-md ' + statusClass(entry.status)">{{ entry.status }}</span>
+      </div>
+    </div>
+  </section>
+
+  <OperationHistory :operations="data()?.operatorOperations || []" :loading="loading()" />
+
+  <Modal :isOpen="dialog() !== ''" :title="dialog() === 'apply' ? 'Apply migration plan' : 'Reconcile migration ledger'" size="md" @close="closeDialog">
+    <div class="space-y-4">
+      <div :if="dialog() === 'apply' && data()?.summary.destructive" role="alert" class="px-4 py-3 text-orange-800 text-sm dark:text-orange-200 bg-orange-50 dark:bg-orange-950/30 border border-orange-200 rounded-lg dark:border-orange-900">
+        This plan contains {{ data()?.summary.destructive }} destructive operation{{ data()?.summary.destructive === 1 ? '' : 's' }}. Confirm that a verified recovery point exists before continuing.
+      </div>
+      <p class="text-gray-600 text-sm dark:text-neutral-300">Type <strong>{{ dialog() === 'apply' ? 'migrate ' + data()?.environment : 'reconcile ' + data()?.environment }}</strong> to confirm.</p>
+      <Input v-model:value="confirmation" autocomplete="off" placeholder="Typed confirmation" />
+    </div>
+    <template #footer>
+      <Button variant="secondary" :disabled="busy() !== ''" @click="closeDialog">Cancel</Button>
+      <Button :variant="dialog() === 'apply' && data()?.summary.destructive ? 'danger' : 'primary'" :loading="busy() !== ''" @click="confirm">{{ dialog() === 'apply' ? 'Apply migrations' : 'Reconcile ledger' }}</Button>
+    </template>
+  </Modal>
+</div>

package/resources/components/Dashboard/Operations/OperationHistory.stx

@@ -0,0 +1,61 @@
+<script client>
+import type { OperatorOperation } from '../../../../functions/operations'
+
+const operations = useReactiveProp('operations', [])
+const loading = useReactiveProp('loading', false)
+const subtitle = useReactiveProp('subtitle', 'Every operator mutation is recorded in the append-only control plane.')
+const emptyTitle = useReactiveProp('emptyTitle', 'No operator operations recorded')
+const emptyDescription = useReactiveProp('emptyDescription', 'A completed or attempted operator action will create the first audit entry.')
+
+function rows(): OperatorOperation[] {
+  return operations() as OperatorOperation[]
+}
+
+function formatDate(value?: string): string {
+  if (!value)
+    return 'Not recorded'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime())
+    ? value
+    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
+}
+
+function actionLabel(operation: OperatorOperation): string {
+  const action = operation.kind.split('.').at(-1) || operation.kind
+  const target = typeof operation.input.task === 'string'
+    ? operation.input.task
+    : typeof operation.input.alertId === 'string'
+      ? operation.input.alertId
+      : ''
+  return `${action.charAt(0).toUpperCase()}${action.slice(1)}${target ? ` ${target}` : ''}`
+}
+
+function statusVariant(state: OperatorOperation['state']): 'default' | 'primary' | 'success' | 'warning' | 'danger' {
+  if (state === 'succeeded') return 'success'
+  if (state === 'failed' || state === 'timed_out') return 'danger'
+  if (state === 'running') return 'primary'
+  if (state === 'cancelled') return 'warning'
+  return 'default'
+}
+</script>
+
+<Card title="Operator history" :subtitle="subtitle()" padding="none">
+  <div :if="loading()" class="px-5 py-10 text-center text-gray-500 text-sm dark:text-neutral-400">Loading operation history</div>
+  <div :if="!loading() && rows().length === 0" class="px-5 py-10 text-center">
+    <p class="font-medium text-gray-900 text-sm dark:text-white">{{ emptyTitle() }}</p>
+    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">{{ emptyDescription() }}</p>
+  </div>
+  <ul :if="rows().length > 0" class="divide-gray-200 divide-y dark:divide-neutral-700">
+    <li :for="operation in rows()" class="flex flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
+      <div class="min-w-0">
+        <div class="flex flex-wrap gap-2 items-center">
+          <p class="font-medium text-gray-900 text-sm dark:text-white">{{ actionLabel(operation) }}</p>
+          <Badge :variant="statusVariant(operation.state)">{{ operation.state }}</Badge>
+        </div>
+        <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ operation.actorName }} at {{ formatDate(operation.finishedAt || operation.createdAt) }}</p>
+        <p :if="operation.error" class="mt-1 text-red-600 text-xs dark:text-red-400">{{ operation.error }}</p>
+      </div>
+      <code class="font-mono text-gray-400 text-[11px] dark:text-neutral-500">{{ operation.id }}</code>
+    </li>
+  </ul>
+</Card>

package/resources/components/Dashboard/Operations/OperationsNavigation.stx

@@ -0,0 +1,32 @@
+<script client>
+const active = useReactiveProp('active', 'scheduler')
+
+function linkClass(name: string): string {
+  return active() === name
+    ? 'bg-white text-gray-900 shadow-sm dark:bg-neutral-700 dark:text-white'
+    : 'text-gray-600 hover:text-gray-900 dark:text-neutral-400 dark:hover:text-white'
+}
+</script>
+
+<nav aria-label="Operations sections" class="overflow-x-auto">
+  <div class="inline-flex gap-1 p-1 min-w-max bg-gray-100 dark:bg-neutral-900 rounded-lg">
+    <StxLink to="/operations/changes" :class="'px-3 py-1.5 font-medium text-sm rounded-md transition-colors ' + linkClass('changes')">
+      Changes
+    </StxLink>
+    <StxLink to="/operations/scheduler" :class="'px-3 py-1.5 font-medium text-sm rounded-md transition-colors ' + linkClass('scheduler')">
+      Scheduler
+    </StxLink>
+    <StxLink to="/operations/recovery" :class="'px-3 py-1.5 font-medium text-sm rounded-md transition-colors ' + linkClass('recovery')">
+      Recovery
+    </StxLink>
+    <StxLink to="/operations/migrations" :class="'px-3 py-1.5 font-medium text-sm rounded-md transition-colors ' + linkClass('migrations')">
+      Migrations
+    </StxLink>
+    <StxLink to="/operations/incidents" :class="'px-3 py-1.5 font-medium text-sm rounded-md transition-colors ' + linkClass('incidents')">
+      Incidents
+    </StxLink>
+    <StxLink to="/operations/audit" :class="'px-3 py-1.5 font-medium text-sm rounded-md transition-colors ' + linkClass('audit')">
+      Audit
+    </StxLink>
+  </div>
+</nav>

package/resources/components/Dashboard/Operations/RecoveryDashboard.stx

@@ -0,0 +1,229 @@
+<script client>
+import type {
+  RecoveryDestinationInput,
+  RecoveryOperationsResponse,
+  RecoveryPoint,
+  RecoveryPolicyInput,
+  RestorePlanInput,
+} from '../../../../functions/operations'
+import {
+  createRecoveryDestination,
+  createRecoveryPolicy,
+  fetchRecoveryOperations,
+  planRecoveryRestore,
+  protectRecoveryPoint,
+  runRecoveryPolicy,
+  runRecoveryRetention,
+  testRecoveryDestination,
+  verifyRecoveryPoint,
+} from '../../../../functions/operations'
+import { pushToast } from '../../../../functions/toasts'
+
+const data = state<RecoveryOperationsResponse | null>(null)
+const isLoading = state(true)
+const loadError = state('')
+const busyId = state('')
+const showDestination = state(false)
+const showPolicy = state(false)
+const destinationBusy = state(false)
+const policyBusy = state(false)
+const restorePoint = state<RecoveryPoint | null>(null)
+const restorePlan = state<{ mode: string, target: Record<string, unknown>, warnings: string[] } | null>(null)
+const restoreBusy = state(false)
+
+function summary(): RecoveryOperationsResponse['summary'] {
+  return data()?.summary || { policies: 0, protected: 0, missedRpo: 0, unverified: 0, queuedJobs: 0, latestPoint: null }
+}
+
+function formatDate(value: string | null): string {
+  if (!value) return 'No recovery point'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime()) ? value : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
+}
+
+async function loadRecovery(): Promise<void> {
+  isLoading.set(true)
+  loadError.set('')
+  try {
+    data.set(await fetchRecoveryOperations())
+  }
+  catch (error) {
+    loadError.set('Recovery operations could not be loaded.')
+    pushToast('error', 'Could not load recovery operations', { detail: String(error) })
+  }
+  finally {
+    isLoading.set(false)
+  }
+}
+
+async function saveDestination(input: RecoveryDestinationInput | CustomEvent<RecoveryDestinationInput>): Promise<void> {
+  destinationBusy.set(true)
+  try {
+    await createRecoveryDestination(input instanceof CustomEvent ? input.detail : input)
+    showDestination.set(false)
+    pushToast('success', 'Recovery destination connected')
+    await loadRecovery()
+  }
+  catch (error) {
+    pushToast('error', 'Could not connect destination', { detail: String(error) })
+  }
+  finally { destinationBusy.set(false) }
+}
+
+async function savePolicy(input: RecoveryPolicyInput | CustomEvent<RecoveryPolicyInput>): Promise<void> {
+  policyBusy.set(true)
+  try {
+    await createRecoveryPolicy(input instanceof CustomEvent ? input.detail : input)
+    showPolicy.set(false)
+    pushToast('success', 'Recovery policy created')
+    await loadRecovery()
+  }
+  catch (error) {
+    pushToast('error', 'Could not create policy', { detail: String(error) })
+  }
+  finally { policyBusy.set(false) }
+}
+
+async function testDestination(id: string): Promise<void> {
+  busyId.set(`${id}:test`)
+  try {
+    const result = await testRecoveryDestination(id)
+    pushToast('success', result.message)
+    await loadRecovery()
+  }
+  catch (error) { pushToast('error', 'Destination test failed', { detail: String(error) }) }
+  finally { busyId.set('') }
+}
+
+async function runPolicy(id: string): Promise<void> {
+  busyId.set(`${id}:run`)
+  try {
+    const result = await runRecoveryPolicy(id)
+    pushToast('success', result.message)
+    await loadRecovery()
+  }
+  catch (error) { pushToast('error', 'Backup could not be queued', { detail: String(error) }) }
+  finally { busyId.set('') }
+}
+
+async function verifyPoint(id: string | CustomEvent<string>): Promise<void> {
+  const pointId = typeof id === 'string' ? id : id.detail
+  busyId.set(`${pointId}:verify`)
+  try {
+    const result = await verifyRecoveryPoint(pointId)
+    pushToast('success', result.message)
+    await loadRecovery()
+  }
+  catch (error) { pushToast('error', 'Verification could not be queued', { detail: String(error) }) }
+  finally { busyId.set('') }
+}
+
+function openRestore(point: RecoveryPoint | CustomEvent<RecoveryPoint>): void {
+  restorePlan.set(null)
+  restorePoint.set(point instanceof CustomEvent ? point.detail : point)
+}
+
+async function restore(input: RestorePlanInput | CustomEvent<RestorePlanInput>): Promise<void> {
+  const value = input instanceof CustomEvent ? input.detail : input
+  const point = restorePoint()
+  if (!point) return
+  restoreBusy.set(true)
+  try {
+    const result = await planRecoveryRestore(point.id, value)
+    restorePlan.set(result.plan)
+    if (result.productionExecutionCreated) {
+      pushToast('success', value.drill ? 'Recovery drill queued' : 'Restore queued')
+      restorePoint.set(null)
+      restorePlan.set(null)
+      await loadRecovery()
+    }
+  }
+  catch (error) { pushToast('error', value.execute ? 'Restore could not be queued' : 'Restore plan is not safe yet', { detail: String(error) }) }
+  finally { restoreBusy.set(false) }
+}
+
+async function protect(detail: { id: string, pinned: boolean } | CustomEvent<{ id: string, pinned: boolean }>): Promise<void> {
+  const value = detail instanceof CustomEvent ? detail.detail : detail
+  busyId.set(`${value.id}:protect`)
+  try {
+    await protectRecoveryPoint(value.id, { pinned: value.pinned })
+    pushToast('success', value.pinned ? 'Recovery point pinned' : 'Recovery point unpinned')
+    await loadRecovery()
+  }
+  catch (error) { pushToast('error', 'Protection could not be updated', { detail: String(error) }) }
+  finally { busyId.set('') }
+}
+
+async function retention(): Promise<void> {
+  busyId.set('retention')
+  try {
+    const result = await runRecoveryRetention()
+    pushToast('success', result.message)
+    await loadRecovery()
+  }
+  catch (error) { pushToast('error', 'Retention could not be queued', { detail: String(error) }) }
+  finally { busyId.set('') }
+}
+
+onMount(() => { void loadRecovery() })
+</script>
+
+<div class="space-y-6">
+  <PageHeader title="Operations" description="Backup coverage, independent verification, restore planning, and recovery drills from the native control plane.">
+    <template #actions>
+      <Button variant="outline" :disabled="isLoading()" @click="showDestination.set(true)">Connect destination</Button>
+      <Button :disabled="isLoading() || (data()?.destinations.length || 0) === 0" @click="showPolicy.set(true)">Create policy</Button>
+      <Button variant="secondary" :loading="isLoading()" @click="loadRecovery"><span :if="!isLoading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+    </template>
+  </PageHeader>
+  <OperationsNavigation active="recovery" />
+
+  <div :if="loadError()" role="alert" class="flex flex-col gap-3 px-4 py-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900 sm:flex-row sm:items-center sm:justify-between"><span>{{ loadError() }}</span><Button size="sm" variant="secondary" @click="loadRecovery">Try again</Button></div>
+
+  <div :if="!isLoading() && (data()?.destinations.length || 0) === 0" class="flex flex-col gap-4 p-5 text-amber-900 dark:text-amber-100 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-xl dark:border-amber-900 sm:flex-row sm:items-center sm:justify-between">
+    <div><p class="font-semibold">No recovery destination is connected</p><p class="mt-1 text-sm">Nothing is protected yet. Connect object storage or AWS Backup, then run its health test before creating policies.</p></div>
+    <Button @click="showDestination.set(true)">Connect destination</Button>
+  </div>
+
+  <section aria-label="Recovery summary" class="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
+    <StatsCard title="Policies" :value="String(summary().policies)" icon="i-hugeicons-shield-02" iconBg="primary" :loading="isLoading()" />
+    <StatsCard title="Protected" :value="String(summary().protected)" icon="i-hugeicons-checkmark-badge-01" iconBg="success" :loading="isLoading()" />
+    <StatsCard title="Missed RPO" :value="String(summary().missedRpo)" icon="i-hugeicons-alert-02" iconBg="danger" :loading="isLoading()" />
+    <StatsCard title="Unverified" :value="String(summary().unverified)" icon="i-hugeicons-search-02" iconBg="warning" :loading="isLoading()" />
+    <StatsCard title="Latest point" :value="formatDate(summary().latestPoint)" icon="i-hugeicons-clock-01" iconBg="neutral" :loading="isLoading()" />
+  </section>
+
+  <section>
+    <div class="flex flex-col gap-3 mb-3 sm:flex-row sm:items-end sm:justify-between">
+      <div><h2 class="font-semibold text-gray-900 dark:text-white">Destinations and policies</h2><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Coverage is healthy only when a destination is healthy and the latest point meets its RPO.</p></div>
+      <Button size="sm" variant="outline" :loading="busyId() === 'retention'" :disabled="busyId() !== ''" @click="retention">Run retention</Button>
+    </div>
+    <div class="grid gap-4 lg:grid-cols-2">
+      <Card title="Destinations" subtitle="Credential material is encrypted and never returned to this page." padding="none">
+        <div :if="(data()?.destinations.length || 0) === 0" class="px-5 py-10 text-center text-gray-500 text-sm dark:text-neutral-400">No destinations connected</div>
+        <ul :if="(data()?.destinations.length || 0) > 0" class="divide-gray-200 divide-y dark:divide-neutral-700">
+          <li :for="destination in data()?.destinations || []" class="flex gap-4 items-center justify-between px-5 py-4">
+            <div><div class="flex gap-2 items-center"><p class="font-medium text-gray-900 text-sm dark:text-white">{{ destination.name }}</p><Badge :variant="destination.status === 'healthy' ? 'success' : destination.status === 'failing' ? 'danger' : 'warning'" dot>{{ destination.status }}</Badge></div><p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ destination.provider }} · {{ destination.bucket || 'Provider vault' }} · {{ destination.region || 'Default region' }}</p></div>
+            <Button size="sm" variant="outline" :loading="busyId() === destination.id + ':test'" :disabled="busyId() !== '' || destination.provider === 'aws_backup'" @click="testDestination(destination.id)">Test</Button>
+          </li>
+        </ul>
+      </Card>
+      <Card title="Policies" :subtitle="data()?.environment ? 'Environment: ' + data()?.environment.name : 'Current environment'" padding="none">
+        <div :if="(data()?.policies.length || 0) === 0" class="px-5 py-10 text-center text-gray-500 text-sm dark:text-neutral-400">No recovery policies configured</div>
+        <ul :if="(data()?.policies.length || 0) > 0" class="divide-gray-200 divide-y dark:divide-neutral-700">
+          <li :for="policy in data()?.policies || []" class="flex gap-4 items-center justify-between px-5 py-4">
+            <div><div class="flex gap-2 items-center"><p class="font-medium text-gray-900 text-sm dark:text-white">{{ policy.name }}</p><Badge :variant="policy.enabled ? 'success' : 'default'">{{ policy.enabled ? 'Enabled' : 'Disabled' }}</Badge></div><p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ policy.resourceKind }} · {{ policy.schedule }} · RPO {{ policy.expectedRpoMinutes }}m · RTO {{ policy.expectedRtoMinutes }}m</p></div>
+            <Button size="sm" :loading="busyId() === policy.id + ':run'" :disabled="busyId() !== '' || !policy.enabled" @click="runPolicy(policy.id)">Back up now</Button>
+          </li>
+        </ul>
+      </Card>
+    </div>
+  </section>
+
+  <section aria-labelledby="recovery-points-heading"><div class="mb-3"><h2 id="recovery-points-heading" class="font-semibold text-gray-900 dark:text-white">Recovery points</h2><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Verify independently, pin important points, or preview isolated and in-place restores.</p></div><RecoveryPointTable :points="data()?.recoveryPoints || []" :policies="data()?.policies || []" :busyId="busyId" @verify="verifyPoint" @restore="openRestore" @protect="protect" /></section>
+  <RecoveryJobList :jobs="data()?.jobs || []" />
+
+  <RecoveryDestinationDialog :isOpen="showDestination()" :busy="destinationBusy()" @close="showDestination.set(false)" @save="saveDestination" />
+  <RecoveryPolicyDialog :isOpen="showPolicy()" :busy="policyBusy()" :destinations="data()?.destinations || []" :resources="data()?.resources || []" :dataServices="data()?.dataServices || []" @close="showPolicy.set(false)" @save="savePolicy" />
+  <RecoveryRestoreDialog :isOpen="restorePoint() !== null" :point="restorePoint()" :points="data()?.recoveryPoints || []" :busy="restoreBusy()" :plan="restorePlan()" @close="restorePoint.set(null); restorePlan.set(null)" @preview="restore" @execute="restore" />
+</div>