@stacksjs/defaults 0.70.366 → 0.70.368

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

@@ -0,0 +1,126 @@
+<script client>
+import type { RecoveryDestinationInput } from '../../../../functions/operations'
+
+const open = useReactiveProp('isOpen', false)
+const busy = useReactiveProp('busy', false)
+const emit = defineEmits()
+
+const name = state('')
+const provider = state<RecoveryDestinationInput['provider']>('aws_s3')
+const bucket = state('')
+const endpoint = state('')
+const prefix = state('stacks')
+const region = state('')
+const accessKeyId = state('')
+const secretAccessKey = state('')
+const sessionToken = state('')
+const encryption = state<RecoveryDestinationInput['encryption']>('provider')
+const encryptionKey = state('')
+const lockDays = state(0)
+const allowPrivate = state(false)
+const forcePathStyle = state(false)
+
+function close(): void {
+  if (!busy())
+    emit('close')
+}
+
+function submit(): void {
+  emit('save', {
+    name: name().trim(),
+    provider: provider(),
+    bucket: bucket().trim(),
+    endpoint: endpoint().trim(),
+    prefix: prefix().trim(),
+    region: region().trim(),
+    allowPrivate: allowPrivate(),
+    forcePathStyle: forcePathStyle(),
+    encryption: encryption(),
+    encryptionKey: encryptionKey(),
+    lockDays: lockDays(),
+    credentials: {
+      accessKeyId: accessKeyId().trim(),
+      secretAccessKey: secretAccessKey(),
+      sessionToken: sessionToken(),
+    },
+  } satisfies RecoveryDestinationInput)
+}
+</script>
+
+<Modal :isOpen="open()" title="Connect recovery destination" description="Backups are only protected after the destination passes a real write, read, checksum, and cleanup test." size="lg" :closable="!busy()" @close="close">
+  <form id="recovery-destination-form" class="space-y-4" @submit.prevent="submit">
+    <div class="grid gap-4 sm:grid-cols-2">
+      <div>
+        <label for="recovery-destination-name" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">Name</label>
+        <input id="recovery-destination-name" x-model.trim="name" required placeholder="Production backups" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700" />
+      </div>
+      <div>
+        <label for="recovery-destination-provider" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">Provider</label>
+        <select id="recovery-destination-provider" x-model="provider" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700">
+          <option value="aws_s3">AWS S3</option>
+          <option value="s3_compatible">S3 compatible</option>
+          <option value="aws_backup">AWS Backup</option>
+        </select>
+      </div>
+    </div>
+
+    <div :if="provider() !== 'aws_backup'" class="grid gap-4 sm:grid-cols-2">
+      <div>
+        <label for="recovery-destination-bucket" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">Bucket</label>
+        <input id="recovery-destination-bucket" x-model.trim="bucket" required placeholder="stacks-production-backups" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700" />
+      </div>
+      <div>
+        <label for="recovery-destination-region" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">Region</label>
+        <input id="recovery-destination-region" x-model.trim="region" placeholder="us-east-1" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700" />
+      </div>
+      <div>
+        <label for="recovery-destination-prefix" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">Object prefix</label>
+        <input id="recovery-destination-prefix" x-model.trim="prefix" placeholder="stacks" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700" />
+      </div>
+      <div :if="provider() === 's3_compatible'">
+        <label for="recovery-destination-endpoint" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">HTTPS endpoint</label>
+        <input id="recovery-destination-endpoint" x-model.trim="endpoint" type="url" placeholder="https://objects.example.com" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700" />
+      </div>
+    </div>
+
+    <details :if="provider() !== 'aws_backup'" class="p-4 bg-gray-50 dark:bg-neutral-900/60 border border-gray-200 rounded-lg dark:border-neutral-700">
+      <summary class="font-medium text-gray-900 text-sm cursor-pointer dark:text-white">Static credentials, optional</summary>
+      <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">Leave blank to use the runtime's AWS credential chain. Submitted credentials are encrypted in the control plane.</p>
+      <div class="grid gap-4 mt-4 sm:grid-cols-2">
+        <input x-model.trim="accessKeyId" autocomplete="off" placeholder="Access key id" aria-label="Access key id" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700" />
+        <input x-model="secretAccessKey" type="password" autocomplete="new-password" placeholder="Secret access key" aria-label="Secret access key" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700" />
+        <input x-model="sessionToken" type="password" autocomplete="new-password" placeholder="Session token, optional" aria-label="Session token" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700 sm:col-span-2" />
+      </div>
+    </details>
+
+    <div class="grid gap-4 sm:grid-cols-2">
+      <div>
+        <label for="recovery-destination-encryption" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">Encryption</label>
+        <select id="recovery-destination-encryption" x-model="encryption" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700">
+          <option value="provider">Provider managed</option>
+          <option value="client_side">Client side</option>
+          <option value="both">Both</option>
+        </select>
+      </div>
+      <div>
+        <label for="recovery-destination-lock" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">Immutable retention days</label>
+        <input id="recovery-destination-lock" x-model.number="lockDays" type="number" min="0" max="36500" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700" />
+      </div>
+    </div>
+    <div :if="encryption() !== 'provider'">
+      <label for="recovery-destination-key" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">Client encryption key</label>
+      <input id="recovery-destination-key" x-model="encryptionKey" type="password" minlength="32" autocomplete="new-password" required class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700" />
+      <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">At least 32 characters. Keep an independent recovery copy outside this control plane.</p>
+    </div>
+    <div :if="provider() === 's3_compatible'" class="flex flex-wrap gap-4">
+      <label class="inline-flex gap-2 items-center text-gray-700 text-sm dark:text-neutral-200"><input x-model="forcePathStyle" type="checkbox" /> Force path-style URLs</label>
+      <label class="inline-flex gap-2 items-center text-gray-700 text-sm dark:text-neutral-200"><input x-model="allowPrivate" type="checkbox" /> Allow private endpoint</label>
+    </div>
+  </form>
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
+      <Button variant="secondary" :disabled="busy()" @click="close">Cancel</Button>
+      <Button type="submit" form="recovery-destination-form" :loading="busy()">Connect destination</Button>
+    </div>
+  </template>
+</Modal>

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

