feat: add webdav support

Dockerfile.dev

@@ -1,5 +1,7 @@
 FROM oven/bun:1.2.20-alpine AS base
 
+RUN apk add --no-cache davfs2
+
 WORKDIR /app
 
 COPY ./package.json ./bun.lock ./

README.md

@@ -1,3 +1,5 @@
 # ironmount
 
 docker run --rm -it -v nicolas:/data alpine sh -lc 'echo hello > /data/hi && cat /data/hi'
+
+mount -t davfs http://192.168.2.42 /mnt/webdav

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

@@ -27,6 +27,22 @@ export type ListVolumesResponses = {
 				  }
 				| {
 						backend: "smb";
+						password: string;
+						server: string;
+						share: string;
+						username: string;
+						vers?: "1.0" | "2.0" | "2.1" | "3.0";
+						port?: number | string;
+						domain?: string;
+				  }
+				| {
+						backend: "webdav";
+						path: string;
+						server: string;
+						port?: number | string;
+						password?: string;
+						ssl?: boolean;
+						username?: string;
 				  };
 			createdAt: number;
 			lastError: string;
@@ -34,7 +50,7 @@ export type ListVolumesResponses = {
 			name: string;
 			path: string;
 			status: "error" | "mounted" | "unknown" | "unmounted";
-			type: "directory" | "nfs" | "smb";
+			type: "directory" | "nfs" | "smb" | "webdav";
 			updatedAt: number;
 		}>;
 	};
@@ -57,6 +73,22 @@ export type CreateVolumeData = {
 			  }
 			| {
 					backend: "smb";
+					password: string;
+					server: string;
+					share: string;
+					username: string;
+					vers?: "1.0" | "2.0" | "2.1" | "3.0";
+					port?: number | string;
+					domain?: string;
+			  }
+			| {
+					backend: "webdav";
+					path: string;
+					server: string;
+					port?: number | string;
+					password?: string;
+					ssl?: boolean;
+					username?: string;
 			  };
 		name: string;
 	};
@@ -95,6 +127,22 @@ export type TestConnectionData = {
 			  }
 			| {
 					backend: "smb";
+					password: string;
+					server: string;
+					share: string;
+					username: string;
+					vers?: "1.0" | "2.0" | "2.1" | "3.0";
+					port?: number | string;
+					domain?: string;
+			  }
+			| {
+					backend: "webdav";
+					path: string;
+					server: string;
+					port?: number | string;
+					password?: string;
+					ssl?: boolean;
+					username?: string;
 			  };
 	};
 	path?: never;
@@ -175,6 +223,22 @@ export type GetVolumeResponses = {
 				  }
 				| {
 						backend: "smb";
+						password: string;
+						server: string;
+						share: string;
+						username: string;
+						vers?: "1.0" | "2.0" | "2.1" | "3.0";
+						port?: number | string;
+						domain?: string;
+				  }
+				| {
+						backend: "webdav";
+						path: string;
+						server: string;
+						port?: number | string;
+						password?: string;
+						ssl?: boolean;
+						username?: string;
 				  };
 			createdAt: number;
 			lastError: string;
@@ -182,7 +246,7 @@ export type GetVolumeResponses = {
 			name: string;
 			path: string;
 			status: "error" | "mounted" | "unknown" | "unmounted";
-			type: "directory" | "nfs" | "smb";
+			type: "directory" | "nfs" | "smb" | "webdav";
 			updatedAt: number;
 		};
 	};
