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/QueueStatusBar.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="fc-qbar" :class="`fc-qbar--${state}`" :title="hint">
+    <v-icon size="14" class="fc-qbar__icon">{{ icon }}</v-icon>
+    <span>{{ label }}</span>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+import { useSystemActivityStore } from '../../stores/systemActivity.js'
+
+const props = defineProps({
+  // Celery queue these buttons feed (see celery_app.task_routes).
+  queue: { type: String, required: true },
+  queueLabel: { type: String, default: '' },
+})
+
+const store = useSystemActivityStore()
+
+// Redis LLEN per queue from /api/system/activity/queues; null when the
+// broker read failed or hasn't loaded yet.
+const depth = computed(() => {
+  const q = store.queues?.queues
+  return q ? (q[props.queue] ?? null) : null
+})
+const state = computed(() => {
+  if (depth.value == null) return 'unknown'
+  return depth.value > 0 ? 'busy' : 'idle'
+})
+const icon = computed(() => ({
+  busy: 'mdi-progress-clock',
+  idle: 'mdi-check-circle-outline',
+  unknown: 'mdi-help-circle-outline',
+}[state.value]))
+const qname = computed(() => props.queueLabel || props.queue)
+const label = computed(() => {
+  if (depth.value == null) return `${qname.value} queue · status unavailable`
+  if (depth.value === 0) return `${qname.value} queue idle — nothing pending`
+  return `${depth.value} pending in the ${qname.value} queue`
+})
+const hint = computed(() =>
+  state.value === 'busy'
+    ? `The ${qname.value} queue already has ${depth.value} task(s) waiting — running again now just adds to that backlog.`
+    : '',
+)
+</script>
+
+<style scoped>
+.fc-qbar {
+  display: flex; align-items: center; gap: 6px;
+  margin-top: 12px;
+  padding: 5px 10px;
+  border-radius: 6px;
+  font-size: 0.78rem;
+  font-variant-numeric: tabular-nums;
+}
+.fc-qbar__icon { flex: 0 0 auto; }
+.fc-qbar--idle,
+.fc-qbar--unknown {
+  color: rgb(var(--v-theme-on-surface-variant));
+  background: rgb(var(--v-theme-on-surface) / 0.04);
+}
+.fc-qbar--busy {
+  color: rgb(var(--v-theme-warning));
+  background: rgb(var(--v-theme-warning) / 0.12);
+  font-weight: 600;
+}
+</style>