@@ -0,0 +1,32 @@
+<script client>
+import type { RecoveryJob } from '../../../../functions/operations'
+
+const jobItems = useReactiveProp('jobs', [])
+function jobs(): RecoveryJob[] { return jobItems() as RecoveryJob[] }
+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 variant(status: RecoveryJob['status']): 'default' | 'primary' | 'success' | 'warning' | 'danger' {
+  if (status === 'succeeded') return 'success'
+  if (status === 'failed' || status === 'cleanup_required') return 'danger'
+  if (status === 'running') return 'primary'
+  if (status === 'cancelled') return 'warning'
+  return 'default'
+}
+</script>
+
+<Card title="Recovery jobs" subtitle="Durable backup, verification, restore, drill, and retention work." padding="none">
+  <div :if="jobs().length === 0" class="px-5 py-10 text-center text-gray-500 text-sm dark:text-neutral-400">No recovery jobs queued</div>
+  <ul :if="jobs().length > 0" class="divide-gray-200 divide-y dark:divide-neutral-700">
+    <li :for="job in jobs().slice(0, 12)" class="flex flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
+      <div>
+        <div class="flex gap-2 items-center"><p class="font-medium text-gray-900 text-sm capitalize dark:text-white">{{ job.kind }}</p><Badge :variant="variant(job.status)">{{ job.status }}</Badge></div>
+        <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ job.progress.phase || 'queued' }} · {{ formatDate(job.finishedAt || job.startedAt || job.createdAt) }}</p>
+        <p :if="job.error" class="mt-1 text-red-600 text-xs dark:text-red-400">{{ job.error }}</p>
+      </div>
+      <code class="font-mono text-gray-400 text-[11px] dark:text-neutral-500">{{ job.id }}</code>
+    </li>
+  </ul>
+</Card>

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