@@ -205,6 +269,22 @@ export type UpdateVolumeData = {
 			  }
 			| {
 					backend: "smb";
+					password: string;
+					server: string;
+					share: string;
+					username: string;
+					vers?: "1.0" | "2.0" | "2.1" | "3.0";
+					port?: number | string;
+					domain?: string;
+			  }
+			| {
+					backend: "webdav";
+					path: string;
+					server: string;
+					port?: number | string;
+					password?: string;
+					ssl?: boolean;
+					username?: string;
 			  };
 	};
 	path: {
@@ -241,6 +321,22 @@ export type UpdateVolumeResponses = {
 				  }
 				| {
 						backend: "smb";
+						password: string;
+						server: string;
+						share: string;
+						username: string;
+						vers?: "1.0" | "2.0" | "2.1" | "3.0";
+						port?: number | string;
+						domain?: string;
+				  }
+				| {
+						backend: "webdav";
+						path: string;
+						server: string;
+						port?: number | string;
+						password?: string;
+						ssl?: boolean;
+						username?: string;
 				  };
 			createdAt: number;
 			name: string;

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

@@ -62,7 +62,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 	const handleTestConnection = async () => {
 		const formValues = getValues();
 
-		if (formValues.backend === "nfs" || formValues.backend === "smb") {
+		if (formValues.backend === "nfs" || formValues.backend === "smb" || formValues.backend === "webdav") {
 			testBackendConnection.mutate({
 				body: { config: formValues },
 			});
@@ -108,6 +108,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 									<SelectItem value="directory">Directory</SelectItem>
 									<SelectItem value="nfs">NFS</SelectItem>
 									<SelectItem value="smb">SMB</SelectItem>
+									<SelectItem value="webdav">WebDAV</SelectItem>
 								</SelectContent>
 							</Select>
 							<FormDescription>Choose the storage backend for this volume.</FormDescription>
@@ -187,6 +188,102 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 					</>
 				)}
 
+				{watchedBackend === "webdav" && (
+					<>
+						<FormField
+							name="server"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Server</FormLabel>
+									<FormControl>
+										<Input placeholder="example.com" value={field.value ?? ""} onChange={field.onChange} />
+									</FormControl>
+									<FormDescription>WebDAV server hostname or IP address.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							name="path"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Path</FormLabel>
+									<FormControl>
+										<Input placeholder="/webdav" value={field.value ?? ""} onChange={field.onChange} />
+									</FormControl>
+									<FormDescription>Path to the WebDAV directory on the server.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							name="username"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Username (Optional)</FormLabel>
+									<FormControl>
+										<Input placeholder="admin" value={field.value ?? ""} onChange={field.onChange} />
+									</FormControl>
+									<FormDescription>Username for WebDAV authentication (optional).</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							name="password"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Password (Optional)</FormLabel>
+									<FormControl>
+										<Input type="password" placeholder="••••••••" value={field.value ?? ""} onChange={field.onChange} />
+									</FormControl>
+									<FormDescription>Password for WebDAV authentication (optional).</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							name="port"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Port</FormLabel>
+									<FormControl>
+										<Input
+											type="number"
+											placeholder="80"
+											value={field.value ?? ""}
+											onChange={(e) => field.onChange(parseInt(e.target.value, 10) || undefined)}
+										/>
+									</FormControl>
+									<FormDescription>WebDAV server port (default: 80 for HTTP, 443 for HTTPS).</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							name="ssl"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Use SSL/HTTPS</FormLabel>
+									<FormControl>
+										<div className="flex items-center space-x-2">
+											<input
+												type="checkbox"
+												checked={field.value ?? false}
+												onChange={(e) => field.onChange(e.target.checked)}
+												className="rounded border-gray-300"
+											/>
+											<span className="text-sm">Enable HTTPS for secure connections</span>
+										</div>
+									</FormControl>
+									<FormDescription>Use HTTPS instead of HTTP for secure connections.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</>
+				)}
+
 				{watchedBackend === "smb" && (
 					<>
 						<FormField
@@ -373,6 +470,41 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 						)}
 					</div>
 				)}
+
+				{watchedBackend === "webdav" && (
+					<div className="space-y-3">
+						<div className="flex items-center gap-2">
+							<Button
+								type="button"
+								variant="outline"
+								onClick={handleTestConnection}
+								disabled={testStatus === "loading" || !form.watch("server") || !form.watch("path")}
+								className="flex-1"
+							>
+								{testStatus === "loading" && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+								{testStatus === "success" && <CheckCircle className="mr-2 h-4 w-4 text-green-500" />}
+								{testStatus === "error" && <XCircle className="mr-2 h-4 w-4 text-red-500" />}
+								{testStatus === "idle" && "Test Connection"}
+								{testStatus === "loading" && "Testing..."}
+								{testStatus === "success" && "Connection Successful"}
+								{testStatus === "error" && "Test Failed"}
+							</Button>
+						</div>
+						{testMessage && (
+							<div
+								className={`text-sm p-2 rounded-md ${
+									testStatus === "success"
+										? "bg-green-50 text-green-700 border border-green-200"
+										: testStatus === "error"
+											? "bg-red-50 text-red-700 border border-red-200"
+											: "bg-gray-50 text-gray-700 border border-gray-200"
+								}`}
+							>
+								{testMessage}
+							</div>
+						)}
+					</div>
+				)}
 			</form>
 		</Form>
 	);

