Merge branch 'canary' into feat/label-previews

apps/dokploy/__test__/compose/compose.test.ts

@@ -1,5 +1,5 @@
-import { addSuffixToAllProperties } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToAllProperties } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/config/config-root.test.ts

@@ -1,6 +1,5 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToConfigsRoot } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToConfigsRoot, generateRandomHash } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/config/config-service.test.ts

@@ -1,6 +1,8 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToConfigsInServices } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import {
+	addSuffixToConfigsInServices,
+	generateRandomHash,
+} from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/config/config.test.ts

@@ -1,6 +1,5 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToAllConfigs } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToAllConfigs, generateRandomHash } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/domain/labels.test.ts

@@ -108,4 +108,136 @@ describe("createDomainLabels", () => {
 			"traefik.http.services.test-app-1-web.loadbalancer.server.port=3000",
 		);
 	});
+
+	it("should add stripPath middleware when stripPath is enabled", async () => {
+		const stripPathDomain = {
+			...baseDomain,
+			path: "/api",
+			stripPath: true,
+		};
+		const labels = await createDomainLabels(appName, stripPathDomain, "web");
+
+		expect(labels).toContain(
+			"traefik.http.middlewares.stripprefix-test-app-1.stripprefix.prefixes=/api",
+		);
+		expect(labels).toContain(
+			"traefik.http.routers.test-app-1-web.middlewares=stripprefix-test-app-1",
+		);
+	});
+
+	it("should add internalPath middleware when internalPath is set", async () => {
+		const internalPathDomain = {
+			...baseDomain,
+			internalPath: "/hello",
+		};
+		const webLabels = await createDomainLabels(
+			appName,
+			internalPathDomain,
+			"web",
+		);
+		const websecureLabels = await createDomainLabels(
+			appName,
+			internalPathDomain,
+			"websecure",
+		);
+
+		// Middleware definition should only appear in web entrypoint
+		expect(webLabels).toContain(
+			"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
+		);
+		expect(websecureLabels).not.toContain(
+			"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
+		);
+
+		// Both routers should reference the middleware
+		expect(webLabels).toContain(
+			"traefik.http.routers.test-app-1-web.middlewares=addprefix-test-app-1",
+		);
+		expect(websecureLabels).toContain(
+			"traefik.http.routers.test-app-1-websecure.middlewares=addprefix-test-app-1",
+		);
+	});
+
+	it("should combine HTTPS redirect with internalPath middleware in correct order", async () => {
+		const combinedDomain = {
+			...baseDomain,
+			https: true,
+			internalPath: "/hello",
+		};
+		const webLabels = await createDomainLabels(appName, combinedDomain, "web");
+		const websecureLabels = await createDomainLabels(
+			appName,
+			combinedDomain,
+			"websecure",
+		);
+
+		// Web entrypoint should have both middlewares with redirect first
+		expect(webLabels).toContain(
+			"traefik.http.routers.test-app-1-web.middlewares=redirect-to-https@file,addprefix-test-app-1",
+		);
+
+		// Websecure should only have the addprefix middleware
+		expect(websecureLabels).toContain(
+			"traefik.http.routers.test-app-1-websecure.middlewares=addprefix-test-app-1",
+		);
+
+		// Middleware definition should only appear once (in web)
+		expect(webLabels).toContain(
+			"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
+		);
+		expect(websecureLabels).not.toContain(
+			"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
+		);
+	});
+
+	it("should combine all middlewares in correct order", async () => {
+		const fullDomain = {
+			...baseDomain,
+			https: true,
+			path: "/api",
+			stripPath: true,
+			internalPath: "/hello",
+		};
+		const webLabels = await createDomainLabels(appName, fullDomain, "web");
+
+		// Should have all middleware definitions (only in web)
+		expect(webLabels).toContain(
+			"traefik.http.middlewares.stripprefix-test-app-1.stripprefix.prefixes=/api",
+		);
+		expect(webLabels).toContain(
+			"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
+		);
+
+		// Should have middlewares in correct order: redirect, stripprefix, addprefix
+		expect(webLabels).toContain(
+			"traefik.http.routers.test-app-1-web.middlewares=redirect-to-https@file,stripprefix-test-app-1,addprefix-test-app-1",
+		);
+	});
+
+	it("should not add middleware definitions for websecure entrypoint", async () => {
+		const internalPathDomain = {
+			...baseDomain,
+			path: "/api",
+			stripPath: true,
+			internalPath: "/hello",
+		};
+		const websecureLabels = await createDomainLabels(
+			appName,
+			internalPathDomain,
+			"websecure",
+		);
+
+		// Should not contain any middleware definitions
+		expect(websecureLabels).not.toContain(
+			"traefik.http.middlewares.stripprefix-test-app-1.stripprefix.prefixes=/api",
+		);
+		expect(websecureLabels).not.toContain(
+			"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
+		);
+
+		// But should reference the middlewares
+		expect(websecureLabels).toContain(
+			"traefik.http.routers.test-app-1-websecure.middlewares=stripprefix-test-app-1,addprefix-test-app-1",
+		);
+	});
 });

apps/dokploy/__test__/compose/network/network-root.test.ts

@@ -1,6 +1,5 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToNetworksRoot } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToNetworksRoot, generateRandomHash } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/network/network-service.test.ts

@@ -1,6 +1,8 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToServiceNetworks } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import {
+	addSuffixToServiceNetworks,
+	generateRandomHash,
+} from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/network/network.test.ts

@@ -1,10 +1,10 @@
-import { generateRandomHash } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import {
 	addSuffixToAllNetworks,
+	addSuffixToNetworksRoot,
 	addSuffixToServiceNetworks,
+	generateRandomHash,
 } from "@dokploy/server";
-import { addSuffixToNetworksRoot } from "@dokploy/server";
-import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/secrets/secret-root.test.ts

@@ -1,6 +1,5 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToSecretsRoot } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToSecretsRoot, generateRandomHash } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/secrets/secret-services.test.ts

@@ -1,6 +1,8 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToSecretsInServices } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import {
+	addSuffixToSecretsInServices,
+	generateRandomHash,
+} from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/secrets/secret.test.ts

@@ -1,5 +1,5 @@
-import { addSuffixToAllSecrets } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToAllSecrets } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service-container-name.test.ts

@@ -1,6 +1,5 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToServiceNames } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToServiceNames, generateRandomHash } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service-depends-on.test.ts

@@ -1,6 +1,5 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToServiceNames } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToServiceNames, generateRandomHash } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service-extends.test.ts

@@ -1,6 +1,5 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToServiceNames } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToServiceNames, generateRandomHash } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service-links.test.ts

@@ -1,6 +1,5 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToServiceNames } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToServiceNames, generateRandomHash } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service-names.test.ts

@@ -1,6 +1,5 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToServiceNames } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToServiceNames, generateRandomHash } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service.test.ts

@@ -1,8 +1,8 @@
+import type { ComposeSpecification } from "@dokploy/server";
 import {
 	addSuffixToAllServiceNames,
 	addSuffixToServiceNames,
 } from "@dokploy/server";
-import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/sevice-volumes-from.test.ts

@@ -1,6 +1,5 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToServiceNames } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToServiceNames, generateRandomHash } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/volume/volume-2.test.ts

@@ -1,6 +1,9 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToAllVolumes, addSuffixToVolumesRoot } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import {
+	addSuffixToAllVolumes,
+	addSuffixToVolumesRoot,
+	generateRandomHash,
+} from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/volume/volume-root.test.ts

@@ -1,6 +1,5 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToVolumesRoot } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToVolumesRoot, generateRandomHash } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/volume/volume-services.test.ts

@@ -1,6 +1,8 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToVolumesInServices } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import {
+	addSuffixToVolumesInServices,
+	generateRandomHash,
+} from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/volume/volume.test.ts

@@ -1,5 +1,5 @@
-import { addSuffixToAllVolumes } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToAllVolumes } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/deploy/github.test.ts

@@ -1,5 +1,5 @@
-import { extractCommitMessage } from "@/pages/api/deploy/[refreshToken]";
 import { describe, expect, it } from "vitest";
