From c6578bfaa645bdeef831c1a0e02713a87ca04509 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Tue, 30 Sep 2025 12:03:40 +0200
Subject: [PATCH 01/32] init

---
 package-lock.json                  | 182 +++++++++++++++++++++--------
 package.json                       |   1 +
 src/components/Yaml/YamlViewer.tsx |  50 ++++----
 3 files changed, 162 insertions(+), 71 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 927b65dd..9259b7f3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "@fastify/static": "8.2.0",
         "@fastify/vite": "8.2.0",
         "@hookform/resolvers": "5.2.2",
+        "@monaco-editor/react": "^4.7.0-rc.0",
         "@sentry/node": "10.15.0",
         "@sentry/react": "10.15.0",
         "@sentry/vite-plugin": "4.3.0",
@@ -185,7 +186,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz",
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -1010,6 +1010,7 @@
       "integrity": "sha512-fxlS1kkIjx8+vy2SjuCB94q3htSNrufYTXubwiBFeaQHbH6Ipi43gFJq2zCMt6PHhImH3Xmr0NksKDvchWlpQQ==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@eslint/object-schema": "^2.1.6",
         "debug": "^4.3.1",
@@ -1025,6 +1026,7 @@
       "integrity": "sha512-+GPzk8PlG0sPpzdU5ZvIRMPidzAnZDl/s9L+y13iodqvb8leL53bTannOrQ/Im7UkpsmFU5Ily5U60LWixnmLg==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
@@ -1035,6 +1037,7 @@
       "integrity": "sha512-yfkgDw1KR66rkT5A8ci4irzDysN7FRpq3ttJolR88OqQikAWqwA8j5VZyas+vjyBNFIJ7MfybJ9plMILI2UrCw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.15"
       },
@@ -1098,6 +1101,7 @@
       "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
@@ -1108,6 +1112,7 @@
       "integrity": "sha512-ZAoA40rNMPwSm+AeHpCq8STiNAwzWLJuP8Xv4CHIc9wv/PSuExjMrmjfYNj682vW0OOiZ1HKxzvjQr9XZIisQA==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@eslint/core": "^0.13.0",
         "levn": "^0.4.1"
@@ -2427,6 +2432,7 @@
       "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": ">=18.18.0"
       }
@@ -2437,6 +2443,7 @@
       "integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@humanfs/core": "^0.19.1",
         "@humanwhocodes/retry": "^0.3.0"
@@ -2451,6 +2458,7 @@
       "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": ">=18.18"
       },
@@ -2465,6 +2473,7 @@
       "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": ">=12.22"
       },
@@ -2479,6 +2488,7 @@
       "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": ">=18.18"
       },
@@ -3016,6 +3026,7 @@
       "integrity": "sha512-rmOWVRUbUJD7iSvJugjUbFZshTAuJ48MXoZ80Osx1GM0K/H1w7rSEvmw8m6vdWxNASgtaHIhAgre4H/E9GJiYQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "content-type": "^1.0.5",
         "cors": "^2.8.5",
@@ -3049,10 +3060,34 @@
       "integrity": "sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg==",
       "dev": true,
       "license": "ISC",
+      "peer": true,
       "peerDependencies": {
         "zod": "^3.24.1"
       }
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.5.0.tgz",
+      "integrity": "sha512-hKoGSM+7aAc7eRTRjpqAZucPmoNOC4UUbknb/VNoTkEIkCPhqV8LfbsgM1webRM7S/z21eHEx9Fkwx8Z/C/+Xw==",
+      "license": "MIT",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.7.0-rc.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0-rc.0.tgz",
+      "integrity": "sha512-YfjXkDK0bcwS0zo8PXptvQdCQfOPPtzGsAzmIv7PnoUGFdIohsR+NVDyjbajMddF+3cWUm/3q9NzP/DUke9a+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.4.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "0.2.11",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.11.tgz",
@@ -3106,7 +3141,6 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz",
       "integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==",
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=8.0.0"
       }
@@ -3128,7 +3162,6 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/context-async-hooks/-/context-async-hooks-2.1.0.tgz",
       "integrity": "sha512-zOyetmZppnwTyPrt4S7jMfXiSX9yyfF0hxlA8B5oo2TtKl+/RGCy7fi4DrBfIf3lCPrkKsRBWZZD7RFojK7FDg==",
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": "^18.19.0 || >=20.6.0"
       },
@@ -3141,7 +3174,6 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-2.1.0.tgz",
       "integrity": "sha512-RMEtHsxJs/GiHHxYT58IY57UXAQTuUnZVco6ymDEqTNlJKTimM4qPUPVe8InNFyBjhHBEAx4k3Q8LtNayBsbUQ==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@opentelemetry/semantic-conventions": "^1.29.0"
       },
@@ -4211,7 +4243,6 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-2.1.0.tgz",
       "integrity": "sha512-1CJjf3LCvoefUOgegxi8h6r4B/wLSzInyhGP2UmIBYNlo4Qk5CZ73e1eEyWmfXvFtm1ybkmfb2DqWvspsYLrWw==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@opentelemetry/core": "2.1.0",
         "@opentelemetry/semantic-conventions": "^1.29.0"
@@ -4228,7 +4259,6 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-base/-/sdk-trace-base-2.1.0.tgz",
       "integrity": "sha512-uTX9FBlVQm4S2gVQO1sb5qyBLq/FPjbp+tmGoxu4tIgtYGmBYB44+KX/725RFDe30yBSaA9Ml9fqphe1hbUyLQ==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@opentelemetry/core": "2.1.0",
         "@opentelemetry/resources": "2.1.0",
@@ -4246,7 +4276,6 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.37.0.tgz",
       "integrity": "sha512-JD6DerIKdJGmRp4jQyX5FlrQjA4tjOw1cvfsPAZXfOOEErMUHjPcPSICS+6WnM0nB0efSFARh0KAZss+bvExOA==",
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=14"
       }
@@ -5421,7 +5450,8 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/json5": {
       "version": "0.0.29",
@@ -5490,7 +5520,6 @@
       "integrity": "sha512-ukd93VGzaNPMAUPy0gRDSC57UuQbnH9Kussp7HBjM06YFi9uZTFhOvMSO2OKqXm1rSgzOE+pVx1k1PYHGwlc8Q==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -5501,7 +5530,6 @@
       "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.0.0"
       }
@@ -5629,7 +5657,6 @@
       "integrity": "sha512-EHrrEsyhOhxYt8MTg4zTF+DJMuNBzWwgvvOYNj/zm1vnaD/IC5zCXFehZv94Piqa2cRFfXrTFxIvO95L7Qc/cw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.44.1",
         "@typescript-eslint/types": "8.44.1",
@@ -5873,7 +5900,6 @@
       "resolved": "https://registry.npmjs.org/@ui5/webcomponents/-/webcomponents-2.14.0.tgz",
       "integrity": "sha512-ZOJSXPChGMe9R/3ZqzCx1qhyHEazpWofBI+StJe316YcnnynJSJ0a0zuoTKrNac+6DoxwRq3SD3kK1W5TbbNZw==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@ui5/webcomponents-base": "2.14.0",
         "@ui5/webcomponents-icons": "2.14.0",
@@ -5918,7 +5944,6 @@
       "resolved": "https://registry.npmjs.org/@ui5/webcomponents-fiori/-/webcomponents-fiori-2.14.0.tgz",
       "integrity": "sha512-LXwmPmcNlxGN0WZKz5shfVltnb4dPoYYFAxxjFj+3UG2WJ+NB09dME8MMChy5Dq9jdqmXgF3wWRvXLzzVSgdIg==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@ui5/webcomponents": "2.14.0",
         "@ui5/webcomponents-base": "2.14.0",
@@ -6008,7 +6033,6 @@
       "resolved": "https://registry.npmjs.org/@ui5/webcomponents-react-base/-/webcomponents-react-base-2.14.1.tgz",
       "integrity": "sha512-dbixXiOkc1iIjh3TKdGxfCL3+wZH6viONydIOYPj86f4Tj+Cj7RlH8gXoXeJJDXHFVrxYiPGSKNCljxP8sIIQA==",
       "license": "Apache-2.0",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "*",
         "@ui5/webcomponents-base": "~2.14.0",
@@ -6630,6 +6654,7 @@
       "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "mime-types": "^3.0.0",
         "negotiator": "^1.0.0"
@@ -6644,6 +6669,7 @@
       "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -6654,6 +6680,7 @@
       "integrity": "sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "mime-db": "^1.54.0"
       },
@@ -6666,7 +6693,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
       "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -7277,7 +7303,6 @@
       "resolved": "https://registry.npmjs.org/bare-url/-/bare-url-2.1.6.tgz",
       "integrity": "sha512-FgjDeR+/yDH34By4I0qB5NxAoWv7dOTYcOXwn73kr+c93HyC2lU6tnjifqUe33LKMJcDyCYPQjEAqgOQiXkE2Q==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "bare-path": "^3.0.0"
       }
@@ -7345,6 +7370,7 @@
       "integrity": "sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "bytes": "^3.1.2",
         "content-type": "^1.0.5",
@@ -7366,6 +7392,7 @@
       "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.8"
       }
@@ -7376,6 +7403,7 @@
       "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -7386,6 +7414,7 @@
       "integrity": "sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "mime-db": "^1.54.0"
       },
@@ -7399,6 +7428,7 @@
       "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "content-type": "^1.0.5",
         "media-typer": "^1.1.0",
@@ -7450,7 +7480,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001716",
         "electron-to-chromium": "^1.5.149",
@@ -7515,6 +7544,7 @@
       "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.8"
       }
@@ -8062,6 +8092,7 @@
       "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -8087,6 +8118,7 @@
       "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=6.6.0"
       }
@@ -8104,6 +8136,7 @@
       "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "object-assign": "^4",
         "vary": "^1"
@@ -8187,7 +8220,6 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@cypress/request": "^3.0.9",
         "@cypress/xvfb": "^1.2.4",
@@ -8434,7 +8466,6 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -8676,7 +8707,8 @@
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/define-data-property": {
       "version": "1.1.4",
@@ -8884,7 +8916,8 @@
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/electron-to-chromium": {
       "version": "1.5.155",
@@ -8904,6 +8937,7 @@
       "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.8"
       }
@@ -8923,7 +8957,6 @@
       "integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ansi-colors": "^4.1.1",
         "strip-ansi": "^6.0.1"
@@ -9264,6 +9297,7 @@
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -9341,7 +9375,6 @@
       "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -9502,7 +9535,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -9697,6 +9729,7 @@
       "integrity": "sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^5.2.0"
@@ -9727,6 +9760,7 @@
       "integrity": "sha512-I9XlJawFdSMvWjDt6wksMCrgns5ggLNfFwFvnShsleWruvXM514Qxk8V246efTw+eo9JABvVz+u3q2RiAowKxQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
@@ -9737,6 +9771,7 @@
       "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
@@ -9750,6 +9785,7 @@
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
@@ -9791,6 +9827,7 @@
       "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
       "dev": true,
       "license": "BSD-3-Clause",
+      "peer": true,
       "dependencies": {
         "estraverse": "^5.1.0"
       },
@@ -9804,6 +9841,7 @@
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "estraverse": "^5.2.0"
       },
@@ -9847,6 +9885,7 @@
       "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -9870,6 +9909,7 @@
       "integrity": "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "eventsource-parser": "^3.0.1"
       },
@@ -9883,6 +9923,7 @@
       "integrity": "sha512-6RxOBZ/cYgd8usLwsEl+EC09Au/9BcmCKYF2/xbml6DNczf7nv0MQb+7BA2F+li6//I+28VNlQR37XfQtcAJuA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18.0.0"
       }
@@ -9940,6 +9981,7 @@
       "integrity": "sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "accepts": "^2.0.0",
         "body-parser": "^2.2.0",
@@ -9983,6 +10025,7 @@
       "integrity": "sha512-eB5zbQh5h+VenMPM3fh+nw1YExi5nMr6HUCR62ELSP11huvxm/Uir1H1QEyTkk5QX6A58pX6NmaTMceKZ0Eodg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 16"
       },
@@ -9999,6 +10042,7 @@
       "integrity": "sha512-Au9nRL8VNUut/XSzbQA38+M78dzP4D+eqg3gfJHMIHHYa3bg067xj1KxMUWj+VULbiZMowKngFFbKczUrNJ1mg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "safe-buffer": "5.2.1"
       },
@@ -10012,6 +10056,7 @@
       "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -10022,6 +10067,7 @@
       "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.8"
       }
@@ -10032,6 +10078,7 @@
       "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -10042,6 +10089,7 @@
       "integrity": "sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "mime-db": "^1.54.0"
       },
@@ -10055,6 +10103,7 @@
       "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "content-type": "^1.0.5",
         "media-typer": "^1.1.0",
@@ -10232,7 +10281,8 @@
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/fast-querystring": {
       "version": "1.1.2",
@@ -10283,7 +10333,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@fastify/ajv-compiler": "^4.0.0",
         "@fastify/error": "^4.0.0",
@@ -10460,6 +10509,7 @@
       "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "flat-cache": "^4.0.0"
       },
@@ -10485,6 +10535,7 @@
       "integrity": "sha512-/t88Ty3d5JWQbWYgaOGCCYfXRwV1+be02WqYYlL6h0lEiUAMPM8o8qKGO01YIkOHzka2up08wvgYD0mDiI+q3Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "debug": "^4.4.0",
         "encodeurl": "^2.0.0",
@@ -10561,6 +10612,7 @@
       "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "flatted": "^3.2.9",
         "keyv": "^4.5.4"
@@ -10574,7 +10626,8 @@
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
       "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
       "dev": true,
-      "license": "ISC"
+      "license": "ISC",
+      "peer": true
     },
     "node_modules/for-each": {
       "version": "0.3.5",
@@ -10688,6 +10741,7 @@
       "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.8"
       }
@@ -10923,6 +10977,7 @@
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
       "dev": true,
       "license": "ISC",
+      "peer": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -11060,7 +11115,6 @@
       "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.11.0.tgz",
       "integrity": "sha512-mS1lbMsxgQj6hge1XZ6p7GPhbrtFwUFYi3wRzXAC/FmYnyXMTvvI3td3rjmQ2u8ewXueaSvRPWaEcgVVOT9Jnw==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
       }
@@ -11140,7 +11194,6 @@
       "resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-6.0.5.tgz",
       "integrity": "sha512-HzYw057ch0hx2gZjkbgk1pur4kAtgljlWRP+Gccudqm3BRrTpExjWCQ9OHdIsq47Y6lHL++1lTvuQHhgRRcevw==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20"
       },
@@ -11432,7 +11485,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.27.6"
       },
@@ -11554,6 +11606,7 @@
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.8.19"
       }
@@ -12019,7 +12072,8 @@
       "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
       "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/is-regex": {
       "version": "1.2.1",
@@ -12312,7 +12366,6 @@
       "resolved": "https://registry.npmjs.org/javascript-time-ago/-/javascript-time-ago-2.5.12.tgz",
       "integrity": "sha512-s8PPq2HQ3HIbSU0SjhNvTitf5VoXbQWof9q6k3gIX7F2il0ptjD5lONTDccpuKt/2U7RjbCp/TCHPK7eDwO7zQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "relative-time-format": "^1.1.7"
       }
@@ -12368,7 +12421,8 @@
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
@@ -12414,7 +12468,8 @@
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/json-stringify-safe": {
       "version": "5.0.1",
@@ -12499,6 +12554,7 @@
       "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "json-buffer": "3.0.1"
       }
@@ -12538,6 +12594,7 @@
       "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "prelude-ls": "^1.2.1",
         "type-check": "~0.4.0"
@@ -12912,7 +12969,8 @@
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.once": {
       "version": "4.1.1",
@@ -13095,6 +13153,7 @@
       "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -13242,6 +13301,23 @@
       "integrity": "sha512-EGWKgxALGMgzvxYF1UyGTy0HXX/2vHLkw6+NvDKW2jypWbHpjQuj4UMcqQWXHERJhVGKikolT06G3bcKe4fi7w==",
       "license": "MIT"
     },
+    "node_modules/monaco-editor": {
+      "version": "0.53.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.53.0.tgz",
+      "integrity": "sha512-0WNThgC6CMWNXXBxTbaYYcunj08iB5rnx4/G56UOPeL9UVIUGGHA1GR0EWIh9Ebabj7NpCRawQ5b0hfN1jQmYQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/trusted-types": "^1.0.6"
+      }
+    },
+    "node_modules/monaco-editor/node_modules/@types/trusted-types": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-1.0.6.tgz",
+      "integrity": "sha512-230RC8sFeHoT6sSUlRO6a8cAnclO06eeiq1QDfiv2FGCLWFvvERWgwIQD4FWqD9A69BN7Lzee4OXwoMVnnsWDw==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -13295,6 +13371,7 @@
       "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -13532,6 +13609,7 @@
       "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ee-first": "1.1.1"
       },
@@ -13582,6 +13660,7 @@
       "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
@@ -13766,6 +13845,7 @@
       "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.8"
       }
@@ -14030,6 +14110,7 @@
       "integrity": "sha512-ueGLflrrnvwB3xuo/uGob5pd5FN7l0MsLf0Z87o/UQmRtwjvfylfc9MurIxRAWywCYTgrvpXBcqjV4OfCYGCIQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=16.20.0"
       }
@@ -14214,6 +14295,7 @@
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.8.0"
       }
@@ -14224,7 +14306,6 @@
       "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -14345,6 +14426,7 @@
       "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "forwarded": "0.2.0",
         "ipaddr.js": "1.9.1"
@@ -14359,6 +14441,7 @@
       "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.10"
       }
@@ -14448,6 +14531,7 @@
       "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -14458,6 +14542,7 @@
       "integrity": "sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "bytes": "3.1.2",
         "http-errors": "2.0.0",
@@ -14473,7 +14558,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
       "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -14495,7 +14579,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
       "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -14520,7 +14603,6 @@
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.63.0.tgz",
       "integrity": "sha512-ZwueDMvUeucovM2VjkCf7zIHcs1aAlDimZu2Hvel5C5907gUzMpm4xCrQXtRzCvsBqFjonB4m3x4LzCFI1ZKWA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18.0.0"
       },
@@ -15052,6 +15134,7 @@
       "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "debug": "^4.4.0",
         "depd": "^2.0.0",
@@ -15243,6 +15326,7 @@
       "integrity": "sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "debug": "^4.3.5",
         "encodeurl": "^2.0.0",
@@ -15266,6 +15350,7 @@
       "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -15276,6 +15361,7 @@
       "integrity": "sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "mime-db": "^1.54.0"
       },
@@ -15301,6 +15387,7 @@
       "integrity": "sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "encodeurl": "^2.0.0",
         "escape-html": "^1.0.3",
@@ -15650,6 +15737,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+      "license": "MIT"
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -16143,7 +16236,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -16359,7 +16451,6 @@
       "integrity": "sha512-ytQKuwgmrrkDTFP4LjR0ToE2nqgy886GpvRSpU0JAnrdBYppuY5rLkRUYPU1yCryb24SsKBTL/hlDQAEFVwtZg==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "~0.25.0",
         "get-tsconfig": "^4.7.5"
@@ -16400,6 +16491,7 @@
       "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "prelude-ls": "^1.2.1"
       },
@@ -16517,7 +16609,6 @@
       "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -16648,6 +16739,7 @@
       "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.8"
       }
@@ -16671,7 +16763,6 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "napi-postinstall": "^0.2.2"
       },
@@ -16844,7 +16935,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.7.tgz",
       "integrity": "sha512-VbA8ScMvAISJNJVbRDTJdCwqQoAareR/wutevKanhR2/1EkoXVZVkkORaYm/tNVCjP/UDTKtcw3bAkwOUdedmA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -16959,7 +17049,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -16973,7 +17062,6 @@
       "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/chai": "^5.2.2",
         "@vitest/expect": "3.2.4",
@@ -17239,6 +17327,7 @@
       "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -17287,7 +17376,6 @@
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.2.tgz",
       "integrity": "sha512-DMricUmwGZUVr++AEAe2uiVM7UoO9MAVZMDu05UQOaUII0lp+zOzLLU4Xqh/JvTqklB1T4uELaaPBKyjE1r4fQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       },
diff --git a/package.json b/package.json
index 3364c58c..9253ab34 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "@fastify/static": "8.2.0",
     "@fastify/vite": "8.2.0",
     "@hookform/resolvers": "5.2.2",
+    "@monaco-editor/react": "^4.7.0-rc.0",
     "@sentry/node": "10.15.0",
     "@sentry/react": "10.15.0",
     "@sentry/vite-plugin": "4.3.0",
diff --git a/src/components/Yaml/YamlViewer.tsx b/src/components/Yaml/YamlViewer.tsx
index 090dc85d..fbfd62be 100644
--- a/src/components/Yaml/YamlViewer.tsx
+++ b/src/components/Yaml/YamlViewer.tsx
@@ -7,6 +7,7 @@ import styles from './YamlViewer.module.css';
 import { useCopyToClipboard } from '../../hooks/useCopyToClipboard.ts';
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '../../hooks/useTheme.ts';
+import { Editor } from '@monaco-editor/react';
 type YamlViewerProps = { yamlString: string; filename: string };
 const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename }) => {
   const { t } = useTranslation();
@@ -34,30 +35,31 @@ const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename }) => {
           {t('buttons.download')}
         </Button>
       </FlexBox>
-      <SyntaxHighlighter
-        language="yaml"
-        style={isDarkTheme ? materialDark : materialLight}
-        showLineNumbers
-        lineNumberStyle={{
-          paddingRight: '20px',
-          minWidth: '40px',
-          textAlign: 'right',
-        }}
-        customStyle={{
-          margin: 0,
-          padding: '20px',
-          borderRadius: '4px',
-          fontSize: '1rem',
-          background: 'transparent',
-        }}
-        codeTagProps={{
-          style: {
-            whiteSpace: 'pre-wrap',
-          },
-        }}
-      >
-        {yamlString}
-      </SyntaxHighlighter>
+      <Editor height="90vh" defaultLanguage="yaml" defaultValue={yamlString} />
+      {/*<SyntaxHighlighter*/}
+      {/*  language="yaml"*/}
+      {/*  style={isDarkTheme ? materialDark : materialLight}*/}
+      {/*  showLineNumbers*/}
+      {/*  lineNumberStyle={{*/}
+      {/*    paddingRight: '20px',*/}
+      {/*    minWidth: '40px',*/}
+      {/*    textAlign: 'right',*/}
+      {/*  }}*/}
+      {/*  customStyle={{*/}
+      {/*    margin: 0,*/}
+      {/*    padding: '20px',*/}
+      {/*    borderRadius: '4px',*/}
+      {/*    fontSize: '1rem',*/}
+      {/*    background: 'transparent',*/}
+      {/*  }}*/}
+      {/*  codeTagProps={{*/}
+      {/*    style: {*/}
+      {/*      whiteSpace: 'pre-wrap',*/}
+      {/*    },*/}
+      {/*  }}*/}
+      {/*>*/}
+      {/*  {yamlString}*/}
+      {/*</SyntaxHighlighter>*/}
     </div>
   );
 };

