From 84d8c3e635e8e3acaffff061917bbcf0b28d4868 Mon Sep 17 00:00:00 2001
From: John Lightner <jlightner@a.xpltd.co>
Date: Wed, 1 Apr 2026 00:36:48 -0500
Subject: [PATCH] MAESTRO: Integrate DownloadProgressBar into Queue page for
 active downloads

Added QueueItemProgress wrapper component that shows a live progress bar
(percent, speed, ETA) for items with status 'downloading' when WebSocket
progress data is available, falling back to the existing StatusBadge otherwise.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../WEBSOCKET-PROGRESS-01.md                  |  2 +-
 src/frontend/src/pages/Queue.tsx              | 23 +++++++++++++------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/Auto Run Docs/Initiation/2026-03-31-WebSocket-Progress-And-Polish/WEBSOCKET-PROGRESS-01.md b/Auto Run Docs/Initiation/2026-03-31-WebSocket-Progress-And-Polish/WEBSOCKET-PROGRESS-01.md
index 2a2c4ee..97f038b 100644
--- a/Auto Run Docs/Initiation/2026-03-31-WebSocket-Progress-And-Polish/WEBSOCKET-PROGRESS-01.md	
+++ b/Auto Run Docs/Initiation/2026-03-31-WebSocket-Progress-And-Polish/WEBSOCKET-PROGRESS-01.md	
@@ -11,7 +11,7 @@ The backend event bus, WebSocket route, progress parser, and frontend context/ho
   - Ensure the provider is inside the existing `QueryClientProvider` (check `main.tsx` for provider ordering)
   - **Note:** Already wired in `main.tsx` (lines 25-29) from commit 0541a5f. Provider wraps entire app inside QueryClientProvider. No changes needed.
 
-- [ ] Integrate DownloadProgressBar into the Queue page for actively downloading items:
+- [x] Integrate DownloadProgressBar into the Queue page for actively downloading items:
   - Read `src/frontend/src/pages/Queue.tsx` and `src/frontend/src/components/DownloadProgressBar.tsx`
   - Search the existing codebase for how `useDownloadProgress` is intended to be used
   - In Queue.tsx, import `useDownloadProgress` from the DownloadProgressContext and `DownloadProgressBar` component
diff --git a/src/frontend/src/pages/Queue.tsx b/src/frontend/src/pages/Queue.tsx
index 2f0b68b..4bd7fee 100644
--- a/src/frontend/src/pages/Queue.tsx
+++ b/src/frontend/src/pages/Queue.tsx
@@ -2,6 +2,8 @@ import { useState, useMemo } from 'react';
 import { ListOrdered, RotateCcw, X, Loader, RefreshCw } from 'lucide-react';
 import { Table, type Column } from '../components/Table';
 import { StatusBadge } from '../components/StatusBadge';
+import { DownloadProgressBar } from '../components/DownloadProgressBar';
+import { useDownloadProgress } from '../contexts/DownloadProgressContext';
 import { useQueue, useRetryQueueItem, useCancelQueueItem } from '../api/hooks/useQueue';
 import type { QueueItem, QueueStatus } from '@shared/types/index';
 
@@ -29,6 +31,18 @@ const STATUS_TABS: { value: QueueStatus | ''; label: string }[] = [
   { value: 'failed', label: 'Failed' },
 ];
 
+// ── Queue item progress wrapper ──
+
+function QueueItemProgress({ item }: { item: QueueItem }) {
+  const progress = useDownloadProgress(item.contentItemId);
+
+  if (item.status === 'downloading' && progress) {
+    return <DownloadProgressBar progress={progress} />;
+  }
+
+  return <StatusBadge status={item.status} pulse={item.status === 'downloading'} />;
+}
+
 // ── Component ──
 
 export function Queue() {
@@ -75,14 +89,9 @@ export function Queue() {
       {
         key: 'status',
         label: 'Status',
-        width: '130px',
+        width: '160px',
         sortable: true,
-        render: (item) => (
-          <StatusBadge
-            status={item.status}
-            pulse={item.status === 'downloading'}
-          />
-        ),
+        render: (item) => <QueueItemProgress item={item} />,
       },
       {
         key: 'priority',