@@ -0,0 +1,82 @@
+<script client>
+import type { RecoveryPoint, RecoveryPolicy } from '../../../../functions/operations'
+
+const pointItems = useReactiveProp('points', [])
+const policyItems = useReactiveProp('policies', [])
+const busyId = useReactiveProp('busyId', '')
+const emit = defineEmits()
+
+function points(): RecoveryPoint[] { return pointItems() as RecoveryPoint[] }
+function policies(): RecoveryPolicy[] { return policyItems() as RecoveryPolicy[] }
+
+function policyName(id?: string): string {
+  return policies().find(policy => policy.id === id)?.name || 'Manual recovery point'
+}
+
+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 formatBytes(value: number): string {
+  if (!value) return 'Provider managed'
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  const index = Math.min(Math.floor(Math.log(value) / Math.log(1024)), units.length - 1)
+  return `${(value / 1024 ** index).toFixed(index === 0 ? 0 : 1)} ${units[index]}`
+}
+
+function verificationVariant(state: RecoveryPoint['verificationState']): 'default' | 'primary' | 'success' | 'warning' | 'danger' {
+  if (state === 'verified') return 'success'
+  if (state === 'corrupt' || state === 'failed') return 'danger'
+  if (state === 'verifying') return 'primary'
+  return 'warning'
+}
+</script>
+
+<div class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700">
+  <div :if="points().length === 0" class="px-5 py-14 text-center">
+    <span aria-hidden="true" class="block mb-3 mx-auto h-9 w-9 text-gray-400 i-hugeicons-database-restore"></span>
+    <p class="font-semibold text-gray-900 dark:text-white">No recovery points yet</p>
+    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Create and run a recovery policy to produce the first independently verifiable point.</p>
+  </div>
+  <div :if="points().length > 0" class="overflow-x-auto">
+    <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+      <thead class="bg-gray-50 dark:bg-neutral-700/50">
+        <tr>
+          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Recovery point</th>
+          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Created</th>
+          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Verification</th>
+          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Protection</th>
+          <th class="px-4 py-3"><span class="sr-only">Actions</span></th>
+        </tr>
+      </thead>
+      <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
+        <template :for="point in points()">
+          <tr>
+            <td class="px-4 py-3">
+              <p class="font-medium text-gray-900 text-sm dark:text-white">{{ policyName(point.policyId) }}</p>
+              <p class="mt-0.5 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ point.id }} · {{ point.kind }} · {{ formatBytes(point.sizeBytes) }}</p>
+            </td>
+            <td class="px-4 py-3 text-gray-600 text-sm whitespace-nowrap dark:text-neutral-300">{{ formatDate(point.pointInTime) }}</td>
+            <td class="px-4 py-3"><Badge :variant="verificationVariant(point.verificationState)" dot>{{ point.verificationState }}</Badge></td>
+            <td class="px-4 py-3">
+              <div class="flex flex-wrap gap-1.5">
+                <Badge :if="point.pinned" variant="primary">Pinned</Badge>
+                <Badge :if="point.held" variant="warning">Held</Badge>
+                <span :if="!point.pinned && !point.held" class="text-gray-500 text-xs dark:text-neutral-400">Retention policy</span>
+              </div>
+            </td>
+            <td class="px-4 py-3 text-right whitespace-nowrap">
+              <div class="inline-flex gap-2 items-center">
+                <Button size="sm" :disabled="busyId() !== '' || point.status !== 'available'" :loading="busyId() === point.id + ':verify'" @click="emit('verify', point.id)">Verify</Button>
+                <Button size="sm" variant="outline" :disabled="busyId() !== '' || point.status !== 'available' || point.verificationState !== 'verified'" @click="emit('restore', point)">Restore</Button>
+                <Button size="sm" variant="ghost" :disabled="busyId() !== ''" :loading="busyId() === point.id + ':protect'" @click="emit('protect', { id: point.id, pinned: !point.pinned })">{{ point.pinned ? 'Unpin' : 'Pin' }}</Button>
+              </div>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</div>

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

