Merge 9ca86410b2 into 853ca33659

2026-09-12 19:51:00 +05:00 · 2026-09-11 13:11:52 -04:00 · 2026-09-11 13:11:52 -04:00 · d916db5ac7
commit d916db5ac7
parent 853ca33659 9ca86410b2
6 changed files with 768 additions and 36 deletions
--- a/apps/dokploy/test/patches/patch-diff.test.ts
+++ b/apps/dokploy/test/patches/patch-diff.test.ts
@ -0,0 +1,79 @@
+import { describe, expect, it } from "vitest";
+import { buildDiffHunks } from "@/lib/patch-diff";
+
+describe("buildDiffHunks", () => {
+	it("marks inserted lines", () => {
+		const hunks = buildDiffHunks("a\nb", "a\nb\nc");
+
+		expect(hunks).toEqual([
+			{
+				type: "equal",
+				originalStart: 0,
+				currentStart: 0,
+				originalLines: ["a", "b"],
+				currentLines: ["a", "b"],
+			},
+			{
+				type: "insert",
+				originalStart: 2,
+				currentStart: 2,
+				currentLines: ["c"],
+			},
+		]);
+	});
+
+	it("marks deleted lines", () => {
+		const hunks = buildDiffHunks("a\nb\nc", "a\nc");
+
+		expect(hunks).toEqual([
+			{
+				type: "equal",
+				originalStart: 0,
+				currentStart: 0,
+				originalLines: ["a"],
+				currentLines: ["a"],
+			},
+			{
+				type: "delete",
+				originalStart: 1,
+				currentStart: 1,
+				originalLines: ["b"],
+			},
+			{
+				type: "equal",
+				originalStart: 2,
+				currentStart: 1,
+				originalLines: ["c"],
+				currentLines: ["c"],
+			},
+		]);
+	});
+
+	it("coalesces replaced blocks", () => {
+		const hunks = buildDiffHunks("a\nb\nc", "a\nx\ny\nc");
+
+		expect(hunks).toEqual([
+			{
+				type: "equal",
+				originalStart: 0,
+				currentStart: 0,
+				originalLines: ["a"],
+				currentLines: ["a"],
+			},
+			{
+				type: "replace",
+				originalStart: 1,
+				currentStart: 1,
+				originalLines: ["b"],
+				currentLines: ["x", "y"],
+			},
+			{
+				type: "equal",
+				originalStart: 2,
+				currentStart: 3,
+				originalLines: ["c"],
+				currentLines: ["c"],
+			},
+		]);
+	});
+});
--- a/apps/dokploy/components/dashboard/application/patches/edit-patch-dialog.tsx
+++ b/apps/dokploy/components/dashboard/application/patches/edit-patch-dialog.tsx
@ -1,7 +1,6 @@
 import { Loader2, Pencil } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
