From a86008ba4c504c222478e294c53b0cd4ca64c770 Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Thu, 26 Mar 2026 19:31:10 +0100
Subject: [PATCH] refactor: use Monaco DiffEditor for YAML diff in review
 drawer

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../lib/components/DatatableSchemaDiff.svelte | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/components/DatatableSchemaDiff.svelte b/frontend/src/lib/components/DatatableSchemaDiff.svelte
index 69e657a958..ab9ae4f93c 100644
--- a/frontend/src/lib/components/DatatableSchemaDiff.svelte
+++ b/frontend/src/lib/components/DatatableSchemaDiff.svelte
@@ -490,19 +490,22 @@
 					</Button>
 				</div>
 			</div>
-			<div class="flex grow overflow-hidden">
-				<div class="w-1/2 flex flex-col border-r overflow-auto">
-					<div class="px-3 py-1.5 text-2xs font-semibold text-secondary border-b">
-						Parent ({parentWorkspaceId})
+			<div class="grow overflow-hidden">
+				{#await import('$lib/components/DiffEditor.svelte')}
+					<div class="flex items-center justify-center h-full">
+						<Loader2 class="w-5 h-5 animate-spin" />
 					</div>
-					<pre class="p-3 text-xs whitespace-pre-wrap font-mono grow">{yaml.parent}</pre>
-				</div>
-				<div class="w-1/2 flex flex-col overflow-auto">
-					<div class="px-3 py-1.5 text-2xs font-semibold text-secondary border-b">
-						Fork ({currentWorkspaceId})
-					</div>
-					<pre class="p-3 text-xs whitespace-pre-wrap font-mono grow">{yaml.fork}</pre>
-				</div>
+				{:then Module}
+					<Module.default
+						open={true}
+						automaticLayout
+						className="h-full"
+						defaultLang="yaml"
+						defaultOriginal={yaml.parent}
+						defaultModified={yaml.fork}
+						readOnly
+					/>
+				{/await}
 			</div>
 		</div>
 	{/if}