feat(repositories): allow importing existing repos

* 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

.dockerignore

@@ -12,12 +12,9 @@
 !**/build.ts
 !**/components.json
 
-!apps/**/src/**
-!apps/**/drizzle/**
-!apps/**/app/**
-!apps/**/public/**
-
-!packages/**/src/**
+!src/**
+!app/**
+!public/**
 
 # License files and attributions
 !LICENSE

.gitignore

@@ -1,47 +1,14 @@
-# If you prefer the allow list template instead of the deny list, see community template:
-# https://github.com/github/gitignore/blob/main/community/Golang/Go.AllowList.gitignore
-#
-# Binaries for programs and plugins
-*.exe
-*.exe~
-*.dll
-*.so
-*.dylib
+.DS_Store
+/node_modules/
 
-# Test binary, built with `go test -c`
-*.test
+# React Router
+/.react-router/
+/build/
+/dist/
 
-# Code coverage profiles and other test artifacts
-*.out
-coverage.*
-*.coverprofile
-profile.cov
-
-# Dependency directories (remove the comment below to include it)
-# vendor/
-
-# Go workspace file
-go.work
-go.work.sum
-
-# env file
 .env
-
-# Editor/IDE
-# .idea/
-# .vscode/
-ironmount
-out/
-*.db
-tmp/
-
-node_modules/
-.env*
-
 .turbo
+CLAUDE.md
 
 mutagen.yml.lock
-
-data/
-
-CLAUDE.md
+notes.md

Dockerfile

@@ -21,11 +21,17 @@ RUN apk add --no-cache curl bzip2
 RUN echo "Building for ${TARGETARCH}"
 RUN if [ "${TARGETARCH}" = "arm64" ]; then \
       curl -L -o restic.bz2 "https://github.com/restic/restic/releases/download/v$RESTIC_VERSION/restic_$RESTIC_VERSION"_linux_arm64.bz2; \
+      curl -O https://downloads.rclone.org/rclone-current-linux-arm64.zip; \
+      unzip rclone-current-linux-arm64.zip; \
       elif [ "${TARGETARCH}" = "amd64" ]; then \
       curl -L -o restic.bz2 "https://github.com/restic/restic/releases/download/v$RESTIC_VERSION/restic_$RESTIC_VERSION"_linux_amd64.bz2; \
+      curl -O https://downloads.rclone.org/rclone-current-linux-amd64.zip; \
+      unzip rclone-current-linux-amd64.zip; \
       fi
 
 RUN bzip2 -d restic.bz2 && chmod +x restic
+RUN mv rclone-*-linux-*/rclone /deps/rclone && chmod +x /deps/rclone
+
 
 # ------------------------------
 # DEVELOPMENT
@@ -37,16 +43,14 @@ ENV NODE_ENV="development"
 WORKDIR /app
 
 COPY --from=deps /deps/restic /usr/local/bin/restic
+COPY --from=deps /deps/rclone /usr/local/bin/rclone
 COPY ./package.json ./bun.lock ./
-COPY ./packages/schemas/package.json ./packages/schemas/package.json
-COPY ./apps/client/package.json ./apps/client/package.json
-COPY ./apps/server/package.json ./apps/server/package.json
 
 RUN bun install --frozen-lockfile
 
 COPY . .
 
-EXPOSE 3000
+EXPOSE 4096
 
 CMD ["bun", "run", "dev"]
 
@@ -58,11 +62,6 @@ FROM oven/bun:${BUN_VERSION} AS builder
 WORKDIR /app
 
 COPY ./package.json ./bun.lock ./
-
-COPY ./packages/schemas/package.json ./packages/schemas/package.json
-COPY ./apps/client/package.json ./apps/client/package.json
-COPY ./apps/server/package.json ./apps/server/package.json
-
 RUN bun install --frozen-lockfile
 
 COPY . .
@@ -75,15 +74,21 @@ ENV NODE_ENV="production"
 
 WORKDIR /app
 
+COPY --from=builder /app/package.json ./
+RUN bun install --production --frozen-lockfile
+
 COPY --from=deps /deps/restic /usr/local/bin/restic
-COPY --from=builder /app/apps/server/dist ./
-COPY --from=builder /app/apps/server/drizzle ./assets/migrations
-COPY --from=builder /app/apps/client/dist/client ./assets/frontend
+COPY --from=deps /deps/rclone /usr/local/bin/rclone
+COPY --from=builder /app/dist/client ./dist/client
+COPY --from=builder /app/dist/server ./dist/server
+COPY --from=builder /app/app/drizzle ./assets/migrations
 
 # Include third-party licenses and attribution
 COPY ./LICENSES ./LICENSES
 COPY ./NOTICES.md ./NOTICES.md
 COPY ./LICENSE ./LICENSE.md
 
-CMD ["bun", "./index.js"]
+EXPOSE 4096
+
+CMD ["bun", "run", "start"]
 

README.md

@@ -6,7 +6,7 @@
   </a>
   <br />
   <figure>
-    <img src="https://github.com/nicotsx/ironmount/blob/main/screenshots/volume-details.png?raw=true" alt="Demo" />
+    <img src="https://github.com/nicotsx/ironmount/blob/main/screenshots/backup-details.png?raw=true" alt="Demo" />
     <figcaption>
       <p align="center">
         Backup management with scheduling and monitoring
@@ -36,10 +36,11 @@ In order to run Ironmount, you need to have Docker and Docker Compose installed
 ```yaml
 services:
   ironmount:
-    image: ghcr.io/nicotsx/ironmount:v0.6
+    image: ghcr.io/nicotsx/ironmount:v0.8
     container_name: ironmount
     restart: unless-stopped
-    privileged: true
+    cap_add:
+      - SYS_ADMIN
     ports:
       - "4096:4096"
     devices:
@@ -67,7 +68,7 @@ If you want to track a local directory on the same server where Ironmount is run
 ```diff
 services:
   ironmount:
-    image: ghcr.io/nicotsx/ironmount:v0.6
+    image: ghcr.io/nicotsx/ironmount:v0.8
     container_name: ironmount
     restart: unless-stopped
     cap_add:
@@ -94,11 +95,70 @@ Now, when adding a new volume in the Ironmount web interface, you can select "Di
 
 ## Creating a repository
 
-A repository is where your backups will be securely stored encrypted. Ironmount currently supports S3-compatible storage backends and local directories for storing your backup repositories.
+A repository is where your backups will be securely stored encrypted. Ironmount supports multiple storage backends for your backup repositories:
+
+- **Local directories** - Store backups on local disk at `/var/lib/ironmount/repositories/<repository-name>`
+- **S3-compatible storage** - Amazon S3, MinIO, Wasabi, DigitalOcean Spaces, etc.
+- **Google Cloud Storage** - Google's cloud storage service
+- **Azure Blob Storage** - Microsoft Azure storage
+- **rclone remotes** - 40+ cloud storage providers via rclone (see below)
 
 Repositories are optimized for storage efficiency and data integrity, leveraging Restic's deduplication and encryption features.
 