@@ -0,0 +1,155 @@
+<script client>
+import type { BackupResourceKind, RecoveryDataService, RecoveryDestination, RecoveryPolicyInput, RecoveryResource } from '../../../../functions/operations'
+
+const open = useReactiveProp('isOpen', false)
+const busy = useReactiveProp('busy', false)
+const destinationItems = useReactiveProp('destinations', [])
+const resourceItems = useReactiveProp('resources', [])
+const serviceItems = useReactiveProp('dataServices', [])
+const emit = defineEmits()
+
+const name = state('')
+const destinationId = state('')
+const resourceKind = state<BackupResourceKind>('control_plane')
+const resourceId = state('')
+const dataServiceId = state('')
+const includePatterns = state('')
+const excludePatterns = state('storage/framework/runtime,storage/framework/stx')
+const schedule = state('daily')
+const timezone = state('UTC')
+const keepLast = state(7)
+const expireAfterDays = state(30)
+const expectedRpoMinutes = state(1440)
+const expectedRtoMinutes = state(120)
+const compression = state<RecoveryPolicyInput['compression']>('gzip')
+const enabled = state(true)
+
+function destinations(): RecoveryDestination[] { return destinationItems() as RecoveryDestination[] }
+function resources(): RecoveryResource[] { return resourceItems() as RecoveryResource[] }
+function dataServices(): RecoveryDataService[] { return serviceItems() as RecoveryDataService[] }
+
+function close(): void {
+  if (!busy()) emit('close')
+}
+
+function split(value: string): string[] {
+  return value.split(',').map(entry => entry.trim()).filter(Boolean)
+}
+
+function submit(): void {
+  emit('save', {
+    name: name().trim(),
+    destinationId: destinationId(),
+    resourceKind: resourceKind(),
+    resourceId: resourceId() || undefined,
+    dataServiceId: dataServiceId() || undefined,
+    includePatterns: split(includePatterns()),
+    excludePatterns: split(excludePatterns()),
+    schedule: schedule().trim(),
+    timezone: timezone().trim(),
+    keepLast: keepLast(),
+    expireAfterDays: expireAfterDays(),
+    compression: compression(),
+    expectedRpoMinutes: expectedRpoMinutes(),
+    expectedRtoMinutes: expectedRtoMinutes(),
+    enabled: enabled(),
+  } satisfies RecoveryPolicyInput)
+}
+</script>
+
+<Modal :isOpen="open()" title="Create recovery policy" description="Define the source once. The native recovery queue handles scheduled and on-demand runs." size="lg" :closable="!busy()" @close="close">
+  <form id="recovery-policy-form" class="space-y-4" @submit.prevent="submit">
+    <div class="grid gap-4 sm:grid-cols-2">
+      <div>
+        <label for="recovery-policy-name" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">Policy name</label>
+        <input id="recovery-policy-name" x-model.trim="name" required placeholder="Daily control plane" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700" />
+      </div>
+      <div>
+        <label for="recovery-policy-destination" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">Destination</label>
+        <select id="recovery-policy-destination" x-model="destinationId" required class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700">
+          <option value="">Choose destination</option>
+          <option :for="destination in destinations()" :value="destination.id">{{ destination.name }} ({{ destination.status }})</option>
+        </select>
+      </div>
+      <div>
+        <label for="recovery-policy-kind" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">Source type</label>
+        <select id="recovery-policy-kind" x-model="resourceKind" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700">
+          <option value="control_plane">Control plane</option>
+          <option value="files">Project files</option>
+          <option value="logical_database">Logical database</option>
+          <option value="managed_database">Managed database</option>
+          <option value="volume">Docker volume</option>
+          <option value="infrastructure">AWS infrastructure</option>
+        </select>
+      </div>
+      <div :if="resourceKind() === 'files' || resourceKind() === 'volume'">
+        <label for="recovery-policy-resource" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">Resource</label>
+        <select id="recovery-policy-resource" x-model="resourceId" required class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700">
+          <option value="">Choose resource</option>
+          <option :for="resource in resources()" :value="resource.id">{{ resource.name }} ({{ resource.kind }})</option>
+        </select>
+      </div>
+      <div :if="resourceKind() === 'logical_database' || resourceKind() === 'managed_database'">
+        <label for="recovery-policy-service" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">Data service</label>
+        <select id="recovery-policy-service" x-model="dataServiceId" required class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700">
+          <option value="">Choose data service</option>
+          <option :for="service in dataServices()" :value="service.id">{{ service.name }} ({{ service.engine }})</option>
+        </select>
+      </div>
+    </div>
+
+    <div :if="resourceKind() === 'files' || resourceKind() === 'volume' || resourceKind() === 'infrastructure'">
+      <label for="recovery-policy-includes" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">Include entries</label>
+      <input id="recovery-policy-includes" x-model.trim="includePatterns" required placeholder="storage/app,public/uploads" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700" />
+      <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">Comma separated. Volumes use a volume name. Infrastructure uses resource:arn: and role:arn: entries.</p>
+    </div>
+    <div :if="resourceKind() === 'files'">
+      <label for="recovery-policy-excludes" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">Exclude patterns</label>
+      <input id="recovery-policy-excludes" x-model.trim="excludePatterns" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700" />
+    </div>
+
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <div>
+        <label for="recovery-policy-schedule" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">Schedule</label>
+        <input id="recovery-policy-schedule" x-model.trim="schedule" required placeholder="daily" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700" />
+      </div>
+      <div>
+        <label for="recovery-policy-timezone" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">Timezone</label>
+        <input id="recovery-policy-timezone" x-model.trim="timezone" required class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700" />
+      </div>
+      <div>
+        <label for="recovery-policy-rpo" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">RPO minutes</label>
+        <input id="recovery-policy-rpo" x-model.number="expectedRpoMinutes" type="number" min="1" required class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700" />
+      </div>
+      <div>
+        <label for="recovery-policy-rto" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">RTO minutes</label>
+        <input id="recovery-policy-rto" x-model.number="expectedRtoMinutes" type="number" min="1" required class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700" />
+      </div>
+    </div>
+    <div class="grid gap-4 sm:grid-cols-3">
+      <div>
+        <label for="recovery-policy-keep" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">Keep latest</label>
+        <input id="recovery-policy-keep" x-model.number="keepLast" type="number" min="1" required class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700" />
+      </div>
+      <div>
+        <label for="recovery-policy-expire" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">Expire after days</label>
+        <input id="recovery-policy-expire" x-model.number="expireAfterDays" type="number" min="1" required class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700" />
+      </div>
+      <div>
+        <label for="recovery-policy-compression" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">Compression</label>
+        <select id="recovery-policy-compression" x-model="compression" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700">
+          <option value="gzip">Gzip</option>
+          <option value="zstd">Zstandard</option>
+          <option value="none">None</option>
+        </select>
+      </div>
+    </div>
+    <label class="inline-flex gap-2 items-center text-gray-700 text-sm dark:text-neutral-200"><input x-model="enabled" type="checkbox" /> Enable scheduled runs</label>
+  </form>
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
+      <Button variant="secondary" :disabled="busy()" @click="close">Cancel</Button>
+      <Button type="submit" form="recovery-policy-form" :loading="busy()" :disabled="destinations().length === 0">Create policy</Button>
+    </div>
+  </template>
+</Modal>

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

