diff --git a/.eslintignore b/.eslintignore
index acdb7fe434..d69c3496fb 100755
--- a/.eslintignore
+++ b/.eslintignore
@@ -78,6 +78,7 @@ src/components/Jobs/Service.ts
 src/components/Jobs/Utils.ts
 src/components/LogViewer/LogViewer.tsx
 src/components/ResourceBrowser/ResourceList/__tests__/Sidebar.test.tsx
+src/components/__mocks__/monaco-editor.js
 src/components/__mocks__/xterm-webfont.js
 src/components/app/LogFilter.test.ts
 src/components/app/LogFilter.ts
@@ -218,6 +219,7 @@ src/components/ciPipeline/WebhookSelectorCondition.tsx
 src/components/ciPipeline/ciPipeline.service.ts
 src/components/ciPipeline/validationRules.ts
 src/components/cluster/Cluster.tsx
+src/components/cluster/ClusterCodeEditor.tsx
 src/components/cluster/ClusterComponentModal.tsx
 src/components/cluster/ClusterForm.tsx
 src/components/cluster/ClusterInfoStepsModal.tsx
diff --git a/package.json b/package.json
index fc900b6c6b..895fa81093 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,8 @@
         "flexsearch": "^0.6.32",
         "jsonpath-plus": "^10.0.0",
         "moment": "^2.29.4",
+        "monaco-editor": "0.44.0",
+        "monaco-yaml": "5.1.1",
         "query-string": "^7.1.1",
         "react": "^17.0.2",
         "react-csv": "^2.2.2",
@@ -31,6 +33,7 @@
         "react-ga4": "^1.4.1",
         "react-gtm-module": "^2.0.11",
         "react-mde": "^11.5.0",
+        "react-monaco-editor": "^0.55.0",
         "react-router-dom": "^5.3.4",
         "react-select": "5.8.0",
         "react-virtualized": "^9.22.5",
@@ -112,7 +115,6 @@
         "husky": "^7.0.4",
         "jest-extended": "^2.0.0",
         "jest-junit": "^13.0.0",
-        "json-schema": "^0.4.0",
         "lint-staged": "12.5.0",
         "mock-socket": "^9.2.1",
         "patch-package": "^8.0.0",
