feat(maintenance): live queue-depth bar under the backfill buttons

Each maintenance button (ML backfill, centroid recompute → ml queue;
thumbnail backfill → thumbnail queue) now shows a status bar with the live
pending count for its Celery queue, so the operator can see work is already
queued/running before re-triggering and piling on. MaintenancePanel polls
/api/system/activity/queues every 4s; QueueStatusBar reads the depth and
turns warning-colored when the queue is busy.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/components/settings/MaintenancePanel.vue

@@ -23,6 +23,8 @@
 </template>
 
 <script setup>
+import { onMounted, onUnmounted } from 'vue'
+
 import MLBackfillCard from './MLBackfillCard.vue'
 import CentroidRecomputeCard from './CentroidRecomputeCard.vue'
 import ThumbnailBackfillCard from './ThumbnailBackfillCard.vue'
@@ -31,6 +33,22 @@ import AllowlistTable from './AllowlistTable.vue'
 import AliasTable from './AliasTable.vue'
 import BackupCard from './BackupCard.vue'
 import LegacyMigrationCard from './LegacyMigrationCard.vue'
+import { useSystemActivityStore } from '../../stores/systemActivity.js'
+
+// Poll queue depths so each card's QueueStatusBar shows live pending
+// counts — the operator can see a backfill is already queued/running
+// before re-triggering it.
+const activity = useSystemActivityStore()
+let qTimer = null
+onMounted(() => {
+  activity.loadQueues()
+  qTimer = setInterval(() => {
+    if (!document.hidden) activity.loadQueues()
+  }, 4000)
+})
+onUnmounted(() => {
+  if (qTimer) { clearInterval(qTimer); qTimer = null }
+})
 </script>
 
 <style scoped>