feat: backup progress

apps/client/app/components/snapshots-table.tsx

@@ -4,7 +4,7 @@ import type { ListSnapshotsResponse } from "~/api-client/types.gen";
 import { ByteSize } from "~/components/bytes-size";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
 import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
-import { formatSnapshotDuration } from "~/modules/repositories/tabs/snapshots";
+import { formatDuration } from "~/utils/utils";
 
 type Snapshot = ListSnapshotsResponse[number];
 
@@ -62,9 +62,7 @@ export const SnapshotsTable = ({ snapshots, repositoryName }: Props) => {
 							<TableCell className="hidden md:table-cell">
 								<div className="flex items-center justify-end gap-2">
 									<Clock className="h-4 w-4 text-muted-foreground" />
-									<span className="text-sm text-muted-foreground">
-										{formatSnapshotDuration(snapshot.duration / 1000)}
-									</span>
+									<span className="text-sm text-muted-foreground">{formatDuration(snapshot.duration / 1000)}</span>
 								</div>
 							</TableCell>
 							<TableCell className="hidden lg:table-cell">

apps/client/app/components/ui/progress.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+
+import { cn } from "~/lib/utils";
+
+function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+	return (
+		<ProgressPrimitive.Root
+			data-slot="progress"
+			className={cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className)}
+			{...props}
+		>
+			<ProgressPrimitive.Indicator
+				data-slot="progress-indicator"
+				className="bg-primary h-full w-full flex-1 transition-all"
+				style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+			/>
+		</ProgressPrimitive.Root>
+	);
+}
+
+export { Progress };

apps/client/app/hooks/use-server-events.ts

@@ -5,19 +5,33 @@ type ServerEventType =
 	| "connected"
 	| "heartbeat"
 	| "backup:started"
+	| "backup:progress"
 	| "backup:completed"
 	| "volume:mounted"
 	| "volume:unmounted"
 	| "volume:updated";
 
-interface BackupEvent {
+export interface BackupEvent {
 	scheduleId: number;
 	volumeName: string;
 	repositoryName: string;
 	status?: "success" | "error";
 }
 
-interface VolumeEvent {
+export interface BackupProgressEvent {
+	scheduleId: number;
+	volumeName: string;
+	repositoryName: string;
+	seconds_elapsed: number;
+	percent_done: number;
+	total_files: number;
+	files_done: number;
+	total_bytes: number;
+	bytes_done: number;
+	current_files: string[];
+}
+
+export interface VolumeEvent {
 	volumeName: string;
 }
 
@@ -51,6 +65,14 @@ export function useServerEvents() {
 			});
 		});
 
