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 ;
+ }
+
+ return ;
+}
+
// ── Component ──
export function Queue() {
@@ -75,14 +89,9 @@ export function Queue() {
{
key: 'status',
label: 'Status',
- width: '130px',
+ width: '160px',
sortable: true,
- render: (item) => (
-
- ),
+ render: (item) => ,
},
{
key: 'priority',