@@ -142,7 +144,11 @@
         ],
         "setupFilesAfterEnv": [
             "jest-extended"
-        ]
+        ],
+        "moduleNameMapper": {
+            "monaco-editor": "<rootDir>/node_modules/react-monaco-editor",
+            "monaco-yaml": "<rootDir>/node_modules/react-monaco-editor"
+        }
     },
     "resolutions": {
         "nanoid": "^3.3.8",
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/CompareConfigView.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/CompareConfigView.tsx
index 7be5216d87..3bac7e6c46 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/CompareConfigView.tsx
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/CompareConfigView.tsx
@@ -34,6 +34,7 @@ const CompareConfigView = ({
     selectedChartVersion,
     draftChartVersion,
     isDeleteOverrideView,
+    editorKey = `${compareFromSelectedOptionValue || 'compare'}-draft-editor-key`,
     className = '',
     errorInfo,
     handleErrorReload,
@@ -71,6 +72,7 @@ const CompareConfigView = ({
         ) : (
             <div className="p-16">
                 <DeploymentHistoryDiffView
+                    key={editorKey}
                     currentConfiguration={getCompareViewHistoryDiffConfigProps(
                         publishedEditorTemplate,
                         publishedEditorConfig,
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DeploymentTemplate.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DeploymentTemplate.tsx
index dd583eb48a..e34c01b28b 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DeploymentTemplate.tsx
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DeploymentTemplate.tsx
@@ -1556,6 +1556,7 @@ const DeploymentTemplate = ({
                     }
                     draftChartVersion={draftTemplateData?.selectedChart?.version}
                     isDeleteOverrideView={isDeleteOverrideDraft}
+                    editorKey={`${compareFromSelectedOptionValue || 'compare'}-draft-editor-key-${Number(!!hideLockedKeys)}-${shouldMergeTemplateWithPatches ? 'with-merged-values' : 'without-merged-values'}-${resolveScopedVariables ? 'in-resolved-view' : 'in-unresolved-view'}`}
                     {...getCompareFromEditorConfig({
                         envId,
                         isDeleteOverrideDraft,
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/types.ts b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/types.ts
index 6031a916dc..d4f9ada82d 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/types.ts
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/types.ts
@@ -304,6 +304,10 @@ export type CompareConfigViewProps = {
     publishedEditorConfig: CompareConfigViewEditorConfigType
     draftChartVersion?: string
     selectedChartVersion?: string
+    /**
+     * @default ${compareFromSelectedOptionValue}-"draft-editor-key"
+     */
+    editorKey?: string
     className?: string
     /**
      * @default 'Data'
diff --git a/src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/SSOLogin.component.tsx b/src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/SSOLogin.component.tsx
index 39a464a972..3f8d5ed373 100644
--- a/src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/SSOLogin.component.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/SSOLogin.component.tsx
@@ -41,7 +41,6 @@ import {
     Button,
     ButtonVariantType,
     ComponentSizeType,
-    MODES,
     ConfirmationModal,
     ConfirmationModalVariantType,
 } from '@devtron-labs/devtron-fe-common-lib'
@@ -631,17 +630,15 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
         }
         const value = YAMLStringify(newConfig)
 
-        setTimeout(() => {
-            this.setState({
-                ssoConfig: {
-                    ...this.state.ssoConfig,
-                    config: {
-                        ...this.state.ssoConfig.config,
-                        config: value,
-                    },
+        this.setState({
+            ssoConfig: {
+                ...this.state.ssoConfig,
+                config: {
+                    ...this.state.ssoConfig.config,
+                    config: value,
                 },
-            })
-        }, 0)
+            },
+        })
     }
 
     renderSSOCodeEditor() {
@@ -681,20 +678,23 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
 
         const shebangHtml = this.state.configMap === SwitchItemValues.Configuration ? presetConfig : null
 
+        const decorationWidth = this.state.sso !== OIDCType ? 50 : 25
         return (
-            <CodeEditor.Container>
+            <div className="br-4 dc__border w-100 dc__overflow-hidden">
                 <CodeEditor
                     value={codeEditorBody}
-                    mode={MODES.YAML}
+                    mode="yaml"
                     noParsing={this.state.sso === OIDCType}
+                    lineDecorationsWidth={this.state.configMap === SwitchItemValues.Configuration ? decorationWidth : 0}
                     shebang={shebangHtml}
                     readOnly={this.state.configMap !== SwitchItemValues.Configuration}
                     onChange={this.handleConfigChange}
                     onBlur={this.handleOnBlur}
-                    height="auto"
+                    adjustEditorHeightToContent
                 >
                     <CodeEditor.Header>
                         <div className="flex dc__content-space dc__gap-6">
+                            <CodeEditor.ValidationError />
                             <div className="dc__no-shrink">
                                 <Switch
                                     value={this.state.configMap}
@@ -710,7 +710,7 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
                         </div>
                     </CodeEditor.Header>
                 </CodeEditor>
-            </CodeEditor.Container>
+            </div>
         )
     }
 
@@ -856,7 +856,7 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
             </div>
         )
         return (
-            <section className="bg__primary sso-login__wrapper min-h-100">
+            <section className="bg__primary sso-login__wrapper">
                 {renderSSOContent()}
                 {/* Confirmation Modal for SSO Change */}
                 <ConfirmationModal
diff --git a/src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/ssoLogin.scss b/src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/ssoLogin.scss
index a074633e99..f09adf040d 100644
--- a/src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/ssoLogin.scss
+++ b/src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/ssoLogin.scss
@@ -19,6 +19,7 @@
         resize: none;
         line-height: 1.4;
         border: none;
+        padding: 0 35px;
         overflow: hidden;
         color: var(--R500);
         font-size: 14px;
diff --git a/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretData.tsx b/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretData.tsx
index 43d8672cb6..791f3baaec 100644
--- a/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretData.tsx
+++ b/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretData.tsx
@@ -25,7 +25,6 @@ import {
     ComponentSizeType,
     KeyValueConfig,
     KeyValueTable,
-    MODES,
     noop,
     StyledRadioGroup,
     ToastManager,
@@ -294,15 +293,16 @@ export const ConfigMapSecretData = ({
         })
 
         return (
-            <CodeEditor.Container>
+            <div className="dc__border br-4 dc__overflow-hidden">
                 <CodeEditor
                     key={codeEditorRadio}
                     value={getCodeEditorValue()}
                     // Skip calling onChange if resolvedData exists
                     onChange={!isLocked && !data.isResolvedData ? onChange : noop}
                     onFocus={onFocus}
-                    mode={MODES.YAML}
-                    height="100%"
+                    mode="yaml"
+                    inline
+                    height={350}
                     shebang={sheBangText}
                     readOnly={
                         readOnly || isHashiOrAWS || isLocked || codeEditorRadio === CODE_EDITOR_RADIO_STATE.SAMPLE
@@ -338,7 +338,7 @@ export const ConfigMapSecretData = ({
                     )}
                 </CodeEditor>
                 {!data.external && data.yamlMode && renderYamlInfoText()}
-            </CodeEditor.Container>
+            </div>
         )
     }
 
diff --git a/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretDryRun.tsx b/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretDryRun.tsx
index fe9f4c6f02..44af1a868b 100644
--- a/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretDryRun.tsx
+++ b/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretDryRun.tsx
@@ -195,12 +195,13 @@ export const ConfigMapSecretDryRun = ({
                     areScopeVariablesResolving={areScopeVariablesResolving}
                     fallbackMergeStrategy={DEFAULT_MERGE_STRATEGY}
                 />
-                {renderExternalInfo(
-                    dryRunConfigMapSecretData.externalType,
-                    dryRunConfigMapSecretData.external,
-                    componentType,
-                    'mr-16 ml-16',
-                )}
+                <div className="px-16 pb-16">
+                    {renderExternalInfo(
+                        dryRunConfigMapSecretData.externalType,
+                        dryRunConfigMapSecretData.external,
+                        componentType,
+                    )}
+                </div>
             </>
         )
     }
@@ -231,7 +232,7 @@ export const ConfigMapSecretDryRun = ({
                     />
                 </div>
             </div>
-            {renderLHSContent()}
+            <div className="flex-grow-1 dc__overflow-auto">{renderLHSContent()}</div>
         </div>
     )
 
@@ -251,7 +252,9 @@ export const ConfigMapSecretDryRun = ({
                     reload: reloadConfigMapSecretManifest,
                 }}
             >
-                <CodeEditor value={configMapSecretManifest?.manifest} height="fitToParent" mode={MODES.YAML} readOnly />
+                <div className="flex-grow-1 dc__overflow-auto">
+                    <CodeEditor value={configMapSecretManifest?.manifest} height="100%" mode={MODES.YAML} readOnly />
+                </div>
             </APIResponseHandler>
         </div>
     )
diff --git a/src/Pages/Shared/ConfigMapSecret/helpers.tsx b/src/Pages/Shared/ConfigMapSecret/helpers.tsx
index 2390599a24..d2c0e6972d 100644
--- a/src/Pages/Shared/ConfigMapSecret/helpers.tsx
+++ b/src/Pages/Shared/ConfigMapSecret/helpers.tsx
@@ -58,12 +58,11 @@ export const renderExternalInfo = (
     externalType: CMSecretExternalType,
     external: boolean,
     componentType: CMSecretComponentType,
-    className?: string,
 ) =>
     externalType === CMSecretExternalType.KubernetesSecret ||
     (componentType === CMSecretComponentType.ConfigMap && external) ? (
         <InfoColourBar
-            classname={`info_bar ${className || ''}`}
+            classname="info_bar"
             message={
                 <div className="flex column left">
                     <h4 className="m-0 lh-20 dc__info-title">{EXTERNAL_INFO_TEXT[componentType].title}</h4>
@@ -91,7 +90,7 @@ export const renderChartVersionBelow3090NotSupportedText = () => (
 )
 
 export const renderYamlInfoText = () => (
-    <p className="m-0 py-6 px-10 flex left dc__gap-6 fs-12 lh-20 cn-8 bg__secondary dc__border-top-n1 dc__bottom-radius-4">
+    <p className="m-0 py-6 px-10 flex left dc__gap-6 fs-12 lh-20 cn-8 bg__secondary dc__border-top-n1">
         <InfoIconN7 className="icon-dim-16 dc__no-shrink" />
         <span>
             GUI Recommended for multi-line data. Boolean and numeric values must be wrapped in double quotes Eg.
diff --git a/src/components/CIPipelineN/CustomScript.tsx b/src/components/CIPipelineN/CustomScript.tsx
index b298f43263..00cca544a4 100644
--- a/src/components/CIPipelineN/CustomScript.tsx
+++ b/src/components/CIPipelineN/CustomScript.tsx
@@ -15,7 +15,7 @@
  */
 
 import React, { useContext, useEffect, useState } from 'react'
-import { ScriptType, CodeEditor, MODES } from '@devtron-labs/devtron-fe-common-lib'
+import { ScriptType, CodeEditor } from '@devtron-labs/devtron-fe-common-lib'
 import { TaskFieldDescription, TaskFieldLabel } from '../ciPipeline/types'
 import TaskFieldTippyDescription from './TaskFieldTippyDescription'
 import { ReactComponent as AlertTriangle } from '../../assets/icons/ic-alert-triangle.svg'
@@ -44,15 +44,16 @@ const CustomScript = ({ handleScriptChange }: CustomScriptType) => {
                         contentDescription={TaskFieldDescription.SCRIPT}
                     />
                 )}
-                <CodeEditor.Container>
+                <div className="script-container no-padding-script-container">
                     <CodeEditor
-                        mode={MODES.SHELL}
+                        mode="shell"
                         noParsing
                         onChange={(value) => handleScriptChange({ target: { value } })}
+                        inline
                         height={300}
                         value={editorValue}
                     />
-                </CodeEditor.Container>
+                </div>
             </div>
 
             {formDataErrorObj[activeStageName].steps[selectedTaskIndex].inlineStepDetail?.script &&
diff --git a/src/components/ClusterNodes/ClusterManifest.tsx b/src/components/ClusterNodes/ClusterManifest.tsx
index 6af52264e5..b1737f2898 100644
--- a/src/components/ClusterNodes/ClusterManifest.tsx
+++ b/src/components/ClusterNodes/ClusterManifest.tsx
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { useState, useEffect } from 'react'
+import React, { useState, useEffect } from 'react'
 import YAML from 'yaml'
-import { VisibleModal2, YAMLStringify, CodeEditor, AppThemeType } from '@devtron-labs/devtron-fe-common-lib'
+import { VisibleModal2, YAMLStringify, CodeEditor, CodeEditorThemesKeys } from '@devtron-labs/devtron-fe-common-lib'
 import MessageUI, { MsgUIType } from '../v2/common/message.ui'
 import { getClusterManifest } from './clusterNodes.service'
 import { ManifestMessaging, MESSAGING_UI, MODES } from '../../config'
@@ -138,44 +138,32 @@ export default function ClusterManifest({
         }
         return (
             <div className="h-100 flexbox-col">
-                <CodeEditor
-                    theme={AppThemeType.dark}
-                    height="100%"
-                    mode={MODES.YAML}
-                    noParsing
-                    readOnly={manifestMode !== EditModeType.EDIT && manifestMode !== EditModeType.REVIEW}
-                    diffView={manifestMode === EditModeType.REVIEW}
-                    {...(manifestMode === EditModeType.REVIEW
-                        ? {
-                              diffView: true,
-                              originalValue: defaultManifest,
-                              modifiedValue: manifestValue,
-                              onModifiedValueChange: setManifest,
-                          }
-                        : {
-                              diffView: false,
-                              value: manifestValue,
-                              onChange: setManifest,
-                          })}
-                >
-                    {manifestMode === EditModeType.REVIEW && (
-                        <CodeEditor.Header
-                            hideDefaultSplitHeader
-                            className="dc__grid-half py-4 text__white vertical-divider"
-                        >
-                            <div className="flex dc__content-space px-12">
-                                <span>Pod manifest</span>
-                                <span className="flex" data-testid="close-to-edit-manifest" onClick={switchToEditMode}>
-                                    <Close className="icon-dim-16 cursor icon-fill__white" />
-                                </span>
-                            </div>
-                            <div className="flex left px-12">
-                                <Pencil className="icon-dim-16 mr-10 icon-stroke__white" />
-                                <span>Manifest (Editing)</span>
-                            </div>
-                        </CodeEditor.Header>
-                    )}
-                </CodeEditor>
+                {manifestMode === EditModeType.REVIEW && (
+                    <div className="cluster-manifest-header pt-4 pb-4 text__white flex">
+                        <div className="pl-12 flex dc__content-space">
+                            Pod manifest
+                            <span className="flex" data-testid="close-to-edit-manifest" onClick={switchToEditMode}>
+                                <Close className="icon-dim-16 cursor icon-fill__white" />
+                            </span>
+                        </div>
+                        <div className="pl-12 flex left">
+                            <Pencil className="icon-dim-16 mr-10 icon-stroke__white" /> Manifest (Editing)
+                        </div>
+                    </div>
+                )}
+                <div className="pt-8 pb-8 flex-1 dc__overflow-hidden">
+                    <CodeEditor
+                        defaultValue={defaultManifest}
+                        theme={CodeEditorThemesKeys.vsDarkDT}
+                        height="100%"
+                        value={manifestValue}
+                        mode={MODES.YAML}
+                        noParsing
+                        onChange={setManifest}
+                        readOnly={manifestMode !== EditModeType.EDIT && manifestMode !== EditModeType.REVIEW}
+                        diffView={manifestMode === EditModeType.REVIEW}
+                    />
+                </div>
             </div>
         )
     }
diff --git a/src/components/ClusterNodes/NodeDetails.tsx b/src/components/ClusterNodes/NodeDetails.tsx
index 1a0f5e7c35..3131026610 100644
--- a/src/components/ClusterNodes/NodeDetails.tsx
+++ b/src/components/ClusterNodes/NodeDetails.tsx
@@ -34,8 +34,8 @@ import {
     ToastManager,
     ToastVariantType,
     ResourceDetail,
-    AppThemeType,
     noop,
+    CodeEditorThemesKeys,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useParams, useLocation, useHistory } from 'react-router-dom'
 import YAML from 'yaml'
@@ -906,25 +906,27 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
         }
     }
 
+    const getCodeEditorHeight = (): string => {
+        if (!isReviewState) {
+            return 'calc(100vh - 115px)'
+        }
+        if (isShowWarning) {
+            return `calc(100vh - 180px)`
+        }
+        return `calc(100vh - 148px)`
+    }
+
     const renderYAMLEditor = (): JSX.Element => {
         return (
-            <div className="node-details-container flexbox-col flex-grow-1">
+            <div className="node-details-container">
                 <CodeEditor
-                    theme={AppThemeType.dark}
-                    {...(isReviewState
-                        ? {
-                              diffView: true,
-                              originalValue: (nodeDetail?.manifest && YAMLStringify(nodeDetail.manifest)) || '',
-                              modifiedValue: modifiedManifest,
-                              onModifiedValueChange: handleEditorValueChange,
-                          }
-                        : {
-                              diffView: false,
-                              value: modifiedManifest,
-                              onChange: handleEditorValueChange,
-                          })}
-                    height="fitToParent"
+                    value={modifiedManifest}
+                    defaultValue={(nodeDetail?.manifest && YAMLStringify(nodeDetail.manifest)) || ''}
+                    height={getCodeEditorHeight()}
                     readOnly={!isEdit}
+                    theme={CodeEditorThemesKeys.vsDarkDT}
+                    diffView={isReviewState}
+                    onChange={handleEditorValueChange}
                     mode={MODES.YAML}
                     noParsing
                 >
@@ -935,11 +937,11 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
                         />
                     )}
                     {isReviewState && (
-                        <CodeEditor.Header hideDefaultSplitHeader className="node-code-editor-header vertical-divider">
-                            <div className="h-32 lh-32 fs-12 fw-6 flexbox w-100 text__white">
+                        <CodeEditor.Header hideDefaultSplitHeader className="node-code-editor-header">
+                            <div className="h-32 lh-32 fs-12 fw-6 flexbox w-100 cn-0">
                                 <div className=" pl-10 w-49">Current node YAML </div>
                                 <div className="pl-25 w-51 flexbox">
-                                    <Edit className="icon-dim-16 icon-fill-white mt-7 mr-5" />
+                                    <Edit className="icon-dim-16 scn-0 mt-7 mr-5" />
                                     YAML (Editing)
                                 </div>
                             </div>
@@ -1046,7 +1048,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
     }
 
     return (
-        <div className="bg__primary node-data-container flexbox-col">
+        <div className="bg__primary node-data-container">
             {loader ? (
                 <Progressing pageLoader size={32} />
             ) : (
diff --git a/src/components/ClusterNodes/clusterNodes.scss b/src/components/ClusterNodes/clusterNodes.scss
index 79d41f0ab1..0db02caa89 100644
--- a/src/components/ClusterNodes/clusterNodes.scss
+++ b/src/components/ClusterNodes/clusterNodes.scss
@@ -374,6 +374,11 @@
     flex-shrink: 0;
 }
 
+.cluster-manifest-header {
+    display: grid;
+    grid-template-columns: 1fr 1fr 30px;
+}
+
 .node-data-container {
     height: calc(100vh - 84px);
     overflow: hidden;
diff --git a/src/components/ResourceBrowser/ResourceList/CreateResource.tsx b/src/components/ResourceBrowser/ResourceList/CreateResource.tsx
index b95d4772f6..0c08e34b25 100644
--- a/src/components/ResourceBrowser/ResourceList/CreateResource.tsx
+++ b/src/components/ResourceBrowser/ResourceList/CreateResource.tsx
@@ -25,7 +25,7 @@ import {
     CodeEditor,
     createNewResource,
     CreateResourceDTO,
-    AppThemeType,
+    CodeEditorThemesKeys,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { APP_STATUS_HEADERS, MODES } from '../../../config'
 import { ReactComponent as CloseIcon } from '../../../assets/icons/ic-cross.svg'
@@ -147,14 +147,14 @@ export const CreateResource: React.FC<CreateResourceType> = ({ closePopup, clust
                         Icon={InfoIcon}
                     />
                     <CodeEditor
-                        theme={AppThemeType.dark}
+                        theme={CodeEditorThemesKeys.vsDarkDT}
                         value={resourceYAML}
                         mode={MODES.YAML}
                         noParsing
-                        height="fitToParent"
+                        height="calc(100vh - 165px)"
                         onChange={handleEditorValueChange}
                         loading={loader}
-                        autoFocus
+                        focus
                     />
                 </>
             )
@@ -210,8 +210,8 @@ export const CreateResource: React.FC<CreateResourceType> = ({ closePopup, clust
     }
 
     return (
-        <Drawer position="right" width="75%" minWidth="1024px" maxWidth="1200px" onEscape={onClose}>
-            <div className="create-resource-container bg__primary h-100 flexbox-col">
+        <Drawer position="right" width="75%" minWidth="1024px" maxWidth="1200px">
+            <div className="create-resource-container bg__primary h-100" ref={appStatusDetailRef}>
                 <div className="flex flex-align-center flex-justify bg__primary pt-16 pr-20 pb-16 pl-20 dc__border-bottom">
                     <h2 className="fs-16 fw-6 lh-1-43 m-0">{CREATE_RESOURCE_MODAL_MESSAGING.title}</h2>
                     <button
@@ -223,7 +223,7 @@ export const CreateResource: React.FC<CreateResourceType> = ({ closePopup, clust
                         <CloseIcon className="icon-dim-24" />
                     </button>
                 </div>
-                <div className="flex-grow-1 flexbox-col">{renderPageContent()}</div>
+                <div style={{ height: 'calc(100vh - 127px)' }}>{renderPageContent()}</div>
                 {renderFooter()}
             </div>
         </Drawer>
diff --git a/src/components/__mocks__/monaco-editor.js b/src/components/__mocks__/monaco-editor.js
new file mode 100644
index 0000000000..b1ef70ed1e
--- /dev/null
+++ b/src/components/__mocks__/monaco-editor.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+module.exports = {
+    editor: {
+        getModelMarkers: jest.fn().mockReturnValue([]),
+        defineTheme: jest.fn(),
+    },
+    Position: {},
+}
diff --git a/src/components/app/details/appDetails/AppDetails.tsx b/src/components/app/details/appDetails/AppDetails.tsx
index 2605ef5687..89ef09cafb 100644
--- a/src/components/app/details/appDetails/AppDetails.tsx
+++ b/src/components/app/details/appDetails/AppDetails.tsx
@@ -203,7 +203,7 @@ export default function AppDetail({ filteredEnvIds }: { filteredEnvIds?: string
     }, [envList, params.envId])
 
     return (
-        <div data-testid="app-details-wrapper" className="app-details-page-wrapper mw-none">
+        <div data-testid="app-details-wrapper" className="app-details-page-wrapper">
             {!params.envId && envList.length > 0 && (
                 <div className="w-100 pt-16 pr-20 pb-20 pl-20">
                     <SourceInfo
diff --git a/src/components/app/details/cIDetails/ciDetails.scss b/src/components/app/details/cIDetails/ciDetails.scss
index 2ba01a285a..18713d7aaa 100644
--- a/src/components/app/details/cIDetails/ciDetails.scss
+++ b/src/components/app/details/cIDetails/ciDetails.scss
@@ -47,7 +47,7 @@
     }
 
     .ci-details__body {
-        flex: 1 1;
+        flex-basis: calc(100% - 280px);
         transition: flex-basis 0.3s;
         display: flex;
         flex-direction: column;
diff --git a/src/components/app/details/triggerView/CiWebhookDebuggingModal.tsx b/src/components/app/details/triggerView/CiWebhookDebuggingModal.tsx
index e071956edc..a0e70b4ebd 100644
--- a/src/components/app/details/triggerView/CiWebhookDebuggingModal.tsx
+++ b/src/components/app/details/triggerView/CiWebhookDebuggingModal.tsx
@@ -21,6 +21,7 @@ import {
     Progressing,
     sortCallback,
     CodeEditor,
+    ClipboardButton,
     getFormattedSchema,
     Button,
     ButtonVariantType,
@@ -29,7 +30,6 @@ import {
     useSearchString,
     getUrlWithSearchParams,
     Tooltip,
-    MODES,
 } from '@devtron-labs/devtron-fe-common-lib'
 import moment from 'moment'
 import { ReactComponent as Edit } from '@Icons/ic-pencil.svg'
@@ -247,29 +247,33 @@ export const CiWebhookModal = ({
     const _value = webhookIncomingPayload?.payloadJson ? getFormattedSchema(webhookIncomingPayload.payloadJson) : ''
 
     const renderReceivedPayloadCodeEditor = () => (
-        <CodeEditor.Container flexExpand>
-            <CodeEditor value={_value} readOnly mode={MODES.YAML} height="fitToParent">
-                <CodeEditor.Header className="px-16 py-10 flex dc__content-space bg__secondary">
-                    <p className="m-0 fw-6">Payload</p>
-                    <CodeEditor.Clipboard />
-                </CodeEditor.Header>
-            </CodeEditor>
-        </CodeEditor.Container>
+        <div className="dc__border br-4">
+            <div className="flex dc__content-space dc__gap-6 px-16 py-10 flexbox dc__align-items-center dc__gap-8 w-100 br-4 bg__secondary dc__position-sticky dc__top-0 dc__zi-10">
+                <div className="fw-6">Payload</div>
+                <ClipboardButton content={_value} rootClassName="p-4 dc__visible-hover--child" />
+            </div>
+            <CodeEditor value={_value} readOnly mode="yaml" adjustEditorHeightToContent />
+        </div>
     )
 
     const renderTimeStampDetailedDescription = () => (
-        <div className="bg__primary mw-none flexbox-col dc__gap-16 px-20 py-16">
-            {renderFilterTable()}
-            {renderReceivedPayloadCodeEditor()}
+        <div className="flex column top dc__gap-16 h-100 dc__overflow-auto">
+            <div className="flex column py-16 px-20 w-100 dc__gap-16">
+                {renderFilterTable()}
+                <div className="expand-incoming-payload  w-100 pb-20">{renderReceivedPayloadCodeEditor()}</div>
+            </div>
         </div>
     )
 
-    const renderWebhookPayloadContent = () =>
-        isPayloadLoading ? (
-            <div className="flex payload-wrapper-no-header">{renderWebhookPayloadLoader()}</div>
-        ) : (
-            renderTimeStampDetailedDescription()
-        )
+    const renderWebhookPayloadContent = () => (
+        <div className="bg__primary dc__top-0 dc__right-0 timestamp-detail-container">
+            {isPayloadLoading ? (
+                <div className="flex payload-wrapper-no-header">{renderWebhookPayloadLoader()}</div>
+            ) : (
+                renderTimeStampDetailedDescription()
+            )}
+        </div>
+    )
 
     if (isWebhookPayloadLoading) {
         return (
diff --git a/src/components/bulkEdits/BulkEdits.tsx b/src/components/bulkEdits/BulkEdits.tsx
index 25a4eb003e..48696e6fc6 100644
--- a/src/components/bulkEdits/BulkEdits.tsx
+++ b/src/components/bulkEdits/BulkEdits.tsx
@@ -28,7 +28,6 @@ import {
     ToastManager,
     ToastVariantType,
     MarkDown,
-    MODES,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { DOCUMENTATION, SERVER_MODE, ViewType } from '../../config'
 import {
@@ -256,11 +255,11 @@ export default class BulkEdits extends Component<BulkEditsProps, BulkEditsState>
 
     renderCodeEditorBody = () => {
         return (
-            <div className="code-editor-body bg__primary flexbox-col flex-grow-1">
+            <div className="code-editor-body">
                 <CodeEditor
-                    height="fitToParent"
+                    height="calc(60vh - 97px)"
                     value={this.state.codeEditorPayload}
-                    mode={MODES.YAML}
+                    mode="yaml"
                     onChange={(event) => {
                         this.handleConfigChange(event)
                     }}
@@ -671,7 +670,7 @@ export default class BulkEdits extends Component<BulkEditsProps, BulkEditsState>
 
     renderBulkCodeEditor = () => {
         return (
-            <div className="flexbox-col">
+            <div className="dc__border-right">
                 {this.renderCodeEditorHeader()}
                 {this.renderCodeEditorBody()}
             </div>
@@ -689,9 +688,9 @@ export default class BulkEdits extends Component<BulkEditsProps, BulkEditsState>
 
     renderCodeEditorAndReadme = () => {
         return (
-            <div className="bulk-container vertical-divider">
-                {this.renderBulkCodeEditor()}
-                {this.renderReadmeSection()}
+            <div className="bulk-container">
+                <div>{this.renderBulkCodeEditor()}</div>
+                <div>{this.renderReadmeSection()}</div>
             </div>
         )
     }
diff --git a/src/components/bulkEdits/bulkEdit.scss b/src/components/bulkEdits/bulkEdit.scss
index 00d1320703..855557c016 100644
--- a/src/components/bulkEdits/bulkEdit.scss
+++ b/src/components/bulkEdits/bulkEdit.scss
@@ -71,6 +71,14 @@
     background-color: var(--bg-primary);
 }
 
+.code-editor-body {
+    height: calc(100vh - 97px);
+    background: var(--bg-primary);
+    .react-monaco-editor-container {
+        min-height: calc(60vh - 97px);
+    }
+}
+
 .bulk-output-body {
     letter-spacing: 0.2px;
     height: calc(40vh - 36px);
diff --git a/src/components/cdPipeline/BuildCD.tsx b/src/components/cdPipeline/BuildCD.tsx
index defb1821b9..20cb6de1df 100644
--- a/src/components/cdPipeline/BuildCD.tsx
+++ b/src/components/cdPipeline/BuildCD.tsx
@@ -32,7 +32,6 @@ import {
     ToastManager,
     ComponentSizeType,
     showError,
-    MODES,
     TriggerType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useContext, useState } from 'react'
@@ -742,11 +741,13 @@ export default function BuildCD({
                                     <CodeEditor
                                         height={300}
                                         value={strategy.yamlStr}
-                                        mode={MODES.YAML}
+                                        mode="yaml"
                                         onChange={(event) =>
                                             handleStrategyChange(event, strategy.deploymentTemplate, 'yaml')
                                         }
-                                    />
+                                    >
+                                        <CodeEditor.Header className="code-editor" />
+                                    </CodeEditor>
                                 </div>
                             )}
                         </div>
diff --git a/src/components/cdPipeline/cdPipeline.scss b/src/components/cdPipeline/cdPipeline.scss
index 9da18a0be5..76b4cfa87c 100644
--- a/src/components/cdPipeline/cdPipeline.scss
+++ b/src/components/cdPipeline/cdPipeline.scss
@@ -30,7 +30,6 @@
     border: solid 1px var(--N200);
     background-color: var(--bg-primary);
     margin-bottom: 16px;
-    overflow: hidden;
 }
 
 .set-as-default {
diff --git a/src/components/charts/AdvancedConfig.tsx b/src/components/charts/AdvancedConfig.tsx
index 7b6a420a31..40da45d596 100644
--- a/src/components/charts/AdvancedConfig.tsx
+++ b/src/components/charts/AdvancedConfig.tsx
@@ -23,7 +23,6 @@ import {
     CustomInput,
     CodeEditor,
     MarkDown,
-    MODES,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useHistory } from 'react-router-dom'
 import { Select, mapByKey, useKeyDown, Info, Pencil } from '../common'
@@ -190,7 +189,7 @@ const AdvancedConfig: React.FC<AdvancedConfig> = ({
 
     return (
         <>
-            <div className="advanced-config">
+            <div className="advanced-config flex">
                 <form action="" className="advanced-config__form">
                     <h1 className="form__title form__title--mb-24" data-testid="advanced-option-heading">
                         {chartName}
@@ -366,7 +365,7 @@ const AdvancedConfig: React.FC<AdvancedConfig> = ({
                             </div>
                         </div>
                     )}
-                    <CodeEditor.Container>
+                    <div className="code-editor-container" data-testid="code-editor-code-editor-container">
                         <CodeEditor
                             value={valuesYaml}
                             noParsing
@@ -379,11 +378,10 @@ const AdvancedConfig: React.FC<AdvancedConfig> = ({
                                       }
                                     : () => {}
                             }
-                            mode={MODES.YAML}
-                            height="auto"
+                            mode="yaml"
                         >
                             <CodeEditor.Header>
-                                <div className="flex dc__content-space w-100">
+                                <div className="flex" style={{ justifyContent: 'space-between', width: '100%' }}>
                                     <span data-testid="code-editor-code-editor-container-heading">
                                         {appName.value}.yaml
                                     </span>
@@ -414,7 +412,7 @@ const AdvancedConfig: React.FC<AdvancedConfig> = ({
                                 <CodeEditor.Warning text="The values configuration was created for a different chart version. Review the diff before continuing." />
                             ) : null}
                         </CodeEditor>
-                    </CodeEditor.Container>
+                    </div>
                 </form>
             </div>
             {showReadme && (
@@ -471,7 +469,7 @@ const ReadmeCharts = ({ readme, valuesYaml, onChange, handleClose, chart }) => {
         <div className="advanced-config__readme">
             <h3>{chart.chartMetaData.chartName}</h3>
             <div className="readme-config-container" data-testid="readme-container">
-                <div className="readme-config--header vertical-divider">
+                <div className="readme-config--header">
                     <h5 className="flex left">Readme.md</h5>
                     <h5 className="flex left">
                         {chart?.name?.value}.yaml
@@ -485,11 +483,11 @@ const ReadmeCharts = ({ readme, valuesYaml, onChange, handleClose, chart }) => {
                     <div className="right column">
                         <CodeEditor
                             value={valuesYaml}
-                            mode={MODES.YAML}
+                            mode="yaml"
                             noParsing
                             readOnly={!onChange}
                             height="100%"
-                            onChange={onChange ? onChange : () => {}}
+                            onChange={onChange ? (valuesYaml) => onChange(valuesYaml) : () => {}}
                         />
                     </div>
                 </div>
@@ -565,7 +563,7 @@ const ValuesDiffViewer = ({
             <h3>{chartName}</h3>
             <div className="readme-config-container" data-testid="check-diff-container">
                 {/* TODO: use code editor header */}
-                <div className="readme-config--header vertical-divider">
+                <div className="readme-config--header">
                     <h5 className="flex left">
                         <Select
                             rootClassName="values-select"
@@ -627,17 +625,17 @@ const ValuesDiffViewer = ({
                         <Pencil style={{ marginLeft: 'auto' }} />
                     </h5>
                 </div>
-                <div className="mw-none mh-0">
+                <div className="readme-config--body" style={{ gridTemplateColumns: '1fr' }}>
                     <CodeEditor
-                        originalValue={originalValuesYaml}
-                        modifiedValue={valuesYaml}
-                        mode={MODES.YAML}
+                        defaultValue={originalValuesYaml}
+                        value={valuesYaml}
+                        mode="yaml"
                         noParsing
                         loading={loading && !originalValuesYaml}
                         readOnly={!onChange}
                         height="100%"
                         diffView
-                        onModifiedValueChange={onChange ? (valuesYaml) => onChange(valuesYaml) : () => {}}
+                        onChange={onChange ? (valuesYaml) => onChange(valuesYaml) : () => {}}
                     />
                 </div>
             </div>
diff --git a/src/components/charts/list/list.scss b/src/components/charts/list/list.scss
index 662fe132da..d3989c94dc 100644
--- a/src/components/charts/list/list.scss
+++ b/src/components/charts/list/list.scss
@@ -310,11 +310,9 @@
 
 .advanced-config {
     width: 100%;
-    min-height: 100%;
     margin: 0 auto;
     padding: 24px 87px;
     background-color: var(--bg-primary);
-    display: flex;
 
     .half {
         width: 50%;
@@ -323,6 +321,10 @@
             margin-left: 20px;
         }
     }
+
+    .code-editor-container .react-monaco-editor-container {
+        min-height: 450px;
+    }
 }
 
 .advanced-config__form {
@@ -468,7 +470,6 @@
         grid-template-rows: 40px 1fr;
         border: 1px solid var(--N200);
         border-radius: 4px;
-        overflow: hidden;
     }
 
     .readme-config--header {
@@ -484,6 +485,10 @@
             font-size: 12px;
             font-weight: 600;
             color: var(--N700);
+
+            &:nth-child(2) {
+                border-left: 1px solid var(--N200);
+            }
         }
     }
 
diff --git a/src/components/charts/modal/DeployChart.scss b/src/components/charts/modal/DeployChart.scss
index 141f19d775..f155aada85 100644
--- a/src/components/charts/modal/DeployChart.scss
+++ b/src/components/charts/modal/DeployChart.scss
@@ -138,6 +138,12 @@
                 transition: all 0.2s ease-out;
             }
         }
+
+        .code-editor-container {
+            .react-monaco-editor-container {
+                min-height: 450px;
+            }
+        }
     }
 
     .cta-container {
@@ -155,6 +161,12 @@
     }
 }
 
+.code-editor-container {
+    .react-monaco-editor-container {
+        height: calc(100vh - 170px) !important;
+    }
+}
+
 .form__row {
     &.form__row--w-100 {
         width: 100%;
diff --git a/src/components/ciConfig/CIBuildConfigDiff.tsx b/src/components/ciConfig/CIBuildConfigDiff.tsx
index 567de4532e..b22201f08c 100644
--- a/src/components/ciConfig/CIBuildConfigDiff.tsx
+++ b/src/components/ciConfig/CIBuildConfigDiff.tsx
@@ -57,10 +57,10 @@ export const CIBuildConfigDiff = ({
                 {showInEditor ? (
                     <td colSpan={2}>
                         <CodeEditor
-                            originalValue={baseValue}
-                            modifiedValue={overridenValue}
+                            defaultValue={baseValue}
+                            value={overridenValue}
                             mode={MODES.DOCKERFILE}
-                            height={300}
+                            height="300px"
                             readOnly
                             diffView
                             noParsing
diff --git a/src/components/ciConfig/CIConfig.scss b/src/components/ciConfig/CIConfig.scss
index f2b7cd6cae..9526cfb034 100644
--- a/src/components/ciConfig/CIConfig.scss
+++ b/src/components/ciConfig/CIConfig.scss
@@ -132,6 +132,12 @@
             }
         }
     }
+
+    .create-dockerfile-option {
+        .code-editor__header {
+            background-color: var(--bg-primary);
+        }
+    }
 }
 
 .docker__dropdown {
diff --git a/src/components/ciConfig/CICreateDockerfileOption.tsx b/src/components/ciConfig/CICreateDockerfileOption.tsx
index 9594fe313e..762d7d052b 100644
--- a/src/components/ciConfig/CICreateDockerfileOption.tsx
+++ b/src/components/ciConfig/CICreateDockerfileOption.tsx
@@ -262,41 +262,48 @@ export default function CICreateDockerfileOption({
         templateData && selectedLanguage ? templateData[getTemplateKey(selectedLanguage, selectedFramework)] : null
     return (
         <>
-            <div className={configOverrideView ? 'mb-12' : 'mb-16'}>
-                <CodeEditor.Container>
-                    <CodeEditor
-                        loading={editorData?.fetching}
-                        value={editorValue || editorData?.data}
-                        mode={MODES.DOCKERFILE}
-                        noParsing
-                        height={300}
-                        readOnly={configOverrideView && !allowOverride}
-                        onChange={handleEditorValueChange}
-                    >
-                        <CodeEditor.Header>
-                            <div className="flex dc__content-space w-100 fs-12 fw-6 cn-7">
-                                <CreateDockerFileLanguageOptions
-                                    editorData={editorData}
-                                    editorValue={editorValue}
-                                    handleGitRepoChange={handleGitRepoChange}
-                                    materialOptions={sourceConfig.material}
-                                    selectedMaterial={selectedMaterial}
-                                    languageFrameworks={languageFrameworks}
-                                    selectedLanguage={selectedLanguage}
-                                    resetChanges={resetChanges}
-                                    currentMaterial={currentMaterial}
-                                    languages={languages}
-                                    selectedFramework={selectedFramework}
-                                    handleLanguageSelection={handleLanguageSelection}
-                                    handleFrameworkSelection={handleFrameworkSelection}
-                                    readOnly={configOverrideView && !allowOverride}
-                                />
+            <div
+                className={`create-dockerfile-option dc__border br-4 dc__overflow-hidden ${
+                    configOverrideView ? 'mb-12' : 'mb-16'
+                }`}
+            >
+                <CodeEditor
+                    loading={editorData?.fetching}
+                    customLoader={
+                        <div className="h-300">
+                            <Progressing pageLoader fullHeight />
+                        </div>
+                    }
+                    value={editorValue || editorData?.data}
+                    mode={MODES.DOCKERFILE}
+                    noParsing
+                    height="300px"
+                    readOnly={configOverrideView && !allowOverride}
+                    onChange={handleEditorValueChange}
+                >
+                    <CodeEditor.Header>
+                        <div className="flex dc__content-space w-100 fs-12 fw-6 cn-7">
+                            <CreateDockerFileLanguageOptions
+                                editorData={editorData}
+                                editorValue={editorValue}
+                                handleGitRepoChange={handleGitRepoChange}
+                                materialOptions={sourceConfig.material}
+                                selectedMaterial={selectedMaterial}
+                                languageFrameworks={languageFrameworks}
+                                selectedLanguage={selectedLanguage}
+                                resetChanges={resetChanges}
+                                currentMaterial={currentMaterial}
+                                languages={languages}
+                                selectedFramework={selectedFramework}
+                                handleLanguageSelection={handleLanguageSelection}
+                                handleFrameworkSelection={handleFrameworkSelection}
+                                readOnly={configOverrideView && !allowOverride}
+                            />
 
-                                {(!configOverrideView || allowOverride) && <ClipboardButton content={editorValue} />}
-                            </div>
-                        </CodeEditor.Header>
-                    </CodeEditor>
-                </CodeEditor.Container>
+                            {(!configOverrideView || allowOverride) && <ClipboardButton content={editorValue} />}
+                        </div>
+                    </CodeEditor.Header>
+                </CodeEditor>
             </div>
 
             {window._env_.ENABLE_BUILD_CONTEXT && (
diff --git a/src/components/ciPipeline/CIPipelineAdvanced.tsx b/src/components/ciPipeline/CIPipelineAdvanced.tsx
new file mode 100644
index 0000000000..9ca3bb3fc4
--- /dev/null
+++ b/src/components/ciPipeline/CIPipelineAdvanced.tsx
@@ -0,0 +1,554 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from 'react'
+import {
+    CustomInput,
+    RadioGroup,
+    RadioGroupItem,
+    Toggle,
+    CodeEditor,
+    TriggerType,
+} from '@devtron-labs/devtron-fe-common-lib'
+import { SourceTypeMap } from '../../config'
+import { Trash, Page } from '../common'
+import { ReactComponent as Docker } from '../../assets/icons/misc/docker.svg'
+import { ReactComponent as Add } from '../../assets/icons/ic-add.svg'
+import { ReactComponent as PreBuild } from '../../assets/icons/ic-cd-stage.svg'
+import dropdown from '../../assets/icons/ic-chevron-down.svg'
+import trash from '../../assets/icons/misc/delete.svg'
+import { ReactComponent as InfoIcon } from '../../assets/icons/appstatus/ic-appstatus-failed.svg'
+import { SourceMaterials } from './SourceMaterials'
+import { CIPipelineState, WebhookCIProps } from './types'
+import { ReactComponent as Info } from '../../assets/icons/appstatus/info-filled.svg'
+
+interface CIPipelineAdvancedProps extends CIPipelineState {
+    copyToClipboard: (text: string) => void
+    validationRules: any
+    closeCIDeleteModal: () => void
+    deletePipeline: () => void
+    handlePreBuild: () => void
+    handlePostBuild: () => void
+    handleDockerArgs: () => void
+    addEmptyStage: (stageType: 'beforeDockerBuildScripts' | 'afterDockerBuildScripts') => void
+    toggleCollapse: (stageId, stageIndex: number, key: 'beforeDockerBuildScripts' | 'afterDockerBuildScripts') => void
+    deleteStage: (
+        stageId: number,
+        key: 'beforeDockerBuildScripts' | 'afterDockerBuildScripts',
+        stageIndex: number,
+    ) => void
+    handleChange: (
+        event,
+        stageId: number,
+        stageType: 'beforeDockerBuildScripts' | 'afterDockerBuildScripts',
+        stageIndex: number,
+        key: 'name' | 'outputLocation' | 'script',
+    ) => void
+    discardChanges: (
+        stageId: number,
+        key: 'beforeDockerBuildScripts' | 'afterDockerBuildScripts',
+        stageIndex: number,
+    ) => void
+    handleTriggerChange: (event) => void
+    handleDocker: () => void
+    addDockerArg: () => void
+    handleDockerArgChange: (event, index: number, key: 'key' | 'value') => void
+    removeDockerArgs: (index: number) => void
+    handleScanToggle: () => void
+    handleSourceChange: (event, gitMaterialId: number) => void
+    handlePipelineName: (event) => void
+    selectSourceType: (event, gitMaterialId: number) => void
+    getSelectedWebhookEvent: (material: any) => any
+    addWebhookCondition: () => void
+    deleteWebhookCondition: (index: number) => void
+    onWebhookConditionSelectorChange: (index: number, selectorId: number) => void
+    onWebhookConditionSelectorValueChange: (index: number, value: string) => void
+}
+
+export class CIPipelineAdvanced extends Component<CIPipelineAdvancedProps, {}> {
+    renderAddStage(key: 'beforeDockerBuildScripts' | 'afterDockerBuildScripts') {
+        return (
+            <div
+                className="white-card flex left cursor mt-20 mb-16 dashed"
+                onClick={() => {
+                    this.props.addEmptyStage(key)
+                }}
+            >
+                <Add className="icon-dim-24 fcb-5 dc__vertical-align-middle mr-16" />
+                <span className="dc__artifact-add">Add Stage</span>
+            </div>
+        )
+    }
+
+    renderBuildReportInfo = () => {
+        return (
+            <div className="flex left mt-4 fw-4">
+                <Info className="icon-dim-20" />
+                <div className="cn-5 ml-4">
+                    Directory in which above script is writing/producing output files(eg. test report, zip files etc)
+                </div>
+            </div>
+        )
+    }
+
+    renderStages(key: 'beforeDockerBuildScripts' | 'afterDockerBuildScripts') {
+        let description
+        let title
+        if (key == 'beforeDockerBuildScripts') {
+            title = 'Pre-build Stages'
+            description = ' These stages are run in sequence before the container image is built'
+        } else {
+            title = 'Post-build Stages'
+            description = ' These stages are run in sequence after the container image is built'
+        }
+        const showBuild = key === 'beforeDockerBuildScripts' ? this.props.showPreBuild : this.props.showPostBuild
+
+        return (
+            <>
+                <div
+                    className="flex left cursor"
+                    onClick={(event) => {
+                        if (key === 'beforeDockerBuildScripts') {
+                            this.props.handlePreBuild()
+                        } else {
+                            this.props.handlePostBuild()
+                        }
+                    }}
+                >
+                    <div className="sqr-44">
+                        <PreBuild className="icon-dim-24" />
+                    </div>
+                    <div>
+                        <div className="ci-stage__title">{title}</div>
+                        <div className="ci-stage__description">{description}</div>
+                    </div>
+                    {key === 'beforeDockerBuildScripts' ? (
+                        <img
+                            className="icon-dim-32 ml-auto"
+                            src={dropdown}
+                            alt="dropDown"
+                            style={{ transform: this.props.showPreBuild ? 'rotate(180deg)' : 'rotate(0)' }}
+                        />
+                    ) : (
+                        <img
+                            className="icon-dim-32 ml-auto"
+                            src={dropdown}
+                            alt="dropDown"
+                            style={{ transform: this.props.showPostBuild ? 'rotate(180deg)' : 'rotate(0)' }}
+                        />
+                    )}
+                </div>
+                {this.props.form[key].map((stage, index) => {
+                    if (showBuild && stage.isCollapsed) {
+                        return (
+                            <div
+                                key={`${key}-${index}-collapsed`}
+                                className="white-card white-card--add-new-item mt-16"
+                                onClick={(event) => {
+                                    event.stopPropagation()
+                                    this.props.toggleCollapse(stage.id, index, key)
+                                }}
+                            >
+                                <Page className="ci-file-icon" />
+                                <div className="ci-stage-name">{stage.name}</div>
+                                <img src={dropdown} className="collapsed__icon" alt="collapsed" />
+                            </div>
+                        )
+                    }
+                    if (key === 'beforeDockerBuildScripts' && this.props.showPreBuild) {
+                        return (
+                            <div key={`${key}-${index}`} className="white-card mt-20 mb-16">
+                                <div className="white-card__header  flex flex-justify">
+                                    {stage.id ? 'Edit Stage' : 'Add Stage'}
+                                    {stage.id > 0 && (
+                                        <Trash
+                                            className="pointer"
+                                            onClick={(e) => this.props.deleteStage(stage.id, key, index)}
+                                        />
+                                    )}
+                                </div>
+                                <label className="form__row">
+                                    <CustomInput
+                                        name="stage-name"
+                                        label="Stage Name"
+                                        placeholder="Enter stage name"
+                                        value={stage.name}
+                                        onChange={(event) =>
+                                            this.props.handleChange(event, stage.id, key, index, 'name')
+                                        }
+                                        isRequiredField
+                                    />
+                                </label>
+                                <label className="form__row">
+                                    <span className="form__label dc__required-field">Script to execute</span>
+                                    <div className="script-container">
+                                        <CodeEditor
+                                            value={stage.script}
+                                            mode="shell"
+                                            onChange={(value) =>
+                                                this.props.handleChange(
+                                                    { target: { value } },
+                                                    stage.id,
+                                                    key,
+                                                    index,
+                                                    'script',
+                                                )
+                                            }
+                                            shebang="#!/bin/sh"
+                                            inline
+                                            height={300}
+                                        />
+                                    </div>
+                                </label>
+                                <label className="form__row">
+                                    <CustomInput
+                                        name="report-path"
+                                        label="Report directory path"
+                                        placeholder="Enter report directory path"
+                                        value={stage.outputLocation}
+                                        onChange={(event) =>
+                                            this.props.handleChange(event, stage.id, key, index, 'outputLocation')
+                                        }
+                                    />
+                                    {this.renderBuildReportInfo()}
+                                </label>
+                                <div className="form__buttons">
+                                    <button
+                                        type="button"
+                                        className="cta tertiary mr-16"
+                                        onClick={(event) => this.props.discardChanges(stage.id, key, index)}
+                                    >
+                                        Cancel
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className="cta ghosted"
+                                        onClick={(event) => this.props.toggleCollapse(stage.id, index, key)}
+                                    >
+                                        Done
+                                    </button>
+                                </div>
+                            </div>
+                        )
+                    }
+                    if (key === 'afterDockerBuildScripts' && this.props.showPostBuild) {
+                        return (
+                            <div key={`${key}-${index}`} className="white-card mt-20 mb-16">
+                                <div className="white-card__header flex flex-justify">
+                                    {stage.id ? 'Edit Stage' : 'Add Stage'}
+                                    {stage.id > 0 && (
+                                        <Trash
+                                            className="pointer"
+                                            onClick={(e) => this.props.deleteStage(stage.id, key, index)}
+                                        />
+                                    )}
+                                </div>
+                                <label className="form__row">
+                                    <CustomInput
+                                        name="stage-name"
+                                        label="Stage Name"
+                                        placeholder="Enter stage name"
+                                        value={stage.name}
+                                        onChange={(event) =>
+                                            this.props.handleChange(event, stage.id, key, index, 'name')
+                                        }
+                                        isRequiredField
+                                    />
+                                </label>
+                                <label className="form__row">
+                                    <span className="form__label dc__required-field">Script to execute</span>
+                                    <div className="script-container">
+                                        <CodeEditor
+                                            value={stage.script}
+                                            mode="shell"
+                                            onChange={(value) =>
+                                                this.props.handleChange(
+                                                    { target: { value } },
+                                                    stage.id,
+                                                    key,
+                                                    index,
+                                                    'script',
+                                                )
+                                            }
+                                            shebang="#!/bin/sh"
+                                            inline
+                                            height={300}
+                                        />
+                                    </div>
+                                </label>
+                                <label className="form__row">
+                                    <CustomInput
+                                        name="report-path"
+                                        label="Report directory path"
+                                        placeholder="Enter directory path"
+                                        value={stage.outputLocation}
+                                        onChange={(event) =>
+                                            this.props.handleChange(event, stage.id, key, index, 'outputLocation')
+                                        }
+                                    />
+                                    {this.renderBuildReportInfo()}
+                                </label>
+                                <div className="form__buttons">
+                                    <button
+                                        type="button"
+                                        className="cta tertiary mr-16"
+                                        onClick={(event) => this.props.discardChanges(stage.id, key, index)}
+                                    >
+                                        Cancel
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className="cta ghosted"
+                                        onClick={(event) => this.props.toggleCollapse(stage.id, index, key)}
+                                    >
+                                        Done
+                                    </button>
+                                </div>
+                            </div>
+                        )
+                    }
+                })}
+                {key === 'beforeDockerBuildScripts' && this.props.showPreBuild ? this.renderAddStage(key) : ''}
+                {key === 'afterDockerBuildScripts' && this.props.showPostBuild ? this.renderAddStage(key) : ''}
+            </>
+        )
+    }
+
+    renderTriggerType() {
+        return (
+            <div className="form__row">
+                <label className="form__label form__label--sentence dc__required-field">
+                    When do you want the pipeline to execute?
+                </label>
+                <RadioGroup
+                    value={this.props.form.triggerType}
+                    name="trigger-type"
+                    onChange={this.props.handleTriggerChange}
+                >
+                    <RadioGroupItem value={TriggerType.Auto}> Automatic </RadioGroupItem>
+                    <RadioGroupItem value={TriggerType.Manual}> Manual </RadioGroupItem>
+                </RadioGroup>
+            </div>
+        )
+    }
+
+    renderDockerArgs() {
+        return (
+            <>
+                <div className=" flex left cursor" onClick={() => this.props.handleDocker()}>
+                    <div className="sqr-44">
+                        <Docker />
+                    </div>
+                    <div>
+                        <div className="ci-stage__title">Docker build</div>
+                        <div className="ci-stage__description ">
+                            Override docker build configurations for this pipeline.
+                        </div>
+                    </div>
+                    <img
+                        className="icon-dim-32 ml-auto"
+                        src={dropdown}
+                        alt="dropDown"
+                        style={{ transform: this.props.showDocker ? 'rotate(180deg)' : 'rotate(0)' }}
+                    />
+                </div>
+                {this.props.showDocker ? (
+                    <div className="docker-build-args mt-20">
+                        <div
+                            className="docker-build-args__header"
+                            onClick={(event) => {
+                                this.props.handleDockerArgs()
+                            }}
+                        >
+                            <span className="docker-build-args__text">Docker Arguments Override</span>
+                            <img
+                                src={dropdown}
+                                alt="dropDown"
+                                style={{ transform: this.props.showDockerArgs ? 'rotate(180deg)' : 'rotate(0)' }}
+                            />
+                        </div>
+                        {this.props.showDockerArgs ? (
+                            <div className="docker-build-args__wrapper">
+                                {this.props.form.args.map((arg, index) => {
+                                    return (
+                                        <div
+                                            key={index}
+                                            className="form__key-value-inputs form__key-value-inputs--docker-build docker-build-args__body"
+                                        >
+                                            <img
+                                                src={trash}
+                                                onClick={(event) => {
+                                                    this.props.removeDockerArgs(index)
+                                                }}
+                                            />
+                                            <div className="form__field">
+                                                <CustomInput
+                                                    name="key"
+                                                    label="Key"
+                                                    placeholder="Name"
+                                                    value={arg.key}
+                                                    onChange={(event) => {
+                                                        this.props.handleDockerArgChange(event, index, 'key')
+                                                    }}
+                                                />
+                                            </div>
+                                            <div className="form__field">
+                                                <label className="form__label">Value</label>
+                                                <textarea
+                                                    value={arg.value}
+                                                    onChange={(event) => {
+                                                        this.props.handleDockerArgChange(event, index, 'value')
+                                                    }}
+                                                    placeholder="Enter Your Text here"
+                                                />
+                                            </div>
+                                        </div>
+                                    )
+                                })}
+                                <button
+                                    type="button"
+                                    onClick={(event) => {
+                                        this.props.addDockerArg()
+                                    }}
+                                    className="form__add-parameter form__add-parameter--docker-build"
+                                >
+                                    <span className="fa fa-plus mr-5" />
+                                    Add parameter
+                                </button>
+                            </div>
+                        ) : null}
+                    </div>
+                ) : null}
+            </>
+        )
+    }
+
+    renderMaterials() {
+        const _webhookData: WebhookCIProps = {
+            webhookConditionList: this.props.form.webhookConditionList,
+            gitHost: this.props.form.gitHost,
+            getSelectedWebhookEvent: this.props.getSelectedWebhookEvent,
+            copyToClipboard: this.props.copyToClipboard,
+            addWebhookCondition: this.props.addWebhookCondition,
+            deleteWebhookCondition: this.props.deleteWebhookCondition,
+            onWebhookConditionSelectorChange: this.props.onWebhookConditionSelectorChange,
+            onWebhookConditionSelectorValueChange: this.props.onWebhookConditionSelectorValueChange,
+        }
+
+        return (
+            <SourceMaterials
+                showError={this.props.showError}
+                validationRules={this.props.validationRules}
+                materials={this.props.form.materials}
+                selectSourceType={this.props.selectSourceType}
+                handleSourceChange={this.props.handleSourceChange}
+                includeWebhookEvents
+                ciPipelineSourceTypeOptions={this.props.form.ciPipelineSourceTypeOptions}
+                webhookData={_webhookData}
+                canEditPipeline={this.props.form.ciPipelineEditable}
+            />
+        )
+    }
+
+    renderWebhookWarning() {
+        return (
+            <div
+                className="bcr-1 cn-9 pl-20 pr-20 pt-10 pb-10"
+                style={{ position: 'fixed', zIndex: 2, minWidth: '799px', borderBottom: '1px solid #fcbcbc' }}
+            >
+                <div className="flex left">
+                    <InfoIcon className="icon-dim-20 mr-8" />
+                    Editing for this webhook CI pipeline is disabled as more than one git repository is connected to
+                    this application.
+                </div>
+                <div className="ml-28">You can continue running the pipeline based on existing configurations.</div>
+                <div className="ml-28">
+                    NOTE : Webhook based CI pipeline is not supported for multiple git repos.&nbsp;
+                    <a
+                        className="dc__link ml-4 mr-4"
+                        href="https://github.com/devtron-labs/devtron/issues"
+                        target="_blank"
+                        rel="noreferrer noopener"
+                    >
+                        Create a github issue
+                    </a>
+                    for feature request.
+                </div>
+            </div>
+        )
+    }
+
+    render() {
+        const errorObj = this.props.validationRules.name(this.props.form.name)
+
+        return (
+            <>
+                {!this.props.form.ciPipelineEditable &&
+                    this.props.form.materials.some((_material) => _material.type == SourceTypeMap.WEBHOOK) &&
+                    this.renderWebhookWarning()}
+                <div
+                    className={`pl-20 pr-20 pb-20 ${
+                        !this.props.form.ciPipelineEditable &&
+                        this.props.form.materials.some((_material) => _material.type == SourceTypeMap.WEBHOOK)
+                            ? 'webhook-warning-padding'
+                            : 'pt-20'
+                    }`}
+                >
+                    <label className="form__row">
+                        <CustomInput
+                            name="pipeline-name"
+                            label="Pipeline Name"
+                            disabled={!!this.props.ciPipeline.id}
+                            placeholder="e.g. my-first-pipeline"
+                            value={this.props.form.name}
+                            onChange={this.props.handlePipelineName}
+                            isRequiredField
+                            error={
+                                this.props.showError &&
+                                !errorObj.isValid &&
+                                this.props.validationRules.name(this.props.form.name).message
+                            }
+                        />
+                    </label>
+                    {this.renderTriggerType()}
+                    {this.renderMaterials()}
+                    <hr className="divider" />
+                    {this.renderStages('beforeDockerBuildScripts')}
+                    <hr className="divider" />
+                    {this.renderDockerArgs()}
+                    <hr className="divider" />
+                    {this.renderStages('afterDockerBuildScripts')}
+                    <hr className="divider" />
+                    <div className="white-card flexbox flex-justify mb-20">
+                        <div>
+                            <p className="ci-stage__title">Scan for vulnerabilities</p>
+                            <p className="ci-stage__description mb-0">
+                                Perform security scan after container image is built.
+                            </p>
+                        </div>
+                        <div className="" style={{ width: '32px', height: '20px' }}>
+                            <Toggle
+                                disabled={window._env_.FORCE_SECURITY_SCANNING && this.props.form.scanEnabled}
+                                selected={this.props.form.scanEnabled}
+                                onSelect={this.props.handleScanToggle}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </>
+        )
+    }
+}
diff --git a/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx b/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx
index dfecdf186e..30bc519516 100644
--- a/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx
+++ b/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx
@@ -691,7 +691,7 @@ export const WebhookDetailsModal = ({ close }: WebhookDetailType) => {
                 <CodeEditor
                     value={modifiedSampleString}
                     onChange={changePayload}
-                    height={300}
+                    height="300px"
                     mode={MODES.JSON}
                     noParsing
                 />
diff --git a/src/components/ciPipeline/ciPipeline.scss b/src/components/ciPipeline/ciPipeline.scss
index c44adc0ff0..a53eb720e6 100644
--- a/src/components/ciPipeline/ciPipeline.scss
+++ b/src/components/ciPipeline/ciPipeline.scss
@@ -92,6 +92,35 @@
     border-radius: 0 0 4px 4px;
 }
 
+.docker-build-args {
+    border: solid 1px var(--N200);
+    border-radius: 4px;
+    margin-bottom: 24px;
+}
+
+.docker-build-args__header {
+    padding: 12px 16px;
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+}
+
+.docker-build-args__wrapper {
+    border-top: solid 1px var(--N200);
+}
+
+.docker-build-args__text {
+    line-height: 24px;
+}
+
+.form__key-value-inputs--docker-build {
+    margin: 16px;
+}
+
+.form__add-parameter--docker-build {
+    margin: 16px;
+}
+
 .ext-ci-config {
     border-radius: 8px;
     border: solid 1px var(--N200);
@@ -121,11 +150,48 @@
     margin-bottom: 24px;
 }
 
+.ci-stage__title {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.25;
+    letter-spacing: normal;
+    color: var(--N900);
+    margin-bottom: 4px;
+}
+
+.ci-stage__description {
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 1.67;
+    letter-spacing: normal;
+    color: var(--N700);
+}
+
 .ci-file-icon {
     transform: rotate(+90deg);
     margin-right: 10px;
 }
 
+.script-container {
+    border: 1px solid var(--N200);
+    padding: 8px 0;
+    border-radius: 4px;
+    background: var(--bg-secondary);
+
+    &.no-padding-script-container {
+        padding: 0px;
+    }
+
+    .react-monaco-editor-container {
+        min-height: 300px;
+    }
+
+    .code-editor__shebang {
+        color: var(--R500);
+        opacity: 1;
+    }
+}
+
 .configure-ci-webhook {
     display: grid;
     grid-template-columns: 32px auto;
diff --git a/src/components/cluster/ClusterCodeEditor.tsx b/src/components/cluster/ClusterCodeEditor.tsx
new file mode 100644
index 0000000000..d9551ba923
--- /dev/null
+++ b/src/components/cluster/ClusterCodeEditor.tsx
@@ -0,0 +1,82 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState, useRef } from 'react'
+import YAML from 'yaml'
+import { UPLOAD_STATE } from '@Pages/GlobalConfigurations/DeploymentCharts/types'
+import { MODES } from '../../config/constants'
+import { CodeEditor } from '@devtron-labs/devtron-fe-common-lib'
+
+export default function ClusterCodeEditor() {
+    const inputFileRef = useRef(null)
+    const [saveYamlData, setSaveYamlData] = useState<string>('')
+    const [uploadState, setUploadState] = useState<string>(UPLOAD_STATE.UPLOAD)
+
+    const onChangeEditorValue = (val: string) => {
+        setSaveYamlData(val)
+    }
+
+    const onFileChange = (e): void => {
+        setUploadState(UPLOAD_STATE.UPLOADING)
+        const file = e.target.files[0]
+        const reader = new FileReader()
+        reader.onload = () => {
+            try {
+                YAML.parseDocument(reader.result.toString())
+                setSaveYamlData(reader.result.toString())
+            } catch (e) {}
+        }
+        reader.readAsText(file)
+        setUploadState(UPLOAD_STATE.SUCCESS)
+    }
+
+    const handleBrowseFileClick = (): void => {
+        inputFileRef.current.click()
+    }
+
+    return (
+        <div className="code-editor-container">
+            <CodeEditor
+                value={saveYamlData}
+                height={514}
+                diffView={false}
+                onChange={onChangeEditorValue}
+                mode={MODES.YAML}
+            >
+                <CodeEditor.Header>
+                    <div className="user-list__subtitle flex p-8">
+                        <span className="flex left">Paste the contents of kubeconfig file here</span>
+                        <div className="dc__link ml-auto cursor">
+                            {uploadState !== UPLOAD_STATE.UPLOADING && (
+                                <div onClick={handleBrowseFileClick} className="flex">
+                                    Browse file...
+                                </div>
+                            )}
+                        </div>
+                        <input
+                            type="file"
+                            ref={inputFileRef}
+                            onChange={onFileChange}
+                            accept=".yaml"
+                            style={{ display: 'none' }}
+                        />
+                    </div>
+                    <CodeEditor.ValidationError />
+                </CodeEditor.Header>
+            </CodeEditor>
+        </div>
+    )
+}
diff --git a/src/components/cluster/ClusterForm.tsx b/src/components/cluster/ClusterForm.tsx
index acc227813f..43cdfe1548 100644
--- a/src/components/cluster/ClusterForm.tsx
+++ b/src/components/cluster/ClusterForm.tsx
@@ -747,8 +747,8 @@ export default function ClusterForm({
                 </RadioGroup>
                 {id !== DEFAULT_CLUSTER_ID && RemoteConnectionRadio && (
                     <>
-                        <div className="divider divider--n1 mt-20 mb-20" />
-                        <div className="dc__position-rel dc__hover">
+                        <hr />
+                        <div className="dc__position-rel dc__hover mb-20">
                             <span className="form__input-header pb-20">
                                 How do you want Devtron to connect with this cluster?
                             </span>
@@ -768,7 +768,7 @@ export default function ClusterForm({
                 )}
                 {id !== DEFAULT_CLUSTER_ID && (
                     <>
-                        <div className="divider divider--n1 mt-20 mb-20" />
+                        <hr />
                         <div className="dc__position-rel flex left dc__hover mb-20">
                             <Checkbox
                                 isChecked={isTlsConnection}
@@ -781,7 +781,7 @@ export default function ClusterForm({
                                 </div>
                             </Checkbox>
                         </div>
-                        {!isTlsConnection && <div className="divider divider--n1" />}
+                        {!isTlsConnection && <hr />}
                         {isTlsConnection && (
                             <>
                                 <div className="form__row ml-24">
@@ -835,7 +835,7 @@ export default function ClusterForm({
                                         error={state.tlsClientCert.error}
                                     />
                                 </div>
-                                <div className="divider divider--n1" />
+                                <hr />
                             </>
                         )}
                     </>
@@ -938,10 +938,10 @@ export default function ClusterForm({
 
     const codeEditor = () => {
         return (
-            <CodeEditor.Container flexExpand>
+            <div className="code-editor-container">
                 <CodeEditor
                     value={saveYamlData}
-                    height="fitToParent"
+                    height="calc(100vh - 236px)"
                     diffView={false}
                     onChange={onChangeEditorValue}
                     mode={MODES.YAML}
@@ -972,7 +972,7 @@ export default function ClusterForm({
                     </CodeEditor.Header>
                     {hasValidationError && <CodeEditor.ErrorBar text={errorText} />}
                 </CodeEditor>
-            </CodeEditor.Container>
+            </div>
         )
     }
 
@@ -1063,7 +1063,7 @@ export default function ClusterForm({
                         )}
                     </div>
                 </div>
-                <div className="dc__border-top flex right py-12 px-20">
+                <div className="w-100 dc__border-top flex right pb-12 pt-12 pr-20 pl-20 dc__position-fixed dc__position-abs dc__bottom-0">
                     <button
                         className="dc__edit_button cb-5 h-36 lh-36"
                         type="button"
@@ -1483,9 +1483,9 @@ export default function ClusterForm({
     return getClusterVar ? (
         displayClusterDetails()
     ) : (
-        <div className="cluster-form dc__position-rel h-100 bg__primary flexbox-col">
+        <div className="cluster-form dc__position-rel h-100 bg__primary" style={{ padding: 'auto 0' }}>
             <AddClusterHeader />
-            <div className="flex-grow-1 flexbox-col dc__overflow-auto">
+            <div style={{ overflow: 'auto', height: 'calc(100vh - 110px)' }}>
                 {VirtualClusterSelectionTab && (
                     <VirtualClusterSelectionTab
                         id={id}
@@ -1498,7 +1498,7 @@ export default function ClusterForm({
                 )}
                 {!isVirtual && (
                     <>
-                        <div className="p-20 flex-grow-1 flexbox-col">
+                        <div className="p-20">
                             {!id && (
                                 <div className="form__row clone-apps dc__inline-block pd-0 pt-0 pb-12">
                                     <RadioGroup
@@ -1523,20 +1523,77 @@ export default function ClusterForm({
                             {isKubeConfigFile ? codeEditor() : renderUrlAndBearerToken()}
                         </div>
 
-                        <DeleteConfirmationModal
-                            title={cluster_name}
-                            component={DeleteComponentsName.Cluster}
-                            subtitle={DC_DELETE_SUBTITLES.DELETE_ENVIRONMENT_SUBTITLE}
-                            onDelete={onDelete}
-                            showConfirmationModal={confirmation}
-                            closeConfirmationModal={hideConfirmationModal}
-                            errorCodeToShowCannotDeleteDialog={ERROR_STATUS_CODE.INTERNAL_SERVER_ERROR}
-                        />
+                        {!isKubeConfigFile && (
+                            <div className="w-100 dc__border-top flex right pb-12 pt-12 pr-20 pl-20 dc__position-fixed dc__position-abs dc__bottom-0">
+                                {id && (
+                                    <button
+                                        data-testid="delete_cluster"
+                                        style={{ margin: 'auto', marginLeft: 20 }}
+                                        className="flex cta delete scr-5 h-36 lh-36"
+                                        type="button"
+                                        onClick={() => toggleConfirmation(true)}
+                                        disabled={isDefaultCluster()}
+                                    >
+                                        {deleting ? <Progressing /> : 'Delete'}
+                                    </button>
+                                )}
+                                <button
+                                    data-testid="cancel_button"
+                                    className="cta cancel h-36 lh-36"
+                                    type="button"
+                                    onClick={handleCloseButton}
+                                >
+                                    Cancel
+                                </button>
+                                <button
+                                    data-testid="save_cluster_after_entering_cluster_details"
+                                    className="cta ml-12 h-36 lh-36"
+                                    onClick={handleOnSubmit}
+                                >
+                                    {id ? 'Update cluster' : 'Save cluster'}
+                                </button>
+                            </div>
+                        )}
+                        {isKubeConfigFile && (
+                            <div className="w-100 dc__border-top flex right pb-12 pt-12 pr-20 pl-20 dc__position-fixed dc__position-abs dc__bottom-0">
+                                <button
+                                    data-testid="cancel_kubeconfig_button"
+                                    className="cta cancel h-36 lh-36"
+                                    type="button"
+                                    onClick={handleCloseButton}
+                                >
+                                    Cancel
+                                </button>
+
+                                <button
+                                    className="cta ml-12 h-36 lh-36"
+                                    type="button"
+                                    onClick={handleGetClustersClick}
+                                    disabled={!saveYamlData}
+                                    data-testId="get_cluster_button"
+                                >
+                                    <div className="flex">
+                                        Get cluster
+                                        <ForwardArrow className={`ml-5 ${!saveYamlData ? 'scn-4' : ''}`} />
+                                    </div>
+                                </button>
+                            </div>
+                        )}
+                        {confirmation && (
+                            <DeleteComponent
+                                setDeleting={setDeleting}
+                                deleteComponent={deleteCluster}
+                                payload={payload}
+                                title={cluster_name}
+                                toggleConfirmation={toggleConfirmation}
+                                component={DeleteComponentsName.Cluster}
+                                confirmationDialogDescription={DC_CLUSTER_CONFIRMATION_MESSAGE}
+                                reload={reload}
+                            />
+                        )}
                     </>
                 )}
             </div>
-
-            {renderNonVirtualFooter()}
         </div>
     )
 }
diff --git a/src/components/common/Description/GenericDescription.scss b/src/components/common/Description/GenericDescription.scss
index 6ace8be793..815e2acb3e 100644
--- a/src/components/common/Description/GenericDescription.scss
+++ b/src/components/common/Description/GenericDescription.scss
@@ -139,6 +139,11 @@
     flex-shrink: 0;
 }
 
+.cluster-manifest-header {
+    display: grid;
+    grid-template-columns: 1fr 1fr 30px;
+}
+
 .cluster__description-footer {
     border-radius: 0 0 3px 3px;
     border: 1px solid var(--N200);
diff --git a/src/components/common/navigation/NavigationRoutes.tsx b/src/components/common/navigation/NavigationRoutes.tsx
index af1440cb18..b1a8cd5e5e 100644
--- a/src/components/common/navigation/NavigationRoutes.tsx
+++ b/src/components/common/navigation/NavigationRoutes.tsx
@@ -62,8 +62,22 @@ import { LOGIN_COUNT, MAX_LOGIN_COUNT } from '../../onboardingGuide/onboarding.u
 import { HelmAppListResponse } from '../../app/list-new/AppListType'
 import { ExternalFluxAppDetailsRoute } from '../../../Pages/App/Details/ExternalFlux'
 
+// Monaco Editor worker dependency
+import 'monaco-editor'
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import YamlWorker from '../../../yaml.worker.js?worker'
 import { TAB_DATA_LOCAL_STORAGE_KEY } from '../DynamicTabs/constants'
 
+// Monaco Editor worker initialization
+self.MonacoEnvironment = {
+    getWorker(_, label) {
+        if (label === MODES.YAML) {
+            return new YamlWorker()
+        }
+        return new editorWorker()
+    },
+}
+
 const Charts = lazy(() => import('../../charts/Charts'))
 const ExternalApps = lazy(() => import('../../external-apps/ExternalApps'))
 const ExternalArgoApps = lazy(() => import('../../externalArgoApps/ExternalArgoApp'))
diff --git a/src/components/notifications/WebhookConfigModal.tsx b/src/components/notifications/WebhookConfigModal.tsx
index f42e0b2c47..c4092803f1 100644
--- a/src/components/notifications/WebhookConfigModal.tsx
+++ b/src/components/notifications/WebhookConfigModal.tsx
@@ -21,7 +21,6 @@ import {
     CodeEditor,
     ToastVariantType,
     ToastManager,
-    MODES,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useHistory } from 'react-router-dom'
 import { ReactComponent as ErrorIcon } from '@Icons/ic-warning.svg'
@@ -245,14 +244,15 @@ export const WebhookConfigModal = ({
 
                 <div className="flexbox-col dc__gap-6">
                     <div className="fs-13 cn-7 lh-20 dc__required-field">Data to be shared through webhook</div>
-                    <CodeEditor.Container>
+                    <div className="en-2 bw-1 br-4 dc__overflow-hidden">
                         <CodeEditor
                             value={form.payload}
-                            mode={MODES.JSON}
+                            mode="json"
                             onChange={handleIncomingPayloadChange}
-                            height="100%"
+                            inline
+                            height={150}
                         />
-                    </CodeEditor.Container>
+                    </div>
                     {isFormValid[ConfigurationFieldKeys.PAYLOAD].message && (
                         <div className="flex left dc__gap-4 cr-5 fs-11 lh-16 fw-4">
                             <ErrorIcon className="icon-dim-16 p-1 form__icon--error dc__no-shrink dc__align-self-start" />
diff --git a/src/components/scopedVariables/SavedVariablesContent.tsx b/src/components/scopedVariables/SavedVariablesContent.tsx
index 7d9c70dd91..255b97c8ab 100644
--- a/src/components/scopedVariables/SavedVariablesContent.tsx
+++ b/src/components/scopedVariables/SavedVariablesContent.tsx
@@ -21,7 +21,6 @@ import {
     PopupMenu,
     ScopedVariablesFileViewType,
     SavedVariablesViewParamsType,
-    MODES,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import Descriptor from './Descriptor'
@@ -149,7 +148,7 @@ const SavedVariablesContent = ({
                     </PopupMenu>
                 </div>
 
-                <CodeEditor value={scopedVariablesYAML} mode={MODES.YAML} height="fitToParent" readOnly noParsing />
+                <CodeEditor value={scopedVariablesYAML} mode="yaml" height="100%" readOnly noParsing />
             </div>
         </div>
     )
diff --git a/src/components/scopedVariables/ScopedVariablesEditor.tsx b/src/components/scopedVariables/ScopedVariablesEditor.tsx
index 11ae9a912b..00803aad91 100644
--- a/src/components/scopedVariables/ScopedVariablesEditor.tsx
+++ b/src/components/scopedVariables/ScopedVariablesEditor.tsx
@@ -16,15 +16,7 @@
 
 import { useState } from 'react'
 import Tippy from '@tippyjs/react'
-import {
-    InfoColourBar,
-    ServerErrors,
-    ButtonWithLoader,
-    CodeEditor,
-    ToastManager,
-    ToastVariantType,
-    MODES,
-} from '@devtron-labs/devtron-fe-common-lib'
+import { InfoColourBar, ServerErrors, ButtonWithLoader, CodeEditor, ToastManager, ToastVariantType } from '@devtron-labs/devtron-fe-common-lib'
 import Descriptor from './Descriptor'
 import { parseYAMLStringToObj, parseIntoYAMLString, sortVariables } from './utils'
 import { postScopedVariables, getScopedVariablesJSON } from './service'
@@ -197,39 +189,33 @@ export default function ScopedVariablesEditor({
                         />
                     )}
 
-                    <CodeEditor
-                        mode={MODES.YAML}
-                        noParsing
-                        height="fitToParent"
-                        {...(showSaveView
-                            ? {
-                                  diffView: true,
-                                  originalValue: savedScopedVariables || '',
-                                  modifiedValue: editorData,
-                                  onModifiedValueChange: handleEditorChange,
-                              }
-                            : {
-                                  diffView: false,
-                                  value: editorData,
-                                  onChange: handleEditorChange,
-                                  validatorSchema: jsonSchema,
-                              })}
-                    >
-                        {showSaveView && (
-                            <CodeEditor.Header
-                                hideDefaultSplitHeader
-                                className="bg__primary w-100 h-32 dc__grid-half vertical-divider"
+                    {showSaveView && (
+                        <div className="bcn-1 flexbox dc__content-space w-100 h-32 dc__align-items-center">
+                            <div
+                                className="dc__border-right fs-12 fw-6 cn-7 pt-8 pb-8 pl-12 pr-12 flexbox"
+                                style={{ width: '48.5%' }}
                             >
-                                <div className="fs-12 fw-6 cn-7 pt-8 pb-8 pl-12 pr-12 flexbox">Last Saved File</div>
-                                <div className="fs-12 fw-6 cn-7 flex-grow-1 dc__gap-4 flexbox pt-8 pb-8 pl-12 pr-12">
-                                    <div className="flex">
-                                        <ICPencil className="icon-dim-16" />
-                                    </div>
-                                    Edit File
+                                Last Saved File
+                            </div>
+                            <div className="fs-12 fw-6 cn-7 flex-grow-1 dc__gap-4 flexbox pt-8 pb-8 pl-12 pr-12">
+                                <div className="flex">
+                                    <ICPencil className="icon-dim-16" />
                                 </div>
-                            </CodeEditor.Header>
-                        )}
-                    </CodeEditor>
+                                Edit File
+                            </div>
+                        </div>
+                    )}
+
+                    <CodeEditor
+                        mode="yaml"
+                        value={editorData}
+                        noParsing
+                        diffView={showSaveView}
+                        defaultValue={savedScopedVariables || ''}
+                        height="100%"
+                        onChange={handleEditorChange}
+                        validatorSchema={jsonSchema}
+                    />
 
                     <div className="flexbox pt-13 pb-13 pl-12 pr-12 bg__primary dc__border-top dc__content-end dc__align-items-center dc__align-self-stretch dc__gap-12">
                         <button
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx
index 868b0d69b1..91319d9fc6 100644
--- a/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx
+++ b/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx
@@ -28,7 +28,6 @@ import {
     ToastVariantType,
     TabGroup,
     SelectPicker,
-    MODES,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useEffect, useState } from 'react'
 import yamlJsParser from 'yaml'
@@ -75,7 +74,7 @@ const EphemeralContainerDrawer = ({
     switchSelectedContainer,
     onClickShowLaunchEphemeral,
     selectedNamespaceByClickingPod,
-    handleSuccess,
+    handleSuccess
 }: EphemeralContainerDrawerType) => {
     const [switchManifest, setSwitchManifest] = useState<string>(SwitchItemValues.Configuration)
     const [loader, setLoader] = useState<boolean>(false)
@@ -261,7 +260,7 @@ const EphemeralContainerDrawer = ({
 
     const renderBasicEphemeral = (): JSX.Element => {
         return (
-            <div className="p-20 flex-grow-1">
+            <div className="p-20">
                 <div className="dc__row-container mb-12">
                     <div className="fw-6 fs-13 lh-32 cn-7 dc__required-field">
                         <Tippy
@@ -406,19 +405,21 @@ const EphemeralContainerDrawer = ({
                 ? ephemeralFormAdvanced.advancedData.manifest
                 : YAMLStringify(sampleConfig?.sampleManifest)
         return (
-            <div className="flex-grow-1 flexbox-col">
+            <div className="mr-24 mb-24 code-editor-container">
                 <CodeEditor
                     value={codeEditorBody}
-                    mode={MODES.YAML}
+                    mode="yaml"
                     onChange={handleManifestAdvanceConfiguration}
                     readOnly={switchManifest === SwitchItemValues.Sample}
-                    height="fitToParent"
                 >
                     <CodeEditor.Header>
                         <Switch value={switchManifest} name="tab" onChange={handleManifestTabChange}>
                             <SwitchItem value={SwitchItemValues.Configuration}> Manifest </SwitchItem>
                             <SwitchItem value={SwitchItemValues.Sample}> Sample manifest</SwitchItem>
                         </Switch>
+                        <div className="w-70 ml-8">
+                            <CodeEditor.ValidationError />
+                        </div>
                     </CodeEditor.Header>
                 </CodeEditor>
             </div>
@@ -515,35 +516,37 @@ const EphemeralContainerDrawer = ({
 
     const renderEphemeralFooter = (): JSX.Element => {
         return (
-            <div className="dc__border-top bg__primary pt-12 pb-12 pl-20 pr-20 flex right bottom-border-radius">
-                <ButtonWithLoader
-                    rootClassName="flex cta cancel h-36 "
-                    onClick={onClickShowLaunchEphemeral}
-                    disabled={loader}
-                    dataTestId="cancel-token"
-                    isLoading={false}
-                >
-                    Cancel
-                </ButtonWithLoader>
-                <ButtonWithLoader
-                    rootClassName="flex cta h-36 ml-16"
-                    onClick={onSave}
-                    disabled={
-                        ephemeralContainerType === EDITOR_VIEW.BASIC
-                            ? !ephemeralForm.basicData.containerName
-                            : !ephemeralFormAdvanced.advancedData.manifest
-                    }
-                    isLoading={loader}
-                >
-                    Launch container
-                </ButtonWithLoader>
+            <div className="">
+                <div className="dc__border-top w-100 bg__primary pt-12 pb-12 pl-20 pr-20 flex right bottom-border-radius dc__position-abs dc__right-0 dc__bottom-0">
+                    <ButtonWithLoader
+                        rootClassName="flex cta cancel h-36 "
+                        onClick={onClickShowLaunchEphemeral}
+                        disabled={loader}
+                        dataTestId="cancel-token"
+                        isLoading={false}
+                    >
+                        Cancel
+                    </ButtonWithLoader>
+                    <ButtonWithLoader
+                        rootClassName="flex cta h-36 ml-16"
+                        onClick={onSave}
+                        disabled={
+                            ephemeralContainerType === EDITOR_VIEW.BASIC
+                                ? !ephemeralForm.basicData.containerName
+                                : !ephemeralFormAdvanced.advancedData.manifest
+                        }
+                        isLoading={loader}
+                    >
+                        Launch container
+                    </ButtonWithLoader>
+                </div>
             </div>
         )
     }
 
     return (
         <Drawer position="right" width="50%">
-            <div className="bg__primary h-100 flexbox-col">
+            <div className="bg__primary h-100 dc__position-rel">
                 {renderEphemeralHeaders()}
                 {renderEphemeralContainerType()}
                 {ephemeralContainerType === EDITOR_VIEW.BASIC ? renderBasicEphemeral() : renderAdvancedEphemeral()}
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/Manifest.component.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/Manifest.component.tsx
index 7a18db433f..b36389bb3e 100644
--- a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/Manifest.component.tsx
+++ b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/Manifest.component.tsx
@@ -35,7 +35,7 @@ import {
     YAMLStringify,
     InfoColourBar,
     logExceptionToSentry,
-    AppThemeType,
+    CodeEditorThemesKeys,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
@@ -695,58 +695,56 @@ const ManifestComponent = ({
         }
 
         return (
-            <div style={{ height: isResourceBrowserView ? 'calc(100vh - 119px)' : 'calc(100vh - 77px)' }}>
-                <CodeEditor
-                    theme={AppThemeType.dark}
-                    {...(showManifestCompareView
-                        ? {
-                              diffView: true,
-                              originalValue: desiredManifest,
-                              modifiedValue: getCodeEditorValue(),
-                              onModifiedValueChange: handleEditorValueChange,
-                          }
-                        : {
-                              diffView: false,
-                              value: getCodeEditorValue(),
-                              onChange: handleEditorValueChange,
-                              autoFocus: isEditMode,
-                          })}
-                    cleanData={showManifestCompareView}
-                    mode={MODES.YAML}
-                    readOnly={isReadOnlyView}
-                    loading={loading}
-                    height="100%"
-                >
-                    {renderEditorInfo(true)}
-                    {!loading &&
-                        !error &&
-                        isConfigDriftEnabled &&
-                        'hasDrift' in _selectedResource &&
-                        _selectedResource.hasDrift &&
-                        !showManifestCompareView &&
-                        renderOutOfSyncWarning &&
-                        renderOutOfSyncWarning(handleDesiredManifestOpen)}
-                    {showManifestCompareView && (
-                        <CodeEditor.Header hideDefaultSplitHeader className="p-0">
-                            <div className="dc__split-header">
-                                <div className="dc__split-header__pane flexbox dc__align-items-center dc__content-space dc__gap-8">
-                                    <span>Desired manifest</span>
-                                    <button
-                                        className="dc__unset-button-styles flex"
-                                        aria-label="Close Desired Manifest"
-                                        onClick={handleDesiredManifestClose}
-                                    >
-                                        <ICClose className="icon-dim-16 scn-0" />
-                                    </button>
-                                </div>
-                                <div className="dc__split-header__pane">Live manifest</div>
+            <CodeEditor
+                defaultValue={showManifestCompareView && desiredManifest}
+                cleanData={showManifestCompareView}
+                diffView={showManifestCompareView}
+                theme={CodeEditorThemesKeys.vsDarkDT}
+                height={isResourceBrowserView ? 'calc(100vh - 119px)' : 'calc(100vh - 77px)'}
+                value={getCodeEditorValue()}
+                mode={MODES.YAML}
+                readOnly={isReadOnlyView}
+                onChange={handleEditorValueChange}
+                loading={loading}
+                customLoader={
+                    <MessageUI
+                        msg={loadingMsg}
+                        icon={MsgUIType.LOADING}
+                        size={24}
+                    />
+                }
+                focus={isEditMode}
+            >
+                {renderEditorInfo(true)}
+
+                {!loading &&
+                    !error &&
+                    isConfigDriftEnabled &&
+                    'hasDrift' in _selectedResource &&
+                    _selectedResource.hasDrift &&
+                    !showManifestCompareView &&
+                    renderOutOfSyncWarning &&
+                    renderOutOfSyncWarning(handleDesiredManifestOpen)}
+                {showManifestCompareView && (
+                    <CodeEditor.Header hideDefaultSplitHeader className="p-0">
+                        <div className="dc__split-header">
+                            <div className="dc__split-header__pane flexbox dc__align-items-center dc__content-space dc__gap-8">
+                                <span>Desired manifest</span>
+                                <button
+                                    className="dc__unset-button-styles flex"
+                                    aria-label="Close Desired Manifest"
+                                    onClick={handleDesiredManifestClose}
+                                >
+                                    <ICClose className="icon-dim-16 scn-0" />
+                                </button>
                             </div>
-                        </CodeEditor.Header>
-                    )}
+                            <div className="dc__split-header__pane">Live manifest</div>
+                        </div>
+                    </CodeEditor.Header>
+                )}
 
-                    {renderErrorBar(true)}
-                </CodeEditor>
-            </div>
+                {renderErrorBar(true)}
+            </CodeEditor>
         )
     }
 
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/nodeDetailTab.scss b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/nodeDetailTab.scss
index c410750d62..d61fb674f4 100644
--- a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/nodeDetailTab.scss
+++ b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/nodeDetailTab.scss
@@ -159,7 +159,38 @@
         fill: var(--B500);
     }
 }
+.cluster-list-main-container {
+    .code-editor-container {
+        height: 100%;
+        background: var(--bg-secondary);
+        border: 0;
+        border-radius: none;
+
+        .code-editor__header {
+            background-color: var(--bg-primary);
+        }
 
+        .react-monaco-editor-container,
+        .overflow-guard {
+            height: calc(100vh - 178px) !important;
+        }
+
+        .monaco-editor {
+
+            .monaco-editor-background,
+            .margin {
+                background-color: var(--bg-secondary) !important;
+            }
+
+            height: calc(100vh - 178px) !important;
+        }
+
+        .radio-group {
+            border: 1px solid var(--N200);
+            border-radius: 4px;
+        }
+    }
+}
 .pod-terminal-hidden {
     visibility: hidden;
     height: 0;
diff --git a/src/components/v2/chartDeploymentHistory/ChartDeploymentHistory.component.tsx b/src/components/v2/chartDeploymentHistory/ChartDeploymentHistory.component.tsx
index 4bab950ba4..8b0369a1e1 100644
--- a/src/components/v2/chartDeploymentHistory/ChartDeploymentHistory.component.tsx
+++ b/src/components/v2/chartDeploymentHistory/ChartDeploymentHistory.component.tsx
@@ -32,7 +32,6 @@ import {
     ShowMoreText,
     DEPLOYMENT_STATUS,
     EMPTY_STATE_STATUS,
-    MODES,
     Button,
     ComponentSizeType,
 } from '@devtron-labs/devtron-fe-common-lib'
@@ -64,8 +63,8 @@ import {
     processVirtualEnvironmentDeploymentData,
     renderDeploymentApprovalInfo,
 } from '../../app/details/cdDetails/utils'
-import { ReactComponent as Rocket } from '@Icons/ic-nav-rocket.svg'
-import { ReactComponent as ICLines } from '@Icons/ic-lines.svg'
+import { ReactComponent as Rocket} from '@Icons/ic-nav-rocket.svg'
+import {ReactComponent as ICLines } from '@Icons/ic-lines.svg'
 
 const VirtualHistoryArtifact = importComponentFromFELibrary('VirtualHistoryArtifact')
 const ChartSecurityTab = importComponentFromFELibrary('ChartSecurityTab', null, 'function')
@@ -115,7 +114,7 @@ const ChartDeploymentHistory = ({
             DEPLOYMENT_HISTORY_TAB.SOURCE,
             DEPLOYMENT_HISTORY_TAB.VALUES_YAML,
             DEPLOYMENT_HISTORY_TAB.HELM_GENERATED_MANIFEST,
-            ChartSecurityTab && !isExternal && DEPLOYMENT_HISTORY_TAB.SECURITY,
+            (ChartSecurityTab && !isExternal && DEPLOYMENT_HISTORY_TAB.SECURITY),
         ]
         if (installedAppInfo?.deploymentType === DeploymentAppTypes.GITOPS) {
             tabs.unshift(DEPLOYMENT_HISTORY_TAB.STEPS)
@@ -467,18 +466,19 @@ const ChartDeploymentHistory = ({
             )
         }
         return (
-            <CodeEditor
-                key={selectedDeploymentTabName}
-                value={
-                    selectedDeploymentTabName === DEPLOYMENT_HISTORY_TAB.VALUES_YAML
-                        ? getEditorValue(selectedDeploymentManifestDetail.valuesYaml)
-                        : getEditorValue(selectedDeploymentManifestDetail.manifest)
-                }
-                noParsing
-                mode={MODES.YAML}
-                height="fitToParent"
-                readOnly
-            />
+            <div className="bg__primary border-btm h-100">
+                <CodeEditor
+                    value={
+                        selectedDeploymentTabName === DEPLOYMENT_HISTORY_TAB.VALUES_YAML
+                            ? getEditorValue(selectedDeploymentManifestDetail.valuesYaml)
+                            : getEditorValue(selectedDeploymentManifestDetail.manifest)
+                    }
+                    noParsing
+                    mode="yaml"
+                    height="100%"
+                    readOnly
+                />
+            </div>
         )
     }
 
@@ -495,7 +495,7 @@ const ChartDeploymentHistory = ({
 
         return (
             <div
-                className={`trigger-outputs-container flex-grow-1 flexbox-col ${
+                className={`trigger-outputs-container h-100 ${
                     selectedDeploymentTabName === DEPLOYMENT_HISTORY_TAB.SOURCE ? 'pt-20' : ''
                 }`}
                 data-testid="trigger-output-container"
@@ -594,9 +594,7 @@ const ChartDeploymentHistory = ({
                     />
                 )}
                 {selectedDeploymentTabName === DEPLOYMENT_HISTORY_TAB.SECURITY && !isExternal && ChartSecurityTab && (
-                    <ChartSecurityTab
-                        installedAppVersionHistoryId={deploymentHistoryArr[selectedDeploymentHistoryIndex].version}
-                    />
+                    <ChartSecurityTab installedAppVersionHistoryId={deploymentHistoryArr[selectedDeploymentHistoryIndex].version} />
                 )}
             </div>
         )
@@ -623,17 +621,16 @@ const ChartDeploymentHistory = ({
                         </div>
 
                         <div className="flex column left">
-                            <div className=" cn-9 fs-13 fw-4 lh-20">
-                                <span>Message</span>
-                            </div>
+                                <div className=" cn-9 fs-13 fw-4 lh-20">
+                                    <span>Message</span>
+                                </div>
 
                             {/* Need key since using ref inside of this component as useEffect dependency, so there were issues while switching builds */}
                             {message && <ShowMoreText text={message} key={message} textClass="cn-7" />}
                         </div>
                     </div>
                 )
-            }
-        }
+            }}
 
         return (
             <div className="trigger-details pb-20">
@@ -661,6 +658,7 @@ const ChartDeploymentHistory = ({
                                 <DockerImageDetails deployment={deployment} setShowDockerInfo={setShowDockerInfo} />
                             )}
                         </div>
+
                     </div>
 
                     {!(selectedDeploymentHistoryIndex === 0 || isVirtualEnvironment) && (
@@ -681,6 +679,7 @@ const ChartDeploymentHistory = ({
                     )}
                 </div>
                 {getViewMessage()}
+
             </div>
         )
     }
diff --git a/src/components/v2/chartDeploymentHistory/chartDeploymentHistory.scss b/src/components/v2/chartDeploymentHistory/chartDeploymentHistory.scss
index d3eedcbdc9..38e1217763 100644
--- a/src/components/v2/chartDeploymentHistory/chartDeploymentHistory.scss
+++ b/src/components/v2/chartDeploymentHistory/chartDeploymentHistory.scss
@@ -16,7 +16,7 @@
 
 .ci-details__history.deployment-cards {
     grid-template-rows: 30px 1fr !important;
-    flex: 0 0 305px;
+    flex-basis: 305px;
 }
 
 .ci-details__build-card {
diff --git a/src/components/v2/values/chartValuesDiff/ChartValuesEditor.tsx b/src/components/v2/values/chartValuesDiff/ChartValuesEditor.tsx
index 63e3c1d4d1..d44a9778dc 100644
--- a/src/components/v2/values/chartValuesDiff/ChartValuesEditor.tsx
+++ b/src/components/v2/values/chartValuesDiff/ChartValuesEditor.tsx
@@ -16,14 +16,7 @@
 
 import moment from 'moment'
 import React, { useEffect, useState } from 'react'
-import {
-    showError,
-    DetailsProgressing,
-    YAMLStringify,
-    CodeEditor,
-    versionComparatorBySortOrder,
-    MODES,
-} from '@devtron-labs/devtron-fe-common-lib'
+import { showError, DetailsProgressing, YAMLStringify, CodeEditor, versionComparatorBySortOrder } from '@devtron-labs/devtron-fe-common-lib'
 import ReactSelect, { components } from 'react-select'
 import Tippy from '@tippyjs/react'
 import { Moment12HourFormat } from '../../../../config'
@@ -361,95 +354,96 @@ export default function ChartValuesEditor({
     }
 
     return (
-        <CodeEditor
-            height="fitToParent"
-            {...(comparisonView
-                ? {
-                      diffView: true,
-                      originalValue: manifestView
-                          ? valuesForDiffState.selectedManifestForDiff
-                          : valuesForDiffState.selectedValuesForDiff,
-                      modifiedValue: manifestView ? generatedManifest : valuesText,
-                      onModifiedValueChange: onChange,
-                  }
-                : {
-                      diffView: false,
-                      value: manifestView ? generatedManifest : valuesText,
-                      onChange,
-                  })}
-            noParsing
-            mode={MODES.YAML}
-            loading={loading || valuesForDiffState.loadingValuesForDiff}
-            customLoader={
-                <DetailsProgressing size={32}>
-                    {manifestView && !comparisonView && (
-                        <span className="fs-13 fw-4 cn-7 mt-8">
-                            Generating the manifest. <br /> Please wait...
-                        </span>
-                    )}
-                </DetailsProgressing>
-            }
-            readOnly={manifestView}
+        <div
+            className="code-editor-container"
+            data-testid="code-editor-container"
         >
-            {showEditorHeader && (
-                <CodeEditor.Header>
-                    <div className="flex fs-12 fw-6 cn-7">
-                        <Edit className="icon-dim-16 mr-10" />
-                        values.yaml
-                    </div>
-                </CodeEditor.Header>
-            )}
-            {!manifestView && showInfoText && hasChartChanged && (
-                <CodeEditor.Warning
-                    className="dc__ellipsis-right"
-                    text={`Please ensure that the values are compatible with "${repoChartValue.chartRepoName}/${repoChartValue.chartName}"`}
-                />
-            )}
-            {manifestView && (
-                <CodeEditor.Information className="dc__ellipsis-right" text={MANIFEST_OUTPUT_INFO_TEXT}>
-                    <Tippy
-                        className="default-tt w-250"
-                        arrow={false}
-                        placement="bottom"
-                        content={MANIFEST_OUTPUT_TIPPY_CONTENT}
-                    >
-                        <span className="cursor cb-5 fw-6">&nbsp;Know more</span>
-                    </Tippy>
-                </CodeEditor.Information>
-            )}
-            {comparisonView && (
-                <div className="code-editor__header dc__grid-half vertical-divider">
-                    <div className="flex left fs-12 fw-6 cn-7">
-                        <span style={{ width: '90px' }} data-testid="compare-with-heading">
-                            Compare with:
-                        </span>
-                        <CompareWithDropdown
-                            deployedChartValues={valuesForDiffState.deployedChartValues}
-                            defaultChartValues={valuesForDiffState.defaultChartValues}
-                            presetChartValues={valuesForDiffState.presetChartValues}
-                            deploymentHistoryOptionsList={valuesForDiffState.deploymentHistoryOptionsList}
-                            selectedVersionForDiff={valuesForDiffState.selectedVersionForDiff}
-                            handleSelectedVersionForDiff={handleSelectedVersionForDiff}
-                            manifestView={manifestView}
-                        />
-                    </div>
-                    <div className="chart-values-view__diff-view-current flex left fs-12 fw-6 cn-7 pl-12">
-                        {manifestView ? (
-                            <>
-                                <Lock className="icon-dim-16 mr-8" />
-                                <span>Manifest output for current YAML</span>
-                            </>
-                        ) : (
-                            <>
-                                <Edit className="icon-dim-16 mr-10" />
-                                values.yaml&nbsp;
-                                {(selectedChartValues?.chartVersion || repoChartValue?.version) &&
-                                    `(${selectedChartValues?.chartVersion || repoChartValue?.version})`}
-                            </>
+            <CodeEditor
+                height="0"
+                defaultValue={
+                    comparisonView
+                        ? manifestView
+                            ? valuesForDiffState.selectedManifestForDiff
+                            : valuesForDiffState.selectedValuesForDiff
+                        : ''
+                }
+                value={manifestView ? generatedManifest : valuesText}
+                diffView={comparisonView}
+                noParsing
+                mode="yaml"
+                onChange={onChange}
+                loading={loading || valuesForDiffState.loadingValuesForDiff}
+                customLoader={
+                    <DetailsProgressing size={32}>
+                        {manifestView && !comparisonView && (
+                            <span className="fs-13 fw-4 cn-7 mt-8">
+                                Generating the manifest. <br /> Please wait...
+                            </span>
                         )}
+                    </DetailsProgressing>
+                }
+                readOnly={manifestView}
+            >
+                {showEditorHeader && (
+                    <CodeEditor.Header>
+                        <div className="flex fs-12 fw-6 cn-7">
+                            <Edit className="icon-dim-16 mr-10" />
+                            values.yaml
+                        </div>
+                    </CodeEditor.Header>
+                )}
+                {!manifestView && showInfoText && hasChartChanged && (
+                    <CodeEditor.Warning
+                        className="dc__ellipsis-right"
+                        text={`Please ensure that the values are compatible with "${repoChartValue.chartRepoName}/${repoChartValue.chartName}"`}
+                    />
+                )}
+                {manifestView && (
+                    <CodeEditor.Information className="dc__ellipsis-right" text={MANIFEST_OUTPUT_INFO_TEXT}>
+                        <Tippy
+                            className="default-tt w-250"
+                            arrow={false}
+                            placement="bottom"
+                            content={MANIFEST_OUTPUT_TIPPY_CONTENT}
+                        >
+                            <span className="cursor cb-5 fw-6">&nbsp;Know more</span>
+                        </Tippy>
+                    </CodeEditor.Information>
+                )}
+                {comparisonView && (
+                    <div className="code-editor__header chart-values-view__diff-view-header">
+                        <div className="chart-values-view__diff-view-default flex left fs-12 fw-6 cn-7">
+                            <span style={{ width: '90px' }} data-testid="compare-with-heading">
+                                Compare with:
+                            </span>
+                            <CompareWithDropdown
+                                deployedChartValues={valuesForDiffState.deployedChartValues}
+                                defaultChartValues={valuesForDiffState.defaultChartValues}
+                                presetChartValues={valuesForDiffState.presetChartValues}
+                                deploymentHistoryOptionsList={valuesForDiffState.deploymentHistoryOptionsList}
+                                selectedVersionForDiff={valuesForDiffState.selectedVersionForDiff}
+                                handleSelectedVersionForDiff={handleSelectedVersionForDiff}
+                                manifestView={manifestView}
+                            />
+                        </div>
+                        <div className="chart-values-view__diff-view-current flex left fs-12 fw-6 cn-7 pl-12">
+                            {manifestView ? (
+                                <>
+                                    <Lock className="icon-dim-16 mr-8" />
+                                    <span>Manifest output for current YAML</span>
+                                </>
+                            ) : (
+                                <>
+                                    <Edit className="icon-dim-16 mr-10" />
+                                    values.yaml&nbsp;
+                                    {(selectedChartValues?.chartVersion || repoChartValue?.version) &&
+                                        `(${selectedChartValues?.chartVersion || repoChartValue?.version})`}
+                                </>
+                            )}
+                        </div>
                     </div>
-                </div>
-            )}
-        </CodeEditor>
+                )}
+            </CodeEditor>
+        </div>
     )
 }
diff --git a/src/components/v2/values/chartValuesDiff/ChartValuesView.scss b/src/components/v2/values/chartValuesDiff/ChartValuesView.scss
index 3fba4780d3..1ad24ad442 100644
--- a/src/components/v2/values/chartValuesDiff/ChartValuesView.scss
+++ b/src/components/v2/values/chartValuesDiff/ChartValuesView.scss
@@ -14,7 +14,13 @@
  * limitations under the License.
  */
 
- .chart-values-view__container {
+@import './ChartValuesViewUtils.scss';
+
+.chart-values-view__container {
+    & .react-monaco-editor-container {
+        flex-grow: 1;
+    }
+
     &.readmeOpened {
         .chart-values-view__wrapper {
             grid-template-columns: 50% 50%;
@@ -255,28 +261,52 @@
                 }
             }
 
-            .code-editor__warning {
-                color: var(--N900);
-                background-color: var(--Y100);
+            .code-editor-container {
+                display: flex;
+                flex-direction: column;
+                flex-grow: 1;
+                border: none;
+                border-bottom: 1px solid var(--N100);
+                height: auto;
+                .monaco-editor {
+                    .monaco-editor-background,
+                    .margin {
+                        background-color: var(--bg-primary) !important;
+                    }
+                }
+                .code-editor__warning {
+                    color: var(--N900);
+                    background-color: var(--Y100);
 
-                .code-editor__information-info-icon path:nth-child(2) {
-                    fill: var(--Y700);
+                    .code-editor__information-info-icon path:nth-child(2) {
+                        fill: var(--Y700);
+                    }
                 }
-            }
 
-            .code-editor__header {
-                height: 32px;
-                padding: 0 12px;
-                border-bottom: none;
-                background: var(--N100) !important;
-            }
+                .code-editor__header,
+                .chart-values-view__diff-view-header {
+                    height: 32px;
+                    padding: 0 12px;
+                    border-bottom: none;
+                    background: var(--N100) !important;
+                }
 
-            & .details-loader-height {
-                height: 100%;
-            }
+                .chart-values-view__diff-view-header {
+                    display: grid;
+                    grid-template-columns: 48.5% 51.5%;
+
+                    .chart-values-view__diff-view-default {
+                        border-right: 1px solid var(--N200);
+                    }
+                }
+
+                & .details-loader-height {
+                    height: 100%;
+                }
 
-            & .details-loader {
-                width: 100%;
+                & .details-loader {
+                    width: 100%;
+                }
             }
         }
 
diff --git a/src/components/v2/values/chartValuesDiff/ChartValuesView.tsx b/src/components/v2/values/chartValuesDiff/ChartValuesView.tsx
index 5d31b398e6..5149897af6 100644
--- a/src/components/v2/values/chartValuesDiff/ChartValuesView.tsx
+++ b/src/components/v2/values/chartValuesDiff/ChartValuesView.tsx
@@ -1493,7 +1493,7 @@ const ChartValuesView = ({
 
     const renderChartValuesEditor = () => {
         return (
-            <div className="chart-values-view__editor mw-none">
+            <div className="chart-values-view__editor">
                 {commonState.activeTab === 'manifest' && commonState.valuesEditorError ? (
                     <GenericEmptyState title="" subTitle={commonState.valuesEditorError} />
                 ) : (
diff --git a/src/components/v2/values/chartValuesDiff/ChartValuesViewUtils.scss b/src/components/v2/values/chartValuesDiff/ChartValuesViewUtils.scss
new file mode 100644
index 0000000000..ca1ff6dc34
--- /dev/null
+++ b/src/components/v2/values/chartValuesDiff/ChartValuesViewUtils.scss
@@ -0,0 +1,115 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@mixin sub-vh {
+    &.sub130-vh {
+        .react-monaco-editor-container,
+        .overflow-guard,
+        .details-loader-height {
+            height: calc(100vh - 130px) !important;
+        }
+
+        .monaco-editor {
+            .monaco-editor-background,
+            .margin {
+                background-color: var(--bg-primary) !important;
+            }
+
+            height: calc(100vh - 130px) !important;
+        }
+    }
+
+    &.sub160-vh {
+        .react-monaco-editor-container,
+        .overflow-guard,
+        .details-loader-height {
+            height: calc(100vh - 160px) !important;
+        }
+
+        .monaco-editor {
+            .monaco-editor-background,
+            .margin {
+                background-color: var(--bg-primary) !important;
+            }
+
+            height: calc(100vh - 160px) !important;
+        }
+    }
+
+    &.sub189-vh {
+        .react-monaco-editor-container,
+        .overflow-guard,
+        .details-loader-height {
+            height: calc(100vh - 189px) !important;
+        }
+
+        .monaco-editor {
+            .monaco-editor-background,
+            .margin {
+                background-color: var(--bg-primary) !important;
+            }
+
+            height: calc(100vh - 189px) !important;
+        }
+    }
+
+    &.sub193-vh {
+        .react-monaco-editor-container,
+        .overflow-guard,
+        .details-loader-height {
+            height: calc(100vh - 193px) !important;
+        }
+
+        .monaco-editor {
+            .monaco-editor-background,
+            .margin {
+                background-color: var(--bg-primary) !important;
+            }
+
+            height: calc(100vh - 193px) !important;
+        }
+    }
+
+    &.sub222-vh {
+        .react-monaco-editor-container,
+        .overflow-guard,
+        .details-loader-height {
+            height: calc(100vh - 222px) !important;
+        }
+
+        .monaco-editor {
+            .monaco-editor-background,
+            .margin {
+                background-color: var(--bg-primary) !important;
+            }
+
+            height: calc(100vh - 222px) !important;
+        }
+    }
+}
+
+@mixin chart-values-view-sub-vh {
+    &.sub162-vh {
+        height: calc(100vh - 162px) !important;
+    }
+
+    &.sub189-vh {
+        height: calc(100vh - 189px) !important;
+    }
+
+    border: 1px solid var(--N100);
+    overflow: overlay;
+}
diff --git a/src/css/base.scss b/src/css/base.scss
index 0cbfc4987a..a954d40844 100644
--- a/src/css/base.scss
+++ b/src/css/base.scss
@@ -2716,6 +2716,7 @@ button.anchor {
     gap: 1px;
     background-color: var(--N700);
     padding-bottom: 1px;
+    padding-right: 30px;
     color: var(--N0);
     font-size: 12px;
     font-weight: 600;
@@ -5074,6 +5075,40 @@ textarea::placeholder {
     animation-timing-function: linear;
 }
 
+.code-editor__warning {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1.33;
+    letter-spacing: normal;
+    color: var(--N900);
+    height: auto;
+    padding: 8px 16px;
+    border-bottom: 1px solid var(--Y200);
+    background-color: var(--Y100);
+}
+
+.code-editor__error {
+    background-color: var(--O100);
+    color: var(--O500);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1.33;
+    padding: 8px 16px;
+    border-bottom: 1px solid var(--N200);
+}
+
+.code-editor__information {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1.33;
+    letter-spacing: normal;
+    color: var(--N900);
+    height: auto;
+    padding: 8px 16px;
+    border-bottom: 1px solid var(--N200);
+    background-color: var(--B100);
+}
+
 .security-policy--whitelist,
 .security-policy--whitelisted {
     color: var(--G500);
@@ -5282,7 +5317,3 @@ details[open] {
         z-index: 2;
     }
 }
-
-.dc__overscroll-none {
-    overscroll-behavior: none;
-}
diff --git a/src/css/colorPalette.scss b/src/css/colorPalette.scss
index abe79e902d..ec2550e819 100644
--- a/src/css/colorPalette.scss
+++ b/src/css/colorPalette.scss
@@ -14,169 +14,6 @@
  * limitations under the License.
  */
 
-@mixin theme-light {
-    --V700: #4934b3;
-    --V500: #664bee;
-    --V200: #b6abf3;
-    --V100: #f3f0ff;
-    --B700: #003974;
-    --B600: #004fa1;
-    --B500: #0066cc;
-    --B400: #3989d9;
-    --B300: #72ace6;
-    --B200: #abcff3;
-    --B100: #e5f2ff;
-    --B50: #f0f7ff;
-    --N900: #000a14;
-    --N800: #1d2730;
-    --N700: #3b444c;
-    --N600: #596168;
-    --N500: #767d84;
-    --N400: #959ba1;
-    --N300: #b1b7bc;
-    --N200: #d0d4d9;
-    --N100: #edf1f5;
-    --N50: #f7fafc;
-    --N0: #ffffff;
-    --G700: #106240;
-    --G600: #168859;
-    --G500: #1dad70;
-    --G400: #50c191;
-    --G300: #83d5b2;
-    --G200: #b6e9d3;
-    --G100: #e9fbf4;
-    --G50: #f2fffa;
-    --Y800: #594320;
-    --Y700: #8c6324;
-    --Y600: #c58d36;
-    --Y500: #ffb549;
-    --Y400: #ffc570;
-    --Y300: #ffd597;
-    --Y200: #ffe5be;
-    --Y100: #fff5e5;
-    --Y50: #fff8ed;
-    --R700: #b21212;
-    --R600: #c73232;
-    --R500: #f33e3e;
-    --R400: #f66868;
-    --R300: #f99292;
-    --R200: #fcbcbc;
-    --R100: #fde7e7;
-    --R50: #fdf0f0;
-    --O700: #b23412;
-    --O600: #e55e39;
-    --O500: #ff7e5b;
-    --O200: #ffbead;
-    --O100: #ffe5de;
-    --O50: #fcf3f0;
-
-    // Custom colors
-    --bg-pipeline-trigger-type: #a5a7bf;
-    --bg-bulk-selection-widget: #f0f7ffb8;
-
-    // Color Tokens
-    --bg-primary: var(--N0);
-    --bg-secondary: var(--N50);
-    --bg-tertiary: #f2f4f7;
-    --bg-overlay: var(--N0);
-    --bg-menu: var(--N0);
-    --bg-modal: var(--N0);
-
-    --bg-tooltip-black: var(--N900);
-    --bg-toast: var(--N800);
-    --bg-sidebar: #0066cc;
-    --bg-shimmer-loader: linear-gradient(90deg, var(--N200) 0%, var(--N50) 50%, var(--N200) 80%);
-
-    --border-primary: var(--N200);
-    --border-secondary: var(--N100);
-
-    --divider-primary: var(--N200);
-    --divider-secondary: var(--N100);
-}
-
-@mixin theme-dark {
-    color-scheme: dark;
-
-    --V700: #CABFFF;
-    --V500: #a695ff;
-    --V200: #4f4979;
-    --V100: #322f4c;
-    --B700: #acd3ff;
-    --B600: #90c4ff;
-    --B500: #74B5FF;
-    --B400: #6195d2;
-    --B300: #4e76a5;
-    --B200: #3b5679;
-    --B100: #28364c;
-    --B50: #1e2635;
-    --N900: #f8f8f9;
-    --N800: #e4e5e6;
-    --N700: #c8cbce;
-    --N600: #9fa4a9;
-    --N500: #767d84;
-    --N400: #636870;
-    --N300: #4f545c;
-    --N200: #3c3f47;
-    --N100: #282b33;
-    --N50: #1f2029;
-    --N0: #15161f;
-    --G700: #afddb3;
-    --G600: #95d199;
-    --G500: #7ac680;
-    --G400: #66a36d;
-    --G300: #528059;
-    --G200: #3d5c46;
-    --G100: #293932;
-    --G50: #212b2b;
-    --Y800: #fbe3c1;
-    --Y700: #f8d6a1;
-    --Y600: #f6c882;
-    --Y500: #f4ba63;
-    --Y400: #c79955;
-    --Y300: #9b7848;
-    --Y200: #6e5838;
-    --Y100: #42372d;
-    --Y50: #2b2626;
-    --R700: #ff9ea0;
-    --R600: #ff7d80;
-    --R500: #ff5d60;
-    --R400: #d04f53;
-    --R300: #a14146;
-    --R200: #733239;
-    --R100: #44242c;
-    --R50: #311f27;
-    --O700: #ffb29d;
-    --O600: #ff987c;
-    --O500: #ff7e5b;
-    --O200: #734037;
-    --O100: #442b2b;
-    --O50: #2c2025;
-
-    // Custom colors
-    --bg-pipeline-trigger-type: #44465a;
-    --bg-bulk-selection-widget: #141c26b8;
-
-    // Color Tokens
-    --bg-primary: #1E1F28;
-    --bg-secondary: #1A1B23;
-    // Ensure to update in index.css at the root level as well
-    --bg-tertiary: #15161F;
-    --bg-overlay: #31323a;
-    --bg-menu: #31323a;
-    --bg-modal: #31323a;
-
-    --bg-tooltip-black: var(--N200);
-    --bg-toast: var(--N300);
-    --bg-sidebar: #2E3142;
-    --bg-shimmer-loader: linear-gradient(90deg, var(--N50) 0%, var(--N200) 50%, var(--N50) 80%);
-
-    --border-primary: #FFFFFF33;
-    --border-secondary: #FFFFFF1A;
-
-    --divider-primary: #FFFFFF33;
-    --divider-secondary: #FFFFFF1A;
-}
-
 :root {
     --white-20: #ffffff33;
     --white-40: #ffffff66;
@@ -194,8 +31,6 @@
     --backdrop-bg: #000000bf;
     --transparent: transparent;
 
-    --button-text-on-dark: #72ace6;
-
     --shadow-menu: 0px 1px 1px 0px rgba(0, 0, 0, 0.07), 0px 2px 5px 0px rgba(0, 0, 0, 0.07), 0px 3px 8px 0px rgba(0, 0, 0, 0.07);
     --shadow-modal: 0px 1px 1px 0px rgba(0, 0, 0, 0.04), 0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 3px 17px 0px rgba(0, 0, 0, 0.04), 0px 4px 30px 0px rgba(0, 0, 0, 0.13);
     --shadow-overlay: 0px 1px 1px 0px rgba(0, 0, 0, 0.04), 0px 2px 6px 0px rgba(0, 0, 0, 0.04), 0px 4px 12px 0px rgba(0, 0, 0, 0.10);
@@ -206,42 +41,166 @@
 
     &.theme {
         &__light {
-            @include theme-light;
+            --V700: #4934b3;
+            --V500: #664bee;
+            --V200: #b6abf3;
+            --V100: #f3f0ff;
+            --B700: #003974;
+            --B600: #004fa1;
+            --B500: #0066cc;
+            --B400: #3989d9;
+            --B300: #72ace6;
+            --B200: #abcff3;
+            --B100: #e5f2ff;
+            --B50: #f0f7ff;
+            --N900: #000a14;
+            --N800: #1d2730;
+            --N700: #3b444c;
+            --N600: #596168;
+            --N500: #767d84;
+            --N400: #959ba1;
+            --N300: #b1b7bc;
+            --N200: #d0d4d9;
+            --N100: #edf1f5;
+            --N50: #f7fafc;
+            --N0: #ffffff;
+            --G700: #106240;
+            --G600: #168859;
+            --G500: #1dad70;
+            --G400: #50c191;
+            --G300: #83d5b2;
+            --G200: #b6e9d3;
+            --G100: #e9fbf4;
+            --G50: #f2fffa;
+            --Y800: #594320;
+            --Y700: #8c6324;
+            --Y600: #c58d36;
+            --Y500: #ffb549;
+            --Y400: #ffc570;
+            --Y300: #ffd597;
+            --Y200: #ffe5be;
+            --Y100: #fff5e5;
+            --Y50: #fff8ed;
+            --R700: #b21212;
+            --R600: #c73232;
+            --R500: #f33e3e;
+            --R400: #f66868;
+            --R300: #f99292;
+            --R200: #fcbcbc;
+            --R100: #fde7e7;
+            --R50: #fdf0f0;
+            --O700: #b23412;
+            --O600: #e55e39;
+            --O500: #ff7e5b;
+            --O200: #ffbead;
+            --O100: #ffe5de;
+            --O50: #fcf3f0;
+
+            // Custom colors
+            --bg-pipeline-trigger-type: #a5a7bf;
+            --bg-bulk-selection-widget: #f0f7ffb8;
+
+            // Color Tokens
+            --bg-primary: var(--N0);
+            --bg-secondary: var(--N50);
+            --bg-tertiary: #f2f4f7;
+            --bg-overlay: var(--N0);
+            --bg-menu: var(--N0);
+            --bg-modal: var(--N0);
+
+            --bg-tooltip-black: var(--N900);
+            --bg-toast: var(--N800);
+            --bg-sidebar: #0066cc;
+            --bg-shimmer-loader: linear-gradient(90deg, var(--N200) 0%, var(--N50) 50%, var(--N200) 80%);
+
+            --border-primary: var(--N200);
+            --border-secondary: var(--N100);
+
+            --divider-primary: var(--N200);
+            --divider-secondary: var(--N100);
         }
 
         &__dark {
-            @include theme-dark;
+            color-scheme: dark;
+
+            --V700: #CABFFF;
+            --V500: #a695ff;
+            --V200: #4f4979;
+            --V100: #322f4c;
+            --B700: #acd3ff;
+            --B600: #90c4ff;
+            --B500: #74B5FF;
+            --B400: #6195d2;
+            --B300: #4e76a5;
+            --B200: #3b5679;
+            --B100: #28364c;
+            --B50: #1e2635;
+            --N900: #f8f8f9;
+            --N800: #e4e5e6;
+            --N700: #c8cbce;
+            --N600: #9fa4a9;
+            --N500: #767d84;
+            --N400: #636870;
+            --N300: #4f545c;
+            --N200: #3c3f47;
+            --N100: #282b33;
+            --N50: #1f2029;
+            --N0: #15161f;
+            --G700: #afddb3;
+            --G600: #95d199;
+            --G500: #7ac680;
+            --G400: #66a36d;
+            --G300: #528059;
+            --G200: #3d5c46;
+            --G100: #293932;
+            --G50: #212b2b;
+            --Y800: #fbe3c1;
+            --Y700: #f8d6a1;
+            --Y600: #f6c882;
+            --Y500: #f4ba63;
+            --Y400: #c79955;
+            --Y300: #9b7848;
+            --Y200: #6e5838;
+            --Y100: #42372d;
+            --Y50: #2b2626;
+            --R700: #ff9ea0;
+            --R600: #ff7d80;
+            --R500: #ff5d60;
+            --R400: #d04f53;
+            --R300: #a14146;
+            --R200: #733239;
+            --R100: #44242c;
+            --R50: #311f27;
+            --O700: #ffb29d;
+            --O600: #ff987c;
+            --O500: #ff7e5b;
+            --O200: #734037;
+            --O100: #442b2b;
+            --O50: #2c2025;
+
+            // Custom colors
+            --bg-pipeline-trigger-type: #44465a;
+            --bg-bulk-selection-widget: #141c26b8;
+
+            // Color Tokens
+            --bg-primary: #1E1F28;
+            --bg-secondary: #1A1B23;
+            // Ensure to update in index.css at the root level as well
+            --bg-tertiary: #15161F;
+            --bg-overlay: #31323a;
+            --bg-menu: #31323a;
+            --bg-modal: #31323a;
+
+            --bg-tooltip-black: var(--N200);
+            --bg-toast: var(--N300);
+            --bg-sidebar: #2E3142;
+            --bg-shimmer-loader: linear-gradient(90deg, var(--N50) 0%, var(--N200) 50%, var(--N50) 80%);
+
+            --border-primary: #FFFFFF33;
+            --border-secondary: #FFFFFF1A;
+
+            --divider-primary: #FFFFFF33;
+            --divider-secondary: #FFFFFF1A;
         }
     }
 }
-
-// CODE MIRROR THEME
-.code-editor__shebang,
-.cm-theme,
-.cm-merge-theme {
-    &__light {
-        @include theme-light;
-        --bg-code-editor-base: var(--bg-primary);
-        --bg-code-editor-base-gutter: var(--bg-secondary);
-        --bg-code-editor-red: var(--R50);
-        --bg-code-editor-red-gutter: var(--R100);
-        --bg-code-editor-red-highlight: var(--R200);
-        --bg-code-editor-green: var(--G50);
-        --bg-code-editor-green-gutter: var(--G100);
-        --bg-code-editor-green-highlight: var(--G200);
-        --active-line: var(--N100);
-    }
-
-    &__dark {
-        @include theme-dark;
-        --bg-code-editor-base: #181920;
-        --bg-code-editor-base-gutter: var(--bg-tertiary);
-        --bg-code-editor-red: var(--R50);
-        --bg-code-editor-red-gutter: var(--R100);
-        --bg-code-editor-red-highlight: var(--R200);
-        --bg-code-editor-green: var(--G50);
-        --bg-code-editor-green-gutter: var(--G100);
-        --bg-code-editor-green-highlight: var(--G200);
-        --active-line: var(--N200);
-    }
-}
diff --git a/src/css/forms.scss b/src/css/forms.scss
index 399221063b..4f3377ccb8 100644
--- a/src/css/forms.scss
+++ b/src/css/forms.scss
@@ -207,6 +207,17 @@ p.sentence-case:first-letter {
     }
 }
 
+.form__add-parameter {
+    border: none;
+    background-color: var(--bg-primary);
+    margin-left: auto;
+    padding: 0 16px;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1.54;
+    color: var(--B500);
+}
+
 .form__radio-group {
     position: relative;
     display: flex;
diff --git a/src/css/formulae.scss b/src/css/formulae.scss
index c71e116595..0acad122aa 100644
--- a/src/css/formulae.scss
+++ b/src/css/formulae.scss
@@ -487,10 +487,6 @@ $color-suffix: 00;
 
 .divider {
     border-top: 1px solid var(--N200);
-
-    &--n1 {
-        border-top-color: var(--divider-secondary);
-    }
 }
 
 .sqr-44 {
diff --git a/src/css/iconTheming.scss b/src/css/iconTheming.scss
index 3649a01640..755738c97c 100644
--- a/src/css/iconTheming.scss
+++ b/src/css/iconTheming.scss
@@ -95,13 +95,13 @@ $svg-fill-hex-to-var: (
 // Using where to have lowest specificity (0,0,0)
 :where(svg:not([data-style-override="false"])) {
     @each $hex, $var in $svg-stroke-hex-to-var {
-        :where([stroke="#{$hex}" i]:not([data-style-override="false"])) {
+        :where([stroke="#{$hex}" i]) {
             stroke: var($var);
         }
     }
 
     @each $hex, $var in $svg-fill-hex-to-var {
-        :where([fill="#{$hex}" i]:not([data-style-override="false"])) {
+        :where([fill="#{$hex}" i]) {
             fill: var($var);
         }
     }
diff --git a/src/yaml.worker.js b/src/yaml.worker.js
new file mode 100644
index 0000000000..e19b7c59b2
--- /dev/null
+++ b/src/yaml.worker.js
@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// NOTE: a workaround;
+// see https://github.com/remcohaszing/monaco-yaml?tab=readme-ov-file#why-doesnt-it-work-with-vite
+import 'monaco-yaml/yaml.worker'
diff --git a/vite.config.mts b/vite.config.mts
index f06c26ec62..1d6ef67d3c 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -133,6 +133,14 @@ export default defineConfig(({ mode }) => {
                             return '@react-mde'
                         }
 
+                        if (
+                            id.includes('node_modules/monaco-editor') ||
+                            id.includes('node_modules/react-monaco-editor') ||
+                            id.includes('dist/@monaco-editor')
+                        ) {
+                            return '@monaco-editor'
+                        }
+
                         if (id.includes('node_modules/@rxjs')) {
                             return '@rxjs'
                         }
diff --git a/yarn.lock b/yarn.lock
index 975a779f82..988bcbf25b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -936,7 +936,7 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.18.6", "@babel/runtime@^7.2.0":
+"@babel/runtime@^7.2.0":
   version "7.26.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.7.tgz#f4e7fe527cd710f8dc0618610b61b4b060c3c341"
   integrity sha512-AOPI3D+a8dXnja+iwsUqGRjr1BbZIe771sXdapOtYI531gSqpi92vXivKcq2asu/DFpdl1ceFAKZyRzK2PCVcQ==
@@ -974,121 +974,6 @@
     "@babel/helper-validator-identifier" "^7.24.7"
     to-fast-properties "^2.0.0"
 
-"@codemirror/autocomplete@^6.0.0", "@codemirror/autocomplete@^6.16.2":
-  version "6.18.4"
-  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.18.4.tgz#4394f55d6771727179f2e28a871ef46bbbeb11b1"
-  integrity sha512-sFAphGQIqyQZfP2ZBsSHV7xQvo9Py0rV0dW7W3IMRdS+zDuNb2l3no78CvUaWKGfzFjI4FTrLdUSj86IGb2hRA==
-  dependencies:
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.17.0"
-    "@lezer/common" "^1.0.0"
-
-"@codemirror/commands@^6.0.0", "@codemirror/commands@^6.1.0":
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.8.0.tgz#92f200b66f852939bd6ebb90d48c2d9e9c813d64"
-  integrity sha512-q8VPEFaEP4ikSlt6ZxjB3zW72+7osfAYW9i8Zu943uqbKuz6utc1+F170hyLUCUltXORjQXRyYQNfkckzA/bPQ==
-  dependencies:
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/state" "^6.4.0"
-    "@codemirror/view" "^6.27.0"
-    "@lezer/common" "^1.1.0"
-
-"@codemirror/lang-json@6.0.1", "@codemirror/lang-json@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/@codemirror/lang-json/-/lang-json-6.0.1.tgz#0a0be701a5619c4b0f8991f9b5e95fe33f462330"
-  integrity sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==
-  dependencies:
-    "@codemirror/language" "^6.0.0"
-    "@lezer/json" "^1.0.0"
-
-"@codemirror/lang-yaml@6.1.2", "@codemirror/lang-yaml@^6.1.1":
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/@codemirror/lang-yaml/-/lang-yaml-6.1.2.tgz#c84280c68fa7af456a355d91183b5e537e9b7038"
-  integrity sha512-dxrfG8w5Ce/QbT7YID7mWZFKhdhsaTNOYjOkSIMt1qmC4VQnXSDSYVHHHn8k6kJUfIhtLo8t1JJgltlxWdsITw==
-  dependencies:
-    "@codemirror/autocomplete" "^6.0.0"
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/state" "^6.0.0"
-    "@lezer/common" "^1.2.0"
-    "@lezer/highlight" "^1.2.0"
-    "@lezer/lr" "^1.0.0"
-    "@lezer/yaml" "^1.0.0"
-
-"@codemirror/language@6.10.8", "@codemirror/language@^6.0.0":
-  version "6.10.8"
-  resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.10.8.tgz#3e3a346a2b0a8cf63ee1cfe03349eb1965dce5f9"
-  integrity sha512-wcP8XPPhDH2vTqf181U8MbZnW+tDyPYy0UzVOa+oHORjyT+mhhom9vBd7dApJwoDz9Nb/a8kHjJIsuA/t8vNFw==
-  dependencies:
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.23.0"
-    "@lezer/common" "^1.1.0"
-    "@lezer/highlight" "^1.0.0"
-    "@lezer/lr" "^1.0.0"
-    style-mod "^4.0.0"
-
-"@codemirror/legacy-modes@6.4.2":
-  version "6.4.2"
-  resolved "https://registry.yarnpkg.com/@codemirror/legacy-modes/-/legacy-modes-6.4.2.tgz#723a55aae21304d4c112575943d3467c9040d217"
-  integrity sha512-HsvWu08gOIIk303eZQCal4H4t65O/qp1V4ul4zVa3MHK5FJ0gz3qz3O55FIkm+aQUcshUOjBx38t2hPiJwW5/g==
-  dependencies:
-    "@codemirror/language" "^6.0.0"
-
-"@codemirror/lint@6.8.4", "@codemirror/lint@^6.0.0":
-  version "6.8.4"
-  resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-6.8.4.tgz#7d8aa5d1a6dec89ffcc23ad45ddca2e12e90982d"
-  integrity sha512-u4q7PnZlJUojeRe8FJa/njJcMctISGgPQ4PnWsd9268R4ZTtU+tfFYmwkBvgcrK2+QQ8tYFVALVb5fVJykKc5A==
-  dependencies:
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.35.0"
-    crelt "^1.0.5"
-
-"@codemirror/merge@^6.1.2":
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/@codemirror/merge/-/merge-6.8.0.tgz#8e78c75590e989c48079b0aae5739495f8a82bab"
-  integrity sha512-EcCD4OJlGz6lJaqZOFM/RE6fqM4XSQlWNWVxm2CJS1snbrbkgYLTvj8c++pFUWpJOUiNgcxvYMYkMisnC0aR6g==
-  dependencies:
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.17.0"
-    "@lezer/highlight" "^1.0.0"
-    style-mod "^4.1.0"
-
-"@codemirror/search@6.5.8", "@codemirror/search@^6.0.0":
-  version "6.5.8"
-  resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-6.5.8.tgz#b59b3659b46184cc75d6108d7c050a4ca344c3a0"
-  integrity sha512-PoWtZvo7c1XFeZWmmyaOp2G0XVbOnm+fJzvghqGAktBW3cufwJUWvSCcNG0ppXiBEM05mZu6RhMtXPv2hpllig==
-  dependencies:
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.0.0"
-    crelt "^1.0.5"
-
-"@codemirror/state@^6.0.0", "@codemirror/state@^6.1.1", "@codemirror/state@^6.4.0", "@codemirror/state@^6.5.0":
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.5.2.tgz#8eca3a64212a83367dc85475b7d78d5c9b7076c6"
-  integrity sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==
-  dependencies:
-    "@marijn/find-cluster-break" "^1.0.0"
-
-"@codemirror/theme-one-dark@^6.0.0":
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz#fcef9f9cfc17a07836cb7da17c9f6d7231064df8"
-  integrity sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==
-  dependencies:
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.0.0"
-    "@lezer/highlight" "^1.0.0"
-
-"@codemirror/view@^6.0.0", "@codemirror/view@^6.17.0", "@codemirror/view@^6.23.0", "@codemirror/view@^6.27.0", "@codemirror/view@^6.35.0":
-  version "6.36.2"
-  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.36.2.tgz#aeb644e161440734ac5a153bf6e5b4a4355047be"
-  integrity sha512-DZ6ONbs8qdJK0fdN7AB82CgI6tYXf4HWk1wSVa0+9bhVznCuuvhQtX8bFBoy3dv8rZSQqUd8GvhVAcielcidrA==
-  dependencies:
-    "@codemirror/state" "^6.5.0"
-    style-mod "^4.1.0"
-    w3c-keyname "^2.2.4"
-
 "@cspotcode/source-map-support@^0.8.0":
   version "0.8.1"
   resolved "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz"
@@ -1659,48 +1544,6 @@
   resolved "https://registry.npmjs.org/@jsep-plugin/regex/-/regex-1.0.3.tgz"
   integrity sha512-XfZgry4DwEZvSFtS/6Y+R48D7qJYJK6R9/yJFyUFHCIUMEEHuJ4X95TDgJp5QkmzfLYvapMPzskV5HpIDrREug==
 
-"@lezer/common@^1.0.0", "@lezer/common@^1.1.0", "@lezer/common@^1.2.0":
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.2.3.tgz#138fcddab157d83da557554851017c6c1e5667fd"
-  integrity sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==
-
-"@lezer/highlight@^1.0.0", "@lezer/highlight@^1.2.0":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@lezer/highlight/-/highlight-1.2.1.tgz#596fa8f9aeb58a608be0a563e960c373cbf23f8b"
-  integrity sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==
-  dependencies:
-    "@lezer/common" "^1.0.0"
-
-"@lezer/json@^1.0.0":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@lezer/json/-/json-1.0.3.tgz#e773a012ad0088fbf07ce49cfba875cc9e5bc05f"
-  integrity sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==
-  dependencies:
-    "@lezer/common" "^1.2.0"
-    "@lezer/highlight" "^1.0.0"
-    "@lezer/lr" "^1.0.0"
-
-"@lezer/lr@^1.0.0", "@lezer/lr@^1.4.0":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-1.4.2.tgz#931ea3dea8e9de84e90781001dae30dea9ff1727"
-  integrity sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==
-  dependencies:
-    "@lezer/common" "^1.0.0"
-
-"@lezer/yaml@^1.0.0":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@lezer/yaml/-/yaml-1.0.3.tgz#b23770ab42b390056da6b187d861b998fd60b1ff"
-  integrity sha512-GuBLekbw9jDBDhGur82nuwkxKQ+a3W5H0GfaAthDXcAu+XdpS43VlnxA9E9hllkpSP5ellRDKjLLj7Lu9Wr6xA==
-  dependencies:
-    "@lezer/common" "^1.2.0"
-    "@lezer/highlight" "^1.0.0"
-    "@lezer/lr" "^1.4.0"
-
-"@marijn/find-cluster-break@^1.0.0":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz#775374306116d51c0c500b8c4face0f9a04752d8"
-  integrity sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==
-
 "@mdx-js/react@^3.0.0":
   version "3.0.1"
   resolved "https://registry.npmjs.org/@mdx-js/react/-/react-3.0.1.tgz"
@@ -1799,11 +1642,6 @@
   resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
-"@replit/codemirror-vscode-keymap@6.0.2":
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/@replit/codemirror-vscode-keymap/-/codemirror-vscode-keymap-6.0.2.tgz#cc9b9092db5afb9800fda5a03801b4f6600b427e"
-  integrity sha512-j45qTwGxzpsv82lMD/NreGDORFKSctMDVkGRopaP+OrzSzv+pXDQuU3LnFvKpasyjVT0lf+PKG1v2DSCn/vxxg==
-
 "@rjsf/core@^5.13.3":
   version "5.18.5"
   resolved "https://registry.npmjs.org/@rjsf/core/-/core-5.18.5.tgz"
@@ -1986,19 +1824,6 @@
   resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.3.tgz#2cd47d213ddd921bab1470a3e31312ee37aac08a"
   integrity sha512-CUypcYP31Q8O04myV6NKGzk9GVXslO5EJNfmARNSzLF2A+5rmZUlDJ4et6eoJaZgBT9wrC2p4JZH04Vkic8HdQ==
 
-"@sagold/json-pointer@^5.1.1", "@sagold/json-pointer@^5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@sagold/json-pointer/-/json-pointer-5.1.2.tgz#7f07884050fd2139eeb5d7423e917160ee7e0b8d"
-  integrity sha512-+wAhJZBXa6MNxRScg6tkqEbChEHMgVZAhTHVJ60Y7sbtXtu9XA49KfUkdWlS2x78D6H9nryiKePiYozumauPfA==
-
-"@sagold/json-query@^6.1.3":
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/@sagold/json-query/-/json-query-6.2.0.tgz#2204a0259ea10f36cd5cb0a1505078e6d751eecd"
-  integrity sha512-7bOIdUE6eHeoWtFm8TvHQHfTVSZuCs+3RpOKmZCDBIOrxpvF/rNFTeuvIyjHva/RR0yVS3kQtr+9TW72LQEZjA==
-  dependencies:
-    "@sagold/json-pointer" "^5.1.2"
-    ebnf "^1.9.1"
-
 "@sentry-internal/feedback@7.119.1":
   version "7.119.1"
   resolved "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-7.119.1.tgz"
@@ -2184,70 +2009,6 @@
     "@sentry/types" "7.50.0"
     tslib "^1.9.3"
 
-"@shikijs/core@1.29.2":
-  version "1.29.2"
-  resolved "https://registry.yarnpkg.com/@shikijs/core/-/core-1.29.2.tgz#9c051d3ac99dd06ae46bd96536380c916e552bf3"
-  integrity sha512-vju0lY9r27jJfOY4Z7+Rt/nIOjzJpZ3y+nYpqtUZInVoXQ/TJZcfGnNOGnKjFdVZb8qexiCuSlZRKcGfhhTTZQ==
-  dependencies:
-    "@shikijs/engine-javascript" "1.29.2"
-    "@shikijs/engine-oniguruma" "1.29.2"
-    "@shikijs/types" "1.29.2"
-    "@shikijs/vscode-textmate" "^10.0.1"
-    "@types/hast" "^3.0.4"
-    hast-util-to-html "^9.0.4"
-
-"@shikijs/engine-javascript@1.29.2":
-  version "1.29.2"
-  resolved "https://registry.yarnpkg.com/@shikijs/engine-javascript/-/engine-javascript-1.29.2.tgz#a821ad713a3e0b7798a1926fd9e80116e38a1d64"
-  integrity sha512-iNEZv4IrLYPv64Q6k7EPpOCE/nuvGiKl7zxdq0WFuRPF5PAE9PRo2JGq/d8crLusM59BRemJ4eOqrFrC4wiQ+A==
-  dependencies:
-    "@shikijs/types" "1.29.2"
-    "@shikijs/vscode-textmate" "^10.0.1"
-    oniguruma-to-es "^2.2.0"
-
-"@shikijs/engine-oniguruma@1.29.2":
-  version "1.29.2"
-  resolved "https://registry.yarnpkg.com/@shikijs/engine-oniguruma/-/engine-oniguruma-1.29.2.tgz#d879717ced61d44e78feab16f701f6edd75434f1"
-  integrity sha512-7iiOx3SG8+g1MnlzZVDYiaeHe7Ez2Kf2HrJzdmGwkRisT7r4rak0e655AcM/tF9JG/kg5fMNYlLLKglbN7gBqA==
-  dependencies:
-    "@shikijs/types" "1.29.2"
-    "@shikijs/vscode-textmate" "^10.0.1"
-
-"@shikijs/langs@1.29.2":
-  version "1.29.2"
-  resolved "https://registry.yarnpkg.com/@shikijs/langs/-/langs-1.29.2.tgz#4f1de46fde8991468c5a68fa4a67dd2875d643cd"
-  integrity sha512-FIBA7N3LZ+223U7cJDUYd5shmciFQlYkFXlkKVaHsCPgfVLiO+e12FmQE6Tf9vuyEsFe3dIl8qGWKXgEHL9wmQ==
-  dependencies:
-    "@shikijs/types" "1.29.2"
-
-"@shikijs/markdown-it@^1.22.2":
-  version "1.29.2"
-  resolved "https://registry.yarnpkg.com/@shikijs/markdown-it/-/markdown-it-1.29.2.tgz#d46bd8c4c61ff054c69b2cba89feb2b951a2f65c"
-  integrity sha512-RPHqGU8RGQZ2TGMnEqLnSyM9CjPSjb0f8bwSLnJgBmWPWguoygoaFyYkXG0kwMtBtChNYsqQz1C0fLcbo6dY8g==
-  dependencies:
-    markdown-it "^14.1.0"
-    shiki "1.29.2"
-
-"@shikijs/themes@1.29.2":
-  version "1.29.2"
-  resolved "https://registry.yarnpkg.com/@shikijs/themes/-/themes-1.29.2.tgz#293cc5c83dd7df3fdc8efa25cec8223f3a6acb0d"
-  integrity sha512-i9TNZlsq4uoyqSbluIcZkmPL9Bfi3djVxRnofUHwvx/h6SRW3cwgBC5SML7vsDcWyukY0eCzVN980rqP6qNl9g==
-  dependencies:
-    "@shikijs/types" "1.29.2"
-
-"@shikijs/types@1.29.2":
-  version "1.29.2"
-  resolved "https://registry.yarnpkg.com/@shikijs/types/-/types-1.29.2.tgz#a93fdb410d1af8360c67bf5fc1d1a68d58e21c4f"
-  integrity sha512-VJjK0eIijTZf0QSTODEXCqinjBn0joAHQ+aPSBzrv4O2d/QSbsMw+ZeSRx03kV34Hy7NzUvV/7NqfYGRLrASmw==
-  dependencies:
-    "@shikijs/vscode-textmate" "^10.0.1"
-    "@types/hast" "^3.0.4"
-
-"@shikijs/vscode-textmate@^10.0.1":
-  version "10.0.1"
-  resolved "https://registry.yarnpkg.com/@shikijs/vscode-textmate/-/vscode-textmate-10.0.1.tgz#d06d45b67ac5e9b0088e3f67ebd3f25c6c3d711a"
-  integrity sha512-fTIQwLF+Qhuws31iw7Ncl1R3HUDtGwIipiJ9iU+UsDUwMhegFcQKQHd51nZjb7CArq0MvON8rbgCGQYWHUKAdg==
-
 "@sinclair/typebox@^0.24.1":
   version "0.24.51"
   resolved "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz"
@@ -2851,13 +2612,6 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
-"@types/hast@^3.0.0", "@types/hast@^3.0.4":
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-3.0.4.tgz#1d6b39993b82cea6ad783945b0508c25903e15aa"
-  integrity sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==
-  dependencies:
-    "@types/unist" "*"
-
 "@types/history@^4.7.11":
   version "4.7.11"
   resolved "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz"
@@ -2890,7 +2644,7 @@
     jest-matcher-utils "^27.0.0"
     pretty-format "^27.0.0"
 
-"@types/json-schema@^7.0.9":
+"@types/json-schema@^7.0.0", "@types/json-schema@^7.0.9":
   version "7.0.15"
   resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
@@ -2900,13 +2654,6 @@
   resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
-"@types/mdast@^4.0.0":
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-4.0.4.tgz#7ccf72edd2f1aa7dd3437e180c64373585804dd6"
-  integrity sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==
-  dependencies:
-    "@types/unist" "*"
-
 "@types/mdx@^2.0.0":
   version "2.0.13"
   resolved "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz"
@@ -3045,11 +2792,6 @@
   resolved "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz"
   integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
 
-"@types/unist@*", "@types/unist@^3.0.0":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.3.tgz#acaab0f919ce69cce629c2d4ed2eb4adc1b6c20c"
-  integrity sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==
-
 "@types/uuid@^9.0.1":
   version "9.0.8"
   resolved "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz"
@@ -3196,77 +2938,6 @@
     "@typescript-eslint/types" "8.3.0"
     eslint-visitor-keys "^3.4.3"
 
-"@uiw/codemirror-extensions-basic-setup@4.23.6":
-  version "4.23.6"
-  resolved "https://registry.yarnpkg.com/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.23.6.tgz#a15afa85ad12e08fdaca40e89828bced78beeef5"
-  integrity sha512-bvtq8IOvdkLJMhoJBRGPEzU51fMpPDwEhcAHp9xCR05MtbIokQgsnLXrmD1aZm6e7s/3q47H+qdSfAAkR5MkLA==
-  dependencies:
-    "@codemirror/autocomplete" "^6.0.0"
-    "@codemirror/commands" "^6.0.0"
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/lint" "^6.0.0"
-    "@codemirror/search" "^6.0.0"
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.0.0"
-
-"@uiw/codemirror-extensions-basic-setup@4.23.7":
-  version "4.23.7"
-  resolved "https://registry.yarnpkg.com/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.23.7.tgz#8fce5d6190a755c889805d2edc5b85d7f29cd322"
-  integrity sha512-9/2EUa1Lck4kFKkR2BkxlZPpgD/EWuKHnOlysf1yHKZGraaZmZEaUw+utDK4QcuJc8Iz097vsLz4f4th5EU27g==
-  dependencies:
-    "@codemirror/autocomplete" "^6.0.0"
-    "@codemirror/commands" "^6.0.0"
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/lint" "^6.0.0"
-    "@codemirror/search" "^6.0.0"
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.0.0"
-
-"@uiw/codemirror-theme-github@^4.23.7":
-  version "4.23.8"
-  resolved "https://registry.yarnpkg.com/@uiw/codemirror-theme-github/-/codemirror-theme-github-4.23.8.tgz#60e08d5c8fc46c7dbb1ebab00c3afbdd13fd3da7"
-  integrity sha512-+LVpFdF6RMjDsTo+HkJYBWkEGy2AgcZJVCDku+yWme/shEtV/FulpGwHeb+NrArAFNyXjUXSVMPhLq3+syOLhw==
-  dependencies:
-    "@uiw/codemirror-themes" "4.23.8"
-
-"@uiw/codemirror-themes@4.23.8":
-  version "4.23.8"
-  resolved "https://registry.yarnpkg.com/@uiw/codemirror-themes/-/codemirror-themes-4.23.8.tgz#b530ecb388fbc000712466559d41b582cca882c4"
-  integrity sha512-PZmJBZxWMuZ48p/2D5aRPl8zTlBq1d/+NeRqyyH6P6k6yWDF6h71m0Dt+fjslgPE7KmWXux2hbejXXXoRLZO9Q==
-  dependencies:
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.0.0"
-
-"@uiw/react-codemirror@4.23.6":
-  version "4.23.6"
-  resolved "https://registry.yarnpkg.com/@uiw/react-codemirror/-/react-codemirror-4.23.6.tgz#e77f302a39a28c644164ed59bdc1a9edeb587cdf"
-  integrity sha512-caYKGV6TfGLRV1HHD3p0G3FiVzKL1go7wes5XT2nWjB0+dTdyzyb81MKRSacptgZcotujfNO6QXn65uhETRAMw==
-  dependencies:
-    "@babel/runtime" "^7.18.6"
-    "@codemirror/commands" "^6.1.0"
-    "@codemirror/state" "^6.1.1"
-    "@codemirror/theme-one-dark" "^6.0.0"
-    "@uiw/codemirror-extensions-basic-setup" "4.23.6"
-    codemirror "^6.0.0"
-
-"@uiw/react-codemirror@4.23.7":
-  version "4.23.7"
-  resolved "https://registry.yarnpkg.com/@uiw/react-codemirror/-/react-codemirror-4.23.7.tgz#b7fe2085936c593514f5e238865989bfef65e504"
-  integrity sha512-Nh/0P6W+kWta+ARp9YpnKPD9ick5teEnwmtNoPQnyd6NPv0EQP3Ui4YmRVNj1nkUEo+QjrAUaEfcejJ2up/HZA==
-  dependencies:
-    "@babel/runtime" "^7.18.6"
-    "@codemirror/commands" "^6.1.0"
-    "@codemirror/state" "^6.1.1"
-    "@codemirror/theme-one-dark" "^6.0.0"
-    "@uiw/codemirror-extensions-basic-setup" "4.23.7"
-    codemirror "^6.0.0"
-
-"@ungap/structured-clone@^1.0.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.3.0.tgz#d06bbb384ebcf6c505fde1c3d0ed4ddffe0aaff8"
-  integrity sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==
-
 "@ungap/structured-clone@^1.2.0":
   version "1.2.0"
   resolved "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz"
@@ -3699,11 +3370,6 @@ balanced-match@^1.0.0:
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
-best-effort-json-parser@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/best-effort-json-parser/-/best-effort-json-parser-1.1.2.tgz#869272c9de76fc7d336c4d9e3a8bbcdee3edda04"
-  integrity sha512-RD7tyk24pNCDwEKFACauR6Lqp5m6BHUrehwyhN/pA8V3QYWq8Y+hk9vHZvKiThZsdEFTaUqN49duVsamgCd8/g==
-
 better-opn@^3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/better-opn/-/better-opn-3.0.2.tgz"
@@ -3832,11 +3498,6 @@ caniuse-lite@^1.0.30001669:
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001677.tgz"
   integrity sha512-fmfjsOlJUpMWu+mAAtZZZHz7UEwsUxIIvu1TJfO1HqFQvB/B+ii0xr9B5HpbZY/mC4XZ8SvjHJqtAY6pDPQEog==
 
-ccount@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/ccount/-/ccount-2.0.1.tgz#17a3bf82302e0870d6da43a01311a8bc02a3ecf5"
-  integrity sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==
-
 chai@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npmjs.org/chai/-/chai-5.1.1.tgz"
@@ -3873,16 +3534,6 @@ chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-character-entities-html4@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-2.1.0.tgz#1f1adb940c971a4b22ba39ddca6b618dc6e56b2b"
-  integrity sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==
-
-character-entities-legacy@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz#76bc83a90738901d7bc223a9e93759fdd560125b"
-  integrity sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==
-
 check-error@^2.1.1:
   version "2.1.1"
   resolved "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz"
@@ -3951,53 +3602,6 @@ clsx@^2.0.0:
   resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
-codemirror-json-schema@0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/codemirror-json-schema/-/codemirror-json-schema-0.8.0.tgz#3e8b39a038148645c23a006e505becce68397602"
-  integrity sha512-Hiww3eU/8zwPw6oWT2VNTT7w7vwWzFiE7+syleD8rYg5pCfKuGa2oiAAgZCXpx6EUJtIcq3LKP9gkEbNUD5jcA==
-  dependencies:
-    "@sagold/json-pointer" "^5.1.1"
-    "@shikijs/markdown-it" "^1.22.2"
-    best-effort-json-parser "^1.1.2"
-    json-schema "^0.4.0"
-    json-schema-library "^9.3.5"
-    loglevel "^1.9.1"
-    markdown-it "^14.1.0"
-    shiki "^1.22.2"
-    yaml "^2.3.4"
-  optionalDependencies:
-    "@codemirror/autocomplete" "^6.16.2"
-    "@codemirror/lang-json" "^6.0.1"
-    "@codemirror/lang-yaml" "^6.1.1"
-    codemirror-json5 "^1.0.3"
-    json5 "^2.2.3"
-
-codemirror-json5@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/codemirror-json5/-/codemirror-json5-1.0.3.tgz#046101609776a97ae3bd0bfc4b9f15638e317793"
-  integrity sha512-HmmoYO2huQxoaoG5ARKjqQc9mz7/qmNPvMbISVfIE2Gk1+4vZQg9X3G6g49MYM5IK00Ol3aijd7OKrySuOkA7Q==
-  dependencies:
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.0.0"
-    "@lezer/common" "^1.0.0"
-    "@lezer/highlight" "^1.0.0"
-    json5 "^2.2.1"
-    lezer-json5 "^2.0.2"
-
-codemirror@^6.0.0:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-6.0.1.tgz#62b91142d45904547ee3e0e0e4c1a79158035a29"
-  integrity sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==
-  dependencies:
-    "@codemirror/autocomplete" "^6.0.0"
-    "@codemirror/commands" "^6.0.0"
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/lint" "^6.0.0"
-    "@codemirror/search" "^6.0.0"
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.0.0"
-
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
@@ -4043,19 +3647,14 @@ colorette@^2.0.16:
   resolved "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz"
   integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
 
-comma-separated-tokens@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz#4e89c9458acb61bc8fef19f4529973b2392839ee"
-  integrity sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==
-
 command-line-parser@^0.2.10:
   version "0.2.10"
   resolved "https://registry.npmjs.org/command-line-parser/-/command-line-parser-0.2.10.tgz"
   integrity sha512-ltdABudGiokiv4e3prof0f0xoKX5jYIys/i2l0U2DB6Ys9eUoKvC/QrhuR1ZLjyb33wzLGov3oUtp8IWOj5roQ==
 
-commander@^2.19.0, commander@^2.20.0:
+commander@^2.20.0:
   version "2.20.3"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
 commander@^4.0.0:
@@ -4167,11 +3766,6 @@ create-require@^1.1.0:
   resolved "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz"
   integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
 
-crelt@^1.0.5:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72"
-  integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==
-
 cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3, cross-spawn@^7.0.5:
   version "7.0.6"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
@@ -4406,9 +4000,9 @@ deepmerge@^1.5.2:
   resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz"
   integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
 
-deepmerge@^4.2.2, deepmerge@^4.3.1:
+deepmerge@^4.2.2:
   version "4.3.1"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
+  resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
 
 define-data-property@^1.0.1, define-data-property@^1.1.4:
@@ -4434,9 +4028,9 @@ define-properties@^1.1.2, define-properties@^1.1.3, define-properties@^1.2.0, de
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
-dequal@^2.0.0, dequal@^2.0.2, dequal@^2.0.3:
+dequal@^2.0.2, dequal@^2.0.3:
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  resolved "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz"
   integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
 
 detect-libc@^2.0.3:
@@ -4444,13 +4038,6 @@ detect-libc@^2.0.3:
   resolved "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz"
   integrity sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==
 
-devlop@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/devlop/-/devlop-1.1.0.tgz#4db7c2ca4dc6e0e834c30be70c94bbc976dc7018"
-  integrity sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==
-  dependencies:
-    dequal "^2.0.0"
-
 diff-sequences@^27.5.1:
   version "27.5.1"
   resolved "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz"
@@ -4483,11 +4070,6 @@ direction@^1.0.4:
   resolved "https://registry.npmjs.org/direction/-/direction-1.0.4.tgz"
   integrity sha512-GYqKi1aH7PJXxdhTeZBFrg8vUBeKXi+cNprXsC1kpJcbcVnV9wBsrOu1cQEdG0WeQwlfHiy3XvnKfIrJ2R0NzQ==
 
-discontinuous-range@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
-  integrity sha512-c68LpLbO+7kP/b1Hr1qs8/BJ09F5khZGTxqxZuhzxpmwJKOgRFHJWIb9/KmqnqHhLdO55aOxFH/EGBvUQbL/RQ==
-
 doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz"
@@ -4576,11 +4158,6 @@ eastasianwidth@^0.2.0:
   resolved "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz"
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
-ebnf@^1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/ebnf/-/ebnf-1.9.1.tgz#64c25d8208ec0d221ec11c3c5e8094015131a9d3"
-  integrity sha512-uW2UKSsuty9ANJ3YByIQE4ANkD8nqUPO7r6Fwcc1ADKPe9FRdcPpMl3VEput4JSvKBJ4J86npIC2MLP0pYkCuw==
-
 ejs@^3.1.10, ejs@^3.1.6:
   version "3.1.10"
   resolved "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz"
@@ -4593,11 +4170,6 @@ electron-to-chromium@^1.5.41:
   resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.51.tgz"
   integrity sha512-kKeWV57KSS8jH4alKt/jKnvHPmJgBxXzGUSbMd4eQF+iOsVPl7bz2KUmu6eo80eMP8wVioTfTyTzdMgM15WXNg==
 
-emoji-regex-xs@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/emoji-regex-xs/-/emoji-regex-xs-1.0.0.tgz#e8af22e5d9dbd7f7f22d280af3d19d2aab5b0724"
-  integrity sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==
-
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz"
@@ -5131,11 +4703,6 @@ execa@^5.1.1:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
-fast-copy@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/fast-copy/-/fast-copy-3.0.2.tgz#59c68f59ccbcac82050ba992e0d5c389097c9d35"
-  integrity sha512-dl0O9Vhju8IrcLndv2eU4ldt1ftXMqqfgN4H1cpmGV7P6jeB9FwpN9a2c8DPGE1Ys88rNUJVYDHq73CGAGOPfQ==
-
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
@@ -5553,30 +5120,6 @@ hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
-hast-util-to-html@^9.0.4:
-  version "9.0.4"
-  resolved "https://registry.yarnpkg.com/hast-util-to-html/-/hast-util-to-html-9.0.4.tgz#d689c118c875aab1def692c58603e34335a0f5c5"
-  integrity sha512-wxQzXtdbhiwGAUKrnQJXlOPmHnEehzphwkK7aluUPQ+lEc1xefC8pblMgpp2w5ldBTEfveRIrADcrhGIWrlTDA==
-  dependencies:
-    "@types/hast" "^3.0.0"
-    "@types/unist" "^3.0.0"
-    ccount "^2.0.0"
-    comma-separated-tokens "^2.0.0"
-    hast-util-whitespace "^3.0.0"
-    html-void-elements "^3.0.0"
-    mdast-util-to-hast "^13.0.0"
-    property-information "^6.0.0"
-    space-separated-tokens "^2.0.0"
-    stringify-entities "^4.0.0"
-    zwitch "^2.0.4"
-
-hast-util-whitespace@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz#7778ed9d3c92dd9e8c5c8f648a49c21fc51cb621"
-  integrity sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==
-  dependencies:
-    "@types/hast" "^3.0.0"
-
 hey-listen@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
@@ -5601,11 +5144,6 @@ hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.2.1, hoist-non-react-
   dependencies:
     react-is "^16.7.0"
 
-html-void-elements@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-3.0.0.tgz#fc9dbd84af9e747249034d4d62602def6517f1d7"
-  integrity sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==
-
 http-parser-js@>=0.5.1:
   version "0.5.8"
   resolved "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz"
@@ -6103,19 +5641,6 @@ json-schema-compare@^0.2.2:
   dependencies:
     lodash "^4.17.4"
 
-json-schema-library@^9.3.5:
-  version "9.3.5"
-  resolved "https://registry.yarnpkg.com/json-schema-library/-/json-schema-library-9.3.5.tgz#dd66002257a13572acd681854a023e1da0e86bfa"
-  integrity sha512-5eBDx7cbfs+RjylsVO+N36b0GOPtv78rfqgf2uON+uaHUIC62h63Y8pkV2ovKbaL4ZpQcHp21968x5nx/dFwqQ==
-  dependencies:
-    "@sagold/json-pointer" "^5.1.2"
-    "@sagold/json-query" "^6.1.3"
-    deepmerge "^4.3.1"
-    fast-copy "^3.0.2"
-    fast-deep-equal "^3.1.3"
-    smtp-address-parser "1.0.10"
-    valid-url "^1.0.9"
-
 json-schema-merge-allof@^0.8.1:
   version "0.8.1"
   resolved "https://registry.npmjs.org/json-schema-merge-allof/-/json-schema-merge-allof-0.8.1.tgz"
@@ -6163,11 +5688,16 @@ json5@^1.0.2:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.2.0, json5@^2.2.1, json5@^2.2.2, json5@^2.2.3:
+json5@^2.2.0, json5@^2.2.2, json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
+jsonc-parser@^3.0.0:
+  version "3.3.1"
+  resolved "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.3.1.tgz"
+  integrity sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==
+
 jsonfile@^6.0.1:
   version "6.1.0"
   resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz"
@@ -6245,13 +5775,6 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-lezer-json5@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/lezer-json5/-/lezer-json5-2.0.2.tgz#ba3756e0d352d9529517dcf264d27db8579ae577"
-  integrity sha512-NRmtBlKW/f8mA7xatKq8IUOq045t8GVHI4kZXrUtYYUdiVeGiO6zKGAV7/nUAnf5q+rYTY+SWX/gvQdFXMjNxQ==
-  dependencies:
-    "@lezer/lr" "^1.0.0"
-
 lie@3.1.1:
   version "3.1.1"
   resolved "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz"
@@ -6269,13 +5792,6 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
-linkify-it@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-5.0.0.tgz#9ef238bfa6dc70bd8e7f9572b52d369af569b421"
-  integrity sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==
-  dependencies:
-    uc.micro "^2.0.0"
-
 lint-staged@12.5.0:
   version "12.5.0"
   resolved "https://registry.npmjs.org/lint-staged/-/lint-staged-12.5.0.tgz"
@@ -6364,11 +5880,6 @@ log-update@^4.0.0:
     slice-ansi "^4.0.0"
     wrap-ansi "^6.2.0"
 
-loglevel@^1.9.1:
-  version "1.9.2"
-  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.9.2.tgz#c2e028d6c757720107df4e64508530db6621ba08"
-  integrity sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg==
-
 loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
@@ -6424,18 +5935,6 @@ map-or-similar@^1.5.0:
   resolved "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz"
   integrity sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==
 
-markdown-it@^14.1.0:
-  version "14.1.0"
-  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-14.1.0.tgz#3c3c5992883c633db4714ccb4d7b5935d98b7d45"
-  integrity sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==
-  dependencies:
-    argparse "^2.0.1"
-    entities "^4.4.0"
-    linkify-it "^5.0.0"
-    mdurl "^2.0.0"
-    punycode.js "^2.3.1"
-    uc.micro "^2.1.0"
-
 markdown-to-jsx@^7.4.1:
   version "7.4.7"
   resolved "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.4.7.tgz"
@@ -6451,21 +5950,6 @@ math-intrinsics@^1.0.0:
   resolved "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz"
   integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
 
-mdast-util-to-hast@^13.0.0:
-  version "13.2.0"
-  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz#5ca58e5b921cc0a3ded1bc02eed79a4fe4fe41f4"
-  integrity sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==
-  dependencies:
-    "@types/hast" "^3.0.0"
-    "@types/mdast" "^4.0.0"
-    "@ungap/structured-clone" "^1.0.0"
-    devlop "^1.0.0"
-    micromark-util-sanitize-uri "^2.0.0"
-    trim-lines "^3.0.0"
-    unist-util-position "^5.0.0"
-    unist-util-visit "^5.0.0"
-    vfile "^6.0.0"
-
 mdn-data@2.0.28:
   version "2.0.28"
   resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz"
@@ -6476,11 +5960,6 @@ mdn-data@2.0.30:
   resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz"
   integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==
 
-mdurl@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-2.0.0.tgz#80676ec0433025dd3e17ee983d0fe8de5a2237e0"
-  integrity sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==
-
 memoize-one@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz"
@@ -6503,38 +5982,6 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-micromark-util-character@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/micromark-util-character/-/micromark-util-character-2.1.1.tgz#2f987831a40d4c510ac261e89852c4e9703ccda6"
-  integrity sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==
-  dependencies:
-    micromark-util-symbol "^2.0.0"
-    micromark-util-types "^2.0.0"
-
-micromark-util-encode@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz#0d51d1c095551cfaac368326963cf55f15f540b8"
-  integrity sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==
-
-micromark-util-sanitize-uri@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz#ab89789b818a58752b73d6b55238621b7faa8fd7"
-  integrity sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==
-  dependencies:
-    micromark-util-character "^2.0.0"
-    micromark-util-encode "^2.0.0"
-    micromark-util-symbol "^2.0.0"
-
-micromark-util-symbol@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz#e5da494e8eb2b071a0d08fb34f6cefec6c0a19b8"
-  integrity sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==
-
-micromark-util-types@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/micromark-util-types/-/micromark-util-types-2.0.1.tgz#a3edfda3022c6c6b55bfb049ef5b75d70af50709"
-  integrity sha512-534m2WhVTddrcKVepwmVEVnUAmtrx9bfIjNoQHRqfnvdaHQiFytEhJoTgpWJvDEXCO5gLTQh3wYC1PgOJA4NSQ==
-
 micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
   version "4.0.8"
   resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz"
@@ -6594,10 +6041,54 @@ moment@>=1.6.0, moment@^2.26.0, moment@^2.29.4:
   resolved "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz"
   integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
 
-moo@^0.5.0:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.2.tgz#f9fe82473bc7c184b0d32e2215d3f6e67278733c"
-  integrity sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==
+monaco-editor@0.44.0:
+  version "0.44.0"
+  resolved "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.44.0.tgz"
+  integrity sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q==
+
+monaco-languageserver-types@^0.3.0:
+  version "0.3.4"
+  resolved "https://registry.npmjs.org/monaco-languageserver-types/-/monaco-languageserver-types-0.3.4.tgz"
+  integrity sha512-d58sP5yNhjs8uG1ESXs0hFnuX2YfdMhiGeWhdgTUZyG9aaWgyI4dDwrK1khf1mPF2u9Sljv42sfYqPFZnqYMYg==
+  dependencies:
+    monaco-types "^0.1.0"
+    vscode-languageserver-protocol "^3.0.0"
+    vscode-uri "^3.0.0"
+
+monaco-marker-data-provider@^1.0.0:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/monaco-marker-data-provider/-/monaco-marker-data-provider-1.2.3.tgz"
+  integrity sha512-BOiQs9UNEwVrF1rwYI32HUP8D7JTuHlJRlykx83e4+jfh1ceBWIBfB5ENDVSFUz651d95kxjKj36vV2JO3zr9w==
+  dependencies:
+    monaco-types "^0.1.0"
+
+monaco-types@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npmjs.org/monaco-types/-/monaco-types-0.1.0.tgz"
+  integrity sha512-aWK7SN9hAqNYi0WosPoMjenMeXJjwCxDibOqWffyQ/qXdzB/86xshGQobRferfmNz7BSNQ8GB0MD0oby9/5fTQ==
+
+monaco-worker-manager@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/monaco-worker-manager/-/monaco-worker-manager-2.0.1.tgz"
+  integrity sha512-kdPL0yvg5qjhKPNVjJoym331PY/5JC11aPJXtCZNwWRvBr6jhkIamvYAyiY5P1AWFmNOy0aRDRoMdZfa71h8kg==
+
+monaco-yaml@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/monaco-yaml/-/monaco-yaml-5.1.1.tgz"
+  integrity sha512-BuZ0/ZCGjrPNRzYMZ/MoxH8F/SdM+mATENXnpOhDYABi1Eh+QvxSszEct+ACSCarZiwLvy7m6yEF/pvW8XJkyQ==
+  dependencies:
+    "@types/json-schema" "^7.0.0"
+    jsonc-parser "^3.0.0"
+    monaco-languageserver-types "^0.3.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 "^2.0.0"
+    vscode-languageserver-textdocument "^1.0.0"
+    vscode-languageserver-types "^3.0.0"
+    vscode-uri "^3.0.0"
+    yaml "^2.0.0"
 
 ms@^2.1.1, ms@^2.1.3:
   version "2.1.3"
@@ -6614,16 +6105,6 @@ natural-compare@^1.4.0:
   resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-nearley@^2.20.1:
-  version "2.20.1"
-  resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.20.1.tgz#246cd33eff0d012faf197ff6774d7ac78acdd474"
-  integrity sha512-+Mc8UaAebFzgV+KpI5n7DasuuQCHA89dmwm7JXw3TV43ukfNQ9DnBH3Mdb2g/I4Fdxc26pwimBWvjIw0UAILSQ==
-  dependencies:
-    commander "^2.19.0"
-    moo "^0.5.0"
-    railroad-diagrams "^1.0.0"
-    randexp "0.4.6"
-
 node-fetch@^2.6.7:
   version "2.7.0"
   resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz"
@@ -6748,15 +6229,6 @@ onetime@^5.1.0, onetime@^5.1.2:
   dependencies:
     mimic-fn "^2.1.0"
 
-oniguruma-to-es@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/oniguruma-to-es/-/oniguruma-to-es-2.3.0.tgz#35ea9104649b7c05f3963c6b3b474d964625028b"
-  integrity sha512-bwALDxriqfKGfUufKGGepCzu9x7nJQuoRoAFp4AnwehhC2crqrDIAP/uN2qdlsAvSMpeRC3+Yzhqc7hLmle5+g==
-  dependencies:
-    emoji-regex-xs "^1.0.0"
-    regex "^5.1.1"
-    regex-recursion "^5.1.1"
-
 open@^7.4.2:
   version "7.4.2"
   resolved "https://registry.npmjs.org/open/-/open-7.4.2.tgz"
@@ -6850,6 +6322,11 @@ patch-package@^8.0.0:
     tmp "^0.0.33"
     yaml "^2.2.2"
 
+path-browserify@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz"
+  integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==
+
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz"
@@ -6979,6 +6456,11 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
+prettier@^2.0.0:
+  version "2.8.8"
+  resolved "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz"
+  integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
+
 prettier@^3.1.1:
   version "3.3.2"
   resolved "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz"
@@ -7043,21 +6525,11 @@ prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2,
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
-property-information@^6.0.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.5.0.tgz#6212fbb52ba757e92ef4fb9d657563b933b7ffec"
-  integrity sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==
-
 proxy-from-env@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz"
   integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
 
-punycode.js@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/punycode.js/-/punycode.js-2.3.1.tgz#6b53e56ad75588234e79f4affa90972c7dd8cdb7"
-  integrity sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==
-
 punycode@^2.1.0:
   version "2.3.1"
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz"
@@ -7090,19 +6562,6 @@ raf@^3.4.1:
   dependencies:
     performance-now "^2.1.0"
 
-railroad-diagrams@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz#eb7e6267548ddedfb899c1b90e57374559cddb7e"
-  integrity sha512-cz93DjNeLY0idrCNOH6PviZGRN9GJhsdm9hpn1YCS879fj4W+x5IFJhhkRZcwVgMmFF7R82UA/7Oh+R8lLZg6A==
-
-randexp@0.4.6:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/randexp/-/randexp-0.4.6.tgz#e986ad5e5e31dae13ddd6f7b3019aa7c87f60ca3"
-  integrity sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==
-  dependencies:
-    discontinuous-range "1.0.0"
-    ret "~0.1.10"
-
 randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz"
@@ -7110,15 +6569,6 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
-react-codemirror-merge@4.23.6:
-  version "4.23.6"
-  resolved "https://registry.yarnpkg.com/react-codemirror-merge/-/react-codemirror-merge-4.23.6.tgz#0b4dbacd7f0359156f5bc0b25f5eed42d5fed368"
-  integrity sha512-tnbv/g8q37T3TP9AjPeKBUI1O67VQ2V2aaRU65alddFyPsrfT5f0fqDeoLRAeqUByhZy+PY4tUoCxauByHDQrw==
-  dependencies:
-    "@babel/runtime" "^7.18.6"
-    "@codemirror/merge" "^6.1.2"
-    "@uiw/react-codemirror" "4.23.6"
-
 react-csv@^2.2.2:
   version "2.2.2"
   resolved "https://registry.npmjs.org/react-csv/-/react-csv-2.2.2.tgz"
@@ -7246,6 +6696,20 @@ react-moment-proptypes@^1.6.0:
   dependencies:
     moment ">=1.6.0"
 
+react-monaco-editor@^0.54.0:
+  version "0.54.0"
+  resolved "https://registry.npmjs.org/react-monaco-editor/-/react-monaco-editor-0.54.0.tgz"
+  integrity sha512-9JwO69851mfpuhYLHlKbae7omQWJ/2ICE2lbL0VHyNyZR8rCOH7440u+zAtDgiOMpLwmYdY1sEZCdRefywX6GQ==
+  dependencies:
+    prop-types "^15.8.1"
+
+react-monaco-editor@^0.55.0:
+  version "0.55.0"
+  resolved "https://registry.npmjs.org/react-monaco-editor/-/react-monaco-editor-0.55.0.tgz"
+  integrity sha512-GdEP0Q3Rn1dczfKEEyY08Nes5plWwIYU4sWRBQO0+jsQWQsKMHKCC6+hPRwR7G/4aA3V/iU9jSmWPzVJYMVFSQ==
+  dependencies:
+    prop-types "^15.8.1"
+
 react-outside-click-handler@^1.2.4:
   version "1.3.0"
   resolved "https://registry.npmjs.org/react-outside-click-handler/-/react-outside-click-handler-1.3.0.tgz"
@@ -7500,26 +6964,6 @@ regenerator-transform@^0.15.2:
   dependencies:
     "@babel/runtime" "^7.8.4"
 
-regex-recursion@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/regex-recursion/-/regex-recursion-5.1.1.tgz#5a73772d18adbf00f57ad097bf54171b39d78f8b"
-  integrity sha512-ae7SBCbzVNrIjgSbh7wMznPcQel1DNlDtzensnFxpiNpXt1U2ju/bHugH422r+4LAVS1FpW1YCwilmnNsjum9w==
-  dependencies:
-    regex "^5.1.1"
-    regex-utilities "^2.3.0"
-
-regex-utilities@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/regex-utilities/-/regex-utilities-2.3.0.tgz#87163512a15dce2908cf079c8960d5158ff43280"
-  integrity sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==
-
-regex@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/regex/-/regex-5.1.1.tgz#cf798903f24d6fe6e531050a36686e082b29bd03"
-  integrity sha512-dN5I359AVGPnwzJm2jN1k0W9LPZ+ePvoOeVMMfqIMFz53sSwXkxaJoxr50ptnsC771lK95BnTrVSZxq0b9yCGw==
-  dependencies:
-    regex-utilities "^2.3.0"
-
 regexp.prototype.flags@^1.5.1, regexp.prototype.flags@^1.5.2:
   version "1.5.2"
   resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz"
@@ -7610,11 +7054,6 @@ restore-cursor@^3.1.0:
     onetime "^5.1.0"
     signal-exit "^3.0.2"
 
-ret@~0.1.10:
-  version "0.1.15"
-  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
-  integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
-
 reusify@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
@@ -7830,20 +7269,6 @@ shebang-regex@^3.0.0:
   resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-shiki@1.29.2, shiki@^1.22.2:
-  version "1.29.2"
-  resolved "https://registry.yarnpkg.com/shiki/-/shiki-1.29.2.tgz#5c93771f2d5305ce9c05975c33689116a27dc657"
-  integrity sha512-njXuliz/cP+67jU2hukkxCNuH1yUi4QfdZZY+sMr5PPrIyXSu5iTb/qYC4BiWWB0vZ+7TbdvYUCeL23zpwCfbg==
-  dependencies:
-    "@shikijs/core" "1.29.2"
-    "@shikijs/engine-javascript" "1.29.2"
-    "@shikijs/engine-oniguruma" "1.29.2"
-    "@shikijs/langs" "1.29.2"
-    "@shikijs/themes" "1.29.2"
-    "@shikijs/types" "1.29.2"
-    "@shikijs/vscode-textmate" "^10.0.1"
-    "@types/hast" "^3.0.4"
-
 side-channel@^1.0.4, side-channel@^1.0.6:
   version "1.0.6"
   resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz"
@@ -7907,13 +7332,6 @@ smob@^1.0.0:
   resolved "https://registry.npmjs.org/smob/-/smob-1.5.0.tgz"
   integrity sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==
 
-smtp-address-parser@1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/smtp-address-parser/-/smtp-address-parser-1.0.10.tgz#9fc4ed6021f13dc3d8f591e0ad0d50454073025e"
-  integrity sha512-Osg9LmvGeAG/hyao4mldbflLOkkr3a+h4m1lwKCK5U8M6ZAr7tdXEz/+/vr752TSGE4MNUlUl9cIK2cB8cgzXg==
-  dependencies:
-    nearley "^2.20.1"
-
 sockjs-client@1.6.1:
   version "1.6.1"
   resolved "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.6.1.tgz"
@@ -7960,11 +7378,6 @@ sourcemap-codec@^1.4.8:
   resolved "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
-space-separated-tokens@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz#1ecd9d2350a3844572c3f4a312bceb018348859f"
-  integrity sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==
-
 split-on-first@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz"
@@ -8066,14 +7479,6 @@ string.prototype.trimstart@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-stringify-entities@^4.0.0:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-4.0.4.tgz#b3b79ef5f277cc4ac73caeb0236c5ba939b3a4f3"
-  integrity sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==
-  dependencies:
-    character-entities-html4 "^2.0.0"
-    character-entities-legacy "^3.0.0"
-
 stringify-object@^3.3.0:
   version "3.3.0"
   resolved "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz"
@@ -8131,11 +7536,6 @@ strip-json-comments@^3.1.1:
   resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
-style-mod@^4.0.0, style-mod@^4.1.0:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.1.2.tgz#ca238a1ad4786520f7515a8539d5a63691d7bf67"
-  integrity sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==
-
 style-value-types@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
@@ -8305,11 +7705,6 @@ tr46@~0.0.3:
   resolved "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz"
   integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
-trim-lines@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/trim-lines/-/trim-lines-3.0.1.tgz#d802e332a07df861c48802c04321017b1bd87338"
-  integrity sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==
-
 ts-api-utils@^1.3.0:
   version "1.3.0"
   resolved "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz"
@@ -8476,11 +7871,6 @@ typescript@5.5.4:
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz"
   integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==
 
-uc.micro@^2.0.0, uc.micro@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-2.1.0.tgz#f8d3f7d0ec4c3dea35a7e3c8efa4cb8b45c9e7ee"
-  integrity sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==
-
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz"
@@ -8526,44 +7916,6 @@ unique-string@^2.0.0:
   dependencies:
     crypto-random-string "^2.0.0"
 
-unist-util-is@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-6.0.0.tgz#b775956486aff107a9ded971d996c173374be424"
-  integrity sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==
-  dependencies:
-    "@types/unist" "^3.0.0"
-
-unist-util-position@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-5.0.0.tgz#678f20ab5ca1207a97d7ea8a388373c9cf896be4"
-  integrity sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==
-  dependencies:
-    "@types/unist" "^3.0.0"
-
-unist-util-stringify-position@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz#449c6e21a880e0855bf5aabadeb3a740314abac2"
-  integrity sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==
-  dependencies:
-    "@types/unist" "^3.0.0"
-
-unist-util-visit-parents@^6.0.0:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz#4d5f85755c3b8f0dc69e21eca5d6d82d22162815"
-  integrity sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==
-  dependencies:
-    "@types/unist" "^3.0.0"
-    unist-util-is "^6.0.0"
-
-unist-util-visit@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-5.0.0.tgz#a7de1f31f72ffd3519ea71814cccf5fd6a9217d6"
-  integrity sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==
-  dependencies:
-    "@types/unist" "^3.0.0"
-    unist-util-is "^6.0.0"
-    unist-util-visit-parents "^6.0.0"
-
 universalify@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz"
@@ -8636,11 +7988,6 @@ v8-compile-cache-lib@^3.0.1:
   resolved "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz"
   integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==
 
-valid-url@^1.0.9:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/valid-url/-/valid-url-1.0.9.tgz#1c14479b40f1397a75782f115e4086447433a200"
-  integrity sha512-QQDsV8OnSf5Uc30CKSwG9lnhMPe6exHtTXLRYX8uMwKENy640pU+2BgBL0LRbDh/eYRahNCS7aewCx0wf3NYVA==
-
 validate.io-array@^1.0.1, validate.io-array@^1.0.3:
   version "1.0.6"
   resolved "https://registry.npmjs.org/validate.io-array/-/validate.io-array-1.0.6.tgz"
@@ -8683,22 +8030,6 @@ value-equal@^1.0.1:
   resolved "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz"
   integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
 
-vfile-message@^4.0.0:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-4.0.2.tgz#c883c9f677c72c166362fd635f21fc165a7d1181"
-  integrity sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==
-  dependencies:
-    "@types/unist" "^3.0.0"
-    unist-util-stringify-position "^4.0.0"
-
-vfile@^6.0.0:
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/vfile/-/vfile-6.0.3.tgz#3652ab1c496531852bf55a6bac57af981ebc38ab"
-  integrity sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==
-  dependencies:
-    "@types/unist" "^3.0.0"
-    vfile-message "^4.0.0"
-
 victory-vendor@^36.6.8:
   version "36.9.2"
   resolved "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz"
@@ -8776,10 +8107,33 @@ vite@5.4.14:
   optionalDependencies:
     fsevents "~2.3.3"
 
-w3c-keyname@^2.2.4:
-  version "2.2.8"
-  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz#7b17c8c6883d4e8b86ac8aba79d39e880f8869c5"
-  integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==
+vscode-jsonrpc@8.2.0:
+  version "8.2.0"
+  resolved "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz"
+  integrity sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==
+
+vscode-languageserver-protocol@^3.0.0:
+  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==
+  dependencies:
+    vscode-jsonrpc "8.2.0"
+    vscode-languageserver-types "3.17.5"
+
+vscode-languageserver-textdocument@^1.0.0:
+  version "1.0.11"
+  resolved "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.11.tgz"
+  integrity sha512-X+8T3GoiwTVlJbicx/sIAF+yuJAqz8VvwJyoMVhwEMoEKE/fkDmrqUgDMyBECcM2A2frVZIUj5HI/ErRXCfOeA==
+
+vscode-languageserver-types@3.17.5, vscode-languageserver-types@^3.0.0:
+  version "3.17.5"
+  resolved "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz"
+  integrity sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==
+
+vscode-uri@^3.0.0:
+  version "3.0.8"
+  resolved "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz"
+  integrity sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==
 
 webidl-conversions@^3.0.0:
   version "3.0.1"
@@ -9112,21 +8466,16 @@ yaml@^1.10.0, yaml@^1.10.2:
   resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
+yaml@^2.0.0, yaml@^2.4.1:
+  version "2.4.5"
+  resolved "https://registry.npmjs.org/yaml/-/yaml-2.4.5.tgz"
+  integrity sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==
+
 yaml@^2.2.2:
   version "2.6.1"
   resolved "https://registry.npmjs.org/yaml/-/yaml-2.6.1.tgz"
   integrity sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==
 
-yaml@^2.3.4:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.7.0.tgz#aef9bb617a64c937a9a748803786ad8d3ffe1e98"
-  integrity sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==
-
-yaml@^2.4.1:
-  version "2.4.5"
-  resolved "https://registry.npmjs.org/yaml/-/yaml-2.4.5.tgz"
-  integrity sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==
-
 yargs-parser@^21.1.1:
   version "21.1.1"
   resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz"
@@ -9141,8 +8490,3 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
-
-zwitch@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.4.tgz#c827d4b0acb76fc3e685a4c6ec2902d51070e9d7"
-  integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==