From eebc8e241330cf37a1fb44cb98de7ae250356e5b Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 28 May 2026 11:20:07 -0400
Subject: [PATCH] refactor(dry-F2): centralize shared UI primitives
 (relative-time, toast, download-status)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- utils/date.js: add formatRelative(iso, {future,nullText}); migrate 6 sites
  (SourceRow, SubscriptionsTab, SourceHealthDot, SchedulerStatusBar +
  thin adapters in BackupRunsTable/SystemActivityTab for their '—' null text).
  PostCard (30d->absolute) and CredentialCard (mo/y buckets) intentionally
  keep bespoke formatters.
- utils/toast.js: toast(opts) wraps the globalThis.window?.__fcToast?.(...)
  incantation; migrate 63 call sites across 24 files.
- utils/downloadStatus.js: single source for the download-event status enum
  -> label/color/icon; collapse the 3 duplicate maps (DownloadStatChips,
  DownloadsFilterPopover, DownloadEventRow).

Net -33 lines. Platform metadata was already centralized in platformColor.js.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/cleanup/MinDimensionCard.vue   |  7 +++--
 .../cleanup/SingleColorAuditCard.vue          | 11 ++++----
 .../cleanup/TransparencyAuditCard.vue         | 11 ++++----
 .../components/common/ErrorDetailModal.vue    |  3 +-
 .../credentials/ExtensionKeyBar.vue           |  7 +++--
 .../downloads/DownloadDetailModal.vue         |  5 ++--
 .../components/downloads/DownloadEventRow.vue | 19 +++++--------
 .../src/components/modal/SuggestionsPanel.vue |  5 ++--
 .../components/settings/BackupRunsTable.vue   | 10 ++-----
 .../settings/BrowserExtensionCard.vue         | 11 ++++----
 .../settings/CentroidRecomputeCard.vue        |  3 +-
 .../components/settings/ImportTaskList.vue    |  5 ++--
 .../components/settings/MLBackfillCard.vue    |  3 +-
 .../settings/MLThresholdSliders.vue           |  3 +-
 .../components/settings/SystemActivityTab.vue | 10 ++-----
 .../settings/ThumbnailBackfillCard.vue        |  3 +-
 .../subscriptions/ArtistCreateDialog.vue      |  3 +-
 .../subscriptions/CredentialCard.vue          |  5 ++--
 .../subscriptions/DownloadStatChips.vue       | 24 ++++++----------
 .../subscriptions/DownloadsFilterPopover.vue  | 12 ++------
 .../components/subscriptions/DownloadsTab.vue |  9 +++---
 .../subscriptions/MaintenanceMenu.vue         |  9 +++---
 .../subscriptions/SchedulerStatusBar.vue      | 11 ++------
 .../subscriptions/SourceHealthDot.vue         | 28 +++++--------------
 .../components/subscriptions/SourceRow.vue    | 18 +-----------
 .../subscriptions/SubscriptionsTab.vue        | 24 ++++++----------
 frontend/src/stores/gallerySelection.js       |  5 ++--
 frontend/src/stores/import.js                 | 13 +++++----
 frontend/src/stores/modal.js                  |  3 +-
 frontend/src/stores/seriesManage.js           |  3 +-
 frontend/src/stores/suggestions.js            |  5 ++--
 frontend/src/utils/date.js                    | 19 +++++++++++++
 frontend/src/utils/downloadStatus.js          | 21 ++++++++++++++
 frontend/src/utils/toast.js                   |  8 ++++++
 34 files changed, 166 insertions(+), 170 deletions(-)
 create mode 100644 frontend/src/utils/downloadStatus.js
 create mode 100644 frontend/src/utils/toast.js

diff --git a/frontend/src/components/cleanup/MinDimensionCard.vue b/frontend/src/components/cleanup/MinDimensionCard.vue
index 140d549..b018c6b 100644
--- a/frontend/src/components/cleanup/MinDimensionCard.vue
+++ b/frontend/src/components/cleanup/MinDimensionCard.vue
@@ -62,6 +62,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { onMounted, ref } from 'vue'
 
 import DestructiveConfirmModal from '../modal/DestructiveConfirmModal.vue'
@@ -94,7 +95,7 @@ async function onPreview() {
   try {
     preview.value = await store.previewMinDim(minW.value, minH.value)
   } catch (e) {
-    window.__fcToast?.({ text: `Preview failed: ${e.message}`, type: 'error' })
+    toast({ text: `Preview failed: ${e.message}`, type: 'error' })
   } finally {
     busy.value = false
   }
@@ -108,12 +109,12 @@ function onDeleteClick() {
 async function onConfirmedDelete(token) {
   try {
     const res = await store.deleteMinDim(minW.value, minH.value, token)
-    window.__fcToast?.({
+    toast({
       text: `Deleted ${res.deleted} image(s)`, type: 'success',
     })
     preview.value = null
   } catch (e) {
-    window.__fcToast?.({ text: `Delete failed: ${e.message}`, type: 'error' })
+    toast({ text: `Delete failed: ${e.message}`, type: 'error' })
   }
 }
 </script>
diff --git a/frontend/src/components/cleanup/SingleColorAuditCard.vue b/frontend/src/components/cleanup/SingleColorAuditCard.vue
index ff2ecbe..08c6476 100644
--- a/frontend/src/components/cleanup/SingleColorAuditCard.vue
+++ b/frontend/src/components/cleanup/SingleColorAuditCard.vue
@@ -93,6 +93,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { onMounted, onUnmounted, ref } from 'vue'
 
 import DestructiveConfirmModal from '../modal/DestructiveConfirmModal.vue'
@@ -124,7 +125,7 @@ function startPoll(id) {
       if (fresh.status !== 'running') stopPoll()
     } catch (e) {
       stopPoll()
-      window.__fcToast?.({ text: `Audit poll failed: ${e.message}`, type: 'error' })
+      toast({ text: `Audit poll failed: ${e.message}`, type: 'error' })
     }
   }, 5000)
 }
@@ -142,7 +143,7 @@ async function onStart() {
     audit.value = await store.getAudit(res.audit_id)
     startPoll(res.audit_id)
   } catch (e) {
-    window.__fcToast?.({ text: `Scan start failed: ${e.message}`, type: 'error' })
+    toast({ text: `Scan start failed: ${e.message}`, type: 'error' })
   } finally {
     busy.value = false
   }
@@ -155,7 +156,7 @@ async function onCancel() {
     audit.value = await store.getAudit(audit.value.id)
     stopPoll()
   } catch (e) {
-    window.__fcToast?.({ text: `Cancel failed: ${e.message}`, type: 'error' })
+    toast({ text: `Cancel failed: ${e.message}`, type: 'error' })
   }
 }
 