apps/client/app/components/volume-icon.tsx

@@ -1,5 +1,5 @@
 import type { BackendType } from "@ironmount/schemas";
-import { Folder, Server, Share2 } from "lucide-react";
+import { Cloud, Folder, Server, Share2 } from "lucide-react";
 
 type VolumeIconProps = {
 	backend: BackendType;
@@ -26,6 +26,12 @@ const getIconAndColor = (backend: BackendType) => {
 				color: "text-purple-600 dark:text-purple-400",
 				label: "SMB",
 			};
+		case "webdav":
+			return {
+				icon: Cloud,
+				color: "text-green-600 dark:text-green-400",
+				label: "WebDAV",
+			};
 		default:
 			return {
 				icon: Folder,

apps/client/app/modules/details/components/storage-chart.tsx

@@ -18,7 +18,7 @@ export function StorageChart({ statfs }: Props) {
 			{
 				name: "Used",
 				value: statfs.used,
-				fill: "blue",
+				fill: "#2B7EFF",
 			},
 			{
 				name: "Free",
@@ -29,19 +29,7 @@ export function StorageChart({ statfs }: Props) {
 		[statfs],
 	);
 
-	const chartConfig = {
-		value: {
-			label: "Storage",
-		},
-		used: {
-			label: "Used",
-			color: "hsl(var(--destructive))",
-		},
-		free: {
-			label: "Free",
-			color: "hsl(var(--primary))",
-		},
-	} satisfies ChartConfig;
+	const chartConfig = {} satisfies ChartConfig;
 
 	const usagePercentage = React.useMemo(() => {
 		return Math.round((statfs.used / statfs.total) * 100);
@@ -75,37 +63,70 @@ export function StorageChart({ statfs }: Props) {
 				</CardTitle>
 			</CardHeader>
 			<CardContent className="flex-1 pb-0">
-				<ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[250px]">
-					<PieChart>
-						<ChartTooltip
-							cursor={false}
-							content={
-								<ChartTooltipContent
-									hideLabel
-									formatter={(value, name) => [<ByteSize key={name} bytes={value as number} />, name]}
-								/>
-							}
-						/>
-						<Pie data={chartData} dataKey="value" nameKey="name" innerRadius={60} strokeWidth={5}>
-							<Label
-								content={({ viewBox }) => {
-									if (viewBox && "cx" in viewBox && "cy" in viewBox) {
-										return (
-											<text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
-												<tspan x={viewBox.cx} y={viewBox.cy} className="fill-foreground text-3xl font-bold">
-													{usagePercentage}%
-												</tspan>
-												<tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-muted-foreground">
-													Used
-												</tspan>
-											</text>
-										);
-									}
-								}}
+				<div className="">
+					<ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[250px]">
+						<PieChart>
+							<ChartTooltip
+								cursor={false}
+								content={
+									<ChartTooltipContent
+										hideLabel
+										formatter={(value, name) => [<ByteSize key={name} bytes={value as number} />, name]}
+									/>
+								}
 							/>
-						</Pie>
-					</PieChart>
-				</ChartContainer>
+							<Pie data={chartData} dataKey="value" nameKey="name" innerRadius={60} strokeWidth={5}>
+								<Label
+									content={({ viewBox }) => {
+										if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+											return (
+												<text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
+													<tspan x={viewBox.cx} y={viewBox.cy} className="fill-foreground text-3xl font-bold">
+														{usagePercentage}%
+													</tspan>
+													<tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-muted-foreground">
+														Used
+													</tspan>
+												</text>
+											);
+										}
+									}}
+								/>
+							</Pie>
+						</PieChart>
+					</ChartContainer>
+					<div className="flex flex-col h-full justify-center">
+						<div className="grid gap-4 w-full">
+							<div className="flex items-center justify-between p-3 rounded-lg bg-muted/50">
+								<div className="flex items-center gap-3">
+									<HardDrive className="h-4 w-4 text-muted-foreground" />
+									<span className="font-medium">Total Capacity</span>
+								</div>
+								<ByteSize bytes={statfs.total} className="font-mono text-sm" />
+							</div>
+
+							<div className="flex items-center justify-between p-3 rounded-lg bg-blue-500/10">
+								<div className="flex items-center gap-3">
+									<div className="h-4 w-4 rounded-full bg-blue-500" />
+									<span className="font-medium">Used Space</span>
+								</div>
+								<div className="text-right">
+									<ByteSize bytes={statfs.used} className="font-mono text-sm" />
+								</div>
+							</div>
+
+							<div className="flex items-center justify-between p-3 rounded-lg bg-primary/10">
+								<div className="flex items-center gap-3">
+									<div className="h-4 w-4 rounded-full bg-primary" />
+									<span className="font-medium">Free Space</span>
+								</div>
+								<div className="text-right">
+									<ByteSize bytes={statfs.free} className="font-mono text-sm" />
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
 			</CardContent>
 		</Card>
 	);

apps/client/app/modules/details/components/storage-info-card.tsx

@@ -1,73 +0,0 @@
-import { Database, HardDrive, Unplug } from "lucide-react";
-import { ByteSize } from "~/components/bytes-size";
-import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
-import type { StatFs } from "~/lib/types";
-
-type Props = {
-	statfs: StatFs;
-};
-
-export function StorageInfoCard({ statfs }: Props) {
-	const isEmpty = !statfs.total;
-
-	if (isEmpty) {
-		return (
-			<Card className="flex flex-col h-full text-sm">
-				<CardHeader className="items-center pb-0">
-					<CardTitle className="flex items-center gap-2">
-						<Database className="h-4 w-4" />
-						Storage Usage
-					</CardTitle>
-				</CardHeader>
-				<CardContent className="flex-1 pb-10 flex flex-col items-center justify-center text-center">
-					<Unplug className="mb-4 h-5 w-5 text-muted-foreground" />
-					<p className="text-muted-foreground">No storage data available. Mount the volume to see usage statistics.</p>
-				</CardContent>
-			</Card>
-		);
-	}
-
-	return (
-		<Card className="h-full text-sm">
-			<CardHeader>
-				<CardTitle className="flex items-center gap-2">
-					<Database className="h-4 w-4" />
-					Storage Details
-				</CardTitle>
-			</CardHeader>
-			<CardContent className="space-y-4">
-				<div className="flex flex-col h-full justify-center">
-					<div className="grid gap-4 w-full">
-						<div className="flex items-center justify-between p-3 rounded-lg bg-muted/50">
-							<div className="flex items-center gap-3">
-								<HardDrive className="h-4 w-4 text-muted-foreground" />
-								<span className="font-medium">Total Capacity</span>
-							</div>
-							<ByteSize bytes={statfs.total} className="font-mono text-sm" />
-						</div>
-
-						<div className="flex items-center justify-between p-3 rounded-lg bg-blue-500/10">
-							<div className="flex items-center gap-3">
-								<div className="h-4 w-4 rounded-full bg-blue-500" />
-								<span className="font-medium">Used Space</span>
-							</div>
-							<div className="text-right">
-								<ByteSize bytes={statfs.used} className="font-mono text-sm" />
-							</div>
-						</div>
-
-						<div className="flex items-center justify-between p-3 rounded-lg bg-primary/10">
-							<div className="flex items-center gap-3">
-								<div className="h-4 w-4 rounded-full bg-primary" />
-								<span className="font-medium">Free Space</span>
-							</div>
-							<div className="text-right">
-								<ByteSize bytes={statfs.free} className="font-mono text-sm" />
-							</div>
-						</div>
-					</div>
-				</div>
-			</CardContent>
-		</Card>
-	);
-}

apps/client/app/modules/details/tabs/info.tsx

@@ -3,7 +3,6 @@ import { Card } from "~/components/ui/card";
 import type { StatFs, Volume } from "~/lib/types";
 import { HealthchecksCard } from "../components/healthchecks-card";
 import { StorageChart } from "../components/storage-chart";
-import { StorageInfoCard } from "../components/storage-info-card";
 
 type Props = {
 	volume: Volume;
@@ -19,12 +18,9 @@ export const VolumeInfoTabContent = ({ volume, statfs }: Props) => {
 			<div className="lg:col-span-2 lg:row-span-1">
 				<HealthchecksCard volume={volume} />
 			</div>
-			<div className="lg:col-span-1">
+			<div className="lg:col-span-2">
 				<StorageChart statfs={statfs} />
 			</div>
-			<div className="lg:col-span-1">
-				<StorageInfoCard statfs={statfs} />
-			</div>
 		</div>
 	);
 };

apps/client/package.json

@@ -6,7 +6,7 @@
 		"build": "react-router build",
 		"dev": "react-router dev",
 		"start": "react-router-serve ./build/server/index.js",
-		"typecheck": "react-router typegen && tsc"
+		"tsc": "react-router typegen && tsc"
 	},
 	"dependencies": {
 		"@hookform/resolvers": "^5.2.1",
@@ -52,6 +52,7 @@
 		"tw-animate-css": "^1.3.6",
 		"typescript": "^5.8.3",
 		"vite": "^6.3.3",
+		"vite-bundle-analyzer": "^1.2.3",
 		"vite-tsconfig-paths": "^5.1.4"
 	}
 }

apps/client/vite.config.ts

@@ -2,9 +2,10 @@ import { reactRouter } from "@react-router/dev/vite";
 import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
+import { analyzer } from "vite-bundle-analyzer";
 
 export default defineConfig({
-	plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
+	plugins: [tailwindcss(), reactRouter(), tsconfigPaths(), analyzer()],
 	server: {
 		host: true,
 		port: 3000,

apps/server/src/modules/backends/backend.ts

@@ -4,6 +4,7 @@ import type { Volume } from "../../db/schema";
 import { makeDirectoryBackend } from "./directory/directory-backend";
 import { makeNfsBackend } from "./nfs/nfs-backend";
 import { makeSmbBackend } from "./smb/smb-backend";
+import { makeWebdavBackend } from "./webdav/webdav-backend";
 
 type OperationResult = {
 	error?: string;
@@ -29,5 +30,8 @@ export const createVolumeBackend = (volume: Volume): VolumeBackend => {
 		case "directory": {
 			return makeDirectoryBackend(volume.config, path);
 		}
+		case "webdav": {
+			return makeWebdavBackend(volume.config, path);
+		}
 	}
 };

apps/server/src/modules/backends/webdav/webdav-backend.ts

@@ -0,0 +1,171 @@
+import { execFile as execFileCb } from "node:child_process";
+import * as fs from "node:fs/promises";
+import * as os from "node:os";
+import { promisify } from "node:util";
+import { BACKEND_STATUS, type BackendConfig } from "@ironmount/schemas";
+import { OPERATION_TIMEOUT } from "../../../core/constants";
+import { toMessage } from "../../../utils/errors";
+import { logger } from "../../../utils/logger";
+import { getMountForPath } from "../../../utils/mountinfo";
+import { withTimeout } from "../../../utils/timeout";
+import type { VolumeBackend } from "../backend";
+import { createTestFile, executeMount, executeUnmount } from "../utils/backend-utils";
+
+const execFile = promisify(execFileCb);
+
+const mount = async (config: BackendConfig, path: string) => {
+	logger.debug(`Mounting WebDAV volume ${path}...`);
+
+	if (config.backend !== "webdav") {
+		logger.error("Provided config is not for WebDAV backend");
+		return { status: BACKEND_STATUS.error, error: "Provided config is not for WebDAV backend" };
+	}
+
+	if (os.platform() !== "linux") {
+		logger.error("WebDAV mounting is only supported on Linux hosts.");
+		return { status: BACKEND_STATUS.error, error: "WebDAV mounting is only supported on Linux hosts." };
+	}
+
+	const { status } = await checkHealth(path);
+	if (status === "mounted") {
+		return { status: BACKEND_STATUS.mounted };
+	}
+
+	logger.debug(`Trying to unmount any existing mounts at ${path} before mounting...`);
+	await unmount(path);
+
+	const run = async () => {
+		await fs.mkdir(path, { recursive: true }).catch((err) => {
+			logger.warn(`Failed to create directory ${path}: ${err.message}`);
+		});
+
+		const protocol = config.ssl ? "https" : "http";
+		const defaultPort = config.ssl ? 443 : 80;
+		const port = config.port !== defaultPort ? `:${config.port}` : "";
+		const source = `${protocol}://${config.server}${port}${config.path}`;
+
+		const options = ["uid=1000", "gid=1000", "file_mode=0664", "dir_mode=0775"];
+
+		if (config.username && config.password) {
+			const secretsFile = "/etc/davfs2/secrets";
+			const secretsContent = `${source} ${config.username} ${config.password}\n`;
+			await fs.appendFile(secretsFile, secretsContent, { mode: 0o600 });
+		}
+
+		logger.debug(`Mounting WebDAV volume ${path}...`);
+
+		const args = ["-t", "davfs", source, path];
+		await executeMount(args);
+
+		const { stderr } = await execFile("mount", ["-t", "davfs", "-o", options.join(","), source, path], {
+			timeout: OPERATION_TIMEOUT,
+			maxBuffer: 1024 * 1024,
+		});
+
+		if (stderr?.trim()) {
+			logger.warn(stderr.trim());
+		}
+
+		logger.info(`WebDAV volume at ${path} mounted successfully.`);
+		return { status: BACKEND_STATUS.mounted };
+	};
+
+	try {
+		return await withTimeout(run(), OPERATION_TIMEOUT, "WebDAV mount");
+	} catch (error) {
+		const errorMsg = toMessage(error);
+
+		if (errorMsg.includes("already mounted")) {
+			return { status: BACKEND_STATUS.mounted };
+		}
+
+		logger.error("Error mounting WebDAV volume", { error: errorMsg });
+		if (errorMsg.includes("No such device")) {
+			return {
+				status: BACKEND_STATUS.error,
+				error:
+					"WebDAV filesystem not supported. Please ensure davfs2 is properly installed and the kernel module is loaded.",
+			};
+		} else if (errorMsg.includes("option") && errorMsg.includes("requires argument")) {
+			return {
+				status: BACKEND_STATUS.error,
+				error: "Invalid mount options. Please check your WebDAV server configuration.",
+			};
+		} else if (errorMsg.includes("connection refused") || errorMsg.includes("Connection refused")) {
+			return {
+				status: BACKEND_STATUS.error,
+				error: "Cannot connect to WebDAV server. Please check the server address and port.",
+			};
+		} else if (errorMsg.includes("unauthorized") || errorMsg.includes("Unauthorized")) {
+			return {
+				status: BACKEND_STATUS.error,
+				error: "Authentication failed. Please check your username and password.",
+			};
+		}
+
+		return { status: BACKEND_STATUS.error, error: errorMsg };
+	}
+};
+
+const unmount = async (path: string) => {
+	if (os.platform() !== "linux") {
+		logger.error("WebDAV unmounting is only supported on Linux hosts.");
+		return { status: BACKEND_STATUS.error, error: "WebDAV unmounting is only supported on Linux hosts." };
+	}
+
+	const run = async () => {
+		try {
+			await fs.access(path);
+		} catch (e) {
+			logger.warn(`Path ${path} does not exist. Skipping unmount.`, e);
+			return { status: BACKEND_STATUS.unmounted };
+		}
+
+		await executeUnmount(path);
+
+		await fs.rmdir(path);
+
+		logger.info(`WebDAV volume at ${path} unmounted successfully.`);
+		return { status: BACKEND_STATUS.unmounted };
+	};
+
+	try {
+		return await withTimeout(run(), OPERATION_TIMEOUT, "WebDAV unmount");
+	} catch (error) {
+		logger.error("Error unmounting WebDAV volume", { path, error: toMessage(error) });
+		return { status: BACKEND_STATUS.error, error: toMessage(error) };
+	}
+};
+
+const checkHealth = async (path: string) => {
+	const run = async () => {
+		logger.debug(`Checking health of WebDAV volume at ${path}...`);
+		await fs.access(path);
+
+		const mount = await getMountForPath(path);
+
+		console.log(mount);
+
+		if (!mount || mount.fstype !== "fuse") {
+			throw new Error(`Path ${path} is not mounted as WebDAV.`);
+		}
+
+		await createTestFile(path);
+
+		logger.debug(`WebDAV volume at ${path} is healthy and mounted.`);
+		return { status: BACKEND_STATUS.mounted };
+	};
+
+	try {
+		return await withTimeout(run(), OPERATION_TIMEOUT, "WebDAV health check");
+	} catch (error) {
+		logger.error("WebDAV volume health check failed:", toMessage(error));
+		return { status: BACKEND_STATUS.error, error: toMessage(error) };
+	}
+};
+
+export const makeWebdavBackend = (config: BackendConfig, path: string): VolumeBackend => ({
+	mount: () => mount(config, path),
+	unmount: () => unmount(path),
+	checkHealth: () => checkHealth(path),
+});

apps/server/src/modules/volumes/volume.controller.ts

@@ -55,13 +55,17 @@ export const volumeController = new Hono()
 		const res = await volumeService.getVolume(name);
 
 		const response = {
-			...res,
 			volume: {
 				...res.volume,
 				createdAt: res.volume.createdAt.getTime(),
 				updatedAt: res.volume.updatedAt.getTime(),
 				lastHealthCheck: res.volume.lastHealthCheck.getTime(),
 			},
+			statfs: {
+				total: res.statfs.total ?? 0,
+				used: res.statfs.used ?? 0,
+				free: res.statfs.free ?? 0,
+			},
 		} satisfies GetVolumeResponseDto;
 
 		return c.json(response, 200);

apps/server/src/modules/volumes/volume.dto.ts

@@ -6,7 +6,7 @@ import { resolver } from "hono-openapi/arktype";
 const volumeSchema = type({
 	name: "string",
 	path: "string",
-	type: type.enumerated("nfs", "smb", "directory"),
+	type: type.enumerated("nfs", "smb", "directory", "webdav"),
 	status: type.enumerated("mounted", "unmounted", "error", "unknown"),
 	lastError: "string | null",
 	createdAt: "number",
@@ -100,13 +100,15 @@ export const deleteVolumeDto = describeRoute({
 	},
 });
 
+const statfsSchema = type({
+	total: "number",
+	used: "number",
+	free: "number",
+});
+
 const getVolumeResponse = type({
 	volume: volumeSchema,
-	statfs: type({
-		total: "number = 0",
-		used: "number = 0",
-		free: "number = 0",
-	}),
+	statfs: statfsSchema,
 });
 
 export type GetVolumeResponseDto = typeof getVolumeResponse.infer;

apps/server/src/modules/volumes/volume.service.ts

@@ -12,6 +12,7 @@ import { createVolumeBackend } from "../backends/backend";
 import { toMessage } from "../../utils/errors";
 import { getStatFs, type StatFs } from "../../utils/mountinfo";
 import { VOLUME_MOUNT_BASE } from "../../core/constants";
+import { logger } from "../../utils/logger";
 
 const listVolumes = async () => {
 	const volumes = await db.query.volumesTable.findMany({});
@@ -73,7 +74,7 @@ const mountVolume = async (name: string) => {
 
 	await db
 		.update(volumesTable)
-		.set({ status, lastError: error, lastHealthCheck: new Date() })
+		.set({ status, lastError: error ?? null, lastHealthCheck: new Date() })
 		.where(eq(volumesTable.name, name));
 
 	return { error, status };

bun.lock

@@ -23,6 +23,7 @@
         "@radix-ui/react-tooltip": "^1.2.8",
         "@react-router/node": "^7.7.1",
         "@react-router/serve": "^7.7.1",
+        "@speed-highlight/core": "^1.2.7",
         "@tanstack/react-query": "^5.84.2",
         "@tanstack/react-query-devtools": "^5.85.9",
         "@tanstack/react-table": "^8.21.3",
@@ -54,6 +55,7 @@
         "tw-animate-css": "^1.3.6",
         "typescript": "^5.8.3",
         "vite": "^6.3.3",
+        "vite-bundle-analyzer": "^1.2.3",
         "vite-tsconfig-paths": "^5.1.4",
       },
     },
@@ -387,6 +389,8 @@
 
     "@scalar/types": ["@scalar/types@0.2.11", "", { "dependencies": { "@scalar/openapi-types": "0.3.7", "nanoid": "5.1.5", "zod": "3.24.1" } }, "sha512-SUZzGmoisWsYv33LmmT/ajvSlcl9ZDj9d5RncJ+wB9ZQ2l018xlfpDIH9Kdfo+6KCKQOe3LYLXfH4Lzm891Mag=="],
 
+    "@speed-highlight/core": ["@speed-highlight/core@1.2.7", "", {}, "sha512-0dxmVj4gxg3Jg879kvFS/msl4s9F3T9UXC1InxgOf7t5NvcPD97u/WTA5vL/IxWHMn7qSxBozqrnnE2wvl1m8g=="],
+
     "@standard-schema/utils": ["@standard-schema/utils@0.3.0", "", {}, "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="],
 
     "@tailwindcss/node": ["@tailwindcss/node@4.1.12", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "enhanced-resolve": "^5.18.3", "jiti": "^2.5.1", "lightningcss": "1.30.1", "magic-string": "^0.30.17", "source-map-js": "^1.2.1", "tailwindcss": "4.1.12" } }, "sha512-3hm9brwvQkZFe++SBt+oLjo4OLDtkvlE8q2WalaD/7QWaeM7KEJbAiY/LJZUaCs7Xa8aUu4xy3uoyX4q54UVdQ=="],
@@ -1105,6 +1109,8 @@
 
     "vite": ["vite@6.3.5", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", "picomatch": "^4.0.2", "postcss": "^8.5.3", "rollup": "^4.34.9", "tinyglobby": "^0.2.13" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ=="],
 
+    "vite-bundle-analyzer": ["vite-bundle-analyzer@1.2.3", "", { "bin": { "analyze": "dist/bin.js" } }, "sha512-8nhwDGHWMKKgg6oegAOpDgTT7/yzTVzeYzLF4y8WBJoYu9gO7h29UpHiQnXD2rAvfQzDy5Wqe/Za5cgqhnxi5g=="],
+
     "vite-node": ["vite-node@3.2.4", "", { "dependencies": { "cac": "^6.7.14", "debug": "^4.4.1", "es-module-lexer": "^1.7.0", "pathe": "^2.0.3", "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0" }, "bin": { "vite-node": "vite-node.mjs" } }, "sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg=="],
 
     "vite-tsconfig-paths": ["vite-tsconfig-paths@5.1.4", "", { "dependencies": { "debug": "^4.1.1", "globrex": "^0.1.2", "tsconfck": "^3.0.3" }, "peerDependencies": { "vite": "*" }, "optionalPeers": ["vite"] }, "sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w=="],

docker-compose.yml

@@ -9,14 +9,13 @@ services:
       - SYS_ADMIN
     ports:
       - "3000:3000"
-    # privileged: true
     env_file:
       - path: .env
         required: false
-    # security_opt:
-    #   - apparmor:unconfined
+    devices:
+      - /dev/fuse:/dev/fuse
     volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
+      # - /var/run/docker.sock:/var/run/docker.sock
       - /run/docker/plugins:/run/docker/plugins
 
       - ./apps/client/app:/app/apps/client/app

packages/schemas/src/index.ts

@@ -4,6 +4,7 @@ export const BACKEND_TYPES = {
 	nfs: "nfs",
 	smb: "smb",
 	directory: "directory",
+	webdav: "webdav",
 } as const;
 
 export type BackendType = keyof typeof BACKEND_TYPES;
@@ -31,7 +32,17 @@ export const directoryConfigSchema = type({
 	backend: "'directory'",
 });
 
-export const volumeConfigSchema = nfsConfigSchema.or(smbConfigSchema).or(directoryConfigSchema);
+export const webdavConfigSchema = type({
+	backend: "'webdav'",
+	server: "string",
+	path: "string",
+	username: "string?",
+	password: "string?",
+	port: type("string.integer.parse").or(type("number")).to("1 <= number <= 65536").default("80"),
+	ssl: "boolean?",
+});
+
+export const volumeConfigSchema = nfsConfigSchema.or(smbConfigSchema).or(directoryConfigSchema).or(webdavConfigSchema);
 
 export type BackendConfig = typeof volumeConfigSchema.infer;