From 1e34b1b428f09441e1ac6b50efc80223762ce0df Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sun, 24 May 2026 23:05:04 -0400
Subject: [PATCH] =?UTF-8?q?fc3h(ui):=20BackupConfirmModal.vue=20=E2=80=94?=
 =?UTF-8?q?=20typed-token=20confirmation=20for=20restore=20+=20delete?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../settings/BackupConfirmModal.vue           | 87 +++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 frontend/src/components/settings/BackupConfirmModal.vue

diff --git a/frontend/src/components/settings/BackupConfirmModal.vue b/frontend/src/components/settings/BackupConfirmModal.vue
new file mode 100644
index 0000000..e531aa8
--- /dev/null
+++ b/frontend/src/components/settings/BackupConfirmModal.vue
@@ -0,0 +1,87 @@
+<template>
+  <v-dialog v-model="modelValue" max-width="520" persistent>
+    <v-card>
+      <v-card-title>
+        {{ action === 'restore' ? 'Restore' : 'Delete' }}
+        {{ kind === 'db' ? 'database' : 'images' }} backup #{{ runId }}
+      </v-card-title>
+      <v-card-text>
+        <v-alert
+          :type="action === 'restore' ? 'warning' : 'error'"
+          variant="tonal" density="compact" class="mb-3"
+        >
+          <strong>{{ warningText }}</strong>
+          <div class="mt-1">{{ description }}</div>
+        </v-alert>
+
+        <div class="text-body-2 mb-2">
+          Type the following to confirm:
+        </div>
+        <div class="fc-token mb-3">{{ expectedToken }}</div>
+
+        <v-text-field
+          v-model="typed"
+          variant="outlined" density="compact" hide-details
+          autofocus
+          placeholder="paste the token above"
+        />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" @click="onCancel">Cancel</v-btn>
+        <v-btn
+          :color="action === 'restore' ? 'warning' : 'error'"
+          variant="flat" rounded="pill"
+          :disabled="typed !== expectedToken"
+          @click="onConfirm"
+        >
+          {{ action === 'restore' ? 'Restore' : 'Delete' }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  modelValue: { type: Boolean, required: true },
+  action: { type: String, required: true },   // 'restore' | 'delete'
+  kind: { type: String, required: true },     // 'db' | 'images'
+  runId: { type: Number, required: true },
+  description: { type: String, default: '' },
+})
+const emit = defineEmits(['update:modelValue', 'confirm'])
+
+const typed = ref('')
+const expectedToken = computed(
+  () => `${props.action}-${props.kind}-${props.runId}`,
+)
+const warningText = computed(() => (
+  props.action === 'restore'
+    ? 'This replaces current state with the backup. There is no undo.'
+    : 'This deletes the backup record + on-disk files. Cannot be recovered.'
+))
+
+watch(() => props.modelValue, (open) => {
+  if (open) typed.value = ''
+})
+
+function onCancel() {
+  emit('update:modelValue', false)
+}
+function onConfirm() {
+  emit('confirm', expectedToken.value)
+  emit('update:modelValue', false)
+}
+</script>
+
+<style scoped>
+.fc-token {
+  font-family: 'JetBrains Mono', monospace;
+  background: rgb(var(--v-theme-surface-light));
+  padding: 6px 10px; border-radius: 4px;
+  font-size: 14px; word-break: break-all;
+}
+</style>