+import { extractCommitMessage } from "@/pages/api/deploy/[refreshToken]";
 
 describe("GitHub Webhook Skip CI", () => {
 	const mockGithubHeaders = {

apps/dokploy/__test__/drop/drop.test.ts

@@ -1,12 +1,12 @@
 import fs from "node:fs/promises";
 import path from "node:path";
-import { paths } from "@dokploy/server/constants";
-const { APPLICATIONS_PATH } = paths();
 import type { ApplicationNested } from "@dokploy/server";
 import { unzipDrop } from "@dokploy/server";
+import { paths } from "@dokploy/server/constants";
 import AdmZip from "adm-zip";
 import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
 
+const { APPLICATIONS_PATH } = paths();
 vi.mock("@dokploy/server/constants", async (importOriginal) => {
 	const actual = await importOriginal();
 	return {
@@ -25,6 +25,7 @@ if (typeof window === "undefined") {
 }
 
 const baseApp: ApplicationNested = {
+	railpackVersion: "0.2.2",
 	applicationId: "",
 	herokuVersion: "",
 	giteaBranch: "",
@@ -142,7 +143,7 @@ describe("unzipDrop using real zip files", () => {
 			const outputPath = path.join(APPLICATIONS_PATH, baseApp.appName, "code");
 			const zip = new AdmZip("./__test__/drop/zips/single-file.zip");
 			console.log(`Output Path: ${outputPath}`);
-			const zipBuffer = zip.toBuffer();
+			const zipBuffer = zip.toBuffer() as Buffer<ArrayBuffer>;
 			const file = new File([zipBuffer], "single.zip");
 			await unzipDrop(file, baseApp);
 			const files = await fs.readdir(outputPath, { withFileTypes: true });

apps/dokploy/__test__/requests/request.test.ts

@@ -1,5 +1,6 @@
 import { parseRawConfig, processLogs } from "@dokploy/server";
 import { describe, expect, it } from "vitest";
+
 const sampleLogEntry = `{"ClientAddr":"172.19.0.1:56732","ClientHost":"172.19.0.1","ClientPort":"56732","ClientUsername":"-","DownstreamContentSize":0,"DownstreamStatus":304,"Duration":14729375,"OriginContentSize":0,"OriginDuration":14051833,"OriginStatus":304,"Overhead":677542,"RequestAddr":"s222-umami-c381af.traefik.me","RequestContentSize":0,"RequestCount":122,"RequestHost":"s222-umami-c381af.traefik.me","RequestMethod":"GET","RequestPath":"/dashboard?_rsc=1rugv","RequestPort":"-","RequestProtocol":"HTTP/1.1","RequestScheme":"http","RetryAttempts":0,"RouterName":"s222-umami-60e104-47-web@docker","ServiceAddr":"10.0.1.15:3000","ServiceName":"s222-umami-60e104-47-web@docker","ServiceURL":{"Scheme":"http","Opaque":"","User":null,"Host":"10.0.1.15:3000","Path":"","RawPath":"","ForceQuery":false,"RawQuery":"","Fragment":"","RawFragment":""},"StartLocal":"2024-08-25T04:34:37.306691884Z","StartUTC":"2024-08-25T04:34:37.306691884Z","entryPointName":"web","level":"info","msg":"","time":"2024-08-25T04:34:37Z"}`;
 
 describe("processLogs", () => {

apps/dokploy/__test__/traefik/traefik.test.ts

@@ -1,10 +1,9 @@
-import type { Domain } from "@dokploy/server";
-import type { Redirect } from "@dokploy/server";
-import type { ApplicationNested } from "@dokploy/server";
+import type { ApplicationNested, Domain, Redirect } from "@dokploy/server";
 import { createRouterConfig } from "@dokploy/server";
 import { expect, test } from "vitest";
 
 const baseApp: ApplicationNested = {
+	railpackVersion: "0.2.2",
 	rollbackActive: false,
 	applicationId: "",
 	herokuVersion: "",

apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { HelpCircle, Settings } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
@@ -26,12 +32,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { HelpCircle, Settings } from "lucide-react";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const HealthCheckSwarmSchema = z
 	.object({
@@ -181,21 +181,38 @@ const addSwarmSettings = z.object({
 type AddSwarmSettings = z.infer<typeof addSwarmSettings>;
 
 interface Props {
-	applicationId: string;
+	id: string;
+	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
 }
 
-export const AddSwarmSettings = ({ applicationId }: Props) => {
-	const { data, refetch } = api.application.one.useQuery(
-		{
-			applicationId,
-		},
-		{
-			enabled: !!applicationId,
-		},
-	);
+export const AddSwarmSettings = ({ id, type }: Props) => {
+	const queryMap = {
+		postgres: () =>
+			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
+		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
+		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
+		mariadb: () =>
+			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
+		application: () =>
+			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
+		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+	};
+	const { data, refetch } = queryMap[type]
+		? queryMap[type]()
+		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
 
-	const { mutateAsync, isError, error, isLoading } =
-		api.application.update.useMutation();
+	const mutationMap = {
+		postgres: () => api.postgres.update.useMutation(),
+		redis: () => api.redis.update.useMutation(),
+		mysql: () => api.mysql.update.useMutation(),
+		mariadb: () => api.mariadb.update.useMutation(),
+		application: () => api.application.update.useMutation(),
+		mongo: () => api.mongo.update.useMutation(),
+	};
+
+	const { mutateAsync, isError, error, isLoading } = mutationMap[type]
+		? mutationMap[type]()
+		: api.mongo.update.useMutation();
 
 	const form = useForm<AddSwarmSettings>({
 		defaultValues: {
@@ -244,7 +261,12 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 
 	const onSubmit = async (data: AddSwarmSettings) => {
 		await mutateAsync({
-			applicationId,
+			applicationId: id || "",
+			postgresId: id || "",
+			redisId: id || "",
+			mysqlId: id || "",
+			mariadbId: id || "",
+			mongoId: id || "",
 			healthCheckSwarm: data.healthCheckSwarm,
 			restartPolicySwarm: data.restartPolicySwarm,
 			placementSwarm: data.placementSwarm,
@@ -270,7 +292,7 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 					Swarm Settings
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-5xl p-0">
+			<DialogContent className="sm:max-w-5xl">
 				<DialogHeader>
 					<DialogTitle>Swarm Settings</DialogTitle>
 					<DialogDescription>
@@ -278,10 +300,10 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 					</DialogDescription>
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
-				<div className="px-4">
+				<div>
 					<AlertBlock type="info">
-						Changing settings such as placements may cause the logs/monitoring
-						to be unavailable.
+						Changing settings such as placements may cause the logs/monitoring,
+						backups and other features to be unavailable.
 					</AlertBlock>
 				</div>
 
@@ -289,13 +311,13 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 					<form
 						id="hook-form-add-permissions"
 						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid  grid-cols-1 md:grid-cols-2  w-full gap-4 relative"
+						className="grid  grid-cols-1 md:grid-cols-2  w-full gap-4 relative mt-4"
 					>
 						<FormField
 							control={form.control}
 							name="healthCheckSwarm"
 							render={({ field }) => (
-								<FormItem className="relative max-lg:px-4 lg:pl-6 ">
+								<FormItem className="relative ">
 									<FormLabel>Health Check</FormLabel>
 									<TooltipProvider delayDuration={0}>
 										<Tooltip>
@@ -351,7 +373,7 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 							control={form.control}
 							name="restartPolicySwarm"
 							render={({ field }) => (
-								<FormItem className="relative  max-lg:px-4 lg:pr-6 ">
+								<FormItem className="relative ">
 									<FormLabel>Restart Policy</FormLabel>
 									<TooltipProvider delayDuration={0}>
 										<Tooltip>
@@ -405,7 +427,7 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 							control={form.control}
 							name="placementSwarm"
 							render={({ field }) => (
-								<FormItem className="relative   max-lg:px-4 lg:pl-6 ">
+								<FormItem className="relative ">
 									<FormLabel>Placement</FormLabel>
 									<TooltipProvider delayDuration={0}>
 										<Tooltip>
@@ -471,7 +493,7 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 							control={form.control}
 							name="updateConfigSwarm"
 							render={({ field }) => (
-								<FormItem className="relative  max-lg:px-4 lg:pr-6 ">
+								<FormItem className="relative ">
 									<FormLabel>Update Config</FormLabel>
 									<TooltipProvider delayDuration={0}>
 										<Tooltip>
@@ -529,7 +551,7 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 							control={form.control}
 							name="rollbackConfigSwarm"
 							render={({ field }) => (
-								<FormItem className="relative  max-lg:px-4 lg:pl-6 ">
+								<FormItem className="relative ">
 									<FormLabel>Rollback Config</FormLabel>
 									<TooltipProvider delayDuration={0}>
 										<Tooltip>
@@ -587,7 +609,7 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 							control={form.control}
 							name="modeSwarm"
 							render={({ field }) => (
-								<FormItem className="relative  max-lg:px-4 lg:pr-6 ">
+								<FormItem className="relative ">
 									<FormLabel>Mode</FormLabel>
 									<TooltipProvider delayDuration={0}>
 										<Tooltip>
@@ -650,7 +672,7 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 							control={form.control}
 							name="networkSwarm"
 							render={({ field }) => (
-								<FormItem className="relative max-lg:px-4 lg:pl-6 ">
+								<FormItem className="relative ">
 									<FormLabel>Network</FormLabel>
 									<TooltipProvider delayDuration={0}>
 										<Tooltip>
@@ -709,7 +731,7 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 							control={form.control}
 							name="labelsSwarm"
 							render={({ field }) => (
-								<FormItem className="relative max-lg:px-4 lg:pr-6 ">
+								<FormItem className="relative ">
 									<FormLabel>Labels</FormLabel>
 									<TooltipProvider delayDuration={0}>
 										<Tooltip>

apps/dokploy/components/dashboard/application/advanced/cluster/show-cluster-settings.tsx

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Server } from "lucide-react";
+import Link from "next/link";
+import { useEffect } from "react";
+import { 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 {
@@ -26,43 +33,57 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Server } from "lucide-react";
-import Link from "next/link";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import { AddSwarmSettings } from "./modify-swarm-settings";
 
 interface Props {
-	applicationId: string;
+	id: string;
+	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
 }
 
 const AddRedirectchema = z.object({
 	replicas: z.number().min(1, "Replicas must be at least 1"),
-	registryId: z.string(),
+	registryId: z.string().optional(),
 });
 
 type AddCommand = z.infer<typeof AddRedirectchema>;
 
-export const ShowClusterSettings = ({ applicationId }: Props) => {
-	const { data } = api.application.one.useQuery(
-		{
-			applicationId,
-		},
-		{ enabled: !!applicationId },
-	);
-
+export const ShowClusterSettings = ({ id, type }: Props) => {
+	const queryMap = {
+		postgres: () =>
+			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
+		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
+		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
+		mariadb: () =>
+			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
+		application: () =>
+			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
+		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+	};
+	const { data, refetch } = queryMap[type]
+		? queryMap[type]()
+		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
 	const { data: registries } = api.registry.all.useQuery();
 
-	const utils = api.useUtils();
+	const mutationMap = {
+		postgres: () => api.postgres.update.useMutation(),
+		redis: () => api.redis.update.useMutation(),
+		mysql: () => api.mysql.update.useMutation(),
+		mariadb: () => api.mariadb.update.useMutation(),
+		application: () => api.application.update.useMutation(),
+		mongo: () => api.mongo.update.useMutation(),
+	};
 
-	const { mutateAsync, isLoading } = api.application.update.useMutation();
+	const { mutateAsync, isLoading } = mutationMap[type]
+		? mutationMap[type]()
+		: api.mongo.update.useMutation();
 
 	const form = useForm<AddCommand>({
 		defaultValues: {
-			registryId: data?.registryId || "",
+			...(type === "application" && data && "registryId" in data
+				? {
+						registryId: data?.registryId || "",
+					}
+				: {}),
 			replicas: data?.replicas || 1,
 		},
 		resolver: zodResolver(AddRedirectchema),
@@ -71,7 +92,11 @@ export const ShowClusterSettings = ({ applicationId }: Props) => {
 	useEffect(() => {
 		if (data?.command) {
 			form.reset({
-				registryId: data?.registryId || "",
+				...(type === "application" && data && "registryId" in data
+					? {
+							registryId: data?.registryId || "",
+						}
+					: {}),
 				replicas: data?.replicas || 1,
 			});
 		}
@@ -79,18 +104,25 @@ export const ShowClusterSettings = ({ applicationId }: Props) => {
 
 	const onSubmit = async (data: AddCommand) => {
 		await mutateAsync({
-			applicationId,
-			registryId:
-				data?.registryId === "none" || !data?.registryId
-					? null
-					: data?.registryId,
+			applicationId: id || "",
+			postgresId: id || "",
+			redisId: id || "",
+			mysqlId: id || "",
+			mariadbId: id || "",
+			mongoId: id || "",
+			...(type === "application"
+				? {
+						registryId:
+							data?.registryId === "none" || !data?.registryId
+								? null
+								: data?.registryId,
+					}
+				: {}),
 			replicas: data?.replicas,
 		})
 			.then(async () => {
 				toast.success("Command Updated");
-				await utils.application.one.invalidate({
-					applicationId,
-				});
+				await refetch();
 			})
 			.catch(() => {
 				toast.error("Error updating the command");
@@ -103,10 +135,10 @@ export const ShowClusterSettings = ({ applicationId }: Props) => {
 				<div>
 					<CardTitle className="text-xl">Cluster Settings</CardTitle>
 					<CardDescription>
-						Add the registry and the replicas of the application
+						Modify swarm settings for the service.
 					</CardDescription>
 				</div>
-				<AddSwarmSettings applicationId={applicationId} />
+				<AddSwarmSettings id={id} type={type} />
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
 				<AlertBlock type="info">
@@ -144,58 +176,62 @@ export const ShowClusterSettings = ({ applicationId }: Props) => {
 							/>
 						</div>
 
-						{registries && registries?.length === 0 ? (
-							<div className="pt-10">
-								<div className="flex flex-col items-center gap-3">
-									<Server className="size-8 text-muted-foreground" />
-									<span className="text-base text-muted-foreground">
-										To use a cluster feature, you need to configure at least a
-										registry first. Please, go to{" "}
-										<Link
-											href="/dashboard/settings/cluster"
-											className="text-foreground"
-										>
-											Settings
-										</Link>{" "}
-										to do so.
-									</span>
-								</div>
-							</div>
-						) : (
+						{type === "application" && (
 							<>
-								<FormField
-									control={form.control}
-									name="registryId"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Select a registry</FormLabel>
-											<Select
-												onValueChange={field.onChange}
-												defaultValue={field.value}
-											>
-												<SelectTrigger>
-													<SelectValue placeholder="Select a registry" />
-												</SelectTrigger>
-												<SelectContent>
-													<SelectGroup>
-														{registries?.map((registry) => (
-															<SelectItem
-																key={registry.registryId}
-																value={registry.registryId}
-															>
-																{registry.registryName}
-															</SelectItem>
-														))}
-														<SelectItem value={"none"}>None</SelectItem>
-														<SelectLabel>
-															Registries ({registries?.length})
-														</SelectLabel>
-													</SelectGroup>
-												</SelectContent>
-											</Select>
-										</FormItem>
-									)}
-								/>
+								{registries && registries?.length === 0 ? (
+									<div className="pt-10">
+										<div className="flex flex-col items-center gap-3">
+											<Server className="size-8 text-muted-foreground" />
+											<span className="text-base text-muted-foreground">
+												To use a cluster feature, you need to configure at least
+												a registry first. Please, go to{" "}
+												<Link
+													href="/dashboard/settings/cluster"
+													className="text-foreground"
+												>
+													Settings
+												</Link>{" "}
+												to do so.
+											</span>
+										</div>
+									</div>
+								) : (
+									<>
+										<FormField
+											control={form.control}
+											name="registryId"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Select a registry</FormLabel>
+													<Select
+														onValueChange={field.onChange}
+														defaultValue={field.value}
+													>
+														<SelectTrigger>
+															<SelectValue placeholder="Select a registry" />
+														</SelectTrigger>
+														<SelectContent>
+															<SelectGroup>
+																{registries?.map((registry) => (
+																	<SelectItem
+																		key={registry.registryId}
+																		value={registry.registryId}
+																	>
+																		{registry.registryName}
+																	</SelectItem>
+																))}
+																<SelectItem value={"none"}>None</SelectItem>
+																<SelectLabel>
+																	Registries ({registries?.length})
+																</SelectLabel>
+															</SelectGroup>
+														</SelectContent>
+													</Select>
+												</FormItem>
+											)}
+										/>
+									</>
+								)}
 							</>
 						)}
 

apps/dokploy/components/dashboard/application/advanced/ports/handle-ports.tsx

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PenBoxIcon, PlusIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm, useWatch } 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 {
@@ -26,12 +32,6 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-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";
 
 const AddPortSchema = z.object({
 	publishedPort: z.number().int().min(1).max(65535),
@@ -80,6 +80,11 @@ export const HandlePorts = ({
 		resolver: zodResolver(AddPortSchema),
 	});
 
+	const publishMode = useWatch({
+		control: form.control,
+		name: "publishMode",
+	});
+
 	useEffect(() => {
 		form.reset({
 			publishedPort: data?.publishedPort ?? 0,
@@ -253,6 +258,16 @@ export const HandlePorts = ({
 						</div>
 					</form>
 
+					{publishMode === "host" && (
+						<AlertBlock type="warning" className="mt-4">
+							<strong>Host Mode Limitation:</strong> When using Host publish
+							mode, Docker Swarm has limitations that prevent proper container
+							updates during deployments. Old containers may not be replaced
+							automatically. Consider using Ingress mode instead, or be prepared
+							to manually stop/start the application after deployments.
+						</AlertBlock>
+					)}
+
 					<DialogFooter>
 						<Button
 							isLoading={isLoading}

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

@@ -1,3 +1,5 @@
+import { Package, Trash2 } from "lucide-react";
+import { toast } from "sonner";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
@@ -9,11 +11,10 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { Package, Trash2 } from "lucide-react";
-import { toast } from "sonner";
 import type { ServiceType } from "../show-resources";
 import { AddVolumes } from "./add-volumes";
 import { UpdateVolume } from "./update-volume";
+
 interface Props {
 	id: string;
 	type: ServiceType | "compose";
@@ -80,7 +81,7 @@ export const ShowVolumes = ({ id, type }: Props) => {
 										className="flex w-full flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-10 border rounded-lg p-4"
 									>
 										{/* <Package className="size-8 self-center text-muted-foreground" /> */}
-										<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 flex-col gap-4 sm:gap-8">
+										<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 flex-col gap-4 sm:gap-8">
 											<div className="flex flex-col gap-1">
 												<span className="font-medium">Mount Type</span>
 												<span className="text-sm text-muted-foreground">
@@ -112,21 +113,21 @@ export const ShowVolumes = ({ id, type }: Props) => {
 													</span>
 												</div>
 											)}
-											{mount.type === "file" ? (
+											{mount.type === "file" && (
 												<div className="flex flex-col gap-1">
 													<span className="font-medium">File Path</span>
 													<span className="text-sm text-muted-foreground">
 														{mount.filePath}
 													</span>
 												</div>
-											) : (
-												<div className="flex flex-col gap-1">
-													<span className="font-medium">Mount Path</span>
-													<span className="text-sm text-muted-foreground">
-														{mount.mountPath}
-													</span>
-												</div>
 											)}
+
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Mount Path</span>
+												<span className="text-sm text-muted-foreground">
+													{mount.mountPath}
+												</span>
+											</div>
 										</div>
 										<div className="flex flex-row gap-1">
 											<UpdateVolume

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Cog } from "lucide-react";
+import { useEffect } from "react";
+import { 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";
@@ -15,12 +21,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Cog } from "lucide-react";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 export enum BuildType {
 	dockerfile = "dockerfile",
@@ -65,6 +65,7 @@ const mySchema = z.discriminatedUnion("buildType", [
 	}),
 	z.object({
 		buildType: z.literal(BuildType.railpack),
+		railpackVersion: z.string().nullable().default("0.2.2"),
 	}),
 	z.object({
 		buildType: z.literal(BuildType.static),
@@ -86,6 +87,7 @@ interface ApplicationData {
 	herokuVersion?: string | null;
 	publishDirectory?: string | null;
 	isStaticSpa?: boolean | null;
+	railpackVersion?: string | null | undefined;
 }
 
 function isValidBuildType(value: string): value is BuildType {
@@ -123,6 +125,7 @@ const resetData = (data: ApplicationData): AddTemplate => {
 		case BuildType.railpack:
 			return {
 				buildType: BuildType.railpack,
+				railpackVersion: data.railpackVersion || null,
 			};
 		default: {
 			const buildType = data.buildType as BuildType;
@@ -181,6 +184,10 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 					: null,
 			isStaticSpa:
 				data.buildType === BuildType.static ? data.isStaticSpa : null,
+			railpackVersion:
+				data.buildType === BuildType.railpack
+					? data.railpackVersion || "0.2.2"
+					: null,
 		})
 			.then(async () => {
 				toast.success("Build type saved");
@@ -395,6 +402,25 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 								)}
 							/>
 						)}
+						{buildType === BuildType.railpack && (
+							<FormField
+								control={form.control}
+								name="railpackVersion"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Railpack Version</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="Railpack Version"
+												{...field}
+												value={field.value ?? ""}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						)}
 						<div className="flex w-full justify-end">
 							<Button isLoading={isLoading} type="submit">
 								Save

apps/dokploy/components/dashboard/application/domains/handle-domain.tsx

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { DatabaseZap, Dices, RefreshCw } from "lucide-react";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { 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 {
@@ -34,14 +41,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { DatabaseZap, Dices, RefreshCw } from "lucide-react";
-import Link from "next/link";
-import z from "zod";
 
 export type CacheType = "fetch" | "cache";
 
@@ -123,6 +122,7 @@ interface Props {
 export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const [cacheType, setCacheType] = useState<CacheType>("cache");
+	const [isManualInput, setIsManualInput] = useState(false);
 
 	const utils = api.useUtils();
 	const { data, refetch } = api.domain.one.useQuery(
@@ -325,46 +325,126 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 													<FormItem className="w-full">
 														<FormLabel>Service Name</FormLabel>
 														<div className="flex gap-2">
-															<Select
-																onValueChange={field.onChange}
-																defaultValue={field.value || ""}
-															>
+															{isManualInput ? (
 																<FormControl>
-																	<SelectTrigger>
-																		<SelectValue placeholder="Select a service name" />
-																	</SelectTrigger>
+																	<Input
+																		placeholder="Enter service name manually"
+																		{...field}
+																		className="w-full"
+																	/>
 																</FormControl>
+															) : (
+																<Select
+																	onValueChange={field.onChange}
+																	defaultValue={field.value || ""}
+																>
+																	<FormControl>
+																		<SelectTrigger>
+																			<SelectValue placeholder="Select a service name" />
+																		</SelectTrigger>
+																	</FormControl>
 
-																<SelectContent>
-																	{services?.map((service, index) => (
-																		<SelectItem
-																			value={service}
-																			key={`${service}-${index}`}
-																		>
-																			{service}
+																	<SelectContent>
+																		{services?.map((service, index) => (
+																			<SelectItem
+																				value={service}
+																				key={`${service}-${index}`}
+																			>
+																				{service}
+																			</SelectItem>
+																		))}
+																		<SelectItem value="none" disabled>
+																			Empty
 																		</SelectItem>
-																	))}
-																	<SelectItem value="none" disabled>
-																		Empty
-																	</SelectItem>
-																</SelectContent>
-															</Select>
+																	</SelectContent>
+																</Select>
+															)}
+															{!isManualInput && (
+																<>
+																	<TooltipProvider delayDuration={0}>
+																		<Tooltip>
+																			<TooltipTrigger asChild>
+																				<Button
+																					variant="secondary"
+																					type="button"
+																					isLoading={isLoadingServices}
+																					onClick={() => {
+																						if (cacheType === "fetch") {
+																							refetchServices();
+																						} else {
+																							setCacheType("fetch");
+																						}
+																					}}
+																				>
+																					<RefreshCw className="size-4 text-muted-foreground" />
+																				</Button>
+																			</TooltipTrigger>
+																			<TooltipContent
+																				side="left"
+																				sideOffset={5}
+																				className="max-w-[10rem]"
+																			>
+																				<p>
+																					Fetch: Will clone the repository and
+																					load the services
+																				</p>
+																			</TooltipContent>
+																		</Tooltip>
+																	</TooltipProvider>
+																	<TooltipProvider delayDuration={0}>
+																		<Tooltip>
+																			<TooltipTrigger asChild>
+																				<Button
+																					variant="secondary"
+																					type="button"
+																					isLoading={isLoadingServices}
+																					onClick={() => {
+																						if (cacheType === "cache") {
+																							refetchServices();
+																						} else {
+																							setCacheType("cache");
+																						}
+																					}}
+																				>
+																					<DatabaseZap className="size-4 text-muted-foreground" />
+																				</Button>
+																			</TooltipTrigger>
+																			<TooltipContent
+																				side="left"
+																				sideOffset={5}
+																				className="max-w-[10rem]"
+																			>
+																				<p>
+																					Cache: If you previously deployed this
+																					compose, it will read the services
+																					from the last deployment/fetch from
+																					the repository
+																				</p>
+																			</TooltipContent>
+																		</Tooltip>
+																	</TooltipProvider>
+																</>
+															)}
 															<TooltipProvider delayDuration={0}>
 																<Tooltip>
 																	<TooltipTrigger asChild>
 																		<Button
 																			variant="secondary"
 																			type="button"
-																			isLoading={isLoadingServices}
 																			onClick={() => {
-																				if (cacheType === "fetch") {
-																					refetchServices();
-																				} else {
-																					setCacheType("fetch");
+																				setIsManualInput(!isManualInput);
+																				if (!isManualInput) {
+																					field.onChange("");
 																				}
 																			}}
 																		>
-																			<RefreshCw className="size-4 text-muted-foreground" />
+																			{isManualInput ? (
+																				<RefreshCw className="size-4 text-muted-foreground" />
+																			) : (
+																				<span className="text-xs text-muted-foreground">
+																					Manual
+																				</span>
+																			)}
 																		</Button>
 																	</TooltipTrigger>
 																	<TooltipContent
@@ -373,40 +453,9 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 																		className="max-w-[10rem]"
 																	>
 																		<p>
-																			Fetch: Will clone the repository and load
-																			the services
-																		</p>
-																	</TooltipContent>
-																</Tooltip>
-															</TooltipProvider>
-															<TooltipProvider delayDuration={0}>
-																<Tooltip>
-																	<TooltipTrigger asChild>
-																		<Button
-																			variant="secondary"
-																			type="button"
-																			isLoading={isLoadingServices}
-																			onClick={() => {
-																				if (cacheType === "cache") {
-																					refetchServices();
-																				} else {
-																					setCacheType("cache");
-																				}
-																			}}
-																		>
-																			<DatabaseZap className="size-4 text-muted-foreground" />
-																		</Button>
-																	</TooltipTrigger>
-																	<TooltipContent
-																		side="left"
-																		sideOffset={5}
-																		className="max-w-[10rem]"
-																	>
-																		<p>
-																			Cache: If you previously deployed this
-																			compose, it will read the services from
-																			the last deployment/fetch from the
-																			repository
+																			{isManualInput
+																				? "Switch to service selection"
+																				: "Enter service name manually"}
 																		</p>
 																	</TooltipContent>
 																</Tooltip>

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

@@ -0,0 +1,241 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle, Loader2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+} from "@/components/ui/form";
+
+import { Switch } from "@/components/ui/switch";
+import { api } from "@/utils/api";
+
+interface Props {
+	composeId: string;
+}
+
+// Schema for Isolated Deployment
+const isolatedSchema = z.object({
+	isolatedDeployment: z.boolean().optional(),
+});
+
+type IsolatedSchema = z.infer<typeof isolatedSchema>;
+
+export const IsolatedDeploymentTab = ({ composeId }: Props) => {
+	const utils = api.useUtils();
+	const [compose, setCompose] = useState<string>("");
+	const [isPreviewLoading, setIsPreviewLoading] = useState<boolean>(false);
+	const { mutateAsync, error, isError } =
+		api.compose.isolatedDeployment.useMutation();
+
+	const [isOpenPreview, setIsOpenPreview] = useState<boolean>(false);
+
+	const { mutateAsync: updateCompose } = api.compose.update.useMutation();
+
+	const { data, refetch } = api.compose.one.useQuery(
+		{ composeId },
+		{ enabled: !!composeId },
+	);
+
+	const form = useForm<IsolatedSchema>({
+		defaultValues: {
+			isolatedDeployment: false,
+		},
+		resolver: zodResolver(isolatedSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				isolatedDeployment: data?.isolatedDeployment || false,
+			});
+		}
+	}, [form, form.reset, form.formState.isSubmitSuccessful, data]);
+
+	const onSubmit = async (formData: IsolatedSchema) => {
+		await updateCompose({
+			composeId,
+			isolatedDeployment: formData?.isolatedDeployment || false,
+		})
+			.then(async (_data) => {
+				await refetch();
+				toast.success("Compose updated");
+			})
+			.catch(() => {
+				toast.error("Error updating the compose");
+			});
+	};
+
+	const generatePreview = async () => {
+		setIsOpenPreview(true);
+		setIsPreviewLoading(true);
+		try {
+			await mutateAsync({
+				composeId,
+				suffix: data?.appName || "",
+			}).then(async (data) => {
+				await utils.project.all.invalidate();
+				setCompose(data);
+			});
+		} catch {
+			toast.error("Error generating preview");
+			setIsOpenPreview(false);
+		} finally {
+			setIsPreviewLoading(false);
+		}
+	};
+
+	return (
+		<Card className="bg-background">
+			<CardHeader>
+				<CardTitle className="text-xl">Enable Isolated Deployment</CardTitle>
+				<CardDescription>
+					Configure isolated deployment to the compose file.
+					<div className="text-sm text-muted-foreground flex flex-col gap-2">
+						<span>
+							This feature creates an isolated environment for your deployment
+							by adding unique prefixes to all resources. It establishes a
+							dedicated network based on your compose file's name, ensuring your
+							services run in isolation. This prevents conflicts when running
+							multiple instances of the same template or services with identical
+							names.
+						</span>
+						<div className="space-y-4">
+							<div>
+								<h4 className="font-medium mb-2">
+									Resources that will be isolated:
+								</h4>
+								<ul className="list-disc list-inside">
+									<li>Docker networks</li>
+								</ul>
+							</div>
+						</div>
+					</div>
+				</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<div className="space-y-4">
+					{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+					<Form {...form}>
+						<form
+							onSubmit={form.handleSubmit(onSubmit)}
+							id="isolated-deployment-form"
+							className="grid w-full gap-4"
+						>
+							{isError && (
+								<div className="flex flex-row gap-4 rounded-lg items-center bg-red-50 p-2 dark:bg-red-950">
+									<AlertTriangle className="text-red-600 dark:text-red-400" />
+									<span className="text-sm text-red-600 dark:text-red-400">
+										{error?.message}
+									</span>
+								</div>
+							)}
+
+							<div className="flex flex-col lg:flex-col gap-4 w-full">
+								<div>
+									<FormField
+										control={form.control}
+										name="isolatedDeployment"
+										render={({ field }) => (
+											<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+												<div className="space-y-0.5">
+													<FormLabel>
+														Enable Isolated Deployment ({data?.appName})
+													</FormLabel>
+													<FormDescription>
+														Enable isolated deployment to the compose file.
+													</FormDescription>
+												</div>
+												<FormControl>
+													<Switch
+														checked={field.value}
+														onCheckedChange={field.onChange}
+													/>
+												</FormControl>
+											</FormItem>
+										)}
+									/>
+								</div>
+
+								<div className="flex flex-col lg:flex-row gap-4 w-full items-end justify-end">
+									<Button
+										form="isolated-deployment-form"
+										type="submit"
+										className="lg:w-fit"
+										isLoading={form.formState.isSubmitting}
+									>
+										Save
+									</Button>
+								</div>
+							</div>
+
+							<div className="flex flex-col lg:flex-row gap-4 w-full items-end justify-end">
+								<Button
+									onClick={generatePreview}
+									isLoading={isPreviewLoading}
+									variant="secondary"
+									className="lg:w-fit"
+								>
+									Preview Compose
+								</Button>
+								<Dialog open={isOpenPreview} onOpenChange={setIsOpenPreview}>
+									<DialogContent className="sm:max-w-6xl max-h-[80vh]">
+										<DialogHeader>
+											<DialogTitle>Isolated Deployment Preview</DialogTitle>
+											<DialogDescription>
+												Preview of the compose file with isolated deployment
+												configuration
+											</DialogDescription>
+										</DialogHeader>
+										<div className="flex flex-col gap-4 overflow-auto">
+											{isPreviewLoading ? (
+												<div className="flex flex-col items-center justify-center py-12 gap-4">
+													<Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
+													<p className="text-muted-foreground">
+														Generating compose preview...
+													</p>
+												</div>
+											) : (
+												<pre>
+													<CodeEditor
+														value={compose || ""}
+														language="yaml"
+														readOnly
+														height="60vh"
+													/>
+												</pre>
+											)}
+										</div>
+									</DialogContent>
+								</Dialog>
+							</div>
+						</form>
+					</Form>
+				</div>
+			</CardContent>
+		</Card>
+	);
+};

apps/dokploy/components/dashboard/compose/general/compose-file-editor.tsx

@@ -1,3 +1,8 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
 import {
@@ -8,13 +13,7 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import { validateAndFormatYAML } from "../../application/advanced/traefik/update-traefik-config";
-import { ShowUtilities } from "./show-utilities";
 
 interface Props {
 	composeId: string;
@@ -142,9 +141,7 @@ services:
 					</form>
 				</Form>
 				<div className="flex justify-between flex-col lg:flex-row gap-2">
-					<div className="w-full flex flex-col lg:flex-row gap-4 items-end">
-						<ShowUtilities composeId={composeId} />
-					</div>
+					<div className="w-full flex flex-col lg:flex-row gap-4 items-end"></div>
 					<Button
 						type="submit"
 						form="hook-form-save-compose-file"

apps/dokploy/components/dashboard/compose/general/isolated-deployment.tsx

@@ -1,188 +0,0 @@
-import { AlertBlock } from "@/components/shared/alert-block";
-import { CodeEditor } from "@/components/shared/code-editor";
-import { Button } from "@/components/ui/button";
-import {
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-} from "@/components/ui/form";
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-
-interface Props {
-	composeId: string;
-}
-
-const schema = z.object({
-	isolatedDeployment: z.boolean().optional(),
-});
-
-type Schema = z.infer<typeof schema>;
-
-export const IsolatedDeployment = ({ composeId }: Props) => {
-	const utils = api.useUtils();
-	const [compose, setCompose] = useState<string>("");
-	const { mutateAsync, error, isError } =
-		api.compose.isolatedDeployment.useMutation();
-
-	const { mutateAsync: updateCompose } = api.compose.update.useMutation();
-
-	const { data, refetch } = api.compose.one.useQuery(
-		{ composeId },
-		{ enabled: !!composeId },
-	);
-
-	console.log(data);
-
-	const form = useForm<Schema>({
-		defaultValues: {
-			isolatedDeployment: false,
-		},
-		resolver: zodResolver(schema),
-	});
-
-	useEffect(() => {
-		randomizeCompose();
-		if (data) {
-			form.reset({
-				isolatedDeployment: data?.isolatedDeployment || false,
-			});
-		}
-	}, [form, form.reset, form.formState.isSubmitSuccessful, data]);
-
-	const onSubmit = async (formData: Schema) => {
-		await updateCompose({
-			composeId,
-			isolatedDeployment: formData?.isolatedDeployment || false,
-		})
-			.then(async (_data) => {
-				await randomizeCompose();
-				await refetch();
-				toast.success("Compose updated");
-			})
-			.catch(() => {
-				toast.error("Error updating the compose");
-			});
-	};
-
-	const randomizeCompose = async () => {
-		await mutateAsync({
-			composeId,
-			suffix: data?.appName || "",
-		}).then(async (data) => {
-			await utils.project.all.invalidate();
-			setCompose(data);
-		});
-	};
-
-	return (
-		<>
-			<DialogHeader>
-				<DialogTitle>Isolate Deployment</DialogTitle>
-				<DialogDescription>
-					Use this option to isolate the deployment of this compose file.
-				</DialogDescription>
-			</DialogHeader>
-			<div className="text-sm text-muted-foreground flex flex-col gap-2">
-				<span>
-					This feature creates an isolated environment for your deployment by
-					adding unique prefixes to all resources. It establishes a dedicated
-					network based on your compose file's name, ensuring your services run
-					in isolation. This prevents conflicts when running multiple instances
-					of the same template or services with identical names.
-				</span>
-				<div className="space-y-4">
-					<div>
-						<h4 className="font-medium mb-2">
-							Resources that will be isolated:
-						</h4>
-						<ul className="list-disc list-inside">
-							<li>Docker volumes</li>
-							<li>Docker networks</li>
-						</ul>
-					</div>
-				</div>
-			</div>
-			{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
-			<Form {...form}>
-				<form
-					onSubmit={form.handleSubmit(onSubmit)}
-					id="hook-form-add-project"
-					className="grid w-full gap-4"
-				>
-					{isError && (
-						<div className="flex flex-row gap-4 rounded-lg items-center bg-red-50 p-2 dark:bg-red-950">
-							<AlertTriangle className="text-red-600 dark:text-red-400" />
-							<span className="text-sm text-red-600 dark:text-red-400">
-								{error?.message}
-							</span>
-						</div>
-					)}
-
-					<div className="flex flex-col lg:flex-col  gap-4 w-full ">
-						<div>
-							<FormField
-								control={form.control}
-								name="isolatedDeployment"
-								render={({ field }) => (
-									<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-										<div className="space-y-0.5">
-											<FormLabel>
-												Enable Isolated Deployment ({data?.appName})
-											</FormLabel>
-											<FormDescription>
-												Enable isolated deployment to the compose file.
-											</FormDescription>
-										</div>
-										<FormControl>
-											<Switch
-												checked={field.value}
-												onCheckedChange={field.onChange}
-											/>
-										</FormControl>
-									</FormItem>
-								)}
-							/>
-						</div>
-
-						<div className="flex flex-col lg:flex-row  gap-4 w-full items-end justify-end">
-							<Button
-								form="hook-form-add-project"
-								type="submit"
-								className="lg:w-fit"
-							>
-								Save
-							</Button>
-						</div>
-					</div>
-					<div className="flex flex-col gap-4">
-						<Label>Preview</Label>
-						<pre>
-							<CodeEditor
-								value={compose || ""}
-								language="yaml"
-								readOnly
-								height="50rem"
-							/>
-						</pre>
-					</div>
-				</form>
-			</Form>
-		</>
-	);
-};

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

@@ -1,3 +1,6 @@
+import { Loader2, Puzzle, RefreshCw } from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
@@ -10,9 +13,6 @@ import {
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import { api } from "@/utils/api";
-import { Loader2, Puzzle, RefreshCw } from "lucide-react";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
 
 interface Props {
 	composeId: string;
@@ -62,7 +62,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
-				<AlertBlock type="info">
+				<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>
@@ -79,7 +79,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 					</div>
 				) : (
 					<>
-						<div className="flex flex-row gap-2 justify-end">
+						<div className="flex flex-row gap-2 justify-end my-4">
 							<Button
 								variant="secondary"
 								isLoading={isLoading}

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

@@ -1,46 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { useState } from "react";
-import { IsolatedDeployment } from "./isolated-deployment";
-import { RandomizeCompose } from "./randomize-compose";
-
-interface Props {
-	composeId: string;
-}
-
-export const ShowUtilities = ({ composeId }: Props) => {
-	const [isOpen, setIsOpen] = useState(false);
-	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
-				<Button variant="ghost">Show Utilities</Button>
-			</DialogTrigger>
-			<DialogContent className="sm:max-w-5xl">
-				<DialogHeader>
-					<DialogTitle>Utilities </DialogTitle>
-					<DialogDescription>Modify the application data</DialogDescription>
-				</DialogHeader>
-				<Tabs defaultValue="isolated">
-					<TabsList className="grid w-full grid-cols-2">
-						<TabsTrigger value="isolated">Isolated Deployment</TabsTrigger>
-						<TabsTrigger value="randomize">Randomize Compose</TabsTrigger>
-					</TabsList>
-					<TabsContent value="randomize" className="pt-5">
-						<RandomizeCompose composeId={composeId} />
-					</TabsContent>
-					<TabsContent value="isolated" className="pt-5">
-						<IsolatedDeployment composeId={composeId} />
-					</TabsContent>
-				</Tabs>
-			</DialogContent>
-		</Dialog>
-	);
-};

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

@@ -1,13 +1,14 @@
+import { Download as DownloadIcon, Loader2, Pause, Play } from "lucide-react";
+import React, { useEffect, useRef } from "react";
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import { Download as DownloadIcon, Loader2 } from "lucide-react";
-import React, { useEffect, useRef } from "react";
 import { LineCountFilter } from "./line-count-filter";
 import { SinceLogsFilter, type TimeFilter } from "./since-logs-filter";
 import { StatusLogsFilter } from "./status-logs-filter";
 import { TerminalLine } from "./terminal-line";
-import { type LogLine, getLogType, parseLogs } from "./utils";
+import { getLogType, type LogLine, parseLogs } from "./utils";
 
 interface Props {
 	containerId: string;
@@ -61,6 +62,9 @@ export const DockerLogsId: React.FC<Props> = ({
 	const [showTimestamp, setShowTimestamp] = React.useState(true);
 	const [since, setSince] = React.useState<TimeFilter>("all");
 	const [typeFilter, setTypeFilter] = React.useState<string[]>([]);
+	const [isPaused, setIsPaused] = React.useState(false);
+	const [messageBuffer, setMessageBuffer] = React.useState<string[]>([]);
+	const isPausedRef = useRef(false);
 	const scrollRef = useRef<HTMLDivElement>(null);
 	const [isLoading, setIsLoading] = React.useState(false);
 
@@ -85,15 +89,38 @@ export const DockerLogsId: React.FC<Props> = ({
 	const handleLines = (lines: number) => {
 		setRawLogs("");
 		setFilteredLogs([]);
+		setMessageBuffer([]);
 		setLines(lines);
 	};
 
 	const handleSince = (value: TimeFilter) => {
 		setRawLogs("");
 		setFilteredLogs([]);
+		setMessageBuffer([]);
 		setSince(value);
 	};
 
+	const handlePauseResume = () => {
+		if (isPaused) {
+			// Resume: Apply all buffered messages
+			if (messageBuffer.length > 0) {
+				const bufferedContent = messageBuffer.join("");
+				setRawLogs((prev) => {
+					const updated = prev + bufferedContent;
+					const splitLines = updated.split("\n");
+					if (splitLines.length > lines) {
+						return splitLines.slice(-lines).join("\n");
+					}
+					return updated;
+				});
+				setMessageBuffer([]);
+			}
+		}
+		const newPausedState = !isPaused;
+		setIsPaused(newPausedState);
+		isPausedRef.current = newPausedState;
+	};
+
 	useEffect(() => {
 		if (!containerId) return;
 
@@ -102,6 +129,10 @@ export const DockerLogsId: React.FC<Props> = ({
 		setIsLoading(true);
 		setRawLogs("");
 		setFilteredLogs([]);
+		setMessageBuffer([]);
+		// Reset pause state when container changes
+		setIsPaused(false);
+		isPausedRef.current = false;
 
 		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
 		const params = new globalThis.URLSearchParams({
@@ -140,14 +171,22 @@ export const DockerLogsId: React.FC<Props> = ({
 
 		ws.onmessage = (e) => {
 			if (!isCurrentConnection) return;
-			setRawLogs((prev) => {
-				const updated = prev + e.data;
-				const splitLines = updated.split("\n");
-				if (splitLines.length > lines) {
-					return splitLines.slice(-lines).join("\n");
-				}
-				return updated;
-			});
+
+			if (isPausedRef.current) {
+				// When paused, buffer the messages instead of displaying them
+				setMessageBuffer((prev) => [...prev, e.data]);
+			} else {
+				// When not paused, display messages normally
+				setRawLogs((prev) => {
+					const updated = prev + e.data;
+					const splitLines = updated.split("\n");
+					if (splitLines.length > lines) {
+						return splitLines.slice(-lines).join("\n");
+					}
+					return updated;
+				});
+			}
+
 			setIsLoading(false);
 			if (noDataTimeout) clearTimeout(noDataTimeout);
 		};
@@ -210,9 +249,15 @@ export const DockerLogsId: React.FC<Props> = ({
 		});
 	};
 
+	// Sync isPausedRef with isPaused state
+	useEffect(() => {
+		isPausedRef.current = isPaused;
+	}, [isPaused]);
+
 	useEffect(() => {
 		setRawLogs("");
 		setFilteredLogs([]);
+		setMessageBuffer([]);
 	}, [containerId]);
 
 	useEffect(() => {
@@ -260,17 +305,48 @@ export const DockerLogsId: React.FC<Props> = ({
 							/>
 						</div>
 
-						<Button
-							variant="outline"
-							size="sm"
-							className="h-9 sm:w-auto w-full"
-							onClick={handleDownload}
-							disabled={filteredLogs.length === 0 || !data?.Name}
-						>
-							<DownloadIcon className="mr-2 h-4 w-4" />
-							Download logs
-						</Button>
+						<div className="flex gap-2">
+							<Button
+								variant="outline"
+								size="sm"
+								className="h-9"
+								onClick={handlePauseResume}
+								title={isPaused ? "Resume logs" : "Pause logs"}
+							>
+								{isPaused ? (
+									<Play className="mr-2 h-4 w-4" />
+								) : (
+									<Pause className="mr-2 h-4 w-4" />
+								)}
+								{isPaused ? "Resume" : "Pause"}
+							</Button>
+							<Button
+								variant="outline"
+								size="sm"
+								className="h-9 sm:w-auto w-full"
+								onClick={handleDownload}
+								disabled={filteredLogs.length === 0 || !data?.Name}
+							>
+								<DownloadIcon className="mr-2 h-4 w-4" />
+								Download logs
+							</Button>
+						</div>
 					</div>
+					{isPaused && (
+						<AlertBlock type="warning">
+							<div className="flex items-center gap-2">
+								<Pause className="h-4 w-4" />
+								<span>
+									Logs paused
+									{messageBuffer.length > 0 && (
+										<span className="ml-1 font-medium">
+											({messageBuffer.length} messages buffered)
+										</span>
+									)}
+								</span>
+							</div>
+						</AlertBlock>
+					)}
 					<div
 						ref={scrollRef}
 						onScroll={handleScroll}

apps/dokploy/components/dashboard/projects/show.tsx

@@ -1,3 +1,17 @@
+import {
+	AlertTriangle,
+	ArrowUpDown,
+	BookIcon,
+	ExternalLinkIcon,
+	FolderInput,
+	Loader2,
+	MoreHorizontalIcon,
+	Search,
+	TrashIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
 import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
 import { DateTooltip } from "@/components/shared/date-tooltip";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
@@ -31,20 +45,14 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
-import { api } from "@/utils/api";
 import {
-	AlertTriangle,
-	BookIcon,
-	ExternalLinkIcon,
-	FolderInput,
-	Loader2,
-	MoreHorizontalIcon,
-	Search,
-	TrashIcon,
-} from "lucide-react";
-import Link from "next/link";
-import { useMemo, useState } from "react";
-import { toast } from "sonner";
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
 import { HandleProject } from "./handle-project";
 import { ProjectEnvironment } from "./project-environment";
 
@@ -54,15 +62,65 @@ export const ShowProjects = () => {
 	const { data: auth } = api.user.get.useQuery();
 	const { mutateAsync } = api.project.remove.useMutation();
 	const [searchQuery, setSearchQuery] = useState("");
+	const [sortBy, setSortBy] = useState<string>(() => {
+		if (typeof window !== "undefined") {
+			return localStorage.getItem("projectsSort") || "createdAt-desc";
+		}
+		return "createdAt-desc";
+	});
+
+	useEffect(() => {
+		localStorage.setItem("projectsSort", sortBy);
+	}, [sortBy]);
 
 	const filteredProjects = useMemo(() => {
 		if (!data) return [];
-		return data.filter(
+
+		// First filter by search query
+		const filtered = data.filter(
 			(project) =>
 				project.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
 				project.description?.toLowerCase().includes(searchQuery.toLowerCase()),
 		);
-	}, [data, searchQuery]);
+
+		// Then sort the filtered results
+		const [field, direction] = sortBy.split("-");
+		return [...filtered].sort((a, b) => {
+			let comparison = 0;
+			switch (field) {
+				case "name":
+					comparison = a.name.localeCompare(b.name);
+					break;
+				case "createdAt":
+					comparison =
+						new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+					break;
+				case "services": {
+					const aTotalServices =
+						a.mariadb.length +
+						a.mongo.length +
+						a.mysql.length +
+						a.postgres.length +
+						a.redis.length +
+						a.applications.length +
+						a.compose.length;
+					const bTotalServices =
+						b.mariadb.length +
+						b.mongo.length +
+						b.mysql.length +
+						b.postgres.length +
+						b.redis.length +
+						b.applications.length +
+						b.compose.length;
+					comparison = aTotalServices - bTotalServices;
+					break;
+				}
+				default:
+					comparison = 0;
+			}
+			return direction === "asc" ? comparison : -comparison;
+		});
+	}, [data, searchQuery, sortBy]);
 
 	return (
 		<>
@@ -98,14 +156,40 @@ export const ShowProjects = () => {
 								</div>
 							) : (
 								<>
-									<div className="w-full relative">
-										<Input
-											placeholder="Filter projects..."
-											value={searchQuery}
-											onChange={(e) => setSearchQuery(e.target.value)}
-											className="pr-10"
-										/>
-										<Search className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+									<div className="flex max-sm:flex-col gap-4 items-center w-full">
+										<div className="flex-1 relative max-sm:w-full">
+											<Input
+												placeholder="Filter projects..."
+												value={searchQuery}
+												onChange={(e) => setSearchQuery(e.target.value)}
+												className="pr-10"
+											/>
+											<Search className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+										</div>
+										<div className="flex items-center gap-2 min-w-48 max-sm:w-full">
+											<ArrowUpDown className="size-4 text-muted-foreground" />
+											<Select value={sortBy} onValueChange={setSortBy}>
+												<SelectTrigger className="w-full">
+													<SelectValue placeholder="Sort by..." />
+												</SelectTrigger>
+												<SelectContent>
+													<SelectItem value="name-asc">Name (A-Z)</SelectItem>
+													<SelectItem value="name-desc">Name (Z-A)</SelectItem>
+													<SelectItem value="createdAt-desc">
+														Newest first
+													</SelectItem>
+													<SelectItem value="createdAt-asc">
+														Oldest first
+													</SelectItem>
+													<SelectItem value="services-desc">
+														Most services
+													</SelectItem>
+													<SelectItem value="services-asc">
+														Least services
+													</SelectItem>
+												</SelectContent>
+											</Select>
+										</div>
 									</div>
 									{filteredProjects?.length === 0 && (
 										<div className="mt-6 flex h-[50vh] w-full flex-col items-center justify-center space-y-4">

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

@@ -1,3 +1,4 @@
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -19,7 +20,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Switch } from "@/components/ui/switch";
-import { generateSHA256Hash } from "@/lib/utils";
+import { generateSHA256Hash, getFallbackAvatarInitials } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2, User } from "lucide-react";
@@ -257,6 +258,24 @@ export const ProfileForm = () => {
 																value={field.value}
 																className="flex flex-row flex-wrap gap-2 max-xl:justify-center"
 															>
+																<FormItem key="no-avatar">
+																	<FormLabel className="[&:has([data-state=checked])>.default-avatar]:border-primary [&:has([data-state=checked])>.default-avatar]:border-1 [&:has([data-state=checked])>.default-avatar]:p-px cursor-pointer">
+																		<FormControl>
+																			<RadioGroupItem
+																				value=""
+																				className="sr-only"
+																			/>
+																		</FormControl>
+
+																		<Avatar className="default-avatar h-12 w-12 rounded-full border hover:p-px hover:border-primary transition-transform">
+																			<AvatarFallback className="rounded-lg">
+																				{getFallbackAvatarInitials(
+																					data?.user?.name,
+																				)}
+																			</AvatarFallback>
+																		</Avatar>
+																	</FormLabel>
+																</FormItem>
 																{availableAvatars.map((image) => (
 																	<FormItem key={image}>
 																		<FormLabel className="[&:has([data-state=checked])>img]:border-primary [&:has([data-state=checked])>img]:border-1 [&:has([data-state=checked])>img]:p-px cursor-pointer">

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

@@ -1,5 +1,6 @@
+import { useTranslation } from "next-i18next";
+import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
-
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -10,8 +11,6 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { api } from "@/utils/api";
-import { useTranslation } from "next-i18next";
-import { toast } from "sonner";
 import { EditTraefikEnv } from "../../web-server/edit-traefik-env";
 import { ManageTraefikPorts } from "../../web-server/manage-traefik-ports";
 import { ShowModalLogs } from "../../web-server/show-modal-logs";

apps/dokploy/components/dashboard/settings/web-server/manage-traefik-ports.tsx

@@ -1,3 +1,11 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowRightLeft, Plus, Trash2 } from "lucide-react";
+import { useTranslation } from "next-i18next";
+import type React from "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 { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
@@ -19,15 +27,15 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { ArrowRightLeft, Plus, Trash2 } from "lucide-react";
-import { useTranslation } from "next-i18next";
-import type React from "react";
-import { useEffect, useState } from "react";
-import { useFieldArray, useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 interface Props {
 	children: React.ReactNode;
@@ -37,6 +45,7 @@ interface Props {
 const PortSchema = z.object({
 	targetPort: z.number().min(1, "Target port is required"),
 	publishedPort: z.number().min(1, "Published port is required"),
+	protocol: z.enum(["tcp", "udp", "sctp"]),
 });
 
 const TraefikPortsSchema = z.object({
@@ -75,12 +84,17 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 
 	useEffect(() => {
 		if (currentPorts) {
-			form.reset({ ports: currentPorts });
+			form.reset({
+				ports: currentPorts.map((port) => ({
+					...port,
+					protocol: port.protocol as "tcp" | "udp" | "sctp",
+				})),
+			});
 		}
 	}, [currentPorts, form]);
 
 	const handleAddPort = () => {
-		append({ targetPort: 0, publishedPort: 0 });
+		append({ targetPort: 0, publishedPort: 0, protocol: "tcp" });
 	};
 
 	const onSubmit = async (data: TraefikPortsForm) => {
@@ -96,7 +110,9 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 
 	return (
 		<>
-			<div onClick={() => setOpen(true)}>{children}</div>
+			<button type="button" onClick={() => setOpen(true)}>
+				{children}
+			</button>
 			<Dialog open={open} onOpenChange={setOpen}>
 				<DialogContent className="sm:max-w-3xl">
 					<DialogHeader>
@@ -143,8 +159,8 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 									<ScrollArea className="h-[400px] pr-4">
 										<div className="grid gap-4">
 											{fields.map((field, index) => (
-												<Card key={field.id}>
-													<CardContent className="grid grid-cols-[1fr_1fr_auto] gap-4 p-4 transparent">
+												<Card key={field.id} className="bg-transparent">
+													<CardContent className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 p-4 transparent">
 														<FormField
 															control={form.control}
 															name={`ports.${index}.targetPort`}
@@ -168,7 +184,6 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 																				);
 																			}}
 																			value={field.value || ""}
-																			className="w-full dark:bg-black"
 																			placeholder="e.g. 8080"
 																		/>
 																	</FormControl>
@@ -200,7 +215,6 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 																				);
 																			}}
 																			value={field.value || ""}
-																			className="w-full dark:bg-black"
 																			placeholder="e.g. 80"
 																		/>
 																	</FormControl>
@@ -208,6 +222,42 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 																</FormItem>
 															)}
 														/>
+														<FormField
+															control={form.control}
+															name={`ports.${index}.protocol`}
+															render={({ field }) => (
+																<FormItem>
+																	<FormLabel className="text-sm font-medium text-muted-foreground">
+																		Protocol
+																	</FormLabel>
+																	<FormControl>
+																		<Select
+																			onValueChange={field.onChange}
+																			defaultValue={field.value}
+																		>
+																			<SelectTrigger>
+																				<SelectValue placeholder="Select a protocol" />
+																			</SelectTrigger>
+																			<SelectContent>
+																				<SelectGroup>
+																					{["tcp", "udp", "sctp"].map(
+																						(protocol) => (
+																							<SelectItem
+																								key={protocol}
+																								value={protocol}
+																							>
+																								{protocol}
+																							</SelectItem>
+																						),
+																					)}
+																				</SelectGroup>
+																			</SelectContent>
+																		</Select>
+																	</FormControl>
+																	<FormMessage />
+																</FormItem>
+															)}
+														/>
 
 														<div className="flex items-end">
 															<Button

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

@@ -1,6 +1,7 @@
 import { ShowResources } from "@/components/dashboard/application/advanced/show-resources";
 import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
 import { ShowCustomCommand } from "@/components/dashboard/postgres/advanced/show-custom-command";
+import { ShowClusterSettings } from "../application/advanced/cluster/show-cluster-settings";
 import { RebuildDatabase } from "./rebuild-database";
 
 interface Props {
@@ -12,6 +13,7 @@ export const ShowDatabaseAdvancedSettings = ({ id, type }: Props) => {
 	return (
 		<div className="flex w-full flex-col gap-5">
 			<ShowCustomCommand id={id} type={type} />
+			<ShowClusterSettings id={id} type={type} />
 			<ShowVolumes id={id} type={type} />
 			<ShowResources id={id} type={type} />
 			<RebuildDatabase id={id} type={type} />

apps/dokploy/components/layouts/onboarding-layout.tsx

@@ -1,6 +1,6 @@
-import { cn } from "@/lib/utils";
 import Link from "next/link";
 import type React from "react";
+import { cn } from "@/lib/utils";
 import { GithubIcon } from "../icons/data-tools-icons";
 import { Logo } from "../shared/logo";
 import { Button } from "../ui/button";

apps/dokploy/components/layouts/side.tsx

@@ -1,4 +1,5 @@
 "use client";
+import type { inferRouterOutputs } from "@trpc/server";
 import {
 	Activity,
 	BarChartHorizontalBigIcon,
@@ -29,10 +30,10 @@ import {
 	User,
 	Users,
 } from "lucide-react";
+import Link from "next/link";
 import { usePathname } from "next/navigation";
-import type * as React from "react";
 import { useEffect, useState } from "react";
-
+import { toast } from "sonner";
 import {
 	Breadcrumb,
 	BreadcrumbItem,
@@ -77,10 +78,6 @@ import { authClient } from "@/lib/auth-client";
 import { cn } from "@/lib/utils";
 import type { AppRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
-import type { inferRouterOutputs } from "@trpc/server";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { toast } from "sonner";
 import { AddOrganization } from "../dashboard/organization/handle-organization";
 import { DialogAction } from "../shared/dialog-action";
 import { Logo } from "../shared/logo";
@@ -770,9 +767,7 @@ export default function Page({ children }: Props) {
 		setIsLoaded(true);
 	}, []);
 
-	const router = useRouter();
 	const pathname = usePathname();
-	const _currentPath = router.pathname;
 	const { data: auth } = api.user.get.useQuery();
 	const { data: dokployVersion } = api.settings.getDokployVersion.useQuery();
 

apps/dokploy/components/layouts/update-server.tsx

@@ -1,8 +1,7 @@
-import { api } from "@/utils/api";
 import type { IUpdateData } from "@dokploy/server/index";
 import { Download } from "lucide-react";
-import { useRouter } from "next/router";
 import { useEffect, useRef, useState } from "react";
+import { api } from "@/utils/api";
 import UpdateServer from "../dashboard/settings/web-server/update-server";
 import { Button } from "../ui/button";
 import {
@@ -11,6 +10,7 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "../ui/tooltip";
+
 const AUTO_CHECK_UPDATES_INTERVAL_MINUTES = 7;
 
 export const UpdateServerButton = () => {
@@ -18,7 +18,6 @@ export const UpdateServerButton = () => {
 		latestVersion: null,
 		updateAvailable: false,
 	});
-	const _router = useRouter();
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { mutateAsync: getUpdateData } =
 		api.settings.getUpdateData.useMutation();
@@ -26,9 +25,6 @@ export const UpdateServerButton = () => {
 
 	const checkUpdatesIntervalRef = useRef<null | NodeJS.Timeout>(null);
 
-	if (isCloud) {
-		return null;
-	}
 	useEffect(() => {
 		// Handling of automatic check for server updates
 		if (isCloud) {
@@ -77,7 +73,7 @@ export const UpdateServerButton = () => {
 		};
 	}, []);
 
-	return updateData.updateAvailable ? (
+	return !isCloud && updateData.updateAvailable ? (
 		<div className="border-t pt-4">
 			<UpdateServer
 				updateData={updateData}

apps/dokploy/components/layouts/user-nav.tsx

@@ -1,3 +1,5 @@
+import { ChevronsUpDown } from "lucide-react";
+import { useRouter } from "next/router";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
 	DropdownMenu,
@@ -17,10 +19,9 @@ import {
 } from "@/components/ui/select";
 import { authClient } from "@/lib/auth-client";
 import { Languages } from "@/lib/languages";
+import { getFallbackAvatarInitials } from "@/lib/utils";
 import { api } from "@/utils/api";
 import useLocale from "@/utils/hooks/use-locale";
-import { ChevronsUpDown } from "lucide-react";
-import { useRouter } from "next/router";
 import { ModeToggle } from "../ui/modeToggle";
 import { SidebarMenuButton } from "../ui/sidebar";
 
@@ -46,7 +47,9 @@ export const UserNav = () => {
 							src={data?.user?.image || ""}
 							alt={data?.user?.image || ""}
 						/>
-						<AvatarFallback className="rounded-lg">CN</AvatarFallback>
+						<AvatarFallback className="rounded-lg">
+							{getFallbackAvatarInitials(data?.user?.name)}
+						</AvatarFallback>
 					</Avatar>
 					<div className="grid flex-1 text-left text-sm leading-tight">
 						<span className="truncate font-semibold">Account</span>
@@ -122,18 +125,16 @@ export const UserNav = () => {
 							)}
 						</>
 					) : (
-						<>
-							{data?.role === "owner" && (
-								<DropdownMenuItem
-									className="cursor-pointer"
-									onClick={() => {
-										router.push("/dashboard/settings/servers");
-									}}
-								>
-									Servers
-								</DropdownMenuItem>
-							)}
-						</>
+						data?.role === "owner" && (
+							<DropdownMenuItem
+								className="cursor-pointer"
+								onClick={() => {
+									router.push("/dashboard/settings/servers");
+								}}
+							>
+								Servers
+							</DropdownMenuItem>
+						)
 					)}
 				</DropdownMenuGroup>
 				{isCloud && data?.role === "owner" && (

apps/dokploy/components/shared/ChatwootWidget.tsx

@@ -10,7 +10,7 @@ interface ChatwootWidgetProps {
 		launcherTitle?: string;
 		darkMode?: boolean;
 		hideMessageBubble?: boolean;
-		placement?: "right" | "left";
+		placement?: "left" | "right";
 		showPopoutButton?: boolean;
 		widgetStyle?: "standard" | "bubble";
 	};
@@ -41,7 +41,7 @@ export const ChatwootWidget = ({
 			position: "right",
 		};
 
-		(window as any).chatwootSDKReady = () => {
+		window.chatwootSDKReady = () => {
 			window.chatwootSDK?.run({ websiteToken, baseUrl });
 
 			const trySetUser = () => {
@@ -63,7 +63,7 @@ export const ChatwootWidget = ({
 		<Script
 			src={`${baseUrl}/packs/js/sdk.js`}
 			strategy="lazyOnload"
-			onLoad={() => (window as any).chatwootSDKReady?.()}
+			onLoad={() => window.chatwootSDKReady?.()}
 		/>
 	);
 };

apps/dokploy/components/shared/alert-block.tsx

@@ -1,11 +1,11 @@
+import { AlertCircle, AlertTriangle, CheckCircle2, Info } from "lucide-react";
+import { cn } from "@/lib/utils";
+
 interface Props extends React.ComponentPropsWithoutRef<"div"> {
 	icon?: React.ReactNode;
 	type?: "info" | "success" | "warning" | "error";
 }
 
-import { cn } from "@/lib/utils";
-import { AlertCircle, AlertTriangle, CheckCircle2, Info } from "lucide-react";
-
 const iconMap = {
 	info: {
 		className: "bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400",

apps/dokploy/components/shared/breadcrumb-sidebar.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+import { Fragment } from "react";
 import {
 	Breadcrumb,
 	BreadcrumbItem,
@@ -7,8 +9,6 @@ import {
 } from "@/components/ui/breadcrumb";
 import { Separator } from "@/components/ui/separator";
 import { SidebarTrigger } from "@/components/ui/sidebar";
-import Link from "next/link";
-import { Fragment } from "react";
 
 interface Props {
 	list: {
@@ -26,7 +26,7 @@ export const BreadcrumbSidebar = ({ list }: Props) => {
 					<Separator orientation="vertical" className="mr-2 h-4" />
 					<Breadcrumb>
 						<BreadcrumbList>
-							{list.map((item, _index) => (
+							{list.map((item, index) => (
 								<Fragment key={item.name}>
 									<BreadcrumbItem className="block">
 										<BreadcrumbLink href={item.href} asChild={!!item.href}>
@@ -37,7 +37,7 @@ export const BreadcrumbSidebar = ({ list }: Props) => {
 											)}
 										</BreadcrumbLink>
 									</BreadcrumbItem>
-									{_index + 1 < list.length && (
+									{index + 1 < list.length && (
 										<BreadcrumbSeparator className="block" />
 									)}
 								</Fragment>

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

@@ -1,20 +1,19 @@
-import { cn } from "@/lib/utils";
-import { json } from "@codemirror/lang-json";
-import { yaml } from "@codemirror/lang-yaml";
-import { StreamLanguage } from "@codemirror/language";
-
 import {
+	autocompletion,
 	type Completion,
 	type CompletionContext,
 	type CompletionResult,
-	autocompletion,
 } from "@codemirror/autocomplete";
+import { json } from "@codemirror/lang-json";
+import { yaml } from "@codemirror/lang-yaml";
+import { StreamLanguage } from "@codemirror/language";
 import { properties } from "@codemirror/legacy-modes/mode/properties";
 import { shell } from "@codemirror/legacy-modes/mode/shell";
 import { EditorView } from "@codemirror/view";
 import { githubDark, githubLight } from "@uiw/codemirror-theme-github";
 import CodeMirror, { type ReactCodeMirrorProps } from "@uiw/react-codemirror";
 import { useTheme } from "next-themes";
+import { cn } from "@/lib/utils";
 
 // Docker Compose completion options
 const dockerComposeServices = [
@@ -101,9 +100,7 @@ function dockerComposeComplete(
 	context: CompletionContext,
 ): CompletionResult | null {
 	const word = context.matchBefore(/\w*/);
-	if (!word) return null;
-
-	if (!word.text && !context.explicit) return null;
+	if (!word || (!word.text && !context.explicit)) return null;
 
 	// Check if we're at the root level
 	const line = context.state.doc.lineAt(context.pos);

apps/dokploy/components/shared/date-tooltip.tsx

@@ -1,3 +1,4 @@
+import { format, formatDistanceToNow } from "date-fns";
 import {
 	Tooltip,
 	TooltipContent,
@@ -5,7 +6,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-import { format, formatDistanceToNow } from "date-fns";
 
 interface Props {
 	date: string;

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

@@ -1,3 +1,5 @@
+import { Loader2 } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
 import {
 	Sheet,
 	SheetContent,
@@ -5,8 +7,6 @@ import {
 	SheetHeader,
 	SheetTitle,
 } from "@/components/ui/sheet";
-import { Loader2 } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
 import { TerminalLine } from "../dashboard/docker/logs/terminal-line";
 import type { LogLine } from "../dashboard/docker/logs/utils";
 
@@ -43,11 +43,11 @@ export const DrawerLogs = ({ isOpen, onClose, filteredLogs }: Props) => {
 	return (
 		<Sheet
 			open={!!isOpen}
-			onOpenChange={(_open) => {
+			onOpenChange={() => {
 				onClose();
 			}}
 		>
-			<SheetContent className="sm:max-w-[740px]  flex flex-col">
+			<SheetContent className="sm:max-w-[740px] flex flex-col">
 				<SheetHeader>
 					<SheetTitle>Deployment Logs</SheetTitle>
 					<SheetDescription>Details of the request log entry.</SheetDescription>

apps/dokploy/components/shared/toggle-visibility-input.tsx

@@ -13,10 +13,13 @@ export const ToggleVisibilityInput = ({ ...props }: InputProps) => {
 		setIsPasswordVisible((prevVisibility) => !prevVisibility);
 	};
 
-	const inputType = isPasswordVisible ? "text" : "password";
 	return (
 		<div className="flex w-full items-center space-x-2">
-			<Input ref={inputRef} type={inputType} {...props} />
+			<Input
+				ref={inputRef}
+				type={isPasswordVisible ? "text" : "password"}
+				{...props}
+			/>
 			<Button
 				variant={"secondary"}
 				onClick={() => {
@@ -27,10 +30,10 @@ export const ToggleVisibilityInput = ({ ...props }: InputProps) => {
 				<Clipboard className="size-4 text-muted-foreground" />
 			</Button>
 			<Button onClick={togglePasswordVisibility} variant={"secondary"}>
-				{inputType === "password" ? (
-					<EyeIcon className="size-4 text-muted-foreground" />
-				) : (
+				{isPasswordVisible ? (
 					<EyeOffIcon className="size-4 text-muted-foreground" />
+				) : (
+					<EyeIcon className="size-4 text-muted-foreground" />
 				)}
 			</Button>
 		</div>

apps/dokploy/drizzle/0104_omniscient_randall.sql

@@ -0,0 +1 @@
+ALTER TABLE "application" ADD COLUMN "railpackVersion" text DEFAULT '0.2.2';

apps/dokploy/drizzle/0105_clumsy_quicksilver.sql

@@ -0,0 +1,45 @@
+ALTER TABLE "postgres" ADD COLUMN "healthCheckSwarm" json;--> statement-breakpoint
+ALTER TABLE "postgres" ADD COLUMN "restartPolicySwarm" json;--> statement-breakpoint
+ALTER TABLE "postgres" ADD COLUMN "placementSwarm" json;--> statement-breakpoint
+ALTER TABLE "postgres" ADD COLUMN "updateConfigSwarm" json;--> statement-breakpoint
+ALTER TABLE "postgres" ADD COLUMN "rollbackConfigSwarm" json;--> statement-breakpoint
+ALTER TABLE "postgres" ADD COLUMN "modeSwarm" json;--> statement-breakpoint
+ALTER TABLE "postgres" ADD COLUMN "labelsSwarm" json;--> statement-breakpoint
+ALTER TABLE "postgres" ADD COLUMN "networkSwarm" json;--> statement-breakpoint
+ALTER TABLE "postgres" ADD COLUMN "replicas" integer DEFAULT 1 NOT NULL;--> statement-breakpoint
+ALTER TABLE "mariadb" ADD COLUMN "healthCheckSwarm" json;--> statement-breakpoint
+ALTER TABLE "mariadb" ADD COLUMN "restartPolicySwarm" json;--> statement-breakpoint
+ALTER TABLE "mariadb" ADD COLUMN "placementSwarm" json;--> statement-breakpoint
+ALTER TABLE "mariadb" ADD COLUMN "updateConfigSwarm" json;--> statement-breakpoint
+ALTER TABLE "mariadb" ADD COLUMN "rollbackConfigSwarm" json;--> statement-breakpoint
+ALTER TABLE "mariadb" ADD COLUMN "modeSwarm" json;--> statement-breakpoint
+ALTER TABLE "mariadb" ADD COLUMN "labelsSwarm" json;--> statement-breakpoint
+ALTER TABLE "mariadb" ADD COLUMN "networkSwarm" json;--> statement-breakpoint
+ALTER TABLE "mariadb" ADD COLUMN "replicas" integer DEFAULT 1 NOT NULL;--> statement-breakpoint
+ALTER TABLE "mongo" ADD COLUMN "healthCheckSwarm" json;--> statement-breakpoint
+ALTER TABLE "mongo" ADD COLUMN "restartPolicySwarm" json;--> statement-breakpoint
+ALTER TABLE "mongo" ADD COLUMN "placementSwarm" json;--> statement-breakpoint
+ALTER TABLE "mongo" ADD COLUMN "updateConfigSwarm" json;--> statement-breakpoint
+ALTER TABLE "mongo" ADD COLUMN "rollbackConfigSwarm" json;--> statement-breakpoint
+ALTER TABLE "mongo" ADD COLUMN "modeSwarm" json;--> statement-breakpoint
+ALTER TABLE "mongo" ADD COLUMN "labelsSwarm" json;--> statement-breakpoint
+ALTER TABLE "mongo" ADD COLUMN "networkSwarm" json;--> statement-breakpoint
+ALTER TABLE "mongo" ADD COLUMN "replicas" integer DEFAULT 1 NOT NULL;--> statement-breakpoint
+ALTER TABLE "mysql" ADD COLUMN "healthCheckSwarm" json;--> statement-breakpoint
+ALTER TABLE "mysql" ADD COLUMN "restartPolicySwarm" json;--> statement-breakpoint
+ALTER TABLE "mysql" ADD COLUMN "placementSwarm" json;--> statement-breakpoint
+ALTER TABLE "mysql" ADD COLUMN "updateConfigSwarm" json;--> statement-breakpoint
+ALTER TABLE "mysql" ADD COLUMN "rollbackConfigSwarm" json;--> statement-breakpoint
+ALTER TABLE "mysql" ADD COLUMN "modeSwarm" json;--> statement-breakpoint
+ALTER TABLE "mysql" ADD COLUMN "labelsSwarm" json;--> statement-breakpoint
+ALTER TABLE "mysql" ADD COLUMN "networkSwarm" json;--> statement-breakpoint
+ALTER TABLE "mysql" ADD COLUMN "replicas" integer DEFAULT 1 NOT NULL;--> statement-breakpoint
+ALTER TABLE "redis" ADD COLUMN "healthCheckSwarm" json;--> statement-breakpoint
+ALTER TABLE "redis" ADD COLUMN "restartPolicySwarm" json;--> statement-breakpoint
+ALTER TABLE "redis" ADD COLUMN "placementSwarm" json;--> statement-breakpoint
+ALTER TABLE "redis" ADD COLUMN "updateConfigSwarm" json;--> statement-breakpoint
+ALTER TABLE "redis" ADD COLUMN "rollbackConfigSwarm" json;--> statement-breakpoint
+ALTER TABLE "redis" ADD COLUMN "modeSwarm" json;--> statement-breakpoint
+ALTER TABLE "redis" ADD COLUMN "labelsSwarm" json;--> statement-breakpoint
+ALTER TABLE "redis" ADD COLUMN "networkSwarm" json;--> statement-breakpoint
+ALTER TABLE "redis" ADD COLUMN "replicas" integer DEFAULT 1 NOT NULL;

apps/dokploy/drizzle/meta/0104_snapshot.json

@@ -1,5 +1,5 @@
 {
-  "id": "55b7955d-30af-4d68-b9df-6e39cc6a5137",
+  "id": "84fb0854-3c32-4cbb-bd47-f4b9a448db29",
   "prevId": "8bf085dd-e054-4ae6-811b-1d1a68dab752",
   "version": "7",
   "dialect": "postgresql",
@@ -56,12 +56,6 @@
           "primaryKey": false,
           "notNull": false
         },
-        "previewLabels": {
-          "name": "previewLabels",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
         "previewWildcard": {
           "name": "previewWildcard",
           "type": "text",
@@ -482,6 +476,13 @@
           "notNull": true,
           "default": "'nixpacks'"
         },
+        "railpackVersion": {
+          "name": "railpackVersion",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "'0.2.2'"
+        },
         "herokuVersion": {
           "name": "herokuVersion",
           "type": "text",

apps/dokploy/drizzle/meta/_journal.json

@@ -733,8 +733,15 @@
     {
       "idx": 104,
       "version": "7",
-      "when": 1753376537774,
-      "tag": "0104_yummy_silver_fox",
+      "when": 1754207407121,
+      "tag": "0104_omniscient_randall",
+      "breakpoints": true
+    },
+    {
+      "idx": 105,
+      "version": "7",
+      "when": 1754259281559,
+      "tag": "0105_clumsy_quicksilver",
       "breakpoints": true
     }
   ]

apps/dokploy/hooks/use-keyboard-nav.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
+
+const SHORTCUTS = {
+	g: "general",
+	e: "environment",
+	u: "domains",
+	p: "preview-deployments",
+	s: "schedules",
+	v: "volume-backups",
+	d: "deployments",
+	l: "logs",
+	m: "monitoring",
+	a: "advanced",
+};
+
+/**
+ * Use this to register keyboard shortcuts for the application page. Each
+ * shortcut must be prefixed with `g` (like GitHub).
+ *
+ * - `g g` "General",
+ * - `g e` "Environment",
+ * - `g u` "Domains",
+ * - `g p` "Preview Deployments",
+ * - `g s` "Schedules",
+ * - `g v` "Volume Backups",
+ * - `g d` "Deployments",
+ * - `g l` "Logs",
+ * - `g m` "Monitoring",
+ * - `g a` "Advanced"
+ */
+export function UseKeyboardNavForApplications() {
+	const [isModPressed, setModPressed] = useState(false);
+	const [timer, setTimer] = useState<NodeJS.Timeout | null>(null);
+
+	const sp = useSearchParams();
+	const router = useRouter();
+	const pathname = usePathname();
+
+	const updateSearchParam = useCallback(
+		(name: string, value: string) => {
+			const params = new URLSearchParams(sp.toString());
+			params.set(name, value);
+
+			return params.toString();
+		},
+		[sp],
+	);
+
+	useEffect(() => {
+		const handleKeyDown = ({ key }: KeyboardEvent) => {
+			if (isModPressed) {
+				if (timer) clearTimeout(timer);
+				setModPressed(false);
+
+				if (key in SHORTCUTS) {
+					const tab = SHORTCUTS[key as keyof typeof SHORTCUTS];
+					router.push(
+						`${pathname}?${updateSearchParam("tab", tab.toLowerCase())}`,
+					);
+				}
+			} else {
+				if (key === "g") {
+					setModPressed(true);
+					setTimer(setTimeout(() => setModPressed(false), 5000));
+				}
+			}
+		};
+
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [isModPressed, timer, updateSearchParam, router, pathname]);
+
+	return null;
+}

apps/dokploy/lib/utils.ts

@@ -27,3 +27,14 @@ export function formatTimestamp(timestamp: string | number) {
 		return "Fecha inválida";
 	}
 }
+
+export function getFallbackAvatarInitials(
+	fullName: string | undefined,
+): string {
+	if (typeof fullName === "undefined" || fullName === "") return "CN";
+	const [name = "", surname = ""] = fullName.split(" ");
+	if (surname === "") {
+		return name.substring(0, 2).toUpperCase();
+	}
+	return (name.charAt(0) + surname.charAt(0)).toUpperCase();
+}

apps/dokploy/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "dokploy",
-	"version": "v0.24.5",
+	"version": "v0.24.10",
 	"private": true,
 	"license": "Apache-2.0",
 	"type": "module",

apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx

@@ -1,3 +1,17 @@
+import { validateRequest } from "@dokploy/server/lib/auth";
+import { createServerSideHelpers } from "@trpc/react-query/server";
+import copy from "copy-to-clipboard";
+import { GlobeIcon, HelpCircle, ServerOff } from "lucide-react";
+import type {
+	GetServerSidePropsContext,
+	InferGetServerSidePropsType,
+} from "next";
+import Head from "next/head";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { type ReactElement, useEffect, useState } from "react";
+import { toast } from "sonner";
+import superjson from "superjson";
 import { ShowClusterSettings } from "@/components/dashboard/application/advanced/cluster/show-cluster-settings";
 import { AddCommand } from "@/components/dashboard/application/advanced/general/add-command";
 import { ShowPorts } from "@/components/dashboard/application/advanced/ports/show-port";
@@ -37,22 +51,9 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { UseKeyboardNavForApplications } from "@/hooks/use-keyboard-nav";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
-import { validateRequest } from "@dokploy/server/lib/auth";
-import { createServerSideHelpers } from "@trpc/react-query/server";
-import copy from "copy-to-clipboard";
-import { GlobeIcon, HelpCircle, ServerOff } from "lucide-react";
-import type {
-	GetServerSidePropsContext,
-	InferGetServerSidePropsType,
-} from "next";
-import Head from "next/head";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { type ReactElement, useEffect, useState } from "react";
-import { toast } from "sonner";
-import superjson from "superjson";
 
 type TabState =
 	| "projects"
@@ -91,6 +92,7 @@ const Service = (
 
 	return (
 		<div className="pb-10">
+			<UseKeyboardNavForApplications />
 			<BreadcrumbSidebar
 				list={[
 					{ name: "Projects", href: "/dashboard/projects" },
@@ -345,7 +347,10 @@ const Service = (
 									<TabsContent value="advanced">
 										<div className="flex flex-col gap-4 pt-2.5">
 											<AddCommand applicationId={applicationId} />
-											<ShowClusterSettings applicationId={applicationId} />
+											<ShowClusterSettings
+												id={applicationId}
+												type="application"
+											/>
 
 											<ShowResources id={applicationId} type="application" />
 											<ShowVolumes id={applicationId} type="application" />

apps/dokploy/pages/dashboard/project/[projectId]/services/compose/[composeId].tsx

@@ -1,3 +1,17 @@
+import { validateRequest } from "@dokploy/server/lib/auth";
+import { createServerSideHelpers } from "@trpc/react-query/server";
+import copy from "copy-to-clipboard";
+import { CircuitBoard, HelpCircle, ServerOff } from "lucide-react";
+import type {
+	GetServerSidePropsContext,
+	InferGetServerSidePropsType,
+} from "next";
+import Head from "next/head";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { type ReactElement, useEffect, useState } from "react";
+import { toast } from "sonner";
+import superjson from "superjson";
 import { ShowImport } from "@/components/dashboard/application/advanced/import/show-import";
 import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
 import { ShowDeployments } from "@/components/dashboard/application/deployments/show-deployments";
@@ -6,6 +20,7 @@ import { ShowEnvironment } from "@/components/dashboard/application/environment/
 import { ShowSchedules } from "@/components/dashboard/application/schedules/show-schedules";
 import { ShowVolumeBackups } from "@/components/dashboard/application/volume-backups/show-volume-backups";
 import { AddCommandCompose } from "@/components/dashboard/compose/advanced/add-command";
+import { IsolatedDeploymentTab } from "@/components/dashboard/compose/advanced/add-isolation";
 import { DeleteService } from "@/components/dashboard/compose/delete-service";
 import { ShowGeneralCompose } from "@/components/dashboard/compose/general/show";
 import { ShowDockerLogsCompose } from "@/components/dashboard/compose/logs/show";
@@ -35,21 +50,6 @@ import {
 } from "@/components/ui/tooltip";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
-import { validateRequest } from "@dokploy/server/lib/auth";
-import { createServerSideHelpers } from "@trpc/react-query/server";
-import copy from "copy-to-clipboard";
-import { CircuitBoard, ServerOff } from "lucide-react";
-import { HelpCircle } from "lucide-react";
-import type {
-	GetServerSidePropsContext,
-	InferGetServerSidePropsType,
-} from "next";
-import Head from "next/head";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { type ReactElement, useEffect, useState } from "react";
-import { toast } from "sonner";
-import superjson from "superjson";
 
 type TabState =
 	| "projects"
@@ -351,6 +351,7 @@ const Service = (
 											<AddCommandCompose composeId={composeId} />
 											<ShowVolumes id={composeId} type="compose" />
 											<ShowImport composeId={composeId} />
+											<IsolatedDeploymentTab composeId={composeId} />
 										</div>
 									</TabsContent>
 								</Tabs>

apps/dokploy/server/api/routers/application.ts

@@ -1,31 +1,4 @@
 import {
-	createTRPCRouter,
-	protectedProcedure,
-	uploadProcedure,
-} from "@/server/api/trpc";
-import { db } from "@/server/db";
-import {
-	apiCreateApplication,
-	apiFindMonitoringStats,
-	apiFindOneApplication,
-	apiReloadApplication,
-	apiSaveBitbucketProvider,
-	apiSaveBuildType,
-	apiSaveDockerProvider,
-	apiSaveEnvironmentVariables,
-	apiSaveGitProvider,
-	apiSaveGiteaProvider,
-	apiSaveGithubProvider,
-	apiSaveGitlabProvider,
-	apiUpdateApplication,
-	applications,
-} from "@/server/db/schema";
-import type { DeploymentJob } from "@/server/queues/queue-types";
-import { cleanQueuesByApplication, myQueue } from "@/server/queues/queueSetup";
-import { deploy } from "@/server/utils/deploy";
-import { uploadFileSchema } from "@/utils/schema";
-import {
-	IS_CLOUD,
 	addNewService,
 	checkServiceAccess,
 	createApplication,
@@ -34,6 +7,7 @@ import {
 	findGitProviderById,
 	findProjectById,
 	getApplicationStats,
+	IS_CLOUD,
 	mechanizeDockerContainer,
 	readConfig,
 	readRemoteConfig,
@@ -57,6 +31,32 @@ import { TRPCError } from "@trpc/server";
 import { eq } from "drizzle-orm";
 import { nanoid } from "nanoid";
 import { z } from "zod";
+import {
+	createTRPCRouter,
+	protectedProcedure,
+	uploadProcedure,
+} from "@/server/api/trpc";
+import { db } from "@/server/db";
+import {
+	apiCreateApplication,
+	apiFindMonitoringStats,
+	apiFindOneApplication,
+	apiReloadApplication,
+	apiSaveBitbucketProvider,
+	apiSaveBuildType,
+	apiSaveDockerProvider,
+	apiSaveEnvironmentVariables,
+	apiSaveGiteaProvider,
+	apiSaveGithubProvider,
+	apiSaveGitlabProvider,
+	apiSaveGitProvider,
+	apiUpdateApplication,
+	applications,
+} from "@/server/db/schema";
+import type { DeploymentJob } from "@/server/queues/queue-types";
+import { cleanQueuesByApplication, myQueue } from "@/server/queues/queueSetup";
+import { deploy } from "@/server/utils/deploy";
+import { uploadFileSchema } from "@/utils/schema";
 
 export const applicationRouter = createTRPCRouter({
 	create: protectedProcedure
@@ -364,6 +364,7 @@ export const applicationRouter = createTRPCRouter({
 				dockerBuildStage: input.dockerBuildStage,
 				herokuVersion: input.herokuVersion,
 				isStaticSpa: input.isStaticSpa,
+				railpackVersion: input.railpackVersion,
 			});
 
 			return true;

apps/dokploy/server/api/routers/settings.ts

@@ -1,3 +1,54 @@
+import {
+	canAccessToTraefikFiles,
+	checkGPUStatus,
+	cleanStoppedContainers,
+	cleanUpDockerBuilder,
+	cleanUpSystemPrune,
+	cleanUpUnusedImages,
+	cleanUpUnusedVolumes,
+	DEFAULT_UPDATE_DATA,
+	execAsync,
+	findServerById,
+	findUserById,
+	getDokployImage,
+	getDokployImageTag,
+	getLogCleanupStatus,
+	getUpdateData,
+	IS_CLOUD,
+	parseRawConfig,
+	paths,
+	prepareEnvironmentVariables,
+	processLogs,
+	pullLatestRelease,
+	readConfig,
+	readConfigInPath,
+	readDirectory,
+	readEnvironmentVariables,
+	readMainConfig,
+	readMonitoringConfig,
+	readPorts,
+	recreateDirectory,
+	reloadDockerResource,
+	sendDockerCleanupNotifications,
+	setupGPUSupport,
+	spawnAsync,
+	startLogCleanup,
+	stopLogCleanup,
+	updateLetsEncryptEmail,
+	updateServerById,
+	updateServerTraefik,
+	updateUser,
+	writeConfig,
+	writeMainConfig,
+	writeTraefikConfigInPath,
+	writeTraefikSetup,
+} from "@dokploy/server";
+import { generateOpenApiDocument } from "@dokploy/trpc-openapi";
+import { TRPCError } from "@trpc/server";
+import { sql } from "drizzle-orm";
+import { dump, load } from "js-yaml";
+import { scheduledJobs, scheduleJob } from "node-schedule";
+import { z } from "zod";
 import { db } from "@/server/db";
 import {
 	apiAssignDomain,
@@ -11,54 +62,6 @@ import {
 	apiUpdateDockerCleanup,
 } from "@/server/db/schema";
 import { removeJob, schedule } from "@/server/utils/backup";
-import {
-	DEFAULT_UPDATE_DATA,
-	IS_CLOUD,
-	canAccessToTraefikFiles,
-	cleanStoppedContainers,
-	cleanUpDockerBuilder,
-	cleanUpSystemPrune,
-	cleanUpUnusedImages,
-	cleanUpUnusedVolumes,
-	execAsync,
-	execAsyncRemote,
-	findServerById,
-	findUserById,
-	getDokployImage,
-	getDokployImageTag,
-	getLogCleanupStatus,
-	getUpdateData,
-	initializeTraefik,
-	parseRawConfig,
-	paths,
-	prepareEnvironmentVariables,
-	processLogs,
-	pullLatestRelease,
-	readConfig,
-	readConfigInPath,
-	readDirectory,
-	readMainConfig,
-	readMonitoringConfig,
-	recreateDirectory,
-	sendDockerCleanupNotifications,
-	spawnAsync,
-	startLogCleanup,
-	stopLogCleanup,
-	updateLetsEncryptEmail,
-	updateServerById,
-	updateServerTraefik,
-	updateUser,
-	writeConfig,
-	writeMainConfig,
-	writeTraefikConfigInPath,
-} from "@dokploy/server";
-import { checkGPUStatus, setupGPUSupport } from "@dokploy/server";
-import { generateOpenApiDocument } from "@dokploy/trpc-openapi";
-import { TRPCError } from "@trpc/server";
-import { sql } from "drizzle-orm";
-import { dump, load } from "js-yaml";
-import { scheduleJob, scheduledJobs } from "node-schedule";
-import { z } from "zod";
 import packageInfo from "../../../package.json";
 import { appRouter } from "../root";
 import {
@@ -73,10 +76,7 @@ export const settingsRouter = createTRPCRouter({
 		if (IS_CLOUD) {
 			return true;
 		}
-		const { stdout } = await execAsync(
-			"docker service inspect dokploy --format '{{.ID}}'",
-		);
-		await execAsync(`docker service update --force ${stdout.trim()}`);
+		await reloadDockerResource("dokploy");
 		return true;
 	}),
 	cleanRedis: adminProcedure.mutation(async () => {
@@ -101,20 +101,15 @@ export const settingsRouter = createTRPCRouter({
 		if (IS_CLOUD) {
 			return true;
 		}
+		await reloadDockerResource("dokploy-redis");
 
-		await execAsync("docker service scale dokploy-redis=0");
-		await execAsync("docker service scale dokploy-redis=1");
 		return true;
 	}),
 	reloadTraefik: adminProcedure
 		.input(apiServerSchema)
 		.mutation(async ({ input }) => {
 			try {
-				if (input?.serverId) {
-					await execAsync("docker restart dokploy-traefik");
-				} else if (!IS_CLOUD) {
-					await execAsync("docker restart dokploy-traefik");
-				}
+				await reloadDockerResource("dokploy-traefik", input?.serverId);
 			} catch (err) {
 				console.error(err);
 			}
@@ -124,17 +119,28 @@ export const settingsRouter = createTRPCRouter({
 	toggleDashboard: adminProcedure
 		.input(apiEnableDashboard)
 		.mutation(async ({ input }) => {
-			const ports = (await getTraefikPorts(input.serverId)).filter(
-				(port) =>
-					port.targetPort !== 80 &&
-					port.targetPort !== 443 &&
-					port.targetPort !== 8080,
+			const ports = await readPorts("dokploy-traefik", input.serverId);
+			const env = await readEnvironmentVariables(
+				"dokploy-traefik",
+				input.serverId,
 			);
-			await initializeTraefik({
-				additionalPorts: ports,
-				enableDashboard: input.enableDashboard,
+			const preparedEnv = prepareEnvironmentVariables(env);
+			let newPorts = ports;
+			// If receive true, add 8080 to ports
+			if (input.enableDashboard) {
+				newPorts.push({
+					targetPort: 8080,
+					publishedPort: 8080,
+					protocol: "tcp",
+				});
+			} else {
+				newPorts = ports.filter((port) => port.targetPort !== 8080);
+			}
+
+			await writeTraefikSetup({
+				env: preparedEnv,
+				additionalPorts: newPorts,
 				serverId: input.serverId,
-				force: true,
 			});
 			return true;
 		}),
@@ -551,29 +557,23 @@ export const settingsRouter = createTRPCRouter({
 	readTraefikEnv: adminProcedure
 		.input(apiServerSchema)
 		.query(async ({ input }) => {
-			const command =
-				"docker container inspect dokploy-traefik --format '{{json .Config.Env}}'";
-
-			let result = "";
-			if (input?.serverId) {
-				const execResult = await execAsyncRemote(input.serverId, command);
-				result = execResult.stdout;
-			} else {
-				const execResult = await execAsync(command);
-				result = execResult.stdout;
-			}
-			const envVars = JSON.parse(result.trim());
-			return envVars.join("\n");
+			const envVars = await readEnvironmentVariables(
+				"dokploy-traefik",
+				input?.serverId,
+			);
+			return envVars;
 		}),
 
 	writeTraefikEnv: adminProcedure
 		.input(z.object({ env: z.string(), serverId: z.string().optional() }))
 		.mutation(async ({ input }) => {
 			const envs = prepareEnvironmentVariables(input.env);
-			await initializeTraefik({
+			const ports = await readPorts("dokploy-traefik", input?.serverId);
+
+			await writeTraefikSetup({
 				env: envs,
+				additionalPorts: ports,
 				serverId: input.serverId,
-				force: true,
 			});
 
 			return true;
@@ -581,22 +581,8 @@ export const settingsRouter = createTRPCRouter({
 	haveTraefikDashboardPortEnabled: adminProcedure
 		.input(apiServerSchema)
 		.query(async ({ input }) => {
-			const command = `docker container inspect --format='{{json .NetworkSettings.Ports}}' dokploy-traefik`;
-
-			let stdout = "";
-			if (input?.serverId) {
-				const result = await execAsyncRemote(input.serverId, command);
-				stdout = result.stdout;
-			} else if (!IS_CLOUD) {
-				const result = await execAsync(command);
-				stdout = result.stdout;
-			}
-
-			const ports = JSON.parse(stdout.trim());
-			return Object.entries(ports).some(([containerPort, bindings]) => {
-				const [port] = containerPort.split("/");
-				return port === "8080" && bindings && (bindings as any[]).length > 0;
-			});
+			const ports = await readPorts("dokploy-traefik", input?.serverId);
+			return ports.some((port) => port.targetPort === 8080);
 		}),
 
 	readStatsLogs: adminProcedure
@@ -793,6 +779,7 @@ export const settingsRouter = createTRPCRouter({
 					z.object({
 						targetPort: z.number(),
 						publishedPort: z.number(),
+						protocol: z.enum(["tcp", "udp", "sctp"]),
 					}),
 				),
 			}),
@@ -805,10 +792,16 @@ export const settingsRouter = createTRPCRouter({
 						message: "Please set a serverId to update Traefik ports",
 					});
 				}
-				await initializeTraefik({
-					serverId: input.serverId,
+				const env = await readEnvironmentVariables(
+					"dokploy-traefik",
+					input?.serverId,
+				);
+				const preparedEnv = prepareEnvironmentVariables(env);
+
+				await writeTraefikSetup({
+					env: preparedEnv,
 					additionalPorts: input.additionalPorts,
-					force: true,
+					serverId: input.serverId,
 				});
 				return true;
 			} catch (error) {
@@ -825,7 +818,8 @@ export const settingsRouter = createTRPCRouter({
 	getTraefikPorts: adminProcedure
 		.input(apiServerSchema)
 		.query(async ({ input }) => {
-			return await getTraefikPorts(input?.serverId);
+			const ports = await readPorts("dokploy-traefik", input?.serverId);
+			return ports;
 		}),
 	updateLogCleanup: adminProcedure
 		.input(
@@ -855,56 +849,3 @@ export const settingsRouter = createTRPCRouter({
 		return ips;
 	}),
 });
-
-export const getTraefikPorts = async (serverId?: string) => {
-	const command = `docker container inspect --format='{{json .NetworkSettings.Ports}}' dokploy-traefik`;
-	try {
-		let stdout = "";
-		if (serverId) {
-			const result = await execAsyncRemote(serverId, command);
-			stdout = result.stdout;
-		} else if (!IS_CLOUD) {
-			const result = await execAsync(command);
-			stdout = result.stdout;
-		}
-
-		const portsMap = JSON.parse(stdout.trim());
-		const additionalPorts: Array<{
-			targetPort: number;
-			publishedPort: number;
-		}> = [];
-
-		// Convert the Docker container port format to our expected format
-		for (const [containerPort, bindings] of Object.entries(portsMap)) {
-			if (!bindings) continue;
-
-			const [port = ""] = containerPort.split("/");
-			if (!port) continue;
-
-			const targetPortNum = Number.parseInt(port, 10);
-			if (Number.isNaN(targetPortNum)) continue;
-
-			// Skip default ports
-			if ([80, 443].includes(targetPortNum)) continue;
-
-			for (const binding of bindings as Array<{ HostPort: string }>) {
-				if (!binding.HostPort) continue;
-				const publishedPort = Number.parseInt(binding.HostPort, 10);
-				if (Number.isNaN(publishedPort)) continue;
-
-				additionalPorts.push({
-					targetPort: targetPortNum,
-					publishedPort,
-				});
-			}
-		}
-
-		return additionalPorts;
-	} catch (error) {
-		throw new TRPCError({
-			code: "INTERNAL_SERVER_ERROR",
-			message: "Failed to get Traefik ports",
-			cause: error,
-		});
-	}
-};

apps/dokploy/server/api/routers/swarm.ts

@@ -53,14 +53,21 @@ export const swarmRouter = createTRPCRouter({
 			return getNodeApplications(input.serverId);
 		}),
 	getAppInfos: protectedProcedure
+		.meta({
+			openapi: {
+				path: "/drop-deployment",
+				method: "POST",
+				override: true,
+				enabled: false,
+			},
+		})
 		.input(
 			z.object({
 				appName: z
 					.string()
 					.min(1)
 					.regex(containerIdRegex, "Invalid app name.")
-					.array()
-					.min(1),
+					.array(),
 				serverId: z.string().optional(),
 			}),
 		)

apps/dokploy/server/wss/docker-container-terminal.ts

@@ -55,7 +55,7 @@ export const setupDockerContainerTerminalWebSocketServer = (
 				conn
 					.once("ready", () => {
 						conn.exec(
-							`docker exec -it ${containerId} ${activeWay}`,
+							`docker exec -it -w / ${containerId} ${activeWay}`,
 							{ pty: true },
 							(err, stream) => {
 								if (err) throw err;
@@ -107,7 +107,7 @@ export const setupDockerContainerTerminalWebSocketServer = (
 				const shell = getShell();
 				const ptyProcess = spawn(
 					shell,
-					["-c", `docker exec -it ${containerId} ${activeWay}`],
+					["-c", `docker exec -it -w / ${containerId} ${activeWay}`],
 					{},
 				);
 

apps/dokploy/setup.ts

@@ -1,10 +1,3 @@
-import {
-	createDefaultMiddlewares,
-	createDefaultServerTraefikConfig,
-	createDefaultTraefikConfig,
-	initializeTraefik,
-} from "@dokploy/server/setup/traefik-setup";
-
 import { execAsync } from "@dokploy/server";
 import { setupDirectories } from "@dokploy/server/setup/config-paths";
 import { initializePostgres } from "@dokploy/server/setup/postgres-setup";
@@ -13,6 +6,13 @@ import {
 	initializeNetwork,
 	initializeSwarm,
 } from "@dokploy/server/setup/setup";
+import {
+	createDefaultMiddlewares,
+	createDefaultServerTraefikConfig,
+	createDefaultTraefikConfig,
+	initializeStandaloneTraefik,
+} from "@dokploy/server/setup/traefik-setup";
+
 (async () => {
 	try {
 		setupDirectories();
@@ -22,7 +22,7 @@ import {
 		createDefaultTraefikConfig();
 		createDefaultServerTraefikConfig();
 		await execAsync("docker pull traefik:v3.1.2");
-		await initializeTraefik();
+		await initializeStandaloneTraefik();
 		await initializeRedis();
 		await initializePostgres();
 	} catch (e) {