feat: Inicializa a aplicação Downloader com backend para gerenciamento de sessões e downloads, e frontend para interação.

web/src/components/feature/DownloadForm.tsx

@@ -1,75 +1,54 @@
 import { useState } from "react";
-import type { FormEvent } from "react";
-import { Download } from "lucide-react";
 import { Button } from "../ui/Button";
-import { Textarea } from "../ui/Textarea";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/Card";
+import { Input } from "../ui/Input";
+import { Download } from "lucide-react";
+import { z } from "zod";
+
+const formSchema = z.object({
+    url: z.string().url("Please enter a valid URL"),
+});
 
 interface DownloadFormProps {
-    onSubmit: (urls: string[]) => void;
+    onDownload: (url: string) => void;
 }
 
-export function DownloadForm({ onSubmit }: DownloadFormProps) {
-    const [text, setText] = useState("");
+export function DownloadForm({ onDownload }: DownloadFormProps) {
+    const [url, setUrl] = useState("");
     const [error, setError] = useState<string | null>(null);
 
-    const handleSubmit = (e: FormEvent) => {
+    const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
         setError(null);
 
-        const urls = text
-            .split(/\r?\n/)
-            .map((u) => u.trim())
-            .filter(Boolean);
+        const result = formSchema.safeParse({ url });
 
-        if (urls.length === 0) {
-            setError("Please enter at least one URL.");
+        if (!result.success) {
+            setError(result.error.errors[0].message);
             return;
         }
 
-        const invalidUrl = urls.find((u) => {
-            try {
-                new URL(u);
-                return false;
-            } catch {
-                return true;
-            }
-        });
-
-        if (invalidUrl) {
-            setError(`Invalid URL detected: ${invalidUrl}`);
-            return;
-        }
-
-        onSubmit(urls);
-        setText("");
+        onDownload(url);
+        setUrl("");
     };
 
     return (
-        <Card className="border-border/50 bg-card/50 backdrop-blur-sm">
-            <CardHeader>
-                <CardTitle>New Download</CardTitle>
-                <CardDescription>
-                    Enter direct links (HTTP/HTTPS) to stream via VPS. One URL per line.
-                </CardDescription>
-            </CardHeader>
-            <CardContent>
-                <form onSubmit={handleSubmit} className="space-y-4">
-                    <Textarea
-                        placeholder="https://example.com/file.iso"
-                        className="min-h-[120px] font-mono text-sm"
-                        value={text}
-                        onChange={(e) => setText(e.target.value)}
+        <form onSubmit={handleSubmit} className="flex w-full flex-col gap-4">
+            <div className="flex w-full items-start gap-2">
+                <div className="flex-1 space-y-1">
+                    <Input
+                        type="url"
+                        placeholder="https://example.com/file.zip"
+                        value={url}
+                        onChange={(e) => setUrl(e.target.value)}
+                        className={error ? "border-destructive focus-visible:ring-destructive" : ""}
                     />
-                    {error && <p className="text-sm text-destructive">{error}</p>}
-                    <div className="flex justify-end">
-                        <Button type="submit" className="w-full sm:w-auto">
-                            <Download className="mr-2 size-4" />
-                            Start Download
-                        </Button>
-                    </div>
-                </form>
-            </CardContent>
-        </Card>
+                    {error && <p className="text-xs text-destructive">{error}</p>}
+                </div>
+                <Button type="submit">
+                    <Download className="mr-2 h-4 w-4" />
+                    Download
+                </Button>
+            </div>
+        </form>
     );
 }

web/src/components/feature/DownloadItem.tsx

@@ -1,153 +1,137 @@
 import {
-    Download,
     FileCheck,
     FileWarning,
     Loader2,
-    Play,
+    Server,
+    HardDrive
 } from "lucide-react";
 import { Button } from "../ui/Button";
 import { Card, CardContent } from "../ui/Card";
 import { Progress } from "../ui/ProgressBar";
 import { formatBytes, formatSpeed } from "../../lib/utils";
 
-export type DownloadStatus = "pending" | "downloading" | "completed" | "error";
+const API_URL = import.meta.env.VITE_API_URL || "http://localhost:3000";
+
+export type DownloadStatus = "queued" | "downloading" | "completed" | "error";
 
 export type DownloadItemData = {
-    id: number;
+    id: string;
+    sessionId: string;
     url: string;
+    filename: string;
     status: DownloadStatus;
-    progress: number | null;
-    receivedBytes?: number;
-    totalBytes?: number;
-    speedBytesPerSecond?: number;
-    speedHistory: number[];
+    progress: number;
+    totalBytes: number;
+    receivedBytes: number;
+    speed: number;
     error?: string;
+    createdAt: number;
 };
 
 interface DownloadItemProps {
     item: DownloadItemData;
-    onRetry: (id: number, url: string) => void;
 }
 
-export function DownloadItem({ item, onRetry }: DownloadItemProps) {
+export function DownloadItem({ item }: DownloadItemProps) {
     const isCompleted = item.status === "completed";
     const isError = item.status === "error";
-    const isDownloading = item.status === "downloading";
+    const isQueued = item.status === "queued";
+
+    const handleDownloadFile = () => {
+        const download = async () => {
+            try {
+                const sessionId = localStorage.getItem("downloader_session_id") || "";
+                const res = await fetch(`${API_URL}/api/download/${item.id}`, {
+                    headers: { "x-session-id": sessionId }
+                });
+                if (!res.ok) throw new Error("Download failed");
+
+                const blob = await res.blob();
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement("a");
+                a.href = url;
+                a.download = item.filename;
+                document.body.appendChild(a);
+                a.click();
+                window.URL.revokeObjectURL(url);
+                document.body.removeChild(a);
+            } catch (e) {
+                alert("Failed to download file");
+            }
+        };
+
+        download();
+    };
 
     return (
         <Card className="overflow-hidden transition-all hover:bg-muted/50">
             <CardContent className="p-4">
-                <div className="flex items-start justify-between gap-4">
-                    <div className="min-w-0 flex-1 space-y-3">
-                        <div className="flex items-center gap-2">
-                            <div
-                                className={`flex size-8 shrink-0 items-center justify-center rounded-full bg-secondary text-muted-foreground ${isCompleted ? "bg-green-500/10 text-green-500" : ""
-                                    } ${isError ? "bg-red-500/10 text-red-500" : ""} ${isDownloading ? "bg-primary/10 text-primary" : ""
-                                    }`}
-                            >
-                                {isCompleted ? (
-                                    <FileCheck className="size-4" />
-                                ) : isError ? (
-                                    <FileWarning className="size-4" />
-                                ) : isDownloading ? (
-                                    <Download className="size-4 animate-bounce" />
-                                ) : (
-                                    <Loader2 className="size-4 animate-spin" />
-                                )}
+                <div className="flex items-start gap-4">
+                    <div className="mt-1">
+                        {isCompleted ? (
+                            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-green-500/10 text-green-500">
+                                <FileCheck className="h-5 w-5" />
                             </div>
-                            <div className="min-w-0 flex-1">
-                                <p className="truncate text-sm font-medium leading-none">
-                                    {item.url.split("/").pop() || item.url}
-                                </p>
-                                <p className="mt-1 truncate text-xs text-muted-foreground">
-                                    {item.url}
-                                </p>
+                        ) : isError ? (
+                            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-destructive/10 text-destructive">
+                                <FileWarning className="h-5 w-5" />
                             </div>
-                        </div>
-
-                        <div className="space-y-1">
-                            <div className="flex items-center justify-between text-xs text-muted-foreground">
-                                <span>{item.progress ?? 0}%</span>
-                                <span>
-                                    <span>
-                                        {item.status === "downloading" &&
-                                            formatSpeed(item.speedBytesPerSecond)}
-                                    </span>
-                                </span>
+                        ) : isQueued ? (
+                            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-secondary text-secondary-foreground">
+                                <Server className="h-5 w-5 animate-pulse" />
                             </div>
-                            <Progress
-                                value={item.progress}
-                                className={`h-2 ${isError ? "bg-red-900/20" : ""} ${isCompleted ? "bg-green-900/20" : ""
-                                    }`}
-                                indicatorClassName={`${isError ? "bg-red-500" : ""} ${isCompleted ? "bg-green-500" : ""
-                                    }`}
-                            />
-
-                            {/* Sparkline for speed history */}
-                            {item.status === "downloading" && item.speedHistory.length > 1 && (
-                                <div className="h-8 w-full overflow-hidden opacity-50">
-                                    <svg
-                                        className="h-full w-full"
-                                        viewBox={`0 0 ${item.speedHistory.length - 1} 100`}
-                                        preserveAspectRatio="none"
-                                    >
-                                        <path
-                                            d={`M 0,100 ${item.speedHistory
-                                                .map((s, i) => {
-                                                    const max = Math.max(...item.speedHistory);
-                                                    const y = max > 0 ? 100 - (s / max) * 100 : 100;
-                                                    return `L ${i},${y}`;
-                                                })
-                                                .join(" ")} L ${item.speedHistory.length - 1},100 Z`}
-                                            fill="currentColor"
-                                            className="text-primary/20"
-                                        />
-                                        <path
-                                            d={`M 0,${100 - (item.speedHistory[0] / Math.max(...item.speedHistory)) * 100} ${item.speedHistory
-                                                .map((s, i) => {
-                                                    const max = Math.max(...item.speedHistory);
-                                                    const y = max > 0 ? 100 - (s / max) * 100 : 100;
-                                                    return `L ${i},${y}`;
-                                                })
-                                                .join(" ")}`}
-                                            fill="none"
-                                            stroke="currentColor"
-                                            strokeWidth="1"
-                                            className="text-primary"
-                                            vectorEffect="non-scaling-stroke"
-                                        />
-                                    </svg>
-                                </div>
-                            )}
-
-                            <div className="flex items-center justify-between text-xs text-muted-foreground">
-                                <span>
-                                    {formatBytes(item.receivedBytes)} /{" "}
-                                    {formatBytes(item.totalBytes)}
-                                </span>
-                                <span className="capitalize">{item.status}</span>
-                            </div>
-                        </div>
-
-                        {isError && (
-                            <div className="rounded-md bg-destructive/10 p-2 text-xs text-destructive">
-                                {item.error}
+                        ) : (
+                            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
+                                <Loader2 className="h-5 w-5 animate-spin" />
                             </div>
                         )}
                     </div>
 
-                    <div className="flex flex-col gap-2">
+                    <div className="flex-1 space-y-1 min-w-0">
+                        <div className="flex items-start justify-between gap-2">
+                            <div className="space-y-1 truncate">
+                                <h3 className="font-medium leading-none truncate" title={item.filename || item.url}>
+                                    {item.filename || item.url}
+                                </h3>
+                                <p className="text-xs text-muted-foreground truncate" title={item.url}>
+                                    {item.url}
+                                </p>
+                            </div>
+                            {isCompleted && (
+                                <Button size="sm" onClick={handleDownloadFile} className="shrink-0 gap-2">
+                                    <HardDrive className="w-4 h-4" />
+                                    Save to Disk
+                                </Button>
+                            )}
+                        </div>
+
+                        {/* Progress Section */}
+                        {!isCompleted && !isError && (
+                            <div className="space-y-2 pt-2">
+                                <div className="flex justify-between text-xs text-muted-foreground">
+                                    <span>{isQueued ? "Queued on server..." : item.status}</span>
+                                    <span>{formatBytes(item.receivedBytes || 0)} / {item.totalBytes ? formatBytes(item.totalBytes) : "??"}</span>
+                                </div>
+                                <Progress value={item.progress || 0} className="h-1.5" />
+                                <div className="flex justify-between text-xs text-muted-foreground">
+                                    <span>{item.speed ? formatSpeed(item.speed) : "0 B/s"}</span>
+                                    <span>{item.progress ? `${Math.round(item.progress)}%` : "0%"}</span>
+                                </div>
+                            </div>
+                        )}
+
+                        {isCompleted && (
+                            <div className="pt-2 flex items-center gap-2 text-xs text-green-500">
+                                <FileCheck className="w-3 h-3" />
+                                <span>Ready for download ({formatBytes(item.totalBytes)})</span>
+                            </div>
+                        )}
+
                         {isError && (
-                            <Button
-                                variant="outline"
-                                size="icon"
-                                onClick={() => onRetry(item.id, item.url)}
-                                className="h-8 w-8"
-                            >
-                                <Play className="size-4" />
-                            </Button>
+                            <div className="text-sm text-destructive pt-1">
+                                {item.error || "Unknown error occurred"}
+                            </div>
                         )}
-                        {/* Placeholder for pause/cancel in future */}
                     </div>
                 </div>
             </CardContent>

web/src/components/feature/SessionTimer.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+import { Clock } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+interface SessionTimerProps {
+    expiresAt: string | null;
+    className?: string;
+}
+
+export function SessionTimer({ expiresAt, className }: SessionTimerProps) {
+    const [timeLeft, setTimeLeft] = useState<string>("--:--");
+    const [isCritical, setIsCritical] = useState(false);
+
+    useEffect(() => {
+        if (!expiresAt) return;
+
+        const tick = () => {
+            const now = Date.now();
+            const end = new Date(expiresAt).getTime();
+            const diff = Math.max(0, end - now);
+
+            if (diff <= 0) {
+                setTimeLeft("Expired");
+                setIsCritical(true);
+                return;
+            }
+
+            const minutes = Math.floor(diff / 60000);
+            const seconds = Math.floor((diff % 60000) / 1000);
+
+            setTimeLeft(`${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`);
+            setIsCritical(minutes < 5); // Critical if less than 5 minutes
+        };
+
+        tick(); // Initial call
+        const interval = setInterval(tick, 1000);
+        return () => clearInterval(interval);
+    }, [expiresAt]);
+
+    if (!expiresAt) return null;
+
+    return (
+        <div className={cn("flex items-center gap-2 text-sm font-medium", isCritical ? "text-destructive" : "text-muted-foreground", className)}>
+            <Clock className="w-4 h-4" />
+            <span>Session: {timeLeft}</span>
+        </div>
+    );
+}

web/src/components/ui/Alert.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+const Alert = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & { variant?: "default" | "destructive" }
+>(({ className, variant = "default", ...props }, ref) => (
+    <div
+        ref={ref}
+        role="alert"
+        className={cn(
+            "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+            variant === "destructive" &&
+            "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+            className
+        )}
+        {...props}
+    />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+    <h5
+        ref={ref}
+        className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+        {...props}
+    />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("text-sm [&_p]:leading-relaxed", className)}
+        {...props}
+    />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }