Update index.html

index.html

@@ -14,6 +14,12 @@
     <!-- JS-YAML CDN -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js-yaml.min.js"></script>
     
+    <!-- CodeMirror for YAML syntax highlighting -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/material-darker.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/yaml/yaml.min.js"></script>
+    
     <style>
         /* Modern styling with animations and gradients */
         html {
@@ -82,76 +88,110 @@
             background-clip: content-box;
         }
         
-        /* Enhanced Glassmorphism effects */
+        /* Form container bold text */
+        #form-container {
+            font-weight: bold;
+        }
+        
+        /* YAML editor container overflow */
+        #yaml-editor-container {
+            overflow: auto;
+        }
+        
+        /* Glass with lens distortion */
         .glass {
             background: linear-gradient(135deg, 
-                rgba(255, 255, 255, 0.1) 0%, 
-                rgba(255, 255, 255, 0.05) 100%);
-            backdrop-filter: blur(20px) saturate(180%);
-            -webkit-backdrop-filter: blur(20px) saturate(180%);
-            border: 1px solid rgba(255, 255, 255, 0.3);
+                rgba(255, 255, 255, 0.12) 0%, 
+                rgba(255, 255, 255, 0.06) 100%);
+            backdrop-filter: blur(16px) saturate(180%) contrast(120%);
+            -webkit-backdrop-filter: blur(16px) saturate(180%) contrast(120%);
+            border: 1px solid rgba(255, 255, 255, 0.25);
             box-shadow: 
                 0 8px 32px rgba(31, 38, 135, 0.37),
                 inset 0 1px 0 rgba(255, 255, 255, 0.5),
                 inset 0 -1px 0 rgba(255, 255, 255, 0.1);
             position: relative;
             overflow: hidden;
+            filter: contrast(1.1) brightness(1.05);
         }
         
-        .glass::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, 
-                transparent, 
-                rgba(255, 255, 255, 0.1), 
-                transparent);
-            animation: glass-shine 3s infinite;
-            pointer-events: none;
-        }
-        
-        @keyframes glass-shine {
-            0% { left: -100%; }
-            50% { left: 100%; }
-            100% { left: 100%; }
-        }
         
         .glass-dark {
             background: linear-gradient(135deg,
-                rgba(15, 23, 42, 0.7) 0%,
-                rgba(15, 23, 42, 0.5) 100%);
-            backdrop-filter: blur(25px) saturate(200%);
-            -webkit-backdrop-filter: blur(25px) saturate(200%);
-            border: 1px solid rgba(255, 255, 255, 0.2);
+                rgba(15, 23, 42, 0.75) 0%,
+                rgba(15, 23, 42, 0.55) 100%);
+            backdrop-filter: blur(20px) saturate(160%) contrast(110%);
+            -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(110%);
+            border: 1px solid rgba(255, 255, 255, 0.15);
             box-shadow: 
                 0 8px 32px rgba(0, 0, 0, 0.3),
                 inset 0 1px 0 rgba(255, 255, 255, 0.3),
                 inset 0 -1px 0 rgba(255, 255, 255, 0.1);
             position: relative;
             overflow: hidden;
+            filter: contrast(1.08) brightness(1.02);
         }
         
-        .glass-dark::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, 
-                transparent, 
-                rgba(255, 255, 255, 0.05), 
-                transparent);
-            animation: glass-shine 4s infinite;
-            pointer-events: none;
+        /* Lens magnification for cards */
+        .card {
+            box-shadow: 
+                0 20px 60px rgba(31, 38, 135, 0.4),
+                0 10px 30px rgba(31, 38, 135, 0.3),
+                0 5px 15px rgba(31, 38, 135, 0.2);
+            transform: translateZ(0) scale(1);
+            filter: contrast(1.05) saturate(110%);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
         
-        /* Smooth animations */
-        * {
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        .card:hover {
+            transform: translateZ(10px) translateY(-5px) scale(1.03);
+            filter: contrast(1.1) saturate(120%) brightness(1.05);
+            box-shadow: 
+                0 30px 80px rgba(31, 38, 135, 0.5),
+                0 20px 50px rgba(31, 38, 135, 0.4),
+                0 10px 25px rgba(31, 38, 135, 0.3);
+        }
+        
+        /* Lens focus buttons */
+        .btn-primary, .btn-secondary {
+            box-shadow: 
+                0 8px 25px rgba(99, 102, 241, 0.4),
+                0 4px 15px rgba(99, 102, 241, 0.3),
+                0 2px 8px rgba(99, 102, 241, 0.2),
+                inset 0 1px 0 rgba(255, 255, 255, 0.3);
+            transform: translateZ(0) scale(1);
+            filter: contrast(1.1) saturate(120%);
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        .btn-primary:hover, .btn-secondary:hover {
+            transform: translateZ(5px) translateY(-2px) scale(1.05);
+            filter: contrast(1.2) saturate(140%) brightness(1.1);
+            box-shadow: 
+                0 12px 35px rgba(99, 102, 241, 0.5),
+                0 6px 20px rgba(99, 102, 241, 0.4),
+                0 3px 12px rgba(99, 102, 241, 0.3),
+                inset 0 1px 0 rgba(255, 255, 255, 0.4);
+        }
+        
+        /* Lens refraction inputs */
+        .form-input, .form-select {
+            box-shadow: 
+                inset 0 3px 8px rgba(0, 0, 0, 0.1),
+                inset 0 1px 4px rgba(0, 0, 0, 0.08),
+                0 2px 6px rgba(255, 255, 255, 0.1);
+            filter: contrast(1.05) saturate(105%);
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        .form-input:focus, .form-select:focus {
+            box-shadow: 
+                inset 0 3px 8px rgba(0, 0, 0, 0.15),
+                inset 0 1px 4px rgba(0, 0, 0, 0.1),
+                0 4px 12px rgba(99, 102, 241, 0.2),
+                0 0 0 2px rgba(99, 102, 241, 0.3);
+            filter: contrast(1.1) saturate(115%) brightness(1.05);
+            transform: scale(1.01);
         }
         
         /* Glowing effects */
@@ -207,17 +247,134 @@
             position: relative;
         }
         
+        /* Annotation styles */
+        .annotation-container {
+            position: relative;
+        }
+        
+        .annotation-btn {
+            position: absolute;
+            right: 8px;
+            top: 50%;
+            transform: translateY(-50%);
+            z-index: 10;
+            background: rgba(99, 102, 241, 0.2);
+            border: 1px solid rgba(99, 102, 241, 0.4);
+            border-radius: 6px;
+            padding: 4px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        
+        .annotation-btn:hover {
+            background: rgba(99, 102, 241, 0.3);
+            border-color: rgba(99, 102, 241, 0.6);
+        }
+        
+        .annotation-btn.has-annotation {
+            background: rgba(34, 197, 94, 0.2);
+            border-color: rgba(34, 197, 94, 0.4);
+        }
+        
+        .annotation-popup {
+            position: absolute;
+            top: 100%;
+            right: 0;
+            margin-top: 8px;
+            width: 300px;
+            background: linear-gradient(135deg, 
+                rgba(15, 23, 42, 0.95) 0%, 
+                rgba(15, 23, 42, 0.9) 100%);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 12px;
+            padding: 16px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+            z-index: 20;
+            display: none;
+        }
+        
+        .annotation-popup.show {
+            display: block;
+            animation: slideInUp 0.2s ease-out;
+        }
+        
+        .annotation-input {
+            width: 100%;
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            border-radius: 8px;
+            padding: 8px 12px;
+            color: white;
+            font-size: 0.875rem;
+            resize: vertical;
+            min-height: 60px;
+        }
+        
+        .annotation-input:focus {
+            outline: none;
+            border-color: rgba(99, 102, 241, 0.6);
+            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+        }
+        
+        .annotation-actions {
+            display: flex;
+            gap: 8px;
+            margin-top: 12px;
+        }
+        
+        .annotation-save, .annotation-cancel {
+            padding: 6px 12px;
+            border-radius: 6px;
+            font-size: 0.75rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        
+        .annotation-save {
+            background: rgba(34, 197, 94, 0.2);
+            border: 1px solid rgba(34, 197, 94, 0.4);
+            color: rgb(34, 197, 94);
+        }
+        
+        .annotation-save:hover {
+            background: rgba(34, 197, 94, 0.3);
+        }
+        
+        .annotation-cancel {
+            background: rgba(239, 68, 68, 0.2);
+            border: 1px solid rgba(239, 68, 68, 0.4);
+            color: rgb(239, 68, 68);
+        }
+        
+        .annotation-cancel:hover {
+            background: rgba(239, 68, 68, 0.3);
+        }
+        
+        .annotation-display {
+            margin-top: 8px;
+            padding: 8px 12px;
+            background: rgba(34, 197, 94, 0.1);
+            border: 1px solid rgba(34, 197, 94, 0.2);
+            border-radius: 8px;
+            font-size: 0.75rem;
+            color: rgba(255, 255, 255, 0.8);
+            line-height: 1.4;
+        }
+        
         .form-input:focus {
             background: linear-gradient(135deg, 
                 rgba(255, 255, 255, 0.25) 0%, 
                 rgba(255, 255, 255, 0.18) 100%);
-            border-color: rgba(99, 102, 241, 0.9);
+            border-color: rgba(255, 255, 255, 0.6);
             box-shadow: 
-                0 0 0 4px rgba(99, 102, 241, 0.2),
-                0 8px 32px rgba(99, 102, 241, 0.3),
+                0 0 0 2px rgba(255, 255, 255, 0.1),
+                0 4px 16px rgba(31, 38, 135, 0.3),
                 inset 0 1px 0 rgba(255, 255, 255, 0.5);
-            transform: translateY(-2px) scale(1.02);
+            transform: translateY(-1px);
             text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+            outline: none;
         }
         
         /* Enhanced dropdown with better readability */
@@ -241,12 +398,12 @@
             background: linear-gradient(135deg, 
                 rgba(255, 255, 255, 0.25) 0%, 
                 rgba(255, 255, 255, 0.18) 100%);
-            border-color: rgba(99, 102, 241, 0.9);
+            border-color: rgba(255, 255, 255, 0.6);
             box-shadow: 
-                0 0 0 4px rgba(99, 102, 241, 0.2),
-                0 8px 32px rgba(99, 102, 241, 0.3),
+                0 0 0 2px rgba(255, 255, 255, 0.1),
+                0 4px 16px rgba(31, 38, 135, 0.3),
                 inset 0 1px 0 rgba(255, 255, 255, 0.5);
-            transform: translateY(-2px) scale(1.02);
+            transform: translateY(-1px);
             text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
             outline: none;
         }
@@ -310,31 +467,42 @@
             text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
         }
         
-        /* Smooth collapsible animations */
+        /* Simple, fast collapsible */
         .fieldset-content {
-            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
             overflow: hidden;
-            transform-origin: top;
+        }
+        
+        .fieldset-content.expanded {
+            max-height: 500px;
+            overflow-y: auto;
+            display: block;
         }
         
         .fieldset-content.collapsed {
             max-height: 0;
-            opacity: 0;
-            transform: scaleY(0);
-            margin-top: 0;
-            padding-top: 0;
-            padding-bottom: 0;
+            overflow: hidden;
+            display: none;
         }
         
-        .fieldset-content.expanded {
-            max-height: 1000px;
-            opacity: 1;
-            transform: scaleY(1);
+        /* Custom scrollbar for fieldset content */
+        .fieldset-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        .fieldset-content::-webkit-scrollbar-track {
+            background: rgba(148, 163, 184, 0.1);
+            border-radius: 3px;
+        }
+        .fieldset-content::-webkit-scrollbar-thumb {
+            background: linear-gradient(135deg, #6366f1, #8b5cf6);
+            border-radius: 3px;
+        }
+        .fieldset-content::-webkit-scrollbar-thumb:hover {
+            background: linear-gradient(135deg, #4f46e5, #7c3aed);
         }
         
-        /* Arrow rotation animation */
+        /* Arrow rotation - no animation */
         .collapse-arrow {
-            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            /* No transition for instant feedback */
         }
         
         .collapse-arrow.collapsed {
@@ -414,6 +582,121 @@
             margin-top: 0.5rem;
         }
         
+        /* Side Drawer Styles */
+        .drawer-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(4px);
+            z-index: 50;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        
+        .drawer-overlay.open {
+            opacity: 1;
+            visibility: visible;
+        }
+        
+        .drawer {
+            position: fixed;
+            top: 0;
+            right: 0;
+            width: 500px;
+            height: 100%;
+            background: linear-gradient(135deg,
+                rgba(15, 23, 42, 0.95) 0%,
+                rgba(15, 23, 42, 0.9) 100%);
+            backdrop-filter: blur(25px) saturate(200%);
+            border-left: 1px solid rgba(255, 255, 255, 0.2);
+            box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
+            transform: translateX(100%);
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            z-index: 51;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .drawer.open {
+            transform: translateX(0);
+        }
+        
+        .drawer-header {
+            padding: 24px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            flex-shrink: 0;
+        }
+        
+        .drawer-content {
+            flex: 1;
+            overflow-y: auto;
+            padding: 24px;
+        }
+        
+        .drawer-footer {
+            padding: 24px;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+            flex-shrink: 0;
+            display: flex;
+            gap: 12px;
+            justify-content: flex-end;
+        }
+        
+        /* Drawer scrollbar */
+        .drawer-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .drawer-content::-webkit-scrollbar-track {
+            background: rgba(148, 163, 184, 0.1);
+            border-radius: 3px;
+        }
+        
+        .drawer-content::-webkit-scrollbar-thumb {
+            background: linear-gradient(135deg, #6366f1, #8b5cf6);
+            border-radius: 3px;
+        }
+        
+        
+        /* Edit button for complex sections - same style as preset buttons */
+        .edit-button {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: 8px 12px;
+            font-size: 0.75rem;
+            font-weight: 600;
+            color: white;
+            background: linear-gradient(135deg, 
+                rgba(255, 255, 255, 0.1) 0%, 
+                rgba(255, 255, 255, 0.05) 100%);
+            backdrop-filter: blur(10px) saturate(180%);
+            -webkit-backdrop-filter: blur(10px) saturate(180%);
+            box-shadow: 
+                0 4px 16px rgba(31, 38, 135, 0.2),
+                inset 0 1px 0 rgba(255, 255, 255, 0.3);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 12px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        
+        .edit-button:hover {
+            background: linear-gradient(135deg, 
+                rgba(255, 255, 255, 0.15) 0%, 
+                rgba(255, 255, 255, 0.08) 100%);
+            box-shadow: 
+                0 6px 20px rgba(31, 38, 135, 0.3),
+                0 0 0 2px rgba(255, 255, 255, 0.2),
+                inset 0 1px 0 rgba(255, 255, 255, 0.4);
+            transform: translateY(-2px) scale(1.05);
+        }
+        
         /* Animated status indicator */
         .status-indicator {
             position: relative;
@@ -481,48 +764,193 @@
                 rgba(15, 23, 42, 0.4) 100%);
             border-color: rgba(255, 255, 255, 0.3);
         }
+        
+        /* CodeMirror customization for glassmorphism theme */
+        .CodeMirror {
+            background: transparent !important;
+            color: #e2e8f0 !important;
+            font-family: 'JetBrains Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
+            font-size: 14px !important;
+            line-height: 24px !important;
+            height: 100% !important;
+            border: none !important;
+            padding: 32px !important;
+        }
+        
+        .CodeMirror-lines {
+            padding: 0 !important;
+        }
+        
+        .CodeMirror pre {
+            line-height: 24px !important;
+            padding: 0 !important;
+        }
+        
+        .CodeMirror-focused .CodeMirror-selected {
+            background: rgba(99, 102, 241, 0.2) !important;
+        }
+        
+        .CodeMirror-selected {
+            background: rgba(99, 102, 241, 0.1) !important;
+        }
+        
+        .CodeMirror-cursor {
+            border-left: 2px solid #6366f1 !important;
+        }
+        
+        /* Custom line numbers styling */
+        #line-numbers {
+            user-select: none;
+            line-height: 24px;
+            pointer-events: auto; /* Allow clicking fold arrows */
+        }
+        
+        #line-numbers .line-num {
+            padding-right: 8px;
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.4);
+            pointer-events: none; /* Prevent selection on numbers */
+        }
+        
+        
+        .CodeMirror-activeline-background {
+            background: rgba(255, 255, 255, 0.05) !important;
+        }
+        
+        /* YAML syntax highlighting colors for dark glassmorphism theme */
+        .cm-property {
+            color: #60a5fa !important; /* Blue for properties */
+        }
+        
+        .cm-string {
+            color: #34d399 !important; /* Green for strings */
+        }
+        
+        .cm-number {
+            color: #fbbf24 !important; /* Yellow for numbers */
+        }
+        
+        .cm-comment {
+            color: rgba(255, 255, 255, 0.5) !important; /* Muted for comments */
+            font-style: italic;
+        }
+        
+        .cm-atom {
+            color: #f472b6 !important; /* Pink for booleans/null */
+        }
+        
+        
+        /* Folded code indicator */
+        .CodeMirror-foldmarker {
+            background: rgba(99, 102, 241, 0.2);
+            border: 1px solid rgba(99, 102, 241, 0.4);
+            color: rgba(255, 255, 255, 0.8);
+            border-radius: 4px;
+            padding: 0 4px;
+            margin: 0 2px;
+            font-size: 11px;
+            cursor: pointer;
+        }
+        
+        .CodeMirror-foldmarker:hover {
+            background: rgba(99, 102, 241, 0.3);
+        }
+        
+        /* Style for inline fold arrows */
+        .cm-fold-arrow {
+            color: rgba(99, 102, 241, 0.8) !important;
+            cursor: pointer !important;
+            padding: 2px !important;
+            border-radius: 2px !important;
+            background: rgba(99, 102, 241, 0.1) !important;
+            margin-left: 4px !important;
+        }
+        
+        .cm-fold-arrow:hover {
+            background: rgba(99, 102, 241, 0.2) !important;
+            transform: scale(1.1) !important;
+        }
+        
+        /* Hover cursor for lines with arrows */
+        .CodeMirror-line:has-text("▼"),
+        .CodeMirror-line:has-text("▶") {
+            cursor: pointer;
+        }
+        
+        .cm-keyword {
+            color: #a78bfa !important; /* Purple for keywords */
+        }
+        
+        .cm-variable {
+            color: #e2e8f0 !important; /* Light gray for variables */
+        }
+        
+        .cm-def {
+            color: #60a5fa !important; /* Blue for definitions */
+        }
+        
+        .cm-bracket {
+            color: rgba(255, 255, 255, 0.8) !important; /* Light for brackets */
+        }
+        
+        .cm-tag {
+            color: #f87171 !important; /* Red for tags */
+        }
+        
+        .cm-link {
+            color: #60a5fa !important; /* Blue for links */
+        }
+        
+        .cm-error {
+            background: rgba(239, 68, 68, 0.2) !important;
+            color: #fca5a5 !important;
+        }
+        
+        /* Scrollbar for CodeMirror */
+        .CodeMirror-scrollbar-filler {
+            background: transparent !important;
+        }
+        
+        .CodeMirror-vscrollbar::-webkit-scrollbar {
+            width: 8px;
+        }
+        
+        .CodeMirror-vscrollbar::-webkit-scrollbar-track {
+            background: rgba(148, 163, 184, 0.1);
+            border-radius: 4px;
+        }
+        
+        .CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
+            background: linear-gradient(135deg, #6366f1, #8b5cf6);
+            border-radius: 4px;
+        }
+        
+        .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover {
+            background: linear-gradient(135deg, #4f46e5, #7c3aed);
+        }
+        
+        .CodeMirror-hscrollbar::-webkit-scrollbar {
+            height: 8px;
+        }
+        
+        .CodeMirror-hscrollbar::-webkit-scrollbar-track {
+            background: rgba(148, 163, 184, 0.1);
+            border-radius: 4px;
+        }
+        
+        .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
+            background: linear-gradient(135deg, #6366f1, #8b5cf6);
+            border-radius: 4px;
+        }
+        
+        .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
+            background: linear-gradient(135deg, #4f46e5, #7c3aed);
+        }
     </style>
 </head>
 <body class="h-full antialiased">
 
     <div id="app" class="flex flex-col h-full">
-        <!-- Header Section -->
-        <header class="glass sticky top-0 z-20 border-b border-white/20">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="flex items-center justify-between h-20">
-                    <div class="flex items-center space-x-4">
-                        <div class="relative">
-                            <svg class="h-10 w-10 text-white drop-shadow-lg float" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3V6a3 3 0 013-3h13.5a3 3 0 013 3v5.25a3 3 0 01-3 3m-13.5 0V9a1.5 1.5 0 011.5-1.5h13.5A1.5 1.5 0 0121 9v5.25m0 0H8.25a2.25 2.25 0 00-2.25 2.25V18a3 3 0 003 3h6a3 3 0 003-3v-1.5a2.25 2.25 0 00-2.25-2.25H12" />
-                            </svg>
-                            <div class="absolute -top-1 -right-1 w-4 h-4 bg-gradient-to-r from-pink-500 to-violet-500 rounded-full animate-pulse"></div>
-                        </div>
-                        <div>
-                            <h1 class="text-2xl font-bold text-white drop-shadow-lg gradient-text">dstack</h1>
-                            <p class="text-sm text-white/80 font-medium">Configuration Editor</p>
-                        </div>
-                    </div>
-                    <div class="flex items-center space-x-3">
-                        <div class="relative">
-                            <select id="templateSelector" class="form-select px-4 py-2.5 pr-10 text-sm font-semibold rounded-xl transition-all cursor-pointer appearance-none">
-                                <option value="">Select Template</option>
-                                <option value="task">Task</option>
-                                <option value="service">Service</option>
-                                <option value="dev-environment">Dev Environment</option>
-                            </select>
-                            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                                <svg class="h-5 w-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-                                </svg>
-                            </div>
-                        </div>
-                        <button id="clearBtn" class="btn-primary px-6 py-2.5 text-sm font-semibold text-white rounded-xl transition-all">
-                            Clear All
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </header>
 
         <!-- Preset Configuration Buttons -->
         <section class="border-b border-white/10 bg-gradient-to-r from-white/5 to-white/2 backdrop-blur-sm">
@@ -534,10 +962,10 @@
                     <h3 class="text-sm font-semibold text-white/80" style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);">Quick Start Templates</h3>
                 </div>
                 <div class="flex flex-wrap gap-3">
-                    <button id="preset-llm-training" class="preset-btn glass-preset px-4 py-2.5 text-sm font-medium text-white rounded-xl transition-all hover:scale-105 border border-white/20">
+                    <button id="preset-open-r1" class="preset-btn glass-preset px-4 py-2.5 text-sm font-medium text-white rounded-xl transition-all hover:scale-105 border border-white/20">
                         <div class="flex items-center space-x-2">
-                            <span class="text-lg">🤖</span>
-                            <span>LLM Training</span>
+                            <span class="text-lg">🧠</span>
+                            <span>Open-R1</span>
                         </div>
                     </button>
                     <button id="preset-model-serving" class="preset-btn glass-preset px-4 py-2.5 text-sm font-medium text-white rounded-xl transition-all hover:scale-105 border border-white/20">
@@ -621,27 +1049,407 @@
                     <!-- Error/Success indicator -->
                     <div id="status-indicator" class="status-indicator px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-full transition-all border border-white/20">&nbsp;</div>
                 </div>
-                <div class="flex-grow relative">
-                    <textarea id="yaml-editor" class="w-full h-full p-8 bg-transparent text-slate-100 font-mono text-sm leading-7 resize-none focus:outline-none absolute inset-0 placeholder-slate-400" placeholder="# dstack configuration
-type: task
-name: my-awesome-task
-python: '3.11'
-commands:
-  - pip install requirements.txt
-  - python main.py"></textarea>
+                <div class="flex-grow relative flex">
+                    <div id="line-numbers" class="flex-shrink-0 w-12 bg-slate-900/30 border-r border-white/10 text-right text-xs text-white/40 font-mono leading-6 pt-8 pr-2 overflow-hidden"></div>
+                    <div id="yaml-editor-container" class="flex-grow h-full"></div>
                 </div>
             </div>
         </main>
     </div>
 
+    <!-- Side Drawer -->
+    <div id="drawer-overlay" class="drawer-overlay" onclick="closeDrawer()"></div>
+    <div id="drawer" class="drawer">
+        <div class="drawer-header">
+            <div class="flex items-center justify-between">
+                <h2 id="drawer-title" class="text-xl font-bold text-white">Edit Section</h2>
+                <button onclick="closeDrawer()" class="p-2 text-white/60 hover:text-white hover:bg-white/10 rounded-lg transition-all">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                    </svg>
+                </button>
+            </div>
+            <p class="text-sm text-white/70 mt-2">Configure this section in detail</p>
+        </div>
+        
+        <div id="drawer-content" class="drawer-content">
+            <!-- Dynamic content will be rendered here -->
+        </div>
+        
+        <div class="drawer-footer">
+            <button onclick="closeDrawer()" class="px-4 py-2 text-sm font-semibold text-white/80 bg-white/10 border border-white/20 rounded-lg hover:bg-white/20 transition-all">
+                Cancel
+            </button>
+            <button onclick="saveDrawer()" class="px-6 py-2 text-sm font-semibold text-white bg-gradient-to-r from-green-500 to-emerald-500 rounded-lg hover:from-green-600 hover:to-emerald-600 transition-all">
+                Save Changes
+            </button>
+        </div>
+    </div>
+
     <script>
         document.addEventListener('DOMContentLoaded', () => {
             // --- DOM Element References ---
             const formContainer = document.getElementById('form-container');
-            const yamlEditor = document.getElementById('yaml-editor');
+            const yamlEditorContainer = document.getElementById('yaml-editor-container');
             const statusIndicator = document.getElementById('status-indicator');
-            const templateSelector = document.getElementById('templateSelector');
-            const clearBtn = document.getElementById('clearBtn');
+            
+            // --- Initialize CodeMirror ---
+            const lineNumbersDiv = document.getElementById('line-numbers');
+            const yamlEditor = CodeMirror(yamlEditorContainer, {
+                mode: 'yaml',
+                theme: 'material-darker',
+                lineNumbers: false, // Disable built-in line numbers
+                lineWrapping: true,
+                indentUnit: 2,
+                tabSize: 2,
+                autoCloseBrackets: true,
+                matchBrackets: true,
+                showCursorWhenSelecting: true,
+                styleActiveLine: true,
+                readOnly: false, // Make sure editor is editable
+                value: '',
+                placeholder: '# dstack configuration\ntype: task\nname: my-awesome-task\npython: "3.11"\ncommands:\n  - pip install requirements.txt\n  - python main.py',
+                extraKeys: {
+                    "Enter": function(cm) {
+                        // Check if current line has an arrow
+                        const cursor = cm.getCursor();
+                        const line = cm.getLine(cursor.line);
+                        
+                        if (line && (line.includes(' ▼') || line.includes(' ▶'))) {
+                            // Toggle section instead of adding new line
+                            const cleanLine = line.replace(/ [▼▶]/g, '').trim();
+                            const sectionKey = cleanLine.replace(':', '');
+                            
+                            if (collapsedSections.has(sectionKey)) {
+                                collapsedSections.delete(sectionKey);
+                            } else {
+                                collapsedSections.add(sectionKey);
+                            }
+                            
+                            displayCollapsedYaml();
+                            return false; // Prevent default behavior
+                        }
+                        
+                        return CodeMirror.Pass; // Allow normal Enter behavior
+                    }
+                }
+            });
+            
+            // Simple collapsing state
+            let collapsedSections = new Set();
+            let isUpdatingDisplay = false;
+            let originalContent = '';
+            let originalSections = [];
+            
+            // Get collapsible YAML sections
+            const getCollapsibleSections = () => {
+                const content = yamlEditor.getValue();
+                const lines = content.split('\n');
+                const sections = [];
+                
+                for (let i = 0; i < lines.length; i++) {
+                    const line = lines[i];
+                    const trimmed = line.trim();
+                    
+                    // Check if this is a YAML key that can be collapsed
+                    if (trimmed.endsWith(':') && !trimmed.startsWith('-') && !trimmed.startsWith('#')) {
+                        const currentIndent = line.length - line.trimStart().length;
+                        const childLines = [];
+                        
+                        // Find child lines
+                        for (let j = i + 1; j < lines.length; j++) {
+                            const nextLine = lines[j];
+                            if (!nextLine || nextLine.trim() === '') continue;
+                            
+                            const nextIndent = nextLine.length - nextLine.trimStart().length;
+                            if (nextIndent > currentIndent) {
+                                childLines.push(j);
+                            } else {
+                                break;
+                            }
+                        }
+                        
+                        if (childLines.length > 0) {
+                            sections.push({
+                                headerLine: i,
+                                childLines: childLines,
+                                key: trimmed.replace(':', '')
+                            });
+                        }
+                    }
+                }
+                return sections;
+            };
+            
+            // Add arrows to YAML content without modifying the original
+            const addArrowsToContent = () => {
+                if (isUpdatingDisplay) return;
+                isUpdatingDisplay = true;
+                
+                const content = yamlEditor.getValue();
+                console.log('Current content:', content);
+                
+                if (content.includes(' ▼') || content.includes(' ▶')) {
+                    console.log('Already has arrows, skipping');
+                    isUpdatingDisplay = false;
+                    return; // Already has arrows
+                }
+                
+                // Store original content and sections for later use
+                originalContent = content;
+                originalSections = getCollapsibleSections();
+                console.log('Stored original content and sections:', originalSections.length);
+                
+                const lines = content.split('\n');
+                const sections = originalSections;
+                
+                console.log('Found sections:', sections);
+                
+                sections.forEach(section => {
+                    const isCollapsed = collapsedSections.has(section.key);
+                    const arrow = isCollapsed ? ' ▶' : ' ▼';
+                    console.log(`Adding ${arrow} to line ${section.headerLine}: "${lines[section.headerLine]}"`);
+                    lines[section.headerLine] += arrow;
+                });
+                
+                const newContent = lines.join('\n');
+                console.log('New content with arrows:', newContent);
+                
+                if (newContent !== content) {
+                    // Temporarily disable change events
+                    yamlEditor.off('change');
+                    yamlEditor.setValue(newContent);
+                    
+                    // Re-enable change events
+                    setTimeout(() => {
+                        yamlEditor.on('change', () => {
+                            if (!isUpdatingDisplay) {
+                                updateFormFromYaml();
+                                setTimeout(() => {
+                                    addArrowsToContent();
+                                }, 200);
+                            }
+                        });
+                        isUpdatingDisplay = false;
+                    }, 50);
+                } else {
+                    isUpdatingDisplay = false;
+                }
+                
+                // Update line numbers
+                const lineCount = yamlEditor.lineCount();
+                let lineNumbersHTML = '';
+                for (let i = 1; i <= lineCount; i++) {
+                    lineNumbersHTML += `<div class="line-num" style="height: 24px;">${i}</div>`;
+                }
+                lineNumbersDiv.innerHTML = lineNumbersHTML;
+            };
+            
+            // Toggle collapse and update arrows
+            const toggleSection = (sectionKey) => {
+                console.log('Toggling section:', sectionKey);
+                
+                if (collapsedSections.has(sectionKey)) {
+                    collapsedSections.delete(sectionKey);
+                } else {
+                    collapsedSections.add(sectionKey);
+                }
+                
+                // Update the display with collapsed content
+                updateCollapsedDisplay();
+            };
+            
+            // Update display with collapsed content
+            const updateCollapsedDisplay = () => {
+                if (isUpdatingDisplay) return;
+                isUpdatingDisplay = true;
+                
+                console.log('=== UPDATE COLLAPSED DISPLAY ===');
+                // Use original content for expansion, current content for initial parsing
+                const content = originalContent || yamlEditor.getValue();
+                const lines = content.split('\n');
+                const sections = originalSections.length > 0 ? originalSections : getCollapsibleSections();
+                const displayLines = [];
+                
+                console.log('Current collapsed sections:', Array.from(collapsedSections));
+                console.log('Available sections:', sections.map(s => s.key));
+                console.log('Using original content:', !!originalContent);
+                
+                for (let i = 0; i < lines.length; i++) {
+                    const section = sections.find(s => s.headerLine === i);
+                    
+                    if (section) {
+                        // This is a collapsible section header
+                        const isCollapsed = collapsedSections.has(section.key);
+                        const arrow = isCollapsed ? ' ▶' : ' ▼';
+                        
+                        console.log(`Section ${section.key} at line ${i}: isCollapsed=${isCollapsed}, childLines=${JSON.stringify(section.childLines)}`);
+                        
+                        // Always show the header with appropriate arrow
+                        const cleanLine = lines[i].replace(/ [▼▶]/g, '');
+                        displayLines.push(cleanLine + arrow);
+                        
+                        // Add child lines only if not collapsed
+                        if (!isCollapsed) {
+                            console.log(`Adding child lines for ${section.key}:`, section.childLines);
+                            section.childLines.forEach(childLineIndex => {
+                                if (lines[childLineIndex]) {
+                                    console.log(`  Adding child line ${childLineIndex}: ${lines[childLineIndex]}`);
+                                    displayLines.push(lines[childLineIndex]);
+                                }
+                            });
+                        } else {
+                            console.log(`Skipping child lines for collapsed section ${section.key}`);
+                        }
+                        
+                        // Skip the child lines in the main loop
+                        i = section.childLines.length > 0 ? Math.max(...section.childLines) : i;
+                    } else {
+                        // Regular line - check if it's a child of a collapsed section
+                        const parentSection = sections.find(s => s.childLines.includes(i));
+                        if (!parentSection || !collapsedSections.has(parentSection.key)) {
+                            displayLines.push(lines[i]);
+                        }
+                    }
+                }
+                
+                const newContent = displayLines.join('\n');
+                const cursor = yamlEditor.getCursor();
+                
+                console.log('Final display lines:', displayLines);
+                console.log('New content length:', newContent.length);
+                
+                // Prevent triggering change events during update
+                yamlEditor.off('change');
+                yamlEditor.setValue(newContent);
+                yamlEditor.setCursor(Math.min(cursor.line, displayLines.length - 1), cursor.ch);
+                
+                // Re-enable change events
+                setTimeout(() => {
+                    yamlEditor.on('change', () => {
+                        if (!isUpdatingDisplay) {
+                            updateFormFromYaml();
+                            setTimeout(() => {
+                                addArrowsToContent();
+                            }, 200);
+                        }
+                    });
+                    isUpdatingDisplay = false;
+                }, 50);
+                
+                // Update line numbers
+                const lineCount = displayLines.length;
+                let lineNumbersHTML = '';
+                for (let i = 1; i <= lineCount; i++) {
+                    lineNumbersHTML += `<div class="line-num" style="height: 24px;">${i}</div>`;
+                }
+                lineNumbersDiv.innerHTML = lineNumbersHTML;
+            };
+            
+            // Use DOM-based click detection instead of CodeMirror coordinates
+            yamlEditorContainer.addEventListener('click', (event) => {
+                console.log('=== DOM CLICK DEBUG ===');
+                
+                // Find which line element was clicked
+                const target = event.target;
+                const lineElement = target.closest('.CodeMirror-line');
+                
+                if (lineElement) {
+                    // Get the text content of the clicked line
+                    const lineText = lineElement.textContent || lineElement.innerText;
+                    console.log('Clicked line text:', JSON.stringify(lineText));
+                    console.log('Has ▼?', lineText.includes('▼'));
+                    console.log('Has ▶?', lineText.includes('▶'));
+                    
+                    if (lineText.includes('▼') || lineText.includes('▶')) {
+                        console.log('Arrow detected in clicked line!');
+                        event.preventDefault();
+                        event.stopPropagation();
+                        
+                        // Extract section key from the line text
+                        const cleanLine = lineText.replace(/[▼▶]/g, '').trim();
+                        const sectionKey = cleanLine.replace(':', '');
+                        
+                        console.log('Raw line text:', JSON.stringify(lineText));
+                        console.log('Clean line:', JSON.stringify(cleanLine));
+                        console.log('Section key:', JSON.stringify(sectionKey));
+                        console.log('Current collapsed sections before toggle:', Array.from(collapsedSections));
+                        
+                        toggleSection(sectionKey);
+                        
+                        console.log('Current collapsed sections after toggle:', Array.from(collapsedSections));
+                        return false;
+                    } else {
+                        console.log('No arrow in clicked line');
+                    }
+                } else {
+                    console.log('Could not find line element');
+                }
+            });
+            
+            // Keep the CodeMirror handler as backup
+            yamlEditor.on('mousedown', (cm, event) => {
+                // This is now just for debugging
+                const pos = cm.coordsChar({left: event.clientX, top: event.clientY});
+                console.log('CodeMirror detected click on line:', pos.line, 'Content:', cm.getLine(pos.line));
+            });
+            
+            // Handle cursor change on hover
+            yamlEditor.on('mousemove', (cm, event) => {
+                const pos = cm.coordsChar({left: event.clientX, top: event.clientY});
+                const line = cm.getLine(pos.line);
+                
+                if (line && (line.includes(' ▼') || line.includes(' ▶'))) {
+                    yamlEditorContainer.style.cursor = 'pointer';
+                } else {
+                    yamlEditorContainer.style.cursor = 'text';
+                }
+            });
+            
+            // Auto-collapse all sections by default
+            const autoCollapseAll = () => {
+                const sections = getCollapsibleSections();
+                sections.forEach(section => {
+                    collapsedSections.add(section.key);
+                });
+                updateCollapsedDisplay();
+            };
+            
+            
+            // Sync scrolling between line numbers and editor
+            yamlEditor.on('scroll', () => {
+                const scrollInfo = yamlEditor.getScrollInfo();
+                lineNumbersDiv.scrollTop = scrollInfo.top;
+            });
+            
+            // Update display when content changes
+            yamlEditor.on('change', () => {
+                if (!isUpdatingDisplay) {
+                    updateFormFromYaml();
+                    // Add arrows after changes (but not too frequently)
+                    setTimeout(() => {
+                        addArrowsToContent();
+                    }, 200);
+                }
+            });
+            
+            // Initial display - don't add arrows yet, wait for template to load
+            console.log('Waiting for template to load before adding arrows...');
+            
+            // Also add a global function to test manually
+            window.testArrows = () => {
+                console.log('Manual arrow test...');
+                addArrowsToContent();
+            };
+            
+            // Add a simple test function to directly toggle sections
+            window.testToggle = (sectionKey) => {
+                console.log('=== MANUAL TOGGLE TEST ===');
+                console.log('Toggling section:', sectionKey);
+                console.log('Before:', Array.from(collapsedSections));
+                toggleSection(sectionKey);
+                console.log('After:', Array.from(collapsedSections));
+            };
 
             // --- dstack Templates ---
             const dstackTemplates = {
@@ -702,15 +1510,71 @@ env:
             // --- Preset Button Event Handlers ---
             const loadPresetConfig = (presetType) => {
                 if (presetConfigs[presetType]) {
-                    if (yamlEditor.value.trim() === '' || confirm('This will replace the current content. Are you sure?')) {
-                        yamlEditor.value = presetConfigs[presetType];
+                    if (yamlEditor.getValue().trim() === '' || confirm('This will replace the current content. Are you sure?')) {
+                        yamlEditor.setValue(presetConfigs[presetType]);
                         updateFormFromYaml();
+                        // Auto-fold after preset load
+                        setTimeout(autoFoldAll, 150);
                     }
                 }
             };
 
             // --- Mock Preset Configurations ---
             const presetConfigs = {
+                'open-r1': `type: task
+name: open-r1
+python: "3.11"
+env:
+  - HF_TOKEN
+  - HUGGINGFACE_TOKEN
+  - WANDB_API_KEY
+  - E2B_API_KEY
+  - TARGET_BASE_MODEL
+  - TARGET_YAML
+  - TARGET_REWARD
+commands:
+  - apt-get update && apt-get install -y wget gnupg
+  - wget https://developer.download.nvidia.com/compute/cuda/repos/ubuntu2004/x86_64/cuda-keyring_1.1-1_all.deb
+  - dpkg -i cuda-keyring_1.1-1_all.deb
+  - rm -f /etc/apt/sources.list.d/cuda*.list
+  - wget https://developer.download.nvidia.com/compute/cuda/repos/ubuntu2004/x86_64/cuda-ubuntu2004.pin
+  - mv cuda-ubuntu2004.pin /etc/apt/preferences.d/cuda-repository-pin-600
+  - wget https://developer.download.nvidia.com/compute/cuda/12.4.0/local_installers/cuda-repo-ubuntu2004-12-4-local_12.4.0-550.54.14-1_amd64.deb
+  - dpkg -i cuda-repo-ubuntu2004-12-4-local_12.4.0-550.54.14-1_amd64.deb
+  - cp /var/cuda-repo-ubuntu2004-12-4-local/cuda-*-keyring.gpg /usr/share/keyrings/
+  - apt-get update
+  - apt-get install -y cuda-toolkit-12-4
+  - echo 'export PATH=/usr/local/cuda-12.4/bin:$PATH' >> ~/.bashrc
+  - echo 'export LD_LIBRARY_PATH=/usr/local/cuda-12.4/lib64:$LD_LIBRARY_PATH' >> ~/.bashrc
+  - source ~/.bashrc
+  - nvcc --version
+  - curl -LsSf https://astral.sh/uv/install.sh | sh
+  - source ~/.bashrc
+  - uv venv openr1 --python 3.11 && source openr1/bin/activate && uv pip install --upgrade pip
+  - uv pip install vllm==0.8.4
+  - uv pip install setuptools && uv pip install flash-attn --no-build-isolation
+  - git clone https://github.com/deep-diver/open-r1.git
+  - cp $TARGET_YAML open-r1/recipes/custom.yaml
+  - cat open-r1/recipes/custom.yaml
+  - cp $TARGET_REWARD open-r1/src/open_r1/code_rewards.py
+  - cat open-r1/src/open_r1/code_rewards.py
+  - cd open-r1
+  - echo "E2B_API_KEY=$E2B_API_KEY" >> ".env"
+  - cat .env
+  - GIT_LFS_SKIP_SMUDGE=1 uv pip install -e ".[dev]"
+  - git clone https://github.com/deep-diver/trl.git
+  - cd trl
+  - uv pip install .
+  - nohup bash -c 'CUDA_VISIBLE_DEVICES=0 trl vllm-serve --model "$TARGET_BASE_MODEL"' > vllm.log 2>&1 &
+  - sleep 420
+  - cd ..
+  - CUDA_VISIBLE_DEVICES=1,2,3,4,5,6,7 ACCELERATE_LOG_LEVEL=info accelerate launch --config_file recipes/accelerate_configs/zero2.yaml --num_processes=7 src/open_r1/grpo.py --config recipes/custom.yaml
+  - pkill -f 'trl vllm-serve'
+resources:
+  gpu: 80GB:8
+  disk: 600GB
+  shm_size: 2GB`,
+
                 'llm-training': `type: task
 name: llm-training
 python: "3.11"
@@ -1011,10 +1875,14 @@ env:
                     else if (key === 'image') placeholder = 'ghcr.io/huggingface/transformers';
                     else if (key === 'value') placeholder = 'Enter value...';
                     
+                    // Calculate rows based on content
+                    const lines = value.toString().split('\n').length;
+                    const rows = Math.max(1, lines);
+                    
                     inputHtml = `
                         <div class="relative">
-                            <input type="text" data-path="${path}" id="${id}" value="${value}" class="${inputClasses} pl-12" placeholder="${placeholder}">
-                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-white/60">
+                            <textarea data-path="${path}" id="${id}" class="${inputClasses} pl-12 min-h-[2.5rem] resize-y auto-resize" placeholder="${placeholder}" rows="${rows}">${value}</textarea>
+                            <div class="absolute top-3 left-0 pl-3 flex items-center pointer-events-none text-white/60">
                                 ${fieldIcon}
                             </div>
                         </div>`;
@@ -1106,27 +1974,59 @@ env:
                     Object.entries(data).forEach(([key, value]) => {
                         const currentPath = parentPath ? `${parentPath}.${key}` : key;
                         if (typeof value === 'object' && value !== null) {
-                            const fieldset = document.createElement('fieldset');
-                            fieldset.className = "glass border border-white/30 rounded-xl p-4 mb-4 group hover:glow transition-all duration-500 fieldset-enter";
-                            const summaryText = generateSummary(value, currentPath);
-                            fieldset.innerHTML = `
-                                <legend class="text-sm font-bold px-3 py-1.5 text-white bg-gradient-to-r from-blue-500/90 to-cyan-500/90 rounded-lg shadow-lg backdrop-blur-md border border-white/30 capitalize cursor-pointer hover:from-blue-500 hover:to-cyan-500 transition-all" style="text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);" onclick="toggleFieldset(this)">
-                                    <div class="flex items-center justify-between w-full">
-                                        <div class="flex items-center space-x-2">
-                                            <span>${key.replace(/_/g, ' ')}</span>
-                                            <svg class="w-4 h-4 collapse-arrow expanded" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                                <path d="M19 9l-7 7-7-7"></path>
+                            // Check if this is a complex section that should use drawer editing
+                            const complexSections = ['commands', 'env', 'resources', 'model', 'rate_limits', 'ports'];
+                            const isComplexSection = complexSections.includes(key.toLowerCase());
+                            
+                            if (isComplexSection) {
+                                // Create simple summary with edit button
+                                const summaryContainer = document.createElement('div');
+                                summaryContainer.className = "mb-4 group";
+                                const summaryText = generateSummary(value, currentPath);
+                                summaryContainer.innerHTML = `
+                                    <div class="flex items-center justify-between mb-2">
+                                        <label class="flex items-center space-x-2 text-sm font-bold text-white capitalize">
+                                            <div class="text-white/80" style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);">
+                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                                                </svg>
+                                            </div>
+                                            <span style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); font-weight: 600;">${key.replace(/_/g, ' ')}</span>
+                                        </label>
+                                        <button class="edit-button" onclick="openDrawer('${currentPath}', '${key}')">
+                                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
                                             </svg>
+                                            Edit
+                                        </button>
+                                    </div>
+                                    <div class="glass border border-white/30 rounded-xl p-4">
+                                        <div class="text-sm text-white/70" style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);">
+                                            ${summaryText || 'Click Edit to configure'}
                                         </div>
                                     </div>
-                                    <div class="summary-preview" style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);">${summaryText}</div>
-                                </legend>
-                                <div class="fieldset-content expanded mt-3">
-                                </div>
-                            `;
-                            const contentDiv = fieldset.querySelector('.fieldset-content');
-                            renderForm(value, contentDiv, currentPath);
-                            parentElement.appendChild(fieldset);
+                                `;
+                                parentElement.appendChild(summaryContainer);
+                            } else {
+                                // Regular collapsible section for simple objects
+                                const groupContainer = document.createElement('div');
+                                groupContainer.className = "mb-4 group";
+                                const summaryText = generateSummary(value, currentPath);
+                                groupContainer.innerHTML = `
+                                    <div class="flex items-center space-x-2 text-sm font-bold text-white capitalize mb-2 group-hover:text-white transition-colors cursor-pointer" onclick="toggleFieldset(this)" style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); font-weight: 600;">
+                                        <svg class="w-4 h-4 collapse-arrow expanded" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                            <path d="M19 9l-7 7-7-7"></path>
+                                        </svg>
+                                        <span>${key.replace(/_/g, ' ')}</span>
+                                    </div>
+                                    <div class="summary-preview" style="display: none; font-size: 0.75rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 0.5rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);">${summaryText}</div>
+                                    <div class="fieldset-content expanded glass border border-white/30 rounded-xl p-4">
+                                    </div>
+                                `;
+                                const contentDiv = groupContainer.querySelector('.fieldset-content');
+                                renderForm(value, contentDiv, currentPath);
+                                parentElement.appendChild(groupContainer);
+                            }
                         } else {
                             parentElement.innerHTML += createInputField(key, value, currentPath);
                         }
@@ -1140,10 +2040,14 @@ env:
                 isUpdating = true;
                 try {
                     const yamlString = jsyaml.dump(currentData, { indent: 2 });
-                    yamlEditor.value = yamlString;
+                    yamlEditor.setValue(yamlString);
+                    // Auto-collapse sections after setting content
+                    setTimeout(() => {
+                        autoCollapseAll();
+                    }, 50);
                     statusIndicator.textContent = 'Synced';
                     statusIndicator.className = 'status-indicator px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-full transition-all border border-white/20 bg-gradient-to-r from-green-500/20 to-emerald-500/20 text-green-300';
-                    yamlEditor.classList.remove('border-red-500');
+                    yamlEditorContainer.classList.remove('border-red-500');
                 } catch (e) {
                     console.error("Error dumping YAML:", e);
                 }
@@ -1154,14 +2058,14 @@ env:
                 if (isUpdating) return;
                 isUpdating = true;
                 try {
-                    const newData = jsyaml.load(yamlEditor.value);
+                    const newData = jsyaml.load(yamlEditor.getValue());
                     if (JSON.stringify(newData) !== JSON.stringify(currentData)) {
                        currentData = newData || {};
                        formContainer.innerHTML = ''; // Clear previous form
                        
                        // Hide/show empty state based on content
                        const emptyState = document.getElementById('empty-state');
-                       if (Object.keys(currentData).length === 0 || yamlEditor.value.trim() === '') {
+                       if (Object.keys(currentData).length === 0 || yamlEditor.getValue().trim() === '') {
                            emptyState.style.display = 'flex';
                            formContainer.style.display = 'none';
                        } else {
@@ -1172,11 +2076,11 @@ env:
                     }
                     statusIndicator.textContent = 'Valid';
                     statusIndicator.className = 'status-indicator px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-full transition-all border border-white/20 bg-gradient-to-r from-green-500/20 to-emerald-500/20 text-green-300';
-                    yamlEditor.classList.remove('border-red-500');
+                    yamlEditorContainer.classList.remove('border-red-500');
                 } catch (e) {
                     statusIndicator.textContent = 'Error';
                     statusIndicator.className = 'status-indicator px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-full transition-all border border-white/20 bg-gradient-to-r from-red-500/20 to-pink-500/20 text-red-300';
-                    yamlEditor.classList.add('border-red-500');
+                    yamlEditorContainer.classList.add('border-red-500');
                     console.warn("Invalid YAML:", e.message);
                 }
                 setTimeout(() => { isUpdating = false; }, 50);
@@ -1188,7 +2092,7 @@ env:
             };
 
             // --- Event Listeners ---
-            yamlEditor.addEventListener('input', updateFormFromYaml);
+            // Change event is now handled in the CodeMirror initialization above
 
             formContainer.addEventListener('input', (e) => {
                 if (e.target.dataset.path) {
@@ -1237,111 +2141,250 @@ env:
                 }
             });
 
-            templateSelector.addEventListener('change', (e) => {
-                if (e.target.value && dstackTemplates[e.target.value]) {
-                    if (yamlEditor.value.trim() === '' || confirm('This will replace the current content. Are you sure?')) {
-                        yamlEditor.value = dstackTemplates[e.target.value];
-                        updateFormFromYaml();
-                    }
-                    e.target.value = ''; // Reset selector
-                }
-            });
-            
-            clearBtn.addEventListener('click', () => {
-                 if (confirm('Are you sure you want to clear everything?')) {
-                    yamlEditor.value = '';
-                    updateFormFromYaml();
-                }
-            });
 
-            // --- Generate Summary for Collapsed Sections ---
             const generateSummary = (data, path) => {
                 if (Array.isArray(data)) {
                     if (data.length === 0) return "Empty";
-                    
-                    // Handle different array types
-                    if (path.includes('commands')) {
-                        return `${data.length} command${data.length > 1 ? 's' : ''}: ${data.slice(0, 2).join(', ')}${data.length > 2 ? '...' : ''}`;
-                    } else if (path.includes('env')) {
-                        return `${data.length} variable${data.length > 1 ? 's' : ''}: ${data.slice(0, 2).join(', ')}${data.length > 2 ? '...' : ''}`;
-                    } else if (path.includes('ports')) {
-                        return `Port${data.length > 1 ? 's' : ''}: ${data.slice(0, 3).join(', ')}${data.length > 3 ? '...' : ''}`;
-                    } else {
-                        return `${data.length} item${data.length > 1 ? 's' : ''}`;
-                    }
+                    return `${data.length} item${data.length > 1 ? 's' : ''}`;
                 } else if (typeof data === 'object' && data !== null) {
                     const keys = Object.keys(data);
                     if (keys.length === 0) return "Empty";
-                    
-                    // Create meaningful summaries for common object types
-                    const summaryParts = [];
-                    
-                    if (data.gpu) summaryParts.push(`GPU: ${data.gpu}`);
-                    if (data.memory) summaryParts.push(`Memory: ${data.memory}`);
-                    if (data.cpu) summaryParts.push(`CPU: ${data.cpu}`);
-                    if (data.type) summaryParts.push(`Type: ${data.type}`);
-                    if (data.name) summaryParts.push(`Name: ${data.name}`);
-                    if (data.format) summaryParts.push(`Format: ${data.format}`);
-                    if (data.rps) summaryParts.push(`RPS: ${data.rps}`);
-                    if (data.replicas) summaryParts.push(`Replicas: ${data.replicas}`);
-                    
-                    if (summaryParts.length > 0) {
-                        return summaryParts.slice(0, 3).join(', ') + (summaryParts.length > 3 ? '...' : '');
-                    } else {
-                        return `${keys.length} field${keys.length > 1 ? 's' : ''}: ${keys.slice(0, 3).join(', ')}${keys.length > 3 ? '...' : ''}`;
-                    }
+                    return `${keys.length} field${keys.length > 1 ? 's' : ''}: ${keys.slice(0, 3).join(', ')}${keys.length > 3 ? '...' : ''}`;
                 }
                 return '';
             };
+            
 
-            // --- Animated Collapsible Fieldset Function ---
-            window.toggleFieldset = function(legend) {
-                const fieldset = legend.closest('fieldset');
-                const content = fieldset.querySelector('.fieldset-content');
-                const arrow = legend.querySelector('.collapse-arrow');
-                const summary = legend.querySelector('.summary-preview');
+            // --- Fast Collapsible Section Function ---
+            window.toggleFieldset = function(headerElement) {
+                const groupContainer = headerElement.closest('.group');
+                const content = groupContainer.querySelector('.fieldset-content');
+                const arrow = headerElement.querySelector('.collapse-arrow');
+                const summary = groupContainer.querySelector('.summary-preview');
                 const isExpanded = content.classList.contains('expanded');
                 
                 if (isExpanded) {
-                    // Collapse - show summary
+                    // Collapse - show summary, hide container
                     content.classList.remove('expanded');
                     content.classList.add('collapsed');
                     arrow.classList.remove('expanded');
                     arrow.classList.add('collapsed');
-                    if (summary) summary.classList.add('show');
-                    
-                    // Add subtle legend animation
-                    legend.style.transform = 'scale(0.98)';
-                    setTimeout(() => {
-                        legend.style.transform = 'scale(1)';
-                    }, 150);
+                    if (summary) summary.style.display = 'block';
                 } else {
-                    // Expand - hide summary
+                    // Expand - hide summary, show container
                     content.classList.remove('collapsed');
                     content.classList.add('expanded');
                     arrow.classList.remove('collapsed');
                     arrow.classList.add('expanded');
-                    if (summary) summary.classList.remove('show');
-                    
-                    // Add subtle legend animation
-                    legend.style.transform = 'scale(1.02)';
-                    setTimeout(() => {
-                        legend.style.transform = 'scale(1)';
-                    }, 150);
+                    if (summary) summary.style.display = 'none';
                 }
             };
 
             // --- Preset Button Event Listeners ---
-            document.getElementById('preset-llm-training').addEventListener('click', () => loadPresetConfig('llm-training'));
+            document.getElementById('preset-open-r1').addEventListener('click', () => loadPresetConfig('open-r1'));
             document.getElementById('preset-model-serving').addEventListener('click', () => loadPresetConfig('model-serving'));
             document.getElementById('preset-jupyter-dev').addEventListener('click', () => loadPresetConfig('jupyter-dev'));
             document.getElementById('preset-data-processing').addEventListener('click', () => loadPresetConfig('data-processing'));
             document.getElementById('preset-web-app').addEventListener('click', () => loadPresetConfig('web-app'));
             document.getElementById('preset-gpu-cluster').addEventListener('click', () => loadPresetConfig('gpu-cluster'));
 
+            // --- Annotation System ---
+            let annotations = {}; // Store annotations by path
+            
+            window.toggleAnnotation = function(btn, event) {
+                event.preventDefault();
+                event.stopPropagation();
+                const path = btn.dataset.path;
+                const popup = document.getElementById(`annotation-popup-${path}`);
+                const isVisible = popup.classList.contains('show');
+                
+                // Close all other popups
+                document.querySelectorAll('.annotation-popup.show').forEach(p => {
+                    p.classList.remove('show');
+                });
+                
+                if (!isVisible) {
+                    popup.classList.add('show');
+                    const textarea = popup.querySelector('.annotation-input');
+                    textarea.value = annotations[path] || '';
+                    textarea.focus();
+                }
+            };
+            
+            window.saveAnnotation = function(path) {
+                const popup = document.getElementById(`annotation-popup-${path}`);
+                const textarea = popup.querySelector('.annotation-input');
+                const value = textarea.value.trim();
+                const btn = document.querySelector(`[data-path="${path}"].annotation-btn`);
+                const display = document.getElementById(`annotation-display-${path}`);
+                
+                if (value) {
+                    annotations[path] = value;
+                    btn.classList.add('has-annotation');
+                    display.textContent = value;
+                    display.style.display = 'block';
+                } else {
+                    delete annotations[path];
+                    btn.classList.remove('has-annotation');
+                    display.style.display = 'none';
+                }
+                
+                popup.classList.remove('show');
+            };
+            
+            window.cancelAnnotation = function(path) {
+                const popup = document.getElementById(`annotation-popup-${path}`);
+                popup.classList.remove('show');
+            };
+            
+            // Close annotation popups when clicking outside
+            document.addEventListener('click', (e) => {
+                if (!e.target.closest('.annotation-container')) {
+                    document.querySelectorAll('.annotation-popup.show').forEach(p => {
+                        p.classList.remove('show');
+                    });
+                }
+            });
+
+            // --- Drawer Management ---
+            let currentDrawerPath = null;
+            let currentDrawerKey = null;
+            let drawerData = null;
+            
+            window.openDrawer = function(path, key) {
+                currentDrawerPath = path;
+                currentDrawerKey = key;
+                
+                // Get the data for this section
+                const keys = path.split('.');
+                let data = currentData;
+                for (const k of keys) {
+                    if (data && typeof data === 'object') {
+                        data = data[k];
+                    }
+                }
+                drawerData = JSON.parse(JSON.stringify(data || {})); // Deep clone
+                
+                // Update drawer content
+                const drawerTitle = document.getElementById('drawer-title');
+                const drawerContent = document.getElementById('drawer-content');
+                
+                drawerTitle.textContent = `Edit ${key.replace(/_/g, ' ')}`;
+                
+                // Simple drawer interface - just render the form
+                drawerContent.innerHTML = '';
+                renderForm(drawerData, drawerContent, '');
+                
+                // Auto-resize all textareas after rendering
+                setTimeout(() => {
+                    drawerContent.querySelectorAll('textarea.auto-resize').forEach(textarea => {
+                        autoResizeTextarea(textarea);
+                    });
+                }, 50);
+                
+                // Show drawer
+                const overlay = document.getElementById('drawer-overlay');
+                const drawer = document.getElementById('drawer');
+                overlay.classList.add('open');
+                drawer.classList.add('open');
+            };
+            
+            window.closeDrawer = function() {
+                const overlay = document.getElementById('drawer-overlay');
+                const drawer = document.getElementById('drawer');
+                overlay.classList.remove('open');
+                drawer.classList.remove('open');
+                
+                currentDrawerPath = null;
+                currentDrawerKey = null;
+                drawerData = null;
+            };
+            
+            window.saveDrawer = function() {
+                if (currentDrawerPath && drawerData) {
+                    // Update the main data
+                    setNestedValue(currentData, currentDrawerPath, drawerData);
+                    
+                    // Update YAML and form
+                    updateYamlEditor();
+                    formContainer.innerHTML = '';
+                    renderForm(currentData, formContainer);
+                    
+                    closeDrawer();
+                }
+            };
+            
+            // Auto-resize textarea function
+            const autoResizeTextarea = (textarea) => {
+                textarea.style.height = 'auto';
+                textarea.style.height = textarea.scrollHeight + 'px';
+            };
+            
+            // Handle drawer form changes
+            document.addEventListener('input', (e) => {
+                if (e.target.closest('#drawer-content') && e.target.dataset.path) {
+                    const path = e.target.dataset.path;
+                    let value = e.target.value;
+                    if (e.target.type === 'checkbox') {
+                        value = e.target.checked;
+                    } else if (e.target.type === 'number') {
+                        value = parseFloat(value) || 0;
+                    }
+                    setNestedValue(drawerData, path, value);
+                    
+                    // Auto-resize textareas
+                    if (e.target.tagName === 'TEXTAREA' && e.target.classList.contains('auto-resize')) {
+                        autoResizeTextarea(e.target);
+                    }
+                }
+            });
+            
+            // Handle drawer form clicks (add/remove buttons)
+            document.addEventListener('click', (e) => {
+                const button = e.target.closest('button');
+                if (!button || !button.closest('#drawer-content')) return;
+                
+                const path = button.dataset.path;
+                if (button.classList.contains('remove-btn')) {
+                    if (confirm('Are you sure you want to remove this item?')) {
+                        deleteNestedValue(drawerData, path);
+                        const drawerContent = document.getElementById('drawer-content');
+                        drawerContent.innerHTML = '';
+                        renderForm(drawerData, drawerContent, '');
+                    }
+                } else if (button.classList.contains('add-btn')) {
+                    let newItem;
+                    try {
+                        newItem = JSON.parse(button.dataset.template);
+                    } catch (e) {
+                        newItem = button.dataset.template;
+                    }
+                    
+                    const currentArray = path ? drawerData[path] : drawerData;
+                    const newIndex = Array.isArray(currentArray) ? currentArray.length : 0;
+                    setNestedValue(drawerData, `${path ? path + '.' : ''}${newIndex}`, newItem);
+                    
+                    const drawerContent = document.getElementById('drawer-content');
+                    drawerContent.innerHTML = '';
+                    renderForm(drawerData, drawerContent, '');
+                }
+            });
+
+
             // --- Initial Load ---
-            yamlEditor.value = dstackTemplates.task;
+            yamlEditor.setValue(dstackTemplates.task);
             updateFormFromYaml();
+            
+            // Add arrows and auto-collapse after template is loaded
+            setTimeout(() => {
+                console.log('Template loaded, now adding arrows...');
+                addArrowsToContent();
+                
+                setTimeout(() => {
+                    console.log('Auto-collapsing all sections...');
+                    autoCollapseAll();
+                }, 100);
+            }, 100);
         });
     </script>