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.

web/package.json

@@ -10,19 +10,26 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.564.0",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@tailwindcss/postcss": "^4.1.18",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.24",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4"

web/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        "@tailwindcss/postcss": {},
+        autoprefixer: {},
+    },
+}

web/src/App.tsx

@@ -1,47 +1,13 @@
 import { useState } from "react";
-import type { FormEvent } from "react";
-import "./App.css";
+import { Layout } from "./components/ui/Layout";
+import { DownloadForm } from "./components/feature/DownloadForm";
+import { DownloadItem, type DownloadItemData } from "./components/feature/DownloadItem";
+import { Card, CardContent, CardHeader, CardTitle } from "./components/ui/Card";
 
 const API_URL = import.meta.env.VITE_API_URL ?? "http://localhost:3000";
 
-type DownloadStatus = "pending" | "downloading" | "completed" | "error";
-
-type DownloadItem = {
-  id: number;
-  url: string;
-  status: DownloadStatus;
-  progress: number | null;
-  receivedBytes?: number;
-  totalBytes?: number;
-  speedBytesPerSecond?: number;
-  error?: string;
-};
-
-const formatBytes = (bytes: number | undefined): string => {
-  if (!bytes || !Number.isFinite(bytes)) return "-";
-  const units = ["B", "KB", "MB", "GB", "TB"] as const;
-  let value = bytes;
-  let unitIndex = 0;
-
-  while (value >= 1024 && unitIndex < units.length - 1) {
-    value /= 1024;
-    unitIndex += 1;
-  }
-
-  return `${value.toFixed(1)} ${units[unitIndex]}`;
-};
-
-const formatSpeed = (bytesPerSecond: number | undefined): string => {
-  if (!bytesPerSecond || !Number.isFinite(bytesPerSecond)) return "- / -";
-  const mbPerSecond = bytesPerSecond / (1024 * 1024);
-  const mbitPerSecond = (bytesPerSecond * 8) / 1_000_000;
-  return `${mbPerSecond.toFixed(2)} MB/s · ${mbitPerSecond.toFixed(2)} Mbps`;
-};
-
 function App() {
-  const [urlsText, setUrlsText] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [downloads, setDownloads] = useState<DownloadItem[]>([]);
+  const [downloads, setDownloads] = useState<DownloadItemData[]>([]);
 
   const startDownload = async (itemId: number, url: string, resume = false) => {
     const existing = downloads.find((item) => item.id === itemId);
@@ -53,11 +19,12 @@ function App() {
       current.map((item) =>
         item.id === itemId
           ? {
-              ...item,
-              status: "downloading",
-              progress: item.progress ?? 0,
-              error: undefined,
-            }
+            ...item,
+            status: "downloading",
+            progress: item.progress ?? 0,
+            error: undefined,
+            speedHistory: [], // Reset history on start/resume
+          }
           : item,
       ),
     );
@@ -75,7 +42,7 @@ function App() {
       );
 
       if (!response.ok || !response.body) {
-        const message = "Falha ao iniciar o download.";
+        const message = "Failed to start download.";
         setDownloads((current) =>
           current.map((item) =>
             item.id === itemId
@@ -99,8 +66,6 @@ function App() {
       let received = alreadyReceived;
       const startedAt = performance.now();
 
-      // Atualiza progresso incrementalmente conforme os bytes chegam.
-      // Para manter o código claro, usamos um loop while padrão.
       // eslint-disable-next-line no-constant-condition
       while (true) {
         const { done, value } = await reader.read();
@@ -115,17 +80,22 @@ function App() {
             totalBytes > 0 ? Math.round((received / totalBytes) * 100) : null;
 
           setDownloads((current) =>
-            current.map((item) =>
-              item.id === itemId
-                ? {
-                    ...item,
-                    progress: percentage,
-                    receivedBytes: received,
-                    totalBytes: totalBytes || item.totalBytes,
-                    speedBytesPerSecond: bytesPerSecond,
-                  }
-                : item,
-            ),
+            current.map((item) => {
+              if (item.id !== itemId) return item;
+
+              const newHistory = [...(item.speedHistory || []), bytesPerSecond];
+              // Keep last 50 data points for the graph
+              if (newHistory.length > 50) newHistory.shift();
+
+              return {
+                ...item,
+                progress: percentage,
+                receivedBytes: received,
+                totalBytes: totalBytes || item.totalBytes,
+                speedBytesPerSecond: bytesPerSecond,
+                speedHistory: newHistory,
+              };
+            }),
           );
         }
       }
@@ -134,7 +104,6 @@ function App() {
         response.headers.get("content-type") ?? "application/octet-stream";
       const blob = new Blob(chunks, { type: contentType });
 
-      // Resolve nome do arquivo pelo header Content-Disposition ou pela URL.
       const disposition = response.headers.get("content-disposition");
       const fallbackName = (() => {
         try {
@@ -175,7 +144,7 @@ function App() {
       );
     } catch (err) {
       const message =
-        err instanceof Error ? err.message : "Erro inesperado durante o download.";
+        err instanceof Error ? err.message : "Unexpected error during download.";
       setDownloads((current) =>
         current.map((item) =>
           item.id === itemId
@@ -186,41 +155,14 @@ function App() {
     }
   };
 
-  const handleSubmit = (event: FormEvent) => {
-    event.preventDefault();
-    setError(null);
-
-    const urls = urlsText
-      .split(/\r?\n/)
-      .map((value) => value.trim())
-      .filter(Boolean);
-
-    if (urls.length === 0) {
-      setError("Informe ao menos uma URL de download direto (uma por linha).");
-      return;
-    }
-
-    const invalidUrl = urls.find((value) => {
-      try {
-        // eslint-disable-next-line no-new
-        new URL(value);
-        return false;
-      } catch {
-        return true;
-      }
-    });
-
-    if (invalidUrl) {
-      setError(`URL inválida detectada: ${invalidUrl}`);
-      return;
-    }
-
+  const handleNewDownloads = (urls: string[]) => {
     const baseId = Date.now();
-    const newItems: DownloadItem[] = urls.map((value, index) => ({
+    const newItems: DownloadItemData[] = urls.map((value, index) => ({
       id: baseId + index,
       url: value,
       status: "pending",
       progress: 0,
+      speedHistory: [],
     }));
 
     setDownloads((current) => [...newItems, ...current]);
@@ -230,117 +172,58 @@ function App() {
     });
   };
 
+  const handleRetry = (id: number, url: string) => {
+    void startDownload(id, url, true);
+  };
+
   return (
-    <div className="app-root">
-      <header className="app-header">
-        <h1>Ephemeral Downloader</h1>
-        <p>Proxy de download efêmero com streaming direto da origem para você.</p>
-        <div className="app-header-meta">
-          <span>Use a rota e peering da sua VPS a seu favor.</span>
-          <span>Ideal para ROMs, ISOs e arquivos grandes.</span>
+    <Layout>
+      <div className="grid gap-8 lg:grid-cols-[400px_1fr]">
+        <div className="space-y-6">
+          <DownloadForm onSubmit={handleNewDownloads} />
+
+          <Card className="border-border/50 bg-card/50 backdrop-blur-sm hidden lg:block">
+            <CardHeader>
+              <CardTitle className="text-lg">Tips</CardTitle>
+            </CardHeader>
+            <CardContent className="text-sm text-muted-foreground space-y-2">
+              <p>• Use direct links ending in .iso, .zip, .mp4, etc.</p>
+              <p>• Downloads are streamed directly to your browser memory, then saved.</p>
+              <p>• If the tab closes, the download is lost.</p>
+            </CardContent>
+          </Card>
         </div>
-      </header>
 
-      <main className="app-main">
-        <form className="download-form" onSubmit={handleSubmit}>
-          <label htmlFor="url-input" className="field-label">
-            Links diretos dos arquivos
-          </label>
-          <p className="field-helper">
-            Uma URL por linha. Aceita links HTTP/HTTPS diretos para arquivos.
-          </p>
-          <textarea
-            id="url-input"
-            placeholder={
-              "https://exemplo.com/arquivo-1.iso\nhttps://exemplo.com/arquivo-2.zip"
-            }
-            value={urlsText}
-            onChange={(event) => setUrlsText(event.target.value)}
-            className="url-input url-input--multiline"
-            rows={5}
-          />
+        <section className="space-y-6">
+          <div className="flex items-center justify-between">
+            <h2 className="text-2xl font-bold tracking-tight">Active Downloads</h2>
+            <span className="text-sm text-muted-foreground">{downloads.length} items</span>
+          </div>
 
-          {error && <p className="error-text">{error}</p>}
-
-          <button type="submit" className="primary-button">
-            Iniciar download
-          </button>
-        </form>
-
-        <section className="downloads-section" aria-label="Progresso dos downloads">
-          <h2 className="downloads-title">Downloads recentes</h2>
-
-          {downloads.length === 0 ? (
-            <p className="downloads-empty">
-              Nenhum download ativo ainda. Cole um ou mais links diretos ao lado e clique em
-              &nbsp;
-              <strong>Iniciar download</strong>
-              &nbsp;para começar.
-            </p>
-          ) : (
-            <ul className="downloads-list">
-              {downloads.map((item) => (
-                <li key={item.id} className="download-item">
-                  <div className="download-main">
-                    <p className="download-url" title={item.url}>
-                      {item.url}
-                    </p>
-                    <span className={`badge badge--${item.status}`}>
-                      {item.status === "pending" && "Pendente"}
-                      {item.status === "downloading" && "Baixando"}
-                      {item.status === "completed" && "Concluído"}
-                      {item.status === "error" && "Erro"}
-                    </span>
-                  </div>
-
-                  {item.progress !== null && (
-                    <div className="progress-wrapper">
-                      <div className="progress-bar">
-                        <div
-                          className="progress-bar__fill"
-                          style={{ width: `${item.progress}%` }}
-                        />
-                      </div>
-                      <span className="progress-label">
-                        {item.progress}%
-                      </span>
-                    </div>
-                  )}
-
-                  {(item.receivedBytes ?? 0) > 0 && (
-                    <p className="download-meta">
-                      <span>
-                        {formatBytes(item.receivedBytes)} /{" "}
-                        {formatBytes(item.totalBytes)}
-                      </span>
-                      <span>·</span>
-                      <span>{formatSpeed(item.speedBytesPerSecond)}</span>
-                    </p>
-                  )}
-
-                  {item.error && (
-                    <div className="download-footer">
-                      <p className="download-error">
-                        {item.error}
-                      </p>
-                      <button
-                        type="button"
-                        className="secondary-button"
-                        onClick={() => {
-                          void startDownload(item.id, item.url, true);
-                        }}
-                      >
-                        Retomar download
-                      </button>
-                    </div>
-                  )}
-                </li>
-              ))}
-            </ul>
-          )}
+          <div className="space-y-4">
+            {downloads.length === 0 ? (
+              <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12 text-center animate-in fade-in-50">
+                <div className="mb-4 rounded-full bg-secondary/50 p-4">
+                  <div className="i-lucide-download size-8 text-muted-foreground" />
+                </div>
+                <h3 className="text-lg font-semibold">No downloads yet</h3>
+                <p className="mt-2 text-sm text-muted-foreground max-w-sm">
+                  Paste your links on the left sidebar to get started. The VPS proxy will handle the connection.
+                </p>
+              </div>
+            ) : (
+              downloads.map((item) => (
+                <DownloadItem
+                  key={item.id}
+                  item={item}
+                  onRetry={handleRetry}
+                />
+              ))
+            )}
+          </div>
         </section>
-      </main>
-    </div>
+      </div>
+    </Layout>
   );
 }
 

web/src/components/feature/DownloadForm.tsx

@@ -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>
+    );
+}

web/src/components/feature/DownloadItem.tsx

@@ -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>
+    );
+}

web/src/components/ui/Button.tsx

@@ -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 };

web/src/components/ui/Card.tsx

@@ -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,
+};

web/src/components/ui/Input.tsx

@@ -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 };

web/src/components/ui/Layout.tsx

@@ -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>
+    );
+}

web/src/components/ui/ProgressBar.tsx

@@ -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 };

web/src/components/ui/Textarea.tsx

@@ -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 };

web/src/index.css

@@ -1,68 +1,65 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+@import "tailwindcss";
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+@theme {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  min-width: 320px;
-  min-height: 100vh;
-  background-color: #020617;
-  color: #f9fafb;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
+@layer base {
   :root {
-    color: #213547;
-    background-color: #ffffff;
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+
+    --radius: 0.5rem;
   }
-  a:hover {
-    color: #747bff;
+
+  * {
+    @apply border-border;
   }
-  button {
-    background-color: #f9f9f9;
+
+  body {
+    @apply bg-background text-foreground;
   }
-}
+}

web/src/lib/utils.ts

@@ -0,0 +1,27 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
+
+export const formatBytes = (bytes: number | undefined): string => {
+    if (!bytes || !Number.isFinite(bytes)) return "-";
+    const units = ["B", "KB", "MB", "GB", "TB"] as const;
+    let value = bytes;
+    let unitIndex = 0;
+
+    while (value >= 1024 && unitIndex < units.length - 1) {
+        value /= 1024;
+        unitIndex += 1;
+    }
+
+    return `${value.toFixed(1)} ${units[unitIndex]}`;
+};
+
+export const formatSpeed = (bytesPerSecond: number | undefined): string => {
+    if (!bytesPerSecond || !Number.isFinite(bytesPerSecond)) return "- / -";
+    const mbPerSecond = bytesPerSecond / (1024 * 1024);
+    const mbitPerSecond = (bytesPerSecond * 8) / 1_000_000;
+    return `${mbPerSecond.toFixed(2)} MB/s · ${mbitPerSecond.toFixed(2)} Mbps`;
+};

web/tailwind.config.js

@@ -0,0 +1,44 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {
+            colors: {
+                background: "hsl(var(--background))",
+                foreground: "hsl(var(--foreground))",
+                primary: {
+                    DEFAULT: "hsl(var(--primary))",
+                    foreground: "hsl(var(--primary-foreground))",
+                },
+                secondary: {
+                    DEFAULT: "hsl(var(--secondary))",
+                    foreground: "hsl(var(--secondary-foreground))",
+                },
+                muted: {
+                    DEFAULT: "hsl(var(--muted))",
+                    foreground: "hsl(var(--muted-foreground))",
+                },
+                accent: {
+                    DEFAULT: "hsl(var(--accent))",
+                    foreground: "hsl(var(--accent-foreground))",
+                },
+                destructive: {
+                    DEFAULT: "hsl(var(--destructive))",
+                    foreground: "hsl(var(--destructive-foreground))",
+                },
+                border: "hsl(var(--border))",
+                input: "hsl(var(--input))",
+                ring: "hsl(var(--ring))",
+            },
+            borderRadius: {
+                lg: "var(--radius)",
+                md: "calc(var(--radius) - 2px)",
+                sm: "calc(var(--radius) - 4px)",
+            },
+        },
+    },
+    plugins: [],
+}