@@ -0,0 +1,90 @@
+<script client>
+import type { RecoveryPoint, RestorePlanInput } from '../../../../functions/operations'
+
+const open = useReactiveProp('isOpen', false)
+const pointValue = useReactiveProp('point', null)
+const pointItems = useReactiveProp('points', [])
+const busy = useReactiveProp('busy', false)
+const planValue = useReactiveProp('plan', null)
+const emit = defineEmits()
+
+const mode = state<'isolated' | 'in_place'>('isolated')
+const targetName = state('')
+const drill = state(false)
+const downtimeAcknowledged = state(false)
+const confirm = state('')
+const safetyBackupId = state('')
+
+function point(): RecoveryPoint | null { return pointValue() as RecoveryPoint | null }
+function points(): RecoveryPoint[] { return pointItems() as RecoveryPoint[] }
+function plan(): { warnings?: string[] } | null { return planValue() as { warnings?: string[] } | null }
+
+function close(): void {
+  if (!busy()) emit('close')
+}
+
+function input(execute: boolean): RestorePlanInput {
+  return {
+    mode: mode(),
+    targetName: targetName().trim(),
+    drill: drill(),
+    execute,
+    confirm: confirm().trim(),
+    downtimeAcknowledged: downtimeAcknowledged(),
+    safetyBackupId: safetyBackupId() || undefined,
+  }
+}
+
+function preview(): void { emit('preview', input(false)) }
+function execute(): void { emit('execute', input(true)) }
+</script>
+
+<Modal :isOpen="open()" title="Restore recovery point" description="Preview is mandatory. Isolated restores are the default and can run as disposable recovery drills." size="lg" :closable="!busy()" @close="close">
+  <div class="space-y-4">
+    <div class="p-3 bg-gray-50 dark:bg-neutral-900/60 border border-gray-200 rounded-lg dark:border-neutral-700">
+      <p class="font-medium text-gray-900 text-sm dark:text-white">{{ point()?.id || 'Recovery point' }}</p>
+      <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ point()?.kind }} · {{ point()?.verificationState }}</p>
+    </div>
+    <div class="grid gap-4 sm:grid-cols-2">
+      <div>
+        <label for="restore-mode" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">Mode</label>
+        <select id="restore-mode" x-model="mode" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700">
+          <option value="isolated">Isolated target</option>
+          <option value="in_place">In-place replacement</option>
+        </select>
+      </div>
+      <div>
+        <label for="restore-target" class="block mb-1.5 font-medium text-gray-700 text-sm dark:text-neutral-200">Target name</label>
+        <input id="restore-target" x-model.trim="targetName" required placeholder="recovery-check-2026-08" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-lg dark:border-neutral-700" />
+      </div>
+    </div>
+    <label :if="mode() === 'isolated'" class="inline-flex gap-2 items-center text-gray-700 text-sm dark:text-neutral-200"><input x-model="drill" type="checkbox" /> Run as a recovery drill and clean the isolated target after health validation</label>
+    <div :if="mode() === 'in_place'" class="space-y-4 p-4 text-amber-900 dark:text-amber-100 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-lg dark:border-amber-900">
+      <p class="font-medium text-sm">In-place restore replaces live data and requires a distinct verified safety point.</p>
+      <div>
+        <label for="restore-safety" class="block mb-1.5 font-medium text-sm">Safety recovery point</label>
+        <select id="restore-safety" x-model="safetyBackupId" required class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-amber-300 rounded-lg dark:border-amber-800">
+          <option value="">Choose verified safety point</option>
+          <option :for="candidate in points().filter(value => value.id !== point()?.id && value.verificationState === 'verified')" :value="candidate.id">{{ candidate.id }}</option>
+        </select>
+      </div>
+      <label class="inline-flex gap-2 items-center text-sm"><input x-model="downtimeAcknowledged" type="checkbox" /> I acknowledge downtime and live data replacement</label>
+      <div>
+        <label for="restore-confirm" class="block mb-1.5 font-medium text-sm">Type the target name to confirm</label>
+        <input id="restore-confirm" x-model.trim="confirm" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-amber-300 rounded-lg dark:border-amber-800" />
+      </div>
+    </div>
+    <div :if="plan()" class="p-4 text-blue-800 text-sm dark:text-blue-200 bg-blue-50 dark:bg-blue-950/30 border border-blue-200 rounded-lg dark:border-blue-900">
+      <p class="font-medium">Restore plan validated</p>
+      <ul :if="plan()?.warnings?.length" class="mt-2 pl-5 list-disc"><li :for="warning in plan()?.warnings">{{ warning }}</li></ul>
+      <p :if="!plan()?.warnings?.length" class="mt-1">No additional warnings were returned.</p>
+    </div>
+  </div>
+  <template #footer>
+    <div class="flex flex-wrap gap-2 justify-end w-full">
+      <Button variant="secondary" :disabled="busy()" @click="close">Cancel</Button>
+      <Button variant="outline" :loading="busy() && !plan()" :disabled="!targetName().trim()" @click="preview">Preview restore</Button>
+      <Button :if="plan()" :loading="busy()" @click="execute">Queue restore</Button>
+    </div>
+  </template>
+</Modal>

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

