refactor: unify backend and frontend servers (#3)

* refactor: unify backend and frontend servers

* refactor: correct paths for openapi & drizzle

* refactor: move api-client to client

* fix: drizzle paths

* chore: fix linting issues

* fix: form reset issue

app/app.css

@@ -0,0 +1,175 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "dither-plugin";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+	--breakpoint-xs: 32rem;
+	--font-sans:
+		"Google Sans Code", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+		"Noto Color Emoji";
+}
+
+html,
+body {
+	overflow-x: hidden;
+	width: 100%;
+	position: relative;
+	overscroll-behavior: none;
+	scrollbar-width: thin;
+}
+
+body {
+	@apply bg-[#131313];
+	min-height: 100dvh;
+}
+
+.main-content {
+	scrollbar-width: thin;
+	scrollbar-gutter: stable;
+}
+
+@theme inline {
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-card-header: var(--card-header);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+	--color-strong-accent: var(--strong-accent);
+}
+
+:root {
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--card-header: oklch(0.922 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+	--strong-accent: #ff543a;
+}
+
+.dark {
+	color-scheme: dark;
+
+	--background: #131313;
+	--foreground: oklch(0.985 0 0);
+	--card: #131313;
+	--card-header: #1b1b1b;
+	/* --card: oklch(0.205 0 0); ORIGINAL */
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.1448 0 0);
+	/* --secondary: oklch(0.269 0 0); ORIGINAL */
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: #ff543a;
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+	--strong-accent: #ff543a;
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
+
+@layer base {
+	:root {
+		--chart-1: oklch(0.646 0.222 41.116);
+		--chart-2: oklch(0.6 0.118 184.704);
+		--chart-3: oklch(0.398 0.07 227.392);
+		--chart-4: oklch(0.828 0.189 84.429);
+		--chart-5: oklch(0.769 0.188 70.08);
+	}
+
+	.dark {
+		--chart-1: oklch(0.488 0.243 264.376);
+		--chart-2: oklch(0.696 0.17 162.48);
+		--chart-3: oklch(0.769 0.188 70.08);
+		--chart-4: oklch(0.627 0.265 303.9);
+		--chart-5: oklch(0.645 0.246 16.439);
+	}
+}

app/client/api-client/@tanstack/react-query.gen.ts

@@ -0,0 +1,955 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import { type DefaultError, queryOptions, type UseMutationOptions } from "@tanstack/react-query";
+
+import { client } from "../client.gen";
+import {
+	browseFilesystem,
+	changePassword,
+	createBackupSchedule,
+	createRepository,
+	createVolume,
+	deleteBackupSchedule,
+	deleteRepository,
+	deleteVolume,
+	doctorRepository,
+	downloadResticPassword,
+	getBackupSchedule,
+	getBackupScheduleForVolume,
+	getContainersUsingVolume,
+	getMe,
+	getRepository,
+	getSnapshotDetails,
+	getStatus,
+	getSystemInfo,
+	getVolume,
+	healthCheckVolume,
+	listBackupSchedules,
+	listFiles,
+	listRcloneRemotes,
+	listRepositories,
+	listSnapshotFiles,
+	listSnapshots,
+	listVolumes,
+	login,
+	logout,
+	mountVolume,
+	type Options,
+	register,
+	restoreSnapshot,
+	runBackupNow,
+	stopBackup,
+	testConnection,
+	unmountVolume,
+	updateBackupSchedule,
+	updateVolume,
+} from "../sdk.gen";
+import type {
+	BrowseFilesystemData,
+	BrowseFilesystemResponse,
+	ChangePasswordData,
+	ChangePasswordResponse,
+	CreateBackupScheduleData,
+	CreateBackupScheduleResponse,
+	CreateRepositoryData,
+	CreateRepositoryResponse,
+	CreateVolumeData,
+	CreateVolumeResponse,
+	DeleteBackupScheduleData,
+	DeleteBackupScheduleResponse,
+	DeleteRepositoryData,
+	DeleteRepositoryResponse,
+	DeleteVolumeData,
+	DeleteVolumeResponse,
+	DoctorRepositoryData,
+	DoctorRepositoryResponse,
+	DownloadResticPasswordData,
+	DownloadResticPasswordResponse,
+	GetBackupScheduleData,
+	GetBackupScheduleForVolumeData,
+	GetBackupScheduleForVolumeResponse,
+	GetBackupScheduleResponse,
+	GetContainersUsingVolumeData,
+	GetContainersUsingVolumeResponse,
+	GetMeData,
+	GetMeResponse,
+	GetRepositoryData,
+	GetRepositoryResponse,
+	GetSnapshotDetailsData,
+	GetSnapshotDetailsResponse,
+	GetStatusData,
+	GetStatusResponse,
+	GetSystemInfoData,
+	GetSystemInfoResponse,
+	GetVolumeData,
+	GetVolumeResponse,
+	HealthCheckVolumeData,
+	HealthCheckVolumeResponse,
+	ListBackupSchedulesData,
+	ListBackupSchedulesResponse,
+	ListFilesData,
+	ListFilesResponse,
+	ListRcloneRemotesData,
+	ListRcloneRemotesResponse,
+	ListRepositoriesData,
+	ListRepositoriesResponse,
+	ListSnapshotFilesData,
+	ListSnapshotFilesResponse,
+	ListSnapshotsData,
+	ListSnapshotsResponse,
+	ListVolumesData,
+	ListVolumesResponse,
+	LoginData,
+	LoginResponse,
+	LogoutData,
+	LogoutResponse,
+	MountVolumeData,
+	MountVolumeResponse,
+	RegisterData,
+	RegisterResponse,
+	RestoreSnapshotData,
+	RestoreSnapshotResponse,
+	RunBackupNowData,
+	RunBackupNowResponse,
+	StopBackupData,
+	StopBackupResponse,
+	TestConnectionData,
+	TestConnectionResponse,
+	UnmountVolumeData,
+	UnmountVolumeResponse,
+	UpdateBackupScheduleData,
+	UpdateBackupScheduleResponse,
+	UpdateVolumeData,
+	UpdateVolumeResponse,
+} from "../types.gen";
+
+/**
+ * Register a new user
+ */
+export const registerMutation = (
+	options?: Partial<Options<RegisterData>>,
+): UseMutationOptions<RegisterResponse, DefaultError, Options<RegisterData>> => {
+	const mutationOptions: UseMutationOptions<RegisterResponse, DefaultError, Options<RegisterData>> = {
+		mutationFn: async (fnOptions) => {
+			const { data } = await register({
+				...options,
+				...fnOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+/**
+ * Login with username and password
+ */
+export const loginMutation = (
+	options?: Partial<Options<LoginData>>,
+): UseMutationOptions<LoginResponse, DefaultError, Options<LoginData>> => {
+	const mutationOptions: UseMutationOptions<LoginResponse, DefaultError, Options<LoginData>> = {
+		mutationFn: async (fnOptions) => {
+			const { data } = await login({
+				...options,
+				...fnOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+/**
+ * Logout current user
+ */
+export const logoutMutation = (
+	options?: Partial<Options<LogoutData>>,
+): UseMutationOptions<LogoutResponse, DefaultError, Options<LogoutData>> => {
+	const mutationOptions: UseMutationOptions<LogoutResponse, DefaultError, Options<LogoutData>> = {
+		mutationFn: async (fnOptions) => {
+			const { data } = await logout({
+				...options,
+				...fnOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+export type QueryKey<TOptions extends Options> = [
+	Pick<TOptions, "baseUrl" | "body" | "headers" | "path" | "query"> & {
+		_id: string;
+		_infinite?: boolean;
+		tags?: ReadonlyArray<string>;
+	},
+];
+
+const createQueryKey = <TOptions extends Options>(
+	id: string,
+	options?: TOptions,
+	infinite?: boolean,
+	tags?: ReadonlyArray<string>,
+): [QueryKey<TOptions>[0]] => {
+	const params: QueryKey<TOptions>[0] = {
+		_id: id,
+		baseUrl: options?.baseUrl || (options?.client ?? client).getConfig().baseUrl,
+	} as QueryKey<TOptions>[0];
+	if (infinite) {
+		params._infinite = infinite;
+	}
+	if (tags) {
+		params.tags = tags;
+	}
+	if (options?.body) {
+		params.body = options.body;
+	}
+	if (options?.headers) {
+		params.headers = options.headers;
+	}
+	if (options?.path) {
+		params.path = options.path;
+	}
+	if (options?.query) {
+		params.query = options.query;
+	}
+	return [params];
+};
+
+export const getMeQueryKey = (options?: Options<GetMeData>) => createQueryKey("getMe", options);
+
+/**
+ * Get current authenticated user
+ */
+export const getMeOptions = (options?: Options<GetMeData>) =>
+	queryOptions<GetMeResponse, DefaultError, GetMeResponse, ReturnType<typeof getMeQueryKey>>({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await getMe({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: getMeQueryKey(options),
+	});
+
+export const getStatusQueryKey = (options?: Options<GetStatusData>) => createQueryKey("getStatus", options);
+
+/**
+ * Get authentication system status
+ */
+export const getStatusOptions = (options?: Options<GetStatusData>) =>
+	queryOptions<GetStatusResponse, DefaultError, GetStatusResponse, ReturnType<typeof getStatusQueryKey>>({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await getStatus({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: getStatusQueryKey(options),
+	});
+
+/**
+ * Change current user password
+ */
+export const changePasswordMutation = (
+	options?: Partial<Options<ChangePasswordData>>,
+): UseMutationOptions<ChangePasswordResponse, DefaultError, Options<ChangePasswordData>> => {
+	const mutationOptions: UseMutationOptions<ChangePasswordResponse, DefaultError, Options<ChangePasswordData>> = {
+		mutationFn: async (fnOptions) => {
+			const { data } = await changePassword({
+				...options,
+				...fnOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+export const listVolumesQueryKey = (options?: Options<ListVolumesData>) => createQueryKey("listVolumes", options);
+
+/**
+ * List all volumes
+ */
+export const listVolumesOptions = (options?: Options<ListVolumesData>) =>
+	queryOptions<ListVolumesResponse, DefaultError, ListVolumesResponse, ReturnType<typeof listVolumesQueryKey>>({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await listVolumes({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: listVolumesQueryKey(options),
+	});
+
+/**
+ * Create a new volume
+ */
+export const createVolumeMutation = (
+	options?: Partial<Options<CreateVolumeData>>,
+): UseMutationOptions<CreateVolumeResponse, DefaultError, Options<CreateVolumeData>> => {
+	const mutationOptions: UseMutationOptions<CreateVolumeResponse, DefaultError, Options<CreateVolumeData>> = {
+		mutationFn: async (fnOptions) => {
+			const { data } = await createVolume({
+				...options,
+				...fnOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+/**
+ * Test connection to backend
+ */
+export const testConnectionMutation = (
+	options?: Partial<Options<TestConnectionData>>,
+): UseMutationOptions<TestConnectionResponse, DefaultError, Options<TestConnectionData>> => {
+	const mutationOptions: UseMutationOptions<TestConnectionResponse, DefaultError, Options<TestConnectionData>> = {
+		mutationFn: async (fnOptions) => {
+			const { data } = await testConnection({
+				...options,
+				...fnOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+/**
+ * Delete a volume
+ */
+export const deleteVolumeMutation = (
+	options?: Partial<Options<DeleteVolumeData>>,
+): UseMutationOptions<DeleteVolumeResponse, DefaultError, Options<DeleteVolumeData>> => {
+	const mutationOptions: UseMutationOptions<DeleteVolumeResponse, DefaultError, Options<DeleteVolumeData>> = {
+		mutationFn: async (fnOptions) => {
+			const { data } = await deleteVolume({
+				...options,
+				...fnOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+export const getVolumeQueryKey = (options: Options<GetVolumeData>) => createQueryKey("getVolume", options);
+
+/**
+ * Get a volume by name
+ */
+export const getVolumeOptions = (options: Options<GetVolumeData>) =>
+	queryOptions<GetVolumeResponse, DefaultError, GetVolumeResponse, ReturnType<typeof getVolumeQueryKey>>({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await getVolume({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: getVolumeQueryKey(options),
+	});
+
+/**
+ * Update a volume's configuration
+ */
+export const updateVolumeMutation = (
+	options?: Partial<Options<UpdateVolumeData>>,
+): UseMutationOptions<UpdateVolumeResponse, DefaultError, Options<UpdateVolumeData>> => {
+	const mutationOptions: UseMutationOptions<UpdateVolumeResponse, DefaultError, Options<UpdateVolumeData>> = {
+		mutationFn: async (fnOptions) => {
+			const { data } = await updateVolume({
+				...options,
+				...fnOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+export const getContainersUsingVolumeQueryKey = (options: Options<GetContainersUsingVolumeData>) =>
+	createQueryKey("getContainersUsingVolume", options);
+
+/**
+ * Get containers using a volume by name
+ */
+export const getContainersUsingVolumeOptions = (options: Options<GetContainersUsingVolumeData>) =>
+	queryOptions<
+		GetContainersUsingVolumeResponse,
+		DefaultError,
+		GetContainersUsingVolumeResponse,
+		ReturnType<typeof getContainersUsingVolumeQueryKey>
+	>({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await getContainersUsingVolume({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: getContainersUsingVolumeQueryKey(options),
+	});
+
+/**
+ * Mount a volume
+ */
+export const mountVolumeMutation = (
+	options?: Partial<Options<MountVolumeData>>,
+): UseMutationOptions<MountVolumeResponse, DefaultError, Options<MountVolumeData>> => {
+	const mutationOptions: UseMutationOptions<MountVolumeResponse, DefaultError, Options<MountVolumeData>> = {
+		mutationFn: async (fnOptions) => {
+			const { data } = await mountVolume({
+				...options,
+				...fnOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+/**
+ * Unmount a volume
+ */
+export const unmountVolumeMutation = (
+	options?: Partial<Options<UnmountVolumeData>>,
+): UseMutationOptions<UnmountVolumeResponse, DefaultError, Options<UnmountVolumeData>> => {
+	const mutationOptions: UseMutationOptions<UnmountVolumeResponse, DefaultError, Options<UnmountVolumeData>> = {
+		mutationFn: async (fnOptions) => {
+			const { data } = await unmountVolume({
+				...options,
+				...fnOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+/**
+ * Perform a health check on a volume
+ */
+export const healthCheckVolumeMutation = (
+	options?: Partial<Options<HealthCheckVolumeData>>,
+): UseMutationOptions<HealthCheckVolumeResponse, DefaultError, Options<HealthCheckVolumeData>> => {
+	const mutationOptions: UseMutationOptions<HealthCheckVolumeResponse, DefaultError, Options<HealthCheckVolumeData>> = {
+		mutationFn: async (fnOptions) => {
+			const { data } = await healthCheckVolume({
+				...options,
+				...fnOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+export const listFilesQueryKey = (options: Options<ListFilesData>) => createQueryKey("listFiles", options);
+
+/**
+ * List files in a volume directory
+ */
+export const listFilesOptions = (options: Options<ListFilesData>) =>
+	queryOptions<ListFilesResponse, DefaultError, ListFilesResponse, ReturnType<typeof listFilesQueryKey>>({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await listFiles({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: listFilesQueryKey(options),
+	});
+
+export const browseFilesystemQueryKey = (options?: Options<BrowseFilesystemData>) =>
+	createQueryKey("browseFilesystem", options);
+
+/**
+ * Browse directories on the host filesystem
+ */
+export const browseFilesystemOptions = (options?: Options<BrowseFilesystemData>) =>
+	queryOptions<
+		BrowseFilesystemResponse,
+		DefaultError,
+		BrowseFilesystemResponse,
+		ReturnType<typeof browseFilesystemQueryKey>
+	>({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await browseFilesystem({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: browseFilesystemQueryKey(options),
+	});
+
+export const listRepositoriesQueryKey = (options?: Options<ListRepositoriesData>) =>
+	createQueryKey("listRepositories", options);
+
+/**
+ * List all repositories
+ */
+export const listRepositoriesOptions = (options?: Options<ListRepositoriesData>) =>
+	queryOptions<
+		ListRepositoriesResponse,
+		DefaultError,
+		ListRepositoriesResponse,
+		ReturnType<typeof listRepositoriesQueryKey>
+	>({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await listRepositories({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: listRepositoriesQueryKey(options),
+	});
+
+/**
+ * Create a new restic repository
+ */
+export const createRepositoryMutation = (
+	options?: Partial<Options<CreateRepositoryData>>,
+): UseMutationOptions<CreateRepositoryResponse, DefaultError, Options<CreateRepositoryData>> => {
+	const mutationOptions: UseMutationOptions<CreateRepositoryResponse, DefaultError, Options<CreateRepositoryData>> = {
+		mutationFn: async (fnOptions) => {
+			const { data } = await createRepository({
+				...options,
+				...fnOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+export const listRcloneRemotesQueryKey = (options?: Options<ListRcloneRemotesData>) =>
+	createQueryKey("listRcloneRemotes", options);
+
+/**
+ * List all configured rclone remotes on the host system
+ */
+export const listRcloneRemotesOptions = (options?: Options<ListRcloneRemotesData>) =>
+	queryOptions<
+		ListRcloneRemotesResponse,
+		DefaultError,
+		ListRcloneRemotesResponse,
+		ReturnType<typeof listRcloneRemotesQueryKey>
+	>({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await listRcloneRemotes({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: listRcloneRemotesQueryKey(options),
+	});
+
+/**
+ * Delete a repository
+ */
+export const deleteRepositoryMutation = (
+	options?: Partial<Options<DeleteRepositoryData>>,
+): UseMutationOptions<DeleteRepositoryResponse, DefaultError, Options<DeleteRepositoryData>> => {
+	const mutationOptions: UseMutationOptions<DeleteRepositoryResponse, DefaultError, Options<DeleteRepositoryData>> = {
+		mutationFn: async (fnOptions) => {
+			const { data } = await deleteRepository({
+				...options,
+				...fnOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+export const getRepositoryQueryKey = (options: Options<GetRepositoryData>) => createQueryKey("getRepository", options);
+
+/**
+ * Get a single repository by name
+ */
+export const getRepositoryOptions = (options: Options<GetRepositoryData>) =>
+	queryOptions<GetRepositoryResponse, DefaultError, GetRepositoryResponse, ReturnType<typeof getRepositoryQueryKey>>({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await getRepository({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: getRepositoryQueryKey(options),
+	});
+
+export const listSnapshotsQueryKey = (options: Options<ListSnapshotsData>) => createQueryKey("listSnapshots", options);
+
+/**
+ * List all snapshots in a repository
+ */
+export const listSnapshotsOptions = (options: Options<ListSnapshotsData>) =>
+	queryOptions<ListSnapshotsResponse, DefaultError, ListSnapshotsResponse, ReturnType<typeof listSnapshotsQueryKey>>({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await listSnapshots({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: listSnapshotsQueryKey(options),
+	});
+
+export const getSnapshotDetailsQueryKey = (options: Options<GetSnapshotDetailsData>) =>
+	createQueryKey("getSnapshotDetails", options);
+
+/**
+ * Get details of a specific snapshot
+ */
+export const getSnapshotDetailsOptions = (options: Options<GetSnapshotDetailsData>) =>
+	queryOptions<
+		GetSnapshotDetailsResponse,
+		DefaultError,
+		GetSnapshotDetailsResponse,
+		ReturnType<typeof getSnapshotDetailsQueryKey>
+	>({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await getSnapshotDetails({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: getSnapshotDetailsQueryKey(options),
+	});
+
+export const listSnapshotFilesQueryKey = (options: Options<ListSnapshotFilesData>) =>
+	createQueryKey("listSnapshotFiles", options);
+
+/**
+ * List files and directories in a snapshot
+ */
+export const listSnapshotFilesOptions = (options: Options<ListSnapshotFilesData>) =>
+	queryOptions<
+		ListSnapshotFilesResponse,
+		DefaultError,
+		ListSnapshotFilesResponse,
+		ReturnType<typeof listSnapshotFilesQueryKey>
+	>({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await listSnapshotFiles({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: listSnapshotFilesQueryKey(options),
+	});
+
+/**
+ * Restore a snapshot to a target path on the filesystem
+ */
+export const restoreSnapshotMutation = (
+	options?: Partial<Options<RestoreSnapshotData>>,
+): UseMutationOptions<RestoreSnapshotResponse, DefaultError, Options<RestoreSnapshotData>> => {
+	const mutationOptions: UseMutationOptions<RestoreSnapshotResponse, DefaultError, Options<RestoreSnapshotData>> = {
+		mutationFn: async (fnOptions) => {
+			const { data } = await restoreSnapshot({
+				...options,
+				...fnOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+/**
+ * Run doctor operations on a repository to fix common issues (unlock, check, repair index). Use this when the repository is locked or has errors.
+ */
+export const doctorRepositoryMutation = (
+	options?: Partial<Options<DoctorRepositoryData>>,
+): UseMutationOptions<DoctorRepositoryResponse, DefaultError, Options<DoctorRepositoryData>> => {
+	const mutationOptions: UseMutationOptions<DoctorRepositoryResponse, DefaultError, Options<DoctorRepositoryData>> = {
+		mutationFn: async (fnOptions) => {
+			const { data } = await doctorRepository({
+				...options,
+				...fnOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+export const listBackupSchedulesQueryKey = (options?: Options<ListBackupSchedulesData>) =>
+	createQueryKey("listBackupSchedules", options);
+
+/**
+ * List all backup schedules
+ */
+export const listBackupSchedulesOptions = (options?: Options<ListBackupSchedulesData>) =>
+	queryOptions<
+		ListBackupSchedulesResponse,
+		DefaultError,
+		ListBackupSchedulesResponse,
+		ReturnType<typeof listBackupSchedulesQueryKey>
+	>({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await listBackupSchedules({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: listBackupSchedulesQueryKey(options),
+	});
+
+/**
+ * Create a new backup schedule for a volume
+ */
+export const createBackupScheduleMutation = (
+	options?: Partial<Options<CreateBackupScheduleData>>,
+): UseMutationOptions<CreateBackupScheduleResponse, DefaultError, Options<CreateBackupScheduleData>> => {
+	const mutationOptions: UseMutationOptions<
+		CreateBackupScheduleResponse,
+		DefaultError,
+		Options<CreateBackupScheduleData>
+	> = {
+		mutationFn: async (fnOptions) => {
+			const { data } = await createBackupSchedule({
+				...options,
+				...fnOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+/**
+ * Delete a backup schedule
+ */
+export const deleteBackupScheduleMutation = (
+	options?: Partial<Options<DeleteBackupScheduleData>>,
+): UseMutationOptions<DeleteBackupScheduleResponse, DefaultError, Options<DeleteBackupScheduleData>> => {
+	const mutationOptions: UseMutationOptions<
+		DeleteBackupScheduleResponse,
+		DefaultError,
+		Options<DeleteBackupScheduleData>
+	> = {
+		mutationFn: async (fnOptions) => {
+			const { data } = await deleteBackupSchedule({
+				...options,
+				...fnOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+export const getBackupScheduleQueryKey = (options: Options<GetBackupScheduleData>) =>
+	createQueryKey("getBackupSchedule", options);
+
+/**
+ * Get a backup schedule by ID
+ */
+export const getBackupScheduleOptions = (options: Options<GetBackupScheduleData>) =>
+	queryOptions<
+		GetBackupScheduleResponse,
+		DefaultError,
+		GetBackupScheduleResponse,
+		ReturnType<typeof getBackupScheduleQueryKey>
+	>({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await getBackupSchedule({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: getBackupScheduleQueryKey(options),
+	});
+
+/**
+ * Update a backup schedule
+ */
+export const updateBackupScheduleMutation = (
+	options?: Partial<Options<UpdateBackupScheduleData>>,
+): UseMutationOptions<UpdateBackupScheduleResponse, DefaultError, Options<UpdateBackupScheduleData>> => {
+	const mutationOptions: UseMutationOptions<
+		UpdateBackupScheduleResponse,
+		DefaultError,
+		Options<UpdateBackupScheduleData>
+	> = {
+		mutationFn: async (fnOptions) => {
+			const { data } = await updateBackupSchedule({
+				...options,
+				...fnOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+export const getBackupScheduleForVolumeQueryKey = (options: Options<GetBackupScheduleForVolumeData>) =>
+	createQueryKey("getBackupScheduleForVolume", options);
+
+/**
+ * Get a backup schedule for a specific volume
+ */
+export const getBackupScheduleForVolumeOptions = (options: Options<GetBackupScheduleForVolumeData>) =>
+	queryOptions<
+		GetBackupScheduleForVolumeResponse,
+		DefaultError,
+		GetBackupScheduleForVolumeResponse,
+		ReturnType<typeof getBackupScheduleForVolumeQueryKey>
+	>({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await getBackupScheduleForVolume({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: getBackupScheduleForVolumeQueryKey(options),
+	});
+
+/**
+ * Trigger a backup immediately for a schedule
+ */
+export const runBackupNowMutation = (
+	options?: Partial<Options<RunBackupNowData>>,
+): UseMutationOptions<RunBackupNowResponse, DefaultError, Options<RunBackupNowData>> => {
+	const mutationOptions: UseMutationOptions<RunBackupNowResponse, DefaultError, Options<RunBackupNowData>> = {
+		mutationFn: async (fnOptions) => {
+			const { data } = await runBackupNow({
+				...options,
+				...fnOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+/**
+ * Stop a backup that is currently in progress
+ */
+export const stopBackupMutation = (
+	options?: Partial<Options<StopBackupData>>,
+): UseMutationOptions<StopBackupResponse, DefaultError, Options<StopBackupData>> => {
+	const mutationOptions: UseMutationOptions<StopBackupResponse, DefaultError, Options<StopBackupData>> = {
+		mutationFn: async (fnOptions) => {
+			const { data } = await stopBackup({
+				...options,
+				...fnOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+export const getSystemInfoQueryKey = (options?: Options<GetSystemInfoData>) => createQueryKey("getSystemInfo", options);
+
+/**
+ * Get system information including available capabilities
+ */
+export const getSystemInfoOptions = (options?: Options<GetSystemInfoData>) =>
+	queryOptions<GetSystemInfoResponse, DefaultError, GetSystemInfoResponse, ReturnType<typeof getSystemInfoQueryKey>>({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await getSystemInfo({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: getSystemInfoQueryKey(options),
+	});
+
+/**
+ * Download the Restic password file for backup recovery. Requires password re-authentication.
+ */
+export const downloadResticPasswordMutation = (
+	options?: Partial<Options<DownloadResticPasswordData>>,
+): UseMutationOptions<DownloadResticPasswordResponse, DefaultError, Options<DownloadResticPasswordData>> => {
+	const mutationOptions: UseMutationOptions<
+		DownloadResticPasswordResponse,
+		DefaultError,
+		Options<DownloadResticPasswordData>
+	> = {
+		mutationFn: async (fnOptions) => {
+			const { data } = await downloadResticPassword({
+				...options,
+				...fnOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};

app/client/api-client/client.gen.ts

@@ -0,0 +1,22 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import { type ClientOptions, type Config, createClient, createConfig } from "./client";
+import type { ClientOptions as ClientOptions2 } from "./types.gen";
+
+/**
+ * The `createClientConfig()` function will be called on client initialization
+ * and the returned object will become the client's initial configuration.
+ *
+ * You may want to initialize your client this way instead of calling
+ * `setConfig()`. This is useful for example if you're using Next.js
+ * to ensure your client always has the correct values.
+ */
+export type CreateClientConfig<T extends ClientOptions = ClientOptions2> = (
+	override?: Config<ClientOptions & T>,
+) => Config<Required<ClientOptions> & T>;
+
+export const client = createClient(
+	createConfig<ClientOptions2>({
+		baseUrl: "http://192.168.2.42:4096",
+	}),
+);

app/client/api-client/client/client.gen.ts

@@ -0,0 +1,278 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import { createSseClient } from "../core/serverSentEvents.gen";
+import type { HttpMethod } from "../core/types.gen";
+import { getValidRequestBody } from "../core/utils.gen";
+import type { Client, Config, RequestOptions, ResolvedRequestOptions } from "./types.gen";
+import {
+	buildUrl,
+	createConfig,
+	createInterceptors,
+	getParseAs,
+	mergeConfigs,
+	mergeHeaders,
+	setAuthParams,
+} from "./utils.gen";
+
+type ReqInit = Omit<RequestInit, "body" | "headers"> & {
+	body?: any;
+	headers: ReturnType<typeof mergeHeaders>;
+};
+
+export const createClient = (config: Config = {}): Client => {
+	let _config = mergeConfigs(createConfig(), config);
+
+	const getConfig = (): Config => ({ ..._config });
+
+	const setConfig = (config: Config): Config => {
+		_config = mergeConfigs(_config, config);
+		return getConfig();
+	};
+
+	const interceptors = createInterceptors<Request, Response, unknown, ResolvedRequestOptions>();
+
+	const beforeRequest = async (options: RequestOptions) => {
+		const opts = {
+			..._config,
+			...options,
+			fetch: options.fetch ?? _config.fetch ?? globalThis.fetch,
+			headers: mergeHeaders(_config.headers, options.headers),
+			serializedBody: undefined,
+		};
+
+		if (opts.security) {
+			await setAuthParams({
+				...opts,
+				security: opts.security,
+			});
+		}
+
+		if (opts.requestValidator) {
+			await opts.requestValidator(opts);
+		}
+
+		if (opts.body !== undefined && opts.bodySerializer) {
+			opts.serializedBody = opts.bodySerializer(opts.body);
+		}
+
+		// remove Content-Type header if body is empty to avoid sending invalid requests
+		if (opts.body === undefined || opts.serializedBody === "") {
+			opts.headers.delete("Content-Type");
+		}
+
+		const url = buildUrl(opts);
+
+		return { opts, url };
+	};
+
+	const request: Client["request"] = async (options) => {
+		// @ts-expect-error
+		const { opts, url } = await beforeRequest(options);
+		const requestInit: ReqInit = {
+			redirect: "follow",
+			...opts,
+			body: getValidRequestBody(opts),
+		};
+
+		let request = new Request(url, requestInit);
+
+		for (const fn of interceptors.request.fns) {
+			if (fn) {
+				request = await fn(request, opts);
+			}
+		}
+
+		// fetch must be assigned here, otherwise it would throw the error:
+		// TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation
+		const _fetch = opts.fetch!;
+		let response: Response;
+
+		try {
+			response = await _fetch(request);
+		} catch (error) {
+			// Handle fetch exceptions (AbortError, network errors, etc.)
+			let finalError = error;
+
+			for (const fn of interceptors.error.fns) {
+				if (fn) {
+					finalError = (await fn(error, undefined as any, request, opts)) as unknown;
+				}
+			}
+
+			finalError = finalError || ({} as unknown);
+
+			if (opts.throwOnError) {
+				throw finalError;
+			}
+
+			// Return error response
+			return opts.responseStyle === "data"
+				? undefined
+				: {
+						error: finalError,
+						request,
+						response: undefined as any,
+					};
+		}
+
+		for (const fn of interceptors.response.fns) {
+			if (fn) {
+				response = await fn(response, request, opts);
+			}
+		}
+
+		const result = {
+			request,
+			response,
+		};
+
+		if (response.ok) {
+			const parseAs =
+				(opts.parseAs === "auto" ? getParseAs(response.headers.get("Content-Type")) : opts.parseAs) ?? "json";
+
+			if (response.status === 204 || response.headers.get("Content-Length") === "0") {
+				let emptyData: any;
+				switch (parseAs) {
+					case "arrayBuffer":
+					case "blob":
+					case "text":
+						emptyData = await response[parseAs]();
+						break;
+					case "formData":
+						emptyData = new FormData();
+						break;
+					case "stream":
+						emptyData = response.body;
+						break;
+					case "json":
+					default:
+						emptyData = {};
+						break;
+				}
+				return opts.responseStyle === "data"
+					? emptyData
+					: {
+							data: emptyData,
+							...result,
+						};
+			}
+
+			let data: any;
+			switch (parseAs) {
+				case "arrayBuffer":
+				case "blob":
+				case "formData":
+				case "json":
+				case "text":
+					data = await response[parseAs]();
+					break;
+				case "stream":
+					return opts.responseStyle === "data"
+						? response.body
+						: {
+								data: response.body,
+								...result,
+							};
+			}
+
+			if (parseAs === "json") {
+				if (opts.responseValidator) {
+					await opts.responseValidator(data);
+				}
+
+				if (opts.responseTransformer) {
+					data = await opts.responseTransformer(data);
+				}
+			}
+
+			return opts.responseStyle === "data"
+				? data
+				: {
+						data,
+						...result,
+					};
+		}
+
+		const textError = await response.text();
+		let jsonError: unknown;
+
+		try {
+			jsonError = JSON.parse(textError);
+		} catch {
+			// noop
+		}
+
+		const error = jsonError ?? textError;
+		let finalError = error;
+
+		for (const fn of interceptors.error.fns) {
+			if (fn) {
+				finalError = (await fn(error, response, request, opts)) as string;
+			}
+		}
+
+		finalError = finalError || ({} as string);
+
+		if (opts.throwOnError) {
+			throw finalError;
+		}
+
+		// TODO: we probably want to return error and improve types
+		return opts.responseStyle === "data"
+			? undefined
+			: {
+					error: finalError,
+					...result,
+				};
+	};
+
+	const makeMethodFn = (method: Uppercase<HttpMethod>) => (options: RequestOptions) => request({ ...options, method });
+
+	const makeSseFn = (method: Uppercase<HttpMethod>) => async (options: RequestOptions) => {
+		const { opts, url } = await beforeRequest(options);
+		return createSseClient({
+			...opts,
+			body: opts.body as BodyInit | null | undefined,
+			headers: opts.headers as unknown as Record<string, string>,
+			method,
+			onRequest: async (url, init) => {
+				let request = new Request(url, init);
+				for (const fn of interceptors.request.fns) {
+					if (fn) {
+						request = await fn(request, opts);
+					}
+				}
+				return request;
+			},
+			url,
+		});
+	};
+
+	return {
+		buildUrl,
+		connect: makeMethodFn("CONNECT"),
+		delete: makeMethodFn("DELETE"),
+		get: makeMethodFn("GET"),
+		getConfig,
+		head: makeMethodFn("HEAD"),
+		interceptors,
+		options: makeMethodFn("OPTIONS"),
+		patch: makeMethodFn("PATCH"),
+		post: makeMethodFn("POST"),
+		put: makeMethodFn("PUT"),
+		request,
+		setConfig,
+		sse: {
+			connect: makeSseFn("CONNECT"),
+			delete: makeSseFn("DELETE"),
+			get: makeSseFn("GET"),
+			head: makeSseFn("HEAD"),
+			options: makeSseFn("OPTIONS"),
+			patch: makeSseFn("PATCH"),
+			post: makeSseFn("POST"),
+			put: makeSseFn("PUT"),
+			trace: makeSseFn("TRACE"),
+		},
+		trace: makeMethodFn("TRACE"),
+	} as Client;
+};

app/client/api-client/client/index.ts

@@ -0,0 +1,25 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+export type { Auth } from "../core/auth.gen";
+export type { QuerySerializerOptions } from "../core/bodySerializer.gen";
+export {
+	formDataBodySerializer,
+	jsonBodySerializer,
+	urlSearchParamsBodySerializer,
+} from "../core/bodySerializer.gen";
+export { buildClientParams } from "../core/params.gen";
+export { serializeQueryKeyValue } from "../core/queryKeySerializer.gen";
+export { createClient } from "./client.gen";
+export type {
+	Client,
+	ClientOptions,
+	Config,
+	CreateClientConfig,
+	Options,
+	RequestOptions,
+	RequestResult,
+	ResolvedRequestOptions,
+	ResponseStyle,
+	TDataShape,
+} from "./types.gen";
+export { createConfig, mergeHeaders } from "./utils.gen";

app/client/api-client/client/types.gen.ts

@@ -0,0 +1,202 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { Auth } from "../core/auth.gen";
+import type { ServerSentEventsOptions, ServerSentEventsResult } from "../core/serverSentEvents.gen";
+import type { Client as CoreClient, Config as CoreConfig } from "../core/types.gen";
+import type { Middleware } from "./utils.gen";
+
+export type ResponseStyle = "data" | "fields";
+
+export interface Config<T extends ClientOptions = ClientOptions>
+	extends Omit<RequestInit, "body" | "headers" | "method">,
+		CoreConfig {
+	/**
+	 * Base URL for all requests made by this client.
+	 */
+	baseUrl?: T["baseUrl"];
+	/**
+	 * Fetch API implementation. You can use this option to provide a custom
+	 * fetch instance.
+	 *
+	 * @default globalThis.fetch
+	 */
+	fetch?: typeof fetch;
+	/**
+	 * Please don't use the Fetch client for Next.js applications. The `next`
+	 * options won't have any effect.
+	 *
+	 * Install {@link https://www.npmjs.com/package/@hey-api/client-next `@hey-api/client-next`} instead.
+	 */
+	next?: never;
+	/**
+	 * Return the response data parsed in a specified format. By default, `auto`
+	 * will infer the appropriate method from the `Content-Type` response header.
+	 * You can override this behavior with any of the {@link Body} methods.
+	 * Select `stream` if you don't want to parse response data at all.
+	 *
+	 * @default 'auto'
+	 */
+	parseAs?: "arrayBuffer" | "auto" | "blob" | "formData" | "json" | "stream" | "text";
+	/**
+	 * Should we return only data or multiple fields (data, error, response, etc.)?
+	 *
+	 * @default 'fields'
+	 */
+	responseStyle?: ResponseStyle;
+	/**
+	 * Throw an error instead of returning it in the response?
+	 *
+	 * @default false
+	 */
+	throwOnError?: T["throwOnError"];
+}
+
+export interface RequestOptions<
+	TData = unknown,
+	TResponseStyle extends ResponseStyle = "fields",
+	ThrowOnError extends boolean = boolean,
+	Url extends string = string,
+> extends Config<{
+			responseStyle: TResponseStyle;
+			throwOnError: ThrowOnError;
+		}>,
+		Pick<
+			ServerSentEventsOptions<TData>,
+			"onSseError" | "onSseEvent" | "sseDefaultRetryDelay" | "sseMaxRetryAttempts" | "sseMaxRetryDelay"
+		> {
+	/**
+	 * Any body that you want to add to your request.
+	 *
+	 * {@link https://developer.mozilla.org/docs/Web/API/fetch#body}
+	 */
+	body?: unknown;
+	path?: Record<string, unknown>;
+	query?: Record<string, unknown>;
+	/**
+	 * Security mechanism(s) to use for the request.
+	 */
+	security?: ReadonlyArray<Auth>;
+	url: Url;
+}
+
+export interface ResolvedRequestOptions<
+	TResponseStyle extends ResponseStyle = "fields",
+	ThrowOnError extends boolean = boolean,
+	Url extends string = string,
+> extends RequestOptions<unknown, TResponseStyle, ThrowOnError, Url> {
+	serializedBody?: string;
+}
+
+export type RequestResult<
+	TData = unknown,
+	TError = unknown,
+	ThrowOnError extends boolean = boolean,
+	TResponseStyle extends ResponseStyle = "fields",
+> = ThrowOnError extends true
+	? Promise<
+			TResponseStyle extends "data"
+				? TData extends Record<string, unknown>
+					? TData[keyof TData]
+					: TData
+				: {
+						data: TData extends Record<string, unknown> ? TData[keyof TData] : TData;
+						request: Request;
+						response: Response;
+					}
+		>
+	: Promise<
+			TResponseStyle extends "data"
+				? (TData extends Record<string, unknown> ? TData[keyof TData] : TData) | undefined
+				: (
+						| {
+								data: TData extends Record<string, unknown> ? TData[keyof TData] : TData;
+								error: undefined;
+						  }
+						| {
+								data: undefined;
+								error: TError extends Record<string, unknown> ? TError[keyof TError] : TError;
+						  }
+					) & {
+						request: Request;
+						response: Response;
+					}
+		>;
+
+export interface ClientOptions {
+	baseUrl?: string;
+	responseStyle?: ResponseStyle;
+	throwOnError?: boolean;
+}
+
+type MethodFn = <
+	TData = unknown,
+	TError = unknown,
+	ThrowOnError extends boolean = false,
+	TResponseStyle extends ResponseStyle = "fields",
+>(
+	options: Omit<RequestOptions<TData, TResponseStyle, ThrowOnError>, "method">,
+) => RequestResult<TData, TError, ThrowOnError, TResponseStyle>;
+
+type SseFn = <
+	TData = unknown,
+	TError = unknown,
+	ThrowOnError extends boolean = false,
+	TResponseStyle extends ResponseStyle = "fields",
+>(
+	options: Omit<RequestOptions<TData, TResponseStyle, ThrowOnError>, "method">,
+) => Promise<ServerSentEventsResult<TData, TError>>;
+
+type RequestFn = <
+	TData = unknown,
+	TError = unknown,
+	ThrowOnError extends boolean = false,
+	TResponseStyle extends ResponseStyle = "fields",
+>(
+	options: Omit<RequestOptions<TData, TResponseStyle, ThrowOnError>, "method"> &
+		Pick<Required<RequestOptions<TData, TResponseStyle, ThrowOnError>>, "method">,
+) => RequestResult<TData, TError, ThrowOnError, TResponseStyle>;
+
+type BuildUrlFn = <
+	TData extends {
+		body?: unknown;
+		path?: Record<string, unknown>;
+		query?: Record<string, unknown>;
+		url: string;
+	},
+>(
+	options: TData & Options<TData>,
+) => string;
+
+export type Client = CoreClient<RequestFn, Config, MethodFn, BuildUrlFn, SseFn> & {
+	interceptors: Middleware<Request, Response, unknown, ResolvedRequestOptions>;
+};
+
+/**
+ * The `createClientConfig()` function will be called on client initialization
+ * and the returned object will become the client's initial configuration.
+ *
+ * You may want to initialize your client this way instead of calling
+ * `setConfig()`. This is useful for example if you're using Next.js
+ * to ensure your client always has the correct values.
+ */
+export type CreateClientConfig<T extends ClientOptions = ClientOptions> = (
+	override?: Config<ClientOptions & T>,
+) => Config<Required<ClientOptions> & T>;
+
+export interface TDataShape {
+	body?: unknown;
+	headers?: unknown;
+	path?: unknown;
+	query?: unknown;
+	url: string;
+}
+
+type OmitKeys<T, K> = Pick<T, Exclude<keyof T, K>>;
+
+export type Options<
+	TData extends TDataShape = TDataShape,
+	ThrowOnError extends boolean = boolean,
+	TResponse = unknown,
+	TResponseStyle extends ResponseStyle = "fields",
+> = OmitKeys<RequestOptions<TResponse, TResponseStyle, ThrowOnError>, "body" | "path" | "query" | "url"> &
+	([TData] extends [never] ? unknown : Omit<TData, "url">);

app/client/api-client/client/utils.gen.ts

@@ -0,0 +1,289 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import { getAuthToken } from "../core/auth.gen";
+import type { QuerySerializerOptions } from "../core/bodySerializer.gen";
+import { jsonBodySerializer } from "../core/bodySerializer.gen";
+import { serializeArrayParam, serializeObjectParam, serializePrimitiveParam } from "../core/pathSerializer.gen";
+import { getUrl } from "../core/utils.gen";
+import type { Client, ClientOptions, Config, RequestOptions } from "./types.gen";
+
+export const createQuerySerializer = <T = unknown>({ parameters = {}, ...args }: QuerySerializerOptions = {}) => {
+	const querySerializer = (queryParams: T) => {
+		const search: string[] = [];
+		if (queryParams && typeof queryParams === "object") {
+			for (const name in queryParams) {
+				const value = queryParams[name];
+
+				if (value === undefined || value === null) {
+					continue;
+				}
+
+				const options = parameters[name] || args;
+
+				if (Array.isArray(value)) {
+					const serializedArray = serializeArrayParam({
+						allowReserved: options.allowReserved,
+						explode: true,
+						name,
+						style: "form",
+						value,
+						...options.array,
+					});
+					if (serializedArray) search.push(serializedArray);
+				} else if (typeof value === "object") {
+					const serializedObject = serializeObjectParam({
+						allowReserved: options.allowReserved,
+						explode: true,
+						name,
+						style: "deepObject",
+						value: value as Record<string, unknown>,
+						...options.object,
+					});
+					if (serializedObject) search.push(serializedObject);
+				} else {
+					const serializedPrimitive = serializePrimitiveParam({
+						allowReserved: options.allowReserved,
+						name,
+						value: value as string,
+					});
+					if (serializedPrimitive) search.push(serializedPrimitive);
+				}
+			}
+		}
+		return search.join("&");
+	};
+	return querySerializer;
+};
+
+/**
+ * Infers parseAs value from provided Content-Type header.
+ */
+export const getParseAs = (contentType: string | null): Exclude<Config["parseAs"], "auto"> => {
+	if (!contentType) {
+		// If no Content-Type header is provided, the best we can do is return the raw response body,
+		// which is effectively the same as the 'stream' option.
+		return "stream";
+	}
+
+	const cleanContent = contentType.split(";")[0]?.trim();
+
+	if (!cleanContent) {
+		return;
+	}
+
+	if (cleanContent.startsWith("application/json") || cleanContent.endsWith("+json")) {
+		return "json";
+	}
+
+	if (cleanContent === "multipart/form-data") {
+		return "formData";
+	}
+
+	if (["application/", "audio/", "image/", "video/"].some((type) => cleanContent.startsWith(type))) {
+		return "blob";
+	}
+
+	if (cleanContent.startsWith("text/")) {
+		return "text";
+	}
+
+	return;
+};
+
+const checkForExistence = (
+	options: Pick<RequestOptions, "auth" | "query"> & {
+		headers: Headers;
+	},
+	name?: string,
+): boolean => {
+	if (!name) {
+		return false;
+	}
+	if (options.headers.has(name) || options.query?.[name] || options.headers.get("Cookie")?.includes(`${name}=`)) {
+		return true;
+	}
+	return false;
+};
+
+export const setAuthParams = async ({
+	security,
+	...options
+}: Pick<Required<RequestOptions>, "security"> &
+	Pick<RequestOptions, "auth" | "query"> & {
+		headers: Headers;
+	}) => {
+	for (const auth of security) {
+		if (checkForExistence(options, auth.name)) {
+			continue;
+		}
+
+		const token = await getAuthToken(auth, options.auth);
+
+		if (!token) {
+			continue;
+		}
+
+		const name = auth.name ?? "Authorization";
+
+		switch (auth.in) {
+			case "query":
+				if (!options.query) {
+					options.query = {};
+				}
+				options.query[name] = token;
+				break;
+			case "cookie":
+				options.headers.append("Cookie", `${name}=${token}`);
+				break;
+			case "header":
+			default:
+				options.headers.set(name, token);
+				break;
+		}
+	}
+};
+
+export const buildUrl: Client["buildUrl"] = (options) =>
+	getUrl({
+		baseUrl: options.baseUrl as string,
+		path: options.path,
+		query: options.query,
+		querySerializer:
+			typeof options.querySerializer === "function"
+				? options.querySerializer
+				: createQuerySerializer(options.querySerializer),
+		url: options.url,
+	});
+
+export const mergeConfigs = (a: Config, b: Config): Config => {
+	const config = { ...a, ...b };
+	if (config.baseUrl?.endsWith("/")) {
+		config.baseUrl = config.baseUrl.substring(0, config.baseUrl.length - 1);
+	}
+	config.headers = mergeHeaders(a.headers, b.headers);
+	return config;
+};
+
+const headersEntries = (headers: Headers): Array<[string, string]> => {
+	const entries: Array<[string, string]> = [];
+	headers.forEach((value, key) => {
+		entries.push([key, value]);
+	});
+	return entries;
+};
+
+export const mergeHeaders = (...headers: Array<Required<Config>["headers"] | undefined>): Headers => {
+	const mergedHeaders = new Headers();
+	for (const header of headers) {
+		if (!header) {
+			continue;
+		}
+
+		const iterator = header instanceof Headers ? headersEntries(header) : Object.entries(header);
+
+		for (const [key, value] of iterator) {
+			if (value === null) {
+				mergedHeaders.delete(key);
+			} else if (Array.isArray(value)) {
+				for (const v of value) {
+					mergedHeaders.append(key, v as string);
+				}
+			} else if (value !== undefined) {
+				// assume object headers are meant to be JSON stringified, i.e. their
+				// content value in OpenAPI specification is 'application/json'
+				mergedHeaders.set(key, typeof value === "object" ? JSON.stringify(value) : (value as string));
+			}
+		}
+	}
+	return mergedHeaders;
+};
+
+type ErrInterceptor<Err, Res, Req, Options> = (
+	error: Err,
+	response: Res,
+	request: Req,
+	options: Options,
+) => Err | Promise<Err>;
+
+type ReqInterceptor<Req, Options> = (request: Req, options: Options) => Req | Promise<Req>;
+
+type ResInterceptor<Res, Req, Options> = (response: Res, request: Req, options: Options) => Res | Promise<Res>;
+
+class Interceptors<Interceptor> {
+	fns: Array<Interceptor | null> = [];
+
+	clear(): void {
+		this.fns = [];
+	}
+
+	eject(id: number | Interceptor): void {
+		const index = this.getInterceptorIndex(id);
+		if (this.fns[index]) {
+			this.fns[index] = null;
+		}
+	}
+
+	exists(id: number | Interceptor): boolean {
+		const index = this.getInterceptorIndex(id);
+		return Boolean(this.fns[index]);
+	}
+
+	getInterceptorIndex(id: number | Interceptor): number {
+		if (typeof id === "number") {
+			return this.fns[id] ? id : -1;
+		}
+		return this.fns.indexOf(id);
+	}
+
+	update(id: number | Interceptor, fn: Interceptor): number | Interceptor | false {
+		const index = this.getInterceptorIndex(id);
+		if (this.fns[index]) {
+			this.fns[index] = fn;
+			return id;
+		}
+		return false;
+	}
+
+	use(fn: Interceptor): number {
+		this.fns.push(fn);
+		return this.fns.length - 1;
+	}
+}
+
+export interface Middleware<Req, Res, Err, Options> {
+	error: Interceptors<ErrInterceptor<Err, Res, Req, Options>>;
+	request: Interceptors<ReqInterceptor<Req, Options>>;
+	response: Interceptors<ResInterceptor<Res, Req, Options>>;
+}
+
+export const createInterceptors = <Req, Res, Err, Options>(): Middleware<Req, Res, Err, Options> => ({
+	error: new Interceptors<ErrInterceptor<Err, Res, Req, Options>>(),
+	request: new Interceptors<ReqInterceptor<Req, Options>>(),
+	response: new Interceptors<ResInterceptor<Res, Req, Options>>(),
+});
+
+const defaultQuerySerializer = createQuerySerializer({
+	allowReserved: false,
+	array: {
+		explode: true,
+		style: "form",
+	},
+	object: {
+		explode: true,
+		style: "deepObject",
+	},
+});
+
+const defaultHeaders = {
+	"Content-Type": "application/json",
+};
+
+export const createConfig = <T extends ClientOptions = ClientOptions>(
+	override: Config<Omit<ClientOptions, keyof T> & T> = {},
+): Config<Omit<ClientOptions, keyof T> & T> => ({
+	...jsonBodySerializer,
+	headers: defaultHeaders,
+	parseAs: "auto",
+	querySerializer: defaultQuerySerializer,
+	...override,
+});

app/client/api-client/core/auth.gen.ts

@@ -0,0 +1,41 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+export type AuthToken = string | undefined;
+
+export interface Auth {
+	/**
+	 * Which part of the request do we use to send the auth?
+	 *
+	 * @default 'header'
+	 */
+	in?: "header" | "query" | "cookie";
+	/**
+	 * Header or query parameter name.
+	 *
+	 * @default 'Authorization'
+	 */
+	name?: string;
+	scheme?: "basic" | "bearer";
+	type: "apiKey" | "http";
+}
+
+export const getAuthToken = async (
+	auth: Auth,
+	callback: ((auth: Auth) => Promise<AuthToken> | AuthToken) | AuthToken,
+): Promise<string | undefined> => {
+	const token = typeof callback === "function" ? await callback(auth) : callback;
+
+	if (!token) {
+		return;
+	}
+
+	if (auth.scheme === "bearer") {
+		return `Bearer ${token}`;
+	}
+
+	if (auth.scheme === "basic") {
+		return `Basic ${btoa(token)}`;
+	}
+
+	return token;
+};

app/client/api-client/core/bodySerializer.gen.ts

@@ -0,0 +1,82 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { ArrayStyle, ObjectStyle, SerializerOptions } from "./pathSerializer.gen";
+
+export type QuerySerializer = (query: Record<string, unknown>) => string;
+
+export type BodySerializer = (body: any) => any;
+
+type QuerySerializerOptionsObject = {
+	allowReserved?: boolean;
+	array?: Partial<SerializerOptions<ArrayStyle>>;
+	object?: Partial<SerializerOptions<ObjectStyle>>;
+};
+
+export type QuerySerializerOptions = QuerySerializerOptionsObject & {
+	/**
+	 * Per-parameter serialization overrides. When provided, these settings
+	 * override the global array/object settings for specific parameter names.
+	 */
+	parameters?: Record<string, QuerySerializerOptionsObject>;
+};
+
+const serializeFormDataPair = (data: FormData, key: string, value: unknown): void => {
+	if (typeof value === "string" || value instanceof Blob) {
+		data.append(key, value);
+	} else if (value instanceof Date) {
+		data.append(key, value.toISOString());
+	} else {
+		data.append(key, JSON.stringify(value));
+	}
+};
+
+const serializeUrlSearchParamsPair = (data: URLSearchParams, key: string, value: unknown): void => {
+	if (typeof value === "string") {
+		data.append(key, value);
+	} else {
+		data.append(key, JSON.stringify(value));
+	}
+};
+
+export const formDataBodySerializer = {
+	bodySerializer: <T extends Record<string, any> | Array<Record<string, any>>>(body: T): FormData => {
+		const data = new FormData();
+
+		Object.entries(body).forEach(([key, value]) => {
+			if (value === undefined || value === null) {
+				return;
+			}
+			if (Array.isArray(value)) {
+				value.forEach((v) => serializeFormDataPair(data, key, v));
+			} else {
+				serializeFormDataPair(data, key, value);
+			}
+		});
+
+		return data;
+	},
+};
+
+export const jsonBodySerializer = {
+	bodySerializer: <T>(body: T): string =>
+		JSON.stringify(body, (_key, value) => (typeof value === "bigint" ? value.toString() : value)),
+};
+
+export const urlSearchParamsBodySerializer = {
+	bodySerializer: <T extends Record<string, any> | Array<Record<string, any>>>(body: T): string => {
+		const data = new URLSearchParams();
+
+		Object.entries(body).forEach(([key, value]) => {
+			if (value === undefined || value === null) {
+				return;
+			}
+			if (Array.isArray(value)) {
+				value.forEach((v) => serializeUrlSearchParamsPair(data, key, v));
+			} else {
+				serializeUrlSearchParamsPair(data, key, value);
+			}
+		});
+
+		return data.toString();
+	},
+};

app/client/api-client/core/params.gen.ts

@@ -0,0 +1,169 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+type Slot = "body" | "headers" | "path" | "query";
+
+export type Field =
+	| {
+			in: Exclude<Slot, "body">;
+			/**
+			 * Field name. This is the name we want the user to see and use.
+			 */
+			key: string;
+			/**
+			 * Field mapped name. This is the name we want to use in the request.
+			 * If omitted, we use the same value as `key`.
+			 */
+			map?: string;
+	  }
+	| {
+			in: Extract<Slot, "body">;
+			/**
+			 * Key isn't required for bodies.
+			 */
+			key?: string;
+			map?: string;
+	  }
+	| {
+			/**
+			 * Field name. This is the name we want the user to see and use.
+			 */
+			key: string;
+			/**
+			 * Field mapped name. This is the name we want to use in the request.
+			 * If `in` is omitted, `map` aliases `key` to the transport layer.
+			 */
+			map: Slot;
+	  };
+
+export interface Fields {
+	allowExtra?: Partial<Record<Slot, boolean>>;
+	args?: ReadonlyArray<Field>;
+}
+
+export type FieldsConfig = ReadonlyArray<Field | Fields>;
+
+const extraPrefixesMap: Record<string, Slot> = {
+	$body_: "body",
+	$headers_: "headers",
+	$path_: "path",
+	$query_: "query",
+};
+const extraPrefixes = Object.entries(extraPrefixesMap);
+
+type KeyMap = Map<
+	string,
+	| {
+			in: Slot;
+			map?: string;
+	  }
+	| {
+			in?: never;
+			map: Slot;
+	  }
+>;
+
+const buildKeyMap = (fields: FieldsConfig, map?: KeyMap): KeyMap => {
+	if (!map) {
+		map = new Map();
+	}
+
+	for (const config of fields) {
+		if ("in" in config) {
+			if (config.key) {
+				map.set(config.key, {
+					in: config.in,
+					map: config.map,
+				});
+			}
+		} else if ("key" in config) {
+			map.set(config.key, {
+				map: config.map,
+			});
+		} else if (config.args) {
+			buildKeyMap(config.args, map);
+		}
+	}
+
+	return map;
+};
+
+interface Params {
+	body: unknown;
+	headers: Record<string, unknown>;
+	path: Record<string, unknown>;
+	query: Record<string, unknown>;
+}
+
+const stripEmptySlots = (params: Params) => {
+	for (const [slot, value] of Object.entries(params)) {
+		if (value && typeof value === "object" && !Object.keys(value).length) {
+			delete params[slot as Slot];
+		}
+	}
+};
+
+export const buildClientParams = (args: ReadonlyArray<unknown>, fields: FieldsConfig) => {
+	const params: Params = {
+		body: {},
+		headers: {},
+		path: {},
+		query: {},
+	};
+
+	const map = buildKeyMap(fields);
+
+	let config: FieldsConfig[number] | undefined;
+
+	for (const [index, arg] of args.entries()) {
+		if (fields[index]) {
+			config = fields[index];
+		}
+
+		if (!config) {
+			continue;
+		}
+
+		if ("in" in config) {
+			if (config.key) {
+				const field = map.get(config.key)!;
+				const name = field.map || config.key;
+				if (field.in) {
+					(params[field.in] as Record<string, unknown>)[name] = arg;
+				}
+			} else {
+				params.body = arg;
+			}
+		} else {
+			for (const [key, value] of Object.entries(arg ?? {})) {
+				const field = map.get(key);
+
+				if (field) {
+					if (field.in) {
+						const name = field.map || key;
+						(params[field.in] as Record<string, unknown>)[name] = value;
+					} else {
+						params[field.map] = value;
+					}
+				} else {
+					const extra = extraPrefixes.find(([prefix]) => key.startsWith(prefix));
+
+					if (extra) {
+						const [prefix, slot] = extra;
+						(params[slot] as Record<string, unknown>)[key.slice(prefix.length)] = value;
+					} else if ("allowExtra" in config && config.allowExtra) {
+						for (const [slot, allowed] of Object.entries(config.allowExtra)) {
+							if (allowed) {
+								(params[slot as Slot] as Record<string, unknown>)[key] = value;
+								break;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	stripEmptySlots(params);
+
+	return params;
+};

app/client/api-client/core/pathSerializer.gen.ts

@@ -0,0 +1,167 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+interface SerializeOptions<T> extends SerializePrimitiveOptions, SerializerOptions<T> {}
+
+interface SerializePrimitiveOptions {
+	allowReserved?: boolean;
+	name: string;
+}
+
+export interface SerializerOptions<T> {
+	/**
+	 * @default true
+	 */
+	explode: boolean;
+	style: T;
+}
+
+export type ArrayStyle = "form" | "spaceDelimited" | "pipeDelimited";
+export type ArraySeparatorStyle = ArrayStyle | MatrixStyle;
+type MatrixStyle = "label" | "matrix" | "simple";
+export type ObjectStyle = "form" | "deepObject";
+type ObjectSeparatorStyle = ObjectStyle | MatrixStyle;
+
+interface SerializePrimitiveParam extends SerializePrimitiveOptions {
+	value: string;
+}
+
+export const separatorArrayExplode = (style: ArraySeparatorStyle) => {
+	switch (style) {
+		case "label":
+			return ".";
+		case "matrix":
+			return ";";
+		case "simple":
+			return ",";
+		default:
+			return "&";
+	}
+};
+
+export const separatorArrayNoExplode = (style: ArraySeparatorStyle) => {
+	switch (style) {
+		case "form":
+			return ",";
+		case "pipeDelimited":
+			return "|";
+		case "spaceDelimited":
+			return "%20";
+		default:
+			return ",";
+	}
+};
+
+export const separatorObjectExplode = (style: ObjectSeparatorStyle) => {
+	switch (style) {
+		case "label":
+			return ".";
+		case "matrix":
+			return ";";
+		case "simple":
+			return ",";
+		default:
+			return "&";
+	}
+};
+
+export const serializeArrayParam = ({
+	allowReserved,
+	explode,
+	name,
+	style,
+	value,
+}: SerializeOptions<ArraySeparatorStyle> & {
+	value: unknown[];
+}) => {
+	if (!explode) {
+		const joinedValues = (allowReserved ? value : value.map((v) => encodeURIComponent(v as string))).join(
+			separatorArrayNoExplode(style),
+		);
+		switch (style) {
+			case "label":
+				return `.${joinedValues}`;
+			case "matrix":
+				return `;${name}=${joinedValues}`;
+			case "simple":
+				return joinedValues;
+			default:
+				return `${name}=${joinedValues}`;
+		}
+	}
+
+	const separator = separatorArrayExplode(style);
+	const joinedValues = value
+		.map((v) => {
+			if (style === "label" || style === "simple") {
+				return allowReserved ? v : encodeURIComponent(v as string);
+			}
+
+			return serializePrimitiveParam({
+				allowReserved,
+				name,
+				value: v as string,
+			});
+		})
+		.join(separator);
+	return style === "label" || style === "matrix" ? separator + joinedValues : joinedValues;
+};
+
+export const serializePrimitiveParam = ({ allowReserved, name, value }: SerializePrimitiveParam) => {
+	if (value === undefined || value === null) {
+		return "";
+	}
+
+	if (typeof value === "object") {
+		throw new Error(
+			"Deeply-nested arrays/objects aren’t supported. Provide your own `querySerializer()` to handle these.",
+		);
+	}
+
+	return `${name}=${allowReserved ? value : encodeURIComponent(value)}`;
+};
+
+export const serializeObjectParam = ({
+	allowReserved,
+	explode,
+	name,
+	style,
+	value,
+	valueOnly,
+}: SerializeOptions<ObjectSeparatorStyle> & {
+	value: Record<string, unknown> | Date;
+	valueOnly?: boolean;
+}) => {
+	if (value instanceof Date) {
+		return valueOnly ? value.toISOString() : `${name}=${value.toISOString()}`;
+	}
+
+	if (style !== "deepObject" && !explode) {
+		let values: string[] = [];
+		Object.entries(value).forEach(([key, v]) => {
+			values = [...values, key, allowReserved ? (v as string) : encodeURIComponent(v as string)];
+		});
+		const joinedValues = values.join(",");
+		switch (style) {
+			case "form":
+				return `${name}=${joinedValues}`;
+			case "label":
+				return `.${joinedValues}`;
+			case "matrix":
+				return `;${name}=${joinedValues}`;
+			default:
+				return joinedValues;
+		}
+	}
+
+	const separator = separatorObjectExplode(style);
+	const joinedValues = Object.entries(value)
+		.map(([key, v]) =>
+			serializePrimitiveParam({
+				allowReserved,
+				name: style === "deepObject" ? `${name}[${key}]` : key,
+				value: v as string,
+			}),
+		)
+		.join(separator);
+	return style === "label" || style === "matrix" ? separator + joinedValues : joinedValues;
+};

app/client/api-client/core/queryKeySerializer.gen.ts

@@ -0,0 +1,111 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+/**
+ * JSON-friendly union that mirrors what Pinia Colada can hash.
+ */
+export type JsonValue = null | string | number | boolean | JsonValue[] | { [key: string]: JsonValue };
+
+/**
+ * Replacer that converts non-JSON values (bigint, Date, etc.) to safe substitutes.
+ */
+export const queryKeyJsonReplacer = (_key: string, value: unknown) => {
+	if (value === undefined || typeof value === "function" || typeof value === "symbol") {
+		return undefined;
+	}
+	if (typeof value === "bigint") {
+		return value.toString();
+	}
+	if (value instanceof Date) {
+		return value.toISOString();
+	}
+	return value;
+};
+
+/**
+ * Safely stringifies a value and parses it back into a JsonValue.
+ */
+export const stringifyToJsonValue = (input: unknown): JsonValue | undefined => {
+	try {
+		const json = JSON.stringify(input, queryKeyJsonReplacer);
+		if (json === undefined) {
+			return undefined;
+		}
+		return JSON.parse(json) as JsonValue;
+	} catch {
+		return undefined;
+	}
+};
+
+/**
+ * Detects plain objects (including objects with a null prototype).
+ */
+const isPlainObject = (value: unknown): value is Record<string, unknown> => {
+	if (value === null || typeof value !== "object") {
+		return false;
+	}
+	const prototype = Object.getPrototypeOf(value as object);
+	return prototype === Object.prototype || prototype === null;
+};
+
+/**
+ * Turns URLSearchParams into a sorted JSON object for deterministic keys.
+ */
+const serializeSearchParams = (params: URLSearchParams): JsonValue => {
+	const entries = Array.from(params.entries()).sort(([a], [b]) => a.localeCompare(b));
+	const result: Record<string, JsonValue> = {};
+
+	for (const [key, value] of entries) {
+		const existing = result[key];
+		if (existing === undefined) {
+			result[key] = value;
+			continue;
+		}
+
+		if (Array.isArray(existing)) {
+			(existing as string[]).push(value);
+		} else {
+			result[key] = [existing, value];
+		}
+	}
+
+	return result;
+};
+
+/**
+ * Normalizes any accepted value into a JSON-friendly shape for query keys.
+ */
+export const serializeQueryKeyValue = (value: unknown): JsonValue | undefined => {
+	if (value === null) {
+		return null;
+	}
+
+	if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+		return value;
+	}
+
+	if (value === undefined || typeof value === "function" || typeof value === "symbol") {
+		return undefined;
+	}
+
+	if (typeof value === "bigint") {
+		return value.toString();
+	}
+
+	if (value instanceof Date) {
+		return value.toISOString();
+	}
+
+	if (Array.isArray(value)) {
+		return stringifyToJsonValue(value);
+	}
+
+	if (typeof URLSearchParams !== "undefined" && value instanceof URLSearchParams) {
+		return serializeSearchParams(value);
+	}
+
+	if (isPlainObject(value)) {
+		return stringifyToJsonValue(value);
+	}
+
+	return undefined;
+};

app/client/api-client/core/serverSentEvents.gen.ts

@@ -0,0 +1,237 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { Config } from "./types.gen";
+
+export type ServerSentEventsOptions<TData = unknown> = Omit<RequestInit, "method"> &
+	Pick<Config, "method" | "responseTransformer" | "responseValidator"> & {
+		/**
+		 * Fetch API implementation. You can use this option to provide a custom
+		 * fetch instance.
+		 *
+		 * @default globalThis.fetch
+		 */
+		fetch?: typeof fetch;
+		/**
+		 * Implementing clients can call request interceptors inside this hook.
+		 */
+		onRequest?: (url: string, init: RequestInit) => Promise<Request>;
+		/**
+		 * Callback invoked when a network or parsing error occurs during streaming.
+		 *
+		 * This option applies only if the endpoint returns a stream of events.
+		 *
+		 * @param error The error that occurred.
+		 */
+		onSseError?: (error: unknown) => void;
+		/**
+		 * Callback invoked when an event is streamed from the server.
+		 *
+		 * This option applies only if the endpoint returns a stream of events.
+		 *
+		 * @param event Event streamed from the server.
+		 * @returns Nothing (void).
+		 */
+		onSseEvent?: (event: StreamEvent<TData>) => void;
+		serializedBody?: RequestInit["body"];
+		/**
+		 * Default retry delay in milliseconds.
+		 *
+		 * This option applies only if the endpoint returns a stream of events.
+		 *
+		 * @default 3000
+		 */
+		sseDefaultRetryDelay?: number;
+		/**
+		 * Maximum number of retry attempts before giving up.
+		 */
+		sseMaxRetryAttempts?: number;
+		/**
+		 * Maximum retry delay in milliseconds.
+		 *
+		 * Applies only when exponential backoff is used.
+		 *
+		 * This option applies only if the endpoint returns a stream of events.
+		 *
+		 * @default 30000
+		 */
+		sseMaxRetryDelay?: number;
+		/**
+		 * Optional sleep function for retry backoff.
+		 *
+		 * Defaults to using `setTimeout`.
+		 */
+		sseSleepFn?: (ms: number) => Promise<void>;
+		url: string;
+	};
+
+export interface StreamEvent<TData = unknown> {
+	data: TData;
+	event?: string;
+	id?: string;
+	retry?: number;
+}
+
+export type ServerSentEventsResult<TData = unknown, TReturn = void, TNext = unknown> = {
+	stream: AsyncGenerator<TData extends Record<string, unknown> ? TData[keyof TData] : TData, TReturn, TNext>;
+};
+
+export const createSseClient = <TData = unknown>({
+	onRequest,
+	onSseError,
+	onSseEvent,
+	responseTransformer,
+	responseValidator,
+	sseDefaultRetryDelay,
+	sseMaxRetryAttempts,
+	sseMaxRetryDelay,
+	sseSleepFn,
+	url,
+	...options
+}: ServerSentEventsOptions): ServerSentEventsResult<TData> => {
+	let lastEventId: string | undefined;
+
+	const sleep = sseSleepFn ?? ((ms: number) => new Promise((resolve) => setTimeout(resolve, ms)));
+
+	const createStream = async function* () {
+		let retryDelay: number = sseDefaultRetryDelay ?? 3000;
+		let attempt = 0;
+		const signal = options.signal ?? new AbortController().signal;
+
+		while (true) {
+			if (signal.aborted) break;
+
+			attempt++;
+
+			const headers =
+				options.headers instanceof Headers
+					? options.headers
+					: new Headers(options.headers as Record<string, string> | undefined);
+
+			if (lastEventId !== undefined) {
+				headers.set("Last-Event-ID", lastEventId);
+			}
+
+			try {
+				const requestInit: RequestInit = {
+					redirect: "follow",
+					...options,
+					body: options.serializedBody,
+					headers,
+					signal,
+				};
+				let request = new Request(url, requestInit);
+				if (onRequest) {
+					request = await onRequest(url, requestInit);
+				}
+				// fetch must be assigned here, otherwise it would throw the error:
+				// TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation
+				const _fetch = options.fetch ?? globalThis.fetch;
+				const response = await _fetch(request);
+
+				if (!response.ok) throw new Error(`SSE failed: ${response.status} ${response.statusText}`);
+
+				if (!response.body) throw new Error("No body in SSE response");
+
+				const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
+
+				let buffer = "";
+
+				const abortHandler = () => {
+					try {
+						reader.cancel();
+					} catch {
+						// noop
+					}
+				};
+
+				signal.addEventListener("abort", abortHandler);
+
+				try {
+					while (true) {
+						const { done, value } = await reader.read();
+						if (done) break;
+						buffer += value;
+
+						const chunks = buffer.split("\n\n");
+						buffer = chunks.pop() ?? "";
+
+						for (const chunk of chunks) {
+							const lines = chunk.split("\n");
+							const dataLines: Array<string> = [];
+							let eventName: string | undefined;
+
+							for (const line of lines) {
+								if (line.startsWith("data:")) {
+									dataLines.push(line.replace(/^data:\s*/, ""));
+								} else if (line.startsWith("event:")) {
+									eventName = line.replace(/^event:\s*/, "");
+								} else if (line.startsWith("id:")) {
+									lastEventId = line.replace(/^id:\s*/, "");
+								} else if (line.startsWith("retry:")) {
+									const parsed = Number.parseInt(line.replace(/^retry:\s*/, ""), 10);
+									if (!Number.isNaN(parsed)) {
+										retryDelay = parsed;
+									}
+								}
+							}
+
+							let data: unknown;
+							let parsedJson = false;
+
+							if (dataLines.length) {
+								const rawData = dataLines.join("\n");
+								try {
+									data = JSON.parse(rawData);
+									parsedJson = true;
+								} catch {
+									data = rawData;
+								}
+							}
+
+							if (parsedJson) {
+								if (responseValidator) {
+									await responseValidator(data);
+								}
+
+								if (responseTransformer) {
+									data = await responseTransformer(data);
+								}
+							}
+
+							onSseEvent?.({
+								data,
+								event: eventName,
+								id: lastEventId,
+								retry: retryDelay,
+							});
+
+							if (dataLines.length) {
+								yield data as any;
+							}
+						}
+					}
+				} finally {
+					signal.removeEventListener("abort", abortHandler);
+					reader.releaseLock();
+				}
+
+				break; // exit loop on normal completion
+			} catch (error) {
+				// connection failed or aborted; retry after delay
+				onSseError?.(error);
+
+				if (sseMaxRetryAttempts !== undefined && attempt >= sseMaxRetryAttempts) {
+					break; // stop after firing error
+				}
+
+				// exponential backoff: double retry each attempt, cap at 30s
+				const backoff = Math.min(retryDelay * 2 ** (attempt - 1), sseMaxRetryDelay ?? 30000);
+				await sleep(backoff);
+			}
+		}
+	};
+
+	const stream = createStream();
+
+	return { stream };
+};

app/client/api-client/core/types.gen.ts

@@ -0,0 +1,86 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { Auth, AuthToken } from "./auth.gen";
+import type { BodySerializer, QuerySerializer, QuerySerializerOptions } from "./bodySerializer.gen";
+
+export type HttpMethod = "connect" | "delete" | "get" | "head" | "options" | "patch" | "post" | "put" | "trace";
+
+export type Client<RequestFn = never, Config = unknown, MethodFn = never, BuildUrlFn = never, SseFn = never> = {
+	/**
+	 * Returns the final request URL.
+	 */
+	buildUrl: BuildUrlFn;
+	getConfig: () => Config;
+	request: RequestFn;
+	setConfig: (config: Config) => Config;
+} & {
+	[K in HttpMethod]: MethodFn;
+} & ([SseFn] extends [never] ? { sse?: never } : { sse: { [K in HttpMethod]: SseFn } });
+
+export interface Config {
+	/**
+	 * Auth token or a function returning auth token. The resolved value will be
+	 * added to the request payload as defined by its `security` array.
+	 */
+	auth?: ((auth: Auth) => Promise<AuthToken> | AuthToken) | AuthToken;
+	/**
+	 * A function for serializing request body parameter. By default,
+	 * {@link JSON.stringify()} will be used.
+	 */
+	bodySerializer?: BodySerializer | null;
+	/**
+	 * An object containing any HTTP headers that you want to pre-populate your
+	 * `Headers` object with.
+	 *
+	 * {@link https://developer.mozilla.org/docs/Web/API/Headers/Headers#init See more}
+	 */
+	headers?:
+		| RequestInit["headers"]
+		| Record<string, string | number | boolean | (string | number | boolean)[] | null | undefined | unknown>;
+	/**
+	 * The request method.
+	 *
+	 * {@link https://developer.mozilla.org/docs/Web/API/fetch#method See more}
+	 */
+	method?: Uppercase<HttpMethod>;
+	/**
+	 * A function for serializing request query parameters. By default, arrays
+	 * will be exploded in form style, objects will be exploded in deepObject
+	 * style, and reserved characters are percent-encoded.
+	 *
+	 * This method will have no effect if the native `paramsSerializer()` Axios
+	 * API function is used.
+	 *
+	 * {@link https://swagger.io/docs/specification/serialization/#query View examples}
+	 */
+	querySerializer?: QuerySerializer | QuerySerializerOptions;
+	/**
+	 * A function validating request data. This is useful if you want to ensure
+	 * the request conforms to the desired shape, so it can be safely sent to
+	 * the server.
+	 */
+	requestValidator?: (data: unknown) => Promise<unknown>;
+	/**
+	 * A function transforming response data before it's returned. This is useful
+	 * for post-processing data, e.g. converting ISO strings into Date objects.
+	 */
+	responseTransformer?: (data: unknown) => Promise<unknown>;
+	/**
+	 * A function validating response data. This is useful if you want to ensure
+	 * the response conforms to the desired shape, so it can be safely passed to
+	 * the transformers and returned to the user.
+	 */
+	responseValidator?: (data: unknown) => Promise<unknown>;
+}
+
+type IsExactlyNeverOrNeverUndefined<T> = [T] extends [never]
+	? true
+	: [T] extends [never | undefined]
+		? [undefined] extends [T]
+			? false
+			: true
+		: false;
+
+export type OmitNever<T extends Record<string, unknown>> = {
+	[K in keyof T as IsExactlyNeverOrNeverUndefined<T[K]> extends true ? never : K]: T[K];
+};

app/client/api-client/core/utils.gen.ts

@@ -0,0 +1,137 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { BodySerializer, QuerySerializer } from "./bodySerializer.gen";
+import {
+	type ArraySeparatorStyle,
+	serializeArrayParam,
+	serializeObjectParam,
+	serializePrimitiveParam,
+} from "./pathSerializer.gen";
+
+export interface PathSerializer {
+	path: Record<string, unknown>;
+	url: string;
+}
+
+export const PATH_PARAM_RE = /\{[^{}]+\}/g;
+
+export const defaultPathSerializer = ({ path, url: _url }: PathSerializer) => {
+	let url = _url;
+	const matches = _url.match(PATH_PARAM_RE);
+	if (matches) {
+		for (const match of matches) {
+			let explode = false;
+			let name = match.substring(1, match.length - 1);
+			let style: ArraySeparatorStyle = "simple";
+
+			if (name.endsWith("*")) {
+				explode = true;
+				name = name.substring(0, name.length - 1);
+			}
+
+			if (name.startsWith(".")) {
+				name = name.substring(1);
+				style = "label";
+			} else if (name.startsWith(";")) {
+				name = name.substring(1);
+				style = "matrix";
+			}
+
+			const value = path[name];
+
+			if (value === undefined || value === null) {
+				continue;
+			}
+
+			if (Array.isArray(value)) {
+				url = url.replace(match, serializeArrayParam({ explode, name, style, value }));
+				continue;
+			}
+
+			if (typeof value === "object") {
+				url = url.replace(
+					match,
+					serializeObjectParam({
+						explode,
+						name,
+						style,
+						value: value as Record<string, unknown>,
+						valueOnly: true,
+					}),
+				);
+				continue;
+			}
+
+			if (style === "matrix") {
+				url = url.replace(
+					match,
+					`;${serializePrimitiveParam({
+						name,
+						value: value as string,
+					})}`,
+				);
+				continue;
+			}
+
+			const replaceValue = encodeURIComponent(style === "label" ? `.${value as string}` : (value as string));
+			url = url.replace(match, replaceValue);
+		}
+	}
+	return url;
+};
+
+export const getUrl = ({
+	baseUrl,
+	path,
+	query,
+	querySerializer,
+	url: _url,
+}: {
+	baseUrl?: string;
+	path?: Record<string, unknown>;
+	query?: Record<string, unknown>;
+	querySerializer: QuerySerializer;
+	url: string;
+}) => {
+	const pathUrl = _url.startsWith("/") ? _url : `/${_url}`;
+	let url = (baseUrl ?? "") + pathUrl;
+	if (path) {
+		url = defaultPathSerializer({ path, url });
+	}
+	let search = query ? querySerializer(query) : "";
+	if (search.startsWith("?")) {
+		search = search.substring(1);
+	}
+	if (search) {
+		url += `?${search}`;
+	}
+	return url;
+};
+
+export function getValidRequestBody(options: {
+	body?: unknown;
+	bodySerializer?: BodySerializer | null;
+	serializedBody?: unknown;
+}) {
+	const hasBody = options.body !== undefined;
+	const isSerializedBody = hasBody && options.bodySerializer;
+
+	if (isSerializedBody) {
+		if ("serializedBody" in options) {
+			const hasSerializedBody = options.serializedBody !== undefined && options.serializedBody !== "";
+
+			return hasSerializedBody ? options.serializedBody : null;
+		}
+
+		// not all clients implement a serializedBody property (i.e. client-axios)
+		return options.body !== "" ? options.body : null;
+	}
+
+	// plain/text body
+	if (hasBody) {
+		return options.body;
+	}
+
+	// no body was provided
+	return undefined;
+}

app/client/api-client/index.ts

@@ -0,0 +1,4 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+export type * from "./types.gen";
+export * from "./sdk.gen";

app/client/api-client/sdk.gen.ts

@@ -0,0 +1,588 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { Client, Options as Options2, TDataShape } from "./client";
+import { client } from "./client.gen";
+import type {
+	BrowseFilesystemData,
+	BrowseFilesystemResponses,
+	ChangePasswordData,
+	ChangePasswordResponses,
+	CreateBackupScheduleData,
+	CreateBackupScheduleResponses,
+	CreateRepositoryData,
+	CreateRepositoryResponses,
+	CreateVolumeData,
+	CreateVolumeResponses,
+	DeleteBackupScheduleData,
+	DeleteBackupScheduleResponses,
+	DeleteRepositoryData,
+	DeleteRepositoryResponses,
+	DeleteVolumeData,
+	DeleteVolumeResponses,
+	DoctorRepositoryData,
+	DoctorRepositoryResponses,
+	DownloadResticPasswordData,
+	DownloadResticPasswordResponses,
+	GetBackupScheduleData,
+	GetBackupScheduleForVolumeData,
+	GetBackupScheduleForVolumeResponses,
+	GetBackupScheduleResponses,
+	GetContainersUsingVolumeData,
+	GetContainersUsingVolumeErrors,
+	GetContainersUsingVolumeResponses,
+	GetMeData,
+	GetMeResponses,
+	GetRepositoryData,
+	GetRepositoryResponses,
+	GetSnapshotDetailsData,
+	GetSnapshotDetailsResponses,
+	GetStatusData,
+	GetStatusResponses,
+	GetSystemInfoData,
+	GetSystemInfoResponses,
+	GetVolumeData,
+	GetVolumeErrors,
+	GetVolumeResponses,
+	HealthCheckVolumeData,
+	HealthCheckVolumeErrors,
+	HealthCheckVolumeResponses,
+	ListBackupSchedulesData,
+	ListBackupSchedulesResponses,
+	ListFilesData,
+	ListFilesResponses,
+	ListRcloneRemotesData,
+	ListRcloneRemotesResponses,
+	ListRepositoriesData,
+	ListRepositoriesResponses,
+	ListSnapshotFilesData,
+	ListSnapshotFilesResponses,
+	ListSnapshotsData,
+	ListSnapshotsResponses,
+	ListVolumesData,
+	ListVolumesResponses,
+	LoginData,
+	LoginResponses,
+	LogoutData,
+	LogoutResponses,
+	MountVolumeData,
+	MountVolumeResponses,
+	RegisterData,
+	RegisterResponses,
+	RestoreSnapshotData,
+	RestoreSnapshotResponses,
+	RunBackupNowData,
+	RunBackupNowResponses,
+	StopBackupData,
+	StopBackupErrors,
+	StopBackupResponses,
+	TestConnectionData,
+	TestConnectionResponses,
+	UnmountVolumeData,
+	UnmountVolumeResponses,
+	UpdateBackupScheduleData,
+	UpdateBackupScheduleResponses,
+	UpdateVolumeData,
+	UpdateVolumeErrors,
+	UpdateVolumeResponses,
+} from "./types.gen";
+
+export type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean = boolean> = Options2<
+	TData,
+	ThrowOnError
+> & {
+	/**
+	 * You can provide a client instance returned by `createClient()` instead of
+	 * individual options. This might be also useful if you want to implement a
+	 * custom client.
+	 */
+	client?: Client;
+	/**
+	 * You can pass arbitrary values through the `meta` object. This can be
+	 * used to access values that aren't defined as part of the SDK function.
+	 */
+	meta?: Record<string, unknown>;
+};
+
+/**
+ * Register a new user
+ */
+export const register = <ThrowOnError extends boolean = false>(options?: Options<RegisterData, ThrowOnError>) => {
+	return (options?.client ?? client).post<RegisterResponses, unknown, ThrowOnError>({
+		url: "/api/v1/auth/register",
+		...options,
+		headers: {
+			"Content-Type": "application/json",
+			...options?.headers,
+		},
+	});
+};
+
+/**
+ * Login with username and password
+ */
+export const login = <ThrowOnError extends boolean = false>(options?: Options<LoginData, ThrowOnError>) => {
+	return (options?.client ?? client).post<LoginResponses, unknown, ThrowOnError>({
+		url: "/api/v1/auth/login",
+		...options,
+		headers: {
+			"Content-Type": "application/json",
+			...options?.headers,
+		},
+	});
+};
+
+/**
+ * Logout current user
+ */
+export const logout = <ThrowOnError extends boolean = false>(options?: Options<LogoutData, ThrowOnError>) => {
+	return (options?.client ?? client).post<LogoutResponses, unknown, ThrowOnError>({
+		url: "/api/v1/auth/logout",
+		...options,
+	});
+};
+
+/**
+ * Get current authenticated user
+ */
+export const getMe = <ThrowOnError extends boolean = false>(options?: Options<GetMeData, ThrowOnError>) => {
+	return (options?.client ?? client).get<GetMeResponses, unknown, ThrowOnError>({
+		url: "/api/v1/auth/me",
+		...options,
+	});
+};
+
+/**
+ * Get authentication system status
+ */
+export const getStatus = <ThrowOnError extends boolean = false>(options?: Options<GetStatusData, ThrowOnError>) => {
+	return (options?.client ?? client).get<GetStatusResponses, unknown, ThrowOnError>({
+		url: "/api/v1/auth/status",
+		...options,
+	});
+};
+
+/**
+ * Change current user password
+ */
+export const changePassword = <ThrowOnError extends boolean = false>(
+	options?: Options<ChangePasswordData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<ChangePasswordResponses, unknown, ThrowOnError>({
+		url: "/api/v1/auth/change-password",
+		...options,
+		headers: {
+			"Content-Type": "application/json",
+			...options?.headers,
+		},
+	});
+};
+
+/**
+ * List all volumes
+ */
+export const listVolumes = <ThrowOnError extends boolean = false>(options?: Options<ListVolumesData, ThrowOnError>) => {
+	return (options?.client ?? client).get<ListVolumesResponses, unknown, ThrowOnError>({
+		url: "/api/v1/volumes",
+		...options,
+	});
+};
+
+/**
+ * Create a new volume
+ */
+export const createVolume = <ThrowOnError extends boolean = false>(
+	options?: Options<CreateVolumeData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<CreateVolumeResponses, unknown, ThrowOnError>({
+		url: "/api/v1/volumes",
+		...options,
+		headers: {
+			"Content-Type": "application/json",
+			...options?.headers,
+		},
+	});
+};
+
+/**
+ * Test connection to backend
+ */
+export const testConnection = <ThrowOnError extends boolean = false>(
+	options?: Options<TestConnectionData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<TestConnectionResponses, unknown, ThrowOnError>({
+		url: "/api/v1/volumes/test-connection",
+		...options,
+		headers: {
+			"Content-Type": "application/json",
+			...options?.headers,
+		},
+	});
+};
+
+/**
+ * Delete a volume
+ */
+export const deleteVolume = <ThrowOnError extends boolean = false>(
+	options: Options<DeleteVolumeData, ThrowOnError>,
+) => {
+	return (options.client ?? client).delete<DeleteVolumeResponses, unknown, ThrowOnError>({
+		url: "/api/v1/volumes/{name}",
+		...options,
+	});
+};
+
+/**
+ * Get a volume by name
+ */
+export const getVolume = <ThrowOnError extends boolean = false>(options: Options<GetVolumeData, ThrowOnError>) => {
+	return (options.client ?? client).get<GetVolumeResponses, GetVolumeErrors, ThrowOnError>({
+		url: "/api/v1/volumes/{name}",
+		...options,
+	});
+};
+
+/**
+ * Update a volume's configuration
+ */
+export const updateVolume = <ThrowOnError extends boolean = false>(
+	options: Options<UpdateVolumeData, ThrowOnError>,
+) => {
+	return (options.client ?? client).put<UpdateVolumeResponses, UpdateVolumeErrors, ThrowOnError>({
+		url: "/api/v1/volumes/{name}",
+		...options,
+		headers: {
+			"Content-Type": "application/json",
+			...options.headers,
+		},
+	});
+};
+
+/**
+ * Get containers using a volume by name
+ */
+export const getContainersUsingVolume = <ThrowOnError extends boolean = false>(
+	options: Options<GetContainersUsingVolumeData, ThrowOnError>,
+) => {
+	return (options.client ?? client).get<
+		GetContainersUsingVolumeResponses,
+		GetContainersUsingVolumeErrors,
+		ThrowOnError
+	>({
+		url: "/api/v1/volumes/{name}/containers",
+		...options,
+	});
+};
+
+/**
+ * Mount a volume
+ */
+export const mountVolume = <ThrowOnError extends boolean = false>(options: Options<MountVolumeData, ThrowOnError>) => {
+	return (options.client ?? client).post<MountVolumeResponses, unknown, ThrowOnError>({
+		url: "/api/v1/volumes/{name}/mount",
+		...options,
+	});
+};
+
+/**
+ * Unmount a volume
+ */
+export const unmountVolume = <ThrowOnError extends boolean = false>(
+	options: Options<UnmountVolumeData, ThrowOnError>,
+) => {
+	return (options.client ?? client).post<UnmountVolumeResponses, unknown, ThrowOnError>({
+		url: "/api/v1/volumes/{name}/unmount",
+		...options,
+	});
+};
+
+/**
+ * Perform a health check on a volume
+ */
+export const healthCheckVolume = <ThrowOnError extends boolean = false>(
+	options: Options<HealthCheckVolumeData, ThrowOnError>,
+) => {
+	return (options.client ?? client).post<HealthCheckVolumeResponses, HealthCheckVolumeErrors, ThrowOnError>({
+		url: "/api/v1/volumes/{name}/health-check",
+		...options,
+	});
+};
+
+/**
+ * List files in a volume directory
+ */
+export const listFiles = <ThrowOnError extends boolean = false>(options: Options<ListFilesData, ThrowOnError>) => {
+	return (options.client ?? client).get<ListFilesResponses, unknown, ThrowOnError>({
+		url: "/api/v1/volumes/{name}/files",
+		...options,
+	});
+};
+
+/**
+ * Browse directories on the host filesystem
+ */
+export const browseFilesystem = <ThrowOnError extends boolean = false>(
+	options?: Options<BrowseFilesystemData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<BrowseFilesystemResponses, unknown, ThrowOnError>({
+		url: "/api/v1/volumes/filesystem/browse",
+		...options,
+	});
+};
+
+/**
+ * List all repositories
+ */
+export const listRepositories = <ThrowOnError extends boolean = false>(
+	options?: Options<ListRepositoriesData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ListRepositoriesResponses, unknown, ThrowOnError>({
+		url: "/api/v1/repositories",
+		...options,
+	});
+};
+
+/**
+ * Create a new restic repository
+ */
+export const createRepository = <ThrowOnError extends boolean = false>(
+	options?: Options<CreateRepositoryData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<CreateRepositoryResponses, unknown, ThrowOnError>({
+		url: "/api/v1/repositories",
+		...options,
+		headers: {
+			"Content-Type": "application/json",
+			...options?.headers,
+		},
+	});
+};
+
+/**
+ * List all configured rclone remotes on the host system
+ */
+export const listRcloneRemotes = <ThrowOnError extends boolean = false>(
+	options?: Options<ListRcloneRemotesData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ListRcloneRemotesResponses, unknown, ThrowOnError>({
+		url: "/api/v1/repositories/rclone-remotes",
+		...options,
+	});
+};
+
+/**
+ * Delete a repository
+ */
+export const deleteRepository = <ThrowOnError extends boolean = false>(
+	options: Options<DeleteRepositoryData, ThrowOnError>,
+) => {
+	return (options.client ?? client).delete<DeleteRepositoryResponses, unknown, ThrowOnError>({
+		url: "/api/v1/repositories/{name}",
+		...options,
+	});
+};
+
+/**
+ * Get a single repository by name
+ */
+export const getRepository = <ThrowOnError extends boolean = false>(
+	options: Options<GetRepositoryData, ThrowOnError>,
+) => {
+	return (options.client ?? client).get<GetRepositoryResponses, unknown, ThrowOnError>({
+		url: "/api/v1/repositories/{name}",
+		...options,
+	});
+};
+
+/**
+ * List all snapshots in a repository
+ */
+export const listSnapshots = <ThrowOnError extends boolean = false>(
+	options: Options<ListSnapshotsData, ThrowOnError>,
+) => {
+	return (options.client ?? client).get<ListSnapshotsResponses, unknown, ThrowOnError>({
+		url: "/api/v1/repositories/{name}/snapshots",
+		...options,
+	});
+};
+
+/**
+ * Get details of a specific snapshot
+ */
+export const getSnapshotDetails = <ThrowOnError extends boolean = false>(
+	options: Options<GetSnapshotDetailsData, ThrowOnError>,
+) => {
+	return (options.client ?? client).get<GetSnapshotDetailsResponses, unknown, ThrowOnError>({
+		url: "/api/v1/repositories/{name}/snapshots/{snapshotId}",
+		...options,
+	});
+};
+
+/**
+ * List files and directories in a snapshot
+ */
+export const listSnapshotFiles = <ThrowOnError extends boolean = false>(
+	options: Options<ListSnapshotFilesData, ThrowOnError>,
+) => {
+	return (options.client ?? client).get<ListSnapshotFilesResponses, unknown, ThrowOnError>({
+		url: "/api/v1/repositories/{name}/snapshots/{snapshotId}/files",
+		...options,
+	});
+};
+
+/**
+ * Restore a snapshot to a target path on the filesystem
+ */
+export const restoreSnapshot = <ThrowOnError extends boolean = false>(
+	options: Options<RestoreSnapshotData, ThrowOnError>,
+) => {
+	return (options.client ?? client).post<RestoreSnapshotResponses, unknown, ThrowOnError>({
+		url: "/api/v1/repositories/{name}/restore",
+		...options,
+		headers: {
+			"Content-Type": "application/json",
+			...options.headers,
+		},
+	});
+};
+
+/**
+ * Run doctor operations on a repository to fix common issues (unlock, check, repair index). Use this when the repository is locked or has errors.
+ */
+export const doctorRepository = <ThrowOnError extends boolean = false>(
+	options: Options<DoctorRepositoryData, ThrowOnError>,
+) => {
+	return (options.client ?? client).post<DoctorRepositoryResponses, unknown, ThrowOnError>({
+		url: "/api/v1/repositories/{name}/doctor",
+		...options,
+	});
+};
+
+/**
+ * List all backup schedules
+ */
+export const listBackupSchedules = <ThrowOnError extends boolean = false>(
+	options?: Options<ListBackupSchedulesData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ListBackupSchedulesResponses, unknown, ThrowOnError>({
+		url: "/api/v1/backups",
+		...options,
+	});
+};
+
+/**
+ * Create a new backup schedule for a volume
+ */
+export const createBackupSchedule = <ThrowOnError extends boolean = false>(
+	options?: Options<CreateBackupScheduleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<CreateBackupScheduleResponses, unknown, ThrowOnError>({
+		url: "/api/v1/backups",
+		...options,
+		headers: {
+			"Content-Type": "application/json",
+			...options?.headers,
+		},
+	});
+};
+
+/**
+ * Delete a backup schedule
+ */
+export const deleteBackupSchedule = <ThrowOnError extends boolean = false>(
+	options: Options<DeleteBackupScheduleData, ThrowOnError>,
+) => {
+	return (options.client ?? client).delete<DeleteBackupScheduleResponses, unknown, ThrowOnError>({
+		url: "/api/v1/backups/{scheduleId}",
+		...options,
+	});
+};
+
+/**
+ * Get a backup schedule by ID
+ */
+export const getBackupSchedule = <ThrowOnError extends boolean = false>(
+	options: Options<GetBackupScheduleData, ThrowOnError>,
+) => {
+	return (options.client ?? client).get<GetBackupScheduleResponses, unknown, ThrowOnError>({
+		url: "/api/v1/backups/{scheduleId}",
+		...options,
+	});
+};
+
+/**
+ * Update a backup schedule
+ */
+export const updateBackupSchedule = <ThrowOnError extends boolean = false>(
+	options: Options<UpdateBackupScheduleData, ThrowOnError>,
+) => {
+	return (options.client ?? client).patch<UpdateBackupScheduleResponses, unknown, ThrowOnError>({
+		url: "/api/v1/backups/{scheduleId}",
+		...options,
+		headers: {
+			"Content-Type": "application/json",
+			...options.headers,
+		},
+	});
+};
+
+/**
+ * Get a backup schedule for a specific volume
+ */
+export const getBackupScheduleForVolume = <ThrowOnError extends boolean = false>(
+	options: Options<GetBackupScheduleForVolumeData, ThrowOnError>,
+) => {
+	return (options.client ?? client).get<GetBackupScheduleForVolumeResponses, unknown, ThrowOnError>({
+		url: "/api/v1/backups/volume/{volumeId}",
+		...options,
+	});
+};
+
+/**
+ * Trigger a backup immediately for a schedule
+ */
+export const runBackupNow = <ThrowOnError extends boolean = false>(
+	options: Options<RunBackupNowData, ThrowOnError>,
+) => {
+	return (options.client ?? client).post<RunBackupNowResponses, unknown, ThrowOnError>({
+		url: "/api/v1/backups/{scheduleId}/run",
+		...options,
+	});
+};
+
+/**
+ * Stop a backup that is currently in progress
+ */
+export const stopBackup = <ThrowOnError extends boolean = false>(options: Options<StopBackupData, ThrowOnError>) => {
+	return (options.client ?? client).post<StopBackupResponses, StopBackupErrors, ThrowOnError>({
+		url: "/api/v1/backups/{scheduleId}/stop",
+		...options,
+	});
+};
+
+/**
+ * Get system information including available capabilities
+ */
+export const getSystemInfo = <ThrowOnError extends boolean = false>(
+	options?: Options<GetSystemInfoData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<GetSystemInfoResponses, unknown, ThrowOnError>({
+		url: "/api/v1/system/info",
+		...options,
+	});
+};
+
+/**
+ * Download the Restic password file for backup recovery. Requires password re-authentication.
+ */
+export const downloadResticPassword = <ThrowOnError extends boolean = false>(
+	options?: Options<DownloadResticPasswordData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<DownloadResticPasswordResponses, unknown, ThrowOnError>({
+		url: "/api/v1/system/restic-password",
+		...options,
+		headers: {
+			"Content-Type": "application/json",
+			...options?.headers,
+		},
+	});
+};

app/client/components/app-breadcrumb.tsx

@@ -0,0 +1,42 @@
+import { Link } from "react-router";
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+} from "~/client/components/ui/breadcrumb";
+import { useBreadcrumbs } from "~/client/lib/breadcrumbs";
+
+export function AppBreadcrumb() {
+	const breadcrumbs = useBreadcrumbs();
+
+	return (
+		<Breadcrumb>
+			<BreadcrumbLink asChild></BreadcrumbLink>
+			<BreadcrumbList>
+				{breadcrumbs.map((breadcrumb, index) => {
+					const isLast = index === breadcrumbs.length - 1;
+
+					return (
+						<div key={`${breadcrumb.label}-${index}`} className="contents">
+							<BreadcrumbItem>
+								{isLast || breadcrumb.isCurrentPage ? (
+									<BreadcrumbPage>{breadcrumb.label}</BreadcrumbPage>
+								) : breadcrumb.href ? (
+									<BreadcrumbLink asChild>
+										<Link to={breadcrumb.href}>{breadcrumb.label}</Link>
+									</BreadcrumbLink>
+								) : (
+									<BreadcrumbPage>{breadcrumb.label}</BreadcrumbPage>
+								)}
+							</BreadcrumbItem>
+							{!isLast && <BreadcrumbSeparator />}
+						</div>
+					);
+				})}
+			</BreadcrumbList>
+		</Breadcrumb>
+	);
+}

app/client/components/app-sidebar.tsx

@@ -0,0 +1,90 @@
+import { CalendarClock, Database, HardDrive, Mountain, Settings } from "lucide-react";
+import { Link, NavLink } from "react-router";
+import {
+	Sidebar,
+	SidebarContent,
+	SidebarGroup,
+	SidebarGroupContent,
+	SidebarHeader,
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	useSidebar,
+} from "~/client/components/ui/sidebar";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/client/components/ui/tooltip";
+import { cn } from "~/client/lib/utils";
+
+const items = [
+	{
+		title: "Volumes",
+		url: "/volumes",
+		icon: HardDrive,
+	},
+	{
+		title: "Repositories",
+		url: "/repositories",
+		icon: Database,
+	},
+	{
+		title: "Backups",
+		url: "/backups",
+		icon: CalendarClock,
+	},
+	{
+		title: "Settings",
+		url: "/settings",
+		icon: Settings,
+	},
+];
+
+export function AppSidebar() {
+	const { state } = useSidebar();
+
+	return (
+		<Sidebar variant="inset" collapsible="icon" className="p-0">
+			<SidebarHeader className="bg-card-header border-b border-border/50 hidden md:flex h-[65px] flex-row items-center p-4">
+				<Link to="/volumes" className="flex items-center gap-3 font-semibold pl-2">
+					<Mountain className="size-5 text-strong-accent" />
+					<span
+						className={cn("text-base transition-all duration-200", {
+							"opacity-0 w-0 overflow-hidden ": state === "collapsed",
+						})}
+					>
+						Ironmount
+					</span>
+				</Link>
+			</SidebarHeader>
+			<SidebarContent className="p-2 border-r">
+				<SidebarGroup>
+					<SidebarGroupContent>
+						<SidebarMenu>
+							{items.map((item) => (
+								<SidebarMenuItem key={item.title}>
+									<TooltipProvider>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<SidebarMenuButton asChild>
+													<NavLink to={item.url}>
+														{({ isActive }) => (
+															<>
+																<item.icon className={cn({ "text-strong-accent": isActive })} />
+																<span className={cn({ "text-strong-accent": isActive })}>{item.title}</span>
+															</>
+														)}
+													</NavLink>
+												</SidebarMenuButton>
+											</TooltipTrigger>
+											<TooltipContent side="right" className={cn({ hidden: state !== "collapsed" })}>
+												<p>{item.title}</p>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+								</SidebarMenuItem>
+							))}
+						</SidebarMenu>
+					</SidebarGroupContent>
+				</SidebarGroup>
+			</SidebarContent>
+		</Sidebar>
+	);
+}

app/client/components/auth-layout.tsx

@@ -0,0 +1,34 @@
+import { Mountain } from "lucide-react";
+import type { ReactNode } from "react";
+
+type AuthLayoutProps = {
+	title: string;
+	description: string;
+	children: ReactNode;
+};
+
+export function AuthLayout({ title, description, children }: AuthLayoutProps) {
+	return (
+		<div className="flex mt-[25%] lg:mt-0 lg:min-h-screen">
+			<div className="flex flex-1 items-center justify-center bg-background p-8">
+				<div className="w-full max-w-md space-y-8">
+					<div className="flex items-center gap-3">
+						<Mountain className="size-5 text-strong-accent" />
+						<span className="text-lg font-semibold">Ironmount</span>
+					</div>
+
+					<div className="space-y-2">
+						<h1 className="text-3xl font-bold tracking-tight">{title}</h1>
+						<p className="text-sm text-muted-foreground">{description}</p>
+					</div>
+
+					{children}
+				</div>
+			</div>
+			<div
+				className="hidden lg:block lg:flex-1 dither-lg bg-cover bg-center"
+				style={{ backgroundImage: "url(/images/background.jpg)" }}
+			/>
+		</div>
+	);
+}

app/client/components/bytes-size.tsx

@@ -0,0 +1,115 @@
+import type React from "react";
+
+type ByteSizeProps = {
+	bytes: number;
+	base?: 1000 | 1024; // 1000 = SI (KB, MB, ...), 1024 = IEC (KiB, MiB, ...)
+	maximumFractionDigits?: number; // default: 2
+	smartRounding?: boolean; // dynamically reduces decimals for big numbers (default: true)
+	locale?: string | string[]; // e.g., 'en', 'de', or navigator.languages
+	space?: boolean; // space between number and unit (default: true)
+	className?: string;
+	style?: React.CSSProperties;
+	fallback?: string; // shown if bytes is not a finite number (default: '—')
+};
+
+const SI_UNITS = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"] as const;
+const IEC_UNITS = ["B", "KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"] as const;
+
+type FormatBytesResult = {
+	text: string;
+	unit: string;
+	unitIndex: number;
+	numeric: number; // numeric value before formatting (with sign)
+};
+
+export function formatBytes(
+	bytes: number,
+	options?: {
+		base?: 1000 | 1024;
+		maximumFractionDigits?: number;
+		smartRounding?: boolean;
+		locale?: string | string[];
+	},
+): FormatBytesResult {
+	const { base = 1000, maximumFractionDigits = 2, smartRounding = true, locale } = options ?? {};
+
+	if (!Number.isFinite(bytes)) {
+		return {
+			text: "—",
+			unit: "",
+			unitIndex: 0,
+			numeric: NaN,
+		};
+	}
+
+	const units = base === 1024 ? IEC_UNITS : SI_UNITS;
+
+	const sign = Math.sign(bytes) || 1;
+	const abs = Math.abs(bytes);
+
+	let idx = 0;
+	if (abs > 0) {
+		idx = Math.floor(Math.log(abs) / Math.log(base));
+		if (!Number.isFinite(idx)) idx = 0;
+		idx = Math.max(0, Math.min(idx, units.length - 1));
+	}
+
+	const numeric = (abs / base ** idx) * sign;
+
+	const maxFrac = (() => {
+		if (!smartRounding) return maximumFractionDigits;
+		const v = Math.abs(numeric);
+		if (v >= 100) return 0;
+		if (v >= 10) return Math.min(1, maximumFractionDigits);
+		return maximumFractionDigits;
+	})();
+
+	const text = new Intl.NumberFormat(locale, {
+		minimumFractionDigits: 0,
+		maximumFractionDigits: maxFrac,
+	}).format(numeric);
+
+	return {
+		text,
+		unit: units[idx],
+		unitIndex: idx,
+		numeric,
+	};
+}
+
+export function ByteSize(props: ByteSizeProps) {
+	const {
+		bytes,
+		base = 1000,
+		maximumFractionDigits = 2,
+		smartRounding = true,
+		locale,
+		space = true,
+		className,
+		style,
+		fallback = "—",
+	} = props;
+
+	const { text, unit } = formatBytes(bytes, {
+		base,
+		maximumFractionDigits,
+		smartRounding,
+		locale,
+	});
+
+	if (text === "—") {
+		return (
+			<span className={className} style={style}>
+				{fallback}
+			</span>
+		);
+	}
+
+	return (
+		<span className={className} style={style}>
+			{text}
+			{space ? " " : ""}
+			{unit}
+		</span>
+	);
+}

app/client/components/create-repository-dialog.tsx

@@ -0,0 +1,66 @@
+import { useMutation } from "@tanstack/react-query";
+import { Plus } from "lucide-react";
+import { useId } from "react";
+import { toast } from "sonner";
+import { parseError } from "~/client/lib/errors";
+import { CreateRepositoryForm } from "./create-repository-form";
+import { Button } from "./ui/button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
+import { ScrollArea } from "./ui/scroll-area";
+import { createRepositoryMutation } from "../api-client/@tanstack/react-query.gen";
+
+type Props = {
+	open: boolean;
+	setOpen: (open: boolean) => void;
+};
+
+export const CreateRepositoryDialog = ({ open, setOpen }: Props) => {
+	const formId = useId();
+
+	const create = useMutation({
+		...createRepositoryMutation(),
+		onSuccess: () => {
+			toast.success("Repository created successfully");
+			setOpen(false);
+		},
+		onError: (error) => {
+			toast.error("Failed to create repository", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button>
+					<Plus size={16} className="mr-2" />
+					Create Repository
+				</Button>
+			</DialogTrigger>
+			<DialogContent>
+				<ScrollArea className="h-[500px] p-4">
+					<DialogHeader>
+						<DialogTitle>Create repository</DialogTitle>
+					</DialogHeader>
+					<CreateRepositoryForm
+						className="mt-4"
+						mode="create"
+						formId={formId}
+						onSubmit={(values) => {
+							create.mutate({ body: { config: values, name: values.name, compressionMode: values.compressionMode } });
+						}}
+					/>
+					<DialogFooter className="mt-4">
+						<Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+							Cancel
+						</Button>
+						<Button type="submit" form={formId} disabled={create.isPending}>
+							Create
+						</Button>
+					</DialogFooter>
+				</ScrollArea>
+			</DialogContent>
+		</Dialog>
+	);
+};

app/client/components/create-repository-form.tsx

@@ -0,0 +1,410 @@
+import { arktypeResolver } from "@hookform/resolvers/arktype";
+import { type } from "arktype";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { cn, slugify } from "~/client/lib/utils";
+import { deepClean } from "~/utils/object";
+import { Button } from "./ui/button";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
+import { Input } from "./ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+import { useQuery } from "@tanstack/react-query";
+import { Alert, AlertDescription } from "./ui/alert";
+import { ExternalLink } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+import { useSystemInfo } from "~/client/hooks/use-system-info";
+import { COMPRESSION_MODES, repositoryConfigSchema } from "~/schemas/restic";
+import { listRcloneRemotesOptions } from "../api-client/@tanstack/react-query.gen";
+
+export const formSchema = type({
+	name: "2<=string<=32",
+	compressionMode: type.valueOf(COMPRESSION_MODES).optional(),
+}).and(repositoryConfigSchema);
+const cleanSchema = type.pipe((d) => formSchema(deepClean(d)));
+
+export type RepositoryFormValues = typeof formSchema.inferIn;
+
+type Props = {
+	onSubmit: (values: RepositoryFormValues) => void;
+	mode?: "create" | "update";
+	initialValues?: Partial<RepositoryFormValues>;
+	formId?: string;
+	loading?: boolean;
+	className?: string;
+};
+
+const defaultValuesForType = {
+	local: { backend: "local" as const, compressionMode: "auto" as const },
+	s3: { backend: "s3" as const, compressionMode: "auto" as const },
+	gcs: { backend: "gcs" as const, compressionMode: "auto" as const },
+	azure: { backend: "azure" as const, compressionMode: "auto" as const },
+	rclone: { backend: "rclone" as const, compressionMode: "auto" as const },
+};
+
+export const CreateRepositoryForm = ({
+	onSubmit,
+	mode = "create",
+	initialValues,
+	formId,
+	loading,
+	className,
+}: Props) => {
+	const form = useForm<RepositoryFormValues>({
+		resolver: arktypeResolver(cleanSchema as unknown as typeof formSchema),
+		defaultValues: initialValues,
+		resetOptions: {
+			keepDefaultValues: true,
+			keepDirtyValues: false,
+		},
+	});
+
+	const { watch } = form;
+
+	const watchedBackend = watch("backend");
+
+	const { data: rcloneRemotes, isLoading: isLoadingRemotes } = useQuery({
+		...listRcloneRemotesOptions(),
+	});
+
+	useEffect(() => {
+		form.reset({
+			name: form.getValues().name,
+			...defaultValuesForType[watchedBackend as keyof typeof defaultValuesForType],
+		});
+	}, [watchedBackend, form]);
+
+	const { capabilities } = useSystemInfo();
+
+	return (
+		<Form {...form}>
+			<form id={formId} onSubmit={form.handleSubmit(onSubmit)} className={cn("space-y-4", className)}>
+				<FormField
+					control={form.control}
+					name="name"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Name</FormLabel>
+							<FormControl>
+								<Input
+									{...field}
+									placeholder="Repository name"
+									onChange={(e) => field.onChange(slugify(e.target.value))}
+									max={32}
+									min={2}
+									disabled={mode === "update"}
+									className={mode === "update" ? "bg-gray-50" : ""}
+								/>
+							</FormControl>
+							<FormDescription>Unique identifier for the repository.</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<FormField
+					control={form.control}
+					name="backend"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Backend</FormLabel>
+							<Select onValueChange={field.onChange} defaultValue={field.value} value={field.value}>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue placeholder="Select a backend" />
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									<SelectItem value="local">Local</SelectItem>
+									<SelectItem value="s3">S3</SelectItem>
+									<SelectItem value="gcs">Google Cloud Storage</SelectItem>
+									<SelectItem value="azure">Azure Blob Storage</SelectItem>
+									<Tooltip>
+										<TooltipTrigger>
+											<SelectItem disabled={!capabilities.rclone} value="rclone">
+												rclone (40+ cloud providers)
+											</SelectItem>
+										</TooltipTrigger>
+										<TooltipContent className={cn({ hidden: capabilities.rclone })}>
+											<p>Setup rclone to use this backend</p>
+										</TooltipContent>
+									</Tooltip>
+								</SelectContent>
+							</Select>
+							<FormDescription>Choose the storage backend for this repository.</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="compressionMode"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Compression Mode</FormLabel>
+							<Select onValueChange={field.onChange} defaultValue={field.value} value={field.value}>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue placeholder="Select compression mode" />
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									<SelectItem value="off">Off</SelectItem>
+									<SelectItem value="auto">Auto</SelectItem>
+									<SelectItem value="fastest">Fastest</SelectItem>
+									<SelectItem value="better">Better</SelectItem>
+									<SelectItem value="max">Max</SelectItem>
+								</SelectContent>
+							</Select>
+							<FormDescription>Compression mode for backups stored in this repository.</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				{watchedBackend === "s3" && (
+					<>
+						<FormField
+							control={form.control}
+							name="endpoint"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Endpoint</FormLabel>
+									<FormControl>
+										<Input placeholder="s3.amazonaws.com" {...field} />
+									</FormControl>
+									<FormDescription>S3-compatible endpoint URL.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="bucket"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Bucket</FormLabel>
+									<FormControl>
+										<Input placeholder="my-backup-bucket" {...field} />
+									</FormControl>
+									<FormDescription>S3 bucket name for storing backups.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="accessKeyId"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Access Key ID</FormLabel>
+									<FormControl>
+										<Input placeholder="AKIAIOSFODNN7EXAMPLE" {...field} />
+									</FormControl>
+									<FormDescription>S3 access key ID for authentication.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="secretAccessKey"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Secret Access Key</FormLabel>
+									<FormControl>
+										<Input type="password" placeholder="••••••••" {...field} />
+									</FormControl>
+									<FormDescription>S3 secret access key for authentication.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</>
+				)}
+
+				{watchedBackend === "gcs" && (
+					<>
+						<FormField
+							control={form.control}
+							name="bucket"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Bucket</FormLabel>
+									<FormControl>
+										<Input placeholder="my-backup-bucket" {...field} />
+									</FormControl>
+									<FormDescription>GCS bucket name for storing backups.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="projectId"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Project ID</FormLabel>
+									<FormControl>
+										<Input placeholder="my-gcp-project-123" {...field} />
+									</FormControl>
+									<FormDescription>Google Cloud project ID.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="credentialsJson"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Service Account JSON</FormLabel>
+									<FormControl>
+										<Input type="password" placeholder="Paste service account JSON key..." {...field} />
+									</FormControl>
+									<FormDescription>Service account JSON credentials for authentication.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</>
+				)}
+
+				{watchedBackend === "azure" && (
+					<>
+						<FormField
+							control={form.control}
+							name="container"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Container</FormLabel>
+									<FormControl>
+										<Input placeholder="my-backup-container" {...field} />
+									</FormControl>
+									<FormDescription>Azure Blob Storage container name for storing backups.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="accountName"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Account Name</FormLabel>
+									<FormControl>
+										<Input placeholder="mystorageaccount" {...field} />
+									</FormControl>
+									<FormDescription>Azure Storage account name.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="accountKey"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Account Key</FormLabel>
+									<FormControl>
+										<Input type="password" placeholder="••••••••" {...field} />
+									</FormControl>
+									<FormDescription>Azure Storage account key for authentication.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="endpointSuffix"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Endpoint Suffix (Optional)</FormLabel>
+									<FormControl>
+										<Input placeholder="core.windows.net" {...field} />
+									</FormControl>
+									<FormDescription>Custom Azure endpoint suffix (defaults to core.windows.net).</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</>
+				)}
+
+				{watchedBackend === "rclone" &&
+					(!rcloneRemotes || rcloneRemotes.length === 0 ? (
+						<Alert>
+							<AlertDescription className="space-y-2">
+								<p className="font-medium">No rclone remotes configured</p>
+								<p className="text-sm text-muted-foreground">
+									To use rclone, you need to configure remotes on your host system
+								</p>
+								<a
+									href="https://rclone.org/docs/"
+									target="_blank"
+									rel="noopener noreferrer"
+									className="text-sm text-strong-accent inline-flex items-center gap-1"
+								>
+									View rclone documentation
+									<ExternalLink className="w-3 h-3" />
+								</a>
+							</AlertDescription>
+						</Alert>
+					) : (
+						<>
+							<FormField
+								control={form.control}
+								name="remote"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Remote</FormLabel>
+										<Select onValueChange={(v) => field.onChange(v)} defaultValue={field.value} value={field.value}>
+											<FormControl>
+												<SelectTrigger>
+													<SelectValue placeholder="Select an rclone remote" />
+												</SelectTrigger>
+											</FormControl>
+											<SelectContent>
+												{isLoadingRemotes ? (
+													<SelectItem value="loading" disabled>
+														Loading remotes...
+													</SelectItem>
+												) : (
+													rcloneRemotes.map((remote: { name: string; type: string }) => (
+														<SelectItem key={remote.name} value={remote.name}>
+															{remote.name} ({remote.type})
+														</SelectItem>
+													))
+												)}
+											</SelectContent>
+										</Select>
+										<FormDescription>Select the rclone remote configured on your host system.</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="path"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Path</FormLabel>
+										<FormControl>
+											<Input placeholder="backups/ironmount" {...field} />
+										</FormControl>
+										<FormDescription>Path within the remote where backups will be stored.</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</>
+					))}
+
+				{mode === "update" && (
+					<Button type="submit" className="w-full" loading={loading}>
+						Save Changes
+					</Button>
+				)}
+			</form>
+		</Form>
+	);
+};

app/client/components/create-volume-dialog.tsx

@@ -0,0 +1,66 @@
+import { useMutation } from "@tanstack/react-query";
+import { Plus } from "lucide-react";
+import { useId } from "react";
+import { toast } from "sonner";
+import { parseError } from "~/client/lib/errors";
+import { CreateVolumeForm } from "./create-volume-form";
+import { Button } from "./ui/button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
+import { ScrollArea } from "./ui/scroll-area";
+import { createVolumeMutation } from "../api-client/@tanstack/react-query.gen";
+
+type Props = {
+	open: boolean;
+	setOpen: (open: boolean) => void;
+};
+
+export const CreateVolumeDialog = ({ open, setOpen }: Props) => {
+	const formId = useId();
+
+	const create = useMutation({
+		...createVolumeMutation(),
+		onSuccess: () => {
+			toast.success("Volume created successfully");
+			setOpen(false);
+		},
+		onError: (error) => {
+			toast.error("Failed to create volume", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button>
+					<Plus size={16} className="mr-2" />
+					Create volume
+				</Button>
+			</DialogTrigger>
+			<DialogContent>
+				<ScrollArea className="h-[500px] p-4">
+					<DialogHeader>
+						<DialogTitle>Create volume</DialogTitle>
+					</DialogHeader>
+					<CreateVolumeForm
+						className="mt-4"
+						mode="create"
+						formId={formId}
+						onSubmit={(values) => {
+							create.mutate({ body: { config: values, name: values.name } });
+						}}
+					/>
+					<DialogFooter className="mt-4">
+						<Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+							Cancel
+						</Button>
+						<Button type="submit" form={formId} disabled={create.isPending}>
+							Create
+						</Button>
+					</DialogFooter>
+				</ScrollArea>
+			</DialogContent>
+		</Dialog>
+	);
+};

app/client/components/create-volume-form.tsx

@@ -0,0 +1,583 @@
+import { arktypeResolver } from "@hookform/resolvers/arktype";
+import { useMutation } from "@tanstack/react-query";
+import { type } from "arktype";
+import { CheckCircle, Loader2, XCircle } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { cn, slugify } from "~/client/lib/utils";
+import { deepClean } from "~/utils/object";
+import { DirectoryBrowser } from "./directory-browser";
+import { Button } from "./ui/button";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
+import { Input } from "./ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+import { volumeConfigSchema } from "~/schemas/volumes";
+import { testConnectionMutation } from "../api-client/@tanstack/react-query.gen";
+
+export const formSchema = type({
+	name: "2<=string<=32",
+}).and(volumeConfigSchema);
+const cleanSchema = type.pipe((d) => formSchema(deepClean(d)));
+
+export type FormValues = typeof formSchema.inferIn;
+
+type Props = {
+	onSubmit: (values: FormValues) => void;
+	mode?: "create" | "update";
+	initialValues?: Partial<FormValues>;
+	formId?: string;
+	loading?: boolean;
+	className?: string;
+};
+
+const defaultValuesForType = {
+	directory: { backend: "directory" as const, path: "/" },
+	nfs: { backend: "nfs" as const, port: 2049, version: "4.1" as const },
+	smb: { backend: "smb" as const, port: 445, vers: "3.0" as const },
+	webdav: { backend: "webdav" as const, port: 80, ssl: false },
+};
+
+export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, formId, loading, className }: Props) => {
+	const form = useForm<FormValues>({
+		resolver: arktypeResolver(cleanSchema as unknown as typeof formSchema),
+		defaultValues: initialValues,
+		resetOptions: {
+			keepDefaultValues: true,
+			keepDirtyValues: false,
+		},
+	});
+
+	const { watch, getValues } = form;
+
+	const watchedBackend = watch("backend");
+
+	useEffect(() => {
+		if (mode === "create") {
+			form.reset({
+				name: form.getValues().name,
+				...defaultValuesForType[watchedBackend as keyof typeof defaultValuesForType],
+			});
+		}
+	}, [watchedBackend, form, mode]);
+
+	const [testMessage, setTestMessage] = useState<{ success: boolean; message: string } | null>(null);
+
+	const testBackendConnection = useMutation({
+		...testConnectionMutation(),
+		onMutate: () => {
+			setTestMessage(null);
+		},
+		onError: (error) => {
+			setTestMessage({
+				success: false,
+				message: error?.message || "Failed to test connection. Please try again.",
+			});
+		},
+		onSuccess: (data) => {
+			setTestMessage(data);
+		},
+	});
+
+	const handleTestConnection = async () => {
+		const formValues = getValues();
+
+		if (formValues.backend === "nfs" || formValues.backend === "smb" || formValues.backend === "webdav") {
+			testBackendConnection.mutate({
+				body: { config: formValues },
+			});
+		}
+	};
+
+	return (
+		<Form {...form}>
+			<form id={formId} onSubmit={form.handleSubmit(onSubmit)} className={cn("space-y-4", className)}>
+				<FormField
+					control={form.control}
+					name="name"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Name</FormLabel>
+							<FormControl>
+								<Input
+									{...field}
+									placeholder="Volume name"
+									onChange={(e) => field.onChange(slugify(e.target.value))}
+									max={32}
+									min={1}
+									disabled={mode === "update"}
+									className={mode === "update" ? "bg-gray-50" : ""}
+								/>
+							</FormControl>
+							<FormDescription>Unique identifier for the volume.</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<FormField
+					control={form.control}
+					name="backend"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Backend</FormLabel>
+							<Select onValueChange={field.onChange} defaultValue={field.value} value={field.value}>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue placeholder="Select a backend" />
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									<SelectItem value="directory">Directory</SelectItem>
+									<SelectItem value="nfs">NFS</SelectItem>
+									<SelectItem value="smb">SMB</SelectItem>
+									<SelectItem value="webdav">WebDAV</SelectItem>
+								</SelectContent>
+							</Select>
+							<FormDescription>Choose the storage backend for this volume.</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				{watchedBackend === "directory" && (
+					<FormField
+						control={form.control}
+						name="path"
+						render={({ field }) => {
+							return (
+								<FormItem>
+									<FormLabel>Directory Path</FormLabel>
+									<FormControl>
+										{field.value ? (
+											<div className="flex items-center gap-2">
+												<div className="flex-1 border rounded-md p-3 bg-muted/50">
+													<div className="text-xs font-medium text-muted-foreground mb-1">Selected path:</div>
+													<div className="text-sm font-mono break-all">{field.value}</div>
+												</div>
+												<Button type="button" variant="outline" size="sm" onClick={() => field.onChange("")}>
+													Change
+												</Button>
+											</div>
+										) : (
+											<DirectoryBrowser onSelectPath={(path) => field.onChange(path)} selectedPath={field.value} />
+										)}
+									</FormControl>
+									<FormDescription>Browse and select a directory on the host filesystem to track.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							);
+						}}
+					/>
+				)}
+
+				{watchedBackend === "nfs" && (
+					<>
+						<FormField
+							control={form.control}
+							name="server"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Server</FormLabel>
+									<FormControl>
+										<Input placeholder="192.168.1.100" {...field} />
+									</FormControl>
+									<FormDescription>NFS server IP address or hostname.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="exportPath"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Export Path</FormLabel>
+									<FormControl>
+										<Input placeholder="/export/data" {...field} />
+									</FormControl>
+									<FormDescription>Path to the NFS export on the server.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="port"
+							defaultValue={2049}
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Port</FormLabel>
+									<FormControl>
+										<Input type="number" placeholder="2049" {...field} />
+									</FormControl>
+									<FormDescription>NFS server port (default: 2049).</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="version"
+							defaultValue="4.1"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Version</FormLabel>
+									<Select onValueChange={field.onChange} defaultValue="4.1">
+										<FormControl>
+											<SelectTrigger>
+												<SelectValue placeholder="Select NFS version" />
+											</SelectTrigger>
+										</FormControl>
+										<SelectContent>
+											<SelectItem value="3">NFS v3</SelectItem>
+											<SelectItem value="4">NFS v4</SelectItem>
+											<SelectItem value="4.1">NFS v4.1</SelectItem>
+										</SelectContent>
+									</Select>
+									<FormDescription>NFS protocol version to use.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="readOnly"
+							defaultValue={false}
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Read-only Mode</FormLabel>
+									<FormControl>
+										<div className="flex items-center space-x-2">
+											<input
+												type="checkbox"
+												checked={field.value ?? false}
+												onChange={(e) => field.onChange(e.target.checked)}
+												className="rounded border-gray-300"
+											/>
+											<span className="text-sm">Mount volume as read-only</span>
+										</div>
+									</FormControl>
+									<FormDescription>
+										Prevent any modifications to the volume. Recommended for backup sources and sensitive data.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</>
+				)}
+
+				{watchedBackend === "webdav" && (
+					<>
+						<FormField
+							control={form.control}
+							name="server"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Server</FormLabel>
+									<FormControl>
+										<Input placeholder="example.com" {...field} />
+									</FormControl>
+									<FormDescription>WebDAV server hostname or IP address.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="path"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Path</FormLabel>
+									<FormControl>
+										<Input placeholder="/webdav" {...field} />
+									</FormControl>
+									<FormDescription>Path to the WebDAV directory on the server.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="username"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Username (Optional)</FormLabel>
+									<FormControl>
+										<Input placeholder="admin" {...field} />
+									</FormControl>
+									<FormDescription>Username for WebDAV authentication (optional).</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="password"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Password (Optional)</FormLabel>
+									<FormControl>
+										<Input type="password" placeholder="••••••••" {...field} />
+									</FormControl>
+									<FormDescription>Password for WebDAV authentication (optional).</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="port"
+							defaultValue={80}
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Port</FormLabel>
+									<FormControl>
+										<Input type="number" placeholder="80" {...field} />
+									</FormControl>
+									<FormDescription>WebDAV server port (default: 80 for HTTP, 443 for HTTPS).</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="ssl"
+							defaultValue={false}
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Use SSL/HTTPS</FormLabel>
+									<FormControl>
+										<div className="flex items-center space-x-2">
+											<input
+												type="checkbox"
+												checked={field.value ?? false}
+												onChange={(e) => field.onChange(e.target.checked)}
+												className="rounded border-gray-300"
+											/>
+											<span className="text-sm">Enable HTTPS for secure connections</span>
+										</div>
+									</FormControl>
+									<FormDescription>Use HTTPS instead of HTTP for secure connections.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="readOnly"
+							defaultValue={false}
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Read-only Mode</FormLabel>
+									<FormControl>
+										<div className="flex items-center space-x-2">
+											<input
+												type="checkbox"
+												checked={field.value ?? false}
+												onChange={(e) => field.onChange(e.target.checked)}
+												className="rounded border-gray-300"
+											/>
+											<span className="text-sm">Mount volume as read-only</span>
+										</div>
+									</FormControl>
+									<FormDescription>
+										Prevent any modifications to the volume. Recommended for backup sources and sensitive data.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</>
+				)}
+
+				{watchedBackend === "smb" && (
+					<>
+						<FormField
+							control={form.control}
+							name="server"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Server</FormLabel>
+									<FormControl>
+										<Input placeholder="192.168.1.100" value={field.value} onChange={field.onChange} />
+									</FormControl>
+									<FormDescription>SMB server IP address or hostname.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="share"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Share</FormLabel>
+									<FormControl>
+										<Input placeholder="myshare" value={field.value} onChange={field.onChange} />
+									</FormControl>
+									<FormDescription>SMB share name on the server.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="username"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Username</FormLabel>
+									<FormControl>
+										<Input placeholder="admin" value={field.value} onChange={field.onChange} />
+									</FormControl>
+									<FormDescription>Username for SMB authentication.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="password"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Password</FormLabel>
+									<FormControl>
+										<Input type="password" placeholder="••••••••" value={field.value} onChange={field.onChange} />
+									</FormControl>
+									<FormDescription>Password for SMB authentication.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="vers"
+							defaultValue="3.0"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>SMB Version</FormLabel>
+									<Select onValueChange={field.onChange} defaultValue={field.value || "3.0"}>
+										<FormControl>
+											<SelectTrigger>
+												<SelectValue placeholder="Select SMB version" />
+											</SelectTrigger>
+										</FormControl>
+										<SelectContent>
+											<SelectItem value="1.0">SMB v1.0</SelectItem>
+											<SelectItem value="2.0">SMB v2.0</SelectItem>
+											<SelectItem value="2.1">SMB v2.1</SelectItem>
+											<SelectItem value="3.0">SMB v3.0</SelectItem>
+										</SelectContent>
+									</Select>
+									<FormDescription>SMB protocol version to use (default: 3.0).</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="domain"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Domain (Optional)</FormLabel>
+									<FormControl>
+										<Input placeholder="WORKGROUP" value={field.value} onChange={field.onChange} />
+									</FormControl>
+									<FormDescription>Domain or workgroup for authentication (optional).</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="port"
+							defaultValue={445}
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Port</FormLabel>
+									<FormControl>
+										<Input
+											type="number"
+											placeholder="445"
+											value={field.value}
+											defaultValue={445}
+											onChange={(e) => field.onChange(parseInt(e.target.value, 10) || undefined)}
+										/>
+									</FormControl>
+									<FormDescription>SMB server port (default: 445).</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="readOnly"
+							defaultValue={false}
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Read-only Mode</FormLabel>
+									<FormControl>
+										<div className="flex items-center space-x-2">
+											<input
+												type="checkbox"
+												checked={field.value ?? false}
+												onChange={(e) => field.onChange(e.target.checked)}
+												className="rounded border-gray-300"
+											/>
+											<span className="text-sm">Mount volume as read-only</span>
+										</div>
+									</FormControl>
+									<FormDescription>
+										Prevent any modifications to the volume. Recommended for backup sources and sensitive data.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</>
+				)}
+
+				<div className="space-y-3">
+					<div className="flex items-center gap-2">
+						<Button
+							type="button"
+							variant="outline"
+							onClick={handleTestConnection}
+							disabled={testBackendConnection.isPending}
+							className="flex-1"
+						>
+							{testBackendConnection.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+							{!testBackendConnection.isPending && testMessage?.success && (
+								<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
+							)}
+							{!testBackendConnection.isPending && testMessage && !testMessage.success && (
+								<XCircle className="mr-2 h-4 w-4 text-red-500" />
+							)}
+							{testBackendConnection.isPending
+								? "Testing..."
+								: testMessage
+									? testMessage.success
+										? "Connection Successful"
+										: "Test Failed"
+									: "Test Connection"}
+						</Button>
+					</div>
+					{testMessage && (
+						<div
+							className={cn("text-xs p-2 rounded-md text-wrap wrap-anywhere", {
+								"bg-green-50 text-green-700 border border-green-200": testMessage.success,
+								"bg-red-50 text-red-700 border border-red-200": !testMessage.success,
+							})}
+						>
+							{testMessage.message}
+						</div>
+					)}
+				</div>
+				{mode === "update" && (
+					<Button type="submit" className="w-full" loading={loading}>
+						Save Changes
+					</Button>
+				)}
+			</form>
+		</Form>
+	);
+};

app/client/components/directory-browser.tsx

@@ -0,0 +1,133 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useMemo, useState } from "react";
+import { FileTree, type FileEntry } from "./file-tree";
+import { ScrollArea } from "./ui/scroll-area";
+import { browseFilesystemOptions } from "../api-client/@tanstack/react-query.gen";
+
+type Props = {
+	onSelectPath: (path: string) => void;
+	selectedPath?: string;
+};
+
+export const DirectoryBrowser = ({ onSelectPath, selectedPath }: Props) => {
+	const queryClient = useQueryClient();
+	const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
+	const [fetchedFolders, setFetchedFolders] = useState<Set<string>>(new Set(["/"]));
+	const [loadingFolders, setLoadingFolders] = useState<Set<string>>(new Set());
+	const [allFiles, setAllFiles] = useState<Map<string, FileEntry>>(new Map());
+
+	const { data, isLoading } = useQuery({
+		...browseFilesystemOptions({ query: { path: "/" } }),
+	});
+
+	useMemo(() => {
+		if (data?.directories) {
+			setAllFiles((prev) => {
+				const next = new Map(prev);
+				for (const dir of data.directories) {
+					next.set(dir.path, { name: dir.name, path: dir.path, type: "folder" });
+				}
+				return next;
+			});
+		}
+	}, [data]);
+
+	const fileArray = useMemo(() => Array.from(allFiles.values()), [allFiles]);
+
+	const handleFolderExpand = useCallback(
+		async (folderPath: string) => {
+			setExpandedFolders((prev) => {
+				const next = new Set(prev);
+				next.add(folderPath);
+				return next;
+			});
+
+			if (!fetchedFolders.has(folderPath)) {
+				setLoadingFolders((prev) => new Set(prev).add(folderPath));
+
+				try {
+					const result = await queryClient.ensureQueryData(
+						browseFilesystemOptions({
+							query: { path: folderPath },
+						}),
+					);
+
+					if (result.directories) {
+						setAllFiles((prev) => {
+							const next = new Map(prev);
+							for (const dir of result.directories) {
+								next.set(dir.path, { name: dir.name, path: dir.path, type: "folder" });
+							}
+							return next;
+						});
+
+						setFetchedFolders((prev) => new Set(prev).add(folderPath));
+					}
+				} catch (error) {
+					console.error("Failed to fetch folder contents:", error);
+				} finally {
+					setLoadingFolders((prev) => {
+						const next = new Set(prev);
+						next.delete(folderPath);
+						return next;
+					});
+				}
+			}
+		},
+		[fetchedFolders, queryClient],
+	);
+
+	const handleFolderHover = useCallback(
+		(folderPath: string) => {
+			if (!fetchedFolders.has(folderPath) && !loadingFolders.has(folderPath)) {
+				queryClient.prefetchQuery(browseFilesystemOptions({ query: { path: folderPath } }));
+			}
+		},
+		[fetchedFolders, loadingFolders, queryClient],
+	);
+
+	if (isLoading && fileArray.length === 0) {
+		return (
+			<div className="border rounded-lg overflow-hidden">
+				<ScrollArea className="h-64">
+					<div className="text-sm text-gray-500 p-4">Loading directories...</div>
+				</ScrollArea>
+			</div>
+		);
+	}
+
+	if (fileArray.length === 0) {
+		return (
+			<div className="border rounded-lg overflow-hidden">
+				<ScrollArea className="h-64">
+					<div className="text-sm text-gray-500 p-4">No subdirectories found</div>
+				</ScrollArea>
+			</div>
+		);
+	}
+
+	return (
+		<div className="border rounded-lg overflow-hidden">
+			<ScrollArea className="h-64">
+				<FileTree
+					files={fileArray}
+					onFolderExpand={handleFolderExpand}
+					onFolderHover={handleFolderHover}
+					expandedFolders={expandedFolders}
+					loadingFolders={loadingFolders}
+					foldersOnly
+					selectableFolders
+					selectedFolder={selectedPath}
+					onFolderSelect={onSelectPath}
+				/>
+			</ScrollArea>
+
+			{selectedPath && (
+				<div className="bg-muted/50 border-t p-2 text-sm">
+					<div className="font-medium text-muted-foreground">Selected path:</div>
+					<div className="font-mono text-xs break-all">{selectedPath}</div>
+				</div>
+			)}
+		</div>
+	);
+};

app/client/components/empty-state.tsx

@@ -0,0 +1,32 @@
+import { Card } from "./ui/card";
+
+type EmptyStateProps = {
+	title?: string;
+	description?: string;
+	icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+	button?: React.ReactNode;
+};
+
+export function EmptyState(props: EmptyStateProps) {
+	const { title, description, icon: Cicon, button } = props;
+
+	return (
+		<Card className="p-0 gap-0">
+			<div className="flex flex-col items-center justify-center py-16 px-4 text-center">
+				<div className="relative mb-8">
+					<div className="absolute inset-0 animate-pulse">
+						<div className="w-32 h-32 rounded-full bg-primary/10 blur-2xl" />
+					</div>
+					<div className="relative flex items-center justify-center w-32 h-32 rounded-full bg-linear-to-br from-primary/20 to-primary/5 border-2 border-primary/20">
+						<Cicon className="w-16 h-16 text-primary/70" strokeWidth={1.5} />
+					</div>
+				</div>
+				<div className="max-w-md space-y-3 mb-8">
+					<h3 className="text-2xl font-semibold text-foreground">{title}</h3>
+					<p className="text-muted-foreground text-sm">{description}</p>
+				</div>
+				{button}
+			</div>
+		</Card>
+	);
+}

app/client/components/file-tree.tsx

@@ -0,0 +1,596 @@
+/**
+ * FileTree Component
+ *
+ * Adapted from bolt.new by StackBlitz
+ * Copyright (c) 2024 StackBlitz, Inc.
+ * Licensed under the MIT License
+ *
+ * Original source: https://github.com/stackblitz/bolt.new
+ */
+
+import { ChevronDown, ChevronRight, File as FileIcon, Folder as FolderIcon, FolderOpen, Loader2 } from "lucide-react";
+import { memo, type ReactNode, useCallback, useEffect, useMemo, useState } from "react";
+import { cn } from "~/client/lib/utils";
+import { Checkbox } from "~/client/components/ui/checkbox";
+
+const NODE_PADDING_LEFT = 12;
+
+export interface FileEntry {
+	name: string;
+	path: string;
+	type: string;
+	size?: number;
+	modifiedAt?: number;
+}
+
+interface Props {
+	files?: FileEntry[];
+	selectedFile?: string;
+	onFileSelect?: (filePath: string) => void;
+	onFolderExpand?: (folderPath: string) => void;
+	onFolderHover?: (folderPath: string) => void;
+	expandedFolders?: Set<string>;
+	loadingFolders?: Set<string>;
+	className?: string;
+	withCheckboxes?: boolean;
+	selectedPaths?: Set<string>;
+	onSelectionChange?: (selectedPaths: Set<string>) => void;
+	foldersOnly?: boolean;
+	selectableFolders?: boolean;
+	onFolderSelect?: (folderPath: string) => void;
+	selectedFolder?: string;
+}
+
+export const FileTree = memo((props: Props) => {
+	const {
+		files = [],
+		onFileSelect,
+		selectedFile,
+		onFolderExpand,
+		onFolderHover,
+		expandedFolders = new Set(),
+		loadingFolders = new Set(),
+		className,
+		withCheckboxes = false,
+		selectedPaths = new Set(),
+		onSelectionChange,
+		foldersOnly = false,
+		selectableFolders = false,
+		onFolderSelect,
+		selectedFolder,
+	} = props;
+
+	const fileList = useMemo(() => {
+		return buildFileList(files, foldersOnly);
+	}, [files, foldersOnly]);
+
+	const [collapsedFolders, setCollapsedFolders] = useState<Set<string>>(new Set());
+
+	const filteredFileList = useMemo(() => {
+		const list = [];
+		let lastDepth = Number.MAX_SAFE_INTEGER;
+
+		for (const fileOrFolder of fileList) {
+			const depth = fileOrFolder.depth;
+
+			// if the depth is equal we reached the end of the collapsed group
+			if (lastDepth === depth) {
+				lastDepth = Number.MAX_SAFE_INTEGER;
+			}
+
+			// ignore collapsed folders
+			if (collapsedFolders.has(fileOrFolder.fullPath)) {
+				lastDepth = Math.min(lastDepth, depth);
+			}
+
+			// ignore files and folders below the last collapsed folder
+			if (lastDepth < depth) {
+				continue;
+			}
+
+			list.push(fileOrFolder);
+		}
+
+		return list;
+	}, [fileList, collapsedFolders]);
+
+	const toggleCollapseState = useCallback(
+		(fullPath: string) => {
+			setCollapsedFolders((prevSet) => {
+				const newSet = new Set(prevSet);
+
+				if (newSet.has(fullPath)) {
+					newSet.delete(fullPath);
+					onFolderExpand?.(fullPath);
+				} else {
+					newSet.add(fullPath);
+				}
+
+				return newSet;
+			});
+		},
+		[onFolderExpand],
+	);
+
+	// Add new folders to collapsed set when file list changes
+	useEffect(() => {
+		setCollapsedFolders((prevSet) => {
+			const newSet = new Set(prevSet);
+			for (const item of fileList) {
+				if (item.kind === "folder" && !newSet.has(item.fullPath) && !expandedFolders.has(item.fullPath)) {
+					newSet.add(item.fullPath);
+				}
+			}
+			return newSet;
+		});
+	}, [fileList, expandedFolders]);
+
+	const handleFileSelect = useCallback(
+		(filePath: string) => {
+			onFileSelect?.(filePath);
+		},
+		[onFileSelect],
+	);
+
+	const handleFolderSelect = useCallback(
+		(folderPath: string) => {
+			onFolderSelect?.(folderPath);
+		},
+		[onFolderSelect],
+	);
+
+	const handleSelectionChange = useCallback(
+		(path: string, checked: boolean) => {
+			const newSelection = new Set(selectedPaths);
+
+			if (checked) {
+				// Add the path itself
+				newSelection.add(path);
+
+				// Remove any descendants from selection since parent now covers them
+				for (const item of fileList) {
+					if (item.fullPath.startsWith(`${path}/`)) {
+						newSelection.delete(item.fullPath);
+					}
+				}
+			} else {
+				// Remove the path itself
+				newSelection.delete(path);
+
+				// Check if any parent is selected - if so, we need to add siblings back
+				const pathSegments = path.split("/").filter(Boolean);
+				let parentIsSelected = false;
+				let selectedParentPath = "";
+
+				// Check each parent level to see if any are selected
+				for (let i = pathSegments.length - 1; i > 0; i--) {
+					const parentPath = `/${pathSegments.slice(0, i).join("/")}`;
+					if (newSelection.has(parentPath)) {
+						parentIsSelected = true;
+						selectedParentPath = parentPath;
+						break;
+					}
+				}
+
+				if (parentIsSelected) {
+					// Remove the selected parent
+					newSelection.delete(selectedParentPath);
+
+					// Add all siblings and descendants of the selected parent, except the unchecked path and its descendants
+					for (const item of fileList) {
+						if (
+							item.fullPath.startsWith(`${selectedParentPath}/`) &&
+							!item.fullPath.startsWith(`${path}/`) &&
+							item.fullPath !== path
+						) {
+							newSelection.add(item.fullPath);
+						}
+					}
+				}
+			}
+
+			const childrenByParent = new Map<string, string[]>();
+			for (const selectedPath of newSelection) {
+				const lastSlashIndex = selectedPath.lastIndexOf("/");
+				if (lastSlashIndex > 0) {
+					const parentPath = selectedPath.slice(0, lastSlashIndex);
+					if (!childrenByParent.has(parentPath)) {
+						childrenByParent.set(parentPath, []);
+					}
+					childrenByParent.get(parentPath)?.push(selectedPath);
+				}
+			}
+
+			// For each parent, check if all its children are selected
+			for (const [parentPath, selectedChildren] of childrenByParent.entries()) {
+				// Get all children of this parent from the file list
+				const allChildren = fileList.filter((item) => {
+					const itemParentPath = item.fullPath.slice(0, item.fullPath.lastIndexOf("/"));
+					return itemParentPath === parentPath;
+				});
+
+				// If all children are selected, replace them with the parent
+				if (allChildren.length > 0 && selectedChildren.length === allChildren.length) {
+					// Check that we have every child
+					const allChildrenPaths = new Set(allChildren.map((c) => c.fullPath));
+					const allChildrenSelected = selectedChildren.every((c) => allChildrenPaths.has(c));
+
+					if (allChildrenSelected) {
+						// Remove all children
+						for (const childPath of selectedChildren) {
+							newSelection.delete(childPath);
+						}
+						// Add the parent
+						newSelection.add(parentPath);
+					}
+				}
+			}
+
+			onSelectionChange?.(newSelection);
+		},
+		[selectedPaths, onSelectionChange, fileList],
+	);
+
+	// Helper to check if a path is selected (either directly or via parent)
+	const isPathSelected = useCallback(
+		(path: string): boolean => {
+			// Check if directly selected
+			if (selectedPaths.has(path)) {
+				return true;
+			}
+
+			// Check if any parent is selected
+			const pathSegments = path.split("/").filter(Boolean);
+			for (let i = pathSegments.length - 1; i > 0; i--) {
+				const parentPath = `/${pathSegments.slice(0, i).join("/")}`;
+				if (selectedPaths.has(parentPath)) {
+					return true;
+				}
+			}
+
+			return false;
+		},
+		[selectedPaths],
+	);
+
+	// Determine if a folder is partially selected (some children selected)
+	const isPartiallySelected = useCallback(
+		(folderPath: string): boolean => {
+			// If the folder itself is selected, it's not partial
+			if (selectedPaths.has(folderPath)) {
+				return false;
+			}
+
+			// Check if this folder is implicitly selected via a parent
+			const pathSegments = folderPath.split("/").filter(Boolean);
+			for (let i = pathSegments.length - 1; i > 0; i--) {
+				const parentPath = `/${pathSegments.slice(0, i).join("/")}`;
+				if (selectedPaths.has(parentPath)) {
+					// Parent is selected, so this folder is fully selected, not partial
+					return false;
+				}
+			}
+
+			for (const selectedPath of selectedPaths) {
+				if (selectedPath.startsWith(`${folderPath}/`)) {
+					return true;
+				}
+			}
+
+			return false;
+		},
+		[selectedPaths],
+	);
+
+	return (
+		<div className={cn("text-sm", className)}>
+			{filteredFileList.map((fileOrFolder) => {
+				switch (fileOrFolder.kind) {
+					case "file": {
+						return (
+							<File
+								key={fileOrFolder.id}
+								selected={selectedFile === fileOrFolder.fullPath}
+								file={fileOrFolder}
+								onFileSelect={handleFileSelect}
+								withCheckbox={withCheckboxes}
+								checked={isPathSelected(fileOrFolder.fullPath)}
+								onCheckboxChange={handleSelectionChange}
+							/>
+						);
+					}
+					case "folder": {
+						return (
+							<Folder
+								key={fileOrFolder.id}
+								folder={fileOrFolder}
+								collapsed={collapsedFolders.has(fileOrFolder.fullPath)}
+								loading={loadingFolders.has(fileOrFolder.fullPath)}
+								onToggle={toggleCollapseState}
+								onHover={onFolderHover}
+								withCheckbox={withCheckboxes}
+								checked={isPathSelected(fileOrFolder.fullPath) && !isPartiallySelected(fileOrFolder.fullPath)}
+								partiallyChecked={isPartiallySelected(fileOrFolder.fullPath)}
+								onCheckboxChange={handleSelectionChange}
+								selectableMode={selectableFolders}
+								onFolderSelect={handleFolderSelect}
+								selected={selectedFolder === fileOrFolder.fullPath}
+							/>
+						);
+					}
+					default: {
+						return undefined;
+					}
+				}
+			})}
+		</div>
+	);
+});
+
+interface FolderProps {
+	folder: FolderNode;
+	collapsed: boolean;
+	loading?: boolean;
+	onToggle: (fullPath: string) => void;
+	onHover?: (fullPath: string) => void;
+	withCheckbox?: boolean;
+	checked?: boolean;
+	partiallyChecked?: boolean;
+	onCheckboxChange?: (path: string, checked: boolean) => void;
+	selectableMode?: boolean;
+	onFolderSelect?: (folderPath: string) => void;
+	selected?: boolean;
+}
+
+const Folder = memo(
+	({
+		folder,
+		collapsed,
+		loading,
+		onToggle,
+		onHover,
+		withCheckbox,
+		checked,
+		partiallyChecked,
+		onCheckboxChange,
+		selectableMode,
+		onFolderSelect,
+		selected,
+	}: FolderProps) => {
+		const { depth, name, fullPath } = folder;
+		const FolderIconComponent = collapsed ? FolderIcon : FolderOpen;
+
+		const handleChevronClick = useCallback(
+			(e: React.MouseEvent) => {
+				e.stopPropagation();
+				onToggle(fullPath);
+			},
+			[onToggle, fullPath],
+		);
+
+		const handleMouseEnter = useCallback(() => {
+			if (collapsed) {
+				onHover?.(fullPath);
+			}
+		}, [onHover, fullPath, collapsed]);
+
+		const handleCheckboxChange = useCallback(
+			(value: boolean) => {
+				onCheckboxChange?.(fullPath, value);
+			},
+			[onCheckboxChange, fullPath],
+		);
+
+		const handleFolderClick = useCallback(() => {
+			if (selectableMode) {
+				onFolderSelect?.(fullPath);
+			}
+		}, [selectableMode, onFolderSelect, fullPath]);
+
+		return (
+			<NodeButton
+				className={cn("group", {
+					"hover:bg-accent/50 text-foreground": !selected,
+					"bg-accent text-accent-foreground": selected,
+					"cursor-pointer": selectableMode,
+				})}
+				depth={depth}
+				icon={
+					loading ? (
+						<Loader2 className="w-4 h-4 shrink-0 animate-spin" />
+					) : collapsed ? (
+						<ChevronRight className="w-4 h-4 shrink-0 cursor-pointer" onClick={handleChevronClick} />
+					) : (
+						<ChevronDown className="w-4 h-4 shrink-0 cursor-pointer" onClick={handleChevronClick} />
+					)
+				}
+				onClick={selectableMode ? handleFolderClick : undefined}
+				onMouseEnter={handleMouseEnter}
+			>
+				{withCheckbox && (
+					<Checkbox
+						checked={checked ? true : partiallyChecked ? "indeterminate" : false}
+						onCheckedChange={handleCheckboxChange}
+						onClick={(e) => e.stopPropagation()}
+					/>
+				)}
+				<FolderIconComponent className="w-4 h-4 shrink-0 text-strong-accent" />
+				<span className="truncate">{name}</span>
+			</NodeButton>
+		);
+	},
+);
+
+interface FileProps {
+	file: FileNode;
+	selected: boolean;
+	onFileSelect: (filePath: string) => void;
+	withCheckbox?: boolean;
+	checked?: boolean;
+	onCheckboxChange?: (path: string, checked: boolean) => void;
+}
+
+const File = memo(({ file, onFileSelect, selected, withCheckbox, checked, onCheckboxChange }: FileProps) => {
+	const { depth, name, fullPath } = file;
+
+	const handleClick = useCallback(() => {
+		onFileSelect(fullPath);
+	}, [onFileSelect, fullPath]);
+
+	const handleCheckboxChange = useCallback(
+		(value: boolean) => {
+			onCheckboxChange?.(fullPath, value);
+		},
+		[onCheckboxChange, fullPath],
+	);
+
+	return (
+		<NodeButton
+			className={cn("group cursor-pointer", {
+				"hover:bg-accent/50 text-foreground": !selected,
+				"bg-accent text-accent-foreground": selected,
+			})}
+			depth={depth}
+			icon={<FileIcon className="w-4 h-4 shrink-0 text-gray-500" />}
+			onClick={handleClick}
+		>
+			{withCheckbox && (
+				<Checkbox checked={checked} onCheckedChange={handleCheckboxChange} onClick={(e) => e.stopPropagation()} />
+			)}
+			<span className="truncate">{name}</span>
+		</NodeButton>
+	);
+});
+
+interface ButtonProps {
+	depth: number;
+	icon: ReactNode;
+	children: ReactNode;
+	className?: string;
+	onClick?: () => void;
+	onMouseEnter?: () => void;
+}
+
+const NodeButton = memo(({ depth, icon, onClick, onMouseEnter, className, children }: ButtonProps) => {
+	const paddingLeft = useMemo(() => `${8 + depth * NODE_PADDING_LEFT}px`, [depth]);
+
+	return (
+		<button
+			type="button"
+			className={cn("flex items-center gap-2 w-full pr-2 text-sm py-1.5 text-left", className)}
+			style={{ paddingLeft }}
+			onClick={onClick}
+			onMouseEnter={onMouseEnter}
+		>
+			{icon}
+			<div className="truncate w-full flex items-center gap-2">{children}</div>
+		</button>
+	);
+});
+
+type Node = FileNode | FolderNode;
+
+interface BaseNode {
+	id: number;
+	depth: number;
+	name: string;
+	fullPath: string;
+}
+
+interface FileNode extends BaseNode {
+	kind: "file";
+}
+
+interface FolderNode extends BaseNode {
+	kind: "folder";
+}
+
+function buildFileList(files: FileEntry[], foldersOnly = false): Node[] {
+	const fileMap = new Map<string, Node>();
+
+	for (const file of files) {
+		if (foldersOnly && file.type === "file") {
+			continue;
+		}
+
+		const segments = file.path.split("/").filter((segment) => segment);
+		const depth = segments.length - 1;
+		const name = segments[segments.length - 1];
+
+		if (!fileMap.has(file.path)) {
+			fileMap.set(file.path, {
+				kind: file.type === "file" ? "file" : "folder",
+				id: fileMap.size,
+				name,
+				fullPath: file.path,
+				depth,
+			});
+		}
+	}
+
+	// Convert map to array and sort
+	return sortFileList(Array.from(fileMap.values()));
+}
+
+function sortFileList(nodeList: Node[]): Node[] {
+	const nodeMap = new Map<string, Node>();
+	const childrenMap = new Map<string, Node[]>();
+
+	// Pre-sort nodes by name and type
+	nodeList.sort((a, b) => compareNodes(a, b));
+
+	for (const node of nodeList) {
+		nodeMap.set(node.fullPath, node);
+
+		const parentPath = node.fullPath.slice(0, node.fullPath.lastIndexOf("/")) || "/";
+
+		if (parentPath !== "/") {
+			if (!childrenMap.has(parentPath)) {
+				childrenMap.set(parentPath, []);
+			}
+			childrenMap.get(parentPath)?.push(node);
+		}
+	}
+
+	const sortedList: Node[] = [];
+
+	const depthFirstTraversal = (path: string): void => {
+		const node = nodeMap.get(path);
+
+		if (node) {
+			sortedList.push(node);
+		}
+
+		const children = childrenMap.get(path);
+
+		if (children) {
+			for (const child of children) {
+				if (child.kind === "folder") {
+					depthFirstTraversal(child.fullPath);
+				} else {
+					sortedList.push(child);
+				}
+			}
+		}
+	};
+
+	// Start with root level items
+	const rootItems = nodeList.filter((node) => {
+		const parentPath = node.fullPath.slice(0, node.fullPath.lastIndexOf("/")) || "/";
+		return parentPath === "/";
+	});
+
+	for (const item of rootItems) {
+		depthFirstTraversal(item.fullPath);
+	}
+
+	return sortedList;
+}
+
+function compareNodes(a: Node, b: Node): number {
+	if (a.kind !== b.kind) {
+		return a.kind === "folder" ? -1 : 1;
+	}
+
+	return a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: "base" });
+}

app/client/components/grid-background.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import { cn } from "~/client/lib/utils";
+
+interface GridBackgroundProps {
+	children: ReactNode;
+	className?: string;
+	containerClassName?: string;
+}
+
+export function GridBackground({ children, className, containerClassName }: GridBackgroundProps) {
+	return (
+		<div
+			className={cn(
+				"relative min-h-full w-full overflow-x-hidden",
+				"bg-size-[20px_20px] sm:bg-size-[40px_40px]",
+				"bg-[linear-gradient(to_right,#e4e4e7_1px,transparent_1px),linear-gradient(to_bottom,#e4e4e7_1px,transparent_1px)]",
+				"dark:bg-[linear-gradient(to_right,#262626_1px,transparent_1px),linear-gradient(to_bottom,#262626_1px,transparent_1px)]",
+				containerClassName,
+			)}
+		>
+			<div className={cn("relative container m-auto", className)}>{children}</div>
+		</div>
+	);
+}

app/client/components/layout.tsx

@@ -0,0 +1,87 @@
+import { useMutation } from "@tanstack/react-query";
+import { LifeBuoy } from "lucide-react";
+import { Outlet, redirect, useNavigate } from "react-router";
+import { toast } from "sonner";
+import { appContext } from "~/context";
+import { authMiddleware } from "~/middleware/auth";
+import type { Route } from "./+types/layout";
+import { AppBreadcrumb } from "./app-breadcrumb";
+import { GridBackground } from "./grid-background";
+import { Button } from "./ui/button";
+import { SidebarProvider, SidebarTrigger } from "./ui/sidebar";
+import { AppSidebar } from "./app-sidebar";
+import { logoutMutation } from "../api-client/@tanstack/react-query.gen";
+
+export const clientMiddleware = [authMiddleware];
+
+export async function clientLoader({ context }: Route.LoaderArgs) {
+	const ctx = context.get(appContext);
+
+	if (ctx.user && !ctx.user.hasDownloadedResticPassword) {
+		throw redirect("/download-recovery-key");
+	}
+
+	return ctx;
+}
+
+export default function Layout({ loaderData }: Route.ComponentProps) {
+	const navigate = useNavigate();
+
+	const logout = useMutation({
+		...logoutMutation(),
+		onSuccess: async () => {
+			navigate("/login", { replace: true });
+		},
+		onError: (error) => {
+			console.error(error);
+			toast.error("Logout failed", { description: error.message });
+		},
+	});
+
+	return (
+		<SidebarProvider defaultOpen={true}>
+			<AppSidebar />
+			<div className="w-full relative flex flex-col h-screen overflow-hidden">
+				<header className="z-50 bg-card-header border-b border-border/50 shrink-0">
+					<div className="flex items-center justify-between py-3 sm:py-4 px-2 sm:px-8 mx-auto container">
+						<div className="flex items-center gap-4">
+							<SidebarTrigger />
+							<AppBreadcrumb />
+						</div>
+						{loaderData.user && (
+							<div className="flex items-center gap-4">
+								<span className="text-sm text-muted-foreground hidden md:inline-flex">
+									Welcome,&nbsp;
+									<span className="text-strong-accent">{loaderData.user?.username}</span>
+								</span>
+								<Button variant="default" size="sm" onClick={() => logout.mutate({})} loading={logout.isPending}>
+									Logout
+								</Button>
+								<Button variant="default" size="sm" className="relative overflow-hidden hidden lg:inline-flex">
+									<a
+										href="https://github.com/nicotsx/ironmount/issues/new"
+										target="_blank"
+										rel="noreferrer"
+										className="flex items-center gap-2"
+									>
+										<span className="flex items-center gap-2">
+											<LifeBuoy />
+											<span>Report an issue</span>
+										</span>
+									</a>
+								</Button>
+							</div>
+						)}
+					</div>
+				</header>
+				<div className="main-content flex-1 overflow-y-auto">
+					<GridBackground>
+						<main className="flex flex-col p-2 pb-6 pt-2 sm:p-8 sm:pt-6 mx-auto">
+							<Outlet />
+						</main>
+					</GridBackground>
+				</div>
+			</div>
+		</SidebarProvider>
+	);
+}

app/client/components/onoff.tsx

@@ -0,0 +1,31 @@
+import { cn } from "~/client/lib/utils";
+import { Switch } from "./ui/switch";
+
+type Props = {
+	isOn: boolean;
+	toggle: (v: boolean) => void;
+	enabledLabel: string;
+	disabledLabel: string;
+	disabled?: boolean;
+};
+
+export const OnOff = ({ isOn, toggle, enabledLabel, disabledLabel, disabled }: Props) => {
+	return (
+		<div
+			className={cn(
+				"flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold uppercase tracking-wide transition-colors",
+				isOn
+					? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/40 dark:bg-emerald-500/10 dark:text-emerald-200"
+					: "border-muted bg-muted/40 text-muted-foreground dark:border-muted/60 dark:bg-muted/10",
+			)}
+		>
+			<span>{isOn ? enabledLabel : disabledLabel}</span>
+			<Switch
+				disabled={disabled}
+				checked={isOn}
+				onCheckedChange={toggle}
+				aria-label={isOn ? `Toggle ${enabledLabel}` : `Toggle ${disabledLabel}`}
+			/>
+		</div>
+	);
+};

app/client/components/repository-icon.tsx

@@ -0,0 +1,20 @@
+import { Database, HardDrive, Cloud } from "lucide-react";
+import type { RepositoryBackend } from "~/schemas/restic";
+
+type Props = {
+	backend: RepositoryBackend;
+	className?: string;
+};
+
+export const RepositoryIcon = ({ backend, className = "h-4 w-4" }: Props) => {
+	switch (backend) {
+		case "local":
+			return <HardDrive className={className} />;
+		case "s3":
+			return <Cloud className={className} />;
+		case "gcs":
+			return <Cloud className={className} />;
+		default:
+			return <Database className={className} />;
+	}
+};

app/client/components/snapshots-table.tsx

@@ -0,0 +1,95 @@
+import { Calendar, Clock, Database, FolderTree, HardDrive } from "lucide-react";
+import { useNavigate } from "react-router";
+import { ByteSize } from "~/client/components/bytes-size";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/client/components/ui/table";
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/client/components/ui/tooltip";
+import { formatDuration } from "~/utils/utils";
+import type { ListSnapshotsResponse } from "../api-client";
+
+type Snapshot = ListSnapshotsResponse[number];
+
+type Props = {
+	snapshots: Snapshot[];
+	repositoryName: string;
+};
+
+export const SnapshotsTable = ({ snapshots, repositoryName }: Props) => {
+	const navigate = useNavigate();
+
+	const handleRowClick = (snapshotId: string) => {
+		navigate(`/repositories/${repositoryName}/${snapshotId}`);
+	};
+
+	return (
+		<div className="overflow-x-auto">
+			<Table className="border-t">
+				<TableHeader className="bg-card-header">
+					<TableRow>
+						<TableHead className="uppercase">Snapshot ID</TableHead>
+						<TableHead className="uppercase">Date & Time</TableHead>
+						<TableHead className="uppercase">Size</TableHead>
+						<TableHead className="uppercase hidden md:table-cell text-right">Duration</TableHead>
+						<TableHead className="uppercase hidden text-right lg:table-cell">Paths</TableHead>
+					</TableRow>
+				</TableHeader>
+				<TableBody>
+					{snapshots.map((snapshot) => (
+						<TableRow
+							key={snapshot.short_id}
+							className="hover:bg-accent/50 cursor-pointer"
+							onClick={() => handleRowClick(snapshot.short_id)}
+						>
+							<TableCell className="font-mono text-sm">
+								<div className="flex items-center gap-2">
+									<HardDrive className="h-4 w-4 text-muted-foreground" />
+									<span className="text-strong-accent">{snapshot.short_id}</span>
+								</div>
+							</TableCell>
+							<TableCell>
+								<div className="flex items-center gap-2">
+									<Calendar className="h-4 w-4 text-muted-foreground" />
+									<span className="text-sm">{new Date(snapshot.time).toLocaleString()}</span>
+								</div>
+							</TableCell>
+							<TableCell>
+								<div className="flex items-center gap-2">
+									<Database className="h-4 w-4 text-muted-foreground" />
+									<span className="font-medium">
+										<ByteSize bytes={snapshot.size} base={1024} />
+									</span>
+								</div>
+							</TableCell>
+							<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">{formatDuration(snapshot.duration / 1000)}</span>
+								</div>
+							</TableCell>
+							<TableCell className="hidden lg:table-cell">
+								<div className="flex items-center justify-end gap-2">
+									<FolderTree className="h-4 w-4 text-muted-foreground" />
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<span className="text-xs bg-primary/10 text-primary rounded-md px-2 py-1 cursor-help">
+												{snapshot.paths.length} {snapshot.paths.length === 1 ? "path" : "paths"}
+											</span>
+										</TooltipTrigger>
+										<TooltipContent side="top" className="max-w-md">
+											<div className="flex flex-col gap-1">
+												{snapshot.paths.map((path) => (
+													<div key={`${snapshot.short_id}-${path}`} className="text-xs font-mono">
+														{path}
+													</div>
+												))}
+											</div>
+										</TooltipContent>
+									</Tooltip>
+								</div>
+							</TableCell>
+						</TableRow>
+					))}
+				</TableBody>
+			</Table>
+		</div>
+	);
+};

app/client/components/status-dot.tsx

@@ -0,0 +1,49 @@
+import type { VolumeStatus } from "~/client/lib/types";
+import { cn } from "~/client/lib/utils";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+export const StatusDot = ({ status }: { status: VolumeStatus }) => {
+	const statusMapping = {
+		mounted: {
+			color: "bg-green-500",
+			colorLight: "bg-emerald-400",
+			animated: true,
+		},
+		unmounted: {
+			color: "bg-gray-500",
+			colorLight: "bg-gray-400",
+			animated: false,
+		},
+		error: {
+			color: "bg-red-500",
+			colorLight: "bg-amber-700",
+			animated: true,
+		},
+		unknown: {
+			color: "bg-yellow-500",
+			colorLight: "bg-yellow-400",
+			animated: true,
+		},
+	}[status];
+
+	return (
+		<Tooltip>
+			<TooltipTrigger>
+				<span className="relative flex size-3 mx-auto">
+					{statusMapping.animated && (
+						<span
+							className={cn(
+								"absolute inline-flex h-full w-full animate-ping rounded-full opacity-75",
+								`${statusMapping.colorLight}`,
+							)}
+						/>
+					)}
+					<span className={cn("relative inline-flex size-3 rounded-full", `${statusMapping.color}`)} />
+				</span>
+			</TooltipTrigger>
+			<TooltipContent>
+				<p className="capitalize">{status}</p>
+			</TooltipContent>
+		</Tooltip>
+	);
+};

app/client/components/ui/alert-dialog.tsx

@@ -0,0 +1,110 @@
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import type * as React from "react";
+import { buttonVariants } from "~/client/components/ui/button";
+import { cn } from "~/client/lib/utils";
+
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+	return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+	return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+	return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+	return (
+		<AlertDialogPrimitive.Overlay
+			data-slot="alert-dialog-overlay"
+			className={cn(
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+	return (
+		<AlertDialogPortal>
+			<AlertDialogOverlay />
+			<AlertDialogPrimitive.Content
+				data-slot="alert-dialog-content"
+				className={cn(
+					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+					className,
+				)}
+				{...props}
+			/>
+		</AlertDialogPortal>
+	);
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-dialog-header"
+			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-dialog-footer"
+			className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+	return (
+		<AlertDialogPrimitive.Title
+			data-slot="alert-dialog-title"
+			className={cn("text-lg font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+	return (
+		<AlertDialogPrimitive.Description
+			data-slot="alert-dialog-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+	return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />;
+}
+
+function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+	return <AlertDialogPrimitive.Cancel className={cn(buttonVariants({ variant: "outline" }), className)} {...props} />;
+}
+
+export {
+	AlertDialog,
+	AlertDialogPortal,
+	AlertDialogOverlay,
+	AlertDialogTrigger,
+	AlertDialogContent,
+	AlertDialogHeader,
+	AlertDialogFooter,
+	AlertDialogTitle,
+	AlertDialogDescription,
+	AlertDialogAction,
+	AlertDialogCancel,
+};

app/client/components/ui/alert.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "~/client/lib/utils";
+
+const alertVariants = cva(
+	"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+	{
+		variants: {
+			variant: {
+				default: "bg-background text-foreground",
+				destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+				warning: "border-orange-500/20 bg-orange-500/10 text-orange-500 [&>svg]:text-orange-500",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+const Alert = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+	<div ref={ref} role="alert" className={cn(alertVariants({ variant }), 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 };

app/client/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import type * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "~/client/lib/utils";
+
+const badgeVariants = cva(
+	"inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+	{
+		variants: {
+			variant: {
+				default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+				secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+				destructive:
+					"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+function Badge({
+	className,
+	variant,
+	asChild = false,
+	...props
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : "span";
+
+	return <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

app/client/components/ui/breadcrumb.tsx

@@ -0,0 +1,92 @@
+import type * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "~/client/lib/utils";
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+	return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+	return (
+		<ol
+			data-slot="breadcrumb-list"
+			className={cn(
+				"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-words sm:gap-2.5",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+	return <li data-slot="breadcrumb-item" className={cn("inline-flex items-center gap-1.5", className)} {...props} />;
+}
+
+function BreadcrumbLink({
+	asChild,
+	className,
+	...props
+}: React.ComponentProps<"a"> & {
+	asChild?: boolean;
+}) {
+	const Comp = asChild ? Slot : "a";
+
+	return (
+		<Comp data-slot="breadcrumb-link" className={cn("hover:text-foreground transition-colors", className)} {...props} />
+	);
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="breadcrumb-page"
+			role="link"
+			aria-disabled="true"
+			aria-current="page"
+			className={cn("text-foreground font-normal", className)}
+			{...props}
+		/>
+	);
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
+	return (
+		<li
+			data-slot="breadcrumb-separator"
+			role="presentation"
+			aria-hidden="true"
+			className={cn("[&>svg]:size-3.5", className)}
+			{...props}
+		>
+			{children ?? <ChevronRight />}
+		</li>
+	);
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="breadcrumb-ellipsis"
+			role="presentation"
+			aria-hidden="true"
+			className={cn("flex size-9 items-center justify-center", className)}
+			{...props}
+		>
+			<MoreHorizontal className="size-4" />
+			<span className="sr-only">More</span>
+		</span>
+	);
+}
+
+export {
+	Breadcrumb,
+	BreadcrumbList,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+	BreadcrumbEllipsis,
+};

app/client/components/ui/button.tsx

@@ -0,0 +1,62 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "~/client/lib/utils";
+
+const buttonVariants = cva(
+	"inline-flex cursor-pointer uppercase rounded-sm items-center justify-center gap-2 whitespace-nowrap text-xs font-semibold tracking-wide transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring border-0",
+	{
+		variants: {
+			variant: {
+				default: "bg-transparent text-white hover:bg-[#3A3A3A]/80 border dark:text-white dark:hover:bg-[#3A3A3A]/80",
+				primary: "bg-strong-accent text-white hover:bg-strong-accent/90 focus-visible:ring-strong-accent/50",
+				destructive:
+					"border border-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/50 text-destructive hover:text-white",
+				outline: "border border-border bg-background hover:bg-accent hover:text-accent-foreground",
+				secondary: "bg-transparent text-white hover:bg-[#3A3A3A]/80 border dark:text-white dark:hover:bg-[#3A3A3A]/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-5 py-2 has-[>svg]:px-4",
+				sm: "h-8 px-3 py-1.5 has-[>svg]:px-2.5",
+				lg: "h-10 px-6 py-2.5 has-[>svg]:px-5",
+				icon: "size-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function Button({
+	className,
+	variant,
+	size,
+	asChild = false,
+	loading,
+	...props
+}: React.ComponentProps<"button"> &
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	} & { loading?: boolean }) {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			disabled={loading}
+			data-slot="button"
+			className={cn(buttonVariants({ variant, size, className }), "transition-all")}
+			{...props}
+		>
+			<Loader2 className={cn("h-4 w-4 animate-spin absolute", { invisible: !loading })} />
+			<div className={cn("flex items-center justify-center", { invisible: loading })}>{props.children}</div>
+		</Comp>
+	);
+}
+
+export { Button, buttonVariants };

app/client/components/ui/card.tsx

@@ -0,0 +1,68 @@
+import type * as React from "react";
+
+import { cn } from "~/client/lib/utils";
+
+function Card({ className, children, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card"
+			className={cn("bg-card text-card-foreground relative flex flex-col gap-6 border-2 py-6 shadow-sm", className)}
+			{...props}
+		>
+			<span aria-hidden="true" className="pointer-events-none absolute inset-0 z-10 select-none">
+				<span className="absolute left-[-2px] top-[-2px] h-0.5 w-4 bg-white/80" />
+				<span className="absolute left-[-2px] top-[-2px] h-4 w-0.5 bg-white/80" />
+				<span className="absolute right-[-2px] top-[-2px] h-0.5 w-4 bg-white/80" />
+				<span className="absolute right-[-2px] top-[-2px] h-4 w-0.5 bg-white/80" />
+				<span className="absolute left-[-2px] bottom-[-2px] h-0.5 w-4 bg-white/80" />
+				<span className="absolute left-[-2px] bottom-[-2px] h-4 w-0.5 bg-white/80" />
+				<span className="absolute right-[-2px] bottom-[-2px] h-0.5 w-4 bg-white/80" />
+				<span className="absolute right-[-2px] bottom-[-2px] h-4 w-0.5 bg-white/80" />
+			</span>
+			{children}
+		</div>
+	);
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-header"
+			className={cn(
+				"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="card-title" className={cn("leading-none font-semibold", className)} {...props} />;
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="card-description" className={cn("text-muted-foreground text-sm", className)} {...props} />;
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-action"
+			className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="card-content" className={cn("px-6", className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div data-slot="card-footer" className={cn("flex items-center px-6 [.border-t]:pt-6", className)} {...props} />
+	);
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

app/client/components/ui/chart.tsx

@@ -0,0 +1,298 @@
+// @ts-nocheck
+// biome-ignore-all lint: reason
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "~/client/lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+	[k in string]: {
+		label?: React.ReactNode;
+		icon?: React.ComponentType;
+	} & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> });
+};
+
+type ChartContextProps = {
+	config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+	const context = React.useContext(ChartContext);
+
+	if (!context) {
+		throw new Error("useChart must be used within a <ChartContainer />");
+	}
+
+	return context;
+}
+
+function ChartContainer({
+	id,
+	className,
+	children,
+	config,
+	...props
+}: React.ComponentProps<"div"> & {
+	config: ChartConfig;
+	children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+}) {
+	const uniqueId = React.useId();
+	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+	return (
+		<ChartContext.Provider value={{ config }}>
+			<div
+				data-slot="chart"
+				data-chart={chartId}
+				className={cn(
+					"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+					className,
+				)}
+				{...props}
+			>
+				<ChartStyle id={chartId} config={config} />
+				<RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+			</div>
+		</ChartContext.Provider>
+	);
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+	const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+
+	if (!colorConfig.length) {
+		return null;
+	}
+
+	return (
+		<style
+			dangerouslySetInnerHTML={{
+				__html: Object.entries(THEMES)
+					.map(
+						([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+	.map(([key, itemConfig]) => {
+		const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
+		return color ? `  --color-${key}: ${color};` : null;
+	})
+	.join("\n")}
+}
+`,
+					)
+					.join("\n"),
+			}}
+		/>
+	);
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+function ChartTooltipContent({
+	active,
+	payload,
+	className,
+	indicator = "dot",
+	hideLabel = false,
+	hideIndicator = false,
+	label,
+	labelFormatter,
+	labelClassName,
+	formatter,
+	color,
+	nameKey,
+	labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+	React.ComponentProps<"div"> & {
+		hideLabel?: boolean;
+		hideIndicator?: boolean;
+		indicator?: "line" | "dot" | "dashed";
+		nameKey?: string;
+		labelKey?: string;
+	}) {
+	const { config } = useChart();
+
+	const tooltipLabel = React.useMemo(() => {
+		if (hideLabel || !payload?.length) {
+			return null;
+		}
+
+		const [item] = payload;
+		const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+		const itemConfig = getPayloadConfigFromPayload(config, item, key);
+		const value =
+			!labelKey && typeof label === "string" ? config[label as keyof typeof config]?.label || label : itemConfig?.label;
+
+		if (labelFormatter) {
+			return <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>;
+		}
+
+		if (!value) {
+			return null;
+		}
+
+		return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+	}, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+
+	if (!active || !payload?.length) {
+		return null;
+	}
+
+	const nestLabel = payload.length === 1 && indicator !== "dot";
+
+	return (
+		<div
+			className={cn(
+				"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+				className,
+			)}
+		>
+			{!nestLabel ? tooltipLabel : null}
+			<div className="grid gap-1.5">
+				{payload
+					.filter((item) => item.type !== "none")
+					.map((item, index) => {
+						const key = `${nameKey || item.name || item.dataKey || "value"}`;
+						const itemConfig = getPayloadConfigFromPayload(config, item, key);
+						const indicatorColor = color || item.payload.fill || item.color;
+
+						return (
+							<div
+								key={item.dataKey}
+								className={cn(
+									"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+									indicator === "dot" && "items-center",
+								)}
+							>
+								{formatter && item?.value !== undefined && item.name ? (
+									formatter(item.value, item.name, item, index, item.payload)
+								) : (
+									<>
+										{itemConfig?.icon ? (
+											<itemConfig.icon />
+										) : (
+											!hideIndicator && (
+												<div
+													className={cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+														"h-2.5 w-2.5": indicator === "dot",
+														"w-1": indicator === "line",
+														"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+														"my-0.5": nestLabel && indicator === "dashed",
+													})}
+													style={
+														{
+															"--color-bg": indicatorColor,
+															"--color-border": indicatorColor,
+														} as React.CSSProperties
+													}
+												/>
+											)
+										)}
+										<div
+											className={cn(
+												"flex flex-1 justify-between leading-none",
+												nestLabel ? "items-end" : "items-center",
+											)}
+										>
+											<div className="grid gap-1.5">
+												{nestLabel ? tooltipLabel : null}
+												<span className="text-muted-foreground">{itemConfig?.label || item.name}</span>
+											</div>
+											{item.value && (
+												<span className="text-foreground font-mono font-medium tabular-nums">
+													{item.value.toLocaleString()}
+												</span>
+											)}
+										</div>
+									</>
+								)}
+							</div>
+						);
+					})}
+			</div>
+		</div>
+	);
+}
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+function ChartLegendContent({
+	className,
+	hideIcon = false,
+	payload,
+	verticalAlign = "bottom",
+	nameKey,
+}: React.ComponentProps<"div"> &
+	Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+		hideIcon?: boolean;
+		nameKey?: string;
+	}) {
+	const { config } = useChart();
+
+	if (!payload?.length) {
+		return null;
+	}
+
+	return (
+		<div className={cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className)}>
+			{payload
+				.filter((item) => item.type !== "none")
+				.map((item) => {
+					const key = `${nameKey || item.dataKey || "value"}`;
+					const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+					return (
+						<div
+							key={item.value}
+							className={cn("[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3")}
+						>
+							{itemConfig?.icon && !hideIcon ? (
+								<itemConfig.icon />
+							) : (
+								<div
+									className="h-2 w-2 shrink-0 rounded-[2px]"
+									style={{
+										backgroundColor: item.color,
+									}}
+								/>
+							)}
+							{itemConfig?.label}
+						</div>
+					);
+				})}
+		</div>
+	);
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
+	if (typeof payload !== "object" || payload === null) {
+		return undefined;
+	}
+
+	const payloadPayload =
+		"payload" in payload && typeof payload.payload === "object" && payload.payload !== null
+			? payload.payload
+			: undefined;
+
+	let configLabelKey: string = key;
+
+	if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
+		configLabelKey = payload[key as keyof typeof payload] as string;
+	} else if (
+		payloadPayload &&
+		key in payloadPayload &&
+		typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+	) {
+		configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
+	}
+
+	return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
+}
+
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle };

app/client/components/ui/checkbox.tsx

@@ -0,0 +1,27 @@
+import type * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+
+import { cn } from "~/client/lib/utils";
+
+function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+	return (
+		<CheckboxPrimitive.Root
+			data-slot="checkbox"
+			className={cn(
+				"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		>
+			<CheckboxPrimitive.Indicator
+				data-slot="checkbox-indicator"
+				className="grid place-content-center text-current transition-none"
+			>
+				<CheckIcon className="size-3.5" />
+			</CheckboxPrimitive.Indicator>
+		</CheckboxPrimitive.Root>
+	);
+}
+
+export { Checkbox };

app/client/components/ui/code-block.tsx

@@ -0,0 +1,39 @@
+import type React from "react";
+import { toast } from "sonner";
+import { copyToClipboard } from "~/utils/clipboard";
+
+interface CodeBlockProps {
+	code: string;
+	language?: string;
+	filename?: string;
+}
+
+export const CodeBlock: React.FC<CodeBlockProps> = ({ code, filename }) => {
+	const handleCopy = async () => {
+		await copyToClipboard(code);
+		toast.success("Code copied to clipboard");
+	};
+
+	return (
+		<div className="overflow-hidden rounded-sm bg-card-header ring-1 ring-white/10">
+			<div className="flex items-center justify-between border-b border-white/10 px-4 py-2 text-xs">
+				<div className="flex items-center gap-1.5">
+					<span className="h-2.5 w-2.5 rounded-full bg-rose-500" />
+					<span className="h-2.5 w-2.5 rounded-full bg-amber-500" />
+					<span className="h-2.5 w-2.5 rounded-full bg-emerald-500" />
+					{filename && <span className="ml-3 font-medium">{filename}</span>}
+				</div>
+				<button
+					type="button"
+					onClick={() => handleCopy()}
+					className="cursor-pointer rounded-md bg-white/5 px-2 py-1 text-[11px] font-medium ring-1 ring-inset ring-white/10 transition hover:bg-white/10 active:translate-y-px"
+				>
+					Copy
+				</button>
+			</div>
+			<pre className="text-xs m-0 px-4 py-2 bg-card-header">
+				<code className="text-white/80">{code}</code>
+			</pre>
+		</div>
+	);
+};

app/client/components/ui/dialog.tsx

@@ -0,0 +1,121 @@
+import type * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "~/client/lib/utils";
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+	return (
+		<DialogPrimitive.Overlay
+			data-slot="dialog-overlay"
+			className={cn(
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DialogContent({
+	className,
+	children,
+	showCloseButton = true,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+	showCloseButton?: boolean;
+}) {
+	return (
+		<DialogPortal data-slot="dialog-portal">
+			<DialogOverlay />
+			<DialogPrimitive.Content
+				data-slot="dialog-content"
+				className={cn(
+					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				{showCloseButton && (
+					<DialogPrimitive.Close
+						data-slot="dialog-close"
+						className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+					>
+						<XIcon />
+						<span className="sr-only">Close</span>
+					</DialogPrimitive.Close>
+				)}
+			</DialogPrimitive.Content>
+		</DialogPortal>
+	);
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="dialog-header"
+			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+			{...props}
+		/>
+	);
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="dialog-footer"
+			className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+			{...props}
+		/>
+	);
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+	return (
+		<DialogPrimitive.Title
+			data-slot="dialog-title"
+			className={cn("text-lg leading-none font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
+	return (
+		<DialogPrimitive.Description
+			data-slot="dialog-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
+};

app/client/components/ui/form.tsx

@@ -0,0 +1,136 @@
+import * as React from "react";
+import type * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import {
+	Controller,
+	FormProvider,
+	useFormContext,
+	useFormState,
+	type ControllerProps,
+	type FieldPath,
+	type FieldValues,
+} from "react-hook-form";
+
+import { cn } from "~/client/lib/utils";
+import { Label } from "~/client/components/ui/label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+	name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
+
+const FormField = <
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+	...props
+}: ControllerProps<TFieldValues, TName>) => {
+	return (
+		<FormFieldContext.Provider value={{ name: props.name }}>
+			<Controller {...props} />
+		</FormFieldContext.Provider>
+	);
+};
+
+const useFormField = () => {
+	const fieldContext = React.useContext(FormFieldContext);
+	const itemContext = React.useContext(FormItemContext);
+	const { getFieldState } = useFormContext();
+	const formState = useFormState({ name: fieldContext.name });
+	const fieldState = getFieldState(fieldContext.name, formState);
+
+	if (!fieldContext) {
+		throw new Error("useFormField should be used within <FormField>");
+	}
+
+	const { id } = itemContext;
+
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState,
+	};
+};
+
+type FormItemContextValue = {
+	id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+	const id = React.useId();
+
+	return (
+		<FormItemContext.Provider value={{ id }}>
+			<div data-slot="form-item" className={cn("grid gap-2", className)} {...props} />
+		</FormItemContext.Provider>
+	);
+}
+
+function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+	const { error, formItemId } = useFormField();
+
+	return (
+		<Label
+			data-slot="form-label"
+			data-error={!!error}
+			className={cn("data-[error=true]:text-destructive", className)}
+			htmlFor={formItemId}
+			{...props}
+		/>
+	);
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+	const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+	return (
+		<Slot
+			data-slot="form-control"
+			id={formItemId}
+			aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+			aria-invalid={!!error}
+			{...props}
+		/>
+	);
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+	const { formDescriptionId } = useFormField();
+
+	return (
+		<p
+			data-slot="form-description"
+			id={formDescriptionId}
+			className={cn("text-muted-foreground text-xs", className)}
+			{...props}
+		/>
+	);
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+	const { error, formMessageId } = useFormField();
+	const body = error ? String(error?.message ?? "") : props.children;
+
+	if (!body) {
+		return null;
+	}
+
+	return (
+		<p data-slot="form-message" id={formMessageId} className={cn("text-destructive text-sm", className)} {...props}>
+			{body}
+		</p>
+	);
+}
+
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

app/client/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import type * as React from "react";
+
+import { cn } from "~/client/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+	return (
+		<input
+			type={type}
+			data-slot="input"
+			className={cn(
+				"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 border bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+				"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+				"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Input };

app/client/components/ui/label.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import type * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+import { cn } from "~/client/lib/utils";
+
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+	return (
+		<LabelPrimitive.Root
+			data-slot="label"
+			className={cn(
+				"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Label };

app/client/components/ui/progress.tsx

@@ -0,0 +1,22 @@
+import type * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+
+import { cn } from "~/client/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 };

app/client/components/ui/scroll-area.tsx

@@ -0,0 +1,46 @@
+import type * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "~/client/lib/utils";
+
+function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+	return (
+		<ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn("relative", className)} {...props}>
+			<ScrollAreaPrimitive.Viewport
+				data-slot="scroll-area-viewport"
+				className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+			>
+				{children}
+			</ScrollAreaPrimitive.Viewport>
+			<ScrollBar />
+			<ScrollAreaPrimitive.Corner />
+		</ScrollAreaPrimitive.Root>
+	);
+}
+
+function ScrollBar({
+	className,
+	orientation = "vertical",
+	...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+	return (
+		<ScrollAreaPrimitive.ScrollAreaScrollbar
+			data-slot="scroll-area-scrollbar"
+			orientation={orientation}
+			className={cn(
+				"flex touch-none p-px transition-colors select-none",
+				orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+				orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+				className,
+			)}
+			{...props}
+		>
+			<ScrollAreaPrimitive.ScrollAreaThumb
+				data-slot="scroll-area-thumb"
+				className="bg-border relative flex-1 rounded-full"
+			/>
+		</ScrollAreaPrimitive.ScrollAreaScrollbar>
+	);
+}
+
+export { ScrollArea, ScrollBar };

app/client/components/ui/select.tsx

@@ -0,0 +1,158 @@
+import type * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+import { cn } from "~/client/lib/utils";
+
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+	return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+	return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+	return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+	className,
+	size = "default",
+	children,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+	size?: "sm" | "default";
+}) {
+	return (
+		<SelectPrimitive.Trigger
+			data-slot="select-trigger"
+			data-size={size}
+			className={cn(
+				"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<SelectPrimitive.Icon asChild>
+				<ChevronDownIcon className="size-4 opacity-50" />
+			</SelectPrimitive.Icon>
+		</SelectPrimitive.Trigger>
+	);
+}
+
+function SelectContent({
+	className,
+	children,
+	position = "popper",
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+	return (
+		<SelectPrimitive.Portal>
+			<SelectPrimitive.Content
+				data-slot="select-content"
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto border shadow-md",
+					position === "popper" &&
+						"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+					className,
+				)}
+				position={position}
+				{...props}
+			>
+				<SelectScrollUpButton />
+				<SelectPrimitive.Viewport
+					className={cn(
+						"p-1",
+						position === "popper" &&
+							"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+					)}
+				>
+					{children}
+				</SelectPrimitive.Viewport>
+				<SelectScrollDownButton />
+			</SelectPrimitive.Content>
+		</SelectPrimitive.Portal>
+	);
+}
+
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
+	return (
+		<SelectPrimitive.Label
+			data-slot="select-label"
+			className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+			{...props}
+		/>
+	);
+}
+
+function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
+	return (
+		<SelectPrimitive.Item
+			data-slot="select-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+				className,
+			)}
+			{...props}
+		>
+			<span className="absolute right-2 flex size-3.5 items-center justify-center">
+				<SelectPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</SelectPrimitive.ItemIndicator>
+			</span>
+			<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+		</SelectPrimitive.Item>
+	);
+}
+
+function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+	return (
+		<SelectPrimitive.Separator
+			data-slot="select-separator"
+			className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+	return (
+		<SelectPrimitive.ScrollUpButton
+			data-slot="select-scroll-up-button"
+			className={cn("flex cursor-default items-center justify-center py-1", className)}
+			{...props}
+		>
+			<ChevronUpIcon className="size-4" />
+		</SelectPrimitive.ScrollUpButton>
+	);
+}
+
+function SelectScrollDownButton({
+	className,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+	return (
+		<SelectPrimitive.ScrollDownButton
+			data-slot="select-scroll-down-button"
+			className={cn("flex cursor-default items-center justify-center py-1", className)}
+			{...props}
+		>
+			<ChevronDownIcon className="size-4" />
+		</SelectPrimitive.ScrollDownButton>
+	);
+}
+
+export {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+};

app/client/components/ui/separator.tsx

@@ -0,0 +1,26 @@
+import type * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "~/client/lib/utils";
+
+function Separator({
+	className,
+	orientation = "horizontal",
+	decorative = true,
+	...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+	return (
+		<SeparatorPrimitive.Root
+			data-slot="separator"
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Separator };

app/client/components/ui/sheet.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import type * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "~/client/lib/utils";
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+	return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+	return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
+	return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+	return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+	return (
+		<SheetPrimitive.Overlay
+			data-slot="sheet-overlay"
+			className={cn(
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SheetContent({
+	className,
+	children,
+	side = "right",
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+	side?: "top" | "right" | "bottom" | "left";
+}) {
+	return (
+		<SheetPortal>
+			<SheetOverlay />
+			<SheetPrimitive.Content
+				data-slot="sheet-content"
+				className={cn(
+					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+					side === "right" &&
+						"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+					side === "left" &&
+						"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+					side === "top" &&
+						"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+					side === "bottom" &&
+						"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+					<XIcon className="size-4" />
+					<span className="sr-only">Close</span>
+				</SheetPrimitive.Close>
+			</SheetPrimitive.Content>
+		</SheetPortal>
+	);
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="sheet-header" className={cn("flex flex-col gap-1.5 p-4", className)} {...props} />;
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="sheet-footer" className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />;
+}
+
+function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
+	return (
+		<SheetPrimitive.Title
+			data-slot="sheet-title"
+			className={cn("text-foreground font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>) {
+	return (
+		<SheetPrimitive.Description
+			data-slot="sheet-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription };

app/client/components/ui/sidebar.tsx

@@ -0,0 +1,677 @@
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { PanelLeftIcon } from "lucide-react";
+
+import { useIsMobile } from "~/client/hooks/use-mobile";
+import { cn } from "~/client/lib/utils";
+import { Button } from "~/client/components/ui/button";
+import { Input } from "~/client/components/ui/input";
+import { Separator } from "~/client/components/ui/separator";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "~/client/components/ui/sheet";
+import { Skeleton } from "~/client/components/ui/skeleton";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/client/components/ui/tooltip";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "14rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContextProps = {
+	state: "expanded" | "collapsed";
+	open: boolean;
+	setOpen: (open: boolean) => void;
+	openMobile: boolean;
+	setOpenMobile: (open: boolean) => void;
+	isMobile: boolean;
+	toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
+
+function useSidebar() {
+	const context = React.useContext(SidebarContext);
+	if (!context) {
+		throw new Error("useSidebar must be used within a SidebarProvider.");
+	}
+
+	return context;
+}
+
+function SidebarProvider({
+	defaultOpen = true,
+	open: openProp,
+	onOpenChange: setOpenProp,
+	className,
+	style,
+	children,
+	...props
+}: React.ComponentProps<"div"> & {
+	defaultOpen?: boolean;
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
+}) {
+	const isMobile = useIsMobile();
+	const [openMobile, setOpenMobile] = React.useState(false);
+
+	// This is the internal state of the sidebar.
+	// We use openProp and setOpenProp for control from outside the component.
+	const [_open, _setOpen] = React.useState(defaultOpen);
+	const open = openProp ?? _open;
+	const setOpen = React.useCallback(
+		(value: boolean | ((value: boolean) => boolean)) => {
+			const openState = typeof value === "function" ? value(open) : value;
+			if (setOpenProp) {
+				setOpenProp(openState);
+			} else {
+				_setOpen(openState);
+			}
+
+			// This sets the cookie to keep the sidebar state.
+			document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+		},
+		[setOpenProp, open],
+	);
+
+	// Helper to toggle the sidebar.
+	const toggleSidebar = React.useCallback(() => {
+		return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+	}, [isMobile, setOpen, setOpenMobile]);
+
+	// Adds a keyboard shortcut to toggle the sidebar.
+	React.useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				toggleSidebar();
+			}
+		};
+
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [toggleSidebar]);
+
+	// We add a state so that we can do data-state="expanded" or "collapsed".
+	// This makes it easier to style the sidebar with Tailwind classes.
+	const state = open ? "expanded" : "collapsed";
+
+	const contextValue = React.useMemo<SidebarContextProps>(
+		() => ({
+			state,
+			open,
+			setOpen,
+			isMobile,
+			openMobile,
+			setOpenMobile,
+			toggleSidebar,
+		}),
+		[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+	);
+
+	return (
+		<SidebarContext.Provider value={contextValue}>
+			<TooltipProvider delayDuration={0}>
+				<div
+					data-slot="sidebar-wrapper"
+					style={
+						{
+							"--sidebar-width": SIDEBAR_WIDTH,
+							"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+							...style,
+						} as React.CSSProperties
+					}
+					className={cn("group/sidebar-wrapper flex min-h-svh w-full", className)}
+					{...props}
+				>
+					{children}
+				</div>
+			</TooltipProvider>
+		</SidebarContext.Provider>
+	);
+}
+
+function Sidebar({
+	side = "left",
+	variant = "sidebar",
+	collapsible = "offcanvas",
+	className,
+	children,
+	...props
+}: React.ComponentProps<"div"> & {
+	side?: "left" | "right";
+	variant?: "sidebar" | "floating" | "inset";
+	collapsible?: "offcanvas" | "icon" | "none";
+}) {
+	const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+	if (collapsible === "none") {
+		return (
+			<div
+				data-slot="sidebar"
+				className={cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className)}
+				{...props}
+			>
+				{children}
+			</div>
+		);
+	}
+
+	if (isMobile) {
+		return (
+			<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+				<SheetContent
+					data-sidebar="sidebar"
+					data-slot="sidebar"
+					data-mobile="true"
+					className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+					style={
+						{
+							"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+						} as React.CSSProperties
+					}
+					side={side}
+				>
+					<SheetHeader className="sr-only">
+						<SheetTitle>Sidebar</SheetTitle>
+						<SheetDescription>Displays the mobile sidebar.</SheetDescription>
+					</SheetHeader>
+					<div className="flex h-full w-full flex-col">{children}</div>
+				</SheetContent>
+			</Sheet>
+		);
+	}
+
+	return (
+		<div
+			className="group peer text-sidebar-foreground hidden md:block"
+			data-state={state}
+			data-collapsible={state === "collapsed" ? collapsible : ""}
+			data-variant={variant}
+			data-side={side}
+			data-slot="sidebar"
+		>
+			{/* This is what handles the sidebar gap on desktop */}
+			<div
+				data-slot="sidebar-gap"
+				className={cn(
+					"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-in-out",
+					"group-data-[collapsible=offcanvas]:w-0",
+					"group-data-[side=right]:rotate-180",
+					variant === "floating" || variant === "inset"
+						? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+						: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+				)}
+			/>
+			<div
+				data-slot="sidebar-container"
+				className={cn(
+					"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-in-out md:flex",
+					side === "left"
+						? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+						: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+					// Adjust the padding for floating and inset variants.
+					variant === "floating" || variant === "inset"
+						? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+						: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+					className,
+				)}
+				{...props}
+			>
+				<div
+					data-sidebar="sidebar"
+					data-slot="sidebar-inner"
+					className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+				>
+					{children}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
+	const { toggleSidebar } = useSidebar();
+
+	return (
+		<Button
+			data-sidebar="trigger"
+			data-slot="sidebar-trigger"
+			variant="ghost"
+			size="icon"
+			className={cn("size-7", className)}
+			onClick={(event) => {
+				onClick?.(event);
+				toggleSidebar();
+			}}
+			{...props}
+		>
+			<PanelLeftIcon />
+			<span className="sr-only">Toggle Sidebar</span>
+		</Button>
+	);
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+	const { toggleSidebar } = useSidebar();
+
+	return (
+		<button
+			data-sidebar="rail"
+			data-slot="sidebar-rail"
+			aria-label="Toggle Sidebar"
+			tabIndex={-1}
+			onClick={toggleSidebar}
+			title="Toggle Sidebar"
+			className={cn(
+				"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-in-out group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+				"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+				"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+				"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+				"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+				"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+	return (
+		<main
+			data-slot="sidebar-inset"
+			className={cn(
+				"bg-background relative flex w-full flex-1 flex-col",
+				"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {
+	return (
+		<Input
+			data-slot="sidebar-input"
+			data-sidebar="input"
+			className={cn("bg-background h-8 w-full shadow-none", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-header"
+			data-sidebar="header"
+			className={cn("flex flex-col gap-2 p-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-footer"
+			data-sidebar="footer"
+			className={cn("flex flex-col gap-2 p-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
+	return (
+		<Separator
+			data-slot="sidebar-separator"
+			data-sidebar="separator"
+			className={cn("bg-sidebar-border mx-2 w-auto", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-content"
+			data-sidebar="content"
+			className={cn(
+				"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-group"
+			data-sidebar="group"
+			className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarGroupLabel({
+	className,
+	asChild = false,
+	...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : "div";
+
+	return (
+		<Comp
+			data-slot="sidebar-group-label"
+			data-sidebar="group-label"
+			className={cn(
+				"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-in-out focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarGroupAction({
+	className,
+	asChild = false,
+	...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			data-slot="sidebar-group-action"
+			data-sidebar="group-action"
+			className={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				// Increases the hit area of the button on mobile.
+				"after:absolute after:-inset-2 md:after:hidden",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-group-content"
+			data-sidebar="group-content"
+			className={cn("w-full text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+	return (
+		<ul
+			data-slot="sidebar-menu"
+			data-sidebar="menu"
+			className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+	return (
+		<li
+			data-slot="sidebar-menu-item"
+			data-sidebar="menu-item"
+			className={cn("group/menu-item relative", className)}
+			{...props}
+		/>
+	);
+}
+
+const sidebarMenuButtonVariants = cva(
+	"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+				outline:
+					"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+			},
+			size: {
+				default: "h-8 text-sm",
+				sm: "h-7 text-xs",
+				lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function SidebarMenuButton({
+	asChild = false,
+	isActive = false,
+	variant = "default",
+	size = "default",
+	tooltip,
+	className,
+	...props
+}: React.ComponentProps<"button"> & {
+	asChild?: boolean;
+	isActive?: boolean;
+	tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+	const Comp = asChild ? Slot : "button";
+	const { isMobile, state } = useSidebar();
+
+	const button = (
+		<Comp
+			data-slot="sidebar-menu-button"
+			data-sidebar="menu-button"
+			data-size={size}
+			data-active={isActive}
+			className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+			{...props}
+		/>
+	);
+
+	if (!tooltip) {
+		return button;
+	}
+
+	if (typeof tooltip === "string") {
+		tooltip = {
+			children: tooltip,
+		};
+	}
+
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>{button}</TooltipTrigger>
+			<TooltipContent side="right" align="center" hidden={state !== "collapsed" || isMobile} {...tooltip} />
+		</Tooltip>
+	);
+}
+
+function SidebarMenuAction({
+	className,
+	asChild = false,
+	showOnHover = false,
+	...props
+}: React.ComponentProps<"button"> & {
+	asChild?: boolean;
+	showOnHover?: boolean;
+}) {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			data-slot="sidebar-menu-action"
+			data-sidebar="menu-action"
+			className={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				// Increases the hit area of the button on mobile.
+				"after:absolute after:-inset-2 md:after:hidden",
+				"peer-data-[size=sm]/menu-button:top-1",
+				"peer-data-[size=default]/menu-button:top-1.5",
+				"peer-data-[size=lg]/menu-button:top-2.5",
+				"group-data-[collapsible=icon]:hidden",
+				showOnHover &&
+					"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-menu-badge"
+			data-sidebar="menu-badge"
+			className={cn(
+				"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+				"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+				"peer-data-[size=sm]/menu-button:top-1",
+				"peer-data-[size=default]/menu-button:top-1.5",
+				"peer-data-[size=lg]/menu-button:top-2.5",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuSkeleton({
+	className,
+	showIcon = false,
+	...props
+}: React.ComponentProps<"div"> & {
+	showIcon?: boolean;
+}) {
+	// Random width between 50 to 90%.
+	const width = React.useMemo(() => {
+		return `${Math.floor(Math.random() * 40) + 50}%`;
+	}, []);
+
+	return (
+		<div
+			data-slot="sidebar-menu-skeleton"
+			data-sidebar="menu-skeleton"
+			className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+			{...props}
+		>
+			{showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
+			<Skeleton
+				className="h-4 max-w-(--skeleton-width) flex-1"
+				data-sidebar="menu-skeleton-text"
+				style={
+					{
+						"--skeleton-width": width,
+					} as React.CSSProperties
+				}
+			/>
+		</div>
+	);
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+	return (
+		<ul
+			data-slot="sidebar-menu-sub"
+			data-sidebar="menu-sub"
+			className={cn(
+				"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">) {
+	return (
+		<li
+			data-slot="sidebar-menu-sub-item"
+			data-sidebar="menu-sub-item"
+			className={cn("group/menu-sub-item relative", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuSubButton({
+	asChild = false,
+	size = "md",
+	isActive = false,
+	className,
+	...props
+}: React.ComponentProps<"a"> & {
+	asChild?: boolean;
+	size?: "sm" | "md";
+	isActive?: boolean;
+}) {
+	const Comp = asChild ? Slot : "a";
+
+	return (
+		<Comp
+			data-slot="sidebar-menu-sub-button"
+			data-sidebar="menu-sub-button"
+			data-size={size}
+			data-active={isActive}
+			className={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+				"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+				size === "sm" && "text-xs",
+				size === "md" && "text-sm",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Sidebar,
+	SidebarContent,
+	SidebarFooter,
+	SidebarGroup,
+	SidebarGroupAction,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarHeader,
+	SidebarInput,
+	SidebarInset,
+	SidebarMenu,
+	SidebarMenuAction,
+	SidebarMenuBadge,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSkeleton,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem,
+	SidebarProvider,
+	SidebarRail,
+	SidebarSeparator,
+	SidebarTrigger,
+	useSidebar,
+};

app/client/components/ui/skeleton.tsx

@@ -0,0 +1,7 @@
+import { cn } from "~/client/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="skeleton" className={cn("bg-accent animate-pulse rounded-md", className)} {...props} />;
+}
+
+export { Skeleton };

app/client/components/ui/sonner.tsx

@@ -0,0 +1,24 @@
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+	const { theme = "dark" } = useTheme();
+
+	return (
+		<Sonner
+			theme={theme as ToasterProps["theme"]}
+			className="toaster group"
+			position="top-center"
+			style={
+				{
+					"--normal-bg": "var(--popover)",
+					"--normal-text": "var(--popover-foreground)",
+					"--normal-border": "var(--border)",
+				} as React.CSSProperties
+			}
+			{...props}
+		/>
+	);
+};
+
+export { Toaster };

app/client/components/ui/switch.tsx

@@ -0,0 +1,26 @@
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import type * as React from "react";
+
+import { cn } from "~/client/lib/utils";
+
+function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+	return (
+		<SwitchPrimitive.Root
+			data-slot="switch"
+			className={cn(
+				"cursor-pointer peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		>
+			<SwitchPrimitive.Thumb
+				data-slot="switch-thumb"
+				className={cn(
+					"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
+				)}
+			/>
+		</SwitchPrimitive.Root>
+	);
+}
+
+export { Switch };

app/client/components/ui/table.tsx

@@ -0,0 +1,73 @@
+import type * as React from "react";
+
+import { cn } from "~/client/lib/utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+	return (
+		<div data-slot="table-container" className="relative w-full overflow-x-auto">
+			<table data-slot="table" className={cn("w-full caption-bottom text-sm", className)} {...props} />
+		</div>
+	);
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+	return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />;
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+	return <tbody data-slot="table-body" className={cn("[&_tr:last-child]:border-0", className)} {...props} />;
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+	return (
+		<tfoot
+			data-slot="table-footer"
+			className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+			{...props}
+		/>
+	);
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+	return (
+		<tr
+			data-slot="table-row"
+			className={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)}
+			{...props}
+		/>
+	);
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+	return (
+		<th
+			data-slot="table-head"
+			className={cn(
+				"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+	return (
+		<td
+			data-slot="table-cell"
+			className={cn(
+				"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+	return (
+		<caption data-slot="table-caption" className={cn("text-muted-foreground mt-4 text-sm", className)} {...props} />
+	);
+}
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

app/client/components/ui/tabs.tsx

@@ -0,0 +1,58 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import type * as React from "react";
+
+import { cn } from "~/client/lib/utils";
+
+function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
+	return <TabsPrimitive.Root data-slot="tabs" className={cn("flex flex-col gap-2", className)} {...props} />;
+}
+
+function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
+	return (
+		<TabsPrimitive.List
+			data-slot="tabs-list"
+			className={cn("inline-flex h-7 items-center gap-4 text-xs text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+	return (
+		<TabsPrimitive.Trigger
+			data-slot="tabs-trigger"
+			className={cn(
+				"cursor-pointer group relative inline-flex h-7 items-center whitespace-nowrap text-xs font-medium transition-colors",
+				"text-muted-foreground data-[state=active]:text-foreground disabled:pointer-events-none disabled:opacity-50",
+				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+				// Padding: 20px horizontal (8px for bracket tick + 12px gap to text)
+				"px-5",
+				// Transparent orange background for active state
+				"data-[state=active]:bg-[#FF453A]/10",
+				// Left bracket - vertical line
+				"before:absolute before:left-0 before:top-0 before:h-7 before:w-0.5 before:bg-[#5D6570] before:transition-colors data-[state=active]:before:bg-[#FF453A]",
+				// Left bracket - top tick
+				"after:absolute after:left-0 after:top-[-1px] after:w-2 after:h-0.5 after:bg-[#5D6570] after:transition-colors data-[state=active]:after:bg-[#FF453A]",
+				className,
+			)}
+			{...props}
+		>
+			<span className="relative z-10">{props.children}</span>
+			{/* Left bracket - bottom tick */}
+			<span className="absolute left-0 bottom-[-1px] h-0.5 w-2 bg-[#5D6570] transition-colors group-data-[state=active]:bg-[#FF453A]" />
+			{/* Right bracket - top tick */}
+			<span className="absolute right-0 top-[-1px] h-0.5 w-2 bg-[#5D6570] transition-colors group-data-[state=active]:bg-[#FF453A]" />
+			{/* Right bracket - vertical line */}
+			<span className="absolute right-0 top-0 h-7 w-0.5 bg-[#5D6570] transition-colors group-data-[state=active]:bg-[#FF453A]" />
+			{/* Right bracket - bottom tick */}
+			<span className="absolute right-0 bottom-[-1px] h-0.5 w-2 bg-[#5D6570] transition-colors group-data-[state=active]:bg-[#FF453A]" />
+		</TabsPrimitive.Trigger>
+	);
+}
+
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+	return <TabsPrimitive.Content data-slot="tabs-content" className={cn("flex-1 outline-none", className)} {...props} />;
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

app/client/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import type * as React from "react";
+
+import { cn } from "~/client/lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+	return (
+		<textarea
+			data-slot="textarea"
+			className={cn(
+				"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Textarea };

app/client/components/ui/tooltip.tsx

@@ -0,0 +1,46 @@
+import type * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "~/client/lib/utils";
+
+function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+	return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
+}
+
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+	return (
+		<TooltipProvider>
+			<TooltipPrimitive.Root data-slot="tooltip" {...props} />
+		</TooltipProvider>
+	);
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+	className,
+	sideOffset = 0,
+	children,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Content
+				data-slot="tooltip-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	);
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

app/client/components/volume-file-browser.tsx

@@ -0,0 +1,162 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { FolderOpen } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import { FileTree } from "~/client/components/file-tree";
+import { listFilesOptions } from "../api-client/@tanstack/react-query.gen";
+
+interface FileEntry {
+	name: string;
+	path: string;
+	type: "file" | "directory";
+	size?: number;
+	modifiedAt?: number;
+}
+
+type VolumeFileBrowserProps = {
+	volumeName: string;
+	enabled?: boolean;
+	withCheckboxes?: boolean;
+	selectedPaths?: Set<string>;
+	onSelectionChange?: (paths: Set<string>) => void;
+	foldersOnly?: boolean;
+	className?: string;
+	emptyMessage?: string;
+	emptyDescription?: string;
+};
+
+export const VolumeFileBrowser = ({
+	volumeName,
+	enabled = true,
+	withCheckboxes = false,
+	selectedPaths,
+	onSelectionChange,
+	foldersOnly = false,
+	className,
+	emptyMessage = "This volume appears to be empty.",
+	emptyDescription,
+}: VolumeFileBrowserProps) => {
+	const queryClient = useQueryClient();
+	const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
+	const [fetchedFolders, setFetchedFolders] = useState<Set<string>>(new Set(["/"]));
+	const [loadingFolders, setLoadingFolders] = useState<Set<string>>(new Set());
+	const [allFiles, setAllFiles] = useState<Map<string, FileEntry>>(new Map());
+
+	const { data, isLoading, error } = useQuery({
+		...listFilesOptions({ path: { name: volumeName } }),
+		enabled,
+	});
+
+	useMemo(() => {
+		if (data?.files) {
+			setAllFiles((prev) => {
+				const next = new Map(prev);
+				for (const file of data.files) {
+					next.set(file.path, file);
+				}
+				return next;
+			});
+		}
+	}, [data]);
+
+	const fileArray = useMemo(() => Array.from(allFiles.values()), [allFiles]);
+
+	const handleFolderExpand = useCallback(
+		async (folderPath: string) => {
+			setExpandedFolders((prev) => {
+				const next = new Set(prev);
+				next.add(folderPath);
+				return next;
+			});
+
+			if (!fetchedFolders.has(folderPath)) {
+				setLoadingFolders((prev) => new Set(prev).add(folderPath));
+
+				try {
+					const result = await queryClient.ensureQueryData(
+						listFilesOptions({
+							path: { name: volumeName },
+							query: { path: folderPath },
+						}),
+					);
+
+					if (result.files) {
+						setAllFiles((prev) => {
+							const next = new Map(prev);
+							for (const file of result.files) {
+								next.set(file.path, file);
+							}
+							return next;
+						});
+
+						setFetchedFolders((prev) => new Set(prev).add(folderPath));
+					}
+				} catch (error) {
+					console.error("Failed to fetch folder contents:", error);
+				} finally {
+					setLoadingFolders((prev) => {
+						const next = new Set(prev);
+						next.delete(folderPath);
+						return next;
+					});
+				}
+			}
+		},
+		[volumeName, fetchedFolders, queryClient.ensureQueryData],
+	);
+
+	const handleFolderHover = useCallback(
+		(folderPath: string) => {
+			if (!fetchedFolders.has(folderPath) && !loadingFolders.has(folderPath)) {
+				queryClient.prefetchQuery(
+					listFilesOptions({
+						path: { name: volumeName },
+						query: { path: folderPath },
+					}),
+				);
+			}
+		},
+		[volumeName, fetchedFolders, loadingFolders, queryClient],
+	);
+
+	if (isLoading && fileArray.length === 0) {
+		return (
+			<div className="flex items-center justify-center h-full min-h-[200px]">
+				<p className="text-muted-foreground">Loading files...</p>
+			</div>
+		);
+	}
+
+	if (error) {
+		return (
+			<div className="flex items-center justify-center h-full min-h-[200px]">
+				<p className="text-destructive">Failed to load files: {(error as Error).message}</p>
+			</div>
+		);
+	}
+
+	if (fileArray.length === 0) {
+		return (
+			<div className="flex flex-col items-center justify-center h-full text-center p-8 min-h-[200px]">
+				<FolderOpen className="mb-4 h-12 w-12 text-muted-foreground" />
+				<p className="text-muted-foreground">{emptyMessage}</p>
+				{emptyDescription && <p className="text-sm text-muted-foreground mt-2">{emptyDescription}</p>}
+			</div>
+		);
+	}
+
+	return (
+		<div className={className}>
+			<FileTree
+				files={fileArray}
+				onFolderExpand={handleFolderExpand}
+				onFolderHover={handleFolderHover}
+				expandedFolders={expandedFolders}
+				loadingFolders={loadingFolders}
+				withCheckboxes={withCheckboxes}
+				selectedPaths={selectedPaths}
+				onSelectionChange={onSelectionChange}
+				foldersOnly={foldersOnly}
+			/>
+		</div>
+	);
+};

app/client/components/volume-icon.tsx

@@ -0,0 +1,53 @@
+import { Cloud, Folder, Server, Share2 } from "lucide-react";
+import type { BackendType } from "~/schemas/volumes";
+
+type VolumeIconProps = {
+	backend: BackendType;
+	size?: number;
+};
+
+const getIconAndColor = (backend: BackendType) => {
+	switch (backend) {
+		case "directory":
+			return {
+				icon: Folder,
+				color: "text-blue-600 dark:text-blue-400",
+				label: "Directory",
+			};
+		case "nfs":
+			return {
+				icon: Server,
+				color: "text-orange-600 dark:text-orange-400",
+				label: "NFS",
+			};
+		case "smb":
+			return {
+				icon: Share2,
+				color: "text-purple-600 dark:text-purple-400",
+				label: "SMB",
+			};
+		case "webdav":
+			return {
+				icon: Cloud,
+				color: "text-green-600 dark:text-green-400",
+				label: "WebDAV",
+			};
+		default:
+			return {
+				icon: Folder,
+				color: "text-gray-600 dark:text-gray-400",
+				label: "Unknown",
+			};
+	}
+};
+
+export const VolumeIcon = ({ backend, size = 10 }: VolumeIconProps) => {
+	const { icon: Icon, label } = getIconAndColor(backend);
+
+	return (
+		<span className={`flex items-center gap-2 rounded-md px-2 py-1`}>
+			<Icon size={size} />
+			{label}
+		</span>
+	);
+};

app/client/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+	const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+	React.useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+
+	return !!isMobile;
+}

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

@@ -0,0 +1,151 @@
+import { useEffect, useRef } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+
+type ServerEventType =
+	| "connected"
+	| "heartbeat"
+	| "backup:started"
+	| "backup:progress"
+	| "backup:completed"
+	| "volume:mounted"
+	| "volume:unmounted"
+	| "volume:updated";
+
+export interface BackupEvent {
+	scheduleId: number;
+	volumeName: string;
+	repositoryName: string;
+	status?: "success" | "error";
+}
+
+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;
+}
+
+type EventHandler = (data: unknown) => void;
+
+/**
+ * Hook to listen to Server-Sent Events (SSE) from the backend
+ * Automatically handles cache invalidation for backup and volume events
+ */
+export function useServerEvents() {
+	const queryClient = useQueryClient();
+	const eventSourceRef = useRef<EventSource | null>(null);
+	const handlersRef = useRef<Map<ServerEventType, Set<EventHandler>>>(new Map());
+
+	useEffect(() => {
+		const eventSource = new EventSource("/api/v1/events");
+		eventSourceRef.current = eventSource;
+
+		eventSource.addEventListener("connected", () => {
+			console.log("[SSE] Connected to server events");
+		});
+
+		eventSource.addEventListener("heartbeat", () => {});
+
+		eventSource.addEventListener("backup:started", (e) => {
+			const data = JSON.parse(e.data) as BackupEvent;
+			console.log("[SSE] Backup started:", data);
+
+			handlersRef.current.get("backup:started")?.forEach((handler) => {
+				handler(data);
+			});
+		});
+
+		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);
+
+			queryClient.invalidateQueries();
+			queryClient.refetchQueries();
+
+			handlersRef.current.get("backup:completed")?.forEach((handler) => {
+				handler(data);
+			});
+		});
+
+		eventSource.addEventListener("volume:mounted", (e) => {
+			const data = JSON.parse(e.data) as VolumeEvent;
+			console.log("[SSE] Volume mounted:", data);
+
+			handlersRef.current.get("volume:mounted")?.forEach((handler) => {
+				handler(data);
+			});
+		});
+
+		eventSource.addEventListener("volume:unmounted", (e) => {
+			const data = JSON.parse(e.data) as VolumeEvent;
+			console.log("[SSE] Volume unmounted:", data);
+
+			handlersRef.current.get("volume:unmounted")?.forEach((handler) => {
+				handler(data);
+			});
+		});
+
+		eventSource.addEventListener("volume:updated", (e) => {
+			const data = JSON.parse(e.data) as VolumeEvent;
+			console.log("[SSE] Volume updated:", data);
+
+			queryClient.invalidateQueries();
+
+			handlersRef.current.get("volume:updated")?.forEach((handler) => {
+				handler(data);
+			});
+		});
+
+		eventSource.addEventListener("volume:status_updated", (e) => {
+			const data = JSON.parse(e.data) as VolumeEvent;
+			console.log("[SSE] Volume status updated:", data);
+
+			queryClient.invalidateQueries();
+
+			handlersRef.current.get("volume:updated")?.forEach((handler) => {
+				handler(data);
+			});
+		});
+
+		eventSource.onerror = (error) => {
+			console.error("[SSE] Connection error:", error);
+		};
+
+		return () => {
+			console.log("[SSE] Disconnecting from server events");
+			eventSource.close();
+			eventSourceRef.current = null;
+		};
+	}, [queryClient]);
+
+	const addEventListener = (event: ServerEventType, handler: EventHandler) => {
+		if (!handlersRef.current.has(event)) {
+			handlersRef.current.set(event, new Set());
+		}
+		handlersRef.current.get(event)?.add(handler);
+
+		return () => {
+			handlersRef.current.get(event)?.delete(handler);
+		};
+	};
+
+	return { addEventListener };
+}

app/client/hooks/use-system-info.ts

@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
+import { getSystemInfoOptions } from "../api-client/@tanstack/react-query.gen";
+
+export function useSystemInfo() {
+	const { data, isLoading, error } = useQuery({
+		...getSystemInfoOptions(),
+		staleTime: 5 * 60 * 1000,
+		gcTime: 10 * 60 * 1000,
+		refetchOnWindowFocus: false,
+	});
+
+	return {
+		capabilities: data?.capabilities ?? { docker: false, rclone: false },
+		isLoading,
+		error,
+		systemInfo: data,
+	};
+}

app/client/lib/breadcrumbs.ts

@@ -0,0 +1,86 @@
+import { useLocation, useParams } from "react-router";
+
+export interface BreadcrumbItem {
+	label: string;
+	href?: string;
+	isCurrentPage?: boolean;
+}
+
+/**
+ * Generates breadcrumb items based on the current route
+ * @param pathname - Current pathname from useLocation
+ * @param params - Route parameters from useParams
+ * @returns Array of breadcrumb items
+ */
+export function generateBreadcrumbs(pathname: string, params: Record<string, string | undefined>): BreadcrumbItem[] {
+	const breadcrumbs: BreadcrumbItem[] = [];
+
+	if (pathname.startsWith("/repositories")) {
+		breadcrumbs.push({
+			label: "Repositories",
+			href: "/repositories",
+			isCurrentPage: pathname === "/repositories",
+		});
+
+		if (pathname.startsWith("/repositories/") && params.name) {
+			const isSnapshotPage = !!params.snapshotId;
+
+			breadcrumbs.push({
+				label: params.name,
+				href: isSnapshotPage ? `/repositories/${params.name}` : undefined,
+				isCurrentPage: !isSnapshotPage,
+			});
+
+			if (isSnapshotPage && params.snapshotId) {
+				breadcrumbs.push({
+					label: params.snapshotId,
+					isCurrentPage: true,
+				});
+			}
+		}
+
+		return breadcrumbs;
+	}
+
+	if (pathname.startsWith("/backups")) {
+		breadcrumbs.push({
+			label: "Backups",
+			href: "/backups",
+			isCurrentPage: pathname === "/backups",
+		});
+
+		if (pathname.startsWith("/backups/") && params.id) {
+			breadcrumbs.push({
+				label: `Schedule #${params.id}`,
+				isCurrentPage: true,
+			});
+		}
+
+		return breadcrumbs;
+	}
+
+	breadcrumbs.push({
+		label: "Volumes",
+		href: "/volumes",
+		isCurrentPage: pathname === "/volumes",
+	});
+
+	if (pathname.startsWith("/volumes/") && params.name) {
+		breadcrumbs.push({
+			label: params.name,
+			isCurrentPage: true,
+		});
+	}
+
+	return breadcrumbs;
+}
+
+/**
+ * Hook to get breadcrumb data for the current route
+ */
+export function useBreadcrumbs(): BreadcrumbItem[] {
+	const location = useLocation();
+	const params = useParams();
+
+	return generateBreadcrumbs(location.pathname, params);
+}

app/client/lib/errors.ts

@@ -0,0 +1,11 @@
+export const parseError = (error?: unknown) => {
+	if (error && typeof error === "object" && "message" in error) {
+		return { message: error.message as string };
+	}
+
+	if (typeof error === "string") {
+		return { message: error };
+	}
+
+	return undefined;
+};

app/client/lib/types.ts

@@ -0,0 +1,19 @@
+import type {
+	GetBackupScheduleResponse,
+	GetMeResponse,
+	GetRepositoryResponse,
+	GetVolumeResponse,
+	ListSnapshotsResponse,
+} from "../api-client";
+
+export type Volume = GetVolumeResponse["volume"];
+export type StatFs = GetVolumeResponse["statfs"];
+export type VolumeStatus = Volume["status"];
+
+export type User = GetMeResponse["user"];
+
+export type Repository = GetRepositoryResponse;
+
+export type BackupSchedule = GetBackupScheduleResponse;
+
+export type Snapshot = ListSnapshotsResponse[number];

app/client/lib/utils.ts

@@ -0,0 +1,30 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/** Conditional merge of class names */
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+/**
+ * Converts an arbitrary string into a URL-safe slug:
+ * - lowercase
+ * - trims whitespace
+ * - replaces non-alphanumeric runs with "-"
+ * - collapses multiple hyphens
+ * - trims leading/trailing hyphens
+ */
+/**
+ * Live slugify for UI: lowercases, normalizes dashes, replaces invalid runs with "-",
+ * collapses repeats, but DOES NOT trim leading/trailing hyphens so the user can type
+ * spaces/dashes progressively while editing.
+ */
+export function slugify(input: string): string {
+	return input
+		.toLowerCase()
+		.replace(/[ ]/g, "-")
+		.replace(/[^a-z0-9_-]+/g, "")
+		.replace(/[-]{2,}/g, "-")
+		.replace(/[_]{2,}/g, "_")
+		.trim();
+}

app/client/modules/auth/routes/download-recovery-key.tsx

@@ -0,0 +1,106 @@
+import { useMutation } from "@tanstack/react-query";
+import { AlertTriangle, Download } from "lucide-react";
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { toast } from "sonner";
+import { AuthLayout } from "~/client/components/auth-layout";
+import { Alert, AlertDescription, AlertTitle } from "~/client/components/ui/alert";
+import { Button } from "~/client/components/ui/button";
+import { Input } from "~/client/components/ui/input";
+import { Label } from "~/client/components/ui/label";
+import { authMiddleware } from "~/middleware/auth";
+import type { Route } from "./+types/download-recovery-key";
+import { downloadResticPasswordMutation } from "~/client/api-client/@tanstack/react-query.gen";
+
+export const clientMiddleware = [authMiddleware];
+
+export function meta(_: Route.MetaArgs) {
+	return [
+		{ title: "Download Recovery Key" },
+		{
+			name: "description",
+			content: "Download your backup recovery key to ensure you can restore your data.",
+		},
+	];
+}
+
+export default function DownloadRecoveryKeyPage() {
+	const navigate = useNavigate();
+	const [password, setPassword] = useState("");
+
+	const downloadResticPassword = useMutation({
+		...downloadResticPasswordMutation(),
+		onSuccess: (data) => {
+			const blob = new Blob([data], { type: "text/plain" });
+			const url = window.URL.createObjectURL(blob);
+			const a = document.createElement("a");
+			a.href = url;
+			a.download = "restic.pass";
+			document.body.appendChild(a);
+			a.click();
+			document.body.removeChild(a);
+			window.URL.revokeObjectURL(url);
+
+			toast.success("Recovery key downloaded successfully!");
+			navigate("/volumes", { replace: true });
+		},
+		onError: (error) => {
+			toast.error("Failed to download recovery key", { description: error.message });
+		},
+	});
+
+	const handleSubmit = (e: React.FormEvent) => {
+		e.preventDefault();
+
+		if (!password) {
+			toast.error("Password is required");
+			return;
+		}
+
+		downloadResticPassword.mutate({
+			body: {
+				password,
+			},
+		});
+	};
+
+	return (
+		<AuthLayout
+			title="Download Your Recovery Key"
+			description="This is a critical step to ensure you can recover your backups"
+		>
+			<Alert variant="warning" className="mb-6">
+				<AlertTriangle className="size-5" />
+				<AlertTitle>Important: Save This File Securely</AlertTitle>
+				<AlertDescription>
+					Your Restic password is essential for recovering your backup data. If you lose access to this server without
+					this file, your backups will be unrecoverable. Store it in a password manager or encrypted storage.
+				</AlertDescription>
+			</Alert>
+
+			<form onSubmit={handleSubmit} className="space-y-4">
+				<div className="space-y-2">
+					<Label htmlFor="password">Confirm Your Password</Label>
+					<Input
+						id="password"
+						type="password"
+						value={password}
+						onChange={(e) => setPassword(e.target.value)}
+						placeholder="Enter your password"
+						required
+						autoFocus
+						disabled={downloadResticPassword.isPending}
+					/>
+					<p className="text-xs text-muted-foreground">Enter your account password to download the recovery key</p>
+				</div>
+
+				<div className="flex flex-col gap-2">
+					<Button type="submit" loading={downloadResticPassword.isPending} className="w-full">
+						<Download size={16} className="mr-2" />
+						Download Recovery Key
+					</Button>
+				</div>
+			</form>
+		</AuthLayout>
+	);
+}

app/client/modules/auth/routes/login.tsx

@@ -0,0 +1,115 @@
+import { arktypeResolver } from "@hookform/resolvers/arktype";
+import { useMutation } from "@tanstack/react-query";
+import { type } from "arktype";
+import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router";
+import { toast } from "sonner";
+import { AuthLayout } from "~/client/components/auth-layout";
+import { Button } from "~/client/components/ui/button";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "~/client/components/ui/form";
+import { Input } from "~/client/components/ui/input";
+import { authMiddleware } from "~/middleware/auth";
+import type { Route } from "./+types/login";
+import { loginMutation } from "~/client/api-client/@tanstack/react-query.gen";
+
+export const clientMiddleware = [authMiddleware];
+
+export function meta(_: Route.MetaArgs) {
+	return [
+		{ title: "Login" },
+		{
+			name: "description",
+			content: "Sign in to your Ironmount account.",
+		},
+	];
+}
+
+const loginSchema = type({
+	username: "2<=string<=50",
+	password: "string>=1",
+});
+
+type LoginFormValues = typeof loginSchema.inferIn;
+
+export default function LoginPage() {
+	const navigate = useNavigate();
+
+	const form = useForm<LoginFormValues>({
+		resolver: arktypeResolver(loginSchema),
+		defaultValues: {
+			username: "",
+			password: "",
+		},
+	});
+
+	const login = useMutation({
+		...loginMutation(),
+		onSuccess: async (data) => {
+			if (data.user && !data.user.hasDownloadedResticPassword) {
+				navigate("/download-recovery-key");
+			} else {
+				navigate("/volumes");
+			}
+		},
+		onError: (error) => {
+			console.error(error);
+			toast.error("Login failed", { description: error.message });
+		},
+	});
+
+	const onSubmit = (values: LoginFormValues) => {
+		login.mutate({
+			body: {
+				username: values.username.trim(),
+				password: values.password.trim(),
+			},
+		});
+	};
+
+	return (
+		<AuthLayout title="Login to your account" description="Enter your credentials below to login to your account">
+			<Form {...form}>
+				<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+					<FormField
+						control={form.control}
+						name="username"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Username</FormLabel>
+								<FormControl>
+									<Input {...field} type="text" placeholder="admin" disabled={login.isPending} autoFocus />
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+					<FormField
+						control={form.control}
+						name="password"
+						render={({ field }) => (
+							<FormItem>
+								<div className="flex items-center justify-between">
+									<FormLabel>Password</FormLabel>
+									<button
+										type="button"
+										className="text-xs text-muted-foreground hover:underline"
+										onClick={() => toast.info("Password reset not implemented")}
+									>
+										Forgot your password?
+									</button>
+								</div>
+								<FormControl>
+									<Input {...field} type="password" disabled={login.isPending} />
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+					<Button type="submit" className="w-full" loading={login.isPending}>
+						Login
+					</Button>
+				</form>
+			</Form>
+		</AuthLayout>
+	);
+}

app/client/modules/auth/routes/onboarding.tsx

@@ -0,0 +1,146 @@
+import { arktypeResolver } from "@hookform/resolvers/arktype";
+import { useMutation } from "@tanstack/react-query";
+import { type } from "arktype";
+import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router";
+import { toast } from "sonner";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "~/client/components/ui/form";
+import { authMiddleware } from "~/middleware/auth";
+import type { Route } from "./+types/onboarding";
+import { AuthLayout } from "~/client/components/auth-layout";
+import { Input } from "~/client/components/ui/input";
+import { Button } from "~/client/components/ui/button";
+import { registerMutation } from "~/client/api-client/@tanstack/react-query.gen";
+
+export const clientMiddleware = [authMiddleware];
+
+export function meta(_: Route.MetaArgs) {
+	return [
+		{ title: "Onboarding" },
+		{
+			name: "description",
+			content: "Welcome to Ironmount. Create your admin account to get started.",
+		},
+	];
+}
+
+const onboardingSchema = type({
+	username: "2<=string<=50",
+	password: "string>=8",
+	confirmPassword: "string>=1",
+});
+
+type OnboardingFormValues = typeof onboardingSchema.inferIn;
+
+export default function OnboardingPage() {
+	const navigate = useNavigate();
+
+	const form = useForm<OnboardingFormValues>({
+		resolver: arktypeResolver(onboardingSchema),
+		defaultValues: {
+			username: "",
+			password: "",
+			confirmPassword: "",
+		},
+	});
+
+	const registerUser = useMutation({
+		...registerMutation(),
+		onSuccess: async () => {
+			toast.success("Admin user created successfully!");
+			navigate("/download-recovery-key");
+		},
+		onError: (error) => {
+			console.error(error);
+			toast.error("Failed to create admin user", { description: error.message });
+		},
+	});
+
+	const onSubmit = (values: OnboardingFormValues) => {
+		if (values.password !== values.confirmPassword) {
+			form.setError("confirmPassword", {
+				type: "manual",
+				message: "Passwords do not match",
+			});
+			return;
+		}
+
+		registerUser.mutate({
+			body: {
+				username: values.username.trim(),
+				password: values.password.trim(),
+			},
+		});
+	};
+
+	return (
+		<AuthLayout title="Welcome to Ironmount" description="Create the admin user to get started">
+			<Form {...form}>
+				<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+					<FormField
+						control={form.control}
+						name="username"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Username</FormLabel>
+								<FormControl>
+									<Input {...field} type="text" placeholder="admin" disabled={registerUser.isPending} autoFocus />
+								</FormControl>
+								<FormDescription>Choose a username for the admin account</FormDescription>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+					<FormField
+						control={form.control}
+						name="password"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Password</FormLabel>
+								<FormControl>
+									<Input
+										{...field}
+										type="password"
+										placeholder="Enter a secure password"
+										disabled={registerUser.isPending}
+									/>
+								</FormControl>
+								<FormDescription>Password must be at least 8 characters long.</FormDescription>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+					<FormField
+						control={form.control}
+						name="confirmPassword"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Confirm Password</FormLabel>
+								<FormControl>
+									<Input
+										{...field}
+										type="password"
+										placeholder="Re-enter your password"
+										disabled={registerUser.isPending}
+									/>
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+					<Button type="submit" className="w-full" loading={registerUser.isPending}>
+						Create Admin User
+					</Button>
+				</form>
+			</Form>
+		</AuthLayout>
+	);
+}

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

@@ -0,0 +1,100 @@
+import { useEffect, useState } from "react";
+import { ByteSize, formatBytes } from "~/client/components/bytes-size";
+import { Card } from "~/client/components/ui/card";
+import { Progress } from "~/client/components/ui/progress";
+import { type BackupProgressEvent, useServerEvents } from "~/client/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 (
+			<Card className="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="font-medium">Backup in progress</span>
+				</div>
+			</Card>
+		);
+	}
+
+	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>
+	);
+};

app/client/modules/backups/components/backup-status-dot.tsx

@@ -0,0 +1,71 @@
+import { cn } from "~/client/lib/utils";
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/client/components/ui/tooltip";
+
+type BackupStatus = "active" | "paused" | "error" | "in_progress";
+
+export const BackupStatusDot = ({
+	enabled,
+	hasError,
+	isInProgress,
+}: {
+	enabled: boolean;
+	hasError?: boolean;
+	isInProgress?: boolean;
+}) => {
+	let status: BackupStatus = "paused";
+	if (isInProgress) {
+		status = "in_progress";
+	} else if (hasError) {
+		status = "error";
+	} else if (enabled) {
+		status = "active";
+	}
+
+	const statusMapping = {
+		active: {
+			color: "bg-green-500",
+			colorLight: "bg-emerald-400",
+			animated: true,
+			label: "Active",
+		},
+		paused: {
+			color: "bg-gray-500",
+			colorLight: "bg-gray-400",
+			animated: false,
+			label: "Paused",
+		},
+		error: {
+			color: "bg-red-500",
+			colorLight: "bg-red-400",
+			animated: true,
+			label: "Error",
+		},
+		in_progress: {
+			color: "bg-blue-500",
+			colorLight: "bg-blue-400",
+			animated: true,
+			label: "Backup in progress",
+		},
+	}[status];
+
+	return (
+		<Tooltip>
+			<TooltipTrigger>
+				<span className="relative flex size-3 mx-auto">
+					{statusMapping.animated && (
+						<span
+							className={cn(
+								"absolute inline-flex h-full w-full animate-ping rounded-full opacity-75",
+								`${statusMapping.colorLight}`,
+							)}
+						/>
+					)}
+					<span className={cn("relative inline-flex size-3 rounded-full", `${statusMapping.color}`)} />
+				</span>
+			</TooltipTrigger>
+			<TooltipContent>
+				<p>{statusMapping.label}</p>
+			</TooltipContent>
+		</Tooltip>
+	);
+};

app/client/modules/backups/components/create-schedule-form.tsx

@@ -0,0 +1,530 @@
+import { arktypeResolver } from "@hookform/resolvers/arktype";
+import { useQuery } from "@tanstack/react-query";
+import { type } from "arktype";
+import { useCallback, useState } from "react";
+import { useForm } from "react-hook-form";
+import { listRepositoriesOptions } from "~/client/api-client/@tanstack/react-query.gen";
+import { RepositoryIcon } from "~/client/components/repository-icon";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "~/client/components/ui/form";
+import { Input } from "~/client/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
+import { Textarea } from "~/client/components/ui/textarea";
+import { VolumeFileBrowser } from "~/client/components/volume-file-browser";
+import type { BackupSchedule, Volume } from "~/client/lib/types";
+import { deepClean } from "~/utils/object";
+
+const internalFormSchema = type({
+	repositoryId: "string",
+	excludePatternsText: "string?",
+	includePatterns: "string[]?",
+	frequency: "string",
+	dailyTime: "string?",
+	weeklyDay: "string?",
+	keepLast: "number?",
+	keepHourly: "number?",
+	keepDaily: "number?",
+	keepWeekly: "number?",
+	keepMonthly: "number?",
+	keepYearly: "number?",
+});
+const cleanSchema = type.pipe((d) => internalFormSchema(deepClean(d)));
+
+export const weeklyDays = [
+	{ label: "Monday", value: "1" },
+	{ label: "Tuesday", value: "2" },
+	{ label: "Wednesday", value: "3" },
+	{ label: "Thursday", value: "4" },
+	{ label: "Friday", value: "5" },
+	{ label: "Saturday", value: "6" },
+	{ label: "Sunday", value: "0" },
+];
+
+type InternalFormValues = typeof internalFormSchema.infer;
+
+export type BackupScheduleFormValues = Omit<InternalFormValues, "excludePatternsText"> & {
+	excludePatterns?: string[];
+};
+
+type Props = {
+	volume: Volume;
+	initialValues?: BackupSchedule;
+	onSubmit: (data: BackupScheduleFormValues) => void;
+	loading?: boolean;
+	summaryContent?: React.ReactNode;
+	formId: string;
+};
+
+const backupScheduleToFormValues = (schedule?: BackupSchedule): InternalFormValues | undefined => {
+	if (!schedule) {
+		return undefined;
+	}
+
+	const parts = schedule.cronExpression.split(" ");
+	const [minutePart, hourPart, , , dayOfWeekPart] = parts;
+
+	const isHourly = hourPart === "*";
+	const isDaily = !isHourly && dayOfWeekPart === "*";
+	const frequency = isHourly ? "hourly" : isDaily ? "daily" : "weekly";
+
+	const dailyTime = isHourly ? undefined : `${hourPart.padStart(2, "0")}:${minutePart.padStart(2, "0")}`;
+
+	const weeklyDay = frequency === "weekly" ? dayOfWeekPart : undefined;
+
+	return {
+		repositoryId: schedule.repositoryId,
+		frequency,
+		dailyTime,
+		weeklyDay,
+		includePatterns: schedule.includePatterns || undefined,
+		excludePatternsText: schedule.excludePatterns?.join("\n") || undefined,
+		...schedule.retentionPolicy,
+	};
+};
+
+export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }: Props) => {
+	const form = useForm<InternalFormValues>({
+		resolver: arktypeResolver(cleanSchema as unknown as typeof internalFormSchema),
+		defaultValues: backupScheduleToFormValues(initialValues),
+	});
+
+	const handleSubmit = useCallback(
+		(data: InternalFormValues) => {
+			// Convert excludePatternsText string to excludePatterns array
+			const { excludePatternsText, ...rest } = data;
+			const excludePatterns = excludePatternsText
+				? excludePatternsText
+						.split("\n")
+						.map((p) => p.trim())
+						.filter(Boolean)
+				: undefined;
+
+			onSubmit({
+				...rest,
+				excludePatterns,
+			});
+		},
+		[onSubmit],
+	);
+
+	const { data: repositoriesData } = useQuery({
+		...listRepositoriesOptions(),
+	});
+
+	const frequency = form.watch("frequency");
+	const formValues = form.watch();
+
+	const [selectedPaths, setSelectedPaths] = useState<Set<string>>(new Set(initialValues?.includePatterns || []));
+
+	const handleSelectionChange = useCallback(
+		(paths: Set<string>) => {
+			setSelectedPaths(paths);
+			form.setValue("includePatterns", Array.from(paths));
+		},
+		[form],
+	);
+
+	return (
+		<Form {...form}>
+			<form
+				onSubmit={form.handleSubmit(handleSubmit)}
+				className="grid gap-4 xl:grid-cols-[minmax(0,2.3fr)_minmax(320px,1fr)]"
+				id={formId}
+			>
+				<div className="grid gap-4">
+					<Card>
+						<CardHeader>
+							<CardTitle>Backup automation</CardTitle>
+							<CardDescription className="mt-1">
+								Schedule automated backups of <strong>{volume.name}</strong> to a secure repository.
+							</CardDescription>
+						</CardHeader>
+						<CardContent className="grid gap-6 md:grid-cols-2">
+							<FormField
+								control={form.control}
+								name="repositoryId"
+								render={({ field }) => (
+									<FormItem className="md:col-span-2">
+										<FormLabel>Backup repository</FormLabel>
+										<FormControl>
+											<Select {...field} onValueChange={field.onChange}>
+												<SelectTrigger>
+													<SelectValue placeholder="Select a repository" />
+												</SelectTrigger>
+												<SelectContent>
+													{repositoriesData?.map((repo) => (
+														<SelectItem key={repo.id} value={repo.id}>
+															<span className="flex items-center gap-2">
+																<RepositoryIcon backend={repo.type} />
+																{repo.name}
+															</span>
+														</SelectItem>
+													))}
+												</SelectContent>
+											</Select>
+										</FormControl>
+										<FormDescription>
+											Choose where encrypted backups for <strong>{volume.name}</strong> will be stored.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="frequency"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Backup frequency</FormLabel>
+										<FormControl>
+											<Select {...field} onValueChange={field.onChange}>
+												<SelectTrigger>
+													<SelectValue placeholder="Select frequency" />
+												</SelectTrigger>
+												<SelectContent>
+													<SelectItem value="hourly">Hourly</SelectItem>
+													<SelectItem value="daily">Daily</SelectItem>
+													<SelectItem value="weekly">Weekly</SelectItem>
+												</SelectContent>
+											</Select>
+										</FormControl>
+										<FormDescription>Define how often snapshots should be taken.</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							{frequency !== "hourly" && (
+								<FormField
+									control={form.control}
+									name="dailyTime"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Execution time</FormLabel>
+											<FormControl>
+												<Input type="time" {...field} />
+											</FormControl>
+											<FormDescription>Time of day when the backup will run.</FormDescription>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							)}
+
+							{frequency === "weekly" && (
+								<FormField
+									control={form.control}
+									name="weeklyDay"
+									render={({ field }) => (
+										<FormItem className="md:col-span-2">
+											<FormLabel>Execution day</FormLabel>
+											<FormControl>
+												<Select {...field} onValueChange={field.onChange}>
+													<SelectTrigger>
+														<SelectValue placeholder="Select a day" />
+													</SelectTrigger>
+													<SelectContent>
+														{weeklyDays.map((day) => (
+															<SelectItem key={day.value} value={day.value}>
+																{day.label}
+															</SelectItem>
+														))}
+													</SelectContent>
+												</Select>
+											</FormControl>
+											<FormDescription>Choose which day of the week to run the backup.</FormDescription>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							)}
+						</CardContent>
+					</Card>
+
+					<Card>
+						<CardHeader>
+							<CardTitle>Backup paths</CardTitle>
+							<CardDescription>
+								Select which folders to include in the backup. If no paths are selected, the entire volume will be
+								backed up.
+							</CardDescription>
+						</CardHeader>
+						<CardContent>
+							<VolumeFileBrowser
+								volumeName={volume.name}
+								selectedPaths={selectedPaths}
+								onSelectionChange={handleSelectionChange}
+								withCheckboxes={true}
+								foldersOnly={true}
+								className="flex-1 border rounded-md bg-card p-2 min-h-[300px] max-h-[400px] overflow-auto"
+							/>
+							{selectedPaths.size > 0 && (
+								<div className="mt-4">
+									<p className="text-xs text-muted-foreground mb-2">Selected paths:</p>
+									<div className="flex flex-wrap gap-2">
+										{Array.from(selectedPaths).map((path) => (
+											<span key={path} className="text-xs bg-accent px-2 py-1 rounded-md font-mono">
+												{path}
+											</span>
+										))}
+									</div>
+								</div>
+							)}
+						</CardContent>
+					</Card>
+
+					<Card>
+						<CardHeader>
+							<CardTitle>Exclude patterns</CardTitle>
+							<CardDescription>
+								Optionally specify patterns to exclude from backups. Enter one pattern per line (e.g., *.tmp,
+								node_modules/**, .cache/).
+							</CardDescription>
+						</CardHeader>
+						<CardContent>
+							<FormField
+								control={form.control}
+								name="excludePatternsText"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Exclusion patterns</FormLabel>
+										<FormControl>
+											<Textarea
+												{...field}
+												placeholder="*.tmp&#10;node_modules/**&#10;.cache/&#10;*.log"
+												className="font-mono text-sm min-h-[120px]"
+											/>
+										</FormControl>
+										<FormDescription>
+											Patterns support glob syntax. See&nbsp;
+											<a
+												href="https://restic.readthedocs.io/en/stable/040_backup.html#excluding-files"
+												target="_blank"
+												rel="noopener noreferrer"
+												className="underline hover:text-foreground"
+											>
+												Restic documentation
+											</a>
+											&nbsp;for more details.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</CardContent>
+					</Card>
+
+					<Card>
+						<CardHeader>
+							<CardTitle>Retention policy</CardTitle>
+							<CardDescription>Define how many snapshots to keep. Leave empty to keep all.</CardDescription>
+						</CardHeader>
+						<CardContent className="grid gap-4 md:grid-cols-2">
+							<FormField
+								control={form.control}
+								name="keepLast"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Keep last N snapshots</FormLabel>
+										<FormControl>
+											<Input
+												{...field}
+												type="number"
+												min={0}
+												placeholder="Optional"
+												onChange={(v) => field.onChange(Number(v.target.value))}
+											/>
+										</FormControl>
+										<FormDescription>Keep the N most recent snapshots.</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="keepHourly"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Keep hourly</FormLabel>
+										<FormControl>
+											<Input
+												type="number"
+												min={0}
+												placeholder="Optional"
+												{...field}
+												onChange={(v) => field.onChange(Number(v.target.value))}
+											/>
+										</FormControl>
+										<FormDescription>Keep the last N hourly snapshots.</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="keepDaily"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Keep daily</FormLabel>
+										<FormControl>
+											<Input
+												type="number"
+												min={0}
+												placeholder="e.g., 7"
+												{...field}
+												onChange={(v) => field.onChange(Number(v.target.value))}
+											/>
+										</FormControl>
+										<FormDescription>Keep the last N daily snapshots.</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="keepWeekly"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Keep weekly</FormLabel>
+										<FormControl>
+											<Input
+												type="number"
+												min={0}
+												placeholder="e.g., 4"
+												{...field}
+												onChange={(v) => field.onChange(Number(v.target.value))}
+											/>
+										</FormControl>
+										<FormDescription>Keep the last N weekly snapshots.</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="keepMonthly"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Keep monthly</FormLabel>
+										<FormControl>
+											<Input
+												type="number"
+												min={0}
+												placeholder="e.g., 6"
+												{...field}
+												onChange={(v) => field.onChange(Number(v.target.value))}
+											/>
+										</FormControl>
+										<FormDescription>Keep the last N monthly snapshots.</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="keepYearly"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Keep yearly</FormLabel>
+										<FormControl>
+											<Input
+												type="number"
+												min={0}
+												placeholder="Optional"
+												{...field}
+												onChange={(v) => field.onChange(Number(v.target.value))}
+											/>
+										</FormControl>
+										<FormDescription>Keep the last N yearly snapshots.</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</CardContent>
+					</Card>
+				</div>
+				<div className="h-full">
+					<Card className="h-full">
+						<CardHeader className="flex flex-row items-center justify-between gap-4">
+							<div>
+								<CardTitle>Schedule summary</CardTitle>
+								<CardDescription>Review the backup configuration.</CardDescription>
+							</div>
+						</CardHeader>
+						<CardContent className="flex flex-col gap-4 text-sm">
+							<div>
+								<p className="text-xs uppercase text-muted-foreground">Volume</p>
+								<p className="font-medium">{volume.name}</p>
+							</div>
+							<div>
+								<p className="text-xs uppercase text-muted-foreground">Schedule</p>
+								<p className="font-medium">
+									{frequency ? frequency.charAt(0).toUpperCase() + frequency.slice(1) : "-"}
+								</p>
+							</div>
+							<div>
+								<p className="text-xs uppercase text-muted-foreground">Repository</p>
+								<p className="font-medium">
+									{repositoriesData?.find((r) => r.id === formValues.repositoryId)?.name || "—"}
+								</p>
+							</div>
+							{formValues.includePatterns && formValues.includePatterns.length > 0 && (
+								<div>
+									<p className="text-xs uppercase text-muted-foreground">Include paths</p>
+									<div className="flex flex-col gap-1">
+										{formValues.includePatterns.map((path) => (
+											<span key={path} className="text-xs font-mono bg-accent px-1.5 py-0.5 rounded">
+												{path}
+											</span>
+										))}
+									</div>
+								</div>
+							)}
+							{formValues.excludePatternsText && (
+								<div>
+									<p className="text-xs uppercase text-muted-foreground">Exclude patterns</p>
+									<div className="flex flex-col gap-1">
+										{formValues.excludePatternsText
+											.split("\n")
+											.filter(Boolean)
+											.map((pattern) => (
+												<span key={pattern} className="text-xs font-mono bg-accent px-1.5 py-0.5 rounded">
+													{pattern.trim()}
+												</span>
+											))}
+									</div>
+								</div>
+							)}
+							<div>
+								<p className="text-xs uppercase text-muted-foreground">Retention</p>
+								<p className="font-medium">
+									{Object.entries(formValues)
+										.filter(([key, value]) => key.startsWith("keep") && Boolean(value))
+										.map(([key, value]) => {
+											const label = key.replace("keep", "").toLowerCase();
+											return `${value} ${label}`;
+										})
+										.join(", ") || "-"}
+								</p>
+							</div>
+						</CardContent>
+					</Card>
+				</div>
+			</form>
+		</Form>
+	);
+};

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

@@ -0,0 +1,172 @@
+import { Pencil, Play, Square, Trash2 } from "lucide-react";
+import { useMemo, useState } from "react";
+import { OnOff } from "~/client/components/onoff";
+import { Button } from "~/client/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "~/client/components/ui/alert-dialog";
+import type { BackupSchedule } from "~/client/lib/types";
+import { BackupProgressCard } from "./backup-progress-card";
+
+type Props = {
+	schedule: BackupSchedule;
+	handleToggleEnabled: (enabled: boolean) => void;
+	handleRunBackupNow: () => void;
+	handleStopBackup: () => void;
+	handleDeleteSchedule: () => void;
+	setIsEditMode: (isEdit: boolean) => void;
+};
+
+export const ScheduleSummary = (props: Props) => {
+	const { schedule, handleToggleEnabled, handleRunBackupNow, handleStopBackup, handleDeleteSchedule, setIsEditMode } =
+		props;
+	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
+	const summary = useMemo(() => {
+		const scheduleLabel = schedule ? schedule.cronExpression : "-";
+
+		const retentionParts: string[] = [];
+		if (schedule?.retentionPolicy) {
+			const rp = schedule.retentionPolicy;
+			if (rp.keepLast) retentionParts.push(`${rp.keepLast} last`);
+			if (rp.keepHourly) retentionParts.push(`${rp.keepHourly} hourly`);
+			if (rp.keepDaily) retentionParts.push(`${rp.keepDaily} daily`);
+			if (rp.keepWeekly) retentionParts.push(`${rp.keepWeekly} weekly`);
+			if (rp.keepMonthly) retentionParts.push(`${rp.keepMonthly} monthly`);
+			if (rp.keepYearly) retentionParts.push(`${rp.keepYearly} yearly`);
+		}
+
+		return {
+			vol: schedule.volume.name,
+			scheduleLabel,
+			repositoryLabel: schedule.repositoryId || "No repository selected",
+			retentionLabel: retentionParts.length > 0 ? retentionParts.join(" • ") : "No retention policy",
+		};
+	}, [schedule, schedule.volume.name]);
+
+	const handleConfirmDelete = () => {
+		setShowDeleteConfirm(false);
+		handleDeleteSchedule();
+	};
+
+	return (
+		<div className="space-y-4">
+			<Card>
+				<CardHeader className="space-y-4">
+					<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+						<div>
+							<CardTitle>Backup schedule</CardTitle>
+							<CardDescription>
+								Automated backup configuration for volume&nbsp;
+								<strong className="text-strong-accent">{schedule.volume.name}</strong>
+							</CardDescription>
+						</div>
+						<div className="flex items-center gap-2 justify-between sm:justify-start">
+							<OnOff
+								isOn={schedule.enabled}
+								toggle={handleToggleEnabled}
+								enabledLabel="Enabled"
+								disabledLabel="Paused"
+							/>
+						</div>
+					</div>
+					<div className="flex flex-col sm:flex-row gap-2">
+						{schedule.lastBackupStatus === "in_progress" ? (
+							<Button variant="destructive" size="sm" onClick={handleStopBackup} className="w-full sm:w-auto">
+								<Square className="h-4 w-4 mr-2" />
+								<span className="sm:inline">Stop backup</span>
+							</Button>
+						) : (
+							<Button variant="default" size="sm" onClick={handleRunBackupNow} className="w-full sm:w-auto">
+								<Play className="h-4 w-4 mr-2" />
+								<span className="sm:inline">Backup now</span>
+							</Button>
+						)}
+						<Button variant="outline" size="sm" onClick={() => setIsEditMode(true)} className="w-full sm:w-auto">
+							<Pencil className="h-4 w-4 mr-2" />
+							<span className="sm:inline">Edit schedule</span>
+						</Button>
+						<Button
+							variant="outline"
+							size="sm"
+							onClick={() => setShowDeleteConfirm(true)}
+							className="text-destructive hover:text-destructive w-full sm:w-auto"
+						>
+							<Trash2 className="h-4 w-4 mr-2" />
+							<span className="sm:inline">Delete</span>
+						</Button>
+					</div>
+				</CardHeader>
+				<CardContent className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+					<div>
+						<p className="text-xs uppercase text-muted-foreground">Schedule</p>
+						<p className="font-medium">{summary.scheduleLabel}</p>
+					</div>
+					<div>
+						<p className="text-xs uppercase text-muted-foreground">Repository</p>
+						<p className="font-medium">{schedule.repository.name}</p>
+					</div>
+					<div>
+						<p className="text-xs uppercase text-muted-foreground">Last backup</p>
+						<p className="font-medium">
+							{schedule.lastBackupAt ? new Date(schedule.lastBackupAt).toLocaleString() : "Never"}
+						</p>
+					</div>
+					<div>
+						<p className="text-xs uppercase text-muted-foreground">Next backup</p>
+						<p className="font-medium">
+							{schedule.nextBackupAt ? new Date(schedule.nextBackupAt).toLocaleString() : "Never"}
+						</p>
+					</div>
+
+					<div>
+						<p className="text-xs uppercase text-muted-foreground">Status</p>
+						<p className="font-medium">
+							{schedule.lastBackupStatus === "success" && "✓ Success"}
+							{schedule.lastBackupStatus === "error" && "✗ Error"}
+							{schedule.lastBackupStatus === "in_progress" && "⟳  in progress..."}
+							{!schedule.lastBackupStatus && "—"}
+						</p>
+					</div>
+
+					{schedule.lastBackupError && (
+						<div className="md:col-span-2 lg:col-span-4">
+							<p className="text-xs uppercase text-muted-foreground">Error Details</p>
+							<p className="font-mono text-sm text-red-600 whitespace-pre-wrap break-all">{schedule.lastBackupError}</p>
+						</div>
+					)}
+				</CardContent>
+			</Card>
+
+			{schedule.lastBackupStatus === "in_progress" && <BackupProgressCard scheduleId={schedule.id} />}
+
+			<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Delete backup schedule?</AlertDialogTitle>
+						<AlertDialogDescription>
+							Are you sure you want to delete this backup schedule for <strong>{schedule.volume.name}</strong>? This
+							action cannot be undone. Existing snapshots will not be deleted.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<div className="flex gap-3 justify-end">
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={handleConfirmDelete}
+							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							Delete schedule
+						</AlertDialogAction>
+					</div>
+				</AlertDialogContent>
+			</AlertDialog>
+		</div>
+	);
+};

app/client/modules/backups/components/snapshot-file-browser.tsx

@@ -0,0 +1,288 @@
+import { useCallback, useMemo, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { FileIcon } from "lucide-react";
+import { FileTree, type FileEntry } from "~/client/components/file-tree";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
+import { Button } from "~/client/components/ui/button";
+import { Checkbox } from "~/client/components/ui/checkbox";
+import { Label } from "~/client/components/ui/label";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "~/client/components/ui/alert-dialog";
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/client/components/ui/tooltip";
+import type { Snapshot, Volume } from "~/client/lib/types";
+import { toast } from "sonner";
+import { listSnapshotFilesOptions, restoreSnapshotMutation } from "~/client/api-client/@tanstack/react-query.gen";
+
+interface Props {
+	snapshot: Snapshot;
+	repositoryName: string;
+	volume?: Volume;
+}
+
+export const SnapshotFileBrowser = (props: Props) => {
+	const { snapshot, repositoryName, volume } = props;
+
+	const isReadOnly = volume?.config && "readOnly" in volume.config && volume.config.readOnly === true;
+
+	const queryClient = useQueryClient();
+	const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
+	const [fetchedFolders, setFetchedFolders] = useState<Set<string>>(new Set());
+	const [loadingFolders, setLoadingFolders] = useState<Set<string>>(new Set());
+	const [allFiles, setAllFiles] = useState<Map<string, FileEntry>>(new Map());
+	const [selectedPaths, setSelectedPaths] = useState<Set<string>>(new Set());
+	const [showRestoreDialog, setShowRestoreDialog] = useState(false);
+	const [deleteExtraFiles, setDeleteExtraFiles] = useState(false);
+
+	const volumeBasePath = snapshot.paths[0]?.match(/^(.*?_data)(\/|$)/)?.[1] || "/";
+
+	const { data: filesData, isLoading: filesLoading } = useQuery({
+		...listSnapshotFilesOptions({
+			path: { name: repositoryName, snapshotId: snapshot.short_id },
+			query: { path: volumeBasePath },
+		}),
+	});
+
+	const stripBasePath = useCallback(
+		(path: string): string => {
+			if (!volumeBasePath) return path;
+			if (path === volumeBasePath) return "/";
+			if (path.startsWith(`${volumeBasePath}/`)) {
+				const stripped = path.slice(volumeBasePath.length);
+				return stripped;
+			}
+			return path;
+		},
+		[volumeBasePath],
+	);
+
+	const addBasePath = useCallback(
+		(displayPath: string): string => {
+			if (!volumeBasePath) return displayPath;
+			if (displayPath === "/") return volumeBasePath;
+			return `${volumeBasePath}${displayPath}`;
+		},
+		[volumeBasePath],
+	);
+
+	useMemo(() => {
+		if (filesData?.files) {
+			setAllFiles((prev) => {
+				const next = new Map(prev);
+				for (const file of filesData.files) {
+					const strippedPath = stripBasePath(file.path);
+					if (strippedPath !== "/") {
+						next.set(strippedPath, { ...file, path: strippedPath });
+					}
+				}
+				return next;
+			});
+			setFetchedFolders((prev) => new Set(prev).add("/"));
+		}
+	}, [filesData, stripBasePath]);
+
+	const fileArray = useMemo(() => Array.from(allFiles.values()), [allFiles]);
+
+	const handleFolderExpand = useCallback(
+		async (folderPath: string) => {
+			setExpandedFolders((prev) => {
+				const next = new Set(prev);
+				next.add(folderPath);
+				return next;
+			});
+
+			if (!fetchedFolders.has(folderPath)) {
+				setLoadingFolders((prev) => new Set(prev).add(folderPath));
+
+				try {
+					const fullPath = addBasePath(folderPath);
+
+					const result = await queryClient.ensureQueryData(
+						listSnapshotFilesOptions({
+							path: { name: repositoryName, snapshotId: snapshot.short_id },
+							query: { path: fullPath },
+						}),
+					);
+
+					if (result.files) {
+						setAllFiles((prev) => {
+							const next = new Map(prev);
+							for (const file of result.files) {
+								const strippedPath = stripBasePath(file.path);
+								// Skip the directory itself
+								if (strippedPath !== folderPath) {
+									next.set(strippedPath, { ...file, path: strippedPath });
+								}
+							}
+							return next;
+						});
+
+						setFetchedFolders((prev) => new Set(prev).add(folderPath));
+					}
+				} catch (error) {
+					console.error("Failed to fetch folder contents:", error);
+				} finally {
+					setLoadingFolders((prev) => {
+						const next = new Set(prev);
+						next.delete(folderPath);
+						return next;
+					});
+				}
+			}
+		},
+		[repositoryName, snapshot, fetchedFolders, queryClient, stripBasePath, addBasePath],
+	);
+
+	const handleFolderHover = useCallback(
+		(folderPath: string) => {
+			if (!fetchedFolders.has(folderPath) && !loadingFolders.has(folderPath)) {
+				const fullPath = addBasePath(folderPath);
+
+				queryClient.prefetchQuery({
+					...listSnapshotFilesOptions({
+						path: { name: repositoryName, snapshotId: snapshot.short_id },
+						query: { path: fullPath },
+					}),
+				});
+			}
+		},
+		[repositoryName, snapshot, fetchedFolders, loadingFolders, queryClient, addBasePath],
+	);
+
+	const { mutate: restoreSnapshot, isPending: isRestoring } = useMutation({
+		...restoreSnapshotMutation(),
+		onSuccess: (data) => {
+			toast.success("Restore completed", {
+				description: `Successfully restored ${data.filesRestored} file(s). ${data.filesSkipped} file(s) skipped.`,
+			});
+			setSelectedPaths(new Set());
+		},
+		onError: (error) => {
+			toast.error("Restore failed", { description: error.message || "Failed to restore snapshot" });
+		},
+	});
+
+	const handleRestoreClick = useCallback(() => {
+		setShowRestoreDialog(true);
+	}, []);
+
+	const handleConfirmRestore = useCallback(() => {
+		const pathsArray = Array.from(selectedPaths);
+		const includePaths = pathsArray.map((path) => addBasePath(path));
+
+		restoreSnapshot({
+			path: { name: repositoryName },
+			body: {
+				snapshotId: snapshot.short_id,
+				include: includePaths,
+				delete: deleteExtraFiles,
+			},
+		});
+
+		setShowRestoreDialog(false);
+	}, [selectedPaths, addBasePath, repositoryName, snapshot.short_id, restoreSnapshot, deleteExtraFiles]);
+
+	return (
+		<div className="space-y-4">
+			<Card className="h-[600px] flex flex-col">
+				<CardHeader>
+					<div className="flex items-start justify-between">
+						<div>
+							<CardTitle>File Browser</CardTitle>
+							<CardDescription>{`Viewing snapshot from ${new Date(snapshot?.time ?? 0).toLocaleString()}`}</CardDescription>
+						</div>
+						{selectedPaths.size > 0 && (
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<span tabIndex={isReadOnly ? 0 : undefined}>
+										<Button
+											onClick={handleRestoreClick}
+											variant="primary"
+											size="sm"
+											disabled={isRestoring || isReadOnly}
+										>
+											{isRestoring
+												? "Restoring..."
+												: `Restore ${selectedPaths.size} selected ${selectedPaths.size === 1 ? "item" : "items"}`}
+										</Button>
+									</span>
+								</TooltipTrigger>
+								{isReadOnly && (
+									<TooltipContent className="text-center">
+										<p>Volume is mounted as read-only.</p>
+										<p>Please remount with read-only disabled to restore files.</p>
+									</TooltipContent>
+								)}
+							</Tooltip>
+						)}
+					</div>
+				</CardHeader>
+				<CardContent className="flex-1 overflow-hidden flex flex-col p-0">
+					{filesLoading && fileArray.length === 0 && (
+						<div className="flex items-center justify-center flex-1">
+							<p className="text-muted-foreground">Loading files...</p>
+						</div>
+					)}
+
+					{fileArray.length === 0 && !filesLoading && (
+						<div className="flex flex-col items-center justify-center flex-1 text-center p-8">
+							<FileIcon className="w-12 h-12 text-muted-foreground/50 mb-4" />
+							<p className="text-muted-foreground">No files in this snapshot</p>
+						</div>
+					)}
+
+					{fileArray.length > 0 && (
+						<div className="overflow-auto flex-1 border border-border rounded-md bg-card m-4">
+							<FileTree
+								files={fileArray}
+								onFolderExpand={handleFolderExpand}
+								onFolderHover={handleFolderHover}
+								expandedFolders={expandedFolders}
+								loadingFolders={loadingFolders}
+								className="px-2 py-2"
+								withCheckboxes={true}
+								selectedPaths={selectedPaths}
+								onSelectionChange={setSelectedPaths}
+							/>
+						</div>
+					)}
+				</CardContent>
+			</Card>
+
+			<AlertDialog open={showRestoreDialog} onOpenChange={setShowRestoreDialog}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Confirm Restore</AlertDialogTitle>
+						<AlertDialogDescription>
+							{selectedPaths.size > 0
+								? `This will restore ${selectedPaths.size} selected ${selectedPaths.size === 1 ? "item" : "items"} from the snapshot.`
+								: "This will restore everything from the snapshot."}{" "}
+							Existing files will be overwritten by what's in the snapshot. This action cannot be undone.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<div className="flex items-center space-x-2 py-4">
+						<Checkbox
+							id="delete-extra"
+							checked={deleteExtraFiles}
+							onCheckedChange={(checked) => setDeleteExtraFiles(checked === true)}
+						/>
+						<Label htmlFor="delete-extra" className="text-sm font-normal cursor-pointer">
+							Delete files not present in the snapshot?
+						</Label>
+					</div>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction onClick={handleConfirmRestore}>Confirm</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</div>
+	);
+};

app/client/modules/backups/components/snapshot-timeline.tsx

@@ -0,0 +1,108 @@
+import { cn } from "~/client/lib/utils";
+import { Card } from "~/client/components/ui/card";
+import { ByteSize } from "~/client/components/bytes-size";
+import { useEffect } from "react";
+import type { ListSnapshotsResponse } from "~/client/api-client";
+
+interface Props {
+	snapshots: ListSnapshotsResponse;
+	snapshotId?: string;
+	loading?: boolean;
+	error?: string;
+	onSnapshotSelect: (snapshotId: string) => void;
+}
+
+export const SnapshotTimeline = (props: Props) => {
+	const { snapshots, snapshotId, loading, onSnapshotSelect, error } = props;
+
+	useEffect(() => {
+		if (!snapshotId && snapshots.length > 0) {
+			onSnapshotSelect(snapshots[snapshots.length - 1].short_id);
+		}
+	}, [snapshotId, snapshots, onSnapshotSelect]);
+
+	if (error) {
+		return (
+			<Card>
+				<div className="flex items-center justify-center h-24 p-4 text-center">
+					<p className="text-destructive">Error loading snapshots: {error}</p>
+				</div>
+			</Card>
+		);
+	}
+
+	if (loading) {
+		return (
+			<Card>
+				<div className="flex items-center justify-center h-24">
+					<p className="text-muted-foreground">Loading snapshots...</p>
+				</div>
+			</Card>
+		);
+	}
+
+	if (snapshots.length === 0) {
+		return (
+			<Card>
+				<div className="flex items-center justify-center h-24">
+					<p className="text-muted-foreground">No snapshots available</p>
+				</div>
+			</Card>
+		);
+	}
+
+	return (
+		<Card className="p-0 pt-2">
+			<div className="w-full bg-card">
+				<div className="relative flex items-center">
+					<div className="flex-1 overflow-hidden">
+						<div className="flex gap-4 overflow-x-auto pb-2 *:first:ml-2 *:last:mr-2">
+							{snapshots.map((snapshot, index) => {
+								const date = new Date(snapshot.time);
+								const isSelected = snapshotId === snapshot.short_id;
+								const isLatest = index === snapshots.length - 1;
+
+								return (
+									<button
+										type="button"
+										key={snapshot.short_id}
+										onClick={() => onSnapshotSelect(snapshot.short_id)}
+										className={cn(
+											"shrink-0 flex flex-col items-center gap-2 p-3 rounded-lg transition-all",
+											"border-2 cursor-pointer",
+											{
+												"border-primary bg-primary/10 shadow-md": isSelected,
+												"border-border hover:border-accent hover:bg-accent/5": !isSelected,
+											},
+										)}
+									>
+										<div className="text-xs font-semibold text-foreground">
+											{date.toLocaleDateString("en-US", { month: "short", day: "numeric" })}
+										</div>
+										<div className="text-xs text-muted-foreground">
+											{date.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" })}
+										</div>
+										<div className="text-xs text-muted-foreground opacity-75">
+											<ByteSize bytes={snapshot.size} />
+										</div>
+										{isLatest && (
+											<div className="text-xs font-semibold text-primary px-2 py-0.5 bg-primary/20 rounded">Latest</div>
+										)}
+									</button>
+								);
+							})}
+						</div>
+					</div>
+				</div>
+
+				<div className="px-4 py-2 text-xs text-muted-foreground bg-card-header border-t border-border flex justify-between">
+					<span>{snapshots.length} snapshots</span>
+					<span>
+						{new Date(snapshots[0].time).toLocaleDateString()} -{" "}
+						{new Date(snapshots.at(-1)?.time ?? 0).toLocaleDateString()}
+					</span>
+				</div>
+			</div>
+		</Card>
+	);
+};

app/client/modules/backups/routes/backup-details.tsx

@@ -0,0 +1,191 @@
+import { useId, useState } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { redirect, useNavigate } from "react-router";
+import { toast } from "sonner";
+import { Button } from "~/client/components/ui/button";
+import {
+	getBackupScheduleOptions,
+	runBackupNowMutation,
+	deleteBackupScheduleMutation,
+	listSnapshotsOptions,
+	updateBackupScheduleMutation,
+	stopBackupMutation,
+} from "~/client/api-client/@tanstack/react-query.gen";
+import { parseError } from "~/client/lib/errors";
+import { getCronExpression } from "~/utils/utils";
+import { CreateScheduleForm, type BackupScheduleFormValues } from "../components/create-schedule-form";
+import { ScheduleSummary } from "../components/schedule-summary";
+import type { Route } from "./+types/backup-details";
+import { SnapshotFileBrowser } from "../components/snapshot-file-browser";
+import { SnapshotTimeline } from "../components/snapshot-timeline";
+import { getBackupSchedule } from "~/client/api-client";
+
+export function meta(_: Route.MetaArgs) {
+	return [
+		{ title: "Backup Job Details" },
+		{
+			name: "description",
+			content: "View and manage backup job configuration, schedule, and snapshots.",
+		},
+	];
+}
+
+export const clientLoader = async ({ params }: Route.LoaderArgs) => {
+	const { data } = await getBackupSchedule({ path: { scheduleId: params.id } });
+
+	if (!data) return redirect("/backups");
+
+	return data;
+};
+
+export default function ScheduleDetailsPage({ params, loaderData }: Route.ComponentProps) {
+	const navigate = useNavigate();
+	const [isEditMode, setIsEditMode] = useState(false);
+	const formId = useId();
+	const [selectedSnapshotId, setSelectedSnapshotId] = useState<string>();
+
+	const { data: schedule } = useQuery({
+		...getBackupScheduleOptions({ path: { scheduleId: params.id } }),
+		initialData: loaderData,
+		refetchInterval: 10000,
+		refetchOnWindowFocus: true,
+	});
+
+	const {
+		data: snapshots,
+		isLoading,
+		failureReason,
+	} = useQuery({
+		...listSnapshotsOptions({ path: { name: schedule.repository.name }, query: { backupId: schedule.id.toString() } }),
+	});
+
+	const updateSchedule = useMutation({
+		...updateBackupScheduleMutation(),
+		onSuccess: () => {
+			toast.success("Backup schedule saved successfully");
+			setIsEditMode(false);
+		},
+		onError: (error) => {
+			toast.error("Failed to save backup schedule", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
+
+	const runBackupNow = useMutation({
+		...runBackupNowMutation(),
+		onSuccess: () => {
+			toast.success("Backup started successfully");
+		},
+		onError: (error) => {
+			toast.error("Failed to start backup", { description: parseError(error)?.message });
+		},
+	});
+
+	const stopBackup = useMutation({
+		...stopBackupMutation(),
+		onSuccess: () => {
+			toast.success("Backup stopped successfully");
+		},
+		onError: (error) => {
+			toast.error("Failed to stop backup", { description: parseError(error)?.message });
+		},
+	});
+
+	const deleteSchedule = useMutation({
+		...deleteBackupScheduleMutation(),
+		onSuccess: () => {
+			toast.success("Backup schedule deleted successfully");
+			navigate("/backups");
+		},
+		onError: (error) => {
+			toast.error("Failed to delete backup schedule", { description: parseError(error)?.message });
+		},
+	});
+
+	const handleSubmit = (formValues: BackupScheduleFormValues) => {
+		if (!schedule) return;
+
+		const cronExpression = getCronExpression(formValues.frequency, formValues.dailyTime, formValues.weeklyDay);
+
+		const retentionPolicy: Record<string, number> = {};
+		if (formValues.keepLast) retentionPolicy.keepLast = formValues.keepLast;
+		if (formValues.keepHourly) retentionPolicy.keepHourly = formValues.keepHourly;
+		if (formValues.keepDaily) retentionPolicy.keepDaily = formValues.keepDaily;
+		if (formValues.keepWeekly) retentionPolicy.keepWeekly = formValues.keepWeekly;
+		if (formValues.keepMonthly) retentionPolicy.keepMonthly = formValues.keepMonthly;
+		if (formValues.keepYearly) retentionPolicy.keepYearly = formValues.keepYearly;
+
+		updateSchedule.mutate({
+			path: { scheduleId: schedule.id.toString() },
+			body: {
+				repositoryId: formValues.repositoryId,
+				enabled: schedule.enabled,
+				cronExpression,
+				retentionPolicy: Object.keys(retentionPolicy).length > 0 ? retentionPolicy : undefined,
+				includePatterns: formValues.includePatterns,
+				excludePatterns: formValues.excludePatterns,
+			},
+		});
+	};
+
+	const handleToggleEnabled = (enabled: boolean) => {
+		updateSchedule.mutate({
+			path: { scheduleId: schedule.id.toString() },
+			body: {
+				repositoryId: schedule.repositoryId,
+				enabled,
+				cronExpression: schedule.cronExpression,
+				retentionPolicy: schedule.retentionPolicy || undefined,
+				includePatterns: schedule.includePatterns || undefined,
+				excludePatterns: schedule.excludePatterns || undefined,
+			},
+		});
+	};
+
+	if (isEditMode) {
+		return (
+			<div>
+				<CreateScheduleForm volume={schedule.volume} initialValues={schedule} onSubmit={handleSubmit} formId={formId} />
+				<div className="flex justify-end mt-4 gap-2">
+					<Button type="submit" className="ml-auto" variant="primary" form={formId} loading={updateSchedule.isPending}>
+						Update schedule
+					</Button>
+					<Button variant="outline" onClick={() => setIsEditMode(false)}>
+						Cancel
+					</Button>
+				</div>
+			</div>
+		);
+	}
+
+	const selectedSnapshot = snapshots?.find((s) => s.short_id === selectedSnapshotId);
+
+	return (
+		<div className="flex flex-col gap-6">
+			<ScheduleSummary
+				handleToggleEnabled={handleToggleEnabled}
+				handleRunBackupNow={() => runBackupNow.mutate({ path: { scheduleId: schedule.id.toString() } })}
+				handleStopBackup={() => stopBackup.mutate({ path: { scheduleId: schedule.id.toString() } })}
+				handleDeleteSchedule={() => deleteSchedule.mutate({ path: { scheduleId: schedule.id.toString() } })}
+				setIsEditMode={setIsEditMode}
+				schedule={schedule}
+			/>
+			<SnapshotTimeline
+				loading={isLoading}
+				snapshots={snapshots ?? []}
+				snapshotId={selectedSnapshot?.short_id}
+				error={failureReason?.message}
+				onSnapshotSelect={setSelectedSnapshotId}
+			/>
+			{selectedSnapshot && (
+				<SnapshotFileBrowser
+					key={selectedSnapshot?.short_id}
+					snapshot={selectedSnapshot}
+					repositoryName={schedule.repository.name}
+					volume={schedule.volume}
+				/>
+			)}
+		</div>
+	);
+}

app/client/modules/backups/routes/backups.tsx

@@ -0,0 +1,121 @@
+import { useQuery } from "@tanstack/react-query";
+import { CalendarClock, Database, HardDrive, Plus } from "lucide-react";
+import { Link } from "react-router";
+import { BackupStatusDot } from "../components/backup-status-dot";
+import { EmptyState } from "~/client/components/empty-state";
+import { Button } from "~/client/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
+import type { Route } from "./+types/backups";
+import { listBackupSchedules } from "~/client/api-client";
+import { listBackupSchedulesOptions } from "~/client/api-client/@tanstack/react-query.gen";
+
+export function meta(_: Route.MetaArgs) {
+	return [
+		{ title: "Backup Jobs" },
+		{
+			name: "description",
+			content: "Automate volume backups with scheduled jobs and retention policies.",
+		},
+	];
+}
+
+export const clientLoader = async () => {
+	const jobs = await listBackupSchedules();
+	if (jobs.data) return jobs.data;
+	return [];
+};
+
+export default function Backups({ loaderData }: Route.ComponentProps) {
+	const { data: schedules, isLoading } = useQuery({
+		...listBackupSchedulesOptions(),
+		initialData: loaderData,
+		refetchInterval: 10000,
+		refetchOnWindowFocus: true,
+	});
+
+	if (isLoading) {
+		return (
+			<div className="flex items-center justify-center h-full">
+				<p className="text-muted-foreground">Loading backup schedules...</p>
+			</div>
+		);
+	}
+
+	if (!schedules || schedules.length === 0) {
+		return (
+			<EmptyState
+				icon={CalendarClock}
+				title="No backup job"
+				description="Backup jobs help you automate the process of backing up your volumes on a regular schedule to ensure your data is safe and secure."
+				button={
+					<Button>
+						<Link to="/backups/create" className="flex items-center">
+							<Plus className="h-4 w-4 mr-2" />
+							Create a backup job
+						</Link>
+					</Button>
+				}
+			/>
+		);
+	}
+
+	return (
+		<div className="container mx-auto space-y-6">
+			<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 auto-rows-fr">
+				{schedules.map((schedule) => (
+					<Link key={schedule.id} to={`/backups/${schedule.id}`}>
+						<Card key={schedule.id} className="flex flex-col h-full">
+							<CardHeader className="pb-3">
+								<div className="flex items-start justify-between gap-2">
+									<div className="flex items-center gap-2 flex-1 min-w-0">
+										<HardDrive className="h-5 w-5 text-muted-foreground shrink-0" />
+										<CardTitle className="text-lg truncate">
+											Volume <span className="text-strong-accent">{schedule.volume.name}</span>
+										</CardTitle>
+									</div>
+									<BackupStatusDot
+										enabled={schedule.enabled}
+										hasError={!!schedule.lastBackupError}
+										isInProgress={schedule.lastBackupStatus === "in_progress"}
+									/>
+								</div>
+								<CardDescription className="flex items-center gap-2 mt-2">
+									<Database className="h-4 w-4" />
+									<span className="truncate">{schedule.repository.name}</span>
+								</CardDescription>
+							</CardHeader>
+							<CardContent className="flex-1 space-y-4">
+								<div className="space-y-2">
+									<div className="flex items-center justify-between text-sm">
+										<span className="text-muted-foreground">Schedule</span>
+										<code className="text-xs bg-muted px-2 py-1 rounded">{schedule.cronExpression}</code>
+									</div>
+									<div className="flex items-center justify-between text-sm">
+										<span className="text-muted-foreground">Last backup</span>
+										<span className="font-medium">
+											{schedule.lastBackupAt ? new Date(schedule.lastBackupAt).toLocaleDateString() : "Never"}
+										</span>
+									</div>
+									<div className="flex items-center justify-between text-sm">
+										<span className="text-muted-foreground">Next backup</span>
+										<span className="font-medium">
+											{schedule.nextBackupAt ? new Date(schedule.nextBackupAt).toLocaleDateString() : "N/A"}
+										</span>
+									</div>
+								</div>
+							</CardContent>
+						</Card>
+					</Link>
+				))}
+				<Link to="/backups/create">
+					<Card className="flex flex-col items-center justify-center h-full hover:bg-muted/50 transition-colors cursor-pointer">
+						<CardContent className="flex flex-col items-center justify-center gap-2">
+							<Plus className="h-8 w-8 text-muted-foreground" />
+							<span className="text-sm font-medium text-muted-foreground">Create a backup job</span>
+						</CardContent>
+					</Card>
+				</Link>
+			</div>
+		</div>
+	);
+}

app/client/modules/backups/routes/create-backup.tsx

@@ -0,0 +1,185 @@
+import { useId, useState } from "react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Database, HardDrive } from "lucide-react";
+import { Link, useNavigate } from "react-router";
+import { toast } from "sonner";
+import {
+	createBackupScheduleMutation,
+	listRepositoriesOptions,
+	listVolumesOptions,
+} from "~/client/api-client/@tanstack/react-query.gen";
+import { Button } from "~/client/components/ui/button";
+import { Card, CardContent } from "~/client/components/ui/card";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
+import { parseError } from "~/client/lib/errors";
+import { EmptyState } from "~/client/components/empty-state";
+import { getCronExpression } from "~/utils/utils";
+import { CreateScheduleForm, type BackupScheduleFormValues } from "../components/create-schedule-form";
+import type { Route } from "./+types/create-backup";
+import { listRepositories, listVolumes } from "~/client/api-client";
+
+export function meta(_: Route.MetaArgs) {
+	return [
+		{ title: "Create Backup Job" },
+		{
+			name: "description",
+			content: "Create a new automated backup job for your volumes.",
+		},
+	];
+}
+
+export const clientLoader = async () => {
+	const volumes = await listVolumes();
+	const repositories = await listRepositories();
+
+	if (volumes.data && repositories.data) return { volumes: volumes.data, repositories: repositories.data };
+	return { volumes: [], repositories: [] };
+};
+
+export default function CreateBackup({ loaderData }: Route.ComponentProps) {
+	const navigate = useNavigate();
+	const formId = useId();
+	const [selectedVolumeId, setSelectedVolumeId] = useState<number | undefined>();
+
+	const { data: volumesData, isLoading: loadingVolumes } = useQuery({
+		...listVolumesOptions(),
+		initialData: loaderData.volumes,
+	});
+
+	const { data: repositoriesData } = useQuery({
+		...listRepositoriesOptions(),
+		initialData: loaderData.repositories,
+	});
+
+	const createSchedule = useMutation({
+		...createBackupScheduleMutation(),
+		onSuccess: (data) => {
+			toast.success("Backup job created successfully");
+			navigate(`/backups/${data.id}`);
+		},
+		onError: (error) => {
+			toast.error("Failed to create backup job", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
+
+	const handleSubmit = (formValues: BackupScheduleFormValues) => {
+		if (!selectedVolumeId) return;
+
+		const cronExpression = getCronExpression(formValues.frequency, formValues.dailyTime, formValues.weeklyDay);
+
+		const retentionPolicy: Record<string, number> = {};
+		if (formValues.keepLast) retentionPolicy.keepLast = formValues.keepLast;
+		if (formValues.keepHourly) retentionPolicy.keepHourly = formValues.keepHourly;
+		if (formValues.keepDaily) retentionPolicy.keepDaily = formValues.keepDaily;
+		if (formValues.keepWeekly) retentionPolicy.keepWeekly = formValues.keepWeekly;
+		if (formValues.keepMonthly) retentionPolicy.keepMonthly = formValues.keepMonthly;
+		if (formValues.keepYearly) retentionPolicy.keepYearly = formValues.keepYearly;
+
+		createSchedule.mutate({
+			body: {
+				volumeId: selectedVolumeId,
+				repositoryId: formValues.repositoryId,
+				enabled: true,
+				cronExpression,
+				retentionPolicy: Object.keys(retentionPolicy).length > 0 ? retentionPolicy : undefined,
+				includePatterns: formValues.includePatterns,
+				excludePatterns: formValues.excludePatterns,
+			},
+		});
+	};
+
+	const selectedVolume = volumesData.find((v) => v.id === selectedVolumeId);
+
+	if (loadingVolumes) {
+		return (
+			<div className="flex items-center justify-center h-full">
+				<p className="text-muted-foreground">Loading...</p>
+			</div>
+		);
+	}
+
+	if (!volumesData.length) {
+		return (
+			<EmptyState
+				icon={HardDrive}
+				title="No volume to backup"
+				description="To create a backup job, you need to create a volume first. Volumes are the data sources that will be backed up."
+				button={
+					<Button>
+						<Link to="/volumes">Go to volumes</Link>
+					</Button>
+				}
+			/>
+		);
+	}
+
+	if (!repositoriesData?.length) {
+		return (
+			<EmptyState
+				icon={Database}
+				title="No repository"
+				description="To create a backup job, you need to set up a backup repository first. Backup repositories are the destinations where your backups will be stored."
+				button={
+					<Button>
+						<Link to="/repositories">Go to repositories</Link>
+					</Button>
+				}
+			/>
+		);
+	}
+
+	return (
+		<div className="container mx-auto space-y-6">
+			<Card>
+				<CardContent>
+					<Select value={selectedVolumeId?.toString()} onValueChange={(v) => setSelectedVolumeId(Number(v))}>
+						<SelectTrigger id="volume-select">
+							<SelectValue placeholder="Choose a volume to backup" />
+						</SelectTrigger>
+						<SelectContent>
+							{volumesData.map((volume) => (
+								<SelectItem key={volume.id} value={volume.id.toString()}>
+									<span className="flex items-center gap-2">
+										<HardDrive className="h-4 w-4" />
+										{volume.name}
+									</span>
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				</CardContent>
+			</Card>
+			{selectedVolume ? (
+				<>
+					<CreateScheduleForm volume={selectedVolume} onSubmit={handleSubmit} formId={formId} />
+					<div className="flex justify-end mt-4 gap-2">
+						<Button type="submit" variant="primary" form={formId} loading={createSchedule.isPending}>
+							Create
+						</Button>
+					</div>
+				</>
+			) : (
+				<Card>
+					<CardContent className="py-16">
+						<div className="flex flex-col items-center justify-center text-center">
+							<div className="relative mb-6">
+								<div className="absolute inset-0 animate-pulse">
+									<div className="w-24 h-24 rounded-full bg-primary/10 blur-2xl" />
+								</div>
+								<div className="relative flex items-center justify-center w-24 h-24 rounded-full bg-linear-to-br from-primary/20 to-primary/5 border-2 border-primary/20">
+									<Database className="w-12 h-12 text-primary/70" strokeWidth={1.5} />
+								</div>
+							</div>
+							<h3 className="text-xl font-semibold mb-2">Select a volume</h3>
+							<p className="text-muted-foreground text-sm max-w-md">
+								Choose a volume from the dropdown above to configure its backup schedule.
+							</p>
+						</div>
+					</CardContent>
+				</Card>
+			)}
+		</div>
+	);
+}

app/client/modules/repositories/components/restore-snapshot-dialog.tsx

@@ -0,0 +1,94 @@
+import { useMutation } from "@tanstack/react-query";
+import { RotateCcw } from "lucide-react";
+import { useId, useState } from "react";
+import { toast } from "sonner";
+import { restoreSnapshotMutation } from "~/client/api-client/@tanstack/react-query.gen";
+import { parseError } from "~/client/lib/errors";
+import { Button } from "~/client/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "~/client/components/ui/dialog";
+import { ScrollArea } from "~/client/components/ui/scroll-area";
+import { RestoreSnapshotForm, type RestoreSnapshotFormValues } from "./restore-snapshot-form";
+
+type Props = {
+	name: string;
+	snapshotId: string;
+};
+
+export const RestoreSnapshotDialog = ({ name, snapshotId }: Props) => {
+	const [open, setOpen] = useState(false);
+	const formId = useId();
+
+	const restore = useMutation({
+		...restoreSnapshotMutation(),
+		onSuccess: (data) => {
+			toast.success("Snapshot restored successfully", {
+				description: `${data.filesRestored} files restored, ${data.filesSkipped} files skipped`,
+			});
+			setOpen(false);
+		},
+		onError: (error) => {
+			toast.error("Failed to restore snapshot", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
+
+	const handleSubmit = (values: RestoreSnapshotFormValues) => {
+		const include = values.include
+			?.split(",")
+			.map((s) => s.trim())
+			.filter(Boolean);
+
+		const exclude = values.exclude
+			?.split(",")
+			.map((s) => s.trim())
+			.filter(Boolean);
+
+		restore.mutate({
+			path: { name },
+			body: {
+				snapshotId,
+				include: include && include.length > 0 ? include : undefined,
+				exclude: exclude && exclude.length > 0 ? exclude : undefined,
+			},
+		});
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button>
+					<RotateCcw size={16} className="mr-2" />
+					Restore
+				</Button>
+			</DialogTrigger>
+			<DialogContent>
+				<ScrollArea className="max-h-[600px] p-4">
+					<DialogHeader>
+						<DialogTitle>Restore Snapshot</DialogTitle>
+						<DialogDescription>
+							Restore snapshot {snapshotId.substring(0, 8)} to a local filesystem path
+						</DialogDescription>
+					</DialogHeader>
+					<RestoreSnapshotForm className="mt-4" formId={formId} onSubmit={handleSubmit} />
+					<DialogFooter className="mt-4">
+						<Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+							Cancel
+						</Button>
+						<Button type="submit" form={formId} disabled={restore.isPending}>
+							{restore.isPending ? "Restoring..." : "Restore"}
+						</Button>
+					</DialogFooter>
+				</ScrollArea>
+			</DialogContent>
+		</Dialog>
+	);
+};

app/client/modules/repositories/components/restore-snapshot-form.tsx

@@ -0,0 +1,97 @@
+import { arktypeResolver } from "@hookform/resolvers/arktype";
+import { type } from "arktype";
+import { useForm } from "react-hook-form";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "~/client/components/ui/form";
+import { Input } from "~/client/components/ui/input";
+
+const restoreSnapshotFormSchema = type({
+	path: "string?",
+	include: "string?",
+	exclude: "string?",
+});
+
+export type RestoreSnapshotFormValues = typeof restoreSnapshotFormSchema.inferIn;
+
+type Props = {
+	formId: string;
+	onSubmit: (values: RestoreSnapshotFormValues) => void;
+	className?: string;
+};
+
+export const RestoreSnapshotForm = ({ formId, onSubmit, className }: Props) => {
+	const form = useForm<RestoreSnapshotFormValues>({
+		resolver: arktypeResolver(restoreSnapshotFormSchema),
+		defaultValues: {
+			path: "",
+			include: "",
+			exclude: "",
+		},
+	});
+
+	const handleSubmit = (values: RestoreSnapshotFormValues) => {
+		onSubmit(values);
+	};
+
+	return (
+		<Form {...form}>
+			<form id={formId} onSubmit={form.handleSubmit(handleSubmit)} className={className}>
+				<div className="space-y-4">
+					<FormField
+						control={form.control}
+						name="path"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Path (Optional)</FormLabel>
+								<FormControl>
+									<Input placeholder="/specific/path" {...field} />
+								</FormControl>
+								<FormDescription>
+									Restore only a specific path from the snapshot (leave empty to restore all)
+								</FormDescription>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+
+					<FormField
+						control={form.control}
+						name="include"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Include Patterns (Optional)</FormLabel>
+								<FormControl>
+									<Input placeholder="*.txt,/documents/**" {...field} />
+								</FormControl>
+								<FormDescription>Include only files matching these patterns (comma-separated)</FormDescription>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+
+					<FormField
+						control={form.control}
+						name="exclude"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Exclude Patterns (Optional)</FormLabel>
+								<FormControl>
+									<Input placeholder="*.log,/temp/**" {...field} />
+								</FormControl>
+								<FormDescription>Exclude files matching these patterns (comma-separated)</FormDescription>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+				</div>
+			</form>
+		</Form>
+	);
+};

app/client/modules/repositories/routes/repositories.tsx

@@ -0,0 +1,190 @@
+import { useQuery } from "@tanstack/react-query";
+import { Database, RotateCcw } from "lucide-react";
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { listRepositories } from "~/client/api-client/sdk.gen";
+import { listRepositoriesOptions } from "~/client/api-client/@tanstack/react-query.gen";
+import { CreateRepositoryDialog } from "~/client/components/create-repository-dialog";
+import { RepositoryIcon } from "~/client/components/repository-icon";
+import { Button } from "~/client/components/ui/button";
+import { Card } from "~/client/components/ui/card";
+import { Input } from "~/client/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/client/components/ui/table";
+import type { Route } from "./+types/repositories";
+import { cn } from "~/client/lib/utils";
+import { EmptyState } from "~/client/components/empty-state";
+
+export function meta(_: Route.MetaArgs) {
+	return [
+		{ title: "Repositories" },
+		{
+			name: "description",
+			content: "Manage your backup repositories with encryption and compression.",
+		},
+	];
+}
+
+export const clientLoader = async () => {
+	const repositories = await listRepositories();
+	if (repositories.data) return repositories.data;
+	return [];
+};
+
+export default function Repositories({ loaderData }: Route.ComponentProps) {
+	const [searchQuery, setSearchQuery] = useState("");
+	const [statusFilter, setStatusFilter] = useState("");
+	const [backendFilter, setBackendFilter] = useState("");
+	const [createRepositoryOpen, setCreateRepositoryOpen] = useState(false);
+
+	const clearFilters = () => {
+		setSearchQuery("");
+		setStatusFilter("");
+		setBackendFilter("");
+	};
+
+	const navigate = useNavigate();
+
+	const { data } = useQuery({
+		...listRepositoriesOptions(),
+		initialData: loaderData,
+		refetchInterval: 10000,
+		refetchOnWindowFocus: true,
+	});
+
+	const filteredRepositories =
+		data?.filter((repository) => {
+			const matchesSearch = repository.name.toLowerCase().includes(searchQuery.toLowerCase());
+			const matchesStatus = !statusFilter || repository.status === statusFilter;
+			const matchesBackend = !backendFilter || repository.type === backendFilter;
+			return matchesSearch && matchesStatus && matchesBackend;
+		}) || [];
+
+	const hasNoRepositories = data?.length === 0;
+	const hasNoFilteredRepositories = filteredRepositories.length === 0 && !hasNoRepositories;
+
+	if (hasNoRepositories) {
+		return (
+			<EmptyState
+				icon={Database}
+				title="No repository"
+				description="Repositories are remote storage locations where you can backup your volumes securely. Encrypted and optimized for storage efficiency."
+				button={<CreateRepositoryDialog open={createRepositoryOpen} setOpen={setCreateRepositoryOpen} />}
+			/>
+		);
+	}
+
+	return (
+		<Card className="p-0 gap-0">
+			<div className="flex flex-col lg:flex-row items-stretch lg:items-center gap-2 md:justify-between p-4 bg-card-header py-4">
+				<span className="flex flex-col sm:flex-row items-stretch md:items-center gap-0 flex-wrap ">
+					<Input
+						className="w-full lg:w-[180px] min-w-[180px] -mr-px -mt-px"
+						placeholder="Search repositories…"
+						value={searchQuery}
+						onChange={(e) => setSearchQuery(e.target.value)}
+					/>
+					<Select value={statusFilter} onValueChange={setStatusFilter}>
+						<SelectTrigger className="w-full lg:w-[180px] min-w-[180px] -mr-px -mt-px">
+							<SelectValue placeholder="All status" />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectItem value="healthy">Healthy</SelectItem>
+							<SelectItem value="error">Error</SelectItem>
+							<SelectItem value="unknown">Unknown</SelectItem>
+						</SelectContent>
+					</Select>
+					<Select value={backendFilter} onValueChange={setBackendFilter}>
+						<SelectTrigger className="w-full lg:w-[180px] min-w-[180px] -mt-px">
+							<SelectValue placeholder="All backends" />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectItem value="local">Local</SelectItem>
+							<SelectItem value="sftp">SFTP</SelectItem>
+							<SelectItem value="s3">S3</SelectItem>
+							<SelectItem value="gcs">Google Cloud Storage</SelectItem>
+						</SelectContent>
+					</Select>
+					{(searchQuery || statusFilter || backendFilter) && (
+						<Button onClick={clearFilters} className="w-full lg:w-auto mt-2 lg:mt-0 lg:ml-2">
+							<RotateCcw className="h-4 w-4 mr-2" />
+							Clear filters
+						</Button>
+					)}
+				</span>
+				<CreateRepositoryDialog open={createRepositoryOpen} setOpen={setCreateRepositoryOpen} />
+			</div>
+			<div className="overflow-x-auto">
+				<Table className="border-t">
+					<TableHeader className="bg-card-header">
+						<TableRow>
+							<TableHead className="w-[100px] uppercase">Name</TableHead>
+							<TableHead className="uppercase text-left">Backend</TableHead>
+							<TableHead className="uppercase hidden sm:table-cell">Compression</TableHead>
+							<TableHead className="uppercase text-center">Status</TableHead>
+						</TableRow>
+					</TableHeader>
+					<TableBody>
+						{hasNoFilteredRepositories ? (
+							<TableRow>
+								<TableCell colSpan={4} className="text-center py-12">
+									<div className="flex flex-col items-center gap-3">
+										<p className="text-muted-foreground">No repositories match your filters.</p>
+										<Button onClick={clearFilters} variant="outline" size="sm">
+											<RotateCcw className="h-4 w-4 mr-2" />
+											Clear filters
+										</Button>
+									</div>
+								</TableCell>
+							</TableRow>
+						) : (
+							filteredRepositories.map((repository) => (
+								<TableRow
+									key={repository.name}
+									className="hover:bg-accent/50 hover:cursor-pointer"
+									onClick={() => navigate(`/repositories/${repository.name}`)}
+								>
+									<TableCell className="font-medium text-strong-accent">{repository.name}</TableCell>
+									<TableCell>
+										<span className="flex items-center gap-2">
+											<RepositoryIcon backend={repository.type} />
+											{repository.type}
+										</span>
+									</TableCell>
+									<TableCell className="hidden sm:table-cell">
+										<span className="text-muted-foreground text-xs bg-primary/10 rounded-md px-2 py-1">
+											{repository.compressionMode || "off"}
+										</span>
+									</TableCell>
+									<TableCell className="text-center">
+										<span
+											className={cn(
+												"inline-flex items-center gap-2 px-2 py-1 rounded-md text-xs bg-gray-500/10 text-gray-500",
+												{
+													"bg-green-500/10 text-green-500": repository.status === "healthy",
+													"bg-red-500/10 text-red-500": repository.status === "error",
+												},
+											)}
+										>
+											{repository.status || "unknown"}
+										</span>
+									</TableCell>
+								</TableRow>
+							))
+						)}
+					</TableBody>
+				</Table>
+			</div>
+			<div className="px-4 py-2 text-sm text-muted-foreground bg-card-header flex justify-end border-t">
+				{hasNoFilteredRepositories ? (
+					"No repositories match filters."
+				) : (
+					<span>
+						<span className="text-strong-accent">{filteredRepositories.length}</span> repositor
+						{filteredRepositories.length === 1 ? "y" : "ies"}
+					</span>
+				)}
+			</div>
+		</Card>
+	);
+}

app/client/modules/repositories/routes/repository-details.tsx

@@ -0,0 +1,234 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { redirect, useNavigate, useSearchParams } from "react-router";
+import { toast } from "sonner";
+import { useState, useEffect } from "react";
+import {
+	deleteRepositoryMutation,
+	doctorRepositoryMutation,
+	getRepositoryOptions,
+	listSnapshotsOptions,
+} from "~/client/api-client/@tanstack/react-query.gen";
+import { Button } from "~/client/components/ui/button";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "~/client/components/ui/alert-dialog";
+import { parseError } from "~/client/lib/errors";
+import { getRepository } from "~/client/api-client/sdk.gen";
+import type { Route } from "./+types/repository-details";
+import { cn } from "~/client/lib/utils";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/client/components/ui/tabs";
+import { RepositoryInfoTabContent } from "../tabs/info";
+import { RepositorySnapshotsTabContent } from "../tabs/snapshots";
+import { Loader2 } from "lucide-react";
+
+export function meta({ params }: Route.MetaArgs) {
+	return [
+		{ title: params.name },
+		{
+			name: "description",
+			content: "View repository configuration, status, and snapshots.",
+		},
+	];
+}
+
+export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
+	const repository = await getRepository({ path: { name: params.name ?? "" } });
+	if (repository.data) return repository.data;
+
+	return redirect("/repositories");
+};
+
+export default function RepositoryDetailsPage({ loaderData }: Route.ComponentProps) {
+	const [showDoctorResults, setShowDoctorResults] = useState(false);
+
+	const navigate = useNavigate();
+	const queryClient = useQueryClient();
+	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
+	const [searchParams, setSearchParams] = useSearchParams();
+	const activeTab = searchParams.get("tab") || "info";
+
+	const { data } = useQuery({
+		...getRepositoryOptions({ path: { name: loaderData.name } }),
+		initialData: loaderData,
+		refetchInterval: 10000,
+		refetchOnWindowFocus: true,
+	});
+
+	useEffect(() => {
+		queryClient.prefetchQuery(listSnapshotsOptions({ path: { name: data.name } }));
+	}, [queryClient, data.name]);
+
+	const deleteRepo = useMutation({
+		...deleteRepositoryMutation(),
+		onSuccess: () => {
+			toast.success("Repository deleted successfully");
+			navigate("/repositories");
+		},
+		onError: (error) => {
+			toast.error("Failed to delete repository", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
+
+	const doctorMutation = useMutation({
+		...doctorRepositoryMutation(),
+		onSuccess: (data) => {
+			if (data) {
+				setShowDoctorResults(true);
+
+				if (data.success) {
+					toast.success("Repository doctor completed successfully");
+				} else {
+					toast.warning("Doctor completed with some issues", {
+						description: "Check the details for more information",
+						richColors: true,
+					});
+				}
+			}
+		},
+		onError: (error) => {
+			toast.error("Failed to run doctor", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
+
+	const handleConfirmDelete = () => {
+		setShowDeleteConfirm(false);
+		deleteRepo.mutate({ path: { name: data.name } });
+	};
+
+	const getStepLabel = (step: string) => {
+		switch (step) {
+			case "unlock":
+				return "Unlock Repository";
+			case "check":
+				return "Check Repository";
+			case "repair_index":
+				return "Repair Index";
+			case "recheck":
+				return "Re-check Repository";
+			default:
+				return step;
+		}
+	};
+
+	return (
+		<>
+			<div className="flex items-center justify-between mb-4">
+				<div className="text-sm font-semibold text-muted-foreground flex items-center gap-2">
+					<span
+						className={cn("inline-flex items-center gap-2 px-2 py-1 rounded-md text-xs bg-gray-500/10 text-gray-500", {
+							"bg-green-500/10 text-green-500": data.status === "healthy",
+							"bg-red-500/10 text-red-500": data.status === "error",
+						})}
+					>
+						{data.status || "unknown"}
+					</span>
+					<span className="text-xs bg-primary/10 rounded-md px-2 py-1">{data.type}</span>
+				</div>
+				<div className="flex gap-4">
+					<Button
+						onClick={() => doctorMutation.mutate({ path: { name: data.name } })}
+						disabled={doctorMutation.isPending}
+						variant={"outline"}
+					>
+						{doctorMutation.isPending ? (
+							<>
+								<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+								Running Doctor...
+							</>
+						) : (
+							"Run Doctor"
+						)}
+					</Button>
+					<Button variant="destructive" onClick={() => setShowDeleteConfirm(true)} disabled={deleteRepo.isPending}>
+						Delete
+					</Button>
+				</div>
+			</div>
+
+			<Tabs value={activeTab} onValueChange={(value) => setSearchParams({ tab: value })}>
+				<TabsList className="mb-2">
+					<TabsTrigger value="info">Configuration</TabsTrigger>
+					<TabsTrigger value="snapshots">Snapshots</TabsTrigger>
+				</TabsList>
+				<TabsContent value="info">
+					<RepositoryInfoTabContent repository={data} />
+				</TabsContent>
+				<TabsContent value="snapshots">
+					<RepositorySnapshotsTabContent repository={data} />
+				</TabsContent>
+			</Tabs>
+
+			<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Delete repository?</AlertDialogTitle>
+						<AlertDialogDescription>
+							Are you sure you want to delete the repository <strong>{data.name}</strong>? This action cannot be undone
+							and will remove all backup data.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<div className="flex gap-3 justify-end">
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={handleConfirmDelete}
+							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							Delete repository
+						</AlertDialogAction>
+					</div>
+				</AlertDialogContent>
+			</AlertDialog>
+
+			<AlertDialog open={showDoctorResults} onOpenChange={setShowDoctorResults}>
+				<AlertDialogContent className="max-w-2xl">
+					<AlertDialogHeader>
+						<AlertDialogTitle>Doctor Results</AlertDialogTitle>
+						<AlertDialogDescription>Repository doctor operation completed</AlertDialogDescription>
+					</AlertDialogHeader>
+
+					{doctorMutation.data && (
+						<div className="space-y-3 max-h-96 overflow-y-auto">
+							{doctorMutation.data.steps.map((step) => (
+								<div
+									key={step.step}
+									className={cn("border rounded-md p-3", {
+										"bg-green-500/10 border-green-500/20": step.success,
+										"bg-yellow-500/10 border-yellow-500/20": !step.success,
+									})}
+								>
+									<div className="flex items-center justify-between mb-2">
+										<span className="font-medium text-sm">{getStepLabel(step.step)}</span>
+										<span
+											className={cn("text-xs px-2 py-1 rounded", {
+												"bg-green-500/20 text-green-500": step.success,
+												"bg-yellow-500/20 text-yellow-500": !step.success,
+											})}
+										>
+											{step.success ? "Success" : "Warning"}
+										</span>
+									</div>
+									{step.error && <p className="text-xs text-red-500 mt-1">{step.error}</p>}
+								</div>
+							))}
+						</div>
+					)}
+
+					<div className="flex justify-end">
+						<Button onClick={() => setShowDoctorResults(false)}>Close</Button>
+					</div>
+				</AlertDialogContent>
+			</AlertDialog>
+		</>
+	);
+}

app/client/modules/repositories/routes/snapshot-details.tsx

@@ -0,0 +1,102 @@
+import { useQuery } from "@tanstack/react-query";
+import { redirect, useParams } from "react-router";
+import { listSnapshotFilesOptions } from "~/client/api-client/@tanstack/react-query.gen";
+import { Card, CardContent, CardHeader, CardTitle } from "~/client/components/ui/card";
+import { RestoreSnapshotDialog } from "../components/restore-snapshot-dialog";
+import { SnapshotFileBrowser } from "~/client/modules/backups/components/snapshot-file-browser";
+import { getSnapshotDetails } from "~/client/api-client";
+import type { Route } from "./+types/snapshot-details";
+
+export function meta({ params }: Route.MetaArgs) {
+	return [
+		{ title: `Snapshot ${params.snapshotId}` },
+		{
+			name: "description",
+			content: "Browse and restore files from a backup snapshot.",
+		},
+	];
+}
+
+export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
+	const snapshot = await getSnapshotDetails({
+		path: { name: params.name, snapshotId: params.snapshotId },
+	});
+	if (snapshot.data) return snapshot.data;
+
+	return redirect("/repositories");
+};
+
+export default function SnapshotDetailsPage({ loaderData }: Route.ComponentProps) {
+	const { name, snapshotId } = useParams<{
+		name: string;
+		snapshotId: string;
+	}>();
+
+	const { data } = useQuery({
+		...listSnapshotFilesOptions({
+			path: { name: name ?? "", snapshotId: snapshotId ?? "" },
+			query: { path: "/" },
+		}),
+		enabled: !!name && !!snapshotId,
+	});
+
+	if (!name || !snapshotId) {
+		return (
+			<div className="flex items-center justify-center h-full">
+				<p className="text-destructive">Invalid snapshot reference</p>
+			</div>
+		);
+	}
+
+	return (
+		<div className="space-y-4">
+			<div className="flex items-center justify-between">
+				<div>
+					<h1 className="text-2xl font-bold">{name}</h1>
+					<p className="text-sm text-muted-foreground">Snapshot: {snapshotId}</p>
+				</div>
+				<RestoreSnapshotDialog name={name} snapshotId={snapshotId} />
+			</div>
+
+			<SnapshotFileBrowser repositoryName={name} snapshot={loaderData} />
+
+			{data?.snapshot && (
+				<Card>
+					<CardHeader>
+						<CardTitle>Snapshot Information</CardTitle>
+					</CardHeader>
+					<CardContent className="space-y-2 text-sm">
+						<div className="grid grid-cols-2 gap-4">
+							<div>
+								<span className="text-muted-foreground">Snapshot ID:</span>
+								<p className="font-mono break-all">{data.snapshot.id}</p>
+							</div>
+							<div>
+								<span className="text-muted-foreground">Short ID:</span>
+								<p className="font-mono break-all">{data.snapshot.short_id}</p>
+							</div>
+							<div>
+								<span className="text-muted-foreground">Hostname:</span>
+								<p>{data.snapshot.hostname}</p>
+							</div>
+							<div>
+								<span className="text-muted-foreground">Time:</span>
+								<p>{new Date(data.snapshot.time).toLocaleString()}</p>
+							</div>
+							<div className="col-span-2">
+								<span className="text-muted-foreground">Paths:</span>
+								<div className="space-y-1 mt-1">
+									{data.snapshot.paths.map((path) => (
+										<p key={path} className="font-mono text-xs bg-muted px-2 py-1 rounded break-all">
+											{path}
+										</p>
+									))}
+								</div>
+							</div>
+						</div>
+					</CardContent>
+				</Card>
+			)}
+		</div>
+	);
+}

app/client/modules/repositories/tabs/info.tsx

@@ -0,0 +1,63 @@
+import { Card } from "~/client/components/ui/card";
+import type { Repository } from "~/client/lib/types";
+
+type Props = {
+	repository: Repository;
+};
+
+export const RepositoryInfoTabContent = ({ repository }: Props) => {
+	return (
+		<Card className="p-6">
+			<div className="space-y-6">
+				<div>
+					<h3 className="text-lg font-semibold mb-4">Repository Information</h3>
+					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+						<div>
+							<div className="text-sm font-medium text-muted-foreground">Name</div>
+							<p className="mt-1 text-sm">{repository.name}</p>
+						</div>
+						<div>
+							<div className="text-sm font-medium text-muted-foreground">Backend</div>
+							<p className="mt-1 text-sm">{repository.type}</p>
+						</div>
+						<div>
+							<div className="text-sm font-medium text-muted-foreground">Compression Mode</div>
+							<p className="mt-1 text-sm">{repository.compressionMode || "off"}</p>
+						</div>
+						<div>
+							<div className="text-sm font-medium text-muted-foreground">Status</div>
+							<p className="mt-1 text-sm">{repository.status || "unknown"}</p>
+						</div>
+						<div>
+							<div className="text-sm font-medium text-muted-foreground">Created At</div>
+							<p className="mt-1 text-sm">{new Date(repository.createdAt * 1000).toLocaleString()}</p>
+						</div>
+						<div>
+							<div className="text-sm font-medium text-muted-foreground">Last Checked</div>
+							<p className="mt-1 text-sm">
+								{repository.lastChecked ? new Date(repository.lastChecked).toLocaleString() : "Never"}
+							</p>
+						</div>
+					</div>
+				</div>
+				{repository.lastError && (
+					<div>
+						<div className="flex items-center justify-between mb-4">
+							<h3 className="text-lg font-semibold text-red-500">Last Error</h3>
+						</div>
+
+						<div className="bg-red-500/10 border border-red-500/20 rounded-md p-4">
+							<p className="text-sm text-red-500">{repository.lastError}</p>
+						</div>
+					</div>
+				)}
+				<div>
+					<h3 className="text-lg font-semibold mb-4">Configuration</h3>
+					<div className="bg-muted/50 rounded-md p-4">
+						<pre className="text-sm overflow-auto">{JSON.stringify(repository.config, null, 2)}</pre>
+					</div>
+				</div>
+			</div>
+		</Card>
+	);
+};

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

@@ -0,0 +1,148 @@
+import { useQuery } from "@tanstack/react-query";
+import { Database } from "lucide-react";
+import { useState } from "react";
+import { listSnapshotsOptions } from "~/client/api-client/@tanstack/react-query.gen";
+import { SnapshotsTable } from "~/client/components/snapshots-table";
+import { Button } from "~/client/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
+import { Input } from "~/client/components/ui/input";
+import { Table, TableBody, TableCell, TableRow } from "~/client/components/ui/table";
+import type { Repository, Snapshot } from "~/client/lib/types";
+
+type Props = {
+	repository: Repository;
+};
+
+export const RepositorySnapshotsTabContent = ({ repository }: Props) => {
+	const [searchQuery, setSearchQuery] = useState("");
+
+	const { data, isFetching, failureReason } = useQuery({
+		...listSnapshotsOptions({ path: { name: repository.name } }),
+		refetchInterval: 10000,
+		refetchOnWindowFocus: true,
+		initialData: [],
+	});
+
+	const filteredSnapshots = data.filter((snapshot: Snapshot) => {
+		if (!searchQuery) return true;
+		const searchLower = searchQuery.toLowerCase();
+		return (
+			snapshot.short_id.toLowerCase().includes(searchLower) ||
+			snapshot.paths.some((path) => path.toLowerCase().includes(searchLower))
+		);
+	});
+
+	const hasNoFilteredSnapshots = !filteredSnapshots?.length;
+
+	if (repository.status === "error") {
+		return (
+			<Card>
+				<CardContent className="flex flex-col items-center justify-center text-center py-12">
+					<Database className="mb-4 h-12 w-12 text-destructive" />
+					<p className="text-destructive font-semibold">Repository Error</p>
+					<p className="text-sm text-muted-foreground mt-2">
+						This repository is in an error state and cannot be accessed.
+					</p>
+					{repository.lastError && (
+						<div className="mt-4 max-w-md bg-destructive/10 border border-destructive/20 rounded-md p-3">
+							<p className="text-sm text-destructive">{repository.lastError}</p>
+						</div>
+					)}
+				</CardContent>
+			</Card>
+		);
+	}
+
+	if (failureReason) {
+		return (
+			<Card>
+				<CardContent className="flex flex-col items-center justify-center text-center py-12">
+					<Database className="mb-4 h-12 w-12 text-destructive" />
+					<p className="text-destructive font-semibold">Failed to Load Snapshots</p>
+					<p className="text-sm text-muted-foreground mt-2">{failureReason.message}</p>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	if (isFetching && !data.length) {
+		return (
+			<Card>
+				<CardContent className="flex items-center justify-center py-12">
+					<p className="text-muted-foreground">Loading snapshots</p>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	if (!data.length) {
+		return (
+			<Card>
+				<CardContent className="flex flex-col items-center justify-center text-center py-16 px-4">
+					<div className="relative mb-8">
+						<div className="absolute inset-0 animate-pulse">
+							<div className="w-32 h-32 rounded-full bg-primary/10 blur-2xl" />
+						</div>
+						<div className="relative flex items-center justify-center w-32 h-32 rounded-full bg-linear-to-br from-primary/20 to-primary/5 border-2 border-primary/20">
+							<Database className="w-16 h-16 text-primary/70" strokeWidth={1.5} />
+						</div>
+					</div>
+					<div className="max-w-md space-y-3">
+						<h3 className="text-2xl font-semibold text-foreground">No snapshots yet</h3>
+						<p className="text-muted-foreground text-sm">
+							Snapshots are point-in-time backups of your data. Create your first backup to see it here.
+						</p>
+					</div>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	return (
+		<Card className="p-0 gap-0">
+			<CardHeader className="p-4 bg-card-header">
+				<div className="flex flex-col lg:flex-row items-stretch lg:items-center gap-4 justify-between">
+					<div className="flex-1">
+						<CardTitle>Snapshots</CardTitle>
+						<CardDescription className="mt-1">
+							Backup snapshots stored in this repository. Total: {data.length}
+						</CardDescription>
+					</div>
+					<div className="flex gap-2 items-center">
+						<Input
+							className="w-full lg:w-60"
+							placeholder="Search snapshots..."
+							value={searchQuery}
+							onChange={(e) => setSearchQuery(e.target.value)}
+						/>
+					</div>
+				</div>
+			</CardHeader>
+			{hasNoFilteredSnapshots ? (
+				<Table className="border-t">
+					<TableBody>
+						<TableRow>
+							<TableCell colSpan={5} className="text-center py-12">
+								<div className="flex flex-col items-center gap-3">
+									<p className="text-muted-foreground">No snapshots match your search.</p>
+									<Button onClick={() => setSearchQuery("")} variant="outline" size="sm">
+										Clear search
+									</Button>
+								</div>
+							</TableCell>
+						</TableRow>
+					</TableBody>
+				</Table>
+			) : (
+				<SnapshotsTable snapshots={filteredSnapshots} repositoryName={repository.name} />
+			)}
+			<div className="px-4 py-2 text-sm text-muted-foreground bg-card-header flex justify-between border-t">
+				<span>
+					{hasNoFilteredSnapshots
+						? "No snapshots match filters."
+						: `Showing ${filteredSnapshots.length} of ${data.length}`}
+				</span>
+			</div>
+		</Card>
+	);
+};

app/client/modules/settings/routes/settings.tsx

@@ -0,0 +1,263 @@
+import { useMutation } from "@tanstack/react-query";
+import { Download, KeyRound, User } from "lucide-react";
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { toast } from "sonner";
+import { Button } from "~/client/components/ui/button";
+import { Card, CardContent, CardDescription, CardTitle } from "~/client/components/ui/card";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "~/client/components/ui/dialog";
+import { Input } from "~/client/components/ui/input";
+import { Label } from "~/client/components/ui/label";
+import { appContext } from "~/context";
+import type { Route } from "./+types/settings";
+import {
+	changePasswordMutation,
+	downloadResticPasswordMutation,
+	logoutMutation,
+} from "~/client/api-client/@tanstack/react-query.gen";
+
+export function meta(_: Route.MetaArgs) {
+	return [
+		{ title: "Settings" },
+		{
+			name: "description",
+			content: "Manage your account settings and preferences.",
+		},
+	];
+}
+
+export async function clientLoader({ context }: Route.LoaderArgs) {
+	const ctx = context.get(appContext);
+	return ctx;
+}
+
+export default function Settings({ loaderData }: Route.ComponentProps) {
+	const [currentPassword, setCurrentPassword] = useState("");
+	const [newPassword, setNewPassword] = useState("");
+	const [confirmPassword, setConfirmPassword] = useState("");
+	const [downloadDialogOpen, setDownloadDialogOpen] = useState(false);
+	const [downloadPassword, setDownloadPassword] = useState("");
+	const navigate = useNavigate();
+
+	const logout = useMutation({
+		...logoutMutation(),
+		onSuccess: () => {
+			navigate("/login", { replace: true });
+		},
+	});
+
+	const changePassword = useMutation({
+		...changePasswordMutation(),
+		onSuccess: (data) => {
+			if (data.success) {
+				toast.success("Password changed successfully. You will be logged out.");
+				setTimeout(() => {
+					logout.mutate({});
+				}, 1500);
+			} else {
+				toast.error("Failed to change password", { description: data.message });
+			}
+		},
+		onError: (error) => {
+			toast.error("Failed to change password", { description: error.message });
+		},
+	});
+
+	const downloadResticPassword = useMutation({
+		...downloadResticPasswordMutation(),
+		onSuccess: (data) => {
+			const blob = new Blob([data], { type: "text/plain" });
+			const url = window.URL.createObjectURL(blob);
+			const a = document.createElement("a");
+			a.href = url;
+			a.download = "restic.pass";
+			document.body.appendChild(a);
+			a.click();
+			document.body.removeChild(a);
+			window.URL.revokeObjectURL(url);
+
+			toast.success("Restic password file downloaded successfully");
+			setDownloadDialogOpen(false);
+			setDownloadPassword("");
+		},
+		onError: (error) => {
+			toast.error("Failed to download Restic password", { description: error.message });
+		},
+	});
+
+	const handleChangePassword = (e: React.FormEvent) => {
+		e.preventDefault();
+
+		if (newPassword !== confirmPassword) {
+			toast.error("Passwords do not match");
+			return;
+		}
+
+		if (newPassword.length < 8) {
+			toast.error("Password must be at least 8 characters long");
+			return;
+		}
+
+		changePassword.mutate({
+			body: {
+				currentPassword,
+				newPassword,
+			},
+		});
+	};
+
+	const handleDownloadResticPassword = (e: React.FormEvent) => {
+		e.preventDefault();
+
+		if (!downloadPassword) {
+			toast.error("Password is required");
+			return;
+		}
+
+		downloadResticPassword.mutate({
+			body: {
+				password: downloadPassword,
+			},
+		});
+	};
+
+	return (
+		<Card className="p-0 gap-0">
+			<div className="border-b border-border/50 bg-card-header p-6">
+				<CardTitle className="flex items-center gap-2">
+					<User className="size-5" />
+					Account Information
+				</CardTitle>
+				<CardDescription className="mt-1.5">Your account details</CardDescription>
+			</div>
+			<CardContent className="p-6 space-y-4">
+				<div className="space-y-2">
+					<Label>Username</Label>
+					<Input value={loaderData.user?.username || ""} disabled className="max-w-md" />
+				</div>
+			</CardContent>
+
+			<div className="border-t border-border/50 bg-card-header p-6">
+				<CardTitle className="flex items-center gap-2">
+					<KeyRound className="size-5" />
+					Change Password
+				</CardTitle>
+				<CardDescription className="mt-1.5">Update your password to keep your account secure</CardDescription>
+			</div>
+			<CardContent className="p-6">
+				<form onSubmit={handleChangePassword} className="space-y-4">
+					<div className="space-y-2">
+						<Label htmlFor="current-password">Current Password</Label>
+						<Input
+							id="current-password"
+							type="password"
+							value={currentPassword}
+							onChange={(e) => setCurrentPassword(e.target.value)}
+							className="max-w-md"
+							required
+						/>
+					</div>
+					<div className="space-y-2">
+						<Label htmlFor="new-password">New Password</Label>
+						<Input
+							id="new-password"
+							type="password"
+							value={newPassword}
+							onChange={(e) => setNewPassword(e.target.value)}
+							className="max-w-md"
+							required
+							minLength={8}
+						/>
+						<p className="text-xs text-muted-foreground">Must be at least 8 characters long</p>
+					</div>
+					<div className="space-y-2">
+						<Label htmlFor="confirm-password">Confirm New Password</Label>
+						<Input
+							id="confirm-password"
+							type="password"
+							value={confirmPassword}
+							onChange={(e) => setConfirmPassword(e.target.value)}
+							className="max-w-md"
+							required
+							minLength={8}
+						/>
+					</div>
+					<Button type="submit" loading={changePassword.isPending} className="mt-4">
+						Change Password
+					</Button>
+				</form>
+			</CardContent>
+
+			<div className="border-t border-border/50 bg-card-header p-6">
+				<CardTitle className="flex items-center gap-2">
+					<Download className="size-5" />
+					Backup Recovery Key
+				</CardTitle>
+				<CardDescription className="mt-1.5">Download your Restic password file for disaster recovery</CardDescription>
+			</div>
+			<CardContent className="p-6 space-y-4">
+				<p className="text-sm text-muted-foreground max-w-2xl">
+					This file contains the encryption password used by Restic to secure your backups. Store it in a safe place
+					(like a password manager or encrypted storage). If you lose access to this server, you'll need this file to
+					recover your backup data.
+				</p>
+
+				<Dialog open={downloadDialogOpen} onOpenChange={setDownloadDialogOpen}>
+					<DialogTrigger asChild>
+						<Button variant="outline">
+							<Download size={16} className="mr-2" />
+							Download Restic Password
+						</Button>
+					</DialogTrigger>
+					<DialogContent>
+						<form onSubmit={handleDownloadResticPassword}>
+							<DialogHeader>
+								<DialogTitle>Download Restic Password</DialogTitle>
+								<DialogDescription>
+									For security reasons, please enter your account password to download the Restic password file.
+								</DialogDescription>
+							</DialogHeader>
+							<div className="space-y-4 py-4">
+								<div className="space-y-2">
+									<Label htmlFor="download-password">Your Password</Label>
+									<Input
+										id="download-password"
+										type="password"
+										value={downloadPassword}
+										onChange={(e) => setDownloadPassword(e.target.value)}
+										placeholder="Enter your password"
+										required
+										autoFocus
+									/>
+								</div>
+							</div>
+							<DialogFooter>
+								<Button
+									type="button"
+									variant="outline"
+									onClick={() => {
+										setDownloadDialogOpen(false);
+										setDownloadPassword("");
+									}}
+								>
+									Cancel
+								</Button>
+								<Button type="submit" loading={downloadResticPassword.isPending}>
+									Download
+								</Button>
+							</DialogFooter>
+						</form>
+					</DialogContent>
+				</Dialog>
+			</CardContent>
+		</Card>
+	);
+}

app/client/modules/volumes/components/healthchecks-card.tsx

@@ -0,0 +1,90 @@
+import { useMutation } from "@tanstack/react-query";
+import { formatDistanceToNow } from "date-fns";
+import { HeartIcon } from "lucide-react";
+import { toast } from "sonner";
+import { healthCheckVolumeMutation, updateVolumeMutation } from "~/client/api-client/@tanstack/react-query.gen";
+import { OnOff } from "~/client/components/onoff";
+import { Button } from "~/client/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
+import type { Volume } from "~/client/lib/types";
+
+type Props = {
+	volume: Volume;
+};
+
+export const HealthchecksCard = ({ volume }: Props) => {
+	const timeAgo = formatDistanceToNow(volume.lastHealthCheck, {
+		addSuffix: true,
+	});
+
+	const healthcheck = useMutation({
+		...healthCheckVolumeMutation(),
+		onSuccess: (d) => {
+			if (d.error) {
+				toast.error("Health check failed", { description: d.error });
+				return;
+			}
+			toast.success("Health check completed", { description: "The volume is healthy." });
+		},
+		onError: (error) => {
+			toast.error("Health check failed", { description: error.message });
+		},
+	});
+
+	const toggleAutoRemount = useMutation({
+		...updateVolumeMutation(),
+		onSuccess: (d) => {
+			toast.success("Volume updated", {
+				description: `Auto remount is now ${d.autoRemount ? "enabled" : "paused"}.`,
+			});
+		},
+		onError: (error) => {
+			toast.error("Update failed", { description: error.message });
+		},
+	});
+
+	return (
+		<Card className="flex-1 flex flex-col h-full">
+			<CardHeader>
+				<CardTitle className="flex items-center gap-2">
+					<HeartIcon className="h-4 w-4" />
+					Health Checks
+				</CardTitle>
+				<CardDescription>Monitor and automatically remount volumes on errors to ensure availability.</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<div className="flex flex-col flex-1 justify-start">
+					{volume.lastError && <span className="text-sm text-red-500 wrap-break-word">{volume.lastError}</span>}
+					{volume.status === "mounted" && <span className="text-md text-emerald-500">Healthy</span>}
+					{volume.status !== "unmounted" && (
+						<span className="text-xs text-muted-foreground mb-4">Checked {timeAgo || "never"}</span>
+					)}
+					<span className="flex justify-between items-center gap-2">
+						<span className="text-sm">Remount on error</span>
+						<OnOff
+							isOn={volume.autoRemount}
+							toggle={() =>
+								toggleAutoRemount.mutate({ path: { name: volume.name }, body: { autoRemount: !volume.autoRemount } })
+							}
+							disabled={toggleAutoRemount.isPending}
+							enabledLabel="Enabled"
+							disabledLabel="Paused"
+						/>
+					</span>
+				</div>
+				{volume.status !== "unmounted" && (
+					<div className="flex justify-center">
+						<Button
+							variant="outline"
+							className="mt-4"
+							loading={healthcheck.isPending}
+							onClick={() => healthcheck.mutate({ path: { name: volume.name } })}
+						>
+							Run Health Check
+						</Button>
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};

app/client/modules/volumes/components/storage-chart.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { HardDrive, Unplug } from "lucide-react";
+import * as React from "react";
+import { Label, Pie, PieChart } from "recharts";
+import { ByteSize } from "~/client/components/bytes-size";
+import { Card, CardContent, CardHeader, CardTitle } from "~/client/components/ui/card";
+import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "~/client/components/ui/chart";
+import type { StatFs } from "~/client/lib/types";
+
+type Props = {
+	statfs: StatFs;
+};
+
+export function StorageChart({ statfs }: Props) {
+	const chartData = React.useMemo(
+		() => [
+			{
+				name: "Used",
+				value: statfs.used,
+				fill: "#ff543a",
+			},
+			{
+				name: "Free",
+				value: statfs.free,
+				fill: "lightgray",
+			},
+		],
+		[statfs],
+	);
+
+	const chartConfig = {} satisfies ChartConfig;
+
+	const usagePercentage = React.useMemo(() => {
+		return Math.round((statfs.used / statfs.total) * 100);
+	}, [statfs]);
+
+	const isEmpty = !statfs.total;
+
+	if (isEmpty) {
+		return (
+			<Card className="flex flex-col h-full text-sm">
+				<CardHeader className="items-center pb-0">
+					<CardTitle className="flex items-center gap-2">
+						<HardDrive className="h-4 w-4" />
+						Storage Usage
+					</CardTitle>
+				</CardHeader>
+				<CardContent className="flex-1 pb-10 flex flex-col items-center justify-center text-center">
+					<Unplug className="mb-4 h-5 w-5 text-muted-foreground" />
+					<p className="text-muted-foreground">No storage data available. Mount the volume to see usage statistics.</p>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	return (
+		<Card className="flex flex-col h-full text-sm">
+			<CardHeader className="items-center pb-0">
+				<CardTitle className="flex items-center gap-2">
+					<HardDrive className="h-4 w-4" />
+					Storage Usage
+				</CardTitle>
+			</CardHeader>
+			<CardContent className="flex-1 pb-0">
+				<div>
+					<ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[250px]">
+						<PieChart>
+							<ChartTooltip
+								cursor={false}
+								content={
+									<ChartTooltipContent
+										hideLabel
+										formatter={(value, name) => [<ByteSize key={name} bytes={value as number} />, name]}
+									/>
+								}
+							/>
+							<Pie data={chartData} dataKey="value" nameKey="name" innerRadius={60} strokeWidth={5}>
+								<Label
+									content={({ viewBox }) => {
+										if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+											return (
+												<text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
+													<tspan x={viewBox.cx} y={viewBox.cy} className="fill-foreground text-3xl font-bold">
+														{usagePercentage}%
+													</tspan>
+													<tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-muted-foreground">
+														Used
+													</tspan>
+												</text>
+											);
+										}
+									}}
+								/>
+							</Pie>
+						</PieChart>
+					</ChartContainer>
+					<div className="flex flex-col h-full justify-center">
+						<div className="grid gap-4 w-full">
+							<div className="flex items-center justify-between p-3 rounded-lg bg-muted/50">
+								<div className="flex items-center gap-3">
+									<HardDrive className="h-4 w-4 text-muted-foreground" />
+									<span className="font-medium">Total Capacity</span>
+								</div>
+								<ByteSize bytes={statfs.total} className="font-mono text-sm" />
+							</div>
+
+							<div className="flex items-center justify-between p-3 rounded-lg bg-strong-accent/10">
+								<div className="flex items-center gap-3">
+									<div className="h-4 w-4 rounded-full bg-strong-accent" />
+									<span className="font-medium">Used Space</span>
+								</div>
+								<div className="text-right">
+									<ByteSize bytes={statfs.used} className="font-mono text-sm" />
+								</div>
+							</div>
+
+							<div className="flex items-center justify-between p-3 rounded-lg bg-primary/10">
+								<div className="flex items-center gap-3">
+									<div className="h-4 w-4 rounded-full bg-primary" />
+									<span className="font-medium">Free Space</span>
+								</div>
+								<div className="text-right">
+									<ByteSize bytes={statfs.free} className="font-mono text-sm" />
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</CardContent>
+		</Card>
+	);
+}

app/client/modules/volumes/routes/volume-details.tsx

@@ -0,0 +1,197 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useNavigate, useParams, useSearchParams } from "react-router";
+import { toast } from "sonner";
+import { useState } from "react";
+import { StatusDot } from "~/client/components/status-dot";
+import { Button } from "~/client/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/client/components/ui/tabs";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "~/client/components/ui/alert-dialog";
+import { VolumeIcon } from "~/client/components/volume-icon";
+import { parseError } from "~/client/lib/errors";
+import { cn } from "~/client/lib/utils";
+import type { Route } from "./+types/volume-details";
+import { VolumeInfoTabContent } from "../tabs/info";
+import { FilesTabContent } from "../tabs/files";
+import { DockerTabContent } from "../tabs/docker";
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/client/components/ui/tooltip";
+import { useSystemInfo } from "~/client/hooks/use-system-info";
+import { getVolume } from "~/client/api-client";
+import {
+	deleteVolumeMutation,
+	getVolumeOptions,
+	mountVolumeMutation,
+	unmountVolumeMutation,
+} from "~/client/api-client/@tanstack/react-query.gen";
+
+export function meta({ params }: Route.MetaArgs) {
+	return [
+		{ title: params.name },
+		{
+			name: "description",
+			content: "View and manage volume details, configuration, and files.",
+		},
+	];
+}
+
+export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
+	const volume = await getVolume({ path: { name: params.name } });
+	if (volume.data) return volume.data;
+};
+
+export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
+	const { name } = useParams<{ name: string }>();
+	const navigate = useNavigate();
+	const [searchParams, setSearchParams] = useSearchParams();
+	const activeTab = searchParams.get("tab") || "info";
+	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
+	const { data } = useQuery({
+		...getVolumeOptions({ path: { name: name ?? "" } }),
+		initialData: loaderData,
+		refetchInterval: 10000,
+		refetchOnWindowFocus: true,
+	});
+
+	const { capabilities } = useSystemInfo();
+
+	const deleteVol = useMutation({
+		...deleteVolumeMutation(),
+		onSuccess: () => {
+			toast.success("Volume deleted successfully");
+			navigate("/volumes");
+		},
+		onError: (error) => {
+			toast.error("Failed to delete volume", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
+
+	const mountVol = useMutation({
+		...mountVolumeMutation(),
+		onSuccess: () => {
+			toast.success("Volume mounted successfully");
+		},
+		onError: (error) => {
+			toast.error("Failed to mount volume", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
+
+	const unmountVol = useMutation({
+		...unmountVolumeMutation(),
+		onSuccess: () => {
+			toast.success("Volume unmounted successfully");
+		},
+		onError: (error) => {
+			toast.error("Failed to unmount volume", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
+
+	const handleConfirmDelete = () => {
+		setShowDeleteConfirm(false);
+		deleteVol.mutate({ path: { name: name ?? "" } });
+	};
+
+	if (!name) {
+		return <div>Volume not found</div>;
+	}
+
+	if (!data) {
+		return <div>Loading...</div>;
+	}
+
+	const { volume, statfs } = data;
+	const dockerAvailable = capabilities.docker;
+
+	return (
+		<>
+			<div className="flex flex-col items-start xs:items-center xs:flex-row xs:justify-between">
+				<div className="text-sm font-semibold mb-2 xs:mb-0 text-muted-foreground flex items-center gap-2">
+					<span className="flex items-center gap-2">
+						<StatusDot status={volume.status} /> {volume.status[0].toUpperCase() + volume.status.slice(1)}
+					</span>
+					<VolumeIcon size={14} backend={volume?.config.backend} />
+				</div>
+				<div className="flex gap-4">
+					<Button
+						onClick={() => mountVol.mutate({ path: { name } })}
+						loading={mountVol.isPending}
+						className={cn({ hidden: volume.status === "mounted" })}
+					>
+						Mount
+					</Button>
+					<Button
+						variant="secondary"
+						onClick={() => unmountVol.mutate({ path: { name } })}
+						loading={unmountVol.isPending}
+						className={cn({ hidden: volume.status !== "mounted" })}
+					>
+						Unmount
+					</Button>
+					<Button variant="destructive" onClick={() => setShowDeleteConfirm(true)} disabled={deleteVol.isPending}>
+						Delete
+					</Button>
+				</div>
+			</div>
+			<Tabs value={activeTab} onValueChange={(value) => setSearchParams({ tab: value })} className="mt-4">
+				<TabsList className="mb-2">
+					<TabsTrigger value="info">Configuration</TabsTrigger>
+					<TabsTrigger value="files">Files</TabsTrigger>
+					<Tooltip>
+						<TooltipTrigger>
+							<TabsTrigger disabled={!dockerAvailable} value="docker">
+								Docker
+							</TabsTrigger>
+						</TooltipTrigger>
+						<TooltipContent className={cn({ hidden: dockerAvailable })}>
+							<p>Enable Docker support to access this tab.</p>
+						</TooltipContent>
+					</Tooltip>
+				</TabsList>
+				<TabsContent value="info">
+					<VolumeInfoTabContent volume={volume} statfs={statfs} />
+				</TabsContent>
+				<TabsContent value="files">
+					<FilesTabContent volume={volume} />
+				</TabsContent>
+				{dockerAvailable && (
+					<TabsContent value="docker">
+						<DockerTabContent volume={volume} />
+					</TabsContent>
+				)}
+			</Tabs>
+
+			<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Delete volume?</AlertDialogTitle>
+						<AlertDialogDescription>
+							Are you sure you want to delete the volume <strong>{name}</strong>? This action cannot be undone.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<div className="flex gap-3 justify-end">
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={handleConfirmDelete}
+							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							Delete volume
+						</AlertDialogAction>
+					</div>
+				</AlertDialogContent>
+			</AlertDialog>
+		</>
+	);
+}

app/client/modules/volumes/routes/volumes.tsx

@@ -0,0 +1,170 @@
+import { useQuery } from "@tanstack/react-query";
+import { HardDrive, RotateCcw } from "lucide-react";
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { CreateVolumeDialog } from "~/client/components/create-volume-dialog";
+import { EmptyState } from "~/client/components/empty-state";
+import { StatusDot } from "~/client/components/status-dot";
+import { Button } from "~/client/components/ui/button";
+import { Card } from "~/client/components/ui/card";
+import { Input } from "~/client/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/client/components/ui/table";
+import { VolumeIcon } from "~/client/components/volume-icon";
+import type { Route } from "./+types/volumes";
+import { listVolumes } from "~/client/api-client";
+import { listVolumesOptions } from "~/client/api-client/@tanstack/react-query.gen";
+
+export function meta(_: Route.MetaArgs) {
+	return [
+		{ title: "Volumes" },
+		{
+			name: "description",
+			content: "Create, manage, monitor, and automate your Docker volumes with ease.",
+		},
+	];
+}
+
+export const clientLoader = async () => {
+	const volumes = await listVolumes();
+	if (volumes.data) return volumes.data;
+	return [];
+};
+
+export default function Volumes({ loaderData }: Route.ComponentProps) {
+	const [createVolumeOpen, setCreateVolumeOpen] = useState(false);
+	const [searchQuery, setSearchQuery] = useState("");
+	const [statusFilter, setStatusFilter] = useState("");
+	const [backendFilter, setBackendFilter] = useState("");
+
+	const clearFilters = () => {
+		setSearchQuery("");
+		setStatusFilter("");
+		setBackendFilter("");
+	};
+
+	const navigate = useNavigate();
+
+	const { data } = useQuery({
+		...listVolumesOptions(),
+		initialData: loaderData,
+		refetchInterval: 10000,
+		refetchOnWindowFocus: true,
+	});
+
+	const filteredVolumes =
+		data.filter((volume) => {
+			const matchesSearch = volume.name.toLowerCase().includes(searchQuery.toLowerCase());
+			const matchesStatus = !statusFilter || volume.status === statusFilter;
+			const matchesBackend = !backendFilter || volume.type === backendFilter;
+			return matchesSearch && matchesStatus && matchesBackend;
+		}) || [];
+
+	const hasNoVolumes = data.length === 0;
+	const hasNoFilteredVolumes = filteredVolumes.length === 0 && !hasNoVolumes;
+
+	if (hasNoVolumes) {
+		return (
+			<EmptyState
+				icon={HardDrive}
+				title="No volume"
+				description="Manage and monitor all your storage backends in one place with advanced features like automatic mounting and health checks."
+				button={<CreateVolumeDialog open={createVolumeOpen} setOpen={setCreateVolumeOpen} />}
+			/>
+		);
+	}
+
+	return (
+		<Card className="p-0 gap-0">
+			<div className="flex flex-col lg:flex-row items-stretch lg:items-center gap-2 md:justify-between p-4 bg-card-header py-4">
+				<span className="flex flex-col sm:flex-row items-stretch md:items-center gap-0 flex-wrap ">
+					<Input
+						className="w-full lg:w-[180px] min-w-[180px] -mr-px -mt-px"
+						placeholder="Search volumes…"
+						value={searchQuery}
+						onChange={(e) => setSearchQuery(e.target.value)}
+					/>
+					<Select value={statusFilter} onValueChange={setStatusFilter}>
+						<SelectTrigger className="w-full lg:w-[180px] min-w-[180px] -mr-px -mt-px">
+							<SelectValue placeholder="All status" />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectItem value="mounted">Mounted</SelectItem>
+							<SelectItem value="unmounted">Unmounted</SelectItem>
+							<SelectItem value="error">Error</SelectItem>
+						</SelectContent>
+					</Select>
+					<Select value={backendFilter} onValueChange={setBackendFilter}>
+						<SelectTrigger className="w-full lg:w-[180px] min-w-[180px] -mt-px">
+							<SelectValue placeholder="All backends" />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectItem value="directory">Directory</SelectItem>
+							<SelectItem value="nfs">NFS</SelectItem>
+							<SelectItem value="smb">SMB</SelectItem>
+						</SelectContent>
+					</Select>
+					{(searchQuery || statusFilter || backendFilter) && (
+						<Button onClick={clearFilters} className="w-full lg:w-auto mt-2 lg:mt-0 lg:ml-2">
+							<RotateCcw className="h-4 w-4 mr-2" />
+							Clear filters
+						</Button>
+					)}
+				</span>
+				<CreateVolumeDialog open={createVolumeOpen} setOpen={setCreateVolumeOpen} />
+			</div>
+			<div className="overflow-x-auto">
+				<Table className="border-t">
+					<TableHeader className="bg-card-header">
+						<TableRow>
+							<TableHead className="w-[100px] uppercase">Name</TableHead>
+							<TableHead className="uppercase text-left">Backend</TableHead>
+							<TableHead className="uppercase text-center">Status</TableHead>
+						</TableRow>
+					</TableHeader>
+					<TableBody>
+						{hasNoFilteredVolumes ? (
+							<TableRow>
+								<TableCell colSpan={4} className="text-center py-12">
+									<div className="flex flex-col items-center gap-3">
+										<p className="text-muted-foreground">No volumes match your filters.</p>
+										<Button onClick={clearFilters} variant="outline" size="sm">
+											<RotateCcw className="h-4 w-4 mr-2" />
+											Clear filters
+										</Button>
+									</div>
+								</TableCell>
+							</TableRow>
+						) : (
+							filteredVolumes.map((volume) => (
+								<TableRow
+									key={volume.name}
+									className="hover:bg-accent/50 hover:cursor-pointer"
+									onClick={() => navigate(`/volumes/${volume.name}`)}
+								>
+									<TableCell className="font-medium text-strong-accent">{volume.name}</TableCell>
+									<TableCell>
+										<VolumeIcon backend={volume.type} />
+									</TableCell>
+									<TableCell className="text-center">
+										<StatusDot status={volume.status} />
+									</TableCell>
+								</TableRow>
+							))
+						)}
+					</TableBody>
+				</Table>
+			</div>
+			<div className="px-4 py-2 text-sm text-muted-foreground bg-card-header flex justify-end border-t">
+				{hasNoFilteredVolumes ? (
+					"No volumes match filters."
+				) : (
+					<span>
+						<span className="text-strong-accent">{filteredVolumes.length}</span> volume
+						{filteredVolumes.length > 1 ? "s" : ""}
+					</span>
+				)}
+			</div>
+		</Card>
+	);
+}

app/client/modules/volumes/tabs/docker.tsx

@@ -0,0 +1,133 @@
+import { useQuery } from "@tanstack/react-query";
+import { Unplug } from "lucide-react";
+import * as YML from "yaml";
+import { getContainersUsingVolumeOptions } from "~/client/api-client/@tanstack/react-query.gen";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
+import { CodeBlock } from "~/client/components/ui/code-block";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/client/components/ui/table";
+import type { Volume } from "~/client/lib/types";
+
+type Props = {
+	volume: Volume;
+};
+
+export const DockerTabContent = ({ volume }: Props) => {
+	const yamlString = YML.stringify({
+		services: {
+			nginx: {
+				image: "nginx:latest",
+				volumes: [`im-${volume.name}:/path/in/container`],
+			},
+		},
+		volumes: {
+			[`im-${volume.name}`]: {
+				external: true,
+			},
+		},
+	});
+
+	const dockerRunCommand = `docker run -v im-${volume.name}:/path/in/container nginx:latest`;
+
+	const {
+		data: containersData,
+		isLoading,
+		error,
+	} = useQuery({
+		...getContainersUsingVolumeOptions({ path: { name: volume.name } }),
+		refetchInterval: 10000,
+		refetchOnWindowFocus: true,
+	});
+
+	const containers = containersData || [];
+
+	const getStateClass = (state: string) => {
+		switch (state) {
+			case "running":
+				return "bg-green-100 text-green-800";
+			case "exited":
+				return "bg-orange-100 text-orange-800";
+			default:
+				return "bg-gray-100 text-gray-800";
+		}
+	};
+
+	return (
+		<div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
+			<Card>
+				<CardHeader>
+					<CardTitle>Plug-and-play Docker integration</CardTitle>
+					<CardDescription>
+						This volume can be used in your Docker Compose files by referencing it as an external volume. The example
+						demonstrates how to mount the volume to a service (nginx in this case). Make sure to adjust the path inside
+						the container to fit your application's needs
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<div className="relative space-y-6">
+						<div className="space-y-4">
+							<div className="flex flex-col gap-4">
+								<CodeBlock code={yamlString} language="yaml" filename="docker-compose.yml" />
+							</div>
+							<div className="text-sm text-muted-foreground">
+								Alternatively, you can use the following command to run a Docker container with the volume mounted
+							</div>
+							<div className="flex flex-col gap-4">
+								<CodeBlock code={dockerRunCommand} filename="CLI one-liner" />
+							</div>
+						</div>
+					</div>
+				</CardContent>
+			</Card>
+
+			<div className="grid">
+				<Card>
+					<CardHeader>
+						<CardTitle>Containers Using This Volume</CardTitle>
+						<CardDescription>List of Docker containers mounting this volume.</CardDescription>
+					</CardHeader>
+
+					<CardContent className="space-y-4 text-sm h-full">
+						{isLoading && <div>Loading containers...</div>}
+						{error && <div className="text-destructive">Failed to load containers: {String(error)}</div>}
+						{!isLoading && !error && containers.length === 0 && (
+							<div className="flex flex-col items-center justify-center text-center h-full">
+								<Unplug className="mb-4 h-5 w-5 text-muted-foreground" />
+								<p className="text-muted-foreground">No Docker containers are currently using this volume.</p>
+							</div>
+						)}
+						{!isLoading && !error && containers.length > 0 && (
+							<div className="max-h-130 overflow-y-auto">
+								<Table>
+									<TableHeader>
+										<TableRow>
+											<TableHead>Name</TableHead>
+											<TableHead>ID</TableHead>
+											<TableHead>State</TableHead>
+											<TableHead>Image</TableHead>
+										</TableRow>
+									</TableHeader>
+									<TableBody className="text-sm">
+										{containers.map((container) => (
+											<TableRow key={container.id}>
+												<TableCell>{container.name}</TableCell>
+												<TableCell>{container.id.slice(0, 12)}</TableCell>
+												<TableCell>
+													<span
+														className={`px-2 py-1 rounded-full text-xs font-medium ${getStateClass(container.state)}`}
+													>
+														{container.state}
+													</span>
+												</TableCell>
+												<TableCell>{container.image}</TableCell>
+											</TableRow>
+										))}
+									</TableBody>
+								</Table>
+							</div>
+						)}
+					</CardContent>
+				</Card>
+			</div>
+		</div>
+	);
+};

app/client/modules/volumes/tabs/files.tsx

@@ -0,0 +1,40 @@
+import { FolderOpen } from "lucide-react";
+import { VolumeFileBrowser } from "~/client/components/volume-file-browser";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
+import type { Volume } from "~/client/lib/types";
+
+type Props = {
+	volume: Volume;
+};
+
+export const FilesTabContent = ({ volume }: Props) => {
+	if (volume.status !== "mounted") {
+		return (
+			<Card>
+				<CardContent className="flex flex-col items-center justify-center text-center py-12">
+					<FolderOpen className="mb-4 h-12 w-12 text-muted-foreground" />
+					<p className="text-muted-foreground">Volume must be mounted to browse files.</p>
+					<p className="text-sm text-muted-foreground mt-2">Mount the volume to explore its contents.</p>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	return (
+		<Card className="h-[600px] flex flex-col">
+			<CardHeader>
+				<CardTitle>File Explorer</CardTitle>
+				<CardDescription>Browse the files and folders in this volume.</CardDescription>
+			</CardHeader>
+			<CardContent className="flex-1 overflow-hidden flex flex-col">
+				<VolumeFileBrowser
+					volumeName={volume.name}
+					enabled={volume.status === "mounted"}
+					className="overflow-auto flex-1 border rounded-md bg-card p-2"
+					emptyMessage="This volume is empty."
+					emptyDescription="Files and folders will appear here once you add them."
+				/>
+			</CardContent>
+		</Card>
+	);
+};

app/client/modules/volumes/tabs/info.tsx

@@ -0,0 +1,95 @@
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { toast } from "sonner";
+import { CreateVolumeForm, type FormValues } from "~/client/components/create-volume-form";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "~/client/components/ui/alert-dialog";
+import { Card } from "~/client/components/ui/card";
+import type { StatFs, Volume } from "~/client/lib/types";
+import { HealthchecksCard } from "../components/healthchecks-card";
+import { StorageChart } from "../components/storage-chart";
+import { updateVolumeMutation } from "~/client/api-client/@tanstack/react-query.gen";
+
+type Props = {
+	volume: Volume;
+	statfs: StatFs;
+};
+
+export const VolumeInfoTabContent = ({ volume, statfs }: Props) => {
+	const updateMutation = useMutation({
+		...updateVolumeMutation(),
+		onSuccess: (_) => {
+			toast.success("Volume updated successfully");
+			setOpen(false);
+			setPendingValues(null);
+		},
+		onError: (error) => {
+			toast.error("Failed to update volume", { description: error.message });
+			setOpen(false);
+			setPendingValues(null);
+		},
+	});
+
+	const [open, setOpen] = useState(false);
+	const [pendingValues, setPendingValues] = useState<FormValues | null>(null);
+
+	const handleSubmit = (values: FormValues) => {
+		setPendingValues(values);
+		setOpen(true);
+	};
+
+	const confirmUpdate = () => {
+		if (pendingValues) {
+			updateMutation.mutate({
+				path: { name: volume.name },
+				body: { config: pendingValues },
+			});
+		}
+	};
+
+	return (
+		<>
+			<div className="grid gap-4 xl:grid-cols-[minmax(0,2.3fr)_minmax(320px,1fr)]">
+				<Card className="p-6">
+					<CreateVolumeForm
+						initialValues={{ ...volume, ...volume.config }}
+						onSubmit={handleSubmit}
+						mode="update"
+						loading={updateMutation.isPending}
+					/>
+				</Card>
+				<div className="flex flex-col gap-4">
+					<div className="self-start w-full">
+						<HealthchecksCard volume={volume} />
+					</div>
+					<div className="flex-1 w-full">
+						<StorageChart statfs={statfs} />
+					</div>
+				</div>
+			</div>
+			<AlertDialog open={open} onOpenChange={setOpen}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Update Volume Configuration</AlertDialogTitle>
+						<AlertDialogDescription>
+							Editing the volume will remount it with the new config immediately. This may temporarily disrupt access to
+							the volume. Continue?
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction onClick={confirmUpdate}>Update</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</>
+	);
+};

app/client/routes/root.tsx

@@ -0,0 +1,9 @@
+import { redirect } from "react-router";
+
+export const loader = async () => {
+	return redirect("/volumes");
+};
+
+export const clientLoader = async () => {
+	return redirect("/volumes");
+};

app/context.ts

@@ -0,0 +1,12 @@
+import { createContext } from "react-router";
+import type { User } from "./client/lib/types";
+
+type AppContext = {
+	user: User | null;
+	hasUsers: boolean;
+};
+
+export const appContext = createContext<AppContext>({
+	user: null,
+	hasUsers: false,
+});

app/drizzle/0000_known_madelyne_pryor.sql

@@ -0,0 +1,7 @@
+CREATE TABLE `volumes_table` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`name` text NOT NULL,
+	`type` text NOT NULL
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX `volumes_table_name_unique` ON `volumes_table` (`name`);