From a9b354780bb8a95b54792a536cd8953f90192b70 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Fri, 22 May 2026 09:04:24 -0400
Subject: [PATCH] =?UTF-8?q?fc5:=20LegacyMigrationCard=20=E2=80=94=20file?=
 =?UTF-8?q?=20uploads=20+=20step=20buttons=20+=20active-run=20+=20history;?=
 =?UTF-8?q?=20slotted=20into=20MaintenancePanel?=
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/LegacyMigrationCard.vue          | 245 ++++++++++++++++++
 .../components/settings/MaintenancePanel.vue  |   2 +
 2 files changed, 247 insertions(+)
 create mode 100644 frontend/src/components/settings/LegacyMigrationCard.vue

diff --git a/frontend/src/components/settings/LegacyMigrationCard.vue b/frontend/src/components/settings/LegacyMigrationCard.vue
new file mode 100644
index 0000000..be2dfd1
--- /dev/null
+++ b/frontend/src/components/settings/LegacyMigrationCard.vue
@@ -0,0 +1,245 @@
+<template>
+  <v-card>
+    <v-card-title>Legacy migration</v-card-title>
+    <v-card-text>
+      <p class="text-body-2 mb-3">
+        Migrate existing ImageRepo and GallerySubscriber data into FabledCurator.
+        Each app produces a JSON export file via a small script in its own repo
+        (<code>scripts/export_for_fabledcurator.py</code>); upload both files
+        here and run the steps in order.
+      </p>
+
+      <ol class="text-body-2 mb-3 fc-migrate__hints">
+        <li>Backup FC (creates a pre-migration snapshot).</li>
+        <li>Upload + ingest GS export.</li>
+        <li>Upload + ingest IR export.</li>
+        <li>Switch to <strong>Import tab</strong> → trigger the existing FC filesystem scan over the bind-mounted IR images dir.</li>
+        <li>Return here → apply IR tag associations (joins by sha256).</li>
+        <li>Queue ML re-processing.</li>
+        <li>Verify.</li>
+      </ol>
+
+      <div class="fc-migrate__uploads">
+        <v-file-input
+          v-model="gsFile"
+          label="GallerySubscriber export (gs-export.json)"
+          accept="application/json,.json"
+          density="compact"
+          show-size
+          prepend-icon="mdi-upload"
+        />
+        <v-file-input
+          v-model="irFile"
+          label="ImageRepo export (ir-export.json)"
+          accept="application/json,.json"
+          density="compact"
+          show-size
+          prepend-icon="mdi-upload"
+        />
+      </div>
+
+      <div class="fc-migrate__steps mt-3">
+        <v-btn
+          color="accent" variant="tonal" prepend-icon="mdi-content-save"
+          :disabled="store.isRunning"
+          @click="onBackup"
+        >1. Backup FC</v-btn>
+        <v-btn
+          color="primary" variant="tonal" prepend-icon="mdi-database-arrow-right"
+          :disabled="store.isRunning || !gsFile"
+          @click="onIngestGs"
+        >2. Ingest GS</v-btn>
+        <v-btn
+          color="primary" variant="tonal" prepend-icon="mdi-database-arrow-right"
+          :disabled="store.isRunning || !irFile"
+          @click="onIngestIr"
+        >3. Ingest IR</v-btn>
+        <v-btn
+          color="primary" variant="tonal" prepend-icon="mdi-tag-multiple"
+          :disabled="store.isRunning"
+          @click="onTagApply"
+        >5. Apply IR tags</v-btn>
+        <v-btn
+          variant="outlined" prepend-icon="mdi-brain"
+          :disabled="store.isRunning"
+          @click="onMlQueue"
+        >6. Queue ML</v-btn>
+        <v-btn
+          variant="outlined" prepend-icon="mdi-check-circle"
+          :disabled="store.isRunning"
+          @click="onVerify"
+        >7. Verify</v-btn>
+      </div>
+
+      <v-btn
+        color="error" variant="outlined" prepend-icon="mdi-restore" class="mt-3"
+        :disabled="store.isRunning"
+        @click="onRollback"
+      >Rollback to pre-migration backup</v-btn>
+
+      <v-alert v-if="store.error" type="error" variant="tonal" class="mt-3" closable>
+        {{ String(store.error) }}
+      </v-alert>
+
+      <v-card v-if="store.activeRun" variant="outlined" class="mt-4">
+        <v-card-text>
+          <div class="text-subtitle-2">
+            #{{ store.activeRun.id }} — {{ store.activeRun.kind }}
+            ({{ store.activeRun.status }})
+          </div>
+          <v-progress-linear
+            v-if="store.isRunning" indeterminate color="accent" class="my-2"
+          />
+          <div class="text-caption">
+            Rows: {{ store.activeRun.counts.rows_processed || 0 }} processed,
+            {{ store.activeRun.counts.rows_inserted || 0 }} inserted,
+            {{ store.activeRun.counts.rows_skipped || 0 }} skipped.
+            Conflicts: {{ store.activeRun.counts.conflicts || 0 }}.
+          </div>
+          <div v-if="store.activeRun.error" class="text-error mt-1">
+            {{ store.activeRun.error }}
+          </div>
+        </v-card-text>
+      </v-card>
+
+      <div v-if="store.recentRuns.length" class="mt-4">
+        <div class="text-subtitle-2 mb-2">Recent runs</div>
+        <ul class="fc-migrate__history">
+          <li v-for="r in store.recentRuns" :key="r.id">
+            #{{ r.id }} {{ r.kind }}
+            <v-chip
+              size="x-small"
+              :color="r.status === 'ok' ? 'success' : (r.status === 'error' ? 'error' : undefined)"
+            >{{ r.status }}</v-chip>
+            <span class="text-caption fc-migrate__when">{{ r.started_at }}</span>
+          </li>
+        </ul>
+      </div>
+    </v-card-text>
+
+    <v-dialog v-model="confirmOpen" max-width="520">
+      <v-card>
+        <v-card-title>Confirm {{ pendingLabel }}</v-card-title>
+        <v-card-text>
+          This will modify FC's database. Make sure you've taken a backup first.
+          Continue?
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="confirmOpen = false">Cancel</v-btn>
+          <v-btn color="primary" variant="tonal" @click="onConfirm">Continue</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-card>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useMigrationStore } from '../../stores/migration.js'
+
+const store = useMigrationStore()
+
+const gsFile = ref(null)
+const irFile = ref(null)
+
+const confirmOpen = ref(false)
+const pendingLabel = ref('')
+const pendingAction = ref(null)
+
+onMounted(async () => {
+  await store.loadRecent()
+})
+
+function _pick(model) {
+  if (!model) return null
+  // v-file-input v-model can be a single File or a [File] depending on Vuetify version.
+  return Array.isArray(model) ? model[0] : model
+}
+
+function requestConfirm(label, action) {
+  pendingLabel.value = label
+  pendingAction.value = action
+  confirmOpen.value = true
+}
+
+async function onConfirm() {
+  confirmOpen.value = false
+  const action = pendingAction.value
+  pendingAction.value = null
+  if (action) await action()
+}
+
+async function onBackup() {
+  await store.trigger('backup', { tag: 'pre_migration' })
+}
+
+async function onIngestGs() {
+  const file = _pick(gsFile.value)
+  if (!file) return
+  requestConfirm('Ingest GS', async () => {
+    await store.trigger('gs_ingest', { dry_run: false }, file)
+  })
+}
+
+async function onIngestIr() {
+  const file = _pick(irFile.value)
+  if (!file) return
+  requestConfirm('Ingest IR', async () => {
+    await store.trigger('ir_ingest', { dry_run: false }, file)
+  })
+}
+
+async function onTagApply() {
+  requestConfirm('Apply IR tag associations', async () => {
+    await store.trigger('tag_apply', { dry_run: false })
+  })
+}
+
+async function onMlQueue() {
+  await store.trigger('ml_queue', {})
+}
+
+async function onVerify() {
+  await store.trigger('verify', {})
+}
+
+async function onRollback() {
+  requestConfirm('Rollback to pre-migration backup', async () => {
+    await store.trigger('rollback', {})
+  })
+}
+</script>
+
+<style scoped>
+.fc-migrate__hints {
+  padding-left: 1.2rem;
+  color: rgb(var(--v-theme-on-surface-variant));
+}
+.fc-migrate__uploads {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+.fc-migrate__steps {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.fc-migrate__history {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.fc-migrate__history li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  border-bottom: 1px solid rgb(var(--v-theme-on-surface-variant), 0.15);
+}
+.fc-migrate__when {
+  color: rgb(var(--v-theme-on-surface-variant));
+  margin-left: auto;
+}
+</style>
diff --git a/frontend/src/components/settings/MaintenancePanel.vue b/frontend/src/components/settings/MaintenancePanel.vue
index e6e963d..9639edf 100644
--- a/frontend/src/components/settings/MaintenancePanel.vue
+++ b/frontend/src/components/settings/MaintenancePanel.vue
@@ -12,6 +12,7 @@
     <MLThresholdSliders class="mt-4" />
     <AllowlistTable class="mt-4" />
     <AliasTable class="mt-4" />
+    <LegacyMigrationCard class="mt-6" />
   </div>
 </template>
 
@@ -21,6 +22,7 @@ import CentroidRecomputeCard from './CentroidRecomputeCard.vue'
 import MLThresholdSliders from './MLThresholdSliders.vue'
 import AllowlistTable from './AllowlistTable.vue'
 import AliasTable from './AliasTable.vue'
+import LegacyMigrationCard from './LegacyMigrationCard.vue'
 </script>
 
 <style scoped>