Merge pull request #2525 from divaltor/bitbucket-api-token

feat(bitbucket): Deprecate App password and replace it with API token

.github/pull_request_template.md

@@ -6,16 +6,13 @@ Please describe in a short paragraph what this PR is about.
 
 Before submitting this PR, please make sure that:
 
-- [ ] You created a dedicated branch based on the `canary` branch.
-- [ ] You have read the suggestions in the CONTRIBUTING.md file https://github.com/Dokploy/dokploy/blob/canary/CONTRIBUTING.md#pull-request
-- [ ] You have tested this PR in your local instance.
+- [] You created a dedicated branch based on the `canary` branch.
+- [] You have read the suggestions in the CONTRIBUTING.md file https://github.com/Dokploy/dokploy/blob/canary/CONTRIBUTING.md#pull-request
+- [] You have tested this PR in your local instance.
 
 ## Issues related (if applicable)
 
-Close automatically the related issues using the keywords: `closes #ISSUE_NUMBER`, `fixes #ISSUE_NUMBER`, `resolves #ISSUE_NUMBER`
-
-Example: `closes #123`
+closes #123
 
 ## Screenshots (if applicable)
 
-If you include a video or screenshot, would be awesome so we can see the changes in action.

.github/workflows/dokploy.yml

@@ -2,7 +2,7 @@ name: Dokploy Docker Build
 
 on:
   push:
-    branches: [main, canary]
+    branches: [main, canary, "fix/re-apply-database-migration-fix"]
   workflow_dispatch:
 
 env:

.github/workflows/pull-request.yml

@@ -4,9 +4,15 @@ on:
   pull_request:
     branches: [main, canary]
 
+permissions:
+  contents: read
+
 jobs:
-  lint-and-typecheck:
+  pr-check:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        job: [build, test, typecheck]
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
@@ -15,32 +21,5 @@ jobs:
           node-version: 20.16.0
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
-      - run: pnpm run server:build
-      - run: pnpm typecheck
-
-  build-and-test:
-    needs: lint-and-typecheck
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20.16.0
-          cache: "pnpm"
-      - run: pnpm install --frozen-lockfile
-      - run: pnpm run server:build
-      - run: pnpm build
-
-  parallel-tests:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20.16.0
-          cache: "pnpm"
-      - run: pnpm install --frozen-lockfile
-      - run: pnpm run server:build
-      - run: pnpm test
+      - run: pnpm server:build
+      - run: pnpm ${{ matrix.job }}

README.md

@@ -11,8 +11,25 @@
 </div>
 <br />
 