From cfb88ac10c520840fb6eb9277689c90c7aa0fd80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Tue, 30 Sep 2025 13:09:41 +0200
Subject: [PATCH 02/32] init

---
 package-lock.json                  | 177 ++++++++++++++++++++++++++---
 package.json                       |   5 +-
 src/components/Yaml/YamlViewer.tsx |  48 +++-----
 src/lib/monaco.ts                  |  53 +++++++++
 src/main.tsx                       |   3 +
 vite.config.js                     |   9 ++
 6 files changed, 247 insertions(+), 48 deletions(-)
 create mode 100644 src/lib/monaco.ts

diff --git a/package-lock.json b/package-lock.json
index 9259b7f3..38c1281c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
         "@fastify/static": "8.2.0",
         "@fastify/vite": "8.2.0",
         "@hookform/resolvers": "5.2.2",
-        "@monaco-editor/react": "^4.7.0-rc.0",
+        "@monaco-editor/react": "^4.7.0",
         "@sentry/node": "10.15.0",
         "@sentry/react": "10.15.0",
         "@sentry/vite-plugin": "4.3.0",
@@ -41,6 +41,8 @@
         "i18next": "25.5.2",
         "javascript-time-ago": "2.5.12",
         "js-yaml": "4.1.0",
+        "monaco-editor": "^0.45.0",
+        "monaco-yaml": "^5.4.0",
         "react": "19.1.1",
         "react-dom": "19.1.1",
         "react-error-boundary": "6.0.0",
@@ -84,6 +86,7 @@
         "typescript": "5.9.2",
         "typescript-eslint": "8.44.1",
         "vite": "7.1.7",
+        "vite-plugin-static-copy": "^3.1.2",
         "vitest": "3.2.4"
       },
       "engines": {
@@ -3075,12 +3078,12 @@
       }
     },
     "node_modules/@monaco-editor/react": {
-      "version": "4.7.0-rc.0",
-      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0-rc.0.tgz",
-      "integrity": "sha512-YfjXkDK0bcwS0zo8PXptvQdCQfOPPtzGsAzmIv7PnoUGFdIohsR+NVDyjbajMddF+3cWUm/3q9NzP/DUke9a+w==",
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz",
+      "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==",
       "license": "MIT",
       "dependencies": {
-        "@monaco-editor/loader": "^1.4.0"
+        "@monaco-editor/loader": "^1.5.0"
       },
       "peerDependencies": {
         "monaco-editor": ">= 0.25.0 < 1",
@@ -12504,6 +12507,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonc-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.3.1.tgz",
+      "integrity": "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==",
+      "license": "MIT"
+    },
     "node_modules/jsonfile": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -13302,21 +13311,82 @@
       "license": "MIT"
     },
     "node_modules/monaco-editor": {
-      "version": "0.53.0",
-      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.53.0.tgz",
-      "integrity": "sha512-0WNThgC6CMWNXXBxTbaYYcunj08iB5rnx4/G56UOPeL9UVIUGGHA1GR0EWIh9Ebabj7NpCRawQ5b0hfN1jQmYQ==",
+      "version": "0.45.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.45.0.tgz",
+      "integrity": "sha512-mjv1G1ZzfEE3k9HZN0dQ2olMdwIfaeAAjFiwNprLfYNRSz7ctv9XuCT7gPtBGrMUeV1/iZzYKj17Khu1hxoHOA==",
+      "license": "MIT"
+    },
+    "node_modules/monaco-languageserver-types": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/monaco-languageserver-types/-/monaco-languageserver-types-0.4.0.tgz",
+      "integrity": "sha512-QQ3BZiU5LYkJElGncSNb5AKoJ/LCs6YBMCJMAz9EA7v+JaOdn3kx2cXpPTcZfKA5AEsR0vc97sAw+5mdNhVBmw==",
+      "license": "MIT",
+      "dependencies": {
+        "monaco-types": "^0.1.0",
+        "vscode-languageserver-protocol": "^3.0.0",
+        "vscode-uri": "^3.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      }
+    },
+    "node_modules/monaco-marker-data-provider": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/monaco-marker-data-provider/-/monaco-marker-data-provider-1.2.4.tgz",
+      "integrity": "sha512-4DsPgsAqpTyUDs3humXRBPUJoihTv+L6v9aupQWD80X2YXaCXUd11mWYeSCYHuPgdUmjFaNWCEOjQ6ewf/QA1Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "@types/trusted-types": "^1.0.6"
+        "monaco-types": "^0.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
       }
     },
-    "node_modules/monaco-editor/node_modules/@types/trusted-types": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-1.0.6.tgz",
-      "integrity": "sha512-230RC8sFeHoT6sSUlRO6a8cAnclO06eeiq1QDfiv2FGCLWFvvERWgwIQD4FWqD9A69BN7Lzee4OXwoMVnnsWDw==",
+    "node_modules/monaco-types": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/monaco-types/-/monaco-types-0.1.0.tgz",
+      "integrity": "sha512-aWK7SN9hAqNYi0WosPoMjenMeXJjwCxDibOqWffyQ/qXdzB/86xshGQobRferfmNz7BSNQ8GB0MD0oby9/5fTQ==",
       "license": "MIT",
-      "peer": true
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      }
+    },
+    "node_modules/monaco-worker-manager": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/monaco-worker-manager/-/monaco-worker-manager-2.0.1.tgz",
+      "integrity": "sha512-kdPL0yvg5qjhKPNVjJoym331PY/5JC11aPJXtCZNwWRvBr6jhkIamvYAyiY5P1AWFmNOy0aRDRoMdZfa71h8kg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "monaco-editor": ">=0.30.0"
+      }
+    },
+    "node_modules/monaco-yaml": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/monaco-yaml/-/monaco-yaml-5.4.0.tgz",
+      "integrity": "sha512-tuBVDy1KAPrgO905GHTItu8AaA5bIzF5S4X0JVRAE/D66FpRhkDUk7tKi5bwKMVTTugtpMLsXN4ewh4CgE/FtQ==",
+      "license": "MIT",
+      "workspaces": [
+        "examples/*"
+      ],
+      "dependencies": {
+        "jsonc-parser": "^3.0.0",
+        "monaco-languageserver-types": "^0.4.0",
+        "monaco-marker-data-provider": "^1.0.0",
+        "monaco-types": "^0.1.0",
+        "monaco-worker-manager": "^2.0.0",
+        "path-browserify": "^1.0.0",
+        "prettier": "^3.0.0",
+        "vscode-languageserver-textdocument": "^1.0.0",
+        "vscode-languageserver-types": "^3.0.0",
+        "vscode-uri": "^3.0.0",
+        "yaml": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">=0.36"
+      }
     },
     "node_modules/ms": {
       "version": "2.1.3",
@@ -13861,6 +13931,12 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "license": "MIT"
+    },
     "node_modules/path-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz",
@@ -14304,7 +14380,6 @@
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
       "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "prettier": "bin/prettier.cjs"
@@ -17027,6 +17102,39 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/vite-plugin-static-copy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-3.1.2.tgz",
+      "integrity": "sha512-aVmYOzptLVOI2b1jL+cmkF7O6uhRv1u5fvOkQgbohWZp2CbR22kn9ZqkCUIt9umKF7UhdbsEpshn1rf4720QFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^3.6.0",
+        "fs-extra": "^11.3.0",
+        "p-map": "^7.0.3",
+        "picocolors": "^1.1.1",
+        "tinyglobby": "^0.2.14"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/vite-plugin-static-copy/node_modules/p-map": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.3.tgz",
+      "integrity": "sha512-VkndIv2fIB99swvQoA65bm+fsmt6UNdGeIB0oxBs+WhAhdh08QA04JXpI7rbB9r08/nkbysKoya9rtDERYOYMA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/vite/node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -17151,6 +17259,43 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/vscode-jsonrpc": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz",
+      "integrity": "sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/vscode-languageserver-protocol": {
+      "version": "3.17.5",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.5.tgz",
+      "integrity": "sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==",
+      "license": "MIT",
+      "dependencies": {
+        "vscode-jsonrpc": "8.2.0",
+        "vscode-languageserver-types": "3.17.5"
+      }
+    },
+    "node_modules/vscode-languageserver-textdocument": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz",
+      "integrity": "sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==",
+      "license": "MIT"
+    },
+    "node_modules/vscode-languageserver-types": {
+      "version": "3.17.5",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz",
+      "integrity": "sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==",
+      "license": "MIT"
+    },
+    "node_modules/vscode-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
+      "integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==",
+      "license": "MIT"
+    },
     "node_modules/web-streams-polyfill": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
diff --git a/package.json b/package.json
index 9253ab34..75bf5cc9 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "@fastify/static": "8.2.0",
     "@fastify/vite": "8.2.0",
     "@hookform/resolvers": "5.2.2",
-    "@monaco-editor/react": "^4.7.0-rc.0",
+    "@monaco-editor/react": "^4.7.0",
     "@sentry/node": "10.15.0",
     "@sentry/react": "10.15.0",
     "@sentry/vite-plugin": "4.3.0",
@@ -55,6 +55,8 @@
     "i18next": "25.5.2",
     "javascript-time-ago": "2.5.12",
     "js-yaml": "4.1.0",
+    "monaco-editor": "^0.45.0",
+    "monaco-yaml": "^5.4.0",
     "react": "19.1.1",
     "react-dom": "19.1.1",
     "react-error-boundary": "6.0.0",
@@ -98,6 +100,7 @@
     "typescript": "5.9.2",
     "typescript-eslint": "8.44.1",
     "vite": "7.1.7",
+    "vite-plugin-static-copy": "^3.1.2",
     "vitest": "3.2.4"
   }
 }
diff --git a/src/components/Yaml/YamlViewer.tsx b/src/components/Yaml/YamlViewer.tsx
index fbfd62be..798e6c4e 100644
--- a/src/components/Yaml/YamlViewer.tsx
+++ b/src/components/Yaml/YamlViewer.tsx
@@ -1,17 +1,16 @@
 import { FC } from 'react';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { materialLight, materialDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
-
 import { Button, FlexBox } from '@ui5/webcomponents-react';
-import styles from './YamlViewer.module.css';
 import { useCopyToClipboard } from '../../hooks/useCopyToClipboard.ts';
 import { useTranslation } from 'react-i18next';
-import { useTheme } from '../../hooks/useTheme.ts';
 import { Editor } from '@monaco-editor/react';
+import { configureYaml } from '../../lib/monaco.ts';
+
+import styles from './YamlViewer.module.css';
+
 type YamlViewerProps = { yamlString: string; filename: string };
 const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename }) => {
   const { t } = useTranslation();
-  const { isDarkTheme } = useTheme();
+  // const { isDarkTheme } = useTheme();
   const { copyToClipboard } = useCopyToClipboard();
   const downloadYaml = () => {
     const blob = new Blob([yamlString], { type: 'text/yaml' });
@@ -35,31 +34,18 @@ const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename }) => {
           {t('buttons.download')}
         </Button>
       </FlexBox>
-      <Editor height="90vh" defaultLanguage="yaml" defaultValue={yamlString} />
-      {/*<SyntaxHighlighter*/}
-      {/*  language="yaml"*/}
-      {/*  style={isDarkTheme ? materialDark : materialLight}*/}
-      {/*  showLineNumbers*/}
-      {/*  lineNumberStyle={{*/}
-      {/*    paddingRight: '20px',*/}
-      {/*    minWidth: '40px',*/}
-      {/*    textAlign: 'right',*/}
-      {/*  }}*/}
-      {/*  customStyle={{*/}
-      {/*    margin: 0,*/}
-      {/*    padding: '20px',*/}
-      {/*    borderRadius: '4px',*/}
-      {/*    fontSize: '1rem',*/}
-      {/*    background: 'transparent',*/}
-      {/*  }}*/}
-      {/*  codeTagProps={{*/}
-      {/*    style: {*/}
-      {/*      whiteSpace: 'pre-wrap',*/}
-      {/*    },*/}
-      {/*  }}*/}
-      {/*>*/}
-      {/*  {yamlString}*/}
-      {/*</SyntaxHighlighter>*/}
+      <Editor
+        height="90vh"
+        defaultLanguage="yaml"
+        defaultValue={yamlString}
+        beforeMount={(monaco) => {
+          try {
+            configureYaml(monaco);
+          } catch (e) {
+            console.error('YAML configure error', e);
+          }
+        }}
+      />
     </div>
   );
 };
diff --git a/src/lib/monaco.ts b/src/lib/monaco.ts
new file mode 100644
index 00000000..5a1d53cd
--- /dev/null
+++ b/src/lib/monaco.ts
@@ -0,0 +1,53 @@
+/* eslint-disable import/default */
+import { loader } from '@monaco-editor/react';
+import * as monaco from 'monaco-editor';
+import { configureMonacoYaml } from 'monaco-yaml';
+
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import YamlWorker from 'monaco-yaml/yaml.worker?worker';
+
+// Use ESM monaco to avoid loading AMD loader from CDN
+loader.config({ monaco });
+
+export const configureMonaco = () => {
+  self.MonacoEnvironment = {
+    getWorker: (_: string, label: string) => {
+      if (label === 'yaml') {
+        return new YamlWorker();
+      }
+      if (label === 'json') {
+        return new JsonWorker();
+      }
+      if (label === 'css' || label === 'scss' || label === 'less') {
+        return new CssWorker();
+      }
+      if (label === 'html' || label === 'handlebars' || label === 'razor') {
+        return new HtmlWorker();
+      }
+      if (label === 'typescript' || label === 'javascript') {
+        return new TsWorker();
+      }
+      return new EditorWorker();
+    },
+  };
+};
+
+export const configureYaml = (m: typeof monaco) => {
+  configureMonacoYaml(m, {
+    enableSchemaRequest: true,
+    hover: true,
+    completion: true,
+    validate: true,
+    format: true,
+    schemas: [
+      {
+        fileMatch: ['*'],
+        uri: 'https://raw.githubusercontent.com/datreeio/datree/main/datree/json-schema/k8s-schema.json',
+      },
+    ],
+  });
+};
diff --git a/src/main.tsx b/src/main.tsx
index bd5a26d9..8518befd 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,3 +1,4 @@
+import { configureMonaco } from './lib/monaco.ts';
 import React, { Suspense } from 'react';
 import './index.css';
 import App from './App';
@@ -18,6 +19,8 @@ import IllustrationMessageType from '@ui5/webcomponents-fiori/dist/types/Illustr
 import { AuthProviderOnboarding } from './spaces/onboarding/auth/AuthContextOnboarding.tsx';
 import { AuthCallbackHandler } from './common/auth/AuthCallbackHandler.tsx';
 
+configureMonaco();
+
 const ErrorFallback = ({ error }: FallbackProps) => {
   const { t } = useTranslation();
 
diff --git a/vite.config.js b/vite.config.js
index 34b19992..382cb0aa 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,6 +3,7 @@ import { resolve } from 'node:path';
 import { defineConfig } from 'vite';
 import { viteFastify } from '@fastify/vite/plugin';
 import react from '@vitejs/plugin-react';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -11,6 +12,14 @@ export default defineConfig({
   plugins: [
     viteFastify({ spa: true }),
     react(),
+    viteStaticCopy({
+      targets: [
+        {
+          src: 'node_modules/monaco-editor/min/vs',
+          dest: 'assets',
+        },
+      ],
+    }),
     sentryVitePlugin({
       org: process.env.SENTRY_ORG,
       project: process.env.SENTRY_PROJECT,

From c72cfe8251c977a0f286bd47ca9caec0f61a9a19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Tue, 30 Sep 2025 14:15:30 +0200
Subject: [PATCH 03/32] fix

---
 src/components/Yaml/YamlViewer.tsx | 14 +-------------
 src/lib/monaco.ts                  | 24 +++---------------------
 2 files changed, 4 insertions(+), 34 deletions(-)

diff --git a/src/components/Yaml/YamlViewer.tsx b/src/components/Yaml/YamlViewer.tsx
index 798e6c4e..d96045ed 100644
--- a/src/components/Yaml/YamlViewer.tsx
+++ b/src/components/Yaml/YamlViewer.tsx
@@ -3,7 +3,6 @@ import { Button, FlexBox } from '@ui5/webcomponents-react';
 import { useCopyToClipboard } from '../../hooks/useCopyToClipboard.ts';
 import { useTranslation } from 'react-i18next';
 import { Editor } from '@monaco-editor/react';
-import { configureYaml } from '../../lib/monaco.ts';
 
 import styles from './YamlViewer.module.css';
 
@@ -34,18 +33,7 @@ const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename }) => {
           {t('buttons.download')}
         </Button>
       </FlexBox>
-      <Editor
-        height="90vh"
-        defaultLanguage="yaml"
-        defaultValue={yamlString}
-        beforeMount={(monaco) => {
-          try {
-            configureYaml(monaco);
-          } catch (e) {
-            console.error('YAML configure error', e);
-          }
-        }}
-      />
+      <Editor height="90vh" defaultLanguage="yaml" defaultValue={yamlString} />
     </div>
   );
 };
diff --git a/src/lib/monaco.ts b/src/lib/monaco.ts
index 5a1d53cd..554603de 100644
--- a/src/lib/monaco.ts
+++ b/src/lib/monaco.ts
@@ -1,14 +1,15 @@
 /* eslint-disable import/default */
 import { loader } from '@monaco-editor/react';
 import * as monaco from 'monaco-editor';
-import { configureMonacoYaml } from 'monaco-yaml';
+
+// Register YAML basic language (syntax highlighting only) to avoid LSP worker integration
+import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js';
 
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
 import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
 import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
-import YamlWorker from 'monaco-yaml/yaml.worker?worker';
 
 // Use ESM monaco to avoid loading AMD loader from CDN
 loader.config({ monaco });
@@ -16,9 +17,6 @@ loader.config({ monaco });
 export const configureMonaco = () => {
   self.MonacoEnvironment = {
     getWorker: (_: string, label: string) => {
-      if (label === 'yaml') {
-        return new YamlWorker();
-      }
       if (label === 'json') {
         return new JsonWorker();
       }
@@ -35,19 +33,3 @@ export const configureMonaco = () => {
     },
   };
 };
-
-export const configureYaml = (m: typeof monaco) => {
-  configureMonacoYaml(m, {
-    enableSchemaRequest: true,
-    hover: true,
-    completion: true,
-    validate: true,
-    format: true,
-    schemas: [
-      {
-        fileMatch: ['*'],
-        uri: 'https://raw.githubusercontent.com/datreeio/datree/main/datree/json-schema/k8s-schema.json',
-      },
-    ],
-  });
-};

From 551137ce0d5fad14dfb2906942326e45d4b727c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Tue, 30 Sep 2025 15:40:48 +0200
Subject: [PATCH 04/32] fixes

---
 package-lock.json                        | 279 -----------------------
 package.json                             |   2 -
 src/components/Yaml/YamlDiff.tsx         |  60 ++---
 src/components/Yaml/YamlViewer.tsx       |   4 +-
 src/components/YamlEditor/YamlEditor.tsx |  16 ++
 src/lib/monaco.ts                        |  63 +++++
 6 files changed, 114 insertions(+), 310 deletions(-)
 create mode 100644 src/components/YamlEditor/YamlEditor.tsx

diff --git a/package-lock.json b/package-lock.json
index 38c1281c..fc48e2b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -49,7 +49,6 @@
         "react-hook-form": "7.63.0",
         "react-i18next": "16.0.0",
         "react-router-dom": "7.9.3",
-        "react-syntax-highlighter": "15.6.6",
         "react-time-ago": "7.3.5",
         "swr": "2.3.6",
         "yaml": "2.8.1",
@@ -65,7 +64,6 @@
         "@types/node": "22.18.6",
         "@types/react": "19.1.14",
         "@types/react-dom": "19.1.9",
-        "@types/react-syntax-highlighter": "15.5.13",
         "@ui5/webcomponents-cypress-commands": "2.14.1",
         "@vitejs/plugin-react": "5.0.3",
         "@vitest/eslint-plugin": "1.3.13",
@@ -5423,15 +5421,6 @@
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "license": "MIT"
     },
-    "node_modules/@types/hast": {
-      "version": "2.3.10",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
-      "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "^2"
-      }
-    },
     "node_modules/@types/jquery": {
       "version": "3.5.32",
       "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.32.tgz",
@@ -5537,16 +5526,6 @@
         "@types/react": "^19.0.0"
       }
     },
-    "node_modules/@types/react-syntax-highlighter": {
-      "version": "15.5.13",
-      "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.13.tgz",
-      "integrity": "sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/shimmer": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@types/shimmer/-/shimmer-1.2.0.tgz",
@@ -5588,12 +5567,6 @@
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
       "license": "MIT"
     },
-    "node_modules/@types/unist": {
-      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
-      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
-      "license": "MIT"
-    },
     "node_modules/@types/ws": {
       "version": "8.18.1",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
@@ -7755,36 +7728,6 @@
         "upper-case-first": "^2.0.2"
       }
     },
-    "node_modules/character-entities": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
-      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/character-entities-legacy": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
-      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/character-reference-invalid": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
-      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/chardet": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-2.1.0.tgz",
@@ -8022,16 +7965,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/comma-separated-tokens": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
-      "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/commander": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
@@ -10401,19 +10334,6 @@
         "reusify": "^1.0.4"
       }
     },
-    "node_modules/fault": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
-      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
-      "license": "MIT",
-      "dependencies": {
-        "format": "^0.2.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/fb-watchman": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.2.tgz",
@@ -10703,14 +10623,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/format": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
-      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
     "node_modules/formdata-polyfill": {
       "version": "4.0.10",
       "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
@@ -11342,33 +11254,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/hast-util-parse-selector": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
-      "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/hastscript": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz",
-      "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/hast": "^2.0.0",
-        "comma-separated-tokens": "^1.0.0",
-        "hast-util-parse-selector": "^2.0.0",
-        "property-information": "^5.0.0",
-        "space-separated-tokens": "^1.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/header-case": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz",
@@ -11389,21 +11274,6 @@
         "node": ">=18.0.0"
       }
     },