+		eventSource.addEventListener("backup:progress", (e) => {
+			const data = JSON.parse(e.data) as BackupProgressEvent;
+
+			handlersRef.current.get("backup:progress")?.forEach((handler) => {
+				handler(data);
+			});
+		});
+
 		eventSource.addEventListener("backup:completed", (e) => {
 			const data = JSON.parse(e.data) as BackupEvent;
 			console.log("[SSE] Backup completed:", data);

apps/client/app/modules/backups/components/backup-progress-card.tsx

@@ -0,0 +1,100 @@
+import { useEffect, useState } from "react";
+import { ByteSize, formatBytes } from "~/components/bytes-size";
+import { Card } from "~/components/ui/card";
+import { Progress } from "~/components/ui/progress";
+import { type BackupProgressEvent, useServerEvents } from "~/hooks/use-server-events";
+import { formatDuration } from "~/utils/utils";
+
+type Props = {
+	scheduleId: number;
+};
+
+export const BackupProgressCard = ({ scheduleId }: Props) => {
+	const { addEventListener } = useServerEvents();
+	const [progress, setProgress] = useState<BackupProgressEvent | null>(null);
+
+	useEffect(() => {
+		const unsubscribe = addEventListener("backup:progress", (data) => {
+			const progressData = data as BackupProgressEvent;
+			if (progressData.scheduleId === scheduleId) {
+				setProgress(progressData);
+			}
+		});
+
+		const unsubscribeComplete = addEventListener("backup:completed", (data) => {
+			const completedData = data as { scheduleId: number };
+			if (completedData.scheduleId === scheduleId) {
+				setProgress(null);
+			}
+		});
+
+		return () => {
+			unsubscribe();
+			unsubscribeComplete();
+		};
+	}, [addEventListener, scheduleId]);
+
+	if (!progress) {
+		return (
+			<div className="rounded-lg border border-border bg-card p-4">
+				<div className="flex items-center gap-2">
+					<div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+					<span className="text-sm text-muted-foreground">Starting backup...</span>
+				</div>
+			</div>
+		);
+	}
+
+	const percentDone = Math.round(progress.percent_done * 100);
+	const currentFile = progress.current_files[0] || "";
+	const fileName = currentFile.split("/").pop() || currentFile;
+	const speed = formatBytes(progress.bytes_done / progress.seconds_elapsed);
+
+	return (
+		<Card className="p-4">
+			<div className="flex items-center justify-between">
+				<div className="flex items-center gap-2">
+					<div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+					<span className="font-medium">Backup in progress</span>
+				</div>
+				<span className="text-sm font-medium text-primary">{percentDone}%</span>
+			</div>
+
+			<Progress value={percentDone} className="h-2" />
+
+			<div className="grid grid-cols-2 gap-4 text-sm">
+				<div>
+					<p className="text-xs uppercase text-muted-foreground">Files</p>
+					<p className="font-medium">
+						{progress.files_done.toLocaleString()} / {progress.total_files.toLocaleString()}
+					</p>
+				</div>
+				<div>
+					<p className="text-xs uppercase text-muted-foreground">Data</p>
+					<p className="font-medium">
+						<ByteSize bytes={progress.bytes_done} /> / <ByteSize bytes={progress.total_bytes} />
+					</p>
+				</div>
+				<div>
+					<p className="text-xs uppercase text-muted-foreground">Elapsed</p>
+					<p className="font-medium">{formatDuration(progress.seconds_elapsed)}</p>
+				</div>
+				<div>
+					<p className="text-xs uppercase text-muted-foreground">Speed</p>
+					<p className="font-medium">
+						{progress.seconds_elapsed > 0 ? `${speed.text} ${speed.unit}/s` : "Calculating..."}
+					</p>
+				</div>
+			</div>
+
+			{fileName && (
+				<div className="pt-2 border-t border-border">
+					<p className="text-xs uppercase text-muted-foreground mb-1">Current file</p>
+					<p className="text-xs font-mono text-muted-foreground truncate" title={currentFile}>
+						{fileName}
+					</p>
+				</div>
+			)}
+		</Card>
+	);
+};

apps/client/app/modules/backups/components/schedule-summary.tsx

@@ -13,6 +13,7 @@ import {
 	AlertDialogTitle,
 } from "~/components/ui/alert-dialog";
 import type { BackupSchedule } from "~/lib/types";
+import { BackupProgressCard } from "./backup-progress-card";
 
 type Props = {
 	schedule: BackupSchedule;
@@ -144,6 +145,8 @@ export const ScheduleSummary = (props: Props) => {
 				</CardContent>
 			</Card>
 
+			{schedule.lastBackupStatus === "in_progress" && <BackupProgressCard scheduleId={schedule.id} />}
+
 			<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
 				<AlertDialogContent>
 					<AlertDialogHeader>

apps/client/app/modules/repositories/tabs/snapshots.tsx

@@ -1,5 +1,4 @@
 import { useQuery } from "@tanstack/react-query";
-import { intervalToDuration } from "date-fns";
 import { Database } from "lucide-react";
 import { useState } from "react";
 import { listSnapshotsOptions } from "~/api-client/@tanstack/react-query.gen";
@@ -15,18 +14,6 @@ type Props = {
 	repository: Repository;
 };
 
-export const formatSnapshotDuration = (seconds: number) => {
-	const duration = intervalToDuration({ start: 0, end: seconds * 1000 });
-	const parts: string[] = [];
-
-	if (duration.days) parts.push(`${duration.days}d`);
-	if (duration.hours) parts.push(`${duration.hours}h`);
-	if (duration.minutes) parts.push(`${duration.minutes}m`);
-	if (duration.seconds || parts.length === 0) parts.push(`${duration.seconds || 0}s`);
-
-	return parts.join(" ");
-};
-
 export const RepositorySnapshotsTabContent = ({ repository }: Props) => {
 	const [searchQuery, setSearchQuery] = useState("");
 

apps/client/app/utils/utils.ts

@@ -1,3 +1,5 @@
+import { intervalToDuration } from "date-fns";
+
 export const getCronExpression = (frequency: string, dailyTime?: string, weeklyDay?: string): string => {
 	if (frequency === "hourly") {
 		return "0 * * * *";
@@ -15,3 +17,15 @@ export const getCronExpression = (frequency: string, dailyTime?: string, weeklyD
 
 	return `${minutes} ${hours} * * ${weeklyDay ?? "0"}`;
 };
+
+export const formatDuration = (seconds: number) => {
+	const duration = intervalToDuration({ start: 0, end: seconds * 1000 });
+	const parts: string[] = [];
+
+	if (duration.days) parts.push(`${duration.days}d`);
+	if (duration.hours) parts.push(`${duration.hours}h`);
+	if (duration.minutes) parts.push(`${duration.minutes}m`);
+	if (duration.seconds || parts.length === 0) parts.push(`${duration.seconds || 0}s`);
+
+	return parts.join(" ");
+};