fix: cookie not secure

* 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,14 +12,12 @@
 !**/build.ts
 !**/components.json
 
-!apps/**/src/**
-!apps/**/drizzle/**
-!apps/**/app/**
-!apps/**/public/**
-
-!packages/**/src/**
+!src/**
+!app/**
+!public/**
 
 # License files and attributions
 !LICENSE
 !NOTICES.md
 !LICENSES/**
+

.gitignore

@@ -1,47 +1,11 @@
-# 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
-
-mutagen.yml.lock
-
-data/
-
 CLAUDE.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

@@ -20,17 +20,14 @@
 
 ## Intro
 
-Ironmount is a backup automation platform that helps you protect your data across multiple storage backends. Built on top of Restic, it provides an intuitive web interface to schedule, manage, and monitor encrypted backups of your remote storage. With support for Docker integration, Ironmount makes it easy to backup your container volumes automatically.
+Ironmount is a backup automation tool that helps you save your data across multiple storage backends. Built on top of Restic, it provides an modern web interface to schedule, manage, and monitor encrypted backups of your remote storage.
 
 ### Features
 
-- 💾  **Automated backups** with encryption, compression and retention policies powered by Restic
-- 📅  **Flexible scheduling** using cron expressions for automated backup jobs
-- 🔐  **End-to-end encryption** ensuring your data is always protected
-- 📦  **Snapshot management** with retention policies to optimize storage usage
-- 📊  **Monitoring and statistics** to track backup health and storage usage
-- ✅  **Multi-protocol support**: Backup from NFS, SMB, WebDAV, or local directories
-- 🔍  **Health checks** and automatic recovery to ensure backup reliability
+-   **Automated backups** with encryption, compression and retention policies powered by Restic
+-   **Flexible scheduling** For automated backup jobs with fine-grained retention policies
+-   **End-to-end encryption** ensuring your data is always protected
+-   **Multi-protocol support**: Backup from NFS, SMB, WebDAV, or local directories
 
 ## Installation
 
@@ -39,7 +36,7 @@ In order to run Ironmount, you need to have Docker and Docker Compose installed
 ```yaml
 services:
   ironmount:
-    image: ghcr.io/nicotsx/ironmount:v0.5.0
+    image: ghcr.io/nicotsx/ironmount:v0.6
     container_name: ironmount
     restart: unless-stopped
     privileged: true
@@ -48,7 +45,7 @@ services:
     devices:
       - /dev/fuse:/dev/fuse
     volumes:
-      - /var/lib/ironmount/:/var/lib/ironmount/
+      - /var/lib/ironmount:/var/lib/ironmount
 ```
 
 Then, run the following command to start Ironmount:
@@ -59,9 +56,212 @@ docker compose up -d
 
 Once the container is running, you can access the web interface at `http://<your-server-ip>:4096`.
 
-## Backups
+## Adding your first volume
 
-![Preview](https://github.com/nicotsx/ironmount/blob/main/screenshots/backups.png?raw=true)
+Ironmount supports multiple volume backends including NFS, SMB, WebDAV, and local directories. A volume represents the source data you want to back up and monitor.
+
+To add your first volume, navigate to the "Volumes" section in the web interface and click on "Create volume". Fill in the required details such as volume name, type, and connection settings.
+
+If you want to track a local directory on the same server where Ironmount is running, you'll first need to mount that directory into the Ironmount container. You can do this by adding a volume mapping in your `docker-compose.yml` file. For example, to mount `/path/to/your/directory` from the host to `/mydata` in the container, you would add the following line under the `volumes` section:
+
+```diff
+services:
+  ironmount:
+    image: ghcr.io/nicotsx/ironmount:v0.6
+    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
++     - /path/to/your/directory:/mydata
+```
+
+After updating the `docker-compose.yml` file, restart the Ironmount container to apply the changes:
+
+```bash
+docker compose down
+docker compose up -d
+```
+
+Now, when adding a new volume in the Ironmount web interface, you can select "Directory" as the volume type and search for your mounted path (e.g., `/mydata`) as the source path.
+
+![Preview](https://github.com/nicotsx/ironmount/blob/main/screenshots/add-volume.png?raw=true)
+
+## Creating a repository
+
+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.
+
+### 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.6
+       container_name: ironmount
+       restart: unless-stopped
+       privileged: true
+       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
+
+Once you have added a volume and created a repository, you can create your first backup job. A backup job defines the schedule and parameters for backing up a specific volume to a designated repository.
+
+When creating a backup job, you can specify the following settings:
+- **Schedule**: Define how often the backup should run (e.g., daily, weekly)
+- **Retention Policy**: Set rules for how long backups should be retained (e.g., keep daily backups for 7 days, weekly backups for 4 weeks)
+- **Paths**: Specify which files or directories to include in the backup
+
+After configuring the backup job, save it and Ironmount will automatically execute the backup according to the defined schedule.
+You can monitor the progress and status of your backup jobs in the "Backups" section of the web interface.
+
+![Preview](https://github.com/nicotsx/ironmount/blob/main/screenshots/backups-list.png?raw=true)
+
+## Restoring data
+
+Ironmount allows you to easily restore your data from backups. To restore data, navigate to the "Backups" section and select the backup job from which you want to restore data. You can then choose a specific backup snapshot and select the files or directories you wish to restore. The data you select will be restored to their original location.
+
+![Preview](https://github.com/nicotsx/ironmount/blob/main/screenshots/restoring.png?raw=true)
+
+## Propagating mounts to host
+
+Ironmount is capable of propagating mounted volumes from within the container to the host system. This is particularly useful when you want to access the mounted data directly from the host to use it with other applications or services.
+
+In order to enable this feature, you need to change your bind mount `/var/lib/ironmount` to use the `:rshared` flag. Here is an example of how to set this up in your `docker-compose.yml` file:
+
+```diff
+services:
+  ironmount:
+    image: ghcr.io/nicotsx/ironmount:v0.6
+    container_name: ironmount
+    restart: unless-stopped
+    ports:
+      - "4096:4096"
+    devices:
+      - /dev/fuse:/dev/fuse
+    volumes:
+-     - /var/lib/ironmount:/var/lib/ironmount
++     - /var/lib/ironmount:/var/lib/ironmount:rshared
+```
+
+Restart the Ironmount container to apply the changes:
+
+```bash
+docker compose down
+docker compose up -d
+```
+
+## Docker plugin
+
+Ironmount can also be used as a Docker volume plugin, allowing you to mount your volumes directly into other Docker containers. This enables seamless integration with your containerized applications.
+
+In order to enable this feature, you need to run Ironmount with several items shared from the host. Here is an example of how to set this up in your `docker-compose.yml` file:
+
+```diff
+services:
+  ironmount:
+    image: ghcr.io/nicotsx/ironmount:v0.6
+    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
++     - /var/lib/ironmount:/var/lib/ironmount:rshared
++     - /run/docker/plugins:/run/docker/plugins
++     - /var/run/docker.sock:/var/run/docker.sock
+```
+
+Restart the Ironmount container to apply the changes:
+
+```bash
+docker compose down
+docker compose up -d
+```
+
+Your Ironmount volumes will now be available as Docker volumes that you can mount into other containers using the `--volume` flag:
+
+```bash
+docker run -v im-nfs:/path/in/container nginx:latest
+```
+
+Or using Docker Compose:
+
+```yaml
+services:
+  myservice:
+    image: nginx:latest
+    volumes:
+      - im-nfs:/path/in/container
+volumes:
+  im-nfs:
+    external: true
+```
+
+The volume name format is `im-<volume-name>` where `<volume-name>` is the name you assigned to the volume in Ironmount. You can verify that the volume is available by running:
+
+```bash
+docker volume ls
+```
 
 ## Third-Party Software
 

app/app.css

@@ -5,6 +5,7 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme {
+	--breakpoint-xs: 32rem;
 	--font-sans:
 		"Google Sans Code", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
 		"Noto Color Emoji";
@@ -12,16 +13,16 @@
 
 html,
 body {
-	@apply bg-white dark:bg-[#131313];
 	overflow-x: hidden;
 	width: 100%;
 	position: relative;
 	overscroll-behavior: none;
 	scrollbar-width: thin;
+}
 
-	@media (prefers-color-scheme: dark) {
-		color-scheme: dark;
-	}
+body {
+	@apply bg-[#131313];
+	min-height: 100dvh;
 }
 
 .main-content {
@@ -107,6 +108,8 @@ body {
 }
 
 .dark {
+	color-scheme: dark;
+
 	--background: #131313;
 	--foreground: oklch(0.985 0 0);
 	--card: #131313;

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

@@ -1,7 +1,7 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
-import type { ClientOptions } from "./types.gen";
-import { type Config, type ClientOptions as DefaultClientOptions, createClient, createConfig } from "./client";
+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
@@ -11,12 +11,12 @@ import { type Config, type ClientOptions as DefaultClientOptions, createClient,
  * `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 DefaultClientOptions = ClientOptions> = (
-	override?: Config<DefaultClientOptions & T>,
-) => Config<Required<DefaultClientOptions> & T>;
+export type CreateClientConfig<T extends ClientOptions = ClientOptions2> = (
+	override?: Config<ClientOptions & T>,
+) => Config<Required<ClientOptions> & T>;
 
 export const client = createClient(
-	createConfig<ClientOptions>({
+	createConfig<ClientOptions2>({
 		baseUrl: "http://192.168.2.42:4096",
 	}),
 );

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

@@ -1,6 +1,9 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
-import type { Client, Config, ResolvedRequestOptions } from "./types.gen";
+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,
@@ -28,7 +31,7 @@ export const createClient = (config: Config = {}): Client => {
 
 	const interceptors = createInterceptors<Request, Response, unknown, ResolvedRequestOptions>();
 
-	const request: Client["request"] = async (options) => {
+	const beforeRequest = async (options: RequestOptions) => {
 		const opts = {
 			..._config,
 			...options,
@@ -48,25 +51,32 @@ export const createClient = (config: Config = {}): Client => {
 			await opts.requestValidator(opts);
 		}
 
-		if (opts.body && opts.bodySerializer) {
+		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.serializedBody === undefined || opts.serializedBody === "") {
+		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: opts.serializedBody,
+			body: getValidRequestBody(opts),
 		};
 
 		let request = new Request(url, requestInit);
 
-		for (const fn of interceptors.request._fns) {
+		for (const fn of interceptors.request.fns) {
 			if (fn) {
 				request = await fn(request, opts);
 			}
@@ -75,9 +85,37 @@ export const createClient = (config: Config = {}): Client => {
 		// 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 = await _fetch(request);
+		let response: Response;
 
-		for (const fn of interceptors.response._fns) {
+		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);
 			}
@@ -89,18 +127,36 @@ export const createClient = (config: Config = {}): Client => {
 		};
 
 		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: {},
+							data: emptyData,
 							...result,
 						};
 			}
 
-			const parseAs =
-				(opts.parseAs === "auto" ? getParseAs(response.headers.get("Content-Type")) : opts.parseAs) ?? "json";
-
 			let data: any;
 			switch (parseAs) {
 				case "arrayBuffer":
@@ -149,7 +205,7 @@ export const createClient = (config: Config = {}): Client => {
 		const error = jsonError ?? textError;
 		let finalError = error;
 
-		for (const fn of interceptors.error._fns) {
+		for (const fn of interceptors.error.fns) {
 			if (fn) {
 				finalError = (await fn(error, response, request, opts)) as string;
 			}
@@ -170,20 +226,53 @@ export const createClient = (config: Config = {}): Client => {
 				};
 	};
 
+	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: (options) => request({ ...options, method: "CONNECT" }),
-		delete: (options) => request({ ...options, method: "DELETE" }),
-		get: (options) => request({ ...options, method: "GET" }),
+		connect: makeMethodFn("CONNECT"),
+		delete: makeMethodFn("DELETE"),
+		get: makeMethodFn("GET"),
 		getConfig,
-		head: (options) => request({ ...options, method: "HEAD" }),
+		head: makeMethodFn("HEAD"),
 		interceptors,
-		options: (options) => request({ ...options, method: "OPTIONS" }),
-		patch: (options) => request({ ...options, method: "PATCH" }),
-		post: (options) => request({ ...options, method: "POST" }),
-		put: (options) => request({ ...options, method: "PUT" }),
+		options: makeMethodFn("OPTIONS"),
+		patch: makeMethodFn("PATCH"),
+		post: makeMethodFn("POST"),
+		put: makeMethodFn("PUT"),
 		request,
 		setConfig,
-		trace: (options) => request({ ...options, method: "TRACE" }),
-	};
+		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

@@ -8,6 +8,7 @@ export {
 	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,
@@ -15,7 +16,6 @@ export type {
 	Config,
 	CreateClientConfig,
 	Options,
-	OptionsLegacyParser,
 	RequestOptions,
 	RequestResult,
 	ResolvedRequestOptions,

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

@@ -1,6 +1,7 @@
 // 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";
 
@@ -19,7 +20,7 @@ export interface Config<T extends ClientOptions = ClientOptions>
 	 *
 	 * @default globalThis.fetch
 	 */