-To create a repository, navigate to the "Repositories" section in the web interface and click on "Create repository". Fill in the required details such as repository name, type, and connection settings. If you choose a local directory as the repository type, your backups will be stored at `/var/lib/ironmount/repositories/<repository-name>`.
+To create a repository, navigate to the "Repositories" section in the web interface and click on "Create repository". Fill in the required details such as repository name, type, and connection settings.
+
+### Using rclone for cloud storage
+
+Ironmount can use [rclone](https://rclone.org/) to support 40+ cloud storage providers including Google Drive, Dropbox, OneDrive, Box, pCloud, Mega, and many more. This gives you the flexibility to store your backups on virtually any cloud storage service.
+
+**Setup instructions:**
+
+1. **Install rclone on your host system** (if not already installed):
+   ```bash
+   curl https://rclone.org/install.sh | sudo bash
+   ```
+
+2. **Configure your cloud storage remote** using rclone's interactive config:
+   ```bash
+   rclone config
+   ```
+   Follow the prompts to set up your cloud storage provider. For OAuth providers (Google Drive, Dropbox, etc.), rclone will guide you through the authentication flow.
+
+3. **Verify your remote is configured**:
+   ```bash
+   rclone listremotes
+   ```
+
+4. **Mount the rclone config into the Ironmount container** by updating your `docker-compose.yml`:
+   ```diff
+   services:
+     ironmount:
+       image: ghcr.io/nicotsx/ironmount:v0.8
+       container_name: ironmount
+       restart: unless-stopped
+       cap_add:
+         - SYS_ADMIN
+       ports:
+         - "4096:4096"
+       devices:
+         - /dev/fuse:/dev/fuse
+       volumes:
+         - /var/lib/ironmount:/var/lib/ironmount
+   +     - ~/.config/rclone:/root/.config/rclone
+   ```
+
+5. **Restart the Ironmount container**:
+   ```bash
+   docker compose down
+   docker compose up -d
+   ```
+
+6. **Create a repository** in Ironmount:
+   - Select "rclone" as the repository type
+   - Choose your configured remote from the dropdown
+   - Specify the path within your remote (e.g., `backups/ironmount`)
+
+For a complete list of supported providers, see the [rclone documentation](https://rclone.org/).
 
 ## Your first backup job
 
@@ -129,7 +189,7 @@ In order to enable this feature, you need to change your bind mount `/var/lib/ir
 ```diff
 services:
   ironmount:
-    image: ghcr.io/nicotsx/ironmount:v0.6
+    image: ghcr.io/nicotsx/ironmount:v0.8
     container_name: ironmount
     restart: unless-stopped
     ports:
@@ -157,7 +217,7 @@ In order to enable this feature, you need to run Ironmount with several items sh
 ```diff
 services:
   ironmount:
-    image: ghcr.io/nicotsx/ironmount:v0.6
+    image: ghcr.io/nicotsx/ironmount:v0.8
     container_name: ironmount
     restart: unless-stopped
     cap_add:

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

@@ -0,0 +1,722 @@
+// 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, runForget, 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, RunForgetData, RunForgetResponse, 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;
+};
+
+/**
+ * Manually apply retention policy to clean up old snapshots
+ */
+export const runForgetMutation = (options?: Partial<Options<RunForgetData>>): UseMutationOptions<RunForgetResponse, DefaultError, Options<RunForgetData>> => {
+    const mutationOptions: UseMutationOptions<RunForgetResponse, DefaultError, Options<RunForgetData>> = {
+        mutationFn: async (fnOptions) => {
+            const { data } = await runForget({
+                ...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,18 @@
+// 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,301 @@
+// 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,241 @@
+// 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,332 @@
+// 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,42 @@
+// 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,100 @@
+// 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,176 @@
+// 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,181 @@
+// 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,136 @@
+// 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,264 @@
+// 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,118 @@
+// 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,143 @@
+// 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,453 @@
+// 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, RunForgetData, RunForgetErrors, RunForgetResponses, 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
+    });
+};
+
+/**
+ * Manually apply retention policy to clean up old snapshots
+ */
+export const runForget = <ThrowOnError extends boolean = false>(options: Options<RunForgetData, ThrowOnError>) => {
+    return (options.client ?? client).post<RunForgetResponses, RunForgetErrors, ThrowOnError>({
+        url: '/api/v1/backups/{scheduleId}/forget',
+        ...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,64 @@
+import { Link, useMatches, type UIMatch } from "react-router";
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+} from "~/client/components/ui/breadcrumb";
+
+export interface BreadcrumbItemData {
+	label: string;
+	href?: string;
+}
+
+interface RouteHandle {
+	breadcrumb?: (match: UIMatch) => BreadcrumbItemData[] | null;
+}
+
+export function AppBreadcrumb() {
+	const matches = useMatches();
+
+	// Find the last match with a breadcrumb handler
+	const lastMatchWithBreadcrumb = [...matches].reverse().find((match) => {
+		const handle = match.handle as RouteHandle | undefined;
+		return handle?.breadcrumb;
+	});
+
+	if (!lastMatchWithBreadcrumb) {
+		return null;
+	}
+
+	const handle = lastMatchWithBreadcrumb.handle as RouteHandle;
+	const breadcrumbs = handle.breadcrumb?.(lastMatchWithBreadcrumb);
+
+	if (!breadcrumbs || breadcrumbs.length === 0) {
+		return null;
+	}
+
+	return (
+		<Breadcrumb>
+			<BreadcrumbList>
+				{breadcrumbs.map((breadcrumb, index) => {
+					const isLast = index === breadcrumbs.length - 1;
+
+					return (
+						<div key={`${breadcrumb.label}-${index}`} className="contents">
+							<BreadcrumbItem>
+								{isLast || !breadcrumb.href ? (
+									<BreadcrumbPage>{breadcrumb.label}</BreadcrumbPage>
+								) : (
+									<BreadcrumbLink asChild>
+										<Link to={breadcrumb.href}>{breadcrumb.label}</Link>
+									</BreadcrumbLink>
+								)}
+							</BreadcrumbItem>
+							{!isLast && <BreadcrumbSeparator />}
+						</div>
+					);
+				})}
+			</BreadcrumbList>
+		</Breadcrumb>
+	);
+}

app/client/components/app-sidebar.tsx

@@ -10,9 +10,9 @@ import {
 	SidebarMenuButton,
 	SidebarMenuItem,
 	useSidebar,
-} from "~/components/ui/sidebar";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";
-import { cn } from "~/lib/utils";
+} from "~/client/components/ui/sidebar";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/client/components/ui/tooltip";
+import { cn } from "~/client/lib/utils";
 
 const items = [
 	{

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

@@ -0,0 +1,556 @@
+import { arktypeResolver } from "@hookform/resolvers/arktype";
+import { type } from "arktype";
+import { useEffect, useState } 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";
+import { Checkbox } from "./ui/checkbox";
+
+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 },
+	r2: { backend: "r2" 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, setValue } = form;
+
+	const watchedBackend = watch("backend");
+	const watchedIsExistingRepository = watch("isExistingRepository");
+
+	const [passwordMode, setPasswordMode] = useState<"default" | "custom">("default");
+
+	const { data: rcloneRemotes, isLoading: isLoadingRemotes } = useQuery({
+		...listRcloneRemotesOptions(),
+	});
+
+	useEffect(() => {
+		form.reset({
+			name: form.getValues().name,
+			isExistingRepository: form.getValues().isExistingRepository,
+			customPassword: form.getValues().customPassword,
+			...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="r2">Cloudflare R2</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>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="isExistingRepository"
+					render={({ field }) => (
+						<FormItem className="flex flex-row items-center space-x-3">
+							<FormControl>
+								<Checkbox
+									checked={field.value}
+									onCheckedChange={(checked) => {
+										field.onChange(checked);
+										if (!checked) {
+											setPasswordMode("default");
+											setValue("customPassword", undefined);
+										}
+									}}
+								/>
+							</FormControl>
+							<div className="space-y-1">
+								<FormLabel>Import existing repository</FormLabel>
+								<FormDescription>Check this if the repository already exists at the specified location</FormDescription>
+							</div>
+						</FormItem>
+					)}
+				/>
+				{watchedIsExistingRepository && (
+					<>
+						<FormItem>
+							<FormLabel>Repository Password</FormLabel>
+							<Select
+								onValueChange={(value) => {
+									setPasswordMode(value as "default" | "custom");
+									if (value === "default") {
+										setValue("customPassword", undefined);
+									}
+								}}
+								defaultValue={passwordMode}
+								value={passwordMode}
+							>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue placeholder="Select password option" />
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									<SelectItem value="default">Use Ironmount's password</SelectItem>
+									<SelectItem value="custom">Enter password manually</SelectItem>
+								</SelectContent>
+							</Select>
+							<FormDescription>
+								Choose whether to use Ironmount's master password or enter a custom password for the existing
+								repository.
+							</FormDescription>
+						</FormItem>
+
+						{passwordMode === "custom" && (
+							<FormField
+								control={form.control}
+								name="customPassword"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Repository Password</FormLabel>
+										<FormControl>
+											<Input type="password" placeholder="Enter repository password" {...field} />
+										</FormControl>
+										<FormDescription>
+											The password used to encrypt this repository. It will be stored securely.
+										</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 === "r2" && (
+					<>
+						<FormField
+							control={form.control}
+							name="endpoint"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Endpoint</FormLabel>
+									<FormControl>
+										<Input placeholder="<account-id>.r2.cloudflarestorage.com" {...field} />
+									</FormControl>
+									<FormDescription>
+										R2 endpoint (without https://). Find in R2 dashboard under bucket settings.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="bucket"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Bucket</FormLabel>
+									<FormControl>
+										<Input placeholder="my-backup-bucket" {...field} />
+									</FormControl>
+									<FormDescription>R2 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="Access Key ID from R2 API tokens" {...field} />
+									</FormControl>
+									<FormDescription>R2 API token Access Key ID (create in Cloudflare R2 dashboard).</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>R2 API token Secret Access Key (shown once when creating token).</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-form.tsx

@@ -1,18 +1,18 @@
 import { arktypeResolver } from "@hookform/resolvers/arktype";
-import { volumeConfigSchema } from "@ironmount/schemas";
 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 { testConnectionMutation } from "~/api-client/@tanstack/react-query.gen";
-import { cn, slugify } from "~/lib/utils";
+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",
@@ -50,13 +50,15 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 	const { watch, getValues } = form;
 
 	const watchedBackend = watch("backend");
-	const watchedName = watch("name");
 
 	useEffect(() => {
 		if (mode === "create") {
-			form.reset({ name: watchedName, ...defaultValuesForType[watchedBackend as keyof typeof defaultValuesForType] });
+			form.reset({
+				name: form.getValues().name,
+				...defaultValuesForType[watchedBackend as keyof typeof defaultValuesForType],
+			});
 		}
-	}, [watchedBackend, watchedName, form.reset, mode]);
+	}, [watchedBackend, form, mode]);
 
 	const [testMessage, setTestMessage] = useState<{ success: boolean; message: string } | null>(null);
 
@@ -141,19 +143,17 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 						control={form.control}
 						name="path"
 						render={({ field }) => {
-							const [showBrowser, setShowBrowser] = useState(!field.value || field.value === "/");
-
 							return (
 								<FormItem>
 									<FormLabel>Directory Path</FormLabel>
 									<FormControl>
-										{!showBrowser && field.value ? (
+										{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={() => setShowBrowser(true)}>
+												<Button type="button" variant="outline" size="sm" onClick={() => field.onChange("")}>
 													Change
 												</Button>
 											</div>
@@ -536,42 +536,44 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 					</>
 				)}
 
-				<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}
+				{watchedBackend !== "directory" && (
+					<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>
-					)}
-				</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

app/client/components/directory-browser.tsx

@@ -0,0 +1,74 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { FileTree } from "./file-tree";
+import { ScrollArea } from "./ui/scroll-area";
+import { browseFilesystemOptions } from "../api-client/@tanstack/react-query.gen";
+import { useFileBrowser } from "../hooks/use-file-browser";
+
+type Props = {
+	onSelectPath: (path: string) => void;
+	selectedPath?: string;
+};
+
+export const DirectoryBrowser = ({ onSelectPath, selectedPath }: Props) => {
+	const queryClient = useQueryClient();
+
+	const { data, isLoading } = useQuery({
+		...browseFilesystemOptions({ query: { path: "/" } }),
+	});
+
+	const fileBrowser = useFileBrowser({
+		initialData: data,
+		isLoading,
+		fetchFolder: async (path) => {
+			return await queryClient.ensureQueryData(browseFilesystemOptions({ query: { path } }));
+		},
+		prefetchFolder: (path) => {
+			queryClient.prefetchQuery(browseFilesystemOptions({ query: { path } }));
+		},
+	});
+
+	if (fileBrowser.isLoading) {
+		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 (fileBrowser.isEmpty) {
+		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={fileBrowser.fileArray}
+					onFolderExpand={fileBrowser.handleFolderExpand}
+					onFolderHover={fileBrowser.handleFolderHover}
+					expandedFolders={fileBrowser.expandedFolders}
+					loadingFolders={fileBrowser.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

@@ -17,7 +17,7 @@ export function EmptyState(props: EmptyStateProps) {
 					<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-gradient-to-br from-primary/20 to-primary/5 border-2 border-primary/20">
+					<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>

app/client/components/file-tree.tsx

@@ -10,8 +10,8 @@
 
 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 "~/lib/utils";
-import { Checkbox } from "~/components/ui/checkbox";
+import { cn } from "~/client/lib/utils";
+import { Checkbox } from "~/client/components/ui/checkbox";
 
 const NODE_PADDING_LEFT = 12;
 

app/client/components/grid-background.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 
 interface GridBackgroundProps {
 	children: ReactNode;
@@ -12,9 +12,9 @@ export function GridBackground({ children, className, containerClassName }: Grid
 		<div
 			className={cn(
 				"relative min-h-full w-full overflow-x-hidden",
-				"[background-size:20px_20px] sm:[background-size:40px_40px]",
-				"[background-image:linear-gradient(to_right,#e4e4e7_1px,transparent_1px),linear-gradient(to_bottom,#e4e4e7_1px,transparent_1px)]",
-				"dark:[background-image:linear-gradient(to_right,#262626_1px,transparent_1px),linear-gradient(to_bottom,#262626_1px,transparent_1px)]",
+				"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,
 			)}
 		>

app/client/components/layout.tsx

@@ -2,7 +2,6 @@ import { useMutation } from "@tanstack/react-query";
 import { LifeBuoy } from "lucide-react";
 import { Outlet, redirect, useNavigate } from "react-router";
 import { toast } from "sonner";
-import { logoutMutation } from "~/api-client/@tanstack/react-query.gen";
 import { appContext } from "~/context";
 import { authMiddleware } from "~/middleware/auth";
 import type { Route } from "./+types/layout";
@@ -11,6 +10,7 @@ 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];
 
@@ -42,7 +42,7 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
 		<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 flex-shrink-0">
+				<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 />

app/client/components/onoff.tsx

@@ -1,4 +1,4 @@
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 import { Switch } from "./ui/switch";
 
 type Props = {

app/client/components/repository-icon.tsx

@@ -1,5 +1,5 @@
-import type { RepositoryBackend } from "@ironmount/schemas/restic";
 import { Database, HardDrive, Cloud } from "lucide-react";
+import type { RepositoryBackend } from "~/schemas/restic";
 
 type Props = {
 	backend: RepositoryBackend;
@@ -12,6 +12,8 @@ export const RepositoryIcon = ({ backend, className = "h-4 w-4" }: Props) => {
 			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

@@ -1,10 +1,10 @@
 import { Calendar, Clock, Database, FolderTree, HardDrive } from "lucide-react";
 import { useNavigate } from "react-router";
-import type { ListSnapshotsResponse } from "~/api-client/types.gen";
-import { ByteSize } from "~/components/bytes-size";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
-import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
+import { 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];
 

app/client/components/status-dot.tsx

@@ -1,5 +1,5 @@
-import type { VolumeStatus } from "~/lib/types";
-import { cn } from "~/lib/utils";
+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 }) => {
@@ -38,10 +38,7 @@ export const StatusDot = ({ status }: { status: VolumeStatus }) => {
 							)}
 						/>
 					)}
-					<span
-						aria-label={status}
-						className={cn("relative inline-flex size-3 rounded-full", `${statusMapping.color}`)}
-					/>
+					<span className={cn("relative inline-flex size-3 rounded-full", `${statusMapping.color}`)} />
 				</span>
 			</TooltipTrigger>
 			<TooltipContent>

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

@@ -1,7 +1,7 @@
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import type * as React from "react";
-import { buttonVariants } from "~/components/ui/button";
-import { cn } from "~/lib/utils";
+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} />;

app/client/components/ui/alert.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "~/lib/utils";
+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",

app/client/components/ui/badge.tsx

@@ -2,7 +2,7 @@ import type * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "~/lib/utils";
+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",

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

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { Loader2 } from "lucide-react";
 import type * as React from "react";
 
-import { cn } from "~/lib/utils";
+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",

app/client/components/ui/card.tsx

@@ -1,6 +1,6 @@
 import type * as React from "react";
 
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 
 function Card({ className, children, ...props }: React.ComponentProps<"div">) {
 	return (

app/client/components/ui/chart.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
 
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const;

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/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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
+import type * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import {
 	Controller,
@@ -11,8 +11,8 @@ import {
 	type FieldValues,
 } from "react-hook-form";
 
-import { cn } from "~/lib/utils";
-import { Label } from "~/components/ui/label";
+import { cn } from "~/client/lib/utils";
+import { Label } from "~/client/components/ui/label";
 
 const Form = FormProvider;
 

app/client/components/ui/input.tsx

@@ -1,6 +1,6 @@
 import type * as React from "react";
 
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 	return (

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

@@ -1,7 +1,7 @@
-import * as React from "react";
+import type * as React from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 
 function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>) {
 	return (

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

@@ -1,24 +1,18 @@
-import * as React from "react";
+import type * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 
-function Select({
-	...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
 	return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
 
-function SelectGroup({
-	...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
 	return <SelectPrimitive.Group data-slot="select-group" {...props} />;
 }
 
-function SelectValue({
-	...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
 	return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
@@ -83,10 +77,7 @@ function SelectContent({
 	);
 }
 
-function SelectLabel({
-	className,
-	...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
 	return (
 		<SelectPrimitive.Label
 			data-slot="select-label"
@@ -96,11 +87,7 @@ function SelectLabel({
 	);
 }
 
-function SelectItem({
-	className,
-	children,
-	...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
 	return (
 		<SelectPrimitive.Item
 			data-slot="select-item"
@@ -120,10 +107,7 @@ function SelectItem({
 	);
 }
 
-function SelectSeparator({
-	className,
-	...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
 	return (
 		<SelectPrimitive.Separator
 			data-slot="select-separator"
@@ -133,17 +117,11 @@ function SelectSeparator({
 	);
 }
 
-function SelectScrollUpButton({
-	className,
-	...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+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,
-			)}
+			className={cn("flex cursor-default items-center justify-center py-1", className)}
 			{...props}
 		>
 			<ChevronUpIcon className="size-4" />
@@ -158,10 +136,7 @@ function SelectScrollDownButton({
 	return (
 		<SelectPrimitive.ScrollDownButton
 			data-slot="select-scroll-down-button"
-			className={cn(
-				"flex cursor-default items-center justify-center py-1",
-				className,
-			)}
+			className={cn("flex cursor-default items-center justify-center py-1", className)}
 			{...props}
 		>
 			<ChevronDownIcon className="size-4" />

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

@@ -5,14 +5,14 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import { PanelLeftIcon } from "lucide-react";
 
-import { useIsMobile } from "~/hooks/use-mobile";
-import { cn } from "~/lib/utils";
-import { Button } from "~/components/ui/button";
-import { Input } from "~/components/ui/input";
-import { Separator } from "~/components/ui/separator";
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "~/components/ui/sheet";
-import { Skeleton } from "~/components/ui/skeleton";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";
+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;

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/switch.tsx

@@ -1,7 +1,7 @@
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import type * as React from "react";
 
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 
 function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
 	return (

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

@@ -1,7 +1,7 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import type * as React from "react";
 
-import { cn } from "~/lib/utils";
+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} />;

app/client/components/ui/textarea.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
+import type * as React from "react";
 
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
 	return (

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,99 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { FolderOpen } from "lucide-react";
+import { FileTree } from "~/client/components/file-tree";
+import { listFilesOptions } from "../api-client/@tanstack/react-query.gen";
+import { useFileBrowser } from "../hooks/use-file-browser";
+
+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 { data, isLoading, error } = useQuery({
+		...listFilesOptions({ path: { name: volumeName } }),
+		enabled,
+	});
+
+	const fileBrowser = useFileBrowser({
+		initialData: data,
+		isLoading,
+		fetchFolder: async (path) => {
+			return await queryClient.ensureQueryData(
+				listFilesOptions({
+					path: { name: volumeName },
+					query: { path },
+				}),
+			);
+		},
+		prefetchFolder: (path) => {
+			queryClient.prefetchQuery(
+				listFilesOptions({
+					path: { name: volumeName },
+					query: { path },
+				}),
+			);
+		},
+	});
+
+	if (fileBrowser.isLoading) {
+		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 (fileBrowser.isEmpty) {
+		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={fileBrowser.fileArray}
+				onFolderExpand={fileBrowser.handleFolderExpand}
+				onFolderHover={fileBrowser.handleFolderHover}
+				expandedFolders={fileBrowser.expandedFolders}
+				loadingFolders={fileBrowser.loadingFolders}
+				withCheckboxes={withCheckboxes}
+				selectedPaths={selectedPaths}
+				onSelectionChange={onSelectionChange}
+				foldersOnly={foldersOnly}
+			/>
+		</div>
+	);
+};

app/client/components/volume-icon.tsx

@@ -1,5 +1,5 @@
-import type { BackendType } from "@ironmount/schemas";
 import { Cloud, Folder, Server, Share2 } from "lucide-react";
+import type { BackendType } from "~/schemas/volumes";
 
 type VolumeIconProps = {
 	backend: BackendType;

app/client/hooks/use-file-browser.ts

@@ -0,0 +1,135 @@
+import { useCallback, useMemo, useState } from "react";
+import type { FileEntry } from "../components/file-tree";
+
+type FetchFolderFn = (
+	path: string,
+) => Promise<{ files?: FileEntry[]; directories?: Array<{ name: string; path: string }> }>;
+
+type PathTransformFns = {
+	strip?: (path: string) => string;
+	add?: (path: string) => string;
+};
+
+type UseFileBrowserOptions = {
+	initialData?: { files?: FileEntry[]; directories?: Array<{ name: string; path: string }> };
+	isLoading?: boolean;
+	fetchFolder: FetchFolderFn;
+	prefetchFolder?: (path: string) => void;
+	pathTransform?: PathTransformFns;
+	rootPath?: string;
+};
+
+export const useFileBrowser = (props: UseFileBrowserOptions) => {
+	const { initialData, isLoading, fetchFolder, prefetchFolder, pathTransform, rootPath = "/" } = props;
+	const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
+	const [fetchedFolders, setFetchedFolders] = useState<Set<string>>(new Set([rootPath]));
+	const [loadingFolders, setLoadingFolders] = useState<Set<string>>(new Set());
+	const [allFiles, setAllFiles] = useState<Map<string, FileEntry>>(new Map());
+
+	const stripPath = pathTransform?.strip;
+	const addPath = pathTransform?.add;
+
+	useMemo(() => {
+		if (initialData?.files) {
+			const files = initialData.files;
+			setAllFiles((prev) => {
+				const next = new Map(prev);
+				for (const file of files) {
+					const path = stripPath ? stripPath(file.path) : file.path;
+					if (path !== rootPath) {
+						next.set(path, { ...file, path });
+					}
+				}
+				return next;
+			});
+			if (rootPath) {
+				setFetchedFolders((prev) => new Set(prev).add(rootPath));
+			}
+		} else if (initialData?.directories) {
+			const directories = initialData.directories;
+			setAllFiles((prev) => {
+				const next = new Map(prev);
+				for (const dir of directories) {
+					next.set(dir.path, { name: dir.name, path: dir.path, type: "folder" });
+				}
+				return next;
+			});
+		}
+	}, [initialData, stripPath, rootPath]);
+
+	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 pathToFetch = addPath ? addPath(folderPath) : folderPath;
+					const result = await fetchFolder(pathToFetch);
+
+					if (result.files) {
+						const files = result.files;
+						setAllFiles((prev) => {
+							const next = new Map(prev);
+							for (const file of files) {
+								const strippedPath = stripPath ? stripPath(file.path) : file.path;
+								// Skip the directory itself
+								if (strippedPath !== folderPath) {
+									next.set(strippedPath, { ...file, path: strippedPath });
+								}
+							}
+							return next;
+						});
+					} else if (result.directories) {
+						const directories = result.directories;
+						setAllFiles((prev) => {
+							const next = new Map(prev);
+							for (const dir of 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, fetchFolder, stripPath, addPath],
+	);
+
+	const handleFolderHover = useCallback(
+		(folderPath: string) => {
+			if (!fetchedFolders.has(folderPath) && !loadingFolders.has(folderPath) && prefetchFolder) {
+				const pathToPrefetch = addPath ? addPath(folderPath) : folderPath;
+				prefetchFolder(pathToPrefetch);
+			}
+		},
+		[fetchedFolders, loadingFolders, prefetchFolder, addPath],
+	);
+
+	return {
+		fileArray,
+		expandedFolders,
+		loadingFolders,
+		handleFolderExpand,
+		handleFolderHover,
+		isLoading: isLoading && fileArray.length === 0,
+		isEmpty: fileArray.length === 0 && !isLoading,
+	};
+};

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-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/types.ts

@@ -4,7 +4,7 @@ import type {
 	GetRepositoryResponse,
 	GetVolumeResponse,
 	ListSnapshotsResponse,
-} from "~/api-client";
+} from "../api-client";
 
 export type Volume = GetVolumeResponse["volume"];
 export type StatFs = GetVolumeResponse["statfs"];

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

@@ -3,14 +3,14 @@ import { AlertTriangle, Download } from "lucide-react";
 import { useState } from "react";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
-import { downloadResticPasswordMutation } from "~/api-client/@tanstack/react-query.gen";
-import { AuthLayout } from "~/components/auth-layout";
-import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
-import { Button } from "~/components/ui/button";
-import { Input } from "~/components/ui/input";
-import { Label } from "~/components/ui/label";
+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];
 

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

@@ -4,13 +4,13 @@ import { type } from "arktype";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
-import { loginMutation } from "~/api-client/@tanstack/react-query.gen";
-import { AuthLayout } from "~/components/auth-layout";
-import { Button } from "~/components/ui/button";
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
-import { Input } from "~/components/ui/input";
+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];
 

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

@@ -4,13 +4,21 @@ import { type } from "arktype";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
-import { registerMutation } from "~/api-client/@tanstack/react-query.gen";
-import { AuthLayout } from "~/components/auth-layout";
-import { Button } from "~/components/ui/button";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
-import { Input } from "~/components/ui/input";
+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];
 

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

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
-import { ByteSize, formatBytes } from "~/components/bytes-size";
-import { Card } from "~/components/ui/card";
-import { Progress } from "~/components/ui/progress";
-import { type BackupProgressEvent, useServerEvents } from "~/hooks/use-server-events";
+import { 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 = {

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

@@ -1,5 +1,5 @@
-import { cn } from "~/lib/utils";
-import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
+import { cn } from "~/client/lib/utils";
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/client/components/ui/tooltip";
 
 type BackupStatus = "active" | "paused" | "error" | "in_progress";
 
@@ -7,7 +7,11 @@ export const BackupStatusDot = ({
 	enabled,
 	hasError,
 	isInProgress,
-}: { enabled: boolean; hasError?: boolean; isInProgress?: boolean }) => {
+}: {
+	enabled: boolean;
+	hasError?: boolean;
+	isInProgress?: boolean;
+}) => {
 	let status: BackupStatus = "paused";
 	if (isInProgress) {
 		status = "in_progress";

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

@@ -3,15 +3,23 @@ import { useQuery } from "@tanstack/react-query";
 import { type } from "arktype";
 import { useCallback, useState } from "react";
 import { useForm } from "react-hook-form";
-import { listRepositoriesOptions } from "~/api-client/@tanstack/react-query.gen";
-import { RepositoryIcon } from "~/components/repository-icon";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
-import { Input } from "~/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select";
-import { Textarea } from "~/components/ui/textarea";
-import { VolumeFileBrowser } from "~/components/volume-file-browser";
-import type { BackupSchedule, Volume } from "~/lib/types";
+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({
@@ -128,7 +136,7 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 		<Form {...form}>
 			<form
 				onSubmit={form.handleSubmit(handleSubmit)}
-				className="grid gap-4 xl:grid-cols-[minmax(0,_2.3fr)_minmax(320px,_1fr)]"
+				className="grid gap-4 xl:grid-cols-[minmax(0,2.3fr)_minmax(320px,1fr)]"
 				id={formId}
 			>
 				<div className="grid gap-4">
@@ -246,7 +254,7 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 						<CardHeader>
 							<CardTitle>Backup paths</CardTitle>
 							<CardDescription>
-								Select which folders to include in the backup. If no paths are selected, the entire volume will be
+								Select which folders or files to include in the backup. If no paths are selected, the entire volume will be
 								backed up.
 							</CardDescription>
 						</CardHeader>
@@ -256,7 +264,7 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 								selectedPaths={selectedPaths}
 								onSelectionChange={handleSelectionChange}
 								withCheckboxes={true}
-								foldersOnly={true}
+								foldersOnly={false}
 								className="flex-1 border rounded-md bg-card p-2 min-h-[300px] max-h-[400px] overflow-auto"
 							/>
 							{selectedPaths.size > 0 && (

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

@@ -1,8 +1,8 @@
-import { Pencil, Play, Square, Trash2 } from "lucide-react";
+import { Eraser, Pencil, Play, Square, Trash2 } from "lucide-react";
 import { useMemo, useState } from "react";
-import { OnOff } from "~/components/onoff";
-import { Button } from "~/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+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,
@@ -11,9 +11,13 @@ import {
 	AlertDialogDescription,
 	AlertDialogHeader,
 	AlertDialogTitle,
-} from "~/components/ui/alert-dialog";
-import type { BackupSchedule } from "~/lib/types";
+} from "~/client/components/ui/alert-dialog";
+import type { BackupSchedule } from "~/client/lib/types";
 import { BackupProgressCard } from "./backup-progress-card";
+import { runForgetMutation } from "~/client/api-client/@tanstack/react-query.gen";
+import { useMutation } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { parseError } from "~/client/lib/errors";
 
 type Props = {
 	schedule: BackupSchedule;
@@ -28,6 +32,17 @@ export const ScheduleSummary = (props: Props) => {
 	const { schedule, handleToggleEnabled, handleRunBackupNow, handleStopBackup, handleDeleteSchedule, setIsEditMode } =
 		props;
 	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+	const [showForgetConfirm, setShowForgetConfirm] = useState(false);
+
+	const runForget = useMutation({
+		...runForgetMutation(),
+		onSuccess: () => {
+			toast.success("Retention policy applied successfully");
+		},
+		onError: (error) => {
+			toast.error("Failed to apply retention policy", { description: parseError(error)?.message });
+		},
+	});
 
 	const summary = useMemo(() => {
 		const scheduleLabel = schedule ? schedule.cronExpression : "-";
@@ -56,6 +71,11 @@ export const ScheduleSummary = (props: Props) => {
 		handleDeleteSchedule();
 	};
 
+	const handleConfirmForget = () => {
+		setShowForgetConfirm(false);
+		runForget.mutate({ path: { scheduleId: schedule.id.toString() } });
+	};
+
 	return (
 		<div className="space-y-4">
 			<Card>
@@ -89,6 +109,18 @@ export const ScheduleSummary = (props: Props) => {
 								<span className="sm:inline">Backup now</span>
 							</Button>
 						)}
+						{schedule.retentionPolicy && (
+							<Button
+								variant="outline"
+								size="sm"
+								loading={runForget.isPending}
+								onClick={() => setShowForgetConfirm(true)}
+								className="w-full sm:w-auto"
+							>
+								<Eraser className="h-4 w-4 mr-2" />
+								<span className="sm:inline">Run cleanup</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>
@@ -167,6 +199,22 @@ export const ScheduleSummary = (props: Props) => {
 					</div>
 				</AlertDialogContent>
 			</AlertDialog>
+
+			<AlertDialog open={showForgetConfirm} onOpenChange={setShowForgetConfirm}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Run retention policy cleanup?</AlertDialogTitle>
+						<AlertDialogDescription>
+							This will apply the retention policy and permanently delete old snapshots according to the configured
+							rules ({summary.retentionLabel}). This action cannot be undone.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<div className="flex gap-3 justify-end">
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction onClick={handleConfirmForget}>Run cleanup</AlertDialogAction>
+					</div>
+				</AlertDialogContent>
+			</AlertDialog>
 		</div>
 	);
 };

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

@@ -1,12 +1,11 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { FileIcon } from "lucide-react";
-import { listSnapshotFilesOptions, restoreSnapshotMutation } from "~/api-client/@tanstack/react-query.gen";
-import { FileTree, type FileEntry } from "~/components/file-tree";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
-import { Button } from "~/components/ui/button";
-import { Checkbox } from "~/components/ui/checkbox";
-import { Label } from "~/components/ui/label";
+import { FileTree } 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,
@@ -16,10 +15,12 @@ import {
 	AlertDialogFooter,
 	AlertDialogHeader,
 	AlertDialogTitle,
-} from "~/components/ui/alert-dialog";
-import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
-import type { Snapshot, Volume } from "~/lib/types";
+} 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";
+import { useFileBrowser } from "~/client/hooks/use-file-browser";
 
 interface Props {
 	snapshot: Snapshot;
@@ -33,15 +34,11 @@ export const SnapshotFileBrowser = (props: 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 volumeBasePath = snapshot.paths[0]?.match(/^(.*?_data)(\/|$)/)?.[1] || "/";
 
 	const { data: filesData, isLoading: filesLoading } = useQuery({
 		...listSnapshotFilesOptions({
@@ -72,89 +69,30 @@ export const SnapshotFileBrowser = (props: Props) => {
 		[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.fetchQuery(
-						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;
-					});
-				}
-			}
+	const fileBrowser = useFileBrowser({
+		initialData: filesData,
+		isLoading: filesLoading,
+		fetchFolder: async (path) => {
+			return await queryClient.ensureQueryData(
+				listSnapshotFilesOptions({
+					path: { name: repositoryName, snapshotId: snapshot.short_id },
+					query: { path },
+				}),
+			);
 		},
-		[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 },
-					}),
-				);
-			}
+		prefetchFolder: (path) => {
+			queryClient.prefetchQuery(
+				listSnapshotFilesOptions({
+					path: { name: repositoryName, snapshotId: snapshot.short_id },
+					query: { path },
+				}),
+			);
 		},
-		[repositoryName, snapshot, fetchedFolders, loadingFolders, queryClient, addBasePath],
-	);
+		pathTransform: {
+			strip: stripBasePath,
+			add: addBasePath,
+		},
+	});
 
 	const { mutate: restoreSnapshot, isPending: isRestoring } = useMutation({
 		...restoreSnapshotMutation(),
@@ -225,27 +163,27 @@ export const SnapshotFileBrowser = (props: Props) => {
 					</div>
 				</CardHeader>
 				<CardContent className="flex-1 overflow-hidden flex flex-col p-0">
-					{filesLoading && fileArray.length === 0 && (
+					{fileBrowser.isLoading && (
 						<div className="flex items-center justify-center flex-1">
 							<p className="text-muted-foreground">Loading files...</p>
 						</div>
 					)}
 
-					{fileArray.length === 0 && !filesLoading && (
+					{fileBrowser.isEmpty && (
 						<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 && (
+					{!fileBrowser.isLoading && !fileBrowser.isEmpty && (
 						<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}
+								files={fileBrowser.fileArray}
+								onFolderExpand={fileBrowser.handleFolderExpand}
+								onFolderHover={fileBrowser.handleFolderHover}
+								expandedFolders={fileBrowser.expandedFolders}
+								loadingFolders={fileBrowser.loadingFolders}
 								className="px-2 py-2"
 								withCheckboxes={true}
 								selectedPaths={selectedPaths}

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

@@ -1,8 +1,8 @@
-import type { ListSnapshotsResponse } from "~/api-client/types.gen";
-import { cn } from "~/lib/utils";
-import { Card } from "~/components/ui/card";
-import { ByteSize } from "~/components/bytes-size";
+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;
@@ -56,7 +56,7 @@ export const SnapshotTimeline = (props: Props) => {
 			<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-child]:ml-2 [&>:last-child]:mr-2">
+						<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;

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

@@ -2,7 +2,7 @@ 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 "~/components/ui/button";
+import { Button } from "~/client/components/ui/button";
 import {
 	getBackupScheduleOptions,
 	runBackupNowMutation,
@@ -10,15 +10,22 @@ import {
 	listSnapshotsOptions,
 	updateBackupScheduleMutation,
 	stopBackupMutation,
-} from "~/api-client/@tanstack/react-query.gen";
-import { parseError } from "~/lib/errors";
+} 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 { getBackupSchedule } from "~/api-client";
 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 const handle = {
+	breadcrumb: (match: Route.MetaArgs) => [
+		{ label: "Backups", href: "/backups" },
+		{ label: `Schedule #${match.params.id}` },
+	],
+};
 
 export function meta(_: Route.MetaArgs) {
 	return [

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

@@ -1,13 +1,17 @@
 import { useQuery } from "@tanstack/react-query";
 import { CalendarClock, Database, HardDrive, Plus } from "lucide-react";
 import { Link } from "react-router";
-import { listBackupSchedules } from "~/api-client";
-import { listBackupSchedulesOptions } from "~/api-client/@tanstack/react-query.gen";
 import { BackupStatusDot } from "../components/backup-status-dot";
-import { EmptyState } from "~/components/empty-state";
-import { Button } from "~/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+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 const handle = {
+	breadcrumb: () => [{ label: "Backups" }],
+};
 
 export function meta(_: Route.MetaArgs) {
 	return [
@@ -68,7 +72,7 @@ export default function Backups({ loaderData }: Route.ComponentProps) {
 							<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 flex-shrink-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>

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

@@ -1,5 +1,5 @@
 import { useId, useState } from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { Database, HardDrive } from "lucide-react";
 import { Link, useNavigate } from "react-router";
 import { toast } from "sonner";
@@ -7,16 +7,20 @@ import {
 	createBackupScheduleMutation,
 	listRepositoriesOptions,
 	listVolumesOptions,
-} from "~/api-client/@tanstack/react-query.gen";
-import { Button } from "~/components/ui/button";
-import { Card, CardContent } from "~/components/ui/card";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select";
-import { parseError } from "~/lib/errors";
-import { EmptyState } from "~/components/empty-state";
+} 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 "~/api-client";
+import { listRepositories, listVolumes } from "~/client/api-client";
+
+export const handle = {
+	breadcrumb: () => [{ label: "Backups", href: "/backups" }, { label: "Create" }],
+};
 
 export function meta(_: Route.MetaArgs) {
 	return [
@@ -168,7 +172,7 @@ export default function CreateBackup({ loaderData }: Route.ComponentProps) {
 								<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-gradient-to-br from-primary/20 to-primary/5 border-2 border-primary/20">
+								<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>

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

@@ -2,9 +2,9 @@ import { useMutation } from "@tanstack/react-query";
 import { RotateCcw } from "lucide-react";
 import { useId, useState } from "react";
 import { toast } from "sonner";
-import { restoreSnapshotMutation } from "~/api-client/@tanstack/react-query.gen";
-import { parseError } from "~/lib/errors";
-import { Button } from "~/components/ui/button";
+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,
@@ -13,8 +13,8 @@ import {
 	DialogHeader,
 	DialogTitle,
 	DialogTrigger,
-} from "~/components/ui/dialog";
-import { ScrollArea } from "~/components/ui/scroll-area";
+} from "~/client/components/ui/dialog";
+import { ScrollArea } from "~/client/components/ui/scroll-area";
 import { RestoreSnapshotForm, type RestoreSnapshotFormValues } from "./restore-snapshot-form";
 
 type Props = {

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

@@ -1,8 +1,16 @@
 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 "~/components/ui/form";
-import { Input } from "~/components/ui/input";
+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?",

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

@@ -0,0 +1,89 @@
+import { useMutation } from "@tanstack/react-query";
+import { Database } from "lucide-react";
+import { useId } from "react";
+import { useNavigate } from "react-router";
+import { toast } from "sonner";
+import { createRepositoryMutation } from "~/client/api-client/@tanstack/react-query.gen";
+import { CreateRepositoryForm, type RepositoryFormValues } from "~/client/components/create-repository-form";
+import { Button } from "~/client/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "~/client/components/ui/card";
+import { parseError } from "~/client/lib/errors";
+import type { Route } from "./+types/create-repository";
+import { Alert, AlertDescription } from "~/client/components/ui/alert";
+
+export const handle = {
+	breadcrumb: () => [{ label: "Repositories", href: "/repositories" }, { label: "Create" }],
+};
+
+export function meta(_: Route.MetaArgs) {
+	return [
+		{ title: "Create Repository" },
+		{
+			name: "description",
+			content: "Create a new backup repository with encryption and compression.",
+		},
+	];
+}
+
+export default function CreateRepository() {
+	const navigate = useNavigate();
+	const formId = useId();
+
+	const createRepository = useMutation({
+		...createRepositoryMutation(),
+		onSuccess: (data) => {
+			toast.success("Repository created successfully");
+			navigate(`/repositories/${data.repository.name}`);
+		},
+	});
+
+	const handleSubmit = (values: RepositoryFormValues) => {
+		createRepository.mutate({
+			body: {
+				config: values,
+				name: values.name,
+				compressionMode: values.compressionMode,
+			},
+		});
+	};
+
+	return (
+		<div className="container mx-auto space-y-6">
+			<Card>
+				<CardHeader>
+					<div className="flex items-center gap-3">
+						<div className="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
+							<Database className="w-5 h-5 text-primary" />
+						</div>
+						<CardTitle>Create Repository</CardTitle>
+					</div>
+				</CardHeader>
+				<CardContent className="space-y-6">
+					{createRepository.isError && (
+						<Alert variant="destructive">
+							<AlertDescription>
+								<strong>Failed to create repository:</strong>
+								<br />
+								{parseError(createRepository.error)?.message}
+							</AlertDescription>
+						</Alert>
+					)}
+					<CreateRepositoryForm
+						mode="create"
+						formId={formId}
+						onSubmit={handleSubmit}
+						loading={createRepository.isPending}
+					/>
+					<div className="flex justify-end gap-2 pt-4 border-t">
+						<Button type="button" variant="secondary" onClick={() => navigate("/repositories")}>
+							Cancel
+						</Button>
+						<Button type="submit" form={formId} loading={createRepository.isPending}>
+							Create Repository
+						</Button>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

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

@@ -1,19 +1,22 @@
 import { useQuery } from "@tanstack/react-query";
-import { Database, RotateCcw } from "lucide-react";
+import { Database, Plus, RotateCcw } from "lucide-react";
 import { useState } from "react";
 import { useNavigate } from "react-router";
-import { listRepositories } from "~/api-client/sdk.gen";
-import { listRepositoriesOptions } from "~/api-client/@tanstack/react-query.gen";
-import { CreateRepositoryDialog } from "~/components/create-repository-dialog";
-import { RepositoryIcon } from "~/components/repository-icon";
-import { Button } from "~/components/ui/button";
-import { Card } from "~/components/ui/card";
-import { Input } from "~/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
+import { listRepositories } from "~/client/api-client/sdk.gen";
+import { listRepositoriesOptions } from "~/client/api-client/@tanstack/react-query.gen";
+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 "~/lib/utils";
-import { EmptyState } from "~/components/empty-state";
+import { cn } from "~/client/lib/utils";
+import { EmptyState } from "~/client/components/empty-state";
+
+export const handle = {
+	breadcrumb: () => [{ label: "Repositories" }],
+};
 
 export function meta(_: Route.MetaArgs) {
 	return [
@@ -35,7 +38,6 @@ 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("");
@@ -69,7 +71,12 @@ export default function Repositories({ loaderData }: Route.ComponentProps) {
 				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} />}
+				button={
+					<Button onClick={() => navigate("/repositories/create")}>
+						<Plus size={16} className="mr-2" />
+						Create Repository
+					</Button>
+				}
 			/>
 		);
 	}
@@ -79,13 +86,13 @@ export default function Repositories({ loaderData }: Route.ComponentProps) {
 			<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-[-1px] mt-[-1px]"
+						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-[-1px] mt-[-1px]">
+						<SelectTrigger className="w-full lg:w-[180px] min-w-[180px] -mr-px -mt-px">
 							<SelectValue placeholder="All status" />
 						</SelectTrigger>
 						<SelectContent>
@@ -95,13 +102,14 @@ export default function Repositories({ loaderData }: Route.ComponentProps) {
 						</SelectContent>
 					</Select>
 					<Select value={backendFilter} onValueChange={setBackendFilter}>
-						<SelectTrigger className="w-full lg:w-[180px] min-w-[180px] mt-[-1px]">
+						<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) && (
@@ -111,7 +119,10 @@ export default function Repositories({ loaderData }: Route.ComponentProps) {
 						</Button>
 					)}
 				</span>
-				<CreateRepositoryDialog open={createRepositoryOpen} setOpen={setCreateRepositoryOpen} />
+				<Button onClick={() => navigate("/repositories/create")}>
+					<Plus size={16} className="mr-2" />
+					Create Repository
+				</Button>
 			</div>
 			<div className="overflow-x-auto">
 				<Table className="border-t">

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

@@ -7,8 +7,8 @@ import {
 	doctorRepositoryMutation,
 	getRepositoryOptions,
 	listSnapshotsOptions,
-} from "~/api-client/@tanstack/react-query.gen";
-import { Button } from "~/components/ui/button";
+} from "~/client/api-client/@tanstack/react-query.gen";
+import { Button } from "~/client/components/ui/button";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -17,16 +17,23 @@ import {
 	AlertDialogDescription,
 	AlertDialogHeader,
 	AlertDialogTitle,
-} from "~/components/ui/alert-dialog";
-import { parseError } from "~/lib/errors";
-import { getRepository } from "~/api-client/sdk.gen";
+} 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 "~/lib/utils";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
+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 const handle = {
+	breadcrumb: (match: Route.MetaArgs) => [
+		{ label: "Repositories", href: "/repositories" },
+		{ label: match.params.name },
+	],
+};
+
 export function meta({ params }: Route.MetaArgs) {
 	return [
 		{ title: params.name },

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

@@ -1,12 +1,20 @@
 import { useQuery } from "@tanstack/react-query";
 import { redirect, useParams } from "react-router";
-import { listSnapshotFilesOptions } from "~/api-client/@tanstack/react-query.gen";
-import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+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 "~/modules/backups/components/snapshot-file-browser";
-import { getSnapshotDetails } from "~/api-client";
+import { SnapshotFileBrowser } from "~/client/modules/backups/components/snapshot-file-browser";
+import { getSnapshotDetails } from "~/client/api-client";
 import type { Route } from "./+types/snapshot-details";
 
+export const handle = {
+	breadcrumb: (match: Route.MetaArgs) => [
+		{ label: "Repositories", href: "/repositories" },
+		{ label: match.params.name, href: `/repositories/${match.params.name}` },
+		{ label: match.params.snapshotId },
+	],
+};
+
 export function meta({ params }: Route.MetaArgs) {
 	return [
 		{ title: `Snapshot ${params.snapshotId}` },

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

@@ -1,5 +1,5 @@
-import { Card } from "~/components/ui/card";
-import type { Repository } from "~/lib/types";
+import { Card } from "~/client/components/ui/card";
+import type { Repository } from "~/client/lib/types";
 
 type Props = {
 	repository: Repository;
@@ -30,7 +30,7 @@ export const RepositoryInfoTabContent = ({ repository }: Props) => {
 						</div>
 						<div>
 							<div className="text-sm font-medium text-muted-foreground">Created At</div>
-							<p className="mt-1 text-sm">{new Date(repository.createdAt).toLocaleString()}</p>
+							<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>

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

@@ -1,14 +1,13 @@
 import { useQuery } from "@tanstack/react-query";
 import { Database } from "lucide-react";
 import { useState } from "react";
-import { listSnapshotsOptions } from "~/api-client/@tanstack/react-query.gen";
-import { ByteSize } from "~/components/bytes-size";
-import { SnapshotsTable } from "~/components/snapshots-table";
-import { Button } from "~/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
-import { Input } from "~/components/ui/input";
-import { Table, TableBody, TableCell, TableRow } from "~/components/ui/table";
-import type { Repository, Snapshot } from "~/lib/types";
+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;
@@ -33,7 +32,7 @@ export const RepositorySnapshotsTabContent = ({ repository }: Props) => {
 		);
 	});
 
-	const hasNoFilteredSnapshots = !filteredSnapshots?.length && !data.length;
+	const hasNoFilteredSnapshots = !filteredSnapshots?.length;
 
 	if (repository.status === "error") {
 		return (
@@ -84,7 +83,7 @@ export const RepositorySnapshotsTabContent = ({ repository }: Props) => {
 						<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-gradient-to-br from-primary/20 to-primary/5 border-2 border-primary/20">
+						<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>
@@ -111,7 +110,7 @@ export const RepositorySnapshotsTabContent = ({ repository }: Props) => {
 					</div>
 					<div className="flex gap-2 items-center">
 						<Input
-							className="w-full lg:w-[240px]"
+							className="w-full lg:w-60"
 							placeholder="Search snapshots..."
 							value={searchQuery}
 							onChange={(e) => setSearchQuery(e.target.value)}
@@ -143,18 +142,6 @@ export const RepositorySnapshotsTabContent = ({ repository }: Props) => {
 						? "No snapshots match filters."
 						: `Showing ${filteredSnapshots.length} of ${data.length}`}
 				</span>
-				{!hasNoFilteredSnapshots && (
-					<span>
-						Total size:&nbsp;
-						<span className="text-strong-accent font-medium">
-							<ByteSize
-								bytes={filteredSnapshots.reduce((sum, s) => sum + s.size, 0)}
-								base={1024}
-								maximumFractionDigits={1}
-							/>
-						</span>
-					</span>
-				)}
 			</div>
 		</Card>
 	);

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

@@ -3,13 +3,8 @@ import { Download, KeyRound, User } from "lucide-react";
 import { useState } from "react";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
-import {
-	changePasswordMutation,
-	downloadResticPasswordMutation,
-	logoutMutation,
-} from "~/api-client/@tanstack/react-query.gen";
-import { Button } from "~/components/ui/button";
-import { Card, CardContent, CardDescription, CardTitle } from "~/components/ui/card";
+import { Button } from "~/client/components/ui/button";
+import { Card, CardContent, CardDescription, CardTitle } from "~/client/components/ui/card";
 import {
 	Dialog,
 	DialogContent,
@@ -18,11 +13,20 @@ import {
 	DialogHeader,
 	DialogTitle,
 	DialogTrigger,
-} from "~/components/ui/dialog";
-import { Input } from "~/components/ui/input";
-import { Label } from "~/components/ui/label";
+} 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 const handle = {
+	breadcrumb: () => [{ label: "Settings" }],
+};
 
 export function meta(_: Route.MetaArgs) {
 	return [

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

@@ -2,11 +2,11 @@ import { useMutation } from "@tanstack/react-query";
 import { formatDistanceToNow } from "date-fns";
 import { HeartIcon } from "lucide-react";
 import { toast } from "sonner";
-import { healthCheckVolumeMutation, updateVolumeMutation } from "~/api-client/@tanstack/react-query.gen";
-import { OnOff } from "~/components/onoff";
-import { Button } from "~/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
-import type { Volume } from "~/lib/types";
+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;
@@ -54,7 +54,7 @@ export const HealthchecksCard = ({ volume }: Props) => {
 			</CardHeader>
 			<CardContent>
 				<div className="flex flex-col flex-1 justify-start">
-					{volume.lastError && <span className="text-sm text-red-500 break-words">{volume.lastError}</span>}
+					{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>

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

@@ -3,10 +3,10 @@
 import { HardDrive, Unplug } from "lucide-react";
 import * as React from "react";
 import { Label, Pie, PieChart } from "recharts";
-import { ByteSize } from "~/components/bytes-size";
-import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
-import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "~/components/ui/chart";
-import type { StatFs } from "~/lib/types";
+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;

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

@@ -0,0 +1,83 @@
+import { useMutation } from "@tanstack/react-query";
+import { HardDrive } from "lucide-react";
+import { useId } from "react";
+import { useNavigate } from "react-router";
+import { toast } from "sonner";
+import { createVolumeMutation } from "~/client/api-client/@tanstack/react-query.gen";
+import { CreateVolumeForm, type FormValues } from "~/client/components/create-volume-form";
+import { Button } from "~/client/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "~/client/components/ui/card";
+import { parseError } from "~/client/lib/errors";
+import type { Route } from "./+types/create-volume";
+import { Alert, AlertDescription } from "~/client/components/ui/alert";
+
+export const handle = {
+	breadcrumb: () => [{ label: "Volumes", href: "/volumes" }, { label: "Create" }],
+};
+
+export function meta(_: Route.MetaArgs) {
+	return [
+		{ title: "Create Volume" },
+		{
+			name: "description",
+			content: "Create a new storage volume with automatic mounting and health checks.",
+		},
+	];
+}
+
+export default function CreateVolume() {
+	const navigate = useNavigate();
+	const formId = useId();
+
+	const createVolume = useMutation({
+		...createVolumeMutation(),
+		onSuccess: (data) => {
+			toast.success("Volume created successfully");
+			navigate(`/volumes/${data.name}`);
+		},
+	});
+
+	const handleSubmit = (values: FormValues) => {
+		createVolume.mutate({
+			body: {
+				config: values,
+				name: values.name,
+			},
+		});
+	};
+
+	return (
+		<div className="container mx-auto space-y-6">
+			<Card>
+				<CardHeader>
+					<div className="flex items-center gap-3">
+						<div className="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
+							<HardDrive className="w-5 h-5 text-primary" />
+						</div>
+						<CardTitle>Create Volume</CardTitle>
+					</div>
+				</CardHeader>
+				<CardContent className="space-y-6">
+					{createVolume.isError && (
+						<Alert variant="destructive">
+							<AlertDescription>
+								<strong>Failed to create volume:</strong>
+								<br />
+								{parseError(createVolume.error)?.message}
+							</AlertDescription>
+						</Alert>
+					)}
+					<CreateVolumeForm mode="create" formId={formId} onSubmit={handleSubmit} loading={createVolume.isPending} />
+					<div className="flex justify-end gap-2 pt-4 border-t">
+						<Button type="button" variant="secondary" onClick={() => navigate("/volumes")}>
+							Cancel
+						</Button>
+						<Button type="submit" form={formId} loading={createVolume.isPending}>
+							Create Volume
+						</Button>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

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

@@ -2,16 +2,9 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { useNavigate, useParams, useSearchParams } from "react-router";
 import { toast } from "sonner";
 import { useState } from "react";
-import {
-	deleteVolumeMutation,
-	getVolumeOptions,
-	getSystemInfoOptions,
-	mountVolumeMutation,
-	unmountVolumeMutation,
-} from "~/api-client/@tanstack/react-query.gen";
-import { StatusDot } from "~/components/status-dot";
-import { Button } from "~/components/ui/button";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
+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,
@@ -20,15 +13,27 @@ import {
 	AlertDialogDescription,
 	AlertDialogHeader,
 	AlertDialogTitle,
-} from "~/components/ui/alert-dialog";
-import { VolumeIcon } from "~/components/volume-icon";
-import { parseError } from "~/lib/errors";
-import { cn } from "~/lib/utils";
+} 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 { getVolume } from "~/api-client";
 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 const handle = {
+	breadcrumb: (match: Route.MetaArgs) => [{ label: "Volumes", href: "/volumes" }, { label: match.params.name }],
+};
 
 export function meta({ params }: Route.MetaArgs) {
 	return [
@@ -41,7 +46,7 @@ export function meta({ params }: Route.MetaArgs) {
 }
 
 export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
-	const volume = await getVolume({ path: { name: params.name ?? "" } });
+	const volume = await getVolume({ path: { name: params.name } });
 	if (volume.data) return volume.data;
 };
 
@@ -59,9 +64,7 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
 		refetchOnWindowFocus: true,
 	});
 
-	const { data: systemInfo } = useQuery({
-		...getSystemInfoOptions(),
-	});
+	const { capabilities } = useSystemInfo();
 
 	const deleteVol = useMutation({
 		...deleteVolumeMutation(),
@@ -114,7 +117,7 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
 	}
 
 	const { volume, statfs } = data;
-	const dockerAvailable = systemInfo?.capabilities?.docker ?? false;
+	const dockerAvailable = capabilities.docker;
 
 	return (
 		<>
@@ -150,7 +153,16 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
 				<TabsList className="mb-2">
 					<TabsTrigger value="info">Configuration</TabsTrigger>
 					<TabsTrigger value="files">Files</TabsTrigger>
-					{dockerAvailable && <TabsTrigger value="docker">Docker</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} />

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

@@ -1,19 +1,22 @@
 import { useQuery } from "@tanstack/react-query";
-import { HardDrive, RotateCcw } from "lucide-react";
+import { HardDrive, Plus, RotateCcw } from "lucide-react";
 import { useState } from "react";
 import { useNavigate } from "react-router";
-import { listVolumes } from "~/api-client";
-import { listVolumesOptions } from "~/api-client/@tanstack/react-query.gen";
-import { CreateVolumeDialog } from "~/components/create-volume-dialog";
-import { EmptyState } from "~/components/empty-state";
-import { StatusDot } from "~/components/status-dot";
-import { Button } from "~/components/ui/button";
-import { Card } from "~/components/ui/card";
-import { Input } from "~/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
-import { VolumeIcon } from "~/components/volume-icon";
+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 const handle = {
+	breadcrumb: () => [{ label: "Volumes" }],
+};
 
 export function meta(_: Route.MetaArgs) {
 	return [
@@ -32,7 +35,6 @@ export const clientLoader = async () => {
 };
 
 export default function Volumes({ loaderData }: Route.ComponentProps) {
-	const [createVolumeOpen, setCreateVolumeOpen] = useState(false);
 	const [searchQuery, setSearchQuery] = useState("");
 	const [statusFilter, setStatusFilter] = useState("");
 	const [backendFilter, setBackendFilter] = useState("");
@@ -69,7 +71,12 @@ export default function Volumes({ loaderData }: Route.ComponentProps) {
 				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} />}
+				button={
+					<Button onClick={() => navigate("/volumes/create")}>
+						<Plus size={16} className="mr-2" />
+						Create Volume
+					</Button>
+				}
 			/>
 		);
 	}
@@ -79,13 +86,13 @@ export default function Volumes({ loaderData }: Route.ComponentProps) {
 			<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-[-1px] mt-[-1px]"
+						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-[-1px] mt-[-1px]">
+						<SelectTrigger className="w-full lg:w-[180px] min-w-[180px] -mr-px -mt-px">
 							<SelectValue placeholder="All status" />
 						</SelectTrigger>
 						<SelectContent>
@@ -95,7 +102,7 @@ export default function Volumes({ loaderData }: Route.ComponentProps) {
 						</SelectContent>
 					</Select>
 					<Select value={backendFilter} onValueChange={setBackendFilter}>
-						<SelectTrigger className="w-full lg:w-[180px] min-w-[180px] mt-[-1px]">
+						<SelectTrigger className="w-full lg:w-[180px] min-w-[180px] -mt-px">
 							<SelectValue placeholder="All backends" />
 						</SelectTrigger>
 						<SelectContent>
@@ -111,7 +118,10 @@ export default function Volumes({ loaderData }: Route.ComponentProps) {
 						</Button>
 					)}
 				</span>
-				<CreateVolumeDialog open={createVolumeOpen} setOpen={setCreateVolumeOpen} />
+				<Button onClick={() => navigate("/volumes/create")}>
+					<Plus size={16} className="mr-2" />
+					Create Volume
+				</Button>
 			</div>
 			<div className="overflow-x-auto">
 				<Table className="border-t">

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

@@ -1,11 +1,11 @@
 import { useQuery } from "@tanstack/react-query";
 import { Unplug } from "lucide-react";
 import * as YML from "yaml";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
-import { CodeBlock } from "~/components/ui/code-block";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
-import type { Volume } from "~/lib/types";
-import { getContainersUsingVolumeOptions } from "../../../api-client/@tanstack/react-query.gen";
+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;
@@ -52,7 +52,7 @@ export const DockerTabContent = ({ volume }: Props) => {
 	};
 
 	return (
-		<div className="grid gap-4 xl:grid-cols-[minmax(0,_1fr)_minmax(0,_1fr)]">
+		<div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
 			<Card>
 				<CardHeader>
 					<CardTitle>Plug-and-play Docker integration</CardTitle>

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

@@ -1,7 +1,7 @@
 import { FolderOpen } from "lucide-react";
-import { VolumeFileBrowser } from "~/components/volume-file-browser";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
-import type { Volume } from "~/lib/types";
+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;