+
+
+<div align="center" markdown="1">
+   <sup>Special thanks to:</sup>
+   <br>
+   <br>
+   <a href="https://tuple.app/dokploy">
+     <img src=".github/sponsors/tuple.png" alt="Tuple's sponsorship image" width="400"/>
+   </a>
+
+### [Tuple, the premier screen sharing app for developers](https://tuple.app/dokploy)
+[Available for MacOS & Windows](https://tuple.app/dokploy)<br>
+
+</div>
+
+
 Dokploy is a free, self-hostable Platform as a Service (PaaS) that simplifies the deployment and management of applications and databases.
 
+
 ## ✨ Features
 
 Dokploy includes multiple features to make your life easier.

apps/api/package.json

@@ -9,6 +9,7 @@
 		"typecheck": "tsc --noEmit"
 	},
 	"dependencies": {
+		"inngest": "3.40.1",
 		"@dokploy/server": "workspace:*",
 		"@hono/node-server": "^1.14.3",
 		"@hono/zod-validator": "0.3.0",

apps/api/src/index.ts

@@ -2,21 +2,90 @@ import { serve } from "@hono/node-server";
 import { Hono } from "hono";
 import "dotenv/config";
 import { zValidator } from "@hono/zod-validator";
-import { Queue } from "@nerimity/mimiqueue";
-import { createClient } from "redis";
+import { Inngest } from "inngest";
+import { serve as serveInngest } from "inngest/hono";
 import { logger } from "./logger.js";
-import { type DeployJob, deployJobSchema } from "./schema.js";
+import {
+	cancelDeploymentSchema,
+	type DeployJob,
+	deployJobSchema,
+} from "./schema.js";
 import { deploy } from "./utils.js";
 
 const app = new Hono();
-const redisClient = createClient({
-	url: process.env.REDIS_URL,
+
+// Initialize Inngest client
+export const inngest = new Inngest({
+	id: "dokploy-deployments",
+	name: "Dokploy Deployment Service",
 });
 
+export const deploymentFunction = inngest.createFunction(
+	{
+		id: "deploy-application",
+		name: "Deploy Application",
+		concurrency: [
+			{
+				key: "event.data.serverId",
+				limit: 1,
+			},
+		],
+		retries: 0,
+		cancelOn: [
+			{
+				event: "deployment/cancelled",
+				if: "async.data.applicationId == event.data.applicationId || async.data.composeId == event.data.composeId",
+				timeout: "1h", // Allow cancellation for up to 1 hour
+			},
+		],
+	},
+	{ event: "deployment/requested" },
+
+	async ({ event, step }) => {
+		const jobData = event.data as DeployJob;
+
+		return await step.run("execute-deployment", async () => {
+			logger.info("Deploying started");
+
+			try {
+				const result = await deploy(jobData);
+				logger.info("Deployment finished", result);
+
+				// Send success event
+				await inngest.send({
+					name: "deployment/completed",
+					data: {
+						...jobData,
+						result,
+						status: "success",
+					},
+				});
+
+				return result;
+			} catch (error) {
+				logger.error("Deployment failed", { jobData, error });
+
+				// Send failure event
+				await inngest.send({
+					name: "deployment/failed",
+					data: {
+						...jobData,
+						error: error instanceof Error ? error.message : String(error),
+						status: "failed",
+					},
+				});
+
+				throw error;
+			}
+		});
+	},
+);
+
 app.use(async (c, next) => {
-	if (c.req.path === "/health") {
+	if (c.req.path === "/health" || c.req.path === "/api/inngest") {
 		return next();
 	}
+
 	const authHeader = c.req.header("X-API-Key");
 
 	if (process.env.API_KEY !== authHeader) {
@@ -26,36 +95,97 @@ app.use(async (c, next) => {
 	return next();
 });
 
-app.post("/deploy", zValidator("json", deployJobSchema), (c) => {
+app.post("/deploy", zValidator("json", deployJobSchema), async (c) => {
 	const data = c.req.valid("json");
-	queue.add(data, { groupName: data.serverId });
-	return c.json(
-		{
-			message: "Deployment Added",
-		},
-		200,
-	);
+	logger.info("Received deployment request", data);
+
+	try {
+		// Send event to Inngest instead of adding to Redis queue
+		await inngest.send({
+			name: "deployment/requested",
+			data,
+		});
+
+		logger.info("Deployment event sent to Inngest", {
+			serverId: data.serverId,
+		});
+
+		return c.json(
+			{
+				message: "Deployment Added to Inngest Queue",
+				serverId: data.serverId,
+			},
+			200,
+		);
+	} catch (error) {
+		console.log("error", error);
+		logger.error("Failed to send deployment event", error);
+		return c.json(
+			{
+				message: "Failed to queue deployment",
+				error: error instanceof Error ? error.message : String(error),
+			},
+			500,
+		);
+	}
 });
 
+app.post(
+	"/cancel-deployment",
+	zValidator("json", cancelDeploymentSchema),
+	async (c) => {
+		const data = c.req.valid("json");
+		logger.info("Received cancel deployment request", data);
+
+		try {
+			// Send cancellation event to Inngest
+
+			await inngest.send({
+				name: "deployment/cancelled",
+				data,
+			});
+
+			const identifier =
+				data.applicationType === "application"
+					? `applicationId: ${data.applicationId}`
+					: `composeId: ${data.composeId}`;
+
+			logger.info("Deployment cancellation event sent", {
+				...data,
+				identifier,
+			});
+
+			return c.json({
+				message: "Deployment cancellation requested",
+				applicationType: data.applicationType,
+			});
+		} catch (error) {
+			logger.error("Failed to send deployment cancellation event", error);
+			return c.json(
+				{
+					message: "Failed to cancel deployment",
+					error: error instanceof Error ? error.message : String(error),
+				},
+				500,
+			);
+		}
+	},
+);
+
 app.get("/health", async (c) => {
 	return c.json({ status: "ok" });
 });
 
-const queue = new Queue({
-	name: "deployments",
-	process: async (job: DeployJob) => {
-		logger.info("Deploying job", job);
-		return await deploy(job);
-	},
-	redisClient,
-});
-
-(async () => {
-	await redisClient.connect();
-	await redisClient.flushAll();
-	logger.info("Redis Cleaned");
-})();
+// Serve Inngest functions endpoint
+app.on(
+	["GET", "POST", "PUT"],
+	"/api/inngest",
+	serveInngest({
+		client: inngest,
+		functions: [deploymentFunction],
+	}),
+);
 
 const port = Number.parseInt(process.env.PORT || "3000");
-logger.info("Starting Deployments Server ✅", port);
+logger.info("Starting Deployments Server with Inngest ✅", port);
 serve({ fetch: app.fetch, port });

apps/api/src/schema.ts

@@ -3,8 +3,8 @@ import { z } from "zod";
 export const deployJobSchema = z.discriminatedUnion("applicationType", [
 	z.object({
 		applicationId: z.string(),
-		titleLog: z.string(),
-		descriptionLog: z.string(),
+		titleLog: z.string().optional(),
+		descriptionLog: z.string().optional(),
 		server: z.boolean().optional(),
 		type: z.enum(["deploy", "redeploy"]),
 		applicationType: z.literal("application"),
@@ -12,8 +12,8 @@ export const deployJobSchema = z.discriminatedUnion("applicationType", [
 	}),
 	z.object({
 		composeId: z.string(),
-		titleLog: z.string(),
-		descriptionLog: z.string(),
+		titleLog: z.string().optional(),
+		descriptionLog: z.string().optional(),
 		server: z.boolean().optional(),
 		type: z.enum(["deploy", "redeploy"]),
 		applicationType: z.literal("compose"),
@@ -22,8 +22,8 @@ export const deployJobSchema = z.discriminatedUnion("applicationType", [
 	z.object({
 		applicationId: z.string(),
 		previewDeploymentId: z.string(),
-		titleLog: z.string(),
-		descriptionLog: z.string(),
+		titleLog: z.string().optional(),
+		descriptionLog: z.string().optional(),
 		server: z.boolean().optional(),
 		type: z.enum(["deploy"]),
 		applicationType: z.literal("application-preview"),
@@ -32,3 +32,16 @@ export const deployJobSchema = z.discriminatedUnion("applicationType", [
 ]);
 
 export type DeployJob = z.infer<typeof deployJobSchema>;
+
+export const cancelDeploymentSchema = z.discriminatedUnion("applicationType", [
+	z.object({
+		applicationId: z.string(),
+		applicationType: z.literal("application"),
+	}),
+	z.object({
+		composeId: z.string(),
+		applicationType: z.literal("compose"),
+	}),
+]);
+
+export type CancelDeploymentJob = z.infer<typeof cancelDeploymentSchema>;

apps/api/src/utils.ts

@@ -18,14 +18,14 @@ export const deploy = async (job: DeployJob) => {
 				if (job.type === "redeploy") {
 					await rebuildRemoteApplication({
 						applicationId: job.applicationId,
-						titleLog: job.titleLog,
-						descriptionLog: job.descriptionLog,
+						titleLog: job.titleLog || "Rebuild deployment",
+						descriptionLog: job.descriptionLog || "",
 					});
 				} else if (job.type === "deploy") {
 					await deployRemoteApplication({
 						applicationId: job.applicationId,
-						titleLog: job.titleLog,
-						descriptionLog: job.descriptionLog,
+						titleLog: job.titleLog || "Manual deployment",
+						descriptionLog: job.descriptionLog || "",
 					});
 				}
 			}
@@ -38,14 +38,14 @@ export const deploy = async (job: DeployJob) => {
 				if (job.type === "redeploy") {
 					await rebuildRemoteCompose({
 						composeId: job.composeId,
-						titleLog: job.titleLog,
-						descriptionLog: job.descriptionLog,
+						titleLog: job.titleLog || "Rebuild deployment",
+						descriptionLog: job.descriptionLog || "",
 					});
 				} else if (job.type === "deploy") {
 					await deployRemoteCompose({
 						composeId: job.composeId,
-						titleLog: job.titleLog,
-						descriptionLog: job.descriptionLog,
+						titleLog: job.titleLog || "Manual deployment",
+						descriptionLog: job.descriptionLog || "",
 					});
 				}
 			}
@@ -57,14 +57,14 @@ export const deploy = async (job: DeployJob) => {
 				if (job.type === "deploy") {
 					await deployRemotePreviewApplication({
 						applicationId: job.applicationId,
-						titleLog: job.titleLog,
-						descriptionLog: job.descriptionLog,
+						titleLog: job.titleLog || "Preview Deployment",
+						descriptionLog: job.descriptionLog || "",
 						previewDeploymentId: job.previewDeploymentId,
 					});
 				}
 			}
 		}
-	} catch (_) {
+	} catch (e) {
 		if (job.applicationType === "application") {
 			await updateApplicationStatus(job.applicationId, "error");
 		} else if (job.applicationType === "compose") {
@@ -76,6 +76,8 @@ export const deploy = async (job: DeployJob) => {
 				previewStatus: "error",
 			});
 		}
+
+		throw e;
 	}
 
 	return true;

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

@@ -1,7 +1,7 @@
 import type { ComposeSpecification } from "@dokploy/server";
 import { addSuffixToAllProperties } from "@dokploy/server";
-import { load } from "js-yaml";
 import { expect, test } from "vitest";
+import { parse } from "yaml";
 
 const composeFile1 = `
 version: "3.8"
@@ -61,7 +61,7 @@ secrets:
     file: ./db_password.txt
 `;
 
-const expectedComposeFile1 = load(`
+const expectedComposeFile1 = parse(`
 version: "3.8"
 
 services:
@@ -120,7 +120,7 @@ secrets:
 `) as ComposeSpecification;
 
 test("Add suffix to all properties in compose file 1", () => {
-	const composeData = load(composeFile1) as ComposeSpecification;
+	const composeData = parse(composeFile1) as ComposeSpecification;
 	const suffix = "testhash";
 
 	const updatedComposeData = addSuffixToAllProperties(composeData, suffix);
@@ -185,7 +185,7 @@ secrets:
     file: ./db_password.txt
 `;
 
-const expectedComposeFile2 = load(`
+const expectedComposeFile2 = parse(`
 version: "3.8"
 
 services:
@@ -243,7 +243,7 @@ secrets:
 `) as ComposeSpecification;
 
 test("Add suffix to all properties in compose file 2", () => {
-	const composeData = load(composeFile2) as ComposeSpecification;
+	const composeData = parse(composeFile2) as ComposeSpecification;
 	const suffix = "testhash";
 
 	const updatedComposeData = addSuffixToAllProperties(composeData, suffix);
@@ -308,7 +308,7 @@ secrets:
     file: ./service_secret.txt
 `;
 
-const expectedComposeFile3 = load(`
+const expectedComposeFile3 = parse(`
 version: "3.8"
 
 services:
@@ -366,7 +366,7 @@ secrets:
 `) as ComposeSpecification;
 
 test("Add suffix to all properties in compose file 3", () => {
-	const composeData = load(composeFile3) as ComposeSpecification;
+	const composeData = parse(composeFile3) as ComposeSpecification;
 	const suffix = "testhash";
 
 	const updatedComposeData = addSuffixToAllProperties(composeData, suffix);
@@ -420,7 +420,7 @@ volumes:
     driver: local
 `;
 
-const expectedComposeFile = load(`
+const expectedComposeFile = parse(`
 version: "3.8"
 
 services:
@@ -467,7 +467,7 @@ volumes:
 `) as ComposeSpecification;
 
 test("Add suffix to all properties in Plausible compose file", () => {
-	const composeData = load(composeFile) as ComposeSpecification;
+	const composeData = parse(composeFile) as ComposeSpecification;
 	const suffix = "testhash";
 
 	const updatedComposeData = addSuffixToAllProperties(composeData, suffix);

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

@@ -1,7 +1,7 @@
 import type { ComposeSpecification } from "@dokploy/server";
 import { addSuffixToConfigsRoot, generateRandomHash } from "@dokploy/server";
-import { load } from "js-yaml";
 import { expect, test } from "vitest";
+import { parse } from "yaml";
 
 test("Generate random hash with 8 characters", () => {
 	const hash = generateRandomHash();
@@ -23,7 +23,7 @@ configs:
 `;
 
 test("Add suffix to configs in root property", () => {
-	const composeData = load(composeFile) as ComposeSpecification;
+	const composeData = parse(composeFile) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 
@@ -59,7 +59,7 @@ configs:
 `;
 
 test("Add suffix to multiple configs in root property", () => {
-	const composeData = load(composeFileMultipleConfigs) as ComposeSpecification;
+	const composeData = parse(composeFileMultipleConfigs) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 
@@ -92,7 +92,7 @@ configs:
 `;
 
 test("Add suffix to configs with different properties in root property", () => {
-	const composeData = load(
+	const composeData = parse(
 		composeFileDifferentProperties,
 	) as ComposeSpecification;
 
@@ -137,7 +137,7 @@ configs:
 `;
 
 // Expected compose file con el prefijo `testhash`
-const expectedComposeFileConfigRoot = load(`
+const expectedComposeFileConfigRoot = parse(`
 version: "3.8"
 
 services:
@@ -162,7 +162,7 @@ configs:
 `) as ComposeSpecification;
 
 test("Add suffix to configs in root property", () => {
-	const composeData = load(composeFileConfigRoot) as ComposeSpecification;
+	const composeData = parse(composeFileConfigRoot) as ComposeSpecification;
 
 	const suffix = "testhash";
 

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

@@ -3,8 +3,8 @@ import {
 	addSuffixToConfigsInServices,
 	generateRandomHash,
 } from "@dokploy/server";
-import { load } from "js-yaml";
 import { expect, test } from "vitest";
+import { parse } from "yaml";
 
 const composeFile = `
 version: "3.8"
@@ -22,7 +22,7 @@ configs:
 `;
 
 test("Add suffix to configs in services", () => {
-	const composeData = load(composeFile) as ComposeSpecification;
+	const composeData = parse(composeFile) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 
@@ -54,7 +54,7 @@ configs:
 `;
 
 test("Add suffix to configs in services with single config", () => {
-	const composeData = load(
+	const composeData = parse(
 		composeFileSingleServiceConfig,
 	) as ComposeSpecification;
 
@@ -108,7 +108,7 @@ configs:
 `;
 
 test("Add suffix to configs in services with multiple configs", () => {
-	const composeData = load(
+	const composeData = parse(
 		composeFileMultipleServicesConfigs,
 	) as ComposeSpecification;
 
@@ -157,7 +157,7 @@ services:
 `;
 
 // Expected compose file con el prefijo `testhash`
-const expectedComposeFileConfigServices = load(`
+const expectedComposeFileConfigServices = parse(`
 version: "3.8"
 
 services:
@@ -182,7 +182,7 @@ services:
 `) as ComposeSpecification;
 
 test("Add suffix to configs in services", () => {
-	const composeData = load(composeFileConfigServices) as ComposeSpecification;
+	const composeData = parse(composeFileConfigServices) as ComposeSpecification;
 
 	const suffix = "testhash";
 

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

@@ -1,7 +1,7 @@
 import type { ComposeSpecification } from "@dokploy/server";
 import { addSuffixToAllConfigs, generateRandomHash } from "@dokploy/server";
-import { load } from "js-yaml";
 import { expect, test } from "vitest";
+import { parse } from "yaml";
 
 test("Generate random hash with 8 characters", () => {
 	const hash = generateRandomHash();
@@ -43,7 +43,7 @@ configs:
     file: ./db-config.yml
 `;
 
-const expectedComposeFileCombinedConfigs = load(`
+const expectedComposeFileCombinedConfigs = parse(`
 version: "3.8"
 
 services:
@@ -77,7 +77,7 @@ configs:
 `) as ComposeSpecification;
 
 test("Add suffix to all configs in root and services", () => {
-	const composeData = load(composeFileCombinedConfigs) as ComposeSpecification;
+	const composeData = parse(composeFileCombinedConfigs) as ComposeSpecification;
 
 	const suffix = "testhash";
 
@@ -122,7 +122,7 @@ configs:
     file: ./db-config.yml
 `;
 
-const expectedComposeFileWithEnvAndExternal = load(`
+const expectedComposeFileWithEnvAndExternal = parse(`
 version: "3.8"
 
 services:
@@ -159,7 +159,7 @@ configs:
 `) as ComposeSpecification;
 
 test("Add suffix to configs with environment and external", () => {
-	const composeData = load(
+	const composeData = parse(
 		composeFileWithEnvAndExternal,
 	) as ComposeSpecification;
 
@@ -200,7 +200,7 @@ configs:
     file: ./db-config.yml
 `;
 
-const expectedComposeFileWithTemplateDriverAndLabels = load(`
+const expectedComposeFileWithTemplateDriverAndLabels = parse(`
 version: "3.8"
 
 services:
@@ -231,7 +231,7 @@ configs:
 `) as ComposeSpecification;
 
 test("Add suffix to configs with template driver and labels", () => {
-	const composeData = load(
+	const composeData = parse(
 		composeFileWithTemplateDriverAndLabels,
 	) as ComposeSpecification;
 

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

@@ -1,7 +1,7 @@
 import type { ComposeSpecification } from "@dokploy/server";
 import { addSuffixToNetworksRoot, generateRandomHash } from "@dokploy/server";
-import { load } from "js-yaml";
 import { expect, test } from "vitest";
+import { parse } from "yaml";
 
 const composeFile = `
 version: "3.8"
@@ -35,7 +35,7 @@ test("Generate random hash with 8 characters", () => {
 });
 
 test("Add suffix to networks root property", () => {
-	const composeData = load(composeFile) as ComposeSpecification;
+	const composeData = parse(composeFile) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 
@@ -79,7 +79,7 @@ networks:
 `;
 
 test("Add suffix to advanced networks root property (2 TRY)", () => {
-	const composeData = load(composeFile2) as ComposeSpecification;
+	const composeData = parse(composeFile2) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 
@@ -120,7 +120,7 @@ networks:
 `;
 
 test("Add suffix to networks with external properties", () => {
-	const composeData = load(composeFile3) as ComposeSpecification;
+	const composeData = parse(composeFile3) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 
@@ -160,7 +160,7 @@ networks:
 `;
 
 test("Add suffix to networks with IPAM configurations", () => {
-	const composeData = load(composeFile4) as ComposeSpecification;
+	const composeData = parse(composeFile4) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 
@@ -201,7 +201,7 @@ networks:
 `;
 
 test("Add suffix to networks with custom options", () => {
-	const composeData = load(composeFile5) as ComposeSpecification;
+	const composeData = parse(composeFile5) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 
@@ -264,7 +264,7 @@ networks:
 `;
 
 test("Add suffix to networks with static suffix", () => {
-	const composeData = load(composeFile6) as ComposeSpecification;
+	const composeData = parse(composeFile6) as ComposeSpecification;
 
 	const suffix = "testhash";
 
@@ -273,7 +273,7 @@ test("Add suffix to networks with static suffix", () => {
 	}
 	const networks = addSuffixToNetworksRoot(composeData.networks, suffix);
 
-	const expectedComposeData = load(
+	const expectedComposeData = parse(
 		expectedComposeFile6,
 	) as ComposeSpecification;
 	expect(networks).toStrictEqual(expectedComposeData.networks);
@@ -293,7 +293,7 @@ networks:
 `;
 
 test("It shoudn't add suffix to dokploy-network", () => {
-	const composeData = load(composeFile7) as ComposeSpecification;
+	const composeData = parse(composeFile7) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 

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

@@ -3,8 +3,8 @@ import {
 	addSuffixToServiceNetworks,
 	generateRandomHash,
 } from "@dokploy/server";
-import { load } from "js-yaml";
 import { expect, test } from "vitest";
+import { parse } from "yaml";
 
 const composeFile = `
 version: "3.8"
@@ -23,7 +23,7 @@ services:
 `;
 
 test("Add suffix to networks in services", () => {
-	const composeData = load(composeFile) as ComposeSpecification;
+	const composeData = parse(composeFile) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 
@@ -67,7 +67,7 @@ networks:
 `;
 
 test("Add suffix to networks in services with aliases", () => {
-	const composeData = load(composeFile2) as ComposeSpecification;
+	const composeData = parse(composeFile2) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 
@@ -107,7 +107,7 @@ networks:
 `;
 
 test("Add suffix to networks in services (Object with simple networks)", () => {
-	const composeData = load(composeFile3) as ComposeSpecification;
+	const composeData = parse(composeFile3) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 
@@ -153,7 +153,7 @@ networks:
 `;
 
 test("Add suffix to networks in services (combined case)", () => {
-	const composeData = load(composeFileCombined) as ComposeSpecification;
+	const composeData = parse(composeFileCombined) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 
@@ -196,7 +196,7 @@ services:
 `;
 
 test("It shoudn't add suffix to dokploy-network in services", () => {
-	const composeData = load(composeFile7) as ComposeSpecification;
+	const composeData = parse(composeFile7) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 
@@ -245,7 +245,7 @@ services:
 `;
 
 test("It shoudn't add suffix to dokploy-network in services multiples cases", () => {
-	const composeData = load(composeFile8) as ComposeSpecification;
+	const composeData = parse(composeFile8) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 

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

@@ -5,8 +5,8 @@ import {
 	addSuffixToServiceNetworks,
 	generateRandomHash,
 } from "@dokploy/server";
-import { load } from "js-yaml";
 import { expect, test } from "vitest";
+import { parse } from "yaml";
 
 const composeFileCombined = `
 version: "3.8"
@@ -39,7 +39,7 @@ networks:
 `;
 
 test("Add suffix to networks in services and root (combined case)", () => {
-	const composeData = load(composeFileCombined) as ComposeSpecification;
+	const composeData = parse(composeFileCombined) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 
@@ -89,7 +89,7 @@ test("Add suffix to networks in services and root (combined case)", () => {
 	expect(redisNetworks).not.toHaveProperty("backend");
 });
 
-const expectedComposeFile = load(`
+const expectedComposeFile = parse(`
 version: "3.8"
 
 services:
@@ -120,7 +120,7 @@ networks:
 `);
 
 test("Add suffix to networks in compose file", () => {
-	const composeData = load(composeFileCombined) as ComposeSpecification;
+	const composeData = parse(composeFileCombined) as ComposeSpecification;
 
 	const suffix = "testhash";
 	if (!composeData?.networks) {
@@ -156,7 +156,7 @@ networks:
     driver: bridge
 `;
 
-const expectedComposeFile2 = load(`
+const expectedComposeFile2 = parse(`
 version: "3.8"
 
 services:
@@ -182,7 +182,7 @@ networks:
 `);
 
 test("Add suffix to networks in compose file with external and internal networks", () => {
-	const composeData = load(composeFile2) as ComposeSpecification;
+	const composeData = parse(composeFile2) as ComposeSpecification;
 
 	const suffix = "testhash";
 	const updatedComposeData = addSuffixToAllNetworks(composeData, suffix);
@@ -218,7 +218,7 @@ networks:
       com.docker.network.bridge.enable_icc: "true"
 `;
 
-const expectedComposeFile3 = load(`
+const expectedComposeFile3 = parse(`
 version: "3.8"
 
 services:
@@ -247,7 +247,7 @@ networks:
 `);
 
 test("Add suffix to networks in compose file with multiple services and complex network configurations", () => {
-	const composeData = load(composeFile3) as ComposeSpecification;
+	const composeData = parse(composeFile3) as ComposeSpecification;
 
 	const suffix = "testhash";
 	const updatedComposeData = addSuffixToAllNetworks(composeData, suffix);
@@ -289,7 +289,7 @@ networks:
 
 `;
 
-const expectedComposeFile4 = load(`
+const expectedComposeFile4 = parse(`
 version: "3.8"
 
 services:
@@ -326,7 +326,7 @@ networks:
 `);
 
 test("Expect don't add suffix to dokploy-network in compose file with multiple services and complex network configurations", () => {
-	const composeData = load(composeFile4) as ComposeSpecification;
+	const composeData = parse(composeFile4) as ComposeSpecification;
 
 	const suffix = "testhash";
 	const updatedComposeData = addSuffixToAllNetworks(composeData, suffix);

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

@@ -1,7 +1,7 @@
 import type { ComposeSpecification } from "@dokploy/server";
 import { addSuffixToSecretsRoot, generateRandomHash } from "@dokploy/server";
-import { load } from "js-yaml";
 import { expect, test } from "vitest";
+import { parse } from "yaml";
 
 test("Generate random hash with 8 characters", () => {
 	const hash = generateRandomHash();
@@ -23,7 +23,7 @@ secrets:
 `;
 
 test("Add suffix to secrets in root property", () => {
-	const composeData = load(composeFileSecretsRoot) as ComposeSpecification;
+	const composeData = parse(composeFileSecretsRoot) as ComposeSpecification;
 	const suffix = generateRandomHash();
 
 	if (!composeData?.secrets) {
@@ -52,7 +52,7 @@ secrets:
 `;
 
 test("Add suffix to secrets in root property (Test 1)", () => {
-	const composeData = load(composeFileSecretsRoot1) as ComposeSpecification;
+	const composeData = parse(composeFileSecretsRoot1) as ComposeSpecification;
 	const suffix = generateRandomHash();
 
 	if (!composeData?.secrets) {
@@ -84,7 +84,7 @@ secrets:
 `;
 
 test("Add suffix to secrets in root property (Test 2)", () => {
-	const composeData = load(composeFileSecretsRoot2) as ComposeSpecification;
+	const composeData = parse(composeFileSecretsRoot2) as ComposeSpecification;
 	const suffix = generateRandomHash();
 
 	if (!composeData?.secrets) {

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

@@ -3,8 +3,8 @@ import {
 	addSuffixToSecretsInServices,
 	generateRandomHash,
 } from "@dokploy/server";
-import { load } from "js-yaml";
 import { expect, test } from "vitest";
+import { parse } from "yaml";
 
 const composeFileSecretsServices = `
 version: "3.8"
@@ -21,7 +21,7 @@ secrets:
 `;
 
 test("Add suffix to secrets in services", () => {
-	const composeData = load(composeFileSecretsServices) as ComposeSpecification;
+	const composeData = parse(composeFileSecretsServices) as ComposeSpecification;
 	const suffix = generateRandomHash();
 
 	if (!composeData.services) {
@@ -54,7 +54,9 @@ secrets:
 `;
 
 test("Add suffix to secrets in services (Test 1)", () => {
-	const composeData = load(composeFileSecretsServices1) as ComposeSpecification;
+	const composeData = parse(
+		composeFileSecretsServices1,
+	) as ComposeSpecification;
 	const suffix = generateRandomHash();
 
 	if (!composeData.services) {
@@ -93,7 +95,9 @@ secrets:
 `;
 
 test("Add suffix to secrets in services (Test 2)", () => {
-	const composeData = load(composeFileSecretsServices2) as ComposeSpecification;
+	const composeData = parse(
+		composeFileSecretsServices2,
+	) as ComposeSpecification;
 	const suffix = generateRandomHash();
 
 	if (!composeData.services) {

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

@@ -1,7 +1,7 @@
 import type { ComposeSpecification } from "@dokploy/server";
 import { addSuffixToAllSecrets } from "@dokploy/server";
-import { load } from "js-yaml";
 import { expect, test } from "vitest";
+import { parse } from "yaml";
 
 const composeFileCombinedSecrets = `
 version: "3.8"
@@ -25,7 +25,7 @@ secrets:
     file: ./app_secret.txt
 `;
 
-const expectedComposeFileCombinedSecrets = load(`
+const expectedComposeFileCombinedSecrets = parse(`
 version: "3.8"
 
 services:
@@ -48,7 +48,7 @@ secrets:
 `) as ComposeSpecification;
 
 test("Add suffix to all secrets", () => {
-	const composeData = load(composeFileCombinedSecrets) as ComposeSpecification;
+	const composeData = parse(composeFileCombinedSecrets) as ComposeSpecification;
 	const suffix = "testhash";
 
 	const updatedComposeData = addSuffixToAllSecrets(composeData, suffix);
@@ -77,7 +77,7 @@ secrets:
     file: ./cache_secret.txt
 `;
 
-const expectedComposeFileCombinedSecrets3 = load(`
+const expectedComposeFileCombinedSecrets3 = parse(`
 version: "3.8"
 
 services:
@@ -99,7 +99,9 @@ secrets:
 `) as ComposeSpecification;
 
 test("Add suffix to all secrets (3rd Case)", () => {
-	const composeData = load(composeFileCombinedSecrets3) as ComposeSpecification;
+	const composeData = parse(
+		composeFileCombinedSecrets3,
+	) as ComposeSpecification;
 	const suffix = "testhash";
 
 	const updatedComposeData = addSuffixToAllSecrets(composeData, suffix);
@@ -128,7 +130,7 @@ secrets:
     file: ./db_password.txt
 `;
 
-const expectedComposeFileCombinedSecrets4 = load(`
+const expectedComposeFileCombinedSecrets4 = parse(`
 version: "3.8"
 
 services:
@@ -150,7 +152,9 @@ secrets:
 `) as ComposeSpecification;
 
 test("Add suffix to all secrets (4th Case)", () => {
-	const composeData = load(composeFileCombinedSecrets4) as ComposeSpecification;
+	const composeData = parse(
+		composeFileCombinedSecrets4,
+	) as ComposeSpecification;
 	const suffix = "testhash";
 
 	const updatedComposeData = addSuffixToAllSecrets(composeData, suffix);

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

@@ -1,7 +1,7 @@
 import type { ComposeSpecification } from "@dokploy/server";
 import { addSuffixToServiceNames, generateRandomHash } from "@dokploy/server";
-import { load } from "js-yaml";
 import { expect, test } from "vitest";
+import { parse } from "yaml";
 
 const composeFile = `
 version: "3.8"
@@ -27,7 +27,7 @@ test("Generate random hash with 8 characters", () => {
 });
 
 test("Add suffix to service names with container_name in compose file", () => {
-	const composeData = load(composeFile) as ComposeSpecification;
+	const composeData = parse(composeFile) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 

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

@@ -1,7 +1,7 @@
 import type { ComposeSpecification } from "@dokploy/server";
 import { addSuffixToServiceNames, generateRandomHash } from "@dokploy/server";
-import { load } from "js-yaml";
 import { expect, test } from "vitest";
+import { parse } from "yaml";
 
 test("Generate random hash with 8 characters", () => {
 	const hash = generateRandomHash();
@@ -32,7 +32,7 @@ networks:
 `;
 
 test("Add suffix to service names with depends_on (array) in compose file", () => {
-	const composeData = load(composeFile4) as ComposeSpecification;
+	const composeData = parse(composeFile4) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 
@@ -102,7 +102,7 @@ networks:
 `;
 
 test("Add suffix to service names with depends_on (object) in compose file", () => {
-	const composeData = load(composeFile5) as ComposeSpecification;
+	const composeData = parse(composeFile5) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 

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

@@ -1,7 +1,7 @@
 import type { ComposeSpecification } from "@dokploy/server";
 import { addSuffixToServiceNames, generateRandomHash } from "@dokploy/server";
-import { load } from "js-yaml";
 import { expect, test } from "vitest";
+import { parse } from "yaml";
 
 test("Generate random hash with 8 characters", () => {
 	const hash = generateRandomHash();
@@ -30,7 +30,7 @@ networks:
 `;
 
 test("Add suffix to service names with extends (string) in compose file", () => {
-	const composeData = load(composeFile6) as ComposeSpecification;
+	const composeData = parse(composeFile6) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 
@@ -90,7 +90,7 @@ networks:
 `;
 
 test("Add suffix to service names with extends (object) in compose file", () => {
-	const composeData = load(composeFile7) as ComposeSpecification;
+	const composeData = parse(composeFile7) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 

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

@@ -1,7 +1,7 @@
 import type { ComposeSpecification } from "@dokploy/server";
 import { addSuffixToServiceNames, generateRandomHash } from "@dokploy/server";
-import { load } from "js-yaml";
 import { expect, test } from "vitest";
+import { parse } from "yaml";
 
 test("Generate random hash with 8 characters", () => {
 	const hash = generateRandomHash();
@@ -31,7 +31,7 @@ networks:
 `;
 
 test("Add suffix to service names with links in compose file", () => {
-	const composeData = load(composeFile2) as ComposeSpecification;
+	const composeData = parse(composeFile2) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 

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

@@ -1,7 +1,7 @@
 import type { ComposeSpecification } from "@dokploy/server";
 import { addSuffixToServiceNames, generateRandomHash } from "@dokploy/server";
-import { load } from "js-yaml";
 import { expect, test } from "vitest";
+import { parse } from "yaml";
 
 test("Generate random hash with 8 characters", () => {
 	const hash = generateRandomHash();
@@ -26,7 +26,7 @@ networks:
 `;
 
 test("Add suffix to service names in compose file", () => {
-	const composeData = load(composeFile) as ComposeSpecification;
+	const composeData = parse(composeFile) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 

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

@@ -3,8 +3,8 @@ import {
 	addSuffixToAllServiceNames,
 	addSuffixToServiceNames,
 } from "@dokploy/server";
-import { load } from "js-yaml";
 import { expect, test } from "vitest";
+import { parse } from "yaml";
 
 const composeFileCombinedAllCases = `
 version: "3.8"
@@ -38,7 +38,7 @@ networks:
     driver: bridge
 `;
 
-const expectedComposeFile = load(`
+const expectedComposeFile = parse(`
 version: "3.8"
 
 services:
@@ -71,7 +71,9 @@ networks:
 `);
 
 test("Add suffix to all service names in compose file", () => {
-	const composeData = load(composeFileCombinedAllCases) as ComposeSpecification;
+	const composeData = parse(
+		composeFileCombinedAllCases,
+	) as ComposeSpecification;
 
 	const suffix = "testhash";
 
@@ -131,7 +133,7 @@ networks:
     driver: bridge
 `;
 
-const expectedComposeFile1 = load(`
+const expectedComposeFile1 = parse(`
 version: "3.8"
 
 services:
@@ -176,7 +178,7 @@ networks:
 `) as ComposeSpecification;
 
 test("Add suffix to all service names in compose file 1", () => {
-	const composeData = load(composeFile1) as ComposeSpecification;
+	const composeData = parse(composeFile1) as ComposeSpecification;
 	const suffix = "testhash";
 
 	const updatedComposeData = addSuffixToAllServiceNames(composeData, suffix);
@@ -227,7 +229,7 @@ networks:
     driver: bridge
 `;
 
-const expectedComposeFile2 = load(`
+const expectedComposeFile2 = parse(`
 version: "3.8"
 
 services:
@@ -271,7 +273,7 @@ networks:
 `) as ComposeSpecification;
 
 test("Add suffix to all service names in compose file 2", () => {
-	const composeData = load(composeFile2) as ComposeSpecification;
+	const composeData = parse(composeFile2) as ComposeSpecification;
 	const suffix = "testhash";
 
 	const updatedComposeData = addSuffixToAllServiceNames(composeData, suffix);
@@ -322,7 +324,7 @@ networks:
     driver: bridge
 `;
 
-const expectedComposeFile3 = load(`
+const expectedComposeFile3 = parse(`
 version: "3.8"
 
 services:
@@ -366,7 +368,7 @@ networks:
 `) as ComposeSpecification;
 
 test("Add suffix to all service names in compose file 3", () => {
-	const composeData = load(composeFile3) as ComposeSpecification;
+	const composeData = parse(composeFile3) as ComposeSpecification;
 	const suffix = "testhash";
 
 	const updatedComposeData = addSuffixToAllServiceNames(composeData, suffix);

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

@@ -1,7 +1,7 @@
 import type { ComposeSpecification } from "@dokploy/server";
 import { addSuffixToServiceNames, generateRandomHash } from "@dokploy/server";
-import { load } from "js-yaml";
 import { expect, test } from "vitest";
+import { parse } from "yaml";
 
 test("Generate random hash with 8 characters", () => {
 	const hash = generateRandomHash();
@@ -35,7 +35,7 @@ networks:
 `;
 
 test("Add suffix to service names with volumes_from in compose file", () => {
-	const composeData = load(composeFile3) as ComposeSpecification;
+	const composeData = parse(composeFile3) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 

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

@@ -4,8 +4,8 @@ import {
 	addSuffixToVolumesRoot,
 	generateRandomHash,
 } from "@dokploy/server";
-import { load } from "js-yaml";
 import { expect, test } from "vitest";
+import { parse } from "yaml";
 
 const composeFile = `
 services:
@@ -70,7 +70,7 @@ volumes:
     driver: local
 `;
 
-const expectedDockerCompose = load(`
+const expectedDockerCompose = parse(`
 services:
   mail:
     image: bytemark/smtp
@@ -143,7 +143,7 @@ test("Generate random hash with 8 characters", () => {
 // Docker compose needs unique names for services, volumes, networks and containers
 // So base on a input which is a dockercompose file, it should replace the name with a hash and return a new dockercompose file
 test("Add suffix to volumes root property", () => {
-	const composeData = load(composeFile) as ComposeSpecification;
+	const composeData = parse(composeFile) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 
@@ -165,7 +165,7 @@ test("Add suffix to volumes root property", () => {
 });
 
 test("Expect to change the suffix in all the possible places", () => {
-	const composeData = load(composeFile) as ComposeSpecification;
+	const composeData = parse(composeFile) as ComposeSpecification;
 	const suffix = "testhash";
 
 	const updatedComposeData = addSuffixToAllVolumes(composeData, suffix);
@@ -195,7 +195,7 @@ volumes:
   mongo-data:
 `;
 
-const expectedDockerCompose2 = load(`
+const expectedDockerCompose2 = parse(`
 version: '3.8'
 services:
   app:
@@ -218,7 +218,7 @@ volumes:
 `) as ComposeSpecification;
 
 test("Expect to change the suffix in all the possible places (2 Try)", () => {
-	const composeData = load(composeFile2) as ComposeSpecification;
+	const composeData = parse(composeFile2) as ComposeSpecification;
 	const suffix = "testhash";
 
 	const updatedComposeData = addSuffixToAllVolumes(composeData, suffix);
@@ -248,7 +248,7 @@ volumes:
   mongo-data:
 `;
 
-const expectedDockerCompose3 = load(`
+const expectedDockerCompose3 = parse(`
 version: '3.8'
 services:
   app:
@@ -271,7 +271,7 @@ volumes:
 `) as ComposeSpecification;
 
 test("Expect to change the suffix in all the possible places (3 Try)", () => {
-	const composeData = load(composeFile3) as ComposeSpecification;
+	const composeData = parse(composeFile3) as ComposeSpecification;
 	const suffix = "testhash";
 
 	const updatedComposeData = addSuffixToAllVolumes(composeData, suffix);
@@ -645,7 +645,7 @@ volumes:
   db-config:
 `;
 
-const expectedDockerComposeComplex = load(`
+const expectedDockerComposeComplex = parse(`
 version: "3.8"
 services:
   studio:
@@ -1012,7 +1012,7 @@ volumes:
 `);
 
 test("Expect to change the suffix in all the possible places (4 Try)", () => {
-	const composeData = load(composeFileComplex) as ComposeSpecification;
+	const composeData = parse(composeFileComplex) as ComposeSpecification;
 	const suffix = "testhash";
 
 	const updatedComposeData = addSuffixToAllVolumes(composeData, suffix);
@@ -1065,7 +1065,7 @@ volumes:
   db-data:
 `;
 
-const expectedDockerComposeExample1 = load(`
+const expectedDockerComposeExample1 = parse(`
 version: "3.8"
 services:
   web:
@@ -1111,7 +1111,7 @@ volumes:
 `) as ComposeSpecification;
 
 test("Expect to change the suffix in all the possible places (5 Try)", () => {
-	const composeData = load(composeFileExample1) as ComposeSpecification;
+	const composeData = parse(composeFileExample1) as ComposeSpecification;
 	const suffix = "testhash";
 
 	const updatedComposeData = addSuffixToAllVolumes(composeData, suffix);
@@ -1143,7 +1143,7 @@ volumes:
   backrest-cache:
 `;
 
-const expectedDockerComposeBackrest = load(`
+const expectedDockerComposeBackrest = parse(`
 services:
   backrest:
     image: garethgeorge/backrest:v1.7.3
@@ -1168,7 +1168,7 @@ volumes:
 `) as ComposeSpecification;
 
 test("Should handle volume paths with subdirectories correctly", () => {
-	const composeData = load(composeFileBackrest) as ComposeSpecification;
+	const composeData = parse(composeFileBackrest) as ComposeSpecification;
 	const suffix = "testhash";
 
 	const updatedComposeData = addSuffixToAllVolumes(composeData, suffix);

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

@@ -1,7 +1,7 @@
 import type { ComposeSpecification } from "@dokploy/server";
 import { addSuffixToVolumesRoot, generateRandomHash } from "@dokploy/server";
-import { load } from "js-yaml";
 import { expect, test } from "vitest";
+import { parse } from "yaml";
 
 const composeFile = `
 version: "3.8"
@@ -29,7 +29,7 @@ test("Generate random hash with 8 characters", () => {
 });
 
 test("Add suffix to volumes in root property", () => {
-	const composeData = load(composeFile) as ComposeSpecification;
+	const composeData = parse(composeFile) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 
@@ -67,7 +67,7 @@ networks:
 `;
 
 test("Add suffix to volumes in root property (Case 2)", () => {
-	const composeData = load(composeFile2) as ComposeSpecification;
+	const composeData = parse(composeFile2) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 
@@ -101,7 +101,7 @@ networks:
 `;
 
 test("Add suffix to volumes in root property (Case 3)", () => {
-	const composeData = load(composeFile3) as ComposeSpecification;
+	const composeData = parse(composeFile3) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 
@@ -148,7 +148,7 @@ volumes:
 `;
 
 // Expected compose file con el prefijo `testhash`
-const expectedComposeFile4 = load(`
+const expectedComposeFile4 = parse(`
 version: "3.8"
 
 services:
@@ -179,7 +179,7 @@ volumes:
 `) as ComposeSpecification;
 
 test("Add suffix to volumes in root property", () => {
-	const composeData = load(composeFile4) as ComposeSpecification;
+	const composeData = parse(composeFile4) as ComposeSpecification;
 
 	const suffix = "testhash";
 

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

@@ -3,8 +3,8 @@ import {
 	addSuffixToVolumesInServices,
 	generateRandomHash,
 } from "@dokploy/server";
-import { load } from "js-yaml";
 import { expect, test } from "vitest";
+import { parse } from "yaml";
 
 test("Generate random hash with 8 characters", () => {
 	const hash = generateRandomHash();
@@ -24,7 +24,7 @@ services:
 `;
 
 test("Add suffix to volumes declared directly in services", () => {
-	const composeData = load(composeFile1) as ComposeSpecification;
+	const composeData = parse(composeFile1) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 
@@ -59,7 +59,7 @@ volumes:
 `;
 
 test("Add suffix to volumes declared directly in services (Case 2)", () => {
-	const composeData = load(composeFileTypeVolume) as ComposeSpecification;
+	const composeData = parse(composeFileTypeVolume) as ComposeSpecification;
 
 	const suffix = generateRandomHash();
 

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

@@ -1,7 +1,7 @@
 import type { ComposeSpecification } from "@dokploy/server";
 import { addSuffixToAllVolumes } from "@dokploy/server";
-import { load } from "js-yaml";
 import { expect, test } from "vitest";
+import { parse } from "yaml";
 
 const composeFileTypeVolume = `
 version: "3.8"
@@ -23,7 +23,7 @@ volumes:
     driver: local
 `;
 
-const expectedComposeFileTypeVolume = load(`
+const expectedComposeFileTypeVolume = parse(`
 version: "3.8"
 
 services:
@@ -44,7 +44,7 @@ volumes:
 `) as ComposeSpecification;
 
 test("Add suffix to volumes with type: volume in services", () => {
-	const composeData = load(composeFileTypeVolume) as ComposeSpecification;
+	const composeData = parse(composeFileTypeVolume) as ComposeSpecification;
 
 	const suffix = "testhash";
 
@@ -73,7 +73,7 @@ volumes:
     driver: local
 `;
 
-const expectedComposeFileTypeVolume1 = load(`
+const expectedComposeFileTypeVolume1 = parse(`
 version: "3.8"
 
 services:
@@ -93,7 +93,7 @@ volumes:
 `) as ComposeSpecification;
 
 test("Add suffix to mixed volumes in services", () => {
-	const composeData = load(composeFileTypeVolume1) as ComposeSpecification;
+	const composeData = parse(composeFileTypeVolume1) as ComposeSpecification;
 
 	const suffix = "testhash";
 
@@ -128,7 +128,7 @@ volumes:
       device: /path/to/app/logs
 `;
 
-const expectedComposeFileTypeVolume2 = load(`
+const expectedComposeFileTypeVolume2 = parse(`
 version: "3.8"
 
 services:
@@ -154,7 +154,7 @@ volumes:
 `) as ComposeSpecification;
 
 test("Add suffix to complex volume configurations in services", () => {
-	const composeData = load(composeFileTypeVolume2) as ComposeSpecification;
+	const composeData = parse(composeFileTypeVolume2) as ComposeSpecification;
 
 	const suffix = "testhash";
 
@@ -218,7 +218,7 @@ volumes:
       device: /path/to/shared/logs
 `;
 
-const expectedComposeFileTypeVolume3 = load(`
+const expectedComposeFileTypeVolume3 = parse(`
 version: "3.8"
 
 services:
@@ -273,7 +273,7 @@ volumes:
 `) as ComposeSpecification;
 
 test("Add suffix to complex nested volumes configuration in services", () => {
-	const composeData = load(composeFileTypeVolume3) as ComposeSpecification;
+	const composeData = parse(composeFileTypeVolume3) as ComposeSpecification;
 
 	const suffix = "testhash";
 

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

@@ -27,6 +27,7 @@ if (typeof window === "undefined") {
 const baseApp: ApplicationNested = {
 	railpackVersion: "0.2.2",
 	applicationId: "",
+	previewLabels: [],
 	herokuVersion: "",
 	giteaBranch: "",
 	giteaBuildPath: "",
@@ -55,13 +56,21 @@ const baseApp: ApplicationNested = {
 	previewPort: 3000,
 	previewLimit: 0,
 	previewWildcard: "",
-	project: {
+	environment: {
 		env: "",
-		organizationId: "",
+		environmentId: "",
 		name: "",
-		description: "",
 		createdAt: "",
+		description: "",
 		projectId: "",
+		project: {
+			env: "",
+			organizationId: "",
+			name: "",
+			description: "",
+			createdAt: "",
+			projectId: "",
+		},
 	},
 	buildArgs: null,
 	buildPath: "/",
@@ -91,6 +100,7 @@ const baseApp: ApplicationNested = {
 	dockerfile: null,
 	dockerImage: null,
 	dropBuildPath: null,
+	environmentId: "",
 	enabled: null,
 	env: null,
 	healthCheckSwarm: null,
@@ -105,7 +115,6 @@ const baseApp: ApplicationNested = {
 	password: null,
 	placementSwarm: null,
 	ports: [],
-	projectId: "",
 	publishDirectory: null,
 	isStaticSpa: null,
 	redirects: [],

apps/dokploy/__test__/env/environment.test.ts

@@ -0,0 +1,335 @@
+import { prepareEnvironmentVariables } from "@dokploy/server/index";
+import { describe, expect, it } from "vitest";
+
+const projectEnv = `
+ENVIRONMENT=staging
+DATABASE_URL=postgres://postgres:postgres@localhost:5432/project_db
+PORT=3000
+`;
+
+const environmentEnv = `
+NODE_ENV=development
+API_URL=https://api.dev.example.com
+REDIS_URL=redis://localhost:6379
+DATABASE_NAME=dev_database
+SECRET_KEY=env-secret-123
+`;
+
+describe("prepareEnvironmentVariables (environment variables)", () => {
+	it("resolves environment variables correctly", () => {
+		const serviceWithEnvVars = `
+NODE_ENV=\${{environment.NODE_ENV}}
+API_URL=\${{environment.API_URL}}
+SERVICE_PORT=4000
+`;
+
+		const resolved = prepareEnvironmentVariables(
+			serviceWithEnvVars,
+			"",
+			environmentEnv,
+		);
+
+		expect(resolved).toEqual([
+			"NODE_ENV=development",
+			"API_URL=https://api.dev.example.com",
+			"SERVICE_PORT=4000",
+		]);
+	});
+
+	it("resolves both project and environment variables", () => {
+		const serviceWithBoth = `
+ENVIRONMENT=\${{project.ENVIRONMENT}}
+NODE_ENV=\${{environment.NODE_ENV}}
+API_URL=\${{environment.API_URL}}
+DATABASE_URL=\${{project.DATABASE_URL}}
+SERVICE_PORT=4000
+`;
+
+		const resolved = prepareEnvironmentVariables(
+			serviceWithBoth,
+			projectEnv,
+			environmentEnv,
+		);
+
+		expect(resolved).toEqual([
+			"ENVIRONMENT=staging",
+			"NODE_ENV=development",
+			"API_URL=https://api.dev.example.com",
+			"DATABASE_URL=postgres://postgres:postgres@localhost:5432/project_db",
+			"SERVICE_PORT=4000",
+		]);
+	});
+
+	it("handles undefined environment variables", () => {
+		const serviceWithUndefined = `
+UNDEFINED_VAR=\${{environment.UNDEFINED_VAR}}
+`;
+
+		expect(() =>
+			prepareEnvironmentVariables(serviceWithUndefined, "", environmentEnv),
+		).toThrow("Invalid environment variable: environment.UNDEFINED_VAR");
+	});
+
+	it("allows service variables to override environment variables", () => {
+		const serviceOverrideEnv = `
+NODE_ENV=production
+API_URL=\${{environment.API_URL}}
+`;
+
+		const resolved = prepareEnvironmentVariables(
+			serviceOverrideEnv,
+			"",
+			environmentEnv,
+		);
+
+		expect(resolved).toEqual([
+			"NODE_ENV=production", // Overrides environment variable
+			"API_URL=https://api.dev.example.com",
+		]);
+	});
+
+	it("resolves complex references with project, environment, and service variables", () => {
+		const complexServiceEnv = `
+FULL_DATABASE_URL=\${{project.DATABASE_URL}}/\${{environment.DATABASE_NAME}}
+API_ENDPOINT=\${{environment.API_URL}}/\${{project.ENVIRONMENT}}/api
+SERVICE_NAME=my-service
+COMPLEX_VAR=\${{SERVICE_NAME}}-\${{environment.NODE_ENV}}-\${{project.ENVIRONMENT}}
+`;
+
+		const resolved = prepareEnvironmentVariables(
+			complexServiceEnv,
+			projectEnv,
+			environmentEnv,
+		);
+
+		expect(resolved).toEqual([
+			"FULL_DATABASE_URL=postgres://postgres:postgres@localhost:5432/project_db/dev_database",
+			"API_ENDPOINT=https://api.dev.example.com/staging/api",
+			"SERVICE_NAME=my-service",
+			"COMPLEX_VAR=my-service-development-staging",
+		]);
+	});
+
+	it("handles environment variables with special characters", () => {
+		const specialEnvVars = `
+SPECIAL_URL=https://special.com
+COMPLEX_KEY="key-with-@#$%^&*()"
+JWT_SECRET="secret-with-spaces and symbols!@#"
+`;
+
+		const serviceWithSpecial = `
+FULL_URL=\${{environment.SPECIAL_URL}}/path?key=\${{environment.COMPLEX_KEY}}
+AUTH_SECRET=\${{environment.JWT_SECRET}}
+`;
+
+		const resolved = prepareEnvironmentVariables(
+			serviceWithSpecial,
+			"",
+			specialEnvVars,
+		);
+
+		expect(resolved).toEqual([
+			"FULL_URL=https://special.com/path?key=key-with-@#$%^&*()",
+			"AUTH_SECRET=secret-with-spaces and symbols!@#",
+		]);
+	});
+
+	it("maintains precedence: service > environment > project", () => {
+		const conflictingProjectEnv = `
+NODE_ENV=production-project
+API_URL=https://project.api.com
+DATABASE_NAME=project_db
+`;
+
+		const conflictingEnvironmentEnv = `
+NODE_ENV=development-environment
+API_URL=https://environment.api.com
+DATABASE_NAME=env_db
+`;
+
+		const serviceWithConflicts = `
+NODE_ENV=service-override
+PROJECT_ENV=\${{project.NODE_ENV}}
+ENV_VAR=\${{environment.API_URL}}
+DB_NAME=\${{environment.DATABASE_NAME}}
+`;
+
+		const resolved = prepareEnvironmentVariables(
+			serviceWithConflicts,
+			conflictingProjectEnv,
+			conflictingEnvironmentEnv,
+		);
+
+		expect(resolved).toEqual([
+			"NODE_ENV=service-override", // Service wins
+			"PROJECT_ENV=production-project", // Project reference
+			"ENV_VAR=https://environment.api.com", // Environment reference
+			"DB_NAME=env_db", // Environment reference
+		]);
+	});
+
+	it("handles empty environment variables", () => {
+		const serviceWithEmpty = `
+SERVICE_VAR=test
+PROJECT_VAR=\${{project.ENVIRONMENT}}
+`;
+
+		const resolved = prepareEnvironmentVariables(
+			serviceWithEmpty,
+			projectEnv,
+			"",
+		);
+
+		expect(resolved).toEqual(["SERVICE_VAR=test", "PROJECT_VAR=staging"]);
+	});
+
+	it("handles mixed quotes and environment variables", () => {
+		const envWithQuotes = `
+QUOTED_VAR="development"
+SINGLE_QUOTED='https://api.dev.example.com'
+MIXED_VAR="value with 'single' quotes"
+`;
+
+		const serviceWithQuotes = `
+NODE_ENV=\${{environment.QUOTED_VAR}}
+API_URL=\${{environment.SINGLE_QUOTED}}
+COMPLEX="Prefix-\${{environment.MIXED_VAR}}-Suffix"
+`;
+
+		const resolved = prepareEnvironmentVariables(
+			serviceWithQuotes,
+			"",
+			envWithQuotes,
+		);
+
+		expect(resolved).toEqual([
+			"NODE_ENV=development",
+			"API_URL=https://api.dev.example.com",
+			"COMPLEX=Prefix-value with 'single' quotes-Suffix",
+		]);
+	});
+
+	it("resolves multiple environment references in single value", () => {
+		const multiRefEnv = `
+HOST=localhost
+PORT=5432
+USERNAME=postgres
+PASSWORD=secret123
+`;
+
+		const serviceWithMultiRefs = `
+DATABASE_URL=postgresql://\${{environment.USERNAME}}:\${{environment.PASSWORD}}@\${{environment.HOST}}:\${{environment.PORT}}/mydb
+CONNECTION_STRING=\${{environment.HOST}}:\${{environment.PORT}}
+`;
+
+		const resolved = prepareEnvironmentVariables(
+			serviceWithMultiRefs,
+			"",
+			multiRefEnv,
+		);
+
+		expect(resolved).toEqual([
+			"DATABASE_URL=postgresql://postgres:secret123@localhost:5432/mydb",
+			"CONNECTION_STRING=localhost:5432",
+		]);
+	});
+
+	it("handles nested references with environment and project variables", () => {
+		const nestedProjectEnv = `
+BASE_DOMAIN=example.com
+PROTOCOL=https
+`;
+
+		const nestedEnvironmentEnv = `
+SUBDOMAIN=api.dev
+PATH_PREFIX=/v1
+`;
+
+		const serviceWithNested = `
+FULL_URL=\${{project.PROTOCOL}}://\${{environment.SUBDOMAIN}}.\${{project.BASE_DOMAIN}}\${{environment.PATH_PREFIX}}/endpoint
+API_BASE=\${{project.PROTOCOL}}://\${{environment.SUBDOMAIN}}.\${{project.BASE_DOMAIN}}
+`;
+
+		const resolved = prepareEnvironmentVariables(
+			serviceWithNested,
+			nestedProjectEnv,
+			nestedEnvironmentEnv,
+		);
+
+		expect(resolved).toEqual([
+			"FULL_URL=https://api.dev.example.com/v1/endpoint",
+			"API_BASE=https://api.dev.example.com",
+		]);
+	});
+
+	it("throws error for malformed environment variable references", () => {
+		const serviceWithMalformed = `
+MALFORMED1=\${{environment.}}
+MALFORMED2=\${{environment}}
+VALID=\${{environment.NODE_ENV}}
+`;
+
+		// Should throw error for empty variable name after environment.
+		expect(() =>
+			prepareEnvironmentVariables(serviceWithMalformed, "", environmentEnv),
+		).toThrow("Invalid environment variable: environment.");
+	});
+
+	it("handles environment variables with numeric values", () => {
+		const numericEnv = `
+PORT=8080
+TIMEOUT=30
+RETRY_COUNT=3
+PERCENTAGE=99.5
+`;
+
+		const serviceWithNumeric = `
+SERVER_PORT=\${{environment.PORT}}
+REQUEST_TIMEOUT=\${{environment.TIMEOUT}}
+MAX_RETRIES=\${{environment.RETRY_COUNT}}
+SUCCESS_RATE=\${{environment.PERCENTAGE}}
+`;
+
+		const resolved = prepareEnvironmentVariables(
+			serviceWithNumeric,
+			"",
+			numericEnv,
+		);
+
+		expect(resolved).toEqual([
+			"SERVER_PORT=8080",
+			"REQUEST_TIMEOUT=30",
+			"MAX_RETRIES=3",
+			"SUCCESS_RATE=99.5",
+		]);
+	});
+
+	it("handles boolean-like environment variables", () => {
+		const booleanEnv = `
+DEBUG=true
+ENABLED=false
+PRODUCTION=1
+DEVELOPMENT=0
+`;
+
+		const serviceWithBoolean = `
+DEBUG_MODE=\${{environment.DEBUG}}
+FEATURE_ENABLED=\${{environment.ENABLED}}
+IS_PROD=\${{environment.PRODUCTION}}
+IS_DEV=\${{environment.DEVELOPMENT}}
+`;
+
+		const resolved = prepareEnvironmentVariables(
+			serviceWithBoolean,
+			"",
+			booleanEnv,
+		);
+
+		expect(resolved).toEqual([
+			"DEBUG_MODE=true",
+			"FEATURE_ENABLED=false",
+			"IS_PROD=1",
+			"IS_DEV=0",
+		]);
+	});
+});

apps/dokploy/__test__/env/shared.test.ts

@@ -177,3 +177,77 @@ COMPLEX_VAR="'Prefix \"DoubleQuoted\" and \${{project.APP_NAME}}'"
 		]);
 	});
 });
+
+describe("prepareEnvironmentVariables (self references)", () => {
+	it("resolves self references correctly", () => {
+		const serviceEnv = `
+ENVIRONMENT=staging
+DATABASE_URL=postgres://postgres:postgres@localhost:5432/project_db
+SELF_REF=\${{ENVIRONMENT}}
+`;
+
+		const resolved = prepareEnvironmentVariables(serviceEnv, "");
+
+		expect(resolved).toEqual([
+			"ENVIRONMENT=staging",
+			"DATABASE_URL=postgres://postgres:postgres@localhost:5432/project_db",
+			"SELF_REF=staging",
+		]);
+	});
+
+	it("throws on undefined self references", () => {
+		const serviceEnv = `
+MISSING_VAR=\${{UNDEFINED_VAR}}
+`;
+
+		expect(() => prepareEnvironmentVariables(serviceEnv, "")).toThrow(
+			"Invalid service environment variable: UNDEFINED_VAR",
+		);
+	});
+
+	it("allows overriding and still resolving from self", () => {
+		const serviceEnv = `
+ENVIRONMENT=production
+OVERRIDE_ENV=\${{ENVIRONMENT}}
+`;
+
+		const resolved = prepareEnvironmentVariables(serviceEnv, "");
+
+		expect(resolved).toEqual([
+			"ENVIRONMENT=production",
+			"OVERRIDE_ENV=production",
+		]);
+	});
+
+	it("resolves multiple self references inside one value", () => {
+		const serviceEnv = `
+ENVIRONMENT=staging
+APP_NAME=MyApp
+COMPLEX=\${{APP_NAME}}-\${{ENVIRONMENT}}-\${{APP_NAME}}
+`;
+
+		const resolved = prepareEnvironmentVariables(serviceEnv, "");
+
+		expect(resolved).toEqual([
+			"ENVIRONMENT=staging",
+			"APP_NAME=MyApp",
+			"COMPLEX=MyApp-staging-MyApp",
+		]);
+	});
+
+	it("handles quotes with self references", () => {
+		const serviceEnv = `
+ENVIRONMENT=production
+QUOTED="'\${{ENVIRONMENT}}'"
+MIXED="\"Double \${{ENVIRONMENT}}\""
+`;
+
+		const resolved = prepareEnvironmentVariables(serviceEnv, "");
+
+		expect(resolved).toEqual([
+			"ENVIRONMENT=production",
+			"QUOTED='production'",
+			'MIXED="Double production"',
+		]);
+	});
+});

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

@@ -6,6 +6,7 @@ const baseApp: ApplicationNested = {
 	railpackVersion: "0.2.2",
 	rollbackActive: false,
 	applicationId: "",
+	previewLabels: [],
 	herokuVersion: "",
 	giteaRepository: "",
 	giteaOwner: "",
@@ -35,13 +36,22 @@ const baseApp: ApplicationNested = {
 	previewLimit: 0,
 	previewCustomCertResolver: null,
 	previewWildcard: "",
-	project: {
+	environmentId: "",
+	environment: {
 		env: "",
-		organizationId: "",
+		environmentId: "",
 		name: "",
-		description: "",
 		createdAt: "",
+		description: "",
 		projectId: "",
+		project: {
+			env: "",
+			organizationId: "",
+			name: "",
+			description: "",
+			createdAt: "",
+			projectId: "",
+		},
 	},
 	buildPath: "/",
 	gitlabPathNamespace: "",
@@ -84,7 +94,6 @@ const baseApp: ApplicationNested = {
 	password: null,
 	placementSwarm: null,
 	ports: [],
-	projectId: "",
 	publishDirectory: null,
 	isStaticSpa: null,
 	redirects: [],

apps/dokploy/components/dashboard/application/advanced/general/add-command.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 { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -16,11 +21,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 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";
+
 interface Props {
 	applicationId: string;
 }

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Code2, Globe2, HardDrive } 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";
@@ -27,12 +33,6 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Code2, Globe2, HardDrive } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const ImportSchema = z.object({
 	base64: z.string(),

apps/dokploy/components/dashboard/application/advanced/ports/show-port.tsx

@@ -1,3 +1,5 @@
+import { Rss, 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,9 +11,8 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { Rss, Trash2 } from "lucide-react";
-import { toast } from "sonner";
 import { HandlePorts } from "./handle-ports";
+
 interface Props {
 	applicationId: string;
 }

apps/dokploy/components/dashboard/application/advanced/redirects/handle-redirect.tsx

@@ -1,3 +1,9 @@
+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";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -30,12 +36,6 @@ import {
 import { Separator } from "@/components/ui/separator";
 import { Switch } from "@/components/ui/switch";
 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 AddRedirectchema = z.object({
 	regex: z.string().min(1, "Regex required"),

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

@@ -1,3 +1,5 @@
+import { Split, Trash2 } from "lucide-react";
+import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
 import {
@@ -8,8 +10,6 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { Split, Trash2 } from "lucide-react";
-import { toast } from "sonner";
 import { HandleRedirect } from "./handle-redirect";
 
 interface Props {

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

@@ -1,3 +1,9 @@
+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";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -19,12 +25,6 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 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 AddSecuritychema = z.object({
 	username: z.string().min(1, "Username is required"),

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

@@ -1,4 +1,7 @@
+import { LockKeyhole, Trash2 } from "lucide-react";
+import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
+import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -7,12 +10,9 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
-import { LockKeyhole, Trash2 } from "lucide-react";
-import { toast } from "sonner";
 import { HandleSecurity } from "./handle-security";
 
 interface Props {

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { InfoIcon } 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 { Button } from "@/components/ui/button";
 import {
@@ -23,12 +29,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { InfoIcon } from "lucide-react";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const addResourcesSchema = z.object({
 	memoryReservation: z.string().optional(),

apps/dokploy/components/dashboard/application/advanced/traefik/show-traefik-config.tsx

@@ -1,3 +1,4 @@
+import { File, Loader2 } from "lucide-react";
 import { CodeEditor } from "@/components/shared/code-editor";
 import {
 	Card,
@@ -7,8 +8,8 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { File, Loader2 } from "lucide-react";
 import { UpdateTraefikConfig } from "./update-traefik-config";
+
 interface Props {
 	applicationId: string;
 }

apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { parse, stringify, YAMLParseError } from "yaml";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
@@ -19,12 +25,6 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import jsyaml from "js-yaml";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const UpdateTraefikConfigSchema = z.object({
 	traefikConfig: z.string(),
@@ -38,11 +38,11 @@ interface Props {
 
 export const validateAndFormatYAML = (yamlText: string) => {
 	try {
-		const obj = jsyaml.load(yamlText);
-		const formattedYaml = jsyaml.dump(obj, { indent: 4 });
+		const obj = parse(yamlText);
+		const formattedYaml = stringify(obj, { indent: 4 });
 		return { valid: true, formattedYaml, error: null };
 	} catch (error) {
-		if (error instanceof jsyaml.YAMLException) {
+		if (error instanceof YAMLParseError) {
 			return {
 				valid: false,
 				formattedYaml: yamlText,
@@ -89,7 +89,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 		if (!valid) {
 			form.setError("traefikConfig", {
 				type: "manual",
-				message: error || "Invalid YAML",
+				message: (error as string) || "Invalid YAML",
 			});
 			return;
 		}

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

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PlusIcon } from "lucide-react";
+import type React from "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";
@@ -22,13 +29,7 @@ import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { PlusIcon } from "lucide-react";
-import type React from "react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
+
 interface Props {
 	serviceId: string;
 	serviceType:

apps/dokploy/components/dashboard/application/advanced/volumes/update-volume.tsx

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PenBoxIcon } 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";
@@ -20,12 +26,6 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const mountSchema = z.object({
 	mountPath: z.string().min(1, "Mount path required"),

apps/dokploy/components/dashboard/application/deployments/cancel-queues.tsx

@@ -1,3 +1,5 @@
+import { Paintbrush } from "lucide-react";
+import { toast } from "sonner";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -11,8 +13,6 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { api } from "@/utils/api";
-import { Paintbrush } from "lucide-react";
-import { toast } from "sonner";
 
 interface Props {
 	id: string;

apps/dokploy/components/dashboard/application/deployments/refresh-token.tsx

@@ -1,3 +1,5 @@
+import { RefreshCcw } from "lucide-react";
+import { toast } from "sonner";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -10,8 +12,6 @@ import {
 	AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { api } from "@/utils/api";
-import { RefreshCcw } from "lucide-react";
-import { toast } from "sonner";
 
 interface Props {
 	id: string;

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

@@ -1,3 +1,5 @@
+import { Loader2 } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
@@ -7,8 +9,6 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog";
-import { Loader2 } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
 import { TerminalLine } from "../../docker/logs/terminal-line";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
 

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

@@ -1,8 +1,7 @@
+import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-
 import type { RouterOutputs } from "@/utils/api";
-import { useState } from "react";
 import { ShowDeployment } from "../deployments/show-deployment";
 import { ShowDeployments } from "./show-deployments";
 

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

@@ -1,3 +1,7 @@
+import { Clock, Loader2, RefreshCcw, RocketIcon, Settings } from "lucide-react";
+import React, { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { AlertBlock } from "@/components/shared/alert-block";
 import { DateTooltip } from "@/components/shared/date-tooltip";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
@@ -10,10 +14,7 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { type RouterOutputs, api } from "@/utils/api";
-import { Clock, Loader2, RefreshCcw, RocketIcon, Settings } from "lucide-react";
-import React, { useEffect, useState } from "react";
-import { toast } from "sonner";
+import { api, type RouterOutputs } from "@/utils/api";
 import { ShowRollbackSettings } from "../rollbacks/show-rollback-settings";
 import { CancelQueues } from "./cancel-queues";
 import { RefreshToken } from "./refresh-token";
@@ -61,12 +62,48 @@ export const ShowDeployments = ({
 			},
 		);
 
+	const { data: isCloud } = api.settings.isCloud.useQuery();
+
 	const { mutateAsync: rollback, isLoading: isRollingBack } =
 		api.rollback.rollback.useMutation();
 	const { mutateAsync: killProcess, isLoading: isKillingProcess } =
 		api.deployment.killProcess.useMutation();
 
+	// Cancel deployment mutations
+	const {
+		mutateAsync: cancelApplicationDeployment,
+		isLoading: isCancellingApp,
+	} = api.application.cancelDeployment.useMutation();
+	const {
+		mutateAsync: cancelComposeDeployment,
+		isLoading: isCancellingCompose,
+	} = api.compose.cancelDeployment.useMutation();
+
 	const [url, setUrl] = React.useState("");
+
+	// Check for stuck deployment (more than 9 minutes) - only for the most recent deployment
+	const stuckDeployment = useMemo(() => {
+		if (!isCloud || !deployments || deployments.length === 0) return null;
+
+		const now = Date.now();
+		const NINE_MINUTES = 10 * 60 * 1000; // 9 minutes in milliseconds
+
+		// Get the most recent deployment (first in the list since they're sorted by date)
+		const mostRecentDeployment = deployments[0];
+
+		if (
+			!mostRecentDeployment ||
+			mostRecentDeployment.status !== "running" ||
+			!mostRecentDeployment.startedAt
+		) {
+			return null;
+		}
+
+		const startTime = new Date(mostRecentDeployment.startedAt).getTime();
+		const elapsed = now - startTime;
+
+		return elapsed > NINE_MINUTES ? mostRecentDeployment : null;
+	}, [isCloud, deployments]);
 	useEffect(() => {
 		setUrl(document.location.origin);
 	}, []);
@@ -77,7 +114,7 @@ export const ShowDeployments = ({
 				<div className="flex flex-col gap-2">
 					<CardTitle className="text-xl">Deployments</CardTitle>
 					<CardDescription>
-						See all the 10 last deployments for this {type}
+						See the last 10 deployments for this {type}
 					</CardDescription>
 				</div>
 				<div className="flex flex-row items-center gap-2">
@@ -94,6 +131,54 @@ export const ShowDeployments = ({
 				</div>
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
+				{stuckDeployment && (type === "application" || type === "compose") && (
+					<AlertBlock
+						type="warning"
+						className="flex-col items-start w-full p-4"
+					>
+						<div className="flex flex-col gap-3">
+							<div>
+								<div className="font-medium text-sm mb-1">
+									Build appears to be stuck
+								</div>
+								<p className="text-sm">
+									Hey! Looks like the build has been running for more than 10
+									minutes. Would you like to cancel this deployment?
+								</p>
+							</div>
+							<Button
+								variant="destructive"
+								size="sm"
+								className="w-fit"
+								isLoading={
+									type === "application" ? isCancellingApp : isCancellingCompose
+								}
+								onClick={async () => {
+									try {
+										if (type === "application") {
+											await cancelApplicationDeployment({
+												applicationId: id,
+											});
+										} else if (type === "compose") {
+											await cancelComposeDeployment({
+												composeId: id,
+											});
+										}
+										toast.success("Deployment cancellation requested");
+									} catch (error) {
+										toast.error(
+											error instanceof Error
+												? error.message
+												: "Failed to cancel deployment",
+										);
+									}
+								}}
+							>
+								Cancel Deployment
+							</Button>
+						</div>
+					</AlertBlock>
+				)}
 				{refreshToken && (
 					<div className="flex flex-col gap-2 text-sm">
 						<span>
@@ -104,7 +189,9 @@ export const ShowDeployments = ({
 							<span>Webhook URL: </span>
 							<div className="flex flex-row items-center gap-2">
 								<span className="break-all text-muted-foreground">
-									{`${url}/api/deploy${type === "compose" ? "/compose" : ""}/${refreshToken}`}
+									{`${url}/api/deploy${
+										type === "compose" ? "/compose" : ""
+									}/${refreshToken}`}
 								</span>
 								{(type === "application" || type === "compose") && (
 									<RefreshToken id={id} type={type} />

apps/dokploy/components/dashboard/application/domains/dns-helper-modal.tsx

@@ -1,3 +1,5 @@
+import { Copy, HelpCircle, Server } from "lucide-react";
+import { toast } from "sonner";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -8,8 +10,6 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
-import { Copy, HelpCircle, Server } from "lucide-react";
-import { toast } from "sonner";
 
 interface Props {
 	domain: {

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

@@ -1,3 +1,18 @@
+import {
+	CheckCircle2,
+	ExternalLink,
+	GlobeIcon,
+	InfoIcon,
+	Loader2,
+	PenBoxIcon,
+	RefreshCw,
+	Server,
+	Trash2,
+	XCircle,
+} from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -15,21 +30,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import {
-	CheckCircle2,
-	ExternalLink,
-	GlobeIcon,
-	InfoIcon,
-	Loader2,
-	PenBoxIcon,
-	RefreshCw,
-	Server,
-	Trash2,
-	XCircle,
-} from "lucide-react";
-import Link from "next/link";
-import { useState } from "react";
-import { toast } from "sonner";
 import { DnsHelperModal } from "./dns-helper-modal";
 import { AddDomain } from "./handle-domain";
 

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { type CSSProperties, useEffect, useState } 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 {
@@ -16,12 +22,6 @@ import {
 } from "@/components/ui/form";
 import { Toggle } from "@/components/ui/toggle";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { EyeIcon, EyeOffIcon } from "lucide-react";
-import { type CSSProperties, useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import type { ServiceType } from "../advanced/show-resources";
 
 const addEnvironmentSchema = z.object({

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

@@ -1,13 +1,13 @@
-import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
-import { Form } from "@/components/ui/form";
-import { Secrets } from "@/components/ui/secrets";
-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 { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Form } from "@/components/ui/form";
+import { Secrets } from "@/components/ui/secrets";
+import { api } from "@/utils/api";
 
 const addEnvironmentSchema = z.object({
 	env: z.string(),

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

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown, X } 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 { BitbucketIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
@@ -40,13 +47,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, X } 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";
 
 const BitbucketProviderSchema = z.object({
 	buildPath: z.string().min(1, "Path is required").default("/"),

apps/dokploy/components/dashboard/application/general/generic/save-docker-provider.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 { Button } from "@/components/ui/button";
 import {
 	Form,
@@ -9,11 +14,6 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 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";
 
 const DockerProviderSchema = z.object({
 	dockerImage: z.string().min(1, {

apps/dokploy/components/dashboard/application/general/generic/save-drag-n-drop.tsx

@@ -1,3 +1,8 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { TrashIcon } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Dropzone } from "@/components/ui/dropzone";
 import {
@@ -11,11 +16,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { type UploadFile, uploadFileSchema } from "@/utils/schema";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { TrashIcon } from "lucide-react";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
 
 interface Props {
 	applicationId: string;

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

@@ -1,3 +1,13 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { KeyRoundIcon, LockIcon, X } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { GitIcon } from "@/components/icons/data-tools-icons";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Form,
@@ -25,17 +35,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { KeyRoundIcon, LockIcon, X } from "lucide-react";
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-import { GitIcon } from "@/components/icons/data-tools-icons";
-import { Badge } from "@/components/ui/badge";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const GitProviderSchema = z.object({
 	buildPath: z.string().min(1, "Path is required").default("/"),

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

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } 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 { GiteaIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
@@ -40,13 +47,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } 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";
 
 interface GiteaRepository {
 	name: string;

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

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } 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 { GithubIcon } from "@/components/icons/data-tools-icons";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -39,13 +46,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } 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";
 
 const GithubProviderSchema = z.object({
 	buildPath: z.string().min(1, "Path is required").default("/"),

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

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
+import Link from "next/link";
+import { useEffect, useMemo } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { GitlabIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
@@ -40,13 +47,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
-import Link from "next/link";
-import { useEffect, useMemo } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const GitlabProviderSchema = z.object({
 	buildPath: z.string().min(1, "Path is required").default("/"),

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

@@ -1,3 +1,7 @@
+import { GitBranch, Loader2, UploadCloud } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { toast } from "sonner";
 import { SaveDockerProvider } from "@/components/dashboard/application/general/generic/save-docker-provider";
 import { SaveGitProvider } from "@/components/dashboard/application/general/generic/save-git-provider";
 import { SaveGiteaProvider } from "@/components/dashboard/application/general/generic/save-gitea-provider";
@@ -5,18 +9,14 @@ import { SaveGithubProvider } from "@/components/dashboard/application/general/g
 import {
 	BitbucketIcon,
 	DockerIcon,
-	GitIcon,
 	GiteaIcon,
 	GithubIcon,
+	GitIcon,
 	GitlabIcon,
 } from "@/components/icons/data-tools-icons";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { api } from "@/utils/api";
-import { GitBranch, Loader2, UploadCloud } from "lucide-react";
-import Link from "next/link";
-import { useState } from "react";
-import { toast } from "sonner";
 import { SaveBitbucketProvider } from "./save-bitbucket-provider";
 import { SaveDragNDrop } from "./save-drag-n-drop";
 import { SaveGitlabProvider } from "./save-gitlab-provider";

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

@@ -1,8 +1,9 @@
+import { AlertCircle, GitBranch, Unlink } from "lucide-react";
 import {
 	BitbucketIcon,
-	GitIcon,
 	GiteaIcon,
 	GithubIcon,
+	GitIcon,
 	GitlabIcon,
 } from "@/components/icons/data-tools-icons";
 import { DialogAction } from "@/components/shared/dialog-action";
@@ -10,7 +11,6 @@ import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import type { RouterOutputs } from "@/utils/api";
-import { AlertCircle, GitBranch, Unlink } from "lucide-react";
 
 interface Props {
 	service:

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

@@ -1,3 +1,14 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import {
+	Ban,
+	CheckCircle2,
+	Hammer,
+	RefreshCcw,
+	Rocket,
+	Terminal,
+} from "lucide-react";
+import { useRouter } from "next/router";
+import { toast } from "sonner";
 import { ShowBuildChooseForm } from "@/components/dashboard/application/build/show";
 import { ShowProviderForm } from "@/components/dashboard/application/general/generic/show";
 import { DialogAction } from "@/components/shared/dialog-action";
@@ -11,18 +22,8 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import {
-	Ban,
-	CheckCircle2,
-	Hammer,
-	RefreshCcw,
-	Rocket,
-	Terminal,
-} from "lucide-react";
-import { useRouter } from "next/router";
-import { toast } from "sonner";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
+
 interface Props {
 	applicationId: string;
 }
@@ -68,7 +69,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 										toast.success("Application deployed successfully");
 										refetch();
 										router.push(
-											`/dashboard/project/${data?.projectId}/services/application/${applicationId}?tab=deployments`,
+											`/dashboard/project/${data?.environment.projectId}/environment/${data?.environmentId}/services/application/${applicationId}?tab=deployments`,
 										);
 									})
 									.catch(() => {

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

@@ -1,3 +1,6 @@
+import { Loader2 } from "lucide-react";
+import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import {
 	Card,
@@ -18,9 +21,6 @@ import {
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
-import { Loader2 } from "lucide-react";
-import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
 export const DockerLogs = dynamic(
 	() =>
 		import("@/components/dashboard/docker/logs/docker-logs-id").then(

apps/dokploy/components/dashboard/application/preview-deployments/add-preview-domain.tsx

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Dices } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import type z from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -33,15 +39,8 @@ import {
 	TooltipProvider,
 	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 { domain } from "@/server/db/validations/domain";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Dices } from "lucide-react";
-import type z from "zod";
+import { api } from "@/utils/api";
 
 type Domain = z.infer<typeof domain>;
 

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

@@ -1,3 +1,13 @@
+import {
+	ExternalLink,
+	FileText,
+	GitPullRequest,
+	Loader2,
+	PenSquare,
+	RocketIcon,
+	Trash2,
+} from "lucide-react";
+import { toast } from "sonner";
 import { GithubIcon } from "@/components/icons/data-tools-icons";
 import { DateTooltip } from "@/components/shared/date-tooltip";
 import { DialogAction } from "@/components/shared/dialog-action";
@@ -13,16 +23,6 @@ import {
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import {
-	ExternalLink,
-	FileText,
-	GitPullRequest,
-	Loader2,
-	PenSquare,
-	RocketIcon,
-	Trash2,
-} from "lucide-react";
-import { toast } from "sonner";
 import { ShowModalLogs } from "../../settings/web-server/show-modal-logs";
 import { ShowDeploymentsModal } from "../deployments/show-deployments-modal";
 import { AddPreviewDomain } from "./add-preview-domain";

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

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { HelpCircle, Plus, Settings2, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -27,13 +34,13 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Settings2 } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const schema = z
 	.object({
@@ -42,6 +49,7 @@ const schema = z
 		wildcardDomain: z.string(),
 		port: z.number(),
 		previewLimit: z.number(),
+		previewLabels: z.array(z.string()).optional(),
 		previewHttps: z.boolean(),
 		previewPath: z.string(),
 		previewCertificateType: z.enum(["letsencrypt", "none", "custom"]),
@@ -81,6 +89,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 			wildcardDomain: "*.traefik.me",
 			port: 3000,
 			previewLimit: 3,
+			previewLabels: [],
 			previewHttps: false,
 			previewPath: "/",
 			previewCertificateType: "none",
@@ -102,6 +111,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 				buildArgs: data.previewBuildArgs || "",
 				wildcardDomain: data.previewWildcard || "*.traefik.me",
 				port: data.previewPort || 3000,
+				previewLabels: data.previewLabels || [],
 				previewLimit: data.previewLimit || 3,
 				previewHttps: data.previewHttps || false,
 				previewPath: data.previewPath || "/",
@@ -119,6 +129,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 			previewBuildArgs: formData.buildArgs,
 			previewWildcard: formData.wildcardDomain,
 			previewPort: formData.port,
+			previewLabels: formData.previewLabels,
 			applicationId,
 			previewLimit: formData.previewLimit,
 			previewHttps: formData.previewHttps,
@@ -200,6 +211,90 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 											</FormItem>
 										)}
 									/>
+									<FormField
+										control={form.control}
+										name="previewLabels"
+										render={({ field }) => (
+											<FormItem className="md:col-span-2">
+												<div className="flex items-center gap-2">
+													<FormLabel>Preview Labels</FormLabel>
+													<TooltipProvider>
+														<Tooltip>
+															<TooltipTrigger asChild>
+																<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+															</TooltipTrigger>
+															<TooltipContent>
+																<p>
+																	Add a labels that will trigger a preview
+																	deployment for a pull request. If no labels
+																	are specified, all pull requests will trigger
+																	a preview deployment.
+																</p>
+															</TooltipContent>
+														</Tooltip>
+													</TooltipProvider>
+												</div>
+												<div className="flex flex-wrap gap-2 mb-2">
+													{field.value?.map((label, index) => (
+														<Badge
+															key={index}
+															variant="secondary"
+															className="flex items-center gap-1"
+														>
+															{label}
+															<X
+																className="size-3 cursor-pointer hover:text-destructive"
+																onClick={() => {
+																	const newLabels = [...(field.value || [])];
+																	newLabels.splice(index, 1);
+																	field.onChange(newLabels);
+																}}
+															/>
+														</Badge>
+													))}
+												</div>
+												<div className="flex gap-2">
+													<FormControl>
+														<Input
+															placeholder="Enter a label (e.g. enhancements, needs-review)"
+															onKeyDown={(e) => {
+																if (e.key === "Enter") {
+																	e.preventDefault();
+																	const input = e.currentTarget;
+																	const label = input.value.trim();
+																	if (label) {
+																		field.onChange([
+																			...(field.value || []),
+																			label,
+																		]);
+																		input.value = "";
+																	}
+																}
+															}}
+														/>
+													</FormControl>
+													<Button
+														type="button"
+														variant="outline"
+														size="icon"
+														onClick={() => {
+															const input = document.querySelector(
+																'input[placeholder*="Enter a label"]',
+															) as HTMLInputElement;
+															const label = input.value.trim();
+															if (label) {
+																field.onChange([...(field.value || []), label]);
+																input.value = "";
+															}
+														}}
+													>
+														<Plus className="size-4" />
+													</Button>
+												</div>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
 									<FormField
 										control={form.control}
 										name="previewLimit"

apps/dokploy/components/dashboard/application/rollbacks/show-rollback-settings.tsx

@@ -1,3 +1,8 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { 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 {
@@ -18,11 +23,6 @@ import {
 } from "@/components/ui/form";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const formSchema = z.object({
 	rollbackActive: z.boolean(),

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

@@ -1,3 +1,15 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+	DatabaseZap,
+	Info,
+	PenBoxIcon,
+	PlusCircle,
+	RefreshCw,
+} 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";
@@ -35,18 +47,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import {
-	DatabaseZap,
-	Info,
-	PenBoxIcon,
-	PlusCircle,
-	RefreshCw,
-} from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import type { CacheType } from "../domains/handle-domain";
 
 export const commonCronExpressions = [

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

@@ -1,3 +1,12 @@
+import {
+	ClipboardList,
+	Clock,
+	Loader2,
+	Play,
+	Terminal,
+	Trash2,
+} from "lucide-react";
+import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -15,15 +24,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import {
-	ClipboardList,
-	Clock,
-	Loader2,
-	Play,
-	Terminal,
-	Trash2,
-} from "lucide-react";
-import { toast } from "sonner";
 import { ShowDeploymentsModal } from "../deployments/show-deployments-modal";
 import { HandleSchedules } from "./handle-schedules";
 
@@ -58,7 +58,7 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
 	return (
 		<Card className="border px-6 shadow-none bg-transparent h-full min-h-[50vh]">
 			<CardHeader className="px-0">
-				<div className="flex justify-between items-center">
+				<div className="flex justify-between items-center gap-y-2 flex-wrap">
 					<div className="flex flex-col gap-2">
 						<CardTitle className="text-xl font-bold flex items-center gap-2">
 							Scheduled Tasks
@@ -91,15 +91,15 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
 							return (
 								<div
 									key={schedule.scheduleId}
-									className="flex items-center justify-between rounded-lg border p-3 transition-colors bg-muted/50"
+									className="flex items-center flex-wrap sm:flex-nowrap gap-y-2 justify-between rounded-lg border p-3 transition-colors bg-muted/50"
 								>
 									<div className="flex items-start gap-3">
-										<div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/5">
+										<div className="flex flex-shrink-0 h-9 w-9 items-center justify-center rounded-full bg-primary/5">
 											<Clock className="size-4 text-primary/70" />
 										</div>
 										<div className="space-y-1.5">
-											<div className="flex items-center gap-2">
-												<h3 className="text-sm font-medium leading-none">
+											<div className="flex items-center gap-2 flex-wrap">
+												<h3 className="text-sm font-medium leading-none [overflow-wrap:anywhere] line-clamp-3">
 													{schedule.name}
 												</h3>
 												<Badge
@@ -109,7 +109,7 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
 													{schedule.enabled ? "Enabled" : "Disabled"}
 												</Badge>
 											</div>
-											<div className="flex items-center gap-2 text-sm text-muted-foreground">
+											<div className="flex items-center gap-2 text-sm text-muted-foreground flex-wrap">
 												<Badge
 													variant="outline"
 													className="font-mono text-[10px] bg-transparent"
@@ -142,7 +142,7 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
 										</div>
 									</div>
 
-									<div className="flex items-center gap-1.5">
+									<div className="flex items-center gap-0.5 md:gap-1.5">
 										<ShowDeploymentsModal
 											id={schedule.scheduleId}
 											type="schedule"
@@ -226,7 +226,7 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
 						})}
 					</div>
 				) : (
-					<div className="flex flex-col gap-2 items-center justify-center py-12  rounded-lg">
+					<div className="flex flex-col gap-2 items-center justify-center py-12 rounded-lg">
 						<Clock className="size-8 mb-4 text-muted-foreground" />
 						<p className="text-lg font-medium text-muted-foreground">
 							No scheduled tasks

apps/dokploy/components/dashboard/application/update-application.tsx

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PenBoxIcon } 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 { Button } from "@/components/ui/button";
 import {
@@ -20,12 +26,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const updateApplicationSchema = z.object({
 	name: z.string().min(1, {

apps/dokploy/components/dashboard/application/volume-backups/handle-volume-backups.tsx

@@ -1,3 +1,15 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+	DatabaseZap,
+	Info,
+	PenBoxIcon,
+	PlusCircle,
+	RefreshCw,
+} 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 { Button } from "@/components/ui/button";
 import {
@@ -34,18 +46,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import {
-	DatabaseZap,
-	Info,
-	PenBoxIcon,
-	PlusCircle,
-	RefreshCw,
-} from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import type { CacheType } from "../domains/handle-domain";
 import { commonCronExpressions } from "../schedules/handle-schedules";
 
@@ -55,7 +55,12 @@ const formSchema = z
 		cronExpression: z.string().min(1, "Cron expression is required"),
 		volumeName: z.string().min(1, "Volume name is required"),
 		prefix: z.string(),
-		// keepLatestCount: z.coerce.number().optional(),
+		keepLatestCount: z.coerce
+			.number()
+			.int()
+			.gte(1, "Must be at least 1")
+			.optional()
+			.nullable(),
 		turnOff: z.boolean().default(false),
 		enabled: z.boolean().default(true),
 		serviceType: z.enum([
@@ -108,6 +113,7 @@ export const HandleVolumeBackups = ({
 }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const [cacheType, setCacheType] = useState<CacheType>("cache");
+	const [keepLatestCountInput, setKeepLatestCountInput] = useState("");
 
 	const utils = api.useUtils();
 	const form = useForm<z.infer<typeof formSchema>>({
@@ -117,7 +123,7 @@ export const HandleVolumeBackups = ({
 			cronExpression: "",
 			volumeName: "",
 			prefix: "",
-			// keepLatestCount: undefined,
+			keepLatestCount: undefined,
 			turnOff: false,
 			enabled: true,
 			serviceName: "",
@@ -173,13 +179,19 @@ export const HandleVolumeBackups = ({
 				cronExpression: volumeBackup.cronExpression,
 				volumeName: volumeBackup.volumeName || "",
 				prefix: volumeBackup.prefix,
-				// keepLatestCount: volumeBackup.keepLatestCount || undefined,
+				keepLatestCount: volumeBackup.keepLatestCount || undefined,
 				turnOff: volumeBackup.turnOff,
 				enabled: volumeBackup.enabled || false,
 				serviceName: volumeBackup.serviceName || "",
 				destinationId: volumeBackup.destinationId,
 				serviceType: volumeBackup.serviceType,
 			});
+			setKeepLatestCountInput(
+				volumeBackup.keepLatestCount !== null &&
+					volumeBackup.keepLatestCount !== undefined
+					? String(volumeBackup.keepLatestCount)
+					: "",
+			);
 		}
 	}, [form, volumeBackup, volumeBackupId]);
 
@@ -190,8 +202,12 @@ export const HandleVolumeBackups = ({
 	const onSubmit = async (values: z.infer<typeof formSchema>) => {
 		if (!id && !volumeBackupId) return;
 
+		const preparedKeepLatestCount =
+			keepLatestCountInput === "" ? null : (values.keepLatestCount ?? null);
+
 		await mutateAsync({
 			...values,
+			keepLatestCount: preparedKeepLatestCount,
 			destinationId: values.destinationId,
 			volumeBackupId: volumeBackupId || "",
 			serviceType: volumeBackupType,
@@ -257,9 +273,8 @@ export const HandleVolumeBackups = ({
 			</DialogTrigger>
 			<DialogContent
 				className={cn(
-					"overflow-y-auto",
 					volumeBackupType === "compose" || volumeBackupType === "application"
-						? "max-h-[95vh] sm:max-w-2xl"
+						? "sm:max-w-2xl"
 						: " sm:max-w-lg",
 				)}
 			>
@@ -600,29 +615,38 @@ export const HandleVolumeBackups = ({
 							)}
 						/>
 
-						{/* <FormField
+						<FormField
 							control={form.control}
 							name="keepLatestCount"
 							render={({ field }) => (
 								<FormItem>
-									<FormLabel>Keep Latest Count</FormLabel>
+									<FormLabel>Keep Latest Backups</FormLabel>
 									<FormControl>
 										<Input
-											type="number"
-											placeholder="5"
 											{...field}
-											onChange={(e) =>
-												field.onChange(Number(e.target.value) || undefined)
-											}
+											type="number"
+											min={1}
+											autoComplete="off"
+											placeholder="Leave empty to keep all"
+											value={keepLatestCountInput}
+											onChange={(e) => {
+												const raw = e.target.value;
+												setKeepLatestCountInput(raw);
+												if (raw === "") {
+													field.onChange(undefined);
+												} else if (/^\d+$/.test(raw)) {
+													field.onChange(Number(raw));
+												}
+											}}
 										/>
 									</FormControl>
 									<FormDescription>
-										Number of backup files to keep (optional)
+										How many recent backups to keep. Empty means no cleanup.
 									</FormDescription>
 									<FormMessage />
 								</FormItem>
 							)}
-						/> */}
+						/>
 
 						<FormField
 							control={form.control}

apps/dokploy/components/dashboard/application/volume-backups/restore-volume-backups.tsx

@@ -1,3 +1,11 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import copy from "copy-to-clipboard";
+import { debounce } from "lodash";
+import { CheckIcon, ChevronsUpDown, Copy, RotateCcw } from "lucide-react";
+import { 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 { DrawerLogs } from "@/components/shared/drawer-logs";
 import { Badge } from "@/components/ui/badge";
@@ -35,14 +43,6 @@ import {
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import copy from "copy-to-clipboard";
-import { debounce } from "lodash";
-import { CheckIcon, ChevronsUpDown, Copy, RotateCcw } from "lucide-react";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import { formatBytes } from "../../database/backups/restore-backup";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
 

apps/dokploy/components/dashboard/application/volume-backups/show-volume-backups.tsx

@@ -1,3 +1,11 @@
+import {
+	ClipboardList,
+	DatabaseBackup,
+	Loader2,
+	Play,
+	Trash2,
+} from "lucide-react";
+import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -15,14 +23,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import {
-	ClipboardList,
-	DatabaseBackup,
-	Loader2,
-	Play,
-	Trash2,
-} from "lucide-react";
-import { toast } from "sonner";
 import { ShowDeploymentsModal } from "../deployments/show-deployments-modal";
 import { HandleVolumeBackups } from "./handle-volume-backups";
 import { RestoreVolumeBackups } from "./restore-volume-backups";

apps/dokploy/components/dashboard/compose/advanced/add-command.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 { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -18,11 +23,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 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";
+
 interface Props {
 	composeId: string;
 }

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/delete-service.tsx

@@ -1,3 +1,13 @@
+import type { ServiceType } from "@dokploy/server/db/schema";
+import { zodResolver } from "@hookform/resolvers/zod";
+import copy from "copy-to-clipboard";
+import { Copy, Trash2 } from "lucide-react";
+import { useRouter } from "next/router";
+import { 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 { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -20,15 +30,6 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import type { ServiceType } from "@dokploy/server/db/schema";
-import { zodResolver } from "@hookform/resolvers/zod";
-import copy from "copy-to-clipboard";
-import { Copy, Trash2 } from "lucide-react";
-import { useRouter } from "next/router";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const deleteComposeSchema = z.object({
 	projectName: z.string().min(1, {
@@ -100,7 +101,9 @@ export const DeleteService = ({ id, type }: Props) => {
 				deleteVolumes,
 			})
 				.then((result) => {
-					push(`/dashboard/project/${result?.projectId}`);
+					push(
+						`/dashboard/project/${result?.environment?.projectId}/environment/${result?.environment?.environmentId}`,
+					);
 					toast.success("deleted successfully");
 					setIsOpen(false);
 				})
@@ -114,6 +117,12 @@ export const DeleteService = ({ id, type }: Props) => {
 		}
 	};
 
+	const isDisabled =
+		(data &&
+			"applicationStatus" in data &&
+			data?.applicationStatus === "running") ||
+		(data && "composeStatus" in data && data?.composeStatus === "running");
+
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
@@ -202,6 +211,12 @@ export const DeleteService = ({ id, type }: Props) => {
 						</form>
 					</Form>
 				</div>
+				{isDisabled && (
+					<AlertBlock type="warning" className="w-full mt-5">
+						Cannot delete the service while it is running. Please wait for the
+						build to finish and then try again.
+					</AlertBlock>
+				)}
 				<DialogFooter>
 					<Button
 						variant="secondary"
@@ -211,8 +226,10 @@ export const DeleteService = ({ id, type }: Props) => {
 					>
 						Cancel
 					</Button>
+
 					<Button
 						isLoading={isLoading}
+						disabled={isDisabled}
 						form="hook-form-delete-compose"
 						type="submit"
 						variant="destructive"

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

@@ -1,3 +1,7 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
+import { useRouter } from "next/router";
+import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
@@ -8,10 +12,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
-import { useRouter } from "next/router";
-import { toast } from "sonner";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
 
 interface Props {
@@ -47,7 +47,7 @@ export const ComposeActions = ({ composeId }: Props) => {
 								toast.success("Compose deployed successfully");
 								refetch();
 								router.push(
-									`/dashboard/project/${data?.project.projectId}/services/compose/${composeId}?tab=deployments`,
+									`/dashboard/project/${data?.environment.projectId}/environment/${data?.environmentId}/services/compose/${composeId}?tab=deployments`,
 								);
 							})
 							.catch(() => {

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" />
 					<Button
 						type="submit"
 						form="hook-form-save-compose-file"

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

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown, X } 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 { BitbucketIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
@@ -40,13 +47,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, X } 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";
 
 const BitbucketProviderSchema = z.object({
 	composePath: z.string().min(1),

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

@@ -1,3 +1,11 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { KeyRoundIcon, LockIcon, X } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { GitIcon } from "@/components/icons/data-tools-icons";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -27,14 +35,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { KeyRoundIcon, LockIcon, X } from "lucide-react";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const GitProviderSchema = z.object({
 	composePath: z.string().min(1),

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

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown, Plus, X } 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 { GiteaIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
@@ -41,13 +48,6 @@ import {
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import type { Repository } from "@/utils/gitea-utils";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, Plus, X } 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";
 
 const GiteaProviderSchema = z.object({
 	composePath: z.string().min(1),

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

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown, HelpCircle, X } 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 { GithubIcon } from "@/components/icons/data-tools-icons";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -39,13 +46,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, HelpCircle, X } 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";
 
 const GithubProviderSchema = z.object({
 	composePath: z.string().min(1),

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

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown, X } 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 { GitlabIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
@@ -40,13 +47,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, X } 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";
 
 const GitlabProviderSchema = z.object({
 	composePath: z.string().min(1),

apps/dokploy/components/dashboard/compose/general/generic/show.tsx

@@ -1,18 +1,18 @@
+import { CodeIcon, GitBranch, Loader2 } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { toast } from "sonner";
 import { UnauthorizedGitProvider } from "@/components/dashboard/application/general/generic/unauthorized-git-provider";
 import {
 	BitbucketIcon,
-	GitIcon,
 	GiteaIcon,
 	GithubIcon,
+	GitIcon,
 	GitlabIcon,
 } from "@/components/icons/data-tools-icons";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { api } from "@/utils/api";
-import { CodeIcon, GitBranch, Loader2 } from "lucide-react";
-import Link from "next/link";
-import { useState } from "react";
-import { toast } from "sonner";
 import { ComposeFileEditor } from "../compose-file-editor";
 import { ShowConvertedCompose } from "../show-converted-compose";
 import { SaveBitbucketProviderCompose } from "./save-bitbucket-provider-compose";

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/randomize-compose.tsx

@@ -1,3 +1,9 @@
+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";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
@@ -18,12 +24,6 @@ import {
 import { Input } from "@/components/ui/input";
 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;

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

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

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/compose/general/show.tsx

@@ -9,6 +9,7 @@ import {
 import { api } from "@/utils/api";
 import { ComposeActions } from "./actions";
 import { ShowProviderFormCompose } from "./generic/show";
+
 interface Props {
 	composeId: string;
 }

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

@@ -1,3 +1,6 @@
+import { Loader2 } from "lucide-react";
+import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
 import { badgeStateColor } from "@/components/dashboard/application/logs/show";
 import { Badge } from "@/components/ui/badge";
 import {
@@ -19,9 +22,6 @@ import {
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
-import { Loader2 } from "lucide-react";
-import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
 export const DockerLogs = dynamic(
 	() =>
 		import("@/components/dashboard/docker/logs/docker-logs-id").then(

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

@@ -1,3 +1,6 @@
+import { Loader2 } from "lucide-react";
+import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
 import { badgeStateColor } from "@/components/dashboard/application/logs/show";
 import { Badge } from "@/components/ui/badge";
 import {
@@ -18,9 +21,6 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
-import { Loader2 } from "lucide-react";
-import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
 export const DockerLogs = dynamic(
 	() =>
 		import("@/components/dashboard/docker/logs/docker-logs-id").then(

apps/dokploy/components/dashboard/compose/update-compose.tsx

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PenBoxIcon } 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 { Button } from "@/components/ui/button";
 import {
@@ -20,12 +26,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const updateComposeSchema = z.object({
 	name: z.string().min(1, {

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

@@ -1,3 +1,17 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+	CheckIcon,
+	ChevronsUpDown,
+	DatabaseZap,
+	Info,
+	PenBoxIcon,
+	PlusIcon,
+	RefreshCw,
+} 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 { Button } from "@/components/ui/button";
 import {
@@ -48,19 +62,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import {
-	DatabaseZap,
-	Info,
-	PenBoxIcon,
-	PlusIcon,
-	RefreshCw,
-} from "lucide-react";
-import { CheckIcon, ChevronsUpDown } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import { commonCronExpressions } from "../../application/schedules/handle-schedules";
 
 type CacheType = "cache" | "fetch";

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

@@ -1,3 +1,18 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import copy from "copy-to-clipboard";
+import { debounce } from "lodash";
+import {
+	CheckIcon,
+	ChevronsUpDown,
+	Copy,
+	DatabaseZap,
+	RefreshCw,
+	RotateCcw,
+} from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { DrawerLogs } from "@/components/shared/drawer-logs";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -47,21 +62,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import copy from "copy-to-clipboard";
-import { debounce } from "lodash";
-import {
-	CheckIcon,
-	ChevronsUpDown,
-	Copy,
-	DatabaseZap,
-	RefreshCw,
-	RotateCcw,
-} from "lucide-react";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import type { ServiceType } from "../../application/advanced/show-resources";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
 

apps/dokploy/components/dashboard/database/backups/show-backups.tsx

@@ -1,3 +1,13 @@
+import {
+	ClipboardList,
+	Database,
+	DatabaseBackup,
+	Play,
+	Trash2,
+} from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { toast } from "sonner";
 import {
 	MariadbIcon,
 	MongodbIcon,
@@ -22,16 +32,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import {
-	ClipboardList,
-	Database,
-	DatabaseBackup,
-	Play,
-	Trash2,
-} from "lucide-react";
-import Link from "next/link";
-import { useState } from "react";
-import { toast } from "sonner";
 import type { ServiceType } from "../../application/advanced/show-resources";
 import { ShowDeploymentsModal } from "../../application/deployments/show-deployments-modal";
 import { HandleBackup } from "./handle-backup";

apps/dokploy/components/dashboard/docker/logs/line-count-filter.tsx

@@ -1,3 +1,7 @@
+import { Command as CommandPrimitive } from "cmdk";
+import { debounce } from "lodash";
+import { CheckIcon, Hash } from "lucide-react";
+import React, { useCallback, useRef } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -7,10 +11,6 @@ import {
 } from "@/components/ui/popover";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
-import { Command as CommandPrimitive } from "cmdk";
-import { debounce } from "lodash";
-import { CheckIcon, Hash } from "lucide-react";
-import React, { useCallback, useRef } from "react";
 
 const lineCountOptions = [
 	{ label: "100 lines", value: 100 },

apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx

@@ -1,3 +1,5 @@
+import dynamic from "next/dynamic";
+import type React from "react";
 import {
 	Dialog,
 	DialogContent,
@@ -7,8 +9,6 @@ import {
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import dynamic from "next/dynamic";
-import type React from "react";
 export const DockerLogsId = dynamic(
 	() =>
 		import("@/components/dashboard/docker/logs/docker-logs-id").then(