-	fetch?: (request: Request) => ReturnType<typeof fetch>;
+	fetch?: typeof fetch;
 	/**
 	 * Please don't use the Fetch client for Next.js applications. The `next`
 	 * options won't have any effect.
@@ -51,13 +52,18 @@ export interface Config<T extends ClientOptions = ClientOptions>
 }
 
 export interface RequestOptions<
+	TData = unknown,
 	TResponseStyle extends ResponseStyle = "fields",
 	ThrowOnError extends boolean = boolean,
 	Url extends string = string,
 > extends Config<{
-		responseStyle: TResponseStyle;
-		throwOnError: ThrowOnError;
-	}> {
+			responseStyle: TResponseStyle;
+			throwOnError: ThrowOnError;
+		}>,
+		Pick<
+			ServerSentEventsOptions<TData>,
+			"onSseError" | "onSseEvent" | "sseDefaultRetryDelay" | "sseMaxRetryAttempts" | "sseMaxRetryDelay"
+		> {
 	/**
 	 * Any body that you want to add to your request.
 	 *
@@ -77,7 +83,7 @@ export interface ResolvedRequestOptions<
 	TResponseStyle extends ResponseStyle = "fields",
 	ThrowOnError extends boolean = boolean,
 	Url extends string = string,
-> extends RequestOptions<TResponseStyle, ThrowOnError, Url> {
+> extends RequestOptions<unknown, TResponseStyle, ThrowOnError, Url> {
 	serializedBody?: string;
 }
 
@@ -128,17 +134,26 @@ type MethodFn = <
 	ThrowOnError extends boolean = false,
 	TResponseStyle extends ResponseStyle = "fields",
 >(
-	options: Omit<RequestOptions<TResponseStyle, ThrowOnError>, "method">,
+	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<TResponseStyle, ThrowOnError>, "method"> &
-		Pick<Required<RequestOptions<TResponseStyle, ThrowOnError>>, "method">,
+	options: Omit<RequestOptions<TData, TResponseStyle, ThrowOnError>, "method"> &
+		Pick<Required<RequestOptions<TData, TResponseStyle, ThrowOnError>>, "method">,
 ) => RequestResult<TData, TError, ThrowOnError, TResponseStyle>;
 
 type BuildUrlFn = <
@@ -149,10 +164,10 @@ type BuildUrlFn = <
 		url: string;
 	},
 >(
-	options: Pick<TData, "url"> & Options<TData>,
+	options: TData & Options<TData>,
 ) => string;
 
-export type Client = CoreClient<RequestFn, Config, MethodFn, BuildUrlFn> & {
+export type Client = CoreClient<RequestFn, Config, MethodFn, BuildUrlFn, SseFn> & {
 	interceptors: Middleware<Request, Response, unknown, ResolvedRequestOptions>;
 };
 
@@ -181,21 +196,7 @@ 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<TResponseStyle, ThrowOnError>, "body" | "path" | "query" | "url"> & Omit<TData, "url">;
-
-export type OptionsLegacyParser<
-	TData = unknown,
-	ThrowOnError extends boolean = boolean,
-	TResponseStyle extends ResponseStyle = "fields",
-> = TData extends { body?: any }
-	? TData extends { headers?: any }
-		? OmitKeys<RequestOptions<TResponseStyle, ThrowOnError>, "body" | "headers" | "url"> & TData
-		: OmitKeys<RequestOptions<TResponseStyle, ThrowOnError>, "body" | "url"> &
-				TData &
-				Pick<RequestOptions<TResponseStyle, ThrowOnError>, "headers">
-	: TData extends { headers?: any }
-		? OmitKeys<RequestOptions<TResponseStyle, ThrowOnError>, "headers" | "url"> &
-				TData &
-				Pick<RequestOptions<TResponseStyle, ThrowOnError>, "body">
-		: OmitKeys<RequestOptions<TResponseStyle, ThrowOnError>, "url"> & TData;
+> = OmitKeys<RequestOptions<TResponse, TResponseStyle, ThrowOnError>, "body" | "path" | "query" | "url"> &
+	([TData] extends [never] ? unknown : Omit<TData, "url">);

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

@@ -1,88 +1,13 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
 import { getAuthToken } from "../core/auth.gen";
-import type { QuerySerializer, QuerySerializerOptions } from "../core/bodySerializer.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";
 
-interface PathSerializer {
-	path: Record<string, unknown>;
-	url: string;
-}
-
-const PATH_PARAM_RE = /\{[^{}]+\}/g;
-
-type ArrayStyle = "form" | "spaceDelimited" | "pipeDelimited";
-type MatrixStyle = "label" | "matrix" | "simple";
-type ArraySeparatorStyle = ArrayStyle | MatrixStyle;
-
-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 createQuerySerializer = <T = unknown>({ allowReserved, array, object }: QuerySerializerOptions = {}) => {
+export const createQuerySerializer = <T = unknown>({ parameters = {}, ...args }: QuerySerializerOptions = {}) => {
 	const querySerializer = (queryParams: T) => {
 		const search: string[] = [];
 		if (queryParams && typeof queryParams === "object") {
@@ -93,29 +18,31 @@ export const createQuerySerializer = <T = unknown>({ allowReserved, array, objec
 					continue;
 				}
 
+				const options = parameters[name] || args;
+
 				if (Array.isArray(value)) {
 					const serializedArray = serializeArrayParam({
-						allowReserved,
+						allowReserved: options.allowReserved,
 						explode: true,
 						name,
 						style: "form",
 						value,
-						...array,
+						...options.array,
 					});
 					if (serializedArray) search.push(serializedArray);
 				} else if (typeof value === "object") {
 					const serializedObject = serializeObjectParam({
-						allowReserved,
+						allowReserved: options.allowReserved,
 						explode: true,
 						name,
 						style: "deepObject",
 						value: value as Record<string, unknown>,
-						...object,
+						...options.object,
 					});
 					if (serializedObject) search.push(serializedObject);
 				} else {
 					const serializedPrimitive = serializePrimitiveParam({
-						allowReserved,
+						allowReserved: options.allowReserved,
 						name,
 						value: value as string,
 					});
@@ -216,8 +143,8 @@ export const setAuthParams = async ({
 	}
 };
 
-export const buildUrl: Client["buildUrl"] = (options) => {
-	const url = getUrl({
+export const buildUrl: Client["buildUrl"] = (options) =>
+	getUrl({
 		baseUrl: options.baseUrl as string,
 		path: options.path,
 		query: options.query,
@@ -227,36 +154,6 @@ export const buildUrl: Client["buildUrl"] = (options) => {
 				: createQuerySerializer(options.querySerializer),
 		url: options.url,
 	});
-	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 const mergeConfigs = (a: Config, b: Config): Config => {
 	const config = { ...a, ...b };
@@ -267,14 +164,22 @@ export const mergeConfigs = (a: Config, b: Config): Config => {
 	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 || typeof header !== "object") {
+		if (!header) {
 			continue;
 		}
 
-		const iterator = header instanceof Headers ? header.entries() : Object.entries(header);
+		const iterator = header instanceof Headers ? headersEntries(header) : Object.entries(header);
 
 		for (const [key, value] of iterator) {
 			if (value === null) {
@@ -305,61 +210,53 @@ type ReqInterceptor<Req, Options> = (request: Req, options: Options) => Req | Pr
 type ResInterceptor<Res, Req, Options> = (response: Res, request: Req, options: Options) => Res | Promise<Res>;
 
 class Interceptors<Interceptor> {
-	_fns: (Interceptor | null)[];
+	fns: Array<Interceptor | null> = [];
 
-	constructor() {
-		this._fns = [];
+	clear(): void {
+		this.fns = [];
 	}
 
-	clear() {
-		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;
-		} else {
-			return this._fns.indexOf(id);
+			return this.fns[id] ? id : -1;
 		}
-	}
-	exists(id: number | Interceptor) {
-		const index = this.getInterceptorIndex(id);
-		return !!this._fns[index];
+		return this.fns.indexOf(id);
 	}
 
-	eject(id: number | Interceptor) {
+	update(id: number | Interceptor, fn: Interceptor): number | Interceptor | false {
 		const index = this.getInterceptorIndex(id);
-		if (this._fns[index]) {
-			this._fns[index] = null;
-		}
-	}
-
-	update(id: number | Interceptor, fn: Interceptor) {
-		const index = this.getInterceptorIndex(id);
-		if (this._fns[index]) {
-			this._fns[index] = fn;
+		if (this.fns[index]) {
+			this.fns[index] = fn;
 			return id;
-		} else {
-			return false;
 		}
+		return false;
 	}
 
-	use(fn: Interceptor) {
-		this._fns = [...this._fns, fn];
-		return this._fns.length - 1;
+	use(fn: Interceptor): number {
+		this.fns.push(fn);
+		return this.fns.length - 1;
 	}
 }
 
-// `createInterceptors()` response, meant for external use as it does not
-// expose internals
 export interface Middleware<Req, Res, Err, Options> {
-	error: Pick<Interceptors<ErrInterceptor<Err, Res, Req, Options>>, "eject" | "use">;
-	request: Pick<Interceptors<ReqInterceptor<Req, Options>>, "eject" | "use">;
-	response: Pick<Interceptors<ResInterceptor<Res, Req, Options>>, "eject" | "use">;
+	error: Interceptors<ErrInterceptor<Err, Res, Req, Options>>;
+	request: Interceptors<ReqInterceptor<Req, Options>>;
+	response: Interceptors<ResInterceptor<Res, Req, Options>>;
 }
 
-// do not add `Middleware` as return type so we can use _fns internally
-export const createInterceptors = <Req, Res, Err, 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>>(),

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

@@ -6,11 +6,19 @@ export type QuerySerializer = (query: Record<string, unknown>) => string;
 
 export type BodySerializer = (body: any) => any;
 
-export interface QuerySerializerOptions {
+type QuerySerializerOptionsObject = {
 	allowReserved?: boolean;
-	array?: SerializerOptions<ArrayStyle>;
-	object?: SerializerOptions<ObjectStyle>;
-}
+	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) {

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

@@ -22,6 +22,17 @@ export type Field =
 			 */
 			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 {
@@ -41,10 +52,14 @@ const extraPrefixes = Object.entries(extraPrefixesMap);
 
 type KeyMap = Map<
 	string,
-	{
-		in: Slot;
-		map?: string;
-	}
+	| {
+			in: Slot;
+			map?: string;
+	  }
+	| {
+			in?: never;
+			map: Slot;
+	  }
 >;
 
 const buildKeyMap = (fields: FieldsConfig, map?: KeyMap): KeyMap => {
@@ -60,6 +75,10 @@ const buildKeyMap = (fields: FieldsConfig, map?: KeyMap): KeyMap => {
 					map: config.map,
 				});
 			}
+		} else if ("key" in config) {
+			map.set(config.key, {
+				map: config.map,
+			});
 		} else if (config.args) {
 			buildKeyMap(config.args, map);
 		}
