feat: Adiciona um sistema de agentes abrangente com diversas habilidades e fluxos de trabalho, e implementa um novo componente de formulário de download na interface web.

2026-02-14 18:35:35 -03:00
1 parent 456f0fe056
commit c2cadc25f3
@@ -0,0 +1,75 @@
+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";
+
+interface DownloadFormProps {
+    onSubmit: (urls: string[]) => void;
+}
+
+export function DownloadForm({ onSubmit }: DownloadFormProps) {
+    const [text, setText] = useState("");
+    const [error, setError] = useState<string | null>(null);
+
+    const handleSubmit = (e: FormEvent) => {
+        e.preventDefault();
+        setError(null);
+
+        const urls = text
+            .split(/\r?\n/)
+            .map((u) => u.trim())
+            .filter(Boolean);
+
+        if (urls.length === 0) {
+            setError("Please enter at least one URL.");
+            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("");
+    };
+
+    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)}
+                    />
+                    {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>
+    );
+}
@@ -0,0 +1,156 @@
+import {
+    Download,
+    FileCheck,
+    FileWarning,
+    Loader2,
+    Play,
+} 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";
+
+export type DownloadItemData = {
+    id: number;
+    url: string;
+    status: DownloadStatus;
+    progress: number | null;
+    receivedBytes?: number;
+    totalBytes?: number;
+    speedBytesPerSecond?: number;
+    speedHistory: number[];
+    error?: string;
+};
+
+interface DownloadItemProps {
+    item: DownloadItemData;
+    onRetry: (id: number, url: string) => void;
+}
+
+export function DownloadItem({ item, onRetry }: DownloadItemProps) {
+    const isCompleted = item.status === "completed";
+    const isError = item.status === "error";
+    const isDownloading = item.status === "downloading";
+
+    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>
+                            <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>
+                            </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>
+                            </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>
+                        )}
+                    </div>
+
+                    <div className="flex flex-col gap-2">
+                        {isError && (
+                            <Button
+                                variant="outline"
+                                size="icon"
+                                onClick={() => onRetry(item.id, item.url)}
+                                className="h-8 w-8"
+                            >
+                                <Play className="size-4" />
+                            </Button>
+                        )}
+                        {/* Placeholder for pause/cancel in future */}
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}
@@ -0,0 +1,41 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+export interface ButtonProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "default" | "secondary" | "outline" | "ghost" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, variant = "default", size = "default", ...props }, ref) => {
+        return (
+            <button
+                className={cn(
+                    "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+                    {
+                        "bg-primary text-primary-foreground hover:bg-primary/90":
+                            variant === "default",
+                        "bg-secondary text-secondary-foreground hover:bg-secondary/80":
+                            variant === "secondary",
+                        "border border-input bg-background hover:bg-accent hover:text-accent-foreground":
+                            variant === "outline",
+                        "hover:bg-accent hover:text-accent-foreground": variant === "ghost",
+                        "bg-destructive text-destructive-foreground hover:bg-destructive/90":
+                            variant === "destructive",
+                        "h-10 px-4 py-2": size === "default",
+                        "h-9 rounded-md px-3": size === "sm",
+                        "h-11 rounded-md px-8": size === "lg",
+                        "h-10 w-10": size === "icon",
+                    },
+                    className
+                )}
+                ref={ref}
+                {...props}
+            />
+        );
+    }
+);
+Button.displayName = "Button";
+
+export { Button };
@@ -0,0 +1,85 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const Card = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            "rounded-lg border bg-card text-card-foreground shadow-sm",
+            className
+        )}
+        {...props}
+    />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("flex flex-col space-y-1.5 p-6", className)}
+        {...props}
+    />
+));
+Card.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+    <h3
+        ref={ref}
+        className={cn(
+            "text-2xl font-semibold leading-none tracking-tight",
+            className
+        )}
+        {...props}
+    />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <p
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("flex items-center p-6 pt-0", className)}
+        {...props}
+    />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+    Card,
+    CardHeader,
+    CardFooter,
+    CardTitle,
+    CardDescription,
+    CardContent,
+};
@@ -0,0 +1,24 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+export interface InputProps
+    extends React.InputHTMLAttributes<HTMLInputElement> { }
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+    ({ className, type, ...props }, ref) => {
+        return (
+            <input
+                type={type}
+                className={cn(
+                    "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                    className
+                )}
+                ref={ref}
+                {...props}
+            />
+        );
+    }
+);
+Input.displayName = "Input";
+
+export { Input };
@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+import { MoveDown, Server } from "lucide-react";
+
+type LayoutProps = {
+    children: ReactNode;
+};
+
+export function Layout({ children }: LayoutProps) {
+    return (
+        <div className="min-h-screen bg-background text-foreground font-sans antialiased selection:bg-primary selection:text-primary-foreground">
+            <div className="absolute inset-0 -z-10 h-full w-full bg-background bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]"></div>
+            <div className="absolute left-0 right-0 top-0 -z-10 m-auto h-[310px] w-[310px] rounded-full bg-primary/20 opacity-20 blur-[100px]"></div>
+
+            <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+                <div className="container flex h-14 max-w-screen-2xl items-center px-4 md:px-8">
+                    <div className="mr-4 flex items-center space-x-2">
+                        <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                            <MoveDown className="size-5" />
+                        </div>
+                        <span className="hidden font-bold sm:inline-block">
+                            Ephemeral Downloader
+                        </span>
+                    </div>
+                    <div className="flex flex-1 items-center justify-end space-x-2 md:justify-end">
+                        <nav className="flex items-center space-x-2 text-sm font-medium text-muted-foreground">
+                            <div className="flex items-center gap-2 rounded-full border border-border bg-secondary/50 px-3 py-1 text-xs">
+                                <Server className="size-3" />
+                                <span>VPS Proxy Active</span>
+                            </div>
+                        </nav>
+                    </div>
+                </div>
+            </header>
+            <main className="container max-w-screen-xl py-6 md:py-10 px-4 md:px-8">
+                {children}
+            </main>
+        </div>
+    );
+}
@@ -0,0 +1,36 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: number | null;
+    max?: number;
+    indicatorClassName?: string;
+}
+
+const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+    ({ className, value, max = 100, indicatorClassName, ...props }, ref) => {
+        const percent = Math.min(Math.max(0, value || 0), max);
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    "relative h-2 w-full overflow-hidden rounded-full bg-secondary",
+                    className
+                )}
+                {...props}
+            >
+                <div
+                    className={cn(
+                        "h-full w-full flex-1 bg-primary transition-all duration-200 ease-in-out",
+                        indicatorClassName
+                    )}
+                    style={{ transform: `translateX(-${100 - (percent / max) * 100}%)` }}
+                />
+            </div>
+        );
+    }
+);
+Progress.displayName = "Progress";
+
+export { Progress };
@@ -0,0 +1,23 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+export interface TextareaProps
+    extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { }
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+    ({ className, ...props }, ref) => {
+        return (
+            <textarea
+                className={cn(
+                    "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                    className
+                )}
+                ref={ref}
+                {...props}
+            />
+        );
+    }
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };