From 9b252948f9d27d0ead5704a2fab25a05462b1681 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sun, 24 May 2026 21:07:57 -0400
Subject: [PATCH] =?UTF-8?q?fc3i(ui):=20QueuesTable.vue=20=E2=80=94=20share?=
 =?UTF-8?q?d=20queue/worker/recent=20table=20(compact=20+=20detailed)?=
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>
---
 .../src/components/settings/QueuesTable.vue   | 109 ++++++++++++++++++
 1 file changed, 109 insertions(+)
 create mode 100644 frontend/src/components/settings/QueuesTable.vue

diff --git a/frontend/src/components/settings/QueuesTable.vue b/frontend/src/components/settings/QueuesTable.vue
new file mode 100644
index 0000000..2edcfb2
--- /dev/null
+++ b/frontend/src/components/settings/QueuesTable.vue
@@ -0,0 +1,109 @@
+<template>
+  <v-table density="compact" class="fc-queues-table">
+    <thead>
+      <tr>
+        <th>Queue</th>
+        <th class="text-right">Depth</th>
+        <th class="text-right">Workers</th>
+        <th v-if="!compact" class="text-right">Active</th>
+        <th class="text-right">Last min: ok / err</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="q in QUEUE_NAMES" :key="q">
+        <td>{{ q }}</td>
+        <td class="text-right fc-tabular" :class="depthClass(q)">
+          {{ formatDepth(q) }}
+        </td>
+        <td class="text-right fc-tabular">{{ workerCount(q) }}</td>
+        <td v-if="!compact" class="text-right fc-tabular">{{ activeCount(q) }}</td>
+        <td class="text-right fc-tabular">
+          <span class="fc-ok">{{ recentOk(q) }}</span>
+          <span class="fc-sep">/</span>
+          <span :class="recentErr(q) > 0 ? 'fc-err' : 'fc-muted'">
+            {{ recentErr(q) }}<span v-if="recentErr(q) > 0"> ⚠</span>
+          </span>
+        </td>
+      </tr>
+    </tbody>
+  </v-table>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  queues: { type: Object, default: null },     // store.queues
+  workers: { type: Object, default: null },    // store.workers
+  recentMinute: { type: Array, default: () => [] }, // store.recentMinute
+  compact: { type: Boolean, default: false },
+})
+
+const QUEUE_NAMES = [
+  'default', 'import', 'thumbnail', 'ml',
+  'download', 'scan', 'maintenance',
+]
+
+function formatDepth(name) {
+  const d = props.queues?.queues?.[name]
+  if (d == null) return '—'
+  return d.toLocaleString()
+}
+
+function depthClass(name) {
+  const d = props.queues?.queues?.[name]
+  const workers = workerCount(name)
+  // Queue has depth but no workers → warning.
+  if (d != null && d > 0 && workers === 0) return 'fc-warn'
+  return ''
+}
+
+function workerCount(name) {
+  if (!props.workers?.workers) return 0
+  let count = 0
+  for (const info of Object.values(props.workers.workers)) {
+    if (info.queues?.includes(name)) count++
+  }
+  return count
+}
+
+function activeCount(name) {
+  if (!props.workers?.workers) return 0
+  // Active count is per-worker, not per-queue. Approximate: sum of
+  // active_count across workers that subscribe to this queue.
+  let count = 0
+  for (const info of Object.values(props.workers.workers)) {
+    if (info.queues?.includes(name)) count += info.active_count || 0
+  }
+  return count
+}
+
+const recentByQueue = computed(() => {
+  const out = {}
+  for (const r of props.recentMinute) {
+    if (!out[r.queue]) out[r.queue] = { ok: 0, err: 0 }
+    if (r.status === 'ok') out[r.queue].ok++
+    else if (r.status === 'error' || r.status === 'timeout') out[r.queue].err++
+  }
+  return out
+})
+
+function recentOk(name) { return recentByQueue.value[name]?.ok || 0 }
+function recentErr(name) { return recentByQueue.value[name]?.err || 0 }
+</script>
+
+<style scoped>
+.fc-queues-table { background: transparent; }
+.fc-tabular {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: 'tnum';
+}
+.fc-ok { color: rgb(var(--v-theme-success, 76 175 80)); }
+.fc-err { color: rgb(var(--v-theme-error, 220 80 80)); }
+.fc-warn { color: rgb(var(--v-theme-warning, 255 179 0)); font-weight: 500; }
+.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
+.fc-sep {
+  margin: 0 4px;
+  color: rgb(var(--v-theme-on-surface-variant));
+}
+</style>