@@ -108,7 +127,9 @@ export const buildClientParams = (args: ReadonlyArray<unknown>, fields: FieldsCo
 			if (config.key) {
 				const field = map.get(config.key)!;
 				const name = field.map || config.key;
-				(params[field.in] as Record<string, unknown>)[name] = arg;
+				if (field.in) {
+					(params[field.in] as Record<string, unknown>)[name] = arg;
+				}
 			} else {
 				params.body = arg;
 			}
@@ -117,16 +138,20 @@ export const buildClientParams = (args: ReadonlyArray<unknown>, fields: FieldsCo
 				const field = map.get(key);
 
 				if (field) {
-					const name = field.map || key;
-					(params[field.in] as Record<string, unknown>)[name] = value;
+					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 {
-						for (const [slot, allowed] of Object.entries(config.allowExtra ?? {})) {
+					} 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;

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

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

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

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

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

@@ -3,24 +3,19 @@
 import type { Auth, AuthToken } from "./auth.gen";
 import type { BodySerializer, QuerySerializer, QuerySerializerOptions } from "./bodySerializer.gen";
 
-export interface Client<RequestFn = never, Config = unknown, MethodFn = never, BuildUrlFn = never> {
+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;
-	connect: MethodFn;
-	delete: MethodFn;
-	get: MethodFn;
 	getConfig: () => Config;
-	head: MethodFn;
-	options: MethodFn;
-	patch: MethodFn;
-	post: MethodFn;
-	put: MethodFn;
 	request: RequestFn;
 	setConfig: (config: Config) => Config;
-	trace: MethodFn;
-}
+} & {
+	[K in HttpMethod]: MethodFn;
+} & ([SseFn] extends [never] ? { sse?: never } : { sse: { [K in HttpMethod]: SseFn } });
 
 export interface Config {
 	/**
@@ -47,7 +42,7 @@ export interface Config {
 	 *
 	 * {@link https://developer.mozilla.org/docs/Web/API/fetch#method See more}
 	 */
-	method?: "CONNECT" | "DELETE" | "GET" | "HEAD" | "OPTIONS" | "PATCH" | "POST" | "PUT" | "TRACE";
+	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

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

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

app/client/api-client/index.ts

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

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

@@ -1,85 +1,92 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
-import type { Options as ClientOptions, TDataShape, Client } from "./client";
+import type { Client, Options as Options2, TDataShape } from "./client";
+import { client } from "./client.gen";
 import type {
-	RegisterData,
-	RegisterResponses,
+	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,
-	GetMeData,
-	GetMeResponses,
-	GetStatusData,
-	GetStatusResponses,
-	ChangePasswordData,
-	ChangePasswordResponses,
-	ListVolumesData,
-	ListVolumesResponses,
-	CreateVolumeData,
-	CreateVolumeResponses,
-	TestConnectionData,
-	TestConnectionResponses,
-	DeleteVolumeData,
-	DeleteVolumeResponses,
-	GetVolumeData,
-	GetVolumeResponses,
-	GetVolumeErrors,
-	UpdateVolumeData,
-	UpdateVolumeResponses,
-	UpdateVolumeErrors,
-	GetContainersUsingVolumeData,
-	GetContainersUsingVolumeResponses,
-	GetContainersUsingVolumeErrors,
 	MountVolumeData,
 	MountVolumeResponses,
-	UnmountVolumeData,
-	UnmountVolumeResponses,
-	HealthCheckVolumeData,
-	HealthCheckVolumeResponses,
-	HealthCheckVolumeErrors,
-	ListFilesData,
-	ListFilesResponses,
-	BrowseFilesystemData,
-	BrowseFilesystemResponses,
-	ListRepositoriesData,
-	ListRepositoriesResponses,
-	CreateRepositoryData,
-	CreateRepositoryResponses,
-	DeleteRepositoryData,
-	DeleteRepositoryResponses,
-	GetRepositoryData,
-	GetRepositoryResponses,
-	ListSnapshotsData,
-	ListSnapshotsResponses,
-	GetSnapshotDetailsData,
-	GetSnapshotDetailsResponses,
-	ListSnapshotFilesData,
-	ListSnapshotFilesResponses,
+	RegisterData,
+	RegisterResponses,
 	RestoreSnapshotData,
 	RestoreSnapshotResponses,
-	DoctorRepositoryData,
-	DoctorRepositoryResponses,
-	ListBackupSchedulesData,
-	ListBackupSchedulesResponses,
-	CreateBackupScheduleData,
-	CreateBackupScheduleResponses,
-	DeleteBackupScheduleData,
-	DeleteBackupScheduleResponses,
-	GetBackupScheduleData,
-	GetBackupScheduleResponses,
-	UpdateBackupScheduleData,
-	UpdateBackupScheduleResponses,
-	GetBackupScheduleForVolumeData,
-	GetBackupScheduleForVolumeResponses,
 	RunBackupNowData,
 	RunBackupNowResponses,
-	GetSystemInfoData,
-	GetSystemInfoResponses,
+	StopBackupData,
+	StopBackupErrors,
+	StopBackupResponses,
+	TestConnectionData,
+	TestConnectionResponses,
+	UnmountVolumeData,
+	UnmountVolumeResponses,
+	UpdateBackupScheduleData,
+	UpdateBackupScheduleResponses,
+	UpdateVolumeData,
+	UpdateVolumeErrors,
+	UpdateVolumeResponses,
 } from "./types.gen";
-import { client as _heyApiClient } from "./client.gen";
 
-export type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean = boolean> = ClientOptions<
+export type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean = boolean> = Options2<
 	TData,
 	ThrowOnError
 > & {
@@ -100,7 +107,7 @@ export type Options<TData extends TDataShape = TDataShape, ThrowOnError extends
  * Register a new user
  */
 export const register = <ThrowOnError extends boolean = false>(options?: Options<RegisterData, ThrowOnError>) => {
-	return (options?.client ?? _heyApiClient).post<RegisterResponses, unknown, ThrowOnError>({
+	return (options?.client ?? client).post<RegisterResponses, unknown, ThrowOnError>({
 		url: "/api/v1/auth/register",
 		...options,
 		headers: {
@@ -114,7 +121,7 @@ export const register = <ThrowOnError extends boolean = false>(options?: Options
  * Login with username and password
  */
 export const login = <ThrowOnError extends boolean = false>(options?: Options<LoginData, ThrowOnError>) => {
-	return (options?.client ?? _heyApiClient).post<LoginResponses, unknown, ThrowOnError>({
+	return (options?.client ?? client).post<LoginResponses, unknown, ThrowOnError>({
 		url: "/api/v1/auth/login",
 		...options,
 		headers: {
@@ -128,7 +135,7 @@ export const login = <ThrowOnError extends boolean = false>(options?: Options<Lo
  * Logout current user
  */
 export const logout = <ThrowOnError extends boolean = false>(options?: Options<LogoutData, ThrowOnError>) => {
-	return (options?.client ?? _heyApiClient).post<LogoutResponses, unknown, ThrowOnError>({
+	return (options?.client ?? client).post<LogoutResponses, unknown, ThrowOnError>({
 		url: "/api/v1/auth/logout",
 		...options,
 	});
@@ -138,7 +145,7 @@ export const logout = <ThrowOnError extends boolean = false>(options?: Options<L
  * Get current authenticated user
  */
 export const getMe = <ThrowOnError extends boolean = false>(options?: Options<GetMeData, ThrowOnError>) => {
-	return (options?.client ?? _heyApiClient).get<GetMeResponses, unknown, ThrowOnError>({
+	return (options?.client ?? client).get<GetMeResponses, unknown, ThrowOnError>({
 		url: "/api/v1/auth/me",
 		...options,
 	});
@@ -148,7 +155,7 @@ export const getMe = <ThrowOnError extends boolean = false>(options?: Options<Ge
  * Get authentication system status
  */
 export const getStatus = <ThrowOnError extends boolean = false>(options?: Options<GetStatusData, ThrowOnError>) => {
-	return (options?.client ?? _heyApiClient).get<GetStatusResponses, unknown, ThrowOnError>({
+	return (options?.client ?? client).get<GetStatusResponses, unknown, ThrowOnError>({
 		url: "/api/v1/auth/status",
 		...options,
 	});
@@ -160,7 +167,7 @@ export const getStatus = <ThrowOnError extends boolean = false>(options?: Option
 export const changePassword = <ThrowOnError extends boolean = false>(
 	options?: Options<ChangePasswordData, ThrowOnError>,
 ) => {
-	return (options?.client ?? _heyApiClient).post<ChangePasswordResponses, unknown, ThrowOnError>({
+	return (options?.client ?? client).post<ChangePasswordResponses, unknown, ThrowOnError>({
 		url: "/api/v1/auth/change-password",
 		...options,
 		headers: {
@@ -174,7 +181,7 @@ export const changePassword = <ThrowOnError extends boolean = false>(
  * List all volumes
  */
 export const listVolumes = <ThrowOnError extends boolean = false>(options?: Options<ListVolumesData, ThrowOnError>) => {
-	return (options?.client ?? _heyApiClient).get<ListVolumesResponses, unknown, ThrowOnError>({
+	return (options?.client ?? client).get<ListVolumesResponses, unknown, ThrowOnError>({
 		url: "/api/v1/volumes",
 		...options,
 	});
@@ -186,7 +193,7 @@ export const listVolumes = <ThrowOnError extends boolean = false>(options?: Opti
 export const createVolume = <ThrowOnError extends boolean = false>(
 	options?: Options<CreateVolumeData, ThrowOnError>,
 ) => {
-	return (options?.client ?? _heyApiClient).post<CreateVolumeResponses, unknown, ThrowOnError>({
+	return (options?.client ?? client).post<CreateVolumeResponses, unknown, ThrowOnError>({
 		url: "/api/v1/volumes",
 		...options,
 		headers: {
@@ -202,7 +209,7 @@ export const createVolume = <ThrowOnError extends boolean = false>(
 export const testConnection = <ThrowOnError extends boolean = false>(
 	options?: Options<TestConnectionData, ThrowOnError>,
 ) => {
-	return (options?.client ?? _heyApiClient).post<TestConnectionResponses, unknown, ThrowOnError>({
+	return (options?.client ?? client).post<TestConnectionResponses, unknown, ThrowOnError>({
 		url: "/api/v1/volumes/test-connection",
 		...options,
 		headers: {
@@ -218,7 +225,7 @@ export const testConnection = <ThrowOnError extends boolean = false>(
 export const deleteVolume = <ThrowOnError extends boolean = false>(
 	options: Options<DeleteVolumeData, ThrowOnError>,
 ) => {
-	return (options.client ?? _heyApiClient).delete<DeleteVolumeResponses, unknown, ThrowOnError>({
+	return (options.client ?? client).delete<DeleteVolumeResponses, unknown, ThrowOnError>({
 		url: "/api/v1/volumes/{name}",
 		...options,
 	});
@@ -228,7 +235,7 @@ export const deleteVolume = <ThrowOnError extends boolean = false>(
  * Get a volume by name
  */
 export const getVolume = <ThrowOnError extends boolean = false>(options: Options<GetVolumeData, ThrowOnError>) => {
-	return (options.client ?? _heyApiClient).get<GetVolumeResponses, GetVolumeErrors, ThrowOnError>({
+	return (options.client ?? client).get<GetVolumeResponses, GetVolumeErrors, ThrowOnError>({
 		url: "/api/v1/volumes/{name}",
 		...options,
 	});
@@ -240,7 +247,7 @@ export const getVolume = <ThrowOnError extends boolean = false>(options: Options
 export const updateVolume = <ThrowOnError extends boolean = false>(
 	options: Options<UpdateVolumeData, ThrowOnError>,
 ) => {
-	return (options.client ?? _heyApiClient).put<UpdateVolumeResponses, UpdateVolumeErrors, ThrowOnError>({
+	return (options.client ?? client).put<UpdateVolumeResponses, UpdateVolumeErrors, ThrowOnError>({
 		url: "/api/v1/volumes/{name}",
 		...options,
 		headers: {
@@ -256,7 +263,7 @@ export const updateVolume = <ThrowOnError extends boolean = false>(
 export const getContainersUsingVolume = <ThrowOnError extends boolean = false>(
 	options: Options<GetContainersUsingVolumeData, ThrowOnError>,
 ) => {
-	return (options.client ?? _heyApiClient).get<
+	return (options.client ?? client).get<
 		GetContainersUsingVolumeResponses,
 		GetContainersUsingVolumeErrors,
 		ThrowOnError
@@ -270,7 +277,7 @@ export const getContainersUsingVolume = <ThrowOnError extends boolean = false>(
  * Mount a volume
  */
 export const mountVolume = <ThrowOnError extends boolean = false>(options: Options<MountVolumeData, ThrowOnError>) => {
-	return (options.client ?? _heyApiClient).post<MountVolumeResponses, unknown, ThrowOnError>({
+	return (options.client ?? client).post<MountVolumeResponses, unknown, ThrowOnError>({
 		url: "/api/v1/volumes/{name}/mount",
 		...options,
 	});
@@ -282,7 +289,7 @@ export const mountVolume = <ThrowOnError extends boolean = false>(options: Optio
 export const unmountVolume = <ThrowOnError extends boolean = false>(
 	options: Options<UnmountVolumeData, ThrowOnError>,
 ) => {
-	return (options.client ?? _heyApiClient).post<UnmountVolumeResponses, unknown, ThrowOnError>({
+	return (options.client ?? client).post<UnmountVolumeResponses, unknown, ThrowOnError>({
 		url: "/api/v1/volumes/{name}/unmount",
 		...options,
 	});
@@ -294,7 +301,7 @@ export const unmountVolume = <ThrowOnError extends boolean = false>(
 export const healthCheckVolume = <ThrowOnError extends boolean = false>(
 	options: Options<HealthCheckVolumeData, ThrowOnError>,
 ) => {
-	return (options.client ?? _heyApiClient).post<HealthCheckVolumeResponses, HealthCheckVolumeErrors, ThrowOnError>({
+	return (options.client ?? client).post<HealthCheckVolumeResponses, HealthCheckVolumeErrors, ThrowOnError>({
 		url: "/api/v1/volumes/{name}/health-check",
 		...options,
 	});
@@ -304,7 +311,7 @@ export const healthCheckVolume = <ThrowOnError extends boolean = false>(
  * List files in a volume directory
  */
 export const listFiles = <ThrowOnError extends boolean = false>(options: Options<ListFilesData, ThrowOnError>) => {
-	return (options.client ?? _heyApiClient).get<ListFilesResponses, unknown, ThrowOnError>({
+	return (options.client ?? client).get<ListFilesResponses, unknown, ThrowOnError>({
 		url: "/api/v1/volumes/{name}/files",
 		...options,
 	});
@@ -316,7 +323,7 @@ export const listFiles = <ThrowOnError extends boolean = false>(options: Options
 export const browseFilesystem = <ThrowOnError extends boolean = false>(
 	options?: Options<BrowseFilesystemData, ThrowOnError>,
 ) => {
-	return (options?.client ?? _heyApiClient).get<BrowseFilesystemResponses, unknown, ThrowOnError>({
+	return (options?.client ?? client).get<BrowseFilesystemResponses, unknown, ThrowOnError>({
 		url: "/api/v1/volumes/filesystem/browse",
 		...options,
 	});
@@ -328,7 +335,7 @@ export const browseFilesystem = <ThrowOnError extends boolean = false>(
 export const listRepositories = <ThrowOnError extends boolean = false>(
 	options?: Options<ListRepositoriesData, ThrowOnError>,
 ) => {
-	return (options?.client ?? _heyApiClient).get<ListRepositoriesResponses, unknown, ThrowOnError>({
+	return (options?.client ?? client).get<ListRepositoriesResponses, unknown, ThrowOnError>({
 		url: "/api/v1/repositories",
 		...options,
 	});
@@ -340,7 +347,7 @@ export const listRepositories = <ThrowOnError extends boolean = false>(
 export const createRepository = <ThrowOnError extends boolean = false>(
 	options?: Options<CreateRepositoryData, ThrowOnError>,
 ) => {
-	return (options?.client ?? _heyApiClient).post<CreateRepositoryResponses, unknown, ThrowOnError>({
+	return (options?.client ?? client).post<CreateRepositoryResponses, unknown, ThrowOnError>({
 		url: "/api/v1/repositories",
 		...options,
 		headers: {
@@ -350,13 +357,25 @@ export const createRepository = <ThrowOnError extends boolean = false>(
 	});
 };
 
+/**
+ * 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 ?? _heyApiClient).delete<DeleteRepositoryResponses, unknown, ThrowOnError>({
+	return (options.client ?? client).delete<DeleteRepositoryResponses, unknown, ThrowOnError>({
 		url: "/api/v1/repositories/{name}",
 		...options,
 	});
@@ -368,7 +387,7 @@ export const deleteRepository = <ThrowOnError extends boolean = false>(
 export const getRepository = <ThrowOnError extends boolean = false>(
 	options: Options<GetRepositoryData, ThrowOnError>,
 ) => {
-	return (options.client ?? _heyApiClient).get<GetRepositoryResponses, unknown, ThrowOnError>({
+	return (options.client ?? client).get<GetRepositoryResponses, unknown, ThrowOnError>({
 		url: "/api/v1/repositories/{name}",
 		...options,
 	});
@@ -380,7 +399,7 @@ export const getRepository = <ThrowOnError extends boolean = false>(
 export const listSnapshots = <ThrowOnError extends boolean = false>(
 	options: Options<ListSnapshotsData, ThrowOnError>,
 ) => {
-	return (options.client ?? _heyApiClient).get<ListSnapshotsResponses, unknown, ThrowOnError>({
+	return (options.client ?? client).get<ListSnapshotsResponses, unknown, ThrowOnError>({
 		url: "/api/v1/repositories/{name}/snapshots",
 		...options,
 	});
@@ -392,7 +411,7 @@ export const listSnapshots = <ThrowOnError extends boolean = false>(
 export const getSnapshotDetails = <ThrowOnError extends boolean = false>(
 	options: Options<GetSnapshotDetailsData, ThrowOnError>,
 ) => {
-	return (options.client ?? _heyApiClient).get<GetSnapshotDetailsResponses, unknown, ThrowOnError>({
+	return (options.client ?? client).get<GetSnapshotDetailsResponses, unknown, ThrowOnError>({
 		url: "/api/v1/repositories/{name}/snapshots/{snapshotId}",
 		...options,
 	});
@@ -404,7 +423,7 @@ export const getSnapshotDetails = <ThrowOnError extends boolean = false>(
 export const listSnapshotFiles = <ThrowOnError extends boolean = false>(
 	options: Options<ListSnapshotFilesData, ThrowOnError>,
 ) => {
-	return (options.client ?? _heyApiClient).get<ListSnapshotFilesResponses, unknown, ThrowOnError>({
+	return (options.client ?? client).get<ListSnapshotFilesResponses, unknown, ThrowOnError>({
 		url: "/api/v1/repositories/{name}/snapshots/{snapshotId}/files",
 		...options,
 	});
@@ -416,7 +435,7 @@ export const listSnapshotFiles = <ThrowOnError extends boolean = false>(
 export const restoreSnapshot = <ThrowOnError extends boolean = false>(
 	options: Options<RestoreSnapshotData, ThrowOnError>,
 ) => {
-	return (options.client ?? _heyApiClient).post<RestoreSnapshotResponses, unknown, ThrowOnError>({
+	return (options.client ?? client).post<RestoreSnapshotResponses, unknown, ThrowOnError>({
 		url: "/api/v1/repositories/{name}/restore",
 		...options,
 		headers: {
@@ -432,7 +451,7 @@ export const restoreSnapshot = <ThrowOnError extends boolean = false>(
 export const doctorRepository = <ThrowOnError extends boolean = false>(
 	options: Options<DoctorRepositoryData, ThrowOnError>,
 ) => {
-	return (options.client ?? _heyApiClient).post<DoctorRepositoryResponses, unknown, ThrowOnError>({
+	return (options.client ?? client).post<DoctorRepositoryResponses, unknown, ThrowOnError>({
 		url: "/api/v1/repositories/{name}/doctor",
 		...options,
 	});
@@ -444,7 +463,7 @@ export const doctorRepository = <ThrowOnError extends boolean = false>(
 export const listBackupSchedules = <ThrowOnError extends boolean = false>(
 	options?: Options<ListBackupSchedulesData, ThrowOnError>,
 ) => {
-	return (options?.client ?? _heyApiClient).get<ListBackupSchedulesResponses, unknown, ThrowOnError>({
+	return (options?.client ?? client).get<ListBackupSchedulesResponses, unknown, ThrowOnError>({
 		url: "/api/v1/backups",
 		...options,
 	});
@@ -456,7 +475,7 @@ export const listBackupSchedules = <ThrowOnError extends boolean = false>(
 export const createBackupSchedule = <ThrowOnError extends boolean = false>(
 	options?: Options<CreateBackupScheduleData, ThrowOnError>,
 ) => {
-	return (options?.client ?? _heyApiClient).post<CreateBackupScheduleResponses, unknown, ThrowOnError>({
+	return (options?.client ?? client).post<CreateBackupScheduleResponses, unknown, ThrowOnError>({
 		url: "/api/v1/backups",
 		...options,
 		headers: {
@@ -472,7 +491,7 @@ export const createBackupSchedule = <ThrowOnError extends boolean = false>(
 export const deleteBackupSchedule = <ThrowOnError extends boolean = false>(
 	options: Options<DeleteBackupScheduleData, ThrowOnError>,
 ) => {
-	return (options.client ?? _heyApiClient).delete<DeleteBackupScheduleResponses, unknown, ThrowOnError>({
+	return (options.client ?? client).delete<DeleteBackupScheduleResponses, unknown, ThrowOnError>({
 		url: "/api/v1/backups/{scheduleId}",
 		...options,
 	});
@@ -484,7 +503,7 @@ export const deleteBackupSchedule = <ThrowOnError extends boolean = false>(
 export const getBackupSchedule = <ThrowOnError extends boolean = false>(
 	options: Options<GetBackupScheduleData, ThrowOnError>,
 ) => {
-	return (options.client ?? _heyApiClient).get<GetBackupScheduleResponses, unknown, ThrowOnError>({
+	return (options.client ?? client).get<GetBackupScheduleResponses, unknown, ThrowOnError>({
 		url: "/api/v1/backups/{scheduleId}",
 		...options,
 	});
@@ -496,7 +515,7 @@ export const getBackupSchedule = <ThrowOnError extends boolean = false>(
 export const updateBackupSchedule = <ThrowOnError extends boolean = false>(
 	options: Options<UpdateBackupScheduleData, ThrowOnError>,
 ) => {
-	return (options.client ?? _heyApiClient).patch<UpdateBackupScheduleResponses, unknown, ThrowOnError>({
+	return (options.client ?? client).patch<UpdateBackupScheduleResponses, unknown, ThrowOnError>({
 		url: "/api/v1/backups/{scheduleId}",
 		...options,
 		headers: {
@@ -512,7 +531,7 @@ export const updateBackupSchedule = <ThrowOnError extends boolean = false>(
 export const getBackupScheduleForVolume = <ThrowOnError extends boolean = false>(
 	options: Options<GetBackupScheduleForVolumeData, ThrowOnError>,
 ) => {
-	return (options.client ?? _heyApiClient).get<GetBackupScheduleForVolumeResponses, unknown, ThrowOnError>({
+	return (options.client ?? client).get<GetBackupScheduleForVolumeResponses, unknown, ThrowOnError>({
 		url: "/api/v1/backups/volume/{volumeId}",
 		...options,
 	});
@@ -524,20 +543,46 @@ export const getBackupScheduleForVolume = <ThrowOnError extends boolean = false>
 export const runBackupNow = <ThrowOnError extends boolean = false>(
 	options: Options<RunBackupNowData, ThrowOnError>,
 ) => {
-	return (options.client ?? _heyApiClient).post<RunBackupNowResponses, unknown, ThrowOnError>({
+	return (options.client ?? client).post<RunBackupNowResponses, unknown, ThrowOnError>({
 		url: "/api/v1/backups/{scheduleId}/run",
 		...options,
 	});
 };
 
+/**
+ * Stop a backup that is currently in progress
+ */
+export const stopBackup = <ThrowOnError extends boolean = false>(options: Options<StopBackupData, ThrowOnError>) => {
+	return (options.client ?? client).post<StopBackupResponses, StopBackupErrors, ThrowOnError>({
+		url: "/api/v1/backups/{scheduleId}/stop",
+		...options,
+	});
+};
+
 /**
  * Get system information including available capabilities
  */
 export const getSystemInfo = <ThrowOnError extends boolean = false>(
 	options?: Options<GetSystemInfoData, ThrowOnError>,
 ) => {
-	return (options?.client ?? _heyApiClient).get<GetSystemInfoResponses, unknown, 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/api-client/types.gen.ts

@@ -1,5 +1,9 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
+export type ClientOptions = {
+	baseUrl: "http://192.168.2.42:4096" | (string & {});
+};
+
 export type RegisterData = {
 	body?: {
 		password: string;
@@ -18,6 +22,7 @@ export type RegisterResponses = {
 		message: string;
 		success: boolean;
 		user?: {
+			hasDownloadedResticPassword: boolean;
 			id: number;
 			username: string;
 		};
@@ -44,6 +49,7 @@ export type LoginResponses = {
 		message: string;
 		success: boolean;
 		user?: {
+			hasDownloadedResticPassword: boolean;
 			id: number;
 			username: string;
 		};
@@ -85,6 +91,7 @@ export type GetMeResponses = {
 		message: string;
 		success: boolean;
 		user?: {
+			hasDownloadedResticPassword: boolean;
 			id: number;
 			username: string;
 		};
@@ -149,6 +156,8 @@ export type ListVolumesResponses = {
 		config:
 			| {
 					backend: "directory";
+					path: string;
+					readOnly?: false;
 			  }
 			| {
 					backend: "nfs";
@@ -175,6 +184,7 @@ export type ListVolumesResponses = {
 					server: string;
 					port?: number;
 					password?: string;
+					readOnly?: boolean;
 					ssl?: boolean;
 					username?: string;
 			  };
@@ -196,6 +206,8 @@ export type CreateVolumeData = {
 		config:
 			| {
 					backend: "directory";
+					path: string;
+					readOnly?: false;
 			  }
 			| {
 					backend: "nfs";
@@ -222,6 +234,7 @@ export type CreateVolumeData = {
 					server: string;
 					port?: number;
 					password?: string;
+					readOnly?: boolean;
 					ssl?: boolean;
 					username?: string;
 			  };
@@ -241,6 +254,8 @@ export type CreateVolumeResponses = {
 		config:
 			| {
 					backend: "directory";
+					path: string;
+					readOnly?: false;
 			  }
 			| {
 					backend: "nfs";
@@ -267,6 +282,7 @@ export type CreateVolumeResponses = {
 					server: string;
 					port?: number;
 					password?: string;
+					readOnly?: boolean;
 					ssl?: boolean;
 					username?: string;
 			  };
@@ -288,6 +304,8 @@ export type TestConnectionData = {
 		config:
 			| {
 					backend: "directory";
+					path: string;
+					readOnly?: false;
 			  }
 			| {
 					backend: "nfs";
@@ -314,6 +332,7 @@ export type TestConnectionData = {
 					server: string;
 					port?: number;
 					password?: string;
+					readOnly?: boolean;
 					ssl?: boolean;
 					username?: string;
 			  };
@@ -386,6 +405,8 @@ export type GetVolumeResponses = {
 			config:
 				| {
 						backend: "directory";
+						path: string;
+						readOnly?: false;
 				  }
 				| {
 						backend: "nfs";
@@ -412,6 +433,7 @@ export type GetVolumeResponses = {
 						server: string;
 						port?: number;
 						password?: string;
+						readOnly?: boolean;
 						ssl?: boolean;
 						username?: string;
 				  };
@@ -435,6 +457,8 @@ export type UpdateVolumeData = {
 		config?:
 			| {
 					backend: "directory";
+					path: string;
+					readOnly?: false;
 			  }
 			| {
 					backend: "nfs";
@@ -461,6 +485,7 @@ export type UpdateVolumeData = {
 					server: string;
 					port?: number;
 					password?: string;
+					readOnly?: boolean;
 					ssl?: boolean;
 					username?: string;
 			  };
@@ -488,6 +513,8 @@ export type UpdateVolumeResponses = {
 		config:
 			| {
 					backend: "directory";
+					path: string;
+					readOnly?: false;
 			  }
 			| {
 					backend: "nfs";
@@ -514,6 +541,7 @@ export type UpdateVolumeResponses = {
 					server: string;
 					port?: number;
 					password?: string;
+					readOnly?: boolean;
 					ssl?: boolean;
 					username?: string;
 			  };
@@ -714,9 +742,27 @@ export type ListRepositoriesResponses = {
 					endpoint: string;
 					secretAccessKey: string;
 			  }
+			| {
+					accountKey: string;
+					accountName: string;
+					backend: "azure";
+					container: string;
+					endpointSuffix?: string;
+			  }
+			| {
+					backend: "gcs";
+					bucket: string;
+					credentialsJson: string;
+					projectId: string;
+			  }
 			| {
 					backend: "local";
 					name: string;
+			  }
+			| {
+					backend: "rclone";
+					path: string;
+					remote: string;
 			  };
 		createdAt: number;
 		id: string;
@@ -724,7 +770,7 @@ export type ListRepositoriesResponses = {
 		lastError: string | null;
 		name: string;
 		status: "error" | "healthy" | "unknown" | null;
-		type: "local" | "s3";
+		type: "azure" | "gcs" | "local" | "rclone" | "s3";
 		updatedAt: number;
 	}>;
 };
@@ -741,9 +787,27 @@ export type CreateRepositoryData = {
 					endpoint: string;
 					secretAccessKey: string;
 			  }
+			| {
+					accountKey: string;
+					accountName: string;
+					backend: "azure";
+					container: string;
+					endpointSuffix?: string;
+			  }
+			| {
+					backend: "gcs";
+					bucket: string;
+					credentialsJson: string;
+					projectId: string;
+			  }
 			| {
 					backend: "local";
 					name: string;
+			  }
+			| {
+					backend: "rclone";
+					path: string;
+					remote: string;
 			  };
 		name: string;
 		compressionMode?: "auto" | "better" | "fastest" | "max" | "off";
@@ -768,6 +832,25 @@ export type CreateRepositoryResponses = {
 
 export type CreateRepositoryResponse = CreateRepositoryResponses[keyof CreateRepositoryResponses];
 
+export type ListRcloneRemotesData = {
+	body?: never;
+	path?: never;
+	query?: never;
+	url: "/api/v1/repositories/rclone-remotes";
+};
+
+export type ListRcloneRemotesResponses = {
+	/**
+	 * List of rclone remotes
+	 */
+	200: Array<{
+		name: string;
+		type: string;
+	}>;
+};
+
+export type ListRcloneRemotesResponse = ListRcloneRemotesResponses[keyof ListRcloneRemotesResponses];
+
 export type DeleteRepositoryData = {
 	body?: never;
 	path: {
@@ -811,9 +894,27 @@ export type GetRepositoryResponses = {
 					endpoint: string;
 					secretAccessKey: string;
 			  }
+			| {
+					accountKey: string;
+					accountName: string;
+					backend: "azure";
+					container: string;
+					endpointSuffix?: string;
+			  }
+			| {
+					backend: "gcs";
+					bucket: string;
+					credentialsJson: string;
+					projectId: string;
+			  }
 			| {
 					backend: "local";
 					name: string;
+			  }
+			| {
+					backend: "rclone";
+					path: string;
+					remote: string;
 			  };
 		createdAt: number;
 		id: string;
@@ -821,7 +922,7 @@ export type GetRepositoryResponses = {
 		lastError: string | null;
 		name: string;
 		status: "error" | "healthy" | "unknown" | null;
-		type: "local" | "s3";
+		type: "azure" | "gcs" | "local" | "rclone" | "s3";
 		updatedAt: number;
 	};
 };
@@ -962,12 +1063,11 @@ export type DoctorRepositoryResponses = {
 	 * Doctor operation completed
 	 */
 	200: {
-		message: string;
 		steps: Array<{
+			error: string | null;
+			output: string | null;
 			step: string;
 			success: boolean;
-			error?: string;
-			output?: string;
 		}>;
 		success: boolean;
 	};
@@ -1007,9 +1107,27 @@ export type ListBackupSchedulesResponses = {
 						endpoint: string;
 						secretAccessKey: string;
 				  }
+				| {
+						accountKey: string;
+						accountName: string;
+						backend: "azure";
+						container: string;
+						endpointSuffix?: string;
+				  }
+				| {
+						backend: "gcs";
+						bucket: string;
+						credentialsJson: string;
+						projectId: string;
+				  }
 				| {
 						backend: "local";
 						name: string;
+				  }
+				| {
+						backend: "rclone";
+						path: string;
+						remote: string;
 				  };
 			createdAt: number;
 			id: string;
@@ -1017,7 +1135,7 @@ export type ListBackupSchedulesResponses = {
 			lastError: string | null;
 			name: string;
 			status: "error" | "healthy" | "unknown" | null;
-			type: "local" | "s3";
+			type: "azure" | "gcs" | "local" | "rclone" | "s3";
 			updatedAt: number;
 		};
 		repositoryId: string;
@@ -1036,6 +1154,8 @@ export type ListBackupSchedulesResponses = {
 			config:
 				| {
 						backend: "directory";
+						path: string;
+						readOnly?: false;
 				  }
 				| {
 						backend: "nfs";
@@ -1062,6 +1182,7 @@ export type ListBackupSchedulesResponses = {
 						server: string;
 						port?: number;
 						password?: string;
+						readOnly?: boolean;
 						ssl?: boolean;
 						username?: string;
 				  };
@@ -1190,9 +1311,27 @@ export type GetBackupScheduleResponses = {
 						endpoint: string;
 						secretAccessKey: string;
 				  }
+				| {
+						accountKey: string;
+						accountName: string;
+						backend: "azure";
+						container: string;
+						endpointSuffix?: string;
+				  }
+				| {
+						backend: "gcs";
+						bucket: string;
+						credentialsJson: string;
+						projectId: string;
+				  }
 				| {
 						backend: "local";
 						name: string;
+				  }
+				| {
+						backend: "rclone";
+						path: string;
+						remote: string;
 				  };
 			createdAt: number;
 			id: string;
@@ -1200,7 +1339,7 @@ export type GetBackupScheduleResponses = {
 			lastError: string | null;
 			name: string;
 			status: "error" | "healthy" | "unknown" | null;
-			type: "local" | "s3";
+			type: "azure" | "gcs" | "local" | "rclone" | "s3";
 			updatedAt: number;
 		};
 		repositoryId: string;
@@ -1219,6 +1358,8 @@ export type GetBackupScheduleResponses = {
 			config:
 				| {
 						backend: "directory";
+						path: string;
+						readOnly?: false;
 				  }
 				| {
 						backend: "nfs";
@@ -1245,6 +1386,7 @@ export type GetBackupScheduleResponses = {
 						server: string;
 						port?: number;
 						password?: string;
+						readOnly?: boolean;
 						ssl?: boolean;
 						username?: string;
 				  };
@@ -1354,9 +1496,27 @@ export type GetBackupScheduleForVolumeResponses = {
 						endpoint: string;
 						secretAccessKey: string;
 				  }
+				| {
+						accountKey: string;
+						accountName: string;
+						backend: "azure";
+						container: string;
+						endpointSuffix?: string;
+				  }
+				| {
+						backend: "gcs";
+						bucket: string;
+						credentialsJson: string;
+						projectId: string;
+				  }
 				| {
 						backend: "local";
 						name: string;
+				  }
+				| {
+						backend: "rclone";
+						path: string;
+						remote: string;
 				  };
 			createdAt: number;
 			id: string;
@@ -1364,7 +1524,7 @@ export type GetBackupScheduleForVolumeResponses = {
 			lastError: string | null;
 			name: string;
 			status: "error" | "healthy" | "unknown" | null;
-			type: "local" | "s3";
+			type: "azure" | "gcs" | "local" | "rclone" | "s3";
 			updatedAt: number;
 		};
 		repositoryId: string;
@@ -1383,6 +1543,8 @@ export type GetBackupScheduleForVolumeResponses = {
 			config:
 				| {
 						backend: "directory";
+						path: string;
+						readOnly?: false;
 				  }
 				| {
 						backend: "nfs";
@@ -1409,6 +1571,7 @@ export type GetBackupScheduleForVolumeResponses = {
 						server: string;
 						port?: number;
 						password?: string;
+						readOnly?: boolean;
 						ssl?: boolean;
 						username?: string;
 				  };
@@ -1448,6 +1611,33 @@ export type RunBackupNowResponses = {
 
 export type RunBackupNowResponse = RunBackupNowResponses[keyof RunBackupNowResponses];
 
+export type StopBackupData = {
+	body?: never;
+	path: {
+		scheduleId: string;
+	};
+	query?: never;
+	url: "/api/v1/backups/{scheduleId}/stop";
+};
+
+export type StopBackupErrors = {
+	/**
+	 * No backup is currently running for this schedule
+	 */
+	409: unknown;
+};
+
+export type StopBackupResponses = {
+	/**
+	 * Backup stopped successfully
+	 */
+	200: {
+		success: boolean;
+	};
+};
+
+export type StopBackupResponse = StopBackupResponses[keyof StopBackupResponses];
+
 export type GetSystemInfoData = {
 	body?: never;
 	path?: never;
@@ -1462,12 +1652,27 @@ export type GetSystemInfoResponses = {
 	200: {
 		capabilities: {
 			docker: boolean;
+			rclone: boolean;
 		};
 	};
 };
 
 export type GetSystemInfoResponse = GetSystemInfoResponses[keyof GetSystemInfoResponses];
 
-export type ClientOptions = {
-	baseUrl: "http://192.168.2.42:4096" | (string & {});
+export type DownloadResticPasswordData = {
+	body?: {
+		password: string;
+	};
+	path?: never;
+	query?: never;
+	url: "/api/v1/system/restic-password";
 };
+
+export type DownloadResticPasswordResponses = {
+	/**
+	 * Restic password file content
+	 */
+	200: string;
+};
+
+export type DownloadResticPasswordResponse = DownloadResticPasswordResponses[keyof DownloadResticPasswordResponses];

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/auth-layout.tsx

@@ -9,7 +9,7 @@ type AuthLayoutProps = {
 
 export function AuthLayout({ title, description, children }: AuthLayoutProps) {
 	return (
-		<div className="flex min-h-screen">
+		<div className="flex mt-[25%] lg:mt-0 lg:min-h-screen">
 			<div className="flex flex-1 items-center justify-center bg-background p-8">
 				<div className="w-full max-w-md space-y-8">
 					<div className="flex items-center gap-3">
@@ -26,7 +26,7 @@ export function AuthLayout({ title, description, children }: AuthLayoutProps) {
 				</div>
 			</div>
 			<div
-				className="hidden lg:block lg:flex-1 dither-xl bg-cover bg-center"
+				className="hidden lg:block lg:flex-1 dither-lg bg-cover bg-center"
 				style={{ backgroundImage: "url(/images/background.jpg)" }}
 			/>
 		</div>

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

@@ -2,12 +2,12 @@ import { useMutation } from "@tanstack/react-query";
 import { Plus } from "lucide-react";
 import { useId } from "react";
 import { toast } from "sonner";
-import { createRepositoryMutation } from "~/api-client/@tanstack/react-query.gen";
-import { parseError } from "~/lib/errors";
+import { parseError } from "~/client/lib/errors";
 import { CreateRepositoryForm } from "./create-repository-form";
 import { Button } from "./ui/button";
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
 import { ScrollArea } from "./ui/scroll-area";
+import { createRepositoryMutation } from "../api-client/@tanstack/react-query.gen";
 
 type Props = {
 	open: boolean;

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

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

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

@@ -2,12 +2,12 @@ import { useMutation } from "@tanstack/react-query";
 import { Plus } from "lucide-react";
 import { useId } from "react";
 import { toast } from "sonner";
-import { createVolumeMutation } from "~/api-client/@tanstack/react-query.gen";
-import { parseError } from "~/lib/errors";
+import { parseError } from "~/client/lib/errors";
 import { CreateVolumeForm } from "./create-volume-form";
 import { Button } from "./ui/button";
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
 import { ScrollArea } from "./ui/scroll-area";
+import { createVolumeMutation } from "../api-client/@tanstack/react-query.gen";
 
 type Props = {
 	open: boolean;

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>

app/client/components/directory-browser.tsx

@@ -1,8 +1,8 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useMemo, useState } from "react";
-import { browseFilesystemOptions } from "~/api-client/@tanstack/react-query.gen";
 import { FileTree, type FileEntry } from "./file-tree";
 import { ScrollArea } from "./ui/scroll-area";
+import { browseFilesystemOptions } from "../api-client/@tanstack/react-query.gen";
 
 type Props = {
 	onSelectPath: (path: string) => void;
@@ -46,7 +46,7 @@ export const DirectoryBrowser = ({ onSelectPath, selectedPath }: Props) => {
 				setLoadingFolders((prev) => new Set(prev).add(folderPath));
 
 				try {
-					const result = await queryClient.fetchQuery(
+					const result = await queryClient.ensureQueryData(
 						browseFilesystemOptions({
 							query: { path: folderPath },
 						}),

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

@@ -1,8 +1,7 @@
 import { useMutation } from "@tanstack/react-query";
 import { LifeBuoy } from "lucide-react";
-import { Outlet, useNavigate } from "react-router";
+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,11 +10,17 @@ import { GridBackground } from "./grid-background";
 import { Button } from "./ui/button";
 import { SidebarProvider, SidebarTrigger } from "./ui/sidebar";
 import { AppSidebar } from "./app-sidebar";
+import { logoutMutation } from "../api-client/@tanstack/react-query.gen";
 
 export const clientMiddleware = [authMiddleware];
 
 export async function clientLoader({ context }: Route.LoaderArgs) {
 	const ctx = context.get(appContext);
+
+	if (ctx.user && !ctx.user.hasDownloadedResticPassword) {
+		throw redirect("/download-recovery-key");
+	}
+
 	return ctx;
 }
 
@@ -37,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 />
@@ -71,7 +76,7 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
 				</header>
 				<div className="main-content flex-1 overflow-y-auto">
 					<GridBackground>
-						<main className="flex flex-col p-2 pt-2 sm:p-8 sm:pt-6 mx-auto">
+						<main className="flex flex-col p-2 pb-6 pt-2 sm:p-8 sm:pt-6 mx-auto">
 							<Outlet />
 						</main>
 					</GridBackground>

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 = {
@@ -20,7 +20,12 @@ export const OnOff = ({ isOn, toggle, enabledLabel, disabledLabel, disabled }: P
 			)}
 		>
 			<span>{isOn ? enabledLabel : disabledLabel}</span>
-			<Switch disabled={disabled} checked={isOn} onCheckedChange={toggle} />
+			<Switch
+				disabled={disabled}
+				checked={isOn}
+				onCheckedChange={toggle}
+				aria-label={isOn ? `Toggle ${enabledLabel}` : `Toggle ${disabledLabel}`}
+			/>
 		</div>
 	);
 };

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 { formatSnapshotDuration } from "~/modules/repositories/tabs/snapshots";
+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];
 
@@ -62,9 +62,7 @@ export const SnapshotsTable = ({ snapshots, repositoryName }: Props) => {
 							<TableCell className="hidden md:table-cell">
 								<div className="flex items-center justify-end gap-2">
 									<Clock className="h-4 w-4 text-muted-foreground" />
-									<span className="text-sm text-muted-foreground">
-										{formatSnapshotDuration(snapshot.duration / 1000)}
-									</span>
+									<span className="text-sm text-muted-foreground">{formatDuration(snapshot.duration / 1000)}</span>
 								</div>
 							</TableCell>
 							<TableCell className="hidden lg:table-cell">

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 }) => {

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",
@@ -10,6 +10,7 @@ const alertVariants = cva(
 			variant: {
 				default: "bg-background text-foreground",
 				destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+				warning: "border-orange-500/20 bg-orange-500/10 text-orange-500 [&>svg]:text-orange-500",
 			},
 		},
 		defaultVariants: {

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

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

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

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

app/client/components/ui/select.tsx

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

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

app/client/components/ui/tooltip.tsx

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

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

@@ -1,8 +1,8 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { FolderOpen } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
-import { listFilesOptions } from "~/api-client/@tanstack/react-query.gen";
-import { FileTree } from "~/components/file-tree";
+import { FileTree } from "~/client/components/file-tree";
+import { listFilesOptions } from "../api-client/@tanstack/react-query.gen";
 
 interface FileEntry {
 	name: string;
@@ -72,7 +72,7 @@ export const VolumeFileBrowser = ({
 				setLoadingFolders((prev) => new Set(prev).add(folderPath));
 
 				try {
-					const result = await queryClient.fetchQuery(
+					const result = await queryClient.ensureQueryData(
 						listFilesOptions({
 							path: { name: volumeName },
 							query: { path: folderPath },
@@ -101,7 +101,7 @@ export const VolumeFileBrowser = ({
 				}
 			}
 		},
-		[volumeName, fetchedFolders, queryClient.fetchQuery],
+		[volumeName, fetchedFolders, queryClient.ensureQueryData],
 	);
 
 	const handleFolderHover = useCallback(

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-mobile.ts

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

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

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

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

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

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

@@ -4,15 +4,26 @@ 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];
 
+export function meta(_: Route.MetaArgs) {
+	return [
+		{ title: "Login" },
+		{
+			name: "description",
+			content: "Sign in to your Ironmount account.",
+		},
+	];
+}
+
 const loginSchema = type({
 	username: "2<=string<=50",
 	password: "string>=1",
@@ -33,8 +44,12 @@ export default function LoginPage() {
 
 	const login = useMutation({
 		...loginMutation(),
-		onSuccess: async () => {
-			navigate("/volumes");
+		onSuccess: async (data) => {
+			if (data.user && !data.user.hasDownloadedResticPassword) {
+				navigate("/download-recovery-key");
+			} else {
+				navigate("/volumes");
+			}
 		},
 		onError: (error) => {
 			console.error(error);

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

@@ -4,15 +4,34 @@ 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];
 
+export function meta(_: Route.MetaArgs) {
+	return [
+		{ title: "Onboarding" },
+		{
+			name: "description",
+			content: "Welcome to Ironmount. Create your admin account to get started.",
+		},
+	];
+}
+
 const onboardingSchema = type({
 	username: "2<=string<=50",
 	password: "string>=8",
@@ -37,7 +56,7 @@ export default function OnboardingPage() {
 		...registerMutation(),
 		onSuccess: async () => {
 			toast.success("Admin user created successfully!");
-			navigate("/volumes");
+			navigate("/download-recovery-key");
 		},
 		onError: (error) => {
 			console.error(error);

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

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

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

@@ -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,19 +3,28 @@ 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 { 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 formSchema = type({
+const internalFormSchema = type({
 	repositoryId: "string",
-	excludePatterns: "string[]?",
+	excludePatternsText: "string?",
 	includePatterns: "string[]?",
 	frequency: "string",
 	dailyTime: "string?",
@@ -27,7 +36,7 @@ const formSchema = type({
 	keepMonthly: "number?",
 	keepYearly: "number?",
 });
-const cleanSchema = type.pipe((d) => formSchema(deepClean(d)));
+const cleanSchema = type.pipe((d) => internalFormSchema(deepClean(d)));
 
 export const weeklyDays = [
 	{ label: "Monday", value: "1" },
@@ -39,7 +48,11 @@ export const weeklyDays = [
 	{ label: "Sunday", value: "0" },
 ];
 
-export type BackupScheduleFormValues = typeof formSchema.infer;
+type InternalFormValues = typeof internalFormSchema.infer;
+
+export type BackupScheduleFormValues = Omit<InternalFormValues, "excludePatternsText"> & {
+	excludePatterns?: string[];
+};
 
 type Props = {
 	volume: Volume;
@@ -50,7 +63,7 @@ type Props = {
 	formId: string;
 };
 
-const backupScheduleToFormValues = (schedule?: BackupSchedule): BackupScheduleFormValues | undefined => {
+const backupScheduleToFormValues = (schedule?: BackupSchedule): InternalFormValues | undefined => {
 	if (!schedule) {
 		return undefined;
 	}
@@ -72,16 +85,36 @@ const backupScheduleToFormValues = (schedule?: BackupSchedule): BackupScheduleFo
 		dailyTime,
 		weeklyDay,
 		includePatterns: schedule.includePatterns || undefined,
+		excludePatternsText: schedule.excludePatterns?.join("\n") || undefined,
 		...schedule.retentionPolicy,
 	};
 };
 
 export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }: Props) => {
-	const form = useForm<BackupScheduleFormValues>({
-		resolver: arktypeResolver(cleanSchema as unknown as typeof formSchema),
+	const form = useForm<InternalFormValues>({
+		resolver: arktypeResolver(cleanSchema as unknown as typeof internalFormSchema),
 		defaultValues: backupScheduleToFormValues(initialValues),
 	});
 
+	const handleSubmit = useCallback(
+		(data: InternalFormValues) => {
+			// Convert excludePatternsText string to excludePatterns array
+			const { excludePatternsText, ...rest } = data;
+			const excludePatterns = excludePatternsText
+				? excludePatternsText
+						.split("\n")
+						.map((p) => p.trim())
+						.filter(Boolean)
+				: undefined;
+
+			onSubmit({
+				...rest,
+				excludePatterns,
+			});
+		},
+		[onSubmit],
+	);
+
 	const { data: repositoriesData } = useQuery({
 		...listRepositoriesOptions(),
 	});
@@ -102,8 +135,8 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 	return (
 		<Form {...form}>
 			<form
-				onSubmit={form.handleSubmit(onSubmit)}
-				className="grid gap-4 xl:grid-cols-[minmax(0,_2.3fr)_minmax(320px,_1fr)]"
+				onSubmit={form.handleSubmit(handleSubmit)}
+				className="grid gap-4 xl:grid-cols-[minmax(0,2.3fr)_minmax(320px,1fr)]"
 				id={formId}
 			>
 				<div className="grid gap-4">
@@ -232,7 +265,7 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 								onSelectionChange={handleSelectionChange}
 								withCheckboxes={true}
 								foldersOnly={true}
-								className="overflow-auto flex-1 border rounded-md bg-card p-2 min-h-[300px] max-h-[400px]"
+								className="flex-1 border rounded-md bg-card p-2 min-h-[300px] max-h-[400px] overflow-auto"
 							/>
 							{selectedPaths.size > 0 && (
 								<div className="mt-4">
@@ -249,6 +282,47 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 						</CardContent>
 					</Card>
 
+					<Card>
+						<CardHeader>
+							<CardTitle>Exclude patterns</CardTitle>
+							<CardDescription>
+								Optionally specify patterns to exclude from backups. Enter one pattern per line (e.g., *.tmp,
+								node_modules/**, .cache/).
+							</CardDescription>
+						</CardHeader>
+						<CardContent>
+							<FormField
+								control={form.control}
+								name="excludePatternsText"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Exclusion patterns</FormLabel>
+										<FormControl>
+											<Textarea
+												{...field}
+												placeholder="*.tmp&#10;node_modules/**&#10;.cache/&#10;*.log"
+												className="font-mono text-sm min-h-[120px]"
+											/>
+										</FormControl>
+										<FormDescription>
+											Patterns support glob syntax. See&nbsp;
+											<a
+												href="https://restic.readthedocs.io/en/stable/040_backup.html#excluding-files"
+												target="_blank"
+												rel="noopener noreferrer"
+												className="underline hover:text-foreground"
+											>
+												Restic documentation
+											</a>
+											&nbsp;for more details.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</CardContent>
+					</Card>
+
 					<Card>
 						<CardHeader>
 							<CardTitle>Retention policy</CardTitle>
@@ -408,6 +482,33 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 									{repositoriesData?.find((r) => r.id === formValues.repositoryId)?.name || "—"}
 								</p>
 							</div>
+							{formValues.includePatterns && formValues.includePatterns.length > 0 && (
+								<div>
+									<p className="text-xs uppercase text-muted-foreground">Include paths</p>
+									<div className="flex flex-col gap-1">
+										{formValues.includePatterns.map((path) => (
+											<span key={path} className="text-xs font-mono bg-accent px-1.5 py-0.5 rounded">
+												{path}
+											</span>
+										))}
+									</div>
+								</div>
+							)}
+							{formValues.excludePatternsText && (
+								<div>
+									<p className="text-xs uppercase text-muted-foreground">Exclude patterns</p>
+									<div className="flex flex-col gap-1">
+										{formValues.excludePatternsText
+											.split("\n")
+											.filter(Boolean)
+											.map((pattern) => (
+												<span key={pattern} className="text-xs font-mono bg-accent px-1.5 py-0.5 rounded">
+													{pattern.trim()}
+												</span>
+											))}
+									</div>
+								</div>
+							)}
 							<div>
 								<p className="text-xs uppercase text-muted-foreground">Retention</p>
 								<p className="font-medium">

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

@@ -1,8 +1,8 @@
-import { Pencil, Play, Trash2 } from "lucide-react";
+import { 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,19 +11,22 @@ 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";
 
 type Props = {
 	schedule: BackupSchedule;
 	handleToggleEnabled: (enabled: boolean) => void;
 	handleRunBackupNow: () => void;
+	handleStopBackup: () => void;
 	handleDeleteSchedule: () => void;
 	setIsEditMode: (isEdit: boolean) => void;
 };
 
 export const ScheduleSummary = (props: Props) => {
-	const { schedule, handleToggleEnabled, handleRunBackupNow, handleDeleteSchedule, setIsEditMode } = props;
+	const { schedule, handleToggleEnabled, handleRunBackupNow, handleStopBackup, handleDeleteSchedule, setIsEditMode } =
+		props;
 	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 
 	const summary = useMemo(() => {
@@ -75,16 +78,17 @@ export const ScheduleSummary = (props: Props) => {
 						</div>
 					</div>
 					<div className="flex flex-col sm:flex-row gap-2">
-						<Button
-							variant="default"
-							size="sm"
-							onClick={handleRunBackupNow}
-							disabled={schedule.lastBackupStatus === "in_progress"}
-							className="w-full sm:w-auto"
-						>
-							<Play className="h-4 w-4 mr-2" />
-							<span className="sm:inline">Backup now</span>
-						</Button>
+						{schedule.lastBackupStatus === "in_progress" ? (
+							<Button variant="destructive" size="sm" onClick={handleStopBackup} className="w-full sm:w-auto">
+								<Square className="h-4 w-4 mr-2" />
+								<span className="sm:inline">Stop backup</span>
+							</Button>
+						) : (
+							<Button variant="default" size="sm" onClick={handleRunBackupNow} className="w-full sm:w-auto">
+								<Play className="h-4 w-4 mr-2" />
+								<span className="sm:inline">Backup now</span>
+							</Button>
+						)}
 						<Button variant="outline" size="sm" onClick={() => setIsEditMode(true)} className="w-full sm:w-auto">
 							<Pencil className="h-4 w-4 mr-2" />
 							<span className="sm:inline">Edit schedule</span>
@@ -141,6 +145,8 @@ export const ScheduleSummary = (props: Props) => {
 				</CardContent>
 			</Card>
 
+			{schedule.lastBackupStatus === "in_progress" && <BackupProgressCard scheduleId={schedule.id} />}
+
 			<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
 				<AlertDialogContent>
 					<AlertDialogHeader>

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

@@ -1,12 +1,11 @@
 import { useCallback, useMemo, 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, type FileEntry } from "~/client/components/file-tree";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
+import { Button } from "~/client/components/ui/button";
+import { Checkbox } from "~/client/components/ui/checkbox";
+import { Label } from "~/client/components/ui/label";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -16,10 +15,11 @@ 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";
 
 interface Props {
 	snapshot: Snapshot;
@@ -41,7 +41,7 @@ export const SnapshotFileBrowser = (props: Props) => {
 	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({
@@ -104,7 +104,7 @@ export const SnapshotFileBrowser = (props: Props) => {
 				try {
 					const fullPath = addBasePath(folderPath);
 
-					const result = await queryClient.fetchQuery(
+					const result = await queryClient.ensureQueryData(
 						listSnapshotFilesOptions({
 							path: { name: repositoryName, snapshotId: snapshot.short_id },
 							query: { path: fullPath },
@@ -145,12 +145,12 @@ export const SnapshotFileBrowser = (props: Props) => {
 			if (!fetchedFolders.has(folderPath) && !loadingFolders.has(folderPath)) {
 				const fullPath = addBasePath(folderPath);
 
-				queryClient.prefetchQuery(
-					listSnapshotFilesOptions({
+				queryClient.prefetchQuery({
+					...listSnapshotFilesOptions({
 						path: { name: repositoryName, snapshotId: snapshot.short_id },
 						query: { path: fullPath },
 					}),
-				);
+				});
 			}
 		},
 		[repositoryName, snapshot, fetchedFolders, loadingFolders, queryClient, addBasePath],

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,22 +2,40 @@ 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,
 	deleteBackupScheduleMutation,
 	listSnapshotsOptions,
 	updateBackupScheduleMutation,
-} from "~/api-client/@tanstack/react-query.gen";
-import { parseError } from "~/lib/errors";
+	stopBackupMutation,
+} from "~/client/api-client/@tanstack/react-query.gen";
+import { parseError } from "~/client/lib/errors";
 import { getCronExpression } from "~/utils/utils";
 import { CreateScheduleForm, type BackupScheduleFormValues } from "../components/create-schedule-form";
 import { ScheduleSummary } from "../components/schedule-summary";
-import { 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 [
+		{ title: "Backup Job Details" },
+		{
+			name: "description",
+			content: "View and manage backup job configuration, schedule, and snapshots.",
+		},
+	];
+}
 
 export const clientLoader = async ({ params }: Route.LoaderArgs) => {
 	const { data } = await getBackupSchedule({ path: { scheduleId: params.id } });
@@ -34,9 +52,7 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
 	const [selectedSnapshotId, setSelectedSnapshotId] = useState<string>();
 
 	const { data: schedule } = useQuery({
-		...getBackupScheduleOptions({
-			path: { scheduleId: params.id },
-		}),
+		...getBackupScheduleOptions({ path: { scheduleId: params.id } }),
 		initialData: loaderData,
 		refetchInterval: 10000,
 		refetchOnWindowFocus: true,
@@ -47,13 +63,10 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
 		isLoading,
 		failureReason,
 	} = useQuery({
-		...listSnapshotsOptions({
-			path: { name: schedule.repository.name },
-			query: { backupId: schedule.id.toString() },
-		}),
+		...listSnapshotsOptions({ path: { name: schedule.repository.name }, query: { backupId: schedule.id.toString() } }),
 	});
 
-	const upsertSchedule = useMutation({
+	const updateSchedule = useMutation({
 		...updateBackupScheduleMutation(),
 		onSuccess: () => {
 			toast.success("Backup schedule saved successfully");
@@ -72,9 +85,17 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
 			toast.success("Backup started successfully");
 		},
 		onError: (error) => {
-			toast.error("Failed to start backup", {
-				description: parseError(error)?.message,
-			});
+			toast.error("Failed to start backup", { description: parseError(error)?.message });
+		},
+	});
+
+	const stopBackup = useMutation({
+		...stopBackupMutation(),
+		onSuccess: () => {
+			toast.success("Backup stopped successfully");
+		},
+		onError: (error) => {
+			toast.error("Failed to stop backup", { description: parseError(error)?.message });
 		},
 	});
 
@@ -85,9 +106,7 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
 			navigate("/backups");
 		},
 		onError: (error) => {
-			toast.error("Failed to delete backup schedule", {
-				description: parseError(error)?.message,
-			});
+			toast.error("Failed to delete backup schedule", { description: parseError(error)?.message });
 		},
 	});
 
@@ -104,7 +123,7 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
 		if (formValues.keepMonthly) retentionPolicy.keepMonthly = formValues.keepMonthly;
 		if (formValues.keepYearly) retentionPolicy.keepYearly = formValues.keepYearly;
 
-		upsertSchedule.mutate({
+		updateSchedule.mutate({
 			path: { scheduleId: schedule.id.toString() },
 			body: {
 				repositoryId: formValues.repositoryId,
@@ -118,9 +137,7 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
 	};
 
 	const handleToggleEnabled = (enabled: boolean) => {
-		if (!schedule) return;
-
-		upsertSchedule.mutate({
+		updateSchedule.mutate({
 			path: { scheduleId: schedule.id.toString() },
 			body: {
 				repositoryId: schedule.repositoryId,
@@ -133,28 +150,12 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
 		});
 	};
 
-	const handleRunBackupNow = () => {
-		if (!schedule) return;
-
-		runBackupNow.mutate({
-			path: {
-				scheduleId: schedule.id.toString(),
-			},
-		});
-	};
-
-	const handleDeleteSchedule = () => {
-		if (!schedule) return;
-
-		deleteSchedule.mutate({ path: { scheduleId: schedule.id.toString() } });
-	};
-
 	if (isEditMode) {
 		return (
 			<div>
 				<CreateScheduleForm volume={schedule.volume} initialValues={schedule} onSubmit={handleSubmit} formId={formId} />
 				<div className="flex justify-end mt-4 gap-2">
-					<Button type="submit" className="ml-auto" variant="primary" form={formId} loading={upsertSchedule.isPending}>
+					<Button type="submit" className="ml-auto" variant="primary" form={formId} loading={updateSchedule.isPending}>
 						Update schedule
 					</Button>
 					<Button variant="outline" onClick={() => setIsEditMode(false)}>
@@ -171,8 +172,9 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
 		<div className="flex flex-col gap-6">
 			<ScheduleSummary
 				handleToggleEnabled={handleToggleEnabled}
-				handleRunBackupNow={handleRunBackupNow}
-				handleDeleteSchedule={handleDeleteSchedule}
+				handleRunBackupNow={() => runBackupNow.mutate({ path: { scheduleId: schedule.id.toString() } })}
+				handleStopBackup={() => stopBackup.mutate({ path: { scheduleId: schedule.id.toString() } })}
+				handleDeleteSchedule={() => deleteSchedule.mutate({ path: { scheduleId: schedule.id.toString() } })}
 				setIsEditMode={setIsEditMode}
 				schedule={schedule}
 			/>

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

@@ -1,20 +1,24 @@
 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 [
-		{ title: "Ironmount" },
+		{ title: "Backup Jobs" },
 		{
 			name: "description",
-			content: "Create, manage, monitor, and automate your Docker volumes with ease.",
+			content: "Automate volume backups with scheduled jobs and retention policies.",
 		},
 	];
 }
@@ -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,23 +7,27 @@ 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 [
-		{ title: "Ironmount" },
+		{ title: "Create Backup Job" },
 		{
 			name: "description",
-			content: "Create, manage, monitor, and automate your Docker volumes with ease.",
+			content: "Create a new automated backup job for your volumes.",
 		},
 	];
 }
@@ -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/repositories.tsx

@@ -2,25 +2,29 @@ import { useQuery } from "@tanstack/react-query";
 import { Database, 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 { CreateRepositoryDialog } from "~/client/components/create-repository-dialog";
+import { RepositoryIcon } from "~/client/components/repository-icon";
+import { Button } from "~/client/components/ui/button";
+import { Card } from "~/client/components/ui/card";
+import { Input } from "~/client/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/client/components/ui/table";
 import type { Route } from "./+types/repositories";
-import { cn } from "~/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 [
-		{ title: "Ironmount - Repositories" },
+		{ title: "Repositories" },
 		{
 			name: "description",
-			content: "Manage your backup repositories",
+			content: "Manage your backup repositories with encryption and compression.",
 		},
 	];
 }
@@ -79,13 +83,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 +99,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) && (

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

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

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

@@ -1,21 +1,44 @@
 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}` },
+		{
+			name: "description",
+			content: "Browse and restore files from a backup snapshot.",
+		},
+	];
+}
+
 export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
-	const snapshot = await getSnapshotDetails({ path: { name: params.name, snapshotId: params.snapshotId } });
+	const snapshot = await getSnapshotDetails({
+		path: { name: params.name, snapshotId: params.snapshotId },
+	});
 	if (snapshot.data) return snapshot.data;
 
 	return redirect("/repositories");
 };
 
 export default function SnapshotDetailsPage({ loaderData }: Route.ComponentProps) {
-	const { name, snapshotId } = useParams<{ name: string; snapshotId: string }>();
+	const { name, snapshotId } = useParams<{
+		name: string;
+		snapshotId: string;
+	}>();
 
 	const { data } = useQuery({
 		...listSnapshotFilesOptions({
@@ -54,11 +77,11 @@ export default function SnapshotDetailsPage({ loaderData }: Route.ComponentProps
 						<div className="grid grid-cols-2 gap-4">
 							<div>
 								<span className="text-muted-foreground">Snapshot ID:</span>
-								<p className="font-mono">{data.snapshot.id}</p>
+								<p className="font-mono break-all">{data.snapshot.id}</p>
 							</div>
 							<div>
 								<span className="text-muted-foreground">Short ID:</span>
-								<p className="font-mono">{data.snapshot.short_id}</p>
+								<p className="font-mono break-all">{data.snapshot.short_id}</p>
 							</div>
 							<div>
 								<span className="text-muted-foreground">Hostname:</span>
@@ -72,7 +95,7 @@ export default function SnapshotDetailsPage({ loaderData }: Route.ComponentProps
 								<span className="text-muted-foreground">Paths:</span>
 								<div className="space-y-1 mt-1">
 									{data.snapshot.paths.map((path) => (
-										<p key={path} className="font-mono text-xs bg-muted px-2 py-1 rounded">
+										<p key={path} className="font-mono text-xs bg-muted px-2 py-1 rounded break-all">
 											{path}
 										</p>
 									))}

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

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

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

@@ -1,32 +1,18 @@
 import { useQuery } from "@tanstack/react-query";
-import { intervalToDuration } from "date-fns";
 import { Database } from "lucide-react";
 import { useState } from "react";
-import { listSnapshotsOptions } from "~/api-client/@tanstack/react-query.gen";
-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;
 };
 
-export const formatSnapshotDuration = (seconds: number) => {
-	const duration = intervalToDuration({ start: 0, end: seconds * 1000 });
-	const parts: string[] = [];
-
-	if (duration.days) parts.push(`${duration.days}d`);
-	if (duration.hours) parts.push(`${duration.hours}h`);
-	if (duration.minutes) parts.push(`${duration.minutes}m`);
-	if (duration.seconds || parts.length === 0) parts.push(`${duration.seconds || 0}s`);
-
-	return parts.join(" ");
-};
-
 export const RepositorySnapshotsTabContent = ({ repository }: Props) => {
 	const [searchQuery, setSearchQuery] = useState("");
 
@@ -46,7 +32,7 @@ export const RepositorySnapshotsTabContent = ({ repository }: Props) => {
 		);
 	});
 
-	const hasNoFilteredSnapshots = !filteredSnapshots?.length && !data.length;
+	const hasNoFilteredSnapshots = !filteredSnapshots?.length;
 
 	if (repository.status === "error") {
 		return (
@@ -97,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>
@@ -124,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)}
@@ -156,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

@@ -1,19 +1,36 @@
 import { useMutation } from "@tanstack/react-query";
-import { KeyRound, User } from "lucide-react";
+import { Download, KeyRound, User } from "lucide-react";
 import { useState } from "react";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
-import { changePasswordMutation, logoutMutation } from "~/api-client/@tanstack/react-query.gen";
-import { Button } from "~/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
-import { Input } from "~/components/ui/input";
-import { Label } from "~/components/ui/label";
+import { Button } from "~/client/components/ui/button";
+import { Card, CardContent, CardDescription, CardTitle } from "~/client/components/ui/card";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "~/client/components/ui/dialog";
+import { Input } from "~/client/components/ui/input";
+import { Label } from "~/client/components/ui/label";
 import { appContext } from "~/context";
 import type { Route } from "./+types/settings";
+import {
+	changePasswordMutation,
+	downloadResticPasswordMutation,
+	logoutMutation,
+} from "~/client/api-client/@tanstack/react-query.gen";
+
+export const handle = {
+	breadcrumb: () => [{ label: "Settings" }],
+};
 
 export function meta(_: Route.MetaArgs) {
 	return [
-		{ title: "Settings - Ironmount" },
+		{ title: "Settings" },
 		{
 			name: "description",
 			content: "Manage your account settings and preferences.",
@@ -30,6 +47,8 @@ export default function Settings({ loaderData }: Route.ComponentProps) {
 	const [currentPassword, setCurrentPassword] = useState("");
 	const [newPassword, setNewPassword] = useState("");
 	const [confirmPassword, setConfirmPassword] = useState("");
+	const [downloadDialogOpen, setDownloadDialogOpen] = useState(false);
+	const [downloadPassword, setDownloadPassword] = useState("");
 	const navigate = useNavigate();
 
 	const logout = useMutation({
@@ -56,6 +75,28 @@ export default function Settings({ loaderData }: Route.ComponentProps) {
 		},
 	});
 
+	const downloadResticPassword = useMutation({
+		...downloadResticPasswordMutation(),
+		onSuccess: (data) => {
+			const blob = new Blob([data], { type: "text/plain" });
+			const url = window.URL.createObjectURL(blob);
+			const a = document.createElement("a");
+			a.href = url;
+			a.download = "restic.pass";
+			document.body.appendChild(a);
+			a.click();
+			document.body.removeChild(a);
+			window.URL.revokeObjectURL(url);
+
+			toast.success("Restic password file downloaded successfully");
+			setDownloadDialogOpen(false);
+			setDownloadPassword("");
+		},
+		onError: (error) => {
+			toast.error("Failed to download Restic password", { description: error.message });
+		},
+	});
+
 	const handleChangePassword = (e: React.FormEvent) => {
 		e.preventDefault();
 
@@ -77,6 +118,21 @@ export default function Settings({ loaderData }: Route.ComponentProps) {
 		});
 	};
 
+	const handleDownloadResticPassword = (e: React.FormEvent) => {
+		e.preventDefault();
+
+		if (!downloadPassword) {
+			toast.error("Password is required");
+			return;
+		}
+
+		downloadResticPassword.mutate({
+			body: {
+				password: downloadPassword,
+			},
+		});
+	};
+
 	return (
 		<Card className="p-0 gap-0">
 			<div className="border-b border-border/50 bg-card-header p-6">
@@ -143,6 +199,69 @@ export default function Settings({ loaderData }: Route.ComponentProps) {
 					</Button>
 				</form>
 			</CardContent>
+
+			<div className="border-t border-border/50 bg-card-header p-6">
+				<CardTitle className="flex items-center gap-2">
+					<Download className="size-5" />
+					Backup Recovery Key
+				</CardTitle>
+				<CardDescription className="mt-1.5">Download your Restic password file for disaster recovery</CardDescription>
+			</div>
+			<CardContent className="p-6 space-y-4">
+				<p className="text-sm text-muted-foreground max-w-2xl">
+					This file contains the encryption password used by Restic to secure your backups. Store it in a safe place
+					(like a password manager or encrypted storage). If you lose access to this server, you'll need this file to
+					recover your backup data.
+				</p>
+
+				<Dialog open={downloadDialogOpen} onOpenChange={setDownloadDialogOpen}>
+					<DialogTrigger asChild>
+						<Button variant="outline">
+							<Download size={16} className="mr-2" />
+							Download Restic Password
+						</Button>
+					</DialogTrigger>
+					<DialogContent>
+						<form onSubmit={handleDownloadResticPassword}>
+							<DialogHeader>
+								<DialogTitle>Download Restic Password</DialogTitle>
+								<DialogDescription>
+									For security reasons, please enter your account password to download the Restic password file.
+								</DialogDescription>
+							</DialogHeader>
+							<div className="space-y-4 py-4">
+								<div className="space-y-2">
+									<Label htmlFor="download-password">Your Password</Label>
+									<Input
+										id="download-password"
+										type="password"
+										value={downloadPassword}
+										onChange={(e) => setDownloadPassword(e.target.value)}
+										placeholder="Enter your password"
+										required
+										autoFocus
+									/>
+								</div>
+							</div>
+							<DialogFooter>
+								<Button
+									type="button"
+									variant="outline"
+									onClick={() => {
+										setDownloadDialogOpen(false);
+										setDownloadPassword("");
+									}}
+								>
+									Cancel
+								</Button>
+								<Button type="submit" loading={downloadResticPassword.isPending}>
+									Download
+								</Button>
+							</DialogFooter>
+						</form>
+					</DialogContent>
+				</Dialog>
+			</CardContent>
 		</Card>
 	);
 }

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

@@ -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/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,28 +13,40 @@ 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 [
-		{ title: `Ironmount - ${params.name}` },
+		{ title: params.name },
 		{
 			name: "description",
-			content: "Create, manage, monitor, and automate your Docker volumes with ease.",
+			content: "View and manage volume details, configuration, and files.",
 		},
 	];
 }
 
 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,18 +117,16 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
 	}
 
 	const { volume, statfs } = data;
-	const dockerAvailable = systemInfo?.capabilities?.docker ?? false;
+	const dockerAvailable = capabilities.docker;
 
 	return (
 		<>
-			<div className="flex items-center justify-between">
-				<div>
-					<div className="text-sm font-semibold mb-2 text-muted-foreground flex items-center gap-2">
-						<span className="flex items-center gap-2">
-							<StatusDot status={volume.status} /> {volume.status[0].toUpperCase() + volume.status.slice(1)}
-						</span>
-						<VolumeIcon size={14} backend={volume?.config.backend} />
-					</div>
+			<div className="flex flex-col items-start xs:items-center xs:flex-row xs:justify-between">
+				<div className="text-sm font-semibold mb-2 xs:mb-0 text-muted-foreground flex items-center gap-2">
+					<span className="flex items-center gap-2">
+						<StatusDot status={volume.status} /> {volume.status[0].toUpperCase() + volume.status.slice(1)}
+					</span>
+					<VolumeIcon size={14} backend={volume?.config.backend} />
 				</div>
 				<div className="flex gap-4">
 					<Button
@@ -152,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

@@ -2,22 +2,26 @@ import { useQuery } from "@tanstack/react-query";
 import { HardDrive, 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 { CreateVolumeDialog } from "~/client/components/create-volume-dialog";
+import { EmptyState } from "~/client/components/empty-state";
+import { StatusDot } from "~/client/components/status-dot";
+import { Button } from "~/client/components/ui/button";
+import { Card } from "~/client/components/ui/card";
+import { Input } from "~/client/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/client/components/ui/table";
+import { VolumeIcon } from "~/client/components/volume-icon";
 import type { Route } from "./+types/volumes";
+import { listVolumes } from "~/client/api-client";
+import { listVolumesOptions } from "~/client/api-client/@tanstack/react-query.gen";
+
+export const handle = {
+	breadcrumb: () => [{ label: "Volumes" }],
+};
 
 export function meta(_: Route.MetaArgs) {
 	return [
-		{ title: "Ironmount" },
+		{ title: "Volumes" },
 		{
 			name: "description",
 			content: "Create, manage, monitor, and automate your Docker volumes with ease.",
@@ -79,13 +83,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 +99,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>

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;

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

@@ -1,8 +1,7 @@
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
 import { toast } from "sonner";
-import { updateVolumeMutation } from "~/api-client/@tanstack/react-query.gen";
-import { CreateVolumeForm, type FormValues } from "~/components/create-volume-form";
+import { CreateVolumeForm, type FormValues } from "~/client/components/create-volume-form";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -12,11 +11,12 @@ import {
 	AlertDialogFooter,
 	AlertDialogHeader,
 	AlertDialogTitle,
-} from "~/components/ui/alert-dialog";
-import { Card } from "~/components/ui/card";
-import type { StatFs, Volume } from "~/lib/types";
+} from "~/client/components/ui/alert-dialog";
+import { Card } from "~/client/components/ui/card";
+import type { StatFs, Volume } from "~/client/lib/types";
 import { HealthchecksCard } from "../components/healthchecks-card";
 import { StorageChart } from "../components/storage-chart";
+import { updateVolumeMutation } from "~/client/api-client/@tanstack/react-query.gen";
 
 type Props = {
 	volume: Volume;
@@ -57,7 +57,7 @@ export const VolumeInfoTabContent = ({ volume, statfs }: Props) => {
 
 	return (
 		<>
-			<div className="grid gap-4 xl:grid-cols-[minmax(0,_2.3fr)_minmax(320px,_1fr)]">
+			<div className="grid gap-4 xl:grid-cols-[minmax(0,2.3fr)_minmax(320px,1fr)]">
 				<Card className="p-6">
 					<CreateVolumeForm
 						initialValues={{ ...volume, ...volume.config }}