From c4d12670c9ee2fcffc600adc613ec2027881e2c3 Mon Sep 17 00:00:00 2001
From: nemo <nemozak1@gmail.com>
Date: Mon, 20 Jan 2025 18:46:22 +0000
Subject: [PATCH 1/8] add formatting tp example request body

---
 src/components/Preview.vue | 58 +++++++++++++++++++++++++-------------
 1 file changed, 38 insertions(+), 20 deletions(-)

diff --git a/src/components/Preview.vue b/src/components/Preview.vue
index d2ed050..837c997 100644
--- a/src/components/Preview.vue
+++ b/src/components/Preview.vue
@@ -40,6 +40,7 @@ const url = ref('')
 const roleName = ref('')
 const method = ref('')
 const header = ref('')
+const exampleRequestBodyTitle = ref ('EXAMPLE REQUEST BODY')
 const responseHeaderTitle = ref('TYPICAL SUCCESSFUL RESPONSE')
 const successResponseBody = ref('')
 const exampleRequestBody = ref('')
@@ -71,7 +72,7 @@ const setOperationDetails = (id: string, version: string): void => {
   const operation = getOperationDetails(version, id, resourceDocs)
   url.value = operation?.specified_url
   method.value = operation?.request_verb
-  exampleRequestBody.value = JSON.stringify(operation.example_request_body)
+  console.log(operation.example_request_body)
   requiredRoles.value = operation.roles || []
   possibleErrors.value = operation.error_response_bodies
   connectorMethods.value = operation.connector_methods
@@ -84,7 +85,17 @@ const setOperationDetails = (id: string, version: string): void => {
   footNote.value.functionName = operation.implemented_by.function
   footNote.value.messageTags = operation.tags.join(',')
 
-  highlightCode(operation.success_response_body)
+  if (operation.success_response_body) {
+    successResponseBody.value = highlightCode(operation.success_response_body)
+  }
+
+  if (operation.example_request_body) {
+    exampleRequestBody.value = highlightCode(operation.example_request_body)
+  } else {
+    exampleRequestBody.value = ''
+  }
+  
+  
   setType(method.value)
 }
 
@@ -120,19 +131,19 @@ const submitRequest = async () => {
   if (url.value) {
     switch (method.value) {
       case 'POST': {
-        highlightCode(await create(url.value, exampleRequestBody.value))
+        successResponseBody.value = highlightCode(await create(url.value, exampleRequestBody.value))
         break
       }
       case 'PUT': {
-        highlightCode(await update(url.value, exampleRequestBody.value))
+        successResponseBody.value = highlightCode(await update(url.value, exampleRequestBody.value))
         break
       }
       case 'DELETE': {
-        highlightCode(await discard(url.value))
+        successResponseBody.value = highlightCode(await discard(url.value))
         break
       }
       default: {
-        highlightCode(await get(url.value))
+        successResponseBody.value = highlightCode(await get(url.value))
         break
       }
     }
@@ -151,13 +162,13 @@ const submit = async (form: FormInstance, fn: () => void) => {
 }
 const highlightCode = (json) => {
   if (json.error) {
-    successResponseBody.value = json.error.message
+    return json.error.message
   } else if (json) {
-    successResponseBody.value = hljs.lineNumbersValue(
+    return hljs.lineNumbersValue(
       hljs.highlightAuto(JSON.stringify(json, null, 4), ['JSON']).value
     )
   } else {
-    successResponseBody.value = ''
+    return ''
   }
 }
 const submitEntitlement = async () => {
@@ -204,7 +215,7 @@ onBeforeRouteUpdate((to) => {
   setRoleForm()
 })
 
-const copyToClipboard = () => {
+const copyToClipboard = (type: "request" | "response") => {
   // Create a temporary text area to hold the content
   const textArea = document.createElement('textarea');
 
@@ -223,15 +234,20 @@ const copyToClipboard = () => {
   textArea.value = rawJson; // Set the text to copy
   document.body.appendChild(textArea); // Append the text area to the DOM
   textArea.select(); // Select the text inside the text area
-  document.execCommand('copy'); // Execute the copy command
-  document.body.removeChild(textArea); // Remove the text area from the DOM
+  navigator.clipboard.writeText(textArea.value).then(() => {
+    // Show feedback to the user
+    const feedbackMessage = type === "request" ? 'Request copied to clipboard!' : 'Response copied to clipboard!';
 
-  // Show feedback to the user
-  ElNotification({
-    message: 'Response copied to clipboard!',
-    type: 'success',
-    duration: elMessageDuration
+    console.log(feedbackMessage);
+    ElNotification({
+      message: feedbackMessage,
+      type: 'success',
+      duration: elMessageDuration
+    });
+  }).catch(err => {
+    console.error('Failed to copy text: ', err);
   });
+  document.body.removeChild(textArea); // Remove the text area from the DOM
 };
 
 
@@ -259,12 +275,14 @@ const copyToClipboard = () => {
         placeholder="Request Header (Header1:Value1::Header2:Value2)"
       />
     </div>
-    <div class="flex-preview-panel">
-      <input type="text" v-model="exampleRequestBody" />
+    <div v-show="exampleRequestBody">
+      <p class="header-container">{{ exampleRequestBodyTitle }}:</p>
+      <pre><button @click="copyToClipboard('request')" class="copy-button icon-md-heavy" title="Copy to Clipboard"><i class="material-icons">content_copy</i></button>
+        <code><div id="code" v-html="exampleRequestBody"></div></code></pre>
     </div>
     <div v-show="successResponseBody">
       <p class="header-container">{{ responseHeaderTitle }}:</p>
-      <pre><button @click="copyToClipboard" class="copy-button icon-md-heavy" title="Copy to Clipboard"><i class="material-icons">content_copy</i></button>
+      <pre><button @click="copyToClipboard('response')" class="copy-button icon-md-heavy" title="Copy to Clipboard"><i class="material-icons">content_copy</i></button>
         <code><div id="code" v-html="successResponseBody"></div></code></pre>
     </div>
     <el-form ref="roleFormRef" :model="roleForm">

From dc9365147a4ed22245887c12886ac598f43dc6c8 Mon Sep 17 00:00:00 2001
From: nemo <nemozak1@gmail.com>
Date: Tue, 21 Jan 2025 11:18:27 +0000
Subject: [PATCH 2/8] Revert "add formatting tp example request body"

This reverts commit c4d12670c9ee2fcffc600adc613ec2027881e2c3.
---
 src/components/Preview.vue | 58 +++++++++++++-------------------------
 1 file changed, 20 insertions(+), 38 deletions(-)

diff --git a/src/components/Preview.vue b/src/components/Preview.vue
index 837c997..d2ed050 100644
--- a/src/components/Preview.vue
+++ b/src/components/Preview.vue
@@ -40,7 +40,6 @@ const url = ref('')
 const roleName = ref('')
 const method = ref('')
 const header = ref('')
-const exampleRequestBodyTitle = ref ('EXAMPLE REQUEST BODY')
 const responseHeaderTitle = ref('TYPICAL SUCCESSFUL RESPONSE')
 const successResponseBody = ref('')
 const exampleRequestBody = ref('')
@@ -72,7 +71,7 @@ const setOperationDetails = (id: string, version: string): void => {
   const operation = getOperationDetails(version, id, resourceDocs)
   url.value = operation?.specified_url
   method.value = operation?.request_verb
-  console.log(operation.example_request_body)
+  exampleRequestBody.value = JSON.stringify(operation.example_request_body)
   requiredRoles.value = operation.roles || []
   possibleErrors.value = operation.error_response_bodies
   connectorMethods.value = operation.connector_methods
@@ -85,17 +84,7 @@ const setOperationDetails = (id: string, version: string): void => {
   footNote.value.functionName = operation.implemented_by.function
   footNote.value.messageTags = operation.tags.join(',')
 
-  if (operation.success_response_body) {
-    successResponseBody.value = highlightCode(operation.success_response_body)
-  }
-
-  if (operation.example_request_body) {
-    exampleRequestBody.value = highlightCode(operation.example_request_body)
-  } else {
-    exampleRequestBody.value = ''
-  }
-  
-  
+  highlightCode(operation.success_response_body)
   setType(method.value)
 }
 
@@ -131,19 +120,19 @@ const submitRequest = async () => {
   if (url.value) {
     switch (method.value) {
       case 'POST': {
-        successResponseBody.value = highlightCode(await create(url.value, exampleRequestBody.value))
+        highlightCode(await create(url.value, exampleRequestBody.value))
         break
       }
       case 'PUT': {
-        successResponseBody.value = highlightCode(await update(url.value, exampleRequestBody.value))
+        highlightCode(await update(url.value, exampleRequestBody.value))
         break
       }
       case 'DELETE': {
-        successResponseBody.value = highlightCode(await discard(url.value))
+        highlightCode(await discard(url.value))
         break
       }
       default: {
-        successResponseBody.value = highlightCode(await get(url.value))
+        highlightCode(await get(url.value))
         break
       }
     }
@@ -162,13 +151,13 @@ const submit = async (form: FormInstance, fn: () => void) => {
 }
 const highlightCode = (json) => {
   if (json.error) {
-    return json.error.message
+    successResponseBody.value = json.error.message
   } else if (json) {
-    return hljs.lineNumbersValue(
+    successResponseBody.value = hljs.lineNumbersValue(
       hljs.highlightAuto(JSON.stringify(json, null, 4), ['JSON']).value
     )
   } else {
-    return ''
+    successResponseBody.value = ''
   }
 }
 const submitEntitlement = async () => {
@@ -215,7 +204,7 @@ onBeforeRouteUpdate((to) => {
   setRoleForm()
 })
 
-const copyToClipboard = (type: "request" | "response") => {
+const copyToClipboard = () => {
   // Create a temporary text area to hold the content
   const textArea = document.createElement('textarea');
 
@@ -234,20 +223,15 @@ const copyToClipboard = (type: "request" | "response") => {
   textArea.value = rawJson; // Set the text to copy
   document.body.appendChild(textArea); // Append the text area to the DOM
   textArea.select(); // Select the text inside the text area
-  navigator.clipboard.writeText(textArea.value).then(() => {
-    // Show feedback to the user
-    const feedbackMessage = type === "request" ? 'Request copied to clipboard!' : 'Response copied to clipboard!';
+  document.execCommand('copy'); // Execute the copy command
+  document.body.removeChild(textArea); // Remove the text area from the DOM
 
-    console.log(feedbackMessage);
-    ElNotification({
-      message: feedbackMessage,
-      type: 'success',
-      duration: elMessageDuration
-    });
-  }).catch(err => {
-    console.error('Failed to copy text: ', err);
+  // Show feedback to the user
+  ElNotification({
+    message: 'Response copied to clipboard!',
+    type: 'success',
+    duration: elMessageDuration
   });
-  document.body.removeChild(textArea); // Remove the text area from the DOM
 };
 
 
@@ -275,14 +259,12 @@ const copyToClipboard = (type: "request" | "response") => {
         placeholder="Request Header (Header1:Value1::Header2:Value2)"
       />
     </div>
-    <div v-show="exampleRequestBody">
-      <p class="header-container">{{ exampleRequestBodyTitle }}:</p>
-      <pre><button @click="copyToClipboard('request')" class="copy-button icon-md-heavy" title="Copy to Clipboard"><i class="material-icons">content_copy</i></button>
-        <code><div id="code" v-html="exampleRequestBody"></div></code></pre>
+    <div class="flex-preview-panel">
+      <input type="text" v-model="exampleRequestBody" />
     </div>
     <div v-show="successResponseBody">
       <p class="header-container">{{ responseHeaderTitle }}:</p>
-      <pre><button @click="copyToClipboard('response')" class="copy-button icon-md-heavy" title="Copy to Clipboard"><i class="material-icons">content_copy</i></button>
+      <pre><button @click="copyToClipboard" class="copy-button icon-md-heavy" title="Copy to Clipboard"><i class="material-icons">content_copy</i></button>
         <code><div id="code" v-html="successResponseBody"></div></code></pre>
     </div>
     <el-form ref="roleFormRef" :model="roleForm">

From 6c4676cc877c0aa4014d7edb143ca4cb8e3fc7a2 Mon Sep 17 00:00:00 2001
From: nemo <nemozak1@gmail.com>
Date: Tue, 21 Jan 2025 14:50:41 +0000
Subject: [PATCH 3/8] Add JSON editor to request body

---
 package.json               |   2 +
 src/components/Preview.vue |  46 ++++-
 yarn.lock                  | 377 +++++++++++++++++++++++++++++++++++--
 3 files changed, 407 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 0e6a98f..085881a 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "express": "^4.21.0",
     "express-session": "^1.17.3",
     "highlight.js": "^11.8.0",
+    "json-editor-vue": "^0.17.3",
     "jsonwebtoken": "^9.0.2",
     "markdown-it": "^14.1.0",
     "oauth": "^0.10.0",
@@ -40,6 +41,7 @@
     "socket.io-client": "^4.7.5",
     "typedi": "^0.10.0",
     "uuid": "^9.0.1",
+    "vanilla-jsoneditor": "^2.3.3",
     "vue": "^3.5.1",
     "vue-i18n": "^9.4.0",
     "vue-router": "^4.2.2",
diff --git a/src/components/Preview.vue b/src/components/Preview.vue
index d2ed050..17d417a 100644
--- a/src/components/Preview.vue
+++ b/src/components/Preview.vue
@@ -32,6 +32,9 @@ import { getOperationDetails } from '../obp/resource-docs'
 import { ElNotification, FormInstance } from 'element-plus'
 import { OBP_API_VERSION, get, create, update, discard, createEntitlement, getCurrentUser } from '../obp'
 import { obpResourceDocsKey } from '@/obp/keys'
+import JsonEditorVue from 'json-editor-vue'
+import { Mode } from 'vanilla-jsoneditor'
+import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
 import * as cheerio from 'cheerio'
 
 const elMessageDuration = 5500
@@ -41,6 +44,8 @@ const roleName = ref('')
 const method = ref('')
 const header = ref('')
 const responseHeaderTitle = ref('TYPICAL SUCCESSFUL RESPONSE')
+const exampleBodyTitle = ref('REQUEST BODY')
+const oldExampleBodyContent = ref('')
 const successResponseBody = ref('')
 const exampleRequestBody = ref('')
 const requiredRoles = ref([])
@@ -71,7 +76,7 @@ const setOperationDetails = (id: string, version: string): void => {
   const operation = getOperationDetails(version, id, resourceDocs)
   url.value = operation?.specified_url
   method.value = operation?.request_verb
-  exampleRequestBody.value = JSON.stringify(operation.example_request_body)
+  exampleRequestBody.value = operation.example_request_body
   requiredRoles.value = operation.roles || []
   possibleErrors.value = operation.error_response_bodies
   connectorMethods.value = operation.connector_methods
@@ -120,11 +125,11 @@ const submitRequest = async () => {
   if (url.value) {
     switch (method.value) {
       case 'POST': {
-        highlightCode(await create(url.value, exampleRequestBody.value))
+        highlightCode(await create(url.value, JSON.stringify(exampleRequestBody.value)))
         break
       }
       case 'PUT': {
-        highlightCode(await update(url.value, exampleRequestBody.value))
+        highlightCode(await update(url.value, JSON.stringify(exampleRequestBody.value)))
         break
       }
       case 'DELETE': {
@@ -234,6 +239,26 @@ const copyToClipboard = () => {
   });
 };
 
+const onJsonEditorChange = (updatedContent) => {
+  oldExampleBodyContent.value = exampleRequestBody.value;
+  try {
+    updatedContent = JSON.parse(JSON.stringify(updatedContent))
+    exampleRequestBody.value = updatedContent;
+  } catch (e) {
+    exampleRequestBody.value = oldExampleBodyContent.value;
+    console.log(`JSON not valid: ${e}`);
+  }
+  
+}
+
+const onError = (error) => {
+  console.error(error)
+  try {
+    exampleRequestBody.value = oldExampleBodyContent.value
+  } catch (e) {
+    console.error(e)
+  }
+}
 
 </script>
 
@@ -259,8 +284,19 @@ const copyToClipboard = () => {
         placeholder="Request Header (Header1:Value1::Header2:Value2)"
       />
     </div>
-    <div class="flex-preview-panel">
-      <input type="text" v-model="exampleRequestBody" />
+    <p v-show="exampleRequestBody" class="header-container">{{ exampleBodyTitle }}:</p>
+    <div class="flex-preview-panel" v-show="exampleRequestBody">
+      <!-- <textarea v-model="exampleRequestBody" rows="8" cols="40"></textarea> -->
+      <!-- <input type="text" v-model="exampleRequestBody" /> -->
+      <!-- <pre>{{ JSON.stringify(exampleRequestBody, null, 2) }}</pre> -->
+      <JsonEditorVue
+        v-model="exampleRequestBody"
+        class="jse-theme-dark"
+        :stringified="true"
+        :mode="Mode.tree"
+        v-bind="{/* local props & attrs */}"
+        :onChange="onJsonEditorChange"
+      />
     </div>
     <div v-show="successResponseBody">
       <p class="header-container">{{ responseHeaderTitle }}:</p>
diff --git a/yarn.lock b/yarn.lock
index ed4d60f..5aa99f6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,13 +2,13 @@
 # yarn lockfile v1
 
 
-"@ampproject/remapping@^2.2.0":
-  version "2.2.1"
-  resolved "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz"
-  integrity sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==
+"@ampproject/remapping@^2.2.0", "@ampproject/remapping@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz"
+  integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==
   dependencies:
-    "@jridgewell/gen-mapping" "^0.3.0"
-    "@jridgewell/trace-mapping" "^0.3.9"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.24"
 
 "@antfu/utils@^0.7.10":
   version "0.7.10"
@@ -273,6 +273,80 @@
     "@babel/helper-string-parser" "^7.25.9"
     "@babel/helper-validator-identifier" "^7.25.9"
 
+"@codemirror/autocomplete@^6.18.1":
+  version "6.18.4"
+  resolved "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.4.tgz"
+  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.7.1":
+  version "6.8.0"
+  resolved "https://registry.npmjs.org/@codemirror/commands/-/commands-6.8.0.tgz"
+  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":
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz"
+  integrity sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@lezer/json" "^1.0.0"
+
+"@codemirror/language@^6.0.0", "@codemirror/language@^6.10.3", "@codemirror/language@^6.9.0":
+  version "6.10.8"
+  resolved "https://registry.npmjs.org/@codemirror/language/-/language-6.10.8.tgz"
+  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/lint@^6.8.2":
+  version "6.8.4"
+  resolved "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.4.tgz"
+  integrity sha512-u4q7PnZlJUojeRe8FJa/njJcMctISGgPQ4PnWsd9268R4ZTtU+tfFYmwkBvgcrK2+QQ8tYFVALVb5fVJykKc5A==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.35.0"
+    crelt "^1.0.5"
+
+"@codemirror/search@^6.5.6":
+  version "6.5.8"
+  resolved "https://registry.npmjs.org/@codemirror/search/-/search-6.5.8.tgz"
+  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.2.1", "@codemirror/state@^6.4.0", "@codemirror/state@^6.4.1", "@codemirror/state@^6.5.0":
+  version "6.5.1"
+  resolved "https://registry.npmjs.org/@codemirror/state/-/state-6.5.1.tgz"
+  integrity sha512-3rA9lcwciEB47ZevqvD8qgbzhM9qMb8vCcQCNmDfVRPQG4JT9mSb0Jg8H7YjKGGQcFnLN323fj9jdnG59Kx6bg==
+  dependencies:
+    "@marijn/find-cluster-break" "^1.0.0"
+
+"@codemirror/view@^6.0.0", "@codemirror/view@^6.17.0", "@codemirror/view@^6.17.1", "@codemirror/view@^6.23.0", "@codemirror/view@^6.27.0", "@codemirror/view@^6.34.1", "@codemirror/view@^6.35.0":
+  version "6.36.2"
+  resolved "https://registry.npmjs.org/@codemirror/view/-/view-6.36.2.tgz"
+  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"
@@ -401,6 +475,25 @@
   resolved "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.1.0.tgz"
   integrity sha512-cFRRC1s6RqPygeZ8Uw/acwVHqih8Czjt6Q0MwoUoDe9U3m4dH1HmNDRBZyqlMSFwgNAUKgFImncKdmDHyKpwdg==
 
+"@fortawesome/fontawesome-common-types@6.7.2":
+  version "6.7.2"
+  resolved "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz"
+  integrity sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==
+
+"@fortawesome/free-regular-svg-icons@^6.6.0":
+  version "6.7.2"
+  resolved "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.7.2.tgz"
+  integrity sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.7.2"
+
+"@fortawesome/free-solid-svg-icons@^6.6.0":
+  version "6.7.2"
+  resolved "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz"
+  integrity sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.7.2"
+
 "@highlightjs/vue-plugin@^2.1.0":
   version "2.1.0"
   resolved "https://registry.npmjs.org/@highlightjs/vue-plugin/-/vue-plugin-2.1.0.tgz"
@@ -474,7 +567,7 @@
   dependencies:
     "@sinclair/typebox" "^0.27.8"
 
-"@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.5":
+"@jridgewell/gen-mapping@^0.3.5":
   version "0.3.5"
   resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz"
   integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
@@ -493,12 +586,12 @@
   resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz"
   integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
 
-"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.13", "@jridgewell/sourcemap-codec@^1.4.14", "@jridgewell/sourcemap-codec@^1.5.0":
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.13", "@jridgewell/sourcemap-codec@^1.4.14", "@jridgewell/sourcemap-codec@^1.4.15", "@jridgewell/sourcemap-codec@^1.5.0":
   version "1.5.0"
   resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz"
   integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
 
-"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25", "@jridgewell/trace-mapping@^0.3.9":
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
   version "0.3.25"
   resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz"
   integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
@@ -514,6 +607,21 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@jsep-plugin/assignment@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/@jsep-plugin/assignment/-/assignment-1.3.0.tgz"
+  integrity sha512-VVgV+CXrhbMI3aSusQyclHkenWSAm95WaiKrMxRFam3JSUiIaQjoMIw2sEs/OX4XifnqeQUN4DYbJjlA8EfktQ==
+
+"@jsep-plugin/regex@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/@jsep-plugin/regex/-/regex-1.0.4.tgz"
+  integrity sha512-q7qL4Mgjs1vByCaTnDFcBnV9HS7GVPJX5vyVoCgZHNSC9rjwIlmbXG5sUuorR5ndfHAIlJ8pVStxvjXHbNvtUg==
+
+"@jsonquerylang/jsonquery@^3.1.1 || ^4.0.0":
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/@jsonquerylang/jsonquery/-/jsonquery-4.1.1.tgz"
+  integrity sha512-Rfyvq70Zrb561BqSuXLsl0rG0/1tz913EQDL/4zpkp+laFGUxXIVPSaJWcdREJwADXLZDkQyaWplzEaPQvh+7A==
+
 "@koa/multer@^3.0.2":
   version "3.0.2"
   resolved "https://registry.npmjs.org/@koa/multer/-/multer-3.0.2.tgz"
@@ -531,6 +639,39 @@
     methods "^1.1.2"
     path-to-regexp "^6.2.1"
 
+"@lezer/common@^1.0.0", "@lezer/common@^1.1.0", "@lezer/common@^1.2.0":
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz"
+  integrity sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==
+
+"@lezer/highlight@^1.0.0", "@lezer/highlight@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz"
+  integrity sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+
+"@lezer/json@^1.0.0":
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/@lezer/json/-/json-1.0.3.tgz"
+  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":
+  version "1.4.2"
+  resolved "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz"
+  integrity sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+
+"@marijn/find-cluster-break@^1.0.0":
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz"
+  integrity sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
@@ -606,6 +747,11 @@
   resolved "https://registry.npmjs.org/@redis/time-series/-/time-series-1.0.5.tgz"
   integrity sha512-IFjIgTusQym2B5IZJG3XKr5llka7ey84fw/NOYqESP5WUfQs9zz1ww/9+qoz4ka/S6KcGBodzlCeZ5UImKbscg==
 
+"@replit/codemirror-indentation-markers@^6.5.3":
+  version "6.5.3"
+  resolved "https://registry.npmjs.org/@replit/codemirror-indentation-markers/-/codemirror-indentation-markers-6.5.3.tgz"
+  integrity sha512-hL5Sfvw3C1vgg7GolLe/uxX5T3tmgOA3ZzqlMv47zjU1ON51pzNWiVbS22oh6crYhtVhv8b3gdXwoYp++2ilHw==
+
 "@rollup/plugin-inject@^5.0.3":
   version "5.0.3"
   resolved "https://registry.npmjs.org/@rollup/plugin-inject/-/plugin-inject-5.0.3.tgz"
@@ -639,6 +785,11 @@
   resolved "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz"
   integrity sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==
 
+"@sphinxxxx/color-conversion@^2.2.2":
+  version "2.2.2"
+  resolved "https://registry.npmjs.org/@sphinxxxx/color-conversion/-/color-conversion-2.2.2.tgz"
+  integrity sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw==
+
 "@tsconfig/node10@^1.0.7":
   version "1.0.9"
   resolved "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz"
@@ -683,7 +834,7 @@
   dependencies:
     "@types/node" "*"
 
-"@types/estree@^1.0.0", "@types/estree@^1.0.6":
+"@types/estree@^1.0.0", "@types/estree@^1.0.5", "@types/estree@^1.0.6":
   version "1.0.6"
   resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz"
   integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
@@ -1130,12 +1281,17 @@ acorn-jsx@^5.3.2:
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
+acorn-typescript@^1.4.13:
+  version "1.4.13"
+  resolved "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz"
+  integrity sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==
+
 acorn-walk@^8.1.1, acorn-walk@^8.2.0:
   version "8.2.0"
   resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz"
   integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
 
-"acorn@^6.0.0 || ^7.0.0 || ^8.0.0", acorn@^8.14.0, acorn@^8.4.1, acorn@^8.8.2, acorn@^8.9.0:
+"acorn@^6.0.0 || ^7.0.0 || ^8.0.0", acorn@^8.12.1, acorn@^8.14.0, acorn@^8.4.1, acorn@^8.8.2, acorn@^8.9.0, acorn@>=8.9.0:
   version "8.14.0"
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz"
   integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
@@ -1160,6 +1316,16 @@ ajv@^6.12.4:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+ajv@^8.17.1:
+  version "8.17.1"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz"
+  integrity sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    fast-uri "^3.0.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+
 alien-signals@^0.4.9:
   version "0.4.14"
   resolved "https://registry.npmjs.org/alien-signals/-/alien-signals-0.4.14.tgz"
@@ -1220,6 +1386,11 @@ argparse@^2.0.1:
   resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
+aria-query@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz"
+  integrity sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==
+
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz"
@@ -1284,6 +1455,11 @@ axios@^1.7.4:
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
+axobject-query@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz"
+  integrity sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==
+
 backo2@1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz"
@@ -1656,6 +1832,11 @@ class-validator@^0.14.0:
     libphonenumber-js "^1.10.14"
     validator "^13.7.0"
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 cluster-key-slot@1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz"
@@ -1676,6 +1857,11 @@ co@^4.6.0:
   resolved "https://registry.npmjs.org/co/-/co-4.6.0.tgz"
   integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==
 
+codemirror-wrapped-line-indent@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/codemirror-wrapped-line-indent/-/codemirror-wrapped-line-indent-1.0.8.tgz"
+  integrity sha512-5UwuHCz4oAZuvot1DbfFxSxJacTESdNGa/KpJD7HfpVpDAJdgB1vV9OG4b4pkJqPWuOfIpFLTQEKS85kTpV+XA==
+
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
@@ -1872,6 +2058,11 @@ create-require@^1.1.0, create-require@^1.1.1:
   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.npmjs.org/crelt/-/crelt-1.0.6.tgz"
+  integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==
+
 cross-spawn@^7.0.0, cross-spawn@^7.0.6:
   version "7.0.6"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz"
@@ -2049,7 +2240,7 @@ dezalgo@^1.0.4:
     asap "^2.0.0"
     wrappy "1"
 
-diff-sequences@^29.4.3:
+diff-sequences@^29.4.3, diff-sequences@^29.6.3:
   version "29.6.3"
   resolved "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz"
   integrity sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==
@@ -2454,6 +2645,11 @@ eslint-visitor-keys@^4.2.0:
     natural-compare "^1.4.0"
     optionator "^0.9.3"
 
+esm-env@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz"
+  integrity sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==
+
 espree@^10.0.1, espree@^10.3.0:
   version "10.3.0"
   resolved "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz"
@@ -2479,6 +2675,13 @@ esquery@^1.4.0, esquery@^1.5.0:
   dependencies:
     estraverse "^5.1.0"
 
+esrap@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.npmjs.org/esrap/-/esrap-1.4.3.tgz"
+  integrity sha512-Xddc1RsoFJ4z9nR7W7BFaEPIp4UXoeQ0+077UdWLxbafMQFyU79sQJMk7kxNgRwQ9/aVgaKacCHC2pUACGwmYw==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+
 esrecurse@^4.3.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz"
@@ -2613,6 +2816,11 @@ fast-safe-stringify@^2.1.1:
   resolved "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz"
   integrity sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==
 
+fast-uri@^3.0.1:
+  version "3.0.6"
+  resolved "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz"
+  integrity sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==
+
 fastq@^1.6.0:
   version "1.15.0"
   resolved "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz"
@@ -3044,6 +3252,11 @@ ignore@^5.2.0, ignore@^5.3.1:
   resolved "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz"
   integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
 
+immutable-json-patch@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/immutable-json-patch/-/immutable-json-patch-6.0.1.tgz"
+  integrity sha512-BHL/cXMjwFZlTOffiWNdY8ZTvNyYLrutCnWxrcKPHr5FqpAb6vsO6WWSPnVSys3+DruFN6lhHJJPHi8uELQL5g==
+
 import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
@@ -3151,6 +3364,13 @@ is-potential-custom-element-name@^1.0.1:
   resolved "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz"
   integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
 
+is-reference@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz"
+  integrity sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==
+  dependencies:
+    "@types/estree" "^1.0.6"
+
 is-typed-array@^1.1.10, is-typed-array@^1.1.3:
   version "1.1.10"
   resolved "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz"
@@ -3196,6 +3416,11 @@ jackspeak@^3.1.2:
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
+jmespath@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.npmjs.org/jmespath/-/jmespath-0.16.0.tgz"
+  integrity sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==
+
 js-beautify@^1.14.9:
   version "1.15.1"
   resolved "https://registry.npmjs.org/js-beautify/-/js-beautify-1.15.1.tgz"
@@ -3256,6 +3481,11 @@ jsdom@*, jsdom@^25.0.1:
     ws "^8.18.0"
     xml-name-validator "^5.0.0"
 
+jsep@^0.4.0||^1.0.0, jsep@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/jsep/-/jsep-1.4.0.tgz"
+  integrity sha512-B7qPcEVE3NVkmSJbaYxvv4cHkVW7DQsZz13pUMrfS8z8Q/BuShN+gcTXrUlPiGqM2/t/EEaI030bpxMqY8gMlw==
+
 jsesc@^3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz"
@@ -3266,6 +3496,14 @@ json-buffer@3.0.1:
   resolved "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
+json-editor-vue@^0.17.3:
+  version "0.17.3"
+  resolved "https://registry.npmjs.org/json-editor-vue/-/json-editor-vue-0.17.3.tgz"
+  integrity sha512-MVpD3TInIlruq9ye/J3XmYHTH+pqfyW0E1GVUV2ug5M0X/19zGslJ+FgeikDflvTVUxhVuCEnc9spMYmPj5Lyw==
+  dependencies:
+    vanilla-jsoneditor "^2.0.0"
+    vue-demi "^0.14.10"
+
 json-parse-even-better-errors@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-4.0.0.tgz"
@@ -3276,6 +3514,16 @@ json-schema-traverse@^0.4.1:
   resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
   integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
+json-schema-traverse@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz"
+  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
+
+json-source-map@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.npmjs.org/json-source-map/-/json-source-map-0.6.1.tgz"
+  integrity sha512-1QoztHPsMQqhDq0hlXY5ZqcEdUzxQEIxgFkKl4WUp2pgShObl+9ovi4kRh2TfvAfxAoHOJ9vIMEqk3k4iex7tg==
+
 json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz"
@@ -3286,6 +3534,20 @@ json5@^2.2.3:
   resolved "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
+"jsonpath-plus@^9.0.0 || ^10.2.0":
+  version "10.2.0"
+  resolved "https://registry.npmjs.org/jsonpath-plus/-/jsonpath-plus-10.2.0.tgz"
+  integrity sha512-T9V+8iNYKFL2n2rF+w02LBOT2JjDnTjioaNFrxRy0Bv1y/hNsqR/EBK7Ojy2ythRHwmz2cRIls+9JitQGZC/sw==
+  dependencies:
+    "@jsep-plugin/assignment" "^1.3.0"
+    "@jsep-plugin/regex" "^1.0.4"
+    jsep "^1.4.0"
+
+jsonrepair@^3.0.0:
+  version "3.11.2"
+  resolved "https://registry.npmjs.org/jsonrepair/-/jsonrepair-3.11.2.tgz"
+  integrity sha512-ejydGcTq0qKk1r0NUBwjtvswbPFhs19+QEfwSeGwB8KJZ59W7/AOFmQh04c68mkJ+2hGk+OkOmkr2bKG4tGlLQ==
+
 jsonwebtoken@^9.0.2:
   version "9.0.2"
   resolved "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz"
@@ -3416,6 +3678,11 @@ local-pkg@^0.5.0, local-pkg@^0.5.1:
     mlly "^1.7.3"
     pkg-types "^1.2.1"
 
+locate-character@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz"
+  integrity sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==
+
 locate-path@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz"
@@ -3735,6 +4002,11 @@ nanoid@^3.3.7:
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
+natural-compare-lite@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz"
+  integrity sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
@@ -4337,6 +4609,11 @@ reflect-metadata@^0.1.13:
   resolved "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz"
   integrity sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==
 
+require-from-string@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz"
+  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
@@ -4779,6 +5056,11 @@ strip-literal@^2.1.0:
   dependencies:
     js-tokens "^9.0.0"
 
+style-mod@^4.0.0, style-mod@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz"
+  integrity sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==
+
 superagent@^8.0.9:
   version "8.1.2"
   resolved "https://registry.npmjs.org/superagent/-/superagent-8.1.2.tgz"
@@ -4822,6 +5104,26 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+"svelte@^3.54.0 || ^4.0.0 || ^5.0.0":
+  version "5.19.1"
+  resolved "https://registry.npmjs.org/svelte/-/svelte-5.19.1.tgz"
+  integrity sha512-H/Vs2O51bwILZbaNUSdr4P1NbLpOGsxl4jJAjd88ELjzRgeRi1BHqexcVGannDr7D1pmTYWWajzHOM7bMbtB9Q==
+  dependencies:
+    "@ampproject/remapping" "^2.3.0"
+    "@jridgewell/sourcemap-codec" "^1.5.0"
+    "@types/estree" "^1.0.5"
+    acorn "^8.12.1"
+    acorn-typescript "^1.4.13"
+    aria-query "^5.3.1"
+    axobject-query "^4.1.0"
+    clsx "^2.1.1"
+    esm-env "^1.2.1"
+    esrap "^1.4.3"
+    is-reference "^3.0.3"
+    locate-character "^3.0.0"
+    magic-string "^0.30.11"
+    zimmerframe "^1.1.2"
+
 svg-tags@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz"
@@ -5156,6 +5458,45 @@ validator@^13.7.0:
   resolved "https://registry.npmjs.org/validator/-/validator-13.9.0.tgz"
   integrity sha512-B+dGG8U3fdtM0/aNK4/X8CXq/EcxU2WPrPEkJGslb47qyHsxmbggTWK0yEA4qnYVNF+nxNlN88o14hIcPmSIEA==
 
+vanilla-jsoneditor@^2.0.0, vanilla-jsoneditor@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.npmjs.org/vanilla-jsoneditor/-/vanilla-jsoneditor-2.3.3.tgz"
+  integrity sha512-QWhv0Ga11fegT00mdZboGJYbPgvjXh7rvbnIJW3BGsiSEIl/I2j18UdRI0iOLmV5C2iOMsBvpx+zelB8RhVGkA==
+  dependencies:
+    "@codemirror/autocomplete" "^6.18.1"
+    "@codemirror/commands" "^6.7.1"
+    "@codemirror/lang-json" "^6.0.1"
+    "@codemirror/language" "^6.10.3"
+    "@codemirror/lint" "^6.8.2"
+    "@codemirror/search" "^6.5.6"
+    "@codemirror/state" "^6.4.1"
+    "@codemirror/view" "^6.34.1"
+    "@fortawesome/free-regular-svg-icons" "^6.6.0"
+    "@fortawesome/free-solid-svg-icons" "^6.6.0"
+    "@jsonquerylang/jsonquery" "^3.1.1 || ^4.0.0"
+    "@lezer/highlight" "^1.2.1"
+    "@replit/codemirror-indentation-markers" "^6.5.3"
+    ajv "^8.17.1"
+    codemirror-wrapped-line-indent "^1.0.8"
+    diff-sequences "^29.6.3"
+    immutable-json-patch "^6.0.1"
+    jmespath "^0.16.0"
+    json-source-map "^0.6.1"
+    jsonpath-plus "^9.0.0 || ^10.2.0"
+    jsonrepair "^3.0.0"
+    lodash-es "^4.17.21"
+    memoize-one "^6.0.0"
+    natural-compare-lite "^1.4.0"
+    svelte "^3.54.0 || ^4.0.0 || ^5.0.0"
+    vanilla-picker "^2.12.3"
+
+vanilla-picker@^2.12.3:
+  version "2.12.3"
+  resolved "https://registry.npmjs.org/vanilla-picker/-/vanilla-picker-2.12.3.tgz"
+  integrity sha512-qVkT1E7yMbUsB2mmJNFmaXMWE2hF8ffqzMMwe9zdAikd8u2VfnsVY2HQcOUi2F38bgbxzlJBEdS1UUhOXdF9GQ==
+  dependencies:
+    "@sphinxxxx/color-conversion" "^2.2.2"
+
 vary@^1, vary@^1.1.2, vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz"
@@ -5300,7 +5641,7 @@ vue-tsc@^2.0.0:
     "@volar/typescript" "~2.4.11"
     "@vue/language-core" "2.2.0"
 
-"vue@^2.6.14 || ^3.5.11", vue@^3, vue@^3.0.0, "vue@^3.0.0-0 || ^2.6.0", vue@^3.2.0, vue@^3.2.25, vue@^3.5.1, "vue@2 || 3", vue@3.5.13:
+"vue@^2.6.14 || ^3.5.11", vue@^3, vue@^3.0.0, "vue@^3.0.0-0 || ^2.6.0", vue@^3.2.0, vue@^3.2.25, vue@^3.5.1, "vue@2 || 3", vue@2||3, vue@3.5.13:
   version "3.5.13"
   resolved "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz"
   integrity sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==
@@ -5311,6 +5652,11 @@ vue-tsc@^2.0.0:
     "@vue/server-renderer" "3.5.13"
     "@vue/shared" "3.5.13"
 
+w3c-keyname@^2.2.4:
+  version "2.2.8"
+  resolved "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz"
+  integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==
+
 w3c-xmlserializer@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz"
@@ -5494,3 +5840,8 @@ yocto-queue@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz"
   integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
+
+zimmerframe@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz"
+  integrity sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==

From dc7ee3aaecf62f5fe1df37088029eef45bb78893 Mon Sep 17 00:00:00 2001
From: nemo <nemozak1@gmail.com>
Date: Tue, 21 Jan 2025 16:12:01 +0000
Subject: [PATCH 4/8] improve styling for jsoneditor

---
 src/components/Preview.vue | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/Preview.vue b/src/components/Preview.vue
index 17d417a..b0ba611 100644
--- a/src/components/Preview.vue
+++ b/src/components/Preview.vue
@@ -289,14 +289,16 @@ const onError = (error) => {
       <!-- <textarea v-model="exampleRequestBody" rows="8" cols="40"></textarea> -->
       <!-- <input type="text" v-model="exampleRequestBody" /> -->
       <!-- <pre>{{ JSON.stringify(exampleRequestBody, null, 2) }}</pre> -->
-      <JsonEditorVue
-        v-model="exampleRequestBody"
-        class="jse-theme-dark"
-        :stringified="true"
-        :mode="Mode.tree"
-        v-bind="{/* local props & attrs */}"
-        :onChange="onJsonEditorChange"
-      />
+      <div class="json-editor jse-theme-dark">
+        <JsonEditorVue
+          v-model="exampleRequestBody"
+          :stringified="true"
+          :mode="Mode.tree"
+          v-bind="{/* local props & attrs */}"
+          :onChange="onJsonEditorChange"
+        />
+      </div>
+      
     </div>
     <div v-show="successResponseBody">
       <p class="header-container">{{ responseHeaderTitle }}:</p>
@@ -439,6 +441,11 @@ li {
   background-color: var(--el-border-color-light);
   z-index: var(--el-index-normal);
 }
+.json-editor {
+  --jse-theme-color: #253047;
+  --jse-theme-color-highlight: #4a5c84;
+  --jse-font-family-mono: 'Roboto', 'Courier New', monospace;
+}
 .flex-preview-panel {
   display: flex;
   flex-direction: row;

From d7ce2e30e72c34d65f1f30d0c35437920b3ee8df Mon Sep 17 00:00:00 2001
From: nemo <nemozak1@gmail.com>
Date: Wed, 22 Jan 2025 10:17:45 +0000
Subject: [PATCH 5/8] Add link to default style vars in the json-editor css

---
 src/components/Preview.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Preview.vue b/src/components/Preview.vue
index b0ba611..11ff2b2 100644
--- a/src/components/Preview.vue
+++ b/src/components/Preview.vue
@@ -442,6 +442,7 @@ li {
   z-index: var(--el-index-normal);
 }
 .json-editor {
+  /* the list of default vars to change can be found here: https://github.com/josdejong/svelte-jsoneditor/blob/main/src/lib/themes/defaults.scss */
   --jse-theme-color: #253047;
   --jse-theme-color-highlight: #4a5c84;
   --jse-font-family-mono: 'Roboto', 'Courier New', monospace;

From c43e78ee2f513f91b3baf00b0f2d0177bdea4d62 Mon Sep 17 00:00:00 2001
From: nemo <nemozak1@gmail.com>
Date: Wed, 22 Jan 2025 14:17:55 +0000
Subject: [PATCH 6/8] add better error logging to socket

---
 src/stores/connection.ts | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/stores/connection.ts b/src/stores/connection.ts
index d174b13..d663224 100644
--- a/src/stores/connection.ts
+++ b/src/stores/connection.ts
@@ -44,13 +44,33 @@ export const useConnectionStore = defineStore("connection", {
      */
     bindEvents() {
       socket.on("connect", () => {
-        console.log("websocket connection established")
+        console.log("connectionStore says: websocket connection established")
         this.isConnected = true;
       });
 
-      socket.on("disconnect", () => {
+      socket.on("reconnecting", (reconnectionNo) => {
+        console.log(`connectionStore says: attempting recconnection... tried ${reconnectionNo} time(s) `)
+        this.isConnected = true;
+      });
+
+      // Handle errors and disconnections
+      socket.on("disconnect", (error) => {
         this.isConnected = false;
+        console.error("connectionStore says: socket disconnected", error)
+      });
+      
+      socket.on("connect_timeout", (error) => {
+        console.error("connectionStore says: socket connection timeout", error)
       });
+
+      socket.on("connect_error", (error) => {
+        console.error("connectionStore says: websocket connection error", error)
+      });
+
+      socket.on("connect_failed", (error) => {
+        console.error("connectionStore says: websocket connection failed", error)
+      });
+
     },
 
     /**

From 73dd4c906b44fd00cef60b89aa9ba3c523f2afea Mon Sep 17 00:00:00 2001
From: nemo <nemozak1@gmail.com>
Date: Thu, 13 Feb 2025 11:40:49 +0000
Subject: [PATCH 7/8] improve styling for json editor

---
 src/components/Preview.vue | 39 +++++++++++++++++++++++++++++++-------
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/components/Preview.vue b/src/components/Preview.vue
index 11ff2b2..b23cf3a 100644
--- a/src/components/Preview.vue
+++ b/src/components/Preview.vue
@@ -284,11 +284,8 @@ const onError = (error) => {
         placeholder="Request Header (Header1:Value1::Header2:Value2)"
       />
     </div>
-    <p v-show="exampleRequestBody" class="header-container">{{ exampleBodyTitle }}:</p>
-    <div class="flex-preview-panel" v-show="exampleRequestBody">
-      <!-- <textarea v-model="exampleRequestBody" rows="8" cols="40"></textarea> -->
-      <!-- <input type="text" v-model="exampleRequestBody" /> -->
-      <!-- <pre>{{ JSON.stringify(exampleRequestBody, null, 2) }}</pre> -->
+    <div class="json-editor-container" v-show="exampleRequestBody">
+      <p v-show="exampleRequestBody" class="header-container request-body-header">{{ exampleBodyTitle }}:</p>
       <div class="json-editor jse-theme-dark">
         <JsonEditorVue
           v-model="exampleRequestBody"
@@ -441,11 +438,39 @@ li {
   background-color: var(--el-border-color-light);
   z-index: var(--el-index-normal);
 }
+.request-body-header {
+  background-color: #010B20;
+  margin-right: auto;
+  margin-top: 0;
+}
+.json-editor-container {
+  display: flex;
+  flex-direction: column;
+  margin-left: -25px;
+  margin-right: -25px;
+  background-color: #010B20;
+  padding: 25px 25px 25px 25px;
+}
 .json-editor {
   /* the list of default vars to change can be found here: https://github.com/josdejong/svelte-jsoneditor/blob/main/src/lib/themes/defaults.scss */
-  --jse-theme-color: #253047;
-  --jse-theme-color-highlight: #4a5c84;
+  width: 100%;
+  margin-left: -5px;
+  margin-right: -5px;
+  --jse-theme-color: #010B20;
+  --jse-key-color: #ffffff;
+  --jse-value-color: #6a8759;
+  --jse-value-color-string: #6a8759;
+  --jse-background-color: #010B20;
+  --jse-context-menu-background: #010B20;
+  --jse-theme-color-highlight: #010B20;
+  --jse-context-menu-pointer-hover-background: #253047;
+  --jse-context-menu-background-highlight: #253047;
+  --jse-context-menu-pointer-background: #253047;
+  --jse-context-menu-tip-background: #253047;
+  --jse-modal-background: #010B20;
+  --jse-panel-background: #010B20;
   --jse-font-family-mono: 'Roboto', 'Courier New', monospace;
+  --jse-main-border: none;
 }
 .flex-preview-panel {
   display: flex;

From 44bc0b41fb2d869da7d5bb7d136b6c3c09ca9960 Mon Sep 17 00:00:00 2001
From: nemo <nemozak1@gmail.com>
Date: Thu, 13 Feb 2025 12:31:01 +0000
Subject: [PATCH 8/8] improve styling on success response body

---
 src/components/Preview.vue | 33 ++++++++++++++++++++++++++-------
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/components/Preview.vue b/src/components/Preview.vue
index b23cf3a..d28bea8 100644
--- a/src/components/Preview.vue
+++ b/src/components/Preview.vue
@@ -297,10 +297,14 @@ const onError = (error) => {
       </div>
       
     </div>
-    <div v-show="successResponseBody">
-      <p class="header-container">{{ responseHeaderTitle }}:</p>
-      <pre><button @click="copyToClipboard" class="copy-button icon-md-heavy" title="Copy to Clipboard"><i class="material-icons">content_copy</i></button>
-        <code><div id="code" v-html="successResponseBody"></div></code></pre>
+    <div v-show="successResponseBody" class="success-response-container">
+      <div class="success-response-header-container">
+        <p class="header-container success-response-header">{{ responseHeaderTitle }}:</p>
+        <button @click="copyToClipboard" class="copy-button icon-md-heavy" title="Copy to Clipboard"><i class="material-icons">content_copy</i></button>
+      </div>
+      <pre>
+        <code><div id="code" v-html="successResponseBody"></div></code>
+      </pre>
     </div>
     <el-form ref="roleFormRef" :model="roleForm">
       <div v-show="showRequiredRoles">
@@ -393,12 +397,11 @@ span {
   font-size: 28px;
 }
 pre {
-  margin-left: -25px;
-  margin-right: -25px;
-  padding: 30px 30px 10px 30px;
+  padding: 0px 30px 0px 30px;
   max-height: 340px;
   background-color: #253047;
   font-size: 14px;
+  margin: 0;
   font-family: 'Roboto';
   font-weight: normal;
 }
@@ -523,6 +526,22 @@ li {
 #conector-method-link {
   color: white !important;
 }
+.success-response-header-container {
+  margin-left: 25px;
+  margin-right: 25px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background-color: #253047;
+}
+.success-response-header {
+  margin-top: 25px;
+}
+.success-response-container{
+  background-color: #253047;
+  margin-right: -25px;
+  margin-left: -25px;
+}
 .copy-button {
   background: none;
   border: none;