Download Queue & Progress UI (#123)

* Add download queue tracking and UI integration

Introduces backend support for a download queue with item tracking, status updates, and session statistics. Adds frontend components and hooks for displaying and managing the download queue, including a dialog and toast indicator. Updates download logic to pre-add items to the queue, track progress, and handle completion, skipping, and failure states. Integrates @radix-ui/react-scroll-area for improved UI scrolling.

* Add session stats to DownloadQueue dialog

Introduces session statistics (downloaded amount, speed, and duration) to the DownloadQueue dialog for improved user feedback. Also adjusts dialog sizing for better display and removes the sm:max-w-lg restriction in dialog.tsx for more flexible width.

frontend/src/components/DownloadProgressToast.tsx

@@ -1,18 +1,35 @@
 import { useDownloadProgress } from "@/hooks/useDownloadProgress";
-import { Download } from "lucide-react";
+import { useDownloadQueueData } from "@/hooks/useDownloadQueueData";
+import { Download, ChevronRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
-export function DownloadProgressToast() {
+interface DownloadProgressToastProps {
+  onClick: () => void;
+}
+
+export function DownloadProgressToast({ onClick }: DownloadProgressToastProps) {
   const progress = useDownloadProgress();
+  const queueInfo = useDownloadQueueData();
 
-  if (!progress.is_downloading) {
+  // Show indicator if there are any queued or downloading items
+  // Don't show for completed/failed/skipped only
+  const hasActiveDownloads = queueInfo.queue.some(
+    item => item.status === "queued" || item.status === "downloading"
+  );
+
+  if (!hasActiveDownloads) {
     return null;
   }
 
   return (
     <div className="fixed bottom-4 left-4 z-50 animate-in slide-in-from-bottom-5 data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom-5">
-      <div className="bg-background border rounded-lg shadow-lg p-3">
+      <Button
+        variant="outline"
+        className="bg-background border rounded-lg shadow-lg p-3 h-auto hover:bg-muted/50 transition-colors cursor-pointer"
+        onClick={onClick}
+      >
         <div className="flex items-center gap-3">
-          <Download className="h-4 w-4 text-primary animate-bounce" />
+          <Download className={`h-4 w-4 text-primary ${progress.is_downloading ? 'animate-bounce' : ''}`} />
           <div className="flex flex-col min-w-[80px]">
             <p className="text-sm font-medium font-mono tabular-nums">
               {progress.mb_downloaded.toFixed(2)} MB
@@ -23,8 +40,9 @@ export function DownloadProgressToast() {
               </p>
             )}
           </div>
+          <ChevronRight className="h-4 w-4 text-muted-foreground ml-1" />
         </div>
-      </div>
+      </Button>
     </div>
   );
 }