-    "node_modules/highlight.js": {
-      "version": "10.7.3",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
-      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/highlightjs-vue": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/highlightjs-vue/-/highlightjs-vue-1.0.0.tgz",
-      "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==",
-      "license": "CC0-1.0"
-    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -11697,30 +11567,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-alphabetical": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
-      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/is-alphanumerical": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
-      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
-      "license": "MIT",
-      "dependencies": {
-        "is-alphabetical": "^1.0.0",
-        "is-decimal": "^1.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -11896,16 +11742,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-decimal": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
-      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -11971,16 +11807,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-hexadecimal": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
-      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/is-installed-globally": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
@@ -13088,20 +12914,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "node_modules/lowlight": {
-      "version": "1.20.0",
-      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
-      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
-      "license": "MIT",
-      "dependencies": {
-        "fault": "^1.0.0",
-        "highlight.js": "~10.7.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -13858,24 +13670,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/parse-entities": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
-      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
-      "license": "MIT",
-      "dependencies": {
-        "character-entities": "^1.0.0",
-        "character-entities-legacy": "^1.0.0",
-        "character-reference-invalid": "^1.0.0",
-        "is-alphanumerical": "^1.0.0",
-        "is-decimal": "^1.0.0",
-        "is-hexadecimal": "^1.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/parse-filepath": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz",
@@ -14417,15 +14211,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/prismjs": {
-      "version": "1.30.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
-      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -14482,19 +14267,6 @@
         "react-is": "^16.13.1"
       }
     },
-    "node_modules/property-information": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
-      "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==",
-      "license": "MIT",
-      "dependencies": {
-        "xtend": "^4.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -14784,23 +14556,6 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/react-syntax-highlighter": {
-      "version": "15.6.6",
-      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.6.6.tgz",
-      "integrity": "sha512-DgXrc+AZF47+HvAPEmn7Ua/1p10jNoVZVI/LoPiYdtY+OM+/nG5yefLHKJwdKqY1adMuHFbeyBaG9j64ML7vTw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "highlight.js": "^10.4.1",
-        "highlightjs-vue": "^1.0.0",
-        "lowlight": "^1.17.0",
-        "prismjs": "^1.30.0",
-        "refractor": "^3.6.0"
-      },
-      "peerDependencies": {
-        "react": ">= 0.14.0"
-      }
-    },
     "node_modules/react-time-ago": {
       "version": "7.3.5",
       "resolved": "https://registry.npmjs.org/react-time-ago/-/react-time-ago-7.3.5.tgz",
@@ -14915,30 +14670,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/refractor": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz",
-      "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==",
-      "license": "MIT",
-      "dependencies": {
-        "hastscript": "^6.0.0",
-        "parse-entities": "^2.0.0",
-        "prismjs": "~1.27.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/refractor/node_modules/prismjs": {
-      "version": "1.27.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
-      "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
@@ -15740,16 +15471,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/space-separated-tokens": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
-      "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/split2": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
diff --git a/package.json b/package.json
index 75bf5cc9..75e486e6 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,6 @@
     "react-hook-form": "7.63.0",
     "react-i18next": "16.0.0",
     "react-router-dom": "7.9.3",
-    "react-syntax-highlighter": "15.6.6",
     "react-time-ago": "7.3.5",
     "swr": "2.3.6",
     "yaml": "2.8.1",
@@ -79,7 +78,6 @@
     "@types/node": "22.18.6",
     "@types/react": "19.1.14",
     "@types/react-dom": "19.1.9",
-    "@types/react-syntax-highlighter": "15.5.13",
     "@ui5/webcomponents-cypress-commands": "2.14.1",
     "@vitejs/plugin-react": "5.0.3",
     "@vitest/eslint-plugin": "1.3.13",
diff --git a/src/components/Yaml/YamlDiff.tsx b/src/components/Yaml/YamlDiff.tsx
index 09cd40d3..3486cb34 100644
--- a/src/components/Yaml/YamlDiff.tsx
+++ b/src/components/Yaml/YamlDiff.tsx
@@ -1,9 +1,6 @@
 import { FC, useMemo } from 'react';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { materialLight, materialDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { diffLines } from 'diff';
 import styles from './YamlDiff.module.css';
-import { useTheme } from '../../hooks/useTheme.ts';
 
 type YamlDiffProps = {
   originalYaml: string;
@@ -11,46 +8,55 @@ type YamlDiffProps = {
 };
 
 export const YamlDiff: FC<YamlDiffProps> = ({ originalYaml, modifiedYaml }) => {
-  const { isDarkTheme } = useTheme();
-
   const hunks = useMemo(() => diffLines(originalYaml ?? '', modifiedYaml ?? ''), [originalYaml, modifiedYaml]);
 
-  const { content, lineKinds } = useMemo(() => {
-    const lines: string[] = [];
+  const { lines, lineKinds } = useMemo(() => {
+    const _lines: string[] = [];
     const kinds: ('added' | 'removed' | 'context')[] = [];
     hunks.forEach((part) => {
       const prefix = part.added ? '+' : part.removed ? '-' : ' ';
       const kind: 'added' | 'removed' | 'context' = part.added ? 'added' : part.removed ? 'removed' : 'context';
       const partLines = part.value.replace(/\n$/, '').split('\n');
       partLines.forEach((line) => {
-        lines.push(`${prefix}${line}`);
+        _lines.push(`${prefix}${line}`);
         kinds.push(kind);
       });
     });
-    return { content: lines.join('\n'), lineKinds: kinds };
+    return { lines: _lines, lineKinds: kinds };
   }, [hunks]);
 
-  const lineNumberStyle = useMemo(() => ({ paddingRight: '20px', minWidth: '40px', textAlign: 'right' as const }), []);
+  const lineNumberStyle: React.CSSProperties = useMemo(
+    () => ({ paddingRight: 20, minWidth: 40, textAlign: 'right', opacity: 0.7 }),
+    [],
+  );
+
+  const containerStyle: React.CSSProperties = useMemo(
+    () => ({
+      margin: 0,
+      padding: 20,
+      borderRadius: 4,
+      fontSize: '1rem',
+      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+      background: 'transparent',
+      whiteSpace: 'pre-wrap',
+    }),
+    [],
+  );
 
   return (
     <div className={styles.container}>
-      <SyntaxHighlighter
-        language="diff"
-        style={isDarkTheme ? materialDark : materialLight}
-        showLineNumbers
-        wrapLongLines
-        lineNumberStyle={lineNumberStyle}
-        lineProps={(lineNumber) => {
-          const kind = lineKinds[lineNumber - 1];
-          if (kind === 'added') return { className: styles.added };
-          if (kind === 'removed') return { className: styles.removed };
-          return {};
-        }}
-        customStyle={{ margin: 0, padding: '20px', borderRadius: '4px', fontSize: '1rem', background: 'transparent' }}
-        codeTagProps={{ style: { whiteSpace: 'pre-wrap' } }}
-      >
-        {content}
-      </SyntaxHighlighter>
+      <div style={containerStyle}>
+        {lines.map((text, idx) => {
+          const kind = lineKinds[idx];
+          const className = kind === 'added' ? styles.added : kind === 'removed' ? styles.removed : undefined;
+          return (
+            <div key={idx} className={className} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 12 }}>
+              <span style={lineNumberStyle}>{idx + 1}</span>
+              <span>{text}</span>
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 };
diff --git a/src/components/Yaml/YamlViewer.tsx b/src/components/Yaml/YamlViewer.tsx
index d96045ed..e17aa826 100644
--- a/src/components/Yaml/YamlViewer.tsx
+++ b/src/components/Yaml/YamlViewer.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { Button, FlexBox } from '@ui5/webcomponents-react';
 import { useCopyToClipboard } from '../../hooks/useCopyToClipboard.ts';
 import { useTranslation } from 'react-i18next';
-import { Editor } from '@monaco-editor/react';
+import { YamlEditor } from '../YamlEditor/YamlEditor';
 
 import styles from './YamlViewer.module.css';
 
@@ -33,7 +33,7 @@ const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename }) => {
           {t('buttons.download')}
         </Button>
       </FlexBox>
-      <Editor height="90vh" defaultLanguage="yaml" defaultValue={yamlString} />
+      <YamlEditor height="90vh" defaultLanguage="yaml" defaultValue={yamlString} />
     </div>
   );
 };
diff --git a/src/components/YamlEditor/YamlEditor.tsx b/src/components/YamlEditor/YamlEditor.tsx
new file mode 100644
index 00000000..f5d79411
--- /dev/null
+++ b/src/components/YamlEditor/YamlEditor.tsx
@@ -0,0 +1,16 @@
+import { Editor } from '@monaco-editor/react';
+import type { ComponentProps } from 'react';
+import { useTheme } from '../../hooks/useTheme';
+import { VS_CODE_DARK_PLUS, VS_CODE_LIGHT_PLUS } from '../../lib/monaco.ts';
+
+// Reuse all props from the underlying Monaco Editor component
+export type YamlEditorProps = ComponentProps<typeof Editor>;
+
+// Simple wrapper that forwards all props to Monaco Editor
+export const YamlEditor = (props: YamlEditorProps) => {
+  const { isDarkTheme } = useTheme();
+  const { theme, ...rest } = props;
+  const computedTheme = theme ?? (isDarkTheme ? VS_CODE_DARK_PLUS : VS_CODE_LIGHT_PLUS);
+
+  return <Editor theme={computedTheme} {...rest} />;
+};
diff --git a/src/lib/monaco.ts b/src/lib/monaco.ts
index 554603de..77ab3b68 100644
--- a/src/lib/monaco.ts
+++ b/src/lib/monaco.ts
@@ -14,6 +14,9 @@ import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
 // Use ESM monaco to avoid loading AMD loader from CDN
 loader.config({ monaco });
 
+export const VS_CODE_LIGHT_PLUS = 'vscode-light-plus';
+export const VS_CODE_DARK_PLUS = 'vscode-dark-plus';
+
 export const configureMonaco = () => {
   self.MonacoEnvironment = {
     getWorker: (_: string, label: string) => {
@@ -32,4 +35,64 @@ export const configureMonaco = () => {
       return new EditorWorker();
     },
   };
+
+  // Define VS Code-like themes (Light+ and Dark+) by extending Monaco's built-ins
+  // Values chosen mirror VS Code defaults for key editor colors; we inherit all other colors.
+  monaco.editor.defineTheme(VS_CODE_DARK_PLUS, {
+    base: 'vs-dark',
+    inherit: true,
+    rules: [],
+    colors: {
+      // Core editor surface
+      'editor.background': '#1e1e1e',
+      'editor.foreground': '#d4d4d4',
+      'editor.lineHighlightBackground': '#2a2a2a',
+      'editor.selectionBackground': '#264f78',
+      'editor.inactiveSelectionBackground': '#3a3d41',
+      'editor.selectionHighlightBackground': '#ADD6FF26',
+      'editor.wordHighlightBackground': '#575757B8',
+      'editor.wordHighlightStrongBackground': '#004972B8',
+      'editorCursor.foreground': '#aeafad',
+      'editorLineNumber.foreground': '#858585',
+      'editorLineNumber.activeForeground': '#c6c6c6',
+      'editorIndentGuide.background': '#404040',
+      'editorIndentGuide.activeBackground': '#707070',
+      'editorGutter.background': '#1e1e1e',
+      // Widgets
+      'editorWidget.background': '#252526',
+      'editorWidget.border': '#454545',
+      'editorSuggestWidget.background': '#252526',
+      'editorSuggestWidget.border': '#454545',
+      'editorHoverWidget.background': '#252526',
+      'editorHoverWidget.border': '#454545',
+    },
+  });
+
+  monaco.editor.defineTheme(VS_CODE_LIGHT_PLUS, {
+    base: 'vs',
+    inherit: true,
+    rules: [],
+    colors: {
+      'editor.background': '#ffffff',
+      'editor.foreground': '#333333',
+      'editor.lineHighlightBackground': '#F0F0F0',
+      'editor.selectionBackground': '#ADD6FF',
+      'editor.inactiveSelectionBackground': '#E5EBF1',
+      'editor.selectionHighlightBackground': '#ADD6FF40',
+      'editor.wordHighlightBackground': '#57575740',
+      'editor.wordHighlightStrongBackground': '#00497240',
+      'editorCursor.foreground': '#000000',
+      'editorLineNumber.foreground': '#23789380',
+      'editorLineNumber.activeForeground': '#0B216F',
+      'editorIndentGuide.background': '#d3d3d3',
+      'editorIndentGuide.activeBackground': '#939393',
+      'editorGutter.background': '#ffffff',
+      'editorWidget.background': '#F3F3F3',
+      'editorWidget.border': '#C8C8C8',
+      'editorSuggestWidget.background': '#F3F3F3',
+      'editorSuggestWidget.border': '#C8C8C8',
+      'editorHoverWidget.background': '#F3F3F3',
+      'editorHoverWidget.border': '#C8C8C8',
+    },
+  });
 };

From 2c2616826bba3a06d8b91f05b4d597c4e0eca965 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Tue, 30 Sep 2025 15:43:17 +0200
Subject: [PATCH 05/32] Create YamlDiffEditor.tsx

---
 src/components/YamlEditor/YamlDiffEditor.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/components/YamlEditor/YamlDiffEditor.tsx

diff --git a/src/components/YamlEditor/YamlDiffEditor.tsx b/src/components/YamlEditor/YamlDiffEditor.tsx
new file mode 100644
index 00000000..6b5ce798
--- /dev/null
+++ b/src/components/YamlEditor/YamlDiffEditor.tsx
@@ -0,0 +1,16 @@
+import { DiffEditor } from '@monaco-editor/react';
+import type { ComponentProps } from 'react';
+import { useTheme } from '../../hooks/useTheme';
+import { VS_CODE_DARK_PLUS, VS_CODE_LIGHT_PLUS } from '../../lib/monaco.ts';
+
+// Reuse all props from the underlying Monaco DiffEditor component
+export type YamlDiffEditorProps = ComponentProps<typeof DiffEditor>;
+
+// Simple wrapper that forwards all props to Monaco DiffEditor
+export const YamlDiffEditor = (props: YamlDiffEditorProps) => {
+  const { isDarkTheme } = useTheme();
+  const { theme, ...rest } = props;
+  const computedTheme = theme ?? (isDarkTheme ? VS_CODE_DARK_PLUS : VS_CODE_LIGHT_PLUS);
+
+  return <DiffEditor theme={computedTheme} {...rest} />;
+};

From 74b20cfaf9bd8709c0917c664bda0b0217be8d1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Tue, 30 Sep 2025 15:47:28 +0200
Subject: [PATCH 06/32] fix

---
 src/components/Yaml/YamlDiff.module.css      | 11 ----
 src/components/Yaml/YamlDiff.tsx             | 58 ++------------------
 src/components/YamlEditor/YamlDiffEditor.tsx |  2 +-
 3 files changed, 5 insertions(+), 66 deletions(-)
 delete mode 100644 src/components/Yaml/YamlDiff.module.css

diff --git a/src/components/Yaml/YamlDiff.module.css b/src/components/Yaml/YamlDiff.module.css
deleted file mode 100644
index be7300f6..00000000
--- a/src/components/Yaml/YamlDiff.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.container {
-  width: 100%;
-}
-
-.added {
-  background-color: rgba(56, 142, 60, 0.18);
-}
-
-.removed {
-  background-color: rgba(211, 47, 47, 0.18);
-}
diff --git a/src/components/Yaml/YamlDiff.tsx b/src/components/Yaml/YamlDiff.tsx
index 3486cb34..d527ec92 100644
--- a/src/components/Yaml/YamlDiff.tsx
+++ b/src/components/Yaml/YamlDiff.tsx
@@ -1,6 +1,6 @@
-import { FC, useMemo } from 'react';
-import { diffLines } from 'diff';
-import styles from './YamlDiff.module.css';
+import { FC } from 'react';
+
+import { YamlDiffEditor } from '../YamlEditor/YamlDiffEditor.tsx';
 
 type YamlDiffProps = {
   originalYaml: string;
@@ -8,55 +8,5 @@ type YamlDiffProps = {
 };
 
 export const YamlDiff: FC<YamlDiffProps> = ({ originalYaml, modifiedYaml }) => {
-  const hunks = useMemo(() => diffLines(originalYaml ?? '', modifiedYaml ?? ''), [originalYaml, modifiedYaml]);
-
-  const { lines, lineKinds } = useMemo(() => {
-    const _lines: string[] = [];
-    const kinds: ('added' | 'removed' | 'context')[] = [];
-    hunks.forEach((part) => {
-      const prefix = part.added ? '+' : part.removed ? '-' : ' ';
-      const kind: 'added' | 'removed' | 'context' = part.added ? 'added' : part.removed ? 'removed' : 'context';
-      const partLines = part.value.replace(/\n$/, '').split('\n');
-      partLines.forEach((line) => {
-        _lines.push(`${prefix}${line}`);
-        kinds.push(kind);
-      });
-    });
-    return { lines: _lines, lineKinds: kinds };
-  }, [hunks]);
-
-  const lineNumberStyle: React.CSSProperties = useMemo(
-    () => ({ paddingRight: 20, minWidth: 40, textAlign: 'right', opacity: 0.7 }),
-    [],
-  );
-
-  const containerStyle: React.CSSProperties = useMemo(
-    () => ({
-      margin: 0,
-      padding: 20,
-      borderRadius: 4,
-      fontSize: '1rem',
-      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-      background: 'transparent',
-      whiteSpace: 'pre-wrap',
-    }),
-    [],
-  );
-
-  return (
-    <div className={styles.container}>
-      <div style={containerStyle}>
-        {lines.map((text, idx) => {
-          const kind = lineKinds[idx];
-          const className = kind === 'added' ? styles.added : kind === 'removed' ? styles.removed : undefined;
-          return (
-            <div key={idx} className={className} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 12 }}>
-              <span style={lineNumberStyle}>{idx + 1}</span>
-              <span>{text}</span>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
+  return <YamlDiffEditor original={originalYaml} modified={modifiedYaml} />;
 };
diff --git a/src/components/YamlEditor/YamlDiffEditor.tsx b/src/components/YamlEditor/YamlDiffEditor.tsx
index 6b5ce798..d65d4e18 100644
--- a/src/components/YamlEditor/YamlDiffEditor.tsx
+++ b/src/components/YamlEditor/YamlDiffEditor.tsx
@@ -12,5 +12,5 @@ export const YamlDiffEditor = (props: YamlDiffEditorProps) => {
   const { theme, ...rest } = props;
   const computedTheme = theme ?? (isDarkTheme ? VS_CODE_DARK_PLUS : VS_CODE_LIGHT_PLUS);
 
-  return <DiffEditor theme={computedTheme} {...rest} />;
+  return <DiffEditor height={'50vh'} theme={computedTheme} {...rest} />;
 };

From f0f6d7a8490350787ba56382db2ef7727650d0d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Tue, 30 Sep 2025 16:05:42 +0200
Subject: [PATCH 07/32] fix

---
 src/components/Yaml/YamlViewer.tsx           |  2 +-
 src/components/YamlEditor/YamlDiffEditor.tsx | 43 ++++++++++++++++++--
 src/components/YamlEditor/YamlEditor.tsx     | 13 ++++--
 src/lib/monaco.ts                            | 18 +-------
 4 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/src/components/Yaml/YamlViewer.tsx b/src/components/Yaml/YamlViewer.tsx
index e17aa826..22bd37f4 100644
--- a/src/components/Yaml/YamlViewer.tsx
+++ b/src/components/Yaml/YamlViewer.tsx
@@ -33,7 +33,7 @@ const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename }) => {
           {t('buttons.download')}
         </Button>
       </FlexBox>
-      <YamlEditor height="90vh" defaultLanguage="yaml" defaultValue={yamlString} />
+      <YamlEditor height="90vh" defaultValue={yamlString} />
     </div>
   );
 };
diff --git a/src/components/YamlEditor/YamlDiffEditor.tsx b/src/components/YamlEditor/YamlDiffEditor.tsx
index d65d4e18..a25cc02e 100644
--- a/src/components/YamlEditor/YamlDiffEditor.tsx
+++ b/src/components/YamlEditor/YamlDiffEditor.tsx
@@ -3,14 +3,49 @@ import type { ComponentProps } from 'react';
 import { useTheme } from '../../hooks/useTheme';
 import { VS_CODE_DARK_PLUS, VS_CODE_LIGHT_PLUS } from '../../lib/monaco.ts';
 
-// Reuse all props from the underlying Monaco DiffEditor component
-export type YamlDiffEditorProps = ComponentProps<typeof DiffEditor>;
+// Reuse all props from the underlying Monaco DiffEditor component, except language (we force YAML)
+export type YamlDiffEditorProps = Omit<
+  ComponentProps<typeof DiffEditor>,
+  'language' | 'defaultLanguage' | 'originalLanguage' | 'modifiedLanguage'
+>;
 
 // Simple wrapper that forwards all props to Monaco DiffEditor
 export const YamlDiffEditor = (props: YamlDiffEditorProps) => {
   const { isDarkTheme } = useTheme();
-  const { theme, ...rest } = props;
+  const { theme, options, ...rest } = props;
   const computedTheme = theme ?? (isDarkTheme ? VS_CODE_DARK_PLUS : VS_CODE_LIGHT_PLUS);
 
-  return <DiffEditor height={'50vh'} theme={computedTheme} {...rest} />;
+  const simplifiedOptions = {
+    // Start from consumer-provided options, then enforce our simplified look
+    ...options,
+    scrollbar: {
+      ...(options?.scrollbar ?? {}),
+      useShadows: false,
+      vertical: 'auto' as const,
+      horizontal: 'auto' as const,
+      alwaysConsumeMouseWheel: false,
+    },
+    lineNumbers: 'off' as const,
+    minimap: { enabled: false },
+    glyphMargin: false,
+    renderLineHighlight: 'none' as const,
+    folding: false,
+    renderOverviewRuler: false,
+    scrollBeyondLastLine: false,
+    renderMarginRevertIcon: false,
+    automaticLayout: true,
+  };
+
+  return (
+    <div style={{ width: '100%', height: '100%', minHeight: '50vh' }}>
+      <DiffEditor
+        {...rest}
+        theme={computedTheme}
+        options={simplifiedOptions}
+        height="90vh"
+        // Force YAML language for both panes
+        language="yaml"
+      />
+    </div>
+  );
 };
diff --git a/src/components/YamlEditor/YamlEditor.tsx b/src/components/YamlEditor/YamlEditor.tsx
index f5d79411..89d1b8c5 100644
--- a/src/components/YamlEditor/YamlEditor.tsx
+++ b/src/components/YamlEditor/YamlEditor.tsx
@@ -3,8 +3,8 @@ import type { ComponentProps } from 'react';
 import { useTheme } from '../../hooks/useTheme';
 import { VS_CODE_DARK_PLUS, VS_CODE_LIGHT_PLUS } from '../../lib/monaco.ts';
 
-// Reuse all props from the underlying Monaco Editor component
-export type YamlEditorProps = ComponentProps<typeof Editor>;
+// Reuse all props from the underlying Monaco Editor component, except language (we force YAML)
+export type YamlEditorProps = Omit<ComponentProps<typeof Editor>, 'language'>;
 
 // Simple wrapper that forwards all props to Monaco Editor
 export const YamlEditor = (props: YamlEditorProps) => {
@@ -12,5 +12,12 @@ export const YamlEditor = (props: YamlEditorProps) => {
   const { theme, ...rest } = props;
   const computedTheme = theme ?? (isDarkTheme ? VS_CODE_DARK_PLUS : VS_CODE_LIGHT_PLUS);
 
-  return <Editor theme={computedTheme} {...rest} />;
+  return (
+    <Editor
+      {...rest}
+      theme={computedTheme}
+      // Force YAML language for this editor wrapper
+      language="yaml"
+    />
+  );
 };
diff --git a/src/lib/monaco.ts b/src/lib/monaco.ts
index 77ab3b68..fa7ceef7 100644
--- a/src/lib/monaco.ts
+++ b/src/lib/monaco.ts
@@ -6,10 +6,6 @@ import * as monaco from 'monaco-editor';
 import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js';
 
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
-import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
-import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
-import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 
 // Use ESM monaco to avoid loading AMD loader from CDN
 loader.config({ monaco });
@@ -19,19 +15,7 @@ export const VS_CODE_DARK_PLUS = 'vscode-dark-plus';
 
 export const configureMonaco = () => {
   self.MonacoEnvironment = {
-    getWorker: (_: string, label: string) => {
-      if (label === 'json') {
-        return new JsonWorker();
-      }
-      if (label === 'css' || label === 'scss' || label === 'less') {
-        return new CssWorker();
-      }
-      if (label === 'html' || label === 'handlebars' || label === 'razor') {
-        return new HtmlWorker();
-      }
-      if (label === 'typescript' || label === 'javascript') {
-        return new TsWorker();
-      }
+    getWorker: (_: string) => {
       return new EditorWorker();
     },
   };

From a7d1fe5f20da9d7c1ba32931b3f3c6fb265e8bb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Wed, 1 Oct 2025 09:33:23 +0200
Subject: [PATCH 08/32] Create remove-me.yaml

---
 remove-me.yaml | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 remove-me.yaml

diff --git a/remove-me.yaml b/remove-me.yaml
new file mode 100644
index 00000000..a7f3e07c
--- /dev/null
+++ b/remove-me.yaml
@@ -0,0 +1,19 @@
+apiVersion: core.openmcp.cloud/v1alpha1
+kind: Project
+metadata:
+  annotations:
+    core.openmcp.cloud/created-by: system:serviceaccount:velero:velero
+  creationTimestamp: 2025-02-04T14:15:38Z
+  finalizers:
+    - core.openmcp.cloud
+  generation: 5
+  labels:
+    openmcp.cloud.sap/charging-target: 8b7fcd40-9784-4c4c-bcd6-f1a7c7ce9566
+    openmcp.cloud.sap/charging-target-type: btp
+    velero.io/backup-name: crate-20250204131044
+    velero.io/restore-name: crate-20250204151534
+  name: webapp-playground
+  resourceVersion: '57186282'
+  uid: fb2553a9-02bc-4db7-b4e3-a6204f6decb3
+status:
+  namespace: project-webapp-playground

From 761f2b61f3d110917674250db9c5b46f9d9a6596 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Wed, 1 Oct 2025 10:22:13 +0200
Subject: [PATCH 09/32] fix

---
 src/components/YamlEditor/YamlDiffEditor.tsx |  4 +-
 src/components/YamlEditor/YamlEditor.tsx     |  4 +-
 src/lib/monaco.ts                            | 65 +-------------------
 3 files changed, 6 insertions(+), 67 deletions(-)

diff --git a/src/components/YamlEditor/YamlDiffEditor.tsx b/src/components/YamlEditor/YamlDiffEditor.tsx
index a25cc02e..b72ee9c7 100644
--- a/src/components/YamlEditor/YamlDiffEditor.tsx
+++ b/src/components/YamlEditor/YamlDiffEditor.tsx
@@ -1,7 +1,7 @@
 import { DiffEditor } from '@monaco-editor/react';
 import type { ComponentProps } from 'react';
 import { useTheme } from '../../hooks/useTheme';
-import { VS_CODE_DARK_PLUS, VS_CODE_LIGHT_PLUS } from '../../lib/monaco.ts';
+import { GITHUB_DARK_DEFAULT, GITHUB_LIGHT_DEFAULT } from '../../lib/monaco.ts';
 
 // Reuse all props from the underlying Monaco DiffEditor component, except language (we force YAML)
 export type YamlDiffEditorProps = Omit<
@@ -13,7 +13,7 @@ export type YamlDiffEditorProps = Omit<
 export const YamlDiffEditor = (props: YamlDiffEditorProps) => {
   const { isDarkTheme } = useTheme();
   const { theme, options, ...rest } = props;
-  const computedTheme = theme ?? (isDarkTheme ? VS_CODE_DARK_PLUS : VS_CODE_LIGHT_PLUS);
+  const computedTheme = theme ?? (isDarkTheme ? GITHUB_DARK_DEFAULT : GITHUB_LIGHT_DEFAULT);
 
   const simplifiedOptions = {
     // Start from consumer-provided options, then enforce our simplified look
diff --git a/src/components/YamlEditor/YamlEditor.tsx b/src/components/YamlEditor/YamlEditor.tsx
index 89d1b8c5..e5f4e803 100644
--- a/src/components/YamlEditor/YamlEditor.tsx
+++ b/src/components/YamlEditor/YamlEditor.tsx
@@ -1,7 +1,7 @@
 import { Editor } from '@monaco-editor/react';
 import type { ComponentProps } from 'react';
 import { useTheme } from '../../hooks/useTheme';
-import { VS_CODE_DARK_PLUS, VS_CODE_LIGHT_PLUS } from '../../lib/monaco.ts';
+import { GITHUB_DARK_DEFAULT, GITHUB_LIGHT_DEFAULT } from '../../lib/monaco.ts';
 
 // Reuse all props from the underlying Monaco Editor component, except language (we force YAML)
 export type YamlEditorProps = Omit<ComponentProps<typeof Editor>, 'language'>;
@@ -10,7 +10,7 @@ export type YamlEditorProps = Omit<ComponentProps<typeof Editor>, 'language'>;
 export const YamlEditor = (props: YamlEditorProps) => {
   const { isDarkTheme } = useTheme();
   const { theme, ...rest } = props;
-  const computedTheme = theme ?? (isDarkTheme ? VS_CODE_DARK_PLUS : VS_CODE_LIGHT_PLUS);
+  const computedTheme = theme ?? (isDarkTheme ? GITHUB_DARK_DEFAULT : GITHUB_LIGHT_DEFAULT);
 
   return (
     <Editor
diff --git a/src/lib/monaco.ts b/src/lib/monaco.ts
index fa7ceef7..c98dd8f9 100644
--- a/src/lib/monaco.ts
+++ b/src/lib/monaco.ts
@@ -10,73 +10,12 @@ import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 // Use ESM monaco to avoid loading AMD loader from CDN
 loader.config({ monaco });
 
-export const VS_CODE_LIGHT_PLUS = 'vscode-light-plus';
-export const VS_CODE_DARK_PLUS = 'vscode-dark-plus';
-
+export const GITHUB_LIGHT_DEFAULT = 'github-light-default';
+export const GITHUB_DARK_DEFAULT = 'github-dark-default';
 export const configureMonaco = () => {
   self.MonacoEnvironment = {
     getWorker: (_: string) => {
       return new EditorWorker();
     },
   };
-
-  // Define VS Code-like themes (Light+ and Dark+) by extending Monaco's built-ins
-  // Values chosen mirror VS Code defaults for key editor colors; we inherit all other colors.
-  monaco.editor.defineTheme(VS_CODE_DARK_PLUS, {
-    base: 'vs-dark',
-    inherit: true,
-    rules: [],
-    colors: {
-      // Core editor surface
-      'editor.background': '#1e1e1e',
-      'editor.foreground': '#d4d4d4',
-      'editor.lineHighlightBackground': '#2a2a2a',
-      'editor.selectionBackground': '#264f78',
-      'editor.inactiveSelectionBackground': '#3a3d41',
-      'editor.selectionHighlightBackground': '#ADD6FF26',
-      'editor.wordHighlightBackground': '#575757B8',
-      'editor.wordHighlightStrongBackground': '#004972B8',
-      'editorCursor.foreground': '#aeafad',
-      'editorLineNumber.foreground': '#858585',
-      'editorLineNumber.activeForeground': '#c6c6c6',
-      'editorIndentGuide.background': '#404040',
-      'editorIndentGuide.activeBackground': '#707070',
-      'editorGutter.background': '#1e1e1e',
-      // Widgets
-      'editorWidget.background': '#252526',
-      'editorWidget.border': '#454545',
-      'editorSuggestWidget.background': '#252526',
-      'editorSuggestWidget.border': '#454545',
-      'editorHoverWidget.background': '#252526',
-      'editorHoverWidget.border': '#454545',
-    },
-  });
-
-  monaco.editor.defineTheme(VS_CODE_LIGHT_PLUS, {
-    base: 'vs',
-    inherit: true,
-    rules: [],
-    colors: {
-      'editor.background': '#ffffff',
-      'editor.foreground': '#333333',
-      'editor.lineHighlightBackground': '#F0F0F0',
-      'editor.selectionBackground': '#ADD6FF',
-      'editor.inactiveSelectionBackground': '#E5EBF1',
-      'editor.selectionHighlightBackground': '#ADD6FF40',
-      'editor.wordHighlightBackground': '#57575740',
-      'editor.wordHighlightStrongBackground': '#00497240',
-      'editorCursor.foreground': '#000000',
-      'editorLineNumber.foreground': '#23789380',
-      'editorLineNumber.activeForeground': '#0B216F',
-      'editorIndentGuide.background': '#d3d3d3',
-      'editorIndentGuide.activeBackground': '#939393',
-      'editorGutter.background': '#ffffff',
-      'editorWidget.background': '#F3F3F3',
-      'editorWidget.border': '#C8C8C8',
-      'editorSuggestWidget.background': '#F3F3F3',
-      'editorSuggestWidget.border': '#C8C8C8',
-      'editorHoverWidget.background': '#F3F3F3',
-      'editorHoverWidget.border': '#C8C8C8',
-    },
-  });
 };

From 2f8fbaccd2928286e55182ced767a42899040868 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Wed, 1 Oct 2025 10:22:34 +0200
Subject: [PATCH 10/32] Delete remove-me.yaml

---
 remove-me.yaml | 19 -------------------
 1 file changed, 19 deletions(-)
 delete mode 100644 remove-me.yaml

diff --git a/remove-me.yaml b/remove-me.yaml
deleted file mode 100644
index a7f3e07c..00000000
--- a/remove-me.yaml
+++ /dev/null
@@ -1,19 +0,0 @@
-apiVersion: core.openmcp.cloud/v1alpha1
-kind: Project
-metadata:
-  annotations:
-    core.openmcp.cloud/created-by: system:serviceaccount:velero:velero
-  creationTimestamp: 2025-02-04T14:15:38Z
-  finalizers:
-    - core.openmcp.cloud
-  generation: 5
-  labels:
-    openmcp.cloud.sap/charging-target: 8b7fcd40-9784-4c4c-bcd6-f1a7c7ce9566
-    openmcp.cloud.sap/charging-target-type: btp
-    velero.io/backup-name: crate-20250204131044
-    velero.io/restore-name: crate-20250204151534
-  name: webapp-playground
-  resourceVersion: '57186282'
-  uid: fb2553a9-02bc-4db7-b4e3-a6204f6decb3
-status:
-  namespace: project-webapp-playground

From b7b3c66fdf1120c398e7bdf1b4d88c3d82b8eada Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Wed, 1 Oct 2025 11:34:27 +0200
Subject: [PATCH 11/32] fix

---
 scripts/generate-github-themes.ts        | 40 +++++++++++
 src/components/YamlEditor/YamlEditor.tsx |  8 ++-
 src/lib/monaco.ts                        | 90 +++++++++++++++++++++++-
 3 files changed, 134 insertions(+), 4 deletions(-)
 create mode 100644 scripts/generate-github-themes.ts

diff --git a/scripts/generate-github-themes.ts b/scripts/generate-github-themes.ts
new file mode 100644
index 00000000..2ac66d89
--- /dev/null
+++ b/scripts/generate-github-themes.ts
@@ -0,0 +1,40 @@
+/* Script to generate GitHub Light/Dark Default Monaco theme JSON files locally.
+ * It uses the generator from github-vscode-theme (CJS) and writes to src/lib/themes.
+ */
+
+import { mkdir, writeFile } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+// Use CJS module via dynamic import; this path is resolvable in Node (not via Vite bundler)
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const getThemeModule = await import('github-vscode-theme/src/theme.js');
+
+// Interop for CJS default export
+const getTheme: (args: { theme: 'light' | 'dark' | string; name: string }) => any =
+  // @ts-expect-error - cjs interop
+  getThemeModule.default || getThemeModule;
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+async function main() {
+  const outDir = resolve(__dirname, '../src/lib/themes');
+  await mkdir(outDir, { recursive: true });
+
+  const light = getTheme({ theme: 'light', name: 'GitHub Light Default' });
+  const dark = getTheme({ theme: 'dark', name: 'GitHub Dark Default' });
+
+  await writeFile(resolve(outDir, 'github-light-default.json'), JSON.stringify(light, null, 2), 'utf-8');
+  await writeFile(resolve(outDir, 'github-dark-default.json'), JSON.stringify(dark, null, 2), 'utf-8');
+
+  // eslint-disable-next-line no-console
+  console.log('Generated themes at', outDir);
+}
+
+main().catch((err) => {
+  // eslint-disable-next-line no-console
+  console.error('Failed to generate themes:', err);
+  process.exitCode = 1;
+});
diff --git a/src/components/YamlEditor/YamlEditor.tsx b/src/components/YamlEditor/YamlEditor.tsx
index e5f4e803..06eb5519 100644
--- a/src/components/YamlEditor/YamlEditor.tsx
+++ b/src/components/YamlEditor/YamlEditor.tsx
@@ -9,13 +9,19 @@ export type YamlEditorProps = Omit<ComponentProps<typeof Editor>, 'language'>;
 // Simple wrapper that forwards all props to Monaco Editor
 export const YamlEditor = (props: YamlEditorProps) => {
   const { isDarkTheme } = useTheme();
-  const { theme, ...rest } = props;
+  const { theme, options, ...rest } = props;
   const computedTheme = theme ?? (isDarkTheme ? GITHUB_DARK_DEFAULT : GITHUB_LIGHT_DEFAULT);
 
+  const enforcedOptions = {
+    ...options,
+    minimap: { enabled: false },
+  };
+
   return (
     <Editor
       {...rest}
       theme={computedTheme}
+      options={enforcedOptions}
       // Force YAML language for this editor wrapper
       language="yaml"
     />
diff --git a/src/lib/monaco.ts b/src/lib/monaco.ts
index c98dd8f9..ccfc2b12 100644
--- a/src/lib/monaco.ts
+++ b/src/lib/monaco.ts
@@ -12,10 +12,94 @@ loader.config({ monaco });
 
 export const GITHUB_LIGHT_DEFAULT = 'github-light-default';
 export const GITHUB_DARK_DEFAULT = 'github-dark-default';
+
+// Lightweight RGBA helper
+function rgba(hex: string, alpha: number) {
+  const h = hex.replace('#', '');
+  const v =
+    h.length === 3
+      ? h
+          .split('')
+          .map((c) => c + c)
+          .join('')
+      : h;
+  const n = parseInt(v, 16);
+  // If parse fails, fallback to transparent
+  if (Number.isNaN(n)) return `rgba(0,0,0,${alpha})`;
+  const r = (n >> 16) & 255;
+  const g = (n >> 8) & 255;
+  const b = n & 255;
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+// Inlined GitHub Light Default editor colors (subset focused on Monaco editor UI)
+const GITHUB_LIGHT_EDITOR_COLORS: monaco.editor.IColors = {
+  'editor.foreground': '#1f2328',
+  'editor.background': '#ffffff',
+  'editorWidget.background': '#f6f8fa',
+  'editor.lineHighlightBackground': '#eaeef2',
+  'editorCursor.foreground': '#0969da',
+  'editor.selectionBackground': rgba('#0969da', 0.2),
+  'editor.inactiveSelectionBackground': rgba('#0969da', 0.07),
+  'editor.selectionHighlightBackground': rgba('#1a7f37', 0.25),
+  'editorLineNumber.foreground': '#8c959f',
+  'editorLineNumber.activeForeground': '#1f2328',
+  'editorIndentGuide.background': rgba('#1f2328', 0.12),
+  'editorIndentGuide.activeBackground': rgba('#1f2328', 0.24),
+  'editorGutter.background': '#ffffff',
+  'editorHoverWidget.background': '#f6f8fa',
+  'editorHoverWidget.border': '#d0d7de',
+  'editorSuggestWidget.background': '#f6f8fa',
+  'editorSuggestWidget.border': '#d0d7de',
+  'editorWidget.border': '#d0d7de',
+  'editorWhitespace.foreground': '#d0d7de',
+  'editor.wordHighlightBackground': rgba('#afb8c1', 0.5),
+  'editor.wordHighlightStrongBackground': rgba('#afb8c1', 0.3),
+};
+
+// Inlined GitHub Dark Default editor colors (subset focused on Monaco editor UI)
+const GITHUB_DARK_EDITOR_COLORS: monaco.editor.IColors = {
+  'editor.foreground': '#e6edf3',
+  'editor.background': '#0d1117',
+  'editorWidget.background': '#161b22',
+  'editor.lineHighlightBackground': '#161b22',
+  'editorCursor.foreground': '#2f81f7',
+  'editor.selectionBackground': rgba('#2f81f7', 0.2),
+  'editor.inactiveSelectionBackground': rgba('#2f81f7', 0.07),
+  'editor.selectionHighlightBackground': rgba('#2ea043', 0.25),
+  'editorLineNumber.foreground': '#6e7681',
+  'editorLineNumber.activeForeground': '#e6edf3',
+  'editorIndentGuide.background': rgba('#e6edf3', 0.12),
+  'editorIndentGuide.activeBackground': rgba('#e6edf3', 0.24),
+  'editorGutter.background': '#0d1117',
+  'editorHoverWidget.background': '#161b22',
+  'editorHoverWidget.border': '#30363d',
+  'editorSuggestWidget.background': '#161b22',
+  'editorSuggestWidget.border': '#30363d',
+  'editorWidget.border': '#30363d',
+  'editorWhitespace.foreground': '#484f58',
+  'editor.wordHighlightBackground': rgba('#6e7681', 0.5),
+  'editor.wordHighlightStrongBackground': rgba('#6e7681', 0.3),
+};
+
 export const configureMonaco = () => {
   self.MonacoEnvironment = {
-    getWorker: (_: string) => {
-      return new EditorWorker();
-    },
+    getWorker: (_: string) => new EditorWorker(),
   };
+
+  // Register GitHub Light Default
+  monaco.editor.defineTheme(GITHUB_LIGHT_DEFAULT, {
+    base: 'vs',
+    inherit: true,
+    rules: [],
+    colors: GITHUB_LIGHT_EDITOR_COLORS,
+  });
+
+  // Register GitHub Dark Default
+  monaco.editor.defineTheme(GITHUB_DARK_DEFAULT, {
+    base: 'vs-dark',
+    inherit: true,
+    rules: [],
+    colors: GITHUB_DARK_EDITOR_COLORS,
+  });
 };

From de463806014b07407bacda990ec10ec06af95e78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Wed, 1 Oct 2025 11:35:44 +0200
Subject: [PATCH 12/32] Update YamlViewer.tsx

---
 src/components/Yaml/YamlViewer.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Yaml/YamlViewer.tsx b/src/components/Yaml/YamlViewer.tsx
index cba712f0..9af82dc1 100644
--- a/src/components/Yaml/YamlViewer.tsx
+++ b/src/components/Yaml/YamlViewer.tsx
@@ -17,7 +17,7 @@ type YamlViewerProps = {
 // Download button is hidden now due to stakeholder request
 const SHOW_DOWNLOAD_BUTTON = false;
 
-const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename, yamlStringToCopy }) => {
+export const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename, yamlStringToCopy }) => {
   const { t } = useTranslation();
   // const { isDarkTheme } = useTheme();
   const { copyToClipboard } = useCopyToClipboard();
@@ -49,5 +49,3 @@ const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename, yamlStringToCop
     </div>
   );
 };
-
-export default YamlViewer;

From d303b4a18539d44c07d1ae8a75a5f7e65a55965e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Wed, 1 Oct 2025 11:47:25 +0200
Subject: [PATCH 13/32] Update YamlLoader.tsx

---
 src/components/Yaml/YamlLoader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Yaml/YamlLoader.tsx b/src/components/Yaml/YamlLoader.tsx
index 5e9934c7..1c26bf89 100644
--- a/src/components/Yaml/YamlLoader.tsx
+++ b/src/components/Yaml/YamlLoader.tsx
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { ResourceObject } from '../../lib/api/types/crate/resourceObject.ts';
 import Loading from '../Shared/Loading.tsx';
 import IllustratedError from '../Shared/IllustratedError.tsx';
-import YamlViewer from './YamlViewer.tsx';
+import { YamlViewer } from './YamlViewer.tsx';
 import { useApiResource } from '../../lib/api/useApiResource';
 import { removeManagedFieldsAndFilterData, Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 

From eb5a1256bf002dad4c5c63e6cf88201fb12f7d41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Wed, 1 Oct 2025 11:58:14 +0200
Subject: [PATCH 14/32] fix

---
 src/components/Graphs/Graph.tsx               |  2 +-
 .../SummarizeStep.tsx                         | 35 +++++++++----------
 src/components/Yaml/YamlViewButton.tsx        |  2 +-
 src/components/Yaml/YamlViewer.tsx            |  9 ++---
 4 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/components/Graphs/Graph.tsx b/src/components/Graphs/Graph.tsx
index dd816508..b6216e38 100644
--- a/src/components/Graphs/Graph.tsx
+++ b/src/components/Graphs/Graph.tsx
@@ -8,7 +8,7 @@ import { NodeData, ColorBy } from './types';
 import CustomNode from './CustomNode';
 import { Legend, LegendItem } from './Legend';
 import { YamlViewDialog } from '../Yaml/YamlViewDialog';
-import YamlViewer from '../Yaml/YamlViewer';
+import { YamlViewer } from '../Yaml/YamlViewer';
 import { stringify } from 'yaml';
 import { removeManagedFieldsAndFilterData, Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 import { useTranslation } from 'react-i18next';
diff --git a/src/components/Wizards/CreateManagedControlPlane/SummarizeStep.tsx b/src/components/Wizards/CreateManagedControlPlane/SummarizeStep.tsx
index c4c7ae98..886bbd7a 100644
--- a/src/components/Wizards/CreateManagedControlPlane/SummarizeStep.tsx
+++ b/src/components/Wizards/CreateManagedControlPlane/SummarizeStep.tsx
@@ -6,7 +6,7 @@ import {
   ComponentsListItem,
   CreateManagedControlPlane,
 } from '../../../lib/api/types/crate/createManagedControlPlane.ts';
-import YamlViewer from '../../Yaml/YamlViewer.tsx';
+import { YamlViewer } from '../../Yaml/YamlViewer.tsx';
 import { idpPrefix } from '../../../utils/idpPrefix.ts';
 import { UseFormWatch } from 'react-hook-form';
 import { CreateDialogProps } from '../../Dialogs/CreateWorkspaceDialogContainer.tsx';
@@ -30,7 +30,20 @@ export const SummarizeStep: React.FC<SummarizeStepProps> = ({
   isEditMode = false,
 }) => {
   const { t } = useTranslation();
-
+  const yamlString = stringify(
+    CreateManagedControlPlane(
+      watch('name'),
+      `${projectName}--ws-${workspaceName}`,
+      {
+        displayName: watch('displayName'),
+        chargingTarget: watch('chargingTarget'),
+        members: watch('members'),
+        componentsList: componentsList ?? [],
+        chargingTargetType: watch('chargingTargetType'),
+      },
+      idpPrefix,
+    ),
+  );
   return (
     <>
       <Title>{t('common.summarize')}</Title>
@@ -78,23 +91,7 @@ export const SummarizeStep: React.FC<SummarizeStepProps> = ({
               )}
             />
           ) : (
-            <YamlViewer
-              yamlString={stringify(
-                CreateManagedControlPlane(
-                  watch('name'),
-                  `${projectName}--ws-${workspaceName}`,
-                  {
-                    displayName: watch('displayName'),
-                    chargingTarget: watch('chargingTarget'),
-                    members: watch('members'),
-                    componentsList: componentsList ?? [],
-                    chargingTargetType: watch('chargingTargetType'),
-                  },
-                  idpPrefix,
-                ),
-              )}
-              filename={`mcp_${projectName}--ws-${workspaceName}`}
-            />
+            <YamlViewer yamlString={yamlString} filename={`mcp_${projectName}--ws-${workspaceName}`} />
           )}
         </div>
       </Grid>
diff --git a/src/components/Yaml/YamlViewButton.tsx b/src/components/Yaml/YamlViewButton.tsx
index 4f1aef0a..7e96875c 100644
--- a/src/components/Yaml/YamlViewButton.tsx
+++ b/src/components/Yaml/YamlViewButton.tsx
@@ -2,7 +2,7 @@ import { Button } from '@ui5/webcomponents-react';
 import { FC, useMemo, useState } from 'react';
 import styles from './YamlViewer.module.css';
 import { useTranslation } from 'react-i18next';
-import YamlViewer from './YamlViewer.tsx';
+import { YamlViewer } from './YamlViewer.tsx';
 import { stringify } from 'yaml';
 import { removeManagedFieldsAndFilterData, Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 import { YamlIcon } from './YamlIcon.tsx';
diff --git a/src/components/Yaml/YamlViewer.tsx b/src/components/Yaml/YamlViewer.tsx
index 9af82dc1..4f8938ff 100644
--- a/src/components/Yaml/YamlViewer.tsx
+++ b/src/components/Yaml/YamlViewer.tsx
@@ -8,7 +8,7 @@ import styles from './YamlViewer.module.css';
 
 type YamlViewerProps = {
   yamlString: string;
-  yamlStringToCopy: string;
+  yamlStringToCopy?: string;
   filename: string;
   showOnlyImportantData?: boolean;
   setShowOnlyImportantData?: (showOnlyImportantData: boolean) => void;
@@ -32,11 +32,11 @@ export const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename, yamlStri
     document.body.removeChild(link);
     window.URL.revokeObjectURL(url);
   };
-
+  console.log(yamlString);
   return (
     <div className={styles.container}>
       <FlexBox className={styles.buttons} direction="Row" justifyContent="End" alignItems="Baseline" gap={16}>
-        <Button icon="copy" onClick={() => copyToClipboard(yamlStringToCopy)}>
+        <Button icon="copy" onClick={() => copyToClipboard(yamlStringToCopy ?? yamlString)}>
           {t('buttons.copy')}
         </Button>
         {SHOW_DOWNLOAD_BUTTON && (
@@ -45,7 +45,8 @@ export const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename, yamlStri
           </Button>
         )}
       </FlexBox>
-      <YamlEditor height="90vh" defaultValue={yamlString} />
+
+      <YamlEditor key={yamlString} height="90vh" defaultValue={yamlString} />
     </div>
   );
 };

From 0e1fe63f89d74c0b4bc4cd64329928fbd479bd36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Wed, 1 Oct 2025 12:15:09 +0200
Subject: [PATCH 15/32] Update YamlViewer.tsx

---
 src/components/Yaml/YamlViewer.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Yaml/YamlViewer.tsx b/src/components/Yaml/YamlViewer.tsx
index 4f8938ff..19b50093 100644
--- a/src/components/Yaml/YamlViewer.tsx
+++ b/src/components/Yaml/YamlViewer.tsx
@@ -46,7 +46,8 @@ export const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename, yamlStri
         )}
       </FlexBox>
 
-      <YamlEditor key={yamlString} height="90vh" defaultValue={yamlString} />
+      {/* Use controlled value with a stable model path to update content without remounting */}
+      <YamlEditor height="90vh" value={yamlString} path={`${filename}.yaml`} options={{ readOnly: true }} />
     </div>
   );
 };

From 2d5d9f67878f9bb54a78555df51e35730f05e3c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Wed, 1 Oct 2025 13:19:49 +0200
Subject: [PATCH 16/32] fix

---
 src/components/Yaml/YamlDiff.module.css       |  9 ++++
 src/components/Yaml/YamlDiff.tsx              |  8 +++-
 src/components/Yaml/YamlViewDialog.module.css |  6 +++
 src/components/Yaml/YamlViewDialog.tsx        |  4 +-
 src/components/Yaml/YamlViewer.module.css     |  7 ++-
 src/components/Yaml/YamlViewer.tsx            |  3 +-
 src/lib/monaco.ts                             | 47 ++++++-------------
 7 files changed, 44 insertions(+), 40 deletions(-)
 create mode 100644 src/components/Yaml/YamlDiff.module.css
 create mode 100644 src/components/Yaml/YamlViewDialog.module.css

diff --git a/src/components/Yaml/YamlDiff.module.css b/src/components/Yaml/YamlDiff.module.css
new file mode 100644
index 00000000..02f7466f
--- /dev/null
+++ b/src/components/Yaml/YamlDiff.module.css
@@ -0,0 +1,9 @@
+.container {
+  position: relative;
+
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  max-width: 100%;
+  overflow: hidden;
+}
diff --git a/src/components/Yaml/YamlDiff.tsx b/src/components/Yaml/YamlDiff.tsx
index d527ec92..abde30a8 100644
--- a/src/components/Yaml/YamlDiff.tsx
+++ b/src/components/Yaml/YamlDiff.tsx
@@ -1,12 +1,16 @@
 import { FC } from 'react';
 
 import { YamlDiffEditor } from '../YamlEditor/YamlDiffEditor.tsx';
-
+import styles from './YamlDiff.module.css';
 type YamlDiffProps = {
   originalYaml: string;
   modifiedYaml: string;
 };
 
 export const YamlDiff: FC<YamlDiffProps> = ({ originalYaml, modifiedYaml }) => {
-  return <YamlDiffEditor original={originalYaml} modified={modifiedYaml} />;
+  return (
+    <div className={styles.container}>
+      <YamlDiffEditor original={originalYaml} modified={modifiedYaml} />
+    </div>
+  );
 };
diff --git a/src/components/Yaml/YamlViewDialog.module.css b/src/components/Yaml/YamlViewDialog.module.css
new file mode 100644
index 00000000..3adfc55e
--- /dev/null
+++ b/src/components/Yaml/YamlViewDialog.module.css
@@ -0,0 +1,6 @@
+.wrapper {
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  max-width: 100%;
+}
diff --git a/src/components/Yaml/YamlViewDialog.tsx b/src/components/Yaml/YamlViewDialog.tsx
index ca5826cb..adb0f61c 100644
--- a/src/components/Yaml/YamlViewDialog.tsx
+++ b/src/components/Yaml/YamlViewDialog.tsx
@@ -2,7 +2,7 @@ import { Bar, Button, CheckBox, Dialog } from '@ui5/webcomponents-react';
 
 import { FC, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-
+import styles from './YamlViewDialog.module.css';
 export type YamlViewDialogProps = {
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
@@ -51,7 +51,7 @@ export const YamlViewDialog: FC<YamlViewDialogProps> = ({
         setIsOpen(false);
       }}
     >
-      {isOpen && dialogContent}
+      <div className={styles.wrapper}>{isOpen && dialogContent}</div>
     </Dialog>
   );
 };
diff --git a/src/components/Yaml/YamlViewer.module.css b/src/components/Yaml/YamlViewer.module.css
index 2ac78014..e7d1ce8a 100644
--- a/src/components/Yaml/YamlViewer.module.css
+++ b/src/components/Yaml/YamlViewer.module.css
@@ -1,5 +1,10 @@
 .container {
   position: relative;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  max-width: 100%;
+  overflow: hidden;
 }
 
 .buttons {
@@ -19,4 +24,4 @@
     width: 32px;
     transform: translateY(1px);
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Yaml/YamlViewer.tsx b/src/components/Yaml/YamlViewer.tsx
index 19b50093..75b82507 100644
--- a/src/components/Yaml/YamlViewer.tsx
+++ b/src/components/Yaml/YamlViewer.tsx
@@ -19,7 +19,6 @@ const SHOW_DOWNLOAD_BUTTON = false;
 
 export const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename, yamlStringToCopy }) => {
   const { t } = useTranslation();
-  // const { isDarkTheme } = useTheme();
   const { copyToClipboard } = useCopyToClipboard();
   const downloadYaml = () => {
     const blob = new Blob([yamlString], { type: 'text/yaml' });
@@ -32,7 +31,7 @@ export const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename, yamlStri
     document.body.removeChild(link);
     window.URL.revokeObjectURL(url);
   };
-  console.log(yamlString);
+
   return (
     <div className={styles.container}>
       <FlexBox className={styles.buttons} direction="Row" justifyContent="End" alignItems="Baseline" gap={16}>
diff --git a/src/lib/monaco.ts b/src/lib/monaco.ts
index ccfc2b12..fd352313 100644
--- a/src/lib/monaco.ts
+++ b/src/lib/monaco.ts
@@ -13,25 +13,6 @@ loader.config({ monaco });
 export const GITHUB_LIGHT_DEFAULT = 'github-light-default';
 export const GITHUB_DARK_DEFAULT = 'github-dark-default';
 
-// Lightweight RGBA helper
-function rgba(hex: string, alpha: number) {
-  const h = hex.replace('#', '');
-  const v =
-    h.length === 3
-      ? h
-          .split('')
-          .map((c) => c + c)
-          .join('')
-      : h;
-  const n = parseInt(v, 16);
-  // If parse fails, fallback to transparent
-  if (Number.isNaN(n)) return `rgba(0,0,0,${alpha})`;
-  const r = (n >> 16) & 255;
-  const g = (n >> 8) & 255;
-  const b = n & 255;
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-}
-
 // Inlined GitHub Light Default editor colors (subset focused on Monaco editor UI)
 const GITHUB_LIGHT_EDITOR_COLORS: monaco.editor.IColors = {
   'editor.foreground': '#1f2328',
@@ -39,13 +20,13 @@ const GITHUB_LIGHT_EDITOR_COLORS: monaco.editor.IColors = {
   'editorWidget.background': '#f6f8fa',
   'editor.lineHighlightBackground': '#eaeef2',
   'editorCursor.foreground': '#0969da',
-  'editor.selectionBackground': rgba('#0969da', 0.2),
-  'editor.inactiveSelectionBackground': rgba('#0969da', 0.07),
-  'editor.selectionHighlightBackground': rgba('#1a7f37', 0.25),
+  'editor.selectionBackground': '#0969da33', // 20% opacity
+  'editor.inactiveSelectionBackground': '#0969da12', // 7% opacity
+  'editor.selectionHighlightBackground': '#1a7f3740', // 25% opacity
   'editorLineNumber.foreground': '#8c959f',
   'editorLineNumber.activeForeground': '#1f2328',
-  'editorIndentGuide.background': rgba('#1f2328', 0.12),
-  'editorIndentGuide.activeBackground': rgba('#1f2328', 0.24),
+  'editorIndentGuide.background': '#1f23281f', // 12% opacity
+  'editorIndentGuide.activeBackground': '#1f23283d', // 24% opacity
   'editorGutter.background': '#ffffff',
   'editorHoverWidget.background': '#f6f8fa',
   'editorHoverWidget.border': '#d0d7de',
@@ -53,8 +34,8 @@ const GITHUB_LIGHT_EDITOR_COLORS: monaco.editor.IColors = {
   'editorSuggestWidget.border': '#d0d7de',
   'editorWidget.border': '#d0d7de',
   'editorWhitespace.foreground': '#d0d7de',
-  'editor.wordHighlightBackground': rgba('#afb8c1', 0.5),
-  'editor.wordHighlightStrongBackground': rgba('#afb8c1', 0.3),
+  'editor.wordHighlightBackground': '#afb8c180', // 50% opacity
+  'editor.wordHighlightStrongBackground': '#afb8c14d', // 30% opacity
 };
 
 // Inlined GitHub Dark Default editor colors (subset focused on Monaco editor UI)
@@ -64,13 +45,13 @@ const GITHUB_DARK_EDITOR_COLORS: monaco.editor.IColors = {
   'editorWidget.background': '#161b22',
   'editor.lineHighlightBackground': '#161b22',
   'editorCursor.foreground': '#2f81f7',
-  'editor.selectionBackground': rgba('#2f81f7', 0.2),
-  'editor.inactiveSelectionBackground': rgba('#2f81f7', 0.07),
-  'editor.selectionHighlightBackground': rgba('#2ea043', 0.25),
+  'editor.selectionBackground': '#2f81f733', // 20% opacity
+  'editor.inactiveSelectionBackground': '#2f81f712', // 7% opacity
+  'editor.selectionHighlightBackground': '#2ea04340', // 25% opacity
   'editorLineNumber.foreground': '#6e7681',
   'editorLineNumber.activeForeground': '#e6edf3',
-  'editorIndentGuide.background': rgba('#e6edf3', 0.12),
-  'editorIndentGuide.activeBackground': rgba('#e6edf3', 0.24),
+  'editorIndentGuide.background': '#e6edf31f', // 12% opacity
+  'editorIndentGuide.activeBackground': '#e6edf33d', // 24% opacity
   'editorGutter.background': '#0d1117',
   'editorHoverWidget.background': '#161b22',
   'editorHoverWidget.border': '#30363d',
@@ -78,8 +59,8 @@ const GITHUB_DARK_EDITOR_COLORS: monaco.editor.IColors = {
   'editorSuggestWidget.border': '#30363d',
   'editorWidget.border': '#30363d',
   'editorWhitespace.foreground': '#484f58',
-  'editor.wordHighlightBackground': rgba('#6e7681', 0.5),
-  'editor.wordHighlightStrongBackground': rgba('#6e7681', 0.3),
+  'editor.wordHighlightBackground': '#6e768180', // 50% opacity
+  'editor.wordHighlightStrongBackground': '#6e76814d', // 30% opacity
 };
 
 export const configureMonaco = () => {

From 469458407dfbd5550cba7f55a88ada7a90c9b182 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Wed, 1 Oct 2025 13:20:14 +0200
Subject: [PATCH 17/32] Delete generate-github-themes.ts

---
 scripts/generate-github-themes.ts | 40 -------------------------------
 1 file changed, 40 deletions(-)
 delete mode 100644 scripts/generate-github-themes.ts

diff --git a/scripts/generate-github-themes.ts b/scripts/generate-github-themes.ts
deleted file mode 100644
index 2ac66d89..00000000
--- a/scripts/generate-github-themes.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/* Script to generate GitHub Light/Dark Default Monaco theme JSON files locally.
- * It uses the generator from github-vscode-theme (CJS) and writes to src/lib/themes.
- */
-
-import { mkdir, writeFile } from 'node:fs/promises';
-import { dirname, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-// Use CJS module via dynamic import; this path is resolvable in Node (not via Vite bundler)
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-const getThemeModule = await import('github-vscode-theme/src/theme.js');
-
-// Interop for CJS default export
-const getTheme: (args: { theme: 'light' | 'dark' | string; name: string }) => any =
-  // @ts-expect-error - cjs interop
-  getThemeModule.default || getThemeModule;
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-async function main() {
-  const outDir = resolve(__dirname, '../src/lib/themes');
-  await mkdir(outDir, { recursive: true });
-
-  const light = getTheme({ theme: 'light', name: 'GitHub Light Default' });
-  const dark = getTheme({ theme: 'dark', name: 'GitHub Dark Default' });
-
-  await writeFile(resolve(outDir, 'github-light-default.json'), JSON.stringify(light, null, 2), 'utf-8');
-  await writeFile(resolve(outDir, 'github-dark-default.json'), JSON.stringify(dark, null, 2), 'utf-8');
-
-  // eslint-disable-next-line no-console
-  console.log('Generated themes at', outDir);
-}
-
-main().catch((err) => {
-  // eslint-disable-next-line no-console
-  console.error('Failed to generate themes:', err);
-  process.exitCode = 1;
-});

From 3110aebe580668d5dd62b5010d0d9f6d3f17a899 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Wed, 1 Oct 2025 13:36:44 +0200
Subject: [PATCH 18/32] fix

---
 src/components/Yaml/YamlViewer.tsx           | 2 +-
 src/components/YamlEditor/YamlDiffEditor.tsx | 2 +-
 src/components/YamlEditor/YamlEditor.tsx     | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Yaml/YamlViewer.tsx b/src/components/Yaml/YamlViewer.tsx
index 75b82507..106dbb00 100644
--- a/src/components/Yaml/YamlViewer.tsx
+++ b/src/components/Yaml/YamlViewer.tsx
@@ -46,7 +46,7 @@ export const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename, yamlStri
       </FlexBox>
 
       {/* Use controlled value with a stable model path to update content without remounting */}
-      <YamlEditor height="90vh" value={yamlString} path={`${filename}.yaml`} options={{ readOnly: true }} />
+      <YamlEditor value={yamlString} path={`${filename}.yaml`} options={{ readOnly: true }} />
     </div>
   );
 };
diff --git a/src/components/YamlEditor/YamlDiffEditor.tsx b/src/components/YamlEditor/YamlDiffEditor.tsx
index b72ee9c7..c41eeb48 100644
--- a/src/components/YamlEditor/YamlDiffEditor.tsx
+++ b/src/components/YamlEditor/YamlDiffEditor.tsx
@@ -42,7 +42,7 @@ export const YamlDiffEditor = (props: YamlDiffEditorProps) => {
         {...rest}
         theme={computedTheme}
         options={simplifiedOptions}
-        height="90vh"
+        height="100%"
         // Force YAML language for both panes
         language="yaml"
       />
diff --git a/src/components/YamlEditor/YamlEditor.tsx b/src/components/YamlEditor/YamlEditor.tsx
index 06eb5519..be56a6f4 100644
--- a/src/components/YamlEditor/YamlEditor.tsx
+++ b/src/components/YamlEditor/YamlEditor.tsx
@@ -22,6 +22,7 @@ export const YamlEditor = (props: YamlEditorProps) => {
       {...rest}
       theme={computedTheme}
       options={enforcedOptions}
+      height="100%"
       // Force YAML language for this editor wrapper
       language="yaml"
     />

From eb04c0e2d17877f7ef4171ee0c8e4838bd6a0322 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Wed, 1 Oct 2025 15:04:10 +0200
Subject: [PATCH 19/32] Update monaco.ts

---
 src/lib/monaco.ts | 46 +++++++++++++++++++++++++---------------------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/lib/monaco.ts b/src/lib/monaco.ts
index fd352313..b823bbb4 100644
--- a/src/lib/monaco.ts
+++ b/src/lib/monaco.ts
@@ -2,31 +2,31 @@
 import { loader } from '@monaco-editor/react';
 import * as monaco from 'monaco-editor';
 
-// Register YAML basic language (syntax highlighting only) to avoid LSP worker integration
 import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js';
 
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 
+import YamlWorker from 'monaco-yaml/yaml.worker?worker';
+
 // Use ESM monaco to avoid loading AMD loader from CDN
 loader.config({ monaco });
 
 export const GITHUB_LIGHT_DEFAULT = 'github-light-default';
 export const GITHUB_DARK_DEFAULT = 'github-dark-default';
 
-// Inlined GitHub Light Default editor colors (subset focused on Monaco editor UI)
 const GITHUB_LIGHT_EDITOR_COLORS: monaco.editor.IColors = {
   'editor.foreground': '#1f2328',
   'editor.background': '#ffffff',
   'editorWidget.background': '#f6f8fa',
   'editor.lineHighlightBackground': '#eaeef2',
   'editorCursor.foreground': '#0969da',
-  'editor.selectionBackground': '#0969da33', // 20% opacity
-  'editor.inactiveSelectionBackground': '#0969da12', // 7% opacity
-  'editor.selectionHighlightBackground': '#1a7f3740', // 25% opacity
+  'editor.selectionBackground': '#0969da33',
+  'editor.inactiveSelectionBackground': '#0969da12',
+  'editor.selectionHighlightBackground': '#1a7f3740',
   'editorLineNumber.foreground': '#8c959f',
   'editorLineNumber.activeForeground': '#1f2328',
-  'editorIndentGuide.background': '#1f23281f', // 12% opacity
-  'editorIndentGuide.activeBackground': '#1f23283d', // 24% opacity
+  'editorIndentGuide.background': '#1f23281f',
+  'editorIndentGuide.activeBackground': '#1f23283d',
   'editorGutter.background': '#ffffff',
   'editorHoverWidget.background': '#f6f8fa',
   'editorHoverWidget.border': '#d0d7de',
@@ -34,24 +34,23 @@ const GITHUB_LIGHT_EDITOR_COLORS: monaco.editor.IColors = {
   'editorSuggestWidget.border': '#d0d7de',
   'editorWidget.border': '#d0d7de',
   'editorWhitespace.foreground': '#d0d7de',
-  'editor.wordHighlightBackground': '#afb8c180', // 50% opacity
-  'editor.wordHighlightStrongBackground': '#afb8c14d', // 30% opacity
+  'editor.wordHighlightBackground': '#afb8c180',
+  'editor.wordHighlightStrongBackground': '#afb8c14d',
 };
 
-// Inlined GitHub Dark Default editor colors (subset focused on Monaco editor UI)
 const GITHUB_DARK_EDITOR_COLORS: monaco.editor.IColors = {
   'editor.foreground': '#e6edf3',
   'editor.background': '#0d1117',
   'editorWidget.background': '#161b22',
   'editor.lineHighlightBackground': '#161b22',
   'editorCursor.foreground': '#2f81f7',
-  'editor.selectionBackground': '#2f81f733', // 20% opacity
-  'editor.inactiveSelectionBackground': '#2f81f712', // 7% opacity
-  'editor.selectionHighlightBackground': '#2ea04340', // 25% opacity
+  'editor.selectionBackground': '#2f81f733',
+  'editor.inactiveSelectionBackground': '#2f81f712',
+  'editor.selectionHighlightBackground': '#2ea04340',
   'editorLineNumber.foreground': '#6e7681',
   'editorLineNumber.activeForeground': '#e6edf3',
-  'editorIndentGuide.background': '#e6edf31f', // 12% opacity
-  'editorIndentGuide.activeBackground': '#e6edf33d', // 24% opacity
+  'editorIndentGuide.background': '#e6edf31f',
+  'editorIndentGuide.activeBackground': '#e6edf33d',
   'editorGutter.background': '#0d1117',
   'editorHoverWidget.background': '#161b22',
   'editorHoverWidget.border': '#30363d',
@@ -59,16 +58,22 @@ const GITHUB_DARK_EDITOR_COLORS: monaco.editor.IColors = {
   'editorSuggestWidget.border': '#30363d',
   'editorWidget.border': '#30363d',
   'editorWhitespace.foreground': '#484f58',
-  'editor.wordHighlightBackground': '#6e768180', // 50% opacity
-  'editor.wordHighlightStrongBackground': '#6e76814d', // 30% opacity
+  'editor.wordHighlightBackground': '#6e768180',
+  'editor.wordHighlightStrongBackground': '#6e76814d',
 };
 
 export const configureMonaco = () => {
-  self.MonacoEnvironment = {
-    getWorker: (_: string) => new EditorWorker(),
+  // Route YAML language to monaco-yaml worker, everything else to the default editor worker
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (self as any).MonacoEnvironment = {
+    getWorker: (_: string, label: string) => {
+      if (label === 'yaml') {
+        return new YamlWorker();
+      }
+      return new EditorWorker();
+    },
   };
 
-  // Register GitHub Light Default
   monaco.editor.defineTheme(GITHUB_LIGHT_DEFAULT, {
     base: 'vs',
     inherit: true,
@@ -76,7 +81,6 @@ export const configureMonaco = () => {
     colors: GITHUB_LIGHT_EDITOR_COLORS,
   });
 
-  // Register GitHub Dark Default
   monaco.editor.defineTheme(GITHUB_DARK_DEFAULT, {
     base: 'vs-dark',
     inherit: true,

From f8a59fd1c7353bcb4ebf10a1ef673dff1b27d16d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Wed, 1 Oct 2025 16:45:29 +0200
Subject: [PATCH 20/32] merge

---
 src/AppRouter.tsx                             | 34 ++++---
 src/components/ControlPlane/FluxList.tsx      | 11 ++-
 .../ControlPlane/ManagedResources.tsx         |  3 +-
 src/components/ControlPlane/Providers.tsx     |  3 +-
 .../ControlPlane/ProvidersConfig.tsx          |  3 +-
 .../ControlPlaneCard/ControlPlaneCard.tsx     |  7 +-
 .../ControlPlaneListWorkspaceGridTile.tsx     |  5 +-
 src/components/Graphs/Graph.tsx               | 47 +++------
 src/components/Projects/ProjectsList.tsx      |  5 +-
 src/components/Splitter/SplitterContext.tsx   | 39 ++++++++
 .../Splitter/SplitterLayout.module.css        |  9 ++
 src/components/Splitter/SplitterLayout.tsx    | 30 ++++++
 .../SummarizeStep.tsx                         |  5 +-
 src/components/Yaml/YamlLoader.tsx            | 55 -----------
 src/components/Yaml/YamlPanel.module.css      | 10 ++
 src/components/Yaml/YamlPanel.tsx             | 45 +++++++++
 src/components/Yaml/YamlSidePanel.module.css  | 10 ++
 src/components/Yaml/YamlSidePanel.tsx         | 96 +++++++++++++++++++
 .../Yaml/YamlSidePanelWithLoader.tsx          | 29 ++++++
 src/components/Yaml/YamlViewButton.module.css | 11 +++
 src/components/Yaml/YamlViewButton.tsx        | 90 +++++++++--------
 .../Yaml/YamlViewButtonWithLoader.tsx         | 50 ----------
 src/components/Yaml/YamlViewDialog.tsx        | 57 -----------
 src/components/Yaml/YamlViewer.tsx            |  1 +
 src/spaces/mcp/pages/McpPage.tsx              |  5 +-
 25 files changed, 394 insertions(+), 266 deletions(-)
 create mode 100644 src/components/Splitter/SplitterContext.tsx
 create mode 100644 src/components/Splitter/SplitterLayout.module.css
 create mode 100644 src/components/Splitter/SplitterLayout.tsx
 create mode 100644 src/components/Yaml/YamlPanel.module.css
 create mode 100644 src/components/Yaml/YamlPanel.tsx
 create mode 100644 src/components/Yaml/YamlSidePanel.module.css
 create mode 100644 src/components/Yaml/YamlSidePanel.tsx
 create mode 100644 src/components/Yaml/YamlSidePanelWithLoader.tsx
 create mode 100644 src/components/Yaml/YamlViewButton.module.css
 delete mode 100644 src/components/Yaml/YamlViewButtonWithLoader.tsx

diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx
index d47fe664..44a35d43 100644
--- a/src/AppRouter.tsx
+++ b/src/AppRouter.tsx
@@ -6,6 +6,8 @@ import { SentryRoutes } from './mount.ts';
 import ProjectPage from './spaces/onboarding/pages/ProjectPage.tsx';
 import McpPage from './spaces/mcp/pages/McpPage.tsx';
 import { SearchParamToggleVisibility } from './components/Helper/FeatureToggleExistance.tsx';
+import { SplitterProvider } from './components/Splitter/SplitterContext.tsx';
+import { SplitterLayout } from './components/Splitter/SplitterLayout.tsx';
 
 function AppRouter() {
   return (
@@ -20,20 +22,24 @@ function AppRouter() {
         <ShellBarComponent />
       </SearchParamToggleVisibility>
 
-      <Router>
-        <SentryRoutes>
-          <Route path="/mcp" element={<GlobalProviderOutlet />}>
-            <Route path="projects" element={<ProjectListView />} />
-            <Route path="projects/:projectName" element={<ProjectPage />} />
-            <Route
-              path="projects/:projectName/workspaces/:workspaceName/mcps/:controlPlaneName"
-              element={<McpPage />}
-            />
-          </Route>
-          <Route path="/" element={<Navigate to="/mcp/projects" />} />
-          <Route path="*" element={<Navigate to="/" />} />
-        </SentryRoutes>
-      </Router>
+      <SplitterProvider>
+        <SplitterLayout>
+          <Router>
+            <SentryRoutes>
+              <Route path="/mcp" element={<GlobalProviderOutlet />}>
+                <Route path="projects" element={<ProjectListView />} />
+                <Route path="projects/:projectName" element={<ProjectPage />} />
+                <Route
+                  path="projects/:projectName/workspaces/:workspaceName/mcps/:controlPlaneName"
+                  element={<McpPage />}
+                />
+              </Route>
+              <Route path="/" element={<Navigate to="/mcp/projects" />} />
+              <Route path="*" element={<Navigate to="/" />} />
+            </SentryRoutes>
+          </Router>
+        </SplitterLayout>
+      </SplitterProvider>
     </>
   );
 }
diff --git a/src/components/ControlPlane/FluxList.tsx b/src/components/ControlPlane/FluxList.tsx
index ccbf5f18..a7f769b1 100644
--- a/src/components/ControlPlane/FluxList.tsx
+++ b/src/components/ControlPlane/FluxList.tsx
@@ -11,6 +11,7 @@ import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
 import { useMemo } from 'react';
 import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
 import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
+import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 
 export default function FluxList() {
   const { data: gitReposData, error: repoErr, isLoading: repoIsLoading } = useApiResource(FluxRequest); //404 if component not enabled
@@ -81,7 +82,7 @@ export default function FluxList() {
         accessor: 'yaml',
         disableFilters: true,
         Cell: (cellData: CellData<KustomizationsResponse['items']>) => (
-          <YamlViewButton resourceObject={cellData.cell.row.original?.item} />
+          <YamlViewButton variant="resource" resource={cellData.cell.row.original?.item as Resource} />
         ),
       },
     ],
@@ -125,7 +126,9 @@ export default function FluxList() {
         width: 75,
         accessor: 'yaml',
         disableFilters: true,
-        Cell: (cellData: CellData<FluxRow>) => <YamlViewButton resourceObject={cellData.cell.row.original?.item} />,
+        Cell: (cellData: CellData<FluxRow>) => (
+          <YamlViewButton variant="resource" resource={cellData.cell.row.original?.item as Resource} />
+        ),
       },
     ],
     [t],
@@ -173,14 +176,14 @@ export default function FluxList() {
       <div className="crossplane-table-element">
         <FlexBox justifyContent={'Start'} alignItems={'Center'} gap={'0.5em'}>
           <Title level="H4">{t('FluxList.gitOpsTitle')}</Title>
-          <YamlViewButton resourceObject={gitReposData} />
+          <YamlViewButton variant="resource" resource={gitReposData as unknown as Resource} />
         </FlexBox>
         <ConfiguredAnalyticstable columns={gitReposColumns} isLoading={repoIsLoading} data={gitReposRows} />
       </div>
       <div className="crossplane-table-element">
         <FlexBox justifyContent={'Start'} alignItems={'Center'} gap={'0.5em'}>
           <Title level="H4">{t('FluxList.kustomizationsTitle')}</Title>
-          <YamlViewButton resourceObject={kustmizationData} />
+          <YamlViewButton variant="resource" resource={kustmizationData as unknown as Resource} />
         </FlexBox>
         <ConfiguredAnalyticstable
           columns={kustomizationsColumns}
diff --git a/src/components/ControlPlane/ManagedResources.tsx b/src/components/ControlPlane/ManagedResources.tsx
index d09944bc..65cf7281 100644
--- a/src/components/ControlPlane/ManagedResources.tsx
+++ b/src/components/ControlPlane/ManagedResources.tsx
@@ -17,6 +17,7 @@ import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
 import { useMemo } from 'react';
 import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
 import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
+import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 
 interface CellData<T> {
   cell: {
@@ -107,7 +108,7 @@ export function ManagedResources() {
         disableFilters: true,
         Cell: (cellData: CellData<ResourceRow>) =>
           cellData.cell.row.original?.item ? (
-            <YamlViewButton resourceObject={cellData.cell.row.original?.item} />
+            <YamlViewButton variant="resource" resource={cellData.cell.row.original?.item as Resource} />
           ) : undefined,
       },
     ],
diff --git a/src/components/ControlPlane/Providers.tsx b/src/components/ControlPlane/Providers.tsx
index 11dc4393..0e9dc16b 100644
--- a/src/components/ControlPlane/Providers.tsx
+++ b/src/components/ControlPlane/Providers.tsx
@@ -19,6 +19,7 @@ import '@ui5/webcomponents-icons/dist/sys-enter-2';
 import '@ui5/webcomponents-icons/dist/sys-cancel-2';
 import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
 import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
+import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 
 interface CellData<T> {
   cell: {
@@ -110,7 +111,7 @@ export function Providers() {
         accessor: 'yaml',
         disableFilters: true,
         Cell: (cellData: CellData<ProvidersRow>) => (
-          <YamlViewButton resourceObject={cellData.cell.row.original?.item} />
+          <YamlViewButton variant="resource" resource={cellData.cell.row.original?.item as Resource} />
         ),
       },
     ],
diff --git a/src/components/ControlPlane/ProvidersConfig.tsx b/src/components/ControlPlane/ProvidersConfig.tsx
index 7cd7b1c9..722c8cea 100644
--- a/src/components/ControlPlane/ProvidersConfig.tsx
+++ b/src/components/ControlPlane/ProvidersConfig.tsx
@@ -13,6 +13,7 @@ import { formatDateAsTimeAgo } from '../../utils/i18n/timeAgo';
 import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
 
 import { useMemo } from 'react';
+import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 
 type Rows = {
   parent: string;
@@ -79,7 +80,7 @@ export function ProvidersConfig() {
         disableFilters: true,
         Cell: (cellData: CellData<Rows>) =>
           cellData.cell.row.original?.resource ? (
-            <YamlViewButton resourceObject={cellData.cell.row.original?.resource} />
+            <YamlViewButton variant="resource" resource={cellData.cell.row.original?.resource as Resource} />
           ) : undefined,
       },
     ],
diff --git a/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.tsx b/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.tsx
index c5564ef2..22dab2d5 100644
--- a/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.tsx
+++ b/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.tsx
@@ -22,13 +22,13 @@ import {
   PatchMCPResourceForDeletionBody,
 } from '../../../lib/api/types/crate/deleteMCP.ts';
 
-import { YamlViewButtonWithLoader } from '../../Yaml/YamlViewButtonWithLoader.tsx';
+import { YamlViewButton } from '../../Yaml/YamlViewButton.tsx';
 import { useToast } from '../../../context/ToastContext.tsx';
 import { canConnectToMCP } from '../controlPlanes.ts';
+
 import { Infobox } from '../../Ui/Infobox/Infobox.tsx';
 
 import { ControlPlaneCardMenu } from './ControlPlaneCardMenu.tsx';
-
 import { EditManagedControlPlaneWizardDataLoader } from '../../Wizards/CreateManagedControlPlane/EditManagedControlPlaneWizardDataLoader.tsx';
 import { DISPLAY_NAME_ANNOTATION } from '../../../lib/api/types/shared/keyNames.ts';
 
@@ -99,7 +99,8 @@ export const ControlPlaneCard = ({ controlPlane, workspace, projectName }: Props
                 setIsEditManagedControlPlaneWizardOpen={handleIsManagedControlPlaneWizardOpen}
               />
               <FlexBox direction="Row" justifyContent="SpaceBetween" alignItems="Center" gap={10}>
-                <YamlViewButtonWithLoader
+                <YamlViewButton
+                  variant="loader"
                   workspaceName={controlPlane.metadata.namespace}
                   resourceName={controlPlane.metadata.name}
                   resourceType={'managedcontrolplanes'}
diff --git a/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx b/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
index 0deb2639..35952ae0 100644
--- a/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
+++ b/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
@@ -17,7 +17,7 @@ import { ListControlPlanes } from '../../../lib/api/types/crate/controlPlanes.ts
 import IllustratedError from '../../Shared/IllustratedError.tsx';
 import { APIError } from '../../../lib/api/error.ts';
 import { useTranslation } from 'react-i18next';
-import { YamlViewButtonWithLoader } from '../../Yaml/YamlViewButtonWithLoader.tsx';
+import { YamlViewButton } from '../../Yaml/YamlViewButton.tsx';
 import { IllustratedBanner } from '../../Ui/IllustratedBanner/IllustratedBanner.tsx';
 import { useLink } from '../../../lib/shared/useLink.ts';
 import IllustrationMessageType from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageType.js';
@@ -119,7 +119,8 @@ export function ControlPlaneListWorkspaceGridTile({ projectName, workspace }: Pr
 
               <MembersAvatarView members={uniqueMembers} project={projectName} workspace={workspaceName} />
               <FlexBox justifyContent={'SpaceBetween'} gap={10}>
-                <YamlViewButtonWithLoader
+                <YamlViewButton
+                  variant="loader"
                   workspaceName={workspace.metadata.namespace}
                   resourceName={workspaceName}
                   resourceType={'workspaces'}
diff --git a/src/components/Graphs/Graph.tsx b/src/components/Graphs/Graph.tsx
index b6216e38..138de8be 100644
--- a/src/components/Graphs/Graph.tsx
+++ b/src/components/Graphs/Graph.tsx
@@ -7,14 +7,15 @@ import '@xyflow/react/dist/style.css';
 import { NodeData, ColorBy } from './types';
 import CustomNode from './CustomNode';
 import { Legend, LegendItem } from './Legend';
-import { YamlViewDialog } from '../Yaml/YamlViewDialog';
-import { YamlViewer } from '../Yaml/YamlViewer';
-import { stringify } from 'yaml';
-import { removeManagedFieldsAndFilterData, Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
+
+import {  Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 import { useTranslation } from 'react-i18next';
 import { useGraph } from './useGraph';
 import { ManagedResourceItem } from '../../lib/shared/types';
 import { useTheme } from '../../hooks/useTheme';
+import { useSplitter } from '../Splitter/SplitterContext.tsx';
+import { YamlSidePanel } from '../Yaml/YamlSidePanel.tsx';
+
 
 const nodeTypes = {
   custom: (props: NodeProps<Node<NodeData, 'custom'>>) => (
@@ -31,33 +32,22 @@ const nodeTypes = {
 
 const Graph: React.FC = () => {
   const { t } = useTranslation();
+  const { openInAside } = useSplitter();
   const { isDarkTheme } = useTheme();
   const [colorBy, setColorBy] = useState<ColorBy>('provider');
-  const [yamlDialogOpen, setYamlDialogOpen] = useState(false);
-  const [yamlResource, setYamlResource] = useState<ManagedResourceItem | null>(null);
 
-  const handleYamlClick = useCallback((item: ManagedResourceItem) => {
-    setYamlResource(item);
-    setYamlDialogOpen(true);
-  }, []);
-
-  const { nodes, edges, colorMap, loading, error } = useGraph(colorBy, handleYamlClick);
+  const handleYamlClick = useCallback(
+    (item: ManagedResourceItem) => {
+      const yamlFilename = item
+        ? `${item.kind ?? ''}${item.metadata?.name ? '_' : ''}${item.metadata?.name ?? ''}`
+        : '';
 
-  const yamlString = useMemo(
-    () => (yamlResource ? stringify(removeManagedFieldsAndFilterData(yamlResource as unknown as Resource, true)) : ''),
-    [yamlResource],
+      openInAside(<YamlSidePanel resource={item as unknown as Resource} filename={yamlFilename} />);
+    },
+    [openInAside],
   );
 
-  const yamlStringToCopy = useMemo(
-    () => (yamlResource ? stringify(removeManagedFieldsAndFilterData(yamlResource as unknown as Resource, false)) : ''),
-    [yamlResource],
-  );
-
-  const yamlFilename = useMemo(() => {
-    if (!yamlResource) return '';
-    const { kind, metadata } = yamlResource;
-    return `${kind ?? ''}${metadata?.name ? '_' : ''}${metadata?.name ?? ''}`;
-  }, [yamlResource]);
+  const { nodes, edges, colorMap, loading, error } = useGraph(colorBy, handleYamlClick);
 
   const legendItems: LegendItem[] = useMemo(
     () =>
@@ -136,13 +126,6 @@ const Graph: React.FC = () => {
           </Panel>
         </ReactFlow>
       </div>
-      <YamlViewDialog
-        isOpen={yamlDialogOpen}
-        setIsOpen={setYamlDialogOpen}
-        dialogContent={
-          <YamlViewer yamlString={yamlString} yamlStringToCopy={yamlStringToCopy} filename={yamlFilename} />
-        }
-      />
     </div>
   );
 };
diff --git a/src/components/Projects/ProjectsList.tsx b/src/components/Projects/ProjectsList.tsx
index 62080c60..3284f27f 100644
--- a/src/components/Projects/ProjectsList.tsx
+++ b/src/components/Projects/ProjectsList.tsx
@@ -9,7 +9,7 @@ import '@ui5/webcomponents-icons/dist/copy';
 import '@ui5/webcomponents-icons/dist/arrow-right';
 import { ListProjectNames } from '../../lib/api/types/crate/listProjectNames';
 import { t } from 'i18next';
-import { YamlViewButtonWithLoader } from '../Yaml/YamlViewButtonWithLoader.tsx';
+import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
 import { useMemo } from 'react';
 import { ProjectsListItemMenu } from './ProjectsListItemMenu.tsx';
 
@@ -98,7 +98,8 @@ export default function ProjectsList() {
               alignItems: 'center',
             }}
           >
-            <YamlViewButtonWithLoader
+            <YamlViewButton
+              variant="loader"
               resourceType={'projects'}
               resourceName={instance.cell.row.original?.projectName}
             />
diff --git a/src/components/Splitter/SplitterContext.tsx b/src/components/Splitter/SplitterContext.tsx
new file mode 100644
index 00000000..8f1e0789
--- /dev/null
+++ b/src/components/Splitter/SplitterContext.tsx
@@ -0,0 +1,39 @@
+import { createContext, ReactNode, use, useCallback, useMemo, useState } from 'react';
+
+interface SplitterContextType {
+  isAsideVisible: boolean;
+  asideContent: ReactNode;
+  closeAside: () => void;
+  openInAside: (content: ReactNode) => void;
+}
+
+const SplitterContext = createContext<SplitterContextType | null>(null);
+
+export function SplitterProvider({ children }: { children: ReactNode }) {
+  const [isAsideVisible, setIsAsideVisible] = useState(false);
+  const [asideContent, setAsideContent] = useState<ReactNode | null>(null);
+
+  const openInAside = useCallback((node: ReactNode) => {
+    setAsideContent(node);
+    setIsAsideVisible(true);
+  }, []);
+
+  const closeAside = useCallback(() => {
+    setIsAsideVisible(false);
+    setAsideContent(null);
+  }, []);
+
+  const value = useMemo(() => {
+    return { isAsideVisible, asideContent, closeAside, openInAside };
+  }, [isAsideVisible, asideContent, closeAside, openInAside]);
+
+  return <SplitterContext value={value}>{children}</SplitterContext>;
+}
+
+export function useSplitter() {
+  const context = use(SplitterContext);
+  if (!context) {
+    throw new Error('useSplitter must be used within an SplitterProvider.');
+  }
+  return context;
+}
diff --git a/src/components/Splitter/SplitterLayout.module.css b/src/components/Splitter/SplitterLayout.module.css
new file mode 100644
index 00000000..f7a69efc
--- /dev/null
+++ b/src/components/Splitter/SplitterLayout.module.css
@@ -0,0 +1,9 @@
+.splitter {
+  width: 100%;
+  height: calc(100% - 3.25rem); /* subtract height of ShellBar */
+}
+
+.asideContent {
+  width: 100%;
+  background-color: var(--sapGroup_TitleBackground);
+}
diff --git a/src/components/Splitter/SplitterLayout.tsx b/src/components/Splitter/SplitterLayout.tsx
new file mode 100644
index 00000000..09c0f0c5
--- /dev/null
+++ b/src/components/Splitter/SplitterLayout.tsx
@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { SplitterElement, SplitterLayout as Ui5SplitterLayout } from '@ui5/webcomponents-react';
+import { useSplitter } from './SplitterContext.tsx';
+
+import styles from './SplitterLayout.module.css';
+
+export interface SplitterLayoutProps {
+  children: ReactNode; // main content
+}
+export function SplitterLayout({ children }: SplitterLayoutProps) {
+  const { isAsideVisible, asideContent } = useSplitter();
+
+  return (
+    <Ui5SplitterLayout
+      className={styles.splitter}
+      options={{
+        resetOnSizeChange: true,
+        resetOnCustomDepsChange: [isAsideVisible],
+      }}
+    >
+      <SplitterElement size="100%">{children}</SplitterElement>
+
+      {isAsideVisible ? (
+        <SplitterElement size={800} minSize={300} className={styles.asideContent}>
+          {asideContent}
+        </SplitterElement>
+      ) : null}
+    </Ui5SplitterLayout>
+  );
+}
diff --git a/src/components/Wizards/CreateManagedControlPlane/SummarizeStep.tsx b/src/components/Wizards/CreateManagedControlPlane/SummarizeStep.tsx
index 886bbd7a..64972ff0 100644
--- a/src/components/Wizards/CreateManagedControlPlane/SummarizeStep.tsx
+++ b/src/components/Wizards/CreateManagedControlPlane/SummarizeStep.tsx
@@ -6,7 +6,8 @@ import {
   ComponentsListItem,
   CreateManagedControlPlane,
 } from '../../../lib/api/types/crate/createManagedControlPlane.ts';
-import { YamlViewer } from '../../Yaml/YamlViewer.tsx';
+
+import YamlPanel from '../../Yaml/YamlPanel.tsx';
 import { idpPrefix } from '../../../utils/idpPrefix.ts';
 import { UseFormWatch } from 'react-hook-form';
 import { CreateDialogProps } from '../../Dialogs/CreateWorkspaceDialogContainer.tsx';
@@ -91,7 +92,7 @@ export const SummarizeStep: React.FC<SummarizeStepProps> = ({
               )}
             />
           ) : (
-            <YamlViewer yamlString={yamlString} filename={`mcp_${projectName}--ws-${workspaceName}`} />
+            <YamlPanel yamlString={yamlString} filename={`mcp_${projectName}--ws-${workspaceName}`} />
           )}
         </div>
       </Grid>
diff --git a/src/components/Yaml/YamlLoader.tsx b/src/components/Yaml/YamlLoader.tsx
index 1c26bf89..e69de29b 100644
--- a/src/components/Yaml/YamlLoader.tsx
+++ b/src/components/Yaml/YamlLoader.tsx
@@ -1,55 +0,0 @@
-import { YamlViewButtonProps } from './YamlViewButtonWithLoader.tsx';
-import { FC, useMemo } from 'react';
-
-import { stringify } from 'yaml';
-
-import { useTranslation } from 'react-i18next';
-import { ResourceObject } from '../../lib/api/types/crate/resourceObject.ts';
-import Loading from '../Shared/Loading.tsx';
-import IllustratedError from '../Shared/IllustratedError.tsx';
-import { YamlViewer } from './YamlViewer.tsx';
-import { useApiResource } from '../../lib/api/useApiResource';
-import { removeManagedFieldsAndFilterData, Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
-
-interface YamlLoaderProps extends YamlViewButtonProps {
-  showOnlyImportantData?: boolean;
-  setShowOnlyImportantData?: (showOnlyImportantData: boolean) => void;
-}
-
-export const YamlLoader: FC<YamlLoaderProps> = ({
-  workspaceName,
-  resourceType,
-  resourceName,
-  showOnlyImportantData = false,
-  setShowOnlyImportantData,
-}) => {
-  const { isLoading, data, error } = useApiResource(
-    ResourceObject(workspaceName ?? '', resourceType, resourceName),
-    undefined,
-    true,
-  );
-  const { t } = useTranslation();
-  const yamlString = useMemo(() => {
-    if (isLoading || error) return '';
-    return stringify(removeManagedFieldsAndFilterData(data as Resource, showOnlyImportantData));
-  }, [data, error, isLoading, showOnlyImportantData]);
-
-  const yamlStringToCopy = useMemo(() => {
-    if (isLoading || error) return '';
-    return stringify(removeManagedFieldsAndFilterData(data as Resource, false));
-  }, [data, error, isLoading]);
-  if (isLoading) return <Loading />;
-  if (error) {
-    return <IllustratedError details={t('common.cannotLoadData')} />;
-  }
-
-  return (
-    <YamlViewer
-      yamlString={yamlString}
-      yamlStringToCopy={yamlStringToCopy}
-      filename={`${workspaceName ? `${workspaceName}_` : ''}${resourceType}_${resourceName}`}
-      setShowOnlyImportantData={setShowOnlyImportantData}
-      showOnlyImportantData={showOnlyImportantData}
-    />
-  );
-};
diff --git a/src/components/Yaml/YamlPanel.module.css b/src/components/Yaml/YamlPanel.module.css
new file mode 100644
index 00000000..046617cd
--- /dev/null
+++ b/src/components/Yaml/YamlPanel.module.css
@@ -0,0 +1,10 @@
+.container {
+  position: relative;
+}
+
+.buttons {
+  position: sticky;
+  top: 0;
+  right: 0;
+  z-index: 1;
+}
diff --git a/src/components/Yaml/YamlPanel.tsx b/src/components/Yaml/YamlPanel.tsx
new file mode 100644
index 00000000..1587c3d0
--- /dev/null
+++ b/src/components/Yaml/YamlPanel.tsx
@@ -0,0 +1,45 @@
+import { FC } from 'react';
+import { Button, FlexBox } from '@ui5/webcomponents-react';
+import styles from './YamlPanel.module.css';
+import { useCopyToClipboard } from '../../hooks/useCopyToClipboard.ts';
+import { useTranslation } from 'react-i18next';
+import { SHOW_DOWNLOAD_BUTTON } from './YamlSidePanel.tsx';
+import { YamlViewer } from './YamlViewer.tsx';
+type YamlPanelProps = {
+  yamlString: string;
+  filename: string;
+};
+
+const YamlPanel: FC<YamlPanelProps> = ({ yamlString, filename }) => {
+  const { t } = useTranslation();
+  const { copyToClipboard } = useCopyToClipboard();
+  const downloadYaml = () => {
+    const blob = new Blob([yamlString], { type: 'text/yaml' });
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${filename}.yaml`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className={styles.container}>
+      <FlexBox className={styles.buttons} direction="Row" justifyContent="End" alignItems="Baseline" gap={16}>
+        <Button icon="copy" onClick={() => copyToClipboard(yamlString)}>
+          {t('buttons.copy')}
+        </Button>
+        {SHOW_DOWNLOAD_BUTTON && (
+          <Button icon="download" onClick={downloadYaml}>
+            {t('buttons.download')}
+          </Button>
+        )}
+      </FlexBox>
+      <YamlViewer yamlString={yamlString} />
+    </div>
+  );
+};
+
+export default YamlPanel;
diff --git a/src/components/Yaml/YamlSidePanel.module.css b/src/components/Yaml/YamlSidePanel.module.css
new file mode 100644
index 00000000..7112b16d
--- /dev/null
+++ b/src/components/Yaml/YamlSidePanel.module.css
@@ -0,0 +1,10 @@
+.panel {
+  width: 100%;
+}
+
+.content {
+  display: flex;
+  overflow-y: scroll;
+  height: 100%;
+  width: 100%;
+}
diff --git a/src/components/Yaml/YamlSidePanel.tsx b/src/components/Yaml/YamlSidePanel.tsx
new file mode 100644
index 00000000..6f686bfc
--- /dev/null
+++ b/src/components/Yaml/YamlSidePanel.tsx
@@ -0,0 +1,96 @@
+import {
+  CheckBox,
+  FlexBox,
+  Panel,
+  Title,
+  Toolbar,
+  ToolbarButton,
+  ToolbarSeparator,
+  ToolbarSpacer,
+} from '@ui5/webcomponents-react';
+
+import { useTranslation } from 'react-i18next';
+import { YamlViewer } from './YamlViewer.tsx';
+import { useSplitter } from '../Splitter/SplitterContext.tsx';
+import { useMemo, useState } from 'react';
+import { stringify } from 'yaml';
+import { removeManagedFieldsAndFilterData, Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
+import { useCopyToClipboard } from '../../hooks/useCopyToClipboard.ts';
+import styles from './YamlSidePanel.module.css';
+
+export const SHOW_DOWNLOAD_BUTTON = false; // Download button is hidden now due to stakeholder request
+
+export interface YamlSidePanelProps {
+  resource: Resource;
+  filename: string;
+}
+export function YamlSidePanel({ resource, filename }: YamlSidePanelProps) {
+  const [showOnlyImportantData, setShowOnlyImportantData] = useState(true);
+  const { closeAside } = useSplitter();
+  const { t } = useTranslation();
+
+  const yamlStringToDisplay = useMemo(() => {
+    return stringify(removeManagedFieldsAndFilterData(resource, showOnlyImportantData));
+  }, [resource, showOnlyImportantData]);
+  const yamlStringToCopy = useMemo(() => {
+    return stringify(removeManagedFieldsAndFilterData(resource, false));
+  }, [resource]);
+
+  const { copyToClipboard } = useCopyToClipboard();
+  const handleDownloadClick = () => {
+    const blob = new Blob([yamlStringToCopy], { type: 'text/yaml' });
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${filename}.yaml`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+  };
+
+  return (
+    <Panel
+      className={styles.panel}
+      fixed
+      header={
+        <Toolbar>
+          <Title>YAML</Title>
+          <ToolbarSpacer />
+          <FlexBox>
+            <CheckBox
+              text={t('yaml.showOnlyImportant')}
+              checked={showOnlyImportantData}
+              onChange={() => setShowOnlyImportantData(!showOnlyImportantData)}
+            />
+          </FlexBox>
+          <ToolbarButton
+            design="Transparent"
+            icon="copy"
+            text={t('buttons.copy')}
+            onClick={() => copyToClipboard(yamlStringToCopy)}
+          />
+          {SHOW_DOWNLOAD_BUTTON ? (
+            <ToolbarButton
+              design="Transparent"
+              icon="download"
+              text={t('buttons.download')}
+              onClick={handleDownloadClick}
+            />
+          ) : null}
+          <ToolbarSeparator />
+          <ToolbarButton
+            overflowPriority="NeverOverflow"
+            design="Transparent"
+            icon="sap-icon://navigation-right-arrow"
+            onClick={closeAside}
+          />
+        </Toolbar>
+      }
+    >
+      <div className={styles.content}>
+        <YamlViewer yamlString={yamlStringToDisplay} />
+      </div>
+    </Panel>
+  );
+}
diff --git a/src/components/Yaml/YamlSidePanelWithLoader.tsx b/src/components/Yaml/YamlSidePanelWithLoader.tsx
new file mode 100644
index 00000000..48a3d10a
--- /dev/null
+++ b/src/components/Yaml/YamlSidePanelWithLoader.tsx
@@ -0,0 +1,29 @@
+import { useApiResource } from '../../lib/api/useApiResource.ts';
+import { ResourceObject } from '../../lib/api/types/crate/resourceObject.ts';
+import { useTranslation } from 'react-i18next';
+import Loading from '../Shared/Loading.tsx';
+import IllustratedError from '../Shared/IllustratedError.tsx';
+
+import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
+import { YamlSidePanel } from './YamlSidePanel.tsx';
+
+export interface YamlSidePanelWithLoaderProps {
+  workspaceName?: string;
+  resourceType: 'projects' | 'workspaces' | 'managedcontrolplanes';
+  resourceName: string;
+}
+export function YamlSidePanelWithLoader({ workspaceName, resourceType, resourceName }: YamlSidePanelWithLoaderProps) {
+  const { t } = useTranslation();
+  const { isLoading, data, error } = useApiResource(
+    ResourceObject(workspaceName ?? '', resourceType, resourceName),
+    undefined,
+    true,
+  );
+
+  if (isLoading) return <Loading />;
+  if (error) return <IllustratedError details={t('common.cannotLoadData')} />;
+
+  const filename = `${workspaceName ? `${workspaceName}_` : ''}${resourceType}_${resourceName}`;
+
+  return <YamlSidePanel resource={data as Resource} filename={filename} />;
+}
diff --git a/src/components/Yaml/YamlViewButton.module.css b/src/components/Yaml/YamlViewButton.module.css
new file mode 100644
index 00000000..e871c4e7
--- /dev/null
+++ b/src/components/Yaml/YamlViewButton.module.css
@@ -0,0 +1,11 @@
+.button {
+  width: 4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 32px;
+    transform: translateY(1px);
+  }
+}
diff --git a/src/components/Yaml/YamlViewButton.tsx b/src/components/Yaml/YamlViewButton.tsx
index 7e96875c..9910c332 100644
--- a/src/components/Yaml/YamlViewButton.tsx
+++ b/src/components/Yaml/YamlViewButton.tsx
@@ -1,58 +1,68 @@
 import { Button } from '@ui5/webcomponents-react';
-import { FC, useMemo, useState } from 'react';
-import styles from './YamlViewer.module.css';
+import styles from './YamlViewButton.module.css';
 import { useTranslation } from 'react-i18next';
-import { YamlViewer } from './YamlViewer.tsx';
-import { stringify } from 'yaml';
-import { removeManagedFieldsAndFilterData, Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
+import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
+
+
 import { YamlIcon } from './YamlIcon.tsx';
-import { YamlViewDialog } from './YamlViewDialog.tsx';
+import { useSplitter } from '../Splitter/SplitterContext.tsx';
+import { YamlSidePanel } from './YamlSidePanel.tsx';
+import { YamlSidePanelWithLoader } from './YamlSidePanelWithLoader.tsx';
 
-export type YamlViewButtonProps = {
-  resourceObject: unknown;
-};
+export interface YamlViewButtonResourceProps {
+  variant: 'resource';
+  resource: Resource;
+}
+export interface YamlViewButtonLoaderProps {
+  variant: 'loader';
+  workspaceName?: string;
+  resourceType: 'projects' | 'workspaces' | 'managedcontrolplanes';
+  resourceName: string;
+}
+export type YamlViewButtonProps = YamlViewButtonResourceProps | YamlViewButtonLoaderProps;
 
-export const YamlViewButton: FC<YamlViewButtonProps> = ({ resourceObject }) => {
-  const [showOnlyImportantData, setShowOnlyImportantData] = useState(true);
-  const [isOpen, setIsOpen] = useState(false);
+export function YamlViewButton(props: YamlViewButtonProps) {
   const { t } = useTranslation();
-  const resource = resourceObject as Resource;
+  const { openInAside } = useSplitter();
 
-  const yamlString = useMemo(() => {
-    return stringify(removeManagedFieldsAndFilterData(resource, showOnlyImportantData));
-  }, [resource, showOnlyImportantData]);
-  const yamlStringToCopy = useMemo(() => {
-    return stringify(removeManagedFieldsAndFilterData(resource, false));
-  }, [resource]);
-  return (
-    <span>
-      <YamlViewDialog
-        isOpen={isOpen}
-        setIsOpen={setIsOpen}
-        dialogContent={
-          <YamlViewer
-            yamlStringToCopy={yamlStringToCopy}
-            yamlString={yamlString}
+  const openSplitterSidePanel = () => {
+    switch (props.variant) {
+      case 'resource': {
+        const { resource } = props;
+        openInAside(
+          <YamlSidePanel
+            resource={props.resource}
             filename={`${resource?.kind ?? ''}${resource?.metadata?.name ? '_' : ''}${resource?.metadata?.name ?? ''}`}
-            setShowOnlyImportantData={setShowOnlyImportantData}
-            showOnlyImportantData={showOnlyImportantData}
-          />
-        }
-        setShowOnlyImportantData={setShowOnlyImportantData}
-        showOnlyImportantData={showOnlyImportantData}
-      />
+          />,
+        );
+        break;
+      }
 
+      case 'loader': {
+        const { workspaceName, resourceType, resourceName } = props;
+        openInAside(
+          <YamlSidePanelWithLoader
+            workspaceName={workspaceName}
+            resourceType={resourceType}
+            resourceName={resourceName}
+          />,
+        );
+        break;
+      }
+    }
+  };
+
+  return (
+    <span>
       <Button
         className={styles.button}
-        design={'Transparent'}
+        design="Transparent"
         aria-label={t('buttons.viewResource')}
         title={t('buttons.viewResource')}
-        onClick={() => {
-          setIsOpen(true);
-        }}
+        onClick={openSplitterSidePanel}
       >
         <YamlIcon />
       </Button>
     </span>
   );
-};
+}
diff --git a/src/components/Yaml/YamlViewButtonWithLoader.tsx b/src/components/Yaml/YamlViewButtonWithLoader.tsx
deleted file mode 100644
index b5565b0f..00000000
--- a/src/components/Yaml/YamlViewButtonWithLoader.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Button } from '@ui5/webcomponents-react';
-import { FC, useState } from 'react';
-import { YamlLoader } from './YamlLoader.tsx';
-import { useTranslation } from 'react-i18next';
-import styles from './YamlViewer.module.css';
-import { YamlIcon } from './YamlIcon.tsx';
-import { YamlViewDialog } from './YamlViewDialog.tsx';
-
-export type YamlViewButtonProps = {
-  workspaceName?: string;
-  resourceType: 'projects' | 'workspaces' | 'managedcontrolplanes';
-  resourceName: string;
-};
-
-export const YamlViewButtonWithLoader: FC<YamlViewButtonProps> = ({ workspaceName, resourceType, resourceName }) => {
-  const [showOnlyImportantData, setShowOnlyImportantData] = useState(true);
-  const [isOpen, setIsOpen] = useState(false);
-  const { t } = useTranslation();
-  return (
-    <span>
-      <YamlViewDialog
-        isOpen={isOpen}
-        setIsOpen={setIsOpen}
-        dialogContent={
-          <YamlLoader
-            workspaceName={workspaceName}
-            resourceName={resourceName}
-            resourceType={resourceType}
-            showOnlyImportantData={showOnlyImportantData}
-            setShowOnlyImportantData={setShowOnlyImportantData}
-          />
-        }
-        setShowOnlyImportantData={setShowOnlyImportantData}
-        showOnlyImportantData={showOnlyImportantData}
-      />
-
-      <Button
-        className={styles.button}
-        design={'Transparent'}
-        aria-label={t('buttons.viewResource')}
-        title={t('buttons.viewResource')}
-        onClick={() => {
-          setIsOpen(true);
-        }}
-      >
-        <YamlIcon />
-      </Button>
-    </span>
-  );
-};
diff --git a/src/components/Yaml/YamlViewDialog.tsx b/src/components/Yaml/YamlViewDialog.tsx
index adb0f61c..e69de29b 100644
--- a/src/components/Yaml/YamlViewDialog.tsx
+++ b/src/components/Yaml/YamlViewDialog.tsx
@@ -1,57 +0,0 @@
-import { Bar, Button, CheckBox, Dialog } from '@ui5/webcomponents-react';
-
-import { FC, ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import styles from './YamlViewDialog.module.css';
-export type YamlViewDialogProps = {
-  isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
-  dialogContent: ReactNode;
-  showOnlyImportantData?: boolean;
-  setShowOnlyImportantData?: (showOnlyImportantData: boolean) => void;
-};
-
-export const YamlViewDialog: FC<YamlViewDialogProps> = ({
-  isOpen,
-  setIsOpen,
-  dialogContent,
-  showOnlyImportantData,
-  setShowOnlyImportantData,
-}) => {
-  const { t } = useTranslation();
-  const handleShowOnlyImportantData = () => {
-    setShowOnlyImportantData?.(!showOnlyImportantData);
-  };
-  return (
-    <Dialog
-      open={isOpen}
-      stretch
-      initialFocus={'closeButton'}
-      footer={
-        <Bar
-          startContent={
-            setShowOnlyImportantData && (
-              <CheckBox
-                text={t('yaml.showOnlyImportant')}
-                checked={showOnlyImportantData}
-                onChange={handleShowOnlyImportantData}
-              />
-            )
-          }
-          design="Footer"
-          endContent={
-            <Button design="Emphasized" id={'closeButton'} onClick={() => setIsOpen(false)}>
-              {t('common.close')}
-            </Button>
-          }
-        />
-      }
-      onClick={(e) => e.stopPropagation()}
-      onClose={() => {
-        setIsOpen(false);
-      }}
-    >
-      <div className={styles.wrapper}>{isOpen && dialogContent}</div>
-    </Dialog>
-  );
-};
diff --git a/src/components/Yaml/YamlViewer.tsx b/src/components/Yaml/YamlViewer.tsx
index 106dbb00..5c8bf2a6 100644
--- a/src/components/Yaml/YamlViewer.tsx
+++ b/src/components/Yaml/YamlViewer.tsx
@@ -50,3 +50,4 @@ export const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename, yamlStri
     </div>
   );
 };
+
diff --git a/src/spaces/mcp/pages/McpPage.tsx b/src/spaces/mcp/pages/McpPage.tsx
index fbf3248f..d6b0fa29 100644
--- a/src/spaces/mcp/pages/McpPage.tsx
+++ b/src/spaces/mcp/pages/McpPage.tsx
@@ -29,7 +29,7 @@ import ComponentList from '../../../components/ControlPlane/ComponentList.tsx';
 import MCPHealthPopoverButton from '../../../components/ControlPlane/MCPHealthPopoverButton.tsx';
 import { useApiResource } from '../../../lib/api/useApiResource.ts';
 
-import { YamlViewButtonWithLoader } from '../../../components/Yaml/YamlViewButtonWithLoader.tsx';
+import { YamlViewButton } from '../../../components/Yaml/YamlViewButton.tsx';
 import { Landscapers } from '../../../components/ControlPlane/Landscapers.tsx';
 import { AuthProviderMcp } from '../auth/AuthContextMcp.tsx';
 import { isNotFoundError } from '../../../lib/api/error.ts';
@@ -105,7 +105,8 @@ export default function McpPage() {
                       workspaceName={workspaceName ?? ''}
                       mcpName={controlPlaneName}
                     />
-                    <YamlViewButtonWithLoader
+                    <YamlViewButton
+                      variant="loader"
                       workspaceName={mcp?.status?.access?.namespace}
                       resourceType={'managedcontrolplanes'}
                       resourceName={controlPlaneName}

From a937eef3d6bf5f52fdac79ba09291fe0b78d0c7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Thu, 2 Oct 2025 08:54:32 +0200
Subject: [PATCH 21/32] fix

---
 src/components/Yaml/YamlViewer.module.css | 23 +--------------
 src/components/Yaml/YamlViewer.tsx        | 36 ++---------------------
 2 files changed, 4 insertions(+), 55 deletions(-)

diff --git a/src/components/Yaml/YamlViewer.module.css b/src/components/Yaml/YamlViewer.module.css
index e7d1ce8a..18f3c420 100644
--- a/src/components/Yaml/YamlViewer.module.css
+++ b/src/components/Yaml/YamlViewer.module.css
@@ -1,27 +1,6 @@
 .container {
-  position: relative;
   width: 100%;
-  height: 100%;
+  min-height: 100%;
   max-height: 100%;
   max-width: 100%;
-  overflow: hidden;
-}
-
-.buttons {
-  position: sticky;
-  top: 0;
-  right: 0;
-  z-index: 1;
-}
-
-.button {
-  width: 4rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  svg {
-    width: 32px;
-    transform: translateY(1px);
-  }
 }
diff --git a/src/components/Yaml/YamlViewer.tsx b/src/components/Yaml/YamlViewer.tsx
index 5c8bf2a6..a611b921 100644
--- a/src/components/Yaml/YamlViewer.tsx
+++ b/src/components/Yaml/YamlViewer.tsx
@@ -1,7 +1,5 @@
 import { FC } from 'react';
-import { Button, FlexBox } from '@ui5/webcomponents-react';
-import { useCopyToClipboard } from '../../hooks/useCopyToClipboard.ts';
-import { useTranslation } from 'react-i18next';
+
 import { YamlEditor } from '../YamlEditor/YamlEditor';
 
 import styles from './YamlViewer.module.css';
@@ -14,40 +12,12 @@ type YamlViewerProps = {
   setShowOnlyImportantData?: (showOnlyImportantData: boolean) => void;
 };
 
-// Download button is hidden now due to stakeholder request
-const SHOW_DOWNLOAD_BUTTON = false;
-
-export const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename, yamlStringToCopy }) => {
-  const { t } = useTranslation();
-  const { copyToClipboard } = useCopyToClipboard();
-  const downloadYaml = () => {
-    const blob = new Blob([yamlString], { type: 'text/yaml' });
-    const url = window.URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = `${filename}.yaml`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    window.URL.revokeObjectURL(url);
-  };
-
+export const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename }) => {
   return (
     <div className={styles.container}>
-      <FlexBox className={styles.buttons} direction="Row" justifyContent="End" alignItems="Baseline" gap={16}>
-        <Button icon="copy" onClick={() => copyToClipboard(yamlStringToCopy ?? yamlString)}>
-          {t('buttons.copy')}
-        </Button>
-        {SHOW_DOWNLOAD_BUTTON && (
-          <Button icon="download" onClick={downloadYaml}>
-            {t('buttons.download')}
-          </Button>
-        )}
-      </FlexBox>
-
       {/* Use controlled value with a stable model path to update content without remounting */}
+      <div>.</div>
       <YamlEditor value={yamlString} path={`${filename}.yaml`} options={{ readOnly: true }} />
     </div>
   );
 };
-

From 33d4d0d89f1c74bf4e2b515fb99f5a0106d095d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Thu, 2 Oct 2025 09:49:32 +0200
Subject: [PATCH 22/32] fixes

---
 src/components/Yaml/YamlDiff.module.css       |  4 ++--
 src/components/Yaml/YamlViewDialog.module.css |  6 ------
 src/components/Yaml/YamlViewDialog.tsx        |  0
 src/components/Yaml/YamlViewer.module.css     |  3 +--
 src/components/Yaml/YamlViewer.tsx            |  4 ++--
 src/components/YamlEditor/YamlDiffEditor.tsx  | 19 +++++++++----------
 6 files changed, 14 insertions(+), 22 deletions(-)
 delete mode 100644 src/components/Yaml/YamlViewDialog.module.css
 delete mode 100644 src/components/Yaml/YamlViewDialog.tsx

diff --git a/src/components/Yaml/YamlDiff.module.css b/src/components/Yaml/YamlDiff.module.css
index 02f7466f..d699d21b 100644
--- a/src/components/Yaml/YamlDiff.module.css
+++ b/src/components/Yaml/YamlDiff.module.css
@@ -1,8 +1,8 @@
 .container {
   position: relative;
-
+  border: 1px solid red;
   width: 100%;
-  height: 100%;
+  height: 50vh;
   max-height: 100%;
   max-width: 100%;
   overflow: hidden;
diff --git a/src/components/Yaml/YamlViewDialog.module.css b/src/components/Yaml/YamlViewDialog.module.css
deleted file mode 100644
index 3adfc55e..00000000
--- a/src/components/Yaml/YamlViewDialog.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.wrapper {
-  width: 100%;
-  height: 100%;
-  max-height: 100%;
-  max-width: 100%;
-}
diff --git a/src/components/Yaml/YamlViewDialog.tsx b/src/components/Yaml/YamlViewDialog.tsx
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/components/Yaml/YamlViewer.module.css b/src/components/Yaml/YamlViewer.module.css
index 18f3c420..9d4550c9 100644
--- a/src/components/Yaml/YamlViewer.module.css
+++ b/src/components/Yaml/YamlViewer.module.css
@@ -1,6 +1,5 @@
 .container {
   width: 100%;
-  min-height: 100%;
-  max-height: 100%;
+  height: calc(100vh - 8rem);
   max-width: 100%;
 }
diff --git a/src/components/Yaml/YamlViewer.tsx b/src/components/Yaml/YamlViewer.tsx
index a611b921..6e660678 100644
--- a/src/components/Yaml/YamlViewer.tsx
+++ b/src/components/Yaml/YamlViewer.tsx
@@ -16,8 +16,8 @@ export const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename }) => {
   return (
     <div className={styles.container}>
       {/* Use controlled value with a stable model path to update content without remounting */}
-      <div>.</div>
-      <YamlEditor value={yamlString} path={`${filename}.yaml`} options={{ readOnly: true }} />
+
+      <YamlEditor value={yamlString} path={`${filename}.yaml`} options={{ readOnly: false }} />
     </div>
   );
 };
diff --git a/src/components/YamlEditor/YamlDiffEditor.tsx b/src/components/YamlEditor/YamlDiffEditor.tsx
index c41eeb48..95e5fa3c 100644
--- a/src/components/YamlEditor/YamlDiffEditor.tsx
+++ b/src/components/YamlEditor/YamlDiffEditor.tsx
@@ -34,18 +34,17 @@ export const YamlDiffEditor = (props: YamlDiffEditorProps) => {
     scrollBeyondLastLine: false,
     renderMarginRevertIcon: false,
     automaticLayout: true,
+    readOnly: true,
   };
 
   return (
-    <div style={{ width: '100%', height: '100%', minHeight: '50vh' }}>
-      <DiffEditor
-        {...rest}
-        theme={computedTheme}
-        options={simplifiedOptions}
-        height="100%"
-        // Force YAML language for both panes
-        language="yaml"
-      />
-    </div>
+    <DiffEditor
+      {...rest}
+      theme={computedTheme}
+      options={simplifiedOptions}
+      height="100%"
+      // Force YAML language for both panes
+      language="yaml"
+    />
   );
 };

From a7e6cb8577a3fd3d4b1ca84a98eff5aafc32e089 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Thu, 2 Oct 2025 10:31:57 +0200
Subject: [PATCH 23/32] fix

---
 .../ControlPlaneCard/ControlPlaneCard.module.css            | 1 +
 .../List/ControlPlaneListWorkspaceGridTile.tsx              | 6 +++---
 src/utils/removeManagedFieldsAndFilterData.ts               | 1 +
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.module.css b/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.module.css
index 91197e01..f26e35eb 100644
--- a/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.module.css
+++ b/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.module.css
@@ -1,5 +1,6 @@
 .card {
   margin: 0.75rem 0.75rem 0.75rem 0;
+  min-width: min-content;
 }
 
 .container {
diff --git a/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx b/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
index 35952ae0..fde9a481 100644
--- a/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
+++ b/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
@@ -1,4 +1,4 @@
-import { Button, FlexBox, Grid, ObjectPageSection, Panel, Title } from '@ui5/webcomponents-react';
+import { Button, FlexBox, ObjectPageSection, Panel, Title } from '@ui5/webcomponents-react';
 import '@ui5/webcomponents-fiori/dist/illustrations/NoData.js';
 import '@ui5/webcomponents-fiori/dist/illustrations/EmptyList.js';
 import '@ui5/webcomponents-icons/dist/delete';
@@ -161,7 +161,7 @@ export function ControlPlaneListWorkspaceGridTile({ projectName, workspace }: Pr
               }
             />
           ) : (
-            <Grid defaultSpan="XL4 L4 M7 S12">
+            <FlexBox wrap={'Wrap'} gap={'1rem'}>
               {controlplanes?.map((cp) => (
                 <ControlPlaneCard
                   key={`${cp.metadata.name}--${cp.metadata.namespace}`}
@@ -170,7 +170,7 @@ export function ControlPlaneListWorkspaceGridTile({ projectName, workspace }: Pr
                   workspace={workspace}
                 />
               ))}
-            </Grid>
+            </FlexBox>
           )}
         </Panel>
       </ObjectPageSection>
diff --git a/src/utils/removeManagedFieldsAndFilterData.ts b/src/utils/removeManagedFieldsAndFilterData.ts
index dc01ee20..13984db0 100644
--- a/src/utils/removeManagedFieldsAndFilterData.ts
+++ b/src/utils/removeManagedFieldsAndFilterData.ts
@@ -40,6 +40,7 @@ const cleanUpResource = (
       }
       delete newResource.metadata.generation;
       delete newResource.metadata.uid;
+      delete newResource.metadata.resourceVersion;
     }
   }
 

From a8428a4f1b0a7d97b9be5b4214badb56515c294b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Thu, 2 Oct 2025 11:07:43 +0200
Subject: [PATCH 24/32] fix

---
 .../ControlPlaneCard.module.css               |  3 +--
 .../ControlPlaneListWorkspaceGridTile.tsx     | 22 ++++++++++---------
 .../List/WorkspacesList.module.css            | 17 ++++++++++++++
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.module.css b/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.module.css
index f26e35eb..39aa0c3b 100644
--- a/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.module.css
+++ b/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.module.css
@@ -1,6 +1,5 @@
 .card {
-  margin: 0.75rem 0.75rem 0.75rem 0;
-  min-width: min-content;
+  margin: 0;
 }
 
 .container {
diff --git a/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx b/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
index fde9a481..b3ecef31 100644
--- a/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
+++ b/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
@@ -161,16 +161,18 @@ export function ControlPlaneListWorkspaceGridTile({ projectName, workspace }: Pr
               }
             />
           ) : (
-            <FlexBox wrap={'Wrap'} gap={'1rem'}>
-              {controlplanes?.map((cp) => (
-                <ControlPlaneCard
-                  key={`${cp.metadata.name}--${cp.metadata.namespace}`}
-                  controlPlane={cp}
-                  projectName={projectName}
-                  workspace={workspace}
-                />
-              ))}
-            </FlexBox>
+            <div className={styles.wrapper}>
+              <div className={styles.grid}>
+                {controlplanes?.map((cp) => (
+                  <ControlPlaneCard
+                    key={`${cp.metadata.name}--${cp.metadata.namespace}`}
+                    controlPlane={cp}
+                    projectName={projectName}
+                    workspace={workspace}
+                  />
+                ))}
+              </div>
+            </div>
           )}
         </Panel>
       </ObjectPageSection>
diff --git a/src/components/ControlPlanes/List/WorkspacesList.module.css b/src/components/ControlPlanes/List/WorkspacesList.module.css
index 04406250..b8e4294d 100644
--- a/src/components/ControlPlanes/List/WorkspacesList.module.css
+++ b/src/components/ControlPlanes/List/WorkspacesList.module.css
@@ -1,3 +1,20 @@
 .createButton {
   margin-bottom: 2rem;
 }
+
+.wrapper {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+  @container (width > 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
+  @container (width > 1024px) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}

From 198714f41cdb57464275ad2323eb7eae43c6463c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Thu, 2 Oct 2025 13:43:21 +0200
Subject: [PATCH 25/32] fix

---
 src/components/Graphs/Graph.tsx                       |  2 --
 .../SummarizeStep.module.css                          |  4 ++++
 .../CreateManagedControlPlane/SummarizeStep.tsx       |  7 ++++---
 .../CreateManagedControlPlane/YamlDiff.module.css     |  8 ++++++++
 .../CreateManagedControlPlane}/YamlDiff.tsx           |  2 +-
 src/components/Yaml/YamlDiff.module.css               |  9 ---------
 src/components/Yaml/YamlPanel.tsx                     |  2 +-
 src/components/Yaml/YamlViewer.tsx                    |  2 +-
 src/components/YamlEditor/YamlDiffEditor.tsx          | 11 +----------
 9 files changed, 20 insertions(+), 27 deletions(-)
 create mode 100644 src/components/Wizards/CreateManagedControlPlane/SummarizeStep.module.css
 create mode 100644 src/components/Wizards/CreateManagedControlPlane/YamlDiff.module.css
 rename src/components/{Yaml => Wizards/CreateManagedControlPlane}/YamlDiff.tsx (84%)
 delete mode 100644 src/components/Yaml/YamlDiff.module.css

diff --git a/src/components/Graphs/Graph.tsx b/src/components/Graphs/Graph.tsx
index 577da704..3d215da4 100644
--- a/src/components/Graphs/Graph.tsx
+++ b/src/components/Graphs/Graph.tsx
@@ -15,8 +15,6 @@ import { useSplitter } from '../Splitter/SplitterContext.tsx';
 import { YamlSidePanel } from '../Yaml/YamlSidePanel.tsx';
 import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 
-
-
 const nodeTypes = {
   custom: (props: NodeProps<Node<NodeData, 'custom'>>) => (
     <CustomNode
diff --git a/src/components/Wizards/CreateManagedControlPlane/SummarizeStep.module.css b/src/components/Wizards/CreateManagedControlPlane/SummarizeStep.module.css
new file mode 100644
index 00000000..776c77d3
--- /dev/null
+++ b/src/components/Wizards/CreateManagedControlPlane/SummarizeStep.module.css
@@ -0,0 +1,4 @@
+.wrapper {
+  position: relative;
+  height: 100%;
+}
diff --git a/src/components/Wizards/CreateManagedControlPlane/SummarizeStep.tsx b/src/components/Wizards/CreateManagedControlPlane/SummarizeStep.tsx
index 64972ff0..dbb9a523 100644
--- a/src/components/Wizards/CreateManagedControlPlane/SummarizeStep.tsx
+++ b/src/components/Wizards/CreateManagedControlPlane/SummarizeStep.tsx
@@ -11,8 +11,9 @@ import YamlPanel from '../../Yaml/YamlPanel.tsx';
 import { idpPrefix } from '../../../utils/idpPrefix.ts';
 import { UseFormWatch } from 'react-hook-form';
 import { CreateDialogProps } from '../../Dialogs/CreateWorkspaceDialogContainer.tsx';
-import { YamlDiff } from '../../Yaml/YamlDiff.tsx';
 
+import styles from './SummarizeStep.module.css';
+import { YamlDiff } from './YamlDiff.tsx';
 interface SummarizeStepProps {
   watch: UseFormWatch<CreateDialogProps>;
   projectName: string;
@@ -46,7 +47,7 @@ export const SummarizeStep: React.FC<SummarizeStepProps> = ({
     ),
   );
   return (
-    <>
+    <div className={styles.wrapper}>
       <Title>{t('common.summarize')}</Title>
       <Grid defaultSpan="XL6 L6 M6 S6">
         <div>
@@ -96,6 +97,6 @@ export const SummarizeStep: React.FC<SummarizeStepProps> = ({
           )}
         </div>
       </Grid>
-    </>
+    </div>
   );
 };
diff --git a/src/components/Wizards/CreateManagedControlPlane/YamlDiff.module.css b/src/components/Wizards/CreateManagedControlPlane/YamlDiff.module.css
new file mode 100644
index 00000000..ed66e2c2
--- /dev/null
+++ b/src/components/Wizards/CreateManagedControlPlane/YamlDiff.module.css
@@ -0,0 +1,8 @@
+.container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: calc(50% - 2rem);
+  right: 0;
+  overflow: hidden;
+}
diff --git a/src/components/Yaml/YamlDiff.tsx b/src/components/Wizards/CreateManagedControlPlane/YamlDiff.tsx
similarity index 84%
rename from src/components/Yaml/YamlDiff.tsx
rename to src/components/Wizards/CreateManagedControlPlane/YamlDiff.tsx
index abde30a8..448b438a 100644
--- a/src/components/Yaml/YamlDiff.tsx
+++ b/src/components/Wizards/CreateManagedControlPlane/YamlDiff.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react';
 
-import { YamlDiffEditor } from '../YamlEditor/YamlDiffEditor.tsx';
 import styles from './YamlDiff.module.css';
+import { YamlDiffEditor } from '../../YamlEditor/YamlDiffEditor.tsx';
 type YamlDiffProps = {
   originalYaml: string;
   modifiedYaml: string;
diff --git a/src/components/Yaml/YamlDiff.module.css b/src/components/Yaml/YamlDiff.module.css
deleted file mode 100644
index d699d21b..00000000
--- a/src/components/Yaml/YamlDiff.module.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.container {
-  position: relative;
-  border: 1px solid red;
-  width: 100%;
-  height: 50vh;
-  max-height: 100%;
-  max-width: 100%;
-  overflow: hidden;
-}
diff --git a/src/components/Yaml/YamlPanel.tsx b/src/components/Yaml/YamlPanel.tsx
index 1587c3d0..1ee5ef23 100644
--- a/src/components/Yaml/YamlPanel.tsx
+++ b/src/components/Yaml/YamlPanel.tsx
@@ -37,7 +37,7 @@ const YamlPanel: FC<YamlPanelProps> = ({ yamlString, filename }) => {
           </Button>
         )}
       </FlexBox>
-      <YamlViewer yamlString={yamlString} />
+      <YamlViewer yamlString={yamlString} filename={'summarize'} />
     </div>
   );
 };
diff --git a/src/components/Yaml/YamlViewer.tsx b/src/components/Yaml/YamlViewer.tsx
index 6e660678..625c8804 100644
--- a/src/components/Yaml/YamlViewer.tsx
+++ b/src/components/Yaml/YamlViewer.tsx
@@ -17,7 +17,7 @@ export const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename }) => {
     <div className={styles.container}>
       {/* Use controlled value with a stable model path to update content without remounting */}
 
-      <YamlEditor value={yamlString} path={`${filename}.yaml`} options={{ readOnly: false }} />
+      <YamlEditor value={yamlString} path={`${filename}.yaml`} options={{ readOnly: true }} />
     </div>
   );
 };
diff --git a/src/components/YamlEditor/YamlDiffEditor.tsx b/src/components/YamlEditor/YamlDiffEditor.tsx
index 95e5fa3c..3bd4b43d 100644
--- a/src/components/YamlEditor/YamlDiffEditor.tsx
+++ b/src/components/YamlEditor/YamlDiffEditor.tsx
@@ -37,14 +37,5 @@ export const YamlDiffEditor = (props: YamlDiffEditorProps) => {
     readOnly: true,
   };
 
-  return (
-    <DiffEditor
-      {...rest}
-      theme={computedTheme}
-      options={simplifiedOptions}
-      height="100%"
-      // Force YAML language for both panes
-      language="yaml"
-    />
-  );
+  return <DiffEditor {...rest} theme={computedTheme} options={simplifiedOptions} height="100%" language="yaml" />;
 };

From 6bc59d25fdcea856bd0c1a5f088ec73541797254 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Thu, 2 Oct 2025 14:00:13 +0200
Subject: [PATCH 26/32] Update monaco.ts

---
 src/lib/monaco.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/lib/monaco.ts b/src/lib/monaco.ts
index b823bbb4..4983272d 100644
--- a/src/lib/monaco.ts
+++ b/src/lib/monaco.ts
@@ -64,9 +64,8 @@ const GITHUB_DARK_EDITOR_COLORS: monaco.editor.IColors = {
 
 export const configureMonaco = () => {
   // Route YAML language to monaco-yaml worker, everything else to the default editor worker
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (self as any).MonacoEnvironment = {
-    getWorker: (_: string, label: string) => {
+  MonacoEnvironment = {
+    getWorker: (_moduleId: string, label: string): Worker => {
       if (label === 'yaml') {
         return new YamlWorker();
       }

From 736aac4683c576893bd2ea9727b8901d07b25d01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Thu, 2 Oct 2025 14:06:59 +0200
Subject: [PATCH 27/32] Revert "Update monaco.ts"

This reverts commit 6bc59d25fdcea856bd0c1a5f088ec73541797254.
---
 src/lib/monaco.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/monaco.ts b/src/lib/monaco.ts
index 4983272d..b823bbb4 100644
--- a/src/lib/monaco.ts
+++ b/src/lib/monaco.ts
@@ -64,8 +64,9 @@ const GITHUB_DARK_EDITOR_COLORS: monaco.editor.IColors = {
 
 export const configureMonaco = () => {
   // Route YAML language to monaco-yaml worker, everything else to the default editor worker
-  MonacoEnvironment = {
-    getWorker: (_moduleId: string, label: string): Worker => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (self as any).MonacoEnvironment = {
+    getWorker: (_: string, label: string) => {
       if (label === 'yaml') {
         return new YamlWorker();
       }

From 64412df1752d0e120c993c446340059bf1a370d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Thu, 2 Oct 2025 14:34:12 +0200
Subject: [PATCH 28/32] Update WorkspacesList.module.css

---
 src/components/ControlPlanes/List/WorkspacesList.module.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ControlPlanes/List/WorkspacesList.module.css b/src/components/ControlPlanes/List/WorkspacesList.module.css
index b8e4294d..0200b05e 100644
--- a/src/components/ControlPlanes/List/WorkspacesList.module.css
+++ b/src/components/ControlPlanes/List/WorkspacesList.module.css
@@ -3,14 +3,14 @@
 }
 
 .wrapper {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  margin-top: 0.375rem;
+  margin-bottom: 0.375rem;
 }
 
 .grid {
   display: grid;
   grid-template-columns: 1fr;
-  gap: 2rem;
+  gap: 1.5rem;
   @container (width > 768px) {
     grid-template-columns: 1fr 1fr;
   }

From eb98bcc49ed4045997fcb38241862df64ceb829c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Thu, 2 Oct 2025 14:40:27 +0200
Subject: [PATCH 29/32] Update src/components/Yaml/YamlPanel.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/components/Yaml/YamlPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Yaml/YamlPanel.tsx b/src/components/Yaml/YamlPanel.tsx
index 1ee5ef23..92b04a1b 100644
--- a/src/components/Yaml/YamlPanel.tsx
+++ b/src/components/Yaml/YamlPanel.tsx
@@ -37,7 +37,7 @@ const YamlPanel: FC<YamlPanelProps> = ({ yamlString, filename }) => {
           </Button>
         )}
       </FlexBox>
-      <YamlViewer yamlString={yamlString} filename={'summarize'} />
+      <YamlViewer yamlString={yamlString} filename={filename} />
     </div>
   );
 };

From 6e226d47693e06d6fcd8111cbf95c74432ee8b74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Thu, 2 Oct 2025 14:40:58 +0200
Subject: [PATCH 30/32] Update src/components/Yaml/YamlViewer.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/components/Yaml/YamlViewer.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/Yaml/YamlViewer.tsx b/src/components/Yaml/YamlViewer.tsx
index 625c8804..2a164de5 100644
--- a/src/components/Yaml/YamlViewer.tsx
+++ b/src/components/Yaml/YamlViewer.tsx
@@ -6,10 +6,7 @@ import styles from './YamlViewer.module.css';
 
 type YamlViewerProps = {
   yamlString: string;
-  yamlStringToCopy?: string;
   filename: string;
-  showOnlyImportantData?: boolean;
-  setShowOnlyImportantData?: (showOnlyImportantData: boolean) => void;
 };
 
 export const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename }) => {

From 7dcf2e8fb0bd2842b7fb71887f13359426ce3db1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Thu, 2 Oct 2025 14:41:52 +0200
Subject: [PATCH 31/32] Update YamlViewer.tsx

---
 src/components/Yaml/YamlViewer.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/Yaml/YamlViewer.tsx b/src/components/Yaml/YamlViewer.tsx
index 625c8804..f14f5178 100644
--- a/src/components/Yaml/YamlViewer.tsx
+++ b/src/components/Yaml/YamlViewer.tsx
@@ -15,8 +15,6 @@ type YamlViewerProps = {
 export const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename }) => {
   return (
     <div className={styles.container}>
-      {/* Use controlled value with a stable model path to update content without remounting */}
-
       <YamlEditor value={yamlString} path={`${filename}.yaml`} options={{ readOnly: true }} />
     </div>
   );

From 51cf3f041a6371b96765fec19e773040aea6cf8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Goral?= <lukasz.goral@sap.com>
Date: Fri, 3 Oct 2025 09:19:30 +0200
Subject: [PATCH 32/32] Update monaco.ts

---
 src/lib/monaco.ts | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/lib/monaco.ts b/src/lib/monaco.ts
index b823bbb4..e17d5939 100644
--- a/src/lib/monaco.ts
+++ b/src/lib/monaco.ts
@@ -64,15 +64,16 @@ const GITHUB_DARK_EDITOR_COLORS: monaco.editor.IColors = {
 
 export const configureMonaco = () => {
   // Route YAML language to monaco-yaml worker, everything else to the default editor worker
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (self as any).MonacoEnvironment = {
-    getWorker: (_: string, label: string) => {
-      if (label === 'yaml') {
-        return new YamlWorker();
-      }
-      return new EditorWorker();
-    },
-  };
+  if (typeof window !== 'undefined') {
+    window.MonacoEnvironment = {
+      getWorker: (_moduleId: string, label: string): Worker => {
+        if (label === 'yaml') {
+          return new YamlWorker();
+        }
+        return new EditorWorker();
+      },
+    };
+  }
 
   monaco.editor.defineTheme(GITHUB_LIGHT_DEFAULT, {
     base: 'vs',