@@ -0,0 +1,144 @@
+<script client>
+import type { OperatorOperation, SchedulerOperationsResponse, SchedulerTask } from '../../../../functions/operations'
+import { fetchSchedulerOperations, runSchedulerTask, updateSchedulerTask } from '../../../../functions/operations'
+import { pushToast } from '../../../../functions/toasts'
+
+interface PendingAction {
+  name: string
+  action: 'run' | 'toggle'
+  enabled?: boolean
+}
+
+const tasks = state<SchedulerTask[]>([])
+const operations = state<OperatorOperation[]>([])
+const summary = state<SchedulerOperationsResponse['summary']>({ total: 0, active: 0, paused: 0, nextRun: null })
+const isLoading = state(true)
+const loadError = state('')
+const busyTask = state('')
+const pendingAction = state<PendingAction | null>(null)
+
+function formatDate(value: string | null): string {
+  if (!value)
+    return 'Nothing scheduled'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime())
+    ? value
+    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
+}
+
+async function loadOperations(): Promise<void> {
+  isLoading.set(true)
+  loadError.set('')
+  try {
+    const result = await fetchSchedulerOperations()
+    tasks.set(result.tasks)
+    operations.set(result.operations)
+    summary.set(result.summary)
+  }
+  catch (error) {
+    loadError.set('Scheduler operations could not be loaded.')
+    pushToast('error', 'Could not load scheduler operations', { detail: String(error) })
+  }
+  finally {
+    isLoading.set(false)
+  }
+}
+
+function requestRun(name: string | CustomEvent<string>): void {
+  pendingAction.set({ name: typeof name === 'string' ? name : name.detail, action: 'run' })
+}
+
+function requestToggle(detail: { name: string, enabled: boolean } | CustomEvent<{ name: string, enabled: boolean }>): void {
+  const value = detail instanceof CustomEvent ? detail.detail : detail
+  pendingAction.set({ name: value.name, action: 'toggle', enabled: value.enabled })
+}
+
+function closeConfirmation(): void {
+  if (!busyTask())
+    pendingAction.set(null)
+}
+
+async function confirmAction(): Promise<void> {
+  const pending = pendingAction()
+  if (!pending)
+    return
+
+  busyTask.set(`${pending.name}:${pending.action}`)
+  try {
+    const result = pending.action === 'run'
+      ? await runSchedulerTask(pending.name)
+      : await updateSchedulerTask(pending.name, pending.enabled === true)
+    pushToast('success', result.message)
+    pendingAction.set(null)
+    await loadOperations()
+  }
+  catch (error) {
+    pushToast('error', 'Scheduler operation failed', { detail: String(error) })
+  }
+  finally {
+    busyTask.set('')
+  }
+}
+
+onMount(() => {
+  void loadOperations()
+})
+</script>
+
+<div class="space-y-6">
+  <PageHeader title="Operations" description="Run and control application schedules through the same registry used by Buddy.">
+    <template #actions>
+      <Button variant="secondary" :loading="isLoading()" @click="loadOperations">
+        <span :if="!isLoading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>
+        Refresh
+      </Button>
+    </template>
+  </PageHeader>
+
+  <OperationsNavigation active="scheduler" />
+
+  <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="loadOperations">Try again</Button>
+  </div>
+
+  <section aria-label="Scheduler summary" class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+    <StatsCard title="Registered tasks" :value="String(summary().total)" icon="i-hugeicons-calendar-03" iconBg="primary" :loading="isLoading()" />
+    <StatsCard title="Active" :value="String(summary().active)" icon="i-hugeicons-play" iconBg="success" :loading="isLoading()" />
+    <StatsCard title="Paused" :value="String(summary().paused)" icon="i-hugeicons-pause" iconBg="warning" :loading="isLoading()" />
+    <StatsCard title="Next run" :value="formatDate(summary().nextRun)" icon="i-hugeicons-clock-01" iconBg="neutral" :loading="isLoading()" />
+  </section>
+
+  <section aria-labelledby="scheduled-tasks-heading">
+    <div class="mb-3">
+      <h2 id="scheduled-tasks-heading" class="font-semibold text-gray-900 dark:text-white">Scheduled tasks</h2>
+      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Pauses persist across scheduler processes. Manual runs use normal overlap and error guards.</p>
+    </div>
+    <SchedulerTaskTable
+      :tasks="tasks"
+      :loading="isLoading"
+      :busyTask="busyTask"
+      @run="requestRun"
+      @toggle="requestToggle"
+    />
+  </section>
+
+  <OperationHistory
+    :operations="operations"
+    :loading="isLoading"
+    subtitle="Every scheduler mutation is recorded in the append-only control plane."
+    emptyTitle="No scheduler operations recorded"
+    emptyDescription="Run, pause, or resume a task to create the first audit entry."
+  />
+
+  <ConfirmDialog
+    :isOpen="pendingAction() !== null"
+    :title="pendingAction()?.action === 'run' ? 'Run scheduled task?' : (pendingAction()?.enabled ? 'Resume scheduled task?' : 'Pause scheduled task?')"
+    :description="pendingAction()?.action === 'run' ? 'This executes the task immediately through its configured guards.' : 'This changes the persisted scheduler state without editing application source.'"
+    :confirmLabel="pendingAction()?.action === 'run' ? 'Run now' : (pendingAction()?.enabled ? 'Resume' : 'Pause')"
+    variant="warning"
+    :busy="busyTask() !== ''"
+    @close="closeConfirmation"
+    @confirm="confirmAction"
+  />
+</div>