@@ -167,12 +168,12 @@ function onApplyClick() {
 async function onConfirmedApply(token) {
   try {
     const res = await store.applyAudit(audit.value.id, token)
-    window.__fcToast?.({
+    toast({
       text: `Deleted ${res.deleted} image(s)`, type: 'success',
     })
     audit.value = await store.getAudit(audit.value.id)
   } catch (e) {
-    window.__fcToast?.({ text: `Apply failed: ${e.message}`, type: 'error' })
+    toast({ text: `Apply failed: ${e.message}`, type: 'error' })
   }
 }
 </script>
diff --git a/frontend/src/components/cleanup/TransparencyAuditCard.vue b/frontend/src/components/cleanup/TransparencyAuditCard.vue
index 4e91ac0..6e26f99 100644
--- a/frontend/src/components/cleanup/TransparencyAuditCard.vue
+++ b/frontend/src/components/cleanup/TransparencyAuditCard.vue
@@ -80,6 +80,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { onMounted, onUnmounted, ref } from 'vue'
 
 import DestructiveConfirmModal from '../modal/DestructiveConfirmModal.vue'
@@ -109,7 +110,7 @@ function startPoll(id) {
       if (fresh.status !== 'running') stopPoll()
     } catch (e) {
       stopPoll()
-      window.__fcToast?.({ text: `Audit poll failed: ${e.message}`, type: 'error' })
+      toast({ text: `Audit poll failed: ${e.message}`, type: 'error' })
     }
   }, 5000)
 }
@@ -125,7 +126,7 @@ async function onStart() {
     audit.value = await store.getAudit(res.audit_id)
     startPoll(res.audit_id)
   } catch (e) {
-    window.__fcToast?.({ text: `Scan start failed: ${e.message}`, type: 'error' })
+    toast({ text: `Scan start failed: ${e.message}`, type: 'error' })
   } finally {
     busy.value = false
   }
@@ -138,7 +139,7 @@ async function onCancel() {
     audit.value = await store.getAudit(audit.value.id)
     stopPoll()
   } catch (e) {
-    window.__fcToast?.({ text: `Cancel failed: ${e.message}`, type: 'error' })
+    toast({ text: `Cancel failed: ${e.message}`, type: 'error' })
   }
 }
 
