Merge branch 'canary' into feat/domain-enable-disable

apps/dokploy/components/dashboard/application/advanced/import/show-import.tsx

@@ -185,7 +185,7 @@ export const ShowImport = ({ composeId }: Props) => {
 								</Button>
 							</div>
 							<Dialog open={showModal} onOpenChange={setShowModal}>
-								<DialogContent className="max-w-[50vw]">
+								<DialogContent className="sm:max-w-3xl max-h-[85vh] flex flex-col">
 									<DialogHeader>
 										<DialogTitle className="text-2xl font-bold">
 											Template Information
@@ -199,7 +199,7 @@ export const ShowImport = ({ composeId }: Props) => {
 										</DialogDescription>
 									</DialogHeader>
 
-									<div className="flex flex-col gap-6">
+									<div className="flex flex-col gap-6 flex-1 min-h-0 overflow-y-auto pr-1">
 										<div className="space-y-4">
 											<div className="flex items-center gap-2">
 												<Code2 className="h-5 w-5 text-primary" />
@@ -207,12 +207,14 @@ export const ShowImport = ({ composeId }: Props) => {
 													Docker Compose
 												</h3>
 											</div>
-											<CodeEditor
-												language="yaml"
-												value={templateInfo?.compose || ""}
-												className="font-mono"
-												readOnly
-											/>
+											<div className="max-h-[45vh] overflow-auto rounded-md border">
+												<CodeEditor
+													language="yaml"
+													value={templateInfo?.compose || ""}
+													className="font-mono"
+													readOnly
+												/>
+											</div>
 										</div>
 
 										<Separator />

apps/dokploy/components/dashboard/application/build/show.tsx

@@ -88,6 +88,7 @@ const mySchema = z.discriminatedUnion("buildType", [
 	z.object({
 		buildType: z.literal(BuildType.nixpacks),
 		publishDirectory: z.string().optional(),
+		isStaticSpa: z.boolean().default(false),
 	}),
 	z.object({
 		buildType: z.literal(BuildType.railpack),
@@ -138,6 +139,7 @@ const resetData = (data: ApplicationData): AddTemplate => {
 			return {
 				buildType: BuildType.nixpacks,
 				publishDirectory: data.publishDirectory || undefined,
+				isStaticSpa: data.isStaticSpa ?? false,
 			};
 		case BuildType.paketo_buildpacks:
 			return {
@@ -179,6 +181,7 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 
 	const buildType = form.watch("buildType");
 	const railpackVersion = form.watch("railpackVersion");
+	const publishDirectory = form.watch("publishDirectory");
 	const [isManualRailpackVersion, setIsManualRailpackVersion] = useState(false);
 
 	useEffect(() => {
@@ -224,7 +227,10 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 					? data.herokuVersion
 					: null,
 			isStaticSpa:
-				data.buildType === BuildType.static ? data.isStaticSpa : null,
+				data.buildType === BuildType.static ||
+				data.buildType === BuildType.nixpacks
+					? data.isStaticSpa
+					: null,
 			railpackVersion:
 				data.buildType === BuildType.railpack
 					? data.railpackVersion || "0.15.4"
@@ -419,6 +425,30 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 								)}
 							/>
 						)}
+						{buildType === BuildType.nixpacks && publishDirectory && (
+							<FormField
+								control={form.control}
+								name="isStaticSpa"
+								render={({ field }) => (
+									<FormItem>
+										<FormControl>
+											<div className="flex items-center gap-x-2 p-2">
+												<Checkbox
+													id="checkboxIsStaticSpaNixpacks"
+													value={String(field.value)}
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+												<FormLabel htmlFor="checkboxIsStaticSpaNixpacks">
+													Single Page Application (SPA)
+												</FormLabel>
+											</div>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						)}
 						{buildType === BuildType.static && (
 							<FormField
 								control={form.control}

apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx

@@ -63,6 +63,9 @@ export const ShowDeployments = ({
 	const [activeLog, setActiveLog] = useState<
 		RouterOutputs["deployment"]["all"][number] | null
 	>(null);
+	const [removingDeploymentIds, setRemovingDeploymentIds] = useState<
+		Set<string>
+	>(new Set());
 	const { data: deployments, isPending: isLoadingDeployments } =
 		api.deployment.allByType.useQuery(
 			{
@@ -81,7 +84,7 @@ export const ShowDeployments = ({
 		api.rollback.rollback.useMutation();
 	const { mutateAsync: killProcess, isPending: isKillingProcess } =
 		api.deployment.killProcess.useMutation();
-	const { mutateAsync: removeDeployment, isPending: isRemovingDeployment } =
+	const { mutateAsync: removeDeployment } =
 		api.deployment.removeDeployment.useMutation();
 
 	// Cancel deployment mutations
@@ -408,6 +411,11 @@ export const ShowDeployments = ({
 													description="Are you sure you want to delete this deployment? This action cannot be undone."
 													type="default"
 													onClick={async () => {
+														setRemovingDeploymentIds((deploymentIds) => {
+															const nextDeploymentIds = new Set(deploymentIds);
+															nextDeploymentIds.add(deployment.deploymentId);
+															return nextDeploymentIds;
+														});
 														try {
 															await removeDeployment({
 																deploymentId: deployment.deploymentId,
@@ -415,13 +423,25 @@ export const ShowDeployments = ({
 															toast.success("Deployment deleted successfully");
 														} catch (error) {
 															toast.error("Error deleting deployment");
+														} finally {
+															setRemovingDeploymentIds((deploymentIds) => {
+																const nextDeploymentIds = new Set(
+																	deploymentIds,
+																);
+																nextDeploymentIds.delete(
+																	deployment.deploymentId,
+																);
+																return nextDeploymentIds;
+															});
 														}
 													}}
 												>
 													<Button
 														variant="destructive"
 														size="sm"
-														isLoading={isRemovingDeployment}
+														isLoading={removingDeploymentIds.has(
+															deployment.deploymentId,
+														)}
 													>
 														Delete
 														<Trash2 className="size-4" />

apps/dokploy/components/dashboard/application/domains/columns.tsx

@@ -214,7 +214,9 @@ export const createColumns = ({
 									</Badge>
 								</TooltipTrigger>
 								<TooltipContent className="max-w-xs">
-									{validationState?.error ? (
+									{validationState?.isValid && validationState?.message ? (
+										<p>{validationState.message}</p>
+									) : validationState?.error ? (
 										<div className="flex flex-col gap-1">
 											<p className="font-medium text-red-500">Error:</p>
 											<p>{validationState.error}</p>

apps/dokploy/components/dashboard/application/domains/show-domains.tsx

@@ -676,7 +676,10 @@ export const ShowDomains = ({ id, type }: Props) => {
 																</Badge>
 															</TooltipTrigger>
 															<TooltipContent className="max-w-xs">
-																{validationState?.error ? (
+																{validationState?.isValid &&
+																validationState?.message ? (
+																	<p>{validationState.message}</p>
+																) : validationState?.error ? (
 																	<div className="flex flex-col gap-1">
 																		<p className="font-medium text-red-500">
 																			Error:

apps/dokploy/components/dashboard/application/environment/show-environment.tsx

@@ -5,6 +5,7 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 import { CodeEditor } from "@/components/shared/code-editor";
+import { useEnvCompletionSource } from "@/components/shared/env-autocomplete";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -16,16 +17,20 @@ import {
 import {
 	Form,
 	FormControl,
+	FormDescription,
 	FormField,
 	FormItem,
+	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
+import { Switch } from "@/components/ui/switch";
 import { Toggle } from "@/components/ui/toggle";
 import { api } from "@/utils/api";
 import type { ServiceType } from "../advanced/show-resources";
 
 const addEnvironmentSchema = z.object({
 	environment: z.string(),
+	createEnvFile: z.boolean(),
 });
 
 type EnvironmentSchema = z.infer<typeof addEnvironmentSchema>;
@@ -54,6 +59,12 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 		? queryMap[type]()
 		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
 	const [isEnvVisible, setIsEnvVisible] = useState(true);
+	const completionSource = useEnvCompletionSource({
+		projectEnv: data?.environment?.project?.env,
+		environmentEnv: data?.environment?.env,
+		projectId: data?.environment?.projectId,
+		environmentId: data?.environment?.environmentId,
+	});
 
 	const mutationMap = {
 		compose: () => api.compose.saveEnvironment.useMutation(),
@@ -71,18 +82,32 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 	const form = useForm<EnvironmentSchema>({
 		defaultValues: {
 			environment: "",
+			createEnvFile: true,
 		},
 		resolver: zodResolver(addEnvironmentSchema),
 	});
 
 	// Watch form value
 	const currentEnvironment = form.watch("environment");
-	const hasChanges = currentEnvironment !== (data?.env || "");
+	const currentCreateEnvFile = form.watch("createEnvFile");
+	const composeData =
+		type === "compose"
+			? (data as { createEnvFile?: boolean; sourceType?: string } | undefined)
+			: undefined;
+
+	const showCreateEnvFileToggle =
+		type === "compose" &&
+		(composeData?.sourceType !== "raw" || composeData?.createEnvFile === false);
+	const hasChanges =
+		currentEnvironment !== (data?.env || "") ||
+		(showCreateEnvFileToggle &&
+			currentCreateEnvFile !== (composeData?.createEnvFile ?? true));
 
 	useEffect(() => {
 		if (data) {
 			form.reset({
 				environment: data.env || "",
+				createEnvFile: composeData?.createEnvFile ?? true,
 			});
 		}
 	}, [data, form]);
@@ -97,6 +122,9 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 			postgresId: id || "",
 			redisId: id || "",
 			env: formData.environment,
+			...(type === "compose" && {
+				createEnvFile: formData.createEnvFile,
+			}),
 		})
 			.then(async () => {
 				toast.success("Environments Added");
@@ -110,6 +138,7 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 	const handleCancel = () => {
 		form.reset({
 			environment: data?.env || "",
+			createEnvFile: composeData?.createEnvFile ?? true,
 		});
 	};
 
@@ -176,6 +205,7 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 													} as CSSProperties
 												}
 												language="properties"
+												completionSource={completionSource}
 												disabled={isEnvVisible}
 												className="font-mono"
 												wrapperClassName="compose-file-editor"
@@ -190,6 +220,34 @@ PORT=3000
 								)}
 							/>
 
+							{showCreateEnvFileToggle && (
+								<FormField
+									control={form.control}
+									name="createEnvFile"
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-center justify-between p-3 border rounded-lg shadow-xs">
+											<div className="space-y-0.5">
+												<FormLabel>Create Environment File</FormLabel>
+												<FormDescription>
+													When enabled, an .env file will be created in the same
+													directory as your compose file on every deploy.
+													Disable this to keep a repository-provided .env; the
+													variables above will then be ignored. Takes effect on
+													the next deploy.
+												</FormDescription>
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+													disabled={!canWrite}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+							)}
+
 							{canWrite && (
 								<div className="flex flex-row justify-end gap-2">
 									{hasChanges && (

apps/dokploy/components/dashboard/application/environment/show.tsx

@@ -3,6 +3,7 @@ import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { useEnvCompletionSource } from "@/components/shared/env-autocomplete";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import {
@@ -45,6 +46,13 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 		},
 	);
 
+	const completionSource = useEnvCompletionSource({
+		projectEnv: data?.environment?.project?.env,
+		environmentEnv: data?.environment?.env,
+		projectId: data?.environment?.projectId,
+		environmentId: data?.environment?.environmentId,
+	});
+
 	const form = useForm<EnvironmentSchema>({
 		defaultValues: {
 			env: "",
@@ -60,14 +68,16 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 	const currentBuildArgs = form.watch("buildArgs");
 	const currentBuildSecrets = form.watch("buildSecrets");
 	const currentCreateEnvFile = form.watch("createEnvFile");
+	const { isDirty } = form.formState;
 	const hasChanges =
 		currentEnv !== (data?.env || "") ||
 		currentBuildArgs !== (data?.buildArgs || "") ||
 		currentBuildSecrets !== (data?.buildSecrets || "") ||
 		currentCreateEnvFile !== (data?.createEnvFile ?? true);
 
+	// Skip reset while editing so background refetches don't wipe edits
 	useEffect(() => {
-		if (data) {
+		if (data && !isDirty) {
 			form.reset({
 				env: data.env || "",
 				buildArgs: data.buildArgs || "",
@@ -75,7 +85,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 				createEnvFile: data.createEnvFile ?? true,
 			});
 		}
-	}, [data, form]);
+	}, [data, isDirty, form]);
 
 	const onSubmit = async (formData: EnvironmentSchema) => {
 		mutateAsync({
@@ -87,6 +97,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 		})
 			.then(async () => {
 				toast.success("Environments Added");
+				form.reset(formData);
 				await refetch();
 			})
 			.catch(() => {
@@ -139,6 +150,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 							</span>
 						}
 						placeholder={["NODE_ENV=production", "PORT=3000"].join("\n")}
+						completionSource={completionSource}
 					/>
 					{data?.buildType === "dockerfile" && (
 						<Secrets
@@ -160,6 +172,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 								</span>
 							}
 							placeholder="NPM_TOKEN=xyz"
+							completionSource={completionSource}
 						/>
 					)}
 					{data?.buildType === "dockerfile" && (
@@ -182,6 +195,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 								</span>
 							}
 							placeholder="NPM_TOKEN=xyz"
+							completionSource={completionSource}
 						/>
 					)}
 					{data?.buildType === "dockerfile" && (

apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx

@@ -256,14 +256,19 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 														: isLoadingRepositories
 															? "Loading...."
 															: (repositories?.find(
-																	(repo) => repo.name === field.value.repo,
+																	(repo) =>
+																		repo.name === field.value.repo &&
+																		repo.owner.username === field.value.owner,
 																)?.name ?? "Select repository")}
 
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
 											</FormControl>
 										</PopoverTrigger>
-										<PopoverContent className="p-0" align="start">
+										<PopoverContent
+											className="w-[var(--radix-popover-trigger-width)] p-0"
+											align="start"
+										>
 											<Command>
 												<CommandInput
 													placeholder="Search repository..."
@@ -283,7 +288,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 													<CommandGroup>
 														{repositories?.map((repo) => (
 															<CommandItem
-																value={repo.name}
+																value={`${repo.owner.username}/${repo.name}`}
 																key={repo.url}
 																onSelect={() => {
 																	form.setValue("repository", {
@@ -294,8 +299,8 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 																	form.setValue("branch", "");
 																}}
 															>
-																<span className="flex items-center gap-2">
-																	<span>{repo.name}</span>
+																<span className="flex min-w-0 items-center gap-2">
+																	<span className="truncate">{repo.name}</span>
 																	<span className="text-muted-foreground text-xs">
 																		{repo.owner.username}
 																	</span>
@@ -303,7 +308,8 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 																<CheckIcon
 																	className={cn(
 																		"ml-auto h-4 w-4",
-																		repo.name === field.value.repo
+																		repo.name === field.value.repo &&
+																			repo.owner.username === field.value.owner
 																			? "opacity-100"
 																			: "opacity-0",
 																	)}
@@ -350,7 +356,10 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 												</Button>
 											</FormControl>
 										</PopoverTrigger>
-										<PopoverContent className="p-0" align="start">
+										<PopoverContent
+											className="w-[var(--radix-popover-trigger-width)] p-0"
+											align="start"
+										>
 											<Command>
 												<CommandInput
 													placeholder="Search branch..."
@@ -378,7 +387,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 																	form.setValue("branch", branch.name);
 																}}
 															>
-																{branch.name}
+																<span className="truncate">{branch.name}</span>
 																<CheckIcon
 																	className={cn(
 																		"ml-auto h-4 w-4",
@@ -438,14 +447,18 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 										{field.value?.map((path, index) => (
 											<Badge key={index} variant="secondary">
 												{path}
-												<X
-													className="ml-1 size-3 cursor-pointer"
+												<button
+													type="button"
+													aria-label="Remove watch path"
+													className="inline-flex items-center focus-visible:ring-2"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
 														form.setValue("watchPaths", newPaths);
 													}}
-												/>
+												>
+													<X className="ml-1 size-3 cursor-pointer" />
+												</button>
 											</Badge>
 										))}
 									</div>
@@ -493,14 +506,14 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 							control={form.control}
 							name="enableSubmodules"
 							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
+								<FormItem className="flex flex-row items-center space-x-2 space-y-0">
 									<FormControl>
 										<Switch
 											checked={field.value}
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
+									<FormLabel>Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>

apps/dokploy/components/dashboard/application/general/generic/save-git-provider.tsx

@@ -242,14 +242,18 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 									{field.value?.map((path, index) => (
 										<Badge key={index} variant="secondary">
 											{path}
-											<X
-												className="ml-1 size-3 cursor-pointer"
+											<button
+												type="button"
+												aria-label="Remove watch path"
+												className="inline-flex items-center focus-visible:ring-2"
 												onClick={() => {
 													const newPaths = [...(field.value || [])];
 													newPaths.splice(index, 1);
 													form.setValue("watchPaths", newPaths);
 												}}
-											/>
+											>
+												<X className="ml-1 size-3 cursor-pointer" />
+											</button>
 										</Badge>
 									))}
 								</div>
@@ -298,14 +302,14 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 						control={form.control}
 						name="enableSubmodules"
 						render={({ field }) => (
-							<FormItem className="flex items-center space-x-2">
+							<FormItem className="flex flex-row items-center space-x-2 space-y-0">
 								<FormControl>
 									<Switch
 										checked={field.value}
 										onCheckedChange={field.onChange}
 									/>
 								</FormControl>
-								<FormLabel className="mt-0!">Enable Submodules</FormLabel>
+								<FormLabel>Enable Submodules</FormLabel>
 							</FormItem>
 						)}
 					/>

apps/dokploy/components/dashboard/application/general/generic/save-gitea-provider.tsx

@@ -270,14 +270,18 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 															? "Loading...."
 															: (repositories?.find(
 																	(repo: GiteaRepository) =>
-																		repo.name === field.value.repo,
+																		repo.name === field.value.repo &&
+																		repo.owner.username === field.value.owner,
 																)?.name ?? "Select repository")}
 
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
 											</FormControl>
 										</PopoverTrigger>
-										<PopoverContent className="p-0" align="start">
+										<PopoverContent
+											className="w-[var(--radix-popover-trigger-width)] p-0"
+											align="start"
+										>
 											<Command>
 												<CommandInput
 													placeholder="Search repository..."
@@ -303,7 +307,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 														{repositories?.map((repo: GiteaRepository) => {
 															return (
 																<CommandItem
-																	value={repo.name}
+																	value={`${repo.owner.username}/${repo.name}`}
 																	key={repo.url}
 																	onSelect={() => {
 																		form.setValue("repository", {
@@ -313,8 +317,10 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 																		form.setValue("branch", "");
 																	}}
 																>
-																	<span className="flex items-center gap-2">
-																		<span>{repo.name}</span>
+																	<span className="flex min-w-0 items-center gap-2">
+																		<span className="truncate">
+																			{repo.name}
+																		</span>
 																		<span className="text-muted-foreground text-xs">
 																			{repo.owner.username}
 																		</span>
@@ -322,7 +328,9 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 																	<CheckIcon
 																		className={cn(
 																			"ml-auto h-4 w-4",
-																			repo.name === field.value.repo
+																			repo.name === field.value.repo &&
+																				repo.owner.username ===
+																					field.value.owner
 																				? "opacity-100"
 																				: "opacity-0",
 																		)}
@@ -371,7 +379,10 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 												</Button>
 											</FormControl>
 										</PopoverTrigger>
-										<PopoverContent className="p-0" align="start">
+										<PopoverContent
+											className="w-[var(--radix-popover-trigger-width)] p-0"
+											align="start"
+										>
 											<Command>
 												<CommandInput
 													placeholder="Search branch..."
@@ -402,7 +413,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 																	form.setValue("branch", branch.name);
 																}}
 															>
-																{branch.name}
+																<span className="truncate">{branch.name}</span>
 																<CheckIcon
 																	className={cn(
 																		"ml-auto h-4 w-4",
@@ -466,14 +477,18 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 												className="flex items-center gap-1"
 											>
 												{path}
-												<X
-													className="size-3 cursor-pointer hover:text-destructive"
+												<button
+													type="button"
+													aria-label="Remove watch path"
+													className="inline-flex items-center focus-visible:ring-2"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
 														field.onChange(newPaths);
 													}}
-												/>
+												>
+													<X className="size-3 cursor-pointer hover:text-destructive" />
+												</button>
 											</Badge>
 										))}
 									</div>
@@ -520,14 +535,14 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 							control={form.control}
 							name="enableSubmodules"
 							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
+								<FormItem className="flex flex-row items-center space-x-2 space-y-0">
 									<FormControl>
 										<Switch
 											checked={field.value}
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
+									<FormLabel>Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>

apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx

@@ -47,6 +47,7 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
+import { DEFAULT_GITHUB_URL } from "@/utils/github-utils";
 
 const GithubProviderSchema = z.object({
 	buildPath: z.string().min(1, "Path is required").default("/"),
@@ -96,6 +97,11 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 
 	const repository = form.watch("repository");
 	const githubId = form.watch("githubId");
+
+	// Enterprise repositories do not live on github.com.
+	const providerUrl =
+		githubProviders?.find((provider) => provider.githubId === githubId)
+			?.githubUrl ?? DEFAULT_GITHUB_URL;
 	const triggerType = form.watch("triggerType");
 
 	const { data: repositories, isPending: isLoadingRepositories } =
@@ -227,7 +233,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 										<FormLabel>Repository</FormLabel>
 										{field.value.owner && field.value.repo && (
 											<Link
-												href={`https://github.com/${field.value.owner}/${field.value.repo}`}
+												href={`${providerUrl}/${field.value.owner}/${field.value.repo}`}
 												target="_blank"
 												rel="noopener noreferrer"
 												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
@@ -252,14 +258,19 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 														: isLoadingRepositories
 															? "Loading...."
 															: (repositories?.find(
-																	(repo) => repo.name === field.value.repo,
+																	(repo) =>
+																		repo.name === field.value.repo &&
+																		repo.owner.login === field.value.owner,
 																)?.name ?? field.value.repo)}
 
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
 											</FormControl>
 										</PopoverTrigger>
-										<PopoverContent className="p-0" align="start">
+										<PopoverContent
+											className="w-[var(--radix-popover-trigger-width)] p-0"
+											align="start"
+										>
 											<Command>
 												<CommandInput
 													placeholder="Search repository..."
@@ -279,7 +290,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 													<CommandGroup>
 														{repositories?.map((repo) => (
 															<CommandItem
-																value={repo.name}
+																value={`${repo.owner.login}/${repo.name}`}
 																key={repo.url}
 																onSelect={() => {
 																	form.setValue("repository", {
@@ -289,8 +300,8 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 																	form.setValue("branch", "");
 																}}
 															>
-																<span className="flex items-center gap-2">
-																	<span>{repo.name}</span>
+																<span className="flex min-w-0 items-center gap-2">
+																	<span className="truncate">{repo.name}</span>
 																	<span className="text-muted-foreground text-xs">
 																		{repo.owner.login}
 																	</span>
@@ -298,7 +309,8 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 																<CheckIcon
 																	className={cn(
 																		"ml-auto h-4 w-4",
-																		repo.name === field.value.repo
+																		repo.name === field.value.repo &&
+																			repo.owner.login === field.value.owner
 																			? "opacity-100"
 																			: "opacity-0",
 																	)}
@@ -345,7 +357,10 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 												</Button>
 											</FormControl>
 										</PopoverTrigger>
-										<PopoverContent className="p-0" align="start">
+										<PopoverContent
+											className="w-[var(--radix-popover-trigger-width)] p-0"
+											align="start"
+										>
 											<Command>
 												<CommandInput
 													placeholder="Search branch..."
@@ -373,7 +388,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 																	form.setValue("branch", branch.name);
 																}}
 															>
-																{branch.name}
+																<span className="truncate">{branch.name}</span>
 																<CheckIcon
 																	className={cn(
 																		"ml-auto h-4 w-4",
@@ -429,8 +444,12 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 										</TooltipProvider>
 									</div>
 									<Select
-										onValueChange={field.onChange}
-										defaultValue={field.value}
+										onValueChange={(value) => {
+											if (!value) {
+												return;
+											}
+											field.onChange(value);
+										}}
 										value={field.value}
 									>
 										<FormControl>
@@ -478,14 +497,18 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 													className="flex items-center gap-1"
 												>
 													{path}
-													<X
-														className="size-3 cursor-pointer hover:text-destructive"
+													<button
+														type="button"
+														aria-label="Remove watch path"
+														className="inline-flex items-center focus-visible:ring-2"
 														onClick={() => {
 															const newPaths = [...(field.value || [])];
 															newPaths.splice(index, 1);
 															field.onChange(newPaths);
 														}}
-													/>
+													>
+														<X className="size-3 cursor-pointer hover:text-destructive" />
+													</button>
 												</Badge>
 											))}
 										</div>
@@ -534,14 +557,14 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 							control={form.control}
 							name="enableSubmodules"
 							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
+								<FormItem className="flex flex-row items-center space-x-2 space-y-0">
 									<FormControl>
 										<Switch
 											checked={field.value}
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
+									<FormLabel>Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>

apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx

@@ -272,7 +272,10 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 												</Button>
 											</FormControl>
 										</PopoverTrigger>
-										<PopoverContent className="p-0" align="start">
+										<PopoverContent
+											className="w-[var(--radix-popover-trigger-width)] p-0"
+											align="start"
+										>
 											<Command>
 												<CommandInput
 													placeholder="Search repository..."
@@ -310,8 +313,10 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 																		form.setValue("branch", "");
 																	}}
 																>
-																	<span className="flex items-center gap-2">
-																		<span>{repo.name}</span>
+																	<span className="flex min-w-0 items-center gap-2">
+																		<span className="truncate">
+																			{repo.name}
+																		</span>
 																		<span className="text-muted-foreground text-xs">
 																			{repo.owner.username}
 																		</span>
@@ -368,7 +373,10 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 												</Button>
 											</FormControl>
 										</PopoverTrigger>
-										<PopoverContent className="p-0" align="start">
+										<PopoverContent
+											className="w-[var(--radix-popover-trigger-width)] p-0"
+											align="start"
+										>
 											<Command>
 												<CommandInput
 													placeholder="Search branch..."
@@ -396,7 +404,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 																	form.setValue("branch", branch.name);
 																}}
 															>
-																{branch.name}
+																<span className="truncate">{branch.name}</span>
 																<CheckIcon
 																	className={cn(
 																		"ml-auto h-4 w-4",
@@ -459,14 +467,18 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 												className="flex items-center gap-1"
 											>
 												{path}
-												<X
-													className="size-3 cursor-pointer hover:text-destructive"
+												<button
+													type="button"
+													aria-label="Remove watch path"
+													className="inline-flex items-center focus-visible:ring-2"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
 														field.onChange(newPaths);
 													}}
-												/>
+												>
+													<X className="size-3 cursor-pointer hover:text-destructive" />
+												</button>
 											</Badge>
 										))}
 									</div>
@@ -513,14 +525,14 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 							control={form.control}
 							name="enableSubmodules"
 							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
+								<FormItem className="flex flex-row items-center space-x-2 space-y-0">
 									<FormControl>
 										<Switch
 											checked={field.value}
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
+									<FormLabel>Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>

apps/dokploy/components/dashboard/application/general/show.tsx

@@ -271,6 +271,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 					<DockerTerminalModal
 						appName={data?.appName || ""}
 						serverId={data?.serverId || ""}
+						serviceId={applicationId}
 					>
 						<Button
 							variant="outline"

apps/dokploy/components/dashboard/application/icon/show-icon-settings.tsx

@@ -1,5 +1,5 @@
 import DOMPurify from "dompurify";
-import { GlobeIcon, Pencil, Search, X } from "lucide-react";
+import { CircuitBoard, GlobeIcon, Pencil, Search, X } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
@@ -16,7 +16,8 @@ import { type BundledIcon, bundledIcons } from "@/lib/bundled-icons";
 import { api } from "@/utils/api";
 
 interface ShowIconSettingsProps {
-	applicationId: string;
+	serviceId: string;
+	serviceType: "application" | "compose";
 	icon?: string | null;
 }
 
@@ -26,7 +27,8 @@ const svgToDataUrl = (icon: BundledIcon): string => {
 };
 
 export const ShowIconSettings = ({
-	applicationId,
+	serviceId,
+	serviceType,
 	icon,
 }: ShowIconSettingsProps) => {
 	const [open, setOpen] = useState(false);
@@ -48,6 +50,17 @@ export const ShowIconSettings = ({
 	const utils = api.useUtils();
 	const { mutateAsync: updateApplication } =
 		api.application.update.useMutation();
+	const { mutateAsync: updateCompose } = api.compose.update.useMutation();
+
+	const updateIcon = async (newIcon: string | null) => {
+		if (serviceType === "compose") {
+			await updateCompose({ composeId: serviceId, icon: newIcon });
+			await utils.compose.one.invalidate({ composeId: serviceId });
+		} else {
+			await updateApplication({ applicationId: serviceId, icon: newIcon });
+			await utils.application.one.invalidate({ applicationId: serviceId });
+		}
+	};
 
 	useEffect(() => {
 		if (open) {
@@ -59,12 +72,8 @@ export const ShowIconSettings = ({
 	const handleIconSelect = async (selectedIcon: BundledIcon) => {
 		try {
 			const dataUrl = svgToDataUrl(selectedIcon);
-			await updateApplication({
-				applicationId,
-				icon: dataUrl,
-			});
+			await updateIcon(dataUrl);
 			toast.success("Icon saved successfully");
-			await utils.application.one.invalidate({ applicationId });
 			setOpen(false);
 		} catch (_error) {
 			toast.error("Error saving icon");
@@ -73,12 +82,8 @@ export const ShowIconSettings = ({
 
 	const handleRemoveIcon = async () => {
 		try {
-			await updateApplication({
-				applicationId,
-				icon: null,
-			});
+			await updateIcon(null);
 			toast.success("Icon removed");
-			await utils.application.one.invalidate({ applicationId });
 		} catch (_error) {
 			toast.error("Error removing icon");
 		}
@@ -130,12 +135,8 @@ export const ShowIconSettings = ({
 				return;
 			}
 			try {
-				await updateApplication({
-					applicationId,
-					icon: sanitizedDataUrl,
-				});
+				await updateIcon(sanitizedDataUrl);
 				toast.success("Icon saved!");
-				await utils.application.one.invalidate({ applicationId });
 				setOpen(false);
 			} catch (_error) {
 				toast.error("Error saving icon");
@@ -147,12 +148,8 @@ export const ShowIconSettings = ({
 		reader.onload = async (event) => {
 			const result = event.target?.result as string;
 			try {
-				await updateApplication({
-					applicationId,
-					icon: result,
-				});
+				await updateIcon(result);
 				toast.success("Icon saved!");
-				await utils.application.one.invalidate({ applicationId });
 				setOpen(false);
 			} catch (_error) {
 				toast.error("Error saving icon");
@@ -172,9 +169,11 @@ export const ShowIconSettings = ({
 						// biome-ignore lint/performance/noImgElement: icon is data URL or base64
 						<img
 							src={icon}
-							alt="Application icon"
+							alt="Service icon"
 							className="h-8 w-8 object-contain"
 						/>
+					) : serviceType === "compose" ? (
+						<CircuitBoard className="h-6 w-6 text-muted-foreground" />
 					) : (
 						<GlobeIcon className="h-6 w-6 text-muted-foreground" />
 					)}

apps/dokploy/components/dashboard/application/logs/show.tsx

@@ -50,9 +50,10 @@ export const badgeStateColor = (state: string) => {
 interface Props {
 	appName: string;
 	serverId?: string;
+	serviceId?: string;
 }
 
-export const ShowDockerLogs = ({ appName, serverId }: Props) => {
+export const ShowDockerLogs = ({ appName, serverId, serviceId }: Props) => {
 	const [containerId, setContainerId] = useState<string | undefined>();
 	const [option, setOption] = useState<"swarm" | "native">("native");
 
@@ -182,6 +183,7 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => {
 					serverId={serverId || ""}
 					containerId={containerId || "select-a-container"}
 					runType={option}
+					serviceId={serviceId}
 				/>
 			</CardContent>
 		</Card>

apps/dokploy/components/dashboard/application/schedules/show-schedules.tsx

@@ -58,8 +58,12 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
 	const handleRunManually = async (scheduleId: string) => {
 		setRunningSchedules((prev) => new Set(prev).add(scheduleId));
 		try {
-			await runManually({ scheduleId });
-			toast.success("Schedule run successfully");
+			const result = await runManually({ scheduleId });
+			if (result.status === "error") {
+				toast.error("Schedule run failed, check the deployment logs");
+			} else {
+				toast.success("Schedule run successfully");
+			}
 			await refetchSchedules();
 		} catch {
 			toast.error("Error running schedule");

apps/dokploy/components/dashboard/compose/advanced/add-isolation.tsx

@@ -6,6 +6,7 @@ import { toast } from "sonner";
 import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -111,7 +112,10 @@ export const IsolatedDeploymentTab = ({ composeId }: Props) => {
 	return (
 		<Card className="bg-background">
 			<CardHeader>
-				<CardTitle className="text-xl">Enable Isolated Deployment</CardTitle>
+				<CardTitle className="text-xl flex items-center gap-2">
+					Enable Isolated Deployment
+					<Badge variant="yellow">Deprecated</Badge>
+				</CardTitle>
 				<CardDescription>
 					Configure isolated deployment to the compose file.
 					<div className="text-sm text-muted-foreground flex flex-col gap-2">
@@ -138,6 +142,11 @@ export const IsolatedDeploymentTab = ({ composeId }: Props) => {
 			</CardHeader>
 			<CardContent>
 				<div className="space-y-4">
+					<AlertBlock type="warning">
+						Isolated deployment is deprecated. Use the Networks section above to
+						attach networks per service and detach them from dokploy-network —
+						it is declarative and does not break on restarts.
+					</AlertBlock>
 					{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 					<Form {...form}>
 						<form

apps/dokploy/components/dashboard/compose/containers/show-compose-containers.tsx

@@ -55,12 +55,14 @@ interface Props {
 	appName: string;
 	serverId?: string;
 	appType: "stack" | "docker-compose";
+	serviceId?: string;
 }
 
 export const ShowComposeContainers = ({
 	appName,
 	appType,
 	serverId,
+	serviceId,
 }: Props) => {
 	const { data, isPending, refetch } =
 		api.docker.getContainersByAppNameMatch.useQuery(
@@ -112,6 +114,7 @@ export const ShowComposeContainers = ({
 									<TableHead>Name</TableHead>
 									<TableHead>State</TableHead>
 									<TableHead>Status</TableHead>
+									{appType === "stack" && <TableHead>Node</TableHead>}
 									<TableHead>Container ID</TableHead>
 									<TableHead className="text-right" />
 								</TableRow>
@@ -119,9 +122,11 @@ export const ShowComposeContainers = ({
 							<TableBody>
 								{data.map((container) => (
 									<ContainerRow
-										key={container.containerId}
+										key={container.name}
 										container={container}
+										appType={appType}
 										serverId={serverId}
+										serviceId={serviceId}
 										onActionComplete={() => refetch()}
 									/>
 								))}
@@ -140,14 +145,19 @@ interface ContainerRowProps {
 		name: string;
 		state: string;
 		status: string;
+		node?: string;
 	};
+	appType: "stack" | "docker-compose";
 	serverId?: string;
+	serviceId?: string;
 	onActionComplete: () => void;
 }
 
 const ContainerRow = ({
 	container,
+	appType,
 	serverId,
+	serviceId,
 	onActionComplete,
 }: ContainerRowProps) => {
 	const [logsOpen, setLogsOpen] = useState(false);
@@ -187,7 +197,13 @@ const ContainerRow = ({
 					variant={
 						container.state === "running"
 							? "default"
-							: container.state === "exited"
+							: [
+										"exited",
+										"pending",
+										"preparing",
+										"starting",
+										"ready",
+									].includes(container.state)
 								? "secondary"
 								: "destructive"
 					}
@@ -196,94 +212,99 @@ const ContainerRow = ({
 				</Badge>
 			</TableCell>
 			<TableCell>{container.status}</TableCell>
+			{appType === "stack" && <TableCell>{container.node || "-"}</TableCell>}
 			<TableCell className="font-mono text-sm text-muted-foreground">
-				{container.containerId}
+				{container.containerId || "-"}
 			</TableCell>
 			<TableCell className="text-right">
-				<Dialog open={logsOpen} onOpenChange={setLogsOpen}>
-					<DropdownMenu>
-						<DropdownMenuTrigger asChild>
-							<Button variant="ghost" className="h-8 w-8 p-0">
-								{actionLoading ? (
-									<Loader2 className="h-4 w-4 animate-spin" />
-								) : (
-									<MoreHorizontal className="h-4 w-4" />
-								)}
-							</Button>
-						</DropdownMenuTrigger>
-						<DropdownMenuContent align="end">
-							<DropdownMenuLabel>Actions</DropdownMenuLabel>
-							<DialogTrigger asChild>
+				{!container.containerId ? null : (
+					<Dialog open={logsOpen} onOpenChange={setLogsOpen}>
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<Button variant="ghost" className="h-8 w-8 p-0">
+									{actionLoading ? (
+										<Loader2 className="h-4 w-4 animate-spin" />
+									) : (
+										<MoreHorizontal className="h-4 w-4" />
+									)}
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent align="end">
+								<DropdownMenuLabel>Actions</DropdownMenuLabel>
+								<DialogTrigger asChild>
+									<DropdownMenuItem
+										className="cursor-pointer"
+										onSelect={(e) => e.preventDefault()}
+									>
+										View Logs
+									</DropdownMenuItem>
+								</DialogTrigger>
+								<ShowContainerConfig
+									containerId={container.containerId}
+									serverId={serverId || ""}
+								/>
+								<ShowContainerMounts
+									containerId={container.containerId}
+									serverId={serverId || ""}
+								/>
+								<ShowContainerNetworks
+									containerId={container.containerId}
+									serverId={serverId || ""}
+								/>
+								<DockerTerminalModal
+									containerId={container.containerId}
+									serverId={serverId || ""}
+									serviceId={serviceId}
+								>
+									Terminal
+								</DockerTerminalModal>
+								<DropdownMenuSeparator />
 								<DropdownMenuItem
 									className="cursor-pointer"
-									onSelect={(e) => e.preventDefault()}
+									disabled={actionLoading !== null}
+									onClick={() => handleAction("restart", restartMutation)}
 								>
-									View Logs
+									Restart
 								</DropdownMenuItem>
-							</DialogTrigger>
-							<ShowContainerConfig
-								containerId={container.containerId}
-								serverId={serverId || ""}
-							/>
-							<ShowContainerMounts
-								containerId={container.containerId}
-								serverId={serverId || ""}
-							/>
-							<ShowContainerNetworks
-								containerId={container.containerId}
-								serverId={serverId || ""}
-							/>
-							<DockerTerminalModal
-								containerId={container.containerId}
-								serverId={serverId || ""}
-							>
-								Terminal
-							</DockerTerminalModal>
-							<DropdownMenuSeparator />
-							<DropdownMenuItem
-								className="cursor-pointer"
-								disabled={actionLoading !== null}
-								onClick={() => handleAction("restart", restartMutation)}
-							>
-								Restart
-							</DropdownMenuItem>
-							<DropdownMenuItem
-								className="cursor-pointer"
-								disabled={actionLoading !== null}
-								onClick={() => handleAction("start", startMutation)}
-							>
-								Start
-							</DropdownMenuItem>
-							<DropdownMenuItem
-								className="cursor-pointer"
-								disabled={actionLoading !== null}
-								onClick={() => handleAction("stop", stopMutation)}
-							>
-								Stop
-							</DropdownMenuItem>
-							<DropdownMenuItem
-								className="cursor-pointer text-red-500 focus:text-red-600"
-								disabled={actionLoading !== null}
-								onClick={() => handleAction("kill", killMutation)}
-							>
-								Kill
-							</DropdownMenuItem>
-						</DropdownMenuContent>
-					</DropdownMenu>
-					<DialogContent className="sm:max-w-7xl">
-						<DialogHeader>
-							<DialogTitle>View Logs</DialogTitle>
-							<DialogDescription>Logs for {container.name}</DialogDescription>
-						</DialogHeader>
-						<div className="flex flex-col gap-4 pt-2.5">
-							<DockerLogsId
-								containerId={container.containerId}
-								serverId={serverId}
-								runType="native"
-							/>
-						</div>
-					</DialogContent>
-				</Dialog>
+								<DropdownMenuItem
+									className="cursor-pointer"
+									disabled={actionLoading !== null}
+									onClick={() => handleAction("start", startMutation)}
+								>
+									Start
+								</DropdownMenuItem>
+								<DropdownMenuItem
+									className="cursor-pointer"
+									disabled={actionLoading !== null}
+									onClick={() => handleAction("stop", stopMutation)}
+								>
+									Stop
+								</DropdownMenuItem>
+								<DropdownMenuItem
+									className="cursor-pointer text-red-500 focus:text-red-600"
+									disabled={actionLoading !== null}
+									onClick={() => handleAction("kill", killMutation)}
+								>
+									Kill
+								</DropdownMenuItem>
+							</DropdownMenuContent>
+						</DropdownMenu>
+						<DialogContent className="sm:max-w-7xl">
+							<DialogHeader>
+								<DialogTitle>View Logs</DialogTitle>
+								<DialogDescription>Logs for {container.name}</DialogDescription>
+							</DialogHeader>
+							<div className="flex flex-col gap-4 pt-2.5">
+								<DockerLogsId
+									containerId={container.containerId}
+									serverId={serverId}
+									runType="native"
+									serviceId={serviceId}
+								/>
+							</div>
+						</DialogContent>
+					</Dialog>
+				)}
 			</TableCell>
 		</TableRow>
 	);

apps/dokploy/components/dashboard/compose/general/actions.tsx

@@ -84,19 +84,19 @@ export const ComposeActions = ({ composeId }: Props) => {
 				)}
 				{canDeploy && (
 					<DialogAction
-						title="Reload Compose"
-						description="Are you sure you want to reload this compose?"
+						title="Rebuild Compose"
+						description="Are you sure you want to rebuild this compose?"
 						type="default"
 						onClick={async () => {
 							await redeploy({
 								composeId: composeId,
 							})
 								.then(() => {
-									toast.success("Compose reloaded successfully");
+									toast.success("Compose rebuilt successfully");
 									refetch();
 								})
 								.catch(() => {
-									toast.error("Error reloading compose");
+									toast.error("Error rebuilding compose");
 								});
 						}}
 					>
@@ -109,12 +109,14 @@ export const ComposeActions = ({ composeId }: Props) => {
 								<TooltipTrigger asChild>
 									<div className="flex items-center">
 										<RefreshCcw className="size-4 mr-1" />
-										Reload
+										Rebuild
 									</div>
 								</TooltipTrigger>
 								<TooltipPrimitive.Portal>
 									<TooltipContent sideOffset={5} className="z-60">
-										<p>Reload the compose without rebuilding it</p>
+										<p>
+											Rebuilds the compose without downloading the source code
+										</p>
 									</TooltipContent>
 								</TooltipPrimitive.Portal>
 							</Tooltip>
@@ -206,6 +208,7 @@ export const ComposeActions = ({ composeId }: Props) => {
 				appName={data?.appName || ""}
 				serverId={data?.serverId || ""}
 				appType={data?.composeType || "docker-compose"}
+				serviceId={data?.composeId}
 			>
 				<Button
 					variant="outline"

apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx

@@ -258,14 +258,19 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 														: isLoadingRepositories
 															? "Loading...."
 															: (repositories?.find(
-																	(repo) => repo.name === field.value.repo,
+																	(repo) =>
+																		repo.name === field.value.repo &&
+																		repo.owner.username === field.value.owner,
 																)?.name ?? "Select repository")}
 
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
 											</FormControl>
 										</PopoverTrigger>
-										<PopoverContent className="p-0" align="start">
+										<PopoverContent
+											className="w-[var(--radix-popover-trigger-width)] p-0"
+											align="start"
+										>
 											<Command>
 												<CommandInput
 													placeholder="Search repository..."
@@ -285,7 +290,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 													<CommandGroup>
 														{repositories?.map((repo) => (
 															<CommandItem
-																value={repo.name}
+																value={`${repo.owner.username}/${repo.name}`}
 																key={repo.url}
 																onSelect={() => {
 																	form.setValue("repository", {
@@ -296,8 +301,8 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 																	form.setValue("branch", "");
 																}}
 															>
-																<span className="flex items-center gap-2">
-																	<span>{repo.name}</span>
+																<span className="flex min-w-0 items-center gap-2">
+																	<span className="truncate">{repo.name}</span>
 																	<span className="text-muted-foreground text-xs">
 																		{repo.owner.username}
 																	</span>
@@ -305,7 +310,8 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 																<CheckIcon
 																	className={cn(
 																		"ml-auto h-4 w-4",
-																		repo.name === field.value.repo
+																		repo.name === field.value.repo &&
+																			repo.owner.username === field.value.owner
 																			? "opacity-100"
 																			: "opacity-0",
 																	)}
@@ -352,7 +358,10 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 												</Button>
 											</FormControl>
 										</PopoverTrigger>
-										<PopoverContent className="p-0" align="start">
+										<PopoverContent
+											className="w-[var(--radix-popover-trigger-width)] p-0"
+											align="start"
+										>
 											<Command>
 												<CommandInput
 													placeholder="Search branch..."
@@ -380,7 +389,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 																	form.setValue("branch", branch.name);
 																}}
 															>
-																{branch.name}
+																<span className="truncate">{branch.name}</span>
 																<CheckIcon
 																	className={cn(
 																		"ml-auto h-4 w-4",
@@ -442,14 +451,18 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 										{field.value?.map((path, index) => (
 											<Badge key={index} variant="secondary">
 												{path}
-												<X
-													className="ml-1 size-3 cursor-pointer"
+												<button
+													type="button"
+													aria-label="Remove watch path"
+													className="inline-flex items-center focus-visible:ring-2"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
 														form.setValue("watchPaths", newPaths);
 													}}
-												/>
+												>
+													<X className="ml-1 size-3 cursor-pointer" />
+												</button>
 											</Badge>
 										))}
 									</div>
@@ -497,14 +510,14 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 							control={form.control}
 							name="enableSubmodules"
 							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
+								<FormItem className="flex flex-row items-center space-x-2 space-y-0">
 									<FormControl>
 										<Switch
 											checked={field.value}
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
+									<FormLabel>Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>

apps/dokploy/components/dashboard/compose/general/generic/save-git-provider-compose.tsx

@@ -251,14 +251,18 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 									{field.value?.map((path, index) => (
 										<Badge key={index} variant="secondary">
 											{path}
-											<X
-												className="ml-1 size-3 cursor-pointer"
+											<button
+												type="button"
+												aria-label="Remove watch path"
+												className="inline-flex items-center focus-visible:ring-2"
 												onClick={() => {
 													const newPaths = [...(field.value || [])];
 													newPaths.splice(index, 1);
 													form.setValue("watchPaths", newPaths);
 												}}
-											/>
+											>
+												<X className="ml-1 size-3 cursor-pointer" />
+											</button>
 										</Badge>
 									))}
 								</div>
@@ -306,14 +310,14 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 						control={form.control}
 						name="enableSubmodules"
 						render={({ field }) => (
-							<FormItem className="flex items-center space-x-2">
+							<FormItem className="flex flex-row items-center space-x-2 space-y-0">
 								<FormControl>
 									<Switch
 										checked={field.value}
 										onCheckedChange={field.onChange}
 									/>
 								</FormControl>
-								<FormLabel className="mt-0!">Enable Submodules</FormLabel>
+								<FormLabel>Enable Submodules</FormLabel>
 							</FormItem>
 						)}
 					/>

apps/dokploy/components/dashboard/compose/general/generic/save-gitea-provider-compose.tsx

@@ -255,13 +255,18 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 														: isLoadingRepositories
 															? "Loading...."
 															: (repositories?.find(
-																	(repo) => repo.name === field.value.repo,
+																	(repo) =>
+																		repo.name === field.value.repo &&
+																		repo.owner.username === field.value.owner,
 																)?.name ?? "Select repository")}
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
 											</FormControl>
 										</PopoverTrigger>
-										<PopoverContent className="p-0" align="start">
+										<PopoverContent
+											className="w-[var(--radix-popover-trigger-width)] p-0"
+											align="start"
+										>
 											<Command>
 												<CommandInput
 													placeholder="Search repository..."
@@ -282,7 +287,7 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 														{repositories?.map((repo) => (
 															<CommandItem
 																key={repo.url}
-																value={repo.name}
+																value={`${repo.owner.username}/${repo.name}`}
 																onSelect={() => {
 																	form.setValue("repository", {
 																		owner: repo.owner.username,
@@ -291,8 +296,8 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 																	form.setValue("branch", "");
 																}}
 															>
-																<span className="flex items-center gap-2">
-																	<span>{repo.name}</span>
+																<span className="flex min-w-0 items-center gap-2">
+																	<span className="truncate">{repo.name}</span>
 																	<span className="text-muted-foreground text-xs">
 																		{repo.owner.username}
 																	</span>
@@ -300,7 +305,8 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 																<CheckIcon
 																	className={cn(
 																		"ml-auto h-4 w-4",
-																		repo.name === field.value.repo
+																		repo.name === field.value.repo &&
+																			repo.owner.username === field.value.owner
 																			? "opacity-100"
 																			: "opacity-0",
 																	)}
@@ -348,7 +354,10 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 												</Button>
 											</FormControl>
 										</PopoverTrigger>
-										<PopoverContent className="p-0" align="start">
+										<PopoverContent
+											className="w-[var(--radix-popover-trigger-width)] p-0"
+											align="start"
+										>
 											<Command>
 												<CommandInput
 													placeholder="Search branches..."
@@ -365,8 +374,10 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 																	form.setValue("branch", branch.name)
 																}
 															>
-																<span className="flex items-center gap-2">
-																	{branch.name}
+																<span className="flex min-w-0 items-center gap-2">
+																	<span className="truncate">
+																		{branch.name}
+																	</span>
 																</span>
 																<CheckIcon
 																	className={cn(
@@ -431,14 +442,18 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 										{field.value?.map((path, index) => (
 											<Badge key={index} variant="secondary">
 												{path}
-												<X
-													className="ml-1 size-3 cursor-pointer"
+												<button
+													type="button"
+													aria-label="Remove watch path"
+													className="inline-flex items-center focus-visible:ring-2"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
 														form.setValue("watchPaths", newPaths);
 													}}
-												/>
+												>
+													<X className="ml-1 size-3 cursor-pointer" />
+												</button>
 											</Badge>
 										))}
 									</div>
@@ -486,14 +501,14 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 							control={form.control}
 							name="enableSubmodules"
 							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
+								<FormItem className="flex flex-row items-center space-x-2 space-y-0">
 									<FormControl>
 										<Switch
 											checked={field.value}
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
+									<FormLabel>Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>

apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx

@@ -47,6 +47,7 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
+import { DEFAULT_GITHUB_URL } from "@/utils/github-utils";
 
 const GithubProviderSchema = z.object({
 	composePath: z.string().min(1),
@@ -98,6 +99,11 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 	const repository = form.watch("repository");
 	const githubId = form.watch("githubId");
 	const triggerType = form.watch("triggerType");
+
+	// Enterprise repositories do not live on github.com.
+	const providerUrl =
+		githubProviders?.find((provider) => provider.githubId === githubId)
+			?.githubUrl ?? DEFAULT_GITHUB_URL;
 	const { data: repositories, isPending: isLoadingRepositories } =
 		api.github.getGithubRepositories.useQuery(
 			{
@@ -220,7 +226,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 										<FormLabel>Repository</FormLabel>
 										{field.value.owner && field.value.repo && (
 											<Link
-												href={`https://github.com/${field.value.owner}/${field.value.repo}`}
+												href={`${providerUrl}/${field.value.owner}/${field.value.repo}`}
 												target="_blank"
 												rel="noopener noreferrer"
 												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
@@ -245,14 +251,19 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 														: isLoadingRepositories
 															? "Loading...."
 															: (repositories?.find(
-																	(repo) => repo.name === field.value.repo,
+																	(repo) =>
+																		repo.name === field.value.repo &&
+																		repo.owner.login === field.value.owner,
 																)?.name ?? field.value.repo)}
 
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
 											</FormControl>
 										</PopoverTrigger>
-										<PopoverContent className="p-0" align="start">
+										<PopoverContent
+											className="w-[var(--radix-popover-trigger-width)] p-0"
+											align="start"
+										>
 											<Command>
 												<CommandInput
 													placeholder="Search repository..."
@@ -272,7 +283,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 													<CommandGroup>
 														{repositories?.map((repo) => (
 															<CommandItem
-																value={repo.name}
+																value={`${repo.owner.login}/${repo.name}`}
 																key={repo.url}
 																onSelect={() => {
 																	form.setValue("repository", {
@@ -282,8 +293,8 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 																	form.setValue("branch", "");
 																}}
 															>
-																<span className="flex items-center gap-2">
-																	<span>{repo.name}</span>
+																<span className="flex min-w-0 items-center gap-2">
+																	<span className="truncate">{repo.name}</span>
 																	<span className="text-muted-foreground text-xs">
 																		{repo.owner.login}
 																	</span>
@@ -291,7 +302,8 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 																<CheckIcon
 																	className={cn(
 																		"ml-auto h-4 w-4",
-																		repo.name === field.value.repo
+																		repo.name === field.value.repo &&
+																			repo.owner.login === field.value.owner
 																			? "opacity-100"
 																			: "opacity-0",
 																	)}
@@ -338,7 +350,10 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 												</Button>
 											</FormControl>
 										</PopoverTrigger>
-										<PopoverContent className="p-0" align="start">
+										<PopoverContent
+											className="w-[var(--radix-popover-trigger-width)] p-0"
+											align="start"
+										>
 											<Command>
 												<CommandInput
 													placeholder="Search branch..."
@@ -366,7 +381,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 																	form.setValue("branch", branch.name);
 																}}
 															>
-																{branch.name}
+																<span className="truncate">{branch.name}</span>
 																<CheckIcon
 																	className={cn(
 																		"ml-auto h-4 w-4",
@@ -423,8 +438,12 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 										</TooltipProvider>
 									</div>
 									<Select
-										onValueChange={field.onChange}
-										defaultValue={field.value}
+										onValueChange={(value) => {
+											if (!value) {
+												return;
+											}
+											field.onChange(value);
+										}}
 										value={field.value}
 									>
 										<FormControl>
@@ -470,14 +489,18 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 											{field.value?.map((path, index) => (
 												<Badge key={index} variant="secondary">
 													{path}
-													<X
-														className="ml-1 size-3 cursor-pointer"
+													<button
+														type="button"
+														aria-label="Remove watch path"
+														className="inline-flex items-center focus-visible:ring-2"
 														onClick={() => {
 															const newPaths = [...(field.value || [])];
 															newPaths.splice(index, 1);
 															form.setValue("watchPaths", newPaths);
 														}}
-													/>
+													>
+														<X className="ml-1 size-3 cursor-pointer" />
+													</button>
 												</Badge>
 											))}
 										</div>
@@ -529,14 +552,14 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 							control={form.control}
 							name="enableSubmodules"
 							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
+								<FormItem className="flex flex-row items-center space-x-2 space-y-0">
 									<FormControl>
 										<Switch
 											checked={field.value}
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
+									<FormLabel>Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>

apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx

@@ -274,7 +274,10 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 												</Button>
 											</FormControl>
 										</PopoverTrigger>
-										<PopoverContent className="p-0" align="start">
+										<PopoverContent
+											className="w-[var(--radix-popover-trigger-width)] p-0"
+											align="start"
+										>
 											<Command>
 												<CommandInput
 													placeholder="Search repository..."
@@ -312,8 +315,10 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 																		form.setValue("branch", "");
 																	}}
 																>
-																	<span className="flex items-center gap-2">
-																		<span>{repo.name}</span>
+																	<span className="flex min-w-0 items-center gap-2">
+																		<span className="truncate">
+																			{repo.name}
+																		</span>
 																		<span className="text-muted-foreground text-xs">
 																			{repo.owner.username}
 																		</span>
@@ -370,7 +375,10 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 												</Button>
 											</FormControl>
 										</PopoverTrigger>
-										<PopoverContent className="p-0" align="start">
+										<PopoverContent
+											className="w-[var(--radix-popover-trigger-width)] p-0"
+											align="start"
+										>
 											<Command>
 												<CommandInput
 													placeholder="Search branch..."
@@ -398,7 +406,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 																	form.setValue("branch", branch.name);
 																}}
 															>
-																{branch.name}
+																<span className="truncate">{branch.name}</span>
 																<CheckIcon
 																	className={cn(
 																		"ml-auto h-4 w-4",
@@ -460,14 +468,18 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 										{field.value?.map((path, index) => (
 											<Badge key={index} variant="secondary">
 												{path}
-												<X
-													className="ml-1 size-3 cursor-pointer"
+												<button
+													type="button"
+													aria-label="Remove watch path"
+													className="inline-flex items-center focus-visible:ring-2"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
 														form.setValue("watchPaths", newPaths);
 													}}
-												/>
+												>
+													<X className="ml-1 size-3 cursor-pointer" />
+												</button>
 											</Badge>
 										))}
 									</div>
@@ -515,14 +527,14 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 							control={form.control}
 							name="enableSubmodules"
 							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
+								<FormItem className="flex flex-row items-center space-x-2 space-y-0">
 									<FormControl>
 										<Switch
 											checked={field.value}
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
+									<FormLabel>Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>

apps/dokploy/components/dashboard/compose/general/show-converted-compose.tsx

@@ -52,7 +52,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 					Preview Compose
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-6xl max-h-200">
+			<DialogContent className="sm:max-w-6xl max-h-[85vh] flex flex-col">
 				<DialogHeader>
 					<DialogTitle>Converted Compose</DialogTitle>
 					<DialogDescription>
@@ -62,10 +62,6 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
-				<AlertBlock type="info" className="mb-4">
-					Preview your docker-compose file with added domains. Note: At least
-					one domain must be specified for this conversion to take effect.
-				</AlertBlock>
 				{isPending ? (
 					<div className="flex flex-row items-center justify-center min-h-100 border p-4 rounded-md">
 						<Loader2 className="h-8 w-8 text-muted-foreground mb-2 animate-spin" />
@@ -79,7 +75,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 					</div>
 				) : (
 					<>
-						<div className="flex flex-row gap-2 justify-end my-4">
+						<div className="flex flex-row gap-2 justify-end">
 							<Button
 								variant="secondary"
 								isLoading={isPending}
@@ -100,14 +96,15 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 							</Button>
 						</div>
 
-						<pre>
+						<div className="flex-1 min-h-0 overflow-auto rounded-md border">
 							<CodeEditor
 								value={compose || ""}
 								language="yaml"
 								readOnly
-								height="50rem"
+								height="100%"
+								wrapperClassName="h-full"
 							/>
-						</pre>
+						</div>
 					</>
 				)}
 			</DialogContent>

apps/dokploy/components/dashboard/compose/logs/show-stack.tsx

@@ -35,9 +35,14 @@ export const DockerLogs = dynamic(
 interface Props {
 	appName: string;
 	serverId?: string;
+	serviceId?: string;
 }
 
-export const ShowDockerLogsStack = ({ appName, serverId }: Props) => {
+export const ShowDockerLogsStack = ({
+	appName,
+	serverId,
+	serviceId,
+}: Props) => {
 	const [option, setOption] = useState<"swarm" | "native">("native");
 	const [containerId, setContainerId] = useState<string | undefined>();
 
@@ -52,7 +57,7 @@ export const ShowDockerLogsStack = ({ appName, serverId }: Props) => {
 			},
 		);
 
-	const { data: containers, isPending: containersLoading } =
+	const { data, isPending: containersLoading } =
 		api.docker.getContainersByAppNameMatch.useQuery(
 			{
 				appName,
@@ -64,6 +69,8 @@ export const ShowDockerLogsStack = ({ appName, serverId }: Props) => {
 			},
 		);
 
+	const containers = data?.filter((container) => container.containerId);
+
 	useEffect(() => {
 		if (option === "native") {
 			if (containers && containers?.length > 0) {
@@ -167,6 +174,7 @@ export const ShowDockerLogsStack = ({ appName, serverId }: Props) => {
 					serverId={serverId || ""}
 					containerId={containerId || "select-a-container"}
 					runType={option}
+					serviceId={serviceId}
 				/>
 			</CardContent>
 		</Card>

apps/dokploy/components/dashboard/compose/logs/show.tsx

@@ -35,12 +35,14 @@ interface Props {
 	appName: string;
 	serverId?: string;
 	appType: "stack" | "docker-compose";
+	serviceId?: string;
 }
 
 export const ShowDockerLogsCompose = ({
 	appName,
 	appType,
 	serverId,
+	serviceId,
 }: Props) => {
 	const { data, isPending } = api.docker.getContainersByAppNameMatch.useQuery(
 		{
@@ -104,6 +106,7 @@ export const ShowDockerLogsCompose = ({
 					serverId={serverId || ""}
 					containerId={containerId || "select-a-container"}
 					runType="native"
+					serviceId={serviceId}
 				/>
 			</CardContent>
 		</Card>

apps/dokploy/components/dashboard/database/backups/restore-backup.tsx

@@ -316,7 +316,7 @@ export const RestoreBackup = ({
 					Restore Backup
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-lg">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle className="flex items-center">
 						<RotateCcw className="mr-2 size-4" />

apps/dokploy/components/dashboard/docker/files/files-explorer-modal.tsx

@@ -0,0 +1,401 @@
+import {
+	ChevronRight,
+	Download,
+	File,
+	Folder,
+	FolderOpen,
+	Loader2,
+	RefreshCw,
+	Trash2,
+} from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { api } from "@/utils/api";
+
+type Props = {
+	serverId?: string;
+	children?: React.ReactNode;
+	asDropdownItem?: boolean;
+} & (
+	| { containerId: string; volumeName?: undefined }
+	| { volumeName: string; containerId?: undefined }
+);
+
+const joinPath = (base: string, name: string) =>
+	base === "/" ? `/${name}` : `${base}/${name}`;
+
+const decodeBase64 = (base64: string) => {
+	const binary = atob(base64);
+	const bytes = new Uint8Array(binary.length);
+	for (let i = 0; i < binary.length; i++) {
+		bytes[i] = binary.charCodeAt(i);
+	}
+	return bytes;
+};
+
+export const FilesExplorerModal = ({
+	containerId,
+	volumeName,
+	serverId,
+	children,
+	asDropdownItem = true,
+}: Props) => {
+	const [open, setOpen] = useState(false);
+	const [path, setPath] = useState("/");
+	const [selectedFile, setSelectedFile] = useState<string | null>(null);
+	const [editorContent, setEditorContent] = useState("");
+
+	const isVolume = !!volumeName;
+	const utils = api.useUtils();
+
+	const containerEntries = api.docker.listContainerFiles.useQuery(
+		{ containerId: containerId ?? "", path, serverId },
+		{ enabled: open && !isVolume, retry: false },
+	);
+	const volumeEntries = api.dockerVolume.listVolumeFiles.useQuery(
+		{ volumeName: volumeName ?? "", path, serverId },
+		{ enabled: open && isVolume, retry: false },
+	);
+	const {
+		data: entries,
+		isLoading: isLoadingEntries,
+		error: entriesError,
+		refetch: refetchEntries,
+		isRefetching,
+	} = isVolume ? volumeEntries : containerEntries;
+
+	const containerFile = api.docker.readContainerFile.useQuery(
+		{ containerId: containerId ?? "", path: selectedFile ?? "/", serverId },
+		{ enabled: open && !isVolume && !!selectedFile, retry: false },
+	);
+	const volumeFile = api.dockerVolume.readVolumeFile.useQuery(
+		{ volumeName: volumeName ?? "", path: selectedFile ?? "/", serverId },
+		{ enabled: open && isVolume && !!selectedFile, retry: false },
+	);
+	const {
+		data: file,
+		isLoading: isLoadingFile,
+		error: fileError,
+		refetch: refetchFile,
+	} = isVolume ? volumeFile : containerFile;
+
+	const fileBytes = useMemo(
+		() => (file ? decodeBase64(file.content) : null),
+		[file],
+	);
+	const isBinary = useMemo(
+		() => !!fileBytes?.some((byte) => byte === 0),
+		[fileBytes],
+	);
+
+	useEffect(() => {
+		if (fileBytes && !isBinary) {
+			setEditorContent(new TextDecoder().decode(fileBytes));
+		}
+	}, [fileBytes, isBinary]);
+
+	const writeContainerFile = api.docker.writeContainerFile.useMutation();
+	const writeVolumeFile = api.dockerVolume.writeVolumeFile.useMutation();
+	const deleteContainerFile = api.docker.deleteContainerFile.useMutation();
+	const deleteVolumeFile = api.dockerVolume.deleteVolumeFile.useMutation();
+
+	const isSaving = writeContainerFile.isPending || writeVolumeFile.isPending;
+	const isDeleting =
+		deleteContainerFile.isPending || deleteVolumeFile.isPending;
+
+	const saveFile = async () => {
+		if (!selectedFile) return;
+		try {
+			if (isVolume) {
+				await writeVolumeFile.mutateAsync({
+					volumeName,
+					path: selectedFile,
+					content: editorContent,
+					serverId,
+				});
+			} else {
+				await writeContainerFile.mutateAsync({
+					containerId: containerId ?? "",
+					path: selectedFile,
+					content: editorContent,
+					serverId,
+				});
+			}
+			toast.success("File saved");
+			refetchFile();
+		} catch (error) {
+			toast.error(
+				error instanceof Error ? error.message : "Failed to save file",
+			);
+		}
+	};
+
+	const deleteEntry = async (entryPath: string) => {
+		try {
+			if (isVolume) {
+				await deleteVolumeFile.mutateAsync({
+					volumeName,
+					path: entryPath,
+					serverId,
+				});
+				await utils.dockerVolume.listVolumeFiles.invalidate();
+			} else {
+				await deleteContainerFile.mutateAsync({
+					containerId: containerId ?? "",
+					path: entryPath,
+					serverId,
+				});
+				await utils.docker.listContainerFiles.invalidate();
+			}
+			toast.success("Deleted");
+			if (selectedFile === entryPath) {
+				setSelectedFile(null);
+			}
+		} catch (error) {
+			toast.error(error instanceof Error ? error.message : "Failed to delete");
+		}
+	};
+
+	const breadcrumbs = path.split("/").filter(Boolean);
+
+	const navigate = (nextPath: string) => {
+		setPath(nextPath);
+		setSelectedFile(null);
+	};
+
+	const handleOpenChange = (value: boolean) => {
+		setOpen(value);
+		if (!value) {
+			setPath("/");
+			setSelectedFile(null);
+			setEditorContent("");
+		}
+	};
+
+	const downloadFile = () => {
+		if (!fileBytes || !selectedFile) return;
+		const blob = new Blob([fileBytes]);
+		const url = URL.createObjectURL(blob);
+		const anchor = document.createElement("a");
+		anchor.href = url;
+		anchor.download = selectedFile.split("/").pop() ?? "file";
+		anchor.click();
+		URL.revokeObjectURL(url);
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={handleOpenChange}>
+			<DialogTrigger asChild>
+				{asDropdownItem ? (
+					<DropdownMenuItem
+						className="w-full cursor-pointer space-x-3"
+						onSelect={(e) => e.preventDefault()}
+					>
+						{children}
+					</DropdownMenuItem>
+				) : (
+					children
+				)}
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-6xl">
+				<DialogHeader>
+					<DialogTitle className="flex items-center gap-2">
+						<FolderOpen className="size-5" />
+						{isVolume ? "Volume Files" : "Container Files"}
+					</DialogTitle>
+					<DialogDescription>
+						{isVolume
+							? `Browse and edit files inside the "${volumeName}" volume`
+							: "Browse and edit files inside the container's filesystem"}
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="flex items-center gap-1 text-sm font-mono flex-wrap">
+					<button
+						type="button"
+						className="hover:underline text-muted-foreground"
+						onClick={() => navigate("/")}
+					>
+						/
+					</button>
+					{breadcrumbs.map((segment, index) => (
+						<span
+							key={`/${breadcrumbs.slice(0, index + 1).join("/")}`}
+							className="flex items-center gap-1"
+						>
+							<button
+								type="button"
+								className="hover:underline text-muted-foreground"
+								onClick={() =>
+									navigate(`/${breadcrumbs.slice(0, index + 1).join("/")}`)
+								}
+							>
+								{segment}
+							</button>
+							{index < breadcrumbs.length - 1 && (
+								<ChevronRight className="size-3 text-muted-foreground" />
+							)}
+						</span>
+					))}
+					<Button
+						variant="ghost"
+						size="icon"
+						className="ml-auto size-7"
+						onClick={() => refetchEntries()}
+					>
+						<RefreshCw
+							className={`size-4 ${isRefetching ? "animate-spin" : ""}`}
+						/>
+					</Button>
+				</div>
+
+				<div className="flex gap-4 min-h-[55vh] max-h-[65vh]">
+					<div className="w-72 shrink-0 border rounded-lg overflow-y-auto">
+						{isLoadingEntries ? (
+							<div className="flex h-full items-center justify-center gap-2 text-sm text-muted-foreground p-4">
+								<span>Loading...</span>
+								<Loader2 className="animate-spin size-4" />
+							</div>
+						) : entriesError ? (
+							<div className="p-3">
+								<AlertBlock type="error">{entriesError.message}</AlertBlock>
+							</div>
+						) : (
+							<div className="flex flex-col p-1">
+								{path !== "/" && (
+									<button
+										type="button"
+										className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-muted text-left"
+										onClick={() =>
+											navigate(`/${breadcrumbs.slice(0, -1).join("/")}` || "/")
+										}
+									>
+										<Folder className="size-4 shrink-0 text-muted-foreground" />
+										..
+									</button>
+								)}
+								{entries?.length === 0 && (
+									<span className="px-2 py-1.5 text-sm text-muted-foreground">
+										Empty directory
+									</span>
+								)}
+								{entries?.map((entry) => {
+									const entryPath = joinPath(path, entry.name);
+									return (
+										<div
+											key={entry.name}
+											className={`group flex items-center rounded-md hover:bg-muted ${
+												selectedFile === entryPath ? "bg-muted" : ""
+											}`}
+										>
+											<button
+												type="button"
+												className="flex flex-1 items-center gap-2 px-2 py-1.5 text-sm text-left min-w-0"
+												onClick={() =>
+													entry.isDirectory
+														? navigate(entryPath)
+														: setSelectedFile(entryPath)
+												}
+											>
+												{entry.isDirectory ? (
+													<Folder className="size-4 shrink-0 text-muted-foreground" />
+												) : (
+													<File className="size-4 shrink-0 text-muted-foreground" />
+												)}
+												<span className="truncate">{entry.name}</span>
+											</button>
+											<DialogAction
+												title={`Delete ${entry.name}?`}
+												description={`This will permanently delete ${entryPath}${entry.isDirectory ? " and all its contents" : ""}.`}
+												onClick={() => deleteEntry(entryPath)}
+											>
+												<Button
+													variant="ghost"
+													size="icon"
+													className="size-7 opacity-0 group-hover:opacity-100 shrink-0"
+													isLoading={isDeleting}
+												>
+													<Trash2 className="size-3.5 text-destructive" />
+												</Button>
+											</DialogAction>
+										</div>
+									);
+								})}
+							</div>
+						)}
+					</div>
+
+					<div className="flex-1 min-w-0 flex flex-col gap-2">
+						{!selectedFile ? (
+							<div className="flex flex-1 items-center justify-center rounded-lg border border-dashed text-sm text-muted-foreground">
+								Select a file to view or edit it
+							</div>
+						) : isLoadingFile ? (
+							<div className="flex flex-1 items-center justify-center gap-2 text-sm text-muted-foreground rounded-lg border">
+								<span>Loading...</span>
+								<Loader2 className="animate-spin size-4" />
+							</div>
+						) : fileError ? (
+							<AlertBlock type="error">{fileError.message}</AlertBlock>
+						) : (
+							<>
+								<div className="flex items-center gap-2">
+									<span className="text-sm font-mono truncate text-muted-foreground">
+										{selectedFile}
+									</span>
+									<div className="ml-auto flex items-center gap-2">
+										<Button variant="outline" size="sm" onClick={downloadFile}>
+											<Download className="size-4" />
+											Download
+										</Button>
+										<Button
+											size="sm"
+											isLoading={isSaving}
+											disabled={isBinary || file?.truncated}
+											onClick={saveFile}
+										>
+											Save
+										</Button>
+									</div>
+								</div>
+								{file?.truncated ? (
+									<AlertBlock type="warning">
+										This file is larger than 512KB. Showing a truncated preview;
+										editing is disabled. Use Download to get the truncated
+										content or the terminal for full access.
+									</AlertBlock>
+								) : isBinary ? (
+									<div className="flex flex-1 items-center justify-center rounded-lg border border-dashed text-sm text-muted-foreground">
+										Binary file — use Download instead
+									</div>
+								) : (
+									<div className="flex-1 overflow-auto rounded-lg border">
+										<CodeEditor
+											lineWrapping
+											value={editorContent}
+											onChange={(value) => setEditorContent(value)}
+											wrapperClassName="h-full font-mono"
+										/>
+									</div>
+								)}
+							</>
+						)}
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx

@@ -23,6 +23,7 @@ interface Props {
 	containerId: string;
 	serverId?: string | null;
 	runType: "swarm" | "native";
+	serviceId?: string;
 }
 
 export const priorities = [
@@ -52,6 +53,7 @@ export const DockerLogsId: React.FC<Props> = ({
 	containerId,
 	serverId,
 	runType,
+	serviceId,
 }) => {
 	const { data } = api.docker.getConfig.useQuery(
 		{
@@ -157,6 +159,10 @@ export const DockerLogsId: React.FC<Props> = ({
 			params.append("serverId", serverId);
 		}
 
+		if (serviceId) {
+			params.append("serviceId", serviceId);
+		}
+
 		const wsUrl = `${protocol}//${
 			window.location.host
 		}/docker-container-logs?${params.toString()}`;
@@ -222,7 +228,7 @@ export const DockerLogsId: React.FC<Props> = ({
 				ws.close();
 			}
 		};
-	}, [containerId, serverId, lines, search, since]);
+	}, [containerId, serverId, serviceId, lines, search, since]);
 
 	const handleDownload = () => {
 		const logContent = filteredLogs

apps/dokploy/components/dashboard/docker/logs/utils.ts

@@ -72,8 +72,68 @@ export function parseLogs(logString: string): LogLine[] {
 		.filter((log) => log !== null);
 }
 
+const LEVEL_NAME_TO_TYPE: Record<string, LogType> = {
+	trace: "debug",
+	debug: "debug",
+	info: "info",
+	information: "info",
+	notice: "info",
+	warn: "warning",
+	warning: "warning",
+	error: "error",
+	err: "error",
+	fatal: "error",
+	critical: "error",
+	panic: "error",
+	alert: "error",
+	emergency: "error",
+};
+
+const numericLevelToType = (level: number): LogType => {
+	// pino/bunyan scale: 10=trace 20=debug 30=info 40=warn 50=error 60=fatal
+	if (level >= 50) return "error";
+	if (level >= 40) return "warning";
+	if (level >= 30) return "info";
+	if (level >= 10) return "debug";
+	// syslog/GELF scale: 0=emergency ... 7=debug
+	if (level <= 3) return "error";
+	if (level === 4) return "warning";
+	if (level <= 6) return "info";
+	return "debug";
+};
+
+// Extract the log level explicitly declared by structured loggers
+// (pino, bunyan, winston, zap, slog, logfmt, GCP severity)
+const getExplicitLevelType = (message: string): LogType | null => {
+	// JSON string levels: {"level":"error"} / {"severity":"ERROR"} / {"log.level":"warn"}
+	const jsonStringMatch = message.match(
+		/"(?:level|severity|log\.level|loglevel)"\s*:\s*"([a-z]+)"/i,
+	);
+	if (jsonStringMatch?.[1]) {
+		return LEVEL_NAME_TO_TYPE[jsonStringMatch[1].toLowerCase()] ?? null;
+	}
+
+	// JSON numeric levels: {"level":50}
+	const jsonNumericMatch = message.match(/"level"\s*:\s*(\d{1,2})\b/);
+	if (jsonNumericMatch?.[1]) {
+		return numericLevelToType(Number(jsonNumericMatch[1]));
+	}
+
+	// logfmt: level=error
+	const logfmtMatch = message.match(/(?:^|\s)(?:level|severity)=([a-z]+)\b/i);
+	if (logfmtMatch?.[1]) {
+		return LEVEL_NAME_TO_TYPE[logfmtMatch[1].toLowerCase()] ?? null;
+	}
+
+	return null;
+};
+
 // Detect log type based on message content
 export const getLogType = (message: string): LogStyle => {
+	// A level explicitly declared by the logger wins over any inference
+	const explicitType = getExplicitLevelType(message);
+	if (explicitType) return LOG_STYLES[explicitType];
+
 	// Detect HTTP statusCode
 	const statusMatch = message.match(/"statusCode"\s*:\s*"?(\d{3})"?/);
 
@@ -97,17 +157,27 @@ export const getLogType = (message: string): LogStyle => {
 		return LOG_STYLES.info;
 	}
 
+	// Key/value pairs that explicitly report a non-error (e.g. "error: none",
+	// "failed: false") must not trigger the error keyword patterns below
+	const nonErrorColonPairs =
+		/\b(?:error|err|errors|failed|failure|failures)\s*:\s*(?:none|null|nil|false|0|no|-|""|'')(?=[,;.)\]]|$)/gi;
+	const nonErrorLogfmtPairs =
+		/\b(?:error|err|errors|failed|failure|failures)\s*=\s*(?:none|null|nil|false|0|no|-|""|'')(?=[\s,;.)\]]|$)/gi;
+	const errorScope = lowerMessage
+		.replace(nonErrorColonPairs, "")
+		.replace(nonErrorLogfmtPairs, "");
+
 	if (
-		/(?:^|\s)(?:error|err):?\s/i.test(lowerMessage) ||
-		/\b(?:exception|failed|failure)\b/i.test(lowerMessage) ||
-		/(?:stack\s?trace):\s*$/i.test(lowerMessage) ||
-		/^\s*at\s+[\w.]+\s*\(?.+:\d+:\d+\)?/.test(lowerMessage) ||
-		/\b(?:uncaught|unhandled)\s+(?:exception|error)\b/i.test(lowerMessage) ||
-		/Error:\s.*(?:in|at)\s+.*:\d+(?::\d+)?/.test(lowerMessage) ||
-		/\b(?:errno|code):\s*(?:\d+|[A-Z_]+)\b/i.test(lowerMessage) ||
-		/\[(?:error|err|fatal)\]/i.test(lowerMessage) ||
-		/\b(?:crash|critical|fatal)\b/i.test(lowerMessage) ||
-		/\b(?:fail(?:ed|ure)?|broken|dead)\b/i.test(lowerMessage)
+		/(?:^|\s)(?:error|err):?\s/i.test(errorScope) ||
+		/\b(?:exception|failed|failure)\b/i.test(errorScope) ||
+		/(?:stack\s?trace):\s*$/i.test(errorScope) ||
+		/^\s*at\s+[\w.]+\s*\(?.+:\d+:\d+\)?/.test(errorScope) ||
+		/\b(?:uncaught|unhandled)\s+(?:exception|error)\b/i.test(errorScope) ||
+		/Error:\s.*(?:in|at)\s+.*:\d+(?::\d+)?/.test(errorScope) ||
+		/\b(?:errno|code):\s*(?:\d+|[A-Z_]+)\b/i.test(errorScope) ||
+		/\[(?:error|err|fatal)\]/i.test(errorScope) ||
+		/\b(?:crash|critical|fatal)\b/i.test(errorScope) ||
+		/\b(?:fail(?:ed|ure)?|broken|dead)\b/i.test(errorScope)
 	) {
 		return LOG_STYLES.error;
 	}

apps/dokploy/components/dashboard/docker/show/columns.tsx

@@ -12,6 +12,7 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { ShowContainerConfig } from "../config/show-container-config";
+import { FilesExplorerModal } from "../files/files-explorer-modal";
 import { ShowDockerModalLogs } from "../logs/show-docker-modal-logs";
 import { ShowContainerMounts } from "../mounts/show-container-mounts";
 import { ShowContainerNetworks } from "../networks/show-container-networks";
@@ -173,6 +174,12 @@ export const columns: ColumnDef<Container>[] = [
 						>
 							Terminal
 						</DockerTerminalModal>
+						<FilesExplorerModal
+							containerId={container.containerId}
+							serverId={container.serverId || undefined}
+						>
+							Browse Files
+						</FilesExplorerModal>
 						<UploadFileModal
 							containerId={container.containerId}
 							serverId={container.serverId || undefined}

apps/dokploy/components/dashboard/docker/terminal/docker-terminal-modal.tsx

@@ -23,12 +23,14 @@ interface Props {
 	containerId: string;
 	serverId?: string;
 	children?: React.ReactNode;
+	serviceId?: string;
 }
 
 export const DockerTerminalModal = ({
 	children,
 	containerId,
 	serverId,
+	serviceId,
 }: Props) => {
 	const [mainDialogOpen, setMainDialogOpen] = useState(false);
 	const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
@@ -74,6 +76,7 @@ export const DockerTerminalModal = ({
 					id="terminal"
 					containerId={containerId}
 					serverId={serverId || ""}
+					serviceId={serviceId}
 				/>
 				<Dialog open={confirmDialogOpen} onOpenChange={setConfirmDialogOpen}>
 					<DialogContent onEscapeKeyDown={(event) => event.preventDefault()}>

apps/dokploy/components/dashboard/docker/terminal/docker-terminal.tsx

@@ -5,17 +5,20 @@ import "@xterm/xterm/css/xterm.css";
 import { AttachAddon } from "@xterm/addon-attach";
 import { useTheme } from "next-themes";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { fixMacOsAltKeys } from "@/lib/terminal-keyboard";
 
 interface Props {
 	id: string;
 	containerId?: string;
 	serverId?: string;
+	serviceId?: string;
 }
 
 export const DockerTerminal: React.FC<Props> = ({
 	id,
 	containerId,
 	serverId,
+	serviceId,
 }) => {
 	const termRef = useRef(null);
 	const [activeWay, setActiveWay] = React.useState<string | undefined>("bash");
@@ -38,11 +41,12 @@ export const DockerTerminal: React.FC<Props> = ({
 		const addonFit = new FitAddon();
 		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
 
-		const wsUrl = `${protocol}//${window.location.host}/docker-container-terminal?containerId=${containerId}&activeWay=${activeWay}${serverId ? `&serverId=${serverId}` : ""}`;
+		const wsUrl = `${protocol}//${window.location.host}/docker-container-terminal?containerId=${containerId}&activeWay=${activeWay}${serverId ? `&serverId=${serverId}` : ""}${serviceId ? `&serviceId=${serviceId}` : ""}`;
 
 		const ws = new WebSocket(wsUrl);
 
 		const addonAttach = new AttachAddon(ws);
+		fixMacOsAltKeys(term);
 		// @ts-ignore
 		term.open(termRef.current);
 		// @ts-ignore

apps/dokploy/components/dashboard/docker/volumes/show-volumes.tsx

@@ -0,0 +1,434 @@
+"use client";
+
+import {
+	type ColumnDef,
+	flexRender,
+	getCoreRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	type PaginationState,
+	type SortingState,
+	useReactTable,
+} from "@tanstack/react-table";
+import type { inferRouterOutputs } from "@trpc/server";
+import {
+	ArrowUpDown,
+	Eye,
+	FolderOpen,
+	HardDrive,
+	Loader2,
+	Trash2,
+} from "lucide-react";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import { FilesExplorerModal } from "@/components/dashboard/docker/files/files-explorer-modal";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import type { AppRouter } from "@/server/api/root";
+import { api } from "@/utils/api";
+
+type VolumeRow =
+	inferRouterOutputs<AppRouter>["dockerVolume"]["getVolumes"][number];
+
+interface Props {
+	serverId?: string;
+}
+
+const SIZE_UNITS: Record<string, number> = {
+	b: 1,
+	kb: 1e3,
+	mb: 1e6,
+	gb: 1e9,
+	tb: 1e12,
+};
+
+const parseSize = (size?: string) => {
+	if (!size) return -1;
+	const match = /^([\d.]+)\s*([a-zA-Z]+)$/.exec(size.trim());
+	if (!match?.[1] || !match[2]) return -1;
+	return Number(match[1]) * (SIZE_UNITS[match[2].toLowerCase()] ?? 1);
+};
+
+const SortableHeader = ({
+	column,
+	title,
+}: {
+	column: {
+		getIsSorted: () => false | "asc" | "desc";
+		toggleSorting: (asc: boolean) => void;
+	};
+	title: string;
+}) => (
+	<Button
+		variant="ghost"
+		className="-ml-3 h-8"
+		onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+	>
+		{title}
+		<ArrowUpDown className="ml-2 size-4" />
+	</Button>
+);
+
+const ShowVolumeConfig = ({
+	volumeName,
+	serverId,
+}: {
+	volumeName: string;
+	serverId?: string;
+}) => {
+	const [open, setOpen] = useState(false);
+	const { data, isLoading, error } = api.dockerVolume.getVolumeConfig.useQuery(
+		{ volumeName, serverId },
+		{ enabled: open },
+	);
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button variant="ghost" size="icon-sm" aria-label="View volume config">
+					<Eye className="size-4" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="w-full md:w-[70vw] min-w-[70vw]">
+				<DialogHeader>
+					<DialogTitle>Volume Config</DialogTitle>
+					<DialogDescription>
+						docker volume inspect output for "{volumeName}"
+					</DialogDescription>
+				</DialogHeader>
+				{error ? (
+					<AlertBlock type="error">{error.message}</AlertBlock>
+				) : isLoading ? (
+					<div className="flex flex-row gap-2 items-center justify-center py-10 text-sm text-muted-foreground">
+						<span>Loading...</span>
+						<Loader2 className="animate-spin size-4" />
+					</div>
+				) : (
+					<div className="text-wrap rounded-lg border p-4 overflow-y-auto text-sm bg-card max-h-[80vh]">
+						<code>
+							<pre className="whitespace-pre-wrap wrap-break-word">
+								<CodeEditor
+									language="json"
+									lineWrapping
+									lineNumbers={false}
+									readOnly
+									value={JSON.stringify(data, null, 2)}
+								/>
+							</pre>
+						</code>
+					</div>
+				)}
+			</DialogContent>
+		</Dialog>
+	);
+};
+
+export const ShowVolumes = ({ serverId }: Props) => {
+	const utils = api.useUtils();
+	const [sorting, setSorting] = useState<SortingState>([
+		{ id: "Name", desc: false },
+	]);
+	const [globalFilter, setGlobalFilter] = useState("");
+	const [pagination, setPagination] = useState<PaginationState>({
+		pageIndex: 0,
+		pageSize: 10,
+	});
+
+	const { data: volumes, isLoading } = api.dockerVolume.getVolumes.useQuery({
+		serverId,
+	});
+	const { data: sizes, isLoading: isLoadingSizes } =
+		api.dockerVolume.getVolumesSize.useQuery({ serverId });
+
+	const sizeByName = useMemo(
+		() => new Map((sizes ?? []).map((entry) => [entry.name, entry.size])),
+		[sizes],
+	);
+	const { mutateAsync: removeVolume } =
+		api.dockerVolume.removeVolume.useMutation();
+
+	const filteredData = useMemo(() => {
+		const list = volumes ?? [];
+		if (!globalFilter.trim()) {
+			return list;
+		}
+		const query = globalFilter.toLowerCase();
+		return list.filter((volume) => volume.Name.toLowerCase().includes(query));
+	}, [volumes, globalFilter]);
+
+	const columns = useMemo<ColumnDef<VolumeRow>[]>(
+		() => [
+			{
+				accessorKey: "Name",
+				header: ({ column }) => <SortableHeader column={column} title="Name" />,
+				cell: ({ row }) => (
+					<div
+						className="max-w-[280px] truncate font-medium"
+						title={row.original.Name}
+					>
+						{row.original.Name}
+					</div>
+				),
+			},
+			{
+				accessorKey: "Driver",
+				header: ({ column }) => (
+					<SortableHeader column={column} title="Driver" />
+				),
+				cell: ({ row }) => (
+					<Badge variant="outline">{row.original.Driver}</Badge>
+				),
+			},
+			{
+				accessorKey: "Scope",
+				header: ({ column }) => (
+					<SortableHeader column={column} title="Scope" />
+				),
+				cell: ({ row }) => (
+					<span className="text-muted-foreground">{row.original.Scope}</span>
+				),
+			},
+			{
+				id: "Size",
+				header: ({ column }) => <SortableHeader column={column} title="Size" />,
+				sortingFn: (a, b) =>
+					parseSize(sizeByName.get(a.original.Name) ?? undefined) -
+					parseSize(sizeByName.get(b.original.Name) ?? undefined),
+				cell: ({ row }) =>
+					isLoadingSizes ? (
+						<Loader2 className="size-3.5 animate-spin text-muted-foreground" />
+					) : (
+						<span className="text-muted-foreground">
+							{sizeByName.get(row.original.Name) ?? "-"}
+						</span>
+					),
+			},
+			{
+				accessorKey: "Mountpoint",
+				header: ({ column }) => (
+					<SortableHeader column={column} title="Mountpoint" />
+				),
+				cell: ({ row }) => (
+					<div
+						className="max-w-[320px] truncate font-mono text-xs text-muted-foreground"
+						title={row.original.Mountpoint}
+					>
+						{row.original.Mountpoint}
+					</div>
+				),
+			},
+			{
+				id: "actions",
+				enableSorting: false,
+				header: () => <div className="text-right">Actions</div>,
+				cell: ({ row }) => (
+					<div className="flex items-center justify-end gap-3">
+						<FilesExplorerModal
+							volumeName={row.original.Name}
+							serverId={serverId}
+							asDropdownItem={false}
+						>
+							<Button
+								variant="ghost"
+								size="icon-sm"
+								aria-label="Browse volume files"
+							>
+								<FolderOpen className="size-4" />
+							</Button>
+						</FilesExplorerModal>
+						<ShowVolumeConfig
+							volumeName={row.original.Name}
+							serverId={serverId}
+						/>
+						<DialogAction
+							title="Delete volume"
+							description={`The volume "${row.original.Name}" will be removed from Docker. This action cannot be undone.`}
+							onClick={async () => {
+								try {
+									await removeVolume({
+										volumeName: row.original.Name,
+										serverId,
+									});
+									toast.success("Volume deleted");
+									await utils.dockerVolume.getVolumes.invalidate();
+								} catch (error) {
+									toast.error("Error deleting volume", {
+										description:
+											error instanceof Error ? error.message : "Unknown error",
+									});
+								}
+							}}
+						>
+							<Button variant="ghost" size="icon-sm" aria-label="Delete volume">
+								<Trash2 className="size-4 text-destructive" />
+							</Button>
+						</DialogAction>
+					</div>
+				),
+			},
+		],
+		[serverId, removeVolume, utils, sizeByName, isLoadingSizes],
+	);
+
+	const table = useReactTable({
+		data: filteredData,
+		columns,
+		state: {
+			sorting,
+			pagination,
+		},
+		onSortingChange: setSorting,
+		onPaginationChange: setPagination,
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+	});
+
+	return (
+		<div className="w-full">
+			<Card className="h-full bg-sidebar p-2.5 rounded-xl">
+				<div className="rounded-xl bg-background shadow-md ">
+					<CardHeader className="">
+						<CardTitle className="text-xl flex flex-row gap-2">
+							<HardDrive className="size-6 text-muted-foreground self-center" />
+							Volumes
+						</CardTitle>
+						<CardDescription>
+							Manage the Docker volumes of the selected server.
+						</CardDescription>
+					</CardHeader>
+
+					<CardContent className="space-y-4 py-8 border-t">
+						{isLoading ? (
+							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[45vh]">
+								<span>Loading...</span>
+								<Loader2 className="animate-spin size-4" />
+							</div>
+						) : !volumes?.length ? (
+							<div className="flex min-h-[45vh] w-full flex-col items-center justify-center gap-4 rounded-lg border border-dashed p-8">
+								<div className="rounded-full bg-muted p-4">
+									<HardDrive className="size-10 text-muted-foreground" />
+								</div>
+								<div className="space-y-1 text-center">
+									<p className="text-sm font-medium">No volumes found</p>
+									<p className="max-w-sm text-sm text-muted-foreground">
+										Docker volumes created on this server will appear here.
+									</p>
+								</div>
+							</div>
+						) : (
+							<>
+								<div className="flex flex-wrap items-center gap-2">
+									<Input
+										placeholder="Search by name..."
+										value={globalFilter}
+										onChange={(e) => setGlobalFilter(e.target.value)}
+										className="max-w-xs"
+									/>
+								</div>
+								<div className="rounded-md border overflow-x-auto">
+									<Table>
+										<TableHeader>
+											{table.getHeaderGroups().map((headerGroup) => (
+												<TableRow key={headerGroup.id}>
+													{headerGroup.headers.map((header) => (
+														<TableHead key={header.id}>
+															{header.isPlaceholder
+																? null
+																: flexRender(
+																		header.column.columnDef.header,
+																		header.getContext(),
+																	)}
+														</TableHead>
+													))}
+												</TableRow>
+											))}
+										</TableHeader>
+										<TableBody>
+											{table.getRowModel().rows?.length ? (
+												table.getRowModel().rows.map((row) => (
+													<TableRow key={row.id}>
+														{row.getVisibleCells().map((cell) => (
+															<TableCell key={cell.id}>
+																{flexRender(
+																	cell.column.columnDef.cell,
+																	cell.getContext(),
+																)}
+															</TableCell>
+														))}
+													</TableRow>
+												))
+											) : (
+												<TableRow>
+													<TableCell
+														colSpan={columns.length}
+														className="h-24 text-center text-muted-foreground"
+													>
+														No volumes match your filters.
+													</TableCell>
+												</TableRow>
+											)}
+										</TableBody>
+									</Table>
+								</div>
+								{table.getPageCount() > 1 && (
+									<div className="flex items-center justify-end gap-4">
+										<span className="text-sm text-muted-foreground">
+											Page {table.getState().pagination.pageIndex + 1} of{" "}
+											{table.getPageCount()}
+										</span>
+										<div className="flex gap-2">
+											<Button
+												variant="outline"
+												size="sm"
+												onClick={() => table.previousPage()}
+												disabled={!table.getCanPreviousPage()}
+											>
+												Previous
+											</Button>
+											<Button
+												variant="outline"
+												size="sm"
+												onClick={() => table.nextPage()}
+												disabled={!table.getCanNextPage()}
+											>
+												Next
+											</Button>
+										</div>
+									</div>
+								)}
+							</>
+						)}
+					</CardContent>
+				</div>
+			</Card>
+		</div>
+	);
+};

apps/dokploy/components/dashboard/libsql/general/show-general-libsql.tsx

@@ -229,6 +229,7 @@ export const ShowGeneralLibsql = ({ libsqlId }: Props) => {
 						)}
 						<DockerTerminalModal
 							appName={data?.appName || ""}
+							serviceId={data?.libsqlId}
 							serverId={data?.serverId || ""}
 						>
 							<Button

apps/dokploy/components/dashboard/mariadb/general/show-general-mariadb.tsx

@@ -236,6 +236,7 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 							))}
 						<DockerTerminalModal
 							appName={data?.appName || ""}
+							serviceId={data?.mariadbId}
 							serverId={data?.serverId || ""}
 						>
 							<Button

apps/dokploy/components/dashboard/mongo/general/show-general-mongo.tsx

@@ -230,6 +230,7 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
 						</TooltipProvider>
 						<DockerTerminalModal
 							appName={data?.appName || ""}
+							serviceId={data?.mongoId}
 							serverId={data?.serverId || ""}
 						>
 							<Button

apps/dokploy/components/dashboard/monitoring/free/container/docker-block-chart.tsx

@@ -1,3 +1,4 @@
+import { formatMb, toMb } from "@dokploy/server/monitoring/units";
 import { format } from "date-fns";
 import { Area, AreaChart, CartesianGrid, YAxis } from "recharts";
 import {
@@ -29,8 +30,8 @@ export const DockerBlockChart = ({ accumulativeData }: Props) => {
 	const transformedData = accumulativeData.map((item, index) => ({
 		time: item.time,
 		name: `Point ${index + 1}`,
-		readMb: item.value.readMb,
-		writeMb: item.value.writeMb,
+		readMb: toMb(item.value.readMb),
+		writeMb: toMb(item.value.writeMb),
 	}));
 
 	return (
@@ -77,13 +78,14 @@ export const DockerBlockChart = ({ accumulativeData }: Props) => {
 							}}
 							formatter={(value, name) => {
 								const label = name === "readMb" ? "Read" : "Write";
-								return [`${value} MB`, label];
+								return [formatMb(Number(value)), label];
 							}}
 						/>
 					}
 				/>
 				<Area
 					type="monotone"
+					isAnimationActive={false}
 					dataKey="readMb"
 					stroke="var(--color-readMb)"
 					fill="url(#fillBlockRead)"
@@ -91,6 +93,7 @@ export const DockerBlockChart = ({ accumulativeData }: Props) => {
 				/>
 				<Area
 					type="monotone"
+					isAnimationActive={false}
 					dataKey="writeMb"
 					stroke="var(--color-writeMb)"
 					fill="url(#fillBlockWrite)"

apps/dokploy/components/dashboard/monitoring/free/container/docker-cpu-chart.tsx

@@ -69,6 +69,7 @@ export const DockerCpuChart = ({ accumulativeData }: Props) => {
 				/>
 				<Area
 					type="monotone"
+					isAnimationActive={false}
 					dataKey="usage"
 					stroke="var(--color-usage)"
 					fill="url(#fillCpu)"

apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-chart.tsx

@@ -71,6 +71,7 @@ export const DockerDiskChart = ({ accumulativeData, diskTotal }: Props) => {
 				/>
 				<Area
 					type="monotone"
+					isAnimationActive={false}
 					dataKey="usedGb"
 					stroke="var(--color-usedGb)"
 					fill="url(#fillDiskUsed)"

apps/dokploy/components/dashboard/monitoring/free/container/docker-memory-chart.tsx

@@ -75,6 +75,7 @@ export const DockerMemoryChart = ({
 				/>
 				<Area
 					type="monotone"
+					isAnimationActive={false}
 					dataKey="usage"
 					stroke="var(--color-usage)"
 					fill="url(#fillMemory)"

apps/dokploy/components/dashboard/monitoring/free/container/docker-network-chart.tsx

@@ -1,3 +1,4 @@
+import { formatMb, toMb } from "@dokploy/server/monitoring/units";
 import { format } from "date-fns";
 import { Area, AreaChart, CartesianGrid, YAxis } from "recharts";
 import {
@@ -29,8 +30,8 @@ export const DockerNetworkChart = ({ accumulativeData }: Props) => {
 	const transformedData = accumulativeData.map((item, index) => ({
 		time: item.time,
 		name: `Point ${index + 1}`,
-		inMB: item.value.inputMb,
-		outMB: item.value.outputMb,
+		inMB: toMb(item.value.inputMb),
+		outMB: toMb(item.value.outputMb),
 	}));
 
 	return (
@@ -73,13 +74,14 @@ export const DockerNetworkChart = ({ accumulativeData }: Props) => {
 							}}
 							formatter={(value, name) => {
 								const label = name === "inMB" ? "In" : "Out";
-								return [`${value} MB`, label];
+								return [formatMb(Number(value)), label];
 							}}
 						/>
 					}
 				/>
 				<Area
 					type="monotone"
+					isAnimationActive={false}
 					dataKey="inMB"
 					stroke="var(--color-inMB)"
 					fill="url(#fillNetIn)"
@@ -87,6 +89,7 @@ export const DockerNetworkChart = ({ accumulativeData }: Props) => {
 				/>
 				<Area
 					type="monotone"
+					isAnimationActive={false}
 					dataKey="outMB"
 					stroke="var(--color-outMB)"
 					fill="url(#fillNetOut)"

apps/dokploy/components/dashboard/monitoring/free/container/show-free-container-monitoring.tsx

@@ -1,3 +1,4 @@
+import { formatMb } from "@dokploy/server/monitoring/units";
 import { useEffect, useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
@@ -305,7 +306,7 @@ export const ContainerFreeMonitoring = ({
 					<CardContent>
 						<div className="flex flex-col gap-2 w-full">
 							<span className="text-sm text-muted-foreground">
-								{`Read:  ${currentData.block.value.readMb}  / Write: ${currentData.block.value.writeMb} `}
+								{`Read: ${formatMb(currentData.block.value.readMb)} / Write: ${formatMb(currentData.block.value.writeMb)}`}
 							</span>
 							<DockerBlockChart accumulativeData={accumulativeData.block} />
 						</div>
@@ -318,7 +319,7 @@ export const ContainerFreeMonitoring = ({
 					<CardContent>
 						<div className="flex flex-col gap-2 w-full">
 							<span className="text-sm text-muted-foreground">
-								{`In MB: ${currentData.network.value.inputMb}  / Out MB: ${currentData.network.value.outputMb} `}
+								{`In: ${formatMb(currentData.network.value.inputMb)} / Out: ${formatMb(currentData.network.value.outputMb)}`}
 							</span>
 							<DockerNetworkChart accumulativeData={accumulativeData.network} />
 						</div>

apps/dokploy/components/dashboard/monitoring/paid/container/container-block-chart.tsx

@@ -154,6 +154,7 @@ export const ContainerBlockChart = ({ data }: Props) => {
 							name="Write"
 							dataKey="write"
 							type="monotone"
+							isAnimationActive={false}
 							fill="url(#fillWrite)"
 							stroke="hsl(142, 71%, 45%)"
 							strokeWidth={2}
@@ -163,6 +164,7 @@ export const ContainerBlockChart = ({ data }: Props) => {
 							name="Read"
 							dataKey="read"
 							type="monotone"
+							isAnimationActive={false}
 							fill="url(#fillRead)"
 							stroke="hsl(217, 91%, 60%)"
 							strokeWidth={2}

apps/dokploy/components/dashboard/monitoring/paid/container/container-cpu-chart.tsx

@@ -111,6 +111,7 @@ export const ContainerCPUChart = ({ data }: Props) => {
 							name="CPU"
 							dataKey="cpu"
 							type="monotone"
+							isAnimationActive={false}
 							fill="url(#fillCPU)"
 							stroke="hsl(var(--chart-1))"
 							strokeWidth={2}

apps/dokploy/components/dashboard/monitoring/paid/container/container-memory-chart.tsx

@@ -132,6 +132,7 @@ export const ContainerMemoryChart = ({ data }: Props) => {
 							name="Memory"
 							dataKey="memory"
 							type="monotone"
+							isAnimationActive={false}
 							fill="url(#fillMemory)"
 							stroke="hsl(var(--chart-2))"
 							strokeWidth={2}

apps/dokploy/components/dashboard/monitoring/paid/container/container-network-chart.tsx

@@ -161,6 +161,7 @@ export const ContainerNetworkChart = ({ data }: Props) => {
 							name="Input"
 							dataKey="input"
 							type="monotone"
+							isAnimationActive={false}
 							fill="url(#fillInput)"
 							stroke="hsl(var(--chart-3))"
 							strokeWidth={2}
@@ -169,6 +170,7 @@ export const ContainerNetworkChart = ({ data }: Props) => {
 							name="Output"
 							dataKey="output"
 							type="monotone"
+							isAnimationActive={false}
 							fill="url(#fillOutput)"
 							stroke="hsl(var(--chart-4))"
 							strokeWidth={2}

apps/dokploy/components/dashboard/monitoring/paid/servers/cpu-chart.tsx

@@ -98,6 +98,7 @@ export function CPUChart({ data }: CPUChartProps) {
 							name="CPU"
 							dataKey="cpu"
 							type="monotone"
+							isAnimationActive={false}
 							fill="url(#fillCPU)"
 							stroke="hsl(var(--chart-1))"
 							strokeWidth={2}

apps/dokploy/components/dashboard/monitoring/paid/servers/memory-chart.tsx

@@ -115,6 +115,7 @@ export function MemoryChart({ data }: MemoryChartProps) {
 							yAxisId="left"
 							dataKey="memUsed"
 							type="monotone"
+							isAnimationActive={false}
 							fill="url(#fillMemory)"
 							stroke="hsl(var(--chart-2))"
 							strokeWidth={2}

apps/dokploy/components/dashboard/monitoring/paid/servers/network-chart.tsx

@@ -120,6 +120,7 @@ export function NetworkChart({ data }: NetworkChartProps) {
 							name="Network In"
 							dataKey="networkIn"
 							type="monotone"
+							isAnimationActive={false}
 							fill="url(#fillNetworkIn)"
 							stroke="hsl(var(--chart-3))"
 							strokeWidth={2}
@@ -128,6 +129,7 @@ export function NetworkChart({ data }: NetworkChartProps) {
 							name="Network Out"
 							dataKey="networkOut"
 							type="monotone"
+							isAnimationActive={false}
 							fill="url(#fillNetworkOut)"
 							stroke="hsl(var(--chart-4))"
 							strokeWidth={2}

apps/dokploy/components/dashboard/mysql/general/show-general-mysql.tsx

@@ -228,6 +228,7 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 						</TooltipProvider>
 						<DockerTerminalModal
 							appName={data?.appName || ""}
+							serviceId={data?.mysqlId}
 							serverId={data?.serverId || ""}
 						>
 							<Button

apps/dokploy/components/dashboard/networks/assign-compose-networks.tsx

@@ -0,0 +1,347 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Check, ChevronsUpDown, Loader2, RefreshCw } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+	Command,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "@/components/ui/command";
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+
+interface Props {
+	composeId: string;
+}
+
+const serviceSchema = z.object({
+	serviceName: z.string(),
+	networkIds: z.array(z.string()),
+	detachDokployNetwork: z.boolean(),
+});
+
+const formSchema = z.object({
+	services: z.array(serviceSchema),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+export const AssignComposeNetworks = ({ composeId }: Props) => {
+	const [cacheType, setCacheType] = useState<"cache" | "fetch">("cache");
+
+	const { data: compose } = api.compose.one.useQuery({ composeId });
+	const {
+		data: services,
+		isLoading: isLoadingServices,
+		error: servicesError,
+		refetch: refetchServices,
+		isRefetching: isRefetchingServices,
+	} = api.compose.loadServices.useQuery(
+		{ composeId, type: cacheType },
+		{ retry: false },
+	);
+
+	const onRetry = () => {
+		setCacheType("fetch");
+		setTimeout(() => refetchServices(), 0);
+	};
+
+	const { data: networks } = api.network.all.useQuery(
+		{ serverId: compose?.serverId ?? undefined },
+		{ enabled: compose !== undefined },
+	);
+	const { mutateAsync, isPending } = api.compose.update.useMutation();
+	const utils = api.useUtils();
+
+	const form = useForm<FormValues>({
+		resolver: zodResolver(formSchema),
+		defaultValues: { services: [] },
+	});
+	const { fields } = useFieldArray({
+		control: form.control,
+		name: "services",
+	});
+
+	useEffect(() => {
+		if (!services) return;
+		const serviceNetworks = compose?.serviceNetworks ?? [];
+		form.reset({
+			services: services.map((serviceName) => {
+				const config = serviceNetworks.find(
+					(s) => s.serviceName === serviceName,
+				);
+				return {
+					serviceName,
+					networkIds: config?.networkIds ?? [],
+					detachDokployNetwork: config?.detachDokployNetwork ?? false,
+				};
+			}),
+		});
+	}, [services, compose?.serviceNetworks, form]);
+
+	const allowsBridge = compose?.composeType === "docker-compose";
+	const availableNetworks = (networks ?? []).filter(
+		(n) => allowsBridge || n.driver === "overlay",
+	);
+
+	const onSubmit = async (values: FormValues) => {
+		try {
+			const serviceNetworks = values.services.filter(
+				(s) => s.networkIds.length > 0 || s.detachDokployNetwork,
+			);
+			await mutateAsync({
+				composeId,
+				serviceNetworks,
+			});
+			toast.success("Networks updated. Redeploy the compose to apply them.");
+			await utils.compose.one.invalidate({ composeId });
+		} catch (error) {
+			toast.error("Error updating networks", {
+				description: error instanceof Error ? error.message : "Unknown error",
+			});
+		}
+	};
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row items-start justify-between flex-wrap gap-2">
+				<div className="flex flex-col gap-1">
+					<CardTitle className="text-xl">Networks</CardTitle>
+					<CardDescription>
+						Attach Docker networks per service and detach it from
+						dokploy-network. Takes effect on the next deploy.
+					</CardDescription>
+				</div>
+				<Button
+					variant="outline"
+					size="sm"
+					isLoading={isRefetchingServices}
+					onClick={onRetry}
+				>
+					<RefreshCw className="size-4" />
+					Refresh
+				</Button>
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				{servicesError ? (
+					<div className="flex flex-col gap-3">
+						<AlertBlock type="error">
+							Could not load the compose services. If this compose was just
+							created from a template, it hasn't been cloned yet — click Reload
+							to clone the repository and read its services.
+						</AlertBlock>
+						<div className="flex justify-end">
+							<Button
+								variant="outline"
+								size="sm"
+								isLoading={isRefetchingServices}
+								onClick={onRetry}
+							>
+								<RefreshCw className="size-4" />
+								Reload services
+							</Button>
+						</div>
+					</div>
+				) : isLoadingServices ? (
+					<div className="flex flex-row gap-2 items-center justify-center py-10 text-sm text-muted-foreground">
+						<span>Loading services...</span>
+						<Loader2 className="animate-spin size-4" />
+					</div>
+				) : !services?.length ? (
+					<span className="py-6 text-center text-sm text-muted-foreground">
+						No services found in this compose.
+					</span>
+				) : (
+					<Form {...form}>
+						<form
+							onSubmit={form.handleSubmit(onSubmit)}
+							className="flex flex-col gap-4"
+						>
+							{fields.map((fieldItem, index) => (
+								<ServiceRow
+									key={fieldItem.id}
+									control={form.control}
+									index={index}
+									service={fieldItem.serviceName}
+									availableNetworks={availableNetworks}
+								/>
+							))}
+							<div className="flex justify-end">
+								<Button
+									type="submit"
+									disabled={!form.formState.isDirty}
+									isLoading={isPending}
+								>
+									Save
+								</Button>
+							</div>
+						</form>
+					</Form>
+				)}
+			</CardContent>
+		</Card>
+	);
+};
+
+type NetworkOption = { networkId: string; name: string; driver: string };
+
+const ServiceRow = ({
+	control,
+	index,
+	service,
+	availableNetworks,
+}: {
+	control: ReturnType<typeof useForm<FormValues>>["control"];
+	index: number;
+	service: string;
+	availableNetworks: NetworkOption[];
+}) => {
+	const [open, setOpen] = useState(false);
+
+	return (
+		<div className="flex flex-col gap-3 rounded-lg border p-4">
+			<FormField
+				control={control}
+				name={`services.${index}.detachDokployNetwork`}
+				render={({ field }) => (
+					<FormItem className="flex flex-row items-center justify-between gap-3 space-y-0">
+						<span className="text-sm font-medium">{service}</span>
+						<div className="flex items-center gap-2">
+							<span className="text-xs text-muted-foreground">
+								Detach dokploy-network
+							</span>
+							<FormControl>
+								<Switch
+									checked={field.value}
+									onCheckedChange={field.onChange}
+								/>
+							</FormControl>
+						</div>
+					</FormItem>
+				)}
+			/>
+
+			<FormField
+				control={control}
+				name={`services.${index}.networkIds`}
+				render={({ field }) => {
+					const selectedNetworks = availableNetworks.filter((n) =>
+						field.value.includes(n.networkId),
+					);
+					const toggle = (networkId: string) => {
+						field.onChange(
+							field.value.includes(networkId)
+								? field.value.filter((id) => id !== networkId)
+								: [...field.value, networkId],
+						);
+					};
+					return (
+						<FormItem className="space-y-3">
+							<Popover open={open} onOpenChange={setOpen}>
+								<PopoverTrigger asChild>
+									<Button
+										type="button"
+										variant="outline"
+										aria-expanded={open}
+										className="w-full justify-between"
+									>
+										<span className="text-muted-foreground">
+											{selectedNetworks.length > 0
+												? `${selectedNetworks.length} network${
+														selectedNetworks.length > 1 ? "s" : ""
+													} selected`
+												: "Select networks..."}
+										</span>
+										<ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+									</Button>
+								</PopoverTrigger>
+								<PopoverContent
+									className="w-[var(--radix-popover-trigger-width)] p-0"
+									align="start"
+								>
+									<Command>
+										<CommandInput
+											placeholder="Search networks..."
+											className="h-9"
+										/>
+										<CommandList className="max-h-60">
+											{availableNetworks.length === 0 ? (
+												<div className="py-6 text-center text-sm text-muted-foreground">
+													No networks available on this server.
+												</div>
+											) : (
+												<CommandGroup>
+													{availableNetworks.map((n) => {
+														const isSelected = field.value.includes(
+															n.networkId,
+														);
+														return (
+															<CommandItem
+																key={n.networkId}
+																value={n.name}
+																onSelect={() => toggle(n.networkId)}
+																className="cursor-pointer"
+															>
+																<Checkbox
+																	checked={isSelected}
+																	className="mr-2"
+																	onCheckedChange={() => toggle(n.networkId)}
+																/>
+																<span>{n.name}</span>
+																<Badge variant="outline" className="ml-2">
+																	{n.driver}
+																</Badge>
+																<Check
+																	className={cn(
+																		"ml-auto size-4",
+																		isSelected ? "opacity-100" : "opacity-0",
+																	)}
+																/>
+															</CommandItem>
+														);
+													})}
+												</CommandGroup>
+											)}
+										</CommandList>
+									</Command>
+								</PopoverContent>
+							</Popover>
+
+							{selectedNetworks.length > 0 && (
+								<div className="flex flex-wrap gap-1.5">
+									{selectedNetworks.map((n) => (
+										<Badge key={n.networkId} variant="secondary">
+											{n.name}
+										</Badge>
+									))}
+								</div>
+							)}
+						</FormItem>
+					);
+				}}
+			/>
+		</div>
+	);
+};

apps/dokploy/components/dashboard/networks/assign-networks.tsx

@@ -0,0 +1,355 @@
+import { Check, ChevronsUpDown, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "@/components/ui/command";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+
+type ServiceType =
+	| "application"
+	| "postgres"
+	| "mysql"
+	| "mariadb"
+	| "mongo"
+	| "redis"
+	| "libsql";
+
+interface Props {
+	id: string;
+	type: ServiceType;
+}
+
+export const AssignNetworks = ({ id, type }: Props) => {
+	const [open, setOpen] = useState(false);
+	const [selected, setSelected] = useState<string[]>([]);
+	const [detached, setDetached] = useState(false);
+
+	const {
+		service,
+		serverId,
+		networkIds,
+		detachDokployNetwork,
+		updateAsync,
+		isUpdating,
+		refetch,
+	} = useServiceNetworks(id, type);
+
+	const { data: networks } = api.network.all.useQuery(
+		{ serverId: serverId ?? undefined },
+		{ enabled: service !== undefined },
+	);
+
+	const { data: applicationDomains } = api.domain.byApplicationId.useQuery(
+		{ applicationId: id },
+		{ enabled: type === "application" },
+	);
+	const hasDomains = (applicationDomains?.length ?? 0) > 0;
+
+	useEffect(() => {
+		setSelected(networkIds ?? []);
+		setDetached(detachDokployNetwork ?? false);
+	}, [networkIds, detachDokployNetwork]);
+
+	const availableNetworks = (networks ?? []).filter(
+		(n) => n.driver === "overlay",
+	);
+	const selectedNetworks = availableNetworks.filter((n) =>
+		selected.includes(n.networkId),
+	);
+	const isDirty =
+		selected.length !== (networkIds?.length ?? 0) ||
+		selected.some((networkId) => !networkIds?.includes(networkId)) ||
+		detached !== detachDokployNetwork;
+
+	const toggle = (networkId: string) => {
+		setSelected((prev) =>
+			prev.includes(networkId)
+				? prev.filter((id) => id !== networkId)
+				: [...prev, networkId],
+		);
+	};
+
+	const onSave = async () => {
+		try {
+			await updateAsync({
+				networkIds: selected,
+				detachDokployNetwork: detached,
+			});
+			toast.success("Networks updated. Redeploy the service to apply them.");
+			await refetch();
+		} catch (error) {
+			toast.error("Error updating networks", {
+				description: error instanceof Error ? error.message : "Unknown error",
+			});
+		}
+	};
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
+				<div className="flex flex-col gap-1">
+					<CardTitle className="text-xl">Networks</CardTitle>
+					<CardDescription>
+						Attach additional Docker networks to this service so it can reach
+						services on those networks. Takes effect on the next deploy.
+					</CardDescription>
+				</div>
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				<div className="flex flex-row items-start justify-between gap-3 rounded-lg border p-4">
+					<div className="space-y-1 pr-1">
+						<div className="flex items-center gap-2">
+							<span className="text-sm font-medium">
+								Detach from dokploy-network
+							</span>
+							<Badge variant="secondary">dokploy-network</Badge>
+						</div>
+						<p className="text-sm text-muted-foreground">
+							By default the service joins the shared dokploy-network. Detach it
+							to keep it reachable only through the networks you attach below.
+						</p>
+					</div>
+					<Switch checked={detached} onCheckedChange={setDetached} />
+				</div>
+
+				{detached && hasDomains && (
+					<AlertBlock type="warning">
+						Warning: this service has domains. Detaching it from dokploy-network
+						will break Traefik routing, and its domains will stop working.
+					</AlertBlock>
+				)}
+
+				{detached && !hasDomains && selected.length === 0 && (
+					<AlertBlock type="warning">
+						This service is detached from dokploy-network but has no other
+						network attached. It would be unreachable, so dokploy-network will
+						be kept until you attach a network below.
+					</AlertBlock>
+				)}
+
+				<Popover open={open} onOpenChange={setOpen}>
+					<PopoverTrigger asChild>
+						<Button
+							variant="outline"
+							aria-expanded={open}
+							className="w-full justify-between"
+						>
+							<span className="text-muted-foreground">
+								{selectedNetworks.length > 0
+									? `${selectedNetworks.length} network${
+											selectedNetworks.length > 1 ? "s" : ""
+										} selected`
+									: "Select networks..."}
+							</span>
+							<ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+						</Button>
+					</PopoverTrigger>
+					<PopoverContent
+						className="w-[var(--radix-popover-trigger-width)] p-0"
+						align="start"
+					>
+						<Command>
+							<CommandInput placeholder="Search networks..." className="h-9" />
+							<CommandList className="max-h-60">
+								{availableNetworks.length === 0 ? (
+									<div className="py-6 text-center text-sm text-muted-foreground">
+										No overlay networks on this server.
+									</div>
+								) : (
+									<>
+										<CommandEmpty className="py-6 text-center text-sm text-muted-foreground">
+											No networks found.
+										</CommandEmpty>
+										<CommandGroup>
+											{availableNetworks.map((n) => {
+												const isSelected = selected.includes(n.networkId);
+												return (
+													<CommandItem
+														key={n.networkId}
+														value={n.name}
+														onSelect={() => toggle(n.networkId)}
+														className="cursor-pointer"
+													>
+														<Checkbox
+															checked={isSelected}
+															className="mr-2"
+															onCheckedChange={() => toggle(n.networkId)}
+														/>
+														<span>{n.name}</span>
+														<Badge variant="outline" className="ml-2">
+															{n.driver}
+														</Badge>
+														<Check
+															className={cn(
+																"ml-auto size-4",
+																isSelected ? "opacity-100" : "opacity-0",
+															)}
+														/>
+													</CommandItem>
+												);
+											})}
+										</CommandGroup>
+									</>
+								)}
+							</CommandList>
+						</Command>
+					</PopoverContent>
+				</Popover>
+
+				{selectedNetworks.length > 0 && (
+					<div className="flex flex-wrap gap-1.5">
+						{selectedNetworks.map((n) => (
+							<Badge
+								key={n.networkId}
+								variant="secondary"
+								className="flex items-center gap-1 pr-1"
+							>
+								{n.name}
+								<button
+									type="button"
+									onClick={() => toggle(n.networkId)}
+									className="ml-0.5 rounded-full outline-hidden hover:opacity-70"
+								>
+									<X className="size-3" />
+									<span className="sr-only">Remove {n.name}</span>
+								</button>
+							</Badge>
+						))}
+					</div>
+				)}
+
+				<div className="flex justify-end">
+					<Button disabled={!isDirty} isLoading={isUpdating} onClick={onSave}>
+						Save
+					</Button>
+				</div>
+			</CardContent>
+		</Card>
+	);
+};
+
+// Maps a service type to its one-query and update-mutation, normalizing the
+// per-type id field name and the networkIds field.
+const useServiceNetworks = (id: string, type: ServiceType) => {
+	const application = api.application.one.useQuery(
+		{ applicationId: id },
+		{ enabled: type === "application" },
+	);
+	const postgres = api.postgres.one.useQuery(
+		{ postgresId: id },
+		{ enabled: type === "postgres" },
+	);
+	const mysql = api.mysql.one.useQuery(
+		{ mysqlId: id },
+		{ enabled: type === "mysql" },
+	);
+	const mariadb = api.mariadb.one.useQuery(
+		{ mariadbId: id },
+		{ enabled: type === "mariadb" },
+	);
+	const mongo = api.mongo.one.useQuery(
+		{ mongoId: id },
+		{ enabled: type === "mongo" },
+	);
+	const redis = api.redis.one.useQuery(
+		{ redisId: id },
+		{ enabled: type === "redis" },
+	);
+	const libsql = api.libsql.one.useQuery(
+		{ libsqlId: id },
+		{ enabled: type === "libsql" },
+	);
+	const applicationUpdate = api.application.update.useMutation();
+	const postgresUpdate = api.postgres.update.useMutation();
+	const mysqlUpdate = api.mysql.update.useMutation();
+	const mariadbUpdate = api.mariadb.update.useMutation();
+	const mongoUpdate = api.mongo.update.useMutation();
+	const redisUpdate = api.redis.update.useMutation();
+	const libsqlUpdate = api.libsql.update.useMutation();
+
+	const map = {
+		application: {
+			query: application,
+			mutation: applicationUpdate,
+			save: (payload: SavePayload) =>
+				applicationUpdate.mutateAsync({ applicationId: id, ...payload }),
+		},
+		postgres: {
+			query: postgres,
+			mutation: postgresUpdate,
+			save: (payload: SavePayload) =>
+				postgresUpdate.mutateAsync({ postgresId: id, ...payload }),
+		},
+		mysql: {
+			query: mysql,
+			mutation: mysqlUpdate,
+			save: (payload: SavePayload) =>
+				mysqlUpdate.mutateAsync({ mysqlId: id, ...payload }),
+		},
+		mariadb: {
+			query: mariadb,
+			mutation: mariadbUpdate,
+			save: (payload: SavePayload) =>
+				mariadbUpdate.mutateAsync({ mariadbId: id, ...payload }),
+		},
+		mongo: {
+			query: mongo,
+			mutation: mongoUpdate,
+			save: (payload: SavePayload) =>
+				mongoUpdate.mutateAsync({ mongoId: id, ...payload }),
+		},
+		redis: {
+			query: redis,
+			mutation: redisUpdate,
+			save: (payload: SavePayload) =>
+				redisUpdate.mutateAsync({ redisId: id, ...payload }),
+		},
+		libsql: {
+			query: libsql,
+			mutation: libsqlUpdate,
+			save: (payload: SavePayload) =>
+				libsqlUpdate.mutateAsync({ libsqlId: id, ...payload }),
+		},
+	}[type];
+
+	const service = map.query.data;
+
+	return {
+		service,
+		serverId: service?.serverId ?? null,
+		networkIds: service?.networkIds ?? [],
+		detachDokployNetwork: service?.detachDokployNetwork ?? false,
+		updateAsync: map.save,
+		isUpdating: map.mutation.isPending,
+		refetch: map.query.refetch,
+	};
+};
+
+type SavePayload = {
+	networkIds: string[];
+	detachDokployNetwork: boolean;
+};

apps/dokploy/components/dashboard/networks/handle-network.tsx

@@ -0,0 +1,404 @@
+"use client";
+
+import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
+import { Network, Plus, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+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 { Switch } from "@/components/ui/switch";
+import { api } from "@/utils/api";
+
+// Only bridge and overlay can be created: "host"/"none" are Docker
+// singletons and macvlan/ipvlan need driver options we don't expose.
+const networkDriverEnum = ["bridge", "overlay"] as const;
+
+const ipamConfigEntrySchema = z.object({
+	subnet: z.string().optional(),
+	ipRange: z.string().optional(),
+	gateway: z.string().optional(),
+});
+
+const networkFormSchema = z
+	.object({
+		name: z.string().min(1, "Name is required"),
+		driver: z.enum(networkDriverEnum),
+		internal: z.boolean(),
+		attachable: z.boolean(),
+		enableIPv4: z.boolean(),
+		enableIPv6: z.boolean(),
+		mtu: z
+			.string()
+			.refine(
+				(value) =>
+					value === "" ||
+					(/^\d+$/.test(value) && +value >= 68 && +value <= 65535),
+				{ message: "MTU must be a number between 68 and 65535" },
+			),
+		ipamDriver: z.string().optional(),
+		ipamConfig: z.array(ipamConfigEntrySchema),
+	})
+	.superRefine((input, ctx) => {
+		if (!input.enableIPv4 && !input.enableIPv6) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				path: ["enableIPv4"],
+				message: "IPv4 or IPv6 must be enabled",
+			});
+		}
+		for (const [index, entry] of input.ipamConfig.entries()) {
+			if (!entry.subnet && (entry.gateway || entry.ipRange)) {
+				ctx.addIssue({
+					code: z.ZodIssueCode.custom,
+					path: ["ipamConfig", index, "subnet"],
+					message: "Gateway and IP range require a subnet",
+				});
+			}
+		}
+	});
+
+type NetworkFormValues = z.infer<typeof networkFormSchema>;
+
+const defaultValues: NetworkFormValues = {
+	name: "",
+	driver: "bridge",
+	internal: false,
+	attachable: false,
+	enableIPv4: true,
+	enableIPv6: false,
+	mtu: "",
+	ipamDriver: "",
+	ipamConfig: [],
+};
+
+const toggleOptions = [
+	{
+		name: "internal",
+		label: "Internal",
+		description: "Containers on this network cannot reach external networks.",
+	},
+	{
+		name: "attachable",
+		label: "Attachable",
+		description:
+			"Allow standalone containers to attach (overlay networks only).",
+	},
+	{
+		name: "enableIPv4",
+		label: "Enable IPv4",
+		description: "Enable IPv4 addressing on the network.",
+	},
+	{
+		name: "enableIPv6",
+		label: "Enable IPv6",
+		description: "Enable IPv6 addressing on the network.",
+	},
+] as const;
+
+interface HandleNetworkProps {
+	/** Target server; undefined creates on the local Dokploy server */
+	serverId?: string;
+	children?: React.ReactNode;
+}
+
+// Docker networks are immutable, so this dialog only creates them;
+// changing a network means deleting and recreating it.
+export const HandleNetwork = ({ serverId, children }: HandleNetworkProps) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const utils = api.useUtils();
+
+	const { mutateAsync, isPending } = api.network.create.useMutation();
+
+	const form = useForm<NetworkFormValues>({
+		resolver: zodResolver(networkFormSchema),
+		defaultValues,
+	});
+
+	const ipamConfigFieldArray = useFieldArray({
+		control: form.control,
+		name: "ipamConfig",
+	});
+
+	const onSubmit = async (data: NetworkFormValues) => {
+		try {
+			await mutateAsync({
+				name: data.name,
+				driver: data.driver,
+				serverId,
+				internal: data.internal,
+				attachable: data.attachable,
+				enableIPv4: data.enableIPv4,
+				enableIPv6: data.enableIPv6,
+				mtu: data.mtu ? Number(data.mtu) : undefined,
+				ipam: {
+					driver: data.ipamDriver || undefined,
+					config: data.ipamConfig,
+				},
+			});
+
+			toast.success("Network created");
+			await utils.network.all.invalidate();
+			setIsOpen(false);
+			form.reset(defaultValues);
+		} catch (error) {
+			toast.error("Error creating network", {
+				description: error instanceof Error ? error.message : "Unknown error",
+			});
+		}
+	};
+
+	const trigger = children ?? (
+		<Button>
+			<Plus className=" size-4" />
+			Add network
+		</Button>
+	);
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>{trigger}</DialogTrigger>
+			<DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
+				<DialogHeader>
+					<DialogTitle className="flex items-center gap-2">
+						<Network className="size-5 text-muted-foreground" />
+						Add network
+					</DialogTitle>
+					<DialogDescription>
+						Create a new Docker network for your organization. Networks are
+						immutable: to change one, delete it and create it again.
+					</DialogDescription>
+				</DialogHeader>
+				<Form {...form}>
+					<form
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="flex w-full flex-col gap-6"
+					>
+						<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+							<FormField
+								control={form.control}
+								name="name"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Name</FormLabel>
+										<FormControl>
+											<Input placeholder="my-network" {...field} />
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="driver"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Driver</FormLabel>
+										<Select onValueChange={field.onChange} value={field.value}>
+											<FormControl>
+												<SelectTrigger>
+													<SelectValue placeholder="Select driver" />
+												</SelectTrigger>
+											</FormControl>
+											<SelectContent>
+												{networkDriverEnum.map((d) => (
+													<SelectItem key={d} value={d}>
+														{d}
+													</SelectItem>
+												))}
+											</SelectContent>
+										</Select>
+										<FormDescription className="text-muted-foreground">
+											bridge for single-server containers; overlay for Swarm
+											services.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="mtu"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>MTU (optional)</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="1500"
+												inputMode="numeric"
+												{...field}
+											/>
+										</FormControl>
+										<FormDescription className="text-muted-foreground">
+											Maximum transmission unit. Leave empty to use Docker's
+											default.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+						<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+							{toggleOptions.map((option) => (
+								<FormField
+									key={option.name}
+									control={form.control}
+									name={option.name}
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-start justify-between gap-3 space-y-0 rounded-lg border p-4">
+											<div className="space-y-1 pr-1">
+												<FormLabel>{option.label}</FormLabel>
+												<FormDescription className="text-muted-foreground">
+													{option.description}
+												</FormDescription>
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+							))}
+						</div>
+						<div className="space-y-4 rounded-lg border p-4">
+							<div className="space-y-1">
+								<FormLabel>IPAM</FormLabel>
+								<p className="text-sm text-muted-foreground">
+									IP address management settings for this network.
+								</p>
+							</div>
+							<FormField
+								control={form.control}
+								name="ipamDriver"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel className="text-muted-foreground">
+											Driver (optional)
+										</FormLabel>
+										<FormControl>
+											<Input {...field} placeholder="default" />
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<div className="space-y-2">
+								<FormLabel className="text-muted-foreground">
+									Config (subnet / gateway / IP range)
+								</FormLabel>
+								{ipamConfigFieldArray.fields.map((field, index) => (
+									<div key={field.id} className="flex flex-wrap gap-2">
+										<FormField
+											control={form.control}
+											name={`ipamConfig.${index}.subnet`}
+											render={({ field: f }) => (
+												<FormItem className="min-w-[140px] flex-1">
+													<FormControl>
+														<Input
+															{...f}
+															placeholder="Subnet (e.g. 172.20.0.0/16)"
+														/>
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+										<FormField
+											control={form.control}
+											name={`ipamConfig.${index}.ipRange`}
+											render={({ field: f }) => (
+												<FormItem className="min-w-[120px] flex-1">
+													<FormControl>
+														<Input {...f} placeholder="IP range" />
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+										<FormField
+											control={form.control}
+											name={`ipamConfig.${index}.gateway`}
+											render={({ field: f }) => (
+												<FormItem className="min-w-[120px] flex-1">
+													<FormControl>
+														<Input {...f} placeholder="Gateway" />
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+										<Button
+											type="button"
+											variant="outline"
+											size="icon"
+											aria-label="Remove IPAM config"
+											onClick={() => ipamConfigFieldArray.remove(index)}
+										>
+											<Trash2 className="size-4" />
+										</Button>
+									</div>
+								))}
+								<Button
+									type="button"
+									variant="outline"
+									size="sm"
+									onClick={() =>
+										ipamConfigFieldArray.append({
+											subnet: "",
+											ipRange: "",
+											gateway: "",
+										})
+									}
+								>
+									<Plus className="size-4" />
+									Add IPAM config
+								</Button>
+							</div>
+						</div>
+						<DialogFooter>
+							<Button
+								type="button"
+								variant="outline"
+								onClick={() => setIsOpen(false)}
+							>
+								Cancel
+							</Button>
+							<Button type="submit" isLoading={isPending}>
+								Create network
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/networks/show-network-config.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { Eye, Loader2 } from "lucide-react";
+import { useState } from "react";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { api } from "@/utils/api";
+
+interface Props {
+	networkId: string;
+	networkName: string;
+}
+
+export const ShowNetworkConfig = ({ networkId, networkName }: Props) => {
+	const [open, setOpen] = useState(false);
+	const { data, isLoading, error } = api.network.inspect.useQuery(
+		{ networkId },
+		{ enabled: open },
+	);
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button variant="ghost" size="icon-sm" aria-label="View network config">
+					<Eye className="size-4" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="w-full md:w-[70vw] min-w-[70vw]">
+				<DialogHeader>
+					<DialogTitle>Network Config</DialogTitle>
+					<DialogDescription>
+						docker network inspect output for "{networkName}"
+					</DialogDescription>
+				</DialogHeader>
+				{error ? (
+					<AlertBlock type="error">{error.message}</AlertBlock>
+				) : isLoading ? (
+					<div className="flex flex-row gap-2 items-center justify-center py-10 text-sm text-muted-foreground">
+						<span>Loading...</span>
+						<Loader2 className="animate-spin size-4" />
+					</div>
+				) : (
+					<div className="text-wrap rounded-lg border p-4 overflow-y-auto text-sm bg-card max-h-[80vh]">
+						<code>
+							<pre className="whitespace-pre-wrap wrap-break-word">
+								<CodeEditor
+									language="json"
+									lineWrapping
+									lineNumbers={false}
+									readOnly
+									value={JSON.stringify(data, null, 2)}
+								/>
+							</pre>
+						</code>
+					</div>
+				)}
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/networks/show-networks.tsx

@@ -0,0 +1,494 @@
+"use client";
+
+import {
+	type ColumnDef,
+	flexRender,
+	getCoreRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	type PaginationState,
+	type SortingState,
+	useReactTable,
+} from "@tanstack/react-table";
+import type { inferRouterOutputs } from "@trpc/server";
+import {
+	ArrowUpDown,
+	Loader2,
+	Network,
+	RotateCcw,
+	ShieldCheck,
+	Trash2,
+} from "lucide-react";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import { HandleNetwork } from "@/components/dashboard/networks/handle-network";
+import { ShowNetworkConfig } from "@/components/dashboard/networks/show-network-config";
+import { SyncNetworks } from "@/components/dashboard/networks/sync-networks";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardAction,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} 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 type { AppRouter } from "@/server/api/root";
+import { api } from "@/utils/api";
+
+type NetworkRow = inferRouterOutputs<AppRouter>["network"]["all"][number];
+
+interface Props {
+	/** Selected server; undefined shows the local Dokploy server */
+	serverId?: string;
+}
+
+const getIpamEntries = (row: NetworkRow) =>
+	(row.ipam?.config ?? []).filter((c) => c.subnet || c.gateway || c.ipRange);
+
+const SortableHeader = ({
+	column,
+	title,
+}: {
+	column: {
+		getIsSorted: () => false | "asc" | "desc";
+		toggleSorting: (asc: boolean) => void;
+	};
+	title: string;
+}) => (
+	<Button
+		variant="ghost"
+		className="-ml-3 h-8"
+		onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+	>
+		{title}
+		<ArrowUpDown className="ml-2 size-4" />
+	</Button>
+);
+
+export const ShowNetworks = ({ serverId }: Props) => {
+	const utils = api.useUtils();
+	const [verified, setVerified] = useState(false);
+	const [sorting, setSorting] = useState<SortingState>([
+		{ id: "createdAt", desc: true },
+	]);
+	const [globalFilter, setGlobalFilter] = useState("");
+	const [driverFilter, setDriverFilter] = useState<string>("all");
+	const [pagination, setPagination] = useState<PaginationState>({
+		pageIndex: 0,
+		pageSize: 10,
+	});
+
+	const { data: networks, isLoading } = api.network.all.useQuery({ serverId });
+	const { mutateAsync: removeNetwork } = api.network.remove.useMutation();
+	const recreateMutation = api.network.recreate.useMutation();
+
+	// Same query the Sync dialog uses; "missing" tells us which records
+	// no longer have a real network in Docker
+	const {
+		data: syncStatus,
+		isFetching: isVerifying,
+		refetch: refetchVerify,
+	} = api.network.networksToSync.useQuery({ serverId }, { enabled: verified });
+
+	const missingIds = useMemo(
+		() => new Set(syncStatus?.missing.map((m) => m.networkId) ?? []),
+		[syncStatus],
+	);
+
+	const onVerify = async () => {
+		setVerified(true);
+		const { data: result, error } = await refetchVerify();
+		if (error) {
+			toast.error("Error verifying networks", {
+				description: error.message,
+			});
+			return;
+		}
+		if (!result) return;
+		if (result.missing.length === 0) {
+			toast.success("All networks exist in Docker");
+		} else {
+			toast.warning(
+				`${result.missing.length} network(s) no longer exist in Docker`,
+			);
+		}
+	};
+
+	const filteredData = useMemo(() => {
+		let list = networks ?? [];
+		if (driverFilter !== "all") {
+			list = list.filter((n) => n.driver === driverFilter);
+		}
+		if (globalFilter.trim()) {
+			const query = globalFilter.toLowerCase();
+			list = list.filter(
+				(n) =>
+					n.name.toLowerCase().includes(query) ||
+					(n.ipam?.config ?? []).some(
+						(c) =>
+							c.subnet?.toLowerCase().includes(query) ||
+							c.gateway?.toLowerCase().includes(query) ||
+							c.ipRange?.toLowerCase().includes(query),
+					),
+			);
+		}
+		return list;
+	}, [networks, driverFilter, globalFilter]);
+
+	const columns = useMemo<ColumnDef<NetworkRow>[]>(
+		() => [
+			{
+				accessorKey: "name",
+				header: ({ column }) => <SortableHeader column={column} title="Name" />,
+				cell: ({ row }) => (
+					<div className="flex items-center gap-2 font-medium">
+						{row.original.name}
+						{verified &&
+							syncStatus &&
+							(missingIds.has(row.original.networkId) ? (
+								<>
+									<Badge variant="red">Missing in Docker</Badge>
+									<Button
+										variant="outline"
+										size="xs"
+										isLoading={recreateMutation.isPending}
+										onClick={async () => {
+											try {
+												await recreateMutation.mutateAsync({
+													networkId: row.original.networkId,
+												});
+												toast.success(
+													`Network "${row.original.name}" recreated in Docker`,
+												);
+												await utils.network.networksToSync.invalidate();
+											} catch (error) {
+												toast.error("Error recreating network", {
+													description:
+														error instanceof Error
+															? error.message
+															: "Unknown error",
+												});
+											}
+										}}
+									>
+										<RotateCcw className="size-3.5" />
+										Recreate
+									</Button>
+								</>
+							) : (
+								<Badge variant="green">In sync</Badge>
+							))}
+					</div>
+				),
+			},
+			{
+				accessorKey: "driver",
+				header: ({ column }) => (
+					<SortableHeader column={column} title="Driver" />
+				),
+				cell: ({ row }) => (
+					<div className="flex items-center gap-2">
+						<Badge variant="outline">{row.original.driver}</Badge>
+						<span className="text-xs text-muted-foreground">
+							{row.original.driver === "overlay" ? "swarm" : "local"}
+						</span>
+					</div>
+				),
+			},
+			{
+				id: "subnet",
+				accessorFn: (row) => getIpamEntries(row)[0]?.subnet ?? "",
+				header: ({ column }) => (
+					<SortableHeader column={column} title="Subnet" />
+				),
+				cell: ({ row }) => {
+					const ipamEntries = getIpamEntries(row.original);
+					if (ipamEntries.length === 0) {
+						return <span className="text-muted-foreground">Auto</span>;
+					}
+					return (
+						<div className="flex flex-col gap-1">
+							{ipamEntries.map((c, index) => (
+								<div
+									key={`${row.original.networkId}-ipam-${index}`}
+									className="flex flex-col"
+								>
+									<span>{c.subnet ?? "—"}</span>
+									{(c.gateway || c.ipRange) && (
+										<span className="text-xs text-muted-foreground">
+											{[
+												c.gateway && `gw ${c.gateway}`,
+												c.ipRange && `range ${c.ipRange}`,
+											]
+												.filter(Boolean)
+												.join(" · ")}
+										</span>
+									)}
+								</div>
+							))}
+						</div>
+					);
+				},
+			},
+			{
+				accessorKey: "internal",
+				header: ({ column }) => (
+					<SortableHeader column={column} title="Internal" />
+				),
+				cell: ({ row }) => (
+					<span className="text-muted-foreground">
+						{row.original.internal ? "Yes" : "No"}
+					</span>
+				),
+			},
+			{
+				accessorKey: "attachable",
+				header: ({ column }) => (
+					<SortableHeader column={column} title="Attachable" />
+				),
+				cell: ({ row }) => (
+					<span className="text-muted-foreground">
+						{row.original.attachable ? "Yes" : "No"}
+					</span>
+				),
+			},
+			{
+				accessorKey: "createdAt",
+				header: ({ column }) => (
+					<SortableHeader column={column} title="Created" />
+				),
+				cell: ({ row }) => (
+					<span className="text-muted-foreground whitespace-nowrap">
+						{new Date(row.original.createdAt).toLocaleDateString()}
+					</span>
+				),
+			},
+			{
+				id: "actions",
+				enableSorting: false,
+				header: () => <div className="text-right">Actions</div>,
+				cell: ({ row }) => (
+					<div className="flex items-center justify-end gap-3">
+						<ShowNetworkConfig
+							networkId={row.original.networkId}
+							networkName={row.original.name}
+						/>
+						<DialogAction
+							title="Delete network"
+							description={`The network "${row.original.name}" will be removed from Docker and Dokploy. This action cannot be undone.`}
+							onClick={async () => {
+								try {
+									await removeNetwork({
+										networkId: row.original.networkId,
+									});
+									toast.success("Network deleted");
+									await utils.network.all.invalidate();
+									await utils.network.networksToSync.invalidate();
+								} catch (error) {
+									toast.error("Error deleting network", {
+										description:
+											error instanceof Error ? error.message : "Unknown error",
+									});
+								}
+							}}
+						>
+							<Button
+								variant="ghost"
+								size="icon-sm"
+								aria-label="Delete network"
+							>
+								<Trash2 className="size-4 text-destructive" />
+							</Button>
+						</DialogAction>
+					</div>
+				),
+			},
+		],
+		[verified, syncStatus, missingIds, removeNetwork, recreateMutation, utils],
+	);
+
+	const table = useReactTable({
+		data: filteredData,
+		columns,
+		state: {
+			sorting,
+			pagination,
+		},
+		onSortingChange: setSorting,
+		onPaginationChange: setPagination,
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+	});
+
+	return (
+		<div className="w-full">
+			<Card className="h-full bg-sidebar p-2.5 rounded-xl">
+				<div className="rounded-xl bg-background shadow-md ">
+					<CardHeader className="">
+						<CardTitle className="text-xl flex flex-row gap-2">
+							<Network className="size-6 text-muted-foreground self-center" />
+							Networks
+						</CardTitle>
+						<CardDescription>
+							Manage the Docker networks of the selected server.
+						</CardDescription>
+						<CardAction className="self-center">
+							<div className="flex items-center gap-2">
+								{networks && networks.length > 0 && (
+									<Button
+										variant="outline"
+										isLoading={isVerifying}
+										onClick={onVerify}
+									>
+										<ShieldCheck className="size-4" />
+										Verify
+									</Button>
+								)}
+								<SyncNetworks serverId={serverId} />
+								{networks && networks.length > 0 && (
+									<HandleNetwork serverId={serverId} />
+								)}
+							</div>
+						</CardAction>
+					</CardHeader>
+
+					<CardContent className="space-y-4 py-8 border-t">
+						{isLoading ? (
+							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[45vh]">
+								<span>Loading...</span>
+								<Loader2 className="animate-spin size-4" />
+							</div>
+						) : !networks?.length ? (
+							<div className="flex min-h-[45vh] w-full flex-col items-center justify-center gap-4 rounded-lg border border-dashed p-8">
+								<div className="rounded-full bg-muted p-4">
+									<Network className="size-10 text-muted-foreground" />
+								</div>
+								<div className="space-y-1 text-center">
+									<p className="text-sm font-medium">No networks yet</p>
+									<p className="max-w-sm text-sm text-muted-foreground">
+										Create Docker networks for your organization and optionally
+										attach them to a server. Add your first network to get
+										started.
+									</p>
+								</div>
+								<HandleNetwork serverId={serverId} />
+							</div>
+						) : (
+							<>
+								<div className="flex flex-wrap items-center gap-2">
+									<Input
+										placeholder="Search by name, subnet, gateway..."
+										value={globalFilter}
+										onChange={(e) => setGlobalFilter(e.target.value)}
+										className="max-w-xs"
+									/>
+									<Select value={driverFilter} onValueChange={setDriverFilter}>
+										<SelectTrigger className="w-[150px]">
+											<SelectValue placeholder="Driver" />
+										</SelectTrigger>
+										<SelectContent>
+											<SelectItem value="all">All drivers</SelectItem>
+											<SelectItem value="bridge">bridge</SelectItem>
+											<SelectItem value="overlay">overlay</SelectItem>
+										</SelectContent>
+									</Select>
+								</div>
+								<div className="rounded-md border overflow-x-auto">
+									<Table>
+										<TableHeader>
+											{table.getHeaderGroups().map((headerGroup) => (
+												<TableRow key={headerGroup.id}>
+													{headerGroup.headers.map((header) => (
+														<TableHead key={header.id}>
+															{header.isPlaceholder
+																? null
+																: flexRender(
+																		header.column.columnDef.header,
+																		header.getContext(),
+																	)}
+														</TableHead>
+													))}
+												</TableRow>
+											))}
+										</TableHeader>
+										<TableBody>
+											{table.getRowModel().rows?.length ? (
+												table.getRowModel().rows.map((row) => (
+													<TableRow key={row.id}>
+														{row.getVisibleCells().map((cell) => (
+															<TableCell key={cell.id}>
+																{flexRender(
+																	cell.column.columnDef.cell,
+																	cell.getContext(),
+																)}
+															</TableCell>
+														))}
+													</TableRow>
+												))
+											) : (
+												<TableRow>
+													<TableCell
+														colSpan={columns.length}
+														className="h-24 text-center text-muted-foreground"
+													>
+														No networks match your filters.
+													</TableCell>
+												</TableRow>
+											)}
+										</TableBody>
+									</Table>
+								</div>
+								{table.getPageCount() > 1 && (
+									<div className="flex items-center justify-end gap-4">
+										<span className="text-sm text-muted-foreground">
+											Page {table.getState().pagination.pageIndex + 1} of{" "}
+											{table.getPageCount()}
+										</span>
+										<div className="flex gap-2">
+											<Button
+												variant="outline"
+												size="sm"
+												onClick={() => table.previousPage()}
+												disabled={!table.getCanPreviousPage()}
+											>
+												Previous
+											</Button>
+											<Button
+												variant="outline"
+												size="sm"
+												onClick={() => table.nextPage()}
+												disabled={!table.getCanNextPage()}
+											>
+												Next
+											</Button>
+										</div>
+									</div>
+								)}
+							</>
+						)}
+					</CardContent>
+				</div>
+			</Card>
+		</div>
+	);
+};

apps/dokploy/components/dashboard/networks/sync-networks.tsx

@@ -0,0 +1,249 @@
+"use client";
+
+import { Loader2, RefreshCw, RotateCcw, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Separator } from "@/components/ui/separator";
+import { api } from "@/utils/api";
+
+interface Props {
+	serverId?: string;
+}
+
+export const SyncNetworks = ({ serverId }: Props) => {
+	const [open, setOpen] = useState(false);
+	const [selected, setSelected] = useState<Set<string>>(new Set());
+	const utils = api.useUtils();
+
+	const { data, isLoading, error, refetch } =
+		api.network.networksToSync.useQuery({ serverId }, { enabled: open });
+
+	const importMutation = api.network.import.useMutation();
+	const removeMutation = api.network.remove.useMutation();
+	const recreateMutation = api.network.recreate.useMutation();
+
+	const toggleSelected = (name: string) => {
+		setSelected((prev) => {
+			const next = new Set(prev);
+			if (next.has(name)) {
+				next.delete(name);
+			} else {
+				next.add(name);
+			}
+			return next;
+		});
+	};
+
+	const onImport = async () => {
+		try {
+			const result = await importMutation.mutateAsync({
+				serverId,
+				names: Array.from(selected),
+			});
+
+			if (result.imported.length > 0) {
+				toast.success(`Imported ${result.imported.length} network(s)`);
+			}
+			for (const failure of result.errors) {
+				toast.error(`Could not import "${failure.name}"`, {
+					description: failure.error,
+				});
+			}
+
+			setSelected(new Set());
+			await utils.network.all.invalidate();
+
+			setOpen(false);
+			await refetch();
+		} catch (error) {
+			toast.error("Error importing networks", {
+				description: error instanceof Error ? error.message : "Unknown error",
+			});
+		}
+	};
+
+	const onRemoveStale = async (networkId: string, name: string) => {
+		try {
+			await removeMutation.mutateAsync({ networkId });
+			toast.success(`Removed stale record "${name}"`);
+			await utils.network.all.invalidate();
+			await refetch();
+		} catch (error) {
+			toast.error("Error removing record", {
+				description: error instanceof Error ? error.message : "Unknown error",
+			});
+		}
+	};
+
+	const onRecreate = async (networkId: string, name: string) => {
+		try {
+			await recreateMutation.mutateAsync({ networkId });
+			toast.success(`Network "${name}" recreated in Docker`);
+			await utils.network.all.invalidate();
+			await utils.network.networksToSync.invalidate();
+			await refetch();
+		} catch (error) {
+			toast.error("Error recreating network", {
+				description: error instanceof Error ? error.message : "Unknown error",
+			});
+		}
+	};
+
+	return (
+		<Dialog
+			open={open}
+			onOpenChange={(value) => {
+				setOpen(value);
+				if (!value) setSelected(new Set());
+			}}
+		>
+			<DialogTrigger asChild>
+				<Button variant="outline">
+					<RefreshCw className="size-4" />
+					Sync
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-xl max-h-[90vh] overflow-y-auto">
+				<DialogHeader>
+					<DialogTitle className="flex items-center gap-2">
+						<RefreshCw className="size-5 text-muted-foreground" />
+						Sync networks
+					</DialogTitle>
+					<DialogDescription>
+						Import networks that exist in Docker but not in Dokploy, and clean
+						up records whose network no longer exists.
+					</DialogDescription>
+				</DialogHeader>
+
+				{error ? (
+					<AlertBlock type="error">{error.message}</AlertBlock>
+				) : isLoading ? (
+					<div className="flex flex-row gap-2 items-center justify-center py-10 text-sm text-muted-foreground">
+						<span>Scanning Docker networks...</span>
+						<Loader2 className="animate-spin size-4" />
+					</div>
+				) : (
+					<div className="flex flex-col gap-4">
+						<div className="flex flex-col gap-2">
+							<span className="text-sm font-medium">
+								Found in Docker ({data?.importable.length ?? 0})
+							</span>
+							{data?.importable.length ? (
+								data.importable.map((dockerNetwork) => (
+									<label
+										key={dockerNetwork.name}
+										htmlFor={`import-network-${dockerNetwork.name}`}
+										className="flex cursor-pointer items-center justify-between gap-3 rounded-lg border p-3"
+									>
+										<div className="flex items-center gap-3">
+											<Checkbox
+												id={`import-network-${dockerNetwork.name}`}
+												checked={selected.has(dockerNetwork.name)}
+												onCheckedChange={() =>
+													toggleSelected(dockerNetwork.name)
+												}
+											/>
+											<div className="flex flex-col">
+												<span className="text-sm font-medium">
+													{dockerNetwork.name}
+												</span>
+												{dockerNetwork.subnets.length > 0 && (
+													<span className="text-xs text-muted-foreground">
+														{dockerNetwork.subnets.join(" · ")}
+													</span>
+												)}
+											</div>
+										</div>
+										<Badge variant="outline">{dockerNetwork.driver}</Badge>
+									</label>
+								))
+							) : (
+								<span className="text-sm text-muted-foreground">
+									Nothing to import — everything is in sync.
+								</span>
+							)}
+						</div>
+
+						{!!data?.missing.length && (
+							<>
+								<Separator />
+								<div className="flex flex-col gap-2">
+									<span className="text-sm font-medium">
+										Missing in Docker ({data.missing.length})
+									</span>
+									<span className="text-xs text-muted-foreground">
+										These records exist in Dokploy but their network is gone
+										from Docker.
+									</span>
+									{data.missing.map((stale) => (
+										<div
+											key={stale.networkId}
+											className="flex items-center justify-between gap-3 rounded-lg border border-dashed p-3"
+										>
+											<span className="text-sm">{stale.name}</span>
+											<div className="flex items-center gap-2">
+												<Button
+													variant="outline"
+													size="xs"
+													isLoading={recreateMutation.isPending}
+													onClick={() =>
+														onRecreate(stale.networkId, stale.name)
+													}
+												>
+													<RotateCcw className="size-3.5" />
+													Recreate
+												</Button>
+												<Button
+													variant="ghost"
+													size="icon-sm"
+													aria-label={`Remove stale record ${stale.name}`}
+													isLoading={removeMutation.isPending}
+													onClick={() =>
+														onRemoveStale(stale.networkId, stale.name)
+													}
+												>
+													<Trash2 className="size-4 text-destructive" />
+												</Button>
+											</div>
+										</div>
+									))}
+								</div>
+							</>
+						)}
+					</div>
+				)}
+
+				<DialogFooter>
+					<Button
+						type="button"
+						variant="outline"
+						onClick={() => setOpen(false)}
+					>
+						Close
+					</Button>
+					<Button
+						type="button"
+						disabled={selected.size === 0}
+						isLoading={importMutation.isPending}
+						onClick={onImport}
+					>
+						Import selected ({selected.size})
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/postgres/advanced/show-custom-command.tsx

@@ -4,6 +4,7 @@ import { useEffect } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
@@ -18,6 +19,19 @@ import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import type { ServiceType } from "../../application/advanced/show-resources";
 
+const getPostgresMountPath = (dockerImage: string): string => {
+	const versionMatch = dockerImage.match(/postgres:(\d+)/);
+	if (versionMatch?.[1]) {
+		const version = Number.parseInt(versionMatch[1], 10);
+		if (version >= 18) {
+			return `/var/lib/postgresql/${version}/docker`;
+		}
+	}
+	return "/var/lib/postgresql/data";
+};
+
+const POSTGRES_DATA_PATH_REGEX = /^\/var\/lib\/postgresql(\/|$)/;
+
 const addDockerImage = z.object({
 	dockerImage: z.string().min(1, "Docker image is required"),
 	command: z.string(),
@@ -91,6 +105,27 @@ export const ShowCustomCommand = ({ id, type }: Props) => {
 		}
 	}, [data, form]);
 
+	const dockerImage = form.watch("dockerImage");
+
+	const mountPathWarning = (() => {
+		if (type !== "postgres" || !dockerImage) return null;
+		const mounts = data && "mounts" in data ? data.mounts : [];
+		const dataMounts = mounts.filter(
+			(mount) =>
+				mount.type === "volume" &&
+				POSTGRES_DATA_PATH_REGEX.test(mount.mountPath),
+		);
+		if (dataMounts.length === 0) return null;
+		const expectedPath = getPostgresMountPath(dockerImage);
+		if (dataMounts.some((mount) => mount.mountPath === expectedPath)) {
+			return null;
+		}
+		return {
+			expectedPath,
+			currentPath: dataMounts.map((mount) => mount.mountPath).join(", "),
+		};
+	})();
+
 	const onSubmit = async (formData: AddDockerImage) => {
 		await mutateAsync({
 			mongoId: id || "",
@@ -139,6 +174,18 @@ export const ShowCustomCommand = ({ id, type }: Props) => {
 											</FormItem>
 										)}
 									/>
+									{mountPathWarning && (
+										<AlertBlock type="warning">
+											This image expects its data directory under{" "}
+											<code>{mountPathWarning.expectedPath}</code>, but the
+											volume of this database is mounted at{" "}
+											<code>{mountPathWarning.currentPath}</code>. Changing the
+											image does not migrate existing data — Postgres may
+											crash-loop or start with an empty database. Adjust the
+											volume mount path in the Volumes section or keep a
+											compatible image before saving.
+										</AlertBlock>
+									)}
 								</div>
 								<FormField
 									control={form.control}

apps/dokploy/components/dashboard/postgres/general/show-general-postgres.tsx

@@ -234,6 +234,7 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 						</TooltipProvider>
 						<DockerTerminalModal
 							appName={data?.appName || ""}
+							serviceId={data?.postgresId}
 							serverId={data?.serverId || ""}
 						>
 							<Button

apps/dokploy/components/dashboard/project/environment-variables.tsx

@@ -6,6 +6,7 @@ import { toast } from "sonner";
 import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
+import { useEnvCompletionSource } from "@/components/shared/env-autocomplete";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -55,6 +56,11 @@ export const EnvironmentVariables = ({ environmentId, children }: Props) => {
 		},
 	);
 
+	const completionSource = useEnvCompletionSource({
+		includeShared: false,
+		projectId: data?.projectId,
+		environmentId,
+	});
 	const form = useForm<UpdateEnvironment>({
 		defaultValues: {
 			env: data?.env ?? "",
@@ -134,7 +140,9 @@ export const EnvironmentVariables = ({ environmentId, children }: Props) => {
 				<AlertBlock type="info">
 					Use this syntax to reference environment-level variables in your
 					service environments:{" "}
-					<code>API_URL=${"{{environment.API_URL}}"}</code>
+					<code>API_URL=${"{{environment.API_URL}}"}</code>. You can also
+					reference secrets from a configured vault provider:{" "}
+					<code>DB_URL=${"{{vault.<provider>.<secret>}}"}</code>
 				</AlertBlock>
 				<div className="grid gap-4">
 					<div className="grid items-center gap-4">
@@ -151,6 +159,7 @@ export const EnvironmentVariables = ({ environmentId, children }: Props) => {
 											<FormLabel>Environment variables</FormLabel>
 											<FormControl>
 												<CodeEditor
+													completionSource={completionSource}
 													lineWrapping
 													language="properties"
 													readOnly={!canWrite}

apps/dokploy/components/dashboard/projects/project-environment.tsx

@@ -6,6 +6,7 @@ import { toast } from "sonner";
 import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
+import { useEnvCompletionSource } from "@/components/shared/env-autocomplete";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -55,6 +56,10 @@ export const ProjectEnvironment = ({ projectId, children }: Props) => {
 		},
 	);
 
+	const completionSource = useEnvCompletionSource({
+		includeShared: false,
+		projectId,
+	});
 	const form = useForm<UpdateProject>({
 		defaultValues: {
 			env: data?.env ?? "",
@@ -77,6 +82,7 @@ export const ProjectEnvironment = ({ projectId, children }: Props) => {
 			.then(() => {
 				toast.success("Project env updated successfully");
 				utils.project.all.invalidate();
+				utils.project.one.invalidate({ projectId });
 			})
 			.catch(() => {
 				toast.error("Error updating the env");
@@ -149,6 +155,7 @@ export const ProjectEnvironment = ({ projectId, children }: Props) => {
 											<FormLabel>Environment variables</FormLabel>
 											<FormControl>
 												<CodeEditor
+													completionSource={completionSource}
 													lineWrapping
 													language="properties"
 													readOnly={!canWrite}

apps/dokploy/components/dashboard/redis/general/show-general-redis.tsx

@@ -229,6 +229,7 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
 						</TooltipProvider>
 						<DockerTerminalModal
 							appName={data?.appName || ""}
+							serviceId={data?.redisId}
 							serverId={data?.serverId || ""}
 						>
 							<Button

apps/dokploy/components/dashboard/requests/request-distribution-chart.tsx

@@ -91,6 +91,7 @@ export const RequestDistributionChart = ({
 				<Area
 					dataKey="count"
 					type="monotone"
+					isAnimationActive={false}
 					fill="hsl(var(--chart-1))"
 					fillOpacity={0.4}
 					stroke="hsl(var(--chart-1))"

apps/dokploy/components/dashboard/requests/requests-table.tsx

@@ -328,7 +328,7 @@ export const RequestsTable = ({ dateRange }: RequestsTableProps) => {
 				open={!!selectedRow}
 				onOpenChange={(_open) => setSelectedRow(undefined)}
 			>
-				<SheetContent className="sm:max-w-[740px]  flex flex-col">
+				<SheetContent className="w-full sm:max-w-[740px]! flex flex-col">
 					<SheetHeader>
 						<SheetTitle>Request log</SheetTitle>
 						<SheetDescription>

apps/dokploy/components/dashboard/requests/show-requests.tsx

@@ -63,7 +63,7 @@ export const ShowRequests = () => {
 	const [dateRange, setDateRange] = useState<{
 		from: Date | undefined;
 		to: Date | undefined;
-	}>(getDefaultDateRange());
+	}>(() => getDefaultDateRange());
 
 	// Check if logs exist to determine if traefik has been reloaded
 	// Only fetch when active to minimize network calls

apps/dokploy/components/dashboard/settings/ai-form.tsx

@@ -13,10 +13,14 @@ import {
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { HandleAi } from "./handle-ai";
+import { HandleAiProviders } from "./handle-ai-providers";
 
 export const AiForm = () => {
 	const { data: aiConfigs, refetch, isPending } = api.ai.getAll.useQuery();
 	const { mutateAsync, isPending: isRemoving } = api.ai.delete.useMutation();
+	const { data: currentUser } = api.user.get.useQuery();
+	const isOrgAdmin =
+		currentUser?.role === "owner" || currentUser?.role === "admin";
 
 	return (
 		<div className="w-full">
@@ -30,7 +34,10 @@ export const AiForm = () => {
 							</CardTitle>
 							<CardDescription>Manage your AI configurations</CardDescription>
 						</div>
-						{aiConfigs && aiConfigs?.length > 0 && <HandleAi />}
+						<div className="flex flex-row gap-2">
+							{isOrgAdmin && <HandleAiProviders />}
+							{aiConfigs && aiConfigs?.length > 0 && <HandleAi />}
+						</div>
 					</CardHeader>
 					<CardContent className="space-y-2 py-8 border-t">
 						{isPending ? (

apps/dokploy/components/dashboard/settings/api/add-api-key.tsx

@@ -32,10 +32,11 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
+import { API_KEY_NAME_MAX_LENGTH, apiKeyNameSchema } from "@/lib/api-keys";
 import { api } from "@/utils/api";
 
 const formSchema = z.object({
-	name: z.string().min(1, "Name is required"),
+	name: apiKeyNameSchema,
 	prefix: z.string().optional(),
 	expiresIn: z.number().nullable(),
 	organizationId: z.string().min(1, "Organization is required"),
@@ -159,8 +160,15 @@ export const AddApiKey = () => {
 									<FormItem>
 										<FormLabel>Name</FormLabel>
 										<FormControl>
-											<Input placeholder="My API Key" {...field} />
+											<Input
+												placeholder="My API Key"
+												maxLength={API_KEY_NAME_MAX_LENGTH}
+												{...field}
+											/>
 										</FormControl>
+										<FormDescription>
+											Maximum {API_KEY_NAME_MAX_LENGTH} characters
+										</FormDescription>
 										<FormMessage />
 									</FormItem>
 								)}

apps/dokploy/components/dashboard/settings/cluster/registry/handle-registry.tsx

@@ -227,9 +227,9 @@ export const HandleRegistry = ({ registryId }: Props) => {
 			</DialogTrigger>
 			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
-					<DialogTitle>Add a external registry</DialogTitle>
+					<DialogTitle>Add an external registry</DialogTitle>
 					<DialogDescription>
-						Fill the next fields to add a external registry.
+						Fill in the following fields to add an external registry.
 					</DialogDescription>
 				</DialogHeader>
 				{(isError || testRegistryIsError || testRegistryByIdIsError) && (

apps/dokploy/components/dashboard/settings/git/github/add-github-provider.tsx

@@ -13,6 +13,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
+import { DEFAULT_GITHUB_URL, resolveGithubBaseUrl } from "@/utils/github-utils";
 
 export const AddGithubProvider = () => {
 	const [isOpen, setIsOpen] = useState(false);
@@ -23,6 +24,9 @@ export const AddGithubProvider = () => {
 	const [manifest, setManifest] = useState("");
 	const [isOrganization, setIsOrganization] = useState(false);
 	const [organizationName, setOrganization] = useState("");
+	const [githubUrl, setGithubUrl] = useState(DEFAULT_GITHUB_URL);
+
+	const { baseUrl, error: githubUrlError } = resolveGithubBaseUrl(githubUrl);
 
 	const randomString = () => Math.random().toString(36).slice(2, 8);
 
@@ -30,7 +34,7 @@ export const AddGithubProvider = () => {
 		const url = document.location.origin;
 		const manifest = JSON.stringify(
 			{
-				redirect_url: `${origin}/api/providers/github/setup?organizationId=${activeOrganization?.id ?? ""}&userId=${session?.user?.id ?? ""}`,
+				redirect_url: `${origin}/api/providers/github/setup?organizationId=${activeOrganization?.id ?? ""}&userId=${session?.user?.id ?? ""}&githubUrl=${encodeURIComponent(baseUrl)}`,
 				name: `Dokploy-${format(new Date(), "yyyy-MM-dd")}-${randomString()}`,
 				url: origin,
 				hook_attributes: {
@@ -52,7 +56,7 @@ export const AddGithubProvider = () => {
 		);
 
 		setManifest(manifest);
-	}, [activeOrganization?.id, session?.user?.id]);
+	}, [activeOrganization?.id, session?.user?.id, baseUrl]);
 
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
@@ -79,6 +83,25 @@ export const AddGithubProvider = () => {
 								below to get started.
 							</p>
 							<div className="mt-4 flex flex-col gap-4">
+								<div className="flex flex-col gap-2">
+									<span className="text-sm">GitHub URL</span>
+									<Input
+										placeholder={DEFAULT_GITHUB_URL}
+										value={githubUrl}
+										onChange={(e) => setGithubUrl(e.target.value)}
+									/>
+									<span className="text-muted-foreground text-xs">
+										Leave as is for github.com. For GitHub Enterprise, use your
+										instance URL (e.g. https://acme.ghe.com or
+										https://github.acme.com).
+									</span>
+									{githubUrlError && (
+										<span className="text-destructive text-xs">
+											{githubUrlError}
+										</span>
+									)}
+								</div>
+
 								<div className="flex flex-row gap-4">
 									<span>Organization?</span>
 									<Switch
@@ -98,8 +121,8 @@ export const AddGithubProvider = () => {
 							<form
 								action={
 									isOrganization
-										? `https://github.com/organizations/${organizationName}/settings/apps/new?state=gh_init:${activeOrganization?.id}:${session?.user?.id ?? ""}`
-										: `https://github.com/settings/apps/new?state=gh_init:${activeOrganization?.id}:${session?.user?.id ?? ""}`
+										? `${baseUrl}/organizations/${organizationName}/settings/apps/new?state=gh_init:${activeOrganization?.id}:${session?.user?.id ?? ""}`
+										: `${baseUrl}/settings/apps/new?state=gh_init:${activeOrganization?.id}:${session?.user?.id ?? ""}`
 								}
 								method="post"
 							>
@@ -116,22 +139,25 @@ export const AddGithubProvider = () => {
 									<a
 										href={
 											isOrganization && organizationName
-												? `https://github.com/organizations/${organizationName}/settings/installations`
-												: "https://github.com/settings/installations"
+												? `${baseUrl}/organizations/${organizationName}/settings/installations`
+												: `${baseUrl}/settings/installations`
 										}
 										className={`text-muted-foreground text-sm hover:underline duration-300
 											 ${
 													isOrganization && !organizationName
 														? "pointer-events-none opacity-50"
 														: ""
-												}`}
+}`}
 										target="_blank"
 										rel="noopener noreferrer"
 									>
 										Unsure if you already have an app?
 									</a>
 									<Button
-										disabled={isOrganization && organizationName.length < 1}
+										disabled={
+											!!githubUrlError ||
+											(isOrganization && organizationName.length < 1)
+										}
 										type="submit"
 										className="self-end"
 									>

apps/dokploy/components/dashboard/settings/git/github/edit-github-provider.tsx

@@ -147,6 +147,15 @@ export const EditGithubProvider = ({ githubId }: Props) => {
 									)}
 								/>
 
+								<div className="flex flex-col gap-2">
+									<span className="text-sm font-medium">GitHub URL</span>
+									<Input value={github?.githubUrl ?? ""} readOnly />
+									<span className="text-muted-foreground text-xs">
+										Set when the app was created and not editable, the app
+										credentials belong to this instance.
+									</span>
+								</div>
+
 								<div className="flex w-full justify-between gap-4 mt-4">
 									<Button
 										type="button"

apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx

@@ -33,6 +33,7 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
+import { DEFAULT_GITHUB_URL } from "@/utils/github-utils";
 import { useUrl } from "@/utils/hooks/use-url";
 import { AddBitbucketProvider } from "./bitbucket/add-bitbucket-provider";
 import { EditBitbucketProvider } from "./bitbucket/edit-bitbucket-provider";
@@ -161,6 +162,14 @@ export const ShowGitProviders = () => {
 																		<span className="text-sm font-medium">
 																			{gitProvider.name}
 																		</span>
+																		{isGithub &&
+																			gitProvider.github?.githubUrl &&
+																			gitProvider.github.githubUrl !==
+																				DEFAULT_GITHUB_URL && (
+																				<span className="text-xs text-muted-foreground">
+																					{gitProvider.github.githubUrl}
+																				</span>
+																			)}
 																		<span className="text-xs text-muted-foreground">
 																			{formatDate(
 																				gitProvider.createdAt,

apps/dokploy/components/dashboard/settings/handle-ai-providers.tsx

@@ -0,0 +1,158 @@
+"use client";
+import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
+import { PlusIcon, ServerIcon, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+
+const Schema = z.object({
+	providers: z.array(
+		z.object({
+			name: z.string().min(1, { message: "Name is required" }),
+			apiUrl: z.string().url({ message: "Please enter a valid URL" }),
+		}),
+	),
+});
+
+type Schema = z.infer<typeof Schema>;
+
+export const HandleAiProviders = () => {
+	const utils = api.useUtils();
+	const [open, setOpen] = useState(false);
+	const { data: providers } = api.ai.getCustomProviders.useQuery();
+	const { mutateAsync, isPending } = api.ai.saveCustomProviders.useMutation();
+
+	const form = useForm<Schema>({
+		resolver: zodResolver(Schema),
+		defaultValues: {
+			providers: [],
+		},
+	});
+
+	const { fields, append, remove } = useFieldArray({
+		control: form.control,
+		name: "providers",
+	});
+
+	useEffect(() => {
+		if (open) {
+			form.reset({ providers: providers ?? [] });
+		}
+	}, [open, providers, form]);
+
+	const onSubmit = async (data: Schema) => {
+		try {
+			await mutateAsync({ providers: data.providers });
+			await utils.ai.getCustomProviders.invalidate();
+			toast.success("Custom providers saved successfully");
+			setOpen(false);
+		} catch (error) {
+			toast.error("Failed to save custom providers", {
+				description: error instanceof Error ? error.message : "Unknown error",
+			});
+		}
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button variant="outline" className="cursor-pointer space-x-3">
+					<ServerIcon className="h-4 w-4" />
+					Custom Presets
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-xl">
+				<DialogHeader>
+					<DialogTitle>Custom AI Providers</DialogTitle>
+					<DialogDescription>
+						Define your own AI providers, like an internal LLM platform. When at
+						least one is defined, only these providers can be used in AI
+						configurations.
+					</DialogDescription>
+				</DialogHeader>
+				<Form {...form}>
+					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+						{fields.length === 0 && (
+							<p className="text-sm text-muted-foreground">
+								No custom providers defined. The built-in provider list will be
+								used.
+							</p>
+						)}
+						{fields.map((fieldItem, index) => (
+							<div key={fieldItem.id} className="flex gap-2 items-start">
+								<FormField
+									control={form.control}
+									name={`providers.${index}.name`}
+									render={({ field }) => (
+										<FormItem className="flex-1">
+											<FormControl>
+												<Input placeholder="Internal LLM" {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name={`providers.${index}.apiUrl`}
+									render={({ field }) => (
+										<FormItem className="flex-[2]">
+											<FormControl>
+												<Input
+													placeholder="https://llm.internal.company/v1"
+													{...field}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<Button
+									type="button"
+									variant="ghost"
+									size="icon"
+									className="group hover:bg-red-500/10"
+									onClick={() => remove(index)}
+								>
+									<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+								</Button>
+							</div>
+						))}
+						<div className="flex justify-between">
+							<Button
+								type="button"
+								variant="outline"
+								onClick={() => append({ name: "", apiUrl: "" })}
+							>
+								<PlusIcon className="h-4 w-4" />
+								Add Provider
+							</Button>
+							<Button type="submit" isLoading={isPending}>
+								Save
+							</Button>
+						</div>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/settings/handle-ai.tsx

@@ -99,6 +99,11 @@ export const HandleAi = ({ aiId }: Props) => {
 			enabled: !!aiId,
 		},
 	);
+	const { data: customProviders } = api.ai.getCustomProviders.useQuery();
+	const hasCustomProviders = (customProviders?.length ?? 0) > 0;
+	const providerOptions: { name: string; apiUrl: string }[] = hasCustomProviders
+		? (customProviders ?? [])
+		: [...AI_PROVIDERS];
 	const { mutateAsync, isPending } = aiId
 		? api.ai.update.useMutation()
 		: api.ai.create.useMutation();
@@ -210,7 +215,9 @@ export const HandleAi = ({ aiId }: Props) => {
 							<FormLabel>Provider</FormLabel>
 							<Select
 								onValueChange={(value) => {
-									const provider = AI_PROVIDERS.find((p) => p.apiUrl === value);
+									const provider = providerOptions.find(
+										(p) => p.apiUrl === value,
+									);
 									if (provider) {
 										form.setValue("name", provider.name);
 										form.setValue("apiUrl", provider.apiUrl);
@@ -222,15 +229,20 @@ export const HandleAi = ({ aiId }: Props) => {
 									<SelectValue placeholder="Select a provider preset..." />
 								</SelectTrigger>
 								<SelectContent>
-									{AI_PROVIDERS.map((provider) => (
-										<SelectItem key={provider.apiUrl} value={provider.apiUrl}>
+									{providerOptions.map((provider) => (
+										<SelectItem
+											key={`${provider.name}-${provider.apiUrl}`}
+											value={provider.apiUrl}
+										>
 											{provider.name}
 										</SelectItem>
 									))}
 								</SelectContent>
 							</Select>
 							<p className="text-[0.8rem] text-muted-foreground">
-								Quick-fill provider name and URL, or configure manually below
+								{hasCustomProviders
+									? "Select one of the providers defined by your organization"
+									: "Quick-fill provider name and URL, or configure manually below"}
 							</p>
 						</div>
 
@@ -260,6 +272,7 @@ export const HandleAi = ({ aiId }: Props) => {
 									<FormControl>
 										<Input
 											placeholder="https://api.openai.com/v1"
+											disabled={hasCustomProviders}
 											{...field}
 											onChange={(e) => {
 												field.onChange(e);
@@ -271,7 +284,9 @@ export const HandleAi = ({ aiId }: Props) => {
 										/>
 									</FormControl>
 									<FormDescription>
-										The base URL for your AI provider's API
+										{hasCustomProviders
+											? "The API URL is defined by your organization's providers"
+											: "The base URL for your AI provider's API"}
 									</FormDescription>
 									<FormMessage />
 								</FormItem>

apps/dokploy/components/dashboard/settings/notifications/handle-notifications.tsx

@@ -1828,7 +1828,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 											<div className="">
 												<FormLabel>App Deploy</FormLabel>
 												<FormDescription>
-													Trigger the action when a app is deployed.
+													Trigger the action when an app is deployed.
 												</FormDescription>
 											</div>
 											<FormControl>
@@ -1890,7 +1890,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 											<div className="space-y-0.5">
 												<FormLabel>Dokploy Backup</FormLabel>
 												<FormDescription>
-													Trigger the action when a dokploy backup is created.
+													Trigger the action when a Dokploy backup is created.
 												</FormDescription>
 											</div>
 											<FormControl>
@@ -1932,8 +1932,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 											<div className="space-y-0.5">
 												<FormLabel>Docker Cleanup</FormLabel>
 												<FormDescription>
-													Trigger the action when the docker cleanup is
-													performed.
+													Trigger the action when Docker cleanup is performed.
 												</FormDescription>
 											</div>
 											<FormControl>
@@ -1955,7 +1954,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 												<div className="space-y-0.5">
 													<FormLabel>Dokploy Restart</FormLabel>
 													<FormDescription>
-														Trigger the action when dokploy is restarted.
+														Trigger the action when Dokploy is restarted.
 													</FormDescription>
 												</div>
 												<FormControl>

apps/dokploy/components/dashboard/settings/profile/enable-2fa.tsx

@@ -100,7 +100,7 @@ export const Enable2FA = () => {
 			});
 
 			if (result.error) {
-				if (result.error.code === "INVALID_TWO_FACTOR_AUTHENTICATION") {
+				if (result.error.code === "INVALID_CODE") {
 					toast.error("Invalid verification code");
 					return;
 				}

apps/dokploy/components/dashboard/settings/profile/manage-passkeys.tsx

@@ -0,0 +1,170 @@
+import { Fingerprint, Loader2, Plus, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { DateTooltip } from "@/components/shared/date-tooltip";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { authClient } from "@/lib/auth-client";
+import { api } from "@/utils/api";
+
+export const ManagePasskeys = () => {
+	const utils = api.useUtils();
+	const [isDialogOpen, setIsDialogOpen] = useState(false);
+	const { data: passkeys, isLoading } = api.user.listPasskeys.useQuery(
+		undefined,
+		{
+			enabled: isDialogOpen,
+		},
+	);
+	const [name, setName] = useState("");
+	const [isAdding, setIsAdding] = useState(false);
+	const [deletingId, setDeletingId] = useState<string | null>(null);
+
+	const handleAddPasskey = async (e: React.FormEvent) => {
+		e.preventDefault();
+		setIsAdding(true);
+		try {
+			const result = await authClient.passkey.addPasskey({
+				name: name.trim() || undefined,
+			});
+
+			if (result?.error) {
+				toast.error(result.error.message);
+				return;
+			}
+
+			toast.success("Passkey added successfully");
+			setName("");
+			utils.user.listPasskeys.invalidate();
+		} catch {
+			toast.error("Failed to add passkey");
+		} finally {
+			setIsAdding(false);
+		}
+	};
+
+	const handleDeletePasskey = async (id: string) => {
+		setDeletingId(id);
+		try {
+			const result = await authClient.passkey.deletePasskey({ id });
+
+			if (result?.error) {
+				toast.error(result.error.message);
+				return;
+			}
+
+			toast.success("Passkey removed");
+			utils.user.listPasskeys.invalidate();
+		} catch {
+			toast.error("Failed to remove passkey");
+		} finally {
+			setDeletingId(null);
+		}
+	};
+
+	return (
+		<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+			<DialogTrigger asChild>
+				<Button variant="secondary">
+					<Fingerprint className="size-4 text-muted-foreground" />
+					Passkeys
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-xl">
+				<DialogHeader>
+					<DialogTitle>Passkeys</DialogTitle>
+					<DialogDescription>
+						Sign in without a password using your device's biometrics, security
+						key, or password manager.
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="space-y-4">
+					{isLoading ? (
+						<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[10vh]">
+							<span>Loading...</span>
+							<Loader2 className="animate-spin size-4" />
+						</div>
+					) : passkeys && passkeys.length > 0 ? (
+						<div className="grid gap-3">
+							{passkeys.map((passkey) => (
+								<div
+									key={passkey.id}
+									className="flex items-center justify-between gap-2 p-4 border rounded-lg"
+								>
+									<div className="flex flex-col gap-1 min-w-0">
+										<span className="font-medium flex items-center gap-2">
+											<Fingerprint className="size-4 text-muted-foreground shrink-0" />
+											<span className="truncate">
+												{passkey.name || "Unnamed passkey"}
+											</span>
+											<Badge variant="outline">
+												{passkey.deviceType === "singleDevice"
+													? "Device"
+													: "Synced"}
+											</Badge>
+										</span>
+										{passkey.createdAt && (
+											<DateTooltip
+												date={passkey.createdAt.toString()}
+												className="text-sm"
+											>
+												Added
+											</DateTooltip>
+										)}
+									</div>
+									<DialogAction
+										title="Remove this passkey?"
+										description="You will no longer be able to sign in with it. This action cannot be undone."
+										onClick={() => handleDeletePasskey(passkey.id)}
+									>
+										<Button
+											variant="ghost"
+											size="icon"
+											isLoading={deletingId === passkey.id}
+											className="text-muted-foreground hover:text-destructive"
+										>
+											<Trash2 className="size-4" />
+										</Button>
+									</DialogAction>
+								</div>
+							))}
+						</div>
+					) : (
+						<div className="flex flex-col items-center gap-2 py-6 text-sm text-muted-foreground border rounded-lg">
+							<Fingerprint className="size-6" />
+							<span>No passkeys registered yet</span>
+						</div>
+					)}
+
+					<form onSubmit={handleAddPasskey} className="flex flex-col gap-2">
+						<Label htmlFor="passkey-name">Passkey Name</Label>
+						<div className="flex gap-2">
+							<Input
+								id="passkey-name"
+								placeholder="e.g. MacBook Touch ID"
+								value={name}
+								onChange={(e) => setName(e.target.value)}
+							/>
+							<Button type="submit" isLoading={isAdding}>
+								<Plus className="size-4" />
+								Add Passkey
+							</Button>
+						</div>
+					</form>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/settings/profile/profile-form.tsx

@@ -31,6 +31,7 @@ import { generateSHA256Hash, getFallbackAvatarInitials } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { Configure2FA } from "./configure-2fa";
 import { Enable2FA } from "./enable-2fa";
+import { ManagePasskeys } from "./manage-passkeys";
 
 const profileSchema = z.object({
 	email: z
@@ -162,7 +163,10 @@ export const ProfileForm = () => {
 							</CardDescription>
 						</div>
 
-						{!data?.user.twoFactorEnabled ? <Enable2FA /> : <Configure2FA />}
+						<div className="flex flex-row gap-2 flex-wrap">
+							<ManagePasskeys />
+							{!data?.user.twoFactorEnabled ? <Enable2FA /> : <Configure2FA />}
+						</div>
 					</CardHeader>
 
 					<CardContent className="space-y-2 py-8 border-t">

apps/dokploy/components/dashboard/settings/servers/actions/show-dokploy-actions.tsx

@@ -19,8 +19,6 @@ export const ShowDokployActions = () => {
 	const { mutateAsync: reloadServer, isPending } =
 		api.settings.reloadServer.useMutation();
 
-	const { mutateAsync: cleanRedis } = api.settings.cleanRedis.useMutation();
-	const { mutateAsync: reloadRedis } = api.settings.reloadRedis.useMutation();
 	const { mutateAsync: cleanAllDeploymentQueue } =
 		api.settings.cleanAllDeploymentQueue.useMutation();
 
@@ -70,21 +68,6 @@ export const ShowDokployActions = () => {
 						</DropdownMenuItem>
 					</UpdateServerIp>
 
-					<DropdownMenuItem
-						className="cursor-pointer"
-						onClick={async () => {
-							await cleanRedis()
-								.then(async () => {
-									toast.success("Redis cleaned");
-								})
-								.catch(() => {
-									toast.error("Error cleaning Redis");
-								});
-						}}
-					>
-						Clean Redis
-					</DropdownMenuItem>
-
 					<DropdownMenuItem
 						className="cursor-pointer"
 						onClick={async () => {
@@ -99,21 +82,6 @@ export const ShowDokployActions = () => {
 					>
 						Clean all deployment queue
 					</DropdownMenuItem>
-
-					<DropdownMenuItem
-						className="cursor-pointer"
-						onClick={async () => {
-							await reloadRedis()
-								.then(async () => {
-									toast.success("Redis reloaded");
-								})
-								.catch(() => {
-									toast.error("Error reloading Redis");
-								});
-						}}
-					>
-						Reload Redis
-					</DropdownMenuItem>
 				</DropdownMenuGroup>
 			</DropdownMenuContent>
 		</DropdownMenu>

apps/dokploy/components/dashboard/settings/vault/handle-vault-provider.tsx

@@ -0,0 +1,945 @@
+import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
+import { PenBoxIcon, PlusIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { vaultProviderIcons } from "@/components/icons/vault-provider-icons";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+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 { api } from "@/utils/api";
+
+const providerLabels = {
+	hashicorp: "HashiCorp Vault / OpenBao",
+	infisical: "Infisical",
+	aws: "AWS Secrets Manager",
+	doppler: "Doppler",
+	azure: "Azure Key Vault",
+} as const;
+
+type ProviderType = keyof typeof providerLabels;
+
+const VaultProviderSchema = z
+	.object({
+		name: z
+			.string()
+			.min(1, { message: "Name is required" })
+			.regex(/^[a-zA-Z0-9_-]+$/, {
+				message:
+					"Only letters, numbers, dashes and underscores (used in ${{vault.<name>.<secret>}})",
+			}),
+		providerType: z.enum(["hashicorp", "infisical", "aws", "doppler", "azure"]),
+		url: z.string(),
+		token: z.string(),
+		namespace: z.string(),
+		mount: z.string(),
+		siteUrl: z.string(),
+		clientId: z.string(),
+		clientSecret: z.string(),
+		projectId: z.string(),
+		environmentSlug: z.string(),
+		secretPath: z.string(),
+		region: z.string(),
+		accessKeyId: z.string(),
+		secretAccessKey: z.string(),
+		serviceToken: z.string(),
+		awsEndpoint: z.string(),
+		vaultUri: z.string(),
+		tenantId: z.string(),
+		azureClientId: z.string(),
+		azureClientSecret: z.string(),
+		dopplerProject: z.string(),
+		dopplerConfig: z.string(),
+		assignments: z.array(
+			z.object({
+				projectId: z.string(),
+				environmentIds: z.array(z.string()),
+			}),
+		),
+	})
+	.superRefine((data, ctx) => {
+		const isValidUrl = (value: string) => {
+			try {
+				new URL(value);
+				return true;
+			} catch {
+				return false;
+			}
+		};
+
+		if (
+			data.providerType === "hashicorp" &&
+			data.url &&
+			!isValidUrl(data.url)
+		) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Enter a valid URL (e.g. https://vault.example.com:8200)",
+				path: ["url"],
+			});
+		}
+		if (
+			data.providerType === "azure" &&
+			data.vaultUri &&
+			!isValidUrl(data.vaultUri)
+		) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Enter a valid URL (e.g. https://my-vault.vault.azure.net)",
+				path: ["vaultUri"],
+			});
+		}
+		if (
+			data.providerType === "aws" &&
+			data.awsEndpoint &&
+			!isValidUrl(data.awsEndpoint)
+		) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Enter a valid URL",
+				path: ["awsEndpoint"],
+			});
+		}
+		if (
+			data.providerType === "infisical" &&
+			data.siteUrl &&
+			!isValidUrl(data.siteUrl)
+		) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Enter a valid URL (e.g. https://app.infisical.com)",
+				path: ["siteUrl"],
+			});
+		}
+
+		const required: Partial<
+			Record<ProviderType, [keyof typeof data, string][]>
+		> = {
+			hashicorp: [
+				["url", "Vault URL is required"],
+				["token", "Token is required"],
+				["mount", "Mount is required"],
+			],
+			infisical: [
+				["siteUrl", "Site URL is required"],
+				["clientId", "Client ID is required"],
+				["clientSecret", "Client Secret is required"],
+				["projectId", "Project ID is required"],
+				["environmentSlug", "Environment is required"],
+			],
+			aws: [
+				["region", "Region is required"],
+				["accessKeyId", "Access Key ID is required"],
+				["secretAccessKey", "Secret Access Key is required"],
+			],
+			doppler: [["serviceToken", "Service Token is required"]],
+			azure: [
+				["vaultUri", "Vault URI is required"],
+				["tenantId", "Tenant ID is required"],
+				["azureClientId", "Client ID is required"],
+				["azureClientSecret", "Client Secret is required"],
+			],
+		};
+
+		for (const [field, message] of required[data.providerType] ?? []) {
+			if (!data[field]) {
+				ctx.addIssue({
+					code: z.ZodIssueCode.custom,
+					message,
+					path: [field],
+				});
+			}
+		}
+
+		if (
+			data.providerType === "doppler" &&
+			data.serviceToken &&
+			!data.serviceToken.startsWith("dp.st.") &&
+			data.serviceToken !== "********"
+		) {
+			for (const field of ["dopplerProject", "dopplerConfig"] as const) {
+				if (!data[field]) {
+					ctx.addIssue({
+						code: z.ZodIssueCode.custom,
+						message: "Required for personal/CLI tokens (dp.pt. / dp.ct.)",
+						path: [field],
+					});
+				}
+			}
+		}
+	});
+
+type VaultProviderForm = z.infer<typeof VaultProviderSchema>;
+
+const defaultValues: VaultProviderForm = {
+	name: "",
+	providerType: "hashicorp",
+	url: "",
+	token: "",
+	namespace: "",
+	mount: "secret",
+	siteUrl: "https://app.infisical.com",
+	clientId: "",
+	clientSecret: "",
+	projectId: "",
+	environmentSlug: "",
+	secretPath: "/",
+	region: "",
+	accessKeyId: "",
+	secretAccessKey: "",
+	serviceToken: "",
+	awsEndpoint: "",
+	vaultUri: "",
+	tenantId: "",
+	azureClientId: "",
+	azureClientSecret: "",
+	dopplerProject: "",
+	dopplerConfig: "",
+	assignments: [],
+};
+
+const buildConfig = (data: VaultProviderForm) => {
+	switch (data.providerType) {
+		case "hashicorp":
+			return {
+				providerType: "hashicorp" as const,
+				url: data.url,
+				token: data.token,
+				namespace: data.namespace || undefined,
+				mount: data.mount || "secret",
+			};
+		case "infisical":
+			return {
+				providerType: "infisical" as const,
+				siteUrl: data.siteUrl || "https://app.infisical.com",
+				clientId: data.clientId,
+				clientSecret: data.clientSecret,
+				projectId: data.projectId,
+				environmentSlug: data.environmentSlug,
+				secretPath: data.secretPath || "/",
+			};
+		case "aws":
+			return {
+				providerType: "aws" as const,
+				region: data.region,
+				accessKeyId: data.accessKeyId,
+				secretAccessKey: data.secretAccessKey,
+				endpoint: data.awsEndpoint || undefined,
+			};
+		case "doppler":
+			return {
+				providerType: "doppler" as const,
+				serviceToken: data.serviceToken,
+				project: data.dopplerProject || undefined,
+				config: data.dopplerConfig || undefined,
+			};
+		case "azure":
+			return {
+				providerType: "azure" as const,
+				vaultUri: data.vaultUri,
+				tenantId: data.tenantId,
+				clientId: data.azureClientId,
+				clientSecret: data.azureClientSecret,
+			};
+	}
+};
+
+const extractErrorMessage = (err: unknown) => {
+	if (!(err instanceof Error)) return undefined;
+	try {
+		const issues = JSON.parse(err.message) as { message?: string }[];
+		if (Array.isArray(issues)) {
+			return issues
+				.map((issue) => issue.message)
+				.filter(Boolean)
+				.join(", ");
+		}
+	} catch {}
+	return err.message;
+};
+
+interface Props {
+	vaultProviderId?: string;
+}
+
+export const HandleVaultProvider = ({ vaultProviderId }: Props) => {
+	const utils = api.useUtils();
+	const [isOpen, setIsOpen] = useState(false);
+
+	const { data: provider } = api.vaultProvider.one.useQuery(
+		{ vaultProviderId: vaultProviderId || "" },
+		{ enabled: !!vaultProviderId && isOpen },
+	);
+
+	const { mutateAsync, isPending, error, isError } = vaultProviderId
+		? api.vaultProvider.update.useMutation()
+		: api.vaultProvider.create.useMutation();
+
+	const { mutateAsync: testConnection, isPending: isTesting } =
+		api.vaultProvider.testConnection.useMutation();
+
+	const form = useForm<VaultProviderForm>({
+		defaultValues,
+		resolver: zodResolver(VaultProviderSchema),
+	});
+
+	const providerType = form.watch("providerType");
+	const assignments = form.watch("assignments");
+	const { data: orgProjects } = api.project.all.useQuery();
+
+	const setAssignments = (
+		next: { projectId: string; environmentIds: string[] }[],
+	) => form.setValue("assignments", next, { shouldValidate: true });
+
+	const toggleProject = (targetProjectId: string) => {
+		const exists = assignments.some((a) => a.projectId === targetProjectId);
+		setAssignments(
+			exists
+				? assignments.filter((a) => a.projectId !== targetProjectId)
+				: [...assignments, { projectId: targetProjectId, environmentIds: [] }],
+		);
+	};
+
+	const toggleEnvironment = (
+		targetProjectId: string,
+		environmentId: string,
+	) => {
+		setAssignments(
+			assignments.map((a) => {
+				if (a.projectId !== targetProjectId) return a;
+				const has = a.environmentIds.includes(environmentId);
+				return {
+					...a,
+					environmentIds: has
+						? a.environmentIds.filter((e) => e !== environmentId)
+						: [...a.environmentIds, environmentId],
+				};
+			}),
+		);
+	};
+
+	useEffect(() => {
+		if (provider) {
+			form.reset({
+				...defaultValues,
+				name: provider.name,
+				providerType: provider.config.providerType,
+				assignments: provider.assignments ?? [],
+				...(provider.config.providerType === "hashicorp" && {
+					url: provider.config.url,
+					token: provider.config.token,
+					namespace: provider.config.namespace ?? "",
+					mount: provider.config.mount,
+				}),
+				...(provider.config.providerType === "infisical" && {
+					siteUrl: provider.config.siteUrl,
+					clientId: provider.config.clientId,
+					clientSecret: provider.config.clientSecret,
+					projectId: provider.config.projectId,
+					environmentSlug: provider.config.environmentSlug,
+					secretPath: provider.config.secretPath,
+				}),
+				...(provider.config.providerType === "aws" && {
+					region: provider.config.region,
+					accessKeyId: provider.config.accessKeyId,
+					secretAccessKey: provider.config.secretAccessKey,
+					awsEndpoint: provider.config.endpoint ?? "",
+				}),
+				...(provider.config.providerType === "doppler" && {
+					serviceToken: provider.config.serviceToken,
+					dopplerProject: provider.config.project ?? "",
+					dopplerConfig: provider.config.config ?? "",
+				}),
+				...(provider.config.providerType === "azure" && {
+					vaultUri: provider.config.vaultUri,
+					tenantId: provider.config.tenantId,
+					azureClientId: provider.config.clientId,
+					azureClientSecret: provider.config.clientSecret,
+				}),
+			});
+		} else if (!vaultProviderId) {
+			form.reset(defaultValues);
+		}
+	}, [provider, vaultProviderId, form, isOpen]);
+
+	const onSubmit = async (data: VaultProviderForm) => {
+		const payload: any = {
+			name: data.name,
+			config: buildConfig(data),
+			assignments: data.assignments,
+			...(vaultProviderId && { vaultProviderId }),
+		};
+		await mutateAsync(payload)
+			.then(() => {
+				toast.success(
+					vaultProviderId ? "Vault provider updated" : "Vault provider created",
+				);
+				utils.vaultProvider.all.invalidate();
+				setIsOpen(false);
+			})
+			.catch(() => {});
+	};
+
+	const onTestConnection = async () => {
+		const isValid = await form.trigger();
+		if (!isValid) {
+			return;
+		}
+		const data = form.getValues();
+		await testConnection({
+			config: buildConfig(data),
+			...(vaultProviderId && { vaultProviderId }),
+		})
+			.then(() => {
+				toast.success("Connection successful");
+			})
+			.catch((err) => {
+				toast.error("Connection failed", {
+					description: extractErrorMessage(err),
+				});
+			});
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				{vaultProviderId ? (
+					<Button
+						variant="ghost"
+						size="icon"
+						className="group hover:bg-blue-500/10"
+					>
+						<PenBoxIcon className="size-4 text-primary group-hover:text-blue-500" />
+					</Button>
+				) : (
+					<Button className="cursor-pointer space-x-3">
+						<PlusIcon className="h-4 w-4" />
+						Add Provider
+					</Button>
+				)}
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>
+						{vaultProviderId ? "Update Vault Provider" : "Add Vault Provider"}
+					</DialogTitle>
+					<DialogDescription>
+						Reference secrets in your environment variables with{" "}
+						<code>{"${{vault.<name>.<secret>}}"}</code>. Secrets are fetched at
+						deploy time and never stored in Dokploy.
+					</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+				<Form {...form}>
+					<form
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Name</FormLabel>
+									<FormControl>
+										<Input placeholder="prod-vault" {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="providerType"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Provider</FormLabel>
+									<Select
+										onValueChange={field.onChange}
+										value={field.value}
+										disabled={!!vaultProviderId}
+									>
+										<FormControl>
+											<SelectTrigger>
+												<SelectValue placeholder="Select a provider" />
+											</SelectTrigger>
+										</FormControl>
+										<SelectContent>
+											{Object.entries(providerLabels).map(([value, label]) => {
+												const ProviderIcon =
+													vaultProviderIcons[value as ProviderType];
+												return (
+													<SelectItem key={value} value={value}>
+														<div className="flex flex-row items-center gap-2">
+															<ProviderIcon className="size-4 shrink-0" />
+															{label}
+														</div>
+													</SelectItem>
+												);
+											})}
+										</SelectContent>
+									</Select>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						{providerType === "hashicorp" && (
+							<>
+								<FormField
+									control={form.control}
+									name="url"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Vault URL</FormLabel>
+											<FormControl>
+												<Input
+													placeholder="https://vault.example.com:8200"
+													{...field}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="token"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Token</FormLabel>
+											<FormControl>
+												<Input type="password" {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<div className="grid grid-cols-2 gap-4">
+									<FormField
+										control={form.control}
+										name="mount"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>KV Mount</FormLabel>
+												<FormControl>
+													<Input placeholder="secret" {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+									<FormField
+										control={form.control}
+										name="namespace"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Namespace (optional)</FormLabel>
+												<FormControl>
+													<Input placeholder="admin" {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								</div>
+								<FormDescription>
+									Reference format:{" "}
+									<code>{"${{vault.<name>.path/to/secret:FIELD}}"}</code>
+								</FormDescription>
+							</>
+						)}
+
+						{providerType === "infisical" && (
+							<>
+								<FormField
+									control={form.control}
+									name="siteUrl"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Site URL</FormLabel>
+											<FormControl>
+												<Input
+													placeholder="https://app.infisical.com"
+													{...field}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<div className="grid grid-cols-2 gap-4">
+									<FormField
+										control={form.control}
+										name="clientId"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Client ID</FormLabel>
+												<FormControl>
+													<Input {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+									<FormField
+										control={form.control}
+										name="clientSecret"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Client Secret</FormLabel>
+												<FormControl>
+													<Input type="password" {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								</div>
+								<div className="grid grid-cols-2 gap-4">
+									<FormField
+										control={form.control}
+										name="projectId"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Project ID</FormLabel>
+												<FormControl>
+													<Input {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+									<FormField
+										control={form.control}
+										name="environmentSlug"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Environment</FormLabel>
+												<FormControl>
+													<Input placeholder="prod" {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								</div>
+								<FormField
+									control={form.control}
+									name="secretPath"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Secret Path</FormLabel>
+											<FormControl>
+												<Input placeholder="/" {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							</>
+						)}
+
+						{providerType === "aws" && (
+							<>
+								<FormField
+									control={form.control}
+									name="region"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Region</FormLabel>
+											<FormControl>
+												<Input placeholder="us-east-1" {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="accessKeyId"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Access Key ID</FormLabel>
+											<FormControl>
+												<Input {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="secretAccessKey"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Secret Access Key</FormLabel>
+											<FormControl>
+												<Input type="password" {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="awsEndpoint"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Endpoint (optional)</FormLabel>
+											<FormControl>
+												<Input placeholder="http://localhost:4566" {...field} />
+											</FormControl>
+											<FormDescription>
+												Custom endpoint for VPC endpoints or API-compatible
+												emulators
+											</FormDescription>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormDescription>
+									Reference format:{" "}
+									<code>{"${{vault.<name>.secret-name}}"}</code> or{" "}
+									<code>{"${{vault.<name>.secret-name:field}}"}</code> for JSON
+									secrets
+								</FormDescription>
+							</>
+						)}
+
+						{providerType === "azure" && (
+							<>
+								<FormField
+									control={form.control}
+									name="vaultUri"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Vault URI</FormLabel>
+											<FormControl>
+												<Input
+													placeholder="https://my-vault.vault.azure.net"
+													{...field}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="tenantId"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Tenant ID</FormLabel>
+											<FormControl>
+												<Input {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<div className="grid grid-cols-2 gap-4">
+									<FormField
+										control={form.control}
+										name="azureClientId"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Client ID</FormLabel>
+												<FormControl>
+													<Input {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+									<FormField
+										control={form.control}
+										name="azureClientSecret"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Client Secret</FormLabel>
+												<FormControl>
+													<Input type="password" {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								</div>
+								<FormDescription>
+									App Registration with the "Key Vault Secrets User" role on the
+									vault. Reference format:{" "}
+									<code>{"${{vault.<name>.secret-name}}"}</code>
+								</FormDescription>
+							</>
+						)}
+
+						{providerType === "doppler" && (
+							<>
+								<FormField
+									control={form.control}
+									name="serviceToken"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Token</FormLabel>
+											<FormControl>
+												<Input
+													type="password"
+													placeholder="dp.st..."
+													{...field}
+												/>
+											</FormControl>
+											<FormDescription>
+												Service tokens (dp.st.) are recommended: read-only and
+												scoped to a single project + config
+											</FormDescription>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<div className="grid grid-cols-2 gap-4">
+									<FormField
+										control={form.control}
+										name="dopplerProject"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Project (optional)</FormLabel>
+												<FormControl>
+													<Input placeholder="my-project" {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+									<FormField
+										control={form.control}
+										name="dopplerConfig"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Config (optional)</FormLabel>
+												<FormControl>
+													<Input placeholder="prd" {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								</div>
+								<FormDescription>
+									Only needed for personal (dp.pt.) or CLI (dp.ct.) tokens —
+									service tokens already carry them
+								</FormDescription>
+							</>
+						)}
+
+						<div className="flex flex-col gap-2 rounded-lg border p-3">
+							<FormLabel>Access</FormLabel>
+							<FormDescription>
+								This provider can only be referenced from the selected projects.
+								Pick environments to narrow it further — none selected means all
+								environments of that project.
+							</FormDescription>
+							<div className="flex flex-col gap-2">
+								{orgProjects?.map((project) => {
+									const assignment = assignments.find(
+										(a) => a.projectId === project.projectId,
+									);
+									return (
+										<div
+											key={project.projectId}
+											className="flex flex-col gap-1.5"
+										>
+											<label className="flex flex-row items-center gap-2 text-sm cursor-pointer">
+												<Checkbox
+													checked={!!assignment}
+													onCheckedChange={() =>
+														toggleProject(project.projectId)
+													}
+												/>
+												{project.name}
+											</label>
+											{assignment && (
+												<div className="flex flex-row flex-wrap gap-3 pl-6">
+													{project.environments?.map((environment) => (
+														<label
+															key={environment.environmentId}
+															className="flex flex-row items-center gap-1.5 text-xs text-muted-foreground cursor-pointer"
+														>
+															<Checkbox
+																checked={assignment.environmentIds.includes(
+																	environment.environmentId,
+																)}
+																onCheckedChange={() =>
+																	toggleEnvironment(
+																		project.projectId,
+																		environment.environmentId,
+																	)
+																}
+															/>
+															{environment.name}
+														</label>
+													))}
+													{assignment.environmentIds.length === 0 && (
+														<span className="text-xs text-muted-foreground italic self-center">
+															All environments
+														</span>
+													)}
+												</div>
+											)}
+										</div>
+									);
+								})}
+							</div>
+							{form.formState.errors.assignments && (
+								<p className="text-sm font-medium text-destructive">
+									{form.formState.errors.assignments.message}
+								</p>
+							)}
+						</div>
+
+						<DialogFooter className="flex w-full flex-row justify-between gap-2 sm:justify-between">
+							<Button
+								type="button"
+								variant="secondary"
+								isLoading={isTesting}
+								onClick={onTestConnection}
+							>
+								Test Connection
+							</Button>
+							<Button type="submit" isLoading={isPending}>
+								{vaultProviderId ? "Update" : "Create"}
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/settings/vault/show-vault-providers.tsx

@@ -0,0 +1,166 @@
+import { Loader2, Trash2, Vault } from "lucide-react";
+import { toast } from "sonner";
+import { vaultProviderIcons } from "@/components/icons/vault-provider-icons";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { HandleVaultProvider } from "./handle-vault-provider";
+
+const providerLabels: Record<string, string> = {
+	hashicorp: "HashiCorp Vault",
+	infisical: "Infisical",
+	aws: "AWS Secrets Manager",
+	doppler: "Doppler",
+	azure: "Azure Key Vault",
+};
+
+export const ShowVaultProviders = () => {
+	const { mutateAsync, isPending: isRemoving } =
+		api.vaultProvider.remove.useMutation();
+	const { data, isPending, refetch } = api.vaultProvider.all.useQuery();
+	const { data: permissions } = api.user.getPermissions.useQuery();
+
+	return (
+		<div className="w-full">
+			<Card className="h-full bg-sidebar p-2.5 rounded-xl max-w-5xl mx-auto">
+				<div className="rounded-xl bg-background shadow-md">
+					<CardHeader>
+						<CardTitle className="text-xl flex flex-row gap-2">
+							<Vault className="size-6 text-muted-foreground self-center" />
+							Secrets Providers
+						</CardTitle>
+						<CardDescription>
+							Connect external secret managers and reference their secrets in
+							environment variables with{" "}
+							<code>{"${{vault.<name>.<secret>}}"}</code>
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-2 py-8 border-t">
+						{isPending ? (
+							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[25vh]">
+								<span>Loading...</span>
+								<Loader2 className="animate-spin size-4" />
+							</div>
+						) : (
+							<>
+								{data?.length === 0 ? (
+									<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
+										<Vault className="size-8 self-center text-muted-foreground" />
+										<span className="text-base text-muted-foreground text-center">
+											You don't have any secrets providers configured
+										</span>
+										{permissions?.vaultProvider.create && (
+											<HandleVaultProvider />
+										)}
+									</div>
+								) : (
+									<div className="flex flex-col gap-4 min-h-[25vh]">
+										<div className="flex flex-col gap-4 rounded-lg">
+											{data?.map((provider) => {
+												const ProviderIcon =
+													vaultProviderIcons[provider.providerType];
+												return (
+													<div
+														key={provider.vaultProviderId}
+														className="flex items-center justify-between bg-sidebar p-1 w-full rounded-lg"
+													>
+														<div className="flex items-center justify-between p-3.5 rounded-lg bg-background border w-full">
+															<div className="flex flex-row items-center gap-3">
+																<ProviderIcon className="size-7 shrink-0" />
+																<div className="flex gap-2 flex-col">
+																	<span className="text-sm font-medium">
+																		{provider.name}
+																	</span>
+																	<div className="flex flex-row gap-2 items-center">
+																		{provider.assignments.length === 0 ? (
+																			<Badge variant="destructive">
+																				Not assigned
+																			</Badge>
+																		) : (
+																			<Badge variant="secondary">
+																				{provider.assignments.length}{" "}
+																				{provider.assignments.length === 1
+																					? "project"
+																					: "projects"}
+																			</Badge>
+																		)}
+																		<Badge variant="outline">
+																			{providerLabels[provider.providerType] ??
+																				provider.providerType}
+																		</Badge>
+																		<span className="text-xs text-muted-foreground">
+																			{"${{vault." + provider.name + ".…}}"}
+																		</span>
+																	</div>
+																</div>
+															</div>
+
+															<div className="flex flex-row gap-1">
+																{permissions?.vaultProvider.update && (
+																	<HandleVaultProvider
+																		vaultProviderId={provider.vaultProviderId}
+																	/>
+																)}
+																{permissions?.vaultProvider.delete && (
+																	<DialogAction
+																		title="Delete Secrets Provider"
+																		description="Deployments referencing this provider will fail. Are you sure?"
+																		type="destructive"
+																		onClick={async () => {
+																			await mutateAsync({
+																				vaultProviderId:
+																					provider.vaultProviderId,
+																			})
+																				.then(() => {
+																					toast.success(
+																						"Secrets provider deleted",
+																					);
+																					refetch();
+																				})
+																				.catch(() => {
+																					toast.error(
+																						"Error deleting the secrets provider",
+																					);
+																				});
+																		}}
+																	>
+																		<Button
+																			variant="ghost"
+																			size="icon"
+																			className="group hover:bg-red-500/10"
+																			isLoading={isRemoving}
+																		>
+																			<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+																		</Button>
+																	</DialogAction>
+																)}
+															</div>
+														</div>
+													</div>
+												);
+											})}
+										</div>
+
+										{permissions?.vaultProvider.create && (
+											<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
+												<HandleVaultProvider />
+											</div>
+										)}
+									</div>
+								)}
+							</>
+						)}
+					</CardContent>
+				</div>
+			</Card>
+		</div>
+	);
+};

apps/dokploy/components/dashboard/settings/web-domain.tsx

@@ -43,7 +43,8 @@ const addServerDomain = z
 			.string()
 			.trim()
 			.toLowerCase()
-			.refine((val) => VALID_HOSTNAME_REGEX.test(val), {
+			// empty clears the server domain and reverts to IP-only access
+			.refine((val) => val === "" || VALID_HOSTNAME_REGEX.test(val), {
 				message: INVALID_HOSTNAME_MESSAGE,
 			}),
 		letsEncryptEmail: z.string(),
@@ -51,7 +52,7 @@ const addServerDomain = z
 		certificateType: z.enum(["letsencrypt", "none", "custom"]),
 	})
 	.superRefine((data, ctx) => {
-		if (data.https && !data.certificateType) {
+		if (data.domain && data.https && !data.certificateType) {
 			ctx.addIssue({
 				code: z.ZodIssueCode.custom,
 				path: ["certificateType"],
@@ -59,6 +60,7 @@ const addServerDomain = z
 			});
 		}
 		if (
+			data.domain &&
 			data.https &&
 			data.certificateType === "letsencrypt" &&
 			!data.letsEncryptEmail

apps/dokploy/components/dashboard/settings/web-server/docker-terminal-modal.tsx

@@ -40,6 +40,7 @@ interface Props {
 	children?: React.ReactNode;
 	serverId?: string;
 	appType?: "stack" | "docker-compose";
+	serviceId?: string;
 }
 
 export const DockerTerminalModal = ({
@@ -47,6 +48,7 @@ export const DockerTerminalModal = ({
 	appName,
 	serverId,
 	appType,
+	serviceId,
 }: Props) => {
 	const { data, isPending } = api.docker.getContainersByAppNameMatch.useQuery(
 		{
@@ -131,6 +133,7 @@ export const DockerTerminalModal = ({
 					serverId={serverId || ""}
 					id="terminal"
 					containerId={containerId || "select-a-container"}
+					serviceId={serviceId}
 				/>
 				<Dialog open={confirmDialogOpen} onOpenChange={setConfirmDialogOpen}>
 					<DialogContent onEscapeKeyDown={(event) => event.preventDefault()}>

apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx

@@ -32,7 +32,9 @@ export const TerminalModal = ({
 	serverId,
 	asButton = false,
 }: Props) => {
-	const [terminalKey, setTerminalKey] = useState<string>(getTerminalKey());
+	const [terminalKey, setTerminalKey] = useState<string>(() =>
+		getTerminalKey(),
+	);
 	const [isOpen, setIsOpen] = useState(false);
 	const isLocalServer = serverId === "local";
 

apps/dokploy/components/dashboard/settings/web-server/terminal.tsx

@@ -6,6 +6,7 @@ import "@xterm/xterm/css/xterm.css";
 import { AttachAddon } from "@xterm/addon-attach";
 import { ClipboardAddon } from "@xterm/addon-clipboard";
 import { useTheme } from "next-themes";
+import { fixMacOsAltKeys } from "@/lib/terminal-keyboard";
 import { getLocalServerData } from "./local-server-config";
 
 interface Props {
@@ -58,6 +59,7 @@ export const Terminal: React.FC<Props> = ({ id, serverId }) => {
 		const addonAttach = new AttachAddon(ws);
 		const clipboardAddon = new ClipboardAddon();
 		term.loadAddon(clipboardAddon);
+		fixMacOsAltKeys(term);
 
 		// @ts-ignore
 		term.open(termRef.current);

apps/dokploy/components/dashboard/settings/web-server/update-webserver.tsx

@@ -30,7 +30,6 @@ type ServiceStatus = {
 
 type HealthResult = {
 	postgres: ServiceStatus;
-	redis: ServiceStatus;
 	traefik: ServiceStatus;
 };
 
@@ -89,7 +88,6 @@ export const UpdateWebServer = ({
 	const allHealthy =
 		healthResult &&
 		healthResult.postgres.status === "healthy" &&
-		healthResult.redis.status === "healthy" &&
 		healthResult.traefik.status === "healthy";
 
 	const checkIsUpdateFinished = async () => {
@@ -179,7 +177,7 @@ export const UpdateWebServer = ({
 							{modalState === "checking" && (
 								<span className="flex items-center gap-2">
 									<Loader2 className="animate-spin h-4 w-4" />
-									Checking PostgreSQL, Redis and Traefik...
+									Checking PostgreSQL and Traefik...
 								</span>
 							)}
 
@@ -190,10 +188,6 @@ export const UpdateWebServer = ({
 											name="PostgreSQL"
 											service={healthResult.postgres}
 										/>
-										<ServiceStatusItem
-											name="Redis"
-											service={healthResult.redis}
-										/>
 										<ServiceStatusItem
 											name="Traefik"
 											service={healthResult.traefik}

apps/dokploy/components/dashboard/shared/show-database-advanced-settings.tsx

@@ -1,5 +1,6 @@
 import { ShowResources } from "@/components/dashboard/application/advanced/show-resources";
 import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
+import { AssignNetworks } from "@/components/dashboard/networks/assign-networks";
 import { ShowCustomCommand } from "@/components/dashboard/postgres/advanced/show-custom-command";
 import { ShowClusterSettings } from "../application/advanced/cluster/show-cluster-settings";
 import { RebuildDatabase } from "./rebuild-database";
@@ -21,6 +22,7 @@ export const ShowDatabaseAdvancedSettings = ({ id, type }: Props) => {
 				<ShowClusterSettings id={id} type={type} />
 			) : null}
 			<ShowVolumes id={id} type={type} />
+			<AssignNetworks id={id} type={type} />
 			<ShowResources id={id} type={type} />
 			<RebuildDatabase id={id} type={type} />
 		</div>

apps/dokploy/components/dashboard/swarm/monitoring-card.tsx

@@ -27,50 +27,16 @@ export default function SwarmMonitorCard({ serverId }: Props) {
 		serverId,
 	});
 
-	if (isPending) {
-		return (
-			<div className="w-full max-w-7xl mx-auto">
-				<div className="mb-6 border min-h-[55vh] flex rounded-lg h-full items-center justify-center  text-muted-foreground">
-					{/* <div className="flex items-center justify-center h-full text-muted-foreground"> */}
-
-					<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[55vh]">
-						<span>Loading...</span>
-						<Loader2 className="animate-spin size-4" />
-					</div>
-					{/* </div> */}
-				</div>
-			</div>
-		);
-	}
-
-	if (!nodes) {
-		return (
-			<div className="w-full max-w-7xl mx-auto">
-				<div className="mb-6 border min-h-[55vh] flex justify-center items-center rounded-lg h-full">
-					<div className="flex items-center justify-center h-full  text-destructive">
-						<span>Failed to load data</span>
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-	const totalNodes = nodes.length;
-	const activeNodesCount = nodes.filter(
-		(node) => node.Status === "Ready",
-	).length;
-	const managerNodesCount = nodes.filter(
-		(node) =>
-			node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable",
-	).length;
-	const activeNodes = nodes.filter((node) => node.Status === "Ready");
-	const managerNodes = nodes.filter(
-		(node) =>
-			node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable",
-	);
+	const totalNodes = nodes?.length ?? 0;
+	const activeNodes = nodes?.filter((node) => node.Status === "Ready") ?? [];
+	const managerNodes =
+		nodes?.filter(
+			(node) =>
+				node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable",
+		) ?? [];
 
 	return (
-		<Card className="h-full bg-sidebar  p-2.5 rounded-xl mx-auto w-full">
+		<Card className="h-full bg-sidebar p-2.5 rounded-xl mx-auto w-full">
 			<div className="rounded-xl bg-background shadow-md p-6 flex flex-col gap-4">
 				<header className="flex items-center flex-wrap gap-4 justify-between">
 					<div className="space-y-1">
@@ -94,93 +60,114 @@ export default function SwarmMonitorCard({ serverId }: Props) {
 					)}
 				</header>
 
-				<div className="grid gap-6 lg:grid-cols-3">
-					<Card className="bg-background">
-						<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-							<CardTitle className="text-sm font-medium">Total Nodes</CardTitle>
-							<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
-								<Server className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
-							</div>
-						</CardHeader>
-						<CardContent>
-							<div className="text-2xl font-bold">{totalNodes}</div>
-						</CardContent>
-					</Card>
+				{isPending ? (
+					<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[45vh]">
+						<span>Loading...</span>
+						<Loader2 className="animate-spin size-4" />
+					</div>
+				) : !nodes ? (
+					<div className="flex items-center justify-center min-h-[45vh] text-destructive">
+						<span>Failed to load data</span>
+					</div>
+				) : (
+					<>
+						<div className="grid gap-6 lg:grid-cols-3">
+							<Card className="bg-background">
+								<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+									<CardTitle className="text-sm font-medium">
+										Total Nodes
+									</CardTitle>
+									<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
+										<Server className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
+									</div>
+								</CardHeader>
+								<CardContent>
+									<div className="text-2xl font-bold">{totalNodes}</div>
+								</CardContent>
+							</Card>
 
-					<Card className="bg-background">
-						<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-							<div className="flex items-center gap-2">
-								<CardTitle className="text-sm font-medium">
-									Active Nodes
-								</CardTitle>
-								<Badge variant="green">Online</Badge>
-							</div>
-							<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
-								<Activity className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
-							</div>
-						</CardHeader>
-						<CardContent>
-							<TooltipProvider>
-								<Tooltip>
-									<TooltipTrigger>
-										<div className="text-2xl font-bold">
-											{activeNodesCount} / {totalNodes}
-										</div>
-									</TooltipTrigger>
-									<TooltipContent>
-										<div className="max-h-48 overflow-y-auto">
-											{activeNodes.map((node) => (
-												<div key={node.ID} className="flex items-center gap-2">
-													{node.Hostname}
+							<Card className="bg-background">
+								<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+									<div className="flex items-center gap-2">
+										<CardTitle className="text-sm font-medium">
+											Active Nodes
+										</CardTitle>
+										<Badge variant="green">Online</Badge>
+									</div>
+									<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
+										<Activity className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
+									</div>
+								</CardHeader>
+								<CardContent>
+									<TooltipProvider>
+										<Tooltip>
+											<TooltipTrigger>
+												<div className="text-2xl font-bold">
+													{activeNodes.length} / {totalNodes}
 												</div>
-											))}
-										</div>
-									</TooltipContent>
-								</Tooltip>
-							</TooltipProvider>
-						</CardContent>
-					</Card>
-
-					<Card className="bg-background">
-						<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-							<div className="flex items-center gap-2">
-								<CardTitle className="text-sm font-medium">
-									Manager Nodes
-								</CardTitle>
-								<Badge variant="green">Online</Badge>
-							</div>
-							<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
-								<Monitor className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
-							</div>
-						</CardHeader>
-						<CardContent>
-							<TooltipProvider>
-								<Tooltip>
-									<TooltipTrigger>
-										<div className="text-2xl font-bold">
-											{managerNodesCount} / {totalNodes}
-										</div>
-									</TooltipTrigger>
-									<TooltipContent>
-										<div className="max-h-48 overflow-y-auto">
-											{managerNodes.map((node) => (
-												<div key={node.ID} className="flex items-center gap-2">
-													{node.Hostname}
+											</TooltipTrigger>
+											<TooltipContent>
+												<div className="max-h-48 overflow-y-auto">
+													{activeNodes.map((node) => (
+														<div
+															key={node.ID}
+															className="flex items-center gap-2"
+														>
+															{node.Hostname}
+														</div>
+													))}
 												</div>
-											))}
-										</div>
-									</TooltipContent>
-								</Tooltip>
-							</TooltipProvider>
-						</CardContent>
-					</Card>
-				</div>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+								</CardContent>
+							</Card>
 
-				<div className="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
-					{nodes.map((node) => (
-						<NodeCard key={node.ID} node={node} serverId={serverId} />
-					))}
-				</div>
+							<Card className="bg-background">
+								<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+									<div className="flex items-center gap-2">
+										<CardTitle className="text-sm font-medium">
+											Manager Nodes
+										</CardTitle>
+										<Badge variant="green">Online</Badge>
+									</div>
+									<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
+										<Monitor className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
+									</div>
+								</CardHeader>
+								<CardContent>
+									<TooltipProvider>
+										<Tooltip>
+											<TooltipTrigger>
+												<div className="text-2xl font-bold">
+													{managerNodes.length} / {totalNodes}
+												</div>
+											</TooltipTrigger>
+											<TooltipContent>
+												<div className="max-h-48 overflow-y-auto">
+													{managerNodes.map((node) => (
+														<div
+															key={node.ID}
+															className="flex items-center gap-2"
+														>
+															{node.Hostname}
+														</div>
+													))}
+												</div>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+								</CardContent>
+							</Card>
+						</div>
+
+						<div className="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
+							{nodes.map((node) => (
+								<NodeCard key={node.ID} node={node} serverId={serverId} />
+							))}
+						</div>
+					</>
+				)}
 			</div>
 		</Card>
 	);

apps/dokploy/components/icons/vault-provider-icons.tsx

@@ -0,0 +1,580 @@
+interface Props {
+	className?: string;
+}
+
+export const HashicorpVaultIcon = ({ className }: Props) => (
+	<svg
+		viewBox="0 0 24 24"
+		fill="currentColor"
+		xmlns="http://www.w3.org/2000/svg"
+		className={className}
+	>
+		<path d="M0 0l11.955 24L24 0zm13.366 4.827h1.393v1.38h-1.393zm-2.77 5.569H9.22V8.993h1.389zm0-2.087H9.22V6.906h1.389zm0-2.086H9.22V4.819h1.389zm2.087 6.263h-1.377V11.08h1.388zm0-2.09h-1.377V8.993h1.388zm0-2.087h-1.377V6.906h1.388zm0-2.086h-1.377V4.819h1.388zm.683.683h1.393v1.389h-1.393zm0 3.475V8.993h1.389v1.388Z" />
+	</svg>
+);
+
+export const InfisicalIcon = ({ className }: Props) => (
+	<svg
+		viewBox="0 0 91 43"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		className={className}
+	>
+		<path
+			d="M21.9734 0C24.8526 0 27.4793 0.412021 29.8535 1.23606C32.2528 2.06011 34.4123 3.13386 36.3318 4.45732C38.2766 5.75581 39.9814 7.10424 41.4463 8.50261C42.2545 9.25174 42.987 9.98839 43.6436 10.7125C44.3003 11.4367 44.9317 12.1609 45.5379 12.885C46.0935 12.1609 46.6618 11.4617 47.2427 10.7875C47.8489 10.0883 48.6066 9.32665 49.5158 8.50261C51.7132 6.38008 54.4409 4.43235 57.699 2.65941C60.9824 0.886471 64.7835 0 69.1024 0C73.1435 0 76.8183 0.97387 80.127 2.92161C83.4609 4.84437 86.1002 7.42886 88.045 10.6751C90.015 13.9213 91 17.5171 91 21.4625C91 24.4591 90.4317 27.2683 89.2952 29.8902C88.1586 32.4872 86.5927 34.7721 84.5974 36.7448C82.6021 38.6925 80.2785 40.2282 77.6266 41.3519C74.9746 42.4506 72.1332 43 69.1024 43C66.2231 43 63.5712 42.6005 61.1465 41.8014C58.7472 40.9774 56.5751 39.9286 54.6303 38.6551C52.7108 37.3815 51.0186 36.0706 49.5537 34.7221C48.7202 33.8981 47.9752 33.124 47.3185 32.3998C46.6871 31.6507 46.0935 30.9141 45.5379 30.1899C44.9065 30.9141 44.2624 31.6507 43.6057 32.3998C42.9491 33.149 42.2166 33.9231 41.4084 34.7221C39.9688 36.0706 38.2766 37.3815 36.3318 38.6551C34.4123 39.9036 32.2528 40.9399 29.8535 41.7639C27.4793 42.588 24.8526 43 21.9734 43C17.8818 43 14.1817 42.0386 10.873 40.1159C7.56439 38.1931 4.92506 35.6086 2.95504 32.3624C0.985013 29.0912 0 25.4579 0 21.4625C0 18.491 0.555648 15.7192 1.66694 13.1472C2.8035 10.5502 4.36941 8.26539 6.3647 6.29269C8.38523 4.31998 10.7215 2.78427 13.3734 1.68554C16.0507 0.561848 18.9173 0 21.9734 0ZM10.4563 21.4625C10.4563 23.5351 10.974 25.4204 12.0096 27.1185C13.0451 28.8165 14.4342 30.1649 16.1769 31.1638C17.9197 32.1626 19.8518 32.662 21.9734 32.662C24.3475 32.662 26.5322 32.1376 28.5275 31.0889C30.5228 30.0401 32.3791 28.7166 34.0966 27.1185C35.1826 26.0947 36.1171 25.1083 36.9001 24.1594C37.683 23.2105 38.365 22.3116 38.9459 21.4625C38.3397 20.6635 37.6199 19.777 36.7864 18.8031C35.9782 17.8043 35.0816 16.8554 34.0966 15.9564C32.4802 14.3833 30.649 13.0598 28.6032 11.9861C26.5575 10.8873 24.3475 10.338 21.9734 10.338C19.8518 10.338 17.9197 10.8499 16.1769 11.8737C14.4342 12.8725 13.0451 14.221 12.0096 15.919C10.974 17.592 10.4563 19.4399 10.4563 21.4625ZM80.4679 21.4625C80.4679 19.4399 79.9502 17.592 78.9146 15.919C77.9044 14.221 76.5405 12.8725 74.8231 11.8737C73.1056 10.8499 71.1987 10.338 69.1024 10.338C67.486 10.338 65.9453 10.5877 64.4804 11.0871C63.0155 11.5865 61.639 12.2607 60.351 13.1098C59.0881 13.9588 57.9263 14.9077 56.8655 15.9564C55.729 17.0052 54.7313 18.079 53.8726 19.1777C53.0139 20.2515 52.3951 21.0131 52.0162 21.4625C52.6477 22.3365 53.3549 23.248 54.1378 24.1969C54.9208 25.1208 55.83 26.0947 56.8655 27.1185C58.5577 28.7166 60.4015 30.0401 62.3968 31.0889C64.4173 32.1376 66.6525 32.662 69.1024 32.662C71.1987 32.662 73.1056 32.1626 74.8231 31.1638C76.5405 30.1649 77.9044 28.8165 78.9146 27.1185C79.9502 25.4204 80.4679 23.5351 80.4679 21.4625Z"
+			fill="currentColor"
+		/>
+	</svg>
+);
+
+export const AwsIcon = ({ className }: Props) => (
+	<svg
+		viewBox="0 0 304 182"
+		xmlns="http://www.w3.org/2000/svg"
+		className={className}
+	>
+		<path
+			fill="currentColor"
+			d="m86 66 2 9c0 3 1 5 3 8v2l-1 3-7 4-2 1-3-1-4-5-3-6c-8 9-18 14-29 14-9 0-16-3-20-8-5-4-8-11-8-19s3-15 9-20c6-6 14-8 25-8a79 79 0 0 1 22 3v-7c0-8-2-13-5-16-3-4-8-5-16-5l-11 1a80 80 0 0 0-14 5h-2c-1 0-2-1-2-3v-5l1-3c0-1 1-2 3-2l12-5 16-2c12 0 20 3 26 8 5 6 8 14 8 25v32zM46 82l10-2c4-1 7-4 10-7l3-6 1-9v-4a84 84 0 0 0-19-2c-6 0-11 1-15 4-3 2-4 6-4 11s1 8 3 11c3 2 6 4 11 4zm80 10-4-1-2-3-23-78-1-4 2-2h10l4 1 2 4 17 66 15-66 2-4 4-1h8l4 1 2 4 16 67 17-67 2-4 4-1h9c2 0 3 1 3 2v2l-1 2-24 78-2 4-4 1h-9l-4-1-1-4-16-65-15 64-2 4-4 1h-9zm129 3a66 66 0 0 1-27-6l-3-3-1-2v-5c0-2 1-3 2-3h2l3 1a54 54 0 0 0 23 5c6 0 11-2 14-4 4-2 5-5 5-9l-2-7-10-5-15-5c-7-2-13-6-16-10a24 24 0 0 1 5-34l10-5a44 44 0 0 1 20-2 110 110 0 0 1 12 3l4 2 3 2 1 4v4c0 3-1 4-2 4l-4-2c-6-2-12-3-19-3-6 0-11 0-14 2s-4 5-4 9c0 3 1 5 3 7s5 4 11 6l14 4c7 3 12 6 15 10s5 9 5 14l-3 12-7 8c-3 3-7 5-11 6l-14 2z"
+		/>
+		<path
+			d="M274 144A220 220 0 0 1 4 124c-4-3-1-6 2-4a300 300 0 0 0 263 16c5-2 10 4 5 8z"
+			fill="#f90"
+		/>
+		<path
+			d="M287 128c-4-5-28-3-38-1-4 0-4-3-1-5 19-13 50-9 53-5 4 5-1 36-18 51-3 2-6 1-5-2 5-10 13-33 9-38z"
+			fill="#f90"
+		/>
+	</svg>
+);
+
+export const DopplerIcon = ({ className }: Props) => (
+	<svg
+		viewBox="0 0 101 100"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		className={className}
+	>
+		<path
+			d="M64.3092 0.259394C60.1163 -0.864113 55.8423 1.77302 54.9657 6.02449L50.9884 25.3158C48.3904 37.9168 38.5465 47.7653 25.9467 50.3692L7.02287 54.2801C2.77187 55.1586 0.13598 59.4329 1.25947 63.6258C2.38309 67.8192 6.8038 70.2029 10.9248 68.8373L29.3407 62.7351C41.5851 58.6779 55.0695 62.291 63.6448 71.9269L76.5434 86.4207C79.4289 89.6631 84.4482 89.8092 87.5174 86.74C90.5871 83.6703 90.4404 78.6501 87.1969 75.7648L72.609 62.7885C62.9468 54.1936 59.3239 40.6746 63.3932 28.3998L69.5188 9.92278C70.8847 5.80285 68.5018 1.38278 64.3092 0.259394Z"
+			fill="url(#paint0_linear_1068_18455)"
+		/>
+		<path
+			d="M64.3092 0.259394C60.1163 -0.864113 55.8423 1.77302 54.9657 6.02449L50.9884 25.3158C48.3904 37.9168 38.5465 47.7653 25.9467 50.3692L7.02287 54.2801C2.77187 55.1586 0.13598 59.4329 1.25947 63.6258C2.38309 67.8192 6.8038 70.2029 10.9248 68.8373L29.3407 62.7351C41.5851 58.6779 55.0695 62.291 63.6448 71.9269L76.5434 86.4207C79.4289 89.6631 84.4482 89.8092 87.5174 86.74C90.5871 83.6703 90.4404 78.6501 87.1969 75.7648L72.609 62.7885C62.9468 54.1936 59.3239 40.6746 63.3932 28.3998L69.5188 9.92278C70.8847 5.80285 68.5018 1.38278 64.3092 0.259394Z"
+			fill="url(#paint1_linear_1068_18455)"
+			fill-opacity="0.46"
+		/>
+		<path
+			d="M64.3092 0.259394C60.1163 -0.864113 55.8423 1.77302 54.9657 6.02449L50.9884 25.3158C48.3904 37.9168 38.5465 47.7653 25.9467 50.3692L7.02287 54.2801C2.77187 55.1586 0.13598 59.4329 1.25947 63.6258C2.38309 67.8192 6.8038 70.2029 10.9248 68.8373L29.3407 62.7351C41.5851 58.6779 55.0695 62.291 63.6448 71.9269L76.5434 86.4207C79.4289 89.6631 84.4482 89.8092 87.5174 86.74C90.5871 83.6703 90.4404 78.6501 87.1969 75.7648L72.609 62.7885C62.9468 54.1936 59.3239 40.6746 63.3932 28.3998L69.5188 9.92278C70.8847 5.80285 68.5018 1.38278 64.3092 0.259394Z"
+			fill="url(#paint2_linear_1068_18455)"
+			fill-opacity="0.66"
+		/>
+		<path
+			d="M64.3092 0.259394C60.1163 -0.864113 55.8423 1.77302 54.9657 6.02449L50.9884 25.3158C48.3904 37.9168 38.5465 47.7653 25.9467 50.3692L7.02287 54.2801C2.77187 55.1586 0.13598 59.4329 1.25947 63.6258C2.38309 67.8192 6.8038 70.2029 10.9248 68.8373L29.3407 62.7351C41.5851 58.6779 55.0695 62.291 63.6448 71.9269L76.5434 86.4207C79.4289 89.6631 84.4482 89.8092 87.5174 86.74C90.5871 83.6703 90.4404 78.6501 87.1969 75.7648L72.609 62.7885C62.9468 54.1936 59.3239 40.6746 63.3932 28.3998L69.5188 9.92278C70.8847 5.80285 68.5018 1.38278 64.3092 0.259394Z"
+			fill="url(#paint3_linear_1068_18455)"
+			fill-opacity="0.67"
+		/>
+		<path
+			d="M64.3092 0.259394C60.1163 -0.864113 55.8423 1.77302 54.9657 6.02449L50.9884 25.3158C48.3904 37.9168 38.5465 47.7653 25.9467 50.3692L7.02287 54.2801C2.77187 55.1586 0.13598 59.4329 1.25947 63.6258C2.38309 67.8192 6.8038 70.2029 10.9248 68.8373L29.3407 62.7351C41.5851 58.6779 55.0695 62.291 63.6448 71.9269L76.5434 86.4207C79.4289 89.6631 84.4482 89.8092 87.5174 86.74C90.5871 83.6703 90.4404 78.6501 87.1969 75.7648L72.609 62.7885C62.9468 54.1936 59.3239 40.6746 63.3932 28.3998L69.5188 9.92278C70.8847 5.80285 68.5018 1.38278 64.3092 0.259394Z"
+			fill="url(#paint4_linear_1068_18455)"
+		/>
+		<path
+			d="M64.3092 0.259394C60.1163 -0.864113 55.8423 1.77302 54.9657 6.02449L50.9884 25.3158C48.3904 37.9168 38.5465 47.7653 25.9467 50.3692L7.02287 54.2801C2.77187 55.1586 0.13598 59.4329 1.25947 63.6258C2.38309 67.8192 6.8038 70.2029 10.9248 68.8373L29.3407 62.7351C41.5851 58.6779 55.0695 62.291 63.6448 71.9269L76.5434 86.4207C79.4289 89.6631 84.4482 89.8092 87.5174 86.74C90.5871 83.6703 90.4404 78.6501 87.1969 75.7648L72.609 62.7885C62.9468 54.1936 59.3239 40.6746 63.3932 28.3998L69.5188 9.92278C70.8847 5.80285 68.5018 1.38278 64.3092 0.259394Z"
+			fill="url(#paint5_radial_1068_18455)"
+			fill-opacity="0.94"
+		/>
+		<path
+			d="M64.3092 0.259394C60.1163 -0.864113 55.8423 1.77302 54.9657 6.02449L50.9884 25.3158C48.3904 37.9168 38.5465 47.7653 25.9467 50.3692L7.02287 54.2801C2.77187 55.1586 0.13598 59.4329 1.25947 63.6258C2.38309 67.8192 6.8038 70.2029 10.9248 68.8373L29.3407 62.7351C41.5851 58.6779 55.0695 62.291 63.6448 71.9269L76.5434 86.4207C79.4289 89.6631 84.4482 89.8092 87.5174 86.74C90.5871 83.6703 90.4404 78.6501 87.1969 75.7648L72.609 62.7885C62.9468 54.1936 59.3239 40.6746 63.3932 28.3998L69.5188 9.92278C70.8847 5.80285 68.5018 1.38278 64.3092 0.259394Z"
+			fill="url(#paint6_radial_1068_18455)"
+			fill-opacity="0.1"
+		/>
+		<path
+			d="M14.1852 24.3911C10.7562 21.2887 10.6228 15.9476 13.8926 12.6779C17.1623 9.40812 22.5033 9.54156 25.6057 12.9705L35.3591 23.7506C37.99 26.6584 37.8785 31.1183 35.1058 33.8911C32.333 36.6639 27.873 36.7753 24.9653 34.1444L14.1852 24.3911Z"
+			fill="url(#paint7_linear_1068_18455)"
+		/>
+		<path
+			d="M14.1852 24.3911C10.7562 21.2887 10.6228 15.9476 13.8926 12.6779C17.1623 9.40812 22.5033 9.54156 25.6057 12.9705L35.3591 23.7506C37.99 26.6584 37.8785 31.1183 35.1058 33.8911C32.333 36.6639 27.873 36.7753 24.9653 34.1444L14.1852 24.3911Z"
+			fill="url(#paint8_linear_1068_18455)"
+			fill-opacity="0.46"
+		/>
+		<path
+			d="M14.1852 24.3911C10.7562 21.2887 10.6228 15.9476 13.8926 12.6779C17.1623 9.40812 22.5033 9.54156 25.6057 12.9705L35.3591 23.7506C37.99 26.6584 37.8785 31.1183 35.1058 33.8911C32.333 36.6639 27.873 36.7753 24.9653 34.1444L14.1852 24.3911Z"
+			fill="url(#paint9_linear_1068_18455)"
+			fill-opacity="0.66"
+		/>
+		<path
+			d="M14.1852 24.3911C10.7562 21.2887 10.6228 15.9476 13.8926 12.6779C17.1623 9.40812 22.5033 9.54156 25.6057 12.9705L35.3591 23.7506C37.99 26.6584 37.8785 31.1183 35.1058 33.8911C32.333 36.6639 27.873 36.7753 24.9653 34.1444L14.1852 24.3911Z"
+			fill="url(#paint10_linear_1068_18455)"
+			fill-opacity="0.67"
+		/>
+		<path
+			d="M14.1852 24.3911C10.7562 21.2887 10.6228 15.9476 13.8926 12.6779C17.1623 9.40812 22.5033 9.54156 25.6057 12.9705L35.3591 23.7506C37.99 26.6584 37.8785 31.1183 35.1058 33.8911C32.333 36.6639 27.873 36.7753 24.9653 34.1444L14.1852 24.3911Z"
+			fill="url(#paint11_linear_1068_18455)"
+		/>
+		<path
+			d="M14.1852 24.3911C10.7562 21.2887 10.6228 15.9476 13.8926 12.6779C17.1623 9.40812 22.5033 9.54156 25.6057 12.9705L35.3591 23.7506C37.99 26.6584 37.8785 31.1183 35.1058 33.8911C32.333 36.6639 27.873 36.7753 24.9653 34.1444L14.1852 24.3911Z"
+			fill="url(#paint12_radial_1068_18455)"
+			fill-opacity="0.94"
+		/>
+		<path
+			d="M14.1852 24.3911C10.7562 21.2887 10.6228 15.9476 13.8926 12.6779C17.1623 9.40812 22.5033 9.54156 25.6057 12.9705L35.3591 23.7506C37.99 26.6584 37.8785 31.1183 35.1058 33.8911C32.333 36.6639 27.873 36.7753 24.9653 34.1444L14.1852 24.3911Z"
+			fill="url(#paint13_radial_1068_18455)"
+			fill-opacity="0.1"
+		/>
+		<path
+			d="M90.0279 30.3514C94.4292 28.933 99.1214 31.488 100.318 35.9545C101.515 40.4211 98.7289 44.9798 94.2081 45.9521L79.9957 49.0088C76.162 49.8333 72.3553 47.5068 71.3404 43.7191C70.3255 39.9314 72.459 36.0133 76.1912 34.8105L90.0279 30.3514Z"
+			fill="url(#paint14_linear_1068_18455)"
+		/>
+		<path
+			d="M90.0279 30.3514C94.4292 28.933 99.1214 31.488 100.318 35.9545C101.515 40.4211 98.7289 44.9798 94.2081 45.9521L79.9957 49.0088C76.162 49.8333 72.3553 47.5068 71.3404 43.7191C70.3255 39.9314 72.459 36.0133 76.1912 34.8105L90.0279 30.3514Z"
+			fill="url(#paint15_linear_1068_18455)"
+			fill-opacity="0.46"
+		/>
+		<path
+			d="M90.0279 30.3514C94.4292 28.933 99.1214 31.488 100.318 35.9545C101.515 40.4211 98.7289 44.9798 94.2081 45.9521L79.9957 49.0088C76.162 49.8333 72.3553 47.5068 71.3404 43.7191C70.3255 39.9314 72.459 36.0133 76.1912 34.8105L90.0279 30.3514Z"
+			fill="url(#paint16_linear_1068_18455)"
+			fill-opacity="0.66"
+		/>
+		<path
+			d="M90.0279 30.3514C94.4292 28.933 99.1214 31.488 100.318 35.9545C101.515 40.4211 98.7289 44.9798 94.2081 45.9521L79.9957 49.0088C76.162 49.8333 72.3553 47.5068 71.3404 43.7191C70.3255 39.9314 72.459 36.0133 76.1912 34.8105L90.0279 30.3514Z"
+			fill="url(#paint17_linear_1068_18455)"
+			fill-opacity="0.67"
+		/>
+		<path
+			d="M90.0279 30.3514C94.4292 28.933 99.1214 31.488 100.318 35.9545C101.515 40.4211 98.7289 44.9798 94.2081 45.9521L79.9957 49.0088C76.162 49.8333 72.3553 47.5068 71.3404 43.7191C70.3255 39.9314 72.459 36.0133 76.1912 34.8105L90.0279 30.3514Z"
+			fill="url(#paint18_linear_1068_18455)"
+		/>
+		<path
+			d="M90.0279 30.3514C94.4292 28.933 99.1214 31.488 100.318 35.9545C101.515 40.4211 98.7289 44.9798 94.2081 45.9521L79.9957 49.0088C76.162 49.8333 72.3553 47.5068 71.3404 43.7191C70.3255 39.9314 72.459 36.0133 76.1912 34.8105L90.0279 30.3514Z"
+			fill="url(#paint19_radial_1068_18455)"
+			fill-opacity="0.94"
+		/>
+		<path
+			d="M90.0279 30.3514C94.4292 28.933 99.1214 31.488 100.318 35.9545C101.515 40.4211 98.7289 44.9798 94.2081 45.9521L79.9957 49.0088C76.162 49.8333 72.3553 47.5068 71.3404 43.7191C70.3255 39.9314 72.459 36.0133 76.1912 34.8105L90.0279 30.3514Z"
+			fill="url(#paint20_radial_1068_18455)"
+			fill-opacity="0.1"
+		/>
+		<path
+			d="M46.5794 93.3443C45.6071 97.8651 41.0484 100.651 36.5818 99.4544C32.1152 98.2575 29.5603 93.5654 30.9786 89.1641L35.4378 75.3274C36.6405 71.5952 40.5587 69.4617 44.3464 70.4766C48.134 71.4915 50.4605 75.2982 49.636 79.1318L46.5794 93.3443Z"
+			fill="url(#paint21_linear_1068_18455)"
+		/>
+		<path
+			d="M46.5794 93.3443C45.6071 97.8651 41.0484 100.651 36.5818 99.4544C32.1152 98.2575 29.5603 93.5654 30.9786 89.1641L35.4378 75.3274C36.6405 71.5952 40.5587 69.4617 44.3464 70.4766C48.134 71.4915 50.4605 75.2982 49.636 79.1318L46.5794 93.3443Z"
+			fill="url(#paint22_linear_1068_18455)"
+			fill-opacity="0.46"
+		/>
+		<path
+			d="M46.5794 93.3443C45.6071 97.8651 41.0484 100.651 36.5818 99.4544C32.1152 98.2575 29.5603 93.5654 30.9786 89.1641L35.4378 75.3274C36.6405 71.5952 40.5587 69.4617 44.3464 70.4766C48.134 71.4915 50.4605 75.2982 49.636 79.1318L46.5794 93.3443Z"
+			fill="url(#paint23_linear_1068_18455)"
+			fill-opacity="0.66"
+		/>
+		<path
+			d="M46.5794 93.3443C45.6071 97.8651 41.0484 100.651 36.5818 99.4544C32.1152 98.2575 29.5603 93.5654 30.9786 89.1641L35.4378 75.3274C36.6405 71.5952 40.5587 69.4617 44.3464 70.4766C48.134 71.4915 50.4605 75.2982 49.636 79.1318L46.5794 93.3443Z"
+			fill="url(#paint24_linear_1068_18455)"
+			fill-opacity="0.67"
+		/>
+		<path
+			d="M46.5794 93.3443C45.6071 97.8651 41.0484 100.651 36.5818 99.4544C32.1152 98.2575 29.5603 93.5654 30.9786 89.1641L35.4378 75.3274C36.6405 71.5952 40.5587 69.4617 44.3464 70.4766C48.134 71.4915 50.4605 75.2982 49.636 79.1318L46.5794 93.3443Z"
+			fill="url(#paint25_linear_1068_18455)"
+		/>
+		<path
+			d="M46.5794 93.3443C45.6071 97.8651 41.0484 100.651 36.5818 99.4544C32.1152 98.2575 29.5603 93.5654 30.9786 89.1641L35.4378 75.3274C36.6405 71.5952 40.5587 69.4617 44.3464 70.4766C48.134 71.4915 50.4605 75.2982 49.636 79.1318L46.5794 93.3443Z"
+			fill="url(#paint26_radial_1068_18455)"
+			fill-opacity="0.94"
+		/>
+		<path
+			d="M46.5794 93.3443C45.6071 97.8651 41.0484 100.651 36.5818 99.4544C32.1152 98.2575 29.5603 93.5654 30.9786 89.1641L35.4378 75.3274C36.6405 71.5952 40.5587 69.4617 44.3464 70.4766C48.134 71.4915 50.4605 75.2982 49.636 79.1318L46.5794 93.3443Z"
+			fill="url(#paint27_radial_1068_18455)"
+			fill-opacity="0.1"
+		/>
+		<defs>
+			<linearGradient
+				id="paint0_linear_1068_18455"
+				x1="7.23327"
+				y1="62.3326"
+				x2="48.1235"
+				y2="30.169"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop stopColor="#FF9EFA" />
+				<stop offset="0.422647" stopColor="#F55C15" stopOpacity="0.84" />
+				<stop offset="1" stopColor="#6B13F5" />
+			</linearGradient>
+			<linearGradient
+				id="paint1_linear_1068_18455"
+				x1="55.6034"
+				y1="45.8768"
+				x2="41.1422"
+				y2="93.9976"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop stopColor="#A73394" stopOpacity="0" />
+				<stop offset="1" stopColor="#6B13F5" />
+			</linearGradient>
+			<linearGradient
+				id="paint2_linear_1068_18455"
+				x1="84.0271"
+				y1="87.0164"
+				x2="39.3969"
+				y2="54.6034"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop offset="0.385417" stopColor="#6B13F5" />
+				<stop offset="1" stopColor="#E2606E" stopOpacity="0" />
+			</linearGradient>
+			<linearGradient
+				id="paint3_linear_1068_18455"
+				x1="25.9331"
+				y1="4.73728"
+				x2="29.9223"
+				y2="37.8983"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop offset="0.182292" stopColor="#6B13F5" />
+				<stop offset="1" stopColor="#CB4758" stopOpacity="0" />
+			</linearGradient>
+			<linearGradient
+				id="paint4_linear_1068_18455"
+				x1="64.5793"
+				y1="35.9036"
+				x2="37.6516"
+				y2="52.3594"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop stopColor="#6B13F5" />
+				<stop offset="1" stopColor="#E46373" stopOpacity="0" />
+			</linearGradient>
+			<radialGradient
+				id="paint5_radial_1068_18455"
+				cx="0"
+				cy="0"
+				r="1"
+				gradientUnits="userSpaceOnUse"
+				gradientTransform="translate(38.6489 53.1074) rotate(176.204) scale(52.7244 138.365)"
+			>
+				<stop stopColor="#F55C15" stopOpacity="0.46" />
+				<stop offset="0.831969" stopColor="#EE82C6" stopOpacity="0" />
+			</radialGradient>
+			<radialGradient
+				id="paint6_radial_1068_18455"
+				cx="0"
+				cy="0"
+				r="1"
+				gradientUnits="userSpaceOnUse"
+				gradientTransform="translate(-1.49331 68.0673) rotate(-19.7843) scale(36.8309 36.7807)"
+			>
+				<stop stopColor="#FF9EFA" />
+				<stop offset="1" stopColor="#DD5A68" stopOpacity="0" />
+			</radialGradient>
+			<linearGradient
+				id="paint7_linear_1068_18455"
+				x1="7.23327"
+				y1="62.3326"
+				x2="48.1235"
+				y2="30.169"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop stopColor="#FF9EFA" />
+				<stop offset="0.422647" stopColor="#F55C15" stopOpacity="0.84" />
+				<stop offset="1" stopColor="#6B13F5" />
+			</linearGradient>
+			<linearGradient
+				id="paint8_linear_1068_18455"
+				x1="55.6034"
+				y1="45.8768"
+				x2="41.1422"
+				y2="93.9976"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop stopColor="#A73394" stopOpacity="0" />
+				<stop offset="1" stopColor="#6B13F5" />
+			</linearGradient>
+			<linearGradient
+				id="paint9_linear_1068_18455"
+				x1="84.0271"
+				y1="87.0164"
+				x2="39.3969"
+				y2="54.6034"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop offset="0.385417" stopColor="#6B13F5" />
+				<stop offset="1" stopColor="#E2606E" stopOpacity="0" />
+			</linearGradient>
+			<linearGradient
+				id="paint10_linear_1068_18455"
+				x1="25.9331"
+				y1="4.73728"
+				x2="29.9223"
+				y2="37.8983"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop offset="0.182292" stopColor="#6B13F5" />
+				<stop offset="1" stopColor="#CB4758" stopOpacity="0" />
+			</linearGradient>
+			<linearGradient
+				id="paint11_linear_1068_18455"
+				x1="64.5793"
+				y1="35.9036"
+				x2="37.6516"
+				y2="52.3594"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop stopColor="#6B13F5" />
+				<stop offset="1" stopColor="#E46373" stopOpacity="0" />
+			</linearGradient>
+			<radialGradient
+				id="paint12_radial_1068_18455"
+				cx="0"
+				cy="0"
+				r="1"
+				gradientUnits="userSpaceOnUse"
+				gradientTransform="translate(38.6489 53.1074) rotate(176.204) scale(52.7244 138.365)"
+			>
+				<stop stopColor="#F55C15" stopOpacity="0.46" />
+				<stop offset="0.831969" stopColor="#EE82C6" stopOpacity="0" />
+			</radialGradient>
+			<radialGradient
+				id="paint13_radial_1068_18455"
+				cx="0"
+				cy="0"
+				r="1"
+				gradientUnits="userSpaceOnUse"
+				gradientTransform="translate(-1.49331 68.0673) rotate(-19.7843) scale(36.8309 36.7807)"
+			>
+				<stop stopColor="#FF9EFA" />
+				<stop offset="1" stopColor="#DD5A68" stopOpacity="0" />
+			</radialGradient>
+			<linearGradient
+				id="paint14_linear_1068_18455"
+				x1="7.23327"
+				y1="62.3326"
+				x2="48.1235"
+				y2="30.169"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop stopColor="#FF9EFA" />
+				<stop offset="0.422647" stopColor="#F55C15" stopOpacity="0.84" />
+				<stop offset="1" stopColor="#6B13F5" />
+			</linearGradient>
+			<linearGradient
+				id="paint15_linear_1068_18455"
+				x1="55.6034"
+				y1="45.8768"
+				x2="41.1422"
+				y2="93.9976"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop stopColor="#A73394" stopOpacity="0" />
+				<stop offset="1" stopColor="#6B13F5" />
+			</linearGradient>
+			<linearGradient
+				id="paint16_linear_1068_18455"
+				x1="84.0271"
+				y1="87.0164"
+				x2="39.3969"
+				y2="54.6034"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop offset="0.385417" stopColor="#6B13F5" />
+				<stop offset="1" stopColor="#E2606E" stopOpacity="0" />
+			</linearGradient>
+			<linearGradient
+				id="paint17_linear_1068_18455"
+				x1="25.9331"
+				y1="4.73728"
+				x2="29.9223"
+				y2="37.8983"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop offset="0.182292" stopColor="#6B13F5" />
+				<stop offset="1" stopColor="#CB4758" stopOpacity="0" />
+			</linearGradient>
+			<linearGradient
+				id="paint18_linear_1068_18455"
+				x1="64.5793"
+				y1="35.9036"
+				x2="37.6516"
+				y2="52.3594"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop stopColor="#6B13F5" />
+				<stop offset="1" stopColor="#E46373" stopOpacity="0" />
+			</linearGradient>
+			<radialGradient
+				id="paint19_radial_1068_18455"
+				cx="0"
+				cy="0"
+				r="1"
+				gradientUnits="userSpaceOnUse"
+				gradientTransform="translate(38.6489 53.1074) rotate(176.204) scale(52.7244 138.365)"
+			>
+				<stop stopColor="#F55C15" stopOpacity="0.46" />
+				<stop offset="0.831969" stopColor="#EE82C6" stopOpacity="0" />
+			</radialGradient>
+			<radialGradient
+				id="paint20_radial_1068_18455"
+				cx="0"
+				cy="0"
+				r="1"
+				gradientUnits="userSpaceOnUse"
+				gradientTransform="translate(-1.49331 68.0673) rotate(-19.7843) scale(36.8309 36.7807)"
+			>
+				<stop stopColor="#FF9EFA" />
+				<stop offset="1" stopColor="#DD5A68" stopOpacity="0" />
+			</radialGradient>
+			<linearGradient
+				id="paint21_linear_1068_18455"
+				x1="7.23327"
+				y1="62.3326"
+				x2="48.1235"
+				y2="30.169"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop stopColor="#FF9EFA" />
+				<stop offset="0.422647" stopColor="#F55C15" stopOpacity="0.84" />
+				<stop offset="1" stopColor="#6B13F5" />
+			</linearGradient>
+			<linearGradient
+				id="paint22_linear_1068_18455"
+				x1="55.6034"
+				y1="45.8768"
+				x2="41.1422"
+				y2="93.9976"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop stopColor="#A73394" stopOpacity="0" />
+				<stop offset="1" stopColor="#6B13F5" />
+			</linearGradient>
+			<linearGradient
+				id="paint23_linear_1068_18455"
+				x1="84.0271"
+				y1="87.0164"
+				x2="39.3969"
+				y2="54.6034"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop offset="0.385417" stopColor="#6B13F5" />
+				<stop offset="1" stopColor="#E2606E" stopOpacity="0" />
+			</linearGradient>
+			<linearGradient
+				id="paint24_linear_1068_18455"
+				x1="25.9331"
+				y1="4.73728"
+				x2="29.9223"
+				y2="37.8983"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop offset="0.182292" stopColor="#6B13F5" />
+				<stop offset="1" stopColor="#CB4758" stopOpacity="0" />
+			</linearGradient>
+			<linearGradient
+				id="paint25_linear_1068_18455"
+				x1="64.5793"
+				y1="35.9036"
+				x2="37.6516"
+				y2="52.3594"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop stopColor="#6B13F5" />
+				<stop offset="1" stopColor="#E46373" stopOpacity="0" />
+			</linearGradient>
+			<radialGradient
+				id="paint26_radial_1068_18455"
+				cx="0"
+				cy="0"
+				r="1"
+				gradientUnits="userSpaceOnUse"
+				gradientTransform="translate(38.6489 53.1074) rotate(176.204) scale(52.7244 138.365)"
+			>
+				<stop stopColor="#F55C15" stopOpacity="0.46" />
+				<stop offset="0.831969" stopColor="#EE82C6" stopOpacity="0" />
+			</radialGradient>
+			<radialGradient
+				id="paint27_radial_1068_18455"
+				cx="0"
+				cy="0"
+				r="1"
+				gradientUnits="userSpaceOnUse"
+				gradientTransform="translate(-1.49331 68.0673) rotate(-19.7843) scale(36.8309 36.7807)"
+			>
+				<stop stopColor="#FF9EFA" />
+				<stop offset="1" stopColor="#DD5A68" stopOpacity="0" />
+			</radialGradient>
+		</defs>
+	</svg>
+);
+
+export const AzureIcon = ({ className }: Props) => (
+	<svg
+		viewBox="0 0 96 96"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		className={className}
+	>
+		<defs>
+			<linearGradient
+				id="a"
+				x1="-1032.17"
+				x2="-1059.21"
+				y1="145.31"
+				y2="65.43"
+				gradientTransform="matrix(1 0 0 -1 1075 158)"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop offset="0" stopColor="#114a8b" />
+				<stop offset="1" stopColor="#0669bc" />
+			</linearGradient>
+			<linearGradient
+				id="b"
+				x1="-1023.73"
+				x2="-1029.98"
+				y1="108.08"
+				y2="105.97"
+				gradientTransform="matrix(1 0 0 -1 1075 158)"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop offset="0" stopOpacity=".3" />
+				<stop offset=".07" stopOpacity=".2" />
+				<stop offset=".32" stopOpacity=".1" />
+				<stop offset=".62" stopOpacity=".05" />
+				<stop offset="1" stopOpacity="0" />
+			</linearGradient>
+			<linearGradient
+				id="c"
+				x1="-1027.16"
+				x2="-997.48"
+				y1="147.64"
+				y2="68.56"
+				gradientTransform="matrix(1 0 0 -1 1075 158)"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop offset="0" stopColor="#3ccbf4" />
+				<stop offset="1" stopColor="#2892df" />
+			</linearGradient>
+		</defs>
+		<path
+			fill="url(#a)"
+			d="M33.34 6.54h26.04l-27.03 80.1a4.15 4.15 0 0 1-3.94 2.81H8.15a4.14 4.14 0 0 1-3.93-5.47L29.4 9.38a4.15 4.15 0 0 1 3.94-2.83z"
+		/>
+		<path
+			fill="#0078d4"
+			d="M71.17 60.26H29.88a1.91 1.91 0 0 0-1.3 3.31l26.53 24.76a4.17 4.17 0 0 0 2.85 1.13h23.38z"
+		/>
+		<path
+			fill="url(#b)"
+			d="M33.34 6.54a4.12 4.12 0 0 0-3.95 2.88L4.25 83.92a4.14 4.14 0 0 0 3.91 5.54h20.79a4.44 4.44 0 0 0 3.4-2.9l5.02-14.78 17.91 16.7a4.24 4.24 0 0 0 2.67.97h23.29L71.02 60.26H41.24L59.47 6.55z"
+		/>
+		<path
+			fill="url(#c)"
+			d="M66.6 9.36a4.14 4.14 0 0 0-3.93-2.82H33.65a4.15 4.15 0 0 1 3.93 2.82l25.18 74.62a4.15 4.15 0 0 1-3.93 5.48h29.02a4.15 4.15 0 0 0 3.93-5.48z"
+		/>
+	</svg>
+);
+
+export const vaultProviderIcons = {
+	hashicorp: HashicorpVaultIcon,
+	infisical: InfisicalIcon,
+	aws: AwsIcon,
+	doppler: DopplerIcon,
+	azure: AzureIcon,
+} as const;

apps/dokploy/components/layouts/side.tsx

@@ -27,7 +27,6 @@ import {
 	type LucideIcon,
 	Package,
 	Palette,
-	PieChart,
 	Rocket,
 	Server,
 	ShieldCheck,
@@ -36,6 +35,7 @@ import {
 	Trash2,
 	User,
 	Users,
+	Vault,
 } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -201,14 +201,6 @@ const MENU: Menu = {
 			// Only enabled for users with access to Docker
 			isEnabled: ({ permissions }) => !!permissions?.docker.read,
 		},
-		{
-			isSingle: true,
-			title: "Swarm",
-			url: "/dashboard/swarm",
-			icon: PieChart,
-			// Only enabled for users with access to Docker
-			isEnabled: ({ permissions }) => !!permissions?.docker.read,
-		},
 		{
 			isSingle: true,
 			title: "Requests",
@@ -359,6 +351,13 @@ const MENU: Menu = {
 			icon: Package,
 			isEnabled: ({ permissions }) => !!permissions?.registry.read,
 		},
+		{
+			isSingle: true,
+			title: "Secrets",
+			url: "/dashboard/settings/secrets",
+			icon: Vault,
+			isEnabled: ({ permissions }) => !!permissions?.vaultProvider.create,
+		},
 		{
 			isSingle: true,
 			title: "S3 Destinations",
@@ -648,7 +647,7 @@ function SidebarLogo() {
 								</SidebarMenuButton>
 							</DropdownMenuTrigger>
 							<DropdownMenuContent
-								className="rounded-lg max-h-[min(70vh,28rem)] flex flex-col"
+								className="w-64 rounded-lg max-h-[min(70vh,28rem)] flex flex-col"
 								align="start"
 								side={isMobile ? "bottom" : "right"}
 								sideOffset={4}

apps/dokploy/components/proprietary/audit-logs/columns.tsx

@@ -95,6 +95,7 @@ const RESOURCE_LABELS: Record<string, string> = {
 	notification: "Notification",
 	settings: "Settings",
 	session: "Session",
+	network: "Network",
 };
 
 function MetadataCell({ metadata }: { metadata: string | null }) {

apps/dokploy/components/proprietary/roles/manage-custom-roles.tsx

@@ -163,6 +163,11 @@ const RESOURCE_META: Record<string, { label: string; description: string }> = {
 		label: "Audit Logs",
 		description: "View the audit log of actions performed in the organization",
 	},
+	vaultProvider: {
+		label: "Secrets Providers",
+		description:
+			"Manage external secret managers (HashiCorp Vault, AWS, Azure, Infisical, Doppler) and where their secrets can be referenced",
+	},
 };
 
 /** Descriptions for each action within a resource */
@@ -419,6 +424,22 @@ const ACTION_META: Record<
 	auditLog: {
 		read: { label: "Read", description: "View the audit log history" },
 	},
+	vaultProvider: {
+		read: {
+			label: "Read",
+			description: "View providers and secret names for env autocomplete",
+		},
+		create: {
+			label: "Create",
+			description: "Connect new secret providers and test their connection",
+		},
+		update: {
+			label: "Update",
+			description:
+				"Edit provider credentials and project/environment assignments",
+		},
+		delete: { label: "Delete", description: "Remove secret providers" },
+	},
 };
 
 /** Resources that should be hidden from the custom role editor (better-auth internals) */

apps/dokploy/components/proprietary/whitelabeling/whitelabeling-provider.tsx

@@ -1,24 +1,32 @@
 "use client";
 
 import Head from "next/head";
+import { useTheme } from "next-themes";
 import { api } from "@/utils/api";
 
 export function WhitelabelingProvider() {
+	const { resolvedTheme } = useTheme();
 	const { data: config } = api.whitelabeling.getPublic.useQuery(undefined, {
 		staleTime: 5 * 60 * 1000,
 		refetchOnWindowFocus: false,
 	});
 
-	if (!config) return null;
+	const faviconHref =
+		config?.faviconUrl ??
+		(resolvedTheme === "dark"
+			? "/icon-dark.svg"
+			: resolvedTheme === "light"
+				? "/icon-light.svg"
+				: "/icon.svg");
 
 	return (
 		<>
 			<Head>
-				{config.metaTitle && <title>{config.metaTitle}</title>}
-				{config.faviconUrl && <link rel="icon" href={config.faviconUrl} />}
+				{config?.metaTitle && <title>{config.metaTitle}</title>}
+				<link rel="icon" href={faviconHref} key="app-favicon" />
 			</Head>
 
-			{config.customCss && (
+			{config?.customCss && (
 				<style
 					id="whitelabeling-styles"
 					dangerouslySetInnerHTML={{

apps/dokploy/components/shared/analytics.tsx

@@ -0,0 +1,86 @@
+import { useRouter } from "next/router";
+import Script from "next/script";
+import { useEffect } from "react";
+import { GTM_ID, pushToDataLayer } from "@/lib/analytics";
+import { api } from "@/utils/api";
+
+/**
+ * Loads Google Tag Manager and the HubSpot marketing tag on the cloud
+ * version only, and translates tracking query params appended by the
+ * auth/billing flows (?signup=..., ?subscription=new) into dataLayer events.
+ */
+export const Analytics = () => {
+	const router = useRouter();
+	const { data: isCloud } = api.settings.isCloud.useQuery();
+
+	useEffect(() => {
+		if (!isCloud || !router.isReady) {
+			return;
+		}
+		const { signup, subscription, tier, ...rest } = router.query;
+
+		if (typeof signup === "string" && signup.length > 0) {
+			pushToDataLayer("sign_up", { method: signup });
+		}
+		if (subscription === "new") {
+			pushToDataLayer("new_subscription", {
+				...(typeof tier === "string" ? { tier } : {}),
+			});
+		}
+		if (signup !== undefined || subscription !== undefined) {
+			router.replace({ pathname: router.pathname, query: rest }, undefined, {
+				shallow: true,
+			});
+		}
+	}, [isCloud, router.isReady, router.query, router.pathname, router.replace]);
+
+	if (!isCloud) {
+		return null;
+	}
+
+	return (
+		<>
+			<Script id="analytics-init" strategy="afterInteractive">
+				{`
+					window.hsConversationsSettings = { loadImmediately: false };
+					(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+					new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+					j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+					'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+					})(window,document,'script','dataLayer','${GTM_ID}');
+				`}
+			</Script>
+			<Script
+				id="hs-script-loader"
+				type="text/javascript"
+				src="//js-eu1.hs-scripts.com/147033433.js"
+				strategy="lazyOnload"
+				async
+				defer
+			/>
+		</>
+	);
+};
+
+/**
+ * The HubSpot script is loaded app-wide for marketing tracking, but the
+ * conversations (chat) widget stays restricted to startup plan customers.
+ */
+export const useHubSpotChat = (enabled: boolean) => {
+	useEffect(() => {
+		if (!enabled) {
+			return;
+		}
+		const loadWidget = () => {
+			window.HubSpotConversations?.widget.load();
+		};
+		if (window.HubSpotConversations) {
+			loadWidget();
+		} else {
+			window.hsConversationsOnReady = [
+				...(window.hsConversationsOnReady || []),
+				loadWidget,
+			];
+		}
+	}, [enabled]);
+};

apps/dokploy/components/shared/code-editor.tsx

@@ -3,6 +3,7 @@ import {
 	type Completion,
 	type CompletionContext,
 	type CompletionResult,
+	type CompletionSource,
 } from "@codemirror/autocomplete";
 import { css } from "@codemirror/lang-css";
 import { json } from "@codemirror/lang-json";
@@ -135,6 +136,7 @@ interface Props extends ReactCodeMirrorProps {
 	language?: "yaml" | "json" | "properties" | "shell" | "css";
 	lineWrapping?: boolean;
 	lineNumbers?: boolean;
+	completionSource?: CompletionSource;
 }
 
 export const CodeEditor = ({
@@ -142,6 +144,7 @@ export const CodeEditor = ({
 	wrapperClassName,
 	language = "yaml",
 	lineNumbers = true,
+	completionSource,
 	...props
 }: Props) => {
 	const { resolvedTheme } = useTheme();
@@ -175,11 +178,15 @@ export const CodeEditor = ({
 											languageData: { commentTokens: { line: "#" } },
 										}),
 					props.lineWrapping ? EditorView.lineWrapping : [],
-					language === "yaml"
+					completionSource
 						? autocompletion({
-								override: [dockerComposeComplete],
+								override: [completionSource],
 							})
-						: [],
+						: language === "yaml"
+							? autocompletion({
+									override: [dockerComposeComplete],
+								})
+							: [],
 				]}
 				{...props}
 				editable={!props.disabled}

apps/dokploy/components/shared/drawer-logs.tsx

@@ -47,7 +47,7 @@ export const DrawerLogs = ({ isOpen, onClose, filteredLogs }: Props) => {
 				onClose();
 			}}
 		>
-			<SheetContent className="sm:max-w-[740px] flex flex-col">
+			<SheetContent className="w-full sm:max-w-[740px]! flex flex-col">
 				<SheetHeader>
 					<SheetTitle>Deployment Logs</SheetTitle>
 					<SheetDescription>Details of the request log entry.</SheetDescription>

apps/dokploy/components/shared/env-autocomplete.ts

@@ -0,0 +1,193 @@
+import {
+	type Completion,
+	type CompletionContext,
+	type CompletionResult,
+	startCompletion,
+} from "@codemirror/autocomplete";
+import type { EditorView } from "@codemirror/view";
+import { useCallback } from "react";
+import { api } from "@/utils/api";
+
+interface Options {
+	projectEnv?: string | null;
+	environmentEnv?: string | null;
+	includeShared?: boolean;
+	projectId?: string;
+	environmentId?: string;
+}
+
+const parseKeys = (env?: string | null) =>
+	(env ?? "")
+		.split("\n")
+		.map((line) => line.trim())
+		.filter((line) => line && !line.startsWith("#") && line.includes("="))
+		.map((line) => line.slice(0, line.indexOf("=")).trim())
+		.filter((key) => /^[A-Za-z_][A-Za-z0-9_]*$/.test(key));
+
+const applyAndContinue = (
+	view: EditorView,
+	completion: Completion,
+	from: number,
+	to: number,
+) => {
+	view.dispatch({
+		changes: { from, to, insert: completion.label },
+		selection: { anchor: from + completion.label.length },
+	});
+	startCompletion(view);
+};
+
+const applyAndClose = (
+	view: EditorView,
+	completion: Completion,
+	from: number,
+	to: number,
+) => {
+	const alreadyClosed = view.state.sliceDoc(to, to + 2) === "}}";
+	const insert = completion.label + (alreadyClosed ? "" : "}}");
+	view.dispatch({
+		changes: { from, to, insert },
+		selection: {
+			anchor: from + completion.label.length + 2,
+		},
+	});
+};
+
+export const useEnvCompletionSource = ({
+	projectEnv,
+	environmentEnv,
+	includeShared = true,
+	projectId,
+	environmentId,
+}: Options = {}) => {
+	const { data: allProviders } = api.vaultProvider.all.useQuery();
+	const utils = api.useUtils();
+	const providers = projectId
+		? allProviders?.filter((provider) =>
+				provider.assignments?.some(
+					(assignment) =>
+						assignment.projectId === projectId &&
+						(assignment.environmentIds.length === 0 ||
+							!environmentId ||
+							assignment.environmentIds.includes(environmentId)),
+				),
+			)
+		: [];
+
+	return useCallback(
+		async (context: CompletionContext): Promise<CompletionResult | null> => {
+			const match = context.matchBefore(/\$\{\{[^}\n]*$/);
+			if (!match) return null;
+
+			const inner = match.text.slice(3);
+			const innerFrom = match.from + 3;
+
+			const vaultSecret = /^vault\.([a-zA-Z0-9_-]+)\.([^}\n]*)$/.exec(inner);
+			if (vaultSecret) {
+				const provider = providers?.find((p) => p.name === vaultSecret[1]);
+				if (!provider || !projectId) return null;
+				const names = await utils.vaultProvider.listSecretNames
+					.fetch({
+						vaultProviderId: provider.vaultProviderId,
+						projectId,
+						environmentId,
+					})
+					.catch(() => [] as string[]);
+				return {
+					from: innerFrom + `vault.${vaultSecret[1]}.`.length,
+					options: names.map((name) => ({
+						label: name,
+						type: "variable",
+						apply: applyAndClose,
+					})),
+					validFor: /^[^}\n]*$/,
+				};
+			}
+
+			const vaultProviderPrefix = /^vault\.([a-zA-Z0-9_-]*)$/.exec(inner);
+			if (vaultProviderPrefix) {
+				return {
+					from: innerFrom + "vault.".length,
+					options: (providers ?? []).map((provider) => ({
+						label: `${provider.name}.`,
+						detail: provider.providerType,
+						type: "namespace",
+						apply: applyAndContinue,
+					})),
+					validFor: /^[a-zA-Z0-9_-]*$/,
+				};
+			}
+
+			if (includeShared) {
+				const shared: [RegExp, string, string | null | undefined][] = [
+					[/^project\.([^}\n]*)$/, "project.", projectEnv],
+					[/^environment\.([^}\n]*)$/, "environment.", environmentEnv],
+				];
+				for (const [regex, prefix, env] of shared) {
+					if (regex.test(inner)) {
+						return {
+							from: innerFrom + prefix.length,
+							options: parseKeys(env).map((key) => ({
+								label: key,
+								type: "variable",
+								apply: applyAndClose,
+							})),
+							validFor: /^[A-Za-z0-9_]*$/,
+						};
+					}
+				}
+			}
+
+			if (!inner.includes(".")) {
+				const options: Completion[] = [];
+				if (includeShared) {
+					options.push(
+						{
+							label: "project.",
+							type: "namespace",
+							info: "Shared project variables",
+							apply: applyAndContinue,
+						},
+						{
+							label: "environment.",
+							type: "namespace",
+							info: "Shared environment variables",
+							apply: applyAndContinue,
+						},
+					);
+				}
+				options.push({
+					label: "vault.",
+					type: "namespace",
+					info: "Secrets from an external vault provider",
+					apply: applyAndContinue,
+				});
+				if (includeShared) {
+					for (const key of parseKeys(context.state.doc.toString())) {
+						options.push({
+							label: key,
+							type: "variable",
+							apply: applyAndClose,
+						});
+					}
+				}
+				return {
+					from: innerFrom,
+					options,
+					validFor: /^[A-Za-z0-9_.-]*$/,
+				};
+			}
+
+			return null;
+		},
+		[
+			providers,
+			projectEnv,
+			environmentEnv,
+			includeShared,
+			projectId,
+			environmentId,
+			utils,
+		],
+	);
+};

apps/dokploy/components/ui/badge.tsx

@@ -5,7 +5,7 @@ import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-	"group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2.5 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+	"group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2.5 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg:not(.cursor-pointer)]:pointer-events-none [&>svg]:size-3!",
 	{
 		variants: {
 			variant: {

apps/dokploy/components/ui/button.tsx

@@ -6,7 +6,7 @@ import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-	"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+	"group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 	{
 		variants: {
 			variant: {

apps/dokploy/components/ui/command.tsx

@@ -151,13 +151,15 @@ function CommandItem({
 		<CommandPrimitive.Item
 			data-slot="command-item"
 			className={cn(
-				"group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 in-data-[slot=dialog-content]:py-3 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 in-data-[slot=dialog-content]:[&_svg:not([class*='size-'])]:size-5 data-selected:*:[svg]:text-foreground",
+				"group/command-item relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 in-data-[slot=dialog-content]:py-3 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 in-data-[slot=dialog-content]:[&_svg:not([class*='size-'])]:size-5 data-selected:*:[svg]:text-foreground",
 				className,
 			)}
 			{...props}
 		>
 			{children}
-			<CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+			{"data-checked" in props && (
+				<CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+			)}
 		</CommandPrimitive.Item>
 	);
 }