-import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@ -13,7 +12,15 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 import { api } from "@/utils/api";
+import { PatchDiffEditor, type PatchViewMode } from "./patch-diff-editor";

 interface Props {
 	patchId: string;
@ -33,12 +40,26 @@ export const EditPatchDialog = ({
 		{ enabled: !!patchId },
 	);
 	const [content, setContent] = useState("");
+	const [viewMode, setViewMode] = useState<PatchViewMode>("editor");
+	const { data: patchFile, isPending: isPatchFileLoading } =
+		api.patch.readRepoFile.useQuery(
+			{
+				id: entityId,
+				type,
+				filePath: patch?.filePath || "",
+			},
+			{ enabled: !!patch?.filePath },
+		);

 	useEffect(() => {
-		if (patch) {
-			setContent(patch.content);
+		if (patchFile) {
+			setContent(patchFile.patchedContent);
 		}
-	}, [patch]);
+	}, [patchFile]);
+
+	useEffect(() => {
+		setViewMode("editor");
+	}, [patchId]);

 	const utils = api.useUtils();
 	const updatePatch = api.patch.update.useMutation();
@ -65,26 +86,42 @@ export const EditPatchDialog = ({
 			</DialogTrigger>
 			<DialogContent className="sm:max-w-4xl max-h-[85vh] flex flex-col p-0">
 				<DialogHeader className="px-6 pt-6 pb-4">
-					<DialogTitle>Edit Patch</DialogTitle>
+					<div className="flex items-center justify-between gap-4">
+						<DialogTitle>Edit Patch</DialogTitle>
+						<Select
+							value={viewMode}
+							onValueChange={(value) => setViewMode(value as PatchViewMode)}
+						>
+							<SelectTrigger className="w-[170px]">
+								<SelectValue />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value="editor">Editor</SelectItem>
+								<SelectItem value="diff">Diff mode</SelectItem>
+							</SelectContent>
+						</Select>
+					</div>
 					<DialogDescription>
 						{patch ? `Editing: ${patch.filePath}` : "Loading patch..."}
 					</DialogDescription>
 				</DialogHeader>
-				{isPatchLoading ? (
+				{isPatchLoading || isPatchFileLoading ? (
 					<div className="flex flex-1 items-center justify-center px-6 py-12">
 						<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
 					</div>
-				) : (
+				) : patch && patchFile ? (
 					<div className="flex-1 min-h-0 px-6 overflow-hidden flex flex-col">
-						<CodeEditor
+						<PatchDiffEditor
+							filePath={patch.filePath}
+							originalContent={patchFile.originalContent}
 							value={content}
-							onChange={(value) => setContent(value ?? "")}
-							className="h-[400px] w-full"
-							wrapperClassName="h-[400px]"
-							lineWrapping
+							onChange={setContent}
+							patchType={patch.type}
+							mode={viewMode}
+							className="h-[400px]"
 						/>
 					</div>
-				)}
+				) : null}
 				<DialogFooter className="px-6 ">
 					<DialogClose asChild>
 						<Button variant="outline">Cancel</Button>
--- a/apps/dokploy/components/dashboard/application/patches/patch-diff-editor.tsx
+++ b/apps/dokploy/components/dashboard/application/patches/patch-diff-editor.tsx
@ -0,0 +1,265 @@
+import { SplitSquareVertical } from "lucide-react";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { buildDiffHunks, type DiffHunk } from "@/lib/patch-diff";
+import { cn } from "@/lib/utils";
+
+type PatchType = "create" | "update" | "delete";
+export type PatchViewMode = "editor" | "diff";
+type DiffViewMode = "unified" | "split";
+
+interface Props {
+	filePath: string;
+	originalContent: string;
+	value: string;
+	onChange: (value: string) => void;
+	patchType: PatchType;
+	mode: PatchViewMode;
+	readOnly?: boolean;
+	className?: string;
+}
+
+const inferLanguage = (filePath: string) => {
+	if (filePath.endsWith(".json")) return "json" as const;
+	if (filePath.endsWith(".css")) return "css" as const;
+	if (filePath.endsWith(".properties")) return "properties" as const;
+	if (
+		filePath.endsWith(".sh") ||
+		filePath.endsWith(".bash") ||
+		filePath.endsWith(".zsh")
+	) {
+		return "shell" as const;
+	}
+	return "yaml" as const;
+};
+
+const renderCodeLines = (content: string, className?: string) => {
+	const lines = content.split("\n");
+	return (
+		<div className={cn("font-mono text-xs leading-6", className)}>
+			{lines.map((line, index) => (
+				<div
+					key={`${index + 1}-${line}`}
+					className="grid grid-cols-[48px_1fr] border-b border-border/50"
+				>
+					<span className="px-3 py-0.5 text-right text-muted-foreground select-none">
+						{index + 1}
+					</span>
+					<pre className="overflow-x-auto px-3 py-0.5 whitespace-pre-wrap break-words">
+						{line || " "}
+					</pre>
+				</div>
+			))}
+		</div>
+	);
+};
+
+const renderUnifiedDiff = (hunks: DiffHunk[]) => {
+	let originalLine = 1;
+	let currentLine = 1;
+
+	return (
+		<div className="font-mono text-xs leading-6">
+			{hunks.flatMap((hunk, hunkIndex) => {
+				if (hunk.type === "equal") {
+					return hunk.currentLines.map((line, lineIndex) => {
+						const row = (
+							<div
+								key={`equal-${hunkIndex}-${lineIndex}`}
+								className="grid grid-cols-[48px_48px_1fr] border-b border-border/40"
+							>
+								<span className="px-2 py-0.5 text-right text-muted-foreground select-none">
+									{originalLine++}
+								</span>
+								<span className="px-2 py-0.5 text-right text-muted-foreground select-none">
+									{currentLine++}
+								</span>
+								<pre className="overflow-x-auto px-3 py-0.5 whitespace-pre-wrap break-words">
+									{line || " "}
+								</pre>
+							</div>
+						);
+						return row;
+					});
+				}
+
+				if (hunk.type === "delete") {
+					return hunk.originalLines.map((line, lineIndex) => (
+						<div
+							key={`delete-${hunkIndex}-${lineIndex}`}
+							className="grid grid-cols-[48px_48px_1fr] border-b border-red-200 bg-red-50/70 text-red-900 dark:border-red-950 dark:bg-red-950/30 dark:text-red-100"
+						>
+							<span className="px-2 py-0.5 text-right text-red-700/80 select-none dark:text-red-200/80">
+								{originalLine++}
+							</span>
+							<span className="px-2 py-0.5 text-right text-red-700/80 select-none dark:text-red-200/80">
+								-
+							</span>
+							<pre className="overflow-x-auto px-3 py-0.5 whitespace-pre-wrap break-words line-through">
+								- {line || " "}
+							</pre>
+						</div>
+					));
+				}
+
+				if (hunk.type === "insert") {
+					return hunk.currentLines.map((line, lineIndex) => (
+						<div
+							key={`insert-${hunkIndex}-${lineIndex}`}
+							className="grid grid-cols-[48px_48px_1fr] border-b border-emerald-200 bg-emerald-50/70 text-emerald-900 dark:border-emerald-950 dark:bg-emerald-950/30 dark:text-emerald-100"
+						>
+							<span className="px-2 py-0.5 text-right text-emerald-700/80 select-none dark:text-emerald-200/80">
+								+
+							</span>
+							<span className="px-2 py-0.5 text-right text-emerald-700/80 select-none dark:text-emerald-200/80">
+								{currentLine++}
+							</span>
+							<pre className="overflow-x-auto px-3 py-0.5 whitespace-pre-wrap break-words">
+								+ {line || " "}
+							</pre>
+						</div>
+					));
+				}
+
+				const removedRows = hunk.originalLines.map((line, lineIndex) => (
+					<div
+						key={`replace-old-${hunkIndex}-${lineIndex}`}
+						className="grid grid-cols-[48px_48px_1fr] border-b border-red-200 bg-red-50/70 text-red-900 dark:border-red-950 dark:bg-red-950/30 dark:text-red-100"
+					>
+						<span className="px-2 py-0.5 text-right text-red-700/80 select-none dark:text-red-200/80">
+							{originalLine++}
+						</span>
+						<span className="px-2 py-0.5 text-right text-red-700/80 select-none dark:text-red-200/80">
+							-
+						</span>
+						<pre className="overflow-x-auto px-3 py-0.5 whitespace-pre-wrap break-words line-through">
+							- {line || " "}
+						</pre>
+					</div>
+				));
+				const addedRows = hunk.currentLines.map((line, lineIndex) => (
+					<div
+						key={`replace-new-${hunkIndex}-${lineIndex}`}
+						className="grid grid-cols-[48px_48px_1fr] border-b border-amber-200 bg-amber-50/70 text-amber-950 dark:border-amber-950 dark:bg-amber-950/30 dark:text-amber-100"
+					>
+						<span className="px-2 py-0.5 text-right text-amber-700/80 select-none dark:text-amber-200/80">
+							+
+						</span>
+						<span className="px-2 py-0.5 text-right text-amber-700/80 select-none dark:text-amber-200/80">
+							{currentLine++}
+						</span>
+						<pre className="overflow-x-auto px-3 py-0.5 whitespace-pre-wrap break-words">
+							+ {line || " "}
+						</pre>
+					</div>
+				));
+
+				return [...removedRows, ...addedRows];
+			})}
+		</div>
+	);
+};
+
+export const PatchDiffEditor = ({
+	filePath,
+	originalContent,
+	value,
+	onChange,
+	patchType,
+	mode,
+	readOnly = false,
+	className,
+}: Props) => {
+	const diffHunks = buildDiffHunks(originalContent, value);
+	const language = inferLanguage(filePath);
+	const diffViewMode: DiffViewMode =
+		patchType === "create" ? "unified" : "split";
+	const contentLabel =
+		patchType === "create"
+			? "New file content"
+			: patchType === "delete"
+				? "Content scheduled for deletion"
+				: "Patched content";
+
+	if (mode === "editor") {
+		if (patchType === "delete") {
+			return (
+				<div className={cn("h-full overflow-auto bg-background", className)}>
+					{renderCodeLines(originalContent)}
+				</div>
+			);
+		}
+
+		return (
+			<CodeEditor
+				value={value}
+				onChange={(nextValue) => onChange(nextValue || "")}
+				className={cn("h-full w-full", className)}
+				wrapperClassName="h-full"
+				language={language}
+				lineWrapping
+				disabled={readOnly}
+			/>
+		);
+	}
+
+	return (
+		<div
+			className={cn("flex h-full min-h-0 flex-col bg-background", className)}
+		>
+			{patchType === "delete" ? (
+				<div className="min-h-0 flex-1 overflow-auto">
+					{renderCodeLines(originalContent)}
+				</div>
+			) : diffViewMode === "split" ? (
+				<div className="grid min-h-0 flex-1 grid-cols-1 md:grid-cols-2">
+					<div className="min-h-0 border-b md:border-b-0 md:border-r">
+						<div className="flex items-center gap-2 border-b px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+							<SplitSquareVertical className="h-3.5 w-3.5" />
+							Original
+						</div>
+						<div className="h-full overflow-auto">
+							{renderCodeLines(originalContent)}
+						</div>
+					</div>
+					<div className="min-h-0 flex-1">
+						<div className="border-b px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+							{contentLabel}
+						</div>
+						<CodeEditor
+							value={value}
+							onChange={(nextValue) => onChange(nextValue || "")}
+							className="h-full w-full"
+							wrapperClassName="h-full"
+							language={language}
+							lineWrapping
+							disabled={readOnly}
+						/>
+					</div>
+				</div>
+			) : (
+				<div className="flex min-h-0 flex-1 flex-col">
+					<div className="border-b px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+						Unified diff
+					</div>
+					<div className="min-h-0 flex-1 overflow-auto">
+						{renderUnifiedDiff(diffHunks)}
+					</div>
+					<div className="border-t px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+						{contentLabel}
+					</div>
+					<div className="min-h-[280px] border-t">
+						<CodeEditor
+							value={value}
+							onChange={(nextValue) => onChange(nextValue || "")}
+							className="h-full w-full"
+							wrapperClassName="h-[280px]"
+							language={language}
+							lineWrapping
+							disabled={readOnly}
+						/>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+};
--- a/apps/dokploy/components/dashboard/application/patches/patch-editor.tsx
+++ b/apps/dokploy/components/dashboard/application/patches/patch-editor.tsx
@ -4,12 +4,12 @@ import {
 	File,
 	Folder,
 	Loader2,
+	Maximize2,
 	Save,
 	Trash2,
 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
-import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@ -19,8 +19,16 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 import { api } from "@/utils/api";
 import { CreateFileDialog } from "./create-file-dialog";
+import { PatchDiffEditor, type PatchViewMode } from "./patch-diff-editor";

 interface Props {
 	id: string;
@ -43,6 +51,8 @@ export const PatchEditor = ({ id, type, repoPath, onClose }: Props) => {
 	const [expandedFolders, setExpandedFolders] = useState<Set<string>>(
 		new Set(),
 	);
+	const [isFullscreen, setIsFullscreen] = useState(false);
+	const [viewMode, setViewMode] = useState<PatchViewMode>("editor");

 	const utils = api.useUtils();
 	const { data: directories, isPending: isDirLoading } =
@ -78,10 +88,14 @@ export const PatchEditor = ({ id, type, repoPath, onClose }: Props) => {

 	useEffect(() => {
 		if (fileData !== undefined) {
-			setFileContent(fileData);
+			setFileContent(fileData.patchedContent);
 		}
 	}, [fileData]);

+	useEffect(() => {
+		setViewMode("editor");
+	}, [selectedFile]);
+
 	const handleFileSelect = (filePath: string) => {
 		setSelectedFile(filePath);
 	};
@ -159,7 +173,7 @@ export const PatchEditor = ({ id, type, repoPath, onClose }: Props) => {
 			.mutateAsync({
 				patchId: selectedFilePatch.patchId,
 				type: "update",
-				content: fileData || "",
+				content: fileData?.originalContent || "",
 			})
 			.then(() => {
 				toast.success("Deletion unmarked");
@ -170,7 +184,10 @@ export const PatchEditor = ({ id, type, repoPath, onClose }: Props) => {
 			});
 	};

-	const hasChanges = fileData !== undefined && fileContent !== fileData;
+	const hasChanges =
+		fileData !== undefined &&
+		fileData.patchType !== "delete" &&
+		fileContent !== fileData.patchedContent;

 	const renderTree = useCallback(
 		(entries: DirectoryEntry[], depth = 0) => {
@ -281,6 +298,14 @@ export const PatchEditor = ({ id, type, repoPath, onClose }: Props) => {
 							</Button>
 						) : (
 							<>
+								<Button
+									variant="outline"
+									size="sm"
+									onClick={() => setIsFullscreen(true)}
+								>
+									<Maximize2 className="mr-2 h-4 w-4" />
+									Full screen
+								</Button>
 								<Button
 									variant="outline"
 									size="sm"
@ -305,12 +330,32 @@ export const PatchEditor = ({ id, type, repoPath, onClose }: Props) => {
 								</Button>
 							</>
 						)}
+						<Select
+							value={viewMode}
+							onValueChange={(value) => setViewMode(value as PatchViewMode)}
+						>
+							<SelectTrigger className="w-[170px]">
+								<SelectValue />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value="editor">Editor</SelectItem>
+								<SelectItem value="diff">Diff mode</SelectItem>
+							</SelectContent>
+						</Select>
 					</div>
 				)}
 			</CardHeader>
 			<CardContent className="p-0">
-				<div className="grid grid-cols-[250px_1fr] border-t h-[600px]">
-					<div className="border-r h-full overflow-hidden">
+				<div
+					className={`grid border-t h-[600px] ${
+						isFullscreen ? "grid-cols-[1fr]" : "grid-cols-[250px_1fr]"
+					}`}
+				>
+					<div
+						className={`border-r h-full overflow-hidden ${
+							isFullscreen ? "hidden" : ""
+						}`}
+					>
 						<ScrollArea className="h-full">
 							<div className="p-2 space-y-1">
 								<div className="group flex items-center gap-2 px-2 py-1.5 mb-1">
@ -347,14 +392,19 @@ export const PatchEditor = ({ id, type, repoPath, onClose }: Props) => {
 							<div className="flex items-center justify-center h-full">
 								<Loader2 className="h-6 w-6 animate-spin" />
 							</div>
-						) : selectedFile ? (
-							<CodeEditor
-								value={fileData || ""}
-								onChange={(value) => setFileContent(value || "")}
-								className="h-full w-full"
-								wrapperClassName="h-full"
-								lineWrapping
+						) : selectedFile && fileData ? (
+							<PatchDiffEditor
+								filePath={selectedFile}
+								originalContent={fileData.originalContent}
+								value={fileContent}
+								onChange={setFileContent}
+								patchType={fileData.patchType}
+								mode={viewMode}
 							/>
+						) : selectedFile ? (
+							<div className="flex items-center justify-center h-full text-muted-foreground">
+								Loading file preview...
+							</div>
 						) : (
 							<div className="flex items-center justify-center h-full text-muted-foreground">
 								Select a file to edit
--- a/apps/dokploy/lib/patch-diff.ts
+++ b/apps/dokploy/lib/patch-diff.ts
@ -0,0 +1,280 @@
+export type DiffHunk =
+	| {
+			type: "equal";
+			originalStart: number;
+			currentStart: number;
+			originalLines: string[];
+			currentLines: string[];
+	  }
+	| {
+			type: "insert";
+			originalStart: number;
+			currentStart: number;
+			currentLines: string[];
+	  }
+	| {
+			type: "delete";
+			originalStart: number;
+			currentStart: number;
+			originalLines: string[];
+	  }
+	| {
+			type: "replace";
+			originalStart: number;
+			currentStart: number;
+			originalLines: string[];
+			currentLines: string[];
+	  };
+
+type DiffOp = {
+	type: "equal" | "insert" | "delete";
+	originalLines: string[];
+	currentLines: string[];
+};
+
+const MAX_MATRIX_CELLS = 40_000;
+
+const splitLines = (content: string) => content.split("\n");
+
+const trimCommonEdges = (originalLines: string[], currentLines: string[]) => {
+	let prefix = 0;
+	while (
+		prefix < originalLines.length &&
+		prefix < currentLines.length &&
+		originalLines[prefix] === currentLines[prefix]
+	) {
+		prefix += 1;
+	}
+
+	let originalSuffix = originalLines.length - 1;
+	let currentSuffix = currentLines.length - 1;
+	while (
+		originalSuffix >= prefix &&
+		currentSuffix >= prefix &&
+		originalLines[originalSuffix] === currentLines[currentSuffix]
+	) {
+		originalSuffix -= 1;
+		currentSuffix -= 1;
+	}
+
+	return {
+		prefix,
+		originalMiddle: originalLines.slice(prefix, originalSuffix + 1),
+		currentMiddle: currentLines.slice(prefix, currentSuffix + 1),
+		suffixOriginalStart: originalSuffix + 1,
+		suffixCurrentStart: currentSuffix + 1,
+	};
+};
+
+const pushOp = (
+	ops: DiffOp[],
+	type: DiffOp["type"],
+	line: string,
+	target: "originalLines" | "currentLines",
+) => {
+	const previous = ops.at(-1);
+	if (previous?.type === type) {
+		previous[target].push(line);
+		return;
+	}
+	ops.push({
+		type,
+		originalLines: target === "originalLines" ? [line] : [],
+		currentLines: target === "currentLines" ? [line] : [],
+	});
+};
+
+const diffMiddle = (originalLines: string[], currentLines: string[]) => {
+	if (originalLines.length === 0 && currentLines.length === 0) {
+		return [] as DiffOp[];
+	}
+
+	if (originalLines.length * currentLines.length > MAX_MATRIX_CELLS) {
+		const ops: DiffOp[] = [];
+		if (originalLines.length > 0) {
+			ops.push({
+				type: "delete",
+				originalLines,
+				currentLines: [],
+			});
+		}
+		if (currentLines.length > 0) {
+			ops.push({
+				type: "insert",
+				originalLines: [],
+				currentLines,
+			});
+		}
+		return ops;
+	}
+
+	const rows = originalLines.length + 1;
+	const cols = currentLines.length + 1;
+	const lcs = Array.from({ length: rows }, () => Array<number>(cols).fill(0));
+
+	for (let row = originalLines.length - 1; row >= 0; row -= 1) {
+		for (let col = currentLines.length - 1; col >= 0; col -= 1) {
+			const originalLine = originalLines[row];
+			const currentLine = currentLines[col];
+			if (
+				originalLine !== undefined &&
+				currentLine !== undefined &&
+				originalLine === currentLine
+			) {
+				lcs[row]![col] = lcs[row + 1]![col + 1]! + 1;
+			} else {
+				lcs[row]![col] = Math.max(lcs[row + 1]![col]!, lcs[row]![col + 1]!);
+			}
+		}
+	}
+
+	const ops: DiffOp[] = [];
+	let row = 0;
+	let col = 0;
+
+	while (row < originalLines.length && col < currentLines.length) {
+		const originalLine = originalLines[row];
+		const currentLine = currentLines[col];
+		if (
+			originalLine !== undefined &&
+			currentLine !== undefined &&
+			originalLine === currentLine
+		) {
+			pushOp(ops, "equal", originalLine, "originalLines");
+			const previous = ops.at(-1);
+			if (previous) {
+				previous.currentLines.push(currentLine);
+			}
+			row += 1;
+			col += 1;
+			continue;
+		}
+
+		if (lcs[row + 1]![col]! >= lcs[row]![col + 1]!) {
+			if (originalLine !== undefined) {
+				pushOp(ops, "delete", originalLine, "originalLines");
+			}
+			row += 1;
+			continue;
+		}
+
+		if (currentLine !== undefined) {
+			pushOp(ops, "insert", currentLine, "currentLines");
+		}
+		col += 1;
+	}
+
+	while (row < originalLines.length) {
+		const originalLine = originalLines[row];
+		if (originalLine !== undefined) {
+			pushOp(ops, "delete", originalLine, "originalLines");
+		}
+		row += 1;
+	}
+
+	while (col < currentLines.length) {
+		const currentLine = currentLines[col];
+		if (currentLine !== undefined) {
+			pushOp(ops, "insert", currentLine, "currentLines");
+		}
+		col += 1;
+	}
+
+	return ops;
+};
+
+export const buildDiffHunks = (
+	originalContent: string,
+	currentContent: string,
+): DiffHunk[] => {
+	const originalLines = splitLines(originalContent);
+	const currentLines = splitLines(currentContent);
+	const trimmed = trimCommonEdges(originalLines, currentLines);
+	const middleOps = diffMiddle(trimmed.originalMiddle, trimmed.currentMiddle);
+	const ops: DiffOp[] = [];
+
+	if (trimmed.prefix > 0) {
+		ops.push({
+			type: "equal",
+			originalLines: originalLines.slice(0, trimmed.prefix),
+			currentLines: currentLines.slice(0, trimmed.prefix),
+		});
+	}
+
+	ops.push(...middleOps);
+
+	if (trimmed.suffixOriginalStart < originalLines.length) {
+		ops.push({
+			type: "equal",
+			originalLines: originalLines.slice(trimmed.suffixOriginalStart),
+			currentLines: currentLines.slice(trimmed.suffixCurrentStart),
+		});
+	}
+
+	const hunks: DiffHunk[] = [];
+	let originalLine = 0;
+	let currentLine = 0;
+
+	for (let index = 0; index < ops.length; index += 1) {
+		const op = ops[index];
+		if (!op) {
+			continue;
+		}
+		if (op.type === "equal") {
+			hunks.push({
+				type: "equal",
+				originalStart: originalLine,
+				currentStart: currentLine,
+				originalLines: op.originalLines,
+				currentLines: op.currentLines,
+			});
+			originalLine += op.originalLines.length;
+			currentLine += op.currentLines.length;
+			continue;
+		}
+
+		const next = ops[index + 1];
+		if (
+			(op.type === "delete" && next?.type === "insert") ||
+			(op.type === "insert" && next?.type === "delete")
+		) {
+			const deleteOp = op.type === "delete" ? op : next;
+			const insertOp = op.type === "insert" ? op : next;
+			if (!deleteOp || !insertOp) {
+				continue;
+			}
+			hunks.push({
+				type: "replace",
+				originalStart: originalLine,
+				currentStart: currentLine,
+				originalLines: deleteOp.originalLines,
+				currentLines: insertOp.currentLines,
+			});
+			originalLine += deleteOp.originalLines.length;
+			currentLine += insertOp.currentLines.length;
+			index += 1;
+			continue;
+		}
+
+		if (op.type === "delete") {
+			hunks.push({
+				type: "delete",
+				originalStart: originalLine,
+				currentStart: currentLine,
+				originalLines: op.originalLines,
+			});
+			originalLine += op.originalLines.length;
+			continue;
+		}
+
+		hunks.push({
+			type: "insert",
+			originalStart: originalLine,
+			currentStart: currentLine,
+			currentLines: op.currentLines,
+		});
+		currentLine += op.currentLines.length;
+	}
+
+	return hunks;
+};
--- a/apps/dokploy/server/api/routers/patch.ts
+++ b/apps/dokploy/server/api/routers/patch.ts
@ -226,18 +226,39 @@ export const patchRouter = createTRPCRouter({
 				input.id,
 				input.type,
 			);
-			// For delete patches, show current file content from repo (what will be deleted)
+			let originalContent = "";
+			let fileExistsInRepo = true;
+
+			try {
+				originalContent = await readPatchRepoFile(
+					input.id,
+					input.type,
+					input.filePath,
+				);
+			} catch {
+				fileExistsInRepo = false;
+			}
+
 			if (existingPatch?.type === "delete") {
-				try {
-					return await readPatchRepoFile(input.id, input.type, input.filePath);
-				} catch {
-					return "(File not found in repo - will be removed if it exists)";
-				}
+				return {
+					filePath: input.filePath,
+					fileExistsInRepo,
+					originalContent: fileExistsInRepo
+						? originalContent
+						: "(File not found in repo - will be removed if it exists)",
+					patchedContent: "",
+					patchType: "delete" as const,
+				};
 			}
-			if (existingPatch?.content) {
-				return existingPatch.content;
-			}
-			return await readPatchRepoFile(input.id, input.type, input.filePath);
+
+			return {
+				filePath: input.filePath,
+				fileExistsInRepo,
+				originalContent,
+				patchedContent: existingPatch?.content ?? originalContent,
+				patchType:
+					existingPatch?.type ?? (fileExistsInRepo ? "update" : "create"),
+			};
 		}),

 	saveFileAsPatch: protectedProcedure