@@ -150,12 +151,12 @@ function onApplyClick() {
 async function onConfirmedApply(token) {
   try {
     const res = await store.applyAudit(audit.value.id, token)
-    window.__fcToast?.({
+    toast({
       text: `Deleted ${res.deleted} image(s)`, type: 'success',
     })
     audit.value = await store.getAudit(audit.value.id)
   } catch (e) {
-    window.__fcToast?.({ text: `Apply failed: ${e.message}`, type: 'error' })
+    toast({ text: `Apply failed: ${e.message}`, type: 'error' })
   }
 }
 </script>
diff --git a/frontend/src/components/common/ErrorDetailModal.vue b/frontend/src/components/common/ErrorDetailModal.vue
index 021f3da..6c378b3 100644
--- a/frontend/src/components/common/ErrorDetailModal.vue
+++ b/frontend/src/components/common/ErrorDetailModal.vue
@@ -33,6 +33,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { computed, ref, watch } from 'vue'
 
 import { copyText } from '../../utils/clipboard.js'
@@ -119,7 +120,7 @@ async function onCopy () {
     if (copiedTimer) clearTimeout(copiedTimer)
     copiedTimer = setTimeout(() => { copied.value = false }, 1500)
   } catch (e) {
-    window.__fcToast?.({ text: `Copy failed: ${e.message}`, type: 'error' })
+    toast({ text: `Copy failed: ${e.message}`, type: 'error' })
   }
 }
 </script>
diff --git a/frontend/src/components/credentials/ExtensionKeyBar.vue b/frontend/src/components/credentials/ExtensionKeyBar.vue
index 2563ec6..3453aec 100644
--- a/frontend/src/components/credentials/ExtensionKeyBar.vue
+++ b/frontend/src/components/credentials/ExtensionKeyBar.vue
@@ -26,6 +26,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { onMounted, ref } from 'vue'
 import { useCredentialsStore } from '../../stores/credentials.js'
 import { copyText } from '../../utils/clipboard.js'
@@ -39,9 +40,9 @@ async function copyKey() {
   if (!store.extensionKey) return
   try {
     await copyText(store.extensionKey)
-    globalThis.window?.__fcToast?.({ text: 'Copied', type: 'success' })
+    toast({ text: 'Copied', type: 'success' })
   } catch {
-    globalThis.window?.__fcToast?.({ text: 'Copy failed', type: 'error' })
+    toast({ text: 'Copy failed', type: 'error' })
   }
 }
 
@@ -50,7 +51,7 @@ function confirmRotate() { showRotateConfirm.value = true }
 async function doRotate() {
   showRotateConfirm.value = false
   await store.rotateKey()
-  globalThis.window?.__fcToast?.({ text: 'Key rotated', type: 'success' })
+  toast({ text: 'Key rotated', type: 'success' })
 }
 </script>
 
diff --git a/frontend/src/components/downloads/DownloadDetailModal.vue b/frontend/src/components/downloads/DownloadDetailModal.vue
index 35bb921..e8c4697 100644
--- a/frontend/src/components/downloads/DownloadDetailModal.vue
+++ b/frontend/src/components/downloads/DownloadDetailModal.vue
@@ -101,6 +101,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { computed } from 'vue'
 
 import { copyText } from '../../utils/clipboard.js'
@@ -133,9 +134,9 @@ const allDiagnostics = computed(() => {
 async function onCopy(label, text) {
   try {
     await copyText(text || '')
-    window.__fcToast?.({ text: `${label} copied`, type: 'success' })
+    toast({ text: `${label} copied`, type: 'success' })
   } catch (e) {
-    window.__fcToast?.({ text: `Copy failed: ${e.message}`, type: 'error' })
+    toast({ text: `Copy failed: ${e.message}`, type: 'error' })
   }
 }
 
diff --git a/frontend/src/components/downloads/DownloadEventRow.vue b/frontend/src/components/downloads/DownloadEventRow.vue
index fb2999b..c18b873 100644
--- a/frontend/src/components/downloads/DownloadEventRow.vue
+++ b/frontend/src/components/downloads/DownloadEventRow.vue
@@ -86,11 +86,13 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { computed, ref } from 'vue'
 import { RouterLink } from 'vue-router'
 
 import PlatformChip from '../subscriptions/PlatformChip.vue'
 import { useSourcesStore } from '../../stores/sources.js'
+import { downloadStatusColor, downloadStatusIcon, downloadStatusLabel } from '../../utils/downloadStatus.js'
 
 const props = defineProps({ event: { type: Object, required: true } })
 defineEmits(['open'])
@@ -98,16 +100,9 @@ defineEmits(['open'])
 const sourcesStore = useSourcesStore()
 const retrying = ref(false)
 
-const _STATUS = {
-  ok:      { color: 'success', icon: 'mdi-check-circle',    label: 'Completed' },
-  error:   { color: 'error',   icon: 'mdi-alert-circle',    label: 'Failed' },
-  running: { color: 'info',    icon: 'mdi-progress-clock',  label: 'Running' },
-  pending: { color: 'grey',    icon: 'mdi-clock-outline',   label: 'Queued' },
-  skipped: { color: 'warning', icon: 'mdi-skip-next',       label: 'Skipped' },
-}
-const statusColor = computed(() => _STATUS[props.event.status]?.color || 'grey')
-const statusIcon = computed(() => _STATUS[props.event.status]?.icon || 'mdi-help-circle')
-const statusLabel = computed(() => _STATUS[props.event.status]?.label || props.event.status)
+const statusColor = computed(() => downloadStatusColor(props.event.status))
+const statusIcon = computed(() => downloadStatusIcon(props.event.status))
+const statusLabel = computed(() => downloadStatusLabel(props.event.status))
 
 function fmtTime(iso) {
   if (!iso) return '—'
@@ -131,12 +126,12 @@ async function onRetry() {
   retrying.value = true
   try {
     await sourcesStore.checkNow(props.event.source_id)
-    globalThis.window?.__fcToast?.({
+    toast({
       text: `Source check re-queued`, type: 'success',
     })
   } catch (e) {
     const isInFlight = !!e?.body?.download_event_id
-    globalThis.window?.__fcToast?.({
+    toast({
       text: isInFlight ? 'Already running' : `Retry failed: ${e?.detail || e?.message || e}`,
       type: isInFlight ? 'info' : 'error',
     })
diff --git a/frontend/src/components/modal/SuggestionsPanel.vue b/frontend/src/components/modal/SuggestionsPanel.vue
index a5f8353..0ca5cea 100644
--- a/frontend/src/components/modal/SuggestionsPanel.vue
+++ b/frontend/src/components/modal/SuggestionsPanel.vue
@@ -38,6 +38,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { computed, ref, watch } from 'vue'
 import { useSuggestionsStore, CATEGORY_LABELS } from '../../stores/suggestions.js'
 import SuggestionsCategoryGroup from './SuggestionsCategoryGroup.vue'
@@ -57,7 +58,7 @@ watch(() => props.imageId, (id) => { if (id != null) store.load(id) }, { immedia
 
 async function onAccept(s) {
   try { await store.accept(s) }
-  catch (e) { window.__fcToast?.({ text: `Accept failed: ${e.message}`, type: 'error' }) }
+  catch (e) { toast({ text: `Accept failed: ${e.message}`, type: 'error' }) }
 }
 
 const aliasDialog = ref(false)
@@ -68,7 +69,7 @@ async function onAliasConfirm(canonicalTagId) {
     await store.aliasAccept(aliasTarget.value, canonicalTagId)
     aliasDialog.value = false
   } catch (e) {
-    window.__fcToast?.({ text: `Alias failed: ${e.message}`, type: 'error' })
+    toast({ text: `Alias failed: ${e.message}`, type: 'error' })
   }
 }
 </script>
diff --git a/frontend/src/components/settings/BackupRunsTable.vue b/frontend/src/components/settings/BackupRunsTable.vue
index dc15d24..0d12676 100644
--- a/frontend/src/components/settings/BackupRunsTable.vue
+++ b/frontend/src/components/settings/BackupRunsTable.vue
@@ -59,6 +59,8 @@
 </template>
 
 <script setup>
+import { formatRelative as fmtRelative } from '../../utils/date.js'
+
 defineProps({ runs: { type: Array, default: () => [] } })
 defineEmits(['restore', 'delete', 'tag'])
 
@@ -92,13 +94,7 @@ function formatBytes(b) {
   return `${v.toFixed(i === 0 ? 0 : 1)} ${units[i]}`
 }
 function formatRelative(iso) {
-  if (!iso) return '—'
-  const then = new Date(iso).getTime()
-  const diff = Math.max(0, (Date.now() - then) / 1000)
-  if (diff < 60) return `${Math.floor(diff)}s ago`
-  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
-  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
-  return `${Math.floor(diff / 86400)}d ago`
+  return fmtRelative(iso, { nullText: '—' })
 }
 </script>
 
diff --git a/frontend/src/components/settings/BrowserExtensionCard.vue b/frontend/src/components/settings/BrowserExtensionCard.vue
index 2a0bedb..b3d7a41 100644
--- a/frontend/src/components/settings/BrowserExtensionCard.vue
+++ b/frontend/src/components/settings/BrowserExtensionCard.vue
@@ -108,6 +108,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { computed, onMounted, ref } from 'vue'
 import { useApi } from '../../composables/useApi.js'
 import { copyText } from '../../utils/clipboard.js'
@@ -147,7 +148,7 @@ async function loadKey() {
     apiKey.value = key
   } catch (e) {
     apiKey.value = ''
-    window.__fcToast?.({
+    toast({
       text: `Failed to load extension API key: ${e.message}`,
       type: 'error',
     })
@@ -160,9 +161,9 @@ async function rotateKey() {
     const { key } = await api.post('/api/settings/extension_api_key/rotate')
     apiKey.value = key
     keyShown.value = true
-    window.__fcToast?.({ text: 'Extension API key rotated.', type: 'success' })
+    toast({ text: 'Extension API key rotated.', type: 'success' })
   } catch (e) {
-    window.__fcToast?.({
+    toast({
       text: `Rotate failed: ${e.message}`,
       type: 'error',
     })
@@ -174,9 +175,9 @@ async function rotateKey() {
 async function copy(text, label) {
   try {
     await copyText(text)
-    window.__fcToast?.({ text: `${label} copied.`, type: 'success' })
+    toast({ text: `${label} copied.`, type: 'success' })
   } catch (e) {
-    window.__fcToast?.({ text: `Copy failed: ${e.message}`, type: 'error' })
+    toast({ text: `Copy failed: ${e.message}`, type: 'error' })
   }
 }
 </script>
diff --git a/frontend/src/components/settings/CentroidRecomputeCard.vue b/frontend/src/components/settings/CentroidRecomputeCard.vue
index 22bf4bd..1f49210 100644
--- a/frontend/src/components/settings/CentroidRecomputeCard.vue
+++ b/frontend/src/components/settings/CentroidRecomputeCard.vue
@@ -16,6 +16,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { ref } from 'vue'
 import { useMLStore } from '../../stores/ml.js'
 const store = useMLStore()
@@ -24,7 +25,7 @@ const done = ref(false)
 async function run() {
   busy.value = true
   try { await store.triggerRecomputeCentroids(); done.value = true }
-  catch (e) { window.__fcToast?.({ text: e.message, type: 'error' }) }
+  catch (e) { toast({ text: e.message, type: 'error' }) }
   finally { busy.value = false }
 }
 </script>
diff --git a/frontend/src/components/settings/ImportTaskList.vue b/frontend/src/components/settings/ImportTaskList.vue
index 4eadf3c..a3c78e2 100644
--- a/frontend/src/components/settings/ImportTaskList.vue
+++ b/frontend/src/components/settings/ImportTaskList.vue
@@ -125,6 +125,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { computed, ref } from 'vue'
 import { useImportStore } from '../../stores/import.js'
 import ErrorDetailModal from '../common/ErrorDetailModal.vue'
@@ -177,9 +178,9 @@ async function onRefetch(item) {
   try {
     const res = await store.refetchTask(item.id)
     const msg = _REFETCH_MSG[res.status] || { text: `Re-fetch: ${res.status}`, type: 'info' }
-    window.__fcToast?.(msg)
+    toast(msg)
   } catch (e) {
-    window.__fcToast?.({ text: `Re-fetch failed: ${e.message}`, type: 'error' })
+    toast({ text: `Re-fetch failed: ${e.message}`, type: 'error' })
   } finally {
     refetching.value = null
   }
diff --git a/frontend/src/components/settings/MLBackfillCard.vue b/frontend/src/components/settings/MLBackfillCard.vue
index 4380971..1023811 100644
--- a/frontend/src/components/settings/MLBackfillCard.vue
+++ b/frontend/src/components/settings/MLBackfillCard.vue
@@ -15,6 +15,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { ref } from 'vue'
 import { useMLStore } from '../../stores/ml.js'
 const store = useMLStore()
@@ -23,7 +24,7 @@ const done = ref(false)
 async function run() {
   busy.value = true
   try { await store.triggerBackfill(); done.value = true }
-  catch (e) { window.__fcToast?.({ text: e.message, type: 'error' }) }
+  catch (e) { toast({ text: e.message, type: 'error' }) }
   finally { busy.value = false }
 }
 </script>
diff --git a/frontend/src/components/settings/MLThresholdSliders.vue b/frontend/src/components/settings/MLThresholdSliders.vue
index 34304d3..8919e3b 100644
--- a/frontend/src/components/settings/MLThresholdSliders.vue
+++ b/frontend/src/components/settings/MLThresholdSliders.vue
@@ -17,6 +17,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { reactive, watch } from 'vue'
 import { useMLStore } from '../../stores/ml.js'
 
@@ -35,6 +36,6 @@ async function save() {
   const patch = {}
   for (const f of fields) patch[f.key] = local[f.key]
   try { await store.patchSettings(patch) }
-  catch (e) { window.__fcToast?.({ text: e.message, type: 'error' }) }
+  catch (e) { toast({ text: e.message, type: 'error' }) }
 }
 </script>
diff --git a/frontend/src/components/settings/SystemActivityTab.vue b/frontend/src/components/settings/SystemActivityTab.vue
index 0d6485c..fe9db71 100644
--- a/frontend/src/components/settings/SystemActivityTab.vue
+++ b/frontend/src/components/settings/SystemActivityTab.vue
@@ -154,6 +154,7 @@
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import { useSystemActivityStore } from '../../stores/systemActivity.js'
+import { formatRelative as fmtRelative } from '../../utils/date.js'
 import ErrorDetailModal from '../common/ErrorDetailModal.vue'
 import QueuesTable from './QueuesTable.vue'
 
@@ -277,14 +278,7 @@ function formatDuration(ms) {
   return `${(ms / 60_000).toFixed(1)} min`
 }
 function formatRelative(iso) {
-  if (!iso) return '—'
-  const then = new Date(iso).getTime()
-  const now = Date.now()
-  const diff = Math.max(0, (now - then) / 1000)
-  if (diff < 60) return `${Math.floor(diff)}s ago`
-  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
-  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
-  return `${Math.floor(diff / 86400)}d ago`
+  return fmtRelative(iso, { nullText: '—' })
 }
 </script>
 
diff --git a/frontend/src/components/settings/ThumbnailBackfillCard.vue b/frontend/src/components/settings/ThumbnailBackfillCard.vue
index 489c45f..37aab2a 100644
--- a/frontend/src/components/settings/ThumbnailBackfillCard.vue
+++ b/frontend/src/components/settings/ThumbnailBackfillCard.vue
@@ -16,6 +16,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { ref } from 'vue'
 import { useThumbnailsStore } from '../../stores/thumbnails.js'
 const store = useThumbnailsStore()
@@ -24,7 +25,7 @@ const done = ref(false)
 async function run () {
   busy.value = true
   try { await store.triggerBackfill(); done.value = true }
-  catch (e) { window.__fcToast?.({ text: e.message, type: 'error' }) }
+  catch (e) { toast({ text: e.message, type: 'error' }) }
   finally { busy.value = false }
 }
 </script>
diff --git a/frontend/src/components/subscriptions/ArtistCreateDialog.vue b/frontend/src/components/subscriptions/ArtistCreateDialog.vue
index 8efde7d..c60afa5 100644
--- a/frontend/src/components/subscriptions/ArtistCreateDialog.vue
+++ b/frontend/src/components/subscriptions/ArtistCreateDialog.vue
@@ -20,6 +20,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { ref, watch } from 'vue'
 import { useSourcesStore } from '../../stores/sources.js'
 
@@ -44,7 +45,7 @@ async function submit() {
   busy.value = true
   try {
     const { artist, created } = await store.findOrCreateArtist(name.value.trim())
-    globalThis.window?.__fcToast?.({
+    toast({
       text: created ? 'Artist created' : 'Artist already exists',
       type: 'success',
     })
diff --git a/frontend/src/components/subscriptions/CredentialCard.vue b/frontend/src/components/subscriptions/CredentialCard.vue
index 8427a48..182b09e 100644
--- a/frontend/src/components/subscriptions/CredentialCard.vue
+++ b/frontend/src/components/subscriptions/CredentialCard.vue
@@ -98,6 +98,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { computed, ref } from 'vue'
 import PlatformChip from './PlatformChip.vue'
 import { useCredentialsStore } from '../../stores/credentials.js'
@@ -126,11 +127,11 @@ async function onVerify() {
     const res = await credsStore.verify(props.platform.key)
     verifyResult.value = res
     const type = res.valid === true ? 'success' : (res.valid === false ? 'error' : 'info')
-    window.__fcToast?.({ text: `${props.platform.name}: ${res.reason}`, type })
+    toast({ text: `${props.platform.name}: ${res.reason}`, type })
     if (res.valid === true) emit('verified')
   } catch (e) {
     verifyResult.value = { valid: false, reason: e.message }
-    window.__fcToast?.({ text: `Verify failed: ${e.message}`, type: 'error' })
+    toast({ text: `Verify failed: ${e.message}`, type: 'error' })
   } finally {
     verifying.value = false
   }
diff --git a/frontend/src/components/subscriptions/DownloadStatChips.vue b/frontend/src/components/subscriptions/DownloadStatChips.vue
index e2e3ab1..d04387e 100644
--- a/frontend/src/components/subscriptions/DownloadStatChips.vue
+++ b/frontend/src/components/subscriptions/DownloadStatChips.vue
@@ -1,38 +1,30 @@
 <template>
   <div class="fc-dl-stats">
     <v-chip
-      v-for="s in STAT_DEFS" :key="s.key"
+      v-for="s in STAT_DEFS" :key="s.value"
       :color="s.color"
-      :variant="activeStatus === s.key ? 'elevated' : 'tonal'"
+      :variant="activeStatus === s.value ? 'elevated' : 'tonal'"
       :prepend-icon="s.icon"
       size="default"
-      :class="{ 'fc-dl-stats__active': activeStatus === s.key }"
-      @click="$emit('select', activeStatus === s.key ? null : s.key)"
+      :class="{ 'fc-dl-stats__active': activeStatus === s.value }"
+      @click="$emit('select', activeStatus === s.value ? null : s.value)"
     >
       {{ s.label }}
-      <strong class="ms-1">{{ stats[s.key] ?? 0 }}</strong>
+      <strong class="ms-1">{{ stats[s.value] ?? 0 }}</strong>
     </v-chip>
   </div>
 </template>
 
 <script setup>
+import { DOWNLOAD_STATUSES as STAT_DEFS } from '../../utils/downloadStatus.js'
+
 defineProps({
   stats: { type: Object, required: true },
-  // The currently-active status filter key (pending|running|ok|error|
+  // The currently-active status filter value (pending|running|ok|error|
   // skipped) or null. Highlights the matching chip.
   activeStatus: { type: String, default: null },
 })
 defineEmits(['select'])
-
-// status keys come straight from the backend ENUM
-// (pending|running|ok|error|skipped); display order + icons are UI-only.
-const STAT_DEFS = [
-  { key: 'pending',  label: 'Queued',    color: 'grey',    icon: 'mdi-clock-outline' },
-  { key: 'running',  label: 'Running',   color: 'info',    icon: 'mdi-progress-clock' },
-  { key: 'ok',       label: 'Completed', color: 'success', icon: 'mdi-check-circle' },
-  { key: 'error',    label: 'Failed',    color: 'error',   icon: 'mdi-alert-circle' },
-  { key: 'skipped',  label: 'Skipped',   color: 'warning', icon: 'mdi-skip-next' },
-]
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/subscriptions/DownloadsFilterPopover.vue b/frontend/src/components/subscriptions/DownloadsFilterPopover.vue
index 4ba8e24..0bef8d0 100644
--- a/frontend/src/components/subscriptions/DownloadsFilterPopover.vue
+++ b/frontend/src/components/subscriptions/DownloadsFilterPopover.vue
@@ -68,6 +68,7 @@
 import { computed, reactive, ref, watch } from 'vue'
 
 import { useSourcesStore } from '../../stores/sources.js'
+import { DOWNLOAD_STATUSES, downloadStatusLabel } from '../../utils/downloadStatus.js'
 
 const props = defineProps({
   modelValue: { type: Object, required: true },
@@ -76,14 +77,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const sourcesStore = useSourcesStore()
 
-const STATUS_OPTIONS = [
-  { title: 'Queued',    value: 'pending' },
-  { title: 'Running',   value: 'running' },
-  { title: 'Completed', value: 'ok' },
-  { title: 'Failed',    value: 'error' },
-  { title: 'Skipped',   value: 'skipped' },
-]
-const STATUS_LABEL = Object.fromEntries(STATUS_OPTIONS.map((o) => [o.value, o.title]))
+const STATUS_OPTIONS = DOWNLOAD_STATUSES.map((s) => ({ title: s.label, value: s.value }))
 
 const open = ref(false)
 const local = reactive({
@@ -122,7 +116,7 @@ function onArtistPick(id) {
 
 const activePills = computed(() => {
   const out = []
-  if (local.status)    out.push({ key: 'status',    label: `Status: ${STATUS_LABEL[local.status] || local.status}` })
+  if (local.status)    out.push({ key: 'status',    label: `Status: ${downloadStatusLabel(local.status)}` })
   if (local.artist_id) out.push({ key: 'artist_id', label: `Artist: ${local.artist_name || `#${local.artist_id}`}` })
   if (local.from_date) out.push({ key: 'from_date', label: `From ${local.from_date}` })
   if (local.to_date)   out.push({ key: 'to_date',   label: `To ${local.to_date}` })
diff --git a/frontend/src/components/subscriptions/DownloadsTab.vue b/frontend/src/components/subscriptions/DownloadsTab.vue
index e1cd3e0..36c2718 100644
--- a/frontend/src/components/subscriptions/DownloadsTab.vue
+++ b/frontend/src/components/subscriptions/DownloadsTab.vue
@@ -113,6 +113,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
@@ -167,12 +168,12 @@ async function refresh() {
 async function onRetrySource(source) {
   try {
     await sourcesStore.checkNow(source.id)
-    globalThis.window?.__fcToast?.({ text: `Retry queued for ${source.artist_name || source.platform}`, type: 'success' })
+    toast({ text: `Retry queued for ${source.artist_name || source.platform}`, type: 'success' })
   } catch (e) {
     if (e?.body?.download_event_id) {
-      globalThis.window?.__fcToast?.({ text: 'Already running — see below', type: 'info' })
+      toast({ text: 'Already running — see below', type: 'info' })
     } else {
-      globalThis.window?.__fcToast?.({ text: `Retry failed: ${e?.detail || e?.message || e}`, type: 'error' })
+      toast({ text: `Retry failed: ${e?.detail || e?.message || e}`, type: 'error' })
     }
   } finally {
     await Promise.all([store.loadFailing(), store.loadStats(24), store.loadFirst()])
@@ -199,7 +200,7 @@ async function onRetryAll(sources) {
   const parts = []
   if (ok) parts.push(`${ok} queued`)
   if (conflict) parts.push(`${conflict} already running`)
-  globalThis.window?.__fcToast?.({ text: parts.join(', ') || 'Nothing to retry', type: 'info' })
+  toast({ text: parts.join(', ') || 'Nothing to retry', type: 'info' })
 }
 
 // Live auto-refresh: while any download is queued or running, poll the
diff --git a/frontend/src/components/subscriptions/MaintenanceMenu.vue b/frontend/src/components/subscriptions/MaintenanceMenu.vue
index dc2d57e..b89d045 100644
--- a/frontend/src/components/subscriptions/MaintenanceMenu.vue
+++ b/frontend/src/components/subscriptions/MaintenanceMenu.vue
@@ -31,6 +31,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { useImportStore } from '../../stores/import.js'
 
 const emit = defineEmits(['refresh'])
@@ -39,10 +40,10 @@ const importStore = useImportStore()
 async function onRetry() {
   try {
     await importStore.retryFailed()
-    globalThis.window?.__fcToast?.({ text: 'Retry queued', type: 'success' })
+    toast({ text: 'Retry queued', type: 'success' })
     emit('refresh')
   } catch (e) {
-    globalThis.window?.__fcToast?.({ text: `Retry failed: ${e?.detail || e?.message || e}`, type: 'error' })
+    toast({ text: `Retry failed: ${e?.detail || e?.message || e}`, type: 'error' })
   }
 }
 
@@ -50,13 +51,13 @@ async function onClear() {
   try {
     const body = await importStore.clearStuck()
     const n = body?.cleared ?? 0
-    globalThis.window?.__fcToast?.({
+    toast({
       text: n ? `Cleared ${n} stuck task${n === 1 ? '' : 's'}` : 'Nothing stuck',
       type: 'success',
     })
     emit('refresh')
   } catch (e) {
-    globalThis.window?.__fcToast?.({ text: `Clear failed: ${e?.detail || e?.message || e}`, type: 'error' })
+    toast({ text: `Clear failed: ${e?.detail || e?.message || e}`, type: 'error' })
   }
 }
 </script>
diff --git a/frontend/src/components/subscriptions/SchedulerStatusBar.vue b/frontend/src/components/subscriptions/SchedulerStatusBar.vue
index 46ec14c..59f8bb2 100644
--- a/frontend/src/components/subscriptions/SchedulerStatusBar.vue
+++ b/frontend/src/components/subscriptions/SchedulerStatusBar.vue
@@ -24,6 +24,7 @@
 
 <script setup>
 import { computed } from 'vue'
+import { formatRelative } from '../../utils/date.js'
 
 const props = defineProps({
   // { last_tick_at, next_due_at, due_now, auto_sources } | null
@@ -45,16 +46,8 @@ const health = computed(() => {
   return tickAgeMs.value <= STALE_MS ? 'ok' : 'stale'
 })
 
-function rel(ms) {
-  const s = Math.max(0, Math.floor(ms / 1000))
-  if (s < 60) return `${s}s ago`
-  if (s < 3600) return `${Math.floor(s / 60)}m ago`
-  if (s < 86400) return `${Math.floor(s / 3600)}h ago`
-  return `${Math.floor(s / 86400)}d ago`
-}
-
 const lastRanLabel = computed(() =>
-  tickAgeMs.value == null ? 'never' : rel(tickAgeMs.value),
+  formatRelative(props.status?.last_tick_at, { nullText: 'never' }),
 )
 
 const nextLabel = computed(() => {
diff --git a/frontend/src/components/subscriptions/SourceHealthDot.vue b/frontend/src/components/subscriptions/SourceHealthDot.vue
index 44333ef..145044d 100644
--- a/frontend/src/components/subscriptions/SourceHealthDot.vue
+++ b/frontend/src/components/subscriptions/SourceHealthDot.vue
@@ -22,6 +22,7 @@
 
 <script setup>
 import { computed } from 'vue'
+import { formatRelative } from '../../utils/date.js'
 
 const props = defineProps({
   source: { type: Object, required: true },
@@ -38,28 +39,13 @@ const level = computed(() => {
 
 const ariaLabel = computed(() => `source health: ${level.value}`)
 
-function relativeTime(iso) {
-  if (!iso) return 'Never'
-  const then = new Date(iso).getTime()
-  const now = Date.now()
-  const diff = Math.abs(now - then) / 1000
-  if (diff < 60) return `${Math.floor(diff)}s`
-  if (diff < 3600) return `${Math.floor(diff / 60)}m`
-  if (diff < 86400) return `${Math.floor(diff / 3600)}h`
-  return `${Math.floor(diff / 86400)}d`
-}
+const lastCheckedText = computed(() => formatRelative(props.source.last_checked_at))
 
-const lastCheckedText = computed(() => {
-  if (!props.source.last_checked_at) return 'Never'
-  return `${relativeTime(props.source.last_checked_at)} ago`
-})
-
-const nextCheckText = computed(() => {
-  if (!props.source.next_check_at) return null
-  const due = new Date(props.source.next_check_at).getTime()
-  if (due <= Date.now()) return 'imminent'
-  return `in ~${relativeTime(props.source.next_check_at)}`
-})
+const nextCheckText = computed(() =>
+  props.source.next_check_at
+    ? formatRelative(props.source.next_check_at, { future: true })
+    : null,
+)
 
 const truncatedError = computed(() => {
   const e = props.source.last_error || ''
diff --git a/frontend/src/components/subscriptions/SourceRow.vue b/frontend/src/components/subscriptions/SourceRow.vue
index 63f3bf4..c30a45c 100644
--- a/frontend/src/components/subscriptions/SourceRow.vue
+++ b/frontend/src/components/subscriptions/SourceRow.vue
@@ -62,6 +62,7 @@
 
 <script setup>
 import SourceHealthDot from './SourceHealthDot.vue'
+import { formatRelative } from '../../utils/date.js'
 
 const props = defineProps({
   source: { type: Object, required: true },
@@ -73,23 +74,6 @@ const emit = defineEmits(['edit', 'remove', 'toggle', 'check'])
 function onToggleEnabled(value) {
   emit('toggle', { source: props.source, enabled: value })
 }
-
-function formatRelative(iso, opts = {}) {
-  if (!iso) return opts.future ? '—' : 'Never'
-  const then = new Date(iso).getTime()
-  const now = Date.now()
-  const diff = (then - now) / 1000  // seconds; positive = future, negative = past
-  const abs = Math.abs(diff)
-
-  let body
-  if (abs < 60) body = `${Math.floor(abs)}s`
-  else if (abs < 3600) body = `${Math.floor(abs / 60)}m`
-  else if (abs < 86400) body = `${Math.floor(abs / 3600)}h`
-  else body = `${Math.floor(abs / 86400)}d`
-
-  if (opts.future) return diff <= 0 ? 'imminent' : `in ${body}`
-  return `${body} ago`
-}
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/subscriptions/SubscriptionsTab.vue b/frontend/src/components/subscriptions/SubscriptionsTab.vue
index 7c07ffb..2fe5cc8 100644
--- a/frontend/src/components/subscriptions/SubscriptionsTab.vue
+++ b/frontend/src/components/subscriptions/SubscriptionsTab.vue
@@ -199,6 +199,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useSourcesStore } from '../../stores/sources.js'
@@ -210,6 +211,7 @@ import SourceFormDialog from './SourceFormDialog.vue'
 import ArtistCreateDialog from './ArtistCreateDialog.vue'
 import PlatformChip from './PlatformChip.vue'
 import SchedulerStatusBar from './SchedulerStatusBar.vue'
+import { formatRelative } from '../../utils/date.js'
 
 const ITEMS_PER_PAGE_OPTIONS = [
   { value: 25, title: '25' },
@@ -365,16 +367,6 @@ function pickWorstSource(sources, threshold) {
   return sources.reduce((worst, s) => (level(s) > level(worst) ? s : worst), sources[0])
 }
 
-function formatRelative(iso) {
-  if (!iso) return 'Never'
-  const then = new Date(iso).getTime()
-  const diff = (Date.now() - then) / 1000
-  if (diff < 60) return `${Math.floor(diff)}s ago`
-  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
-  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
-  return `${Math.floor(diff / 86400)}d ago`
-}
-
 function onRowClick(_evt, { item }) {
   const key = item.key
   const idx = expanded.value.indexOf(key)
@@ -419,19 +411,19 @@ function onArtistCreated(artist) {
 async function onCheck(source) {
   try {
     const body = await store.checkNow(source.id)
-    globalThis.window?.__fcToast?.({
+    toast({
       text: `Check enqueued (event #${body.download_event_id})`,
       type: 'success',
     })
   } catch (e) {
     if (e?.body?.download_event_id) {
-      globalThis.window?.__fcToast?.({
+      toast({
         text: 'Already running — see Downloads',
         type: 'info',
       })
       router.push({ path: '/subscriptions', query: { tab: 'downloads', source_id: source.id } })
     } else {
-      globalThis.window?.__fcToast?.({
+      toast({
         text: `Check failed: ${e?.detail || e?.message || e}`,
         type: 'error',
       })
@@ -454,7 +446,7 @@ async function checkAll(group) {
   const parts = []
   if (ok) parts.push(`${ok} queued`)
   if (conflict) parts.push(`${conflict} already running`)
-  globalThis.window?.__fcToast?.({
+  toast({
     text: parts.join(', ') || 'Nothing to check (no enabled sources)',
     type: 'info',
   })
@@ -481,7 +473,7 @@ async function bulkSetEnabled(enabled) {
     }
   }
   await refresh()
-  globalThis.window?.__fcToast?.({
+  toast({
     text: `${changed} source${changed === 1 ? '' : 's'} ${enabled ? 'enabled' : 'disabled'}`,
     type: 'success',
   })
@@ -504,7 +496,7 @@ async function bulkDelete() {
     }
   }
   await refresh()
-  globalThis.window?.__fcToast?.({
+  toast({
     text: `${deleted} source${deleted === 1 ? '' : 's'} deleted`,
     type: 'success',
   })
diff --git a/frontend/src/stores/gallerySelection.js b/frontend/src/stores/gallerySelection.js
index daf31a0..2eaa4e6 100644
--- a/frontend/src/stores/gallerySelection.js
+++ b/frontend/src/stores/gallerySelection.js
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { toast } from '../utils/toast.js'
 import { ref, computed } from 'vue'
 import { useApi } from '../composables/useApi.js'
 
@@ -51,7 +52,7 @@ export const useGallerySelectionStore = defineStore('gallerySelection', () => {
       body: { image_ids: order.value, tag_id: tagId, source }
     })
     await refresh()
-    globalThis.window?.__fcToast?.({
+    toast({
       text: `Added to ${body.added_count} image(s)`, type: 'success'
     })
     return body
@@ -62,7 +63,7 @@ export const useGallerySelectionStore = defineStore('gallerySelection', () => {
       body: { image_ids: order.value, tag_id: tagId }
     })
     await refresh()
-    globalThis.window?.__fcToast?.({
+    toast({
       text: `Removed from ${body.removed_count} image(s)`, type: 'success'
     })
     return body
diff --git a/frontend/src/stores/import.js b/frontend/src/stores/import.js
index 98d4d56..f52c436 100644
--- a/frontend/src/stores/import.js
+++ b/frontend/src/stores/import.js
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { toast } from '../utils/toast.js'
 import { ref, computed } from 'vue'
 import { useApi } from '../composables/useApi.js'
 
@@ -37,7 +38,7 @@ export const useImportStore = defineStore('import', () => {
       settings.value = await api.patch('/api/settings/import', { body: patch })
     } catch (e) {
       settingsError.value = e.message
-      window.__fcToast?.({ text: `Settings save failed: ${e.message}`, type: 'error' })
+      toast({ text: `Settings save failed: ${e.message}`, type: 'error' })
       throw e
     }
   }
@@ -68,7 +69,7 @@ export const useImportStore = defineStore('import', () => {
       const label = mode === 'deep'
         ? 'Deep scan triggered (re-applying sidecar metadata + filling NULL phash/artist on existing rows)'
         : mode === 'verify' ? 'Library verify triggered' : 'Quick scan triggered'
-      window.__fcToast?.({ text: label, type: 'success' })
+      toast({ text: label, type: 'success' })
       await refreshStatus()
       // Re-poll twice over ~5s and produce an HONEST follow-up toast.
       // Operator-flagged 2026-05-25: the prior "no new files" message was
@@ -91,22 +92,22 @@ export const useImportStore = defineStore('import', () => {
         const refreshedCount = sameBatch.filter(t => t.status === 'complete' && t.result_image_id).length
         const newImported = sameBatch.filter(t => t.status === 'complete' && t.result_image_id && !t.error).length
         if (mode === 'deep' && sameBatch.length > 0) {
-          window.__fcToast?.({
+          toast({
             text: `Deep scan finished — ${sameBatch.length} file(s) processed`,
             type: 'info',
           })
         } else if (mode === 'quick' && sameBatch.length > 0) {
-          window.__fcToast?.({
+          toast({
             text: `Quick scan finished — ${newImported} new file(s) queued`,
             type: 'info',
           })
         } else {
-          window.__fcToast?.({ text: 'Library is up to date', type: 'info' })
+          toast({ text: 'Library is up to date', type: 'info' })
         }
       }, 2000)
     } catch (e) {
       triggerError.value = e.message
-      window.__fcToast?.({ text: `Scan failed: ${e.message}`, type: 'error' })
+      toast({ text: `Scan failed: ${e.message}`, type: 'error' })
       throw e
     }
   }
diff --git a/frontend/src/stores/modal.js b/frontend/src/stores/modal.js
index feffb15..2efbe42 100644
--- a/frontend/src/stores/modal.js
+++ b/frontend/src/stores/modal.js
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { toast } from '../utils/toast.js'
 import { ref, computed } from 'vue'
 import { useApi } from '../composables/useApi.js'
 
@@ -96,7 +97,7 @@ export const useModalStore = defineStore('modal', () => {
       })
     } catch (e) {
       current.value.tags = prev
-      window.__fcToast?.({ text: `Failed to remove tag: ${e.message}`, type: 'error' })
+      toast({ text: `Failed to remove tag: ${e.message}`, type: 'error' })
       throw e
     }
   }
diff --git a/frontend/src/stores/seriesManage.js b/frontend/src/stores/seriesManage.js
index 17f84ee..3967b68 100644
--- a/frontend/src/stores/seriesManage.js
+++ b/frontend/src/stores/seriesManage.js
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { toast } from '../utils/toast.js'
 import { ref } from 'vue'
 import { useApi } from '../composables/useApi.js'
 
@@ -59,7 +60,7 @@ export const useSeriesManageStore = defineStore('seriesManage', () => {
     })
     pickerSelection.value = []
     await refresh()
-    globalThis.window?.__fcToast?.({ text: 'Added to series', type: 'success' })
+    toast({ text: 'Added to series', type: 'success' })
   }
 
   async function remove(imageId) {
diff --git a/frontend/src/stores/suggestions.js b/frontend/src/stores/suggestions.js
index d9914e4..0e4447c 100644
--- a/frontend/src/stores/suggestions.js
+++ b/frontend/src/stores/suggestions.js
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { toast } from '../utils/toast.js'
 import { ref } from 'vue'
 import { useApi } from '../composables/useApi.js'
 
@@ -54,7 +55,7 @@ export const useSuggestionsStore = defineStore('suggestions', () => {
       body: { tag_id: tagId }
     })
     _drop(suggestion.category, s => s === suggestion)
-    window.__fcToast?.({
+    toast({
       text: `Tagged: ${suggestion.display_name}`,
       type: 'success'
     })
@@ -69,7 +70,7 @@ export const useSuggestionsStore = defineStore('suggestions', () => {
       }
     })
     _drop(suggestion.category, s => s === suggestion)
-    window.__fcToast?.({
+    toast({
       text: `Aliased & tagged: ${suggestion.display_name}`,
       type: 'success'
     })
diff --git a/frontend/src/utils/date.js b/frontend/src/utils/date.js
index f0ade54..16f6fd3 100644
--- a/frontend/src/utils/date.js
+++ b/frontend/src/utils/date.js
@@ -13,3 +13,22 @@ export function formatPostDate(iso) {
   if (isNaN(d.getTime())) return null
   return `${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}, ${d.getUTCFullYear()}`
 }
+
+// Compact relative formatter: "5m ago" (past) or "in 3h" (future). Null /
+// invalid input returns `nullText`. Pass { future: true } for upcoming
+// timestamps; a future time already elapsed reads as "imminent".
+export function formatRelative(iso, opts = {}) {
+  const { future = false, nullText = future ? '—' : 'Never' } = opts
+  if (!iso) return nullText
+  const then = new Date(iso).getTime()
+  if (isNaN(then)) return nullText
+  const diff = (then - Date.now()) / 1000  // +ve = future
+  const abs = Math.abs(diff)
+  let body
+  if (abs < 60) body = `${Math.floor(abs)}s`
+  else if (abs < 3600) body = `${Math.floor(abs / 60)}m`
+  else if (abs < 86400) body = `${Math.floor(abs / 3600)}h`
+  else body = `${Math.floor(abs / 86400)}d`
+  if (future) return diff <= 0 ? 'imminent' : `in ${body}`
+  return `${body} ago`
+}
diff --git a/frontend/src/utils/downloadStatus.js b/frontend/src/utils/downloadStatus.js
new file mode 100644
index 0000000..62821f5
--- /dev/null
+++ b/frontend/src/utils/downloadStatus.js
@@ -0,0 +1,21 @@
+// Single source of truth for the download-event status enum -> display
+// metadata (label/color/icon). Mirrors the backend ENUM
+// (pending|running|ok|error|skipped). Used by the stat chips, the filter
+// dropdown, and the event rows so they never drift apart.
+
+export const DOWNLOAD_STATUSES = [
+  { value: 'pending', label: 'Queued',    color: 'grey',    icon: 'mdi-clock-outline' },
+  { value: 'running', label: 'Running',   color: 'info',    icon: 'mdi-progress-clock' },
+  { value: 'ok',      label: 'Completed', color: 'success', icon: 'mdi-check-circle' },
+  { value: 'error',   label: 'Failed',    color: 'error',   icon: 'mdi-alert-circle' },
+  { value: 'skipped', label: 'Skipped',   color: 'warning', icon: 'mdi-skip-next' },
+]
+
+const _BY_VALUE = Object.fromEntries(DOWNLOAD_STATUSES.map((s) => [s.value, s]))
+
+export function downloadStatusMeta(value) {
+  return _BY_VALUE[value] || { value, label: value, color: 'grey', icon: 'mdi-help-circle' }
+}
+export const downloadStatusLabel = (v) => downloadStatusMeta(v).label
+export const downloadStatusColor = (v) => downloadStatusMeta(v).color
+export const downloadStatusIcon = (v) => downloadStatusMeta(v).icon
diff --git a/frontend/src/utils/toast.js b/frontend/src/utils/toast.js
new file mode 100644
index 0000000..114e017
--- /dev/null
+++ b/frontend/src/utils/toast.js
@@ -0,0 +1,8 @@
+// Centralized toast trigger. App.vue registers the actual snackbar on
+// window.__fcToast; this wraps the optional-chaining lookup so call sites
+// don't repeat `globalThis.window?.__fcToast?.(...)` everywhere.
+//
+// opts: { text: string, type?: 'success' | 'error' | 'info' | 'warning' }
+export function toast(opts) {
+  globalThis.window?.__fcToast?.(opts)
+}