Feat: code editor + resizable UI

Author: LoicDaval-Amadeus

apps/ui/project.json

@@ -14,7 +14,15 @@
         "main": "apps/ui/src/main.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "apps/ui/tsconfig.app.json",
-        "assets": ["apps/ui/src/favicon.ico", "apps/ui/src/assets"],
+        "assets": [
+          "apps/ui/src/favicon.ico",
+          "apps/ui/src/assets",
+          {
+            "glob": "**/*",
+            "input": "node_modules/monaco-editor/min/vs",
+            "output": "/assets/monaco/vs"
+          }
+        ],
         "styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css", "apps/ui/src/styles.scss"],
         "scripts": []
       },

apps/ui/src/app/playground/playground.component.css

@@ -115,6 +115,102 @@
   background: #777;
 }
 
+.monaco-editor-wrapper {
+  border-radius: 8px;
+  border: 1px solid #404040;
+  overflow: hidden;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.monaco-editor-wrapper.monaco-editor-invalid {
+  border-color: #dc3545;
+  border-width: 3px;
+  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
+}
+
+.monaco-editor-container {
+  overflow: hidden;
+}
+
+.editor-resize-handle {
+  height: 14px;
+  cursor: row-resize;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  transition: background 0.15s;
+  margin-top: 4px;
+}
+
+.editor-resize-handle:hover,
+.editor-resize-handle:active {
+  background: rgba(100, 149, 237, 0.15);
+}
+
+.editor-resize-grip {
+  width: 40px;
+  height: 4px;
+  border-radius: 2px;
+  background: #6c757d;
+  transition: background 0.15s, width 0.15s;
+}
+
+.editor-resize-handle:hover .editor-resize-grip,
+.editor-resize-handle:active .editor-resize-grip {
+  background: #0d6efd;
+  width: 60px;
+}
+
+/* ── Resizable split pane ─────────────────────────────────── */
+
+.split-pane {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  min-height: 0;
+}
+
+.split-pane-left,
+.split-pane-right {
+  overflow: auto;
+  flex-shrink: 0;
+  flex-grow: 0;
+  min-width: 0;
+  padding: 0 12px;
+}
+
+.split-divider {
+  flex: 0 0 8px;
+  cursor: col-resize;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  transition: background 0.15s;
+  z-index: 10;
+  position: relative;
+}
+
+.split-divider:hover,
+.split-divider:active {
+  background: rgba(100, 149, 237, 0.15);
+}
+
+.split-divider-handle {
+  width: 4px;
+  height: 40px;
+  border-radius: 2px;
+  background: #6c757d;
+  transition: background 0.15s, height 0.15s;
+}
+
+.split-divider:hover .split-divider-handle,
+.split-divider:active .split-divider-handle {
+  background: #0d6efd;
+  height: 60px;
+}
+
 .table-bordered th,
 .table-bordered td {
   border: 1px solid #dee2e6;

apps/ui/src/app/playground/playground.component.html

@@ -1,7 +1,7 @@
 <div class="container-fluid p-4">
-  <div class="row">
+  <div class="split-pane">
     <!-- Left side: Configuration -->
-    <div class="col-md-6">
+    <div class="split-pane-left" [style.flex-basis.%]="splitPosition">
       <h2 class="text-xl font-semibold mb-2">Configuration</h2>
       <form [formGroup]="renovateForm" (ngSubmit)="runRenovate()">
         <div class="mb-3">
@@ -16,16 +16,32 @@ <h2 class="text-xl font-semibold mb-2">Configuration</h2>
         </div>
         <div class="mb-3">
           <label for="renovateConfig" class="form-label">Renovate Configuration (JSON)</label>
-          <textarea id="renovateConfig" formControlName="renovateConfig" rows="15" class="form-control"></textarea>
+          <div class="monaco-editor-wrapper"
+               [class.monaco-editor-invalid]="renovateForm.get('renovateConfig')?.errors?.['jsonInvalid']">
+            <div #monacoContainer class="monaco-editor-container"
+                 [style.height.px]="editorHeight"></div>
+          </div>
+          <div class="editor-resize-handle"
+               (mousedown)="onEditorResizeMouseDown($event)">
+            <div class="editor-resize-grip"></div>
+          </div>
+          <input type="hidden" formControlName="renovateConfig">
         </div>
         <button type="submit" [disabled]="isRunning" class="btn btn-primary">
           {{ isRunning ? 'Running...' : 'Run Renovate' }}
         </button>
       </form>
     </div>
 
+    <!-- Draggable divider -->
+    <div class="split-divider"
+         (mousedown)="onDividerMouseDown($event)"
+         (dblclick)="resetSplitPosition()">
+      <div class="split-divider-handle"></div>
+    </div>
+
     <!-- Right side: Logs -->
-    <div class="col-md-6">
+    <div class="split-pane-right" [style.flex-basis.%]="100 - splitPosition">
       <div class="d-flex justify-content-between align-items-center mb-2">
         <h2 class="text-xl font-semibold mb-0">Live Logs</h2>
         <div class="d-flex align-items-center">