fix(dashboard): show extractor progress counts instead of queue message counts

The extractor panel was displaying RabbitMQ queue message counts (pending
messages for consumers) instead of the actual extraction progress from the
extractor's /health endpoint. Now uses extraction_progress for per-type
counts and last_extraction_time for active/idle detection. Also adds a
total records display to the panel.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: SimplicityGuy

dashboard/dashboard.py

@@ -72,6 +72,8 @@ class ServiceStatus(BaseModel):
     current_task: str | None
     progress: float | None  # 0.0 to 1.0
     error: str | None
+    extraction_progress: dict[str, int] | None = None  # extractor only: per-type counts + total
+    last_extraction_time: dict[str, float | None] | None = None  # extractor only: seconds since last activity
 
 
 class QueueInfo(BaseModel):
@@ -249,6 +251,8 @@ async def get_service_statuses(self) -> list[ServiceStatus]:
                                 current_task=data.get("current_task"),
                                 progress=data.get("progress"),
                                 error=None,
+                                extraction_progress=data.get("extraction_progress"),
+                                last_extraction_time=data.get("last_extraction_time"),
                             )
                         )
                     else:

dashboard/static/dashboard.js

@@ -165,6 +165,38 @@ class Dashboard {
                 badge.className = this._serviceBadgeClasses(service.status);
                 badge.textContent = this._statusLabel(service.status);
             }
+
+            // Extractor card – use extraction_progress from health endpoint
+            if (service.name === 'extractor' && service.extraction_progress) {
+                const TYPES = ['masters', 'releases', 'artists', 'labels'];
+                const progress = service.extraction_progress;
+                const elapsed = service.last_extraction_time || {};
+
+                TYPES.forEach(type => {
+                    const el = document.getElementById(`extractor-${type}-state`);
+                    if (!el) return;
+                    const count = progress[type] || 0;
+                    // Active if last extraction was within 30 seconds
+                    const active = elapsed[type] != null && elapsed[type] < 30;
+                    if (active) {
+                        el.textContent = `Processing (${count.toLocaleString()})`;
+                        el.className = 'text-blue-400';
+                    } else if (count > 0) {
+                        el.textContent = 'Idle';
+                        el.className = 'text-emerald-400';
+                    } else {
+                        el.textContent = 'Idle';
+                        el.className = 'text-emerald-400';
+                    }
+                });
+
+                // Update total records
+                const totalEl = document.getElementById('extractor-total-records');
+                if (totalEl) {
+                    const total = progress.total || 0;
+                    totalEl.textContent = total > 0 ? total.toLocaleString() : '—';
+                }
+            }
         });
     }
 
@@ -206,21 +238,6 @@ class Dashboard {
         const activeGraphMap = isDlq ? graphinatorDlqMap : graphinatorMap;
         const activeTableMap = isDlq ? tableInatorDlqMap : tableInatorMap;
 
-        // Extractor card – queue state based on publish rate (always uses regular queues).
-        TYPES.forEach(type => {
-            const el = document.getElementById(`extractor-${type}-state`);
-            if (!el) return;
-            const q = graphinatorMap[type] || tableInatorMap[type];
-            if (q) {
-                const processing = q.message_rate > 0;
-                el.textContent = processing ? `Processing (${q.messages.toLocaleString()})` : 'Idle';
-                el.className = processing ? 'text-blue-400' : 'text-emerald-400';
-            } else {
-                el.textContent = '—';
-                el.className = 'text-zinc-500';
-            }
-        });
-
         // Graphinator card – total messages in active queue set.
         TYPES.forEach(type => {
             const el = document.getElementById(`graphinator-${type}-count`);

dashboard/static/index.html

@@ -142,6 +142,10 @@ <h3 class="text-sm font-semibold flex items-center gap-2">
                     <span>Labels</span>
                     <span id="extractor-labels-state" class="text-zinc-500">—</span>
                 </div>
+                <div class="flex justify-between text-[10px] text-zinc-500 uppercase font-bold tracking-wider pt-3 mt-1 border-t border-[#2D2D2D]">
+                    <span>Total Records</span>
+                    <span id="extractor-total-records" class="text-white normal-case font-mono">—</span>
+                </div>
             </div>
         </div>